[Update/bugfix] Plugins: For development, fix hot reload issue that was restart every time updated the files.

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

@@ -10,8 +10,8 @@ import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 import { transform } from "@babel/standalone";
 import { writeFile, createDir, exists, removeDir, readDir, BaseDirectory, readTextFile } from "@tauri-apps/api/fs";
-const dev_plugin_mapping = import.meta.glob("/src-tauri/plugins/**/index.jsx", { eager: true });
-const dev_plugin_info_mapping = import.meta.glob("/src-tauri/plugins/**/plugin_info.json", { eager: true });
+import { dev_plugins } from "@dev_plugins_path";
+
 import JSZip from "jszip";
 
 import { useFetch } from "@logics_common";
@@ -85,22 +85,17 @@ export const usePlugins = () => {
 
     const asyncLoadAllPlugins = async () => {
         if (import.meta.env.DEV) {
-            // 開発時: ホットリロード対応、src-tauri以下のpluginsから直接読み込み
-            Object.entries(dev_plugin_mapping).forEach(([key, plugin_module]) => {
-                // 例: key が "/src-tauri/plugins/sample/index.jsx" の場合、plugin_info.json のパスは同じディレクトリ内にある
-                const pluginInfoKey = key.replace("index.jsx", "plugin_info.json");
-                const plugin_info = dev_plugin_info_mapping[pluginInfoKey];
-
-                if (!plugin_info) {
-                    console.error("plugin_info.json has not found:", pluginInfoKey);
+            // `dev_plugins` を利用してプラグインを登録
+            dev_plugins.forEach(({ index, plugin_info }) => {
+                if (!index || !plugin_info) {
+                    console.error("Invalid development plugin detected", index, plugin_info);
                     return;
                 }
-
-                // plugin_info を使ってプラグインコンテキストを生成
                 const plugin_context = generatePluginContext(plugin_info);
-
-                if (plugin_module && plugin_module.init) {
-                    plugin_module.init(plugin_context);
+                if (index.init) {
+                    index.init(plugin_context);
+                } else {
+                    console.error("Plugin missing init function", plugin_info);
                 }
             });
         } else {

src-ui/plugins/index.js

@@ -0,0 +1,9 @@
+import plugin_index_1 from "./plugin_examples/index.jsx";
+import plugin_info_1 from "./plugin_examples/plugin_info.json";
+
+export const dev_plugins = [
+    {
+        index: { init: plugin_index_1 },
+        plugin_info: plugin_info_1,
+    }
+];

src-ui/plugins/plugin_examples/index.jsx

@@ -0,0 +1,14 @@
+import { initStore } from "./store/store";
+import { MainContainer } from "./main_container/MainContainer";
+
+export const init = (plugin_context) => {
+    initStore(plugin_context.createAtomWithHook);
+
+    const EntryComponents = () => {
+        return <MainContainer />;
+    };
+
+    plugin_context.registerComponent(EntryComponents);
+};
+
+export default init;

src-ui/plugins/plugin_examples/main_container/MainContainer.jsx

@@ -0,0 +1,22 @@
+import { useStore } from "../store/store";
+import { useEffect } from "react";
+
+export const MainContainer = () => {
+    const { updateCountPluginState, currentCountPluginState } = useStore("useStore_CountPluginState");
+
+    const incrementCount = () => {
+        updateCountPluginState((prev_value) => ({
+            count: prev_value.data.count + 1,
+        }));
+    };
+
+    useEffect(() => {
+    }, [])
+
+    return (
+        <div>
+            <p>1 Zipped Dev Plugin Count: {currentCountPluginState?.data?.count}</p>
+            <button onClick={incrementCount}>Increment Plugin Count</button>
+        </div>
+    );
+};

src-ui/plugins/plugin_examples/plugin_info.json

@@ -0,0 +1,9 @@
+{
+    "title": "VRCT Example Plugins 1",
+    "plugin_id": "vrct_plugin_example_1",
+    "asset_name": "vrct_plugin_example_1.zip",
+    "location": "main_section",
+    "plugin_version": "0.0.1",
+    "min_supported_vrct_version": "3.0.4",
+    "max_supported_vrct_version": "3.0.6"
+}

src-ui/plugins/plugin_examples/store/store.js

@@ -0,0 +1,22 @@
+const store_hooks = {};
+
+export const initStore = (createAtomWithHook) => {
+    Object.assign(store_hooks, {
+        useStore_CountPluginState: createAtomWithHook(
+            { count: 10 },
+            "CountPluginState"
+        ).useHook,
+
+        useStore_AnotherState: createAtomWithHook(
+            { value: "initial" },
+            "AnotherState"
+        ).useHook,
+    });
+};
+
+export const useStore = (hook_name) => {
+    if (!store_hooks[hook_name]) {
+        throw new Error(`Hook ${hook_name} is not initialized.`);
+    }
+    return store_hooks[hook_name]();
+};