add no wrapping entry tag option for renderToString (#115)

* add feature support for no wrapping entry tag option for renderToString

* add docs

* fix linting

* fix formatting

docs/pages/docs.md

@@ -50,6 +50,12 @@ export default Home;
 ```
 
 > _**Note**: **WCC** will wrap or not wrap your _entry point's HTML_ in a custom element tag if you do or do not, respectively, include a `customElements.define` in your entry point.  **WCC** will use the tag name you define as the custom element tag name in the generated HTML._
+>
+> You can opt-out of this by passing `false` as the second parameter to `renderToString`.
+> <!-- eslint-disable no-unused-vars -->
+> ```js
+> const { html } = await renderToString(new URL('...'), false);
+> ```
 
 ### renderFromHTML
 

src/wcc.js

@@ -160,9 +160,9 @@ async function initializeCustomElement(elementURL, tagName, attrs = [], definiti
   }
 }
 
-async function renderToString(elementURL) {
+async function renderToString(elementURL, wrappingEntryTag = true) {
   const definitions = [];
-  const elementTagName = await getTagName(elementURL);
+  const elementTagName = wrappingEntryTag && await getTagName(elementURL);
   const isEntry = !!elementTagName;
   const elementInstance = await initializeCustomElement(elementURL, undefined, undefined, definitions, isEntry);
 
@@ -171,7 +171,7 @@ async function renderToString(elementURL) {
     : elementInstance.innerHTML;
   const elementTree = getParse(elementHtml)(elementHtml);
   const finalTree = await renderComponentRoots(elementTree, definitions);
-  const html = elementTagName ? `
+  const html = wrappingEntryTag && elementTagName ? `
       <${elementTagName}>
         ${serialize(finalTree)}
       </${elementTagName}>

test/cases/no-wrapping-entry-tag/no-wrapping-entry-tag.spec.js

@@ -0,0 +1,37 @@
+/*
+ * Use Case
+ * Run wcc against bundled custom elements with no wrapping enabled.
+ *
+ * User Result
+ * Should return the expected HTML with no top level wrapping tag.
+ *
+ * User Workspace
+ * src/
+ *   pages/
+ *     no-wrap.js
+ */
+
+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 = 'Bundled Components w/ No Wrapping Entry TAag';
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/no-wrap.js', import.meta.url), false);
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    describe('no top level wrapping by <wcc-navigation>', function() {
+      it('should have a <footer> tag within the <template> shadowroot', function() {
+        expect(dom.window.document.querySelectorAll('wcc-navigation').length).to.equal(0);
+      });
+    });
+  });
+});

test/cases/no-wrapping-entry-tag/src/no-wrap.js

@@ -0,0 +1,27 @@
+class Navigation extends HTMLElement {
+  connectedCallback() {
+    this.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>
+    `;
+  }
+}
+
+customElements.define('wcc-navigation', Navigation);
+
+class Header extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <header class="header">>
+        <h4>My Personal Blog</h4>
+      </header>
+    `;
+  }
+}
+
+export default Header;