4 files changed, 27 insertions, 14 deletions
diff --git a/examples/blog/src/components/MainHead.astro b/examples/blog/src/components/MainHead.astro
index dfc47fc01..fbdaa2965 100644
--- a/examples/blog/src/components/MainHead.astro
+++ b/examples/blog/src/components/MainHead.astro
@@ -1,12 +1,15 @@
 ---
-// props
-export let title: string;
-export let description: string;
-export let image: string | undefined;
-export let type: string | undefined;
-export let next: string | undefined;
-export let prev: string | undefined;
-export let canonicalURL: string | undefined;
+export interface Props {
+  title: string;
+  description: string;
+  image?: string;
+  type?: string;
+  next?: string;
+  prev?: string;
+  canonicalURL?: string;
+}
+
+const { title, description, image, type, next, prev, canonicalURL } = Astro.props as Props;
 ---
 
 <!-- Common -->
diff --git a/examples/blog/src/components/Nav.astro b/examples/blog/src/components/Nav.astro
index 5c435b737..a7ef0985f 100644
--- a/examples/blog/src/components/Nav.astro
+++ b/examples/blog/src/components/Nav.astro
@@ -1,5 +1,8 @@
 ---
-export let title;
+export interface Props {
+  title: string;
+}
+const { title } = Astro.props;
 ---
 
 <style lang="scss">
@@ -57,4 +60,4 @@ a {
     <li><a href="/author/sancho">Author: Sancho</a></li>
     <li><a href="/about">About</a></li>
   </ul>
-</nav>
-\ No newline at end of file
+</nav>
diff --git a/examples/blog/src/components/Pagination.astro b/examples/blog/src/components/Pagination.astro
index 0294e1707..401931c07 100644
--- a/examples/blog/src/components/Pagination.astro
+++ b/examples/blog/src/components/Pagination.astro
@@ -1,6 +1,10 @@
 ---
-export let prevUrl: string;
-export let nextUrl: string;
+export interface Props {
+  prevUrl: string;
+  nextUrl: string;
+}
+
+const { prevUrl, nextUrl } = Astro.props;
 ---
 
 <style lang="scss">
diff --git a/examples/blog/src/components/PostPreview.astro b/examples/blog/src/components/PostPreview.astro
index d02a23fe6..b126ca2fb 100644
--- a/examples/blog/src/components/PostPreview.astro
+++ b/examples/blog/src/components/PostPreview.astro
@@ -1,6 +1,9 @@
 ---
-export let post;
-export let author;
+export interface Props {
+  post: any;
+  author: string;
+}
+const { post, author } = Astro.props;
 
 function formatDate(date) {
   return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY