@teardown/react-native 1.0.12 → 1.1.0-beta-04

package/dist/plugins/logging.plugin.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoggingPlugin = void 0;
+const methods = ["log", "warn", "error", "debug", "info"];
+class LoggingPlugin {
+    client = null;
+    originalConsoleMethods = {};
+    createConsoleProxy(method) {
+        const original = console[method];
+        return new Proxy(original, {
+            apply: (target, thisArg, args) => {
+                target.apply(thisArg, args);
+                this.client?.debugger?.send("CONSOLE_LOG", {
+                    type: method,
+                    args,
+                });
+            },
+        });
+    }
+    constructor() {
+        methods.forEach((method) => {
+            this.originalConsoleMethods[method] = console[method];
+            console[method] = this.createConsoleProxy(method);
+        });
+    }
+    install(client) {
+        this.client = client;
+    }
+    uninstall() {
+        methods.forEach((method) => {
+            console[method] = this.originalConsoleMethods[method];
+        });
+    }
+}
+exports.LoggingPlugin = LoggingPlugin;

package/dist/plugins/websocket.plugin.d.ts

@@ -0,0 +1,17 @@
+import type { IPlugin, TeardownClient } from "../teardown.client";
+export declare class WebSocketPlugin implements IPlugin {
+    private logger;
+    private client;
+    private sockets;
+    constructor();
+    install(client: TeardownClient<any>): void;
+    private setupWebSocketInterceptor;
+    private wsConnectCallback;
+    private wsSendCallback;
+    private wsOnMessageCallback;
+    private wsOnCloseCallback;
+    private sendOpenEvent;
+    private sendMessageEvent;
+    private sendCloseEvent;
+    disableInterception(): void;
+}

package/dist/plugins/websocket.plugin.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebSocketPlugin = void 0;
+// @ts-ignore
+const WebSocketInterceptor_1 = __importDefault(require("react-native/Libraries/WebSocket/WebSocketInterceptor"));
+const logger_1 = require("@teardown/logger");
+const util_1 = require("@teardown/util");
+class WebSocketPlugin {
+    logger = new logger_1.Logger("WebSocketPlugin");
+    client = null;
+    sockets = new Map();
+    constructor() {
+        this.setupWebSocketInterceptor();
+    }
+    install(client) {
+        this.client = client;
+    }
+    setupWebSocketInterceptor() {
+        if (WebSocketInterceptor_1.default.isInterceptorEnabled()) {
+            this.logger.warn("WebSocketInterceptor is already enabled by another library, disable it or run this first when your app loads");
+            this.disableInterception();
+        }
+        WebSocketInterceptor_1.default.setConnectCallback(this.wsConnectCallback);
+        WebSocketInterceptor_1.default.setSendCallback(this.wsSendCallback);
+        WebSocketInterceptor_1.default.setOnMessageCallback(this.wsOnMessageCallback);
+        WebSocketInterceptor_1.default.setOnCloseCallback(this.wsOnCloseCallback);
+        WebSocketInterceptor_1.default.enableInterception();
+        this.logger.log("WebSocketInterceptor enabled");
+    }
+    wsConnectCallback = (url, protocols, options, socketId) => {
+        const requestId = util_1.Util.generateUUID();
+        const socketInfo = {
+            id: requestId,
+            url,
+            protocols,
+            timestamp: performance.now(),
+        };
+        this.sockets.set(socketId, socketInfo);
+        this.sendOpenEvent(socketInfo);
+    };
+    wsSendCallback = (data, socketId) => {
+        const socket = this.sockets.get(socketId);
+        if (socket) {
+            const messageInfo = {
+                id: socket.id,
+                data: "", // TODO: Currently getting array buffer length errors here when sending data
+                timestamp: performance.now(),
+                direction: "sent",
+            };
+            console.log("messageInfo", messageInfo);
+            // this.sendMessageEvent(messageInfo);
+        }
+    };
+    wsOnMessageCallback = (socketId, message) => {
+        const socket = this.sockets.get(socketId);
+        if (socket) {
+            const messageInfo = {
+                id: socket.id,
+                data: "", // TODO: Currently getting array buffer length errors here when sending data
+                timestamp: performance.now(),
+                direction: "received",
+            };
+            this.sendMessageEvent(messageInfo);
+        }
+    };
+    wsOnCloseCallback = (socketId, event) => {
+        const socket = this.sockets.get(socketId);
+        if (socket) {
+            const closeInfo = {
+                id: socket.id,
+                code: event.code,
+                reason: event.reason,
+                timestamp: performance.now(),
+            };
+            this.sendCloseEvent(closeInfo);
+            this.sockets.delete(socketId);
+        }
+    };
+    sendOpenEvent(info) {
+        if (this.client && this.client.debugger) {
+            this.client.debugger.send("NETWORK_WEBSOCKET_OPEN", info);
+        }
+    }
+    sendMessageEvent(info) {
+        if (this.client && this.client.debugger) {
+            this.client.debugger.send("NETWORK_WEBSOCKET_MESSAGE", info);
+        }
+    }
+    sendCloseEvent(info) {
+        if (this.client && this.client.debugger) {
+            this.client.debugger.send("NETWORK_WEBSOCKET_CLOSE", info);
+        }
+    }
+    disableInterception() {
+        WebSocketInterceptor_1.default.disableInterception();
+        this.sockets.clear();
+    }
+}
+exports.WebSocketPlugin = WebSocketPlugin;

