[Markdoc] Fix global asset bleed (#6758)

* wip: propagatedAssets flag per-component

* Propagate in TreeNode

* fix: remove unused inject comment

* feat: make asset propagation an integration opt-in

* fix: remove crawlGraph stopper

* wip: logs to understand what's happening

* SSR mdoc files in dev

* feat: add astroPropagatedAssets flag with vite

* chore: remove console logs

* chore: cleanup hasContentFlag

* fix: set handlePropagation default for legacy integrations

* chore: changeset

* temp: silence acorn type error

* chore: revert pnpm-lock changes

* fix: check correct flag

* We need to handle propagation on markdown because of layouts

* Remove use of renderStyleElement

* Fix heading tests

* Fix merge conflict

* typeof function

* Switch the check

* Add comment on injection detection regexp

---------

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

2 files changed, 54 insertions, 12 deletions

diff --git a/packages/integrations/markdoc/src/index.ts b/packages/integrations/markdoc/src/index.ts
index 627f08c77..ba8a0af84 100644
--- a/packages/integrations/markdoc/src/index.ts
+++ b/packages/integrations/markdoc/src/index.ts
@@ -32,7 +32,11 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration
 		name: '@astrojs/markdoc',
 		hooks: {
 			'astro:config:setup': async (params) => {
-				const { config: astroConfig, addContentEntryType } = params as SetupHookParams;
+				const {
+					config: astroConfig,
+					updateConfig,
+					addContentEntryType,
+				} = params as SetupHookParams;
 
 				markdocConfigResult = await loadMarkdocConfig(astroConfig);
 				const userMarkdocConfig = markdocConfigResult?.config ?? {};
@@ -49,6 +53,9 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration
 				addContentEntryType({
 					extensions: ['.mdoc'],
 					getEntryInfo,
+					// Markdoc handles script / style propagation
+					// for Astro components internally
+					handlePropagation: false,
 					async getRenderModule({ entry, viteId }) {
 						const ast = Markdoc.parse(entry.body);
 						const pluginContext = this;
@@ -88,7 +95,10 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration
 							});
 						}
 
-						const res = `import { jsx as h } from 'astro/jsx-runtime';
+						const res = `import {
+							createComponent,
+							renderComponent,
+						} from 'astro/runtime/server/index.js';
 						import { Renderer } from '@astrojs/markdoc/components';
 						import { collectHeadings, setupConfig, Markdoc } from '@astrojs/markdoc/runtime';
 import * as entry from ${JSON.stringify(viteId + '?astroContentCollectionEntry')};
@@ -119,14 +129,24 @@ export function getHeadings() {
 	const content = Markdoc.transform(ast, config);
 	return collectHeadings(Array.isArray(content) ? content : content.children);
 }
-export async function Content (props) {
-	const config = setupConfig({
-		...userConfig,
-		variables: { ...userConfig.variables, ...props },
-	}, entry);
 
-	return h(Renderer, { config, stringifiedAst });
-}`;
+export const Content = createComponent({
+	factory(result, props) {
+		const config = setupConfig({
+			...userConfig,
+			variables: { ...userConfig.variables, ...props },
+		}, entry);
+		
+		return renderComponent(
+			result,
+			Renderer.name,
+			Renderer,
+			{ stringifiedAst, config },
+			{}
+		);
+	},
+	propagation: 'self',
+});`;
 						return { code: res };
 					},
 					contentModuleTypes: await fs.promises.readFile(
@@ -134,6 +154,27 @@ export async function Content (props) {
 						'utf-8'
 					),
 				});
+
+				updateConfig({
+					vite: {
+						plugins: [
+							{
+								name: '@astrojs/markdoc:astro-propagated-assets',
+								enforce: 'pre',
+								// Astro component styles and scripts should only be injected
+								// When a given Markdoc file actually uses that component.
+								// Add the `astroPropagatedAssets` flag to inject only when rendered.
+								resolveId(this: rollup.TransformPluginContext, id: string, importer: string) {
+									if (importer === markdocConfigResult?.fileUrl.pathname && id.endsWith('.astro')) {
+										return this.resolve(id + '?astroPropagatedAssets', importer, {
+											skipSelf: true,
+										});
+									}
+								},
+							},
+						],
+					},
+				});
 			},
 			'astro:server:setup': async ({ server }) => {
 				server.watcher.on('all', (event, entry) => {
diff --git a/packages/integrations/markdoc/src/nodes/heading.ts b/packages/integrations/markdoc/src/nodes/heading.ts
index 0210e9b90..cb50dd231 100644
--- a/packages/integrations/markdoc/src/nodes/heading.ts
+++ b/packages/integrations/markdoc/src/nodes/heading.ts
@@ -37,13 +37,14 @@ export const heading: Schema = {
 		const slug = getSlug(attributes, children, config.ctx.headingSlugger);
 
 		const render = config.nodes?.heading?.render ?? `h${level}`;
+
 		const tagProps =
 			// For components, pass down `level` as a prop,
 			// alongside `__collectHeading` for our `headings` collector.
 			// Avoid accidentally rendering `level` as an HTML attribute otherwise!
-			typeof render === 'function'
-				? { ...attributes, id: slug, __collectHeading: true, level }
-				: { ...attributes, id: slug };
+			typeof render === 'string'
+				? { ...attributes, id: slug }
+				: { ...attributes, id: slug, __collectHeading: true, level };
 
 		return new Markdoc.Tag(render, tagProps, children);
 	},