Development Mode Backend for build:debug, Full Sourcemapping of Front and Backend, Full Debugging and working Vue Devtools Plugin

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+		{
+			"name": "Debug Frontend with Chrome",
+			"request": "launch",
+			"type": "chrome",
+			"url": "http://localhost:3000",
+			"webRoot": "${workspaceFolder}/packages/client/src",
+			"sourceMapPathOverrides": {
+				"webpack:///client/src/*": "${workspaceFolder}/built/_client_dist_/*",                    // Example: "webpack:///src/app.js" -> "/Users/me/project/app.js"
+			}
+		},
+		{
+			"name": "Attach to Backend by Process ID",
+			"processId": "${command:PickProcess}",
+			"request": "attach",
+			"skipFiles": [
+				"<node_internals>/**"
+			],
+			"type": "node"
+		}
+    ]
+}

docs/arch-devenv.md

@@ -0,0 +1,56 @@
+## Debugging and Developing on Arch Linux
+```
+# pacman -Syy redis postgresql git corepacker
+# systemctl enable --now redis
+# systemctl enable postgresql
+
+# su - postgres
+
+$[postgres] initdb --locale=C.UTF-8 --encoding=UTF8 -D /var/lib/postgres/data --data-checksums
+
+$[postgres] exit
+
+# systemctl start postgresql
+
+# exit
+
+$ sudo -u postgres psql
+postgres=# create database trashposs;
+postgres=# create user trashposs with encrypted password 'trashposs';
+postgres=# grant all privileges on database trashposs to trashposs;
+postgres=# \connect trashposs postgres
+trashposs=# GRANT ALL ON SCHEMA public TO trashposs;
+trashposs=# exit
+
+$ git clone https://iceshrimp.dev/Crimekillz/trashposs.git
+$ cp .config/devenv.yml .config/default.yml
+```
+# Run Debug Session with
+
+```
+$ cd ./trashposs/
+$ corepack enable && corepack prepare --activate && yarn --immutable
+$ yarn build:debug
+$ yarn migrate
+$ yarn start:debug
+```
+
+# Attach Visual Studio Code Debugger with
+
+F5 or Run and Debug Menu (select Attach by Process ID debugging profile)
+
+Select the process listed as node /user/bin/yarn start:debug
+
+If you're debugging the frontend, make sure to point visual studio at the source maps (only generated in debug build).
+
+Chrome seems to be stubborn sometimes and needs a poke. Open dev tools, go to sources, open any app JS file, copy it's URL and right click the code, select add source maps.
+
+Paste the URL and append .map to the filename.
+
+It will then catch on and find them all accordingly.
+
+# Debugging Vue
+
+Install https://devtools.vuejs.org/
+
+Press F12 to open the Browser's inbuilt devtools, Select more tools and bring the Vue tab to the front. If you can't see it, press Alt+F5.

package.json

@@ -9,7 +9,7 @@
 	"scripts": {
 		"rebuild": "clean && node ./scripts/build-greet.js && yarn workspace trashposs-js build &&  yarn workspaces foreach -Apitv run build && gulp",
 		"build": "node ./scripts/build-greet.js && yarn workspace trashposs-js run build && yarn workspaces foreach -Apitv run build && gulp",
-		"build:debug": "node ./scripts/build-greet.js && yarn workspace trashposs-js run build:debug && yarn workspaces foreach -Apitv run build:debug && gulp",
+		"build:debug": "NODE_ENV=development VUE_ENV=development node ./scripts/build-greet.js && yarn workspace trashposs-js run build:debug && yarn workspaces foreach -Apitv run build:debug && gulp",
 		"start": "yarn workspace backend run start",
 		"start:debug": "yarn workspace backend run start:debug",
 		"start:test": "yarn workspace backend run start:test",

packages/client/package.json

@@ -3,8 +3,8 @@
 	"private": true,
 	"scripts": {
 		"watch": "vite build --watch --mode development",
-		"build": "vite build",
-		"build:debug": "yarn build",
+		"build": "NODE_ENV=production VUE_ENV=production vite build",
+		"build:debug": "NODE_ENV=production VUE_ENV=production DEBUG=1 vite build --mode development",
 		"lint": "biome check **/*.ts --apply && yarn lint:vue",
 		"lint:vue": "paralint --ext .vue --fix '**/*.vue' --cache",
 		"format": "biome format * --write && prettier --write '**/*.{scss,vue}' --cache --cache-strategy metadata"

packages/client/src/init.ts

@@ -595,4 +595,17 @@ function checkForSplash() {
 
 	// shortcut
 	document.addEventListener("keydown", makeHotkey(hotkeys));
+
+	if (_DEV_) {
+		try {
+			const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue_app__).__vue_app__;
+			const version = app.version;
+			const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+			devtools.enabled = true;
+			devtools.emit('app:init', app, version, {});
+		} catch (e) {
+			console.info('Vue Devtools not detected.');
+			console.info('You can get them from: https://devtools.vuejs.org');
+		}
+	}
 })();

packages/client/tsconfig.json

@@ -8,7 +8,7 @@
 		"noUnusedLocals": true,
 		"noFallthroughCasesInSwitch": true,
 		"declaration": false,
-		"sourceMap": false,
+		"sourceMap": true,
 		"target": "es2017",
 		"module": "esnext",
 		"moduleResolution": "node",

packages/client/vite.config.ts

@@ -7,6 +7,8 @@ import meta from "../../package.json";
 import pluginJson5 from "./vite.json5";
 import viteCompression from "vite-plugin-compression";
 
+const isDebug = (process.env.DEBUG === "1" ? true : false) // Enables development mode despite NODE_ENV=production
+
 const extensions = [
 	".ts",
 	".tsx",
@@ -59,13 +61,13 @@ export default defineConfig(({ command, mode }) => {
 				Object.entries(locales).map(([k, v]) => [k, v._lang_]),
 			),
 			_ENV_: JSON.stringify(process.env.NODE_ENV),
-			_DEV_: process.env.NODE_ENV !== "production" || process.env.VUE_ENV === "development",
+			_DEV_: isDebug,
 			_PERF_PREFIX_: JSON.stringify("Misskey:"),
 			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify("mk_drive_file"),
 			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify("mk_drive_folder"),
 			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify("mk_deck_column"),
 			__VUE_OPTIONS_API__: true,
-			__VUE_PROD_DEVTOOLS__: process.env.VUE_ENV === "development",
+			__VUE_PROD_DEVTOOLS__: isDebug,
 		},
 
 		build: {
@@ -87,11 +89,12 @@ export default defineConfig(({ command, mode }) => {
 			outDir: `${__dirname}/../../built/_client_dist_`,
 			assetsDir: ".",
 			emptyOutDir: false,
-			sourcemap: process.env.NODE_ENV === "development" || process.env.VUE_ENV === "development",
 			reportCompressedSize: false,
 			commonjsOptions: {
 				include: [/trashposs-js/, /node_modules/],
 			},
+			minify: !isDebug,
+			sourcemap: isDebug,
 		},
 		optimizeDeps: {
 			auto: true,