[Refactor/bugfix/TMP] TMP:

Separate plugins controller.
Add ui pattern for outdated plugins and the plugin that is not supported current vrct version but supported in newest vrct version.

src-ui/app/App.jsx

@@ -29,7 +29,10 @@ export const App = () => {
     const { currentIsBackendReady } = useIsBackendReady();
     const { WindowGeometryController } = useWindow();
     const { i18n } = useTranslation();
-    const fetchPluginsHasRunRef = useRef(false);
+    const fetchPluginsHasRunRef = useRef({
+        is_initialized_load_plugin: false,
+        is_fetched_plugins_info: false,
+    });
 
     return (
         <div className={styles.container}>

src-ui/app/_app_controllers/PluginsController.jsx

@@ -1,142 +1,15 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
-import { usePlugins } from "@logics_configs";
+import { LoadPluginsController } from "./plugins_controllers/LoadPluginsController";
-import clsx from "clsx";
+import { FetchLatestPluginsDataController } from "./plugins_controllers/FetchLatestPluginsDataController";
+import { MergeSavedPluginsStatusController } from "./plugins_controllers/MergeSavedPluginsStatusController";
 
-if (typeof window !== "undefined") {
+export const PluginsController = () => {
-    window.React = React;
-    window.clsx = clsx;
-}
 
-export const PluginsController = ({ fetchPluginsHasRunRef }) => {
+    return (
-    const {
+        <>
-        asyncLoadAllPlugins,
+            <LoadPluginsController />
-        asyncFetchPluginsInfo,
+            <FetchLatestPluginsDataController />
-        currentPluginsData,
+            <MergeSavedPluginsStatusController />
-        updatePluginsData,
+        </>
-        currentSavedPluginsStatus,
+    );
-        updateIsPluginsInitialized,
-        downloadAndExtractPlugin,
-    } = usePlugins();
-
-    useEffect(() => {
-        const loadPlugins = async () => {
-            try {
-                await asyncLoadAllPlugins();
-                const info_array = await asyncFetchPluginsInfo();
-                updatePluginsData(prev => {
-                    // Map を利用してそれぞれの配列を plugin_id で参照できるようにする
-                    const info_map = new Map(info_array.map(info => [info.plugin_id, info]));
-                    const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
-
-                    const new_data = [];
-                    for (const info of info_array) {
-                        let new_plugin_info = {};
-                        if (prev_map.has(info.plugin_id)) { // plugin_id 登録済み
-                            const target_downloaded_plugin = prev_map.get(info.plugin_id);
-                            if (target_downloaded_plugin.is_downloaded) { // 既にダウンロード済み
-                                const is_latest_version_available = !(target_downloaded_plugin.plugin_version === info.plugin_version);
-
-                                new_plugin_info = {
-                                    ...target_downloaded_plugin,
-                                    is_downloaded: true,
-                                    latest_plugin_info: { ...info },
-                                    is_latest_version_available: is_latest_version_available,
-                                    is_latest_version_already: (target_downloaded_plugin.downloaded_plugin_info?.plugin_version === info.plugin_version),
-                                };
-                            } else { // infoにもあり登録済みだがダウンロードされていない
-                                new_plugin_info = {
-                                    ...target_downloaded_plugin,
-                                    is_downloaded: false,
-                                    is_latest_version_already: false,
-                                    is_latest_version_available: info.is_latest_version_available,
-                                    latest_plugin_info: { ...info },
-                                }
-                            }
-                        } else { // 未ダウンロード
-                            new_plugin_info = {
-                                plugin_id: info.plugin_id,
-                                is_downloaded: false,
-                                is_latest_version_already: false,
-                                latest_plugin_info: { ...info },
-                            };
-                        }
-                        new_data.push(new_plugin_info);
-                    }
-
-                    // prev.data にのみ存在するアイテム = latest plugin infoには存在しない
-                    // を追加し、is_outdated: true を付与
-                    prev.data.forEach(item => {
-                        if (!info_map.has(item.plugin_id)) {
-                            new_data.push({ ...item, is_outdated: true });
-                        }
-                    });
-
-                    new_data.forEach(plugin => {
-                        if (!plugin.is_outdated) {
-                            plugin.is_latest_version_available = (plugin.latest_plugin_info.is_plugin_supported);
-                        }
-                    });
-
-                    // ダウンロード済みで最新版じゃない場合、自動的にアップデート
-                    // is_latest_version_supported: true のみ。
-                    // 失敗した場合、現在のバージョンが非対応の場合はdisabledにする。
-                    new_data.forEach(async plugin =>  {
-                        if (plugin.is_enabled) {
-                            if (!plugin.is_latest_version_already && plugin.is_latest_version_available) {
-                                await downloadAndExtractPlugin(plugin);
-                            }
-                        }
-                    });
-
-                    new_data.forEach(async plugin =>  {
-                        if (plugin.is_enabled) {
-                            if (!plugin.downloaded_plugin_info?.is_plugin_supported) {
-                                plugin.is_enabled = false
-                            }
-                        }
-                    });
-
-                    return new_data;
-                });
-
-            } catch (error) {
-                console.error(error);
-            }
-        };
-
-        if (!fetchPluginsHasRunRef.current) {
-            loadPlugins();
-            updateIsPluginsInitialized(true);
-        }
-        return () => fetchPluginsHasRunRef.current = true;
-    }, []);
-
-
-    useEffect(() => {
-        updatePluginsData(prev => {
-            // currentSavedPluginsStatus.data の各要素を Map 化して plugin_id で参照
-            const saved_map = new Map(currentSavedPluginsStatus.data.map(saved => [saved.plugin_id, saved]));
-            const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
-            // prev.data にある各アイテムについて、保存済みの状態情報があればマージ
-            const merged = prev.data.map(item => {
-
-                if (saved_map.has(item.plugin_id)) {
-                    return { ...item, is_enabled: saved_map.get(item.plugin_id).is_enabled };
-                }
-                return item;
-            });
-
-            // currentSavedPluginsStatus.data にのみ存在する項目があれば追加
-            currentSavedPluginsStatus.data.forEach(saved => {
-                if (!prev_map.has(saved.plugin_id)) {
-                    merged.push({ plugin_id: saved.plugin_id, is_enabled: saved.is_enabled });
-                }
-            });
-            return merged;
-        });
-    }, [currentSavedPluginsStatus]);
-
-
-
-    return null;
 };

src-ui/app/_app_controllers/plugins_controllers/FetchLatestPluginsDataController.jsx

@@ -0,0 +1,115 @@
+import { useEffect } from "react";
+import { usePlugins } from "@logics_configs";
+
+export const FetchLatestPluginsDataController = () => {
+    const {
+        asyncFetchPluginsInfo,
+        updatePluginsData,
+        downloadAndExtractPlugin,
+        currentIsInitializedLoadPlugin,
+        currentIsFetchedPluginsInfo,
+        updateIsFetchedPluginsInfo,
+    } = usePlugins();
+
+    const asyncUpdateLatestPluginsData = async () => {
+        try {
+            const info_array = await asyncFetchPluginsInfo();
+            updatePluginsData(prev => {
+                // Map を利用してそれぞれの配列を plugin_id で参照できるようにする
+                const info_map = new Map(info_array.map(info => [info.plugin_id, info]));
+                const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
+
+                console.log(prev_map);
+
+                const new_data = [];
+                for (const info of info_array) {
+                    let new_plugin_info = {};
+                    if (prev_map.has(info.plugin_id)) { // plugin_id 登録済み
+                        const target_downloaded_plugin = prev_map.get(info.plugin_id);
+
+                        if (target_downloaded_plugin.is_downloaded) { // 既にダウンロード済み
+                            const is_latest_version_available = !(target_downloaded_plugin.plugin_version === info.plugin_version);
+
+                            new_plugin_info = {
+                                ...target_downloaded_plugin,
+                                is_downloaded: true,
+                                latest_plugin_info: { ...info },
+                                is_latest_version_available: is_latest_version_available,
+                                is_latest_version_already: (target_downloaded_plugin.downloaded_plugin_info?.plugin_version === info.plugin_version),
+                            };
+                        } else { // infoにもあり登録済みだがダウンロードされていない
+                            new_plugin_info = {
+                                ...target_downloaded_plugin,
+                                is_downloaded: false,
+                                is_latest_version_already: false,
+                                is_latest_version_available: info.is_latest_version_available,
+                                latest_plugin_info: { ...info },
+                            }
+                        }
+                    } else { // 未ダウンロード
+                        new_plugin_info = {
+                            plugin_id: info.plugin_id,
+                            is_downloaded: false,
+                            is_latest_version_already: false,
+                            latest_plugin_info: { ...info },
+                        };
+                    }
+
+                    new_data.push(new_plugin_info);
+                }
+
+                // prev.data にのみ存在するアイテム = latest plugin infoには存在しない
+                // を追加し、is_outdated: true を付与
+                prev.data.forEach(item => {
+                    if (!info_map.has(item.plugin_id)) {
+                        new_data.push({ ...item, is_outdated: true });
+                    }
+                });
+
+                new_data.forEach(plugin => {
+                    if (!plugin.is_outdated) {
+                        plugin.is_latest_version_available = (plugin.latest_plugin_info.is_plugin_supported);
+                    }
+                });
+
+                // ダウンロード済みで最新版じゃない場合、自動的にアップデート
+                // is_latest_version_supported: true のみ。
+                // 失敗した場合、現在のバージョンが非対応の場合はdisabledにする。
+                new_data.forEach(async plugin =>  {
+                    if (plugin.is_enabled) {
+                        console.log(plugin);
+
+                        if (!plugin.is_latest_version_already && plugin.is_latest_version_available) {
+                            await downloadAndExtractPlugin(plugin);
+                        }
+                    }
+                });
+
+                new_data.forEach(async plugin => {
+                    if (plugin.is_downloaded && plugin.is_enabled) {
+                        if (!plugin.downloaded_plugin_info?.is_plugin_supported && !plugin.latest_plugin_info?.is_plugin_supported) {
+                            plugin.is_enabled = false
+                        }
+                    }
+                });
+
+                return new_data;
+            });
+
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    useEffect(() => {
+        console.log(currentIsInitializedLoadPlugin.data);
+        if (currentIsInitializedLoadPlugin.data && !currentIsFetchedPluginsInfo.data) {
+            asyncUpdateLatestPluginsData().then(() => {
+                updateIsFetchedPluginsInfo(true);
+            });
+        }
+
+    }, [currentIsInitializedLoadPlugin.data]);
+
+    return null;
+};

src-ui/app/_app_controllers/plugins_controllers/LoadPluginsController.jsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+import { usePlugins } from "@logics_configs";
+import clsx from "clsx";
+
+if (typeof window !== "undefined") {
+    window.React = React;
+    window.clsx = clsx;
+}
+
+export const LoadPluginsController = () => {
+
+    const {
+        asyncLoadAllPlugins,
+        currentIsInitializedLoadPlugin,
+        updateIsInitializedLoadPlugin,
+    } = usePlugins();
+
+    const asyncInitLoadPlugins = async () => {
+        try {
+            await asyncLoadAllPlugins();
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    useEffect(() => {
+
+        if (!currentIsInitializedLoadPlugin.data) {
+            asyncInitLoadPlugins().then(() => {
+                updateIsInitializedLoadPlugin(true);
+            });
+        }
+    }, []);
+
+    return null;
+};

src-ui/app/_app_controllers/plugins_controllers/MergeSavedPluginsStatusController.jsx

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { usePlugins } from "@logics_configs";
+
+export const MergeSavedPluginsStatusController = () => {
+    const {
+        updatePluginsData,
+        currentSavedPluginsStatus,
+    } = usePlugins();
+
+    useEffect(() => {
+        updatePluginsData(prev => {
+            // currentSavedPluginsStatus.data の各要素を Map 化して plugin_id で参照
+            const saved_map = new Map(currentSavedPluginsStatus.data.map(saved => [saved.plugin_id, saved]));
+            const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
+            // prev.data にある各アイテムについて、保存済みの状態情報があればマージ
+            const merged = prev.data.map(item => {
+
+                if (saved_map.has(item.plugin_id)) {
+                    return { ...item, is_enabled: saved_map.get(item.plugin_id).is_enabled };
+                }
+                return item;
+            });
+
+            // currentSavedPluginsStatus.data にのみ存在する項目があれば追加
+            currentSavedPluginsStatus.data.forEach(saved => {
+                if (!prev_map.has(saved.plugin_id)) {
+                    merged.push({ plugin_id: saved.plugin_id, is_enabled: saved.is_enabled });
+                }
+            });
+            return merged;
+        });
+    }, [currentSavedPluginsStatus]);
+
+    return null;
+};

src-ui/app/config_page/setting_section/setting_box/_components/plugins_control_component/PluginsControlComponent.jsx

@@ -54,11 +54,27 @@ const DownloadedPluginControl = ({
 
 
     if (!plugin_status.downloaded_plugin_info.is_plugin_supported) {
+        if (plugin_status.is_latest_version_available) {
+            return (
+                <div className={styles.container}>
+                    <p>最新のバージョン: {latest_version}</p>
+                    <p>最新版にアップデート後 利用可能</p>
+                    <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
+                </div>
+            );
+        }
         return (
             <div className={styles.container}>
                 <p>現在利用不可 使用中VRCTバージョンとの互換性なし</p>
             </div>
         );
+    } else if (plugin_status.is_outdated) {
+        return (
+            <div className={styles.container}>
+                <p>最新情報が取得できません</p>
+                <SwitchBox variable={option} toggleFunction={togglePlugin} />
+            </div>
+        );
     } else if (plugin_status.is_latest_version_already) {
         return (
             <div className={styles.container}>

src-ui/app/modal_controller/update_modal/UpdateModal.jsx

@@ -20,9 +20,6 @@ export const UpdateModal = () => {
     const { currentLatestSoftwareVersionInfo } = useSoftwareVersion();
     const { isAnyPluginEnabled } = usePlugins();
 
-    console.log(isAnyPluginEnabled());
-
-
     const is_latest_version_already = currentLatestSoftwareVersionInfo.data.is_update_available === false;
     const is_cpu_version = currentComputeMode.data === "cpu";
 
@@ -101,14 +98,17 @@ const CurrentVersionLabel = (props) => {
 const PluginUpdateNotification = () => {
     const { enabledPluginsList } = usePlugins();
 
-    const incompatible_plugins_list = enabledPluginsList();
+    // ダウンロード済みのもの or プラグイン最新版が、VRCT最新版（VRCTアプデ後）に非対応のもの
+    const incompatible_plugins_list = enabledPluginsList().filter(plugin => {
+        if (!plugin.is_downloaded) return false;
+        if (!plugin.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !plugin.latest_plugin_info.is_plugin_supported_latest_vrct) return true;
+    });
 
     return (
         <div>
             {incompatible_plugins_list.map(plugin => {
-                console.log(plugin);
+                const target_data = plugin.downloaded_plugin_info;
-
+                return <p key={plugin.plugin_id} >{target_data.title}</p>
-                return <p>{plugin.title}</p>
             })}
         </div>
     );

src-ui/logics/configs/plugins/usePlugins.js

@@ -5,6 +5,8 @@ import {
     useStore_SavedPluginsStatus,
     useStore_PluginsData,
     useStore_IsPluginsInitialized,
+    useStore_IsInitializedLoadPlugin,
+    useStore_IsFetchedPluginsInfo,
 } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
 
@@ -33,6 +35,11 @@ const PLUGIN_LIST_URL = getPluginsList();
 
 export const usePlugins = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
+
+    const { currentIsInitializedLoadPlugin, updateIsInitializedLoadPlugin, pendingIsInitializedLoadPlugin } = useStore_IsInitializedLoadPlugin();
+    const { currentIsFetchedPluginsInfo, updateIsFetchedPluginsInfo, pendingIsFetchedPluginsInfo } = useStore_IsFetchedPluginsInfo();
+
+
     const { currentSavedPluginsStatus, updateSavedPluginsStatus, pendingSavedPluginsStatus } = useStore_SavedPluginsStatus();
     const { currentPluginsData, updatePluginsData, pendingPluginsData } = useStore_PluginsData();
     const { currentIsPluginsInitialized, updateIsPluginsInitialized, pendingIsPluginsInitialized } = useStore_IsPluginsInitialized();
@@ -40,13 +47,15 @@ export const usePlugins = () => {
 
     const { asyncTauriFetchGithub } = useFetch();
 
-    const generatePluginContext= (downloaded_plugin_info) => {
+    const generatePluginContext = (downloaded_plugin_info) => {
         const plugin_context = {
             registerComponent: (component) => {
                 if (!downloaded_plugin_info.plugin_id || !downloaded_plugin_info.location || !component) {
                     return console.error("An invalid plugin was detected.", downloaded_plugin_info.plugin_id, downloaded_plugin_info.location, component);
                 }
                 updatePluginsData(prev => {
+                    console.log("-----updated downloaded plugin info----");
+
                     const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
                     const new_data = [];
                     let new_value = {};
@@ -74,7 +83,7 @@ export const usePlugins = () => {
 
                         if (old_plugin_data.plugin_id === downloaded_plugin_info.plugin_id) { // ダウンロード済み or 登録済 アップデート
                             const target_prev_plugin = prev_map.get(downloaded_plugin_info.plugin_id);
-                            const is_latest_version_available = (target_prev_plugin.is_downloaded) && !(downloaded_plugin_info.plugin_version === target_prev_plugin.latest_plugin_info.plugin_version);
+                            const is_latest_version_available = (target_prev_plugin.is_downloaded) && (target_prev_plugin.latest_plugin_info?.plugin_version) && !(downloaded_plugin_info.plugin_version === target_prev_plugin.latest_plugin_info?.plugin_version);
 
                             new_value = {
                                 ...target_prev_plugin,
@@ -357,6 +366,11 @@ export const usePlugins = () => {
         currentIsPluginsInitialized,
         updateIsPluginsInitialized,
 
+        currentIsInitializedLoadPlugin,
+        updateIsInitializedLoadPlugin,
+        currentIsFetchedPluginsInfo,
+        updateIsFetchedPluginsInfo,
+
         setSavedPluginsStatus,
 
         handlePendingPlugin,

src-ui/logics/useReceiveRoutes.js

@@ -206,7 +206,13 @@ export const useReceiveRoutes = () => {
         "/set/data/main_window_geometry": () => {},
         "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
         "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
-        "/run/software_update_info": updateLatestSoftwareVersionInfo,
+        "/run/software_update_info": () => {
+            updateLatestSoftwareVersionInfo({
+                is_update_available: true,
+                new_version: "3.0.3",
+            })
+        },
+        // "/run/software_update_info": updateLatestSoftwareVersionInfo,
         "/run/connected_network": handleNetworkConnection,
 
         // Main Page

src-ui/store.js

@@ -279,6 +279,9 @@ export const { atomInstance: Atom_Hotkeys, useHook: useStore_Hotkeys } = createA
 
 // Plugins
 export const { atomInstance: Atom_IsPluginsInitialized, useHook: useStore_IsPluginsInitialized } = createAtomWithHook(false, "IsPluginsInitialized");
+export const { atomInstance: Atom_IsInitializedLoadPlugin, useHook: useStore_IsInitializedLoadPlugin } = createAtomWithHook(false, "IsInitializedLoadPlugin");
+export const { atomInstance: Atom_IsFetchedPluginsInfo, useHook: useStore_IsFetchedPluginsInfo } = createAtomWithHook(false, "IsFetchedPluginsInfo");
+export const { atomInstance: Atom_FetchedPluginsInfo, useHook: useStore_FetchedPluginsInfo } = createAtomWithHook(false, "FetchedPluginsInfo");
 export const { atomInstance: Atom_SavedPluginsStatus, useHook: useStore_SavedPluginsStatus } = createAtomWithHook([], "SavedPluginsStatus");
 export const { atomInstance: Atom_PluginsData, useHook: useStore_PluginsData } = createAtomWithHook([], "PluginsData");