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

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.13.3
+
+### Patch Changes
+
+- refactor: code clean ([#897](https://github.com/lynx-family/lynx-stack/pull/897))
+
+  rename many internal apis to make logic be clear:
+
+  multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
+  all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
+
+- perf: improve dom operation performance ([#881](https://github.com/lynx-family/lynx-stack/pull/881))
+
+  - code clean for offscreen-document, cut down inheritance levels
+  - add `appendChild` method for OffscreenElement, improve performance for append one node
+  - bypass some JS getter for dumping SSR string
+
+- Updated dependencies [[`b6e27da`](https://github.com/lynx-family/lynx-stack/commit/b6e27daf865b0627b1c3238228a4fdf65ad87ee3)]:
+  - @lynx-js/web-constants@0.13.3
+
+## 0.13.2
+
+### Patch Changes
+
+- feat: allow lynx code to get JS engine provided properties on globalThis ([#786](https://github.com/lynx-family/lynx-stack/pull/786))
+
+  ```
+  globalThis.Reflect; // this will be the Reflect Object
+  ```
+
+  Note that `assigning to the globalThis` is still not allowed.
+
+- fix: corrupt mainthread module cache ([#806](https://github.com/lynx-family/lynx-stack/pull/806))
+
+- Updated dependencies [[`8cdd288`](https://github.com/lynx-family/lynx-stack/commit/8cdd28884288b9456aee3a919d6edbf72da1c67b)]:
+  - @lynx-js/web-constants@0.13.2
+
 ## 0.13.1
 
 ### Patch Changes

package/dist/MainThreadLynx.d.ts

@@ -1,5 +1,5 @@
-import { type MainThreadConfig } from './MainThreadRuntime.js';
-export declare function createMainThreadLynx(config: MainThreadConfig): {
+import { type MainThreadRuntimeConfig } from './MainThreadRuntime.js';
+export declare function createMainThreadLynx(config: MainThreadRuntimeConfig): {
     getJSContext(): import("@lynx-js/web-constants").LynxContextEventTarget;
     requestAnimationFrame(cb: FrameRequestCallback): number;
     cancelAnimationFrame(handler: number): void;

package/dist/MainThreadRuntime.d.ts

@@ -11,7 +11,7 @@ export interface MainThreadRuntimeCallbacks {
     publicComponentEvent: RpcCallType<typeof publicComponentEventEndpoint>;
     postExposure: RpcCallType<typeof postExposureEndpoint>;
 }
-export interface MainThreadConfig {
+export interface MainThreadRuntimeConfig {
     pageConfig: PageConfig;
     globalProps: unknown;
     callbacks: MainThreadRuntimeCallbacks;
@@ -20,7 +20,8 @@ export interface MainThreadConfig {
     lepusCode: Record<string, LynxJSModule>;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
-    docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>;
+    createElement: Document['createElement'];
+    rootDom: Pick<Element, 'append' | 'addEventListener'>;
     jsContext: LynxContextEventTarget;
 }
 export declare const elementToRuntimeInfoMap: unique symbol;
@@ -30,7 +31,7 @@ export declare const lynxUniqueIdToElement: unique symbol;
 export declare const switchExposureService: unique symbol;
 export declare class MainThreadRuntime {
     #private;
-    config: MainThreadConfig;
+    config: MainThreadRuntimeConfig;
     /**
      * @private
      */
@@ -51,6 +52,7 @@ export declare class MainThreadRuntime {
      * @private the CreatePage will append it to this
      */
     _rootDom: Pick<Element, 'append' | 'addEventListener'>;
+    _createElement: Document['createElement'];
     /**
      * @private
      */
@@ -59,7 +61,7 @@ export declare class MainThreadRuntime {
      * @private
      */
     [elementToRuntimeInfoMap]: WeakMap<HTMLElement, LynxRuntimeInfo>;
-    constructor(config: MainThreadConfig);
+    constructor(config: MainThreadRuntimeConfig);
     /**
      * @private
      */
@@ -69,12 +71,16 @@ export declare class MainThreadRuntime {
      * @private
      */
     __lynxGlobalBindingValues: Record<string, any>;
-    get globalThis(): this;
+    globalThis: this;
     SystemInfo: typeof systemInfo;
     lynx: MainThreadLynx;
     __globalProps: unknown;
     processData?: ProcessDataCallback;
+    ssrEncode?: () => string;
+    ssrHydrate?: (encodeData?: string) => void;
     renderPage: (data: unknown) => void;
+    __GetTemplateParts?: () => Record<string, Element> | undefined;
+    __GetPageElement: () => HTMLElement | undefined;
     _ReportError: RpcCallType<typeof reportErrorEndpoint>;
     __OnLifecycleEvent: (lifeCycleEvent: Cloneable) => void;
     __LoadLepusChunk: (path: string) => boolean;

package/dist/MainThreadRuntime.js

@@ -38,6 +38,7 @@ export class MainThreadRuntime {
      * @private the CreatePage will append it to this
      */
     _rootDom;
+    _createElement;
     /**
      * @private
      */
@@ -50,6 +51,8 @@ export class MainThreadRuntime {
         this.config = config;
         this.__globalProps = config.globalProps;
         this.lynx = createMainThreadLynx(config);
+        this._rootDom = config.rootDom;
+        this._createElement = config.createElement;
         /**
          * now create the style content
          * 1. flatten the styleInfo
@@ -63,9 +66,8 @@ export class MainThreadRuntime {
         const cssInJsInfo = this.config.pageConfig.enableCSSSelector
             ? {}
             : genCssInJsInfo(this.config.styleInfo);
-        const cardStyleElement = this.config.docu.createElement('style');
+        const cardStyleElement = this._createElement('style');
         cardStyleElement.innerHTML = genCssContent(this.config.styleInfo, this.config.pageConfig);
-        this._rootDom = this.config.docu;
         this._rootDom.append(cardStyleElement);
         /**
          * now create Element PAPIs
@@ -117,7 +119,7 @@ export class MainThreadRuntime {
     [updateCSSInJsStyle](uniqueId, newStyles) {
         let currentElement = this._lynxUniqueIdToStyleSheet[uniqueId]?.deref();
         if (!currentElement) {
-            currentElement = this.config.docu.createElement('style');
+            currentElement = this._createElement('style');
             this._lynxUniqueIdToStyleSheet[uniqueId] = new WeakRef(currentElement);
             this._rootDom.append(currentElement);
         }
@@ -128,14 +130,31 @@ export class MainThreadRuntime {
      * @private
      */
     __lynxGlobalBindingValues = {};
-    get globalThis() {
-        return this;
-    }
+    globalThis = new Proxy(this, {
+        get: (target, prop) => {
+            // @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');
+        },
+    });
     SystemInfo;
     lynx;
     __globalProps;
     processData;
+    ssrEncode;
+    ssrHydrate;
     #renderPage;
+    __GetTemplateParts;
+    __GetPageElement = () => {
+        return this._page;
+    };
     _ReportError;
     __OnLifecycleEvent;
     __LoadLepusChunk = (path) => {

package/dist/elementAPI/domTree/domTreeFunctions.js

@@ -2,7 +2,7 @@
 // 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 function __AppendElement(parent, child) {
-    parent.append(child);
+    parent.appendChild(child);
 }
 export function __ElementIsEqual(left, right) {
     return left === right;

package/dist/elementAPI/elementCreating/elementCreatingFunctions.js

@@ -12,7 +12,7 @@ export function initializeElementCreatingFunction(runtime) {
         // @ts-expect-error
         const __SetCSSId = runtime.__SetCSSId;
         const htmlTag = runtime.config.tagMap[tag] ?? tag;
-        const element = runtime.config.docu.createElement(htmlTag);
+        const element = runtime._createElement(htmlTag);
         element.setAttribute(lynxTagAttribute, tag);
         const uniqueId = uniqueIdInc++;
         const runtimeInfo = {
@@ -101,7 +101,7 @@ export function initializeElementCreatingFunction(runtime) {
         return element;
     }
     function __SwapElement(childA, childB) {
-        const temp = runtime.config.docu.createElement('div');
+        const temp = runtime._createElement('div');
         childA.replaceWith(temp);
         childB.replaceWith(childA);
         temp.replaceWith(childB);

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/prepareMainThreadAPIs.d.ts

@@ -0,0 +1,5 @@
+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>;
+};

package/dist/{loadMainThread.js → prepareMainThreadAPIs.js}

@@ -6,7 +6,7 @@ import { registerCallLepusMethodHandler } from './crossThreadHandlers/registerCa
 import { registerGetCustomSectionHandler } from './crossThreadHandlers/registerGetCustomSectionHandler.js';
 import { MainThreadRuntime, switchExposureService, } from './MainThreadRuntime.js';
 const moduleCache = {};
-export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTimingInternal, reportError) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, createElement, commitDocument, markTimingInternal, reportError) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -19,7 +19,7 @@ export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTi
         const { styleInfo, pageConfig, customSections, cardType, lepusCode } = template;
         markTimingInternal('decode_start');
         const lepusCodeEntries = await Promise.all(Object.entries(lepusCode).map(async ([name, url]) => {
-            const cachedModule = moduleCache[name];
+            const cachedModule = moduleCache[url];
             if (cachedModule) {
                 return [name, cachedModule];
             }
@@ -28,7 +28,7 @@ export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTi
                 await import(/* webpackIgnore: true */ url);
                 const module = globalThis.module;
                 Object.assign(globalThis, { module: {} });
-                moduleCache[name] = module;
+                moduleCache[url] = module;
                 return [name, module];
             }
         }));
@@ -48,7 +48,8 @@ export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTi
             pageConfig,
             styleInfo,
             lepusCode: lepusCodeLoaded,
-            docu,
+            createElement,
+            rootDom,
             callbacks: {
                 mainChunkReady: () => {
                     markTimingInternal('data_processor_start');
@@ -109,7 +110,7 @@ export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTi
                 publicComponentEvent,
                 postExposure,
             },
-        }).globalThis;
+        });
         markTimingInternal('decode_end');
         entry(runtime);
         jsContext.__start(); // start the jsContext after the runtime is created
@@ -117,4 +118,4 @@ export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTi
     }
     return { startMainThread };
 }
-//# sourceMappingURL=loadMainThread.js.map
+//# sourceMappingURL=prepareMainThreadAPIs.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
   "dependencies": {
     "css-tree": "^3.1.0",
     "hyphenate-style-name": "^1.1.0",
-    "@lynx-js/web-constants": "0.13.1",
+    "@lynx-js/web-constants": "0.13.3",
     "@lynx-js/web-style-transformer": "0.3.0"
   }
 }

package/dist/loadMainThread.d.ts

@@ -1,5 +0,0 @@
-import { type Rpc, type MainThreadStartConfigs, type RpcCallType, type reportErrorEndpoint } from '@lynx-js/web-constants';
-import { MainThreadRuntime } from './MainThreadRuntime.js';
-export declare function loadMainThread(backgroundThreadRpc: Rpc, docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>, commitDocument: () => Promise<void> | void, markTimingInternal: (timingKey: string, pipelineId?: string) => void, reportError: RpcCallType<typeof reportErrorEndpoint>): {
-    startMainThread: (config: MainThreadStartConfigs) => Promise<MainThreadRuntime>;
-};