wc-compiler 0.6.0 → 0.6.2

package/README.md

@@ -88,4 +88,4 @@ See our [website](https://merry-caramel-524e61.netlify.app/) for API docs and ex
 
 **WCC** is not a static site generator, framework or bundler.  It is focused on producing raw HTML from Web Components with the intent of being easily integrated into a site generator or framework, like [**Greenwood**](https://github.com/ProjectEvergreen/greenwood/) or [**Eleventy**](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/), the original motivation for creating [this project](https://github.com/ProjectEvergreen/greenwood/issues/935).
 
-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).
+In addition, **WCC** hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5), [serverless and edge rendering](https://github.com/thescientist13/web-components-at-the-edge), and as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg)'s discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).

package/dist/wcc.dist.cjs

@@ -86,7 +86,7 @@ class Document extends Node$1 {
         return new HTMLTemplateElement();
 
       default:
-        return new HTMLElement();
+        return new HTMLElement$1();
 
     }
   }
@@ -98,7 +98,7 @@ class Document extends Node$1 {
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 // EventTarget <- Node <- Element <- HTMLElement
-class HTMLElement extends Element {
+class HTMLElement$1 extends Element {
   attachShadow(options) {
     this.shadowRoot = new ShadowRoot(options);
 
@@ -129,7 +129,7 @@ class ShadowRoot extends DocumentFragment {
 
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement
 // EventTarget <- Node <- Element <- HTMLElement <- HTMLTemplateElement
-class HTMLTemplateElement extends HTMLElement {
+class HTMLTemplateElement extends HTMLElement$1 {
   constructor() {
     super();
     this.content = new DocumentFragment();
@@ -171,7 +171,7 @@ class CustomElementsRegistry {
 globalThis.addEventListener = noop;
 globalThis.document = new Document();
 globalThis.customElements = new CustomElementsRegistry();
-globalThis.HTMLElement = HTMLElement;
+globalThis.HTMLElement = HTMLElement$1;
 
 // Reserved word lists for various dialects of the language
 
@@ -27934,7 +27934,8 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
       const specifier = node.source.value;
       const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
 
-      if (!isBareSpecifier) {
+      // TODO would like to decouple .jsx from the core, ideally
+      if (!isBareSpecifier && ['.js', '.jsx'].includes(path__default["default"].extname(specifier))) {
         const dependencyModuleURL = new URL(node.source.value, moduleURL);
 
         registerDependencies(dependencyModuleURL, definitions, nextDepth);
@@ -27943,7 +27944,9 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
     ExpressionStatement(node) {
       if (isCustomElementDefinitionNode(node)) {
         const { arguments: args } = node.expression;
-        const tagName = args[0].value;
+        const tagName = args[0].type === 'Literal'
+          ? args[0].value // single and double quotes
+          : args[0].quasis[0].value.raw; // template literal
         const tree = parseJsx(moduleURL);
         const isEntry = nextDepth - 1 === 1;
 
@@ -27995,19 +27998,25 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
     : (await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(pathname)).default;
   const dataLoader = (await (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(pathname)).getData;
   const data = dataLoader ? await dataLoader() : {};
-  const elementInstance = new element(data); // eslint-disable-line new-cap
 
-  attrs.forEach((attr) => {
-    elementInstance.setAttribute(attr.name, attr.value);
+  if (element) {
+    const elementInstance = new element(data); // eslint-disable-line new-cap
 
-    if (attr.name === 'hydrate') {
-      definitions[tagName].hydrate = attr.value;
-    }
-  });
-
-  await elementInstance.connectedCallback();
-
-  return elementInstance;
+    attrs.forEach((attr) => {
+      elementInstance.setAttribute(attr.name, attr.value);
+  
+      if (attr.name === 'hydrate') {
+        definitions[tagName].hydrate = attr.value;
+      }
+    });
+  
+    await elementInstance.connectedCallback();
+  
+    return elementInstance;
+  } else {
+    console.debug('No custom element class found for this file');
+    return new HTMLElement();
+  }
 }
 
 async function renderToString(elementURL) {

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "wc-compiler",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Experimental native Web Components compiler.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ProjectEvergreen/wcc.git"
+  },
   "main": "src/wcc.js",
   "type": "module",
   "author": "Owen Buckley <owen@thegreenhouse.io>",
@@ -23,10 +27,10 @@
     "build": "node ./build.js",
     "serve": "node ./build.js && http-server ./dist --open",
     "start": "npm run develop",
-    "test": "mocha --exclude \"./test/cases/jsx/**\" \"./test/**/**/*.spec.js\"",
-    "test:jsx": "c8 node --experimental-loader ./test-jsx-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
+    "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:tdd": "npm run test -- --watch",
-    "test:tdd:jsx": "npm run test:jsx -- --watch",
+    "test:tdd:exp": "npm run test:exp -- --watch",
     "dist": "rollup -c rollup.config.js",
     "prepublishOnly": "npm run clean && npm run dist"
   },

package/src/wcc.js

@@ -8,6 +8,7 @@ import escodegen from 'escodegen';
 import { getParser, parseJsx } from './jsx-loader.js';
 import { parse, parseFragment, serialize } from 'parse5';
 import fs from 'fs';
+import path from 'path';
 
 function getParse(html) {
   return html.indexOf('<html>') >= 0 || html.indexOf('<body>') >= 0 || html.indexOf('<head>') >= 0
@@ -74,7 +75,8 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
       const specifier = node.source.value;
       const isBareSpecifier = specifier.indexOf('.') !== 0 && specifier.indexOf('/') !== 0;
 
-      if (!isBareSpecifier) {
+      // TODO would like to decouple .jsx from the core, ideally
+      if (!isBareSpecifier && ['.js', '.jsx'].includes(path.extname(specifier))) {
         const dependencyModuleURL = new URL(node.source.value, moduleURL);
 
         registerDependencies(dependencyModuleURL, definitions, nextDepth);
@@ -83,7 +85,9 @@ function registerDependencies(moduleURL, definitions, depth = 0) {
     ExpressionStatement(node) {
       if (isCustomElementDefinitionNode(node)) {
         const { arguments: args } = node.expression;
-        const tagName = args[0].value;
+        const tagName = args[0].type === 'Literal'
+          ? args[0].value // single and double quotes
+          : args[0].quasis[0].value.raw; // template literal
         const tree = parseJsx(moduleURL);
         const isEntry = nextDepth - 1 === 1;
 
@@ -135,19 +139,25 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
     : (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
 
-  attrs.forEach((attr) => {
-    elementInstance.setAttribute(attr.name, attr.value);
+  if (element) {
+    const elementInstance = new element(data); // eslint-disable-line new-cap
 
-    if (attr.name === 'hydrate') {
-      definitions[tagName].hydrate = attr.value;
-    }
-  });
-
-  await elementInstance.connectedCallback();
-
-  return elementInstance;
+    attrs.forEach((attr) => {
+      elementInstance.setAttribute(attr.name, attr.value);
+  
+      if (attr.name === 'hydrate') {
+        definitions[tagName].hydrate = attr.value;
+      }
+    });
+  
+    await elementInstance.connectedCallback();
+  
+    return elementInstance;
+  } else {
+    console.debug('No custom element class found for this file');
+    return new HTMLElement();
+  }
 }
 
 async function renderToString(elementURL) {