@callstack/repack-dev-server 5.3.0 → 5.4.0-canary-20260831210904

package/dist/createServer.d.ts

@@ -10,6 +10,6 @@ export declare function createServer(config: Server.Config): Promise<{
     start: () => Promise<void>;
     stop: () => Promise<void>;
     instance: Fastify.FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>, import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>, Fastify.FastifyBaseLogger, Fastify.FastifyTypeProviderDefault> & PromiseLike<Fastify.FastifyInstance<import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>, import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>, Fastify.FastifyBaseLogger, Fastify.FastifyTypeProviderDefault>> & {
-        __linterBrands: "SafePromiseLike";
+        __linterBrands: 'SafePromiseLike';
     };
 }>;

package/dist/createServer.js

@@ -21,7 +21,6 @@ import { normalizeOptions } from './utils/normalizeOptions.js';
  * @returns `start` and `stop` functions as well as an underlying Fastify `instance`.
  */
 export async function createServer(config) {
-    // biome-ignore lint/style/useConst: needed in fastify constructor
     let delegate;
     const options = normalizeOptions(config.options);
     /** Fastify instance powering the development server. */

package/dist/plugins/devtools/devtoolsPlugin.js

@@ -27,8 +27,11 @@ async function devtoolsPlugin(instance, { delegate }) {
         url: '/open-stack-frame',
         handler: async (request, reply) => {
             const { file, lineNumber } = parseRequestBody(request.body);
-            const filepath = delegate.devTools?.resolveProjectPath(file) ?? file;
-            launchEditor(`${filepath}:${lineNumber}`, process.env.REACT_EDITOR);
+            const openedRemotely = await delegate.devTools?.openStackFrame?.(file, lineNumber);
+            if (!openedRemotely) {
+                const filepath = delegate.devTools?.resolveProjectPath(file) ?? file;
+                launchEditor(`${filepath}:${lineNumber}`, process.env.REACT_EDITOR);
+            }
             reply.send('OK');
         },
     });

package/dist/plugins/symbolicate/Symbolicator.d.ts

@@ -1,5 +1,4 @@
 import type { FastifyBaseLogger } from 'fastify';
-import { SourceMapConsumer } from 'source-map';
 import type { ReactNativeStackFrame, SymbolicatorDelegate, SymbolicatorResults } from './types.js';
 /**
  * Class for transforming stack traces from React Native application with using Source Map.
@@ -18,10 +17,6 @@ export declare class Symbolicator {
      * @returns Inferred platform or `undefined` if cannot infer.
      */
     static inferPlatformFromStack(stack: ReactNativeStackFrame[]): string | undefined;
