Minor Changes
-
239065e: [BREAKING] Replace the Collections API with new file-based routing.
This is a breaking change which impacts collections, pagination, and RSS support.
Runtime warnings have been added to help you migrate old code to the new API.
If you have trouble upgrading, reach out on https://astro.build/chatThis change was made due to confusion around our Collection API, which many users found difficult to use. The new file-based routing approach should feel more familiar to anyone who has used Next.js or SvelteKit.
Documentation added:
-
239065e: Adds support for Astro.resolve
Astro.resolve()
helps with creating URLs relative to the current Astro file, allowing you to reference files within yoursrc/
folder.Astro does not resolve relative links within HTML, such as images:
<img src="../images/penguin.png" />
The above will be sent to the browser as-is and the browser will resolve it relative to the current page. If you want it to be resolved relative to the .astro file you are working in, use
Astro.resolve
:<img src={Astro.resolve('../images/penguin.png')} />
-
239065e: 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.
Patch Changes
- @astrojs/parser@0.18.6