6.3.0 • Published 8 months ago

ember-cli-htmlbars v6.3.0

Weekly downloads
618,697
License
MIT
Repository
github
Last release
8 months ago

Ember CLI HTMLBars

Compatibility

  • Ember.js v3.8 or above
  • Ember CLI v3.8 or above
  • Node.js v12 or above

Tagged Template Usage / Migrating from htmlbars-inline-precompile

Starting with version 4.0, this addon now includes the testing helper from ember-cli-htmlbars-inline-precompile

This will require an update to the imports of the hbs helper in your tests:

Prior syntax:

import hbs from 'htmlbars-inline-precompile';

...

await render(hbs`
  <MyComponent />
`);

New syntax:

import { hbs } from 'ember-cli-htmlbars';

...

await render(hbs`
  <MyComponent />
`);

There is a codemod available to automate this change.

Additional Trees

For addons which want additional customizations, they are able to interact with this addon directly.

interface EmberCLIHTMLBars {
  /**
    Supports easier transpilation of non-standard input paths (e.g. to transpile
    a non-addon NPM dependency) while still leveraging the logic within
    ember-cli-htmlbars for transpiling (e.g. custom AST transforms, colocation, etc).
  */
  transpileTree(inputTree: BroccoliTree): BroccoliTree;
}

transpileTree usage

// find the ember-cli-htmlbars addon
let htmlbarsAddon = this.addons.find(addon => addon.name === 'ember-cli-htmlbars');

// invoke .transpileTree passing in the custom input tree
let transpiledCustomTree = htmlbarsAddon.transpileTree(someCustomTree);

Adding Custom Plugins

You can add custom plugins to be used during transpilation of the addon/ or addon-test-support/ trees of your addon (or the app/ and tests/ trees of an application) by registering a custom AST transform.

var SomeTransform = require('./some-path/transform');

module.exports = {
  name: 'my-addon-name',

  included: function() {
    // we have to wrap these in an object so the ember-cli
    // registry doesn't try to call `new` on them (new is actually
    // called within htmlbars when compiling a given template).
    this.app.registry.add('htmlbars-ast-plugin', {
      name: 'some-transform',
      plugin: SomeTransform
    });
    
    this._super.included.apply(this, arguments);
  }
};

Options for registering a plugin

  • name - String. The name of the AST transform for debugging purposes.
  • plugin - A function of type ASTPluginBuilder.
  • dependencyInvalidation - Boolean. A flag that indicates the AST Plugin may, on a per-template basis, depend on other files that affect its output.
  • cacheKey - function that returns any JSON-compatible value - The value returned is used to invalidate the persistent cache across restarts, usually in the case of a dependency or configuration change.
  • baseDir - () => string. A function that returns the directory on disk of the npm module for the plugin. If provided, a basic cache invalidation is performed if any of the dependencies change (e.g. due to a npm install/upgrade).

Implementing Dependency Invalidation in an AST Plugin

Plugins that set the dependencyInvalidation option to true can provide function for the plugin of type ASTDependencyPlugin as given below.

Note: the plugin function is invoked without a value for this in context.

import {ASTPluginBuilder, ASTPlugin} from "@glimmer/syntax/dist/types/lib/parser/tokenizer-event-handlers";

export type ASTDependencyPlugin = ASTPluginWithDepsBuilder | ASTPluginBuilderWithDeps;

export interface ASTPluginWithDepsBuilder {
  (env: ASTPluginEnvironment): ASTPluginWithDeps;
}

export interface ASTPluginBuilderWithDeps extends ASTPluginBuilder {
  /**
   * @see {ASTPluginWithDeps.dependencies} below.
   **/
  dependencies(relativePath): string[];
}

export interface ASTPluginWithDeps extends ASTPlugin {
  /**
   * If this method exists, it is called with the relative path to the current
   * file just before processing starts. Use this method to reset the
   * dependency tracking state associated with the file.
   */
  resetDependencies?(relativePath: string): void;
  /**
   * This method is called just as the template finishes being processed.
   *
   * @param relativePath {string} A relative path to the file that may have dependencies.
   * @return {string[]} paths to files that are a dependency for the given
   * file. Any relative paths returned by this method are taken to be relative
   * to the file that was processed.
   */
  dependencies(relativePath: string): string[];
}

Precompile HTMLBars template strings within other addons

module.exports = {
  name: 'my-addon-name',

  setupPreprocessorRegistry: function(type, registry) {
    var htmlbarsPlugin = registry.load('template').find(function(plugin) {
      return plugin.name === 'ember-cli-htmlbars';
    });

    // precompile any htmlbars template string via the precompile method on the
    // ember-cli-htmlbars plugin wrapper; `precompiled` will be a string of the
    // form:
    //
    //   Ember.HTMLBars.template(function() {...})
    //
    var precompiled = htmlbarsPlugin.precompile("{{my-component}}");
  }
};

Custom Template Compiler

You can still provide a custom path to the template compiler (e.g. to test custom template compiler tweaks in an application) by:

// ember-cli-build.js

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-htmlbars': {
      templateCompilerPath: `some_path/to/ember-template-compiler.js`,
    }
  });
};

Using as a Broccoli Plugin

var HtmlbarsCompiler = require('ember-cli-htmlbars');

