dreaction-react-native 1.0.0

package/src/index.ts

@@ -0,0 +1,6 @@
+export type { Command } from 'dreaction-protocol';
+import { DraggableBall } from './components/DraggableBall';
+
+export { DraggableBall as DReactionDraggableBall };
+
+export * from './dreaction';

package/src/plugins/asyncStorage.ts

@@ -0,0 +1,222 @@
+import type { DReactionCore, Plugin } from 'dreaction-client-core';
+// @ts-ignore
+import type { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
+export interface AsyncStorageOptions {
+  ignore?: string[];
+}
+
+const PLUGIN_DEFAULTS: AsyncStorageOptions = {
+  ignore: [],
+};
+
+const asyncStorage =
+  (options?: AsyncStorageOptions) => (reactotron: DReactionCore) => {
+    // setup configuration
+    const config = Object.assign({}, PLUGIN_DEFAULTS, options || {});
+    const ignore = config.ignore || PLUGIN_DEFAULTS.ignore;
+
+    let swizzSetItem: AsyncStorageStatic['setItem'];
+    let swizzRemoveItem: AsyncStorageStatic['removeItem'];
+    let swizzMergeItem: AsyncStorageStatic['mergeItem'];
+    let swizzClear: AsyncStorageStatic['clear'];
+    let swizzMultiSet: AsyncStorageStatic['multiSet'];
+    let swizzMultiRemove: AsyncStorageStatic['multiRemove'];
+    let swizzMultiMerge: AsyncStorageStatic['multiMerge'];
+    let isSwizzled = false;
+
+    const sendToReactotron = (action: string, data?: any) => {
+      reactotron.send('asyncStorage.mutation', { action, data });
+    };
+
+    const setItem: AsyncStorageStatic['setItem'] = async (
+      key: string,
+      value: any,
+      callback: any
+    ) => {
+      try {
+        if (ignore!.indexOf(key) < 0) {
+          sendToReactotron('setItem', { key, value });
+        }
+      } catch (e) {}
+      return swizzSetItem(key, value, callback);
+    };
+
+    const removeItem: AsyncStorageStatic['removeItem'] = async (
+      key: string,
+      callback: any
+    ) => {
+      try {
+        if (ignore!.indexOf(key) < 0) {
+          sendToReactotron('removeItem', { key });
+        }
+      } catch (e) {}
+      return swizzRemoveItem(key, callback);
+    };
+
+    const mergeItem: AsyncStorageStatic['mergeItem'] = async (
+      key: string,
+      value: any,
+      callback: any
+    ) => {
+      try {
+        if (ignore!.indexOf(key) < 0) {
+          sendToReactotron('mergeItem', { key, value });
+        }
+      } catch (e) {}
+      return swizzMergeItem(key, value, callback);
+    };
+
+    const clear: AsyncStorageStatic['clear'] = async (callback: any) => {
+      try {
+        sendToReactotron('clear');
+      } catch (e) {}
+      return swizzClear(callback);
+    };
+
+    const multiSet: AsyncStorageStatic['multiSet'] = async (
+      pairs: any,
+      callback: any
+    ) => {
+      try {
+        const shippablePairs = (pairs || []).filter(
+          (pair: any) => pair && pair[0] && ignore!.indexOf(pair[0]) < 0
+        );
+        if (shippablePairs.length > 0) {
+          sendToReactotron('multiSet', { pairs: shippablePairs });
+        }
+      } catch (e) {}
+      return swizzMultiSet(pairs, callback);
+    };
+
+    const multiRemove: AsyncStorageStatic['multiRemove'] = async (
+      keys: any,
+      callback: any
+    ) => {
+      try {
+        const shippableKeys = (keys || []).filter(
+          (key: any) => ignore!.indexOf(key) < 0
+        );
+        if (shippableKeys.length > 0) {
+          sendToReactotron('multiRemove', { keys: shippableKeys });
+        }
+      } catch (e) {}
+      return swizzMultiRemove(keys, callback);
+    };
+
+    const multiMerge: AsyncStorageStatic['multiMerge'] = async (
+      pairs: any,
+      callback: any
+    ) => {
+      try {
+        const shippablePairs = (pairs || []).filter(
+          (pair: any) => pair && pair[0] && ignore!.indexOf(pair[0]) < 0
+        );
+        if (shippablePairs.length > 0) {
+          sendToReactotron('multiMerge', { pairs: shippablePairs });
+        }
+      } catch (e) {}
+      return swizzMultiMerge(pairs, callback);
+    };
+
+    /**
+     * Hijacks the AsyncStorage API.
+     */
+    const trackAsyncStorage = () => {
+      if (isSwizzled) return;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      swizzSetItem = reactotron.asyncStorageHandler.setItem;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.setItem = setItem;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      swizzRemoveItem = reactotron.asyncStorageHandler.removeItem;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.removeItem = removeItem;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      swizzMergeItem = reactotron.asyncStorageHandler.mergeItem;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.mergeItem = mergeItem;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      swizzClear = reactotron.asyncStorageHandler.clear;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.clear = clear;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      swizzMultiSet = reactotron.asyncStorageHandler.multiSet;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.multiSet = multiSet;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      swizzMultiRemove = reactotron.asyncStorageHandler.multiRemove;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.multiRemove = multiRemove;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      swizzMultiMerge = reactotron.asyncStorageHandler.multiMerge;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.multiMerge = multiMerge;
+
+      isSwizzled = true;
+    };
+
+    const untrackAsyncStorage = () => {
+      if (!isSwizzled) return;
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.setItem = swizzSetItem;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.removeItem = swizzRemoveItem;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.mergeItem = swizzMergeItem;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.clear = swizzClear;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.multiSet = swizzMultiSet;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.multiRemove = swizzMultiRemove;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: reactotron-apis
+      reactotron.asyncStorageHandler.multiMerge = swizzMultiMerge;
+
+      isSwizzled = false;
+    };
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore: reactotron-apis
+    if (reactotron.asyncStorageHandler) {
+      trackAsyncStorage();
+    }
+
+    return {
+      features: {
+        trackAsyncStorage,
+        untrackAsyncStorage,
+      },
+    } satisfies Plugin<DReactionCore>;
+  };
+
+export default asyncStorage;

package/src/plugins/devTools.ts

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native';
+import type { DReactionCore, Plugin } from 'dreaction-client-core';
+
+let DevMenu = { show: () => {}, reload: () => {} };
+if (Platform.OS === 'ios') {
+  DevMenu = require('react-native/Libraries/NativeModules/specs/NativeDevMenu');
+}
+
+const devTools: any = () => () => {
+  return {
+    onCommand: (command) => {
+      if (
+        command.type !== 'devtools.open' &&
+        command.type !== 'devtools.reload'
+      ) {
+        return;
+      }
+
+      if (command.type === 'devtools.open') {
+        DevMenu.show();
+      }
+
+      if (command.type === 'devtools.reload') {
+        DevMenu.reload();
+      }
+    },
+  } satisfies Plugin<DReactionCore>;
+};
+
+export default devTools;

package/src/plugins/networking.ts

@@ -0,0 +1,172 @@
+// @ts-ignore
+import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor';
+import type { DReactionCore, Plugin } from 'dreaction-client-core';
+
+/**
+ * Don't include the response bodies for images by default.
+ */
+const DEFAULT_CONTENT_TYPES_RX = /^(image)\/.*$/i;
+
+export interface NetworkingOptions {
+  ignoreContentTypes?: RegExp;
+  ignoreUrls?: RegExp;
+}
+
+const DEFAULTS: NetworkingOptions = {};
+
+const networking =
+  (pluginConfig: NetworkingOptions = {}) =>
+  (reactotron: DReactionCore) => {
+    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 reactotronCounter = 1000;
+
+    // a temporary cache to hold requests so we can match up the data
+    const requestCache = {};
+
+    /**
+     * Fires when we talk to the server.
+     *
+     * @param {*} data - The data sent to the server.
+     * @param {*} instance - The XMLHTTPRequest instance.
+     */
+    function onSend(data: any, xhr: any) {
+      if (options.ignoreUrls && options.ignoreUrls.test(xhr._url)) {
+        xhr._skipReactotron = true;
+        return;
+      }
+
+      // bump the counter
+      reactotronCounter++;
+
+      // tag
+      xhr._trackingName = reactotronCounter;
+
+      // cache
+      (requestCache as any)[reactotronCounter] = {
+        data,
+        xhr,
+        stopTimer: reactotron.startTimer(),
+      };
+    }
+
+    /**
+     * Fires when the server gives us a response.
+     *
+     * @param {number} status - The HTTP response status.
+     * @param {boolean} timeout - Did we timeout?
+     * @param {*} response - The response data.
+     * @param {string} url - The URL we talked to.
+     * @param {*} type - Not sure.
+     * @param {*} xhr - The XMLHttpRequest instance.
+     */
+    function onResponse(
+      status: any,
+      timeout: any,
+      response: any,
+      url: any,
+      type: any,
+      xhr: any
+    ) {
+      if (xhr._skipReactotron) {
+        return;
+      }
+
+      let params = null;
+      const queryParamIdx = url ? url.indexOf('?') : -1;
+      if (queryParamIdx > -1) {
+        params = {};
+        url
+          .substr(queryParamIdx + 1)
+          .split('&')
+          .forEach((pair: any) => {
+            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 as any)[rid] || { xhr };
+      (requestCache as any)[rid] = null;
+
+      // assemble the request object
+      const { data, stopTimer } = cachedRequest;
+      const tronRequest = {
+        url: url || cachedRequest.xhr._url,
+        method: xhr._method || null,
+        data,
+        headers: xhr._headers || null,
+        params,
+      };
+
+      // what type of content is this?
+      const contentType =
+        (xhr.responseHeaders && xhr.responseHeaders['content-type']) ||
+        (xhr.responseHeaders && xhr.responseHeaders['Content-Type']) ||
+        '';
+
+      const sendResponse = (responseBodyText: string) => {
+        let body = `~~~ skipped ~~~`;
+        if (responseBodyText) {
+          try {
+            // all i am saying, is give JSON a chance...
+            body = JSON.parse(responseBodyText);
+          } catch (boom) {
+            body = response;
+          }
+        }
+        const tronResponse = {
+          body,
+          status,
+          headers: xhr.responseHeaders || null,
+        };
+        (reactotron as any).apiResponse(
+          tronRequest,
+          tronResponse,
+          stopTimer ? stopTimer() : null
+        ); // TODO: Fix
+      };
+
+      // can we use the real response?
+      const useRealResponse =
+        (typeof response === 'string' || typeof response === 'object') &&
+        !ignoreContentTypes.test(contentType || '');
+
+      // prepare the right body to send
+      if (useRealResponse) {
+        if (type === 'blob' && typeof FileReader !== 'undefined' && response) {
+          // Disable reason: FileReader should be in global scope since RN 0.54
+          // eslint-disable-next-line no-undef
+          const bReader = new FileReader();
+          const brListener = () => {
+            sendResponse(String(bReader.result));
+            bReader.removeEventListener('loadend', brListener);
+          };
+          bReader.addEventListener('loadend', brListener);
+          bReader.readAsText(response);
+        } else {
+          sendResponse(response);
+        }
+      } else {
+        sendResponse('');
+      }
+    }
+
+    return {
+      onConnect: () => {
+        // register our monkey-patch
+        XHRInterceptor.setSendCallback(onSend);
+        XHRInterceptor.setResponseCallback(onResponse);
+        XHRInterceptor.enableInterception();
+      },
+    } satisfies Plugin<DReactionCore>;
+  };
+export default networking;

package/src/plugins/openInEditor.ts

@@ -0,0 +1,30 @@
+import type { DReactionCore, Plugin } from 'dreaction-client-core';
+import type { Command } from 'dreaction-protocol';
+
+export interface OpenInEditorOptions {
+  url?: string;
+}
+
+const DEFAULTS: OpenInEditorOptions = {
+  url: 'http://localhost:8081',
+};
+
+const openInEditor =
+  (pluginConfig: OpenInEditorOptions = {}) =>
+  () => {
+    const options = Object.assign({}, DEFAULTS, pluginConfig);
+
+    return {
+      onCommand: (command: Command) => {
+        if (command.type !== 'editor.open') return;
+        const { payload } = command;
+        const { file, lineNumber } = payload;
+        const url = `${options.url}/open-stack-frame`;
+        const body = { file, lineNumber: lineNumber || 1 };
+        const method = 'POST';
+
+        fetch(url, { method, body: JSON.stringify(body) });
+      },
+    } satisfies Plugin<DReactionCore>;
+  };
+export default openInEditor;

package/src/plugins/trackGlobalErrors.ts

@@ -0,0 +1,156 @@
+/**
+ * Provides a global error handler to report errors..
+ */
+import {
+  InferFeatures,
+  LoggerPlugin,
+  DReactionCore,
+  assertHasLoggerPlugin,
+  Plugin,
+} from 'dreaction-client-core';
+import _LogBox, {
+  LogBoxStatic as LogBoxStaticPublic,
+  // eslint-disable-next-line import/default, import/namespace
+} from 'react-native/Libraries/LogBox/LogBox';
+// eslint-disable-next-line import/namespace
+// import type { ExtendedExceptionData } from 'react-native/Libraries/LogBox/Data/parseLogBoxLog';
+import type { SymbolicateStackTraceFn } from '../helpers/symbolicateStackTrace';
+import type { ParseErrorStackFn } from '../helpers/parseErrorStack';
+
+interface LogBoxStaticPrivate extends LogBoxStaticPublic {
+  /**
+   * @see https://github.com/facebook/react-native/blob/v0.72.1/packages/react-native/Libraries/LogBox/LogBox.js#L29
+   */
+  // addException: (error: ExtendedExceptionData) => void;
+  addException: (error: any) => void;
+}
+
+const LogBox = _LogBox as unknown as LogBoxStaticPrivate;
+
+// a few functions to help source map errors -- these seem to be not available immediately
+// so we're lazy loading.
+let parseErrorStack: ParseErrorStackFn;
+let symbolicateStackTrace: SymbolicateStackTraceFn;
+
+export interface ErrorStackFrame {
+  fileName: string;
+  functionName: string;
+  lineNumber: number;
+  columnNumber?: number | null;
+}
+
+export interface TrackGlobalErrorsOptions {
+  veto?: (frame: ErrorStackFrame) => boolean;
+}
+
+// defaults
+const PLUGIN_DEFAULTS: TrackGlobalErrorsOptions = {
+  veto: undefined,
+};
+
+const objectifyError = (error: Error) => {
+  const objectifiedError = {} as Record<string, unknown>;
+  Object.getOwnPropertyNames(error).forEach((key) => {
+    objectifiedError[key] = (error as any)[key];
+  });
+  return objectifiedError;
+};
+
+// const reactNativeFrameFinder = frame => contains('/node_modules/react-native/', frame.fileName)
+
+/**
+ * Track global errors and send them to Reactotron logger.
+ */
+const trackGlobalErrors =
+  (options?: TrackGlobalErrorsOptions) => (reactotron: DReactionCore) => {
+    // make sure we have the logger plugin
+    assertHasLoggerPlugin(reactotron);
+    const client = reactotron as DReactionCore &
+      InferFeatures<DReactionCore, LoggerPlugin>;
+
+    // setup configuration
+    const config = Object.assign({}, PLUGIN_DEFAULTS, options || {});
+
+    // manually fire an error
+    function reportError(error: Parameters<typeof LogBox.addException>[0]) {
+      try {
+        parseErrorStack =
+          parseErrorStack ||
+          require('react-native/Libraries/Core/Devtools/parseErrorStack');
+        symbolicateStackTrace =
+          symbolicateStackTrace ||
+          require('react-native/Libraries/Core/Devtools/symbolicateStackTrace');
+      } catch (e) {
+        client.error(
+          'Unable to load "react-native/Libraries/Core/Devtools/parseErrorStack" or "react-native/Libraries/Core/Devtools/symbolicateStackTrace"',
+          []
+        );
+        client.debug(objectifyError(e as Error));
+        return;
+      }
+
+      if (!parseErrorStack || !symbolicateStackTrace) {
+        return;
+      }
+
+      let parsedStacktrace: ReturnType<typeof parseErrorStack>;
+
+      try {
+        // parseErrorStack arg type is wrong, it's expecting an array, a string, or a hermes error data, https://github.com/facebook/react-native/blob/v0.72.1/packages/react-native/Libraries/Core/Devtools/parseErrorStack.js#L41
+        parsedStacktrace = parseErrorStack(error.stack);
+      } catch (e) {
+        client.error('Unable to parse stack trace from error object', []);
+        client.debug(objectifyError(e as Error));
+        return;
+      }
+
+      symbolicateStackTrace(parsedStacktrace)
+        .then((symbolicatedStackTrace) => {
+          let prettyStackFrames = symbolicatedStackTrace.stack.map(
+            (stackFrame) => ({
+              fileName: stackFrame.file,
+              functionName: stackFrame.methodName,
+              lineNumber: stackFrame.lineNumber,
+            })
+          );
+          // does the dev want us to keep each frame?
+          if (config.veto) {
+            prettyStackFrames = prettyStackFrames.filter((frame) =>
+              config?.veto?.(frame)
+            );
+          }
+          client.error(error.message, prettyStackFrames); // TODO: Fix this.
+        })
+        .catch((e) => {
+          client.error(
+            'Unable to symbolicate stack trace from error object',
+            []
+          );
+          client.debug(objectifyError(e));
+        });
+    }
+
+    // the reactotron plugin interface
+    return {
+      onConnect: () => {
+        LogBox.addException = new Proxy(LogBox.addException, {
+          apply: function (
+            target,
+            thisArg,
+            argumentsList: Parameters<typeof LogBox.addException>
+          ) {
+            const error = argumentsList[0];
+            reportError(error);
+            return target.apply(thisArg, argumentsList);
+          },
+        });
+      },
+
+      // attach these functions to the Reactotron
+      features: {
+        reportError,
+      },
+    } satisfies Plugin<DReactionCore>;
+  };
+
+export default trackGlobalErrors;

package/src/plugins/trackGlobalLogs.ts

@@ -0,0 +1,42 @@
+import {
+  InferFeatures,
+  LoggerPlugin,
+  DReactionCore,
+  assertHasLoggerPlugin,
+  Plugin,
+} from 'dreaction-client-core';
+
+/**
+ * Track calls to console.log, console.warn, and console.debug and send them to Reactotron logger
+ */
+const trackGlobalLogs = () => (reactotron: DReactionCore) => {
+  assertHasLoggerPlugin(reactotron);
+  const client = reactotron as DReactionCore &
+    InferFeatures<DReactionCore, LoggerPlugin>;
+
+  return {
+    onConnect: () => {
+      const originalConsoleLog = console.log;
+      console.log = (...args: Parameters<typeof console.log>) => {
+        originalConsoleLog(...args);
+        client.log(...args);
+      };
+
+      const originalConsoleWarn = console.warn;
+      console.warn = (...args: Parameters<typeof console.warn>) => {
+        originalConsoleWarn(...args);
+        client.warn(args[0]);
+      };
+
+      const originalConsoleDebug = console.debug;
+      console.debug = (...args: Parameters<typeof console.debug>) => {
+        originalConsoleDebug(...args);
+        client.debug(args[0]);
+      };
+
+      // console.error is taken care of by ./trackGlobalErrors.ts
+    },
+  } satisfies Plugin<DReactionCore>;
+};
+
+export default trackGlobalLogs;