Merge pull request #726 from simonihmig/wc-blurhash

Support BlurHash in wc/lit package

.changeset/cuddly-knives-sell.md

@@ -0,0 +1,5 @@
+---
+'@responsive-image/wc': minor
+---
+
+Add BlurHash support to web component

.changeset/moody-fireants-remain.md

@@ -0,0 +1,6 @@
+---
+'@responsive-image/ember': patch
+'@responsive-image/core': patch
+---
+
+Extract BlurHash utils onto core

packages/core/package.json

@@ -23,10 +23,14 @@
     "test:watch": "vitest watch",
     "prepack": "pnpm turbo build"
   },
+  "peerDependencies": {
+    "blurhash": "^2.0.0"
+  },
   "devDependencies": {
     "@tsconfig/strictest": "2.0.5",
     "@typescript-eslint/eslint-plugin": "8.13.0",
     "@typescript-eslint/parser": "8.13.0",
+    "blurhash": "^2.0.0",
     "concurrently": "9.1.0",
     "eslint": "8.57.1",
     "eslint-config-prettier": "9.1.0",
@@ -37,13 +41,22 @@
     "typescript": "5.6.3",
     "vitest": "1.6.0"
   },
+  "peerDependenciesMeta": {
+    "blurhash": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./blurhash": {
+      "types": "./dist/blurhash.d.ts",
+      "default": "./dist/blurhash.js"
     }
   },
   "typesVersions": {

packages/core/src/blurhash.ts

@@ -0,0 +1,48 @@
+import { decode } from 'blurhash';
+
+const BLURHASH_ATTRIBUTE = 'data-ri-bh';
+const WIDTH_ATTRIBUTE = 'data-ri-bh-w';
+const HEIGHT_ATTRIBUTE = 'data-ri-bh-h';
+
+const BLURHASH_SCALE_FACTOR = 4;
+
+export function bh2url(
+  hash: string,
+  width: number,
+  height: number,
+): string | undefined {
+  const blurWidth = width * BLURHASH_SCALE_FACTOR;
+  const blurHeight = height * BLURHASH_SCALE_FACTOR;
+  const pixels = decode(hash, blurWidth, blurHeight);
+  const canvas = document.createElement('canvas');
+  canvas.width = blurWidth;
+  canvas.height = blurHeight;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return undefined;
+  }
+
+  const imageData = ctx.createImageData(blurWidth, blurHeight);
+  imageData.data.set(pixels);
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL('image/png');
+}
+
+export function applySSR(): void {
+  const images = document.querySelectorAll<HTMLImageElement>(
+    `img[${BLURHASH_ATTRIBUTE}]`,
+  );
+  images.forEach((image) => {
+    const hash = image.getAttribute(BLURHASH_ATTRIBUTE);
+    const width = image.getAttribute(WIDTH_ATTRIBUTE);
+    const height = image.getAttribute(HEIGHT_ATTRIBUTE);
+
+    if (hash && width && height) {
+      const url = bh2url(hash, parseInt(width, 10), parseInt(height, 10));
+      if (url) {
+        image.style.backgroundImage = `url("${url}")`;
+        image.style.backgroundSize = 'cover';
+      }
+    }
+  });
+}

packages/ember/src/blurhash.ts

