dreaction-react 1.0.0

package/lib/plugins/trackGlobalErrors.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Provides a global error handler to report errors.
+ */
+const dreaction_client_core_1 = require("dreaction-client-core");
+// defaults
+const PLUGIN_DEFAULTS = {
+    veto: undefined,
+};
+const objectifyError = (error) => {
+    const objectifiedError = {};
+    Object.getOwnPropertyNames(error).forEach((key) => {
+        objectifiedError[key] = error[key];
+    });
+    return objectifiedError;
+};
+/**
+ * Parse error stack trace
+ */
+const parseErrorStack = (error) => {
+    if (!error.stack) {
+        return [];
+    }
+    const frames = [];
+    const lines = error.stack.split('\n');
+    // Skip the first line (error message)
+    for (let i = 1; i < lines.length; i++) {
+        const line = lines[i].trim();
+        // Try to match different stack trace formats
+        // Format: at functionName (fileName:lineNumber:columnNumber)
+        let match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
+        if (match) {
+            frames.push({
+                functionName: match[1],
+                fileName: match[2],
+                lineNumber: parseInt(match[3], 10),
+                columnNumber: parseInt(match[4], 10),
+            });
+            continue;
+        }
+        // Format: at fileName:lineNumber:columnNumber
+        match = line.match(/at\s+(.+?):(\d+):(\d+)/);
+        if (match) {
+            frames.push({
+                functionName: '<anonymous>',
+                fileName: match[1],
+                lineNumber: parseInt(match[2], 10),
+                columnNumber: parseInt(match[3], 10),
+            });
+            continue;
+        }
+        // Format: functionName@fileName:lineNumber:columnNumber (Firefox)
+        match = line.match(/(.+?)@(.+?):(\d+):(\d+)/);
+        if (match) {
+            frames.push({
+                functionName: match[1] || '<anonymous>',
+                fileName: match[2],
+                lineNumber: parseInt(match[3], 10),
+                columnNumber: parseInt(match[4], 10),
+            });
+            continue;
+        }
+    }
+    return frames;
+};
+/**
+ * Track global errors and send them to DReaction logger.
+ */
+const trackGlobalErrors = (options) => (dreaction) => {
+    // make sure we have the logger plugin
+    (0, dreaction_client_core_1.assertHasLoggerPlugin)(dreaction);
+    const client = dreaction;
+    // setup configuration
+    const config = Object.assign({}, PLUGIN_DEFAULTS, options || {});
+    let originalWindowOnError;
+    let unhandledRejectionHandler = null;
+    // manually fire an error
+    function reportError(error, stack) {
+        try {
+            let prettyStackFrames = stack || parseErrorStack(error);
+            // does the dev want us to keep each frame?
+            if (config.veto) {
+                prettyStackFrames = prettyStackFrames.filter((frame) => config?.veto?.(frame));
+            }
+            client.error(error.message, prettyStackFrames);
+        }
+        catch (e) {
+            client.error('Unable to parse stack trace from error object', []);
+            client.debug(objectifyError(e));
+        }
+    }
+    // the dreaction plugin interface
+    return {
+        onConnect: () => {
+            if (typeof window === 'undefined')
+                return;
+            // Intercept window.onerror
+            originalWindowOnError = window.onerror;
+            window.onerror = function (message, source, lineno, colno, error) {
+                if (error) {
+                    reportError(error);
+                }
+                else if (typeof message === 'string') {
+                    const syntheticError = new Error(message);
+                    const frames = [];
+                    if (source) {
+                        frames.push({
+                            fileName: source,
+                            functionName: '<unknown>',
+                            lineNumber: lineno || 0,
+                            columnNumber: colno || 0,
+                        });
+                    }
+                    reportError(syntheticError, frames);
+                }
+                // Call original handler
+                if (originalWindowOnError) {
+                    return originalWindowOnError.apply(this, arguments);
+                }
+                return false;
+            };
+            // Intercept unhandled promise rejections
+            unhandledRejectionHandler = (event) => {
+                const error = event.reason instanceof Error
+                    ? event.reason
+                    : new Error(String(event.reason));
+                reportError(error);
+            };
+            window.addEventListener('unhandledrejection', unhandledRejectionHandler);
+        },
+        onDisconnect: () => {
+            if (typeof window === 'undefined')
+                return;
+            // Restore original handlers
+            if (originalWindowOnError) {
+                window.onerror = originalWindowOnError;
+            }
+            if (unhandledRejectionHandler) {
+                window.removeEventListener('unhandledrejection', unhandledRejectionHandler);
+            }
+        },
+        // attach these functions to the DReaction
+        features: {
+            reportError,
+        },
+    };
+};
+exports.default = trackGlobalErrors;

package/lib/plugins/trackGlobalLogs.d.ts

