# babel-plugin-transform-diffhtml

> Compiles tagged templates into createTree calls

Latest version **1.0.0-beta.29** (published 2022-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-transform-diffhtml
pnpm add babel-plugin-transform-diffhtml
yarn add babel-plugin-transform-diffhtml
bun add babel-plugin-transform-diffhtml
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.29 |
| Published | 2022-10-30 |
| First published | 2017-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 274.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tim Branyen |
| Maintainers | tbranyen |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-transform-diffhtml
- npm.io page: https://npm.io/package/babel-plugin-transform-diffhtml

## Recent versions

- 1.0.0-beta.29 (latest) — 2022-10-30
- 1.0.0-beta.28 — 2022-04-29
- 1.0.0-beta.27 — 2022-04-01
- 1.0.0-beta.26 — 2022-03-31
- 1.0.0-beta.25 — 2022-03-31
- 1.0.0-beta.24 — 2022-03-31
- 1.0.0-beta.23 — 2022-01-19
- 1.0.0-beta.22 — 2021-12-19
- 1.0.0-beta.21 — 2021-12-06
- 1.0.0-beta.20 — 2021-05-07
- 1.0.0-beta.19 — 2021-05-03
- 1.0.0-beta.18 — 2020-08-11
- 1.0.0-beta.17 — 2020-05-14
- 1.0.0-beta.16 — 2020-05-08
- 1.0.0-beta.15 — 2020-04-23
- … 15 more at https://npm.io/package/babel-plugin-transform-diffhtml/versions

## README

# <±/> babel-plugin-transform-diffhtml

*Babel transform for pre-parsing and compiling diffHTML template functions to
createTree calls which reduces runtime HTML parse cost.*

Latest version: 1.0.0-beta.29

Refer to the website [https://diffhtml.org/tools.html#babel-transform](https://diffhtml.org/tools.html#babel-transform) for documentation.

## Installation

Using npm:

```sh
npm install --save-dev babel-plugin-transform-diffhtml
```

or using yarn:

```sh
yarn add babel-plugin-transform-diffhtml --dev
```

## Simple example

`.babelrc`:

```json
{
  "plugins": [
    ["babel-plugin-transform-diffhtml", { "createTree": "_diffhtml.html" }]
  ]
}
```

`input.js`:

```js
import { innerHTML, html } from 'diffhtml';

function main() {
  innerHTML(document.body, html`
    <div><h1>Hello world</h1></div>
  `);
}

main();
```

`babel input.js`:

```
var _vtree = _diffhtml.html("#text", "Hello world");

import { innerHTML, html } from 'diffhtml';

function main() {
  innerHTML(document.body, _diffhtml.html("div", {}, [_diffhtml.html("h1", {}, [_diffhtml.html("#text", "Hello world")])]));
}

main();
```

You may need to tweak the "createTree" option to get the appropriate output in
the source to match how diffHTML is embedded and what build system you used.

---
_Source: https://npm.io/package/babel-plugin-transform-diffhtml · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._