@simpreact/simpreact 0.0.1 → 0.0.3

package/dom/props/controlled/input.js

@@ -1,5 +1,5 @@
-import { syncRerenderLocker } from '../../../core/internal.js';
-import { getElementFromDom } from '../../attach-element-to-dom';
+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.d.ts

@@ -1,5 +1,5 @@
 import type { SimpElement } from '../../../core/internal.js';
-import type { Dict } from '../../../shared';
+import type { Dict } from '../../../shared/index.js';
 export declare function isEventNameIgnored(eventName: string): boolean;
 export declare function addControlledSelectEventHandlers(dom: HTMLSelectElement): void;
 export declare function removeControlledSelectEventHandlers(dom: HTMLSelectElement): void;

package/dom/props/controlled/select.js

@@ -1,6 +1,6 @@
-import { syncRerenderLocker } from '../../../core/internal.js';
-import { emptyObject } from '../../../shared';
-import { getElementFromDom } from '../../attach-element-to-dom';
+import { batchingRerenderLocker } from '../../../core/internal.js';
+import { emptyObject } from '../../../shared/index.js';
+import { getElementFromDom } from '../../attach-element-to-dom.js';
 export function isEventNameIgnored(eventName) {
     return eventName === 'onChange';
 }
@@ -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.d.ts

@@ -1,5 +1,5 @@
 import type { SimpElement } from '../../../core/internal.js';
-import type { Dict } from '../../../shared';
+import type { Dict } from '../../../shared/index.js';
 export declare function isEventNameIgnored(eventName: string): boolean;
 export declare function addControlledTextareaEventHandlers(dom: HTMLTextAreaElement): void;
 export declare function removeControlledTextareaEventHandlers(dom: HTMLTextAreaElement): void;

package/dom/props/controlled/textarea.js

@@ -1,5 +1,5 @@
-import { syncRerenderLocker } from '../../../core/internal.js';
-import { getElementFromDom } from '../../attach-element-to-dom';
+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/dangerInnerHTML.d.ts

@@ -1,4 +1,4 @@
-import type { Maybe } from '../../shared';
+import type { Maybe } from '../../shared/index.js';
 import type { SimpElement } from '../../core/internal.js';
 export declare function patchDangerInnerHTML(prevValue: Maybe<{
     __html: string;

package/dom/props/index.d.ts

@@ -1 +1 @@
-export * from './props';
+export * from './props.js';

package/dom/props/index.js

@@ -1 +1 @@
-export * from './props';
+export * from './props.js';

package/dom/props/props.d.ts

@@ -1,5 +1,5 @@
 import type { SimpElement } from '../../core/internal.js';
-import type { Namespace } from '../namespace';
+import type { Namespace } from '../namespace.js';
 export declare function mountProps(dom: HTMLElement | SVGElement, element: SimpElement, namespace: Namespace): void;
 export declare function unmountProps(dom: HTMLElement | SVGElement, element: SimpElement): void;
 export declare function patchProps(dom: HTMLElement | SVGElement, prevElement: SimpElement, nextElement: SimpElement, namespace: Namespace): void;

package/dom/props/props.js

@@ -1,9 +1,9 @@
-import { emptyObject } from '../../shared';
-import { defaultNamespace } from '../namespace';
-import { addControlledFormElementEventHandlers, isEventNameIgnored, isFormElementControlled, removeControlledFormElementEventHandlers, syncControlledFormElementPropsWithAttrs, } from './controlled';
-import { isPropNameEventName, patchEvent } from '../events';
-import { patchStyle } from './style';
-import { patchDangerInnerHTML } from './dangerInnerHTML';
+import { emptyObject } from '../../shared/index.js';
+import { defaultNamespace } from '../namespace.js';
+import { addControlledFormElementEventHandlers, isEventNameIgnored, isFormElementControlled, removeControlledFormElementEventHandlers, syncControlledFormElementPropsWithAttrs, } from './controlled/index.js';
+import { isPropNameEventName, patchEvent } from '../events.js';
+import { patchStyle } from './style.js';
+import { patchDangerInnerHTML } from './dangerInnerHTML.js';
 export function mountProps(dom, element, namespace) {
     if (!isFormElement(element)) {
         for (const propName in element.props) {

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.d.ts

@@ -1,5 +1,5 @@
 import { type SimpElement } from '../core/internal.js';
-import type { Nullable } from '../shared';
+import type { Nullable } from '../shared/index.js';
 export declare function render(element: Nullable<SimpElement>, container: Nullable<Element | DocumentFragment>): void;
 interface SimpRoot {
     render(element: SimpElement): void;

package/dom/render.js

@@ -1,13 +1,13 @@
-import { asyncRerenderLocker, hostAdapter, mount, patch, provideHostAdapter, remove, } from '../core/internal.js';
-import { domAdapter } from './domAdapter';
-import { attachElementToDom, getElementFromDom } from './attach-element-to-dom';
+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);
 export function render(element, container) {
     if (!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,15 +1,21 @@
-import type { RefObject, SimpContext } from '../core';
+import type { RefObject, SimpContext } 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;

package/hooks/index.js

@@ -1,5 +1,6 @@
-import { lifecycleEventBus, rerender, syncRerenderLocker } from '../core/internal.js';
-import { noop } from '../shared';
+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/jsx-runtime/index.d.ts

@@ -1,5 +1,5 @@
-import type { FC, Fragment as FragmentType, Key, SimpElement } from '../core';
-import type { Maybe } from '../shared';
+import type { FC, Fragment as FragmentType, Key, SimpElement } from '../core/index.js';
+import type { Maybe } from '../shared/index.js';
 import type {
   AnchorHTMLAttributes,
   AreaHTMLAttributes,
@@ -54,7 +54,7 @@ import type {
   TrackHTMLAttributes,
   VideoHTMLAttributes,
   WebViewHTMLAttributes,
-} from '../dom';
+} from '../dom/index.js';
 
 declare function jsx<P = {}>(type: string | FC<P>, props?: P, key?: Maybe<Key>): SimpElement<P>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpreact/simpreact",
-  "version": "0.0.1",
+  "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"
@@ -44,6 +50,7 @@
     "url": "git+https://github.com/dPaskhin/simpreact.git"
   },
   "sideEffects": false,
+  "type": "module",
   "license": "MIT",
   "author": "Dmitrii Paskhin <d.pasxin@gmail.com>",
   "dependencies": {

package/shared/index.js

@@ -1,5 +1,5 @@
-import { EventBus } from './EventBus';
-import { emptyArray, emptyMap, emptyObject } from './lang';
-import { isSimpText, noop } from './utils';
+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 };

package/shared/utils.d.ts

@@ -1,3 +1,4 @@
-import type { SimpText } from './public';
+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);
+}