@lynx-js/web-elements-canary 0.10.0 → 0.10.1-canary-20251229-1bb269b6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lynx-js/web-elements
 
+## 0.10.1-canary-20251229091057-1bb269b6c6f58fba293587a98f3fa8e3160cbbba
+
+### Patch Changes
+
+- feat: implement x-webview component ([#2061](https://github.com/lynx-family/lynx-stack/pull/2061))
+
 ## 0.10.0
 
 ### Minor Changes
@@ -9,15 +15,15 @@
   ### Before
 
   ```js
-  import '@lynx-js/web-elements-template';
-  import '@lynx-js/web-elements-compat/LinearContainer';
+  import "@lynx-js/web-elements-template";
+  import "@lynx-js/web-elements-compat/LinearContainer";
   ```
 
   ### After
 
   ```js
-  import '@lynx-js/web-elements/html-templates';
-  import '@lynx-js/web-elements/compat/LinearContainer';
+  import "@lynx-js/web-elements/html-templates";
+  import "@lynx-js/web-elements/compat/LinearContainer";
   ```
 
 ### Patch Changes
@@ -702,8 +708,8 @@
   For compating usage, `@lynx-js/web-elements-compat/LinearContainer` is provided.
 
   ```javascript
-  import '@lynx-js/web-elements-compat/LinearContainer';
-  import '@lynx-js/web-elements/all';
+  import "@lynx-js/web-elements-compat/LinearContainer";
+  import "@lynx-js/web-elements/all";
   ```
 
 - f8d1d98: break: rename the `blur` and `focus` event to `lynxblur` and `lynxfocus` for x-input element
@@ -725,11 +731,11 @@
   There is also a simple way to use this feature
 
   ```javascript
-  import { LynxCard } from '@lynx-js/web-core';
-  import { loadElement } from '@lynx-js/web-elements/lazy';
-  import '@lynx-js/web-elements/index.css';
-  import '@lynx-js/web-core/index.css';
-  import './index.css';
+  import { LynxCard } from "@lynx-js/web-core";
+  import { loadElement } from "@lynx-js/web-elements/lazy";
+  import "@lynx-js/web-elements/index.css";
+  import "@lynx-js/web-core/index.css";
+  import "./index.css";
 
   const lynxcard = new LynxCard({
     ...beforeConfigs,

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-canary",
-  "version": "0.10.0",
+  "version": "0.10.1-canary-20251229-1bb269b6",
   "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/XWebView/x-webview.css

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