react-native-debug-toolkit 0.2.2 → 0.3.1

package/lib/views/SubViewZustandLogs.js

@@ -0,0 +1,279 @@
+import React, { useState, useMemo } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native'
+import ZustandLogDetails from './ZustandLogDetails'
+import { getZustandActionColor } from '../utils/DebugConst'
+
+const SubViewZustandLogs = ({ logs = [] }) => {
+  const [selectedLog, setSelectedLog] = useState(null)
+
+  // Memoize the sorted logs
+  const sortedLogs = useMemo(() => {
+    // Create a stable copy before sorting
+    return [...logs].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
+  }, [logs]);
+
+  // Helper to format preview of state changes
+  const formatActionPreview = (log) => {
+    if (!log) return '';
+    
+    const { action = 'unknown', storeName } = log;
+    return `Action: ${action}${storeName ? ` (${storeName})` : ''}`;
+  };
+
+  // Safely stringify value for display
+  const safeStringify = (value) => {
+    if (value === undefined) return 'undefined';
+    if (value === null) return 'null';
+    
+    const type = typeof value;
+    if (type === 'string') return `"${value.length > 10 ? value.substring(0, 10) + '...' : value}"`;
+    if (type === 'number' || type === 'boolean') return String(value);
+    if (Array.isArray(value)) return '[...]';
+    if (type === 'object') return '{...}';
+    
+    return String(value);
+  };
+
+  // Helper to find key changes between states with more details
+  const findChangedKeys = (prevState, nextState) => {
+    if (!prevState || !nextState) return [];
+    
+    const changes = [];
+    const allKeys = new Set([...Object.keys(prevState), ...Object.keys(nextState)]);
+    
+    allKeys.forEach(key => {
+      const prevValue = prevState[key];
+      const nextValue = nextState[key];
+      
+      // Check if key is added, removed, or value changed
+      if (!(key in prevState)) {
+        changes.push({
+          key,
+          type: 'added',
+          display: `+${key}: ${safeStringify(nextValue)}`
+        });
+      } else if (!(key in nextState)) {
+        changes.push({
+          key,
+          type: 'removed',
+          display: `-${key}: ${safeStringify(prevValue)}`
+        });
+      } else if (JSON.stringify(prevValue) !== JSON.stringify(nextValue)) {
+        // For primitive types, show the before and after values
+        const isPrimitive = 
+          typeof prevValue !== 'object' || 
+          prevValue === null || 
+          typeof nextValue !== 'object' || 
+          nextValue === null;
+          
+        if (isPrimitive) {
+          changes.push({
+            key,
+            type: 'changed',
+            display: `~${key}: ${safeStringify(prevValue)} → ${safeStringify(nextValue)}`
+          });
+        } else {
+          changes.push({
+            key,
+            type: 'changed',
+            display: `~${key}`
+          });
+        }
+      }
+    });
+    
+    return changes;
+  };
+
+  const renderLogItem = ({ item }) => {
+    const actionPreview = formatActionPreview(item);
+    const actionColor = getZustandActionColor(item.action);
+    const timestamp = item.timestamp
+      ? new Date(item.timestamp).toLocaleTimeString([], { 
+          hour: '2-digit', 
+          minute: '2-digit', 
+          second: '2-digit', 
+          hour12: false 
+        })
+      : '';
+    
+    // Get changed keys with details
+    const changes = findChangedKeys(item.prevState, item.nextState);
+    
+    // Create a formatted display of changes
+    const changesText = changes.length 
+      ? changes.map(change => change.display).join(', ') 
+      : 'No changes detected';
+
+    return (
+      <TouchableOpacity
+        style={styles.logItem}
+        onPress={() => setSelectedLog(item)}>
+        <View style={styles.logItemContainer}>
+          <View
+            style={[styles.actionIndicator, { backgroundColor: actionColor }]}
+          />
+
+          <View style={styles.logContent}>
+             <View style={styles.logHeader}>
+                <Text style={[styles.actionText, { color: actionColor }]}>
+                  {actionPreview}
+                </Text>
+                 <Text style={styles.time}>{timestamp}</Text>
+            </View>
+
+            <Text style={styles.statePathsText} numberOfLines={2}>
+              {changesText}
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  // If a log is selected, show the details view
+  if (selectedLog) {
+    const timestamp = selectedLog.timestamp
+       ? new Date(selectedLog.timestamp).toLocaleTimeString([], { 
+           hour: '2-digit', 
+           minute: '2-digit', 
+           second: '2-digit', 
+           hour12: false 
+         })
+       : '';
+    const actionColor = getZustandActionColor(selectedLog.action);
+    const actionDisplay = selectedLog.storeName 
+      ? `${selectedLog.action} (${selectedLog.storeName})` 
+      : selectedLog.action || 'Unknown Action';
+    
+    return (
+      <View style={styles.container}>
+        <View style={styles.detailsHeader}>
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => setSelectedLog(null)}>
+            <Text style={styles.backButtonText}>← Back</Text>
+          </TouchableOpacity>
+           <View style={styles.headerActionTime}>
+              <Text style={[styles.headerAction, { color: actionColor }]}>
+                {actionDisplay}
+              </Text>
+               <Text style={styles.headerTimestamp}>{timestamp}</Text>
+           </View>
+        </View>
+        <ZustandLogDetails log={selectedLog} />
+      </View>
+    )
+  }
+
+  // Otherwise show the list view
+  return (
+    <View style={styles.container}>
+      {sortedLogs.length === 0 ? (
+        <Text style={styles.emptyText}>No Zustand state changes logged yet</Text>
+      ) : (
+        <FlatList
+          data={sortedLogs}
+          renderItem={renderLogItem}
+          keyExtractor={(item, index) => `${item.timestamp}-${index}`}
+          style={styles.list}
+        />
+      )}
+    </View>
+  )
+}
+
+// Adapted styles from SubViewConsoleLogs
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  list: {
+    flex: 1,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+  },
+  logItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  logItemContainer: {
+    flexDirection: 'row',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  actionIndicator: {
+    width: 4,
+    borderRadius: 2,
+    marginRight: 10,
+  },
+  logContent: {
+    flex: 1,
+  },
+  logHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  actionText: {
+    fontSize: 13,
+    fontWeight: 'bold',
+  },
+  time: {
+    fontSize: 12,
+    color: '#888',
+  },
+  statePathsText: {
+    fontSize: 14,
+    color: '#555',
+    fontFamily: 'monospace',
+  },
+  // Details Header Styles
+  detailsHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#f8f9fa',
+  },
+  backButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    backgroundColor: '#eee',
+    marginRight: 15,
+  },
+  backButtonText: {
+    color: '#333',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+  headerActionTime: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+  },
+  headerAction: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+  headerTimestamp: {
+    fontSize: 13,
+    color: '#666',
+  },
+})
+
+export default SubViewZustandLogs 

