@callstack/repack-dev-server 5.1.3 → 5.2.0

package/dist/createServer.js

@@ -1,7 +1,7 @@
 import { Writable } from 'node:stream';
+import util from 'node:util';
 import middie from '@fastify/middie';
 import fastifySensible from '@fastify/sensible';
-import { createDevMiddleware } from '@react-native/dev-middleware';
 import Fastify from 'fastify';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import apiPlugin from './plugins/api/apiPlugin.js';
@@ -62,22 +62,34 @@ export async function createServer(config) {
         },
     });
     let handledDevMiddlewareNotice = false;
-    const devMiddleware = createDevMiddleware({
+    const devMiddleware = options.devMiddleware.createDevMiddleware({
         projectRoot: options.rootDir,
         serverBaseUrl: options.url,
         logger: {
-            error: instance.log.error,
-            warn: instance.log.warn,
-            info: (...message) => {
-                if (!handledDevMiddlewareNotice) {
-                    if (message.join().includes('JavaScript logs have moved!')) {
-                        handledDevMiddlewareNotice = true;
+            error: (...msg) => {
+                const message = util.format(...msg);
+                instance.log.error(message);
+            },
+            warn: (...msg) => {
+                const message = util.format(...msg);
+                instance.log.warn(message);
+            },
+            info: (...msg) => {
+                const message = util.format(...msg);
+                try {
+                    if (!handledDevMiddlewareNotice) {
+                        if (message.includes('JavaScript logs have moved!')) {
+                            handledDevMiddlewareNotice = true;
+                            return;
+                        }
+                    }
+                    else {
+                        instance.log.debug(message);
                         return;
                     }
                 }
-                else {
-                    instance.log.debug(message);
-                    return;
+                catch (e) {
+                    console.log(e);
                 }
             },
         },
@@ -119,7 +131,7 @@ export async function createServer(config) {
         delegate,
     });
     await instance.register(devtoolsPlugin, {
-        rootDir: options.rootDir,
+        delegate,
     });
     await instance.register(symbolicatePlugin, {
         delegate,
@@ -136,11 +148,32 @@ export async function createServer(config) {
         }
         return payload;
     });
-    // Register dev middleware
-    instance.use(devMiddleware.middleware);
-    // Register proxy middlewares
-    proxyMiddlewares?.forEach((proxyMiddleware) => {
-        instance.use(proxyMiddleware);
+    // Setup middlewares
+    // Expose built-in middlewares to setupMiddlewares
+    const builtInMiddlewares = [
+        {
+            name: 'dev-middleware',
+            middleware: devMiddleware.middleware,
+        },
+        ...(proxyMiddlewares?.map((proxyMiddleware, index) => ({
+            name: `proxy-middleware-${index}`,
+            middleware: proxyMiddleware,
+        })) ?? []),
+    ];
+    const finalMiddlewares = options.setupMiddlewares(builtInMiddlewares, instance);
+    // Register middlewares
+    finalMiddlewares.forEach((middleware) => {
+        if (typeof middleware === 'object') {
+            if (middleware.path !== undefined) {
+                instance.use(middleware.path, middleware.middleware);
+            }
+            else {
+                instance.use(middleware.middleware);
+            }
+        }
+        else {
+            instance.use(middleware);
+        }
     });
     // Register routes
     instance.get('/', async () => delegate.messages.getHello());

package/dist/plugins/compiler/compilerPlugin.js

@@ -14,9 +14,9 @@ async function compilerPlugin(instance, { delegate }) {
             },
         },
         handler: async (request, reply) => {
-            const filename = request.params['*'];
+            const filepath = request.params['*'];
             let { platform } = request.query;
-            if (!filename) {
+            if (!filepath) {
                 // This technically should never happen - this route should not be called if file is missing.
                 request.log.debug('File was not provided');
                 return reply.notFound('File was not provided');
@@ -32,9 +32,11 @@ async function compilerPlugin(instance, { delegate }) {
                     status: 'Bundling with Re.Pack',
                 }));
             };
+            // immediately send 1% progress
+            setImmediate(() => sendProgress({ completed: 1, total: 100 }));
             try {
-                const asset = await delegate.compiler.getAsset(filename, platform, sendProgress);
-                const mimeType = delegate.compiler.getMimeType(filename, platform, asset);
+                const asset = await delegate.compiler.getAsset(filepath, platform, sendProgress);
+                const mimeType = delegate.compiler.getMimeType(filepath, platform, asset);
                 if (multipart) {
                     const buffer = Buffer.isBuffer(asset) ? asset : Buffer.from(asset);
                     multipart.setHeader('Content-Type', `${mimeType}; charset=UTF-8`);

package/dist/plugins/devtools/devtoolsPlugin.d.ts

@@ -1,4 +1,7 @@
 import type { FastifyInstance } from 'fastify';
-declare function devtoolsPlugin(instance: FastifyInstance): Promise<void>;
+import type { Server } from '../../types.js';
+declare function devtoolsPlugin(instance: FastifyInstance, { delegate }: {
+    delegate: Server.Delegate;
+}): Promise<void>;
 declare const _default: typeof devtoolsPlugin;
 export default _default;

package/dist/plugins/devtools/devtoolsPlugin.js

@@ -8,7 +8,7 @@ function parseRequestBody(body) {
         return JSON.parse(body);
     throw new Error(`Unsupported body type: ${typeof body}`);
 }
-async function devtoolsPlugin(instance) {
+async function devtoolsPlugin(instance, { delegate }) {
     // reference implementation in `@react-native-community/cli-server-api`:
     // https://github.com/react-native-community/cli/blob/46436a12478464752999d34ed86adf3212348007/packages/cli-server-api/src/openURLMiddleware.ts
     instance.route({
@@ -27,8 +27,8 @@ async function devtoolsPlugin(instance) {
         url: '/open-stack-frame',
         handler: async (request, reply) => {
             const { file, lineNumber } = parseRequestBody(request.body);
-            // TODO fix rewriting of `webpack://` to rootDir of the project
-            launchEditor(`${file}:${lineNumber}`, process.env.REACT_EDITOR);
+            const filepath = delegate.devTools?.resolveProjectPath(file) ?? file;
+            launchEditor(`${filepath}:${lineNumber}`, process.env.REACT_EDITOR);
             reply.send('OK');
         },
     });

package/dist/plugins/symbolicate/Symbolicator.js

@@ -131,16 +131,21 @@ export class Symbolicator {
                 collapse: false,
             };
         }
-        const lookup = consumer.originalPositionFor({
+        let lookup = consumer.originalPositionFor({
             line: frame.lineNumber,
             column: frame.column,
             bias: SourceMapConsumer.LEAST_UPPER_BOUND,
         });
-        // If lookup fails, we get the same shape object, but with
-        // all values set to null
         if (!lookup.source) {
-            // It is better to gracefully return the original frame
-            // than to throw an exception
+            // fallback to GREATEST_LOWER_BOUND
+            lookup = consumer.originalPositionFor({
+                line: frame.lineNumber,
+                column: frame.column,
+                bias: SourceMapConsumer.GREATEST_LOWER_BOUND,
+            });
+        }
+        // return the original frame when both lookups fail
+        if (!lookup.source) {
             return {
                 ...frame,
                 collapse: false,

package/dist/types.d.ts

@@ -1,15 +1,25 @@
-import type { ServerOptions as HttpsServerOptions } from 'node:https';
-import type { FastifyBaseLogger } from 'fastify';
+import type * as Http from 'node:http';
+import type * as Https from 'node:https';
+import type * as DevMiddleware from '@react-native/dev-middleware';
+import type { FastifyBaseLogger, FastifyInstance } from 'fastify';
 import type { Options as ProxyOptions } from 'http-proxy-middleware';
 import type { CompilerDelegate } from './plugins/compiler/types.js';
 import type { CodeFrame, InputStackFrame, ReactNativeStackFrame, StackFrame, SymbolicatorDelegate, SymbolicatorResults } from './plugins/symbolicate/types.js';
 import type { NormalizedOptions } from './utils/normalizeOptions.js';
+type MiddlewareHandler<RequestInternal extends Http.IncomingMessage = Http.IncomingMessage, ResponseInternal extends Http.ServerResponse = Http.ServerResponse> = (req: RequestInternal, res: ResponseInternal, next: (err?: any) => void) => void | Promise<void>;
+type MiddlewareObject<RequestInternal extends Http.IncomingMessage = Http.IncomingMessage, ResponseInternal extends Http.ServerResponse = Http.ServerResponse> = {
+    name?: string;
+    path?: string;
+    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, };
 interface ProxyConfig extends ProxyOptions {
     path?: ProxyOptions['pathFilter'];
     context?: ProxyOptions['pathFilter'];
 }
+export type SetupMiddlewaresFunction = (middlewares: Middleware[], devServer: FastifyInstance) => Middleware[];
 export interface DevServerOptions {
     /**
      * Hostname or IP address under which to run the development server.
@@ -27,8 +37,10 @@ export interface DevServerOptions {
         type: 'http';
     } | {
         type: 'https';
-        options?: HttpsServerOptions;
+        options?: Https.ServerOptions;
     };
+    /** Function to customize middleware setup. Receives built-in middlewares and Fastify instance. */
+    setupMiddlewares?: SetupMiddlewaresFunction;
 }
 export declare namespace Server {
     /** Development server configuration. */
@@ -44,6 +56,8 @@ export declare namespace Server {
         rootDir: string;
         /** Whether to enable logging requests. */
         logRequests?: boolean;
+        /** `@react-native/dev-middleware` module. */
+        devMiddleware: typeof DevMiddleware;
     }
     /**
      * A complete delegate with implementations for all server functionalities.
@@ -51,6 +65,8 @@ export declare namespace Server {
     interface Delegate {
         /** A compiler delegate. */
         compiler: CompilerDelegate;
+        /** A DevTools delegate. */
+        devTools?: DevToolsDelegate;
         /** A symbolicator delegate. */
         symbolicator: SymbolicatorDelegate;
         /** A logger delegate. */
@@ -101,6 +117,18 @@ export declare namespace Server {
          */
         onMessage: (log: any) => void;
     }
+    /**
+     * Delegate with implementation for dev tools functions.
+     */
+    interface DevToolsDelegate {
+        /**
+         * Resolve the project filepath with [projectRoot] prefix.
+         *
+         * @param filepath The filepath to resolve.
+         * @returns The resolved project path.
+         */
+        resolveProjectPath: (filepath: string) => string;
+    }
     /**
      * Delegate with implementation for messages used in route handlers.
      */

package/dist/utils/normalizeOptions.d.ts

@@ -1,6 +1,7 @@
 import type { ServerOptions as HttpsServerOptions } from 'node:https';
+import type * as DevMiddleware from '@react-native/dev-middleware';
 import type { Options as ProxyOptions } from 'http-proxy-middleware';
-import type { Server } from '../types.js';
+import type { Server, SetupMiddlewaresFunction } from '../types.js';
 export interface NormalizedOptions {
     host: string;
     port: number;
@@ -9,6 +10,8 @@ export interface NormalizedOptions {
     proxy: ProxyOptions[] | undefined;
     url: string;
     disableRequestLogging: boolean;
+    devMiddleware: typeof DevMiddleware;
     rootDir: string;
+    setupMiddlewares: SetupMiddlewaresFunction;
 }
 export declare function normalizeOptions(options: Server.Options): NormalizedOptions;

package/dist/utils/normalizeOptions.js

@@ -21,6 +21,10 @@ function normalizeProxyOptions(proxyOptions, fallbackTarget) {
     }
     return undefined;
 }
+function normalizeSetupMiddlewares(setupMiddlewares) {
+    // create a passthrough function if no setupMiddlewares is provided
+    return setupMiddlewares ?? ((middlewares) => middlewares);
+}
 export function normalizeOptions(options) {
     const host = options.host ?? 'localhost';
     const port = options.port ?? 8081;
@@ -29,6 +33,7 @@ export function normalizeOptions(options) {
     const protocol = https ? 'https' : 'http';
     const url = `${protocol}://${host}:${options.port}`;
     const proxy = normalizeProxyOptions(options.proxy, url);
+    const setupMiddlewares = normalizeSetupMiddlewares(options.setupMiddlewares);
     return {
         // webpack dev server compatible options
         host,
@@ -37,9 +42,13 @@ export function normalizeOptions(options) {
         hot,
         proxy,
         url,
+        // dev middleware
+        devMiddleware: options.devMiddleware,
         // fastify options
         disableRequestLogging: !options.logRequests,
         // project options
         rootDir: options.rootDir,
+        // custom middleware setup
+        setupMiddlewares,
     };
 }

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.1.3",
+  "version": "5.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -35,7 +35,6 @@
     "@babel/code-frame": "^7.26.2",
     "@fastify/middie": "^8.3.0",
     "@fastify/sensible": "^5.5.0",
-    "@react-native/dev-middleware": "^0.78.0",
     "fastify": "^4.24.3",
     "fastify-favicon": "^4.3.0",
     "fastify-plugin": "^4.5.1",
@@ -47,8 +46,9 @@
     "ws": "^8.18.1"
   },
   "devDependencies": {
+    "@react-native/dev-middleware": "^0.81.0",
     "@types/babel__code-frame": "^7.0.6",
-    "@types/node": "^18",
+    "@types/node": "^20",
     "@types/ws": "^8.18.0",
     "typescript": "^5.8.3"
   },