@simpreact/simpreact 0.0.2 → 0.0.3

package/compat/core.d.ts

@@ -0,0 +1,46 @@
+import * as SimpReactInternal from '../core/internal.js';
+import { identity } from './utils.js';
+export declare const Children: {
+    map(children: SimpReactInternal.SimpNode, fn: (child: SimpReactInternal.SimpNode, index: number) => SimpReactInternal.SimpNode): SimpReactInternal.SimpNode[];
+    forEach(children: SimpReactInternal.SimpNode, fn: (child: SimpReactInternal.SimpNode, index: number) => void): void;
+    count(children: SimpReactInternal.SimpNode): number;
+    toArray(children: SimpReactInternal.SimpNode): SimpReactInternal.SimpNode[];
+    only(children: SimpReactInternal.SimpNode): SimpReactInternal.SimpElement;
+};
+export declare function cloneElement(element: SimpReactInternal.SimpElement, props?: any, ...children: SimpReactInternal.SimpNode[]): SimpReactInternal.SimpElement;
+export declare function isValidElement(element: unknown): element is SimpReactInternal.SimpElement;
+export declare function Suspense(props: {
+    fallback: SimpReactInternal.SimpNode;
+    children: SimpReactInternal.SimpNode;
+}): SimpReactInternal.SimpNode;
+export declare function forwardRef<P, T>(Component: (props: P, ref: SimpReactInternal.Ref<T>) => any): (props: P) => any;
+export declare const Fragment: SimpReactInternal.Fragment;
+export declare const createElement: typeof SimpReactInternal.createElement;
+export declare const createContext: typeof SimpReactInternal.createContext;
+export declare const createPortal: typeof SimpReactInternal.createPortal;
+export declare const memo: typeof identity;
+export declare const flushSync: typeof identity;
+export declare class Component {
+    constructor();
+}
+declare const _default: {
+    Children: {
+        map(children: SimpReactInternal.SimpNode, fn: (child: SimpReactInternal.SimpNode, index: number) => SimpReactInternal.SimpNode): SimpReactInternal.SimpNode[];
+        forEach(children: SimpReactInternal.SimpNode, fn: (child: SimpReactInternal.SimpNode, index: number) => void): void;
+        count(children: SimpReactInternal.SimpNode): number;
+        toArray(children: SimpReactInternal.SimpNode): SimpReactInternal.SimpNode[];
+        only(children: SimpReactInternal.SimpNode): SimpReactInternal.SimpElement;
+    };
+    cloneElement: typeof cloneElement;
+    isValidElement: typeof isValidElement;
+    Suspense: typeof Suspense;
+    forwardRef: typeof forwardRef;
+    Fragment: SimpReactInternal.Fragment;
+    createElement: typeof SimpReactInternal.createElement;
+    createContext: typeof SimpReactInternal.createContext;
+    createPortal: typeof SimpReactInternal.createPortal;
+    memo: typeof identity;
+    flushSync: typeof identity;
+    Component: typeof Component;
+};
+export default _default;

package/compat/core.js

@@ -0,0 +1,93 @@
+import * as SimpReactInternal from '../core/internal.js';
+import * as SimpReactHooks from '../hooks/index.js';
+import { identity } from './utils.js';
+export const Children = {
+    map(children, fn) {
+        return Children.toArray(children).map(fn);
+    },
+    forEach(children, fn) {
+        Children.toArray(children).forEach(fn);
+    },
+    count(children) {
+        return Children.toArray(children).length;
+    },
+    toArray(children) {
+        const result = [];
+        function traverse(node) {
+            if (node == null || typeof node === 'boolean') {
+                return;
+            }
+            if (Array.isArray(node)) {
+                for (const child of node) {
+                    traverse(child);
+                }
+                return;
+            }
+            result.push(node);
+        }
+        traverse(children);
+        return result;
+    },
+    only(children) {
+        const array = Children.toArray(children);
+        if (array.length !== 1 || !isValidElement(array[0])) {
+            throw new Error('Children.only expected a single SimpElement child.');
+        }
+        return array[0];
+    },
+};
+export function cloneElement(element, props, ...children) {
+    if (!isValidElement(element)) {
+        throw new Error(`cloneElement: expected a SimpElement, got ${element}`);
+    }
+    if (element.flag === 'PORTAL') {
+        throw new Error('cloneElement: the argument must be a SimpElement, but you passed a portal instead.');
+    }
+    return SimpReactInternal.createElement(element.flag === 'FRAGMENT' ? SimpReactInternal.Fragment : element.type, Object.assign({}, element.props, props), arguments.length > 2 ? children : props.children || element.children);
+}
+export function isValidElement(element) {
+    return typeof element === 'object' && element !== null && 'flag' in element;
+}
+export function Suspense(props) {
+    const [isSuspended, setIsSuspended] = SimpReactHooks.useState(false);
+    SimpReactHooks.useCatch(error => {
+        if (isSuspended) {
+            return;
+        }
+        if (error instanceof Promise) {
+            setIsSuspended(true);
+            error.then(() => setIsSuspended(false));
+        }
+    });
+    return isSuspended ? props.fallback : props.children;
+}
+export function forwardRef(Component) {
+    return function Forwarded(props) {
+        return Component(props, props?.ref || null);
+    };
+}
+export const Fragment = SimpReactInternal.Fragment;
+export const createElement = SimpReactInternal.createElement;
+export const createContext = SimpReactInternal.createContext;
+export const createPortal = SimpReactInternal.createPortal;
+export const memo = identity;
+export const flushSync = identity;
+export class Component {
+    constructor() {
+        throw new Error('Not implemented.');
+    }
+}
+export default {
+    Children,
+    cloneElement,
+    isValidElement,
+    Suspense,
+    forwardRef,
+    Fragment,
+    createElement,
+    createContext,
+    createPortal,
+    memo,
+    flushSync,
+    Component,
+};

