build(Admin): improve workflow for widgets

- change output name declaration with ViteJS.
- add note when importing external globals.
- install chokidar + concurrency in code/admin to allow hot-reload workflow when developing a plugin's widget.

code/admin/package.json

@@ -40,6 +40,8 @@
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "chokidar": "^4.0.1",
+    "concurrency": "^0.1.4",
     "eslint": "^9.16.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",

code/admin/watcher.js

@@ -0,0 +1,29 @@
+// NOTE: common script for plugins when implementing a widget in Admin/.
+//       run `pnpm build:watch` to watch changes, build widget, copy output in
+//       debug directory of the plugin. You'll need to hit F5 to reload the
+//       widget when running `pnpm start` in `code/admin`.
+import chokidar from 'chokidar';
+import fs from 'fs';
+import path from 'path';
+
+const plugin = path.basename(path.dirname(process.cwd()));
+const src = path.resolve(path.join(process.cwd(), 'dist'));
+const dst = path.resolve(path.join('..', '..', '..', '..', '..', 'build', 'windows', 'x64', 'debug', 'plugins', plugin, 'assets'));
+
+console.log(`watching Admin.${plugin}`);
+console.log(`copying from "${src}"`);
+console.log(`          to "${dst}"`);
+
+const watcher = chokidar.watch('dist/**/*');
+
+process.once('SIGINT', abort);
+process.once('SIGTERM', abort);
+
+watcher.on('change', () => {
+    fs.cpSync(src, dst, {recursive: true});
+});
+
+function abort() {
+    console.log('Stopping watcher...');
+    watcher.close();
+}

code/admin/xmake.lua

@@ -2,48 +2,69 @@ target("Admin")
     set_kind("phony")
     set_group("Server")
 
-    add_deps("Server.Scripting")
+    add_deps("Server.Loader", "Server.Native", "Server.Scripting")
 
