Pmx-dataapi NPM

Dataapi:

Intro

Basic module to declaratively define components using a data-* API.

Getting Started

Defining a component:

HTML:

<div data-api-component=”Example”></div>

JavaScript:

import dataapi from 'pmx-dataapi';

const factories = new Map([['Example', Example]]);
const d = dataapi({
  factories
});
const comps = d.start() // comps will refer to a Map with all the initialized components

How to use

JS Setup

The module can be used with CommonJS and ES2015 modules.

Install the dependency Using Yarn

yarn add pmx-dataapi

or using NPM

npm install pmx-dataapi --save

Include the module

CommonJS

const dataapi = require('pmx-dataapi').default;

ES2015 modules

import dataapi from 'pmx-dataapi';

Create a Map of factories The map should be created like:

const factories = new Map([['Example', Example]]);

Where the value Example represents a Factory function, and the Key is a string that is gonna be used to create the relationship between our DOM element and the Factory. You could define as many as you want.

Call the dataapi factory method using the Map of factories

const d = dataapi({
  factories
});

In this step if you want to customize the namespace used to define your components, you could include the namespaces property, like so:

const d = dataapi({
  namespaces: ['custom']
  factories
});

By doing this, you could then define your components like this in your HTML:

<div data-custom-component=”Example”></div>

Call the start() method to boostrap your application

d.start();

Since all the API method return a Promise, you could do the following:

d.then(function (cmp) {
  console.log('initialized Components', cmp);
}).catch(function(e) {
  console.log('Something went wrong :(', e)
});

API

.start()

returns: Promise that is gonna resolve to a Map containing all the initialized components

.stop()

returns: Promise that is gonna resolve to a boolean indicating if the process of stoping all the components was successful

.getInitializedComponents()

returns: Promise that is gonna resolve to a Map containing all the initialized components

.getSkippedComponents()

returns: Promise that is gonna resolve to a Map containing all the components that were skipped during the initialization process. This could happens when a component was defined in the HTML using a Factory that hasn't been passed to the dataapi factory.