wc-compiler 0.18.0 → 0.19.0

package/README.md

@@ -8,63 +8,68 @@
 [![NodeJS compatibility](https://img.shields.io/node/v/wc-compiler.svg)](https://nodejs.org/en/about/previous-releases")
 [![Discord Chat](https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord)](https://www.greenwoodjs.dev/discord/)
 
-> _Experimental Web Components compiler.  It's Web Components all the way down!_  🐢
+> _Experimental Web Components compiler. It's Web Components all the way down!_ 🐢
 
 ## How It Works
 
 1. Write a Web Component
-    ```js
-    const template = document.createElement('template');
-
-    template.innerHTML = `
-      <style>
-        .footer {
-          color: white;
-          background-color: #192a27;
-        }
-      </style>
-
-      <footer class="footer">
-        <h4>My Blog &copy; ${new Date().getFullYear()}</h4>
-      </footer>
-    `;
-
-    class Footer extends HTMLElement {
-      connectedCallback() {
-        if (!this.shadowRoot) {
-          this.attachShadow({ mode: 'open' });
-          this.shadowRoot.appendChild(template.content.cloneNode(true));
-        }
-      }
-    }
-
-    export default Footer;
-
-    customElements.define('wcc-footer', Footer);
-    ```
+
+   ```js
+   const template = document.createElement('template');
+
+   template.innerHTML = `
+     <style>
+       .footer {
+         color: white;
+         background-color: #192a27;
+       }
+     </style>
+   
+     <footer class="footer">
+       <h4>My Blog &copy; ${new Date().getFullYear()}</h4>
+     </footer>
+   `;
+
+   class Footer extends HTMLElement {
+     connectedCallback() {
+       if (!this.shadowRoot) {
+         this.attachShadow({ mode: 'open' });
+         this.shadowRoot.appendChild(template.content.cloneNode(true));
+       }
+     }
+   }
+
+   export default Footer;
+
+   customElements.define('wcc-footer', Footer);
+   ```
+
 1. Run it through the compiler
-    ```js
-    import { renderToString } from 'wc-compiler';
 
-    const { html } = await renderToString(new URL('./path/to/component.js', import.meta.url));
-    ```
+   ```js
+   import { renderToString } from 'wc-compiler';
+
+   const { html } = await renderToString(new URL('./path/to/component.js', import.meta.url));
+   ```
+
 1. Get HTML!
-    ```html
-    <wcc-footer>
-      <template shadowrootmode="open">
-        <style>
-          .footer {
-            color: white;
-            background-color: #192a27;
-          }
-        </style>
-
-        <footer class="footer">
-          <h4>My Blog &copy; 2022</h4>
-        </footer>
-      </template>
-    </wcc-footer>
-    ```
+
+   ```html
+   <wcc-footer>
+     <template shadowrootmode="open">
+       <style>
+         .footer {
+           color: white;
+           background-color: #192a27;
+         }
+       </style>
+
+       <footer class="footer">
+         <h4>My Blog &copy; 2022</h4>
+       </footer>
+     </template>
+   </wcc-footer>
+   ```
 
 ## Installation
 
@@ -80,6 +85,6 @@ See our [website](https://merry-caramel-524e61.netlify.app/) for API docs and ex
 
 ## Motivation
 
-**WCC** is not a static site generator, framework or bundler.  It is designed with the intent of being able to produce raw HTML from standards compliant Web Components and easily integrated _into_ a site generator or framework, like [**Greenwood**](https://www.greenwoodjs.dev).  The Project Evergreen team also maintains similar integrations for [**Eleventy**](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/) and [Astro](https://github.com/ProjectEvergreen/astro-wcc).
+**WCC** is not a static site generator, framework or bundler. It is designed with the intent of being able to produce raw HTML from standards compliant Web Components and easily integrated _into_ a site generator or framework, like [**Greenwood**](https://www.greenwoodjs.dev). The Project Evergreen team also maintains similar integrations for [**Eleventy**](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/) and [**Astro**](https://github.com/ProjectEvergreen/astro-wcc).
 
-In addition, **WCC** hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5), [serverless and edge rendering](https://github.com/thescientist13/web-components-at-the-edge), and as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg)'s discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).
+In addition, **WCC** hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5), [serverless and edge rendering](https://github.com/thescientist13/web-components-at-the-edge), and acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg)'s discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "wc-compiler",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ProjectEvergreen/wcc.git"
+    "url": "git+https://github.com/ProjectEvergreen/wcc.git"
   },
   "type": "module",
   "main": "src/wcc.js",
   "types": "./src/index.d.ts",
   "exports": {
     ".": {
-      "import": "./src/wcc.js",
-      "types": "./src/index.d.ts"
+      "types": "./src/index.d.ts",
+      "import": "./src/wcc.js"
     },
     "./register": "./src/register.js",
     "./src/jsx-loader.js": "./src/jsx-loader.js",
@@ -37,8 +37,12 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "eslint",
+    "lint": "npm run lint:js && npm run lint:ls",
+    "lint:js": "eslint",
+    "lint:ls": "ls-lint",
     "lint:types": "tsc",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
     "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx,ts,tsx ./build.js\" \"http-server ./dist --open\"",
     "docs:build": "node ./build.js",
     "docs:serve": "npm run clean && npm run docs:build && http-server ./dist --open",
@@ -47,7 +51,8 @@
     "test": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/ts*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
     "test:jsx": "c8 node --import ./test-register.js --experimental-strip-types ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
     "test:tdd": "npm run test -- --watch",
-    "test:tdd:jsx": "npm run test:jsx -- --watch"
+    "test:tdd:jsx": "npm run test:jsx -- --watch",
+    "prepare": "husky"
   },
   "dependencies": {
     "@projectevergreen/acorn-jsx-esm": "~0.1.0",
@@ -58,25 +63,26 @@
     "sucrase": "^3.35.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/eslint-parser": "^7.25.7",
-    "@babel/plugin-syntax-import-assertions": "^7.25.7",
-    "@eslint/js": "^9.11.1",
-    "@ls-lint/ls-lint": "^1.10.0",
+    "@eslint/js": "^9.39.1",
+    "@ls-lint/ls-lint": "^2.3.1",
     "@mapbox/rehype-prism": "^0.8.0",
     "@types/mocha": "^10.0.10",
     "@types/node": "^22.13.4",
     "c8": "^7.11.2",
     "chai": "^4.3.6",
     "concurrently": "^7.1.0",
-    "eslint": "^9.11.1",
-    "eslint-plugin-no-only-tests": "^2.6.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "globals": "^15.10.0",
     "http-server": "^14.1.0",
+    "husky": "^9.1.7",
     "jsdom": "^19.0.0",
+    "lint-staged": "^16.2.6",
     "livereload": "^0.9.3",
     "mocha": "^9.2.2",
     "nodemon": "^2.0.15",
+    "prettier": "^3.6.2",
     "prismjs": "^1.28.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-raw": "^6.1.1",

package/src/dom-shim.js

@@ -46,18 +46,20 @@ function getParse5ElementDefaults(element, tagName) {
     nodeName: tagName,
     tagName: tagName,
     namespaceURI: 'http://www.w3.org/1999/xhtml',
-    ...(tagName === 'template' ? { content: { nodeName: '#document-fragment', childNodes: [] } } : {})
+    ...(tagName === 'template'
+      ? { content: { nodeName: '#document-fragment', childNodes: [] } }
+      : {}),
   };
 }
 
-function noop() { }
+function noop() {}
 
 // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
 class CSSStyleSheet {
-  insertRule() { }
-  deleteRule() { }
-  replace() { }
-  replaceSync() { }
+  insertRule() {}
+  deleteRule() {}
+  replace() {}
+  replaceSync() {}
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
@@ -132,7 +134,7 @@ class Node extends EventTarget {
     }
 
     return this.childNodes
-      .map((child) => child.nodeName === '#text' ? child.value : child.textContent)
+      .map((child) => (child.nodeName === '#text' ? child.value : child.textContent))
       .join('');
   }
 
@@ -163,7 +165,9 @@ class Element extends Node {
   }
 
   getHTML({ serializableShadowRoots = false }) {
-    return this.shadowRoot && serializableShadowRoots && this.shadowRoot.serializable ? this.shadowRoot.innerHTML : '';
+    return this.shadowRoot && serializableShadowRoots && this.shadowRoot.serializable
+      ? this.shadowRoot.innerHTML
+      : '';
   }
 
   get innerHTML() {
@@ -172,7 +176,8 @@ class Element extends Node {
   }
 
   set innerHTML(html) {
-    (this.nodeName === 'template' ? this.content : this).childNodes = getParse(html)(html).childNodes;
+    (this.nodeName === 'template' ? this.content : this).childNodes =
+      getParse(html)(html).childNodes;
   }
 
   hasAttribute(name) {
@@ -198,16 +203,13 @@ class Element extends Node {
 // https://developer.mozilla.org/en-US/docs/Web/API/Document
 // EventTarget <- Node <- Document
 class Document extends Node {
-
   createElement(tagName) {
     switch (tagName) {
-
       case 'template':
         return new HTMLTemplateElement();
 
       default:
         return new HTMLElement(tagName);
-
     }
   }
 
@@ -223,12 +225,12 @@ class HTMLElement extends Element {
     super();
     Object.assign(this, getParse5ElementDefaults(this, tagName));
   }
-  connectedCallback() { }
+  connectedCallback() {}
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
 // EventTarget <- Node <- DocumentFragment
-class DocumentFragment extends Node { }
+class DocumentFragment extends Node {}
 
 // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
 // EventTarget <- Node <- DocumentFragment <- ShadowRoot
@@ -241,11 +243,15 @@ class ShadowRoot extends DocumentFragment {
   }
 
   get innerHTML() {
-    return this.childNodes?.[0]?.content?.childNodes ? serialize({ childNodes: this.childNodes[0].content.childNodes }) : '';
+    return this.childNodes?.[0]?.content?.childNodes
+      ? serialize({ childNodes: this.childNodes[0].content.childNodes })
+      : '';
   }
 
   set innerHTML(html) {
-    this.childNodes = getParse(html)(`<template shadowrootmode="${this.mode}">${html}</template>`).childNodes;
+    this.childNodes = getParse(html)(
+      `<template shadowrootmode="${this.mode}">${html}</template>`,
+    ).childNodes;
   }
 }
 
@@ -290,4 +296,4 @@ globalThis.document = globalThis.document ?? new Document();
 globalThis.customElements = globalThis.customElements ?? new CustomElementsRegistry();
 globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
 globalThis.DocumentFragment = globalThis.DocumentFragment ?? DocumentFragment;
-globalThis.CSSStyleSheet = globalThis.CSSStyleSheet ?? CSSStyleSheet;
+globalThis.CSSStyleSheet = globalThis.CSSStyleSheet ?? CSSStyleSheet;

package/src/index.d.ts

@@ -2,21 +2,29 @@ export type Metadata = {
   [key: string]: {
     instanceName: string;
     moduleURL: URL;
-    isEntry: boolean
-  }
-}
+    isEntry: boolean;
+    source: string;
+  };
+};
 
-export type renderToString = (elementURL: URL, wrappingEntryTag?: boolean, props?: any) => Promise<{
+export type renderToString = (
+  elementURL: URL,
+  wrappingEntryTag?: boolean,
+  props?: any,
+) => Promise<{
   html: string;
-  metadata: Metadata
-}>
+  metadata: Metadata;
+}>;
 
-export type renderFromHTML = (html: string, elementURLs: URL[]) => Promise<{
+export type renderFromHTML = (
+  html: string,
+  elementURLs: URL[],
+) => Promise<{
   html: string;
-  metadata: Metadata
-}>
+  metadata: Metadata;
+}>;
 
-declare module "wc-compiler" {
+declare module 'wc-compiler' {
   export const renderToString: renderToString;
   export const renderFromHTML: renderFromHTML;
-}
+}

package/src/jsx-loader.js

@@ -39,8 +39,8 @@ export function getParser(moduleURL) {
     config: {
       // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
       ...walk.base,
-      JSXElement: () => {}
-    }
+      JSXElement: () => {},
+    },
   };
 }
 
@@ -57,7 +57,9 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
           const { value } = attrs[attr];
 
           if (value.indexOf('__this__.') >= 0) {
-            const root = hasShadowRoot ? '.getRootNode().host' : `${'.parentElement'.repeat(currentDepth)}`;
+            const root = hasShadowRoot
+              ? '.getRootNode().host'
+              : `${'.parentElement'.repeat(currentDepth)}`;
 
             node.attrs[attr].value = value.replace(/__this__/g, `this${root}`);
           }
@@ -75,7 +77,7 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
   return tree;
 }
 
-function parseJsxElement(element, moduleContents = '') {
+function parseJsxElement(element, moduleContents = '', inferredObservability = false) {
   try {
     const { type } = element;
 
@@ -122,8 +124,14 @@ function parseJsxElement(element, moduleContents = '') {
 
               if (left.object.type === 'ThisExpression') {
                 if (left.property.type === 'Identifier') {
-                  // very naive (fine grained?) reactivity
-                  string += ` ${name}="__this__.${left.property.name}${expression.operator}${right.raw}; __this__.render();"`;
+                  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();"`;
+                  }
                 }
               }
             }
@@ -139,17 +147,29 @@ function parseJsxElement(element, moduleContents = '') {
               // xxx={allTodos.length} >
               const { value } = attribute;
               const { expression } = value;
+              const expressionType = expression.type;
 
-              if (expression.type === 'Identifier') {
-                string += ` ${name}=$\{${expression.name}}`;
+              switch (expressionType) {
+                case 'Literal':
+                  string += ` ${name}=${expression.raw}`;
+                  break;
+                case 'Identifier':
+                  string += ` ${name}=$\{${expression.name}}`;
+                  break;
+                case 'MemberExpression':
+                  if (expression.object.type === 'Identifier') {
+                    if (expression.property.type === 'Identifier') {
+                      string += ` ${name}=$\{${expression.object.name}.${expression.property.name}}`;
+                    }
+                  }
+                  break;
+                default:
+                  break;
               }
 
-              if (expression.type === 'MemberExpression') {
-                if (expression.object.type === 'Identifier') {
-                  if (expression.property.type === 'Identifier') {
-                    string += ` ${name}=$\{${expression.object.name}.${expression.property.name}}`;
-                  }
-                }
+              // only apply this when dealing with `this` references
+              if (inferredObservability) {
+                string += ` data-wcc-${expression.name}="${name}" data-wcc-ins="attr"`;
               }
             }
           } else {
@@ -159,10 +179,12 @@ function parseJsxElement(element, moduleContents = '') {
         }
       }
 
-      string += openingElement.selfClosing ? '/>' : '>';
+      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}>`;
@@ -177,6 +199,13 @@ function parseJsxElement(element, moduleContents = '') {
 
       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}}`;
       } else if (type === 'MemberExpression') {
         const { object } = element.expression.object;
@@ -207,26 +236,33 @@ 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';
+  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 => {
+    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 { description } = this.todo;
+        // 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);
       }
     });
   }
@@ -238,7 +274,7 @@ export function parseJsx(moduleURL) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
   const result = transform(moduleContents, {
     transforms: ['typescript', 'jsx'],
-    jsxRuntime: 'preserve'
+    jsxRuntime: 'preserve',
   });
   // would be nice if we could do this instead, so we could know ahead of time
   // const { inferredObservability } = await import(moduleURL);
@@ -248,45 +284,77 @@ export function parseJsx(moduleURL) {
   let observedAttributes = [];
   let tree = acorn.Parser.extend(jsx()).parse(result.code, {
     ecmaVersion: 'latest',
-    sourceType: 'module'
+    sourceType: 'module',
   });
   string = '';
 
-  walk.simple(tree, {
-    ClassDeclaration(node) {
+  // TODO: would be nice to do this one pass, but first we need to know if `inferredObservability` is set first
+  walk.simple(
+    tree,
+    {
+      ExportNamedDeclaration(node) {
+        const { declaration } = node;
+
+        if (
+          declaration &&
+          declaration.type === 'VariableDeclaration' &&
+          declaration.kind === 'const' &&
+          declaration.declarations.length === 1
+        ) {
+          // @ts-ignore
+          if (declaration.declarations[0].id.name === 'inferredObservability') {
+            // @ts-ignore
+            inferredObservability = Boolean(node.declaration.declarations[0].init.raw);
+          }
+        }
+      },
+    },
+    {
+      // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
+      ...walk.base,
       // @ts-ignore
-      if (node.superClass.name === 'HTMLElement') {
-        const hasShadowRoot = moduleContents.slice(node.body.start, node.body.end).indexOf('this.attachShadow(') > 0;
+      JSXElement: () => {},
+    },
+  );
 
-        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)
-                  ];
-                  // @ts-ignore
-                } else 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';
-
-                  applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
-
-                  const serializedHtml = serialize(elementTree);
-                  // we have to Shadow DOM use cases here
-                  // 1. No shadowRoot, so we attachShadow and append the template
-                  // 2. If there is root from the attachShadow signal, so we just need to inject innerHTML, say in an htmx
-                  // could / should we do something else instead of .innerHTML
-                  // https://github.com/ProjectEvergreen/wcc/issues/138
-                  const renderHandler = hasShadowRoot
-                    ? `
+  walk.simple(
+    tree,
+    {
+      ClassDeclaration(node) {
+        // @ts-ignore
+        if (node.superClass.name === 'HTMLElement') {
+          const 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
+              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),
+                    ];
+                    // @ts-ignore
+                  } else if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
+                    const html = parseJsxElement(n.argument, moduleContents, inferredObservability);
+                    const elementTree = getParse(html)(html);
+                    const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
+
+                    applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
+
+                    const serializedHtml = serialize(elementTree);
+                    // we have to Shadow DOM use cases here
+                    // 1. No shadowRoot, so we attachShadow and append the template
+                    // 2. If there is root from the attachShadow signal, so we just need to inject innerHTML, say in an htmx
+                    // could / should we do something else instead of .innerHTML
+                    // https://github.com/ProjectEvergreen/wcc/issues/138
+                    const renderHandler = hasShadowRoot
+                      ? `
                         const template = document.createElement('template');
                         template.innerHTML = \`${serializedHtml}\`;
 
@@ -297,57 +365,75 @@ export function parseJsx(moduleURL) {
                           this.shadowRoot.innerHTML = template.innerHTML;
                         }
                       `
-                    : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
-                  const transformed = acorn.parse(renderHandler, {
-                    ecmaVersion: 'latest',
-                    sourceType: 'module'
-                  });
-
-                  // @ts-ignore
-                  n1.value.body.body[n2] = transformed;
+                      : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+                    const transformed = acorn.parse(renderHandler, {
+                      ecmaVersion: 'latest',
+                      sourceType: 'module',
+                    });
+
+                    // @ts-ignore
+                    n1.value.body.body[n2] = transformed;
+                  }
                 }
               }
             }
           }
         }
