@slopmachine/react 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @slopmachine/react
 
+## 0.7.0
+
+### Minor Changes
+
+- 2644625: Add error states to `SlopImage` and `SlopVideo` (React and Svelte).
+
+  - When generation or loading fails, the media slot now shows a default error message instead of a broken image or empty video, keeping the layout intact. The failed element is hidden from assistive technology.
+  - New `errorFallback` prop (React: node or `(error) => node`; Svelte: snippet receiving `{ error }`) to customise the error UI.
+  - New `onGenerationError(error)` callback, called once per URL.
+  - Errors are `SlopMachineError` instances (exported from all three packages) carrying the API's error message and HTTP `status` when the API rejected the request.
+  - Fixed: a stale URL check could affect the loading state after props changed (React had no request cancellation). Network/CORS failures of the HEAD check no longer end the loading state early; the media element's own load/error events decide.
+  - Svelte components no longer render an empty `src` attribute before the URL is ready.
+  - Core: new `SlopMachineError`, `checkRenderUrl()` and `createRenderUrlMonitor()` exports.
+
+### Patch Changes
+
+- Updated dependencies [2644625]
+  - @slopmachine/core@0.7.0
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,6 +1,12 @@
 import React from 'react';
-import { SlopImageOptions, ImageAspectRatio, SlopVideoOptions, VideoAspectRatio, SlopTextOptions } from '@slopmachine/core';
-export { ImageAspectRatio, RateResultOptions, RateResultResponse, ResultRating, SlopImageOptions, SlopTextOptions, SlopVideoOptions, VideoAspectRatio, preloadImage, preloadText, preloadVideo, rateResult } from '@slopmachine/core';
+import { SlopMachineError, SlopImageOptions, ImageAspectRatio, SlopVideoOptions, VideoAspectRatio, SlopTextOptions } from '@slopmachine/core';
+export { ImageAspectRatio, RateResultOptions, RateResultResponse, ResultRating, SlopImageOptions, SlopMachineError, SlopTextOptions, SlopVideoOptions, VideoAspectRatio, preloadImage, preloadText, preloadVideo, rateResult } from '@slopmachine/core';
+
+/**
+ * Content to render when generation or loading fails. Either a node, or a
+ * function that receives the error and returns a node.
+ */
+type SlopErrorFallback = React.ReactNode | ((error: SlopMachineError) => React.ReactNode);
 
 interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, Omit<SlopImageOptions, "aspectRatio"> {
     /**
@@ -12,6 +18,17 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
      * If not provided, a default spinner and shimmer effect will be shown.
      */
     loader?: React.ReactNode;
+    /**
+     * Content to display if the image fails to generate or load.
+     * Pass a node, or a function that receives the `SlopMachineError` and returns a node.
+     * If not provided, a default error message is shown in place of the image.
+     */
+    errorFallback?: SlopErrorFallback;
+    /**
+     * Called once per URL when the image fails to generate or load.
+     * `error.status` holds the HTTP status when the API reported the failure.
+     */
+    onGenerationError?: (error: SlopMachineError) => void;
     /**
      * How the image should be resized to fit its container. Defaults to "cover".
      */
@@ -47,7 +64,7 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  * />
  * ```
  *
- * @version 0.6.0
+ * @version 0.7.0
  */
 declare const SlopImage: React.FC<SlopImageProps>;
 
@@ -61,6 +78,17 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
      * If not provided, a default spinner and shimmer effect will be shown.
      */
     loader?: React.ReactNode;
+    /**
+     * Content to display if the video fails to generate or load.
+     * Pass a node, or a function that receives the `SlopMachineError` and returns a node.
+     * If not provided, a default error message is shown in place of the video.
+     */
+    errorFallback?: SlopErrorFallback;
+    /**
+     * Called once per URL when the video fails to generate or load.
+     * `error.status` holds the HTTP status when the API reported the failure.
+     */
+    onGenerationError?: (error: SlopMachineError) => void;
 }
 /**
  * Renders a video generated by Slop Machine.
@@ -90,7 +118,7 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  * />
  * ```
  *
- * @version 0.6.0
+ * @version 0.7.0
  */
 declare const SlopVideo: React.FC<SlopVideoProps>;
 
@@ -128,8 +156,8 @@ interface SlopTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
  * />
  * ```
  *
- * @version 0.6.0
+ * @version 0.7.0
  */
 declare const SlopText: React.ForwardRefExoticComponent<SlopTextProps & React.RefAttributes<HTMLDivElement>>;
 
-export { SlopImage, type SlopImageProps, SlopText, type SlopTextProps, SlopVideo, type SlopVideoProps };
+export { type SlopErrorFallback, SlopImage, type SlopImageProps, SlopText, type SlopTextProps, SlopVideo, type SlopVideoProps };

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
-import { SlopImageOptions, ImageAspectRatio, SlopVideoOptions, VideoAspectRatio, SlopTextOptions } from '@slopmachine/core';
-export { ImageAspectRatio, RateResultOptions, RateResultResponse, ResultRating, SlopImageOptions, SlopTextOptions, SlopVideoOptions, VideoAspectRatio, preloadImage, preloadText, preloadVideo, rateResult } from '@slopmachine/core';
+import { SlopMachineError, SlopImageOptions, ImageAspectRatio, SlopVideoOptions, VideoAspectRatio, SlopTextOptions } from '@slopmachine/core';
+export { ImageAspectRatio, RateResultOptions, RateResultResponse, ResultRating, SlopImageOptions, SlopMachineError, SlopTextOptions, SlopVideoOptions, VideoAspectRatio, preloadImage, preloadText, preloadVideo, rateResult } from '@slopmachine/core';
+
+/**
+ * Content to render when generation or loading fails. Either a node, or a
+ * function that receives the error and returns a node.
+ */
+type SlopErrorFallback = React.ReactNode | ((error: SlopMachineError) => React.ReactNode);
 
 interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, Omit<SlopImageOptions, "aspectRatio"> {
     /**
@@ -12,6 +18,17 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
      * If not provided, a default spinner and shimmer effect will be shown.
      */
     loader?: React.ReactNode;
+    /**
+     * Content to display if the image fails to generate or load.
+     * Pass a node, or a function that receives the `SlopMachineError` and returns a node.
+     * If not provided, a default error message is shown in place of the image.
+     */
+    errorFallback?: SlopErrorFallback;
+    /**
+     * Called once per URL when the image fails to generate or load.
+     * `error.status` holds the HTTP status when the API reported the failure.
+     */
+    onGenerationError?: (error: SlopMachineError) => void;
     /**
      * How the image should be resized to fit its container. Defaults to "cover".
      */
@@ -47,7 +64,7 @@ interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>,
  * />
  * ```
  *
- * @version 0.6.0
+ * @version 0.7.0
  */
 declare const SlopImage: React.FC<SlopImageProps>;
 
@@ -61,6 +78,17 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
      * If not provided, a default spinner and shimmer effect will be shown.
      */
     loader?: React.ReactNode;
+    /**
+     * Content to display if the video fails to generate or load.
+     * Pass a node, or a function that receives the `SlopMachineError` and returns a node.
+     * If not provided, a default error message is shown in place of the video.
+     */
+    errorFallback?: SlopErrorFallback;
+    /**
+     * Called once per URL when the video fails to generate or load.
+     * `error.status` holds the HTTP status when the API reported the failure.
+     */
+    onGenerationError?: (error: SlopMachineError) => void;
 }
 /**
  * Renders a video generated by Slop Machine.
@@ -90,7 +118,7 @@ interface SlopVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement
  * />
  * ```
  *
- * @version 0.6.0
+ * @version 0.7.0
  */
 declare const SlopVideo: React.FC<SlopVideoProps>;
 
@@ -128,8 +156,8 @@ interface SlopTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
  * />
  * ```
  *
- * @version 0.6.0
+ * @version 0.7.0
  */
 declare const SlopText: React.ForwardRefExoticComponent<SlopTextProps & React.RefAttributes<HTMLDivElement>>;
 
-export { SlopImage, type SlopImageProps, SlopText, type SlopTextProps, SlopVideo, type SlopVideoProps };
+export { type SlopErrorFallback, SlopImage, type SlopImageProps, SlopText, type SlopTextProps, SlopVideo, type SlopVideoProps };