@astrojs/markdoc 0.4.4 → 0.5.0

package/README.md

@@ -278,7 +278,7 @@ export default defineMarkdocConfig({
 
 ### Use client-side UI components
 
-Tags and nodes are restricted to `.astro` files. To embed client-side UI components in Markdoc, [use a wrapper `.astro` component that renders a framework component](/en/core-concepts/framework-components/#nesting-framework-components) with your desired `client:` directive.
+Tags and nodes are restricted to `.astro` files. To embed client-side UI components in Markdoc, [use a wrapper `.astro` component that renders a framework component](https://docs.astro.build/en/core-concepts/framework-components/#nesting-framework-components) with your desired `client:` directive.
 
 This example wraps a React `Aside.tsx` component with a `ClientAside.astro` component:
 
@@ -344,6 +344,36 @@ Now, you can call this function from any Markdoc content entry:
 
 📚 [See the Markdoc documentation](https://markdoc.dev/docs/functions#creating-a-custom-function) for more on using variables or functions in your content.
 
+### Markdoc Language Server
+
+If you are using VS Code, there is an official [Markdoc language extension](https://marketplace.visualstudio.com/items?itemName=Stripe.markdoc-language-support) that includes syntax highlighting and autocomplete for configured tags. [See the language server on GitHub](https://github.com/markdoc/language-server.git) for more information.
+
+To set up the extension, create a `markdoc.config.json` file into the project root with following content:
+
+```json
+[
+  {
+    "id": "my-site",
+    "path": "src/content",
+    "schema": {
+      "path": "markdoc.config.mjs",
+      "type": "esm",
+      "property": "default",
+      "watch": true
+    }
+  }
+]
+```
+
+The `schema` property contains all information to configure the language server for Astro content collections. It accepts following properties:
+
+- `path`: The path to the configuration file.
+- `type`: The type of module your configuration file uses (`esm` allows `import` syntax).
+- `property`: The exported property name that contains the configuration object.
+- `watch`: Tell the server to watch for changes in the configuration.
+
+The top-level `path` property tells the server where content is located. Since Markdoc is specific to content collections, you can use `src/content`.
+
 ### Pass Markdoc variables
 
 You may need to pass [variables][markdoc-variables] to your content. This is useful when passing SSR parameters like A/B tests.
@@ -425,9 +455,7 @@ export default defineConfig({
 ```
 
 > **Warning**
-> When `allowHTML` is enabled, HTML markup inside Markdoc documents will be rendered as actual HTML elements (including `<script>`), making attack vectors like XSS possible.
->
-> Ensure that any HTML markup comes from trusted sources.
+> When `allowHTML` is enabled, HTML markup inside Markdoc documents will be rendered as actual HTML elements (including `<script>`), making attack vectors like XSS possible. Ensure that any HTML markup comes from trusted sources.
 
 ## Examples
 

package/dist/content-entry-type.js

@@ -1,13 +1,13 @@
 import Markdoc from "@markdoc/markdoc";
+import { emitESMImage } from "astro/assets/utils";
 import matter from "gray-matter";
 import fs from "node:fs";
-import { fileURLToPath } from "node:url";
-import { MarkdocError, isComponentConfig, isValidUrl, prependForwardSlash } from "./utils.js";
-import { emitESMImage } from "astro/assets/utils";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { htmlTokenTransform } from "./html/transform/html-token-transform.js";
 import { setupConfig } from "./runtime.js";
 import { getMarkdocTokenizer } from "./tokenizer.js";
+import { MarkdocError, isComponentConfig, isValidUrl, prependForwardSlash } from "./utils.js";
 async function getContentEntryType({
   markdocConfigResult,
   astroConfig,
@@ -18,27 +18,26 @@ async function getContentEntryType({
     getEntryInfo,
     handlePropagation: true,
     async getRenderModule({ contents, fileUrl, viteId }) {
-      var _a, _b;
       const entry = getEntryInfo({ contents, fileUrl });
       const tokenizer = getMarkdocTokenizer(options);
       let tokens = tokenizer.tokenize(entry.body);
-      if (options == null ? void 0 : options.allowHTML) {
+      if (options?.allowHTML) {
         tokens = htmlTokenTransform(tokenizer, tokens);
       }
       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;
+      const userMarkdocConfig = markdocConfigResult?.config ?? {};
+      const markdocConfigUrl = 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;
+        const render = userMarkdocConfig.tags?.[tag]?.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;
+        const render = schema?.render;
         if (isComponentConfig(render)) {
           componentConfigByNodeMap[nodeType] = render;
         }
@@ -74,18 +73,17 @@ async function getContentEntryType({
           }
         });
       }
-      if (astroConfig.experimental.assets) {
-        await emitOptimizedImages(ast.children, {
-          astroConfig,
-          pluginContext,
-          filePath
-        });
-      }
+      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 };` : ""}
+${markdocConfigUrl ? `import markdocConfig from ${JSON.stringify(markdocConfigUrl.pathname)};` : "const markdocConfig = {};"}
+
+import { assetsConfig } from '@astrojs/markdoc/runtime-assets-config';
+markdocConfig.nodes = { ...assetsConfig.nodes, ...markdocConfig.nodes };
 
 ${getStringifiedImports(componentConfigByTagMap, "Tag", astroConfig.root)}
 ${getStringifiedImports(componentConfigByNodeMap, "Node", astroConfig.root)}
@@ -141,12 +139,11 @@ 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://"))) {
+      if (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 }
+          ctx.pluginContext.emitFile
         );
         node.attributes.__optimizedSrc = src;
       } else {

package/dist/extensions/prism.js

@@ -1,5 +1,5 @@
-import { unescapeHTML } from "astro/runtime/server/index.js";
 import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter";
+import { unescapeHTML } from "astro/runtime/server/index.js";
 import { Markdoc } from "../config.js";
 function prism() {
   return {

package/dist/extensions/shiki.js

@@ -1,22 +1,6 @@
-import { unescapeHTML } from "astro/runtime/server/index.js";
 import Markdoc from "@markdoc/markdoc";
+import { unescapeHTML } from "astro/runtime/server/index.js";
 import { getHighlighter } from "shiki";
-const compatThemes = {
-  "material-darker": "material-theme-darker",
-  "material-default": "material-theme",
-  "material-lighter": "material-theme-lighter",
-  "material-ocean": "material-theme-ocean",
-  "material-palenight": "material-theme-palenight"
-};
-const normalizeTheme = (theme) => {
-  if (typeof theme === "string") {
-    return compatThemes[theme] || theme;
-  } else if (compatThemes[theme.name]) {
-    return { ...theme, name: compatThemes[theme.name] };
-  } else {
-    return theme;
-  }
-};
 const ASTRO_COLOR_REPLACEMENTS = {
   "#000001": "var(--astro-code-color-text)",
   "#000002": "var(--astro-code-color-background)",
@@ -39,7 +23,6 @@ async function shiki({
   theme = "github-dark",
   wrap = false
 } = {}) {
-  theme = normalizeTheme(theme);
   const cacheID = typeof theme === "string" ? theme : theme.name;
   if (!highlighterCache.has(cacheID)) {
     highlighterCache.set(

package/dist/heading-ids.js

@@ -1,4 +1,5 @@
-import Markdoc from "@markdoc/markdoc";
+import Markdoc, {
+} from "@markdoc/markdoc";
 import Slugger from "github-slugger";
 import { getTextContent } from "./runtime.js";
 import { MarkdocError } from "./utils.js";
@@ -19,16 +20,15 @@ const heading = {
     level: { type: Number, required: true, default: 1 }
   },
   transform(node, config) {
-    var _a, _b, _c;
     const { level, ...attributes } = node.transformAttributes(config);
     const children = node.transformChildren(config);
-    if (!((_a = config.ctx) == null ? void 0 : _a.headingSlugger)) {
+    if (!config.ctx?.headingSlugger) {
       throw new MarkdocError({
         message: "Unexpected problem adding heading IDs to Markdoc file. Did you modify the `ctx.headingSlugger` property in your Markdoc config?"
       });
     }
     const slug = getSlug(attributes, children, config.ctx.headingSlugger);
-    const render = ((_c = (_b = config.nodes) == null ? void 0 : _b.heading) == null ? void 0 : _c.render) ?? `h${level}`;
+    const render = config.nodes?.heading?.render ?? `h${level}`;
     const tagProps = (
       // For components, pass down `level` as a prop,
       // alongside `__collectHeading` for our `headings` collector.

package/dist/html/transform/html-token-transform.d.ts

@@ -1,3 +1,3 @@
-import { Tokenizer } from '@markdoc/markdoc';
+import type { Tokenizer } from '@markdoc/markdoc';
 import type * as Token from 'markdown-it/lib/token';
 export declare function htmlTokenTransform(tokenizer: Tokenizer, tokens: Token[]): Token[];

package/dist/{experimental-assets-config.d.ts → runtime-assets-config.d.ts}

@@ -1,2 +1,2 @@
 import type { Config as MarkdocConfig } from '@markdoc/markdoc';
-export declare const experimentalAssetsConfig: MarkdocConfig;
+export declare const assetsConfig: MarkdocConfig;

package/dist/{experimental-assets-config.js → runtime-assets-config.js}

@@ -1,6 +1,6 @@
 import Markdoc from "@markdoc/markdoc";
 import { Image } from "astro:assets";
-const experimentalAssetsConfig = {
+const assetsConfig = {
   nodes: {
     image: {
       attributes: {
@@ -21,5 +21,5 @@ const experimentalAssetsConfig = {
   }
 };
 export {
-  experimentalAssetsConfig
+  assetsConfig
 };

package/dist/runtime.d.ts

@@ -1,7 +1,7 @@
 import type { MarkdownHeading } from '@astrojs/markdown-remark';
 import { type NodeType, type RenderableTreeNode } from '@markdoc/markdoc';
 import type { AstroInstance } from 'astro';
-import type { AstroMarkdocConfig } from './config.js';
+import { type AstroMarkdocConfig } from './config.js';
 import type { MarkdocIntegrationOptions } from './options.js';
 /**
  * Merge user config with default config and set up context (ex. heading ID slugger)
@@ -25,5 +25,5 @@ export declare function getTextContent(childNodes: RenderableTreeNode[]): string
  */
 export declare function collectHeadings(children: RenderableTreeNode[], collectedHeadings: MarkdownHeading[]): void;
 export declare function createGetHeadings(stringifiedAst: string, userConfig: AstroMarkdocConfig, options: MarkdocIntegrationOptions | undefined): () => MarkdownHeading[];
-export declare function createContentComponent(Renderer: AstroInstance['default'], stringifiedAst: string, userConfig: AstroMarkdocConfig, options: MarkdocIntegrationOptions | undefined, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): any;
+export declare function createContentComponent(Renderer: AstroInstance['default'], stringifiedAst: string, userConfig: AstroMarkdocConfig, options: MarkdocIntegrationOptions | undefined, tagComponentMap: Record<string, AstroInstance['default']>, nodeComponentMap: Record<NodeType, AstroInstance['default']>): import("astro/runtime/server/index.js").AstroComponentFactory;
 export {};

package/dist/runtime.js

@@ -1,5 +1,7 @@
-import Markdoc from "@markdoc/markdoc";
+import Markdoc, {
+} from "@markdoc/markdoc";
 import { createComponent, renderComponent } from "astro/runtime/server/index.js";
+import {} from "./config.js";
 import { setupHeadingConfig } from "./heading-ids.js";
 import { htmlTag } from "./html/tagdefs/html.tag.js";
 async function setupConfig(userConfig = {}, options) {
@@ -13,7 +15,7 @@ async function setupConfig(userConfig = {}, options) {
     }
   }
   let merged = mergeConfig(defaultConfig, userConfig);
-  if (options == null ? void 0 : options.allowHTML) {
+  if (options?.allowHTML) {
     merged = mergeConfig(merged, HTML_CONFIG);
   }
   return merged;
@@ -21,7 +23,7 @@ async function setupConfig(userConfig = {}, options) {
 function setupConfigSync(userConfig = {}, options) {
   const defaultConfig = setupHeadingConfig();
   let merged = mergeConfig(defaultConfig, userConfig);
-  if (options == null ? void 0 : options.allowHTML) {
+  if (options?.allowHTML) {
     merged = mergeConfig(merged, HTML_CONFIG);
   }
   return merged;

package/dist/tokenizer.js

@@ -7,7 +7,7 @@ function getMarkdocTokenizer(options) {
       // Without this, they're rendered as strings!
       allowComments: true
     };
-    if (options == null ? void 0 : options.allowHTML) {
+    if (options?.allowHTML) {
       tokenizerOptions.allowIndentation = true;
       tokenizerOptions.html = true;
     }

package/dist/utils.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc in your Astro site",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -34,7 +34,7 @@
     ".": "./dist/index.js",
     "./components": "./components/index.ts",
     "./runtime": "./dist/runtime.js",
-    "./experimental-assets-config": "./dist/experimental-assets-config.js",
+    "./runtime-assets-config": "./dist/runtime-assets-config.js",
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -56,37 +56,37 @@
     "template"
   ],
   "dependencies": {
-    "@astrojs/internal-helpers": "^0.1.0",
-    "@astrojs/prism": "^2.1.2",
     "@markdoc/markdoc": "^0.3.0",
-    "esbuild": "^0.17.19",
+    "esbuild": "^0.19.2",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "htmlparser2": "^9.0.0",
     "kleur": "^4.1.5",
-    "shiki": "^0.14.1",
-    "zod": "^3.17.3"
+    "shiki": "^0.14.3",
+    "zod": "3.21.1",
+    "@astrojs/internal-helpers": "0.2.0",
+    "@astrojs/prism": "3.0.0"
   },
   "peerDependencies": {
-    "astro": "^2.9.3"
+    "astro": "^3.0.0"
   },
   "devDependencies": {
-    "@astrojs/markdown-remark": "^2.2.1",
     "@types/chai": "^4.3.5",
     "@types/html-escaper": "^3.0.0",
-    "@types/markdown-it": "^12.2.3",
-    "@types/mocha": "^9.1.1",
+    "@types/markdown-it": "^13.0.0",
+    "@types/mocha": "^10.0.1",
     "chai": "^4.3.7",
     "devalue": "^4.3.2",
-    "linkedom": "^0.14.26",
-    "mocha": "^9.2.2",
-    "rollup": "^3.25.1",
-    "vite": "^4.4.6",
-    "astro": "2.9.3",
+    "linkedom": "^0.15.1",
+    "mocha": "^10.2.0",
+    "rollup": "^3.28.1",
+    "vite": "^4.4.9",
+    "@astrojs/markdown-remark": "3.0.0",
+    "astro": "3.0.0",
     "astro-scripts": "0.0.14"
   },
   "engines": {
-    "node": ">=16.12.0"
+    "node": ">=18.14.1"
   },
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",