@astrojs/markdoc 0.3.0 → 0.3.1

package/components/Renderer.astro

@@ -1,4 +1,5 @@
 ---
+//! astro-head-inject
 import type { Config } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
 import { ComponentNode, createTreeNode } from './TreeNode.js';
@@ -14,4 +15,4 @@ const ast = Markdoc.Ast.fromJSON(stringifiedAst);
 const content = Markdoc.transform(ast, config);
 ---
 
-<ComponentNode treeNode={createTreeNode(content)} />
+<ComponentNode treeNode={await createTreeNode(content)} />

package/components/TreeNode.ts

@@ -6,6 +6,11 @@ import {
 	createComponent,
 	renderComponent,
 	render,
+	renderScriptElement,
+	renderUniqueStylesheet,
+	createHeadAndContent,
+	unescapeHTML,
+	renderTemplate,
 	HTMLString,
 	isHTMLString,
 } from 'astro/runtime/server/index.js';
@@ -18,6 +23,9 @@ export type TreeNode =
 	| {
 			type: 'component';
 			component: AstroInstance['default'];
+			collectedLinks?: string[];
+			collectedStyles?: string[];
+			collectedScripts?: string[];
 			props: Record<string, any>;
 			children: TreeNode[];
 	  }
@@ -39,20 +47,66 @@ export const ComponentNode = createComponent({
 				)}`,
 		};
 		if (treeNode.type === 'component') {
-			return renderComponent(
-				result,
-				treeNode.component.name,
-				treeNode.component,
-				treeNode.props,
-				slots
+			let styles = '',
+				links = '',
+				scripts = '';
+			if (Array.isArray(treeNode.collectedStyles)) {
+				styles = treeNode.collectedStyles
+					.map((style: any) =>
+						renderUniqueStylesheet(result, {
+							type: 'inline',
+							content: style,
+						})
+					)
+					.join('');
+			}
+			if (Array.isArray(treeNode.collectedLinks)) {
+				links = treeNode.collectedLinks
+					.map((link: any) => {
+						return renderUniqueStylesheet(result, {
+							type: 'external',
+							src: link[0] === '/' ? link : '/' + link,
+						});
+					})
+					.join('');
+			}
+			if (Array.isArray(treeNode.collectedScripts)) {
+				scripts = treeNode.collectedScripts
+					.map((script: any) => renderScriptElement(script))
+					.join('');
+			}
+
+			const head = unescapeHTML(styles + links + scripts);
+
+			let headAndContent = createHeadAndContent(
+				head,
+				renderTemplate`${renderComponent(
+					result,
+					treeNode.component.name,
+					treeNode.component,
+					treeNode.props,
+					slots
+				)}`
 			);
+
+			// Let the runtime know that this component is being used.
+			result.propagators.set(
+				{},
+				{
+					init() {
+						return headAndContent;
+					},
+				}
+			);
+
+			return headAndContent;
 		}
 		return renderComponent(result, treeNode.tag, treeNode.tag, treeNode.attributes, slots);
 	},
-	propagation: 'none',
+	propagation: 'self',
 });
 
-export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode {
+export async function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode {
 	if (isHTMLString(node)) {
 		return { type: 'text', content: node as HTMLString };
 	} else if (typeof node === 'string' || typeof node === 'number') {
@@ -62,16 +116,17 @@ export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]):
 			type: 'component',
 			component: Fragment,
 			props: {},
-			children: node.map((child) => createTreeNode(child)),
+			children: await Promise.all(node.map((child) => createTreeNode(child))),
 		};
 	} else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) {
 		return { type: 'text', content: '' };
 	}
 
+	const children = await Promise.all(node.children.map((child) => createTreeNode(child)));
+
 	if (typeof node.name === 'function') {
 		const component = node.name;
 		const props = node.attributes;
-		const children = node.children.map((child) => createTreeNode(child));
 
 		return {
 			type: 'component',
@@ -79,12 +134,38 @@ export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]):
 			props,
 			children,
 		};
+	} else if (isPropagatedAssetsModule(node.name)) {
+		const { collectedStyles, collectedLinks, collectedScripts } = node.name;
+		const component = (await node.name.getMod())?.default ?? Fragment;
+		const props = node.attributes;
+
+		return {
+			type: 'component',
+			component,
+			collectedStyles,
+			collectedLinks,
+			collectedScripts,
+			props,
+			children,
+		};
 	} else {
 		return {
 			type: 'element',
 			tag: node.name,
 			attributes: node.attributes,
-			children: node.children.map((child) => createTreeNode(child)),
+			children,
 		};
 	}
 }
+
+type PropagatedAssetsModule = {
+	__astroPropagation: true;
+	getMod: () => Promise<AstroInstance['default']>;
+	collectedStyles: string[];
+	collectedLinks: string[];
+	collectedScripts: string[];
+};
+
+function isPropagatedAssetsModule(module: any): module is PropagatedAssetsModule {
+	return typeof module === 'object' && module != null && '__astroPropagation' in module;
+}

package/dist/heading-ids.js

@@ -33,7 +33,7 @@ const heading = {
       // 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);
   }

package/dist/index.js

@@ -1,12 +1,26 @@
 import Markdoc from "@markdoc/markdoc";
 import fs from "node:fs";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { isValidUrl, MarkdocError, parseFrontmatter, prependForwardSlash } from "./utils.js";
+import {
+  createNameHash,
+  hasContentFlag,
+  isValidUrl,
+  MarkdocError,
+  parseFrontmatter,
+  prependForwardSlash,
+  PROPAGATED_ASSET_FLAG
+} from "./utils.js";
 import { emitESMImage } from "astro/assets";
 import { bold, red, yellow } from "kleur/colors";
 import path from "node:path";
+import { normalizePath } from "vite";
 import { loadMarkdocConfig } from "./load-config.js";
 import { setupConfig } from "./runtime.js";
+const markdocTokenizer = new Markdoc.Tokenizer({
+  // Strip <!-- comments --> from rendered output
+  // Without this, they're rendered as strings!
+  allowComments: true
+});
 function markdocIntegration(legacyConfig) {
   if (legacyConfig) {
     console.log(
@@ -17,6 +31,7 @@ function markdocIntegration(legacyConfig) {
     process.exit(0);
   }
   let markdocConfigResult;
+  let markdocConfigResultId = "";
   return {
     name: "@astrojs/markdoc",
     hooks: {
@@ -26,14 +41,10 @@ function markdocIntegration(legacyConfig) {
           updateConfig,
           addContentEntryType
         } = params;
-        updateConfig({
-          vite: {
-            ssr: {
-              external: ["@astrojs/markdoc/prism", "@astrojs/markdoc/shiki"]
-            }
-          }
-        });
         markdocConfigResult = await loadMarkdocConfig(astroConfig);
+        if (markdocConfigResult) {
+          markdocConfigResultId = normalizePath(fileURLToPath(markdocConfigResult.fileUrl));
+        }
         const userMarkdocConfig = (markdocConfigResult == null ? void 0 : markdocConfigResult.config) ?? {};
         function getEntryInfo({ fileUrl, contents }) {
           const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
@@ -47,9 +58,13 @@ function markdocIntegration(legacyConfig) {
         addContentEntryType({
           extensions: [".mdoc"],
           getEntryInfo,
+          // Markdoc handles script / style propagation
+          // for Astro components internally
+          handlePropagation: false,
           async getRenderModule({ contents, fileUrl, viteId }) {
             const entry = getEntryInfo({ contents, fileUrl });
-            const ast = Markdoc.parse(entry.body);
+            const tokens = markdocTokenizer.tokenize(entry.body);
+            const ast = Markdoc.parse(tokens);
             const pluginContext = this;
             const markdocConfig = await setupConfig(userMarkdocConfig);
             const filePath = fileURLToPath(fileUrl);
@@ -84,12 +99,14 @@ function markdocIntegration(legacyConfig) {
                 filePath
               });
             }
-            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, setupConfigSync, Markdoc } from '@astrojs/markdoc/runtime';
-import * as entry from ${JSON.stringify(viteId + "?astroContentCollectionEntry")};
 ${markdocConfigResult ? `import _userConfig from ${JSON.stringify(
-              markdocConfigResult.fileUrl.pathname
+              markdocConfigResultId
             )};
 const userConfig = _userConfig ?? {};` : "const userConfig = {};"}${astroConfig.experimental.assets ? `
 import { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';
@@ -104,19 +121,29 @@ export function getHeadings() {
             instead of the Content component. Would remove double-transform and unlock variable resolution in heading slugs. */
             ""}
 	const headingConfig = userConfig.nodes?.heading;
-	const config = setupConfigSync(headingConfig ? { nodes: { heading: headingConfig } } : {}, entry);
+	const config = setupConfigSync(headingConfig ? { nodes: { heading: headingConfig } } : {});
 	const ast = Markdoc.Ast.fromJSON(stringifiedAst);
 	const content = Markdoc.transform(ast, config);
 	return collectHeadings(Array.isArray(content) ? content : content.children);
 }
