ProjectEvergreen · thescientist13 · May 13, 2022 · May 11, 2022 · May 12, 2022 · May 12, 2022
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -0,0 +1,38 @@
+# Contributing
+
+## Welcome!
+We're excited for your interest in WCC, and maybe even your contribution!
+
+## Setup
+
+To develop for the project, you'll want to follow these steps:
+
+1. Have [NodeJS LTS](https://nodejs.org)
+1. Clone the repository
+1. Run `npm ci`
+
+If developing with Node Version Manager:
+
+- Windows: [NVM for Windows](https://github.com/coreybutler/nvm-windows/releases)
+- Linux/MacOS: [Node Version Manager](https://github.com/nvm-sh/nvm)
+
+You can confirm by running the following
+
+```sh
+$ nvm use
+Found '/Users/<directory_location>/greenwood/.nvmrc' with version <14.17.0>
+Now using node v14.17.0 (npm v6.14.13)
+```
+
+## Local Development
+
+The local development flow is based around building the docs website, using `wcc` in an SSG based workflow, and running tests.
+
+### Commands
+
+There are the main tasks, but you can see them all listed in _package.json#scripts_.
+
+- `develop` - Builds the docs website using `wcc` with live reload
+- `test` - Run all the tests
+- `test:tdd` - Run all the tests in watch mode
+- `serve` - Builds the docs website using `wcc` with standard server
diff --git a/.github/workflows/ci-win.yml b/.github/workflows/ci-win.yml
@@ -28,4 +28,4 @@ jobs:
         yarn test
     - name: Build
       run: |
-        yarn clean && yarn build
+        yarn build
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -28,4 +28,4 @@ jobs:
         yarn test
     - name: Build
       run: |
-        yarn clean && yarn build
+        yarn build
diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml
@@ -25,4 +25,4 @@ jobs:
         yarn install --frozen-lockfile
     - name: Build
       run: |
-        yarn clean && yarn build
+        yarn build
diff --git a/README.md b/README.md
@@ -34,7 +34,11 @@ In addition, WCC hopes to provide a surface area to explore patterns around [str
 
 ## Installation
 
-TODO
+**wcc** can be installed from npm.
+
+```shell
+$ npm install wc-compiler --save-dev
+```
 
 ## Usage
 
@@ -73,7 +77,7 @@ WCC exposes a few utilities to render your Web Components.  Below is one example
 
 1. Using NodeJS, create a file that imports `renderToString` and provide it the path to your web component
     ```js
-    import { renderToString } from 'xxx';
+    import { renderToString } from 'wc-compiler';
 
     const { html } = renderToString(new URL('./path/to/footer.js', import.meta.url));
 

diff --git a/build.js b/build.js
@@ -1,4 +1,5 @@
 import fs from 'node:fs/promises';
+import rehypePrism from '@mapbox/rehype-prism';
 import rehypeStringify from 'rehype-stringify';
 import rehypeRaw from 'rehype-raw';
 import remarkParse from 'remark-parse';
@@ -15,11 +16,11 @@ async function init() {
     lightMode: true
   });
 
-  // await fs.rm(distRoot, { recursive: true, force: true });
-  // await fs.mkdir('./dist', { recursive: true });
-  // await fse.copy('./www/assets', `${distRoot}/www/assets`);
-  // await fse.copy('./www/components', `${distRoot}/www/components`);
-  // await fse.copy('./docs/pages', `${distRoot}/www/pages`);
+  await fs.rm(distRoot, { recursive: true, force: true });
+  await fs.mkdir('./dist', { recursive: true });
+
+  await fs.copyFile(new URL('./node_modules/prismjs/themes/prism.css', import.meta.url), new URL(`${distRoot}/prism.css`, import.meta.url));
+  await fs.copyFile(new URL('./node_modules/simple.css/dist/simple.min.css', import.meta.url), new URL(`${distRoot}/simple.min.css`, import.meta.url));
 
   for (const page of pages) {
     // for now, just repurposing the README for home page content
@@ -30,6 +31,7 @@ async function init() {
       .use(remarkParse)
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeRaw)
+      .use(rehypePrism)
       .use(rehypeStringify)
       .process(markdown)).value;
 
@@ -38,24 +40,6 @@ async function init() {
       content = content.replace(contentFilter, '');
     }
 
-    // const lazyJs = [];
-    // const eagerJs = [];
-
-    // for (const asset in assets) {
-    //   const a = assets[asset];
-
-    //   a.tagName = asset;
-
-    //   if (a.moduleURL.href.endsWith('.js')) {
-    //     if (a.hydrate === 'lazy') {
-    //       lazyJs.push(a);
-    //     } else {
-    //       eagerJs.push(a);
-    //     }
-    //   }
-    // }
-
-    // bundle / copy dependency files
     const route = page.replace('.md', '');
     const outputPath = route === 'index' ? '' : `${route}/`;
 
@@ -65,11 +49,19 @@ async function init() {
     await fs.writeFile(new URL(`${distRoot}/${outputPath}/index.html`, import.meta.url), `
       <!DOCTYPE html>
       <html lang="en" prefix="og:http://ogp.me/ns#">
-      
+
         <head>
           <title>WCC - Web Components Compiler</title>
-          <meta property="og:title" content="Web Components Compiler (WCC)"/>
-          <link rel="stylesheet" href="https://unpkg.com/simpledotcss@2.1.0/simple.min.css">
+          <meta name="viewport" content="width=device-width, initial-scale=1"/>
+          <meta charset="utf-8">
+          <meta name="description" content="An experimental native Web Components compiler."/>
+          <meta property="og:description" content="An experimental native Web Components compiler"/>
+          <meta property="og:title" content="WCC - Web Components Compiler"/>
+
+          <link rel="preload" href="/prism.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+          <link rel="preload" href="/simple.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+          <noscript><link rel="stylesheet" href="/prism.css"></noscript>
+          <noscript><link rel="stylesheet" href="/simple.min.css"></noscript>
         </head>
 
         <body>

diff --git a/docs/components/footer.js b/docs/components/footer.js
@@ -10,20 +10,21 @@ template.innerHTML = `
       text-align: center;
     }
 
-    footer h4 {
+    footer p {
       margin: 0 auto;
+      font-weight: bold;
     }
 
-    footer a:visited {
-      color: var(--text);
+    footer a, footer a:visited {
+      color: #efefef;
       text-decoration: none;
     }
   </style>
 
   <footer>
-    <h4>
+    <p>
       <a href="https://projectevergreen.github.io">WCC &#9672 Project Evergreen</a>
-    </h4>
+    </p>
   </footer>
 `;
 

diff --git a/docs/components/header.js b/docs/components/header.js
@@ -19,8 +19,6 @@ template.innerHTML = `
       display: inline-block;
       padding: 10px;
       align-items: top;
-      width: 90px;
-      height: 20px;
     }
 
     header div.container {
@@ -32,14 +30,18 @@ template.innerHTML = `
   <header>
     <div class="container">
       <div>
+        <!--
         <a href="/">
           <img src="/www/assets/wcc-logo.jpg" alt="WCC logo" class="logo"/>
         </a>
+        -->
 
         <a href="https://github.com/ProjectEvergreen/wcc" class="social">
           <img
             src="https://img.shields.io/github/stars/ProjectEvergreen/wcc.svg?style=social&logo=github&label=github"
             alt="WCC GitHub badge"
+            width="174px"
+            height="40px"
             class="github-badge"
           />
         </a>

diff --git a/docs/components/navigation.js b/docs/components/navigation.js
@@ -13,11 +13,13 @@ template.innerHTML = `
       float: left;
       width: 33%;
       text-align: center;
-      margin: 10px 0;
     }
 
     nav ul li a, nav ul li a:visited {
-      color: var(--text);
+      display: inline-block;
+      color: #efefef;
+      min-width: 48px;
+      min-height: 48px;
     }
   </style>
 
@@ -26,7 +28,7 @@ template.innerHTML = `
       <li><a href="/">Home</a></li>
       <li><a href="/docs">Docs</a></li>
       <li><a href="/examples">Examples</a></li>
-    <ul>
+    </ul>
   </nav>
 `;
 

diff --git a/package.json b/package.json
@@ -1,17 +1,25 @@
 {
-  "name": "wcc",
-  "version": "0.0.1",
+  "name": "wc-compiler",
+  "version": "0.1.0",
   "description": "Experimental native Web Components compiler.",
   "main": "src/wcc.js",
   "type": "module",
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "license": "MIT",
+  "engines": {
+    "node": ">=14"
+  },
+  "files": [
+    "src/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "clean": "rimraf ./dist",
     "lint": "eslint \"*.*js\" \"./src/**/**/*.js\" \"./test/**/**/*.js\"",
-    "develop": "yarn clean && concurrently \"nodemon --watch src --watch docs -e js,md,css,html ./build.js\" \"http-server ./dist --open\"",
+    "develop": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html ./build.js\" \"http-server ./dist --open\"",
     "build": "node ./build.js",
-    "serve": "yarn clean && node ./build.js && http-server ./dist --open",
+    "serve": "node ./build.js && http-server ./dist --open",
     "example:ssg": "node ./examples/ssg.js",
     "example:ssr": "node ./examples/ssr.js",
     "start": "yarn develop",
@@ -24,21 +32,21 @@
     "parse5": "^6.0.1"
   },
   "devDependencies": {
+    "@mapbox/rehype-prism": "^0.8.0",
     "c8": "^7.11.2",
     "chai": "^4.3.6",
     "concurrently": "^7.1.0",
     "eslint": "^8.14.0",
-    "fastify": "^3.27.4",
-    "fastify-static": "^4.6.1",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
     "mocha": "^9.2.2",
     "nodemon": "^2.0.15",
+    "prismjs": "^1.28.0",
+    "simple.css": "^0.1.3",
     "rehype-raw": "^6.1.1",
     "rehype-stringify": "^9.0.3",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
-    "rimraf": "^3.0.2",
     "unified": "^10.1.2"
   }
 }
diff --git a/src/dom-shim.js b/src/dom-shim.js
@@ -138,8 +138,4 @@ globalThis.customElements = {
     // console.debug('customElements.get => ', tagName);
     return customElementsRegistry[tagName];
   }
-};
-
-// TODO
-// const HydrateElement = await import('./hydrate-element.js').HydrateElement;
-// globalThis.HydrateElement = HydrateElement;
+};
diff --git a/src/wcc.js b/src/wcc.js
@@ -19,8 +19,6 @@ async function renderComponentRoots(tree, includeShadowRoots = true) {
       const shadowRootHtml = elementInstance.getInnerHTML({ includeShadowRoots });
       const shadowRootTree = parseFragment(shadowRootHtml);
 
-      // TODO safeguard against non-declared custom elements, e.g. using <my-element></my-element>
-      // without it actually import-ing it first, or else below destructuring will break
       node.childNodes = node.childNodes.length === 0 ? shadowRootTree.childNodes : [...shadowRootTree.childNodes, ...node.childNodes];
     }
 
@@ -52,11 +50,10 @@ async function registerDependencies(moduleURL) {
     async ExpressionStatement(node) {
       const { expression } = node;
 
-      // TODO don't need to update if it already exists
-      if (expression.type === 'CallExpression' && expression.callee && expression.callee.object 
-        && expression.callee.property && expression.callee.object.name === 'customElements' 
+      if (expression.type === 'CallExpression' && expression.callee && expression.callee.object
+        && expression.callee.property && expression.callee.object.name === 'customElements'
         && expression.callee.property.name === 'define') {
-        
+
         const tagName = node.expression.arguments[0].value;
 
         definitions[tagName] = {
@@ -68,7 +65,6 @@ async function registerDependencies(moduleURL) {
   });
 }
 
-// TODO assumes top level component is using a default export
 async function initializeCustomElement(elementURL, tagName, attrs = []) {
   await registerDependencies(elementURL);