You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Flight] Prefix Replayed Console Logs with a Badge (#28403)
Builds on top of #28384.
This prefixes each log with a badge similar to how we badge built-ins
like "ForwardRef" and "Memo" in the React DevTools. The idea is that we
can add such badges in DevTools for Server Components too to carry on
the consistency.
This puts the "environment" name in the badge which defaults to
"Server". So you know which source it is coming from.
We try to use the same styling as the React DevTools. We use light-dark
mode where available to support the two different color styles, but if
it's not available I use a fixed background so that it's always readable
even in dark mode.
In Terminals, instead of hard coding colors that might not look good
with some themes, I use the ANSI color code to flip
background/foreground colors in that case.
In earlier commits I had it on the end of the line similar to the
DevTools badges but for multiline I found it better to prefix it. We
could try various options tough.
In most cases we can use both ANSI and the `%c` CSS color specifier,
because node will only use ANSI and hide the other. Chrome supports both
but the color overrides ANSI if it comes later (and Chrome doesn't
support color inverting anyway). Safari/Firefox prints the ANSI, so it
can only use CSS colors.
Therefore in browser builds I exclude ANSI.
On the server I support both so if you use Chrome inspector on the
server, you get nice colors on both terminal and in the inspector.
Since Bun uses WebKit inspector and it prints the ANSI we can't safely
emit both there. However, we also can't emit just the color specifier
because then it prints in the terminal.
oven-sh/bun#9021 So we just use a plain string
prefix for now with a bracket until that's fixed.
Screen shots:
<img width="758" alt="Screenshot 2024-02-21 at 12 56 02 AM"
src="https://github.com/facebook/react/assets/63648/4f887ffe-fffe-4402-bf2a-b7890986d60c">
<img width="759" alt="Screenshot 2024-02-21 at 12 56 24 AM"
src="https://github.com/facebook/react/assets/63648/f32d432f-f738-4872-a700-ea0a78e6c745">
<img width="514" alt="Screenshot 2024-02-21 at 12 57 10 AM"
src="https://github.com/facebook/react/assets/63648/205d2e82-75b7-4e2b-9d9c-aa9e2cbedf39">
<img width="489" alt="Screenshot 2024-02-21 at 12 57 34 AM"
src="https://github.com/facebook/react/assets/63648/ea52d1e4-b9fa-431d-ae9e-ccb87631f399">
<img width="516" alt="Screenshot 2024-02-21 at 12 58 23 AM"
src="https://github.com/facebook/react/assets/63648/52b50fac-bec0-471d-a457-1a10d8df9172">
<img width="956" alt="Screenshot 2024-02-21 at 12 58 56 AM"
src="https://github.com/facebook/react/assets/63648/0096ed61-5eff-4aa9-8a8a-2204e754bd1f">
DiffTrain build for commit c027406.
Copy file name to clipboardExpand all lines: compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -25707,7 +25707,7 @@ if (__DEV__) {
25707
25707
return root;
25708
25708
}
25709
25709
25710
-
var ReactVersion = "18.3.0-canary-9a5b6bd84-20240221";
25710
+
var ReactVersion = "18.3.0-canary-c0274063f-20240221";
Copy file name to clipboardExpand all lines: compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9171,7 +9171,7 @@ var devToolsConfig$jscomp$inline_1014 = {
9171
9171
throwError("TestRenderer does not support findFiberByHostInstance()");
9172
9172
},
9173
9173
bundleType: 0,
9174
-
version: "18.3.0-canary-9a5b6bd84-20240221",
9174
+
version: "18.3.0-canary-c0274063f-20240221",
9175
9175
rendererPackageName: "react-test-renderer"
9176
9176
};
9177
9177
varinternals$jscomp$inline_1195={
@@ -9202,7 +9202,7 @@ var internals$jscomp$inline_1195 = {
Copy file name to clipboardExpand all lines: compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9599,7 +9599,7 @@ var devToolsConfig$jscomp$inline_1056 = {
9599
9599
throwError("TestRenderer does not support findFiberByHostInstance()");
9600
9600
},
9601
9601
bundleType: 0,
9602
-
version: "18.3.0-canary-9a5b6bd84-20240221",
9602
+
version: "18.3.0-canary-c0274063f-20240221",
9603
9603
rendererPackageName: "react-test-renderer"
9604
9604
};
9605
9605
varinternals$jscomp$inline_1236={
@@ -9630,7 +9630,7 @@ var internals$jscomp$inline_1236 = {
0 commit comments