Dataapi:

Intro

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

Getting Started

Defining a component:

HTML:

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

JavaScript:

1import dataapi from 'pmx-dataapi';
2
3const factories = new Map([['Example', Example]]);
4const d = dataapi({
5  factories
6});
7const 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

1yarn add pmx-dataapi

or using NPM

1npm install pmx-dataapi --save

• Include the module

CommonJS

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

ES2015 modules

1import dataapi from 'pmx-dataapi';

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

1const 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

1const d = dataapi({
2  factories
3});

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

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

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

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

• Call the start() method to boostrap your application

1d.start();

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

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

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.

Browser Support

• IE 10+
• Chrome
• Firefox
• Safari

This library has been written with some ES2015 features that need to be polyfilled:

• Map
• Set
• Promise
• Object.assign
• Array.from