Docs/issue 1004 document latest status for non standard import formats (

#1166)

* update documentation around custom imports

* update test case descriptions and add placeholder prerender typescript test case

* update test case descriptions

packages/plugin-import-css/test/cases/exp-build.prerender/exp-build.prerender.spec.js

@@ -12,6 +12,7 @@
  * import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
  *
  * {
+ *   prerender: true,
  *   plugins: [{
  *     greenwoodPluginImportCss()
  *   }]

packages/plugin-import-json/test/cases/exp-build.prerender/exp-build.prerender.spec.js

@@ -12,6 +12,7 @@
  * import { greenwoodPluginImportJson } from '@greenwood/plugin-import-json';
  *
  * {
+ *   prerender: true,
  *   plugins: [{
  *     greenwoodPluginImportJson()
  *   }]

packages/plugin-import-jsx/test/cases/exp-build.prerender/exp-build.prerender.spec.js

@@ -12,6 +12,7 @@
  * import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
  *
  * {
+ *   prerender: true,
  *   plugins: [{
  *     greenwoodPluginImportJsx()
  *   }]

packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/exp-prerender.serve.ssr.spec.js

@@ -0,0 +1,107 @@
+/*
+ * Use Case
+ * Run Greenwood with a prerender HTML page that imports TypeScript.
+ *
+ * User Result
+ * Should generate a Greenwood build that correctly builds and bundles all assets.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   prerender: true,
+ *   plugins: [
+ *      greenwoodPluginTypeScript()
+ *   ]
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   components/
+ *     card.ts
+ *   pages/
+ *     index.html
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import request from 'request';
+import { Runner } from 'gallinago';
+import { fileURLToPath } from 'url';
+
+const expect = chai.expect;
+
+// TODO - this should work after this issue is resolved
+// https://github.com/ProjectEvergreen/wcc/issues/122
+xdescribe('Serve Greenwood With: ', function() {
+  const LABEL = 'A Prerendered Application (SSR) with an HTML page importing a TypeScript component';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  const hostname = 'http://127.0.0.1:8080';
+  let runner;
+
+  before(async function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public'),
+      hostname
+    };
+    runner = new Runner(false, true);
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      await runner.setup(outputPath, getSetupFiles(outputPath));
+      await runner.runCommand(cliPath, 'build');
+
+      return new Promise(async (resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 10000);
+
+        await runner.runCommand(cliPath, 'serve');
+      });
+    });
+
+    describe('Serve command with SSR prerender specific behaviors for an HTML page', function() {
+      let response = {};
+
+      before(async function() {
+        return new Promise((resolve, reject) => {
+          request.get(`${hostname}/`, (err, res, body) => {
+            if (err) {
+              reject();
+            }
+
+            response = res;
+            response.body = body;
+            fragmentsApiDom = new JSDOM(body);
+
+            resolve();
+          });
+        });
+      });
+
+      it('should return a 200 status', function(done) {
+        expect(response.statusCode).to.equal(200);
+        done();
+      });
+
+      it('should return a custom status message', function(done) {
+        expect(response.statusMessage).to.equal('OK');
+        done();
+      });
+
+      // it should return the correct h1 contents
+      // it should return the correct app-card contents
+    });
+  });
+
+  after(function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+    runner.stopCommand();
+  });
+
+});

packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/greenwood.config.js

@@ -0,0 +1,8 @@
+import { greenwoodPluginTypeScript } from '../../../src/index.js';
+
+export default {
+  prerender: true,
+  plugins: [
+    greenwoodPluginTypeScript()
+  ]
+};

packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test-plugin-exp-prerender-ts",
+  "type": "module"
+}

packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/components/card/card.ts

@@ -0,0 +1,26 @@
+export default class Card extends HTMLElement {
+
+  selectItem() {
+    alert(`selected item is => ${this.getAttribute('title')}!`);
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const thumbnail: String = this.getAttribute('thumbnail');
+      const title: String = this.getAttribute('title');
+      const template: any = document.createElement('template');
+
+      template.innerHTML = `
+        <div>
+          <h3>${title}</h3>
+          <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
+          <button onclick="this.parentNode.parentNode.host.selectItem()">View Item Details</button>
+        </div>
+      `;
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('app-card', Card);

packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/pages/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <script type="module" src="../components/card/card.ts"></script>    
+  </head>
+
+  <body>
+    <h1>Hello World!</h1>
+    <app-card
+      title="foo"
+      thumbnail="bar.png"
+    ></app-card>
+  </body>
+
+</html>

packages/plugin-typescript/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js

@@ -73,7 +73,6 @@ describe('Serve Greenwood With: ', function() {
               reject();
             }
 
-            console.log({ body });
             response = res;
             response.body = body;
             fragmentsApiDom = new JSDOM(body);

www/pages/docs/server-rendering.md

@@ -204,10 +204,10 @@ export async function getTemplate(compilation, route) {
 ### Custom Imports
 
 > ⚠️ _This feature is experimental._
+> 
+> _**Note**: At this time, [WCC can't handle non-standard javaScript formats](https://github.com/ProjectEvergreen/greenwood/issues/1004), though we hope to enable this by the 1.0 release._
 
-Through the support of the following plugins, Greenwood also supports loading custom file formats on the server side using ESM
-- [CSS](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-import-css/README.md#usage)
-- [JSON](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-import-json/README.md#usage)
+Combined with Greenwood's [custom import resource plugins](https://www.greenwoodjs.io/plugins/custom-plugins/) (or your own!), Greenwood can handle loading custom file extensions on the server side using ESM, like CSS and JSON!
 
 For example, you can now import JSON in your SSR pages and components.
 ```js
@@ -217,7 +217,7 @@ console.log(json); // { status: 200, message: 'some data' }
 ```
 
 **Steps**
-1. Make sure you are using Node `v18.12.1`
+1. Make sure you are using Node `v18.15.0`
 1. Run the Greenwood CLI using the `--experimental-loaders` flag and pass Greenwood's custom loader
     ```shell
     $ node --experimental-loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood <command>