@teardown/react-native 1.0.13 → 1.1.0-beta-05

package/dist/components/debugger-ui.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+export type DebuggerUiPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center-left' | 'center-right';
+export type DebuggerUiOptions = {
+    enabled?: boolean;
+    position?: DebuggerUiPosition;
+};
+export declare const DebuggerUi: FunctionComponent<DebuggerUiOptions>;

package/dist/components/debugger-ui.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DebuggerUi = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const teardown_logo_1 = require("./teardown-logo");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_ui_1 = require("@teardown/react-native-ui");
+const teardown_service_1 = require("../services/teardown.service");
+const DebuggerUi = 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 (0, jsx_runtime_1.jsx)(DebuggerUiEnabled, { ...props });
+};
+exports.DebuggerUi = DebuggerUi;
+const DebuggerUiEnabled = props => {
+    const { position } = props;
+    const safeAreaInsets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const bottomSheetRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, pointerEvents: 'box-none', children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureHandlerRootView, { children: (0, jsx_runtime_1.jsxs)(react_native_ui_1.BottomSheetModalProvider, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                                // bottomSheetRef.current?.snapToIndex(0);
+                            }, style: [
+                                styles.orb,
+                                getOrbPosition(safeAreaInsets, position ?? 'center-right'),
+                            ], children: (0, jsx_runtime_1.jsx)(teardown_logo_1.TeardownLogo, { height: 20, width: 20 }) }), (0, jsx_runtime_1.jsxs)(react_native_ui_1.BottomSheet, { sheetRef: bottomSheetRef, handleComponent: handleProps => ((0, jsx_runtime_1.jsx)(DebuggerStatusHandleComponent, { ...handleProps })), children: [(0, jsx_runtime_1.jsx)(react_native_ui_1.BottomSheetCloseIcon, {}), (0, jsx_runtime_1.jsxs)(react_native_ui_1.BottomSheetView, { style: {
+                                        paddingBottom: safeAreaInsets.bottom + 16,
+                                    }, children: [(0, jsx_runtime_1.jsx)(react_native_ui_1.BottomSheetHeader, { children: (0, jsx_runtime_1.jsx)(react_native_ui_1.BottomSheetTitle, { children: "Debugger" }) }), (0, jsx_runtime_1.jsx)(react_native_ui_1.BottomSheetContent, { children: (0, jsx_runtime_1.jsx)(react_native_ui_1.Button, { onPress: () => {
+                                                    react_native_1.DevSettings.reload('Teardown reconnect');
+                                                }, children: "Reconnect debugger" }) })] })] })] }) }) }) }));
+};
+const DebuggerStatusHandleComponent = () => {
+    const { client } = teardown_service_1.TeardownService.useState();
+    const [debuggerStatus, setDebuggerStatus] = (0, react_1.useState)(client.debugger?.getStatus() ?? null);
+    (0, react_1.useEffect)(() => {
+        const listener = client.debugger?.emitter.on("CONNECTION_STATUS_CHANGED", (event) => {
+            const { payload } = event;
+            setDebuggerStatus(event.payload.status);
+        });
+        return () => {
+            listener?.remove();
+        };
+    }, [client]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            {
+                backgroundColor: getColorForDebuggerStatus(debuggerStatus),
+            },
+            styles.debugger_status,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.debugger_status_text, children: debuggerStatus }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    debugger_status: {
+        flex: 1,
+        borderTopLeftRadius: 15,
+        borderTopRightRadius: 15,
+        padding: 4,
+    },
+    debugger_status_text: {
+        color: 'white',
+        fontSize: 12,
+        textAlign: 'center',
+        fontWeight: 'bold',
+    },
+    container: {
+        ...react_native_1.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) => {
+    switch (status) {
+        case 'CONNECTING':
+            return 'yellow';
+        case 'CONNECTED':
+            return 'green';
+        case 'DISCONNECTED':
+            return 'red';
+        case 'FAILED':
+            return 'red';
+        default:
+            return 'gray';
+    }
+};
+const getOrbPosition = (edgeInsets, position) => {
+    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/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './debugger-ui';

package/dist/components/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("./debugger-ui"), exports);

package/dist/components/teardown-logo.d.ts

@@ -0,0 +1,4 @@
+import type { FunctionComponent } from "react";
+import { type SvgProps } from "react-native-svg";
+export type TeardownLogoProps = SvgProps;
+export declare const TeardownLogo: FunctionComponent<TeardownLogoProps>;

package/dist/components/teardown-logo.js

@@ -0,0 +1,33 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeardownLogo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const TeardownLogo = (props) => {
+    const {} = props;
+    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: "350", height: "350", viewBox: "0 0 350 350", fill: "none", ...props, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.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" }) }));
+};
+exports.TeardownLogo = TeardownLogo;

package/dist/containers/index.d.ts

@@ -0,0 +1 @@
+export * from './teardown.container';

package/dist/containers/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.container"), exports);

package/dist/containers/teardown.container.d.ts

@@ -0,0 +1,11 @@
+import type { FunctionComponent, PropsWithChildren } from "react";
+import type { PluginTuple, TeardownClient } from "../teardown.client";
+import type { DebuggerUiOptions } from "../components";
+export type TeardownContainerOptions = {
+    debugger: DebuggerUiOptions;
+};
+export type TeardownContainerProps<T extends readonly PluginTuple[]> = PropsWithChildren<{
+    client: TeardownClient<T>;
+    options?: TeardownContainerOptions;
+}>;
+export declare const TeardownContainer: FunctionComponent<TeardownContainerProps<any>>;

package/dist/containers/teardown.container.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeardownContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const services_1 = require("../services");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const TeardownContainer = (props) => {
+    const { children, client, options } = props;
+    const providedState = services_1.TeardownService.useProvidedState(client);
+    return ((0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaProvider, { children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureHandlerRootView, { children: children }) }));
+};
+exports.TeardownContainer = TeardownContainer;

