rollipop 1.0.0-alpha.30 → 1.0.0-alpha.32

package/dist/constants.js

@@ -20,7 +20,7 @@ var constants_exports = /* @__PURE__ */ __exportAll({
 	ROLLIPOP_VIRTUAL_ENTRY_ID: () => ROLLIPOP_VIRTUAL_ENTRY_ID,
 	ROLLIPOP_VIRTUAL_PREFIX: () => ROLLIPOP_VIRTUAL_PREFIX
 });
-const ROLLIPOP_VERSION = "1.0.0-alpha.30";
+const ROLLIPOP_VERSION = "1.0.0-alpha.32";
 const ROLLIPOP_VIRTUAL_PREFIX = "\0rollipop/";
 const ROLLIPOP_VIRTUAL_BOOTSTRAP_ID = `${ROLLIPOP_VIRTUAL_PREFIX}bootstrap`;
 const ROLLIPOP_VIRTUAL_ENTRY_ID = `${ROLLIPOP_VIRTUAL_PREFIX}entry`;

package/dist/core/bundler.js

@@ -3,6 +3,7 @@ import { EventBus } from "../events/event-bus.js";
 import { FileStorage } from "../storage/file-storage.js";
 import { resolveBuildOptions } from "../utils/build-options.js";
 import { createId } from "../utils/id.js";
+import { replaceSourceMappingUrl } from "../utils/source-map.js";
 import { resolveRolldownOptions } from "./rolldown.js";
 import fs from "node:fs";
 import path from "node:path";
@@ -81,6 +82,18 @@ var Bundler = class Bundler {
 			const sourcemapFile = path.join(outputDir, chunk.sourcemapFileName);
 			if (!fs.existsSync(sourcemapDir)) fs.mkdirSync(sourcemapDir, { recursive: true });
 			fs.renameSync(sourcemapFile, resolvedBuildOptions.sourcemapOutfile);
+			const sourcemapFileName = path.relative(outputDir, resolvedBuildOptions.sourcemapOutfile).split(path.sep).join("/");
+			let code = chunk.code;
+			if (output.sourcemap !== "hidden") {
+				const sourceMapUrl = sourcemapFileName.split("/").map(encodeURIComponent).join("/");
+				code = replaceSourceMappingUrl(code, output.sourcemapBaseUrl ? new URL(sourceMapUrl, output.sourcemapBaseUrl).href : sourceMapUrl);
+				fs.writeFileSync(resolvedBuildOptions.outfile, code);
+			}
+			return {
+				...chunk,
+				code,
+				sourcemapFileName
+			};
 		}
 		return chunk;
 	}

package/dist/core/env.js

