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..50e545472c 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,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") + }) +} 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