{"id":23442256,"url":"https://github.com/teamwertarbyte/module-loader","last_synced_at":"2026-04-30T13:34:42.530Z","repository":{"id":66339177,"uuid":"135561925","full_name":"TeamWertarbyte/module-loader","owner":"TeamWertarbyte","description":"High Cohesion, Loose Coupling with ease","archived":false,"fork":false,"pushed_at":"2018-08-01T12:49:55.000Z","size":87,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T21:48:43.326Z","etag":null,"topics":["nodejs"],"latest_commit_sha":null,"homepage":"","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/TeamWertarbyte.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-31T09:24:16.000Z","updated_at":"2020-07-20T20:40:25.000Z","dependencies_parsed_at":"2023-02-23T04:00:17.482Z","dependency_job_id":null,"html_url":"https://github.com/TeamWertarbyte/module-loader","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmodule-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmodule-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmodule-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmodule-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TeamWertarbyte","download_url":"https://codeload.github.com/TeamWertarbyte/module-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119403,"owners_count":21050754,"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":["nodejs"],"created_at":"2024-12-23T17:29:03.913Z","updated_at":"2026-04-30T13:34:42.523Z","avatar_url":"https://github.com/TeamWertarbyte.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Module Loader\n\nInspired by [Mantrajs](https://github.com/mantrajs/mantra-core) this package build upons the idea to modulize and abstract.\n\nSee the [medium article](https://medium.com/wertarbyte/structure-your-react-apps-the-mantra-way-3a831ffd1580) to get the idea behind this.\n\nIt's still in pretty early stages. We use this in a few projects to see if it works. If you have further ideas feel free to submit a PR\n\n## Installation\n```shell\nnpm i --save @wertarbyte/module-loader\n```\n\n## Goal\n\nThe goal is to have one single entrance spot where all modules come together. This package provides the \"glue\" to attach all together.\n\nIt will provide various logics for each module:\n* Routes\n* Reducers\n* Redux Actions\n* API calls\n\nThe end result could look something like this:\n\n\n```javascript\nimport {createApp} from '@wertarbyte/module-loader';\n...\n\nconst store = configureStore({}, history);\n\nconst context = {\n  store,\n};\n\nconst app = createApp(context);\napp.loadModule(Core);\napp.loadModule(Home);\napp.loadModule(Contact);\napp.init();\n\nexport default () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cMuiThemeProvider theme={theme}\u003e\n      \u003cConnectedRouter history={history}\u003e\n        \u003cSwitch\u003e\n          \u003cApplication\u003e{app.routes}\u003c/Application\u003e\n        \u003c/Switch\u003e\n      \u003c/ConnectedRouter\u003e\n    \u003c/MuiThemeProvider\u003e\n  \u003c/Provider\u003e\n);\n```\n\nWith that everything is handled. Reducers get injected and routes will be stacked to be used later for the rendering pipeline.\n\nThere is currently no limitation on how many modules can be loaded.\n\n## Usage\n\n### configureStore\nIn order to inject reducers dynamically we need `asyncReducers` which basically just means a hook for the module loader.\n\nNote how we add `asyncReducers` in the `createReducer` method and add them dynamically in `store.injectReducer` when a new module is loaded.\n\n```javascript\nimport {applyMiddleware, combineReducers, compose, createStore} from 'redux';\nimport {routerMiddleware, routerReducer} from 'react-router-redux';\n\nexport const createReducer = asyncReducers =\u003e\n  combineReducers({\n    routing: routerReducer,\n    ...asyncReducers,\n  });\n\nexport default function(initialState, browserHistory) {\n  const routermw = routerMiddleware(browserHistory);\n  return createStore(\n    createReducer(),\n    initialState,\n    process.env.NODE_ENV !== 'production' \u0026\u0026 window.devToolsExtension\n      ? compose(applyMiddleware(routermw), window.devToolsExtension())\n      : compose(applyMiddleware(routermw)),\n  );\n}\n```\n\n### Module Config\nEvery module has an `index.js` in its root to expose the inner parts.\n\nLet's assume our module `contact` has:\n * **actions** as an array\n * **reducers** \n * **routes** as a function\n\n![Module](module.jpeg)\n\n```javascript\nimport {createModule} from '@wertarbyte/module-loader';\nimport * as actions from './actions';\nimport reducers from './reducers';\nimport routes from './routes';\n\nexport default createModule('contact', { actions, reducers, routes });\n```\n\n### Entry File\n\nLoad modules, init the app and mount your modules to get started\n\n```javascript\nimport {createApp} from '@wertarbyte/module-loader';\nimport configureStore, {createReducer} from './configureStore';\n...\n\nconst store = configureStore({}, history);\n\n\nconst app = createApp({\n  store,\n  replaceReducers: (reducers) =\u003e {\n    store.replaceReducer(createReducer(reducers));\n  },\n});\napp.loadModule(Core);\napp.loadModule(Home);\napp.loadModule(Contact);\napp.init();\n\nexport default () =\u003e (\n  \u003cProvider store={store}\u003e\n    \u003cMuiThemeProvider theme={theme}\u003e\n      \u003cConnectedRouter history={history}\u003e\n        \u003cSwitch\u003e\n          \u003cApplication\u003e{app.routes}\u003c/Application\u003e\n        \u003c/Switch\u003e\n      \u003c/ConnectedRouter\u003e\n    \u003c/MuiThemeProvider\u003e\n  \u003c/Provider\u003e\n);\n```\n\n## API\n\n### Creation Methods\n\n|Name            |Type        |Description\n|----------------|------------|--------------------------------\n|createApp       | `func`     | Returns an app instance to load modules.\n|createModule    | `func`     | Returns an module instance for creating a new module.\n\n### App class\n\n|Name            |Type        |Description\n|----------------|------------|--------------------------------\n|checkForInit    | `func`     | Throws error message if app is already initialized.\n|init            | `func`     | Set flag that app is initialized.\n|loadModule      | `func`     | Loads a module.\n\n### Module class\n\n|Name            |Type        |Default     |Description\n|----------------|------------|------------|--------------------------------\n|actions         | `object`   | {}         | Defines the actions.\n|api             | `object`   | {}         | Defines the API calls.\n|loaded          | `boolean`  | false      | Defines if the module has already been loaded once.\n|name*           | `string`   |            | Defines a unique name.\n|reducers        | `func`     | null       | Defines the reducers.\n|routes          | `func`     | null       | Defines the routes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamwertarbyte%2Fmodule-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteamwertarbyte%2Fmodule-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamwertarbyte%2Fmodule-loader/lists"}