From 94fc5945d1738426abcd249b10639a39e7ab131a Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Tue, 2 Jan 2024 16:37:12 -0500
Subject: [PATCH 01/11] fix shadow root rendering for JSX

---
 src/jsx-loader.js                             |  7 +-
 .../jsx-shadow-dom/jsx-shadow-dom.spec.js     | 80 +++++++++++++++++++
 test/cases/jsx-shadow-dom/src/heading.jsx     | 20 +++++
 3 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js
 create mode 100644 test/cases/jsx-shadow-dom/src/heading.jsx

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index bef481b..413ea0b 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -265,7 +265,12 @@ export function parseJsx(moduleURL) {
 
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
-                  const finalHtml = serialize(elementTree);
+                  const serializedHtml = serialize(elementTree);
+                  // would be nice to reuse HTMLTemplateElement here...
+                  const finalHtml = hasShadowRoot
+                    ? `<template shadowrootmode="open">${serializedHtml}</template>`
+                    : serializedHtml;
+
                   const transformed = acorn.parse(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
                     ecmaVersion: 'latest',
                     sourceType: 'module'
diff --git a/test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js b/test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js
new file mode 100644
index 0000000..8fd3018
--- /dev/null
+++ b/test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js
@@ -0,0 +1,80 @@
+/*
+ * Use Case
+ * Run wcc against a nested custom elements using JSX render function and Declarative Shadow DOM.
+ *
+ * User Result
+ * Should return the expected HTML and JavaScript output.
+ *
+ * User Workspace
+ * src/
+ *   heading.jsx
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import { renderToString } from '../../../src/wcc.js';
+
+const expect = chai.expect;
+
+describe('Run WCC For ', function() {
+  const LABEL = 'Single Custom Element using JSX and Declarative Shadow DOM';
+  let dom;
+  let meta;
+
+  before(async function() {
+    const { html, metadata } = await renderToString(new URL('./src/heading.jsx', import.meta.url));
+
+    meta = metadata;
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+
+    describe('<wcc-heading> component', function() {
+      let heading;
+
+      before(async function() {
+        heading = dom.window.document.querySelector('wcc-heading template[shadowrootmode="open"]');
+      });
+
+      describe('Metadata', () => {
+        it('should return a JSX definition in metadata', () => {
+          expect(Object.keys(meta).length).to.equal(1);
+          expect(meta['wcc-heading'].source).to.not.be.undefined;
+        });
+      });
+
+      describe('Declarative Shadow DOM (<template> tag)', () => {
+        it('should handle a this expression', () => {
+          expect(heading).to.not.be.undefined;
+        });
+      });
+
+      describe('Event Handling', () => {
+        it('should handle a this expression', () => {
+          const wrapper = new JSDOM(heading.innerHTML);
+          const button = wrapper.window.document.querySelector('button');
+
+          expect(button.getAttribute('onclick')).to.be.equal('this.parentNode.host.sayHello()');
+        });
+      });
+
+      // describe('Expressions', () => {
+      //   // <span>You have clicked {count} times</span>
+      //   it('should handle an expression', () => {
+      //     const element = dom.window.document.querySelectorAll('span#expression')[0];
+
+      //     expect(element.textContent).to.be.equal('0');
+      //   });    
+      // });
+
+      // describe('Inferred Observability', () => {
+      //   it('should not infer observability by default', () => {
+      //     const actual = meta['wcc-counter-jsx'].source.replace(/ /g, '').replace(/\n/g, '');
+
+      //     expect(actual).to.not.contain('staticgetobservedAttributes()');
+      //     expect(actual).to.not.contain('attributeChangedCallback');
+      //   });
+      // });
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/cases/jsx-shadow-dom/src/heading.jsx b/test/cases/jsx-shadow-dom/src/heading.jsx
new file mode 100644
index 0000000..022f1b4
--- /dev/null
+++ b/test/cases/jsx-shadow-dom/src/heading.jsx
@@ -0,0 +1,20 @@
+export default class HeadingComponent extends HTMLElement {
+  sayHello() {
+    alert('hello world!');
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.render();
+    }
+  }
+
+  render() {
+    return (
+      <button onclick={this.sayHello}>Get a greeting!</button>
+    );
+  }
+}
+
+customElements.define('wcc-heading', HeadingComponent);
\ No newline at end of file

From 94edbe69e2e61535a313043b45dc4b77bc657079 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 3 Jan 2024 20:26:34 -0500
Subject: [PATCH 02/11] output JSX DSD as a template element

---
 src/jsx-loader.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 413ea0b..57dc544 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -266,12 +266,19 @@ export function parseJsx(moduleURL) {
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                   const serializedHtml = serialize(elementTree);
-                  // would be nice to reuse HTMLTemplateElement here...
-                  const finalHtml = hasShadowRoot
-                    ? `<template shadowrootmode="open">${serializedHtml}</template>`
-                    : serializedHtml;
-
-                  const transformed = acorn.parse(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                  // could / should we do something else instead of .innerHTML for light DOM?
+                  // https://github.com/ProjectEvergreen/wcc/issues/130
+                  const renderHandler = hasShadowRoot
+                    ? `
+                        if(!${elementRoot}.shadowRoot) {
+                          const template = document.createElement('template');
+
+                          template.innerHTML = \`${serializedHtml}\`;
+                          this.shadowRoot.appendChild(template.content.cloneNode(true));
+                        }
+                      `
+                    : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+                  const transformed = acorn.parse(renderHandler, {
                     ecmaVersion: 'latest',
                     sourceType: 'module'
                   });

From ace3d19f641d8a9358c15def20c467a1581f7af9 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 18:51:27 -0500
Subject: [PATCH 03/11] JSX + DSD sandbox demo working

---
 sandbox/components/card.jsx | 2 +-
 sandbox/index.html          | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/sandbox/components/card.jsx b/sandbox/components/card.jsx
index 006ef9f..28e7fb3 100644
--- a/sandbox/components/card.jsx
+++ b/sandbox/components/card.jsx
@@ -39,7 +39,7 @@ export default class CardJsx extends HTMLElement {
     const { thumbnail, title } = this;
 
     return (
-      <div>
+      <div class="card">
         <style>
           {styles}
         </style>
diff --git a/sandbox/index.html b/sandbox/index.html
index 339dd8b..444c698 100644
--- a/sandbox/index.html
+++ b/sandbox/index.html
@@ -68,12 +68,7 @@ <h2>JSX + Light DOM (no JS)</h2>
 
     <hr/>
 
-    <!-- TODO - https://github.com/ProjectEvergreen/wcc/issues/128 -->
-    <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>
+    <h2>JSX + Declarative Shadow DOM (has JS)</h2>
 
     <sb-card-jsx
       title="iPhone 9"

From 47a867ca7406cb13fae038dce5d2042430b08ae4 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 19:14:31 -0500
Subject: [PATCH 04/11] JSX + DSD + inferredObservability sandbox demo working

---
 sandbox/index.html | 13 ++++---------
 src/jsx-loader.js  |  8 +++++---
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/sandbox/index.html b/sandbox/index.html
index 444c698..e814de9 100644
--- a/sandbox/index.html
+++ b/sandbox/index.html
@@ -71,13 +71,13 @@ <h2>JSX + Light DOM (no JS)</h2>
     <h2>JSX + Declarative Shadow DOM (has JS)</h2>
 
     <sb-card-jsx
-      title="iPhone 9"
-      thumbnail="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
+      title="iPhone X"
+      thumbnail="https://i.dummyjson.com/data/products/2/thumbnail.jpg"
     ></sb-card-jsx>
 
     <pre>
       &lt;sb-card-jsx
-        title="iPhone 9" thumbnail="https://i.dummyjson.com/data/products/1/thumbnail.jpg"
+        title="iPhone X" thumbnail="https://i.dummyjson.com/data/products/2/thumbnail.jpg"
       &gt;&lt;/sb-card-jsx&gt;
     </pre>
 
@@ -97,12 +97,7 @@ <h2>JSX + Light DOM + inferredObservability (has JS)</h2>
 
     <hr/>
 
-    <!-- TODO - https://github.com/ProjectEvergreen/wcc/issues/128 -->
-    <h2>JSX + DSD + inferredObservability (has JS) 🚫</h2>
-
-    <details>
-      SSR Shadow DOM and inferredObservability not working, see - https://github.com/ProjectEvergreen/wcc/issues/128
-    </details>
+    <h2>JSX + DSD + inferredObservability (has JS)</h2>
 
     <sb-counter-dsd-jsx
       count="3"
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 57dc544..b846625 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -270,11 +270,13 @@ export function parseJsx(moduleURL) {
                   // https://github.com/ProjectEvergreen/wcc/issues/130
                   const renderHandler = hasShadowRoot
                     ? `
-                        if(!${elementRoot}.shadowRoot) {
-                          const template = document.createElement('template');
+                        const template = document.createElement('template');
+                        template.innerHTML = \`${serializedHtml}\`;
 
-                          template.innerHTML = \`${serializedHtml}\`;
+                        if(!${elementRoot}) {
                           this.shadowRoot.appendChild(template.content.cloneNode(true));
+                        } else {
+                          this.shadowRoot.innerHTML = template.innerHTML;
                         }
                       `
                     : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;

From 485d83ff63cdef466901f6d790d47453fb25f180 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 19:27:10 -0500
Subject: [PATCH 05/11] add random reset feature to counter sandbox demos

---
 sandbox/index.html | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/sandbox/index.html b/sandbox/index.html
index e814de9..8ca8030 100644
--- a/sandbox/index.html
+++ b/sandbox/index.html
@@ -19,8 +19,33 @@
         margin: 0 auto;
         text-align: center;
       }
+
+      button.reset {
+        display: block;
+        min-width: 5%;
+        margin: 0 auto;
+      }
     </style>
 
+    <script>
+      function randomReset() {
+        return Math.floor(Math.random() * 100);
+      }
+
+      globalThis.document.addEventListener('DOMContentLoaded', () => {
+        const counterJsxResetButton = document.getElementById('counter-jsx-reset');
+        const counterJsxDsdResetButton = document.getElementById('counter-jsx-dsd-reset');
+
+        counterJsxResetButton.addEventListener('click', () => {
+          document.querySelector('sb-counter-jsx').setAttribute('count', randomReset());
+        });
+
+        counterJsxDsdResetButton.addEventListener('click', () => {
+          document.querySelector('sb-counter-dsd-jsx').setAttribute('count', randomReset());
+        });
+      });
+    </script>
+
     <script>
       document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
       ':35729/livereload.js?snipver=1"></' + 'script>')
@@ -89,6 +114,8 @@ <h2>JSX + Light DOM + inferredObservability (has JS)</h2>
       count="5"
     ></sb-counter-jsx>
 
+    <button class="reset" id="counter-jsx-reset">Random Reset</button>
+
     <pre>
       &lt;sb-counter-jsx
         count="5"
@@ -103,6 +130,8 @@ <h2>JSX + DSD + inferredObservability (has JS)</h2>
       count="3"
     ></sb-counter-dsd-jsx>
 
+    <button class="reset" id="counter-jsx-dsd-reset">Random Reset</button>
+
     <pre>
       &lt;sb-counter-dsd-jsx
         count="3"

From d8ce81dd704610542a085ac1b60405dca9416ff7 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 20:02:27 -0500
Subject: [PATCH 06/11] rename test to match feature being tested

---
 .../fixtures/attribute-changed-callback.txt                     | 0
 .../fixtures/get-observed-attributes.txt                        | 0
 .../jsx-inferred-obsevability.spec.js}                          | 2 +-
 .../src/counter.jsx                                             | 0
 4 files changed, 1 insertion(+), 1 deletion(-)
 rename test/cases/{jsx-coarse-grained => jsx-inferred-observability}/fixtures/attribute-changed-callback.txt (100%)
 rename test/cases/{jsx-coarse-grained => jsx-inferred-observability}/fixtures/get-observed-attributes.txt (100%)
 rename test/cases/{jsx-coarse-grained/jsx-coarse-grained.spec.js => jsx-inferred-observability/jsx-inferred-obsevability.spec.js} (95%)
 rename test/cases/{jsx-coarse-grained => jsx-inferred-observability}/src/counter.jsx (100%)

diff --git a/test/cases/jsx-coarse-grained/fixtures/attribute-changed-callback.txt b/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
similarity index 100%
rename from test/cases/jsx-coarse-grained/fixtures/attribute-changed-callback.txt
rename to test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
diff --git a/test/cases/jsx-coarse-grained/fixtures/get-observed-attributes.txt b/test/cases/jsx-inferred-observability/fixtures/get-observed-attributes.txt
similarity index 100%
rename from test/cases/jsx-coarse-grained/fixtures/get-observed-attributes.txt
rename to test/cases/jsx-inferred-observability/fixtures/get-observed-attributes.txt
diff --git a/test/cases/jsx-coarse-grained/jsx-coarse-grained.spec.js b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
similarity index 95%
rename from test/cases/jsx-coarse-grained/jsx-coarse-grained.spec.js
rename to test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
index 756b6ee..1c66430 100644
--- a/test/cases/jsx-coarse-grained/jsx-coarse-grained.spec.js
+++ b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
@@ -16,7 +16,7 @@ import { renderToString } from '../../../src/wcc.js';
 const expect = chai.expect;
 
 describe('Run WCC For ', function() {
-  const LABEL = 'Single Custom Element using JSX';
+  const LABEL = 'Single Custom Element using JSX and Inferred Observability';
   let fixtureAttributeChangedCallback;
   let fixtureGetObservedAttributes;
   let meta;
diff --git a/test/cases/jsx-coarse-grained/src/counter.jsx b/test/cases/jsx-inferred-observability/src/counter.jsx
similarity index 100%
rename from test/cases/jsx-coarse-grained/src/counter.jsx
rename to test/cases/jsx-inferred-observability/src/counter.jsx

From 5c49f85f26c290c934bb9a7e0adced34124909e1 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 20:23:35 -0500
Subject: [PATCH 07/11] refine test cases

---
 sandbox/components/card.jsx                   |  2 +-
 sandbox/components/counter-dsd.jsx            |  2 +-
 src/jsx-loader.js                             |  2 +-
 .../jsx-shadow-dom/jsx-shadow-dom.spec.js     | 25 ++++++-------------
 test/cases/jsx-shadow-dom/src/heading.jsx     |  9 ++++++-
 5 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/sandbox/components/card.jsx b/sandbox/components/card.jsx
index 28e7fb3..9e2b2fa 100644
--- a/sandbox/components/card.jsx
+++ b/sandbox/components/card.jsx
@@ -24,7 +24,7 @@ export default class CardJsx extends HTMLElement {
 
   connectedCallback() {
     if (!this.shadowRoot) {
-      console.log('NO shadowRoot detected for card.jsx!');
+      console.warn('NO shadowRoot detected for card.jsx!');
       this.thumbnail = this.getAttribute('thumbnail');
       this.title = this.getAttribute('title');
 
diff --git a/sandbox/components/counter-dsd.jsx b/sandbox/components/counter-dsd.jsx
index 40e5fb5..547d6c5 100644
--- a/sandbox/components/counter-dsd.jsx
+++ b/sandbox/components/counter-dsd.jsx
@@ -9,7 +9,7 @@ export default class CounterDsdJsx extends HTMLElement {
 
   connectedCallback() {
     if (!this.shadowRoot) {
-      console.log('NO shadowRoot detected for counter-dsd.jsx!');
+      console.warn('NO shadowRoot detected for counter-dsd.jsx!');
       this.count = this.getAttribute('count');
 
       // having an attachShadow call is required for DSD
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index b846625..d7b4559 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -262,7 +262,7 @@ export function parseJsx(moduleURL) {
                   const html = parseJsxElement(n.argument, moduleContents);
                   const elementTree = getParse(html)(html);
                   const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
-
+                  console.log({ elementRoot });
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                   const serializedHtml = serialize(elementTree);
diff --git a/test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js b/test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js
index 8fd3018..5bdf3ee 100644
--- a/test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js
+++ b/test/cases/jsx-shadow-dom/jsx-shadow-dom.spec.js
@@ -54,27 +54,18 @@ describe('Run WCC For ', function() {
           const wrapper = new JSDOM(heading.innerHTML);
           const button = wrapper.window.document.querySelector('button');
 
-          expect(button.getAttribute('onclick')).to.be.equal('this.parentNode.host.sayHello()');
+          expect(button.getAttribute('onclick')).to.be.equal('this.parentElement.parentNode.host.sayHello()');
         });
       });
 
-      // describe('Expressions', () => {
-      //   // <span>You have clicked {count} times</span>
-      //   it('should handle an expression', () => {
-      //     const element = dom.window.document.querySelectorAll('span#expression')[0];
-
-      //     expect(element.textContent).to.be.equal('0');
-      //   });    
-      // });
-
-      // describe('Inferred Observability', () => {
-      //   it('should not infer observability by default', () => {
-      //     const actual = meta['wcc-counter-jsx'].source.replace(/ /g, '').replace(/\n/g, '');
+      describe('Attribute Contents', () => {
+        it('should handle a this expression', () => {
+          const wrapper = new JSDOM(heading.innerHTML);
+          const header = wrapper.window.document.querySelector('h1');
 
-      //     expect(actual).to.not.contain('staticgetobservedAttributes()');
-      //     expect(actual).to.not.contain('attributeChangedCallback');
-      //   });
-      // });
+          expect(header.textContent).to.be.equal('Hello, World!');
+        });
+      });
     });
   });
 });
\ No newline at end of file
diff --git a/test/cases/jsx-shadow-dom/src/heading.jsx b/test/cases/jsx-shadow-dom/src/heading.jsx
index 022f1b4..3a8f213 100644
--- a/test/cases/jsx-shadow-dom/src/heading.jsx
+++ b/test/cases/jsx-shadow-dom/src/heading.jsx
@@ -5,14 +5,21 @@ export default class HeadingComponent extends HTMLElement {
 
   connectedCallback() {
     if (!this.shadowRoot) {
+      this.greeting = this.getAttribute('greeting') || 'World';
+
       this.attachShadow({ mode: 'open' });
       this.render();
     }
   }
 
   render() {
+    const { greeting } = this;
+
     return (
-      <button onclick={this.sayHello}>Get a greeting!</button>
+      <div>
+        <h1>Hello, {greeting}!</h1>
+        <button onclick={this.sayHello}>Get a greeting!</button>
+      </div>
     );
   }
 }

From 6f85a8f385538688bc42feba169d56c737a9ecdd Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 20:39:55 -0500
Subject: [PATCH 08/11] constructor not a prerequiste for using
 inferredObservability anymore

---
 sandbox/components/counter-dsd.jsx |  8 +-------
 sandbox/components/counter.jsx     |  1 -
 src/jsx-loader.js                  | 12 ++----------
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/sandbox/components/counter-dsd.jsx b/sandbox/components/counter-dsd.jsx
index 547d6c5..26c7a53 100644
--- a/sandbox/components/counter-dsd.jsx
+++ b/sandbox/components/counter-dsd.jsx
@@ -1,16 +1,10 @@
 export const inferredObservability = true;
 
 export default class CounterDsdJsx extends HTMLElement {
-  // having a constructor is required for inferredObservability
-  constructor() {
-    super();
-    this.count = 0;
-  }
-
   connectedCallback() {
     if (!this.shadowRoot) {
       console.warn('NO shadowRoot detected for counter-dsd.jsx!');
-      this.count = this.getAttribute('count');
+      this.count = this.getAttribute('count') || 0;
 
       // having an attachShadow call is required for DSD
       this.attachShadow({ mode: 'open' });
diff --git a/sandbox/components/counter.jsx b/sandbox/components/counter.jsx
index 41e5f87..f07f9b5 100644
--- a/sandbox/components/counter.jsx
+++ b/sandbox/components/counter.jsx
@@ -1,7 +1,6 @@
 export const inferredObservability = true;
 
 export default class CounterJsx extends HTMLElement {
-  // having a constructor is required for inferredObservability
   constructor() {
     super();
     this.count = 0;
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index d7b4559..cdf80ab 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -262,7 +262,7 @@ export function parseJsx(moduleURL) {
                   const html = parseJsxElement(n.argument, moduleContents);
                   const elementTree = getParse(html)(html);
                   const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
-                  console.log({ elementRoot });
+
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                   const serializedHtml = serialize(elementTree);
@@ -314,15 +314,7 @@ export function parseJsx(moduleURL) {
     for (const line of tree.body) {
       // test for class MyComponent vs export default class MyComponent
       if (line.type === 'ClassDeclaration' || (line.declaration && line.declaration.type) === 'ClassDeclaration') {
-        const children = !line.declaration
-          ? line.body.body
-          : line.declaration.body.body;
-        for (const method of children) {
-          if (method.key.name === 'constructor') {
-            insertPoint = method.start - 1;
-            break;
-          }
-        }
+        insertPoint = line.declaration.body.start + 1;
       }
     }
 

From cb9aecc5658612c17ca6667423c74f313f8d46de Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 20:56:40 -0500
Subject: [PATCH 09/11] runtime render refactoring

---
 sandbox/components/counter.jsx | 1 +
 src/jsx-loader.js              | 1 +
 2 files changed, 2 insertions(+)

diff --git a/sandbox/components/counter.jsx b/sandbox/components/counter.jsx
index f07f9b5..e54fe24 100644
--- a/sandbox/components/counter.jsx
+++ b/sandbox/components/counter.jsx
@@ -7,6 +7,7 @@ export default class CounterJsx extends HTMLElement {
   }
 
   connectedCallback() {
+    this.count = parseInt(this.getAttribute('count'), 10) || this.count;
     this.render();
   }
 
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index cdf80ab..abc188b 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -274,6 +274,7 @@ export function parseJsx(moduleURL) {
                         template.innerHTML = \`${serializedHtml}\`;
 
                         if(!${elementRoot}) {
+                          this.attachShadow({ mode: 'open' });
                           this.shadowRoot.appendChild(template.content.cloneNode(true));
                         } else {
                           this.shadowRoot.innerHTML = template.innerHTML;

From 1ee4940846822e5e2bb2af5a0bae592e0a9d6471 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 5 Jan 2024 21:32:27 -0500
Subject: [PATCH 10/11] document DSD interop

---
 docs/pages/docs.md | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/pages/docs.md b/docs/pages/docs.md
index d040f2a..5577cc8 100644
--- a/docs/pages/docs.md
+++ b/docs/pages/docs.md
@@ -246,7 +246,7 @@ export default class Counter extends HTMLElement {
   }
 
   connectedCallback() {
-    this.render();
+    this.render(); // this is required
   }
 
   increment() {
@@ -289,6 +289,32 @@ There are of couple things you will need to do to use WCC with JSX:
 
 > _See our [example's page](/examples#jsx) for some usages of WCC + JSX._  👀
 
+### Declarative Shadow DOM
+
+To opt-in to Declarative Shadow DOM with JSX, you will need to signal to the WCC compiler your intentions so it can accurately mount from a `shadowRoot` on the client side.  To opt-in, simply make a call to `attachShadow` in your `connectedCallback` method.
+
+Using, the Counter example from above, we would amend it like so:
+
+```js
+export default class Counter extends HTMLElement {
+  constructor() {
+    super();
+    this.count = 0;
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' }); // this is required for DSD support
+      this.render();
+    }
+  }
+
+  // ...
+}
+
+customElements.define('wcc-counter', Counter);
+```
+
 ### (Inferred) Attribute Observability
 
 An optional feature supported by JSX based compilation is a feature called `inferredObservability`.  With this enabled, WCC will read any `this` member references in your component's `render` function and map each member instance to
@@ -324,4 +350,4 @@ And so now when the attribute is set on this component, the component will re-re
 Some notes / limitations:
 - Please be aware of the above linked discussion which is tracking known bugs / feature requests to all things WCC + JSX.
 - We consider the capability of this observability to be "coarse grained" at this time since WCC just re-runs the entire `render` function, replacing of the `innerHTML` for the host component.  Thought it is still WIP, we are exploring a more ["fine grained" approach](https://github.com/ProjectEvergreen/wcc/issues/108) that will more efficient than blowing away all the HTML, a la in the style of [**lit-html**](https://lit.dev/docs/templates/overview/) or [**Solid**'s Signals](https://www.solidjs.com/tutorial/introduction_signals).
-- This automatically _reflects properties used in the `render` function to attributes_, so YMMV.
\ No newline at end of file
+- This automatically _reflects properties used in the `render` function to attributes_, so YMMV.

From 91b9282547763a6e5b081d5327ece72b28a5fa6c Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 6 Jan 2024 13:24:59 -0500
Subject: [PATCH 11/11] misc clean and docs

---
 docs/pages/docs.md                        | 2 +-
 sandbox/components/card.js                | 2 +-
 sandbox/components/card.jsx               | 2 +-
 src/jsx-loader.js                         | 7 +++++--
 test/cases/jsx-shadow-dom/src/heading.jsx | 2 +-
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/pages/docs.md b/docs/pages/docs.md
index 5577cc8..d4434b4 100644
--- a/docs/pages/docs.md
+++ b/docs/pages/docs.md
@@ -348,6 +348,6 @@ And so now when the attribute is set on this component, the component will re-re
 ```
 
 Some notes / limitations:
-- Please be aware of the above linked discussion which is tracking known bugs / feature requests to all things WCC + JSX.
+- Please be aware of the above linked discussion which is tracking known bugs / feature requests / open items related to all things WCC + JSX.
 - We consider the capability of this observability to be "coarse grained" at this time since WCC just re-runs the entire `render` function, replacing of the `innerHTML` for the host component.  Thought it is still WIP, we are exploring a more ["fine grained" approach](https://github.com/ProjectEvergreen/wcc/issues/108) that will more efficient than blowing away all the HTML, a la in the style of [**lit-html**](https://lit.dev/docs/templates/overview/) or [**Solid**'s Signals](https://www.solidjs.com/tutorial/introduction_signals).
 - This automatically _reflects properties used in the `render` function to attributes_, so YMMV.
diff --git a/sandbox/components/card.js b/sandbox/components/card.js
index 3d27a9b..d2c05ae 100644
--- a/sandbox/components/card.js
+++ b/sandbox/components/card.js
@@ -1,7 +1,7 @@
 export default class Card extends HTMLElement {
 
   selectItem() {
-    alert(`selected item is => ${this.getAttribute('title')}!`);
+    alert(`selected item is => ${this.title}!`);
   }
 
   connectedCallback() {
diff --git a/sandbox/components/card.jsx b/sandbox/components/card.jsx
index 9e2b2fa..5aed1aa 100644
--- a/sandbox/components/card.jsx
+++ b/sandbox/components/card.jsx
@@ -19,7 +19,7 @@ const styles = `
 export default class CardJsx extends HTMLElement {
 
   selectItem() {
-    alert(`selected item is => ${this.getAttribute('title')}!`);
+    alert(`selected item is => ${this.title}!`);
   }
 
   connectedCallback() {
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index abc188b..e84aad4 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -266,8 +266,11 @@ export function parseJsx(moduleURL) {
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                   const serializedHtml = serialize(elementTree);
-                  // could / should we do something else instead of .innerHTML for light DOM?
-                  // https://github.com/ProjectEvergreen/wcc/issues/130
+                  // we have to Shadow DOM use cases here
+                  // 1. No shadowRoot, so we attachShadow and append the template
+                  // 2. If there is root from the attachShadow signal, so we just need to inject innerHTML, say in an htmx
+                  // could / should we do something else instead of .innerHTML
+                  // https://github.com/ProjectEvergreen/wcc/issues/138
                   const renderHandler = hasShadowRoot
                     ? `
                         const template = document.createElement('template');
diff --git a/test/cases/jsx-shadow-dom/src/heading.jsx b/test/cases/jsx-shadow-dom/src/heading.jsx
index 3a8f213..68f6d1b 100644
--- a/test/cases/jsx-shadow-dom/src/heading.jsx
+++ b/test/cases/jsx-shadow-dom/src/heading.jsx
@@ -1,6 +1,6 @@
 export default class HeadingComponent extends HTMLElement {
   sayHello() {
-    alert('hello world!');
+    alert(`Hello, ${this.greeting}!`);
   }
 
   connectedCallback() {