diff --git a/.changeset/sad-weeks-pay.md b/.changeset/sad-weeks-pay.md new file mode 100644 index 00000000..209ecfce --- /dev/null +++ b/.changeset/sad-weeks-pay.md @@ -0,0 +1,5 @@ +--- +'@tanstack/devtools-vite': patch +--- + +Added css format specifier support to enhancedLogs diff --git a/examples/react/start/src/routes/__root.tsx b/examples/react/start/src/routes/__root.tsx index 595ef59d..1a7fb2bf 100644 --- a/examples/react/start/src/routes/__root.tsx +++ b/examples/react/start/src/routes/__root.tsx @@ -33,6 +33,7 @@ export const Route = createRootRoute({ }) function RootDocument({ children }: { children: React.ReactNode }) { + console.log('Rendering Root Document') return ( diff --git a/packages/devtools-vite/src/enhance-logs.test.ts b/packages/devtools-vite/src/enhance-logs.test.ts index 4e9be263..02770b08 100644 --- a/packages/devtools-vite/src/enhance-logs.test.ts +++ b/packages/devtools-vite/src/enhance-logs.test.ts @@ -94,7 +94,6 @@ describe('remove-devtools', () => { 3000, )!.code, ) - console.log('output', output) expect( output.includes( 'http://localhost:3000/__tsd/open-source?source=test.jsx', @@ -114,4 +113,20 @@ describe('remove-devtools', () => { ) expect(output).toBe(undefined) }) + + test('it adds enhanced console.log with css formatting to console.log()', () => { + const output = removeEmptySpace( + enhanceConsoleLog( + ` + console.log('This is a log') + `, + 'test.jsx', + 3000, + )!.code, + ) + expect(output.includes('color:#A0A')).toEqual(true) + expect(output.includes('color:#FFF')).toEqual(true) + expect(output.includes('color:#55F')).toEqual(true) + expect(output.includes('color:#FFF')).toEqual(true) + }) }) diff --git a/packages/devtools-vite/src/enhance-logs.ts b/packages/devtools-vite/src/enhance-logs.ts index d0d2aee6..8c6d3670 100644 --- a/packages/devtools-vite/src/enhance-logs.ts +++ b/packages/devtools-vite/src/enhance-logs.ts @@ -31,11 +31,42 @@ const transform = ( location.start.column, ] const finalPath = `${filePath}:${lineNumber}:${column + 1}` - path.node.arguments.unshift( + const logMessage = `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath}`)}\n → ` + + const serverLogMessage = t.arrayExpression([ + t.stringLiteral(logMessage), + ]) + const browserLogMessage = t.arrayExpression([ + // LOG with css formatting specifiers: %c t.stringLiteral( - `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`)}\n → `, + `%c${'LOG'}%c %c${`Go to Source: http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`}%c \n → `, + ), + // magenta + t.stringLiteral('color:#A0A'), + t.stringLiteral('color:#FFF'), + // blueBright + t.stringLiteral('color:#55F'), + t.stringLiteral('color:#FFF'), + ]) + + // typeof window === "undefined" + const checkServerCondition = t.binaryExpression( + '===', + t.unaryExpression('typeof', t.identifier('window')), + t.stringLiteral('undefined'), + ) + + // ...(isServer ? serverLogMessage : browserLogMessage) + path.node.arguments.unshift( + t.spreadElement( + t.conditionalExpression( + checkServerCondition, + serverLogMessage, + browserLogMessage, + ), ), ) + didTransform = true } },