From a2414bf59e2e2cd633aece68e724401c4ad281b9 Mon Sep 17 00:00:00 2001
From: Ben Holmes <hey@bholmes.dev>
Date: Mon, 22 Aug 2022 18:18:30 -0400
Subject: [PATCH] Improve MDX glob perf - move Layout to async import (#4428)

* fix: move layout to async import

* chore: changeset

* docs: clarify async import
---
 .changeset/kind-onions-reply.md                   | 5 +++++
 packages/integrations/mdx/src/astro-data-utils.ts | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/kind-onions-reply.md

diff --git a/.changeset/kind-onions-reply.md b/.changeset/kind-onions-reply.md
new file mode 100644
index 0000000000..8092d37729
--- /dev/null
+++ b/.changeset/kind-onions-reply.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Fix dev server reload performance when globbing from an MDX layout
diff --git a/packages/integrations/mdx/src/astro-data-utils.ts b/packages/integrations/mdx/src/astro-data-utils.ts
index f3d04e4316..6bd2186e27 100644
--- a/packages/integrations/mdx/src/astro-data-utils.ts
+++ b/packages/integrations/mdx/src/astro-data-utils.ts
@@ -20,13 +20,17 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 			jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
 		];
 		if (frontmatter.layout) {
+			// NOTE(bholmesdev) 08-22-2022
+			// Using an async layout import (i.e. `const Layout = (await import...)`)
+			// Preserves the dev server import cache when globbing a large set of MDX files
+			// Full explanation: 'https://github.com/withastro/astro/pull/4428'
 			exportNodes.unshift(
 				jsToTreeNode(
 					/** @see 'vite-plugin-markdown' for layout props reference */
 					`import { jsx as layoutJsx } from 'astro/jsx-runtime';
-				import Layout from ${JSON.stringify(frontmatter.layout)};
 				
-				export default function ({ children }) {
+				export default async function ({ children }) {
+					const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;