-      }
+      },
     },
-    ExportNamedDeclaration(node) {
-      const { declaration } = node;
-
-      if (declaration && declaration.type === 'VariableDeclaration' && declaration.kind === 'const' && declaration.declarations.length === 1) {
-        // @ts-ignore
-        if (declaration.declarations[0].id.name === 'inferredObservability') {
-          // @ts-ignore
-          inferredObservability = Boolean(node.declaration.declarations[0].init.raw);
-        }
-      }
-    }
-  }, {
-    // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
-    ...walk.base,
-    // @ts-ignore
-    JSXElement: () => {}
-  });
+    {
+      // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
+      ...walk.base,
+      // @ts-ignore
+      JSXElement: () => {},
+    },
+  );
 
-  // TODO - signals: use constructor, render, HTML attributes?  some, none, or all?
   if (inferredObservability && observedAttributes.length > 0 && !hasOwnObservedAttributes) {
     let insertPoint;
     for (const line of tree.body) {
-      // test for class MyComponent vs export default class MyComponent
+      // TODO: test for class MyComponent vs export default class MyComponent
       // @ts-ignore
-      if (line.type === 'ClassDeclaration' || (line.declaration && line.declaration.type) === 'ClassDeclaration') {
+      if (
+        line.type === 'ClassDeclaration' ||
+        (line.declaration && line.declaration.type) === 'ClassDeclaration'
+      ) {
         // @ts-ignore
         insertPoint = line.declaration.body.start + 1;
       }
     }
 
     let newModuleContents = generate(tree);
-
-    // TODO better way to determine value type?
+    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');
+    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
     newModuleContents = `${newModuleContents.slice(0, insertPoint)}
       static get observedAttributes() {
-        return [${[...observedAttributes].map(attr => `'${attr}'`).join(',')}]
+        return [${[...trackingAttrs].map((attr) => `'${attr}'`).join()}]
       }
 
       attributeChangedCallback(name, oldValue, newValue) {
@@ -362,25 +448,53 @@ export function parseJsx(moduleURL) {
         }
         if (newValue !== oldValue) {
           switch(name) {
-            ${observedAttributes.map((attr) => {
-              return `
-                case '${attr}':
-                  this.${attr} = getValue(newValue);
-                  break;
-              `;
-            }).join('\n')}
+            ${trackingAttrs
+              .map((attr) => {
+                return `
+                  case '${attr}':
+                    this.${attr} = getValue(newValue);
+                    break;
+                `;
+              })
+              .join('\n')}
           }
+          this.update(name, oldValue, newValue);
+        }
+      }
 
-          this.render();
+      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}
         }
       }
 
+      ${derivedGetters}
+
       ${newModuleContents.slice(insertPoint)}
     `;
 
     tree = acorn.Parser.extend(jsx()).parse(newModuleContents, {
       ecmaVersion: 'latest',
-      sourceType: 'module'
+      sourceType: 'module',
     });
   }
 
@@ -395,7 +509,7 @@ export function resolve(specifier, context, defaultResolve) {
   if (jsxRegex.test(specifier) || tsxRegex.test(specifier)) {
     return {
       url: new URL(specifier, parentURL).href,
-      shortCircuit: true
+      shortCircuit: true,
     };
   }
 
@@ -409,9 +523,9 @@ export async function load(url, context, defaultLoad) {
     return {
       format: 'module',
       source: generate(jsFromJsx),
-      shortCircuit: true
+      shortCircuit: true,
     };
   }
 
   return defaultLoad(url, context, defaultLoad);
-}
+}