package/compat/dom.d.ts

@@ -0,0 +1,11 @@
+import * as SimpReactDOM from '../dom/index.js';
+import * as SimpReactShared from '../shared/index.js';
+export declare const hydrate: typeof SimpReactShared.noop;
+export declare const render: typeof SimpReactDOM.render;
+export declare const createRoot: typeof SimpReactDOM.createRoot;
+declare const _default: {
+    hydrate: typeof SimpReactShared.noop;
+    render: typeof SimpReactDOM.render;
+    createRoot: typeof SimpReactDOM.createRoot;
+};
+export default _default;

package/compat/dom.js

@@ -0,0 +1,10 @@
+import * as SimpReactDOM from '../dom/index.js';
+import * as SimpReactShared from '../shared/index.js';
+export const hydrate = SimpReactShared.noop;
+export const render = SimpReactDOM.render;
+export const createRoot = SimpReactDOM.createRoot;
+export default {
+    hydrate,
+    render,
+    createRoot,
+};

package/compat/hooks.d.ts

@@ -0,0 +1,26 @@
+import * as SimpReactHooks from '../hooks/index.js';
+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: SimpReactHooks.DependencyList): T;
+export declare function useCallback<T>(cb: T, deps: SimpReactHooks.DependencyList): T;
+export declare const useState: typeof SimpReactHooks.useState;
+export declare const useEffect: typeof SimpReactHooks.useEffect;
+export declare const useLayoutEffect: typeof SimpReactHooks.useEffect;
+export declare const useInsertionEffect: typeof SimpReactHooks.useEffect;
+export declare const useRef: typeof SimpReactHooks.useRef;
+export declare const useContext: typeof SimpReactHooks.useContext;
+declare const _default: {
+    useSyncExternalStore: typeof useSyncExternalStore;
+    useReducer: typeof useReducer;
+    useId: typeof useId;
+    useMemo: typeof useMemo;
+    useCallback: typeof useCallback;
+    useState: typeof SimpReactHooks.useState;
+    useEffect: typeof SimpReactHooks.useEffect;
+    useLayoutEffect: typeof SimpReactHooks.useEffect;
+    useInsertionEffect: typeof SimpReactHooks.useEffect;
+    useRef: typeof SimpReactHooks.useRef;
+    useContext: typeof SimpReactHooks.useContext;
+};
+export default _default;

package/compat/hooks.js

@@ -0,0 +1,77 @@
+import * as SimpReactHooks from '../hooks/index.js';
+export function useSyncExternalStore(subscribe, getSnapshot) {
+    const rerender = SimpReactHooks.useRerender();
+    const lastSnapshotRef = SimpReactHooks.useRef(getSnapshot());
+    SimpReactHooks.useEffect(() => {
+        function checkForUpdates() {
+            const nextSnapshot = getSnapshot();
+            if (!Object.is(lastSnapshotRef.current, nextSnapshot)) {
+                lastSnapshotRef.current = nextSnapshot;
+                rerender();
+            }
+        }
+        const unsubscribe = subscribe(checkForUpdates);
+        checkForUpdates();
+        return unsubscribe;
+    }, [subscribe, getSnapshot]);
+    return lastSnapshotRef.current;
+}
+export function useReducer(reducer, initializerArg, initializer) {
+    const rerender = SimpReactHooks.useRerender();
+    const reducerRef = SimpReactHooks.useRef(reducer);
+    reducerRef.current = reducer;
+    const stateRef = SimpReactHooks.useRef([
+        initializer ? initializer(initializerArg) : initializerArg,
+        function dispatch(action) {
+            const newState = reducerRef.current(stateRef.current[0], action);
+            if (Object.is(newState, stateRef.current[0])) {
+                return;
+            }
+            stateRef.current[0] = newState;
+            rerender();
+        },
+    ]);
+    return stateRef.current;
+}
+let globalId = 0;
+export function useId(prefix = 'id') {
+    const idRef = SimpReactHooks.useRef('');
+    if (idRef.current === '') {
+        globalId += 1;
+        idRef.current = `${prefix}-${globalId}`;
+    }
+    return idRef.current;
+}
+export function useMemo(factory, deps) {
+    const ref = SimpReactHooks.useRef({
+        deps: undefined,
+        value: undefined,
+    });
+    if (!SimpReactHooks.areDepsEqual(ref.current.deps, deps)) {
+        ref.current.value = factory();
+        ref.current.deps = deps;
+    }
+    return ref.current.value;
+}
+export function useCallback(cb, deps) {
+    return useMemo(() => cb, deps);
+}
+export const useState = SimpReactHooks.useState;
+export const useEffect = SimpReactHooks.useEffect;
+export const useLayoutEffect = SimpReactHooks.useEffect;
+export const useInsertionEffect = SimpReactHooks.useEffect;
+export const useRef = SimpReactHooks.useRef;
+export const useContext = SimpReactHooks.useContext;
+export default {
+    useSyncExternalStore,
+    useReducer,
+    useId,
+    useMemo,
+    useCallback,
+    useState,
+    useEffect,
+    useLayoutEffect,
+    useInsertionEffect,
+    useRef,
+    useContext,
+};

