Skip to content

Commit

Permalink
unify around greenwood config based prerender behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
thescientist13 committed Dec 13, 2024
1 parent 93ef3db commit 161950d
Show file tree
Hide file tree
Showing 15 changed files with 57 additions and 68 deletions.
1 change: 1 addition & 0 deletions greenwood.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export default {
optimization: 'inline',
staticRouter: true,
activeContent: true,
prerender: true,
plugins: [
greenwoodPluginGraphQL(),
greenwoodPluginPolyfills({
Expand Down
3 changes: 1 addition & 2 deletions packages/cli/src/commands/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 || (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;
Expand Down
13 changes: 6 additions & 7 deletions packages/plugin-graphql/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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()
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()
]

};
Original file line number Diff line number Diff line change
Expand Up @@ -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()
]

};
Original file line number Diff line number Diff line change
Expand Up @@ -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()
]

};
Original file line number Diff line number Diff line change
Expand Up @@ -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()
]

};
Original file line number Diff line number Diff line change
Expand Up @@ -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()
]

};
40 changes: 19 additions & 21 deletions packages/plugin-renderer-lit/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,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.
Expand All @@ -110,24 +128,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._
```
7 changes: 2 additions & 5 deletions packages/plugin-renderer-lit/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
};
}
}, {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { greenwoodPluginRendererLit } from '../../../src/index.js';

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

export default {
prerender: true,
plugins: [
greenwoodPluginRendererLit({
prerender: true
})
greenwoodPluginRendererLit()
]
};
11 changes: 6 additions & 5 deletions packages/plugin-renderer-puppeteer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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()
Expand All @@ -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

Expand Down
3 changes: 1 addition & 2 deletions packages/plugin-renderer-puppeteer/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
};
}
}];
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { greenwoodPluginRendererPuppeteer } from '../../../src/index.js';

export default {
prerender: true,
plugins: [
...greenwoodPluginRendererPuppeteer()
greenwoodPluginRendererPuppeteer()
]
};

0 comments on commit 161950d

Please sign in to comment.