Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
babel-plugin-ember-template-compilation
Advanced tools
Babel implementation of Ember's low-level template-compilation API
The babel-plugin-ember-template-compilation package is a Babel plugin designed to precompile Ember.js templates. This plugin allows developers to write templates in a more concise and readable format, which are then compiled into JavaScript functions that can be used within Ember applications.
Precompiling Templates
This feature allows you to precompile Ember.js templates using the Ember template compiler. The precompiled templates are then transformed into JavaScript functions that can be used within your Ember application.
module.exports = function (babel) {
return {
plugins: [
['babel-plugin-ember-template-compilation', {
precompile: require('ember-source/dist/ember-template-compiler').precompile
}]
]
};
};
Custom Template Compiler
This feature allows you to use a custom template compiler instead of the default Ember template compiler. This can be useful if you have specific requirements for how your templates should be compiled.
module.exports = function (babel) {
return {
plugins: [
['babel-plugin-ember-template-compilation', {
precompile: customTemplateCompiler
}]
]
};
};
function customTemplateCompiler(templateString) {
// Custom compilation logic
return compiledTemplate;
}
The ember-cli-htmlbars package is an Ember CLI addon that provides a preprocessor for compiling Handlebars templates in Ember.js applications. It is similar to babel-plugin-ember-template-compilation in that it precompiles templates, but it is specifically designed to work with Ember CLI and integrates more tightly with the Ember build process.
The babel-plugin-htmlbars-inline-precompile package is a Babel plugin that allows you to precompile Handlebars templates inline within JavaScript files. It is similar to babel-plugin-ember-template-compilation in that it precompiles templates, but it is designed to be used directly within JavaScript files rather than as part of a broader build process.
Babel plugin that implements Ember's low-level template-compilation API.
This plugin implements precompileTemplate
from RFC 496:
import { precompileTemplate } from '@ember/template-compilation';
For backward compatibility, it also has an enableLegacyModules
option that can enable each of these widely-used older patterns:
import { hbs } from 'ember-cli-htmlbars';
import hbs from 'ember-cli-htmlbars-inline-precompile';
import hbs from 'htmlbars-inline-precompile';
This package has both a Node implementation and a portable implementation that works in browsers. Both implementations share these common options:
interface Options {
// Allows you to remap what imports will be emitted in our compiled output. By
// example:
//
// outputModuleOverrides: {
// '@ember/template-factory': {
// createTemplateFactory: ['createTemplateFactory', '@glimmer/core'],
// }
// }
//
// Normal Ember apps shouldn't need this, it exists to support other
// environments like standalone GlimmerJS
outputModuleOverrides?: Record<string, Record<string, [string, string]>>;
// By default, this plugin implements only Ember's stable public API for
// template compilation, which is:
//
// import { precompileTemplate } from '@ember/template-compilation';
//
// But historically there are several other importable syntaxes in widespread
// use, and we can enable those too by including their module names in this
// list.
enableLegacyModules?: LegacyModuleName[];
}
type LegacyModuleName =
| 'ember-cli-htmlbars'
| 'ember-cli-htmlbars-inline-precompile'
| 'htmlbars-inline-precompile';
When used in Node, the Options are extended to include:
interface NodeOptions extends Options {
// The on-disk path to a module that provides a `precompile` function as
// defined below. You need to either set `precompilePath` or set `precompile`.
precompilerPath?: string;
// A precompile function that invokes Ember's template compiler.
//
// Options handling rules:
//
// - we add `content`, which is the original string form of the template
// - we add `meta.jsutils`, which gives AST transform plugins access to methods for manipulating the surrounding javascript scope. See "JSUtils" below.
// - we have special parsing for `scope` which becomes `locals` when passed
// to your precompile
// - anything else the user passes to `precompileTemplate` will be passed
// through to your `precompile`.
precompile?: EmberPrecompile;
}
type EmberPrecompile = (templateString: string, options: Record<string, unknown>) => string;
For use in non-Node environments including browsers, when you import from this package you get a factory function that takes a callback and returns the plugin. Your callback receives the babel plugin options and should return the precompile: EmberPrecompile
function as defined above.
import makePlugin from 'babel-plugin-ember-template-compilation';
import * as babel from '@babel/core';
babel.transform(someCode, { plugins: [makePlugin(loadTemplateCompiler)] });
AST transforms are plugins for modifying HBS templates at build time. Because those templates are embedded in Javascript and can access the Javascript scope, an AST plugin may want to introduce some new things into Javascript scope. That is what the JSUtils API is for.
Your AST transform can access the JSUtils API via env.meta.jsutils
. Here's an example transform.
function myAstTransform(env) {
return {
name: 'my-ast-transform',
visitor: {
PathExpression(node, path) {
if (node.original === 'onePlusOne') {
let name = env.meta.jsutils.bindExpression('1+1', path, { nameHint: 'two' });
return env.syntax.builders.path(name);
}
},
},
};
}
The example transform above would rewrite:
import { precompileTemplate } from '@ember/template-compilation';
precompileTemplate('<Counter @value={{onePlusOne}} />>');
To:
import { precompileTemplate } from '@ember/template-compilation';
let two = 1 + 1;
precompileTemplate('<Counter @value={{two}} />', { scope: () => ({ two }) });
See the jsdoc comments in js-utils.js for details on the methods available.
This repo derives from https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile
FAQs
Babel implementation of Ember's low-level template-compilation API
The npm package babel-plugin-ember-template-compilation receives a total of 131,198 weekly downloads. As such, babel-plugin-ember-template-compilation popularity was classified as popular.
We found that babel-plugin-ember-template-compilation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 17 open source maintainers collaborating on the project.
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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.