wc-compiler 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.13.0",
+  "version": "0.14.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,6 +9,7 @@ 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) {
@@ -61,6 +62,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 +73,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'
   }), {
@@ -78,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);
@@ -107,6 +113,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 +124,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'
   }), {