@reckona/mreact-compat 0.0.65 → 0.0.67

package/src/hydration.ts

@@ -0,0 +1,314 @@
+import type { ReactCompatNode } from "./element.js";
+
+export interface HydrationRecoverableErrorInfo {
+  kind: "tag" | "text" | "attribute" | "node" | "suspense-server-error";
+  path: string;
+  componentStack?: string;
+}
+
+export interface HydrationContext {
+  onRecoverableError?: (
+    error: Error,
+    info: HydrationRecoverableErrorInfo,
+  ) => void;
+  componentStack?: string;
+}
+
+export interface RenderOptions {
+  hydration?: HydrationContext;
+  eventRoot?: Element;
+  preserveHydrationAttributes?: boolean;
+}
+
+export interface HydrationScope {
+  parent: ParentNode;
+  previousNodes: Node[];
+  before: ChildNode | null;
+  after: ChildNode | null;
+}
+
+export function applyStreamingHydrationFragments(
+  root: ParentNode = document,
+): void {
+  const fragments = Array.from(
+    root.querySelectorAll<HTMLTemplateElement>(
+      "template[data-mreact-oob-fragment]",
+    ),
+  );
+
+  for (const fragment of fragments) {
+    const id = fragment.dataset.mreactOobFragment;
+
+    if (id === undefined) {
+      continue;
+    }
+
+    const placeholder = root.querySelector<Element>(
+      `[data-mreact-oob-placeholder="${escapeSelectorString(id)}"]`,
+    );
+
+    if (placeholder === null) {
+      continue;
+    }
+
+    placeholder.replaceWith(fragment.content.cloneNode(true));
+    fragment.remove();
+  }
+}
+
+export function getHydrationScope(
+  container: Element,
+  resumeId: string | undefined,
+): HydrationScope {
+  if (resumeId === undefined) {
+    return {
+      parent: container,
+      previousNodes: Array.from(container.childNodes),
+      before: null,
+      after: null,
+    };
+  }
+
+  const encodedId = encodeURIComponent(resumeId);
+  const start = findComment(container, `mreact-h:start:${encodedId}`);
+  const end =
+    start === null ? null : findFollowingComment(start, `mreact-h:end:${encodedId}`);
+
+  if (start === null || end === null || start.parentNode === null) {
+    return {
+      parent: container,
+      previousNodes: Array.from(container.childNodes),
+      before: null,
+      after: null,
+    };
+  }
+
+  return {
+    parent: start.parentNode,
+    previousNodes: collectScopedNodes(start.parentNode, start, end),
+    before: start,
+    after: end,
+  };
+}
+
+export function findContainingResumeBoundaryId(
+  root: ParentNode,
+  target: Node,
+): string | undefined {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+  const stack: string[] = [];
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+
+    if (!(node instanceof Comment)) {
+      continue;
+    }
+
+    if (node.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_PRECEDING) {
+      break;
+    }
+
+    const startId = readResumeMarkerId(node.data, "mreact-h:start:");
+
+    if (startId !== undefined) {
+      stack.push(startId);
+      continue;
+    }
+
+    const endId = readResumeMarkerId(node.data, "mreact-h:end:");
+
+    if (endId !== undefined) {
+      const lastIndex = stack.lastIndexOf(endId);
+
+      if (lastIndex >= 0) {
+        stack.length = lastIndex;
+      }
+    }
+  }
+
+  return stack.at(-1);
+}
+
+export function collectScopedNodes(
+  parent: ParentNode,
+  before: ChildNode | null,
+  after: ChildNode | null,
+): Node[] {
+  const nodes: Node[] = [];
+  let cursor = before === null ? parent.firstChild : before.nextSibling;
+
+  while (cursor !== null && cursor !== after) {
+    nodes.push(cursor);
+    cursor = cursor.nextSibling;
+  }
+
+  return nodes;
+}
+
+export function escapeSelectorString(value: string): string {
+  return value.replaceAll("\\", "\\\\").replaceAll("\"", "\\\"");
+}
+
+export function reportRecoverable(
+  options: RenderOptions,
+  kind: HydrationRecoverableErrorInfo["kind"],
+  path: string,
+  error: Error,
+): void {
+  const componentStack = options.hydration?.componentStack;
+  options.hydration?.onRecoverableError?.(error, {
+    kind,
+    path,
+    ...(componentStack === undefined ? {} : { componentStack }),
+  });
+}
+
+export function reportMissingHydrationNode(
+  options: RenderOptions,
+  path: string,
+): void {
+  reportRecoverable(
+    options,
+    "node",
+    path,
+    new Error("Hydration missing node mismatch."),
+  );
+}
+
+export function reportReactSuspenseServerError(
+  options: RenderOptions,
+  path: string,
+  message: string,
+  componentStack: string | undefined,
+): void {
+  options.hydration?.onRecoverableError?.(new Error(message), {
+    kind: "suspense-server-error",
+    path,
+    ...(componentStack === undefined ? {} : { componentStack }),
+  });
+}
+
+export function reportHydrationNodeTypeMismatch(
+  options: RenderOptions,
+  path: string,
+  expected: string,
+  existing: Node,
+): void {
+  reportRecoverable(
+    options,
+    "node",
+    path,
+    new Error(
+      `Hydration node type mismatch: expected ${expected} but found ${describeHydrationNode(existing)}.`,
+    ),
+  );
+}
+
+export function withHydrationComponentStack(
+  options: RenderOptions,
+  componentName: string,
+): RenderOptions {
+  if (options.hydration === undefined) {
+    return options;
+  }
+
+  const frame = `\n    at ${componentName}`;
+  return {
+    ...options,
+    hydration: {
+      ...options.hydration,
+      componentStack: `${options.hydration.componentStack ?? ""}${frame}`,
+    },
+  };
+}
+
+export function reportElementTextMismatch(
+  options: RenderOptions,
+  path: string,
+  existing: HTMLElement,
+  children: ReactCompatNode,
+): void {
+  if (
+    (typeof children === "string" || typeof children === "number") &&
+    existing.textContent !== String(children)
+  ) {
+    reportRecoverable(
+      options,
+      "text",
+      path,
+      new Error("Hydration text mismatch."),
+    );
+  }
+}
+
+export function reportExtraHydrationNodes(
+  options: RenderOptions,
+  path: string,
+  previousNodes: readonly Node[],
+  consumed: number,
+): void {
+  if (consumed >= previousNodes.length) {
+    return;
+  }
+
+  reportRecoverable(
+    options,
+    "node",
+    path,
+    new Error("Hydration extra node mismatch."),
+  );
+}
+
+function describeHydrationNode(node: Node): string {
+  if (node instanceof HTMLElement) {
+    return `<${node.tagName.toLowerCase()}>`;
+  }
+
+  if (node instanceof Text) {
+    return "text";
+  }
+
+  if (node instanceof Comment) {
+    return "comment";
+  }
+
+  return "node";
+}
+
+function readResumeMarkerId(
+  value: string,
+  prefix: "mreact-h:start:" | "mreact-h:end:",
+): string | undefined {
+  return value.startsWith(prefix)
+    ? decodeURIComponent(value.slice(prefix.length))
+    : undefined;
+}
+
+function findComment(root: ParentNode, value: string): Comment | null {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+
+    if (node instanceof Comment && node.data === value) {
+      return node;
+    }
+  }
+
+  return null;
+}
+
+function findFollowingComment(start: Comment, value: string): Comment | null {
+  let cursor: Node | null = start.nextSibling;
+
+  while (cursor !== null) {
+    if (cursor instanceof Comment && cursor.data === value) {
+      return cursor;
+    }
+
+    cursor = cursor.nextSibling;
+  }
+
+  return null;
+}

