2.0.0 • Published 2 years ago
@lifaon/rx-dom-aot-plugin v2.0.0
⚙️ 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' });