@astrojs/markdown-remark 3.0.0 → 3.2.0

package/dist/frontmatter-injection.d.ts

@@ -3,6 +3,10 @@ import type { MarkdownAstroData } from './types.js';
 export declare class InvalidAstroDataError extends TypeError {
 }
 export declare function safelyGetAstroData(vfileData: Data): MarkdownAstroData | InvalidAstroDataError;
+export declare function setVfileFrontmatter(vfile: VFile, frontmatter: Record<string, any>): void;
+/**
+ * @deprecated Use `setVfileFrontmatter` instead
+ */
 export declare function toRemarkInitializeAstroData({ userFrontmatter, }: {
     userFrontmatter: Record<string, any>;
 }): () => (tree: any, vfile: VFile) => void;

package/dist/frontmatter-injection.js

@@ -19,6 +19,11 @@ function safelyGetAstroData(vfileData) {
   }
   return astro;
 }
+function setVfileFrontmatter(vfile, frontmatter) {
+  vfile.data ??= {};
+  vfile.data.astro ??= {};
+  vfile.data.astro.frontmatter = frontmatter;
+}
 function toRemarkInitializeAstroData({
   userFrontmatter
 }) {
@@ -31,5 +36,6 @@ function toRemarkInitializeAstroData({
 export {
   InvalidAstroDataError,
   safelyGetAstroData,
+  setVfileFrontmatter,
   toRemarkInitializeAstroData
 };

package/dist/index.d.ts

@@ -1,7 +1,18 @@
-import type { AstroMarkdownOptions, MarkdownRenderingOptions, MarkdownRenderingResult } from './types';
+import type { AstroMarkdownOptions, MarkdownProcessor, MarkdownRenderingOptions, MarkdownRenderingResult } from './types.js';
+export { InvalidAstroDataError, setVfileFrontmatter } from './frontmatter-injection.js';
 export { rehypeHeadingIds } from './rehype-collect-headings.js';
 export { remarkCollectImages } from './remark-collect-images.js';
+export { remarkPrism } from './remark-prism.js';
+export { remarkShiki } from './remark-shiki.js';
 export * from './types.js';
 export declare const markdownConfigDefaults: Omit<Required<AstroMarkdownOptions>, 'drafts'>;
-/** Shared utility for rendering markdown */
+/**
+ * Create a markdown preprocessor to render multiple markdown files
+ */
+export declare function createMarkdownProcessor(opts?: AstroMarkdownOptions): Promise<MarkdownProcessor>;
+/**
+ * Shared utility for rendering markdown
+ *
+ * @deprecated Use `createMarkdownProcessor` instead for better performance
+ */
 export declare function renderMarkdown(content: string, opts: MarkdownRenderingOptions): Promise<MarkdownRenderingResult>;

package/dist/index.js

@@ -1,21 +1,27 @@
-import { toRemarkInitializeAstroData } from "./frontmatter-injection.js";
+import {
+  InvalidAstroDataError,
+  safelyGetAstroData,
+  setVfileFrontmatter
+} from "./frontmatter-injection.js";
 import { loadPlugins } from "./load-plugins.js";
 import { rehypeHeadingIds } from "./rehype-collect-headings.js";
 import { remarkCollectImages } from "./remark-collect-images.js";
-import remarkPrism from "./remark-prism.js";
-import scopedStyles from "./remark-scoped-styles.js";
-import remarkShiki from "./remark-shiki.js";
+import { remarkPrism } from "./remark-prism.js";
+import { remarkShiki } from "./remark-shiki.js";
 import rehypeRaw from "rehype-raw";
 import rehypeStringify from "rehype-stringify";
 import remarkGfm from "remark-gfm";
-import markdown from "remark-parse";
-import markdownToHtml from "remark-rehype";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
 import remarkSmartypants from "remark-smartypants";
 import { unified } from "unified";
 import { VFile } from "vfile";
 import { rehypeImages } from "./rehype-images.js";
+import { InvalidAstroDataError as InvalidAstroDataError2, setVfileFrontmatter as setVfileFrontmatter2 } from "./frontmatter-injection.js";
 import { rehypeHeadingIds as rehypeHeadingIds2 } from "./rehype-collect-headings.js";
 import { remarkCollectImages as remarkCollectImages2 } from "./remark-collect-images.js";
+import { remarkPrism as remarkPrism2 } from "./remark-prism.js";
+import { remarkShiki as remarkShiki2 } from "./remark-shiki.js";
 export * from "./types.js";
 const markdownConfigDefaults = {
   syntaxHighlight: "shiki",
@@ -31,22 +37,20 @@ const markdownConfigDefaults = {
   smartypants: true
 };
 const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
-async function renderMarkdown(content, opts) {
-  let {
-    fileURL,
+async function createMarkdownProcessor(opts) {
+  const {
     syntaxHighlight = markdownConfigDefaults.syntaxHighlight,
     shikiConfig = markdownConfigDefaults.shikiConfig,
     remarkPlugins = markdownConfigDefaults.remarkPlugins,
     rehypePlugins = markdownConfigDefaults.rehypePlugins,
-    remarkRehype = markdownConfigDefaults.remarkRehype,
+    remarkRehype: remarkRehypeOptions = markdownConfigDefaults.remarkRehype,
     gfm = markdownConfigDefaults.gfm,
-    smartypants = markdownConfigDefaults.smartypants,
-    frontmatter: userFrontmatter = {}
-  } = opts;
-  const input = new VFile({ value: content, path: fileURL });
-  const scopedClassName = opts.$?.scopedClassName;
-  let parser = unified().use(markdown).use(toRemarkInitializeAstroData({ userFrontmatter })).use([]);
-  if (!isPerformanceBenchmark && gfm) {
+    smartypants = markdownConfigDefaults.smartypants
+  } = opts ?? {};
+  const loadedRemarkPlugins = await Promise.all(loadPlugins(remarkPlugins));
+  const loadedRehypePlugins = await Promise.all(loadPlugins(rehypePlugins));
+  const parser = unified().use(remarkParse);
+  if (!isPerformanceBenchmark) {
     if (gfm) {
       parser.use(remarkGfm);
     }
@@ -54,53 +58,72 @@ async function renderMarkdown(content, opts) {
       parser.use(remarkSmartypants);
     }
   }
-  const loadedRemarkPlugins = await Promise.all(loadPlugins(remarkPlugins));
-  const loadedRehypePlugins = await Promise.all(loadPlugins(rehypePlugins));
-  loadedRemarkPlugins.forEach(([plugin, pluginOpts]) => {
-    parser.use([[plugin, pluginOpts]]);
-  });
+  for (const [plugin, pluginOpts] of loadedRemarkPlugins) {
+    parser.use(plugin, pluginOpts);
+  }
   if (!isPerformanceBenchmark) {
-    if (scopedClassName) {
-      parser.use([scopedStyles(scopedClassName)]);
-    }
     if (syntaxHighlight === "shiki") {
-      parser.use([await remarkShiki(shikiConfig, scopedClassName)]);
+      parser.use(remarkShiki, shikiConfig);
     } else if (syntaxHighlight === "prism") {
-      parser.use([remarkPrism(scopedClassName)]);
+      parser.use(remarkPrism);
     }
-    parser.use([remarkCollectImages]);
+    parser.use(remarkCollectImages);
   }
-  parser.use([
-    [
-      markdownToHtml,
-      {
-        allowDangerousHtml: true,
-        passThrough: [],
-        ...remarkRehype
-      }
-    ]
-  ]);
-  loadedRehypePlugins.forEach(([plugin, pluginOpts]) => {
-    parser.use([[plugin, pluginOpts]]);
+  parser.use(remarkRehype, {
+    allowDangerousHtml: true,
+    passThrough: [],
+    ...remarkRehypeOptions
   });
+  for (const [plugin, pluginOpts] of loadedRehypePlugins) {
+    parser.use(plugin, pluginOpts);
+  }
   parser.use(rehypeImages());
   if (!isPerformanceBenchmark) {
-    parser.use([rehypeHeadingIds]);
-  }
-  parser.use([rehypeRaw]).use(rehypeStringify, { allowDangerousHtml: true });
-  let vfile;
-  try {
-    vfile = await parser.process(input);
-  } catch (err) {
-    err = prefixError(err, `Failed to parse Markdown file "${input.path}"`);
-    console.error(err);
-    throw err;
+    parser.use(rehypeHeadingIds);
   }
-  const headings = vfile?.data.__astroHeadings || [];
+  parser.use(rehypeRaw).use(rehypeStringify, { allowDangerousHtml: true });
+  return {
+    async render(content, renderOpts) {
+      const vfile = new VFile({ value: content, path: renderOpts?.fileURL });
+      setVfileFrontmatter(vfile, renderOpts?.frontmatter ?? {});
+      const result = await parser.process(vfile).catch((err) => {
+        err = prefixError(err, `Failed to parse Markdown file "${vfile.path}"`);
+        console.error(err);
+        throw err;
+      });
+      const astroData = safelyGetAstroData(result.data);
+      if (astroData instanceof InvalidAstroDataError) {
+        throw astroData;
+      }
+      return {
+        code: String(result.value),
+        metadata: {
+          headings: result.data.__astroHeadings ?? [],
+          imagePaths: result.data.imagePaths ?? /* @__PURE__ */ new Set(),
+          frontmatter: astroData.frontmatter ?? {}
+        },
+        // Compat for `renderMarkdown` only. Do not use!
+        __renderMarkdownCompat: {
+          result
+        }
+      };
+    }
+  };
+}
+async function renderMarkdown(content, opts) {
+  const processor = await createMarkdownProcessor(opts);
+  const result = await processor.render(content, {
+    fileURL: opts.fileURL,
+    frontmatter: opts.frontmatter
+  });
   return {
-    metadata: { headings, source: content, html: String(vfile.value) },
-    code: String(vfile.value),
-    vfile
+    code: result.code,
+    metadata: {
+      headings: result.metadata.headings,
+      source: content,
+      html: result.code
+    },
+    vfile: result.__renderMarkdownCompat.result
   };
 }
 function prefixError(err, prefix) {
@@ -121,8 +144,13 @@ ${err.message}`;
   return wrappedError;
 }
 export {
+  InvalidAstroDataError2 as InvalidAstroDataError,
+  createMarkdownProcessor,
   markdownConfigDefaults,
   rehypeHeadingIds2 as rehypeHeadingIds,
   remarkCollectImages2 as remarkCollectImages,
-  renderMarkdown
+  remarkPrism2 as remarkPrism,
+  remarkShiki2 as remarkShiki,
+  renderMarkdown,
+  setVfileFrontmatter2 as setVfileFrontmatter
 };

package/dist/load-plugins.js

@@ -9,7 +9,7 @@ async function importPlugin(p) {
       return importResult2.default;
     } catch {
     }
-    const resolved = await importMetaResolve(p, cwdUrlStr);
+    const resolved = importMetaResolve(p, cwdUrlStr);
     const importResult = await import(resolved);
     return importResult.default;
   }

package/dist/remark-collect-images.d.ts

@@ -1,2 +1,2 @@
-import type { MarkdownVFile } from './types';
+import type { MarkdownVFile } from './types.js';
 export declare function remarkCollectImages(): (tree: any, vfile: MarkdownVFile) => void;

package/dist/remark-collect-images.js

@@ -1,12 +1,23 @@
+import { definitions } from "mdast-util-definitions";
 import { visit } from "unist-util-visit";
 function remarkCollectImages() {
   return function(tree, vfile) {
     if (typeof vfile?.path !== "string")
       return;
+    const definition = definitions(tree);
     const imagePaths = /* @__PURE__ */ new Set();
-    visit(tree, "image", (node) => {
-      if (shouldOptimizeImage(node.url))
-        imagePaths.add(node.url);
+    visit(tree, ["image", "imageReference"], (node) => {
+      if (node.type === "image") {
+        if (shouldOptimizeImage(node.url))
+          imagePaths.add(node.url);
+      }
+      if (node.type === "imageReference") {
+        const imageDefinition = definition(node.identifier);
+        if (imageDefinition) {
+          if (shouldOptimizeImage(imageDefinition.url))
+            imagePaths.add(imageDefinition.url);
+        }
+      }
     });
     vfile.data.imagePaths = imagePaths;
   };

package/dist/remark-prism.d.ts

@@ -1,3 +1,2 @@
-type MaybeString = string | null | undefined;
-declare function plugin(className: MaybeString): () => (tree: any) => void;
-export default plugin;
+import type { RemarkPlugin } from './types.js';
+export declare function remarkPrism(): ReturnType<RemarkPlugin>;

package/dist/remark-prism.js

@@ -1,27 +1,19 @@
 import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter";
 import { visit } from "unist-util-visit";
-function transformer(className) {
+function remarkPrism() {
   return function(tree) {
-    const visitor = (node) => {
+    visit(tree, "code", (node) => {
       let { lang, value } = node;
       node.type = "html";
       let { html, classLanguage } = runHighlighterWithAstro(lang, value);
       let classes = [classLanguage];
-      if (className) {
-        classes.push(className);
-      }
       node.value = `<pre class="${classes.join(
         " "
       )}"><code is:raw class="${classLanguage}">${html}</code></pre>`;
       return node;
-    };
-    return visit(tree, "code", visitor);
+    });
   };
 }
-function plugin(className) {
-  return transformer.bind(null, className);
-}
-var remark_prism_default = plugin;
 export {
-  remark_prism_default as default
+  remarkPrism
 };

package/dist/remark-shiki.d.ts

@@ -1,3 +1,2 @@
-import type { ShikiConfig } from './types.js';
-declare const remarkShiki: ({ langs, theme, wrap }: ShikiConfig, scopedClassName?: string | null) => Promise<() => (tree: any) => void>;
-export default remarkShiki;
+import type { RemarkPlugin, ShikiConfig } from './types.js';
+export declare function remarkShiki({ langs, theme, wrap, }?: ShikiConfig): ReturnType<RemarkPlugin>;

package/dist/remark-shiki.js

@@ -1,7 +1,11 @@
 import { getHighlighter } from "shiki";
 import { visit } from "unist-util-visit";
 const highlighterCacheAsync = /* @__PURE__ */ new Map();
-const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }, scopedClassName) => {
+function remarkShiki({
+  langs = [],
+  theme = "github-dark",
+  wrap = false
+} = {}) {
   const cacheID = typeof theme === "string" ? theme : theme.name;
   let highlighterAsync = highlighterCacheAsync.get(cacheID);
   if (!highlighterAsync) {
@@ -23,11 +27,14 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false },
     });
     highlighterCacheAsync.set(cacheID, highlighterAsync);
   }
