@lifeart/ember-extract-inline-templates
TypeScript icon, indicating that this package has built-in type declarations

2.2.0 • Public • Published

Extract tagged template literals

Search and extract ember inline templates from script file(js/ts) using the import declarations.

The result

Installation

# not published yet
yarn add ember-extract-inline-templates

Usage

API:

searchAndExtractHbs(source: string, options?: ISearchAndExtractHbsOptions): string | never;

getTemplateNodes(source: string, options?: IGetTemplateNodesOptions): ITemplateNode[];

Options:

  • hbsTagSources - [Optional] The additional hbs tag sources used in the import declaration(s), e.g.:

    {
      "hbs-source-with-default-export": "default", // import hbs from 'hbs-source-with-default-export';
      "hbs-source-with-named-export" : "handlebars", // import { handlebars } from 'hbs-source-wth-named-export';
      "hbs-source-with-renamed-export": "hbs" // import { hbs as h } from 'hbs-source-with-renamed-export';
    }

    Default hbs tag sources:

    {
      "ember-cli-htmlbars": "hbs",
      "htmlbars-inline-precompile": "default",
      "ember-cli-htmlbars-inline-precompile": "default",
      "@glimmerx/component": "hbs",
      "@glimmer/core": ["createTemplate", "precompileTemplate"]
    }
  • parse - parser function.

      // usage example #1
      import { parse } from 'babylon';
      function parseFunction(source) {
        return parse(source, { sourceType: 'module', plugins:  ['classProperties', 'flow'] });
      }
      getTemplateNodes(source, { parse: parseFunction });
      // usage example #2
      import { parseScriptFile } from 'ember-meta-explorer';
      function parseFunction(source) {
        return parseScriptFile(source);
      }
      getTemplateNodes(source, { parse: parseFunction });
  • sortByStartKey - [Optional] The extracted template nodes from the ast will not be ordered by their original position in the source, so we can sort them using the start key, false by default.

Example

import { searchAndExtractHbs } from 'ember-extract-inline-templates';

const source = `
  import GlimmerComponent from '@glimmer/component';
  // @ts-ignore
  import hbs from 'ember-cli-htmlbars-inline-precompile';

  const template = hbs\`
    <div class="input {{this.type}}">
      <label>{{yield}}</label>
      <input type={{this.type}} value={{this.value}}>
    </div>
  \`;

  interface IComponentArgs {
    type: string;
    value?: any;
  }

  class MyInputComponent extends GlimmerComponent<IComponentArgs> {
    type: string = 'text';
  };

  // @ts-ignore
  export default Ember._setComponentTemplate(template, MyInputComponent);
`;

const hbs = searchAndExtractHbs(source);
console.log(hbs);

Output:





    <div class="input {{this.type}}">
      <label>{{yield}}</label>
      <input type={{this.type}} value={{this.value}}>
    </div

Todo

  • Add CI tool(Travis, CircleCI...)
  • Add other advanced examples to README.md.
  • Add other test cases.

Contributing

Installation

  • git clone <repository-url>
  • cd ember-extract-inline-templates
  • yarn install

Linting

  • yarn lint

Running test

  • yarn test

Package Sidebar

Install

npm i @lifeart/ember-extract-inline-templates

Weekly Downloads

891

Version

2.2.0

License

MIT

Unpacked Size

183 kB

Total Files

23

Last publish

Collaborators

  • lifeart