From 2c3f7058604ac63495bb81a5c14d812be4b6569c Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Wed, 31 Jul 2024 19:16:49 +0100 Subject: [PATCH 1/3] feat[react-devtools]: add settings to global hook object --- .../src/backend/agent.js | 39 +++++++------------ .../src/backend/console.js | 2 +- .../src/backend/index.js | 4 ++ .../src/backend/types.js | 10 +++++ packages/react-devtools-shared/src/hook.js | 27 ++++++++++++- 5 files changed, 56 insertions(+), 26 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 92db4c062d5a2..cb45f5368776c 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -37,11 +37,9 @@ import type { RendererID, RendererInterface, ConsolePatchSettings, + DevToolsHookSettings, } from './types'; -import type { - ComponentFilter, - BrowserTheme, -} from 'react-devtools-shared/src/frontend/types'; +import type {ComponentFilter} from 'react-devtools-shared/src/frontend/types'; import {isSynchronousXHRSupported, isReactNativeEnvironment} from './utils'; const debug = (methodName: string, ...args: Array) => { @@ -152,6 +150,7 @@ export default class Agent extends EventEmitter<{ traceUpdates: [Set], drawTraceUpdates: [Array], disableTraceUpdates: [], + updateHookSettings: [DevToolsHookSettings], }> { _bridge: BackendBridge; _isProfiling: boolean = false; @@ -805,30 +804,22 @@ export default class Agent extends EventEmitter<{ } }; - updateConsolePatchSettings: ({ - appendComponentStack: boolean, - breakOnConsoleErrors: boolean, - browserTheme: BrowserTheme, - hideConsoleLogsInStrictMode: boolean, - showInlineWarningsAndErrors: boolean, - }) => void = ({ - appendComponentStack, - breakOnConsoleErrors, - showInlineWarningsAndErrors, - hideConsoleLogsInStrictMode, - browserTheme, - }: ConsolePatchSettings) => { + updateConsolePatchSettings: ( + settings: $ReadOnly, + ) => void = settings => { + // Propagate the settings, so Backend can subscribe to it and modify hook + this.emit('updateHookSettings', { + appendComponentStack: settings.appendComponentStack, + breakOnConsoleErrors: settings.breakOnConsoleErrors, + showInlineWarningsAndErrors: settings.showInlineWarningsAndErrors, + hideConsoleLogsInStrictMode: settings.hideConsoleLogsInStrictMode, + }); + // If the frontend preferences have changed, // or in the case of React Native- if the backend is just finding out the preferences- // then reinstall the console overrides. // It's safe to call `patchConsole` multiple times. - patchConsole({ - appendComponentStack, - breakOnConsoleErrors, - showInlineWarningsAndErrors, - hideConsoleLogsInStrictMode, - browserTheme, - }); + patchConsole(settings); }; updateComponentFilters: (componentFilters: Array) => void = diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index f1a2ee72f7009..e213edef64c40 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -136,7 +136,7 @@ export function patch({ showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, browserTheme, -}: ConsolePatchSettings): void { +}: $ReadOnly): void { // Settings may change after we've patched the console. // Using a shared ref allows the patch function to read the latest values. consoleSettingsRef.appendComponentStack = appendComponentStack; diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js index 03a8f0755d496..5c09a32169e2c 100644 --- a/packages/react-devtools-shared/src/backend/index.js +++ b/packages/react-devtools-shared/src/backend/index.js @@ -140,6 +140,10 @@ export function initBackend( agent.removeListener('shutdown', onAgentShutdown); }); + agent.addListener('updateHookSettings', settings => { + hook.settings = settings; + }); + return () => { subs.forEach(fn => fn()); }; diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index f8261c5c7927e..e41135f5f41f4 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -516,6 +516,9 @@ export type DevToolsHook = { // Testing dangerous_setTargetConsoleForTesting?: (fakeConsole: Object) => void, + settings: DevToolsHookSettings, + settingsHaveBeenInjected: boolean, + injectSettings: (settings: DevToolsHookSettings) => void, ... }; @@ -526,3 +529,10 @@ export type ConsolePatchSettings = { hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme, }; + +export type DevToolsHookSettings = { + appendComponentStack: boolean, + breakOnConsoleErrors: boolean, + showInlineWarningsAndErrors: boolean, + hideConsoleLogsInStrictMode: boolean, +}; diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index aeef1abc0e737..a333b6a00139a 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -15,6 +15,7 @@ import type { RendererID, RendererInterface, DevToolsBackend, + DevToolsHookSettings, } from './backend/types'; import { @@ -24,7 +25,17 @@ import { declare var window: any; -export function installHook(target: any): DevToolsHook | null { +const defaultHookSettings: DevToolsHookSettings = { + appendComponentStack: true, + breakOnConsoleErrors: false, + showInlineWarningsAndErrors: true, + hideConsoleLogsInStrictMode: false, +}; + +export function installHook( + target: any, + settingsToInject?: DevToolsHookSettings, +): DevToolsHook | null { if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) { return null; } @@ -526,6 +537,16 @@ export function installHook(target: any): DevToolsHook | null { const renderers = new Map(); const backends = new Map(); + const settings = settingsToInject || defaultHookSettings; + const settingsHaveBeenInjected = settingsToInject != null; + + // Should be used once when the persisted settings were loaded from some asynchronous storage + // This will be used as a signal that Hook initialization has finished, and it can now use patched console implementation + function injectSettings(newSettings: DevToolsHookSettings): void { + hook.settings = newSettings; + hook.settingsHaveBeenInjected = true; + } + const hook: DevToolsHook = { rendererInterfaces, listeners, @@ -562,6 +583,10 @@ export function installHook(target: any): DevToolsHook | null { getInternalModuleRanges, registerInternalModuleStart, registerInternalModuleStop, + + settings, + settingsHaveBeenInjected, + injectSettings, }; if (__TEST__) { From 1cd3fec9a1f94714b1279e061afa79ce2b7f3d18 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 1 Aug 2024 13:48:46 +0100 Subject: [PATCH 2/3] refactor[react-devtools]: remove browserTheme from ConsolePatchSettings --- packages/react-devtools-core/src/cachedSettings.js | 5 ++--- .../src/main/syncSavedPreferences.js | 4 ---- .../react-devtools-shared/src/backend/console.js | 9 +-------- packages/react-devtools-shared/src/backend/types.js | 12 +++--------- .../src/devtools/views/Settings/SettingsContext.js | 2 -- 5 files changed, 6 insertions(+), 26 deletions(-) diff --git a/packages/react-devtools-core/src/cachedSettings.js b/packages/react-devtools-core/src/cachedSettings.js index 18ecd696b3c7c..afe12bfdbc5ad 100644 --- a/packages/react-devtools-core/src/cachedSettings.js +++ b/packages/react-devtools-core/src/cachedSettings.js @@ -9,7 +9,7 @@ import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/types'; import {writeConsolePatchSettingsToWindow} from 'react-devtools-shared/src/backend/console'; -import {castBool, castBrowserTheme} from 'react-devtools-shared/src/utils'; +import {castBool} from 'react-devtools-shared/src/utils'; // Note: all keys should be optional in this type, because users can use newer // versions of React DevTools with older versions of React Native, and the object @@ -54,14 +54,13 @@ function parseConsolePatchSettings( breakOnConsoleErrors, showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, - browserTheme, } = parsedValue; + return { appendComponentStack: castBool(appendComponentStack) ?? true, breakOnConsoleErrors: castBool(breakOnConsoleErrors) ?? false, showInlineWarningsAndErrors: castBool(showInlineWarningsAndErrors) ?? true, hideConsoleLogsInStrictMode: castBool(hideConsoleLogsInStrictMode) ?? false, - browserTheme: castBrowserTheme(browserTheme) ?? 'dark', }; } diff --git a/packages/react-devtools-extensions/src/main/syncSavedPreferences.js b/packages/react-devtools-extensions/src/main/syncSavedPreferences.js index 6ceed86fcd06d..f22d41eb7c904 100644 --- a/packages/react-devtools-extensions/src/main/syncSavedPreferences.js +++ b/packages/react-devtools-extensions/src/main/syncSavedPreferences.js @@ -7,7 +7,6 @@ import { getShowInlineWarningsAndErrors, getHideConsoleLogsInStrictMode, } from 'react-devtools-shared/src/utils'; -import {getBrowserTheme} from 'react-devtools-extensions/src/utils'; // The renderer interface can't read saved component filters directly, // because they are stored in localStorage within the context of the extension. @@ -28,9 +27,6 @@ function syncSavedPreferences() { )}; window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify( getHideConsoleLogsInStrictMode(), - )}; - window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify( - getBrowserTheme(), )};`, ); } diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index e213edef64c40..e511abb5dfee2 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -18,7 +18,7 @@ import { ANSI_STYLE_DIMMING_TEMPLATE, ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK, } from 'react-devtools-shared/src/constants'; -import {castBool, castBrowserTheme} from '../utils'; +import {castBool} from '../utils'; const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn']; @@ -125,7 +125,6 @@ const consoleSettingsRef: ConsolePatchSettings = { breakOnConsoleErrors: false, showInlineWarningsAndErrors: false, hideConsoleLogsInStrictMode: false, - browserTheme: 'dark', }; // Patches console methods to append component stack for the current fiber. @@ -135,7 +134,6 @@ export function patch({ breakOnConsoleErrors, showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, - browserTheme, }: $ReadOnly): void { // Settings may change after we've patched the console. // Using a shared ref allows the patch function to read the latest values. @@ -143,7 +141,6 @@ export function patch({ consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors; consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors; consoleSettingsRef.hideConsoleLogsInStrictMode = hideConsoleLogsInStrictMode; - consoleSettingsRef.browserTheme = browserTheme; if ( appendComponentStack || @@ -403,15 +400,12 @@ export function patchConsoleUsingWindowValues() { const hideConsoleLogsInStrictMode = castBool(window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__) ?? false; - const browserTheme = - castBrowserTheme(window.__REACT_DEVTOOLS_BROWSER_THEME__) ?? 'dark'; patch({ appendComponentStack, breakOnConsoleErrors, showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, - browserTheme, }); } @@ -429,7 +423,6 @@ export function writeConsolePatchSettingsToWindow( settings.showInlineWarningsAndErrors; window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = settings.hideConsoleLogsInStrictMode; - window.__REACT_DEVTOOLS_BROWSER_THEME__ = settings.browserTheme; } export function installConsoleFunctionsToWindow(): void { diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index e41135f5f41f4..fa5dcfdb41ec4 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -31,7 +31,6 @@ import type { } from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor'; import type {InitBackend} from 'react-devtools-shared/src/backend'; import type {TimelineDataExport} from 'react-devtools-timeline/src/types'; -import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types'; import type {BackendBridge} from 'react-devtools-shared/src/bridge'; import type {Source} from 'react-devtools-shared/src/shared/types'; import type Agent from './agent'; @@ -522,17 +521,12 @@ export type DevToolsHook = { ... }; -export type ConsolePatchSettings = { - appendComponentStack: boolean, - breakOnConsoleErrors: boolean, - showInlineWarningsAndErrors: boolean, - hideConsoleLogsInStrictMode: boolean, - browserTheme: BrowserTheme, -}; - export type DevToolsHookSettings = { appendComponentStack: boolean, breakOnConsoleErrors: boolean, showInlineWarningsAndErrors: boolean, hideConsoleLogsInStrictMode: boolean, }; + +// Will be removed together with console patching from backend/console.js to hook.js +export type ConsolePatchSettings = DevToolsHookSettings; diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js index a6f2c5e8c2a78..33487c2f553d6 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -202,7 +202,6 @@ function SettingsContextController({ breakOnConsoleErrors, showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, - browserTheme, }); }, [ bridge, @@ -210,7 +209,6 @@ function SettingsContextController({ breakOnConsoleErrors, showInlineWarningsAndErrors, hideConsoleLogsInStrictMode, - browserTheme, ]); useEffect(() => { From 9005ee2e538a86deaa9dd1dffda3ae8e1c3615c2 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 1 Aug 2024 15:01:37 +0100 Subject: [PATCH 3/3] chore[react-devtools]: extract ReactWorkTagMap into a separate module --- .../src/backend/fiber/getWorkTagMap.js | 205 ++++++++++++++++++ .../src/backend/fiber/renderer.js | 191 +--------------- 2 files changed, 207 insertions(+), 189 deletions(-) create mode 100644 packages/react-devtools-shared/src/backend/fiber/getWorkTagMap.js diff --git a/packages/react-devtools-shared/src/backend/fiber/getWorkTagMap.js b/packages/react-devtools-shared/src/backend/fiber/getWorkTagMap.js new file mode 100644 index 0000000000000..9618d82fc451c --- /dev/null +++ b/packages/react-devtools-shared/src/backend/fiber/getWorkTagMap.js @@ -0,0 +1,205 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +// Do not add / import anything to this file. +// This function is used from multiple places, including hook. + +import type {WorkTagMap} from 'react-devtools-shared/src/backend/types'; + +import {gt, gte} from 'react-devtools-shared/src/backend/utils'; + +export default function getWorkTagMap(version: string): WorkTagMap { + let ReactTypeOfWork: WorkTagMap = ((null: any): WorkTagMap); + + // ********************************************************** + // The section below is copied from files in React repo, see ReactWorkTags.js. + // Keep it in sync, and add version guards if it changes. + if (gt(version, '17.0.1')) { + ReactTypeOfWork = { + CacheComponent: 24, // Experimental + ClassComponent: 1, + ContextConsumer: 9, + ContextProvider: 10, + CoroutineComponent: -1, // Removed + CoroutineHandlerPhase: -1, // Removed + DehydratedSuspenseComponent: 18, // Behind a flag + ForwardRef: 11, + Fragment: 7, + FunctionComponent: 0, + HostComponent: 5, + HostPortal: 4, + HostRoot: 3, + HostHoistable: 26, // In reality, 18.2+. But doesn't hurt to include it here + HostSingleton: 27, // Same as above + HostText: 6, + IncompleteClassComponent: 17, + IncompleteFunctionComponent: 28, + IndeterminateComponent: 2, // removed in 19.0.0 + LazyComponent: 16, + LegacyHiddenComponent: 23, + MemoComponent: 14, + Mode: 8, + OffscreenComponent: 22, // Experimental + Profiler: 12, + ScopeComponent: 21, // Experimental + SimpleMemoComponent: 15, + SuspenseComponent: 13, + SuspenseListComponent: 19, // Experimental + TracingMarkerComponent: 25, // Experimental - This is technically in 18 but we don't + // want to fork again so we're adding it here instead + YieldComponent: -1, // Removed + Throw: 29, + }; + } else if (gte(version, '17.0.0-alpha')) { + ReactTypeOfWork = { + CacheComponent: -1, // Doesn't exist yet + ClassComponent: 1, + ContextConsumer: 9, + ContextProvider: 10, + CoroutineComponent: -1, // Removed + CoroutineHandlerPhase: -1, // Removed + DehydratedSuspenseComponent: 18, // Behind a flag + ForwardRef: 11, + Fragment: 7, + FunctionComponent: 0, + HostComponent: 5, + HostPortal: 4, + HostRoot: 3, + HostHoistable: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet + HostText: 6, + IncompleteClassComponent: 17, + IncompleteFunctionComponent: -1, // Doesn't exist yet + IndeterminateComponent: 2, + LazyComponent: 16, + LegacyHiddenComponent: 24, + MemoComponent: 14, + Mode: 8, + OffscreenComponent: 23, // Experimental + Profiler: 12, + ScopeComponent: 21, // Experimental + SimpleMemoComponent: 15, + SuspenseComponent: 13, + SuspenseListComponent: 19, // Experimental + TracingMarkerComponent: -1, // Doesn't exist yet + YieldComponent: -1, // Removed + Throw: -1, // Doesn't exist yet + }; + } else if (gte(version, '16.6.0-beta.0')) { + ReactTypeOfWork = { + CacheComponent: -1, // Doesn't exist yet + ClassComponent: 1, + ContextConsumer: 9, + ContextProvider: 10, + CoroutineComponent: -1, // Removed + CoroutineHandlerPhase: -1, // Removed + DehydratedSuspenseComponent: 18, // Behind a flag + ForwardRef: 11, + Fragment: 7, + FunctionComponent: 0, + HostComponent: 5, + HostPortal: 4, + HostRoot: 3, + HostHoistable: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet + HostText: 6, + IncompleteClassComponent: 17, + IncompleteFunctionComponent: -1, // Doesn't exist yet + IndeterminateComponent: 2, + LazyComponent: 16, + LegacyHiddenComponent: -1, + MemoComponent: 14, + Mode: 8, + OffscreenComponent: -1, // Experimental + Profiler: 12, + ScopeComponent: -1, // Experimental + SimpleMemoComponent: 15, + SuspenseComponent: 13, + SuspenseListComponent: 19, // Experimental + TracingMarkerComponent: -1, // Doesn't exist yet + YieldComponent: -1, // Removed + Throw: -1, // Doesn't exist yet + }; + } else if (gte(version, '16.4.3-alpha')) { + ReactTypeOfWork = { + CacheComponent: -1, // Doesn't exist yet + ClassComponent: 2, + ContextConsumer: 11, + ContextProvider: 12, + CoroutineComponent: -1, // Removed + CoroutineHandlerPhase: -1, // Removed + DehydratedSuspenseComponent: -1, // Doesn't exist yet + ForwardRef: 13, + Fragment: 9, + FunctionComponent: 0, + HostComponent: 7, + HostPortal: 6, + HostRoot: 5, + HostHoistable: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet + HostText: 8, + IncompleteClassComponent: -1, // Doesn't exist yet + IncompleteFunctionComponent: -1, // Doesn't exist yet + IndeterminateComponent: 4, + LazyComponent: -1, // Doesn't exist yet + LegacyHiddenComponent: -1, + MemoComponent: -1, // Doesn't exist yet + Mode: 10, + OffscreenComponent: -1, // Experimental + Profiler: 15, + ScopeComponent: -1, // Experimental + SimpleMemoComponent: -1, // Doesn't exist yet + SuspenseComponent: 16, + SuspenseListComponent: -1, // Doesn't exist yet + TracingMarkerComponent: -1, // Doesn't exist yet + YieldComponent: -1, // Removed + Throw: -1, // Doesn't exist yet + }; + } else { + ReactTypeOfWork = { + CacheComponent: -1, // Doesn't exist yet + ClassComponent: 2, + ContextConsumer: 12, + ContextProvider: 13, + CoroutineComponent: 7, + CoroutineHandlerPhase: 8, + DehydratedSuspenseComponent: -1, // Doesn't exist yet + ForwardRef: 14, + Fragment: 10, + FunctionComponent: 1, + HostComponent: 5, + HostPortal: 4, + HostRoot: 3, + HostHoistable: -1, // Doesn't exist yet + HostSingleton: -1, // Doesn't exist yet + HostText: 6, + IncompleteClassComponent: -1, // Doesn't exist yet + IncompleteFunctionComponent: -1, // Doesn't exist yet + IndeterminateComponent: 0, + LazyComponent: -1, // Doesn't exist yet + LegacyHiddenComponent: -1, + MemoComponent: -1, // Doesn't exist yet + Mode: 11, + OffscreenComponent: -1, // Experimental + Profiler: 15, + ScopeComponent: -1, // Experimental + SimpleMemoComponent: -1, // Doesn't exist yet + SuspenseComponent: 16, + SuspenseListComponent: -1, // Doesn't exist yet + TracingMarkerComponent: -1, // Doesn't exist yet + YieldComponent: 9, + Throw: -1, // Doesn't exist yet + }; + } + // ********************************************************** + // End of copied code. + // ********************************************************** + + return ReactTypeOfWork; +} diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 7ddbe535835ae..34842e2d69d46 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -152,6 +152,7 @@ import type { import type {Source} from 'react-devtools-shared/src/shared/types'; import {getSourceLocationByFiber} from './DevToolsFiberComponentStack'; import {formatOwnerStack} from '../shared/DevToolsOwnerStack'; +import getWorkTagMap from 'react-devtools-shared/src/backend/fiber/getWorkTagMap'; // Kinds const FIBER_INSTANCE = 0; @@ -347,195 +348,6 @@ export function getInternalReactConstants(version: string): { StrictModeBits = 0b10; } - let ReactTypeOfWork: WorkTagMap = ((null: any): WorkTagMap); - - // ********************************************************** - // The section below is copied from files in React repo. - // Keep it in sync, and add version guards if it changes. - // - // TODO Update the gt() check below to be gte() whichever the next version number is. - // Currently the version in Git is 17.0.2 (but that version has not been/may not end up being released). - if (gt(version, '17.0.1')) { - ReactTypeOfWork = { - CacheComponent: 24, // Experimental - ClassComponent: 1, - ContextConsumer: 9, - ContextProvider: 10, - CoroutineComponent: -1, // Removed - CoroutineHandlerPhase: -1, // Removed - DehydratedSuspenseComponent: 18, // Behind a flag - ForwardRef: 11, - Fragment: 7, - FunctionComponent: 0, - HostComponent: 5, - HostPortal: 4, - HostRoot: 3, - HostHoistable: 26, // In reality, 18.2+. But doesn't hurt to include it here - HostSingleton: 27, // Same as above - HostText: 6, - IncompleteClassComponent: 17, - IncompleteFunctionComponent: 28, - IndeterminateComponent: 2, // removed in 19.0.0 - LazyComponent: 16, - LegacyHiddenComponent: 23, - MemoComponent: 14, - Mode: 8, - OffscreenComponent: 22, // Experimental - Profiler: 12, - ScopeComponent: 21, // Experimental - SimpleMemoComponent: 15, - SuspenseComponent: 13, - SuspenseListComponent: 19, // Experimental - TracingMarkerComponent: 25, // Experimental - This is technically in 18 but we don't - // want to fork again so we're adding it here instead - YieldComponent: -1, // Removed - Throw: 29, - }; - } else if (gte(version, '17.0.0-alpha')) { - ReactTypeOfWork = { - CacheComponent: -1, // Doesn't exist yet - ClassComponent: 1, - ContextConsumer: 9, - ContextProvider: 10, - CoroutineComponent: -1, // Removed - CoroutineHandlerPhase: -1, // Removed - DehydratedSuspenseComponent: 18, // Behind a flag - ForwardRef: 11, - Fragment: 7, - FunctionComponent: 0, - HostComponent: 5, - HostPortal: 4, - HostRoot: 3, - HostHoistable: -1, // Doesn't exist yet - HostSingleton: -1, // Doesn't exist yet - HostText: 6, - IncompleteClassComponent: 17, - IncompleteFunctionComponent: -1, // Doesn't exist yet - IndeterminateComponent: 2, - LazyComponent: 16, - LegacyHiddenComponent: 24, - MemoComponent: 14, - Mode: 8, - OffscreenComponent: 23, // Experimental - Profiler: 12, - ScopeComponent: 21, // Experimental - SimpleMemoComponent: 15, - SuspenseComponent: 13, - SuspenseListComponent: 19, // Experimental - TracingMarkerComponent: -1, // Doesn't exist yet - YieldComponent: -1, // Removed - Throw: -1, // Doesn't exist yet - }; - } else if (gte(version, '16.6.0-beta.0')) { - ReactTypeOfWork = { - CacheComponent: -1, // Doesn't exist yet - ClassComponent: 1, - ContextConsumer: 9, - ContextProvider: 10, - CoroutineComponent: -1, // Removed - CoroutineHandlerPhase: -1, // Removed - DehydratedSuspenseComponent: 18, // Behind a flag - ForwardRef: 11, - Fragment: 7, - FunctionComponent: 0, - HostComponent: 5, - HostPortal: 4, - HostRoot: 3, - HostHoistable: -1, // Doesn't exist yet - HostSingleton: -1, // Doesn't exist yet - HostText: 6, - IncompleteClassComponent: 17, - IncompleteFunctionComponent: -1, // Doesn't exist yet - IndeterminateComponent: 2, - LazyComponent: 16, - LegacyHiddenComponent: -1, - MemoComponent: 14, - Mode: 8, - OffscreenComponent: -1, // Experimental - Profiler: 12, - ScopeComponent: -1, // Experimental - SimpleMemoComponent: 15, - SuspenseComponent: 13, - SuspenseListComponent: 19, // Experimental - TracingMarkerComponent: -1, // Doesn't exist yet - YieldComponent: -1, // Removed - Throw: -1, // Doesn't exist yet - }; - } else if (gte(version, '16.4.3-alpha')) { - ReactTypeOfWork = { - CacheComponent: -1, // Doesn't exist yet - ClassComponent: 2, - ContextConsumer: 11, - ContextProvider: 12, - CoroutineComponent: -1, // Removed - CoroutineHandlerPhase: -1, // Removed - DehydratedSuspenseComponent: -1, // Doesn't exist yet - ForwardRef: 13, - Fragment: 9, - FunctionComponent: 0, - HostComponent: 7, - HostPortal: 6, - HostRoot: 5, - HostHoistable: -1, // Doesn't exist yet - HostSingleton: -1, // Doesn't exist yet - HostText: 8, - IncompleteClassComponent: -1, // Doesn't exist yet - IncompleteFunctionComponent: -1, // Doesn't exist yet - IndeterminateComponent: 4, - LazyComponent: -1, // Doesn't exist yet - LegacyHiddenComponent: -1, - MemoComponent: -1, // Doesn't exist yet - Mode: 10, - OffscreenComponent: -1, // Experimental - Profiler: 15, - ScopeComponent: -1, // Experimental - SimpleMemoComponent: -1, // Doesn't exist yet - SuspenseComponent: 16, - SuspenseListComponent: -1, // Doesn't exist yet - TracingMarkerComponent: -1, // Doesn't exist yet - YieldComponent: -1, // Removed - Throw: -1, // Doesn't exist yet - }; - } else { - ReactTypeOfWork = { - CacheComponent: -1, // Doesn't exist yet - ClassComponent: 2, - ContextConsumer: 12, - ContextProvider: 13, - CoroutineComponent: 7, - CoroutineHandlerPhase: 8, - DehydratedSuspenseComponent: -1, // Doesn't exist yet - ForwardRef: 14, - Fragment: 10, - FunctionComponent: 1, - HostComponent: 5, - HostPortal: 4, - HostRoot: 3, - HostHoistable: -1, // Doesn't exist yet - HostSingleton: -1, // Doesn't exist yet - HostText: 6, - IncompleteClassComponent: -1, // Doesn't exist yet - IncompleteFunctionComponent: -1, // Doesn't exist yet - IndeterminateComponent: 0, - LazyComponent: -1, // Doesn't exist yet - LegacyHiddenComponent: -1, - MemoComponent: -1, // Doesn't exist yet - Mode: 11, - OffscreenComponent: -1, // Experimental - Profiler: 15, - ScopeComponent: -1, // Experimental - SimpleMemoComponent: -1, // Doesn't exist yet - SuspenseComponent: 16, - SuspenseListComponent: -1, // Doesn't exist yet - TracingMarkerComponent: -1, // Doesn't exist yet - YieldComponent: 9, - Throw: -1, // Doesn't exist yet - }; - } - // ********************************************************** - // End of copied code. - // ********************************************************** - function getTypeSymbol(type: any): symbol | number { const symbolOrNumber = typeof type === 'object' && type !== null ? type.$$typeof : type; @@ -546,6 +358,7 @@ export function getInternalReactConstants(version: string): { : symbolOrNumber; } + const ReactTypeOfWork = getWorkTagMap(version); const { CacheComponent, ClassComponent,