@lobehub/ui 1.94.2 → 1.94.4

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,11 +1,9 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useThemeMode } from 'antd-style';
 import { Loader2 } from 'lucide-react';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { Center } from 'react-layout-kit';
-import { codeToHtml } from 'shikiji';
-import { themeConfig } from "../theme";
 import Icon from "../../Icon";
+import { useHighlight } from "../../hooks/useHighlight";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,27 +18,15 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    data = _useState4[0],
-    setData = _useState4[1];
-  useEffect(function () {
-    setIsLoading(true);
-    codeToHtml(children.trim(), {
-      lang: language,
-      theme: themeConfig(isDarkMode)
-    }).then(function (code) {
-      setData(code);
-    });
-    setIsLoading(false);
-  }, [children, language, isDarkMode]);
+  var useCodeToHtml = useHighlight(function (s) {
+    return s.useCodeToHtml;
+  });
+  var _useCodeToHtml = useCodeToHtml(children.trim(), language, isDarkMode),
+    data = _useCodeToHtml.data,
+    isLoading = _useCodeToHtml.isLoading;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading ? /*#__PURE__*/_jsx("code", {
-      className: className,
+      className: cx(styles.unshiki, className),
       style: style,
       children: children
     }) : /*#__PURE__*/_jsx("div", {

package/es/Highlighter/SyntaxHighlighter/style.d.ts

@@ -2,4 +2,5 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     loading: string;
     prism: import("antd-style").SerializedStyles;
     shiki: string;
+    unshiki: import("antd-style").SerializedStyles;
 }>;

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
@@ -11,6 +11,7 @@ export var useStyles = createStyles(function (_ref) {
   return {
     loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        top: 0;\n        right: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        height: 34px;\n        padding: 0 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow: auto;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
-    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow-x: auto;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n        }\n      "]))))
+    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow-x: auto;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n        }\n      "])))),
+    unshiki: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 8px;\n    "])))
   };
 });

package/es/Markdown/CodeBlock.js

@@ -9,6 +9,7 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import Highlighter from "../Highlighter";
 import Snippet from "../Snippet";
+import { FALLBACK_LANG } from "../hooks/useHighlight";
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
@@ -34,11 +35,12 @@ var Code = /*#__PURE__*/memo(function (_ref2) {
     className = _properties$children$.className;
   if (!children) return;
   var content = Array.isArray(children) ? children[0] : children;
+  var lang = (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || FALLBACK_LANG;
   if (countLines(content) === 1 && content.length <= 60) {
     return /*#__PURE__*/_jsx(Snippet, {
       className: styles.container,
       "data-code-type": "highlighter",
-      language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+      language: lang,
       type: 'block',
       children: content
     });
@@ -50,7 +52,7 @@ var Code = /*#__PURE__*/memo(function (_ref2) {
       fontSize: 16
     },
     fullFeatured: fullFeatured,
-    language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+    language: lang,
     type: "block",
     children: content
   });

package/es/hooks/useHighlight.d.ts

@@ -1,2 +1,10 @@
-export declare const useHighlight: (text: string, language: string, isDarkMode: boolean) => import("swr/_internal").SWRResponse<string, any, any>;
+import { type Highlighter } from 'shikiji';
+import { type SWRResponse } from 'swr';
+export declare const FALLBACK_LANG = "markdown";
+interface Store {
+    highlighter?: Highlighter;
+    initHighlighter: () => Promise<Highlighter>;
+    useCodeToHtml: (text: string, language: string, isDarkMode: boolean) => SWRResponse<string>;
+}
+export declare const useHighlight: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand/vanilla").StoreApi<Store>>;
 export { default as languageMap } from './languageMap';

package/es/hooks/useHighlight.js

@@ -1,12 +1,100 @@
-import { codeToHtml } from 'shikiji';
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getHighlighter } from 'shikiji';
 import useSWR from 'swr';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
 import { themeConfig } from "../Highlighter/theme";
-export var useHighlight = function useHighlight(text, language, isDarkMode) {
-  return useSWR([text, language, String(isDarkMode)].join('-'), function () {
-    return codeToHtml(text, {
-      lang: language,
-      theme: themeConfig(isDarkMode)
-    });
-  });
-};
+import languageMap from "./languageMap";
+export var FALLBACK_LANG = 'markdown';
+var FALLBACK_LANGS = ['ts', 'typescript', 'js', 'javascript', 'markdown', 'md'];
+var THEME = [themeConfig(true), themeConfig(false)];
+export var useHighlight = createWithEqualityFn(function (set, get) {
+  return {
+    highlighter: undefined,
+    initHighlighter: function () {
+      var _initHighlighter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var highlighter;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              highlighter = get().highlighter;
+              if (!highlighter) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return", highlighter);
+            case 5:
+              _context.next = 7;
+              return getHighlighter({
+                langs: FALLBACK_LANGS,
+                themes: THEME
+              });
+            case 7:
+              highlighter = _context.sent;
+              set({
+                highlighter: highlighter
+              });
+              return _context.abrupt("return", highlighter);
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function initHighlighter() {
+        return _initHighlighter.apply(this, arguments);
+      }
+      return initHighlighter;
+    }(),
+    useCodeToHtml: function useCodeToHtml(text, language, isDarkMode) {
+      return useSWR([text, language, Number(isDarkMode)].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var theme, lang, highlighter, html;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              theme = isDarkMode ? 'dark' : 'light';
+              lang = language;
+              _context2.prev = 2;
+              _context2.next = 5;
+              return get().initHighlighter();
+            case 5:
+              highlighter = _context2.sent;
+              if (FALLBACK_LANGS.includes(lang)) {
+                _context2.next = 13;
+                break;
+              }
+              if (!languageMap.includes(lang)) {
+                _context2.next = 12;
+                break;
+              }
+              _context2.next = 10;
+              return highlighter === null || highlighter === void 0 ? void 0 : highlighter.loadLanguage(lang);
+            case 10:
+              _context2.next = 13;
+              break;
+            case 12:
+              lang = FALLBACK_LANG;
+            case 13:
+              _context2.next = 15;
+              return highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
+                lang: lang,
+                theme: theme
+              });
+            case 15:
+              html = _context2.sent;
+              return _context2.abrupt("return", html);
+            case 19:
+              _context2.prev = 19;
+              _context2.t0 = _context2["catch"](2);
+              return _context2.abrupt("return", "<code>".concat(text, "</code>"));
+            case 22:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[2, 19]]);
+      })));
+    }
+  };
+}, shallow);
 export { default as languageMap } from "./languageMap";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.94.2",
+  "version": "1.94.4",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",