@ssgoi/svelte 3.1.0 → 4.0.0

package/README.md

@@ -129,14 +129,14 @@ Animate specific elements during mount/unmount:
 ```svelte
 <script>
   import { transition } from "@ssgoi/svelte";
-  import { fadeIn, slideUp } from "@ssgoi/svelte/transitions";
+  import { fade, slide } from "@ssgoi/svelte/transitions";
 </script>
 
 <div
   use:transition={{
     key: "card",
-    in: fadeIn(),
-    out: slideUp(),
+    in: fade(),
+    out: slide({ direction: 'up' }),
   }}
 >
   <h2>Animated Card</h2>
@@ -210,8 +210,8 @@ Apply transitions to individual elements.
 <div
   use:transition={{
     key: "unique-key",
-    in: fadeIn(),
-    out: fadeOut(),
+    in: fade(),
+    out: fade(),
   }}
 >
   Content
@@ -246,9 +246,9 @@ Access transition state.
 
 ### Element Transitions (`@ssgoi/svelte/transitions`)
 
-- `fadeIn()` / `fadeOut()`
-- `slideUp()` / `slideDown()` / `slideLeft()` / `slideRight()`
-- `scaleIn()` / `scaleOut()`
+- `fade()`
+- `slide({ direction: 'up' | 'down' | 'left' | 'right' })`
+- `scale()`
 - `bounce()`
 - `blur()`
 - `rotate()`

package/dist/transition.d.ts

@@ -1,8 +1,15 @@
 import { type Transition, type TransitionKey, type TransitionScope } from "@ssgoi/core";
 type TransitionParams = Transition<undefined> & {
-    key?: TransitionKey;
+    key: TransitionKey;
     scope?: TransitionScope;
 };
+/**
+ * Svelte action for element transitions
+ *
+ * Uses Svelte's destroy callback for OUT transition detection.
+ * This ensures the correct transition config is used even when
+ * params are updated (e.g., during SvelteKit page navigation).
+ */
 export declare const transition: (node: HTMLElement, params: TransitionParams) => {
     update(newParams: TransitionParams): void;
     destroy(): void;

package/dist/transition.js

@@ -1,25 +1,32 @@
 import { transition as _transition, } from "@ssgoi/core";
+/**
+ * Svelte action for element transitions
+ *
+ * Uses Svelte's destroy callback for OUT transition detection.
+ * This ensures the correct transition config is used even when
+ * params are updated (e.g., during SvelteKit page navigation).
+ */
 export var transition = function (node, params) {
     var callback = _transition({
-        key: params === null || params === void 0 ? void 0 : params.key,
-        in: params === null || params === void 0 ? void 0 : params.in,
-        out: params === null || params === void 0 ? void 0 : params.out,
-        ref: node,
-        scope: params === null || params === void 0 ? void 0 : params.scope,
+        key: params.key,
+        in: params.in,
+        out: params.out,
+        scope: params.scope,
     });
     var cleanup = callback(node);
     return {
         update: function (newParams) {
             callback = _transition({
-                key: newParams === null || newParams === void 0 ? void 0 : newParams.key,
-                in: newParams === null || newParams === void 0 ? void 0 : newParams.in,
-                out: newParams === null || newParams === void 0 ? void 0 : newParams.out,
-                ref: node,
-                scope: newParams === null || newParams === void 0 ? void 0 : newParams.scope,
+                key: newParams.key,
+                in: newParams.in,
+                out: newParams.out,
+                scope: newParams.scope,
             });
             cleanup = callback(node);
         },
         destroy: function () {
+            // Call cleanup to trigger OUT transition with the correct config
+            // The cleanup function captures the transition config at registration time
             cleanup === null || cleanup === void 0 ? void 0 : cleanup();
         },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/svelte",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "Svelte bindings for SSGOI - Native app-like page transitions for Svelte and SvelteKit applications",
   "private": false,
   "main": "./dist/index.js",
@@ -14,7 +14,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@ssgoi/core": "^3.1.0"
+    "@ssgoi/core": "^4.0.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"