@simpreact/simpreact 0.0.8 → 0.0.9

package/compat/core.js

@@ -1,6 +1,23 @@
 import { createElement as _createElement, createPortal as _createPortal, Fragment as _Fragment, memo as _memo, } from '../core/index.js';
-import { SIMP_ELEMENT_FLAG_FRAGMENT, SIMP_ELEMENT_FLAG_PORTAL } from '../core/internal.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);
@@ -40,47 +57,112 @@ export function cloneElement(element, props, ...children) {
     if (!isValidElement(element)) {
         throw new Error(`cloneElement: expected a SimpElement, got ${element}`);
     }
-    if ((element.flag & 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 createElement((element.flag & SIMP_ELEMENT_FLAG_FRAGMENT) !== 0 ? 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 version = '18.3.1';
 export const Fragment = _Fragment;
-export const createElement = _createElement;
 export const createPortal = _createPortal;
 export const memo = _memo;
-export const flushSync = (value) => value;
+// 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,
@@ -92,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/hooks.js

@@ -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

@@ -50,6 +50,12 @@ export declare function useReducer<R extends (state: any, action: any) => any, I
 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;
@@ -58,7 +64,7 @@ export declare function useInsertionEffect(effect: Effect, deps?: DependencyList
 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(errorBoundary: FC): [Error | null, (error: Error) => void];
+export declare function useCatch(handler: (error: unknown) => void): void;
 
 export declare function hydrate(): void;
 export declare function render(element: SimpElement, parentReference: Nullable<HTMLElement>): void;
@@ -94,6 +100,9 @@ export declare function createPortal(children: SimpNode, container: any): SimpEl
 
 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 {}
 

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.js

@@ -1,11 +1,11 @@
-import { lifecycleEventBus, rerender, SIMP_ELEMENT_FLAG_FC, } from '../core/internal.js';
+import { isFC, registerLifecyclePlugin, rerender, } from '../core/internal.js';
 import { emptyObject, shallowEqual, } from '../shared/index.js';
-const componentSpecificStoreByElementStore = new WeakMap();
-function getComponentSpecificStore(store, renderRuntime) {
-    let hooksSpecificStore = componentSpecificStoreByElementStore.get(store);
+const componentSpecificStoreByElement = new WeakMap();
+function getComponentSpecificStore(element, renderRuntime) {
+    let hooksSpecificStore = componentSpecificStoreByElement.get(element);
     if (!hooksSpecificStore) {
         function _rerender() {
-            rerender(store, renderRuntime);
+            rerender(element, renderRuntime);
         }
         hooksSpecificStore = {
             context: {
@@ -17,121 +17,123 @@ function getComponentSpecificStore(store, renderRuntime) {
             pendingEffectStates: null,
             effectStates: null,
         };
-        componentSpecificStoreByElementStore.set(store, hooksSpecificStore);
+        componentSpecificStoreByElement.set(element, hooksSpecificStore);
     }
     return hooksSpecificStore;
 }
-lifecycleEventBus.subscribe(event => {
-    if (event.type === 'errored') {
-        if (event.handled) {
-            return;
-        }
-        let element = event.element;
-        let curError = event.error;
-        let catchers;
-        while (element) {
-            if (!isComponentElement(element)) {
-                element = element.parent;
-                continue;
-            }
-            const store = getComponentSpecificStore(element.store, event.renderRuntime);
-            catchers = store.context.catchers;
-            if (!catchers) {
-                element = element.parent;
-                continue;
+registerLifecyclePlugin(bus => {
+    bus.subscribe(event => {
+        if (event.type === 'errored') {
+            if (event.handled) {
+                return;
             }
-            try {
-                for (let i = 0; i < catchers.length; i++) {
-                    catchers[i](curError);
+            let element = event.element;
+            let curError = event.error;
+            let catchers;
+            while (element) {
+                if (!isComponentElement(element)) {
+                    element = element.parent;
+                    continue;
+                }
+                const store = getComponentSpecificStore(element, event.renderRuntime);
+                catchers = store.context.catchers;
+                if (!catchers) {
+                    element = element.parent;
+                    continue;
+                }
+                try {
+                    for (let i = 0; i < catchers.length; i++) {
+                        catchers[i](curError);
+                    }
+                    event.handled = true;
+                    break;
+                }
+                catch (error) {
+                    element = element.parent;
+                    curError = error;
                 }
-                event.handled = true;
-                break;
-            }
-            catch (error) {
-                element = element.parent;
-                curError = error;
             }
+            return;
         }
-        return;
-    }
-    if (!isComponentElement(event.element)) {
-        return;
-    }
-    const store = getComponentSpecificStore(event.element.store, event.renderRuntime);
-    switch (event.type) {
-        case 'beforeRender': {
-            store.context.effects = [];
-            store.context.catchers = [];
-            store.pendingEffectStates = null;
+        if (!isComponentElement(event.element)) {
             return;
         }
-        case 'afterRender': {
-            if (!store.context.effects) {
+        const store = getComponentSpecificStore(event.element, event.renderRuntime);
+        switch (event.type) {
+            case 'beforeRender': {
+                store.context.effects = [];
+                store.context.catchers = [];
+                store.pendingEffectStates = null;
                 return;
             }
-            for (let i = 0; i < store.context.effects.length; i++) {
-                const renderEffectState = store.context.effects[i];
-                let state = (store.effectStates ||= [])[i];
-                if (!state) {
-                    state = store.effectStates[i] = {
-                        effect: renderEffectState.effect,
-                        deps: null,
-                        cleanup: null,
-                    };
+            case 'afterRender': {
+                if (!store.context.effects) {
+                    return;
                 }
-                if (!shallowEqual(renderEffectState.deps, state.deps)) {
-                    state.effect = renderEffectState.effect;
-                    state.deps = renderEffectState.deps || null;
-                    (store.pendingEffectStates ||= []).push(state);
+                for (let i = 0; i < store.context.effects.length; i++) {
+                    const renderEffectState = store.context.effects[i];
+                    let state = (store.effectStates ||= [])[i];
+                    if (!state) {
+                        state = store.effectStates[i] = {
+                            effect: renderEffectState.effect,
+                            deps: null,
+                            cleanup: null,
+                        };
+                    }
+                    if (!shallowEqual(renderEffectState.deps, state.deps)) {
+                        state.effect = renderEffectState.effect;
+                        state.deps = renderEffectState.deps || null;
+                        (store.pendingEffectStates ||= []).push(state);
+                    }
                 }
-            }
-            return;
-        }
-        case 'mounted': {
-            if (!store.pendingEffectStates) {
                 return;
             }
-            const effects = store.pendingEffectStates;
-            store.pendingEffectStates = null;
-            for (const state of effects) {
-                if (typeof state.cleanup === 'function') {
-                    state.cleanup();
+            case 'mounted': {
+                if (!store.pendingEffectStates) {
+                    return;
+                }
+                const effects = store.pendingEffectStates;
+                store.pendingEffectStates = null;
+                for (const state of effects) {
+                    if (typeof state.cleanup === 'function') {
+                        state.cleanup();
+                    }
+                    state.cleanup = state.effect() || null;
                 }
-                state.cleanup = state.effect() || null;
-            }
-            return;
-        }
-        case 'updated': {
-            if (!store.pendingEffectStates) {
                 return;
             }
-            const effects = store.pendingEffectStates;
-            store.pendingEffectStates = null;
-            for (const state of effects) {
-                if (typeof state.cleanup === 'function') {
-                    state.cleanup();
+            case 'updated': {
+                if (!store.pendingEffectStates) {
+                    return;
+                }
+                const effects = store.pendingEffectStates;
+                store.pendingEffectStates = null;
+                for (const state of effects) {
+                    if (typeof state.cleanup === 'function') {
+                        state.cleanup();
+                    }
+                    state.cleanup = state.effect() || null;
                 }
-                state.cleanup = state.effect() || null;
-            }
-            return;
-        }
-        case 'unmounted': {
-            if (!store.effectStates) {
                 return;
             }
-            const effects = store.effectStates;
-            store.effectStates = null;
-            for (const state of effects) {
-                if (state && 'cleanup' in state && typeof state.cleanup === 'function') {
-                    state.cleanup();
+            case 'unmounted': {
+                if (!store.effectStates) {
+                    return;
+                }
+                const effects = store.effectStates;
+                store.effectStates = null;
+                for (const state of effects) {
+                    if (state && 'cleanup' in state && typeof state.cleanup === 'function') {
+                        state.cleanup();
+                    }
                 }
             }
         }
-    }
+    });
 });
 export function componentRenderer(component, element, renderRuntime) {
     if (isComponentElement(element)) {
-        const store = getComponentSpecificStore(element.store, renderRuntime);
+        const store = getComponentSpecificStore(element, renderRuntime);
         return component(element.props || emptyObject, store.context);
     }
     else {
@@ -160,5 +162,5 @@ export function createState(onChange) {
     });
 }
 export function isComponentElement(element) {
-    return element.flag & SIMP_ELEMENT_FLAG_FC && element.type._isComponent;
+    return isFC(element) && element.type._isComponent;
 }

package/context/index.js

@@ -1,27 +1,39 @@
-import { lifecycleEventBus, MOUNTING_PHASE, rerender, } from '../core/internal.js';
-lifecycleEventBus.subscribe(event => {
-    if (event.type === 'unmounted' && event.element.context) {
-        const contextMap = event.element.context;
-        for (const entry of contextMap.values()) {
-            entry.subs.delete(event.element.store);
+import { registerLifecyclePlugin, rerender, } from '../core/internal.js';
+const currentFCByRuntime = new WeakMap();
+registerLifecyclePlugin(bus => {
+    bus.subscribe(event => {
+        if (event.type === 'beforeRender') {
+            currentFCByRuntime.set(event.renderRuntime, event.element);
         }
-    }
+        else if (event.type === 'afterRender' || event.type === 'errored') {
+            currentFCByRuntime.set(event.renderRuntime, null);
+        }
+        if (event.type === 'unmounted' && event.element.context) {
+            const contextMap = event.element.context;
+            for (const entry of contextMap.values()) {
+                entry.subs.delete(event.element);
+            }
+        }
+    });
 });
 export function createCreateContext(renderRuntime) {
     return defaultValue => {
+        const providerElements = new WeakSet();
         const context = {
             defaultValue,
             Provider(props) {
-                const currentElement = renderRuntime.currentRenderingFCElement;
-                const renderPhase = renderRuntime.renderPhase;
+                const currentElement = currentFCByRuntime.get(renderRuntime);
+                const isFirstRender = !providerElements.has(currentElement);
                 let contextMap = currentElement.context;
                 if (!contextMap) {
                     currentElement.context = contextMap = new Map();
+                    providerElements.add(currentElement);
                 }
-                else if (renderPhase === MOUNTING_PHASE) {
+                else if (isFirstRender) {
                     currentElement.context = contextMap = new Map(currentElement.context);
+                    providerElements.add(currentElement);
                 }
-                if (renderPhase === MOUNTING_PHASE) {
+                if (isFirstRender) {
                     contextMap.set(context, { value: props.value, subs: new Set() });
                     return props.children;
                 }
@@ -40,14 +52,13 @@ export function createCreateContext(renderRuntime) {
                 return props.children;
             },
             Consumer(props) {
-                const currentElement = renderRuntime.currentRenderingFCElement;
+                const currentElement = currentFCByRuntime.get(renderRuntime);
                 const contextMap = currentElement.context;
-                const store = currentElement.store;
                 const entry = contextMap?.get(context);
                 if (!entry) {
                     return props.children(defaultValue);
                 }
-                entry.subs.add(store);
+                entry.subs.add(currentElement);
                 return props.children(entry.value);
             },
         };
@@ -56,14 +67,13 @@ export function createCreateContext(renderRuntime) {
 }
 export function createUseContext(renderRuntime) {
     return context => {
-        const currentElement = renderRuntime.currentRenderingFCElement;
+        const currentElement = currentFCByRuntime.get(renderRuntime);
         const contextMap = currentElement.context;
-        const store = currentElement.store;
         const entry = contextMap?.get(context);
         if (!entry) {
             return context.defaultValue;
         }
-        entry.subs.add(store);
+        entry.subs.add(currentElement);
         return entry.value;
     };
 }