package/compat/index.d.ts

@@ -0,0 +1,42 @@
+export * from './core.js';
+export * from './dom.js';
+export * from './hooks.js';
+export * from './jsx-runtime.js';
+declare const _default: {
+    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: typeof import("../hooks/index.js").useState;
+    useEffect: typeof import("../hooks/index.js").useEffect;
+    useLayoutEffect: typeof import("../hooks/index.js").useEffect;
+    useInsertionEffect: typeof import("../hooks/index.js").useEffect;
+    useRef: typeof import("../hooks/index.js").useRef;
+    useContext: typeof import("../hooks/index.js").useContext;
+    hydrate: typeof import("../shared/utils.js").noop;
+    render: typeof import("../dom/render.js").render;
+    createRoot: typeof import("../dom/render.js").createRoot;
+    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;
+    forwardRef: typeof import("./core.js").forwardRef;
+    Fragment: import("../core/fragment.js").Fragment;
+    createElement: typeof import("../core/createElement.js").createElement;
+    createContext: typeof import("../core/context.js").createContext;
+    createPortal: typeof import("../core/portal.js").createPortal;
+    memo: typeof import("./utils.js").identity;
+    flushSync: typeof import("./utils.js").identity;
+    Component: typeof import("./core.js").Component;
+};
+export default _default;

package/compat/index.js

@@ -0,0 +1,14 @@
+import coreDefault from './core.js';
+import domDefault from './dom.js';
+import hooksDefault from './hooks.js';
+import jsxRuntimeDefault from './jsx-runtime.js';
+export * from './core.js';
+export * from './dom.js';
+export * from './hooks.js';
+export * from './jsx-runtime.js';
+export default {
+    ...coreDefault,
+    ...domDefault,
+    ...hooksDefault,
+    ...jsxRuntimeDefault,
+};

package/compat/jsx-runtime.d.ts

@@ -0,0 +1,10 @@
+import * as SimpReactJSXRuntime from '../jsx-runtime/index.js';
+export declare const jsx: typeof SimpReactJSXRuntime.jsx;
+export declare const jsxDEV: typeof SimpReactJSXRuntime.jsx;
+export declare const jsxs: typeof SimpReactJSXRuntime.jsx;
+declare const _default: {
+    jsx: typeof SimpReactJSXRuntime.jsx;
+    jsxDEV: typeof SimpReactJSXRuntime.jsx;
+    jsxs: typeof SimpReactJSXRuntime.jsx;
+};
+export default _default;

package/compat/jsx-runtime.js

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

package/compat/utils.d.ts

@@ -0,0 +1 @@
+export declare function identity(value: any): any;

package/compat/utils.js

@@ -0,0 +1,3 @@
+export function identity(value) {
+    return value;
+}

package/core/createElement.d.ts

@@ -17,7 +17,7 @@ export interface SimpElement {
     flag: SimpElementFlag;
     parent: Nullable<SimpElement>;
     key?: Maybe<Key>;
-    type?: Maybe<string | FunctionComponent>;
+    type?: string | FunctionComponent;
     props?: any;
     children?: Maybe<SimpNode>;
     className?: Maybe<string>;

package/core/createElement.js

@@ -31,7 +31,9 @@ export function createElement(type, props, ...children) {
                         definedChildren = props[propName];
                     }
                 }
