enhancement/issue 1343 unify around greenwood config based prerender behavior for renderer plugins (#1344)

Author: thescientist13

greenwood.config.js

@@ -11,6 +11,7 @@ export default {
   optimization: 'inline',
   staticRouter: true,
   activeContent: true,
+  prerender: true,
   plugins: [
     greenwoodPluginGraphQL(),
     greenwoodPluginPolyfills({

packages/cli/src/commands/build.js

@@ -19,15 +19,14 @@ const runProductionBuild = async (compilation) => {
       const adapterPlugin = compilation.config.plugins.find(plugin => plugin.type === 'adapter')
         ? compilation.config.plugins.find(plugin => plugin.type === 'adapter').provider(compilation)
         : null;
-      const shouldPrerender = prerender || prerenderPlugin.prerender;
 
       if (!await checkResourceExists(outputDir)) {
         await fs.mkdir(outputDir, {
           recursive: true
         });
       }
 
-      if (shouldPrerender || (activeContent && shouldPrerender)) {
+      if (prerender) {
         // start any of the user's server plugins if needed
         const servers = [...compilation.config.plugins.filter((plugin) => {
           return plugin.type === 'server' && !plugin.isGreenwoodDefaultPlugin;

packages/plugin-graphql/README.md

@@ -10,7 +10,7 @@ A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query
 
 As of now, this plugin requires some form of [prerendering](https://www.greenwoodjs.dev/docs/reference/rendering-strategies/) either through:
 1. Enabling [custom imports](https://www.greenwoodjs.dev/docs/pages/server-rendering/#custom-imports), or
-1. Installing the [Puppeteer renderer plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer).
+1. Installing the [Puppeteer renderer plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer)
 
 ## Installation
 
@@ -29,15 +29,14 @@ $ pnpm add -D @greenwood/plugin-graphql
 
 ## Usage
 
-Add this plugin to your _greenwood.config.js_ and configure with either `prerender: true` _or_ by adding the `greenwoodPluginRendererPuppeteer` plugin.
+Add this plugin to your _greenwood.config.js_ and then choose your flavor.  For example, this is the configuration for using Puppeteer.
 
-```javascript
+```js
 import { greenwoodPluginGraphQL } from '@greenwood/plugin-graphql';
-import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer'; // if using puppeteer
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  // ...
-  prerender: true, // if using custom imports
+  prerender: true,
   plugins: [
     greenwoodPluginGraphQL(),
     greenwoodPluginRendererPuppeteer()
@@ -95,7 +94,7 @@ customElements.define('app-header', HeaderComponent);
 
 ## Schema
 
-The basic page schema follow the structure of the [page data]() structure.   Currently, the main "API" is just a list of all pages in your _pages/_ directory, represented as a `Page` [type definition](https://graphql.org/graphql-js/basic-types/).   This is called Greenwood's `graph`.
+The basic page schema follow the structure of the [page data](https://greenwoodjs.dev/docs/content-as-data/pages-data/) structure.   Currently, the main "API" is just a list of all pages in your _pages/_ directory, represented as a `Page` [type definition](https://graphql.org/graphql-js/basic-types/).   This is called Greenwood's [**graph**](https://greenwoodjs.dev/docs/reference/appendix/#graph).
 
 This is what the schema looks like:
 ```gql

packages/plugin-graphql/test/cases/query-children/greenwood.config.js

@@ -2,11 +2,9 @@ import { greenwoodPluginGraphQL } from '../../../src/index.js';
 import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  title: 'GraphQL ChildrenQuery Spec',
-
+  prerender: true,
   plugins: [
-    ...greenwoodPluginGraphQL(),
-    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
+    greenwoodPluginGraphQL(),
+    greenwoodPluginRendererPuppeteer()
   ]
-
 };

packages/plugin-graphql/test/cases/query-collection/greenwood.config.js

@@ -2,10 +2,10 @@ import { greenwoodPluginGraphQL } from '../../../src/index.js';
 import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-
+  prerender: true,
   plugins: [
-    ...greenwoodPluginGraphQL(),
-    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
+    greenwoodPluginGraphQL(),
+    greenwoodPluginRendererPuppeteer()
   ]
 
 };

packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js

@@ -2,10 +2,9 @@ import { greenwoodPluginGraphQL } from '../../../src/index.js';
 import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-
+  prerender: true,
   plugins: [
-    ...greenwoodPluginGraphQL(),
-    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
+    greenwoodPluginGraphQL(),
+    greenwoodPluginRendererPuppeteer()
   ]
-
 };

packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js

@@ -2,10 +2,9 @@ import { greenwoodPluginGraphQL } from '../../../src/index.js';
 import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-
+  prerender: true,
   plugins: [
-    ...greenwoodPluginGraphQL(),
-    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
+    greenwoodPluginGraphQL(),
+    greenwoodPluginRendererPuppeteer()
   ]
-
 };

packages/plugin-graphql/test/cases/query-graph/greenwood.config.js

@@ -2,10 +2,10 @@ import { greenwoodPluginGraphQL } from '../../../src/index.js';
 import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-
+  prerender: true,
   plugins: [
-    ...greenwoodPluginGraphQL(),
-    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
+    greenwoodPluginGraphQL(),
+    greenwoodPluginRendererPuppeteer()
   ]
 
 };

packages/plugin-renderer-lit/README.md

@@ -98,6 +98,24 @@ export async function getBody() {
 
 ## Options
 
+### Prerender
+
+The plugin works with Greenwood's [**prerender**](https://greenwoodjs.dev/docs/reference/configuration/#prerender) configuration, allowing for the use of Lit's SSR renderer for [prerendering](https://greenwoodjs.dev/docs/reference/rendering-strategies/#prerendering) your content.
+
+```javascript
+import { greenwoodPluginRendererLit } from '@greenwood/plugin-renderer-lit';
+
+export default {
+  prerender: true,
+
+  plugins: [
+    greenwoodPluginRendererLit()
+  ]
+}
+```
+
+> _Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability._
+
 ### Isolation Mode
 
 By default, this plugin sets `isolation` mode to `true` for all SSR pages.  If you want to override this, just export an `isolation` const.
@@ -116,24 +134,4 @@ In order for server-rendered components to become interactive on the client side
 ```js
 // src/pages/products.js
 export const hydration = false; // disable Lit hydration scripts for this page
-```
-
-### Prerender
-
-The plugin provides a setting that can be used to override Greenwood's [default _prerender_](/docs/configuration/#prerender) implementation which uses [WCC](https://github.com/ProjectEvergreen/wcc), to use Lit instead.
-
-```javascript
-import { greenwoodPluginRendererLit } from '@greenwood/plugin-renderer-lit';
-
-export default {
-  // ...
-
-  plugins: [
-    greenwoodPluginRendererLit({
-      prerender: true
-    })
-  ]
-}
-```
-
-> _Keep in mind you will need to make sure your Lit Web Components are isomorphic and [properly leveraging `LitElement`'s lifecycles](https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations) and browser / Node APIs accordingly for maximum compatibility and portability._
+```

packages/plugin-renderer-lit/src/index.js

@@ -24,7 +24,6 @@ class LitHydrationResource extends ResourceInterface {
     const headSelector = isDevelopment ? `<script type="${importMapType}">` : '<head>';
     const hydrationSupportScriptPath = '/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js';
     let body = await response.text();
-    console.log({ body });
 
     // this needs to come first before any userland code, but before any import maps
     // https://github.com/ProjectEvergreen/greenwood/pull/1289
@@ -57,19 +56,17 @@ class LitHydrationResource extends ResourceInterface {
       `);
     }
 
-    console.log({ body });
     return new Response(body);
   }
 }
 
-const greenwoodPluginRendererLit = (options = {}) => {
+const greenwoodPluginRendererLit = () => {
   return [{
     type: 'renderer',
     name: 'plugin-renderer-lit:renderer',
     provider: () => {
       return {
-        executeModuleUrl: new URL('./execute-route-module.js', import.meta.url),
-        prerender: options.prerender
+        executeModuleUrl: new URL('./execute-route-module.js', import.meta.url)
       };
     }
   }, {

packages/plugin-renderer-lit/test/cases/build.prerender.getting-started/greenwood.config.js

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

packages/plugin-renderer-lit/test/cases/loaders-build.prerender.import-attributes/greenwood.config.js

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

packages/plugin-renderer-puppeteer/README.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-A Greenwood plugin for using [**Puppeteer**](https://pptr.dev) as a custom [_pre-rendering_ solution](/docs/server-rendering/#render-vs-prerender).  As Puppeteer is a headless browser, it provides a lot more power and capabilities for fully rendering things like Web Components, GraphQL calls, and other very browser dependent features. For more information and complete docs on Greenwood, please visit [our website](https://www.greenwoodjs.dev).
+A Greenwood plugin for using [**Puppeteer**](https://pptr.dev) as a custom [_prerendering_ solution](https://greenwoodjs.dev/docs/reference/rendering-strategies/#prerendering).  As Puppeteer is a headless browser, it provides a lot more power and capabilities for fully rendering things like Web Components, GraphQL calls, and other very browser dependent features. For more information and complete docs on Greenwood, please visit [our website](https://www.greenwoodjs.dev).
 
 > This package assumes you already have `@greenwood/cli` installed.
 
@@ -23,13 +23,13 @@ $ pnpm add -D @greenwood/plugin-renderer-puppeteer
 
 ## Usage
 
-Add this plugin to your _greenwood.config.js_:
+Add this plugin and enable the `prerender` setting in your _greenwood.config.js_:
 
 ```javascript
 import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  // ...
+  prerender: true,
 
   plugins: [
     greenwoodPluginRendererPuppeteer()
@@ -42,14 +42,15 @@ Now, when running `greenwood build`, all your pages will get run through Puppete
 ## Caveats
 
 ### Limitations
-Given this plugin instruments an entire browser, this plugin _only_ supports Greenwood's [`prerender` configuration](/docs/configuration/#prerender) option and so will NOT be viable for any [SSR](/docs/server-rendering/) or [Serverless and Edge](https://github.com/ProjectEvergreen/greenwood/discussions/626) features.  Instead, Greenwood will be focusing on making [**WCC**](https://github.com/ProjectEvergreen/wcc) the default and recommended first-party solution.
+
+Given this plugin instruments an entire browser, this plugin _only_ works with Greenwood's [`prerender` configuration](https://greenwoodjs.dev/docs/reference/configuration/#prerender) option and so will NOT be viable for any of Greenwood's [SSR or Serverless](https://greenwoodjs.dev/docs/pages/server-rendering/) capabilities.  Instead, Greenwood will be focusing on making [**WCC**](https://github.com/ProjectEvergreen/wcc) the default and recommended first-party solution.
 
 In addition, **puppeteer** also leverages npm `postinstall` scripts which in some environments, like [Stackblitz](https://github.com/ProjectEvergreen/greenwood/discussions/639), would be disabled and so [YMMV](https://dictionary.cambridge.org/us/dictionary/english/ymmv).
 
 
 ### Dependencies
 
-You may need to install additional Operating System level libraries and dependencies depending on the system you are running on to support headless Chrome. For example, for a Docker based environment like [GitHub Actions](https://github.com/ProjectEvergreen/greenwood/blob/master/.github/workflows/master.yml#L19), you would need to add [this below setup script (or similar)](https://github.com/ProjectEvergreen/greenwood/blob/master/.github/workflows/chromium-lib-install.sh) to your runner
+You may need to install additional Operating System level libraries and dependencies depending on the system you are running on to support headless Chrome. For example, for a Docker based environment like [GitHub Actions](https://github.com/ProjectEvergreen/greenwood/blob/master/.github/workflows/ci.yml#L19), you would need to add [this below setup script (or similar)](https://github.com/ProjectEvergreen/greenwood/blob/master/.github/workflows/chromium-lib-install.sh) to your runner
 ```shell
 #!/usr/bin/bash
 

packages/plugin-renderer-puppeteer/src/index.js

@@ -15,8 +15,7 @@ const greenwoodPluginRendererPuppeteer = (options = {}) => {
     name: 'plugin-renderer-puppeteer:renderer',
     provider: () => {
       return {
-        customUrl: new URL('./puppeteer-handler.js', import.meta.url),
-        prerender: true
+        customUrl: new URL('./puppeteer-handler.js', import.meta.url)
       };
     }
   }];

packages/plugin-renderer-puppeteer/test/cases/build.default/greenwood.config.js

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