@reckona/mreact-compat 0.0.90 → 0.0.92

package/src/class-component.ts

@@ -5,6 +5,8 @@ import type { ReconcileNode, ReconcileResult } from "./reconcile-types.js";
 import { isThenable } from "./thenable.js";
 import { shallowEqual } from "./prop-comparison.js";
 
+const CLASS_COMPONENT_RUNTIME_OWNER = Symbol.for("modular.react.class_component_runtime");
+
 export interface ClassComponentInstance {
   props: Record<string, unknown>;
   state?: Record<string, unknown>;
@@ -46,43 +48,144 @@ export interface ClassComponentType {
   getDerivedStateFromError?: (error: Error) => Record<string, unknown> | null;
 }
 
-export class Component<
+export interface Component<
   P extends Record<string, unknown> = Record<string, unknown>,
   S extends Record<string, unknown> = Record<string, unknown>,
 > {
   props: P;
   state?: S;
-  setState!: ClassComponentInstance["setState"];
-  forceUpdate!: ClassComponentInstance["forceUpdate"];
-
-  constructor(props: P) {
-    this.props = props;
-  }
+  setState(
+    partial:
+      | Partial<S>
+      | ((
+          previousState: Readonly<S>,
+          props: Readonly<P>,
+        ) => Partial<S> | S | null),
+    callback?: () => void,
+  ): void;
+  forceUpdate(callback?: () => void): void;
+  render(): ReactCompatNode;
+}
 
-  render(): ReactCompatNode {
-    return null;
-  }
+export interface ComponentConstructor {
+  new <
+    P extends Record<string, unknown> = Record<string, unknown>,
+    S extends Record<string, unknown> = Record<string, unknown>,
+  >(props: P): Component<P, S>;
+  <
+    P extends Record<string, unknown> = Record<string, unknown>,
+    S extends Record<string, unknown> = Record<string, unknown>,
+  >(this: Component<P, S>, props: P): void;
+  prototype: Component<any, any>;
 }
 
-export class PureComponent<
+export const Component: ComponentConstructor = function Component<
+  P extends Record<string, unknown> = Record<string, unknown>,
+  S extends Record<string, unknown> = Record<string, unknown>,
+>(this: Component<P, S>, props: P): void {
+  this.props = props;
+} as ComponentConstructor;
+
+Component.prototype.setState = function setState<
+  P extends Record<string, unknown>,
+  S extends Record<string, unknown>,
+>(
+  this: Component<P, S>,
+  partial:
+    | Partial<S>
+    | ((
+        previousState: Readonly<S>,
+        props: Readonly<P>,
+      ) => Partial<S> | S | null),
+  callback?: () => void,
+): void {
+  enqueueClassSetState(
+    this as unknown as ClassComponentInstance,
+    partial as Parameters<NonNullable<ClassComponentInstance["setState"]>>[0],
+    callback,
+  );
+};
+
+Component.prototype.forceUpdate = function forceUpdate(
+  this: Component,
+  callback?: () => void,
+): void {
+  enqueueClassForceUpdate(this as unknown as ClassComponentInstance, callback);
+};
+
+Component.prototype.render = function render(): ReactCompatNode {
+  return null;
+};
+
+export interface PureComponent<
   P extends Record<string, unknown> = Record<string, unknown>,
   S extends Record<string, unknown> = Record<string, unknown>,
 > extends Component<P, S> {
-  shouldComponentUpdate(nextProps: P, nextState: S): boolean {
-    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state ?? {}, nextState ?? {});
-  }
+  shouldComponentUpdate(nextProps: P, nextState: S): boolean;
+}
+
+export interface PureComponentConstructor {
+  new <
+    P extends Record<string, unknown> = Record<string, unknown>,
+    S extends Record<string, unknown> = Record<string, unknown>,
+  >(props: P): PureComponent<P, S>;
+  <
+    P extends Record<string, unknown> = Record<string, unknown>,
+    S extends Record<string, unknown> = Record<string, unknown>,
+  >(this: PureComponent<P, S>, props: P): void;
+  prototype: PureComponent<any, any>;
 }
 
