Merge pull request #764 from simonihmig/wc-proxy-events

Redispatch events, expose `complete` property
simonihmig · Nov 17, 2024 · 21a90fe · 21a90fe
2 parents c2c1658 + 8588cc6
commit 21a90fe
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 9 deletions.
diff --git a/.changeset/long-falcons-sing.md b/.changeset/long-falcons-sing.md
@@ -0,0 +1,5 @@
+---
+'@responsive-image/wc': minor
+---
+
+Redispatch events, expose `complete` property
diff --git a/packages/wc/src/responsive-image.ts b/packages/wc/src/responsive-image.ts
@@ -84,7 +84,7 @@ export class ResponsiveImage extends LitElement {
   @property({ type: String }) alt = '';
 
   @state()
-  private isLoaded = false;
+  public complete = false;
 
   get layout(): Layout {
     return this.width === undefined && this.height === undefined
@@ -177,7 +177,7 @@ export class ResponsiveImage extends LitElement {
   }
 
   get showLqipBlurhash(): boolean {
-    return !this.isLoaded && this.hasLqipBlurhash;
+    return !this.complete && this.hasLqipBlurhash;
   }
 
   get lqipBlurhash(): string | undefined {
@@ -197,11 +197,11 @@ export class ResponsiveImage extends LitElement {
     const classes: ClassInfo = {
       'ri-responsive': this.layout === Layout.RESPONSIVE,
       'ri-fixed': this.layout === Layout.FIXED,
-      'ri-lqip-inline': lqip?.type === 'inline' && !this.isLoaded,
-      'ri-lqip-color': lqip?.type === 'color' && !this.isLoaded,
-      'ri-lqip-blurhash': lqip?.type === 'blurhash' && !this.isLoaded,
+      'ri-lqip-inline': lqip?.type === 'inline' && !this.complete,
+      'ri-lqip-color': lqip?.type === 'color' && !this.complete,
+      'ri-lqip-blurhash': lqip?.type === 'blurhash' && !this.complete,
       [lqip?.type === 'color' || lqip?.type === 'inline' ? lqip.class : '']:
-        (lqip?.type === 'color' || lqip?.type === 'inline') && !this.isLoaded,
+        (lqip?.type === 'color' || lqip?.type === 'inline') && !this.complete,
     };
 
     const styles: StyleInfo = this.showLqipBlurhash
@@ -234,8 +234,15 @@ export class ResponsiveImage extends LitElement {
           crossorigin=${ifDefined(this.crossOrigin)}
           fetchpriority=${ifDefined(this.fetchPriority)}
           referrerpolicy=${ifDefined(this.referrerPolicy)}
-          @load=${() => {
-            this.isLoaded = true;
+          @load=${(event: Event) => {
+            this.complete = true;
+            this.dispatchEvent(new Event(event.type, event));
+          }}
+          @error=${(event: Event) => {
+            this.dispatchEvent(new ErrorEvent(event.type, event));
+          }}
+          @abort=${(event: Event) => {
+            this.dispatchEvent(new Event(event.type, event));
           }}
         />
       </picture>

diff --git a/packages/wc/test/responsive-image.test.ts b/packages/wc/test/responsive-image.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test, afterEach } from 'vitest';
 import { html } from 'lit';
-import { fixture, fixtureCleanup } from '@open-wc/testing-helpers';
+import { fixture, fixtureCleanup, waitUntil } from '@open-wc/testing-helpers';
 import { env, type ImageData } from '@responsive-image/core';
 
 import type { ResponsiveImage } from '../src/responsive-image.js';
@@ -146,6 +146,65 @@ describe('ResponsiveImage', () => {
     });
   });
 
+  describe('events', () => {
+    test('it redispatches load event', async () => {
+      const imageData: ImageData = {
+        imageTypes: ['jpeg', 'webp'],
+        // to replicate the loading timing, we need to load a real existing image
+        imageUrlFor: () => `/test-assets/test-image.jpg?${cacheBreaker()}`,
+      };
+
+      let triggeredEvent: Event | undefined;
+      await fixture<ResponsiveImage>(
+        html`<responsive-image
+          .src=${imageData}
+          @load=${(e: Event) => {
+            triggeredEvent = e;
+          }}
+        />`,
+      );
+
+      await waitUntil(() => triggeredEvent);
+      expect(triggeredEvent).toBeInstanceOf(Event);
+      expect(triggeredEvent?.type).toBe('load');
+    });
+
+    test('it redispatches error event', async () => {
+      let triggeredEvent: Event | undefined;
+      await fixture<ResponsiveImage>(
+        html`<responsive-image
+          .src=${defaultImageData}
+          @error=${(e: Event) => {
+            triggeredEvent = e;
+          }}
+        />`,
+      );
+
+      await waitUntil(() => triggeredEvent);
+      expect(triggeredEvent).toBeInstanceOf(ErrorEvent);
+      expect(triggeredEvent?.type).toBe('error');
+    });
+
+    test('it exposes complete property', async () => {
+      const imageData: ImageData = {
+        imageTypes: ['jpeg', 'webp'],
+        // to replicate the loading timing, we need to load a real existing image
+        imageUrlFor: () => `/test-assets/test-image.jpg?${cacheBreaker()}`,
+      };
+      const { onload, loaded } = imageLoaded();
+
+      const el = await fixture<ResponsiveImage>(
+        html`<responsive-image .src=${imageData} />`,
+      );
+      onload(el);
+
+      expect(el.complete).toBe(false);
+
+      await loaded;
+      expect(el.complete).toBe(true);
+    });
+  });
+
   describe('responsive layout', () => {
     test('it has responsive layout by default', async () => {
       const el = await fixture<ResponsiveImage>(