Run astro check on all examples in CI (withastro#5022)

* Run astro check on all examples in CI * Output stderr * Build Astro before running checks * Making things faster + colors * Fix errors inside examples * Add congrats message * Revert unentional change to tsconfigs * Remove more unneeded changes
atilafassina · Oct 12, 2022 · f604ef6 · f604ef6
1 parent 640ce72
commit f604ef6
Show file tree

Hide file tree

Showing 18 changed files with 200 additions and 19 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/[email protected]
+
+ - 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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/package.json b/scripts/package.json
@@ -16,5 +16,8 @@
  "kleur": "^4.1.4",
  "svelte": "^3.48.0",
  "tar": "^6.1.11"
+ },
+ "devDependencies": {
+ "tsconfig-resolver": "^3.0.1"
  }
 }
diff --git a/scripts/smoke/check.js b/scripts/smoke/check.js
@@ -0,0 +1,84 @@
+// @ts-check
+
+import { spawn } from 'child_process';
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
+import * as path from 'path';
+import { tsconfigResolverSync } from 'tsconfig-resolver';
+
+function checkExamples() {
+ let examples = readdirSync('./examples', { withFileTypes: true });
+ examples = examples.filter((dirent) => dirent.isDirectory());
+
+ console.log(`Running astro check on ${examples.length} examples...`);
+
+ Promise.all(
+ examples.map(
+ (example) =>
+ new Promise((resolve) => {
+ const originalConfig = prepareExample(example.name);
+ let data = '';
+ const child = spawn('node', ['../../packages/astro/astro.js', 'check'], {
+ cwd: path.join('./examples', example.name),
+ env: { ...process.env, FORCE_COLOR: 'true' },
+ });
+
+ child.stdout.on('data', function (buffer) {
+ data += buffer.toString();
+ });
+
+ child.on('exit', (code) => {
+ if (code !== 0) {
+ console.error(data);
+ }
+ if (originalConfig) {
+ resetExample(example.name, originalConfig);
+ }
+ resolve(code);
+ });
+ })
+ )
+ ).then((codes) => {
+ if (codes.some((code) => code !== 0)) {
+ process.exit(1);
+ }
+
+ console.log("No errors found!");
+ });
+}
+
+/**
+ * @param {string} examplePath
+ */
+function prepareExample(examplePath) {
+ const tsconfigPath = path.join('./examples/', examplePath, 'tsconfig.json');
+ const tsconfig = tsconfigResolverSync({ filePath: tsconfigPath, cache: false });
+ let originalConfig = undefined;
+
+ if (tsconfig.exists) {
+ tsconfig.config.extends = 'astro/tsconfigs/strictest';
+ originalConfig = readFileSync(tsconfigPath).toString();
+
+ if (!tsconfig.config.compilerOptions) {
+ tsconfig.config.compilerOptions = {};
+ }
+
+ tsconfig.config.compilerOptions = Object.assign(tsconfig.config.compilerOptions, {
+ types: tsconfig.config.compilerOptions.types ?? [], // Speeds up tests
+ });
+ }
+
+ writeFileSync(tsconfigPath, JSON.stringify(tsconfig.config));
+
+ return originalConfig;
+}
+
+/**
+ * @param {string} examplePath
+ * @param {string} originalConfig
+ */
+function resetExample(examplePath, originalConfig) {
+ const tsconfigPath = path.join('./examples/', examplePath, 'tsconfig.json');
+ writeFileSync(tsconfigPath, originalConfig);
+}
+
+checkExamples();