@lynx-js/web-mainthread-apis 0.18.4 → 0.19.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.19.1
+
+### Patch Changes
+
+- fix: fix reload lynx-view when `enableCSSSelector` false may cause css style lost ([#1982](https://github.com/lynx-family/lynx-stack/pull/1982))
+
+- Updated dependencies []:
+  - @lynx-js/web-constants@0.19.1
+
+## 0.19.0
+
+### Patch Changes
+
+- fix: capture and bind event listener should be trigger correctly ([#1972](https://github.com/lynx-family/lynx-stack/pull/1972))
+
+- fix: the l-p-comp-uid of page should be '1' ([#1970](https://github.com/lynx-family/lynx-stack/pull/1970))
+
+- Updated dependencies []:
+  - @lynx-js/web-constants@0.19.0
+
 ## 0.18.4
 
 ### Patch Changes

package/dist/createMainThreadGlobalThis.js

@@ -27,12 +27,22 @@ export function createMainThreadGlobalThis(config) {
         ?.deref();
     let uniqueIdInc = lynxUniqueIdToElement.length || 1;
     const exposureChangedElements = new Set();
-    const commonHandler = (event) => {
+    const commonHandler = (event, capture) => {
         if (!event.currentTarget) {
             return;
         }
+        // The `capture false` event should not be triggered during the capture-phase
+        // The `capture true` event should not be triggered during the bubbling phase
+        if ((event.eventPhase === Event.CAPTURING_PHASE && capture === false)
+            || (event.eventPhase === Event.BUBBLING_PHASE && capture === true)) {
+            return;
+        }
         const currentTarget = event.currentTarget;
-        const isCapture = event.eventPhase === Event.CAPTURING_PHASE;
+        // When the event is triggered by the target element, `event.eventPhase` is always `target`, and the listener type is determined by the passed-in `capture`.
+        // When the event is triggered by a non-target element, the listener type is determined by `event.eventPhase` (1, 3).
+        const isCapture = event.eventPhase === Event.AT_TARGET
+            ? capture
+            : event.eventPhase === event.CAPTURING_PHASE;
         const lynxEventName = W3cEventNameToLynx[event.type] ?? event.type;
         const runtimeInfo = elementToRuntimeInfoMap.get(currentTarget);
         if (runtimeInfo) {
@@ -70,11 +80,23 @@ export function createMainThreadGlobalThis(config) {
         }
         return false;
     };
-    const commonCatchHandler = (event) => {
-        const handlerTriggered = commonHandler(event);
+    const captureHandler = (e) => {
+        commonHandler(e, true);
+    };
+    const defaultHandler = (e) => {
+        commonHandler(e, false);
+    };
+    const commonCatchHandler = (event, isCapture) => {
+        const handlerTriggered = commonHandler(event, isCapture);
         if (handlerTriggered)
             event.stopPropagation();
     };
+    const catchCaptureHandler = (e) => {
+        commonCatchHandler(e, true);
+    };
+    const defaultCatchHandler = (e) => {
+        commonCatchHandler(e, false);
+    };
     const __AddEvent = (element, eventType, eventName, newEventHandler) => {
         eventName = eventName.toLowerCase();
         const isCatch = eventType === 'catchEvent' || eventType === 'capture-catch';
@@ -88,8 +110,8 @@ export function createMainThreadGlobalThis(config) {
             ? runtimeInfo.eventHandlerMap[eventName]?.capture
             : runtimeInfo.eventHandlerMap[eventName]?.bind;
         const currentRegisteredHandler = isCatch
-            ? commonCatchHandler
-            : commonHandler;
+            ? (isCapture ? catchCaptureHandler : defaultCatchHandler)
+            : (isCapture ? captureHandler : defaultHandler);
         if (currentHandler) {
             if (!newEventHandler) {
                 /**
@@ -210,7 +232,7 @@ export function createMainThreadGlobalThis(config) {
         const page = __CreateElement('page', 0);
         page.setAttribute('part', 'page');
         page.setAttribute(cssIdAttribute, cssID + '');
-        page.setAttribute(parentComponentUniqueIdAttribute, '0');
+        page.setAttribute(parentComponentUniqueIdAttribute, '1');
         page.setAttribute(componentIdAttribute, componentID);
         __MarkTemplateElement(page);
         if (pageConfig.defaultDisplayLinear === false) {

package/dist/prepareMainThreadAPIs.d.ts

@@ -1,5 +1,5 @@
 import { type Rpc, type StartMainThreadContextConfig, type RpcCallType, type reportErrorEndpoint, type I18nResourceTranslationOptions, type InitI18nResources, type I18nResources, type Cloneable, type SSRHydrateInfo, type SSRDehydrateHooks, type JSRealm, type TemplateLoader, type UpdateDataOptions } from '@lynx-js/web-constants';
-export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealmPromise: JSRealm | Promise<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, loadTemplate: TemplateLoader, ssrHooks?: SSRDehydrateHooks): {
+export declare function prepareMainThreadAPIs(backgroundThreadRpc: Rpc, rootDom: Document | ShadowRoot, document: Document, mtsRealmPromise: JSRealm | Promise<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, loadTemplate: TemplateLoader, ssrHooks?: SSRDehydrateHooks, allOnUI?: boolean): {
     startMainThread: (config: StartMainThreadContextConfig, ssrHydrateInfo?: SSRHydrateInfo) => Promise<void>;
     handleUpdatedData: (newData: Cloneable, options: UpdateDataOptions | undefined) => Promise<void>;
 };

package/dist/prepareMainThreadAPIs.js

@@ -8,7 +8,7 @@ import { createMainThreadGlobalThis } from './createMainThreadGlobalThis.js';
 import { createExposureService } from './utils/createExposureService.js';
 import { appendStyleElement } from './utils/processStyleInfo.js';
 import { createQueryComponent } from './crossThreadHandlers/createQueryComponent.js';
-export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealmPromise, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, loadTemplate, ssrHooks) {
+export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mtsRealmPromise, commitDocument, markTimingInternal, flushMarkTimingInternal, reportError, triggerI18nResourceFallback, initialI18nResources, loadTemplate, ssrHooks, allOnUI) {
     const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
     const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
     const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
@@ -29,7 +29,7 @@ export function prepareMainThreadAPIs(backgroundThreadRpc, rootDom, document, mt
             sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
         });
         const i18nResources = initialI18nResources(initI18nResources);
-        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo);
+        const { updateCssOGStyle, updateLazyComponentStyle } = appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo, allOnUI);
         const mtsGlobalThisRef = {
             mtsGlobalThis: undefined,
         };

package/dist/utils/processStyleInfo.d.ts

@@ -5,7 +5,7 @@ import { type StyleInfo, type CssOGInfo, type PageConfig, type SSRHydrateInfo, t
  * 2. for each css, find all the importing css files (directly and indirectly)
  * 3. return the flattened style info, do not modify the content and rules
  */
-export declare function flattenStyleInfo(styleInfo: StyleInfo): FlattenedStyleInfo;
+export declare function flattenStyleInfo(styleInfo: StyleInfo, cloneDeep?: boolean): FlattenedStyleInfo;
 /**
  * apply the lynx css -> web css transformation
  */
@@ -18,7 +18,7 @@ export declare function genCssContent(styleInfo: FlattenedStyleInfo, pageConfig:
  * generate the css-in-js data
  */
 export declare function genCssOGInfo(styleInfo: FlattenedStyleInfo): CssOGInfo;
-export declare function appendStyleElement(styleInfo: StyleInfo, pageConfig: PageConfig, rootDom: Node, document: Document, ssrHydrateInfo?: SSRHydrateInfo): {
+export declare function appendStyleElement(styleInfo: StyleInfo, pageConfig: PageConfig, rootDom: Node, document: Document, ssrHydrateInfo?: SSRHydrateInfo, allOnUI?: boolean): {
     updateCssOGStyle: (uniqueId: number, newClassName: string, cssID: string | null, entryName: string | null) => void;
     updateLazyComponentStyle: (styleInfo: StyleInfo, entryName: string) => void;
 };

package/dist/utils/processStyleInfo.js

@@ -64,7 +64,7 @@ function generateImportByMap(styleInfo, sortedCssIds) {
  * 2. for each css, find all the importing css files (directly and indirectly)
  * 3. return the flattened style info, do not modify the content and rules
  */
-export function flattenStyleInfo(styleInfo) {
+export function flattenStyleInfo(styleInfo, cloneDeep) {
     // Step 1. Topological sorting
     const sortedCssIds = topologicalSort(styleInfo);
     // Step 2. generate deps;
@@ -75,8 +75,17 @@ export function flattenStyleInfo(styleInfo) {
         const oneInfo = styleInfo[cssId];
         const flattenedInfo = oneInfo
             ? {
-                content: oneInfo.content,
-                rules: oneInfo.rules,
+                content: cloneDeep
+                    ? (oneInfo.content ? [...oneInfo.content] : [])
+                    : (oneInfo.content ?? []),
+                rules: cloneDeep
+                    ? (oneInfo.rules
+                        ? oneInfo.rules.map(rule => ({
+                            sel: rule.sel.map(selectors => selectors.map(arr => arr.slice())),
+                            decl: rule.decl.map(([k, v]) => [k, v]),
+                        }))
+                        : [])
+                    : (oneInfo.rules ?? []),
                 importBy: Array.from(cssIdToImportBy.get(cssId) ?? [cssId]),
             }
             : {
@@ -182,7 +191,7 @@ export function genCssOGInfo(styleInfo) {
     }
     return cssOGInfo;
 }
-export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo) {
+export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssrHydrateInfo, allOnUI) {
     const lynxUniqueIdToStyleRulesIndex = ssrHydrateInfo?.lynxUniqueIdToStyleRulesIndex ?? [];
     /**
      * now create the style content
@@ -192,7 +201,7 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssr
      * 4. create the style element
      * 5. append the style element to the root dom
      */
-    const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+    const flattenedStyleInfo = flattenStyleInfo(styleInfo, !!allOnUI);
     transformToWebCss(flattenedStyleInfo);
     const cssOGInfo = pageConfig.enableCSSSelector
         ? {}
@@ -224,7 +233,7 @@ export function appendStyleElement(styleInfo, pageConfig, rootDom, document, ssr
         }
     };
     const updateLazyComponentStyle = (styleInfo, entryName) => {
-        const flattenedStyleInfo = flattenStyleInfo(styleInfo);
+        const flattenedStyleInfo = flattenStyleInfo(styleInfo, !!allOnUI);
         transformToWebCss(flattenedStyleInfo);
         if (!pageConfig.enableCSSSelector) {
             lazyCSSOGInfo[entryName] = genCssOGInfo(flattenedStyleInfo);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.18.4",
+  "version": "0.19.1",
   "private": false,
   "description": "",
   "keywords": [],
@@ -28,7 +28,7 @@
   "dependencies": {
     "hyphenate-style-name": "^1.1.0",
     "wasm-feature-detect": "^1.8.0",
-    "@lynx-js/web-constants": "0.18.4"
+    "@lynx-js/web-constants": "0.19.1"
   },
   "devDependencies": {
     "binaryen": "^125.0.0",