refactor: Improve perf by marking more immutable object raw

xmcl-keystone-ui/src/composables/curseforge.ts

@@ -27,7 +27,6 @@ export function useCurseforge(
   pageSize: MaybeRef<number> = 10,
 ) {
   const data = reactive({
-    page: 0,
     pages: 5,
     totalCount: 0,
     projects: [] as Mod[],
@@ -60,7 +59,7 @@ export function useCurseforge(
 
   watch(_data, (v) => {
     if (v) {
-      data.projects = markRaw(v.data)
+      data.projects = markRaw(v.data.map(markRaw))
       v.pagination.totalCount = Math.min(1_0000, v.pagination.totalCount)
       data.totalCount = v.pagination.totalCount
       data.pages = Math.ceil(v.pagination.totalCount / get(pageSize))
@@ -152,7 +151,7 @@ export function useCurseforgeProjectFiles(projectId: Ref<number>, gameVersion: R
     }, inject(kSWRVConfig))
   watch(_data, (f) => {
     if (f) {
-      files.value = markRaw(f.data)
+      files.value = markRaw(f.data.map(markRaw))
       data.index = f.pagination.index
       data.pageSize = f.pagination.pageSize
       data.totalCount = f.pagination.totalCount
@@ -224,7 +223,7 @@ export function getCurseforgeProjectModel(projectId: Ref<number>) {
 
 export function useCurseforgeCategories() {
   const { error, isValidating: refreshing, mutate: refresh, data: categories } = useSWRV('/curseforge/categories', async () => {
-    const result = markRaw(await clientCurseforgeV1.getCategories())
+    const result = markRaw(await clientCurseforgeV1.getCategories()).map(markRaw)
     return result
   }, inject(kSWRVConfig))
   return { categories, refreshing, refresh, error }

xmcl-keystone-ui/src/composables/instanceMods.ts

@@ -113,9 +113,9 @@ export function useInstanceMods(instancePath: Ref<string>, instanceRuntime: Ref<
       }
     }
 
-    modsIconsMap.value = newIconMap
-    mods.value = newItems
-    provideRuntime.value = runtime
+    modsIconsMap.value = markRaw(newIconMap)
+    mods.value = markRaw(newItems.map(markRaw))
+    provideRuntime.value = markRaw(runtime)
   }
 
   // mod duplication detect

xmcl-keystone-ui/src/composables/instanceTemplates.ts

@@ -81,7 +81,7 @@ export function useInstanceTemplates(javas: Ref<JavaRecord[]>) {
   }
 
   function getPeerTemplate(id: string, name: string, icon: string, man: InstanceManifest) {
-    const result: Template = reactive({
+    const result: Template = markRaw({
       filePath: id,
       name: `${man.name ?? 'Instance'}@${name}`,
       description: '',
@@ -104,7 +104,7 @@ export function useInstanceTemplates(javas: Ref<JavaRecord[]>) {
         minMemory: man.minMemory,
         maxMemory: man.maxMemory,
       },
-      loadFiles: () => Promise.resolve(man.files),
+      loadFiles: () => Promise.resolve(markRaw(man.files.map(markRaw))),
       type: 'peer',
     })
 
@@ -117,13 +117,12 @@ export function useInstanceTemplates(javas: Ref<JavaRecord[]>) {
 
   function getFtbTemplate(man: CachedFTBModpackVersionManifest): Template {
     const [instanceConfig, files] = getFTBTemplateAndFile(man, javas.value)
-    return reactive({
+    return markRaw({
       filePath: `${man.parent}-${man.id.toString()}`,
       name: `${man.projectName}-${man.name}`,
-      description: computed(() => t('instanceTemplate.ftb')),
+      description: t('instanceTemplate.ftb'),
       instance: markRaw(instanceConfig),
-      loadingFiles: false,
-      loadFiles: () => Promise.resolve(files),
+      loadFiles: () => Promise.resolve(markRaw(files.map(markRaw))),
       type: 'ftb',
     })
   }

xmcl-keystone-ui/src/composables/instances.ts

@@ -13,43 +13,57 @@ export const kInstances: InjectionKey<ReturnType<typeof useInstances>> = Symbol(
 export function useInstances() {
   const { createInstance, getSharedInstancesState, editInstance, deleteInstance, validateInstancePath } = useService(InstanceServiceKey)
   const { state, isValidating, error } = useState(getSharedInstancesState, class extends InstanceState {
+    constructor() {
+      super()
+      this.all = markRaw({})
+      this.instances = markRaw([])
+    }
+
+    override instanceRemove(path: string): void {
+      delete this.all[path]
+      this.instances = markRaw(this.instances.filter(i => i.path !== path))
+    }
+
     override instanceAdd(instance: Instance) {
       if (!this.all[instance.path]) {
-        const object = {
+        const object = markRaw({
           ...instance,
-        }
+        })
         this.all[instance.path] = object
-        this.instances = [...this.instances, this.all[instance.path]]
+        this.instances = markRaw([...this.instances, this.all[instance.path]])
       }
     }
 
     override instanceEdit(settings: DeepPartial<InstanceSchema> & { path: string }) {
       const inst = this.instances.find(i => i.path === (settings.path))!
       if ('showLog' in settings) {
-        set(inst, 'showLog', settings.showLog)
+        inst.showLog = settings.showLog
       }
       if ('hideLauncher' in settings) {
-        set(inst, 'hideLauncher', settings.hideLauncher)
+        inst.hideLauncher = settings.hideLauncher
       }
       if ('fastLaunch' in settings) {
-        set(inst, 'fastLaunch', settings.fastLaunch)
+        inst.fastLaunch = settings.fastLaunch
       }
       if ('maxMemory' in settings) {
-        set(inst, 'maxMemory', settings.maxMemory)
+        inst.maxMemory = settings.maxMemory
       }
       if ('minMemory' in settings) {
-        set(inst, 'minMemory', settings.minMemory)
+        inst.minMemory = settings.minMemory
       }
       if ('assignMemory' in settings) {
-        set(inst, 'assignMemory', settings.assignMemory)
+        inst.assignMemory = settings.assignMemory
       }
       if ('vmOptions' in settings) {
-        set(inst, 'vmOptions', settings.vmOptions)
+        inst.vmOptions = settings.vmOptions
       }
       if ('mcOptions' in settings) {
-        set(inst, 'mcOptions', settings.mcOptions)
+        inst.mcOptions = settings.mcOptions
       }
       super.instanceEdit(settings)
+
+      const idx = this.instances.indexOf(inst)
+      this.instances = markRaw([...this.instances.slice(0, idx), inst, ...this.instances.slice(idx + 1)])
     }
   })
   const instances = computed(() => state.value?.instances ?? [])

xmcl-keystone-ui/src/composables/modrinth.ts

@@ -129,7 +129,7 @@ export function useModrinthSearchFunc(
       offset: index,
       index: get(sortBy),
       facets,
-    })
+    }).then(markRaw)
   }
 
   return search

xmcl-keystone-ui/src/composables/modrinthDependencies.ts

@@ -38,7 +38,7 @@ const visit = async (current: ResolvedDependency, visited: Set<string>, config:
       () => clientModrinthV2.getProjectVersions(child.project_id, { loaders: version.loaders, gameVersions: version.game_versions }),
       config.cache!, config.dedupingInterval!)
     const recommendedVersion = child.version_id ? versions.find(v => v.id === child.version_id)! : versions[0]
-    const result = await visit({
+    const result = await visit(markRaw({
       project,
       versions,
       recommendedVersion,
@@ -47,7 +47,7 @@ const visit = async (current: ResolvedDependency, visited: Set<string>, config:
         ? current.type === 'required' ? 'required' : current.type || child.dependency_type
         : child.dependency_type,
       relativeType: child.dependency_type,
-    }, visited, config)
+    }), visited, config)
     return result
   }))
 

xmcl-keystone-ui/src/composables/modrinthProject.ts

@@ -16,10 +16,10 @@ export function useModrinthProject(id: Ref<string>) {
     async (key) => {
       const cacheKey = getModrinthProjectKey(id.value)
       if (cacheKey === key) {
-        return clientModrinthV2.getProject(id.value)
+        return clientModrinthV2.getProject(id.value).then(markRaw)
       } else {
         const realId = key.split('/')[2]
-        return clientModrinthV2.getProject(realId)
+        return clientModrinthV2.getProject(realId).then(markRaw)
       }
     }, inject(kSWRVConfig))