dreaction-react 1.0.0

package/README.md

@@ -0,0 +1,255 @@
+# DReaction React
+
+DReaction client library for React web applications with plugin support for debugging and monitoring.
+
+## Installation
+
+```bash
+npm install dreaction-react
+# or
+yarn add dreaction-react
+# or
+pnpm add dreaction-react
+```
+
+## Quick Start
+
+```typescript
+import { dreaction } from 'dreaction-react';
+
+// Configure and enable plugins
+dreaction
+  .configure({
+    host: 'localhost',
+    port: 9600,
+    name: 'My React App',
+  })
+  .useReact() // Enable all plugins
+  .connect();  // Connect to DReaction server
+```
+
+## Usage with ConfigPanel
+
+For a better user experience, you can use the built-in `ConfigPanel` component:
+
+```tsx
+import { ConfigPanel } from 'dreaction-react';
+
+function App() {
+  return (
+    <div>
+      <YourApp />
+      <ConfigPanel />
+    </div>
+  );
+}
+```
+
+### Auto-Reconnect Feature
+
+The `ConfigPanel` automatically remembers your connection settings and status. When you refresh the page:
+- **Host and Port** settings are saved to localStorage
+- **Connection state** is remembered
+- If you were connected before refresh, it will **automatically reconnect**
+
+This means you only need to configure and connect once, and all future page loads will automatically restore your connection!
+
+**Important**: Make sure to call `.useReact()` to enable plugins before connecting:
+
+```typescript
+// In your initialization file (e.g., utils/dreaction.ts)
+import { dreaction } from 'dreaction-react';
+
+dreaction
+  .configure({
+    info: {
+      appName: 'My App',
+    },
+  })
+  .useReact(); // This is required to enable plugins!
+
+export { dreaction };
+```
+
+## Plugins
+
+DReaction React comes with built-in plugins for debugging:
+
+### 1. **Networking Plugin**
+Intercepts and monitors network requests (fetch and XMLHttpRequest).
+
+### 2. **localStorage Plugin**
+Tracks all localStorage operations (setItem, removeItem, clear).
+
+### 3. **Console Logs Plugin**
+Captures console.log, console.warn, console.debug, and console.info calls.
+
+### 4. **Global Errors Plugin**
+Catches unhandled errors and promise rejections.
+
+## Plugin Configuration
+
+You can customize plugin behavior:
+
+```typescript
+dreaction.useReact({
+  // Enable/disable error tracking
+  errors: true, // or provide options: { veto: (frame) => boolean }
+  
+  // Enable/disable console logging
+  log: true,
+  
+  // Configure localStorage monitoring
+  localStorage: {
+    ignore: ['SOME_KEY_TO_IGNORE'] // Keys to ignore
+  },
+  
+  // Configure network monitoring
+  networking: {
+    ignoreUrls: /analytics|tracking/, // URLs to ignore
+    ignoreContentTypes: /image/, // Content types to ignore
+  }
+});
+```
+
+### Disable Specific Plugins
+
+```typescript
+dreaction.useReact({
+  errors: false,      // Disable error tracking
+  log: false,         // Disable console logging
+  localStorage: false, // Disable localStorage monitoring
+  networking: false,  // Disable network monitoring
+});
+```
+
+## Data Watchers
+
+Monitor React state in real-time:
+
+```typescript
+import { dreaction } from 'dreaction-react';
+
+// Register a data watcher
+export const { useDebugDataWatch: useDebugCounter } = 
+  dreaction.registerDataWatcher('counter', 'text');
+
+// Use in your component
+function Counter() {
+  const [count, setCount] = useState(0);
+  
+  // This will send updates to DReaction server
+  useDebugCounter(count);
+  
+  return <div>Count: {count}</div>;
+}
+```
+
+### Data Watch Types
+
+- `'text'` - Display as text
+- `'json'` - Display as formatted JSON
+- `'list'` - Display as a list
+
+## Custom Commands
+
+Register custom commands that can be triggered from the DReaction app:
+
+```typescript
+dreaction.registerCustomCommand({
+  title: 'Clear Cache',
+  command: 'clearCache',
+  description: 'Clear application cache',
+  handler: async () => {
+    localStorage.clear();
+    return 'Cache cleared successfully';
+  }
+});
+
+// Commands with arguments
+dreaction.registerCustomCommand({
+  title: 'Set User',
+  command: 'setUser',
+  description: 'Set current user',
+  args: [
+    {
+      name: 'userId',
+      type: 'string',
+    }
+  ],
+  handler: async (args) => {
+    console.log('Setting user:', args.userId);
+    return `User set to: ${args.userId}`;
+  }
+});
+```
+
+## API Reference
+
+### `dreaction.useReact(options?)`
+
+Enable React plugins with optional configuration.
+
+**Parameters:**
+- `options.errors` - Error tracking options or boolean
+- `options.log` - Enable console logging (boolean)
+- `options.localStorage` - localStorage monitoring options or boolean
+- `options.networking` - Network monitoring options or boolean
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.configure(options)`
+
+Configure DReaction client settings.
+
+**Parameters:**
+- `options.host` - Server host (default: 'localhost')
+- `options.port` - Server port (default: 9600)
+- `options.name` - Application name
+- `options.info` - Additional info object
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.connect()`
+
+Connect to DReaction server and activate all plugins.
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.close()`
+
+Disconnect from server and deactivate plugins.
+
+**Returns:** `dreaction` instance (chainable)
+
+### `dreaction.registerDataWatcher(name, type, options?)`
+
+Register a data watcher for monitoring React state.
+
+**Parameters:**
+- `name` - Watcher identifier
+- `type` - Display type ('text' | 'json' | 'list')
+- `options.enabled` - Enable/disable watcher (default: true in development)
+
+**Returns:** Object with `useDebugDataWatch` hook
+
+### `dreaction.registerCustomCommand(config)`
+
+Register a custom command.
+
+**Parameters:**
+- `config.title` - Command title
+- `config.command` - Command identifier
+- `config.description` - Command description
+- `config.args` - Array of argument definitions
+- `config.handler` - Command handler function
+
+**Returns:** Unregister function
+
+## Example
+
+Check out the complete example in `example/nextjs/` directory.
+
+## License
+
+MIT

package/lib/components/ConfigPanel.d.ts

@@ -0,0 +1,12 @@
+export interface ConfigPanelProps {
+    /**
+     * Initial collapsed state
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Position of the panel
+     */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}
+export declare function ConfigPanel({ defaultCollapsed, position, }: ConfigPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConfigPanel.d.ts.map

package/lib/components/ConfigPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigPanel.d.ts","sourceRoot":"","sources":["../../src/components/ConfigPanel.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;CACtE;AAED,wBAAgB,WAAW,CAAC,EAC1B,gBAAuB,EACvB,QAAsB,GACvB,EAAE,gBAAgB,2CAqOlB"}

package/lib/components/ConfigPanel.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigPanel = ConfigPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+function ConfigPanel({ defaultCollapsed = true, position = 'top-right', }) {
+    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(defaultCollapsed);
+    const { host, port, isConnected, updateHost, updatePort, connect, disconnect, } = (0, hooks_1.useDReactionConfig)();
+    const [localHost, setLocalHost] = (0, react_1.useState)(host);
+    const [localPort, setLocalPort] = (0, react_1.useState)(port.toString());
+    const handleConnect = () => {
+        updateHost(localHost);
+        updatePort(parseInt(localPort, 10));
+        connect();
+    };
+    const handleDisconnect = () => {
+        disconnect();
+    };
+    const positionStyles = {
+        'top-right': { top: '12px', right: '12px' },
+        'top-left': { top: '12px', left: '12px' },
+        'bottom-right': { bottom: '12px', right: '12px' },
+        'bottom-left': { bottom: '12px', left: '12px' },
+    };
+    const panelStyle = {
+        position: 'fixed',
+        ...positionStyles[position],
+        backgroundColor: '#1a1a1a',
+        color: '#ffffff',
+        borderRadius: isCollapsed ? '6px' : '8px',
+        boxShadow: isCollapsed
+            ? '0 2px 8px rgba(0, 0, 0, 0.2)'
+            : '0 4px 12px rgba(0, 0, 0, 0.3)',
+        zIndex: 9999,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontSize: '14px',
+        width: isCollapsed ? '120px' : '280px',
+        transition: 'width 0.2s ease-in-out, border-radius 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+    };
+    const headerStyle = {
+        padding: '2px 6px',
+        borderBottom: isCollapsed ? '1px solid transparent' : '1px solid #333',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        cursor: 'pointer',
+        userSelect: 'none',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        transition: 'border-bottom 0.2s ease-in-out',
+    };
+    const bodyStyle = {
+        padding: isCollapsed ? '0 16px' : '16px',
+        maxHeight: isCollapsed ? '0' : '400px',
+        overflow: 'hidden',
+        opacity: isCollapsed ? 0 : 1,
+        transition: 'max-height 0.2s ease-in-out, opacity 0.2s ease-in-out, padding 0.2s ease-in-out',
+    };
+    const inputStyle = {
+        width: '100%',
+        padding: '8px 12px',
+        marginTop: '4px',
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #444',
+        borderRadius: '4px',
+        color: '#ffffff',
+        fontSize: '14px',
+        outline: 'none',
+    };
+    const buttonStyle = {
+        width: '100%',
+        padding: '10px',
+        marginTop: '12px',
+        backgroundColor: isConnected ? '#dc2626' : '#10b981',
+        border: 'none',
+        borderRadius: '4px',
+        color: '#ffffff',
+        fontSize: '14px',
+        fontWeight: '600',
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+    };
+    const statusStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '8px 12px',
+        marginTop: '8px',
+        backgroundColor: isConnected ? '#065f46' : '#7c2d12',
+        borderRadius: '4px',
+        fontSize: '13px',
+    };
+    const dotStyle = {
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: isConnected ? '#10b981' : '#ef4444',
+        marginRight: '8px',
+    };
+    const labelStyle = {
+        marginTop: '12px',
+        marginBottom: '4px',
+        fontSize: '13px',
+        fontWeight: '500',
+        color: '#a0a0a0',
+    };
+    const statusIndicatorStyle = {
+        width: '6px',
+        height: '6px',
+        borderRadius: '50%',
+        backgroundColor: isConnected ? '#10b981' : '#ef4444',
+        marginLeft: '8px',
+        flexShrink: 0,
+        transition: 'background-color 0.2s ease-in-out',
+        boxShadow: isConnected
+            ? '0 0 8px rgba(16, 185, 129, 0.6)'
+            : '0 0 12px rgba(239, 68, 68, 0.8)',
+        animation: isConnected
+            ? 'none'
+            : 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
+          @keyframes pulse {
+            0%, 100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+            50% {
+              opacity: 0.3;
+              transform: scale(1.3);
+            }
+          }
+        ` }), (0, jsx_runtime_1.jsxs)("div", { style: panelStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: headerStyle, onClick: () => setIsCollapsed(!isCollapsed), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    flex: 1,
+                                    overflow: 'hidden',
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                            fontWeight: '600',
+                                            fontSize: '10px',
+                                        }, children: "\u269B\uFE0F\u00A0DReaction" }), isCollapsed && (0, jsx_runtime_1.jsx)("div", { style: statusIndicatorStyle })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    fontSize: '14px',
+                                    marginLeft: '4px',
+                                    transform: isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)',
+                                    transition: 'transform 0.2s ease-in-out',
+                                }, children: "\u25BC" })] }), (0, jsx_runtime_1.jsxs)("div", { style: bodyStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: statusStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: dotStyle }), (0, jsx_runtime_1.jsx)("span", { children: isConnected ? 'Connected' : 'Disconnected' })] }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: "Host" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: localHost, onChange: (e) => setLocalHost(e.target.value), placeholder: "localhost", style: inputStyle, disabled: isConnected }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: "Port" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: localPort, onChange: (e) => setLocalPort(e.target.value), placeholder: "9600", style: inputStyle, disabled: isConnected }), (0, jsx_runtime_1.jsx)("button", { style: buttonStyle, onClick: isConnected ? handleDisconnect : handleConnect, onMouseOver: (e) => {
+                                    e.currentTarget.style.opacity = '0.9';
+                                }, onMouseOut: (e) => {
+                                    e.currentTarget.style.opacity = '1';
+                                }, children: isConnected ? 'Disconnect' : 'Connect' })] })] })] }));
+}

