Add VS Code debugger support for in-browser playground (Shopify#309)

"Debug playground" will run the webpack dev server, and have VS Code attach to the process so that breakpoints in VS code work. It's fucking magical.
justshrey · Feb 29, 2024 · 3fa530a · 3fa530a
1 parent 8cd8606
commit 3fa530a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 16 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -3,17 +3,39 @@
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
-	"version": "0.2.0",
-	"configurations": [
-		{
-			"type": "extensionHost",
-			"request": "launch",
-			"name": "Launch Client",
-			"runtimeExecutable": "${execPath}",
-			"args": ["--extensionDevelopmentPath=${workspaceRoot}/packages/vscode-extension" ],
-			"autoAttachChildProcesses": true,
-			"sourceMaps": true,
-			"outFiles": [
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "extensionHost",
+      "request": "launch",
+      "name": "Launch Client",
+      "runtimeExecutable": "${execPath}",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceRoot}/packages/vscode-extension"
+      ],
+      "autoAttachChildProcesses": true,
+      "sourceMaps": true,
+      "outFiles": [
+        "${workspaceRoot}/packages/vscode-extension/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-language-server-common/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-language-server-node/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-check-common/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-check-node/dist/**/*.js",
+        "${workspaceRoot}/packages/theme-check-docs-updater/dist/**/*.js",
+        "${workspaceRoot}/packages/prettier-plugin-liquid/dist/**/*.js",
+        "${workspaceRoot}/packages/liquid-html-parser/dist/**/*.js",
+      ],
+      "preLaunchTask": "vscode dev watch"
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Debug playground",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/packages/codemirror-language-client/playground",
+      "outFiles": [
+        "${workspaceRoot}/packages/codemirror-language-client/playground/dist/**/*.js",
+        "${workspaceRoot}/packages/codemirror-language-client/dist/**/*.js",
         "${workspaceRoot}/packages/vscode-extension/dist/**/*.js",
         "${workspaceRoot}/packages/theme-language-server-common/dist/**/*.js",
         "${workspaceRoot}/packages/theme-language-server-node/dist/**/*.js",
@@ -23,7 +45,8 @@
         "${workspaceRoot}/packages/prettier-plugin-liquid/dist/**/*.js",
         "${workspaceRoot}/packages/liquid-html-parser/dist/**/*.js",
       ],
-			"preLaunchTask": "vscode dev watch"
-		},
-	]
+      "preLaunchTask": "playground",
+      "sourceMaps": true
+    }
+  ]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -27,6 +27,13 @@
       "label": "theme check build",
       "type": "shell",
       "command": "yarn --cwd packages/theme-check-node build:ts"
+    },
+    {
+      "label": "playground",
+      "type": "shell",
+      "command": "yarn playground",
+      "isBackground": true,
+      "problemMatcher": "$ts-webpack-watch"
     }
   ],
 }
diff --git a/packages/codemirror-language-client/package.json b/packages/codemirror-language-client/package.json
@@ -33,7 +33,7 @@
     "build:playground": "tsc -b playground/tsconfig.json",
     "dev": "yarn dev:client",
     "dev:client": "yarn build:esm --watch",
-    "dev:playground": "webpack serve --open -c ./playground/webpack.config.js",
+    "dev:playground": "webpack serve -c ./playground/webpack.config.js",
     "format": "prettier --write \"packages/*/src/**/*.ts\"",
     "format:check": "prettier --check --ignore-unknown \"packages/*/src/**/*.ts\"",
     "test": "vitest",

diff --git a/packages/codemirror-language-client/playground/webpack.config.js b/packages/codemirror-language-client/playground/webpack.config.js
@@ -19,7 +19,17 @@ const config = async () => {
     docsManager.systemTranslations(),
   ]);
 
+  const devServerConfig = {
+    devServer: {
+      open: false,
+      devMiddleware: {
+        writeToDisk: true,
+      },
+    }
+  }
+
   return {
+    ...devServerConfig,
     context: __dirname,
     mode: 'development',
     entry: './src/playground.ts',
@@ -68,4 +78,5 @@ const config = async () => {
     },
   };
 };
+
 module.exports = [config];
diff --git a/tsconfig.json b/tsconfig.json
@@ -25,7 +25,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
     /* Modules */
     "module": "commonjs", /* Specify what module code is generated. */
-    "rootDir": "packages", /* Specify the root folder within your source files. */
+    "rootDir": ".", /* Specify the root folder within your source files. */
     "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     "paths": {