feat: CLI shortcuts for preview server (#3653)

web-infra-dev · Oct 8, 2024 · fb5bde0 · fb5bde0
1 parent 8cab226
commit fb5bde0
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 45 deletions.
diff --git a/packages/core/src/server/cliShortcuts.ts b/packages/core/src/server/cliShortcuts.ts
@@ -14,7 +14,46 @@ export const isCliShortcutsEnabled = (
   devConfig: NormalizedDevConfig,
 ): boolean => devConfig.cliShortcuts && process.stdin.isTTY && !process.env.CI;
 
-export function setupCliShortcuts(shortcuts: CliShortcut[]): void {
+export function setupCliShortcuts({
+  openPage,
+  closeServer,
+  printUrls,
+}: {
+  openPage: () => Promise<void>;
+  closeServer: () => Promise<void>;
+  printUrls: () => void;
+}): void {
+  const shortcuts: CliShortcut[] = [
+    {
+      key: 'c',
+      description: `${color.bold('c + enter')}  ${color.dim('clear console')}`,
+      action: () => {
+        console.clear();
+      },
+    },
+    {
+      key: 'o',
+      description: `${color.bold('o + enter')}  ${color.dim('open in browser')}`,
+      action: openPage,
+    },
+    {
+      key: 'q',
+      description: `${color.bold('q + enter')}  ${color.dim('quit process')}`,
+      action: async () => {
+        try {
+          await closeServer();
+        } finally {
+          process.exit(0);
+        }
+      },
+    },
+    {
+      key: 'u',
+      description: `${color.bold('u + enter')}  ${color.dim('show urls')}`,
+      action: printUrls,
+    },
+  ];
+
   logger.log(
     `  ➜ ${color.dim('press')} ${color.bold('h + enter')} ${color.dim('to show shortcuts')}\n`,
   );

diff --git a/packages/core/src/server/devServer.ts b/packages/core/src/server/devServer.ts
@@ -2,7 +2,6 @@ import fs from 'node:fs';
 import type { Server } from 'node:http';
 import type { Http2SecureServer } from 'node:http2';
 import type Connect from 'connect';
-import color from 'picocolors';
 import { ROOT_DIST_DIR } from '../constants';
 import { getPublicPathFromCompiler, isMultiCompiler } from '../helpers';
 import { logger } from '../logger';
@@ -221,36 +220,11 @@ export async function createDevServer<
     printUrls();
 
     if (cliShortcutsEnabled) {
-      setupCliShortcuts([
-        {
-          key: 'c',
-          description: `${color.bold('c + enter')}  ${color.dim('clear console')}`,
-          action: () => {
-            console.clear();
-          },
-        },
-        {
-          key: 'o',
-          description: `${color.bold('o + enter')}  ${color.dim('open in browser')}`,
-          action: openPage,
-        },
-        {
-          key: 'q',
-          description: `${color.bold('q + enter')}  ${color.dim('quit process')}`,
-          action: async () => {
-            try {
-              await closeServer();
-            } finally {
-              process.exit(0);
-            }
-          },
-        },
-        {
-          key: 'u',
-          description: `${color.bold('u + enter')}  ${color.dim('show urls')}`,
-          action: printUrls,
-        },
-      ]);
+      setupCliShortcuts({
+        openPage,
+        closeServer,
+        printUrls,
+      });
     }
 
     if (!getPortSilently && portTip) {

diff --git a/packages/core/src/server/prodServer.ts b/packages/core/src/server/prodServer.ts
@@ -10,6 +10,7 @@ import type {
   RequestHandler,
   ServerConfig,
 } from '../types';
+import { isCliShortcutsEnabled, setupCliShortcuts } from './cliShortcuts';
 import {
   type StartServerResult,
   getAddressUrls,
@@ -24,6 +25,7 @@ import {
   getBaseMiddleware,
   getRequestLoggerMiddleware,
 } from './middlewares';
+import { open } from './open';
 
 type RsbuildProdServerOptions = {
   pwd: string;
@@ -202,28 +204,51 @@ export async function startProdServer(
 
         const protocol = https ? 'https' : 'http';
         const urls = getAddressUrls({ protocol, port, host });
+        const cliShortcutsEnabled = isCliShortcutsEnabled(config.dev);
 
-        printServerURLs({
-          urls,
-          port,
-          routes,
-          protocol,
-          printUrls: serverConfig.printUrls,
-        });
+        const closeServer = async () => {
+          await Promise.all([server.close(), serverTerminator()]);
+        };
 
-        if (portTip && !getPortSilently) {
-          logger.info(portTip);
+        const printUrls = () =>
+          printServerURLs({
+            urls,
+            port,
+            routes,
+            protocol,
+            printUrls: serverConfig.printUrls,
+            trailingLineBreak: !cliShortcutsEnabled,
+          });
+
+        const openPage = async () => {
+          return open({
+            https,
+            port,
+            routes,
+            config,
+            clearCache: true,
+          });
+        };
+
+        printUrls();
+
+        if (cliShortcutsEnabled) {
+          setupCliShortcuts({
+            openPage,
+            closeServer,
+            printUrls,
+          });
         }
 
-        const onClose = async () => {
-          await Promise.all([server.close(), serverTerminator()]);
-        };
+        if (!getPortSilently && portTip) {
+          logger.info(portTip);
+        }
 
         resolve({
           port,
           urls: urls.map((item) => item.url),
           server: {
-            close: onClose,
+            close: closeServer,
           },
         });
       },