diff options
author | 2021-06-05 10:23:10 -0500 | |
---|---|---|
committer | 2021-06-05 10:23:10 -0500 | |
commit | 54a653e2819564bc81d8fe5cf77963a0c0e4c133 (patch) | |
tree | 4ba6901c85237a89bfe70289c6bd45011334ac64 | |
parent | 0d6afaee9e1412cf095e44d3202f5424bae05dae (diff) | |
download | astro-54a653e2819564bc81d8fe5cf77963a0c0e4c133.tar.gz astro-54a653e2819564bc81d8fe5cf77963a0c0e4c133.tar.zst astro-54a653e2819564bc81d8fe5cf77963a0c0e4c133.zip |
Update renderers.md
-rw-r--r-- | docs/renderers.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/docs/renderers.md b/docs/renderers.md index 0df4acc8e..07035b03b 100644 --- a/docs/renderers.md +++ b/docs/renderers.md @@ -109,7 +109,7 @@ function renderToStaticMarkup(Component, props, childHTML) { } ``` -Note that `childHTML` is an HTML string representing this component's children. If your framework does not support rendering HTML directly, you are welcome to use a wrapper component. By convention Astro uses a custom element, `astro-fragment`, to inject `childHTML` into. +Note that `childHTML` is an HTML string representing this component's children. If your framework does not support rendering HTML directly, you are welcome to use a wrapper component. By convention, Astro uses the `astro-fragment` custom element to inject `childHTML` into. Your renderer should use that, too. ```js import { h, renderToString } from 'xxx'; @@ -124,7 +124,7 @@ function renderToStaticMarkup(Component, props, childHTML) { ## Client entrypoint (`client.js`) -The client entrypoint of a renderer is responsible for rehydrating a 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. > 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. @@ -133,7 +133,7 @@ import { hydrate } from 'xxx'; export default (element) => { return (Component, props, childHTML) => { - hydrate(h(Component, { ...props, innerHTML: childHTML })); + hydrate(h(Component, { ...props, innerHTML: childHTML }), element); }; }; ``` @@ -146,7 +146,7 @@ import SharedWrapper from './SharedWrapper.js'; export default (element) => { return (Component, props, childHTML) => { - hydrate(h(Component, props, h(SharedWrapper, { value: childHTML }))); + hydrate(h(Component, props, h(SharedWrapper, { value: childHTML })), element); }; }; ``` |