Main Idea of this addon - ability to reload changed components without application reloading.
This addon is continuation of the project ember-cli-hot-loader and includes part of it's codebase.
- ember-cli >=
2.15.1 - ember-source >=
2.16
Many thanks to Toran Billups / @toranb for this huge work, support and inspiration!
ember-cli-hot-loaderimplemented using middleware forember-resolverandwrappingcomponents.ember-ast-hot-loadimplemented using compile-time templatesasttransformations.
| Point | ember-ast-hot-load | ember-cli-hot-loader |
|---|---|---|
| Tagless components | + | +/- |
| Glimmer components | + | - |
| Classic route templates | + | - |
| MU route templates | + | - |
| reducers reloading | - | + |
| performance impact | low | middle |
| typescript support | + | + |
| Nested components | + | +/- |
| code limitations | - | + |
| Ember 2.x | ? | + |
| Ember 3.4+ | + | - |
| Fastboot | + | - |
| Sparkles components | + | - |
| Hooked components | + | - |
| Custom components | + | - |
| Component wrappers | - | + |
| AST integration | + | - |
| Resolver 5 support | + | - |
| MU support | + | - |
| Addons hot-reload | + | - |
ember install ember-ast-hot-load
- Ember.js v3.20 or above
- Ember CLI v3.20 or above
- Node.js v10 or above
It should just work without any config.
After the installing, 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, or controller ember-cli will do a full page reload.
Hot-reloading Ember helpers is not supported.
Because helpers look like components (in the AST) they will be unnecessarily wrapped, e.g. helper -> dynamic component -> helper
To prevent this from happening, you can exclude helpers from the hot-loader pipeline by specifying a list of helper names in the add-on config.
// ember-cli-build.js
new EmberApp(defaults, {
'ember-ast-hot-load': {
helpers: ["foo-bar", "liquid-if", ... ],
enabled: true
}
});If you don't specify helpers in the config the addon will continue to work, but with it will also wrap all your helpers (you can see this in the ember-inspector components tab, e.g. helper "you-app-helper-name").
To get a list of all the helpers in your app that hot-reload might think are components, run this script in a debug console in your browner. You can then use this list to configure the add-on.
var componentLikeHelpers = Object.keys(require.entries)
.filter(name=>(name.includes('/helpers/')|| name.includes('/helper')))
.filter(name=>!name.includes('/-')).map(name=>{
let path = name.split('/helpers/');
return path.pop();
}).filter(name=>!name.includes('/')).uniq();
console.log(JSON.stringify(componentLikeHelpers))You should also exclude ember-ast-hot-load from production builds (to avoid unnecessary calculations)
// ember-cli-build.js
const environment = EmberApp.env();
// ...
const addonsToIgnoreInProdBuilds = [
environment === 'production' ? 'ember-ast-hot-load' : null
].filter(name => name !== null);
new EmberApp(defaults, {
addons: {
blacklist: addonsToIgnoreInProdBuilds
}
});service('hot-loader').registerWillHotReload(onHotReload).unregisterWillHotReload(onHotReload).registerWillLiveReload(onLiveReload).unregisterWillLiveReload(onLiveReload) // we need to prevent full app refresh if we can hande changed file.
function onLiveReload(event) {
if (event.modulePath.includes('redusers')) {
event.cancel = true;
requirejs.unsee('some-module');
}
}
function onHotReload(path) {
if (path.includes('redusers')) {
// do some hot-reload magic,
// for example
requirejs.resolve('some-module')
}
}In most development environments, Ember applications are served directly from Ember's development server, e.g. http://localhost:4200. If you are using a different way of service your Ember app, you may need to override the URL that we use to reload your changes.
// config/enironment.js
if (environment === 'development') {
ENV['ember-ast-hot-load'] = {
baseUrl: 'http://app.mydomain.test:4200'
}
}Cannot find module ember-source\dist\ember-template-compiler.js in yarn workspaces.
root.package.json workspaces.nohoist: ["**/ember-ast-hot-load"]
git clone <repository-url>cd ember-ast-hot-loadyarn install
yarn lint:hbsyarn lint:jsyarn lint:js --fix
ember test– Runs the test suite on the current Ember versionember test --server– Runs the test suite in "watch mode"ember try:each– Runs the test suite against multiple Ember versions
ember serve- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
The build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent