1971ab3c60
* Adding support for client:only hydration * Adding documentation for client:only * Adding changeset * Updating the test to use a browser-only API * Adding a browser-specific import script, this reproduces the issue where client:only imports must be removed * typo fix * removing mispelled test component * WIP: delaying inclusion of component imports until the hydration method is known * WIP: tweaking the test to use window instead of document * When only one renderer is included, use that for client:only hydration * temporary test script snuck into the last commit * WIP: adding check for a client:only renderer hint * refactor: Remove client:only components instead of delaying all component import statements * Updating the changeset and docs for the renderer hint * refactor: pull client:only render matching out to it's own function * Updating renderer hinting to match full name, with shorthand for internal renderers Co-authored-by: Tony Sullivan <tony.f.sullivan@gmail.com>
1.3 KiB
| astro |
|---|
| minor |
Adds support for client:only hydrator
The new client:only hydrator allows you to define a component that should be skipped during the build and only hydrated in the browser.
In most cases it is best to render placeholder content during the build, but that may not always be feasible if an NPM dependency attempts to use browser APIs as soon as is imported.
Note If more than one renderer is included in your Astro config, you need to include a hint to determine which renderer to use. Renderers will be matched to the name provided in your Astro config, similar to <MyComponent client:only="@astrojs/renderer-react" />. Shorthand can be used for @astrojs renderers, i.e. <MyComponent client:only="react" /> will use @astrojs/renderer-react.
An example usage:
---
import BarChart from '../components/BarChart.jsx';
---
<BarChart client:only />
/**
* If multiple renderers are included in the Astro config,
* this will ensure that the component is hydrated with
* the Preact renderer.
*/
<BarChart client:only="preact" />
/**
* If a custom renderer is required, use the same name
* provided in the Astro config.
*/
<BarChart client:only="my-custom-renderer" />
This allows you to import a chart component dependent on d3.js while making sure that the component isn't rendered at all at build time.