@reckona/mreact-compat 0.0.138 → 0.0.140

package/src/dom-props.ts

@@ -1,17 +1,16 @@
 import {
   getAppliedProps,
   setAppliedProps,
-  type AppliedEventListener,
-  type AppliedProps,
   ensureDelegatedEventListener,
   toEventNames,
 } from "./host-event-binder.js";
 import { HOST_OWN_PROPS_META } from "./element.js";
 import { reportRecoverable, type RenderOptions } from "./hydration.js";
-import type { SyntheticEvent } from "./event-types.js";
 import {
   isDangerousHtmlAttribute,
   isDangerousHtmlOptIn,
+  isSrcsetAttribute,
+  isUnsafeMetaRefreshContent,
   isUnsafeUrlAttribute,
   isUrlAttribute,
 } from "./url-safety.js";
@@ -29,28 +28,30 @@ export function applyProps(
 ): void {
   const preserveHydrationAttributes = options.preserveHydrationAttributes === true;
   const previous = getAppliedProps(element);
+  const nextProps = sanitizeMetaRefreshElementProps(element, props);
 
   if (previous === undefined && !preserveHydrationAttributes) {
-    if (applyInitialRowProps(element, props)) {
-      setAppliedProps(element, { props });
+    if (applyInitialRowProps(element, nextProps)) {
+      setAppliedProps(element, {
+        props: nextProps,
+      });
       return;
     }
 
+    applyInitialProps(element, nextProps, path, options);
     setAppliedProps(element, {
-      props,
-      ...applyInitialProps(element, props, path, options),
+      props: nextProps,
     });
     return;
   }
 
   const previousProps = previous?.props ?? {};
-  let listeners = previous?.listeners;
-  const previousAttributeNames = collectAttributeNames(previousProps);
-  const nextAttributeNames = collectAttributeNames(props);
+  const previousAttributeNames = previous?.attributeNames ?? collectAttributeNames(previousProps);
+  const nextAttributeNames = collectAttributeNames(nextProps);
 
   if (!preserveHydrationAttributes) {
     for (const attributeName of previousAttributeNames) {
-      if (!nextAttributeNames.has(attributeName)) {
+      if (!nextAttributeNames.includes(attributeName)) {
         if (attributeName === "style") {
           removePreviousStyle(element, previousProps.style, path, options);
           continue;
@@ -69,22 +70,18 @@ export function applyProps(
     }
   }
 
-  if (listeners !== undefined) {
-    for (const [name, appliedListener] of listeners) {
-      const nextValue = props[name];
-
-      if (nextValue !== appliedListener.handler) {
-        listeners.delete(name);
-      }
+  for (const name in nextProps) {
+    if (!Object.prototype.hasOwnProperty.call(nextProps, name)) {
+      continue;
     }
-  }
 
-  for (const [name, value] of Object.entries(props)) {
+    const value = nextProps[name];
+
     if (name === "children" || name === "ref" || name === "key") {
       continue;
     }
 
-    if (applyFormValueProp(element, name, value, path, options)) {
+    if (isFormValuePropName(name) && applyFormValueProp(element, name, value, path, options)) {
       continue;
     }
 
@@ -103,17 +100,18 @@ export function applyProps(
       continue;
     }
 
-    if (/^on[A-Z]/.test(name) && typeof value === "function") {
-      if (listeners?.get(name)?.handler === value) {
+    if (isReactEventHandlerPropName(name) && typeof value === "function") {
+      if (previousProps[name] === value) {
         continue;
       }
 
-      const handler = value as (event: SyntheticEvent) => void;
       for (const eventName of toEventNames(name)) {
         ensureDelegatedEventListener(options.eventRoot ?? element, eventName);
       }
-      listeners ??= new Map<string, AppliedEventListener>();
-      listeners.set(name, { handler });
+      continue;
+    }
+
+    if (isEventLikePropName(name)) {
       continue;
     }
 
@@ -163,8 +161,8 @@ export function applyProps(
   }
 
   setAppliedProps(element, {
-    props,
-    ...(listeners === undefined ? {} : { listeners }),
+    attributeNames: nextAttributeNames,
+    props: nextProps,
   });
 }
 
@@ -173,8 +171,8 @@ function applyInitialProps(
   props: Record<string, unknown>,
   path: string,
   options: RenderOptions,
-): Pick<AppliedProps, "listeners"> | {} {
-  let listeners: Map<string, AppliedEventListener> | undefined;
+): void {
+  const useAttributeFastPath = options.hydration === undefined;
 
   for (const name in props) {
     if (!Object.prototype.hasOwnProperty.call(props, name)) {
@@ -187,7 +185,7 @@ function applyInitialProps(
       continue;
     }
 
-    if (applyFormValueProp(element, name, value, path, options)) {
+    if (isFormValuePropName(name) && applyFormValueProp(element, name, value, path, options)) {
       continue;
     }
 
@@ -196,12 +194,26 @@ function applyInitialProps(
     }
 
     if (name === "className") {
-      applyAttribute(element, "class", value, path, options);
+      applyInitialOrHydrationAttribute(
+        element,
+        "class",
+        value,
+        path,
+        options,
+        useAttributeFastPath,
+      );
       continue;
     }
 
     if (name === "htmlFor") {
-      applyAttribute(element, "for", value, path, options);
+      applyInitialOrHydrationAttribute(
+        element,
+        "for",
+        value,
+        path,
+        options,
+        useAttributeFastPath,
+      );
       continue;
     }
 
@@ -210,25 +222,40 @@ function applyInitialProps(
       continue;
     }
 
-    if (/^on[A-Z]/.test(name) && typeof value === "function") {
-      const handler = value as (event: SyntheticEvent) => void;
+    if (isReactEventHandlerPropName(name) && typeof value === "function") {
       for (const eventName of toEventNames(name)) {
         ensureDelegatedEventListener(options.eventRoot ?? element, eventName);
       }
-      listeners ??= new Map<string, AppliedEventListener>();
-      listeners.set(name, { handler });
+      continue;
+    }
+
+    if (isEventLikePropName(name)) {
       continue;
     }
 
     const attributeName = toDomAttributeName(name);
 
     if (typeof value === "boolean" && isBooleanishStringAttribute(attributeName)) {
-      applyAttribute(element, attributeName, value ? "true" : "false", path, options);
+      applyInitialOrHydrationAttribute(
+        element,
+        attributeName,
+        value ? "true" : "false",
+        path,
+        options,
+        useAttributeFastPath,
+      );
       continue;
     }
 
     if (typeof value === "boolean" && isDataAttribute(attributeName)) {
-      applyAttribute(element, attributeName, value ? "true" : "false", path, options);
+      applyInitialOrHydrationAttribute(
+        element,
+        attributeName,
+        value ? "true" : "false",
+        path,
+        options,
+        useAttributeFastPath,
+      );
       continue;
     }
 
@@ -251,10 +278,16 @@ function applyInitialProps(
       continue;
     }
 
-    applyAttribute(element, attributeName, value, path, options);
+    applyInitialOrHydrationAttribute(
+      element,
+      attributeName,
+      value,
+      path,
+      options,
+      useAttributeFastPath,
+    );
   }
 
-  return listeners === undefined ? {} : { listeners };
 }
 
 function applyInitialRowProps(
@@ -338,6 +371,13 @@ function applyAttribute(
     return;
   }
 
+  if (isEventLikePropName(name)) {
+    if (element.hasAttribute(name) && !preserveHydrationAttributes) {
+      element.removeAttribute(name);
+    }
+    return;
+  }
+
   if (value === null || value === undefined || value === false) {
     if (element.hasAttribute(name) && !preserveHydrationAttributes) {
       reportRecoverable(
@@ -363,7 +403,10 @@ function applyAttribute(
   // value is unsafe we treat it as if it were null -- remove the
   // existing attribute, log a recoverable mismatch, and stop. This
   // matches react-dom's sanitizeURL posture.
-  if (isUrlAttribute(name) && isUnsafeUrlAttribute(name, stringValue)) {
+  if (
+    (isUrlAttribute(name) || isSrcsetAttribute(name)) &&
+    isUnsafeUrlAttribute(name, stringValue)
+  ) {
     if (element.hasAttribute(name) && !preserveHydrationAttributes) {
       reportRecoverable(
         options,
@@ -400,6 +443,49 @@ function applyAttribute(
   element.setAttribute(name, stringValue);
 }
 
+function applyInitialAttribute(
+  element: Element,
+  name: string,
+  value: unknown,
+): void {
+  if (isDangerousHtmlAttribute(name) && !isDangerousHtmlOptIn(value)) {
+    return;
+  }
+
+  if (isEventLikePropName(name) || value === null || value === undefined || value === false) {
+    return;
+  }
+
+  const stringValue = isDangerousHtmlOptIn(value)
+    ? (value as { __html: string }).__html
+    : String(value);
+
+  if (
+    (isUrlAttribute(name) || isSrcsetAttribute(name)) &&
+    isUnsafeUrlAttribute(name, stringValue)
+  ) {
+    return;
+  }
+
+  element.setAttribute(name, stringValue);
+}
+
+function applyInitialOrHydrationAttribute(
+  element: Element,
+  name: string,
+  value: unknown,
+  path: string,
+  options: RenderOptions,
+  useFastPath: boolean,
+): void {
+  if (useFastPath) {
+    applyInitialAttribute(element, name, value);
+    return;
+  }
+
+  applyAttribute(element, name, value, path, options);
+}
+
 function applyFormValueProp(
   element: Element,
   name: string,
@@ -474,6 +560,15 @@ function applyFormValueProp(
   return false;
 }
 
+function isFormValuePropName(name: string): boolean {
+  return (
+    name === "value" ||
+    name === "defaultValue" ||
+    name === "checked" ||
+    name === "defaultChecked"
+  );
+}
+
 function applyStyle(
   element: HostElement,
   previousStyle: unknown,
@@ -530,15 +625,21 @@ function removePreviousStyle(
   }
 }
 
-function collectAttributeNames(props: Record<string, unknown>): Set<string> {
-  const names = new Set<string>();
+function collectAttributeNames(props: Record<string, unknown>): string[] {
+  const names: string[] = [];
+
+  for (const name in props) {
+    if (!Object.prototype.hasOwnProperty.call(props, name)) {
+      continue;
+    }
+
+    const value = props[name];
 
-  for (const [name, value] of Object.entries(props)) {
     if (
       name === "children" ||
       name === "ref" ||
       name === "key" ||
-      /^on[A-Z]/.test(name) ||
+      isEventLikePropName(name) ||
       value === null ||
       value === undefined
     ) {
@@ -556,21 +657,60 @@ function collectAttributeNames(props: Record<string, unknown>): Set<string> {
     }
 
     if (name === "defaultValue") {
-      names.add("value");
+      pushUniqueAttributeName(names, "value");
       continue;
     }
 
     if (name === "defaultChecked") {
-      names.add("checked");
+      pushUniqueAttributeName(names, "checked");
       continue;
     }
 
-    names.add(attributeName);
+    pushUniqueAttributeName(names, attributeName);
   }
 
   return names;
 }
 
+function pushUniqueAttributeName(names: string[], name: string): void {
+  if (!names.includes(name)) {
+    names.push(name);
+  }
+}
+
+function isReactEventHandlerPropName(name: string): boolean {
+  const third = name.charCodeAt(2);
+  return name.charCodeAt(0) === 111 && name.charCodeAt(1) === 110 && third >= 65 && third <= 90;
+}
+
+function isEventLikePropName(name: string): boolean {
+  const first = name.charCodeAt(0);
+  const second = name.charCodeAt(1);
+  return (first === 111 || first === 79) && (second === 110 || second === 78);
+}
+
+function sanitizeMetaRefreshElementProps(
+  element: Element,
+  props: Record<string, unknown>,
+): Record<string, unknown> {
+  if (element.tagName.toLowerCase() !== "meta") {
+    return props;
+  }
+
+  const httpEquiv = props["http-equiv"] ?? props.httpEquiv ?? element.getAttribute("http-equiv");
+  const content = props.content;
+  if (typeof httpEquiv !== "string" || typeof content !== "string") {
+    return props;
+  }
+  if (!isUnsafeMetaRefreshContent(httpEquiv, content)) {
+    return props;
+  }
+
+  const sanitized = { ...props };
+  delete sanitized.content;
+  return sanitized;
+}
+
 function isBooleanishStringAttribute(name: string): boolean {
   const attributeName = toDomAttributeName(name).toLowerCase();
   return attributeName.startsWith("aria-") || BOOLEANISH_STRING_ATTRIBUTES.has(attributeName);

package/src/element.ts

@@ -120,6 +120,43 @@ export function createElement<P extends Record<string, unknown>>(
   };
 }
 
+export function createElementFromJsxConfig<P extends Record<string, unknown>>(
+  type: ElementType<P>,
+  config: (P & ReactReservedProps & { children?: ReactCompatNode }) | null,
+  keyArgument?: unknown,
+): ReactCompatElement<P> {
+  const normalizedType =
+    typeof type === "object" && type !== null ? normalizeElementType(type) : type;
+  const key = keyArgument !== undefined
+    ? String(keyArgument)
+    : config?.key === undefined ? null : String(config.key);
+  const ref = config?.ref ?? null;
+  const hasChildren = config !== null && config !== undefined && hasOwnProperty.call(config, "children");
+  const children = config?.children;
+  const copiedProps = copyElementProps(config, undefined, true);
+  const props = (typeof normalizedType === "string"
+    ? copiedProps
+    : applyDefaultProps(normalizedType, copiedProps)) as P & {
+      children?: ReactCompatNode;
+    };
+
+  if (hasChildren) {
+    props.children = children;
+  }
+
+  if (typeof normalizedType === "string") {
+    setHostOwnPropsMeta(props);
+  }
+
+  return {
+    $$typeof: REACT_COMPAT_ELEMENT_TYPE,
+    type: normalizedType as ElementType<P>,
+    key,
+    ref,
+    props,
+  };
+}
+
 export function isReactCompatElement(
   value: unknown,
 ): value is ReactCompatElement {
@@ -232,6 +269,7 @@ export function cloneElement<P extends Record<string, unknown>>(
 function copyElementProps(
   source: Record<string, unknown> | null | undefined,
   base?: Record<string, unknown>,
+  omitChildren = false,
 ): Record<string, unknown> {
   const props: Record<string, unknown> = base === undefined ? {} : { ...base };
 
@@ -244,7 +282,13 @@ function copyElementProps(
       continue;
     }
 
-    if (name !== "key" && name !== "ref" && name !== "__self" && name !== "__source") {
+    if (
+      name !== "key" &&
+      name !== "ref" &&
+      name !== "__self" &&
+      name !== "__source" &&
+      (!omitChildren || name !== "children")
+    ) {
       props[name] = source[name];
     }
   }

package/src/event-listeners.ts

@@ -1,13 +1,11 @@
 import type { SyntheticEvent } from "./event-types.js";
 
 export interface AppliedProps {
+  attributeNames?: string[];
   props: Record<string, unknown>;
-  listeners?: Map<string, AppliedEventListener>;
 }
 
-export interface AppliedEventListener {
-  handler: (event: SyntheticEvent) => void;
-}
+export type AppliedEventListener = (event: SyntheticEvent) => void;
 
 const appliedProps = new WeakMap<Element, AppliedProps>();
 
@@ -23,5 +21,6 @@ export function getAppliedEventHandler(
   element: Element,
   name: string,
 ): ((event: SyntheticEvent) => void) | undefined {
-  return appliedProps.get(element)?.listeners?.get(name)?.handler;
+  const handler = appliedProps.get(element)?.props[name];
+  return typeof handler === "function" ? (handler as (event: SyntheticEvent) => void) : undefined;
 }

package/src/fiber-child.ts

@@ -27,6 +27,16 @@ export function reconcileChildFibers(
   newChildren: ReactCompatNode,
 ): Fiber | undefined {
   const children = normalizeChildren(newChildren);
+  const orderedKeyedChildren = reconcileSameKeyOrderChildren(
+    parent,
+    currentFirstChild,
+    children,
+  );
+
+  if (orderedKeyedChildren !== undefined) {
+    return orderedKeyedChildren;
+  }
+
   const keyed = collectKeyedChildren(currentFirstChild);
   const oldIndexes = collectChildIndexes(currentFirstChild);
   const used = new Set<Fiber>();
@@ -86,6 +96,63 @@ export function reconcileChildFibers(
   return first;
 }
 
+function reconcileSameKeyOrderChildren(
+  parent: Fiber,
+  currentFirstChild: Fiber | undefined,
+  children: readonly ReactCompatNode[],
+): Fiber | undefined {
+  if (currentFirstChild === undefined || children.length === 0) {
+    return undefined;
+  }
+
+  let cursor: Fiber | undefined = currentFirstChild;
+
+  for (const child of children) {
+    const key = getNodeKey(child);
+
+    if (
+      key === undefined ||
+      cursor === undefined ||
+      cursor.key !== key ||
+      !isReactCompatElement(child) ||
+      !canReuseElementFiber(cursor, child)
+    ) {
+      return undefined;
+    }
+
+    cursor = cursor.sibling;
+  }
+
+  if (cursor !== undefined) {
+    return undefined;
+  }
+
+  cursor = currentFirstChild;
+  let first: Fiber | undefined;
+  let previous: Fiber | undefined;
+
+  for (const child of children) {
+    const key = getNodeKey(child) as string;
+    const fiber = reconcileSingleChild(parent, cursor, child, key) as Fiber;
+
+    fiber.lanes |= parent.lanes;
+    fiber.return = parent;
+    fiber.sibling = undefined;
+
+    if (first === undefined) {
+      first = fiber;
+    } else if (previous !== undefined) {
+      previous.sibling = fiber;
+    }
+
+    previous = fiber;
+    cursor = cursor?.sibling;
+  }
+
+  parent.child = first;
+  return first;
+}
+
 function reconcileSingleChild(
   parent: Fiber,
   current: Fiber | undefined,

package/src/fiber-commit.ts

@@ -29,6 +29,9 @@ export function commitFiberRoot(
     });
   }
   commitHostFiberRoot(root, finishedWork, options);
+  if (hasRemovedAlternateChildren(finishedWork)) {
+    detachRemovedAlternateChildren(finishedWork);
+  }
   root.current = finishedWork;
   root.current.stateNode = root;
   markRootFinished(root, finishedWork.lanes);
@@ -44,6 +47,95 @@ export function detachFiberRefs(fiber: Fiber): void {
   }
 }
 
+function detachRemovedAlternateChildren(fiber: Fiber | undefined): void {
+  let cursor: Fiber | undefined = fiber;
+
+  while (cursor !== undefined) {
+    const retained = collectRetainedAlternateChildren(cursor.child);
+    let alternateChild = cursor.alternate?.child;
+
+    while (alternateChild !== undefined) {
+      const nextAlternateChild = alternateChild.sibling;
+
+      if (!retained.has(alternateChild)) {
+        detachFiberSubtree(alternateChild, retained);
+      }
+
+      alternateChild = nextAlternateChild;
+    }
+
+    if (cursor.deletions !== undefined) {
+      for (const deleted of cursor.deletions) {
+        detachFiberSubtree(deleted, retained);
+      }
+      cursor.deletions = undefined;
+    }
+
+    detachRemovedAlternateChildren(cursor.child);
+    cursor = cursor.sibling;
+  }
+}
+
+function hasRemovedAlternateChildren(fiber: Fiber): boolean {
+  return (
+    fiber.childListChanged ||
+    fiber.subtreeChildListChanged ||
+    fiber.deletions !== undefined
+  );
+}
+
+function collectRetainedAlternateChildren(fiber: Fiber | undefined): Set<Fiber> {
+  const retained = new Set<Fiber>();
+  let cursor = fiber;
+
+  while (cursor !== undefined) {
+    retained.add(cursor);
+
+    if (cursor.alternate !== undefined) {
+      retained.add(cursor.alternate);
+    }
+
+    cursor = cursor.sibling;
+  }
+
+  return retained;
+}
+
+function detachFiberSubtree(fiber: Fiber, preserve: ReadonlySet<Fiber>): void {
+  const stack = [fiber];
+  const seen = new Set<Fiber>();
+
+  while (stack.length > 0) {
+    const current = stack.pop();
+
+    if (current === undefined || seen.has(current) || preserve.has(current)) {
+      continue;
+    }
+
+    seen.add(current);
+
+    let child = current.child;
+    while (child !== undefined) {
+      stack.push(child);
+      child = child.sibling;
+    }
+
+    if (current.alternate !== undefined) {
+      stack.push(current.alternate);
+    }
+
+    current.return = undefined;
+    current.child = undefined;
+    current.sibling = undefined;
+    current.alternate = undefined;
+    current.pendingProps = undefined;
+    current.memoizedProps = undefined;
+    current.memoizedState = undefined;
+    current.stateNode = undefined;
+    current.deletions = undefined;
+  }
+}
+
 function cleanupDeletedRefs(previous: Fiber, next: Fiber): void {
   const nextRefs = new Set<unknown>();