@@ -0,0 +1,10 @@
+import { DReactionCore } from 'dreaction-client-core';
+/**
+ * Track calls to console.log, console.warn, and console.debug and send them to DReaction logger
+ */
+declare const trackGlobalLogs: () => (dreaction: DReactionCore) => {
+    onConnect: () => void;
+    onDisconnect: () => void;
+};
+export default trackGlobalLogs;
+//# sourceMappingURL=trackGlobalLogs.d.ts.map

package/lib/plugins/trackGlobalLogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trackGlobalLogs.d.ts","sourceRoot":"","sources":["../../src/plugins/trackGlobalLogs.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,aAAa,EAGd,MAAM,uBAAuB,CAAC;AAE/B;;GAEG;AACH,QAAA,MAAM,eAAe,oBAAqB,aAAa;;;CAuCtD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/plugins/trackGlobalLogs.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dreaction_client_core_1 = require("dreaction-client-core");
+/**
+ * Track calls to console.log, console.warn, and console.debug and send them to DReaction logger
+ */
+const trackGlobalLogs = () => (dreaction) => {
+    (0, dreaction_client_core_1.assertHasLoggerPlugin)(dreaction);
+    const client = dreaction;
+    const originalConsoleLog = console.log;
+    const originalConsoleWarn = console.warn;
+    const originalConsoleDebug = console.debug;
+    const originalConsoleInfo = console.info;
+    return {
+        onConnect: () => {
+            console.log = (...args) => {
+                originalConsoleLog(...args);
+                client.log(...args);
+            };
+            console.info = (...args) => {
+                originalConsoleInfo(...args);
+                client.log(...args);
+            };
+            console.warn = (...args) => {
+                originalConsoleWarn(...args);
+                client.warn(args[0]);
+            };
+            console.debug = (...args) => {
+                originalConsoleDebug(...args);
+                client.debug(args[0]);
+            };
+            // console.error is taken care of by ./trackGlobalErrors.ts
+        },
+        onDisconnect: () => {
+            console.log = originalConsoleLog;
+            console.warn = originalConsoleWarn;
+            console.debug = originalConsoleDebug;
+            console.info = originalConsoleInfo;
+        },
+    };
+};
+exports.default = trackGlobalLogs;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "dreaction-react",
+  "version": "1.0.0",
+  "private": false,
+  "description": "DReaction client for React web applications",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "keywords": [
+    "dreaction",
+    "react",
+    "debug"
+  ],
+  "author": "moonrailgun <moonrailgun@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "dreaction-client-core": "1.2.0",
+    "dreaction-protocol": "1.0.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc"
+  }
+}

package/src/components/ConfigPanel.tsx

