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

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @lynx-js/web-mainthread-apis
 
+## 0.13.1
+
+### Patch Changes
+
+- fix: some inline style properties cause crash ([#647](https://github.com/lynx-family/lynx-stack/pull/647))
+
+  add support for the following css properties
+
+  - mask
+  - mask-repeat
+  - mask-position
+  - mask-clip
+  - mask-origin
+  - mask-size
+  - gap
+  - column-gap
+  - row-gap
+  - image-rendering
+  - hyphens
+  - offset-path
+  - offset-distance
+
+- feat: support touch events for MTS ([#641](https://github.com/lynx-family/lynx-stack/pull/641))
+
+  now we support
+
+  - main-thread:bindtouchstart
+  - main-thread:bindtouchend
+  - main-thread:bindtouchmove
+  - main-thread:bindtouchcancel
+
+- Updated dependencies [[`c9ccad6`](https://github.com/lynx-family/lynx-stack/commit/c9ccad6b574c98121149d3e9d4a9a7e97af63d91)]:
+  - @lynx-js/web-constants@0.13.1
+
+## 0.13.0
+
+### Minor Changes
+
+- fix: mts lynx will no longer provide requireModule, requireModuleAsync methods, which is aligned with Native. ([#537](https://github.com/lynx-family/lynx-stack/pull/537))
+
+### Patch Changes
+
+- refactor: isolate SystemInfo ([#628](https://github.com/lynx-family/lynx-stack/pull/628))
+
+  Never assign `SystemInfo` on worker's self object.
+
+- feat: support thread strategy `all-on-ui` ([#625](https://github.com/lynx-family/lynx-stack/pull/625))
+
+  ```html
+  <lynx-view thread-strategy="all-on-ui"></lynx-view>
+  ```
+
+  This will make the lynx's main-thread run on the UA's main thread.
+
+  Note that the `all-on-ui` does not support the HMR & chunk splitting yet.
+
+- fix(web): `:root` not work on web platform ([#607](https://github.com/lynx-family/lynx-stack/pull/607))
+
+  Note: To solve this issue, you need to upgrade your `react-rsbuild-plugin`
+
+- refactor: move mainthread impl into mainthread-api packages ([#622](https://github.com/lynx-family/lynx-stack/pull/622))
+
+- fix(web): css selector not work for selectors with combinator and pseudo-class on WEB ([#608](https://github.com/lynx-family/lynx-stack/pull/608))
+
+  like `.parent > :not([hidden]) ~ :not([hidden])`
+
+  you will need to upgrade your `react-rsbuild-plugin` to fix this issue
+
+- Updated dependencies [[`4ee0465`](https://github.com/lynx-family/lynx-stack/commit/4ee0465f6e5846a0d038b49d2a7c95e87c9e5c77), [`5a3d9af`](https://github.com/lynx-family/lynx-stack/commit/5a3d9afe52ba639987db124ca35580261e0718b5), [`5269cab`](https://github.com/lynx-family/lynx-stack/commit/5269cabef7609159bdd0dd14a03c5da667907424)]:
+  - @lynx-js/web-constants@0.13.0
+
 ## 0.12.0
 
 ### Patch Changes

package/dist/MainThreadLynx.d.ts

@@ -1,11 +1,9 @@
-import { type MainThreadConfig, MainThreadRuntime } from './MainThreadRuntime.js';
-export declare function createMainThreadLynx(config: MainThreadConfig, lepusRuntime: MainThreadRuntime): {
+import { type MainThreadConfig } from './MainThreadRuntime.js';
+export declare function createMainThreadLynx(config: MainThreadConfig): {
     getJSContext(): import("@lynx-js/web-constants").LynxContextEventTarget;
     requestAnimationFrame(cb: FrameRequestCallback): number;
     cancelAnimationFrame(handler: number): void;
     __globalProps: unknown;
-    requireModule(path: string): unknown;
-    requireModuleAsync(path: string, callback: (error: Error | null, exports?: unknown) => void): void;
     getCustomSectionSync(key: string): import("@lynx-js/web-constants").Cloneable;
     markPipelineTiming: (pipelineId: string, timingKey: string) => void;
 };

package/dist/MainThreadLynx.js

@@ -1,5 +1,8 @@
-import { MainThreadRuntime, } from './MainThreadRuntime.js';
-export function createMainThreadLynx(config, lepusRuntime) {
+// 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';
+export function createMainThreadLynx(config) {
     return {
         getJSContext() {
             return config.jsContext;
@@ -11,33 +14,6 @@ export function createMainThreadLynx(config, lepusRuntime) {
             return cancelAnimationFrame(handler);
         },
         __globalProps: config.globalProps,
-        requireModule(path) {
-            // @ts-expect-error
-            if (self.WorkerGlobalScope) {
-                const lepusChunkUrl = config.lepusCode[`${path}`];
-                if (lepusChunkUrl)
-                    path = lepusChunkUrl;
-                // @ts-expect-error
-                importScripts(path);
-                const entry = globalThis.module.exports;
-                return entry?.(lepusRuntime);
-            }
-            else {
-                throw new Error('importing scripts synchronously is only available for the multi-thread running mode');
-            }
-        },
-        requireModuleAsync(path, callback) {
-            const lepusChunkUrl = config.lepusCode[`${path}`];
-            if (lepusChunkUrl)
-                path = lepusChunkUrl;
-            import(
-            /* webpackIgnore: true */
-            path).catch(callback).then(() => {
-                const entry = globalThis.module.exports;
-                const ret = entry?.(lepusRuntime);
-                callback(null, ret);
-            });
-        },
         getCustomSectionSync(key) {
             return config.customSections[key]?.content;
         },

package/dist/MainThreadRuntime.d.ts

@@ -1,4 +1,4 @@
-import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type postExposureEndpoint, type LynxContextEventTarget } from '@lynx-js/web-constants';
+import { type LynxTemplate, type PageConfig, type ProcessDataCallback, type StyleInfo, type FlushElementTreeOptions, type Cloneable, type BrowserConfig, type publishEventEndpoint, type publicComponentEventEndpoint, type reportErrorEndpoint, type RpcCallType, type postExposureEndpoint, type LynxContextEventTarget, type LynxJSModule, systemInfo } from '@lynx-js/web-constants';
 import { type MainThreadLynx } from './MainThreadLynx.js';
 import type { LynxRuntimeInfo } from './elementAPI/ElementThreadElement.js';
 export interface MainThreadRuntimeCallbacks {
@@ -17,7 +17,7 @@ export interface MainThreadConfig {
     callbacks: MainThreadRuntimeCallbacks;
     styleInfo: StyleInfo;
     customSections: LynxTemplate['customSections'];
-    lepusCode: LynxTemplate['lepusCode'];
+    lepusCode: Record<string, LynxJSModule>;
     browserConfig: BrowserConfig;
     tagMap: Record<string, string>;
     docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>;
@@ -70,6 +70,7 @@ export declare class MainThreadRuntime {
      */
     __lynxGlobalBindingValues: Record<string, any>;
     get globalThis(): this;
+    SystemInfo: typeof systemInfo;
     lynx: MainThreadLynx;
     __globalProps: unknown;
     processData?: ProcessDataCallback;

package/dist/MainThreadRuntime.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 { lynxUniqueIdAttribute, } from '@lynx-js/web-constants';
+import { lynxUniqueIdAttribute, systemInfo, } from '@lynx-js/web-constants';
 import { globalMuteableVars } from '@lynx-js/web-constants';
 import { createMainThreadLynx } from './MainThreadLynx.js';
 import { initializeElementCreatingFunction } from './elementAPI/elementCreating/elementCreatingFunctions.js';
@@ -49,7 +49,7 @@ export class MainThreadRuntime {
     constructor(config) {
         this.config = config;
         this.__globalProps = config.globalProps;
-        this.lynx = createMainThreadLynx(config, this);
+        this.lynx = createMainThreadLynx(config);
         /**
          * now create the style content
          * 1. flatten the styleInfo
@@ -63,7 +63,6 @@ export class MainThreadRuntime {
         const cssInJsInfo = this.config.pageConfig.enableCSSSelector
             ? {}
             : genCssInJsInfo(this.config.styleInfo);
-        this._rootDom = this.config.docu.createElement('div');
         const cardStyleElement = this.config.docu.createElement('style');
         cardStyleElement.innerHTML = genCssContent(this.config.styleInfo, this.config.pageConfig);
         this._rootDom = this.config.docu;
@@ -74,6 +73,10 @@ export class MainThreadRuntime {
         Object.assign(this, createAttributeAndPropertyFunctions(this), domTreeApis, createEventFunctions(this), createStyleFunctions(this, cssInJsInfo), initializeElementCreatingFunction(this));
         this._ReportError = this.config.callbacks._ReportError;
         this.__OnLifecycleEvent = this.config.callbacks.__OnLifecycleEvent;
+        this.SystemInfo = {
+            ...systemInfo,
+            ...config.browserConfig,
+        };
         /**
          * Start the exposure service
          */
@@ -128,6 +131,7 @@ export class MainThreadRuntime {
     get globalThis() {
         return this;
     }
+    SystemInfo;
     lynx;
     __globalProps;
     processData;
@@ -135,18 +139,20 @@ export class MainThreadRuntime {
     _ReportError;
     __OnLifecycleEvent;
     __LoadLepusChunk = (path) => {
-        try {
-            this.lynx.requireModule(path);
+        const lepusModule = this.config.lepusCode[`${path}`];
+        if (lepusModule) {
+            const entry = lepusModule.exports;
+            entry?.(this);
             return true;
         }
-        catch {
+        else {
+            return false;
         }
-        return false;
     };
     __FlushElementTree = (_subTree, options) => {
         const timingFlags = this._timingFlags;
         this._timingFlags = [];
-        if (this._page && !this._page.parentElement) {
+        if (this._page && !this._page.parentNode) {
             this._rootDom.append(this._page);
         }
         this.config.callbacks.flushElementTree(options, timingFlags);

package/dist/crossThreadHandlers/registerCallLepusMethodHandler.d.ts

@@ -0,0 +1,3 @@
+import { type Rpc } from '@lynx-js/web-constants';
+import type { MainThreadRuntime } from '../MainThreadRuntime.js';
+export declare function registerCallLepusMethodHandler(rpc: Rpc, runtime: MainThreadRuntime): void;

package/dist/crossThreadHandlers/registerCallLepusMethodHandler.js

@@ -0,0 +1,10 @@
+// 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';
+export function registerCallLepusMethodHandler(rpc, runtime) {
+    rpc.registerHandler(callLepusMethodEndpoint, (methodName, data) => {
+        (runtime[methodName])(data);
+    });
+}
+//# sourceMappingURL=registerCallLepusMethodHandler.js.map

package/dist/crossThreadHandlers/registerGetCustomSectionHandler.d.ts

@@ -0,0 +1,2 @@
+import { type LynxTemplate, type Rpc } from '@lynx-js/web-constants';
+export declare function registerGetCustomSectionHandler(rpc: Rpc, customSections: LynxTemplate['customSections']): void;

package/dist/crossThreadHandlers/registerGetCustomSectionHandler.js

@@ -0,0 +1,10 @@
+// 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 { getCustomSectionsEndpoint, } from '@lynx-js/web-constants';
+export function registerGetCustomSectionHandler(rpc, customSections) {
+    rpc.registerHandler(getCustomSectionsEndpoint, (key) => {
+        return customSections[key]?.content;
+    });
+}
+//# sourceMappingURL=registerGetCustomSectionHandler.js.map

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

@@ -2,12 +2,12 @@ export declare function camelize(str: string): string;
 declare const cssPropertyMap: Record<number, {
     name: string;
     dashName: string;
-    defaultValue: string;
+    isX: boolean;
 }>;
 export declare function queryCSSProperty(index: number): {
     name: string;
-    defaultValue: string;
     dashName: string;
+    isX: boolean;
 };
 export declare function queryCSSPropertyNumber(name: string): number;
 export { cssPropertyMap };

package/dist/elementAPI/style/cssPropertyMap.js

@@ -15,209 +15,227 @@ export function camelize(str) {
 let index = 1;
 const cssPropertyMap = {};
 const cssPropertyReverseMap = {};
-const V = (name, defaultValue) => {
+const V = (name) => {
     const k = index++;
-    cssPropertyMap[k] = { name: camelize(name), dashName: name, defaultValue };
+    const isX = name.startsWith('-x-');
+    cssPropertyMap[k] = { name: camelize(name), dashName: name, isX };
     cssPropertyReverseMap[name] = k;
 };
-V('top', 'auto');
-V('left', 'auto');
-V('right', 'auto');
-V('bottom', 'auto');
-V('position', 'relative');
-V('box-sizing', 'auto');
-V('background-color', 'transparent');
-V('border-left-color', 'black');
-V('border-right-color', 'black');
-V('border-top-color', 'black');
-V('border-bottom-color', 'black');
-V('border-radius', '0px');
-V('border-top-left-radius', '0px');
-V('border-bottom-left-radius', '0px');
-V('border-top-right-radius', '0px');
-V('border-bottom-right-radius', '0px');
-V('border-width', '0px');
-V('border-left-width', '0px');
-V('border-right-width', '0px');
-V('border-top-width', '0px');
-V('border-bottom-width', '0px');
-V('color', 'black');
-V('opacity', '1');
-V('display', 'auto');
-V('overflow', 'hidden');
-V('height', 'auto');
-V('width', 'auto');
-V('max-width', 'auto');
-V('min-width', 'auto');
-V('max-height', 'auto');
-V('min-height', 'auto');
-V('padding', '0px');
-V('padding-left', '0px');
-V('padding-right', '0px');
-V('padding-top', '0px');
-V('padding-bottom', '0px');
-V('margin', '0px');
-V('margin-left', '0px');
-V('margin-right', '0px');
-V('margin-top', '0px');
-V('margin-bottom', '0px');
-V('white-space', 'normal');
-V('letter-spacing', '0px');
-V('text-align', 'start');
-V('line-height', '');
-V('text-overflow', 'clip');
-V('font-size', 'medium');
-V('font-weight', 'normal');
-V('flex', '0');
-V('flex-grow', '0');
-V('flex-shrink', '1');
-V('flex-basis', 'auto');
-V('flex-direction', 'row');
-V('flex-wrap', 'nowrap');
-V('align-items', 'stretch');
-V('align-self', 'stretch');
-V('align-content', 'stretch');
-V('justify-content', 'stretch');
-V('background', 'transparent, transparent');
-V('border-color', 'black');
-V('font-family', '');
-V('font-style', 'normal');
-V('transform', '');
-V('animation', '');
-V('animation-name', '');
-V('animation-duration', '');
-V('animation-timing-function', 'linear');
-V('animation-delay', '0s');
-V('animation-iteration-count', '1');
-V('animation-direction', 'normal');
-V('animation-fill-mode', 'none');
-V('animation-play-state', 'running');
-V('line-spacing', '0px');
-V('border-style', 'solid');
-V('order', '0');
-V('box-shadow', '');
-V('transform-origin', '');
-V('linear-orientation', 'vertical');
-V('linear-weight-sum', '0');
-V('linear-weight', '0');
-V('linear-gravity', 'none');
-V('linear-layout-gravity', 'none');
-V('layout-animation-create-duration', '0s');
-V('layout-animation-create-timing-function', 'linear');
-V('layout-animation-create-delay', '0s');
-V('layout-animation-create-property', 'opacity');
-V('layout-animation-delete-duration', '0s');
-V('layout-animation-delete-timing-function', 'linear');
-V('layout-animation-delete-delay', '0s');
-V('layout-animation-delete-property', 'opacity');
-V('layout-animation-update-duration', '0s');
-V('layout-animation-update-timing-function', 'linear');
-V('layout-animation-update-delay', '0s');
-V('adapt-font-size', '0');
-V('aspect-ratio', '');
-V('text-decoration', '');
-V('text-shadow', '');
-V('background-image', '');
-V('background-position', '');
-V('background-origin', 'border-box');
-V('background-repeat', 'no-repeat');
-V('background-size', '');
-V('border', '');
-V('visibility', 'visible');
-V('border-right', '');
-V('border-left', '');
-V('border-top', '');
-V('border-bottom', '');
-V('transition', '');
-V('transition-property', '');
-V('transition-duration', '');
-V('transition-delay', '');
-V('transition-timing-function', '');
-V('content', '');
-V('border-left-style', '');
-V('border-right-style', '');
-V('border-top-style', '');
-V('border-bottom-style', '');
-V('implicit-animation', 'true');
-V('overflow-x', 'hidden');
-V('overflow-y', 'hidden');
-V('word-break', 'normal');
-V('background-clip', 'border-box');
-V('outline', 'medium none black');
-V('outline-color', 'black');
-V('outline-style', 'black');
-V('outline-width', 'medium');
-V('vertical-align', 'default');
-V('caret-color', 'auto');
-V('direction', 'normal');
-V('relative-id', '-1');
-V('relative-align-top', '-1');
-V('relative-align-right', '-1');
-V('relative-align-bottom', '-1');
-V('relative-align-left', '-1');
-V('relative-top-of', '-1');
-V('relative-right-of', '-1');
-V('relative-bottom-of', '-1');
-V('relative-left-of', '-1');
-V('relative-layout-once', 'true');
-V('relative-center', 'none');
-V('enter-transition-name', '');
-V('exit-transition-name', '');
-V('pause-transition-name', '');
-V('resume-transition-name', '');
-V('flex-flow', 'row nowrap');
-V('z-index', '0');
-V('text-decoration-color', 'black');
-V('linear-cross-gravity', 'none');
-V('margin-inline-start', '0px');
-V('margin-inline-end', '0px');
-V('padding-inline-start', '0px');
-V('padding-inline-end', '0px');
-V('border-inline-start-color', 'black');
-V('border-inline-end-color', 'black');
-V('border-inline-start-width', '0px');
-V('border-inline-end-width', '0px');
-V('border-inline-start-style', '');
-V('border-inline-end-style', '');
-V('border-start-start-radius', '0px');
-V('border-end-start-radius', '0px');
-V('border-start-end-radius', '0px');
-V('border-end-end-radius', '0px');
-V('relative-align-inline-start', '-1');
-V('relative-align-inline-end', '-1');
-V('relative-inline-start-of', '-1');
-V('relative-inline-end-of', '-1');
-V('inset-inline-start', '0px');
-V('inset-inline-end', '0px');
-V('mask-image', '');
-V('grid-template-columns', '');
-V('grid-template-rows', '');
-V('grid-auto-columns', '');
-V('grid-auto-rows', '');
-V('grid-column-span', '');
-V('grid-row-span', '');
-V('grid-column-start', '');
-V('grid-column-end', '');
-V('grid-row-start', '');
-V('grid-row-end', '');
-V('grid-column-gap', '');
-V('grid-row-gap', '');
-V('justify-items', 'stretch');
-V('justify-self', 'auto');
-V('grid-auto-flow', 'row');
-V('filter', '');
-V('list-main-axis-gap', '0px');
-V('list-cross-axis-gap', '0px');
-V('linear-direction', 'column');
-V('perspective', 'none');
-V('cursor', 'default');
-V('text-indent', '0px');
-V('clip-path', '');
-V('text-stroke', '0px transparent');
-V('text-stroke-width', '0px');
-V('text-stroke-color', 'transparent');
-V('-x-auto-font-size', 'false');
-V('-x-auto-font-size-preset-sizes', '');
+V('top');
+V('left');
+V('right');
+V('bottom');
+V('position');
+V('box-sizing');
+V('background-color');
+V('border-left-color');
+V('border-right-color');
+V('border-top-color');
+V('border-bottom-color');
+V('border-radius');
+V('border-top-left-radius');
+V('border-bottom-left-radius');
+V('border-top-right-radius');
+V('border-bottom-right-radius');
+V('border-width');
+V('border-left-width');
+V('border-right-width');
+V('border-top-width');
+V('border-bottom-width');
+V('color');
+V('opacity');
+V('display');
+V('overflow');
+V('height');
+V('width');
+V('max-width');
+V('min-width');
+V('max-height');
+V('min-height');
+V('padding');
+V('padding-left');
+V('padding-right');
+V('padding-top');
+V('padding-bottom');
+V('margin');
+V('margin-left');
+V('margin-right');
+V('margin-top');
+V('margin-bottom');
+V('white-space');
+V('letter-spacing');
+V('text-align');
+V('line-height');
+V('text-overflow');
+V('font-size');
+V('font-weight');
+V('flex');
+V('flex-grow');
+V('flex-shrink');
+V('flex-basis');
+V('flex-direction');
+V('flex-wrap');
+V('align-items');
+V('align-self');
+V('align-content');
+V('justify-content');
+V('background');
+V('border-color');
+V('font-family');
+V('font-style');
+V('transform');
+V('animation');
+V('animation-name');
+V('animation-duration');
+V('animation-timing-function');
+V('animation-delay');
+V('animation-iteration-count');
+V('animation-direction');
+V('animation-fill-mode');
+V('animation-play-state');
+V('line-spacing');
+V('border-style');
+V('order');
+V('box-shadow');
+V('transform-origin');
+V('linear-orientation');
+V('linear-weight-sum');
+V('linear-weight');
+V('linear-gravity');
+V('linear-layout-gravity');
+V('layout-animation-create-duration');
+V('layout-animation-create-timing-function');
+V('layout-animation-create-delay');
+V('layout-animation-create-property');
+V('layout-animation-delete-duration');
+V('layout-animation-delete-timing-function');
+V('layout-animation-delete-delay');
+V('layout-animation-delete-property');
+V('layout-animation-update-duration');
+V('layout-animation-update-timing-function');
+V('layout-animation-update-delay');
+V('adapt-font-size');
+V('aspect-ratio');
+V('text-decoration');
+V('text-shadow');
+V('background-image');
+V('background-position');
+V('background-origin');
+V('background-repeat');
+V('background-size');
+V('border');
+V('visibility');
+V('border-right');
+V('border-left');
+V('border-top');
+V('border-bottom');
+V('transition');
+V('transition-property');
+V('transition-duration');
+V('transition-delay');
+V('transition-timing-function');
+V('content');
+V('border-left-style');
+V('border-right-style');
+V('border-top-style');
+V('border-bottom-style');
+V('implicit-animation');
+V('overflow-x');
+V('overflow-y');
+V('word-break');
+V('background-clip');
+V('outline');
+V('outline-color');
+V('outline-style');
+V('outline-width');
+V('vertical-align');
+V('caret-color');
+V('direction');
+V('relative-id');
+V('relative-align-top');
+V('relative-align-right');
+V('relative-align-bottom');
+V('relative-align-left');
+V('relative-top-of');
+V('relative-right-of');
+V('relative-bottom-of');
+V('relative-left-of');
+V('relative-layout-once');
+V('relative-center');
+V('enter-transition-name');
+V('exit-transition-name');
+V('pause-transition-name');
+V('resume-transition-name');
+V('flex-flow');
+V('z-index');
+V('text-decoration-color');
+V('linear-cross-gravity');
+V('margin-inline-start');
+V('margin-inline-end');
+V('padding-inline-start');
+V('padding-inline-end');
+V('border-inline-start-color');
+V('border-inline-end-color');
+V('border-inline-start-width');
+V('border-inline-end-width');
+V('border-inline-start-style');
+V('border-inline-end-style');
+V('border-start-start-radius');
+V('border-end-start-radius');
+V('border-start-end-radius');
+V('border-end-end-radius');
+V('relative-align-inline-start');
+V('relative-align-inline-end');
+V('relative-inline-start-of');
+V('relative-inline-end-of');
+V('inset-inline-start');
+V('inset-inline-end');
+V('mask-image');
+V('grid-template-columns');
+V('grid-template-rows');
+V('grid-auto-columns');
+V('grid-auto-rows');
+V('grid-column-span');
+V('grid-row-span');
+V('grid-column-start');
+V('grid-column-end');
+V('grid-row-start');
+V('grid-row-end');
+V('grid-column-gap');
+V('grid-row-gap');
+V('justify-items');
+V('justify-self');
+V('grid-auto-flow');
+V('filter');
+V('list-main-axis-gap');
+V('list-cross-axis-gap');
+V('linear-direction');
+V('perspective');
+V('cursor');
+V('text-indent');
+V('clip-path');
+V('text-stroke');
+V('text-stroke-width');
+V('text-stroke-color');
+V('-x-auto-font-size');
+V('-x-auto-font-size-preset-sizes');
+V('mask');
+V('mask-repeat');
+V('mask-position');
+V('mask-clip');
+V('mask-origin');
+V('mask-size');
+V('gap');
+V('column-gap');
+V('row-gap');
+V('image-rendering');
+V('hyphens');
+V('-x-app-region');
+V('-x-animation-color-interpolation');
+V('-x-handle-color');
+V('-x-handle-size');
+V('offset-path');
+V('offset-distance');
 export function queryCSSProperty(index) {
     return cssPropertyMap[index];
 }

package/dist/elementAPI/style/styleFunctions.js

@@ -32,7 +32,11 @@ export function createStyleFunctions(runtime, cssInJsInfo) {
     function __AddInlineStyle(element, key, value) {
         let dashName;
         if (typeof key === 'number') {
-            dashName = queryCSSProperty(key).dashName;
+            const queryResult = queryCSSProperty(key);
+            dashName = queryResult.dashName;
+            if (queryResult.isX) {
+                console.error(`[lynx-web] css property: ${dashName} is not supported.`);
+            }
         }
         else {
             dashName = key;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,5 +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 * from './MainThreadRuntime.js';
 //# sourceMappingURL=index.js.map

package/dist/loadMainThread.d.ts

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

package/dist/loadMainThread.js

@@ -0,0 +1,120 @@
+// 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 { BackgroundThreadStartEndpoint, publishEventEndpoint, publicComponentEventEndpoint, postExposureEndpoint, switchExposureServiceEndpoint, postTimingFlagsEndpoint, dispatchCoreContextOnBackgroundEndpoint, dispatchJSContextOnMainThreadEndpoint, LynxCrossThreadContext, } from '@lynx-js/web-constants';
+import { registerCallLepusMethodHandler } from './crossThreadHandlers/registerCallLepusMethodHandler.js';
+import { registerGetCustomSectionHandler } from './crossThreadHandlers/registerGetCustomSectionHandler.js';
+import { MainThreadRuntime, switchExposureService, } from './MainThreadRuntime.js';
+const moduleCache = {};
+export function loadMainThread(backgroundThreadRpc, docu, commitDocument, markTimingInternal, reportError) {
+    const postTimingFlags = backgroundThreadRpc.createCall(postTimingFlagsEndpoint);
+    const backgroundStart = backgroundThreadRpc.createCall(BackgroundThreadStartEndpoint);
+    const publishEvent = backgroundThreadRpc.createCall(publishEventEndpoint);
+    const publicComponentEvent = backgroundThreadRpc.createCall(publicComponentEventEndpoint);
+    const postExposure = backgroundThreadRpc.createCall(postExposureEndpoint);
+    markTimingInternal('lepus_execute_start');
+    async function startMainThread(config) {
+        let isFp = true;
+        const { globalProps, template, browserConfig, nativeModulesMap, napiModulesMap, tagMap, } = config;
+        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];
+            if (cachedModule) {
+                return [name, cachedModule];
+            }
+            else {
+                Object.assign(globalThis, { module: {} });
+                await import(/* webpackIgnore: true */ url);
+                const module = globalThis.module;
+                Object.assign(globalThis, { module: {} });
+                moduleCache[name] = module;
+                return [name, module];
+            }
+        }));
+        const lepusCodeLoaded = Object.fromEntries(lepusCodeEntries);
+        const entry = lepusCodeLoaded['root'].exports;
+        const jsContext = new LynxCrossThreadContext({
+            rpc: backgroundThreadRpc,
+            receiveEventEndpoint: dispatchJSContextOnMainThreadEndpoint,
+            sendEventEndpoint: dispatchCoreContextOnBackgroundEndpoint,
+        });
+        const runtime = new MainThreadRuntime({
+            jsContext,
+            tagMap,
+            browserConfig,
+            customSections,
+            globalProps,
+            pageConfig,
+            styleInfo,
+            lepusCode: lepusCodeLoaded,
+            docu,
+            callbacks: {
+                mainChunkReady: () => {
+                    markTimingInternal('data_processor_start');
+                    const initData = runtime.processData
+                        ? runtime.processData(config.initData)
+                        : config.initData;
+                    markTimingInternal('data_processor_end');
+                    registerCallLepusMethodHandler(backgroundThreadRpc, runtime);
+                    registerGetCustomSectionHandler(backgroundThreadRpc, customSections);
+                    backgroundThreadRpc.registerHandler(switchExposureServiceEndpoint, runtime[switchExposureService]);
+                    backgroundStart({
+                        initData,
+                        globalProps,
+                        template,
+                        cardType: cardType ?? 'react',
+                        customSections: Object.fromEntries(Object.entries(customSections).filter(([, value]) => value.type !== 'lazy').map(([k, v]) => [k, v.content])),
+                        nativeModulesMap,
+                        napiModulesMap,
+                        browserConfig,
+                    });
+                    runtime.renderPage(initData);
+                    runtime.__FlushElementTree(undefined, {});
+                },
+                flushElementTree: async (options, timingFlags) => {
+                    const pipelineId = options?.pipelineOptions?.pipelineID;
+                    markTimingInternal('dispatch_start', pipelineId);
+                    if (isFp) {
+                        isFp = false;
+                        jsContext.dispatchEvent({
+                            type: '__OnNativeAppReady',
+                            data: undefined,
+                        });
+                    }
+                    markTimingInternal('layout_start', pipelineId);
+                    markTimingInternal('ui_operation_flush_start', pipelineId);
+                    await commitDocument();
+                    markTimingInternal('ui_operation_flush_end', pipelineId);
+                    markTimingInternal('layout_end', pipelineId);
+                    markTimingInternal('dispatch_end', pipelineId);
+                    requestAnimationFrame(() => {
+                        postTimingFlags(timingFlags, pipelineId);
+                    });
+                },
+                _ReportError: reportError,
+                __OnLifecycleEvent: (data) => {
+                    jsContext.dispatchEvent({
+                        type: '__OnLifecycleEvent',
+                        data,
+                    });
+                },
+                /**
+                 * Note :
+                 * The parameter of lynx.performance.markTiming is (pipelineId:string, timingFlag:string)=>void
+                 * But our markTimingInternal is (timingFlag:string, pipelineId?:string, timeStamp?:number) => void
+                 */
+                markTiming: (a, b) => markTimingInternal(b, a),
+                publishEvent,
+                publicComponentEvent,
+                postExposure,
+            },
+        }).globalThis;
+        markTimingInternal('decode_end');
+        entry(runtime);
+        jsContext.__start(); // start the jsContext after the runtime is created
+        return runtime;
+    }
+    return { startMainThread };
+}
+//# sourceMappingURL=loadMainThread.js.map

package/dist/utils/createCrossThreadEvent.js

@@ -1,10 +1,23 @@
 import { elementToRuntimeInfoMap, } from '../MainThreadRuntime.js';
+function toCloneableObject(obj) {
+    const cloneableObj = {};
+    for (const key in obj) {
+        const value = obj[key];
+        if (typeof value === 'boolean' || typeof value === 'number'
+            || typeof value === 'string' || value === null) {
+            cloneableObj[key] = value;
+        }
+    }
+    return cloneableObj;
+}
 export function createCrossThreadEvent(runtime, domEvent, eventName) {
     const targetElement = domEvent.target;
     const currentTargetElement = domEvent
         .currentTarget;
     const type = domEvent.type;
     const params = {};
+    const isTrusted = domEvent.isTrusted;
+    const otherProperties = {};
     if (type.match(/^transition/)) {
         Object.assign(params, {
             'animation_type': 'keyframe-animation',
@@ -19,6 +32,21 @@ export function createCrossThreadEvent(runtime, domEvent, eventName) {
             new_animator: true, // we support the new_animator only
         });
     }
+    else if (type.startsWith('touch')) {
+        const touchEvent = domEvent;
+        const touch = [...touchEvent.touches];
+        const targetTouches = [...touchEvent.targetTouches];
+        const changedTouches = [...touchEvent.changedTouches];
+        Object.assign(otherProperties, {
+            touches: isTrusted ? touch.map(toCloneableObject) : touch,
+            targetTouches: isTrusted
+                ? targetTouches.map(toCloneableObject)
+                : targetTouches,
+            changedTouches: isTrusted
+                ? changedTouches.map(toCloneableObject)
+                : changedTouches,
+        });
+    }
     const targetElementRuntimeInfo = runtime[elementToRuntimeInfoMap].get(targetElement);
     const currentTargetElementRuntimeInfo = runtime[elementToRuntimeInfoMap].get(currentTargetElement);
     return {
@@ -39,6 +67,7 @@ export function createCrossThreadEvent(runtime, domEvent, eventName) {
         // @ts-expect-error
         detail: domEvent.detail ?? {},
         params,
+        ...otherProperties,
     };
 }
 //# sourceMappingURL=createCrossThreadEvent.js.map

package/dist/utils/processStyleInfo.js

@@ -34,11 +34,9 @@ export function transformToWebCss(styleInfo) {
             rule.decl = transformedStyle;
             if (childStyle.length > 0) {
                 cssInfos.rules.push({
-                    sel: selectors.map(selector => [
-                        selector[0].concat(['>', '*']),
-                        selector[1],
-                        selector[2],
-                    ]),
+                    sel: selectors.map(selector => selector.toSpliced(-2, 1, 
+                    /* replace the last combinator and insert at the end */
+                    ['>'], ['*'], [], [], [])),
                     decl: childStyle,
                 });
             }
@@ -50,7 +48,7 @@ export function transformToWebCss(styleInfo) {
  */
 export function genCssContent(styleInfo, pageConfig) {
     function getExtraSelectors(cssId) {
-        let prepend = '', suffix = '';
+        let suffix = '';
         if (!pageConfig.enableRemoveCSSScope) {
             if (cssId !== undefined) {
                 suffix += `[${cssIdAttribute}="${cssId}"]`;
@@ -63,21 +61,16 @@ export function genCssContent(styleInfo, pageConfig) {
         else {
             suffix += `[${lynxTagAttribute}]`;
         }
-        return { prepend, suffix };
+        return suffix;
     }
     const finalCssContent = [];
     for (const [cssId, cssInfos] of Object.entries(styleInfo)) {
-        const { prepend, suffix } = getExtraSelectors(cssId);
+        const suffix = getExtraSelectors(cssId);
         const declarationContent = cssInfos.rules.map((rule) => {
-            const { sel: selectors, decl: declarations } = rule;
-            const selectorString = selectors.map(([plainSelectors, pseudoClassSelectors, pseudoElementSelectors]) => {
-                return [
-                    prepend,
-                    plainSelectors.join(''),
-                    suffix,
-                    pseudoClassSelectors.join(''),
-                    pseudoElementSelectors.join(''),
-                ].join('');
+            const { sel: selectorList, decl: declarations } = rule;
+            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+            const selectorString = selectorList.map((selectors) => {
+                return selectors.toSpliced(-4, 0, [suffix]).join('');
             }).join(',');
             const declarationString = declarations.map(([k, v]) => `${k}:${v};`).join('');
             return `${selectorString}{${declarationString}}`;
@@ -94,10 +87,13 @@ export function genCssInJsInfo(styleInfo) {
         const oneCssInJsInfo = {};
         cssInfos.rules = cssInfos.rules.filter(oneCssInfo => {
             oneCssInfo.sel = oneCssInfo.sel.filter(selectorList => {
-                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors] = selectorList;
-                if (classSelectors.length === 1 && classSelectors[0][0] === '.'
+                const [classSelectors, pseudoClassSelectors, pseudoElementSelectors, combinator,] = selectorList;
+                if (
+                // only one class selector
+                classSelectors.length === 1 && classSelectors[0][0] === '.'
                     && pseudoClassSelectors.length === 0
-                    && pseudoElementSelectors.length === 0) {
+                    && pseudoElementSelectors.length === 0
+                    && combinator.length === 0) {
                     const selectorName = classSelectors[0].substring(1);
                     const currentDeclarations = oneCssInJsInfo[selectorName];
                     if (currentDeclarations) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-mainthread-apis",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "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.12.0",
+    "@lynx-js/web-constants": "0.13.1",
     "@lynx-js/web-style-transformer": "0.3.0"
   }
 }