Currently I'm experimenting with Preact, Rollup and Typescript. The idea is to create a sort of components library where all the dependencies are coming from CDN.
The idea is to have e.g. this product.tsx file:
import { FunctionalComponent } from 'preact';
import register from 'preact-custom-element';
interface ProductProps {
name: string;
}
const Product: FunctionalComponent<ProductProps> = ({name}: ProductProps) => <p>Hello {name}</p>;
register(Product, 'x-product', ['name'], { shadow: false });
And from this the TypeScript + Bundler generating something like this (product.js, of course can be further minified):
(function) {
'use strict';
const Product = ({ name }) => preact_10_19_3.h("p", null,
"Hello ",
name);
preact-custom-element_4_3_0.register(Product, 'x-product', ['name'], { shadow: false });
})();
So this file can be used in an index.html where we can load the dependencies from the CDN and alias them (to avoid possible version conflict)
<body>
<!-- Load from CDN -->
<script src="cdn/10.19.3/preact.min.js"></script>
<!-- Alias -->
<script>
window.preact_10_19_3 = preact;
</script>
<!-- Register x-product webcomponent -->
<script src="./product.js"></script>
<!-- Use webcomponent -->
<x-product name="Test" />
</body>
Do you have any idea/suggestion how to do this?
I've found some promising configuration (rollup 'iife' format) but most of these libraries are not very well documented.
Maybe I should try webpack instead?
Does this "load time gain" with CDN worth at all?