fumadocs-core 14.0.1 → 14.1.0

package/dist/chunk-7CSWJQ5H.js

@@ -0,0 +1,59 @@
+// src/server/shiki.ts
+import {
+  getSingletonHighlighter
+} from "shiki";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+function createStyleTransformer() {
+  return {
+    name: "rehype-code:styles",
+    line(hast) {
+      if (hast.children.length === 0) {
+        hast.children.push({
+          type: "text",
+          value: " "
+        });
+      }
+    }
+  };
+}
+var defaultThemes = {
+  light: "github-light",
+  dark: "github-dark"
+};
+async function highlight(code, options) {
+  const { lang, components, engine, ...rest } = options;
+  let themes = { themes: defaultThemes };
+  if ("theme" in options && options.theme) {
+    themes = { theme: options.theme };
+  } else if ("themes" in options && options.themes) {
+    themes = { themes: options.themes };
+  }
+  const highlighter = await getSingletonHighlighter({
+    langs: [lang],
+    engine: engine ?? createOnigurumaEngine(() => import("shiki/wasm")),
+    themes: "theme" in themes ? [themes.theme] : Object.values(themes.themes).filter((v) => v !== void 0)
+  });
+  const hast = highlighter.codeToHast(code, {
+    lang,
+    ...rest,
+    ...themes,
+    transformers: [createStyleTransformer(), ...rest.transformers ?? []],
+    defaultColor: "themes" in themes ? false : void 0
+  });
+  return toJsxRuntime(hast, {
+    jsx,
+    jsxs,
+    development: false,
+    components,
+    Fragment
+  });
+}
+
+export {
+  createStyleTransformer,
+  defaultThemes,
+  highlight
+};

package/dist/chunk-EMWGTXSW.js

@@ -0,0 +1,19 @@
+// src/utils/use-on-change.ts
+import { useState } from "react";
+function isDifferent(a, b) {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return b.length !== a.length || a.some((v, i) => isDifferent(v, b[i]));
+  }
+  return a !== b;
+}
+function useOnChange(value, onChange, isUpdated = isDifferent) {
+  const [prev, setPrev] = useState(value);
+  if (isUpdated(prev, value)) {
+    onChange(value, prev);
+    setPrev(value);
+  }
+}
+
+export {
+  useOnChange
+};

package/dist/mdx-plugins/index.js

@@ -1,10 +1,14 @@
-import {
-  slash
-} from "../chunk-UWEEHUJV.js";
 import {
   flattenNode,
   remarkHeading
 } from "../chunk-4MNUWZIW.js";
+import {
+  createStyleTransformer,
+  defaultThemes
+} from "../chunk-7CSWJQ5H.js";
+import {
+  slash
+} from "../chunk-UWEEHUJV.js";
 import "../chunk-MLKGABMK.js";
 
 // src/mdx-plugins/index.ts
