@lynx-js/web-mainthread-apis 0.13.3 → 0.13.5

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.13.5
+
+### Patch Changes
+
+- refactor: move some internal status to dom's attribute ([#945](https://github.com/lynx-family/lynx-stack/pull/945))
+
+  It's essential for SSR
+
+- refactor: avoid to create many style element for cssog ([#1026](https://github.com/lynx-family/lynx-stack/pull/1026))
+
+- fix: target.id is undefined ([#1016](https://github.com/lynx-family/lynx-stack/pull/1016))
+
+- feat: add new pageConfig configuration: enableJSDataProcessor ([#886](https://github.com/lynx-family/lynx-stack/pull/886))
+
+- refactor: move component config info to attribute ([#984](https://github.com/lynx-family/lynx-stack/pull/984))
+
+- refactor: save dataset on an attribute ([#981](https://github.com/lynx-family/lynx-stack/pull/981))
+
+  On lynx, the `data-*` attributes have different behaviors than the HTMLElement has.
+
+  The dataset will be treated as properties, the key will not be applied the camel-case <-> hyphenate name transformation.
+
+  Before this commit we use it as a runtime data, but after this commit we will use encodeURI(JSON.stringify(dataset)) to encode it as a string.
+
+- refactor: create elements of `elementToRuntimeInfoMap` on demand ([#986](https://github.com/lynx-family/lynx-stack/pull/986))
+
+- refactor: implement mts apis in closure pattern ([#1004](https://github.com/lynx-family/lynx-stack/pull/1004))
+
+- Updated dependencies [[`70b82d2`](https://github.com/lynx-family/lynx-stack/commit/70b82d23744d6b6ec945dff9f8895ab3488ba4c8), [`9499ea9`](https://github.com/lynx-family/lynx-stack/commit/9499ea91debdf73b2d31af0b31bcbc216135543b), [`50f0193`](https://github.com/lynx-family/lynx-stack/commit/50f01933942268b697bf5abe790da86c932f1dfc), [`57bf0ef`](https://github.com/lynx-family/lynx-stack/commit/57bf0ef19f1d79bc52ab6a4f0cd2939e7901d98b), [`0525fbf`](https://github.com/lynx-family/lynx-stack/commit/0525fbf38baa7a977a7a8c66e8a4d8bf34cc3b68), [`b6b87fd`](https://github.com/lynx-family/lynx-stack/commit/b6b87fd11dbc76c28f3b5022aa8c6afeb773d90f), [`c014327`](https://github.com/lynx-family/lynx-stack/commit/c014327ad0cf599b32d4182d95116b46c35f5fa5)]:
+  - @lynx-js/web-constants@0.13.5
+
+## 0.13.4
+
+### Patch Changes
+
+- fix: style loss issue caused by incorrect handling of styleInfo-imports when enableCSSSelector and enableRemoveCSSScope are turned off. ([#931](https://github.com/lynx-family/lynx-stack/pull/931))
+
+- Updated dependencies [[`569618d`](https://github.com/lynx-family/lynx-stack/commit/569618d8e2665f5c9e1672f7ee5900ec2a5179a2), [`f9f88d6`](https://github.com/lynx-family/lynx-stack/commit/f9f88d6fb9c42d3370a6622d9d799d671ffcf1a7)]:
+  - @lynx-js/web-constants@0.13.4
+
 ## 0.13.3
 
 ### Patch Changes

package/dist/createMainThreadGlobalThis.d.ts

@@ -0,0 +1,24 @@
+import { type LynxTemplate, type PageConfig, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type LynxJSModule, type MainThreadGlobalThis, type WebFiberElementImpl } from '@lynx-js/web-constants';
+export interface MainThreadRuntimeCallbacks {
+    mainChunkReady: () => void;
+    flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[]) => void;
+    _ReportError: RpcCallType<typeof reportErrorEndpoint>;
+    __OnLifecycleEvent: (lifeCycleEvent: Cloneable) => void;
+    markTiming: (pipelineId: string, timingKey: string) => void;
+    publishEvent: RpcCallType<typeof publishEventEndpoint>;
+    publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
+    createElement: (tag: string) => WebFiberElementImpl;
+}
+export interface MainThreadRuntimeConfig {
+    pageConfig: PageConfig;
+    globalProps: unknown;
+    callbacks: MainThreadRuntimeCallbacks;
+    styleInfo: StyleInfo;
+    customSections: LynxTemplate['customSections'];
+    lepusCode: Record<string, LynxJSModule>;
+    browserConfig: BrowserConfig;
+    tagMap: Record<string, string>;
+    rootDom: Pick<Element, 'append' | 'addEventListener'>;
+    jsContext: LynxContextEventTarget;
+}
+export declare function createMainThreadGlobalThis(config: MainThreadRuntimeConfig): MainThreadGlobalThis;

package/dist/createMainThreadGlobalThis.js

@@ -0,0 +1,450 @@
+// 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, systemInfo, parentComponentUniqueIdAttribute, componentIdAttribute, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, lynxTagAttribute, W3cEventNameToLynx, cssIdAttribute, lynxDefaultDisplayLinearAttribute, __lynx_timing_flag, } from '@lynx-js/web-constants';
+import { globalMuteableVars } from '@lynx-js/web-constants';
+import { createMainThreadLynx } from './createMainThreadLynx.js';
+import { flattenStyleInfo, genCssContent, genCssInJsInfo, transformToWebCss, } from './utils/processStyleInfo.js';
+import { __AddClass, __AddConfig, __AddDataset, __AddInlineStyle, __AppendElement, __ElementIsEqual, __FirstElement, __GetAttributes, __GetChildren, __GetClasses, __GetComponentID, __GetDataByKey, __GetDataset, __GetElementConfig, __GetElementUniqueID, __GetID, __GetParent, __GetTag, __InsertElementBefore, __LastElement, __NextElement, __RemoveElement, __ReplaceElement, __ReplaceElements, __SetClasses, __SetConfig, __SetCSSId, __SetDataset, __SetID, __SetInlineStyles, __UpdateComponentID, } from './pureElementPAPIs.js';
+import { createCrossThreadEvent } from './utils/createCrossThreadEvent.js';
+import { decodeCssInJs } from './utils/decodeCssInJs.js';
+export function createMainThreadGlobalThis(config) {
+    let pageElement;
+    let uniqueIdInc = 1;
+    let timingFlags = [];
+    let renderPage;
+    const { callbacks, tagMap, pageConfig, lepusCode, rootDom, globalProps, styleInfo, } = config;
+    const lynxUniqueIdToElement = [];
+    const elementToRuntimeInfoMap = new WeakMap();
+    const lynxUniqueIdToStyleRulesIndex = [];
+    /**
+     * for "update" the globalThis.val in the main thread
+     */
+    const varsUpdateHandlers = [];
+    const lynxGlobalBindingValues = {};
+    /**
+     * 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(styleInfo, pageConfig.enableCSSSelector);
+    transformToWebCss(styleInfo);
+    const cssInJsInfo = pageConfig.enableCSSSelector
+        ? {}
+        : genCssInJsInfo(styleInfo);
+    const cardStyleElement = callbacks.createElement('style');
+    cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
+    // @ts-expect-error
+    rootDom.append(cardStyleElement);
+    const cardStyleElementSheet = cardStyleElement.sheet;
+    const updateCSSInJsStyle = (uniqueId, newStyles) => {
+        if (lynxUniqueIdToStyleRulesIndex[uniqueId] !== undefined) {
+            const rule = cardStyleElementSheet
+                .cssRules[lynxUniqueIdToStyleRulesIndex[uniqueId]];
+            rule.style.cssText = newStyles;
+        }
+        else {
+            const index = cardStyleElementSheet.insertRule(`[${lynxUniqueIdAttribute}="${uniqueId}"]{${newStyles}}`, cardStyleElementSheet.cssRules.length);
+            lynxUniqueIdToStyleRulesIndex[uniqueId] = index;
+        }
+    };
+    const commonHandler = (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 = elementToRuntimeInfoMap.get(currentTarget);
+        if (runtimeInfo) {
+            const hname = isCapture
+                ? runtimeInfo.eventHandlerMap[lynxEventName]?.capture
+                    ?.handler
+                : runtimeInfo.eventHandlerMap[lynxEventName]?.bind
+                    ?.handler;
+            const crossThreadEvent = createCrossThreadEvent(event, lynxEventName);
+            if (typeof hname === 'string') {
+                const parentComponentUniqueId = Number(currentTarget.getAttribute(parentComponentUniqueIdAttribute));
+                const parentComponent = lynxUniqueIdToElement[parentComponentUniqueId]
+                    .deref();
+                const componentId = parentComponent?.getAttribute(lynxTagAttribute) !== 'page'
+                    ? parentComponent?.getAttribute(componentIdAttribute) ?? undefined
+                    : undefined;
+                if (componentId) {
+                    callbacks.publicComponentEvent(componentId, hname, crossThreadEvent);
+                }
+                else {
+                    callbacks.publishEvent(hname, crossThreadEvent);
+                }
+                return true;
+            }
+            else if (hname) {
+                crossThreadEvent.target.elementRefptr =
+                    event.target;
+                if (crossThreadEvent.currentTarget) {
+                    crossThreadEvent.currentTarget
+                        .elementRefptr = event.currentTarget;
+                }
+                mtsGlobalThis.runWorklet?.(hname.value, [crossThreadEvent]);
+            }
+        }
+        return false;
+    };
+    const commonCatchHandler = (event) => {
+        const handlerTriggered = commonHandler(event);
+        if (handlerTriggered)
+            event.stopPropagation();
+    };
+    const __AddEvent = (element, eventType, eventName, newEventHandler) => {
+        eventName = eventName.toLowerCase();
+        const isCatch = eventType === 'catchEvent' || eventType === 'capture-catch';
+        const isCapture = eventType.startsWith('capture');
+        const runtimeInfo = elementToRuntimeInfoMap.get(element) ?? {
+            eventHandlerMap: {},
+            componentAtIndex: undefined,
+            enqueueComponent: undefined,
+        };
+        const currentHandler = isCapture
+            ? runtimeInfo.eventHandlerMap[eventName]?.capture
+            : runtimeInfo.eventHandlerMap[eventName]?.bind;
+        const currentRegisteredHandler = isCatch
+            ? commonCatchHandler
+            : commonHandler;
+        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;
+            }
+        }
+        elementToRuntimeInfoMap.set(element, runtimeInfo);
+    };
+    const __GetEvent = (element, eventName, eventType) => {
+        const runtimeInfo = elementToRuntimeInfoMap.get(element);
+        if (runtimeInfo) {
+            eventName = eventName.toLowerCase();
+            const isCapture = eventType.startsWith('capture');
+            const handler = isCapture
+                ? runtimeInfo.eventHandlerMap[eventName]?.capture
+                : runtimeInfo.eventHandlerMap[eventName]?.bind;
+            return handler?.handler;
+        }
+        else {
+            return undefined;
+        }
+    };
+    const __GetEvents = (element) => {
+        const eventHandlerMap = elementToRuntimeInfoMap.get(element)?.eventHandlerMap ?? {};
+        const eventInfos = [];
+        for (const [lynxEventName, info] of Object.entries(eventHandlerMap)) {
+            for (const atomInfo of [info.bind, info.capture]) {
+                if (atomInfo) {
+                    const { type, handler } = atomInfo;
+                    if (handler) {
+                        eventInfos.push({
+                            type: type,
+                            name: lynxEventName,
+                            function: handler,
+                        });
+                    }
+                }
+            }
+        }
+        return eventInfos;
+    };
+    const __SetEvents = (element, listeners) => {
+        for (const { type: eventType, name: lynxEventName, function: eventHandler } of listeners) {
+            __AddEvent(element, eventType, lynxEventName, eventHandler);
+        }
+    };
+    const __CreateElement = (tag, parentComponentUniqueId) => {
+        const uniqueId = uniqueIdInc++;
+        const htmlTag = tagMap[tag] ?? tag;
+        const element = callbacks.createElement(htmlTag);
+        lynxUniqueIdToElement[uniqueId] = new WeakRef(element);
+        const parentComponentCssID = lynxUniqueIdToElement[parentComponentUniqueId]
+            ?.deref()?.getAttribute(cssIdAttribute);
+        parentComponentCssID && parentComponentCssID !== '0'
+            && element.setAttribute(cssIdAttribute, parentComponentCssID);
+        element.setAttribute(lynxTagAttribute, tag);
+        element.setAttribute(lynxUniqueIdAttribute, uniqueId + '');
+        element.setAttribute(parentComponentUniqueIdAttribute, parentComponentUniqueId + '');
+        return element;
+    };
+    const __CreateView = (parentComponentUniqueId) => __CreateElement('view', parentComponentUniqueId);
+    const __CreateText = (parentComponentUniqueId) => __CreateElement('text', parentComponentUniqueId);
+    const __CreateRawText = (text) => {
+        const element = __CreateElement('raw-text', -1);
+        element.setAttribute('text', text);
+        return element;
+    };
+    const __CreateImage = (parentComponentUniqueId) => __CreateElement('image', parentComponentUniqueId);
+    const __CreateScrollView = (parentComponentUniqueId) => __CreateElement('scroll-view', parentComponentUniqueId);
+    const __CreateWrapperElement = (parentComponentUniqueId) => __CreateElement('lynx-wrapper', parentComponentUniqueId);
+    const __CreatePage = (componentID, cssID) => {
+        const page = __CreateElement('page', 0);
+        page.setAttribute('part', 'page');
+        page.setAttribute(cssIdAttribute, cssID + '');
+        page.setAttribute(parentComponentUniqueIdAttribute, '0');
+        page.setAttribute(componentIdAttribute, componentID);
+        if (pageConfig.defaultDisplayLinear === false) {
+            page.setAttribute(lynxDefaultDisplayLinearAttribute, 'false');
+        }
+        if (pageConfig.defaultOverflowVisible === true) {
+            page.setAttribute('lynx-default-overflow-visible', 'true');
+        }
+        pageElement = page;
+        return page;
+    };
+    const __CreateList = (parentComponentUniqueId, componentAtIndex, enqueueComponent) => {
+        const list = __CreateElement('list', parentComponentUniqueId);
+        const runtimeInfo = {
+            eventHandlerMap: {},
+            componentAtIndex: componentAtIndex,
+            enqueueComponent: enqueueComponent,
+        };
+        elementToRuntimeInfoMap.set(list, runtimeInfo);
+        return list;
+    };
+    const __CreateComponent = (componentParentUniqueID, componentID, cssID, _, name) => {
+        const component = __CreateElement('view', componentParentUniqueID);
+        component.setAttribute(cssIdAttribute, cssID + '');
+        component.setAttribute(componentIdAttribute, componentID);
+        component.setAttribute('name', name);
+        return component;
+    };
+    const __SetAttribute = (element, key, value) => {
+        const tag = element.getAttribute(lynxTagAttribute);
+        if (tag === 'list' && key === 'update-list-info') {
+            const listInfo = value;
+            const { insertAction, removeAction } = listInfo;
+            queueMicrotask(() => {
+                const runtimeInfo = elementToRuntimeInfoMap.get(element);
+                if (runtimeInfo) {
+                    const componentAtIndex = runtimeInfo.componentAtIndex;
+                    const enqueueComponent = runtimeInfo.enqueueComponent;
+                    const uniqueId = __GetElementUniqueID(element);
+                    for (const action of insertAction) {
+                        componentAtIndex?.(element, uniqueId, action.position, 0, false);
+                    }
+                    for (const action of removeAction) {
+                        enqueueComponent?.(element, uniqueId, action.position);
+                    }
+                }
+            });
+        }
+        else {
+            value == null
+                ? element.removeAttribute(key)
+                : element.setAttribute(key, value + '');
+            if (key === __lynx_timing_flag && value) {
+                timingFlags.push(value);
+            }
+        }
+    };
+    const __UpdateListCallbacks = (element, componentAtIndex, enqueueComponent) => {
+        const runtimeInfo = elementToRuntimeInfoMap.get(element) ?? {
+            eventHandlerMap: {},
+            componentAtIndex: componentAtIndex,
+            enqueueComponent: enqueueComponent,
+            uniqueId: __GetElementUniqueID(element),
+        };
+        runtimeInfo.componentAtIndex = componentAtIndex;
+        runtimeInfo.enqueueComponent = enqueueComponent;
+        elementToRuntimeInfoMap.set(element, runtimeInfo);
+    };
+    const __SwapElement = (childA, childB) => {
+        const temp = callbacks.createElement('div');
+        childA.replaceWith(temp);
+        childB.replaceWith(childA);
+        temp.replaceWith(childB);
+    };
+    const __SetCSSIdForCSSOG = (elements, cssId) => {
+        for (const element of elements) {
+            element.setAttribute(cssIdAttribute, cssId + '');
+            const cls = element.getAttribute('class');
+            cls && __SetClassesForCSSOG(element, cls);
+        }
+    };
+    const __AddClassForCSSOG = (element, className) => {
+        const newClassName = ((element.getAttribute('class') ?? '') + ' ' + className)
+            .trim();
+        element.setAttribute('class', newClassName);
+        const newStyleStr = decodeCssInJs(newClassName, cssInJsInfo, element.getAttribute(cssIdAttribute));
+        updateCSSInJsStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr);
+    };
+    const __SetClassesForCSSOG = (element, classNames) => {
+        __SetClasses(element, classNames);
+        const newStyleStr = decodeCssInJs(classNames ?? '', cssInJsInfo, element.getAttribute(cssIdAttribute));
+        updateCSSInJsStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr ?? '');
+    };
+    const __LoadLepusChunk = (path) => {
+        const lepusModule = lepusCode[`${path}`];
+        if (lepusModule) {
+            const entry = lepusModule.exports;
+            entry?.(mtsGlobalThis);
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    const __FlushElementTree = (_subTree, options) => {
+        const timingFlagsCopied = timingFlags;
+        timingFlags = [];
+        if (pageElement && !pageElement.parentNode) {
+            // @ts-expect-error
+            rootDom.append(pageElement);
+        }
+        callbacks.flushElementTree(options, timingFlagsCopied);
+    };
+    const __GetTemplateParts = () => {
+        return undefined;
+    };
+    const __GetPageElement = () => {
+        return pageElement;
+    };
+    const isCSSOG = !pageConfig.enableCSSSelector;
+    const mtsGlobalThis = {
+        __AddEvent,
+        __GetEvent,
+        __GetEvents,
+        __SetEvents,
+        __AppendElement,
+        __ElementIsEqual,
+        __FirstElement,
+        __GetChildren,
+        __GetParent,
+        __InsertElementBefore,
+        __LastElement,
+        __NextElement,
+        __RemoveElement,
+        __ReplaceElement,
+        __ReplaceElements,
+        __AddConfig,
+        __AddDataset,
+        __GetAttributes,
+        __GetComponentID,
+        __GetDataByKey,
+        __GetDataset,
+        __GetElementConfig,
+        __GetElementUniqueID,
+        __GetID,
+        __GetTag,
+        __SetConfig,
+        __SetDataset,
+        __SetID,
+        __UpdateComponentID,
+        __CreateElement,
+        __CreateView,
+        __CreateText,
+        __CreateComponent,
+        __CreatePage,
+        __CreateRawText,
+        __CreateImage,
+        __CreateScrollView,
+        __CreateWrapperElement,
+        __CreateList,
+        __SetAttribute,
+        __SwapElement,
+        __UpdateListCallbacks,
+        __GetConfig: __GetElementConfig,
+        __GetClasses,
+        __AddClass: isCSSOG ? __AddClassForCSSOG : __AddClass,
+        __SetClasses: isCSSOG ? __SetClassesForCSSOG : __SetClasses,
+        __AddInlineStyle,
+        __SetCSSId: isCSSOG ? __SetCSSIdForCSSOG : __SetCSSId,
+        __SetInlineStyles,
+        __LoadLepusChunk,
+        __GetPageElement,
+        __GetTemplateParts,
+        __globalProps: globalProps,
+        SystemInfo: {
+            ...systemInfo,
+            ...config.browserConfig,
+        },
+        lynx: createMainThreadLynx(config),
+        _ReportError: callbacks._ReportError,
+        __OnLifecycleEvent: callbacks.__OnLifecycleEvent,
+        __FlushElementTree,
+        __lynxGlobalBindingValues: lynxGlobalBindingValues,
+        set _updateVars(handler) {
+            varsUpdateHandlers.push(handler);
+        },
+        set renderPage(foo) {
+            renderPage = foo;
+            queueMicrotask(callbacks.mainChunkReady);
+        },
+        get renderPage() {
+            return renderPage;
+        },
+    };
+    mtsGlobalThis.globalThis = new Proxy(mtsGlobalThis, {
+        get: (target, prop) => {
+            if (prop === 'globalThis') {
+                return target;
+            }
+            // @ts-expect-error
+            return target[prop] ?? globalThis[prop];
+        },
+        set: (target, prop, value) => {
+            // @ts-expect-error
+            target[prop] = value;
+            return true;
+        },
+        ownKeys(target) {
+            return Reflect.ownKeys(target).filter((key) => key !== 'globalThis');
+        },
+    });
+    for (const nm of globalMuteableVars) {
+        Object.defineProperty(mtsGlobalThis, nm, {
+            get: () => {
+                return lynxGlobalBindingValues[nm];
+            },
+            set: (v) => {
+                lynxGlobalBindingValues[nm] = v;
+                for (const handler of varsUpdateHandlers) {
+                    handler();
+                }
+            },
+        });
+    }
+    return mtsGlobalThis;
+}
+//# sourceMappingURL=createMainThreadGlobalThis.js.map

package/dist/createMainThreadLynx.d.ts

@@ -0,0 +1,3 @@
+import type { MainThreadLynx } from '@lynx-js/web-constants';
+import { type MainThreadRuntimeConfig } from './createMainThreadGlobalThis.js';
+export declare function createMainThreadLynx(config: MainThreadRuntimeConfig): MainThreadLynx;

package/dist/{MainThreadLynx.js → createMainThreadLynx.js}

@@ -1,7 +1,4 @@
-// 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 './MainThreadRuntime.js';
+import {} from './createMainThreadGlobalThis.js';
 export function createMainThreadLynx(config) {
     return {
         getJSContext() {
@@ -20,4 +17,4 @@ export function createMainThreadLynx(config) {
         markPipelineTiming: config.callbacks.markTiming,
     };
 }
-//# sourceMappingURL=MainThreadLynx.js.map
+//# sourceMappingURL=createMainThreadLynx.js.map

package/dist/crossThreadHandlers/registerCallLepusMethodHandler.d.ts

@@ -1,3 +1,2 @@
-import { type Rpc } from '@lynx-js/web-constants';
-import type { MainThreadRuntime } from '../MainThreadRuntime.js';
-export declare function registerCallLepusMethodHandler(rpc: Rpc, runtime: MainThreadRuntime): void;
+import { type MainThreadGlobalThis, type Rpc } from '@lynx-js/web-constants';
+export declare function registerCallLepusMethodHandler(rpc: Rpc, runtime: MainThreadGlobalThis): void;

package/dist/crossThreadHandlers/registerCallLepusMethodHandler.js

@@ -1,7 +1,7 @@
 // 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 { callLepusMethodEndpoint } from '@lynx-js/web-constants';
+import { callLepusMethodEndpoint, } from '@lynx-js/web-constants';
 export function registerCallLepusMethodHandler(rpc, runtime) {
     rpc.registerHandler(callLepusMethodEndpoint, (methodName, data) => {
         (runtime[methodName])(data);

package/dist/index.d.ts

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

package/dist/index.js

@@ -2,5 +2,5 @@
 // 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 { prepareMainThreadAPIs } from './prepareMainThreadAPIs.js';
-export * from './MainThreadRuntime.js';
+export * from './createMainThreadGlobalThis.js';
 //# sourceMappingURL=index.js.map

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,5 +1,4 @@
-import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint } from '@lynx-js/web-constants';
-import { MainThreadRuntime } from './MainThreadRuntime.js';
+import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type MainThreadGlobalThis } from '@lynx-js/web-constants';
 export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, createElement: Document['createElement'], commitDocument: () => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, reportError: RpcCallType<typeof reportErrorEndpoint>): {
-    startMainThread: (config: StartMainThreadContextConfig) => Promise<MainThreadRuntime>;
+    startMainThread: (config: StartMainThreadContextConfig) => Promise<MainThreadGlobalThis>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -1,10 +1,11 @@
 // 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 { BackgroundThreadStartEndpoint, publishEventEndpoint, publicComponentEventEndpoint, postExposureEndpoint, switchExposureServiceEndpoint, postTimingFlagsEndpoint, dispatchCoreContextOnBackgroundEndpoint, dispatchJSContextOnMainThreadEndpoint, LynxCrossThreadContext, } from '@lynx-js/web-constants';
+import { BackgroundThreadStartEndpoint, publishEventEndpoint, publicComponentEventEndpoint, postExposureEndpoint, postTimingFlagsEndpoint, dispatchCoreContextOnBackgroundEndpoint, dispatchJSContextOnMainThreadEndpoint, LynxCrossThreadContext, switchExposureServiceEndpoint, } from '@lynx-js/web-constants';
 import { registerCallLepusMethodHandler } from './crossThreadHandlers/registerCallLepusMethodHandler.js';
 import { registerGetCustomSectionHandler } from './crossThreadHandlers/registerGetCustomSectionHandler.js';
-import { MainThreadRuntime, switchExposureService, } from './MainThreadRuntime.js';
+import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
+import { createExposureService } from './utils/createExposureService.js';
 const moduleCache = {};
 export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, reportError) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
@@ -39,7 +40,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
             receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
-        const runtime = new MainThreadRuntime({
+        const mtsGlobalThis = createMainThreadGlobalThis({
             jsContext,
             tagMap,
             browserConfig,
@@ -48,18 +49,20 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
             pageConfig,
             styleInfo,
             lepusCode: lepusCodeLoaded,
-            createElement,
             rootDom,
             callbacks: {
                 mainChunkReady: () => {
                     markTimingInternal('data_processor_start');
-                    const initData = runtime.processData
-                        ? runtime.processData(config.initData)
-                        : config.initData;
+                    let initData = config.initData;
+                    if (pageConfig.enableJSDataProcessor !== true
+                        && mtsGlobalThis.processData) {
+                        initData = mtsGlobalThis.processData(config.initData);
+                    }
                     markTimingInternal('data_processor_end');
-                    registerCallLepusMethodHandler(backgroundThreadRpc, runtime);
+                    registerCallLepusMethodHandler(backgroundThreadRpc, mtsGlobalThis);
                     registerGetCustomSectionHandler(backgroundThreadRpc, customSections);
-                    backgroundThreadRpc.registerHandler(switchExposureServiceEndpoint, runtime[switchExposureService]);
+                    const { switchExposureService } = createExposureService(rootDom, postExposure);
+                    backgroundThreadRpc.registerHandler(switchExposureServiceEndpoint, switchExposureService);
                     backgroundStart({
                         initData,
                         globalProps,
@@ -70,8 +73,8 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                         napiModulesMap,
                         browserConfig,
                     });
-                    runtime.renderPage(initData);
-                    runtime.__FlushElementTree(undefined, {});
+                    mtsGlobalThis.renderPage(initData);
+                    mtsGlobalThis.__FlushElementTree(undefined, {});
                 },
                 flushElementTree: async (options, timingFlags) => {
                     const pipelineId = options?.pipelineOptions?.pipelineID;
@@ -108,13 +111,13 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                 markTiming: (a, b) => markTimingInternal(b, a),
                 publishEvent,
                 publicComponentEvent,
-                postExposure,
+                createElement,
             },
         });
         markTimingInternal('decode_end');
-        entry(runtime);
+        entry(mtsGlobalThis);
         jsContext.__start(); // start the jsContext after the runtime is created
-        return runtime;
+        return mtsGlobalThis;
     }
     return { startMainThread };
 }