2.2.0 • Published 2 years ago
@lifeart/ember-extract-inline-templates v2.2.0
Extract tagged template literals
Search and extract ember inline templates from script file(js/ts) using the import declarations
.
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 thestart
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