⚠️ Archived ⚠️

This library has been superceded by babel-plugin-ember-template-compilation and ember-template-imports.

Depending on a consumer's ember-source version, ember-cli-htmlbars will select whether to use babel-plugin-htmlbars-inline-precompile or babel-plugin-ember-template-compilation - based on this code -- i.e: after [email protected], only babel-plugin-ember-template-compilation will be used.

At the time of archiving this repo, [email protected] is not under LTS

---

babel-plugin-htmlbars-inline-precompile

Babel plugin to replace tagged .hbs formatted strings with a precompiled version.

Requirements

• Node 8+
• Ember 2.10+
• Babel 7

Usage

Can be used as either a normal function invocation or a tagged template string:

import hbs from 'htmlbars-inline-precompile';

hbs`some {{handlebarsthingy}}`;
hbs('some {{handlebarsthingy}}');

When used as a normal function invocation, you can pass additional options (e.g. to configure the resulting template's moduleName metadata):

import hbs from 'htmlbars-inline-precompile';

hbs('some {{handlebarsthingy}}', { moduleName: 'some/path/to/file.hbs' });

Babel Plugin Usage

var HTMLBarsCompiler = require('./bower_components/ember/ember-template-compiler');
var HTMLBarsInlinePrecompile = require('babel-plugin-htmlbars-inline-precompile');

require('babel').transform("code", {
  plugins: [
    [HTMLBarsInlinePrecompile, {precompile: HTMLBarsCompiler.precompile}],
  ],
});

Example

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module("my component", function(hooks) {
  setupRenderingTest(hooks);

  test('inline templates ftw', async function(assert) {
    await render(hbs`hello!`);

    assert.dom().hasText('hello!');
  });
});

results in

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module("my component", function(hooks) {
  setupRenderingTest(hooks);

  test('inline templates ftw', async function(assert) {
    await render(Ember.HTMLBars.template(function() {
      /* crazy HTMLBars template function stuff */
    }));

    assert.dom().hasText('hello!');
  });
});