@ssgoi/vue 6.2.0 → 6.4.0

package/README.md

@@ -52,19 +52,15 @@ const config = {
 </script>
 ```
 
-### 2. Wrap your pages
+### 2. Mark your pages
 
 ```vue
 <template>
-  <SsgoiTransition id="/">
+  <main data-ssgoi-transition="/">
     <h1>Welcome</h1>
     <!-- Page content -->
-  </SsgoiTransition>
+  </main>
 </template>
-
-<script setup>
-import { SsgoiTransition } from "@ssgoi/vue";
-</script>
 ```
 
 **That's it!** Your pages now transition smoothly with the configured effect.
@@ -115,14 +111,10 @@ const config = {
 
 <!-- pages/index.vue -->
 <template>
-  <SsgoiTransition id="/">
+  <main data-ssgoi-transition="/">
     <!-- Your page content -->
-  </SsgoiTransition>
+  </main>
 </template>
-
-<script setup>
-import { SsgoiTransition } from "@ssgoi/vue";
-</script>
 ```
 
 ## API Reference
@@ -144,20 +136,17 @@ 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>`.
 
 ```vue
-<SsgoiTransition id="/page-id">
+<main data-ssgoi-transition="/page-id">
   <!-- children -->
-</SsgoiTransition>
+</main>
 ```
 
-Props:
-
-- `id` - Unique identifier for the page (required)
-
 ## Built-in Transitions
 
 ### Page Transitions (`@ssgoi/vue/view-transitions`)

package/dist/index.d.ts

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

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

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Set `data-ssgoi-transition` directly on the page boundary
+ * element inside `<Ssgoi>` instead.
+ */
 interface Props {
     id: string;
     as?: keyof HTMLElementTagNameMap;

package/dist/ssgoi.vue.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("./context.cjs"),i=require("@ssgoi/core/internal"),c=e.defineComponent({__name:"ssgoi",props:{config:{},host:{}},setup(o){const t=o,n=e.computed(()=>i.createSggoiTransitionContext(t.config,{host:t.host}));return s.provideSsgoi(n),(r,u)=>e.renderSlot(r.$slots,"default")}});exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("./context.cjs"),i=require("@ssgoi/core/internal"),l=e.defineComponent({__name:"ssgoi",props:{config:{},host:{}},setup(c){const s=c,t=e.computed(()=>i.createSggoiTransitionContext(s.config,{host:s.host}));a.provideSsgoi(t);const n=e.ref(null);let o;const r=()=>{o?.(),o=void 0,n.value&&(o=i.observeSsgoiTransitions(n.value,t.value))};return e.onMounted(r),e.watch(t,r),e.onBeforeUnmount(()=>o?.()),(u,d)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"root",ref:n,"data-ssgoi-root":"",style:{display:"contents"}},[e.renderSlot(u.$slots,"default")],512))}});exports.default=l;

package/dist/ssgoi.vue.d.ts

@@ -9,11 +9,15 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
-    rootEl: any;
+    refs: {
+        root: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/ssgoi.vue.js

@@ -1,19 +1,32 @@
-import { defineComponent as n, computed as s, renderSlot as i } from "vue";
-import { provideSsgoi as p } from "./context.js";
-import { createSggoiTransitionContext as c } from "@ssgoi/core/internal";
-const d = /* @__PURE__ */ n({
+import { defineComponent as a, computed as c, ref as l, onMounted as p, watch as f, onBeforeUnmount as u, createElementBlock as m, openBlock as d, renderSlot as g } from "vue";
+import { provideSsgoi as v } from "./context.js";
+import { createSggoiTransitionContext as _, observeSsgoiTransitions as h } from "@ssgoi/core/internal";
+const y = /* @__PURE__ */ a({
   __name: "ssgoi",
   props: {
     config: {},
     host: {}
   },
-  setup(t) {
-    const o = t, e = s(
-      () => c(o.config, { host: o.host })
+  setup(r) {
+    const n = r, t = c(
+      () => _(n.config, { host: n.host })
     );
-    return p(e), (r, m) => i(r.$slots, "default");
+    v(t);
+    const e = l(null);
+    let o;
+    const s = () => {
+      o?.(), o = void 0, e.value && (o = h(e.value, t.value));
+    };
+    return p(s), f(t, s), u(() => o?.()), (i, S) => (d(), m("div", {
+      ref_key: "root",
+      ref: e,
+      "data-ssgoi-root": "",
+      style: { display: "contents" }
+    }, [
+      g(i.$slots, "default")
+    ], 512));
   }
 });
 export {
-  d as default
+  y as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/vue",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "description": "Vue bindings for SSGOI - Native app-like page transitions for Vue applications",
   "private": false,
   "type": "module",
@@ -33,7 +33,7 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^6.2.0"
+    "@ssgoi/core": "^6.4.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"