package/src/index.ts

@@ -0,0 +1,95 @@
+export {
+  Component,
+  PureComponent,
+} from "./class-component.js";
+export {
+  Fragment,
+  Activity,
+  Profiler,
+  Suspense,
+  SuspenseList,
+  StrictMode,
+  Children,
+  cloneElement,
+  createElement,
+  createErrorBoundary,
+  createPortal,
+  createRef,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+} from "./element.js";
+export type {
+  ErrorBoundaryOptions,
+  ElementType,
+  ReactCompatElement,
+  ReactCompatNode,
+} from "./element.js";
+export type {
+  FormEvent,
+  FormEventHandler,
+  JSXEvent,
+  JSXEventHandler,
+} from "./jsx-runtime.js";
+
+export {
+  createContext,
+  renderContextConsumerToString,
+  renderContextProviderToString,
+  useContext,
+} from "./context.js";
+export {
+  applyStreamingHydrationFragments,
+  createRoot,
+  createStreamingHydrationRoot,
+  enableEventHydrationManifestReplay,
+  enableHydrationEventReplay,
+  flushSync,
+  hydrateRoot,
+  queueHydrationEvent,
+  readEventHydrationManifest,
+  render,
+  unmountComponentAtNode,
+} from "./render.js";
+export type {
+  EventHydrationManifest,
+  EventHydrationManifestEntry,
+  HydrateRootOptions,
+  HydrationRecoverableErrorInfo,
+  Root,
+  RootOptions,
+  SelectiveHydrationBoundary,
+  SelectiveHydrationOptions,
+  StreamingHydrationRoot,
+  StreamingHydrationRootOptions,
+} from "./render.js";
+export {
+  useCallback,
+  useDebugValue,
+  useDeferredValue,
+  useEffectEvent,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  use,
+  useActionState,
+  act,
+  cache,
+  cacheSignal,
+  captureOwnerStack,
+  renderToString,
+  startTransition,
+  unstable_useCacheRefresh,
+  useTransition,
+  version,
+} from "./hooks.js";
+export type { StartTransition, TransitionScope } from "./hooks.js";

