@reckona/mreact-compat 0.0.92 → 0.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-compat",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "description": "React-compatible runtime implementation for mreact.",
   "keywords": [
     "compatibility",
@@ -69,6 +69,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@reckona/mreact-shared": "0.0.92"
+    "@reckona/mreact-shared": "0.0.93"
   }
 }

package/src/class-component.ts

@@ -174,6 +174,8 @@ interface ClassUpdateContext {
 interface ClassComponentGlobalState {
   lifecycleSnapshots: WeakMap<ClassComponentInstance, ClassLifecycleSnapshot>;
   updateContexts: WeakMap<ClassComponentInstance, ClassUpdateContext>;
+  pendingInstancesByRuntime: WeakMap<RootRuntime, Map<string, ClassComponentInstance>>;
+  dirtyPathsByRuntime: WeakMap<RootRuntime, Set<string>>;
 }
 
 const CLASS_COMPONENT_STATE_KEY = Symbol.for("modular.react.class_component_state");
@@ -183,9 +185,13 @@ const classComponentGlobalState =
   ] ??= {
     lifecycleSnapshots: new WeakMap(),
     updateContexts: new WeakMap(),
+    pendingInstancesByRuntime: new WeakMap(),
+    dirtyPathsByRuntime: new WeakMap(),
   });
 const classLifecycleSnapshots = classComponentGlobalState.lifecycleSnapshots;
 const classUpdateContexts = classComponentGlobalState.updateContexts;