package/dist/debugger.d.ts

@@ -0,0 +1,13 @@
+import { type ClientWebsocketEvents, type ConnectionEstablishedWebsocketEvent, WebsocketClient, type WebsocketClientOptions, type WebsocketConnectionStatus } from "@teardown/websocket";
+export type DebuggerStatus = WebsocketConnectionStatus;
+export type DebuggerOptions = WebsocketClientOptions & {
+    deviceName?: string;
+};
+export declare class Debugger extends WebsocketClient<ClientWebsocketEvents> {
+    private readonly customDeviceName?;
+    constructor(options?: DebuggerOptions);
+    private getDeviceName;
+    onConnectionEstablished(event: ConnectionEstablishedWebsocketEvent): Promise<void>;
+    getHostFromUrl(url: string): string;
+    getHost(): string;
+}

package/dist/debugger.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Debugger = void 0;
+const logger_1 = require("@teardown/logger");
+const websocket_1 = require("@teardown/websocket");
+const react_native_1 = require("react-native");
+const react_native_device_info_1 = __importDefault(require("react-native-device-info"));
+class Debugger extends websocket_1.WebsocketClient {
+    customDeviceName;
+    constructor(options) {
+        super({
+            logger: new logger_1.Logger("Debugger"),
+            ...options,
+        });
+        this.customDeviceName = options?.deviceName;
+    }
+    async getDeviceName() {
+        if (this.customDeviceName) {
+            return this.customDeviceName;
+        }
+        try {
+            return await react_native_device_info_1.default.getDeviceName();
+        }
+        catch (error) {
+            return react_native_1.Platform.select({
+                ios: "iPhone",
+                android: "Android",
+                default: "Unknown Device",
+            });
+        }
+    }
+    async onConnectionEstablished(event) {
+        const [deviceId, deviceName] = await Promise.all([
+            react_native_device_info_1.default.getUniqueId(),
+            this.getDeviceName(),
+        ]);
+        this.send("DEVICE_CONNECTION_ESTABLISHED", {
+            deviceId,
+            deviceName,
+            platform: react_native_1.Platform.OS,
+            platformVersion: react_native_1.Platform.Version,
+            reactNativeVersion: react_native_1.Platform.constants.reactNativeVersion,
+            isDisableAnimations: react_native_1.Platform.constants.isDisableAnimations ?? false,
+            isTesting: react_native_1.Platform.constants.isTesting,
+        });
+    }
+    getHostFromUrl(url) {
+        const host = url.match(/^(?:https?:\/\/)?(\[[^\]]+\]|[^/:\s]+)(?::\d+)?(?:[/?#]|$)/)?.[1];
+        if (typeof host !== "string") {
+            throw new Error("Invalid URL - host not found");
+        }
+        return host;
+    }
+    getHost() {
+        try {
+            // https://github.com/facebook/react-native/blob/2a7f969500cef73b621269299619ee1f0ee9521a/packages/react-native/src/private/specs/modules/NativeSourceCode.js#L16
+            const scriptURL = react_native_1.NativeModules?.SourceCode?.getConstants().scriptURL;
+            if (typeof scriptURL !== "string")
+                throw new Error("Invalid non-string URL");
+            return this.getHostFromUrl(scriptURL);
+        }
+        catch (error) {
+            const superHost = super.getHost();
+            const errorMessage = typeof error === "object" && error !== null && "message" in error
+                ? error.message
+                : String(error);
+            this.logger.warn(`Failed to get host: "${errorMessage}" - Falling back to ${superHost}`);
+            return superHost;
+        }
+    }
+}
+exports.Debugger = Debugger;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./containers";
+export * from "./teardown.client";
+export * from "./plugins";

package/dist/index.js

@@ -0,0 +1,21 @@
+"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 });
+// export * from './components';
+__exportStar(require("./containers"), exports);
+// export * from './services';
+__exportStar(require("./teardown.client"), exports);
+__exportStar(require("./plugins"), exports);

package/dist/metro/index.d.ts

@@ -0,0 +1,2 @@
+import type { MetroConfig } from "metro-config";
+export declare const getConfig: (configPath: string) => Promise<MetroConfig>;

package/dist/metro/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConfig = void 0;
+const getConfig = async (configPath) => { };
+exports.getConfig = getConfig;

package/dist/metro-plugin.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/metro-plugin.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_path_1 = __importDefault(require("node:path"));
+const chokidar_1 = __importDefault(require("chokidar"));
+function getConfig() {
+    const screensDir = node_path_1.default.join(__dirname, "screens");
+    const outputFile = node_path_1.default.join(__dirname, "screens.gen.tsx");
+    return {
+        server: {
+            enhanceMiddleware: (middleware) => {
+                return (req, res, next) => {
+                    console.log("Request URL:", req.url);
+                    // Handle requests as usual
+                    return middleware;
+                };
+            },
+        },
+    };
+}
+// Function to generate the output file
+function generateOutputFile() {
+    // Your code to generate the output file based on the files in the ./screens folder
+    const outputContent = "/* Generated file */";
+    console.log("Generating output file...");
+    // fs.writeFileSync(outputFile, outputContent);
+}
+// Initialize the watcher
+const watcher = chokidar_1.default.watch(screensDir, {
+    ignored: /(^|[\/\\])\../, // Ignore dotfiles
+    persistent: true,
+});
+// Watch for changes in the ./screens folder
+watcher
+    .on("add", generateOutputFile)
+    .on("change", generateOutputFile)
+    .on("unlink", generateOutputFile)
+    .on("ready", generateOutputFile) // Generate the initial output file
+    .on("error", (error) => console.error(`Watcher error: ${error}`));
+console.log(`Watching ${screensDir} for changes...`);
+module.exports = {
+    server: {},
+};

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

@@ -0,0 +1,23 @@
+import type { TeardownClient } from "../teardown.client";
+import { type DefaultPluginOptions, Plugin } from "../teardown.client";
+export type HTTPPluginOptions = DefaultPluginOptions<{
+    ignoreURLs?: RegExp[];
+}>;
+export declare class HTTPPlugin extends Plugin {
+    private client;
+    private requests;
+    private ignoreURLs;
+    constructor(options?: HTTPPluginOptions);
+    install(client: TeardownClient<any>): void;
+    enableXHRInterceptor(): void;
+    disableInterception(): void;
+    private shouldIgnoreURL;
+    private xhrOpenCallback;
+    private xhrRequestHeaderCallback;
+    private xhrSendCallback;
+    private serializeRequestBody;
+    private xhrResponseCallback;
+    private parseResponseHeaders;
+    private parseResponseBody;
+    private sendHTTPEvent;
+}

package/dist/plugins/http.plugin.js

@@ -0,0 +1,144 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTTPPlugin = void 0;
+const util_1 = require("@teardown/util");
+// @ts-ignore
+const XHRInterceptor_1 = __importDefault(require("react-native/Libraries/Network/XHRInterceptor"));
+const teardown_client_1 = require("../teardown.client");
+class HTTPPlugin extends teardown_client_1.Plugin {
+    client = null;
+    requests = new Map();
+    ignoreURLs;
+    constructor(options = {}) {
+        super({
+            ...options,
+            key: "HTTPPlugin",
+        });
+        this.ignoreURLs = options.ignoreURLs || [];
+    }
+    install(client) {
+        this.client = client;
+        this.enableXHRInterceptor();
+    }
+    enableXHRInterceptor() {
+        // noinspection TypeScriptUnresolvedReference
+        if (XHRInterceptor_1.default.isInterceptorEnabled()) {
+            // this.logger.info(
+            //     'XHRInterceptor is already enabled by another library. Disable it or run this plugin first when your app loads.',
+            // );
+            this.logger.info("XHRInterceptor is already enabled. Teardown overrides the existing interceptor - other plugins may not work as expected.");
+            this.disableInterception();
+        }
+        this.logger.info("Enabling XHRInterceptor");
+        // noinspection TypeScriptUnresolvedReference
+        XHRInterceptor_1.default.setOpenCallback(this.xhrOpenCallback);
+        // noinspection TypeScriptUnresolvedReference
+        XHRInterceptor_1.default.setRequestHeaderCallback(this.xhrRequestHeaderCallback);
+        // noinspection TypeScriptUnresolvedReference
+        XHRInterceptor_1.default.setSendCallback(this.xhrSendCallback);
+        // noinspection TypeScriptUnresolvedReference
+        XHRInterceptor_1.default.setResponseCallback(this.xhrResponseCallback);
+        // noinspection TypeScriptUnresolvedReference
+        XHRInterceptor_1.default.enableInterception();
+        this.logger.info("XHRInterceptor enabled");
+    }
+    disableInterception() {
+        this.logger.info("Disabling XHRInterceptor");
+        XHRInterceptor_1.default.disableInterception();
+        this.requests.clear();
+        this.logger.info("XHRInterceptor disabled");
+    }
+    shouldIgnoreURL(url) {
+        return this.ignoreURLs.some((ignoreRegex) => ignoreRegex.test(url));
+    }
+    xhrOpenCallback = (method, url, xhr) => {
+        if (this.shouldIgnoreURL(url)) {
+            return;
+        }
+        const requestId = util_1.Util.generateUUID();
+        const HTTPRequestInfo = {
+            id: requestId,
+            type: "XMLHttpRequest",
+            url,
+            method: method,
+            requestHeaders: { "TD-Request-ID": requestId },
+            startTime: performance.now(),
+            updatedAt: performance.now(),
+        };
+        this.requests.set(xhr._id, HTTPRequestInfo);
+    };
+    xhrRequestHeaderCallback = (header, value, xhr) => {
+        const request = this.requests.get(xhr._id);
+        if (request) {
+            request.requestHeaders[header] = value;
+            request.updatedAt = performance.now();
+        }
+    };
+    xhrSendCallback = (data, xhr) => {
+        const request = this.requests.get(xhr._id);
+        if (request) {
+            xhr.setRequestHeader("TD-Request-ID", request.id);
+            request.dataSent = this.serializeRequestBody(data);
+            request.updatedAt = performance.now();
+            this.sendHTTPEvent(request);
+        }
+    };
+    serializeRequestBody(data) {
+        if (typeof data === "string") {
+            return data;
+        }
+        try {
+            return JSON.stringify(data);
+        }
+        catch (error) {
+            this.logger.warn("Failed to stringify request body", error);
+            return "[Unable to serialize request body]";
+        }
+    }
+    xhrResponseCallback = (status, timeout, response, responseURL, responseType, xhr) => {
+        const request = this.requests.get(xhr._id);
+        if (request) {
+            request.status = status;
+            request.responseHeaders = this.parseResponseHeaders(xhr.getAllResponseHeaders());
+            request.response = this.parseResponseBody(response, responseType);
+            request.responseURL = responseURL;
+            request.responseType = responseType;
+            request.timeout = timeout;
+            request.endTime = performance.now();
+            request.updatedAt = performance.now();
+            this.sendHTTPEvent(request);
+            this.requests.delete(xhr._id);
+        }
+    };
+    parseResponseHeaders(headersString) {
+        const headersObject = {};
+        if (headersString) {
+            const headerPairs = headersString.trim().split(/[\r\n]+/);
+            headerPairs.forEach((headerPair) => {
+                const [key, value] = headerPair.split(": ");
+                headersObject[key] = value;
+            });
+        }
+        return headersObject;
+    }
+    parseResponseBody(response, responseType) {
+        if (responseType === "json") {
+            try {
+                return JSON.stringify(JSON.parse(response), null, 2);
+            }
+            catch (error) {
+                this.logger.warn("Failed to parse JSON response", error);
+            }
+        }
+        return response;
+    }
+    sendHTTPEvent(httpRequestInfo) {
+        if (this.client?.debugger) {
+            this.client.debugger.send("NETWORK_HTTP_REQUEST", httpRequestInfo);
+        }
+    }
+}
+exports.HTTPPlugin = HTTPPlugin;

package/dist/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export * from './http.plugin';
+export * from './logging.plugin';

package/dist/plugins/index.js

@@ -0,0 +1,19 @@
+"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("./http.plugin"), exports);
+// export * from './websocket.plugin';
+__exportStar(require("./logging.plugin"), exports);

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

@@ -0,0 +1,9 @@
+import type { IPlugin, TeardownClient } from "../teardown.client";
+export declare class LoggingPlugin implements IPlugin {
+    private client;
+    private originalConsoleMethods;
+    private createConsoleProxy;
+    constructor();
+    install(client: TeardownClient<any>): void;
+    uninstall(): void;
+}

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.d.ts

@@ -0,0 +1 @@
+export * from './teardown.service';

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,27 +1,37 @@
 {
-	"name": "@teardown/react-native",
-	"version": "1.0.13",
-	"description": "",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
-		"build": "tsc --declaration",
-		"dev": "tsc --declaration --watch"
-	},
-	"main": "./src/index.ts",
-	"types": "./src/index.ts",
-	"files": ["README.md", "./src/**/*"],
-	"dependencies": {
-		"@teardown/logger": "link:@teardown/logger",
-		"@teardown/util": "link:@teardown/util",
-		"@teardown/websocket": "link:@teardown/websocket",
-		"react": "^18.3.1",
-		"react-native": "^0.74.3"
-	},
-	"devDependencies": {
-		"@types/react": "^18.3.1",
-		"react-native-gesture-handler": "^2.17.1",
-		"react-native-safe-area-context": "^4.10.8",
-		"react-native-svg": "^15.7.1",
-		"typescript": "^5.6.3"
-	}
+  "name": "@teardown/react-native",
+  "version": "1.1.0-beta-05",
+  "description": "",
+  "scripts": {
+    "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",
+    "dist/**/*"
+  ],
+  "dependencies": {
+    "@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.1",
+    "@types/react-native": "^0.73.0",
+    "metro-config": "^0.81.0",
+    "react": "^18.3.1",
+    "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"
+  }
 }