Reapply "Add IS_DEV and Hot Reloading to debug. (#1895)" (#1917) (#1942)

* Reapply "Add IS_DEV and Hot Reloading to debug. (#1895)" (#1917)

This reverts commit 25ea46aa8d.

* Update TODO to be more explicit. Update logic for checking IS_DEV

* Update TODO with even more explanation.  (Now with 2x more explanation per explanation

.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,22 @@ export function activate(context: vscode.ExtensionContext) {
 export function deactivate() {
 	Logger.log("Cline extension deactivated")
 }
+
+// TODO: Find a solution for automatically removing DEV related content from production builds.
+//  This type of code is fine in production to keep. We just will want to remove it from production builds
+//  to bring down built asset sizes.
+//
+// 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 && IS_DEV !== "false") {
+	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