@reckona/mreact-compat 0.0.139 → 0.0.141

package/package.json

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

package/src/dom-props.ts

@@ -1,14 +1,10 @@
 import {
   getAppliedProps,
   setAppliedProps,
-  type AppliedEventListener,
-  type AppliedProps,
-  ensureDelegatedEventListener,
-  toEventNames,
+  ensureDelegatedEventListenersForProp,
 } 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,
@@ -36,23 +32,19 @@ export function applyProps(
   if (previous === undefined && !preserveHydrationAttributes) {
     if (applyInitialRowProps(element, nextProps)) {
       setAppliedProps(element, {
-        attributeNames: collectAttributeNames(nextProps),
         props: nextProps,
       });
       return;
     }
 
-    const attributeNames = collectAttributeNames(nextProps);
+    applyInitialProps(element, nextProps, path, options);
     setAppliedProps(element, {
-      attributeNames,
       props: nextProps,
-      ...applyInitialProps(element, nextProps, path, options),
     });
     return;
   }
 
   const previousProps = previous?.props ?? {};
-  let listeners = previous?.listeners;
   const previousAttributeNames = previous?.attributeNames ?? collectAttributeNames(previousProps);
   const nextAttributeNames = collectAttributeNames(nextProps);
 
@@ -77,16 +69,6 @@ export function applyProps(
     }
   }
 
-  if (listeners !== undefined) {
-    for (const [name, appliedListener] of listeners) {
-      const nextValue = nextProps[name];
-
-      if (nextValue !== appliedListener.handler) {
-        listeners.delete(name);
-      }
-    }
-  }
-
   for (const name in nextProps) {
     if (!Object.prototype.hasOwnProperty.call(nextProps, name)) {
       continue;
@@ -98,7 +80,7 @@ export function applyProps(
       continue;
     }
 
-    if (applyFormValueProp(element, name, value, path, options)) {
+    if (isFormValuePropName(name) && applyFormValueProp(element, name, value, path, options)) {
       continue;
     }
 
@@ -117,21 +99,16 @@ 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 });
+      ensureDelegatedEventListenersForProp(options.eventRoot ?? element, name);
       continue;
     }
 
-    if (/^on/i.test(name)) {
+    if (isEventLikePropName(name)) {
       continue;
     }
 
@@ -183,7 +160,6 @@ export function applyProps(
   setAppliedProps(element, {
     attributeNames: nextAttributeNames,
     props: nextProps,
-    ...(listeners === undefined ? {} : { listeners }),
   });
 }
 
@@ -192,8 +168,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)) {
@@ -206,7 +182,7 @@ function applyInitialProps(
       continue;
     }
 
-    if (applyFormValueProp(element, name, value, path, options)) {
+    if (isFormValuePropName(name) && applyFormValueProp(element, name, value, path, options)) {
       continue;
     }
 
@@ -215,12 +191,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;
     }
 
@@ -229,29 +219,38 @@ function applyInitialProps(
       continue;
     }
 
-    if (/^on[A-Z]/.test(name) && typeof value === "function") {
-      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 });
+    if (isReactEventHandlerPropName(name) && typeof value === "function") {
+      ensureDelegatedEventListenersForProp(options.eventRoot ?? element, name);
       continue;
     }
 
-    if (/^on/i.test(name)) {
+    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;
     }
 
@@ -274,10 +273,16 @@ function applyInitialProps(
       continue;
     }
 
-    applyAttribute(element, attributeName, value, path, options);
+    applyInitialOrHydrationAttribute(
+      element,
+      attributeName,
+      value,
+      path,
+      options,
+      useAttributeFastPath,
+    );
   }
 