-export async function Content (props) {
-	const config = await setupConfig({
-		...userConfig,
-		variables: { ...userConfig.variables, ...props },
-	}, entry);
 
-	return h(Renderer, { config, stringifiedAst });
-}`;
+export const Content = createComponent({
+	async factory(result, props) {
+		const config = await setupConfig({
+			...userConfig,
+			variables: { ...userConfig.variables, ...props },
+		});
+		
+		return renderComponent(
+			result,
+			Renderer.name,
+			Renderer,
+			{ stringifiedAst, config },
+			{}
+		);
+	},
+	propagation: 'self',
+});`;
             return { code: res };
           },
           contentModuleTypes: await fs.promises.readFile(
@@ -124,10 +151,53 @@ export async function Content (props) {
             "utf-8"
           )
         });
+        let rollupOptions = {};
+        if (markdocConfigResult) {
+          rollupOptions = {
+            output: {
+              // Split Astro components from your `markdoc.config`
+              // to only inject component styles and scripts at runtime.
+              manualChunks(id, { getModuleInfo }) {
+                var _a, _b;
+                if (markdocConfigResult && hasContentFlag(id, PROPAGATED_ASSET_FLAG) && ((_b = (_a = getModuleInfo(id)) == null ? void 0 : _a.importers) == null ? void 0 : _b.includes(markdocConfigResultId))) {
+                  return createNameHash(id, [id]);
+                }
+              }
+            }
+          };
+        }
+        updateConfig({
+          vite: {
+            vite: {
+              ssr: {
+                external: ["@astrojs/markdoc/prism", "@astrojs/markdoc/shiki"]
+              }
+            },
+            build: {
+              rollupOptions
+            },
+            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(id, importer) {
+                  if (importer === markdocConfigResultId && id.endsWith(".astro")) {
+                    return this.resolve(id + "?astroPropagatedAssets", importer, {
+                      skipSelf: true
+                    });
+                  }
+                }
+              }
+            ]
+          }
+        });
       },
       "astro:server:setup": async ({ server }) => {
         server.watcher.on("all", (event, entry) => {
-          if (pathToFileURL(entry).pathname === (markdocConfigResult == null ? void 0 : markdocConfigResult.fileUrl.pathname)) {
+          if (prependForwardSlash(pathToFileURL(entry).pathname) === markdocConfigResultId) {
             console.log(
               yellow(
                 `${bold("[Markdoc]")} Restart the dev server for config changes to take effect.`

package/dist/runtime.d.ts

@@ -1,6 +1,5 @@
 import type { MarkdownHeading } from '@astrojs/markdown-remark';
 import { type RenderableTreeNode } from '@markdoc/markdoc';
-import type { ContentEntryModule } from 'astro';
 import type { AstroMarkdocConfig } from './config.js';
 /** Used to call `Markdoc.transform()` and `Markdoc.Ast` in runtime modules */
 export { default as Markdoc } from '@markdoc/markdoc';
@@ -11,7 +10,7 @@ export { default as Markdoc } from '@markdoc/markdoc';
  */
 export declare function setupConfig(userConfig: AstroMarkdocConfig): Promise<Omit<AstroMarkdocConfig, 'extends'>>;
 /** Used for synchronous `getHeadings()` function */
-export declare function setupConfigSync(userConfig: AstroMarkdocConfig, entry: ContentEntryModule): Omit<AstroMarkdocConfig, 'extends'>;
+export declare function setupConfigSync(userConfig: AstroMarkdocConfig): Omit<AstroMarkdocConfig, 'extends'>;
 /**
  * Get text content as a string from a Markdoc transform AST
  */

package/dist/runtime.js

@@ -13,11 +13,8 @@ async function setupConfig(userConfig) {
   }
   return mergeConfig(defaultConfig, userConfig);
 }
-function setupConfigSync(userConfig, entry) {
-  let defaultConfig = {
-    ...setupHeadingConfig(),
-    variables: { entry }
-  };
+function setupConfigSync(userConfig) {
+  const defaultConfig = setupHeadingConfig();
   return mergeConfig(defaultConfig, userConfig);
 }
 function mergeConfig(configA, configB) {

package/dist/utils.d.ts

@@ -37,4 +37,18 @@ interface ErrorProperties {
  */
 export declare function prependForwardSlash(str: string): string;
 export declare function isValidUrl(str: string): boolean;
+/**
+ * Identifies Astro components with propagated assets
+ * @see 'packages/astro/src/content/consts.ts'
+ */
+export declare const PROPAGATED_ASSET_FLAG = "astroPropagatedAssets";
+/**
+ * @see 'packages/astro/src/content/utils.ts'
+ */
+export declare function hasContentFlag(viteId: string, flag: string): boolean;
+/**
+ * Create build hash for manual Rollup chunks.
+ * @see 'packages/astro/src/core/build/plugins/plugin-css.ts'
+ */
+export declare function createNameHash(baseId: string, hashIds: string[]): string;
 export {};

package/dist/utils.js

@@ -1,4 +1,6 @@
 import matter from "gray-matter";
+import crypto from "node:crypto";
+import path from "node:path";
 function parseFrontmatter(fileContents, filePath) {
   try {
     matter.clearCache();
@@ -52,8 +54,26 @@ function isValidUrl(str) {
     return false;
   }
 }
+const PROPAGATED_ASSET_FLAG = "astroPropagatedAssets";
+function hasContentFlag(viteId, flag) {
+  const flags = new URLSearchParams(viteId.split("?")[1] ?? "");
+  return flags.has(flag);
+}
+function createNameHash(baseId, hashIds) {
+  const baseName = baseId ? path.parse(baseId).name : "index";
+  const hash = crypto.createHash("sha256");
+  for (const id of hashIds) {
+    hash.update(id, "utf-8");
+  }
+  const h = hash.digest("hex").slice(0, 8);
+  const proposedName = baseName + "." + h;
+  return proposedName;
+}
 export {
   MarkdocError,
+  PROPAGATED_ASSET_FLAG,
+  createNameHash,
+  hasContentFlag,
   isValidUrl,
   parseFrontmatter,
   prependForwardSlash

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc in your Astro site",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -44,7 +44,7 @@
     "zod": "^3.17.3"
   },
   "peerDependencies": {
-    "astro": "^2.5.6"
+    "astro": "^2.5.7"
   },
   "devDependencies": {
     "@astrojs/markdown-remark": "^2.2.1",
@@ -57,7 +57,7 @@
     "mocha": "^9.2.2",
     "rollup": "^3.20.1",
     "vite": "^4.3.1",
-    "astro": "2.5.6",
+    "astro": "2.5.7",
     "astro-scripts": "0.0.14"
   },
   "engines": {