From 9f81d299d9015fcf0fc7ce5d9e6fd33e3a873071 Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Thu, 15 May 2025 10:32:39 +0100 Subject: [PATCH] feat: use process-compose to run ui dev environment --- formatter.nix | 2 +- pkgs/flake-module.nix | 4 +- pkgs/ui/.envrc | 7 +++ pkgs/ui/README.md | 48 +++++++++++++++++++ pkgs/ui/clan-app/README.md | 29 ++++++++---- pkgs/ui/flake-module.nix | 25 ++++++++++ pkgs/ui/process-compose.yaml | 21 +++++++++ pkgs/ui/shell.nix | 90 ++++++++++++++++++++++++++++++++++++ 8 files changed, 213 insertions(+), 13 deletions(-) create mode 100644 pkgs/ui/.envrc create mode 100644 pkgs/ui/README.md create mode 100644 pkgs/ui/flake-module.nix create mode 100644 pkgs/ui/process-compose.yaml create mode 100644 pkgs/ui/shell.nix diff --git a/formatter.nix b/formatter.nix index 85c64d877..60caffe0c 100644 --- a/formatter.nix +++ b/formatter.nix @@ -102,7 +102,7 @@ "clan-app" = { directory = "pkgs/ui/clan-app"; extraPythonPackages = (self'.packages.clan-app.devshellPyDeps pkgs.python3Packages); - extraPythonPaths = [ "../clan-cli" ]; + extraPythonPaths = [ "../../clan-cli" ]; }; } // ( diff --git a/pkgs/flake-module.nix b/pkgs/flake-module.nix index 42c7417dc..6895dfeb5 100644 --- a/pkgs/flake-module.nix +++ b/pkgs/flake-module.nix @@ -3,14 +3,13 @@ { imports = [ ./clan-cli/flake-module.nix - ./ui/clan-app/flake-module.nix ./clan-vm-manager/flake-module.nix ./installer/flake-module.nix - ./ui/webview-ui/flake-module.nix ./distro-packages/flake-module.nix ./icon-update/flake-module.nix ./generate-test-vars/flake-module.nix ./clan-core-flake/flake-module.nix + ./ui/flake-module.nix ]; flake.packages.x86_64-linux = @@ -35,7 +34,6 @@ editor = pkgs.callPackage ./editor/clan-edit-codium.nix { }; classgen = pkgs.callPackage ./classgen { }; zerotierone = pkgs.callPackage ./zerotierone { }; - webview-lib = pkgs.callPackage ./ui/webview-lib { }; update-clan-core-for-checks = pkgs.callPackage ./update-clan-core-for-checks { }; }; }; diff --git a/pkgs/ui/.envrc b/pkgs/ui/.envrc new file mode 100644 index 000000000..306104f69 --- /dev/null +++ b/pkgs/ui/.envrc @@ -0,0 +1,7 @@ +# shellcheck shell=bash +source_up + +watch_file flake-module.nix shell.nix clan-app/flake-module.nix webview-ui/flake-module.nix + +# Because we depend on nixpkgs sources, uploading to builders takes a long time +use flake .#ui --builders '' diff --git a/pkgs/ui/README.md b/pkgs/ui/README.md new file mode 100644 index 000000000..4d7180840 --- /dev/null +++ b/pkgs/ui/README.md @@ -0,0 +1,48 @@ +# Clan UI + +## Getting started + +Enter the `pkgs/ui` directory and allow [direnv] to load the `ui` devshell with `direnv allow`: + +```console +❯ direnv allow +direnv: loading ~/Development/lol/clan/git/clan/clan-core/pkgs/ui/.envrc +direnv: loading ~/Development/lol/clan/git/clan/clan-core/.envrc +direnv: using flake +direnv: nix-direnv: Renewed cache +switch to another dev-shell using: select-shell +direnv: using flake .#ui --builders +path '/home/brian/Development/lol/clan/git/clan/clan-core/pkgs/ui' does not contain a 'flake.nix', searching up +direnv: ([/nix/store/rjnigckx9rmga58562hxw9kr5hynavcd-direnv-2.36.0/bin/direnv export zsh]) is taking a while to execute. Use CTRL-C to give up. +path '/home/brian/Development/lol/clan/git/clan/clan-core/pkgs/ui' does not contain a 'flake.nix', searching up +direnv: nix-direnv: Renewed cache +switch to another dev-shell using: select-shell +/home/brian/.config/direnv/lib/hm-nix-direnv.sh:3858: /home/brian/Development/lol/clan/git/clan/clan-core/pkgs/ui/clan-app/.local.env: No such file or directory +direnv: export +AR +AS +CC +CLAN_CORE_PATH +CONFIG_SHELL +CXX +DETERMINISTIC_BUILD +GETTEXTDATADIRS +GETTEXTDATADIRS_FOR_BUILD +GETTEXTDATADIRS_FOR_TARGET +GIT_ROOT +GSETTINGS_SCHEMAS_PATH +HOST_PATH +IN_NIX_SHELL +LD +NIX_BINTOOLS +NIX_BINTOOLS_WRAPPER_TARGET_HOST_x86_64_unknown_linux_gnu +NIX_BUILD_CORES +NIX_CC +NIX_CC_WRAPPER_TARGET_HOST_x86_64_unknown_linux_gnu +NIX_CFLAGS_COMPILE +NIX_ENFORCE_NO_NATIVE +NIX_HARDENING_ENABLE +NIX_LDFLAGS +NIX_STORE +NM +NODE_PATH +OBJCOPY +OBJDUMP +PC_CONFIG_FILES +PKG_ROOT_CLAN_APP +PKG_ROOT_UI +PKG_ROOT_WEBVIEW_UI +PRJ_ROOT +PYTHONHASHSEED +PYTHONNOUSERSITE +PYTHONPATH +RANLIB +READELF +SIZE +SOURCE_DATE_EPOCH +STRINGS +STRIP +WEBVIEW_LIB_DIR +_PYTHON_HOST_PLATFORM +_PYTHON_SYSCONFIGDATA_NAME +__structuredAttrs +buildInputs +buildPhase +builder +cmakeFlags +configureFlags +depsBuildBuild +depsBuildBuildPropagated +depsBuildTarget +depsBuildTargetPropagated +depsHostHost +depsHostHostPropagated +depsTargetTarget +depsTargetTargetPropagated +doCheck +doInstallCheck +dontAddDisableDepTrack +mesonFlags +name +nativeBuildInputs +out +outputs +patches +phases +preferLocalBuild +propagatedBuildInputs +propagatedNativeBuildInputs +shell +shellHook +stdenv +strictDeps +system ~GDK_PIXBUF_MODULE_FILE ~GI_TYPELIB_PATH ~PATH ~XDG_DATA_DIRS +``` + +Once that has loaded, you can run the local dev environment by running `process-compose`. + +This will start a [process-compose] instance containing two processes: + +* `webview-ui` which is a background process running a [vite] server for `./webview-ui` in a hot-reload fashion +* `clan-app` which is a [foreground process](https://f1bonacc1.github.io/process-compose/launcher/?h=foreground#foreground-processes), +that is started on demand and provides the [webview] wrapper for the UI. + +Wait for the `webview-ui` process to enter the `Running` state, then navigate to the `clan-app` process and press `F7`. +This will start the [webview] window and bring `clan-app`'s terminal into the foreground, allowing for interaction with +the debugger if required. + +If you need to restart, simply enter `ctrl+c` and you will be dropped back into the `process-compose` terminal. +From there you can start `clan-app` again with `F7`. + +> **Note** +> If you are interacting with a breakpoint, do not continue/exit with `ctrl+c` as this will introduce a quirk +> the next time you start `clan-app` where you will be unable to see the input you are typing in a debugging session. +> +> Instead, exit the debugger with `q+Enter`. + +[direnv]: https://direnv.net/ +[process-compose]: https://f1bonacc1.github.io/process-compose/ +[vite]: https://vite.dev/ +[webview]: https://github.com/webview/webview \ No newline at end of file diff --git a/pkgs/ui/clan-app/README.md b/pkgs/ui/clan-app/README.md index 14d520796..a0150358e 100644 --- a/pkgs/ui/clan-app/README.md +++ b/pkgs/ui/clan-app/README.md @@ -4,14 +4,27 @@ A powerful application that allows users to create and manage their own Clans. ## Getting Started -To run the local dev environment: +Follow the instructions below to set up your development environment and start the application: -```console -❯ nix run .#ui-dev -``` -This will start a [process-compose] instance running `pkgs/ui/webview-ui/app` and `pkgs/ui/clan-app`, with the web server -accessible at `http://localhost:3000`. +1. **Navigate to the Webview UI Directory** + + Go to the `clan-core/pkgs/ui/webview-ui/app` directory and start the web server by executing: + + ```bash + npm install + vite + ``` + +2. **Start the Clan App** + + In the `clan-app` directory, execute the following command: + + ```bash + clan-app --debug --content-uri http://localhost:3000 + ``` + +This will start the application in debug mode and link it to the web server running at `http://localhost:3000`. ### Debugging Style and Layout @@ -72,6 +85,4 @@ Here are some important documentation links related to the Clan App: > Error dialogs should be avoided where possible, since they are disruptive. > -> For simple non-critical errors, toasts can be a good alternative. - -[process-compose]: https://f1bonacc1.github.io/process-compose/ \ No newline at end of file +> For simple non-critical errors, toasts can be a good alternative. \ No newline at end of file diff --git a/pkgs/ui/flake-module.nix b/pkgs/ui/flake-module.nix new file mode 100644 index 000000000..0240823a8 --- /dev/null +++ b/pkgs/ui/flake-module.nix @@ -0,0 +1,25 @@ +{ + imports = [ + ./clan-app/flake-module.nix + ./webview-ui/flake-module.nix + ]; + + perSystem = + { + self', + pkgs, + config, + ... + }: + { + packages = { + webview-lib = pkgs.callPackage ./webview-lib { }; + }; + + devShells.ui = pkgs.callPackage ./shell.nix { + inherit self'; + inherit (self'.packages) clan-app webview-lib webview-ui; + inherit (config.packages) clan-ts-api; + }; + }; +} diff --git a/pkgs/ui/process-compose.yaml b/pkgs/ui/process-compose.yaml new file mode 100644 index 000000000..dcdd36f87 --- /dev/null +++ b/pkgs/ui/process-compose.yaml @@ -0,0 +1,21 @@ +version: "0.5" + +env_cmds: + PRJ_ROOT: "git rev-parse --show-toplevel" + +processes: + webview-ui: + command: | + npm install + vite + ready_log_line: "ready in" + working_dir: "$PKG_ROOT_WEBVIEW_UI/app" + + clan-app: + command: "clan-app --debug --content-uri http://localhost:3000" + depends_on: + webview-ui: + condition: "process_log_ready" + is_foreground: true + ready_log_line: "Debug mode enabled" + working_dir: "$PKG_ROOT_CLAN_APP" diff --git a/pkgs/ui/shell.nix b/pkgs/ui/shell.nix new file mode 100644 index 000000000..577853e3e --- /dev/null +++ b/pkgs/ui/shell.nix @@ -0,0 +1,90 @@ +{ + clan-app, + mkShell, + ruff, + webview-lib, + webview-ui, + clan-ts-api, + process-compose, + python3, + json2ts, + self', +}: + +mkShell { + name = "ui"; + + inputsFrom = [ + self'.devShells.default + webview-ui + ]; + + packages = [ + # required for reload-python-api.sh script + python3 + json2ts + ]; + + inherit (clan-app) propagatedBuildInputs; + + nativeBuildInputs = clan-app.nativeBuildInputs ++ [ + process-compose + ]; + + buildInputs = [ + (clan-app.pythonRuntime.withPackages ( + ps: + with ps; + [ + mypy + ] + ++ (clan-app.devshellPyDeps ps) + )) + ruff + ] ++ clan-app.runtimeDeps; + + shellHook = '' + export GIT_ROOT=$(git rev-parse --show-toplevel) + + export CLAN_CORE_PATH="$GIT_ROOT" + + export PKG_ROOT_UI="$GIT_ROOT/pkgs/ui" + export PKG_ROOT_CLAN_APP="$PKG_ROOT_UI"/clan-app + export PKG_ROOT_WEBVIEW_UI="$PKG_ROOT_UI"/webview-ui + + export NODE_PATH="$PKG_ROOT_WEBVIEW_UI/app/node_modules" + + # Add current package to PYTHONPATH + export PYTHONPATH="$PKG_ROOT_CLAN_APP''${PYTHONPATH:+:$PYTHONPATH:}" + + # Add clan-app command to PATH + export PATH="$PKG_ROOT_CLAN_APP/bin":"$PATH" + + # Add webview-ui scripts to PATH + scriptsPath="$PKG_ROOT/bin" + export PATH="$NODE_PATH/.bin:$scriptsPath:$PATH" + + # Add clan-cli to the python path so that we can import it without building it in nix first + export PYTHONPATH="$GIT_ROOT/pkgs/clan-cli":"$PYTHONPATH" + + export XDG_DATA_DIRS=$GSETTINGS_SCHEMAS_PATH:$XDG_DATA_DIRS + + export WEBVIEW_LIB_DIR=${webview-lib}/lib + source $PKG_ROOT_CLAN_APP/.local.env + + cp -r ${self'.packages.fonts} "$PKG_ROOT_WEBVIEW_UI/app/.fonts" + chmod -R +w "$PKG_ROOT_WEBVIEW_UI/app/.fonts" + + # Define the yellow color code + YELLOW='\033[1;33m' + # Define the reset color code + NC='\033[0m' + + mkdir -p "$PKG_ROOT_WEBVIEW_UI/app/api" + cp -r ${clan-ts-api}/* "$PKG_ROOT_WEBVIEW_UI/app/api" + chmod -R +w "$PKG_ROOT_WEBVIEW_UI/app/api" + + # configure process-compose + export PC_CONFIG_FILES="$PKG_ROOT_UI/process-compose.yaml" + ''; +}