wc-compiler 0.6.1 → 0.7.0

package/dist/wcc.dist.cjs

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var fs = require('fs');
-var path = require('path');
-var url = require('url');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +25,6 @@ function _interopNamespace(e) {
 }
 
 var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
-var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 
 function noop() { }
 
@@ -86,7 +83,7 @@ class Document extends Node$1 {
         return new HTMLTemplateElement();
 
       default:
-        return new HTMLElement();
+        return new HTMLElement$1();
 
     }
   }
@@ -98,7 +95,7 @@ class Document extends Node$1 {
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 // EventTarget <- Node <- Element <- HTMLElement
-class HTMLElement extends Element {
+class HTMLElement$1 extends Element {
   attachShadow(options) {
     this.shadowRoot = new ShadowRoot(options);
 
@@ -129,7 +126,7 @@ class ShadowRoot extends DocumentFragment {
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement
 // EventTarget <- Node <- Element <- HTMLElement <- HTMLTemplateElement
-class HTMLTemplateElement extends HTMLElement {
+class HTMLTemplateElement extends HTMLElement$1 {
   constructor() {
     super();
     this.content = new DocumentFragment();
@@ -171,7 +168,7 @@ class CustomElementsRegistry {
 globalThis.addEventListener = noop;
 globalThis.document = new Document();
 globalThis.customElements = new CustomElementsRegistry();
-globalThis.HTMLElement = HTMLElement;
+globalThis.HTMLElement = HTMLElement$1;
 
 // Reserved word lists for various dialects of the language
 
@@ -27632,7 +27629,7 @@ var serialize = function(node, options) {
 
 /* eslint-disable max-depth, complexity */
 
-url.pathToFileURL(`${process.cwd()}/`).href;
+new URL(`file://${process.cwd()}/`);
 
 // TODO same hack as definitions
 // https://github.com/ProjectEvergreen/wcc/discussions/74
@@ -27647,7 +27644,7 @@ function getParse$1(html) {
 }
 
 function getParser(moduleURL) {
-  const isJSX = path__default["default"].extname(moduleURL.pathname) === '.jsx';
+  const isJSX = moduleURL.pathname.split('.').pop() === 'jsx';
 
   if (!isJSX) {
     return;
@@ -27819,14 +27816,52 @@ function parseJsxElement(element, moduleContents = '') {
   return string;
 }
 
+// TODO handle if / else statements
+// https://github.com/ProjectEvergreen/wcc/issues/88
+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';
+
+  if (isConstructorThisAssignment) {
+    // this.name = 'something'; // constructor
+    references.push(expression.left.property.name);
+  } else if (isRenderFunctionContext && type === 'VariableDeclaration') {
+    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;
+        id.properties.forEach((property) => {
+          references.push(property.key.name);
+        });
+      }
+    });
+  }
+
+  return references;
+}
+
 function parseJsx(moduleURL) {
   const moduleContents = fs__default["default"].readFileSync(moduleURL, 'utf-8');
-  string = '';
-
-  const tree = Parser$2.extend(jsx()).parse(moduleContents, {
+  // would be nice if we could do this instead, so we could know ahead of time
+  // const { inferredObservability } = await import(moduleURL);
+  // however, this requires making parseJsx async, but WCC acorn walking is done sync
+  const hasOwnObservedAttributes = undefined;
+  let inferredObservability = false;
+  let observedAttributes = [];
+  let tree = Parser$2.extend(jsx()).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   });
+  string = '';
 
   simple(tree, {
     ClassDeclaration(node) {
@@ -27834,29 +27869,46 @@ function parseJsx(moduleURL) {
         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$1(html)(html);
-                const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
-
-                applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
-
-                const finalHtml = serialize(elementTree);
-                const transformed = parse$1(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
-                  ecmaVersion: 'latest',
-                  sourceType: 'module'
-                });
-
-                n1.value.body.body[n2] = transformed;
+          if (n1.type === 'MethodDefinition') {
+            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)
+                  ];
+                } else if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
+                  const html = parseJsxElement(n.argument, moduleContents);
+                  const elementTree = getParse$1(html)(html);
+                  const elementRoot = hasShadowRoot ? 'this.shadowRoot' : 'this';
+
+                  applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
+
+                  const finalHtml = serialize(elementTree);
+                  const transformed = parse$1(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                    ecmaVersion: 'latest',
+                    sourceType: 'module'
+                  });
+
+                  n1.value.body.body[n2] = transformed;
+                }
               }
             }
           }
         }
       }
+    },
+    ExportNamedDeclaration(node) {
+      const { declaration } = node;
+
+      if (declaration && declaration.type === 'VariableDeclaration' && declaration.kind === 'const' && declaration.declarations.length === 1) {
+        if (declaration.declarations[0].id.name === 'inferredObservability') {
+          inferredObservability = Boolean(node.declaration.declarations[0].init.raw);
+        }
+      }
     }
   }, {
     // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
@@ -27864,6 +27916,68 @@ function parseJsx(moduleURL) {
     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
+      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;
+          }
+        }
+      }
+    }
+
+    let newModuleContents = escodegen.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(',')}]
+      }
+
+      attributeChangedCallback(name, oldValue, newValue) {
+        function getValue(value) {
+          return value.charAt(0) === '{' || value.charAt(0) === '['
+            ? JSON.parse(value)
+            : !isNaN(value)
+              ? parseInt(value, 10)
+              : value === 'true' || value === 'false'
+                ? value === 'true' ? true : false
+                : value;
+        }
+        if (newValue !== oldValue) {
+          switch(name) {
+            ${observedAttributes.map((attr) => {
+              return `
+                case '${attr}':
+                  this.${attr} = getValue(newValue);
+                  break;
+              `;
+            }).join('\n')}
+          }
+
+          this.render();
+        }
+      }
+
+      ${newModuleContents.slice(insertPoint)}
+    `;
+    /* eslint-enable indent */
+
+    tree = Parser$2.extend(jsx()).parse(newModuleContents, {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    });
+  }
+
   return tree;
 }
 
@@ -27933,9 +28047,10 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
     ImportDeclaration(node) {
       const specifier = node.source.value;
       const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
+      const extension = specifier.split('.').pop();
 
       // TODO would like to decouple .jsx from the core, ideally
-      if (!isBareSpecifier && ['.js', '.jsx'].includes(path__default["default"].extname(specifier))) {
+      if (!isBareSpecifier && ['js', 'jsx'].includes(extension)) {
         const dependencyModuleURL = new URL(node.source.value, moduleURL);
 
         registerDependencies(dependencyModuleURL, definitions, nextDepth);
@@ -27998,19 +28113,25 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
     : (await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(pathname)).default;
   const dataLoader = (await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(pathname)).getData;
   const data = dataLoader ? await dataLoader() : {};
-  const elementInstance = new element(data); // eslint-disable-line new-cap
 
-  attrs.forEach((attr) => {
-    elementInstance.setAttribute(attr.name, attr.value);
-
-    if (attr.name === 'hydrate') {
-      definitions[tagName].hydrate = attr.value;
-    }
-  });
+  if (element) {
+    const elementInstance = new element(data); // eslint-disable-line new-cap
 
-  await elementInstance.connectedCallback();
-
-  return elementInstance;
+    attrs.forEach((attr) => {
+      elementInstance.setAttribute(attr.name, attr.value);
+  
+      if (attr.name === 'hydrate') {
+        definitions[tagName].hydrate = attr.value;
+      }
+    });
+  
+    await elementInstance.connectedCallback();
+  
+    return elementInstance;
+  } else {
+    console.debug('No custom element class found for this file');
+    return new HTMLElement();
+  }
 }
 
 async function renderToString(elementURL) {

package/package.json

@@ -1,10 +1,19 @@
 {
   "name": "wc-compiler",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Experimental native Web Components compiler.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ProjectEvergreen/wcc.git"
+  },
   "main": "src/wcc.js",
   "type": "module",
   "author": "Owen Buckley <owen@thegreenhouse.io>",
+  "keywords": [
+    "Web Components",
+    "JSX",
+    "Greenwood"
+  ],
   "license": "MIT",
   "engines": {
     "node": ">=14"
@@ -23,7 +32,7 @@
     "build": "node ./build.js",
     "serve": "node ./build.js && http-server ./dist --open",
     "start": "npm run develop",
-    "test": "mocha --exclude \"./test/cases/jsx/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
+    "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",

package/src/jsx-loader.js

@@ -6,10 +6,8 @@ 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 baseURL = new URL(`file://${process.cwd()}/`);
 const jsxRegex = /\.(jsx)$/;
 
 // TODO same hack as definitions
