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/packages/devtools-vite/src/enhance-logs.test.ts b/packages/devtools-vite/src/enhance-logs.test.ts index 4e9be263..9bd72364 100644 --- a/packages/devtools-vite/src/enhance-logs.test.ts +++ b/packages/devtools-vite/src/enhance-logs.test.ts @@ -114,4 +114,21 @@ 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, + true, + )!.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..4f976d40 100644 --- a/packages/devtools-vite/src/enhance-logs.ts +++ b/packages/devtools-vite/src/enhance-logs.ts @@ -8,6 +8,7 @@ const transform = ( ast: ParseResult, filePath: string, port: number, + cssFormatting: boolean, ) => { let didTransform = false @@ -31,11 +32,27 @@ const transform = ( location.start.column, ] const finalPath = `${filePath}:${lineNumber}:${column + 1}` - path.node.arguments.unshift( - t.stringLiteral( - `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`)}\n → `, - ), - ) + // Prefer ANSI escape codes for formatting. + if (!cssFormatting) { + path.node.arguments.unshift( + t.stringLiteral( + `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`)}\n → `, + ), + ) + } else { + path.node.arguments.unshift( + // LOG with css formatting specifiers: %c + t.stringLiteral( + `%c${'LOG'}%c %c${`${finalPath} - 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'), + ) + } didTransform = true } }, @@ -44,7 +61,12 @@ const transform = ( return didTransform } -export function enhanceConsoleLog(code: string, id: string, port: number) { +export function enhanceConsoleLog( + code: string, + id: string, + port: number, + cssFormatting?: boolean, +) { const [filePath] = id.split('?') // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain const location = filePath?.replace(normalizePath(process.cwd()), '')! @@ -54,7 +76,7 @@ export function enhanceConsoleLog(code: string, id: string, port: number) { sourceType: 'module', plugins: ['jsx', 'typescript'], }) - const didTransform = transform(ast, location, port) + const didTransform = transform(ast, location, port, cssFormatting === true) if (!didTransform) { return } diff --git a/packages/devtools-vite/src/plugin.ts b/packages/devtools-vite/src/plugin.ts index 4c221b7c..5eacde13 100644 --- a/packages/devtools-vite/src/plugin.ts +++ b/packages/devtools-vite/src/plugin.ts @@ -41,6 +41,12 @@ export type TanStackDevtoolsViteConfig = { * @default true */ enabled: boolean + /** + * Whether to use CSS formatting for enhanced logging. + * @note Chrome supports ANSI escape codes for formatting. Firefox does not. + * @default false + */ + cssFormatting?: boolean } /** * Whether to remove devtools from the production build. @@ -433,7 +439,12 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array => { ) return - return enhanceConsoleLog(code, id, port) + return enhanceConsoleLog( + code, + id, + port, + enhancedLogsConfig.cssFormatting, + ) }, }, {