@reckona/mreact-compat 0.0.90 → 0.0.92

package/src/element.ts

@@ -1,16 +1,18 @@
-export const REACT_COMPAT_ELEMENT_TYPE = Symbol.for("modular.react.element");
+export const REACT_COMPAT_ELEMENT_TYPE = Symbol.for("react.transitional.element");
 export const ERROR_BOUNDARY_TYPE = Symbol.for("modular.react.error_boundary");
-export const FORWARD_REF_TYPE = Symbol.for("modular.react.forward_ref");
-export const MEMO_TYPE = Symbol.for("modular.react.memo");
-export const LAZY_TYPE = Symbol.for("modular.react.lazy");
-export const STRICT_MODE_TYPE = Symbol.for("modular.react.strict_mode");
-export const PORTAL_TYPE = Symbol.for("modular.react.portal");
-const REACT_COMPAT_PROVIDER_TYPE = Symbol.for("modular.react.provider");
-export const Fragment = Symbol.for("modular.react.fragment");
-export const Suspense = Symbol.for("modular.react.suspense");
-export const SuspenseList = Symbol.for("modular.react.suspense_list");
-export const Activity = Symbol.for("modular.react.activity");
-export const Profiler = Symbol.for("modular.react.profiler");
+export const FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
+export const MEMO_TYPE = Symbol.for("react.memo");
+export const LAZY_TYPE = Symbol.for("react.lazy");
+export const STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
+export const PORTAL_TYPE = Symbol.for("react.portal");
+const REACT_COMPAT_PROVIDER_TYPE = Symbol.for("react.context");
+export const Fragment = Symbol.for("react.fragment");
+export const Suspense = Symbol.for("react.suspense");
+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");
+const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 export interface ReactCompatProviderType {
   $$typeof: symbol;
@@ -66,20 +68,38 @@ export interface ReactCompatPortal {
 
 export function createElement<P extends Record<string, unknown>>(
   type: ElementType<P>,
-  config: (P & { key?: unknown; ref?: unknown }) | null,
+  config: (P & ReactReservedProps) | null,
   ...children: ReactCompatNode[]
 ): ReactCompatElement<P> {
-  const normalizedType = normalizeElementType(type);
-  const props = applyDefaultProps(normalizedType, { ...config }) as P & {
+  if (typeof type === "string") {
+    const key = config?.key === undefined ? null : String(config.key);
+    const ref = config?.ref ?? null;
+    const props = copyElementProps(config) as P & { children?: ReactCompatNode };
+
+    if (children.length === 1) {
+      props.children = children[0];
+    } else if (children.length > 1) {
+      props.children = children;
+    }
+
+    setHostOwnPropsMeta(props);
+
+    return {
+      $$typeof: REACT_COMPAT_ELEMENT_TYPE,
+      type,
+      key,
+      ref,
+      props,
+    };
+  }
+
+  const normalizedType =
+    typeof type === "object" && type !== null ? normalizeElementType(type) : type;
+  const key = config?.key === undefined ? null : String(config.key);
+  const ref = config?.ref ?? null;
+  const props = applyDefaultProps(normalizedType, copyElementProps(config)) as P & {
     children?: ReactCompatNode;
-    key?: unknown;
-    ref?: unknown;
   };
-  const key = props.key === undefined ? null : String(props.key);
-  const ref = props.ref ?? null;
-
-  delete props.key;
-  delete props.ref;
 
   if (children.length === 1) {
     props.children = children[0];
@@ -87,6 +107,10 @@ export function createElement<P extends Record<string, unknown>>(
     props.children = children;
   }
 
+  if (typeof normalizedType === "string") {
+    setHostOwnPropsMeta(props);
+  }
+
   return {
     $$typeof: REACT_COMPAT_ELEMENT_TYPE,
     type: normalizedType as ElementType<P>,
@@ -183,15 +207,12 @@ export function cloneElement<P extends Record<string, unknown>>(
   props: Partial<P> | null,
   ...children: ReactCompatNode[]
 ): ReactCompatElement<P> {
-  const nextProps = applyDefaultProps(element.type, {
-    ...element.props,
-    ...props,
-  }) as P & { key?: unknown; ref?: unknown };
-  const key = nextProps.key === undefined ? element.key : String(nextProps.key);
-  const ref = nextProps.ref === undefined ? element.ref : nextProps.ref;
-
-  delete nextProps.key;
-  delete nextProps.ref;
+  const key = props === null || props.key === undefined ? element.key : String(props.key);
+  const ref = props === null || props.ref === undefined ? element.ref : props.ref;
+  const nextProps = applyDefaultProps(
+    element.type,
+    copyElementProps(props, element.props),
+  ) as P & { children?: ReactCompatNode };
 
   if (children.length === 1) {
     (nextProps as P & { children?: ReactCompatNode }).children = children[0];
@@ -208,6 +229,29 @@ export function cloneElement<P extends Record<string, unknown>>(
   };
 }
 
+function copyElementProps(
+  source: Record<string, unknown> | null | undefined,
+  base?: Record<string, unknown>,
+): Record<string, unknown> {
+  const props: Record<string, unknown> = base === undefined ? {} : { ...base };
+
+  if (source === null || source === undefined) {
+    return props;
+  }
+
+  for (const name in source) {
+    if (!hasOwnProperty.call(source, name)) {
+      continue;
+    }
+
+    if (name !== "key" && name !== "ref" && name !== "__self" && name !== "__source") {
+      props[name] = source[name];
+    }
+  }
+
+  return props;
+}
+
 function normalizeElementType<P>(type: ElementType<P>): ElementType<P> {
   return isReactCompatContextProviderShorthand(type) ? (type.Provider as ElementType<P>) : type;
 }
@@ -216,6 +260,10 @@ function applyDefaultProps(
   type: unknown,
   props: Record<string, unknown>,
 ): Record<string, unknown> {
+  if (typeof type !== "function" && (typeof type !== "object" || type === null)) {
+    return props;
+  }
+
   const defaultProps = (type as { defaultProps?: Record<string, unknown> } | undefined)
     ?.defaultProps;
 
@@ -232,6 +280,13 @@ function applyDefaultProps(
   return props;
 }
 
+interface ReactReservedProps {
+  key?: unknown;
+  ref?: unknown;
+  __self?: unknown;
+  __source?: unknown;
+}
+
 function isReactCompatContextProviderShorthand(
   value: unknown,
 ): value is ReactCompatContextProviderShorthand {
@@ -248,6 +303,61 @@ function isReactCompatContextProviderShorthand(
   );
 }
 
+function setHostOwnPropsMeta(props: Record<string, unknown>): void {
+  const dataKey = props["data-key"];
+
+  if (typeof dataKey !== "number" || !Number.isSafeInteger(dataKey) || dataKey < 0) {
+    return;
+  }
+
+  let selectedState = 0;
+
+  for (const name in props) {
+    if (!hasOwnProperty.call(props, name) || name === "children") {
+      continue;
+    }
+
+    if (name === "data-key") {
+      continue;
+    }
+
+    if (name === "className") {
+      const value = props[name];
+
+      if (value === undefined) {
+        continue;
+      }
+
+      if (value !== "selected") {
+        return;
+      }
+
+      selectedState |= 1;
+      continue;
+    }
+
+    if (name === "data-selected") {
+      const value = props[name];
+
+      if (value === undefined) {
+        continue;
+      }
+
+      if (value !== "true") {
+        return;
+      }
+
+      selectedState |= 2;
+      continue;
+    }
+
+    return;
+  }
+
+  (props as { [HOST_OWN_PROPS_META]?: number })[HOST_OWN_PROPS_META] =
+    dataKey * 4 + selectedState;
+}
+
 export const isValidElement = isReactCompatElement;
 
 export const Children = {

package/src/event-listeners.ts

@@ -2,26 +2,26 @@ import type { SyntheticEvent } from "./event-types.js";
 
 export interface AppliedProps {
   props: Record<string, unknown>;
-  listeners: Map<string, AppliedEventListener>;
+  listeners?: Map<string, AppliedEventListener>;
 }
 
 export interface AppliedEventListener {
   handler: (event: SyntheticEvent) => void;
 }
 
-const appliedProps = new WeakMap<HTMLElement, AppliedProps>();
+const appliedProps = new WeakMap<Element, AppliedProps>();
 
-export function getAppliedProps(element: HTMLElement): AppliedProps | undefined {
+export function getAppliedProps(element: Element): AppliedProps | undefined {
   return appliedProps.get(element);
 }
 
-export function setAppliedProps(element: HTMLElement, props: AppliedProps): void {
+export function setAppliedProps(element: Element, props: AppliedProps): void {
   appliedProps.set(element, props);
 }
 
 export function getAppliedEventHandler(
-  element: HTMLElement,
+  element: Element,
   name: string,
 ): ((event: SyntheticEvent) => void) | undefined {
-  return appliedProps.get(element)?.listeners.get(name)?.handler;
+  return appliedProps.get(element)?.listeners?.get(name)?.handler;
 }

package/src/event-types.ts

@@ -9,6 +9,16 @@ export interface SyntheticEvent {
   type: string;
   target: EventTarget | null;
   currentTarget: EventTarget | null;
+  clientX?: number;
+  clientY?: number;
+  pageX?: number;
+  pageY?: number;
+  screenX?: number;
+  screenY?: number;
+  relatedTarget?: EventTarget | null;
+  touches?: TouchList;
+  changedTouches?: TouchList;
+  key?: string;
   persist(): void;
   preventDefault(): void;
   stopPropagation(): void;

package/src/events.ts

@@ -193,7 +193,7 @@ function dispatchDelegatedEvent(
   };
 
   for (let index = path.length - 1; index >= 0; index -= 1) {
-    const target = path[index] as HTMLElement;
+    const target = path[index]!;
     dispatchEventPropNames(propNames, "capture", event, target, state);
 
     if (state.propagationStopped) {
@@ -203,7 +203,7 @@ function dispatchDelegatedEvent(
 
   if (eventName === "mouseover") {
     for (let index = path.length - 1; index >= 0; index -= 1) {
-      const target = path[index] as HTMLElement;
+      const target = path[index]!;
       dispatchMouseTransitionEvent("onMouseEnter", event, target, state);
 
       if (state.propagationStopped) {
@@ -224,7 +224,7 @@ function dispatchDelegatedEvent(
 
   if (eventName === "pointerover") {
     for (let index = path.length - 1; index >= 0; index -= 1) {
-      const target = path[index] as HTMLElement;
+      const target = path[index]!;
       dispatchPointerTransitionEvent("onPointerEnter", event, target, state);
 
       if (state.propagationStopped) {
@@ -255,7 +255,7 @@ function dispatchDelegatedEvent(
 function dispatchPointerTransitionEvent(
   propName: "onPointerEnter" | "onPointerLeave",
   event: Event,
-  target: HTMLElement,
+  target: Element,
   state: { defaultPrevented: boolean; propagationStopped: boolean },
 ): void {
   if (isInternalMouseTransition(event, target)) {
@@ -273,7 +273,7 @@ function dispatchEventPropNames(
   propNames: readonly string[],
   phase: "capture" | "bubble",
   event: Event,
-  target: HTMLElement,
+  target: Element,
   state: { defaultPrevented: boolean; propagationStopped: boolean },
 ): void {
   for (const propName of propNames) {
@@ -293,7 +293,7 @@ function dispatchEventPropNames(
 function dispatchMouseTransitionEvent(
   propName: "onMouseEnter" | "onMouseLeave",
   event: Event,
-  target: HTMLElement,
+  target: Element,
   state: { defaultPrevented: boolean; propagationStopped: boolean },
 ): void {
   if (isInternalMouseTransition(event, target)) {
@@ -307,7 +307,7 @@ function dispatchMouseTransitionEvent(
   }
 }
 
-function isInternalMouseTransition(event: Event, target: HTMLElement): boolean {
+function isInternalMouseTransition(event: Event, target: Element): boolean {
   const relatedTarget =
     event instanceof MouseEvent && event.relatedTarget instanceof Node
       ? event.relatedTarget
@@ -316,12 +316,12 @@ function isInternalMouseTransition(event: Event, target: HTMLElement): boolean {
   return relatedTarget !== null && target.contains(relatedTarget);
 }
 
-function getEventPath(root: Element, event: Event): HTMLElement[] {
-  const path: HTMLElement[] = [];
+function getEventPath(root: Element, event: Event): Element[] {
+  const path: Element[] = [];
   let cursor = event.target instanceof Node ? event.target : null;
 
   while (cursor !== null) {
-    if (cursor instanceof HTMLElement) {
+    if (cursor instanceof Element) {
       path.push(cursor);
     }
 
@@ -349,6 +349,10 @@ function createSyntheticEvent(
   },
   syntheticType = nativeEvent.type,
 ): SyntheticEvent {
+  const mouseEvent = nativeEvent instanceof MouseEvent ? nativeEvent : undefined;
+  const touchEvent = nativeEvent instanceof TouchEvent ? nativeEvent : undefined;
+  const keyboardEvent = nativeEvent instanceof KeyboardEvent ? nativeEvent : undefined;
+
   return {
     bubbles: nativeEvent.bubbles,
     cancelable: nativeEvent.cancelable,
@@ -362,6 +366,24 @@ function createSyntheticEvent(
     type: syntheticType,
     target: nativeEvent.target,
     currentTarget,
+    ...(mouseEvent === undefined
+      ? {}
+      : {
+          clientX: mouseEvent.clientX,
+          clientY: mouseEvent.clientY,
+          pageX: mouseEvent.pageX,
+          pageY: mouseEvent.pageY,
+          screenX: mouseEvent.screenX,
+          screenY: mouseEvent.screenY,
+          relatedTarget: mouseEvent.relatedTarget,
+        }),
+    ...(touchEvent === undefined
+      ? {}
+      : {
+          touches: touchEvent.touches,
+          changedTouches: touchEvent.changedTouches,
+        }),
+    ...(keyboardEvent === undefined ? {} : { key: keyboardEvent.key }),
     persist() {},
     preventDefault() {
       state.defaultPrevented = true;

package/src/fiber-commit.ts

@@ -1,6 +1,7 @@
 import type { Fiber, FiberRoot } from "./fiber.js";
 import { commitHostFiberRoot } from "./fiber-host.js";
 import { markRootFinished } from "./fiber-lanes.js";
+import { runWithHostCommit } from "./hooks.js";
 import type { RenderOptions } from "./hydration.js";
 
 interface RefRecord {
@@ -18,7 +19,15 @@ export function commitFiberRoot(
     return;
   }
 
-  cleanupDeletedRefs(root.current, finishedWork);
+  if (
+    root.refCleanupKnown !== true ||
+    root.current.hasRefSubtree ||
+    finishedWork.hasRefSubtree
+  ) {
+    runWithHostCommit(() => {
+      cleanupDeletedRefs(root.current, finishedWork);
+    });
+  }
   commitHostFiberRoot(root, finishedWork, options);
   root.current = finishedWork;
   root.current.stateNode = root;
@@ -29,6 +38,12 @@ export function commitFiberRoot(
   root.workInProgressRootRenderLanes = 0;
 }
 
+export function detachFiberRefs(fiber: Fiber): void {
+  for (const record of collectRefRecords(fiber)) {
+    detachRef(record.ref);
+  }
+}
+
 function cleanupDeletedRefs(previous: Fiber, next: Fiber): void {
   const nextRefs = new Set<unknown>();
 

package/src/fiber-reconciler.ts

@@ -14,6 +14,7 @@ import {
   type ReactCompatNode,
 } from "./element.js";
 import {
+  consumerContext,
   isReactCompatConsumer,
   isReactCompatProvider,
   popContextProvider,
@@ -27,12 +28,20 @@ import { DidCapture } from "./fiber-flags.js";
 import { mergeLanes, NoLanes } from "./fiber-lanes.js";
 import { isThenable } from "./thenable.js";
 import {
-  applyDerivedStateFromProps,
   isClassComponentType,
+  resolveDerivedStateFromProps,
   type ClassComponentInstance,
   type ClassComponentType,
 } from "./class-component.js";
 import { areMemoPropsEqual } from "./prop-comparison.js";
+import {
+  createHostElement,
+  hostElementMatches,
+  isHostElement,
+  namespaceForHostChildren,
+  namespaceForHostElement,
+  type HostNamespace,
+} from "./dom-host-rules.js";
 
 interface ContextProviderFiberState {
   provider: ReactCompatProvider<unknown>;
@@ -159,7 +168,7 @@ export function beginWork(unit: Fiber): Fiber | undefined {
     return reconcileChildFibers(
       unit,
       unit.alternate?.child,
-      render(useContext(unit.type.context)),
+      render(useContext(consumerContext(unit.type))),
     );
   }
 
@@ -288,13 +297,16 @@ export function completeWork(unit: Fiber): void {
 
   if (unit.tag === "host-component") {
     const current = unit.alternate;
+    const parentNamespace = parentHostNamespace(unit);
+    const elementNamespace = namespaceForHostElement(parentNamespace, String(unit.type));
 
     unit.stateNode =
       current?.tag === "host-component" &&
       current.type === unit.type &&
-      current.stateNode instanceof HTMLElement
+      isHostElement(current.stateNode) &&
+      hostElementMatches(current.stateNode, String(unit.type), elementNamespace)
         ? current.stateNode
-        : document.createElement(String(unit.type));
+        : createHostElement(document, String(unit.type), parentNamespace);
     return;
   }
 
@@ -308,6 +320,27 @@ export function completeWork(unit: Fiber): void {
   }
 }
 
+function parentHostNamespace(unit: Fiber): HostNamespace {
+  const ancestors: string[] = [];
+  let current = unit.return;
+
+  while (current !== undefined) {
+    if (current.tag === "host-component" && typeof current.type === "string") {
+      ancestors.push(current.type);
+    }
+    current = current.return;
+  }
+
+  let namespace: HostNamespace = "html";
+  for (let index = ancestors.length - 1; index >= 0; index -= 1) {
+    const tagName = ancestors[index] ?? "";
+    const elementNamespace = namespaceForHostElement(namespace, tagName);
+    namespace = namespaceForHostChildren(elementNamespace, tagName);
+  }
+
+  return namespace;
+}
+
 export function cleanupUnfinishedWork(unit: Fiber | undefined): void {
   if (unit === undefined) {
     return;
@@ -520,8 +553,7 @@ function beginClassComponent(
       : undefined;
   const instance = currentInstance ?? new type(nextProps);
   const previousState = instance.state ?? {};
-  applyDerivedStateFromProps(type, instance, nextProps, previousState);
-  const nextState = instance.state ?? {};
+  const nextState = resolveDerivedStateFromProps(type, nextProps, previousState);
 
   unit.stateNode = instance;
 
@@ -535,6 +567,7 @@ function beginClassComponent(
   }
 
   instance.props = nextProps;
+  instance.state = nextState;
   return reconcileChildFibers(unit, unit.alternate?.child, instance.render());
 }
 

package/src/fiber-work-loop.ts

@@ -177,9 +177,10 @@ export function performSyncWorkOnRoot(
   fallbackFinishedWork.lanes = lanes;
   fallbackFinishedWork.memoizedProps = { children: element };
   const committedWork = commit();
-  const finishedWork = committedWork ?? fallbackFinishedWork;
-  root.current = finishedWork;
-  root.current.stateNode = root;
+  if (committedWork === undefined) {
+    root.current = fallbackFinishedWork;
+    root.current.stateNode = root;
+  }
   root.finishedWork = undefined;
   root.workInProgress = undefined;
   root.workInProgressRootRenderLanes = 0;

package/src/fiber.ts

@@ -34,10 +34,14 @@ export interface Fiber {
   stateNode: unknown;
   flags: Flags;
   subtreeFlags: Flags;
+  childListChanged: boolean;
+  subtreeChildListChanged: boolean;
   deletions: Fiber[] | undefined;
   lanes: Lanes;
   childLanes: Lanes;
   hydrateExisting: boolean;
+  hasRefSubtree: boolean;
+  hostChildListChanged: boolean;
 }
 
 export interface FiberRoot {
@@ -55,6 +59,7 @@ export interface FiberRoot {
   workInProgressRootRenderLanes: Lanes;
   workInProgressElement: unknown;
   hydrationState: FiberHydrationState | undefined;
+  refCleanupKnown: boolean;
 }
 
 export interface FiberHydrationState {
@@ -84,10 +89,14 @@ export function createFiber(
     stateNode: undefined,
     flags: NoFlags,
     subtreeFlags: NoFlags,
+    childListChanged: false,
+    subtreeChildListChanged: false,
     deletions: undefined,
     lanes: NoLanes,
     childLanes: NoLanes,
     hydrateExisting: false,
+    hasRefSubtree: false,
+    hostChildListChanged: false,
   };
 }
 
@@ -112,6 +121,7 @@ export function createFiberRoot(container: Element): FiberRoot {
     workInProgressRootRenderLanes: NoLanes,
     workInProgressElement: undefined,
     hydrationState: undefined,
+    refCleanupKnown: false,
   };
   current.stateNode = root;
   return root;
@@ -133,6 +143,8 @@ export function createWorkInProgress(
     workInProgress.pendingProps = pendingProps;
     workInProgress.flags = NoFlags;
     workInProgress.subtreeFlags = NoFlags;
+    workInProgress.childListChanged = false;
+    workInProgress.subtreeChildListChanged = false;
     workInProgress.deletions = undefined;
   }
 
@@ -144,5 +156,7 @@ export function createWorkInProgress(
   workInProgress.lanes = current.lanes;
   workInProgress.childLanes = current.childLanes;
   workInProgress.hydrateExisting = false;
+  workInProgress.hasRefSubtree = current.hasRefSubtree;
+  workInProgress.hostChildListChanged = current.hostChildListChanged;
   return workInProgress;
 }

package/src/hooks-entry.ts

@@ -0,0 +1,24 @@
+export {
+  useCallback,
+  useDebugValue,
+  useDeferredValue,
+  useEffectEvent,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  use,
+  useActionState,
+  startTransition,
+  unstable_useCacheRefresh,
+  useTransition,
+  version,
+} from "./hooks.js";
+export type { StartTransition, TransitionScope } from "./hooks.js";