feature/WCC v0.15.0 and HTML Web Components

packages/cli/package.json

@@ -53,7 +53,7 @@
     "remark-rehype": "^7.0.0",
     "rollup": "^3.29.4",
     "unified": "^9.2.0",
-    "wc-compiler": "~0.14.0"
+    "wc-compiler": "~0.15.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.10.4",

packages/cli/test/cases/build.config.prerender-html-web-components/build.config.prerender-html-web-components.spec.js

@@ -0,0 +1,123 @@
+/*
+ * Use Case
+ * Run Greenwood build command with prerender config set to true and using HTML (Light DOM) Web Components.
+ *
+ * User Result
+ * Should generate a Greenwood build with the expected generated output using custom elements.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   prerender: true
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   components/
+ *     caption.js
+ *     picture-frame.js
+ *   pages/
+ *     index.html
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { runSmokeTest } from '../../../../../test/smoke-test.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { Runner } from 'gallinago';
+import { fileURLToPath, URL } from 'url';
+import fs from 'fs/promises';
+
+const expect = chai.expect;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Prerender Configuration and HTML (Light DOM) Web Components';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  let runner;
+
+  before(function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public')
+    };
+    runner = new Runner();
+  });
+
+  describe(LABEL, function() {
+
+    before(function() {
+      runner.setup(outputPath, getSetupFiles(outputPath));
+      runner.runCommand(cliPath, 'build');
+    });
+
+    runSmokeTest(['public', 'index'], LABEL);
+
+    describe('Prerendered output for index.html', function() {
+      let dom;
+      let pictureFrame;
+      let expectedHtml;
+      let actualHtml;
+
+      before(async function() {
+        actualHtml = await fs.readFile(new URL('./public/index.html', import.meta.url), 'utf-8');
+        dom = new JSDOM(actualHtml);
+        pictureFrame = dom.window.document.querySelectorAll('wcc-picture-frame');
+        expectedHtml = await fs.readFile(new URL('./expected.html', import.meta.url), 'utf-8');
+      });
+
+      describe(LABEL, function() {
+        it('should not have any <template> tags within the document', function() {
+          expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+        });
+
+        it('should only have one <wcc-picture-frame> tag', function() {
+          expect(pictureFrame.length).to.equal(1);
+        });
+
+        it('should have the expected image from userland in the HTML', () => {
+          const img = pictureFrame[0].querySelectorAll('.picture-frame img');
+
+          expect(img.length).to.equal(1);
+          expect(img[0].getAttribute('alt')).to.equal('Greenwood logo');
+          expect(img[0].getAttribute('src')).to.equal('https://www.greenwoodjs.io/assets/greenwood-logo-og.png');
+        });
+
+        it('should have the expected Author name <span> from userland in the HTML', () => {
+          const img = pictureFrame[0].querySelectorAll('.picture-frame img + br + span');
+
+          expect(img.length).to.equal(1);
+          expect(img[0].textContent).to.equal('Author: Greenwood');
+        });
+
+        it('should have the expected title attribute content in the nested <wcc-caption> tag', () => {
+          const caption = pictureFrame[0].querySelectorAll('.picture-frame wcc-caption .caption');
+          const heading = caption[0].querySelectorAll('.heading');
+
+          expect(caption.length).to.equal(1);
+          expect(heading.length).to.equal(1);
+          expect(heading[0].textContent).to.equal('Greenwood');
+        });
+
+        it('should have the expected copyright content in the nested <wcc-caption> tag', () => {
+          const caption = pictureFrame[0].querySelectorAll('.picture-frame wcc-caption .caption');
+          const span = caption[0].querySelectorAll('span');
+
+          expect(span.length).to.equal(1);
+          expect(span[0].textContent).to.equal('© 2024');
+        });
+
+        it('should have the expected recursively generated HTML', () => {
+          const body = dom.window.document.querySelector('body');
+
+          expect(expectedHtml.replace(/ /g, '').replace(/\n/g, '')).to.equal(body.innerHTML.replace(/ /g, '').replace(/\n/g, ''));
+        });
+      });
+    });
+  });
+
+  after(async function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});

packages/cli/test/cases/build.config.prerender-html-web-components/expected.html

@@ -0,0 +1,13 @@
+<wcc-picture-frame title="Greenwood">
+  <div class="picture-frame">
+    <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png" alt="Greenwood logo">
+    <br>
+    <span>Author: <span>Greenwood</span></span>
+    <wcc-caption>
+      <div class="caption">
+        <h6 class="heading">Greenwood</h6>
+        <span>© 2024</span>
+      </div>
+    </wcc-caption>
+  </div>
+</wcc-picture-frame>

packages/cli/test/cases/build.config.prerender-html-web-components/greenwood.config.js

@@ -0,0 +1,3 @@
+export default {
+  prerender: true
+};

packages/cli/test/cases/build.config.prerender-html-web-components/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/cli/test/cases/build.config.prerender-html-web-components/src/components/caption.js

@@ -0,0 +1,11 @@
+export default class Caption extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <div class="caption">
+        ${this.innerHTML}
+      </div>
+    `;
+  }
+}
+
+customElements.define('wcc-caption', Caption);

packages/cli/test/cases/build.config.prerender-html-web-components/src/components/picture-frame.js

@@ -0,0 +1,19 @@
+import './caption.js';
+
+export default class PictureFrame extends HTMLElement {
+  connectedCallback() {
+    const title = this.getAttribute('title');
+
+    this.innerHTML = `
+      <div class="picture-frame">
+        ${this.innerHTML}
+        <wcc-caption>
+          <h6 class="heading">${title}</h6>
+          <span>&copy; 2024</span>
+        </wcc-caption>
+      </div>
+    `;
+  }
+}
+
+customElements.define('wcc-picture-frame', PictureFrame);

packages/cli/test/cases/build.config.prerender-html-web-components/src/pages/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="../components/picture-frame.js"></script>
+  </head>
+
+  <body>
+    <wcc-picture-frame title="Greenwood">
+      <img
+        src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
+        alt="Greenwood logo"
+      />
+      <br/>
+      <span>Author: <span>Greenwood</span></span>
+    </wcc-picture-frame>
+  </body>
+</html>

packages/cli/test/cases/loaders-build.html-web-components/greenwood.config.js

@@ -0,0 +1,3 @@
+export default {
+  prerender: true
+};

packages/cli/test/cases/loaders-build.html-web-components/loaders-html-webcomponents.spec.js

@@ -0,0 +1,92 @@
+/*
+ * Use Case
+ * Run Greenwood and correctly prerender "HTML" Web Components.
+ * https://blog.jim-nielsen.com/2023/html-web-components/
+ *
+ * User Result
+ * Should generate a static Greenwood build with the expected prerender "HTML" Web Components content.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ *
+ * {
+ *   prerender: true,
+ * }
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     picture-frame.js
+*    index.html
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { runSmokeTest } from '../../../../../test/smoke-test.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { Runner } from 'gallinago';
+import { fileURLToPath, URL } from 'url';
+
+const expect = chai.expect;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Prerendering with HTML Web Components';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  let runner;
+
+  before(function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public')
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+    before(function() {
+      runner.setup(outputPath, getSetupFiles(outputPath));
+      runner.runCommand(cliPath, 'build');
+    });
+
+    runSmokeTest(['public'], LABEL);
+
+    describe('Prerender HTML Web Component', function() {
+      let dom;
+      let pictureFrame;
+
+      before(async function() {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
+        pictureFrame = dom.window.document.querySelectorAll('app-picture-frame');
+      });
+
+      it('should not have any <template> tags within the document', function() {
+        expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+      });
+
+      it('should only have one <app-picture-frame> tag', function() {
+        expect(pictureFrame.length).to.equal(1);
+      });
+
+      it('should have the expected title attribute content in the heading of HTML', () => {
+        const heading = pictureFrame[0].querySelectorAll('.picture-frame .heading');
+
+        expect(heading.length).to.equal(1);
+        expect(heading[0].textContent).to.equal('Greenwood');
+      });
+
+      it('should have the expected image from userland in the HTML', () => {
+        const img = pictureFrame[0].querySelectorAll('.picture-frame img');
+
+        expect(img.length).to.equal(1);
+        expect(img[0].getAttribute('alt')).to.equal('Greenwood logo');
+        expect(img[0].getAttribute('src')).to.equal('/assets/greenwood.png');
+      });
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});

packages/cli/test/cases/loaders-build.html-web-components/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/cli/test/cases/loaders-build.html-web-components/src/components/picture-frame.js

@@ -0,0 +1,14 @@
+export default class PictureFrame extends HTMLElement {
+  connectedCallback() {
+    const title = this.getAttribute('title');
+
+    this.innerHTML = `
+      <div class="picture-frame">
+        <h6 class="heading">${title}</h6>
+        ${this.innerHTML}
+      </div>
+    `;
+  }
+}
+
+customElements.define('app-picture-frame', PictureFrame);

packages/cli/test/cases/loaders-build.html-web-components/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <script type="module" src="./components/picture-frame.js"></script>
+  </head>
+
+  <body>
+    <app-picture-frame title="Greenwood">
+      <img src="/assets/greenwood.png" alt="Greenwood logo" />
+    </app-picture-frame>
+  </body>
+
+</html>

packages/cli/test/cases/loaders-build.prerender-import-attributes/loaders-build.prerender-import-attributes.spec.js

@@ -9,7 +9,6 @@
  * greenwood build
  *
  * User Config
- * import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
  *
  * {
  *   prerender: true,

packages/plugin-import-jsx/package.json

@@ -27,7 +27,7 @@
     "@greenwood/cli": "^0.28.0-alpha.4"
   },
   "dependencies": {
-    "wc-compiler": "~0.14.0"
+    "wc-compiler": "~0.15.0"
   },
   "devDependencies": {
     "@greenwood/cli": "^0.30.0-alpha.6"

yarn.lock

@@ -17174,10 +17174,10 @@ [email protected]:
     commander "^9.3.0"
     debug "^4.3.4"
 
-wc-compiler@~0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/wc-compiler/-/wc-compiler-0.14.0.tgz#3bf5caf9e0b26b8c3a7b9806bd0d0711bfa371de"
-  integrity sha512-5ouvZ2vDfwKTX9mj6IJWaJSF7239VAb+i8gbFqIyDRMuHqP0Bv9sq9oyZTDAqJM3trEiNWwv3VqI0fW4B8LAtg==
+wc-compiler@~0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/wc-compiler/-/wc-compiler-0.15.0.tgz#f8c0a2b074d39490725718ddf0824ca0ee33ae67"
+  integrity sha512-bzRjWEal5QGKrryZAsD3V9abuQ4blu2LP23GdrIM1UFybDRor6hcRhYJwdBLPriw017x/J69yPuRXLgAm2xUPQ==
   dependencies:
     "@projectevergreen/acorn-jsx-esm" "~0.1.0"
     "@projectevergreen/escodegen-esm" "~0.1.0"