JSX plus declarative shadow root example

sandbox.js

@@ -2,7 +2,8 @@ import fs from 'node:fs/promises';
 import { renderFromHTML } from './src/wcc.js';
 
 const clientSideComponents = [
-  'card.js'
+  'card.js',
+  'card.jsx'
 ];
 
 async function init() {
@@ -12,17 +13,37 @@ async function init() {
   const components = await fs.readdir(new URL('./components/', sandboxRoot));
   const componentsUrls = components.map(component => new URL(`./components/${component}`, sandboxRoot));
   const interactiveComponents = components.filter(component => clientSideComponents.includes(component));
-  const { html } = await renderFromHTML(sandboxHtml, componentsUrls);
+  const { html, metadata } = await renderFromHTML(sandboxHtml, componentsUrls);
   const scriptTags = interactiveComponents.map(component => {
-    return `<script type="module" src="./components/${component}"></script>`;
+    const ext = component.split('.').pop();
+    const outputName = ext === 'js'
+      ? component
+      : component.replace('.jsx', '-jsx.js');
+
+    return `<script type="module" src="./components/${outputName}"></script>`;
   }).join('\n');
 
   for (const component of interactiveComponents) {
+    const ext = component.split('.').pop();
+    const outputName = ext === 'js'
+      ? component
+      : component.replace('.jsx', '-jsx.js');
     const source = new URL(`./components/${component}`, sandboxRoot);
-    const destination = new URL(`./components/${component}`, distRoot);
+    const destination = new URL(`./components/${outputName}`, distRoot);
 
     await fs.mkdir(new URL('./components/', distRoot), { recursive: true });
-    await fs.copyFile(source, destination);
+
+    if (ext === 'js') {
+      await fs.copyFile(source, destination);
+    } else {
+      const key = `sb-${component.replace('.', '-')}`;
+
+      for (const element in metadata) {
+        if (element === key) {
+          await fs.writeFile(destination, metadata[element].source);
+        }
+      }
+    }
   }
 
   await fs.mkdir(distRoot, { recursive: true });

sandbox/components/card.jsx

@@ -0,0 +1,54 @@
+// JSX does not support inline style tags
+// https://stackoverflow.com/questions/27530462/tag-error-react-jsx-style-tag-error-on-render
+const styles = `
+  :host .card {
+    width: 30%;
+    margin: 0 auto;
+  }
+
+  :host h3 {
+    text-align: center;
+  }
+
+  :host button {
+    margin: 0 auto;
+    display: block;
+  }
+`;
+
+export default class CardJsx extends HTMLElement {
+
+  selectItem() {
+    alert(`selected item is => ${this.getAttribute('title')}!`);
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      console.log('NO shadowRoot detected for card.jsx!');
+      this.thumbnail = this.getAttribute('thumbnail');
+      this.title = this.getAttribute('title');
+
+      this.attachShadow({ mode: 'open' });
+      this.render();
+    } else {
+      console.log('SUCCESS, shadowRoot detected for card.jsx!');
+    }
+  }
+
+  render() {
+    const { thumbnail, title } = this;
+
+    return (
+      <div>
+        <style>
+          {styles}
+        </style>
+        <h3>{title}</h3>
+        <img src={thumbnail} alt={title} loading="lazy" width="100%"/>
+        <button onclick={this.selectItem}>View Item Details</button>
+      </div>
+    );
+  }
+}
+
+customElements.define('sb-card-jsx', CardJsx);

sandbox/index.html

@@ -67,20 +67,26 @@ <h2>JSX + Light DOM (no JS)</h2>
     </pre>
 
     <hr/>
-    <!-- Declarative Shadow DOM -->
-    <!-- Card -->
 
-    <!-- JSX + innerHTML -->
-    <!-- header -->
+    <h2>JSX + Declarative Shadow DOM (has JS) 🚫</h2>
+    <details>
+      SSR Shadow DOM (and thus host styles) not working, see - https://github.com/ProjectEvergreen/wcc/issues/128
+    </details>
 
-    <!-- JSX + innerHTML + inferredObservability -->
-    <!-- Card - does this really make senss with shadow dom -->
+    <sb-card-jsx
+      title="iPhone 9"
+      thumbnail="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
+    ></sb-card-jsx>
 
-    <!-- JSX + DSD -->
-    <!-- Counter -->
+    <pre>
+      &lt;sb-card-jsx
+        title="iPhone 9" thumbnail="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
+      &gt;&lt;/sb-card-jsx&gt;
+    </pre>
 
-    <!-- JSX + DSD + inferredObservability -->
-    <!-- Counter -->
+    <!-- TODO -->
+    <!-- JSX + Light DOM + inferredObservability -->
+    <!-- JSX + Declarative Shadow DOM + inferredObservability -->
 
   </body>
 </html>