dreaction-react-native 1.0.0

package/src/components/ConfigDialog.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { View, Text, TextInput, Button, Modal, StyleSheet } from 'react-native';
+import { getHost } from '../helpers/getHost';
+
+interface ConfigDialogProps {
+  visible: boolean;
+  onConfirm: (value: string) => void;
+  onCancel: () => void;
+}
+export const ConfigDialog: React.FC<ConfigDialogProps> = React.memo((props) => {
+  const { visible, onConfirm, onCancel } = props;
+  const [inputValue, setInputValue] = useState(getHost());
+
+  const handleConfirm = () => {
+    onConfirm(inputValue);
+  };
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      onRequestClose={() => onCancel()}
+    >
+      <View style={styles.modalOverlay}>
+        <View style={styles.modalContent}>
+          <Text style={styles.title}>DReaction Desktop Application Url</Text>
+          <TextInput
+            style={styles.input}
+            value={inputValue}
+            keyboardType="url"
+            onChangeText={setInputValue}
+            placeholder={getHost()}
+          />
+          <View style={styles.buttonContainer}>
+            <Button title="Cancel" onPress={onCancel} />
+            <Button title="Confirm" onPress={handleConfirm} />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+});
+ConfigDialog.displayName = 'ConfigDialog';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    marginHorizontal: 20,
+    borderRadius: 10,
+    padding: 20,
+  },
+  title: {
+    fontSize: 18,
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 5,
+    padding: 10,
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});

package/src/components/DraggableBall.tsx

