Add IS_DEV and Hot Reloading to debug. (#1895)

* Add IS_DEV and Hot Reloading to debug.

* Changeset Added

* Clean logs

.changeset/yellow-paws-chew.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+ADD IS_DEV and Hot Reloading to debug

.vscode/launch.json

@@ -11,7 +11,11 @@
 			"request": "launch",
 			"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
 			"outFiles": ["${workspaceFolder}/dist/**/*.js"],
-			"preLaunchTask": "${defaultBuildTask}"
+			"preLaunchTask": "${defaultBuildTask}",
+			"env": {
+				"IS_DEV": "true",
+				"DEV_WORKSPACE_FOLDER": "${workspaceFolder}"
+			}
 		}
 	]
 }

.vscode/tasks.json

@@ -24,6 +24,11 @@
 			"presentation": {
 				"group": "watch",
 				"reveal": "never"
+			},
+			"options": {
+				"env": {
+					"IS_DEV": "true"
+				}
 			}
 		},
 		{

src/extension.ts

@@ -7,6 +7,7 @@ import { Logger } from "./services/logging/Logger"
 import { createClineAPI } from "./exports"
 import "./utils/path" // necessary to have access to String.prototype.toPosix
 import { DIFF_VIEW_URI_SCHEME } from "./integrations/editor/DiffViewProvider"
+import assert from "node:assert"
 
 /*
 Built using https://github.com/microsoft/vscode-webview-ui-toolkit
@@ -190,3 +191,19 @@ export function activate(context: vscode.ExtensionContext) {
 export function deactivate() {
 	Logger.log("Cline extension deactivated")
 }
+
+// TODO: remove this in production
+// This is a workaround to reload the extension when the source code changes
+// since vscode doesn't support hot reload for extensions
+const { IS_DEV, DEV_WORKSPACE_FOLDER } = process.env
+
+if (IS_DEV) {
+	assert(DEV_WORKSPACE_FOLDER, "DEV_WORKSPACE_FOLDER must be set in development")
+	const watcher = vscode.workspace.createFileSystemWatcher(new vscode.RelativePattern(DEV_WORKSPACE_FOLDER, "src/**/*"))
+
+	watcher.onDidChange(({ scheme, path }) => {
+		console.info(`${scheme} ${path} changed. Reloading VSCode...`)
+
+		vscode.commands.executeCommand("workbench.action.reloadWindow")
+	})
+}

webview-ui/scripts/build-react-no-split.js

@@ -12,6 +12,7 @@
 const rewire = require("rewire")
 const defaults = rewire("react-scripts/scripts/build.js")
 const config = defaults.__get__("config")
+const webpack = require("webpack")
 
 /* Modifying Webpack Configuration for 'shared' dir
 This section uses Rewire to modify Create React App's webpack configuration without ejecting. Rewire allows us to inject and alter the internal build scripts of CRA at runtime. This allows us to maintain a flexible project structure that keeps shared code outside the webview-ui/src directory, while still adhering to CRA's security model that typically restricts imports to within src/. 
@@ -119,6 +120,15 @@ config.output = {
 	filename: "static/js/[name].js",
 }
 
+// Adjust build environment variables for dev/debug builds.
+config.plugins[4] = new webpack.DefinePlugin({
+	"process.env": {
+		...config.plugins[4].definitions["process.env"],
+		NODE_ENV: JSON.stringify(process.env.IS_DEV ? "development" : "production"),
+		IS_DEV: JSON.stringify(process.env.IS_DEV),
+	},
+})
+
 // Rename main.{hash}.css to main.css
 config.plugins[5].options.filename = "static/css/[name].css"
 config.plugins[5].options.moduleFilename = () => "static/css/main.css"

webview-ui/src/components/settings/SettingsView.tsx

@@ -5,7 +5,7 @@ import { validateApiConfiguration, validateModelId } from "../../utils/validate"
 import { vscode } from "../../utils/vscode"
 import ApiOptions from "./ApiOptions"
 import SettingsButton from "../common/SettingsButton"
-const IS_DEV = false // FIXME: use flags when packaging
+const { IS_DEV } = process.env
 
 type SettingsViewProps = {
 	onDone: () => void