wc-compiler 0.16.0 → 0.17.1

package/README.md

@@ -4,8 +4,9 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/e718eac2-b3bc-4986-8569-49706a430beb/deploy-status)](https://app.netlify.com/sites/merry-caramel-524e61/deploys)
 [![GitHub release](https://img.shields.io/github/tag/ProjectEvergreen/wcc.svg)](https://github.com/ProjectEvergreen/wcc/tags)
-![GitHub Actions status](https://github.com/ProjectEvergreen/wcc/workflows/Master%20Integration/badge.svg)
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ProjectEvergreen/wcc/master/LICENSE.md)
+[![NodeJS compatibility](https://img.shields.io/node/v/wc-compiler.svg)](https://nodejs.org/en/about/previous-releases")
+[![Discord Chat](https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord)](https://www.greenwoodjs.dev/discord/)
 
 > _Experimental Web Components compiler.  It's Web Components all the way down!_  🐢
 
@@ -73,13 +74,6 @@
 $ npm install wc-compiler --save-dev
 ```
 
-### CommonJS
-
-If you need CommonJS support, a separate pre-bundled (with Rollup) distribution of **WCC** is available at _dist/wcc.dist.cjs_.  Example:
-```js
-const { renderToString } = require('wc-compiler/dist/wcc.dist.cjs');
-```
-
 ## Documentation
 
 See our [website](https://merry-caramel-524e61.netlify.app/) for API docs and examples.

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "wc-compiler",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
     "url": "https://github.com/ProjectEvergreen/wcc.git"
   },
-  "main": "src/wcc.js",
   "type": "module",
+  "main": "src/wcc.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/wcc.js",
+      "types": "./src/index.d.ts"
+    },
+    "./register": "./src/register.js",
+    "./src/jsx-loader.js": "./src/jsx-loader.js"
+  },
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "keywords": [
     "Web Components",
@@ -17,29 +26,27 @@
   ],
   "license": "MIT",
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   },
   "files": [
-    "src/",
-    "dist/wcc.dist.cjs"
+    "src/"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "eslint --ignore-pattern \"*.json\" \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
+    "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\"",
     "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,ts ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "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\"",
     "start": "npm run docs:serve",
     "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:jsx": "c8 node --import ./test-register.js --experimental-strip-types ./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",
-    "prepublishOnly": "npm run clean && npm run dist"
+    "test:tdd:jsx": "npm run test:jsx -- --watch"
   },
   "dependencies": {
     "@projectevergreen/acorn-jsx-esm": "~0.1.0",
@@ -51,19 +58,19 @@
   },
   "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",
+    "@babel/eslint-parser": "^7.25.7",
+    "@babel/plugin-syntax-import-assertions": "^7.25.7",
+    "@eslint/js": "^9.11.1",
     "@ls-lint/ls-lint": "^1.10.0",
     "@mapbox/rehype-prism": "^0.8.0",
-    "@rollup/plugin-commonjs": "^28.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.13.4",
     "c8": "^7.11.2",
     "chai": "^4.3.6",
     "concurrently": "^7.1.0",
-    "eslint": "^8.14.0",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint": "^9.11.1",
     "eslint-plugin-no-only-tests": "^2.6.0",
+    "globals": "^15.10.0",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
     "livereload": "^0.9.3",
@@ -78,8 +85,8 @@
     "remark-rehype": "^10.1.0",
     "remark-toc": "^8.0.1",
     "rimraf": "^3.0.2",
-    "rollup": "^4.26.0",
     "simple.css": "^0.1.3",
+    "typescript": "^5.8.2",
     "unified": "^10.1.2"
   }
 }

package/src/dom-shim.js

@@ -1,5 +1,4 @@
-/* eslint-disable no-warning-comments */
-
+// @ts-nocheck
 import { parse, parseFragment, serialize } from 'parse5';
 
 export function getParse(html) {
@@ -47,7 +46,6 @@ function getParse5ElementDefaults(element, tagName) {
     nodeName: tagName,
     tagName: tagName,
     namespaceURI: 'http://www.w3.org/1999/xhtml',
-    // eslint-disable-next-line no-extra-parens
     ...(tagName === 'template' ? { content: { nodeName: '#document-fragment', childNodes: [] } } : {})
   };
 }

package/src/index.d.ts

@@ -0,0 +1,22 @@
+export type Metadata = {
+  [key: string]: {
+    instanceName: string;
+    moduleURL: URL;
+    isEntry: boolean
+  }
+}
+
+export type renderToString = (elementURL: URL, wrappingEntryTag?: boolean, props?: any) => Promise<{
+  html: string;
+  metadata: Metadata
+}>
+
+export type renderFromHTML = (html: string, elementURLs: URL[]) => Promise<{
+  html: string;
+  metadata: Metadata
+}>
+
+declare module "wc-compiler" {
+  export const renderToString: renderToString;
+  export const renderFromHTML: renderFromHTML;
+}

package/src/jsx-loader.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-depth, complexity */
 // https://nodejs.org/api/esm.html#esm_loaders
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
@@ -6,6 +5,8 @@ import { generate } from 'astring';
 import fs from 'fs';
 // ideally we can eventually adopt an ESM compatible version of this plugin
 // https://github.com/acornjs/acorn-jsx/issues/112
+// @ts-ignore
+// but it does have a default export???
 import jsx from '@projectevergreen/acorn-jsx-esm';
 import { parse, parseFragment, serialize } from 'parse5';
 import { transform } from 'sucrase';
@@ -138,13 +139,13 @@ function parseJsxElement(element, moduleContents = '') {
               const { expression } = value;
 
               if (expression.type === 'Identifier') {
-                string += ` ${name}=\$\{${expression.name}\}`;
+                string += ` ${name}=$\{${expression.name}}`;
               }
 
               if (expression.type === 'MemberExpression') {
                 if (expression.object.type === 'Identifier') {
                   if (expression.property.type === 'Identifier') {
-                    string += ` ${name}=\$\{${expression.object.name}.${expression.property.name}\}`;
+                    string += ` ${name}=$\{${expression.object.name}.${expression.property.name}}`;
                   }
                 }
               }
@@ -174,7 +175,7 @@ function parseJsxElement(element, moduleContents = '') {
 
       if (type === 'Identifier') {
         // You have {count} TODOs left to complete
-        string += `\$\{${element.expression.name}\}`;
+        string += `$\{${element.expression.name}}`;
       } else if (type === 'MemberExpression') {
         const { object } = element.expression.object;
 
@@ -187,7 +188,7 @@ function parseJsxElement(element, moduleContents = '') {
           // const { todos } = this;
           // ....
           // You have {todos.length} Todos left to complete
-          string += `\$\{${element.expression.object.name}.${element.expression.property.name}\}`;
+          string += `$\{${element.expression.object.name}.${element.expression.property.name}}`;
         }
       }
     }
@@ -251,11 +252,13 @@ export function parseJsx(moduleURL) {
 
   walk.simple(tree, {
     ClassDeclaration(node) {
+      // @ts-ignore
       if (node.superClass.name === 'HTMLElement') {
         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') {
+            // @ts-ignore
             const nodeName = n1.key.name;
             if (nodeName === 'render') {
               for (const n2 in n1.value.body.body) {
@@ -266,6 +269,7 @@ export function parseJsx(moduleURL) {
                     ...observedAttributes,
                     ...findThisReferences('render', n)
                   ];
+                  // @ts-ignore
                 } else if (n.type === 'ReturnStatement' && n.argument.type === 'JSXElement') {
                   const html = parseJsxElement(n.argument, moduleContents);
                   const elementTree = getParse(html)(html);
@@ -297,6 +301,7 @@ export function parseJsx(moduleURL) {
                     sourceType: 'module'
                   });
 
+                  // @ts-ignore
                   n1.value.body.body[n2] = transformed;
                 }
               }
@@ -309,7 +314,9 @@ export function parseJsx(moduleURL) {
       const { declaration } = node;
 
       if (declaration && declaration.type === 'VariableDeclaration' && declaration.kind === 'const' && declaration.declarations.length === 1) {
+        // @ts-ignore
         if (declaration.declarations[0].id.name === 'inferredObservability') {
+          // @ts-ignore
           inferredObservability = Boolean(node.declaration.declarations[0].init.raw);
         }
       }
@@ -317,6 +324,7 @@ export function parseJsx(moduleURL) {
   }, {
     // https://github.com/acornjs/acorn/issues/829#issuecomment-1172586171
     ...walk.base,
+    // @ts-ignore
     JSXElement: () => {}
   });
 
@@ -325,7 +333,9 @@ export function parseJsx(moduleURL) {
     let insertPoint;
     for (const line of tree.body) {
       // test for class MyComponent vs export default class MyComponent
+      // @ts-ignore
       if (line.type === 'ClassDeclaration' || (line.declaration && line.declaration.type) === 'ClassDeclaration') {
+        // @ts-ignore
         insertPoint = line.declaration.body.start + 1;
       }
     }
@@ -333,7 +343,6 @@ export function parseJsx(moduleURL) {
     let newModuleContents = 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(',')}]
@@ -366,7 +375,6 @@ export function parseJsx(moduleURL) {
 
       ${newModuleContents.slice(insertPoint)}
     `;
-    /* eslint-enable indent */
 
     tree = acorn.Parser.extend(jsx()).parse(newModuleContents, {
       ecmaVersion: 'latest',

package/src/register.js

@@ -0,0 +1,3 @@
+import { register } from 'node:module';
+
+register('./jsx-loader.js', import.meta.url);

package/src/wcc.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-depth */
 // this must come first
 import { getParse } from './dom-shim.js';
 
@@ -84,19 +83,23 @@ 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();
 
-      // 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);
+      if (typeof specifier === 'string') {
+        const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
+        const extension = typeof specifier === "string" ? specifier.split('.').pop() : "";
 
-        registerDependencies(dependencyModuleURL, definitions, nextDepth);
+        // 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(specifier, moduleURL);
+
+          registerDependencies(dependencyModuleURL, definitions, nextDepth);
+        }
       }
     },
     ExpressionStatement(node) {
       if (isCustomElementDefinitionNode(node)) {
+        // @ts-ignore
         const { arguments: args } = node.expression;
         const tagName = args[0].type === 'Literal'
           ? args[0].value // single and double quotes
@@ -135,6 +138,7 @@ async function getTagName(moduleURL) {
   }), {
     ExpressionStatement(node) {
       if (isCustomElementDefinitionNode(node)) {
+        // @ts-ignore
         tagName = node.expression.arguments[0].value;
       }
     }
@@ -143,22 +147,19 @@ async function getTagName(moduleURL) {
   return tagName;
 }
 
-async function initializeCustomElement(elementURL, tagName, node = {}, definitions = [], isEntry, props = {}) {
+async function initializeCustomElement(elementURL, tagName, node = {}, definitions = {}, isEntry, props = {}) {
 
   if (!tagName) {
     const depth = isEntry ? 1 : 0;
     registerDependencies(elementURL, definitions, depth);
   }
 
-  // https://github.com/ProjectEvergreen/wcc/pull/67/files#r902061804
-  // 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 element = customElements.get(tagName) ?? (await import(elementURL)).default;
+  const dataLoader = (await import(elementURL)).getData;
   const data = props ? props : dataLoader ? await dataLoader(props) : {};
 
   if (element) {
-    const elementInstance = new element(data); // eslint-disable-line new-cap
+    const elementInstance = new element(data);
 
     Object.assign(elementInstance, node);
 
@@ -169,7 +170,7 @@ async function initializeCustomElement(elementURL, tagName, node = {}, definitio
 }
 
 async function renderToString(elementURL, wrappingEntryTag = true, props = {}) {
-  const definitions = [];
+  const definitions = {};
   const elementTagName = wrappingEntryTag && await getTagName(elementURL);
   const isEntry = !!elementTagName;
   const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions, isEntry, props);
@@ -209,7 +210,7 @@ async function renderToString(elementURL, wrappingEntryTag = true, props = {}) {
 }
 
 async function renderFromHTML(html, elements = []) {
-  const definitions = [];
+  const definitions = {};
 
   for (const url of elements) {
     registerDependencies(url, definitions, 1);