-  const highlighter = await highlighterAsync;
-  for (const lang of langs) {
-    await highlighter.loadLanguage(lang);
-  }
-  return () => (tree) => {
+  let highlighter;
+  return async (tree) => {
+    if (!highlighter) {
+      highlighter = await highlighterAsync;
+      for (const lang of langs) {
+        await highlighter.loadLanguage(lang);
+      }
+    }
     visit(tree, "code", (node) => {
       let lang;
       if (typeof node.lang === "string") {
@@ -42,10 +49,7 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false },
         lang = "plaintext";
       }
       let html = highlighter.codeToHtml(node.value, { lang });
-      html = html.replace(
-        /<pre class="(.*?)shiki(.*?)"/,
-        `<pre is:raw class="$1astro-code$2${scopedClassName ? " " + scopedClassName : ""}"`
-      );
+      html = html.replace(/<pre class="(.*?)shiki(.*?)"/, `<pre is:raw class="$1astro-code$2"`);
       if (node.lang === "diff") {
         html = html.replace(
           /<span class="line"><span style="(.*?)">([\+|\-])/g,
@@ -60,16 +64,12 @@ const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false },
           'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
         );
       }
-      if (scopedClassName) {
-        html = html.replace(/\<span class="line"\>/g, `<span class="line ${scopedClassName}"`);
-      }
       node.type = "html";
       node.value = html;
       node.children = [];
     });
   };
