latest WCC patching

ProjectEvergreen · Oct 19, 2024 · 55aef99 · 55aef99
1 parent 439d026
commit 55aef99
Showing 1 changed file with 50 additions and 35 deletions.
diff --git a/patches/wc-compiler+0.14.0.patch b/patches/wc-compiler+0.14.0.patch
@@ -1,63 +1,71 @@
 diff --git a/node_modules/wc-compiler/src/wcc.js b/node_modules/wc-compiler/src/wcc.js
-index 35884d4..e37a4a4 100644
+index 35884d4..0b75773 100644
 --- a/node_modules/wc-compiler/src/wcc.js
 +++ b/node_modules/wc-compiler/src/wcc.js
-@@ -32,16 +32,27 @@ async function renderComponentRoots(tree, definitions) {
-       const { tagName } = node;
+@@ -33,17 +33,26 @@ async function renderComponentRoots(tree, definitions) {
 
        if (definitions[tagName]) {
-+        console.log('renderComponentRoots', { tagName });
          const { moduleURL } = definitions[tagName];
 -        const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs, definitions);
 -        const elementHtml = elementInstance.shadowRoot
-+        console.log({ node });
-+        const elementInstance = await initializeCustomElement(moduleURL, tagName, node, definitions);
-+        const hasShadow = elementInstance.shadowRoot;
-+        const elementHtml = hasShadow
-           ? elementInstance.getInnerHTML({ includeShadowRoots: true })
-           : elementInstance.innerHTML;
-         const elementTree = parseFragment(elementHtml);
-+        const hasLight = elementTree.childNodes > 0;
-
+-          ? elementInstance.getInnerHTML({ includeShadowRoots: true })
+-          : elementInstance.innerHTML;
+-        const elementTree = parseFragment(elementHtml);
+-
 -        node.childNodes = node.childNodes.length === 0
-+        console.log('elementHtml', { elementHtml });
-+        console.log('elementTree', { elementTree });
-+        console.log('elementTree.childNodes', elementTree.childNodes);
-+        console.log('node.childNodes', node.childNodes);
-+
-+        node.childNodes = node.childNodes.length === 0 && hasLight > 0 && !hasShadow
-           ? elementTree.childNodes
+-          ? elementTree.childNodes
 -          : [...elementTree.childNodes, ...node.childNodes];
-+          : hasShadow
-+            ? [...elementTree.childNodes, ...node.childNodes]
-+            : elementTree.childNodes;
++        const elementInstance = await initializeCustomElement(moduleURL, tagName, node, definitions);
++
++        if (elementInstance) {
++          const hasShadow = elementInstance.shadowRoot;
++          const elementHtml = hasShadow
++            ? elementInstance.getInnerHTML({ includeShadowRoots: true })
++            : elementInstance.innerHTML;
++          const elementTree = parseFragment(elementHtml);
++          const hasLight = elementTree.childNodes > 0;
++
++          node.childNodes = node.childNodes.length === 0 && hasLight && !hasShadow
++            ? elementTree.childNodes
++            : hasShadow
++              ? [...elementTree.childNodes, ...node.childNodes]
++              : elementTree.childNodes;
++        } else {
++          console.warn(`WARNING: customElement <${tagName}> detected but not serialized.  You may not have exported it.`);
++        }
        } else {
-         console.warn(`WARNING: customElement <${tagName}> is not defined.  You may not have imported it yet.`);
+-        console.warn(`WARNING: customElement <${tagName}> is not defined.  You may not have imported it yet.`);
++        console.warn(`WARNING: customElement <${tagName}> is not defined.  You may not have imported it.`);
        }
-@@ -138,7 +149,10 @@ async function getTagName(moduleURL) {
+     }
+
+@@ -82,7 +91,7 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
+       const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
+       const extension = specifier.split('.').pop();
+
+-      // TODO would like to decouple .jsx from the core, ideally
++      // would like to decouple .jsx from the core, ideally
+       // https://github.com/ProjectEvergreen/wcc/issues/122
+       if (!isBareSpecifier && ['js', 'jsx', 'ts'].includes(extension)) {
+         const dependencyModuleURL = new URL(node.source.value, moduleURL);
+@@ -138,7 +147,9 @@ async function getTagName(moduleURL) {
    return tagName;
  }
 
 -async function initializeCustomElement(elementURL, tagName, attrs = [], definitions = [], isEntry, props = {}) {
 +async function initializeCustomElement(elementURL, tagName, node = {}, definitions = [], isEntry, props = {}) {
 +  const { attrs = [], childNodes = [] } = node;
-+  console.log('initializeCustomElement', { node });
 +
    if (!tagName) {
      const depth = isEntry ? 1 : 0;
      registerDependencies(elementURL, definitions, depth);
-@@ -157,6 +171,41 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
+@@ -157,6 +168,34 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
 
    if (element) {
      const elementInstance = new element(data); // eslint-disable-line new-cap
 +    let innerHTML = elementInstance.innerHTML || '';
 +
-+    // TODO
-+    // 1. Needs to be recursive
-+    // 2. ~~Needs to handle attributes~~
-+    // 3. Needs to handle duplicate content
-+    // 4. Needs to handle self closing tags
-+    // 5. handle all node types
++    // support for HTML (Light DOM) Web Components
 +    childNodes.forEach((child) => {
 +      const { nodeName, attrs = [] } = child;
 +
@@ -82,9 +90,16 @@ index 35884d4..e37a4a4 100644
 +      }
 +    });
 +
-+    console.log({ innerHTML });
 +    elementInstance.innerHTML = innerHTML;
-+    console.log('=================');
 
      attrs.forEach((attr) => {
        elementInstance.setAttribute(attr.name, attr.value);
+@@ -207,7 +246,7 @@ async function renderFromHTML(html, elements = []) {
+   const definitions = [];
+
+   for (const url of elements) {
+-    await initializeCustomElement(url, undefined, undefined, definitions, true);
++    registerDependencies(url, definitions, 1);
+   }
+
+   const elementTree = getParse(html)(html);