wip

packages/frontend/src/components/global/RouterView.vue

@@ -4,22 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<KeepAlive
-	:max="prefer.s.numberOfPageCache"
-	:exclude="pageCacheController"
->
-	<Suspense :timeout="0">
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+<Suspense :timeout="0">
+	<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
 
-		<template #fallback>
-			<MkLoading/>
-		</template>
-	</Suspense>
-</KeepAlive>
+	<template #fallback>
+		<MkLoading/>
+	</template>
+</Suspense>
 </template>
 
 <script lang="ts" setup>
 import { inject, onBeforeUnmount, provide, ref, shallowRef, computed, nextTick } from 'vue';
+import { v4 as uuid } from 'uuid';
 import type { IRouter, Resolved, RouteDef } from '@/nirax.js';
 import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
@@ -40,6 +36,11 @@ if (router == null) {
 const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
+provide(DI.viewId, uuid());
+
+const viewTransitionId = ref(uuid());
+provide(DI.viewTransitionId, viewTransitionId);
+
 function resolveNested(current: Resolved, d = 0): Resolved | null {
 	if (!props.nested) return current;
 
@@ -59,18 +60,29 @@ const currentPageComponent = shallowRef('component' in current.route ? current.r
 const currentPageProps = ref(current.props);
 const key = ref(router.getCurrentKey() + JSON.stringify(Object.fromEntries(current.props)));
 
-function onChange({ resolved, key: newKey }) {
+async function onChange({ resolved, key: newKey }) {
 	const current = resolveNested(resolved);
 	if (current == null || 'redirect' in current.route) return;
-	currentPageComponent.value = current.route.component;
-	currentPageProps.value = current.props;
-	key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
 
+	viewTransitionId.value = uuid();
+	await new Promise(resolve => setTimeout(resolve, 100));
 	nextTick(() => {
-		// ページ遷移完了後に再びキャッシュを有効化
-		if (clearCacheRequested.value) {
-			clearCacheRequested.value = false;
-		}
+		console.log('onChange', viewTransitionId.value);
+		document.startViewTransition(() => new Promise((res) => {
+			currentPageComponent.value = current.route.component;
+			currentPageProps.value = current.props;
+			key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
+
+			nextTick(async () => {
+				res();
+				//setTimeout(res, 1000);
+
+				// ページ遷移完了後に再びキャッシュを有効化
+				if (clearCacheRequested.value) {
+					clearCacheRequested.value = false;
+				}
+			});
+		}));
 	});
 }
 

packages/frontend/src/di.ts

@@ -9,4 +9,6 @@ import type { IRouter } from '@/nirax.js';
 export const DI = {
 	routerCurrentDepth: Symbol() as InjectionKey<number>,
 	router: Symbol() as InjectionKey<IRouter>,
+	viewId: Symbol() as InjectionKey<string>,
+	viewTransitionId: Symbol() as InjectionKey<Ref<string>>,
 };

packages/frontend/src/pages/notifications.vue

@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkSpacer :contentMax="800">
 		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'all'" key="all">
+				<div style="view-transition-name: a; padding: 64px;">BBBBBBBBB</div>
 				<XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/>
 			</div>
 			<div v-else-if="tab === 'mentions'" key="mention">
@@ -24,13 +25,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import { notificationTypes } from '@@/js/const.js';
 import XNotifications from '@/components/MkNotifications.vue';
 import MkNotes from '@/components/MkNotes.vue';
 import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
-import { notificationTypes } from '@@/js/const.js';
 
 const tab = ref('all');
 const includeTypes = ref<string[] | null>(null);

packages/frontend/src/pages/timeline.vue

@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkSpacer :contentMax="800">
 		<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
 			<div :key="src" ref="rootEl">
+				<div style="view-transition-name: a;">AAAAAAAAAA</div>
 				<MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
 					{{ i18n.ts._timelineDescription[src] }}
 				</MkInfo>