From 896b3d817e42110f9ea80852053a705832a29e8b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 30 Jun 2022 03:53:40 +0900
Subject: [PATCH] make client component caching configurable

part of bffe6fb9bfa1fe61eab4f03bd318c010644d7afb
---
 locales/ja-JP.yml                                     | 2 ++
 packages/client/src/components/global/router-view.vue | 3 ++-
 packages/client/src/pages/settings/general.vue        | 6 ++++++
 packages/client/src/store.ts                          | 4 ++++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3b9bf4485..069ecf278 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -857,6 +857,8 @@ recentNDays: "直近{n}日"
 isSystemAccount: "システムにより自動で作成・管理されているアカウントです。"
 typeToConfirm: "この操作を行うには {x} と入力してください"
 deleteAccount: "アカウント削除"
+numberOfPageCache: "ページキャッシュ数"
+numberOfPageCacheDescription: "多くすると利便性が向上しますが、負荷とメモリ使用量が増えます。"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/components/global/router-view.vue b/packages/client/src/components/global/router-view.vue
index 56b53e012..7138faaa9 100644
--- a/packages/client/src/components/global/router-view.vue
+++ b/packages/client/src/components/global/router-view.vue
@@ -1,5 +1,5 @@
 <template>
-<KeepAlive max="5">
+<KeepAlive :max="defaultStore.state.numberOfPageCache">
 	<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
 </KeepAlive>
 </template>
@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import { inject, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { Router } from '@/nirax';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	router?: Router;
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 71612ba04..e7339af14 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -81,6 +81,10 @@
 		<option value="force">{{ i18n.ts._nsfw.force }}</option>
 	</FormSelect>
 
+	<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" class="_formBlock">
+		<template #label>{{ i18n.ts.numberOfPageCache }}</template>
+		<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
+	</FormRange>
 
 	<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
 
@@ -93,6 +97,7 @@ import { computed, ref, watch } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormSelect from '@/components/form/select.vue';
 import FormRadios from '@/components/form/radios.vue';
+import FormRange from '@/components/form/range.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import MkLink from '@/components/link.vue';
@@ -132,6 +137,7 @@ const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
 const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
 const disablePagesScript = computed(defaultStore.makeGetterSetter('disablePagesScript'));
 const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
+const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
 const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 0a4a59ddc..31aab5c79 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -229,6 +229,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	numberOfPageCache: {
+		where: 'device',
+		default: 5,
+	},
 	aiChanMode: {
 		where: 'device',
 		default: false,