{"id":14990398,"url":"https://github.com/marcog83/robojs","last_synced_at":"2025-08-20T06:32:58.323Z","repository":{"id":24917331,"uuid":"28334259","full_name":"marcog83/RoboJS","owner":"marcog83","description":"RoboJS is a library that aims to dynamically load JS modules depending on how the DOM is composed.","archived":false,"fork":false,"pushed_at":"2020-06-02T18:17:08.000Z","size":4205,"stargazers_count":134,"open_issues_count":8,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-09T02:23:17.379Z","etag":null,"topics":["dom","loader","mediator","mutationobserver","systemjs","webcomponents"],"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/marcog83.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-22T10:23:37.000Z","updated_at":"2023-07-04T14:31:34.000Z","dependencies_parsed_at":"2022-08-23T07:50:49.140Z","dependency_job_id":null,"html_url":"https://github.com/marcog83/RoboJS","commit_stats":null,"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcog83%2FRoboJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcog83%2FRoboJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcog83%2FRoboJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcog83%2FRoboJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcog83","download_url":"https://codeload.github.com/marcog83/RoboJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230400616,"owners_count":18219831,"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":["dom","loader","mediator","mutationobserver","systemjs","webcomponents"],"created_at":"2024-09-24T14:20:04.427Z","updated_at":"2024-12-19T08:08:31.773Z","avatar_url":"https://github.com/marcog83.png","language":"JavaScript","readme":"\nRoboJS is a library that aims to dynamically load JS modules depending on how the DOM is composed.\nAdd a node to the DOM and a JS will be loaded!\nRemove a node and the JS will be disposed!!\nNot further framework frontend , but a tool that lets you manage the association DOM and JS in less than 4k gzipped;\n\n[![NPM](https://nodei.co/npm/robojs.png)](https://nodei.co/npm/robojs/)\n[![Greenkeeper badge](https://badges.greenkeeper.io/marcog83/RoboJS.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/marcog83/RoboJS.svg?branch=master)](https://travis-ci.org/marcog83/RoboJS)\n[![codebeat badge](https://codebeat.co/badges/04be77bb-9247-4988-8499-3711bcbe1485)](https://codebeat.co/projects/github-com-marcog83-robojs-master)\n[![Maintainability](https://api.codeclimate.com/v1/badges/73702f345d75cdc37cb7/maintainability)](https://codeclimate.com/github/marcog83/RoboJS/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/73702f345d75cdc37cb7/test_coverage)](https://codeclimate.com/github/marcog83/RoboJS/test_coverage)\n[![Coverage Status](https://coveralls.io/repos/github/marcog83/RoboJS/badge.svg?branch=master)](https://coveralls.io/github/marcog83/RoboJS?branch=master)\n[![Inline docs](http://inch-ci.org/github/marcog83/RoboJS.svg?branch=master)](http://inch-ci.org/github/marcog83/RoboJS)\n[![NSP Status](https://nodesecurity.io/orgs/marcog83/projects/c8621ee6-fb99-4e5f-ae62-265279409532/badge)](https://nodesecurity.io/orgs/marcog83/projects/c8621ee6-fb99-4e5f-ae62-265279409532)\n[![devDependencies Status](https://david-dm.org/marcog83/RoboJS/dev-status.svg)](https://david-dm.org/marcog83/RoboJS?type=dev)\n[![Known Vulnerabilities](https://snyk.io/test/github/marcog83/RoboJS/badge.svg?targetFile=package.json)](https://snyk.io/test/github/marcog83/RoboJS?targetFile=package.json)\n\n# The idea behind the code\n\n\nTo understand how and why I decided to write this tool, please read this [post](https://github.com/marcog83/RoboJS/wiki/RoboJS-::-the-idea-behind-the-code)\n\n# Quick Demo\nA quick demo can be found [HERE](http://marcog83.github.io/RoboJS/). It simulate a bunch of modules loaded from server and a page where to place them (on the right). \n\n# Installation\n```javascript\n \nnpm install robojs\n```\n\n\n# How it works.\n\n`robojs` will iterate the DOM trying to match components id with `data-mediator` attributes.\nEach time it finds a match, a request is send to load the right script.\nThe first time the script is loaded from network, while the next one is retrived from cache.\n`MutationObserver` is used to handle DOM changes, and when it happens `robojs` iterates over the new added nodes.\n\n\n# Usage\n\nYou set a `data-mediator` attribute with an ID (whatever you want)\n```html\n    \u003cdiv data-mediator=\"my-mediator\"\u003ea-2\u003c/div\u003e\n    \n```\nin `definitions.js` you define a Map where the key is an ID , and the value is the file to request in order to register the element.\n\n```json\n\t{\n        \"my-mediator\": \"component/mediator\"\n    }\n```\n\nBy default `robojs` supposes the presence of an AMD Loader like `RequireJS` in order to request the component and its dependencies.\nFor example \"component/mediator\" looks like the follow\n\n```javascript\n//mediator.js\ndefine(function(){\n    return function Mediator(node){\n        //\n    }\n})\n\n```\n\nWhen `robojs` finds a match between a `data-mediator` attribute and an ID from `definitions.js`,\nit will load `component/mediator.js` file and it will execute the `Mediator` function.\nThe `node` parameter is a reference to the DOM element.\n\n\n```javascript\nimport {bootstrap} from \"robojs\"\nconst definitions={\n     \"my-mediator\": \"component/mediator\"\n}\n//basic usage\nbootstrap({definitions}) // return {dispose,promise}\n\n```\nyou can store, and use later, the returned Object from bootstrap function. \n```javascript\nimport {bootstrap} from \"robojs\"\nconst definitions={\n     \"my-mediator\": \"component/mediator\"\n};\nvar application=bootstrap({definitions}) // return {dispose:Function,promise:Promise\u003cany\u003e}\n\n//you can handle when every Mediators in page are executed\napplication.promise.then(function(){\n\tconsole.log(\"all mediators loaded\")\n}).catch(function(e){\n\tconsole.log(\"something went wrong\",e);\n})\n\n//later in your code you can dispose the RoboJS instance.\napplication.dispose();\n```\n\n\n\n\n# Mediator Function.\nMediator is the context where your logic runs for a specific Mediator. It is a simple function.\nWhen a `data-mediator` attribute matches an ID from the component definitions the `Mediator` function is called and a function returns.\n\nThe returned function is called later when the module will be disposed.\n`Mediator` function takes two parameters, `node` and `dispatcher`. `node` is a reference to DOM element, \n`dispatcher` is a reference to `EventDispatcher` Object.\n\n```javascript\n\n    function Mediator(node,dispacther) {\n\t\treturn function(){\n           // destroy everything, es. handlers\n        }\n   \t}\n```\n\n \n\n# Loader Object\nDefault loader is `AMD` based, it means that by default any module should be exported as amd.\nYou can customize script loading strategy passing a function to `Loader`.\n\nFor instance if you use  `SystemJS` module loader, you can do something like the follow.\n\n```javascript\nimport {bootstrap,Loader} from \"robojs\"\nconst definitions={\n     \"my-mediator\": \"component/mediator\"\n};\n//this is the strategy used to load external modules\nfunction loaderFn(id, resolve, reject) {\n        System.import(id).then(resolve).catch(reject)\n    }\nbootstrap({definitions,loader:Loader(loaderFn)})\n```\n\nIf you use ES2015 `import` statement, you can create something different. \nYou don't need to load `Mediator` from external file, but just retrieve the `Mediator` function from `definitions` Map\n\n```javascript\nimport {bootstrap,Loader} from \"robojs\"\nimport Mediator from \"./component/mediator\";\nconst definitions={\n     \"my-mediator\": Mediator\n};\n\n//this is the strategy used to get Mediator from definitions\nfunction loaderFn(id, resolve, reject) {    \n        resolve(definitions[id]);\n    }\n    \nbootstrap({definitions,loader:Loader(loaderFn)});\n```\n\n \n\n\n \n\n### EventDispatcher Object.\nThe `EventDispatcher` can be your messaging System. It dispatches and listens to `Events` from your Application. \nIt's meant to be a Singleton in your application. Every robojs instance has one. \n\nYou can get a new instance of EventDispatcher by calling `makeDispatcher` function\n\n```javascript\nimport {makeDispatcher} from \"robojs\"\nvar myNewEventDispatcher=makeDispatcher();\n```\n\t\n##  Configurations\n\nUsing `RequireJS`\n\n```javascript\n\nrequirejs.config({\n\tpaths: {\t\t\n        robojs: \"../../dist/robojs\"\n\t}\n});\n//\nrequire([\"robojs\"],({bootstrap})=\u003e{\n    const definitions={\n         \"my-mediator\": \"component/mediator\"\n    }\n    bootstrap({definitions});\n});\n\n```\nUsing `ES2015`\n\n```javascript\nimport {bootstrap} from \"robojs\"\nconst definitions={\n     \"my-mediator\": \"component/mediator\"\n};\n \nbootstrap({definitions});\n\n```\n\nUsing `SystemJS`\n\n \n```javascript\n\nSystem.config({\n\t\tdefaultJSExtensions: true,\n\t\tpaths:{\n\t\t\trobojs:\"../../dist/robojs\"\n\t\t}\n\t});\n//\nSystem.import(\"robojs\").then(({bootstrap})=\u003e{\n    const definitions={\n         \"my-mediator\": \"component/mediator\"\n    };\n     \n    bootstrap({definitions});\n});\n```\n\n# Dependencies\nno dependencies\n\n### Build project\nYou can run npm script named `build`.\n\n```\nnpm run build\n```\n### Test project\nfrom test folder you can run script named `test`.\n```\nnpm run test\n```\n\n### Polyfills  \nIf you need to support old browsers, you need to something for\n\n\n1. [MutationObserver](https://github.com/megawac/MutationObserver.js) by megawac.\n2. [Webcomponents](https://github.com/webcomponents). If you use custom element extension.\n \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcog83%2Frobojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcog83%2Frobojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcog83%2Frobojs/lists"}