From b4e67afcba0e9793ce2c5f889d2b94430b1f5969 Mon Sep 17 00:00:00 2001
From: Dennis Bartlett <bartlett.dc.1@gmail.com>
Date: Mon, 24 Feb 2025 18:16:15 -0800
Subject: [PATCH] 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 25ea46aa8dcffb1606be5e81100bfa939081a0c6.

* 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                |  5 +++++
 .vscode/launch.json                           |  6 +++++-
 .vscode/tasks.json                            |  5 +++++
 src/extension.ts                              | 20 +++++++++++++++++++
 webview-ui/scripts/build-react-no-split.js    | 10 ++++++++++
 .../src/components/settings/SettingsView.tsx  |  2 +-
 6 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/yellow-paws-chew.md

diff --git a/.changeset/yellow-paws-chew.md b/.changeset/yellow-paws-chew.md
new file mode 100644
index 0000000000..b697783d76
--- /dev/null
+++ b/.changeset/yellow-paws-chew.md
@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+ADD IS_DEV and Hot Reloading to debug
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 90323404cc..c03c771a6d 100644
--- a/.vscode/launch.json
+++ b/.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}"
+			}
 		}
 	]
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index e1413836d1..bb1e2b8999 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -24,6 +24,11 @@
 			"presentation": {
 				"group": "watch",
 				"reveal": "never"
+			},
+			"options": {
+				"env": {
+					"IS_DEV": "true"
+				}
 			}
 		},
 		{
diff --git a/src/extension.ts b/src/extension.ts
index ed9cff31e9..991f415a00 100644
--- a/src/extension.ts
+++ b/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")
+	})
+}
diff --git a/webview-ui/scripts/build-react-no-split.js b/webview-ui/scripts/build-react-no-split.js
index 28f37108be..d393018c3c 100644
--- a/webview-ui/scripts/build-react-no-split.js
+++ b/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"
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index ad1e141fa5..994aab161f 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/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