I have developed a custom web component to display gists in any HTML content.
Starting with the Lit Element Typescript Starter Project as a base, I customized the rollup.config.js file.
The output format was changed to iife for easier script tag accessibility, following Rollup's suggestion.
Here is the modified rollup.config.js file.
// Custom configuration based on rollup starter app
// https://github.com/rollup/rollup-starter-app/blob/master/package.json
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import {terser} from 'rollup-plugin-terser';
import replace from '@rollup/plugin-replace';
import filesize from 'rollup-plugin-filesize';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'fs-gist.js',
output: {
file: 'fs-gist.bundle.js',
format: 'iife',
sourcemap: true,
},
onwarn(warning) {
if (warning.code !== 'THIS_IS_UNDEFINED') {
console.error(`(!) ${warning.message}`);
}
},
plugins: [
replace({'Reflect.decorate': 'undefined'}),
resolve(),
commonjs(),
production && terser({
module: true,
warnings: true,
mangle: {
properties: {
regex: /^__/,
},
},
}),
filesize({
showBrotliSize: true,
})
],
};
The build appears to be successful. You can view a demo here.
If anyone has insights on adjusting other Rollup settings after switching from esm to iife, I'd appreciate it.