@lynx-js/web-elements 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @lynx-js/web-elements
 
+## 0.11.0
+
+### Minor Changes
+
+- feat: integrate the LinearContainer Compat plugin ([#2100](https://github.com/lynx-family/lynx-stack/pull/2100))
+
+  **This is a BREAKING CHANGE**
+
+  Now we integrated the `LinearCompat` into @lynx-js/web-elements. Developers can safely remove the following imports:
+
+  ```js
+  import '@lynx-js/web-elements/compat/LinearContainer';
+  ```
+
+  ```js
+  import '@lynx-js/web-elements-compat/LinearContainer';
+  ```
+
+### Patch Changes
+
+- fix: list-item `contain` property changes from `size` to `layout paint`, because the size of the `list-item` can be expanded by its children. ([#2043](https://github.com/lynx-family/lynx-stack/pull/2043))
+
+- Use the scoped `@lynx-js/source-field` for source build resolution. ([#2096](https://github.com/lynx-family/lynx-stack/pull/2096))
+
+## 0.10.1
+
+### Patch Changes
+
+- feat: implement x-webview component ([#2061](https://github.com/lynx-family/lynx-stack/pull/2061))
+
+- feat: support `recyclable="false"` on `list-item` and enable overflow visibility ([#2069](https://github.com/lynx-family/lynx-stack/pull/2069))
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/compat/LinearContainer/LinearContainer.d.ts

@@ -1,8 +1,10 @@
 import { type AttributeReactiveClass } from '../../element-reactive/index.js';
 import '../../../src/compat/LinearContainer/linear-compat.css';
-export declare class LinearContainer implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+declare class LinearContainerImpl implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
     static readonly observedAttributes: never[];
     static readonly observedCSSProperties: string[];
     constructor(currentElement: HTMLElement);
 }
+export declare const LinearContainer: typeof LinearContainerImpl | undefined;
+export {};

package/dist/compat/LinearContainer/LinearContainer.js

@@ -50,7 +50,7 @@ import '../../../src/compat/LinearContainer/linear-compat.css';
 const supportContainerStyleQuery = CSS.supports('width:1rex')
     && CSS.supports('transition-behavior:allow-discrete')
     && CSS.supports('content-visibility: auto');
-export class LinearContainer {
+class LinearContainerImpl {
     static observedAttributes = [];
     static observedCSSProperties = [
         '--lynx-display',
@@ -68,42 +68,7 @@ export class LinearContainer {
     #setComputedDisplay = bindToAttribute(() => this.#dom, 'lynx-computed-display');
     #setLinearOrientation = bindToAttribute(() => this.#dom, 'lynx-linear-orientation');
 }
-/**
- * remove this once firefox supports @container style()
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container
- * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1795622
- */
-if (!supportContainerStyleQuery) {
-    const targetElements = new Set([
-        'x-view',
-        'scroll-view',
-        'x-foldview-header-ng',
-        'x-foldview-ng',
-        'x-foldview-slot-drag-ng',
-        'x-foldview-slot-ng',
-        'x-foldview-toolbar-ng',
-        'x-refresh-footer',
-        'x-refresh-header',
-        'x-refresh-view',
-        'x-swiper-item',
-        'x-viewpager-item-ng',
-        'x-viewpager-ng',
-    ]);
-    const realDefine = customElements.define.bind(customElements);
-    const fakeDefine = (name, cls, options) => {
-        if (targetElements.has(name)) {
-            cls.registerPlugin?.(LinearContainer);
-            targetElements.delete(name);
-        }
-        realDefine(name, cls, options);
-    };
-    customElements.define = fakeDefine;
-    for (const tag of targetElements) {
-        (customElements.whenDefined(tag)).then((cls) => {
-            if (targetElements.has(tag)) {
-                cls.registerPlugin?.(LinearContainer);
-            }
-        });
-    }
-}
+export const LinearContainer = supportContainerStyleQuery
+    ? undefined
+    : LinearContainerImpl;
 //# sourceMappingURL=LinearContainer.js.map

package/dist/compat/index.d.ts

@@ -0,0 +1 @@
+export { LinearContainer } from './LinearContainer/LinearContainer.js';

package/dist/compat/index.js

@@ -0,0 +1,2 @@
+export { LinearContainer } from './LinearContainer/LinearContainer.js';
+//# sourceMappingURL=index.js.map

package/dist/element-reactive/component.d.ts

@@ -40,4 +40,4 @@ export type AttributeReactiveObject = {
     dispose?(): void;
     connectedCallback?(): void;
 };
-export declare function Component<T extends WebComponentClass>(tag: string, attributeReactiveClasses: AttributeReactiveClass<T>[], template?: string): (target: T, context: ClassDecoratorContext<T>) => T;
+export declare function Component<T extends WebComponentClass>(tag: string, attributeReactiveClassesOptional: (AttributeReactiveClass<T> | undefined)[], template?: string): (target: T, context: ClassDecoratorContext<T>) => T;

package/dist/element-reactive/component.js

@@ -7,8 +7,9 @@ function convertStyleWithPriority(value, priority) {
         return value;
     }
 }
-export function Component(tag, attributeReactiveClasses, template) {
+export function Component(tag, attributeReactiveClassesOptional, template) {
     let templateElement;
+    const attributeReactiveClasses = attributeReactiveClassesOptional.filter((e) => Boolean(e));
     return (target, { addInitializer }) => {
         const observedStyleProperties = new Set([
             ...attributeReactiveClasses
@@ -158,52 +159,62 @@ export function Component(tag, attributeReactiveClasses, template) {
                 });
             }
             #eventListenerMap = {};
-            addEventListener(type, listener, options) {
-                super.addEventListener(type, listener, options);
-                this.#eventListenerMap[type] ??= {
+            enableEvent(eventName) {
+                this.#eventListenerMap[eventName] ??= {
                     count: 0,
                     listenerCount: new WeakMap(),
                     captureListenerCount: new WeakMap(),
                 };
-                const targetEventInfo = this.#eventListenerMap[type];
-                const capture = typeof options === 'object' ? options.capture : options;
-                const targetMap = capture
-                    ? targetEventInfo.captureListenerCount
-                    : targetEventInfo.listenerCount;
-                const currentListenerCount = targetMap.get(listener) ?? 0;
-                targetMap.set(listener, currentListenerCount + 1);
+                const targetEventInfo = this.#eventListenerMap[eventName];
                 if (targetEventInfo.count === 0) {
                     // trigger eventStatusChangeHandler
                     for (const oneReactive of this.#attributeReactives) {
-                        const handler = oneReactive.eventStatusChangedHandler?.[type];
+                        const handler = oneReactive.eventStatusChangedHandler?.[eventName];
                         if (handler) {
-                            handler.call(oneReactive, true, type);
+                            handler.call(oneReactive, true, eventName);
                         }
                     }
                 }
                 targetEventInfo.count++;
             }
+            disableEvent(eventName) {
+                const targetEventInfo = this.#eventListenerMap[eventName];
+                if (targetEventInfo && targetEventInfo.count > 0) {
+                    targetEventInfo.count--;
+                    if (targetEventInfo.count === 0) {
+                        // trigger eventStatusChangeHandler
+                        for (const oneReactive of this.#attributeReactives) {
+                            const handler = oneReactive.eventStatusChangedHandler?.[eventName];
+                            if (handler) {
+                                handler.call(oneReactive, false, eventName);
+                            }
+                        }
+                    }
+                }
+            }
+            addEventListener(type, listener, options) {
+                super.addEventListener(type, listener, options);
+                this.enableEvent(type);
+                const targetEventInfo = this.#eventListenerMap[type];
+                const capture = typeof options === 'object' ? options.capture : options;
+                const targetMap = capture
+                    ? targetEventInfo.captureListenerCount
+                    : targetEventInfo.listenerCount;
+                const currentListenerCount = targetMap.get(listener) ?? 0;
+                targetMap.set(listener, currentListenerCount + 1);
+            }
             removeEventListener(type, listener, options) {
                 super.removeEventListener(type, listener, options);
                 const capture = typeof options === 'object' ? options.capture : options;
                 const targetEventInfo = this.#eventListenerMap[type];
                 if (targetEventInfo && targetEventInfo.count > 0) {
                     const targetMap = capture
-                        ? targetEventInfo?.captureListenerCount
-                        : targetEventInfo?.listenerCount;
+                        ? targetEventInfo.captureListenerCount
+                        : targetEventInfo.listenerCount;
                     const currentListenerCount = targetMap.get(listener);
                     if (currentListenerCount === 1) {
-                        targetEventInfo.listenerCount.delete(listener);
-                        targetEventInfo.count--;
-                        if (targetEventInfo.count === 0) {
-                            // trigger eventStatusChangeHandler
-                            for (const oneReactive of this.#attributeReactives) {
-                                const handler = oneReactive.eventStatusChangedHandler?.[type];
-                                if (handler) {
-                                    handler.call(oneReactive, false, type);
-                                }
-                            }
-                        }
+                        targetMap.delete(listener);
+                        this.disableEvent(type);
                     }
                 }
             }

package/dist/elements/ScrollView/ScrollView.js

@@ -12,8 +12,10 @@ import { ScrollIntoView } from './ScrollIntoView.js';
 import { Component } from '../../element-reactive/index.js';
 import { scrollContainerDom } from '../common/constants.js';
 import { templateScrollView } from '../htmlTemplates.js';
+import { LinearContainer } from '../../compat/index.js';
 let ScrollView = (() => {
     let _classDecorators = [Component('scroll-view', [
+            LinearContainer,
             CommonEventsAndMethods,
             ScrollAttributes,
             FadeEdgeLengthAttribute,

package/dist/elements/XFoldViewNg/XFoldviewHeaderNg.js

@@ -8,8 +8,10 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
 import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewHeaderNg = (() => {
     let _classDecorators = [Component('x-foldview-header-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XFoldViewNg/XFoldviewNg.js

@@ -8,12 +8,14 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewNgEvents } from './XFoldviewNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
+import { LinearContainer } from '../../compat/index.js';
 export const scrollableLength = Symbol('scrollableLength');
 export const isHeaderShowing = Symbol('isHeaderShowing');
 export const resizeObserver = Symbol('resizeObserver');
 export const slotKid = Symbol('slotKid');
 let XFoldviewNg = (() => {
     let _classDecorators = [Component('x-foldview-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
             XFoldviewNgEvents,
         ])];

package/dist/elements/XFoldViewNg/XFoldviewSlotDragNg.js

@@ -6,8 +6,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewSlotDragNg = (() => {
     let _classDecorators = [Component('x-foldview-slot-drag-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XFoldViewNg/XFoldviewSlotNg.js

@@ -8,8 +8,10 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js';
 import { slotKid } from './XFoldviewNg.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewSlotNg = (() => {
     let _classDecorators = [Component('x-foldview-slot-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
             XFoldviewSlotNgTouchEventsHandler,
         ])];

package/dist/elements/XFoldViewNg/XFoldviewToolbarNg.js

@@ -8,8 +8,10 @@ import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
 import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
+import { LinearContainer } from '../../compat/index.js';
 let XFoldviewToolbarNg = (() => {
     let _classDecorators = [Component('x-foldview-toolbar-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XList/ListItem.d.ts

@@ -1,2 +1,3 @@
 export declare class ListItem extends HTMLElement {
+    static readonly notToFilterFalseAttributes: Set<string>;
 }

package/dist/elements/XList/ListItem.js

@@ -23,6 +23,9 @@ let ListItem = (() => {
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             ListItem = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static notToFilterFalseAttributes = new Set(['recyclable']);
+        static {
             __runInitializers(_classThis, _classExtraInitializers);
         }
     };

package/dist/elements/XRefreshView/XRefreshFooter.js

@@ -7,8 +7,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '../../element-reactive/index.js';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XRefreshFooter = (() => {
     let _classDecorators = [Component('x-refresh-footer', [
+            LinearContainer,
             CommonEventsAndMethods,
             XRefreshSubElementIntersectionObserver,
         ])];

package/dist/elements/XRefreshView/XRefreshHeader.js

@@ -7,8 +7,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '../../element-reactive/index.js';
 import { XRefreshSubElementIntersectionObserver } from './XRefreshSubElementIntersectionObserver.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XRefreshHeader = (() => {
     let _classDecorators = [Component('x-refresh-header', [
+            LinearContainer,
             CommonEventsAndMethods,
             XRefreshSubElementIntersectionObserver,
         ])];

package/dist/elements/XRefreshView/XRefreshView.js

@@ -9,8 +9,9 @@ import { XRefreshViewEventsEmitter } from './XRefreshViewEventsEmitter.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { scrollContainerDom } from '../common/constants.js';
 import { templateXRefreshView } from '../htmlTemplates.js';
+import { LinearContainer } from '../../compat/index.js';
 let XRefreshView = (() => {
-    let _classDecorators = [Component('x-refresh-view', [CommonEventsAndMethods, XRefreshViewEventsEmitter], templateXRefreshView)];
+    let _classDecorators = [Component('x-refresh-view', [LinearContainer, CommonEventsAndMethods, XRefreshViewEventsEmitter], templateXRefreshView)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/elements/XSwiper/SwiperItem.js

@@ -6,8 +6,12 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let SwiperItem = (() => {
-    let _classDecorators = [Component('x-swiper-item', [CommonEventsAndMethods])];
+    let _classDecorators = [Component('x-swiper-item', [
+            LinearContainer,
+            CommonEventsAndMethods,
+        ])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/elements/XView/XView.js

@@ -7,8 +7,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '../../element-reactive/index.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
 import { CommonEventsAndMethods, layoutChangeTarget, } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XView = (() => {
     let _classDecorators = [Component('x-view', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XViewpagerNg/XViewpagerItemNg.js

@@ -6,8 +6,10 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '../../element-reactive/index.js';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { LinearContainer } from '../../compat/index.js';
 let XViewpagerItemNg = (() => {
     let _classDecorators = [Component('x-viewpager-item-ng', [
+            LinearContainer,
             CommonEventsAndMethods,
         ])];
     let _classDescriptor;

package/dist/elements/XViewpagerNg/XViewpagerNg.js

@@ -9,8 +9,9 @@ import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { XViewpagerNgEvents } from './XViewpagerNgEvents.js';
 import { scrollContainerDom } from '../common/constants.js';
 import { templateXViewpageNg } from '../htmlTemplates.js';
+import { LinearContainer } from '../../compat/index.js';
 let XViewpagerNg = (() => {
-    let _classDecorators = [Component('x-viewpager-ng', [CommonEventsAndMethods, XViewpagerNgEvents], templateXViewpageNg)];
+    let _classDecorators = [Component('x-viewpager-ng', [LinearContainer, CommonEventsAndMethods, XViewpagerNgEvents], templateXViewpageNg)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/elements/XWebView/XWebView.d.ts

@@ -0,0 +1,10 @@
+export declare class XWebView extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get src(): string | null;
+    set src(val: string | null);
+    get html(): string | null;
+    set html(val: string | null);
+    reload(): void;
+}

package/dist/elements/XWebView/XWebView.js

@@ -0,0 +1,128 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// 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.
+*/
+import { Component, genDomGetter } from '../../element-reactive/index.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { templateXWebView } from '../htmlTemplates.js';
+import { XWebViewAttribute } from './XWebViewAttribute.js';
+let XWebView = (() => {
+    let _classDecorators = [Component('x-webview', [CommonEventsAndMethods, XWebViewAttribute], templateXWebView)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var XWebView = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            XWebView = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #getWebView = genDomGetter(() => this.shadowRoot, '#webview');
+        /**
+         * @internal
+         */
+        #handleLoad = () => {
+            this.dispatchEvent(new CustomEvent('load', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    url: this.#getWebView().src,
+                },
+            }));
+            this.dispatchEvent(new CustomEvent('bindload', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    url: this.#getWebView().src,
+                },
+            }));
+        };
+        /**
+         * @internal
+         */
+        #handleError = (e) => {
+            this.dispatchEvent(new CustomEvent('error', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    errorMsg: e.message || 'unknown error',
+                },
+            }));
+            this.dispatchEvent(new CustomEvent('binderror', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    errorMsg: e.message || 'unknown error',
+                },
+            }));
+        };
+        /**
+         * @internal
+         */
+        #handleMessage = (e) => {
+            if (e.source !== this.#getWebView().contentWindow) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('message', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    msg: e.data, // compatible with bindmessage
+                    data: e.data, // standard CustomEvent
+                },
+            }));
+            this.dispatchEvent(new CustomEvent('bindmessage', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    msg: e.data,
+                },
+            }));
+        };
+        connectedCallback() {
+            this.#getWebView().addEventListener('load', this.#handleLoad);
+            this.#getWebView().addEventListener('error', this.#handleError);
+            window.addEventListener('message', this.#handleMessage);
+        }
+        disconnectedCallback() {
+            this.#getWebView().removeEventListener('load', this.#handleLoad);
+            this.#getWebView().removeEventListener('error', this.#handleError);
+            window.removeEventListener('message', this.#handleMessage);
+        }
+        get src() {
+            return this.getAttribute('src');
+        }
+        set src(val) {
+            if (val === null) {
+                this.removeAttribute('src');
+            }
+            else {
+                this.setAttribute('src', val);
+            }
+        }
+        get html() {
+            return this.getAttribute('html');
+        }
+        set html(val) {
+            if (val === null) {
+                this.removeAttribute('html');
+            }
+            else {
+                this.setAttribute('html', val);
+            }
+        }
+        reload() {
+            // eslint-disable-next-line no-self-assign
+            this.#getWebView().src = this.#getWebView().src;
+        }
+    };
+    return XWebView = _classThis;
+})();
+export { XWebView };
+//# sourceMappingURL=XWebView.js.map

package/dist/elements/XWebView/XWebViewAttribute.d.ts

@@ -0,0 +1,8 @@
+import { type AttributeReactiveClass } from '../../element-reactive/index.js';
+export declare class XWebViewAttribute implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: HTMLElement);
+    _handleSrc: (this: void, newVal: string | null) => void;
+    _handleHtml: (this: void, newVal: string | null) => void;
+}

package/dist/elements/XWebView/XWebViewAttribute.js

@@ -0,0 +1,36 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// 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.
+*/
+import { bindToAttribute, genDomGetter, registerAttributeHandler, } from '../../element-reactive/index.js';
+let XWebViewAttribute = (() => {
+    let __handleSrc_decorators;
+    let __handleSrc_initializers = [];
+    let __handleSrc_extraInitializers = [];
+    let __handleHtml_decorators;
+    let __handleHtml_initializers = [];
+    let __handleHtml_extraInitializers = [];
+    return class XWebViewAttribute {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __handleSrc_decorators = [registerAttributeHandler('src', true)];
+            __handleHtml_decorators = [registerAttributeHandler('html', true)];
+            __esDecorate(null, null, __handleSrc_decorators, { kind: "field", name: "_handleSrc", static: false, private: false, access: { has: obj => "_handleSrc" in obj, get: obj => obj._handleSrc, set: (obj, value) => { obj._handleSrc = value; } }, metadata: _metadata }, __handleSrc_initializers, __handleSrc_extraInitializers);
+            __esDecorate(null, null, __handleHtml_decorators, { kind: "field", name: "_handleHtml", static: false, private: false, access: { has: obj => "_handleHtml" in obj, get: obj => obj._handleHtml, set: (obj, value) => { obj._handleHtml = value; } }, metadata: _metadata }, __handleHtml_initializers, __handleHtml_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['src', 'html'];
+        #dom;
+        #getWebView = genDomGetter(() => this.#dom.shadowRoot, '#webview');
+        constructor(dom) {
+            __runInitializers(this, __handleHtml_extraInitializers);
+            this.#dom = dom;
+        }
+        _handleSrc = __runInitializers(this, __handleSrc_initializers, bindToAttribute(this.#getWebView, 'src'));
+        _handleHtml = (__runInitializers(this, __handleSrc_extraInitializers), __runInitializers(this, __handleHtml_initializers, bindToAttribute(this.#getWebView, 'srcdoc')));
+    };
+})();
+export { XWebViewAttribute };
+//# sourceMappingURL=XWebViewAttribute.js.map

package/dist/elements/XWebView/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @module elements/XWebView
+ *
+ * `x-webview` provides a web container that allows loading web pages.
+ *
+ * Attributes:
+ * - `src`: The URL of the web page to load.
+ * - `html`: The HTML content to load (via srcdoc).
+ *
+ * Events:
+ * - `bindload`: Fired when the page loads. Detail: `{ url }`.
+ * - `binderror`: Fired when an error occurs. Detail: `{ errorMsg }`.
+ * - `bindmessage`: Fired when a message is received from the page. Detail: `{ msg }`.
+ *
+ * Methods:
+ * - `reload()`: Reloads the current page.
+ */
+export { XWebView } from './XWebView.js';

package/dist/elements/XWebView/index.js

@@ -0,0 +1,22 @@
+// 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.
+/**
+ * @module elements/XWebView
+ *
+ * `x-webview` provides a web container that allows loading web pages.
+ *
+ * Attributes:
+ * - `src`: The URL of the web page to load.
+ * - `html`: The HTML content to load (via srcdoc).
+ *
+ * Events:
+ * - `bindload`: Fired when the page loads. Detail: `{ url }`.
+ * - `binderror`: Fired when an error occurs. Detail: `{ errorMsg }`.
+ * - `bindmessage`: Fired when a message is received from the page. Detail: `{ msg }`.
+ *
+ * Methods:
+ * - `reload()`: Reloads the current page.
+ */
+export { XWebView } from './XWebView.js';
+//# sourceMappingURL=index.js.map

package/dist/elements/all.d.ts

@@ -15,3 +15,4 @@ import './XView/index.js';
 import './XViewpagerNg/index.js';
 import './XList/index.js';
 import './XList/ListItem.js';
+import './XWebView/index.js';

package/dist/elements/all.js

@@ -15,4 +15,5 @@ import './XView/index.js';
 import './XViewpagerNg/index.js';
 import './XList/index.js';
 import './XList/ListItem.js';
+import './XWebView/index.js';
 //# sourceMappingURL=all.js.map

package/dist/elements/htmlTemplates.d.ts

@@ -17,4 +17,5 @@ export declare const templateInlineImage: (attributes: {
 }) => string;
 export declare const templateXTextarea = "<style>\n  #textarea:focus,\n  #textarea:focus-visible {\n    border: inherit;\n    outline: inherit;\n  }\n</style>\n<form id=\"form\" part=\"form\" method=\"dialog\">\n  <textarea id=\"textarea\" part=\"textarea\"></textarea>\n</form>";
 export declare const templateXViewpageNg = "<style>\n  #bounce-padding {\n    display: none;\n    flex: 0 0 0;\n    align-self: stretch;\n    scroll-snap-align: none;\n    flex-basis: 100%;\n  }\n  #content {\n    flex: 0 0 100%;\n    flex-direction: row;\n    align-self: stretch;\n    display: inherit;\n    justify-content: inherit;\n    align-items: inherit;\n    overflow: inherit;\n    scrollbar-width: none;\n    scroll-snap-type: inherit;\n  }\n  #content::-webkit-scrollbar {\n    display: none;\n  }\n</style>\n<div id=\"bounce-padding\" part=\"bounce-padding\"></div>\n<div id=\"content\" part=\"content\">\n  <slot></slot>\n</div>";
+export declare const templateXWebView = "<style>\n  iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n<iframe id=\"webview\" part=\"webview\"></iframe>";
 export declare const templateXSvg: () => string;

package/dist/elements/htmlTemplates.js

@@ -326,6 +326,14 @@ export const templateXViewpageNg = `<style>
 <div id="content" part="content">
   <slot></slot>
 </div>`;
+export const templateXWebView = `<style>
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+</style>
+<iframe id="webview" part="webview"></iframe>`;
 export const templateXSvg = () => {
     return `<img part="img" alt="" loading="lazy" id="img" /> `;
 };

package/index.css

@@ -2,5 +2,20 @@
  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 url("./src/compat/LinearContainer/linear-compat.css");
 @import url("./src/elements/common-css/linear.css");
-@import url("./elements.css");
+@import url("./src/elements/LynxWrapper/lynx-wrapper.css");
+@import url("./src/elements/XText/x-text.css");
+@import url("./src/elements/ScrollView/scroll-view.css");
+@import url("./src/elements/XFoldViewNg/x-foldview-ng.css");
+@import url("./src/elements/XViewpagerNg/x-viewpager-ng.css");
+@import url("./src/elements/XCanvas/x-canvas.css");
+@import url("./src/elements/XSvg/x-svg.css");
+@import url("./src/elements/XImage/x-image.css");
+@import url("./src/elements/XInput/x-input.css");
+@import url("./src/elements/XOverlayNg/x-overlay-ng.css");
+@import url("./src/elements/XRefreshView/x-refresh-view.css");
+@import url("./src/elements/XSwiper/x-swiper.css");
+@import url("./src/elements/XTextarea/x-textarea.css");
+@import url("./src/elements/XList/x-list.css");
+@import url("./src/elements/XWebView/x-webview.css");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -18,106 +18,100 @@
     "./index.css": {
       "default": "./index.css"
     },
-    "./elements.css": {
-      "default": "./elements.css"
-    },
     "./all": {
-      "source": "./src/elements/all.ts",
+      "@lynx-js/source-field": "./src/elements/all.ts",
       "types": "./dist/elements/all.d.ts",
       "default": "./dist/elements/all.js"
     },
     "./LynxWrapper": {
-      "source": "./src/elements/LynxWrapper/index.ts",
+      "@lynx-js/source-field": "./src/elements/LynxWrapper/index.ts",
       "types": "./dist/elements/LynxWrapper/index.d.ts",
       "default": "./dist/elements/LynxWrapper/index.js"
     },
     "./ScrollView": {
-      "source": "./src/elements/ScrollView/index.ts",
+      "@lynx-js/source-field": "./src/elements/ScrollView/index.ts",
       "types": "./dist/elements/ScrollView/index.d.ts",
       "default": "./dist/elements/ScrollView/index.js"
     },
     "./XAudioTT": {
-      "source": "./src/elements/XAudioTT/index.ts",
+      "@lynx-js/source-field": "./src/elements/XAudioTT/index.ts",
       "types": "./dist/elements/XAudioTT/index.d.ts",
       "default": "./dist/elements/XAudioTT/index.js"
     },
     "./XCanvas": {
-      "source": "./src/elements/XCanvas/index.ts",
+      "@lynx-js/source-field": "./src/elements/XCanvas/index.ts",
       "types": "./dist/elements/XCanvas/index.d.ts",
       "default": "./dist/elements/XCanvas/index.js"
     },
     "./XFoldViewNg": {
-      "source": "./src/elements/XFoldViewNg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XFoldViewNg/index.ts",
       "types": "./dist/elements/XFoldViewNg/index.d.ts",
       "default": "./dist/elements/XFoldViewNg/index.js"
     },
     "./XImage": {
-      "source": "./src/elements/XImage/index.ts",
+      "@lynx-js/source-field": "./src/elements/XImage/index.ts",
       "types": "./dist/elements/XImage/index.d.ts",
       "default": "./dist/elements/XImage/index.js"
     },
     "./XInput": {
-      "source": "./src/elements/XInput/index.ts",
+      "@lynx-js/source-field": "./src/elements/XInput/index.ts",
       "types": "./dist/elements/XInput/index.d.ts",
       "default": "./dist/elements/XInput/index.js"
     },
     "./XOverlayNg": {
-      "source": "./src/elements/XOverlayNg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XOverlayNg/index.ts",
       "types": "./dist/elements/XOverlayNg/index.d.ts",
       "default": "./dist/elements/XOverlayNg/index.js"
     },
     "./XRefreshView": {
-      "source": "./src/elements/XRefreshView/index.ts",
+      "@lynx-js/source-field": "./src/elements/XRefreshView/index.ts",
       "types": "./dist/elements/XRefreshView/index.d.ts",
       "default": "./dist/elements/XRefreshView/index.js"
     },
     "./XSvg": {
-      "source": "./src/elements/XSvg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XSvg/index.ts",
       "types": "./dist/elements/XSvg/index.d.ts",
       "default": "./dist/elements/XSvg/index.js"
     },
     "./XSwiper": {
-      "source": "./src/elements/XSwiper/index.ts",
+      "@lynx-js/source-field": "./src/elements/XSwiper/index.ts",
       "types": "./dist/elements/XSwiper/index.d.ts",
       "default": "./dist/elements/XSwiper/index.js"
     },
     "./XText": {
-      "source": "./src/elements/XText/index.ts",
+      "@lynx-js/source-field": "./src/elements/XText/index.ts",
       "types": "./dist/elements/XText/index.d.ts",
       "default": "./dist/elements/XText/index.js"
     },
     "./XTextarea": {
-      "source": "./src/elements/XTextarea/index.ts",
+      "@lynx-js/source-field": "./src/elements/XTextarea/index.ts",
       "types": "./dist/elements/XTextarea/index.d.ts",
       "default": "./dist/elements/XTextarea/index.js"
     },
     "./XView": {
-      "source": "./src/elements/XView/index.ts",
+      "@lynx-js/source-field": "./src/elements/XView/index.ts",
       "types": "./dist/elements/XView/index.d.ts",
       "default": "./dist/elements/XView/index.js"
     },
     "./XViewpagerNg": {
-      "source": "./src/elements/XViewpagerNg/index.ts",
+      "@lynx-js/source-field": "./src/elements/XViewpagerNg/index.ts",
       "types": "./dist/elements/XViewpagerNg/index.d.ts",
       "default": "./dist/elements/XViewpagerNg/index.js"
     },
     "./XList": {
-      "source": "./src/elements/XList/index.ts",
+      "@lynx-js/source-field": "./src/elements/XList/index.ts",
       "types": "./dist/elements/XList/index.d.ts",
       "default": "./dist/elements/XList/index.js"
     },
+    "./XWebView": {
+      "@lynx-js/source-field": "./src/elements/XWebView/index.ts",
+      "types": "./dist/elements/XWebView/index.d.ts",
+      "default": "./dist/elements/XWebView/index.js"
+    },
     "./html-templates": {
-      "source": "./src/elements/htmlTemplates.ts",
+      "@lynx-js/source-field": "./src/elements/htmlTemplates.ts",
       "types": "./dist/elements/htmlTemplates.d.ts",
       "default": "./dist/elements/htmlTemplates.js"
-    },
-    "./compat/LinearContainer": {
-      "source": "./src/compat/LinearContainer/LinearContainer.ts",
-      "types": "./dist/compat/LinearContainer/LinearContainer.d.ts",
-      "default": "./dist/compat/LinearContainer/LinearContainer.js"
-    },
-    "./compat/LinearContainer/linear-compat.css": {
-      "default": "./src/compat/LinearContainer/linear-compat.css"
     }
   },
   "main": "dist/index.js",
@@ -134,7 +128,7 @@
   ],
   "devDependencies": {
     "@playwright/test": "^1.57.0",
-    "@rsbuild/core": "1.6.13",
+    "@rsbuild/core": "1.7.1",
     "@rsbuild/plugin-source-build": "^1.0.3",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",

package/src/compat/LinearContainer/linear-compat.css

@@ -47,78 +47,78 @@
     --flex-wrap: nowrap;
     --align-self: auto;
   }
-}
-[lynx-computed-display="linear"] {
-  flex-wrap: nowrap !important;
-  flex-direction: column;
-  justify-content: flex-start;
-}
+  [lynx-computed-display="linear"] {
+    flex-wrap: nowrap !important;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
 
-[lynx-computed-display="flex"] {
-  flex-direction: var(--flex-direction);
-  justify-content: var(--justify-content);
-  flex-wrap: var(--flex-wrap);
-}
+  [lynx-computed-display="flex"] {
+    flex-direction: var(--flex-direction);
+    justify-content: var(--justify-content);
+    flex-wrap: var(--flex-wrap);
+  }
 
-[lynx-computed-display="flex"] > *,
-[lynx-computed-display="flex"] > lynx-wrapper > * {
-  flex: var(
-    --flex,
-    var(--flex-grow) var(--flex-shrink) var(--flex-basis)
-  );
-}
-[lynx-computed-display="linear"] > *,
-[lynx-computed-display="linear"] > lynx-wrapper > * {
-  flex-shrink: 0 !important;
-  flex-grow: calc(
-    var(--lynx-linear-weight) /
-      calc(
-      var(--lynx-linear-weight-sum) +
-        (
-        1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
+  [lynx-computed-display="flex"] > *,
+  [lynx-computed-display="flex"] > lynx-wrapper > * {
+    flex: var(
+      --flex,
+      var(--flex-grow) var(--flex-shrink) var(--flex-basis)
+    );
+  }
+  [lynx-computed-display="linear"] > *,
+  [lynx-computed-display="linear"] > lynx-wrapper > * {
+    flex-shrink: 0 !important;
+    flex-grow: calc(
+      var(--lynx-linear-weight) /
+        calc(
+        var(--lynx-linear-weight-sum) +
+          (
+          1 - clamp(0, var(--lynx-linear-weight-sum) * 999999, 1)
+        )
       )
-    )
-  ) !important;
-  flex-basis: var(--lynx-linear-weight-basis) !important;
-}
+    ) !important;
+    flex-basis: var(--lynx-linear-weight-basis) !important;
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
-  flex-direction: column !important;
-  justify-content: var(--justify-content-column);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
+    flex-direction: column !important;
+    justify-content: var(--justify-content-column);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
-  flex-direction: row !important;
-  justify-content: var(--justify-content-row);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
+    flex-direction: row !important;
+    justify-content: var(--justify-content-row);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
-  flex-direction: column-reverse !important;
-  justify-content: var(--justify-content-column-reverse);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
+    flex-direction: column-reverse !important;
+    justify-content: var(--justify-content-column-reverse);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
-  flex-direction: row-reverse !important;
-  justify-content: var(--justify-content-row-reverse);
-}
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
+    flex-direction: row-reverse !important;
+    justify-content: var(--justify-content-row-reverse);
+  }
 
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"],
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical"]
-  > lynx-wrapper
-  > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
-  > lynx-wrapper
-  > * {
-  align-self: var(--align-self-column);
-}
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]
-  > lynx-wrapper
-  > *,
-[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
-  > lynx-wrapper
-  > * {
-  align-self: var(--align-self-row);
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"],
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical"]
+    > lynx-wrapper
+    > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
+    > lynx-wrapper
+    > * {
+    align-self: var(--align-self-column);
+  }
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]
+    > lynx-wrapper
+    > *,
+  [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
+    > lynx-wrapper
+    > * {
+    align-self: var(--align-self-row);
+  }
 }

package/src/elements/XList/x-list.css

@@ -17,7 +17,8 @@ x-list > *:not(list-item) {
   display: none;
 }
 
-x-list::part(content), x-list[list-type="waterfall"]::part(waterfall-content) {
+x-list::part(content),
+x-list[list-type="waterfall"]::part(waterfall-content) {
   display: flex;
   flex: 0 0 auto;
   flex-wrap: nowrap;
@@ -36,15 +37,18 @@ x-list::part(content), x-list[list-type="waterfall"]::part(waterfall-content) {
   column-gap: inherit;
 }
 
-x-list::part(content), x-list::part(slot) {
+x-list::part(content),
+x-list::part(slot) {
   --lynx-display: inherit;
 }
 
-x-list, x-list::part(content) {
+x-list,
+x-list::part(content) {
   scrollbar-width: none;
 }
 
-x-list::-webkit-scrollbar, x-list::part(content)::-webkit-scrollbar {
+x-list::-webkit-scrollbar,
+x-list::part(content)::-webkit-scrollbar {
   display: none;
 }
 
@@ -61,15 +65,21 @@ list-item {
   content-visibility: auto;
   flex: 0 0 auto !important;
   position: static;
-  contain: size;
+  contain: layout paint;
   contain-intrinsic-size: none auto var(--estimated-main-axis-size-px, 100cqh);
 }
 
+list-item[recyclable="false"] {
+  content-visibility: visible;
+  contain: initial;
+}
+
 x-list[scroll-orientation="horizontal"] list-item {
   contain-intrinsic-size: auto var(--estimated-main-axis-size-px, 100cqw) none;
 }
 
-x-list > list-item, x-list > lynx-wrapper > list-item {
+x-list > list-item,
+x-list > lynx-wrapper > list-item {
   display: flex;
 }
 
@@ -124,7 +134,8 @@ x-list[sticky="true"][scroll-orientation="horizontal"]
   right: var(--list-item-sticky-offset);
 }
 
-x-list[item-snap], x-list[paging-enabled] {
+x-list[item-snap],
+x-list[paging-enabled] {
   scroll-snap-type: y mandatory;
   scroll-snap-stop: always;
 }
@@ -134,7 +145,8 @@ x-list[paging-enabled][scroll-orientation="horizontal"] {
   scroll-snap-type: x mandatory;
 }
 
-x-list[item-snap] > list-item, x-list[item-snap] > lynx-wrapper > list-item {
+x-list[item-snap] > list-item,
+x-list[item-snap] > lynx-wrapper > list-item {
   scroll-snap-align: start;
 }
 

package/src/elements/XWebView/x-webview.css

@@ -0,0 +1,5 @@
+x-webview {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

package/src/elements/common-css/linear.css

@@ -258,7 +258,6 @@ list-item {
  *
  * update this once firefox supports this.
  * 
- * If you want to be fully compatible with chrome below 117, you need to use @lynx-js/web-elements/compat/LinearContainer.
  */
 @supports (content-visibility: auto) and
   (transition-behavior: allow-discrete) and (width: 1rex) {

package/elements.css

@@ -1,18 +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. 
- */
-@import url("./src/elements/LynxWrapper/lynx-wrapper.css");
-@import url("./src/elements/XText/x-text.css");
-@import url("./src/elements/ScrollView/scroll-view.css");
-@import url("./src/elements/XFoldViewNg/x-foldview-ng.css");
-@import url("./src/elements/XViewpagerNg/x-viewpager-ng.css");
-@import url("./src/elements/XCanvas/x-canvas.css");
-@import url("./src/elements/XSvg/x-svg.css");
-@import url("./src/elements/XImage/x-image.css");
-@import url("./src/elements/XInput/x-input.css");
-@import url("./src/elements/XOverlayNg/x-overlay-ng.css");
-@import url("./src/elements/XRefreshView/x-refresh-view.css");
-@import url("./src/elements/XSwiper/x-swiper.css");
-@import url("./src/elements/XTextarea/x-textarea.css");
-@import url("./src/elements/XList/x-list.css");