This commit is contained in:
syuilo
2025-03-10 15:14:21 +09:00
parent 9e91f85370
commit f1014bc7f7
4 changed files with 36 additions and 20 deletions

View File

@@ -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;
}
});
}));
});
}