@simpreact/simpreact 0.0.7 → 0.0.9

package/compat/context.js

@@ -1,7 +1,7 @@
-import * as SimpReactContext from '../context/index.js';
+import { createCreateContext, createUseContext } from '../context/index.js';
 import { renderRuntime } from './renderRuntime.js';
-export const createContext = SimpReactContext.createCreateContext(renderRuntime);
-export const useContext = SimpReactContext.createUseContext(renderRuntime);
+export const createContext = createCreateContext(renderRuntime);
+export const useContext = createUseContext(renderRuntime);
 export default {
     createContext,
     useContext,

package/compat/core.js

@@ -1,5 +1,23 @@
-import * as SimpReactInternal from '../core/internal.js';
+import { createElement as _createElement, createPortal as _createPortal, Fragment as _Fragment, memo as _memo, } from '../core/index.js';
+import { isFragment, isPortal, withSyncRerender } from '../core/internal.js';
 import { useCatch, useState } from './hooks.js';
+import { renderRuntime } from './renderRuntime.js';
+// Threads refs through FC elements without polluting string-keyed props.
+// Symbol keys are invisible to `for…in` and Object.keys, so they never
+// accidentally end up on HOST elements via `{...props}` spread.
+export const REF_SYMBOL = Symbol('simpreact.compat.ref');
+// Wraps core createElement to strip `ref` from FC props (matching React's
+// model where ref is not part of the props the component receives).
+export function createElement(type, props, ...args) {
+    if (typeof type === 'function' && props != null && 'ref' in props) {
+        const { ref, ...restProps } = props;
+        if (ref != null) {
+            restProps[REF_SYMBOL] = ref;
+        }
+        return _createElement(type, restProps, ...args);
+    }
+    return _createElement(type, props, ...args);
+}
 export const Children = {
     map(children, fn) {
         return Children.toArray(children).map(fn);
@@ -39,47 +57,112 @@ export function cloneElement(element, props, ...children) {
     if (!isValidElement(element)) {
         throw new Error(`cloneElement: expected a SimpElement, got ${element}`);
     }
-    if ((element.flag & SimpReactInternal.SIMP_ELEMENT_FLAG_PORTAL) !== 0) {
+    if (isPortal(element)) {
         throw new Error('cloneElement: the argument must be a SimpElement, but you passed a portal instead.');
     }
-    return SimpReactInternal.createElement((element.flag & SimpReactInternal.SIMP_ELEMENT_FLAG_FRAGMENT) !== 0 ? SimpReactInternal.Fragment : element.type, Object.assign({}, element.props, props), arguments.length > 2 ? children : props.children || element.children);
+    const mergedProps = Object.assign({}, element.props, props);
+    const resolvedChildren = arguments.length > 2 ? children : mergedProps.children !== undefined ? mergedProps.children : element.children;
+    return createElement(isFragment(element) ? Fragment : element.type, mergedProps, resolvedChildren);
 }
 export function isValidElement(element) {
     return typeof element === 'object' && element !== null && 'flag' in element;
 }
 export function Suspense(props) {
-    const [isSuspended, setIsSuspended] = useState(false);
+    const [pendingCount, setPendingCount] = useState(0);
     useCatch(error => {
         if (!(error instanceof Promise)) {
             throw error;
         }
-        if (isSuspended) {
-            return;
-        }
-        setIsSuspended(true);
-        error.then(() => setIsSuspended(false));
+        setPendingCount(c => c + 1);
+        error.then(() => setPendingCount(c => c - 1));
     });
-    return isSuspended ? props.fallback : props.children;
+    return pendingCount > 0 ? props.fallback : props.children;
 }
 export function StrictMode(props) {
     return props.children;
 }
+// Reads the ref from the Symbol slot so that string-keyed `ref` never
+// appears in the props the inner component receives.
 export function forwardRef(Component) {
     return function Forwarded(props) {
-        return Component(props, props?.ref || null);
+        const ref = props?.[REF_SYMBOL] ?? null;
+        if (props != null && REF_SYMBOL in props) {
+            const { [REF_SYMBOL]: _, ...restProps } = props;
+            return Component(restProps, ref);
+        }
+        return Component(props, ref);
     };
 }
-export const Fragment = SimpReactInternal.Fragment;
-export const createElement = SimpReactInternal.createElement;
-export const createPortal = SimpReactInternal.createPortal;
-export const memo = SimpReactInternal.memo;
-export const flushSync = (value) => value;
+export const version = '18.3.1';
+export const Fragment = _Fragment;
+export const createPortal = _createPortal;
+export const memo = _memo;
+// Minimal React / ReactDOM internals shim for react-dom/test-utils.
+export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
+    ReactCurrentOwner: { current: null },
+    ReactCurrentDispatcher: { current: null },
+    ReactCurrentBatchConfig: { transition: null },
+    // react-dom/test-utils: var EventInternals = SecretInternals.Events; EventInternals[0..4]
+    Events: [
+        /* getInstanceFromNode */ _node => null,
+        /* getNodeFromInstance */ _inst => null,
+        /* getFiberCurrentPropsFromNode */ _node => null,
+        /* enqueueStateRestore */ () => { },
+        /* restoreStateIfNeeded */ () => { },
+    ],
+};
+// react-dom/test-utils uses React.unstable_act / React.act for flushing updates.
+export async function unstable_act(callback) {
+    const result = callback();
+    if (result && typeof result.then === 'function')
+        await result;
+    await Promise.resolve();
+}
+export { unstable_act as act };
+export function flushSync(callback) {
+    let result;
+    withSyncRerender(renderRuntime, () => {
+        result = callback();
+    });
+    return result;
+}
+export function lazy(factory) {
+    let state = null;
+    return function LazyComponent(props) {
+        if (state === null) {
+            const promise = factory().then(mod => {
+                state = { status: 'resolved', component: mod.default };
+            }, reason => {
+                state = { status: 'rejected', reason };
+            });
+            state = { status: 'pending', promise };
+        }
+        if (state.status === 'pending') {
+            throw state.promise;
+        }
+        if (state.status === 'rejected') {
+            throw state.reason;
+        }
+        return createElement(state.component, props);
+    };
+}
+// Minimal base class for React-style class components.
+// setState and forceUpdate are no-ops here; the compat renderer overrides
+// them on each instance with real implementations backed by the render queue.
 export class Component {
-    constructor() {
-        throw new Error('Not implemented.');
+    constructor(props) {
+        this.props = props;
+        this.state = {};
+    }
+    setState(_updater, _callback) { }
+    forceUpdate(_callback) { }
+    render() {
+        throw new Error('Component.render() must be implemented by the subclass.');
     }
 }
+Component.prototype.isReactComponent = true;
 export default {
+    version,
     Children,
     cloneElement,
     isValidElement,
@@ -91,5 +174,9 @@ export default {
     createPortal,
     memo,
     flushSync,
+    lazy,
     Component,
+    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+    unstable_act,
+    act: unstable_act,
 };

package/compat/dom.js

@@ -1,9 +1,9 @@
-import * as SimpReactDOM from '../dom/index.js';
-import * as SimpReactShared from '../shared/index.js';
+import { createCreateRoot, createRenderer } from '../dom/index.js';
+import { noop } from '../shared/index.js';
 import { renderRuntime } from './renderRuntime.js';
-export const hydrate = SimpReactShared.noop;
-export const render = SimpReactDOM.createRenderer(renderRuntime);
-export const createRoot = SimpReactDOM.createCreateRoot(renderRuntime);
+export const hydrate = noop;
+export const render = createRenderer(renderRuntime);
+export const createRoot = createCreateRoot(renderRuntime);
 export default {
     hydrate,
     render,

package/compat/hooks.js

@@ -1,5 +1,5 @@
-import { createUseCatch, createUseEffect, createUseRef, createUseRerender, createUseState, } from '../hooks/index.js';
-import * as SimpReactShared from '../shared/index.js';
+import { createUseCatch, createUseEffect, createUseRef, createUseRerender, createUseState } from '../hooks/index.js';
+import { shallowEqual } from '../shared/index.js';
 import { renderRuntime } from './renderRuntime.js';
 export const useRerender = createUseRerender(renderRuntime);
 export const useState = createUseState(renderRuntime);
@@ -56,7 +56,7 @@ export function useMemo(factory, deps) {
         deps: undefined,
         value: undefined,
     });
-    if (!SimpReactShared.shallowEqual(ref.current.deps, deps)) {
+    if (!shallowEqual(ref.current.deps, deps)) {
         ref.current.value = factory();
         ref.current.deps = deps;
     }
@@ -65,15 +65,30 @@ export function useMemo(factory, deps) {
 export function useCallback(cb, deps) {
     return useMemo(() => cb, deps);
 }
+export function useImperativeHandle(ref, init, deps) {
+    useLayoutEffect(() => {
+        if (typeof ref === 'function') {
+            ref(init());
+        }
+        else if (ref != null) {
+            ref.current = init();
+        }
+    }, deps);
+}
+export function useDebugValue(_value, _format) { }
 export default {
     useSyncExternalStore,
     useReducer,
     useId,
     useMemo,
     useCallback,
+    useImperativeHandle,
+    useDebugValue,
     useState,
     useEffect,
     useLayoutEffect,
     useInsertionEffect,
     useRef,
+    useRerender,
+    useCatch,
 };

package/compat/index.d.ts

@@ -1,46 +1,110 @@
-export * from './context.js';
-export * from './core.js';
-export * from './dom.js';
-export * from './hooks.js';
-export * from './jsx-runtime.js';
-export * from './renderRuntime.js';
-declare const _default: {
-    renderRuntime: import("../core/runtime.js").SimpRenderRuntime;
-    jsx: typeof import("../jsx-runtime/index.js").jsx;
-    jsxDEV: typeof import("../jsx-runtime/index.js").jsx;
-    jsxs: typeof import("../jsx-runtime/index.js").jsx;
-    useSyncExternalStore: typeof import("./hooks.js").useSyncExternalStore;
-    useReducer: typeof import("./hooks.js").useReducer;
-    useId: typeof import("./hooks.js").useId;
-    useMemo: typeof import("./hooks.js").useMemo;
-    useCallback: typeof import("./hooks.js").useCallback;
-    useState: import("../hooks/index.js").UseState;
-    useEffect: (effect: import("../shared/public.js").Effect, deps?: import("../shared/public.js").DependencyList) => void;
-    useLayoutEffect: (effect: import("../shared/public.js").Effect, deps?: import("../shared/public.js").DependencyList) => void;
-    useInsertionEffect: (effect: import("../shared/public.js").Effect, deps?: import("../shared/public.js").DependencyList) => void;
-    useRef: import("../hooks/index.js").UseRef;
-    hydrate: typeof import("../shared/utils.js").noop;
-    render: (element: import("../shared/public.js").Nullable<import("../core/createElement.js").SimpElement>, container: import("../shared/public.js").Nullable<Element | DocumentFragment>) => void;
-    createRoot: (container: Element | DocumentFragment) => import("../dom/render.js").SimpRoot;
-    Children: {
-        map(children: import("../core/createElement.js").SimpNode, fn: (child: import("../core/createElement.js").SimpNode, index: number) => import("../core/createElement.js").SimpNode): import("../core/createElement.js").SimpNode[];
-        forEach(children: import("../core/createElement.js").SimpNode, fn: (child: import("../core/createElement.js").SimpNode, index: number) => void): void;
-        count(children: import("../core/createElement.js").SimpNode): number;
-        toArray(children: import("../core/createElement.js").SimpNode): import("../core/createElement.js").SimpNode[];
-        only(children: import("../core/createElement.js").SimpNode): import("../core/createElement.js").SimpElement;
-    };
-    cloneElement: typeof import("./core.js").cloneElement;
-    isValidElement: typeof import("./core.js").isValidElement;
-    Suspense: typeof import("./core.js").Suspense;
-    StrictMode: typeof import("./core.js").StrictMode;
-    forwardRef: typeof import("./core.js").forwardRef;
-    Fragment: import("../core/fragment.js").Fragment;
-    createElement: typeof import("../core/createElement.js").createElement;
-    createPortal: typeof import("../core/portal.js").createPortal;
-    memo: typeof import("../core/memo.js").memo;
-    flushSync: (value: any) => any;
-    Component: typeof import("./core.js").Component;
-    createContext: import("../context/index.js").CreateContext;
-    useContext: import("../context/index.js").UseContext;
+import type { SimpContext } from '../context/index.js';
+import type {
+  Attributes,
+  FC,
+  FunctionalComponent,
+  Key,
+  Ref,
+  RefAttributes,
+  RefObject,
+  SimpElement,
+  SimpNode,
+  SimpRenderRuntime,
+} from '../core/index.js';
+import type { SimpRoot } from '../dom/index.js';
+import type { Dispatch, SetStateAction } from '../hooks/index.js';
+import type { DependencyList, Effect, Maybe, Nullable } from '../shared/index.js';
+
+export type { SimpContext } from '../context/index.js';
+export type {
+  Attributes,
+  FC,
+  FunctionalComponent,
+  Key,
+  Ref,
+  RefAttributes,
+  RefObject,
+  SimpElement,
+  SimpNode,
+  SimpRenderRuntime,
+} from '../core/index.js';
+export type { SimpRoot } from '../dom/index.js';
+export type { Dispatch, SetStateAction } from '../hooks/index.js';
+export type { DependencyList, Effect, Maybe, Nullable } from '../shared/index.js';
+
+export declare const renderRuntime: SimpRenderRuntime;
+
+export declare function jsx<P = {}>(type: string | FC<P>, props?: P, key?: Maybe<Key>): SimpElement<P>;
+export declare function jsxs<P = {}>(type: string | FC<P>, props?: P, key?: Maybe<Key>): SimpElement<P>;
+export declare function jsxDEV<P = {}>(type: string | FC<P>, props?: P, key?: Maybe<Key>): SimpElement<P>;
+
+export declare function useSyncExternalStore<T>(
+  subscribe: (callback: () => void) => () => void,
+  getSnapshot: () => T
+): T;
+export declare function useReducer<R extends (state: any, action: any) => any, I>(
+  reducer: R,
+  initializerArg: I,
+  initializer?: (arg: I) => ReturnType<R>
+): [ReturnType<R>, (action: Parameters<R>[1]) => void];
+export declare function useId(prefix?: string): string;
+export declare function useMemo<T>(factory: () => T, deps: DependencyList): T;
+export declare function useCallback<T>(cb: T, deps: DependencyList): T;
+export declare function useImperativeHandle<T>(
+  ref: { current: T | null } | ((value: T | null) => void) | null | undefined,
+  init: () => T,
+  deps?: DependencyList
+): void;
+export declare function useDebugValue(value: unknown, format?: (value: unknown) => unknown): void;
+export declare function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
+export declare function useState<S>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
+export declare function useEffect(effect: Effect, deps?: DependencyList): void;
+export declare function useLayoutEffect(effect: Effect, deps?: DependencyList): void;
+export declare function useInsertionEffect(effect: Effect, deps?: DependencyList): void;
+export declare function useRef<T>(initialValue: T): RefObject<T>;
+export declare function useRef<T>(initialValue: T | null): RefObject<T | null>;
+export declare function useRef<T = undefined>(initialValue?: T): RefObject<T | undefined>;
+export declare function useCatch(handler: (error: unknown) => void): void;
+
+export declare function hydrate(): void;
+export declare function render(element: SimpElement, parentReference: Nullable<HTMLElement>): void;
+export declare function createRoot(container: Element | DocumentFragment): SimpRoot;
+
+export declare const Children: {
+  map(children: SimpNode, fn: (child: SimpNode, index: number) => SimpNode): SimpNode[];
+  forEach(children: SimpNode, fn: (child: SimpNode, index: number) => void): void;
+  count(children: SimpNode): number;
+  toArray(children: SimpNode): SimpNode[];
+  only(children: SimpNode): SimpElement;
 };
-export default _default;
+
+export declare function cloneElement(element: SimpElement, props?: any, ...children: SimpNode[]): SimpElement;
+export declare function isValidElement(element: unknown): element is SimpElement;
+export declare function Suspense(props: { fallback: SimpNode; children: SimpNode }): SimpNode;
+export declare function StrictMode(props: { children: SimpNode }): SimpNode;
+export declare function forwardRef<P, T>(Component: (props: P, ref: Ref<T>) => any): FC;
+export declare function Fragment(props: { children?: SimpNode }): SimpNode;
+
+export declare function createElement<P extends {}, T>(
+  type: string,
+  props?: (RefAttributes<T> & P) | null,
+  ...children: SimpNode[]
+): SimpElement<P>;
+export declare function createElement<P extends {}>(
+  type: FunctionalComponent<P>,
+  props?: (Attributes & P) | null,
+  ...children: SimpNode[]
+): SimpElement<P>;
+
+export declare function createPortal(children: SimpNode, container: any): SimpElement;
+
+export declare function memo(Component: FC, compare: (objA: any, objB: any) => boolean): FC;
+export declare function flushSync(value: any): any;
+export declare function lazy<T extends FC<any>>(factory: () => Promise<{ default: T }>): FC<any>;
+
+export declare const version: string;
+
+export declare class Component {}
+
+export declare function createContext<T>(defaultValue: T): SimpContext<T>;
+export declare function useContext<T>(context: SimpContext<T>): T;

package/compat/jsx-runtime.js

@@ -1,7 +1,7 @@
-import * as SimpReactJSXRuntime from '../jsx-runtime/index.js';
-export const jsx = SimpReactJSXRuntime.jsx;
-export const jsxDEV = SimpReactJSXRuntime.jsxDEV;
-export const jsxs = SimpReactJSXRuntime.jsxs;
+import { jsx as _jsx, jsxDEV as _jsxDEV, jsxs as _jsxs } from '../jsx-runtime/index.js';
+export const jsx = _jsx;
+export const jsxDEV = _jsxDEV;
+export const jsxs = _jsxs;
 export default {
     jsx,
     jsxDEV,

package/compat/renderRuntime.js

@@ -1,17 +1,52 @@
 import { domAdapter } from '../dom/index.js';
+import { createUseEffect, createUseRef, createUseRerender } from '../hooks/index.js';
+import { createRenderRuntime } from '../core/internal.js';
 import { emptyObject } from '../shared/index.js';
-export const renderRuntime = {
-    hostAdapter: domAdapter,
-    renderer(component, element) {
-        return component(element.props || emptyObject);
-    },
-    elementToHostMap: new Map(),
-    renderStack: [],
-    currentRenderingFCElement: null,
-    renderPhase: null,
-};
+// Lazily assigned after renderRuntime is created to avoid a circular reference
+// at module-evaluation time. All are set before any render can fire.
+let useRef;
+let useRerender;
+let useLayoutEffect;
+export const renderRuntime = createRenderRuntime(domAdapter, function renderer(component, element) {
+    const props = element.props || emptyObject;
+    const proto = component.prototype;
+    if (proto?.isReactComponent || proto?.render) {
+        // Persist the instance across re-renders so state is not reset on every
+        // render cycle. Hook calls run in the current FC render context.
+        const instRef = useRef(null);
+        const rerender = useRerender();
+        if (instRef.current === null) {
+            instRef.current = new component(props);
+            if (instRef.current.state == null) {
+                instRef.current.state = {};
+            }
+        }
+        const inst = instRef.current;
+        inst.props = props;
+        // Override the no-op stubs from Component base with real implementations.
+        inst.setState = function (updater, callback) {
+            const prevState = inst.state;
+            const patch = typeof updater === 'function' ? updater(prevState, inst.props) : updater;
+            inst.state = Object.assign({}, prevState, patch);
+            rerender();
+            callback?.();
+        };
+        inst.forceUpdate = function (callback) {
+            rerender();
+            callback?.();
+        };
+        useLayoutEffect(() => {
+            if (typeof inst.componentDidMount === 'function') {
+                inst.componentDidMount();
+            }
+        }, []);
+        return inst.render();
+    }
+    return component(props);
+});
+useRef = createUseRef(renderRuntime);
+useRerender = createUseRerender(renderRuntime);
+useLayoutEffect = createUseEffect(renderRuntime);
 export default {
     renderRuntime,
 };
-// TODO
-window.__SIMP_RUNTIME__ = renderRuntime;

package/component/index.d.ts

@@ -1,8 +1,5 @@
-import type { FC, SimpNode } from '../core/index.js';
-
-export type Cleanup = () => void;
-export type Effect = () => void | Cleanup;
-export type DependencyList = readonly unknown[];
+import type { FC, SimpElement, SimpNode } from '../core/index.js';
+import type { DependencyList, Effect } from '../shared/index.js';
 
 export interface ComponentRenderContext<S = {}> {
   state: S;
@@ -11,6 +8,8 @@ export interface ComponentRenderContext<S = {}> {
   catchers: Array<(error: any) => void>;
 }
 
-declare function component<P = {}, S = {}>(Component: (props: P, ctx: ComponentRenderContext<S>) => SimpNode): FC<P>;
+export declare function component<P = {}, S = {}>(
+  Component: (props: P, ctx: ComponentRenderContext<S>) => SimpNode
+): FC<P>;
 
-export function componentRenderer(component: FC, element: SimpElement): SimpNode;
+export declare function componentRenderer(component: FC, element: SimpElement): SimpNode;