-  return listeners === undefined ? {} : { listeners };
 }
 
 function applyInitialRowProps(
@@ -361,7 +366,7 @@ function applyAttribute(
     return;
   }
 
-  if (/^on/i.test(name)) {
+  if (isEventLikePropName(name)) {
     if (element.hasAttribute(name) && !preserveHydrationAttributes) {
       element.removeAttribute(name);
     }
@@ -433,6 +438,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,
@@ -507,6 +555,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,
@@ -577,7 +634,7 @@ function collectAttributeNames(props: Record<string, unknown>): string[] {
       name === "children" ||
       name === "ref" ||
       name === "key" ||
-      /^on/i.test(name) ||
+      isEventLikePropName(name) ||
       value === null ||
       value === undefined
     ) {
@@ -616,11 +673,22 @@ function pushUniqueAttributeName(names: string[], name: string): void {
   }
 }
 
+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") {
+  if (element.tagName !== "META" && element.tagName !== "meta") {
     return props;
   }
 

package/src/element.ts

@@ -12,6 +12,9 @@ export const SuspenseList = Symbol.for("react.suspense_list");
 export const Activity = Symbol.for("react.activity");
 export const Profiler = Symbol.for("react.profiler");
 export const HOST_OWN_PROPS_META = Symbol.for("modular.react.host_own_props_meta");
+export const HOST_CHILDREN_ONLY_PROPS_META = Symbol.for(
+  "modular.react.host_children_only_props_meta",
+);
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 export interface ReactCompatProviderType {
@@ -271,12 +274,25 @@ function copyElementProps(
   base?: Record<string, unknown>,
   omitChildren = false,
 ): Record<string, unknown> {
-  const props: Record<string, unknown> = base === undefined ? {} : { ...base };
+  const props: Record<string, unknown> = {};
+
+  if (base !== undefined) {
+    copyOwnStringElementProps(base, props, omitChildren);
+  }
 
   if (source === null || source === undefined) {
     return props;
   }
 
+  copyOwnStringElementProps(source, props, omitChildren);
+  return props;
+}
+
+function copyOwnStringElementProps(
+  source: Record<string, unknown>,
+  target: Record<string, unknown>,
+  omitChildren: boolean,
+): void {
   for (const name in source) {
     if (!hasOwnProperty.call(source, name)) {
       continue;
@@ -289,11 +305,9 @@ function copyElementProps(
       name !== "__source" &&
       (!omitChildren || name !== "children")
     ) {
-      props[name] = source[name];
+      target[name] = source[name];
     }
   }
-
-  return props;
 }
 
 function normalizeElementType<P>(type: ElementType<P>): ElementType<P> {
@@ -351,6 +365,11 @@ function setHostOwnPropsMeta(props: Record<string, unknown>): void {
   const dataKey = props["data-key"];
 
   if (typeof dataKey !== "number" || !Number.isSafeInteger(dataKey) || dataKey < 0) {
+    if (hostPropsAreChildrenOnly(props)) {
+      (props as { [HOST_CHILDREN_ONLY_PROPS_META]?: true })[
+        HOST_CHILDREN_ONLY_PROPS_META
+      ] = true;
+    }
     return;
   }
 
@@ -402,6 +421,16 @@ function setHostOwnPropsMeta(props: Record<string, unknown>): void {
     dataKey * 4 + selectedState;
 }
 
+function hostPropsAreChildrenOnly(props: Record<string, unknown>): boolean {
+  for (const name in props) {
+    if (hasOwnProperty.call(props, name) && name !== "children") {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 export const isValidElement = isReactCompatElement;
 
 export const Children = {

package/src/event-listeners.ts

@@ -3,12 +3,9 @@ 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>();
 
@@ -24,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/events.ts

@@ -90,12 +90,109 @@ const nativeEventToReactProps = new Map<string, string[]>([
 ]);
 
 export function toEventNames(propName: string): string[] {
+  const eventNames: string[] = [];
+  forEachEventName(propName, (eventName) => {
+    eventNames.push(eventName);
+  });
+  return eventNames;
+}
+
+export function forEachEventName(
+  propName: string,
+  callback: (eventName: string) => void,
+): void {
+  const directEventName = directNativeEventName(propName);
+
+  if (directEventName !== undefined) {
+    callback(directEventName);
+    return;
+  }
+
+  const basePropName = toBaseEventPropName(propName);
+  const mappedEventNames = reactPropToNativeEvent.get(basePropName);
+
+  if (mappedEventNames === undefined) {
+    callback(basePropName.slice(2).toLowerCase());
+    return;
+  }
+
+  for (let index = 0; index < mappedEventNames.length; index += 1) {
+    callback(mappedEventNames[index]!);
+  }
+}
+
+export function ensureDelegatedEventListenersForProp(
+  root: Element,
+  propName: string,
+): void {
+  const directEventName = directNativeEventName(propName);
+
+  if (directEventName !== undefined) {
+    ensureDelegatedEventListener(root, directEventName);
+    return;
+  }
+
+  const basePropName = toBaseEventPropName(propName);
+  const mappedEventNames = reactPropToNativeEvent.get(basePropName);
+
+  if (mappedEventNames === undefined) {
+    ensureDelegatedEventListener(root, basePropName.slice(2).toLowerCase());
+    return;
+  }
+
+  for (let index = 0; index < mappedEventNames.length; index += 1) {
+    ensureDelegatedEventListener(root, mappedEventNames[index]!);
+  }
+}
+
+function directNativeEventName(propName: string): string | undefined {
+  switch (propName) {
+    case "onClick":
+    case "onClickCapture":
+      return "click";
+    case "onInput":
+    case "onInputCapture":
+      return "input";
+    case "onKeyDown":
+    case "onKeyDownCapture":
+      return "keydown";
+    case "onKeyUp":
+    case "onKeyUpCapture":
+      return "keyup";
+    case "onMouseDown":
+    case "onMouseDownCapture":
+      return "mousedown";
+    case "onMouseMove":
+    case "onMouseMoveCapture":
+      return "mousemove";
+    case "onMouseOut":
+    case "onMouseOutCapture":
+      return "mouseout";
+    case "onMouseOver":
+    case "onMouseOverCapture":
+      return "mouseover";
+    case "onMouseUp":
+    case "onMouseUpCapture":
+      return "mouseup";
+    case "onScroll":
+    case "onScrollCapture":
+      return "scroll";
+    case "onSubmit":
+    case "onSubmitCapture":
+      return "submit";
+    case "onWheel":
+    case "onWheelCapture":
+      return "wheel";
+    default:
+      return undefined;
+  }
+}
+
+function toBaseEventPropName(propName: string): string {
   const basePropName = propName.endsWith("Capture")
     ? propName.slice(0, -"Capture".length)
     : propName;
-  return reactPropToNativeEvent.get(basePropName) ?? [
-    basePropName.slice(2).toLowerCase(),
-  ];
+  return basePropName;
 }
 
 export function toEventPropNames(eventName: string): string[] {

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,