-                else if (propName === 'ref') {
+                else if (propName === 'ref' &&
+                    // Handle only a callback ref or an object ref with `current`.
+                    props[propName]) {
                     ref = {
                         value: props[propName],
                     };

package/core/index.d.ts

@@ -4,9 +4,9 @@ export type ComponentType<P = {}> = FunctionComponent<P>;
 
 export type RefObject<T> = { current: T };
 export type RefCallback<T> = {
-  bivarianceHack(instance: T | null): (() => void | undefined) | void;
+  bivarianceHack(instance: T): (() => void | undefined) | void;
 }['bivarianceHack'];
-export type Ref<T> = RefCallback<T> | RefObject<T> | null;
+export type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
 
 export type Key = string | number | bigint;
 

package/core/lifecycleEventBus.d.ts

@@ -6,7 +6,11 @@ export type LifecycleEvent = {
     phase: 'mounting' | 'updating';
 } | {
     type: 'afterRender';
+    element: SimpElement;
     phase: 'mounting' | 'updating';
+} | {
+    type: 'triedToRerender';
+    element: SimpElement;
 } | {
     type: 'mounted';
     element: SimpElement;

package/core/mounting.js

@@ -3,6 +3,7 @@ import { hostAdapter } from './hostAdapter.js';
 import { createTextElement, normalizeRoot } from './createElement.js';
 import { applyRef } from './ref.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
+import { batchingRerenderLocker } from './rerender.js';
 export function mount(element, parentReference, nextReference, contextMap, hostNamespace) {
     if (element.flag === 'TEXT') {
         mountTextElement(element, parentReference, nextReference);
@@ -74,15 +75,41 @@ export function mountFunctionalElement(element, parentReference, nextReference,
     }
     // FC element always has Maybe<SimpElement> children due to normalization process.
     let children;
+    let triedToRerenderUnsubscribe;
     try {
-        lifecycleEventBus.publish({ type: 'beforeRender', element, phase: 'mounting' });
-        children = normalizeRoot(element.type(element.props || emptyObject), false);
-        lifecycleEventBus.publish({ type: 'afterRender', phase: 'mounting' });
+        let triedToRerender = false;
+        let rerenderCounter = 0;
+        triedToRerenderUnsubscribe = lifecycleEventBus.subscribe(event => {
+            if (event.type === 'triedToRerender' && event.element === element) {
+                triedToRerender = true;
+            }
+        });
+        do {
+            triedToRerender = false;
+            if (++rerenderCounter >= 25) {
+                lifecycleEventBus.publish({
+                    type: 'errored',
+                    element,
+                    error: new Error('Too many re-renders. SimpReact limits the number of renders to prevent an infinite loop.'),
+                    phase: 'mounting',
+                });
+                return;
+            }
+            lifecycleEventBus.publish({ type: 'beforeRender', element, phase: 'mounting' });
+            batchingRerenderLocker.lock();
+            children = element.type(element.props || emptyObject);
+            batchingRerenderLocker.flush();
+            lifecycleEventBus.publish({ type: 'afterRender', element, phase: 'mounting' });
+        } while (triedToRerender);
+        children = normalizeRoot(children, false);
     }
     catch (error) {
         lifecycleEventBus.publish({ type: 'errored', element, error, phase: 'mounting' });
         return;
     }
+    finally {
+        triedToRerenderUnsubscribe();
+    }
     if (children) {
         children.parent = element;
         mount((element.children = children), parentReference, nextReference, contextMap, hostNamespace);

package/core/patching.js

@@ -5,6 +5,7 @@ import { clearElementHostReference, remove, unmount } from './unmounting.js';
 import { mount, mountArrayChildren } from './mounting.js';
 import { applyRef } from './ref.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
+import { batchingRerenderLocker } from './rerender.js';
 export function patch(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
     if (prevElement.type !== nextElement.type || prevElement.key !== nextElement.key) {
         replaceWithNewElement(prevElement, nextElement, parentReference, contextMap, hostNamespace);
@@ -59,29 +60,69 @@ function patchHostElement(prevElement, nextElement, contextMap, hostNamespace) {
     applyRef(nextElement);
 }
 function patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
-    (nextElement.store = prevElement.store ||= {}).latestElement = nextElement;
+    const prevStore = !prevElement.store || prevElement.unmounted
+        ? { hostNamespace: prevElement.store?.hostNamespace }
+        : prevElement.store;
+    prevStore.latestElement = nextElement;
+    nextElement.store = prevStore;
     if (hostNamespace) {
         nextElement.store.hostNamespace = hostNamespace;
     }
     if (contextMap) {
         nextElement.contextMap = contextMap;
     }
+    // FC element always has Maybe<SimpElement> children due to normalization process.
     let nextChildren;
+    let triedToRerenderUnsubscribe;
     try {
-        lifecycleEventBus.publish({ type: 'beforeRender', element: nextElement, phase: 'updating' });
-        nextChildren = normalizeRoot(nextElement.type(nextElement.props || emptyObject), false);
-        lifecycleEventBus.publish({ type: 'afterRender', phase: 'updating' });
+        let triedToRerender = false;
+        let rerenderCounter = 0;
+        triedToRerenderUnsubscribe = lifecycleEventBus.subscribe(event => {
+            if (event.type === 'triedToRerender' && event.element === nextElement) {
+                triedToRerender = true;
+            }
+        });
+        do {
+            triedToRerender = false;
+            if (++rerenderCounter >= 25) {
+                lifecycleEventBus.publish({
+                    type: 'errored',
+                    element: nextElement,
+                    error: new Error('Too many re-renders. SimpReact limits the number of renders to prevent an infinite loop.'),
+                    phase: 'updating',
+                });
+                return;
+            }
+            lifecycleEventBus.publish({ type: 'beforeRender', element: nextElement, phase: 'updating' });
+            batchingRerenderLocker.lock();
+            nextChildren = nextElement.type(nextElement.props || emptyObject);
+            batchingRerenderLocker.flush();
+            lifecycleEventBus.publish({ type: 'afterRender', element: nextElement, phase: 'updating' });
+        } while (triedToRerender);
+        nextChildren = normalizeRoot(nextChildren, false);
     }
     catch (error) {
         lifecycleEventBus.publish({ type: 'errored', element: nextElement, error, phase: 'updating' });
         return;
     }
+    finally {
+        triedToRerenderUnsubscribe();
+    }
     const prevChildren = prevElement.children;
     if (nextChildren) {
         nextElement.children = nextChildren;
     }
-    patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, contextMap, hostNamespace);
-    lifecycleEventBus.publish({ type: 'updated', element: nextElement });
+    if (!prevElement.unmounted) {
+        patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, contextMap, hostNamespace);
+        lifecycleEventBus.publish({ type: 'updated', element: nextElement });
+        return;
+    }
+    prevElement.unmounted = false;
+    if (nextChildren) {
+        nextChildren.parent = nextElement;
+        mount(nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+    }
+    lifecycleEventBus.publish({ type: 'mounted', element: nextElement });
 }
 function patchTextElement(prevElement, nextElement) {
     nextElement.reference = prevElement.reference;
@@ -178,8 +219,7 @@ function patchChildren(prevChildren, nextChildren, parentReference, nextReferenc
             patch(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
         else {
-            unmount(prevChildren);
-            hostAdapter.clearNode(parentReference);
+            remove(prevChildren, parentReference);
         }
     }
     else {
@@ -216,7 +256,7 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
     }
     // Step 3: Mount new nodes if prev list is exhausted
     if (prevStart > prevEnd) {
-        const before = nextChildren[nextEnd + 1]?.reference || nextReference;
+        const before = findHostReferenceFromElement(nextChildren[nextEnd + 1]) || nextReference;
         for (let i = nextStart; i <= nextEnd; i++) {
             mount(nextChildren[i], parentReference, before, contextMap, hostNamespace);
         }
@@ -251,7 +291,7 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
                 usedIndices.add(prevIndex);
             }
             else {
-                mount(nextChild, parentReference, nextChildren[i + 1]?.reference || nextReference, contextMap, hostNamespace);
+                mount(nextChild, parentReference, findHostReferenceFromElement(nextChildren[i + 1]) || nextReference, contextMap, hostNamespace);
                 toMove[i - nextStart] = -1;
             }
         }
@@ -264,7 +304,7 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
         // Insert in correct order
         for (let i = nextEnd; i >= nextStart; i--) {
             const currentChild = nextChildren[i];
-            const reference = nextChildren[i + 1]?.reference || nextReference;
+            const reference = findHostReferenceFromElement(nextChildren[i + 1]) || nextReference;
             if (toMove[i - nextStart] !== -1) {
                 hostAdapter.insertBefore(parentReference, currentChild.reference, reference);
             }

package/core/ref.d.ts

@@ -5,13 +5,13 @@ interface RefSimpElement extends SimpElement {
         cleanup?: () => void;
     };
 }
-export interface RefObject<T> {
+export type RefObject<T> = {
     current: T;
-}
+};
 export type RefCallback<T> = {
-    bivarianceHack(instance: T | null): (() => void) | void;
+    bivarianceHack(instance: T): (() => void | undefined) | void;
 }['bivarianceHack'];
-export type Ref<T> = RefCallback<T> | RefObject<T> | null;
+export type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
 export declare function unmountRef(element: RefSimpElement): void;
 export declare function applyRef(element: RefSimpElement): void;
 export {};

package/core/rerender.d.ts

@@ -3,11 +3,11 @@ export declare function rerender(element: SimpElement): void;
 interface IRendererLocker {
     _isLocked: boolean;
     _elements: Set<SimpElement>;
-    isLocked: boolean;
+    _track(element: SimpElement): void;
+    _untrack(element: SimpElement): void;
     lock(): void;
-    track(element: SimpElement): void;
     flush(): void;
 }
-export declare const syncRerenderLocker: IRendererLocker;
-export declare const asyncRerenderLocker: IRendererLocker;
+export declare const batchingRerenderLocker: IRendererLocker;
+export declare const renderingRerenderLocker: IRendererLocker;
 export {};

package/core/rerender.js

@@ -1,59 +1,66 @@
 import { findParentReferenceFromElement, updateFunctionalComponent } from './patching.js';
+import { lifecycleEventBus } from './lifecycleEventBus.js';
+lifecycleEventBus.subscribe(event => {
+    if (event.type === 'afterRender') {
+        batchingRerenderLocker._untrack(event.element);
+        renderingRerenderLocker._untrack(event.element);
+    }
+});
 export function rerender(element) {
     if (element.flag !== 'FC') {
         throw new TypeError('Re-rendering is only supported for FC elements.');
     }
     if (element.unmounted) {
-        console.warn('The component unmounted.');
+        console.warn('The component is unmounted.');
     }
-    if (syncRerenderLocker.isLocked) {
-        syncRerenderLocker.track(element);
+    lifecycleEventBus.publish({ type: 'triedToRerender', element });
+    if (batchingRerenderLocker._isLocked) {
+        batchingRerenderLocker._track(element);
         return;
     }
-    else if (asyncRerenderLocker.isLocked) {
-        asyncRerenderLocker.track(element);
-    }
-    else {
-        asyncRerenderLocker.lock();
-        updateFunctionalComponent(element, findParentReferenceFromElement(element), null, element.contextMap || null, element.store.hostNamespace);
-        asyncRerenderLocker.flush();
+    if (renderingRerenderLocker._isLocked) {
+        renderingRerenderLocker._track(element);
+        return;
     }
+    renderingRerenderLocker.lock();
+    updateFunctionalComponent(element, findParentReferenceFromElement(element), null, element.contextMap || null, element.store.hostNamespace);
+    renderingRerenderLocker.flush();
 }
-export const syncRerenderLocker = {
+export const batchingRerenderLocker = {
     _isLocked: false,
     _elements: new Set(),
-    get isLocked() {
-        return this._isLocked;
+    _track(element) {
+        this._elements.add(element);
+    },
+    _untrack(element) {
+        this._elements.delete(element);
     },
     lock() {
         this._isLocked = true;
     },
-    track(element) {
-        this._elements.add(element);
-    },
     flush() {
         this._isLocked = false;
         if (this._elements.size === 0) {
             return;
         }
         for (const element of this._elements) {
-            this._elements.delete(element);
+            this._untrack(element);
             rerender(element.store.latestElement);
         }
     },
 };
-export const asyncRerenderLocker = {
+export const renderingRerenderLocker = {
     _isLocked: false,
     _elements: new Set(),
-    get isLocked() {
-        return this._isLocked;
+    _track(element) {
+        this._elements.add(element);
+    },
+    _untrack(element) {
+        this._elements.delete(element);
     },
     lock() {
         this._isLocked = true;
     },
-    track(element) {
-        this._elements.add(element);
-    },
     flush() {
         this._isLocked = false;
         if (this._elements.size === 0) {
@@ -61,7 +68,7 @@ export const asyncRerenderLocker = {
         }
         queueMicrotask(() => {
             for (const element of this._elements) {
-                this._elements.delete(element);
+                this._untrack(element);
                 rerender(element.store.latestElement);
             }
         });

package/core/unmounting.js

@@ -9,6 +9,10 @@ export function unmount(element) {
         return;
     }
     if (element.flag === 'FC') {
+        // Skip — element is already unmounted.
+        if (element.unmounted) {
+            return;
+        }
         // FC element always has Maybe<SimpElement> due to normalization.
         if (element.children) {
             unmount(element.children);

package/dom/attach-element-to-dom.js

@@ -1,6 +1,6 @@
 const elementPropertyName = '__SIMP_ELEMENT__';
 export function attachElementToDom(element, dom) {
-    if (dom.nodeType !== Node.TEXT_NODE) {
+    if (element.flag !== 'TEXT') {
         Object.defineProperty(dom, elementPropertyName, { value: element, writable: true });
     }
 }

package/dom/events.d.ts

@@ -5,6 +5,9 @@ export declare class SyntheticEvent {
     currentTarget: Nullable<EventTarget>;
     isPropagationStopped: boolean;
     isDefaultPrevented: boolean;
+    button?: number;
+    buttons?: number;
+    pointerId?: number;
     constructor(event: Event);
     get target(): EventTarget | null;
     get type(): string;

package/dom/events.js

@@ -1,4 +1,4 @@
-import { syncRerenderLocker } from '../core/internal.js';
+import { batchingRerenderLocker } from '../core/internal.js';
 import { getElementFromDom } from './attach-element-to-dom.js';
 const eventNameByTypes = {
     click: 'onClick',
@@ -40,8 +40,14 @@ export class SyntheticEvent {
     currentTarget = null;
     isPropagationStopped = false;
     isDefaultPrevented = false;
+    button;
+    buttons;
+    pointerId;
     constructor(event) {
         this.nativeEvent = event;
+        this.button = event.button;
+        this.buttons = event.buttons;
+        this.pointerId = event.pointerId;
     }
     get target() {
         return this.nativeEvent.target;
@@ -59,7 +65,7 @@ export class SyntheticEvent {
     }
 }
 export function dispatchDelegatedEvent(event) {
-    syncRerenderLocker.lock();
+    batchingRerenderLocker.lock();
     const syntheticEvent = new SyntheticEvent(event);
     const captureHandlers = [];
     const bubbleHandlers = [];
@@ -91,7 +97,7 @@ export function dispatchDelegatedEvent(event) {
             return;
         }
     }
-    syncRerenderLocker.flush();
+    batchingRerenderLocker.flush();
 }
 const captureRegex = /Capture/;
 export function patchEvent(name, prevValue, nextValue, dom) {

package/dom/props/controlled/input.js

@@ -1,4 +1,4 @@
-import { syncRerenderLocker } from '../../../core/internal.js';
+import { batchingRerenderLocker } from '../../../core/internal.js';
 import { getElementFromDom } from '../../attach-element-to-dom.js';
 export function isCheckedType(type) {
     return type === 'checkbox' || type === 'radio';
@@ -12,9 +12,9 @@ function onControlledInputInput(event) {
         return;
     }
     if (element.props['onInput']) {
-        syncRerenderLocker.lock();
+        batchingRerenderLocker.lock();
         element.props['onInput'](event);
-        syncRerenderLocker.flush();
+        batchingRerenderLocker.flush();
         element = getElementFromDom(event.target);
     }
     if (element) {
@@ -27,9 +27,9 @@ function onControlledInputChange(event) {
         return;
     }
     if (element.props['onChange']) {
-        syncRerenderLocker.lock();
+        batchingRerenderLocker.lock();
         element.props['onChange'](event);
-        syncRerenderLocker.flush();
+        batchingRerenderLocker.flush();
         element = getElementFromDom(event.target);
     }
     if (element) {

package/dom/props/controlled/select.js

@@ -1,4 +1,4 @@
-import { syncRerenderLocker } from '../../../core/internal.js';
+import { batchingRerenderLocker } from '../../../core/internal.js';
 import { emptyObject } from '../../../shared/index.js';
 import { getElementFromDom } from '../../attach-element-to-dom.js';
 export function isEventNameIgnored(eventName) {
@@ -10,9 +10,9 @@ function onControlledInputChange(event) {
         return;
     }
     if (element.props['onChange']) {
-        syncRerenderLocker.lock();
+        batchingRerenderLocker.lock();
         element.props['onChange'](event);
-        syncRerenderLocker.flush();
+        batchingRerenderLocker.flush();
         element = getElementFromDom(event.target);
     }
     if (element) {

package/dom/props/controlled/textarea.js

@@ -1,4 +1,4 @@
-import { syncRerenderLocker } from '../../../core/internal.js';
+import { batchingRerenderLocker } from '../../../core/internal.js';
 import { getElementFromDom } from '../../attach-element-to-dom.js';
 export function isEventNameIgnored(eventName) {
     return eventName === 'onChange' || eventName === 'onInput';
@@ -9,9 +9,9 @@ function onControlledTextareaChange(event) {
         return;
     }
     if (element.props['onChange']) {
-        syncRerenderLocker.lock();
+        batchingRerenderLocker.lock();
         element.props['onChange'](event);
-        syncRerenderLocker.flush();
+        batchingRerenderLocker.flush();
         element = getElementFromDom(event.target);
     }
     if (element) {
@@ -24,9 +24,9 @@ function onControlledTextareaInput(event) {
         return;
     }
     if (element.props['onInput']) {
-        syncRerenderLocker.lock();
+        batchingRerenderLocker.lock();
         element.props['onInput'](event);
-        syncRerenderLocker.flush();
+        batchingRerenderLocker.flush();
         element = getElementFromDom(event.target);
     }
     if (element) {

package/dom/props/style.js

@@ -14,19 +14,22 @@ export function patchStyle(prevAttrValue, nextAttrValue, dom) {
         for (style in nextAttrValue) {
             value = nextAttrValue[style];
             if (value !== prevAttrValue[style]) {
-                domStyle.setProperty(style, value);
+                domStyle.setProperty(camelToKebab(style), value);
             }
         }
         for (style in prevAttrValue) {
             if (nextAttrValue[style] == null) {
-                domStyle.removeProperty(style);
+                domStyle.removeProperty(camelToKebab(style));
             }
         }
     }
     else {
         for (style in nextAttrValue) {
             value = nextAttrValue[style];
-            domStyle.setProperty(style, value);
+            domStyle.setProperty(camelToKebab(style), value);
         }
     }
 }
+function camelToKebab(name) {
+    return name.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+}

package/dom/render.js

@@ -1,4 +1,4 @@
-import { asyncRerenderLocker, hostAdapter, mount, patch, provideHostAdapter, remove, } from '../core/internal.js';
+import { renderingRerenderLocker, hostAdapter, mount, patch, provideHostAdapter, remove, } from '../core/internal.js';
 import { domAdapter } from './domAdapter.js';
 import { attachElementToDom, getElementFromDom } from './attach-element-to-dom.js';
 provideHostAdapter(domAdapter);
@@ -7,7 +7,7 @@ export function render(element, container) {
         return;
     }
     const currentRootElement = getElementFromDom(container);
-    asyncRerenderLocker.lock();
+    renderingRerenderLocker.lock();
     if (!currentRootElement) {
         if (element) {
             hostAdapter.clearNode(container);
@@ -27,7 +27,7 @@ export function render(element, container) {
             patch(prevChildren, element, container, null, null, hostAdapter.getHostNamespaces(element, undefined)?.self);
         }
     }
-    asyncRerenderLocker.flush();
+    renderingRerenderLocker.flush();
 }
 export function createRoot(container) {
     return {

package/hooks/index.d.ts

@@ -4,12 +4,18 @@ export type Cleanup = () => void;
 export type Effect = () => void | Cleanup;
 export type DependencyList = readonly unknown[];
 
+export type Dispatch<A> = (value: A) => void;
+export type SetStateAction<S> = S | ((prevState: S) => S);
+
 declare function useRef<T>(initialValue: T): RefObject<T>;
 declare function useRef<T>(initialValue: T | null): RefObject<T | null>;
 declare function useRef<T>(initialValue: T | undefined): RefObject<T | undefined>;
 
 declare function useRerender(): () => void;
 
+export function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
+export function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
+
 declare function useEffect(effect: Effect, deps?: DependencyList): void;
 
 declare function useMounted(effect: Effect): void;

package/hooks/index.js

@@ -1,5 +1,6 @@
-import { lifecycleEventBus, rerender, syncRerenderLocker } from '../core/internal.js';
+import { batchingRerenderLocker, lifecycleEventBus, rerender as _rerender } from '../core/internal.js';
 import { noop } from '../shared/index.js';
+import { callOrGet } from '../shared/utils.js';
 let currentIndex = 0;
 // In runtime this is a nullable variable.
 let currentElement;
@@ -9,6 +10,9 @@ lifecycleEventBus.subscribe(event => {
         if (currentElement.store?.catchHandlers) {
             currentElement.store.catchHandlers = undefined;
         }
+        if (currentElement.store?.effectsHookStates) {
+            currentElement.store.effectsHookStates = undefined;
+        }
     }
     if (event.type === 'afterRender' || event.type === 'errored') {
         currentElement = null;
@@ -17,19 +21,19 @@ lifecycleEventBus.subscribe(event => {
     if (event.type === 'mounted') {
         const element = event.element;
         if (element.store?.effectsHookStates) {
-            syncRerenderLocker.lock();
+            batchingRerenderLocker.lock();
             const effects = element.store.effectsHookStates;
             element.store.effectsHookStates = undefined;
             for (const state of effects) {
                 state.cleanup = state.effect() || undefined;
             }
-            syncRerenderLocker.flush();
+            batchingRerenderLocker.flush();
         }
     }
     if (event.type === 'updated') {
         const element = event.element;
         if (element.store?.effectsHookStates) {
-            syncRerenderLocker.lock();
+            batchingRerenderLocker.lock();
             const effects = element.store.effectsHookStates;
             element.store.effectsHookStates = undefined;
             for (const state of effects) {
@@ -38,7 +42,7 @@ lifecycleEventBus.subscribe(event => {
                 }
                 state.cleanup = state.effect() || undefined;
             }
-            syncRerenderLocker.flush();
+            batchingRerenderLocker.flush();
         }
     }
     if (event.type === 'unmounted') {
@@ -57,11 +61,11 @@ lifecycleEventBus.subscribe(event => {
             throw new Error('Error occurred during rendering a component', { cause: event.error });
         }
         if (element.store.catchHandlers) {
-            syncRerenderLocker.lock();
+            batchingRerenderLocker.lock();
             for (const state of element.store.catchHandlers) {
                 state(event.error);
             }
-            syncRerenderLocker.flush();
+            batchingRerenderLocker.flush();
         }
     }
 });
@@ -86,7 +90,26 @@ export function useRerender() {
     const hookStates = getOrCreateHookStates(currentElement);
     if (!hookStates[currentIndex]) {
         const elementStore = currentElement.store;
-        hookStates[currentIndex] = () => rerender(elementStore.latestElement);
+        hookStates[currentIndex] = function rerender() {
+            _rerender(elementStore.latestElement);
+        };
+    }
+    return hookStates[currentIndex++];
+}
+export function useState(initialState) {
+    const hookStates = getOrCreateHookStates(currentElement);
+    if (!hookStates[currentIndex]) {
+        const elementStore = currentElement.store;
+        const state = (hookStates[currentIndex] = [undefined, undefined]);
+        state[0] = callOrGet(initialState);
+        state[1] = function dispatch(action) {
+            const nextValue = callOrGet(action, state[0]);
+            if (Object.is(state[0], nextValue)) {
+                return;
+            }
+            state[0] = nextValue;
+            _rerender(elementStore.latestElement);
+        };
     }
     return hookStates[currentIndex++];
 }
@@ -159,4 +182,14 @@ function getOrCreateEffectHookStates(element) {
     }
     return element.store.effectsHookStates;
 }
-export default { useRef, useRerender, useEffect, useMounted, useUnmounted, useContext, useCatch, areDepsEqual };
+export default {
+    useRef,
+    useRerender,
+    useState,
+    useEffect,
+    useMounted,
+    useUnmounted,
+    useContext,
+    useCatch,
+    areDepsEqual,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpreact/simpreact",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "homepage": "https://github.com/dPaskhin/simpreact#readme",
   "main": "./core/index.js",
@@ -11,6 +11,12 @@
       "import": "./core/index.js",
       "types": "./core/index.d.ts"
     },
+    "./compat": {
+      "import": "./compat/index.js"
+    },
+    "./compat/*": {
+      "import": "./compat/index.js"
+    },
     "./internal": {
       "import": "./core/internal.js",
       "types": "./core/internal.d.ts"

package/shared/utils.d.ts

@@ -1,3 +1,4 @@
 import type { SimpText } from './public.js';
 export declare function isSimpText(value: unknown): value is SimpText;
 export declare function noop(): void;
+export declare function callOrGet<T, A extends any[]>(value: T | ((...args: A) => T), ...args: A): T;

package/shared/utils.js

@@ -2,3 +2,19 @@ export function isSimpText(value) {
     return typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint';
 }
 export function noop() { }
+export function callOrGet(value) {
+    if (typeof value !== 'function') {
+        return value;
+    }
+    if (arguments.length === 1) {
+        return value();
+    }
+    if (arguments.length === 2) {
+        return value(arguments[1]);
+    }
+    const args = [];
+    for (let i = 1; i < arguments.length; ++i) {
+        args.push(arguments[i]);
+    }
+    return value(...args);
+}