package/dist/services/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./teardown.service"), exports);

package/dist/services/teardown.service.d.ts

@@ -0,0 +1,10 @@
+import type { PluginTuple, TeardownClient } from "../teardown.client";
+export type TeardownServiceContextType<T extends readonly PluginTuple[]> = {
+    client: TeardownClient<T>;
+};
+export declare const TeardownService: {
+    Context: import("react").Context<TeardownServiceContextType<any> | null>;
+    Provider: import("react").Provider<TeardownServiceContextType<any> | null>;
+    useState<T extends readonly PluginTuple[]>(): TeardownServiceContextType<T>;
+    useProvidedState<T extends readonly PluginTuple[]>(client: TeardownClient<T>): TeardownServiceContextType<T>;
+};

package/dist/services/teardown.service.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeardownService = void 0;
+const react_1 = require("react");
+const Context = (0, react_1.createContext)(null);
+exports.TeardownService = {
+    Context,
+    Provider: Context.Provider,
+    useState() {
+        const state = (0, react_1.useContext)(Context);
+        if (state == null) {
+            throw new Error("TeardownService not found");
+        }
+        return state;
+    },
+    useProvidedState(client) {
+        return {
+            client
+        };
+    },
+};

package/dist/teardown.client.d.ts

@@ -0,0 +1,44 @@
+import { Logger } from "@teardown/logger";
+import { Debugger, type DebuggerOptions } from "./debugger";
+export interface IPlugin {
+    install?(client: TeardownClient<any>): void;
+    uninstall?(): void;
+}
+export type DefaultPluginOptions<T> = {
+    debug?: boolean;
+} & T;
+export type PluginOptions<T> = DefaultPluginOptions<{
+    key: string;
+}> & T;
+export declare abstract class Plugin<T = any> {
+    protected logger: Logger;
+    protected constructor(options: PluginOptions<T>);
+    install?(client: TeardownClient<any>): void;
+    uninstall?(): void;
+}
+export type PluginTuple = readonly [string, IPlugin];
+type InferPluginFromTuple<T extends PluginTuple> = {
+    [K in T[0]]: Omit<T[1], "install" | "uninstall">;
+};
+type InferPluginsFromArray<T extends readonly PluginTuple[]> = UnionToIntersection<InferPluginFromTuple<T[number]>>;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+export type TeardownClientOptions<T extends readonly PluginTuple[]> = {
+    plugins?: T;
+    debuggerEnabled?: boolean;
+    loggingEnabled?: boolean;
+} & DebuggerOptions;
+export declare class TeardownClient<T extends readonly PluginTuple[]> {
+    readonly options?: TeardownClientOptions<T> | undefined;
+    logger: Logger;
+    debugger: Debugger | null;
+    private readonly plugins;
+    api: InferPluginsFromArray<T>;
+    constructor(options?: TeardownClientOptions<T> | undefined);
+    private installPlugin;
+    private uninstallPlugin;
+    private uninstallAllPlugins;
+    private reinstallPlugins;
+    shutdown(): void;
+}
+export declare const createTeardownClient: <Plugins extends readonly PluginTuple[]>(plugins: Plugins) => TeardownClient<Plugins>;
+export {};

