wc-compiler 0.12.1 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
@@ -28,14 +28,14 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
+    "lint": "eslint --ignore-pattern \"*.json\" \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
     "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 --experimental-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:exp": "c8 node --experimental-loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./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",
     "dist": "rollup -c rollup.config.js",
@@ -45,10 +45,16 @@
     "@projectevergreen/acorn-jsx-esm": "~0.1.0",
     "@projectevergreen/escodegen-esm": "~0.1.0",
     "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",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/plugin-syntax-import-assertions": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
     "@ls-lint/ls-lint": "^1.10.0",
     "@mapbox/rehype-prism": "^0.8.0",
     "@rollup/plugin-commonjs": "^25.0.7",

package/src/dom-shim.js

@@ -1,5 +1,13 @@
 function noop() { }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
+class CSSStyleSheet {
+  insertRule() { }
+  deleteRule() { }
+  replace() { }
+  replaceSync() { }
+}
+
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
 class EventTarget {
   constructor() {
@@ -93,6 +101,7 @@ class ShadowRoot extends DocumentFragment {
   constructor(options) {
     super();
     this.mode = options.mode || 'closed';
+    this.adoptedStyleSheets = [];
   }
 }
 
@@ -146,4 +155,5 @@ class CustomElementsRegistry {
 globalThis.addEventListener = globalThis.addEventListener ?? noop;
 globalThis.document = globalThis.document ?? new Document();
 globalThis.customElements = globalThis.customElements ?? new CustomElementsRegistry();
-globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
+globalThis.HTMLElement = globalThis.HTMLElement ?? HTMLElement;
+globalThis.CSSStyleSheet = globalThis.CSSStyleSheet ?? CSSStyleSheet;

package/src/jsx-loader.js

@@ -6,6 +6,9 @@ import { generate } from '@projectevergreen/escodegen-esm';
 import fs from 'fs';
 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)$/;
 
@@ -29,7 +32,7 @@ export function getParser(moduleURL) {
   }
 
   return {
-    parser: acorn.Parser.extend(jsx()),
+    parser: acorn.Parser.extend(jsx(), importAttributes),
     config: {
       // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
       ...walk.base,
@@ -230,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()).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

@@ -7,6 +7,9 @@ import * as walk from 'acorn-walk';
 import { generate } from '@projectevergreen/escodegen-esm';
 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';
 
 function getParse(html) {
@@ -59,14 +62,18 @@ 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;
+  const parser = customParser ? customParser.parser : acorn.Parser;
   const config = customParser ? customParser.config : {
     ...walk.base
   };
 
-  walk.simple(parser.parse(moduleContents, {
+  walk.simple(parser.extend(importAttributes).parse(result.code, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -76,7 +83,8 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
       const extension = specifier.split('.').pop();
 
       // TODO would like to decouple .jsx from the core, ideally
-      if (!isBareSpecifier && ['js', 'jsx'].includes(extension)) {
+      // 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);
@@ -105,14 +113,18 @@ 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;
+  const parser = customParser ? customParser.parser : acorn.Parser;
   const config = customParser ? customParser.config : {
     ...walk.base
   };
   let tagName;
 
-  walk.simple(parser.parse(moduleContents, {
+  walk.simple(parser.extend(importAttributes).parse(result.code, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -133,9 +145,10 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
   }
 
   // https://github.com/ProjectEvergreen/wcc/pull/67/files#r902061804
-  const { pathname } = elementURL;
-  const element = customElements.get(tagName) ?? (await import(pathname)).default;
-  const dataLoader = (await import(pathname)).getData;
+  // https://github.com/ProjectEvergreen/wcc/pull/159
+  const { href } = elementURL;
+  const element = customElements.get(tagName) ?? (await import(href)).default;
+  const dataLoader = (await import(href)).getData;
   const data = props
     ? props
     : dataLoader