@lynx-js/web-core-wasm-canary 0.0.0 → 0.0.1-canary-20260116-ce265e8f

package/dist/client/mainthread/Background.js

@@ -0,0 +1,207 @@
+/*
+ * Copyright (C) 2025 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 { Rpc } from '@lynx-js/web-worker-rpc';
+import { dispatchCoreContextOnBackgroundEndpoint, dispatchJSContextOnMainThreadEndpoint, disposeEndpoint, markTimingEndpoint, postTimingFlagsEndpoint, publicComponentEventEndpoint, publishEventEndpoint, sendGlobalEventEndpoint, dispatchI18nResourceEndpoint, updateDataEndpoint, updateGlobalPropsEndpoint, BackgroundThreadStartEndpoint, callLepusMethodEndpoint, switchExposureServiceEndpoint, reportErrorEndpoint, dispatchLynxViewEventEndpoint, updateBTSChunkEndpoint, queryComponentEndpoint, } from '../endpoints.js';
+import { LynxCrossThreadContext } from '../LynxCrossThreadContext.js';
+import { systemInfo } from './LynxViewInstance.js';
+import { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
+import { registerNativePropsHandler } from './crossThreadHandlers/registerSetNativePropsHandler.js';
+import { registerGetPathInfoHandler } from './crossThreadHandlers/registerGetPathInfoHandler.js';
+import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
+import { registerTriggerComponentEventHandler } from './crossThreadHandlers/registerTriggerComponentEventHandler.js';
+import { registerTriggerElementMethodEndpointHandler } from './crossThreadHandlers/registerTriggerElementMethodEndpointHandler.js';
+import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
+import { registerNativeModulesCallHandler } from './crossThreadHandlers/registerNativeModulesCallHandler.js';
+function createWebWorker() {
+    return new Worker(
+    /* webpackFetchPriority: "high" */
+    /* webpackChunkName: "web-core-worker-chunk" */
+    /* webpackPrefetch: true */
+    /* webpackPreload: true */
+    new URL('../background/index.js', import.meta.url), {
+        type: 'module',
+        name: 'lynx-bg',
+    });
+}
+export class BackgroundThread {
+    static contextIdToBackgroundWorker = [];
+    #rpc;
+    #webWorker;
+    #nextMacroTask = null;
+    #caughtTimingInfo = [];
+    #batchSendTimingInfo;
+    jsContext;
+    postTimingFlags;
+    sendGlobalEvent;
+    publicComponentEvent;
+    publishEvent;
+    dispatchI18nResource;
+    updateData;
+    updateGlobalProps;
+    updateBTSChunk;
+    #lynxGroupId;
+    #lynxViewInstance;
+    #btsReady;
+    #btsReadyResolver;
+    #btsStarted = false;
+    constructor(lynxGroupId, lynxViewInstance) {
+        this.#lynxGroupId = lynxGroupId;
+        this.#lynxViewInstance = lynxViewInstance;
+        const btsRpc = new Rpc(undefined, 'main-to-bg');
+        this.#rpc = btsRpc;
+        this.jsContext = new LynxCrossThreadContext({
+            rpc: this.#rpc,
+            receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
+            sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
+        });
+        this.#btsReady = new Promise((resolve) => {
+            this.#btsReadyResolver = resolve;
+        });
+        this.jsContext.__start();
+        this.#batchSendTimingInfo = this.#rpc.createCall(markTimingEndpoint);
+        this.postTimingFlags = this.#rpc.createCall(postTimingFlagsEndpoint);
+        this.sendGlobalEvent = this.#rpc.createCall(sendGlobalEventEndpoint);
+        this.publicComponentEvent = this.#rpc.createCall(publicComponentEventEndpoint);
+        this.publishEvent = this.#rpc.createCall(publishEventEndpoint);
+        this.dispatchI18nResource = this.#rpc.createCall(dispatchI18nResourceEndpoint);
+        this.updateData = this.#rpc.createCall(updateDataEndpoint);
+        this.updateGlobalProps = this.#rpc.createCall(updateGlobalPropsEndpoint);
+        this.updateBTSChunk = this.#rpc.createCall(updateBTSChunkEndpoint);
+    }
+    startWebWorker(initData, globalProps, cardType, customSections, nativeModulesMap, napiModulesMap) {
+        if (this.#webWorker)
+            return;
+        // now start the background worker
+        if (this.#lynxGroupId !== undefined) {
+            const group = BackgroundThread.contextIdToBackgroundWorker[this.#lynxGroupId];
+            if (group) {
+                group.runningCards += 1;
+            }
+            else {
+                BackgroundThread.contextIdToBackgroundWorker[this.#lynxGroupId] = {
+                    worker: createWebWorker(),
+                    runningCards: 1,
+                };
+            }
+            this.#webWorker = BackgroundThread.contextIdToBackgroundWorker[this.#lynxGroupId].worker;
+        }
+        else {
+            this.#webWorker = createWebWorker();
+        }
+        const messageChannel = new MessageChannel();
+        this.#webWorker.postMessage({
+            mainThreadMessagePort: messageChannel.port2,
+            systemInfo,
+            initData,
+            globalProps,
+            cardType,
+            customSections,
+            nativeModulesMap,
+            napiModulesMap,
+            entryTemplateUrl: this.#lynxViewInstance.templateUrl,
+        }, [messageChannel.port2]);
+        this.#rpc.setMessagePort(messageChannel.port1);
+    }
+    startBTS() {
+        if (this.#btsStarted)
+            return;
+        this.#btsStarted = true;
+        // prepare bts rpc handlers
+        this.#rpc.registerHandler(callLepusMethodEndpoint, (methodName, data) => {
+            const method = this.#lynxViewInstance.mainThreadGlobalThis[methodName];
+            if (typeof method === 'function') {
+                method.call(this.#lynxViewInstance.mainThreadGlobalThis, data);
+            }
+            else {
+                console.error(`Method ${methodName} not found on mainThreadGlobalThis`);
+            }
+        });
+        this.#rpc.registerHandler(switchExposureServiceEndpoint, this.#lynxViewInstance.exposureServices.switchExposureService.bind(this.#lynxViewInstance.exposureServices));
+        this.#rpc.registerHandler(reportErrorEndpoint, (e, _, release) => {
+            this.#lynxViewInstance.reportError(e, release, 'app-service.js');
+        });
+        this.#rpc.registerHandler(dispatchLynxViewEventEndpoint, (eventType, detail) => {
+            this.#lynxViewInstance.rootDom.dispatchEvent(new CustomEvent(eventType, {
+                detail,
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+            }));
+        });
+        this.#rpc.registerHandler(queryComponentEndpoint, (url) => {
+            return this.#lynxViewInstance.queryComponent(url).then(() => {
+                this.jsContext.dispatchEvent({
+                    type: '__OnDynamicJSSourcePrepared',
+                    data: url,
+                });
+                return {
+                    code: 0,
+                    detail: {
+                        schema: url,
+                    },
+                };
+            });
+        });
+        registerGetPathInfoHandler(this.#rpc, this.#lynxViewInstance);
+        registerInvokeUIMethodHandler(this.#rpc, this.#lynxViewInstance);
+        registerNapiModulesCallHandler(this.#rpc, this.#lynxViewInstance);
+        registerNativeModulesCallHandler(this.#rpc, this.#lynxViewInstance);
+        registerSelectComponentHandler(this.#rpc, this.#lynxViewInstance);
+        registerNativePropsHandler(this.#rpc, this.#lynxViewInstance);
+        registerTriggerComponentEventHandler(this.#rpc, this.#lynxViewInstance);
+        registerTriggerElementMethodEndpointHandler(this.#rpc, this.#lynxViewInstance);
+        this.#rpc.invoke(BackgroundThreadStartEndpoint, []).then(this.#btsReadyResolver);
+    }
+    markTiming(timingKey, pipelineId, timeStamp) {
+        this.#caughtTimingInfo.push({
+            timingKey,
+            pipelineId,
+            timeStamp: timeStamp ?? (performance.now() + performance.timeOrigin),
+        });
+        if (this.#nextMacroTask === null) {
+            this.#nextMacroTask = setTimeout(() => {
+                this.flushTimingInfo();
+            }, 500);
+        }
+    }
+    /**
+     * Flush the timing info immediately.
+     */
+    flushTimingInfo() {
+        this.#batchSendTimingInfo(this.#caughtTimingInfo);
+        this.#caughtTimingInfo = [];
+        if (this.#nextMacroTask !== null) {
+            clearTimeout(this.#nextMacroTask);
+            this.#nextMacroTask = null;
+        }
+    }
+    async [Symbol.asyncDispose]() {
+        await this.#btsReady;
+        /*
+         * TODO:
+         * Potential deadlock if startBTS() was never called.
+         * If [Symbol.asyncDispose]() is invoked on a BackgroundThread instance where startBTS() was never called,
+         * #btsReady will never resolve, causing the disposal to hang indefinitely.
+         * Consider guarding with the existing #btsStarted flag.
+         */
+        await this.#rpc.invoke(disposeEndpoint, []);
+        if (this.#lynxGroupId !== undefined) {
+            const group = BackgroundThread.contextIdToBackgroundWorker[this.#lynxGroupId];
+            if (group) {
+                group.runningCards -= 1;
+                if (group.runningCards === 0) {
+                    group.worker.terminate();
+                    BackgroundThread.contextIdToBackgroundWorker[this.#lynxGroupId] = undefined;
+                }
+            }
+        }
+        else {
+            this.#webWorker?.terminate();
+        }
+        this.#nextMacroTask && clearTimeout(this.#nextMacroTask);
+    }
+}
+//# sourceMappingURL=Background.js.map

package/dist/client/mainthread/ExposureServices.d.ts

@@ -0,0 +1,11 @@
+import type { LynxViewInstance } from './LynxViewInstance.js';
+export declare class ExposureServices {
+    #private;
+    constructor(lynxViewInstance: LynxViewInstance);
+    /**
+     * diff the current exposure enabled elements with the previous ones, and start/stop IntersectionObserver accordingly
+     * If an element's exposure-id attribute has changed, we also need to send a new disexposure event with the old one
+     */
+    updateExposureStatus(elementsToBeEnabled: HTMLElement[], elementsToBeDisabled: HTMLElement[]): void;
+    switchExposureService(toEnable: boolean, sendEvent: boolean): void;
+}

package/dist/client/mainthread/ExposureServices.js

@@ -0,0 +1,211 @@
+/*
+ * Copyright 2021-2024 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 { scrollContainerDom } from '../../constants.js';
+import { convertLengthToPx } from './utils/convertLengthToPx.js';
+export class ExposureServices {
+    #exposureEnabledElementsToIntersectionObserver = new Map();
+    #exposureEnabledElementsToOldExposureIdAttributeValue = new Map();
+    #globalExposureEventCache = [];
+    #globalDisexposureEventCache = [];
+    #globalExposureEventBatchTimer = null;
+    /**
+     * The elements that are currently exposed
+     * We only send the event when the element enters or leaves the exposed state
+     */
+    #exposedElements = new Set();
+    /**
+     * note that this flag only affects the global exposure events.
+     * The uiappear/uidisappear events are always dispatched when the element enters or leaves the viewport
+     */
+    #isExposureServiceOn = true;
+    #lynxViewInstance;
+    constructor(lynxViewInstance) {
+        this.#lynxViewInstance = lynxViewInstance;
+    }
+    /**
+     * diff the current exposure enabled elements with the previous ones, and start/stop IntersectionObserver accordingly
+     * If an element's exposure-id attribute has changed, we also need to send a new disexposure event with the old one
+     */
+    updateExposureStatus(elementsToBeEnabled, elementsToBeDisabled) {
+        const elementsToBeEnabledSet = new Set(elementsToBeEnabled);
+        // start observing newly enabled elements
+        for (const element of elementsToBeEnabledSet.values()) {
+            if (this.#exposureEnabledElementsToIntersectionObserver.has(element)) {
+                this.#stopIntersectionObserver(element);
+            }
+            this.#startIntersectionObserver(element);
+        }
+        const elementsToBeDisabledSet = new Set(elementsToBeDisabled);
+        // stop observing newly disabled elements
+        for (const element of elementsToBeDisabledSet.values()) {
+            this.#stopIntersectionObserver(element);
+        }
+    }
+    #IntersectionObserverEventHandler = (entries) => {
+        entries.forEach(({ target, isIntersecting }) => {
+            if (isIntersecting && !this.#exposedElements.has(target)) {
+                this.#sendExposureEvent(target, true, null, true);
+                this.#exposedElements.add(target);
+            }
+            else if (!isIntersecting && this.#exposedElements.has(target)) {
+                this.#sendExposureEvent(target, false, null, true);
+                this.#exposedElements.delete(target);
+            }
+        });
+    };
+    #stopIntersectionObserver(element) {
+        const intersectionObserver = this
+            .#exposureEnabledElementsToIntersectionObserver.get(element);
+        if (intersectionObserver) {
+            const oldExposureId = this
+                .#exposureEnabledElementsToOldExposureIdAttributeValue.get(element);
+            intersectionObserver.unobserve(element);
+            intersectionObserver.disconnect();
+            this.#exposureEnabledElementsToIntersectionObserver.delete(element);
+            this.#exposureEnabledElementsToOldExposureIdAttributeValue.delete(element);
+            const currentExposureId = element.getAttribute('exposure-id');
+            if (oldExposureId != null && currentExposureId !== oldExposureId) {
+                this.#sendExposureEvent(element, false, oldExposureId, false);
+            }
+        }
+        this.#exposedElements.delete(element);
+    }
+    #startIntersectionObserver(target) {
+        const threshold = parseFloat(target.getAttribute('exposure-area') ?? '0')
+            / 100;
+        const screenMarginTop = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-top'));
+        const screenMarginRight = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-right'));
+        const screenMarginBottom = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-bottom'));
+        const screenMarginLeft = convertLengthToPx(target, target.getAttribute('exposure-screen-margin-left'));
+        const uiMarginTop = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-top'));
+        const uiMarginRight = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-right'));
+        const uiMarginBottom = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-bottom'));
+        const uiMarginLeft = convertLengthToPx(target, target.getAttribute('exposure-ui-margin-left'));
+        /**
+         * TODO: @haoyang.wang support the switch `enableExposureUIMargin`
+         */
+        const calcedRootMarginTop = (uiMarginBottom ? -1 : 1)
+            * (screenMarginTop - uiMarginBottom);
+        const calcedRootMarginRight = (uiMarginLeft ? -1 : 1)
+            * (screenMarginRight - uiMarginLeft);
+        const calcedRootMarginBottom = (uiMarginTop ? -1 : 1)
+            * (screenMarginBottom - uiMarginTop);
+        const calcedRootMarginLeft = (uiMarginRight ? -1 : 1)
+            * (screenMarginLeft - uiMarginRight);
+        // get the parent scroll container
+        let root = target.parentElement;
+        while (root) {
+            // @ts-expect-error
+            if (root[scrollContainerDom]) {
+                // @ts-expect-error
+                root = root[scrollContainerDom];
+                break;
+            }
+            else {
+                root = root.parentElement;
+            }
+        }
+        const rootContainer = root ?? this.#lynxViewInstance.rootDom.parentElement;
+        const intersectionObserver = new IntersectionObserver(this.#IntersectionObserverEventHandler, {
+            rootMargin: `${calcedRootMarginTop}px ${calcedRootMarginRight}px ${calcedRootMarginBottom}px ${calcedRootMarginLeft}px`,
+            root: rootContainer,
+            threshold,
+        });
+        intersectionObserver.observe(target);
+        this.#exposureEnabledElementsToIntersectionObserver.set(target, intersectionObserver);
+        const currentExposureId = target.getAttribute('exposure-id');
+        if (currentExposureId != null) {
+            this.#exposureEnabledElementsToOldExposureIdAttributeValue.set(target, currentExposureId);
+        }
+    }
+    #sendExposureEvent(target, isIntersecting, exposureId, 
+    /**
+     * Whether to send the uiappear/uidisappear event
+     * If the exposure service is turned from off to on, we may not want to send the appear events for all currently exposed elements
+     */
+    sendAppearEvent) {
+        exposureId = exposureId ?? target.getAttribute('exposure-id');
+        const exposureScene = target.getAttribute('exposure-scene') ?? '';
+        const uniqueId = this.#lynxViewInstance.mainThreadGlobalThis
+            .__GetElementUniqueID(target);
+        const detail = {
+            'unique-id': uniqueId,
+            exposureID: exposureId,
+            exposureScene,
+            'exposure-id': exposureId,
+            'exposure-scene': exposureScene,
+        };
+        if (sendAppearEvent) {
+            const appearEvent = new CustomEvent(isIntersecting ? 'uiappear' : 'uidisappear', {
+                bubbles: false,
+                composed: false,
+                cancelable: true,
+                detail,
+            });
+            target.dispatchEvent(appearEvent);
+        }
+        const serializedTargetInfo = this.#lynxViewInstance.mtsWasmBinding
+            .generateTargetObject(target, this.#lynxViewInstance.mainThreadGlobalThis.__GetDataset(target)
+            ?? {});
+        const globalEvent = {
+            dataset: serializedTargetInfo.dataset,
+            ...detail,
+            type: isIntersecting ? 'exposure' : 'disexposure',
+            target: serializedTargetInfo,
+            currentTarget: serializedTargetInfo,
+            detail: {
+                ...detail,
+                'unique-id': 0,
+            },
+            timestamp: Date.now(),
+        };
+        if (isIntersecting) {
+            this.#globalExposureEventCache.push(globalEvent);
+        }
+        else {
+            this.#globalDisexposureEventCache.push(globalEvent);
+        }
+        if (!this.#globalExposureEventBatchTimer) {
+            this.#globalExposureEventBatchTimer = setTimeout(() => {
+                if (this.#globalExposureEventCache.length > 0
+                    || this.#globalDisexposureEventCache.length > 0) {
+                    const currentExposureEvents = this.#globalExposureEventCache;
+                    const currentDisexposureEvents = this.#globalDisexposureEventCache;
+                    this.#globalExposureEventCache = [];
+                    this.#globalDisexposureEventCache = [];
+                    if (currentExposureEvents.length > 0) {
+                        this.#lynxViewInstance.backgroundThread?.sendGlobalEvent('exposure', [
+                            currentExposureEvents,
+                        ]);
+                    }
+                    if (currentDisexposureEvents.length > 0) {
+                        this.#lynxViewInstance.backgroundThread?.sendGlobalEvent('disexposure', [
+                            currentDisexposureEvents,
+                        ]);
+                    }
+                }
+                this.#globalExposureEventBatchTimer = null;
+            }, 1000 / 20);
+        }
+    }
+    switchExposureService(toEnable, sendEvent) {
+        if (toEnable && !this.#isExposureServiceOn) {
+            // send all onScreen info
+            this.#exposedElements.forEach((element) => {
+                this.#sendExposureEvent(element, true, element.getAttribute('exposure-id'), false);
+            });
+        }
+        else if (!toEnable && this.#isExposureServiceOn) {
+            if (sendEvent) {
+                this.#exposedElements.forEach((element) => {
+                    this.#sendExposureEvent(element, false, element.getAttribute('exposure-id'), false);
+                });
+            }
+        }
+        this.#isExposureServiceOn = toEnable;
+    }
+}
+//# sourceMappingURL=ExposureServices.js.map

