@astrojs/markdoc 0.3.0 → 0.3.2

package/README.md

@@ -151,9 +151,8 @@ import Heading from './src/components/Heading.astro';
 export default defineMarkdocConfig({
   nodes: {
     heading: {
+      ...nodes.heading, // Preserve default anchor link generation
       render: Heading,
-      // Preserve default anchor link generation
-      ...nodes.heading,
     },
   },
 })
@@ -225,8 +224,8 @@ import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
 export default defineMarkdocConfig({
   nodes: {
     document: {
-      render: null, // default 'article'
       ...nodes.document, // Apply defaults for other options
+      render: null, // default 'article'
     },
   },
 })
@@ -246,9 +245,8 @@ import Quote from './src/components/Quote.astro';
 export default defineMarkdocConfig({
   nodes: {
     blockquote: {
+      ...nodes.blockquote, // Apply Markdoc's defaults for other options
       render: Quote,
-      // Apply Markdoc's defaults for other options
-      ...nodes.blockquote,
     },
   },
 })

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,10 @@ const ast = Markdoc.Ast.fromJSON(stringifiedAst);
 const content = Markdoc.transform(ast, config);
 ---
 
-<ComponentNode treeNode={createTreeNode(content)} />
+{
+	Array.isArray(content) ? (
+		content.map(async (c) => <ComponentNode treeNode={await createTreeNode(c)} />)
+	) : (
+		<ComponentNode treeNode={await createTreeNode(content)} />
+	)
+}

package/components/TreeNode.ts

@@ -1,11 +1,15 @@
 import type { AstroInstance } from 'astro';
-import { Fragment } from 'astro/jsx-runtime';
 import type { RenderableTreeNode } from '@markdoc/markdoc';
 import Markdoc from '@markdoc/markdoc';
 import {
 	createComponent,
 	renderComponent,
 	render,
+	renderScriptElement,
+	renderUniqueStylesheet,
+	createHeadAndContent,
+	unescapeHTML,
+	renderTemplate,
 	HTMLString,
 	isHTMLString,
 } from 'astro/runtime/server/index.js';
@@ -18,6 +22,9 @@ export type TreeNode =
 	| {
 			type: 'component';
 			component: AstroInstance['default'];
+			collectedLinks?: string[];
+			collectedStyles?: string[];
+			collectedScripts?: string[];
 			props: Record<string, any>;
 			children: TreeNode[];
 	  }
