Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
ember-ast-hot-load
Advanced tools
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.
Many thanks to Toran Billups / @toranb for this huge work, support and inspiration!
ember-cli-hot-loader
implemented using middleware for ember-resolver
and wrapping
components.ember-as-hot-load
implemented using compile-time templates ast
transformations.Point | ember-ast-hot-load | ember-cli-hot-loader |
---|---|---|
Tagless components | + | +/- |
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
After 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.
Helpers looks like components, but we don't support component-like helpers hot-reload. So, you need to exclude helpers from hot-loader pipeline.
If you don't specify helpers
in config addon will continue to work, but with helper
-> dynamic component
-> helper
wrapper (you can check it in ember-inspector
components tab, wrapper will have name like helper "you-app-helper-name"
).
Let's copy all applications' hot-reload confusing helpers.
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();
copy(JSON.stringify(componentLikeHelpers))
in ember-cli-build.js
you need to specify this helpers
new EmberApp(defaults, {
'ember-ast-hot-load': {
helpers: ["foo-bar", "liquid-if", ... ],
enabled: true
}
});
also, we need to exclude ember-ast-hot-load
from production builds (to avoid unnecessary calculations)
const environment = EmberApp.env();
// ...
const addonsToIgnoreInProdBuilds = [
environment === 'production' ? 'ember-ast-hot-load' : null
].filter(name => name !== null);
new EmberApp(defaults, {
addons: {
blacklist: addonsToIgnoreInProdBuilds
}
});
There is a known issue when used in conjunction with ember-cli-content-security-policy or any strong Content Security Policy that blocks "unsafe-eval"
(as it should).
When 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:
Uncaught EvalError: Refused to evaluate a string as JavaScript
because 'unsafe-eval' is not an allowed source of script in the
following Content Security Policy directive: "script-src ...
To 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:
// config/environment.js
ENV.contentSecurityPolicy = {
// normal CSP for Production here
}
if (environment === 'development') {
// ...
// Allow unsafe eval on dev environment
ENV.contentSecurityPolicy['script-src'].push("'unsafe-eval'");
}
if (environment === 'test') {
// ...
// Allow unsafe eval on test environment
ENV.contentSecurityPolicy['script-src'].push("'unsafe-eval'");
}
git clone <repository-url>
cd ember-ast-hot-load
yarn install
yarn lint:hbs
yarn lint:js
yarn 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 versionsember serve
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.
FAQs
Ember components hot-reload addon
The npm package ember-ast-hot-load receives a total of 80 weekly downloads. As such, ember-ast-hot-load popularity was classified as not popular.
We found that ember-ast-hot-load demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.