@astrojs/markdoc 0.3.3 → 0.4.1

package/README.md

@@ -42,9 +42,8 @@ npm install @astrojs/markdoc
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-__`astro.config.mjs`__
-
-```js ins={2} "markdoc()"
+```js ins={3} "markdoc()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import markdoc from '@astrojs/markdoc';
 
@@ -54,14 +53,15 @@ export default defineConfig({
 });
 ```
 
-
 ### Editor Integration
 
 [VS Code](https://code.visualstudio.com/) supports Markdown by default. However, for Markdoc editor support, you may wish to add the following setting in your VSCode config. This ensures authoring Markdoc files provides a Markdown-like editor experience.
 
 ```json title=".vscode/settings.json"
-"files.associations": {
+{
+  "files.associations": {
     "*.mdoc": "markdown"
+  }
 }
 ```
 
@@ -113,16 +113,16 @@ export default defineMarkdocConfig({
     aside: {
       render: Aside,
       attributes: {
-      // Markdoc requires type defs for each attribute.
-      // These should mirror the `Props` type of the component
-      // you are rendering. 
-      // See Markdoc's documentation on defining attributes
-      // https://markdoc.dev/docs/attributes#defining-attributes
+        // Markdoc requires type defs for each attribute.
+        // These should mirror the `Props` type of the component
+        // you are rendering.
+        // See Markdoc's documentation on defining attributes
+        // https://markdoc.dev/docs/attributes#defining-attributes
         type: { type: String },
-      }
+      },
     },
   },
-})
+});
 ```
 
 This component can now be used in your Markdoc files with the `{% aside %}` tag. Children will be passed to your component's default slot:
@@ -132,7 +132,7 @@ This component can now be used in your Markdoc files with the `{% aside %}` tag.
 
 {% aside type="tip" %}
 
-Use tags like this fancy "aside" to add some *flair* to your docs.
+Use tags like this fancy "aside" to add some _flair_ to your docs.
 
 {% /aside %}
 ```
@@ -155,7 +155,7 @@ export default defineMarkdocConfig({
       render: Heading,
     },
   },
-})
+});
 ```
 
 All Markdown headings will render the `Heading.astro` component and pass the following `attributes` as component props:
@@ -192,9 +192,9 @@ export default defineMarkdocConfig({
       // Note: Shiki has countless langs built-in, including `.astro`!
       // https://github.com/shikijs/shiki/blob/main/docs/languages.md
       langs: [],
-    })
+    }),
   ],
-})
+});
 ```
 
 #### Prism
@@ -208,7 +208,7 @@ import prism from '@astrojs/markdoc/prism';
 
 export default defineMarkdocConfig({
   extends: [prism()],
-})
+});
 ```
 
 📚 To learn about configuring Prism stylesheets, [see our syntax highlighting guide](https://docs.astro.build/en/guides/markdown-content/#prism-configuration).
@@ -228,7 +228,7 @@ export default defineMarkdocConfig({
       render: null, // default 'article'
     },
   },
-})
+});
 ```
 
 ### Custom Markdoc nodes / elements
@@ -249,7 +249,7 @@ export default defineMarkdocConfig({
       render: Quote,
     },
   },
-})
+});
 ```
 
 📚 [Find all of Markdoc's built-in nodes and node attributes on their documentation.](https://markdoc.dev/docs/nodes#built-in-nodes)
@@ -282,10 +282,10 @@ export default defineMarkdocConfig({
       render: ClientAside,
       attributes: {
         type: { type: String },
-      }
+      },
     },
   },
-})
+});
 ```
 
 ### Markdoc config
@@ -307,12 +307,12 @@ export default defineMarkdocConfig({
           japan: '🇯🇵',
           spain: '🇪🇸',
           france: '🇫🇷',
-        }
-        return countryToEmojiMap[country] ?? '🏳'
+        };
+        return countryToEmojiMap[country] ?? '🏳';
       },
     },
   },
-})
+});
 ```
 
 Now, you can call this function from any Markdoc content entry:
