From 0f3bdd424f32fef939fba86230aa83bc290433c8 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 31 Jan 2026 19:59:22 -0500
Subject: [PATCH 01/28] feat: refactor getValue to static parseAttribute for
 JSX compilation

---
 src/jsx-loader.js                             | 36 ++++++---
 .../fixtures/attribute-changed-callback.txt   | 76 ++++++++++---------
 .../fixtures/attribute-changed-callback.txt   | 12 ++-
 3 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 55b17e20..012e90bd 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -282,13 +282,16 @@ export function parseJsx(moduleURL) {
   const hasOwnObservedAttributes = undefined;
   let inferredObservability = false;
   let observedAttributes = [];
+  let componentName;
   let tree = acorn.Parser.extend(jsx()).parse(result.code, {
     ecmaVersion: 'latest',
     sourceType: 'module',
   });
   string = '';
 
-  // TODO: would be nice to do this one pass, but first we need to know if `inferredObservability` is set first
+  // TODO: would be nice to do everything in one pass, but first we need to know
+  // - if `inferredObservability` is set
+  // - get the name of the component for `static` references
   walk.simple(
     tree,
     {
@@ -308,6 +311,18 @@ export function parseJsx(moduleURL) {
           }
         }
       },
+      ExportDefaultDeclaration(node) {
+        const { declaration } = node;
+
+        if (
+          declaration &&
+          declaration.type === 'ClassDeclaration' &&
+          declaration.id &&
+          declaration.id.name
+        ) {
+          componentName = declaration.id.name;
+        }
+      },
     },
     {
       // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
@@ -435,24 +450,21 @@ export function parseJsx(moduleURL) {
       static get observedAttributes() {
         return [${[...trackingAttrs].map((attr) => `'${attr}'`).join()}]
       }
-
+      static parseAttribute = (value) => value.charAt(0) === '{' || value.charAt(0) === '['
+        ? JSON.parse(value)
+        : !isNaN(value)
+          ? parseInt(value, 10)
+          : value === 'true' || value === 'false'
+            ? value === 'true' ? true : false
+            : value;
       attributeChangedCallback(name, oldValue, newValue) {
-        function getValue(value) {
-          return value.charAt(0) === '{' || value.charAt(0) === '['
-            ? JSON.parse(value)
-            : !isNaN(value)
-              ? parseInt(value, 10)
-              : value === 'true' || value === 'false'
-                ? value === 'true' ? true : false
-                : value;
-        }
         if (newValue !== oldValue) {
           switch(name) {
             ${trackingAttrs
               .map((attr) => {
                 return `
                   case '${attr}':
-                    this.${attr} = getValue(newValue);
+                    this.${attr} = ${componentName}.parseAttribute(newValue);
                     break;
                 `;
               })
diff --git a/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt b/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
index ccc626bd..9edcceb0 100644
--- a/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
@@ -1,40 +1,44 @@
+static parseAttribute = value => value.charAt(0) === '{' || value.charAt(0) === '['
+  ? JSON.parse(value)
+  : !isNaN(value)
+    ? parseInt(value, 10)
+    : value === 'true' || value === 'false'
+      ? value === 'true' ? true : false
+      : value;
 attributeChangedCallback(name, oldValue, newValue) {
-        function getValue(value) {
-            return value.charAt(0) === '{' || value.charAt(0) === '[' ? JSON.parse(value) : !isNaN(value) ? parseInt(value, 10) : value === 'true' || value === 'false' ? value === 'true' ? true : false : value;
-        }
-        if (newValue !== oldValue) {
-            switch (name) {
-            case 'count':
-                this.count = getValue(newValue);
-                break;
-            case 'highlight':
-                this.highlight = getValue(newValue);
-                break;
-            }
-            this.update(name, oldValue, newValue);
-        }
+  if (newValue !== oldValue) {
+    switch (name) {
+    case 'count':
+        this.count = Counter.parseAttribute(newValue);
+        break;
+    case 'highlight':
+        this.highlight = Counter.parseAttribute(newValue);
+        break;
     }
-    update(name, oldValue, newValue) {
-        const attr = `data-wcc-${ name }`;
-        const selector = `[${ attr }]`;
+    this.update(name, oldValue, newValue);
+  }
+}
+update(name, oldValue, newValue) {
+  const attr = `data-wcc-${ name }`;
+  const selector = `[${ attr }]`;
 
-        (this?.shadowRoot || this).querySelectorAll(selector).forEach(el => {
-            const needle = oldValue === '' ? '' : oldValue ?? el.getAttribute(attr);
+  (this?.shadowRoot || this).querySelectorAll(selector).forEach(el => {
+    const needle = oldValue === '' ? '' : oldValue ?? el.getAttribute(attr);
 
-            switch (el.getAttribute('data-wcc-ins')) {
-            case 'text':
-                el.textContent = el.textContent.replace(needle, newValue);
-                break;
-            case 'attr':
-                if (el.hasAttribute(el.getAttribute(attr))) {
-                    el.setAttribute(el.getAttribute(attr), newValue);
-                }
-                break;
-            }
-        });
-        if ([
-                'count',
-                'highlight'
-            ].includes(name)) {
-        }
-    }
\ No newline at end of file
+    switch (el.getAttribute('data-wcc-ins')) {
+    case 'text':
+      el.textContent = el.textContent.replace(needle, newValue);
+      break;
+    case 'attr':
+      if (el.hasAttribute(el.getAttribute(attr))) {
+          el.setAttribute(el.getAttribute(attr), newValue);
+      }
+      break;
+    }
+  });
+  if ([
+    'count',
+    'highlight'
+  ].includes(name)) {
+  }
+}
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt b/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
index bc925d60..625a979b 100644
--- a/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
@@ -1,11 +1,15 @@
+static parseAttribute = value => value.charAt(0) === '{' || value.charAt(0) === '['
+  ? JSON.parse(value)
+  : !isNaN(value)
+    ? parseInt(value, 10)
+    : value === 'true' || value === 'false'
+      ? value === 'true' ? true : false
+      : value;
 attributeChangedCallback(name, oldValue, newValue) {
-  function getValue(value) {
-      return value.charAt(0) === '{' || value.charAt(0) === '[' ? JSON.parse(value) : !isNaN(value) ? parseInt(value, 10) : value === 'true' || value === 'false' ? value === 'true' ? true : false : value;
-  }
   if (newValue !== oldValue) {
       switch (name) {
       case 'count':
-          this.count = getValue(newValue);
+          this.count = Counter.parseAttribute(newValue);
           break;
       }
       this.update(name,oldValue,newValue);

From df648e47fb6d668ddd985217cfe1d10db985c02e Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 31 Jan 2026 21:33:03 -0500
Subject: [PATCH 02/28] feat: #232 refactor attributeChangedCallback and remove
 this.update

---
 docs/components/sandbox/signal-counter.jsx    |  45 +
 docs/pages/sandbox.html                       |  61 +-
 package-lock.json                             | 778 +-----------------
 package.json                                  |   1 +
 src/jsx-loader.js                             |  54 +-
 .../fixtures/attribute-changed-callback.txt   |  36 +-
 .../fixtures/attribute-changed-callback.txt   |   9 +-
 7 files changed, 110 insertions(+), 874 deletions(-)
 create mode 100644 docs/components/sandbox/signal-counter.jsx

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
new file mode 100644
index 00000000..df3f1a42
--- /dev/null
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -0,0 +1,45 @@
+export const inferredObservability = true;
+
+export default class SignalCounter extends HTMLElement {
+  constructor() {
+    super();
+    this.count = new Signal.State(0);
+    this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({
+        mode: 'open',
+      });
+      this.render();
+    }
+  }
+
+  increment() {
+    this.count.set(this.count.get() + 1);
+    console.log('increment', this.count.get());
+  }
+
+  decrement() {
+    this.count.set(this.count.get() - 1);
+    console.log('decrement', this.count.get());
+  }
+
+  render() {
+    const { count, parity } = this;
+
+    return (
+      <div>
+        <button onclick={this.increment}>Increment (+)</button>
+        <button onclick={this.decrement}>Decrement (-)</button>
+        <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button>
+        <span>
+          The count is ${count.get()} (${parity.get()})
+        </span>
+      </div>
+    );
+  }
+}
+
+customElements.define('sb-signal-counter-jsx', SignalCounter);
diff --git a/docs/pages/sandbox.html b/docs/pages/sandbox.html
index 07f7c4e6..6634476d 100644
--- a/docs/pages/sandbox.html
+++ b/docs/pages/sandbox.html
@@ -32,7 +32,8 @@
       }
     </style>
 
-    <script type="module" src="../components/sandbox/card.js"></script>
+
+    <!-- <script type="module" src="../components/sandbox/card.js"></script>
     <script type="module" src="../components/sandbox/card.jsx"></script>
 
     <script type="module" src="../components/sandbox/counter-dsd.jsx"></script>
@@ -42,28 +43,46 @@
 
     <script type="module" src="../components/sandbox/header.js"></script>
     <script type="module" src="../components/sandbox/header.jsx"></script>
-    <script type="module" src="../components/sandbox/picture-frame.js"></script>
+    <script type="module" src="../components/sandbox/picture-frame.js"></script> -->
+    <script type="module" src="../components/sandbox/signal-counter.jsx"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "signal-polyfill": "../node_modules/signal-polyfill/dist/index.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import { Signal } from 'signal-polyfill';
+
+      globalThis.Signal = Signal;
+    </script>
     <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');
-        const counterTsxDsdResetButton = document.getElementById('counter-tsx-dsd-reset');
+        const signalCounterJsxResetButton = document.getElementById('signal-counter-reset');
+        // const counterJsxResetButton = document.getElementById('counter-jsx-reset');
+        // const counterJsxDsdResetButton = document.getElementById('counter-jsx-dsd-reset');
+        // const counterTsxDsdResetButton = document.getElementById('counter-tsx-dsd-reset');
 
-        counterJsxResetButton.addEventListener('click', () => {
-          document.querySelector('sb-counter-jsx').setAttribute('count', randomReset());
+        signalCounterJsxResetButton.addEventListener('click', () => {
+          document.querySelector('sb-signal-counter-jsx').setAttribute('count', randomReset());
         });
 
-        counterJsxDsdResetButton.addEventListener('click', () => {
-          document.querySelector('sb-counter-dsd-jsx').setAttribute('count', randomReset());
-        });
+        // counterJsxResetButton.addEventListener('click', () => {
+        //   document.querySelector('sb-counter-jsx').setAttribute('count', randomReset());
+        // });
 
-        counterTsxDsdResetButton.addEventListener('click', () => {
-          document.querySelector('sb-counter-dsd-tsx').setAttribute('count', randomReset());
-        });
+        // counterJsxDsdResetButton.addEventListener('click', () => {
+        //   document.querySelector('sb-counter-dsd-jsx').setAttribute('count', randomReset());
+        // });
+
+        // counterTsxDsdResetButton.addEventListener('click', () => {
+        //   document.querySelector('sb-counter-dsd-tsx').setAttribute('count', randomReset());
+        // });
       });
     </script>
 
@@ -73,7 +92,19 @@
   <body>
     <h1>WCC Sandbox</h1>
 
-    <h2>Light DOM (no JS)</h2>
+    <h2>JSX + inferredObservability</h2>
+
+    <sb-signal-counter-jsx count="3"></sb-signal-counter-jsx>
+
+    <button class="reset" id="signal-counter-reset">Random Reset</button>
+
+    <pre>
+      &lt;sb-signal-counter-jsx
+        count="3"
+      &gt;&lt;/sb-signal-counter-jsx&gt;
+    </pre>
+
+    <!-- <h2>Light DOM (no JS)</h2>
 
     <sb-header></sb-header>
 
@@ -211,6 +242,6 @@ <h2>TSX + DSD + inferredObservability</h2>
       &lt;sb-counter-dsd-tsx
         count="3"
       &gt;&lt;/sb-counter-dsd-tsx&gt;
-    </pre>
+    </pre> -->
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 17d0a40f..d193f4ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "acorn-walk": "^8.3.4",
         "astring": "^1.9.0",
         "parse5": "^7.2.1",
+        "signal-polyfill": "^0.2.2",
         "sucrase": "^3.35.0"
       },
       "devDependencies": {
@@ -319,443 +320,18 @@
         "url": "https://github.com/sponsors/JounQin"
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
-      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
-      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
-      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
-      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
-      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
-      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
-      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
-      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
-      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
-      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
-      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
-      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
-      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
-      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
-      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
-      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
-      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
-      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
-      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
-      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
-      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
-      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
-      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
-      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
-      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
+    "node_modules/@esbuild/darwin-arm64": {
       "version": "0.27.3",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
-      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
       "cpu": [
-        "x64"
+        "arm64"
       ],
       "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
-        "win32"
+        "darwin"
       ],
       "engines": {
         "node": ">=18"
@@ -1362,34 +938,6 @@
         }
       }
     },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
-      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
-      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
     "node_modules/@rollup/rollup-darwin-arm64": {
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
@@ -1404,314 +952,6 @@
         "darwin"
       ]
     },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
-      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
-      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
-      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
-      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
-      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
-      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
-      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
-      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
-      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
-      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
-      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
-      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
-      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
-      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
-      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
-      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
-      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
-      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
-      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.57.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
-      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -12330,6 +11570,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/signal-polyfill": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/signal-polyfill/-/signal-polyfill-0.2.2.tgz",
+      "integrity": "sha512-p63Y4Er5/eMQ9RHg0M0Y64NlsQKpiu6MDdhBXpyywRuWiPywhJTpKJ1iB5K2hJEbFZ0BnDS7ZkJ+0AfTuL37Rg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/sirv": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
diff --git a/package.json b/package.json
index bbbfa3b3..0f1228d6 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "acorn-walk": "^8.3.4",
     "astring": "^1.9.0",
     "parse5": "^7.2.1",
+    "signal-polyfill": "^0.2.2",
     "sucrase": "^3.35.0"
   },
   "devDependencies": {
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 012e90bd..938787e6 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -10,6 +10,9 @@ import fs from 'fs';
 import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
 import { transform } from 'sucrase';
+import { Signal } from 'signal-polyfill';
+
+globalThis.Signal = globalThis.Signal ?? Signal;
 
 const jsxRegex = /\.(jsx)$/;
 const tsxRegex = /\.(tsx)$/;
@@ -432,17 +435,6 @@ export function parseJsx(moduleURL) {
       `;
       })
       .join('\n');
-    const derivedSetters = derivedAttrs
-      .map((attr) => {
-        const name = attr.id.name;
-
-        return `
-        const old_${name} = this.get_${name}(oldValue);
-        const new_${name} = this.get_${name}(newValue);
-        this.update('${name}', old_${name}, new_${name});
-      `;
-      })
-      .join('\n');
 
     // TODO: better way to determine value type, e,g. array, int, object, etc?
     // TODO: better way to test for shadowRoot presence when running querySelectorAll
@@ -458,45 +450,7 @@ export function parseJsx(moduleURL) {
             ? value === 'true' ? true : false
             : value;
       attributeChangedCallback(name, oldValue, newValue) {
-        if (newValue !== oldValue) {
-          switch(name) {
-            ${trackingAttrs
-              .map((attr) => {
-                return `
-                  case '${attr}':
-                    this.${attr} = ${componentName}.parseAttribute(newValue);
-                    break;
-                `;
-              })
-              .join('\n')}
-          }
-          this.update(name, oldValue, newValue);
-        }
-      }
-
-      update(name, oldValue, newValue) {
-        const attr = \`data-wcc-\${name}\`;
-        const selector = \`[\${attr}]\`;
-
-        (this?.shadowRoot || this).querySelectorAll(selector).forEach((el) => {
-          // handle empty strings as a value for the purposes of attribute change detection
-          const needle = oldValue === '' ? '' : oldValue ?? el.getAttribute(attr);
-
-          switch(el.getAttribute('data-wcc-ins')) {
-            case 'text':
-              el.textContent = el.textContent.replace(needle, newValue);
-              break;
-            case 'attr':
-              if (el.hasAttribute(el.getAttribute(attr))) {
-                el.setAttribute(el.getAttribute(attr), newValue);
-              }
-              break;
-          }
-        })
-
-        if ([${[...trackingAttrs].map((attr) => `'${attr}'`).join()}].includes(name)) {
-          ${derivedSetters}
-        }
+        this[name].set(${componentName}.parseAttribute(newValue));
       }
 
       ${derivedGetters}
diff --git a/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt b/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
index 9edcceb0..d4ac4441 100644
--- a/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
@@ -6,39 +6,5 @@ static parseAttribute = value => value.charAt(0) === '{' || value.charAt(0) ===
       ? value === 'true' ? true : false
       : value;
 attributeChangedCallback(name, oldValue, newValue) {
-  if (newValue !== oldValue) {
-    switch (name) {
-    case 'count':
-        this.count = Counter.parseAttribute(newValue);
-        break;
-    case 'highlight':
-        this.highlight = Counter.parseAttribute(newValue);
-        break;
-    }
-    this.update(name, oldValue, newValue);
-  }
-}
-update(name, oldValue, newValue) {
-  const attr = `data-wcc-${ name }`;
-  const selector = `[${ attr }]`;
-
-  (this?.shadowRoot || this).querySelectorAll(selector).forEach(el => {
-    const needle = oldValue === '' ? '' : oldValue ?? el.getAttribute(attr);
-
-    switch (el.getAttribute('data-wcc-ins')) {
-    case 'text':
-      el.textContent = el.textContent.replace(needle, newValue);
-      break;
-    case 'attr':
-      if (el.hasAttribute(el.getAttribute(attr))) {
-          el.setAttribute(el.getAttribute(attr), newValue);
-      }
-      break;
-    }
-  });
-  if ([
-    'count',
-    'highlight'
-  ].includes(name)) {
-  }
+  this[name].set(Counter.parseAttribute(newValue));
 }
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt b/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
index 625a979b..d4ac4441 100644
--- a/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
@@ -6,12 +6,5 @@ static parseAttribute = value => value.charAt(0) === '{' || value.charAt(0) ===
       ? value === 'true' ? true : false
       : value;
 attributeChangedCallback(name, oldValue, newValue) {
-  if (newValue !== oldValue) {
-      switch (name) {
-      case 'count':
-          this.count = Counter.parseAttribute(newValue);
-          break;
-      }
-      this.update(name,oldValue,newValue);
-  }
+  this[name].set(Counter.parseAttribute(newValue));
 }
\ No newline at end of file

From 3b8f4c50521b6384e7926319d607341b566905f2 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 31 Jan 2026 21:34:28 -0500
Subject: [PATCH 03/28] feat: #232 remove inferredObservability instruction
 markers

---
 src/jsx-loader.js                             | 28 ++++---------------
 .../jsx-inferred-obsevability.spec.js         |  9 ++----
 .../tsx-inferred-obsevability.spec.js         |  4 +--
 3 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 938787e6..284cdf7b 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -80,7 +80,7 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
   return tree;
 }
 
-function parseJsxElement(element, moduleContents = '', inferredObservability = false) {
+function parseJsxElement(element, moduleContents = '') {
   try {
     const { type } = element;
 
@@ -127,14 +127,8 @@ function parseJsxElement(element, moduleContents = '', inferredObservability = f
 
               if (left.object.type === 'ThisExpression') {
                 if (left.property.type === 'Identifier') {
-                  if (inferredObservability) {
-                    // very naive (fine grained?) reactivity
-                    // string += ` ${name}="__this__.${left.property.name}${expression.operator}${right.raw}; __this__.update(\\'${left.property.name}\\', null, __this__.${left.property.name});"`;
-                    string += ` ${name}="__this__.${left.property.name}${expression.operator}${right.raw}; __this__.setAttribute(\\'${left.property.name}\\', __this__.${left.property.name});"`;
-                  } else {
-                    // implicit reactivity using this.render
-                    string += ` ${name}="__this__.${left.property.name}${expression.operator}${right.raw}; __this__.render();"`;
-                  }
+                  // implicit reactivity using this.render
+                  string += ` ${name}="__this__.${left.property.name}${expression.operator}${right.raw}; __this__.render();"`;
                 }
               }
             }
@@ -169,11 +163,6 @@ function parseJsxElement(element, moduleContents = '', inferredObservability = f
                 default:
                   break;
               }
-
-              // only apply this when dealing with `this` references
-              if (inferredObservability) {
-                string += ` data-wcc-${expression.name}="${name}" data-wcc-ins="attr"`;
-              }
             }
           } else {
             // xxx >
@@ -185,9 +174,7 @@ function parseJsxElement(element, moduleContents = '', inferredObservability = f
       string += openingElement.selfClosing ? ' />' : '>';
 
       if (element.children.length > 0) {
-        element.children.forEach((child) =>
-          parseJsxElement(child, moduleContents, inferredObservability),
-        );
+        element.children.forEach((child) => parseJsxElement(child, moduleContents));
       }
 
       string += `</${tagName}>`;
@@ -202,11 +189,6 @@ function parseJsxElement(element, moduleContents = '', inferredObservability = f
 
       if (type === 'Identifier') {
         // You have {count} TODOs left to complete
-        if (inferredObservability) {
-          const { name } = element.expression;
-
-          string = `${string.slice(0, string.lastIndexOf('>'))} data-wcc-${name}="\${this.${name}}" data-wcc-ins="text">`;
-        }
         // TODO be able to remove this extra data attribute
         // string = `${string.slice(0, string.lastIndexOf('>'))} data-wcc-${name} data-wcc-ins="text">`;
         string += `$\{${element.expression.name}}`;
@@ -359,7 +341,7 @@ export function parseJsx(moduleURL) {
                     ];
                     // @ts-ignore
                   } else if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
-                    const html = parseJsxElement(n.argument, moduleContents, inferredObservability);
+                    const html = parseJsxElement(n.argument, moduleContents);
                     const elementTree = getParse(html)(html);
                     const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
 
diff --git a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
index fc230375..abfbdb39 100644
--- a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
+++ b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
@@ -55,23 +55,18 @@ describe('Run WCC For ', function () {
         expect(actual).to.contain(expected);
       });
 
-      // <wcc-badge count="0" data-wcc-count="count" data-wcc-ins="attr"></wcc-badge>
+      // <wcc-badge count="0"></wcc-badge>
       it('should have the expected observability attributes on the <wcc-badge> component', () => {
         const badge = dom.window.document.querySelector('wcc-badge');
         const conditionalClassSpan = badge.querySelector('span[class="unmet"]'); // conditional class rendering
 
-        expect(badge.getAttribute('data-wcc-count')).to.equal('count');
-        expect(badge.getAttribute('data-wcc-ins')).to.equal('attr');
-
         expect(conditionalClassSpan.textContent.trim()).to.equal('0');
       });
 
-      // <span class="red" data-wcc-highlight="class" data-wcc-ins="attr" id="expression" data-wcc-count="0">0</span>
+      // <span class="red" data-wcc-highlight="class" id="expression">0</span>
       it('should have the expected observability attributes on the <wcc-counter-jsx> component', () => {
         const span = dom.window.document.querySelector('wcc-counter-jsx span[class="red"]');
 
-        expect(span.getAttribute('data-wcc-highlight')).to.equal('class');
-        expect(span.getAttribute('data-wcc-ins')).to.equal('attr');
         expect(span.textContent.trim()).to.equal('0');
       });
     });
diff --git a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
index 7f8dda3c..689f1345 100644
--- a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
+++ b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
@@ -55,12 +55,10 @@ describe('Run WCC For ', function () {
         expect(actual).to.contain(expected);
       });
 
-      // <span class="red" id="expression" data-wcc-count="0" data-wcc-ins="text">0</span>
+      // <span class="red" id="expression">0</span>
       it('should have the expected observability attributes on the <wcc-counter-tsx> component', () => {
         const span = dom.window.document.querySelector('wcc-counter-tsx span[class="red"]');
 
-        expect(span.getAttribute('data-wcc-count')).to.equal('0');
-        expect(span.getAttribute('data-wcc-ins')).to.equal('text');
         expect(span.textContent.trim()).to.equal('0');
       });
     });

From 96c0252fb0aa3b3497ab987d2c455abd002740e3 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 Feb 2026 14:39:56 -0500
Subject: [PATCH 04/28] feat: #232 local WCC override patches

---
 docs/pages/sandbox.html                       |   4 +-
 greenwood.config.ts                           |   2 +-
 package-lock.json                             | 294 ++++++++++++++++++
 package.json                                  |   4 +-
 patches/@greenwood+cli+0.34.0-alpha.4.patch   |  10 +
 ...ood+plugin-import-jsx+0.34.0-alpha.4.patch |  13 +
 6 files changed, 322 insertions(+), 5 deletions(-)
 create mode 100644 patches/@greenwood+cli+0.34.0-alpha.4.patch
 create mode 100644 patches/@greenwood+plugin-import-jsx+0.34.0-alpha.4.patch

diff --git a/docs/pages/sandbox.html b/docs/pages/sandbox.html
index 6634476d..d11d448d 100644
--- a/docs/pages/sandbox.html
+++ b/docs/pages/sandbox.html
@@ -32,7 +32,6 @@
       }
     </style>
 
-
     <!-- <script type="module" src="../components/sandbox/card.js"></script>
     <script type="module" src="../components/sandbox/card.jsx"></script>
 
@@ -44,7 +43,6 @@
     <script type="module" src="../components/sandbox/header.js"></script>
     <script type="module" src="../components/sandbox/header.jsx"></script>
     <script type="module" src="../components/sandbox/picture-frame.js"></script> -->
-    <script type="module" src="../components/sandbox/signal-counter.jsx"></script>
     <script type="importmap">
       {
         "imports": {
@@ -86,7 +84,7 @@
       });
     </script>
 
-    <!-- interactive scripts can be configured in sandbox.js -->
+    <script type="module" src="../components/sandbox/signal-counter.jsx"></script>
   </head>
 
   <body>
diff --git a/greenwood.config.ts b/greenwood.config.ts
index 3a37489c..7daebac9 100644
--- a/greenwood.config.ts
+++ b/greenwood.config.ts
@@ -1,8 +1,8 @@
 import type { Config } from '@greenwood/cli';
 import { greenwoodPluginMarkdown } from '@greenwood/plugin-markdown';
-import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
 import { greenwoodPluginCssModules } from '@greenwood/plugin-css-modules';
 import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw';
+import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
 
 const config: Config = {
   activeContent: true,
diff --git a/package-lock.json b/package-lock.json
index d193f4ef..88f85652 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "wc-compiler",
       "version": "0.19.0",
+      "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
         "@projectevergreen/acorn-jsx-esm": "~0.1.0",
@@ -43,6 +44,7 @@
         "lint-staged": "^16.2.6",
         "mocha": "^9.2.2",
         "open-props": "^1.7.4",
+        "patch-package": "^8.0.1",
         "playwright": "^1.58.2",
         "prettier": "^3.6.2",
         "prism-themes": "^1.9.0",
@@ -1778,6 +1780,13 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2556,6 +2565,25 @@
         "@keyv/serialize": "^1.1.1"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -3529,6 +3557,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -4604,6 +4650,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "node_modules/flat": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
@@ -5233,6 +5289,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -6245,6 +6314,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -6462,6 +6547,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-yarn-global": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
@@ -6627,6 +6725,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
+      "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -6634,6 +6752,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -6644,6 +6769,16 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "dev": true,
+      "license": "Public Domain",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -6680,6 +6815,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.11"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -9680,6 +9825,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -9743,6 +9898,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/open-props": {
       "version": "1.7.23",
       "resolved": "https://registry.npmjs.org/open-props/-/open-props-1.7.23.tgz",
@@ -10019,6 +10191,110 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/patch-package": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.1.tgz",
+      "integrity": "sha512-VsKRIA8f5uqHQ7NGhwIna6Bx6D9s/1iXlA1hthBVBEbkq+t4kXD0HHt+rJhf/Z+Ci0F/HCB2hvn0qLdLG+Qxlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^10.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.2.4",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/patch-package/node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/patch-package/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/patch-package/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/patch-package/node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/patch-package/node_modules/tmp": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/patch-package/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -11430,6 +11706,24 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/set-getter": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.1.tgz",
diff --git a/package.json b/package.json
index 0f1228d6..5303e7ef 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,8 @@
     "test:tdd:jsx": "npm run test:jsx -- --watch",
     "test:docs": "vitest run --coverage",
     "test:docs:tdd": "vitest",
-    "prepare": "husky"
+    "prepare": "husky",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@projectevergreen/acorn-jsx-esm": "~0.1.0",
@@ -90,6 +91,7 @@
     "lint-staged": "^16.2.6",
     "mocha": "^9.2.2",
     "open-props": "^1.7.4",
+    "patch-package": "^8.0.1",
     "playwright": "^1.58.2",
     "prettier": "^3.6.2",
     "prism-themes": "^1.9.0",
diff --git a/patches/@greenwood+cli+0.34.0-alpha.4.patch b/patches/@greenwood+cli+0.34.0-alpha.4.patch
new file mode 100644
index 00000000..a68b79f3
--- /dev/null
+++ b/patches/@greenwood+cli+0.34.0-alpha.4.patch
@@ -0,0 +1,10 @@
+diff --git a/node_modules/@greenwood/cli/src/lib/execute-route-module.js b/node_modules/@greenwood/cli/src/lib/execute-route-module.js
+index a7367ac..570f2f7 100644
+--- a/node_modules/@greenwood/cli/src/lib/execute-route-module.js
++++ b/node_modules/@greenwood/cli/src/lib/execute-route-module.js
+@@ -1,4 +1,4 @@
+-import { renderToString, renderFromHTML } from "wc-compiler";
++import { renderToString, renderFromHTML } from "../../../../../src/wcc.js";
+ 
+ async function executeRouteModule({
+   moduleUrl,
diff --git a/patches/@greenwood+plugin-import-jsx+0.34.0-alpha.4.patch b/patches/@greenwood+plugin-import-jsx+0.34.0-alpha.4.patch
new file mode 100644
index 00000000..d2696cc8
--- /dev/null
+++ b/patches/@greenwood+plugin-import-jsx+0.34.0-alpha.4.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/@greenwood/plugin-import-jsx/src/index.js b/node_modules/@greenwood/plugin-import-jsx/src/index.js
+index 5fe6e11..5975de3 100644
+--- a/node_modules/@greenwood/plugin-import-jsx/src/index.js
++++ b/node_modules/@greenwood/plugin-import-jsx/src/index.js
+@@ -4,7 +4,7 @@
+  *
+  */
+ import { generate } from "astring";
+-import { parseJsx } from "wc-compiler/src/jsx-loader.js";
++import { parseJsx } from "../../../../src/jsx-loader.js";
+ 
+ class ImportJsxResource {
+   constructor(compilation, options) {

From 3671ea8b6beb16245a01a8379f132b6a5affe25f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 Feb 2026 14:43:24 -0500
Subject: [PATCH 05/28] feat: #232 local WCC override patches

---
 greenwood.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/greenwood.config.ts b/greenwood.config.ts
index 7daebac9..3a37489c 100644
--- a/greenwood.config.ts
+++ b/greenwood.config.ts
@@ -1,8 +1,8 @@
 import type { Config } from '@greenwood/cli';
 import { greenwoodPluginMarkdown } from '@greenwood/plugin-markdown';
+import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
 import { greenwoodPluginCssModules } from '@greenwood/plugin-css-modules';
 import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw';
-import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
 
 const config: Config = {
   activeContent: true,

From c869ba7d329fd4c69ebef3c4549b0c7323c971da Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 Feb 2026 14:48:08 -0500
Subject: [PATCH 06/28] feat: #232 local WCC override patches

---
 package-lock.json | 457 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 400 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 88f85652..9bc8ed43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -168,14 +168,14 @@
       }
     },
     "node_modules/@cacheable/utils": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.3.3.tgz",
-      "integrity": "sha512-JsXDL70gQ+1Vc2W/KUFfkAJzgb4puKwwKehNLuB+HrNKWf91O736kGfxn4KujXCCSuh6mRRL4XEB0PkAFjWS0A==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.3.4.tgz",
+      "integrity": "sha512-knwKUJEYgIfwShABS1BX6JyJJTglAFcEU7EXqzTdiGCXur4voqkiJkdgZIQtWNFhynzDWERcTYv/sETMu3uJWA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "hashery": "^1.3.0",
-        "keyv": "^5.5.5"
+        "keyv": "^5.6.0"
       }
     },
     "node_modules/@cacheable/utils/node_modules/keyv": {
@@ -940,6 +940,34 @@
         }
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
     "node_modules/@rollup/rollup-darwin-arm64": {
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
@@ -954,6 +982,314 @@
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -1233,9 +1569,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.19.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.8.tgz",
-      "integrity": "sha512-ebO/Yl+EAvVe8DnMfi+iaAyIqYdK0q/q0y0rw82INWEKJOBe6b/P3YWE8NW7oOlF/nXFNrHwhARrN/hdgDkraA==",
+      "version": "22.19.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.9.tgz",
+      "integrity": "sha512-PD03/U8g1F9T9MI+1OBisaIARhSzeidsUjQaf51fOxrfjeiKN9bLVO06lHuHYjxdnqLWJijJHfqXPSJri2EM2A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2798,11 +3134,20 @@
       }
     },
     "node_modules/ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
       "dev": true,
-      "license": "MIT"
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/cli-boxes": {
       "version": "2.2.1",
@@ -4404,6 +4749,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expand-range/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/expand-range/node_modules/isobject": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
@@ -4859,9 +5211,9 @@
       }
     },
     "node_modules/geist": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/geist/-/geist-1.5.1.tgz",
-      "integrity": "sha512-mAHZxIsL2o3ZITFaBVFBnwyDOw+zNLYum6A6nIjpzCGIO8QtC3V76XF2RnZTyLx1wlDTmMDy8jg3Ib52MIjGvQ==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.7.0.tgz",
+      "integrity": "sha512-ZaoiZwkSf0DwwB1ncdLKp+ggAldqxl5L1+SXaNIBGkPAqcu+xjVJLxlf3/S8vLt9UHx1xu5fz3lbzKCj5iOVdQ==",
       "dev": true,
       "license": "SIL OPEN FONT LICENSE",
       "peerDependencies": {
@@ -5132,6 +5484,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globby/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/globjoin": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
@@ -6277,6 +6639,13 @@
         "is-ci": "bin.js"
       }
     },
+    "node_modules/is-ci/node_modules/ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-core-module": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@@ -6568,9 +6937,9 @@
       "license": "MIT"
     },
     "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
       "dev": true,
       "license": "MIT"
     },
@@ -6752,13 +7121,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json-stable-stringify/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -10221,22 +10583,6 @@
         "npm": ">5"
       }
     },
-    "node_modules/patch-package/node_modules/ci-info": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
-      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/patch-package/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -10265,16 +10611,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/patch-package/node_modules/slash": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/patch-package/node_modules/tmp": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
@@ -10888,6 +11224,13 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/readable-stream/node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -11647,9 +11990,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -11886,13 +12229,13 @@
       }
     },
     "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
     "node_modules/slice-ansi": {

From c7f5058281a509007b3fefd89e0708b62d31df1a Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 Feb 2026 18:42:36 -0500
Subject: [PATCH 07/28] feat: #232 remove unused getters and hoist observed
 attributes tracking to initial AST pass

---
 src/jsx-loader.js | 51 ++++++++++++++++++++++++++---------------------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 284cdf7b..04fb2a90 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -275,8 +275,9 @@ export function parseJsx(moduleURL) {
   string = '';
 
   // TODO: would be nice to do everything in one pass, but first we need to know
-  // - if `inferredObservability` is set
-  // - get the name of the component for `static` references
+  // 1. if `inferredObservability` is set
+  // 2. get the name of the component class for `static` references
+  // 3, track observed attributes from `this` references in the template
   walk.simple(
     tree,
     {
@@ -308,6 +309,29 @@ export function parseJsx(moduleURL) {
           componentName = declaration.id.name;
         }
       },
+      ClassDeclaration(node) {
+        // @ts-ignore
+        if (node.superClass.name === 'HTMLElement') {
+          for (const n1 of node.body.body) {
+            if (n1.type === 'MethodDefinition') {
+              // @ts-ignore
+              const nodeName = n1.key.name;
+              if (nodeName === 'render') {
+                for (const n2 in n1.value.body.body) {
+                  const n = n1.value.body.body[n2];
+
+                  if (n.type === 'VariableDeclaration') {
+                    observedAttributes = [
+                      ...observedAttributes,
+                      ...findThisReferences('render', n),
+                    ];
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
     },
     {
       // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
@@ -317,6 +341,7 @@ export function parseJsx(moduleURL) {
     },
   );
 
+  // apply all JSX transformations
   walk.simple(
     tree,
     {
@@ -334,13 +359,7 @@ export function parseJsx(moduleURL) {
                 for (const n2 in n1.value.body.body) {
                   const n = n1.value.body.body[n2];
 
-                  if (n.type === 'VariableDeclaration') {
-                    observedAttributes = [
-                      ...observedAttributes,
-                      ...findThisReferences('render', n),
-                    ];
-                    // @ts-ignore
-                  } else if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
+                  if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
                     const html = parseJsxElement(n.argument, moduleContents);
                     const elementTree = getParse(html)(html);
                     const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
@@ -405,18 +424,6 @@ export function parseJsx(moduleURL) {
 
     let newModuleContents = generate(tree);
     const trackingAttrs = observedAttributes.filter((attr) => typeof attr === 'string');
-    // TODO ideally derivedAttrs would explicitly reference trackingAttrs
-    // and if there are no derivedAttrs, do not include the derivedGetters / derivedSetters code in the compiled output
-    const derivedAttrs = observedAttributes.filter((attr) => typeof attr !== 'string');
-    const derivedGetters = derivedAttrs
-      .map((attr) => {
-        return `
-        get_${attr.id.name}(${trackingAttrs.join(',')}) {
-          return ${moduleContents.slice(attr.init.start, attr.init.end)}
-        }
-      `;
-      })
-      .join('\n');
 
     // TODO: better way to determine value type, e,g. array, int, object, etc?
     // TODO: better way to test for shadowRoot presence when running querySelectorAll
@@ -435,8 +442,6 @@ export function parseJsx(moduleURL) {
         this[name].set(${componentName}.parseAttribute(newValue));
       }
 
-      ${derivedGetters}
-
       ${newModuleContents.slice(insertPoint)}
     `;
 

From dba95df907122529d2ea5c1d2d4368fea7fba5db Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 Feb 2026 18:47:53 -0500
Subject: [PATCH 08/28] feat: #232 update TODO comments

---
 src/jsx-loader.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 04fb2a90..a805013b 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -17,11 +17,11 @@ globalThis.Signal = globalThis.Signal ?? Signal;
 const jsxRegex = /\.(jsx)$/;
 const tsxRegex = /\.(tsx)$/;
 
-// TODO same hack as definitions
+// TODO: same hack as definitions
 // https://github.com/ProjectEvergreen/wcc/discussions/74
 let string;
 
-// TODO move to a util
+// TODO: move to a util
 // https://github.com/ProjectEvergreen/wcc/discussions/74
 function getParse(html) {
   return html.indexOf('<html>') >= 0 || html.indexOf('<body>') >= 0 || html.indexOf('<head>') >= 0
@@ -134,8 +134,7 @@ function parseJsxElement(element, moduleContents = '') {
             }
           }
         } else if (attribute.name.type === 'JSXIdentifier') {
-          // TODO is there any difference between an attribute for an event handler vs a normal attribute?
-          // Can all these be parsed using one function>
+          // TODO: is there any difference between an attribute for an event handler vs a normal attribute?
           if (attribute.value) {
             if (attribute.value.type === 'Literal') {
               // xxx="yyy" >
@@ -189,8 +188,6 @@ function parseJsxElement(element, moduleContents = '') {
 
       if (type === 'Identifier') {
         // You have {count} TODOs left to complete
-        // TODO be able to remove this extra data attribute
-        // string = `${string.slice(0, string.lastIndexOf('>'))} data-wcc-${name} data-wcc-ins="text">`;
         string += `$\{${element.expression.name}}`;
       } else if (type === 'MemberExpression') {
         const { object } = element.expression.object;
@@ -243,7 +240,7 @@ function findThisReferences(context, statement) {
           references.push(property.key.name);
         });
       } else {
-        // TODO we are just blindly tracking anything here.
+        // TODO: we are just blindly tracking anything here.
         // everything should ideally be mapped to actual this references, to create a strong chain of direct reactivity
         // instead of tracking any declaration as a derived tracking attr
         // for convenience here, we push the entire declaration here, instead of the name like for direct this references (see above)
@@ -274,7 +271,7 @@ export function parseJsx(moduleURL) {
   });
   string = '';
 
-  // TODO: would be nice to do everything in one pass, but first we need to know
+  // initial pass to get certain information before running JSX transformations (could we do this in one pass?)
   // 1. if `inferredObservability` is set
   // 2. get the name of the component class for `static` references
   // 3, track observed attributes from `this` references in the template
@@ -412,6 +409,7 @@ export function parseJsx(moduleURL) {
     let insertPoint;
     for (const line of tree.body) {
       // TODO: test for class MyComponent vs export default class MyComponent
+      // https://github.com/ProjectEvergreen/wcc/issues/117
       // @ts-ignore
       if (
         line.type === 'ClassDeclaration' ||
@@ -425,8 +423,7 @@ export function parseJsx(moduleURL) {
     let newModuleContents = generate(tree);
     const trackingAttrs = observedAttributes.filter((attr) => typeof attr === 'string');
 
-    // TODO: better way to determine value type, e,g. array, int, object, etc?
-    // TODO: better way to test for shadowRoot presence when running querySelectorAll
+    // TODO: better way to determine value type, e,g. array, number, object, etc within `parseAttribute`?
     newModuleContents = `${newModuleContents.slice(0, insertPoint)}
       static get observedAttributes() {
         return [${[...trackingAttrs].map((attr) => `'${attr}'`).join()}]

From 1c6863533a8f4a84ef9a6d40c483cd1532bb30b1 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 Feb 2026 21:32:35 -0500
Subject: [PATCH 09/28] feat: #232 prune computed signals from observed
 attributes and handle signal transforms within templates for rendering

---
 docs/components/sandbox/signal-counter.jsx    |  2 +-
 src/jsx-loader.js                             | 83 +++++++++++++++++--
 .../src/counter.jsx                           | 24 +++---
 .../src/counter.tsx                           | 13 +--
 4 files changed, 99 insertions(+), 23 deletions(-)

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index df3f1a42..0bdbdce2 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -35,7 +35,7 @@ export default class SignalCounter extends HTMLElement {
         <button onclick={this.decrement}>Decrement (-)</button>
         <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button>
         <span>
-          The count is ${count.get()} (${parity.get()})
+          The count is {count.get()} ({parity.get()})
         </span>
       </div>
     );
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index a805013b..225a31d3 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -80,7 +80,7 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
   return tree;
 }
 
-function parseJsxElement(element, moduleContents = '') {
+function parseJsxElement(element, moduleContents = '', inferredObservability) {
   try {
     const { type } = element;
 
@@ -136,9 +136,30 @@ function parseJsxElement(element, moduleContents = '') {
         } else if (attribute.name.type === 'JSXIdentifier') {
           // TODO: is there any difference between an attribute for an event handler vs a normal attribute?
           if (attribute.value) {
+            const expression = attribute?.value?.expression;
             if (attribute.value.type === 'Literal') {
               // xxx="yyy" >
               string += ` ${name}="${attribute.value.value}"`;
+            } else if (
+              expression &&
+              inferredObservability &&
+              attribute.value.type === 'JSXExpressionContainer' &&
+              expression?.type === 'CallExpression' &&
+              expression?.callee.type === 'MemberExpression' &&
+              expression?.arguments &&
+              expression?.callee?.property?.name === 'get'
+            ) {
+              // xxx={products.get().length} >
+              // TODO: do we need to handle for set()?
+              const { object, property } = expression.callee;
+
+              if (object.type === 'MemberExpression' && object?.object.type === 'ThisExpression') {
+                // The count is counter={this.count.get()}
+                string += ` ${name}=$\{${object.property.name}.${property.name}()}`;
+              } else if (object.type === 'Identifier') {
+                // xxx={products.get().length} >
+                string += ` ${name}=$\{${object.name}.${property.name}()}`;
+              }
             } else if (attribute.value.type === 'JSXExpressionContainer') {
               // xxx={allTodos.length} >
               const { value } = attribute;
@@ -173,7 +194,9 @@ function parseJsxElement(element, moduleContents = '') {
       string += openingElement.selfClosing ? ' />' : '>';
 
       if (element.children.length > 0) {
-        element.children.forEach((child) => parseJsxElement(child, moduleContents));
+        element.children.forEach((child) =>
+          parseJsxElement(child, moduleContents, inferredObservability),
+        );
       }
 
       string += `</${tagName}>`;
@@ -186,7 +209,18 @@ function parseJsxElement(element, moduleContents = '') {
     if (type === 'JSXExpressionContainer') {
       const { type } = element.expression;
 
-      if (type === 'Identifier') {
+      if (
+        inferredObservability &&
+        type === 'CallExpression' &&
+        element.expression.arguments &&
+        element.expression?.callee?.type === 'MemberExpression' &&
+        element.expression?.callee?.property?.name === 'get'
+      ) {
+        // The count is {count.get()}
+        // TODO: do we need to handle for set()?
+        const { object, property } = element.expression.callee;
+        string += `$\{${object.name}.${property.name}()}`;
+      } else if (type === 'Identifier') {
         // You have {count} TODOs left to complete
         string += `$\{${element.expression.name}}`;
       } else if (type === 'MemberExpression') {
@@ -263,7 +297,9 @@ export function parseJsx(moduleURL) {
   // however, this requires making parseJsx async, but WCC acorn walking is done sync
   const hasOwnObservedAttributes = undefined;
   let inferredObservability = false;
+  // TODO: "merge" observedAtttibutes tracking with constructor tracking
   let observedAttributes = [];
+  let constructorMembersSignals = new Map();
   let componentName;
   let tree = acorn.Parser.extend(jsx()).parse(result.code, {
     ecmaVersion: 'latest',
@@ -329,6 +365,40 @@ export function parseJsx(moduleURL) {
           }
         }
       },
+      MethodDefinition(node) {
+        // @ts-ignore
+        if (
+          node.kind === 'constructor' &&
+          node?.value.type === 'FunctionExpression' &&
+          node.value.body?.type === 'BlockStatement'
+        ) {
+          const root = node.value.body?.body;
+          for (const n of root) {
+            if (
+              n.type === 'ExpressionStatement' &&
+              n.expression?.type === 'AssignmentExpression' &&
+              n.expression?.operator === '=' &&
+              n.expression.left.object.type === 'ThisExpression'
+            ) {
+              const { left, right } = n.expression;
+              if (
+                right.type === 'NewExpression' &&
+                right.callee?.object?.type === 'Identifier' &&
+                right.callee?.object?.name === 'Signal'
+              ) {
+                const name = left.property.name;
+                const isState = right.callee?.property?.name === 'State';
+                const isComputed = right.callee?.property?.name === 'Computed';
+
+                constructorMembersSignals.set(name, {
+                  isState,
+                  isComputed,
+                });
+              }
+            }
+          }
+        }
+      },
     },
     {
       // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
@@ -357,7 +427,7 @@ export function parseJsx(moduleURL) {
                   const n = n1.value.body.body[n2];
 
                   if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
-                    const html = parseJsxElement(n.argument, moduleContents);
+                    const html = parseJsxElement(n.argument, moduleContents, inferredObservability);
                     const elementTree = getParse(html)(html);
                     const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
 
@@ -426,7 +496,10 @@ export function parseJsx(moduleURL) {
     // TODO: better way to determine value type, e,g. array, number, object, etc within `parseAttribute`?
     newModuleContents = `${newModuleContents.slice(0, insertPoint)}
       static get observedAttributes() {
-        return [${[...trackingAttrs].map((attr) => `'${attr}'`).join()}]
+        return [${[...trackingAttrs]
+          .filter((attr) => constructorMembersSignals.get(attr)?.isState)
+          .map((attr) => `'${attr}'`)
+          .join()}]
       }
       static parseAttribute = (value) => value.charAt(0) === '{' || value.charAt(0) === '['
         ? JSON.parse(value)
diff --git a/test/cases/jsx-inferred-observability/src/counter.jsx b/test/cases/jsx-inferred-observability/src/counter.jsx
index 478ef0e9..4e21d19a 100644
--- a/test/cases/jsx-inferred-observability/src/counter.jsx
+++ b/test/cases/jsx-inferred-observability/src/counter.jsx
@@ -5,18 +5,17 @@ export const inferredObservability = true;
 export default class Counter extends HTMLElement {
   constructor() {
     super();
-    this.count = 0;
-    this.highlight = 'red';
+    this.count = new Signal.State(0);
+    this.highlight = new Signal.State('red');
+    this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
   }
 
   increment() {
-    this.count += 1;
-    this.render();
+    this.count.set(this.count.get() + 1);
   }
 
   decrement() {
-    this.count -= 1;
-    this.render();
+    this.count.set(this.count.get() - 1);
   }
 
   connectedCallback() {
@@ -28,24 +27,27 @@ export default class Counter extends HTMLElement {
 
     return (
       <div>
-        <wcc-badge count={count}></wcc-badge>
+        <wcc-badge count={this.count.get()}></wcc-badge>
         <h3 data-test="hello123">Counter JSX</h3>
         <button id="evt-this" onclick={this.decrement}>
           {' '}
           - (function reference)
         </button>
-        <button id="evt-assignment" onclick={(this.count -= 1)}>
+        <button id="evt-assignment" onclick={() => this.count.set(this.count.get() - 1)}>
           {' '}
           - (inline state update)
         </button>
         <span>
           You have clicked{' '}
-          <span class={highlight} id="expression">
-            {count}
+          <span class={highlight.get()} id="expression">
+            {count.get()}
           </span>{' '}
           times
         </span>
-        <button onclick={(this.count += 1)}> + (inline state update)</button>
+        <button onclick={() => this.count.set(this.count.get() + 1)}>
+          {' '}
+          + (inline state update)
+        </button>
         <button onclick={this.increment}> + (function reference)</button>
       </div>
     );
diff --git a/test/cases/tsx-inferred-observability/src/counter.tsx b/test/cases/tsx-inferred-observability/src/counter.tsx
index 1aa52739..72ad9de0 100644
--- a/test/cases/tsx-inferred-observability/src/counter.tsx
+++ b/test/cases/tsx-inferred-observability/src/counter.tsx
@@ -1,20 +1,21 @@
 export const inferredObservability = true;
 
 export default class Counter extends HTMLElement {
-  count: number;
+  // TODO: get Signal types for this
+  count: any;
 
   constructor() {
     super();
-    this.count = 0;
+    this.count = new Signal.State(0);
   }
 
   increment() {
-    this.count += 1;
+    this.count.set(this.count.get() + 1);
     this.render();
   }
 
   decrement() {
-    this.count -= 1;
+    this.count.set(this.count.get() - 1);
     this.render();
   }
 
@@ -39,11 +40,11 @@ export default class Counter extends HTMLElement {
         <span>
           You have clicked{' '}
           <span class="red" id="expression">
-            {count}
+            {count.get()}
           </span>{' '}
           times
         </span>
-        <button onclick={(this.count += 1)}> + (inline state update)</button>
+        <button onclick={() => count.set(count.get() + 1)}> + (inline state update)</button>
         <button onclick={this.increment}> + (function reference)</button>
       </div>
     );

From e6f60a86e2bf00928ab241b8bb51890d3785ce59 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 16 Feb 2026 10:50:11 -0500
Subject: [PATCH 10/28] feat: #232 transform template signals usage into
 effects and templates

---
 docs/components/sandbox/signal-counter.jsx    |  10 +-
 docs/pages/sandbox.html                       |  21 +-
 greenwood.config.ts                           |  28 ++-
 package.json                                  |   3 +-
 src/effect.js                                 |  39 +++
 src/jsx-loader.js                             | 222 ++++++++++++++----
 .../fixtures/effects.txt                      |   3 +
 .../fixtures/static-templates.txt             |   1 +
 .../jsx-inferred-obsevability.spec.js         |  49 +++-
 .../src/counter.jsx                           |  20 +-
 .../fixtures/effects.txt                      |   3 +
 .../fixtures/static-templates.txt             |   1 +
 .../src/counter.tsx                           |   6 +-
 .../tsx-inferred-obsevability.spec.js         |  36 ++-
 14 files changed, 371 insertions(+), 71 deletions(-)
 create mode 100644 src/effect.js
 create mode 100644 test/cases/jsx-inferred-observability/fixtures/effects.txt
 create mode 100644 test/cases/jsx-inferred-observability/fixtures/static-templates.txt
 create mode 100644 test/cases/tsx-inferred-observability/fixtures/effects.txt
 create mode 100644 test/cases/tsx-inferred-observability/fixtures/static-templates.txt

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index 0bdbdce2..5df6932b 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -18,12 +18,14 @@ export default class SignalCounter extends HTMLElement {
 
   increment() {
     this.count.set(this.count.get() + 1);
-    console.log('increment', this.count.get());
   }
 
   decrement() {
     this.count.set(this.count.get() - 1);
-    console.log('decrement', this.count.get());
+  }
+
+  double() {
+    this.count.set(this.count.get() * 2);
   }
 
   render() {
@@ -33,7 +35,9 @@ export default class SignalCounter extends HTMLElement {
       <div>
         <button onclick={this.increment}>Increment (+)</button>
         <button onclick={this.decrement}>Decrement (-)</button>
-        <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button>
+        {/* TODO: inline version breaks with effects */}
+        {/* <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button> */}
+        <button onclick={this.double}>Double (++)</button>
         <span>
           The count is {count.get()} ({parity.get()})
         </span>
diff --git a/docs/pages/sandbox.html b/docs/pages/sandbox.html
index d11d448d..cd49a136 100644
--- a/docs/pages/sandbox.html
+++ b/docs/pages/sandbox.html
@@ -46,7 +46,8 @@
     <script type="importmap">
       {
         "imports": {
-          "signal-polyfill": "../node_modules/signal-polyfill/dist/index.js"
+          "signal-polyfill": "../node_modules/signal-polyfill/dist/index.js",
+          "wc-compiler/effect": "../node_modules/wc-compiler/src/effect.js"
         }
       }
     </script>
@@ -55,6 +56,19 @@
 
       globalThis.Signal = Signal;
     </script>
+    <script type="module">
+      // NOTE: `Signal` has to be defined first
+      import { effect } from 'wc-compiler/effect';
+      globalThis.effect = effect;
+
+      globalThis._wcc = function (strings, ...values) {
+        let str = '';
+        strings.forEach((string, i) => {
+          str += string + (values[i] === 0 ? '0' : values[i] || '');
+        });
+        return str;
+      };
+    </script>
     <script>
       function randomReset() {
         return Math.floor(Math.random() * 100);
@@ -67,7 +81,9 @@
         // const counterTsxDsdResetButton = document.getElementById('counter-tsx-dsd-reset');
 
         signalCounterJsxResetButton.addEventListener('click', () => {
-          document.querySelector('sb-signal-counter-jsx').setAttribute('count', randomReset());
+          document.querySelectorAll('sb-signal-counter-jsx').forEach((el) => {
+            el.setAttribute('count', randomReset());
+          });
         });
 
         // counterJsxResetButton.addEventListener('click', () => {
@@ -92,6 +108,7 @@ <h1>WCC Sandbox</h1>
 
     <h2>JSX + inferredObservability</h2>
 
+    <sb-signal-counter-jsx count="0"></sb-signal-counter-jsx>
     <sb-signal-counter-jsx count="3"></sb-signal-counter-jsx>
 
     <button class="reset" id="signal-counter-reset">Random Reset</button>
diff --git a/greenwood.config.ts b/greenwood.config.ts
index 3a37489c..4329e4df 100644
--- a/greenwood.config.ts
+++ b/greenwood.config.ts
@@ -1,8 +1,33 @@
-import type { Config } from '@greenwood/cli';
+import type { Config, CopyPlugin } from '@greenwood/cli';
 import { greenwoodPluginMarkdown } from '@greenwood/plugin-markdown';
 import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
 import { greenwoodPluginCssModules } from '@greenwood/plugin-css-modules';
 import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw';
+import fs from 'node:fs';
+
+// TODO: this does not run in dev :/
+function copyEffectPlugin(): CopyPlugin {
+  console.log('herere???');
+  return {
+    type: 'copy',
+    name: 'plugin-copy-wcc-effect',
+    provider: async () => {
+      console.log('copy???');
+      return [
+        {
+          // copy a file
+          from: new URL('./src/effect.js', import.meta.url),
+          to: new URL('./node_modules/wc-compiler/src/effect.js', import.meta.url),
+        },
+      ];
+    },
+  };
+}
+
+fs.copyFileSync(
+  new URL('./src/effect.js', import.meta.url),
+  new URL('./node_modules/wc-compiler/src/effect.js', import.meta.url),
+);
 
 const config: Config = {
   activeContent: true,
@@ -12,6 +37,7 @@ const config: Config = {
     importAttributes: ['css'],
   },
   plugins: [
+    // copyEffectPlugin(),
     greenwoodPluginImportRaw(),
     greenwoodPluginCssModules(),
     greenwoodPluginImportJsx(),
diff --git a/package.json b/package.json
index 5303e7ef..6719e77c 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "./register": "./src/register.js",
     "./dom-shim": "./src/dom-shim.js",
     "./jsx-loader": "./src/jsx-loader.js",
-    "./jsx-runtime": "./src/jsx-runtime.ts"
+    "./jsx-runtime": "./src/jsx-runtime.ts",
+    "./effect": "./src/effect.js"
   },
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "keywords": [
diff --git a/src/effect.js b/src/effect.js
new file mode 100644
index 00000000..5c70e357
--- /dev/null
+++ b/src/effect.js
@@ -0,0 +1,39 @@
+// https://github.com/proposal-signals/signal-polyfill?tab=readme-ov-file#creating-a-simple-effect
+import { Signal } from 'signal-polyfill';
+
+let needsEnqueue = true;
+
+const w = new Signal.subtle.Watcher(() => {
+  if (needsEnqueue) {
+    needsEnqueue = false;
+    queueMicrotask(processPending);
+  }
+});
+
+function processPending() {
+  needsEnqueue = true;
+
+  for (const s of w.getPending()) {
+    s.get();
+  }
+
+  w.watch();
+}
+
+export function effect(callback) {
+  let cleanup;
+
+  const computed = new Signal.Computed(() => {
+    typeof cleanup === 'function' && cleanup();
+    cleanup = callback();
+  });
+
+  w.watch(computed);
+  computed.get();
+
+  return () => {
+    w.unwatch(computed);
+    typeof cleanup === 'function' && cleanup();
+    cleanup = undefined;
+  };
+}
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 225a31d3..91327790 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -6,14 +6,19 @@ import fs from 'fs';
 // ideally we can eventually adopt an ESM compatible version of this plugin
 // https://github.com/acornjs/acorn-jsx/issues/112
 // @ts-ignore
-// but it does have a default export???
+// but it does have a default export?
 import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
 import { transform } from 'sucrase';
-import { Signal } from 'signal-polyfill';
 
+// Signal has to come before effect
+import { Signal } from 'signal-polyfill';
 globalThis.Signal = globalThis.Signal ?? Signal;
 
+// no-op implementation for SSR
+function effect() {}
+globalThis.effect = globalThis.effect ?? effect;
+
 const jsxRegex = /\.(jsx)$/;
 const tsxRegex = /\.(tsx)$/;
 
@@ -297,9 +302,10 @@ export function parseJsx(moduleURL) {
   // however, this requires making parseJsx async, but WCC acorn walking is done sync
   const hasOwnObservedAttributes = undefined;
   let inferredObservability = false;
-  // TODO: "merge" observedAtttibutes tracking with constructor tracking
+  // TODO: "merge" observedAttributes tracking with constructor tracking
   let observedAttributes = [];
   let constructorMembersSignals = new Map();
+  let effects = [];
   let componentName;
   let tree = acorn.Parser.extend(jsx()).parse(result.code, {
     ecmaVersion: 'latest',
@@ -408,6 +414,92 @@ export function parseJsx(moduleURL) {
     },
   );
 
+  // we do this first to track reactivity usage before we transform the template and re-write its contents
+  if (inferredObservability && observedAttributes.length > 0 && !hasOwnObservedAttributes) {
+    console.log(
+      'inferredObservability enabled, but no static observedAttributes defined. Adding observedAttributes for',
+      observedAttributes,
+    );
+
+    // TODO: can this be done during the transformation pass instead of having to generate and re-parse the module again?
+    // this scans for signals usage within the template and builds up reactive list of templates + effects
+    // - text nodes
+    // - TODO: attributes
+    // - TODO: recursive scanning for nested components
+    walk.simple(
+      tree,
+      {
+        MethodDefinition(node) {
+          if (node.key.name === 'render') {
+            for (const n2 in node.value.body.body) {
+              const n = node.value.body.body[n2];
+              if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
+                console.log('ENTERING TEMPLATE AT =>', n.argument.openingElement.name.name);
+                let template = '';
+                let signals = [];
+                let selector;
+
+                for (const child of n.argument.children) {
+                  // TODO: need to handle recursion
+                  if (child.type === 'JSXText') {
+                    // console.log('TEXT NODE', { child })
+                    // TODO: track top level reactivity
+                  } else if (child.type === 'JSXElement') {
+                    console.log('ENTERING CHILD ELEMENT', child.openingElement.name.name);
+                    const hasReactivity = child.children.some(
+                      (c) =>
+                        c.type === 'JSXExpressionContainer' &&
+                        c.expression?.type === 'CallExpression' &&
+                        c.expression?.callee?.type === 'MemberExpression' &&
+                        c.expression?.callee?.property?.name === 'get',
+                    );
+
+                    if (hasReactivity) {
+                      console.log('CHILD ELEMENT HAS REACTIVITY', child.openingElement.name.name);
+                      selector = `${n.argument.openingElement.name.name} > ${child.openingElement.name.name}`;
+                      for (const c of child.children) {
+                        // TODO: track attributes here too for the template
+                        if (c.type === 'JSXText') {
+                          // TODO: trim text / line breaks?
+                          template += c.value;
+                        } else if (c.type === 'JSXExpressionContainer') {
+                          const { object } = c.expression.callee || {};
+                          template += `$\{${object.name}}`;
+                          signals.push(object.name);
+                        }
+                      }
+                    }
+                  }
+                }
+
+                if (template !== '' && signals.length > 0) {
+                  const $$templ = `$$tmpl${effects.length}`;
+                  // TODO: need to handle runtime assumption here with `_wcc`
+                  // TODO: handle when there is only one signal (e.g. no danging comma))
+                  const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template}\`;`;
+                  // TODO: handle when there is only one signal (e.g. no danging comma))
+                  const effect = `${componentName}.${$$templ}(${signals.map((s) => `${s}.get()`).join(', ')});`;
+
+                  effects.push({
+                    template: staticTemplate,
+                    effect,
+                    selector,
+                  });
+                }
+              }
+            }
+          }
+        },
+      },
+      {
+        // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
+        ...walk.base,
+        // @ts-ignore
+        JSXElement: () => {},
+      },
+    );
+  }
+
   // apply all JSX transformations
   walk.simple(
     tree,
@@ -430,9 +522,26 @@ export function parseJsx(moduleURL) {
                     const html = parseJsxElement(n.argument, moduleContents, inferredObservability);
                     const elementTree = getParse(html)(html);
                     const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
-
+                    let allEffects = '';
                     applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
+                    console.log('EFFECT', { effects });
+                    // TODO: is this best place to do this?  or maybe connectedCallback or constructor?
+                    // TODO: can we move this down to the inferredObservability block where we set attributeChangedCallback
+                    // TODO: detect for shadowRoot vs innerHTML here
+                    // TODO: we should cache these element queries instead querying on every effect trigger
+                    if (inferredObservability && effects.length > 0) {
+                      effects.map((effect) => {
+                        allEffects += `
+                          effect(() => {
+                            this.shadowRoot.querySelector('${effect.selector}').textContent = ${effect.effect}
+                          });\n
+                        `;
+                      });
+                    }
+
+                    console.log({ allEffects });
+
                     const serializedHtml = serialize(elementTree);
                     // we have to Shadow DOM use cases here
                     // 1. No shadowRoot, so we attachShadow and append the template
@@ -450,8 +559,10 @@ export function parseJsx(moduleURL) {
                         } else {
                           this.shadowRoot.innerHTML = template.innerHTML;
                         }
+
+                        ${allEffects}
                       `
-                      : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+                      : `${elementRoot}.innerHTML = \`${serializedHtml}\`; ${allEffects}`;
                     const transformed = acorn.parse(renderHandler, {
                       ecmaVersion: 'latest',
                       sourceType: 'module',
@@ -475,50 +586,69 @@ export function parseJsx(moduleURL) {
     },
   );
 
+  // TODO: why does this compilation happen twice?  logging here will output the message twice
   if (inferredObservability && observedAttributes.length > 0 && !hasOwnObservedAttributes) {
-    let insertPoint;
-    for (const line of tree.body) {
-      // TODO: test for class MyComponent vs export default class MyComponent
-      // https://github.com/ProjectEvergreen/wcc/issues/117
-      // @ts-ignore
-      if (
-        line.type === 'ClassDeclaration' ||
-        (line.declaration && line.declaration.type) === 'ClassDeclaration'
-      ) {
-        // @ts-ignore
-        insertPoint = line.declaration.body.start + 1;
-      }
-    }
-
-    let newModuleContents = generate(tree);
-    const trackingAttrs = observedAttributes.filter((attr) => typeof attr === 'string');
-
-    // TODO: better way to determine value type, e,g. array, number, object, etc within `parseAttribute`?
-    newModuleContents = `${newModuleContents.slice(0, insertPoint)}
-      static get observedAttributes() {
-        return [${[...trackingAttrs]
-          .filter((attr) => constructorMembersSignals.get(attr)?.isState)
-          .map((attr) => `'${attr}'`)
-          .join()}]
-      }
-      static parseAttribute = (value) => value.charAt(0) === '{' || value.charAt(0) === '['
-        ? JSON.parse(value)
-        : !isNaN(value)
-          ? parseInt(value, 10)
-          : value === 'true' || value === 'false'
-            ? value === 'true' ? true : false
-            : value;
-      attributeChangedCallback(name, oldValue, newValue) {
-        this[name].set(${componentName}.parseAttribute(newValue));
-      }
+    console.log(
+      'Adding static observedAttributes and attributeChangedCallback for inferredObservability',
+      { effects },
+    );
+
+    // here we wire up all effects, templates, and observed attributes that we've tracked so far to inject into the top of the class body
+    walk.simple(
+      tree,
+      {
+        ClassDeclaration(node) {
+          if (
+            node.id.name === componentName &&
+            node.type === 'ClassDeclaration' &&
+            node.body.type === 'ClassBody'
+          ) {
+            // TODO: do we even need this filter?
+            const trackingAttrs = observedAttributes.filter((attr) => typeof attr === 'string');
+
+            console.log('statics', `${effects.map((effect) => effect.template).join('\n')}`);
+            console.log('observedAttributes', trackingAttrs);
+            console.log('effects', effects.map((effect) => effect.template).join('\n'));
+            // TODO: better way to determine value type, e,g. array, number, object, etc within `parseAttribute`?
+            // have to wrap these `static` calls in a class here, otherwise we can't parse them standalone w/ acorn
+            const staticContents = `
+              class Stub {
+                ${effects.map((effect) => effect.template).join('\n')}
+                static get observedAttributes() {
+                  return [${[...trackingAttrs]
+                    .filter((attr) => constructorMembersSignals.get(attr)?.isState)
+                    .map((attr) => `'${attr}'`)
+                    .join()}]
+                }
+                static parseAttribute = (value) => value.charAt(0) === '{' || value.charAt(0) === '['
+                  ? JSON.parse(value)
+                  : !isNaN(value)
+                    ? parseInt(value, 10)
+                    : value === 'true' || value === 'false'
+                      ? value === 'true' ? true : false
+                      : value;
+                attributeChangedCallback(name, oldValue, newValue) {
+                  this[name].set(${componentName}.parseAttribute(newValue));
+                }
+              }
+            `;
 
-      ${newModuleContents.slice(insertPoint)}
-    `;
+            const staticContentsTree = acorn.parse(staticContents, {
+              ecmaVersion: 'latest',
+              sourceType: 'module',
+            });
 
-    tree = acorn.Parser.extend(jsx()).parse(newModuleContents, {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-    });
+            node.body.body.unshift(...staticContentsTree.body[0].body.body);
+          }
+        },
+      },
+      {
+        // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
+        ...walk.base,
+        // @ts-ignore
+        JSXElement: () => {},
+      },
+    );
   }
 
   return tree;
diff --git a/test/cases/jsx-inferred-observability/fixtures/effects.txt b/test/cases/jsx-inferred-observability/fixtures/effects.txt
new file mode 100644
index 00000000..9aa8c653
--- /dev/null
+++ b/test/cases/jsx-inferred-observability/fixtures/effects.txt
@@ -0,0 +1,3 @@
+effect(() => {
+  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(count.get());
+});     
\ No newline at end of file
diff --git a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
new file mode 100644
index 00000000..934abfc7
--- /dev/null
+++ b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
@@ -0,0 +1 @@
+static $$tmpl0 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file
diff --git a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
index abfbdb39..dc64cdc8 100644
--- a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
+++ b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
@@ -7,6 +7,7 @@
  *
  * User Workspace
  * src/
+ *   badge.jsx
  *   counter.jsx
  */
 import chai from 'chai';
@@ -20,6 +21,8 @@ describe('Run WCC For ', function () {
   const LABEL = 'Single Custom Element using JSX and Inferred Observability';
   let fixtureAttributeChangedCallback;
   let fixtureGetObservedAttributes;
+  let fixtureStaticTemplates;
+  let fixtureEffects;
   let meta;
   let dom;
 
@@ -37,6 +40,11 @@ describe('Run WCC For ', function () {
       new URL('./fixtures/get-observed-attributes.txt', import.meta.url),
       'utf-8',
     );
+    fixtureStaticTemplates = await fs.readFile(
+      new URL('./fixtures/static-templates.txt', import.meta.url),
+      'utf-8',
+    );
+    fixtureEffects = await fs.readFile(new URL('./fixtures/effects.txt', import.meta.url), 'utf-8');
   });
 
   describe(LABEL, function () {
@@ -55,17 +63,50 @@ describe('Run WCC For ', function () {
         expect(actual).to.contain(expected);
       });
 
+      it('should infer observability by generating a static attribute method', () => {
+        const actual = meta['wcc-counter-jsx'].source.replace(/ /g, '').replace(/\n/g, '');
+        const expected = fixtureStaticTemplates.replace(/ /g, '').replace(/\n/g, '');
+
+        expect(actual).to.contain(expected);
+      });
+
+      it('should infer observability by generating an effects method', () => {
+        const actual = meta['wcc-counter-jsx'].source.replace(/ /g, '').replace(/\n/g, '');
+        const expected = fixtureEffects.replace(/ /g, '').replace(/\n/g, '');
+
+        expect(actual).to.contain(expected);
+      });
+
       // <wcc-badge count="0"></wcc-badge>
       it('should have the expected observability attributes on the <wcc-badge> component', () => {
-        const badge = dom.window.document.querySelector('wcc-badge');
+        const counterDom = new JSDOM(
+          dom.window.document.querySelector('wcc-counter-jsx template[shadowrootmode="open"]')
+            .innerHTML,
+        ).window.document;
+        const badge = counterDom.querySelector('wcc-badge');
         const conditionalClassSpan = badge.querySelector('span[class="unmet"]'); // conditional class rendering
 
         expect(conditionalClassSpan.textContent.trim()).to.equal('0');
       });
 
-      // <span class="red" data-wcc-highlight="class" id="expression">0</span>
-      it('should have the expected observability attributes on the <wcc-counter-jsx> component', () => {
-        const span = dom.window.document.querySelector('wcc-counter-jsx span[class="red"]');
+      // <span id="one-deep">Top level count is {count.get()}</span>
+      it('should have the expected value for the nested count signal', () => {
+        const counterDom = new JSDOM(
+          dom.window.document.querySelector('wcc-counter-jsx template[shadowrootmode="open"]')
+            .innerHTML,
+        ).window.document;
+        const span = counterDom.querySelector('span#one-deep');
+
+        expect(span.textContent.trim()).to.equal('Top level count is 0');
+      });
+
+      // <span>You have clicked{' '}<span class="red" id="expression">{count.get()}</span>times</span>
+      it('should have the expected value for the nested count signal', () => {
+        const counterDom = new JSDOM(
+          dom.window.document.querySelector('wcc-counter-jsx template[shadowrootmode="open"]')
+            .innerHTML,
+        ).window.document;
+        const span = counterDom.querySelector('span#two-deep span[class="red"]');
 
         expect(span.textContent.trim()).to.equal('0');
       });
diff --git a/test/cases/jsx-inferred-observability/src/counter.jsx b/test/cases/jsx-inferred-observability/src/counter.jsx
index 4e21d19a..890eac76 100644
--- a/test/cases/jsx-inferred-observability/src/counter.jsx
+++ b/test/cases/jsx-inferred-observability/src/counter.jsx
@@ -19,7 +19,12 @@ export default class Counter extends HTMLElement {
   }
 
   connectedCallback() {
-    this.render();
+    if (!this.shadowRoot) {
+      this.attachShadow({
+        mode: 'open',
+      });
+      this.render();
+    }
   }
 
   render() {
@@ -33,21 +38,20 @@ export default class Counter extends HTMLElement {
           {' '}
           - (function reference)
         </button>
-        <button id="evt-assignment" onclick={() => this.count.set(this.count.get() - 1)}>
+        <button id="evt-assignment" onclick={(this.count -= 1)}>
           {' '}
           - (inline state update)
         </button>
-        <span>
+        <span id="one-deep">Top level count is {count.get()}</span>
+        {/* TODO: test for nested signals */}
+        <span id="two-deep">
           You have clicked{' '}
-          <span class={highlight.get()} id="expression">
+          <span class="red" id="expression">
             {count.get()}
           </span>{' '}
           times
         </span>
-        <button onclick={() => this.count.set(this.count.get() + 1)}>
-          {' '}
-          + (inline state update)
-        </button>
+        <button onclick={() => count.set(count.get() + 1)}> + (inline state update)</button>
         <button onclick={this.increment}> + (function reference)</button>
       </div>
     );
diff --git a/test/cases/tsx-inferred-observability/fixtures/effects.txt b/test/cases/tsx-inferred-observability/fixtures/effects.txt
new file mode 100644
index 00000000..9aa8c653
--- /dev/null
+++ b/test/cases/tsx-inferred-observability/fixtures/effects.txt
@@ -0,0 +1,3 @@
+effect(() => {
+  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(count.get());
+});     
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/static-templates.txt b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
new file mode 100644
index 00000000..934abfc7
--- /dev/null
+++ b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
@@ -0,0 +1 @@
+static $$tmpl0 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/src/counter.tsx b/test/cases/tsx-inferred-observability/src/counter.tsx
index 72ad9de0..0ac70806 100644
--- a/test/cases/tsx-inferred-observability/src/counter.tsx
+++ b/test/cases/tsx-inferred-observability/src/counter.tsx
@@ -11,12 +11,10 @@ export default class Counter extends HTMLElement {
 
   increment() {
     this.count.set(this.count.get() + 1);
-    this.render();
   }
 
   decrement() {
     this.count.set(this.count.get() - 1);
-    this.render();
   }
 
   connectedCallback() {
@@ -37,7 +35,9 @@ export default class Counter extends HTMLElement {
           {' '}
           - (inline state update)
         </button>
-        <span>
+        <span id="one-deep">Top level count is {count.get()}</span>
+        {/* TODO: test for nested signals */}
+        <span id="two-deep">
           You have clicked{' '}
           <span class="red" id="expression">
             {count.get()}
diff --git a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
index 689f1345..c746d0d3 100644
--- a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
+++ b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
@@ -20,6 +20,8 @@ describe('Run WCC For ', function () {
   const LABEL = 'Single Custom Element using TSX and Inferred Observability';
   let fixtureAttributeChangedCallback;
   let fixtureGetObservedAttributes;
+  let fixtureStaticTemplates;
+  let fixtureEffects;
   let meta;
   let dom;
 
@@ -37,6 +39,11 @@ describe('Run WCC For ', function () {
       new URL('./fixtures/get-observed-attributes.txt', import.meta.url),
       'utf-8',
     );
+    fixtureStaticTemplates = await fs.readFile(
+      new URL('./fixtures/static-templates.txt', import.meta.url),
+      'utf-8',
+    );
+    fixtureEffects = await fs.readFile(new URL('./fixtures/effects.txt', import.meta.url), 'utf-8');
   });
 
   describe(LABEL, function () {
@@ -55,9 +62,32 @@ describe('Run WCC For ', function () {
         expect(actual).to.contain(expected);
       });
 
-      // <span class="red" id="expression">0</span>
-      it('should have the expected observability attributes on the <wcc-counter-tsx> component', () => {
-        const span = dom.window.document.querySelector('wcc-counter-tsx span[class="red"]');
+      it('should infer observability by generating a static attribute method', () => {
+        const actual = meta['wcc-counter-tsx'].source.replace(/ /g, '').replace(/\n/g, '');
+        const expected = fixtureStaticTemplates.replace(/ /g, '').replace(/\n/g, '');
+
+        expect(actual).to.contain(expected);
+      });
+
+      it('should infer observability by generating an effects method', () => {
+        const actual = meta['wcc-counter-tsx'].source.replace(/ /g, '').replace(/\n/g, '');
+        const expected = fixtureEffects.replace(/ /g, '').replace(/\n/g, '');
+
+        expect(actual).to.contain(expected);
+      });
+
+      // <span id="one-deep">Top level count is {count.get()}</span>
+      it('should have the expected value for the nested count signal', () => {
+        const span = dom.window.document.querySelector('wcc-counter-tsx span#one-deep');
+
+        expect(span.textContent.trim()).to.equal('Top level count is 0');
+      });
+
+      // <span>You have clicked{' '}<span class="red" id="expression">{count.get()}</span>times</span>
+      it('should have the expected value for the nested count signal', () => {
+        const span = dom.window.document.querySelector(
+          'wcc-counter-tsx span#two-deep span[class="red"]',
+        );
 
         expect(span.textContent.trim()).to.equal('0');
       });

From 5ce4c8b9795390f762cd99c9fa26fc88fc739a5f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 16 Feb 2026 16:49:03 -0500
Subject: [PATCH 11/28] feat: #232 update comments

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

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 91327790..10e21572 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -74,6 +74,9 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
         }
       }
 
+      // TODO: handle text nodes for __this__ references
+      // https://github.com/ProjectEvergreen/wcc/issues/88
+
       if (node.childNodes && node.childNodes.length > 0) {
         applyDomDepthSubstitutions(node, currentDepth + 1, hasShadowRoot);
       }
@@ -221,7 +224,8 @@ function parseJsxElement(element, moduleContents = '', inferredObservability) {
         element.expression?.callee?.type === 'MemberExpression' &&
         element.expression?.callee?.property?.name === 'get'
       ) {
-        // The count is {count.get()}
+        // TODO: handle this references
+        // https://github.com/ProjectEvergreen/wcc/issues/88
         // TODO: do we need to handle for set()?
         const { object, property } = element.expression.callee;
         string += `$\{${object.name}.${property.name}()}`;
@@ -421,9 +425,8 @@ export function parseJsx(moduleURL) {
       observedAttributes,
     );
 
-    // TODO: can this be done during the transformation pass instead of having to generate and re-parse the module again?
-    // this scans for signals usage within the template and builds up reactive list of templates + effects
-    // - text nodes
+    // this scans for signals usage within the template and builds up a reactive list of templates + effects
+    // (could this be done during the transformation pass instead of having to generate and re-parse the module again?)
     // - TODO: attributes
     // - TODO: recursive scanning for nested components
     walk.simple(
@@ -446,6 +449,7 @@ export function parseJsx(moduleURL) {
                     // TODO: track top level reactivity
                   } else if (child.type === 'JSXElement') {
                     console.log('ENTERING CHILD ELEMENT', child.openingElement.name.name);
+                    // TODO: I think we are only checking for State, I think we also need to handle Computeds (by themselves) here as well
                     const hasReactivity = child.children.some(
                       (c) =>
                         c.type === 'JSXExpressionContainer' &&
@@ -463,6 +467,8 @@ export function parseJsx(moduleURL) {
                           // TODO: trim text / line breaks?
                           template += c.value;
                         } else if (c.type === 'JSXExpressionContainer') {
+                          // TODO: handle this references
+                          // https://github.com/ProjectEvergreen/wcc/issues/88
                           const { object } = c.expression.callee || {};
                           template += `$\{${object.name}}`;
                           signals.push(object.name);
@@ -540,8 +546,6 @@ export function parseJsx(moduleURL) {
                       });
                     }
 
-                    console.log({ allEffects });
-
                     const serializedHtml = serialize(elementTree);
                     // we have to Shadow DOM use cases here
                     // 1. No shadowRoot, so we attachShadow and append the template

From 63d1ee429840173c31b83411ced71d793ed0367f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 16 Feb 2026 17:29:47 -0500
Subject: [PATCH 12/28] feat: #232 move effects inlining to connectedCallback

---
 src/jsx-loader.js                             | 140 +++++++++---------
 .../fixtures/effects.txt                      |   2 +-
 .../fixtures/effects.txt                      |   2 +-
 3 files changed, 76 insertions(+), 68 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 10e21572..f87cdd01 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -88,6 +88,46 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
   return tree;
 }
 
+// TODO handle if / else statements
+// https://github.com/ProjectEvergreen/wcc/issues/88
+function findThisReferences(context, statement) {
+  const references = [];
+  const isRenderFunctionContext = context === 'render';
+  const { expression, type } = statement;
+  const isConstructorThisAssignment =
+    context === 'constructor' &&
+    type === 'ExpressionStatement' &&
+    expression.type === 'AssignmentExpression' &&
+    expression.left.object.type === 'ThisExpression';
+
+  if (isConstructorThisAssignment) {
+    // this.name = 'something'; // constructor
+    references.push(expression.left.property.name);
+  } else if (isRenderFunctionContext && type === 'VariableDeclaration') {
+    statement.declarations.forEach((declaration) => {
+      const { init, id } = declaration;
+
+      if (init.object && init.object.type === 'ThisExpression') {
+        // const { description } = this.todo;
+        references.push(init.property.name);
+      } else if (init.type === 'ThisExpression' && id && id.properties) {
+        // const { id, description } = this;
+        id.properties.forEach((property) => {
+          references.push(property.key.name);
+        });
+      } else {
+        // TODO: we are just blindly tracking anything here.
+        // everything should ideally be mapped to actual this references, to create a strong chain of direct reactivity
+        // instead of tracking any declaration as a derived tracking attr
+        // for convenience here, we push the entire declaration here, instead of the name like for direct this references (see above)
+        references.push(declaration);
+      }
+    });
+  }
+
+  return references;
+}
+
 function parseJsxElement(element, moduleContents = '', inferredObservability) {
   try {
     const { type } = element;
@@ -255,46 +295,6 @@ function parseJsxElement(element, moduleContents = '', inferredObservability) {
   return string;
 }
 
-// TODO handle if / else statements
-// https://github.com/ProjectEvergreen/wcc/issues/88
-function findThisReferences(context, statement) {
-  const references = [];
-  const isRenderFunctionContext = context === 'render';
-  const { expression, type } = statement;
-  const isConstructorThisAssignment =
-    context === 'constructor' &&
-    type === 'ExpressionStatement' &&
-    expression.type === 'AssignmentExpression' &&
-    expression.left.object.type === 'ThisExpression';
-
-  if (isConstructorThisAssignment) {
-    // this.name = 'something'; // constructor
-    references.push(expression.left.property.name);
-  } else if (isRenderFunctionContext && type === 'VariableDeclaration') {
-    statement.declarations.forEach((declaration) => {
-      const { init, id } = declaration;
-
-      if (init.object && init.object.type === 'ThisExpression') {
-        // const { description } = this.todo;
-        references.push(init.property.name);
-      } else if (init.type === 'ThisExpression' && id && id.properties) {
-        // const { id, description } = this;
-        id.properties.forEach((property) => {
-          references.push(property.key.name);
-        });
-      } else {
-        // TODO: we are just blindly tracking anything here.
-        // everything should ideally be mapped to actual this references, to create a strong chain of direct reactivity
-        // instead of tracking any declaration as a derived tracking attr
-        // for convenience here, we push the entire declaration here, instead of the name like for direct this references (see above)
-        references.push(declaration);
-      }
-    });
-  }
-
-  return references;
-}
-
 export function parseJsx(moduleURL) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
   const result = transform(moduleContents, {
@@ -481,14 +481,14 @@ export function parseJsx(moduleURL) {
                 if (template !== '' && signals.length > 0) {
                   const $$templ = `$$tmpl${effects.length}`;
                   // TODO: need to handle runtime assumption here with `_wcc`
-                  // TODO: handle when there is only one signal (e.g. no danging comma))
                   const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template}\`;`;
-                  // TODO: handle when there is only one signal (e.g. no danging comma))
-                  const effect = `${componentName}.${$$templ}(${signals.map((s) => `${s}.get()`).join(', ')});`;
+                  // TODO: handle this references?
+                  // https://www.github.com/ProjectEvergreen/wcc/issues/88
+                  const expression = `${componentName}.${$$templ}(${signals.map((s) => `this.${s}.get()`).join(', ')});`;
 
                   effects.push({
                     template: staticTemplate,
-                    effect,
+                    expression,
                     selector,
                   });
                 }
@@ -528,23 +528,8 @@ export function parseJsx(moduleURL) {
                     const html = parseJsxElement(n.argument, moduleContents, inferredObservability);
                     const elementTree = getParse(html)(html);
                     const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
-                    let allEffects = '';
-                    applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
-                    console.log('EFFECT', { effects });
-                    // TODO: is this best place to do this?  or maybe connectedCallback or constructor?
-                    // TODO: can we move this down to the inferredObservability block where we set attributeChangedCallback
-                    // TODO: detect for shadowRoot vs innerHTML here
-                    // TODO: we should cache these element queries instead querying on every effect trigger
-                    if (inferredObservability && effects.length > 0) {
-                      effects.map((effect) => {
-                        allEffects += `
-                          effect(() => {
-                            this.shadowRoot.querySelector('${effect.selector}').textContent = ${effect.effect}
-                          });\n
-                        `;
-                      });
-                    }
+                    applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
                     const serializedHtml = serialize(elementTree);
                     // we have to Shadow DOM use cases here
@@ -563,10 +548,8 @@ export function parseJsx(moduleURL) {
                         } else {
                           this.shadowRoot.innerHTML = template.innerHTML;
                         }
-
-                        ${allEffects}
                       `
-                      : `${elementRoot}.innerHTML = \`${serializedHtml}\`; ${allEffects}`;
+                      : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
                     const transformed = acorn.parse(renderHandler, {
                       ecmaVersion: 'latest',
                       sourceType: 'module',
@@ -590,14 +573,16 @@ export function parseJsx(moduleURL) {
     },
   );
 
-  // TODO: why does this compilation happen twice?  logging here will output the message twice
+  // TODO: why does this compilation run twice?  logging here will output the message twice
   if (inferredObservability && observedAttributes.length > 0 && !hasOwnObservedAttributes) {
     console.log(
       'Adding static observedAttributes and attributeChangedCallback for inferredObservability',
       { effects },
     );
 
-    // here we wire up all effects, templates, and observed attributes that we've tracked so far to inject into the top of the class body
+    // here we do the following with all the work we've done so far tracking attributes, signals, effects, etc
+    // 1. setup static template functions and observed attributes that we've tracked so far to inject into the top of the class body
+    // 1. append all effects to the end of the connectedCallback function
     walk.simple(
       tree,
       {
@@ -613,7 +598,8 @@ export function parseJsx(moduleURL) {
             console.log('statics', `${effects.map((effect) => effect.template).join('\n')}`);
             console.log('observedAttributes', trackingAttrs);
             console.log('effects', effects.map((effect) => effect.template).join('\n'));
-            // TODO: better way to determine value type, e,g. array, number, object, etc within `parseAttribute`?
+
+            // TODO: better way to determine value type, e,g. array, number, object, etc for `parseAttribute`?
             // have to wrap these `static` calls in a class here, otherwise we can't parse them standalone w/ acorn
             const staticContents = `
               class Stub {
@@ -645,6 +631,28 @@ export function parseJsx(moduleURL) {
             node.body.body.unshift(...staticContentsTree.body[0].body.body);
           }
         },
+        MethodDefinition(node) {
+          // TODO: detect for shadowRoot vs innerHTML here
+          // TODO: we should cache these element queries instead querying on every effect trigger
+          if (node.key.name === 'connectedCallback') {
+            const effectContents = effects
+              .map(
+                (effect) => `
+                  effect(() => {
+                    this.shadowRoot.querySelector('${effect.selector}').textContent = ${effect.expression}
+                  });\n
+                `,
+              )
+              .join('\n');
+
+            const effectContentsTree = acorn.parse(effectContents, {
+              ecmaVersion: 'latest',
+              sourceType: 'module',
+            });
+
+            node.value.body.body = [...node.value.body.body, ...effectContentsTree.body];
+          }
+        },
       },
       {
         // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
diff --git a/test/cases/jsx-inferred-observability/fixtures/effects.txt b/test/cases/jsx-inferred-observability/fixtures/effects.txt
index 9aa8c653..dcd0c7d4 100644
--- a/test/cases/jsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/effects.txt
@@ -1,3 +1,3 @@
 effect(() => {
-  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(count.get());
+  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(this.count.get());
 });     
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/effects.txt b/test/cases/tsx-inferred-observability/fixtures/effects.txt
index 9aa8c653..dcd0c7d4 100644
--- a/test/cases/tsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/effects.txt
@@ -1,3 +1,3 @@
 effect(() => {
-  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(count.get());
+  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(this.count.get());
 });     
\ No newline at end of file

From c5e63a6e544a4e095480f6724e81aa0a051e2645 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 16 Feb 2026 18:41:29 -0500
Subject: [PATCH 13/28] feat: #232 cache DOM elements referenced by effects

---
 .c8rc.json                                    |  2 +-
 src/dom-shim.js                               |  8 +++++
 src/jsx-loader.js                             | 30 ++++++++++++++-----
 .../fixtures/effects.txt                      |  3 +-
 .../fixtures/static-templates.txt             |  1 +
 .../fixtures/effects.txt                      |  5 ++--
 .../fixtures/static-templates.txt             |  1 +
 7 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/.c8rc.json b/.c8rc.json
index f6c43737..108d3f2a 100644
--- a/.c8rc.json
+++ b/.c8rc.json
@@ -9,7 +9,7 @@
 
   "statements": 90,
   "branches": 85,
-  "functions": 85,
+  "functions": 80,
   "lines": 90,
 
   "watermarks": {
diff --git a/src/dom-shim.js b/src/dom-shim.js
index 01be10bd..27ae82bb 100644
--- a/src/dom-shim.js
+++ b/src/dom-shim.js
@@ -198,6 +198,10 @@ class Element extends Node {
       this.attrs?.push({ name, value });
     }
   }
+
+  // minimal shim to support JSX <> Signals compilation and caching DOM references tracked to effects
+  querySelector() {}
+  querySelectorAll() {}
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Document
@@ -253,6 +257,10 @@ class ShadowRoot extends DocumentFragment {
       `<template shadowrootmode="${this.mode}">${html}</template>`,
     ).childNodes;
   }
+
+  // minimal shim to support JSX <> Signals compilation and caching DOM references tracked to effects
+  querySelector() {}
+  querySelectorAll() {}
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index f87cdd01..c7ea16da 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -311,6 +311,7 @@ export function parseJsx(moduleURL) {
   let constructorMembersSignals = new Map();
   let effects = [];
   let componentName;
+  let hasShadowRoot;
   let tree = acorn.Parser.extend(jsx()).parse(result.code, {
     ecmaVersion: 'latest',
     sourceType: 'module',
@@ -513,7 +514,7 @@ export function parseJsx(moduleURL) {
       ClassDeclaration(node) {
         // @ts-ignore
         if (node.superClass.name === 'HTMLElement') {
-          const hasShadowRoot =
+          hasShadowRoot =
             moduleContents.slice(node.body.start, node.body.end).indexOf('this.attachShadow(') > 0;
 
           for (const n1 of node.body.body) {
@@ -581,8 +582,9 @@ export function parseJsx(moduleURL) {
     );
 
     // here we do the following with all the work we've done so far tracking attributes, signals, effects, etc
-    // 1. setup static template functions and observed attributes that we've tracked so far to inject into the top of the class body
-    // 1. append all effects to the end of the connectedCallback function
+    // - setup static template functions and observed attributes that we've tracked so far to inject into the top of the class body
+    // - append all effects to the end of the connectedCallback function
+    // - setup cache references to all elements used in effects
     walk.simple(
       tree,
       {
@@ -595,14 +597,14 @@ export function parseJsx(moduleURL) {
             // TODO: do we even need this filter?
             const trackingAttrs = observedAttributes.filter((attr) => typeof attr === 'string');
 
-            console.log('statics', `${effects.map((effect) => effect.template).join('\n')}`);
+            console.log('effect', { effects });
             console.log('observedAttributes', trackingAttrs);
-            console.log('effects', effects.map((effect) => effect.template).join('\n'));
 
             // TODO: better way to determine value type, e,g. array, number, object, etc for `parseAttribute`?
             // have to wrap these `static` calls in a class here, otherwise we can't parse them standalone w/ acorn
             const staticContents = `
               class Stub {
+                ${effects.map((effect, idx) => `$el${idx};`).join('')}
                 ${effects.map((effect) => effect.template).join('\n')}
                 static get observedAttributes() {
                   return [${[...trackingAttrs]
@@ -635,22 +637,34 @@ export function parseJsx(moduleURL) {
           // TODO: detect for shadowRoot vs innerHTML here
           // TODO: we should cache these element queries instead querying on every effect trigger
           if (node.key.name === 'connectedCallback') {
+            const root = hasShadowRoot ? 'this.shadowRoot' : 'this';
+            const effectElements = effects
+              .map((effect, idx) => `this.$el${idx} = ${root}.querySelector('${effect.selector}');`)
+              .join('\n');
             const effectContents = effects
               .map(
-                (effect) => `
+                (effect, idx) => `                  
                   effect(() => {
-                    this.shadowRoot.querySelector('${effect.selector}').textContent = ${effect.expression}
+                    this.$el${idx}.textContent = ${effect.expression}
                   });\n
                 `,
               )
               .join('\n');
 
+            const effectElementsTree = acorn.parse(effectElements, {
+              ecmaVersion: 'latest',
+              sourceType: 'module',
+            });
             const effectContentsTree = acorn.parse(effectContents, {
               ecmaVersion: 'latest',
               sourceType: 'module',
             });
 
-            node.value.body.body = [...node.value.body.body, ...effectContentsTree.body];
+            node.value.body.body = [
+              ...node.value.body.body,
+              ...effectElementsTree.body,
+              ...effectContentsTree.body,
+            ];
           }
         },
       },
diff --git a/test/cases/jsx-inferred-observability/fixtures/effects.txt b/test/cases/jsx-inferred-observability/fixtures/effects.txt
index dcd0c7d4..7834d2ee 100644
--- a/test/cases/jsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/effects.txt
@@ -1,3 +1,4 @@
+this.$el0 = this.shadowRoot.querySelector('div > span');
 effect(() => {
-  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(this.count.get());
+  this.$el0.textContent = Counter.$$tmpl0(this.count.get());
 });     
\ No newline at end of file
diff --git a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
index 934abfc7..e7802c32 100644
--- a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
@@ -1 +1,2 @@
+$el0;
 static $$tmpl0 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/effects.txt b/test/cases/tsx-inferred-observability/fixtures/effects.txt
index dcd0c7d4..5fd1e897 100644
--- a/test/cases/tsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/effects.txt
@@ -1,3 +1,4 @@
+this.$el0 = this.querySelector('div > span');
 effect(() => {
-  this.shadowRoot.querySelector('div > span').textContent = Counter.$$tmpl0(this.count.get());
-});     
\ No newline at end of file
+  this.$el0.textContent = Counter.$$tmpl0(this.count.get());
+});
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/static-templates.txt b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
index 934abfc7..e7802c32 100644
--- a/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
@@ -1 +1,2 @@
+$el0;
 static $$tmpl0 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file

From 088f32dc578b2f24fdf0f1d2e31abfd4c9f7e00b Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 16 Feb 2026 18:45:50 -0500
Subject: [PATCH 14/28] feat: #232 clean up DOM shim

---
 .c8rc.json      |  2 +-
 src/dom-shim.js | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/.c8rc.json b/.c8rc.json
index 108d3f2a..f6c43737 100644
--- a/.c8rc.json
+++ b/.c8rc.json
@@ -9,7 +9,7 @@
 
   "statements": 90,
   "branches": 85,
-  "functions": 80,
+  "functions": 85,
   "lines": 90,
 
   "watermarks": {
diff --git a/src/dom-shim.js b/src/dom-shim.js
index 27ae82bb..a95c654b 100644
--- a/src/dom-shim.js
+++ b/src/dom-shim.js
@@ -149,6 +149,10 @@ class Node extends EventTarget {
       this.childNodes.push(textNode);
     }
   }
+
+  // minimal shim to support JSX <> Signals compilation and caching DOM references tracked to effects
+  querySelector() {}
+  querySelectorAll() {}
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Element
@@ -198,10 +202,6 @@ class Element extends Node {
       this.attrs?.push({ name, value });
     }
   }
-
-  // minimal shim to support JSX <> Signals compilation and caching DOM references tracked to effects
-  querySelector() {}
-  querySelectorAll() {}
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Document
@@ -257,10 +257,6 @@ class ShadowRoot extends DocumentFragment {
       `<template shadowrootmode="${this.mode}">${html}</template>`,
     ).childNodes;
   }
-
-  // minimal shim to support JSX <> Signals compilation and caching DOM references tracked to effects
-  querySelector() {}
-  querySelectorAll() {}
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement

From 4e3168777c507b1c0b6f342480a5216d885c4be8 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 18 Feb 2026 21:06:58 -0500
Subject: [PATCH 15/28] feat: #232 trim templates

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

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index c7ea16da..f60f12bb 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -182,7 +182,6 @@ function parseJsxElement(element, moduleContents = '', inferredObservability) {
             }
           }
         } else if (attribute.name.type === 'JSXIdentifier') {
-          // TODO: is there any difference between an attribute for an event handler vs a normal attribute?
           if (attribute.value) {
             const expression = attribute?.value?.expression;
             if (attribute.value.type === 'Literal') {
@@ -465,7 +464,6 @@ export function parseJsx(moduleURL) {
                       for (const c of child.children) {
                         // TODO: track attributes here too for the template
                         if (c.type === 'JSXText') {
-                          // TODO: trim text / line breaks?
                           template += c.value;
                         } else if (c.type === 'JSXExpressionContainer') {
                           // TODO: handle this references
@@ -482,7 +480,7 @@ export function parseJsx(moduleURL) {
                 if (template !== '' && signals.length > 0) {
                   const $$templ = `$$tmpl${effects.length}`;
                   // TODO: need to handle runtime assumption here with `_wcc`
-                  const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template}\`;`;
+                  const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template.trim()}\`;`;
                   // TODO: handle this references?
                   // https://www.github.com/ProjectEvergreen/wcc/issues/88
                   const expression = `${componentName}.${$$templ}(${signals.map((s) => `this.${s}.get()`).join(', ')});`;
@@ -582,9 +580,9 @@ export function parseJsx(moduleURL) {
     );
 
     // here we do the following with all the work we've done so far tracking attributes, signals, effects, etc
-    // - setup static template functions and observed attributes that we've tracked so far to inject into the top of the class body
-    // - append all effects to the end of the connectedCallback function
-    // - setup cache references to all elements used in effects
+    // 1. setup static template functions and observed attributes that we've tracked so far to inject into the top of the class body
+    // 2. append all effects to the end of the connectedCallback function
+    // 3. setup cache references to all elements used in effects
     walk.simple(
       tree,
       {

From 3ca7dd3e186e10947c73e1d6a8e2b871c68653e4 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 18 Feb 2026 22:45:49 -0500
Subject: [PATCH 16/28] chore: fix lock file

---
 package-lock.json | 691 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 566 insertions(+), 125 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9bc8ed43..d02d07ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -138,11 +138,14 @@
       }
     },
     "node_modules/@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/@cacheable/memory": {
       "version": "2.0.7",
@@ -212,9 +215,9 @@
       }
     },
     "node_modules/@csstools/css-syntax-patches-for-csstree": {
-      "version": "1.0.26",
-      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.26.tgz",
-      "integrity": "sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==",
+      "version": "1.0.27",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.27.tgz",
+      "integrity": "sha512-sxP33Jwg1bviSUXAV43cVYdmjt2TLnLXNqCWl9xmxHawWVjGz/kEbdkr7F9pxJNBN2Mh+dq0crgItbW6tQvyow==",
       "dev": true,
       "funding": [
         {
@@ -296,9 +299,9 @@
       }
     },
     "node_modules/@double-great/stylelint-a11y": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/@double-great/stylelint-a11y/-/stylelint-a11y-3.4.1.tgz",
-      "integrity": "sha512-Z9wH2Z2yXgTvztZsm4b9E2up5Ri6VNRg4dciGmZWejH3yO+d42prLwVbWoXIngc62gWTAymzMyAht1gkaZQ9Pw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@double-great/stylelint-a11y/-/stylelint-a11y-3.4.3.tgz",
+      "integrity": "sha512-AhAMyxl/w/wQvKdY1jdWDkF8BEgt6DKEZNGNyecJnKzY/MEq9iA1o63qwPtPTPHFN1jQjp5Vnq0fySxlfFw3fA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -322,6 +325,74 @@
         "url": "https://github.com/sponsors/JounQin"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@esbuild/darwin-arm64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
@@ -339,6 +410,363 @@
         "node": ">=18"
       }
     },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -1569,9 +1997,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.19.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.9.tgz",
-      "integrity": "sha512-PD03/U8g1F9T9MI+1OBisaIARhSzeidsUjQaf51fOxrfjeiKN9bLVO06lHuHYjxdnqLWJijJHfqXPSJri2EM2A==",
+      "version": "22.19.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.11.tgz",
+      "integrity": "sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1628,17 +2056,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
-      "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
+      "integrity": "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.54.0",
-        "@typescript-eslint/type-utils": "8.54.0",
-        "@typescript-eslint/utils": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/type-utils": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -1651,8 +2079,8 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.54.0",
-        "eslint": "^8.57.0 || ^9.0.0",
+        "@typescript-eslint/parser": "^8.56.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
@@ -1667,16 +2095,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
-      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.0.tgz",
+      "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.54.0",
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0",
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -1687,19 +2115,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
-      "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.0.tgz",
+      "integrity": "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.54.0",
-        "@typescript-eslint/types": "^8.54.0",
+        "@typescript-eslint/tsconfig-utils": "^8.56.0",
+        "@typescript-eslint/types": "^8.56.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -1714,14 +2142,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
-      "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.0.tgz",
+      "integrity": "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0"
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1732,9 +2160,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
-      "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.0.tgz",
+      "integrity": "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1749,15 +2177,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
-      "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.0.tgz",
+      "integrity": "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0",
-        "@typescript-eslint/utils": "8.54.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -1769,14 +2197,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
-      "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.0.tgz",
+      "integrity": "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1788,16 +2216,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
-      "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.0.tgz",
+      "integrity": "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.54.0",
-        "@typescript-eslint/tsconfig-utils": "8.54.0",
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/visitor-keys": "8.54.0",
+        "@typescript-eslint/project-service": "8.56.0",
+        "@typescript-eslint/tsconfig-utils": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/visitor-keys": "8.56.0",
         "debug": "^4.4.3",
         "minimatch": "^9.0.5",
         "semver": "^7.7.3",
@@ -1842,16 +2270,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
-      "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.0.tgz",
+      "integrity": "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.54.0",
-        "@typescript-eslint/types": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0"
+        "@typescript-eslint/scope-manager": "8.56.0",
+        "@typescript-eslint/types": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1861,19 +2289,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
-      "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.0.tgz",
+      "integrity": "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.54.0",
-        "eslint-visitor-keys": "^4.2.1"
+        "@typescript-eslint/types": "8.56.0",
+        "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1883,6 +2311,19 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@ungap/promise-all-settled": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz",
@@ -1975,16 +2416,6 @@
         }
       }
     },
-    "node_modules/@vitest/coverage-v8/node_modules/@bcoe/v8-coverage": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
-      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@vitest/expect": {
       "version": "4.0.18",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
@@ -2478,13 +2909,6 @@
         "@types/estree": "^1.0.0"
       }
     },
-    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
-      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -2580,6 +3004,13 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/babel-code-frame/node_modules/js-tokens": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+      "integrity": "sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/babel-code-frame/node_modules/strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -2815,6 +3246,13 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/c8/node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cacheable": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.3.2.tgz",
@@ -3650,13 +4088,13 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
-      "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.3.3.tgz",
+      "integrity": "sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=12 || >=16"
+        "node": ">=12"
       }
     },
     "node_modules/css-select": {
@@ -5231,9 +5669,9 @@
       }
     },
     "node_modules/get-east-asian-width": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
-      "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz",
+      "integrity": "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5704,9 +6142,9 @@
       }
     },
     "node_modules/hashery": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.4.0.tgz",
-      "integrity": "sha512-Wn2i1In6XFxl8Az55kkgnFRiAlIAushzh26PTjL2AKtQcEfXrcLa7Hn5QOWGZEf3LU057P9TwwZjFyxfS1VuvQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.5.0.tgz",
+      "integrity": "sha512-nhQ6ExaOIqti2FDWoEMWARUqIKyjr2VcZzXShrI+A3zpeiuPWzx6iPftt44LhP74E5sW36B75N6VHbvRtpvO6Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7000,9 +7438,9 @@
       }
     },
     "node_modules/js-tokens": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha512-RjTcuD4xjtthQkaWH7dFlH85L+QaVtSoOyGdZ3g6HFhS9dFNDfLyqgm2NFe2X6cQpeFmt0452FJjFG5UameExg==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
       "dev": true,
       "license": "MIT"
     },
@@ -11078,9 +11516,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
-      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -12269,11 +12707,14 @@
       }
     },
     "node_modules/smob": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
-      "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.6.1.tgz",
+      "integrity": "sha512-KAkBqZl3c2GvNgNhcoyJae1aKldDW0LO279wF9bk1PnluRTETKBq0WyzRXxEhoQLk56yHaOY4JCBEKDuJIET5g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
     },
     "node_modules/smpltmpl": {
       "version": "1.0.2",
@@ -12402,14 +12843,14 @@
       }
     },
     "node_modules/string-width": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.1.tgz",
-      "integrity": "sha512-KpqHIdDL9KwYk22wEOg/VIqYbrnLeSApsKT/bSj6Ez7pn3CftUiLAv2Lccpq1ALcpLV9UX1Ppn92npZWu2w/aw==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.0.tgz",
+      "integrity": "sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "get-east-asian-width": "^1.3.0",
-        "strip-ansi": "^7.1.0"
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
       },
       "engines": {
         "node": ">=20"
@@ -12792,9 +13233,9 @@
       }
     },
     "node_modules/table/node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13317,16 +13758,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.54.0.tgz",
-      "integrity": "sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.56.0.tgz",
+      "integrity": "sha512-c7toRLrotJ9oixgdW7liukZpsnq5CZ7PuKztubGYlNppuTqhIoWfhgHo/7EU0v06gS2l/x0i2NEFK1qMIf0rIg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.54.0",
-        "@typescript-eslint/parser": "8.54.0",
-        "@typescript-eslint/typescript-estree": "8.54.0",
-        "@typescript-eslint/utils": "8.54.0"
+        "@typescript-eslint/eslint-plugin": "8.56.0",
+        "@typescript-eslint/parser": "8.56.0",
+        "@typescript-eslint/typescript-estree": "8.56.0",
+        "@typescript-eslint/utils": "8.56.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -13336,7 +13777,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^8.57.0 || ^9.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },

From 6c3fc8f3465de6380e88a905e2fa0473cc6e8a7f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 21 Feb 2026 17:16:48 -0500
Subject: [PATCH 17/28] feat: #232 refactor shadow root detection

---
 src/jsx-loader.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index f60f12bb..1cc81b13 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -321,6 +321,7 @@ export function parseJsx(moduleURL) {
   // 1. if `inferredObservability` is set
   // 2. get the name of the component class for `static` references
   // 3, track observed attributes from `this` references in the template
+  // 4. track if Shadow DOM is being used
   walk.simple(
     tree,
     {
@@ -355,6 +356,9 @@ export function parseJsx(moduleURL) {
       ClassDeclaration(node) {
         // @ts-ignore
         if (node.superClass.name === 'HTMLElement') {
+          hasShadowRoot =
+            moduleContents.slice(node.body.start, node.body.end).indexOf('this.attachShadow(') > 0;
+
           for (const n1 of node.body.body) {
             if (n1.type === 'MethodDefinition') {
               // @ts-ignore
@@ -512,9 +516,6 @@ export function parseJsx(moduleURL) {
       ClassDeclaration(node) {
         // @ts-ignore
         if (node.superClass.name === 'HTMLElement') {
-          hasShadowRoot =
-            moduleContents.slice(node.body.start, node.body.end).indexOf('this.attachShadow(') > 0;
-
           for (const n1 of node.body.body) {
             if (n1.type === 'MethodDefinition') {
               // @ts-ignore
@@ -632,7 +633,6 @@ export function parseJsx(moduleURL) {
           }
         },
         MethodDefinition(node) {
-          // TODO: detect for shadowRoot vs innerHTML here
           // TODO: we should cache these element queries instead querying on every effect trigger
           if (node.key.name === 'connectedCallback') {
             const root = hasShadowRoot ? 'this.shadowRoot' : 'this';

From a41e6deebdda16b49820e65b2b261c6431bf801f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 21 Feb 2026 19:42:41 -0500
Subject: [PATCH 18/28] feat: #232 handle reactive attributes and tracking
 reactivity across multiple top level JSXElements

---
 docs/components/sandbox/signal-counter.css    |   7 +
 docs/components/sandbox/signal-counter.jsx    |   6 +-
 src/jsx-loader.js                             | 151 +++++++++++++-----
 .../fixtures/effects.txt                      |  13 +-
 .../fixtures/static-templates.txt             |   3 +-
 .../jsx-inferred-obsevability.spec.js         |   4 +-
 .../src/counter.jsx                           |   4 +-
 .../fixtures/effects.txt                      |   3 +
 .../src/counter.tsx                           |   4 +-
 .../tsx-inferred-obsevability.spec.js         |   3 +-
 10 files changed, 147 insertions(+), 51 deletions(-)
 create mode 100644 docs/components/sandbox/signal-counter.css

diff --git a/docs/components/sandbox/signal-counter.css b/docs/components/sandbox/signal-counter.css
new file mode 100644
index 00000000..e5cdc9ec
--- /dev/null
+++ b/docs/components/sandbox/signal-counter.css
@@ -0,0 +1,7 @@
+.even {
+  color: green;
+}
+
+.odd {
+  color: red;
+}
diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index 5df6932b..5d761c07 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -1,3 +1,5 @@
+import sheet from './signal-counter.css' with { type: 'css' };
+
 export const inferredObservability = true;
 
 export default class SignalCounter extends HTMLElement {
@@ -14,6 +16,8 @@ export default class SignalCounter extends HTMLElement {
       });
       this.render();
     }
+
+    this.shadowRoot.adoptedStyleSheets = [sheet];
   }
 
   increment() {
@@ -38,7 +42,7 @@ export default class SignalCounter extends HTMLElement {
         {/* TODO: inline version breaks with effects */}
         {/* <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button> */}
         <button onclick={this.double}>Double (++)</button>
-        <span>
+        <span class={parity.get()}>
           The count is {count.get()} ({parity.get()})
         </span>
       </div>
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 1cc81b13..875eeacc 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -294,6 +294,35 @@ function parseJsxElement(element, moduleContents = '', inferredObservability) {
   return string;
 }
 
+function generateEffectsForReactiveElement(reactiveElement, idx) {
+  const { effect, attributes } = reactiveElement;
+  let contents = '';
+
+  if (reactiveElement.effect?.expression) {
+    contents += `
+      effect(() => {
+        this.$el${idx}.textContent = ${effect.expression}
+      });\n
+    `;
+  }
+
+  if (attributes.length > 0) {
+    const attributeUpdates = attributes
+      .map((attr) => {
+        return `this.$el${idx}.setAttribute('${attr.name}', this.${attr.value}.get())`;
+      })
+      .join('\n');
+
+    contents += `
+      effect(() => {
+        ${attributeUpdates}
+      });\n
+    `;
+  }
+
+  return contents;
+}
+
 export function parseJsx(moduleURL) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
   const result = transform(moduleContents, {
@@ -308,7 +337,7 @@ export function parseJsx(moduleURL) {
   // TODO: "merge" observedAttributes tracking with constructor tracking
   let observedAttributes = [];
   let constructorMembersSignals = new Map();
-  let effects = [];
+  let reactiveElements = [];
   let componentName;
   let hasShadowRoot;
   let tree = acorn.Parser.extend(jsx()).parse(result.code, {
@@ -431,7 +460,6 @@ export function parseJsx(moduleURL) {
 
     // this scans for signals usage within the template and builds up a reactive list of templates + effects
     // (could this be done during the transformation pass instead of having to generate and re-parse the module again?)
-    // - TODO: attributes
     // - TODO: recursive scanning for nested components
     walk.simple(
       tree,
@@ -442,58 +470,101 @@ export function parseJsx(moduleURL) {
               const n = node.value.body.body[n2];
               if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
                 console.log('ENTERING TEMPLATE AT =>', n.argument.openingElement.name.name);
-                let template = '';
-                let signals = [];
-                let selector;
 
                 for (const child of n.argument.children) {
                   // TODO: need to handle recursion
                   if (child.type === 'JSXText') {
                     // console.log('TEXT NODE', { child })
-                    // TODO: track top level reactivity
+                    // TODO: track top level reactivity for text nodes?
                   } else if (child.type === 'JSXElement') {
                     console.log('ENTERING CHILD ELEMENT', child.openingElement.name.name);
+
                     // TODO: I think we are only checking for State, I think we also need to handle Computeds (by themselves) here as well
-                    const hasReactivity = child.children.some(
+                    const hasReactiveTemplate = child.children.some(
                       (c) =>
                         c.type === 'JSXExpressionContainer' &&
                         c.expression?.type === 'CallExpression' &&
                         c.expression?.callee?.type === 'MemberExpression' &&
                         c.expression?.callee?.property?.name === 'get',
                     );
+                    const hasReactiveAttributes = child.openingElement.attributes.some(
+                      (a) =>
+                        a.value.type === 'JSXExpressionContainer' &&
+                        a.value.expression?.type === 'CallExpression' &&
+                        a.value.expression?.callee?.type === 'MemberExpression' &&
+                        a.value.expression?.callee?.property?.name === 'get',
+                    );
+
+                    if (hasReactiveAttributes || hasReactiveAttributes) {
+                      reactiveElements.push({
+                        selector: `${n.argument.openingElement.name.name} > ${child.openingElement.name.name}`,
+                        template: {},
+                        attributes: [],
+                      });
+                    }
+
+                    if (hasReactiveTemplate) {
+                      console.log(
+                        'CHILD ELEMENT HAS TEXT CONTENT REACTIVITY',
+                        child.openingElement.name.name,
+                      );
+                      const signals = [];
+                      let template = '';
 
-                    if (hasReactivity) {
-                      console.log('CHILD ELEMENT HAS REACTIVITY', child.openingElement.name.name);
-                      selector = `${n.argument.openingElement.name.name} > ${child.openingElement.name.name}`;
                       for (const c of child.children) {
-                        // TODO: track attributes here too for the template
                         if (c.type === 'JSXText') {
                           template += c.value;
                         } else if (c.type === 'JSXExpressionContainer') {
-                          // TODO: handle this references
+                          // TODO: handle this references?
                           // https://github.com/ProjectEvergreen/wcc/issues/88
                           const { object } = c.expression.callee || {};
                           template += `$\{${object.name}}`;
                           signals.push(object.name);
                         }
                       }
+
+                      if (template !== '' && signals.length > 0) {
+                        const $$templ = `$$tmpl${reactiveElements.length - 1}`;
+                        // TODO: need to handle runtime assumption here with `_wcc`
+                        const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template.trim()}\`;`;
+                        // TODO: handle this references?
+                        // https://www.github.com/ProjectEvergreen/wcc/issues/88
+                        const expression = `${componentName}.${$$templ}(${signals.map((s) => `this.${s}.get()`).join(', ')});`;
+
+                        reactiveElements[reactiveElements.length - 1].effect = {
+                          template: staticTemplate,
+                          expression,
+                        };
+                      }
                     }
-                  }
-                }
 
-                if (template !== '' && signals.length > 0) {
-                  const $$templ = `$$tmpl${effects.length}`;
-                  // TODO: need to handle runtime assumption here with `_wcc`
-                  const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template.trim()}\`;`;
-                  // TODO: handle this references?
-                  // https://www.github.com/ProjectEvergreen/wcc/issues/88
-                  const expression = `${componentName}.${$$templ}(${signals.map((s) => `this.${s}.get()`).join(', ')});`;
-
-                  effects.push({
-                    template: staticTemplate,
-                    expression,
-                    selector,
-                  });
+                    if (hasReactiveAttributes) {
+                      console.log(
+                        'CHILD ELEMENT HAS ATTRIBUTE REACTIVITY',
+                        child.openingElement.name.name,
+                      );
+                      for (const attr of child.openingElement.attributes) {
+                        if (
+                          attr.value.type === 'JSXExpressionContainer' &&
+                          attr.value.expression?.type === 'CallExpression' &&
+                          attr.value.expression?.callee?.type === 'MemberExpression' &&
+                          attr.value.expression?.callee?.property?.name === 'get'
+                        ) {
+                          const isThisExpression =
+                            attr.value.expression?.callee?.object?.object?.type ===
+                            'ThisExpression';
+                          const value = isThisExpression
+                            ? attr.value.expression?.callee?.object?.property.name
+                            : attr.value.expression?.callee?.object.name;
+
+                          reactiveElements[reactiveElements.length - 1].attributes.push({
+                            name: attr.name.name,
+                            value,
+                          });
+                        }
+                      }
+                    }
+                  }
                 }
               }
             }
@@ -577,7 +648,7 @@ export function parseJsx(moduleURL) {
   if (inferredObservability && observedAttributes.length > 0 && !hasOwnObservedAttributes) {
     console.log(
       'Adding static observedAttributes and attributeChangedCallback for inferredObservability',
-      { effects },
+      { reactiveElements },
     );
 
     // here we do the following with all the work we've done so far tracking attributes, signals, effects, etc
@@ -596,15 +667,18 @@ export function parseJsx(moduleURL) {
             // TODO: do we even need this filter?
             const trackingAttrs = observedAttributes.filter((attr) => typeof attr === 'string');
 
-            console.log('effect', { effects });
+            console.log('effect', { reactiveElements });
             console.log('observedAttributes', trackingAttrs);
 
             // TODO: better way to determine value type, e,g. array, number, object, etc for `parseAttribute`?
             // have to wrap these `static` calls in a class here, otherwise we can't parse them standalone w/ acorn
             const staticContents = `
               class Stub {
-                ${effects.map((effect, idx) => `$el${idx};`).join('')}
-                ${effects.map((effect) => effect.template).join('\n')}
+                ${reactiveElements.map((el, idx) => `$el${idx};`).join('')}
+                ${reactiveElements
+                  .filter((el) => el.effect?.template)
+                  .map((el) => el.effect.template)
+                  .join('\n')}
                 static get observedAttributes() {
                   return [${[...trackingAttrs]
                     .filter((attr) => constructorMembersSignals.get(attr)?.isState)
@@ -633,20 +707,13 @@ export function parseJsx(moduleURL) {
           }
         },
         MethodDefinition(node) {
-          // TODO: we should cache these element queries instead querying on every effect trigger
           if (node.key.name === 'connectedCallback') {
             const root = hasShadowRoot ? 'this.shadowRoot' : 'this';
-            const effectElements = effects
-              .map((effect, idx) => `this.$el${idx} = ${root}.querySelector('${effect.selector}');`)
+            const effectElements = reactiveElements
+              .map((el, idx) => `this.$el${idx} = ${root}.querySelector('${el.selector}');`)
               .join('\n');
-            const effectContents = effects
-              .map(
-                (effect, idx) => `                  
-                  effect(() => {
-                    this.$el${idx}.textContent = ${effect.expression}
-                  });\n
-                `,
-              )
+            const effectContents = reactiveElements
+              .map((element, idx) => generateEffectsForReactiveElement(element, idx))
               .join('\n');
 
             const effectElementsTree = acorn.parse(effectElements, {
diff --git a/test/cases/jsx-inferred-observability/fixtures/effects.txt b/test/cases/jsx-inferred-observability/fixtures/effects.txt
index 7834d2ee..f637c1a4 100644
--- a/test/cases/jsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/effects.txt
@@ -1,4 +1,11 @@
-this.$el0 = this.shadowRoot.querySelector('div > span');
+this.$el0 = this.shadowRoot.querySelector('div > wcc-badge');
+this.$el1 = this.shadowRoot.querySelector('div > span');
 effect(() => {
-  this.$el0.textContent = Counter.$$tmpl0(this.count.get());
-});     
\ No newline at end of file
+  this.$el0.setAttribute('count', this.count.get());
+});
+effect(() => {
+  this.$el1.textContent = Counter.$$tmpl1(this.count.get());
+});
+effect(() => {
+  this.$el1.setAttribute('data-count', this.count.get());
+});
\ No newline at end of file
diff --git a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
index e7802c32..1b6ebab5 100644
--- a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
@@ -1,2 +1,3 @@
 $el0;
-static $$tmpl0 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file
+$el1;
+static $$tmpl1 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file
diff --git a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
index dc64cdc8..80c39915 100644
--- a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
+++ b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
@@ -86,10 +86,11 @@ describe('Run WCC For ', function () {
         const badge = counterDom.querySelector('wcc-badge');
         const conditionalClassSpan = badge.querySelector('span[class="unmet"]'); // conditional class rendering
 
+        expect(badge.getAttribute('count')).to.equal('0');
         expect(conditionalClassSpan.textContent.trim()).to.equal('0');
       });
 
-      // <span id="one-deep">Top level count is {count.get()}</span>
+      // <span id="one-deep" data-count={count.get()}>Top level count is {count.get()}</span>
       it('should have the expected value for the nested count signal', () => {
         const counterDom = new JSDOM(
           dom.window.document.querySelector('wcc-counter-jsx template[shadowrootmode="open"]')
@@ -98,6 +99,7 @@ describe('Run WCC For ', function () {
         const span = counterDom.querySelector('span#one-deep');
 
         expect(span.textContent.trim()).to.equal('Top level count is 0');
+        expect(span.getAttribute('data-count')).to.equal('0');
       });
 
       // <span>You have clicked{' '}<span class="red" id="expression">{count.get()}</span>times</span>
diff --git a/test/cases/jsx-inferred-observability/src/counter.jsx b/test/cases/jsx-inferred-observability/src/counter.jsx
index 890eac76..f9f18089 100644
--- a/test/cases/jsx-inferred-observability/src/counter.jsx
+++ b/test/cases/jsx-inferred-observability/src/counter.jsx
@@ -42,7 +42,9 @@ export default class Counter extends HTMLElement {
           {' '}
           - (inline state update)
         </button>
-        <span id="one-deep">Top level count is {count.get()}</span>
+        <span id="one-deep" data-count={count.get()}>
+          Top level count is {count.get()}
+        </span>
         {/* TODO: test for nested signals */}
         <span id="two-deep">
           You have clicked{' '}
diff --git a/test/cases/tsx-inferred-observability/fixtures/effects.txt b/test/cases/tsx-inferred-observability/fixtures/effects.txt
index 5fd1e897..46145b5b 100644
--- a/test/cases/tsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/effects.txt
@@ -1,4 +1,7 @@
 this.$el0 = this.querySelector('div > span');
 effect(() => {
   this.$el0.textContent = Counter.$$tmpl0(this.count.get());
+});
+effect(() => {
+  this.$el0.setAttribute('data-count', this.count.get());
 });
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/src/counter.tsx b/test/cases/tsx-inferred-observability/src/counter.tsx
index 0ac70806..5c785cd4 100644
--- a/test/cases/tsx-inferred-observability/src/counter.tsx
+++ b/test/cases/tsx-inferred-observability/src/counter.tsx
@@ -35,7 +35,9 @@ export default class Counter extends HTMLElement {
           {' '}
           - (inline state update)
         </button>
-        <span id="one-deep">Top level count is {count.get()}</span>
+        <span id="one-deep" data-count={count.get()}>
+          Top level count is {count.get()}
+        </span>
         {/* TODO: test for nested signals */}
         <span id="two-deep">
           You have clicked{' '}
diff --git a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
index c746d0d3..76420991 100644
--- a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
+++ b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
@@ -76,11 +76,12 @@ describe('Run WCC For ', function () {
         expect(actual).to.contain(expected);
       });
 
-      // <span id="one-deep">Top level count is {count.get()}</span>
+      // <span id="one-deep" data-count={count.get()}>Top level count is {count.get()}</span>
       it('should have the expected value for the nested count signal', () => {
         const span = dom.window.document.querySelector('wcc-counter-tsx span#one-deep');
 
         expect(span.textContent.trim()).to.equal('Top level count is 0');
+        expect(span.getAttribute('data-count')).to.equal('0');
       });
 
       // <span>You have clicked{' '}<span class="red" id="expression">{count.get()}</span>times</span>

From 5808688ca4e7993a6a56b218575f3c63d82e0309 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 21 Feb 2026 19:58:50 -0500
Subject: [PATCH 19/28] feat: #232 fix reactivity detection

---
 src/jsx-loader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 875eeacc..06ae595d 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -495,7 +495,7 @@ export function parseJsx(moduleURL) {
                         a.value.expression?.callee?.property?.name === 'get',
                     );
 
-                    if (hasReactiveAttributes || hasReactiveAttributes) {
+                    if (hasReactiveTemplate || hasReactiveAttributes) {
                       reactiveElements.push({
                         selector: `${n.argument.openingElement.name.name} > ${child.openingElement.name.name}`,
                         template: {},

From cc2da83e871aef527996931f02024135e0648203 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 21 Feb 2026 19:59:17 -0500
Subject: [PATCH 20/28] feat: #232 update component example use cases

---
 docs/components/sandbox/signal-counter.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index 5d761c07..702455cd 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -7,6 +7,7 @@ export default class SignalCounter extends HTMLElement {
     super();
     this.count = new Signal.State(0);
     this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
+    this.isLarge = new Signal.Computed(() => (this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going'));
   }
 
   connectedCallback() {
@@ -33,7 +34,7 @@ export default class SignalCounter extends HTMLElement {
   }
 
   render() {
-    const { count, parity } = this;
+    const { count, parity, isLarge } = this;
 
     return (
       <div>
@@ -45,6 +46,7 @@ export default class SignalCounter extends HTMLElement {
         <span class={parity.get()}>
           The count is {count.get()} ({parity.get()})
         </span>
+        <p data-count={count.get()}>{isLarge.get()}</p>
       </div>
     );
   }

From b0243eb8591c67b3668edca104cad1fe8d23f3b7 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 21 Feb 2026 20:06:57 -0500
Subject: [PATCH 21/28] feat: #232 update component example use cases

---
 docs/components/sandbox/signal-counter.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index 702455cd..19e0a4b1 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -7,7 +7,9 @@ export default class SignalCounter extends HTMLElement {
     super();
     this.count = new Signal.State(0);
     this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
-    this.isLarge = new Signal.Computed(() => (this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going'));
+    this.isLarge = new Signal.Computed(() =>
+      this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going...',
+    );
   }
 
   connectedCallback() {

From cbde7f64f205f583f7883b976bacdaf11a8a0a3b Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 21 Feb 2026 20:44:48 -0500
Subject: [PATCH 22/28] feat: #232 support tracking multiple of the same top
 level tags

---
 docs/components/sandbox/signal-counter.jsx    |  1 +
 src/jsx-loader.js                             | 19 ++++++++++++-------
 .../fixtures/effects.txt                      |  8 ++++++--
 .../fixtures/static-templates.txt             |  4 +++-
 .../jsx-inferred-obsevability.spec.js         | 11 +++++++++++
 .../src/counter.jsx                           |  3 ++-
 .../fixtures/effects.txt                      |  6 +++++-
 .../fixtures/static-templates.txt             |  4 +++-
 .../src/counter.tsx                           |  5 ++++-
 .../tsx-inferred-obsevability.spec.js         |  7 +++++++
 10 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index 19e0a4b1..807170b1 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -48,6 +48,7 @@ export default class SignalCounter extends HTMLElement {
         <span class={parity.get()}>
           The count is {count.get()} ({parity.get()})
         </span>
+        <span>{isLarge.get()}</span>
         <p data-count={count.get()}>{isLarge.get()}</p>
       </div>
     );
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 06ae595d..1aab6aa9 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -469,7 +469,9 @@ export function parseJsx(moduleURL) {
             for (const n2 in node.value.body.body) {
               const n = node.value.body.body[n2];
               if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
-                console.log('ENTERING TEMPLATE AT =>', n.argument.openingElement.name.name);
+                const parentTag = n.argument.openingElement.name.name;
+                console.log('ENTERING TEMPLATE AT =>', { parentTag });
+                const children = [];
 
                 for (const child of n.argument.children) {
                   // TODO: need to handle recursion
@@ -477,7 +479,8 @@ export function parseJsx(moduleURL) {
                     // console.log('TEXT NODE', { child })
                     // TODO: track top level reactivity for text nodes?
                   } else if (child.type === 'JSXElement') {
-                    console.log('ENTERING CHILD ELEMENT', child.openingElement.name.name);
+                    const childTag = child.openingElement.name.name;
+                    console.log('ENTERING CHILD ELEMENT', { childTag });
 
                     // TODO: I think we are only checking for State, I think we also need to handle Computeds (by themselves) here as well
                     const hasReactiveTemplate = child.children.some(
@@ -496,18 +499,20 @@ export function parseJsx(moduleURL) {
                     );
 
                     if (hasReactiveTemplate || hasReactiveAttributes) {
+                      if (!children[childTag]) {
+                        children[childTag] = [];
+                      }
+
+                      children[childTag].push(childTag);
                       reactiveElements.push({
-                        selector: `${n.argument.openingElement.name.name} > ${child.openingElement.name.name}`,
+                        selector: `${parentTag} > ${childTag}:nth-of-type(${children[childTag].length})`,
                         template: {},
                         attributes: [],
                       });
                     }
 
                     if (hasReactiveTemplate) {
-                      console.log(
-                        'CHILD ELEMENT HAS TEXT CONTENT REACTIVITY',
-                        child.openingElement.name.name,
-                      );
+                      console.log('CHILD ELEMENT HAS TEXT CONTENT REACTIVITY', { childTag });
                       const signals = [];
                       let template = '';
 
diff --git a/test/cases/jsx-inferred-observability/fixtures/effects.txt b/test/cases/jsx-inferred-observability/fixtures/effects.txt
index f637c1a4..aa8a7685 100644
--- a/test/cases/jsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/effects.txt
@@ -1,5 +1,6 @@
-this.$el0 = this.shadowRoot.querySelector('div > wcc-badge');
-this.$el1 = this.shadowRoot.querySelector('div > span');
+this.$el0 = this.shadowRoot.querySelector('div > wcc-badge:nth-of-type(1)');
+this.$el1 = this.shadowRoot.querySelector('div > span:nth-of-type(1)');
+this.$el2 = this.shadowRoot.querySelector('div > span:nth-of-type(2)');
 effect(() => {
   this.$el0.setAttribute('count', this.count.get());
 });
@@ -8,4 +9,7 @@ effect(() => {
 });
 effect(() => {
   this.$el1.setAttribute('data-count', this.count.get());
+});
+effect(() => {
+  this.$el2.textContent = Counter.$$tmpl2(this.parity.get());
 });
\ No newline at end of file
diff --git a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
index 1b6ebab5..888c44c9 100644
--- a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
@@ -1,3 +1,5 @@
 $el0;
 $el1;
-static $$tmpl1 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file
+$el2;
+static $$tmpl1 = count => _wcc`Top level count is ${count}`;
+static $$tmpl2 = parity => _wcc`Parity is: ${parity}`;
\ No newline at end of file
diff --git a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
index 80c39915..8159f520 100644
--- a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
+++ b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
@@ -112,6 +112,17 @@ describe('Run WCC For ', function () {
 
         expect(span.textContent.trim()).to.equal('0');
       });
+
+      // <span id="three-deep">Parity is: {parity.get()}</span>
+      it('should have the expected value for a signal used in another tag with the same name', () => {
+        const counterDom = new JSDOM(
+          dom.window.document.querySelector('wcc-counter-jsx template[shadowrootmode="open"]')
+            .innerHTML,
+        ).window.document;
+        const span = counterDom.querySelector(' span#three-deep');
+
+        expect(span.textContent.trim()).to.equal('Parity is: even');
+      });
     });
   });
 });
diff --git a/test/cases/jsx-inferred-observability/src/counter.jsx b/test/cases/jsx-inferred-observability/src/counter.jsx
index f9f18089..4f820079 100644
--- a/test/cases/jsx-inferred-observability/src/counter.jsx
+++ b/test/cases/jsx-inferred-observability/src/counter.jsx
@@ -28,7 +28,7 @@ export default class Counter extends HTMLElement {
   }
 
   render() {
-    const { count, highlight } = this;
+    const { count, highlight, parity } = this;
 
     return (
       <div>
@@ -53,6 +53,7 @@ export default class Counter extends HTMLElement {
           </span>{' '}
           times
         </span>
+        <span id="three-deep">Parity is: {parity.get()}</span>
         <button onclick={() => count.set(count.get() + 1)}> + (inline state update)</button>
         <button onclick={this.increment}> + (function reference)</button>
       </div>
diff --git a/test/cases/tsx-inferred-observability/fixtures/effects.txt b/test/cases/tsx-inferred-observability/fixtures/effects.txt
index 46145b5b..b2d5ca3f 100644
--- a/test/cases/tsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/effects.txt
@@ -1,7 +1,11 @@
-this.$el0 = this.querySelector('div > span');
+this.$el0 = this.querySelector('div > span:nth-of-type(1)');
+this.$el1 = this.querySelector('div > span:nth-of-type(2)');
 effect(() => {
   this.$el0.textContent = Counter.$$tmpl0(this.count.get());
 });
 effect(() => {
   this.$el0.setAttribute('data-count', this.count.get());
+});
+effect(() => {
+  this.$el1.textContent = Counter.$$tmpl1(this.parity.get());
 });
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/static-templates.txt b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
index e7802c32..61e4cd2d 100644
--- a/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
@@ -1,2 +1,4 @@
 $el0;
-static $$tmpl0 = count => _wcc`Top level count is ${count}`;
\ No newline at end of file
+$el1;
+static $$tmpl0 = count => _wcc`Top level count is ${count}`;
+static $$tmpl1 = parity => _wcc`Parity is: ${parity}`;
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/src/counter.tsx b/test/cases/tsx-inferred-observability/src/counter.tsx
index 5c785cd4..2be3b171 100644
--- a/test/cases/tsx-inferred-observability/src/counter.tsx
+++ b/test/cases/tsx-inferred-observability/src/counter.tsx
@@ -3,10 +3,12 @@ export const inferredObservability = true;
 export default class Counter extends HTMLElement {
   // TODO: get Signal types for this
   count: any;
+  parity: any;
 
   constructor() {
     super();
     this.count = new Signal.State(0);
+    this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
   }
 
   increment() {
@@ -22,7 +24,7 @@ export default class Counter extends HTMLElement {
   }
 
   render() {
-    const { count } = this;
+    const { count, parity } = this;
 
     return (
       <div>
@@ -46,6 +48,7 @@ export default class Counter extends HTMLElement {
           </span>{' '}
           times
         </span>
+        <span id="three-deep">Parity is: {parity.get()}</span>
         <button onclick={() => count.set(count.get() + 1)}> + (inline state update)</button>
         <button onclick={this.increment}> + (function reference)</button>
       </div>
diff --git a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
index 76420991..73009f36 100644
--- a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
+++ b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
@@ -92,6 +92,13 @@ describe('Run WCC For ', function () {
 
         expect(span.textContent.trim()).to.equal('0');
       });
+
+      // <span id="three-deep">Parity is: {parity.get()}</span>
+      it('should have the expected value for a signal used in another tag with the same name', () => {
+        const span = dom.window.document.querySelector('wcc-counter-tsx span#three-deep');
+
+        expect(span.textContent.trim()).to.equal('Parity is: even');
+      });
     });
   });
 });

From f3ccd3e3efb63e70752450be0522d99c6df609e1 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sun, 22 Feb 2026 20:04:37 -0500
Subject: [PATCH 23/28] feat: #232 correctly track reactive elements in order

---
 docs/components/sandbox/signal-counter.jsx            |  1 +
 src/jsx-loader.js                                     | 11 ++++++-----
 .../jsx-inferred-observability/fixtures/effects.txt   |  2 +-
 .../jsx-inferred-obsevability.spec.js                 | 11 +++++++++++
 test/cases/jsx-inferred-observability/src/counter.jsx |  1 +
 .../tsx-inferred-observability/fixtures/effects.txt   |  2 +-
 test/cases/tsx-inferred-observability/src/counter.tsx |  1 +
 .../tsx-inferred-obsevability.spec.js                 |  7 +++++++
 8 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index 807170b1..681edfa6 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -48,6 +48,7 @@ export default class SignalCounter extends HTMLElement {
         <span class={parity.get()}>
           The count is {count.get()} ({parity.get()})
         </span>
+        <span>(Just some static text)</span>
         <span>{isLarge.get()}</span>
         <p data-count={count.get()}>{isLarge.get()}</p>
       </div>
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 1aab6aa9..7cff9043 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -482,6 +482,12 @@ export function parseJsx(moduleURL) {
                     const childTag = child.openingElement.name.name;
                     console.log('ENTERING CHILD ELEMENT', { childTag });
 
+                    // track children for determining correct effect selector
+                    if (!children[childTag]) {
+                      children[childTag] = [];
+                    }
+                    children[childTag].push(childTag);
+
                     // TODO: I think we are only checking for State, I think we also need to handle Computeds (by themselves) here as well
                     const hasReactiveTemplate = child.children.some(
                       (c) =>
@@ -499,11 +505,6 @@ export function parseJsx(moduleURL) {
                     );
 
                     if (hasReactiveTemplate || hasReactiveAttributes) {
-                      if (!children[childTag]) {
-                        children[childTag] = [];
-                      }
-
-                      children[childTag].push(childTag);
                       reactiveElements.push({
                         selector: `${parentTag} > ${childTag}:nth-of-type(${children[childTag].length})`,
                         template: {},
diff --git a/test/cases/jsx-inferred-observability/fixtures/effects.txt b/test/cases/jsx-inferred-observability/fixtures/effects.txt
index aa8a7685..12e6ee0b 100644
--- a/test/cases/jsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/effects.txt
@@ -1,6 +1,6 @@
 this.$el0 = this.shadowRoot.querySelector('div > wcc-badge:nth-of-type(1)');
 this.$el1 = this.shadowRoot.querySelector('div > span:nth-of-type(1)');
-this.$el2 = this.shadowRoot.querySelector('div > span:nth-of-type(2)');
+this.$el2 = this.shadowRoot.querySelector('div > span:nth-of-type(4)');
 effect(() => {
   this.$el0.setAttribute('count', this.count.get());
 });
diff --git a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
index 8159f520..b80dedb5 100644
--- a/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
+++ b/test/cases/jsx-inferred-observability/jsx-inferred-obsevability.spec.js
@@ -123,6 +123,17 @@ describe('Run WCC For ', function () {
 
         expect(span.textContent.trim()).to.equal('Parity is: even');
       });
+
+      // <span id="non-reactive">Just some non-reactive text</span>
+      it('should have the expected static content for a non-reactive element that has the same tag as another reactive tag', () => {
+        const counterDom = new JSDOM(
+          dom.window.document.querySelector('wcc-counter-jsx template[shadowrootmode="open"]')
+            .innerHTML,
+        ).window.document;
+        const span = counterDom.querySelector('span#non-reactive');
+
+        expect(span.textContent).to.equal('Just some static text');
+      });
     });
   });
 });
diff --git a/test/cases/jsx-inferred-observability/src/counter.jsx b/test/cases/jsx-inferred-observability/src/counter.jsx
index 4f820079..625741c0 100644
--- a/test/cases/jsx-inferred-observability/src/counter.jsx
+++ b/test/cases/jsx-inferred-observability/src/counter.jsx
@@ -53,6 +53,7 @@ export default class Counter extends HTMLElement {
           </span>{' '}
           times
         </span>
+        <span id="non-reactive">Just some static text</span>
         <span id="three-deep">Parity is: {parity.get()}</span>
         <button onclick={() => count.set(count.get() + 1)}> + (inline state update)</button>
         <button onclick={this.increment}> + (function reference)</button>
diff --git a/test/cases/tsx-inferred-observability/fixtures/effects.txt b/test/cases/tsx-inferred-observability/fixtures/effects.txt
index b2d5ca3f..7842890f 100644
--- a/test/cases/tsx-inferred-observability/fixtures/effects.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/effects.txt
@@ -1,5 +1,5 @@
 this.$el0 = this.querySelector('div > span:nth-of-type(1)');
-this.$el1 = this.querySelector('div > span:nth-of-type(2)');
+this.$el1 = this.querySelector('div > span:nth-of-type(4)');
 effect(() => {
   this.$el0.textContent = Counter.$$tmpl0(this.count.get());
 });
diff --git a/test/cases/tsx-inferred-observability/src/counter.tsx b/test/cases/tsx-inferred-observability/src/counter.tsx
index 2be3b171..93e2cca3 100644
--- a/test/cases/tsx-inferred-observability/src/counter.tsx
+++ b/test/cases/tsx-inferred-observability/src/counter.tsx
@@ -48,6 +48,7 @@ export default class Counter extends HTMLElement {
           </span>{' '}
           times
         </span>
+        <span id="non-reactive">Just some static text</span>
         <span id="three-deep">Parity is: {parity.get()}</span>
         <button onclick={() => count.set(count.get() + 1)}> + (inline state update)</button>
         <button onclick={this.increment}> + (function reference)</button>
diff --git a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
index 73009f36..d9e98358 100644
--- a/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
+++ b/test/cases/tsx-inferred-observability/tsx-inferred-obsevability.spec.js
@@ -99,6 +99,13 @@ describe('Run WCC For ', function () {
 
         expect(span.textContent.trim()).to.equal('Parity is: even');
       });
+
+      // <span id="non-reactive">Just some non-reactive text</span>
+      it('should have the expected static content for a non-reactive element that has the same tag as another reactive tag', () => {
+        const span = dom.window.document.querySelector('wcc-counter-tsx span#non-reactive');
+
+        expect(span.textContent).to.equal('Just some static text');
+      });
     });
   });
 });

From d6b9171c6d98df14e6578d04943aa4434f4eeb12 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Tue, 24 Feb 2026 20:32:00 -0500
Subject: [PATCH 24/28] feat: #232 style signal counter sandbox demo

---
 docs/components/sandbox/signal-counter.css | 12 ++++++++++++
 docs/components/sandbox/signal-counter.jsx |  5 ++---
 docs/pages/sandbox.html                    | 12 +++++++++++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/docs/components/sandbox/signal-counter.css b/docs/components/sandbox/signal-counter.css
index e5cdc9ec..e4993039 100644
--- a/docs/components/sandbox/signal-counter.css
+++ b/docs/components/sandbox/signal-counter.css
@@ -1,7 +1,19 @@
+:host,
+:root {
+  text-align: center;
+}
+
+.heading {
+  display: block;
+  text-decoration: underline;
+}
+
 .even {
   color: green;
+  display: block;
 }
 
 .odd {
   color: red;
+  display: block;
 }
diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.jsx
index 681edfa6..4f4a8127 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.jsx
@@ -40,6 +40,7 @@ export default class SignalCounter extends HTMLElement {
 
     return (
       <div>
+        <span class="heading">My Signal Counter</span>
         <button onclick={this.increment}>Increment (+)</button>
         <button onclick={this.decrement}>Decrement (-)</button>
         {/* TODO: inline version breaks with effects */}
@@ -48,9 +49,7 @@ export default class SignalCounter extends HTMLElement {
         <span class={parity.get()}>
           The count is {count.get()} ({parity.get()})
         </span>
-        <span>(Just some static text)</span>
-        <span>{isLarge.get()}</span>
-        <p data-count={count.get()}>{isLarge.get()}</p>
+        <p data-count={count.get()}>({isLarge.get()})</p>
       </div>
     );
   }
diff --git a/docs/pages/sandbox.html b/docs/pages/sandbox.html
index cd49a136..78829a79 100644
--- a/docs/pages/sandbox.html
+++ b/docs/pages/sandbox.html
@@ -30,6 +30,12 @@
         min-width: 5%;
         margin: 0 auto;
       }
+
+      sb-signal-counter-jsx {
+        display: block;
+        margin: 0 auto;
+        width: 50%;
+      }
     </style>
 
     <!-- <script type="module" src="../components/sandbox/card.js"></script>
@@ -108,11 +114,15 @@ <h1>WCC Sandbox</h1>
 
     <h2>JSX + inferredObservability</h2>
 
-    <sb-signal-counter-jsx count="0"></sb-signal-counter-jsx>
+    <sb-signal-counter-jsx></sb-signal-counter-jsx>
+    <hr />
     <sb-signal-counter-jsx count="3"></sb-signal-counter-jsx>
 
     <button class="reset" id="signal-counter-reset">Random Reset</button>
 
+    <pre>
+      &lt;sb-signal-counter-jsx&gt;&lt;/sb-signal-counter-jsx&gt;
+    </pre>
     <pre>
       &lt;sb-signal-counter-jsx
         count="3"

From a70e77bdaa0fe0a57db5f0f773ea78e7210e6e56 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Wed, 25 Feb 2026 21:41:50 -0500
Subject: [PATCH 25/28] feat: #232 add TODOs and refine comments

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

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 7cff9043..15559c19 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -385,6 +385,7 @@ export function parseJsx(moduleURL) {
       ClassDeclaration(node) {
         // @ts-ignore
         if (node.superClass.name === 'HTMLElement') {
+          // TODO: (good first issue) find a more AST (visitor) based way to check for this
           hasShadowRoot =
             moduleContents.slice(node.body.start, node.body.end).indexOf('this.attachShadow(') > 0;
 
@@ -453,10 +454,7 @@ export function parseJsx(moduleURL) {
 
   // we do this first to track reactivity usage before we transform the template and re-write its contents
   if (inferredObservability && observedAttributes.length > 0 && !hasOwnObservedAttributes) {
-    console.log(
-      'inferredObservability enabled, but no static observedAttributes defined. Adding observedAttributes for',
-      observedAttributes,
-    );
+    console.log('inferredObservability enabled. scanning for reactivity...', observedAttributes);
 
     // this scans for signals usage within the template and builds up a reactive list of templates + effects
     // (could this be done during the transformation pass instead of having to generate and re-parse the module again?)
@@ -489,6 +487,7 @@ export function parseJsx(moduleURL) {
                     children[childTag].push(childTag);
 
                     // TODO: I think we are only checking for State, I think we also need to handle Computeds (by themselves) here as well
+                    // TODO: should we filter the things that call .get() out against actual signals found in the constructor / JSX?
                     const hasReactiveTemplate = child.children.some(
                       (c) =>
                         c.type === 'JSXExpressionContainer' &&
@@ -652,10 +651,9 @@ export function parseJsx(moduleURL) {
 
   // TODO: why does this compilation run twice?  logging here will output the message twice
   if (inferredObservability && observedAttributes.length > 0 && !hasOwnObservedAttributes) {
-    console.log(
-      'Adding static observedAttributes and attributeChangedCallback for inferredObservability',
-      { reactiveElements },
-    );
+    console.log('inferredObservability enabled. applying templates and effects...', {
+      reactiveElements,
+    });
 
     // here we do the following with all the work we've done so far tracking attributes, signals, effects, etc
     // 1. setup static template functions and observed attributes that we've tracked so far to inject into the top of the class body

From fe5afba376177add876279a33aa18cee8ffe9f76 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 28 Feb 2026 13:17:54 -0500
Subject: [PATCH 26/28] feat: #232 update comment around custom wcc tagged
 template

---
 src/jsx-loader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 15559c19..7cccaaf2 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -530,7 +530,7 @@ export function parseJsx(moduleURL) {
 
                       if (template !== '' && signals.length > 0) {
                         const $$templ = `$$tmpl${reactiveElements.length - 1}`;
-                        // TODO: need to handle runtime assumption here with `_wcc`
+                        // TODO: need to handle runtime assumption here with `_wcc`, or do we even need it all?  I don't think so...
                         const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template.trim()}\`;`;
                         // TODO: handle this references?
                         // https://www.github.com/ProjectEvergreen/wcc/issues/88

From 56ae8a8400489bfe4ef8d967281f0a8d4f45fa76 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 28 Feb 2026 18:49:23 -0500
Subject: [PATCH 27/28] feat: #232 typescript working

---
 .../sandbox/{signal-counter.jsx => signal-counter.tsx}     | 4 ++++
 docs/pages/sandbox.html                                    | 2 +-
 src/jsx-loader.js                                          | 4 ++--
 test/cases/tsx-inferred-observability/src/counter.tsx      | 7 +++----
 4 files changed, 10 insertions(+), 7 deletions(-)
 rename docs/components/sandbox/{signal-counter.jsx => signal-counter.tsx} (98%)

diff --git a/docs/components/sandbox/signal-counter.jsx b/docs/components/sandbox/signal-counter.tsx
similarity index 98%
rename from docs/components/sandbox/signal-counter.jsx
rename to docs/components/sandbox/signal-counter.tsx
index 4f4a8127..af8b687d 100644
--- a/docs/components/sandbox/signal-counter.jsx
+++ b/docs/components/sandbox/signal-counter.tsx
@@ -3,6 +3,10 @@ import sheet from './signal-counter.css' with { type: 'css' };
 export const inferredObservability = true;
 
 export default class SignalCounter extends HTMLElement {
+  count;
+  parity;
+  isLarge;
+
   constructor() {
     super();
     this.count = new Signal.State(0);
diff --git a/docs/pages/sandbox.html b/docs/pages/sandbox.html
index 78829a79..f52f3a8d 100644
--- a/docs/pages/sandbox.html
+++ b/docs/pages/sandbox.html
@@ -106,7 +106,7 @@
       });
     </script>
 
-    <script type="module" src="../components/sandbox/signal-counter.jsx"></script>
+    <script type="module" src="../components/sandbox/signal-counter.tsx"></script>
   </head>
 
   <body>
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 7cccaaf2..2c14ecbe 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -13,11 +13,11 @@ import { transform } from 'sucrase';
 
 // Signal has to come before effect
 import { Signal } from 'signal-polyfill';
-globalThis.Signal = globalThis.Signal ?? Signal;
+globalThis.Signal = Signal;
 
 // no-op implementation for SSR
 function effect() {}
-globalThis.effect = globalThis.effect ?? effect;
+globalThis.effect = effect;
 
 const jsxRegex = /\.(jsx)$/;
 const tsxRegex = /\.(tsx)$/;
diff --git a/test/cases/tsx-inferred-observability/src/counter.tsx b/test/cases/tsx-inferred-observability/src/counter.tsx
index 93e2cca3..544815dc 100644
--- a/test/cases/tsx-inferred-observability/src/counter.tsx
+++ b/test/cases/tsx-inferred-observability/src/counter.tsx
@@ -1,9 +1,8 @@
 export const inferredObservability = true;
 
 export default class Counter extends HTMLElement {
-  // TODO: get Signal types for this
-  count: any;
-  parity: any;
+  count;
+  parity;
 
   constructor() {
     super();
@@ -33,7 +32,7 @@ export default class Counter extends HTMLElement {
           {' '}
           - (function reference)
         </button>
-        <button id="evt-assignment" onclick={(this.count -= 1)}>
+        <button id="evt-assignment" onclick={() => this.count.set(this.count.get() - 1)}>
           {' '}
           - (inline state update)
         </button>

From f0222a7bbd3809e2918bd226e305d587b61a21ec Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 14 Mar 2026 18:18:50 -0400
Subject: [PATCH 28/28] feat: #232 remove need for custom template string
 function

---
 docs/components/sandbox/signal-greeting.tsx   | 31 +++++++++++++++++
 docs/pages/sandbox.html                       | 33 ++++++++++++-------
 src/jsx-loader.js                             |  5 ++-
 .../fixtures/attribute-changed-callback.txt   |  2 +-
 .../fixtures/static-templates.txt             |  4 +--
 .../fixtures/attribute-changed-callback.txt   |  2 +-
 .../fixtures/static-templates.txt             |  4 +--
 7 files changed, 60 insertions(+), 21 deletions(-)
 create mode 100644 docs/components/sandbox/signal-greeting.tsx

diff --git a/docs/components/sandbox/signal-greeting.tsx b/docs/components/sandbox/signal-greeting.tsx
new file mode 100644
index 00000000..0d4a0ebc
--- /dev/null
+++ b/docs/components/sandbox/signal-greeting.tsx
@@ -0,0 +1,31 @@
+export const inferredObservability = true;
+
+export default class SignalGreeting extends HTMLElement {
+  name;
+
+  constructor() {
+    super();
+    this.name = new Signal.State('World');
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
+
+    this.render();
+  }
+
+  render() {
+    const { name } = this;
+
+    // TODO: just using <h3> breaks
+    return (
+      <div>
+        <h3 style="text-align: center">Hello {name.get()} 👋</h3>
+      </div>
+    );
+  }
+}
+
+customElements.define('sb-signal-greeting-jsx', SignalGreeting);
diff --git a/docs/pages/sandbox.html b/docs/pages/sandbox.html
index f52f3a8d..8b2dbad4 100644
--- a/docs/pages/sandbox.html
+++ b/docs/pages/sandbox.html
@@ -31,7 +31,9 @@
         margin: 0 auto;
       }
 
-      sb-signal-counter-jsx {
+      sb-signal-counter-jsx,
+      sb-signal-greeting-jsx,
+      input {
         display: block;
         margin: 0 auto;
         width: 50%;
@@ -59,21 +61,14 @@
     </script>
     <script type="module">
       import { Signal } from 'signal-polyfill';
+      // NOTE: `Signal` has to be defined first
+      import { effect } from 'wc-compiler/effect';
 
       globalThis.Signal = Signal;
+      globalThis.effect = effect;
     </script>
     <script type="module">
-      // NOTE: `Signal` has to be defined first
-      import { effect } from 'wc-compiler/effect';
       globalThis.effect = effect;
-
-      globalThis._wcc = function (strings, ...values) {
-        let str = '';
-        strings.forEach((string, i) => {
-          str += string + (values[i] === 0 ? '0' : values[i] || '');
-        });
-        return str;
-      };
     </script>
     <script>
       function randomReset() {
@@ -81,11 +76,17 @@
       }
 
       globalThis.document.addEventListener('DOMContentLoaded', () => {
+        const signalGreetingInput = document.getElementById('signal-greeting-input');
         const signalCounterJsxResetButton = document.getElementById('signal-counter-reset');
         // const counterJsxResetButton = document.getElementById('counter-jsx-reset');
         // const counterJsxDsdResetButton = document.getElementById('counter-jsx-dsd-reset');
         // const counterTsxDsdResetButton = document.getElementById('counter-tsx-dsd-reset');
 
+        signalGreetingInput.addEventListener('keyup', (e) => {
+          console.log('update greeting value => ', e.target.value);
+          document.querySelector('sb-signal-greeting-jsx').setAttribute('name', e.target.value);
+        });
+
         signalCounterJsxResetButton.addEventListener('click', () => {
           document.querySelectorAll('sb-signal-counter-jsx').forEach((el) => {
             el.setAttribute('count', randomReset());
@@ -107,12 +108,20 @@
     </script>
 
     <script type="module" src="../components/sandbox/signal-counter.tsx"></script>
+    <script type="module" src="../components/sandbox/signal-greeting.tsx"></script>
   </head>
 
   <body>
     <h1>WCC Sandbox</h1>
 
-    <h2>JSX + inferredObservability</h2>
+    <h2>JSX + inferredObservability (Greeting)</h2>
+
+    <input id="signal-greeting-input" placeholder="World" />
+    <sb-signal-greeting-jsx></sb-signal-greeting-jsx>
+
+    <hr />
+
+    <h2>JSX + inferredObservability (Counter)</h2>
 
     <sb-signal-counter-jsx></sb-signal-counter-jsx>
     <hr />
diff --git a/src/jsx-loader.js b/src/jsx-loader.js
index 2c14ecbe..3d3919dd 100644
--- a/src/jsx-loader.js
+++ b/src/jsx-loader.js
@@ -530,8 +530,7 @@ export function parseJsx(moduleURL) {
 
                       if (template !== '' && signals.length > 0) {
                         const $$templ = `$$tmpl${reactiveElements.length - 1}`;
-                        // TODO: need to handle runtime assumption here with `_wcc`, or do we even need it all?  I don't think so...
-                        const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => _wcc\`${template.trim()}\`;`;
+                        const staticTemplate = `static ${$$templ} = (${signals.join(',')}) => \`${template.trim()}\`;`;
                         // TODO: handle this references?
                         // https://www.github.com/ProjectEvergreen/wcc/issues/88
                         const expression = `${componentName}.${$$templ}(${signals.map((s) => `this.${s}.get()`).join(', ')});`;
@@ -691,7 +690,7 @@ export function parseJsx(moduleURL) {
                 }
                 static parseAttribute = (value) => value.charAt(0) === '{' || value.charAt(0) === '['
                   ? JSON.parse(value)
-                  : !isNaN(value)
+                  : value !== '' && !isNaN(+value)
                     ? parseInt(value, 10)
                     : value === 'true' || value === 'false'
                       ? value === 'true' ? true : false
diff --git a/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt b/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
index d4ac4441..eaf94fe6 100644
--- a/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/attribute-changed-callback.txt
@@ -1,6 +1,6 @@
 static parseAttribute = value => value.charAt(0) === '{' || value.charAt(0) === '['
   ? JSON.parse(value)
-  : !isNaN(value)
+  : value !== '' && !isNaN(+value)
     ? parseInt(value, 10)
     : value === 'true' || value === 'false'
       ? value === 'true' ? true : false
diff --git a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
index 888c44c9..d32bab75 100644
--- a/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
+++ b/test/cases/jsx-inferred-observability/fixtures/static-templates.txt
@@ -1,5 +1,5 @@
 $el0;
 $el1;
 $el2;
-static $$tmpl1 = count => _wcc`Top level count is ${count}`;
-static $$tmpl2 = parity => _wcc`Parity is: ${parity}`;
\ No newline at end of file
+static $$tmpl1 = count => `Top level count is ${count}`;
+static $$tmpl2 = parity => `Parity is: ${parity}`;
\ No newline at end of file
diff --git a/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt b/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
index d4ac4441..eaf94fe6 100644
--- a/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/attribute-changed-callback.txt
@@ -1,6 +1,6 @@
 static parseAttribute = value => value.charAt(0) === '{' || value.charAt(0) === '['
   ? JSON.parse(value)
-  : !isNaN(value)
+  : value !== '' && !isNaN(+value)
     ? parseInt(value, 10)
     : value === 'true' || value === 'false'
       ? value === 'true' ? true : false
diff --git a/test/cases/tsx-inferred-observability/fixtures/static-templates.txt b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
index 61e4cd2d..c30088f0 100644
--- a/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
+++ b/test/cases/tsx-inferred-observability/fixtures/static-templates.txt
@@ -1,4 +1,4 @@
 $el0;
 $el1;
-static $$tmpl0 = count => _wcc`Top level count is ${count}`;
-static $$tmpl1 = parity => _wcc`Parity is: ${parity}`;
\ No newline at end of file
+static $$tmpl0 = count => `Top level count is ${count}`;
+static $$tmpl1 = parity => `Parity is: ${parity}`;
\ No newline at end of file