WIP: Improve console dimming on second StrictMode render#24306
Closed
billyjanitsch wants to merge 1 commit intofacebook:mainfrom
Closed
WIP: Improve console dimming on second StrictMode render#24306billyjanitsch wants to merge 1 commit intofacebook:mainfrom
billyjanitsch wants to merge 1 commit intofacebook:mainfrom
Conversation
Contributor
Author
|
Superseded by #24373. |
lunaruan
added a commit
that referenced
this pull request
Apr 14, 2022
Fixes #24302 based on #24306. --- The current implementation for strict mode double logging stringiness and dims the second log. However, because we stringify everything, including objects, this causes objects to be logged as `[object Object]` etc. This PR creates a new function that formats console log arguments with a specified style. It does this by: 1. The first param is a string that contains %c: Bail out and return the args without modifying the styles. We don't want to affect styles that the developer deliberately set. 2. The first param is a string that doesn't contain %c but contains string formatting: `[`%c${args[0]}`, style, ...args.slice(1)]` Note: we assume that the string formatting that the developer uses is correct. 3. The first param is a string that doesn't contain string formatting OR is not a string: Create a formatting string where: - boolean, string, symbol -> %s - number -> %f OR %i depending on if it's an int or float - default -> %o --- Co-authored-by: Billy Janitsch <billy@kensho.com>
lunaruan
added a commit
to lunaruan/react
that referenced
this pull request
Apr 14, 2022
Fixes facebook#24302 based on facebook#24306. --- The current implementation for strict mode double logging stringiness and dims the second log. However, because we stringify everything, including objects, this causes objects to be logged as `[object Object]` etc. This PR creates a new function that formats console log arguments with a specified style. It does this by: 1. The first param is a string that contains %c: Bail out and return the args without modifying the styles. We don't want to affect styles that the developer deliberately set. 2. The first param is a string that doesn't contain %c but contains string formatting: `[`%c${args[0]}`, style, ...args.slice(1)]` Note: we assume that the string formatting that the developer uses is correct. 3. The first param is a string that doesn't contain string formatting OR is not a string: Create a formatting string where: - boolean, string, symbol -> %s - number -> %f OR %i depending on if it's an int or float - default -> %o --- Co-authored-by: Billy Janitsch <billy@kensho.com>
rickhanlonii
pushed a commit
that referenced
this pull request
Apr 14, 2022
Fixes #24302 based on #24306. --- The current implementation for strict mode double logging stringiness and dims the second log. However, because we stringify everything, including objects, this causes objects to be logged as `[object Object]` etc. This PR creates a new function that formats console log arguments with a specified style. It does this by: 1. The first param is a string that contains %c: Bail out and return the args without modifying the styles. We don't want to affect styles that the developer deliberately set. 2. The first param is a string that doesn't contain %c but contains string formatting: `[`%c${args[0]}`, style, ...args.slice(1)]` Note: we assume that the string formatting that the developer uses is correct. 3. The first param is a string that doesn't contain string formatting OR is not a string: Create a formatting string where: - boolean, string, symbol -> %s - number -> %f OR %i depending on if it's an int or float - default -> %o --- Co-authored-by: Billy Janitsch <billy@kensho.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #24302. The goal is to apply dimming only to string values to avoid interfering with printing and introspection of complex values.
This PR isn't ready for review yet. Putting it up to show a working implementation, but:
formatimplementation in thebackend/directory. The one inhook.jshas only one callsite but the one inbackend/has several, some of which seem unrelated to browser console formatting. I don't have any knowledge of the devtools architecture so it'll take me some time to understand.Implementation notes
The console API has two forms:
['%cA %s', 'color: blue', 'B', 'C'].['A', 'B', 'C'].Colors can only be applied using the first form, and only to the contents of the placeholder string. So the basic idea is to coerce the argument list into the placeholder form, apply the color directives, and append additional placeholders for all arguments without one. Some examples of this translation:
['A', 1, 'B']=>['%c%s %o %s', 'color: X', 'A', 1, 'B']['A %d', 1, 'B']=>['%cA %d %c%s', 'color: X', 1, 'color: X', 'B']['A%cB', 'color: blue', 'C']=>['%cA%cB %c%s', 'color: X', 'color: blue', 'color: X', 'C']How did you test this change?
TBD