package/lib/dreaction.d.ts

@@ -0,0 +1,32 @@
+import type { ClientOptions, DReaction, DReactionCore, InferFeaturesFromPlugins } from 'dreaction-client-core';
+import type { DataWatchPayload } from 'dreaction-protocol';
+import { NetworkingOptions } from './plugins/networking';
+import { LocalStorageOptions } from './plugins/localStorage';
+import { TrackGlobalErrorsOptions } from './plugins/trackGlobalErrors';
+export type { ClientOptions };
+export declare const reactCorePlugins: ((dreaction: DReactionCore) => {
+    onConnect: () => void;
+    onDisconnect: () => void;
+})[];
+export interface UseReactOptions {
+    errors?: TrackGlobalErrorsOptions | boolean;
+    log?: boolean;
+    localStorage?: LocalStorageOptions | boolean;
+    networking?: NetworkingOptions | boolean;
+}
+type ReactPluginFeatures = InferFeaturesFromPlugins<DReactionCore, typeof reactCorePlugins>;
+export interface DReactionReact extends DReaction, ReactPluginFeatures {
+    useReact: (options?: UseReactOptions) => this;
+    registerDataWatcher: <T = unknown>(name: string, type: DataWatchPayload['type'], options?: {
+        /**
+         * Is data watcher enabled?
+         */
+        enabled?: boolean;
+    }) => {
+        currentDebugValue: T | undefined;
+        updateDebugValue: (data: unknown) => void;
+        useDebugDataWatch: (target: unknown) => void;
+    };
+}
+export declare const dreaction: DReactionReact;
+//# sourceMappingURL=dreaction.d.ts.map

