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

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.10.0
+
+### Minor Changes
+
+- feat: rewrite the main thread Element PAPIs ([#343](https://github.com/lynx-family/lynx-stack/pull/343))
+
+  In this commit we've rewritten the main thread apis.
+
+  The most highlighted change is that
+
+  - Before this commit we send events directly to bts
+  - After this change, we send events to mts then send them to bts with some data combined.
+
+### Patch Changes
+
+- feat(web): use pure DOM API to implement Element PAPIs ([#334](https://github.com/lynx-family/lynx-stack/pull/334))
+
+  1. rewrite all element PAPIs impl. Now we use DOM.
+  2. use our new package `@lynx-js/offscreen-document` to support the new Element PAPI implementation in a worker
+
+- fix: inline style will be removed for value number `0` ([#368](https://github.com/lynx-family/lynx-stack/pull/368))
+
+  the inline style value could be incorrectly removed for number value `0`;
+
+  For example, `flex-shrink:0` may be ignored.
+
+- fix: publicComponentEvent args order ([#401](https://github.com/lynx-family/lynx-stack/pull/401))
+
+- Updated dependencies [[`3a8dabd`](https://github.com/lynx-family/lynx-stack/commit/3a8dabd877084c15db1404c912dd8a19c7a0fc59), [`a521759`](https://github.com/lynx-family/lynx-stack/commit/a5217592f5aebea4b17860e729d523ecabb5f691), [`890c6c5`](https://github.com/lynx-family/lynx-stack/commit/890c6c51470c82104abb1049681f55e5d97cf9d6)]:
+  - @lynx-js/web-constants@0.10.0
+
 ## 0.9.1
 
 ### Patch Changes

package/dist/MainThreadLynx.js

@@ -9,12 +9,19 @@ export function createMainThreadLynx(config, lepusRuntime) {
         },
         __globalProps: config.globalProps,
         requireModule(path) {
-            const mainfestUrl = config.lepusCode[`/${path}`];
-            if (mainfestUrl)
-                path = mainfestUrl;
-            importScripts(path);
-            const entry = globalThis.module.exports;
-            return entry?.(lepusRuntime);
+            // @ts-expect-error
+            if (self.WorkerGlobalScope) {
+                const mainfestUrl = config.lepusCode[`/${path}`];
+                if (mainfestUrl)
+                    path = mainfestUrl;
+                // @ts-expect-error
+                importScripts(path);
+                const entry = globalThis.module.exports;
+                return entry?.(lepusRuntime);
+            }
+            else {
+                throw new Error('importing scripts synchronously is only available for the multi-thread running mode');
+            }
         },
         requireModuleAsync(path, callback) {
             const mainfestUrl = config.lepusCode[`/${path}`];

package/dist/MainThreadRuntime.d.ts

@@ -1,12 +1,15 @@
-import { type ElementOperation, type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type onLifecycleEventEndpoint, type reportErrorEndpoint, type flushElementTreeEndpoint } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type onLifecycleEventEndpoint, type RpcCallType, type postExposureEndpoint } from '@lynx-js/web-constants';
 import { type MainThreadLynx } from './MainThreadLynx.js';
-import type { RpcCallType } from '../../web-worker-rpc/src/TypeUtils.js';
+import type { LynxRuntimeInfo } from './elementAPI/ElementThreadElement.js';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
-    flushElementTree: RpcCallType<typeof flushElementTreeEndpoint>;
+    flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[]) => void;
     _ReportError: RpcCallType<typeof reportErrorEndpoint>;
     __OnLifecycleEvent: RpcCallType<typeof onLifecycleEventEndpoint>;
     markTiming: (pipelineId: string, timingKey: string) => void;
+    publishEvent: RpcCallType<typeof publishEventEndpoint>;
+    publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
+    postExposure: RpcCallType<typeof postExposureEndpoint>;
 }
 export interface MainThreadConfig {
     pageConfig: PageConfig;
@@ -17,26 +20,56 @@ export interface MainThreadConfig {
     lepusCode: LynxTemplate['lepusCode'];
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
+    docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>;
 }
+export declare const elementToRuntimeInfoMap: unique symbol;
+export declare const getElementByUniqueId: unique symbol;
+export declare const updateCSSInJsStyle: unique symbol;
+export declare const lynxUniqueIdToElement: unique symbol;
+export declare const switchExposureService: unique symbol;
 export declare class MainThreadRuntime {
     #private;
-    private config;
-    private isFp;
+    config: MainThreadConfig;
+    /**
+     * @private
+     */
+    [lynxUniqueIdToElement]: WeakRef<HTMLElement>[];
+    /**
+     * @private
+     */
+    [switchExposureService]: (enable: boolean, sendEvent: boolean) => void;
+    /**
+     * @private
+     */
+    private _lynxUniqueIdToStyleSheet;
+    /**
+     * @private
+     */
+    _page?: HTMLElement;
+    /**
+     * @private the CreatePage will append it to this
+     */
+    _rootDom: Pick<Element, 'append' | 'addEventListener'>;
     /**
      * @private
      */
     _timingFlags: string[];
-    operationsRef: {
-        operations: ElementOperation[];
-    };
+    /**
+     * @private
+     */
+    [elementToRuntimeInfoMap]: WeakMap<HTMLElement, LynxRuntimeInfo>;
     constructor(config: MainThreadConfig);
+    /**
+     * @private
+     */
+    [getElementByUniqueId](uniqueId: number): HTMLElement | undefined;
+    [updateCSSInJsStyle](uniqueId: number, newStyles: string): void;
     /**
      * @private
      */
     __lynxGlobalBindingValues: Record<string, any>;
     get globalThis(): this;
     lynx: MainThreadLynx;
-    NativeModules: undefined;
     __globalProps: unknown;
     processData?: ProcessDataCallback;
     renderPage: (data: unknown) => void;

package/dist/MainThreadRuntime.js

@@ -1,52 +1,87 @@
 // 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 {} from '@lynx-js/web-constants';
+import { lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
 import { globalMuteableVars } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './MainThreadLynx.js';
 import { initializeElementCreatingFunction } from './elementAPI/elementCreating/elementCreatingFunctions.js';
-import * as attributeAndPropertyApis from './elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js';
+import { createAttributeAndPropertyFunctions } from './elementAPI/attributeAndProperty/attributeAndPropertyFunctions.js';
 import * as domTreeApis from './elementAPI/domTree/domTreeFunctions.js';
-import * as eventApis from './elementAPI/event/eventFunctions.js';
-import * as styleApis from './elementAPI/style/styleFunctions.js';
+import { createEventFunctions } from './elementAPI/event/eventFunctions.js';
+import { createStyleFunctions } from './elementAPI/style/styleFunctions.js';
 import { flattenStyleInfo, genCssContent, genCssInJsInfo, transformToWebCss, } from './utils/processStyleInfo.js';
-import { createAttributeAndPropertyFunctionsWithContext } from './elementAPI/attributeAndProperty/createAttributeAndPropertyFunctionsWithContext.js';
+import { createExposureService } from './utils/createExposureService.js';
+export const elementToRuntimeInfoMap = Symbol('elementToRuntimeInfoMap');
+export const getElementByUniqueId = Symbol('getElementByUniqueId');
+export const updateCSSInJsStyle = Symbol('updateCSSInJsStyle');
+export const lynxUniqueIdToElement = Symbol('lynxUniqueIdToElement');
+export const switchExposureService = Symbol('switchExposureService');
 export class MainThreadRuntime {
     config;
-    isFp = true;
+    /**
+     * @private
+     */
+    [lynxUniqueIdToElement] = [];
+    /**
+     * @private
+     */
+    [switchExposureService];
+    /**
+     * @private
+     */
+    _lynxUniqueIdToStyleSheet = [];
+    /**
+     * @private
+     */
+    _page;
+    /**
+     * @private the CreatePage will append it to this
+     */
+    _rootDom;
     /**
      * @private
      */
     _timingFlags = [];
-    operationsRef = {
-        operations: [],
-    };
+    /**
+     * @private
+     */
+    [elementToRuntimeInfoMap] = new WeakMap();
     constructor(config) {
         this.config = config;
         this.__globalProps = config.globalProps;
         this.lynx = createMainThreadLynx(config, this);
+        /**
+         * now create the style content
+         * 1. flatten the styleInfo
+         * 2. transform the styleInfo to web css
+         * 3. generate the css in js info
+         * 4. create the style element
+         * 5. append the style element to the root dom
+         */
         flattenStyleInfo(this.config.styleInfo);
         transformToWebCss(this.config.styleInfo);
-        const cssInJs = this.config.pageConfig.enableCSSSelector
+        const cssInJsInfo = this.config.pageConfig.enableCSSSelector
             ? {}
             : genCssInJsInfo(this.config.styleInfo);
-        Object.assign(this, createAttributeAndPropertyFunctionsWithContext(this), attributeAndPropertyApis, domTreeApis, eventApis, styleApis, initializeElementCreatingFunction({
-            operationsRef: this.operationsRef,
-            pageConfig: config.pageConfig,
-            styleInfo: cssInJs,
-            tagMap: config.tagMap,
-        }));
-        this.__LoadLepusChunk = (path) => {
-            try {
-                this.lynx.requireModule(path);
-                return true;
-            }
-            catch {
-            }
-            return false;
-        };
+        this._rootDom = this.config.docu.createElement('div');
+        const cardStyleElement = this.config.docu.createElement('style');
+        cardStyleElement.innerHTML = genCssContent(this.config.styleInfo, this.config.pageConfig);
+        this._rootDom = this.config.docu;
+        this._rootDom.append(cardStyleElement);
+        /**
+         * now create Element PAPIs
+         */
+        Object.assign(this, createAttributeAndPropertyFunctions(this), domTreeApis, createEventFunctions(this), createStyleFunctions(this, cssInJsInfo), initializeElementCreatingFunction(this));
         this._ReportError = this.config.callbacks._ReportError;
         this.__OnLifecycleEvent = this.config.callbacks.__OnLifecycleEvent;
+        /**
+         * Start the exposure service
+         */
+        this[switchExposureService] =
+            createExposureService(this).switchExposureService;
+        /**
+         * to know when the main thread is ready
+         */
         Object.defineProperty(this, 'renderPage', {
             get: () => {
                 return this.#renderPage;
@@ -68,6 +103,22 @@ export class MainThreadRuntime {
             });
         }
     }
+    /**
+     * @private
+     */
+    [getElementByUniqueId](uniqueId) {
+        return this[lynxUniqueIdToElement][uniqueId]?.deref();
+    }
+    [updateCSSInJsStyle](uniqueId, newStyles) {
+        let currentElement = this._lynxUniqueIdToStyleSheet[uniqueId]?.deref();
+        if (!currentElement) {
+            currentElement = this.config.docu.createElement('style');
+            this._lynxUniqueIdToStyleSheet[uniqueId] = new WeakRef(currentElement);
+            this._rootDom.append(currentElement);
+        }
+        currentElement.innerHTML =
+            `[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`;
+    }
     /**
      * @private
      */
@@ -76,22 +127,27 @@ export class MainThreadRuntime {
         return this;
     }
     lynx;
-    NativeModules = undefined;
     __globalProps;
     processData;
     #renderPage;
     _ReportError;
     __OnLifecycleEvent;
-    __LoadLepusChunk;
+    __LoadLepusChunk = (path) => {
+        try {
+            this.lynx.requireModule(path);
+            return true;
+        }
+        catch {
+        }
+        return false;
+    };
     __FlushElementTree = (_subTree, options) => {
-        const operations = this.operationsRef.operations;
         const timingFlags = this._timingFlags;
-        this.operationsRef.operations = [];
         this._timingFlags = [];
-        this.config.callbacks.flushElementTree(operations, options, this.isFp
-            ? genCssContent(this.config.styleInfo, this.config.pageConfig)
-            : undefined, timingFlags);
-        this.isFp = false;
+        if (this._page && !this._page.parentElement) {
+            this._rootDom.append(this._page);
+        }
+        this.config.callbacks.flushElementTree(options, timingFlags);
     };
     updatePage;
     _updateVars;

package/dist/elementAPI/ElementThreadElement.d.ts

@@ -1,71 +1,21 @@
-import { componentIdAttribute, cssIdAttribute } from '@lynx-js/web-constants';
-import type { ElementOperation, LynxCrossThreadEvent, LynxEventType, PageConfig, CssInJsInfo } from '@lynx-js/web-constants';
-export declare enum RefCountType {
-    Element = 0
-}
-export declare class ElementThreadElement {
-    tag: string;
+import type { LynxEventType, Cloneable } from '@lynx-js/web-constants';
+export interface LynxRuntimeInfo {
     uniqueId: number;
-    readonly pageConfig: PageConfig;
-    private operationsRef;
-    styleInfo: CssInJsInfo;
-    static uniqueIdToElement: (WeakRef<ElementThreadElement> | undefined)[];
-    static receiveEvent(event: LynxCrossThreadEvent): void;
-    static getElementByUniqueId(uniqueId: number): ElementThreadElement | undefined;
-    type: RefCountType;
+    parentComponentUniqueId: number;
+    componentConfig: Record<string, Cloneable>;
+    lynxDataset: Record<string, Cloneable>;
     eventHandlerMap: Record<string, {
-        type: LynxEventType;
-        handler: ((ev: LynxCrossThreadEvent) => void) | string;
-    } | undefined>;
-    attributes: {
-        id?: string;
-        [componentIdAttribute]?: string;
-        style: string | null;
-        class: string | null;
-        [cssIdAttribute]: string | null;
-        [key: string]: string | undefined | null;
-    };
-    property: {
-        parent?: ElementThreadElement;
-        componentConfig: Record<string, unknown>;
-        dataset: Record<string, unknown>;
-        [key: string]: unknown;
-    };
-    children: ElementThreadElement[];
-    parent?: ElementThreadElement;
-    constructor(tag: string, uniqueId: number, pageConfig: PageConfig, operationsRef: {
-        operations: ElementOperation[];
-    }, styleInfo: CssInJsInfo);
-    setProperty(key: string, value: any): void;
-    setDatasetProperty(key: string, value: any): void;
-    setAttribute(key: string, value: string | null): void;
-    getAttribute<T extends keyof ElementThreadElement['attributes']>(key: T): ElementThreadElement['attributes'][T];
-    appendChild(children: ElementThreadElement[]): void;
-    removeChild(child: ElementThreadElement): ElementThreadElement;
-    replaceWithElements(newElements: ElementThreadElement[]): void;
-    swapWith(elementB: ElementThreadElement): void;
-    insertBefore(child: ElementThreadElement, ref?: ElementThreadElement | null): ElementThreadElement;
-    updateCssInJsGeneratedStyle(classStyleStr: string): void;
-    setStyleProperty(key: string, value: string | null, important?: boolean): void;
-    setEventHandler(ename: string, handler: ((ev: LynxCrossThreadEvent) => void) | string | undefined, eventType: LynxEventType): void;
-    get firstElementChild(): ElementThreadElement | undefined;
-    get lastElementChild(): ElementThreadElement | undefined;
-    get nextElementSibling(): ElementThreadElement | undefined;
-}
-export type ComponentAtIndexCallback = (list: ListElement, listID: number, cellIndex: number, operationID: number, enableReuseNotification: boolean) => void;
-export type EnqueueComponentCallback = (list: ListElement, listID: number, sign: number) => void;
-type UpdateListInfoAttributeValue = {
-    insertAction: {
-        position: number;
-    }[];
-    removeAction: {
-        position: number;
-    }[];
-};
-export declare class ListElement extends ElementThreadElement {
-    componentAtIndex: ComponentAtIndexCallback;
-    enqueueComponent: EnqueueComponentCallback;
-    setAttribute(key: 'update-list-info', value: UpdateListInfoAttributeValue): void;
-    setAttribute(key: Exclude<string, 'update-list-info'>, value: string | null): void;
+        capture: {
+            type: LynxEventType;
+            handler: string;
+        } | undefined;
+        bind: {
+            type: LynxEventType;
+            handler: string;
+        } | undefined;
+    }>;
+    componentAtIndex?: ComponentAtIndexCallback;
+    enqueueComponent?: EnqueueComponentCallback;
 }
-export {};
+export type ComponentAtIndexCallback = (list: HTMLElement, listID: number, cellIndex: number, operationID: number, enableReuseNotification: boolean) => void;
+export type EnqueueComponentCallback = (list: HTMLElement, listID: number, sign: number) => void;

package/dist/elementAPI/ElementThreadElement.js

@@ -1,270 +1,2 @@
-// 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, cssIdAttribute, OperationType, } from '@lynx-js/web-constants';
-function getParentIdx(element, parent) {
-    parent = parent ?? element.parent;
-    const idx = parent.children.findIndex((e) => e === element);
-    if (idx === -1) {
-        console.error(`[lynx-web]`, element, ` is not a child of`, parent);
-        throw new Error(`[lynx-web] ${element} is not a child of ${parent}`);
-    }
-    return idx;
-}
-export var RefCountType;
-(function (RefCountType) {
-    RefCountType[RefCountType["Element"] = 0] = "Element";
-})(RefCountType || (RefCountType = {}));
-export class ElementThreadElement {
-    tag;
-    uniqueId;
-    pageConfig;
-    operationsRef;
-    styleInfo;
-    static uniqueIdToElement = [];
-    static receiveEvent(event) {
-        const currentTargetUniqueId = event.currentTarget.uniqueId;
-        const target = this.uniqueIdToElement[currentTargetUniqueId]?.deref();
-        if (target) {
-            const handler = target.eventHandlerMap[event.type]?.handler;
-            if (typeof handler === 'function') {
-                queueMicrotask(() => {
-                    handler(event);
-                });
-            }
-        }
-        else {
-            this.uniqueIdToElement[currentTargetUniqueId] = undefined;
-        }
-    }
-    static getElementByUniqueId(uniqueId) {
-        return ElementThreadElement.uniqueIdToElement[uniqueId]?.deref();
-    }
-    type = RefCountType.Element;
-    eventHandlerMap = {};
-    attributes;
-    property = {
-        componentConfig: {},
-        dataset: {},
-    };
-    children = [];
-    parent;
-    // public parentComponentUniqueId!: number;
-    constructor(tag, uniqueId, pageConfig, operationsRef, styleInfo) {
-        this.tag = tag;
-        this.uniqueId = uniqueId;
-        this.pageConfig = pageConfig;
-        this.operationsRef = operationsRef;
-        this.styleInfo = styleInfo;
-        this.attributes = {
-            style: null,
-            class: '',
-            [cssIdAttribute]: null,
-        };
-        ElementThreadElement.uniqueIdToElement[this.uniqueId] = new WeakRef(this);
-        operationsRef.operations.push({
-            type: OperationType.Create,
-            uid: uniqueId,
-            tag: tag,
-        });
-    }
-    setProperty(key, value) {
-        this.property[key] = value;
-        if (key === 'dataset') {
-            this.operationsRef.operations.push({
-                uid: this.uniqueId,
-                type: OperationType.SetProperty,
-                key: key,
-                value: value,
-            });
-        }
-    }
-    setDatasetProperty(key, value) {
-        this.property.dataset[key] = value;
-        this.operationsRef.operations.push({
-            uid: this.uniqueId,
-            type: OperationType.SetDatasetProperty,
-            key,
-            value,
-        });
-    }
-    setAttribute(key, value) {
-        this.attributes[key] = value;
-        this.operationsRef.operations.push({
-            uid: this.uniqueId,
-            type: OperationType.SetAttribute,
-            key,
-            value,
-        });
-    }
-    getAttribute(key) {
-        return this.attributes[key];
-    }
-    appendChild(children) {
-        this.children.push(...children);
-        for (const kid of children) {
-            if (kid.parent) {
-                // note that Node.appendChild() will do `move node` Implicitly.
-                const idx = getParentIdx(kid);
-                kid.parent.children.splice(idx, 1);
-            }
-            kid.parent = this;
-        }
-        this.operationsRef.operations.push({
-            uid: this.uniqueId,
-            type: OperationType.Append,
-            cid: children.map(e => e.uniqueId),
-        });
-    }
-    removeChild(child) {
-        const idx = getParentIdx(child, this);
-        this.children.splice(idx, 1);
-        child.parent = undefined;
-        this.operationsRef.operations.push({
-            type: OperationType.Remove,
-            uid: this.uniqueId,
-            cid: [child.uniqueId],
-        });
-        return child;
-    }
-    replaceWithElements(newElements) {
-        for (const kid of newElements) {
-            if (this.parent === kid) {
-                console.error(`[lynx-web] cannot replace the element`, this, `by its parent`, kid);
-                throw new Error(`[lynx-web] cannot replace `);
-            }
-        }
-        const parent = this.parent;
-        if (parent) {
-            const currentPosition = getParentIdx(this);
-            parent.children.splice(currentPosition, 1);
-            this.parent = undefined;
-            for (const kid of newElements) {
-                if (kid.parent) {
-                    const idx = getParentIdx(kid);
-                    kid.parent.children.splice(idx, 1);
-                }
-                kid.parent = parent;
-            }
-            parent.children.splice(currentPosition, 0, ...newElements);
-            this.operationsRef.operations.push({
-                type: OperationType.Replace,
-                uid: this.uniqueId,
-                nid: newElements.map(e => e.uniqueId),
-            });
-        }
-    }
-    swapWith(elementB) {
-        const parentA = this.parent;
-        const parentB = elementB.parent;
-        const idxA = getParentIdx(this);
-        const idxB = getParentIdx(elementB);
-        parentA.children[idxA] = elementB;
-        elementB.parent = parentA;
-        parentB.children[idxB] = this;
-        this.parent = parentB;
-        this.operationsRef.operations.push({
-            type: OperationType.SwapElement,
-            uid: this.uniqueId,
-            tid: elementB.uniqueId,
-        });
-    }
-    insertBefore(child, ref) {
-        if (ref) {
-            const idx = getParentIdx(ref, this);
-            this.children.splice(idx, 0, child);
-            child.parent = this;
-            this.operationsRef.operations.push({
-                type: OperationType.InsertBefore,
-                uid: this.uniqueId,
-                cid: child.uniqueId,
-                ref: ref.uniqueId,
-            });
-        }
-        else {
-            this.children.push(child);
-            child.parent = this;
-            this.operationsRef.operations.push({
-                type: OperationType.Append,
-                uid: this.uniqueId,
-                cid: [child.uniqueId],
-            });
-        }
-        return child;
-    }
-    updateCssInJsGeneratedStyle(classStyleStr) {
-        this.operationsRef.operations.push({
-            type: OperationType.UpdateCssInJs,
-            uid: this.uniqueId,
-            classStyleStr,
-        });
-    }
-    setStyleProperty(key, value, important) {
-        this.attributes.style = (this.attributes.style ?? '')
-            + `${key}:${value ?? ''}${important ? '!important' : ''};`;
-        this.operationsRef.operations.push({
-            type: OperationType.SetStyleProperty,
-            uid: this.uniqueId,
-            key,
-            value,
-            im: important,
-        });
-    }
-    setEventHandler(ename, handler, eventType) {
-        let hname;
-        if (handler) {
-            this.eventHandlerMap[ename] = { type: eventType, handler };
-            if (typeof handler === 'function') {
-                hname = null;
-            }
-            else {
-                hname = handler;
-            }
-        }
-        else {
-            this.eventHandlerMap[ename] = undefined;
-        }
-        this.operationsRef.operations.push({
-            type: OperationType.RegisterEventHandler,
-            uid: this.uniqueId,
-            eventType,
-            hname,
-            ename,
-        });
-    }
-    get firstElementChild() {
-        return this.children[0];
-    }
-    get lastElementChild() {
-        const childLength = this.children.length;
-        return childLength > 0 ? this.children[childLength - 1] : undefined;
-    }
-    get nextElementSibling() {
-        if (this.parent) {
-            const idx = getParentIdx(this);
-            return this.parent.children[idx + 1];
-        }
-        return;
-    }
-}
-export class ListElement extends ElementThreadElement {
-    componentAtIndex;
-    enqueueComponent;
-    setAttribute(key, value) {
-        if (key === 'update-list-info' && value) {
-            const listInfo = value;
-            const { insertAction, removeAction } = listInfo;
-            queueMicrotask(() => {
-                for (const action of insertAction) {
-                    this.componentAtIndex(this, this.uniqueId, action.position, 0, false);
-                }
-                for (const action of removeAction) {
-                    this.enqueueComponent(this, this.uniqueId, action.position);
-                }
-            });
-            value = value.toString();
-        }
-        super.setAttribute(key, value);
-    }
-}
+export {};
 //# sourceMappingURL=ElementThreadElement.js.map