From cd63e2e3ca005211441aa26512be90edc0f587fd Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sat, 19 Apr 2025 16:15:47 +0900 Subject: [PATCH] [bugfix/Refactor] Fix plugin compatibility list that was showed incorrectly. Change init function. --- src-ui/app/App.jsx | 11 ++--- .../_app_controllers/PluginsController.jsx | 6 +-- .../FetchLatestPluginsDataController.jsx | 16 ++----- .../LoadPluginsController.jsx | 7 +-- .../MergePluginsController.jsx | 12 ++++- .../setting_box/plugins/Plugins.jsx | 11 ++++- .../PluginCompatibilityList.jsx | 12 ++++- src-ui/logics/configs/plugins/usePlugins.js | 47 +++++++++++++++---- src-ui/store.js | 4 +- 9 files changed, 85 insertions(+), 41 deletions(-) diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 9c7e8aa0..c2b0e4f3 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -1,4 +1,3 @@ -import { useRef } from "react"; import { useTranslation } from "react-i18next"; import { @@ -29,10 +28,6 @@ export const App = () => { const { currentIsBackendReady } = useIsBackendReady(); const { WindowGeometryController } = useWindow(); const { i18n } = useTranslation(); - const pluginsControllerHasRunRef = useRef({ - is_initialized_load_plugin: false, - is_init_fetched_plugins_info: false, - }); return (
@@ -49,7 +44,7 @@ export const App = () => { {(currentIsBackendReady.data === false || currentIsVrctAvailable.data === false) ? - : + : } @@ -58,11 +53,11 @@ export const App = () => { ); }; -const Contents = ({ pluginsControllerHasRunRef }) => { +const Contents = () => { const { currentIsSoftwareUpdating } = useIsSoftwareUpdating(); return ( <> - + {currentIsSoftwareUpdating.data === false diff --git a/src-ui/app/_app_controllers/PluginsController.jsx b/src-ui/app/_app_controllers/PluginsController.jsx index 4f47db05..0abeb5cb 100644 --- a/src-ui/app/_app_controllers/PluginsController.jsx +++ b/src-ui/app/_app_controllers/PluginsController.jsx @@ -10,13 +10,13 @@ import { LoadPluginsController } from "./plugins_controllers/LoadPluginsControll import { FetchLatestPluginsDataController } from "./plugins_controllers/FetchLatestPluginsDataController"; import { MergePluginsController } from "./plugins_controllers/MergePluginsController"; -export const PluginsController = ({ pluginsControllerHasRunRef }) => { +export const PluginsController = () => { return ( <> - - + + ); }; \ No newline at end of file diff --git a/src-ui/app/_app_controllers/plugins_controllers/FetchLatestPluginsDataController.jsx b/src-ui/app/_app_controllers/plugins_controllers/FetchLatestPluginsDataController.jsx index 088d9cae..1f9d5e75 100644 --- a/src-ui/app/_app_controllers/plugins_controllers/FetchLatestPluginsDataController.jsx +++ b/src-ui/app/_app_controllers/plugins_controllers/FetchLatestPluginsDataController.jsx @@ -1,23 +1,15 @@ import { useEffect } from "react"; import { usePlugins } from "@logics_configs"; -export const FetchLatestPluginsDataController = ({ pluginsControllerHasRunRef }) => { +export const FetchLatestPluginsDataController = () => { const { asyncFetchPluginsInfo, + isAnyPluginEnabled_Init, } = usePlugins(); - const asyncInitFetchPluginsInfo = async () => { - try { - await asyncFetchPluginsInfo(); - } catch (error) { - console.error(error); - } - }; - useEffect(() => { - if (!pluginsControllerHasRunRef.current.is_init_fetched_plugins_info) { - asyncInitFetchPluginsInfo(); - pluginsControllerHasRunRef.current.is_init_fetched_plugins_info = true; + if (isAnyPluginEnabled_Init()) { + asyncFetchPluginsInfo(); } }, []); diff --git a/src-ui/app/_app_controllers/plugins_controllers/LoadPluginsController.jsx b/src-ui/app/_app_controllers/plugins_controllers/LoadPluginsController.jsx index c9c953da..46ad274b 100644 --- a/src-ui/app/_app_controllers/plugins_controllers/LoadPluginsController.jsx +++ b/src-ui/app/_app_controllers/plugins_controllers/LoadPluginsController.jsx @@ -1,7 +1,8 @@ import { useEffect } from "react"; import { usePlugins } from "@logics_configs"; +import { store } from "@store"; -export const LoadPluginsController = ({ pluginsControllerHasRunRef }) => { +export const LoadPluginsController = () => { const { asyncLoadAllPlugins, } = usePlugins(); @@ -15,9 +16,9 @@ export const LoadPluginsController = ({ pluginsControllerHasRunRef }) => { }; useEffect(() => { - if (!pluginsControllerHasRunRef.current.is_initialized_load_plugin) { + if (!store.is_initialized_load_plugin) { asyncInitLoadPlugins(); - pluginsControllerHasRunRef.current.is_initialized_load_plugin = true; + store.is_initialized_load_plugin = true; } }, []); diff --git a/src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx b/src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx index 85df42d1..9c8e02ca 100644 --- a/src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx +++ b/src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx @@ -10,7 +10,7 @@ export const MergePluginsController = () => { currentFetchedPluginsInfo, currentSavedPluginsStatus, downloadAndExtractPlugin, - toggleSavedPluginsStatus, + setTargetSavedPluginsStatus_Init, } = usePlugins(); const { checkVrctVerCompatibility } = useSoftwareVersion(); @@ -131,7 +131,15 @@ export const MergePluginsController = () => { !plugin.latest_plugin_info?.is_plugin_supported ) { plugin.is_enabled = false; - toggleSavedPluginsStatus(plugin.plugin_id); + setTargetSavedPluginsStatus_Init(plugin.plugin_id, false); + } + + if ( + !plugin.downloaded_plugin_info.is_plugin_supported && + plugin.is_outdated + ) { + plugin.is_enabled = false; + setTargetSavedPluginsStatus_Init(plugin.plugin_id, false); } } }); diff --git a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx index 46661133..5f6df29e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx @@ -1,11 +1,20 @@ -import React from "react"; +import { useEffect, useRef } from "react"; import { usePlugins } from "@logics_configs"; import styles from "./Plugins.module.scss"; import { PluginsControlComponent } from "../_components/plugins_control_component/PluginsControlComponent"; export const Plugins = () => { const { + asyncFetchPluginsInfo, } = usePlugins(); + const hasRunRef = useRef(false); + + useEffect(() => { + if (!hasRunRef.current) { + asyncFetchPluginsInfo(); + } + return () => hasRunRef.current = true; + }, []); return (
diff --git a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx index d460b104..dd0133b1 100644 --- a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx +++ b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx @@ -1,3 +1,4 @@ +import { useEffect } from "react"; import styles from "./PluginCompatibilityList.module.scss"; import { usePlugins } from "@logics_configs"; import CheckMarkSvg from "@images/check_mark.svg?react"; @@ -5,7 +6,14 @@ import XSvg from "@images/x_mark.svg?react"; import WarningSvg from "@images/warning.svg?react"; export const PluginCompatibilityList = () => { - const { enabledPluginsList } = usePlugins(); + const { + enabledPluginsList, + asyncFetchPluginsInfo, + } = usePlugins(); + + useEffect(() => { + asyncFetchPluginsInfo(); + }, []); // ダウンロード済みのもの const downloaded_plugin = enabledPluginsList().filter(p => p.is_downloaded); @@ -13,7 +21,7 @@ export const PluginCompatibilityList = () => { const compatible_plugins_list = []; const incompatible_plugins_list = []; for (const p of downloaded_plugin) { - if (!p.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !p.latest_plugin_info?.is_plugin_supported_latest_vrct) { + if (!p.downloaded_plugin_info?.is_plugin_supported_latest_vrct && !p.latest_plugin_info?.is_plugin_supported_latest_vrct) { // プラグイン最新版でも、VRCT最新版（VRCTアプデ後）に非対応のもの incompatible_plugins_list.push(p); } else { diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js index 813bf0f7..0a3e65f1 100644 --- a/src-ui/logics/configs/plugins/usePlugins.js +++ b/src-ui/logics/configs/plugins/usePlugins.js @@ -1,10 +1,11 @@ import { invoke } from "@tauri-apps/api/tauri"; import { IS_PLUGIN_PATH_DEV_MODE, getPluginsList } from "@ui_configs"; import { + store, + createAtomWithHook, useStore_SavedPluginsStatus, useStore_PluginsData, - useStore_IsFetchedPluginsInfo, useStore_FetchedPluginsInfo, useStore_LoadedPlugins, @@ -37,8 +38,6 @@ const PLUGIN_LIST_URL = getPluginsList(); export const usePlugins = () => { const { asyncStdoutToPython } = useStdoutToPython(); - const { currentIsFetchedPluginsInfo, updateIsFetchedPluginsInfo, pendingIsFetchedPluginsInfo } = useStore_IsFetchedPluginsInfo(); - const { currentFetchedPluginsInfo, updateFetchedPluginsInfo, pendingFetchedPluginsInfo } = useStore_FetchedPluginsInfo(); const { currentLoadedPlugins, updateLoadedPlugins, pendingLoadedPlugins } = useStore_LoadedPlugins(); @@ -222,7 +221,9 @@ export const usePlugins = () => { const asyncFetchPluginsInfo = async () => { - if (currentIsFetchedPluginsInfo.data) return; + if (store.is_fetched_plugins_info) return; + store.is_fetched_plugins_info = true; + try { const response = await asyncTauriFetchGithub(PLUGIN_LIST_URL); if (response.status !== 200) { @@ -247,7 +248,6 @@ export const usePlugins = () => { }) ); updateFetchedPluginsInfo(updated_list); - updateIsFetchedPluginsInfo(true); } catch (error) { console.error("Error fetching plugin info list: ", error); } @@ -327,11 +327,43 @@ export const usePlugins = () => { setSavedPluginsStatus(new_value); }; + + // Init時の処理 非対応のものを無効化する際に、savedDPluginsStatusから不要なものを削除する処理が邪魔になるので該当コードを削除したバージョン。Init以外で使用する時にはリファクタが必要になる。 + const setTargetSavedPluginsStatus_Init = (target_plugin_id, is_enabled) => { + const is_exists = currentSavedPluginsStatus.data.some( + (d) => d.plugin_id === target_plugin_id + ); + let new_value = []; + if (is_exists) { + new_value = currentSavedPluginsStatus.data.map((d) => { + if (d.plugin_id === target_plugin_id) { + d.is_enabled = is_enabled; + } + return d; + }); + } else { + new_value.push(...currentSavedPluginsStatus.data); + new_value.push({ + plugin_id: target_plugin_id, + is_enabled: is_enabled, + }); + } + + setSavedPluginsStatus(new_value); + }; + + const setSavedPluginsStatus = (plugins_status) => { pendingSavedPluginsStatus(); asyncStdoutToPython("/set/data/plugins_status", plugins_status); }; + // init時、currentPluginsDataからのデータではデータ更新が間に合わないので、currentSavedPluginsStatusから直接取得 + const isAnyPluginEnabled_Init = () => { + console.log(currentSavedPluginsStatus); + return currentSavedPluginsStatus.data.some(plugin => plugin.is_enabled); + }; + const isAnyPluginEnabled = () => { return currentPluginsData.data.some(plugin => plugin.is_enabled); }; @@ -345,6 +377,7 @@ export const usePlugins = () => { return { asyncFetchPluginsInfo, + isAnyPluginEnabled_Init, isAnyPluginEnabled, enabledPluginsList, @@ -357,9 +390,6 @@ export const usePlugins = () => { currentPluginsData, updatePluginsData, - currentIsFetchedPluginsInfo, - updateIsFetchedPluginsInfo, - currentFetchedPluginsInfo, updateFetchedPluginsInfo, @@ -367,6 +397,7 @@ export const usePlugins = () => { updateLoadedPlugins, toggleSavedPluginsStatus, + setTargetSavedPluginsStatus_Init, setSavedPluginsStatus, handlePendingPlugin, diff --git a/src-ui/store.js b/src-ui/store.js index 260285c7..f99ed73b 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -20,6 +20,8 @@ export const store = { log_box_ref: null, text_area_ref: null, is_applied_init_message_box_height: false, + is_initialized_load_plugin: false, + is_fetched_plugins_info: false, }; const generatePropertyNames = (base_name) => ({ @@ -278,8 +280,6 @@ export const { atomInstance: Atom_Hotkeys, useHook: useStore_Hotkeys } = createA }, "Hotkeys"); // Plugins -export const { atomInstance: Atom_IsFetchedPluginsInfo, useHook: useStore_IsFetchedPluginsInfo } = createAtomWithHook(false, "IsFetchedPluginsInfo"); - export const { atomInstance: Atom_FetchedPluginsInfo, useHook: useStore_FetchedPluginsInfo } = createAtomWithHook([], "FetchedPluginsInfo"); export const { atomInstance: Atom_LoadedPlugins, useHook: useStore_LoadedPlugins } = createAtomWithHook([], "LoadedPlugins"); export const { atomInstance: Atom_SavedPluginsStatus, useHook: useStore_SavedPluginsStatus } = createAtomWithHook([], "SavedPluginsStatus");