# ember-cli-htmlbars

> A library for adding htmlbars to ember CLI

Latest version **7.0.1** (published 2026-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-cli-htmlbars
pnpm add ember-cli-htmlbars
yarn add ember-cli-htmlbars
bun add ember-cli-htmlbars
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 7.0.1 |
| Published | 2026-03-29 |
| First published | 2014-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 20 |
| Dependencies | 10 |
| Unpacked size | 30 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 77 |
| Author | Jonathan Jackson & Chase McCarthy |
| Maintainers | rondale-sc, ef4, rwjblue, katiegengler, turbo87, stefanpenner, ember-cli |
| Keywords | ember-addon, ember-cli |

## Links

- npm: https://www.npmjs.com/package/ember-cli-htmlbars
- Repository: https://github.com/ember-cli/ember-cli-htmlbars
- Issues: https://github.com/ember-cli/ember-cli-htmlbars/issues
- npm.io page: https://npm.io/package/ember-cli-htmlbars

## Dependencies (10)

- [walk-sync](https://npm.io/package/walk-sync.md) ^4.0.1
- [fs-tree-diff](https://npm.io/package/fs-tree-diff.md) ^2.0.1
- [silent-error](https://npm.io/package/silent-error.md) ^1.1.1
- [broccoli-debug](https://npm.io/package/broccoli-debug.md) ^0.6.5
- [broccoli-plugin](https://npm.io/package/broccoli-plugin.md) ^4.0.3
- [js-string-escape](https://npm.io/package/js-string-escape.md) ^1.0.1
- [heimdalljs-logger](https://npm.io/package/heimdalljs-logger.md) ^0.1.10
- [@ember/edition-utils](https://npm.io/package/@ember/edition-utils.md) ^1.2.0
- [broccoli-persistent-filter](https://npm.io/package/broccoli-persistent-filter.md) ^3.1.2
- [babel-plugin-ember-template-compilation](https://npm.io/package/babel-plugin-ember-template-compilation.md) ^2.0.0

## Recent versions

- 7.0.1 (latest) — 2026-03-29
- 6.1.0-alpha.0 (alpha) — 2022-06-30
- 4.5.0 (old) — 2021-03-03
- 1.3.4 (v1-3-x) — 2017-07-29
- 7.0.0 — 2025-11-25
- 6.3.0 — 2023-08-08
- 6.2.0 — 2023-01-17
- 6.1.1 — 2022-09-08
- 6.1.0 — 2022-07-04
- 6.0.1 — 2021-12-05
- 5.7.2 — 2021-12-05
- 6.0.0 — 2021-10-14
- 5.7.1 — 2021-03-18
- 5.7.0 — 2021-03-18
- 5.6.5 — 2021-03-12
- … 99 more at https://npm.io/package/ember-cli-htmlbars/versions

## README

# Ember CLI HTMLBars

<a href="https://github.com/ember-cli/ember-cli-htmlbars/actions"><img alt="Build Status" src="https://github.com/ember-cli/ember-cli-htmlbars/workflows/CI/badge.svg"></a>

## Compatibility

* Ember.js v4.12 or above
* Ember CLI v4.12 or above
* `@embroider/compat` 3.4.3 or above (optional)
* Node.js v20 or above

## 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.

```js
var SomeTransform = require('./some-path/transform');

module.exports = {
  name: 'my-addon-name',

  included: function() {
    // 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).
    this.app.registry.add('htmlbars-ast-plugin', {
      name: 'some-transform',
      plugin: SomeTransform
    });
    
    this._super.included.apply(this, arguments);
  }
};
```

### Options for registering a plugin

* `name` - String. The name of the AST transform for debugging purposes.
* `plugin` - A function of type [`ASTPluginBuilder`](https://github.com/glimmerjs/glimmer-vm/blob/v0.83.1/packages/@glimmer/syntax/lib/parser/tokenizer-event-handlers.ts#L314-L320).
* `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.

```ts
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 {
  /**
   * @see {ASTPluginWithDeps.dependencies} below.
   **/
  dependencies(relativePath): string[];
}

export interface ASTPluginWithDeps extends ASTPlugin {
  /**
   * If this method exists, it is called with the relative path to the current
   * file just before processing starts. Use this method to reset the
   * dependency tracking state associated with the file.
   */
  resetDependencies?(relativePath: string): void;
  /**
   * This method is called just as the template finishes being processed.
   *
   * @param relativePath {string} A relative path to the file that may have dependencies.
   * @return {string[]} paths to files that are a dependency for the given
   * file. Any relative paths returned by this method are taken to be relative
   * to the file that was processed.
   */
  dependencies(relativePath: string): string[];
}
```

### 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:

```js
// ember-cli-build.js

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-htmlbars': {
      templateCompilerPath: `some_path/to/ember-template-compiler.js`,
    }
  });
};
```

## Using as a Broccoli Plugin

```javascript
var HtmlbarsCompiler = require('ember-cli-htmlbars');

var templateTree = new HtmlbarsCompiler('app/templates', {
  isHTMLBars: true,

  // provide the templateCompiler that is paired with your Ember version
  templateCompiler: require('./bower_components/ember/ember-template-compiler')
});
```

---
_Source: https://npm.io/package/ember-cli-htmlbars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._