@simpreact/simpreact 0.0.5 → 0.0.7

package/LICENSE.txt

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Dmitrii Paskhin
+Copyright (c) 2026 Dmitrii Paskhin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/compat/context.d.ts

@@ -1,8 +1,8 @@
 import * as SimpReactContext from '../context/index.js';
-export declare const createContext: typeof SimpReactContext.createContext;
-export declare const useContext: typeof SimpReactContext.useContext;
+export declare const createContext: SimpReactContext.CreateContext;
+export declare const useContext: SimpReactContext.UseContext;
 declare const _default: {
-    createContext: typeof SimpReactContext.createContext;
-    useContext: typeof SimpReactContext.useContext;
+    createContext: SimpReactContext.CreateContext;
+    useContext: SimpReactContext.UseContext;
 };
 export default _default;

package/compat/context.js

@@ -1,6 +1,7 @@
 import * as SimpReactContext from '../context/index.js';
-export const createContext = SimpReactContext.createContext;
-export const useContext = SimpReactContext.useContext;
+import { renderRuntime } from './renderRuntime.js';
+export const createContext = SimpReactContext.createCreateContext(renderRuntime);
+export const useContext = SimpReactContext.createUseContext(renderRuntime);
 export default {
     createContext,
     useContext,

package/compat/core.d.ts

@@ -12,6 +12,9 @@ export declare function Suspense(props: {
     fallback: SimpReactInternal.SimpNode;
     children: SimpReactInternal.SimpNode;
 }): SimpReactInternal.SimpNode;
+export declare function StrictMode(props: {
+    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;
@@ -32,6 +35,7 @@ declare const _default: {
     cloneElement: typeof cloneElement;
     isValidElement: typeof isValidElement;
     Suspense: typeof Suspense;
+    StrictMode: typeof StrictMode;
     forwardRef: typeof forwardRef;
     Fragment: SimpReactInternal.Fragment;
     createElement: typeof SimpReactInternal.createElement;

package/compat/core.js

@@ -1,5 +1,5 @@
 import * as SimpReactInternal from '../core/internal.js';
-import * as SimpReactHooks from '../hooks/index.js';
+import { useCatch, useState } from './hooks.js';
 export const Children = {
     map(children, fn) {
         return Children.toArray(children).map(fn);
@@ -39,17 +39,17 @@ export function cloneElement(element, props, ...children) {
     if (!isValidElement(element)) {
         throw new Error(`cloneElement: expected a SimpElement, got ${element}`);
     }
-    if (element.flag === 'PORTAL') {
+    if ((element.flag & SimpReactInternal.SIMP_ELEMENT_FLAG_PORTAL) !== 0) {
         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);
+    return SimpReactInternal.createElement((element.flag & SimpReactInternal.SIMP_ELEMENT_FLAG_FRAGMENT) !== 0 ? 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 => {
+    const [isSuspended, setIsSuspended] = useState(false);
+    useCatch(error => {
         if (!(error instanceof Promise)) {
             throw error;
         }
@@ -61,6 +61,9 @@ export function Suspense(props) {
     });
     return isSuspended ? props.fallback : props.children;
 }
+export function StrictMode(props) {
+    return props.children;
+}
 export function forwardRef(Component) {
     return function Forwarded(props) {
         return Component(props, props?.ref || null);
@@ -81,6 +84,7 @@ export default {
     cloneElement,
     isValidElement,
     Suspense,
+    StrictMode,
     forwardRef,
     Fragment,
     createElement,

package/compat/dom.d.ts

@@ -1,11 +1,10 @@
-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;
+export declare const render: (element: SimpReactShared.Nullable<import("../core/createElement.js").SimpElement>, container: SimpReactShared.Nullable<Element | DocumentFragment>) => void;
+export declare const createRoot: (container: Element | DocumentFragment) => import("../dom/render.js").SimpRoot;
 declare const _default: {
     hydrate: typeof SimpReactShared.noop;
-    render: typeof SimpReactDOM.render;
-    createRoot: typeof SimpReactDOM.createRoot;
+    render: (element: SimpReactShared.Nullable<import("../core/createElement.js").SimpElement>, container: SimpReactShared.Nullable<Element | DocumentFragment>) => void;
+    createRoot: (container: Element | DocumentFragment) => import("../dom/render.js").SimpRoot;
 };
 export default _default;

package/compat/dom.js

@@ -1,8 +1,9 @@
 import * as SimpReactDOM from '../dom/index.js';
 import * as SimpReactShared from '../shared/index.js';
+import { renderRuntime } from './renderRuntime.js';
 export const hydrate = SimpReactShared.noop;
-export const render = SimpReactDOM.render;
-export const createRoot = SimpReactDOM.createRoot;
+export const render = SimpReactDOM.createRenderer(renderRuntime);
+export const createRoot = SimpReactDOM.createCreateRoot(renderRuntime);
 export default {
     hydrate,
     render,

package/compat/hooks.d.ts

@@ -1,24 +1,27 @@
-import * as SimpReactHooks from '../hooks/index.js';
+import { type DependencyList } from '../hooks/index.js';
+import * as SimpReactShared from '../shared/index.js';
+export declare const useRerender: () => () => void;
+export declare const useState: import("../hooks/index.js").UseState;
+export declare const useEffect: (effect: SimpReactShared.Effect, deps?: SimpReactShared.DependencyList) => void;
+export declare const useLayoutEffect: (effect: SimpReactShared.Effect, deps?: SimpReactShared.DependencyList) => void;
+export declare const useInsertionEffect: (effect: SimpReactShared.Effect, deps?: SimpReactShared.DependencyList) => void;
+export declare const useRef: import("../hooks/index.js").UseRef;
+export declare const useCatch: (cb: (error: any) => void) => void;
 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 function useMemo<T>(factory: () => T, deps: DependencyList): T;
+export declare function useCallback<T>(cb: T, deps: DependencyList): T;
 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;
+    useState: import("../hooks/index.js").UseState;
+    useEffect: (effect: SimpReactShared.Effect, deps?: SimpReactShared.DependencyList) => void;
+    useLayoutEffect: (effect: SimpReactShared.Effect, deps?: SimpReactShared.DependencyList) => void;
+    useInsertionEffect: (effect: SimpReactShared.Effect, deps?: SimpReactShared.DependencyList) => void;
+    useRef: import("../hooks/index.js").UseRef;
 };
 export default _default;

package/compat/hooks.js

@@ -1,8 +1,17 @@
-import * as SimpReactHooks from '../hooks/index.js';
+import { createUseCatch, createUseEffect, createUseRef, createUseRerender, createUseState, } from '../hooks/index.js';
+import * as SimpReactShared from '../shared/index.js';
+import { renderRuntime } from './renderRuntime.js';
+export const useRerender = createUseRerender(renderRuntime);
+export const useState = createUseState(renderRuntime);
+export const useEffect = createUseEffect(renderRuntime);
+export const useLayoutEffect = createUseEffect(renderRuntime);
+export const useInsertionEffect = createUseEffect(renderRuntime);
+export const useRef = createUseRef(renderRuntime);
+export const useCatch = createUseCatch(renderRuntime);
 export function useSyncExternalStore(subscribe, getSnapshot) {
-    const rerender = SimpReactHooks.useRerender();
-    const lastSnapshotRef = SimpReactHooks.useRef(getSnapshot());
-    SimpReactHooks.useEffect(() => {
+    const rerender = useRerender();
+    const lastSnapshotRef = useRef(getSnapshot());
+    useEffect(() => {
         function checkForUpdates() {
             const nextSnapshot = getSnapshot();
             if (!Object.is(lastSnapshotRef.current, nextSnapshot)) {
@@ -17,10 +26,10 @@ export function useSyncExternalStore(subscribe, getSnapshot) {
     return lastSnapshotRef.current;
 }
 export function useReducer(reducer, initializerArg, initializer) {
-    const rerender = SimpReactHooks.useRerender();
-    const reducerRef = SimpReactHooks.useRef(reducer);
+    const rerender = useRerender();
+    const reducerRef = useRef(reducer);
     reducerRef.current = reducer;
-    const stateRef = SimpReactHooks.useRef([
+    const stateRef = useRef([
         initializer ? initializer(initializerArg) : initializerArg,
         function dispatch(action) {
             const newState = reducerRef.current(stateRef.current[0], action);
@@ -35,7 +44,7 @@ export function useReducer(reducer, initializerArg, initializer) {
 }
 let globalId = 0;
 export function useId(prefix = 'id') {
-    const idRef = SimpReactHooks.useRef('');
+    const idRef = useRef('');
     if (idRef.current === '') {
         globalId += 1;
         idRef.current = `${prefix}-${globalId}`;
@@ -43,11 +52,11 @@ export function useId(prefix = 'id') {
     return idRef.current;
 }
 export function useMemo(factory, deps) {
-    const ref = SimpReactHooks.useRef({
+    const ref = useRef({
         deps: undefined,
         value: undefined,
     });
-    if (!SimpReactHooks.areDepsEqual(ref.current.deps, deps)) {
+    if (!SimpReactShared.shallowEqual(ref.current.deps, deps)) {
         ref.current.value = factory();
         ref.current.deps = deps;
     }
@@ -56,11 +65,6 @@ export function useMemo(factory, deps) {
 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 default {
     useSyncExternalStore,
     useReducer,

package/compat/index.d.ts

@@ -3,7 +3,9 @@ export * from './core.js';
 export * from './dom.js';
 export * from './hooks.js';
 export * from './jsx-runtime.js';
+export * from './renderRuntime.js';
 declare const _default: {
+    renderRuntime: import("../core/runtime.js").SimpRenderRuntime;
     jsx: typeof import("../jsx-runtime/index.js").jsx;
     jsxDEV: typeof import("../jsx-runtime/index.js").jsx;
     jsxs: typeof import("../jsx-runtime/index.js").jsx;
@@ -12,14 +14,14 @@ declare const _default: {
     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;
+    useState: import("../hooks/index.js").UseState;
+    useEffect: (effect: import("../shared/public.js").Effect, deps?: import("../shared/public.js").DependencyList) => void;
+    useLayoutEffect: (effect: import("../shared/public.js").Effect, deps?: import("../shared/public.js").DependencyList) => void;
+    useInsertionEffect: (effect: import("../shared/public.js").Effect, deps?: import("../shared/public.js").DependencyList) => void;
+    useRef: import("../hooks/index.js").UseRef;
     hydrate: typeof import("../shared/utils.js").noop;
-    render: typeof import("../dom/render.js").render;
-    createRoot: typeof import("../dom/render.js").createRoot;
+    render: (element: import("../shared/public.js").Nullable<import("../core/createElement.js").SimpElement>, container: import("../shared/public.js").Nullable<Element | DocumentFragment>) => void;
+    createRoot: (container: Element | DocumentFragment) => import("../dom/render.js").SimpRoot;
     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;
@@ -30,6 +32,7 @@ declare const _default: {
     cloneElement: typeof import("./core.js").cloneElement;
     isValidElement: typeof import("./core.js").isValidElement;
     Suspense: typeof import("./core.js").Suspense;
+    StrictMode: typeof import("./core.js").StrictMode;
     forwardRef: typeof import("./core.js").forwardRef;
     Fragment: import("../core/fragment.js").Fragment;
     createElement: typeof import("../core/createElement.js").createElement;
@@ -37,7 +40,7 @@ declare const _default: {
     memo: typeof import("../core/memo.js").memo;
     flushSync: (value: any) => any;
     Component: typeof import("./core.js").Component;
-    createContext: typeof import("../context/index.js").createContext;
-    useContext: typeof import("../context/index.js").useContext;
+    createContext: import("../context/index.js").CreateContext;
+    useContext: import("../context/index.js").UseContext;
 };
 export default _default;

package/compat/index.js

@@ -3,15 +3,18 @@ import coreDefault from './core.js';
 import domDefault from './dom.js';
 import hooksDefault from './hooks.js';
 import jsxRuntimeDefault from './jsx-runtime.js';
+import renderRuntimeDefault from './renderRuntime.js';
 export * from './context.js';
 export * from './core.js';
 export * from './dom.js';
 export * from './hooks.js';
 export * from './jsx-runtime.js';
+export * from './renderRuntime.js';
 export default {
     ...contextDefault,
     ...coreDefault,
     ...domDefault,
     ...hooksDefault,
     ...jsxRuntimeDefault,
+    ...renderRuntimeDefault,
 };

package/compat/renderRuntime.d.ts

@@ -0,0 +1,6 @@
+import type { SimpRenderRuntime } from '../core/internal.js';
+export declare const renderRuntime: SimpRenderRuntime;
+declare const _default: {
+    renderRuntime: SimpRenderRuntime;
+};
+export default _default;

package/compat/renderRuntime.js

@@ -0,0 +1,17 @@
+import { domAdapter } from '../dom/index.js';
+import { emptyObject } from '../shared/index.js';
+export const renderRuntime = {
+    hostAdapter: domAdapter,
+    renderer(component, element) {
+        return component(element.props || emptyObject);
+    },
+    elementToHostMap: new Map(),
+    renderStack: [],
+    currentRenderingFCElement: null,
+    renderPhase: null,
+};
+export default {
+    renderRuntime,
+};
+// TODO
+window.__SIMP_RUNTIME__ = renderRuntime;

package/component/index.d.ts

@@ -0,0 +1,16 @@
+import type { FC, SimpNode } from '../core/index.js';
+
+export type Cleanup = () => void;
+export type Effect = () => void | Cleanup;
+export type DependencyList = readonly unknown[];
+
+export interface ComponentRenderContext<S = {}> {
+  state: S;
+  rerender: () => void;
+  effects: Array<{ effect: Effect; deps?: DependencyList }>;
+  catchers: Array<(error: any) => void>;
+}
+
+declare function component<P = {}, S = {}>(Component: (props: P, ctx: ComponentRenderContext<S>) => SimpNode): FC<P>;
+
+export function componentRenderer(component: FC, element: SimpElement): SimpNode;

package/component/index.js

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

package/context/index.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, SimpNode } from '../core/index.js';
+import type { FunctionalComponent, SimpNode } from '../core/index.js';
 
 export interface ProviderProps<T> {
   value: T;
@@ -16,9 +16,16 @@ export type SimpContext<T> = {
 
 export type ContextType<C extends SimpContext<any>> = C extends SimpContext<infer T> ? T : never;
 
-export type Provider<T> = FunctionComponent<ProviderProps<T>>;
-export type Consumer<T> = FunctionComponent<ConsumerProps<T>>;
+export type Provider<T> = FunctionalComponent<ProviderProps<T>>;
+export type Consumer<T> = FunctionalComponent<ConsumerProps<T>>;
 
-declare function createContext<T>(defaultValue: T): SimpContext<T>;
+export interface CreateContext {
+  <T>(defaultValue: T): SimpContext<T>;
+}
+
+declare function createCreateContext(renderRuntime: SimpRenderRuntime): CreateContext;
 
-declare function useContext<T>(context: SimpContext<T>): T;
+export interface UseContext {
+  <T>(context: SimpContext<T>): T;
+}
+declare function createUseContext(renderRuntime: SimpRenderRuntime): UseContext;