From 6ce5f898332483e77b0298035db0a79f6f81e7a3 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Oct 2024 11:40:02 +0200 Subject: [PATCH 1/7] cli: add support form yaml in vite config Signed-off-by: Patrik Oldsberg --- packages/app/package.json | 1 + packages/cli/package.json | 4 +++ packages/cli/src/lib/bundler/server.ts | 2 ++ yarn.lock | 43 ++++++++++++++++++-------- 4 files changed, 37 insertions(+), 13 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 71ee806121..36eecdfebd 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -73,6 +73,7 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", + "@modyfi/vite-plugin-yaml": "^1.1.0", "@octokit/rest": "^19.0.3", "@vitejs/plugin-react": "^4.3.1", "history": "^5.0.0", diff --git a/packages/cli/package.json b/packages/cli/package.json index 4c30853803..6fa3103b48 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -193,12 +193,16 @@ "vite-plugin-node-polyfills": "^0.22.0" }, "peerDependencies": { + "@modyfi/vite-plugin-yaml": "^1.1.0", "@vitejs/plugin-react": "^4.3.1", "vite": "^5.0.0", "vite-plugin-html": "^3.2.2", "vite-plugin-node-polyfills": "^0.22.0" }, "peerDependenciesMeta": { + "@modyfi/vite-plugin-yaml": { + "optional": true + }, "@vitejs/plugin-react": { "optional": true }, diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index d73bcc662e..34510f997f 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -127,6 +127,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be if (process.env.EXPERIMENTAL_VITE) { const vite = require('vite'); const { default: viteReact } = require('@vitejs/plugin-react'); + const { default: viteYaml } = require('@modyfi/vite-plugin-yaml'); const { nodePolyfills: viteNodePolyfills, } = require('vite-plugin-node-polyfills'); @@ -143,6 +144,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be plugins: [ viteReact(), viteNodePolyfills(), + viteYaml(), viteHtml({ entry: paths.targetEntry, // todo(blam): we should look at contributing to thPe plugin here diff --git a/yarn.lock b/yarn.lock index 6862360cca..c48f2b447d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4057,11 +4057,14 @@ __metadata: yn: ^4.0.0 zod: ^3.22.4 peerDependencies: + "@modyfi/vite-plugin-yaml": ^1.1.0 "@vitejs/plugin-react": ^4.3.1 vite: ^5.0.0 vite-plugin-html: ^3.2.2 vite-plugin-node-polyfills: ^0.22.0 peerDependenciesMeta: + "@modyfi/vite-plugin-yaml": + optional: true "@vitejs/plugin-react": optional: true vite: @@ -11578,6 +11581,19 @@ __metadata: languageName: node linkType: hard +"@modyfi/vite-plugin-yaml@npm:^1.1.0": + version: 1.1.0 + resolution: "@modyfi/vite-plugin-yaml@npm:1.1.0" + dependencies: + "@rollup/pluginutils": 5.1.0 + js-yaml: 4.1.0 + tosource: 2.0.0-alpha.3 + peerDependencies: + vite: ^3.2.7 || ^4.0.5 || ^5.0.5 + checksum: 6989cde89323321b714b69d11b9125c8d3483a8c6ace536df313edd653180e85e6013effbc6cb8b89e6f9d6e107a10f7a82fadf6a44e81255b437702d5dd1db0 + languageName: node + linkType: hard + "@motionone/animation@npm:^10.12.0": version: 10.16.3 resolution: "@motionone/animation@npm:10.16.3" @@ -14908,17 +14924,7 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1": - version: 4.2.1 - resolution: "@rollup/pluginutils@npm:4.2.1" - dependencies: - estree-walker: ^2.0.1 - picomatch: ^2.2.2 - checksum: 6bc41f22b1a0f1efec3043899e4d3b6b1497b3dea4d94292d8f83b4cf07a1073ecbaedd562a22d11913ff7659f459677b01b09e9598a98936e746780ecc93a12 - languageName: node - linkType: hard - -"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0": +"@rollup/pluginutils@npm:5.1.0, @rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0": version: 5.1.0 resolution: "@rollup/pluginutils@npm:5.1.0" dependencies: @@ -14934,6 +14940,16 @@ __metadata: languageName: node linkType: hard +"@rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1": + version: 4.2.1 + resolution: "@rollup/pluginutils@npm:4.2.1" + dependencies: + estree-walker: ^2.0.1 + picomatch: ^2.2.2 + checksum: 6bc41f22b1a0f1efec3043899e4d3b6b1497b3dea4d94292d8f83b4cf07a1073ecbaedd562a22d11913ff7659f459677b01b09e9598a98936e746780ecc93a12 + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.22.5": version: 4.22.5 resolution: "@rollup/rollup-android-arm-eabi@npm:4.22.5" @@ -26860,6 +26876,7 @@ __metadata: "@material-ui/core": ^4.12.2 "@material-ui/icons": ^4.9.1 "@material-ui/lab": 4.0.0-alpha.61 + "@modyfi/vite-plugin-yaml": ^1.1.0 "@octokit/rest": ^19.0.3 "@playwright/test": ^1.32.3 "@testing-library/dom": ^10.0.0 @@ -31601,7 +31618,7 @@ __metadata: languageName: node linkType: hard -"js-yaml@npm:=4.1.0, js-yaml@npm:^4.0.0, js-yaml@npm:^4.1.0": +"js-yaml@npm:4.1.0, js-yaml@npm:=4.1.0, js-yaml@npm:^4.0.0, js-yaml@npm:^4.1.0": version: 4.1.0 resolution: "js-yaml@npm:4.1.0" dependencies: @@ -42600,7 +42617,7 @@ __metadata: languageName: node linkType: hard -"tosource@npm:^2.0.0-alpha.3": +"tosource@npm:2.0.0-alpha.3, tosource@npm:^2.0.0-alpha.3": version: 2.0.0-alpha.3 resolution: "tosource@npm:2.0.0-alpha.3" checksum: bc03a7571de8ed4306e6721283fa891f2adcab9dd80c46f6f177d4259b34bb192fe3a2cb3e1e2ce16f9db0bc7e534acfcb5478ab094b0ba255f98abfce6dab46 From 54c8aa3c43dbb4f4a38ca1827e53bbc7a2b86b5a Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Oct 2024 11:41:23 +0200 Subject: [PATCH 2/7] cli: fix react-dom/client check always running from CLI dir Signed-off-by: Patrik Oldsberg --- .changeset/good-trainers-appear.md | 5 +++++ packages/cli/src/lib/bundler/hasReactDomClient.ts | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/good-trainers-appear.md diff --git a/.changeset/good-trainers-appear.md b/.changeset/good-trainers-appear.md new file mode 100644 index 0000000000..3bce8c86bd --- /dev/null +++ b/.changeset/good-trainers-appear.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +The check for `react-dom/client` will now properly always run from the target directory. diff --git a/packages/cli/src/lib/bundler/hasReactDomClient.ts b/packages/cli/src/lib/bundler/hasReactDomClient.ts index e7ef7bbac9..67e6a3f42e 100644 --- a/packages/cli/src/lib/bundler/hasReactDomClient.ts +++ b/packages/cli/src/lib/bundler/hasReactDomClient.ts @@ -13,9 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +import { paths } from '../paths'; + export function hasReactDomClient() { try { - require.resolve('react-dom/client'); + require.resolve('react-dom/client', { + paths: [paths.targetDir], + }); return true; } catch { return false; From 1939595a2db779be62869387ac15d27227229f86 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Oct 2024 11:42:03 +0200 Subject: [PATCH 3/7] cli: refine vite Node.js polyfills Signed-off-by: Patrik Oldsberg --- packages/cli/src/lib/bundler/server.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index 34510f997f..bf67db5364 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -134,7 +134,6 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be const { createHtmlPlugin: viteHtml } = require('vite-plugin-html'); viteServer = await vite.createServer({ define: { - global: 'window', 'process.argv': JSON.stringify(process.argv), 'process.env.APP_CONFIG': JSON.stringify(cliConfig.frontendAppConfigs), // This allows for conditional imports of react-dom/client, since there's no way @@ -143,7 +142,23 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be }, plugins: [ viteReact(), - viteNodePolyfills(), + viteNodePolyfills({ + include: [ + 'buffer', + 'events', + 'os', + 'process', + 'querystring', + 'stream', + 'url', + 'util', + ], + globals: { + global: true, + Buffer: true, + process: true, + }, + }), viteYaml(), viteHtml({ entry: paths.targetEntry, From 7c05626d8c73fdca854e09b0c3da15a81dcdc256 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Oct 2024 11:44:03 +0200 Subject: [PATCH 4/7] cli: env var definitions for deps optimization in vite Signed-off-by: Patrik Oldsberg --- packages/cli/src/lib/bundler/server.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index bf67db5364..6256b168bd 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -132,6 +132,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be nodePolyfills: viteNodePolyfills, } = require('vite-plugin-node-polyfills'); const { createHtmlPlugin: viteHtml } = require('vite-plugin-html'); + viteServer = await vite.createServer({ define: { 'process.argv': JSON.stringify(process.argv), @@ -140,6 +141,24 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be // to check for presence of it in source code without module resolution errors. 'process.env.HAS_REACT_DOM_CLIENT': JSON.stringify(hasReactDomClient()), }, + optimizeDeps: { + esbuildOptions: { + plugins: [ + { + name: 'custom-define', + setup(build: { + initialOptions: { define: Record }; + }) { + const define = (build.initialOptions.define ||= {}); + define['process.env.HAS_REACT_DOM_CLIENT'] = JSON.stringify( + hasReactDomClient(), + ); + define['process.env.NODE_ENV'] = JSON.stringify('development'); + }, + }, + ], + }, + }, plugins: [ viteReact(), viteNodePolyfills({ From 4bfc2ce705ef4b038262d9403fb38e9d7f1ca558 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Oct 2024 11:45:08 +0200 Subject: [PATCH 5/7] changesets: changeset for vite updates Signed-off-by: Patrik Oldsberg --- .changeset/real-tigers-punch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/real-tigers-punch.md diff --git a/.changeset/real-tigers-punch.md b/.changeset/real-tigers-punch.md new file mode 100644 index 0000000000..c5597e50da --- /dev/null +++ b/.changeset/real-tigers-punch.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Updated the Vite implementation behind the `EXPERIMENTAL_VITE` flag to work with more recent versions of Backstage. From 16c6025f2175e0f9ba50abbd1bad768937376535 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Oct 2024 11:51:01 +0200 Subject: [PATCH 6/7] cli: use types for vite implementaiton Signed-off-by: Patrik Oldsberg --- packages/cli/src/lib/bundler/server.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index 6256b168bd..0dc4ce7b0f 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -125,13 +125,15 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be }); if (process.env.EXPERIMENTAL_VITE) { - const vite = require('vite'); - const { default: viteReact } = require('@vitejs/plugin-react'); - const { default: viteYaml } = require('@modyfi/vite-plugin-yaml'); - const { - nodePolyfills: viteNodePolyfills, - } = require('vite-plugin-node-polyfills'); - const { createHtmlPlugin: viteHtml } = require('vite-plugin-html'); + const vite = require('vite') as typeof import('vite'); + const { default: viteReact } = + require('@vitejs/plugin-react') as typeof import('@vitejs/plugin-react'); + const { default: viteYaml } = + require('@modyfi/vite-plugin-yaml') as typeof import('@modyfi/vite-plugin-yaml'); + const { nodePolyfills: viteNodePolyfills } = + require('vite-plugin-node-polyfills') as typeof import('vite-plugin-node-polyfills'); + const { createHtmlPlugin: viteHtml } = + require('vite-plugin-html') as typeof import('vite-plugin-html'); viteServer = await vite.createServer({ define: { @@ -146,9 +148,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be plugins: [ { name: 'custom-define', - setup(build: { - initialOptions: { define: Record }; - }) { + setup(build) { const define = (build.initialOptions.define ||= {}); define['process.env.HAS_REACT_DOM_CLIENT'] = JSON.stringify( hasReactDomClient(), From ff9c2f749c7603e325fefdbe68c64d0295eded12 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Oct 2024 11:56:31 +0200 Subject: [PATCH 7/7] cli: add back a few more node polyfills for vite config Signed-off-by: Patrik Oldsberg --- packages/cli/src/lib/bundler/server.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index 0dc4ce7b0f..6542e0a393 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -165,12 +165,17 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be include: [ 'buffer', 'events', + 'fs', + 'http', + 'https', 'os', + 'path', 'process', 'querystring', 'stream', 'url', 'util', + 'zlib', ], globals: { global: true,