@ssgoi/svelte 6.2.0 → 6.4.0

package/README.md

@@ -51,19 +51,18 @@ pnpm add @ssgoi/svelte
 </Ssgoi>
 ```
 
-### 2. Wrap your pages
+### 2. Mark your pages
 
 ```svelte
 <!-- +page.svelte -->
 <script>
-  import { SsgoiTransition } from "@ssgoi/svelte";
   import { page } from "$app/stores";
 </script>
 
-<SsgoiTransition id={$page.url.pathname}>
+<main data-ssgoi-transition={$page.url.pathname}>
   <h1>Welcome</h1>
   <!-- Page content -->
-</SsgoiTransition>
+</main>
 ```
 
 **That's it!** Your pages now transition smoothly with the configured effect.
@@ -126,13 +125,12 @@ The route helpers return path transition groups, so nested arrays are accepted i
 
 <!-- +page.svelte -->
 <script>
-  import { SsgoiTransition } from '@ssgoi/svelte';
   import { page } from '$app/stores';
 </script>
 
-<SsgoiTransition id={$page.url.pathname}>
+<main data-ssgoi-transition={$page.url.pathname}>
   <!-- Your page content -->
-</SsgoiTransition>
+</main>
 ```
 
 ## API Reference
@@ -154,14 +152,15 @@ Props:
 - `config` - Transition configuration object
 - `host` - Optional external playback host for debug tooling
 
-#### `<SsgoiTransition>`
+#### `data-ssgoi-transition`
 
-Wrapper component for pages that should transition.
+Attribute for pages that should transition. Set it on the page boundary element
+inside `<Ssgoi>`.
 
 ```svelte
-<SsgoiTransition id="/page-id">
+<main data-ssgoi-transition="/page-id">
   <slot />
-</SsgoiTransition>
+</main>
 ```
 
 ## Built-in Transitions

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Ssgoi } from "./ssgoi.svelte";
+/** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
 export { default as SsgoiTransition } from "./ssgoi-transition.svelte";
 export * from "./types.js";
 export * from "@ssgoi/core";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { default as Ssgoi } from "./ssgoi.svelte";
+/** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
 export { default as SsgoiTransition } from "./ssgoi-transition.svelte";
 export * from "./types.js";
 export * from "@ssgoi/core";

package/dist/ssgoi-transition.svelte

@@ -2,6 +2,10 @@
   import type { Snippet } from "svelte";
   import { getSsgoiContext } from "./context";
 
+  /**
+   * @deprecated Set `data-ssgoi-transition` directly on the page boundary
+   * element inside `<Ssgoi>` instead.
+   */
   interface Props {
     id: string;
     children: Snippet;

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

@@ -1,4 +1,8 @@
 import type { Snippet } from "svelte";
+/**
+ * @deprecated Set `data-ssgoi-transition` directly on the page boundary
+ * element inside `<Ssgoi>` instead.
+ */
 interface Props {
     id: string;
     children: Snippet;

package/dist/ssgoi.svelte

@@ -3,7 +3,11 @@
   import type { SsgoiConfig } from "@ssgoi/core/types";
   import type { HostAnimation } from "@ssgoi/core/internal";
   import { setSsgoiContext } from "./context";
-  import { createSggoiTransitionContext } from "@ssgoi/core/internal";
+  import {
+    createSggoiTransitionContext,
+    observeSsgoiTransitions,
+  } from "@ssgoi/core/internal";
+  import { onMount } from "svelte";
 
   interface Props {
     config: SsgoiConfig;
@@ -15,6 +19,12 @@
 
   const contextValue = createSggoiTransitionContext(config, { host });
   setSsgoiContext(contextValue);
+
+  let root: HTMLDivElement;
+
+  onMount(() => observeSsgoiTransitions(root, contextValue));
 </script>
 
-{@render children()}
+<div bind:this={root} data-ssgoi-root="" style="display: contents">
+  {@render children()}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/svelte",
-  "version": "6.2.0",
+  "version": "6.4.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": "^6.2.0"
+    "@ssgoi/core": "^6.4.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"