package/src/internal.ts

@@ -0,0 +1,7 @@
+export {
+  createCacheScope,
+  refreshCacheScope,
+  runWithEventPriority,
+  runWithCacheScope,
+  type CacheScope,
+} from "./hooks.js";

package/src/jsx-dev-runtime.ts

@@ -0,0 +1,40 @@
+import { Fragment, jsx } from "./jsx-runtime.js";
+import type {
+  ElementType,
+  ReactCompatElement,
+  ReactCompatNode,
+} from "./element.js";
+import type {
+  JSXIntrinsicAttributes,
+  JSXIntrinsicElements,
+} from "./jsx-runtime.js";
+
+export { Fragment };
+export type {
+  FormEvent,
+  FormEventHandler,
+  JSXEvent,
+  JSXEventHandler,
+  JSXHTMLAttributes,
+  JSXIntrinsicAttributes,
+  JSXIntrinsicElements,
+} from "./jsx-runtime.js";
+
+export namespace JSX {
+  export interface Element extends ReactCompatElement {}
+
+  export interface IntrinsicAttributes extends JSXIntrinsicAttributes {}
+
+  export interface IntrinsicElements extends JSXIntrinsicElements {}
+}
+
+export function jsxDEV<P extends Record<string, unknown>>(
+  type: ElementType<P>,
+  props: (P & { children?: ReactCompatNode; key?: unknown; ref?: unknown }) | null,
+  key: unknown,
+  _isStaticChildren: boolean,
+  _source: unknown,
+  _self: unknown,
+): ReactCompatElement<P> {
+  return jsx(type, props, key);
+}

package/src/jsx-runtime.ts

