naive work around for markdown wrapped web components

packages/cli/src/plugins/resource/plugin-standard-html.js

@@ -309,6 +309,20 @@ class StandardHtmlResource extends ResourceInterface {
         body = getMetaContent(normalizedUrl, config, body);
 
         if (processedMarkdown) {
+          // TODO this obviously a contrived regex example
+          // but my regex skills are poo and everything I wrote hung the browser :/
+          const wrappedCustomElementRegex = /<p><x-counter>(.*)<\/x-counter><\/p>/sg;
+          const ceTest = wrappedCustomElementRegex.test(processedMarkdown.contents);
+
+          if (ceTest) {
+            const ceMatches = processedMarkdown.contents.match(wrappedCustomElementRegex);
+            const stripWrappingTags = ceMatches[0]
+              .replace('<p>', '')
+              .replace('</p>', '');
+
+            processedMarkdown.contents = processedMarkdown.contents.replace(ceMatches[0], stripWrappingTags);
+          }
+
           body = body.replace(/\<content-outlet>(.*)<\/content-outlet>/s, processedMarkdown.contents);
         }
 

packages/cli/test/cases/build.default.workspace-frontmatter-imports/build.default.workspace-frontmatter-imports.spec.js

@@ -0,0 +1,99 @@
+/*
+ * Use Case
+ * Run Greenwood build command with a workspace that uses frontmatter imports.
+ *
+ * User Result
+ * Should generate a bare bones Greenwood build.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * None (Greenwood Default)
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     counter/
+ *       counter.js
+ *       counter.css
+ *   pages/
+ *     examples/
+ *       counter.md
+ *     index.md
+ */
+const expect = require('chai').expect;
+const fs = require('fs');
+const glob = require('glob-promise');
+const { JSDOM } = require('jsdom');
+const path = require('path');
+const runSmokeTest = require('../../../../../test/smoke-test');
+const TestBed = require('../../../../../test/test-bed');
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Default Greenwood Configuration and Workspace with Frontmatter Imports';
+  let setup;
+
+  before(async function() {
+    setup = new TestBed();
+    this.context = await setup.setupTestBed(__dirname);
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      await setup.runGreenwoodCommand('build');
+    });
+
+    runSmokeTest(['public', 'index'], LABEL);
+
+    describe('Content and file output for the Counter page', function() {
+      let dom;
+      let html;
+
+      before(async function() {
+        const htmlPath = path.resolve(this.context.publicDir, 'examples/counter', 'index.html');
+
+        dom = await JSDOM.fromFile(path.resolve(htmlPath));
+        html = await fs.promises.readFile(htmlPath, 'utf-8');
+      });
+
+      it('should output a counter.css file from frontmatter import', async function() {
+        const cssFiles = await glob.promise(`${this.context.publicDir}**/**/counter.*.css`);
+
+        expect(cssFiles).to.have.lengthOf(1);
+      });
+
+      it('should output a counter.js file from frontmatter import', async function() {
+        const jsFiles = await glob.promise(`${this.context.publicDir}**/**/counter.*.js`);
+
+        expect(jsFiles).to.have.lengthOf(1);
+      });
+
+      it('should output a custom element tag that is _not_ wrapped in a <p> tag', function() {
+        expect((/<p><x-counter>/).test(html)).to.be.false;
+        expect((/<\/x-counter><\/p>/).test(html)).to.be.false;
+      });
+
+      it('should output a heading tag from the custom element', function() {
+        const heading = dom.window.document.querySelectorAll('body h3');
+
+        expect(heading.length).to.be.equal(1);
+        expect(heading[0].textContent).to.be.equal('My Counter');
+      });
+
+      // JSDOM may not support this case of computing styles when using a <link> tag?
+      // https://github.com/jsdom/jsdom/issues/2986
+      xit('should have the color style for the output element', function() {
+        const output = dom.window.document.querySelector('body ~ h2');
+        const computedStyle = dom.window.getComputedStyle(output);
+
+        expect(computedStyle.color).to.equal('red');
+      });
+    });
+  });
+
+  after(function() {
+    setup.teardownTestBed();
+  });
+});

packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/counter/counter.css

@@ -0,0 +1,3 @@
+h2 {
+  color: red;
+}

packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/counter/counter.js

@@ -0,0 +1,42 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <style>
+    :host {
+      color: blue;
+    }
+  </style>
+  <h3>My Counter</h3>
+  <button id="dec">-</button>
+  <span id="count"></span>
+  <button id="inc">+</button>
+`;
+
+class MyCounter extends HTMLElement {
+  constructor() {
+    super();
+    this.count = 0;
+    this.attachShadow({ mode: 'open' });
+  }
+
+  async connectedCallback() {    
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.getElementById('inc').onclick = () => this.inc();
+    this.shadowRoot.getElementById('dec').onclick = () => this.dec();
+    this.update();
+  }
+
+  inc() {
+    this.update(++this.count); // eslint-disable-line
+  }
+
+  dec() {
+    this.update(--this.count); // eslint-disable-line
+  }
+
+  update(count) {
+    this.shadowRoot.getElementById('count').innerHTML = count || this.count;
+  }
+}
+
+customElements.define('x-counter', MyCounter);

packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/examples/counter.md

@@ -0,0 +1,10 @@
+---
+title: Counter Page
+imports:
+  - /components/counter/counter.js
+  - /components/counter/counter.css
+---
+
+## Counter Page Example
+
+<x-counter></x-counter>

packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/index.md

@@ -0,0 +1,3 @@
+## Home Page
+
+This is just a test.

www/components/counter/counter.js

@@ -1,6 +1,11 @@
 const template = document.createElement('template');
 
 template.innerHTML = `
+  <style>
+    :host {
+      color: blue;
+    }
+  </style>
   <h1>My Counter</h1>
   <button id="dec">-</button>
   <span id="count"></span>
@@ -34,5 +39,4 @@ class MyCounter extends HTMLElement {
   }
 }
 
-customElements.define('x-counter', MyCounter);
-document.getElementById('plugins').textContent = document.getElementById('plugins').textContent + ' - hello from markdown JS import!';
+customElements.define('x-counter', MyCounter);