refactor: fix extension debugging (#500)

.vscode/launch.json

@@ -2,12 +2,26 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug VSCode core extension",
+      "name": "Watch Files",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm --filter catppuccin-vsc core:watch"
+    },
+    {
+      "name": "Debug Extension",
       "type": "extensionHost",
       "request": "launch",
-      "preLaunchTask": "npm: core:dev - packages/catppuccin-vsc",
-      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
-      "outFiles": ["${workspaceFolder}/packages/core/dist/*.js"]
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/packages/catppuccin-vsc"
+      ],
+      "outFiles": ["${workspaceFolder}/packages/catppuccin-vsc/dist/*.js"]
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug & Watch Files",
+      "configurations": ["Watch Files", "Debug Extension"],
+      "stopAll": true
     }
   ]
 }

README.md

@@ -284,9 +284,11 @@ If you have any questions regarding this port, feel free to [open an issue](http
 ## Development
 
 1. Clone and open this repository in VSCode.
-2. Launch a new instance from "Run and Debug". This will spawn a new instance, which will have the current build of the theme available.
-3. Make modifications to the JSON files in `./themes` to see the changes immediately.
-4. To preserve changes, they have to be edited in `./src/theme/*.ts`, since the theme builds the JSON files from there.
+2. Launch the "Debug & Watch Files" configuration from "Run and Debug". This
+   will spawn a new instance and also start a task watching the files in `./src`.
+   The watch task allows for the theme to be hot reloaded based on changes to the
+   TypeScript instead of the generated JSON.
+3. Make modifications in `./src` to see the changes immediately.
 
 ## 💝 Thanks to
 

packages/catppuccin-vsc/build.ts

@@ -3,13 +3,20 @@ import { createVSIX } from "@vscode/vsce";
 import { build } from "tsup";
 import { getFlag } from "type-flag";
 
-import updatePackageJson from "@/hooks/updatePackageJson";
+import { updatePackageJson, readPackageJsonVersion } from "@/hooks/packageJson";
 import generateThemes from "@/hooks/generateThemes";
 
 const development = getFlag("--dev", Boolean);
 
 await generateThemes();
-const packageJson = await updatePackageJson();
+
+const packageJsonVersion = await readPackageJsonVersion();
+if (!development) {
+  console.debug(
+    `Regenerating package.json with version "${packageJsonVersion}"`,
+  );
+  await updatePackageJson();
+}
 
 await build({
   clean: true,
@@ -20,7 +27,7 @@ await build({
   target: "node16",
 });
 
-const packagePath = `catppuccin-vsc-${packageJson.version}.vsix`;
+const packagePath = `catppuccin-vsc-${packageJsonVersion}.vsix`;
 
 await createVSIX({ dependencies: false, packagePath });
 

packages/catppuccin-vsc/package.json

@@ -184,6 +184,7 @@
   "scripts": {
     "core:build": "tsx build.ts",
     "core:dev": "tsx build.ts --dev",
+    "core:watch": "tsx watch build.ts --dev",
     "schema:ui": "tsx src/hooks/updateSchemas.ts"
   },
   "homepage": "https://github.com/catppuccin/vscode/tree/main/packages/catppuccin-vsc#readme"

packages/catppuccin-vsc/src/hooks/packageJson.ts

@@ -98,7 +98,16 @@ const configuration = (version: string) => {
   };
 };
 
-const main = async () => {
+const readPackageJsonVersion = async () => {
+  return await readFile(path.join(repoRoot, "package.json"), "utf8").then(
+    (data) => {
+      const json = JSON.parse(data);
+      return json.version;
+    },
+  );
+};
+
+const updatePackageJson = async () => {
   return await readFile(path.join(repoRoot, "package.json"), "utf8")
     .then((data) => JSON.parse(data))
     .then((data) => {
@@ -120,4 +129,4 @@ const main = async () => {
     });
 };
 
-export default main;
+export { updatePackageJson, readPackageJsonVersion };

packages/catppuccin-vsc/src/hooks/updateSchemas.ts

@@ -5,7 +5,7 @@ import path from "node:path";
 import { flavors } from "@catppuccin/palette";
 
 import { repoRoot } from "./constants";
-import { accents } from "./updatePackageJson";
+import { accents } from "./packageJson";
 
 // VSCode 1.98.2
 const vscodeSchemasRoot =