wc-compiler 0.2.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Experimental native Web Components compiler.",
   "main": "src/wcc.js",
   "type": "module",
@@ -10,12 +10,14 @@
     "node": ">=14"
   },
   "files": [
-    "src/"
+    "src/",
+    "dist/wcc.dist.js"
   ],
   "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",
@@ -42,11 +48,16 @@
     "mocha": "^9.2.2",
     "nodemon": "^2.0.15",
     "prismjs": "^1.28.0",
-    "simple.css": "^0.1.3",
+    "rehype-autolink-headings": "^6.1.1",
     "rehype-raw": "^6.1.1",
+    "rehype-slug": "^5.0.1",
     "rehype-stringify": "^9.0.3",
     "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;
 
@@ -23,26 +22,29 @@ function isCustomElementDefinitionNode(node) {
     && expression.callee.property.name === 'define';
 }
 
-async function renderComponentRoots(tree, includeShadowRoots = true) {
+async function renderComponentRoots(tree) {
   for (const node of tree.childNodes) {
     if (node.tagName && node.tagName.indexOf('-') > 0) {
       const { tagName } = node;
       const { moduleURL } = definitions[tagName];
       const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs);
-
-      const shadowRootHtml = elementInstance.getInnerHTML({ includeShadowRoots });
-      const shadowRootTree = parseFragment(shadowRootHtml);
-
-      node.childNodes = node.childNodes.length === 0 ? shadowRootTree.childNodes : [...shadowRootTree.childNodes, ...node.childNodes];
+      const elementHtml = elementInstance.shadowRoot
+        ? elementInstance.getInnerHTML({ includeShadowRoots: true })
+        : elementInstance.innerHTML;
+      const elementTree = parseFragment(elementHtml);
+
+      node.childNodes = node.childNodes.length === 0
+        ? elementTree.childNodes
+        : [...elementTree.childNodes, ...node.childNodes];
     }
 
     if (node.childNodes && node.childNodes.length > 0) {
-      await renderComponentRoots(node, includeShadowRoots);
+      await renderComponentRoots(node);
     }
 
     // does this only apply to `<template>` tags?
     if (node.content && node.content.childNodes && node.content.childNodes.length > 0) {
-      await renderComponentRoots(node.content, includeShadowRoots);
+      await renderComponentRoots(node.content);
     }
   }
 
@@ -102,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
 
@@ -122,18 +126,18 @@ async function initializeCustomElement(elementURL, tagName, attrs = []) {
   return elementInstance;
 }
 
-async function renderToString(elementURL, options = {}) {
+async function renderToString(elementURL) {
   definitions = [];
 
-  const { lightMode = false } = options;
-  const includeShadowRoots = !lightMode;
   const elementTagName = await getTagName(elementURL);
   const elementInstance = await initializeCustomElement(elementURL);
 
-  const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots });
+  const elementHtml = elementInstance.shadowRoot
+    ? elementInstance.getInnerHTML({ includeShadowRoots: true })
+    : elementInstance.innerHTML;
   const elementTree = getParse(elementHtml)(elementHtml);
-  const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
-  const html = !lightMode && elementTagName ? `
+  const finalTree = await renderComponentRoots(elementTree);
+  const html = elementTagName ? `
       <${elementTagName}>
         ${serialize(finalTree)}
       </${elementTagName}>
@@ -146,18 +150,15 @@ async function renderToString(elementURL, options = {}) {
   };
 }
 
-async function renderFromHTML(html, elements = [], options = {}) {
+async function renderFromHTML(html, elements = []) {
   definitions = [];
 
-  const { lightMode = false } = options;
-  const includeShadowRoots = !lightMode;
-
   for (const url of elements) {
     await initializeCustomElement(url);
   }
 
   const elementTree = getParse(html)(html);
-  const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
+  const finalTree = await renderComponentRoots(elementTree);
 
   return {
     html: serialize(finalTree),