Refactor content collection transforms (#6817)

* feat: json collection POC * wip: add test json file * refactor: rework content flag transforms * refactor: simplify propagatedAsset check * chore: remove JSON playground code * chore: respect build sourcemap option * deps: magic-string, source-map * chore: formatting * fix: add sourcemaps to MDX plugin * chore: changeset * deps: remove magic-string from mdx * chore: remove unecessary MagicString
withastro · Apr 11, 2023 · f882bc1 · f882bc1
1 parent b1d07bc
commit f882bc1
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 67 deletions.
diff --git a/.changeset/dirty-panthers-approve.md b/.changeset/dirty-panthers-approve.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/mdx': patch
+---
+
+Fix sourcemap warnings when using Content Collections and MDX with the `vite.build.sourcemap` option
diff --git a/packages/astro/src/content/index.ts b/packages/astro/src/content/index.ts
@@ -5,3 +5,4 @@ export { contentObservable, getContentPaths, getDotAstroTypeReference } from './
 export { astroContentAssetPropagationPlugin } from './vite-plugin-content-assets.js';
 export { astroContentImportPlugin } from './vite-plugin-content-imports.js';
 export { astroContentVirtualModPlugin } from './vite-plugin-content-virtual-mod.js';
+export { CONTENT_FLAG, PROPAGATED_ASSET_FLAG } from './consts.js';
diff --git a/packages/astro/src/content/vite-plugin-content-assets.ts b/packages/astro/src/content/vite-plugin-content-assets.ts
@@ -18,12 +18,9 @@ import {
 } from './consts.js';
 import { getContentEntryExts } from './utils.js';
 
-function isPropagatedAsset(viteId: string, contentEntryExts: string[]): boolean {
-	const url = new URL(viteId, 'file://');
-	return (
-		url.searchParams.has(PROPAGATED_ASSET_FLAG) &&
-		contentEntryExts.some((ext) => url.pathname.endsWith(ext))
-	);
+function isPropagatedAsset(viteId: string) {
+	const flags = new URLSearchParams(viteId.split('?')[1]);
+	return flags.has(PROPAGATED_ASSET_FLAG);
 }
 
 export function astroContentAssetPropagationPlugin({
@@ -37,51 +34,56 @@ export function astroContentAssetPropagationPlugin({
 	const contentEntryExts = getContentEntryExts(settings);
 	return {
 		name: 'astro:content-asset-propagation',
-		enforce: 'pre',
 		configureServer(server) {
 			if (mode === 'dev') {
 				devModuleLoader = createViteLoader(server);
 			}
 		},
-		load(id) {
-			if (isPropagatedAsset(id, contentEntryExts)) {
+		async transform(_, id, options) {
+			if (isPropagatedAsset(id)) {
 				const basePath = id.split('?')[0];
+				let stringifiedLinks: string, stringifiedStyles: string, stringifiedScripts: string;
+
+				// We can access the server in dev,
+				// so resolve collected styles and scripts here.
+				if (options?.ssr && devModuleLoader) {
+					if (!devModuleLoader.getModuleById(basePath)?.ssrModule) {
+						await devModuleLoader.import(basePath);
+					}
+					const { stylesMap, urls } = await getStylesForURL(
+						pathToFileURL(basePath),
+						devModuleLoader,
+						'development'
+					);
+
+					const hoistedScripts = await getScriptsForURL(
+						pathToFileURL(basePath),
+						settings.config.root,
+						devModuleLoader
+					);
+
+					stringifiedLinks = JSON.stringify([...urls]);
+					stringifiedStyles = JSON.stringify([...stylesMap.values()]);
+					stringifiedScripts = JSON.stringify([...hoistedScripts]);
+				} else {
+					// Otherwise, use placeholders to inject styles and scripts
+					// during the production bundle step.
+					// @see the `astro:content-build-plugin` below.
+					stringifiedLinks = JSON.stringify(LINKS_PLACEHOLDER);
+					stringifiedStyles = JSON.stringify(STYLES_PLACEHOLDER);
+					stringifiedScripts = JSON.stringify(SCRIPTS_PLACEHOLDER);
+				}
+
 				const code = `
 					export async function getMod() {
 						return import(${JSON.stringify(basePath)});
 					}
-					export const collectedLinks = ${JSON.stringify(LINKS_PLACEHOLDER)};
-					export const collectedStyles = ${JSON.stringify(STYLES_PLACEHOLDER)};
-					export const collectedScripts = ${JSON.stringify(SCRIPTS_PLACEHOLDER)};
+					export const collectedLinks = ${stringifiedLinks};
+					export const collectedStyles = ${stringifiedStyles};
+					export const collectedScripts = ${stringifiedScripts};
 				`;
-				return { code };
-			}
-		},
-		async transform(code, id, options) {
-			if (!options?.ssr) return;
-			if (devModuleLoader && isPropagatedAsset(id, contentEntryExts)) {
-				const basePath = id.split('?')[0];
-				if (!devModuleLoader.getModuleById(basePath)?.ssrModule) {
-					await devModuleLoader.import(basePath);
-				}
-				const { stylesMap, urls } = await getStylesForURL(
-					pathToFileURL(basePath),
-					devModuleLoader,
-					'development'
-				);
 
-				const hoistedScripts = await getScriptsForURL(
-					pathToFileURL(basePath),
-					settings.config.root,
-					devModuleLoader
-				);
-
-				return {
-					code: code
-						.replace(JSON.stringify(LINKS_PLACEHOLDER), JSON.stringify([...urls]))
-						.replace(JSON.stringify(STYLES_PLACEHOLDER), JSON.stringify([...stylesMap.values()]))
-						.replace(JSON.stringify(SCRIPTS_PLACEHOLDER), JSON.stringify([...hoistedScripts])),
-				};
+				return { code, map: { mappings: '' } };
 			}
 		},
 	};

diff --git a/packages/astro/src/content/vite-plugin-content-imports.ts b/packages/astro/src/content/vite-plugin-content-imports.ts
@@ -21,9 +21,9 @@ import {
 	type ContentConfig,
 } from './utils.js';
 
-function isContentFlagImport(viteId: string, contentEntryExts: string[]) {
-	const { searchParams, pathname } = new URL(viteId, 'file://');
-	return searchParams.has(CONTENT_FLAG) && contentEntryExts.some((ext) => pathname.endsWith(ext));
+function isContentFlagImport(viteId: string) {
+	const flags = new URLSearchParams(viteId.split('?')[1]);
+	return flags.has(CONTENT_FLAG);
 }
 
 function getContentRendererByViteId(
@@ -65,26 +65,26 @@ export function astroContentImportPlugin({
 	const plugins: Plugin[] = [
 		{
 			name: 'astro:content-imports',
-			async load(viteId) {
-				if (isContentFlagImport(viteId, contentEntryExts)) {
-					const { fileId } = getFileInfo(viteId, settings.config);
+			async transform(_, viteId) {
+				if (isContentFlagImport(viteId)) {
+					const fileId = viteId.split('?')[0];
 					const { id, slug, collection, body, data, _internal } = await setContentEntryModuleCache({
 						fileId,
 						pluginContext: this,
 					});
 
 					const code = escapeViteEnvReferences(`
-export const id = ${JSON.stringify(id)};
-export const collection = ${JSON.stringify(collection)};
-export const slug = ${JSON.stringify(slug)};
-export const body = ${JSON.stringify(body)};
-export const data = ${devalue.uneval(data) /* TODO: reuse astro props serializer */};
-export const _internal = {
-	filePath: ${JSON.stringify(_internal.filePath)},
-	rawData: ${JSON.stringify(_internal.rawData)},
-};
-`);
-					return { code };
+						export const id = ${JSON.stringify(id)};
+						export const collection = ${JSON.stringify(collection)};
+						export const slug = ${JSON.stringify(slug)};
+						export const body = ${JSON.stringify(body)};
+						export const data = ${devalue.uneval(data) /* TODO: reuse astro props serializer */};
+						export const _internal = {
+							filePath: ${JSON.stringify(_internal.filePath)},
+							rawData: ${JSON.stringify(_internal.rawData)},
+						};`);
+
+					return { code, map: { mappings: '' } };
 				}
 			},
 			configureServer(viteServer) {
@@ -96,7 +96,7 @@ export const _internal = {
 						// Content modules depend on config, so we need to invalidate them.
 						for (const modUrl of viteServer.moduleGraph.urlToModuleMap.keys()) {
 							if (
-								isContentFlagImport(modUrl, contentEntryExts) ||
+								isContentFlagImport(modUrl) ||
 								Boolean(getContentRendererByViteId(modUrl, settings))
 							) {
 								const mod = await viteServer.moduleGraph.getModuleByUrl(modUrl);
@@ -108,13 +108,6 @@ export const _internal = {
 					}
 				});
 			},
-			async transform(code, id) {
-				if (isContentFlagImport(id, contentEntryExts)) {
-					// Escape before Rollup internal transform.
-					// Base on MUCH trial-and-error, inspired by MDX integration 2-step transform.
-					return { code: escapeViteEnvReferences(code) };
-				}
-			},
 		},
 	];
 

diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts
@@ -16,6 +16,7 @@ import { error } from '../core/logger/core.js';
 import { removeQueryString } from '../core/path.js';
 import { detectImportSource } from './import-source.js';
 import tagExportsPlugin from './tag.js';
+import { CONTENT_FLAG, PROPAGATED_ASSET_FLAG } from '../content/index.js';
 
 const JSX_EXTENSIONS = new Set(['.jsx', '.tsx', '.mdx']);
 const IMPORT_STATEMENTS: Record<string, string> = {
@@ -104,6 +105,11 @@ interface AstroPluginJSXOptions {
 	logging: LogOptions;
 }
 
+// Format inspired by https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L54
+const SPECIAL_QUERY_REGEX = new RegExp(
+	`[?&](?:worker|sharedworker|raw|url|${CONTENT_FLAG}|${PROPAGATED_ASSET_FLAG})\\b`
+);
+
 /** Use Astro config to allow for alternate or multiple JSX renderers (by default Vite will assume React) */
 export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugin {
 	let viteConfig: ResolvedConfig;
@@ -133,6 +139,9 @@ export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugi
 		},
 		async transform(code, id, opts) {
 			const ssr = Boolean(opts?.ssr);
+			if (SPECIAL_QUERY_REGEX.test(id)) {
+				return null;
+			}
 			id = removeQueryString(id);
 			if (!JSX_EXTENSIONS.has(path.extname(id))) {
 				return null;

diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json
@@ -45,6 +45,7 @@
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.11.1",
+    "source-map": "^0.7.4",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2"
   },

diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts
@@ -12,6 +12,7 @@ import { VFile } from 'vfile';
 import type { Plugin as VitePlugin } from 'vite';
 import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js';
 import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from './utils.js';
+import { SourceMapGenerator } from 'source-map';
 
 export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
 	extendMarkdownConfig: boolean;
@@ -113,6 +114,9 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 											...(mdxPluginOpts.recmaPlugins ?? []),
 											() => recmaInjectImportMetaEnvPlugin({ importMetaEnv }),
 										],
+										SourceMapGenerator: config.vite.build?.sourcemap
+											? SourceMapGenerator
+											: undefined,
 									});
 
 									return {
@@ -168,7 +172,7 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 											import.meta.hot.decline();
 										}`;
 									}
-									return escapeViteEnvReferences(code);
+									return { code: escapeViteEnvReferences(code), map: null };
 								},
 							},
 						] as VitePlugin[],

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml