CodeX Module Dispatcher

Class for frontend Modules initialization from the DOM without inline scripts. Calls Modules init() method

Installation

Install npm package

npm i module-dispatcher --save

Usage

Import it in your JavaScript file

import ModuleDispatcher from 'module-dispatcher';

Create an instance of Dispatcher

If your JavaScript Modules are parts of one global Library object, like

• YourLibrary.moduleOne
• YourLibrary.moduleTwo
• YourLibrary.moduleThree

You can instantiate Dispatcher by the following way

new moduleDispatcher({
    Library : YourLibrary
});

If you don't specify Library, your Modules will be called as window.moduleOne by default.

Add Modules to the DOM

Add attribute data-module="yourModuleName" to the HTML Element of the Module you want to init.

<div data-module="comments">
    <!-- Any stuff -->
</div>

You can init multiple Modules on one node as well

<div data-module="comments likes"></div>

Passing settings to the Modules

If your Module has settings, place them via JSON inside the Node with data-module.

Important: escape settings data, so xss vulnerabilities won't ruin your code.

Don't forget to add an attribute hidden to the <textarea> tag

<div data-module="comments">
    <textarea name="module-settings" hidden>
         {
             // your module's settings
         }
    </textarea>
    <!-- Other stuff -->
</div>

For several Modules on one node, your settings should be an Array

<div data-module="module1 module2">
    <textarea name="module-settings" hidden>
        [
            {
                // Module 1 settings
            },
            {
                // Module 2 settings
            },
            ...
        ]
    </textarea>
</div>

Issues and improvements

Ask a question or report a bug on the create issue page.

Know how to improve ModuleDispatcher? Fork it and send pull request.

You can also drop a few lines to CodeX Team's email.

License

MIT