{"id":13806440,"url":"https://github.com/adopted-ember-addons/ember-cli-hot-loader","last_synced_at":"2025-12-30T09:27:48.069Z","repository":{"id":57223295,"uuid":"65778728","full_name":"adopted-ember-addons/ember-cli-hot-loader","owner":"adopted-ember-addons","description":"An early look at what hot reloading might be like in the ember ecosystem","archived":false,"fork":false,"pushed_at":"2018-12-29T02:20:43.000Z","size":282,"stargazers_count":99,"open_issues_count":9,"forks_count":13,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-05-19T05:35:54.924Z","etag":null,"topics":[],"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/adopted-ember-addons.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":"2016-08-16T01:55:55.000Z","updated_at":"2024-02-10T18:29:09.000Z","dependencies_parsed_at":"2022-08-24T15:41:41.312Z","dependency_job_id":null,"html_url":"https://github.com/adopted-ember-addons/ember-cli-hot-loader","commit_stats":null,"previous_names":["toranb/ember-cli-hot-loader"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-cli-hot-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-cli-hot-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-cli-hot-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-cli-hot-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adopted-ember-addons","download_url":"https://codeload.github.com/adopted-ember-addons/ember-cli-hot-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225260491,"owners_count":17446092,"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-08-04T01:01:11.734Z","updated_at":"2025-12-30T09:27:48.014Z","avatar_url":"https://github.com/adopted-ember-addons.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":["End-user customization"],"readme":"[![Build Status](https://travis-ci.org/toranb/ember-cli-hot-loader.svg?branch=master)](https://travis-ci.org/toranb/ember-cli-hot-loader)\n\n# Ember-cli-hot-loader\n\nAn early look at what hot reloading might look like in the ember ecosystem\n\n## Installation\n\n```\nember install ember-cli-hot-loader\n```\n\nDuring installation Ember CLI will prompt you to update the resolver code. This is required for ember-cli-hot-loader to work.\nIf you have never modified the resolver, you can simply accept the changes or do a diff and update it manually.\nThe final code should look something like:\n\n```js\nimport Resolver from 'ember-resolver';\nimport HotReloadMixin from 'ember-cli-hot-loader/mixins/hot-reload-resolver';\n\nexport default Resolver.extend(HotReloadMixin);\n```\n\nnote: The HotReloadMixin is replaced with an empty Mixin for production/test builds\n\n## How to use this addon\n\nAfter the ember install simply run `ember serve` as you normally would. Any changes to component JS/HBS files will result in a hot reload (not a full page reload). If you alter a route, service, controller or controller template ember-cli will do a full page reload.\n\n## Excluding components\n\nIf you want to exclude any component(s) from hot reloading simply configure them using `excluded`\n\n```javascript\n//my-app/config/environment.js\nif (environment === 'development') {\n  ENV['ember-cli-hot-loader'] = {\n    excluded: ['liquid-unless', 'liquid-child']\n  }\n}\n```\n\n## Extended components exclusion\n\nIf you want to get more control over any component(s) excluding from hot reloading you can implement custom logic in resolver mixin method, named `shouldExcludeComponent`.\n\nFor example if we don't want to reload `ember-bootstrap` components -\nwe need to exclude all components with names started with `bs-` prefix.\n\nWorking example available at [lifeart/ember-hot-reload-demo](https://github.com/lifeart/ember-hot-reload-demo) (bs + non-reloadable `bs-button` component)\n\n```javascript\nimport Resolver from 'ember-resolver';\nimport HotReloadMixin from 'ember-cli-hot-loader/mixins/hot-reload-resolver';\nimport Mixin from '@ember/object/mixin';\n\nconst CustomHotReloadMixin = Mixin.create(HotReloadMixin, {\n  shouldExcludeComponent({name}) {\n    const excludedFromConfig = this._super(...arguments);\n    const isBootstrapComponent = name.startsWith('bs-');\n    return excludedFromConfig || isBootstrapComponent;\n  }\n});\n\nexport default Resolver.extend(CustomHotReloadMixin);\n```\n\n\n## Tagless wrapper component\n\nIf you prefer to avoid the extra div that wraps each hot reloaded component configure it with tagless. Note: the tagless configuration does not support components that receive controller actions.\n\n```javascript\n//my-app/config/environment.js\nif (environment === 'development') {\n  ENV['ember-cli-hot-loader'] = {\n    tagless: true\n  }\n}\n```\n\n## Example application\n\nAn example application that hot reloads styles/components/reducers\n\nhttps://github.com/toranb/ember-hot-reload-demo\n\n\n## Supported Types\n\n* ember-cli will hot reload styles for you when using ember-cli 2.3+\n* ember-cli-hot-loader will hot reload component JS/HBS changes\n* to hot reload another file type, such as reducers you need to first enable it:\n\n```javascript\n//my-app/config/environment.js\nif (environment === 'development') {\n  ENV['ember-cli-hot-loader'] = {\n    supportedTypes: ['components', 'reducers']\n  }\n}\n```\n\nNext write a service that will respond to the events `willLiveReload` and `willHotReload`\n\n```javascript\nimport Service from '@ember/service';\nimport Evented from '@ember/object/evented';\n\nexport default Service.extend(Evented, {\n  init () {\n    this._super(...arguments);\n    this.on('willLiveReload', this, 'confirmLiveReload');\n    this.on('willHotReload', this, 'attemptHotReload');\n  },\n  confirmLiveReload(event) {\n    const module = getModulePath(event.modulePath);\n    if (module) {\n      event.cancel = true;\n      window.requirejs.unsee(module);\n    }\n  },\n  attemptHotReload(modulePath) {\n    const module = getModulePath(modulePath);\n    if (module) {\n      // re-render, replace module, etc\n    }\n  }\n});\n```\n\n## Community Plugins\n\nhttps://github.com/ember-redux/ember-redux-hot-loader\n\n## Known Compatibility Workarounds\n\n#### Content Security Policy\n\nThere is a known issue when used in conjunction with [ember-cli-content-security-policy](https://github.com/rwjblue/ember-cli-content-security-policy) or any strong [Content Security Policy](https://content-security-policy.com/) that blocks `\"unsafe-eval\"` (as it should).\n\nWhen this plugin tries to execute the `Ember.HTMLBars.compile` function, a CSP (Content Security Policy) that does not allow `\"unsafe-eval\"` will block the JS execution with the following error:\n\n```\nUncaught EvalError: Refused to evaluate a string as JavaScript\nbecause 'unsafe-eval' is not an allowed source of script in the\nfollowing Content Security Policy directive: \"script-src ...\n```\n\nTo workaround this issue, in the `config/environment.js` file, add `\"unsafe-eval\"` to the Development and Test environment sections. Do NOT just add `\"unsafe-eval\"` to the CSP that goes to Production as this will defeat one of the main safeguards that comes from using a CSP. Here is sample code to add to the CSP in the proper environments only:\n\n```\n  // config/environment.js\n  ENV.contentSecurityPolicy = {\n    // normal CSP for Production here\n  }\n\n  if (environment === 'development') {\n    // ...\n    // Allow unsafe eval on dev environment\n    ENV.contentSecurityPolicy['script-src'].push(\"'unsafe-eval'\");\n  }\n\n  if (environment === 'test') {\n    // ...\n    // Allow unsafe eval on test environment\n    ENV.contentSecurityPolicy['script-src'].push(\"'unsafe-eval'\");\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadopted-ember-addons%2Fember-cli-hot-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadopted-ember-addons%2Fember-cli-hot-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadopted-ember-addons%2Fember-cli-hot-loader/lists"}