{"id":25541024,"url":"https://github.com/vivekmunde/ember-m-js-loader","last_synced_at":"2025-04-11T16:50:40.011Z","repository":{"id":22961991,"uuid":"97704228","full_name":"vivekmunde/ember-m-js-loader","owner":"vivekmunde","description":"Lazy loading javascript using simple Ember Service","archived":false,"fork":false,"pushed_at":"2022-12-12T08:43:33.000Z","size":3514,"stargazers_count":4,"open_issues_count":20,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-21T09:30:36.753Z","etag":null,"topics":["insert-script","js-lazy-loading","js-load-on-demand","js-loader"],"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/vivekmunde.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-19T10:30:18.000Z","updated_at":"2021-06-15T13:02:15.000Z","dependencies_parsed_at":"2023-01-13T22:31:34.554Z","dependency_job_id":null,"html_url":"https://github.com/vivekmunde/ember-m-js-loader","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekmunde%2Fember-m-js-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekmunde%2Fember-m-js-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekmunde%2Fember-m-js-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekmunde%2Fember-m-js-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vivekmunde","download_url":"https://codeload.github.com/vivekmunde/ember-m-js-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248442910,"owners_count":21104294,"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":["insert-script","js-lazy-loading","js-load-on-demand","js-loader"],"created_at":"2025-02-20T06:28:51.851Z","updated_at":"2025-04-11T16:50:39.984Z","avatar_url":"https://github.com/vivekmunde.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ember-m-js-loader\n==============================================================================\n\nThis [Ember.js](https://emberjs.com/) addon helps load the js file(s) on demand, i.e. lazy loading, inside the `\u003cscript\u003e` tag in the `document` `\u003cbody\u003e` using the service `m-js-loader` .\n\n### Compatibility\nEmber@^3.0.0\n\n### Deferred Loading of JS\n\nThe ambitious SPAs need more than one JS resources (external libraries) and some of these JS resources can be more functionality centric and may not be required to get loaded on the initial screen or may be required only for few of screens. The loading of scripts that are not necessary for the initial page load can be deferred until after the initial load. Doing so can help reduce resource contention and improve performance.\n\nSuppose a web app uses Maps Library (like [leaflet](https://leafletjs.com)) for displaying maps, which comes with its own JS. The maps are displayed only on couple of routes other than home screen. So the home screen is not needed to load the JS for maps. The maps JS should be loaded when the routes displaying maps are requested. In this scenario, its always preferable to load the JS dynamically.\n\n## `.load(attr)`\n\nThe method to load a JS file on demand.\n\n`attr` is a JSON object which holds the attribute values for the `\u003cscript\u003e` tag to load JS. It should at least have `src` property set to the source of the JS. \n\n\tmJsLoader: Ember.inject.service('m-js-loader'), \n\tbeforeModel() {\n        this.get('mJsLoader').load({\n                src: 'http://cdn-assets/maps.js',\n                integrity: 'sha384-shfssiufhnof7348f738f7bw8g+Pmsjshdinwe98',\n                crossorigin: 'anonymous'\n            });\n    }\n\n#### Promise Based Load\n\nThe service `m-js-loader` returns a promise. The service listens to the events `onload` and `onerror` on the `\u003cscript\u003e` tag in which the JS is loaded. It resolves the promise inside `onload` event and rejects it if `onerror` event is raised. \n\nUse of this promise is completely optional and upto the requirement of the app. If a route needs to wait until the JS gets loaded then the service can be used inside the `beforeModel` hook.\n\t\n\tmJsLoader: Ember.inject.service('m-js-loader'), \n\tbeforeModel() {\n\t\treturn this.get('mJsLoader').load({\n\t\t\tsrc: '/assets/maps.js'\n\t\t});\n\t}\n\n#### Caching\n\nThe service `m-js-loader` caches the `src`s loaded to avoid injecting the same JS more than once.\n\n#### CORS\n\nThe service inserts a `\u003cscript\u003e` tag which as good as having it hardcoded at the time of html load. So no [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) issue.\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-m-js-loader\n```\n\n\nUsage\n------------------------------------------------------------------------------\n\n[Longer description of how to use the addon in apps.]\n\n\nContributing\n------------------------------------------------------------------------------\n\n### Installation\n\n* `git clone \u003crepository-url\u003e`\n* `cd ember-m-js-loader`\n* `npm install`\n\n### Linting\n\n* `npm run lint:js`\n* `npm run lint:js -- --fix`\n\n### Running tests\n\n* `ember test` – Runs the test suite on the current Ember version\n* `ember test --server` – Runs the test suite in \"watch mode\"\n* `npm test` – Runs `ember try:each` to test your addon against multiple Ember versions\n\n### Running the dummy application\n\n* `ember serve`\n* Visit the dummy application at [http://localhost:4200](http://localhost:4200).\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivekmunde%2Fember-m-js-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvivekmunde%2Fember-m-js-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivekmunde%2Fember-m-js-loader/lists"}