Merge branch 'main' into preview-ssr

.changeset/early-pillows-deliver.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/svelte': patch
+---
+
+Allow class to be passed into Svelte islands

.changeset/giant-news-speak.md

@@ -0,0 +1,18 @@
+---
+'astro': minor
+---
+
+Added support for updating TypeScript settings automatically when using `astro add`
+
+The `astro add` command will now automatically update your `tsconfig.json` with the proper TypeScript settings needed for the chosen frameworks. 
+
+For instance, typing `astro add solid` will update your `tsconfig.json` with the following settings, per [Solid's TypeScript guide](https://www.solidjs.com/guides/typescript):
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}
+```

.changeset/new-hotels-unite.md

@@ -0,0 +1,6 @@
+---
+'astro': minor
+---
+
+- Added `isRestart` and `addWatchFile` to integration step `isRestart`.
+- Restart dev server automatically when tsconfig changes.

.changeset/serious-icons-dream.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Skip JSX tagging for export statements with source

.changeset/sixty-ladybugs-return.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Upgrade Astro compiler to 0.27.1

.changeset/ten-candles-relate.md

@@ -0,0 +1,7 @@
+---
+'@astrojs/tailwind': minor
+---
+
+## HMR on config file changes
+
+New in this release is the ability for config changes to automatically reflect via HMR. Now when you edit your `tsconfig.json` or `tailwind.config.js` configs, the changes will reload automatically without the need to restart your dev server.

.changeset/ten-phones-drop.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/solid-js': minor
+---
+
+Auto ssr.noExternal solidjs dependencies

.changeset/thin-parents-breathe.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Support strict dependency install for libraries with JSX

.changeset/witty-sheep-wave.md

@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Update Astro.cookies.set types to allow booleans and numbers
+
+Note that booleans and numbers were already allowed, they just were not allowed by the type definitions.

.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

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>

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>

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;
 ---
 

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>

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/

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) =>

examples/portfolio/src/types.ts

@@ -0,0 +1,8 @@
+export interface Project {
+	title: string;
+	client: string;
+	description: string;
+	publishDate: string;
+	tags: string[];
+	img: string;
+}

examples/ssr/src/api.ts

@@ -1,4 +1,4 @@
-interface Product {
+export interface Product {
 	id: number;
 	name: string;
 	price: number;

examples/ssr/src/components/ProductListing.astro

@@ -1,4 +1,10 @@
 ---
+import type { Product } from '../api';
+
+interface Props {
+	products: Product[];
+}
+
 const { products } = Astro.props;
 ---
 

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;

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>

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",

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>

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",
@@ -52,6 +53,9 @@
         }
       }
     },
+    "overrides": {
+      "tsconfig-resolver>type-fest": "3.0.0"
+    },
     "peerDependencyRules": {
       "ignoreMissing": [
         "rollup",

packages/astro/components/Code.astro

@@ -24,7 +24,7 @@ export interface Props {
 	/**
 	 * Enable word wrapping.
 	 *  - true: enabled.
-	 *  - false: enabled.
+	 *  - false: disabled.
 	 *  - null: All overflow styling removed. Code will overflow the element by default.
 	 *
 	 * @default false

packages/astro/package.json

@@ -95,7 +95,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.26.0",
+    "@astrojs/compiler": "^0.27.1",
     "@astrojs/language-server": "^0.26.2",
     "@astrojs/markdown-remark": "^1.1.3",
     "@astrojs/telemetry": "^1.0.1",
@@ -116,6 +116,7 @@
     "common-ancestor-path": "^1.0.1",
     "cookie": "^0.5.0",
     "debug": "^4.3.4",
+    "deepmerge-ts": "^4.2.2",
     "diff": "^5.1.0",
     "eol": "^0.9.1",
     "es-module-lexer": "^0.10.5",
@@ -126,6 +127,7 @@
     "gray-matter": "^4.0.3",
     "html-entities": "^2.3.3",
     "html-escaper": "^3.0.3",
+    "import-meta-resolve": "^2.1.0",
     "kleur": "^4.1.4",
     "magic-string": "^0.25.9",
     "mime": "^3.0.0",

packages/astro/src/@types/astro.ts

@@ -963,6 +963,7 @@ export interface AstroSettings {
 	}[];
 	tsConfig: TsConfigJson | undefined;
 	tsConfigPath: string | undefined;
+	watchFiles: string[];
 }
 
 export type AsyncRendererComponentFn<U> = (
@@ -1215,8 +1216,10 @@ export interface AstroIntegration {
 		'astro:config:setup'?: (options: {
 			config: AstroConfig;
 			command: 'dev' | 'build' | 'preview';
+			isRestart: boolean;
 			updateConfig: (newConfig: Record<string, any>) => void;
 			addRenderer: (renderer: AstroRenderer) => void;
+			addWatchFile: (path: URL | string) => void;
 			injectScript: (stage: InjectedScriptStage, content: string) => void;
 			injectRoute: (injectRoute: InjectedRoute) => void;
 			// TODO: Add support for `injectElement()` for full HTML element injection, not just scripts.