diff --git a/packages/plugin-import-css/test/cases/exp-build.prerender/exp-build.prerender.spec.js b/packages/plugin-import-css/test/cases/exp-build.prerender/exp-build.prerender.spec.js index 118c0b488..8f127dacb 100644 --- a/packages/plugin-import-css/test/cases/exp-build.prerender/exp-build.prerender.spec.js +++ b/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() * }] diff --git a/packages/plugin-import-json/test/cases/exp-build.prerender/exp-build.prerender.spec.js b/packages/plugin-import-json/test/cases/exp-build.prerender/exp-build.prerender.spec.js index f6ca12a2a..87b57e5f2 100644 --- a/packages/plugin-import-json/test/cases/exp-build.prerender/exp-build.prerender.spec.js +++ b/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() * }] diff --git a/packages/plugin-import-jsx/test/cases/exp-build.prerender/exp-build.prerender.spec.js b/packages/plugin-import-jsx/test/cases/exp-build.prerender/exp-build.prerender.spec.js index 577effe59..1031653fb 100644 --- a/packages/plugin-import-jsx/test/cases/exp-build.prerender/exp-build.prerender.spec.js +++ b/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() * }] diff --git a/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/exp-prerender.serve.ssr.spec.js b/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/exp-prerender.serve.ssr.spec.js new file mode 100644 index 000000000..a85b9d422 --- /dev/null +++ b/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(); + }); + +}); \ No newline at end of file diff --git a/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/greenwood.config.js b/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/greenwood.config.js new file mode 100644 index 000000000..efa8f4de6 --- /dev/null +++ b/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() + ] +}; \ No newline at end of file diff --git a/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/package.json b/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/package.json new file mode 100644 index 000000000..9804e05cf --- /dev/null +++ b/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/package.json @@ -0,0 +1,4 @@ +{ + "name": "test-plugin-exp-prerender-ts", + "type": "module" +} \ No newline at end of file diff --git a/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/components/card/card.ts b/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/components/card/card.ts new file mode 100644 index 000000000..728214c48 --- /dev/null +++ b/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 = ` +
+

${title}

+ ${title} + +
+ `; + this.attachShadow({ mode: 'open' }); + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } + } +} + +customElements.define('app-card', Card); \ No newline at end of file diff --git a/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/pages/index.html b/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/pages/index.html new file mode 100644 index 000000000..555a68287 --- /dev/null +++ b/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/pages/index.html @@ -0,0 +1,16 @@ + + + + + + + + +

Hello World!

+ + + + \ No newline at end of file diff --git a/packages/plugin-typescript/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js b/packages/plugin-typescript/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js index 05af075d6..c38eaf820 100644 --- a/packages/plugin-typescript/test/cases/exp-serve.ssr/exp-serve.ssr.spec.js +++ b/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); diff --git a/www/pages/docs/server-rendering.md b/www/pages/docs/server-rendering.md index eb43c1fb2..3ec770514 100644 --- a/www/pages/docs/server-rendering.md +++ b/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