summaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
authorGravatar Nate Moore <natemoo-re@users.noreply.github.com> 2021-06-24 17:48:24 -0500
committerGravatar GitHub <noreply@github.com> 2021-06-24 17:48:24 -0500
commita136c85e6b2b0445e48184595b2696994621c8f1 (patch)
tree4d06743cf5b0e3f8f5dabcd1c8ae9e8b9b4557b2 /examples
parentbc9e0f180ccec7d48fde49c857188543e007bf14 (diff)
downloadastro-a136c85e6b2b0445e48184595b2696994621c8f1.tar.gz
astro-a136c85e6b2b0445e48184595b2696994621c8f1.tar.zst
astro-a136c85e6b2b0445e48184595b2696994621c8f1.zip
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
Diffstat (limited to 'examples')
-rw-r--r--examples/astro-markdown/src/layouts/main.astro1
-rw-r--r--examples/blog/src/components/MainHead.astro19
-rw-r--r--examples/blog/src/components/Nav.astro7
-rw-r--r--examples/blog/src/components/Pagination.astro8
-rw-r--r--examples/blog/src/components/PostPreview.astro7
-rw-r--r--examples/blog/src/layouts/post.astro5
-rw-r--r--examples/blog/src/pages/$author.astro3
-rw-r--r--examples/blog/src/pages/$posts.astro2
-rw-r--r--examples/docs/src/components/Note.astro7
-rw-r--r--examples/docs/src/layouts/Main.astro2
-rw-r--r--examples/portfolio/src/components/MainHead.astro2
-rw-r--r--examples/portfolio/src/layouts/project.astro2
-rw-r--r--examples/portfolio/src/pages/$projects.astro2
-rw-r--r--examples/snowpack/src/components/BaseHead.astro9
-rw-r--r--examples/snowpack/src/components/Button.astro2
-rw-r--r--examples/snowpack/src/components/Nav.astro5
-rw-r--r--examples/snowpack/src/components/PokemonLookup.astro5
-rw-r--r--examples/snowpack/src/components/Subnav.astro9
-rw-r--r--examples/snowpack/src/layouts/content-with-cover.astro2
-rw-r--r--examples/snowpack/src/layouts/content.astro2
-rw-r--r--examples/snowpack/src/layouts/post.astro2
21 files changed, 65 insertions, 38 deletions
diff --git a/examples/astro-markdown/src/layouts/main.astro b/examples/astro-markdown/src/layouts/main.astro
index 61326cc5c..26993bcaf 100644
--- a/examples/astro-markdown/src/layouts/main.astro
+++ b/examples/astro-markdown/src/layouts/main.astro
@@ -1,5 +1,4 @@
---
-export let content;
---
<html>
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
diff --git a/examples/blog/src/layouts/post.astro b/examples/blog/src/layouts/post.astro
index 3379bd2dc..c8f394892 100644
--- a/examples/blog/src/layouts/post.astro
+++ b/examples/blog/src/layouts/post.astro
@@ -1,10 +1,9 @@
---
import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav.astro';
-
-export let content;
-
import authorData from '../data/authors.json';
+
+const { content } = Astro.props;
---
<html>
diff --git a/examples/blog/src/pages/$author.astro b/examples/blog/src/pages/$author.astro
index 687cabb42..e06d8bc94 100644
--- a/examples/blog/src/pages/$author.astro
+++ b/examples/blog/src/pages/$author.astro
@@ -12,7 +12,8 @@ const author = authorData[collection.params.author];
// collection
import authorData from '../data/authors.json';
-export let collection: any;
+
+let { collection } = Astro.props;
export async function createCollection() {
/** Load posts */
let allPosts = Astro.fetchContent('./post/*.md');
diff --git a/examples/blog/src/pages/$posts.astro b/examples/blog/src/pages/$posts.astro
index 688ec734d..0975e8007 100644
--- a/examples/blog/src/pages/$posts.astro
+++ b/examples/blog/src/pages/$posts.astro
@@ -11,7 +11,7 @@ let canonicalURL = Astro.request.canonicalURL;
// collection
import authorData from '../data/authors.json';
-export let collection: any;
+let { collection } = Astro.props;
export async function createCollection() {
return {
/** Load posts, sort newest -> oldest */
diff --git a/examples/docs/src/components/Note.astro b/examples/docs/src/components/Note.astro
index 46940ddf8..c57ede3a0 100644
--- a/examples/docs/src/components/Note.astro
+++ b/examples/docs/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/examples/docs/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro
index 77407918a..0f1e6efe4 100644
--- a/examples/docs/src/layouts/Main.astro
+++ b/examples/docs/src/layouts/Main.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;
let editHref = Astro?.request?.url?.pathname?.slice(1) ?? '';
if (editHref === '') editHref = `index`;
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index c400b34e6..181da7d28 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -1,5 +1,5 @@
---
-export let title = 'Jeanine White: Personal Site';
+const { title = 'Jeanine White: Personal Site' } = Astro.props;
---
<meta charset="UTF-8">
diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro
index 7ca9734a4..4ebfed8e1 100644
--- a/examples/portfolio/src/layouts/project.astro
+++ b/examples/portfolio/src/layouts/project.astro
@@ -4,7 +4,7 @@ import Button from '../components/Button/index.jsx';
import Footer from '../components/Footer/index.jsx';
import Nav from '../components/Nav/index.jsx';
-export let content: any;
+const { content } = Astro.props;
---
<html>
<head>
diff --git a/examples/portfolio/src/pages/$projects.astro b/examples/portfolio/src/pages/$projects.astro
index 5fd00d3c2..9a3407b83 100644
--- a/examples/portfolio/src/pages/$projects.astro
+++ b/examples/portfolio/src/pages/$projects.astro
@@ -4,7 +4,7 @@ import Footer from '../components/Footer/index.jsx';
import Nav from '../components/Nav/index.jsx';
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
-export let collection;
+let { collection } = Astro.props;
export async function createCollection() {
return {
async data() {
diff --git a/examples/snowpack/src/components/BaseHead.astro b/examples/snowpack/src/components/BaseHead.astro
index b74c0fa25..f83992662 100644
--- a/examples/snowpack/src/components/BaseHead.astro
+++ b/examples/snowpack/src/components/BaseHead.astro
@@ -2,9 +2,12 @@
import Banner from './Banner.astro';
import Nav from './Nav.astro';
-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 as Props;
---
<meta charset="utf-8" />
diff --git a/examples/snowpack/src/components/Button.astro b/examples/snowpack/src/components/Button.astro
index 00e14f01b..15b722893 100644
--- a/examples/snowpack/src/components/Button.astro
+++ b/examples/snowpack/src/components/Button.astro
@@ -1,5 +1,5 @@
---
-export let style;
+const { style } = Astro.props;
---
<style lang="scss">
diff --git a/examples/snowpack/src/components/Nav.astro b/examples/snowpack/src/components/Nav.astro
index 5305eaa78..243566d31 100644
--- a/examples/snowpack/src/components/Nav.astro
+++ b/examples/snowpack/src/components/Nav.astro
@@ -1,5 +1,8 @@
---
-export let version: string = '3.1.2';
+export interface Props {
+ version: string;
+}
+const { version = '3.1.2' } = Astro.props as Props;
---
<style lang="scss">
diff --git a/examples/snowpack/src/components/PokemonLookup.astro b/examples/snowpack/src/components/PokemonLookup.astro
index b3866791e..deac184dd 100644
--- a/examples/snowpack/src/components/PokemonLookup.astro
+++ b/examples/snowpack/src/components/PokemonLookup.astro
@@ -1,5 +1,8 @@
---
-export let number: number;
+export interface Props {
+ number: number;
+}
+const { number } = Astro.props;
const pokemonDataReq = await fetch(`https://pokeapi.co/api/v2/pokemon/${number}`);
const pokemonData = await pokemonDataReq.json();
diff --git a/examples/snowpack/src/components/Subnav.astro b/examples/snowpack/src/components/Subnav.astro
index 1709235dc..39ccebdef 100644
--- a/examples/snowpack/src/components/Subnav.astro
+++ b/examples/snowpack/src/components/Subnav.astro
@@ -1,7 +1,10 @@
---
-export let title: string;
-export let inputPath: string;
-export let headers: string;
+export interface Props {
+ title: string;
+ inputPath: string;
+ headers: string;
+}
+const { title, inputPath, headers } = Astro.props;
---
<style lang="scss">
diff --git a/examples/snowpack/src/layouts/content-with-cover.astro b/examples/snowpack/src/layouts/content-with-cover.astro
index 91cf9df39..ea2ecaf0e 100644
--- a/examples/snowpack/src/layouts/content-with-cover.astro
+++ b/examples/snowpack/src/layouts/content-with-cover.astro
@@ -4,7 +4,7 @@ import Menu from '../components/Menu.astro';
import BaseHead from '../components/BaseHead.astro';
import BaseLayout from '../components/BaseLayout.astro';
-export let content: any;
+const { content } = Astro.props;
---
<!doctype html>
diff --git a/examples/snowpack/src/layouts/content.astro b/examples/snowpack/src/layouts/content.astro
index 8ab619ba5..6c728db9d 100644
--- a/examples/snowpack/src/layouts/content.astro
+++ b/examples/snowpack/src/layouts/content.astro
@@ -4,7 +4,7 @@ import Menu from '../components/Menu.astro';
import BaseHead from '../components/BaseHead.astro';
import BaseLayout from '../components/BaseLayout.astro';
-export let content: any;
+const { content } = Astro.props;
---
<!doctype html>
diff --git a/examples/snowpack/src/layouts/post.astro b/examples/snowpack/src/layouts/post.astro
index 20dd4a287..7b0b614fe 100644
--- a/examples/snowpack/src/layouts/post.astro
+++ b/examples/snowpack/src/layouts/post.astro
@@ -3,7 +3,7 @@ import BaseHead from '../components/BaseHead.astro';
import BaseLayout from '../components/BaseLayout.astro';
import { format as formatDate, parseISO } from 'date-fns';
-export let content: any;
+const { content } = Astro.props;
---
<!doctype html>
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-11 10:26:26 +0000