/babel-plugin-htmlbars-inline-precompile

Babel plugin to replace tagged template strings with precompiled HTMLBars templates

Primary LanguageJavaScript

babel-plugin-htmlbars-inline-precompile Build Status

Babel plugin to replace ES6 tagged template strings with the HTMLBars.precompiled version of it:

import hbs from 'htmlbars-inline-precompile';

module("my view");

test("inline templates ftw", function(assert) {
  var view = Ember.View.create({
    greeting: "inline template world",
    template: hbs`
      <span>hello {{view.greeting}}</span>
    `
  });

  view.appendTo('#testing');

  assert.equal(view.$().html().trim(), "<span>hello inline template world</span>");
});

results in

module("my view");

test("inline templates ftw", function(assert) {
  var view = Ember.View.create({
    greeting: "inline template world",
    template: Ember.HTMLBars.template(function() {
      /* crazy HTMLBars template function stuff */
    })
  });

  view.appendTo('#testing');

  assert.equal(view.$().html().trim(), "<span>hello inline template world</span>");
});

If the template is compact, a normal string can be passed as argument as well:

import hbs from 'htmlbars-inline-precompile';

module("my view");

test("inline templates ftw", function(assert) {
  var view = Ember.View.create({
    greeting: "inline template world",
    template: hbs('<h1>{{view.greeting}}</h1>')
  });

  view.appendTo('#testing');

  assert.equal(view.$().html().trim(), "<h1>inline template world</h1>");
});

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