package/src/jsx-runtime.ts

@@ -1 +1 @@
-import './jsx.d.ts';
+import './jsx.d.ts';

package/src/jsx.d.ts

@@ -17,4 +17,4 @@ type IntrinsicElementsFromDom = {
 // declare the global JSX namespace with your generated intrinsic elements.
 declare namespace JSX {
   interface IntrinsicElements extends IntrinsicElementsFromDom {}
-}
+}

package/src/register.js

@@ -1,3 +1,3 @@
 import { register } from 'node:module';
 
-register('./jsx-loader.js', import.meta.url);
+register('./jsx-loader.js', import.meta.url);

package/src/wcc.js

@@ -12,9 +12,14 @@ import fs from 'fs';
 function isCustomElementDefinitionNode(node) {
   const { expression } = node;
 
-  return expression.type === 'CallExpression' && expression.callee && expression.callee.object
-    && expression.callee.property && expression.callee.object.name === 'customElements'
-    && expression.callee.property.name === 'define';
+  return (
+    expression.type === 'CallExpression' &&
+    expression.callee &&
+    expression.callee.object &&
+    expression.callee.property &&
+    expression.callee.object.name === 'customElements' &&
+    expression.callee.property.name === 'define'
+  );
 }
 
 async function renderComponentRoots(tree, definitions) {
@@ -24,7 +29,12 @@ async function renderComponentRoots(tree, definitions) {
 
       if (definitions[tagName]) {
         const { moduleURL } = definitions[tagName];
-        const elementInstance = await initializeCustomElement(moduleURL, tagName, node, definitions);
+        const elementInstance = await initializeCustomElement(
+          moduleURL,
+          tagName,
+          node,
+          definitions,
+        );
 
         if (elementInstance) {
           const hasShadow = elementInstance.shadowRoot;
@@ -33,10 +43,14 @@ async function renderComponentRoots(tree, definitions) {
             ? [...elementInstance.shadowRoot.childNodes, ...node.childNodes]
             : elementInstance.childNodes;
         } else {
-          console.warn(`WARNING: customElement <${tagName}> detected but not serialized.  You may not have exported it.`);
+          console.warn(
+            `WARNING: customElement <${tagName}> detected but not serialized.  You may not have exported it.`,
+          );
         }
       } else {
-        console.warn(`WARNING: customElement <${tagName}> is not defined.  You may not have imported it.`);
+        console.warn(
+          `WARNING: customElement <${tagName}> is not defined.  You may not have imported it.`,
+        );
       }
 
       attrs.forEach((attr) => {
@@ -44,7 +58,6 @@ async function renderComponentRoots(tree, definitions) {
           definitions[tagName].hydrate = attr.value;
         }
       });
-
     }
 
     if (node.childNodes && node.childNodes.length > 0) {
@@ -71,53 +84,60 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
     jsxRuntime: 'automatic',
     production: true,
   });
-  const nextDepth = depth += 1;
+  const nextDepth = (depth += 1);
   const customParser = getParser(moduleURL);
   const parser = customParser ? customParser.parser : acorn.Parser;
-  const config = customParser ? customParser.config : {
-    ...walk.base
-  };
-
-  walk.simple(parser.parse(result.code, {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  }), {
-    ImportDeclaration(node) {
-      const specifier = node.source.value;
-
-      if (typeof specifier === 'string') {
-        const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
-        const extension = typeof specifier === "string" ? specifier.split('.').pop() : "";
-
-        // would like to decouple .jsx from the core, ideally
-        // https://github.com/ProjectEvergreen/wcc/issues/122
-        if (!isBareSpecifier && ['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
-          const dependencyModuleURL = new URL(specifier, moduleURL);
-
-          registerDependencies(dependencyModuleURL, definitions, nextDepth);
+  const config = customParser
+    ? customParser.config
+    : {
+        ...walk.base,
+      };
+
+  walk.simple(
+    parser.parse(result.code, {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    }),
+    {
+      ImportDeclaration(node) {
+        const specifier = node.source.value;
+
+        if (typeof specifier === 'string') {
+          const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
+          const extension = typeof specifier === 'string' ? specifier.split('.').pop() : '';
+
+          // would like to decouple .jsx from the core, ideally
+          // https://github.com/ProjectEvergreen/wcc/issues/122
+          if (!isBareSpecifier && ['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
+            const dependencyModuleURL = new URL(specifier, moduleURL);
+
+            registerDependencies(dependencyModuleURL, definitions, nextDepth);
+          }
         }
-      }
+      },
+      ExpressionStatement(node) {
+        if (isCustomElementDefinitionNode(node)) {
+          // @ts-ignore
+          const { arguments: args } = node.expression;
+          const tagName =
+            args[0].type === 'Literal'
+              ? args[0].value // single and double quotes
+              : args[0].quasis[0].value.raw; // template literal
+          const tree = parseJsx(moduleURL);
+          const isEntry = nextDepth - 1 === 1;
+
+          definitions[tagName] = {
+            instanceName: args[1].name,
+            moduleURL,
+            source: generate(tree),
+            url: moduleURL,
+            isEntry,
+          };
+        }
+      },
     },
-    ExpressionStatement(node) {
-      if (isCustomElementDefinitionNode(node)) {
-        // @ts-ignore
-        const { arguments: args } = node.expression;
-        const tagName = args[0].type === 'Literal'
-          ? args[0].value // single and double quotes
-          : args[0].quasis[0].value.raw; // template literal
-        const tree = parseJsx(moduleURL);
-        const isEntry = nextDepth - 1 === 1;
-
-        definitions[tagName] = {
-          instanceName: args[1].name,
-          moduleURL,
-          source: generate(tree),
-          url: moduleURL,
-          isEntry
-        };
-      }
-    }
-  }, config);
+    config,
+  );
 }
 
 async function getTagName(moduleURL) {
@@ -129,28 +149,40 @@ async function getTagName(moduleURL) {
   });
   const customParser = getParser(moduleURL);
   const parser = customParser ? customParser.parser : acorn.Parser;
-  const config = customParser ? customParser.config : {
-    ...walk.base
-  };
+  const config = customParser
+    ? customParser.config
+    : {
+        ...walk.base,
+      };
   let tagName;
 
-  walk.simple(parser.parse(result.code, {
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  }), {
-    ExpressionStatement(node) {
-      if (isCustomElementDefinitionNode(node)) {
-        // @ts-ignore
-        tagName = node.expression.arguments[0].value;
-      }
-    }
-  }, config);
+  walk.simple(
+    parser.parse(result.code, {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    }),
+    {
+      ExpressionStatement(node) {
+        if (isCustomElementDefinitionNode(node)) {
+          // @ts-ignore
+          tagName = node.expression.arguments[0].value;
+        }
+      },
+    },
+    config,
+  );
 
   return tagName;
 }
 
-async function initializeCustomElement(elementURL, tagName, node = {}, definitions = {}, isEntry, props = {}) {
-
+async function initializeCustomElement(
+  elementURL,
+  tagName,
+  node = {},
+  definitions = {},
+  isEntry,
+  props = {},
+) {
   if (!tagName) {
     const depth = isEntry ? 1 : 0;
     registerDependencies(elementURL, definitions, depth);
@@ -173,9 +205,16 @@ async function initializeCustomElement(elementURL, tagName, node = {}, definitio
 
 async function renderToString(elementURL, wrappingEntryTag = true, props = {}) {
   const definitions = {};
-  const elementTagName = wrappingEntryTag && await getTagName(elementURL);
+  const elementTagName = wrappingEntryTag && (await getTagName(elementURL));
   const isEntry = !!elementTagName;
-  const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions, isEntry, props);
+  const elementInstance = await initializeCustomElement(
+    elementURL,
+    undefined,
+    undefined,
+    definitions,
+    isEntry,
+    props,
+  );
 
   let html;
 
@@ -186,28 +225,29 @@ async function renderToString(elementURL, wrappingEntryTag = true, props = {}) {
 
     await renderComponentRoots(
       elementInstance.shadowRoot
-        ? 
-        { 
-          nodeName: '#document-fragment', 
-          childNodes: [elementInstance] 
-        }
+        ? {
+            nodeName: '#document-fragment',
+            childNodes: [elementInstance],
+          }
         : elementInstance,
-      definitions
+      definitions,
     );
 
-    html = wrappingEntryTag && elementTagName ? `
+    html =
+      wrappingEntryTag && elementTagName
+        ? `
         <${elementTagName}>
           ${serialize(elementInstance)}
         </${elementTagName}>
       `
-      : serialize(elementInstance);
+        : serialize(elementInstance);
   } else {
     console.warn('WARNING: No custom element class found for this entry point.');
   }
 
   return {
     html,
-    metadata: definitions
+    metadata: definitions,
   };
 }
 
@@ -223,11 +263,8 @@ async function renderFromHTML(html, elements = []) {
 
   return {
     html: serialize(finalTree),
-    metadata: definitions
+    metadata: definitions,
   };
 }
 
-export {
-  renderToString,
-  renderFromHTML
-};
+export { renderToString, renderFromHTML };