Dataapi:
Intro
Basic module to declaratively define components using a data-*
API.
Getting Started
Defining a component:
HTML:
JavaScript:
; const factories = 'Example' Example;const d = ;const comps = dstart // 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 = default;
ES2015 modules
;
- Create a Map of factories The map should be created like:
const factories = '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 = ;
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 = ;
By doing this, you could then define your components like this in your HTML:
- Call the
start()
method to boostrap your application
dstart;
Since all the API method return a Promise, you could do the following:
d;
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