-    /**
-     * Cache with initialized `SourceMapConsumer` to improve symbolication performance.
-     */
-    sourceMapConsumerCache: Record<string, SourceMapConsumer>;
     /**
      * Constructs new `Symbolicator` instance.
      *

package/dist/plugins/symbolicate/Symbolicator.js

@@ -1,6 +1,7 @@
 import { URL } from 'node:url';
 import { codeFrameColumns } from '@babel/code-frame';
 import { SourceMapConsumer } from 'source-map';
+import { isGeneratedBundleFrame, isSymbolicatableFrame, normalizeInvalidWebpackSourceUrls, } from '../../utils/symbolication.js';
 /**
  * Class for transforming stack traces from React Native application with using Source Map.
  * Raw stack frames produced by React Native, points to some location from the bundle
@@ -40,10 +41,6 @@ export class Symbolicator {
      */
     constructor(delegate) {
         this.delegate = delegate;
-        /**
-         * Cache with initialized `SourceMapConsumer` to improve symbolication performance.
-         */
-        this.sourceMapConsumerCache = {};
     }
     /**
      * Process raw React Native stack frames and transform them using Source Maps.
@@ -59,72 +56,78 @@ export class Symbolicator {
      */
     async process(logger, stack) {
         logger.debug({ msg: 'Filtering out unnecessary frames' });
-        const frames = [];
-        for (const frame of stack) {
-            const { file } = frame;
-            if (file?.startsWith('http')) {
-                frames.push(frame);
-            }
-        }
+        const frames = stack.filter(isSymbolicatableFrame);
+        // A Symbolicator instance is shared by the route. Keep consumers local to
+        // one request so concurrent call-stack and component-stack requests cannot
+        // destroy or read each other's source maps.
+        const sourceMapConsumers = new Map();
         try {
             logger.debug({ msg: 'Processing frames', frames });
             const processedFrames = [];
             for (const frame of frames) {
-                if (!this.sourceMapConsumerCache[frame.file]) {
+                try {
+                    if (!sourceMapConsumers.has(frame.file)) {
+                        logger.debug({
+                            msg: 'Loading raw source map data',
+                            fileUrl: frame.file,
+                        });
+                        const rawSourceMap = await this.delegate.getSourceMap(frame.file);
+                        logger.debug({
+                            msg: 'Creating source map instance',
+                            fileUrl: frame.file,
+                            sourceMapLength: rawSourceMap.length,
+                        });
+                        const sourceMapConsumer = await new SourceMapConsumer(normalizeInvalidWebpackSourceUrls(rawSourceMap));
+                        logger.debug({
+                            msg: 'Saving source map instance into cache',
+                            fileUrl: frame.file,
+                        });
+                        sourceMapConsumers.set(frame.file, sourceMapConsumer);
+                    }
                     logger.debug({
-                        msg: 'Loading raw source map data',
-                        fileUrl: frame.file,
+                        msg: 'Symbolicating frame',
+                        frame,
                     });
-                    const rawSourceMap = await this.delegate.getSourceMap(frame.file);
+                    const processedFrame = this.processFrame(frame, sourceMapConsumers);
                     logger.debug({
-                        msg: 'Creating source map instance',
-                        fileUrl: frame.file,
-                        sourceMapLength: rawSourceMap.length,
+                        msg: 'Finished symbolicating frame',
+                        frame,
                     });
-                    const sourceMapConsumer = await new SourceMapConsumer(rawSourceMap.toString());
+                    processedFrames.push(processedFrame);
+                }
+                catch (error) {
+                    // Match Metro's best-effort behavior: one unavailable or malformed
+                    // source map must not discard frames that can still be symbolicated.
                     logger.debug({
-                        msg: 'Saving source map instance into cache',
+                        msg: 'Failed to symbolicate frame',
                         fileUrl: frame.file,
+                        error: error.message,
                     });
-                    this.sourceMapConsumerCache[frame.file] = sourceMapConsumer;
+                    processedFrames.push({ ...frame, collapse: false });
                 }
-                logger.debug({
-                    msg: 'Symbolicating frame',
-                    frame,
-                });
-                const processedFrame = this.processFrame(frame);
-                logger.debug({
-                    msg: 'Finished symbolicating frame',
-                    frame,
-                });
-                processedFrames.push(processedFrame);
             }
-            const codeFrame = (await this.getCodeFrame(logger, processedFrames)) ?? null;
+            const codeFrame = (await this.getCodeFrame(logger, processedFrames, frames, sourceMapConsumers)) ?? null;
             logger.debug({
                 msg: 'Finished symbolicating frames',
                 processedFrames,
                 codeFrame,
             });
-            return {
-                stack: processedFrames,
-                codeFrame,
-            };
+            return { stack: processedFrames, codeFrame };
         }
         finally {
-            for (const key in this.sourceMapConsumerCache) {
-                this.sourceMapConsumerCache[key].destroy();
-                delete this.sourceMapConsumerCache[key];
+            for (const consumer of sourceMapConsumers.values()) {
+                consumer.destroy();
             }
         }
     }
-    processFrame(frame) {
-        if (!frame.lineNumber || !frame.column) {
+    processFrame(frame, sourceMapConsumers) {
+        if (frame.lineNumber == null || frame.column == null) {
             return {
                 ...frame,
                 collapse: false,
             };
         }
-        const consumer = this.sourceMapConsumerCache[frame.file];
+        const consumer = sourceMapConsumers.get(frame.file);
         if (!consumer) {
             return {
                 ...frame,
@@ -152,16 +155,19 @@ export class Symbolicator {
             };
         }
         return {
-            lineNumber: lookup.line || frame.lineNumber,
-            column: lookup.column || frame.column,
+            lineNumber: lookup.line ?? frame.lineNumber,
+            column: lookup.column ?? frame.column,
             file: lookup.source,
             methodName: lookup.name || frame.methodName,
             collapse: false,
         };
     }
-    async getCodeFrame(logger, processedFrames) {
-        for (const frame of processedFrames) {
-            if (frame.collapse || !frame.lineNumber || !frame.column) {
+    async getCodeFrame(logger, processedFrames, inputFrames, sourceMapConsumers) {
+        for (const [index, frame] of processedFrames.entries()) {
+            if (frame.collapse || frame.lineNumber == null || frame.column == null) {
+                continue;
+            }
+            if (isGeneratedBundleFrame(frame)) {
                 continue;
             }
             if (!this.delegate.shouldIncludeFrame(frame)) {
@@ -172,8 +178,12 @@ export class Symbolicator {
                 frame,
             });
             try {
+                const consumer = sourceMapConsumers.get(inputFrames[index]?.file);
+                const embeddedSource = consumer?.sourceContentFor(frame.file, true);
+                const source = embeddedSource ??
+                    (await this.delegate.getSource(frame.file)).toString();
                 return {
-                    content: codeFrameColumns((await this.delegate.getSource(frame.file)).toString(), {
+                    content: codeFrameColumns(source, {
                         start: { column: frame.column, line: frame.lineNumber },
                     }, { forceColor: true }),
                     location: {

package/dist/plugins/symbolicate/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './sybmolicatePlugin.js';
 export * from './Symbolicator.js';
+export { default } from './sybmolicatePlugin.js';
 export * from './types.js';

package/dist/plugins/symbolicate/index.js

@@ -1,3 +1,3 @@
-export { default } from './sybmolicatePlugin.js';
 export * from './Symbolicator.js';
+export { default } from './sybmolicatePlugin.js';
 export * from './types.js';

package/dist/plugins/symbolicate/logSymbolicatedStackFrame.d.ts

@@ -0,0 +1,3 @@
+import type { FastifyBaseLogger } from 'fastify';
+import type { ReactNativeStackFrame, SymbolicatorResults } from './types.js';
+export declare function logSymbolicatedStackFrame(logger: FastifyBaseLogger, inputStack: ReactNativeStackFrame[], results: SymbolicatorResults): void;

package/dist/plugins/symbolicate/logSymbolicatedStackFrame.js

@@ -0,0 +1,42 @@
+import { isGeneratedBundleFrame, isSymbolicatableFrame, } from '../../utils/symbolication.js';
+const RUNTIME_ERROR_METHODS = new Set([
+    'react-stack-bottom-frame',
+    'renderWithHooks',
+    'beginWork',
+    'performUnitOfWork',
+]);
+function isRuntimeErrorStack(stack) {
+    return stack.some((frame) => RUNTIME_ERROR_METHODS.has(frame.methodName));
+}
+const REMOTE_SOURCE_PATH_PREFIX = '/__repack_source__/';
+function getRemoteName(file) {
+    if (!file) {
+        return undefined;
+    }
+    const filename = new URL(file, 'file://').pathname.split('/').pop() ?? '';
+    return filename.match(/\.([^.]+)\.chunk\.bundle$/)?.[1];
+}
+function getPrintableFile(file, inputFile) {
+    const sourceUrl = new URL(file, 'file://');
+    if (sourceUrl.pathname.startsWith(REMOTE_SOURCE_PATH_PREFIX)) {
+        const source = decodeURIComponent(sourceUrl.pathname.slice(REMOTE_SOURCE_PATH_PREFIX.length)).replace(/^\[projectRoot(?:\^\d+)?\][\\/]/, '');
+        return `${getRemoteName(inputFile) ?? sourceUrl.host}/${source}`;
+    }
+    return file.replace(/^\[projectRoot(?:\^\d+)?\][\\/]/, '');
+}
+export function logSymbolicatedStackFrame(logger, inputStack, results) {
+    if (!isRuntimeErrorStack(inputStack)) {
+        return;
+    }
+    const frameIndex = results.stack.findIndex((stackFrame) => !isGeneratedBundleFrame(stackFrame));
+    const frame = results.stack[frameIndex];
+    if (!frame?.file || frame.lineNumber == null) {
+        return;
+    }
+    const inputFrames = inputStack.filter(isSymbolicatableFrame);
+    const file = getPrintableFile(frame.file, inputFrames[frameIndex]?.file);
+    logger.info({
+        msg: `Symbolicated stack frame: ${file}:${frame.lineNumber}:${frame.column ?? 0}`,
+        methodName: frame.methodName,
+    });
+}

package/dist/plugins/symbolicate/sybmolicatePlugin.js

@@ -1,4 +1,5 @@
 import fastifyPlugin from 'fastify-plugin';
+import { logSymbolicatedStackFrame } from './logSymbolicatedStackFrame.js';
 import { Symbolicator } from './Symbolicator.js';
 function getStackFromRequestBody(request) {
     let body;
@@ -25,6 +26,7 @@ async function symbolicatePlugin(instance, { delegate, }) {
             else {
                 request.log.debug({ msg: 'Starting symbolication', platform, stack });
                 const results = await symbolicator.process(request.log, stack);
+                logSymbolicatedStackFrame(request.log, stack, results);
                 reply.send(results);
             }
         }

package/dist/plugins/wss/WebSocketServer.d.ts

@@ -17,7 +17,7 @@ export declare abstract class WebSocketServer<T extends WebSocket = WebSocket> i
     protected paths: string[];
     protected clients: Map<string, T>;
     protected nextClientId: number;
-    private timer;
+    private heartbeatTimer;
     /**
      * Create a new instance of the WebSocketServer.
      * Any logging information, will be passed through standard `fastify.log` API.

package/dist/plugins/wss/WebSocketServer.js

@@ -15,7 +15,6 @@ export class WebSocketServer {
      */
     constructor(fastify, options) {
         this.nextClientId = 0;
-        this.timer = null;
         this.fastify = fastify;
         this.name = options.name;
         this.paths = Array.isArray(options.path) ? options.path : [options.path];
@@ -23,7 +22,7 @@ export class WebSocketServer {
         this.server.on('connection', this.onConnection.bind(this));
         this.clients = new Map();
         // setup heartbeat timer
-        this.timer = setInterval(() => {
+        this.heartbeatTimer = setInterval(() => {
             this.clients.forEach((socket) => {
                 if (!socket.isAlive) {
                     socket.terminate();
@@ -34,6 +33,9 @@ export class WebSocketServer {
                 }
             });
         }, 30000);
+        this.fastify.addHook('onClose', async () => {
+            clearInterval(this.heartbeatTimer);
+        });
     }
     shouldUpgrade(pathname) {
         return this.paths.includes(pathname);

package/dist/plugins/wss/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './wssPlugin.js';
-export * from './WebSocketServer.js';
 export * from './types.js';
+export * from './WebSocketServer.js';
+export { default } from './wssPlugin.js';

package/dist/plugins/wss/index.js

@@ -1,3 +1,3 @@
-export { default } from './wssPlugin.js';
-export * from './WebSocketServer.js';
 export * from './types.js';
+export * from './WebSocketServer.js';
+export { default } from './wssPlugin.js';

package/dist/plugins/wss/servers/WebSocketMessageServer.js

@@ -271,7 +271,7 @@ export class WebSocketMessageServer extends WebSocketServer {
         this.upgradeRequests[clientId] = request;
         socket.addEventListener('message', (event) => {
             const message = this.parseMessage(event.data.toString(), 
-            // @ts-ignore
+            // @ts-expect-error
             event.binary);
             if (!message) {
                 this.fastify.log.error({

package/dist/plugins/wss/wssPlugin.d.ts

@@ -1,13 +1,13 @@
 import type { FastifyInstance } from 'fastify';
 import type { WebSocketServer } from 'ws';
 import type { Server } from '../../types.js';
-import { WebSocketRouter } from './WebSocketRouter.js';
-import { WebSocketServerAdapter } from './WebSocketServerAdapter.js';
 import { WebSocketApiServer } from './servers/WebSocketApiServer.js';
 import { WebSocketDevClientServer } from './servers/WebSocketDevClientServer.js';
 import { WebSocketEventsServer } from './servers/WebSocketEventsServer.js';
 import { WebSocketHMRServer } from './servers/WebSocketHMRServer.js';
 import { WebSocketMessageServer } from './servers/WebSocketMessageServer.js';
+import { WebSocketRouter } from './WebSocketRouter.js';
+import { WebSocketServerAdapter } from './WebSocketServerAdapter.js';
 declare module 'fastify' {
     interface FastifyInstance {
         wss: {

package/dist/plugins/wss/wssPlugin.js

@@ -1,11 +1,11 @@
 import fastifyPlugin from 'fastify-plugin';
-import { WebSocketRouter } from './WebSocketRouter.js';
-import { WebSocketServerAdapter } from './WebSocketServerAdapter.js';
 import { WebSocketApiServer } from './servers/WebSocketApiServer.js';
 import { WebSocketDevClientServer } from './servers/WebSocketDevClientServer.js';
 import { WebSocketEventsServer } from './servers/WebSocketEventsServer.js';
 import { WebSocketHMRServer } from './servers/WebSocketHMRServer.js';
 import { WebSocketMessageServer } from './servers/WebSocketMessageServer.js';
+import { WebSocketRouter } from './WebSocketRouter.js';
+import { WebSocketServerAdapter } from './WebSocketServerAdapter.js';
 /**
  * Defined in @react-native/dev-middleware
  * Reference: https://github.com/facebook/react-native/blob/main/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js

package/dist/types.d.ts

@@ -13,8 +13,7 @@ type MiddlewareObject<RequestInternal extends Http.IncomingMessage = Http.Incomi
     middleware: MiddlewareHandler<RequestInternal, ResponseInternal>;
 };
 export type Middleware<RequestInternal extends Http.IncomingMessage = Http.IncomingMessage, ResponseInternal extends Http.ServerResponse = Http.ServerResponse> = MiddlewareObject<RequestInternal, ResponseInternal> | MiddlewareHandler<RequestInternal, ResponseInternal>;
-export type { CompilerDelegate };
-export type { CodeFrame, InputStackFrame, ReactNativeStackFrame, StackFrame, SymbolicatorDelegate, SymbolicatorResults, };
+export type { CodeFrame, CompilerDelegate, InputStackFrame, ReactNativeStackFrame, StackFrame, SymbolicatorDelegate, SymbolicatorResults, };
 interface ProxyConfig extends ProxyOptions {
     path?: ProxyOptions['pathFilter'];
     context?: ProxyOptions['pathFilter'];
@@ -128,6 +127,12 @@ export declare namespace Server {
          * @returns The resolved project path.
          */
         resolveProjectPath: (filepath: string) => string;
+        /**
+         * Open a stack frame owned by another development server.
+         *
+         * @returns Whether the frame was handled remotely.
+         */
+        openStackFrame?: (filepath: string, lineNumber: number) => boolean | Promise<boolean>;
     }
     /**
      * Delegate with implementation for messages used in route handlers.

package/dist/utils/symbolication.d.ts

@@ -0,0 +1,10 @@
+import type { RawIndexMap, RawSourceMap } from 'source-map';
+interface StackFrameLike {
+    file: string | null;
+}
+export declare function normalizeInvalidWebpackSourceUrls(rawSourceMap: string | Buffer): string | RawSourceMap | RawIndexMap;
+export declare function isGeneratedBundleFrame(frame: StackFrameLike): boolean;
+export declare function isSymbolicatableFrame<T extends StackFrameLike>(frame: T): frame is T & {
+    file: string;
+};
+export {};

package/dist/utils/symbolication.js

@@ -0,0 +1,51 @@
+import { URL } from 'node:url';
+export function normalizeInvalidWebpackSourceUrls(rawSourceMap) {
+    const sourceMapText = rawSourceMap.toString();
+    if (!sourceMapText.includes('webpack://')) {
+        return sourceMapText;
+    }
+    const sourceMap = JSON.parse(sourceMapText);
+    let invalidSourceIndex = 0;
+    const normalize = (map) => {
+        if (!map || typeof map !== 'object') {
+            return;
+        }
+        const current = map;
+        if (Array.isArray(current.sources)) {
+            current.sources = current.sources.map((source) => {
+                if (typeof source !== 'string') {
+                    return source;
+                }
+                const normalizedSource = source.replace(/^webpack:\/\/([^/|]+)\|\/?/, 'webpack://$1/');
+                if (!normalizedSource.startsWith('webpack://')) {
+                    return normalizedSource;
+                }
+                try {
+                    new URL(normalizedSource);
+                    return normalizedSource;
+                }
+                catch {
+                    // Some generated Module Federation runtime modules use their source
+                    // text as a webpack URL. A single invalid URL makes source-map reject
+                    // the complete map, including otherwise valid application sources.
+                    return `webpack://invalid-source/${invalidSourceIndex++}`;
+                }
+            });
+        }
+        for (const section of current.sections ?? []) {
+            normalize(section.map);
+        }
+    };
+    normalize(sourceMap);
+    // SourceMapConsumer accepts parsed maps. Returning the object avoids
+    // serializing it here only for the consumer to parse it again.
+    return sourceMap;
+}
+export function isGeneratedBundleFrame(frame) {
+    return Boolean(frame.file &&
+        (frame.file.includes('.bundle') || frame.file.includes('.hot-update.js')));
+}
+export function isSymbolicatableFrame(frame) {
+    return Boolean(frame.file &&
+        (frame.file.startsWith('http') || isGeneratedBundleFrame(frame)));
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@callstack/repack-dev-server",
   "description": "A bundler-agnostic development server for React Native applications as part of @callstack/repack.",
   "license": "MIT",
-  "version": "5.3.0",
+  "version": "5.4.0-canary-20260831210904",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -53,7 +53,7 @@
     "@types/babel__code-frame": "^7.0.6",
     "@types/node": "^20.19.31",
     "@types/ws": "^8.18.0",
-    "typescript": "^5.9.3",
+    "typescript": "^7.0.2",
     "vitest": "^4.1.0"
   },
   "scripts": {