Ember CLI HTMLBars
Compatibility
- Ember.js v3.8 or above
- Ember CLI v3.8 or above
- Node.js v10 or above
htmlbars-inline-precompile
Tagged Template Usage / Migrating from Starting with version 4.0, this addon now includes the testing helper from ember-cli-htmlbars-inline-precompile
This will require an update to the imports of the hbs
helper in your tests:
Prior syntax:
import hbs from 'htmlbars-inline-precompile';
...
await render(hbs`
<MyComponent />
`);
New syntax:
import { hbs } from 'ember-cli-htmlbars';
...
await render(hbs`
<MyComponent />
`);
There is a codemod available to automate this change.
Additional Trees
For addons which want additional customizations, they are able to interact with this addon directly.
transpileTree
usage
// find the ember-cli-htmlbars addonlet htmlbarsAddon = thisaddons; // invoke .transpileTree passing in the custom input treelet transpiledCustomTree = htmlbarsAddon;
Adding Custom Plugins
You can add custom plugins to be used during transpilation of the addon/
or
addon-test-support/
trees of your addon (or the app/
and tests/
trees of an application)
by registering a custom AST transform.
var SomeTransform = ; moduleexports = name: 'my-addon-name' { // we have to wrap these in an object so the ember-cli // registry doesn't try to call `new` on them (new is actually // called within htmlbars when compiling a given template). thisappregistry; };
Options for registering a plugin
name
- String. The name of the AST transform for debugging purposes.plugin
- A function of typeASTPluginBuilder
.dependencyInvalidation
- Boolean. A flag that indicates the AST Plugin may, on a per-template basis, depend on other files that affect its output.cacheKey
- function that returns any JSON-compatible value - The value returned is used to invalidate the persistent cache across restarts, usually in the case of a dependency or configuration change.baseDir
-() => string
. A function that returns the directory on disk of the npm module for the plugin. If provided, a basic cache invalidation is performed if any of the dependencies change (e.g. due to a npm install/upgrade).
Implementing Dependency Invalidation in an AST Plugin
Plugins that set the dependencyInvalidation
option to true
can provide function for the plugin
of type ASTDependencyPlugin
as given below.
Note: the plugin
function is invoked without a value for this
in context.
; ;
Precompile HTMLBars template strings within other addons
moduleexports = name: 'my-addon-name' { var htmlbarsPlugin = registry; // precompile any htmlbars template string via the precompile method on the // ember-cli-htmlbars plugin wrapper; `precompiled` will be a string of the // form: // // Ember.HTMLBars.template(function() {...}) // var precompiled = htmlbarsPlugin; };
Custom Template Compiler
You can still provide a custom path to the template compiler (e.g. to test custom template compiler tweaks in an application) by:
// ember-cli-build.js module { let app = defaults 'ember-cli-htmlbars': templateCompilerPath: `some_path/to/ember-template-compiler.js` ;};
Using as a Broccoli Plugin
var HtmlbarsCompiler = ; var templateTree = 'app/templates' isHTMLBars: true // provide the templateCompiler that is paired with your Ember version templateCompiler: ;