Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

You should escape module settings data because textarea will try to process HTML special chars.

For &lt; you will get < in the textarea. That is not good.

You need to escape this string so & will be &amp;. This way &lt; will be &amp;lt; in raw HTML. Textarea will show and return &lt;.

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 ESCAPED by smth like PHP's htmlspecialchars()
         }
    </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

About

CodeX Module Dispatcher

Resources

License

Releases

No releases published

Packages

No packages published