@simpreact/simpreact 0.0.2 → 0.0.4

package/core/rerender.js

@@ -1,69 +1,128 @@
 import { findParentReferenceFromElement, updateFunctionalComponent } from './patching.js';
+import { lifecycleEventBus } from './lifecycleEventBus.js';
+lifecycleEventBus.subscribe(event => {
+    if (event.type === 'afterRender' || event.type === 'errored' || event.type === 'unmounted') {
+        batchingRerenderLocker._untrack(event.element.store);
+        renderingRerenderLocker._untrack(event.element.store);
+    }
+});
 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.store);
         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.store);
+        return;
     }
+    renderingRerenderLocker.lock();
+    updateFunctionalComponent(element, findParentReferenceFromElement(element), null, element.context || null, element.store.hostNamespace);
+    renderingRerenderLocker.flush();
 }
-export const syncRerenderLocker = {
+export const batchingRerenderLocker = {
     _isLocked: false,
-    _elements: new Set(),
-    get isLocked() {
-        return this._isLocked;
+    _elementStores: new Set(),
+    _last: undefined,
+    _track(store) {
+        if (this._elementStores.has(store)) {
+            return;
+        }
+        if (this._elementStores.size === 0 || store.forceRender) {
+            this._elementStores.add(store);
+            this._last = store;
+            return;
+        }
+        if (isParentOf(store.latestElement, this._last.latestElement)) {
+            return;
+        }
+        if (isParentOf(this._last.latestElement, store.latestElement)) {
+            this._elementStores.clear();
+            this._elementStores.add(store);
+            this._last = store;
+        }
+    },
+    _untrack(store) {
+        if (this._elementStores.delete(store) && store === this._last) {
+            this._last = undefined;
+            for (const val of this._elementStores) {
+                this._last = val;
+            }
+        }
     },
     lock() {
         this._isLocked = true;
     },
-    track(element) {
-        this._elements.add(element);
-    },
     flush() {
         this._isLocked = false;
-        if (this._elements.size === 0) {
+        if (this._elementStores.size === 0) {
             return;
         }
-        for (const element of this._elements) {
-            this._elements.delete(element);
-            rerender(element.store.latestElement);
+        for (const store of this._elementStores) {
+            this._untrack(store);
+            rerender(store.latestElement);
         }
     },
 };
-export const asyncRerenderLocker = {
+export const renderingRerenderLocker = {
     _isLocked: false,
-    _elements: new Set(),
-    get isLocked() {
-        return this._isLocked;
+    _elementStores: new Set(),
+    _last: undefined,
+    _track(store) {
+        if (this._elementStores.has(store)) {
+            return;
+        }
+        if (this._elementStores.size === 0 || store.forceRender) {
+            this._elementStores.add(store);
+            this._last = store;
+            return;
+        }
+        if (isParentOf(store.latestElement, this._last.latestElement)) {
+            return;
+        }
+        if (isParentOf(this._last.latestElement, store.latestElement)) {
+            this._elementStores.clear();
+            this._elementStores.add(store);
+            this._last = store;
+        }
+    },
+    _untrack(store) {
+        if (this._elementStores.delete(store) && store === this._last) {
+            this._last = undefined;
+            for (const val of this._elementStores) {
+                this._last = val;
+            }
+        }
     },
     lock() {
         this._isLocked = true;
     },
-    track(element) {
-        this._elements.add(element);
-    },
     flush() {
         this._isLocked = false;
-        if (this._elements.size === 0) {
+        if (this._elementStores.size === 0) {
             return;
         }
         queueMicrotask(() => {
-            for (const element of this._elements) {
-                this._elements.delete(element);
-                rerender(element.store.latestElement);
+            for (const store of this._elementStores) {
+                this._untrack(store);
+                rerender(store.latestElement);
             }
         });
     },
 };
+function isParentOf(element, parent) {
+    let current = element.parent;
+    while (current) {
+        if (current.store === parent.store) {
+            return true;
+        }
+        current = current.parent;
+    }
+    return false;
+}

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);
@@ -24,7 +28,7 @@ export function unmount(element) {
         remove(element.children, element.ref);
         return;
     }
-    // Only FRAGMENT, PROVIDER, CONSUMER, and HOST elements remain,
+    // Only FRAGMENT and HOST elements remain,
     // with Maybe<Many<SimpElement>> children due to normalization.
     if (element.children) {
         unmount(element.children);
@@ -41,11 +45,11 @@ export function clearElementHostReference(element, parentHostReference) {
             return;
         }
         const children = element.children;
-        if (element.flag === 'FC' || element.flag === 'CONSUMER') {
+        if (element.flag === 'FC') {
             element = children;
             continue;
         }
-        if (element.flag === 'FRAGMENT' || element.flag === 'PROVIDER') {
+        if (element.flag === 'FRAGMENT') {
             if (Array.isArray(children)) {
                 for (let i = 0, len = children.length; i < len; ++i) {
                     clearElementHostReference(children[i], parentHostReference);

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

@@ -1,9 +1,18 @@
 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 });
     }
 }
 export function getElementFromDom(target) {
-    return target?.[elementPropertyName] ?? null;
+    if (!target) {
+        return null;
+    }
+    while (target && !(elementPropertyName in target)) {
+        target = target.parentElement;
+    }
+    if (!target) {
+        return null;
+    }
+    return target[elementPropertyName];
 }

package/dom/events.d.ts

@@ -4,12 +4,20 @@ export declare class SyntheticEvent {
     nativeEvent: Event;
     currentTarget: Nullable<EventTarget>;
     isPropagationStopped: boolean;
-    isDefaultPrevented: boolean;
+    _isDefaultPrevented: boolean;
+    button?: number;
+    buttons?: number;
+    pointerId?: number;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    metaKey?: boolean;
     constructor(event: Event);
     get target(): EventTarget | null;
     get type(): string;
     stopPropagation(): void;
     preventDefault(): void;
+    isDefaultPrevented(): boolean;
 }
 export declare function dispatchDelegatedEvent(event: Event): void;
 export declare function patchEvent(name: string, prevValue: any, nextValue: any, dom: Element): void;

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',
@@ -39,9 +39,22 @@ export class SyntheticEvent {
     nativeEvent;
     currentTarget = null;
     isPropagationStopped = false;
-    isDefaultPrevented = false;
+    _isDefaultPrevented = false;
+    button;
+    buttons;
+    pointerId;
+    altKey;
+    ctrlKey;
+    shiftKey;
+    metaKey;
     constructor(event) {
         this.nativeEvent = event;
+        this.button = event.button;
+        this.buttons = event.buttons;
+        this.pointerId = event.pointerId;
+        this.altKey = event.altKey;
+        this.ctrlKey = event.ctrlKey;
+        this.metaKey = event.metaKey;
     }
     get target() {
         return this.nativeEvent.target;
@@ -54,12 +67,15 @@ export class SyntheticEvent {
         this.nativeEvent.stopPropagation();
     }
     preventDefault() {
-        this.isDefaultPrevented = true;
+        this._isDefaultPrevented = true;
         this.nativeEvent.preventDefault();
     }
+    isDefaultPrevented() {
+        return this._isDefaultPrevented;
+    }
 }
 export function dispatchDelegatedEvent(event) {
-    syncRerenderLocker.lock();
+    batchingRerenderLocker.lock();
     const syntheticEvent = new SyntheticEvent(event);
     const captureHandlers = [];
     const bubbleHandlers = [];
@@ -91,7 +107,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

@@ -1,23 +1,27 @@
-import type { RefObject, SimpContext } from '../core/index.js';
+import type { RefObject } from '../core/index.js';
 
 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;
 
 declare function useUnmounted(cleanup: Cleanup): void;
 
-declare function useContext<T>(context: SimpContext<T>): T;
-
 declare function useCatch(cb: (error: any) => void): void;
 
 declare function areDepsEqual(nextDeps: DependencyList | undefined, prevDeps: DependencyList | undefined): boolean;

package/hooks/index.js

@@ -1,5 +1,5 @@
-import { lifecycleEventBus, rerender, syncRerenderLocker } from '../core/internal.js';
-import { noop } from '../shared/index.js';
+import { batchingRerenderLocker, 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;
@@ -9,6 +9,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 +20,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,13 +41,15 @@ lifecycleEventBus.subscribe(event => {
                 }
                 state.cleanup = state.effect() || undefined;
             }
-            syncRerenderLocker.flush();
+            batchingRerenderLocker.flush();
         }
     }
     if (event.type === 'unmounted') {
         const element = event.element;
         if (element.store?.hookStates) {
-            for (const state of element.store.hookStates) {
+            const hookStates = element.store.hookStates;
+            element.store.hookStates = undefined;
+            for (const state of hookStates) {
                 if (state && 'cleanup' in state && typeof state.cleanup === 'function') {
                     state.cleanup();
                 }
@@ -57,11 +62,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 +91,28 @@ export function useRerender() {
     const hookStates = getOrCreateHookStates(currentElement);
     if (!hookStates[currentIndex]) {
         const elementStore = currentElement.store;
-        hookStates[currentIndex] = () => rerender(elementStore.latestElement);
+        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++];
 }
@@ -118,9 +144,6 @@ export function useUnmounted(cleanup) {
     }
     currentIndex++;
 }
-export function useContext(context) {
-    return currentElement.contextMap?.get(context) ?? context.defaultValue;
-}
 export function useCatch(cb) {
     if (!currentElement.store) {
         currentElement.store = {};
@@ -159,4 +182,13 @@ 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,
+    useCatch,
+    areDepsEqual,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpreact/simpreact",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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/index.d.ts

@@ -17,3 +17,9 @@ declare class EventBus<Event = void> {
 }
 
 declare function isSimpText(value: unknown): value is SimpText;
+
+declare function noop(): void;
+
+declare function callOrGet<T, A extends any[]>(value: T | ((...args: A) => T), ...args: A): T;
+
+declare function shallowEqual(objA: any, objB: any): boolean;

package/shared/index.js

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

package/shared/utils.d.ts

@@ -1,3 +1,5 @@
 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;
+export declare function shallowEqual(objA: any, objB: any): boolean;