@astrojs/markdoc 0.2.2 → 0.2.3

package/components/Renderer.astro

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

package/components/TreeNode.ts

@@ -2,16 +2,7 @@ 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,
-} from 'astro/runtime/server/index.js';
+import { createComponent, renderComponent, render } from 'astro/runtime/server/index.js';
 
 export type TreeNode =
 	| {
@@ -21,9 +12,6 @@ export type TreeNode =
 	| {
 			type: 'component';
 			component: AstroInstance['default'];
-			collectedLinks?: string[];
-			collectedStyles?: string[];
-			collectedScripts?: string[];
 			props: Record<string, any>;
 			children: TreeNode[];
 	  }
@@ -44,67 +32,20 @@ export const ComponentNode = createComponent({
 				)}`,
 		};
 		if (treeNode.type === 'component') {
-			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
-				)}`
+			return 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: 'self',
+	propagation: 'none',
 });
 
-export async function createTreeNode(
-	node: RenderableTreeNode | RenderableTreeNode[]
-): Promise<TreeNode> {
+export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode {
 	if (typeof node === 'string' || typeof node === 'number') {
 		return { type: 'text', content: String(node) };
 	} else if (Array.isArray(node)) {
@@ -112,17 +53,16 @@ export async function createTreeNode(
 			type: 'component',
 			component: Fragment,
 			props: {},
-			children: await Promise.all(node.map((child) => createTreeNode(child))),
+			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',
@@ -130,38 +70,12 @@ export async function createTreeNode(
 			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,
+			children: node.children.map((child) => createTreeNode(child)),
 		};
 	}
 }
-
-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

@@ -20,11 +20,7 @@ function markdocIntegration(legacyConfig) {
     name: "@astrojs/markdoc",
     hooks: {
       "astro:config:setup": async (params) => {
-        const {
-          config: astroConfig,
-          updateConfig,
-          addContentEntryType
-        } = params;
+        const { config: astroConfig, addContentEntryType } = params;
         markdocConfigResult = await loadMarkdocConfig(astroConfig);
         const userMarkdocConfig = (markdocConfigResult == null ? void 0 : markdocConfigResult.config) ?? {};
         function getEntryInfo({ fileUrl, contents }) {
@@ -39,9 +35,6 @@ 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;
@@ -76,10 +69,7 @@ function markdocIntegration(legacyConfig) {
                 filePath: entry._internal.filePath
               });
             }
-            const res = `import {
-							createComponent,
-							renderComponent,
-						} from 'astro/runtime/server/index.js';
+            const res = `import { jsx as h } from 'astro/jsx-runtime';
 						import { Renderer } from '@astrojs/markdoc/components';
 						import { collectHeadings, setupConfig, Markdoc } from '@astrojs/markdoc/runtime';
 import * as entry from ${JSON.stringify(viteId + "?astroContentCollectionEntry")};
@@ -104,24 +94,14 @@ 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);
 
-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 h(Renderer, { config, stringifiedAst });
+}`;
             return { code: res };
           },
           contentModuleTypes: await fs.promises.readFile(
@@ -129,26 +109,6 @@ export const Content = createComponent({
             "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.js

@@ -27,7 +27,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 === "string" ? { ...attributes, id: slug } : { ...attributes, id: slug, __collectHeading: true, level }
+      typeof render === "function" ? { ...attributes, id: slug, __collectHeading: true, level } : { ...attributes, id: slug }
     );
     return new Markdoc.Tag(render, tagProps, children);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc pages in your Astro site",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -40,7 +40,7 @@
     "zod": "^3.17.3"
   },
   "peerDependencies": {
-    "astro": "^2.5.3"
+    "astro": "^2.5.5"
   },
   "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.3",
+    "astro": "2.5.5",
     "astro-scripts": "0.0.14"
   },
   "engines": {