@lynx-js/web-elements 0.7.6 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @lynx-js/web-elements
 
+## 0.8.0
+
+### Minor Changes
+
+- refactor: move exposure system to web-core ([#1254](https://github.com/lynx-family/lynx-stack/pull/1254))
+
+  **THIS IS A BREAKING CHANGE**
+
+  **You'll need to upgrade your @lynx-js/web-elements to >= 0.8.0**
+
+  For SSR and better performance, we moved the lynx's exposure system from web-element to web-core.
+
+  Before this commit, we create Intersection observers by creating HTMLElements.
+
+  After this commit, we will create such Intersection observers after dom stabled.
+
+  Also, the setInterval for exposure has been removed, now we use an on time lazy timer for such features.
+
+### Patch Changes
+
+- feat: add support for scrollTo method in x-swiper, remove scrollToNext && scrollToPrevious method ([#1197](https://github.com/lynx-family/lynx-stack/pull/1197))
+
+- refactor: improve `linear-weight-sum` performance ([#1216](https://github.com/lynx-family/lynx-stack/pull/1216))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.8.0
+
+## 0.7.7
+
+### Patch Changes
+
+- fix: the param `index` of list scrollToPosition function should be `position`. ([#1135](https://github.com/lynx-family/lynx-stack/pull/1135))
+
+- fix: in lynx-view all-on-ui mode, the input event of input and textarea is triggered twice, and the first e.detail is a string, which does not conform to the expected data format. ([#1179](https://github.com/lynx-family/lynx-stack/pull/1179))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.7.7
+
 ## 0.7.6
 
 ### Patch Changes

package/dist/XAudioTT/utils.d.ts

@@ -8,7 +8,7 @@ export declare const audioPlaybackStateMap: Record<string, {
     code: number;
     type: string;
 }>;
-export declare const getAudioState: (audioElement: HTMLAudioElement) => 0 | 2 | 1 | -1 | 3;
+export declare const getAudioState: (audioElement: HTMLAudioElement) => 0 | 1 | 2 | 3 | -1;
 export declare const enum XAudioErrorCode {
     SrcError = -1,
     SrcJsonError = -2,

package/dist/XInput/XInputEvents.js

@@ -19,7 +19,7 @@ let XInputEvents = (() => {
     return class XInputEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableInputEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('input')];
+            _private_handleEnableInputEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
             _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
             __esDecorate(this, _private_handleEnableInputEvent_descriptor = { value: __setFunctionName(function (status) {
@@ -74,7 +74,7 @@ let XInputEvents = (() => {
             input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
                 return;
-            this.#dom.dispatchEvent(new CustomEvent('input', {
+            this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                 ...commonComponentEventSetting,
                 detail: {
                     value: filterValue,
@@ -97,7 +97,7 @@ let XInputEvents = (() => {
             input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
-                this.#dom.dispatchEvent(new CustomEvent('input', {
+                this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                     ...commonComponentEventSetting,
                     detail: {
                         value: filterValue,

package/dist/XList/XList.d.ts

@@ -8,7 +8,7 @@ export declare class XList extends HTMLElement {
     get __scrollTop(): number;
     get __scrollLeft(): number;
     scrollToPosition(params: {
-        index: number;
+        position: number;
         smooth?: boolean;
         /**
          * @description The offset of the content

package/dist/XList/XList.js

@@ -61,13 +61,13 @@ let XList = (() => {
             else if (typeof params.offset === 'number') {
                 offset = { left: params.offset, top: params.offset };
             }
-            if (typeof params.index === 'number') {
-                if (params.index === 0) {
+            if (typeof params.position === 'number') {
+                if (params.position === 0) {
                     this.#getListContainer().scrollTop = 0;
                     this.#getListContainer().scrollLeft = 0;
                 }
-                else if (params.index > 0 && params.index < this.childElementCount) {
-                    const targetKid = this.children.item(params.index);
+                else if (params.position > 0 && params.position < this.childElementCount) {
+                    const targetKid = this.children.item(params.position);
                     if (targetKid instanceof HTMLElement) {
                         if (offset) {
                             offset = {

package/dist/XList/XListAttributes.js

@@ -37,7 +37,7 @@ let XListAttributes = (() => {
         connectedCallback() {
             const initialScrollIndex = this.#dom.getAttribute('initial-scroll-index');
             if (initialScrollIndex !== null) {
-                const index = parseFloat(initialScrollIndex);
+                const position = parseFloat(initialScrollIndex);
                 const scrollToInitialIndex = () => {
                     if (this.#dom.clientHeight === 0) {
                         // In Safari, there is the potential race condition between the browser's layout and clientWidth calculate.
@@ -45,7 +45,7 @@ let XListAttributes = (() => {
                         requestAnimationFrame(scrollToInitialIndex);
                     }
                     else {
-                        this.#dom.scrollToPosition({ index });
+                        this.#dom.scrollToPosition({ position });
                     }
                 };
                 // The reason for using microtasks is that the width and height of the child element may not be rendered at this time, so it will not be able to scroll.

package/dist/XSwiper/XSwiper.d.ts

@@ -7,8 +7,19 @@ export declare class XSwiper extends HTMLElement {
     get snapDistance(): number;
     get isVertical(): boolean;
     get circularPlay(): boolean;
-    scrollToNext(): void;
-    scrollToPrevious(): void;
+    scrollTo(options: {
+        /**
+         * @description target index
+         */
+        index: number;
+        /**
+         * @description Whether there is switching animation
+         * @defaultValue true
+         */
+        smooth?: boolean;
+    }): void;
+    scrollTo(options?: ScrollToOptions | undefined): void;
+    scrollTo(x: number, y: number): void;
     connectedCallback(): void;
     get [scrollContainerDom](): this;
 }

package/dist/XSwiper/XSwiper.js

@@ -140,31 +140,18 @@ let XSwiper = (() => {
         get circularPlay() {
             return this.getAttribute('circular') !== null;
         }
-        scrollToNext() {
-            const current = this.currentIndex;
-            const count = this.childElementCount;
-            if (current === count - 1) {
-                const circularPlay = this.circularPlay;
-                if (circularPlay) {
-                    this.currentIndex = 0;
+        scrollTo(...args) {
+            // Check if the first argument has an index property (custom usage)
+            if (args.length > 0 && typeof args[0] === 'object' && args[0] !== null
+                && 'index' in args[0]) {
+                const { index, smooth = true } = args[0];
+                if (typeof index === 'number') {
+                    this.#scrollToIndex(index, smooth ? 'smooth' : 'instant');
+                    return;
                 }
             }
-            else {
-                this.currentIndex += 1;
-            }
-        }
-        scrollToPrevious() {
-            const current = this.currentIndex;
-            const count = this.childElementCount;
-            if (current === 0) {
-                const circularPlay = this.circularPlay;
-                if (circularPlay) {
-                    this.currentIndex = count - 1;
-                }
-            }
-            else {
-                this.currentIndex = count - 1;
-            }
+            // Fall back to standard HTML scrollTo behavior
+            super.scrollTo(...args);
         }
         connectedCallback() {
             const current = this.getAttribute('current');

package/dist/XSwiper/XSwiperAutoScroll.js

@@ -39,10 +39,23 @@ let XSwiperAutoScroll = (() => {
         constructor(dom) {
             this.#dom = dom;
         }
+        #scrollToNext() {
+            const current = this.#dom.currentIndex;
+            const count = this.#dom.childElementCount;
+            if (current === count - 1) {
+                const circularPlay = this.#dom.circularPlay;
+                if (circularPlay) {
+                    this.#dom.currentIndex = 0;
+                }
+            }
+            else {
+                this.#dom.currentIndex += 1;
+            }
+        }
         get #handleCurrentChange() { return _private_handleCurrentChange_descriptor.value; }
         #autoPlayTimer;
         #autoPlayTick = (() => {
-            this.#dom.scrollToNext();
+            this.#scrollToNext();
         }).bind(this);
         #startAutoplay(interval) {
             this.#stopAutoplay();

package/dist/XTextarea/XTextareaEvents.js

@@ -19,7 +19,7 @@ let XTextareaEvents = (() => {
     return class XTextareaEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('input')];
+            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
             _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
             __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
@@ -74,7 +74,7 @@ let XTextareaEvents = (() => {
             input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
                 return;
-            this.#dom.dispatchEvent(new CustomEvent('input', {
+            this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                 ...commonComponentEventSetting,
                 detail: {
                     value: filterValue,
@@ -97,7 +97,7 @@ let XTextareaEvents = (() => {
             input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
-                this.#dom.dispatchEvent(new CustomEvent('input', {
+                this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                     ...commonComponentEventSetting,
                     detail: {
                         value: filterValue,

package/dist/common/CommonEventsAndMethods.d.ts

@@ -1,35 +1,9 @@
 export declare const layoutChangeTarget: unique symbol;
-export interface ExposureParameters {
-    exposureID: string | null;
-    exposureArea: string | null;
-    exposureScene: string | null;
-    exposureScreenMarginTop: string | null;
-    exposureScreenMarginRight: string | null;
-    exposureScreenMarginBottom: string | null;
-    exposureScreenMarginLeft: string | null;
-    exposureUIMarginTop: string | null;
-    exposureUIMarginRight: string | null;
-    exposureUIMarginBottom: string | null;
-    exposureUIMarginLeft: string | null;
-}
-export interface ExposureEvent {
-    'exposure-id': string;
-    'exposure-scene': string;
-    exposureID: string;
-    exposureScene: string;
-}
 export declare class CommonEventsAndMethods {
     #private;
-    static readonly observedAttributes: string[];
+    static readonly observedAttributes: never[];
     constructor(currentElement: HTMLElement & {
         [layoutChangeTarget]?: HTMLElement;
     });
-    onExposureParamsChanged: () => void;
-    onExposureIdChanged(_: string | null, oldValue: string | null): void;
-    attributeChangedHandler: this;
-    eventStatusChangedHandler: {
-        uiappear: (status: boolean) => void;
-        uidisappear: (status: boolean) => void;
-    };
     __handleScrollUpperThresholdEventEnabled: (enabled: boolean) => void;
 }

package/dist/common/CommonEventsAndMethods.js

@@ -2,9 +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.
 import { __esDecorate, __runInitializers } from "tslib";
-import { convertLengthToPx } from './convertLengthToPx.js';
 import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
-import { scrollContainerDom } from './constants.js';
 import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 export const layoutChangeTarget = Symbol('layoutChangeTarget');
 let CommonEventsAndMethods = (() => {
@@ -18,194 +16,12 @@ let CommonEventsAndMethods = (() => {
             __esDecorate(null, null, ___handleScrollUpperThresholdEventEnabled_decorators, { kind: "field", name: "__handleScrollUpperThresholdEventEnabled", static: false, private: false, access: { has: obj => "__handleScrollUpperThresholdEventEnabled" in obj, get: obj => obj.__handleScrollUpperThresholdEventEnabled, set: (obj, value) => { obj.__handleScrollUpperThresholdEventEnabled = value; } }, metadata: _metadata }, ___handleScrollUpperThresholdEventEnabled_initializers, ___handleScrollUpperThresholdEventEnabled_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = [
-            'exposure-id',
-            'exposure-area',
-            'exposure-screen-margin-top',
-            'exposure-screen-margin-right',
-            'exposure-screen-margin-bottom',
-            'exposure-screen-margin-left',
-            'exposure-ui-margin-top',
-            'exposure-ui-margin-right',
-            'exposure-ui-margin-bottom',
-            'exposure-ui-margin-left',
-        ];
-        #uiAppearEnabled = false;
-        #uiDisappearEnabled = false;
+        static observedAttributes = [];
         #dom;
-        /**
-         * Stores a promise. We will handler the exposure attribute change after all related life-cycle events has been fired by browser.
-         */
-        #afterAttributeChanged;
-        /**
-         * If this dom is already exposured
-         */
-        #exposureTriggered = false;
-        /**
-         * keeps the observer of current dom
-         */
-        #exposureObserver;
-        get #exposureEnabled() {
-            return (this.#uiAppearEnabled
-                || this.#uiDisappearEnabled
-                || this.#dom.getAttribute('exposure-id') !== null);
-        }
         constructor(currentElement) {
             __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_extraInitializers);
             this.#dom = currentElement;
         }
-        onExposureParamsChanged = () => {
-            if (!this.#afterAttributeChanged) {
-                this.#afterAttributeChanged = Promise.resolve().then(() => {
-                    this.#updateExposure();
-                    this.#afterAttributeChanged = undefined;
-                });
-            }
-        };
-        onExposureIdChanged(_, oldValue) {
-            if (oldValue) {
-                if (this.#exposureEnabled) {
-                    this.#sendOneExposureEvent({ isIntersecting: false }, oldValue);
-                }
-            }
-            this.onExposureParamsChanged();
-        }
-        attributeChangedHandler = new Proxy(this, {
-            get(target, attribute) {
-                if (CommonEventsAndMethods.observedAttributes.includes(attribute)) {
-                    if (attribute === 'exposure-id') {
-                        return { handler: target.onExposureIdChanged, noDomMeasure: true };
-                    }
-                    else {
-                        return {
-                            handler: target.onExposureParamsChanged,
-                            noDomMeasure: true,
-                        };
-                    }
-                }
-                return;
-            },
-        });
-        eventStatusChangedHandler = {
-            'uiappear': (status) => {
-                this.#uiAppearEnabled = status;
-                this.onExposureParamsChanged();
-            },
-            'uidisappear': (status) => {
-                this.#uiDisappearEnabled = status;
-                this.onExposureParamsChanged();
-            },
-        };
-        #updateExposure() {
-            const newParams = {
-                exposureID: this.#dom.getAttribute('exposure-id'),
-                exposureArea: this.#dom.getAttribute('exposure-area'),
-                exposureScene: this.#dom.getAttribute('exposure-scene'),
-                exposureScreenMarginTop: this.#dom.getAttribute('exposure-screen-margin-top'),
-                exposureScreenMarginRight: this.#dom.getAttribute('exposure-screen-margin-right'),
-                exposureScreenMarginBottom: this.#dom.getAttribute('exposure-screen-margin-bottom'),
-                exposureScreenMarginLeft: this.#dom.getAttribute('exposure-screen-margin-left'),
-                exposureUIMarginTop: this.#dom.getAttribute('exposure-ui-margin-top'),
-                exposureUIMarginRight: this.#dom.getAttribute('exposure-ui-margin-right'),
-                exposureUIMarginBottom: this.#dom.getAttribute('exposure-ui-margin-bottom'),
-                exposureUIMarginLeft: this.#dom.getAttribute('exposure-ui-margin-left'),
-            };
-            if (this.#exposureEnabled) {
-                if (IntersectionObserver) {
-                    const uiMargin = {
-                        top: convertLengthToPx(this.#dom, newParams.exposureUIMarginTop),
-                        right: convertLengthToPx(this.#dom, newParams.exposureUIMarginRight, true),
-                        bottom: convertLengthToPx(this.#dom, newParams.exposureUIMarginBottom),
-                        left: convertLengthToPx(this.#dom, newParams.exposureUIMarginLeft, true),
-                    };
-                    const screenMargin = {
-                        top: convertLengthToPx(this.#dom, newParams.exposureScreenMarginTop),
-                        right: convertLengthToPx(this.#dom, newParams.exposureScreenMarginRight, true),
-                        bottom: convertLengthToPx(this.#dom, newParams.exposureScreenMarginBottom),
-                        left: convertLengthToPx(this.#dom, newParams.exposureScreenMarginLeft, true),
-                    };
-                    /**
-                     * TODO: @haoyang.wang support the switch `enableExposureUIMargin`
-                     */
-                    const calcedRootMargin = {
-                        top: (uiMargin.bottom ? -1 : 1)
-                            * (screenMargin.top - uiMargin.bottom),
-                        right: (uiMargin.left ? -1 : 1)
-                            * (screenMargin.right - uiMargin.left),
-                        bottom: (uiMargin.top ? -1 : 1)
-                            * (screenMargin.bottom - uiMargin.top),
-                        left: (uiMargin.right ? -1 : 1)
-                            * (screenMargin.left - uiMargin.right),
-                    };
-                    const exposureArea = this.#dom.getAttribute('exposure-area');
-                    const rootMargin = `${calcedRootMargin.top}px ${calcedRootMargin.right}px ${calcedRootMargin.bottom}px ${calcedRootMargin.left}px`;
-                    const threshold = exposureArea ? parseFloat(exposureArea) / 100 : 0;
-                    if (this.#exposureObserver) {
-                        this.#exposureObserver.disconnect();
-                    }
-                    /**
-                     * Get the closest scrollable ancestor
-                     */
-                    let root = this.#dom.parentElement;
-                    while (root) {
-                        // @ts-expect-error
-                        if (root[scrollContainerDom]) {
-                            // @ts-expect-error
-                            root = root[scrollContainerDom];
-                            break;
-                        }
-                        else {
-                            root = root.parentElement;
-                        }
-                    }
-                    this.#exposureTriggered = false;
-                    this.#exposureObserver = new IntersectionObserver(([entry]) => {
-                        if (entry) {
-                            if (entry.isIntersecting) {
-                                this.#exposureTriggered = true;
-                            }
-                            this.#sendOneExposureEvent(entry);
-                        }
-                    }, {
-                        rootMargin,
-                        threshold,
-                        root,
-                    });
-                    this.#exposureObserver.observe(this.#dom);
-                }
-            }
-            else {
-                this.#disableExposure();
-            }
-        }
-        #sendOneExposureEvent(entry, overrideExposureId) {
-            if (!this.#exposureTriggered) {
-                return;
-            }
-            const exposureID = overrideExposureId
-                ?? this.#dom.getAttribute('exposure-id') ?? '';
-            const exposureScene = this.#dom.getAttribute('exposure-scene')
-                ?? '';
-            const detail = {
-                'exposure-id': exposureID,
-                'exposure-scene': exposureScene,
-                exposureID,
-                exposureScene,
-            };
-            const appearEvent = new CustomEvent(entry.isIntersecting ? 'uiappear' : 'uidisappear', {
-                ...commonComponentEventSetting,
-                detail,
-            });
-            const exposureEvent = new CustomEvent(entry.isIntersecting ? 'exposure' : 'disexposure', {
-                bubbles: true,
-                composed: false,
-                cancelable: false,
-                detail,
-            });
-            Object.assign(appearEvent, detail);
-            this.#dom.dispatchEvent(appearEvent);
-            this.#dom.dispatchEvent(exposureEvent);
-        }
         #resizeObserving = false;
         #resizeObserver;
         __handleScrollUpperThresholdEventEnabled = __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_initializers, (enabled) => {
@@ -241,10 +57,7 @@ let CommonEventsAndMethods = (() => {
             }
         });
         #disableExposure() {
-            if (this.#exposureObserver) {
-                this.#exposureObserver.disconnect();
-                this.#exposureObserver = undefined;
-            }
+            this.#resizeObserver?.disconnect();
         }
     };
 })();

package/dist/common/constants.js

@@ -10,5 +10,5 @@ export const isWebkit = /\b(iPad|iPhone|iPod|OS X)\b/.test(UA)
     && /WebKit/.test(UA)
     // @ts-expect-error
     && !window.MSStream;
-export const scrollContainerDom = Symbol();
+export const scrollContainerDom = Symbol.for('lynx-scroll-container-dom');
 //# sourceMappingURL=constants.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
   ],
   "dependencies": {
     "@lynx-js/web-elements-reactive": "0.2.2",
-    "@lynx-js/web-elements-template": "0.7.6"
+    "@lynx-js/web-elements-template": "0.8.0"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/common-css/linear.css

@@ -283,13 +283,28 @@ list-item {
     x-textarea,
     x-list,
     list-item {
+      /* 
+       `--lynx-linear-weight-sum`
+       0 -> 1
+       <value> -> <value>
+       */
       flex-shrink: 0;
+      /* The following `calc` and `clamp` logic ensures that if 
+         `--lynx-linear-weight-sum` is zero, it defaults to 1. This prevents
+         division by zero and ensures consistent behavior. */
       flex-grow: calc(
-        var(--lynx-linear-weight) / var(--lynx-linear-weight-sum)
+        var(--lynx-linear-weight) /
+          calc(
+          var(--lynx-linear-weight-sum) +
+            (
+            1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
+          )
+        )
       );
       flex-basis: var(--lynx-linear-weight-basis);
     }
   }
+
   @container not style(--lynx-display: linear) {
     x-view,
     x-blur-view,

package/dist/common/convertLengthToPx.d.ts

@@ -1 +0,0 @@
-export declare function convertLengthToPx(targetElement: HTMLElement, str: string | null, isWidth?: boolean): number;

package/dist/common/convertLengthToPx.js

@@ -1,25 +0,0 @@
-// Copyright 2024 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 function convertLengthToPx(targetElement, str, isWidth) {
-    if (str) {
-        str = str.trim();
-        if (str.endsWith('px')) {
-            return Number(str.substring(0, str.length - 2));
-        }
-        else if (str.endsWith('%')) {
-            const pct = Number(str.substring(0, str.length - 1));
-            const { width, height } = targetElement.getBoundingClientRect();
-            const base = isWidth ? width : height;
-            return (base * pct) / 100;
-        }
-        else {
-            /**
-             * TODO (haoyang.wang): support rpx
-             */
-            return 0;
-        }
-    }
-    return 0;
-}
-//# sourceMappingURL=convertLengthToPx.js.map