diff --git a/webview-ui/package-lock.json b/webview-ui/package-lock.json index f008a92..47eab7d 100644 --- a/webview-ui/package-lock.json +++ b/webview-ui/package-lock.json @@ -19,6 +19,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", + "rewire": "^7.0.0", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, @@ -16494,6 +16495,15 @@ "node": ">=0.10.0" } }, + "node_modules/rewire": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/rewire/-/rewire-7.0.0.tgz", + "integrity": "sha512-DyyNyzwMtGYgu0Zl/ya0PR/oaunM+VuCuBxCuhYJHHaV0V+YvYa3bBGxb5OZ71vndgmp1pYY8F4YOwQo1siRGw==", + "license": "MIT", + "dependencies": { + "eslint": "^8.47.0" + } + }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", diff --git a/webview-ui/package.json b/webview-ui/package.json index f03841a..4859a56 100644 --- a/webview-ui/package.json +++ b/webview-ui/package.json @@ -14,12 +14,13 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", + "rewire": "^7.0.0", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", - "build": "react-scripts build", + "build": "node ./scripts/build-react-no-split.js", "test": "react-scripts test", "eject": "react-scripts eject" }, diff --git a/webview-ui/scripts/build-react-no-split.js b/webview-ui/scripts/build-react-no-split.js new file mode 100644 index 0000000..a57e5ed --- /dev/null +++ b/webview-ui/scripts/build-react-no-split.js @@ -0,0 +1,31 @@ +#!/usr/bin/env node + +/** + * A script that overrides some of the create-react-app build script configurations + * in order to disable code splitting/chunking and rename the output build files so + * they have no hash. (Reference: https://mtm.dev/disable-code-splitting-create-react-app). + * + * This is crucial for getting React webview code to run because VS Code expects a + * single (consistently named) JavaScript and CSS file when configuring webviews. + */ + +const rewire = require("rewire") +const defaults = rewire("react-scripts/scripts/build.js") +const config = defaults.__get__("config") + +// Disable code splitting +config.optimization.splitChunks = { + cacheGroups: { + default: false, + }, +} + +// Disable code chunks +config.optimization.runtimeChunk = false + +// Rename main.{hash}.js to main.js +config.output.filename = "static/js/[name].js" + +// 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"