@lynx-js/web-elements 0.10.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lynx-js/web-elements
 
+## 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/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/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/elements.css

@@ -16,3 +16,4 @@
 @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.10.1",
   "private": false,
   "repository": {
     "type": "git",
@@ -106,6 +106,11 @@
       "types": "./dist/elements/XList/index.d.ts",
       "default": "./dist/elements/XList/index.js"
     },
+    "./XWebView": {
+      "source": "./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",
       "types": "./dist/elements/htmlTemplates.d.ts",

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;
 }
 
@@ -65,11 +69,17 @@ list-item {
   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;
+}