package/dist/client/mainthread/I18n.d.ts

@@ -0,0 +1,9 @@
+import type { I18nResourceTranslationOptions, InitI18nResources } from '../../types/index.js';
+import type { BackgroundThread } from './Background.js';
+export declare const getCacheI18nResourcesKey: (options: I18nResourceTranslationOptions) => string;
+export declare class I18nManager {
+    #private;
+    constructor(background: BackgroundThread, rootDom: ShadowRoot, i18nResources?: InitI18nResources);
+    updateData(data: InitI18nResources, options: I18nResourceTranslationOptions): void;
+    _I18nResourceTranslation: (options: I18nResourceTranslationOptions) => unknown | undefined;
+}

package/dist/client/mainthread/I18n.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 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 { i18nResourceMissedEventName } from '../../constants.js';
+export const getCacheI18nResourcesKey = (options) => {
+    return `${options.locale}_${options.channel}_${options.fallback_url}`;
+};
+export class I18nManager {
+    #background;
+    #rootDom;
+    #i18nResources;
+    constructor(background, rootDom, i18nResources = []) {
+        this.#background = background;
+        this.#rootDom = rootDom;
+        this.#i18nResources = i18nResources;
+    }
+    updateData(data, options) {
+        this.#i18nResources = this.#i18nResources.concat(data);
+        const matchedInitI18nResources = data.find(i => getCacheI18nResourcesKey(i.options)
+            === getCacheI18nResourcesKey(options));
+        this.#background.dispatchI18nResource(matchedInitI18nResources?.resource);
+    }
+    _I18nResourceTranslation = (options) => {
+        const matchedInitI18nResources = this.#i18nResources?.find((i) => getCacheI18nResourcesKey(i.options)
+            === getCacheI18nResourcesKey(options));
+        this.#background.dispatchI18nResource(matchedInitI18nResources?.resource);
+        if (matchedInitI18nResources) {
+            return matchedInitI18nResources.resource;
+        }
+        this.#triggerI18nResourceFallback(options);
+        return undefined;
+    };
+    #triggerI18nResourceFallback(options) {
+        const event = new CustomEvent(i18nResourceMissedEventName, {
+            detail: options,
+            bubbles: true,
+            composed: true,
+        });
+        this.#rootDom.dispatchEvent(event);
+    }
+}
+//# sourceMappingURL=I18n.js.map