@@ -14,11 +18,254 @@ import {
 
 // src/mdx-plugins/rehype-code.ts
 import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
-import {
-  transformerNotationDiff,
-  transformerNotationHighlight,
-  transformerNotationWordHighlight
-} from "@shikijs/transformers";
+
+// ../../node_modules/.pnpm/shiki-transformers@1.0.0_shiki@1.22.2/node_modules/shiki-transformers/dist/index.js
+var matchers = [
+  [/^(<!--)(.+)(-->)$/, true],
+  [/^(\/\*)(.+)(\*\/)$/, true],
+  [/^(\/\/|["']|;{1,2}|%{1,2}|--|#)(.+)$/, false]
+];
+function parseComments(lines, jsx) {
+  const out = [];
+  for (const line of lines) {
+    const elements = line.children;
+    const start = jsx ? elements.length - 2 : elements.length - 1;
+    for (let i = Math.max(start, 0); i < elements.length; i++) {
+      const token = elements[i];
+      if (token.type !== "element")
+        continue;
+      const isLast = i === elements.length - 1;
+      const match = matchToken(token, isLast);
+      if (!match) continue;
+      if (jsx && !isLast && i !== 0) {
+        const left = elements[i - 1];
+        const right = elements[i + 1];
+        out.push({
+          info: match,
+          line,
+          token,
+          jsxIntercept: isValue(left, "{") && isValue(right, "}")
+        });
+      } else {
+        out.push({
+          info: match,
+          line,
+          token,
+          jsxIntercept: false
+        });
+      }
+    }
+  }
+  return out;
+}
+function isValue(element, value) {
+  if (element.type !== "element") return false;
+  const text = element.children[0];
+  if (text.type !== "text")
+    return false;
+  return text.value.trim() === value;
+}
+function matchToken(token, last) {
+  const text = token.children[0];
+  if (text.type !== "text")
+    return;
+  for (const [matcher, lastOnly] of matchers) {
+    if (!lastOnly && !last) continue;
+    let trimmed = text.value.trimStart();
+    const spaceFront = text.value.length - trimmed.length;
+    trimmed = trimmed.trimEnd();
+    const spaceEnd = text.value.length - trimmed.length - spaceFront;
+    const result = matcher.exec(trimmed);
+    if (!result) continue;
+    return [
+      " ".repeat(spaceFront) + result[1],
+      result[2],
+      result[3] ? result[3] + " ".repeat(spaceEnd) : void 0
+    ];
+  }
+}
+function createCommentNotationTransformer(name, regex, onMatch) {
+  return {
+    name,
+    code(code) {
+      const lines = code.children.filter((i) => i.type === "element");
+      const linesToRemove = [];
+      code.data ??= {};
+      const data = code.data;
+      const parsed = data._shiki_notation ??= parseComments(lines, ["jsx", "tsx"].includes(this.options.lang));
+      for (const comment of parsed) {
+        if (comment.info[1].length === 0) continue;
+        const isLineCommentOnly = comment.line.children.length === (comment.jsxIntercept ? 3 : 1);
+        let lineIdx = lines.indexOf(comment.line);
+        if (isLineCommentOnly) lineIdx++;
+        comment.info[1] = comment.info[1].replace(regex, (...match) => {
+          if (onMatch.call(this, match, comment.line, comment.token, lines, lineIdx)) {
+            return "";
+          }
+          return match[0];
+        });
+        const isEmpty = comment.info[1].trim().length === 0;
+        if (isEmpty) comment.info[1] = "";
+        if (isEmpty && isLineCommentOnly) {
+          linesToRemove.push(comment.line);
+        } else if (isEmpty && comment.jsxIntercept) {
+          comment.line.children.splice(comment.line.children.indexOf(comment.token) - 1, 3);
+        } else if (isEmpty) {
+          comment.line.children.splice(comment.line.children.indexOf(comment.token), 1);
+        } else {
+          const head = comment.token.children[0];
+          if (head.type === "text") {
+            head.value = comment.info.join("");
+          }
+        }
+      }
+      for (const line of linesToRemove)
+        code.children.splice(code.children.indexOf(line), 1);
+    }
+  };
+}
+function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function transformerNotationMap(options = {}, name = "@shikijs/transformers:notation-map") {
+  const {
+    classMap = {},
+    classActivePre = void 0
+  } = options;
+  return createCommentNotationTransformer(
+    name,
+    new RegExp(`\\s*\\[!code (${Object.keys(classMap).map(escapeRegExp).join("|")})(:\\d+)?\\]`),
+    function([_, match, range = ":1"], _line, _comment, lines, index) {
+      const lineNum = Number.parseInt(range.slice(1), 10);
+      lines.slice(index, index + lineNum).forEach((line) => {
+        this.addClassToHast(line, classMap[match]);
+      });
+      if (classActivePre)
+        this.addClassToHast(this.pre, classActivePre);
+      return true;
+    }
+  );
+}
+function transformerNotationDiff(options = {}) {
+  const {
+    classLineAdd = "diff add",
+    classLineRemove = "diff remove",
+    classActivePre = "has-diff"
+  } = options;
+  return transformerNotationMap(
+    {
+      classMap: {
+        "++": classLineAdd,
+        "--": classLineRemove
+      },
+      classActivePre
+    },
+    "@shikijs/transformers:notation-diff"
+  );
+}
+function transformerNotationHighlight(options = {}) {
+  const {
+    classActiveLine = "highlighted",
+    classActivePre = "has-highlighted"
+  } = options;
+  return transformerNotationMap(
+    {
+      classMap: {
+        highlight: classActiveLine,
+        hl: classActiveLine
+      },
+      classActivePre
+    },
+    "@shikijs/transformers:notation-highlight"
+  );
+}
+function highlightWordInLine(line, ignoredElement, word, className) {
+  const content = getTextContent(line);
+  let index = content.indexOf(word);
+  while (index !== -1) {
+    highlightRange.call(this, line.children, ignoredElement, index, word.length, className);
+    index = content.indexOf(word, index + 1);
+  }
+}
+function getTextContent(element) {
+  if (element.type === "text")
+    return element.value;
+  if (element.type === "element" && element.tagName === "span")
+    return element.children.map(getTextContent).join("");
+  return "";
+}
+function highlightRange(elements, ignoredElement, index, len, className) {
+  let currentIdx = 0;
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    if (element.type !== "element" || element.tagName !== "span" || element === ignoredElement)
+      continue;
+    const textNode = element.children[0];
+    if (textNode.type !== "text")
+      continue;
+    if (hasOverlap([currentIdx, currentIdx + textNode.value.length - 1], [index, index + len])) {
+      const start = Math.max(0, index - currentIdx);
+      const length = len - Math.max(0, currentIdx - index);
+      if (length === 0)
+        continue;
+      const separated = separateToken(element, textNode, start, length);
+      this.addClassToHast(separated[1], className);
+      const output = separated.filter(Boolean);
+      elements.splice(i, 1, ...output);
+      i += output.length - 1;
+    }
+    currentIdx += textNode.value.length;
+  }
+}
+function hasOverlap(range1, range2) {
+  return range1[0] <= range2[1] && range1[1] >= range2[0];
+}
+function separateToken(span, textNode, index, len) {
+  const text = textNode.value;
+  const createNode = (value) => inheritElement(span, {
+    children: [
+      {
+        type: "text",
+        value
+      }
+    ]
+  });
+  return [
+    index > 0 ? createNode(text.slice(0, index)) : void 0,
+    createNode(text.slice(index, index + len)),
+    index + len < text.length ? createNode(text.slice(index + len)) : void 0
+  ];
+}
+function inheritElement(original, overrides) {
+  return {
+    ...original,
+    properties: {
+      ...original.properties
+    },
+    ...overrides
+  };
+}
+function transformerNotationWordHighlight(options = {}) {
+  const {
+    classActiveWord = "highlighted-word",
+    classActivePre = void 0
+  } = options;
+  return createCommentNotationTransformer(
+    "@shikijs/transformers:notation-highlight-word",
+    /\s*\[!code word:((?:\\.|[^:\]])+)(:\d+)?\]/,
+    function([_, word, range], _line, comment, lines, index) {
+      const lineNum = range ? Number.parseInt(range.slice(1), 10) : lines.length;
+      word = word.replace(/\\(.)/g, "$1");
+      lines.slice(index, index + lineNum).forEach((line) => highlightWordInLine.call(this, line, comment, word, classActiveWord));
+      if (classActivePre)
+        this.addClassToHast(this.pre, classActivePre);
+      return true;
+    }
+  );
+}
+var symbol = Symbol("highlighted-lines");
+
+// src/mdx-plugins/rehype-code.ts
 import {
   getSingletonHighlighter,
   bundledLanguages
@@ -185,14 +432,12 @@ var metaValues = [
   }
 ];
 var rehypeCodeDefaultOptions = {
-  themes: {
-    light: "github-light",
-    dark: "github-dark"
-  },
+  themes: defaultThemes,
+  defaultColor: false,
   defaultLanguage: "plaintext",
   experimentalJSEngine: false,
-  defaultColor: false,
   transformers: [
+    createStyleTransformer(),
     transformerNotationHighlight(),
     transformerNotationWordHighlight(),
     transformerNotationDiff()
@@ -229,14 +474,6 @@ function rehypeCode(options = {}) {
           meta.__raw = codeOptions.filterMetaString(meta.__raw ?? "");
         }
         return code.replace(/\n$/, "");
-      },
-      line(hast) {
-        if (hast.children.length === 0) {
-          hast.children.push({
-            type: "text",
-            value: " "
-          });
-        }
       }
     },
     ...codeOptions.transformers

package/dist/search/client.js

@@ -1,6 +1,6 @@
 import {
   useOnChange
-} from "../chunk-I5BWASD6.js";
+} from "../chunk-EMWGTXSW.js";
 import "../chunk-MLKGABMK.js";
 
 // src/search/client.ts

package/dist/server/index.d.ts

@@ -5,8 +5,12 @@ export { S as SortedResult } from '../types-Ch8gnVgO.js';
 import { Metadata } from 'next';
 import { NextRequest } from 'next/server';
 import { LoaderOutput, LoaderConfig, InferPageType } from '../source/index.js';
+export { H as HighlightOptions, c as createStyleTransformer, d as defaultThemes, h as highlight } from '../shiki-FJwEmGMA.js';
 import 'react';
 import '../config-inq6kP6y.js';
+import 'shiki';
+import 'shiki/themes';
+import 'hast-util-to-jsx-runtime';
 
 /**
  * Flatten tree to an array of page nodes

package/dist/server/index.js

@@ -1,6 +1,11 @@
 import {
   remarkHeading
 } from "../chunk-4MNUWZIW.js";
+import {
+  createStyleTransformer,
+  defaultThemes,
+  highlight
+} from "../chunk-7CSWJQ5H.js";
 import "../chunk-MLKGABMK.js";
 
 // src/server/get-toc.ts
@@ -147,9 +152,12 @@ function createMetadataImage(options) {
 export {
   page_tree_exports as PageTree,
   createMetadataImage,
+  createStyleTransformer,
+  defaultThemes,
   findNeighbour,
   flattenTree,
   getGithubLastEdit,
   getTableOfContents,
+  highlight,
   separatePageTree
 };

package/dist/shiki-FJwEmGMA.d.ts

@@ -0,0 +1,16 @@
+import { ShikiTransformer, CodeToHastOptionsCommon, BundledLanguage, HighlighterCoreOptions, CodeOptionsThemes, CodeOptionsMeta } from 'shiki';
+import { BundledTheme } from 'shiki/themes';
+import { Components } from 'hast-util-to-jsx-runtime';
+import { ReactNode } from 'react';
+
+declare function createStyleTransformer(): ShikiTransformer;
+declare const defaultThemes: {
+    light: string;
+    dark: string;
+};
+type HighlightOptions = CodeToHastOptionsCommon<BundledLanguage> & Pick<HighlighterCoreOptions, 'engine'> & Partial<CodeOptionsThemes<BundledTheme>> & CodeOptionsMeta & {
+    components?: Partial<Components>;
+};
+declare function highlight(code: string, options: HighlightOptions): Promise<ReactNode>;
+
+export { type HighlightOptions as H, createStyleTransformer as c, defaultThemes as d, highlight as h };

package/dist/sidebar.js

@@ -3,7 +3,6 @@ import "./chunk-MLKGABMK.js";
 
 // src/sidebar.tsx
 import {
-  useCallback,
   createContext,
   useContext,
   useEffect,
@@ -38,9 +37,9 @@ function SidebarTrigger({
     {
       "aria-label": "Toggle Sidebar",
       "data-open": open,
-      onClick: useCallback(() => {
+      onClick: () => {
         setOpen(!open);
-      }, [open, setOpen]),
+      },
       ...props
     }
   );

package/dist/toc.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useOnChange
-} from "./chunk-I5BWASD6.js";
+} from "./chunk-EMWGTXSW.js";
 import "./chunk-MLKGABMK.js";
 
 // src/toc.tsx

package/dist/utils/use-on-change.js

@@ -1,6 +1,6 @@
 import {
   useOnChange
-} from "../chunk-I5BWASD6.js";
+} from "../chunk-EMWGTXSW.js";
 import "../chunk-MLKGABMK.js";
 export {
   useOnChange

package/dist/utils/use-shiki.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode, DependencyList } from 'react';
+import { H as HighlightOptions } from '../shiki-FJwEmGMA.js';
+import 'shiki';
+import 'shiki/themes';
+import 'hast-util-to-jsx-runtime';
+
+declare function useShiki(code: string, options: HighlightOptions & {
+    defaultValue?: ReactNode;
+}, deps?: DependencyList): ReactNode;
+
+export { useShiki };

package/dist/utils/use-shiki.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  highlight
+} from "../chunk-7CSWJQ5H.js";
+import "../chunk-MLKGABMK.js";
+
+// src/utils/use-shiki.tsx
+import {
+  useEffect,
+  useState
+} from "react";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { jsx } from "react/jsx-runtime";
+var jsEngine;
+function useShiki(code, options, deps) {
+  const [out, setOut] = useState(() => {
+    if (options.defaultValue) return options.defaultValue;
+    const { pre: Pre = "pre", code: Code = "code" } = options.components ?? {};
+    return /* @__PURE__ */ jsx(Pre, { children: /* @__PURE__ */ jsx(Code, { children: code }) });
+  });
+  if (!options.engine && !jsEngine) {
+    jsEngine = createJavaScriptRegexEngine();
+  }
+  useEffect(
+    () => {
+      void highlight(code, {
+        ...options,
+        engine: options.engine ?? jsEngine
+      }).then(setOut);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- custom deps
+    deps ?? [code, options.lang]
+  );
+  return out;
+}
+export {
+  useShiki
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-core",
-  "version": "14.0.1",
+  "version": "14.1.0",
   "description": "The library for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -48,6 +48,10 @@
       "import": "./dist/utils/use-on-change.js",
       "types": "./dist/utils/use-on-change.d.ts"
     },
