fix(runtime): preserve preact source identity across rerenders

Author: unadlib

packages/runtime/src/manager.ts

@@ -150,6 +150,7 @@ export class DefaultRuntimeManager implements RuntimeManager {
   private readonly browserModuleUrlCache = new Map<string, string>();
   private readonly browserModuleInflight = new Map<string, Promise<string>>();
   private readonly browserBlobUrls = new Set<string>();
+  private readonly browserBlobUrlsByCode = new Map<string, string>();
   private initialized = false;
 
   constructor(options: RuntimeManagerOptions = {}) {
@@ -209,6 +210,7 @@ export class DefaultRuntimeManager implements RuntimeManager {
     this.states.clear();
     this.browserModuleUrlCache.clear();
     this.browserModuleInflight.clear();
+    this.browserBlobUrlsByCode.clear();
     this.revokeBrowserBlobUrls();
   }
 
@@ -1097,7 +1099,11 @@ export class DefaultRuntimeManager implements RuntimeManager {
   }
 
   private createBrowserBlobModuleUrl(code: string): string {
-    return createBrowserBlobModuleUrl(code, this.browserBlobUrls);
+    return createBrowserBlobModuleUrl(
+      code,
+      this.browserBlobUrls,
+      this.browserBlobUrlsByCode,
+    );
   }
 
   private revokeBrowserBlobUrls(): void {

packages/runtime/src/runtime-component-runtime.ts

@@ -29,6 +29,15 @@ type PreactLikeClassComponent = new (
   render(...args: unknown[]): unknown;
 };
 
+const PREACT_FUNCTION_COMPONENT_WRAPPERS = new WeakMap<
+  (props: Record<string, JsonValue>) => unknown,
+  (props: Record<string, JsonValue>) => unknown
+>();
+const PREACT_CLASS_COMPONENT_WRAPPERS = new WeakMap<
+  PreactLikeClassComponent,
+  PreactLikeClassComponent
+>();
+
 export type RuntimeComponentFactory = (
   props: Record<string, JsonValue>,
   context: RuntimeExecutionContext,
@@ -244,7 +253,12 @@ function isPreactClassComponent(value: unknown): boolean {
 function wrapPreactClassComponent(
   sourceComponent: PreactLikeClassComponent,
 ): PreactLikeClassComponent {
-  return class RenderifyPreactSourceClassWrapper extends sourceComponent {
+  const cached = PREACT_CLASS_COMPONENT_WRAPPERS.get(sourceComponent);
+  if (cached) {
+    return cached;
+  }
+
+  const wrapped = class RenderifyPreactSourceClassWrapper extends sourceComponent {
     render(...args: unknown[]): unknown {
       const output = super.render(...args);
       if (isPlainObjectPreactOutput(output)) {
@@ -255,12 +269,20 @@ function wrapPreactClassComponent(
       return output;
     }
   };
+
+  PREACT_CLASS_COMPONENT_WRAPPERS.set(sourceComponent, wrapped);
+  return wrapped;
 }
 
 function wrapPreactFunctionComponent(
   sourceComponent: (props: Record<string, JsonValue>) => unknown,
 ): (props: Record<string, JsonValue>) => unknown {
-  return function RenderifyPreactSourceWrapper(
+  const cached = PREACT_FUNCTION_COMPONENT_WRAPPERS.get(sourceComponent);
+  if (cached) {
+    return cached;
+  }
+
+  const wrapped = function RenderifyPreactSourceWrapper(
     props: Record<string, JsonValue>,
   ): unknown {
     const output = sourceComponent(props);
@@ -271,6 +293,9 @@ function wrapPreactFunctionComponent(
     }
     return output;
   };
+
+  PREACT_FUNCTION_COMPONENT_WRAPPERS.set(sourceComponent, wrapped);
+  return wrapped;
 }
 
 async function loadPreactModule(): Promise<PreactLikeModule | undefined> {

packages/runtime/src/runtime-source-utils.ts

@@ -48,11 +48,19 @@ export async function parseImportSpecifiersFromSource(
 export function createBrowserBlobModuleUrl(
   code: string,
   browserBlobUrls: Set<string>,
+  browserBlobUrlsByCode?: Map<string, string>,
 ): string {
+  const cached = browserBlobUrlsByCode?.get(code);
+  if (cached) {
+    browserBlobUrls.add(cached);
+    return cached;
+  }
+
   const blobUrl = URL.createObjectURL(
     new Blob([code], { type: "text/javascript" }),
   );
   browserBlobUrls.add(blobUrl);
+  browserBlobUrlsByCode?.set(code, blobUrl);
   return blobUrl;
 }
 

tests/runtime-source-utils.test.ts

@@ -0,0 +1,38 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createBrowserBlobModuleUrl } from "../packages/runtime/src/runtime-source-utils";
+
+test("createBrowserBlobModuleUrl reuses cached urls for identical code", () => {
+  const originalCreateObjectURL = URL.createObjectURL;
+  let createdCount = 0;
+
+  Object.defineProperty(URL, "createObjectURL", {
+    configurable: true,
+    value: (_blob: Blob) => `blob:renderify-${++createdCount}`,
+  });
+
+  try {
+    const browserBlobUrls = new Set<string>();
+    const browserBlobUrlsByCode = new Map<string, string>();
+
+    const first = createBrowserBlobModuleUrl(
+      "export default 1;",
+      browserBlobUrls,
+      browserBlobUrlsByCode,
+    );
+    const second = createBrowserBlobModuleUrl(
+      "export default 1;",
+      browserBlobUrls,
+      browserBlobUrlsByCode,
+    );
+
+    assert.equal(first, second);
+    assert.equal(createdCount, 1);
+    assert.deepEqual([...browserBlobUrls], [first]);
+  } finally {
+    Object.defineProperty(URL, "createObjectURL", {
+      configurable: true,
+      value: originalCreateObjectURL,
+    });
+  }
+});

tests/runtime.test.ts

@@ -25,6 +25,7 @@ import {
   renderPlanInBrowser,
   renderTrustedPlanInBrowser,
 } from "../packages/runtime/src/index";
+import { createPreactRenderArtifact } from "../packages/runtime/src/runtime-component-runtime";
 import { DefaultSecurityChecker } from "../packages/security/src/index";
 
 class MockLoader implements RuntimeModuleLoader {
@@ -3225,6 +3226,58 @@ test("runtime emits preact render artifact for source.runtime=preact modules", a
   await runtime.terminate();
 });
 
+test("runtime reuses stable preact wrapper identities for repeated renders", async () => {
+  function FunctionDashboard(): null {
+    return null;
+  }
+
+  class ClassDashboard {
+    render(): null {
+      return null;
+    }
+  }
+
+  const firstFunctionArtifact = await createPreactRenderArtifact({
+    sourceExport: FunctionDashboard,
+    runtimeInput: {},
+    diagnostics: [],
+  });
+  const secondFunctionArtifact = await createPreactRenderArtifact({
+    sourceExport: FunctionDashboard,
+    runtimeInput: {},
+    diagnostics: [],
+  });
+  assert.equal(firstFunctionArtifact?.mode, "preact-vnode");
+  assert.equal(secondFunctionArtifact?.mode, "preact-vnode");
+  assert.equal(
+    Object.is(
+      (firstFunctionArtifact as { payload: { type: unknown } }).payload.type,
+      (secondFunctionArtifact as { payload: { type: unknown } }).payload.type,
+    ),
+    true,
+  );
+
+  const firstClassArtifact = await createPreactRenderArtifact({
+    sourceExport: ClassDashboard,
+    runtimeInput: {},
+    diagnostics: [],
+  });
+  const secondClassArtifact = await createPreactRenderArtifact({
+    sourceExport: ClassDashboard,
+    runtimeInput: {},
+    diagnostics: [],
+  });
+  assert.equal(firstClassArtifact?.mode, "preact-vnode");
+  assert.equal(secondClassArtifact?.mode, "preact-vnode");
+  assert.equal(
+    Object.is(
+      (firstClassArtifact as { payload: { type: unknown } }).payload.type,
+      (secondClassArtifact as { payload: { type: unknown } }).payload.type,
+    ),
+    true,
+  );
+});
+
 test("runtime preact rendering rejects plain object component output", async () => {
   const runtime = new DefaultRuntimeManager({
     sourceTranspiler: new PassthroughSourceTranspiler(),