wc-compiler 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.12.0",
+  "version": "0.13.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 ./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: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,15 @@
     "@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"
   },
   "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

@@ -4,8 +4,10 @@ import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
 import { generate } from '@projectevergreen/escodegen-esm';
 import fs from 'fs';
-import jsx from 'acorn-jsx';
+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';
 
 const jsxRegex = /\.(jsx)$/;
 
@@ -29,7 +31,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,
@@ -236,7 +238,7 @@ export function parseJsx(moduleURL) {
   const hasOwnObservedAttributes = undefined;
   let inferredObservability = false;
   let observedAttributes = [];
-  let tree = acorn.Parser.extend(jsx()).parse(moduleContents, {
+  let tree = acorn.Parser.extend(jsx(), importAttributes).parse(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   });

package/src/wcc.js

@@ -7,6 +7,8 @@ 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 fs from 'fs';
 
 function getParse(html) {
@@ -61,12 +63,12 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
   const moduleContents = fs.readFileSync(moduleURL, 'utf-8');
   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(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -106,13 +108,13 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
 async function getTagName(moduleURL) {
   const moduleContents = await fs.promises.readFile(moduleURL, 'utf-8');
   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(moduleContents, {
     ecmaVersion: 'latest',
     sourceType: 'module'
   }), {
@@ -133,9 +135,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