package/dist/teardown.client.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTeardownClient = exports.TeardownClient = exports.Plugin = void 0;
+const logger_1 = require("@teardown/logger");
+const debugger_1 = require("./debugger");
+class Plugin {
+    logger;
+    constructor(options) {
+        this.logger = new logger_1.Logger(options.key, options.debug ?? false);
+    }
+}
+exports.Plugin = Plugin;
+class TeardownClient {
+    options;
+    logger;
+    debugger;
+    plugins = new Map();
+    api = {};
+    constructor(options) {
+        this.options = options;
+        this.logger = new logger_1.Logger("TeardownClient", options?.loggingEnabled ?? false);
+        const debuggerEnabled = options?.debuggerEnabled ?? __DEV__;
+        this.debugger = debuggerEnabled ? new debugger_1.Debugger(options) : null;
+        options?.plugins?.forEach(([key, plugin]) => {
+            this.plugins.set(key, plugin);
+        });
+        this.installPlugin();
+    }
+    installPlugin() {
+        this.logger.log("Installing plugins");
+        this.plugins.forEach((plugin, key) => {
+            plugin.install?.(this);
+            this.api[key] = plugin;
+        });
+        this.logger.log("Plugins installed");
+    }
+    uninstallPlugin(key) {
+        const plugin = this.plugins.get(key);
+        if (plugin) {
+            plugin.uninstall?.();
+            this.plugins.delete(key);
+            delete this.api[key];
+        }
+    }
+    uninstallAllPlugins() {
+        this.plugins.forEach((_, key) => this.uninstallPlugin(key));
+    }
+    reinstallPlugins() {
+        this.uninstallAllPlugins();
+        this.installPlugin();
+    }
+    shutdown() {
+        this.uninstallAllPlugins();
+        this.debugger?.shutdown();
+    }
+}
+exports.TeardownClient = TeardownClient;
+const createTeardownClient = (plugins) => {
+    return new TeardownClient({
+        loggingEnabled: true,
+        debuggerEnabled: true,
+        plugins,
+    });
+};
+exports.createTeardownClient = createTeardownClient;

package/package.json

@@ -1,28 +1,37 @@
 {
   "name": "@teardown/react-native",
-  "version": "1.0.12",
+  "version": "1.1.0-beta-04",
   "description": "",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "dev": "tsc --declaration --watch"
   },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "README.md",
-    "src/**/*"
+    "dist/**/*"
   ],
   "dependencies": {
-    "@teardown/logger": "workspace:*",
-    "@teardown/util": "workspace:*",
-    "@teardown/websocket": "workspace:*"
+    "@teardown/logger": "^1.1.0-beta-04",
+    "@teardown/util": "^1.1.0-beta-04",
+    "@teardown/websocket": "^1.1.0-beta-04"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.1",
+    "@types/react-native": "^0.73.0",
+    "metro-config": "^0.81.0",
     "react": "^18.3.1",
-    "react-native": "^0.74.3",
-    "react-native-gesture-handler": "^2.17.1",
-    "react-native-safe-area-context": "^4.10.8",
-    "react-native-svg": "^15.4.0"
+    "react-native": "^0.75.4",
+    "react-native-device-info": "^14.0.0",
+    "react-native-gesture-handler": "^2.20.0",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-native": "^0.75",
+    "react-native-device-info": "^14",
+    "react-native-gesture-handler": "^2"
   }
 }

package/src/components/debugger-ui.tsx

