michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs: fix knownEntryPoints and add async renderToStaticMarkup example (#1489)

Browse source
This commit is contained in:
Brandon 2021-10-12 14:30:21 -05:00 committed by GitHub
parent 86ddc8cf38
commit c7ca17c5ec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
docs/src/pages/reference/renderer-reference.md
View file

@ -58,7 +58,7 @@ export default {
server: './server.js', // optional, relative path to the server entrypoint server: './server.js', // optional, relative path to the server entrypoint
snowpackPlugin: '@snowpack/plugin-xxx', // optional, the name of a snowpack plugin to inject snowpackPlugin: '@snowpack/plugin-xxx', // optional, the name of a snowpack plugin to inject
snowpackPluginOptions: { example: true }, // optional, any options to be forwarded to the snowpack plugin snowpackPluginOptions: { example: true }, // optional, any options to be forwarded to the snowpack plugin
knownEntrypoint: ['framework'], // optional, entrypoint modules that will be used by compiled source knownEntrypoints: ['framework'], // optional, entrypoint modules that will be used by compiled source
external: ['dep'], // optional, dependencies that should not be built by snowpack external: ['dep'], // optional, dependencies that should not be built by snowpack
polyfills: ['./shadow-dom-polyfill.js'], // optional, module scripts that should be loaded before client hydration. polyfills: ['./shadow-dom-polyfill.js'], // optional, module scripts that should be loaded before client hydration.
hydrationPolyfills: ['./hydrate-framework.js'], // optional, polyfills that need to run before hydration ever occurs. hydrationPolyfills: ['./hydrate-framework.js'], // optional, polyfills that need to run before hydration ever occurs.
@ -153,7 +153,7 @@ function check(Component, props, childHTML) {
`renderToStaticMarkup` is a function that renders a Component to a static string of HTML. There's usually a method exported by frameworks named something like `renderToString`. `renderToStaticMarkup` is a function that renders a Component to a static string of HTML. There's usually a method exported by frameworks named something like `renderToString`.
```js ```js
import { renderToString } from 'xxx'; import { h, renderToString } from 'xxx';
function renderToStaticMarkup(Component, props, childHTML) { function renderToStaticMarkup(Component, props, childHTML) {
const html = renderToString(h(Component, { ...props, innerHTML: childHTML })); const html = renderToString(h(Component, { ...props, innerHTML: childHTML }));
@ -177,6 +177,19 @@ function renderToStaticMarkup(Component, props, childHTML) {
} }
``` ```
The `renderToStaticMarkup` function also supports `async/await` for render functions that return a `Promise`.
```js
import { h, renderToString } from 'xxx';
async function renderToStaticMarkup(Component, props, childHTML) {
const html = await renderToString(
h(Component, { ...props, innerHTML: childHTML })
);
return { html };
}
```
### Client Entrypoint (`client.js`) ### Client Entrypoint (`client.js`)
The client entrypoint of a renderer is responsible for rehydrating static HTML (the result of `renderToStaticMarkup`) back into a fully interactive component. Its `default` export should be a `function` which accepts the host element of the Component, an `astro-root` custom element. The client entrypoint of a renderer is responsible for rehydrating static HTML (the result of `renderToStaticMarkup`) back into a fully interactive component. Its `default` export should be a `function` which accepts the host element of the Component, an `astro-root` custom element.
@ -184,7 +197,7 @@ The client entrypoint of a renderer is responsible for rehydrating static HTML (
> If your framework supports non-destructive component hydration (as opposed to a destructive `render` method), be sure to use that! Following your framework's Server Side Rendering (SSR) guide should point you in the right direction. > If your framework supports non-destructive component hydration (as opposed to a destructive `render` method), be sure to use that! Following your framework's Server Side Rendering (SSR) guide should point you in the right direction.
```js ```js
import { hydrate } from 'xxx'; import { h, hydrate } from 'xxx';
export default (element) => { export default (element) => {
return (Component, props, childHTML) => { return (Component, props, childHTML) => {