From d77e880da8c7762f3e9a3b5b037330d92eb1adea Mon Sep 17 00:00:00 2001 From: sebmarkbage Date: Wed, 21 Feb 2024 20:03:46 +0000 Subject: [PATCH] [Flight] Prefix Replayed Console Logs with a Badge (#28403) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. https://github.com/oven-sh/bun/issues/9021 So we just use a plain string prefix for now with a bracket until that's fixed. Screen shots: Screenshot 2024-02-21 at 12 56 02 AM Screenshot 2024-02-21 at 12 56 24 AM Screenshot 2024-02-21 at 12 57 10 AM Screenshot 2024-02-21 at 12 57 34 AM Screenshot 2024-02-21 at 12 58 23 AM Screenshot 2024-02-21 at 12 58 56 AM DiffTrain build for commit https://github.com/facebook/react/commit/c0274063f0d625d6e17e82f3436f4a0b78b7e58f. --- .../vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js | 2 +- .../vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js | 4 ++-- .../react-test-renderer/cjs/ReactTestRenderer-profiling.js | 4 ++-- .../xplat/js/RKJSModules/vendor/react/cjs/React-dev.js | 2 +- .../xplat/js/RKJSModules/vendor/react/cjs/React-prod.js | 2 +- .../xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js | 2 +- .../xplat/js/react-native-github/Libraries/Renderer/REVISION | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js index 3df5c8a9ce212..8d70fef2ee1d0 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js @@ -25707,7 +25707,7 @@ if (__DEV__) { return root; } - var ReactVersion = "18.3.0-canary-9a5b6bd84-20240221"; + var ReactVersion = "18.3.0-canary-c0274063f-20240221"; // Might add PROFILE later. diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js index c3dff24a58694..d2a8befc1ef36 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js @@ -9171,7 +9171,7 @@ var devToolsConfig$jscomp$inline_1014 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-canary-9a5b6bd84-20240221", + version: "18.3.0-canary-c0274063f-20240221", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1195 = { @@ -9202,7 +9202,7 @@ var internals$jscomp$inline_1195 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-9a5b6bd84-20240221" + reconcilerVersion: "18.3.0-canary-c0274063f-20240221" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1196 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js index 3f7c5dc976688..79f44846cb649 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js @@ -9599,7 +9599,7 @@ var devToolsConfig$jscomp$inline_1056 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-canary-9a5b6bd84-20240221", + version: "18.3.0-canary-c0274063f-20240221", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1236 = { @@ -9630,7 +9630,7 @@ var internals$jscomp$inline_1236 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-canary-9a5b6bd84-20240221" + reconcilerVersion: "18.3.0-canary-c0274063f-20240221" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1237 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js index 6994fb159274c..72895ef09b060 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js @@ -24,7 +24,7 @@ if (__DEV__) { ) { __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); } - var ReactVersion = "18.3.0-canary-9a5b6bd84-20240221"; + var ReactVersion = "18.3.0-canary-c0274063f-20240221"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js index 0bde97e635176..3127c1ef245a7 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js @@ -600,4 +600,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-canary-9a5b6bd84-20240221"; +exports.version = "18.3.0-canary-c0274063f-20240221"; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js index 5d0cebdb1bb91..b292ccd53386a 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js @@ -596,7 +596,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-canary-9a5b6bd84-20240221"; +exports.version = "18.3.0-canary-c0274063f-20240221"; "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION index a240a82322141..41352f5e6f6d7 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION @@ -1 +1 @@ -9a5b6bd84ffa69bfd8b2859ce23e56d17daa8c40 +c0274063f0d625d6e17e82f3436f4a0b78b7e58f