@@ -25,7 +23,7 @@ function getParse(html) {
 }
 
 export function getParser(moduleURL) {
-  const isJSX = path.extname(moduleURL.pathname) === '.jsx';
+  const isJSX = moduleURL.pathname.split('.').pop() === 'jsx';
 
   if (!isJSX) {
     return;
@@ -197,14 +195,52 @@ function parseJsxElement(element, moduleContents = '') {
   return string;
 }
 
+// TODO handle if / else statements
+// https://github.com/ProjectEvergreen/wcc/issues/88
+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';
+
+  if (isConstructorThisAssignment) {
+    // this.name = 'something'; // constructor
+    references.push(expression.left.property.name);
+  } else if (isRenderFunctionContext && type === 'VariableDeclaration') {
+    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;
+        id.properties.forEach((property) => {
+          references.push(property.key.name);
+        });
+      }
+    });
+  }
+
+  return references;
+}
+
 export function parseJsx(moduleURL) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
-  string = '';
-
-  const tree = acorn.Parser.extend(jsx()).parse(moduleContents, {
+  // would be nice if we could do this instead, so we could know ahead of time
+  // const { inferredObservability } = await import(moduleURL);
+  // however, this requires making parseJsx async, but WCC acorn walking is done sync
+  const hasOwnObservedAttributes = undefined;
+  let inferredObservability = false;
+  let observedAttributes = [];
+  let tree = acorn.Parser.extend(jsx()).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   });
+  string = '';
 
   walk.simple(tree, {
     ClassDeclaration(node) {
@@ -212,29 +248,46 @@ export function parseJsx(moduleURL) {
         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;
+          if (n1.type === 'MethodDefinition') {
+            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)
+                  ];
+                } 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 finalHtml = serialize(elementTree);
+                  const transformed = acorn.parse(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                    ecmaVersion: 'latest',
+                    sourceType: 'module'
+                  });
+
+                  n1.value.body.body[n2] = transformed;
+                }
               }
             }
           }
         }
       }
