@slopmachine/react 0.1.25 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/react",
-  "version": "0.1.25",
+  "version": "0.2.0",
   "llms": "https://docs.slopmachine.dev/llms.txt",
   "llmsFull": "https://docs.slopmachine.dev/llms-full.txt",
   "description": "The official React SDK for Slop Machine",
@@ -47,7 +47,7 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
-    "@slopmachine/core": "^0.1.25",
+    "@slopmachine/core": "^0.2.0",
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@types/marked": "^5.0.2",

package/src/components/SlopImage.tsx

@@ -44,6 +44,7 @@ export interface SlopImageProps
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopImage
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -51,12 +52,24 @@ export interface SlopImageProps
  *   className="rounded-lg"
  *   objectFit="cover"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopImage
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="1960s retro robot eating pizza on Mars"
+ *   aspectRatio="16:9"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.25
+ * @version 0.2.0
  */
 export const SlopImage: React.FC<SlopImageProps> = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "1:1",
   version,
@@ -70,6 +83,8 @@ export const SlopImage: React.FC<SlopImageProps> = ({
   objectFit = "cover",
   imageClassName,
   style,
+  onLoad,
+  onError,
   ...props
 }) => {
   // Construct API URL
@@ -77,6 +92,10 @@ export const SlopImage: React.FC<SlopImageProps> = ({
     () =>
       buildImageUrl({
         bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        metadata,
         aspectRatio,
         version,
         resultId,
@@ -88,6 +107,10 @@ export const SlopImage: React.FC<SlopImageProps> = ({
       }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -301,8 +324,15 @@ export const SlopImage: React.FC<SlopImageProps> = ({
             key={src}
             src={src}
             alt={alt}
-            onLoad={() => setIsLoading(false)}
-            onError={() => setIsLoading(false)}
+            {...props}
+            onLoad={(e) => {
+              setIsLoading(false);
+              onLoad?.(e);
+            }}
+            onError={(e) => {
+              setIsLoading(false);
+              onError?.(e);
+            }}
             className={cn(
               "h-full w-full transition-opacity duration-500",
               isLoading ? "opacity-0" : "opacity-100",
@@ -315,7 +345,6 @@ export const SlopImage: React.FC<SlopImageProps> = ({
               transition: "opacity 500ms",
               opacity: isLoading ? 0 : 1,
             }}
-            {...props}
           />
         </div>
       </div>

package/src/components/SlopText.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { buildTextUrl, type SlopTextOptions } from "@slopmachine/core";
 import { marked } from "marked";
 
@@ -24,20 +24,32 @@ export interface SlopTextProps
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopText
  *   bucketId="my-text-bucket"
  *   fallback={<div>Loading story...</div>}
  *   errorFallback={<div>Failed to load story</div>}
  *   className="text-lg text-gray-800"
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopText
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Write a whimsical haiku about quantum physics"
+ *   metadata={{ userId: "123" }}
+ * />
  * ```
  *
- * @version 0.1.25
+ * @version 0.2.0
  */
 export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
   (
     {
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       version,
       resultId,
       variables,
@@ -53,6 +65,34 @@ export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<Error | null>(null);
 
+    const rawUrl = useMemo(
+      () =>
+        buildTextUrl({
+          bucketId,
+          pipelineId,
+          siloId,
+          prompt,
+          metadata,
+          version,
+          resultId,
+          variables,
+          baseUrl,
+          attachments,
+        }),
+      [
+        bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        JSON.stringify(metadata),
+        version,
+        resultId,
+        JSON.stringify(variables),
+        baseUrl,
+        JSON.stringify(attachments),
+      ],
+    );
+
     useEffect(() => {
       let isMounted = true;
 
@@ -61,17 +101,8 @@ export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
           setLoading(true);
           setError(null);
 
-          const url = buildTextUrl({
-            bucketId,
-            version,
-            resultId,
-            variables,
-            baseUrl,
-            attachments,
-          });
-
           // Fetch the URL to get the content, following redirects automatically
-          const response = await fetch(url, { cache: "no-store" });
+          const response = await fetch(rawUrl, { cache: "no-store" });
           if (!response.ok) {
             let errorMessage = response.statusText;
             try {
@@ -108,14 +139,7 @@ export const SlopText = React.forwardRef<HTMLDivElement, SlopTextProps>(
       return () => {
         isMounted = false;
       };
-    }, [
-      bucketId,
-      version,
-      resultId,
-      JSON.stringify(variables),
-      JSON.stringify(attachments),
-      baseUrl,
-    ]);
+    }, [rawUrl]);
 
     if (error && errorFallback) {
       return <>{errorFallback}</>;

package/src/components/SlopVideo.tsx

@@ -36,6 +36,7 @@ export interface SlopVideoProps
  *
  * @example
  * ```tsx
+ * // Using a Bucket
  * <SlopVideo
  *   bucketId="my-bucket"
  *   resultId="some-result"
@@ -45,12 +46,24 @@ export interface SlopVideoProps
  *   loop
  *   muted
  * />
+ *
+ * // Using a Pipeline with runtime prompt
+ * <SlopVideo
+ *   pipelineId="pipe_live_abc123"
+ *   prompt="Drone shot of a cyberpunk city in rain"
+ *   aspectRatio="16:9"
+ *   metadata={{ campaign: "spring_launch" }}
+ * />
  * ```
  *
- * @version 0.1.25
+ * @version 0.2.0
  */
 export const SlopVideo: React.FC<SlopVideoProps> = ({
   bucketId,
+  pipelineId,
+  siloId,
+  prompt,
+  metadata,
   className,
   aspectRatio = "16:9",
   version,
@@ -66,6 +79,8 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
   loop = true,
   muted = true,
   playsInline = true,
+  onLoadedData,
+  onError,
   ...props
 }) => {
   // Construct API URL
@@ -73,6 +88,10 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
     () =>
       buildVideoUrl({
         bucketId,
+        pipelineId,
+        siloId,
+        prompt,
+        metadata,
         aspectRatio,
         version,
         resultId,
@@ -85,6 +104,10 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
       }),
     [
       bucketId,
+      pipelineId,
+      siloId,
+      prompt,
+      metadata,
       aspectRatio,
       version,
       resultId,
@@ -302,8 +325,15 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
             loop={loop}
             muted={muted}
             playsInline={playsInline}
-            onLoadedData={() => setIsLoading(false)}
-            onError={() => setIsLoading(false)}
+            {...props}
+            onLoadedData={(e) => {
+              setIsLoading(false);
+              onLoadedData?.(e);
+            }}
+            onError={(e) => {
+              setIsLoading(false);
+              onError?.(e);
+            }}
             className={cn(
               "h-full w-full object-cover transition-opacity duration-500",
               isLoading ? "opacity-0" : "opacity-100",
@@ -315,7 +345,6 @@ export const SlopVideo: React.FC<SlopVideoProps> = ({
               transition: "opacity 500ms",
               opacity: isLoading ? 0 : 1,
             }}
-            {...props}
           />
         </div>
       </div>