diff --git a/.changeset/rich-starfishes-begin.md b/.changeset/rich-starfishes-begin.md new file mode 100644 index 000000000..ad9edb09a --- /dev/null +++ b/.changeset/rich-starfishes-begin.md @@ -0,0 +1,63 @@ +--- +'astro': minor +--- + +**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](https://svelte.dev/docs#1_export_creates_a_component_prop), but it became clear that this was pretty confusing for most users. + + +```diff + --- ++ const { text = 'Hello world!' } = Astro.props; +- export let text = 'Hello world!'; + --- + +
{text}
+``` + +[Read more about the `.astro` syntax](https://github.com/snowpackjs/astro/blob/main/docs/syntax.md#data-and-props) + +--- + +### 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. + +```ts +--- +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`! + +```ts +--- +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. + +```ts +--- +const { text = 'Hello world!' } = Astro.props; + +if (typeof text !== 'string') throw new Error(`Expected "text" to be of type "string" but recieved "${typeof string}"!`); +--- +``` + diff --git a/docs-www/src/components/Note.astro b/docs-www/src/components/Note.astro index 46940ddf8..c57ede3a0 100644 --- a/docs-www/src/components/Note.astro +++ b/docs-www/src/components/Note.astro @@ -1,6 +1,9 @@ --- -export let type = "tip"; -export let title; +export interface Props { + title: string; + type?: 'tip' | 'warning' | 'error' +} +const { type = 'tip', title } = Astro.props; ---