@@ -10,6 +10,7 @@ function loadEnv(options) {
 	invariant(envPrefix.length > 0, "`envPrefix` is required");
 	invariant(envFile.length > 0, "`envFile` is required");
 	const env = {};
+	const parsed = {};
 	const envFilesToLoad = [
 		envFile,
 		`${envFile}.local`,
@@ -20,15 +21,18 @@ function loadEnv(options) {
 		const envPath = path.resolve(envDir, file);
 		if (!fs.existsSync(envPath)) continue;
 		logger.trace(`Loading environment variables from ${envPath}`);
-		const parsed = dotenv.parse(fs.readFileSync(envPath, "utf-8"));
-		const expanded = dotenvExpand.expand({
-			parsed,
-			processEnv: {}
-		});
-		if (expanded.parsed) Object.entries(expanded.parsed).forEach(([key, value]) => {
-			if (key.startsWith(envPrefix)) env[key] = key in process.env ? process.env[key] : value;
-		});
+		Object.assign(parsed, dotenv.parse(fs.readFileSync(envPath, "utf-8")));
 	}
+	const processEnv = {};
+	for (const [key, value] of Object.entries(process.env)) if (value !== void 0) {
+		processEnv[key] = value;
+		if (key in parsed) parsed[key] = value;
+	}
+	const expanded = dotenvExpand.expand({
+		parsed,
+		processEnv
+	});
+	for (const [key, value] of Object.entries(expanded.parsed ?? {})) if (key.startsWith(envPrefix)) env[key] = process.env[key] ?? value;
 	logger.trace("Loaded environment variables:", env);
 	return env;
 }

package/dist/node/commands/bundle/command.js

@@ -25,12 +25,12 @@ const command = {
 		},
 		{
 			name: "--dev [boolean]",
-			description: "If false, warnings are disabled and the bundle is minified",
+			description: "Build in development mode. Defaults to whether config.mode is development",
 			parse: parseBoolean
 		},
 		{
 			name: "--minify [boolean]",
-			description: "Allows overriding whether bundle is minified. This defaults to false if dev is true, and true if dev is false. Disabling minification can be useful for speeding up production builds for testing purposes.",
+			description: "Override output.minify from the configuration. Defaults to false when not configured, regardless of --dev.",
 			parse: parseBoolean
 		},
 		{

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "1.0.0-alpha.30";
+var version = "1.0.0-alpha.32";
 //#endregion
 export { version };

package/dist/server/bundler-pool.js

@@ -1,7 +1,7 @@
 import { resolveBuildOptions } from "../utils/build-options.js";
+import { replaceSourceMappingUrl } from "../utils/source-map.js";
 import { bindReporter } from "../utils/config.js";
 import { getBaseUrl } from "../utils/server.js";
-import { replaceSourceMappingUrl } from "../utils/source-map.js";
 import { Bundler } from "../core/bundler.js";
 import { logger } from "./logger.js";
 import { getBaseBundleName } from "../utils/bundle.js";

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

@@ -121,7 +121,7 @@ async function createDevServer(config, options) {
 		middlewares: { use: fastify.use.bind(fastify) }
 	};
 	const { invokePostConfigureServer } = await invokeConfigureServer(devServer, config.plugins ?? []);
-	const devframeMiddleware = await setupDevframe(context, devServer);
+	const devframeMiddleware = await setupDevframe(context, devServer, websocketEndpoints["/inspector/device"]);
 	fastify.use(requestLogger).use(devframeMiddleware).use(communityMiddleware).use(devMiddleware).register(plugin, { context }).register(plugin$3, { hotUpdateStore: bundlerPool.hotUpdateStore }).register(plugin$4, { context }).register(plugin$2, { context }).register(plugin$1, { context });
 	fastify.setErrorHandler(errorHandler);
 	const upgradeHandler = getWebSocketUpgradeHandler({

package/dist/server/devframe/index.js

@@ -24,7 +24,7 @@ var RollipopDevframeController = class {
 		this.definition = defineDevframe({
 			id: "rollipop",
 			name: "Rollipop",
-			version: "1.0.0-alpha.30",
+			version: "1.0.0-alpha.32",
 			packageName: "rollipop",
 			homepage: "https://github.com/rollipop-dev/rollipop",
 			description: "React Native development dashboard powered by Rollipop.",

package/dist/server/devframe/setup.js

@@ -11,12 +11,12 @@ const DEVFRAME_NAME = "Rollipop";
 const ROLLIPOP_DEVFRAME_BASE = "/__rollipop/";
 const ROLLIPOP_DEVFRAME_SSE_ROUTE = "__sse";
 const ROLLIPOP_DEVFRAME_MCP_PATH = "__mcp";
-async function setupDevframe(context, server) {
+async function setupDevframe(context, server, inspectorDeviceServer) {
 	const mcpEnabled = isAgenticInstalled();
 	const controller = new RollipopDevframeController(context, createAgentToolContext(context));
 	const devtools = initHub({
 		name: DEVFRAME_NAME,
-		version: "1.0.0-alpha.30",
+		version: "1.0.0-alpha.32",
 		base: ROLLIPOP_DEVFRAME_BASE,
 		cwd: context.config.root,
 		ui: createUi({
@@ -44,6 +44,13 @@ async function setupDevframe(context, server) {
 		}
 	});
 	await devtools.ready;
+	const refreshDevices = () => {
+		controller.refresh();
+	};
+	const onDeviceConnection = (socket) => {
+		socket.once("close", refreshDevices);
+	};
+	inspectorDeviceServer?.on("connection", onDeviceConnection);
 	server.instance.addHook("onListen", () => {
 		if (mcpEnabled) {
 			const mcpUrl = getServerDisplayUrl(server.instance.listeningOrigin, "/__rollipop/__mcp");
@@ -52,6 +59,8 @@ async function setupDevframe(context, server) {
 		controller.refresh();
 	});
 	server.instance.addHook("preClose", async () => {
+		inspectorDeviceServer?.off("connection", onDeviceConnection);
+		for (const socket of inspectorDeviceServer?.clients ?? []) socket.off("close", refreshDevices);
 		controller.dispose();
 		await devtools.close();
 	});

package/dist/server/middlewares/serve-assets.js

@@ -16,20 +16,34 @@ const queryParamSchema = asConst({
 });
 const plugin = fp((fastify, options) => {
 	const { context } = options;
-	function resolveAsset(asset) {
-		return path.resolve(context.config.root, asset);
-	}
+	const projectRoot = path.resolve(context.config.root);
+	const workspaceRoot = findWorkspaceRoot(projectRoot);
+	const assetExtensions = new Set(context.config.resolve.assetExtensions);
 	fastify.get(`/${DEV_SERVER_ASSET_PATH}/*`, {
 		schema: { querystring: queryParamSchema },
 		async handler(request, reply) {
 			const { params, query } = request;
-			const assetPath = resolveAsset(params["*"]);
+			const assetPath = path.resolve(projectRoot, params["*"]);
+			if (!assetExtensions.has(path.extname(assetPath).slice(1))) {
+				await reply.status(403).send();
+				return;
+			}
 			try {
+				const realWorkspaceRoot = await fs.promises.realpath(workspaceRoot);
+				if (!isWithin(realWorkspaceRoot, await fs.promises.realpath(path.dirname(assetPath)))) {
+					await reply.status(403).send();
+					return;
+				}
 				const resolvedAssetPath = resolveAssetPath(assetPath, {
 					platform: query.platform,
 					preferNativePlatform: context.config.resolve.preferNativePlatform
 				});
-				const [assetData, { size }] = await Promise.all([fs.promises.readFile(resolvedAssetPath), fs.promises.stat(resolvedAssetPath)]);
+				const realAssetPath = await fs.promises.realpath(resolvedAssetPath);
+				if (!isWithin(realWorkspaceRoot, realAssetPath)) {
+					await reply.status(403).send();
+					return;
+				}
+				const [assetData, { size }] = await Promise.all([fs.promises.readFile(realAssetPath), fs.promises.stat(realAssetPath)]);
 				await reply.header("Content-Type", mime.getType(resolvedAssetPath) ?? "").header("Content-Length", size).send(assetData);
 			} catch (error) {
 				fastify.log.error(error, "Failed to serve asset");
@@ -38,5 +52,19 @@ const plugin = fp((fastify, options) => {
 		}
 	});
 }, { name: "serve-assets" });
+function isWithin(root, file) {
+	const relative = path.relative(root, file);
+	return relative !== ".." && !relative.startsWith(`..${path.sep}`) && !path.isAbsolute(relative);
+}
+function findWorkspaceRoot(projectRoot) {
+	let directory = projectRoot;
+	while (true) {
+		const packageJson = path.join(directory, "package.json");
+		if (fs.existsSync(path.join(directory, "pnpm-workspace.yaml")) || fs.existsSync(packageJson) && JSON.parse(fs.readFileSync(packageJson, "utf-8")).workspaces) return directory;
+		const parent = path.dirname(directory);
+		if (parent === directory) return projectRoot;
+		directory = parent;
+	}
+}
 //#endregion
 export { plugin as serveAssets };

package/dist/storage/file-storage.js

@@ -28,7 +28,7 @@ var FileStorage = class FileStorage {
 		this.dataFilePath = path.join(FileStorage.getPath(basePath, { prepare: true }), DATA_FILENAME);
 		if (fs.existsSync(this.dataFilePath)) {
 			const loadedData = JSON.parse(fs.readFileSync(this.dataFilePath, "utf-8"));
-			if ("version" in loadedData && loadedData.version === "1.0.0-alpha.30") this.data = loadedData;
+			if ("version" in loadedData && loadedData.version === "1.0.0-alpha.32") this.data = loadedData;
 			else {
 				this.data = createDefaultData();
 				this.flush();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollipop",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.32",
   "homepage": "https://github.com/rollipop-dev/rollipop#readme",
   "bugs": {
     "url": "https://github.com/rollipop-dev/rollipop/issues"
@@ -67,7 +67,7 @@
     "@react-native-community/cli-server-api": "20.2.0",
     "@react-native-community/cli-types": "20.2.0",
     "@react-native/dev-middleware": "0.87.1",
-    "@rollipop/dashboard": "1.0.0-alpha.30",
+    "@rollipop/dashboard": "1.0.0-alpha.32",
     "@rollipop/rolldown": "1.0.32",
     "@swc/core": "1.15.43",
     "@swc/helpers": "0.5.23",

package/src/runtime/__tests__/hmr-runtime.spec.ts

@@ -1,8 +1,9 @@
 import fs from 'node:fs';
+import { stripVTControlCharacters } from 'node:util';
 import vm from 'node:vm';
 
 import { transformSync } from '@swc/core';
-import prettyFormat from 'pretty-format';
+import * as prettyFormat from 'pretty-format';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test';
 
 import type { HMRContext } from '../../types/hmr';
@@ -85,6 +86,7 @@ class FakeDevRuntime {
 }
 
 class FakeWebSocket {
+  static readonly CONNECTING = 0;
   static readonly OPEN = 1;
   static instances: FakeWebSocket[] = [];
   readonly sent: string[] = [];
@@ -141,6 +143,148 @@ describe('HMR runtime', () => {
     expect((runtime.createModuleHotContext('entry.js') as any).runtime).toBe(runtime);
   });
 
+  describe('client logs', () => {
+    const formatter = { format: prettyFormat.format, plugins: prettyFormat.plugins };
+
+    it.each([
+      ['named-only', { __esModule: true, ...formatter }],
+      ['default-only', { __esModule: true, default: formatter }],
+      ['CommonJS', formatter],
+      [
+        'named and callable default',
+        { __esModule: true, ...formatter, default: prettyFormat.format },
+      ],
+    ])('sends formatted values with %s pretty-format exports', async (_, module) => {
+      await createRuntime();
+      const client = createClient(module);
+      client.setup('ios', 'index.bundle', 'localhost', 8081, true);
+      const socket = FakeWebSocket.instances[0];
+      const circular: { self?: unknown } = {};
+      circular.self = circular;
+      const element = {
+        $$typeof: Symbol.for('react.element'),
+        type: 'View',
+        key: null,
+        props: { testID: 'counter', children: 'hello' },
+      };
+
+      client.log('warn', [
+        'object: %s',
+        { answer: 42 },
+        [1, 2],
+        true,
+        null,
+        undefined,
+        new Error('boom'),
+        circular,
+        element,
+      ]);
+
+      expect(socket.sent).toHaveLength(1);
+      const message = JSON.parse(socket.sent[0]);
+      expect(message.type).toBe('hmr:log');
+      expect(message.level).toBe('warn');
+      expect(message.data.map(stripVTControlCharacters)).toEqual([
+        'object: %s',
+        '{"answer": 42}',
+        '[1, 2]',
+        'true',
+        'null',
+        'undefined',
+        '[Error: boom]',
+        '{"self": [Circular]}',
+        '<View testID="counter">hello</View>',
+      ]);
+    });
+
+    it('flushes logs from before setup and while connecting in order without replaying them', async () => {
+      const runtime = await createRuntime();
+      const client = createClient();
+      const circular: { self?: unknown } = {};
+      circular.self = circular;
+      client.log('info', ['before setup', circular]);
+
+      client.setup('ios', 'index.bundle', 'localhost', 8081, true);
+      const socket = FakeWebSocket.instances[0];
+      socket.readyState = FakeWebSocket.CONNECTING;
+      client.log('warn', ['while connecting', { count: 1 }, undefined]);
+      expect(socket.sent).toEqual([]);
+
+      socket.readyState = FakeWebSocket.OPEN;
+      socket.emit('open', {});
+      client.log('error', ['after opening', [1, 2]]);
+
+      const expectedLogs = [
+        { type: 'hmr:log', level: 'info', data: ['before setup', '{"self": [Circular]}'] },
+        { type: 'hmr:log', level: 'warn', data: ['while connecting', '{"count": 1}', 'undefined'] },
+        { type: 'hmr:log', level: 'error', data: ['after opening', '[1, 2]'] },
+      ];
+      expect(socket.sent.map((message) => JSON.parse(message))).toEqual([
+        {
+          type: 'hmr:connected',
+          clientId: runtime.clientId,
+          bundleEntry: 'index.bundle',
+          platform: 'ios',
+        },
+        ...expectedLogs,
+      ]);
+
+      socket.emit('open', {});
+      expect(
+        socket.sent.map((message) => JSON.parse(message)).filter(({ type }) => type === 'hmr:log'),
+      ).toEqual(expectedLogs);
+    });
+
+    it('keeps only the latest 100 logs while the socket is connecting', async () => {
+      const { client, socket } = await setupClient();
+      socket.readyState = FakeWebSocket.CONNECTING;
+
+      for (let index = 0; index < 105; index++) {
+        client.log('debug', [index]);
+      }
+      expect(socket.sent).toEqual([]);
+
+      socket.readyState = FakeWebSocket.OPEN;
+      socket.emit('open', {});
+
+      expect(socket.sent.slice(1).map((message) => JSON.parse(message))).toEqual(
+        Array.from({ length: 100 }, (_, index) => ({
+          type: 'hmr:log',
+          level: 'debug',
+          data: [String(index + 5)],
+        })),
+      );
+    });
+
+    it('waits for the host socket even when a remote socket opens first', async () => {
+      const { runtime, client, socket } = await setupClient();
+      socket.readyState = FakeWebSocket.CONNECTING;
+      client.log('info', ['host log', { count: 1 }]);
+      globalThis.__rollipop_runtime__!.registerGraph({
+        id: 'remote',
+        origin: 'http://localhost:8082',
+        bundleEntry: 'remote.bundle',
+        platform: 'ios',
+        runtime: { ...runtime, setup: vi.fn(), setEnabled: vi.fn() } as unknown as HMRGraphRuntime,
+      });
+      const remoteSocket = FakeWebSocket.instances[1];
+      remoteSocket.emit('open', {});
+      client.log('warn', ['host still connecting']);
+
+      expect(socket.sent).toEqual([]);
+      expect(remoteSocket.sent.map((message) => JSON.parse(message).type)).toEqual([
+        'hmr:connected',
+      ]);
+
+      socket.readyState = FakeWebSocket.OPEN;
+      socket.emit('open', {});
+      expect(socket.sent.slice(1).map((message) => JSON.parse(message))).toEqual([
+        { type: 'hmr:log', level: 'info', data: ['host log', '{"count": 1}'] },
+        { type: 'hmr:log', level: 'warn', data: ['host still connecting'] },
+      ]);
+    });
+  });
+
   it('evaluates a patch, acknowledges delivery, and applies accepted updates', async () => {
     // oxlint-disable-next-line no-eval
     const evaluate = vi.fn((source: string) => (0, eval)(source));
@@ -506,9 +650,15 @@ async function setupRuntime() {
 
 async function setupClient(enabled = true) {
   const runtime = await createRuntime();
+  const client = createClient();
+  client.setup('ios', 'index.bundle', 'localhost', 8081, enabled);
+  return { runtime, client, socket: FakeWebSocket.instances[0] };
+}
+
+function createClient(prettyFormatExports: unknown = prettyFormat) {
   // HMRClient is injected into React Native, so provide its native imports in a sandbox.
   const nativeModules: Record<string, unknown> = {
-    'pretty-format': prettyFormat,
+    'pretty-format': prettyFormatExports,
     '../LogBox/LogBox': { clearAllLogs: vi.fn() },
     '../NativeModules/specs/NativeRedBox': { dismiss: vi.fn() },
     './DevLoadingView': { hide: vi.fn(), showMessage: vi.fn() },
@@ -528,9 +678,7 @@ async function setupClient(enabled = true) {
     },
   };
   vm.runInNewContext(clientCode, context);
-  const client = context.exports.default;
-  client.setup('ios', 'index.bundle', 'localhost', 8081, enabled);
-  return { runtime, client, socket: FakeWebSocket.instances[0] };
+  return context.exports.default;
 }
 
 function emitPatch(socket: FakeWebSocket, seq: number) {

package/src/runtime/hmr-client.ts

@@ -1,4 +1,4 @@
-import prettyFormat from 'pretty-format';
+import * as prettyFormatModule from 'pretty-format';
 
 import LogBox from '../LogBox/LogBox';
 import NativeRedBox from '../NativeModules/specs/NativeRedBox';
@@ -35,6 +35,16 @@ interface HMRConnection {
   pendingUpdatesCount: number;
 }
 
+function getPrettyFormat() {
+  // This replaces RN's HMRClient and uses RN's pretty-format version,
+  // which may expose named exports or only a default export independently of Rollipop's version.
+  return typeof prettyFormatModule.format === 'function'
+    ? prettyFormatModule
+    : (prettyFormatModule.default as unknown as typeof prettyFormatModule);
+}
+
+const prettyFormat = getPrettyFormat();
+
 class HMRClient implements HMRClientNativeInterface {
   static readonly STARTUP_ERROR = 'Expected HMRClient.setup() call at startup';
   static readonly MAX_PENDING_LOGS = 100;
@@ -89,7 +99,7 @@ class HMRClient implements HMRClientNativeInterface {
 
   log(level: HMRClientLogLevel, data: any[]) {
     const host = this.getHostConnection();
-    if (host == null) {
+    if (host == null || host.socket.readyState !== WebSocket.OPEN) {
       this.pendingLogs.push([level, data]);
       if (this.pendingLogs.length > HMRClient.MAX_PENDING_LOGS) {
         this.pendingLogs.shift();
@@ -226,10 +236,9 @@ class HMRClient implements HMRClientNativeInterface {
     ) {
       return;
     }
-    for (const [level, data] of this.pendingLogs) {
-      this.send(connection, { type: 'hmr:log', level, data });
+    for (const [level, data] of this.pendingLogs.splice(0)) {
+      this.log(level, data);
     }
-    this.pendingLogs.length = 0;
   }
 
   private dismissRedbox() {

package/src/runtime/react-native-core.d.ts

@@ -24,14 +24,3 @@ declare module '*/Platform' {
 
   export default Platform;
 }
-
-declare module 'pretty-format' {
-  const prettyFormat: {
-    format: (value: any, options?: any) => string;
-    plugins: {
-      ReactElement: any;
-    };
-  };
-
-  export default prettyFormat;
-}