@reckona/mreact-compat 0.0.171 → 0.0.173

package/src/jsx-dev-runtime.ts

@@ -1,5 +1,7 @@
 import {
+  createReactiveDomBlock,
   Fragment,
+  REACTIVE_STATE_BINDING_META,
   REACTIVE_TEXT_BINDING_META,
   jsx,
 } from "./jsx-runtime.js";
@@ -17,6 +19,8 @@ import type {
 export { Fragment };
 /** Metadata key used by compiled JSX for reactive text bindings. */
 export { REACTIVE_TEXT_BINDING_META };
+export { REACTIVE_STATE_BINDING_META };
+export { createReactiveDomBlock };
 /** JSX event and attribute types re-exported by the development JSX runtime. */
 export type {
   FormEvent,

package/src/jsx-runtime.ts

@@ -1,10 +1,14 @@
 import {
   createElementFromJsxConfig,
   Fragment,
+  REACTIVE_DOM_BLOCK_TYPE,
+  REACTIVE_STATE_BINDING_META,
   REACTIVE_TEXT_BINDING_META,
 } from "./element.js";
 import type {
   ElementType,
+  ReactiveDomBlockProps,
+  ReactiveDomBlockRender,
   ReactCompatElement,
   ReactCompatNode,
 } from "./element.js";
@@ -13,6 +17,18 @@ import type {
 export { Fragment };
 /** Metadata key used by compiled JSX for reactive text bindings. */
 export { REACTIVE_TEXT_BINDING_META };
+export { REACTIVE_STATE_BINDING_META };
+
+export function createReactiveDomBlock<P extends object = Record<string, unknown>>(
+  render: ReactiveDomBlockRender<P>,
+  blockProps?: P,
+): ReactCompatElement<ReactiveDomBlockProps> {
+  const props: ReactiveDomBlockProps = { render: render as ReactiveDomBlockRender };
+  if (blockProps !== undefined) {
+    props.blockProps = blockProps as Record<string, unknown>;
+  }
+  return createElementFromJsxConfig(REACTIVE_DOM_BLOCK_TYPE, props);
+}
 
 /** DOM event type with a narrowed currentTarget. */
 export type JSXEvent<

package/src/reactive-prop-cell.ts

@@ -0,0 +1,67 @@
+import {
+  flushQueuedComputations,
+  notifySubscribers,
+  trackSource,
+  type Source,
+} from "@reckona/mreact-reactive-core/internal";
+import type { ReactiveDomBlockResult } from "./element.js";
+
+// A stable reactive box over a component's incoming props, analogous to the
+// native keyed list's KeyedItemCell (packages/reactive-dom/src/bind-list.ts).
+// A reactive-dom-block reads its props through a proxy backed by this cell;
+// when the component re-renders with new props the reconciler swaps the cell's
+// value and notifies, so bound text/attributes update without re-running the
+// block's render closure or reconciling its subtree.
+export interface ReactivePropCell {
+  value: Record<string, unknown>;
+  source: Source;
+}
+
+// What a reactive-dom-block fiber stores in stateNode: the committed node and
+// its dispose, plus the prop cell when the block bridges component props.
+export interface ReactiveDomBlockState extends ReactiveDomBlockResult {
+  propCell?: ReactivePropCell | undefined;
+}
+
+export function createReactivePropCell(props: Record<string, unknown>): ReactivePropCell {
+  return { value: props, source: { subscribers: null } };
+}
+
+const PROP_PROXY_HANDLER: ProxyHandler<ReactivePropCell> = {
+  get(cell, property) {
+    trackSource(cell.source);
+    return cell.value[property as string];
+  },
+  has(cell, property) {
+    trackSource(cell.source);
+    return property in cell.value;
+  },
+  ownKeys(cell) {
+    trackSource(cell.source);
+    return Reflect.ownKeys(cell.value);
+  },
+  getOwnPropertyDescriptor(cell, property) {
+    trackSource(cell.source);
+    return Reflect.getOwnPropertyDescriptor(cell.value, property);
+  },
+};
+
+export function createReactivePropProxy<P extends object>(cell: ReactivePropCell): P {
+  return new Proxy(cell, PROP_PROXY_HANDLER) as unknown as P;
+}
+
+export function setReactivePropCell(
+  cell: ReactivePropCell,
+  next: Record<string, unknown>,
+): void {
+  if (Object.is(cell.value, next)) {
+    return;
+  }
+
+  cell.value = next;
+
+  if (cell.source.subscribers !== null) {
+    notifySubscribers(cell.source);
+    flushQueuedComputations();
+  }
+}

package/src/root.ts

@@ -35,6 +35,7 @@ import { commitFiberRoot, detachFiberRefs } from "./fiber-commit.js";
 import {
   canRenderHostFiber,
   commitHydratingHostFiberRoot,
+  disposeHostFiberResources,
   renderHydratingHostFiberRoot,
   renderHostFiberRoot,
 } from "./fiber-host.js";
@@ -132,6 +133,7 @@ export function createRoot(
       runtime.currentElement = undefined;
       runtime.dispose();
       detachFiberRefs(fiberRoot.current);
+      disposeHostFiberResources(fiberRoot.current);
       runtime.instances.clear();
       unmountDevToolsRoot(container);
       clearElementChildren(container);
@@ -164,7 +166,7 @@ function renderHostFiberIntoContainer(
 
       fiberRoot.finishedWork = finishedWork;
       commitFiberRoot(fiberRoot);
-      collectPortalNodes(fiberRoot.current, runtime);
+      collectPortalNodes(fiberRoot.current, runtime, portalSnapshot);
       removeStalePortalNodes(portalSnapshot, runtime);
       commitDevToolsRoot(container, fiberRoot);
       runtime.idMode = "client";
@@ -224,7 +226,7 @@ function renderHydratingHostFiberIntoContainer(
       fiberRoot.finishedWork = undefined;
       fiberRoot.workInProgress = undefined;
       fiberRoot.workInProgressRootRenderLanes = 0;
-      collectPortalNodes(fiberRoot.current, runtime);
+      collectPortalNodes(fiberRoot.current, runtime, portalSnapshot);
       removeStalePortalNodes(portalSnapshot, runtime);
       commitDevToolsRoot(container, fiberRoot);
       runtime.idMode = "client";
@@ -330,6 +332,7 @@ export function hydrateRoot(
       runtime.currentElement = undefined;
       runtime.dispose();
       detachFiberRefs(fiberRoot.current);
+      disposeHostFiberResources(fiberRoot.current);
       runtime.instances.clear();
       unmountDevToolsRoot(container);
       clearElementChildren(container);
@@ -472,8 +475,15 @@ function clearElementChildren(element: Element): void {
   }
 }
 
-function collectPortalNodes(fiber: Fiber | undefined, runtime: RootRuntime): void {
-  if (fiber === undefined || runtime.portalContainers.size === 0) {
+function collectPortalNodes(
+  fiber: Fiber | undefined,
+  runtime: RootRuntime,
+  snapshot: PortalRenderSnapshot,
+): void {
+  if (
+    fiber === undefined ||
+    (runtime.portalContainers.size === 0 && snapshot.containers.size === 0)
+  ) {
     return;
   }