@ssgoi/svelte 7.0.4 → 7.1.0-beta.0

package/dist/sveltekit/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SsgoiRouteBoundary } from "./ssgoi-route-boundary.svelte";
+export type { RouteBoundaryState, SveltekitRouteLocation, SsgoiRouteBoundaryProps, } from "./types.js";

package/dist/sveltekit/index.js

@@ -0,0 +1 @@
+export { default as SsgoiRouteBoundary } from "./ssgoi-route-boundary.svelte";

package/dist/sveltekit/ssgoi-route-boundary.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { onNavigate } from "$app/navigation";
+  // Stores work throughout SvelteKit 2, including releases before $app/state.
+  import { page } from "$app/stores";
+  import { flushSync, onDestroy, untrack } from "svelte";
+  import type { SsgoiRouteBoundaryProps } from "./types.js";
+
+  let {
+    children,
+    as = "div",
+    routeKey,
+    resolve,
+    ...rest
+  }: SsgoiRouteBoundaryProps = $props();
+
+  const getBoundary = (url: URL) => {
+    const boundary = resolve?.({ pathname: url.pathname, url }) ?? {
+      id: url.pathname,
+    };
+    return { id: boundary.id, key: routeKey ?? boundary.key ?? boundary.id };
+  };
+
+  let current = $state(untrack(() => getBoundary($page.url)));
+  let mounted = $state(true);
+  let alive = true;
+
+  onDestroy(() => {
+    alive = false;
+  });
+
+  onNavigate((navigation) => {
+    if (!alive || !navigation.to) return;
+    const next = getBoundary(navigation.to.url);
+
+    if (next.key === current.key) {
+      // A persistent shell keeps its DOM, but its outgoing id must stay current.
+      return () => {
+        if (alive) current = next;
+      };
+    }
+
+    // Detach before Kit updates its live children snippet, preserving real OUT DOM.
+    flushSync(() => {
+      mounted = false;
+    });
+
+    return () => {
+      if (!alive) return;
+      flushSync(() => {
+        current = next;
+        mounted = true;
+      });
+    };
+  });
+</script>
+
+{#if mounted}
+  <svelte:element this={as} {...rest} data-ssgoi-transition={current.id}>
+    {@render children()}
+  </svelte:element>
+{/if}

package/dist/sveltekit/ssgoi-route-boundary.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SsgoiRouteBoundaryProps } from "./types.js";
+declare const SsgoiRouteBoundary: import("svelte").Component<SsgoiRouteBoundaryProps, {}, "">;
+type SsgoiRouteBoundary = ReturnType<typeof SsgoiRouteBoundary>;
+export default SsgoiRouteBoundary;

package/dist/sveltekit/types.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export interface RouteBoundaryState {
+    id: string;
+    key?: string | number;
+}
+export interface SveltekitRouteLocation {
+    pathname: string;
+    url: URL;
+}
+export interface SsgoiRouteBoundaryProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    as?: keyof HTMLElementTagNameMap;
+    routeKey?: string | number;
+    resolve?: (location: SveltekitRouteLocation) => RouteBoundaryState;
+}

package/dist/sveltekit/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/svelte",
-  "version": "7.0.4",
+  "version": "7.1.0-beta.0",
   "description": "Svelte bindings for SSGOI - Native app-like page transitions for Svelte and SvelteKit applications",
   "private": false,
   "main": "./dist/index.js",
@@ -14,10 +14,11 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@ssgoi/core": "^7.0.4"
+    "@ssgoi/core": "^7.1.0-beta.0"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "@sveltejs/kit": "*"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.5",
@@ -37,7 +38,9 @@
     "svelte-check": "^4.0.0",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.20.0",
-    "vite": "^6.2.6"
+    "vite": "^6.2.6",
+    "vitest": "^3.2.4",
+    "jsdom": "^26.1.0"
   },
   "keywords": [
     "svelte",
@@ -86,12 +89,23 @@
       "types": "./dist/view-transitions.d.ts",
       "svelte": "./dist/view-transitions.js",
       "import": "./dist/view-transitions.js"
+    },
+    "./sveltekit": {
+      "types": "./dist/sveltekit/index.d.ts",
+      "svelte": "./dist/sveltekit/index.js",
+      "import": "./dist/sveltekit/index.js"
+    }
+  },
+  "peerDependenciesMeta": {
+    "@sveltejs/kit": {
+      "optional": true
     }
   },
   "scripts": {
     "watch": "svelte-package --watch",
     "build": "svelte-package",
     "format": "prettier --write .",
-    "lint": "prettier --check . && eslint ."
+    "lint": "prettier --check . && eslint .",
+    "test:run": "vitest run"
   }
 }