feat(map-set-redux): replace json viewer for redux dev plugin in orde…

packages/redux/package.json

@@ -35,6 +35,7 @@
   "devDependencies": {
     "expo": "~52.0.4",
     "expo-module-scripts": "^4.0.2",
+    "superjson": "^2.2.2",
     "typescript": "^5.6.3"
   },
   "peerDependencies": {

packages/redux/src/useReduxDevTools.ts

@@ -1,7 +1,7 @@
 import { useDevToolsPluginClient } from 'expo/devtools';
 import { useEffect } from 'react';
 import { Store } from '@reduxjs/toolkit';
-
+import SuperJson from 'superjson';
 /**
  * This hook registers a devtools plugin for Redux.
  *
@@ -11,10 +11,10 @@ export function useReduxDevTools(store: Store) {
   const client = useDevToolsPluginClient('redux');
 
   useEffect(() => {
-    client?.sendMessage("storeUpdated", store.getState());
+    client?.sendMessage('storeUpdated', SuperJson.stringify(store.getState()));
     const unsubscribeFn = store.subscribe(() => {
       const state = store.getState();
-      client?.sendMessage("storeUpdated", state);
+      client?.sendMessage('storeUpdated', SuperJson.stringify(state));
     });
 
     return () => {

packages/redux/webui/package.json

@@ -14,13 +14,14 @@
     "@ant-design/icons": "^5.5.1",
     "@babel/core": "^7.26.0",
     "@types/react": "~18.3.12",
+    "@uiw/react-json-view": "^2.0.0-alpha.30",
     "antd": "^5.22.0",
     "expo": "~52.0.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@microlink/react-json-view": "^1.23.4",
     "react-native": "0.76.1",
     "react-native-web": "~0.19.13",
+    "superjson": "^2.2.2",
     "typescript": "^5.6.3"
   }
 }

packages/redux/webui/src/App.tsx

@@ -1,7 +1,8 @@
 import { App } from 'antd';
 import { useDevToolsPluginClient, type EventSubscription } from 'expo/devtools';
 import { Fragment, useEffect, useState } from 'react';
-import ReactJson from 'react-json-view';
+import JsonView from '@uiw/react-json-view';
+import SuperJson from 'superjson';
 
 export default function Main() {
   const client = useDevToolsPluginClient('redux');
@@ -12,7 +13,7 @@ export default function Main() {
 
     subscriptions.push(
       client?.addMessageListener('storeUpdated', (data) => {
-        setStoreHistory(prevHistory => [...prevHistory, data]);
+        setStoreHistory((prevHistory) => [...prevHistory, SuperJson.parse(data)]);
       })
     );
 
@@ -27,9 +28,12 @@ export default function Main() {
   return (
     <App style={{ width: '100%', height: '100%', padding: '0.75em', overflowY: 'scroll' }}>
       {storeHistory.map((history, index) => {
-        return <Fragment key={index}><ReactJson src={history} /></Fragment>
+        return (
+          <Fragment key={index}>
+            <JsonView value={history} />
+          </Fragment>
+        );
       })}
-
     </App>
   );
 }