wc-compiler 0.5.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Experimental native Web Components compiler.",
   "main": "src/wcc.js",
   "type": "module",
@@ -18,24 +18,29 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "eslint \"*.*js\" \"./src/**/**/*.js\" \"./test/**/**/*.js\"",
-    "develop": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html ./build.js\" \"http-server ./dist --open\"",
+    "lint": "eslint \"*.*js\" \"./src/**/**/*.js*\" \"./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",
-    "test": "c8 mocha --parallel",
-    "test:tdd": "npm run test --watch",
+    "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",
+    "test:tdd:exp": "npm run test:exp -- --watch",
     "dist": "rollup -c rollup.config.js",
     "prepublishOnly": "npm run clean && npm run dist"
   },
   "dependencies": {
     "acorn": "^8.7.0",
+    "acorn-jsx": "^5.3.2",
     "acorn-walk": "^8.2.0",
+    "escodegen": "^2.0.0",
     "parse5": "^6.0.1"
   },
   "devDependencies": {
     "@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",
     "c8": "^7.11.2",
     "chai": "^4.3.6",

package/src/dom-shim.js

@@ -1,15 +1,16 @@
+function noop() { }
+
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
-class EventTarget { }
+class EventTarget {
+  constructor() {
+    this.addEventListener = noop;
+  }
+}
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Node
 // EventTarget <- Node
 // TODO should be an interface?
 class Node extends EventTarget {
-  constructor() {
-    super();
-    // console.debug('Node constructor');
-  }
-
   // eslint-disable-next-line
   cloneNode(deep) {
     return this;
@@ -25,9 +26,8 @@ class Node extends EventTarget {
 class Element extends Node {
   constructor() {
     super();
-    // console.debug('Element constructor');
     this.shadowRoot = null;
-    this.innerHTML;
+    this.innerHTML = '';
     this.attributes = {};
   }
 
@@ -44,24 +44,37 @@ 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();
+
+    }
+  }
+
+  createDocumentFragment(html) {
+    return new DocumentFragment(html);
+  }
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 // EventTarget <- Node <- Element <- HTMLElement
 class HTMLElement extends Element {
-  constructor() {
-    super();
-    // console.debug('HTMLElement::constructor');
-  }
-
   attachShadow(options) {
-    // console.debug('HTMLElement::attachShadow');
     this.shadowRoot = new ShadowRoot(options);
 
     return this.shadowRoot;
   }
 
-  connectedCallback() {
-    // console.debug('HTMLElement::connectedCallback');
-  }
+  connectedCallback() { }
 
   // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
   // eslint-disable-next-line
@@ -72,20 +85,13 @@ class HTMLElement extends Element {
 
 // https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
 // EventTarget <- Node <- DocumentFragment
-class DocumentFragment extends Node {
-  // eslint-disable-next-line
-  constructor(contents) {
-    super();
-    // console.debug('DocumentFragment constructor', contents);
-  }
-}
+class DocumentFragment extends Node { }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
 // EventTarget <- Node <- DocumentFragment <- ShadowRoot
 class ShadowRoot extends DocumentFragment {
   constructor(options) {
     super();
-    // console.debug('ShadowRoot constructor');
     this.mode = options.mode || 'closed';
   }
 }
@@ -95,18 +101,18 @@ class ShadowRoot extends DocumentFragment {
 class HTMLTemplateElement extends HTMLElement {
   constructor() {
     super();
-    // console.debug('HTMLTemplateElement constructor');
-
     this.content = new DocumentFragment();
   }
 
   // TODO open vs closed shadow root
   set innerHTML(html) {
-    this.content.innerHTML = `
-      <template shadowroot="open">
-        ${html}
-      </template>
-    `;
+    if (this.content) {
+      this.content.innerHTML = `
+        <template shadowroot="open">
+          ${html}
+        </template>
+      `;
+    }
   }
 
   get innerHTML() {
@@ -114,33 +120,24 @@ class HTMLTemplateElement extends HTMLElement {
   }
 }
 
-const customElementsRegistry = {};
-
-globalThis.document = {
-  createElement(tagName) {
-    switch (tagName) {
-
-      case 'template':
-        return new HTMLTemplateElement();
-
-      default:
-        return new HTMLElement();
+// https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
+class CustomElementsRegistry {
+  constructor() {
+    this.customElementsRegistry = {};
+  }
 
-    }
-  },
-  createDocumentFragment(html) {
-    return new DocumentFragment(html);
+  define(tagName, BaseClass) {
+    this.customElementsRegistry[tagName] = BaseClass;
   }
-};
 
-globalThis.HTMLElement = HTMLElement;
-globalThis.customElements = {
-  define: (tagName, BaseClass) => {
-    // console.debug('customElements.define => ', tagName);
-    customElementsRegistry[tagName] = BaseClass;
-  },
-  get: (tagName) => {
-    // console.debug('customElements.get => ', tagName);
-    return customElementsRegistry[tagName];
+  get(tagName) {
+    return this.customElementsRegistry[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;

package/src/jsx-loader.js

@@ -0,0 +1,273 @@
+/* eslint-disable max-depth, complexity */
+// https://nodejs.org/api/esm.html#esm_loaders
+import * as acorn from 'acorn';
+import * as walk from 'acorn-walk';
+import escodegen from 'escodegen';
+import fs from 'fs';
+import jsx from 'acorn-jsx';
+import { parse, parseFragment, serialize } from 'parse5';
+import path from 'path';
+import { URL, pathToFileURL } from 'url';
+
+const baseURL = pathToFileURL(`${process.cwd()}/`).href;
+const jsxRegex = /\.(jsx)$/;
+
+// TODO same hack as definitions
+// https://github.com/ProjectEvergreen/wcc/discussions/74
+let string;
+
+// 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
+    ? parse
+    : parseFragment;
+}
+
+export function getParser(moduleURL) {
+  const isJSX = path.extname(moduleURL.pathname) === '.jsx';
+
+  if (!isJSX) {
+    return;
+  }
+
+  return {
+    parser: acorn.Parser.extend(jsx()),
+    config: {
+      // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
+      ...walk.base,
+      JSXElement: () => {}
+    }
+  };
+}
+
+function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = false) {
+  try {
+    for (const node of tree.childNodes) {
+      const attrs = node.attrs;
+
+      // check for attributes
+      // and swap out __this__ with depthful parentElement chain
+      if (attrs && attrs.length > 0) {
+        for (const attr in attrs) {
+          const { value } = attrs[attr];
+
+          if (value.indexOf('__this__.') >= 0) {
+            const root = hasShadowRoot ? 'parentNode.host' : 'parentElement';
+
+            node.attrs[attr].value = value.replace(/__this__/g, `this${'.parentElement'.repeat(currentDepth - 1)}.${root}`);
+          }
+        }
+      }
+
+      if (node.childNodes && node.childNodes.length > 0) {
+        applyDomDepthSubstitutions(node, currentDepth + 1, hasShadowRoot);
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+
+  return tree;
+}
+
+function parseJsxElement(element, moduleContents = '') {
+  try {
+    const { type } = element;
+
+    if (type === 'JSXElement') {
+      const { openingElement } = element;
+      const { attributes } = openingElement;
+      const tagName = openingElement.name.name;
+
+      string += `<${tagName}`;
+
+      for (const attribute of attributes) {
+        const { name } = attribute.name;
+
+        // handle events
+        if (name.startsWith('on')) {
+          const { value } = attribute;
+          const { expression } = value;
+
+          // onclick={this.increment}
+          if (value.type === 'JSXExpressionContainer') {
+            if (expression.type === 'MemberExpression') {
+              if (expression.object.type === 'ThisExpression') {
+                if (expression.property.type === 'Identifier') {
+                  // we leave markers for `this` so we can replace it later while also NOT accidentally replacing
+                  // legitimate uses of this that might be actual content / markup of the custom element
+                  string += ` ${name}="__this__.${expression.property.name}()"`;
+                }
+              }
+            }
+
+            // onclick={() => this.deleteUser(user.id)}
+            // TODO onclick={(e) => { this.deleteUser(user.id) }}
+            // TODO onclick={(e) => { this.deleteUser(user.id) && this.logAction(user.id) }}
+            // https://github.com/ProjectEvergreen/wcc/issues/88
+            if (expression.type === 'ArrowFunctionExpression') {
+              if (expression.body && expression.body.type === 'CallExpression') {
+                const { start, end } = expression;
+                string += ` ${name}="${moduleContents.slice(start, end).replace(/this./g, '__this__.').replace('() => ', '')}"`;
+              }
+            }
+
+            if (expression.type === 'AssignmentExpression') {
+              const { left, right } = expression;
+
+              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();"`;
+                }
+              }
+            }
+          }
+        } 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>
+          if (attribute.value) {
+            if (attribute.value.type === 'Literal') {
+              // xxx="yyy" >
+              string += ` ${name}="${attribute.value.value}"`;
+            } else if (attribute.value.type === 'JSXExpressionContainer') {
+              // xxx={allTodos.length} >
+              const { value } = attribute;
+              const { expression } = value;
+
+              if (expression.type === 'Identifier') {
+                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}\}`;
+                  }
+                }
+              }
+            }
+          } else {
+            // xxx >
+            string += ` ${name}`;
+          }
+        }
+      }
+
+      string += openingElement.selfClosing ? '/>' : '>';
+
+      if (element.children.length > 0) {
+        element.children.forEach(child => parseJsxElement(child, moduleContents));
+      }
+
+      string += `</${tagName}>`;
+    }
+
+    if (type === 'JSXText') {
+      string += element.raw;
+    }
+
+    if (type === 'JSXExpressionContainer') {
+      const { type } = element.expression;
+
+      if (type === 'Identifier') {
+        // You have {count} TODOs left to complete
+        string += `\$\{${element.expression.name}\}`;
+      } else if (type === 'MemberExpression') {
+        const { object } = element.expression.object;
+
+        // You have {this.todos.length} Todos left to complete
+        // https://github.com/ProjectEvergreen/wcc/issues/88
+        if (object && object.type === 'ThisExpression') {
+          // TODO ReferenceError: __this__ is not defined
+          // string += `\$\{__this__.${element.expression.object.property.name}.${element.expression.property.name}\}`;
+        } else {
+          // const { todos } = this;
+          // ....
+          // You have {todos.length} Todos left to complete
+          string += `\$\{${element.expression.object.name}.${element.expression.property.name}\}`;
+        }
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+
+  return string;
+}
+
+export function parseJsx(moduleURL) {
+  const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
+  string = '';
+
+  const tree = acorn.Parser.extend(jsx()).parse(moduleContents, {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  });
+
+  walk.simple(tree, {
+    ClassDeclaration(node) {
+      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' && n1.key.name === 'render') {
+            for (const n2 in n1.value.body.body) {
+              const n = n1.value.body.body[n2];
+
+              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 finalHtml = serialize(elementTree);
+                const transformed = acorn.parse(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                  ecmaVersion: 'latest',
+                  sourceType: 'module'
+                });
+
+                n1.value.body.body[n2] = transformed;
+              }
+            }
+          }
+        }
+      }
+    }
+  }, {
+    // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
+    ...walk.base,
+    JSXElement: () => {}
+  });
+
+  return tree;
+}
+
+// --------------
+
+export function resolve(specifier, context, defaultResolve) {
+  const { parentURL = baseURL } = context;
+
+  if (jsxRegex.test(specifier)) {
+    return {
+      url: new URL(specifier, parentURL).href
+    };
+  }
+
+  return defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function load(url, context, defaultLoad) {
+  if (jsxRegex.test(url)) {
+    const jsFromJsx = parseJsx(new URL(url));
+
+    return {
+      format: 'module',
+      source: escodegen.generate(jsFromJsx)
+    };
+  }
+
+  return defaultLoad(url, context, defaultLoad);
+}

package/src/wcc.js

@@ -1,10 +1,14 @@
+/* eslint-disable max-depth */
 // this must come first
 import './dom-shim.js';
 
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
+import escodegen from 'escodegen';
+import { getParser, parseJsx } from './jsx-loader.js';
 import { parse, parseFragment, serialize } from 'parse5';
 import fs from 'fs';
+import path from 'path';
 
 function getParse(html) {
   return html.indexOf('<html>') >= 0 || html.indexOf('<body>') >= 0 || html.indexOf('<head>') >= 0
@@ -54,10 +58,16 @@ async function renderComponentRoots(tree, definitions) {
   return tree;
 }
 
-function registerDependencies(moduleURL, definitions) {
+function registerDependencies(moduleURL, definitions, depth = 0) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
+  const nextDepth = depth += 1;
+  const customParser = getParser(moduleURL);
+  const parser = customParser ? customParser.parser : acorn;
+  const config = customParser ? customParser.config : {
+    ...walk.base
+  };
 
-  walk.simple(acorn.parse(moduleContents, {
+  walk.simple(parser.parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -65,47 +75,62 @@ function registerDependencies(moduleURL, definitions) {
       const specifier = node.source.value;
       const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
 
-      if (!isBareSpecifier) {
+      // TODO would like to decouple .jsx from the core, ideally
+      if (!isBareSpecifier && ['.js', '.jsx'].includes(path.extname(specifier))) {
         const dependencyModuleURL = new URL(node.source.value, moduleURL);
 
-        registerDependencies(dependencyModuleURL, definitions);
+        registerDependencies(dependencyModuleURL, definitions, nextDepth);
       }
     },
     ExpressionStatement(node) {
       if (isCustomElementDefinitionNode(node)) {
         const { arguments: args } = node.expression;
-        const tagName = args[0].value;
+        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
+          moduleURL,
+          source: escodegen.generate(tree),
+          url: moduleURL,
+          isEntry
         };
       }
     }
-  });
+  }, config);
 }
 
 async function getTagName(moduleURL) {
   const moduleContents = await fs.promises.readFile(moduleURL, 'utf-8');
+  const customParser = getParser(moduleURL);
+  const parser = customParser ? customParser.parser : acorn;
+  const config = customParser ? customParser.config : {
+    ...walk.base
+  };
   let tagName;
 
-  walk.simple(acorn.parse(moduleContents, {
+  walk.simple(parser.parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
     ExpressionStatement(node) {
       if (isCustomElementDefinitionNode(node)) {
-
         tagName = node.expression.arguments[0].value;
       }
     }
-  });
+  }, config);
 
   return tagName;
 }
 
-async function initializeCustomElement(elementURL, tagName, attrs = [], definitions = []) {
-  registerDependencies(elementURL, definitions);
+async function initializeCustomElement(elementURL, tagName, attrs = [], definitions = [], isEntry) {
+  if (!tagName) {
+    const depth = isEntry ? 1 : 0;
+    registerDependencies(elementURL, definitions, depth);
+  }
 
   // https://github.com/ProjectEvergreen/wcc/pull/67/files#r902061804
   const { pathname } = elementURL;
@@ -132,7 +157,8 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
 async function renderToString(elementURL) {
   const definitions = [];
   const elementTagName = await getTagName(elementURL);
-  const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions);
+  const isEntry = !!elementTagName;
+  const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions, isEntry);
 
   const elementHtml = elementInstance.shadowRoot
     ? elementInstance.getInnerHTML({ includeShadowRoots: true })
@@ -156,7 +182,7 @@ async function renderFromHTML(html, elements = []) {
   const definitions = [];
 
   for (const url of elements) {
-    await initializeCustomElement(url, undefined, undefined, definitions);
+    await initializeCustomElement(url, undefined, undefined, definitions, true);
   }
 
   const elementTree = getParse(html)(html);