@@ -0,0 +1,119 @@
+import { createElement, Fragment } from "./element.js";
+import type {
+  ElementType,
+  ReactCompatElement,
+  ReactCompatNode,
+} from "./element.js";
+
+export { Fragment };
+
+export type JSXEvent<
+  TCurrentTarget extends EventTarget,
+  TEvent extends Event = Event,
+> = TEvent & {
+  readonly currentTarget: TCurrentTarget;
+};
+
+export type JSXEventHandler<
+  TCurrentTarget extends EventTarget,
+  TEvent extends Event = Event,
+> = (event: JSXEvent<TCurrentTarget, TEvent>) => unknown;
+
+export type FormEvent<TCurrentTarget extends EventTarget = Element> = JSXEvent<
+  TCurrentTarget,
+  SubmitEvent
+>;
+
+export type FormEventHandler<TCurrentTarget extends EventTarget = Element> =
+  JSXEventHandler<TCurrentTarget, SubmitEvent>;
+
+export interface JSXDOMAttributes<TElement extends EventTarget> {
+  children?: ReactCompatNode;
+  onClick?: JSXEventHandler<TElement, MouseEvent>;
+  onChange?: JSXEventHandler<TElement, Event>;
+  onInput?: JSXEventHandler<TElement, InputEvent>;
+  onSubmit?: JSXEventHandler<TElement, SubmitEvent>;
+}
+
+export interface JSXHTMLAttributes<TElement extends HTMLElement>
+  extends JSXDOMAttributes<TElement> {
+  [attributeName: string]: unknown;
+}
+
+export interface JSXIntrinsicAttributes {
+  key?: unknown;
+  ref?: unknown;
+}
+
+export interface JSXIntrinsicElements {
+  form: JSXHTMLAttributes<HTMLFormElement> & {
+    onSubmit?: JSXEventHandler<HTMLFormElement, SubmitEvent>;
+  };
+  input: JSXHTMLAttributes<HTMLInputElement>;
+  button: JSXHTMLAttributes<HTMLButtonElement>;
+  textarea: JSXHTMLAttributes<HTMLTextAreaElement>;
+  select: JSXHTMLAttributes<HTMLSelectElement>;
+  option: JSXHTMLAttributes<HTMLOptionElement>;
+  a: JSXHTMLAttributes<HTMLAnchorElement>;
+  img: JSXHTMLAttributes<HTMLImageElement>;
+  main: JSXHTMLAttributes<HTMLElement>;
+  div: JSXHTMLAttributes<HTMLDivElement>;
+  span: JSXHTMLAttributes<HTMLSpanElement>;
+  [elementName: string]: Record<string, unknown>;
+}
+
+export namespace JSX {
+  export interface Element extends ReactCompatElement {}
+
+  export interface IntrinsicAttributes extends JSXIntrinsicAttributes {}
+
+  export interface IntrinsicElements extends JSXIntrinsicElements {}
+}
+
+declare global {
+  namespace JSX {
+    interface Element extends ReactCompatElement {}
+    interface IntrinsicAttributes extends JSXIntrinsicAttributes {}
+    interface IntrinsicElements extends JSXIntrinsicElements {}
+  }
+}
+
+export function jsx<P extends Record<string, unknown>>(
+  type: ElementType<P>,
+  props: (P & { children?: ReactCompatNode; key?: unknown; ref?: unknown }) | null,
+  key?: unknown,
+): ReactCompatElement<P> {
+  return createElementFromJsx(type, props, key);
+}
+
+export function jsxs<P extends Record<string, unknown>>(
+  type: ElementType<P>,
+  props: (P & { children?: ReactCompatNode; key?: unknown; ref?: unknown }) | null,
+  key?: unknown,
+): ReactCompatElement<P> {
+  return createElementFromJsx(type, props, key);
+}
+
+function createElementFromJsx<P extends Record<string, unknown>>(
+  type: ElementType<P>,
+  props: (P & { children?: ReactCompatNode; key?: unknown; ref?: unknown }) | null,
+  key: unknown,
+): ReactCompatElement<P> {
+  const config = { ...props } as P & {
+    children?: ReactCompatNode;
+    key?: unknown;
+    ref?: unknown;
+  };
+  const hasChildren = Object.hasOwn(config, "children");
+  const children = config.children;
+
+  if (key !== undefined) {
+    config.key = key;
+  }
+
+  delete config.children;
+
+  return hasChildren
+    ? createElement(type, config, children)
+    : createElement(type, config);
+}

package/src/prop-comparison.ts

@@ -0,0 +1,50 @@
+import {
+  isReactCompatElement,
+  type MemoType,
+  type ReactCompatElement,
+  type ReactCompatNode,
+} from "./element.js";
+
+export function getPendingProps(node: ReactCompatNode): unknown {
+  if (!isReactCompatElement(node)) {
+    return node;
+  }
+
+  return node.ref === null ? node.props : { ...node.props, ref: node.ref };
+}
+
+export function areMemoPropsEqual(
+  memoType: Pick<MemoType<Record<string, unknown>>, "compare">,
+  previous: Record<string, unknown>,
+  next: Record<string, unknown>,
+): boolean {
+  return memoType.compare === undefined
+    ? shallowEqual(previous, next)
+    : memoType.compare(previous, next);
+}
+
+export function shallowEqual(
+  previous: Record<string, unknown>,
+  next: Record<string, unknown>,
+): boolean {
+  if (Object.is(previous, next)) {
+    return true;
+  }
+
+  const previousKeys = Object.keys(previous);
+  const nextKeys = Object.keys(next);
+
+  if (previousKeys.length !== nextKeys.length) {
+    return false;
+  }
+
+  return previousKeys.every(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(next, key) &&
+      Object.is(previous[key], next[key]),
+  );
+}
+
+export function getElementPendingProps(element: ReactCompatElement): unknown {
+  return getPendingProps(element);
+}

package/src/reconcile-types.ts

@@ -0,0 +1,26 @@
+import type { ReactCompatNode } from "./element.js";
+import type { RootRuntime } from "./hooks.js";
+import type { RenderOptions } from "./hydration.js";
+
+export interface ReconcileResult {
+  nodes: Node[];
+  consumed: number;
+}
+
+export type ReconcileNode = (
+  parent: ParentNode,
+  previousNodes: readonly Node[],
+  node: ReactCompatNode,
+  runtime: RootRuntime,
+  path: string,
+  options?: RenderOptions,
+) => ReconcileResult;
+
+export type ReconcileSequence = (
+  parent: ParentNode,
+  previousNodes: readonly Node[],
+  children: ReactCompatNode[],
+  runtime: RootRuntime,
+  path: string,
+  options?: RenderOptions,
+) => ReconcileResult;