Refactor Solid component to use LqipHashProvider abstraction

packages/solid/src/lqip-hash/blurhash.ts

@@ -0,0 +1,26 @@
+import type { LqipBlurhash } from '@responsive-image/core';
+import type { LqipHashProvider } from './types';
+import { createResource } from 'solid-js';
+
+export class LqipBlurhashProvider implements LqipHashProvider {
+  private script;
+  constructor(private lqip: LqipBlurhash) {
+    // Allow lazy loading of dependency to make it pay as you go
+    const [script] = createResource(
+      () => import('@responsive-image/core/blurhash/decode'),
+    );
+
+    this.script = script;
+  }
+
+  get available() {
+    return !this.script.loading && !this.script.error;
+  }
+
+  get imageUrl() {
+    const { hash, width, height } = this.lqip;
+    const uri = this.script()?.decode2url(hash, width, height);
+
+    return `url("${uri}")`;
+  }
+}

packages/solid/src/lqip-hash/thumbhash.ts

@@ -0,0 +1,26 @@
+import type { LqipThumbhash } from '@responsive-image/core';
+import type { LqipHashProvider } from './types';
+import { createResource } from 'solid-js';
+
+export class LqipThumbhashProvider implements LqipHashProvider {
+  private script;
+  constructor(private lqip: LqipThumbhash) {
+    // Allow lazy loading of dependency to make it pay as you go
+    const [script] = createResource(
+      () => import('@responsive-image/core/thumbhash/decode'),
+    );
+
+    this.script = script;
+  }
+
+  get available() {
+    return !this.script.loading && !this.script.error;
+  }
+
+  get imageUrl() {
+    const { hash } = this.lqip;
+    const uri = this.script()?.decode2url(hash);
+
+    return `url("${uri}")`;
+  }
+}

packages/solid/src/lqip-hash/types.ts

@@ -0,0 +1,4 @@
+export interface LqipHashProvider {
+  available: boolean;
+  imageUrl: string | undefined;
+}

packages/solid/src/responsive-image.tsx

@@ -6,16 +6,12 @@ import {
   isLqipBlurhash,
   isLqipThumbhash,
 } from '@responsive-image/core';
-import {
-  Component,
-  createResource,
-  createSignal,
-  type JSX,
-  splitProps,
-} from 'solid-js';
+import { Component, createSignal, type JSX, splitProps } from 'solid-js';
 import { isServer } from 'solid-js/web';
 
 import './responsive-image.css';
+import { LqipBlurhashProvider } from './lqip-hash/blurhash.ts';
+import { LqipThumbhashProvider } from './lqip-hash/thumbhash.ts';
 
 export interface ResponsiveImageArgs {
   src: ImageData;
@@ -163,61 +159,31 @@ export const ResponsiveImage: Component<ResponsiveImageProps> = (props) => {
   const blurhashMeta = isLqipBlurhash(args.src.lqip)
     ? args.src.lqip
     : undefined;
-  let blurhashStyles: (() => JSX.CSSProperties | undefined) | undefined =
-    undefined;
-
-  if (!isServer && blurhashMeta) {
-    const [blurhashLib] = createResource(() => {
-      return import('@responsive-image/core/blurhash/decode');
-    });
-
-    blurhashStyles = () => {
-      if (isLoaded()) {
-        return undefined;
-      }
-
-      const { hash, width, height } = blurhashMeta;
-      const uri = blurhashLib()?.decode2url(hash, width, height);
-
-      if (!uri) {
-        return undefined;
-      }
-
-      return {
-        'background-image': `url("${uri}")`,
-        'background-size': 'cover',
-      };
-    };
-  }
-
   const thumbhashMeta = isLqipThumbhash(args.src.lqip)
     ? args.src.lqip
     : undefined;
-  let thumbhashStyles: (() => JSX.CSSProperties | undefined) | undefined =
-    undefined;
 
-  if (!isServer && thumbhashMeta) {
-    const [blurhashLib] = createResource(() => {
-      return import('@responsive-image/core/thumbhash/decode');
-    });
-
-    thumbhashStyles = () => {
-      if (isLoaded()) {
-        return undefined;
-      }
+  let hashStyles: (() => JSX.CSSProperties | undefined) | undefined = undefined;
 
-      const { hash } = thumbhashMeta;
-      const uri = blurhashLib()?.decode2url(hash);
+  if (!isServer) {
+    const hashProvider = blurhashMeta
+      ? new LqipBlurhashProvider(blurhashMeta)
+      : thumbhashMeta
+        ? new LqipThumbhashProvider(thumbhashMeta)
+        : undefined;
 
-      if (!uri) {
-        return undefined;
-      }
+    if (hashProvider) {
+      hashStyles = () => {
+        if (isLoaded() || !hashProvider.available) {
+          return undefined;
+        }
 
-      return {
-        'background-image': `url("${uri}")`,
-        'background-size': 'cover',
+        return {
+          'background-image': `${hashProvider.imageUrl}`,
+          'background-size': 'cover',
+        };
       };
-    };
+    }
   }
 
   return (
@@ -237,7 +203,7 @@ export const ResponsiveImage: Component<ResponsiveImageProps> = (props) => {
         data-ri-bh-w={blurhashMeta?.width}
         data-ri-bh-h={blurhashMeta?.height}
         data-ri-th={thumbhashMeta?.hash}
-        style={blurhashStyles?.() ?? thumbhashStyles?.()}
+        style={hashStyles?.()}
         on:load={() => setLoaded(true)}
       />
     </picture>