@yuntijs/ui 1.0.0 → 1.1.0-beta.10

package/es/hooks/useHighlight.js

@@ -1,82 +1,80 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from '@shikijs/transformers';
-import { createHighlighter } from 'shiki';
+import { useTheme, useThemeMode } from 'antd-style';
+import { useMemo } from 'react';
+import { codeToHtml } from 'shiki';
 import useSWR from 'swr';
-import { themeConfig } from "../Highlighter/theme";
+import { Md5 } from 'ts-md5';
 import { languageMap } from "./languageMap";
 export var FALLBACK_LANG = 'txt';
-var FALLBACK_LANGS = [FALLBACK_LANG];
-var cacheHighlighter;
-var initHighlighter = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(lang) {
-    var highlighter, language;
+
+// @Todo: use worker to improve performance
+export var useHighlight = function useHighlight(text, lang, enableTransformer) {
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
+  var language = lang.toLowerCase();
+  var matchedLanguage = useMemo(function () {
+    return languageMap.includes(language) ? language : FALLBACK_LANG;
+  }, [language]);
+  var theme = useTheme();
+  var transformers = useMemo(function () {
+    if (!enableTransformer) return;
+    return [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()];
+  }, [enableTransformer]);
+  var key = useMemo(function () {
+    return Md5.hashStr(text);
+  }, [text]);
+  var shikiTheme = useMemo(function () {
+    if (language === 'md') {
+      return isDarkMode ? 'catppuccin-mocha' : 'catppuccin-latte';
+    }
+    return isDarkMode ? 'slack-dark' : 'slack-ochin';
+  }, [isDarkMode, language]);
+  return useSWR([matchedLanguage, isDarkMode ? 'd' : 'l', key].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          highlighter = cacheHighlighter;
-          language = lang.toLowerCase();
-          if (!(highlighter && FALLBACK_LANGS.includes(language))) {
-            _context.next = 4;
-            break;
-          }
-          return _context.abrupt("return", highlighter);
+          _context.prev = 0;
+          return _context.abrupt("return", codeToHtml(text, {
+            colorReplacements: {
+              'slack-dark': {
+                '#4ec9b0': theme.yellow,
+                '#569cd6': theme.colorError,
+                '#6a9955': theme.gray,
+                '#9cdcfe': theme.colorText,
+                '#b5cea8': theme.purple10,
+                '#c586c0': theme.colorInfo,
+                '#ce9178': theme.colorSuccess,
+                '#dcdcaa': theme.colorWarning,
+                '#e6e6e6': theme.colorText
+              },
+              'slack-ochin': {
+                '#002339': theme.colorText,
+                '#0991b6': theme.colorError,
+                '#174781': theme.purple10,
+                '#2f86d2': theme.colorText,
+                '#357b42': theme.gray,
+                '#7b30d0': theme.colorInfo,
+                '#7eb233': theme.colorWarningTextActive,
+                '#a44185': theme.colorSuccess,
+                '#dc3eb7': theme.yellow11
+              }
+            },
+            lang: matchedLanguage,
+            theme: shikiTheme,
+            transformers: transformers
+          }));
         case 4:
-          if (languageMap.includes(language) && !FALLBACK_LANGS.includes(language)) {
-            FALLBACK_LANGS.push(language);
-          }
-          _context.next = 7;
-          return createHighlighter({
-            langs: FALLBACK_LANGS,
-            themes: [themeConfig(true), themeConfig(false), 'catppuccin-latte', 'catppuccin-mocha']
-          });
-        case 7:
-          highlighter = _context.sent;
-          cacheHighlighter = highlighter;
-          return _context.abrupt("return", highlighter);
-        case 10:
+          _context.prev = 4;
+          _context.t0 = _context["catch"](0);
+          console.warn('shiki Highlight error:', _context.t0);
+          return _context.abrupt("return", text);
+        case 8:
         case "end":
           return _context.stop();
       }
-    }, _callee);
-  }));
-  return function initHighlighter(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
-export var useHighlight = function useHighlight(text, lang, isDarkMode) {
-  return useSWR([lang === null || lang === void 0 ? void 0 : lang.toLowerCase(), isDarkMode ? 'dark' : 'light', text].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var language, theme, highlighter, html;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _context2.prev = 0;
-          language = lang.toLowerCase();
-          theme = isDarkMode ? 'dark' : 'light';
-          if (language === 'md') {
-            theme = isDarkMode ? 'catppuccin-mocha' : 'catppuccin-latte';
-          }
-          _context2.next = 6;
-          return initHighlighter(language);
-        case 6:
-          highlighter = _context2.sent;
-          html = highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
-            lang: languageMap.includes(language) ? language : FALLBACK_LANG,
-            theme: theme,
-            transformers: [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()]
-          });
-          return _context2.abrupt("return", html);
-        case 11:
-          _context2.prev = 11;
-          _context2.t0 = _context2["catch"](0);
-          return _context2.abrupt("return", '');
-        case 14:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2, null, [[0, 11]]);
-  })), {
-    revalidateOnFocus: false
-  });
+    }, _callee, null, [[0, 4]]);
+  })));
 };
 export { languageMap } from "./languageMap";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0",
+  "version": "1.1.0-beta.10",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -80,7 +80,6 @@
     ]
   },
   "dependencies": {
-    "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.2",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@lexical/react": "^0.23.1",
@@ -91,7 +90,7 @@
     "@lobehub/ui": "^1.164.2",
     "@melloware/react-logviewer": "^5.2.0",
     "@monaco-editor/loader": "^1.4.0",
-    "@shikijs/transformers": "^1.10.3",
+    "@shikijs/transformers": "^3.2.1",
     "leva": "^0",
     "lexical": "^0.23.1",
     "lodash-es": "^4",
@@ -102,8 +101,9 @@
     "react-error-boundary": "^4",
     "react-layout-kit": "^1",
     "react18-json-view": "^0.2.8",
-    "shiki": "^1.10.3",
+    "shiki": "^3.2.1",
     "swr": "^2.2.5",
+    "ts-md5": "^1.3.1",
     "url-join": "^5.0.0",
     "use-merge-value": "^1.2.0"
   },
@@ -130,7 +130,7 @@
     "jsdom": "^22",
     "lint-staged": "^15",
     "mdast-util-to-markdown": "^2.1.2",
-    "monaco-editor": "^0.45.0",
+    "monaco-editor": "^0.52.2",
     "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",