rollipop 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -14,6 +14,14 @@ const command = {
 			description: "Path to the CLI configuration file",
 			parse: resolvePath
 		},
+		{
+			name: "--config-cmd <string>",
+			description: "Accepted for React Native Xcode compatibility; ignored."
+		},
+		{
+			name: "--load-config <string>",
+			description: "Accepted for React Native Xcode compatibility; ignored."
+		},
 		{
 			name: "--entry-file <path>",
 			description: "Path to the root JS file, either absolute or relative to JS root"

package/dist/package.js

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

package/dist/server/devframe/index.js

@@ -21,7 +21,7 @@ var RollipopDevframeController = class {
 		this.definition = defineDevframe({
 			id: "rollipop",
 			name: "Rollipop",
-			version: "1.0.0-beta.2",
+			version: "1.0.0-beta.4",
 			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, inspectorDeviceServer) {
 	const controller = new RollipopDevframeController(context, createAgentToolContext(context));
 	const devtools = initHub({
 		name: DEVFRAME_NAME,
-		version: "1.0.0-beta.2",
+		version: "1.0.0-beta.4",
 		base: ROLLIPOP_DEVFRAME_BASE,
 		cwd: context.config.root,
 		ui: createUi({
@@ -39,6 +39,9 @@ async function setupDevframe(context, server, inspectorDeviceServer) {
 		mcp: mcpEnabled ? { path: ROLLIPOP_DEVFRAME_MCP_PATH } : false,
 		origin: context.serverBaseUrl,
 		configure: async (devtoolsContext) => {
+			(await devtoolsContext.rpc.sharedState.get("devframe:user-settings")).mutate((state) => {
+				state.autoCollapseEdgeToolbar ??= false;
+			});
 			await controller.definition.setup(devtoolsContext);
 			await invokeDevToolsSetup(devtoolsContext, server, context.config.plugins ?? []);
 		}

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-beta.2") this.data = loadedData;
+			if ("version" in loadedData && loadedData.version === "1.0.0-beta.4") this.data = loadedData;
 			else {
 				this.data = createDefaultData();
 				this.flush();

package/dist/utils/transform.js

@@ -1,3 +1,4 @@
+import { resolveWorkletsConfig } from "./worklets.js";
 import { RollipopReactNativeTransformer } from "@rollipop/rolldown/experimental";
 //#region src/utils/transform.ts
 const transformers = /* @__PURE__ */ new WeakMap();
@@ -8,7 +9,7 @@ function transformWithRollipop(id, code, config) {
 			envName: config.mode,
 			runtimeTarget: config.runtimeTarget,
 			flow: config.transform.flow,
-			worklets: config.experimental.worklets,
+			worklets: resolveWorkletsConfig(config.experimental.worklets, config),
 			swc: {
 				externalHelpers: true,
 				...config.transform.swc?.native

package/dist/utils/worklets.d.ts

@@ -0,0 +1,7 @@
+import { RollipopReactNativeWorkletsConfig as WorkletsConfig } from "../config/types.js";
+import "../config/index.js";
+import { ResolvedConfig } from "../config/defaults.js";
+import { RollipopReactNativeWorkletsConfig } from "@rollipop/rolldown/experimental";
+//#region src/utils/worklets.d.ts
+export declare function resolveWorkletsConfig(worklets: WorkletsConfig | undefined, { root, mode }: Pick<ResolvedConfig, 'root' | 'mode'>): RollipopReactNativeWorkletsConfig | undefined;
+//#endregion

package/dist/utils/worklets.js

@@ -0,0 +1,32 @@
+import { resolvePackageJson } from "./node-resolve.js";
+import { satisfies } from "semver";
+//#region src/utils/worklets.ts
+function resolveWorkletsConfig(worklets, { root, mode }) {
+	if (worklets == null) return;
+	const { pluginVersion, reanimatedVersion, ...options } = worklets;
+	const defaults = {
+		...options,
+		isRelease: options.isRelease ?? mode === "production"
+	};
+	if (pluginVersion != null) return {
+		...defaults,
+		pluginVersion
+	};
+	if (reanimatedVersion != null) return {
+		...defaults,
+		reanimatedVersion
+	};
+	const installedReanimatedVersion = resolvePackageJson(root, "react-native-reanimated")?.version;
+	if (installedReanimatedVersion != null && satisfies(installedReanimatedVersion, "3.x", { includePrerelease: true })) return {
+		...defaults,
+		reanimatedVersion: installedReanimatedVersion
+	};
+	const installedWorkletsVersion = resolvePackageJson(root, "react-native-worklets")?.version;
+	if (installedWorkletsVersion != null) return {
+		...defaults,
+		pluginVersion: installedWorkletsVersion
+	};
+	throw new Error("Could not resolve a worklet runtime. Install react-native-reanimated 3.x or react-native-worklets, or set reanimatedVersion or pluginVersion in the worklets configuration.");
+}
+//#endregion
+export { resolveWorkletsConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollipop",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "homepage": "https://github.com/rollipop-dev/rollipop#readme",
   "bugs": {
     "url": "https://github.com/rollipop-dev/rollipop/issues"
@@ -67,8 +67,8 @@
     "@react-native-community/cli-server-api": "20.2.0",
     "@react-native-community/cli-types": "20.2.0",
     "@react-native/dev-middleware": "0.88.0",
-    "@rollipop/dashboard": "1.0.0-beta.2",
-    "@rollipop/rolldown": "1.1.1",
+    "@rollipop/dashboard": "1.0.0-beta.4",
+    "@rollipop/rolldown": "1.2.0",
     "@swc/core": "1.16.13",
     "@swc/helpers": "0.5.23",
     "@types/ws": "8.18.2",

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

@@ -2,12 +2,13 @@ import fs from 'node:fs';
 import { stripVTControlCharacters } from 'node:util';
 import vm from 'node:vm';
 
+import { DevRuntime } from '@rollipop/rolldown/experimental/runtime';
 import { transformSync } from '@swc/core';
 import * as prettyFormat from 'pretty-format';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test';
 
 import type { HMRContext } from '../../types/hmr';
-import type { HMRGraphRuntime, ModuleGraphDelta } from '../../types/runtime';
+import type { HMRGraphRuntime } from '../../types/runtime';
 
 const clientCode = transformSync(
   fs.readFileSync(new URL('../hmr-client.ts', import.meta.url), 'utf8'),
@@ -18,73 +19,6 @@ const clientCode = transformSync(
   },
 ).code;
 
-class FakeDevRuntime {
-  clientId: string;
-  hooks: {
-    createModuleHotContext(moduleId: string): unknown;
-    onModuleCacheRemoval(moduleId: string): void;
-  } | null = null;
-  private readonly factories = new Map<string, (id: string) => void>();
-  private readonly importers = new Map<string, Set<string>>();
-  private readonly modules = new Map<string, { exports: any }>();
-
-  constructor(clientId: string) {
-    this.clientId = clientId;
-  }
-
-  registerGraph(delta: ModuleGraphDelta) {
-    for (let index = 0; index < delta.localCount; index++) {
-      const importer = delta.ids[index];
-      for (const targetIndex of delta.edges[index]) {
-        const target = delta.ids[targetIndex];
-        const importers = this.importers.get(target) ?? new Set();
-        importers.add(importer);
-        this.importers.set(target, importers);
-      }
-    }
-  }
-
-  registerFactory(id: string, _kind: 'esm' | 'cjs', factory: (id: string) => void) {
-    this.factories.set(id, factory);
-  }
-
-  registerModule(id: string, exportsHolder: { exports: any }) {
-    this.modules.set(id, exportsHolder);
-  }
-
-  getImporters(id: string) {
-    return [...(this.importers.get(id) ?? [])];
-  }
-
-  isExecuted(id: string) {
-    return this.modules.has(id);
-  }
-
-  hasFactory(id: string) {
-    return this.factories.has(id);
-  }
-
-  removeModuleCache(id: string) {
-    this.modules.delete(id);
-    this.hooks?.onModuleCacheRemoval(id);
-  }
-
-  initModule(id: string) {
-    if (!this.modules.has(id)) {
-      this.factories.get(id)?.(id);
-    }
-    return this.loadExports(id);
-  }
-
-  loadExports(id: string) {
-    return this.modules.get(id)?.exports ?? {};
-  }
-
-  createModuleHotContext(moduleId: string) {
-    return this.hooks?.createModuleHotContext(moduleId);
-  }
-}
-
 class FakeWebSocket {
   static readonly CONNECTING = 0;
   static readonly OPEN = 1;
@@ -124,7 +58,7 @@ describe('HMR runtime', () => {
     reload.mockReset();
     FakeWebSocket.instances = [];
     Object.assign(globalThis, {
-      DevRuntime: FakeDevRuntime,
+      DevRuntime,
       WebSocket: FakeWebSocket,
       __rollipop_runtime__: undefined,
       __turboModuleProxy: undefined,
@@ -133,6 +67,7 @@ describe('HMR runtime', () => {
   });
 
   afterEach(() => {
+    delete (globalThis as any).__rollipop_require__;
     delete (globalThis as any).globalEvalWithSourceUrl;
     delete (globalThis as any).__rollipop_runtime__;
   });
@@ -143,6 +78,145 @@ describe('HMR runtime', () => {
     expect((runtime.createModuleHotContext('entry.js') as any).runtime).toBe(runtime);
   });
 
+  describe('initial bundle factories and cache', () => {
+    it.each(['esm', 'cjs'])(
+      'reuses an initial %s factory after eviction through either executor',
+      async (kind) => {
+        const { runtime } = await setupRuntime();
+        const bundleRequire = createBundleRequire();
+        let executions = 0;
+        bundleRequire.m['parent.js'] = (_global, module, exports) => {
+          const value = ++executions;
+          if (kind === 'esm') {
+            Object.defineProperty(exports, 'value', { get: () => value });
+            runtime.registerModule('parent.js', { exports });
+          } else {
+            runtime.registerModule('parent.js', module);
+            module.exports = () => value;
+          }
+        };
+        const readValue = (exports: any) => (kind === 'esm' ? exports.value : exports());
+
+        expect(runtime.hasFactory('parent.js')).toBe(true);
+        expect(runtime.isExecuted('parent.js')).toBe(false);
+        const first = bundleRequire('parent.js');
+        expect(runtime.initModule('parent.js')).toBe(first);
+        expect(runtime.loadExports('parent.js')).toBe(first);
+        expect(readValue(first)).toBe(1);
+
+        runtime.removeModuleCache('parent.js');
+        expect(bundleRequire.c['parent.js']).toBeUndefined();
+        expect(runtime.isExecuted('parent.js')).toBe(false);
+        const second = runtime.initModule('parent.js');
+        expect(bundleRequire('parent.js')).toBe(second);
+        expect(readValue(second)).toBe(2);
+
+        runtime.removeModuleCache('parent.js');
+        const third = bundleRequire('parent.js');
+        expect(runtime.loadExports('parent.js')).toBe(third);
+        expect(readValue(third)).toBe(3);
+      },
+    );
+
+    it.each(['esm', 'cjs'])(
+      'uses the latest %s patch from ordinary require after repeated eviction',
+      async (kind) => {
+        const { runtime } = await setupRuntime();
+        const bundleRequire = createBundleRequire();
+        const original = vi.fn((_global, module: BundleModule) => {
+          runtime.registerModule('dep.js', module);
+          module.exports = { value: 'initial' };
+        });
+        bundleRequire.m['dep.js'] = original;
+        expect(bundleRequire('dep.js')).toEqual({ value: 'initial' });
+
+        for (let version = 1; version <= 2; version++) {
+          const factory = vi.fn((id: string) => {
+            const holder = { exports: {} as any };
+            runtime.registerModule(id, holder);
+            if (kind === 'esm') {
+              Object.defineProperty(holder.exports, 'value', { get: () => version });
+            } else {
+              holder.exports = () => version;
+            }
+          });
+          runtime.registerFactory('dep.js', factory, version);
+          runtime.removeModuleCache('dep.js');
+          const updated = runtime.initModule('dep.js');
+          expect(bundleRequire('dep.js')).toBe(updated);
+          expect(kind === 'esm' ? (updated as any).value : (updated as any)()).toBe(version);
+
+          const stale = vi.fn();
+          runtime.registerFactory('dep.js', stale, version - 1);
+          runtime.removeModuleCache('dep.js');
+          const reexecuted = bundleRequire('dep.js');
+          expect(runtime.initModule('dep.js')).toBe(reexecuted);
+          expect(runtime.loadExports('dep.js')).toBe(reexecuted);
+          expect(kind === 'esm' ? reexecuted.value : reexecuted()).toBe(version);
+          expect(factory).toHaveBeenCalledTimes(2);
+          expect(stale).not.toHaveBeenCalled();
+        }
+        expect(original).toHaveBeenCalledOnce();
+      },
+    );
+
+    it.each([null, undefined, 0, false])(
+      'shares CommonJS module.exports reassignment to %s',
+      async (value) => {
+        const { runtime } = await setupRuntime();
+        const bundleRequire = createBundleRequire();
+        const module = { exports: {} as any };
+        runtime.registerModule('dep.cjs', module);
+        module.exports = value;
+        expect(bundleRequire('dep.cjs')).toBe(value);
+        expect(runtime.loadExports('dep.cjs')).toBe(value);
+        expect(runtime.initModule('dep.cjs')).toBe(value);
+      },
+    );
+
+    it('recognizes modules cached only by the bundle and removes both caches before disposal', async () => {
+      const { runtime } = await setupRuntime();
+      const bundleRequire = createBundleRequire();
+      const exports = { value: 'cached' };
+      bundleRequire.c['helper.js'] = { exports };
+      expect(runtime.isExecuted('helper.js')).toBe(true);
+      expect(runtime.loadExports('helper.js')).toBe(exports);
+      expect(runtime.initModule('helper.js')).toBe(exports);
+      const dispose = vi.fn(() => {
+        expect(bundleRequire.c['helper.js']).toBeUndefined();
+        expect(runtime.isExecuted('helper.js')).toBe(false);
+      });
+      runtime.createModuleHotContext('helper.js').dispose(dispose);
+      runtime.removeModuleCache('helper.js');
+      expect(dispose).toHaveBeenCalledOnce();
+    });
+
+    it('shares the bundle holder when a side-effect module registers without exports', async () => {
+      const { runtime } = await setupRuntime();
+      const bundleRequire = createBundleRequire();
+      bundleRequire.m['side-effect.js'] = () => runtime.registerModule('side-effect.js');
+      const exports = bundleRequire('side-effect.js');
+      expect(bundleRequire('side-effect.js')).toBe(exports);
+      expect(runtime.initModule('side-effect.js')).toBe(exports);
+      expect(runtime.loadExports('side-effect.js')).toBe(exports);
+    });
+
+    it('reloads when an invalidated non-component module has no accepting ancestor', async () => {
+      const { runtime } = await setupRuntime();
+      const bundleRequire = createBundleRequire();
+      runtime.registerGraph({ ids: ['route.js', 'entry.js'], localCount: 2, edges: [[], [0]] });
+      const entry = vi.fn((_global, module: BundleModule) => {
+        runtime.registerModule('entry.js', module);
+        runtime.registerModule('route.js', { exports: { Router: {} } });
+      });
+      bundleRequire.m['entry.js'] = entry;
+      bundleRequire('entry.js');
+      runtime.createModuleHotContext('route.js').invalidate();
+      await vi.waitFor(() => expect(reload).toHaveBeenCalledOnce());
+      expect(entry).toHaveBeenCalledOnce();
+    });
+  });
+
   describe('client logs', () => {
     const formatter = { format: prettyFormat.format, plugins: prettyFormat.plugins };
 
@@ -527,7 +601,7 @@ describe('HMR runtime', () => {
     const evaluate = vi.fn((source: string) => (0, eval)(source));
     globalThis.globalEvalWithSourceUrl = evaluate;
     const { runtime, socket } = await setupRuntime();
-    runtime.registerFactory('dep.js', 'esm', (id) => {
+    runtime.registerFactory('dep.js', (id) => {
       runtime.registerModule(id, { exports: { value: 'before' } });
     });
 
@@ -565,7 +639,7 @@ describe('HMR runtime', () => {
     });
     runtime.registerModule('dep.js', { exports: {} });
     runtime.registerModule('entry.js', { exports: { value: 'before' } });
-    runtime.registerFactory('entry.js', 'esm', (id) => {
+    runtime.registerFactory('entry.js', (id) => {
       runtime.registerModule(id, { exports: { value: 'after' } });
       runtime.createModuleHotContext(id).accept();
     });
@@ -711,9 +785,34 @@ function createPatch(value: string, createHotContext = true) {
       edges: [[], [0]],
       dynamicEdges: [[], []]
     });
-    __rolldown_runtime__.registerFactory("dep.js", "esm", function (id) {
+    __rolldown_runtime__.registerFactory("dep.js", function (id) {
       __rolldown_runtime__.registerModule(id, { exports: { value: "${value}" } });
       ${createHotContext ? '__rolldown_runtime__.createModuleHotContext(id);' : ''}
     });
   })(globalThis.__rollipop_runtime__.graphs.get("host").runtime);`;
 }
+
+type BundleModule = { exports: any };
+type BundleRequire = {
+  (id: string): any;
+  m: Record<
+    string,
+    (global: unknown, module: BundleModule, exports: any, require: BundleRequire) => void
+  >;
+  c: Record<string, BundleModule>;
+};
+
+function createBundleRequire() {
+  const require: BundleRequire = Object.assign(
+    (id: string) => {
+      if (require.c[id] !== undefined) return require.c[id].exports;
+      const module = { exports: {} };
+      require.c[id] = module;
+      require.m[id].call(module.exports, globalThis, module, module.exports, require);
+      return module.exports;
+    },
+    { m: {} as BundleRequire['m'], c: {} as BundleRequire['c'] },
+  );
+  (globalThis as any).__rollipop_require__ = require;
+  return require;
+}

package/src/runtime/hmr-client.ts

@@ -315,7 +315,7 @@ class HMRClient implements HMRClientNativeInterface {
       case 'hmr:update-start':
         connection.pendingUpdatesCount++;
         connection.compileErrorMessage = null;
-        DevLoadingView.showMessage(`Refreshing ${connection.graph.id}...`, 'refresh');
+        DevLoadingView.showMessage('Refreshing...', 'refresh');
         break;
       case 'hmr:update':
         this.dismissRedbox();

package/src/runtime/hmr-runtime.ts

@@ -25,6 +25,19 @@ declare global {
 // DO NOT EDIT THIS CLASS NAME (`DevRuntime`)
 declare const DevRuntime: typeof DefaultDevRuntime;
 
+type BundleModule = { exports: any };
+interface BundleRequire {
+  (id: string): any;
+  m: Record<
+    string,
+    (global: unknown, module: BundleModule, exports: any, require: BundleRequire) => void
+  >;
+  c: Record<string, BundleModule>;
+}
+
+// Defined in the enclosing Rollipop bundle, separately for each bundle runtime.
+declare const __rollipop_require__: BundleRequire;
+
 var BaseDevRuntime = DevRuntime;
 
 interface AcceptCallback {
@@ -194,6 +207,69 @@ class ReactNativeDevRuntime extends BaseDevRuntime {
     };
   }
 
+  hasFactory(moduleId: string) {
+    return (
+      super.hasFactory(moduleId) ||
+      (typeof __rollipop_require__ !== 'undefined' && __rollipop_require__.m[moduleId] != null)
+    );
+  }
+
+  isExecuted(moduleId: string) {
+    return (
+      super.isExecuted(moduleId) ||
+      (typeof __rollipop_require__ !== 'undefined' && __rollipop_require__.c[moduleId] != null)
+    );
+  }
+
+  loadExports(moduleId: string) {
+    if (!super.isExecuted(moduleId) && typeof __rollipop_require__ !== 'undefined') {
+      const module = __rollipop_require__.c[moduleId];
+      if (module != null) {
+        return module.exports;
+      }
+    }
+    return super.loadExports(moduleId);
+  }
+
+  initModule(moduleId: string) {
+    if (this.isExecuted(moduleId)) {
+      return this.loadExports(moduleId);
+    }
+    if (super.hasFactory(moduleId) || !this.hasFactory(moduleId)) {
+      return super.initModule(moduleId);
+    }
+    return __rollipop_require__(moduleId);
+  }
+
+  registerFactory(moduleId: string, factory: (id: string) => void, stamp?: number) {
+    super.registerFactory(moduleId, factory, stamp);
+    if (typeof __rollipop_require__ !== 'undefined') {
+      __rollipop_require__.m[moduleId] = (_global, module) => {
+        // require() has already inserted an empty cache entry.
+        // The base executor bypasses that entry and selects the latest factory accepted by its stamp.
+        module.exports = super.initModule(moduleId);
+      };
+    }
+  }
+
+  registerModule(moduleId: string, module?: BundleModule) {
+    module ??=
+      typeof __rollipop_require__ !== 'undefined' ? __rollipop_require__.c[moduleId] : undefined;
+    module ??= { exports: {} };
+    super.registerModule(moduleId, module);
+    if (typeof __rollipop_require__ !== 'undefined') {
+      // Share the holder itself so CommonJS module.exports reassignments stay live.
+      __rollipop_require__.c[moduleId] = module;
+    }
+  }
+
+  removeModuleCache(moduleId: string) {
+    if (typeof __rollipop_require__ !== 'undefined') {
+      delete __rollipop_require__.c[moduleId];
+    }
+    super.removeModuleCache(moduleId);
+  }
+
   private createHotContext(moduleId: string) {
     let data = this.moduleHotData.get(moduleId);
     if (data == null) {