Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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) {
// 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 @@ -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.
Expand All @@ -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._
```
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()
]
};
Loading