+export const PureComponent: PureComponentConstructor = function PureComponent<
+  P extends Record<string, unknown> = Record<string, unknown>,
+  S extends Record<string, unknown> = Record<string, unknown>,
+>(this: PureComponent<P, S>, props: P): void {
+  (Component as unknown as (this: unknown, props: unknown) => void).call(
+    this,
+    props,
+  );
+} as PureComponentConstructor;
+
+PureComponent.prototype = Object.create(Component.prototype) as PureComponent<any, any>;
+PureComponent.prototype.constructor = PureComponent;
+PureComponent.prototype.shouldComponentUpdate = function shouldComponentUpdate<
+  P extends Record<string, unknown>,
+  S extends Record<string, unknown>,
+>(
+  this: PureComponent<P, S>,
+  nextProps: P,
+  nextState: S,
+): boolean {
+  return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state ?? {}, nextState ?? {});
+};
+
 interface ClassLifecycleSnapshot {
   previousState?: Record<string, unknown>;
+  nextState?: Record<string, unknown>;
   force?: boolean;
   snapshot?: unknown;
 }
 
-const classLifecycleSnapshots = new WeakMap<
-  ClassComponentInstance,
-  ClassLifecycleSnapshot
->();
+interface ClassUpdateContext {
+  runtime: RootRuntime;
+  path: string;
+}
+
+interface ClassComponentGlobalState {
+  lifecycleSnapshots: WeakMap<ClassComponentInstance, ClassLifecycleSnapshot>;
+  updateContexts: WeakMap<ClassComponentInstance, ClassUpdateContext>;
+}
+
+const CLASS_COMPONENT_STATE_KEY = Symbol.for("modular.react.class_component_state");
+const classComponentGlobalState =
+  ((globalThis as typeof globalThis & Record<symbol, ClassComponentGlobalState | undefined>)[
+    CLASS_COMPONENT_STATE_KEY
+  ] ??= {
+    lifecycleSnapshots: new WeakMap(),
+    updateContexts: new WeakMap(),
+  });
+const classLifecycleSnapshots = classComponentGlobalState.lifecycleSnapshots;
+const classUpdateContexts = classComponentGlobalState.updateContexts;
 
 export type ClassComponentRenderResult =
   | {
@@ -152,6 +255,7 @@ export function renderClassComponentWithRuntime(
   props: Record<string, unknown>,
   runtime: RootRuntime,
   path: string,
+  options: { hasDirtyDescendant?: boolean } = {},
 ): ClassComponentRenderResult {
   return renderWithRootRuntime(runtime, path, () => {
     const instanceRef = useRef<ClassComponentInstance | undefined>(undefined);
@@ -163,6 +267,7 @@ export function renderClassComponentWithRuntime(
 
     if (hasDifferentType) {
       classLifecycleSnapshots.delete(previousInstance);
+      classUpdateContexts.delete(previousInstance);
       didCommitRef.current = false;
       instanceRef.current = undefined;
     }
@@ -176,15 +281,20 @@ export function renderClassComponentWithRuntime(
     const previousState = snapshot?.previousState ?? instance.state ?? {};
 
     instanceRef.current = instance;
-    installClassUpdateMethods(instance, runtime);
-    applyDerivedStateFromProps(type, instance, props, previousState);
-    const nextState = instance.state ?? {};
+    installClassUpdateMethods(instance, runtime, path);
+    const nextState = resolveDerivedStateFromProps(
+      type,
+      props,
+      snapshot?.nextState ?? instance.state ?? {},
+    );
     const shouldSkipUpdate =
       didCommitRef.current &&
       snapshot?.force !== true &&
+      options.hasDirtyDescendant !== true &&
       instance.shouldComponentUpdate?.(props, nextState) === false;
 
     instance.props = props;
+    instance.state = nextState;
     installClassLifecycleEffects(
       instance,
       didCommitRef,
@@ -221,7 +331,7 @@ export function renderClassComponentWithRuntime(
 
       return { kind: "render", node: fallbackNode, instance, type };
     }
-  });
+  }, CLASS_COMPONENT_RUNTIME_OWNER);
 }
 
 export function applyDerivedStateFromProps(
@@ -230,14 +340,22 @@ export function applyDerivedStateFromProps(
   nextProps: Record<string, unknown>,
   previousState: Record<string, unknown>,
 ): void {
+  instance.state = resolveDerivedStateFromProps(type, nextProps, previousState);
+}
+
+export function resolveDerivedStateFromProps(
+  type: ClassComponentType,
+  nextProps: Record<string, unknown>,
+  previousState: Record<string, unknown>,
+): Record<string, unknown> {
   const derivedState = type.getDerivedStateFromProps?.(nextProps, previousState);
 
   if (derivedState === undefined || derivedState === null) {
-    return;
+    return previousState;
   }
 
-  instance.state = {
-    ...instance.state,
+  return {
+    ...previousState,
     ...derivedState,
   };
 }
@@ -329,35 +447,78 @@ export function reconcileErrorBoundary(
 function installClassUpdateMethods(
   instance: ClassComponentInstance,
   runtime: RootRuntime,
+  path: string,
 ): void {
-  instance.setState = (partial, callback): void => {
-    const previousState = instance.state ?? {};
-    if (!classLifecycleSnapshots.has(instance)) {
-      classLifecycleSnapshots.set(instance, { previousState });
-    }
-    const nextPartial =
-      typeof partial === "function"
-        ? partial(previousState, instance.props)
-        : partial;
-
-    if (nextPartial !== null) {
-      instance.state = {
-        ...previousState,
-        ...nextPartial,
-      };
-    }
+  classUpdateContexts.set(instance, { runtime, path });
+  instance.setState = Component.prototype.setState;
+  instance.forceUpdate = Component.prototype.forceUpdate;
+}
+
+function enqueueClassSetState(
+  instance: ClassComponentInstance,
+  partial: Parameters<NonNullable<ClassComponentInstance["setState"]>>[0],
+  callback?: () => void,
+): void {
+  const updateContext = classUpdateContexts.get(instance);
 
-    runtime.rerender();
+  if (updateContext === undefined) {
     callback?.call(instance);
-  };
-  instance.forceUpdate = (callback): void => {
-    classLifecycleSnapshots.set(instance, {
-      previousState: instance.state ?? {},
-      force: true,
-    });
-    runtime.rerender();
+    return;
+  }
+
+  const snapshot = classLifecycleSnapshots.get(instance);
+  const previousState = snapshot?.previousState ?? instance.state ?? {};
+  const baseState = snapshot?.nextState ?? instance.state ?? {};
+  const nextPartial =
+    typeof partial === "function"
+      ? partial(baseState, instance.props)
+      : partial;
+
+  const nextState =
+    nextPartial === null
+      ? baseState
+      : {
+          ...baseState,
+          ...nextPartial,
+        };
+
+  classLifecycleSnapshots.set(instance, {
+    ...snapshot,
+    previousState,
+    nextState,
+  });
+
+  markClassInstanceDirty(updateContext);
+  callback?.call(instance);
+}
+
+function enqueueClassForceUpdate(
+  instance: ClassComponentInstance,
+  callback?: () => void,
+): void {
+  const updateContext = classUpdateContexts.get(instance);
+
+  if (updateContext === undefined) {
     callback?.call(instance);
-  };
+    return;
+  }
+
+  classLifecycleSnapshots.set(instance, {
+    previousState: instance.state ?? {},
+    force: true,
+  });
+  markClassInstanceDirty(updateContext);
+  callback?.call(instance);
+}
+
+function markClassInstanceDirty(updateContext: ClassUpdateContext): void {
+  const runtimeInstance = updateContext.runtime.instances.get(updateContext.path) as
+    | { dirty?: boolean }
+    | undefined;
+  if (runtimeInstance !== undefined) {
+    runtimeInstance.dirty = true;
+  }
+  updateContext.runtime.rerender();
 }
 
 function installClassLifecycleEffects(
@@ -369,7 +530,10 @@ function installClassLifecycleEffects(
   replacedInstance?: ClassComponentInstance,
 ): void {
   useLayoutEffect(() => {
-    replacedInstance?.componentWillUnmount?.();
+    if (replacedInstance !== undefined) {
+      replacedInstance.componentWillUnmount?.();
+      classUpdateContexts.delete(replacedInstance);
+    }
 
     if (skipUpdate) {
       classLifecycleSnapshots.delete(instance);
@@ -394,6 +558,7 @@ function installClassLifecycleEffects(
     return () => {
       instance.componentWillUnmount?.();
       classLifecycleSnapshots.delete(instance);
+      classUpdateContexts.delete(instance);
     };
   }, []);
 }

package/src/context.ts

@@ -1,5 +1,5 @@
-const REACT_COMPAT_PROVIDER_TYPE = Symbol.for("modular.react.provider");
-const REACT_COMPAT_CONSUMER_TYPE = Symbol.for("modular.react.consumer");
+const REACT_COMPAT_PROVIDER_TYPE = Symbol.for("react.context");
+const REACT_COMPAT_CONSUMER_TYPE = Symbol.for("react.consumer");
 
 export interface ReactCompatContext<T> {
   defaultValue: T;
@@ -9,18 +9,50 @@ export interface ReactCompatContext<T> {
   displayName: string | undefined;
 }
 
+export interface ReactCompatExternalContext<T> {
+  $$typeof: typeof REACT_COMPAT_PROVIDER_TYPE;
+  _currentValue?: T;
+  _currentValue2?: T;
+  _defaultValue?: T;
+  Provider?: unknown;
+  Consumer?: unknown;
+  displayName?: string | undefined;
+}
+
+export type ReactCompatContextLike<T> =
+  | ReactCompatContext<T>
+  | ReactCompatExternalContext<T>;
+
 export interface ReactCompatProvider<T> {
   $$typeof: typeof REACT_COMPAT_PROVIDER_TYPE;
-  context: ReactCompatContext<T>;
+  context?: ReactCompatContextLike<T>;
   displayName: string | undefined;
 }
 
 export interface ReactCompatConsumer<T> {
   $$typeof: typeof REACT_COMPAT_CONSUMER_TYPE;
-  context: ReactCompatContext<T>;
+  context?: ReactCompatContextLike<T>;
+  _context?: ReactCompatContextLike<T>;
   displayName: string | undefined;
 }
 
+type ContextReadObserver = (context: ReactCompatContextLike<unknown>, value: unknown) => void;
+interface ContextReadObserverState {
+  current: ContextReadObserver | undefined;
+}
+
+const externalContextValues = new WeakMap<object, unknown[]>();
+
+const CONTEXT_READ_OBSERVER_STATE_KEY = Symbol.for(
+  "modular.react.context_read_observer_state",
+);
+const contextReadObserverState =
+  ((globalThis as typeof globalThis & Record<symbol, ContextReadObserverState | undefined>)[
+    CONTEXT_READ_OBSERVER_STATE_KEY
+  ] ??= {
+    current: undefined,
+  });
+
 export function createContext<T>(defaultValue: T): ReactCompatContext<T> {
   const context: ReactCompatContext<T> = {
     defaultValue,
@@ -62,8 +94,37 @@ function installContextDisplayName<T>(context: ReactCompatContext<T>): void {
   });
 }
 
-export function useContext<T>(context: ReactCompatContext<T>): T {
-  return context.values.at(-1) ?? context.defaultValue;
+export function useContext<T>(context: ReactCompatContextLike<T>): T {
+  const value = readContextValue(context);
+  contextReadObserverState.current?.(context as ReactCompatContextLike<unknown>, value);
+  return value;
+}
+
+export function readContextValue<T>(context: ReactCompatContextLike<T>): T {
+  if (isInternalContextRecord(context)) {
+    return context.values.at(-1) ?? context.defaultValue;
+  }
+
+  return (
+    (externalContextValues.get(context)?.at(-1) as T | undefined) ??
+    context._currentValue ??
+    context._currentValue2 ??
+    (context._defaultValue as T)
+  );
+}
+
+export function withContextReadObserver<T>(
+  observer: ContextReadObserver,
+  render: () => T,
+): T {
+  const previousObserver = contextReadObserverState.current;
+  contextReadObserverState.current = observer;
+
+  try {
+    return render();
+  } finally {
+    contextReadObserverState.current = previousObserver;
+  }
 }
 
 export function isReactCompatProvider(
@@ -117,11 +178,27 @@ export function pushContextProvider<T>(
   provider: ReactCompatProvider<T>,
   value: T,
 ): void {
-  provider.context.values.push(value);
+  const context = providerContext(provider);
+
+  if (isInternalContextRecord(context)) {
+    context.values.push(value);
+    return;
+  }
+
+  const values = externalContextValues.get(context) ?? [];
+  values.push(value);
+  externalContextValues.set(context, values);
 }
 
 export function popContextProvider<T>(provider: ReactCompatProvider<T>): void {
-  provider.context.values.pop();
+  const context = providerContext(provider);
+
+  if (isInternalContextRecord(context)) {
+    context.values.pop();
+    return;
+  }
+
+  externalContextValues.get(context)?.pop();
 }
 
 export function renderContextProviderToString<T>(
@@ -136,5 +213,27 @@ export function renderContextConsumerToString<T>(
   consumer: ReactCompatConsumer<T>,
   render: (value: T) => string,
 ): string {
-  return render(useContext(consumer.context));
+  return render(useContext(consumerContext(consumer)));
+}
+
+export function providerContext<T>(
+  provider: ReactCompatProvider<T>,
+): ReactCompatContextLike<T> {
+  return provider.context ?? (provider as unknown as ReactCompatExternalContext<T>);
+}
+
+export function consumerContext<T>(
+  consumer: ReactCompatConsumer<T>,
+): ReactCompatContextLike<T> {
+  return (
+    consumer.context ??
+    consumer._context ??
+    (consumer as unknown as ReactCompatExternalContext<T>)
+  );
+}
+
+function isInternalContextRecord<T>(
+  context: ReactCompatContextLike<T>,
+): context is ReactCompatContext<T> {
+  return "values" in context && Array.isArray(context.values);
 }