wc-compiler 0.13.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
@@ -32,9 +32,9 @@
     "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 --loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "sandbox": "npm run clean && concurrently \"nodemon --loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx,ts ./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": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/ts*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
     "test:exp": "c8 node --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",
@@ -47,7 +47,8 @@
     "acorn": "^8.7.0",
     "acorn-import-attributes": "^1.9.5",
     "acorn-walk": "^8.2.0",
-    "parse5": "^6.0.1"
+    "parse5": "^6.0.1",
+    "sucrase": "^3.35.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",

package/src/jsx-loader.js

@@ -8,6 +8,7 @@ import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
 // Need an acorn plugin for now - https://github.com/ProjectEvergreen/greenwood/issues/1218
 import { importAttributes } from 'acorn-import-attributes';
+import { transform } from 'sucrase';
 
 const jsxRegex = /\.(jsx)$/;
 
@@ -232,13 +233,17 @@ function findThisReferences(context, statement) {
 
 export function parseJsx(moduleURL) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
+  const result = transform(moduleContents, {
+    transforms: ['typescript', 'jsx'],
+    jsxRuntime: 'preserve'
+  });
   // 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(), importAttributes).parse(moduleContents, {
+  let tree = acorn.Parser.extend(jsx(), importAttributes).parse(result.code, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   });

package/src/ts-loader.js

@@ -0,0 +1,32 @@
+import fs from 'fs/promises';
+import { transform } from 'sucrase';
+
+const tsRegex = /\.(ts)$/;
+
+export function resolve(specifier, context, defaultResolve) {
+  const { parentURL } = context;
+
+  if (tsRegex.test(specifier)) {
+    return {
+      url: new URL(specifier, parentURL).href,
+      shortCircuit: true
+    };
+  }
+
+  return defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function load(url, context, defaultLoad) {
+  if (tsRegex.test(url)) {
+    const contents = await fs.readFile(new URL(url), 'utf-8');
+    const result = transform(contents, { transforms: ['typescript'] });
+
+    return {
+      format: 'module',
+      shortCircuit: true,
+      source: result.code
+    };
+  }
+
+  return defaultLoad(url, context, defaultLoad);
+}

package/src/wcc.js

@@ -9,8 +9,27 @@ import { getParser, parseJsx } from './jsx-loader.js';
 import { parse, parseFragment, serialize } from 'parse5';
 // Need an acorn plugin for now - https://github.com/ProjectEvergreen/greenwood/issues/1218
 import { importAttributes } from 'acorn-import-attributes';
+import { transform } from 'sucrase';
 import fs from 'fs';
 
+// https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+const VOID_ELEMENTS = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param', // deprecated
+  'source',
+  'track',
+  'wbr'
+];
+
 function getParse(html) {
   return html.indexOf('<html>') >= 0 || html.indexOf('<body>') >= 0 || html.indexOf('<head>') >= 0
     ? parse
@@ -32,17 +51,26 @@ async function renderComponentRoots(tree, definitions) {
 
       if (definitions[tagName]) {
         const { moduleURL } = definitions[tagName];
-        const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs, definitions);
-        const elementHtml = elementInstance.shadowRoot
-          ? elementInstance.getInnerHTML({ includeShadowRoots: true })
-          : elementInstance.innerHTML;
-        const elementTree = parseFragment(elementHtml);
-
-        node.childNodes = node.childNodes.length === 0
-          ? elementTree.childNodes
-          : [...elementTree.childNodes, ...node.childNodes];
+        const elementInstance = await initializeCustomElement(moduleURL, tagName, node, definitions);
+
+        if (elementInstance) {
+          const hasShadow = elementInstance.shadowRoot;
+          const elementHtml = hasShadow
+            ? elementInstance.getInnerHTML({ includeShadowRoots: true })
+            : elementInstance.innerHTML;
+          const elementTree = parseFragment(elementHtml);
+          const hasLight = elementTree.childNodes > 0;
+
+          node.childNodes = node.childNodes.length === 0 && hasLight && !hasShadow
+            ? elementTree.childNodes
+            : hasShadow
+              ? [...elementTree.childNodes, ...node.childNodes]
+              : elementTree.childNodes;
+        } else {
+          console.warn(`WARNING: customElement <${tagName}> detected but not serialized.  You may not have exported it.`);
+        }
       } else {
-        console.warn(`WARNING: customElement <${tagName}> is not defined.  You may not have imported it yet.`);
+        console.warn(`WARNING: customElement <${tagName}> is not defined.  You may not have imported it.`);
       }
     }
 
