@simpreact/simpreact 0.0.0-alpha.dd6f145 → 0.0.1

package/core/ref.js

@@ -0,0 +1,27 @@
+export function unmountRef(element) {
+    if (element.ref == null) {
+        return;
+    }
+    if (typeof element.ref.cleanup === 'function') {
+        element.ref.cleanup();
+    }
+    if (typeof element.ref.value !== 'function') {
+        element.ref.value.current = null;
+    }
+}
+export function applyRef(element) {
+    if (element.ref == null) {
+        return;
+    }
+    if (typeof element.ref.cleanup === 'function') {
+        element.ref.cleanup();
+    }
+    if (typeof element.ref.value === 'function') {
+        let cleanup;
+        if ((cleanup = element.ref.value(element.reference))) {
+            element.ref.cleanup = cleanup;
+        }
+        return;
+    }
+    element.ref.value.current = element.reference;
+}

package/core/rerender.d.ts

@@ -1,2 +1,13 @@
 import type { SimpElement } from './createElement';
 export declare function rerender(element: SimpElement): void;
+interface IRendererLocker {
+    _isLocked: boolean;
+    _elements: Set<SimpElement>;
+    isLocked: boolean;
+    lock(): void;
+    track(element: SimpElement): void;
+    flush(): void;
+}
+export declare const syncRerenderLocker: IRendererLocker;
+export declare const asyncRerenderLocker: IRendererLocker;
+export {};

package/core/rerender.js

@@ -1,5 +1,63 @@
-import { findHostReferenceFromElement, updateFunctionalComponent } from './patching';
-import { GLOBAL } from './global';
+import { findParentReferenceFromElement, updateFunctionalComponent } from './patching';
 export function rerender(element) {
-    updateFunctionalComponent(element, GLOBAL.hostAdapter.findParentReference(findHostReferenceFromElement(element, true)), null);
+    if (element.flag !== 'FC') {
+        throw new TypeError('Re-rendering is only supported for FC elements.');
+    }
+    if (element.unmounted) {
+        console.warn('The component unmounted.');
+    }
+    if (syncRerenderLocker.isLocked) {
+        syncRerenderLocker.track(element);
+        return;
+    }
+    else if (asyncRerenderLocker.isLocked) {
+        asyncRerenderLocker.track(element);
+    }
+    else {
+        asyncRerenderLocker.lock();
+        updateFunctionalComponent(element, findParentReferenceFromElement(element), null, element.contextMap || null, element.store.hostNamespace);
+        asyncRerenderLocker.flush();
+    }
 }
+export const syncRerenderLocker = {
+    _isLocked: false,
+    _elements: new Set(),
+    get isLocked() {
+        return this._isLocked;
+    },
+    lock() {
+        this._isLocked = true;
+    },
+    track(element) {
+        this._elements.add(element);
+    },
+    flush() {
+        this._isLocked = false;
+        for (const element of this._elements) {
+            this._elements.delete(element);
+            rerender(element.store.latestElement);
+        }
+    },
+};
+export const asyncRerenderLocker = {
+    _isLocked: false,
+    _elements: new Set(),
+    get isLocked() {
+        return this._isLocked;
+    },
+    lock() {
+        this._isLocked = true;
+    },
+    track(element) {
+        this._elements.add(element);
+    },
+    flush() {
+        this._isLocked = false;
+        queueMicrotask(() => {
+            for (const element of this._elements) {
+                this._elements.delete(element);
+                rerender(element.store.latestElement);
+            }
+        });
+    },
+};

package/core/unmounting.d.ts

@@ -1,8 +1,6 @@
+import type { Many, Maybe } from '../shared';
 import type { SimpElement } from './createElement';
-import type { Maybe } from '../shared';
 import type { HostReference } from './hostAdapter';
-export declare function unmount(element: SimpElement): void;
-export declare function unmountAllChildren(children: SimpElement[]): void;
-export declare function clearElementHostReference<HostRef = HostReference>(element: Maybe<SimpElement>, parentHostReference: HostRef): void;
-export declare function removeAllChildren<HostRef = HostReference>(hostReference: HostRef, element: SimpElement, children: SimpElement[]): void;
-export declare function remove<HostRef = HostReference>(element: SimpElement, parentReference: HostRef): void;
+export declare function unmount(element: Many<SimpElement>): void;
+export declare function clearElementHostReference(element: Maybe<SimpElement>, parentHostReference: HostReference): void;
+export declare function remove(element: SimpElement, parentReference: HostReference): void;

