@simpreact/simpreact 0.0.5 → 0.0.7

package/dom/props/dangerInnerHTML.d.ts

@@ -1,7 +1,7 @@
-import type { Maybe } from '../../shared/index.js';
 import type { SimpElement } from '../../core/internal.js';
-export declare function patchDangerInnerHTML(prevValue: Maybe<{
-    __html: string;
-}>, nextValue: Maybe<{
+import type { Maybe } from '../../shared/index.js';
+type DangerInnerHTMLValue = {
     __html: string;
-}>, prevElement: Maybe<SimpElement>, nextElement: SimpElement, dom: Element): void;
+};
+export declare function patchDangerInnerHTML(prevValue: Maybe<DangerInnerHTMLValue>, nextValue: Maybe<DangerInnerHTMLValue>, nextElement: SimpElement, dom: Element): void;
+export {};

package/dom/props/dangerInnerHTML.js

@@ -1,20 +1,15 @@
-import { unmount } from '../../core/internal.js';
-export function patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom) {
-    const prevHTML = prevValue?.__html || '';
-    const nextHTML = nextValue?.__html || '';
+export function patchDangerInnerHTML(prevValue, nextValue, nextElement, dom) {
+    const prevHTML = prevValue?.__html;
+    const nextHTML = nextValue?.__html;
     if (nextElement.children) {
-        console.warn('Avoid setting both children and props.dangerouslySetInnerHTML at the same time — this can cause unpredictable behavior.');
+        console.warn('Avoid setting both children and props.dangerouslySetInnerHTML at the same time — this causes unpredictable behavior.');
     }
-    if (prevHTML !== nextHTML) {
-        if (nextHTML != null && !isSameInnerHTML(dom, nextHTML)) {
-            if (prevElement != null) {
-                if (prevElement.children) {
-                    unmount(prevElement.children);
-                    prevElement.children = undefined;
-                }
-            }
-            dom.innerHTML = nextHTML;
-        }
+    if (prevHTML === nextHTML) {
+        return;
+    }
+    const nextInnerHTML = nextHTML ?? '';
+    if (!isSameInnerHTML(dom, nextInnerHTML)) {
+        dom.innerHTML = nextInnerHTML;
     }
 }
 function isSameInnerHTML(dom, innerHTML) {

package/dom/props/props.d.ts

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

package/dom/props/props.js

@@ -1,36 +1,39 @@
 import { emptyObject } from '../../shared/index.js';
+import { isPropNameEventName, patchEvent } from '../events.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) {
+import { patchStyle } from './style.js';
+export function mountProps(dom, element, namespace, renderRuntime) {
     if (!isFormElement(element)) {
         for (const propName in element.props) {
-            patchDefaultElementPropAndAttrs(propName, dom, null, element, null, element.props[propName], namespace);
+            patchDefaultElementPropAndAttrs(propName, dom, element, null, element.props[propName], namespace, renderRuntime);
         }
         return;
     }
     const isControlled = isFormElementControlled(element.props);
     for (const propName in element.props) {
-        patchFormElementsPropAndAttrs(propName, dom, element, isControlled, null, element.props[propName]);
+        patchFormElementsPropAndAttrs(propName, dom, element, isControlled, null, element.props[propName], renderRuntime);
     }
     if (isControlled) {
-        addControlledFormElementEventHandlers(element);
+        addControlledFormElementEventHandlers(element, renderRuntime);
         syncControlledFormElementPropsWithAttrs(element, element.props, true);
     }
 }
-export function unmountProps(dom, element) {
+export function unmountProps(dom, element, renderRuntime) {
     if (!element.props) {
         return;
     }
+    if (isFormElement(element) && isFormElementControlled(element.props)) {
+        removeControlledFormElementEventHandlers(element, renderRuntime);
+    }
     for (const propName in element.props) {
         if (isPropNameEventName(propName)) {
-            patchEvent(propName, element.props[propName], null, dom);
+            patchEvent(propName, element.props[propName], null, dom, renderRuntime);
         }
     }
 }
-export function patchProps(dom, prevElement, nextElement, namespace) {
+export function patchProps(dom, prevElement, nextElement, namespace, renderRuntime) {
     const prevProps = prevElement.props || emptyObject;
     const nextProps = nextElement.props || emptyObject;
     if (!isFormElement(nextElement)) {
@@ -38,12 +41,12 @@ export function patchProps(dom, prevElement, nextElement, namespace) {
             const prevValue = prevProps[propName];
             const nextValue = nextProps[propName];
             if (prevValue !== nextValue) {
-                patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevValue, nextValue, namespace);
+                patchDefaultElementPropAndAttrs(propName, dom, nextElement, prevValue, nextValue, namespace, renderRuntime);
             }
         }
         for (const propName in prevProps) {
             if (nextProps[propName] == null && prevProps[propName] != null) {
-                patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevProps[propName], null, namespace);
+                patchDefaultElementPropAndAttrs(propName, dom, nextElement, prevProps[propName], null, namespace, renderRuntime);
             }
         }
         return;
@@ -54,25 +57,25 @@ export function patchProps(dom, prevElement, nextElement, namespace) {
         const prevValue = prevProps[propName];
         const nextValue = nextProps[propName];
         if (prevValue !== nextValue) {
-            patchFormElementsPropAndAttrs(propName, dom, nextElement, isNextElementControlled, prevValue, nextValue);
+            patchFormElementsPropAndAttrs(propName, dom, nextElement, isNextElementControlled, prevValue, nextValue, renderRuntime);
         }
     }
     for (const propName in prevProps) {
         if (nextProps[propName] == null && prevProps[propName] != null) {
-            patchFormElementsPropAndAttrs(propName, dom, prevElement, isPrevElementControlled, prevProps[propName], null);
+            patchFormElementsPropAndAttrs(propName, dom, prevElement, isPrevElementControlled, prevProps[propName], null, renderRuntime);
         }
     }
     if (!isPrevElementControlled && isNextElementControlled) {
-        addControlledFormElementEventHandlers(nextElement);
+        addControlledFormElementEventHandlers(nextElement, renderRuntime);
     }
     else if (isPrevElementControlled && !isNextElementControlled) {
-        removeControlledFormElementEventHandlers(prevElement);
+        removeControlledFormElementEventHandlers(prevElement, renderRuntime);
     }
     if (isNextElementControlled) {
         syncControlledFormElementPropsWithAttrs(nextElement, nextProps);
     }
 }
-function patchFormElementsPropAndAttrs(propName, dom, element, isControlled, prevValue, nextValue) {
+function patchFormElementsPropAndAttrs(propName, dom, element, isControlled, prevValue, nextValue, renderRuntime) {
     switch (propName) {
         case 'children':
         case 'className':
@@ -109,17 +112,17 @@ function patchFormElementsPropAndAttrs(propName, dom, element, isControlled, pre
         default:
             if (isPropNameEventName(propName)) {
                 if (isControlled && isEventNameIgnored(element, propName)) {
-                    patchEvent(propName, prevValue, null, dom);
+                    patchEvent(propName, prevValue, null, dom, renderRuntime);
                     break;
                 }
-                patchEvent(propName, prevValue, nextValue, dom);
+                patchEvent(propName, prevValue, nextValue, dom, renderRuntime);
             }
             else {
                 patchDomAttr(dom, nextValue, propName);
             }
     }
 }
-function patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevValue, nextValue, namespace) {
+function patchDefaultElementPropAndAttrs(propName, dom, nextElement, prevValue, nextValue, namespace, renderRuntime) {
     switch (propName) {
         case 'children':
         case 'className':
@@ -150,11 +153,11 @@ function patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement
             patchStyle(prevValue, nextValue, dom);
             break;
         case 'dangerouslySetInnerHTML':
-            patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom);
+            patchDangerInnerHTML(prevValue, nextValue, nextElement, dom);
             break;
         default:
             if (isPropNameEventName(propName)) {
-                patchEvent(propName, prevValue, nextValue, dom);
+                patchEvent(propName, prevValue, nextValue, dom, renderRuntime);
             }
             else {
                 patchDomAttr(dom, nextValue, propName, namespace);

package/dom/render.d.ts

@@ -1,9 +1,8 @@
-import { type SimpElement } from '../core/internal.js';
+import { type SimpElement, type SimpRenderRuntime } from '../core/internal.js';
 import type { Nullable } from '../shared/index.js';
-export declare function render(element: Nullable<SimpElement>, container: Nullable<Element | DocumentFragment>): void;
-interface SimpRoot {
+export declare function createRenderer(renderRuntime: SimpRenderRuntime): (element: Nullable<SimpElement>, container: Nullable<Element | DocumentFragment>) => void;
+export interface SimpRoot {
     render(element: SimpElement): void;
     unmount(): void;
 }
-export declare function createRoot(container: Element | DocumentFragment): SimpRoot;
-export {};
+export declare function createCreateRoot(renderRuntime: SimpRenderRuntime): (container: Element | DocumentFragment) => SimpRoot;

package/dom/render.js

@@ -1,41 +1,45 @@
-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);
-    renderingRerenderLocker.lock();
-    if (!currentRootElement) {
-        if (element) {
-            hostAdapter.clearNode(container);
-            attachElementToDom((element.parent = { flag: 'HOST', reference: container, children: element, parent: null }), container);
-            mount(element, container, null, null, hostAdapter.getHostNamespaces(element, undefined)?.self);
+import { createElement, mount, patch, unmount } from '../core/internal.js';
+export function createRenderer(renderRuntime) {
+    return (element, container) => {
+        if (!container) {
+            return;
         }
-    }
-    else {
-        if (!element) {
-            remove(currentRootElement.children, container);
-            currentRootElement.children = null;
+        const currentRootElement = renderRuntime.hostAdapter.getElementFromReference(container, renderRuntime);
+        if (!currentRootElement) {
+            if (element) {
+                renderRuntime.hostAdapter.clearNode(container);
+                element.parent = createElement('', null, element);
+                element.parent.type = null;
+                element.parent.reference = container;
+                renderRuntime.hostAdapter.attachElementToReference(element.parent, container, renderRuntime);
+                mount(element, container, null, null, renderRuntime.hostAdapter.getHostNamespaces(element, undefined)?.self, renderRuntime);
+            }
         }
         else {
-            const prevChildren = currentRootElement.children;
-            currentRootElement.children = element;
-            element.parent = currentRootElement;
-            patch(prevChildren, element, container, null, null, hostAdapter.getHostNamespaces(element, undefined)?.self);
+            if (!element) {
+                unmount(currentRootElement.children, renderRuntime);
+                renderRuntime.hostAdapter.detachElementFromReference(container, renderRuntime);
+                renderRuntime.hostAdapter.clearNode(container);
+            }
+            else {
+                const prevChildren = currentRootElement.children;
+                currentRootElement.children = element;
+                element.parent = currentRootElement;
+                patch(prevChildren, element, container, null, null, renderRuntime.hostAdapter.getHostNamespaces(element, undefined)?.self, renderRuntime);
+            }
         }
-    }
-    renderingRerenderLocker.flush();
+    };
 }
-export function createRoot(container) {
-    return {
-        render(element) {
-            render(element, container);
-        },
-        unmount() {
-            render(null, container);
-        },
+export function createCreateRoot(renderRuntime) {
+    const render = createRenderer(renderRuntime);
+    return (container) => {
+        return {
+            render(element) {
+                render(element, container);
+            },
+            unmount() {
+                render(null, container);
+            },
+        };
     };
 }

package/hooks/index.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from '../core/index.js';
+import type { RefObject, SimpRenderRuntime } from '../core/index.js';
 
 export type Cleanup = () => void;
 export type Effect = () => void | Cleanup;
@@ -7,21 +7,23 @@ 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>;
+export interface UseRef {
+  <T>(initialValue: T): RefObject<T>;
+  <T>(initialValue: T | null): RefObject<T | null>;
+  <T = undefined>(initialValue?: T): RefObject<T | undefined>;
+}
+declare function createUseRef(renderRuntime: SimpRenderRuntime): UseRef;
 
-declare function useRerender(): () => void;
+declare function createUseRerender(renderRuntime: SimpRenderRuntime): () => void;
 
-export function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
-export function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
+export interface UseState {
+  <S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
+  <S>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
+}
+declare function createUseState(renderRuntime: SimpRenderRuntime): useState;
 
-declare function useEffect(effect: Effect, deps?: DependencyList): void;
+declare function createUseEffect(renderRuntime: SimpRenderRuntime): (effect: Effect, deps?: DependencyList) => void;
 
-declare function useMounted(effect: Effect): void;
-
-declare function useUnmounted(cleanup: Cleanup): void;
-
-declare function useCatch(cb: (error: any) => void): void;
+declare function createUseCatch(renderRuntime: SimpRenderRuntime): (cb: (error: any) => void) => void;
 
 declare function areDepsEqual(nextDeps: DependencyList | undefined, prevDeps: DependencyList | undefined): boolean;