feat: setup library

.github/workflows/ci.yml

@@ -26,17 +26,17 @@ jobs:
       - name: Typecheck files
         run: yarn typecheck
 
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+  # test:
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v3
 
-      - name: Setup
-        uses: ./.github/actions/setup
+  #     - name: Setup
+  #       uses: ./.github/actions/setup
 
-      - name: Run unit tests
-        run: yarn test --maxWorkers=2 --coverage
+  #     - name: Run unit tests
+  #       run: yarn test --maxWorkers=2 --coverage
 
   build-library:
     runs-on: ubuntu-latest

.yarnrc.yml

@@ -1,10 +1,5 @@
-nodeLinker: node-modules
 nmHoistingLimits: workspaces
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+nodeLinker: node-modules
 
 yarnPath: .yarn/releases/yarn-3.6.1.cjs

example/src/App.tsx

@@ -1,30 +1,89 @@
-import { useState, useEffect } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-xenon-inspector';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import XenonInspector from 'react-native-xenon-inspector';
 
 export default function App() {
-  const [result, setResult] = useState<number | undefined>();
-
-  useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
-
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <TouchableOpacity
+        onPress={() => {
+          fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
+            .then(res => res.json())
+            .then(console.log);
+        }}
+      >
+        <Text>FetchAPI: Get posts</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          fetch('https://jsonplaceholder.typicode.com/posts', {
+            method: 'POST',
+            body: JSON.stringify({
+              title: 'foo',
+              body: 'bar',
+              userId: 1,
+            }),
+            headers: {
+              'Content-type': 'application/json; charset=UTF-8',
+            },
+          })
+            .then(res => res.json())
+            .then(console.log);
+        }}
+      >
+        <Text>FetchAPI: Create post</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          // Create WebSocket connection.
+          const socket = new WebSocket('wss://echo.websocket.org');
+
+          const message = `Hello Server! It's ${new Date().toISOString()}`;
+
+          // Connection opened
+          socket.onopen = () => {
+            socket.send(message);
+            console.log('send', message);
+          };
+
+          socket.onmessage = event => {
+            console.log('onmessage', event.data);
+            if (event.data === message) {
+              socket.close();
+            }
+          };
+        }}
+      >
+        <Text>Echo Websocket</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          XenonInspector.show();
+        }}
+      >
+        <Text>Show Inspector</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          XenonInspector.hide();
+        }}
+      >
+        <Text>Hide Inspector</Text>
+      </TouchableOpacity>
+
+      <XenonInspector.Component logInspectorAutoEnabled networkInspectorAutoEnabled />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
     justifyContent: 'center',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+    alignItems: 'center',
+    backgroundColor: 'white',
   },
 });

package.json

@@ -2,8 +2,9 @@
   "name": "react-native-xenon-inspector",
   "version": "0.1.0",
   "description": "this is a description placeholder",
-  "source": "./src/index.tsx",
+  "source": "./src/index.ts",
   "main": "./lib/commonjs/index.js",
+  "types": "./lib/typescript/commonjs/src/index.d.ts",
   "module": "./lib/module/index.js",
   "exports": {
     ".": {
@@ -130,16 +131,10 @@
       "prettier"
     ],
     "rules": {
+      "curly": "off",
       "react/react-in-jsx-scope": "off",
       "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
+        "error"
       ]
     }
   },
@@ -148,11 +143,20 @@
     "lib/"
   ],
   "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
+    "printWidth": 100,
     "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "quoteProps": "as-needed",
+    "jsxSingleQuote": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "avoid",
+    "proseWrap": "preserve",
+    "endOfLine": "lf",
+    "singleAttributePerLine": false
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -183,5 +187,11 @@
     "languages": "js",
     "type": "library",
     "version": "0.44.3"
+  },
+  "dependencies": {
+    "base64-js": "^1.5.1",
+    "immer": "^10.1.1",
+    "react-native-url-polyfill": "^2.0.0",
+    "use-immer": "^0.10.0"
   }
 }

src/constants.ts

@@ -0,0 +1 @@
+export const NETWORK_INSPECTOR_REQUEST_HEADER = 'X-React-Native-Network-Inspector';

src/global.d.ts

@@ -0,0 +1,29 @@
+interface XMLHttpRequest {
+  _interceptionId?: string;
+}
+
+declare module 'react-native/Libraries/WebSocket/NativeWebSocketModule' {
+  interface NativeWebSocketModule extends NativeModule {
+    connect(
+      uri: string,
+      protocols?: string | string[] | null,
+      options?: {
+        headers: { [headerName: string]: string };
+        [optionName: string]: any;
+      } | null,
+      socketId: number,
+    ): void;
+
+    send(data: string, socketId: number): void;
+
+    sendBinary(data: string, socketId: number): void;
+
+    close(code: number, reason: string, socketId: number): void;
+
+    addListener: (eventType: string) => void;
+    removeListeners: (count: number) => void;
+  }
+
+  const NativeWebSocketModule: NativeWebSocketModule;
+  export default NativeWebSocketModule;
+}

src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { default as useLogInterceptor } from './useLogInterceptor';
+export { default as useNetworkInterceptor } from './useNetworkInterceptor';
+export { default as useScrollToBottom } from './useScrollToBottom';

src/hooks/useLogInterceptor.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useImmer } from 'use-immer';
+import LogInterceptor from '../interceptors/LogInterceptor';
+import type { LogRecord } from '../types';
+
+interface LogInterceptorParams {
+  autoEnabled?: boolean;
+}
+
+export default function useLogInterceptor(params: LogInterceptorParams) {
+  const { autoEnabled = false } = params || {};
+
+  const [isInterceptorEnabled, setIsInterceptorEnabled] = useState(autoEnabled);
+
+  const [logRecords, setLogRecords] = useImmer<LogRecord[]>([]);
+
+  const clearAllRecords = () => {
+    setLogRecords([]);
+  };
+
+  const _isInterceptorEnabled = () => LogInterceptor.instance.isInterceptorEnabled;
+
+  const enableInterception = useCallback(() => {
+    if (_isInterceptorEnabled()) return;
+
+    LogInterceptor.instance
+      .setCallback((type, args) => {
+        setLogRecords(draft => {
+          draft.push({ type, values: Array.from(args) });
+        });
+      })
+      .enableInterception();
+
+    setIsInterceptorEnabled(true);
+  }, [setLogRecords]);
+
+  const disableInterception = useCallback(() => {
+    if (!_isInterceptorEnabled()) return;
+
+    LogInterceptor.instance.disableInterception();
+
+    setIsInterceptorEnabled(false);
+  }, []);
+
+  useEffect(() => {
+    if (autoEnabled) enableInterception();
+
+    if (autoEnabled) return disableInterception;
+  }, [autoEnabled, disableInterception, enableInterception]);
+
+  return {
+    isInterceptorEnabled,
+    enableInterception,
+    disableInterception,
+    clearAllRecords,
+    logRecords,
+  };
+}