From cc3ce99f93a22a3e82a20f455bcfbae15ff3d8e6 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Fri, 5 Apr 2024 13:40:26 -0700 Subject: [PATCH] Reduces the size of ReactDOMSharedIntenrals object representation to save on bundle size --- .../src/client/ReactDOMUpdatePriority.js | 6 +- .../src/client/ReactFiberConfigDOM.js | 7 +- .../ReactDOMFlightServerHostDispatcher.js | 7 +- .../src/server/ReactFizzConfigDOM.js | 7 +- .../src/shared/ReactFlightClientConfigDOM.js | 22 +-- packages/react-dom/client.js | 8 +- packages/react-dom/npm/client.js | 8 +- .../react-dom/src/ReactDOMSharedInternals.js | 20 ++- packages/react-dom/src/client/ReactDOM.js | 6 +- .../react-dom/src/shared/ReactDOMFloat.js | 130 ++++++++++-------- .../src/test-utils/ReactTestUtils.js | 2 +- 11 files changed, 115 insertions(+), 108 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactDOMUpdatePriority.js b/packages/react-dom-bindings/src/client/ReactDOMUpdatePriority.js index a0c4273bec604..4f422a06732e3 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMUpdatePriority.js +++ b/packages/react-dom-bindings/src/client/ReactDOMUpdatePriority.js @@ -25,15 +25,15 @@ export function setCurrentUpdatePriority( // is much longer. I hope this is consistent enough to rely on across builds IntentionallyUnusedArgument?: empty, ): void { - ReactDOMSharedInternals.up = newPriority; + ReactDOMSharedInternals.p /* currentUpdatePriority */ = newPriority; } export function getCurrentUpdatePriority(): EventPriority { - return ReactDOMSharedInternals.up; + return ReactDOMSharedInternals.p; /* currentUpdatePriority */ } export function resolveUpdatePriority(): EventPriority { - const updatePriority = ReactDOMSharedInternals.up; + const updatePriority = ReactDOMSharedInternals.p; /* currentUpdatePriority */ if (updatePriority !== NoEventPriority) { return updatePriority; } diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 504172309f9c5..88a31d2b94655 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -102,8 +102,6 @@ import {validateLinkPropsForStyleResource} from '../shared/ReactDOMResourceValid import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttributeValueInsideDoubleQuotes'; import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals'; -const ReactDOMCurrentDispatcher = - ReactDOMSharedInternals.ReactDOMCurrentDispatcher; export type Type = string; export type Props = { @@ -1922,8 +1920,9 @@ function getDocumentFromRoot(root: HoistableRoot): Document { return root.ownerDocument || root; } -const previousDispatcher = ReactDOMCurrentDispatcher.current; -ReactDOMCurrentDispatcher.current = { +const previousDispatcher = + ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */ +ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ = { prefetchDNS, preconnect, preload, diff --git a/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js b/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js index 64efccddedefa..6d6f567a4582b 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js +++ b/packages/react-dom-bindings/src/server/ReactDOMFlightServerHostDispatcher.js @@ -23,11 +23,10 @@ import { } from 'react-server/src/ReactFlightServer'; import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals'; -const ReactDOMCurrentDispatcher = - ReactDOMSharedInternals.ReactDOMCurrentDispatcher; -const previousDispatcher = ReactDOMCurrentDispatcher.current; -ReactDOMCurrentDispatcher.current = { +const previousDispatcher = + ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */ +ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ = { prefetchDNS, preconnect, preload, diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index 475e934a60491..8abb0f109040b 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -83,11 +83,10 @@ import {getValueDescriptorExpectingObjectForWarning} from '../shared/ReactDOMRes import {NotPending} from '../shared/ReactDOMFormActions'; import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals'; -const ReactDOMCurrentDispatcher = - ReactDOMSharedInternals.ReactDOMCurrentDispatcher; -const previousDispatcher = ReactDOMCurrentDispatcher.current; -ReactDOMCurrentDispatcher.current = { +const previousDispatcher = + ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */ +ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ = { prefetchDNS, preconnect, preload, diff --git a/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js b/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js index 3cc648270d0d4..17c7007e10632 100644 --- a/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js +++ b/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js @@ -13,8 +13,6 @@ import type {HintCode, HintModel} from '../server/ReactFlightServerConfigDOM'; import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals'; -const ReactDOMCurrentDispatcher = - ReactDOMSharedInternals.ReactDOMCurrentDispatcher; import {getCrossOriginString} from './crossOriginStrings'; @@ -22,7 +20,7 @@ export function dispatchHint( code: Code, model: HintModel, ): void { - const dispatcher = ReactDOMCurrentDispatcher.current; + const dispatcher = ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */ switch (code) { case 'D': { const refined = refineModel(code, model); @@ -117,10 +115,11 @@ export function preinitModuleForSSR( nonce: ?string, crossOrigin: ?string, ) { - ReactDOMCurrentDispatcher.current.preinitModuleScript(href, { - crossOrigin: getCrossOriginString(crossOrigin), - nonce, - }); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preinitModuleScript(href, { + crossOrigin: getCrossOriginString(crossOrigin), + nonce, + }); } export function preinitScriptForSSR( @@ -128,8 +127,9 @@ export function preinitScriptForSSR( nonce: ?string, crossOrigin: ?string, ) { - ReactDOMCurrentDispatcher.current.preinitScript(href, { - crossOrigin: getCrossOriginString(crossOrigin), - nonce, - }); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preinitScript(href, { + crossOrigin: getCrossOriginString(crossOrigin), + nonce, + }); } diff --git a/packages/react-dom/client.js b/packages/react-dom/client.js index f44c3668f7b17..50dcfb002774c 100644 --- a/packages/react-dom/client.js +++ b/packages/react-dom/client.js @@ -27,13 +27,13 @@ export function createRoot( options?: CreateRootOptions, ): RootType { if (__DEV__) { - Internals.usingClientEntryPoint = true; + Internals.c /* usingClientEntryPoint */ = true; } try { return createRootImpl(container, options); } finally { if (__DEV__) { - Internals.usingClientEntryPoint = false; + Internals.c /* usingClientEntryPoint */ = false; } } } @@ -44,13 +44,13 @@ export function hydrateRoot( options?: HydrateRootOptions, ): RootType { if (__DEV__) { - Internals.usingClientEntryPoint = true; + Internals.c /* usingClientEntryPoint */ = true; } try { return hydrateRootImpl(container, children, options); } finally { if (__DEV__) { - Internals.usingClientEntryPoint = false; + Internals.c /* usingClientEntryPoint */ = false; } } } diff --git a/packages/react-dom/npm/client.js b/packages/react-dom/npm/client.js index bef4756404cfd..61bcc939c2183 100644 --- a/packages/react-dom/npm/client.js +++ b/packages/react-dom/npm/client.js @@ -7,19 +7,19 @@ if (process.env.NODE_ENV === 'production') { } else { var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; exports.createRoot = function (c, o) { - i.usingClientEntryPoint = true; + i.c /* usingClientEntryPoint */ = true; try { return m.createRoot(c, o); } finally { - i.usingClientEntryPoint = false; + i.c /* usingClientEntryPoint */ = false; } }; exports.hydrateRoot = function (c, h, o) { - i.usingClientEntryPoint = true; + i.c /* usingClientEntryPoint */ = true; try { return m.hydrateRoot(c, h, o); } finally { - i.usingClientEntryPoint = false; + i.c /* usingClientEntryPoint */ = false; } }; } diff --git a/packages/react-dom/src/ReactDOMSharedInternals.js b/packages/react-dom/src/ReactDOMSharedInternals.js index f2dd23c26660f..527e7394eefe4 100644 --- a/packages/react-dom/src/ReactDOMSharedInternals.js +++ b/packages/react-dom/src/ReactDOMSharedInternals.js @@ -13,17 +13,15 @@ import type {HostDispatcher} from './shared/ReactDOMTypes'; import {NoEventPriority} from 'react-reconciler/src/ReactEventPriorities'; type InternalsType = { - usingClientEntryPoint: boolean, - Events: [any, any, any, any, any, any], - ReactDOMCurrentDispatcher: { - current: HostDispatcher, - }, + c /* usingClientEntryPoint */: boolean, + E /* Events */: [any, any, any, any, any, any], + d /* ReactDOMCurrentDispatcher */: HostDispatcher, findDOMNode: | null | (( componentOrElement: React$Component, ) => null | Element | Text), - up /* currentUpdatePriority */: EventPriority, + p /* currentUpdatePriority */: EventPriority, }; function noop() {} @@ -39,13 +37,11 @@ const DefaultDispatcher: HostDispatcher = { }; const Internals: InternalsType = { - usingClientEntryPoint: false, - Events: (null: any), - ReactDOMCurrentDispatcher: { - current: DefaultDispatcher, - }, + c /* usingClientEntryPoint */: false, + E /* Events */: (null: any), + d /* ReactDOMCurrentDispatcher */: DefaultDispatcher, findDOMNode: null, - up /* currentUpdatePriority */: NoEventPriority, + p /* currentUpdatePriority */: NoEventPriority, }; export default Internals; diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 04b59d618aeb1..2e553b26f68a6 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -95,7 +95,7 @@ function createRoot( options?: CreateRootOptions, ): RootType { if (__DEV__) { - if (!Internals.usingClientEntryPoint && !__UMD__) { + if (!Internals.c /* usingClientEntryPoint */ && !__UMD__) { console.error( 'You are importing createRoot from "react-dom" which is not supported. ' + 'You should instead import it from "react-dom/client".', @@ -111,7 +111,7 @@ function hydrateRoot( options?: HydrateRootOptions, ): RootType { if (__DEV__) { - if (!Internals.usingClientEntryPoint && !__UMD__) { + if (!Internals.c /* usingClientEntryPoint */ && !__UMD__) { console.error( 'You are importing hydrateRoot from "react-dom" which is not supported. ' + 'You should instead import it from "react-dom/client".', @@ -173,7 +173,7 @@ export { // Keep in sync with ReactTestUtils.js. // This is an array for better minification. -Internals.Events = [ +Internals.E /* Events */ = [ getInstanceFromNode, getNodeFromInstance, getFiberCurrentPropsFromNode, diff --git a/packages/react-dom/src/shared/ReactDOMFloat.js b/packages/react-dom/src/shared/ReactDOMFloat.js index 4aa364af318c7..4277c91603c43 100644 --- a/packages/react-dom/src/shared/ReactDOMFloat.js +++ b/packages/react-dom/src/shared/ReactDOMFloat.js @@ -15,8 +15,6 @@ import type { } from './ReactDOMTypes'; import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals'; -const ReactDOMCurrentDispatcher = - ReactDOMSharedInternals.ReactDOMCurrentDispatcher; import { getCrossOriginString, @@ -49,7 +47,8 @@ export function prefetchDNS(href: string) { } } if (typeof href === 'string') { - ReactDOMCurrentDispatcher.current.prefetchDNS(href); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .prefetchDNS(href); } // We don't error because preconnect needs to be resilient to being called in a variety of scopes // and the runtime may not be capable of responding. The function is optimistic and not critical @@ -79,7 +78,8 @@ export function preconnect(href: string, options?: ?PreconnectOptions) { const crossOrigin = options ? getCrossOriginString(options.crossOrigin) : null; - ReactDOMCurrentDispatcher.current.preconnect(href, crossOrigin); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preconnect(href, crossOrigin); } // We don't error because preconnect needs to be resilient to being called in a variety of scopes // and the runtime may not be capable of responding. The function is optimistic and not critical @@ -119,28 +119,31 @@ export function preload(href: string, options: PreloadOptions) { ) { const as = options.as; const crossOrigin = getCrossOriginStringAs(as, options.crossOrigin); - ReactDOMCurrentDispatcher.current.preload(href, as, { - crossOrigin, - integrity: - typeof options.integrity === 'string' ? options.integrity : undefined, - nonce: typeof options.nonce === 'string' ? options.nonce : undefined, - type: typeof options.type === 'string' ? options.type : undefined, - fetchPriority: - typeof options.fetchPriority === 'string' - ? options.fetchPriority - : undefined, - referrerPolicy: - typeof options.referrerPolicy === 'string' - ? options.referrerPolicy - : undefined, - imageSrcSet: - typeof options.imageSrcSet === 'string' - ? options.imageSrcSet - : undefined, - imageSizes: - typeof options.imageSizes === 'string' ? options.imageSizes : undefined, - media: typeof options.media === 'string' ? options.media : undefined, - }); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preload(href, as, { + crossOrigin, + integrity: + typeof options.integrity === 'string' ? options.integrity : undefined, + nonce: typeof options.nonce === 'string' ? options.nonce : undefined, + type: typeof options.type === 'string' ? options.type : undefined, + fetchPriority: + typeof options.fetchPriority === 'string' + ? options.fetchPriority + : undefined, + referrerPolicy: + typeof options.referrerPolicy === 'string' + ? options.referrerPolicy + : undefined, + imageSrcSet: + typeof options.imageSrcSet === 'string' + ? options.imageSrcSet + : undefined, + imageSizes: + typeof options.imageSizes === 'string' + ? options.imageSizes + : undefined, + media: typeof options.media === 'string' ? options.media : undefined, + }); } // We don't error because preload needs to be resilient to being called in a variety of scopes // and the runtime may not be capable of responding. The function is optimistic and not critical @@ -177,17 +180,21 @@ export function preloadModule(href: string, options?: ?PreloadModuleOptions) { options.as, options.crossOrigin, ); - ReactDOMCurrentDispatcher.current.preloadModule(href, { - as: - typeof options.as === 'string' && options.as !== 'script' - ? options.as - : undefined, - crossOrigin, - integrity: - typeof options.integrity === 'string' ? options.integrity : undefined, - }); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preloadModule(href, { + as: + typeof options.as === 'string' && options.as !== 'script' + ? options.as + : undefined, + crossOrigin, + integrity: + typeof options.integrity === 'string' + ? options.integrity + : undefined, + }); } else { - ReactDOMCurrentDispatcher.current.preloadModule(href); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preloadModule(href); } } // We don't error because preload needs to be resilient to being called in a variety of scopes @@ -224,22 +231,26 @@ export function preinit(href: string, options: PreinitOptions) { ? options.fetchPriority : undefined; if (as === 'style') { - ReactDOMCurrentDispatcher.current.preinitStyle( - href, - typeof options.precedence === 'string' ? options.precedence : undefined, - { + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preinitStyle( + href, + typeof options.precedence === 'string' + ? options.precedence + : undefined, + { + crossOrigin, + integrity, + fetchPriority, + }, + ); + } else if (as === 'script') { + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preinitScript(href, { crossOrigin, integrity, fetchPriority, - }, - ); - } else if (as === 'script') { - ReactDOMCurrentDispatcher.current.preinitScript(href, { - crossOrigin, - integrity, - fetchPriority, - nonce: typeof options.nonce === 'string' ? options.nonce : undefined, - }); + nonce: typeof options.nonce === 'string' ? options.nonce : undefined, + }); } } // We don't error because preinit needs to be resilient to being called in a variety of scopes @@ -299,17 +310,20 @@ export function preinitModule(href: string, options?: ?PreinitModuleOptions) { options.as, options.crossOrigin, ); - ReactDOMCurrentDispatcher.current.preinitModuleScript(href, { - crossOrigin, - integrity: - typeof options.integrity === 'string' - ? options.integrity - : undefined, - nonce: typeof options.nonce === 'string' ? options.nonce : undefined, - }); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preinitModuleScript(href, { + crossOrigin, + integrity: + typeof options.integrity === 'string' + ? options.integrity + : undefined, + nonce: + typeof options.nonce === 'string' ? options.nonce : undefined, + }); } } else if (options == null) { - ReactDOMCurrentDispatcher.current.preinitModuleScript(href); + ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ + .preinitModuleScript(href); } } // We don't error because preinit needs to be resilient to being called in a variety of scopes diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js index 1b4125c819e61..f93e057d83e23 100644 --- a/packages/react-dom/src/test-utils/ReactTestUtils.js +++ b/packages/react-dom/src/test-utils/ReactTestUtils.js @@ -28,7 +28,7 @@ import isArray from 'shared/isArray'; // Keep in sync with ReactDOM.js: const SecretInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; -const EventInternals = SecretInternals.Events; +const EventInternals = SecretInternals.E; /* Events */ const getInstanceFromNode = EventInternals[0]; const getNodeFromInstance = EventInternals[1]; const getFiberCurrentPropsFromNode = EventInternals[2];