var templateTree = new HtmlbarsCompiler('app/templates', {
  isHTMLBars: true,

  // provide the templateCompiler that is paired with your Ember version
  templateCompiler: require('./bower_components/ember/ember-template-compiler')
});
ember-pollsterember-v-formember-world-map@trusted-american/ember-text-highlight@wolvy/ember-bloks@melkor/aspen-themehovhannes-cl-componentsember-parlay-slparlay-slparlay-sl-componentparlay-sl-componentsember-scrollable-modal@fabriquartz/ember-computed-convert-unitkb-base-ember-addonsember-pancakeember-cli-fill-murray-santosharakeretrionyx@unihorncorn/horn-stylesember-cli-fill-murray-michelegera@stonecircle/faceember-ux-pod-stylesember-ux-scroll-portember-ux-split-viewember-ux-tab-controlember-delay-classember-cli-fill-murray-jschwindtlatest-em-addonold-em-addonember-cli-fill-murray-lypborges@theenadayalan/ember-cli-notificationscoinmaster-spins-freeember-tagifysolid-addonember-bloksember-cli-zesty-shared-componentsember-cli-mapboxember-time-inputember-basic-dropdown-f2ember-power-select-f2gaba-baseua-infra-addonua-theme-addonglint-template-typesember-ux-coreember-ux-controlsember-class-names-builderember-foundationember-async-expanding-treeember-more-menu@wolvy/ember-blok-buttonsjacefarm-gjjember-adminlte-theme-fixedember-cli-blog-adminember-cli-fill-murray-fryieember-cli-fill-murray-kosmakoffryanone-standalone-engineember-cli-foundation-6ember-cli-shaka-playerember-cli-spinner-sd@choiceform/components-display@choiceform/components-feedback@choiceform/components-inputs@choiceform/components-navigationjoda-miscjoda-coreember-cli-styleless-tokenfieldember-focus@kbsoftware/kb-base-ember-addonsember-aws-modelember-cli-owl-carousel2ember-contextual-table-ember-upgradedember-cli-impact-componentsember-cli-impact-coreember-cli-fill-murray-jluckivleasing-file-upload-button@opendata.fit/ember-simple-tabsember-scaffoldingember-cli-fill-murray-mxchaiember-jane-maps@opendatafit/ember-simple-tabsember-spinner@infinitebrahmanuniverse/nolb-ember-cli-h@sentry-murz/ember@prodam/ember-cognitomy-ember-componentsember-cli-fill-murray-gijsbotjeember-blog-engine-by-vothaisonember-elementsember-show-or-edit-boxngbit-addon-drawer-boxngbit-addon-input-autocheckngbit-addon-input-checkboxngbit-addon-input-dropdownngbit-addon-input-radio-formngbit-addon-note-boxngbit-addon-page-dialogngbit-addon-page-drag-dialogngbit-addon-show-or-edit-box@everything-registry/sub-chunk-1575ember-dugo-ui
6.3.0

8 months ago

6.2.0

1 year ago

6.1.1

2 years ago

6.1.0

2 years ago

6.1.0-alpha.0

2 years ago

6.0.1

2 years ago

5.7.2

2 years ago

6.0.0

2 years ago

5.7.1

3 years ago

5.7.0

3 years ago

5.6.5

3 years ago

5.6.4

3 years ago

5.6.3

3 years ago

4.5.0

3 years ago

5.6.2

3 years ago

5.6.1

3 years ago

5.6.0

3 years ago

5.5.0

3 years ago

5.4.0

3 years ago

5.3.2

3 years ago

4.4.1

3 years ago

5.3.1

4 years ago

4.4.0

4 years ago

5.3.0

4 years ago

5.2.0

4 years ago

5.1.2

4 years ago

5.1.1

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.3.1

4 years ago

4.3.0

4 years ago

4.2.3

4 years ago

4.2.2

4 years ago

4.2.1

4 years ago

4.2.0

4 years ago

4.1.1

4 years ago

4.1.0

4 years ago

4.0.9

4 years ago

4.0.8

4 years ago

4.0.7

4 years ago

4.0.6

4 years ago

4.0.5

4 years ago

4.0.4

4 years ago

4.0.3

4 years ago

4.0.2

4 years ago

4.0.1

5 years ago

4.0.0

5 years ago

3.1.0

5 years ago

1.3.5

5 years ago

2.0.5

5 years ago

3.0.1

5 years ago

3.0.0

6 years ago

2.0.4

6 years ago

1.3.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

1.3.3

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.3.2

7 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago

1.1.1

7 years ago

1.1.0

8 years ago

1.0.11

8 years ago

1.0.10

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.7.10

9 years ago

0.7.9

9 years ago

0.7.8

9 years ago

0.7.7

9 years ago

0.7.6

9 years ago

0.7.5

9 years ago

0.7.4

9 years ago

0.7.3

9 years ago

0.7.2

9 years ago

0.7.1

9 years ago

0.7.0

9 years ago

0.6.0

9 years ago

0.5.4

9 years ago

0.5.3

9 years ago

0.5.2

9 years ago

0.5.1

9 years ago

0.5.0

9 years ago

0.4.5

9 years ago

0.4.4

9 years ago

0.4.3

9 years ago

0.4.2

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.4

9 years ago

0.3.3

9 years ago

0.3.2

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.5

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.0

9 years ago