@lynx-js/web-elements 0.7.7 → 0.8.0

package/CHANGELOG.md

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

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/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/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.7",
+  "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.7"
+    "@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