chore: update use react signal

Author: hunghg255

package.json

@@ -128,11 +128,11 @@
     "react-image-crop": "^11.0.7",
     "react-tweet": "^3.2.1",
     "react-visibility-sensor": "^5.1.1",
+    "reactjs-signal": "^1.0.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "shiki": "^1.24.2",
     "svg64": "^2.0.0",
-    "tippy.js": "^6.3.7",
-    "valtio": "^1.13.2"
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.27.3",

pnpm-lock.yaml

@@ -59,7 +59,7 @@ function ActionImageButton(props: any) {
   }
 
   return (
-    <Dialog open={dialogImage.isOpen} onOpenChange={actionDialogImage.setOpen}>
+    <Dialog open={dialogImage} onOpenChange={actionDialogImage.setOpen}>
       <DialogTrigger asChild>
         <ActionButton
           icon={props.icon}

src/extensions/Image/components/ActionImageButton.tsx

@@ -1,17 +1,13 @@
-import { proxy, useSnapshot } from 'valtio'
+import { createSignal, useSignalValue } from 'reactjs-signal'
 
-const dialogImage = proxy({
-  isOpen: false,
-})
+const dialogImage = createSignal(false)
 
 export function useDialogImage() {
-  const snap = useSnapshot(dialogImage)
-
-  return snap
+  return useSignalValue(dialogImage)
 }
 
 export const actionDialogImage = {
   setOpen: (value: boolean) => {
-    dialogImage.isOpen = value
+    dialogImage.set(value)
   },
 }

src/extensions/Image/store.ts

@@ -77,7 +77,7 @@ function ActionVideoButton(props: any) {
   }
 
   return (
-    <Dialog open={dialogVideo.isOpen} onOpenChange={actionDialogVideo.setOpen}>
+    <Dialog open={dialogVideo} onOpenChange={actionDialogVideo.setOpen}>
       <DialogTrigger asChild>
         <ActionButton
           icon={props.icon}

src/extensions/Video/components/ActiveVideoButton.tsx

@@ -1,17 +1,13 @@
-import { proxy, useSnapshot } from 'valtio'
+import { createSignal, useSignalValue } from 'reactjs-signal'
 
-const dialogVideo = proxy({
-  isOpen: false,
-})
+const dialogVideo = createSignal(false)
 
 export function useDialogVideo() {
-  const snap = useSnapshot(dialogVideo)
-
-  return snap
+  return useSignalValue(dialogVideo)
 }
 
 export const actionDialogVideo = {
   setOpen: (value: boolean) => {
-    dialogVideo.isOpen = value
+    dialogVideo.set(value)
   },
 }

src/extensions/Video/store.ts

@@ -1,6 +1,5 @@
 import { useEffect, useMemo } from 'react'
-
-import { proxy, useSnapshot } from 'valtio'
+import { createSignal, useSignal } from 'reactjs-signal'
 
 import en from './en'
 import pt_BR from './pt-br'
@@ -123,20 +122,18 @@ class Locale {
 const locale = new Locale()
 
 // Proxy for reactive language state
-const atomLang = proxy({
-  lang: DEFAULT_LOCALE.lang,
-})
+const atomLang = createSignal(DEFAULT_LOCALE.lang)
 
 function useLocale() {
-  const atomLangSnap = useSnapshot(atomLang)
+  const [lang, setLang] = useSignal(atomLang)
 
   const t = useMemo(() => {
-    return locale.buildLocalesHandler(atomLangSnap.lang)
-  }, [atomLangSnap.lang])
+    return locale.buildLocalesHandler(lang)
+  }, [lang])
 
   useEffect(() => {
     const watchLang = locale.registerWatchLang((val) => {
-      atomLang.lang = val
+      setLang(val)
     })
 
     return () => {
@@ -145,14 +142,14 @@ function useLocale() {
   }, [])
 
   return {
-    lang: atomLangSnap.lang,
+    lang,
     t,
   }
 }
 
 const localeActions = {
   t: (path: MessageKeysType) => {
-    return locale.buildLocalesHandler(atomLang.lang)(path)
+    return locale.buildLocalesHandler(atomLang.get())(path)
   },
 }
 

src/locales/index.tsx

@@ -1,16 +1,13 @@
-import { proxy, useSnapshot } from 'valtio'
+import { createSignal, useSignalValue } from 'reactjs-signal'
 
-const editableEditorProxy = proxy({
-  disable: false,
-})
+const editableEditorProxy = createSignal(false)
 
 export function useEditableEditor() {
-  const editableEditor = useSnapshot(editableEditorProxy)
-  return editableEditor.disable
+  return useSignalValue(editableEditorProxy)
 }
 
 export const editableEditorActions = {
   setDisable: (disable: boolean) => {
-    editableEditorProxy.disable = disable
+    editableEditorProxy.set(disable)
   },
 }

src/store/editableEditor.ts

@@ -1,17 +1,13 @@
-import { proxy, useSnapshot } from 'valtio'
+import { createSignal, useSignalValue } from 'reactjs-signal'
 
-const themeProxy = proxy({
-  theme: 'light',
-})
+const themeProxy = createSignal('light')
 
 export function useTheme() {
-  const themeSnapshot = useSnapshot(themeProxy)
-
-  return themeSnapshot.theme
+  return useSignalValue(themeProxy)
 }
 
 export const themeActions = {
   setTheme: (theme: string) => {
-    themeProxy.theme = theme
+    themeProxy.set(theme)
   },
 }

src/theme/theme.ts

@@ -77,7 +77,7 @@ export default defineConfig(({ mode }) => {
             }
           },
         },
-        external: ['react', 'react-dom', 'react/jsx-runtime', 'katex', 'shiki', 'docx', '@radix-ui/react-dropdown-menu', '@radix-ui/react-icons', '@radix-ui/react-label', '@radix-ui/react-popover', '@radix-ui/react-separator', '@radix-ui/react-slot', '@radix-ui/react-switch', '@radix-ui/react-tabs', '@radix-ui/react-toast', '@radix-ui/react-toggle', '@radix-ui/react-tooltip', '@radix-ui/react-select', '@radix-ui/react-checkbox', 'react-colorful', 'scroll-into-view-if-needed', 'tippy.js', 'valtio', 'lucide-react', 'prosemirror-docx', 're-resizable', '@excalidraw/excalidraw', '@radix-ui/react-dialog', 'react-image-crop', 'mermaid', 'react-tweet'],
+        external: ['react', 'react-dom', 'react/jsx-runtime', 'katex', 'shiki', 'docx', '@radix-ui/react-dropdown-menu', '@radix-ui/react-icons', '@radix-ui/react-label', '@radix-ui/react-popover', '@radix-ui/react-separator', '@radix-ui/react-slot', '@radix-ui/react-switch', '@radix-ui/react-tabs', '@radix-ui/react-toast', '@radix-ui/react-toggle', '@radix-ui/react-tooltip', '@radix-ui/react-select', '@radix-ui/react-checkbox', 'react-colorful', 'scroll-into-view-if-needed', 'tippy.js', 'lucide-react', 'prosemirror-docx', 're-resizable', '@excalidraw/excalidraw', '@radix-ui/react-dialog', 'react-image-crop', 'mermaid', 'react-tweet', 'reactjs-signal'],
       },
     },
   }