@lynx-js/web-mainthread-apis 0.9.1 → 0.10.0

package/dist/elementAPI/event/eventFunctions.js

@@ -1,31 +1,135 @@
-export function __AddEvent(element, eventType, eventName, eventHandler) {
-    element.setEventHandler(eventName, eventHandler, eventType);
-}
-export function __GetEvent(element, eventName, eventType) {
-    const lynxEventName = eventName.toLowerCase();
-    const eventHandlerMap = element.eventHandlerMap;
-    const currentHandlerInfo = eventHandlerMap[lynxEventName];
-    if (currentHandlerInfo?.type === eventType) {
-        return currentHandlerInfo.handler;
-    }
-    return;
-}
-export function __GetEvents(element) {
-    const eventHandlerMap = element.eventHandlerMap;
-    return Object.entries(eventHandlerMap).map(([lynxEventName, info]) => {
-        if (info) {
-            return {
-                type: info.type,
-                function: info.handler,
-                name: lynxEventName,
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { componentIdAttribute, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, lynxTagAttribute, W3cEventNameToLynx, } from '@lynx-js/web-constants';
+import { elementToRuntimeInfoMap, getElementByUniqueId, } from '../../MainThreadRuntime.js';
+import { createCrossThreadEvent } from '../../utils/createCrossThreadEvent.js';
+export function createEventFunctions(runtime) {
+    const btsHandler = (event) => {
+        if (!event.currentTarget) {
+            return;
+        }
+        const currentTarget = event.currentTarget;
+        const isCapture = event.eventPhase === Event.CAPTURING_PHASE;
+        const lynxEventName = W3cEventNameToLynx[event.type] ?? event.type;
+        const runtimeInfo = runtime[elementToRuntimeInfoMap].get(currentTarget);
+        const hname = isCapture
+            ? runtimeInfo.eventHandlerMap[lynxEventName]?.capture
+                ?.handler
+            : runtimeInfo.eventHandlerMap[lynxEventName]?.bind
+                ?.handler;
+        if (hname) {
+            const crossThreadEvent = createCrossThreadEvent(runtime, event, lynxEventName);
+            const parentComponentUniqueId = runtimeInfo.parentComponentUniqueId;
+            const parentComponent = runtime[getElementByUniqueId](Number(parentComponentUniqueId));
+            const componentId = parentComponent?.getAttribute(lynxTagAttribute) !== 'page'
+                ? parentComponent?.getAttribute(componentIdAttribute) ?? undefined
+                : undefined;
+            if (componentId) {
+                runtime.config.callbacks.publicComponentEvent(componentId, hname, crossThreadEvent);
+            }
+            else {
+                runtime.config.callbacks.publishEvent(hname, crossThreadEvent);
+            }
+            return true;
+        }
+        return false;
+    };
+    const btsCatchHandler = (event) => {
+        const handlerTriggered = btsHandler(event);
+        if (handlerTriggered)
+            event.stopPropagation();
+    };
+    function __AddEvent(element, eventType, eventName, newEventHandler // | ((ev: LynxCrossThreadEvent) => void) | undefined,
+    ) {
+        eventName = eventName.toLowerCase();
+        const isCatch = eventType === 'catchEvent' || eventType === 'capture-catch';
+        const isCapture = eventType.startsWith('capture');
+        const runtimeInfo = runtime[elementToRuntimeInfoMap].get(element);
+        const currentHandler = isCapture
+            ? runtimeInfo.eventHandlerMap[eventName]?.capture
+            : runtimeInfo.eventHandlerMap[eventName]?.bind;
+        const currentRegisteredHandler = isCatch ? btsCatchHandler : btsHandler;
+        if (currentHandler) {
+            if (!newEventHandler) {
+                /**
+                 * remove handler
+                 */
+                element.removeEventListener(eventName, currentRegisteredHandler, {
+                    capture: isCapture,
+                });
+            }
+        }
+        else {
+            /**
+             * append new handler
+             */
+            if (newEventHandler) {
+                const htmlEventName = LynxEventNameToW3cByTagName[element.tagName]?.[eventName]
+                    ?? LynxEventNameToW3cCommon[eventName] ?? eventName;
+                element.addEventListener(htmlEventName, currentRegisteredHandler, {
+                    capture: isCapture,
+                });
+            }
+        }
+        if (newEventHandler) {
+            const info = {
+                type: eventType,
+                handler: newEventHandler,
             };
+            if (!runtimeInfo.eventHandlerMap[eventName]) {
+                runtimeInfo.eventHandlerMap[eventName] = {
+                    capture: undefined,
+                    bind: undefined,
+                };
+            }
+            if (isCapture) {
+                runtimeInfo.eventHandlerMap[eventName].capture = info;
+            }
+            else {
+                runtimeInfo.eventHandlerMap[eventName].bind = info;
+            }
+        }
+    }
+    function __GetEvent(element, eventName, eventType) {
+        const runtimeInfo = runtime[elementToRuntimeInfoMap].get(element);
+        eventName = eventName.toLowerCase();
+        const isCapture = eventType.startsWith('capture');
+        const handler = isCapture
+            ? runtimeInfo.eventHandlerMap[eventName]?.capture
+            : runtimeInfo.eventHandlerMap[eventName]?.bind;
+        return handler?.handler;
+    }
+    function __GetEvents(element) {
+        const eventHandlerMap = runtime[elementToRuntimeInfoMap].get(element).eventHandlerMap;
+        const eventInfos = [];
+        for (const [lynxEventName, info] of Object.entries(eventHandlerMap)) {
+            for (const atomInfo of [info.bind, info.capture]) {
+                if (atomInfo) {
+                    for (const [type, handler] of Object.values(atomInfo)) {
+                        if (handler) {
+                            eventInfos.push({
+                                type: type,
+                                name: lynxEventName,
+                                function: handler,
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return eventInfos;
+    }
+    function __SetEvents(element, listeners) {
+        for (const { type: eventType, name: lynxEventName, function: eventHandler } of listeners) {
+            __AddEvent(element, eventType, lynxEventName, eventHandler);
         }
-        return;
-    }).filter(e => e);
-}
-export function __SetEvents(element, listeners) {
-    for (const { type: eventType, name: lynxEventName, function: eventHandler } of listeners) {
-        __AddEvent(element, eventType, lynxEventName, eventHandler);
     }
+    return {
+        __AddEvent,
+        __GetEvent,
+        __GetEvents,
+        __SetEvents,
+    };
 }
 //# sourceMappingURL=eventFunctions.js.map

package/dist/elementAPI/style/styleFunctions.d.ts

@@ -1,7 +1,10 @@
-import type { ElementThreadElement } from '../ElementThreadElement.js';
-export declare function __AddClass(element: ElementThreadElement, className: string): void;
-export declare function __SetClasses(element: ElementThreadElement, classNames: string | null): void;
-export declare function __GetClasses(element: ElementThreadElement): string[];
-export declare function __AddInlineStyle(element: ElementThreadElement, key: number | string, value: string | undefined): void;
-export declare function __SetInlineStyles(element: ElementThreadElement, value: string | Record<string, string> | undefined): void;
-export declare function __SetCSSId(elements: (ElementThreadElement)[], cssId: string | number): void;
+import { type CssInJsInfo } from '@lynx-js/web-constants';
+import { type MainThreadRuntime } from '../../MainThreadRuntime.js';
+export declare function createStyleFunctions(runtime: MainThreadRuntime, cssInJsInfo: CssInJsInfo): {
+    __AddClass: (element: HTMLElement, className: string) => void;
+    __SetClasses: (element: HTMLElement, classNames: string | null) => void;
+    __GetClasses: (element: HTMLElement) => string[];
+    __AddInlineStyle: (element: HTMLElement, key: number | string, value: string | number | null | undefined) => void;
+    __SetInlineStyles: (element: HTMLElement, value: string | Record<string, string> | undefined) => void;
+    __SetCSSId: (elements: (HTMLElement)[], cssId: string | number) => void;
+};

package/dist/elementAPI/style/styleFunctions.js

@@ -1,65 +1,79 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
 import { cssIdAttribute } from '@lynx-js/web-constants';
 import hyphenateStyleName from 'hyphenate-style-name';
 import { queryCSSProperty } from './cssPropertyMap.js';
 import { decodeCssInJs } from '../../utils/decodeCssInJs.js';
 import { transformInlineStyleString, transfromParsedStyles, } from './transformInlineStyle.js';
-function updateInlineStyleForCssInJs(element, newClassNames) {
-    const classStyleStr = decodeCssInJs(newClassNames, element.styleInfo, element.attributes[cssIdAttribute]);
-    element.updateCssInJsGeneratedStyle(classStyleStr);
-}
-export function __AddClass(element, className) {
-    const newClassName = ((element.attributes.class ?? '') + ' ' + className)
-        .trim();
-    element.setAttribute('class', newClassName);
-    if (!element.pageConfig.enableCSSSelector) {
-        updateInlineStyleForCssInJs(element, newClassName);
+import { elementToRuntimeInfoMap, updateCSSInJsStyle, } from '../../MainThreadRuntime.js';
+export function createStyleFunctions(runtime, cssInJsInfo) {
+    function __AddClass(element, className) {
+        const newClassName = ((element.className ?? '') + ' ' + className)
+            .trim();
+        element.setAttribute('class', newClassName);
+        if (!runtime.config.pageConfig.enableCSSSelector) {
+            const newStyleStr = decodeCssInJs(newClassName, cssInJsInfo, element.getAttribute(cssIdAttribute));
+            runtime[updateCSSInJsStyle](runtime[elementToRuntimeInfoMap].get(element).uniqueId, newStyleStr);
+        }
     }
-}
-export function __SetClasses(element, classNames) {
-    element.setAttribute('class', classNames);
-    if (!element.pageConfig.enableCSSSelector) {
-        updateInlineStyleForCssInJs(element, classNames ?? '');
+    function __SetClasses(element, classNames) {
+        classNames
+            ? element.setAttribute('class', classNames)
+            : element.removeAttribute('class');
+        if (!runtime.config.pageConfig.enableCSSSelector) {
+            const newStyleStr = decodeCssInJs(classNames ?? '', cssInJsInfo, element.getAttribute(cssIdAttribute));
+            runtime[updateCSSInJsStyle](runtime[elementToRuntimeInfoMap].get(element).uniqueId, newStyleStr ?? '');
+        }
     }
-}
-export function __GetClasses(element) {
-    return (element.attributes.class ?? '').split(' ').filter(e => e);
-}
-export function __AddInlineStyle(element, key, value) {
-    const lynxStyleInfo = queryCSSProperty(Number(key));
-    if (!value) {
-        element.setStyleProperty(lynxStyleInfo.dashName, null);
-        return;
+    function __GetClasses(element) {
+        return (element.className ?? '').split(' ').filter(e => e);
     }
-    const { transformedStyle } = transfromParsedStyles([[
-            lynxStyleInfo.dashName,
-            value,
-        ]]);
-    for (const [property, value] of transformedStyle) {
-        element.setStyleProperty(property, value);
+    function __AddInlineStyle(element, key, value) {
+        const lynxStyleInfo = queryCSSProperty(Number(key));
+        const valueStr = typeof value === 'number' ? value.toString() : value;
+        if (!valueStr) { // null or undefined
+            element.style.removeProperty(lynxStyleInfo.dashName);
+        }
+        else {
+            const { transformedStyle } = transfromParsedStyles([[
+                    lynxStyleInfo.dashName,
+                    valueStr,
+                ]]);
+            for (const [property, value] of transformedStyle) {
+                element.style.setProperty(property, value);
+            }
+        }
     }
-}
-export function __SetInlineStyles(element, value) {
-    if (!value)
-        return;
-    const { transformedStyle } = typeof value === 'string'
-        ? transformInlineStyleString(value)
-        : transfromParsedStyles(Object.entries(value).map(([k, value]) => [
-            hyphenateStyleName(k),
-            value,
-        ]));
-    const transformedStyleStr = transformedStyle.map(([property, value]) => `${property}:${value};`).join('');
-    element.setAttribute('style', transformedStyleStr);
-}
-export function __SetCSSId(elements, cssId) {
-    cssId = cssId.toString();
-    for (const element of elements) {
-        if (element.getAttribute(cssIdAttribute) === cssId)
-            continue; // skip operation
-        element.setAttribute(cssIdAttribute, cssId);
-        if (!element.pageConfig.enableCSSSelector) {
-            const cls = element.getAttribute('class');
-            cls && __SetClasses(element, cls);
+    function __SetInlineStyles(element, value) {
+        if (!value)
+            return;
+        const { transformedStyle } = typeof value === 'string'
+            ? transformInlineStyleString(value)
+            : transfromParsedStyles(Object.entries(value).map(([k, value]) => [
+                hyphenateStyleName(k),
+                value,
+            ]));
+        const transformedStyleStr = transformedStyle.map(([property, value]) => `${property}:${value};`).join('');
+        element.setAttribute('style', transformedStyleStr);
+    }
+    function __SetCSSId(elements, cssId) {
+        cssId = cssId.toString();
+        for (const element of elements) {
+            element.setAttribute(cssIdAttribute, cssId);
+            if (!runtime.config.pageConfig.enableCSSSelector) {
+                const cls = element.getAttribute('class');
+                cls && __SetClasses(element, cls);
+            }
         }
     }
+    return {
+        __AddClass,
+        __SetClasses,
+        __GetClasses,
+        __AddInlineStyle,
+        __SetInlineStyles,
+        __SetCSSId,
+    };
 }
 //# sourceMappingURL=styleFunctions.js.map

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from './MainThreadRuntime.js';
-export { ElementThreadElement } from './elementAPI/ElementThreadElement.js';

package/dist/index.js

@@ -2,5 +2,4 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 export * from './MainThreadRuntime.js';
-export { ElementThreadElement } from './elementAPI/ElementThreadElement.js';
 //# sourceMappingURL=index.js.map

package/dist/utils/createCrossThreadEvent.d.ts

@@ -0,0 +1,3 @@
+import type { LynxCrossThreadEvent } from '@lynx-js/web-constants';
+import { type MainThreadRuntime } from '../MainThreadRuntime.js';
+export declare function createCrossThreadEvent(runtime: MainThreadRuntime, domEvent: Event, eventName: string): LynxCrossThreadEvent;

package/dist/utils/createCrossThreadEvent.js

@@ -0,0 +1,44 @@
+import { elementToRuntimeInfoMap, } from '../MainThreadRuntime.js';
+export function createCrossThreadEvent(runtime, domEvent, eventName) {
+    const targetElement = domEvent.target;
+    const currentTargetElement = domEvent
+        .currentTarget;
+    const type = domEvent.type;
+    const params = {};
+    if (type.match(/^transition/)) {
+        Object.assign(params, {
+            'animation_type': 'keyframe-animation',
+            'animation_name': domEvent.propertyName,
+            new_animator: true, // we support the new_animator only
+        });
+    }
+    else if (type.match(/animation/)) {
+        Object.assign(params, {
+            'animation_type': 'keyframe-animation',
+            'animation_name': domEvent.animationName,
+            new_animator: true, // we support the new_animator only
+        });
+    }
+    const targetElementRuntimeInfo = runtime[elementToRuntimeInfoMap].get(targetElement);
+    const currentTargetElementRuntimeInfo = runtime[elementToRuntimeInfoMap].get(currentTargetElement);
+    return {
+        type: eventName,
+        timestamp: domEvent.timeStamp,
+        target: {
+            id: targetElement.id,
+            dataset: targetElementRuntimeInfo.lynxDataset,
+            uniqueId: targetElementRuntimeInfo.uniqueId,
+        },
+        currentTarget: currentTargetElementRuntimeInfo
+            ? {
+                id: currentTargetElement.id,
+                dataset: currentTargetElementRuntimeInfo.lynxDataset,
+                uniqueId: currentTargetElementRuntimeInfo.uniqueId,
+            }
+            : null,
+        // @ts-expect-error
+        detail: domEvent.detail ?? {},
+        params,
+    };
+}
+//# sourceMappingURL=createCrossThreadEvent.js.map

package/dist/utils/createExposureService.d.ts

@@ -0,0 +1,4 @@
+import type { MainThreadRuntime } from '../MainThreadRuntime.js';
+export declare function createExposureService(runtime: MainThreadRuntime): {
+    switchExposureService: (enable: boolean, sendEvent: boolean) => void;
+};

package/dist/utils/createExposureService.js

@@ -0,0 +1,63 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
+import { createCrossThreadEvent } from './createCrossThreadEvent.js';
+export function createExposureService(runtime) {
+    const postExposure = runtime.config.callbacks.postExposure;
+    let working = true;
+    let exposureCache = [];
+    let disexposureCache = [];
+    const onScreen = new Map();
+    function exposureEventHandler(ev) {
+        const exposureEvent = createCrossThreadEvent(runtime, ev, ev.type);
+        exposureEvent.detail['unique-id'] = parseFloat(ev.target.getAttribute(lynxUniqueIdAttribute));
+        const exposureID = exposureEvent.detail.exposureID;
+        if (ev.type === 'exposure') {
+            exposureCache.push(exposureEvent);
+            onScreen.set(exposureID, exposureEvent);
+        }
+        else {
+            disexposureCache.push(exposureEvent);
+            onScreen.delete(exposureID);
+        }
+    }
+    setInterval(() => {
+        if (exposureCache.length > 0 || disexposureCache.length > 0) {
+            const currentExposure = exposureCache;
+            const currentDisexposure = disexposureCache;
+            exposureCache = [];
+            disexposureCache = [];
+            postExposure({
+                exposures: currentExposure,
+                disExposures: currentDisexposure,
+            });
+        }
+    }, 1000 / 20);
+    runtime._rootDom.addEventListener('exposure', exposureEventHandler, {
+        passive: true,
+    });
+    runtime._rootDom.addEventListener('disexposure', exposureEventHandler, {
+        passive: true,
+    });
+    function switchExposureService(enable, sendEvent) {
+        if (enable && !working) {
+            // send all onScreen info
+            postExposure({
+                exposures: [...onScreen.values()],
+                disExposures: [],
+            });
+        }
+        else if (!enable && working) {
+            if (sendEvent) {
+                postExposure({
+                    exposures: [],
+                    disExposures: [...onScreen.values()],
+                });
+            }
+        }
+        working = enable;
+    }
+    return { switchExposureService };
+}
+//# sourceMappingURL=createExposureService.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   "dependencies": {
     "css-tree": "^3.1.0",
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.9.1",
+    "@lynx-js/web-constants": "0.10.0",
     "@lynx-js/web-style-transformer": "0.2.3"
   }
 }

package/dist/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.d.ts

@@ -1,5 +0,0 @@
-import type { MainThreadRuntime } from '../../MainThreadRuntime.js';
-import type { ElementThreadElement } from '../ElementThreadElement.js';
-export declare function createAttributeAndPropertyFunctionsWithContext(runtime: MainThreadRuntime): {
-    __SetAttribute: (element: ElementThreadElement, key: string, value: string | null | undefined) => void;
-};

package/dist/elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js

@@ -1,13 +0,0 @@
-import { __lynx_timing_flag } from '@lynx-js/web-constants';
-export function createAttributeAndPropertyFunctionsWithContext(runtime) {
-    function __SetAttribute(element, key, value) {
-        element.setAttribute(key, value ?? null);
-        if (key === __lynx_timing_flag && value) {
-            runtime._timingFlags.push(value);
-        }
-    }
-    return {
-        __SetAttribute,
-    };
-}
-//# sourceMappingURL=createAttributeAndPropertyFunctionsWithContext.js.map

package/dist/elementAPI/createOffscreenDocument.d.ts

@@ -1,13 +0,0 @@
-import type { CssInJsInfo, ElementOperation, PageConfig } from '@lynx-js/web-constants';
-import { ElementThreadElement } from './ElementThreadElement.js';
-interface OffscreenDocument {
-    createElement(tagName: string): ElementThreadElement;
-}
-export declare function createOffscreenDocument(options: {
-    pageConfig: PageConfig;
-    styleInfo: CssInJsInfo;
-    operationsRef: {
-        operations: ElementOperation[];
-    };
-}): OffscreenDocument;
-export {};

package/dist/elementAPI/createOffscreenDocument.js

@@ -1,18 +0,0 @@
-import { ListElement, ElementThreadElement } from './ElementThreadElement.js';
-export function createOffscreenDocument(options) {
-    const { pageConfig, styleInfo, operationsRef } = options;
-    let incrementalUniqueId = 0;
-    function createElement(tagName) {
-        const uniqueId = incrementalUniqueId++;
-        if (tagName === 'x-list') {
-            return new ListElement(tagName, uniqueId, pageConfig, operationsRef, styleInfo);
-        }
-        else {
-            return new ElementThreadElement(tagName, uniqueId, pageConfig, operationsRef, styleInfo);
-        }
-    }
-    return {
-        createElement,
-    };
-}
-//# sourceMappingURL=createOffscreenDocument.js.map