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

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @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

package/dist/MainThreadRuntime.js

@@ -75,7 +75,7 @@ export class MainThreadRuntime {
         this.__OnLifecycleEvent = this.config.callbacks.__OnLifecycleEvent;
         this.SystemInfo = {
             ...systemInfo,
-            pixelRatio: config.browserConfig.pixelRatio,
+            ...config.browserConfig,
         };
         /**
          * Start the exposure service

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/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/package.json

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