Merge branch 'main' into fix-solid-library

withastro · Oct 12, 2022 · d8994c5 · d8994c5
2 parents 060ea54 + 5cab045
commit d8994c5
Show file tree

Hide file tree

Showing 18 changed files with 678 additions and 493 deletions.
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -0,0 +1,47 @@
+name: Examples astro check
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    paths:
+      - 'examples/**'
+      - '.github/workflows/check.yml'
+      - 'scripts/smoke/check.js'
+      - 'packages/astro/src/@types/astro.ts'
+
+env:
+  ASTRO_TELEMETRY_DISABLED: true
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+  FORCE_COLOR: true
+
+jobs:
+  check:
+    name: astro check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2.2.1
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Status
+        run: git status
+
+      - name: astro check
+        run: pnpm run test:check-examples
diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro
@@ -19,6 +19,11 @@ import { MyCounter } from '../components/my-counter.js';
 		<h1>Test app</h1>
 		<MyCounter client:load />
 		<Lorem />
-		<CalcAdd num={33} />
+
+		{/**
+		 * Our VS Code extension does not currently properly typecheck attributes on Lit components
+		 * As such, the following code will result in a TypeScript error inside the editor, nonetheless, it works in Astro!
+		 * @ts-expect-error */}
+		<CalcAdd num={0} />
 	</body>
 </html>
diff --git a/examples/non-html-pages/src/pages/index.astro b/examples/non-html-pages/src/pages/index.astro
@@ -12,9 +12,11 @@
 			// can fetch them directly in the browser.
 			const response = await fetch(`/about.json`);
 			const data = await response.json();
-			document.getElementById(
-				'result'
-			).innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
+			const resultHeader = document.getElementById('result');
+
+			if (resultHeader) {
+				resultHeader.innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
+			}
 		</script>
 	</body>
 </html>
diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro
@@ -1,4 +1,11 @@
 ---
+import type { MarkdownInstance } from 'astro';
+import type { Project } from '../types';
+
+interface Props {
+	project: MarkdownInstance<Project>;
+}
+
 const { frontmatter, url } = Astro.props.project;
 ---
 

diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro
@@ -2,11 +2,16 @@
 import MainHead from '../components/MainHead.astro';
 import Footer from '../components/Footer.astro';
 import Nav from '../components/Nav.astro';
+import type { Project } from '../types';
+
+interface Props {
+	content: Project;
+}
 
 const { content } = Astro.props;
 ---
 
-<html lang={content.lang || 'en'}>
+<html lang="en">
 	<head>
 		<MainHead title={content.title} description={content.description} />
 		<style>

diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro
@@ -4,10 +4,11 @@ import MainHead from '../components/MainHead.astro';
 import Nav from '../components/Nav.astro';
 import Footer from '../components/Footer.astro';
 import PortfolioPreview from '../components/PortfolioPreview.astro';
+import type { Project } from '../types';
 
 // Data Fetching: List all Markdown posts in the repo.
-const projects = await Astro.glob('./project/**/*.md');
-const featuredProject = projects[0];
+const projects = await Astro.glob<Project>('./project/**/*.md');
+const featuredProject = projects[0]!;
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/

diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro
@@ -3,8 +3,9 @@ import MainHead from '../components/MainHead.astro';
 import Footer from '../components/Footer.astro';
 import Nav from '../components/Nav.astro';
 import PortfolioPreview from '../components/PortfolioPreview.astro';
+import type { Project } from '../types';
 
-const projects = (await Astro.glob('./project/**/*.md'))
+const projects = (await Astro.glob<Project>('./project/**/*.md'))
 	.filter(({ frontmatter }) => !!frontmatter.publishDate)
 	.sort(
 		(a, b) =>

diff --git a/examples/portfolio/src/types.ts b/examples/portfolio/src/types.ts
@@ -0,0 +1,8 @@
+export interface Project {
+	title: string;
+	client: string;
+	description: string;
+	publishDate: string;
+	tags: string[];
+	img: string;
+}
diff --git a/examples/ssr/src/api.ts b/examples/ssr/src/api.ts
@@ -1,4 +1,4 @@
-interface Product {
+export interface Product {
 	id: number;
 	name: string;
 	price: number;

diff --git a/examples/ssr/src/components/ProductListing.astro b/examples/ssr/src/components/ProductListing.astro
@@ -1,4 +1,10 @@
 ---
+import type { Product } from '../api';
+
+interface Props {
+	products: Product[];
+}
+
 const { products } = Astro.props;
 ---
 

diff --git a/examples/ssr/src/components/TextDecorationSkip.astro b/examples/ssr/src/components/TextDecorationSkip.astro
@@ -1,4 +1,8 @@
 ---
+interface Props {
+	text: string;
+}
+
 const { text } = Astro.props;
 const words = text.split(' ');
 const last = words.length - 1;

diff --git a/examples/ssr/src/pages/index.astro b/examples/ssr/src/pages/index.astro
@@ -19,16 +19,13 @@ const products = await getProducts(Astro.request);
 			.product-listing-title {
 				text-align: center;
 			}
-
-			.product-listing {
-			}
 		</style>
 	</head>
 	<body>
 		<Header />
 
 		<Container tag="main">
-			<ProductListing products={products} class="product-listing">
+			<ProductListing products={products}>
 				<h2 class="product-listing-title" slot="title">Product Listing</h2>
 			</ProductListing>
 		</Container>

diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
@@ -11,8 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^1.4.7",
     "@astrojs/tailwind": "^2.0.2",
+    "@types/canvas-confetti": "^1.4.3",
+    "astro": "^1.4.7",
     "autoprefixer": "^10.4.7",
     "canvas-confetti": "^1.5.1",
     "postcss": "^8.4.14",

diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro
@@ -11,5 +11,9 @@
 
 <script>
 	import confetti from 'canvas-confetti';
-	document.body.querySelector('button').addEventListener('click', () => confetti());
+	const button = document.body.querySelector('button');
+
+	if (button) {
+		button.addEventListener('click', () => confetti());
+	}
 </script>
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "test": "turbo run test --output-logs=new-only --concurrency=1 --filter=astro --filter=create-astro --filter=\"@astrojs/*\"",
     "test:match": "cd packages/astro && pnpm run test:match",
     "test:smoke": "turbo run build --filter=\"@example/*\" --filter=\"astro.build\" --filter=\"docs\" --output-logs=new-only --concurrency=1",
+    "test:check-examples": "node ./scripts/smoke/check.js",
     "test:vite-ci": "turbo run test --filter=astro --output-logs=new-only --no-deps --concurrency=1",
     "test:e2e": "cd packages/astro && pnpm playwright install && pnpm run test:e2e",
     "test:e2e:match": "cd packages/astro && pnpm playwright install && pnpm run test:e2e:match",