codex-team / moduledispatcher

CodeX Module Dispatcher

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 < you will get < in the textarea. That is not good.

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

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

moduledispatcher's Issues

Как подключить к Vue

Как использовать Dispatcher с Vue?

Когда подключаю к Vue, то в панели разработчика только статус "ready"

Как правильно подключить и как подключить vue компоненты, чтобы они появились в панели как подключенные?

Спасибо.

Do not remove html tags from my data

Use hidden textarea to pass settings instead of <module-settings>

Due to XSS vulnerability. Current scheme (JSON in html-tag) does not work correctly with HTML entities and quotes.

Dispatcher improvement

Keep module instances on memory in SinglePageApplications. Dispatcher needs destroyer to clear out initialized modules and update or init new ones.