Merge branch 'main' into test/e2e-hydration

.changeset/dull-monkeys-grab.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix component usage in imported markdown files

examples/blog-multiple-authors/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@astrojs/preact": "^0.1.2",
     "astro": "^1.0.0-beta.31",
-    "sass": "^1.51.0"
+    "sass": "^1.52.0"
   },
   "dependencies": {
     "preact": "^10.7.2"

examples/portfolio/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@astrojs/preact": "^0.1.2",
     "astro": "^1.0.0-beta.31",
-    "sass": "^1.51.0"
+    "sass": "^1.52.0"
   },
   "dependencies": {
     "preact": "^10.7.2"

examples/subpath/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@astrojs/react": "^0.1.2",
     "astro": "^1.0.0-beta.31",
-    "sass": "^1.51.0"
+    "sass": "^1.52.0"
   },
   "dependencies": {
     "react": "^18.1.0",

packages/astro/package.json

@@ -77,16 +77,16 @@
     "test:e2e:match": "playwright test e2e -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.14.2",
+    "@astrojs/compiler": "^0.14.3",
     "@astrojs/language-server": "^0.13.4",
     "@astrojs/markdown-remark": "^0.9.4",
     "@astrojs/prism": "0.4.1",
     "@astrojs/telemetry": "^0.1.2",
     "@astrojs/webapi": "^0.11.1",
-    "@babel/core": "^7.17.12",
-    "@babel/generator": "^7.17.12",
-    "@babel/parser": "^7.17.12",
-    "@babel/traverse": "^7.17.12",
+    "@babel/core": "^7.18.0",
+    "@babel/generator": "^7.18.0",
+    "@babel/parser": "^7.18.0",
+    "@babel/traverse": "^7.18.0",
     "@proload/core": "^0.3.2",
     "@proload/plugin-tsm": "^0.2.1",
     "ast-types": "^0.14.2",
@@ -120,7 +120,7 @@
     "prompts": "^2.4.2",
     "recast": "^0.20.5",
     "resolve": "^1.22.0",
-    "rollup": "^2.74.0",
+    "rollup": "^2.74.1",
     "semver": "^7.3.7",
     "serialize-javascript": "^6.0.0",
     "shiki": "^0.10.1",
@@ -136,7 +136,7 @@
     "zod": "^3.16.0"
   },
   "devDependencies": {
-    "@babel/types": "^7.17.12",
+    "@babel/types": "^7.18.0",
     "@playwright/test": "^1.22.1",
     "@types/babel__core": "^7.1.19",
     "@types/babel__generator": "^7.6.4",
@@ -162,7 +162,7 @@
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.10",
     "mocha": "^9.2.2",
-    "sass": "^1.51.0",
+    "sass": "^1.52.0",
     "srcset-parse": "^1.1.0"
   },
   "engines": {

packages/astro/src/core/render/dev/index.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'url';
-import type * as vite from 'vite';
+import type { HtmlTagDescriptor, ViteDevServer } from 'vite';
 import type {
 	AstroConfig,
 	AstroRenderer,
@@ -15,9 +15,9 @@ import { prependForwardSlash } from '../../../core/path.js';
 import { RouteCache } from '../route-cache.js';
 import { createModuleScriptElementWithSrcSet } from '../ssr-element.js';
 import { getStylesForURL } from './css.js';
-import { getHmrScript } from './hmr.js';
 import { injectTags } from './html.js';
 import { isBuildingToSSR } from '../../util.js';
+import { collectMdMetadata } from '../util.js';
 
 export interface SSROptions {
 	/** an instance of the AstroConfig */
@@ -37,7 +37,7 @@ export interface SSROptions {
 	/** pass in route cache because SSR can’t manage cache-busting */
 	routeCache: RouteCache;
 	/** Vite instance */
-	viteServer: vite.ViteDevServer;
+	viteServer: ViteDevServer;
 	/** Request */
 	request: Request;
 }
@@ -51,7 +51,7 @@ export type RenderResponse =
 const svelteStylesRE = /svelte\?svelte&type=style/;
 
 async function loadRenderer(
-	viteServer: vite.ViteDevServer,
+	viteServer: ViteDevServer,
 	renderer: AstroRenderer
 ): Promise<SSRLoadedRenderer> {
 	// Vite modules can be out-of-date when using an un-resolved url
@@ -65,7 +65,7 @@ async function loadRenderer(
 }
 
 export async function loadRenderers(
-	viteServer: vite.ViteDevServer,
+	viteServer: ViteDevServer,
 	astroConfig: AstroConfig
 ): Promise<SSRLoadedRenderer[]> {
 	return Promise.all(astroConfig._ctx.renderers.map((r) => loadRenderer(viteServer, r)));
@@ -80,6 +80,15 @@ export async function preload({
 	const renderers = await loadRenderers(viteServer, astroConfig);
 	// Load the module from the Vite SSR Runtime.
 	const mod = (await viteServer.ssrLoadModule(fileURLToPath(filePath))) as ComponentInstance;
+	if (viteServer.config.mode === 'development' || !mod?.$$metadata) {
+		return [renderers, mod];
+	}
+
+	// append all nested markdown metadata to mod.$$metadata
+	const modGraph = await viteServer.moduleGraph.getModuleByUrl(fileURLToPath(filePath));
+	if (modGraph) {
+		await collectMdMetadata(mod.$$metadata, modGraph, viteServer);
+	}
 
 	return [renderers, mod];
 }
@@ -179,7 +188,7 @@ export async function render(
 	}
 
 	// inject tags
-	const tags: vite.HtmlTagDescriptor[] = [];
+	const tags: HtmlTagDescriptor[] = [];
 
 	// add injected tags
 	let html = injectTags(content.html, tags);

packages/astro/src/core/render/util.ts

@@ -1,4 +1,6 @@
 import npath from 'path-browserify';
+import type { ModuleNode, ViteDevServer } from 'vite';
+import type { Metadata } from '../../runtime/server/metadata.js';
 
 /** Normalize URL to its canonical form */
 export function createCanonicalURL(url: string, base?: string): URL {
@@ -30,9 +32,59 @@ export const STYLE_EXTENSIONS = new Set([
 	'.less',
 ]);
 
+// duplicate const from vite-plugin-markdown
+// can't import directly due to Deno bundling issue
+// (node fs import failing during prod builds)
+const MARKDOWN_IMPORT_FLAG = '?mdImport';
+
 const cssRe = new RegExp(
 	`\\.(${Array.from(STYLE_EXTENSIONS)
 		.map((s) => s.slice(1))
 		.join('|')})($|\\?)`
 );
 export const isCSSRequest = (request: string): boolean => cssRe.test(request);
+
+// During prod builds, some modules have dependencies we should preload by hand
+// Ex. markdown files imported asynchronously or via Astro.glob(...)
+// This calls each md file's $$loadMetadata to discover those dependencies
+// and writes all results to the input `metadata` object
+const seenMdMetadata = new Set<string>();
+export async function collectMdMetadata(
+	metadata: Metadata,
+	modGraph: ModuleNode,
+	viteServer: ViteDevServer
+) {
+	const importedModules = [...(modGraph?.importedModules ?? [])];
+	await Promise.all(
+		importedModules.map(async (importedModule) => {
+			// recursively check for importedModules
+			if (!importedModule.id || seenMdMetadata.has(importedModule.id)) return;
+
+			seenMdMetadata.add(importedModule.id);
+			await collectMdMetadata(metadata, importedModule, viteServer);
+
+			if (!importedModule?.id?.endsWith(MARKDOWN_IMPORT_FLAG)) return;
+
+			const mdSSRMod = await viteServer.ssrLoadModule(importedModule.id);
+			const mdMetadata = (await mdSSRMod.$$loadMetadata?.()) as Metadata;
+			if (!mdMetadata) return;
+
+			for (let mdMod of mdMetadata.modules) {
+				mdMod.specifier = mdMetadata.resolvePath(mdMod.specifier);
+				metadata.modules.push(mdMod);
+			}
+			for (let mdHoisted of mdMetadata.hoisted) {
+				metadata.hoisted.push(mdHoisted);
+			}
+			for (let mdHydrated of mdMetadata.hydratedComponents) {
+				metadata.hydratedComponents.push(mdHydrated);
+			}
+			for (let mdClientOnly of mdMetadata.clientOnlyComponents) {
+				metadata.clientOnlyComponents.push(mdClientOnly);
+			}
+			for (let mdHydrationDirective of mdMetadata.hydrationDirectives) {
+				metadata.hydrationDirectives.add(mdHydrationDirective);
+			}
+		})
+	);
+}

packages/astro/src/vite-plugin-markdown/index.ts

@@ -89,6 +89,10 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 						export const frontmatter = ${JSON.stringify(frontmatter)};
 						export const file = ${JSON.stringify(fileId)};
 						export const url = ${JSON.stringify(fileUrl)};
+
+						export function $$loadMetadata() {
+							return load().then((m) => m.$$metadata)
+						}
 						
 						// Deferred
 						export default async function load() {
@@ -109,10 +113,10 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
 			// directly as a page in Vite, or it was a deferred render from a JS module.
 			// This returns the compiled markdown -> astro component that renders to HTML.
 			if (id.endsWith('.md')) {
-				const source = await fs.promises.readFile(id, 'utf8');
+				const filename = normalizeFilename(id);
+				const source = await fs.promises.readFile(filename, 'utf8');
 				const renderOpts = config.markdown;
 
-				const filename = normalizeFilename(id);
 				const fileUrl = new URL(`file://${filename}`);
 				const isPage = fileUrl.pathname.startsWith(resolvePages(config).pathname);
 				const hasInjectedScript = isPage && config._ctx.scripts.some((s) => s.stage === 'page-ssr');
@@ -142,7 +146,7 @@ ${setup}`.trim();
 
 				// Transform from `.astro` to valid `.ts`
 				let { code: tsResult } = await transform(astroResult, {
-					pathname: fileUrl.pathname.slice(config.root.pathname.length - 1),
+					pathname: '/@fs' + prependForwardSlash(fileUrl.pathname),
 					projectRoot: config.root.toString(),
 					site: config.site ? new URL(config.base, config.site).toString() : undefined,
 					sourcefile: id,

packages/astro/test/fixtures/astro-markdown/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
+import svelte from "@astrojs/svelte";
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [preact()],
+  integrations: [preact(), svelte()]
 });

packages/astro/test/fixtures/astro-markdown/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@astrojs/preact": "workspace:*",
+    "@astrojs/svelte": "workspace:*",
     "astro": "workspace:*"
   }
 }

packages/astro/test/fixtures/astro-markdown/src/components/SvelteButton.svelte

@@ -0,0 +1,11 @@
+<script>
+	let cool = false
+</script>
+
+<button on:click={() => cool = true}>This is cool right? {cool}</button>
+
+<style>
+	button {
+		background: green;
+	}
+</style>

packages/astro/test/fixtures/astro-markdown/src/imported-md/plain.md

@@ -0,0 +1,6 @@
+---
+---
+
+## Plain jane
+
+I am plain markdown!

packages/astro/test/fixtures/astro-markdown/src/imported-md/with-components.md

@@ -0,0 +1,17 @@
+---
+setup: |
+  import Counter from '../components/Counter.jsx'
+  import Hello from '../components/Hello.jsx'
+  import SvelteButton from '../components/SvelteButton.svelte'
+---
+
+## With components
+
+### Non-hydrated
+
+<Hello name="Astro Naut" />
+
+### Hydrated
+
+<Counter client:load />
+<SvelteButton client:load />

packages/astro/test/fixtures/astro-markdown/src/pages/imported-md/with-components.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../../layouts/content.astro'
+
+const posts = await Astro.glob('../../imported-md/*.md')
+---
+
+<Layout>
+	{posts.map(({ Content }) => <Content />)}
+</Layout>

packages/astro/test/fixtures/error-react-spectrum/package.json

@@ -3,13 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "astro": "workspace:*",
-    "@astrojs/react": "workspace:*",
     "@adobe/react-spectrum": "^3.17.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "@astrojs/react": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   }
 }
-
-
-

packages/astro/test/fixtures/sass/package.json

@@ -4,6 +4,6 @@
   "private": true,
   "dependencies": {
     "astro": "workspace:*",
-    "sass": "^1.51.0"
+    "sass": "^1.52.0"
   }
 }

packages/astro/test/test-utils.js

@@ -119,7 +119,7 @@ export async function loadFixture(inlineConfig) {
 	let devServer;
 
 	return {
-		build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
+		build: (opts = {}) => build(config, { logging, telemetry, ...opts }),
 		startDevServer: async (opts = {}) => {
 			devServer = await dev(config, { logging, telemetry, ...opts });
 			config.server.port = devServer.address.port; // update port

packages/webapi/package.json

@@ -66,7 +66,7 @@
     "magic-string": "^0.25.9",
     "mocha": "^9.2.2",
     "node-fetch": "^3.2.4",
-    "rollup": "^2.74.0",
+    "rollup": "^2.74.1",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",