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

* Add IS_DEV and Hot Reloading to debug.

* Changeset Added

* Clean logs

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