@@ -61,6 +89,10 @@ async function renderComponentRoots(tree, definitions) {
 
 function registerDependencies(moduleURL, definitions, depth = 0) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
+  const result = transform(moduleContents, {
+    transforms: ['typescript', 'jsx'],
+    jsxRuntime: 'preserve'
+  });
   const nextDepth = depth += 1;
   const customParser = getParser(moduleURL);
   const parser = customParser ? customParser.parser : acorn.Parser;
@@ -68,7 +100,7 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
     ...walk.base
   };
 
-  walk.simple(parser.extend(importAttributes).parse(moduleContents, {
+  walk.simple(parser.extend(importAttributes).parse(result.code, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -77,8 +109,9 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
       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(extension)) {
+      // would like to decouple .jsx from the core, ideally
+      // https://github.com/ProjectEvergreen/wcc/issues/122
+      if (!isBareSpecifier && ['js', 'jsx', 'ts'].includes(extension)) {
         const dependencyModuleURL = new URL(node.source.value, moduleURL);
 
         registerDependencies(dependencyModuleURL, definitions, nextDepth);
@@ -107,6 +140,10 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
 
 async function getTagName(moduleURL) {
   const moduleContents = await fs.promises.readFile(moduleURL, 'utf-8');
+  const result = transform(moduleContents, {
+    transforms: ['typescript', 'jsx'],
+    jsxRuntime: 'preserve'
+  });
   const customParser = getParser(moduleURL);
   const parser = customParser ? customParser.parser : acorn.Parser;
   const config = customParser ? customParser.config : {
@@ -114,7 +151,7 @@ async function getTagName(moduleURL) {
   };
   let tagName;
 
-  walk.simple(parser.extend(importAttributes).parse(moduleContents, {
+  walk.simple(parser.extend(importAttributes).parse(result.code, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -128,7 +165,41 @@ async function getTagName(moduleURL) {
   return tagName;
 }
 
-async function initializeCustomElement(elementURL, tagName, attrs = [], definitions = [], isEntry, props = {}) {
+function renderLightDomChildren(childNodes, iHTML = '') {
+  let innerHTML = iHTML;
+
+  childNodes.forEach((child) => {
+    const { nodeName, attrs = [], value } = child;
+
+    if (nodeName !== '#text') {
+      innerHTML += `<${nodeName}`;
+
+      if (attrs.length > 0) {
+        attrs.forEach(attr => {
+          innerHTML += ` ${attr.name}="${attr.value}"`;
+        });
+      }
+
+      innerHTML += '>';
+
+      if (child.childNodes.length > 0) {
+        innerHTML = renderLightDomChildren(child.childNodes, innerHTML);
+      }
+
+      innerHTML += VOID_ELEMENTS.includes(nodeName)
+        ? ''
+        : `</${nodeName}>`;
+    } else if (nodeName === '#text') {
+      innerHTML += value;
+    }
+  });
+
+  return innerHTML;
+}
+
+async function initializeCustomElement(elementURL, tagName, node = {}, definitions = [], isEntry, props = {}) {
+  const { attrs = [], childNodes = [] } = node;
+
   if (!tagName) {
     const depth = isEntry ? 1 : 0;
     registerDependencies(elementURL, definitions, depth);
@@ -148,6 +219,9 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
   if (element) {
     const elementInstance = new element(data); // eslint-disable-line new-cap
 
+    // support for HTML (Light DOM) Web Components
+    elementInstance.innerHTML = renderLightDomChildren(childNodes);
+
     attrs.forEach((attr) => {
       elementInstance.setAttribute(attr.name, attr.value);
   
@@ -197,7 +271,7 @@ async function renderFromHTML(html, elements = []) {
   const definitions = [];
 
   for (const url of elements) {
-    await initializeCustomElement(url, undefined, undefined, definitions, true);
+    registerDependencies(url, definitions, 1);
   }
 
   const elementTree = getParse(html)(html);