@@ -359,8 +359,8 @@ import { defineMarkdocConfig } from '@astrojs/markdoc/config';
 export default defineMarkdocConfig({
   variables: {
     environment: process.env.IS_PROD ? 'prod' : 'dev',
-  }
-})
+  },
+});
 ```
 
 ### Access frontmatter from your Markdoc content
@@ -382,7 +382,7 @@ This can now be accessed as `$frontmatter` in your Markdoc.
 
 ## Examples
 
-*   The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project.
+- The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project.
 
 ## Troubleshooting
 
@@ -399,13 +399,8 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
 See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/markdoc/CHANGELOG.md) for a history of changes to this integration.
 
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-
 [astro-components]: https://docs.astro.build/en/core-concepts/astro-components/
-
 [astro-content-collections]: https://docs.astro.build/en/guides/content-collections/
-
 [markdoc-tags]: https://markdoc.dev/docs/tags
-
 [markdoc-nodes]: https://markdoc.dev/docs/nodes
-
 [markdoc-variables]: https://markdoc.dev/docs/variables

package/components/TreeNode.ts

@@ -89,7 +89,10 @@ export const ComponentNode = createComponent({
 			);
 
 			// Let the runtime know that this component is being used.
-			result.propagators.set(
+			// `result.propagators` has been moved to `result._metadata.propagators`
+			// TODO: remove this fallback in the next markdoc integration major
+			const propagators = result._metadata.propagators || result.propagators;
+			propagators.set(
 				{},
 				{
 					init() {

package/dist/config.d.ts

@@ -1,7 +1,14 @@
 import type { Config, ConfigType as MarkdocConfig, MaybePromise, NodeType, Schema } from '@markdoc/markdoc';
 import _Markdoc from '@markdoc/markdoc';
 import type { AstroInstance } from 'astro';
-type Render = AstroInstance['default'] | string;
+import { componentConfigSymbol } from './utils.js';
+export type Render = ComponentConfig | AstroInstance['default'] | string;
+export type ComponentConfig = {
+    type: 'package' | 'local';
+    path: string;
+    namedExport?: string;
+    [componentConfigSymbol]: true;
+};
 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>>>;
@@ -47,4 +54,4 @@ export declare const nodes: {
     node: {};
 };
 export declare function defineMarkdocConfig(config: AstroMarkdocConfig): AstroMarkdocConfig;
-export {};
+export declare function component(pathnameOrPkgName: string, namedExport?: string): ComponentConfig;

package/dist/config.js

@@ -1,12 +1,26 @@
+import { isRelativePath } from "@astrojs/internal-helpers/path";
 import _Markdoc from "@markdoc/markdoc";
 import { heading } from "./heading-ids.js";
+import { componentConfigSymbol } from "./utils.js";
 const Markdoc = _Markdoc;
 const nodes = { ...Markdoc.nodes, heading };
 function defineMarkdocConfig(config) {
   return config;
 }
+function component(pathnameOrPkgName, namedExport) {
+  return {
+    type: isNpmPackageName(pathnameOrPkgName) ? "package" : "local",
+    path: pathnameOrPkgName,
+    namedExport,
+    [componentConfigSymbol]: true
+  };
+}
+function isNpmPackageName(pathname) {
+  return !isRelativePath(pathname) && !pathname.startsWith("/");
+}
 export {
   Markdoc,
+  component,
   defineMarkdocConfig,
   nodes
 };

package/dist/content-entry-type.d.ts

@@ -0,0 +1,6 @@
+import type { AstroConfig, ContentEntryType } from 'astro';
+import type { MarkdocConfigResult } from './load-config.js';
+export declare function getContentEntryType({ markdocConfigResult, astroConfig, }: {
+    astroConfig: AstroConfig;
+    markdocConfigResult?: MarkdocConfigResult;
+}): Promise<ContentEntryType>;

package/dist/content-entry-type.js

@@ -0,0 +1,198 @@
+import Markdoc from "@markdoc/markdoc";
+import matter from "gray-matter";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { isComponentConfig, isValidUrl, MarkdocError, prependForwardSlash } from "./utils.js";
+import { emitESMImage } from "astro/assets";
+import path from "node:path";
+import { setupConfig } from "./runtime.js";
+async function getContentEntryType({
+  markdocConfigResult,
+  astroConfig
+}) {
+  return {
+    extensions: [".mdoc"],
+    getEntryInfo,
+    handlePropagation: true,
+    async getRenderModule({ contents, fileUrl, viteId }) {
+      var _a, _b;
+      const entry = getEntryInfo({ contents, fileUrl });
+      const tokens = markdocTokenizer.tokenize(entry.body);
+      const ast = Markdoc.parse(tokens);
+      const usedTags = getUsedTags(ast);
+      const userMarkdocConfig = (markdocConfigResult == null ? void 0 : markdocConfigResult.config) ?? {};
+      const markdocConfigUrl = markdocConfigResult == null ? void 0 : markdocConfigResult.fileUrl;
+      let componentConfigByTagMap = {};
+      for (const tag of usedTags) {
+        const render = (_b = (_a = userMarkdocConfig.tags) == null ? void 0 : _a[tag]) == null ? void 0 : _b.render;
+        if (isComponentConfig(render)) {
+          componentConfigByTagMap[tag] = render;
+        }
+      }
+      let componentConfigByNodeMap = {};
+      for (const [nodeType, schema] of Object.entries(userMarkdocConfig.nodes ?? {})) {
+        const render = schema == null ? void 0 : schema.render;
+        if (isComponentConfig(render)) {
+          componentConfigByNodeMap[nodeType] = render;
+        }
+      }
+      const pluginContext = this;
+      const markdocConfig = await setupConfig(userMarkdocConfig);
+      const filePath = fileURLToPath(fileUrl);
+      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,
+          // so we cannot validate them at build time.
+          e.error.id !== "variable-undefined" && (e.error.level === "error" || e.error.level === "critical")
+        );
+      });
+      if (validationErrors.length) {
+        const frontmatterBlockOffset = entry.rawData.split("\n").length + 2;
+        const rootRelativePath = path.relative(fileURLToPath(astroConfig.root), filePath);
+        throw new MarkdocError({
+          message: [
+            `**${String(rootRelativePath)}** contains invalid content:`,
+            ...validationErrors.map((e) => `- ${e.error.message}`)
+          ].join("\n"),
+          location: {
+            // Error overlay does not support multi-line or ranges.
+            // Just point to the first line.
+            line: frontmatterBlockOffset + validationErrors[0].lines[0],
+            file: viteId
+          }
+        });
+      }
+      if (astroConfig.experimental.assets) {
+        await emitOptimizedImages(ast.children, {
+          astroConfig,
+          pluginContext,
+          filePath
+        });
+      }
+      const res = `import { Renderer } from '@astrojs/markdoc/components';
+import { createGetHeadings, createContentComponent } from '@astrojs/markdoc/runtime';
+${markdocConfigUrl ? `import markdocConfig from ${JSON.stringify(markdocConfigUrl.pathname)};` : "const markdocConfig = {};"}${astroConfig.experimental.assets ? `
+import { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';
+markdocConfig.nodes = { ...experimentalAssetsConfig.nodes, ...markdocConfig.nodes };` : ""}
+
+${getStringifiedImports(componentConfigByTagMap, "Tag", astroConfig.root)}
+${getStringifiedImports(componentConfigByNodeMap, "Node", astroConfig.root)}
+
+const tagComponentMap = ${getStringifiedMap(componentConfigByTagMap, "Tag")};
+const nodeComponentMap = ${getStringifiedMap(componentConfigByNodeMap, "Node")};
+
+const stringifiedAst = ${JSON.stringify(
+        /* Double stringify to encode *as* stringified JSON */
+        JSON.stringify(ast)
+      )};
+
+export const getHeadings = createGetHeadings(stringifiedAst, markdocConfig);
+export const Content = createContentComponent(
+	Renderer,
+	stringifiedAst,
+	markdocConfig,
+	tagComponentMap,
+	nodeComponentMap,
+)`;
+      return { code: res };
+    },
+    contentModuleTypes: await fs.promises.readFile(
+      new URL("../template/content-module-types.d.ts", import.meta.url),
+      "utf-8"
+    )
+  };
+}
+const markdocTokenizer = new Markdoc.Tokenizer({
+  // Strip <!-- comments --> from rendered output
+  // Without this, they're rendered as strings!
+  allowComments: true
+});
+function getUsedTags(markdocAst) {
+  const tags = /* @__PURE__ */ new Set();
+  const validationErrors = Markdoc.validate(markdocAst);
+  for (const { error } of validationErrors) {
+    if (error.id === "tag-undefined") {
+      const [, tagName] = error.message.match(/Undefined tag: '(.*)'/) ?? [];
+      tags.add(tagName);
+    }
+  }
+  return tags;
+}
+function getEntryInfo({ fileUrl, contents }) {
+  const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
+  return {
+    data: parsed.data,
+    body: parsed.content,
+    slug: parsed.data.slug,
+    rawData: parsed.matter
+  };
+}
+async function emitOptimizedImages(nodeChildren, ctx) {
+  for (const node of nodeChildren) {
+    if (node.type === "image" && typeof node.attributes.src === "string" && shouldOptimizeImage(node.attributes.src)) {
+      const resolved = await ctx.pluginContext.resolve(node.attributes.src, ctx.filePath);
+      if ((resolved == null ? void 0 : resolved.id) && fs.existsSync(new URL(prependForwardSlash(resolved.id), "file://"))) {
+        const src = await emitESMImage(
+          resolved.id,
+          ctx.pluginContext.meta.watchMode,
+          ctx.pluginContext.emitFile,
+          { config: ctx.astroConfig }
+        );
+        node.attributes.__optimizedSrc = src;
+      } else {
+        throw new MarkdocError({
+          message: `Could not resolve image ${JSON.stringify(
+            node.attributes.src
+          )} from ${JSON.stringify(ctx.filePath)}. Does the file exist?`
+        });
+      }
+    }
+    await emitOptimizedImages(node.children, ctx);
+  }
+}
+function shouldOptimizeImage(src) {
+  return !isValidUrl(src) && !src.startsWith("/");
+}
+function getStringifiedImports(componentConfigMap, componentNamePrefix, root) {
+  let stringifiedComponentImports = "";
+  for (const [key, config] of Object.entries(componentConfigMap)) {
+    const importName = config.namedExport ? `{ ${config.namedExport} as ${componentNamePrefix + key} }` : componentNamePrefix + key;
+    const resolvedPath = config.type === "local" ? new URL(config.path, root).pathname : config.path;
+    stringifiedComponentImports += `import ${importName} from ${JSON.stringify(resolvedPath)};
+`;
+  }
+  return stringifiedComponentImports;
+}
+function getStringifiedMap(componentConfigMap, componentNamePrefix) {
+  let stringifiedComponentMap = "{";
+  for (const key in componentConfigMap) {
+    stringifiedComponentMap += `${key}: ${componentNamePrefix + key},
+`;
+  }
+  stringifiedComponentMap += "}";
+  return stringifiedComponentMap;
+}
+function parseFrontmatter(fileContents, filePath) {
+  try {
+    matter.clearCache();
+    return matter(fileContents);
+  } catch (e) {
+    if (e.name === "YAMLException") {
+      const err = e;
+      err.id = filePath;
+      err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
+      err.message = e.reason;
+      throw err;
+    } else {
+      throw e;
+    }
+  }
+}
+export {
+  getContentEntryType
+};

package/dist/index.js

@@ -1,26 +1,9 @@
-import Markdoc from "@markdoc/markdoc";
-import crypto from "node:crypto";
-import fs from "node:fs";
-import { fileURLToPath, pathToFileURL } from "node:url";
+import { bold, red } from "kleur/colors";
+import { getContentEntryType } from "./content-entry-type.js";
 import {
-  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
-});
+  loadMarkdocConfig,
+  SUPPORTED_MARKDOC_CONFIG_FILES
+} from "./load-config.js";
 function markdocIntegration(legacyConfig) {
   if (legacyConfig) {
     console.log(
@@ -31,224 +14,33 @@ function markdocIntegration(legacyConfig) {
     process.exit(0);
   }
   let markdocConfigResult;
-  let markdocConfigResultId = "";
+  let astroConfig;
   return {
     name: "@astrojs/markdoc",
     hooks: {
       "astro:config:setup": async (params) => {
-        const {
-          config: astroConfig,
-          updateConfig,
-          addContentEntryType
-        } = params;
+        const { updateConfig, addContentEntryType } = params;
+        astroConfig = params.config;
         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));
-          return {
-            data: parsed.data,
-            body: parsed.content,
-            slug: parsed.data.slug,
-            rawData: parsed.matter
-          };
-        }
-        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 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,
-              /* 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,
-                // so we cannot validate them at build time.
-                e.error.id !== "variable-undefined" && (e.error.level === "error" || e.error.level === "critical")
-              );
-            });
-            if (validationErrors.length) {
-              const frontmatterBlockOffset = entry.rawData.split("\n").length + 2;
-              const rootRelativePath = path.relative(fileURLToPath(astroConfig.root), filePath);
-              throw new MarkdocError({
-                message: [
-                  `**${String(rootRelativePath)}** contains invalid content:`,
-                  ...validationErrors.map((e) => `- ${e.error.message}`)
-                ].join("\n"),
-                location: {
-                  // Error overlay does not support multi-line or ranges.
-                  // Just point to the first line.
-                  line: frontmatterBlockOffset + validationErrors[0].lines[0],
-                  file: viteId
-                }
-              });
-            }
-            if (astroConfig.experimental.assets) {
-              await emitOptimizedImages(ast.children, {
-                astroConfig,
-                pluginContext,
-                filePath
-              });
-            }
-            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';
-${markdocConfigResult ? `import _userConfig from ${JSON.stringify(
-              markdocConfigResultId
-            )};
-const userConfig = _userConfig ?? {};` : "const userConfig = {};"}${astroConfig.experimental.assets ? `
-import { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';
-userConfig.nodes = { ...experimentalAssetsConfig.nodes, ...userConfig.nodes };` : ""}
-const stringifiedAst = ${JSON.stringify(
-              /* Double stringify to encode *as* stringified JSON */
-              JSON.stringify(ast)
-            )};
-export function getHeadings() {
-	${/* Yes, we are transforming twice (once from `getHeadings()` and again from <Content /> in case of variables).
-            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. */
-            ""}
-	const headingConfig = userConfig.nodes?.heading;
-	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 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(
-            new URL("../template/content-module-types.d.ts", import.meta.url),
-            "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]);
-                }
-              }
-            }
-          };
-        }
+        addContentEntryType(await getContentEntryType({ markdocConfigResult, astroConfig }));
         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
-                    });
-                  }
-                }
-              }
-            ]
+            ssr: {
+              external: ["@astrojs/markdoc/prism", "@astrojs/markdoc/shiki"]
+            }
           }
         });
       },
       "astro:server:setup": async ({ server }) => {
         server.watcher.on("all", (event, entry) => {
-          if (prependForwardSlash(pathToFileURL(entry).pathname) === markdocConfigResultId) {
-            console.log(
-              yellow(
-                `${bold("[Markdoc]")} Restart the dev server for config changes to take effect.`
-              )
-            );
+          if (SUPPORTED_MARKDOC_CONFIG_FILES.some((f) => entry.endsWith(f))) {
+            server.restart();
           }
         });
       }
     }
   };
 }
-async function emitOptimizedImages(nodeChildren, ctx) {
-  for (const node of nodeChildren) {
-    if (node.type === "image" && typeof node.attributes.src === "string" && shouldOptimizeImage(node.attributes.src)) {
-      const resolved = await ctx.pluginContext.resolve(node.attributes.src, ctx.filePath);
-      if ((resolved == null ? void 0 : resolved.id) && fs.existsSync(new URL(prependForwardSlash(resolved.id), "file://"))) {
-        const src = await emitESMImage(
-          resolved.id,
-          ctx.pluginContext.meta.watchMode,
-          ctx.pluginContext.emitFile,
-          { config: ctx.astroConfig }
-        );
-        node.attributes.__optimizedSrc = src;
-      } else {
-        throw new MarkdocError({
-          message: `Could not resolve image ${JSON.stringify(
-            node.attributes.src
-          )} from ${JSON.stringify(ctx.filePath)}. Does the file exist?`
-        });
-      }
-    }
-    await emitOptimizedImages(node.children, ctx);
-  }
-}
-function shouldOptimizeImage(src) {
-  return !isValidUrl(src) && !src.startsWith("/");
-}
-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 {
   markdocIntegration as default
 };

package/dist/load-config.d.ts

@@ -1,5 +1,6 @@
 import type { AstroConfig } from 'astro';
 import type { AstroMarkdocConfig } from './config.js';
+export declare const SUPPORTED_MARKDOC_CONFIG_FILES: string[];
 export type MarkdocConfigResult = {
     config: AstroMarkdocConfig;
     fileUrl: URL;

package/dist/load-config.js

@@ -1,6 +1,7 @@
 import { build as esbuild } from "esbuild";
 import * as fs from "node:fs";
 import { fileURLToPath } from "node:url";
+import { MarkdocError } from "./utils.js";
 const SUPPORTED_MARKDOC_CONFIG_FILES = [
   "markdoc.config.js",
   "markdoc.config.mjs",
@@ -18,7 +19,7 @@ async function loadMarkdocConfig(astroConfig) {
   }
   if (!markdocConfigUrl)
     return;
-  const { code, dependencies } = await bundleConfigFile({
+  const { code } = await bundleConfigFile({
     markdocConfigUrl,
     astroConfig
   });
@@ -32,6 +33,7 @@ async function bundleConfigFile({
   markdocConfigUrl,
   astroConfig
 }) {
+  let markdocError;
   const result = await esbuild({
     absWorkingDir: fileURLToPath(astroConfig.root),
     entryPoints: [fileURLToPath(markdocConfigUrl)],
@@ -49,8 +51,12 @@ async function bundleConfigFile({
         name: "stub-astro-imports",
         setup(build) {
           build.onResolve({ filter: /.*\.astro$/ }, () => {
+            markdocError = new MarkdocError({
+              message: "`.astro` files are no longer supported in the Markdoc config.",
+              hint: "Use the `component()` utility to specify a component path instead."
+            });
             return {
-              // Stub with an unused default export
+              // Stub with an unused default export.
               path: "data:text/javascript,export default true",
               external: true
             };
@@ -59,6 +65,8 @@ async function bundleConfigFile({
       }
     ]
   });
+  if (markdocError)
+    throw markdocError;
   const { text } = result.outputFiles[0];
   return {
     code: text,
@@ -78,5 +86,6 @@ async function loadConfigFromBundledFile(root, code) {
   }
 }
 export {
+  SUPPORTED_MARKDOC_CONFIG_FILES,
   loadMarkdocConfig
 };

package/dist/runtime.d.ts

@@ -1,16 +1,19 @@
 import type { MarkdownHeading } from '@astrojs/markdown-remark';
-import { type RenderableTreeNode } from '@markdoc/markdoc';
+import { type NodeType, type RenderableTreeNode } from '@markdoc/markdoc';
+import type { AstroInstance } 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';
 /**
  * Merge user config with default config and set up context (ex. heading ID slugger)
  * Called on each file's individual transform.
  * TODO: virtual module to merge configs per-build instead of per-file?
  */
-export declare function setupConfig(userConfig: AstroMarkdocConfig): Promise<Omit<AstroMarkdocConfig, 'extends'>>;
+export declare function setupConfig(userConfig?: AstroMarkdocConfig): Promise<MergedConfig>;
 /** Used for synchronous `getHeadings()` function */
-export declare function setupConfigSync(userConfig: AstroMarkdocConfig): Omit<AstroMarkdocConfig, 'extends'>;
+export declare function setupConfigSync(userConfig?: AstroMarkdocConfig): MergedConfig;
+type MergedConfig = Required<Omit<AstroMarkdocConfig, 'extends'>>;
+/** Merge function from `@markdoc/markdoc` internals */
+export declare function mergeConfig(configA: AstroMarkdocConfig, configB: AstroMarkdocConfig): MergedConfig;
+export declare function resolveComponentImports(markdocConfig: Required<Pick<AstroMarkdocConfig, 'tags' | 'nodes'>>, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): Required<Pick<AstroMarkdocConfig, "tags" | "nodes">>;
 /**
  * Get text content as a string from a Markdoc transform AST
  */
@@ -19,4 +22,7 @@ export declare function getTextContent(childNodes: RenderableTreeNode[]): string
  * Collect headings from Markdoc transform AST
  * for `headings` result on `render()` return value
  */
-export declare function collectHeadings(children: RenderableTreeNode[]): MarkdownHeading[];
+export declare function collectHeadings(children: RenderableTreeNode[], collectedHeadings: MarkdownHeading[]): void;
+export declare function createGetHeadings(stringifiedAst: string, userConfig: AstroMarkdocConfig): () => MarkdownHeading[];
+export declare function createContentComponent(Renderer: AstroInstance['default'], stringifiedAst: string, userConfig: AstroMarkdocConfig, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): any;
+export {};

package/dist/runtime.js

@@ -1,7 +1,7 @@
 import Markdoc from "@markdoc/markdoc";
+import { createComponent, renderComponent } from "astro/runtime/server/index.js";
 import { setupHeadingConfig } from "./heading-ids.js";
-import { default as default2 } from "@markdoc/markdoc";
-async function setupConfig(userConfig) {
+async function setupConfig(userConfig = {}) {
   let defaultConfig = setupHeadingConfig();
   if (userConfig.extends) {
     for (let extension of userConfig.extends) {
@@ -13,7 +13,7 @@ async function setupConfig(userConfig) {
   }
   return mergeConfig(defaultConfig, userConfig);
 }
-function setupConfigSync(userConfig) {
+function setupConfigSync(userConfig = {}) {
   const defaultConfig = setupHeadingConfig();
   return mergeConfig(defaultConfig, userConfig);
 }
@@ -40,9 +40,30 @@ function mergeConfig(configA, configB) {
     variables: {
       ...configA.variables,
       ...configB.variables
+    },
+    partials: {
+      ...configA.partials,
+      ...configB.partials
+    },
+    validation: {
+      ...configA.validation,
+      ...configB.validation
     }
   };
 }
+function resolveComponentImports(markdocConfig, tagComponentMap, nodeComponentMap) {
+  for (const [tag, render] of Object.entries(tagComponentMap)) {
+    const config = markdocConfig.tags[tag];
+    if (config)
+      config.render = render;
+  }
+  for (const [node, render] of Object.entries(nodeComponentMap)) {
+    const config = markdocConfig.nodes[node];
+    if (config)
+      config.render = render;
+  }
+  return markdocConfig;
+}
 function getTextContent(childNodes) {
   let text = "";
   for (const node of childNodes) {
@@ -55,8 +76,7 @@ function getTextContent(childNodes) {
   return text;
 }
 const headingLevels = [1, 2, 3, 4, 5, 6];
-function collectHeadings(children) {
-  let collectedHeadings = [];
+function collectHeadings(children, collectedHeadings) {
   for (const node of children) {
     if (typeof node !== "object" || !Markdoc.Tag.isTag(node))
       continue;
@@ -77,14 +97,40 @@ function collectHeadings(children) {
         });
       }
     }
-    collectedHeadings.concat(collectHeadings(node.children));
+    collectHeadings(node.children, collectedHeadings);
   }
-  return collectedHeadings;
+}
+function createGetHeadings(stringifiedAst, userConfig) {
+  return function getHeadings() {
+    const config = setupConfigSync(userConfig);
+    const ast = Markdoc.Ast.fromJSON(stringifiedAst);
+    const content = Markdoc.transform(ast, config);
+    let collectedHeadings = [];
+    collectHeadings(Array.isArray(content) ? content : [content], collectedHeadings);
+    return collectedHeadings;
+  };
+}
+function createContentComponent(Renderer, stringifiedAst, userConfig, tagComponentMap, nodeComponentMap) {
+  return createComponent({
+    async factory(result, props) {
+      const withVariables = mergeConfig(userConfig, { variables: props });
+      const config = resolveComponentImports(
+        await setupConfig(withVariables),
+        tagComponentMap,
+        nodeComponentMap
+      );
+      return renderComponent(result, Renderer.name, Renderer, { stringifiedAst, config }, {});
+    },
+    propagation: "self"
+  });
 }
 export {
-  default2 as Markdoc,
   collectHeadings,
+  createContentComponent,
+  createGetHeadings,
   getTextContent,
+  mergeConfig,
+  resolveComponentImports,
   setupConfig,
   setupConfigSync
 };

package/dist/utils.d.ts

@@ -1,15 +1,9 @@
-import matter from 'gray-matter';
-/**
- * Match YAML exception handling from Astro core errors
- * @see 'astro/src/core/errors.ts'
- */
-export declare function parseFrontmatter(fileContents: string, filePath: string): matter.GrayMatterFile<string>;
+import type { ComponentConfig } from './config.js';
 /**
  * Matches AstroError object with types like error codes stubbed out
  * @see 'astro/src/core/errors/errors.ts'
  */
 export declare class MarkdocError extends Error {
-    errorCode: number;
     loc: ErrorLocation | undefined;
     title: string | undefined;
     hint: string | undefined;
@@ -46,4 +40,7 @@ export declare const PROPAGATED_ASSET_FLAG = "astroPropagatedAssets";
  * @see 'packages/astro/src/content/utils.ts'
  */
 export declare function hasContentFlag(viteId: string, flag: string): boolean;
+/** Identifier for components imports passed as `tags` or `nodes` configuration. */
+export declare const componentConfigSymbol: unique symbol;
+export declare function isComponentConfig(value: unknown): value is ComponentConfig;
 export {};

package/dist/utils.js

@@ -1,37 +1,8 @@
-import matter from "gray-matter";
-function parseFrontmatter(fileContents, filePath) {
-  try {
-    matter.clearCache();
-    return matter(fileContents);
-  } catch (e) {
-    if (e.name === "YAMLException") {
-      const err = e;
-      err.id = filePath;
-      err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
-      err.message = e.reason;
-      throw err;
-    } else {
-      throw e;
-    }
-  }
-}
 class MarkdocError extends Error {
   constructor(props, ...params) {
     super(...params);
     this.type = "MarkdocError";
-    const {
-      // Use default code for unknown errors in Astro core
-      // We don't have a best practice for integration error codes yet
-      code = 99999,
-      name,
-      title = "MarkdocError",
-      message,
-      stack,
-      location,
-      hint,
-      frame
-    } = props;
-    this.errorCode = code;
+    const { title = "MarkdocError", message, stack, location, hint, frame } = props;
     this.title = title;
     if (message)
       this.message = message;
@@ -57,11 +28,16 @@ function hasContentFlag(viteId, flag) {
   const flags = new URLSearchParams(viteId.split("?")[1] ?? "");
   return flags.has(flag);
 }
+const componentConfigSymbol = Symbol.for("@astrojs/markdoc/component-config");
+function isComponentConfig(value) {
+  return typeof value === "object" && value !== null && componentConfigSymbol in value;
+}
 export {
   MarkdocError,
   PROPAGATED_ASSET_FLAG,
+  componentConfigSymbol,
   hasContentFlag,
+  isComponentConfig,
   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.3",
+  "version": "0.4.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -56,9 +56,10 @@
     "template"
   ],
   "dependencies": {
+    "@astrojs/internal-helpers": "^0.1.0",
     "@astrojs/prism": "^2.1.2",
     "@markdoc/markdoc": "^0.3.0",
-    "esbuild": "^0.17.12",
+    "esbuild": "^0.17.19",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "kleur": "^4.1.5",
@@ -66,20 +67,20 @@
     "zod": "^3.17.3"
   },
   "peerDependencies": {
-    "astro": "^2.6.3"
+    "astro": "^2.8.0"
   },
   "devDependencies": {
     "@astrojs/markdown-remark": "^2.2.1",
-    "@types/chai": "^4.3.1",
+    "@types/chai": "^4.3.5",
     "@types/html-escaper": "^3.0.0",
     "@types/mocha": "^9.1.1",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
     "devalue": "^4.3.2",
-    "linkedom": "^0.14.12",
+    "linkedom": "^0.14.26",
     "mocha": "^9.2.2",
-    "rollup": "^3.20.1",
-    "vite": "^4.3.1",
-    "astro": "2.6.3",
+    "rollup": "^3.25.1",
+    "vite": "^4.3.9",
+    "astro": "2.8.0",
     "astro-scripts": "0.0.14"
   },
   "engines": {