-
Notifications
You must be signed in to change notification settings - Fork 46.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore[react-devtools]: improve console arguments formatting before passing it to original console #29873
chore[react-devtools]: improve console arguments formatting before passing it to original console #29873
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
}); | ||
|
||
// @reactVersion >= 16.0 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't really need this pragma here, because format
has nothing to do with different versions of React, so there is no reason to test it against them.
Comparing: f5af92d...91096cf Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
I’m not terribly familiar with these code paths. Can you elaborate your test plan to include what specific changes you’re looking for, and also what you validated in specific existing browsers (e.g. specific behavior you were verifying in Firefox). |
I've split these changes into 3 different PRs, some of which doesn't require the familiarity with this codebase. Some demos for React Native are in #29869, will add the Firefox here as well later. |
What if there's a style applied to the console already when it gets to us? @hoxyq |
Then we are not going to inline the react/packages/react-devtools-shared/src/__tests__/utils-test.js Lines 423 to 437 in 91096cf
Depending on where the |
@hoxyq OK! This is kinda surprising to me. But what if the log starts with their own ANSI? |
maybeMessage: any, | ||
...inputArgs: $ReadOnlyArray<any> | ||
): $ReadOnlyArray<any> { | ||
if (inputArgs.length === 0 || typeof maybeMessage !== 'string') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe it is worth checking here if "maybeMessage" is an ANSI template.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
|
OK! Approved. |
91096cf
to
6d14668
Compare
…ssing it to original console
6d14668
to
116a875
Compare
Full list of changes: * chore[react-devtools]: improve console arguments formatting before passing it to original console ([hoxyq](https://github.com/hoxyq) in [#29873](#29873)) * chore[react-devtools]: unify console patching and default to ansi escape symbols ([hoxyq](https://github.com/hoxyq) in [#29869](#29869)) * chore[react-devtools/backend]: remove consoleManagedByDevToolsDuringStrictMode ([hoxyq](https://github.com/hoxyq) in [#29856](#29856)) * chore[react-devtools/extensions]: make source maps url relative ([hoxyq](https://github.com/hoxyq) in [#29886](#29886)) * fix[react-devtools] divided inspecting elements between inspecting do… ([vzaidman](https://github.com/vzaidman) in [#29885](#29885)) * [Fiber] Create virtual Fiber when an error occurs during reconcilation ([sebmarkbage](https://github.com/sebmarkbage) in [#29804](#29804)) * fix[react-devtools] component badge in light mode is now not invisible ([vzaidman](https://github.com/vzaidman) in [#29852](#29852)) * Remove Warning: prefix and toString on console Arguments ([sebmarkbage](https://github.com/sebmarkbage) in [#29839](#29839)) * Add jest lint rules ([rickhanlonii](https://github.com/rickhanlonii) in [#29760](#29760)) * [Fiber] Track the Real Fiber for Key Warnings ([sebmarkbage](https://github.com/sebmarkbage) in [#29791](#29791)) * fix[react-devtools/store-test]: fork the test to represent current be… ([hoxyq](https://github.com/hoxyq) in [#29777](#29777)) * Default native inspections config false ([vzaidman](https://github.com/vzaidman) in [#29784](#29784)) * fix[react-devtools] remove native inspection button when it can't be used ([vzaidman](https://github.com/vzaidman) in [#29779](#29779)) * chore[react-devtools]: ip => internal-ip ([hoxyq](https://github.com/hoxyq) in [#29772](#29772)) * Fix #29724: `ip` dependency update for CVE-2024-29415 ([Rekl0w](https://github.com/Rekl0w) in [#29725](#29725)) * cleanup[react-devtools]: remove unused supportsProfiling flag from store config ([hoxyq](https://github.com/hoxyq) in [#29193](#29193)) * [Fiber] Enable Native console.createTask Stacks When Available ([sebmarkbage](https://github.com/sebmarkbage) in [#29223](#29223)) * Move createElement/JSX Warnings into the Renderer ([sebmarkbage](https://github.com/sebmarkbage) in [#29088](#29088)) * Set the current fiber to the source of the error during error reporting ([sebmarkbage](https://github.com/sebmarkbage) in [#29044](#29044)) * Unify ReactFiberCurrentOwner and ReactCurrentFiber ([sebmarkbage](https://github.com/sebmarkbage) in [#29038](#29038)) * Dim `console` calls on additional Effect invocations due to `StrictMode` ([eps1lon](https://github.com/eps1lon) in [#29007](#29007)) * refactor[react-devtools]: rewrite context menus ([hoxyq](https://github.com/hoxyq) in [#29049](#29049))
Stacked on #29869.
Summary
When using ANSI escape sequences, we construct a message in the following way:
console.<method>('\x1b...%s\x1b[0m', userspaceArgument1?, userspaceArgument2?, userspaceArgument3?, ...)
.This won't dim all arguments, if user had something like
console.log(1, 2, 3)
, we would only apply it to1
, since this is the first arguments, so we need to:How did you test this change?
Added some tests, manually inspected that it works well for web and native cases.