wc-compiler 0.6.2 → 0.8.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() { }
 
@@ -27632,8 +27629,6 @@ var serialize = function(node, options) {
 
 /* eslint-disable max-depth, complexity */
 
-url.pathToFileURL(`${process.cwd()}/`).href;
-
 // TODO same hack as definitions
 // https://github.com/ProjectEvergreen/wcc/discussions/74
 let string;
@@ -27647,7 +27642,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 +27814,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 +27867,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 +27914,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 +28045,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);
@@ -28019,9 +28132,9 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
   }
 }
 
-async function renderToString(elementURL) {
+async function renderToString(elementURL, wrappingEntryTag = true) {
   const definitions = [];
-  const elementTagName = await getTagName(elementURL);
+  const elementTagName = wrappingEntryTag && await getTagName(elementURL);
   const isEntry = !!elementTagName;
   const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions, isEntry);
 
@@ -28030,7 +28143,7 @@ async function renderToString(elementURL) {
     : elementInstance.innerHTML;
   const elementTree = getParse(elementHtml)(elementHtml);
   const finalTree = await renderComponentRoots(elementTree, definitions);
-  const html = elementTagName ? `
+  const html = wrappingEntryTag && elementTagName ? `
       <${elementTagName}>
         ${serialize(finalTree)}
       </${elementTagName}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
@@ -9,6 +9,11 @@
   "main": "src/wcc.js",
   "type": "module",
   "author": "Owen Buckley <owen@thegreenhouse.io>",
+  "keywords": [
+    "Web Components",
+    "JSX",
+    "Greenwood"
+  ],
   "license": "MIT",
   "engines": {
     "node": ">=14"
@@ -22,12 +27,12 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "eslint \"*.*js\" \"./src/**/**/*.js*\" \"./test/**/**/*.js*\"",
+    "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",
-    "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",
@@ -42,6 +47,7 @@
     "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",
@@ -50,6 +56,8 @@
     "chai": "^4.3.6",
     "concurrently": "^7.1.0",
     "eslint": "^8.14.0",
+    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-plugin-no-only-tests": "^2.6.0",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
     "mocha": "^9.2.2",

package/src/jsx-loader.js

@@ -6,10 +6,7 @@ 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
@@ -25,7 +22,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 +194,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 +247,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,17 +294,80 @@ 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;
 }
 
 // --------------
 
 export function resolve(specifier, context, defaultResolve) {
-  const { parentURL = baseURL } = context;
+  const { parentURL } = context;
 
   if (jsxRegex.test(specifier)) {
     return {
-      url: new URL(specifier, parentURL).href
+      url: new URL(specifier, parentURL).href,
+      shortCircuit: true
     };
   }
 
@@ -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);
@@ -160,9 +160,9 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
   }
 }
 
-async function renderToString(elementURL) {
+async function renderToString(elementURL, wrappingEntryTag = true) {
   const definitions = [];
-  const elementTagName = await getTagName(elementURL);
+  const elementTagName = wrappingEntryTag && await getTagName(elementURL);
   const isEntry = !!elementTagName;
   const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions, isEntry);
 
@@ -171,7 +171,7 @@ async function renderToString(elementURL) {
     : elementInstance.innerHTML;
   const elementTree = getParse(elementHtml)(elementHtml);
   const finalTree = await renderComponentRoots(elementTree, definitions);
-  const html = elementTagName ? `
+  const html = wrappingEntryTag && elementTagName ? `
       <${elementTagName}>
         ${serialize(finalTree)}
       </${elementTagName}>