wc-compiler 0.15.1 → 0.17.0

package/README.md

@@ -4,8 +4,9 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/e718eac2-b3bc-4986-8569-49706a430beb/deploy-status)](https://app.netlify.com/sites/merry-caramel-524e61/deploys)
 [![GitHub release](https://img.shields.io/github/tag/ProjectEvergreen/wcc.svg)](https://github.com/ProjectEvergreen/wcc/tags)
-![GitHub Actions status](https://github.com/ProjectEvergreen/wcc/workflows/Master%20Integration/badge.svg)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ProjectEvergreen/wcc/master/LICENSE.md)
+[![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!_  🐢
 
@@ -73,13 +74,6 @@
 $ npm install wc-compiler --save-dev
 ```
 
-### CommonJS
-
-If you need CommonJS support, a separate pre-bundled (with Rollup) distribution of **WCC** is available at _dist/wcc.dist.cjs_.  Example:
-```js
-const { renderToString } = require('wc-compiler/dist/wcc.dist.cjs');
-```
-
 ## Documentation
 
 See our [website](https://merry-caramel-524e61.netlify.app/) for API docs and examples.

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "wc-compiler",
-  "version": "0.15.1",
+  "version": "0.17.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
     "url": "https://github.com/ProjectEvergreen/wcc.git"
   },
-  "main": "src/wcc.js",
   "type": "module",
+  "main": "src/wcc.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/wcc.js",
+      "types": "./src/index.d.ts"
+    },
+    "./register": "./src/register.js",
+    "./src/jsx-loader.js": "./src/jsx-loader.js"
+  },
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "keywords": [
     "Web Components",
@@ -17,53 +26,51 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "files": [
-    "src/",
-    "dist/wcc.dist.cjs"
+    "src/"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "eslint --ignore-pattern \"*.json\" \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
+    "lint": "eslint",
+    "lint:types": "tsc --project tsconfig.json",
     "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
     "docs:build": "node ./build.js",
     "docs:serve": "npm run clean && npm run docs:build && http-server ./dist --open",
-    "sandbox": "npm run clean && concurrently \"nodemon --loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx,ts ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "sandbox": "npm run clean && concurrently \"nodemon --loader ./test-loader.js --watch src --watch sandbox -e js,md,css,html,jsx,ts ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
     "start": "npm run docs:serve",
     "test": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/ts*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
-    "test:exp": "c8 node --loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./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:exp": "npm run test:exp -- --watch",
-    "dist": "rollup -c rollup.config.js",
-    "prepublishOnly": "npm run clean && npm run dist"
+    "test:tdd:jsx": "npm run test:jsx -- --watch"
   },
   "dependencies": {
     "@projectevergreen/acorn-jsx-esm": "~0.1.0",
     "acorn": "^8.14.0",
     "acorn-walk": "^8.3.4",
     "astring": "^1.9.0",
-    "parse5": "^6.0.1",
+    "parse5": "^7.2.1",
     "sucrase": "^3.35.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-syntax-import-assertions": "^7.24.1",
-    "@babel/preset-react": "^7.24.1",
+    "@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",
     "@mapbox/rehype-prism": "^0.8.0",
-    "@rollup/plugin-commonjs": "^28.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.13.4",
     "c8": "^7.11.2",
     "chai": "^4.3.6",
     "concurrently": "^7.1.0",
-    "eslint": "^8.14.0",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint": "^9.11.1",
     "eslint-plugin-no-only-tests": "^2.6.0",
+    "globals": "^15.10.0",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
     "livereload": "^0.9.3",
@@ -78,8 +85,8 @@
     "remark-rehype": "^10.1.0",
     "remark-toc": "^8.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^4.26.0",
     "simple.css": "^0.1.3",
+    "typescript": "^5.8.2",
     "unified": "^10.1.2"
   }
 }

package/src/dom-shim.js

@@ -1,3 +1,55 @@
+// @ts-nocheck
+import { parse, parseFragment, serialize } from 'parse5';
+
+export function getParse(html) {
+  return html.indexOf('<html>') >= 0 || html.indexOf('<body>') >= 0 || html.indexOf('<head>') >= 0
+    ? parse
+    : parseFragment;
+}
+
+function isShadowRoot(element) {
+  return Object.getPrototypeOf(element).constructor.name === 'ShadowRoot';
+}
+
+function deepClone(obj, map = new WeakMap()) {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  if (typeof obj === 'function') {
+    const clonedFn = obj.bind({});
+    Object.assign(clonedFn, obj);
+    return clonedFn;
+  }
+
+  if (map.has(obj)) {
+    return map.get(obj);
+  }
+
+  const result = Array.isArray(obj) ? [] : {};
+  map.set(obj, result);
+
+  for (const key of Object.keys(obj)) {
+    result[key] = deepClone(obj[key], map);
+  }
+
+  return result;
+}
+
+// Creates an empty parse5 element without the parse5 overhead resulting in better performance
+function getParse5ElementDefaults(element, tagName) {
+  return {
+    addEventListener: noop,
+    attrs: [],
+    parentNode: element.parentNode,
+    childNodes: [],
+    nodeName: tagName,
+    tagName: tagName,
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    ...(tagName === 'template' ? { content: { nodeName: '#document-fragment', childNodes: [] } } : {})
+  };
+}
+
 function noop() { }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
@@ -19,13 +71,81 @@ class EventTarget {
 // EventTarget <- Node
 // TODO should be an interface?
 class Node extends EventTarget {
-  // eslint-disable-next-line
+  constructor() {
+    super();
+    // Parse5 properties
+    this.attrs = [];
+    this.parentNode = null;
+    this.childNodes = [];
+    this.nodeName = '';
+  }
+
   cloneNode(deep) {
-    return this;
+    return deep ? deepClone(this) : Object.assign({}, this);
   }
 
   appendChild(node) {
-    this.innerHTML = this.innerHTML ? this.innerHTML += node.innerHTML : node.innerHTML;
+    const childNodes = (this.nodeName === 'template' ? this.content : this).childNodes;
+
+    if (node.parentNode) {
+      node.parentNode?.removeChild?.(node);
+    }
+
+    if (node.nodeName === 'template') {
+      if (isShadowRoot(this) && this.mode) {
+        node.attrs = [{ name: 'shadowrootmode', value: this.mode }];
+        childNodes.push(node);
+        node.parentNode = this;
+      } else {
+        this.childNodes = [...this.childNodes, ...node.content.childNodes];
+      }
+    } else if (node instanceof DocumentFragment) {
+      this.childNodes = [...this.childNodes, ...node.childNodes];
+    } else {
+      childNodes.push(node);
+      node.parentNode = this;
+    }
+
+    return node;
+  }
+
+  removeChild(node) {
+    const childNodes = (this.nodeName === 'template' ? this.content : this).childNodes;
+    if (!childNodes || !childNodes.length) {
+      return null;
+    }
+
+    const index = childNodes.indexOf(node);
+    if (index === -1) {
+      return null;
+    }
+
+    childNodes.splice(index, 1);
+    node.parentNode = null;
+
+    return node;
+  }
+
+  get textContent() {
+    if (this.nodeName === '#text') {
+      return this.value || '';
+    }
+
+    return this.childNodes
+      .map((child) => child.nodeName === '#text' ? child.value : child.textContent)
+      .join('');
+  }
+
+  set textContent(value) {
+    this.childNodes = [];
+
+    if (value) {
+      const textNode = new Node();
+      textNode.nodeName = '#text';
+      textNode.value = value;
+      textNode.parentNode = this;
+      this.childNodes.push(textNode);
+    }
   }
 }
 
@@ -34,33 +154,44 @@ class Node extends EventTarget {
 class Element extends Node {
   constructor() {
     super();
-    this.shadowRoot = null;
-    this.innerHTML = '';
-    this.attributes = {};
   }
 
   attachShadow(options) {
     this.shadowRoot = new ShadowRoot(options);
-
+    this.shadowRoot.parentNode = this;
     return this.shadowRoot;
   }
 
-  // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
-  // eslint-disable-next-line
-  getInnerHTML() {
-    return this.shadowRoot ? this.shadowRoot.innerHTML : this.innerHTML;
+  getHTML({ serializableShadowRoots = false }) {
+    return this.shadowRoot && serializableShadowRoots && this.shadowRoot.serializable ? this.shadowRoot.innerHTML : '';
   }
 
-  setAttribute(name, value) {
-    this.attributes[name] = value;
+  get innerHTML() {
+    const childNodes = (this.nodeName === 'template' ? this.content : this).childNodes;
+    return childNodes ? serialize({ childNodes }) : '';
   }
 
-  getAttribute(name) {
-    return this.attributes[name];
+  set innerHTML(html) {
+    (this.nodeName === 'template' ? this.content : this).childNodes = getParse(html)(html).childNodes;
   }
 
   hasAttribute(name) {
-    return !!this.attributes[name];
+    return this.attrs.some((attr) => attr.name === name);
+  }
+
+  getAttribute(name) {
+    const attr = this.attrs.find((attr) => attr.name === name);
+    return attr ? attr.value : null;
+  }
+
+  setAttribute(name, value) {
+    const attr = this.attrs?.find((attr) => attr.name === name);
+
+    if (attr) {
+      attr.value = value;
+    } else {
+      this.attrs?.push({ name, value });
+    }
   }
 }
 
@@ -75,7 +206,7 @@ class Document extends Node {
         return new HTMLTemplateElement();
 
       default:
-        return new HTMLElement();
+        return new HTMLElement(tagName);
 
     }
   }
@@ -88,6 +219,10 @@ class Document extends Node {
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 // EventTarget <- Node <- Element <- HTMLElement
 class HTMLElement extends Element {
+  constructor(tagName) {
+    super();
+    Object.assign(this, getParse5ElementDefaults(this, tagName));
+  }
   connectedCallback() { }
 }
 
@@ -100,9 +235,18 @@ class DocumentFragment extends Node { }
 class ShadowRoot extends DocumentFragment {
   constructor(options) {
     super();
-    this.mode = options.mode || 'closed';
+    this.mode = options.mode ?? 'closed';
+    this.serializable = options.serializable ?? false;
     this.adoptedStyleSheets = [];
   }
+
+  get innerHTML() {
+    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;
+  }
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement
@@ -110,22 +254,11 @@ class ShadowRoot extends DocumentFragment {
 class HTMLTemplateElement extends HTMLElement {
   constructor() {
     super();
-    this.content = new DocumentFragment();
-  }
-
-  // TODO open vs closed shadow root
-  set innerHTML(html) {
-    if (this.content) {
-      this.content.innerHTML = `
-        <template shadowrootmode="open">
-          ${html}
-        </template>
-      `;
-    }
-  }
-
-  get innerHTML() {
-    return this.content && this.content.innerHTML ? this.content.innerHTML : undefined;
+    // Gets element defaults for template element instead of parsing a
+    // <template></template> with parse5. Results in better performance
+    // when creating templates
+    Object.assign(this, getParse5ElementDefaults(this, 'template'));
+    this.content.cloneNode = this.cloneNode.bind(this);
   }
 }
 
@@ -156,4 +289,5 @@ globalThis.addEventListener = globalThis.addEventListener ?? noop;
 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;

package/src/index.d.ts

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

package/src/jsx-loader.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-depth, complexity */
 // https://nodejs.org/api/esm.html#esm_loaders
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
@@ -6,6 +5,8 @@ import { generate } from 'astring';
 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???
 import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
 import { transform } from 'sucrase';
@@ -138,13 +139,13 @@ function parseJsxElement(element, moduleContents = '') {
               const { expression } = value;
 
               if (expression.type === 'Identifier') {
-                string += ` ${name}=\$\{${expression.name}\}`;
+                string += ` ${name}=$\{${expression.name}}`;
               }
 
               if (expression.type === 'MemberExpression') {
                 if (expression.object.type === 'Identifier') {
                   if (expression.property.type === 'Identifier') {
-                    string += ` ${name}=\$\{${expression.object.name}.${expression.property.name}\}`;
+                    string += ` ${name}=$\{${expression.object.name}.${expression.property.name}}`;
                   }
                 }
               }
@@ -174,7 +175,7 @@ function parseJsxElement(element, moduleContents = '') {
 
       if (type === 'Identifier') {
         // You have {count} TODOs left to complete
-        string += `\$\{${element.expression.name}\}`;
+        string += `$\{${element.expression.name}}`;
       } else if (type === 'MemberExpression') {
         const { object } = element.expression.object;
 
@@ -187,7 +188,7 @@ function parseJsxElement(element, moduleContents = '') {
           // const { todos } = this;
           // ....
           // You have {todos.length} Todos left to complete
-          string += `\$\{${element.expression.object.name}.${element.expression.property.name}\}`;
+          string += `$\{${element.expression.object.name}.${element.expression.property.name}}`;
         }
       }
     }
@@ -251,11 +252,13 @@ export function parseJsx(moduleURL) {
 
   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) {
@@ -266,6 +269,7 @@ export function parseJsx(moduleURL) {
                     ...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);
@@ -297,6 +301,7 @@ export function parseJsx(moduleURL) {
                     sourceType: 'module'
                   });
 
+                  // @ts-ignore
                   n1.value.body.body[n2] = transformed;
                 }
               }
@@ -309,7 +314,9 @@ export function parseJsx(moduleURL) {
       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);
         }
       }
@@ -317,6 +324,7 @@ export function parseJsx(moduleURL) {
   }, {
     // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
     ...walk.base,
+    // @ts-ignore
     JSXElement: () => {}
   });
 
@@ -325,7 +333,9 @@ export function parseJsx(moduleURL) {
     let insertPoint;
     for (const line of tree.body) {
       // test for class MyComponent vs export default class MyComponent
+      // @ts-ignore
       if (line.type === 'ClassDeclaration' || (line.declaration && line.declaration.type) === 'ClassDeclaration') {
+        // @ts-ignore
         insertPoint = line.declaration.body.start + 1;
       }
     }
@@ -333,7 +343,6 @@ export function parseJsx(moduleURL) {
     let newModuleContents = generate(tree);
 
     // TODO better way to determine value type?
-    /* eslint-disable indent */
     newModuleContents = `${newModuleContents.slice(0, insertPoint)}
       static get observedAttributes() {
         return [${[...observedAttributes].map(attr => `'${attr}'`).join(',')}]
@@ -366,7 +375,6 @@ export function parseJsx(moduleURL) {
 
       ${newModuleContents.slice(insertPoint)}
     `;
-    /* eslint-enable indent */
 
     tree = acorn.Parser.extend(jsx()).parse(newModuleContents, {
       ecmaVersion: 'latest',

package/src/register.js

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