+    },
+    ExportNamedDeclaration(node) {
+      const { declaration } = node;
+
+      if (declaration && declaration.type === 'VariableDeclaration' && declaration.kind === 'const' && declaration.declarations.length === 1) {
+        if (declaration.declarations[0].id.name === 'inferredObservability') {
+          inferredObservability = Boolean(node.declaration.declarations[0].init.raw);
+        }
+      }
     }
   }, {
     // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
@@ -242,6 +295,68 @@ export function parseJsx(moduleURL) {
     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
+      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;
+          }
+        }
+      }
+    }
+
+    let newModuleContents = escodegen.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(',')}]
+      }
+
+      attributeChangedCallback(name, oldValue, newValue) {
+        function getValue(value) {
+          return value.charAt(0) === '{' || value.charAt(0) === '['
+            ? JSON.parse(value)
+            : !isNaN(value)
+              ? parseInt(value, 10)
+              : value === 'true' || value === 'false'
+                ? value === 'true' ? true : false
+                : value;
+        }
+        if (newValue !== oldValue) {
+          switch(name) {
+            ${observedAttributes.map((attr) => {
+              return `
+                case '${attr}':
+                  this.${attr} = getValue(newValue);
+                  break;
+              `;
+            }).join('\n')}
+          }
+
+          this.render();
+        }
+      }
+
+      ${newModuleContents.slice(insertPoint)}
+    `;
+    /* eslint-enable indent */
+
+    tree = acorn.Parser.extend(jsx()).parse(newModuleContents, {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    });
+  }
+
   return tree;
 }
 
@@ -265,7 +380,8 @@ export async function load(url, context, defaultLoad) {
 
     return {
       format: 'module',
-      source: escodegen.generate(jsFromJsx)
+      source: escodegen.generate(jsFromJsx),
+      shortCircuit: true
     };
   }
 

package/src/wcc.js

@@ -8,7 +8,6 @@ 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
@@ -74,9 +73,10 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
     ImportDeclaration(node) {
       const specifier = node.source.value;
       const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
+      const extension = specifier.split('.').pop();
 
       // TODO would like to decouple .jsx from the core, ideally
-      if (!isBareSpecifier && ['.js', '.jsx'].includes(path.extname(specifier))) {
+      if (!isBareSpecifier && ['js', 'jsx'].includes(extension)) {
         const dependencyModuleURL = new URL(node.source.value, moduleURL);
 
         registerDependencies(dependencyModuleURL, definitions, nextDepth);
@@ -139,19 +139,25 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
     : (await import(pathname)).default;
   const dataLoader = (await import(pathname)).getData;
   const data = dataLoader ? await dataLoader() : {};
-  const elementInstance = new element(data); // eslint-disable-line new-cap
 
-  attrs.forEach((attr) => {
-    elementInstance.setAttribute(attr.name, attr.value);
+  if (element) {
+    const elementInstance = new element(data); // eslint-disable-line new-cap
 
-    if (attr.name === 'hydrate') {
-      definitions[tagName].hydrate = attr.value;
-    }
-  });
-
-  await elementInstance.connectedCallback();
-
-  return elementInstance;
+    attrs.forEach((attr) => {
+      elementInstance.setAttribute(attr.name, attr.value);
+  
+      if (attr.name === 'hydrate') {
+        definitions[tagName].hydrate = attr.value;
+      }
+    });
+  
+    await elementInstance.connectedCallback();
+  
+    return elementInstance;
+  } else {
+    console.debug('No custom element class found for this file');
+    return new HTMLElement();
+  }
 }
 
 async function renderToString(elementURL) {