From 57f765f727d73ad947dc59353f44d16061a9dc47 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 20 Oct 2023 11:13:26 +0200 Subject: [PATCH] wip: move Signed-off-by: blam --- packages/app/package.json | 4 ++ packages/cli/package.json | 22 +++++++--- packages/cli/src/lib/bundler/server.ts | 57 ++++++++++++-------------- yarn.lock | 20 +++++++-- 4 files changed, 63 insertions(+), 40 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index df48491481..9c6b578cd8 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -93,12 +93,16 @@ "@roadiehq/backstage-plugin-github-insights": "^2.0.5", "@roadiehq/backstage-plugin-github-pull-requests": "^2.2.7", "@roadiehq/backstage-plugin-travis-ci": "^2.0.5", + "@vitejs/plugin-react": "^4.0.4", "history": "^5.0.0", "react": "^18.0.2", "react-dom": "^18.0.2", "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-use": "^17.2.4", + "vite": "^4.4.9", + "vite-plugin-html": "^3.2.0", + "vite-plugin-node-polyfills": "^0.14.1", "zen-observable": "^0.10.0" }, "devDependencies": { diff --git a/packages/cli/package.json b/packages/cli/package.json index 4f26a72785..4f08231f7e 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -68,7 +68,6 @@ "@types/webpack-env": "^1.15.2", "@typescript-eslint/eslint-plugin": "6.7.5", "@typescript-eslint/parser": "^6.7.2", - "@vitejs/plugin-react": "^4.0.4", "@yarnpkg/lockfile": "^1.1.0", "@yarnpkg/parsers": "^3.0.0-rc.4", "bfj": "^7.0.2", @@ -133,9 +132,6 @@ "tar": "^6.1.12", "terser-webpack-plugin": "^5.1.3", "util": "^0.12.3", - "vite": "^4.4.9", - "vite-plugin-html": "^3.2.0", - "vite-plugin-node-polyfills": "^0.14.1", "webpack": "^5.70.0", "webpack-dev-server": "^4.7.3", "webpack-node-externals": "^3.0.0", @@ -179,11 +175,27 @@ "type-fest": "^2.19.0" }, "peerDependencies": { - "@microsoft/api-extractor": "^7.21.2" + "@microsoft/api-extractor": "^7.21.2", + "@vitejs/plugin-react": "^4.0.4", + "vite": "^4.4.9", + "vite-plugin-html": "^3.2.0", + "vite-plugin-node-polyfills": "^0.14.1" }, "peerDependenciesMeta": { "@microsoft/api-extractor": { "optional": true + }, + "@vitejs/plugin-react": { + "optional": true + }, + "vite": { + "optional": true + }, + "vite-plugin-html": { + "optional": true + }, + "vite-plugin-node-polyfills": { + "optional": true } }, "files": [ diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index f7847c710e..b4d613bcb7 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -22,10 +22,6 @@ import uniq from 'lodash/uniq'; import openBrowser from 'react-dev-utils/openBrowser'; import webpack from 'webpack'; import WebpackDevServer from 'webpack-dev-server'; -import vite from 'vite'; -import viteReact from '@vitejs/plugin-react'; -import { nodePolyfills as viteNodePolyfills } from 'vite-plugin-node-polyfills'; -import { createHtmlPlugin as viteHtml } from 'vite-plugin-html'; import { forbiddenDuplicatesFilter, @@ -82,7 +78,9 @@ export async function serveBundle(options: ServeOptions) { const { name } = await fs.readJson(libPaths.resolveTarget('package.json')); - let server: WebpackDevServer | vite.ViteDevServer | undefined = undefined; + let webpackServer: WebpackDevServer | undefined = undefined; + // let viteServer: import('vite').ViteDevServer | undefined = undefined; + let latestFrontendAppConfigs: AppConfig[] = []; const cliConfig = await loadCliConfig({ @@ -91,15 +89,9 @@ export async function serveBundle(options: ServeOptions) { withFilteredKeys: true, watch(appConfigs) { latestFrontendAppConfigs = appConfigs; - if (server) { - if ('invalidate' in server) { - server.invalidate(); - } - if ('restart' in server) { - server.restart(); - } - } + webpackServer?.invalidate(); + viteServer?.restart(); }, }); latestFrontendAppConfigs = cliConfig.frontendAppConfigs; @@ -136,15 +128,8 @@ export async function serveBundle(options: ServeOptions) { config: fullConfig, targetPath: paths.targetPath, watch() { - if (server) { - if ('invalidate' in server) { - server.invalidate(); - } - - if ('restart' in server) { - server.restart(); - } - } + webpackServer?.invalidate(); + viteServer?.restart(); }, }); @@ -161,7 +146,14 @@ export async function serveBundle(options: ServeOptions) { }); if (process.env.EXPERIMENTAL_VITE) { - server = await vite.createServer({ + // const { default: vite } = await import('vite'); + // // Annoyting that this doesn't work. `package.json` is not declared in `exports`. + // // const { default: viteReact } = require('@vitejs/plugin-react'); + // const { nodePolyfills: viteNodePolyfills } = await import( + // 'vite-plugin-node-polyfills' + // ); + // const { createHtmlPlugin: viteHtml } = await import('vite-plugin-html'); + viteServer = await vite.createServer({ define: { global: 'window', 'process.argv': JSON.stringify(process.argv), @@ -196,7 +188,7 @@ export async function serveBundle(options: ServeOptions) { } else { const compiler = webpack(config); - server = new WebpackDevServer( + webpackServer = new WebpackDevServer( { hot: !process.env.CI, devMiddleware: { @@ -237,25 +229,28 @@ export async function serveBundle(options: ServeOptions) { ); } + await viteServer?.listen(); await new Promise(async (resolve, reject) => { - if (process.env.EXPERIMENTAL_VITE) { - await (server as vite.ViteDevServer).listen(); - } else { - (server as WebpackDevServer).startCallback((err?: Error) => { + if (webpackServer) { + webpackServer.startCallback((err?: Error) => { if (err) { reject(err); return; } + resolve(); }); + } else { + resolve(); } - openBrowser(url.href); - resolve(); }); + openBrowser(url.href); + const waitForExit = async () => { for (const signal of ['SIGINT', 'SIGTERM'] as const) { process.on(signal, () => { - server?.close(); + webpackServer?.close(); + viteServer?.close(); // exit instead of resolve. The process is shutting down and resolving a promise here logs an error process.exit(); }); diff --git a/yarn.lock b/yarn.lock index f82582ba47..0242c61e33 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3793,7 +3793,6 @@ __metadata: "@types/yarnpkg__lockfile": ^1.1.4 "@typescript-eslint/eslint-plugin": 6.7.5 "@typescript-eslint/parser": ^6.7.2 - "@vitejs/plugin-react": ^4.0.4 "@yarnpkg/lockfile": ^1.1.0 "@yarnpkg/parsers": ^3.0.0-rc.4 bfj: ^7.0.2 @@ -3863,9 +3862,6 @@ __metadata: ts-node: ^10.0.0 type-fest: ^2.19.0 util: ^0.12.3 - vite: ^4.4.9 - vite-plugin-html: ^3.2.0 - vite-plugin-node-polyfills: ^0.14.1 webpack: ^5.70.0 webpack-dev-server: ^4.7.3 webpack-node-externals: ^3.0.0 @@ -3875,9 +3871,21 @@ __metadata: zod: ^3.21.4 peerDependencies: "@microsoft/api-extractor": ^7.21.2 + "@vitejs/plugin-react": ^4.0.4 + vite: ^4.4.9 + vite-plugin-html: ^3.2.0 + vite-plugin-node-polyfills: ^0.14.1 peerDependenciesMeta: "@microsoft/api-extractor": optional: true + "@vitejs/plugin-react": + optional: true + vite: + optional: true + vite-plugin-html: + optional: true + vite-plugin-node-polyfills: + optional: true bin: backstage-cli: bin/backstage-cli languageName: unknown @@ -25571,6 +25579,7 @@ __metadata: "@types/react": "*" "@types/react-dom": "*" "@types/zen-observable": ^0.8.0 + "@vitejs/plugin-react": ^4.0.4 cross-env: ^7.0.0 history: ^5.0.0 react: ^18.0.2 @@ -25578,6 +25587,9 @@ __metadata: react-router: ^6.3.0 react-router-dom: ^6.3.0 react-use: ^17.2.4 + vite: ^4.4.9 + vite-plugin-html: ^3.2.0 + vite-plugin-node-polyfills: ^0.14.1 zen-observable: ^0.10.0 languageName: unknown linkType: soft