wc-compiler 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
@@ -28,11 +28,12 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
-    "develop": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
-    "build": "node ./build.js",
-    "serve": "node ./build.js && http-server ./dist --open",
-    "start": "npm run develop",
+    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
+    "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 --experimental-loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "start": "npm run docs:serve",
     "test": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
     "test:exp": "c8 node --experimental-loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
     "test:tdd": "npm run test -- --watch",
@@ -41,18 +42,17 @@
     "prepublishOnly": "npm run clean && npm run dist"
   },
   "dependencies": {
+    "@projectevergreen/acorn-jsx-esm": "~0.1.0",
+    "@projectevergreen/escodegen-esm": "~0.1.0",
     "acorn": "^8.7.0",
-    "acorn-jsx": "^5.3.2",
     "acorn-walk": "^8.2.0",
-    "escodegen": "^2.0.0",
     "parse5": "^6.0.1"
   },
   "devDependencies": {
     "@ls-lint/ls-lint": "^1.10.0",
     "@mapbox/rehype-prism": "^0.8.0",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "c8": "^7.11.2",
     "chai": "^4.3.6",
     "concurrently": "^7.1.0",
@@ -61,8 +61,8 @@
     "eslint-plugin-no-only-tests": "^2.6.0",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
+    "livereload": "^0.9.3",
     "mocha": "^9.2.2",
-    "node-fetch": "^3.2.6",
     "nodemon": "^2.0.15",
     "prismjs": "^1.28.0",
     "rehype-autolink-headings": "^6.1.1",
@@ -73,7 +73,7 @@
     "remark-rehype": "^10.1.0",
     "remark-toc": "^8.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.7",
+    "rollup": "^3.29.3",
     "simple.css": "^0.1.3",
     "unified": "^10.1.2"
   }

package/src/dom-shim.js

@@ -31,6 +31,18 @@ class Element extends Node {
     this.attributes = {};
   }
 
+  attachShadow(options) {
+    this.shadowRoot = new ShadowRoot(options);
+
+    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;
+  }
+
   setAttribute(name, value) {
     this.attributes[name] = value;
   }
