# @lifeart/ember-extract-inline-templates

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

Latest version **2.2.0** (published 2022-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lifeart/ember-extract-inline-templates
pnpm add @lifeart/ember-extract-inline-templates
yarn add @lifeart/ember-extract-inline-templates
bun add @lifeart/ember-extract-inline-templates
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.0 |
| Published | 2022-02-05 |
| First published | 2021-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 10.* |
| Dependencies | 1 |
| Unpacked size | 178.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Saif TURKI |
| Maintainers | lifeart |
| Keywords | ember, search, extract, parse, traverse, inline template |

## Links

- npm: https://www.npmjs.com/package/@lifeart/ember-extract-inline-templates
- Repository: https://github.com/lifeart/ember-extract-inline-templates
- Homepage: https://github.com/lifeart/ember-extract-inline-templates#readme
- Issues: https://github.com/lifeart/ember-extract-inline-templates/issues
- npm.io page: https://npm.io/package/@lifeart/ember-extract-inline-templates

## Dependencies (1)

- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.17.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.2.0 (latest) — 2022-02-05
- 2.1.0 — 2021-10-16
- 2.0.0 — 2021-01-13

## README

Extract tagged template literals
==============================================================================

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

![The result](img/screenshot.jpg)

Installation
------------------------------------------------------------------------------

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

Usage
------------------------------------------------------------------------------

API:

```ts
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.:
  ```js
  {
    "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:
  ```js
  {
    "ember-cli-htmlbars": "hbs",
    "htmlbars-inline-precompile": "default",
    "ember-cli-htmlbars-inline-precompile": "default",
    "@glimmerx/component": "hbs",
    "@glimmer/core": ["createTemplate", "precompileTemplate"]
  }
  ```

- `parse` -  parser function.
  ```js
    // usage example #1
    import { parse } from 'babylon';
    function parseFunction(source) {
      return parse(source, { sourceType: 'module', plugins:  ['classProperties', 'flow'] });
    }
    getTemplateNodes(source, { parse: parseFunction });

  ```

  ```js
    // 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
```ts
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:
```hbs





    <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`

---
_Source: https://npm.io/package/@lifeart/ember-extract-inline-templates · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._