wip: move

Signed-off-by: blam <ben@blam.sh>

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": {

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": [

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<void>(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();
       });

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