From eb63e1420b2b3f75da23d2be75e97d788bc0ec09 Mon Sep 17 00:00:00 2001 From: Crimekillz Date: Fri, 3 May 2024 20:46:05 +0200 Subject: [PATCH] Development Mode Backend for build:debug, Full Sourcemapping of Front and Backend, Full Debugging and working Vue Devtools Plugin --- .vscode/launch.json | 24 +++++++++++++++ docs/arch-devenv.md | 56 ++++++++++++++++++++++++++++++++++ package.json | 2 +- packages/client/package.json | 4 +-- packages/client/src/init.ts | 13 ++++++++ packages/client/tsconfig.json | 2 +- packages/client/vite.config.ts | 9 ++++-- 7 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 docs/arch-devenv.md diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..3928e4d8b --- /dev/null +++ b/.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": [ + "/**" + ], + "type": "node" + } + ] +} diff --git a/docs/arch-devenv.md b/docs/arch-devenv.md new file mode 100644 index 000000000..2572fa898 --- /dev/null +++ b/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. diff --git a/package.json b/package.json index 600f842a5..762275558 100644 --- a/package.json +++ b/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", diff --git a/packages/client/package.json b/packages/client/package.json index 81f61fa9d..c0a9534f7 100644 --- a/packages/client/package.json +++ b/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" diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index ed74d3ca7..50a93fe1c 100644 --- a/packages/client/src/init.ts +++ b/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'); + } + } })(); diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index 2d292dbfb..b75792bd6 100644 --- a/packages/client/tsconfig.json +++ b/packages/client/tsconfig.json @@ -8,7 +8,7 @@ "noUnusedLocals": true, "noFallthroughCasesInSwitch": true, "declaration": false, - "sourceMap": false, + "sourceMap": true, "target": "es2017", "module": "esnext", "moduleResolution": "node", diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts index e27d6cfd6..3509e01a0 100644 --- a/packages/client/vite.config.ts +++ b/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,