+const classPendingInstancesByRuntime = classComponentGlobalState.pendingInstancesByRuntime;
+const classDirtyPathsByRuntime = classComponentGlobalState.dirtyPathsByRuntime;
 
 export type ClassComponentRenderResult =
   | {
@@ -255,11 +261,27 @@ export function renderClassComponentWithRuntime(
   props: Record<string, unknown>,
   runtime: RootRuntime,
   path: string,
-  options: { hasDirtyDescendant?: boolean } = {},
+  options: {
+    currentInstance?: ClassComponentInstance;
+    hasDirtyDescendant?: boolean;
+  } = {},
 ): ClassComponentRenderResult {
   return renderWithRootRuntime(runtime, path, () => {
     const instanceRef = useRef<ClassComponentInstance | undefined>(undefined);
     const didCommitRef = useRef(false);
+    const currentInstance =
+      options.currentInstance instanceof type
+        ? options.currentInstance
+        : getPendingClassInstance(runtime, path, type);
+
+    if (
+      currentInstance !== undefined &&
+      instanceRef.current !== currentInstance
+    ) {
+      instanceRef.current = currentInstance;
+      didCommitRef.current = true;
+    }
+
     const previousInstance = instanceRef.current;
     const hasDifferentType =
       previousInstance !== undefined && !(previousInstance instanceof type);
@@ -282,6 +304,7 @@ export function renderClassComponentWithRuntime(
 
     instanceRef.current = instance;
     installClassUpdateMethods(instance, runtime, path);
+    clearPendingClassUpdate(runtime, path);
     const nextState = resolveDerivedStateFromProps(
       type,
       props,
@@ -488,7 +511,7 @@ function enqueueClassSetState(
     nextState,
   });
 
-  markClassInstanceDirty(updateContext);
+  markClassInstanceDirty(instance, updateContext);
   callback?.call(instance);
 }
 
@@ -507,11 +530,15 @@ function enqueueClassForceUpdate(
     previousState: instance.state ?? {},
     force: true,
   });
-  markClassInstanceDirty(updateContext);
+  markClassInstanceDirty(instance, updateContext);
   callback?.call(instance);
 }
 
-function markClassInstanceDirty(updateContext: ClassUpdateContext): void {
+function markClassInstanceDirty(
+  instance: ClassComponentInstance,
+  updateContext: ClassUpdateContext,
+): void {
+  markPendingClassUpdate(instance, updateContext);
   const runtimeInstance = updateContext.runtime.instances.get(updateContext.path) as
     | { dirty?: boolean }
     | undefined;
@@ -521,6 +548,76 @@ function markClassInstanceDirty(updateContext: ClassUpdateContext): void {
   updateContext.runtime.rerender();
 }
 
+export function hasDirtyClassUpdate(
+  runtime: RootRuntime | undefined,
+  keys: readonly string[],
+  prefix?: string,
+): boolean {
+  if (runtime === undefined) {
+    return false;
+  }
+
+  const dirtyPaths = classDirtyPathsByRuntime.get(runtime);
+  if (dirtyPaths === undefined) {
+    return false;
+  }
+
+  for (const key of keys) {
+    if (dirtyPaths.has(key)) {
+      return true;
+    }
+  }
+
+  if (prefix === undefined) {
+    return false;
+  }
+
+  for (const dirtyPath of dirtyPaths) {
+    if (dirtyPath === prefix || dirtyPath.startsWith(`${prefix}.`)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function markPendingClassUpdate(
+  instance: ClassComponentInstance,
+  updateContext: ClassUpdateContext,
+): void {
+  let pendingInstances = classPendingInstancesByRuntime.get(updateContext.runtime);
+  if (pendingInstances === undefined) {
+    pendingInstances = new Map();
+    classPendingInstancesByRuntime.set(updateContext.runtime, pendingInstances);
+  }
+  let dirtyPaths = classDirtyPathsByRuntime.get(updateContext.runtime);
+  if (dirtyPaths === undefined) {
+    dirtyPaths = new Set();
+    classDirtyPathsByRuntime.set(updateContext.runtime, dirtyPaths);
+  }
+  pendingInstances.set(updateContext.path, instance);
+  dirtyPaths.add(updateContext.path);
+}
+
+function getPendingClassInstance(
+  runtime: RootRuntime,
+  path: string,
+  type: ClassComponentType,
+): ClassComponentInstance | undefined {
+  const dirtyPaths = classDirtyPathsByRuntime.get(runtime);
+  if (dirtyPaths?.has(path) !== true) {
+    return undefined;
+  }
+
+  const instance = classPendingInstancesByRuntime.get(runtime)?.get(path);
+  return instance instanceof type ? instance : undefined;
+}
+
+function clearPendingClassUpdate(runtime: RootRuntime, path: string): void {
+  classDirtyPathsByRuntime.get(runtime)?.delete(path);
+  classPendingInstancesByRuntime.get(runtime)?.delete(path);
+}
+
 function installClassLifecycleEffects(
   instance: ClassComponentInstance,
   didCommitRef: { current: boolean },

package/src/host-reconciler.ts

@@ -51,9 +51,11 @@ import {
 } from "./hooks.js";
 import { isThenable } from "./thenable.js";
 import {
+  hasDirtyClassUpdate,
   isClassComponentType,
   recoverClassComponentError,
   renderClassComponentWithRuntime,
+  type ClassComponentInstance,
 } from "./class-component.js";
 import { areMemoPropsEqual, getPendingProps, shallowEqual } from "./prop-comparison.js";
 import {
@@ -1204,7 +1206,7 @@ function createHostFiberImpl(
 
     if (
       previousMemoState !== undefined &&
-      !hasDirtyInstance(runtime, previousMemoState.instanceKeys) &&
+      !hasDirtyInstance(runtime, previousMemoState.instanceKeys, memoPath) &&
       !hasUnflushedMountEffectInstance(runtime, previousMemoState.instanceKeys) &&
       areMemoPropsEqual(memoType, previousMemoState.props, node.props)
     ) {
@@ -1315,12 +1317,25 @@ function createHostFiberImpl(
         : createFiber("class-component", node.props, key);
     fiber.type = classType;
     const previousClassChildKeys = collectInstanceKeys(runtime, `${path}.class`);
+    const currentClassInstance =
+      current?.tag === "class-component" && current.type === classType
+        ? (current.stateNode as ClassComponentInstance)
+        : undefined;
     const rendered = renderClassComponentWithRuntime(
       classType,
       node.props,
       runtime,
       path,
-      { hasDirtyDescendant: hasDirtyInstance(runtime, previousClassChildKeys) },
+      {
+        ...(currentClassInstance === undefined
+          ? {}
+          : { currentInstance: currentClassInstance }),
+        hasDirtyDescendant: hasDirtyInstance(
+          runtime,
+          previousClassChildKeys,
+          `${path}.class`,
+        ),
+      },
     );
     applyRef(node.ref, rendered.kind === "skip" ? current?.stateNode : rendered.instance);
 
@@ -1398,7 +1413,7 @@ function createHostFiberImpl(
       runtime.strictReplayDepth === 0 &&
       previousFunctionState !== undefined &&
       (canReuseSameElement || canReuseExternalStoreSnapshot) &&
-      !hasDirtyInstance(runtime, previousFunctionState.instanceKeys) &&
+      !hasDirtyInstance(runtime, previousFunctionState.instanceKeys, path) &&
       !hasUnflushedMountEffectInstance(runtime, previousFunctionState.instanceKeys) &&
       !hasPendingAsyncChild(current?.child)
     ) {
@@ -1495,6 +1510,7 @@ function createHostFiberImpl(
     current?.tag === "host-component" &&
     current.type === node.type &&
     Object.is(hostFiberChildrenProp(current.memoizedProps), node.props.children) &&
+    !hasDirtyInstance(runtime, [], `${path}.c`) &&
     canReuseStaticHostSubtree(current.child)
   ) {
     fiber.child = current.child;
@@ -3064,11 +3080,40 @@ function markActiveInstanceKeys(runtime: RootRuntime, keys: readonly string[]):
   }
 }
 
-function hasDirtyInstance(runtime: RootRuntime, keys: readonly string[]): boolean {
-  return keys.some(
+function hasDirtyInstance(
+  runtime: RootRuntime | undefined,
+  keys: readonly string[],
+  prefix?: string,
+): boolean {
+  if (runtime === undefined) {
+    return false;
+  }
+
+  if (hasDirtyClassUpdate(runtime, keys, prefix)) {
+    return true;
+  }
+
+  if (keys.some(
     (key) =>
       (runtime.instances.get(key) as { dirty?: boolean } | undefined)?.dirty === true,
-  );
+  )) {
+    return true;
+  }
+
+  if (prefix === undefined) {
+    return false;
+  }
+
+  for (const [key, instance] of runtime.instances) {
+    if (
+      (key === prefix || key.startsWith(`${prefix}.`)) &&
+      (instance as { dirty?: boolean }).dirty === true
+    ) {
+      return true;
+    }
+  }
+
+  return false;
 }
 
 function hasUnflushedMountEffectInstance(runtime: RootRuntime, keys: readonly string[]): boolean {