Registry / babel-plugin-htmlbars-inline-precompile

babel-plugin-htmlbars-inline-precompile

library5.3.1jsnpmunverified

Babel plugin to replace tagged template strings or function calls with precompiled HTMLBars templates, primarily used in Ember.js applications. Current stable version is 5.3.1, released on a monthly cadence. Key differentiator: it allows inline HBS templates in tests and code, which get precompiled at build time. Alternative to ember-cli-htmlbars for non-Ember projects, but tightly coupled to Ember's template compiler. Requires Node 10+, Ember 2.10+, and Babel 7. Notable breaking change in v5.0.0: renamed `scope` option to `locals`.

npm install babel-plugin-htmlbars-inline-precompile

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-HTMLB

babel-plugin-htmlbars-inline-precompile

javascriptv5.3.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

hbs

✓ import hbs from 'htmlbars-inline-precompile'

✗ const hbs = require('htmlbars-inline-precompile').default

Default export from 'htmlbars-inline-precompile'. ESM-only; CommonJS require may not work in all packagers.

babel-plugin-htmlbars-inline-precompile

✓ plugins: [['babel-plugin-htmlbars-inline-precompile', { precompile: ... }]]

✗ plugins: ['babel-plugin-htmlbars-inline-precompile']

Plugin requires options object with `precompile` function (or `templateCompilerPath` since v5). Without options, the plugin has no effect.

precompile

✓ import { precompile } from '@glimmer/compiler';

✗ import { precompile } from 'babel-plugin-htmlbars-inline-precompile';

The precompile function comes from Ember's template compiler (e.g., @glimmer/compiler or ember-source), not from this plugin.

Shows Babel plugin setup and usage of hbs tagged template for inline compiled templates.

// Install: npm install --save-dev babel-plugin-htmlbars-inline-precompile htmlbars-inline-precompile // Configure Babel plugin in babel.config.js: module.exports = function(api) { api.cache(true); return { plugins: [ ['babel-plugin-htmlbars-inline-precompile', { precompile: require('@glimmer/compiler').precompile, // or use templateCompilerPath option: // templateCompilerPath: 'path/to/ember-template-compiler.js' }] ] }; }; // In your test file: import hbs from 'htmlbars-inline-precompile'; import { render } from '@ember/test-helpers'; await render(hbs`<p>Hello {{name}}!</p>`);

Debug

Known issues

breakingIn v5.0.0, the `scope` option was renamed to `locals`.

fix

Replace any usage of `scope` with `locals` in plugin options.

affects: >=5.0.0

gotchaThe plugin relies on Babel 7; using Babel 6 will cause errors.

fix

Upgrade to Babel 7 and use babel-plugin-htmlbars-inline-precompile >=3.0.0.

affects: >=1.0.0

gotchaThe import `import hbs from 'htmlbars-inline-precompile'` is a default export, but some bundlers may require `.default` when using CommonJS require.

fix

Use ESM imports. If using CommonJS, write `const hbs = require('htmlbars-inline-precompile').default`.

affects: >=1.0.0

deprecatedPassing `precompile` directly as an option is still supported but `templateCompilerPath` is preferred since v5.

fix

Use `templateCompilerPath` option to specify path to template compiler.

affects: >=5.0.0

Errors

Common errors & fixes

Cannot find module 'babel-plugin-htmlbars-inline-precompile'

Plugin not installed or not in node_modules.

fix

Run `npm install --save-dev babel-plugin-htmlbars-inline-precompile`.

TypeError: Cannot read property 'precompile' of undefined

The `precompile` option was not provided or points to an invalid object.

fix

Ensure you pass a valid precompile function, e.g., from @glimmer/compiler: `precompile: require('@glimmer/compiler').precompile`.

Error: hbs is not a function

Using `hbs` as a regular function without the plugin configured or using it outside of Babel-transformed code.

fix

Ensure the Babel plugin is configured correctly and that code with hbs is being transpiled by Babel.

Upgrade

Version history

5.3.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile ↗

packagehttps://www.npmjs.com/package/babel-plugin-htmlbars-inline-precompile ↗