From 675ed23a08735020eaeeacf799e2afa5e373f278 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 May 2022 17:31:21 -0400
Subject: [PATCH 1/7] config for various ways to omit declarative shadow dom

---
 src/wcc.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/wcc.js b/src/wcc.js
index c08c4197..e782770a 100644
--- a/src/wcc.js
+++ b/src/wcc.js
@@ -9,14 +9,14 @@ import fs from 'node:fs/promises';
 
 let definitions;
 
-async function renderComponentRoots(tree) {
+async function renderComponentRoots(tree, includeShadowRoots = true) {
   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: true });
+      const shadowRootHtml = elementInstance.getInnerHTML({ includeShadowRoots });
       const shadowRootTree = parseFragment(shadowRootHtml);
 
       // TODO safeguard against non-declared custom elements, e.g. using <my-element></my-element>
@@ -25,12 +25,12 @@ async function renderComponentRoots(tree) {
     }
 
     if (node.childNodes && node.childNodes.length > 0) {
-      await renderComponentRoots(node);
+      await renderComponentRoots(node, includeShadowRoots);
     }
 
     // does this only apply to `<template>` tags?
     if (node.content && node.content.childNodes && node.content.childNodes.length > 0) {
-      await renderComponentRoots(node.content);
+      await renderComponentRoots(node.content, includeShadowRoots);
     }
   }
 
@@ -92,18 +92,21 @@ async function initializeCustomElement(elementURL, tagName, attrs = []) {
   return elementInstance;
 }
 
-async function renderToString(elementURL, fragment = true) {
+async function renderToString(elementURL, options = {}) {
   definitions = [];
+  const { includeShadowRoots = true, unwrapTopLevelShadowRoot = false } = options;
 
   const elementInstance = await initializeCustomElement(elementURL);
-  const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots: false });
+  // invert includeShadowRoots at the top level to double `<template>` tag wrapping top level content
+  // this is useful in conjunction with a WC used as a page, where we only want its content, not necessarily its template
+  const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots: unwrapTopLevelShadowRoot ? !unwrapTopLevelShadowRoot : unwrapTopLevelShadowRoot });
   const elementTree = parseFragment(elementHtml);
-  const finalTree = await renderComponentRoots(elementTree);
+  const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
 
   elementInstance.shadowRoot.innerHTML = serialize(finalTree);
 
   return {
-    html: elementInstance.getInnerHTML({ includeShadowRoots: fragment }),
+    html: elementInstance.getInnerHTML({ includeShadowRoots }),
     metadata: definitions
   };
 }

From 90d69ddd679d8ebc1cf27b69163654451a18004d Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 May 2022 18:12:45 -0400
Subject: [PATCH 2/7] non shadow dom styling

---
 docs/components/footer.js     | 18 +++++++-----------
 docs/components/navigation.js |  9 ++++-----
 docs/pages/docs.md            |  1 +
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/docs/components/footer.js b/docs/components/footer.js
index c77dddcb..8ad789d3 100644
--- a/docs/components/footer.js
+++ b/docs/components/footer.js
@@ -3,24 +3,20 @@ const template = document.createElement('template');
 template.innerHTML = `
   <style>
     footer {
-      bottom: 0;
-      width: 100%;
       background-color: var(--accent);
       min-height: 30px;
-      padding-top: 10px;
+      padding: 10px 0;
       grid-column: 1 / -1;
-    }
-
-    footer a {
-      color: #efefef;
-      text-decoration: none;
+      text-align: center;
     }
 
     footer h4 {
-      width: 90%;
       margin: 0 auto;
-      padding: 0;
-      text-align: center;
+    }
+
+    footer a:visited {
+      color: var(--text);
+      text-decoration: none;
     }
   </style>
 
diff --git a/docs/components/navigation.js b/docs/components/navigation.js
index 2e68709b..7b8cb3b3 100644
--- a/docs/components/navigation.js
+++ b/docs/components/navigation.js
@@ -3,22 +3,21 @@ const template = document.createElement('template');
 
 template.innerHTML = `
   <style>
