fix console color to be compatible in chrome devtools (#71939)

vercel · Oct 30, 2024 · 574fb0b · 574fb0b
1 parent e07fad9
commit 574fb0b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 54 deletions.
diff --git a/packages/next/src/build/output/log.ts b/packages/next/src/build/output/log.ts
@@ -31,12 +31,21 @@ function prefixedLog(prefixType: keyof typeof prefixes, ...message: any[]) {
   if (message.length === 0) {
     console[consoleMethod]('')
   } else {
-    console[consoleMethod](' ' + prefix, ...message)
+    // Ensure if there's ANSI escape codes it's concatenated into one string.
+    // Chrome DevTool can only handle color if it's in one string.
+    if (message.length === 1 && typeof message[0] === 'string') {
+      console[consoleMethod](' ' + prefix + ' ' + message[0])
+    } else {
+      console[consoleMethod](' ' + prefix, ...message)
+    }
   }
 }
 
-export function bootstrap(...message: any[]) {
-  console.log(' ', ...message)
+export function bootstrap(...message: string[]) {
+  // logging format: ' <prefix> <message>'
+  // e.g. ' ✓ Compiled successfully'
+  // Add spaces to align with the indent of other logs
+  console.log('   ' + message.join(' '))
 }
 
 export function wait(...message: any[]) {

diff --git a/packages/next/src/lib/typescript/writeConfigurationDefaults.test.ts b/packages/next/src/lib/typescript/writeConfigurationDefaults.test.ts
@@ -93,50 +93,31 @@ describe('writeConfigurationDefaults()', () => {
           // eslint-disable-next-line no-control-regex
           .replace(/\x1B\[\d+m/g, '') // remove color control characters
       ).toMatchInlineSnapshot(`
-      "
-        
-      We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
-        
-      The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:
-
-        
-      	- target was set to ES2017 (For top-level \`await\`. Note: Next.js only polyfills for the esmodules target.)
-        
-      	- lib was set to dom,dom.iterable,esnext
-        
-      	- allowJs was set to true
-        
-      	- skipLibCheck was set to true
-        
-      	- strict was set to false
-        
-      	- noEmit was set to true
-        
-      	- incremental was set to true
-        
-      	- include was set to ['next-env.d.ts', '.next/types/**/*.ts', '**/*.ts', '**/*.tsx']
-        
-      	- plugins was updated to add { name: 'next' }
-        
-      	- exclude was set to ['node_modules']
-
-        
-      The following mandatory changes were made to your tsconfig.json:
-
-        
-      	- module was set to esnext (for dynamic import() support)
-        
-      	- esModuleInterop was set to true (requirement for SWC / babel)
-        
-      	- moduleResolution was set to node (to match webpack resolution)
-        
-      	- resolveJsonModule was set to true (to match webpack resolution)
-        
-      	- isolatedModules was set to true (requirement for SWC / Babel)
-        
-      	- jsx was set to preserve (next.js implements its own optimized jsx transform)
-      "
-    `)
+        "
+           We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
+           The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:
+
+           	- target was set to ES2017 (For top-level \`await\`. Note: Next.js only polyfills for the esmodules target.)
+           	- lib was set to dom,dom.iterable,esnext
+           	- allowJs was set to true
+           	- skipLibCheck was set to true
+           	- strict was set to false
+           	- noEmit was set to true
+           	- incremental was set to true
+           	- include was set to ['next-env.d.ts', '.next/types/**/*.ts', '**/*.ts', '**/*.tsx']
+           	- plugins was updated to add { name: 'next' }
+           	- exclude was set to ['node_modules']
+
+           The following mandatory changes were made to your tsconfig.json:
+
+           	- module was set to esnext (for dynamic import() support)
+           	- esModuleInterop was set to true (requirement for SWC / babel)
+           	- moduleResolution was set to node (to match webpack resolution)
+           	- resolveJsonModule was set to true (to match webpack resolution)
+           	- isolatedModules was set to true (requirement for SWC / Babel)
+           	- jsx was set to preserve (next.js implements its own optimized jsx transform)
+        "
+      `)
     })
 
     it('does not warn about disabled strict mode if strict mode was already enabled', async () => {

diff --git a/test/unit/warn-removed-experimental-config.test.ts b/test/unit/warn-removed-experimental-config.test.ts
@@ -2,11 +2,18 @@ import {
   warnOptionHasBeenMovedOutOfExperimental,
   warnOptionHasBeenDeprecated,
 } from 'next/dist/server/config'
+import stripAnsi from 'strip-ansi'
 
 describe('warnOptionHasBeenMovedOutOfExperimental', () => {
   let spy: jest.SpyInstance
   beforeAll(() => {
-    spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    spy = jest.spyOn(console, 'warn').mockImplementation((...args) => {
+      const [prefix, ...restArgs] = args
+      const formattedFirstArg = stripAnsi(prefix)
+      // pass the rest of the arguments to the spied console.warn
+      // @ts-expect-error accessing the mocked console.warn
+      console.warn.mock.calls.push([formattedFirstArg, ...restArgs])
+    })
   })
 
   it('should not log warning message without experimental config', () => {
@@ -45,8 +52,9 @@ describe('warnOptionHasBeenMovedOutOfExperimental', () => {
     )
 
     expect(spy).toHaveBeenCalledWith(
-      expect.stringContaining('⚠'),
-      '`experimental.skipTrailingSlashRedirect` has been moved to `skipTrailingSlashRedirect`. Please update your next.config.js file accordingly.'
+      expect.stringContaining(
+        ' ⚠ `experimental.skipTrailingSlashRedirect` has been moved to `skipTrailingSlashRedirect`. Please update your next.config.js file accordingly.'
+      )
     )
   })
 
@@ -64,8 +72,9 @@ describe('warnOptionHasBeenMovedOutOfExperimental', () => {
     )
 
     expect(spy).toHaveBeenCalledWith(
-      expect.stringContaining('⚠'),
-      '`experimental.relay` has been moved to `compiler.relay`. Please update your next.config.js file accordingly.'
+      expect.stringContaining(
+        ' ⚠ `experimental.relay` has been moved to `compiler.relay`. Please update your next.config.js file accordingly.'
+      )
     )
   })
 
@@ -121,8 +130,9 @@ describe('warnOptionHasBeenMovedOutOfExperimental', () => {
     )
 
     expect(spy).toHaveBeenCalledWith(
-      expect.stringContaining('⚠'),
-      '`experimental.bundlePagesExternals` has been moved to `bundlePagesRouterDependencies`. Please update your next.config.js file accordingly.'
+      expect.stringContaining(
+        ' ⚠ `experimental.bundlePagesExternals` has been moved to `bundlePagesRouterDependencies`. Please update your next.config.js file accordingly.'
+      )
     )
   })
 })