+    "./utils/use-shiki": {
+      "import": "./dist/utils/use-shiki.js",
+      "types": "./dist/utils/use-shiki.d.ts"
+    },
     "./link": {
       "import": "./dist/link.js",
       "types": "./dist/link.d.ts"
@@ -65,19 +69,19 @@
     "dist/*"
   ],
   "dependencies": {
-    "@formatjs/intl-localematcher": "^0.5.5",
+    "@formatjs/intl-localematcher": "^0.5.6",
     "@orama/orama": "^3.0.1",
-    "@shikijs/rehype": "^1.22.0",
-    "@shikijs/transformers": "^1.22.0",
+    "@shikijs/rehype": "^1.22.2",
     "github-slugger": "^2.0.0",
     "hast-util-to-estree": "^3.1.0",
+    "hast-util-to-jsx-runtime": "^2.3.2",
     "image-size": "^1.1.1",
     "negotiator": "^1.0.0",
     "react-remove-scroll": "^2.6.0",
     "remark": "^15.0.0",
     "remark-gfm": "^4.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
-    "shiki": "^1.22.0",
+    "shiki": "^1.22.2",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
@@ -87,8 +91,8 @@
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.3",
     "@types/negotiator": "^0.6.3",
-    "@types/node": "22.7.8",
-    "@types/react": "^18.3.11",
+    "@types/node": "22.8.1",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "algoliasearch": "4.24.0",
     "mdast-util-mdx-jsx": "^3.1.3",
@@ -96,16 +100,31 @@
     "next": "^15.0.0",
     "remark-mdx": "^3.1.0",
     "remark-rehype": "^11.1.1",
+    "shiki-transformers": "^1.0.0",
     "unified": "^11.0.5",
-    "eslint-config-custom": "0.0.0",
-    "tsconfig": "0.0.0"
+    "tsconfig": "0.0.0",
+    "eslint-config-custom": "0.0.0"
   },
-  "optionalDependencies": {
+  "peerDependencies": {
     "algoliasearch": "4.24.0",
-    "next": "15.0.0",
+    "next": "14.x.x || 15.x.x",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
+  "peerDependenciesMeta": {
+    "algoliasearch": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

package/dist/chunk-I5BWASD6.js

@@ -1,13 +0,0 @@
-// src/utils/use-on-change.ts
-import { useState } from "react";
-function useOnChange(value, onChange, isUpdated = (prev, current) => prev !== current) {
-  const [prev, setPrev] = useState(value);
-  if (isUpdated(prev, value)) {
-    onChange(value, prev);
-    setPrev(value);
-  }
-}
-
-export {
-  useOnChange
-};