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

Changelog

Source

0.0.5 (2015-07-10)

Full Changelog

Merged pull requests:

Allow single string as argument for hbs #7 (pangratz)

Readme

Source

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

var pluginConfiguredWithCompiler = HTMLBarsInlinePrecompile(HTMLBarsCompiler.precompile);

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

FAQs

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

Is babel-plugin-htmlbars-inline-precompile popular?

Is babel-plugin-htmlbars-inline-precompile well maintained?

Package last updated on 10 Jul 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install