@lynx-js/web-elements 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @lynx-js/web-elements
 
+## 0.8.2
+
+### Patch Changes
+
+- Add crossorigin attribute support to x-image component ([#1340](https://github.com/lynx-family/lynx-stack/pull/1340))
+
+  - Added `crossorigin` to the `observedAttributes` array in `ImageSrc.ts`
+  - Implemented `#handleCrossorigin` handler using the `bindToAttribute` helper to forward the crossorigin attribute from the custom element to the internal `<img>` element
+  - Added comprehensive test coverage to verify the attribute is properly passed through to the shadow DOM
+
+  This enables CORS-enabled image loading when using `<x-image crossorigin="anonymous">` or similar configurations.
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.8.2
+
 ## 0.8.1
 
 ### Patch Changes

package/dist/XImage/ImageSrc.js

@@ -15,12 +15,16 @@ let ImageSrc = (() => {
     let _private_handleBlurRadius_decorators;
     let _private_handleBlurRadius_initializers = [];
     let _private_handleBlurRadius_extraInitializers = [];
+    let _private_handleCrossorigin_decorators;
+    let _private_handleCrossorigin_initializers = [];
+    let _private_handleCrossorigin_extraInitializers = [];
     return class ImageSrc {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handleSrc_decorators = [registerAttributeHandler('src', true)];
             _private_preloadPlaceholder_decorators = [registerAttributeHandler('placeholder', true)];
             _private_handleBlurRadius_decorators = [registerAttributeHandler('blur-radius', true)];
+            _private_handleCrossorigin_decorators = [registerAttributeHandler('crossorigin', true)];
             __esDecorate(this, _private_preloadPlaceholder_descriptor = { value: __setFunctionName(function (newVal) {
                     if (newVal) {
                         new Image().src = newVal;
@@ -28,9 +32,15 @@ let ImageSrc = (() => {
                 }, "#preloadPlaceholder") }, _private_preloadPlaceholder_decorators, { kind: "method", name: "#preloadPlaceholder", static: false, private: true, access: { has: obj => #preloadPlaceholder in obj, get: obj => obj.#preloadPlaceholder }, metadata: _metadata }, null, _instanceExtraInitializers);
             __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_handleBlurRadius_decorators, { kind: "field", name: "#handleBlurRadius", static: false, private: true, access: { has: obj => #handleBlurRadius in obj, get: obj => obj.#handleBlurRadius, set: (obj, value) => { obj.#handleBlurRadius = value; } }, metadata: _metadata }, _private_handleBlurRadius_initializers, _private_handleBlurRadius_extraInitializers);
+            __esDecorate(null, null, _private_handleCrossorigin_decorators, { kind: "field", name: "#handleCrossorigin", static: false, private: true, access: { has: obj => #handleCrossorigin in obj, get: obj => obj.#handleCrossorigin, set: (obj, value) => { obj.#handleCrossorigin = value; } }, metadata: _metadata }, _private_handleCrossorigin_initializers, _private_handleCrossorigin_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['src', 'placeholder', 'blur-radius'];
+        static observedAttributes = [
+            'src',
+            'placeholder',
+            'blur-radius',
+            'crossorigin',
+        ];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
         #handleSrc = __runInitializers(this, _private_handleSrc_initializers, bindToAttribute(this.#getImg, 'src', (newval) => {
@@ -38,7 +48,8 @@ let ImageSrc = (() => {
         }));
         get #preloadPlaceholder() { return _private_preloadPlaceholder_descriptor.value; }
         #handleBlurRadius = (__runInitializers(this, _private_handleSrc_extraInitializers), __runInitializers(this, _private_handleBlurRadius_initializers, bindToStyle(this.#getImg, '--blur-radius', undefined, true)));
-        #onImageError = (__runInitializers(this, _private_handleBlurRadius_extraInitializers), () => {
+        #handleCrossorigin = (__runInitializers(this, _private_handleBlurRadius_extraInitializers), __runInitializers(this, _private_handleCrossorigin_initializers, bindToAttribute(this.#getImg, 'crossorigin')));
+        #onImageError = (__runInitializers(this, _private_handleCrossorigin_extraInitializers), () => {
             const currentSrc = this.#getImg().src;
             const placeholder = this.#dom.getAttribute('placeholder');
             if (placeholder && currentSrc !== placeholder) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "private": false,
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
   ],
   "dependencies": {
     "@lynx-js/web-elements-reactive": "0.2.2",
-    "@lynx-js/web-elements-template": "0.8.1"
+    "@lynx-js/web-elements-template": "0.8.2"
   },
   "devDependencies": {
     "tslib": "^2.8.1"