32 KiB
astro
0.19.0
Minor Changes
-
239065e2
: [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/chat
This 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:
-
239065e2
: Adds support for Astro.resolveAstro.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')} />
-
239065e2
: Adds support for client:only hydratorThe 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
0.19.0-next.3
Minor Changes
-
1971ab3c
: Adds support for client:only hydratorThe 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
-
1f13e403
: Fix CSS scoping issue -
78b5bde1
: Adds support for Astro.resolveAstro.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')} />
0.19.0-next.2
Patch Changes
089d1e7a
: update dependencies, and fix a bad .flat() call
0.19.0-next.1
Patch Changes
0.19.0-next.0
Minor Changes
-
0f0cc2b9
: [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/chat
This 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:
0.18.10
Patch Changes
2321b577
: - Allow Markdown with scoped styles to coexist happily with code syntax highlighting via Prism618ea3a8
: Properly escapes script tags with nested client:load directives when passing Astro components into framework components via props. Browsers interpret script end tags in strings as script end tags, resulting in syntax errors.939b9d01
: Allow dev server port to be set byPORT
environment variable- Updated dependencies [
1339d5e3
]- @astrojs/renderer-vue@0.1.7
0.18.9
Patch Changes
8cf0e65a
: Fixes a previous revert, makes sure head content is injected into the right place8cf0e65a
: Refactor the CLI entrypoint to support stackblitz and improve the runtime check
0.18.8
Patch Changes
b1959f0f
: Reverts a change to head content that was breaking docs site
0.18.7
Patch Changes
268a36f3
: Fixes issue with head content being rendered in the wrong place39df7952
: Makesfetch
available in all framework components- Updated dependencies [
f7e86150
]- @astrojs/renderer-preact@0.2.1
0.18.6
Patch Changes
0.18.5
Patch Changes
a1491cc6
: Fix Vue components nesting- Updated dependencies [
cd2b5df4
] - Updated dependencies [
a1491cc6
]- @astrojs/parser@0.18.5
- @astrojs/renderer-vue@0.1.6
0.18.4
Patch Changes
- Updated dependencies [
460e625
]- @astrojs/markdown-support@0.2.3
0.18.3
Patch Changes
- Updated dependencies [
7015356
]- @astrojs/markdown-support@0.2.2
0.18.2
Patch Changes
829d5ba
: Fix TSX issue with JSX multi-rendering23b0d2d
: Adds support for image srcset to the build- Updated dependencies [
70f0a09
] - Updated dependencies [
fdb1c15
]- @astrojs/markdown-support@0.2.1
- @astrojs/renderer-vue@0.1.5
0.18.1
Patch Changes
d8cebb0
: Removes a warning in Svelte hydrated componentse90615f
: Fixes warnings for Astro internals for fetch-content and slots
0.18.0
Minor Changes
-
f67e8f5
: New Collections API (createCollection)BREAKING CHANGE: The expected return format from createCollection() has been changed. Visit https://docs.astro.build/core-concepts/collections to learn the new API.
This feature was implemented with backwards-compatible deprecation warnings, to help you find and update pages that are using the legacy API.
-
40c882a
: Fix url to find page with "index" at the end file name -
0340b0f
: Adds support for the client:media hydratorThe new
client:media
hydrator allows you to define a component that should only be loaded when a media query matches. An example usage:--- import Sidebar from '../components/Sidebar.jsx'; --- <Sidebar client:media="(max-width: 700px)" />
This allows you to define components which, for example, only run on mobile devices. A common example is a slide-in sidebar that is needed to add navigation to a mobile app, but is never displayed in desktop view.
Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining:
media.js
export const MOBILE = '(max-width: 700px)';
And then you can reference this in your page:
index.astro
import Sidebar from '../components/Sidebar.jsx'; import { MOBILE } from '../media.js'; ---(<Sidebar client:media={MOBILE} />);
Patch Changes
-
e89a99f
: This includes the props passed to a hydration component when generating the hash/id. This prevents multiple instances of the same component with differing props to be treated as the same component when hydrated by Astro. -
b8af49f
: Added sass support -
a7e6666
: compile javascript to target Node v12.x -
fb8bf7e
: Allow multiple Astro servers to be running simultaneously by choosing random ports if the defaults are taken. -
294a656
: Adds support for global style blocks via<style global>
Be careful with this escape hatch! This is best reserved for uses like importing styling libraries like Tailwind, or changing global CSS variables.
-
8f4562a
: Improve slot support, adding support for named slots and fallback content withinslot
elements.See the new Slots documentation for more information.
-
4a601ad
: Restores the ability to use Fragment in astro components -
0e761b9
: Add ability to specify hostname in devOptions -
164489f
: Fix forfalse
being rendered in conditionals -
e3182c7
: Adds a missing dependency -
af935c1
: Fix error when no renderers are passed -
4726e34
: Fixes cases where buildOptions.site is not respected -
c82e6be
: Fix unfound ./snowpack-plugin-jsx.cjs error -
007c220
: Remove custom Astro.fetchContent() glob implementation, useimport.meta.globEager
internally instead. -
9859f53
: Correcting typo in ReadMe -
b85e68a
: Fixes case where custom elements are not handled within JSX expressions -
Updated dependencies [
a7e6666
] -
Updated dependencies [
294a656
] -
Updated dependencies [
bd18e14
] -
Updated dependencies [
bd18e14
] -
Updated dependencies [
1f79144
] -
Updated dependencies [
b85e68a
]- @astrojs/parser@0.18.0
- @astrojs/renderer-preact@0.2.0
- @astrojs/renderer-react@0.2.0
- @astrojs/renderer-vue@0.1.4
0.18.0-next.7
Patch Changes
e89a99f
: This includes the props passed to a hydration component when generating the hash/id. This prevents multiple instances of the same component with differing props to be treated as the same component when hydrated by Astro.b8af49f
: Added sass support4726e34
: Fixes cases where buildOptions.site is not respected
0.18.0-next.6
Patch Changes
- Updated dependencies [
1f79144
]- @astrojs/renderer-vue@0.1.4-next.0
0.18.0-next.5
Patch Changes
-
294a656
: Adds support for global style blocks via<style global>
Be careful with this escape hatch! This is best reserved for uses like importing styling libraries like Tailwind, or changing global CSS variables.
-
164489f
: Fix forfalse
being rendered in conditionals -
af935c1
: Fix error when no renderers are passed -
Updated dependencies [
294a656
]- @astrojs/parser@0.18.0-next.5
0.18.0-next.4
Patch Changes
c82e6be
: Fix unfound ./snowpack-plugin-jsx.cjs error
0.18.0-next.3
Minor Changes
- Add support for the new JSX transform for React 17 and Preact.
- Add support for Solid when using the new
@astrojs/renderer-solid
package.
Patch Changes
4a601ad
: Restores the ability to use Fragment in astro components- Updated dependencies [
bd18e14
] - Updated dependencies [
bd18e14
]- @astrojs/renderer-preact@0.2.0-next.0
- @astrojs/renderer-react@0.2.0-next.0
0.18.0-next.2
Minor Changes
-
f67e8f5
: New Collections API (createCollection)BREAKING CHANGE: The expected return format from createCollection() has been changed. Visit https://docs.astro.build/core-concepts/collections to learn the new API.
This feature was implemented with backwards-compatible deprecation warnings, to help you find and update pages that are using the legacy API.
-
40c882a
: Fix url to find page with "index" at the end file name
Patch Changes
a7e6666
: compile javascript to target Node v12.xfb8bf7e
: Allow multiple Astro servers to be running simultaneously by choosing random ports if the defaults are taken.0e761b9
: Add ability to specify hostname in devOptions007c220
: Remove custom Astro.fetchContent() glob implementation, useimport.meta.globEager
internally instead.b85e68a
: Fixes case where custom elements are not handled within JSX expressions- Updated dependencies [
a7e6666
] - Updated dependencies [
b85e68a
]- @astrojs/parser@0.18.0-next.2
0.18.0-next.1
Patch Changes
e3182c7
: Adds a missing dependency
0.18.0-next.0
Minor Changes
-
0340b0f
: Adds support for the client:media hydratorThe new
client:media
hydrator allows you to define a component that should only be loaded when a media query matches. An example usage:--- import Sidebar from '../components/Sidebar.jsx'; --- <Sidebar client:media="(max-width: 700px)" />
This allows you to define components which, for example, only run on mobile devices. A common example is a slide-in sidebar that is needed to add navigation to a mobile app, but is never displayed in desktop view.
Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining:
media.js
export const MOBILE = '(max-width: 700px)';
And then you can reference this in your page:
index.astro
import Sidebar from '../components/Sidebar.jsx'; import { MOBILE } from '../media.js'; ---(<Sidebar client:media={MOBILE} />);
Patch Changes
-
8f4562a
: Improve slot support, adding support for named slots and fallback content withinslot
elements.See the new Slots documentation for more information.
-
9859f53
: Correcting typo in ReadMe
0.17.3
Patch Changes
- [release/0.17] Update compile target to better support Node v12.
0.17.2
Patch Changes
-
1b73f95
: Only show the buildOptions.site notice if not already set -
fb78b76
: Improve error handling for unsupported Node versions -
d93f768
: Add support for components defined in Frontmatter. Previously, the following code would throw an error. Now it is officially supported!--- const { level = 1 } = Astro.props; const Element = `h${level}`; --- <Element>Hello world!</Element>
0.17.1
Patch Changes
-
1e01251
: Fixes bug with React renderer that would not hydrate correctly -
42a6ace
: Add support for components defined in Frontmatter. Previously, the following code would throw an error. Now it is officially supported!--- const { level = 1 } = Astro.props; const Element = `h${level}`; --- <Element>Hello world!</Element>
-
Updated dependencies [
1e01251
]- @astrojs/renderer-react@0.1.5
0.17.0
Minor Changes
-
0a7b6de
: ## Adds directive syntax for component hydrationThis change updates the syntax for partial hydration from
<Button:load />
to<Button client:load />
.Why?
Partial hydration is about to get super powers! This clears the way for more dynamic partial hydration, i.e.
<MobileMenu client:media="(max-width: 40em)" />
.How to upgrade
Just update
:load
,:idle
, and:visible
to match theclient:load
format, thats it! Don't worry, the original syntax is still supported but it's recommended to future-proof your project by updating to the newer syntax.
0.16.3
Patch Changes
5d1ff62
: Hotfix for snowpack regression
0.16.2
Patch Changes
20b4a60
: Bugfix: do not override useralias
passed into snowpack config42a1fd7
: Add command line flag--silent
to astro to set no output.
0.16.1
Patch Changes
2d3e369
: Fix for using the snowpack polyfillNode option
0.16.0
Minor Changes
-
d396943
: Add support forremark
andrehype
plugins for both.md
pages and.astro
pages using the<Markdown>
component.For example, the
astro.config.mjs
could be updated to include the following. Read the Markdown documentation for more information.Note
Enabling custom
remarkPlugins
orrehypePlugins
removes Astro's built-in support for GitHub-flavored Markdown support, Footnotes syntax, Smartypants. You must explicitly add these plugins to yourastro.config.mjs
file, if desired.export default { markdownOptions: { remarkPlugins: ['remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]], rehypePlugins: ['rehype-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]], }, };
Patch Changes
0.15.5
Patch Changes
-
7b4c97c
: Adds support forhydrationPolyfills
in renderersRenderers can not specify polyfills that must run before the component code runs for hydration:
export default { name: '@matthewp/my-renderer', server: './server.js', client: './client.js', hydrationPolyfills: ['./my-polyfill.js'], };
These will still wait for hydration to occur, but will run before the component script does.
0.15.4
Patch Changes
6a660f1
: Adds low-level custom element support that renderers can use to enable server side rendering. This will be used in renderers such as a Lit renderer.- Updated dependencies [
6a660f1
]- @astrojs/parser@0.15.4
0.15.3
Patch Changes
17579c2
: Improves the error message when attempting to usewindow
in a component.
0.15.2
Patch Changes
1e735bb
: Allows passing in a class to a child component which will be scopede28d5cb
: Improve error handling within.astro
files (#526)aa86057
: Updates collections to match URLs by exact template filenamef721275
: Fix issue where Markdown could close it's parent element early (#494)
0.15.1
Patch Changes
8865158
: Fixes postcss bug with the 'from' property
0.15.0
Minor Changes
-
a136c85
: This is a breaking change!Astro props are now accessed from the
Astro.props
global. This change is meant to make prop definitions more ergonomic, leaning into JavaScript patterns you already know (destructuring and defaults). Astro components previously used a prop syntax borrowed from Svelte, but it became clear that this was pretty confusing for most users.--- + const { text = 'Hello world!' } = Astro.props; - export let text = 'Hello world!'; --- <div>{text}</div>
Read more about the
.astro
syntax
How do I define what props my component accepts?
Astro frontmatter scripts are TypeScript! Because of this, we can leverage TypeScript types to define the shape of your props.
--- export interface Props { text?: string; } const { text = 'Hello world!' } = Astro.props as Props; ---
Note
Casting
Astro.props as Props
is a temporary workaround. We expect our Language Server to handle this automatically soon!How do I access props I haven't explicitly defined?
One of the great things about this change is that it's straight-forward to access any props. Just use
...props
!--- export interface Props { text?: string; [attr: string]: unknown; } const { text = 'Hello world!', ...props } = Astro.props as Props; ---
What about prop validation?
We considered building prop validation into Astro, but decided to leave that implementation up to you! This way, you can use any set of tools you like.
--- const { text = 'Hello world!' } = Astro.props; if (typeof text !== 'string') throw new Error(`Expected "text" to be of type "string" but recieved "${typeof string}"!`); ---
Patch Changes
4cd84c6
: #528 Removes unused trapWarn functionfeb9a31
: Fixes livereload on static pages47ac2cc
: Fix #521, allowing{...spread}
props to work again5629349
: Bugfix: PostCSS errors in internal Snowpack PostCSS plugin- Updated dependencies [
21dc28c
] - Updated dependencies [
47ac2cc
]- @astrojs/renderer-react@0.1.4
- @astrojs/parser@0.15.0
0.14.1
Patch Changes
3f3e4f1
: AllowpageSize: Infinity
when creating a collection44f429a
: Allow node: prefix to load builtins
0.14.0
Minor Changes
09b5779
: Removes mounting the project folder and adds asrc
root option
0.13.12
Rolling back to 0.13.10 to prevent a regression in the dev server output.
0.13.11
Patch Changes
6573bea
: Fixed README header aspect ratio2671b6f
: Fix 472 by not injectingastro-*
scoped class unless it is actually usedb547892
: Makes providing a head element on pages optionalb547892
: Allows astro documents to omit the head element0abd251
: Allows renderers to provide knownEntrypoint config values- Updated dependencies [
0abd251
]- @astrojs/renderer-preact@0.1.3
- @astrojs/renderer-react@0.1.3
- @astrojs/renderer-vue@0.1.3
0.13.10
Patch Changes
233fbcd
: Fix race condition caused by parallel build- Updated dependencies [
7f8d586
]- @astrojs/parser@0.13.10
0.13.9
Patch Changes
3ada25d
: Pass configured Tailwind config file to the tailwindcss pluginf9f2da4
: Add repository key to all package.json- Updated dependencies [
f9f2da4
]- @astrojs/parser@0.13.9
- @astrojs/prism@0.2.2
- @astrojs/markdown-support@0.1.2