babel-plugin-htmlbars-inline-precompile

What is babel-plugin-htmlbars-inline-precompile?

The babel-plugin-htmlbars-inline-precompile package is a Babel plugin that allows you to precompile Handlebars templates inline within your JavaScript code. This is particularly useful in Ember.js applications where you want to use Handlebars templates directly in your JavaScript files.

What are babel-plugin-htmlbars-inline-precompile's main functionalities?

Inline Precompilation of Handlebars Templates

This feature allows you to write Handlebars templates directly in your JavaScript code and have them precompiled at build time. This can improve performance by avoiding runtime compilation.

import hbs from 'htmlbars-inline-precompile';

const template = hbs`<div>{{name}}</div>`;

Integration with Ember.js

The plugin integrates seamlessly with Ember.js, allowing you to define component templates inline. This can make your code more modular and easier to manage.

import Component from '@glimmer/component';
import hbs from 'htmlbars-inline-precompile';

export default class MyComponent extends Component {
  static template = hbs`<div>{{this.name}}</div>`;
}

Other packages similar to babel-plugin-htmlbars-inline-precompile

ember-cli-htmlbars

The ember-cli-htmlbars package is an Ember CLI addon that provides Handlebars template compilation for Ember.js applications. Unlike babel-plugin-htmlbars-inline-precompile, which focuses on inline templates within JavaScript, ember-cli-htmlbars is more geared towards traditional .hbs template files.

handlebars-loader

The handlebars-loader package is a Webpack loader that precompiles Handlebars templates. It is similar to babel-plugin-htmlbars-inline-precompile in that it precompiles templates, but it is used in the context of Webpack rather than Babel.

README

babel-plugin-htmlbars-inline-precompile

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