wc-compiler 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
@@ -15,7 +15,8 @@
       "types": "./src/index.d.ts"
     },
     "./register": "./src/register.js",
-    "./src/jsx-loader.js": "./src/jsx-loader.js"
+    "./src/jsx-loader.js": "./src/jsx-loader.js",
+    "./jsx-runtime": "./src/jsx-runtime.ts"
   },
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "keywords": [
@@ -37,11 +38,11 @@
   "scripts": {
     "clean": "rimraf ./dist",
     "lint": "eslint",
-    "lint:types": "tsc --project tsconfig.json",
-    "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
+    "lint:types": "tsc",
+    "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx,ts,tsx ./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-loader.js --watch src --watch sandbox -e js,md,css,html,jsx,ts ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "sandbox": "npm run clean && concurrently \"nodemon --experimental-strip-types --loader ./test-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/ts*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
     "test:jsx": "c8 node --import ./test-register.js --experimental-strip-types ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
@@ -87,6 +88,7 @@
     "rimraf": "^3.0.2",
     "simple.css": "^0.1.3",
     "typescript": "^5.8.2",
+    "typescript-eslint": "^8.46.2",
     "unified": "^10.1.2"
   }
 }

package/src/index.d.ts

@@ -16,4 +16,7 @@ export type renderFromHTML = (html: string, elementURLs: URL[]) => Promise<{
   metadata: Metadata
 }>
 
-declare module "wc-compiler" { }
+declare module "wc-compiler" {
+  export const renderToString: renderToString;
+  export const renderFromHTML: renderFromHTML;
+}

package/src/jsx-loader.js

@@ -12,6 +12,7 @@ import { parse, parseFragment, serialize } from 'parse5';
 import { transform } from 'sucrase';
 
 const jsxRegex = /\.(jsx)$/;
+const tsxRegex = /\.(tsx)$/;
 
 // TODO same hack as definitions
 // https://github.com/ProjectEvergreen/wcc/discussions/74
@@ -26,7 +27,8 @@ function getParse(html) {
 }
 
 export function getParser(moduleURL) {
-  const isJSX = moduleURL.pathname.split('.').pop() === 'jsx';
+  const ext = moduleURL.pathname.split('.').pop();
+  const isJSX = ext === 'jsx' || ext === 'tsx';
 
   if (!isJSX) {
     return;
@@ -390,7 +392,7 @@ export function parseJsx(moduleURL) {
 export function resolve(specifier, context, defaultResolve) {
   const { parentURL } = context;
 
-  if (jsxRegex.test(specifier)) {
+  if (jsxRegex.test(specifier) || tsxRegex.test(specifier)) {
     return {
       url: new URL(specifier, parentURL).href,
       shortCircuit: true
@@ -401,7 +403,7 @@ export function resolve(specifier, context, defaultResolve) {
 }
 
 export async function load(url, context, defaultLoad) {
-  if (jsxRegex.test(url)) {
+  if (jsxRegex.test(url) || tsxRegex.test(url)) {
     const jsFromJsx = parseJsx(new URL(url));
 
     return {

package/src/jsx-runtime.ts

@@ -0,0 +1 @@
+import './jsx.d.ts';

package/src/jsx.d.ts

@@ -0,0 +1,20 @@
+// to support `style` attributes, we override `CSSStyleDeclaration` with `string`
+type IsCSSStyleDeclaration<T> = T extends CSSStyleDeclaration ? string : T;
+
+// create a utility type to extract the attributes from any given element's DOM interface.
+type ElementAttributes<E extends HTMLElement> = {
+  // Extract all properties from the element, including inherited ones.
+  [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration<E[A]>;
+} & {
+  class?: string;
+};
+
+// map each HTML tag to a union of its attributes and the global attributes.
+type IntrinsicElementsFromDom = {
+  [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]>;
+};
+
+// declare the global JSX namespace with your generated intrinsic elements.
+declare namespace JSX {
+  interface IntrinsicElements extends IntrinsicElementsFromDom {}
+}

package/src/wcc.js

@@ -68,7 +68,8 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
   const result = transform(moduleContents, {
     transforms: ['typescript', 'jsx'],
-    jsxRuntime: 'preserve'
+    jsxRuntime: 'automatic',
+    production: true,
   });
   const nextDepth = depth += 1;
   const customParser = getParser(moduleURL);
@@ -90,7 +91,7 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
 
         // would like to decouple .jsx from the core, ideally
         // https://github.com/ProjectEvergreen/wcc/issues/122
-        if (!isBareSpecifier && ['js', 'jsx', 'ts'].includes(extension)) {
+        if (!isBareSpecifier && ['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
           const dependencyModuleURL = new URL(specifier, moduleURL);
 
           registerDependencies(dependencyModuleURL, definitions, nextDepth);
@@ -123,7 +124,8 @@ async function getTagName(moduleURL) {
   const moduleContents = await fs.promises.readFile(moduleURL, 'utf-8');
   const result = transform(moduleContents, {
     transforms: ['typescript', 'jsx'],
-    jsxRuntime: 'preserve'
+    jsxRuntime: 'automatic',
+    production: true,
   });
   const customParser = getParser(moduleURL);
   const parser = customParser ? customParser.parser : acorn.Parser;
@@ -169,9 +171,7 @@ async function initializeCustomElement(elementURL, tagName, node = {}, definitio
   }
 }
 
-/** @type {import('./index.d.ts').renderToString} */
 async function renderToString(elementURL, wrappingEntryTag = true, props = {}) {
-  /** @type {import('./index.d.ts').Metadata} */
   const definitions = {};
   const elementTagName = wrappingEntryTag && await getTagName(elementURL);
   const isEntry = !!elementTagName;
@@ -211,9 +211,7 @@ async function renderToString(elementURL, wrappingEntryTag = true, props = {}) {
   };
 }
 
-/** @type {import('./index.d.ts').renderFromHTML} */
 async function renderFromHTML(html, elements = []) {
-  /** @type {import('./index.d.ts').Metadata} */
   const definitions = {};
 
   for (const url of elements) {