@slopmachine/svelte 0.1.8 → 0.1.10

package/package.json

@@ -1,24 +1,17 @@
 {
   "name": "@slopmachine/svelte",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Svelte wrapper for SlopMachine",
   "type": "module",
-  "main": "./dist/index.js",
-  "svelte": "./dist/index.js",
+  "main": "src/index.ts",
+  "svelte": "src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts",
+      "default": "./src/index.ts"
     }
   },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "svelte-package -i src",
-    "prepublishOnly": "npm run build"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/slopmachine-dev/slopmachine-sdk.git"
@@ -28,9 +21,5 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@sveltejs/package": "^2.3.2",
-    "typescript": "^5.0.0"
   }
 }

package/{dist → src}/SlopImage.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { buildImageUrl, type SlopImageOptions } from "@slopmachine/core";
+  import type { Snippet } from "svelte";
 
   interface Props extends SlopImageOptions {
     class?: string;
+    loader?: Snippet;
   }
 
   let {
@@ -14,6 +16,7 @@
     variables = {},
     baseUrl = undefined,
     class: className = "",
+    loader,
     ...restProps
   }: Props = $props();
 
@@ -98,25 +101,36 @@
   style="aspect-ratio: {aspectRatio.replace(':', '/')};"
 >
   {#if isLoading}
-    <div class="loading-overlay">
-      <div class="spinner-container">
-        <svg
-          class="spinner"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
-          ></circle>
-          <path
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-        <span>Loading...</span>
+    {#if loader}
+      <div class="custom-loader-wrapper">
+        {@render loader()}
       </div>
-    </div>
-    <div class="shimmer-effect"></div>
+    {:else}
+      <div class="loading-overlay">
+        <div class="spinner-container">
+          <svg
+            class="spinner"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+          <span>Loading...</span>
+        </div>
+      </div>
+      <div class="shimmer-effect"></div>
+    {/if}
   {/if}
 
   <img
@@ -138,7 +152,8 @@
     height: 100%;
   }
 
-  .loading-overlay {
+  .loading-overlay,
+  .custom-loader-wrapper {
     position: absolute;
     top: 0;
     left: 0;
@@ -148,10 +163,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--muted, #f3f4f6);
     transition: opacity 300ms ease-in-out;
   }
 
+  .loading-overlay {
+    background-color: var(--muted, #f3f4f6);
+  }
+
   .spinner-container {
     display: flex;
     flex-direction: column;

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["svelte"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte"]
+}

package/dist/SlopImage.svelte.d.ts

@@ -1,8 +0,0 @@
-import { type SlopImageOptions } from "@slopmachine/core";
-interface Props extends SlopImageOptions {
-    class?: string;
-}
-declare const SlopImage: import("svelte").Component<Props, {}, "">;
-type SlopImage = ReturnType<typeof SlopImage>;
-export default SlopImage;
-//# sourceMappingURL=SlopImage.svelte.d.ts.map

package/dist/SlopImage.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SlopImage.svelte.d.ts","sourceRoot":"","sources":["../src/SlopImage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGvE,UAAU,KAAM,SAAQ,gBAAgB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkHH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SlopImage } from "./SlopImage.svelte";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}