@reckona/mreact-compat 0.0.162 → 0.0.164

package/package.json

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

package/src/dom-props.ts

@@ -283,6 +283,10 @@ export function applyPostChildFormProps(
   props: Record<string, unknown>,
   previousProps?: Record<string, unknown>,
 ): void {
+  if (!isPostChildFormElement(element)) {
+    return;
+  }
+
   if (element instanceof HTMLInputElement) {
     if (hasOwnProp(props, "checked")) {
       const checked = props.checked !== null && props.checked !== undefined && props.checked !== false;
@@ -322,6 +326,16 @@ export function applyPostChildFormProps(
   }
 }
 
+function isPostChildFormElement(
+  element: Element,
+): element is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
+  return (
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement ||
+    element instanceof HTMLSelectElement
+  );
+}
+
 function postChildFormValue(
   props: Record<string, unknown>,
   previousProps: Record<string, unknown> | undefined,

package/src/event-types.ts

@@ -9,12 +9,21 @@ export interface SyntheticEvent {
   type: string;
   target: EventTarget | null;
   currentTarget: EventTarget | null;
+  pointerId?: number;
+  pointerType?: string;
+  isPrimary?: boolean;
   clientX?: number;
   clientY?: number;
   pageX?: number;
   pageY?: number;
   screenX?: number;
   screenY?: number;
+  button?: number;
+  buttons?: number;
+  ctrlKey?: boolean;
+  shiftKey?: boolean;
+  altKey?: boolean;
+  metaKey?: boolean;
   relatedTarget?: EventTarget | null;
   touches?: TouchList;
   changedTouches?: TouchList;

package/src/events.ts

@@ -99,10 +99,7 @@ export function toEventNames(propName: string): string[] {
   return eventNames;
 }
 
-export function forEachEventName(
-  propName: string,
-  callback: (eventName: string) => void,
-): void {
+export function forEachEventName(propName: string, callback: (eventName: string) => void): void {
   const directEventName = directNativeEventName(propName);
 
   if (directEventName !== undefined) {
@@ -123,10 +120,7 @@ export function forEachEventName(
   }
 }
 
-export function ensureDelegatedEventListenersForProp(
-  root: Element,
-  propName: string,
-): void {
+export function ensureDelegatedEventListenersForProp(root: Element, propName: string): void {
   const directEventName = directNativeEventName(propName);
 
   if (directEventName !== undefined) {
@@ -206,16 +200,11 @@ export function toEventPropNames(eventName: string): string[] {
   return [propName];
 }
 
-export function setLogicalEventParent(
-  container: Element,
-  parent: ParentNode,
-): void {
+export function setLogicalEventParent(container: Element, parent: ParentNode): void {
   logicalEventParents.set(container, parent);
 }
 
-export function getEventPriority(
-  eventName: string,
-): "discrete" | "continuous" | "default" {
+export function getEventPriority(eventName: string): "discrete" | "continuous" | "default" {
   if (discreteEventNames.has(eventName)) {
     return "discrete";
   }
@@ -263,10 +252,7 @@ const continuousEventNames = new Set([
   "wheel",
 ]);
 
-export function ensureDelegatedEventListener(
-  root: Element,
-  eventName: string,
-): void {
+export function ensureDelegatedEventListener(root: Element, eventName: string): void {
   const listeners = delegatedRootListeners.get(root) ?? new Set<string>();
 
   if (listeners.has(eventName)) {
@@ -296,11 +282,7 @@ function markDispatchedDelegatedEvent(event: Event, eventName: string): void {
   dispatchedDelegatedEvents.set(event, events);
 }
 
-function dispatchDelegatedEvent(
-  root: Element,
-  eventName: string,
-  event: Event,
-): void {
+function dispatchDelegatedEvent(root: Element, eventName: string, event: Event): void {
   const path = getEventPath(root, event);
   const propNames = toEventPropNames(eventName);
   const state = {
@@ -393,11 +375,7 @@ function dispatchEventPropNames(
   state: { defaultPrevented: boolean; propagationStopped: boolean },
 ): void {
   for (const propName of propNames) {
-    if (
-      propName === "onChange" &&
-      event.type === "change" &&
-      isTextInputChangeTarget(target)
-    ) {
+    if (propName === "onChange" && event.type === "change" && isTextInputChangeTarget(target)) {
       continue;
     }
 
@@ -458,9 +436,7 @@ function dispatchMouseTransitionEvent(
 
 function isInternalMouseTransition(event: Event, target: Element): boolean {
   const relatedTarget =
-    event instanceof MouseEvent && event.relatedTarget instanceof Node
-      ? event.relatedTarget
-      : null;
+    event instanceof MouseEvent && event.relatedTarget instanceof Node ? event.relatedTarget : null;
 
   return relatedTarget !== null && target.contains(relatedTarget);
 }
@@ -505,6 +481,10 @@ function createSyntheticEvent(
   syntheticType = nativeEvent.type,
 ): SyntheticEvent {
   const mouseEvent = nativeEvent instanceof MouseEvent ? nativeEvent : undefined;
+  const pointerEvent =
+    "pointerId" in nativeEvent || "pointerType" in nativeEvent
+      ? (nativeEvent as PointerEvent)
+      : undefined;
   const touchEvent = nativeEvent instanceof TouchEvent ? nativeEvent : undefined;
   const keyboardEvent = nativeEvent instanceof KeyboardEvent ? nativeEvent : undefined;
 
@@ -530,8 +510,21 @@ function createSyntheticEvent(
           pageY: mouseEvent.pageY,
           screenX: mouseEvent.screenX,
           screenY: mouseEvent.screenY,
+          button: mouseEvent.button,
+          buttons: mouseEvent.buttons,
+          ctrlKey: mouseEvent.ctrlKey,
+          shiftKey: mouseEvent.shiftKey,
+          altKey: mouseEvent.altKey,
+          metaKey: mouseEvent.metaKey,
           relatedTarget: mouseEvent.relatedTarget,
         }),
+    ...(pointerEvent === undefined
+      ? {}
+      : {
+          pointerId: pointerEvent.pointerId,
+          pointerType: pointerEvent.pointerType,
+          isPrimary: pointerEvent.isPrimary,
+        }),
     ...(touchEvent === undefined
       ? {}
       : {

package/src/fiber-child.ts

@@ -106,13 +106,17 @@ function reconcileSameKeyOrderChildren(
   }
 
   let cursor: Fiber | undefined = currentFirstChild;
+  let matchedCount = 0;
 
   for (const child of children) {
+    if (cursor === undefined) {
+      break;
+    }
+
     const key = getNodeKey(child);
 
     if (
       key === undefined ||
-      cursor === undefined ||
       cursor.key !== key ||
       !isReactCompatElement(child) ||
       !canReuseElementFiber(cursor, child)
@@ -121,9 +125,10 @@ function reconcileSameKeyOrderChildren(
     }
 
     cursor = cursor.sibling;
+    matchedCount += 1;
   }
 
-  if (cursor !== undefined) {
+  if (matchedCount === 0 || cursor !== undefined) {
     return undefined;
   }
 
@@ -131,9 +136,11 @@ function reconcileSameKeyOrderChildren(
   let first: Fiber | undefined;
   let previous: Fiber | undefined;
 
-  for (const child of children) {
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index] as ReactCompatNode;
     const key = getNodeKey(child) as string;
-    const fiber = reconcileSingleChild(parent, cursor, child, key) as Fiber;
+    const matchedCurrent: Fiber | undefined = index < matchedCount ? cursor : undefined;
+    const fiber = reconcileSingleChild(parent, matchedCurrent, child, key) as Fiber;
 
     fiber.lanes |= parent.lanes;
     fiber.return = parent;
@@ -146,7 +153,7 @@ function reconcileSameKeyOrderChildren(
     }
 
     previous = fiber;
-    cursor = cursor?.sibling;
+    cursor = matchedCurrent?.sibling;
   }
 
   parent.child = first;

package/src/host-reconciler.ts

@@ -435,10 +435,7 @@ function reconcileKeyedRowHostChildren(
   let subtreeFlags = NoFlags;
   let subtreeChildListChanged = false;
   let hasRefSubtree = false;
-  const currentSiblingCount = countFiberSiblings(currentFirstChild);
-  const canReuseUnchangedRows =
-    currentSiblingCount === children.length ||
-    isKeyedAppendOnly(currentFirstChild, children, currentSiblingCount);
+  const canReuseUnchangedRows = hasSameKeyOrderPrefix(currentFirstChild, children);
   const row = createKeyedRowHostElementScratch();
 
   for (let index = 0; index < children.length; index += 1) {
@@ -514,33 +511,21 @@ function reconcileKeyedRowHostChildren(
   return { fiber: first, consumed: 0 };
 }
 
-function countFiberSiblings(first: Fiber): number {
-  let count = 0;
-  let cursor: Fiber | undefined = first;
-
-  while (cursor !== undefined) {
-    count += 1;
-    cursor = cursor.sibling;
-  }
-
-  return count;
-}
-
-function isKeyedAppendOnly(
+function hasSameKeyOrderPrefix(
   currentFirstChild: Fiber,
   children: readonly ReactCompatNode[],
-  currentSiblingCount: number,
 ): boolean {
-  if (children.length <= currentSiblingCount) {
-    return false;
-  }
-
   let current: Fiber | undefined = currentFirstChild;
 
-  for (let index = 0; index < currentSiblingCount; index += 1) {
-    if (current === undefined || current.key !== getNodeKey(children[index])) {
+  for (let index = 0; index < children.length; index += 1) {
+    if (current === undefined) {
+      return true;
+    }
+
+    if (current.key !== getNodeKey(children[index])) {
       return false;
     }
+
     current = current.sibling;
   }