@reckona/mreact-compat 0.0.66 → 0.0.67

package/src/element.ts

@@ -0,0 +1,317 @@
+export const REACT_COMPAT_ELEMENT_TYPE = Symbol.for("modular.react.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 interface ReactCompatProviderType {
+  $$typeof: symbol;
+  context: unknown;
+}
+
+export interface ReactCompatContextProviderShorthand {
+  Provider: ReactCompatProviderType;
+  Consumer: unknown;
+}
+
+export type ElementType<P = Record<string, unknown>> =
+  | string
+  | typeof Fragment
+  | typeof Suspense
+  | typeof SuspenseList
+  | typeof Activity
+  | typeof Profiler
+  | typeof ERROR_BOUNDARY_TYPE
+  | typeof STRICT_MODE_TYPE
+  | ReactCompatContextProviderShorthand
+  | ReactCompatProviderType
+  | ForwardRefType<P>
+  | MemoType<P>
+  | LazyType<P>
+  | ((props: P) => ReactCompatNode | PromiseLike<ReactCompatNode>)
+  | (new (props: P) => { render(): ReactCompatNode });
+
+export type ReactCompatNode =
+  | ReactCompatElement
+  | ReactCompatPortal
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | ReactCompatNode[];
+
+export interface ReactCompatElement<P = Record<string, unknown>> {
+  $$typeof: typeof REACT_COMPAT_ELEMENT_TYPE;
+  type: ElementType<P>;
+  key: string | null;
+  ref: unknown;
+  props: P & { children?: ReactCompatNode };
+}
+
+export interface ReactCompatPortal {
+  $$typeof: typeof PORTAL_TYPE;
+  container: Element;
+  children: ReactCompatNode;
+  key: string | null;
+}
+
+export function createElement<P extends Record<string, unknown>>(
+  type: ElementType<P>,
+  config: (P & { key?: unknown; ref?: unknown }) | null,
+  ...children: ReactCompatNode[]
+): ReactCompatElement<P> {
+  const normalizedType = normalizeElementType(type);
+  const props = applyDefaultProps(normalizedType, { ...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];
+  } else if (children.length > 1) {
+    props.children = children;
+  }
+
+  return {
+    $$typeof: REACT_COMPAT_ELEMENT_TYPE,
+    type: normalizedType as ElementType<P>,
+    key,
+    ref,
+    props: props as P & { children?: ReactCompatNode },
+  };
+}
+
+export function isReactCompatElement(
+  value: unknown,
+): value is ReactCompatElement {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    (value as { $$typeof?: unknown }).$$typeof === REACT_COMPAT_ELEMENT_TYPE
+  );
+}
+
+export function createPortal(
+  children: ReactCompatNode,
+  container: Element,
+  key?: unknown,
+): ReactCompatPortal {
+  return {
+    $$typeof: PORTAL_TYPE,
+    container,
+    children,
+    key: key === undefined ? null : String(key),
+  };
+}
+
+export function isReactCompatPortal(value: unknown): value is ReactCompatPortal {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    (value as { $$typeof?: unknown }).$$typeof === PORTAL_TYPE
+  );
+}
+
+export function createRef<T>(): { current: T | null } {
+  return { current: null };
+}
+
+export interface ForwardRefType<P = Record<string, unknown>> {
+  $$typeof: typeof FORWARD_REF_TYPE;
+  render: (props: P, ref: unknown) => ReactCompatNode;
+}
+
+export interface MemoType<P = Record<string, unknown>> {
+  $$typeof: typeof MEMO_TYPE;
+  type: ElementType<P>;
+  compare?: (previous: P, next: P) => boolean;
+}
+
+export interface LazyType<P = Record<string, unknown>> {
+  $$typeof: typeof LAZY_TYPE;
+  load: () => Promise<{ default: ElementType<P> }>;
+  status: "uninitialized" | "pending" | "resolved" | "rejected";
+  promise?: Promise<void>;
+  resolved?: ElementType<P>;
+  error?: unknown;
+}
+
+export function forwardRef<P, T>(
+  render: (props: P, ref: { current: T | null } | ((value: T | null) => void) | null) => ReactCompatNode,
+): ForwardRefType<P & { ref?: unknown }> {
+  return { $$typeof: FORWARD_REF_TYPE, render: render as ForwardRefType<P>["render"] };
+}
+
+export function memo<P>(
+  type: ElementType<P>,
+  compare?: (previous: P, next: P) => boolean,
+): MemoType<P> {
+  return compare === undefined
+    ? { $$typeof: MEMO_TYPE, type }
+    : { $$typeof: MEMO_TYPE, type, compare };
+}
+
+export function lazy<P>(
+  load: () => Promise<{ default: ElementType<P> }>,
+): LazyType<P> {
+  return {
+    $$typeof: LAZY_TYPE,
+    load,
+    status: "uninitialized",
+  };
+}
+
+export const StrictMode = STRICT_MODE_TYPE;
+
+export function cloneElement<P extends Record<string, unknown>>(
+  element: ReactCompatElement<P>,
+  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;
+
+  if (children.length === 1) {
+    (nextProps as P & { children?: ReactCompatNode }).children = children[0];
+  } else if (children.length > 1) {
+    (nextProps as P & { children?: ReactCompatNode }).children = children;
+  }
+
+  return {
+    $$typeof: REACT_COMPAT_ELEMENT_TYPE,
+    type: element.type,
+    key,
+    ref,
+    props: nextProps as P & { children?: ReactCompatNode },
+  };
+}
+
+function normalizeElementType<P>(type: ElementType<P>): ElementType<P> {
+  return isReactCompatContextProviderShorthand(type) ? (type.Provider as ElementType<P>) : type;
+}
+
+function applyDefaultProps(
+  type: unknown,
+  props: Record<string, unknown>,
+): Record<string, unknown> {
+  const defaultProps = (type as { defaultProps?: Record<string, unknown> } | undefined)
+    ?.defaultProps;
+
+  if (defaultProps === undefined) {
+    return props;
+  }
+
+  for (const [name, value] of Object.entries(defaultProps)) {
+    if (props[name] === undefined) {
+      props[name] = value;
+    }
+  }
+
+  return props;
+}
+
+function isReactCompatContextProviderShorthand(
+  value: unknown,
+): value is ReactCompatContextProviderShorthand {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+
+  const provider = (value as { Provider?: unknown }).Provider;
+
+  return (
+    typeof provider === "object" &&
+    provider !== null &&
+    (provider as { $$typeof?: unknown }).$$typeof === REACT_COMPAT_PROVIDER_TYPE
+  );
+}
+
+export const isValidElement = isReactCompatElement;
+
+export const Children = {
+  map<T>(
+    children: ReactCompatNode,
+    fn: (child: Exclude<ReactCompatNode, null | undefined | boolean>, index: number) => T,
+  ): T[] | null {
+    if (children === null || children === undefined) {
+      return null;
+    }
+
+    return flattenChildren(children).map((child, index) =>
+      fn(child as Exclude<ReactCompatNode, null | undefined | boolean>, index),
+    );
+  },
+  count(children: ReactCompatNode): number {
+    if (children === null || children === undefined) {
+      return 0;
+    }
+
+    return flattenChildren(children).length;
+  },
+  toArray(children: ReactCompatNode): Exclude<ReactCompatNode, null | undefined | boolean>[] {
+    return toChildArray(children);
+  },
+  only(children: ReactCompatNode): Exclude<ReactCompatNode, null | undefined | boolean> {
+    const array = toChildArray(children);
+
+    if (array.length !== 1) {
+      throw new Error("Expected exactly one child.");
+    }
+
+    return array[0] as Exclude<ReactCompatNode, null | undefined | boolean>;
+  },
+};
+
+function toChildArray(
+  children: ReactCompatNode,
+): Exclude<ReactCompatNode, null | undefined | boolean>[] {
+  return flattenChildren(children).filter(
+    (child): child is Exclude<ReactCompatNode, null | undefined | boolean> =>
+      child !== null && child !== undefined && typeof child !== "boolean",
+  );
+}
+
+function flattenChildren(children: ReactCompatNode): ReactCompatNode[] {
+  if (Array.isArray(children)) {
+    return children.flatMap((child) => flattenChildren(child));
+  }
+
+  return [children];
+}
+
+export interface ErrorBoundaryOptions {
+  fallback: (error: Error) => ReactCompatNode;
+  onError?: (error: Error) => void;
+}
+
+export function createErrorBoundary(
+  options: ErrorBoundaryOptions,
+  children: ReactCompatNode,
+): ReactCompatElement<ErrorBoundaryOptions & { children: ReactCompatNode }> {
+  return createElement(ERROR_BOUNDARY_TYPE, {
+    ...options,
+    children,
+  });
+}

