@simpreact/simpreact 0.0.0-alpha.1f6ee65 → 0.0.1

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;
         }
@@ -45,115 +59,25 @@ export const domAdapter = {
     findParentReference(reference) {
         return reference.parentElement;
     },
+    findNextSiblingReference(reference) {
+        return reference.nextSibling;
+    },
     clearNode(reference) {
         reference.textContent = '';
     },
-};
-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);
-            }
+    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;
+}