@ssgoi/svelte 3.0.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/index.d.ts

@@ -1,4 +1,5 @@
 export { transition } from "./transition.js";
 export { default as Ssgoi } from "./ssgoi.svelte";
 export { default as SsgoiTransition } from "./ssgoi-transition.svelte";
+export { default as TransitionScope } from "./transition-scope.svelte";
 export * from "./types.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { transition } from "./transition.js";
 export { default as Ssgoi } from "./ssgoi.svelte";
 export { default as SsgoiTransition } from "./ssgoi-transition.svelte";
+export { default as TransitionScope } from "./transition-scope.svelte";
 export * from "./types.js";

package/dist/transition-scope.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { createTransitionScope } from "@ssgoi/core";
+
+  interface Props {
+    children: () => any;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<!--
+  TransitionScope creates a boundary for local-scoped transitions.
+
+  Child elements with `scope: 'local'` will:
+  - Skip IN animation when mounted simultaneously with the scope
+  - Skip OUT animation when unmounted simultaneously with the scope
+
+  @example
+  ```svelte
+  <TransitionScope>
+    <div use:transition={[fadeIn(), { scope: 'local' }]}>
+      This will only animate when added/removed independently,
+      not when the entire scope mounts/unmounts.
+    </div>
+  </TransitionScope>
+  ```
+-->
+<div use:createTransitionScope style="display: contents;">
+  {@render children()}
+</div>

package/dist/transition-scope.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    children: () => any;
+}
+declare const TransitionScope: import("svelte").Component<Props, {}, "">;
+type TransitionScope = ReturnType<typeof TransitionScope>;
+export default TransitionScope;

package/dist/transition.d.ts

@@ -1,9 +1,17 @@
-import { type Transition, type TransitionKey } from "@ssgoi/core";
-export declare const transition: <TAnimationValue = number>(node: HTMLElement, params: Transition<undefined, TAnimationValue> & {
-    key?: TransitionKey;
-}) => {
-    update(newParams: Transition<undefined, TAnimationValue> & {
-        key?: TransitionKey;
-    }): void;
+import { type Transition, type TransitionKey, type TransitionScope } from "@ssgoi/core";
+type TransitionParams = Transition<undefined> & {
+    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;
 };
+export {};

package/dist/transition.js

@@ -1,23 +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,
+        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,
+                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.0.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.0.0"
+    "@ssgoi/core": "^4.0.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"