feat(SLB-354): improve error handling and allow image source alteration

packages/npm/@amazeelabs/image/src/client.tsx

@@ -4,6 +4,7 @@ import {
   createContext,
   forwardRef,
   PropsWithChildren,
+  useContext,
   useEffect,
   useRef,
 } from 'react';
@@ -56,11 +57,13 @@ export const Image = forwardRef(function Image(
   { focus, ...props }: ImageProps,
   ref,
 ) {
+  const alterSrc = useContext(ImageSettingsContext).alterSrc;
   const imageRef = useRef<HTMLImageElement | null>(null);
   useEffect(() => {
     const r = imageRef || ref;
     if (r.current && props.src) {
-      imageDimensions(props.src)
+      const url = alterSrc ? alterSrc(props.src) : props.src;
+      imageDimensions(url)
         .then((source) => {
           if (!r.current || !source) {
             return;
@@ -70,7 +73,7 @@ export const Image = forwardRef(function Image(
             props.width,
             props.height,
           );
-          r.current.style.backgroundImage = `url(${props.src})`;
+          r.current.style.backgroundImage = `url(${url})`;
           r.current.style.backgroundSize = 'cover';
           r.current.style.maxWidth = '100%';
 
@@ -84,8 +87,10 @@ export const Image = forwardRef(function Image(
           r.current.src = sizerImage(target.width, target.height);
           return;
         })
-        .catch((error) => console.error(error));
+        .catch((error) => {
+          throw error;
+        });
     }
-  }, [imageRef, ref, focus, props.width, props.height, props.src]);
+  }, [imageRef, ref, focus, props.width, props.height, props.src, alterSrc]);
   return <img ref={imageRef || ref} {...props} />;
 });

packages/npm/@amazeelabs/image/src/lib.ts

@@ -16,6 +16,7 @@ export type ImageSettings = {
   staticDir: string;
   outputDir: string;
   outputPath: string;
+  alterSrc?: (src: string) => string;
 };
 export const defaultImageSettings = {
   outputDir: 'dist/public',

packages/npm/@amazeelabs/image/src/server.tsx

@@ -10,7 +10,6 @@ import { imageDimensionsFromData } from 'image-dimensions';
 import { cache, PropsWithChildren } from 'react';
 import sharp from 'sharp';
 
-import { ImageSettings as ClientImageSettings } from './client.js';
 import {
   calculateFocusExtraction,
   defaultImageSettings,
@@ -21,19 +20,25 @@ import {
   inferTargetDimensions,
 } from './lib.js';
 
-async function prepareFile(url: string) {
+async function prepareFile(src: string) {
+  const alterSrc = getSettings().alterSrc;
+  const url = alterSrc ? alterSrc(src) : src;
   if (url.match(/https?:\/\//)) {
     const dir = await mkdtemp(`${tmpdir}${sep}`);
     const tmpFileName = `${dir}/${createHash('md5').update(url).digest('hex')}`;
     try {
       const fd = await open(tmpFileName);
       await fd.close();
     } catch (err) {
-      const result = await fetch(url);
-      const fileStream = createWriteStream(tmpFileName, { flags: 'wx' });
-      if (result.body) {
-        await finished(Readable.fromWeb(result.body as any).pipe(fileStream));
-      } else {
+      try {
+        const result = await fetch(url);
+        const fileStream = createWriteStream(tmpFileName, { flags: 'wx' });
+        if (result.body) {
+          await finished(Readable.fromWeb(result.body as any).pipe(fileStream));
+        } else {
+          throw `Unable to download ${url}.`;
+        }
+      } catch (err) {
         throw `Unable to download ${url}.`;
       }
     }
@@ -139,7 +144,7 @@ export function ImageSettings({
   ...settings
 }: PropsWithChildren<Partial<ImageSettingsType>>) {
   setSettings({ ...defaultImageSettings, ...settings });
-  return <ClientImageSettings {...settings}>{children}</ClientImageSettings>;
+  return <>{children}</>;
 }
 
 export async function Image({

packages/npm/@amazeelabs/image/test/image.spec.ts

@@ -13,6 +13,7 @@ test('client', async ({ page }) => {
     throw error;
   });
   await page.goto('http://localhost:8080/client');
+  await page.waitForTimeout(1000);
   // await expect(page).toHaveScreenshot({
   //   fullPage: true,
   // });

packages/npm/@amazeelabs/image/test/src/client-settings.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import { ImageSettings } from '../../src/client.js';
+
+export function ClientImageSettings({ children }: PropsWithChildren<{}>) {
+  return (
+    <ImageSettings alterSrc={(src) => src.replace('9999', '8889')}>
+      {children}
+    </ImageSettings>
+  );
+}

packages/npm/@amazeelabs/image/test/src/pages/client.tsx

@@ -1,8 +1,11 @@
-import { Image, ImageSettings } from '../../../src/client.js';
+import React from 'react';
+
+import { Image } from '../../../src/client.js';
+import { ClientImageSettings } from '../client-settings';
 
 export default function Index() {
   return (
-    <ImageSettings>
+    <ClientImageSettings>
       <h2>No transformation</h2>
       <Image src="/goats.jpg" width={500} />
       <h2>Scale width</h2>
@@ -18,7 +21,7 @@ export default function Index() {
       <h2>Landscape with manual focus</h2>
       <Image src="/goats.jpg" width={300} height={100} focus={[380, 140]} />
       <h2>Remote file</h2>
-      <Image src="http://localhost:8889/goats.jpg" width={500} />
-    </ImageSettings>
+      <Image src="http://localhost:9999/goats.jpg" width={500} />
+    </ClientImageSettings>
   );
 }

packages/npm/@amazeelabs/image/test/src/pages/server.tsx

@@ -2,7 +2,11 @@ import { Image, ImageSettings } from '../../../src/server.js';
 
 export default function Index() {
   return (
-    <ImageSettings outputDir="dist/public/images" outputPath="/images">
+    <ImageSettings
+      outputDir="dist/public/images"
+      outputPath="/images"
+      alterSrc={(src) => src.replace('9999', '8889')}
+    >
       <h2>Scale width</h2>
       <Image src="/goats.jpg" width={200} />
       <h2>Crop</h2>
@@ -16,7 +20,7 @@ export default function Index() {
       <h2>Landscape with manual focus</h2>
       <Image src="/goats.jpg" width={300} height={100} focus={[380, 140]} />
       <h2>Remote file</h2>
-      <Image src="http://localhost:8889/goats.jpg" width={500} />
+      <Image src="http://localhost:9999/goats.jpg" width={500} />
     </ImageSettings>
   );
 }