@lynx-js/web-mainthread-apis 0.13.4 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,98 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.14.0
+
+### Patch Changes
+
+- feat: add `_SetSourceMapRelease(errInfo)` MTS API. ([#1118](https://github.com/lynx-family/lynx-stack/pull/1118))
+
+  You can get `errInfo.release` through `e.detail.release` in the error event callback of lynx-view.
+
+  The `_SetSourceMapRelease` function is not complete yet, because it is currently limited by the Web platform and some functions and some props such as `err.stack` do not need to be supported for the time being.
+
+- feat: add `_I18nResourceTranslation` api in mts && `init-i18n-resources` attr, `i18nResourceMissed` event of lynx-view. ([#1065](https://github.com/lynx-family/lynx-stack/pull/1065))
+
+  `init-i18n-resource` is the complete set of i18nResources that need to be maintained on the container side. Note: You need to pass this value when lynx-view is initialized.
+
+  You can use `_I18nResourceTranslation` in MTS to get the corresponding i18nResource from `init-i18n-resources`. If it is undefined, the `i18nResourceMissed` event will be dispatched.
+
+  ```js
+  // ui thread
+  lynxView.initI18nResources = [
+    {
+      options: {
+        locale: 'en',
+        channel: '1',
+        fallback_url: '',
+      },
+      resource: {
+        hello: 'hello',
+        lynx: 'lynx web platform1',
+      },
+    },
+  ];
+  lynxView.addEventListener('i18nResourceMissed', (e) => {
+    console.log(e);
+  });
+
+  // mts
+  _I18nResourceTranslation({
+    locale: 'en',
+    channel: '1',
+    fallback_url: '',
+  });
+  ```
+
+- feat: supports `lynx.getI18nResource()` and `onI18nResourceReady` event in bts. ([#1088](https://github.com/lynx-family/lynx-stack/pull/1088))
+
+  - `lynx.getI18nResource()` can be used to get i18nResource in bts, it has two data sources:
+    - the result of `_I18nResourceTranslation()`
+    - lynx-view `updateI18nResources(data: InitI18nResources, options: I18nResourceTranslationOptions)`, it will be matched to the correct i8nResource as a result of `lynx.getI18nResource()`
+  - `onI18nResourceReady` event can be used to listen `_I18nResourceTranslation` and lynx-view `updateI18nResources` execution.
+
+- feat: add `updateI18nResources` method of lynx-view. ([#1085](https://github.com/lynx-family/lynx-stack/pull/1085))
+
+  Now you can use `updateI18nResources` to update i18nResources, and then use \_I18nResourceTranslation() to get the updated result.
+
+- fix: `decodeCssInJs` will not throw error. ([#1120](https://github.com/lynx-family/lynx-stack/pull/1120))
+
+  Before this pr, decoding css will be strictly executed according to cssInfo, and an error will be thrown if data that does not meet the requirements is encountered. Now it is changed to console.warn, which will not block rendering.
+
+- Updated dependencies [[`25a04c9`](https://github.com/lynx-family/lynx-stack/commit/25a04c9e59f4b893227bdead74f2de69f6615cdb), [`0dbb8b1`](https://github.com/lynx-family/lynx-stack/commit/0dbb8b1f580d0700e2b67b92018a7a00d1494837), [`f99de1e`](https://github.com/lynx-family/lynx-stack/commit/f99de1ef60cc5a11eae4fd0acc70a490787d36c9), [`873a285`](https://github.com/lynx-family/lynx-stack/commit/873a2852fa3df9e32c48a6504160bb243540c7b9), [`afacb2c`](https://github.com/lynx-family/lynx-stack/commit/afacb2cbea7feca46c553651000625d0845b2b00), [`7e73450`](https://github.com/lynx-family/lynx-stack/commit/7e73450f8f5f1153f8a064036f5552c1335c23d7)]:
+  - @lynx-js/web-constants@0.14.0
+  - @lynx-js/web-style-transformer@0.3.1
+
+## 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

package/dist/createMainThreadGlobalThis.d.ts

@@ -0,0 +1,25 @@
+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, type I18nResourceTranslationOptions } 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;
+    _I18nResourceTranslation: (options: I18nResourceTranslationOptions) => unknown | undefined;
+}
+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,454 @@
+// 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;
+    };
+    let release = '';
+    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: (err, _) => callbacks._ReportError(err, _, release),
+        _SetSourceMapRelease: (errInfo) => release = errInfo?.release,
+        __OnLifecycleEvent: callbacks.__OnLifecycleEvent,
+        __FlushElementTree,
+        __lynxGlobalBindingValues: lynxGlobalBindingValues,
+        _I18nResourceTranslation: callbacks._I18nResourceTranslation,
+        _AddEventListener: () => { },
+        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';
-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>;
+import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type MainThreadGlobalThis, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources } 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>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources): {
+    startMainThread: (config: StartMainThreadContextConfig) => Promise<MainThreadGlobalThis>;
 };