wc-compiler 0.1.0 → 0.2.2

package/README.md

@@ -1,24 +1,18 @@
 # wcc
 
-[![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/thescientist13/wcc.svg)](https://github.com/thescientist13/wcc/tags)
-![GitHub Actions status](https://github.com/thescientist13/wcc/workflows/Master%20Integration/badge.svg)
-[![GitHub issues](https://img.shields.io/github/issues-pr-raw/thescientist13/wcc.svg)](https://github.com/thescientist13/wcc/issues)
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/thescientist13/wcc/master/LICENSE.md)
+<img src="https://merry-caramel-524e61.netlify.app/assets/wcc-logo.png" width="30%"/>
 
-Experimental native Web Components compiler. (`<w⚙️⚙️/>`)
-
-> _It's Web Components all the way down._  🐢
+> _Experimental Web Components compiler.  It's Web Components all the way down!_  🐢
 
 ## Overview
 
 **Web Components Compiler (WCC)** is a NodeJS package designed to make server-side rendering (SSR) of native Web Components easier.  It can render (within reason 😅) your Web Component into static HTML leveraging [Declarative Shadow DOM](https://web.dev/declarative-shadow-dom/).
 
-It is not a static site generator or framework.  It is focused on producing raw HTML from Web Components with the intent of being easily _integrated_ into a site generator or framework.  
+It is not a static site generator or framework.  It is focused on producing raw HTML from Web Components with the intent of being easily _integrated_ into a site generator or framework.
 
-> _The original motivation for this project was to create a [purpose built, lighter weight, alternative to puppeteer for SSR of `HTMLElement`](https://github.com/ProjectEvergreen/greenwood/issues/926) for the project [**Greenwood**](https://www.greenwoodjs.io/)._
+> _The original motivation for this project was to create a [purpose built, lighter weight alternative to puppeteer for SSR of native `HTMLElement` based Web Components](https://github.com/ProjectEvergreen/greenwood/issues/935) for the project [**Greenwood**](https://www.greenwoodjs.io/)._
 
-In addition, WCC hopes to provide a surface area to explore patterns around [streaming](https://github.com/thescientist13/wcc/issues/5) and serverless rendering, as well as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg) discussions around community protocols, like [hydration](https://github.com/thescientist13/wcc/issues/3). 
+In addition, WCC hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5) and serverless rendering, as well as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg) discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).
 
 ## Key Features
 
@@ -42,7 +36,7 @@ $ npm install wc-compiler --save-dev
 
 ## Usage
 
-WCC exposes a few utilities to render your Web Components.  Below is one example, with [full docs and more examples](https://wcc.greenwoodjs.io) available on the website.
+WCC exposes a few utilities to render your Web Components.  Below is one example, with [full docs and more examples](https://merry-caramel-524e61.netlify.app/) available on the website.
 
 1. Given a custom element like so:
     ```js
@@ -79,12 +73,12 @@ WCC exposes a few utilities to render your Web Components.  Below is one example
     ```js
     import { renderToString } from 'wc-compiler';
 
-    const { html } = renderToString(new URL('./path/to/footer.js', import.meta.url));
+    const { html } = await renderToString(new URL('./path/to/footer.js', import.meta.url));
 
     console.debug({ html })
     ```
 
-1. You will get the following html output that can be used in conjunction with your preferred site framework or templating solution.
+1. You will get the following HTML output that can be used in conjunction with your preferred site framework or templating solution.
     ```html
     <wcc-footer>
       <template shadowroot="open">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Experimental native Web Components compiler.",
   "main": "src/wcc.js",
   "type": "module",

package/src/wcc.js

@@ -9,6 +9,20 @@ import fs from 'node:fs/promises';
 
 let definitions;
 
+function getParse(html) {
+  return html.indexOf('<html>') >= 0 || html.indexOf('<body>') >= 0 || html.indexOf('<head>') >= 0
+    ? parse
+    : parseFragment;
+}
+
+function isCustomElementDefinitionNode(node) {
+  const { expression } = node;
+
+  return expression.type === 'CallExpression' && expression.callee && expression.callee.object
+    && expression.callee.property && expression.callee.object.name === 'customElements'
+    && expression.callee.property.name === 'define';
+}
+
 async function renderComponentRoots(tree, includeShadowRoots = true) {
   for (const node of tree.childNodes) {
     if (node.tagName && node.tagName.indexOf('-') > 0) {
@@ -43,21 +57,22 @@ async function registerDependencies(moduleURL) {
     sourceType: 'module'
   }), {
     async ImportDeclaration(node) {
-      const dependencyModuleURL = new URL(node.source.value, moduleURL);
+      const specifier = node.source.value;
+      const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
+
+      if (!isBareSpecifier) {
+        const dependencyModuleURL = new URL(node.source.value, moduleURL);
 
-      await registerDependencies(dependencyModuleURL);
+        await registerDependencies(dependencyModuleURL);
+      }
     },
     async ExpressionStatement(node) {
-      const { expression } = node;
-
-      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;
+      if (isCustomElementDefinitionNode(node)) {
+        const { arguments: args } = node.expression;
+        const tagName = args[0].value;
 
         definitions[tagName] = {
-          instanceName: node.expression.arguments[1].name,
+          instanceName: args[1].name,
           moduleURL
         };
       }
@@ -65,6 +80,25 @@ async function registerDependencies(moduleURL) {
   });
 }
 
+async function getTagName(moduleURL) {
+  const moduleContents = await fs.readFile(moduleURL, 'utf-8');
+  let tagName;
+
+  walk.simple(acorn.parse(moduleContents, {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  }), {
+    async ExpressionStatement(node) {
+      if (isCustomElementDefinitionNode(node)) {
+
+        tagName = node.expression.arguments[0].value;
+      }
+    }
+  });
+
+  return tagName;
+}
+
 async function initializeCustomElement(elementURL, tagName, attrs = []) {
   await registerDependencies(elementURL);
 
@@ -93,14 +127,21 @@ async function renderToString(elementURL, options = {}) {
 
   const { lightMode = false } = options;
   const includeShadowRoots = !lightMode;
-
+  const elementTagName = await getTagName(elementURL);
   const elementInstance = await initializeCustomElement(elementURL);
+
   const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots });
-  const elementTree = parseFragment(elementHtml);
+  const elementTree = getParse(elementHtml)(elementHtml);
   const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
+  const html = !lightMode && elementTagName ? `
+      <${elementTagName}>
+        ${serialize(finalTree)}
+      </${elementTagName}>
+    `
+    : serialize(finalTree);
 
   return {
-    html: serialize(finalTree),
+    html,
     metadata: definitions
   };
 }
@@ -115,7 +156,7 @@ async function renderFromHTML(html, elements = [], options = {}) {
     await initializeCustomElement(url);
   }
 
-  const elementTree = parse(html);
+  const elementTree = getParse(html)(html);
   const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
 
   return {