@@ -68,19 +80,7 @@ class Document extends Node {
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 // EventTarget <- Node <- Element <- HTMLElement
 class HTMLElement extends Element {
-  attachShadow(options) {
-    this.shadowRoot = new ShadowRoot(options);
-
-    return this.shadowRoot;
-  }
-
   connectedCallback() { }
-
-  // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
-  // eslint-disable-next-line
-  getInnerHTML(options = {}) {
-    return this.shadowRoot.innerHTML;
-  }
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
@@ -123,21 +123,27 @@ class HTMLTemplateElement extends HTMLElement {
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
 class CustomElementsRegistry {
   constructor() {
-    this.customElementsRegistry = {};
+    // TODO this should probably be a set or otherwise follow the spec?
+    // https://github.com/ProjectEvergreen/wcc/discussions/145
+    this.customElementsRegistry = new Map();
   }
 
   define(tagName, BaseClass) {
-    this.customElementsRegistry[tagName] = BaseClass;
+    // TODO this should probably fail as per the spec...
+    // e.g. if(this.customElementsRegistry.get(tagName))
+    // https://github.com/ProjectEvergreen/wcc/discussions/145
+    this.customElementsRegistry.set(tagName, BaseClass);
   }
 
   get(tagName) {
-    return this.customElementsRegistry[tagName];
+    return this.customElementsRegistry.get(tagName);
   }
 }
 
 // mock top level aliases (globalThis === window)
 // https://developer.mozilla.org/en-US/docs/Web/API/Window
-globalThis.addEventListener = noop;
-globalThis.document = new Document();
-globalThis.customElements = new CustomElementsRegistry();
-globalThis.HTMLElement = HTMLElement;
+// make this "idempotent" for now until a better idea comes along - https://github.com/ProjectEvergreen/wcc/discussions/145
+globalThis.addEventListener = globalThis.addEventListener ?? noop;
+globalThis.document = globalThis.document ?? new Document();
+globalThis.customElements = globalThis.customElements ?? new CustomElementsRegistry();
+globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;

package/src/jsx-loader.js

@@ -2,7 +2,7 @@
 // https://nodejs.org/api/esm.html#esm_loaders
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
-import escodegen from 'escodegen';
+import { generate } from '@projectevergreen/escodegen-esm';
 import fs from 'fs';
 import jsx from 'acorn-jsx';
 import { parse, parseFragment, serialize } from 'parse5';
@@ -38,6 +38,7 @@ export function getParser(moduleURL) {
   };
 }
 
+// replace all instances of __this__ marker with relative reference to the custom element parent node
 function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = false) {
   try {
     for (const node of tree.childNodes) {
@@ -50,9 +51,9 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
           const { value } = attrs[attr];
 
           if (value.indexOf('__this__.') >= 0) {
-            const root = hasShadowRoot ? 'parentNode.host' : 'parentElement';
+            const root = hasShadowRoot ? '.getRootNode().host' : `${'.parentElement'.repeat(currentDepth)}`;
 
-            node.attrs[attr].value = value.replace(/__this__/g, `this${'.parentElement'.repeat(currentDepth - 1)}.${root}`);
+            node.attrs[attr].value = value.replace(/__this__/g, `this${root}`);
           }
         }
       }
@@ -265,8 +266,26 @@ export function parseJsx(moduleURL) {
 
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
-                  const finalHtml = serialize(elementTree);
-                  const transformed = acorn.parse(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                  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}\`;
+
+                        if(!${elementRoot}) {
+                          this.attachShadow({ mode: 'open' });
+                          this.shadowRoot.appendChild(template.content.cloneNode(true));
+                        } else {
+                          this.shadowRoot.innerHTML = template.innerHTML;
+                        }
+                      `
+                    : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+                  const transformed = acorn.parse(renderHandler, {
                     ecmaVersion: 'latest',
                     sourceType: 'module'
                   });
@@ -300,19 +319,11 @@ export function parseJsx(moduleURL) {
     for (const line of tree.body) {
       // test for class MyComponent vs export default class MyComponent
       if (line.type === 'ClassDeclaration' || (line.declaration && line.declaration.type) === 'ClassDeclaration') {
-        const children = !line.declaration
-          ? line.body.body
-          : line.declaration.body.body;
-        for (const method of children) {
-          if (method.key.name === 'constructor') {
-            insertPoint = method.start - 1;
-            break;
-          }
-        }
+        insertPoint = line.declaration.body.start + 1;
       }
     }
 
-    let newModuleContents = escodegen.generate(tree);
+    let newModuleContents = generate(tree);
 
     // TODO better way to determine value type?
     /* eslint-disable indent */
@@ -380,7 +391,7 @@ export async function load(url, context, defaultLoad) {
 
     return {
       format: 'module',
-      source: escodegen.generate(jsFromJsx),
+      source: generate(jsFromJsx),
       shortCircuit: true
     };
   }

package/src/wcc.js

@@ -4,7 +4,7 @@ import './dom-shim.js';
 
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
-import escodegen from 'escodegen';
+import { generate } from '@projectevergreen/escodegen-esm';
 import { getParser, parseJsx } from './jsx-loader.js';
 import { parse, parseFragment, serialize } from 'parse5';
 import fs from 'fs';
@@ -94,7 +94,7 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
         definitions[tagName] = {
           instanceName: args[1].name,
           moduleURL,
-          source: escodegen.generate(tree),
+          source: generate(tree),
           url: moduleURL,
           isEntry
         };
@@ -134,9 +134,7 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
 
   // https://github.com/ProjectEvergreen/wcc/pull/67/files#r902061804
   const { pathname } = elementURL;
-  const element = tagName
-    ? customElements.get(tagName)
-    : (await import(pathname)).default;
+  const element = customElements.get(tagName) ?? (await import(pathname)).default;
   const dataLoader = (await import(pathname)).getData;
   const data = props
     ? props