fumadocs-core 12.0.6 → 12.1.0

package/dist/mdx-plugins/index.d.ts

@@ -15,6 +15,9 @@ interface IconOptions {
     shortcuts?: Record<string, string>;
     extend?: Record<string, CodeBlockIcon>;
 }
+/**
+ * Inject icons to `icon` property (as HTML)
+ */
 declare function transformerIcon(options?: IconOptions): ShikiTransformer;
 
 declare const rehypeCodeDefaultOptions: RehypeCodeOptions;
@@ -34,6 +37,12 @@ type RehypeCodeOptions = RehypeShikiOptions & {
      * Add icon to code blocks
      */
     icon?: IconOptions | false;
+    /**
+     * Wrap code blocks in `<Tab>` component when "tab" meta string presents
+     *
+     * @defaultValue true
+     */
+    tab?: false;
 };
 /**
  * Handle codeblocks

package/dist/mdx-plugins/index.js

@@ -22,7 +22,6 @@ import {
 } from "@shikijs/transformers";
 
 // src/mdx-plugins/transformer-icon.ts
-import { toEstree } from "hast-util-to-estree";
 var defaultShortcuts = {
   js: "javascript",
   jsx: "react",
@@ -143,118 +142,21 @@ var defaultIcons = {
 function transformerIcon(options = {}) {
   const shortcuts = __spreadValues(__spreadValues({}, defaultShortcuts), options.shortcuts);
   const icons = __spreadValues(__spreadValues({}, defaultIcons), options.extend);
+  const defaultIcon = "default" in icons ? icons.default : void 0;
   return {
     name: "rehype-code:icon",
-    root(root) {
+    pre(pre) {
       const lang = this.options.lang;
       if (!lang) return;
-      const pre = root.children[0];
-      if (pre.type !== "element" || pre.tagName !== "pre") return;
       const iconName = lang in shortcuts ? shortcuts[lang] : lang;
-      const icon = iconName in icons ? icons[iconName] : icons.default;
-      const tree = toEstree(pre, {
-        elementAttributeNameCase: "react"
-      });
-      if (tree.body[0].type === "ExpressionStatement") {
-        const expression = tree.body[0].expression;
-        if (expression.type === "JSXElement") {
-          expression.openingElement.attributes.push({
-            type: "JSXAttribute",
-            name: {
-              type: "JSXIdentifier",
-              name: "icon"
-            },
-            value: createSVGElement(icon)
-          });
-        }
+      const icon = iconName in icons ? icons[iconName] : defaultIcon;
+      if (icon) {
+        pre.properties.icon = `<svg viewBox="${icon.viewBox}"><path d="${icon.d}" fill="${icon.fill}" /></svg>`;
       }
-      return {
-        type: "root",
-        children: [
-          {
-            type: "mdxFlowExpression",
-            value: "",
-            data: {
-              estree: tree
-            }
-          }
-        ]
-      };
+      return pre;
     }
   };
 }
-function createSVGElement(icon) {
-  return {
-    type: "JSXElement",
-    openingElement: {
-      type: "JSXOpeningElement",
-      attributes: [
-        {
-          type: "JSXAttribute",
-          name: {
-            type: "JSXIdentifier",
-            name: "viewBox"
-          },
-          value: {
-            type: "Literal",
-            value: icon.viewBox
-          }
-        }
-      ],
-      name: {
-        type: "JSXIdentifier",
-        name: "svg"
-      },
-      selfClosing: false
-    },
-    closingElement: {
-      type: "JSXClosingElement",
-      name: {
-        type: "JSXIdentifier",
-        name: "svg"
-      }
-    },
-    children: [
-      {
-        type: "JSXElement",
-        openingElement: {
-          type: "JSXOpeningElement",
-          attributes: [
-            {
-              type: "JSXAttribute",
-              name: {
-                type: "JSXIdentifier",
-                name: "fill"
-              },
-              value: {
-                type: "Literal",
-                value: icon.fill
-              }
-            },
-            {
-              type: "JSXAttribute",
-              name: {
-                type: "JSXIdentifier",
-                name: "d"
-              },
-              value: {
-                type: "Literal",
-                value: icon.d
-              }
-            }
-          ],
-          name: {
-            type: "JSXIdentifier",
-            name: "path"
-          },
-          selfClosing: true
-        },
-        closingElement: null,
-        children: []
-      }
-    ]
-  };
-}
 
 // src/mdx-plugins/rehype-code.ts
 var metaValues = [
@@ -265,6 +167,10 @@ var metaValues = [
   {
     name: "custom",
     regex: new RegExp('custom="(?<value>[^"]+)"')
+  },
+  {
+    name: "tab",
+    regex: new RegExp('tab="(?<value>[^"]+)"')
   }
 ];
 var rehypeCodeDefaultOptions = {
@@ -282,8 +188,8 @@ var rehypeCodeDefaultOptions = {
     const map = {};
     for (const value of metaValues) {
       const result = value.regex.exec(meta);
-      if (result == null ? void 0 : result.groups) {
-        map[value.name] = result.groups.value;
+      if (result) {
+        map[value.name] = result[1];
       }
     }
     return map;
@@ -326,11 +232,39 @@ function rehypeCode(options = {}) {
       transformerIcon(codeOptions.icon)
     ];
   }
+  if (codeOptions.tab !== false) {
+    codeOptions.transformers = [...codeOptions.transformers, transformerTab()];
+  }
   if (codeOptions.defaultLang) {
     codeOptions.defaultLanguage = codeOptions.defaultLang;
   }
   return rehypeShiki.call(this, codeOptions);
 }
+function transformerTab() {
+  return {
+    name: "rehype-code:tab",
+    root(root) {
+      const meta = this.options.meta;
+      if (typeof (meta == null ? void 0 : meta.tab) !== "string") return root;
+      return {
+        type: "root",
+        children: [
+          {
+            type: "mdxJsxFlowElement",
+            name: "Tab",
+            data: {
+              _codeblock: true
+            },
+            attributes: [
+              { type: "mdxJsxAttribute", name: "value", value: meta.tab }
+            ],
+            children: root.children
+          }
+        ]
+      };
+    }
+  };
+}
 
 // src/mdx-plugins/remark-image.ts
 import { existsSync } from "fs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-core",
-  "version": "12.0.6",
+  "version": "12.1.0",
   "description": "The library for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -120,11 +120,10 @@
   ],
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
-    "@shikijs/rehype": "^1.6.4",
-    "@shikijs/transformers": "^1.6.4",
+    "@shikijs/rehype": "^1.6.5",
+    "@shikijs/transformers": "^1.6.5",
     "flexsearch": "0.7.21",
     "github-slugger": "^2.0.0",
-    "hast-util-to-estree": "^3.1.0",
     "negotiator": "^0.6.3",
     "npm-to-yarn": "^2.2.1",
     "react-remove-scroll": "^2.5.10",
@@ -132,7 +131,7 @@
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "shiki": "^1.6.4",
+    "shiki": "^1.6.5",
     "swr": "^2.2.5",
     "unist-util-visit": "^5.0.0"
   },