@teardown/cli 1.2.27 → 1.2.29

package/dist/modules/dev/dev-menu/keyboard-handler.d.ts

@@ -15,6 +15,7 @@ export declare class KeyboardHandlerManager {
     private handleDevMenu;
     private handleOpenDebugger;
     private handleExit;
+    private isRawModeSupported;
     private setRawMode;
     private printAvailableCommands;
 }

package/dist/modules/dev/dev-menu/keyboard-handler.js

@@ -101,11 +101,19 @@ class KeyboardHandlerManager {
         process.emit("SIGINT");
         process.exit();
     }
+    isRawModeSupported() {
+        return process.stdin instanceof node_tty_1.ReadStream;
+    }
     setRawMode(enable) {
-        invariant(process.stdin instanceof node_tty_1.ReadStream, "process.stdin must be a readable stream to modify raw mode");
+        if (!this.isRawModeSupported()) {
+            return;
+        }
         process.stdin.setRawMode(enable);
     }
     printAvailableCommands() {
+        if (!this.isRawModeSupported()) {
+            return;
+        }
         this.devServer.terminalReporter.update({
             type: "client_log",
             level: "info",

package/dist/modules/dev/dev-server/cdp/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./cdp.adapter";
+export * from "./types";

package/dist/modules/dev/dev-server/cdp/index.js

@@ -0,0 +1,18 @@
+"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("./cdp.adapter"), exports);
+__exportStar(require("./types"), exports);

package/dist/modules/dev/dev-server/cdp/types.d.ts

@@ -0,0 +1,107 @@
+import type { JSONSerializable } from "../inspector/types";
+type integer = number;
+export interface Debugger {
+    GetScriptSourceParams: {
+        /**
+         * Id of the script to get source for.
+         */
+        scriptId: string;
+    };
+    GetScriptSourceResult: {
+        /**
+         * Script source (empty in case of Wasm bytecode).
+         */
+        scriptSource: string;
+        /**
+         * Wasm bytecode. (Encoded as a base64 string when passed over JSON)
+         */
+        bytecode?: string;
+    };
+    SetBreakpointByUrlParams: {
+        /**
+         * Line number to set breakpoint at.
+         */
+        lineNumber: integer;
+        /**
+         * URL of the resources to set breakpoint on.
+         */
+        url?: string;
+        /**
+         * Regex pattern for the URLs of the resources to set breakpoints on. Either `url` or
+         * `urlRegex` must be specified.
+         */
+        urlRegex?: string;
+        /**
+         * Script hash of the resources to set breakpoint on.
+         */
+        scriptHash?: string;
+        /**
+         * Offset in the line to set breakpoint at.
+         */
+        columnNumber?: integer;
+        /**
+         * Expression to use as a breakpoint condition. When specified, debugger will only stop on the
+         * breakpoint if this expression evaluates to true.
+         */
+        condition?: string;
+    };
+    ScriptParsedEvent: {
+        /**
+         * Identifier of the script parsed.
+         */
+        scriptId: string;
+        /**
+         * URL or name of the script parsed (if any).
+         */
+        url: string;
+        /**
+         * URL of source map associated with script (if any).
+         */
+        sourceMapURL: string;
+    };
+}
+export type Events = {
+    "Debugger.scriptParsed": Debugger["ScriptParsedEvent"];
+    [method: string]: JSONSerializable;
+};
+export type Commands = {
+    "Debugger.getScriptSource": {
+        paramsType: Debugger["GetScriptSourceParams"];
+        resultType: Debugger["GetScriptSourceResult"];
+    };
+    "Debugger.setBreakpointByUrl": {
+        paramsType: Debugger["SetBreakpointByUrlParams"];
+        resultType: null;
+    };
+    [method: string]: {
+        paramsType: JSONSerializable;
+        resultType: JSONSerializable;
+    };
+};
+export type CDPEvent<TEvent extends keyof Events = "unknown"> = {
+    method: TEvent;
+    params: Events[TEvent];
+};
+export type CDPRequest<TCommand extends keyof Commands = "unknown"> = {
+    method: TCommand;
+    params: Commands[TCommand]["paramsType"];
+    id: number;
+};
+export type CDPResponse<TCommand extends keyof Commands = "unknown"> = {
+    result: Commands[TCommand]["resultType"];
+    id: number;
+} | {
+    error: CDPRequestError;
+    id: number;
+};
+export type CDPRequestError = {
+    code: number;
+    message: string;
+    data?: JSONSerializable;
+};
+export type CDPClientMessage = CDPRequest<"Debugger.getScriptSource"> | CDPRequest<"Debugger.scriptParsed"> | CDPRequest<"Debugger.setBreakpointByUrl"> | CDPRequest<never>;
+export type CDPServerMessage = {
+    method: string;
+    params: any;
+} & (CDPEvent<"Debugger.scriptParsed"> | CDPEvent<never> | CDPResponse<"Debugger.getScriptSource"> | CDPResponse<never>);
+export {};

package/dist/modules/dev/dev-server/cdp/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/modules/dev/dev-server/dev-server.js

@@ -10,21 +10,22 @@ const cors_1 = __importDefault(require("@fastify/cors"));
 const middie_1 = __importDefault(require("@fastify/middie"));
 const sensible_1 = __importDefault(require("@fastify/sensible"));
 const cli_server_api_1 = require("@react-native-community/cli-server-api");
-const dev_middleware_1 = require("@react-native/dev-middleware");
-const node_stream_1 = require("node:stream");
 const metro_config_1 = require("@react-native/metro-config");
 const fastify_1 = __importDefault(require("fastify"));
 const metro_1 = __importDefault(require("metro"));
+const node_stream_1 = require("node:stream");
 const keyboard_handler_1 = require("../dev-menu/keyboard-handler");
 const terminal_reporter_1 = require("../terminal/terminal.reporter");
 const devtools_plugin_1 = require("./plugins/devtools.plugin");
+const favicon_plugin_1 = require("./plugins/favicon.plugin");
 const multipart_plugin_1 = require("./plugins/multipart.plugin");
-const sybmolicate_plugin_1 = require("./sybmolicate/sybmolicate.plugin");
 const systrace_plugin_1 = require("./plugins/systrace.plugin");
 const wss_1 = require("./plugins/wss");
 const web_socket_api_server_1 = require("./plugins/wss/servers/web-socket-api.server");
 const web_socket_events_server_1 = require("./plugins/wss/servers/web-socket-events.server");
 const web_socket_message_server_1 = require("./plugins/wss/servers/web-socket-message.server");
+const sybmolicate_plugin_1 = require("./sybmolicate/sybmolicate.plugin");
+const inspector_1 = require("./inspector/inspector");
 class DevServer {
     config;
     terminalReporter;
@@ -123,22 +124,43 @@ class DevServer {
             watch: true,
             onBundleBuilt: this.onBundleBuilt.bind(this),
         });
-        const devMiddleware = (0, dev_middleware_1.createDevMiddleware)({
+        const inspector = new inspector_1.Inspector({
             projectRoot: this.config.projectRoot,
-            serverBaseUrl: `http://${this.config.host}:${this.config.port}`,
-            logger: this.instance.log,
-            unstable_customInspectorMessageHandler: this.customInspectorMessageHandler.bind(this),
-            unstable_experiments: {
-                enableNetworkInspector: true,
-            },
+            serverBaseUrl: this.getDevServerUrl(),
+            // eventReporter: this.terminalReporter,
         });
+        const websockets = inspector.createWebSocketServers();
+        // const devMiddleware = createDevMiddleware({
+        // 	projectRoot: this.config.projectRoot,
+        // 	serverBaseUrl: `http://${this.config.host}:${this.config.port}`,
+        // 	logger: this.instance.log,
+        // 	unstable_customInspectorMessageHandler:
+        // 		this.customInspectorMessageHandler.bind(this),
+        // 	unstable_experiments: {
+        // 		enableNetworkInspector: true,
+        // 	},
+        // });
+        // const debuggerConnectionServer = new DebuggerConnectionServer({
+        // 	devices: this.devices,
+        // 	eventReporter: this.eventReporter,
+        // 	startHeartbeat: this.startHeartbeat,
+        // });
+        // const deviceConnectionServer = new DeviceConnectionServer(this.instance);
         await this.instance.register(cors_1.default, {
-        // hook: "preHandler",
-        // origin: ["localhost:1420", "127.0.0.1:1420"],
-        // allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
-        // credentials: true,
-        // maxAge: 86400,
-        // preflightContinue: false,
+            origin: "*",
+            // 	"localhost",
+            // 	"localhost:8081",
+            // 	"127.0.0.1",
+            // 	"127.0.0.1:8081",
+            // 	/localhost:\d+/,
+            // 	/127\.0\.0\.1:\d+/,
+            // ],
+            // methods: ["GET", "PUT", "POST", "DELETE", "OPTIONS"],
+            // allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
+            // credentials: true,
+            // maxAge: 86400,
+            // preflight: true,
+            preflightContinue: true,
         });
         await this.instance.register(compress_1.default);
         await this.instance.register(sensible_1.default);
@@ -151,9 +173,9 @@ class DevServer {
             eventsServer: this.eventsServer,
             apiServer: this.apiServer,
             endpoints: {
-                "/inspector/debug": devMiddleware.websocketEndpoints["/inspector/debug"],
-                "/inspector/device": devMiddleware.websocketEndpoints["/inspector/device"],
-                "/inspector/network": devMiddleware.websocketEndpoints["/inspector/debug"],
+                "/inspector/debug": websockets["/inspector/debug"],
+                "/inspector/device": websockets["/inspector/device"],
+                "/inspector/network": websockets["/inspector/debug"],
             },
         });
         await this.instance.register(multipart_plugin_1.multipartPlugin);
@@ -166,14 +188,14 @@ class DevServer {
             onSymbolicate: this.onSymbolicate.bind(this),
         });
         await this.instance.register(systrace_plugin_1.systracePlugin);
-        // await this.instance.register(faviconPlugin);
+        await this.instance.register(favicon_plugin_1.faviconPlugin);
         // Register middleware
         this.instance.use("/open-url", cli_server_api_1.openURLMiddleware);
         this.instance.use("/open-stack-frame", (0, cli_server_api_1.openStackFrameInEditorMiddleware)({
             watchFolders: [this.config.projectRoot],
         }));
         this.instance.use(serverInstance.metroServer.processRequest);
-        this.instance.use(devMiddleware.middleware);
+        this.instance.use(inspector.handleHttpRequest);
     }
     onSymbolicate(request, reply) {
         const result = JSON.parse(request.rawBody);
@@ -190,18 +212,18 @@ class DevServer {
         };
     }
     onDeviceMessage(connection, message) {
-        console.log("onDeviceMessage", message);
         this.instance.log.info("Device -> Debugger", {
             message,
         });
         connection.debugger.sendMessage(message);
+        return true;
     }
     onDebuggerMessage(connection, message) {
-        console.log("onDebuggerMessage", message);
         this.instance.log.info("Debugger -> Device", {
             message,
         });
         connection.device.sendMessage(message);
+        return true;
     }
     registerHooks() {
         this.instance.log.info("Registering hooks");

package/dist/modules/dev/dev-server/inspector/device.d.ts

@@ -0,0 +1,46 @@
+import WS from "ws";
+import type { EventReporter, Page } from "./types";
+export declare class Device {
+    private id;
+    private name;
+    private app;
+    private messageFromDeviceQueue;
+    private deviceSocket;
+    private pages;
+    private debuggerConnection;
+    private lastConnectedLegacyReactNativePage;
+    private isLegacyPageReloading;
+    private lastGetPagesMessage;
+    private scriptIdToSourcePathMapping;
+    private projectRoot;
+    private deviceEventReporter;
+    private pagesPollingIntervalId;
+    private createCustomMessageHandler;
+    private connectedPageIds;
+    constructor(id: string, name: string, app: string, socket: WS, projectRoot: string, eventReporter?: EventReporter);
+    private terminateDebuggerConnection;
+    dangerouslyRecreateDevice(id: string, name: string, app: string, socket: WS, projectRoot: string, eventReporter?: EventReporter): void;
+    getName(): string;
+    getApp(): string;
+    getPagesList(): Page[];
+    handleDebuggerConnection(socket: WS, pageId: string, metadata: {
+        userAgent: string | null;
+    }): void;
+    private sendConnectEventToDevice;
+    private sendDisconnectEventToDevice;
+    private pageHasCapability;
+    private createSyntheticPage;
+    private handleMessageFromDevice;
+    private sendMessageToDevice;
+    private newLegacyReactNativePage;
+    private processMessageFromDeviceLegacy;
+    private interceptClientMessageForSourceFetching;
+    private processDebuggerSetBreakpointByUrl;
+    private processDebuggerGetScriptSource;
+    private mapToDevicePageId;
+    private tryParseHTTPURL;
+    private fetchText;
+    private sendErrorToDebugger;
+    private isPageFuseboxFrontend;
+    dangerouslyGetSocket(): WS;
+}

package/dist/modules/dev/dev-server/inspector/device.event-reporter.d.ts

@@ -0,0 +1,37 @@
+import { EventReporter } from "./types";
+export type RequestMetadata = {
+    pageId: string | null;
+    frontendUserAgent: string | null;
+    prefersFuseboxFrontend: boolean | null;
+};
+export type ResponseMetadata = RequestMetadata;
+export type DeviceMetadata = {
+    appId: string;
+    deviceId: string;
+    deviceName: string;
+};
+export declare class DeviceEventReporter {
+    private eventReporter;
+    private metadata;
+    private pendingCommands;
+    constructor(eventReporter: EventReporter, metadata: DeviceMetadata);
+    logRequest(req: {
+        id: number;
+        method: string;
+        [key: string]: unknown;
+    }, origin: "debugger" | "proxy", metadata: RequestMetadata): void;
+    logResponse(res: {
+        id: number;
+        error?: {
+            message: string;
+            data?: unknown;
+        };
+    }, origin: "device" | "proxy", metadata: ResponseMetadata): void;
+    logConnection(connectedEntity: "debugger", metadata: {
+        pageId: string;
+        frontendUserAgent: string | null;
+    }): void;
+    logDisconnection(disconnectedEntity: "device" | "debugger"): void;
+    logProxyMessageHandlingError(messageOrigin: "device" | "debugger", error: Error, message: string): void;
+    private logExpiredCommand;
+}

package/dist/modules/dev/dev-server/inspector/device.event-reporter.js

@@ -0,0 +1,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeviceEventReporter = void 0;
+const ttlcache_1 = __importDefault(require("@isaacs/ttlcache"));
+class DeviceEventReporter {
+    eventReporter;
+    metadata;
+    pendingCommands;
+    constructor(eventReporter, metadata) {
+        this.eventReporter = eventReporter;
+        this.metadata = metadata;
+        this.pendingCommands = new ttlcache_1.default({
+            ttl: 10000,
+            dispose: (command, id, reason) => {
+                if (reason === "delete" || reason === "set") {
+                    // TODO: Report clobbering ('set') using a dedicated error code
+                    return;
+                }
+                this.logExpiredCommand(command);
+            },
+        });
+    }
+    logRequest(req, origin, metadata) {
+        this.pendingCommands.set(req.id, {
+            method: req.method,
+            requestOrigin: origin,
+            requestTime: Date.now(),
+            metadata,
+        });
+    }
+    logResponse(res, origin, metadata) {
+        const pendingCommand = this.pendingCommands.get(res.id);
+        if (!pendingCommand) {
+            this.eventReporter.logEvent({
+                type: "debugger_command",
+                protocol: "CDP",
+                requestOrigin: null,
+                method: null,
+                status: "coded_error",
+                errorCode: "UNMATCHED_REQUEST_ID",
+                responseOrigin: origin,
+                timeSinceStart: null,
+                appId: this.metadata.appId,
+                deviceId: this.metadata.deviceId,
+                deviceName: this.metadata.deviceName,
+                pageId: metadata.pageId,
+                frontendUserAgent: metadata.frontendUserAgent,
+                prefersFuseboxFrontend: metadata.prefersFuseboxFrontend,
+            });
+            return;
+        }
+        const timeSinceStart = Date.now() - pendingCommand.requestTime;
+        this.pendingCommands.delete(res.id);
+        if (res.error) {
+            let message = res.error.message;
+            if ("data" in res.error) {
+                message += ` (${String(res.error.data)})`;
+            }
+            this.eventReporter.logEvent({
+                type: "debugger_command",
+                requestOrigin: pendingCommand.requestOrigin,
+                method: pendingCommand.method,
+                protocol: "CDP",
+                status: "coded_error",
+                errorCode: "PROTOCOL_ERROR",
+                errorDetails: message,
+                responseOrigin: origin,
+                timeSinceStart,
+                appId: this.metadata.appId,
+                deviceId: this.metadata.deviceId,
+                deviceName: this.metadata.deviceName,
+                pageId: pendingCommand.metadata.pageId,
+                frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+                prefersFuseboxFrontend: metadata.prefersFuseboxFrontend,
+            });
+            return;
+        }
+        this.eventReporter.logEvent({
+            type: "debugger_command",
+            protocol: "CDP",
+            requestOrigin: pendingCommand.requestOrigin,
+            method: pendingCommand.method,
+            status: "success",
+            responseOrigin: origin,
+            timeSinceStart,
+            appId: this.metadata.appId,
+            deviceId: this.metadata.deviceId,
+            deviceName: this.metadata.deviceName,
+            pageId: pendingCommand.metadata.pageId,
+            frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+            prefersFuseboxFrontend: metadata.prefersFuseboxFrontend,
+        });
+    }
+    logConnection(connectedEntity, metadata) {
+        this.eventReporter.logEvent({
+            type: "connect_debugger_frontend",
+            status: "success",
+            appId: this.metadata.appId,
+            deviceName: this.metadata.deviceName,
+            deviceId: this.metadata.deviceId,
+            pageId: metadata.pageId,
+            frontendUserAgent: metadata.frontendUserAgent,
+        });
+    }
+    logDisconnection(disconnectedEntity) {
+        const errorCode = disconnectedEntity === "device"
+            ? "DEVICE_DISCONNECTED"
+            : "DEBUGGER_DISCONNECTED";
+        for (const pendingCommand of this.pendingCommands.values()) {
+            this.eventReporter.logEvent({
+                type: "debugger_command",
+                protocol: "CDP",
+                requestOrigin: pendingCommand.requestOrigin,
+                method: pendingCommand.method,
+                status: "coded_error",
+                errorCode,
+                responseOrigin: "proxy",
+                timeSinceStart: Date.now() - pendingCommand.requestTime,
+                appId: this.metadata.appId,
+                deviceId: this.metadata.deviceId,
+                deviceName: this.metadata.deviceName,
+                pageId: pendingCommand.metadata.pageId,
+                frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+                prefersFuseboxFrontend: pendingCommand.metadata.prefersFuseboxFrontend,
+            });
+        }
+        this.pendingCommands.clear();
+    }
+    logProxyMessageHandlingError(messageOrigin, error, message) {
+        this.eventReporter.logEvent({
+            type: "proxy_error",
+            status: "error",
+            messageOrigin,
+            message,
+            error: error.message,
+            errorStack: error.stack ?? "",
+            appId: this.metadata.appId,
+            deviceId: this.metadata.deviceId,
+            deviceName: this.metadata.deviceName,
+            pageId: null,
+        });
+    }
+    logExpiredCommand(pendingCommand) {
+        this.eventReporter.logEvent({
+            type: "debugger_command",
+            protocol: "CDP",
+            requestOrigin: pendingCommand.requestOrigin,
+            method: pendingCommand.method,
+            status: "coded_error",
+            errorCode: "TIMED_OUT",
+            responseOrigin: "proxy",
+            timeSinceStart: Date.now() - pendingCommand.requestTime,
+            appId: this.metadata.appId,
+            deviceId: this.metadata.deviceId,
+            deviceName: this.metadata.deviceName,
+            pageId: pendingCommand.metadata.pageId,
+            frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+            prefersFuseboxFrontend: pendingCommand.metadata.prefersFuseboxFrontend,
+        });
+    }
+}
+exports.DeviceEventReporter = DeviceEventReporter;