{"id":18887994,"url":"https://github.com/codex-team/moduledispatcher","last_synced_at":"2025-04-14T23:07:52.981Z","repository":{"id":57300672,"uuid":"117288773","full_name":"codex-team/moduleDispatcher","owner":"codex-team","description":"CodeX Module Dispatcher","archived":false,"fork":false,"pushed_at":"2019-03-31T17:02:27.000Z","size":65,"stargazers_count":8,"open_issues_count":2,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T23:07:50.974Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codex-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-12T21:16:38.000Z","updated_at":"2024-03-07T00:16:39.000Z","dependencies_parsed_at":"2022-08-26T23:22:59.560Z","dependency_job_id":null,"html_url":"https://github.com/codex-team/moduleDispatcher","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codex-team%2FmoduleDispatcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codex-team%2FmoduleDispatcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codex-team%2FmoduleDispatcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codex-team%2FmoduleDispatcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codex-team","download_url":"https://codeload.github.com/codex-team/moduleDispatcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975316,"owners_count":21192209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T07:41:07.009Z","updated_at":"2025-04-14T23:07:52.962Z","avatar_url":"https://github.com/codex-team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Module Dispatcher\n\nClass for frontend Modules initialization from the DOM without inline scripts. Calls Modules **init()** method\n\n## Installation\n\nInstall npm package\n\n```\nnpm i module-dispatcher --save\n```\n\n## Usage\n\nImport it in your JavaScript file\n\n```js\nimport ModuleDispatcher from 'module-dispatcher';\n```\n\n### Create an instance of Dispatcher\n\nIf your JavaScript Modules are parts of one global `Library` object, like\n\n- YourLibrary.moduleOne\n- YourLibrary.moduleTwo\n- YourLibrary.moduleThree\n\nYou can instantiate Dispatcher by the following way\n\n```js\nnew moduleDispatcher({\n    Library : YourLibrary\n});\n```\n\nIf you don't specify Library, your Modules will be called as `window.moduleOne` by default.\n\n### Add Modules to the DOM\n\nAdd attribute ```data-module=\"yourModuleName\"``` to the HTML Element of the Module you want to init.\n\n```html\n\u003cdiv data-module=\"comments\"\u003e\n    \u003c!-- Any stuff --\u003e\n\u003c/div\u003e\n```\n\nYou can init multiple Modules on one node as well\n\n```html\n\u003cdiv data-module=\"comments likes\"\u003e\u003c/div\u003e\n```\n\n## Passing settings to the Modules\n\nIf your Module has settings, place them via JSON **inside** the Node with data-module.\n\n\u003e ❗️Important\n\u003e\n\u003e You **should escape** module settings data because textarea will try to process HTML special chars.\n\u003e\n\u003e For `\u0026lt;` you will get `\u003c` in the textarea. That is not good.\n\u003e \n\u003e You need to escape this string so `\u0026` will be `\u0026amp;`. This way `\u0026lt;` will be `\u0026amp;lt;` in raw HTML. Textarea will show and return `\u0026lt;`. \n\n\nDon't forget to add an attribute `hidden` to the `\u003ctextarea\u003e` tag:\n\n```html\n\u003cdiv data-module=\"comments\"\u003e\n    \u003ctextarea name=\"module-settings\" hidden\u003e\n         {\n             // your module's settings ESCAPED by smth like PHP's htmlspecialchars()\n         }\n    \u003c/textarea\u003e\n    \u003c!-- Other stuff --\u003e\n\u003c/div\u003e\n```\n\nFor several Modules on one node, your settings should be an Array\n\n```html\n\u003cdiv data-module=\"module1 module2\"\u003e\n    \u003ctextarea name=\"module-settings\" hidden\u003e\n        [\n            {\n                // Module 1 settings\n            },\n            {\n                // Module 2 settings\n            },\n            ...\n        ]\n    \u003c/textarea\u003e\n\u003c/div\u003e\n```\n\n## Issues and improvements\n\nAsk a question or report a bug on the [create issue page](https://github.com/codex-team/moduleDispatcher/issues/new).\n\nKnow how to improve ModuleDispatcher? [Fork it](https://github.com/codex-team/moduleDispatcher) and send pull request.\n\nYou can also drop a few lines to [CodeX Team's email](mailto:team@ifmo.su).\n\n## License\n\n[MIT](https://github.com/codex-team/dispatcher/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodex-team%2Fmoduledispatcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodex-team%2Fmoduledispatcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodex-team%2Fmoduledispatcher/lists"}