⚙️ @lirx/dom-aot-plugin

This plugin for rollup is intended to optimize the build of @lirxdom 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 @lirx/dom-aot-plugin
# or
npm install @lirx/dom-aot-plugin --save

Example of a vite.config.js file

import { aotPlugin } from '@lirx/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;

Options

interface IAOTPluginOptions {
  pathMatches?: IAOTPluginOptionsPathMatchesFunction;
}


interface IAOTPluginOptionsPathMatchesFunction {
  (
    path: string,
  ): boolean;
}

The aotPlugin function accepts an optional argument of type IAOTPluginOptions.

You may specify a pathMatches function used to optimize the files matching a specific path. For example, we may want to optimize all files ending with .ts or .component.mjs:

aotPlugin({
  pathMatches: (path) => {
    return path.endsWith('.ts')
      || path.endsWith('.component.mjs');
  },
}),

Usage and Limits

Currently, this plugin can only optimize the functions compileReactiveHTMLAsComponentTemplate and loadReactiveHTMLAsComponentTemplate with some constraints:

compileReactiveHTMLAsComponentTemplate

compileReactiveHTMLAsComponentTemplate({
  html: /* string, template string (without interpolated content) or variable (the variabe must be a default import) */,
  /* ...other options */
});

Valid examples:

compileReactiveHTMLAsComponentTemplate({
  html: 'abc',
  customElements: [ // optional
    // put your custom elements here
  ],
  modifiers: [ // optional
    // put your modifiers here
  ],
});

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

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

Invalid examples:

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

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

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

import { compileReactiveHTMLAsComponentTemplate as reactiveHTML } from '@lirx/dom';
reactiveHTML({ html: 'abc' });

loadReactiveHTMLAsComponentTemplate

await loadReactiveHTMLAsComponentTemplate({
  url: new URL(/* string => relative path to your reactive html */, import.meta.url)/* .href (optional) */,
  /* ...other options */
});

Valid examples:

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

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

Invalid examples:

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

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