wc-compiler 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Experimental native Web Components compiler.",
   "main": "src/wcc.js",
   "type": "module",
@@ -10,12 +10,14 @@
     "node": ">=14"
   },
   "files": [
-    "src/"
+    "src/",
+    "dist/wcc.dist.cjs"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "clean": "rimraf ./dist",
     "lint": "eslint \"*.*js\" \"./src/**/**/*.js\" \"./test/**/**/*.js\"",
     "develop": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html ./build.js\" \"http-server ./dist --open\"",
     "build": "node ./build.js",
@@ -24,7 +26,9 @@
     "example:ssr": "node ./examples/ssr.js",
     "start": "npm run develop",
     "test": "c8 mocha --parallel",
-    "test:tdd": "npm run test --watch"
+    "test:tdd": "npm run test --watch",
+    "dist": "rollup -c rollup.config.js",
+    "prepublishOnly": "npm run clean && npm run dist"
   },
   "dependencies": {
     "acorn": "^8.7.0",
@@ -33,6 +37,8 @@
   },
   "devDependencies": {
     "@mapbox/rehype-prism": "^0.8.0",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "c8": "^7.11.2",
     "chai": "^4.3.6",
     "concurrently": "^7.1.0",
@@ -49,6 +55,8 @@
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "remark-toc": "^8.0.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.75.7",
     "simple.css": "^0.1.3",
     "unified": "^10.1.2"
   }

package/src/dom-shim.js

@@ -3,6 +3,7 @@ class EventTarget { }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Node
 // EventTarget <- Node
+// TODO should be an interface?
 class Node extends EventTarget {
   constructor() {
     super();
@@ -15,7 +16,7 @@ class Node extends EventTarget {
   }
 
   appendChild(node) {
-    this.innerHTML = this.innerHTML ? this.innerHTML += node.textContent : node.textContent;
+    this.innerHTML = this.innerHTML ? this.innerHTML += node.innerHTML : node.innerHTML;
   }
 }
 
@@ -63,14 +64,9 @@ class HTMLElement extends Element {
   }
 
   // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
+  // eslint-disable-next-line
   getInnerHTML(options = {}) {
-    return options.includeShadowRoots
-      ? `
-        <template shadowroot="${this.shadowRoot.mode}">
-          ${this.shadowRoot.innerHTML}
-        </template>
-      `
-      : this.shadowRoot.innerHTML;
+    return this.shadowRoot.innerHTML;
   }
 }
 
@@ -101,11 +97,20 @@ class HTMLTemplateElement extends HTMLElement {
     super();
     // console.debug('HTMLTemplateElement constructor');
 
-    this.content = new DocumentFragment(this.innerHTML);
+    this.content = new DocumentFragment();
   }
 
+  // TODO open vs closed shadow root
   set innerHTML(html) {
-    this.content.textContent = html;
+    this.content.innerHTML = `
+      <template shadowroot="open">
+        ${html}
+      </template>
+    `;
+  }
+
+  get innerHTML() {
+    return this.content && this.content.innerHTML ? this.content.innerHTML : undefined;
   }
 }
 

package/src/wcc.js

@@ -4,8 +4,7 @@ import './dom-shim.js';
 import * as acorn from 'acorn';
 import * as walk from 'acorn-walk';
 import { parse, parseFragment, serialize } from 'parse5';
-
-import fs from 'node:fs/promises';
+import fs from 'fs/promises';
 
 let definitions;
 
@@ -105,10 +104,12 @@ async function getTagName(moduleURL) {
 async function initializeCustomElement(elementURL, tagName, attrs = []) {
   await registerDependencies(elementURL);
 
+  // https://github.com/ProjectEvergreen/wcc/pull/67/files#r902061804
+  const { pathname } = elementURL;
   const element = tagName
     ? customElements.get(tagName)
-    : (await import(elementURL)).default;
-  const dataLoader = (await import(elementURL)).getData;
+    : (await import(pathname)).default;
+  const dataLoader = (await import(pathname)).getData;
   const data = dataLoader ? await dataLoader() : {};
   const elementInstance = new element(data); // eslint-disable-line new-cap