@@ -39,39 +46,79 @@ 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): Promise<TreeNode> {
 	if (isHTMLString(node)) {
 		return { type: 'text', content: node as HTMLString };
 	} else if (typeof node === 'string' || typeof node === 'number') {
 		return { type: 'text', content: String(node) };
-	} else if (Array.isArray(node)) {
-		return {
-			type: 'component',
-			component: Fragment,
-			props: {},
-			children: 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 +126,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;
+		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>;
+	collectedStyles: string[];
+	collectedLinks: string[];
+	collectedScripts: string[];
+};
+
+function isPropagatedAssetsModule(module: any): module is PropagatedAssetsModule {
+	return typeof module === 'object' && module != null && '__astroPropagation' in module;
+}

package/dist/config.d.ts

@@ -1,36 +1,40 @@
-import type { ConfigType as MarkdocConfig } from '@markdoc/markdoc';
+import type { Config, ConfigType as MarkdocConfig, MaybePromise, NodeType, Schema } from '@markdoc/markdoc';
 import _Markdoc from '@markdoc/markdoc';
-export type AstroMarkdocConfig<C extends Record<string, any> = Record<string, any>> = MarkdocConfig & {
-    ctx?: C;
-    extends?: ResolvedAstroMarkdocConfig[];
-};
+import type { AstroInstance } from 'astro';
+type Render = AstroInstance['default'] | string;
+export type AstroMarkdocConfig<C extends Record<string, any> = Record<string, any>> = Omit<MarkdocConfig, 'tags' | 'nodes'> & Partial<{
+    tags: Record<string, Schema<Config, Render>>;
+    nodes: Partial<Record<NodeType, Schema<Config, Render>>>;
+    ctx: C;
+    extends: MaybePromise<ResolvedAstroMarkdocConfig>[];
+}>;
 export type ResolvedAstroMarkdocConfig = Omit<AstroMarkdocConfig, 'extends'>;
 export declare const Markdoc: typeof _Markdoc;
 export declare const nodes: {
-    heading: import("@markdoc/markdoc").Schema;
-    document: import("@markdoc/markdoc").Schema;
-    paragraph: import("@markdoc/markdoc").Schema;
-    image: import("@markdoc/markdoc").Schema;
-    fence: import("@markdoc/markdoc").Schema;
-    blockquote: import("@markdoc/markdoc").Schema;
-    item: import("@markdoc/markdoc").Schema;
-    list: import("@markdoc/markdoc").Schema;
-    hr: import("@markdoc/markdoc").Schema;
-    table: import("@markdoc/markdoc").Schema;
-    td: import("@markdoc/markdoc").Schema;
-    th: import("@markdoc/markdoc").Schema;
-    tr: import("@markdoc/markdoc").Schema;
-    tbody: import("@markdoc/markdoc").Schema;
-    thead: import("@markdoc/markdoc").Schema;
-    strong: import("@markdoc/markdoc").Schema;
-    em: import("@markdoc/markdoc").Schema;
-    s: import("@markdoc/markdoc").Schema;
-    inline: import("@markdoc/markdoc").Schema;
-    link: import("@markdoc/markdoc").Schema;
-    code: import("@markdoc/markdoc").Schema;
-    text: import("@markdoc/markdoc").Schema;
-    hardbreak: import("@markdoc/markdoc").Schema;
-    softbreak: import("@markdoc/markdoc").Schema;
+    heading: Schema;
+    document: Schema;
+    paragraph: Schema;
+    image: Schema;
+    fence: Schema;
+    blockquote: Schema;
+    item: Schema;
+    list: Schema;
+    hr: Schema;
+    table: Schema;
+    td: Schema;
+    th: Schema;
+    tr: Schema;
+    tbody: Schema;
+    thead: Schema;
+    strong: Schema;
+    em: Schema;
+    s: Schema;
+    inline: Schema;
+    link: Schema;
+    code: Schema;
+    text: Schema;
+    hardbreak: Schema;
+    softbreak: Schema;
     comment: {
         attributes: {
             content: {
@@ -43,3 +47,4 @@ export declare const nodes: {
     node: {};
 };
 export declare function defineMarkdocConfig(config: AstroMarkdocConfig): AstroMarkdocConfig;
+export {};

package/dist/heading-ids.d.ts

@@ -1,9 +1,10 @@
-import { type Schema } from '@markdoc/markdoc';
+import { type Config as MarkdocConfig, type Schema } from '@markdoc/markdoc';
 import Slugger from 'github-slugger';
-import type { AstroMarkdocConfig } from './config.js';
-type HeadingIdConfig = AstroMarkdocConfig<{
-    headingSlugger: Slugger;
-}>;
+type HeadingIdConfig = MarkdocConfig & {
+    ctx: {
+        headingSlugger: Slugger;
+    };
+};
 export declare const heading: Schema;
 export declare function setupHeadingConfig(): HeadingIdConfig;
 export {};

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,13 +58,21 @@ 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);
-            const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => {
+            const validationErrors = Markdoc.validate(
+              ast,
+              /* Raised generics issue with Markdoc core https://github.com/markdoc/markdoc/discussions/400 */
+              markdocConfig
+            ).filter((e) => {
               return (
                 // Ignore `variable-undefined` errors.
                 // Variables can be configured at runtime,
@@ -84,12 +103,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 +125,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 +155,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/load-config.d.ts

@@ -1,7 +1,7 @@
-import type { Config as MarkdocConfig } from '@markdoc/markdoc';
 import type { AstroConfig } from 'astro';
+import type { AstroMarkdocConfig } from './config.js';
 export type MarkdocConfigResult = {
-    config: MarkdocConfig;
+    config: AstroMarkdocConfig;
     fileUrl: URL;
 };
 export declare function loadMarkdocConfig(astroConfig: Pick<AstroConfig, 'root'>): Promise<MarkdocConfigResult | undefined>;

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.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -19,15 +19,37 @@
   "bugs": "https://github.com/withastro/astro/issues",
   "homepage": "https://docs.astro.build/en/guides/integrations-guide/markdoc/",
   "exports": {
-    "./prism": "./dist/extensions/prism.js",
-    "./shiki": "./dist/extensions/shiki.js",
+    "./prism": {
+      "types": "./dist/extensions/prism.d.ts",
+      "node": "./dist/extensions/prism.js"
+    },
+    "./shiki": {
+      "types": "./dist/extensions/shiki.d.ts",
+      "node": "./dist/extensions/shiki.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "node": "./dist/config.js"
+    },
     ".": "./dist/index.js",
     "./components": "./components/index.ts",
     "./runtime": "./dist/runtime.js",
-    "./config": "./dist/config.js",
     "./experimental-assets-config": "./dist/experimental-assets-config.js",
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "config": [
+        "./dist/config.d.ts"
+      ],
+      "prism": [
+        "./dist/extensions/prism.d.ts"
+      ],
+      "shiki": [
+        "./dist/extensions/shiki.d.ts"
+      ]
+    }
+  },
   "files": [
     "components",
     "dist",
@@ -44,7 +66,7 @@
     "zod": "^3.17.3"
   },
   "peerDependencies": {
-    "astro": "^2.5.6"
+    "astro": "^2.6.1"
   },
   "devDependencies": {
     "@astrojs/markdown-remark": "^2.2.1",
@@ -57,7 +79,7 @@
     "mocha": "^9.2.2",
     "rollup": "^3.20.1",
     "vite": "^4.3.1",
-    "astro": "2.5.6",
+    "astro": "2.6.1",
     "astro-scripts": "0.0.14"
   },
   "engines": {