@astrojs/markdoc 0.0.5 → 0.1.0

package/dist/index.js

@@ -1,29 +1,27 @@
 import Markdoc from "@markdoc/markdoc";
 import fs from "node:fs";
 import { fileURLToPath } from "node:url";
-import {
-  getAstroConfigPath,
-  isValidUrl,
-  MarkdocError,
-  parseFrontmatter,
-  prependForwardSlash
-} from "./utils.js";
+import { isValidUrl, MarkdocError, parseFrontmatter, prependForwardSlash } from "./utils.js";
 import { emitESMImage } from "astro/assets";
-function markdocIntegration(userMarkdocConfig = {}) {
+import { bold, red } from "kleur/colors";
+import { applyDefaultConfig } from "./default-config.js";
+import { loadMarkdocConfig } from "./load-config.js";
+function markdocIntegration(legacyConfig) {
+  if (legacyConfig) {
+    console.log(
+      `${red(
+        bold("[Markdoc]")
+      )} Passing Markdoc config from your \`astro.config\` is no longer supported. Configuration should be exported from a \`markdoc.config.mjs\` file. See the configuration docs for more: https://docs.astro.build/en/guides/integrations-guide/markdoc/#configuration`
+    );
+    process.exit(0);
+  }
   return {
     name: "@astrojs/markdoc",
     hooks: {
       "astro:config:setup": async (params) => {
-        const {
-          updateConfig,
-          config: astroConfig,
-          addContentEntryType
-        } = params;
-        updateConfig({
-          vite: {
-            plugins: [safeAssetsVirtualModulePlugin({ astroConfig })]
-          }
-        });
+        const { config: astroConfig, addContentEntryType } = params;
+        const configLoadResult = await loadMarkdocConfig(astroConfig);
+        const userMarkdocConfig = (configLoadResult == null ? void 0 : configLoadResult.config) ?? {};
         function getEntryInfo({ fileUrl, contents }) {
           const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
           return {
@@ -36,49 +34,45 @@ function markdocIntegration(userMarkdocConfig = {}) {
         addContentEntryType({
           extensions: [".mdoc"],
           getEntryInfo,
-          async getRenderModule({ entry }) {
-            var _a;
-            validateRenderProperties(userMarkdocConfig, astroConfig);
+          async getRenderModule({ entry, viteId }) {
             const ast = Markdoc.parse(entry.body);
             const pluginContext = this;
-            const markdocConfig = {
-              ...userMarkdocConfig,
-              variables: {
-                ...userMarkdocConfig.variables,
-                entry
-              }
-            };
-            if ((_a = astroConfig.experimental) == null ? void 0 : _a.assets) {
+            const markdocConfig = applyDefaultConfig(userMarkdocConfig, { entry });
+            const validationErrors = Markdoc.validate(ast, markdocConfig).filter((e) => {
+              return e.error.id !== "variable-undefined";
+            });
+            if (validationErrors.length) {
+              throw new MarkdocError({
+                message: [
+                  `**${String(entry.collection)} \u2192 ${String(entry.id)}** failed to validate:`,
+                  ...validationErrors.map((e) => e.error.id)
+                ].join("\n")
+              });
+            }
+            if (astroConfig.experimental.assets) {
               await emitOptimizedImages(ast.children, {
                 astroConfig,
                 pluginContext,
                 filePath: entry._internal.filePath
               });
-              markdocConfig.nodes ??= {};
-              markdocConfig.nodes.image = {
-                ...Markdoc.nodes.image,
-                transform(node, config) {
-                  const attributes = node.transformAttributes(config);
-                  const children = node.transformChildren(config);
-                  if (node.type === "image" && "__optimizedSrc" in node.attributes) {
-                    const { __optimizedSrc, ...rest } = node.attributes;
-                    return new Markdoc.Tag("Image", { ...rest, src: __optimizedSrc }, children);
-                  } else {
-                    return new Markdoc.Tag("img", attributes, children);
-                  }
-                }
-              };
             }
-            const content = Markdoc.transform(ast, markdocConfig);
-            return {
+            const code = {
               code: `import { jsx as h } from 'astro/jsx-runtime';
+import { applyDefaultConfig } from '@astrojs/markdoc/default-config';
 import { Renderer } from '@astrojs/markdoc/components';
-const transformedContent = ${JSON.stringify(
-                content
+import * as entry from ${JSON.stringify(viteId + "?astroContent")};${configLoadResult ? `
+import userConfig from ${JSON.stringify(configLoadResult.fileUrl.pathname)};` : ""}${astroConfig.experimental.assets ? `
+import { experimentalAssetsConfig } from '@astrojs/markdoc/experimental-assets-config';` : ""}
+const stringifiedAst = ${JSON.stringify(
+                /* Double stringify to encode *as* stringified JSON */
+                JSON.stringify(ast)
               )};
-export async function Content ({ components }) { return h(Renderer, { content: transformedContent, components }); }
-Content[Symbol.for('astro.needsHeadRendering')] = true;`
+export async function Content (props) {
+	const config = applyDefaultConfig(${configLoadResult ? "{ ...userConfig, variables: { ...userConfig.variables, ...props } }" : "{ variables: props }"}, { entry });${astroConfig.experimental.assets ? `
+config.nodes = { ...experimentalAssetsConfig.nodes, ...config.nodes };` : ""}
+	return h(Renderer, { stringifiedAst, config }); };`
             };
+            return code;
           },
           contentModuleTypes: await fs.promises.readFile(
             new URL("../template/content-module-types.d.ts", import.meta.url),
@@ -115,69 +109,6 @@ async function emitOptimizedImages(nodeChildren, ctx) {
 function shouldOptimizeImage(src) {
   return !isValidUrl(src) && !src.startsWith("/");
 }
-function validateRenderProperties(markdocConfig, astroConfig) {
-  const tags = markdocConfig.tags ?? {};
-  const nodes = markdocConfig.nodes ?? {};
-  for (const [name, config] of Object.entries(tags)) {
-    validateRenderProperty({ type: "tag", name, config, astroConfig });
-  }
-  for (const [name, config] of Object.entries(nodes)) {
-    validateRenderProperty({ type: "node", name, config, astroConfig });
-  }
-}
-function validateRenderProperty({
-  name,
-  config,
-  type,
-  astroConfig
-}) {
-  if (typeof config.render === "string" && config.render.length === 0) {
-    throw new Error(
-      `Invalid ${type} configuration: ${JSON.stringify(
-        name
-      )}. The "render" property cannot be an empty string.`
-    );
-  }
-  if (typeof config.render === "string" && !isCapitalized(config.render)) {
-    const astroConfigPath = getAstroConfigPath(fs, fileURLToPath(astroConfig.root));
-    throw new MarkdocError({
-      message: `Invalid ${type} configuration: ${JSON.stringify(
-        name
-      )}. The "render" property must reference a capitalized component name.`,
-      hint: "If you want to render to an HTML element, see our docs on rendering Markdoc manually: https://docs.astro.build/en/guides/integrations-guide/markdoc/#render-markdoc-nodes--html-elements-as-astro-components",
-      location: astroConfigPath ? {
-        file: astroConfigPath
-      } : void 0
-    });
-  }
-}
-function isCapitalized(str) {
-  return str.length > 0 && str[0] === str[0].toUpperCase();
-}
-function safeAssetsVirtualModulePlugin({
-  astroConfig
-}) {
-  const virtualModuleId = "astro:markdoc-assets";
-  const resolvedVirtualModuleId = "\0" + virtualModuleId;
-  return {
-    name: "astro:markdoc-safe-assets-virtual-module",
-    resolveId(id) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
-    },
-    load(id) {
-      var _a;
-      if (id !== resolvedVirtualModuleId)
-        return;
-      if ((_a = astroConfig.experimental) == null ? void 0 : _a.assets) {
-        return `export { Image } from 'astro:assets';`;
-      } else {
-        return `export const Image = () => { throw new Error('Cannot use the Image component without the \`experimental.assets\` flag.'); }`;
-      }
-    }
-  };
-}
 export {
   markdocIntegration as default
 };

package/dist/load-config.d.ts

@@ -0,0 +1,14 @@
+import type { AstroConfig } from 'astro';
+export declare function loadMarkdocConfig(astroConfig: Pick<AstroConfig, 'root'>): Promise<{
+    config: Readonly<Partial<{
+        nodes: Partial<Record<import("@markdoc/markdoc").NodeType, import("@markdoc/markdoc").Schema<Readonly<Partial<any>>, string>>>;
+        tags: Record<string, import("@markdoc/markdoc").Schema<Readonly<Partial<any>>, string>>;
+        variables: Record<string, any>;
+        functions: Record<string, import("@markdoc/markdoc").ConfigFunction>;
+        partials: Record<string, any>;
+        validation?: {
+            validateFunctions?: boolean | undefined;
+        } | undefined;
+    }>>;
+    fileUrl: URL;
+} | undefined>;

package/dist/load-config.js

@@ -0,0 +1,82 @@
+import { build as esbuild } from "esbuild";
+import * as fs from "node:fs";
+import { fileURLToPath } from "node:url";
+const SUPPORTED_MARKDOC_CONFIG_FILES = [
+  "markdoc.config.js",
+  "markdoc.config.mjs",
+  "markdoc.config.mts",
+  "markdoc.config.ts"
+];
+async function loadMarkdocConfig(astroConfig) {
+  let markdocConfigUrl;
+  for (const filename of SUPPORTED_MARKDOC_CONFIG_FILES) {
+    const filePath = new URL(filename, astroConfig.root);
+    if (!fs.existsSync(filePath))
+      continue;
+    markdocConfigUrl = filePath;
+    break;
+  }
+  if (!markdocConfigUrl)
+    return;
+  const { code, dependencies } = await bundleConfigFile({
+    markdocConfigUrl,
+    astroConfig
+  });
+  const config = await loadConfigFromBundledFile(astroConfig.root, code);
+  return {
+    config,
+    fileUrl: markdocConfigUrl
+  };
+}
+async function bundleConfigFile({
+  markdocConfigUrl,
+  astroConfig
+}) {
+  const result = await esbuild({
+    absWorkingDir: fileURLToPath(astroConfig.root),
+    entryPoints: [fileURLToPath(markdocConfigUrl)],
+    outfile: "out.js",
+    write: false,
+    target: ["node16"],
+    platform: "node",
+    packages: "external",
+    bundle: true,
+    format: "esm",
+    sourcemap: "inline",
+    metafile: true,
+    plugins: [
+      {
+        name: "stub-astro-imports",
+        setup(build) {
+          build.onResolve({ filter: /.*\.astro$/ }, () => {
+            return {
+              // Stub with an unused default export
+              path: "data:text/javascript,export default true",
+              external: true
+            };
+          });
+        }
+      }
+    ]
+  });
+  const { text } = result.outputFiles[0];
+  return {
+    code: text,
+    dependencies: result.metafile ? Object.keys(result.metafile.inputs) : []
+  };
+}
+async function loadConfigFromBundledFile(root, code) {
+  const tmpFileUrl = new URL(`markdoc.config.timestamp-${Date.now()}.mjs`, root);
+  fs.writeFileSync(tmpFileUrl, code);
+  try {
+    return (await import(tmpFileUrl.pathname)).default;
+  } finally {
+    try {
+      fs.unlinkSync(tmpFileUrl);
+    } catch {
+    }
+  }
+}
+export {
+  loadMarkdocConfig
+};

package/dist/utils.d.ts

@@ -1,7 +1,4 @@
-/// <reference types="node" />
-import type { AstroInstance } from 'astro';
 import matter from 'gray-matter';
-import type fsMod from 'node:fs';
 /**
  * Match YAML exception handling from Astro core errors
  * @see 'astro/src/core/errors.ts'
@@ -35,17 +32,9 @@ interface ErrorProperties {
     stack?: string;
     frame?: string;
 }
-/**
- * Matches `search` function used for resolving `astro.config` files.
- * Used by Markdoc for error handling.
- * @see 'astro/src/core/config/config.ts'
- */
-export declare function getAstroConfigPath(fs: typeof fsMod, root: string): string | undefined;
 /**
  * @see 'astro/src/core/path.ts'
  */
 export declare function prependForwardSlash(str: string): string;
-export declare function validateComponentsProp(components: Record<string, AstroInstance['default']>): void;
-export declare function isCapitalized(str: string): boolean;
 export declare function isValidUrl(str: string): boolean;
 export {};

package/dist/utils.js

@@ -1,6 +1,4 @@
-import z from "astro/zod";
 import matter from "gray-matter";
-import path from "node:path";
 function parseFrontmatter(fileContents, filePath) {
   try {
     matter.clearCache();
@@ -43,47 +41,9 @@ class MarkdocError extends Error {
     this.frame = frame;
   }
 }
-function getAstroConfigPath(fs, root) {
-  const paths = [
-    "astro.config.mjs",
-    "astro.config.js",
-    "astro.config.ts",
-    "astro.config.mts",
-    "astro.config.cjs",
-    "astro.config.cts"
-  ].map((p) => path.join(root, p));
-  for (const file of paths) {
-    if (fs.existsSync(file)) {
-      return file;
-    }
-  }
-}
 function prependForwardSlash(str) {
   return str[0] === "/" ? str : "/" + str;
 }
-function validateComponentsProp(components) {
-  try {
-    componentsPropValidator.parse(components);
-  } catch (e) {
-    throw new MarkdocError({
-      message: e instanceof z.ZodError ? e.issues[0].message : "Invalid `components` prop. Ensure you are passing an object of components to <Content />"
-    });
-  }
-}
-const componentsPropValidator = z.record(
-  z.string().min(1, "Invalid `components` prop. Component names cannot be empty!").refine(
-    (value) => isCapitalized(value),
-    (value) => ({
-      message: `Invalid \`components\` prop: ${JSON.stringify(
-        value
-      )}. Component name must be capitalized. If you want to render HTML elements as components, try using a Markdoc node (https://docs.astro.build/en/guides/integrations-guide/markdoc/#render-markdoc-nodes--html-elements-as-astro-components)`
-    })
-  ),
-  z.any()
-);
-function isCapitalized(str) {
-  return str.length > 0 && str[0] === str[0].toUpperCase();
-}
 function isValidUrl(str) {
   try {
     new URL(str);
@@ -94,10 +54,7 @@ function isValidUrl(str) {
 }
 export {
   MarkdocError,
-  getAstroConfigPath,
-  isCapitalized,
   isValidUrl,
   parseFrontmatter,
-  prependForwardSlash,
-  validateComponentsProp
+  prependForwardSlash
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc pages in your Astro site",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -21,21 +21,26 @@
   "exports": {
     ".": "./dist/index.js",
     "./components": "./components/index.ts",
+    "./default-config": "./dist/default-config.js",
+    "./config": "./dist/config.js",
+    "./experimental-assets-config": "./dist/experimental-assets-config.js",
     "./package.json": "./package.json"
   },
   "dependencies": {
     "@markdoc/markdoc": "^0.2.2",
+    "esbuild": "^0.17.12",
     "gray-matter": "^4.0.3",
+    "kleur": "^4.1.5",
     "zod": "^3.17.3"
   },
   "peerDependencies": {
-    "astro": "2.1.7"
+    "astro": "^2.1.8"
   },
   "devDependencies": {
-    "astro": "2.1.7",
     "@types/chai": "^4.3.1",
     "@types/html-escaper": "^3.0.0",
     "@types/mocha": "^9.1.1",
+    "astro": "2.1.8",
     "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
     "devalue": "^4.2.0",

package/src/config.ts

@@ -0,0 +1,5 @@
+import type { ConfigType as MarkdocConfig } from '@markdoc/markdoc';
+
+export function defineMarkdocConfig(config: MarkdocConfig): MarkdocConfig {
+	return config;
+}

package/src/default-config.ts

@@ -0,0 +1,18 @@
+import type { ConfigType as MarkdocConfig } from '@markdoc/markdoc';
+import type { ContentEntryModule } from 'astro';
+
+export function applyDefaultConfig(
+	config: MarkdocConfig,
+	ctx: {
+		entry: ContentEntryModule;
+	}
+): MarkdocConfig {
+	return {
+		...config,
+		variables: {
+			entry: ctx.entry,
+			...config.variables,
+		},
+		// TODO: heading ID calculation, Shiki syntax highlighting
+	};
+}

package/src/experimental-assets-config.ts

@@ -0,0 +1,29 @@
+import type { Config as MarkdocConfig } from '@markdoc/markdoc';
+import Markdoc from '@markdoc/markdoc';
+//@ts-expect-error Cannot find module 'astro:assets' or its corresponding type declarations.
+import { Image } from 'astro:assets';
+
+// Separate module to only import `astro:assets` when
+// `experimental.assets` flag is set in a project.
+// TODO: merge with `./default-config.ts` when `experimental.assets` is baselined.
+export const experimentalAssetsConfig: MarkdocConfig = {
+	nodes: {
+		image: {
+			attributes: {
+				...Markdoc.nodes.image.attributes,
+				__optimizedSrc: { type: 'Object' },
+			},
+			transform(node, config) {
+				const attributes = node.transformAttributes(config);
+				const children = node.transformChildren(config);
+
+				if (node.type === 'image' && '__optimizedSrc' in node.attributes) {
+					const { __optimizedSrc, ...rest } = node.attributes;
+					return new Markdoc.Tag(Image, { ...rest, src: __optimizedSrc }, children);
+				} else {
+					return new Markdoc.Tag('img', attributes, children);
+				}
+			},
+		},
+	},
+};