wc-compiler 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Experimental native Web Components compiler.",
   "main": "src/wcc.js",
   "type": "module",
@@ -11,33 +11,36 @@
   },
   "files": [
     "src/",
-    "dist/wcc.dist.js"
+    "dist/wcc.dist.cjs"
   ],
   "publishConfig": {
     "access": "public"
   },
   "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",
-    "example:ssg": "node ./examples/ssg.js",
-    "example:ssr": "node ./examples/ssr.js",
     "start": "npm run develop",
-    "test": "c8 mocha --parallel",
-    "test:tdd": "npm run test --watch",
+    "test": "mocha --exclude \"./test/cases/jsx/**\" \"./test/**/**/*.spec.js\"",
+    "test:jsx": "c8 node --experimental-loader ./test-jsx-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
+    "test:tdd": "npm run test -- --watch",
+    "test:tdd:jsx": "npm run test:jsx -- --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",
@@ -46,6 +49,7 @@
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
     "mocha": "^9.2.2",
+    "node-fetch": "^3.2.6",
     "nodemon": "^2.0.15",
     "prismjs": "^1.28.0",
     "rehype-autolink-headings": "^6.1.1",

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);
+}