HTML Web Components

package.json

@@ -23,7 +23,8 @@
     "story:build": "storybook build",
     "story:serve": "npm run clean && npm run story:build && http-server ./storybook-static",
     "test": "wtr",
-    "test:tdd": "npm run test -- --watch"
+    "test:tdd": "npm run test -- --watch",
+    "postinstall": "patch-package"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.1",
@@ -39,6 +40,7 @@
     "@web/test-runner-junit-reporter": "^0.7.1",
     "http-server": "^14.1.1",
     "lit": "^3.1.2",
+    "patch-package": "^8.0.0",
     "rimraf": "^5.0.5",
     "storybook": "^8.0.6",
     "vite": "^5.2.8"

patches/wc-compiler+0.9.0.patch

@@ -0,0 +1,87 @@
+diff --git a/node_modules/wc-compiler/src/wcc.js b/node_modules/wc-compiler/src/wcc.js
+index f9b3998..005e62e 100644
+--- a/node_modules/wc-compiler/src/wcc.js
++++ b/node_modules/wc-compiler/src/wcc.js
+@@ -29,16 +29,24 @@ async function renderComponentRoots(tree, definitions) {
+       const { tagName } = node;
+
+       if (definitions[tagName]) {
++        console.log('renderComponentRoots', { tagName });
+         const { moduleURL } = definitions[tagName];
+-        const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs, definitions);
++        console.log({ node });
++        const elementInstance = await initializeCustomElement(moduleURL, tagName, node, definitions);
+         const elementHtml = elementInstance.shadowRoot
+           ? elementInstance.getInnerHTML({ includeShadowRoots: true })
+           : elementInstance.innerHTML;
++        const hasShadow = elementInstance.shadowRoot;
+         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 && elementTree.childNodes > 0 && !hasShadow
+           ? elementTree.childNodes
+-          : [...elementTree.childNodes, ...node.childNodes];
++          : hasShadow
++            ? [...elementTree.childNodes, ...node.childNodes]
++            : elementTree.childNodes;
+       } else {
+         console.warn(`WARNING: customElement <${tagName}> is not defined.  You may not have imported it yet.`);
+       }
+@@ -126,7 +134,10 @@ 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);
+@@ -146,6 +157,41 @@ 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
++    childNodes.forEach((child) => {
++      const { nodeName, attrs = [] } = child;
++
++      if (nodeName !== '#text') {
++        innerHTML += `<${nodeName}`;
++
++        if (attrs.length > 0) {
++          attrs.forEach(attr => {
++            innerHTML += ` ${attr.name}="${attr.value}"`;
++          })
++        }
++
++        innerHTML += '>';
++
++        child.childNodes.forEach((c) => {
++          if (c.nodeName === '#text') {
++            innerHTML += c.value;
++          }
++        })
++
++        innerHTML += `</${nodeName}>`;
++      }
++    })
++
++    console.log({ innerHTML });
++    elementInstance.innerHTML = innerHTML;
++    console.log('=================')
+
+     attrs.forEach((attr) => {
+       elementInstance.setAttribute(attr.name, attr.value);

src/components/card/card.js

@@ -0,0 +1,16 @@
+// "mock" CSS Modules
+const styles = {
+  card: 'card'
+}
+
+export default class Card extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div class="${styles.card}">
+        ${this.innerHTML}
+      </div>
+    `
+  }
+}
+
+customElements.define('app-card', Card);

src/components/card/card.stories.js

@@ -0,0 +1,14 @@
+import './card.js';
+
+export default {
+  title: 'Components/Card'
+};
+
+const Template = () => `
+  <app-card>
+    <p>This is some feature</p>
+    <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"/>
+  </app-card>
+`;
+
+export const Primary = Template.bind({});

src/pages/index.html

@@ -3,12 +3,17 @@
 
   <head>
     <title>Greenwood</title>
+    <script type="module" src="../components/card/card.js" data-gwd-opt="static"></script>
     <script type="module" src="../components/footer/footer.js" data-gwd-opt="static"></script>
     <link rel="stylesheet" href="../styles/theme.css"></link>
   </head>
 
   <body>
     <h1>Welcome to Greenwood!</h1>
+    <app-card>
+      <p>This is some feature</p>
+      <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png" height="200px" width="200px"/>
+    </app-card>
     <app-footer></app-footer>
   </body>
 

src/styles/theme.css

@@ -5,4 +5,10 @@ body {
 h1, h2, h3, h4, h5, h6 {
   text-align: center;
   color: black;
+}
+
+.card {
+  display: block;
+  text-align: center;
+  color: red;
 }