-    ul {
+    nav ul {
       list-style-type: none;
-      color: #efefef;
       overflow: auto;
       grid-column: 1 / -1;
     }
 
-    ul li {
+    nav ul li {
       float: left;
       width: 33%;
       text-align: center;
       margin: 10px 0;
     }
 
-    ul li a:visited {
-      color: #efefef;
+    nav ul li a, nav ul li a:visited {
+      color: var(--text);
     }
   </style>
 
diff --git a/docs/pages/docs.md b/docs/pages/docs.md
index c520904d..7d0f162d 100644
--- a/docs/pages/docs.md
+++ b/docs/pages/docs.md
@@ -72,6 +72,7 @@ export async function getData() {
 > _See our [examples page](/examples/) for more info._
 
 ## Conventions
+
 - Make sure to define your custom elements with `customElements.define`
 - Make sure to `export default` your custom element base class
 - Avoid [touching the DOM in `constructor` methods](https://twitter.com/techytacos/status/1514029967981494280)
\ No newline at end of file

From 4d7789dd0873fef84b917f69b451797306256925 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sat, 7 May 2022 19:06:40 -0400
Subject: [PATCH 3/7] includeShadowRoots config spec

---
 .../config-include-shadow-roots.spec.js       | 88 +++++++++++++++++++
 .../src/components/header.js                  | 43 +++++++++
 .../src/components/navigation.js              | 27 ++++++
 .../src/pages/index.js                        | 25 ++++++
 4 files changed, 183 insertions(+)
 create mode 100644 test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js
 create mode 100644 test/cases/config-include-shadow-roots/src/components/header.js
 create mode 100644 test/cases/config-include-shadow-roots/src/components/navigation.js
 create mode 100644 test/cases/config-include-shadow-roots/src/pages/index.js

diff --git a/test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js b/test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js
new file mode 100644
index 00000000..1bdf448f
--- /dev/null
+++ b/test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js
@@ -0,0 +1,88 @@
+/*
+ * Use Case
+ * Run wcc against nested custom elements with nested declarative shadow dom and ensure no shadow is included
+ *
+ * User Result
+ * Should return the expected HTML output for all levels of element nesting.
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     navigation.js
+ *     header.js
+ *   pages/
+ *     index.js
+ * 
+ * Config
+ * {
+ *   includeShadowRoots: false
+ * }
+ */
+
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import { renderToString } from '../../../src/wcc.js';
+
+const expect = chai.expect;
+
+describe('Run WCC For ', function() {
+  const LABEL = 'Nested Custom Element w/ no rendered Shadow Roots';
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url), {
+      includeShadowRoots: false
+    });
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    it('should not have one top level <template> with an open shadowroot', function() {
+      expect(dom.window.document.querySelectorAll('template[shadowroot="open"]').length).to.equal(0);
+      expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+    });
+
+    describe('static page content', function() {
+      it('should have the expected static content for the page', function() {
+        expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page');
+      });
+    });
+
+    describe('custom header element with nested navigation element', function() {
+      let headerContentsDom;
+
+      before(function() {
+        headerContentsDom = new JSDOM(dom.window.document.querySelectorAll('header')[0].innerHTML);
+      });
+
+      it('should have a <header> tag within the <template> shadowroot', function() {
+        expect(dom.window.document.querySelectorAll('header').length).to.equal(1);
+      });
+
+      it('should have expected content within the <header> tag', function() {
+        const content = headerContentsDom.window.document.querySelector('a h4').textContent;
+  
+        expect(content).to.contain('My Personal Blog');
+      });
+
+      describe('nested navigation element', function() {
+        let navigationContentsDom;
+  
+        before(function() {
+          navigationContentsDom = new JSDOM(headerContentsDom.window.document.querySelectorAll('wcc-navigation')[0].innerHTML);
+        });
+  
+        it('should have a <nav> tag within the <template> shadowroot', function() {
+          expect(navigationContentsDom.window.document.querySelectorAll('nav').length).to.equal(1);
+        });
+  
+        it('should have three links within the <nav> element', function() {
+          const links = navigationContentsDom.window.document.querySelectorAll('nav ul li a');
+    
+          expect(links.length).to.equal(3);
+        });
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/cases/config-include-shadow-roots/src/components/header.js b/test/cases/config-include-shadow-roots/src/components/header.js
new file mode 100644
index 00000000..8cdabebc
--- /dev/null
+++ b/test/cases/config-include-shadow-roots/src/components/header.js
@@ -0,0 +1,43 @@
+// intentionally nested to test wcc nested dependency resolution logic
+import './navigation.js';
+
+class Header extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.innerHTML = this.render();
+    }
+  }
+
+  render() {
+    return `
+      <header class="header">
+        <div class="head-wrap">
+          <div class="brand">
+            <a href="/">
+              <img src="/www/assets/greenwood-logo.jpg" alt="Greenwood logo"/>
+              <h4>My Personal Blog</h4>
+            </a>
+          </div>
+
+          <wcc-navigation></wcc-navigation>
+
+          <div class="social">
+            <a href="https://github.com/ProjectEvergreen/greenwood">
+              <img
+                src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github"
+                alt="Greenwood GitHub badge"
+                class="github-badge"/>
+            </a>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+}
+
+export {
+  Header
+};
+
+customElements.define('wcc-header', Header);
\ No newline at end of file
diff --git a/test/cases/config-include-shadow-roots/src/components/navigation.js b/test/cases/config-include-shadow-roots/src/components/navigation.js
new file mode 100644
index 00000000..41c627d4
--- /dev/null
+++ b/test/cases/config-include-shadow-roots/src/components/navigation.js
@@ -0,0 +1,27 @@
+// intentionally nested in the assets/ directory to test wcc nested dependency resolution logic
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <nav>
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/about">About</a></li>
+      <li><a href="/artists">Artists</a></li>
+    <ul>
+  </nav>
+`;
+
+class Navigation extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+export {
+  Navigation
+};
+
+customElements.define('wcc-navigation', Navigation);
\ No newline at end of file
diff --git a/test/cases/config-include-shadow-roots/src/pages/index.js b/test/cases/config-include-shadow-roots/src/pages/index.js
new file mode 100644
index 00000000..927c1918
--- /dev/null
+++ b/test/cases/config-include-shadow-roots/src/pages/index.js
@@ -0,0 +1,25 @@
+import '../components/header.js';
+
+export default class HomePage extends HTMLElement {
+  constructor() {
+    super();
+
+    if (this.shadowRoot) {
+      // console.debug('HomePage => shadowRoot detected!');
+    } else {
+      this.attachShadow({ mode: 'open' });
+    }
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = this.getTemplate();
+  }
+
+  getTemplate() {
+    return `
+      <wcc-header></wcc-header>
+
+      <h1>Home Page</h1>
+    `;
+  }
+}
\ No newline at end of file

From 667209bd9ad7437cfd324041abb1a8b655e8c07c Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sun, 8 May 2022 12:10:04 -0400
Subject: [PATCH 4/7] refactor out double getInnerHTML call

---
 src/wcc.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/wcc.js b/src/wcc.js
index e782770a..c64d0652 100644
--- a/src/wcc.js
+++ b/src/wcc.js
@@ -99,14 +99,16 @@ async function renderToString(elementURL, options = {}) {
   const elementInstance = await initializeCustomElement(elementURL);
   // invert includeShadowRoots at the top level to double `<template>` tag wrapping top level content
   // this is useful in conjunction with a WC used as a page, where we only want its content, not necessarily its template
-  const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots: unwrapTopLevelShadowRoot ? !unwrapTopLevelShadowRoot : unwrapTopLevelShadowRoot });
+  const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots });
   const elementTree = parseFragment(elementHtml);
   const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
 
-  elementInstance.shadowRoot.innerHTML = serialize(finalTree);
+  // elementInstance.shadowRoot.innerHTML = serialize(finalTree);
+
+  console.debug(serialize(finalTree));
 
   return {
-    html: elementInstance.getInnerHTML({ includeShadowRoots }),
+    html: serialize(finalTree),
     metadata: definitions
   };
 }

From fdb3ad41b676e82cafbf1c55d042d6ec939d8146 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sun, 8 May 2022 12:27:07 -0400
Subject: [PATCH 5/7] refactor to lightMode config

---
 build.js                                                 | 4 +++-
 src/wcc.js                                               | 9 ++-------
 .../config-light-mode.spec.js}                           | 6 +++---
 .../src/components/header.js                             | 0
 .../src/components/navigation.js                         | 0
 .../src/pages/index.js                                   | 0
 6 files changed, 8 insertions(+), 11 deletions(-)
 rename test/cases/{config-include-shadow-roots/config-include-shadow-roots.spec.js => config-light-mode/config-light-mode.spec.js} (95%)
 rename test/cases/{config-include-shadow-roots => config-light-mode}/src/components/header.js (100%)
 rename test/cases/{config-include-shadow-roots => config-light-mode}/src/components/navigation.js (100%)
 rename test/cases/{config-include-shadow-roots => config-light-mode}/src/pages/index.js (100%)

diff --git a/build.js b/build.js
index e4f99f94..3845dc8c 100644
--- a/build.js
+++ b/build.js
@@ -11,7 +11,9 @@ async function init() {
   const distRoot = './dist';
   const pagesRoot = './docs/pages';
   const pages = await fs.readdir(new URL(pagesRoot, import.meta.url));
-  const { html } = await renderToString(new URL('./docs/index.js', import.meta.url), false);
+  const { html } = await renderToString(new URL('./docs/index.js', import.meta.url), {
+    lightMode: true
+  });
 
   // await fs.rm(distRoot, { recursive: true, force: true });
   // await fs.mkdir('./dist', { recursive: true });
diff --git a/src/wcc.js b/src/wcc.js
index c64d0652..157aacdb 100644
--- a/src/wcc.js
+++ b/src/wcc.js
@@ -94,19 +94,14 @@ async function initializeCustomElement(elementURL, tagName, attrs = []) {
 
 async function renderToString(elementURL, options = {}) {
   definitions = [];
-  const { includeShadowRoots = true, unwrapTopLevelShadowRoot = false } = options;
+  const { lightMode = false } = options;
+  const includeShadowRoots = !lightMode;
 
   const elementInstance = await initializeCustomElement(elementURL);
-  // invert includeShadowRoots at the top level to double `<template>` tag wrapping top level content
-  // this is useful in conjunction with a WC used as a page, where we only want its content, not necessarily its template
   const elementHtml = elementInstance.getInnerHTML({ includeShadowRoots });
   const elementTree = parseFragment(elementHtml);
   const finalTree = await renderComponentRoots(elementTree, includeShadowRoots);
 
-  // elementInstance.shadowRoot.innerHTML = serialize(finalTree);
-
-  console.debug(serialize(finalTree));
-
   return {
     html: serialize(finalTree),
     metadata: definitions
diff --git a/test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js b/test/cases/config-light-mode/config-light-mode.spec.js
similarity index 95%
rename from test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js
rename to test/cases/config-light-mode/config-light-mode.spec.js
index 1bdf448f..8999bbf9 100644
--- a/test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js
+++ b/test/cases/config-light-mode/config-light-mode.spec.js
@@ -15,7 +15,7 @@
  * 
  * Config
  * {
- *   includeShadowRoots: false
+ *   lightMode: true
  * }
  */
 
@@ -26,12 +26,12 @@ import { renderToString } from '../../../src/wcc.js';
 const expect = chai.expect;
 
 describe('Run WCC For ', function() {
-  const LABEL = 'Nested Custom Element w/ no rendered Shadow Roots';
+  const LABEL = 'Nested Custom Element w/ no using Light Mode configuration';
   let dom;
 
   before(async function() {
     const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url), {
-      includeShadowRoots: false
+      lightMode: true
     });
 
     dom = new JSDOM(html);
diff --git a/test/cases/config-include-shadow-roots/src/components/header.js b/test/cases/config-light-mode/src/components/header.js
similarity index 100%
rename from test/cases/config-include-shadow-roots/src/components/header.js
rename to test/cases/config-light-mode/src/components/header.js
diff --git a/test/cases/config-include-shadow-roots/src/components/navigation.js b/test/cases/config-light-mode/src/components/navigation.js
similarity index 100%
rename from test/cases/config-include-shadow-roots/src/components/navigation.js
rename to test/cases/config-light-mode/src/components/navigation.js
diff --git a/test/cases/config-include-shadow-roots/src/pages/index.js b/test/cases/config-light-mode/src/pages/index.js
similarity index 100%
rename from test/cases/config-include-shadow-roots/src/pages/index.js
rename to test/cases/config-light-mode/src/pages/index.js

From 06233a3cee872a65b3f8d48be4ee902e3ca4edae Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Sun, 8 May 2022 12:39:00 -0400
Subject: [PATCH 6/7] documentation

---
 docs/pages/docs.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/docs/pages/docs.md b/docs/pages/docs.md
index 7d0f162d..6b7919f5 100644
--- a/docs/pages/docs.md
+++ b/docs/pages/docs.md
@@ -11,6 +11,11 @@ This function takes a `URL` to a JavaScript file that defines a custom element,
 const { html } = await renderToString(new URL('./src/index.js', import.meta.url));
 ```
 
+#### Options
+
+`renderToString` also supports a second parameter that is an object, called `options`, which supports the following configurations:
+
+- `lightMode`: For more static outcomes (e.g. no declarative shadow DOM), this option will omit all wrapping `<template shadowroot="...">` tags when rendering out custom elements.  Useful for static sites or working with global CSS libraries.
 
 ## Metadata
 

From 8ec7a353de931f3b06d41f7ccd7124d8d60b58fd Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Tue, 10 May 2022 21:35:19 -0400
Subject: [PATCH 7/7] quick docs update

---
 README.md | 1 +
 build.js  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ee11c9ea..991e2b18 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@ In addition, WCC hopes to provide a surface area to explore patterns around [str
 ## Key Features
 
 1. Supports the following `HTMLElement` lifecycles and methods on the server side
+    - `constructor`
     - `connectedCallback`
     - `attachShadow`
     - `innerHTML`
diff --git a/build.js b/build.js
index 3845dc8c..ea57d40f 100644
--- a/build.js
+++ b/build.js
@@ -67,7 +67,7 @@ async function init() {
       <html lang="en" prefix="og:http://ogp.me/ns#">
       
         <head>
-          <title>Web Components Compiler (WCC)</title>
+          <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">
         </head>