⚙️ rx-dom-aot-plugin

This plugin for rollup is intended to optimize the build of 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

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

Example of a vite.config.js file

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

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:

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
  ],
});

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

Invalid examples:

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

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

compileReactiveHTMLAsGenericComponentTemplate

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:

compileReactiveHTMLAsGenericComponentTemplate({ html: 'abc' });

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

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

Invalid examples:

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

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

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

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