Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-20 22:12:38 -05:00
Code Issues Activity

[ci] yarn format

Browse source
This commit is contained in:
natemoo-re 2021-06-05 00:42:26 +00:00 • committed by GitHub Actions
parent 316b4a1652
commit 9d35339930
1 changed files with 19 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
docs/renderers.md
View file

@ -29,6 +29,7 @@ To enable a new renderer, add the dependency to your project and update the `ren
## Building a new renderer ## Building a new renderer
A simple renderer only needs a few files. A simple renderer only needs a few files.
``` ```
/renderer-xxx/ /renderer-xxx/
├── package.json ├── package.json
@ -38,6 +39,7 @@ A simple renderer only needs a few files.
``` ```
Two quick notes before we dive into these files individually. Two quick notes before we dive into these files individually.
1. We'd love for you to contribute any renderer you build directly to the Astro repo. This will allow us to publish it under `@astrojs/renderer-xxx`! Feel free to open a pull request. 1. We'd love for you to contribute any renderer you build directly to the Astro repo. This will allow us to publish it under `@astrojs/renderer-xxx`! Feel free to open a pull request.
2. Your renderer doesn't need to be written in ESM, but it's pretty straightforward! Add `"type": "module"` to your `package.json` file and be sure to [define a valid `export` map](https://nodejs.org/api/packages.html#packages_package_entry_points). 2. Your renderer doesn't need to be written in ESM, but it's pretty straightforward! Add `"type": "module"` to your `package.json` file and be sure to [define a valid `export` map](https://nodejs.org/api/packages.html#packages_package_entry_points).
@ -47,15 +49,13 @@ The main entrypoint of a renderer is a simple JS file which exports a manifest f
Additionally, this entrypoint can optionally define a [Snowpack plugin](https://www.snowpack.dev/guides/plugins) that should be used to load non-JavaScript files. Additionally, this entrypoint can optionally define a [Snowpack plugin](https://www.snowpack.dev/guides/plugins) that should be used to load non-JavaScript files.
```js ```js
export default { export default {
name: '@astrojs/renderer-xxx', // the renderer name name: '@astrojs/renderer-xxx', // the renderer name
client: './client.js', // relative path to the client entrypoint client: './client.js', // relative path to the client entrypoint
server: './server.js', // relative path to the server entrypoint server: './server.js', // 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
}; };
``` ```
@ -68,8 +68,8 @@ export default {
// should Component use this renderer? // should Component use this renderer?
check(Component, props, childHTML) {}, check(Component, props, childHTML) {},
// Component => string of static HTML // Component => string of static HTML
renderToStaticMarkup(Component, props, childHTML) {} renderToStaticMarkup(Component, props, childHTML) {},
} };
``` ```
### `check` ### `check`
@ -117,11 +117,7 @@ import { h, renderToString } from 'xxx';
const Wrapper = ({ value }) => h('astro-fragment', { dangerouslySetInnerHTML: { __html: value } }); const Wrapper = ({ value }) => h('astro-fragment', { dangerouslySetInnerHTML: { __html: value } });
function renderToStaticMarkup(Component, props, childHTML) { function renderToStaticMarkup(Component, props, childHTML) {
const html = renderToString( const html = renderToString(h(Component, props, h(Wrapper, { value: childHTML })));
h(Component, props,
h(Wrapper, { value: childHTML })
)
);
return { html }; return { html };
} }
``` ```
@ -138,8 +134,8 @@ import { hydrate } from 'xxx';
export default (element) => { export default (element) => {
return (Component, props, childHTML) => { return (Component, props, childHTML) => {
hydrate(h(Component, { ...props, innerHTML: childHTML })); hydrate(h(Component, { ...props, innerHTML: childHTML }));
} };
} };
``` ```
Note that `childHTML` is an HTML string representing this component's children. If your framework does not support rendering HTML directly, you should use the same wrapper component you used for the server entrypoint. Note that `childHTML` is an HTML string representing this component's children. If your framework does not support rendering HTML directly, you should use the same wrapper component you used for the server entrypoint.
@ -150,14 +146,9 @@ import SharedWrapper from './SharedWrapper.js';
export default (element) => { export default (element) => {
return (Component, props, childHTML) => { return (Component, props, childHTML) => {
hydrate( hydrate(h(Component, props, h(SharedWrapper, { value: childHTML })));
h(Component, props, };
h(SharedWrapper, { value: childHTML }) };
)
);
}
}
``` ```
[astro-config]: ./config.md [astro-config]: ./config.md