feat: ViewTransitionsPlugin and startViewTransition

src/index.ts

@@ -1,3 +1,2 @@
-import "./style.css";
-
-export { sum } from "./sum";
+export { ViewTransitionsPlugin } from './plugin'
+export { startViewTransition } from './transition'

src/plugin.ts

@@ -0,0 +1,13 @@
+import type { Plugin } from 'vue'
+
+export function ViewTransitionsPlugin(): Plugin {
+    return {
+        install(app) {
+            app.directive('view-transition-name', {
+                beforeMount(el, binding) {
+                    el.style.viewTransitionName = binding.value
+                }
+            })
+        }
+    }
+}

src/transition.ts

@@ -0,0 +1,27 @@
+interface ViewTransition {
+    ready: Promise<void>
+    finished: Promise<void>
+    skipTransition: () => void
+}
+
+export async function startViewTransition(): Promise<ViewTransition> {
+    const viewTransition = {} as ViewTransition
+    // @ts-expect-error startViewTransition is not existed on document yet
+    if (document.startViewTransition) {
+        await new Promise<void>((resolve) => {
+            // @ts-expect-error startViewTransition is not existed on document yet
+            const nativeViewTransition = document.startViewTransition(() => {
+                resolve()
+            })
+            viewTransition.ready = nativeViewTransition.ready
+            viewTransition.finished = nativeViewTransition.finished
+            viewTransition.skipTransition =
+                nativeViewTransition.skipTransition.bind(nativeViewTransition)
+        })
+    } else {
+        console.error(
+            "This browser doesn't support View Transitions Api, please check: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility"
+        )
+    }
+    return viewTransition
+}