package/lib/dreaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dreaction.d.ts","sourceRoot":"","sources":["../src/dreaction.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,wBAAwB,EAEzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,OAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE3E,OAA0B,EACxB,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AAErC,YAAY,EAAE,aAAa,EAAE,CAAC;AAM9B,eAAO,MAAM,gBAAgB;;;IAKa,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,wBAAwB,GAAG,OAAO,CAAC;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;CAC1C;AAED,KAAK,mBAAmB,GAAG,wBAAwB,CACjD,aAAa,EACb,OAAO,gBAAgB,CACxB,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,SAAS,EAEf,mBAAmB;IACrB,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,mBAAmB,EAAE,CAAC,CAAC,GAAG,OAAO,EAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;QACR;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,KACE;QACH,iBAAiB,EAAE,CAAC,GAAG,SAAS,CAAC;QACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;KAC9C,CAAC;CACH;AA8CD,eAAO,MAAM,SAAS,gBAAyC,CAAC"}

package/lib/dreaction.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dreaction = exports.reactCorePlugins = void 0;
+const dreaction_client_core_1 = require("dreaction-client-core");
+const react_1 = require("react");
+const networking_1 = __importDefault(require("./plugins/networking"));
+const localStorage_1 = __importDefault(require("./plugins/localStorage"));
+const trackGlobalLogs_1 = __importDefault(require("./plugins/trackGlobalLogs"));
+const trackGlobalErrors_1 = __importDefault(require("./plugins/trackGlobalErrors"));
+const DREACTION_LOCAL_STORAGE_CLIENT_ID = 'DREACTION_clientId';
+let tempClientId = null;
+exports.reactCorePlugins = [
+    (0, trackGlobalErrors_1.default)(),
+    (0, trackGlobalLogs_1.default)(),
+    (0, localStorage_1.default)(),
+    (0, networking_1.default)(),
+];
+const DEFAULTS = {
+    createSocket: (path) => new WebSocket(path),
+    host: 'localhost',
+    port: 9600,
+    name: 'React Web App',
+    environment: process.env.NODE_ENV || 'development',
+    client: {
+        dreactionLibraryName: 'dreaction-react',
+        dreactionLibraryVersion: '1.0.0',
+        platform: 'web',
+        userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
+    },
+    getClientId: async (name = '') => {
+        if (typeof window !== 'undefined' && window.localStorage) {
+            const stored = window.localStorage.getItem(DREACTION_LOCAL_STORAGE_CLIENT_ID);
+            if (stored) {
+                return stored;
+            }
+        }
+        // Generate clientId based on browser info
+        tempClientId = [
+            name,
+            'web',
+            typeof navigator !== 'undefined' ? navigator.userAgent : '',
+            Date.now(),
+        ]
+            .filter(Boolean)
+            .join('-');
+        return tempClientId;
+    },
+    setClientId: async (clientId) => {
+        if (typeof window !== 'undefined' && window.localStorage) {
+            window.localStorage.setItem(DREACTION_LOCAL_STORAGE_CLIENT_ID, clientId);
+        }
+        else {
+            tempClientId = clientId;
+        }
+    },
+    proxyHack: true,
+};
+exports.dreaction = (0, dreaction_client_core_1.createClient)(DEFAULTS);
+function getPluginOptions(options) {
+    return typeof options === 'object' ? options : null;
+}
+exports.dreaction.useReact = (options = {}) => {
+    if (options.errors !== false) {
+        exports.dreaction.use((0, trackGlobalErrors_1.default)(getPluginOptions(options.errors)));
+    }
+    if (options.log !== false) {
+        exports.dreaction.use((0, trackGlobalLogs_1.default)());
+    }
+    if (options.localStorage !== false) {
+        exports.dreaction.use((0, localStorage_1.default)(getPluginOptions(options.localStorage)));
+    }
+    if (options.networking !== false) {
+        exports.dreaction.use((0, networking_1.default)(getPluginOptions(options.networking)));
+    }
+    return exports.dreaction;
+};
+exports.dreaction.registerDataWatcher = (name, type, options) => {
+    const { enabled = process.env.NODE_ENV === 'development' } = options ?? {};
+    if (!enabled) {
+        return {
+            currentDebugValue: undefined,
+            updateDebugValue: () => { },
+            useDebugDataWatch: () => { },
+        };
+    }
+    let prev = undefined;
+    const updateDebugValue = (data) => {
+        let newData = prev;
+        if (typeof data === 'function') {
+            newData = data(prev);
+        }
+        else {
+            newData = data;
+        }
+        prev = newData;
+        exports.dreaction.send('dataWatch', { name, type, data: newData });
+    };
+    return {
+        currentDebugValue: prev,
+        updateDebugValue,
+        useDebugDataWatch: (target) => {
+            (0, react_1.useEffect)(() => {
+                updateDebugValue(target);
+            }, [target]);
+        },
+    };
+};

package/lib/hooks.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Hook to manage DReaction connection status
+ */
+export declare function useConnectionStatus(): boolean;
+/**
+ * Hook to manage DReaction configuration
+ */
+export declare function useDReactionConfig(): {
+    host: string;
+    port: number;
+    isConnected: boolean;
+    updateHost: (newHost: string) => void;
+    updatePort: (newPort: number) => void;
+    connect: () => void;
+    disconnect: () => void;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/lib/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,wBAAgB,mBAAmB,YAelC;AAED;;GAEG;AACH,wBAAgB,kBAAkB;;;;0BAmDH,MAAM;0BAON,MAAM;;;EAwCpC"}