Merge pull request #51 from break-stuff/create-lazy-loader

add custom element lazy-loader

demo/lit-app/custom-elements-manifest.config.mjs

@@ -5,6 +5,7 @@ import { customElementJsxPlugin } from "custom-element-jsx-integration";
 import { getTsProgram, expandTypesPlugin } from "cem-plugin-expanded-types";
 import { customElementReactWrapperPlugin } from "custom-element-react-wrappers";
 import { customElementVuejsPlugin } from "custom-element-vuejs-integration";
+import { customElementLazyLoaderPlugin } from "custom-element-lazy-loader";
 
 export default {
   /** Globs to analyze */
@@ -68,5 +69,8 @@ export default {
     customElementVuejsPlugin({
       componentTypePath: (name, tag) => `./dist/${tag}/${name}.d.ts`,
     }),
+    customElementLazyLoaderPlugin({
+      importPathTemplate: (name, tag) => `./dist/${tag}/${name}.js`,
+    })
   ],
 };

demo/lit-app/loader.js

@@ -0,0 +1,88 @@
+let observer;
+let components = {
+  "radio-group": {
+    importPath: "./dist/radio-group/RadioGroup.js",
+    dependencies: [],
+  },
+  "radio-button": {
+    importPath: "./dist/radio-button/RadioButton.js",
+    dependencies: [],
+  },
+};
+
+export function updateConfig(config) {
+  if (config.components) {
+    components = { ...components, ...config.components };
+  }
+
+  if (config.rootElement) {
+    observer.disconnect();
+    start(config.rootElement);
+  }
+}
+
+async function load(root) {
+  const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
+  const tags = [...root.querySelectorAll(":not(:defined)")].map((el) =>
+    el.tagName.toLowerCase()
+  );
+  if (rootTagName.includes("-") && !customElements.get(rootTagName)) {
+    tags.push(rootTagName);
+  }
+  const tagsToRegister = [...new Set(tags)];
+  await Promise.allSettled(tagsToRegister.map((tagName) => register(tagName)));
+}
+
+function register(tagName) {
+  if (customElements.get(tagName)) {
+    cleanUp(component, tagName);
+    return Promise.resolve();
+  }
+
+  const component = components[tagName];
+  if (!component) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    import(component.importPath)
+      .then(() => {
+        cleanUp(component, tagName);
+        resolve();
+      })
+      .catch(() => {
+        console.error(
+          `Unable to load <${tagName}> from ${component.importPath}`
+        );
+        reject();
+      });
+  });
+}
+
+function cleanUp(component, tagName) {
+  delete components[tagName];
+  component.dependencies?.forEach((dependency) => {
+    delete components[dependency];
+  });
+
+  if (!Object.keys(component).length) {
+    observer.disconnect();
+  }
+}
+
+function start(root = document.body) {
+  observer = new MutationObserver((mutations) => {
+    for (const { addedNodes } of mutations) {
+      for (const node of addedNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          load(node);
+        }
+      }
+    }
+  });
+
+  load(root);
+  observer.observe(root, { subtree: true, childList: true });
+}
+
+start();

demo/lit-app/package.json

@@ -19,6 +19,7 @@
     "cem-plugin-expanded-types": "*",
     "custom-element-jet-brains-integration": "*",
     "custom-element-jsx-integration": "*",
+    "custom-element-lazy-loader": "*",
     "custom-element-react-wrappers": "*",
     "custom-element-solidjs-integration": "*",
     "custom-element-vs-code-integration": "*",