refactor: use @monaco-editor/react instead

libnyanpasu · Sep 7, 2024 · c69757b · c69757b
1 parent ca5b15d
commit c69757b
Show file tree

Hide file tree

Showing 25 changed files with 324 additions and 274 deletions.
diff --git a/frontend/nyanpasu/package.json b/frontend/nyanpasu/package.json
@@ -16,6 +16,7 @@
     "@generouted/react-router": "1.19.6",
     "@juggle/resize-observer": "3.4.0",
     "@material/material-color-utilities": "0.3.0",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "5.16.7",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
@@ -57,7 +58,7 @@
     "@vitejs/plugin-react": "4.3.1",
     "@vitejs/plugin-react-swc": "3.7.0",
     "clsx": "2.1.1",
-    "meta-json-schema": "github:libnyanpasu/meta-json-schema#main",
+    "meta-json-schema": "git+https://github.com/libnyanpasu/meta-json-schema#main",
     "monaco-yaml": "5.2.2",
     "nanoid": "5.0.7",
     "sass": "1.78.0",

diff --git a/frontend/nyanpasu/src/components/app/app-drawer.tsx b/frontend/nyanpasu/src/components/app/app-drawer.tsx
@@ -1,6 +1,5 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { useState } from "react";
-import { classNames } from "@/utils";
 import getSystem from "@/utils/get-system";
 import { MenuOpen } from "@mui/icons-material";
 import {
@@ -25,7 +24,7 @@ export const AppDrawer = () => {
   const DrawerTitle = () => {
     return (
       <div
-        className={classNames(
+        className={cn(
           "fixed z-10 flex items-center gap-2",
           OS === "macos" ? "left-24 top-3" : "left-4 top-1.5",
         )}

diff --git a/frontend/nyanpasu/src/components/app/drawer-content.tsx b/frontend/nyanpasu/src/components/app/drawer-content.tsx
@@ -1,5 +1,4 @@
 import { useSize } from "ahooks";
-import clsx from "clsx";
 import { useAtom } from "jotai";
 import { merge } from "lodash-es";
 import { CSSProperties, useCallback, useEffect, useRef } from "react";
@@ -8,6 +7,7 @@ import getSystem from "@/utils/get-system";
 import { languageQuirks } from "@/utils/language";
 import { getRoutesWithIcon } from "@/utils/routes-utils";
 import { useNyanpasu } from "@nyanpasu/interface";
+import { cn } from "@nyanpasu/ui";
 import AnimatedLogo from "../layout/animated-logo";
 import RouteListItem from "./modules/route-list-item";
 
@@ -53,7 +53,7 @@ export const DrawerContent = ({
   return (
     <div
       ref={contentRef}
-      className={clsx(
+      className={cn(
         "p-4",
         getSystem() === "macos" ? "pt-14" : "pt-8",
         "w-full",

diff --git a/frontend/nyanpasu/src/components/app/modules/route-list-item.tsx b/frontend/nyanpasu/src/components/app/modules/route-list-item.tsx
@@ -1,11 +1,11 @@
 import { createElement } from "react";
 import { useTranslation } from "react-i18next";
 import { useMatch, useNavigate } from "react-router-dom";
-import { classNames } from "@/utils";
 import { languageQuirks } from "@/utils/language";
 import { SvgIconComponent } from "@mui/icons-material";
 import { alpha, ListItemButton, ListItemIcon, useTheme } from "@mui/material";
 import { useNyanpasu } from "@nyanpasu/interface";
+import { cn } from "@nyanpasu/ui";
 
 export const RouteListItem = ({
   name,
@@ -30,7 +30,7 @@ export const RouteListItem = ({
 
   return (
     <ListItemButton
-      className={classNames(
+      className={cn(
         onlyIcon ? "!mx-auto !size-16 !rounded-3xl" : "!rounded-full !pr-14",
       )}
       sx={{
@@ -55,7 +55,7 @@ export const RouteListItem = ({
 
       {!onlyIcon && (
         <div
-          className={classNames(
+          className={cn(
             "w-full text-nowrap pb-1 pt-1",
             nyanpasuConfig?.language &&
               languageQuirks[nyanpasuConfig?.language].drawer.itemClassNames,

diff --git a/frontend/nyanpasu/src/components/base/content-display.tsx b/frontend/nyanpasu/src/components/base/content-display.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { classNames } from "@/utils";
 import { Public } from "@mui/icons-material";
+import { cn } from "@nyanpasu/ui";
 
 export interface ContentDisplayProps {
   className?: string;
@@ -14,10 +14,7 @@ export const ContentDisplay = ({
   className,
 }: ContentDisplayProps) => (
   <div
-    className={classNames(
-      "flex h-full w-full items-center justify-center",
-      className,
-    )}
+    className={cn("flex h-full w-full items-center justify-center", className)}
   >
     <div className="flex flex-col items-center gap-4">
       {children ? (

diff --git a/frontend/nyanpasu/src/components/layout/animated-logo.tsx b/frontend/nyanpasu/src/components/layout/animated-logo.tsx
@@ -1,8 +1,8 @@
 import { AnimatePresence, motion, Variants } from "framer-motion";
 import { CSSProperties } from "react";
 import LogoSvg from "@/assets/image/logo.svg?react";
-import { classNames } from "@/utils";
 import { useNyanpasu } from "@nyanpasu/interface";
+import { cn } from "@nyanpasu/ui";
 import styles from "./animated-logo.module.scss";
 
 // @ts-expect-error framer-motion types is wrong
@@ -59,7 +59,7 @@ export default function AnimatedLogo({
   return (
     <AnimatePresence initial={false}>
       <Logo
-        className={classNames(styles.LogoSchema, className)}
+        className={cn(styles.LogoSchema, className)}
         variants={motionVariants[disable ? "none" : "default"]}
         style={style}
         drag

diff --git a/frontend/nyanpasu/src/components/layout/layout-control.tsx b/frontend/nyanpasu/src/components/layout/layout-control.tsx
@@ -1,7 +1,6 @@
 import { useMemoizedFn } from "ahooks";
 import { debounce } from "lodash-es";
 import { useEffect, useState } from "react";
-import { classNames } from "@/utils";
 import { notification, NotificationType } from "@/utils/notification";
 import {
   CloseRounded,
@@ -13,6 +12,7 @@ import {
 } from "@mui/icons-material";
 import { alpha, Button, ButtonProps, useTheme } from "@mui/material";
 import { save_window_size_state, useNyanpasu } from "@nyanpasu/interface";
+import { cn } from "@nyanpasu/ui";
 import { platform, type Platform } from "@tauri-apps/api/os";
 import { appWindow } from "@tauri-apps/api/window";
 
@@ -76,7 +76,7 @@ export const LayoutControl = ({ className }: { className?: string }) => {
   }, []);
 
   return (
-    <div className={classNames("flex gap-1", className)} data-tauri-drag-region>
+    <div className={cn("flex gap-1", className)} data-tauri-drag-region>
       <CtrlButton onClick={toggleAlwaysOnTop}>
         {nyanpasuConfig?.always_on_top ? (
           <PushPin fontSize="small" style={{ transform: "rotate(15deg)" }} />

diff --git a/frontend/nyanpasu/src/components/layout/page-transition.tsx b/frontend/nyanpasu/src/components/layout/page-transition.tsx
@@ -1,7 +1,7 @@
 import { AnimatePresence, motion, Variant } from "framer-motion";
 import { useLocation, useOutlet } from "react-router-dom";
-import { classNames } from "@/utils";
 import { useNyanpasu } from "@nyanpasu/interface";
+import { cn } from "@nyanpasu/ui";
 
 type PageVariantKey = "initial" | "visible" | "hidden";
 
@@ -60,7 +60,7 @@ export default function PageTransition({ className }: { className?: string }) {
   return (
     <AnimatePresence mode="popLayout" initial={false}>
       <motion.div
-        className={classNames("page-transition", className)}
+        className={cn("page-transition", className)}
         key={hashkey}
         layout
         layoutId={hashkey}

diff --git a/frontend/nyanpasu/src/components/logs/log-item.tsx b/frontend/nyanpasu/src/components/logs/log-item.tsx
@@ -1,9 +1,9 @@
 import { useAsyncEffect } from "ahooks";
 import { useState } from "react";
-import { classNames } from "@/utils";
 import { formatAnsi } from "@/utils/shiki";
 import { useTheme } from "@mui/material";
 import { LogMessage } from "@nyanpasu/interface";
+import { cn } from "@nyanpasu/ui";
 import styles from "./log-item.module.scss";
 
 export const LogItem = ({ value }: { value: LogMessage }) => {
@@ -38,7 +38,7 @@ export const LogItem = ({ value }: { value: LogMessage }) => {
 
       <div className="text-wrap border-b border-slate-200 pb-2">
         <p
-          className={classNames(
+          className={cn(
             styles.item,
             palette.mode === "dark" && styles.dark,
             "data",

diff --git a/frontend/nyanpasu/src/components/profiles/modules/side-log.tsx b/frontend/nyanpasu/src/components/profiles/modules/side-log.tsx
@@ -1,10 +1,10 @@
 import { isEmpty } from "lodash-es";
-import { memo, useEffect } from "react";
+import { memo } from "react";
 import { VList } from "virtua";
-import { classNames } from "@/utils";
 import { RamenDining, Terminal } from "@mui/icons-material";
 import { Divider } from "@mui/material";
 import { useClash } from "@nyanpasu/interface";
+import { cn } from "@nyanpasu/ui";
 import { filterProfiles } from "../utils";
 
 const LogListItem = memo(function LogListItem({
@@ -39,7 +39,7 @@ export const SideLog = ({ className }: SideLogProps) => {
   const { scripts } = filterProfiles(getProfiles.data?.items);
 
   return (
-    <div className={classNames("w-full", className)}>
+    <div className={cn("w-full", className)}>
       <div className="flex items-center justify-between p-2 pl-4">
         <div className="flex items-center gap-2">
           <Terminal />

diff --git a/frontend/nyanpasu/src/components/profiles/profile-dialog.tsx b/frontend/nyanpasu/src/components/profiles/profile-dialog.tsx
@@ -2,6 +2,8 @@ import { version } from "~/package.json";
 import { useAsyncEffect } from "ahooks";
 import {
   createContext,
+  lazy,
+  Suspense,
   use,
   useEffect,
   useMemo,
@@ -15,13 +17,15 @@ import {
   useForm,
 } from "react-hook-form-mui";
 import { useTranslation } from "react-i18next";
+import { useLatest } from "react-use";
 import { Divider, InputAdornment } from "@mui/material";
 import { Profile, useClash } from "@nyanpasu/interface";
 import { BaseDialog } from "@nyanpasu/ui";
 import { LabelSwitch } from "../setting/modules/clash-field";
-import { ProfileMonacoView, ProfileMonacoViewRef } from "./profile-monaco-view";
 import { ReadProfile } from "./read-profile";
 
+const ProfileMonacoViewer = lazy(() => import("./profile-monaco-viewer"));
+
 export interface ProfileDialogProps {
   profile?: Profile.Item;
   open: boolean;
@@ -94,6 +98,13 @@ export const ProfileDialog = ({
     setLocalProfileMessage("");
   };
 
+  const [editor, setEditor] = useState({
+    value: "",
+    language: "yaml",
+  });
+
+  const latestEditor = useLatest(editor);
+
   const onSubmit = handleSubmit(async (form) => {
     const toCreate = async () => {
       if (isRemote) {
@@ -109,7 +120,7 @@ export const ProfileDialog = ({
     };
 
     const toUpdate = async () => {
-      const value = profileMonacoViewRef.current?.getValue() || "";
+      const value = latestEditor.current.value;
       await setProfileFile(form.uid, value);
       await setProfiles(form.uid, form);
     };
@@ -128,13 +139,6 @@ export const ProfileDialog = ({
     }
   });
 
-  const profileMonacoViewRef = useRef<ProfileMonacoViewRef>(null);
-
-  const [editor, setEditor] = useState({
-    value: "",
-    language: "yaml",
-  });
-
   const dialogProps = isEdit && {
     contentStyle: {
       overflow: "hidden",
@@ -296,15 +300,20 @@ export const ProfileDialog = ({
 
           <Divider orientation="vertical" />
 
-          <ProfileMonacoView
-            className="w-full"
-            ref={profileMonacoViewRef}
-            readonly={isRemote}
-            schemaType="clash"
-            open={open}
-            value={editor.value}
-            language={editor.language}
-          />
+          <Suspense fallback={null}>
+            {open && (
+              <ProfileMonacoViewer
+                className="w-full"
+                readonly={isRemote}
+                schemaType="clash"
+                value={editor.value}
+                onChange={(value) =>
+                  setEditor((editor) => ({ ...editor, value }))
+                }
+                language={editor.language}
+              />
+            )}
+          </Suspense>
         </div>
       ) : (
         MetaInfo

diff --git a/frontend/nyanpasu/src/components/profiles/profile-item.tsx b/frontend/nyanpasu/src/components/profiles/profile-item.tsx
@@ -1,5 +1,4 @@
 import { useLockFn, useMemoizedFn, useSetState } from "ahooks";
-import clsx from "clsx";
 import dayjs from "dayjs";
 import { AnimatePresence, motion } from "framer-motion";
 import { memo, useEffect, useMemo, useState } from "react";
@@ -253,7 +252,7 @@ export const ProfileItem = memo(function ProfileItem({
           </div>
 
           <div
-            className={clsx(
+            className={cn(
               "flex items-center justify-between gap-4",
               !isRemote && "invisible",
             )}

diff --git a/frontend/nyanpasu/src/components/profiles/profile-monaco-diff-viewer.tsx b/frontend/nyanpasu/src/components/profiles/profile-monaco-diff-viewer.tsx
@@ -0,0 +1,9 @@
+import "@/services/monaco";
+import { DiffEditor, DiffEditorProps } from "@monaco-editor/react";
+import { beforeEditorMount } from "./profile-monaco-viewer";
+
+export default function ProfileMonacoDiffViewer(
+  props: Omit<DiffEditorProps, "beforeMount">,
+) {
+  return <DiffEditor {...props} beforeMount={beforeEditorMount} />;
+}