-    on_install(function (target)
-        local function run_command(cmd, args)
-            print("  $ " .. cmd .. " " .. table.concat(args or {}, " "))
-            local stdout, stderr = os.iorunv(cmd, args)
+    local function get_pnpm(os)
+        local function pnpm(args)
+            local cmd = is_host("windows") and "pnpm.cmd" or "pnpm"
+
+            print("$ " .. cmd .. " " .. table.concat(args or {}, " "))
+            os.runv(cmd, args)
         end
 
-        local function run_install(cmd)
+        local function pnpm_install()
             --if os.getenv("IS_CI") == "true" then
-            --    run_command(cmd, {"ci"})
+            --    pnpm({"ci"})
             --else
-            run_command(cmd, {"install"})
+            pnpm({"install"})
             --end
         end
 
-		print("installing Admin")
+        return pnpm, pnpm_install
+    end
 
+    local function setup(os, raise, dst)
         os.cd("code/admin")
 
-        local pnpm = is_host("windows") and "pnpm.cmd" or "pnpm"
+        local pnpm, pnpm_install = get_pnpm(os)
 
         -- Run pnpm commands in the root directory
-        run_install(pnpm)
-        run_command(pnpm, {"run", "build"})
+        pnpm_install()
+        pnpm({"run", "build"})
 
         local src = path.join(os.curdir(), "dist")
         if not os.isdir(src) then
             raise(string.format("Source directory not found %s", src))
         end
 
-        local dst = path.join("..", "..", target:installdir("launcher"), "server", "assets")
+        dst = path.join("..", "..", dst)
         if os.isdir(dst) then
             os.rmdir(dst)
         end
-
-		os.mkdir(dst)
+        os.mkdir(dst)
 
         -- Copy produced files
-        print(string.format("  Copying from %s to %s", src, dst))
+        print(string.format("Copying from %s to %s", src, dst))
         os.cp(path.join(src, "*"), dst)
 
         -- Reset to base directory
         os.cd("../..")
+    end
+
+    on_build(function (target, opt)
+        import("utils.progress")
+
+        progress.show(opt.progress, "${color.build.target}build Server.Admin")
+
+        local dst = path.join(target:targetdir(), "assets")
+        setup(os, raise, dst)
+    end)
+
+    on_install(function (target)
+        import("utils.progress")
+
+        print("installing Server.Admin")
+
+        local dst = path.join(target:installdir("launcher"), "server", "assets")
+        setup(os, raise, dst)
     end)

code/server/loader/xmake.lua

@@ -9,13 +9,13 @@ target("Server.Loader")
 
     on_build(function (target, opt)
         import("utils.progress")
-        
+
         local script = target:scriptdir()
         local proj = path.join(script, "Server.Loader.csproj")
-        local sdk_output = path.join(target:targetdir(), "server")
+        local mode = is_mode("debug") and "Debug" or "Release"
         progress.show(opt.progress, "${color.build.target}build Server.Loader")
-        os.run("dotnet build " .. proj)
-        os.run("dotnet publish " .. proj .. " -o " .. target:targetdir())
+        os.run("dotnet build " .. proj .. " -c " .. mode)
+        os.run("dotnet publish " .. proj .. " -c " .. mode .. " -o " .. target:targetdir())
     end)
 
     after_install(function (target)
@@ -28,7 +28,7 @@ target("Server.Loader")
     on_install(function (target)
         local src_plugins = target:targetdir()
         local dest_plugins = target:installdir("bin")
-        
+
         os.cp(path.join(src_plugins, "Server.Loader.dll"), path.join(target:installdir("bin"), "Server.Loader.dll"))
         os.cp(path.join(src_plugins, "Server.Loader.exe"), path.join(target:installdir("bin"), "Server.Loader.exe"))
         os.cp(path.join(src_plugins, "Server.Loader.runtimeconfig.json"), path.join(target:installdir("bin"), "Server.Loader.runtimeconfig.json"))

code/server/scripting/EmoteSystem/Admin/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "start": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "build:watch": "npx concurrently --kill-others \"vite build --watch\" \"node ..\\..\\..\\..\\admin\\watcher.js\""
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",

code/server/scripting/EmoteSystem/Admin/src/widget.tsx

@@ -4,6 +4,13 @@ import React, {useEffect, useState} from "react";
 import {useToasts} from "App";
 import {StatusCodes} from "http-status-codes";
 
+// IMPORTANT: if you import an external global, you might need to use {}
+//            syntax. Otherwise, import of your widget could fail to render
+//            with React.
+//
+//            DO: import {Icon} from "@mdi/react";
+//            DON'T: import Icon from "@mdi/react";
+
 interface EmoteDto {
     readonly Username: string;
     readonly Emote: string;
@@ -62,4 +69,4 @@ export function Widget() {
             </ButtonBase>
         </Tooltip>
     );
-}
+}

code/server/scripting/EmoteSystem/Admin/vite.config.js

@@ -10,30 +10,29 @@ export default defineConfig({
     ],
     build: {
         lib: {
-            name: 'widget',
+            // IMPORTANT: this name must be unique, or it will conflict
+            //            with other plugins. We recommend to use the name
+            //            of the plugin `EmoteSystem` without its suffix
+            //            `System`.
+            name: 'Emote',
             entry: './index.ts',
             formats: ['umd'],
             fileName: 'widget',
         },
         rollupOptions: {
             external: [
                 'react',
-                'react-redux',
+                //'react-redux',
                 '@mui/material',
-                '@mdi/react',
+                //'@mdi/react',
                 'App'
             ],
             output: {
-                // IMPORTANT: this name must be unique, or it will conflict
-                //            with other plugins. We recommend to use the name
-                //            of the plugin `EmoteSystem` without its suffix
-                //            `System`.
-                name: 'Emote',
                 globals: {
                     'react': 'React',
-                    'react-redux': 'Redux',
+                    //'react-redux': 'Redux',
                     '@mui/material': 'MUI',
-                    '@mdi/react': 'MDI',
+                    //'@mdi/react': 'MDI',
                     'App': 'App',
                 }
             }

code/server/scripting/EmoteSystem/EmoteSystem.csproj

@@ -25,7 +25,7 @@
         <AppendRuntimeIdentifierToOutputPath>false</AppendRuntimeIdentifierToOutputPath>
     </PropertyGroup>
 
-    <Target Name="Admin" BeforeTargets="Publish">
+    <Target Name="Admin" BeforeTargets="Build;Publish">
         <Exec Command="pnpm install" WorkingDirectory="$(ProjectDir)\Admin"/>
         <Exec Command="pnpm run build" WorkingDirectory="$(ProjectDir)\Admin"/>
     </Target>