@reckona/mreact-compat 0.0.174 → 0.0.175

package/src/host-reconciler.ts

@@ -12,6 +12,7 @@ import {
   STRICT_MODE_TYPE,
   Suspense,
   SuspenseList,
+  type MemoType,
   type ReactCompatElement,
   type ReactCompatPortal,
   type ReactiveDomBlockProps,
@@ -21,6 +22,7 @@ import {
   type ReactCompatNode,
 } from "./element.js";
 import {
+  batchReactivePropCellUpdates,
   createReactivePropCell,
   createReactivePropProxy,
   setReactivePropCell,
@@ -227,13 +229,18 @@ export function renderHostFiberRoot(
 ): Fiber {
   const workInProgress = createWorkInProgress(root.current, { children: element });
   const rootDocument = root.container.ownerDocument;
-  const result = reconcileHostChild(
-    workInProgress,
-    root.current.child,
-    element,
-    runtime,
-    options.previousNodes === undefined ? "0" : "",
-    { ...options, documentRef: options.documentRef ?? rootDocument },
+  const result = batchReactivePropCellUpdates(() =>
+    reconcileHostChild(
+      workInProgress,
+      root.current.child,
+      element,
+      runtime,
+      options.previousNodes === undefined ? "0" : "",
+      {
+        ...options,
+        documentRef: options.documentRef ?? rootDocument,
+      },
+    ),
   );
   workInProgress.child = result.fiber;
   workInProgress.memoizedProps = { children: element };
@@ -778,6 +785,7 @@ function isKeyedMemoRowCandidate(node: ReactCompatNode): boolean {
 // reconciler can drive its committed block straight through the prop cell instead
 // of re-invoking the component (the block's bound DOM updates via subscriptions).
 const STATIC_REACTIVE_BLOCK_MARKER = "__mreactStaticBlock";
+const MEMO_COMPARE_PROPS_MARKER = "__mreactMemoCompareProps";
 
 function isStaticReactiveBlockComponent(type: unknown): boolean {
   return (
@@ -786,6 +794,118 @@ function isStaticReactiveBlockComponent(type: unknown): boolean {
   );
 }
 
+function areCompilerMemoComparePropsEqual(
+  memoType: MemoType<Record<string, unknown>>,
+  previousProps: Record<string, unknown>,
+  nextProps: Record<string, unknown>,
+): boolean | undefined {
+  const keys = memoType[MEMO_COMPARE_PROPS_MARKER];
+  if (keys === undefined) {
+    return undefined;
+  }
+
+  if (keys.length === 1) {
+    const key = keys[0] as string;
+    return previousProps[key] === nextProps[key];
+  }
+
+  if (keys.length === 2) {
+    const first = keys[0] as string;
+    const second = keys[1] as string;
+    return previousProps[first] === nextProps[first] &&
+      previousProps[second] === nextProps[second];
+  }
+
+  if (keys.length === 3) {
+    const first = keys[0] as string;
+    const second = keys[1] as string;
+    const third = keys[2] as string;
+    return previousProps[first] === nextProps[first] &&
+      previousProps[second] === nextProps[second] &&
+      previousProps[third] === nextProps[third];
+  }
+
+  for (const key of keys) {
+    if (previousProps[key] !== nextProps[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function tryCreateInitialStaticBlockMemoFiber(
+  node: ReactCompatElement,
+  key: string | undefined,
+  memoType: {
+    type: ReactCompatElement["type"];
+    compare?: (
+      previous: Record<string, unknown>,
+      next: Record<string, unknown>,
+    ) => boolean;
+  },
+  runtime: RootRuntime,
+  memoPath: string,
+  options: FiberHydrationOptions,
+): FiberReconcileResult | undefined {
+  if (
+    options.previousNodes !== undefined ||
+    node.ref !== null ||
+    !isStaticReactiveBlockComponent(memoType.type)
+  ) {
+    return undefined;
+  }
+
+  const props = node.props as Record<string, unknown>;
+  const componentType = memoType.type as (props: Record<string, unknown>) => ReactCompatNode;
+  const rendered = componentType(props);
+
+  if (!isReactCompatElement(rendered) || rendered.type !== REACTIVE_DOM_BLOCK_TYPE) {
+    return undefined;
+  }
+
+  const memoFiber = createFiber("memo", props, key);
+  memoFiber.type = memoType;
+
+  const componentFiber = createFiber("function-component", props, key);
+  componentFiber.type = componentType;
+
+  const childResult = createHostFiber(
+    componentFiber,
+    undefined,
+    rendered,
+    key,
+    runtime,
+    `${memoPath}.0`,
+    options,
+  );
+  componentFiber.child = childResult.fiber;
+  if (componentFiber.child !== undefined) {
+    componentFiber.child.return = componentFiber;
+    componentFiber.child.sibling = undefined;
+    bubbleHostChild(componentFiber, componentFiber.child);
+  }
+  componentFiber.stateNode = {
+    element: node,
+    props,
+    instanceKeys: emptyInstanceKeys,
+    hasContextDependencies: false,
+  } satisfies FunctionFiberState;
+
+  memoFiber.child = componentFiber;
+  componentFiber.return = memoFiber;
+  bubbleHostChild(memoFiber, componentFiber);
+  memoFiber.memoizedState = {
+    props,
+    instanceKeys: emptyInstanceKeys,
+    hasDirtyInstanceDependencies: false,
+    hasUnflushedEffectDependencies: false,
+    hasRetainedInstanceDependencies: false,
+  } satisfies MemoFiberState;
+
+  return { fiber: memoFiber, consumed: childResult.consumed };
+}
+
 // In-place bailout for a keyed memo row whose props are unchanged and which has
 // no hook/context/effect dependencies. The caller has proven the key order is
 // unchanged (hasSameKeyOrderPrefix), so the fiber keeps its position and can be
@@ -814,16 +934,21 @@ function tryReuseDependencyFreeKeyedMemoRow(
     state === undefined ||
     state.hasDirtyInstanceDependencies !== false ||
     state.hasUnflushedEffectDependencies !== false ||
-    state.hasRetainedInstanceDependencies !== false ||
-    !areMemoPropsEqual(
-      child.type as { compare?: (a: Record<string, unknown>, b: Record<string, unknown>) => boolean },
-      state.props,
-      child.props as Record<string, unknown>,
-    )
+    state.hasRetainedInstanceDependencies !== false
   ) {
     return undefined;
   }
 
+  const memoType = child.type as MemoType<Record<string, unknown>>;
+  const nextProps = child.props as Record<string, unknown>;
+  const propsEqual =
+    areCompilerMemoComparePropsEqual(memoType, state.props, nextProps) ??
+    areMemoPropsEqual(memoType, state.props, nextProps);
+
+  if (!propsEqual) {
+    return undefined;
+  }
+
   matched.pendingProps = child.props;
   matched.flags = NoFlags;
   matched.subtreeFlags = NoFlags;
@@ -890,8 +1015,10 @@ function tryCellUpdateStaticBlockMemoRow(
 
   // Drive the bound DOM through the prop cell (the marker guarantees the block's
   // props are the component's props verbatim), then reuse the memo fiber in place.
-  setReactivePropCell(blockState.propCell, child.props as Record<string, unknown>);
-  matched.memoizedState = { ...state, props: child.props as Record<string, unknown> };
+  const nextProps = child.props as Record<string, unknown>;
+  setReactivePropCell(blockState.propCell, nextProps);
+  state.props = nextProps;
+  matched.memoizedState = state;
   matched.pendingProps = child.props;
   matched.flags = NoFlags;
   matched.subtreeFlags = NoFlags;
@@ -903,12 +1030,15 @@ function tryCellUpdateStaticBlockMemoRow(
 }
 
 // Fast path for a keyed list of memo-wrapped rows (e.g. `<RowMemo key={id} />`)
-// whose key order is UNCHANGED between renders — the js-framework-benchmark
-// "select row" and "partial update" shapes. Walks current fibers and new
-// children in lockstep: unchanged rows bail in place (no allocation, no general
-// keyed-reconcile machinery), changed rows re-render through the proven
-// per-child path. Any reorder / insert / delete / non-memo child / length change
-// makes it return undefined so the general reconcile takes over.
+// whose key order is UNCHANGED, append-only, or a single deletion between
+// renders — the js-framework-benchmark "select row", "partial update",
+// "append rows", and "remove row" shapes. Walks current fibers and new children
+// in lockstep: unchanged rows bail in place (no allocation, no general
+// keyed-reconcile machinery), changed rows cell-update through the proven
+// per-child path, appended rows are created as a suffix, and a single deleted
+// row is removed while the suffix is retained. Any reorder / insert /
+// multi-delete / non-memo child makes it return undefined so the general
+// reconcile takes over.
 function reconcileKeyedMemoRowHostChildren(
   parent: Fiber,
   currentFirstChild: Fiber | undefined,
@@ -922,12 +1052,16 @@ function reconcileKeyedMemoRowHostChildren(
     currentFirstChild === undefined ||
     runtime === undefined ||
     options.previousNodes !== undefined ||
-    !isKeyedMemoRowCandidate(children[0]) ||
-    !hasSameKeyOrderPrefix(currentFirstChild, children)
+    !isKeyedMemoRowCandidate(children[0])
   ) {
     return undefined;
   }
 
+  const memoRowType = (children[0] as ReactCompatElement).type;
+  if (!hasSameAppendOrSingleDeleteKeyOrder(currentFirstChild, children, memoRowType)) {
+    return undefined;
+  }
+
   let currentKeyed: Fiber | undefined = currentFirstChild;
   let first: Fiber | undefined;
   let previous: Fiber | undefined;
@@ -935,22 +1069,38 @@ function reconcileKeyedMemoRowHostChildren(
   let subtreeChildListChanged = false;
   let hasRefSubtree = false;
   let hasDisposableResources = false;
+  let listShapeChanged = false;
+  let appendSuffix: AppendSuffixCommitHint | undefined;
+  let removedFiber: Fiber | undefined;
   let dirtyChildren: Fiber[] | undefined;
 
   for (let index = 0; index < children.length; index += 1) {
-    const child = children[index];
+    const child = children[index] as ReactCompatElement;
+    const childElement = child;
+    let matched: Fiber | undefined = currentKeyed;
 
-    if (currentKeyed === undefined || !isKeyedMemoRowCandidate(child)) {
+    if (matched === undefined) {
+      // append-only suffix
+    } else if (matched.key === childElement.key) {
+      currentKeyed = matched.sibling;
+    } else if (
+      removedFiber === undefined &&
+      matched.sibling?.key === childElement.key &&
+      canSkipSingleDeletedKeyedFiber(children, index, matched.sibling)
+    ) {
+      removedFiber = matched;
+      matched = matched.sibling;
+      currentKeyed = matched.sibling;
+      listShapeChanged = true;
+    } else {
       return undefined;
     }
 
-    const matched = currentKeyed;
-    currentKeyed = currentKeyed.sibling;
-    const childElement = child as ReactCompatElement;
-
     let fiber =
-      tryReuseDependencyFreeKeyedMemoRow(matched, childElement) ??
-      tryCellUpdateStaticBlockMemoRow(matched, childElement);
+      matched === undefined
+        ? undefined
+        : tryReuseDependencyFreeKeyedMemoRow(matched, childElement) ??
+          tryCellUpdateStaticBlockMemoRow(matched, childElement);
     if (fiber === undefined) {
       const result = createHostFiber(
         parent,
@@ -968,11 +1118,16 @@ function reconcileKeyedMemoRowHostChildren(
         return undefined;
       }
 
-      if (fiber !== matched && fiber.alternate !== matched) {
+      if (matched !== undefined && fiber !== matched && fiber.alternate !== matched) {
         markOptimizedChildForDeletion(parent, matched);
       }
     }
 
+    if (matched === undefined) {
+      listShapeChanged = true;
+      appendSuffix ??= { fiber, index };
+    }
+
     if (first === undefined) {
       first = fiber;
     } else if (previous !== undefined) {
@@ -1003,18 +1158,84 @@ function reconcileKeyedMemoRowHostChildren(
   }
 
   if (currentKeyed !== undefined) {
-    return undefined;
+    if (removedFiber !== undefined || currentKeyed.sibling !== undefined) {
+      return undefined;
+    }
+    removedFiber = currentKeyed;
+    listShapeChanged = true;
   }
 
   parent.hasRefSubtree = hasRefSubtree;
   parent.hasDisposableResources = hasDisposableResources;
   parent.subtreeFlags = subtreeFlags;
   parent.subtreeChildListChanged = subtreeChildListChanged;
-  parent.childListChanged = false;
+  parent.childListChanged = listShapeChanged;
+  if (appendSuffix !== undefined && canStoreAppendSuffixCommitHint(parent)) {
+    parent.memoizedState = appendSuffix;
+  }
+  if (removedFiber !== undefined) {
+    parent.deletions = [removedFiber];
+    markOptimizedChildForDeletion(parent, removedFiber);
+  }
   recordDirtyChildCommitHints(parent, dirtyChildren);
   return { fiber: first, consumed: 0 };
 }
 
+function hasSameAppendOrSingleDeleteKeyOrder(
+  currentFirstChild: Fiber,
+  children: readonly ReactCompatNode[],
+  expectedType: ReactCompatElement["type"],
+): boolean {
+  let current: Fiber | undefined = currentFirstChild;
+  let skippedDeletion = false;
+
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+    if (!isSameKeyedMemoRowCandidate(child, expectedType)) {
+      return false;
+    }
+
+    const key = (child as ReactCompatElement).key;
+
+    if (current === undefined) {
+      return true;
+    }
+
+    if (current.key === key) {
+      current = current.sibling;
+      continue;
+    }
+
+    const sibling = current.sibling;
+    if (
+      !skippedDeletion &&
+      sibling !== undefined &&
+      sibling.key === key &&
+      canSkipSingleDeletedKeyedFiber(children, index, sibling)
+    ) {
+      skippedDeletion = true;
+      current = sibling.sibling;
+      continue;
+    }
+
+    return false;
+  }
+
+  return current === undefined || (!skippedDeletion && current.sibling === undefined);
+}
+
+function isSameKeyedMemoRowCandidate(
+  node: ReactCompatNode,
+  expectedType: ReactCompatElement["type"],
+): boolean {
+  return (
+    isReactCompatElement(node) &&
+    node.key !== null &&
+    node.ref === null &&
+    node.type === expectedType
+  );
+}
+
 function canReuseDependencyFreeMemoAtKey(
   current: Fiber | undefined,
   node: ReactCompatElement,
@@ -1926,6 +2147,22 @@ function createHostFiberImpl(
     const memoPath = `${path}.memo`;
     const previousMemoFiber =
       current?.tag === "memo" && current.type === memoType ? current : undefined;
+    const initialStaticBlockMemoFiber =
+      previousMemoFiber === undefined
+        ? tryCreateInitialStaticBlockMemoFiber(
+          node,
+          key,
+          memoType,
+          runtime,
+          memoPath,
+          options,
+        )
+        : undefined;
+
+    if (initialStaticBlockMemoFiber !== undefined) {
+      return initialStaticBlockMemoFiber;
+    }
+
     const previousMemoState =
       previousMemoFiber !== undefined
         ? (previousMemoFiber.memoizedState as MemoFiberState | undefined)
@@ -2935,6 +3172,7 @@ function commitHostSingleRemoval(fiber: Fiber, parent: ParentNode): boolean {
   }
 
   if (removedAny) {
+    disposeHostFiberResources(removed);
     fiber.deletions = undefined;
   }
 

package/src/reactive-prop-cell.ts

@@ -1,3 +1,4 @@
+import { batch } from "@reckona/mreact-reactive-core";
 import {
   flushQueuedComputations,
   notifySubscribers,
@@ -15,6 +16,8 @@ import type { ReactiveDomBlockResult } from "./element.js";
 export interface ReactivePropCell {
   value: Record<string, unknown>;
   source: Source;
+  propertySources?: Map<PropertyKey, Source> | undefined;
+  propertySnapshots?: Map<PropertyKey, ShallowObjectSnapshot> | undefined;
 }
 
 // What a reactive-dom-block fiber stores in stateNode: the committed node and
@@ -23,17 +26,35 @@ export interface ReactiveDomBlockState extends ReactiveDomBlockResult {
   propCell?: ReactivePropCell | undefined;
 }
 
+let propCellBatchDepth = 0;
+let propCellBatchNeedsFlush = false;
+
 export function createReactivePropCell(props: Record<string, unknown>): ReactivePropCell {
   return { value: props, source: { subscribers: null } };
 }
 
+export function batchReactivePropCellUpdates<T>(run: () => T): T {
+  propCellBatchDepth += 1;
+  try {
+    return batch(run);
+  } finally {
+    propCellBatchDepth -= 1;
+    if (propCellBatchDepth === 0 && propCellBatchNeedsFlush) {
+      propCellBatchNeedsFlush = false;
+      flushQueuedComputations();
+    }
+  }
+}
+
 const PROP_PROXY_HANDLER: ProxyHandler<ReactivePropCell> = {
   get(cell, property) {
-    trackSource(cell.source);
-    return cell.value[property as string];
+    trackSource(getReactivePropPropertySource(cell, property));
+    const value = Reflect.get(cell.value, property);
+    rememberReactivePropObjectSnapshot(cell, property, value);
+    return value;
   },
   has(cell, property) {
-    trackSource(cell.source);
+    trackSource(getReactivePropPropertySource(cell, property));
     return property in cell.value;
   },
   ownKeys(cell) {
@@ -50,6 +71,107 @@ export function createReactivePropProxy<P extends object>(cell: ReactivePropCell
   return new Proxy(cell, PROP_PROXY_HANDLER) as unknown as P;
 }
 
+function getReactivePropPropertySource(cell: ReactivePropCell, property: PropertyKey): Source {
+  let propertySources = cell.propertySources;
+
+  if (propertySources === undefined) {
+    propertySources = new Map();
+    cell.propertySources = propertySources;
+  }
+
+  let source = propertySources.get(property);
+
+  if (source === undefined) {
+    source = { subscribers: null };
+    propertySources.set(property, source);
+  }
+
+  return source;
+}
+
+interface ShallowObjectSnapshot {
+  value: object;
+  entries: Map<PropertyKey, unknown>;
+}
+
+function rememberReactivePropObjectSnapshot(
+  cell: ReactivePropCell,
+  property: PropertyKey,
+  value: unknown,
+): void {
+  if (!isObjectLike(value)) {
+    cell.propertySnapshots?.delete(property);
+    return;
+  }
+
+  let snapshots = cell.propertySnapshots;
+  if (snapshots === undefined) {
+    snapshots = new Map();
+    cell.propertySnapshots = snapshots;
+  }
+
+  snapshots.set(property, createShallowObjectSnapshot(value));
+}
+
+function createShallowObjectSnapshot(value: object): ShallowObjectSnapshot {
+  const entries = new Map<PropertyKey, unknown>();
+  for (const key of Reflect.ownKeys(value)) {
+    const descriptor = Reflect.getOwnPropertyDescriptor(value, key);
+    if (descriptor !== undefined && "value" in descriptor) {
+      entries.set(key, descriptor.value);
+    }
+  }
+
+  return { value, entries };
+}
+
+function isObjectLike(value: unknown): value is object {
+  return (typeof value === "object" && value !== null) || typeof value === "function";
+}
+
+function hasShallowObjectSnapshotChanged(
+  snapshot: ShallowObjectSnapshot | undefined,
+  nextValue: unknown,
+): boolean {
+  if (snapshot === undefined || snapshot.value !== nextValue || !isObjectLike(nextValue)) {
+    return false;
+  }
+
+  for (const key of Reflect.ownKeys(nextValue)) {
+    const descriptor = Reflect.getOwnPropertyDescriptor(nextValue, key);
+    if (descriptor !== undefined && "value" in descriptor) {
+      if (!snapshot.entries.has(key) || !Object.is(snapshot.entries.get(key), descriptor.value)) {
+        return true;
+      }
+    }
+  }
+
+  for (const key of snapshot.entries.keys()) {
+    const descriptor = Reflect.getOwnPropertyDescriptor(nextValue, key);
+    if (descriptor === undefined || !("value" in descriptor)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function shouldNotifyReactivePropProperty(
+  previous: Record<string, unknown>,
+  next: Record<string, unknown>,
+  property: PropertyKey,
+  snapshot: ShallowObjectSnapshot | undefined,
+): boolean {
+  if ((property in previous) !== (property in next)) {
+    return true;
+  }
+
+  const previousValue = Reflect.get(previous, property);
+  const nextValue = Reflect.get(next, property);
+  return !Object.is(previousValue, nextValue) ||
+    hasShallowObjectSnapshotChanged(snapshot, nextValue);
+}
+
 export function setReactivePropCell(
   cell: ReactivePropCell,
   next: Record<string, unknown>,
@@ -58,10 +180,38 @@ export function setReactivePropCell(
     return;
   }
 
+  const previous = cell.value;
+  const propertySources = cell.propertySources;
+  let notified = false;
+
   cell.value = next;
 
+  if (propertySources !== undefined) {
+    for (const [property, source] of propertySources) {
+      if (
+        shouldNotifyReactivePropProperty(
+          previous,
+          next,
+          property,
+          cell.propertySnapshots?.get(property),
+        )
+      ) {
+        notifySubscribers(source);
+        notified = true;
+      }
+    }
+  }
+
   if (cell.source.subscribers !== null) {
     notifySubscribers(cell.source);
-    flushQueuedComputations();
+    notified = true;
+  }
+
+  if (notified) {
+    if (propCellBatchDepth === 0) {
+      flushQueuedComputations();
+    } else {
+      propCellBatchNeedsFlush = true;
+    }
   }
 }