package/lib/views/ZustandLogDetails.js

@@ -0,0 +1,355 @@
+import React from 'react'
+import { View, Text, StyleSheet, Clipboard } from 'react-native'
+import { ScrollView, Pressable } from 'react-native'
+import JSONTree from 'react-native-json-tree'
+import { getZustandActionColor } from '../utils/DebugConst'
+
+// Re-using the theme from ConsoleLogDetails for consistency
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
+
+const CopyButton = ({ text, style }) => {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async () => {
+    await Clipboard.setString(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Pressable style={[styles.copyButton, style]} onPress={handleCopy}>
+      <Text style={styles.copyButtonText}>{copied ? 'Copied!' : 'Copy'}</Text>
+    </Pressable>
+  )
+}
+
+const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
+  const [expanded, setExpanded] = React.useState(initiallyExpanded)
+
+  return (
+    <View style={styles.collapsibleSection}>
+      <Pressable
+        style={styles.sectionHeader}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </Pressable>
+      {expanded && children}
+    </View>
+  )
+}
+
+const ZustandLogDetails = ({ log }) => {
+  if (!log) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Log data is missing</Text>
+      </View>
+    )
+  }
+
+  const { timestamp, action, prevState, nextState, actionCompleteTime, storeName } = log
+  const actionColor = getZustandActionColor(action);
+  
+  // Format data for display and copying
+  const formatStateToString = (state) => {
+    try {
+      return JSON.stringify(state, null, 2);
+    } catch (e) {
+      return '[unserializable state]';
+    }
+  }
+  
+  const formattedPrevState = formatStateToString(prevState);
+  const formattedNextState = formatStateToString(nextState);
+  
+  // Format for the full log copy
+  const formattedLog = `Action: ${action}${storeName ? ` (${storeName})` : ''}
+Previous State: ${formattedPrevState}
+Next State: ${formattedNextState}${actionCompleteTime ? `\nAction Complete Time: ${actionCompleteTime}ms` : ''}`;
+
+  // Function to find differences between states
+  const findDifferences = () => {
+    const changes = [];
+    
+    if (!prevState || !nextState) return changes;
+    
+    // Helper to find differences in objects recursively
+    const findChangesRecursive = (prev, next, path = '') => {
+      if (prev === next) return;
+      
+      if (typeof prev !== 'object' || typeof next !== 'object' || 
+          prev === null || next === null) {
+        changes.push({
+          path: path || 'root',
+          prevValue: prev,
+          nextValue: next
+        });
+        return;
+      }
+      
+      // Check for object keys
+      const allKeys = [...new Set([...Object.keys(prev || {}), ...Object.keys(next || {})])];
+      
+      for (const key of allKeys) {
+        const newPath = path ? `${path}.${key}` : key;
+        if (!(key in prev)) {
+          changes.push({
+            path: newPath,
+            prevValue: undefined,
+            nextValue: next[key]
+          });
+        } else if (!(key in next)) {
+          changes.push({
+            path: newPath,
+            prevValue: prev[key],
+            nextValue: undefined
+          });
+        } else {
+          findChangesRecursive(prev[key], next[key], newPath);
+        }
+      }
+    };
+    
+    findChangesRecursive(prevState, nextState);
+    return changes;
+  };
+  
+  const stateChanges = findDifferences();
+  const hasChanges = stateChanges.length > 0;
+
+  const actionDisplay = storeName ? `${action} (${storeName})` : action;
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={true}
+      scrollEventThrottle={16}
+      keyboardShouldPersistTaps='handled'>
+
+      <View style={styles.header}>
+        <View style={styles.headerInfo}>
+          <Text style={styles.actionIndicator}>
+            Action: <Text style={[styles.actionName, { color: actionColor }]}>{actionDisplay}</Text>
+          </Text>
+          <Text style={styles.timestamp}>
+            {timestamp
+              ? new Date(timestamp).toLocaleString()
+              : 'Unknown time'}
+          </Text>
+          {actionCompleteTime && (
+            <Text style={styles.actionTime}>
+              Completed in: {actionCompleteTime}ms
+            </Text>
+          )}
+        </View>
+        <CopyButton text={formattedLog} />
+      </View>
+
+      {hasChanges && (
+        <CollapsibleSection title='State Changes' initiallyExpanded={true}>
+          <View style={styles.dataContentWrapper}>
+            <View style={styles.dataContent}>
+              {stateChanges.map((change, index) => (
+                <View key={index} style={[styles.changeItem, index === stateChanges.length - 1 && styles.changeItemLast]}>
+                  <Text style={styles.changePath}>{change.path}</Text>
+                  <View style={styles.changeValues}>
+                    <View style={styles.changeValue}>
+                      <Text style={styles.changeLabel}>From:</Text>
+                      <JSONTree
+                        data={change.prevValue}
+                        theme={theme}
+                        invertTheme={true}
+                        hideRoot={true}
+                        shouldExpandNode={() => true}
+                      />
+                    </View>
+                    <View style={styles.changeValue}>
+                      <Text style={styles.changeLabel}>To:</Text>
+                      <JSONTree
+                        data={change.nextValue}
+                        theme={theme}
+                        invertTheme={true}
+                        hideRoot={true}
+                        shouldExpandNode={() => true}
+                      />
+                    </View>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        </CollapsibleSection>
+      )}
+
+      <CollapsibleSection title='Previous State' initiallyExpanded={false}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONTree
+              data={prevState || {}}
+              theme={theme}
+              invertTheme={true}
+              hideRoot={true}
+              shouldExpandNode={(keyPath, data, level) => level < 1}
+            />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection title='Next State' initiallyExpanded={true}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONTree
+              data={nextState || {}}
+              theme={theme}
+              invertTheme={true}
+              hideRoot={true}
+              shouldExpandNode={(keyPath, data, level) => level < 1}
+            />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+    </ScrollView>
+  )
+}
+
+// Re-using and adapting styles from ConsoleLogDetails
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  contentContainer: {
+    paddingBottom: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerInfo: {
+    flexShrink: 1,
+    marginRight: 10,
+  },
+  actionIndicator: {
+    fontSize: 14,
+    marginBottom: 5,
+  },
+  actionName: {
+    fontWeight: 'bold',
+  },
+  timestamp: {
+    fontSize: 13,
+    color: '#666',
+  },
+  actionTime: {
+    fontSize: 13,
+    color: '#666',
+    marginTop: 2,
+  },
+  collapsibleSection: {
+    marginBottom: 1,
+    backgroundColor: '#fff',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#f5f5f5',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  dataContentWrapper: {
+    flex: 1,
+    padding: 10,
+  },
+  dataContent: {
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+  copyButton: {
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    flexShrink: 0,
+  },
+  copyButtonText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  changeItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    paddingVertical: 8,
+  },
+  changeItemLast: {
+    borderBottomWidth: 0,
+  },
+  changePath: {
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 5,
+    fontFamily: 'monospace',
+  },
+  changeValues: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  changeValue: {
+    flex: 1,
+    padding: 5,
+  },
+  changeLabel: {
+    color: '#666',
+    fontSize: 12,
+    marginBottom: 3,
+  },
+});
+
+export default ZustandLogDetails 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",
@@ -23,7 +23,7 @@
   "author": "zcj",
   "license": "MIT",
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^2.1.2",
+    "react-native-mmkv": "2.12.2",
     "react-native-json-tree": "^1.5.0",
     "react-native-performance": "5.1.2",
     "react-native-root-siblings": "^4.0.0"