@muonic/muon 0.0.2-experimental-184-6bbdbaf.0 → 0.0.2-experimental-185-9accacc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-184-6bbdbaf.0",
+  "version": "0.0.2-experimental-185-9accacc.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -47,6 +47,7 @@
     "postcss-preset-env": "8.3.2",
     "postcss-simple-vars": "7.0.1",
     "rollup-plugin-lit-css": "4.0.1",
+    "rollup-plugin-minify-html-literals": "1.2.6",
     "rollup-plugin-styles": "4.0.0",
     "style-dictionary": "3.8.0",
     "typescript": "5.0.4",

package/rollup.config.mjs

@@ -5,6 +5,7 @@ import { createBasicConfig } from '@open-wc/building-rollup';
 import path from 'path';
 import { componentDefiner, getDestination } from '@muonic/muon/scripts/utils/index.mjs';
 import { rollupPlugins } from '@muonic/muon/scripts/rollup-plugins.mjs';
+import minifyHTMLPlugin from 'rollup-plugin-minify-html-literals';
 
 const config = createBasicConfig();
 const input = 'index.js';
@@ -14,6 +15,7 @@ export default merge(config, {
   input,
   treeshake: false,
   plugins: [
+    minifyHTMLPlugin.default(),
     virtual({
       'component-definitions.js': componentDefiner()
     }),
@@ -25,6 +27,7 @@ export default merge(config, {
     dir: undefined,
     file: path.join(getDestination(), 'index.js'),
     sourcemap: false,
-    inlineDynamicImports: true
+    inlineDynamicImports: true,
+    format: 'iife'
   }
 });

package/scripts/utils/index.mjs

@@ -285,17 +285,24 @@ const createTokens = async () => {
 };
 
 const componentDefiner = async () => {
-  const config = getConfig();
   const compList = await analyze();
-  const prefix = getPrefix();
   let componentDefinition = `import '@webcomponents/scoped-custom-element-registry';`;
 
-  componentDefinition += compList.map(({ file, name, exportName, elementName }) => {
+  componentDefinition += compList.map(({ file, exportName }) => {
     return `import { ${exportName} } from '${file}';
-    customElements.define('${elementName}', ${exportName});
     `;
   }).join('');
 
+  const definingCompnents = compList.map(({ exportName, elementName }) => {
+    return `customElements.define('${elementName}', ${exportName});`;
+  });
+
+  componentDefinition += `
+    document.addEventListener('DOMContentLoaded', () => {
+      ${definingCompnents.join('')}
+    });
+  `;
+
   return componentDefinition;
 };