package/src/event-listeners.ts

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

package/src/event-priority.ts

@@ -0,0 +1 @@
+export { runWithEventPriority, type EventPriority } from "./hooks.js";

package/src/event-replay.ts

@@ -0,0 +1,154 @@
+const queuedHydrationEvents = new WeakMap<Element, QueuedHydrationEvent[]>();
+const replayedEvents = new WeakSet<Event>();
+const allowedReplayEventTypes = new Set(["click", "input", "change", "submit"]);
+
+export interface EventHydrationManifest {
+  version: 1;
+  events: EventHydrationManifestEntry[];
+}
+
+export interface EventHydrationManifestEntry {
+  id: string;
+  event: string;
+  handler: string;
+}
+
+interface QueuedHydrationEvent {
+  target: EventTarget;
+  event: Event;
+}
+
+export interface HydrationEventReplayOptions {
+  onCapturedEvent?: (event: Event, target: EventTarget) => void;
+}
+
+export function queueHydrationEvent(
+  container: Element,
+  event: Event,
+  target: EventTarget,
+): void {
+  if (
+    !allowedReplayEventTypes.has(event.type) ||
+    !(target instanceof Node) ||
+    !container.contains(target)
+  ) {
+    return;
+  }
+
+  const events = queuedHydrationEvents.get(container) ?? [];
+  events.push({ event, target });
+  queuedHydrationEvents.set(container, events);
+}
+
+export function enableHydrationEventReplay(container: Element): () => void {
+  return enableHydrationEventReplayForTypes(container, allowedReplayEventTypes);
+}
+
+export function readEventHydrationManifest(
+  root: ParentNode = document,
+): EventHydrationManifest | undefined {
+  const script = root.querySelector<HTMLScriptElement>(
+    "script[data-mreact-event-manifest]",
+  );
+
+  if (script === null) {
+    return undefined;
+  }
+
+  const value = JSON.parse(script.textContent ?? "") as EventHydrationManifest;
+
+  if (value.version !== 1 || !Array.isArray(value.events)) {
+    return undefined;
+  }
+
+  return value;
+}
+
+export function enableEventHydrationManifestReplay(
+  container: Element,
+  manifest: EventHydrationManifest | undefined,
+  options: HydrationEventReplayOptions = {},
+): () => void {
+  if (manifest === undefined) {
+    return () => undefined;
+  }
+
+  const eventTypes = new Set(
+    manifest.events
+      .map((event) => event.event)
+      .filter((event) => allowedReplayEventTypes.has(event)),
+  );
+
+  return enableHydrationEventReplayForTypes(container, eventTypes, options);
+}
+
+export function replayQueuedHydrationEvents(container: Element): void {
+  const events = queuedHydrationEvents.get(container) ?? [];
+  queuedHydrationEvents.delete(container);
+
+  for (const { event, target } of events) {
+    replayedEvents.add(event);
+    target.dispatchEvent(event);
+  }
+}
+
+function enableHydrationEventReplayForTypes(
+  container: Element,
+  eventTypes: Iterable<string>,
+  options: HydrationEventReplayOptions = {},
+): () => void {
+  const listeners = Array.from(eventTypes, (type) => {
+    const listener = (event: Event): void => {
+      if (replayedEvents.has(event) || !(event.target instanceof Node)) {
+        return;
+      }
+
+      const replayEvent = cloneReplayableEvent(event);
+      queueHydrationEvent(container, replayEvent, event.target);
+      options.onCapturedEvent?.(replayEvent, event.target);
+      event.stopImmediatePropagation();
+      event.preventDefault();
+    };
+
+    container.addEventListener(type, listener, true);
+    return { type, listener };
+  });
+
+  return () => {
+    for (const { type, listener } of listeners) {
+      container.removeEventListener(type, listener, true);
+    }
+  };
+}
+
+function cloneReplayableEvent(event: Event): Event {
+  const init = {
+    bubbles: event.bubbles,
+    cancelable: event.cancelable,
+    composed: event.composed,
+  };
+
+  if (typeof MouseEvent !== "undefined" && event instanceof MouseEvent) {
+    return new MouseEvent(event.type, {
+      ...init,
+      button: event.button,
+      buttons: event.buttons,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+    });
+  }
+
+  if (typeof InputEvent !== "undefined" && event instanceof InputEvent) {
+    return new InputEvent(event.type, {
+      ...init,
+      data: event.data,
+      inputType: event.inputType,
+    });
+  }
+
+  return new Event(event.type, init);
+}

package/src/event-types.ts

@@ -0,0 +1,18 @@
+export interface SyntheticEvent {
+  bubbles: boolean;
+  cancelable: boolean;
+  defaultPrevented: boolean;
+  eventPhase: number;
+  isTrusted: boolean;
+  nativeEvent: Event;
+  timeStamp: number;
+  type: string;
+  target: EventTarget | null;
+  currentTarget: EventTarget | null;
+  persist(): void;
+  preventDefault(): void;
+  stopPropagation(): void;
+  isDefaultPrevented(): boolean;
+  isPersistent(): boolean;
+  isPropagationStopped(): boolean;
+}