@slopmachine/svelte 0.1.25 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slopmachine/svelte",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "llms": "https://docs.slopmachine.dev/llms.txt",
   "llmsFull": "https://docs.slopmachine.dev/llms-full.txt",
   "description": "The official Svelte SDK for Slop Machine",

package/src/SlopImage.svelte

@@ -15,7 +15,7 @@
   />
   ```
 
-  @version 0.1.25
+  @version 0.1.26
 -->
 <script lang="ts">
   import {
@@ -50,6 +50,7 @@
      * Additional CSS classes to apply directly to the `<img />` element.
      */
     imageClass?: string;
+    [key: string]: any;
   }
 
   let {
@@ -66,6 +67,8 @@
     objectFit = "cover",
     imageClass = "",
     loader,
+    onload,
+    onerror,
     ...restProps
   }: SlopImageProps = $props();
 
@@ -142,12 +145,14 @@
     }
   });
 
-  function handleLoad() {
+  function handleLoad(e: Event) {
     isLoading = false;
+    onload?.(e);
   }
 
-  function handleError() {
+  function handleError(e: Event) {
     isLoading = false;
+    onerror?.(e);
   }
 </script>
 
@@ -193,10 +198,10 @@
       {src}
       {alt}
       style="object-fit: {objectFit};"
-      onload={handleLoad}
-      onerror={handleError}
       class="slop-image {imageClass} {isLoading ? '' : 'loaded'}"
       {...restProps}
+      onload={handleLoad}
+      onerror={handleError}
     />
   </div>
 </div>

package/src/SlopText.svelte

@@ -23,7 +23,7 @@
    * </SlopText>
    * ```
    *
-   * @version 0.1.25
+   * @version 0.1.26
    */
   interface Props {
     // SlopTextOptions

package/src/SlopVideo.svelte

@@ -18,7 +18,7 @@
   />
   ```
 
-  @version 0.1.25
+  @version 0.1.26
 -->
 <script lang="ts">
   import {
@@ -70,6 +70,8 @@
     loop = true,
     muted = true,
     playsinline = true,
+    onloadeddata,
+    onerror,
     ...restProps
   }: SlopVideoProps = $props();
 
@@ -146,12 +148,14 @@
     }
   });
 
-  function handleLoadedData() {
+  function handleLoadedData(e: Event) {
     isLoading = false;
+    onloadeddata?.(e);
   }
 
-  function handleError() {
+  function handleError(e: Event) {
     isLoading = false;
+    onerror?.(e);
   }
 </script>
 
@@ -200,10 +204,10 @@
       {loop}
       {muted}
       {playsinline}
-      onloadeddata={handleLoadedData}
-      onerror={handleError}
       class:loaded={!isLoading}
       {...restProps}
+      onloadeddata={handleLoadedData}
+      onerror={handleError}
     ></video>
   </div>
 </div>