@@ -0,0 +1,139 @@
+import React, { useRef, useState } from 'react';
+import {
+  Animated,
+  PanResponder,
+  Dimensions,
+  StyleSheet,
+  Image,
+  Alert,
+} from 'react-native';
+import { ConfigDialog } from './ConfigDialog';
+import { dreaction } from '../dreaction';
+import { getHost } from '../helpers/getHost';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+const BALL_SIZE = 60;
+const CLICK_THRESHOLD = 5;
+
+const initialPosition = {
+  x: SCREEN_WIDTH - BALL_SIZE,
+  y: SCREEN_HEIGHT - BALL_SIZE - 100,
+};
+
+export const DraggableBall: React.FC = React.memo(() => {
+  const position = useRef(new Animated.ValueXY(initialPosition)).current;
+  const lastPosition = useRef(initialPosition);
+  const [isDragging, setIsDragging] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const handleClick = (value: string) => {
+    try {
+      const host = getHost(value);
+
+      dreaction
+        .configure({
+          host,
+        })
+        .close()
+        .connect();
+
+      setModalVisible(false);
+    } catch (e) {
+      Alert.alert('Connected Failed', 'Please check your url');
+    }
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        setIsDragging(true);
+        position.stopAnimation();
+      },
+      onPanResponderMove: (_, gestureState) => {
+        // 使用 lastPosition 计算位置
+        position.setValue({
+          x: lastPosition.current.x + gestureState.dx,
+          y: lastPosition.current.y + gestureState.dy,
+        });
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        setIsDragging(false);
+
+        lastPosition.current = {
+          x: lastPosition.current.x + gestureState.dx,
+          y: lastPosition.current.y + gestureState.dy,
+        };
+
+        if (
+          Math.abs(gestureState.dx) < CLICK_THRESHOLD &&
+          Math.abs(gestureState.dy) < CLICK_THRESHOLD
+        ) {
+          setModalVisible(true);
+          return;
+        }
+
+        const { moveX, moveY } = gestureState;
+
+        // Calculate adsorption to the nearest edge
+        let newX = moveX <= SCREEN_WIDTH / 2 ? 0 : SCREEN_WIDTH - BALL_SIZE; // Adsorb to the left or right
+        let newY = Math.min(
+          Math.max(moveY, 0), // Limit the top boundary
+          SCREEN_HEIGHT - BALL_SIZE // Limit the bottom boundary
+        );
+
+        // Animation
+        Animated.spring(position, {
+          toValue: { x: newX, y: newY },
+          useNativeDriver: false,
+          friction: 5,
+        }).start(() => {
+          lastPosition.current = { x: newX, y: newY };
+        });
+      },
+    })
+  ).current;
+
+  return (
+    <>
+      <Animated.View
+        style={[
+          styles.ball,
+          {
+            transform: [{ translateX: position.x }, { translateY: position.y }],
+            backgroundColor: isDragging ? '#eee' : '#fff',
+          },
+        ]}
+        {...panResponder.panHandlers}
+      >
+        <Image style={styles.icon} source={require('../../assets/icon.png')} />
+      </Animated.View>
+
+      <ConfigDialog
+        visible={modalVisible}
+        onCancel={() => setModalVisible(false)}
+        onConfirm={handleClick}
+      />
+    </>
+  );
+});
+DraggableBall.displayName = 'DraggableBall';
+
+const styles = StyleSheet.create({
+  ball: {
+    width: BALL_SIZE,
+    height: BALL_SIZE,
+    borderRadius: BALL_SIZE / 2,
+    position: 'absolute',
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: '#eee',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+  icon: {
+    width: BALL_SIZE * 0.8,
+    height: BALL_SIZE * 0.8,
+  },
+});

package/src/dreaction.ts

@@ -0,0 +1,221 @@
+import { Platform } from 'react-native';
+import { createClient } from 'dreaction-client-core';
+import type {
+  ClientOptions,
+  InferFeaturesFromPlugins,
+  PluginCreator,
+  Reactotron,
+  DReactionCore,
+} from 'dreaction-client-core';
+// @ts-ignore
+import type { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
+import getReactNativeVersion from './helpers/getReactNativeVersion';
+import getReactNativeDimensions from './helpers/getReactNativeDimensions';
+import asyncStorage, { AsyncStorageOptions } from './plugins/asyncStorage';
+import openInEditor, { OpenInEditorOptions } from './plugins/openInEditor';
+import trackGlobalErrors, {
+  TrackGlobalErrorsOptions,
+} from './plugins/trackGlobalErrors';
+import networking, { NetworkingOptions } from './plugins/networking';
+import devTools from './plugins/devTools';
+import trackGlobalLogs from './plugins/trackGlobalLogs';
+import getReactNativePlatformConstants from './helpers/getReactNativePlatformConstants';
+import { DataWatchPayload } from 'dreaction-protocol';
+import { useEffect } from 'react';
+import { getHost } from './helpers/getHost';
+
+export type { ClientOptions };
+
+const DREACTION_ASYNC_CLIENT_ID = '@REACTOTRON/clientId';
+
+let tempClientId: string | null = null;
+
+export const reactNativeCorePlugins = [
+  asyncStorage(),
+  trackGlobalErrors(),
+  trackGlobalLogs(),
+  openInEditor(),
+  networking(),
+  devTools(),
+] satisfies PluginCreator<DReactionCore>[];
+
+export interface UseReactNativeOptions {
+  errors?: TrackGlobalErrorsOptions | boolean;
+  log?: boolean;
+  editor?: OpenInEditorOptions | boolean;
+  asyncStorage?: AsyncStorageOptions | boolean;
+  networking?: NetworkingOptions | boolean;
+  devTools?: boolean;
+}
+
+type ReactNativePluginFeatures = InferFeaturesFromPlugins<
+  DReactionCore,
+  typeof reactNativeCorePlugins
+>;
+
+export interface ReactotronReactNative
+  extends Reactotron,
+    // @ts-ignore
+    ReactNativePluginFeatures {
+  useReactNative: (options?: UseReactNativeOptions) => this;
+  asyncStorageHandler?: AsyncStorageStatic;
+  setAsyncStorageHandler: (asyncStorage: AsyncStorageStatic) => this;
+  registerDataWatcher: (
+    name: string,
+    type: DataWatchPayload['type']
+  ) => {
+    updateDebugValue: (data: unknown) => void;
+    useDebugDataWatch: (target: unknown) => void;
+  };
+}
+
+const {
+  osRelease,
+  model,
+  serverHost,
+  forceTouch,
+  interfaceIdiom,
+  systemName,
+  uiMode,
+  serial,
+} = getReactNativePlatformConstants();
+
+const DEFAULTS: ClientOptions<ReactotronReactNative> = {
+  createSocket: (path: string) => new WebSocket(path), // eslint-disable-line
+  host: getHost('localhost'),
+  port: 9600,
+  name: 'React Native App',
+  environment: process.env.NODE_ENV || (__DEV__ ? 'development' : 'production'),
+  client: {
+    dreactionLibraryName: 'dreaction-react-native',
+    dreactionLibraryVersion: 'DREACTION_REACT_NATIVE_VERSION',
+    platform: Platform.OS,
+    platformVersion: Platform.Version,
+    osRelease,
+    model,
+    serverHost,
+    forceTouch,
+    interfaceIdiom,
+    systemName,
+    uiMode,
+    serial,
+    reactNativeVersion: getReactNativeVersion()!,
+    ...getReactNativeDimensions(),
+  },
+  /* eslint-disable @typescript-eslint/no-use-before-define */
+  getClientId: async (name: string = '') => {
+    if (dreaction.asyncStorageHandler) {
+      return (await dreaction.asyncStorageHandler.getItem(
+        DREACTION_ASYNC_CLIENT_ID
+      ))!;
+    }
+
+    // Generate clientId based on the device info
+    const { screenWidth, screenHeight, screenScale } =
+      getReactNativeDimensions()!;
+
+    // Accounting for screen rotation
+    const dimensions = [screenWidth, screenHeight].sort().join('-');
+
+    const additionalInfo = Platform.select({
+      ios: systemName,
+      android: model,
+      default: '',
+    });
+
+    tempClientId = [
+      name,
+      Platform.OS,
+      Platform.Version,
+      additionalInfo,
+      dimensions,
+      screenScale,
+    ]
+      .filter(Boolean)
+      .join('-');
+
+    return tempClientId;
+  },
+  setClientId: async (clientId: string) => {
+    if (dreaction.asyncStorageHandler) {
+      return dreaction.asyncStorageHandler.setItem(
+        DREACTION_ASYNC_CLIENT_ID,
+        clientId
+      );
+    }
+
+    tempClientId = clientId;
+  },
+  proxyHack: true,
+};
+
+export const dreaction = createClient<ReactotronReactNative>(DEFAULTS);
+
+function getPluginOptions<T>(options?: T | boolean): T | null {
+  return typeof options === 'object' ? options : null;
+}
+
+dreaction.useReactNative = (options: UseReactNativeOptions = {}) => {
+  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.editor !== false) {
+    dreaction.use(openInEditor(getPluginOptions(options.editor as any)));
+  }
+
+  if (options.asyncStorage !== false) {
+    dreaction.use(
+      asyncStorage(getPluginOptions(options.asyncStorage) as any) as any
+    );
+  }
+
+  if (options.networking !== false) {
+    dreaction.use(
+      networking(getPluginOptions(options.networking) as any) as any
+    );
+  }
+
+  if (options.devTools !== false) {
+    dreaction.use(devTools());
+  }
+
+  return dreaction;
+};
+
+dreaction.setAsyncStorageHandler = (asyncStorage: AsyncStorageStatic) => {
+  dreaction.asyncStorageHandler = asyncStorage;
+
+  return dreaction;
+};
+
+dreaction.registerDataWatcher = (
+  name: string,
+  type: DataWatchPayload['type']
+) => {
+  if (!__DEV__) {
+    return {
+      updateDebugValue: () => {},
+      useDebugDataWatch: () => {},
+    };
+  }
+
+  const updateDebugValue = (data: unknown) => {
+    dreaction.send('dataWatch', { name, type, data });
+  };
+
+  return {
+    updateDebugValue,
+    useDebugDataWatch: (target: unknown) => {
+      useEffect(() => {
+        updateDebugValue(target);
+      }, [target]);
+    },
+  };
+};

package/src/helpers/getHost.ts

@@ -0,0 +1,30 @@
+// @ts-ignore
+import NativeSourceCode from 'react-native/Libraries/NativeModules/specs/NativeSourceCode';
+import { getHostFromUrl } from './parseURL';
+
+/**
+ * Most of the time, host should be 'localhost'.
+ * But sometimes, it's not.  So we need to figure out what it is.
+ * @see https://github.com/infinitered/dreaction/issues/1107
+ *
+ * On an Android emulator, if you want to connect any servers of local, you will need run adb reverse on your terminal. This function gets the localhost IP of host machine directly to bypass this.
+ */
+export const getHost = (defaultHost = 'localhost') => {
+  try {
+    // RN Reference: https://github.com/facebook/react-native/blob/main/packages/react-native/src/private/specs/modules/NativeSourceCode.js
+    const scriptURL = NativeSourceCode.getConstants().scriptURL;
+
+    if (typeof scriptURL !== 'string') {
+      throw new Error('Invalid non-string URL');
+    }
+
+    return getHostFromUrl(scriptURL);
+  } catch (error) {
+    console.warn(
+      `getHost: "${
+        (error as any).message
+      }" for scriptURL - Falling back to ${defaultHost}`
+    );
+    return defaultHost;
+  }
+};

package/src/helpers/getReactNativeDimensions.ts

@@ -0,0 +1,20 @@
+import { Dimensions } from 'react-native';
+import {
+  AppDimensions,
+  getReactNativeDimensionsWithDimensions,
+} from './getReactNativeDimensionsWithDimensions';
+
+export default function getReactNativeDimensions(): AppDimensions | null {
+  let screen = null;
+  let win = null;
+
+  try {
+    screen = Dimensions.get('screen');
+  } catch {}
+
+  try {
+    win = Dimensions.get('window');
+  } catch {}
+
+  return getReactNativeDimensionsWithDimensions(screen, win);
+}

package/src/helpers/getReactNativeDimensionsWithDimensions.ts

@@ -0,0 +1,45 @@
+export interface AppDimensions {
+  screenWidth?: number
+  screenHeight?: number
+  screenScale?: number
+  screenFontScale?: number
+  windowWidth?: number
+  windowHeight?: number
+  windowScale?: number
+  windowFontScale?: number
+}
+
+export function getReactNativeDimensionsWithDimensions(
+  screen: any,
+  win: any
+): AppDimensions | null {
+  try {
+    let screenInfo = {}
+    let windowInfo = {}
+
+    if (screen) {
+      screenInfo = {
+        screenWidth: Math.ceil(screen.width),
+        screenHeight: Math.ceil(screen.height),
+        screenScale: screen.scale,
+        screenFontScale: screen.fontScale,
+      }
+    }
+
+    if (win) {
+      windowInfo = {
+        windowWidth: Math.ceil(win.width),
+        windowHeight: Math.ceil(win.height),
+        windowScale: win.scale,
+        windowFontScale: win.fontScale,
+      }
+    }
+
+    return {
+      ...screenInfo,
+      ...windowInfo,
+    }
+  } catch (e) {}
+
+  return null
+}

package/src/helpers/getReactNativePlatformConstants.ts

@@ -0,0 +1,52 @@
+import {
+  Platform,
+  PlatformIOSStatic,
+  PlatformAndroidStatic,
+} from 'react-native';
+
+interface PlatformConstants {
+  osRelease: string;
+  model: string;
+  serverHost: string;
+  uiMode: string;
+  serial: string;
+  forceTouch: boolean;
+  interfaceIdiom: string;
+  systemName: string;
+}
+
+export default function getReactNativePlatformConstants(): PlatformConstants {
+  const defaults: PlatformConstants = {
+    osRelease: '',
+    model: '',
+    serverHost: '',
+    uiMode: '',
+    serial: '',
+    forceTouch: false,
+    interfaceIdiom: '',
+    systemName: '',
+  };
+
+  if (Platform.OS === 'android') {
+    const constants = Platform.constants as PlatformAndroidStatic['constants'];
+
+    return {
+      ...defaults,
+      osRelease: constants.Release,
+      model: constants.Model,
+      serverHost: constants.ServerHost!,
+      uiMode: constants.uiMode,
+      serial: constants.Serial,
+    };
+  } else if (Platform.OS === 'ios') {
+    const constants = Platform.constants as PlatformIOSStatic['constants'];
+    return {
+      ...defaults,
+      forceTouch: constants.forceTouchAvailable || false,
+      interfaceIdiom: constants.interfaceIdiom,
+      systemName: constants.systemName,
+    };
+  }
+
+  return defaults;
+}

package/src/helpers/getReactNativeVersion.ts

@@ -0,0 +1,6 @@
+import { getReactNativeVersionWithModules } from './getReactNativeVersionWithModules';
+import { Platform } from 'react-native';
+
+export default function getReactNativeVersion(): string | null {
+  return getReactNativeVersionWithModules(Platform.constants);
+}

package/src/helpers/getReactNativeVersionWithModules.ts

@@ -0,0 +1,37 @@
+import { PlatformConstants } from 'react-native';
+
+export function getReactNativeVersionWithModules(
+  constants: PlatformConstants
+): string | null {
+  try {
+    // dodge some bullets
+    if (!constants) {
+      return null;
+    }
+    if (!constants.reactNativeVersion) {
+      return null;
+    }
+
+    // grab the raw numbers
+    const major = constants.reactNativeVersion.major;
+    const minor = constants.reactNativeVersion.minor;
+    const patch = constants.reactNativeVersion.patch;
+    const prerelease = constants.reactNativeVersion.prerelease;
+
+    // check the major or jet
+    if (typeof major !== 'number') {
+      return null;
+    }
+
+    // assemble!
+    const vParts = [];
+    vParts.push(`${major}.${minor}.${patch}`);
+    if (prerelease) {
+      vParts.push(`-${prerelease}`);
+    }
+
+    return vParts.join('');
+  } catch {}
+
+  return null;
+}

package/src/helpers/parseErrorStack.ts

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/namespace
+// @ts-ignore
+import type { StackFrame } from 'react-native/Libraries/Core/NativeExceptionsManager';
+// @ts-ignore
+import type { HermesParsedStack } from 'react-native/Libraries/Core/Devtools/parseHermesStack';
+
+// Fixing react-native/Libraries/Core/Devtools/symbolicateStackTrace
+// since the native type definitions are wrong lol
+
+/** @see https://github.com/facebook/react-native/blob/v0.72.1/packages/react-native/Libraries/Core/Devtools/parseErrorStack.js#L41-L57 */
+export type ParseErrorStackFn = <T extends any[]>(
+  errorStack?: string | T | HermesParsedStack
+) => Array<StackFrame>;

package/src/helpers/parseURL.ts

@@ -0,0 +1,19 @@
+/**
+ * Given a valid http(s) URL, the host for the given URL
+ * is returned.
+ *
+ * @param url {string} URL to extract the host from
+ * @returns {string} host of given URL or throws
+ */
+// Using a capture group to extract the hostname from a URL
+export function getHostFromUrl(url: string) {
+  // Group 1: http(s)://
+  // Group 2: host
+  // Group 3: port
+  // Group 4: rest
+  const host = url.match(/^(?:https?:\/\/)?(\[[^\]]+\]|[^/:\s]+)(?::\d+)?(?:[/?#]|$)/)?.[1]
+
+  if (typeof host !== "string") throw new Error("Invalid URL - host not found")
+
+  return host
+}

package/src/helpers/symbolicateStackTrace.ts

@@ -0,0 +1,28 @@
+// The actual type definitions are wrong, so we are fixing them lol
+// eslint-disable-next-line import/namespace
+// @ts-ignore
+import type { StackFrame } from 'react-native/Libraries/Core/NativeExceptionsManager';
+
+/** @see https://github.com/facebook/react-native/blob/v0.72.1/packages/react-native/Libraries/Core/Devtools/symbolicateStackTrace.js#L17-L25 */
+export type CodeFrame = Readonly<{
+  content: string;
+  location:
+    | {
+        row: number;
+        column: number;
+      }
+    | null
+    | undefined;
+  fileName: string;
+}>;
+
+/** @see https://github.com/facebook/react-native/blob/v0.72.1/packages/react-native/Libraries/Core/Devtools/symbolicateStackTrace.js#L27-L30 */
+export type SymbolicatedStackTrace = Readonly<{
+  stack: Array<StackFrame>;
+  codeFrame: CodeFrame | null | undefined;
+}>;
+
+/** @see https://github.com/facebook/react-native/blob/v0.72.1/packages/react-native/Libraries/Core/Devtools/symbolicateStackTrace.js#L32-L34 */
+export type SymbolicateStackTraceFn = (
+  stack: Array<StackFrame>
+) => Promise<SymbolicatedStackTrace>;