@astrojs/markdoc 0.4.0 → 0.4.2

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';
 
@@ -106,13 +105,12 @@ This example renders an `Aside` component, and allows a `type` prop to be passed
 
 ```js
 // markdoc.config.mjs
-import { defineMarkdocConfig } from '@astrojs/markdoc/config';
-import Aside from './src/components/Aside.astro';
+import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
   tags: {
     aside: {
-      render: Aside,
+      render: component('./src/components/Aside.astro'),
       attributes: {
         // Markdoc requires type defs for each attribute.
         // These should mirror the `Props` type of the component
@@ -138,6 +136,31 @@ Use tags like this fancy "aside" to add some _flair_ to your docs.
 {% /aside %}
 ```
 
+### Use Astro components from npm packages and TypeScript files
+
+You may need to use Astro components exposed as named exports from TypeScript or JavaScript files. This is common when using npm packages and design systems.
+
+You can pass the import name as the second argument to the `component()` function:
+
+```js
+// markdoc.config.mjs
+import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
+
+export default defineMarkdocConfig({
+  tags: {
+    tabs: {
+      render: component('@astrojs/starlight/components', 'Tabs'),
+    },
+  },
+});
+```
+
+This generates the following import statement internally:
+
+```ts
+import { Tabs } from '@astrojs/starlight/components';
+```
+
 ### Custom headings
 
 `@astrojs/markdoc` automatically adds anchor links to your headings, and [generates a list of `headings` via the content collections API](https://docs.astro.build/en/guides/content-collections/#rendering-content-to-html). To further customize how headings are rendered, you can apply an Astro component [as a Markdoc node][markdoc-nodes].
@@ -146,14 +169,13 @@ This example renders a `Heading.astro` component using the `render` property:
 
 ```js
 // markdoc.config.mjs
-import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
-import Heading from './src/components/Heading.astro';
+import { defineMarkdocConfig, nodes, component } from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
   nodes: {
     heading: {
       ...nodes.heading, // Preserve default anchor link generation
-      render: Heading,
+      render: component('./src/components/Heading.astro'),
     },
   },
 });
@@ -240,14 +262,13 @@ This example renders blockquotes with a custom `Quote.astro` component:
 
 ```js
 // markdoc.config.mjs
-import { defineMarkdocConfig, nodes } from '@astrojs/markdoc/config';
-import Quote from './src/components/Quote.astro';
+import { defineMarkdocConfig, nodes, component } from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
   nodes: {
     blockquote: {
       ...nodes.blockquote, // Apply Markdoc's defaults for other options
-      render: Quote,
+      render: component('./src/components/Quote.astro'),
     },
   },
 });
@@ -274,13 +295,12 @@ This Astro component can now be passed to the `render` prop for any [tag][markdo
 
 ```js
 // markdoc.config.mjs
-import { defineMarkdocConfig } from '@astrojs/markdoc/config';
-import ClientAside from './src/components/ClientAside.astro';
+import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';
 
 export default defineMarkdocConfig({
   tags: {
     aside: {
-      render: ClientAside,
+      render: component('./src/components/ClientAside.astro'),
       attributes: {
         type: { type: String },
       },

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/content-entry-type.js

@@ -161,17 +161,20 @@ function shouldOptimizeImage(src) {
 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 importName = config.namedExport ? `{ ${config.namedExport} as ${componentNamePrefix + toImportName(key)} }` : componentNamePrefix + toImportName(key);
     const resolvedPath = config.type === "local" ? new URL(config.path, root).pathname : config.path;
     stringifiedComponentImports += `import ${importName} from ${JSON.stringify(resolvedPath)};
 `;
   }
   return stringifiedComponentImports;
 }
+function toImportName(unsafeName) {
+  return unsafeName.replace("-", "_");
+}
 function getStringifiedMap(componentConfigMap, componentNamePrefix) {
   let stringifiedComponentMap = "{";
   for (const key in componentConfigMap) {
-    stringifiedComponentMap += `${key}: ${componentNamePrefix + key},
+    stringifiedComponentMap += `${JSON.stringify(key)}: ${componentNamePrefix + toImportName(key)},
 `;
   }
   stringifiedComponentMap += "}";

package/dist/index.js

@@ -1,6 +1,4 @@
 import { bold, red } from "kleur/colors";
-import { fileURLToPath } from "node:url";
-import { normalizePath } from "vite";
 import { getContentEntryType } from "./content-entry-type.js";
 import {
   loadMarkdocConfig,
@@ -16,7 +14,6 @@ function markdocIntegration(legacyConfig) {
     process.exit(0);
   }
   let markdocConfigResult;
-  let markdocConfigResultId = "";
   let astroConfig;
   return {
     name: "@astrojs/markdoc",
@@ -25,9 +22,6 @@ function markdocIntegration(legacyConfig) {
         const { updateConfig, addContentEntryType } = params;
         astroConfig = params.config;
         markdocConfigResult = await loadMarkdocConfig(astroConfig);
-        if (markdocConfigResult) {
-          markdocConfigResultId = normalizePath(fileURLToPath(markdocConfigResult.fileUrl));
-        }
         addContentEntryType(await getContentEntryType({ markdocConfigResult, astroConfig }));
         updateConfig({
           vite: {

package/dist/load-config.js

@@ -19,7 +19,7 @@ async function loadMarkdocConfig(astroConfig) {
   }
   if (!markdocConfigUrl)
     return;
-  const { code, dependencies } = await bundleConfigFile({
+  const { code } = await bundleConfigFile({
     markdocConfigUrl,
     astroConfig
   });
@@ -53,7 +53,7 @@ async function bundleConfigFile({
           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."
+              hint: "Use the `component()` utility to specify a component path instead. See https://docs.astro.build/en/guides/integrations-guide/markdoc/"
             });
             return {
               // Stub with an unused default export.

package/dist/utils.js

@@ -2,7 +2,7 @@ class MarkdocError extends Error {
   constructor(props, ...params) {
     super(...params);
     this.type = "MarkdocError";
-    const { name, title = "MarkdocError", message, stack, location, hint, frame } = props;
+    const { title = "MarkdocError", message, stack, location, hint, frame } = props;
     this.title = title;
     if (message)
       this.message = message;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc in your Astro site",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -67,7 +67,7 @@
     "zod": "^3.17.3"
   },
   "peerDependencies": {
-    "astro": "^2.7.2"
+    "astro": "^2.8.1"
   },
   "devDependencies": {
     "@astrojs/markdown-remark": "^2.2.1",
@@ -80,7 +80,7 @@
     "mocha": "^9.2.2",
     "rollup": "^3.25.1",
     "vite": "^4.3.9",
-    "astro": "2.7.2",
+    "astro": "2.8.1",
     "astro-scripts": "0.0.14"
   },
   "engines": {