Ember CLI HTMLBars
Registering a Plugin
var SomeTransform = require('./some-path/transform');
module.exports = {
name: 'my-addon-name',
included: function() {
this.app.registry.add('htmlbars-ast-plugin', {
name: 'some-transform',
plugin: SomeTransform
});
}
};
Options for registering a htmlbars-ast-plugin
name
- String. The name of the AST transform for debugging purposes.plugin
- A function of type ASTPluginBuilder
.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.
import {ASTPluginBuilder, ASTPlugin} from "@glimmer/syntax/dist/types/lib/parser/tokenizer-event-handlers";
export type ASTDependencyPlugin = ASTPluginWithDepsBuilder | ASTPluginBuilderWithDeps;
export interface ASTPluginWithDepsBuilder {
(env: ASTPluginEnvironment): ASTPluginWithDeps;
}
export interface ASTPluginBuilderWithDeps extends ASTPluginBuilder {
dependencies(relativePath): string[];
}
export interface ASTPluginWithDeps extends ASTPlugin {
resetDependencies?(relativePath: string): void;
dependencies(relativePath: string): string[];
}
Precompile HTMLBars template strings within other addons
module.exports = {
name: 'my-addon-name',
setupPreprocessorRegistry: function(type, registry) {
var htmlbarsPlugin = registry.load('template').find(function(plugin) {
return plugin.name === 'ember-cli-htmlbars';
});
var precompiled = htmlbarsPlugin.precompile("{{my-component}}");
}
};
Tagged Template Usage / Migrating from htmlbars-inline-precompile
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.
Handlebars 2.0 Support (Ember < 1.10)
Handlebars 2.0 support has been removed. If you are using ember-cli-htmlbars with a 1.9.x project please continue
to use ember-cli-htmlbars@0.6.x.
Using as a Broccoli Plugin
var HtmlbarsCompiler = require('ember-cli-htmlbars');
var templateTree = new HtmlbarsCompiler('app/templates', {
isHTMLBars: true,
templateCompiler: require('./bower_components/ember/ember-template-compiler')
});