@astrojs/markdoc 0.2.0 → 0.2.2

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

@@ -2,7 +2,16 @@ 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 } from 'astro/runtime/server/index.js';
+import {
+	createComponent,
+	renderComponent,
+	render,
+	renderScriptElement,
+	renderUniqueStylesheet,
+	createHeadAndContent,
+	unescapeHTML,
+	renderTemplate,
+} from 'astro/runtime/server/index.js';
 
 export type TreeNode =
 	| {
@@ -12,6 +21,9 @@ export type TreeNode =
 	| {
 			type: 'component';
 			component: AstroInstance['default'];
+			collectedLinks?: string[];
+			collectedStyles?: string[];
+			collectedScripts?: string[];
 			props: Record<string, any>;
 			children: TreeNode[];
 	  }
@@ -32,20 +44,67 @@ 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({
+							type: 'inline',
+							content: style,
+						})
+					)
+					.join('');
+			}
+			if (Array.isArray(treeNode.collectedLinks)) {
+				links = treeNode.collectedLinks
+					.map((link: any) => {
+						return renderUniqueStylesheet(result, {
+							href: 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[]
+): Promise<TreeNode> {
 	if (typeof node === 'string' || typeof node === 'number') {
 		return { type: 'text', content: String(node) };
 	} else if (Array.isArray(node)) {
@@ -53,16 +112,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',
@@ -70,12 +130,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/index.js

@@ -5,7 +5,7 @@ import { isValidUrl, MarkdocError, parseFrontmatter, prependForwardSlash } from
 import { emitESMImage } from "astro/assets";
 import { bold, red, yellow } from "kleur/colors";
 import { loadMarkdocConfig } from "./load-config.js";
-import { applyDefaultConfig } from "./runtime.js";
+import { setupConfig } from "./runtime.js";
 function markdocIntegration(legacyConfig) {
   if (legacyConfig) {
     console.log(
@@ -20,7 +20,11 @@ function markdocIntegration(legacyConfig) {
     name: "@astrojs/markdoc",
     hooks: {
       "astro:config:setup": async (params) => {
-        const { config: astroConfig, addContentEntryType } = params;
+        const {
+          config: astroConfig,
+          updateConfig,
+          addContentEntryType
+        } = params;
         markdocConfigResult = await loadMarkdocConfig(astroConfig);
         const userMarkdocConfig = (markdocConfigResult == null ? void 0 : markdocConfigResult.config) ?? {};
         function getEntryInfo({ fileUrl, contents }) {
@@ -35,10 +39,13 @@ function markdocIntegration(legacyConfig) {
         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;
-            const markdocConfig = applyDefaultConfig(userMarkdocConfig, entry);
+            const markdocConfig = setupConfig(userMarkdocConfig, entry);
             const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => {
               return (
                 // Ignore `variable-undefined` errors.
@@ -69,9 +76,12 @@ function markdocIntegration(legacyConfig) {
                 filePath: entry._internal.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, applyDefaultConfig, Markdoc, headingSlugger } from '@astrojs/markdoc/runtime';
+						import { collectHeadings, setupConfig, Markdoc } from '@astrojs/markdoc/runtime';
 import * as entry from ${JSON.stringify(viteId + "?astroContentCollectionEntry")};
 ${markdocConfigResult ? `import _userConfig from ${JSON.stringify(
               markdocConfigResult.fileUrl.pathname
@@ -88,22 +98,30 @@ export function getHeadings() {
             TODO: propose new `render()` API to allow Markdoc variable passing to `render()` itself,
             instead of the Content component. Would remove double-transform and unlock variable resolution in heading slugs. */
             ""}
-	headingSlugger.reset();
 	const headingConfig = userConfig.nodes?.heading;
-	const config = applyDefaultConfig(headingConfig ? { nodes: { heading: headingConfig } } : {}, entry);
+	const config = setupConfig(headingConfig ? { nodes: { heading: headingConfig } } : {}, entry);
 	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) {
-	headingSlugger.reset();
-	const config = applyDefaultConfig({
-		...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(
@@ -111,6 +129,26 @@ 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(id, importer) {
+                  if (importer === (markdocConfigResult == null ? void 0 : 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) => {

package/dist/nodes/heading.d.ts

@@ -1,4 +1,10 @@
-import { type Schema } from '@markdoc/markdoc';
+import { type ConfigType, type Schema } from '@markdoc/markdoc';
 import Slugger from 'github-slugger';
-export declare const headingSlugger: Slugger;
+type ConfigTypeWithCtx = ConfigType & {
+    ctx: {
+        headingSlugger: Slugger;
+    };
+};
 export declare const heading: Schema;
+export declare function setupHeadingConfig(): ConfigTypeWithCtx;
+export {};

package/dist/nodes/heading.js

@@ -1,8 +1,7 @@
 import Markdoc from "@markdoc/markdoc";
 import Slugger from "github-slugger";
 import { getTextContent } from "../runtime.js";
-const headingSlugger = new Slugger();
-function getSlug(attributes, children) {
+function getSlug(attributes, children, headingSlugger) {
   if (attributes.id && typeof attributes.id === "string") {
     return attributes.id;
   }
@@ -22,18 +21,29 @@ const heading = {
     var _a, _b;
     const { level, ...attributes } = node.transformAttributes(config);
     const children = node.transformChildren(config);
-    const slug = getSlug(attributes, children);
+    const slug = getSlug(attributes, children, config.ctx.headingSlugger);
     const render = ((_b = (_a = config.nodes) == null ? void 0 : _a.heading) == null ? void 0 : _b.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);
   }
 };
+function setupHeadingConfig() {
+  const headingSlugger = new Slugger();
+  return {
+    ctx: {
+      headingSlugger
+    },
+    nodes: {
+      heading
+    }
+  };
+}
 export {
   heading,
-  headingSlugger
+  setupHeadingConfig
 };

package/dist/nodes/index.d.ts

@@ -1,4 +1,4 @@
-export { headingSlugger } from './heading.js';
+export { setupHeadingConfig } from './heading.js';
 export declare const nodes: {
     heading: import("@markdoc/markdoc").Schema;
 };

package/dist/nodes/index.js

@@ -1,7 +1,7 @@
 import { heading } from "./heading.js";
-import { headingSlugger } from "./heading.js";
+import { setupHeadingConfig } from "./heading.js";
 const nodes = { heading };
 export {
-  headingSlugger,
-  nodes
+  nodes,
+  setupHeadingConfig
 };

package/dist/runtime.d.ts

@@ -1,10 +1,13 @@
 import type { MarkdownHeading } from '@astrojs/markdown-remark';
 import { type ConfigType as MarkdocConfig, type RenderableTreeNode } from '@markdoc/markdoc';
 import type { ContentEntryModule } from 'astro';
-/** Used to reset Slugger cache on each build at runtime */
+/** Used to call `Markdoc.transform()` and `Markdoc.Ast` in runtime modules */
 export { default as Markdoc } from '@markdoc/markdoc';
-export { headingSlugger } from './nodes/index.js';
-export declare function applyDefaultConfig(config: MarkdocConfig, entry: ContentEntryModule): MarkdocConfig;
+/**
+ * Merge user config with default config and set up context (ex. heading ID slugger)
+ * Called on each file's individual transform
+ */
+export declare function setupConfig(userConfig: MarkdocConfig, entry: ContentEntryModule): MarkdocConfig;
 /**
  * Get text content as a string from a Markdoc transform AST
  */

package/dist/runtime.js

@@ -1,19 +1,34 @@
 import Markdoc from "@markdoc/markdoc";
-import { nodes as astroNodes } from "./nodes/index.js";
+import { setupHeadingConfig } from "./nodes/index.js";
 import { default as default2 } from "@markdoc/markdoc";
-import { headingSlugger } from "./nodes/index.js";
-function applyDefaultConfig(config, entry) {
+function setupConfig(userConfig, entry) {
+  const defaultConfig = {
+    // `setupXConfig()` could become a "plugin" convention as well?
+    ...setupHeadingConfig(),
+    variables: { entry }
+  };
+  return mergeConfig(defaultConfig, userConfig);
+}
+function mergeConfig(configA, configB) {
   return {
-    ...config,
-    variables: {
-      entry,
-      ...config.variables
+    ...configA,
+    ...configB,
+    tags: {
+      ...configA.tags,
+      ...configB.tags
     },
     nodes: {
-      ...astroNodes,
-      ...config.nodes
+      ...configA.nodes,
+      ...configB.nodes
+    },
+    functions: {
+      ...configA.functions,
+      ...configB.functions
+    },
+    variables: {
+      ...configA.variables,
+      ...configB.variables
     }
-    // TODO: Syntax highlighting
   };
 }
 function getTextContent(childNodes) {
@@ -56,8 +71,7 @@ function collectHeadings(children) {
 }
 export {
   default2 as Markdoc,
-  applyDefaultConfig,
   collectHeadings,
   getTextContent,
-  headingSlugger
+  setupConfig
 };

package/package.json

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