{"id":15044791,"url":"https://github.com/modularorg/modularjs","last_synced_at":"2025-07-21T11:06:23.854Z","repository":{"id":54977141,"uuid":"132823495","full_name":"modularorg/modularjs","owner":"modularorg","description":"△ Dead simple modular JavaScript framework for ES modules.","archived":false,"fork":false,"pushed_at":"2021-01-18T13:30:04.000Z","size":26,"stargazers_count":90,"open_issues_count":1,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-06T19:49:42.378Z","etag":null,"topics":["babel","es6","esmodules","framework","javascript","modular"],"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/modularorg.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-05-09T23:32:50.000Z","updated_at":"2025-06-08T00:00:57.000Z","dependencies_parsed_at":"2022-08-14T08:00:37.952Z","dependency_job_id":null,"html_url":"https://github.com/modularorg/modularjs","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/modularorg/modularjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modularorg","download_url":"https://codeload.github.com/modularorg/modularjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modularorg%2Fmodularjs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266287824,"owners_count":23905461,"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":["babel","es6","esmodules","framework","javascript","modular"],"created_at":"2024-09-24T20:51:02.927Z","updated_at":"2025-07-21T11:06:23.824Z","avatar_url":"https://github.com/modularorg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/modularbp/modular-boilerplate\"\u003e\n        \u003cimg src=\"https://user-images.githubusercontent.com/4596862/37635200-aa3271b2-2bd0-11e8-8a65-9cafa0addd67.png\" height=\"140\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003emodularJS\u003c/h1\u003e\n\u003cp align=\"center\"\u003eDead simple modular JavaScript framework for ES modules.\u003c/p\u003e\n\n## Installation\n```sh\nnpm install modujs\n```\n\n## Why\nJust what's missing from JavaScript to seamlessly work in a modular way with the DOM and ES modules.\n\n- Automatically init visible modules.\n- Easily call other modules methods.\n- Quickly set scoped events with delegation.\n- Simply select DOM elements scoped in their module.\n\n## Usage\n#### Main file\n```js\nimport modular from 'modujs';\nimport * as modules from './modules';\n\nconst app = new modular({\n    modules: modules\n});\napp.init(app);\n```\n#### Module example\n```html\n\u003cdiv data-module-example\u003e\n    \u003ch2\u003eExample\u003c/h2\u003e\n    \u003cbutton data-example=\"button\"\u003eButton\u003c/button\u003e\n\u003c/div\u003e\n```\n```js\nimport { module } from 'modujs';\n\nexport default class extends module {\n    constructor(m) {\n        super(m);\n\n        this.events = {\n            click: {\n                button: 'doSomething'\n            }\n        }\n    }\n\n    doSomething() {\n        console.log('Hello world');\n    }\n}\n```\n\n#### Modules file\n```js\nexport {default as example} from './modules/example';\n```\n\n## Objects\n| Object | Description | Example |\n| ------ | ----------- | ------- | \n| `this.el` | The module element. | `this.el.classList.add('is-open')` |\n| `this.events` | The module events. | `this.events = { click: 'open' }` |\n\n\n## Methods\n| Method | Description | Example |\n| ------ | ----------- | ------- | \n| `this.$('query'[, 'context'])` | Module scoped query selector. | `this.$('dropdown', e.currentTarget)` |\n| `this.parent('name', 'context')` | Module scoped parent selector. | `this.parent('item', e.currentTarget)` |\n| `this.call('function', arg, 'module'[, 'id'])` | Call another module method. | `this.call('scrollTo', section, 'scroll', 'main')` |\n| `this.on('event', 'module', function[, 'id'])` | Listen to another module event. | `this.on('select', 'Select', this.changeSomething, 'first')` |\n| `this.getData('name'[, 'context'])` | Get module or target data attribute. | `this.getData('name', e.currentTarget)` |\n| `this.setData('name', 'value'[, 'context'])` | Set module or target data attribute. | `this.setData('name', 'value', e.currentTarget)` |\n\n## Custom methods\n| Method | Description |\n| ------ | ----------- |\n| `init() { [...] }` | Automatically called on app init. Use this instead of the `constructor`, if you want to use the methods above. |\n| `destroy() { [...] }` | Automatically called on app destroy. Use this if you need to destroy anything specific. The events are already destroyed. |\n\n## App methods\n| Method | Description |\n| ------ | ----------- |\n| `this.call('init', 'app')` | Init all modules. |\n| `this.call('update', scope, 'app')` | Update scoped modules. |\n| `this.call('destroy'[, scope], 'app')` | Destroy all or scoped modules. |\n\n## Examples\n#### Modal example\n```html\n\u003cdiv data-module-modal=\"one\"\u003e\n    \u003ch2 data-modal=\"text\"\u003eModal\u003c/h2\u003e\n    \u003cbutton data-modal=\"accept\"\u003eOk\u003c/button\u003e\n    \u003cbutton data-modal=\"cancel\"\u003eCancel\u003c/button\u003e\n\u003c/div\u003e\n```\n```js\nimport { module } from 'modujs';\n\nexport default class extends module {\n    constructor(m) {\n        super(m);\n\n        this.events = {\n            click: {\n                accept: 'accept',\n                cancel: 'close'\n            }\n        }\n    }\n    \n    init() { // Init is called automatically\n        this.open();\n    }\n\n    open() {\n        this.el.classlist.add('is-open');   \n    }\n\n    accept() {\n        this.$('text').textContent = 'Thank you!';\n        this.$('accept').style.display = 'none';\n        this.$('cancel').textContent = 'Close';\n    }\n\n    close() {\n        this.el.classlist.remove('is-open');\n    }\n}\n```\n#### Call example\n```html\n\u003cdiv data-module-example\u003e\n    \u003cbutton data-example=\"one\"\u003eOne\u003c/button\u003e\n    \u003cbutton data-example=\"all\"\u003eAll\u003c/button\u003e\n\u003c/div\u003e\n```\n```js\nimport { module } from 'modujs';\n\nexport default class extends module {\n    constructor(m) {\n        super(m);\n\n        this.events = {\n            click: {\n                one: 'openSpecificModal',\n                all: 'openAllModals'\n            }\n        }\n    }\n\n    openSpecificModal() {\n        this.call('open', false, 'modal', 'one');\n    }\n\n    openAllModals() {\n        this.call('open', 'modal');\n    }\n}\n```\n#### Accordion example\n```html\n\u003cdiv data-module-accordion data-accordion-open=\"true\"\u003e\n    \u003csection data-accordion=\"section\"\u003e\n        \u003cheader data-accordion=\"header\"\u003e\n            \u003ch2\u003eTitle\u003c/h2\u003e\n        \u003c/header\u003e\n        \u003cdiv data-accordion=\"main\"\u003e\n            \u003cp\u003eContent\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n    \u003csection data-accordion=\"section\"\u003e\n        \u003cheader data-accordion=\"header\"\u003e\n            \u003ch2\u003eTitle\u003c/h2\u003e\n        \u003c/header\u003e\n        \u003cdiv data-accordion=\"main\"\u003e\n            \u003cp\u003eContent\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\u003c/div\u003e\n```\n```js\nimport { module } from 'modujs';\n\nexport default class extends module {\n    constructor(m) {\n        super(m);\n\n        this.events = {\n            click: {\n                header: 'toggleSection'\n            }\n        }\n    }\n\n    init() {\n        if (this.getData('open')) {\n            this.$('section')[0].classList.add('is-open');\n        }\n    }\n\n    toggleSection(e) {\n        const target = e.currentTarget;\n        const section = this.parent('section', target);\n        const main = this.$('main', target);\n        \n        if (section.classList.contains('is-open')) {\n            section.classList.remove('is-open');\n        } else {\n            this.$('section.is-open').classList.remove('is-open');\n            section.classList.add('is-open');\n            this.call('scrollto', section, 'scroll', 'main');\n        }\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularorg%2Fmodularjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodularorg%2Fmodularjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodularorg%2Fmodularjs/lists"}