wc-compiler 0.10.0 → 0.11.0

package/dist/wcc.dist.cjs

@@ -59,6 +59,18 @@ class Element extends Node$1 {
     this.attributes = {};
   }
 
+  attachShadow(options) {
+    this.shadowRoot = new ShadowRoot(options);
+
+    return this.shadowRoot;
+  }
+
+  // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
+  // eslint-disable-next-line
+  getInnerHTML() {
+    return this.shadowRoot ? this.shadowRoot.innerHTML : this.innerHTML;
+  }
+
   setAttribute(name, value) {
     this.attributes[name] = value;
   }
@@ -96,19 +108,7 @@ class Document extends Node$1 {
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 // EventTarget <- Node <- Element <- HTMLElement
 class HTMLElement extends Element {
-  attachShadow(options) {
-    this.shadowRoot = new ShadowRoot(options);
-
-    return this.shadowRoot;
-  }
-
   connectedCallback() { }
-
-  // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
-  // eslint-disable-next-line
-  getInnerHTML(options = {}) {
-    return this.shadowRoot.innerHTML;
-  }
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
@@ -27658,6 +27658,7 @@ function getParser(moduleURL) {
   };
 }
 
+// replace all instances of __this__ marker with relative reference to the custom element parent node
 function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = false) {
   try {
     for (const node of tree.childNodes) {
@@ -27670,9 +27671,9 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
           const { value } = attrs[attr];
 
           if (value.indexOf('__this__.') >= 0) {
-            const root = hasShadowRoot ? 'parentNode.host' : 'parentElement';
+            const root = hasShadowRoot ? '.getRootNode().host' : `${'.parentElement'.repeat(currentDepth)}`;
 
-            node.attrs[attr].value = value.replace(/__this__/g, `this${'.parentElement'.repeat(currentDepth - 1)}.${root}`);
+            node.attrs[attr].value = value.replace(/__this__/g, `this${root}`);
           }
         }
       }
@@ -27885,8 +27886,26 @@ function parseJsx(moduleURL) {
 
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
-                  const finalHtml = serialize(elementTree);
-                  const transformed = parse$1(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                  const serializedHtml = serialize(elementTree);
+                  // we have to Shadow DOM use cases here
+                  // 1. No shadowRoot, so we attachShadow and append the template
+                  // 2. If there is root from the attachShadow signal, so we just need to inject innerHTML, say in an htmx
+                  // could / should we do something else instead of .innerHTML
+                  // https://github.com/ProjectEvergreen/wcc/issues/138
+                  const renderHandler = hasShadowRoot
+                    ? `
+                        const template = document.createElement('template');
+                        template.innerHTML = \`${serializedHtml}\`;
+
+                        if(!${elementRoot}) {
+                          this.attachShadow({ mode: 'open' });
+                          this.shadowRoot.appendChild(template.content.cloneNode(true));
+                        } else {
+                          this.shadowRoot.innerHTML = template.innerHTML;
+                        }
+                      `
+                    : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+                  const transformed = parse$1(renderHandler, {
                     ecmaVersion: 'latest',
                     sourceType: 'module'
                   });
@@ -27920,15 +27939,7 @@ function parseJsx(moduleURL) {
     for (const line of tree.body) {
       // test for class MyComponent vs export default class MyComponent
       if (line.type === 'ClassDeclaration' || (line.declaration && line.declaration.type) === 'ClassDeclaration') {
-        const children = !line.declaration
-          ? line.body.body
-          : line.declaration.body.body;
-        for (const method of children) {
-          if (method.key.name === 'constructor') {
-            insertPoint = method.start - 1;
-            break;
-          }
-        }
+        insertPoint = line.declaration.body.start + 1;
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wc-compiler",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Experimental native Web Components compiler.",
   "repository": {
     "type": "git",
@@ -28,11 +28,12 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
-    "develop": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
-    "build": "node ./build.js",
-    "serve": "node ./build.js && http-server ./dist --open",
-    "start": "npm run develop",
+    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
+    "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
+    "docs:build": "node ./build.js",
+    "docs:serve": "npm run clean && npm run docs:build && http-server ./dist --open",
+    "sandbox": "npm run clean && concurrently \"nodemon --experimental-loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "start": "npm run docs:serve",
     "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",
@@ -61,8 +62,8 @@
     "eslint-plugin-no-only-tests": "^2.6.0",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
+    "livereload": "^0.9.3",
     "mocha": "^9.2.2",
-    "node-fetch": "^3.2.6",
     "nodemon": "^2.0.15",
     "prismjs": "^1.28.0",
     "rehype-autolink-headings": "^6.1.1",

package/src/dom-shim.js

@@ -31,6 +31,18 @@ class Element extends Node {
     this.attributes = {};
   }
 
+  attachShadow(options) {
+    this.shadowRoot = new ShadowRoot(options);
+
+    return this.shadowRoot;
+  }
+
+  // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
+  // eslint-disable-next-line
+  getInnerHTML() {
+    return this.shadowRoot ? this.shadowRoot.innerHTML : this.innerHTML;
+  }
+
   setAttribute(name, value) {
     this.attributes[name] = value;
   }
@@ -68,19 +80,7 @@ class Document extends Node {
 // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 // EventTarget <- Node <- Element <- HTMLElement
 class HTMLElement extends Element {
-  attachShadow(options) {
-    this.shadowRoot = new ShadowRoot(options);
-
-    return this.shadowRoot;
-  }
-
   connectedCallback() { }
-
-  // https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#serialization
-  // eslint-disable-next-line
-  getInnerHTML(options = {}) {
-    return this.shadowRoot.innerHTML;
-  }
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

package/src/jsx-loader.js

@@ -38,6 +38,7 @@ export function getParser(moduleURL) {
   };
 }
 
+// replace all instances of __this__ marker with relative reference to the custom element parent node
 function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = false) {
   try {
     for (const node of tree.childNodes) {
@@ -50,9 +51,9 @@ function applyDomDepthSubstitutions(tree, currentDepth = 1, hasShadowRoot = fals
           const { value } = attrs[attr];
 
           if (value.indexOf('__this__.') >= 0) {
-            const root = hasShadowRoot ? 'parentNode.host' : 'parentElement';
+            const root = hasShadowRoot ? '.getRootNode().host' : `${'.parentElement'.repeat(currentDepth)}`;
 
-            node.attrs[attr].value = value.replace(/__this__/g, `this${'.parentElement'.repeat(currentDepth - 1)}.${root}`);
+            node.attrs[attr].value = value.replace(/__this__/g, `this${root}`);
           }
         }
       }
@@ -265,8 +266,26 @@ export function parseJsx(moduleURL) {
 
                   applyDomDepthSubstitutions(elementTree, undefined, hasShadowRoot);
 
-                  const finalHtml = serialize(elementTree);
-                  const transformed = acorn.parse(`${elementRoot}.innerHTML = \`${finalHtml}\`;`, {
+                  const serializedHtml = serialize(elementTree);
+                  // we have to Shadow DOM use cases here
+                  // 1. No shadowRoot, so we attachShadow and append the template
+                  // 2. If there is root from the attachShadow signal, so we just need to inject innerHTML, say in an htmx
+                  // could / should we do something else instead of .innerHTML
+                  // https://github.com/ProjectEvergreen/wcc/issues/138
+                  const renderHandler = hasShadowRoot
+                    ? `
+                        const template = document.createElement('template');
+                        template.innerHTML = \`${serializedHtml}\`;
+
+                        if(!${elementRoot}) {
+                          this.attachShadow({ mode: 'open' });
+                          this.shadowRoot.appendChild(template.content.cloneNode(true));
+                        } else {
+                          this.shadowRoot.innerHTML = template.innerHTML;
+                        }
+                      `
+                    : `${elementRoot}.innerHTML = \`${serializedHtml}\`;`;
+                  const transformed = acorn.parse(renderHandler, {
                     ecmaVersion: 'latest',
                     sourceType: 'module'
                   });
@@ -300,15 +319,7 @@ export function parseJsx(moduleURL) {
     for (const line of tree.body) {
       // test for class MyComponent vs export default class MyComponent
       if (line.type === 'ClassDeclaration' || (line.declaration && line.declaration.type) === 'ClassDeclaration') {
-        const children = !line.declaration
-          ? line.body.body
-          : line.declaration.body.body;
-        for (const method of children) {
-          if (method.key.name === 'constructor') {
-            insertPoint = method.start - 1;
-            break;
-          }
-        }
+        insertPoint = line.declaration.body.start + 1;
       }
     }