https://github.com/codex-team/moduledispatcher
CodeX Module Dispatcher
https://github.com/codex-team/moduledispatcher
Last synced: about 2 months ago
JSON representation
CodeX Module Dispatcher
- Host: GitHub
- URL: https://github.com/codex-team/moduledispatcher
- Owner: codex-team
- License: mit
- Created: 2018-01-12T21:16:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-31T17:02:27.000Z (about 6 years ago)
- Last Synced: 2025-04-14T23:07:50.974Z (about 2 months ago)
- Language: JavaScript
- Size: 63.5 KB
- Stars: 8
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```js
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
```js
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.
```html
```
You can init multiple Modules on one node as well
```html
```
## 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 `` tag:
```html
{
// your module's settings ESCAPED by smth like PHP's htmlspecialchars()
}
```
For several Modules on one node, your settings should be an Array
```html
[
{
// Module 1 settings
},
{
// Module 2 settings
},
...
]
```
## Issues and improvements
Ask a question or report a bug on the [create issue page](https://github.com/codex-team/moduleDispatcher/issues/new).
Know how to improve ModuleDispatcher? [Fork it](https://github.com/codex-team/moduleDispatcher) and send pull request.
You can also drop a few lines to [CodeX Team's email](mailto:[email protected]).
## License
[MIT](https://github.com/codex-team/dispatcher/LICENSE)