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

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @lynx-js/web-mainthread-apis
 
+## 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
+
+- 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

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
      */
@@ -74,7 +76,11 @@ export declare class MainThreadRuntime {
     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
@@ -58,14 +61,13 @@ export class MainThreadRuntime {
          * 4. create the style element
          * 5. append the style element to the root dom
          */
-        flattenStyleInfo(this.config.styleInfo);
+        flattenStyleInfo(this.config.styleInfo, this.config.pageConfig.enableCSSSelector);
         transformToWebCss(this.config.styleInfo);
         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);
         }
@@ -146,7 +148,13 @@ export class MainThreadRuntime {
     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/elementAPI/style/styleFunctions.js

@@ -5,7 +5,7 @@ import { cssIdAttribute } from '@lynx-js/web-constants';
 import hyphenateStyleName from 'hyphenate-style-name';
 import { queryCSSProperty } from './cssPropertyMap.js';
 import { decodeCssInJs } from '../../utils/decodeCssInJs.js';
-import { transformInlineStyleString, transfromParsedStyles, } from './transformInlineStyle.js';
+import { transformInlineStyleString, transformParsedStyles, } from './transformInlineStyle.js';
 import { elementToRuntimeInfoMap, updateCSSInJsStyle, } from '../../MainThreadRuntime.js';
 export function createStyleFunctions(runtime, cssInJsInfo) {
     function __AddClass(element, className) {
@@ -46,7 +46,7 @@ export function createStyleFunctions(runtime, cssInJsInfo) {
             element.style.removeProperty(dashName);
         }
         else {
-            const { transformedStyle } = transfromParsedStyles([[
+            const { transformedStyle } = transformParsedStyles([[
                     dashName,
                     valueStr,
                 ]]);
@@ -60,7 +60,7 @@ export function createStyleFunctions(runtime, cssInJsInfo) {
             return;
         const { transformedStyle } = typeof value === 'string'
             ? transformInlineStyleString(value)
-            : transfromParsedStyles(Object.entries(value).map(([k, value]) => [
+            : transformParsedStyles(Object.entries(value).map(([k, value]) => [
                 hyphenateStyleName(k),
                 value,
             ]));

package/dist/elementAPI/style/transformInlineStyle.d.ts

@@ -2,7 +2,7 @@ export declare function transformInlineStyleString(str: string): {
     childStyle: [string, string][];
     transformedStyle: [string, string][];
 };
-export declare function transfromParsedStyles(hyphenatedStyleObject: [property: string, value: string][]): {
+export declare function transformParsedStyles(hyphenatedStyleObject: [property: string, value: string][]): {
     childStyle: [string, string][];
     transformedStyle: [string, string][];
 };

package/dist/elementAPI/style/transformInlineStyle.js

@@ -5,7 +5,7 @@
 import * as tokenizer from 'css-tree/tokenizer';
 import { transformLynxStyles } from '@lynx-js/web-style-transformer';
 function parseStyleStringToObject(str) {
-    const hypenNameStyles = [];
+    const hyphenNameStyles = [];
     let beforeColonToken = true;
     let propertyStart = 0;
     let propertyEnd = 0;
@@ -14,12 +14,12 @@ function parseStyleStringToObject(str) {
     tokenizer.tokenize(str + ';', (type, start, end) => {
         if (type === tokenizer.Semicolon || tokenizer.EOF) {
             valueEnd = start;
-            const trimedProperty = str.substring(propertyStart, propertyEnd).trim();
-            const trimedValue = str.substring(valueStart, valueEnd).trim();
-            if (!beforeColonToken && trimedValue && trimedProperty) {
-                hypenNameStyles.push([
-                    trimedProperty,
-                    trimedValue,
+            const trimmedProperty = str.substring(propertyStart, propertyEnd).trim();
+            const trimmedValue = str.substring(valueStart, valueEnd).trim();
+            if (!beforeColonToken && trimmedValue && trimmedProperty) {
+                hyphenNameStyles.push([
+                    trimmedProperty,
+                    trimmedValue,
                 ]);
             }
             beforeColonToken = true;
@@ -31,12 +31,12 @@ function parseStyleStringToObject(str) {
             propertyEnd = start;
         }
     });
-    return hypenNameStyles;
+    return hyphenNameStyles;
 }
 export function transformInlineStyleString(str) {
-    return transfromParsedStyles(parseStyleStringToObject(str));
+    return transformParsedStyles(parseStyleStringToObject(str));
 }
-export function transfromParsedStyles(hyphenatedStyleObject) {
+export function transformParsedStyles(hyphenatedStyleObject) {
     return transformLynxStyles(hyphenatedStyleObject);
 }
 //# sourceMappingURL=transformInlineStyle.js.map

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);
@@ -48,7 +48,8 @@ export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTi
             pageConfig,
             styleInfo,
             lepusCode: lepusCodeLoaded,
-            docu,
+            createElement,
+            rootDom,
             callbacks: {
                 mainChunkReady: () => {
                     markTimingInternal('data_processor_start');
@@ -117,4 +118,4 @@ export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTi
     }
     return { startMainThread };
 }
-//# sourceMappingURL=loadMainThread.js.map
+//# sourceMappingURL=prepareMainThreadAPIs.js.map

package/dist/utils/processStyleInfo.d.ts

@@ -1,5 +1,5 @@
 import { type StyleInfo, type CssInJsInfo, type PageConfig } from '@lynx-js/web-constants';
-export declare function flattenStyleInfo(styleInfo: StyleInfo): void;
+export declare function flattenStyleInfo(styleInfo: StyleInfo, enableCSSSelector: boolean): void;
 /**
  * apply the lynx css -> web css transformation
  */

package/dist/utils/processStyleInfo.js

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import { cssIdAttribute, lynxTagAttribute, } from '@lynx-js/web-constants';
 import { transformLynxStyles } from '@lynx-js/web-style-transformer';
-export function flattenStyleInfo(styleInfo) {
+export function flattenStyleInfo(styleInfo, enableCSSSelector) {
     function flattenOneStyleInfo(cssId) {
         const oneInfo = styleInfo[cssId];
         const imports = oneInfo?.imports;
@@ -12,7 +12,12 @@ export function flattenStyleInfo(styleInfo) {
                 const flatInfo = flattenOneStyleInfo(im);
                 if (flatInfo) {
                     oneInfo.content.push(...flatInfo.content);
-                    oneInfo.rules.push(...flatInfo.rules);
+                    // oneInfo.rules.push(...flatInfo.rules);
+                    oneInfo.rules.push(...(enableCSSSelector
+                        ? flatInfo.rules
+                        // when enableCSSSelector is false, need to make a shallow copy of rules.sel
+                        // otherwise updating `oneCssInfo.sel` in `genCssInJsInfo()` will affect other imported cssInfo
+                        : flatInfo.rules.map(i => ({ ...i }))));
                 }
             }
             oneInfo.imports = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "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.2",
+    "@lynx-js/web-constants": "0.13.4",
     "@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>;
-};