@simpreact/simpreact 0.0.5 → 0.0.7

package/hooks/index.js

@@ -1,194 +1,191 @@
-import { lifecycleEventBus, rerender as _rerender } from '../core/internal.js';
-import { callOrGet, noop } from '../shared/index.js';
-let currentIndex = 0;
-// In runtime this is a nullable variable.
-let currentElement;
+import { rerender as _rerender, lifecycleEventBus, SIMP_ELEMENT_FLAG_FC, } from '../core/internal.js';
+import { callOrGet, shallowEqual, } from '../shared/index.js';
+const hooksSpecificStoreByElementStore = new WeakMap();
+function getHooksSpecificStore(store) {
+    let hooksSpecificStore = hooksSpecificStoreByElementStore.get(store);
+    if (!hooksSpecificStore) {
+        hooksSpecificStore = { hooksIndex: 0, hookStates: null, effectsHookStates: null, catchHandlers: null };
+        hooksSpecificStoreByElementStore.set(store, hooksSpecificStore);
+    }
+    return hooksSpecificStore;
+}
+window.__SIMP_HOOKS_SPECIFIC_STORE_BY_ELEMENT_STORE__ = hooksSpecificStoreByElementStore;
 lifecycleEventBus.subscribe(event => {
-    if (event.type === 'beforeRender') {
-        currentElement = event.element;
-        if (currentElement.store?.catchHandlers) {
-            currentElement.store.catchHandlers = undefined;
+    if ((event.element.flag & SIMP_ELEMENT_FLAG_FC) === 0) {
+        return;
+    }
+    let store = getHooksSpecificStore(event.element.store);
+    switch (event.type) {
+        case 'beforeRender': {
+            store.hooksIndex = 0;
+            store.catchHandlers = null;
+            store.effectsHookStates = null;
+            break;
         }
-        if (currentElement.store?.effectsHookStates) {
-            currentElement.store.effectsHookStates = undefined;
+        case 'afterRender': {
+            store.hooksIndex = 0;
+            break;
         }
-    }
-    if (event.type === 'afterRender' || event.type === 'errored') {
-        currentElement = null;
-        currentIndex = 0;
-    }
-    if (event.type === 'mounted') {
-        const element = event.element;
-        if (element.store?.effectsHookStates) {
-            const effects = element.store.effectsHookStates;
-            element.store.effectsHookStates = undefined;
+        case 'mounted': {
+            if (!store.effectsHookStates) {
+                break;
+            }
+            const effects = store.effectsHookStates;
+            store.effectsHookStates = null;
             for (const state of effects) {
-                state.cleanup = state.effect() || undefined;
+                state.cleanup = state.effect() || null;
             }
+            break;
         }
-    }
-    if (event.type === 'updated') {
-        const element = event.element;
-        if (element.store?.effectsHookStates) {
-            const effects = element.store.effectsHookStates;
-            element.store.effectsHookStates = undefined;
+        case 'updated': {
+            if (!store.effectsHookStates) {
+                break;
+            }
+            const effects = store.effectsHookStates;
+            store.effectsHookStates = null;
             for (const state of effects) {
                 if (typeof state.cleanup === 'function') {
                     state.cleanup();
                 }
-                state.cleanup = state.effect() || undefined;
+                state.cleanup = state.effect() || null;
             }
+            break;
         }
-    }
-    if (event.type === 'unmounted') {
-        const element = event.element;
-        if (element.store?.hookStates) {
-            const hookStates = element.store.hookStates;
-            element.store.hookStates = undefined;
+        case 'unmounted': {
+            if (!store.hookStates) {
+                break;
+            }
+            const hookStates = store.hookStates;
+            store.hookStates = null;
             for (const state of hookStates) {
                 if (state && 'cleanup' in state && typeof state.cleanup === 'function') {
                     state.cleanup();
                 }
             }
+            break;
         }
-    }
-    if (event.type === 'errored') {
-        function handleError(element, error) {
-            element = findElementWithCatchHandlers(element);
-            if (!element) {
-                throw new Error('Error occurred during rendering a component', { cause: error });
+        case 'errored': {
+            store.hooksIndex = 0;
+            if (event.handled) {
+                break;
             }
-            try {
-                for (const state of element.store.catchHandlers) {
-                    state(error);
+            let element = event.element;
+            let curError = event.error;
+            let catchers = null;
+            while (element) {
+                if ((element.flag & SIMP_ELEMENT_FLAG_FC) === 0) {
+                    element = element.parent;
+                    continue;
+                }
+                store = getHooksSpecificStore(element.store);
+                catchers = store.catchHandlers;
+                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;
                 }
-            }
-            catch (error) {
-                handleError(element.parent, error);
             }
         }
-        handleError(event.element, event.error);
     }
 });
-function findElementWithCatchHandlers(element) {
-    let temp = element;
-    while (temp != null) {
-        if (temp.store?.catchHandlers) {
-            return temp;
+export function createUseRef(renderRuntime) {
+    return initialValue => {
+        const store = getHooksSpecificStore(renderRuntime.currentRenderingFCElement.store);
+        const hookStates = getOrCreateHookStates(store);
+        if (!hookStates[store.hooksIndex]) {
+            hookStates[store.hooksIndex] = { current: initialValue };
         }
-        temp = temp.parent;
-    }
-    return null;
+        return hookStates[store.hooksIndex++];
+    };
 }
-export function useRef(initialValue) {
-    const hookStates = getOrCreateHookStates(currentElement);
-    if (!hookStates[currentIndex]) {
-        hookStates[currentIndex] = { current: initialValue };
-    }
-    return hookStates[currentIndex++];
-}
-export function useRerender() {
-    const hookStates = getOrCreateHookStates(currentElement);
-    if (!hookStates[currentIndex]) {
-        const elementStore = currentElement.store;
-        hookStates[currentIndex] = function rerender() {
-            elementStore.forceRender = true;
-            _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;
-            elementStore.forceRender = true;
-            _rerender(elementStore.latestElement);
-        };
-    }
-    return hookStates[currentIndex++];
-}
-export function useEffect(effect, deps) {
-    const hookStates = getOrCreateHookStates(currentElement);
-    let state = hookStates[currentIndex];
-    if (!state) {
-        state = hookStates[currentIndex] = { effect };
-    }
-    if (!areDepsEqual(deps, state.deps)) {
-        state.effect = effect;
-        state.deps = deps;
-        getOrCreateEffectHookStates(currentElement).push(state);
-    }
-    currentIndex++;
-}
-export function useMounted(effect) {
-    const hookStates = getOrCreateHookStates(currentElement);
-    if (!hookStates[currentIndex]) {
-        hookStates[currentIndex] = { effect };
-        getOrCreateEffectHookStates(currentElement).push(hookStates[currentIndex]);
-    }
-    currentIndex++;
+export function createUseRerender(renderRuntime) {
+    return () => {
+        const store = getHooksSpecificStore(renderRuntime.currentRenderingFCElement.store);
+        const hookStates = getOrCreateHookStates(store);
+        if (!hookStates[store.hooksIndex]) {
+            const elementStore = renderRuntime.currentRenderingFCElement.store;
+            hookStates[store.hooksIndex] = function rerender() {
+                _rerender(elementStore, renderRuntime);
+            };
+        }
+        return hookStates[store.hooksIndex++];
+    };
 }
-export function useUnmounted(cleanup) {
-    const hookStates = getOrCreateHookStates(currentElement);
-    if (!hookStates[currentIndex]) {
-        hookStates[currentIndex] = { cleanup, effect: noop };
-    }
-    currentIndex++;
+export function createUseState(renderRuntime) {
+    return (initialState => {
+        const store = getHooksSpecificStore(renderRuntime.currentRenderingFCElement.store);
+        const hookStates = getOrCreateHookStates(store);
+        if (!hookStates[store.hooksIndex]) {
+            const elementStore = renderRuntime.currentRenderingFCElement.store;
+            const state = (hookStates[store.hooksIndex] = [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, renderRuntime);
+            };
+        }
+        return hookStates[store.hooksIndex++];
+    });
 }
-export function useCatch(cb) {
-    if (!currentElement.store) {
-        currentElement.store = {};
-    }
-    if (!currentElement.store.catchHandlers) {
-        currentElement.store.catchHandlers = [];
-    }
-    currentElement.store.catchHandlers.push(cb);
+export function createUseEffect(renderRuntime) {
+    return (effect, deps) => {
+        const store = getHooksSpecificStore(renderRuntime.currentRenderingFCElement.store);
+        const hookStates = getOrCreateHookStates(store);
+        let state = hookStates[store.hooksIndex];
+        if (!state) {
+            state = hookStates[store.hooksIndex] = {
+                effect,
+                deps: null,
+                cleanup: null,
+            };
+        }
+        if (!shallowEqual(deps, state.deps)) {
+            state.effect = effect;
+            state.deps = deps || null;
+            getOrCreateEffectHookStates(store).push(state);
+        }
+        store.hooksIndex++;
+    };
 }
-export function areDepsEqual(nextDeps, prevDeps) {
-    if (nextDeps == null || prevDeps == null || nextDeps.length !== prevDeps.length) {
-        return false;
-    }
-    for (let i = 0; i < prevDeps.length; i++) {
-        if (!Object.is(nextDeps[i], prevDeps[i])) {
-            return false;
+export function createUseCatch(renderRuntime) {
+    return cb => {
+        const store = getHooksSpecificStore(renderRuntime.currentRenderingFCElement.store);
+        if (!store.catchHandlers) {
+            store.catchHandlers = [];
         }
-    }
-    return true;
+        store.catchHandlers.push(cb);
+    };
 }
-function getOrCreateHookStates(element) {
-    if (!element.store) {
-        element.store = {};
+function getOrCreateHookStates(store) {
+    if (!store.hookStates) {
+        store.hookStates = [];
     }
-    if (!element.store.hookStates) {
-        element.store.hookStates = [];
-    }
-    return element.store.hookStates;
+    return store.hookStates;
 }
-function getOrCreateEffectHookStates(element) {
-    if (!element.store) {
-        element.store = {};
-    }
-    if (!element.store.effectsHookStates) {
-        element.store.effectsHookStates = [];
+function getOrCreateEffectHookStates(store) {
+    if (!store.effectsHookStates) {
+        store.effectsHookStates = [];
     }
-    return element.store.effectsHookStates;
+    return store.effectsHookStates;
 }
 export default {
-    useRef,
-    useRerender,
-    useState,
-    useEffect,
-    useMounted,
-    useUnmounted,
-    useCatch,
-    areDepsEqual,
+    createUseRef,
+    createUseRerender,
+    createUseState,
+    createUseEffect,
+    createUseCatch,
 };

package/jsx-runtime/index.d.ts

@@ -1,5 +1,4 @@
 import type { FC, Fragment as FragmentType, Key, SimpElement } from '../core/index.js';
-import type { Maybe } from '../shared/index.js';
 import type {
   AnchorHTMLAttributes,
   AreaHTMLAttributes,
@@ -55,6 +54,7 @@ import type {
   VideoHTMLAttributes,
   WebViewHTMLAttributes,
 } from '../dom/index.js';
+import type { Maybe } from '../shared/index.js';
 
 declare function jsx<P = {}>(type: string | FC<P>, props?: P, key?: Maybe<Key>): SimpElement<P>;
 
@@ -64,6 +64,7 @@ export { jsx as jsxs, jsx as jsxDEV };
 export { Fragment };
 
 declare global {
+  // biome-ignore lint/style/noNamespace: React-like API requirement.
   namespace JSX {
     interface IntrinsicElements {
       // HTML

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpreact/simpreact",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "",
   "homepage": "https://github.com/dPaskhin/simpreact#readme",
   "main": "./core/index.js",
@@ -17,6 +17,14 @@
     "./compat/*": {
       "import": "./compat/index.js"
     },
+    "./component": {
+      "import": "./component/index.js",
+      "types": "./component/index.d.ts"
+    },
+    "./context/*": {
+      "import": "./context/index.js",
+      "types": "./context/index.d.ts"
+    },
     "./internal": {
       "import": "./core/internal.js",
       "types": "./core/internal.d.ts"

package/shared/index.d.ts

@@ -16,6 +16,16 @@ declare class EventBus<Event = void> {
   public subscribe(subscriber: Subscriber<Event>): () => void;
 }
 
+export type Cleanup = () => void;
+export type Effect = () => void | Cleanup;
+export type DependencyList = readonly unknown[];
+
+export interface EffectState {
+  effect: Effect;
+  cleanup: Nullable<Cleanup>;
+  deps: Nullable<DependencyList>;
+}
+
 declare function isSimpText(value: unknown): value is SimpText;
 
 declare function noop(): void;

package/shared/index.js

@@ -1,14 +1,11 @@
-import { EventBus } from './EventBus.js';
 import { emptyArray, emptyMap, emptyObject } from './lang.js';
 import { callOrGet, isSimpText, noop, shallowEqual } from './utils.js';
-export { emptyObject, emptyMap, emptyArray, isSimpText, EventBus, noop, callOrGet, shallowEqual };
+export { emptyObject, emptyMap, emptyArray, isSimpText, noop, callOrGet, shallowEqual };
 export default {
     isSimpText,
-    EMPTY_MAP: emptyMap,
-    EMPTY_ARRAY: emptyArray,
-    EMPTY_OBJECT: emptyObject,
-    EventBus,
+    emptyMap,
+    emptyArray,
+    emptyObject,
     noop,
     callOrGet,
-    emptyObject,
 };

package/shared/utils.js

@@ -22,17 +22,17 @@ export function shallowEqual(objA, objB) {
     if (Object.is(objA, objB)) {
         return true;
     }
-    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    if (typeof objA !== 'object' || objA == null || typeof objB !== 'object' || objB == null) {
         return false;
     }
-    const keysA = Object.keys(objA);
-    const keysB = Object.keys(objB);
+    const keysA = Reflect.ownKeys(objA);
+    const keysB = Reflect.ownKeys(objB);
     if (keysA.length !== keysB.length) {
         return false;
     }
     for (let i = 0; i < keysA.length; i++) {
         const currentKey = keysA[i];
-        if (!Object.prototype.hasOwnProperty.call(objB, currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
+        if (!Object.hasOwn(objB, currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
             return false;
         }
     }

package/shared/EventBus.d.ts

@@ -1,18 +0,0 @@
-type Subscriber<Event> = (event: Event) => boolean | void;
-export declare class EventBus<Event = void> {
-    private _subscribers;
-    /**
-     * Synchronously invokes subscribers and passes the event.
-     *
-     * @param event The event to publish.
-     */
-    publish(event: Event): void;
-    /**
-     * Adds a subscriber to the event bus. Subscriber would receive all events published via {@link EventBus.publish}.
-     *
-     * @param subscriber The subscriber callback.
-     * @returns The callback that unsubscribes the subscriber from the event bus.
-     */
-    subscribe(subscriber: Subscriber<Event>): () => void;
-}
-export {};

package/shared/EventBus.js

@@ -1,28 +0,0 @@
-export class EventBus {
-    _subscribers = [];
-    /**
-     * Synchronously invokes subscribers and passes the event.
-     *
-     * @param event The event to publish.
-     */
-    publish(event) {
-        for (const subscriber of this._subscribers) {
-            subscriber(event);
-        }
-    }
-    /**
-     * Adds a subscriber to the event bus. Subscriber would receive all events published via {@link EventBus.publish}.
-     *
-     * @param subscriber The subscriber callback.
-     * @returns The callback that unsubscribes the subscriber from the event bus.
-     */
-    subscribe(subscriber) {
-        const subscribers = this._subscribers;
-        if (subscribers.indexOf(subscriber) === -1) {
-            subscribers.push(subscriber);
-        }
-        return () => {
-            subscribers.splice(subscribers.indexOf(subscriber), 1);
-        };
-    }
-}