CodeX Module Dispatcher
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
src
.babelrc
.eslintrc
.gitignore
.jshintrc
LICENSE
README.md
bundleComment.js
package.json
webpack.config.js

README.md

CodeX Module Dispatcher

Class for frontend Modules initialization from the DOM without inline scripts

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.

Don't forget to add an attribute hidden to the <module-settings> tag

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

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

<div data-module="module1 module2">
    <module-settings hidden>
        [
            {
                // Module 1 settings
            },
            {
                // Module 2 settings
            },
            ...
        ]
    </module-settings>
</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

Copyright (c) 2018 CodeX Team team@ifmo.su

About CodeX Team

CodeX is a new team based in ITMO University, unifying students and graduates interested in web-development, design and studying new technologies in practice.

https://ifmo.su