-};
-var remark_shiki_default = remarkShiki;
+}
 export {
-  remark_shiki_default as default
+  remarkShiki
 };

package/dist/types.d.ts

@@ -37,16 +37,25 @@ export interface ImageMetadata {
     height: number;
     type: string;
 }
-export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
+export interface MarkdownProcessor {
+    render: (content: string, opts?: MarkdownProcessorRenderOptions) => Promise<MarkdownProcessorRenderResult>;
+}
+export interface MarkdownProcessorRenderOptions {
     /** @internal */
     fileURL?: URL;
-    /** @internal */
-    $?: {
-        scopedClassName: string | null;
-    };
     /** Used for frontmatter injection plugins */
     frontmatter?: Record<string, any>;
 }
+export interface MarkdownProcessorRenderResult {
+    code: string;
+    metadata: {
+        headings: MarkdownHeading[];
+        imagePaths: Set<string>;
+        frontmatter: Record<string, any>;
+    };
+}
+export interface MarkdownRenderingOptions extends AstroMarkdownOptions, MarkdownProcessorRenderOptions {
+}
 export interface MarkdownHeading {
     depth: number;
     slug: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -20,12 +20,13 @@
     "dist"
   ],
   "peerDependencies": {
-    "astro": "^3.0.0"
+    "astro": "^3.1.0"
   },
   "dependencies": {
     "@astrojs/prism": "^3.0.0",
     "github-slugger": "^2.0.0",
     "import-meta-resolve": "^3.0.0",
+    "mdast-util-definitions": "^6.0.0",
     "rehype-raw": "^6.1.1",
     "rehype-stringify": "^9.0.4",
     "remark-gfm": "^3.0.1",

package/dist/remark-scoped-styles.d.ts

@@ -1,2 +0,0 @@
-/**  */
-export default function scopedStyles(className: string): () => (tree: any) => void;

package/dist/remark-scoped-styles.js

@@ -1,18 +0,0 @@
-import { visit } from "unist-util-visit";
-const noVisit = /* @__PURE__ */ new Set(["root", "html", "text"]);
-function scopedStyles(className) {
-  const visitor = (node) => {
-    if (noVisit.has(node.type))
-      return;
-    const { data } = node;
-    let currentClassName = data?.hProperties?.class ?? "";
-    node.data = node.data || {};
-    node.data.hProperties = node.data.hProperties || {};
-    node.data.hProperties.class = `${className} ${currentClassName}`.trim();
-    return node;
-  };
-  return () => (tree) => visit(tree, visitor);
-}
-export {
-  scopedStyles as default
-};