# @lifaon/rx-dom-aot-plugin

> Description

Latest version **2.0.0** (published 2021-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lifaon/rx-dom-aot-plugin
pnpm add @lifaon/rx-dom-aot-plugin
yarn add @lifaon/rx-dom-aot-plugin
bun add @lifaon/rx-dom-aot-plugin
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-11-13 |
| First published | 2021-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 59 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Valentin Richard |
| Maintainers | lifaon74 |

## Links

- npm: https://www.npmjs.com/package/@lifaon/rx-dom-aot-plugin
- Repository: https://github.com/lifaon74/rx-dom-aot-plugin
- npm.io page: https://npm.io/package/@lifaon/rx-dom-aot-plugin

## Dependencies (8)

- [acorn](https://npm.io/package/acorn.md) ^8.5.0
- [jsdom](https://npm.io/package/jsdom.md) ^18.0.0
- [astring](https://npm.io/package/astring.md) ^1.7.5
- [acorn-walk](https://npm.io/package/acorn-walk.md) ^8.2.0
- [source-map](https://npm.io/package/source-map.md) ^0.7.3
- [@types/estree](https://npm.io/package/@types/estree.md) ^0.0.50
- [html-minifier](https://npm.io/package/html-minifier.md) ^4.0.0
- [@lifaon/rx-dom](https://npm.io/package/@lifaon/rx-dom.md) 2.0.0

## Recent versions

- 2.0.0 (latest) — 2021-11-13
- 1.0.0 — 2021-10-24

## README

[![npm (scoped)](https://img.shields.io/npm/v/@lifaon/rx-dom-aot-plugin.svg)](https://www.npmjs.com/package/@lifaon/rx-dom-aot-plugin)
![npm](https://img.shields.io/npm/dm/@lifaon/rx-dom-aot-plugin.svg)
![NPM](https://img.shields.io/npm/l/@lifaon/rx-dom-aot-plugin.svg)
![npm type definitions](https://img.shields.io/npm/types/@lifaon/rx-dom-aot-plugin.svg)

## ⚙️ rx-dom-aot-plugin ##

This plugin for rollup is intended to optimize the build of [rx-dom](https://github.com/lifaon74/rx-dom) components.
It removes the JIT compiler, and converts every *reactive-html* into pure javascript.

This result in very small bundle, optimized code and faster performances.

## 📦 Installation

```bash
yarn add @lifaon/rx-dom-aot-plugin
# or
npm install @lifaon/rx-dom-aot-plugin --save
```

### Example of a vite.config.js file


```ts
import { aotPlugin } from '@lifaon/rx-dom-aot-plugin';

/**
 * @type {import('vite').UserConfig}
 */
const config = {
  build: {
    target: 'es2015',
    terserOptions: {
      toplevel: true,
      ecma: 2020,
      compress: {
        pure_getters: true,
        passes: 5,
        ecma: 2020,
        unsafe: true,
        unsafe_arrows: true,
        unsafe_comps: true,
        unsafe_Function: true,
        unsafe_math: true,
        unsafe_symbols: true,
        unsafe_methods: true,
        unsafe_proto: true,
        unsafe_undefined: true,
      },
      mangle: {
        eval: true,
      }
    },
  },
  plugins: [
    aotPlugin(),
  ],
  server: {
    https: false,
  }
};

export default config;

```


### Details

Currently, this plugin can only optimize the functions `compileReactiveHTMLAsGenericComponentTemplate` and `loadReactiveHTMLAsGenericComponentTemplate`
with some constraints:


#### loadReactiveHTMLAsGenericComponentTemplate

```ts
await loadReactiveHTMLAsGenericComponentTemplate({
  url: new URL(/* string => relative path to your reactive html */, import.meta.url)/* .href (optional) */,
  customElements: /* anything supported: array, variables, etc... */,
  modifiers: /* anything supported: array, variables, etc... */,
});
```

Valid examples:

```ts
await loadReactiveHTMLAsGenericComponentTemplate({
  url: new URL('./hello-world-component.html', import.meta.url),
  customElements: [ // optional
    // put your custom elements here
  ],
  modifiers: [ // optional
    // put your modifiers here
  ],
});
```

```ts
await loadReactiveHTMLAsGenericComponentTemplate({ url: new URL('./hello-world-component.html', import.meta.url) });
```

Invalid examples:

```ts
const url = new URL('./hello-world-component.html', import.meta.url);
await loadReactiveHTMLAsGenericComponentTemplate({ url });
```

```ts
import { loadReactiveHTMLAsGenericComponentTemplate as reactiveHTML } from '@lifaon/rx-dom';
await reactiveHTML({ url: new URL('./hello-world-component.html', import.meta.url) });
```

#### compileReactiveHTMLAsGenericComponentTemplate

```ts
compileReactiveHTMLAsGenericComponentTemplate({
  html: /* string, template string (without interpolated content) or variable (the variabe must be a default import) */,
  customElements: /* anything supported: array, variables, etc... */,
  modifiers: /* anything supported: array, variables, etc... */,
});
```

Valid examples:

```ts
compileReactiveHTMLAsGenericComponentTemplate({ html: 'abc' });
```

```ts
compileReactiveHTMLAsGenericComponentTemplate({
  html: `
    <div class="my-div">
      abc
    </div>
  `
});
```

```ts
import html from './hello-world-component.html?raw'; // vite js
compileReactiveHTMLAsGenericComponentTemplate({ html });
```

Invalid examples:

```ts
const html = 'abc';
compileReactiveHTMLAsGenericComponentTemplate({ html });
```

```ts
const content = 'abc';
compileReactiveHTMLAsGenericComponentTemplate({
  html: `
    <div class="my-div">
      ${content}
    </div>
  `
});
```

```ts
import html from './hello-world-component.ts'; // './hello-world-component.ts' MUST contain only reactive-html
compileReactiveHTMLAsGenericComponentTemplate({ html });
```

```ts
import { compileReactiveHTMLAsGenericComponentTemplate as reactiveHTML } from '@lifaon/rx-dom';
reactiveHTML({ html: 'abc' });
```

---
_Source: https://npm.io/package/@lifaon/rx-dom-aot-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._