package/core/unmounting.js

@@ -1,69 +1,63 @@
-import { isArray } from '../shared';
-import { GLOBAL } from './global';
+import { hostAdapter } from './hostAdapter';
+import { unmountRef } from './ref';
+import { lifecycleEventBus } from './lifecycleEventBus';
 export function unmount(element) {
-    if (element.flag === 'HOST') {
-        if (isArray(element.children)) {
-            for (const child of element.children) {
-                unmount(child);
-            }
+    if (Array.isArray(element)) {
+        for (const child of element) {
+            unmount(child);
         }
-        else if (element.children != null) {
+        return;
+    }
+    if (element.flag === 'FC') {
+        // FC element always has Maybe<SimpElement> due to normalization.
+        if (element.children) {
             unmount(element.children);
         }
+        element.unmounted = true;
+        lifecycleEventBus.publish({ type: 'unmounted', element });
+        return;
     }
-    else if (element.flag === 'FC') {
-        unmount(element.children);
-        GLOBAL.eventBus.publish({ type: 'unmounted', element });
+    if (element.flag === 'TEXT') {
+        return;
     }
-    else if (element.flag === 'FRAGMENT') {
-        if (isArray(element.children)) {
-            for (const child of element.children) {
-                unmount(child);
-            }
-        }
-        else if (element.children != null) {
-            unmount(element.children);
-        }
+    if (element.flag === 'PORTAL') {
+        remove(element.children, element.ref);
+        return;
     }
-}
-export function unmountAllChildren(children) {
-    for (const child of children) {
-        unmount(child);
+    // Only FRAGMENT, PROVIDER, CONSUMER, and HOST elements remain,
+    // with Maybe<Many<SimpElement>> children due to normalization.
+    if (element.children) {
+        unmount(element.children);
+    }
+    if (element.flag === 'HOST') {
+        unmountRef(element);
+        hostAdapter.unmountProps(element.reference, element);
     }
 }
 export function clearElementHostReference(element, parentHostReference) {
     while (element != null) {
-        if (element.flag === 'HOST' || element.flag === 'TEXT') {
-            GLOBAL.hostAdapter.removeChild(parentHostReference, element.reference);
+        if (element.flag === 'HOST' || element.flag === 'TEXT' || element.flag === 'PORTAL') {
+            hostAdapter.removeChild(parentHostReference, element.reference);
             return;
         }
         const children = element.children;
-        if (element.flag === 'FC') {
+        if (element.flag === 'FC' || element.flag === 'CONSUMER') {
             element = children;
             continue;
         }
-        if (element.flag === 'FRAGMENT') {
-            if (isArray(children)) {
+        if (element.flag === 'FRAGMENT' || element.flag === 'PROVIDER') {
+            if (Array.isArray(children)) {
                 for (let i = 0, len = children.length; i < len; ++i) {
                     clearElementHostReference(children[i], parentHostReference);
                 }
                 return;
             }
-            else if (children != null) {
+            else if (children) {
                 element = children;
             }
         }
     }
 }
-export function removeAllChildren(hostReference, element, children) {
-    unmountAllChildren(children);
-    if (element.flag === 'FRAGMENT') {
-        clearElementHostReference(element, hostReference);
-    }
-    else {
-        GLOBAL.hostAdapter.setTextContent(hostReference, '');
-    }
-}
 export function remove(element, parentReference) {
     unmount(element);
     clearElementHostReference(element, parentReference);

package/dom/attach-element-to-dom.d.ts

@@ -0,0 +1,4 @@
+import type { Nullable } from '../shared';
+import type { SimpElement } from '../core/internal.js';
+export declare function attachElementToDom(element: SimpElement, dom: Node): void;
+export declare function getElementFromDom(target: Nullable<EventTarget>): Nullable<SimpElement>;

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

@@ -0,0 +1,9 @@
+const elementPropertyName = '__SIMP_ELEMENT__';
+export function attachElementToDom(element, dom) {
+    if (dom.nodeType !== Node.TEXT_NODE) {
+        Object.defineProperty(dom, elementPropertyName, { value: element, writable: true });
+    }
+}
+export function getElementFromDom(target) {
+    return target?.[elementPropertyName] ?? null;
+}

package/dom/domAdapter.d.ts

@@ -1,2 +1,3 @@
-import type { HostAdapter } from '../core/internal';
-export declare const domAdapter: HostAdapter<HTMLElement, Text>;
+import type { HostAdapter } from '../core/internal.js';
+import type { Namespace } from './namespace';
+export declare const domAdapter: HostAdapter<HTMLElement | SVGElement, Text, Namespace>;

package/dom/domAdapter.js

@@ -1,20 +1,34 @@
+import { attachElementToDom } from './attach-element-to-dom';
+import { mountProps, patchProps, unmountProps } from './props';
+import { defaultNamespace } from './namespace';
 export const domAdapter = {
-    createReference(type) {
-        return document.createElement(type);
+    createReference(type, namespace) {
+        if (namespace) {
+            return document.createElementNS(namespace, type);
+        }
+        else {
+            return document.createElement(type);
+        }
     },
     createTextReference(text) {
         return document.createTextNode(text);
     },
-    mountProps(reference, props) {
-        mountProps(props, reference);
+    mountProps(dom, element, namespace) {
+        mountProps(dom, element, namespace || defaultNamespace);
     },
-    patchProp(reference, propName, prevValue, nextValue) {
-        patchProp(propName, prevValue, nextValue, reference);
+    patchProps(dom, prevElement, nextElement, namespace) {
+        patchProps(dom, prevElement, nextElement, namespace || defaultNamespace);
     },
-    setClassname(reference, className) {
+    unmountProps(dom, element) {
+        unmountProps(dom, element);
+    },
+    setClassname(reference, className, namespace) {
         if (!className) {
             reference.removeAttribute('class');
         }
+        else if (namespace === 'http://www.w3.org/2000/svg') {
+            reference.setAttribute('class', className);
+        }
         else {
             reference.className = className;
         }
@@ -39,118 +53,31 @@ export const domAdapter = {
     removeChild(parent, child) {
         parent.removeChild(child);
     },
-    replaceChild(parent, replacer, child) {
-        parent.replaceChild(child, replacer);
+    replaceChild(parent, replacer, toBeReplaced) {
+        parent.replaceChild(replacer, toBeReplaced);
     },
     findParentReference(reference) {
         return reference.parentElement;
     },
-};
-function mountProps(props, reference) {
-    for (const propsKey in props) {
-        patchProp(propsKey, null, props[propsKey], reference);
-    }
-}
-function patchProp(propName, prevValue, nextValue, dom) {
-    switch (propName) {
-        case 'children':
-        case 'childrenType':
-        case 'className':
-        case 'defaultValue':
-        case 'key':
-        case 'multiple':
-        case 'ref':
-        case 'selectedIndex':
-            break;
-        case 'autoFocus':
-            dom.autofocus = !!nextValue;
-            break;
-        case 'allowfullscreen':
-        case 'autoplay':
-        case 'capture':
-        case 'checked':
-        case 'controls':
-        case 'default':
-        case 'disabled':
-        case 'hidden':
-        case 'indeterminate':
-        case 'loop':
-        case 'muted':
-        case 'novalidate':
-        case 'open':
-        case 'readOnly':
-        case 'required':
-        case 'reversed':
-        case 'scoped':
-        case 'seamless':
-        case 'selected':
-            dom[propName] = !!nextValue;
-            break;
-        case 'defaultChecked':
-        case 'value':
-        case 'volume':
-            patchDomProp(nextValue, dom, propName);
-            break;
-        case 'style':
-            patchStyle(prevValue, nextValue, dom);
-            break;
-        default:
-            if (propName.charCodeAt(0) === 111 && propName.charCodeAt(1) === 110) {
-                patchEvent(propName, prevValue, nextValue, dom);
-            }
-            else if (nextValue == null) {
-                dom.removeAttribute(propName);
-            }
-            else {
-                dom.setAttribute(propName, nextValue);
-            }
-            break;
-    }
-}
-function patchDomProp(nextValue, dom, propKey) {
-    const value = nextValue == null ? '' : nextValue;
-    if (dom[propKey] !== value) {
-        dom[propKey] = value;
-    }
-}
-function patchStyle(lastAttrValue, nextAttrValue, dom) {
-    if (nextAttrValue == null) {
-        dom.removeAttribute('style');
-        return;
-    }
-    const domStyle = dom.style;
-    let style;
-    let value;
-    if (typeof nextAttrValue === 'string') {
-        domStyle.cssText = nextAttrValue;
-        return;
-    }
-    if (lastAttrValue != null && typeof lastAttrValue !== 'string') {
-        for (style in nextAttrValue) {
-            value = nextAttrValue[style];
-            if (value !== lastAttrValue[style]) {
-                domStyle.setProperty(style, value);
-            }
+    findNextSiblingReference(reference) {
+        return reference.nextSibling;
+    },
+    clearNode(reference) {
+        reference.textContent = '';
+    },
+    attachElementToReference(element, reference) {
+        attachElementToDom(element, reference);
+    },
+    getHostNamespaces(element, currentNamespace) {
+        if (element.type === 'svg') {
+            return { self: 'http://www.w3.org/2000/svg', children: 'http://www.w3.org/2000/svg' };
         }
-        for (style in lastAttrValue) {
-            if (nextAttrValue[style] == null) {
-                domStyle.removeProperty(style);
-            }
+        if (element.type === 'foreignObject') {
+            return { self: 'http://www.w3.org/2000/svg', children: null };
         }
-    }
-    else {
-        for (style in nextAttrValue) {
-            value = nextAttrValue[style];
-            domStyle.setProperty(style, value);
+        if (currentNamespace && currentNamespace !== 'http://www.w3.org/1999/xhtml') {
+            return { self: currentNamespace, children: currentNamespace };
         }
-    }
-}
-function patchEvent(name, lastValue, nextValue, dom) {
-    name = name.toLowerCase().substring(2);
-    if (typeof lastValue === 'function') {
-        dom.removeEventListener(name, lastValue);
-    }
-    if (typeof nextValue === 'function') {
-        dom.addEventListener(name, nextValue);
-    }
-}
+        return null;
+    },
+};

package/dom/events.d.ts

@@ -0,0 +1,19 @@
+import type { Nullable } from '../shared';
+type DelegatedEventType = 'click' | 'dblclick' | 'mousedown' | 'mouseup' | 'mousemove' | 'pointerdown' | 'pointerup' | 'pointermove' | 'touchstart' | 'touchmove' | 'touchend' | 'keydown' | 'keyup' | 'focusin' | 'focusout';
+export declare class SyntheticEvent {
+    nativeEvent: Event;
+    currentTarget: Nullable<EventTarget>;
+    isPropagationStopped: boolean;
+    isDefaultPrevented: boolean;
+    constructor(event: Event);
+    get target(): EventTarget | null;
+    get type(): string;
+    stopPropagation(): void;
+    preventDefault(): void;
+}
+export declare function dispatchDelegatedEvent(event: Event): void;
+export declare function patchEvent(name: string, prevValue: any, nextValue: any, dom: Element): void;
+export declare function patchDelegatedEvent(eventType: DelegatedEventType, handler: any, eventHandlerCounts: Record<DelegatedEventType, number>): void;
+export declare function patchNormalEvent(eventType: string, prevValue: any, nextValue: any, dom: Element, capture: boolean): void;
+export declare function isPropNameEventName(name: string): boolean;
+export {};

package/dom/events.js

@@ -0,0 +1,129 @@
+import { syncRerenderLocker } from '../core/internal.js';
+import { getElementFromDom } from './attach-element-to-dom';
+const eventNameByTypes = {
+    click: 'onClick',
+    dblclick: 'onDblClick',
+    mousedown: 'onMouseDown',
+    mouseup: 'onMouseUp',
+    mousemove: 'onMouseMove',
+    pointerdown: 'onPointerDown',
+    pointerup: 'onPointerUp',
+    pointermove: 'onPointerMove',
+    touchstart: 'onTouchStart',
+    touchmove: 'onTouchMove',
+    touchend: 'onTouchEnd',
+    keydown: 'onKeyDown',
+    keyup: 'onKeyUp',
+    focusin: 'onFocusIn',
+    focusout: 'onFocusOut',
+};
+const delegatedEventTypes = new Set(Object.keys(eventNameByTypes));
+const eventHandlerCounts = {
+    click: 0,
+    dblclick: 0,
+    mousedown: 0,
+    mouseup: 0,
+    mousemove: 0,
+    pointerdown: 0,
+    pointerup: 0,
+    pointermove: 0,
+    touchstart: 0,
+    touchmove: 0,
+    touchend: 0,
+    keydown: 0,
+    keyup: 0,
+    focusin: 0,
+    focusout: 0,
+};
+export class SyntheticEvent {
+    nativeEvent;
+    currentTarget = null;
+    isPropagationStopped = false;
+    isDefaultPrevented = false;
+    constructor(event) {
+        this.nativeEvent = event;
+    }
+    get target() {
+        return this.nativeEvent.target;
+    }
+    get type() {
+        return this.nativeEvent.type;
+    }
+    stopPropagation() {
+        this.isPropagationStopped = true;
+        this.nativeEvent.stopPropagation();
+    }
+    preventDefault() {
+        this.isDefaultPrevented = true;
+        this.nativeEvent.preventDefault();
+    }
+}
+export function dispatchDelegatedEvent(event) {
+    syncRerenderLocker.lock();
+    const syntheticEvent = new SyntheticEvent(event);
+    const captureHandlers = [];
+    const bubbleHandlers = [];
+    let element = getElementFromDom(event.target);
+    while (element) {
+        if (element.flag === 'HOST') {
+            const captureHandler = element.props?.[eventNameByTypes[event.type] + 'Capture'];
+            const bubbleHandler = element.props?.[eventNameByTypes[event.type]];
+            if (captureHandler) {
+                captureHandlers.push({ element, handler: captureHandler });
+            }
+            if (bubbleHandler) {
+                bubbleHandlers.push({ element, handler: bubbleHandler });
+            }
+        }
+        element = element.parent;
+    }
+    for (const { handler, element } of captureHandlers.reverse()) {
+        syntheticEvent.currentTarget = element.reference;
+        handler(syntheticEvent);
+        if (syntheticEvent.isPropagationStopped) {
+            return;
+        }
+    }
+    for (const { element, handler } of bubbleHandlers) {
+        syntheticEvent.currentTarget = element.reference;
+        handler(syntheticEvent);
+        if (syntheticEvent.isPropagationStopped) {
+            return;
+        }
+    }
+    syncRerenderLocker.flush();
+}
+const captureRegex = /Capture/;
+export function patchEvent(name, prevValue, nextValue, dom) {
+    const isCapture = captureRegex.test(name);
+    name = name.replace(captureRegex, '').substring(2).toLowerCase();
+    if (delegatedEventTypes.has(name)) {
+        patchDelegatedEvent(name, nextValue, eventHandlerCounts);
+    }
+    else {
+        patchNormalEvent(name, prevValue, nextValue, dom, isCapture);
+    }
+}
+export function patchDelegatedEvent(eventType, handler, eventHandlerCounts) {
+    if (typeof handler === 'function') {
+        if (++eventHandlerCounts[eventType] === 1) {
+            document.addEventListener(eventType, dispatchDelegatedEvent);
+        }
+    }
+    else {
+        if (eventHandlerCounts[eventType] !== 0 && --eventHandlerCounts[eventType] === 0) {
+            document.removeEventListener(eventType, dispatchDelegatedEvent);
+        }
+    }
+}
+export function patchNormalEvent(eventType, prevValue, nextValue, dom, capture) {
+    if (typeof prevValue === 'function') {
+        dom.removeEventListener(eventType, prevValue, { capture });
+    }
+    if (typeof nextValue === 'function') {
+        dom.addEventListener(eventType, nextValue, { capture });
+    }
+}
+export function isPropNameEventName(name) {
+    return name.charCodeAt(0) === 111 && name.charCodeAt(1) === 110;
+}