New Props API (#515)

* wip: update props api

* feat(#139, #309): enable new props api

* chore: migrate examples to new props API

* docs: update syntax guide for new props API

* chore: update examples to new props API

* chore: update docs to new Props API

* fix: hide __astroInternal from `Astro.props` consumers

* chore: remove scratchpad file

* chore: fix script error

* test: fix failing collection tests

* fix: set __astroInternal to `enumerable: false`

* chore: add changeset

* feat: warn users using old props api

8 files changed, 42 insertions, 18 deletions

diff --git a/www/src/components/Author.astro b/www/src/components/Author.astro
index e11021ea9..56013ceb7 100644
--- a/www/src/components/Author.astro
+++ b/www/src/components/Author.astro
@@ -1,7 +1,11 @@
 ---
 import authorData from '../data/authors.json';
 
-export let authorId: string;
+export interface Props {
+  authorId: string;
+}
+
+const { authorId } = Astro.props;
 const author = authorData[authorId];
 ---
 <style>
diff --git a/www/src/components/BaseHead.astro b/www/src/components/BaseHead.astro
index ee7510bde..4905e1b7a 100644
--- a/www/src/components/BaseHead.astro
+++ b/www/src/components/BaseHead.astro
@@ -1,7 +1,10 @@
 ---
-export let title: string;
-export let description: string;
-export let permalink: string;
+export interface Props {
+  title: string;
+  description: string;
+  permalink: string;
+}
+const { title, description, permalink } = Astro.props;
 ---
 
 <meta charset="utf-8" />
diff --git a/www/src/components/BlockQuote.astro b/www/src/components/BlockQuote.astro
index 00d380ef1..f1f594461 100644
--- a/www/src/components/BlockQuote.astro
+++ b/www/src/components/BlockQuote.astro
@@ -1,7 +1,10 @@
 ---
-export let author: string;
-export let source: string;
-export let sourceHref: string;
+export interface Props {
+  author: string;
+  source: string;
+  sourceHref: string;
+}
+const { author, source, sourceHref } = Astro.props;
 ---
 
 <blockquote>
diff --git a/www/src/components/BlogPost.astro b/www/src/components/BlogPost.astro
index 0884c6575..04d8e4324 100644
--- a/www/src/components/BlogPost.astro
+++ b/www/src/components/BlogPost.astro
@@ -2,10 +2,14 @@
 import Author from './Author.astro';
 import GithubStarButton from './GithubStarButton.astro';
 
-export let title: string;
-export let author: string;
-export let publishDate: string;
-export let heroImage: string;
+export interface Props {
+  title: string;
+  author: string;
+  publishDate: string;
+  heroImage: string;
+}
+
+const { title, author, publishDate, heroImage } = Astro.props;
 ---
 
 <div class="layout">
diff --git a/www/src/components/BlogPostPreview.astro b/www/src/components/BlogPostPreview.astro
index c38a56361..bb44c4abb 100644
--- a/www/src/components/BlogPostPreview.astro
+++ b/www/src/components/BlogPostPreview.astro
@@ -1,9 +1,13 @@
 ---
 import Author from './Author.astro';
 
-export let title: string;
-export let publishDate: string;
-export let href: string;
+export interface Props {
+  title: string;
+  publishDate: string;
+  href: string;
+}
+
+const { title, publishDate, href } = Astro.props;
 ---
 <article class="post-preview">
   <header>
diff --git a/www/src/components/Note.astro b/www/src/components/Note.astro
index 3618e3020..12fc396bc 100644
--- a/www/src/components/Note.astro
+++ b/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;
 ---
 
 <aside class={`note type-${type}`}>
diff --git a/www/src/components/Shell.astro b/www/src/components/Shell.astro
index 77753de4b..d2738329a 100644
--- a/www/src/components/Shell.astro
+++ b/www/src/components/Shell.astro
@@ -1,5 +1,8 @@
 ---
-export let code: string;
+export interface Props {
+  code: string;
+}
+const { code } = Astro.props;
 ---
 
 <pre><code>{code.trim().split('\n').map(ln => <span class="line">
diff --git a/www/src/layouts/Blog.astro b/www/src/layouts/Blog.astro
index 2bca03b7e..d1737bfb7 100644
--- a/www/src/layouts/Blog.astro
+++ b/www/src/layouts/Blog.astro
@@ -4,7 +4,7 @@ import SiteSidebar from '../components/SiteSidebar.astro';
 import ThemeToggle from '../components/ThemeToggle.tsx';
 import DocSidebar from '../components/DocSidebar.tsx';
 
-export let content;
+const { content } = Astro.props;
 const headers = content?.astro?.headers;
 ---