@lynx-js/web-mainthread-apis-canary 0.15.8-canary-20250827-60c81a1e → 0.16.0-canary-20250828-c1f8715a

package/CHANGELOG.md

@@ -1,14 +1,26 @@
 # @lynx-js/web-mainthread-apis
 
-## 0.15.8-canary-20250827151323-60c81a1ed99567d7475e661196eb363f992420e6
+## 0.16.0-canary-20250828064127-c1f8715a81b2e69ff46fc363013626db4468c209
+
+### Minor Changes
+
+- refactor: provide the mts a real globalThis ([#1589](https://github.com/lynx-family/lynx-stack/pull/1589))
+
+  Before this change, We create a function wrapper and a fake globalThis for Javascript code.
+
+  This caused some issues.
+
+  After this change, we will create an iframe for createing an isolated Javascript context.
+
+  This means the globalThis will be the real one.
 
 ### Patch Changes
 
 - fix: the SystemInfo in bts should be assigned to the globalThis ([#1599](https://github.com/lynx-family/lynx-stack/pull/1599))
 
-- Updated dependencies [[`bb53d9a`](https://github.com/lynx-family/lynx-stack/commit/bb53d9a035f607e7c89952098d4ed77877a2e3c1)]:
-  - @lynx-js/web-constants@0.15.8-canary-20250827151323-60c81a1ed99567d7475e661196eb363f992420e6
-  - @lynx-js/web-style-transformer@0.15.8-canary-20250827151323-60c81a1ed99567d7475e661196eb363f992420e6
+- Updated dependencies [[`bb53d9a`](https://github.com/lynx-family/lynx-stack/commit/bb53d9a035f607e7c89952098d4ed77877a2e3c1), [`c1f8715`](https://github.com/lynx-family/lynx-stack/commit/c1f8715a81b2e69ff46fc363013626db4468c209)]:
+  - @lynx-js/web-constants@0.16.0-canary-20250828064127-c1f8715a81b2e69ff46fc363013626db4468c209
+  - @lynx-js/web-style-transformer@0.16.0-canary-20250828064127-c1f8715a81b2e69ff46fc363013626db4468c209
 
 ## 0.15.7
 

package/dist/createMainThreadGlobalThis.d.ts

@@ -1,4 +1,4 @@
-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, type SSRHydrateInfo, type SSRDehydrateHooks } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type LynxContextEventTarget, type MainThreadGlobalThis, type WebFiberElementImpl, type I18nResourceTranslationOptions, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm } from '@lynx-js/web-constants';
 export interface MainThreadRuntimeCallbacks {
     mainChunkReady: () => void;
     flushElementTree: (options: FlushElementTreeOptions, timingFlags: string[], exposureChangedElements: WebFiberElementImpl[]) => void;
@@ -7,7 +7,6 @@ export interface MainThreadRuntimeCallbacks {
     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 {
@@ -15,14 +14,14 @@ export interface MainThreadRuntimeConfig {
     globalProps: unknown;
     callbacks: MainThreadRuntimeCallbacks;
     styleInfo: StyleInfo;
-    customSections: LynxTemplate['customSections'];
-    elementTemplate: LynxTemplate['elementTemplate'];
-    lepusCode: Record<string, LynxJSModule>;
+    lynxTemplate: LynxTemplate;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
     rootDom: Pick<Element, 'append' | 'addEventListener'> & Partial<Pick<ShadowRoot, 'querySelectorAll' | 'cloneNode'>>;
     jsContext: LynxContextEventTarget;
     ssrHydrateInfo?: SSRHydrateInfo;
     ssrHooks?: SSRDehydrateHooks;
+    mtsRealm: JSRealm;
+    document: Document;
 }
 export declare function createMainThreadGlobalThis(config: MainThreadRuntimeConfig): MainThreadGlobalThis;

package/dist/createMainThreadGlobalThis.js

@@ -1,8 +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 { lynxUniqueIdAttribute, systemInfo, parentComponentUniqueIdAttribute, componentIdAttribute, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, lynxTagAttribute, W3cEventNameToLynx, cssIdAttribute, lynxDefaultDisplayLinearAttribute, __lynx_timing_flag, lynxDisposedAttribute, globalDisallowedVars, } from '@lynx-js/web-constants';
-import { globalMuteableVars } from '@lynx-js/web-constants';
+import { lynxUniqueIdAttribute, systemInfo, parentComponentUniqueIdAttribute, componentIdAttribute, LynxEventNameToW3cByTagName, LynxEventNameToW3cCommon, lynxTagAttribute, W3cEventNameToLynx, cssIdAttribute, lynxDefaultDisplayLinearAttribute, __lynx_timing_flag, lynxDisposedAttribute, } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './createMainThreadLynx.js';
 import { flattenStyleInfo, genCssContent, genCssOGInfo, transformToWebCss, } from './utils/processStyleInfo.js';
 import { __AddClass, __AddConfig, __AddDataset, __AddInlineStyle, __AppendElement, __ElementIsEqual, __FirstElement, __GetAttributes, __GetChildren, __GetClasses, __GetComponentID, __GetDataByKey, __GetDataset, __GetElementConfig, __GetElementUniqueID, __GetID, __GetParent, __GetTag, __GetTemplateParts, __InsertElementBefore, __LastElement, __MarkPartElement, __MarkTemplateElement, __NextElement, __RemoveElement, __ReplaceElement, __ReplaceElements, __SetClasses, __SetConfig, __SetCSSId, __SetDataset, __SetID, __SetInlineStyles, __UpdateComponentID, __UpdateComponentInfo, __GetAttributeByName, } from './pureElementPAPIs.js';
@@ -22,19 +21,14 @@ const exposureRelatedAttributes = new Set([
 ]);
 export function createMainThreadGlobalThis(config) {
     let timingFlags = [];
-    let renderPage;
-    const { callbacks, tagMap, pageConfig, lepusCode, rootDom, globalProps, styleInfo, ssrHydrateInfo, ssrHooks, } = config;
+    const { callbacks, tagMap, pageConfig, lynxTemplate, rootDom, globalProps, styleInfo, ssrHydrateInfo, ssrHooks, mtsRealm, document, } = config;
+    const { elementTemplate, lepusCode } = lynxTemplate;
     const lynxUniqueIdToElement = ssrHydrateInfo?.lynxUniqueIdToElement ?? [];
     const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
     const elementToRuntimeInfoMap = new WeakMap();
     let pageElement = lynxUniqueIdToElement[1]
         ?.deref();
     let uniqueIdInc = lynxUniqueIdToElement.length || 1;
-    /**
-     * for "update" the globalThis.val in the main thread
-     */
-    const varsUpdateHandlers = [];
-    const lynxGlobalBindingValues = {};
     const exposureChangedElements = new Set();
     /**
      * now create the style content
@@ -54,7 +48,7 @@ export function createMainThreadGlobalThis(config) {
         cardStyleElement = ssrHydrateInfo.cardStyleElement;
     }
     else {
-        cardStyleElement = callbacks.createElement('style');
+        cardStyleElement = document.createElement('style');
         cardStyleElement.innerHTML = genCssContent(styleInfo, pageConfig);
         rootDom.append(cardStyleElement);
     }
@@ -107,7 +101,8 @@ export function createMainThreadGlobalThis(config) {
                     crossThreadEvent.currentTarget
                         .elementRefptr = event.currentTarget;
                 }
-                mtsGlobalThis.runWorklet?.(hname.value, [crossThreadEvent]);
+                mtsRealm.globalWindow
+                    .runWorklet?.(hname.value, [crossThreadEvent]);
             }
         }
         return false;
@@ -227,7 +222,7 @@ export function createMainThreadGlobalThis(config) {
     const __CreateElement = (tag, parentComponentUniqueId) => {
         const uniqueId = uniqueIdInc++;
         const htmlTag = tagMap[tag] ?? tag;
-        const element = callbacks.createElement(htmlTag);
+        const element = document.createElement(htmlTag);
         lynxUniqueIdToElement[uniqueId] = new WeakRef(element);
         const parentComponentCssID = lynxUniqueIdToElement[parentComponentUniqueId]
             ?.deref()?.getAttribute(cssIdAttribute);
@@ -326,9 +321,11 @@ export function createMainThreadGlobalThis(config) {
         elementToRuntimeInfoMap.set(element, runtimeInfo);
     };
     const __SwapElement = (childA, childB) => {
-        const temp = callbacks.createElement('div');
+        const temp = document.createElement('div');
+        // @ts-expect-error fixme
         childA.replaceWith(temp);
         childB.replaceWith(childA);
+        // @ts-expect-error fixme
         temp.replaceWith(childB);
     };
     const __SetCSSIdForCSSOG = (elements, cssId) => {
@@ -351,13 +348,13 @@ export function createMainThreadGlobalThis(config) {
         updateCssOGStyle(Number(element.getAttribute(lynxUniqueIdAttribute)), newStyleStr ?? '');
     };
     const __LoadLepusChunk = (path) => {
-        const lepusModule = lepusCode[`${path}`];
-        if (lepusModule) {
-            const entry = lepusModule.exports;
-            entry?.(mtsGlobalThis);
+        try {
+            path = lepusCode?.[path] ?? path;
+            mtsRealm.loadScriptSync(path);
             return true;
         }
-        else {
+        catch (e) {
+            console.error(`failed to load lepus chunk ${path}`, e);
             return false;
         }
     };
@@ -412,7 +409,7 @@ export function createMainThreadGlobalThis(config) {
         }
     };
     const __ElementFromBinary = (templateId, parentComponentUniId) => {
-        const elementTemplateData = config.elementTemplate[templateId];
+        const elementTemplateData = elementTemplate[templateId];
         if (elementTemplateData) {
             let clonedElements;
             if (templateIdToTemplate[templateId]) {
@@ -421,7 +418,7 @@ export function createMainThreadGlobalThis(config) {
             else {
                 clonedElements = elementTemplateData.map(data => createElementForElementTemplateData(data, parentComponentUniId));
                 if (rootDom.cloneNode) {
-                    const template = callbacks.createElement('template');
+                    const template = document.createElement('template');
                     template.content.append(...clonedElements);
                     templateIdToTemplate[templateId] = template;
                     rootDom.append(template);
@@ -513,53 +510,22 @@ export function createMainThreadGlobalThis(config) {
         _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;
-        },
+        renderPage: undefined,
     };
-    mtsGlobalThis.globalThis = new Proxy(mtsGlobalThis, {
-        get: (target, prop) => {
-            if (typeof prop === 'string' && globalDisallowedVars.includes(prop)) {
-                return undefined;
-            }
-            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;
+    Object.assign(mtsRealm.globalWindow, mtsGlobalThis);
+    Object.defineProperty(mtsRealm.globalWindow, 'renderPage', {
+        get() {
+            return mtsGlobalThis.renderPage;
         },
-        ownKeys(target) {
-            return Reflect.ownKeys(target).filter((key) => key !== 'globalThis');
+        set(v) {
+            mtsGlobalThis.renderPage = v;
+            queueMicrotask(callbacks.mainChunkReady);
         },
+        configurable: true,
+        enumerable: true,
     });
-    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;
+    return mtsRealm.globalWindow;
 }
 //# sourceMappingURL=createMainThreadGlobalThis.js.map

package/dist/createMainThreadLynx.js

@@ -1,21 +1,31 @@
 import {} from './createMainThreadGlobalThis.js';
 export function createMainThreadLynx(config, SystemInfo) {
+    const requestAnimationFrameBrowserImpl = requestAnimationFrame;
+    const cancelAnimationFrameBrowserImpl = cancelAnimationFrame;
+    const setTimeoutBrowserImpl = setTimeout;
+    const clearTimeoutBrowserImpl = clearTimeout;
+    const setIntervalBrowserImpl = setInterval;
+    const clearIntervalBrowserImpl = clearInterval;
     return {
         getJSContext() {
             return config.jsContext;
         },
         requestAnimationFrame(cb) {
-            return requestAnimationFrame(cb);
+            return requestAnimationFrameBrowserImpl(cb);
         },
         cancelAnimationFrame(handler) {
-            return cancelAnimationFrame(handler);
+            return cancelAnimationFrameBrowserImpl(handler);
         },
         __globalProps: config.globalProps,
         getCustomSectionSync(key) {
-            return config.customSections[key]?.content;
+            return config.lynxTemplate.customSections[key]?.content;
         },
         markPipelineTiming: config.callbacks.markTiming,
         SystemInfo,
+        setTimeout: setTimeoutBrowserImpl,
+        clearTimeout: clearTimeoutBrowserImpl,
+        setInterval: setIntervalBrowserImpl,
+        clearInterval: clearIntervalBrowserImpl,
     };
 }
 //# sourceMappingURL=createMainThreadLynx.js.map

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,4 +1,4 @@
-import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type MainThreadGlobalThis, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, createElement: Document['createElement'], commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources, ssrHooks?: SSRDehydrateHooks): {
-    startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<MainThreadGlobalThis>;
+import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm } from '@lynx-js/web-constants';
+export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealm: JSRealm, commitDocument: (exposureChangedElements: HTMLElement[]) => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, flushMarkTimingInternal: () => void, reportError: RpcCallType<typeof reportErrorEndpoint>, triggerI18nResourceFallback: (options: I18nResourceTranslationOptions) => void, initialI18nResources: (data: InitI18nResources) => I18nResources, ssrHooks?: SSRDehydrateHooks): {
+    startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<void>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -8,8 +8,7 @@ import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
 import { createExposureService } from './utils/createExposureService.js';
 import { initWasm } from '@lynx-js/web-style-transformer';
 const initWasmPromise = initWasm();
-const moduleCache = {};
-export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealm, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, ssrHooks) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -20,26 +19,9 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
     async function startMainThread(config, ssrHydrateInfo) {
         let isFp = true;
         const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, initI18nResources, } = config;
-        const { styleInfo, pageConfig, customSections, cardType, lepusCode, elementTemplate, } = template;
+        const { styleInfo, pageConfig, customSections, cardType, } = template;
         markTimingInternal('decode_start');
         await initWasmPromise;
-        const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
-            const cachedModule = moduleCache[url];
-            if (cachedModule) {
-                return [name, cachedModule];
-            }
-            else {
-                const { default: evaluateModule } = await import(
-                /* webpackIgnore: true */ url);
-                const module = {
-                    exports: evaluateModule,
-                };
-                moduleCache[url] = module;
-                return [name, module];
-            }
-        }));
-        const lepusCodeLoaded = Object.fromEntries(lepusCodeEntries);
-        const entry = lepusCodeLoaded['root'].exports;
         const jsContext = new LynxCrossThreadContext({
             rpc: backgroundThreadRpc,
             receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
@@ -47,18 +29,18 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
         });
         const i18nResources = initialI18nResources(initI18nResources);
         const mtsGlobalThis = createMainThreadGlobalThis({
+            lynxTemplate: template,
+            mtsRealm,
             jsContext,
             tagMap,
             browserConfig,
-            customSections,
-            elementTemplate,
             globalProps,
             pageConfig,
             styleInfo,
-            lepusCode: lepusCodeLoaded,
             rootDom,
             ssrHydrateInfo,
             ssrHooks,
+            document,
             callbacks: {
                 mainChunkReady: () => {
                     markTimingInternal('data_processor_start');
@@ -134,7 +116,6 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
                 markTiming: (a, b) => markTimingInternal(b, a),
                 publishEvent,
                 publicComponentEvent,
-                createElement,
                 _I18nResourceTranslation: (options) => {
                     const matchedInitI18nResources = i18nResources.data?.find(i => getCacheI18nResourcesKey(i.options)
                         === getCacheI18nResourcesKey(options));
@@ -147,9 +128,8 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElemen
             },
         });
         markTimingInternal('decode_end');
-        entry(mtsGlobalThis);
+        await mtsRealm.loadScript(template.lepusCode.root);
         jsContext.__start(); // start the jsContext after the runtime is created
-        return mtsGlobalThis;
     }
     return { startMainThread };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis-canary",
-  "version": "0.15.8-canary-20250827-60c81a1e",
+  "version": "0.16.0-canary-20250828-c1f8715a",
   "private": false,
   "description": "",
   "keywords": [],
@@ -24,8 +24,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.15.8-canary-20250827-60c81a1e",
-    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.15.8-canary-20250827-60c81a1e",
+    "@lynx-js/web-constants": "npm:@lynx-js/web-constants-canary@0.16.0-canary-20250828-c1f8715a",
+    "@lynx-js/web-style-transformer": "npm:@lynx-js/web-style-transformer-canary@0.16.0-canary-20250828-c1f8715a",
     "hyphenate-style-name": "^1.1.0"
   }
 }