latest WCC patches

ProjectEvergreen · Oct 19, 2024 · 54c933f · 54c933f
1 parent 29771cd
commit 54c933f
Showing 1 changed file with 42 additions and 36 deletions.
diff --git a/patches/wc-compiler+0.14.0.patch b/patches/wc-compiler+0.14.0.patch
@@ -24,65 +24,73 @@ index be289a3..db07eb9 100644
  }
 
 diff --git a/node_modules/wc-compiler/src/wcc.js b/node_modules/wc-compiler/src/wcc.js
-index 35884d4..13e5aaa 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;
 +
@@ -107,13 +115,11 @@ index 35884d4..13e5aaa 100644
 +      }
 +    });
 +
-+    // console.log({ innerHTML });
 +    elementInstance.innerHTML = innerHTML;
-+    // console.log('=================');
 
      attrs.forEach((attr) => {
        elementInstance.setAttribute(attr.name, attr.value);
-@@ -207,7 +256,7 @@ async function renderFromHTML(html, elements = []) {
+@@ -207,7 +246,7 @@ async function renderFromHTML(html, elements = []) {
    const definitions = [];
 
    for (const url of elements) {