ember-cli-htmlbars

What is ember-cli-htmlbars?

The ember-cli-htmlbars package is an Ember CLI addon that provides a precompiler for Handlebars templates. It allows you to write Handlebars templates in your Ember.js applications and have them compiled into JavaScript functions that can be rendered efficiently.

What are ember-cli-htmlbars's main functionalities?

Precompiling Handlebars Templates

This feature allows you to precompile Handlebars templates into JavaScript functions. The `hbs` tagged template literal is used to define a Handlebars template, which is then compiled by ember-cli-htmlbars.

import { hbs } from 'ember-cli-htmlbars';

export default hbs`<div>{{yield}}</div>`;

Integration with Ember CLI

The package integrates seamlessly with Ember CLI, allowing you to easily add it to your Ember.js project using the Ember CLI command line tool.

ember install ember-cli-htmlbars

Template Compilation

This feature provides a function to compile Handlebars templates into JavaScript functions programmatically. The `compileTemplate` function takes a Handlebars template string and returns a compiled template function.

import { compileTemplate } from 'ember-cli-htmlbars';

const template = compileTemplate('<div>{{yield}}</div>');

Other packages similar to ember-cli-htmlbars

handlebars

The handlebars package is the core Handlebars library that provides the functionality to compile and render Handlebars templates. While it is not specific to Ember.js, it can be used in any JavaScript project to work with Handlebars templates.

ember-handlebars

The ember-handlebars package is an older package that was used in earlier versions of Ember.js to provide Handlebars template compilation. It has largely been replaced by ember-cli-htmlbars in modern Ember.js applications.

README

Ember CLI HTMLBars

Using as a Broccoli Plugin

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)
});

Registering a Plugin

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
    });
  }
};