fix: bundle client-side code for components used in .md pages (#78)

2 files changed, 21 insertions, 10 deletions

diff --git a/src/build/bundle.ts b/src/build/bundle.ts
index e447097a2..a0f61289e 100644
--- a/src/build/bundle.ts
+++ b/src/build/bundle.ts
@@ -8,6 +8,7 @@ import esbuild from 'esbuild';
 import { promises as fsPromises } from 'fs';
 import { parse } from '../parser/index.js';
 import { transform } from '../compiler/transform/index.js';
+import { convertMdToAstroSource } from '../compiler/index.js';
 import { getAttrValue } from '../ast.js';
 import { walk } from 'estree-walker';
 import babelParser from '@babel/parser';
@@ -72,12 +73,17 @@ export async function collectDynamicImports(filename: URL, { astroConfig, loggin
   const imports = new Set<string>();
 
   // Only astro files
-  if (!filename.pathname.endsWith('astro')) {
+  if (!filename.pathname.endsWith('.astro') && !filename.pathname.endsWith('.md')) {
     return imports;
   }
 
   const extensions = astroConfig.extensions || defaultExtensions;
-  const source = await readFile(filename, 'utf-8');
+
+  let source = await readFile(filename, 'utf-8');
+  if (filename.pathname.endsWith('.md')) {
+    source = await convertMdToAstroSource(source);
+  }
+
   const ast = parse(source, {
     filename,
   });
diff --git a/src/compiler/index.ts b/src/compiler/index.ts
index c20596f65..d2d7bff08 100644
--- a/src/compiler/index.ts
+++ b/src/compiler/index.ts
@@ -48,13 +48,9 @@ async function convertAstroToJsx(template: string, opts: ConvertAstroOptions): P
 }
 
 /**
- * .md -> .jsx
- * Core function processing Markdown, but along the way also calls convertAstroToJsx().
+ * .md -> .astro source
  */
-async function convertMdToJsx(
-  contents: string,
-  { compileOptions, filename, fileID }: { compileOptions: CompileOptions; filename: string; fileID: string }
-): Promise<TransformResult> {
+export async function convertMdToAstroSource(contents: string): Promise<string> {
   const { data: frontmatterData, content } = matter(contents);
   const { headers, headersExtension } = createMarkdownHeadersCollector();
   const { htmlAstro, mdAstro } = encodeAstroMdx();
@@ -80,15 +76,24 @@ async function convertMdToJsx(
   // Break it up here so that the HTML parser won't detect it.
   const stringifiedSetupContext = JSON.stringify(contentData).replace(/\<\/script\>/g, `</scrip" + "t>`);
 
-  const raw = `---
+  return `---
   ${imports}
   ${frontmatterData.layout ? `import {__renderPage as __layout} from '${frontmatterData.layout}';` : 'const __layout = undefined;'}
   export const __content = ${stringifiedSetupContext};
 ---
 <section>${mdHtml}</section>`;
+}
 
+/**
+ * .md -> .jsx
+ * Core function processing Markdown, but along the way also calls convertAstroToJsx().
+ */
+async function convertMdToJsx(
+  contents: string,
+  { compileOptions, filename, fileID }: { compileOptions: CompileOptions; filename: string; fileID: string }
+): Promise<TransformResult> {
+  const raw = await convertMdToAstroSource(contents);
   const convertOptions = { compileOptions, filename, fileID };
-
   return await convertAstroToJsx(raw, convertOptions);
 }