dreaction-react 1.0.0

package/lib/hooks.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectionStatus = useConnectionStatus;
+exports.useDReactionConfig = useDReactionConfig;
+const react_1 = require("react");
+const dreaction_1 = require("./dreaction");
+const STORAGE_KEY_HOST = 'DREACTION_host';
+const STORAGE_KEY_PORT = 'DREACTION_port';
+const STORAGE_KEY_AUTO_CONNECT = 'DREACTION_autoConnect';
+/**
+ * Hook to manage DReaction connection status
+ */
+function useConnectionStatus() {
+    const [isConnected, setIsConnected] = (0, react_1.useState)(dreaction_1.dreaction.connected);
+    (0, react_1.useEffect)(() => {
+        const checkConnection = () => {
+            setIsConnected(dreaction_1.dreaction.connected);
+        };
+        // Check connection status periodically
+        const interval = setInterval(checkConnection, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    return isConnected;
+}
+/**
+ * Hook to manage DReaction configuration
+ */
+function useDReactionConfig() {
+    const [host, setHost] = (0, react_1.useState)(() => {
+        if (typeof window !== 'undefined' && window.localStorage) {
+            return window.localStorage.getItem(STORAGE_KEY_HOST) || 'localhost';
+        }
+        return 'localhost';
+    });
+    const [port, setPort] = (0, react_1.useState)(() => {
+        if (typeof window !== 'undefined' && window.localStorage) {
+            const stored = window.localStorage.getItem(STORAGE_KEY_PORT);
+            return stored ? parseInt(stored, 10) : 9600;
+        }
+        return 9600;
+    });
+    const [isConnected, setIsConnected] = (0, react_1.useState)(dreaction_1.dreaction.connected);
+    const hasAutoConnected = (0, react_1.useRef)(false);
+    // Auto-connect on mount if previously connected
+    (0, react_1.useEffect)(() => {
+        if (hasAutoConnected.current)
+            return;
+        if (typeof window !== 'undefined' && window.localStorage) {
+            const shouldAutoConnect = window.localStorage.getItem(STORAGE_KEY_AUTO_CONNECT);
+            if (shouldAutoConnect === 'true' && !dreaction_1.dreaction.connected) {
+                hasAutoConnected.current = true;
+                // Auto-reconnect with saved settings
+                dreaction_1.dreaction.configure({
+                    host,
+                    port,
+                });
+                dreaction_1.dreaction.connect();
+                setIsConnected(true);
+            }
+        }
+    }, [host, port]);
+    (0, react_1.useEffect)(() => {
+        const checkConnection = () => {
+            setIsConnected(dreaction_1.dreaction.connected);
+        };
+        // Check connection status periodically
+        const interval = setInterval(checkConnection, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    const updateHost = (newHost) => {
+        setHost(newHost);
+        if (typeof window !== 'undefined' && window.localStorage) {
+            window.localStorage.setItem(STORAGE_KEY_HOST, newHost);
+        }
+    };
+    const updatePort = (newPort) => {
+        setPort(newPort);
+        if (typeof window !== 'undefined' && window.localStorage) {
+            window.localStorage.setItem(STORAGE_KEY_PORT, newPort.toString());
+        }
+    };
+    const connect = () => {
+        dreaction_1.dreaction.configure({
+            host,
+            port,
+        });
+        dreaction_1.dreaction.connect();
+        setIsConnected(true);
+        // Save auto-connect preference
+        if (typeof window !== 'undefined' && window.localStorage) {
+            window.localStorage.setItem(STORAGE_KEY_AUTO_CONNECT, 'true');
+        }
+    };
+    const disconnect = () => {
+        dreaction_1.dreaction.close();
+        setIsConnected(false);
+        // Clear auto-connect preference
+        if (typeof window !== 'undefined' && window.localStorage) {
+            window.localStorage.setItem(STORAGE_KEY_AUTO_CONNECT, 'false');
+        }
+    };
+    return {
+        host,
+        port,
+        isConnected,
+        updateHost,
+        updatePort,
+        connect,
+        disconnect,
+    };
+}

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export { dreaction, reactCorePlugins } from './dreaction';
+export type { DReactionReact, UseReactOptions } from './dreaction';
+export { ConfigPanel } from './components/ConfigPanel';
+export type { ConfigPanelProps } from './components/ConfigPanel';
+export { useConnectionStatus, useDReactionConfig } from './hooks';
+export { default as networking } from './plugins/networking';
+export type { NetworkingOptions } from './plugins/networking';
+export { default as localStorage } from './plugins/localStorage';
+export type { LocalStorageOptions } from './plugins/localStorage';
+export { default as trackGlobalLogs } from './plugins/trackGlobalLogs';
+export { default as trackGlobalErrors } from './plugins/trackGlobalErrors';
+export type { TrackGlobalErrorsOptions, ErrorStackFrame, } from './plugins/trackGlobalErrors';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACjE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC3E,YAAY,EACV,wBAAwB,EACxB,eAAe,GAChB,MAAM,6BAA6B,CAAC"}

package/lib/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackGlobalErrors = exports.trackGlobalLogs = exports.localStorage = exports.networking = exports.useDReactionConfig = exports.useConnectionStatus = exports.ConfigPanel = exports.reactCorePlugins = exports.dreaction = void 0;
+var dreaction_1 = require("./dreaction");
+Object.defineProperty(exports, "dreaction", { enumerable: true, get: function () { return dreaction_1.dreaction; } });
+Object.defineProperty(exports, "reactCorePlugins", { enumerable: true, get: function () { return dreaction_1.reactCorePlugins; } });
+var ConfigPanel_1 = require("./components/ConfigPanel");
+Object.defineProperty(exports, "ConfigPanel", { enumerable: true, get: function () { return ConfigPanel_1.ConfigPanel; } });
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useConnectionStatus", { enumerable: true, get: function () { return hooks_1.useConnectionStatus; } });
+Object.defineProperty(exports, "useDReactionConfig", { enumerable: true, get: function () { return hooks_1.useDReactionConfig; } });
+// Plugin exports
+var networking_1 = require("./plugins/networking");
+Object.defineProperty(exports, "networking", { enumerable: true, get: function () { return __importDefault(networking_1).default; } });
+var localStorage_1 = require("./plugins/localStorage");
+Object.defineProperty(exports, "localStorage", { enumerable: true, get: function () { return __importDefault(localStorage_1).default; } });
+var trackGlobalLogs_1 = require("./plugins/trackGlobalLogs");
+Object.defineProperty(exports, "trackGlobalLogs", { enumerable: true, get: function () { return __importDefault(trackGlobalLogs_1).default; } });
+var trackGlobalErrors_1 = require("./plugins/trackGlobalErrors");
+Object.defineProperty(exports, "trackGlobalErrors", { enumerable: true, get: function () { return __importDefault(trackGlobalErrors_1).default; } });

package/lib/plugins/localStorage.d.ts

@@ -0,0 +1,14 @@
+import type { DReactionCore } from 'dreaction-client-core';
+export interface LocalStorageOptions {
+    ignore?: string[];
+}
+declare const localStorage: (options?: LocalStorageOptions) => (dreaction: DReactionCore) => {
+    onConnect: () => void;
+    onDisconnect: () => void;
+    features: {
+        trackLocalStorage: () => void;
+        untrackLocalStorage: () => void;
+    };
+};
+export default localStorage;
+//# sourceMappingURL=localStorage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"localStorage.d.ts","sourceRoot":"","sources":["../../src/plugins/localStorage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,uBAAuB,CAAC;AAEnE,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAMD,QAAA,MAAM,YAAY,aACL,mBAAmB,iBAAiB,aAAa;;;;;;;CAsF3D,CAAC;AAEJ,eAAe,YAAY,CAAC"}

package/lib/plugins/localStorage.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const PLUGIN_DEFAULTS = {
+    ignore: [],
+};
+const localStorage = (options) => (dreaction) => {
+    // setup configuration
+    const config = Object.assign({}, PLUGIN_DEFAULTS, options || {});
+    const ignore = config.ignore || PLUGIN_DEFAULTS.ignore;
+    let originalSetItem;
+    let originalRemoveItem;
+    let originalClear;
+    let isIntercepted = false;
+    const sendToDReaction = (action, data) => {
+        dreaction.send('asyncStorage.mutation', { action: action, data });
+    };
+    const setItem = function (key, value) {
+        try {
+            if (ignore.indexOf(key) < 0) {
+                sendToDReaction('setItem', { key, value });
+            }
+        }
+        catch (e) {
+            // ignore errors
+        }
+        return originalSetItem.call(this, key, value);
+    };
+    const removeItem = function (key) {
+        try {
+            if (ignore.indexOf(key) < 0) {
+                sendToDReaction('removeItem', { key });
+            }
+        }
+        catch (e) {
+            // ignore errors
+        }
+        return originalRemoveItem.call(this, key);
+    };
+    const clear = function () {
+        try {
+            sendToDReaction('clear');
+        }
+        catch (e) {
+            // ignore errors
+        }
+        return originalClear.call(this);
+    };
+    /**
+     * Hijacks the localStorage API.
+     */
+    const trackLocalStorage = () => {
+        if (isIntercepted)
+            return;
+        if (typeof window === 'undefined' || !window.localStorage)
+            return;
+        originalSetItem = Storage.prototype.setItem;
+        Storage.prototype.setItem = setItem;
+        originalRemoveItem = Storage.prototype.removeItem;
+        Storage.prototype.removeItem = removeItem;
+        originalClear = Storage.prototype.clear;
+        Storage.prototype.clear = clear;
+        isIntercepted = true;
+    };
+    const untrackLocalStorage = () => {
+        if (!isIntercepted)
+            return;
+        Storage.prototype.setItem = originalSetItem;
+        Storage.prototype.removeItem = originalRemoveItem;
+        Storage.prototype.clear = originalClear;
+        isIntercepted = false;
+    };
+    return {
+        onConnect: () => {
+            trackLocalStorage();
+        },
+        onDisconnect: () => {
+            untrackLocalStorage();
+        },
+        features: {
+            trackLocalStorage,
+            untrackLocalStorage,
+        },
+    };
+};
+exports.default = localStorage;

package/lib/plugins/networking.d.ts

@@ -0,0 +1,11 @@
+import type { DReactionCore } from 'dreaction-client-core';
+export interface NetworkingOptions {
+    ignoreContentTypes?: RegExp;
+    ignoreUrls?: RegExp;
+}
+declare const networking: (pluginConfig?: NetworkingOptions) => (dreaction: DReactionCore) => {
+    onConnect: () => void;
+    onDisconnect: () => void;
+};
+export default networking;
+//# sourceMappingURL=networking.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"networking.d.ts","sourceRoot":"","sources":["../../src/plugins/networking.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,uBAAuB,CAAC;AAOnE,MAAM,WAAW,iBAAiB;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAMD,QAAA,MAAM,UAAU,kBACC,iBAAiB,iBACpB,aAAa;;;CAwTxB,CAAC;AAEJ,eAAe,UAAU,CAAC"}

package/lib/plugins/networking.js

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Don't include the response bodies for images by default.
+ */
+const DEFAULT_CONTENT_TYPES_RX = /^(image)\/.*$/i;
+const DEFAULTS = {
+    ignoreUrls: /symbolicate/,
+};
+const networking = (pluginConfig = {}) => (dreaction) => {
+    const options = Object.assign({}, DEFAULTS, pluginConfig);
+    // a RegExp to suppress adding the body cuz it costs a lot to serialize
+    const ignoreContentTypes = options.ignoreContentTypes || DEFAULT_CONTENT_TYPES_RX;
+    // a XHR call tracker
+    let dreactionCounter = 1000;
+    // a temporary cache to hold requests so we can match up the data
+    const requestCache = {};
+    // Store original functions
+    let originalXHROpen;
+    let originalXHRSend;
+    let originalFetch;
+    /**
+     * Intercept XMLHttpRequest
+     */
+    const interceptXHR = () => {
+        originalXHROpen = XMLHttpRequest.prototype.open;
+        originalXHRSend = XMLHttpRequest.prototype.send;
+        XMLHttpRequest.prototype.open = function (method, url, ...rest) {
+            this._method = method;
+            this._url = url.toString();
+            return originalXHROpen.apply(this, [method, url, ...rest]);
+        };
+        XMLHttpRequest.prototype.send = function (data) {
+            const xhr = this;
+            if (options.ignoreUrls && options.ignoreUrls.test(xhr._url)) {
+                xhr._skipDReaction = true;
+                return originalXHRSend.apply(this, [data]);
+            }
+            // bump the counter
+            dreactionCounter++;
+            // tag
+            xhr._trackingName = dreactionCounter;
+            // cache
+            requestCache[dreactionCounter] = {
+                data,
+                xhr,
+                stopTimer: dreaction.startTimer(),
+            };
+            // Setup listener for response
+            const originalOnReadyStateChange = xhr.onreadystatechange;
+            xhr.onreadystatechange = function () {
+                if (originalOnReadyStateChange) {
+                    originalOnReadyStateChange.apply(this, arguments);
+                }
+                if (xhr.readyState === 4) {
+                    handleXHRResponse(xhr);
+                }
+            };
+            return originalXHRSend.apply(this, [data]);
+        };
+    };
+    /**
+     * Handle XHR response
+     */
+    const handleXHRResponse = (xhr) => {
+        if (xhr._skipDReaction) {
+            return;
+        }
+        const url = xhr._url;
+        let params = null;
+        const queryParamIdx = url ? url.indexOf('?') : -1;
+        if (queryParamIdx > -1) {
+            params = {};
+            url
+                .substr(queryParamIdx + 1)
+                .split('&')
+                .forEach((pair) => {
+                const [key, value] = pair.split('=');
+                if (key && value !== undefined) {
+                    params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
+                }
+            });
+        }
+        // fetch and clear the request data from the cache
+        const rid = xhr._trackingName;
+        const cachedRequest = requestCache[rid] || { xhr };
+        requestCache[rid] = null;
+        // assemble the request object
+        const { data, stopTimer } = cachedRequest;
+        // Parse request headers
+        let requestHeaders = {};
+        try {
+            const requestHeaderString = xhr._requestHeaders;
+            if (requestHeaderString) {
+                requestHeaders = requestHeaderString;
+            }
+        }
+        catch (e) {
+            // ignore
+        }
+        const tronRequest = {
+            url: url || cachedRequest.xhr._url,
+            method: xhr._method || null,
+            data,
+            headers: requestHeaders || null,
+            params,
+        };
+        // Parse response headers
+        let responseHeaders = {};
+        try {
+            const headersString = xhr.getAllResponseHeaders();
+            if (headersString) {
+                headersString.split('\r\n').forEach((line) => {
+                    const parts = line.split(': ');
+                    if (parts.length === 2) {
+                        responseHeaders[parts[0]] = parts[1];
+                    }
+                });
+            }
+        }
+        catch (e) {
+            // ignore
+        }
+        // what type of content is this?
+        const contentType = responseHeaders['content-type'] ||
+            responseHeaders['Content-Type'] ||
+            '';
+        let body = `~~~ skipped ~~~`;
+        const response = xhr.response || xhr.responseText;
+        // can we use the real response?
+        const useRealResponse = (typeof response === 'string' || typeof response === 'object') &&
+            !ignoreContentTypes.test(contentType || '');
+        if (useRealResponse && response) {
+            try {
+                // Try to parse JSON
+                if (typeof response === 'string') {
+                    body = JSON.parse(response);
+                }
+                else {
+                    body = response;
+                }
+            }
+            catch (e) {
+                body = response;
+            }
+        }
+        const tronResponse = {
+            body,
+            status: xhr.status,
+            headers: responseHeaders || null,
+        };
+        dreaction.apiResponse(tronRequest, tronResponse, stopTimer ? stopTimer() : null);
+    };
+    /**
+     * Intercept fetch API
+     */
+    const interceptFetch = () => {
+        originalFetch = window.fetch;
+        window.fetch = function (input, init) {
+            const url = typeof input === 'string'
+                ? input
+                : input instanceof Request
+                    ? input.url
+                    : input.toString();
+            if (options.ignoreUrls && options.ignoreUrls.test(url)) {
+                return originalFetch.call(this, input, init);
+            }
+            // bump the counter
+            dreactionCounter++;
+            const requestId = dreactionCounter;
+            const stopTimer = dreaction.startTimer();
+            // Parse URL and params
+            let params = null;
+            const queryParamIdx = url.indexOf('?');
+            if (queryParamIdx > -1) {
+                params = {};
+                url
+                    .substr(queryParamIdx + 1)
+                    .split('&')
+                    .forEach((pair) => {
+                    const [key, value] = pair.split('=');
+                    if (key && value !== undefined) {
+                        params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
+                    }
+                });
+            }
+            const tronRequest = {
+                url,
+                method: init?.method || 'GET',
+                data: init?.body || null,
+                headers: init?.headers || {},
+                params,
+            };
+            return originalFetch
+                .call(this, input, init)
+                .then(async (response) => {
+                const contentType = response.headers.get('content-type') || '';
+                // Clone the response so we can read it
+                const clonedResponse = response.clone();
+                let body = `~~~ skipped ~~~`;
+                const useRealResponse = !ignoreContentTypes.test(contentType);
+                if (useRealResponse) {
+                    try {
+                        if (contentType.includes('application/json')) {
+                            body = await clonedResponse.json();
+                        }
+                        else {
+                            body = await clonedResponse.text();
+                        }
+                    }
+                    catch (e) {
+                        // ignore parsing errors
+                    }
+                }
+                // Parse response headers
+                const responseHeaders = {};
+                response.headers.forEach((value, key) => {
+                    responseHeaders[key] = value;
+                });
+                const tronResponse = {
+                    body,
+                    status: response.status,
+                    headers: responseHeaders,
+                };
+                dreaction.apiResponse(tronRequest, tronResponse, stopTimer());
+                return response;
+            });
+        };
+    };
+    /**
+     * Restore original functions
+     */
+    const restoreXHR = () => {
+        if (originalXHROpen) {
+            XMLHttpRequest.prototype.open = originalXHROpen;
+        }
+        if (originalXHRSend) {
+            XMLHttpRequest.prototype.send = originalXHRSend;
+        }
+    };
+    const restoreFetch = () => {
+        if (originalFetch) {
+            window.fetch = originalFetch;
+        }
+    };
+    return {
+        onConnect: () => {
+            // register our interceptors
+            if (typeof XMLHttpRequest !== 'undefined') {
+                interceptXHR();
+            }
+            if (typeof window !== 'undefined' &&
+                typeof window.fetch === 'function') {
+                interceptFetch();
+            }
+        },
+        onDisconnect: () => {
+            restoreXHR();
+            restoreFetch();
+        },
+    };
+};
+exports.default = networking;

package/lib/plugins/trackGlobalErrors.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Provides a global error handler to report errors.
+ */
+import { DReactionCore } from 'dreaction-client-core';
+export interface ErrorStackFrame {
+    fileName: string;
+    functionName: string;
+    lineNumber: number;
+    columnNumber?: number | null;
+}
+export interface TrackGlobalErrorsOptions {
+    veto?: (frame: ErrorStackFrame) => boolean;
+}
+/**
+ * Track global errors and send them to DReaction logger.
+ */
+declare const trackGlobalErrors: (options?: TrackGlobalErrorsOptions) => (dreaction: DReactionCore) => {
+    onConnect: () => void;
+    onDisconnect: () => void;
+    features: {
+        reportError: (error: Error, stack?: ErrorStackFrame[]) => void;
+    };
+};
+export default trackGlobalErrors;
+//# sourceMappingURL=trackGlobalErrors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trackGlobalErrors.d.ts","sourceRoot":"","sources":["../../src/plugins/trackGlobalErrors.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAGL,aAAa,EAGd,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,OAAO,CAAC;CAC5C;AAuED;;GAEG;AACH,QAAA,MAAM,iBAAiB,aACV,wBAAwB,iBAAiB,aAAa;;;;6BAenC,KAAK,UAAU,eAAe,EAAE;;CA0F7D,CAAC;AAEJ,eAAe,iBAAiB,CAAC"}