@netcentric/component-loader

Description


Installation

``npm install @netcentric/component-loader`

important!

This module is not transpiled. If your project is excluding node_modules you will have to update regex to include this module.

Eg:

`javascript
// webpack babel-loader config
module.exports = {
exclude: /node_modules\/(?!@netcentric)/,
loader: 'babel-loader',
...
};
`

Here we are excluding node_modules, except the ones under node_modules/@netcentric/*




Usage

1. Register component:
`javascript
register({ componentName: ComponentClass });
`
2. Initialize component
`javascript
runComponent('componentName');
`
or initialize all components
`javascript
run();
`
3. Bind component to DOM
`html



`

$3

#### in the component file you should register your component

`javascript
import { register } from '@netcentric/component-loader';

class Text {
...
}
// register your component to be loaded
register({ Text });
`

#### At your main entry file you should run all registered components

`javascript
import {
observe,
run
} from '@netcentric/component-loader';

// Run all registered component
run();
// Optional: Use observe to initialize new components which are added to the DOM after initial run.
observe();
`

API and examples

This version uses standalone functions to allow tree shaking and to only use necessary parts.




$3

Adding one component

`



`

Adding more than one component

`



`

Defering component instantiation until it enters the viewport

`



`

$3

This method will register components constructor in loaderComponents
You can register individual component, or list

#### Parameters

`
/**
* Constant with a object that contain collection of components classes.
*
* @param {object} newComponents - Components collection { name: definition }
* @param {number} [level] - level of inheritance
*/
const register = (newComponents, level) => {}
`

#### Examples

`javascript

import { register } from '@netcentric/component-loader';
import { title } from 'components/title';
import { text } from 'components/text';

// Add 2 components named title, and text
register({ title, text });

`
Or you can register several components based on proper named exports

`javascript

import { register } from '@netcentric/component-loader';
import * as components from 'components';

// register all components exported as proper named exports on components/index.js

register({ components });

`

Level is used in multilevel inheritance, eg if you have one base project with component HTML,
and want to override just JS part in sub project

1. Base project

`javascript
import { register } from '@netcentric/component-loader';

class Title {
init() {
console.log('level 0 Title');
}
}

register({ Title }, 0);
`

2. Sub project

`javascript
import { register, components } from '@netcentric/component-loader';

class Title extends components[0].Title {
init() {
console.log('level 1 Title');
}
}

register({ Title }, 1);
`

$3

This will run the loader on previously registered components.

#### Parameters

`
/**
* Run the loader on a element to get all attributes that corresponds to a component
* @param {HTMLElement} [element] root element
* @param {string} [initAttr] attribut name
*/
const run = (element = window.document, initAttr = 'data-nc') => {}
`

#### Examples

`javascript

import {
register,
run
} from '@netcentric/component-loader';

// eg components
import { title } from 'components/title';
import { text } from 'components/text';

// Add 2 components named title, and text
register({ title, text });
// then you run so it will create if any HTMLelement with a default attribute have any component to start
run();

// Or load components only on a specific element and search a different attribute like data-components
const main = document.querySelector('main');
run(main, 'data-components');
`

$3

Here is just a constant to store the available constructors (functions or classes) of components.
We store it on its own file so it can be imported into separated files and without having to import the other components logic.

If you want to access all components constructors you can just import it in any file like:

`javascript

import { components } from '@netcentric/component-loader';

`

$3

This object will store all instances of components separated by [className][instanceId].
We store it on its own file, so it can be imported into separated files and without having to import the other components logic.

If you want to access all the instances of components you can just import it in any file like:

`javascript

import { instances } from '@netcentric/component-loader';

const howManyTitles = instances.title.length;

// eg of querying title components by uuid
const getTitleByUUID = (uuid) => instances.title.filter(instance => instance.el.uuid === uuid);
const mytitle = getTitleByUUID('a8c405b5-1928-46ed-afa1-5a0a3f4dde6c');

``