@@ -0,0 +1,247 @@
+import React, { useState } from 'react';
+import { useDReactionConfig } from '../hooks';
+
+export interface ConfigPanelProps {
+  /**
+   * Initial collapsed state
+   */
+  defaultCollapsed?: boolean;
+  /**
+   * Position of the panel
+   */
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}
+
+export function ConfigPanel({
+  defaultCollapsed = true,
+  position = 'top-right',
+}: ConfigPanelProps) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const {
+    host,
+    port,
+    isConnected,
+    updateHost,
+    updatePort,
+    connect,
+    disconnect,
+  } = useDReactionConfig();
+
+  const [localHost, setLocalHost] = useState(host);
+  const [localPort, setLocalPort] = 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: React.CSSProperties = {
+    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: React.CSSProperties = {
+    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: React.CSSProperties = {
+    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: React.CSSProperties = {
+    width: '100%',
+    padding: '8px 12px',
+    marginTop: '4px',
+    backgroundColor: '#2a2a2a',
+    border: '1px solid #444',
+    borderRadius: '4px',
+    color: '#ffffff',
+    fontSize: '14px',
+    outline: 'none',
+  };
+
+  const buttonStyle: React.CSSProperties = {
+    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: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px 12px',
+    marginTop: '8px',
+    backgroundColor: isConnected ? '#065f46' : '#7c2d12',
+    borderRadius: '4px',
+    fontSize: '13px',
+  };
+
+  const dotStyle: React.CSSProperties = {
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: isConnected ? '#10b981' : '#ef4444',
+    marginRight: '8px',
+  };
+
+  const labelStyle: React.CSSProperties = {
+    marginTop: '12px',
+    marginBottom: '4px',
+    fontSize: '13px',
+    fontWeight: '500',
+    color: '#a0a0a0',
+  };
+
+  const statusIndicatorStyle: React.CSSProperties = {
+    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 (
+    <>
+      <style>
+        {`
+          @keyframes pulse {
+            0%, 100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+            50% {
+              opacity: 0.3;
+              transform: scale(1.3);
+            }
+          }
+        `}
+      </style>
+      <div style={panelStyle}>
+        <div style={headerStyle} onClick={() => setIsCollapsed(!isCollapsed)}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              flex: 1,
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                fontWeight: '600',
+                fontSize: '10px',
+              }}
+            >
+              ⚛️&nbsp;DReaction
+            </div>
+            {isCollapsed && <div style={statusIndicatorStyle}></div>}
+          </div>
+          <div
+            style={{
+              fontSize: '14px',
+              marginLeft: '4px',
+              transform: isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)',
+              transition: 'transform 0.2s ease-in-out',
+            }}
+          >
+            ▼
+          </div>
+        </div>
+
+        <div style={bodyStyle}>
+          <div style={statusStyle}>
+            <div style={dotStyle}></div>
+            <span>{isConnected ? 'Connected' : 'Disconnected'}</span>
+          </div>
+
+          <div style={labelStyle}>Host</div>
+          <input
+            type="text"
+            value={localHost}
+            onChange={(e) => setLocalHost(e.target.value)}
+            placeholder="localhost"
+            style={inputStyle}
+            disabled={isConnected}
+          />
+
+          <div style={labelStyle}>Port</div>
+          <input
+            type="number"
+            value={localPort}
+            onChange={(e) => setLocalPort(e.target.value)}
+            placeholder="9600"
+            style={inputStyle}
+            disabled={isConnected}
+          />
+
+          <button
+            style={buttonStyle}
+            onClick={isConnected ? handleDisconnect : handleConnect}
+            onMouseOver={(e) => {
+              e.currentTarget.style.opacity = '0.9';
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.opacity = '1';
+            }}
+          >
+            {isConnected ? 'Disconnect' : 'Connect'}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/dreaction.ts

@@ -0,0 +1,181 @@
+import { createClient } from 'dreaction-client-core';
+import type {
+  ClientOptions,
+  DReaction,
+  DReactionCore,
+  InferFeaturesFromPlugins,
+  PluginCreator,
+} from 'dreaction-client-core';
+import type { DataWatchPayload } from 'dreaction-protocol';
+import { useEffect } from 'react';
+import networking, { NetworkingOptions } from './plugins/networking';
+import localStorage, { LocalStorageOptions } from './plugins/localStorage';
+import trackGlobalLogs from './plugins/trackGlobalLogs';
+import trackGlobalErrors, {
+  TrackGlobalErrorsOptions,
+} from './plugins/trackGlobalErrors';
+
+export type { ClientOptions };
+
+const DREACTION_LOCAL_STORAGE_CLIENT_ID = 'DREACTION_clientId';
+
+let tempClientId: string | null = null;
+
+export const reactCorePlugins = [
+  trackGlobalErrors(),
+  trackGlobalLogs(),
+  localStorage(),
+  networking(),
+] satisfies PluginCreator<DReactionCore>[];
+
+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,
+    // @ts-ignore
+    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;
+  };
+}
+
+const DEFAULTS: ClientOptions<DReactionReact> = {
+  createSocket: (path: string) => 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: string = '') => {
+    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: string) => {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.setItem(DREACTION_LOCAL_STORAGE_CLIENT_ID, clientId);
+    } else {
+      tempClientId = clientId;
+    }
+  },
+  proxyHack: true,
+};
+
+export const dreaction = createClient<DReactionReact>(DEFAULTS);
+
+function getPluginOptions<T>(options?: T | boolean): T | null {
+  return typeof options === 'object' ? options : null;
+}
+
+dreaction.useReact = (options: UseReactOptions = {}) => {
+  if (options.errors !== false) {
+    dreaction.use(
+      trackGlobalErrors(getPluginOptions(options.errors as any)) as any
+    );
+  }
+
+  if (options.log !== false) {
+    dreaction.use(trackGlobalLogs() as any);
+  }
+
+  if (options.localStorage !== false) {
+    dreaction.use(
+      localStorage(getPluginOptions(options.localStorage) as any) as any
+    );
+  }
+
+  if (options.networking !== false) {
+    dreaction.use(
+      networking(getPluginOptions(options.networking) as any) as any
+    );
+  }
+
+  return dreaction;
+};
+
+dreaction.registerDataWatcher = <T = unknown>(
+  name: string,
+  type: DataWatchPayload['type'],
+  options?: {
+    /**
+     * Is data watcher enabled?
+     */
+    enabled?: boolean;
+  }
+) => {
+  const { enabled = process.env.NODE_ENV === 'development' } = options ?? {};
+  if (!enabled) {
+    return {
+      currentDebugValue: undefined,
+      updateDebugValue: () => {},
+      useDebugDataWatch: () => {},
+    };
+  }
+
+  let prev: T | undefined = undefined;
+
+  const updateDebugValue = (data: T | ((prev: T | undefined) => T)) => {
+    let newData = prev;
+    if (typeof data === 'function') {
+      newData = (data as (prev: T | undefined) => T)(prev);
+    } else {
+      newData = data;
+    }
+    prev = newData;
+    dreaction.send('dataWatch', { name, type, data: newData });
+  };
+
+  return {
+    currentDebugValue: prev,
+    updateDebugValue,
+    useDebugDataWatch: (target: T) => {
+      useEffect(() => {
+        updateDebugValue(target);
+      }, [target]);
+    },
+  };
+};