chore: replace zustand use reactjs-signal

Author: hunghg255

src/locales/index.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { create } from 'zustand';
+import { createSignal, getSignal, useSetSignal, useSignalValue } from 'reactjs-signal';
 
 import { DEFAULT_LANG_VALUE } from '@/constants';
 
@@ -31,35 +31,33 @@ type LanguageType = keyof typeof LANG.message | (string & {});
 interface LangState {
   currentLang: LanguageType;
   message: typeof LANG.message;
-  setLang: (newLang: LanguageType) => void;
-  setMessage: (lang: LanguageType, messages: Partial<Record<keyof typeof en, string>>) => void;
 }
 
-const useLang = create<LangState>()((set) => ({
+const langSignal = createSignal<LangState>({
   currentLang: LANG.currentLang,
   message: LANG.message,
-  setLang: (newLang: LanguageType) => {
-    set(() => ({
-      currentLang: newLang,
-    }));
-  },
-  setMessage: (lang: LanguageType, messages: Partial<Record<keyof typeof en, string>>) => {
-    set((state) => ({
-      message: {
-        ...state.message,
-        [lang]: {
-          ...state.message[lang as keyof typeof LANG.message],
-          ...messages,
-        },
-      },
-    }));
-  }
-}));
+});
 
+  // setLang: (newLang: LanguageType) => {
+  //   set(() => ({
+  //     currentLang: newLang,
+  //   }));
+  // },
+  // setMessage: (lang: LanguageType, messages: Partial<Record<keyof typeof en, string>>) => {
+  //   set((state) => ({
+  //     message: {
+  //       ...state.message,
+  //       [lang]: {
+  //         ...state.message[lang as keyof typeof LANG.message],
+  //         ...messages,
+  //       },
+  //     },
+  //   }));
+  // }
 function useLocale() {
-  const currentLang = useLang((state) => state.currentLang);
-  const message = useLang((state) => state.message);
-  const setLang = useLang((state) => state.setLang);
+  const currentLang = useSignalValue(langSignal).currentLang;
+  const message = useSignalValue(langSignal).message;
+  const setLang = useSetSignal(langSignal);
 
   const t = useCallback((path: MessageKeysType, params?: Record<string, string | number>) => {
     try {
@@ -89,10 +87,22 @@ function useLocale() {
 
 const localeActions = {
   setLang: (lang: LanguageType | (string & {})) => {
-    useLang.getState().setLang(lang);
+    getSignal(langSignal).setValue((prev => ({
+      ...prev,
+      currentLang: lang,
+    })));
   },
   setMessage: (lang: LanguageType | (string & {}), messages: Partial<Record<keyof typeof LANG.message.en, string>>) => {
-    useLang.getState().setMessage(lang, messages);
+    getSignal(langSignal).setValue((prev) => ({
+      ...prev,
+      message: {
+        ...prev.message,
+        [lang]: {
+          ...prev.message[lang as keyof typeof LANG.message],
+          ...messages,
+        },
+      },
+    }));
   },
 };
 

src/store/EditorEditableReactive.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { useStoreEditableEditor, } from '@/store/store';
 
 export function EditorEditableReactive ({ editor }: any) {
-  const setEditable = useStoreEditableEditor(store => store.setEditable);
+  const setEditable = useStoreEditableEditor();
 
   useEffect(() => {
     setEditable({

src/store/commandList.ts

@@ -1,24 +1,18 @@
-import { create } from 'zustand';
+import { createSignal, useSetSignal, useSignalValue } from 'reactjs-signal';
 
 import { type CommandList } from '@/extensions/SlashCommand/types';
 
 interface SignalCommandListState {
   commandList: CommandList[];
-  setCommandList: (newCommandList: CommandList[]) => void;
 }
 
-const useSignalCommandListStore = create<SignalCommandListState>((set => ({
+const useSignalCommandListStore = createSignal<SignalCommandListState>({
   commandList: [],
-  setCommandList: (newCommandList: CommandList[]) => {
-    set(() => ({
-      commandList: newCommandList,
-    }));
-  },
-})));
+});
 
 export function useSignalCommandList () {
-  const commandList = useSignalCommandListStore(state => state.commandList);
-  const setCommandList = useSignalCommandListStore(state => state.setCommandList);
+  const commandList = useSignalValue(useSignalCommandListStore).commandList;
+  const setCommandList = useSetSignal(useSignalCommandListStore);
 
   return [commandList, setCommandList] as const;
 }

src/store/store.ts

@@ -1,4 +1,4 @@
-import { create } from 'zustand';
+import { createSignal, useSetSignal, useSignalValue } from 'reactjs-signal';
 
 import createFastContext from '@/store/fast-context';
 
@@ -10,21 +10,20 @@ const { Provider: ProviderUploadVideo, useStore: useStoreUploadVideo } = createF
   value: false
 });
 
-const useStoreEditableEditor = create<{ value: boolean, setEditable: (newValue: { value: boolean }) => void }>((set) => ({
+const editableEditorSignal = createSignal<{ value: boolean }>({
   value: false,
-  setEditable: (newValue: { value: boolean }) => {
-    set(() => ({
-      value: newValue.value,
-    }));
-  },
-}));
+});
 
 function useEditableEditor () {
-  const isEditableEditor = useStoreEditableEditor(store => store.value);
+  const isEditableEditor = useSignalValue(editableEditorSignal).value;
 
   return isEditableEditor;
 }
 
+function useStoreEditableEditor () {
+  return useSetSignal(editableEditorSignal);
+}
+
 export {
   ProviderUploadImage,
   useStoreUploadImage,

src/theme/theme.ts

@@ -1,5 +1,5 @@
 // Get here: https://ui.shadcn.com/themes
-import { create } from 'zustand';
+import { createSignal, getSignal, useSignalValue } from 'reactjs-signal';
 
 export const THEME = {
   light: {
@@ -367,36 +367,16 @@ interface ThemeStore {
   theme: ThemeType;
   color: ThemeColorType;
   borderRadius: string;
-  setTheme: (theme: ThemeType) => void;
-  setColor: (color: ThemeColorType) => void;
-  setBorderRadius: (borderRadius: string) => void;
 }
 
-const useThemeStore = create<ThemeStore>((set) => ({
+const themeSignal = createSignal<ThemeStore>({
   theme: 'light',
   color: 'default',
   borderRadius: '0.65rem',
-  setTheme: (theme: ThemeType) => {
-    set(() => ({
-      theme,
-    }));
-  },
-  setColor: (color: ThemeColorType) => {
-    set(() => ({
-      color,
-    }));
-  },
-  setBorderRadius: (borderRadius: string) => {
-    set(() => ({
-      borderRadius,
-    }));
-  },
-}));
+});
 
 export function useTheme () {
-  const theme = useThemeStore((state) => state.theme);
-  const color = useThemeStore((state) => state.color);
-  const borderRadius = useThemeStore((state) => state.borderRadius);
+  const { theme, color, borderRadius } = useSignalValue(themeSignal);
 
   return {
     theme,
@@ -407,12 +387,21 @@ export function useTheme () {
 
 export const themeActions = {
   setTheme: (theme: ThemeType) => {
-    useThemeStore.getState().setTheme(theme);
+    getSignal(themeSignal).setValue((prev) => ({
+      ...prev,
+      theme,
+    }));
   },
   setColor: (color: ThemeColorType) => {
-    useThemeStore.getState().setColor(color);
+    getSignal(themeSignal).setValue((prev) => ({
+      ...prev,
+      color,
+    }));
   },
   setBorderRadius: (borderRadius: string) => {
-    useThemeStore.getState().setBorderRadius(borderRadius);
+    getSignal(themeSignal).setValue((prev) => ({
+      ...prev,
+      borderRadius,
+    }));
   }
 };