@@ -1,48 +1 @@
-import { decode } from 'blurhash';
-
-const BLURHASH_ATTRIBUTE = 'data-ri-bh';
-const WIDTH_ATTRIBUTE = 'data-ri-bh-w';
-const HEIGHT_ATTRIBUTE = 'data-ri-bh-h';
-
-const BLURHASH_SCALE_FACTOR = 4;
-
-export function bh2url(
-  hash: string,
-  width: number,
-  height: number,
-): string | undefined {
-  const blurWidth = width * BLURHASH_SCALE_FACTOR;
-  const blurHeight = height * BLURHASH_SCALE_FACTOR;
-  const pixels = decode(hash, blurWidth, blurHeight);
-  const canvas = document.createElement('canvas');
-  canvas.width = blurWidth;
-  canvas.height = blurHeight;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) {
-    return undefined;
-  }
-
-  const imageData = ctx.createImageData(blurWidth, blurHeight);
-  imageData.data.set(pixels);
-  ctx.putImageData(imageData, 0, 0);
-  return canvas.toDataURL('image/png');
-}
-
-export function applySSR(): void {
-  const images = document.querySelectorAll<HTMLImageElement>(
-    `img[${BLURHASH_ATTRIBUTE}]`,
-  );
-  images.forEach((image) => {
-    const hash = image.getAttribute(BLURHASH_ATTRIBUTE);
-    const width = image.getAttribute(WIDTH_ATTRIBUTE);
-    const height = image.getAttribute(HEIGHT_ATTRIBUTE);
-
-    if (hash && width && height) {
-      const url = bh2url(hash, parseInt(width, 10), parseInt(height, 10));
-      if (url) {
-        image.style.backgroundImage = `url("${url}")`;
-        image.style.backgroundSize = 'cover';
-      }
-    }
-  });
-}
+export * from '@responsive-image/core/blurhash';

packages/ember/src/components/responsive-image.ts

@@ -137,7 +137,6 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
     }
 
     const url = this.args.src.imageUrlFor(this.width ?? 640);
-    console.log(url);
     return url;
   }
 

packages/wc/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@responsive-image/core": "workspace:^",
+    "blurhash": "^2.0.0",
     "lit": "^3.1.4"
   },
   "devDependencies": {

packages/wc/src/responsive-image.ts

@@ -2,13 +2,15 @@ import { html, css, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import {
   type ImageType,
-  // type LqipBlurhash,
+  type LqipBlurhash,
   type ImageData,
   env,
   getDestinationWidthBySize,
 } from '@responsive-image/core';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { bh2url } from '@responsive-image/core/blurhash';
+import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 interface ImageSource {
   srcset: string;
@@ -153,6 +155,25 @@ export class ResponsiveImage extends LitElement {
     return this.src.imageUrlFor(this.imgWidth ?? 640);
   }
 
+  get hasLqipBlurhash(): boolean {
+    return this.src.lqip?.type === 'blurhash';
+  }
+
+  get showLqipBlurhash(): boolean {
+    return !this.isLoaded && this.hasLqipBlurhash;
+  }
+
+  get lqipBlurhash(): string | undefined {
+    if (!this.hasLqipBlurhash) {
+      return undefined;
+    }
+
+    const { hash, width, height } = this.src.lqip as LqipBlurhash;
+    const uri = bh2url(hash, width, height);
+
+    return `url("${uri}")`;
+  }
+
   render() {
     const { lqip } = this.src;
 
@@ -166,6 +187,13 @@ export class ResponsiveImage extends LitElement {
         (lqip?.type === 'color' || lqip?.type === 'inline') && !this.isLoaded,
     };
 
+    const styles: StyleInfo = this.showLqipBlurhash
+      ? {
+          backgroundImage: this.lqipBlurhash,
+          backgroundSize: 'cover',
+        }
+      : {};
+
     return html`
       <picture>
         ${this.sourcesSorted.map(
@@ -180,6 +208,7 @@ export class ResponsiveImage extends LitElement {
           width=${ifDefined(this.imgWidth)}
           height=${ifDefined(this.imgHeight)}
           class=${classMap(classes)}
+          style=${styleMap(styles)}
           src=${ifDefined(this.imgSrc)}
           alt=${this.alt}
           loading=${this.loading}

packages/wc/test/responsive-image.test.ts

@@ -448,7 +448,7 @@ describe('ResponsiveImage', () => {
       });
     });
 
-    describe.skip('blurhash', () => {
+    describe('blurhash', () => {
       it('it sets LQIP from blurhash as background', async () => {
         const { onload, loaded } = imageLoaded();
         const imageData: ImageData = {
@@ -487,7 +487,7 @@ describe('ResponsiveImage', () => {
         expect(
           window.getComputedStyle(imgEl!).backgroundImage,
           'after image is loaded the background PNG is removed',
-        ).to.be('none');
+        ).to.equal('none');
       });
     });
   });