@@ -1,237 +0,0 @@
-import {FunctionComponent, useEffect, useRef, useState} from 'react';
-import {DevSettings, Pressable, StyleSheet, Text, View, ViewStyle,} from 'react-native';
-import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {TeardownLogo} from './teardown-logo';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {
-  BottomSheet,
-  BottomSheetCloseIcon,
-  BottomSheetContent,
-  BottomSheetHandleProps,
-  BottomSheetHeader,
-  BottomSheetModalProvider,
-  BottomSheetTitle,
-  BottomSheetView,
-  Button
-} from '@teardown/react-native-ui';
-import {TeardownService} from "../services/teardown.service";
-import {DebuggerStatus} from "../debugger";
-
-export type DebuggerUiPosition =
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'center-left'
-  | 'center-right';
-
-export type DebuggerUiOptions = {
-  enabled?: boolean;
-  position?: DebuggerUiPosition;
-};
-
-export const DebuggerUi: FunctionComponent<DebuggerUiOptions> = props => {
-  const {enabled = true} = props;
-
-  return null;
-
-  if (!__DEV__) {
-    // never render the debugger ui in any mode apart from __DEV__ == true "development"
-    return null;
-  }
-
-  const isNotEnabled = !enabled;
-
-  if (isNotEnabled) {
-    return null;
-  }
-
-  return <DebuggerUiEnabled {...props} />;
-};
-
-const DebuggerUiEnabled: FunctionComponent<DebuggerUiOptions> = props => {
-  const {position} = props;
-
-  const safeAreaInsets = useSafeAreaInsets();
-  const bottomSheetRef = useRef<BottomSheet>(null);
-
-  return (
-    <>
-      <View style={styles.container} pointerEvents={'box-none'}>
-        <GestureHandlerRootView>
-          <BottomSheetModalProvider>
-            <Pressable
-              onPress={() => {
-                // bottomSheetRef.current?.snapToIndex(0);
-              }}
-              style={[
-                styles.orb,
-                getOrbPosition(safeAreaInsets, position ?? 'center-right'),
-              ]}>
-              <TeardownLogo height={20} width={20} />
-            </Pressable>
-
-            <BottomSheet
-              sheetRef={bottomSheetRef}
-              handleComponent={handleProps => (
-                <DebuggerStatusHandleComponent {...handleProps} />
-              )}>
-              <BottomSheetCloseIcon />
-              <BottomSheetView
-                className={''}
-                style={{
-                  paddingBottom: safeAreaInsets.bottom + 16,
-                }}>
-                <BottomSheetHeader>
-                  <BottomSheetTitle>Debugger</BottomSheetTitle>
-                </BottomSheetHeader>
-                <BottomSheetContent>
-                  <Button
-                    onPress={() => {
-                      DevSettings.reload('Teardown reconnect');
-                    }}>
-                    Reconnect debugger
-                  </Button>
-                </BottomSheetContent>
-              </BottomSheetView>
-            </BottomSheet>
-          </BottomSheetModalProvider>
-        </GestureHandlerRootView>
-
-        {/*<View style={styles.half_height}>*/}
-        {/*    */}
-        {/*</View>*/}
-      </View>
-    </>
-  );
-};
-
-const DebuggerStatusHandleComponent: FunctionComponent<
-  BottomSheetHandleProps
-> = () => {
-  const {client} = TeardownService.useState();
-
-  const [debuggerStatus, setDebuggerStatus] = useState<DebuggerStatus | null>(
-    client.debugger?.getStatus() ?? null,
-  );
-
-    useEffect(() => {
-        const listener = client.debugger?.emitter.on("CONNECTION_STATUS_CHANGED", (event) => {
-          const { payload } = event;
-            setDebuggerStatus(event.payload.status);
-        })
-
-        return () => {
-          listener?.remove();
-        };
-    }, [client]);
-
-  return (
-    <View
-      style={[
-        {
-          backgroundColor: getColorForDebuggerStatus(
-            debuggerStatus,
-          ),
-        },
-        styles.debugger_status,
-      ]}>
-      <Text style={styles.debugger_status_text}>{debuggerStatus}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  debugger_status: {
-    flex: 1,
-    borderTopLeftRadius: 15,
-    borderTopRightRadius: 15,
-    padding: 4,
-  },
-  debugger_status_text: {
-    color: 'white',
-    fontSize: 12,
-    textAlign: 'center',
-    fontWeight: 'bold',
-  },
-
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'white',
-  },
-  orb: {
-    height: 40,
-    width: 40,
-    backgroundColor: 'hsl(240 5% 6%)',
-    borderRadius: 40,
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  half_height: {
-    height: '50%',
-    backgroundColor: '#e1e1e1',
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  logo: {
-    height: 20,
-    width: 20,
-  },
-});
-
-const getColorForDebuggerStatus = (status: DebuggerStatus | null) => {
-  switch (status) {
-    case 'CONNECTING':
-      return 'yellow';
-    case 'CONNECTED':
-      return 'green';
-    case 'DISCONNECTED':
-      return 'red';
-    case 'FAILED':
-      return 'red';
-    default:
-      return 'gray';
-  }
-};
-
-const getOrbPosition = (
-  edgeInsets: EdgeInsets,
-  position: DebuggerUiPosition,
-): ViewStyle => {
-  const DEFAULT_PADDING = 16;
-  switch (position) {
-    case 'top-left':
-      return {
-        top: DEFAULT_PADDING + edgeInsets.top,
-        left: DEFAULT_PADDING,
-      };
-    case 'top-right':
-      return {
-        top: DEFAULT_PADDING + edgeInsets.top,
-        right: DEFAULT_PADDING,
-      };
-    case 'bottom-left':
-      return {
-        bottom: DEFAULT_PADDING + edgeInsets.bottom,
-        left: DEFAULT_PADDING,
-      };
-    case 'bottom-right':
-      return {
-        bottom: DEFAULT_PADDING + edgeInsets.bottom,
-        right: DEFAULT_PADDING,
-      };
-    case 'center-left':
-      return {
-        top: '50%',
-        left: DEFAULT_PADDING,
-      };
-    case 'center-right':
-      return {
-        top: '50%',
-        right: DEFAULT_PADDING,
-      };
-  }
-};

package/src/components/teardown-logo.tsx

@@ -1,16 +0,0 @@
-// import type {FunctionComponent} from 'react';
-// import Svg, {Path, SvgProps} from "react-native-svg";
-//
-// export type TeardownLogoProps = SvgProps
-//
-//
-// export const TeardownLogo: FunctionComponent<TeardownLogoProps> = (props) => {
-//     const {} = props;
-//     return (
-//         <Svg width="350" height="350" viewBox="0 0 350 350" fill="none" {...props}>
-//             <Path fillRule="evenodd" clipRule="evenodd"
-//                   d="M175.09 345L300 218.574L256.859 174.909L299.821 131.426L174.91 5.00001L50 131.426L93.141 175.091L50.179 218.574L175.09 345ZM114.879 197.093L93.656 218.574L175.09 300.995L256.523 218.574L235.12 196.911L174.91 257.853L114.879 197.093ZM213.382 174.909L174.91 213.848L136.618 175.091L175.09 136.152L213.382 174.909ZM235.12 152.907L175.09 92.147L114.879 153.089L93.477 131.426L174.91 49.005L256.344 131.426L235.12 152.907Z"
-//                   fill="white"/>
-//         </Svg>
-//     );
-// }

package/src/containers/teardown.container.tsx

@@ -1,40 +0,0 @@
-import {FunctionComponent, PropsWithChildren} from 'react';
-import {PluginTuple, TeardownClient} from '../teardown.client';
-import {DebuggerUiOptions} from '../components/debugger-ui';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
-
-export type TeardownContainerOptions = {
-  debugger: DebuggerUiOptions;
-};
-
-export type TeardownContainerProps<T extends readonly PluginTuple[]> = PropsWithChildren<{
-  client: TeardownClient<T>;
-  options?: TeardownContainerOptions;
-}>;
-
-export const TeardownContainer: FunctionComponent<
-  TeardownContainerProps<any>
-> = props => {
-  const {children, client, options} = props;
-
-  // const providedState = TeardownService.useProvidedState(client);
-
-  return (
-    <>
-      {children}
-    </>
-  );
-
-  return (
-      <SafeAreaProvider className={"flex-1 bg-white"}>
-    {/*<GestureHandlerRootView>*/}
-    {/*    <BottomSheetModalProvider> /!* TODO: Move this into a theme provider/package *!/*/}
-    {/*      <TeardownService.Provider value={providedState}>*/}
-    {/*        {children}*/}
-    {/*        <DebuggerUi {...options?.debugger} />*/}
-    {/*      </TeardownService.Provider>*/}
-    {/*    </BottomSheetModalProvider>*/}
-    {/*</GestureHandlerRootView>*/}
-      </SafeAreaProvider>
-  );
-};