@lynx-js/web-elements-canary 0.8.5-canary-20250905-877d1535 → 0.8.6-canary-20250911-1d97fce6

package/CHANGELOG.md

@@ -1,13 +1,33 @@
 # @lynx-js/web-elements
 
-## 0.8.5-canary-20250905120148-877d15356c059640bfb350eea2675af63376c8e4
+## 0.8.6-canary-20250911061409-1d97fce68178418f6af8d50e54ab24a5567452b7
+
+### Patch Changes
+
+- fix: 1. svg use image tag to render, to differentiate background-image styles ([#1668](https://github.com/lynx-family/lynx-stack/pull/1668))
+
+  1. use blob instead of raw data-uri
+
+  > Not using data-uri(data:image/svg+xml;utf8,${props.content})
+  > since it has follow limitations:
+  >
+  > < and > must be encoded to %3C and %3E.
+  > Double quotes must be converted to single quotes.
+  > Colors must use a non-hex format because # will not work inside data-uri.
+  > See: https://codepen.io/zvuc/pen/BWNLJL
+  > Instead, we use modern Blob API to create SVG URL that have the same support
+
+- Updated dependencies [[`1d97fce`](https://github.com/lynx-family/lynx-stack/commit/1d97fce68178418f6af8d50e54ab24a5567452b7)]:
+  - @lynx-js/web-elements-template@0.8.6-canary-20250911061409-1d97fce68178418f6af8d50e54ab24a5567452b7
+
+## 0.8.5
 
 ### Patch Changes
 
 - fix: register attr of width is set to height incorrectly ([#1649](https://github.com/lynx-family/lynx-stack/pull/1649))
 
 - Updated dependencies []:
-  - @lynx-js/web-elements-template@0.8.5-canary-20250905120148-877d15356c059640bfb350eea2675af63376c8e4
+  - @lynx-js/web-elements-template@0.8.5
 
 ## 0.8.4
 

package/dist/XSvg/XSvg.js

@@ -1,63 +1,84 @@
-import { __esDecorate, __runInitializers } from "tslib";
+import { __esDecorate, __runInitializers, __setFunctionName } 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, bindToStyle, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { Component, bindToStyle, genDomGetter, registerAttributeHandler, registerEventEnableStatusChangeHandler, } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js';
+import { templateXSvg } from '@lynx-js/web-elements-template';
 let XSvgFeatures = (() => {
+    let _instanceExtraInitializers = [];
     let _private_handleSrc_decorators;
-    let _private_handleSrc_initializers = [];
-    let _private_handleSrc_extraInitializers = [];
+    let _private_handleSrc_descriptor;
     let _private_handleContent_decorators;
-    let _private_handleContent_initializers = [];
-    let _private_handleContent_extraInitializers = [];
+    let _private_handleContent_descriptor;
+    let _private_enableLoadEvent_decorators;
+    let _private_enableLoadEvent_descriptor;
     return class XSvgFeatures {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handleSrc_decorators = [registerAttributeHandler('src', true)];
             _private_handleContent_decorators = [registerAttributeHandler('content', true)];
-            __esDecorate(null, null, _private_handleSrc_decorators, { kind: "field", name: "#handleSrc", static: false, private: true, access: { has: obj => #handleSrc in obj, get: obj => obj.#handleSrc, set: (obj, value) => { obj.#handleSrc = value; } }, metadata: _metadata }, _private_handleSrc_initializers, _private_handleSrc_extraInitializers);
-            __esDecorate(null, null, _private_handleContent_decorators, { kind: "field", name: "#handleContent", static: false, private: true, access: { has: obj => #handleContent in obj, get: obj => obj.#handleContent, set: (obj, value) => { obj.#handleContent = value; } }, metadata: _metadata }, _private_handleContent_initializers, _private_handleContent_extraInitializers);
+            _private_enableLoadEvent_decorators = [registerEventEnableStatusChangeHandler('load')];
+            __esDecorate(this, _private_handleSrc_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (!newVal) {
+                        this.#getImg().src = '';
+                    }
+                    else {
+                        this.#getImg().src = newVal;
+                    }
+                }, "#handleSrc") }, _private_handleSrc_decorators, { kind: "method", name: "#handleSrc", static: false, private: true, access: { has: obj => #handleSrc in obj, get: obj => obj.#handleSrc }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleContent_descriptor = { value: __setFunctionName(function (content) {
+                    this.#url && URL.revokeObjectURL(this.#url);
+                    if (!content) {
+                        this.#url = '';
+                        return;
+                    }
+                    const blob = new Blob([content], {
+                        type: 'image/svg+xml;charset=UTF-8',
+                    });
+                    const src = URL.createObjectURL(blob);
+                    this.#url = src;
+                    this.#getImg().src = src;
+                }, "#handleContent") }, _private_handleContent_decorators, { kind: "method", name: "#handleContent", static: false, private: true, access: { has: obj => #handleContent in obj, get: obj => obj.#handleContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_enableLoadEvent_descriptor = { value: __setFunctionName(function (status) {
+                    if (status) {
+                        this.#getImg().addEventListener('load', this.#teleportLoadEvent, {
+                            passive: true,
+                        });
+                    }
+                    else {
+                        this.#getImg().removeEventListener('load', this.#teleportLoadEvent);
+                    }
+                }, "#enableLoadEvent") }, _private_enableLoadEvent_decorators, { kind: "method", name: "#enableLoadEvent", static: false, private: true, access: { has: obj => #enableLoadEvent in obj, get: obj => obj.#enableLoadEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = ['src', 'content'];
-        #dom;
-        #loadEventInvoker = new Image();
-        #handleSrc = __runInitializers(this, _private_handleSrc_initializers, bindToStyle(() => this.#dom, 'background-image', (src) => {
-            this.#loadEventInvoker.src = src;
-            return `url(${src})`;
-        }));
-        #handleContent = (__runInitializers(this, _private_handleSrc_extraInitializers), __runInitializers(this, _private_handleContent_initializers, bindToStyle(() => this.#dom, 'background-image', (content) => {
-            if (!content)
-                return '';
-            // https://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
-            const src = 'data:image/svg+xml;base64,'
-                + btoa(unescape(encodeURIComponent(content)));
-            this.#loadEventInvoker.src = src;
-            return `url("${src}")`;
-        })));
-        #fireLoadEvent = (__runInitializers(this, _private_handleContent_extraInitializers), () => {
-            const { width, height } = this.#loadEventInvoker;
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #url = null;
+        #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
+        get #handleSrc() { return _private_handleSrc_descriptor.value; }
+        get #handleContent() { return _private_handleContent_descriptor.value; }
+        get #enableLoadEvent() { return _private_enableLoadEvent_descriptor.value; }
+        #teleportLoadEvent = () => {
             this.#dom.dispatchEvent(new CustomEvent('load', {
                 ...commonComponentEventSetting,
                 detail: {
-                    width,
-                    height,
+                    width: this.#getImg().naturalWidth,
+                    height: this.#getImg().naturalHeight,
                 },
             }));
-        });
+        };
         constructor(dom) {
             this.#dom = dom;
-            this.#loadEventInvoker.addEventListener('load', this.#fireLoadEvent);
         }
     };
 })();
 export { XSvgFeatures };
 let XSvg = (() => {
-    let _classDecorators = [Component('x-svg', [CommonEventsAndMethods, XSvgFeatures])];
+    let _classDecorators = [Component('x-svg', [CommonEventsAndMethods, XSvgFeatures], templateXSvg())];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements-canary",
-  "version": "0.8.5-canary-20250905-877d1535",
+  "version": "0.8.6-canary-20250911-1d97fce6",
   "private": false,
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
   ],
   "dependencies": {
     "@lynx-js/web-elements-reactive": "npm:@lynx-js/web-elements-reactive-canary@0.2.2",
-    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.8.5-canary-20250905-877d1535"
+    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.8.6-canary-20250911-1d97fce6"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/XImage/x-image.css

@@ -56,7 +56,7 @@ x-image[auto-size] {
   display: contents;
 }
 
-x-image[auto-size]::part(img) {
+x-image[auto-size]::part(img), x-svg::part(img) {
   margin: inherit;
   padding: inherit;
   width: inherit;

package/src/XSvg/x-svg.css

@@ -4,7 +4,12 @@
 // LICENSE file in the root directory of this source tree.
 */
 x-svg {
-  contain: strict;
-  background: no-repeat center;
-  background-size: 100% 100%;
+  contain: content;
+  display: flex;
+}
+
+x-svg::part(img) {
+  width: 100%;
+  height: 100%;
+  flex: 0 0 100%;
 }