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