rollipop 1.0.0-alpha.30 → 1.0.0-alpha.31

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.31";
 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/package.js

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

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.31",
 			packageName: "rollipop",
 			homepage: "https://github.com/rollipop-dev/rollipop",
 			description: "React Native development dashboard powered by Rollipop.",

package/dist/server/devframe/setup.js

@@ -16,7 +16,7 @@ async function setupDevframe(context, server) {
 	const controller = new RollipopDevframeController(context, createAgentToolContext(context));
 	const devtools = initHub({
 		name: DEVFRAME_NAME,
-		version: "1.0.0-alpha.30",
+		version: "1.0.0-alpha.31",
 		base: ROLLIPOP_DEVFRAME_BASE,
 		cwd: context.config.root,
 		ui: createUi({

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.31") 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.31",
   "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.31",
     "@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;
-}