@reckona/mreact-compat 0.0.140 → 0.0.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-compat",
-  "version": "0.0.140",
+  "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.140",
-    "@reckona/mreact-shared": "0.0.140"
+    "@reckona/mreact-reactive-core": "0.0.141",
+    "@reckona/mreact-shared": "0.0.141"
   }
 }

package/src/dom-props.ts

@@ -1,8 +1,7 @@
 import {
   getAppliedProps,
   setAppliedProps,
-  ensureDelegatedEventListener,
-  toEventNames,
+  ensureDelegatedEventListenersForProp,
 } from "./host-event-binder.js";
 import { HOST_OWN_PROPS_META } from "./element.js";
 import { reportRecoverable, type RenderOptions } from "./hydration.js";
@@ -105,9 +104,7 @@ export function applyProps(
         continue;
       }
 
-      for (const eventName of toEventNames(name)) {
-        ensureDelegatedEventListener(options.eventRoot ?? element, eventName);
-      }
+      ensureDelegatedEventListenersForProp(options.eventRoot ?? element, name);
       continue;
     }
 
@@ -223,9 +220,7 @@ function applyInitialProps(
     }
 
     if (isReactEventHandlerPropName(name) && typeof value === "function") {
-      for (const eventName of toEventNames(name)) {
-        ensureDelegatedEventListener(options.eventRoot ?? element, eventName);
-      }
+      ensureDelegatedEventListenersForProp(options.eventRoot ?? element, name);
       continue;
     }
 
@@ -693,7 +688,7 @@ 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/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/host-event-binder.ts

@@ -7,6 +7,8 @@ export {
 } from "./event-listeners.js";
 export {
   ensureDelegatedEventListener,
+  ensureDelegatedEventListenersForProp,
+  forEachEventName,
   getEventPriority,
   setLogicalEventParent,
   toEventNames,

package/src/host-reconciler.ts

@@ -3,6 +3,7 @@ import {
   ERROR_BOUNDARY_TYPE,
   FORWARD_REF_TYPE,
   Fragment,
+  HOST_CHILDREN_ONLY_PROPS_META,
   HOST_OWN_PROPS_META,
   LAZY_TYPE,
   MEMO_TYPE,
@@ -1621,13 +1622,23 @@ function commitHostDirtyFiber(
 
     const props = fiber.pendingProps as Record<string, unknown>;
     const previousProps = fiber.memoizedProps as Record<string, unknown> | undefined;
+    const directTextChild =
+      fiber.child === undefined && fiber.hydrateExisting !== true
+        ? getDirectHostTextChild(props.children)
+        : undefined;
+    const textOnlyChildrenUpdate =
+      directTextChild !== undefined &&
+      hostPropsAreKnownChildrenOnly(fiber.memoizedProps) &&
+      hostPropsAreKnownChildrenOnly(props);
     const propsAreUnchanged =
       fiber.hydrateExisting !== true &&
+      !textOnlyChildrenUpdate &&
       hostPropsEqual(fiber.memoizedProps, props);
     const propsAreChildrenOnly =
-      fiber.hydrateExisting !== true &&
-      hostPropsAreChildrenOnly(fiber.memoizedProps) &&
-      hostPropsAreChildrenOnly(props);
+      textOnlyChildrenUpdate ||
+      (fiber.hydrateExisting !== true &&
+        hostPropsAreChildrenOnly(fiber.memoizedProps) &&
+        hostPropsAreChildrenOnly(props));
     const textOnlyRowUpdate =
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
@@ -1641,11 +1652,6 @@ function commitHostDirtyFiber(
       applyChangedRef(previousProps?.ref, props.ref, element);
     }
 
-    const directTextChild =
-      fiber.child === undefined && fiber.hydrateExisting !== true
-        ? getDirectHostTextChild(props.children)
-        : undefined;
-
     if (directTextChild !== undefined) {
       syncDirectHostTextChild(element, directTextChild);
     } else if (fiber.subtreeFlags !== NoFlags) {
@@ -2007,13 +2013,23 @@ function commitHostFiber(
 
     const props = fiber.pendingProps as Record<string, unknown>;
     const previousProps = fiber.memoizedProps as Record<string, unknown> | undefined;
+    const directTextChild =
+      fiber.child === undefined && fiber.hydrateExisting !== true
+        ? getDirectHostTextChild(props.children)
+        : undefined;
+    const textOnlyChildrenUpdate =
+      directTextChild !== undefined &&
+      hostPropsAreKnownChildrenOnly(fiber.memoizedProps) &&
+      hostPropsAreKnownChildrenOnly(props);
     const propsAreUnchanged =
       fiber.hydrateExisting !== true &&
+      !textOnlyChildrenUpdate &&
       hostPropsEqual(fiber.memoizedProps, props);
     const propsAreChildrenOnly =
-      fiber.hydrateExisting !== true &&
-      hostPropsAreChildrenOnly(fiber.memoizedProps) &&
-      hostPropsAreChildrenOnly(props);
+      textOnlyChildrenUpdate ||
+      (fiber.hydrateExisting !== true &&
+        hostPropsAreChildrenOnly(fiber.memoizedProps) &&
+        hostPropsAreChildrenOnly(props));
     const textOnlyRowUpdate =
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
@@ -2026,11 +2042,6 @@ function commitHostFiber(
       });
       applyChangedRef(previousProps?.ref, props.ref, element);
     }
-    const directTextChild =
-      fiber.child === undefined && fiber.hydrateExisting !== true
-        ? getDirectHostTextChild(props.children)
-        : undefined;
-
     if (directTextChild !== undefined) {
       syncDirectHostTextChild(element, directTextChild);
     } else if (
@@ -2352,6 +2363,16 @@ function hostPropsAreChildrenOnly(props: unknown): boolean {
   return true;
 }
 
+function hostPropsAreKnownChildrenOnly(props: unknown): boolean {
+  return (
+    typeof props === "object" &&
+    props !== null &&
+    (props as { [HOST_CHILDREN_ONLY_PROPS_META]?: true })[
+      HOST_CHILDREN_ONLY_PROPS_META
+    ] === true
+  );
+}
+
 function isRowTextOnlyUpdate(previous: unknown, next: Record<string, unknown>): boolean {
   if (typeof previous !== "object" || previous === null) {
     return false;