From be8c20f829c5d89811f1065627864c6b5bb4a4aa Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Fri, 13 Dec 2024 17:12:20 -0500 Subject: [PATCH 1/2] unify around greenwood config based prerender behavior --- greenwood.config.js | 1 + packages/cli/src/commands/build.js | 3 +- packages/plugin-graphql/README.md | 13 +++--- .../cases/query-children/greenwood.config.js | 8 ++-- .../query-collection/greenwood.config.js | 6 +-- .../greenwood.config.js | 7 ++-- .../query-custom-schema/greenwood.config.js | 7 ++-- .../cases/query-graph/greenwood.config.js | 6 +-- packages/plugin-renderer-lit/README.md | 40 +++++++++---------- packages/plugin-renderer-lit/src/index.js | 7 +--- .../greenwood.config.js | 5 +-- .../greenwood.config.js | 5 +-- packages/plugin-renderer-puppeteer/README.md | 11 ++--- .../plugin-renderer-puppeteer/src/index.js | 3 +- .../cases/build.default/greenwood.config.js | 3 +- 15 files changed, 57 insertions(+), 68 deletions(-) diff --git a/greenwood.config.js b/greenwood.config.js index 2ba3aca86..a9a2427b3 100644 --- a/greenwood.config.js +++ b/greenwood.config.js @@ -11,6 +11,7 @@ export default { optimization: 'inline', staticRouter: true, activeContent: true, + prerender: true, plugins: [ greenwoodPluginGraphQL(), greenwoodPluginPolyfills({ diff --git a/packages/cli/src/commands/build.js b/packages/cli/src/commands/build.js index 87f13e2d1..fc65dc03b 100644 --- a/packages/cli/src/commands/build.js +++ b/packages/cli/src/commands/build.js @@ -19,7 +19,6 @@ 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, { @@ -27,7 +26,7 @@ const runProductionBuild = async (compilation) => { }); } - if (shouldPrerender || (activeContent && shouldPrerender)) { + if (prerender || (activeContent && prerender)) { // start any of the user's server plugins if needed const servers = [...compilation.config.plugins.filter((plugin) => { return plugin.type === 'server' && !plugin.isGreenwoodDefaultPlugin; diff --git a/packages/plugin-graphql/README.md b/packages/plugin-graphql/README.md index 120fe0c4a..78968a04c 100644 --- a/packages/plugin-graphql/README.md +++ b/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 diff --git a/packages/plugin-graphql/test/cases/query-children/greenwood.config.js b/packages/plugin-graphql/test/cases/query-children/greenwood.config.js index 556625d69..53e744342 100644 --- a/packages/plugin-graphql/test/cases/query-children/greenwood.config.js +++ b/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() ] - }; \ No newline at end of file diff --git a/packages/plugin-graphql/test/cases/query-collection/greenwood.config.js b/packages/plugin-graphql/test/cases/query-collection/greenwood.config.js index c38b0c8dd..c127727a3 100644 --- a/packages/plugin-graphql/test/cases/query-collection/greenwood.config.js +++ b/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() ] }; \ No newline at end of file diff --git a/packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js b/packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js index c38b0c8dd..53e744342 100644 --- a/packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js +++ b/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() ] - }; \ No newline at end of file diff --git a/packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js b/packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js index c38b0c8dd..53e744342 100644 --- a/packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js +++ b/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() ] - }; \ No newline at end of file diff --git a/packages/plugin-graphql/test/cases/query-graph/greenwood.config.js b/packages/plugin-graphql/test/cases/query-graph/greenwood.config.js index c38b0c8dd..c127727a3 100644 --- a/packages/plugin-graphql/test/cases/query-graph/greenwood.config.js +++ b/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() ] }; \ No newline at end of file diff --git a/packages/plugin-renderer-lit/README.md b/packages/plugin-renderer-lit/README.md index 1ae687bb9..ae76ec718 100644 --- a/packages/plugin-renderer-lit/README.md +++ b/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._ \ No newline at end of file +``` \ No newline at end of file diff --git a/packages/plugin-renderer-lit/src/index.js b/packages/plugin-renderer-lit/src/index.js index bedb5534d..dbe05b85a 100755 --- a/packages/plugin-renderer-lit/src/index.js +++ b/packages/plugin-renderer-lit/src/index.js @@ -24,7 +24,6 @@ class LitHydrationResource extends ResourceInterface { const headSelector = isDevelopment ? `