package/dist/client/mainthread/LynxView.d.ts

@@ -0,0 +1,170 @@
+import type { Cloneable, I18nResourceTranslationOptions, InitI18nResources, NapiModulesCall, NapiModulesMap, NativeModulesCall, NativeModulesMap } from '../../types/index.js';
+export type INapiModulesCall = (name: string, data: any, moduleName: string, lynxView: LynxViewElement, dispatchNapiModules: (data: Cloneable) => void) => Promise<{
+    data: unknown;
+    transfer?: Transferable[];
+} | undefined> | {
+    data: unknown;
+    transfer?: Transferable[];
+} | undefined | Promise<undefined>;
+/**
+ * Based on our experiences, these elements are almost used in all lynx cards.
+ */
+/**
+ * @property {string} url [required] (attribute: "url") The url of the entry of your Lynx card
+ * @property {Cloneable} globalProps [optional] (attribute: "global-props") The globalProps value of this Lynx card
+ * @property {Cloneable} initData [optional] (attribute: "init-data") The initial data of this Lynx card
+ * @property {Record<string,string>} overrideLynxTagToHTMLTagMap [optional] use this property/attribute to override the lynx tag -> html tag map
+ * @property {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
+ * @property {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
+ * @property {"auto" | null} height [optional] (attribute: "height") set it to "auto" for height auto-sizing
+ * @property {"auto" | null} width [optional] (attribute: "width") set it to "auto" for width auto-sizing
+ * @property {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
+ * @property {INapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
+ * @property {string[]} injectStyleRules [optional] the css rules which will be injected into shadowroot. Each items will be inserted by `insertRule` method. @see https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/insertRule
+ * @property {number} lynxGroupId [optional] (attribute: "lynx-group-id") the background shared context id, which is used to share webworker between different lynx cards
+ * @property {(string)=>Promise<LynxTemplate>} customTemplateLoader [optional] the custom template loader, which is used to load the template
+ * @property {InitI18nResources} initI18nResources [optional] (attribute: "init-i18n-resources") the complete set of i18nResources that on the container side, which can be obtained synchronously by _I18nResourceTranslation
+ *
+ * @event error lynx card fired an error
+ * @event i18nResourceMissed i18n resource cache miss
+ *
+ * @example
+ * HTML Example
+ *
+ * Note that you should declarae the size of lynx-view
+ *
+ * ```html
+ * <lynx-view url="https://path/to/main-thread.js" raw-data="{}" global-props="{}" style="height:300px;width:300px">
+ * </lynx-view>
+ * ```
+ *
+ * React 19 Example
+ * ```jsx
+ * <lynx-view url={myLynxCardUrl} rawData={{}} globalProps={{}} style={{height:'300px', width:'300px'}}>
+ * </lynx-view>
+ * ```
+ */
+export declare class LynxViewElement extends HTMLElement {
+    #private;
+    static lynxViewCount: number;
+    static tag: "lynx-view";
+    static observedAttributeAsProperties: string[];
+    /**
+     * @private
+     */
+    static observedAttributes: string[];
+    /**
+     * @public
+     * @property nativeModulesMap
+     * @default {}
+     */
+    nativeModulesMap: NativeModulesMap | undefined;
+    /**
+     * @param
+     * @property napiModulesMap
+     * @default {}
+     */
+    napiModulesMap: NapiModulesMap | undefined;
+    /**
+     * @param
+     * @property
+     */
+    onNapiModulesCall: NapiModulesCall | undefined;
+    constructor();
+    /**
+     * @public
+     * @property the url of lynx view output entry file
+     */
+    get url(): string | undefined;
+    set url(val: string);
+    /**
+     * @public
+     * @property globalProps
+     * @default {}
+     */
+    get globalProps(): Cloneable;
+    set globalProps(val: string | Cloneable);
+    /**
+     * @public
+     * @property initData
+     * @default {}
+     */
+    get initData(): Cloneable;
+    set initData(val: string | Cloneable);
+    /**
+     * @public
+     * @property initI18nResources
+     * @default {}
+     */
+    get initI18nResources(): InitI18nResources;
+    set initI18nResources(val: string | InitI18nResources);
+    /**
+     * @public
+     * @method
+     * update the `__initData` and trigger essential flow
+     */
+    updateI18nResources(data: InitI18nResources, options: I18nResourceTranslationOptions): void;
+    /**
+     * @public
+     * @property
+     * @default {page: 'div'}
+     */
+    get overrideLynxTagToHTMLTagMap(): Record<string, string>;
+    set overrideLynxTagToHTMLTagMap(val: string | Record<string, string>);
+    /**
+     * @param
+     * @property
+     */
+    get onNativeModulesCall(): NativeModulesCall | undefined;
+    set onNativeModulesCall(handler: NativeModulesCall);
+    /**
+     * @param
+     * @property
+     */
+    get lynxGroupId(): number | undefined;
+    set lynxGroupId(val: number | undefined);
+    /**
+     * @public
+     * @method
+     * update the `__initData` and trigger essential flow
+     */
+    updateData(data: Cloneable, processorName?: string, callback?: () => void): void;
+    /**
+     * @public
+     * @method
+     * update the `__globalProps`
+     */
+    updateGlobalProps(data: Cloneable): void;
+    /**
+     * @public
+     * @method
+     * send global events, which can be listened to using the GlobalEventEmitter
+     */
+    sendGlobalEvent(eventName: string, params: Cloneable[]): void;
+    /**
+     * @public
+     * @method
+     * reload the current page
+     */
+    reload(): void;
+    /**
+     * @override
+     * "false" value will be omitted
+     *
+     * {@inheritdoc HTMLElement.setAttribute}
+     */
+    setAttribute(qualifiedName: string, value: string): void;
+    /**
+     * @private
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    injectStyleRules?: string[];
+    /**
+     * @private
+     */
+    disconnectedCallback(): void;
+    /**
+     * @private
+     */
+    connectedCallback(): void;
+}