[DOM] Shrink ReactDOMSharedInternals source representation (#28771)

Stacked on #28751 ReactDOMSharedInternals uses properties of considerable length to model mutuable state. These properties are not mangled during minification and contribute a not insigificant amount to the uncompressed bundle size and to a lesser degree compressed bundle size. This change rewrites the DOMInternals in a way that shortens property names so we can have smaller builds. It also treats the entire object as a mutable container rather than having different mutable sub objects. The same treatment should be given to ReactSharedInternals
facebook · Apr 11, 2024 · e14ad04 · e14ad04
1 parent ac06c69
commit e14ad04
Show file tree

Hide file tree

Showing 15 changed files with 357 additions and 136 deletions.
diff --git 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
@@ -104,8 +104,6 @@ import escapeSelectorAttributeValueInsideDoubleQuotes from './escapeSelectorAttr
 import {flushSyncWork as flushSyncWorkOnAllRoots} from 'react-reconciler/src/ReactFiberWorkLoop';
 
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
-const ReactDOMCurrentDispatcher =
-  ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
 
 export type Type = string;
 export type Props = {
@@ -1924,8 +1922,9 @@ function getDocumentFromRoot(root: HoistableRoot): Document {
   return root.ownerDocument || root;
 }
 
-const previousDispatcher = ReactDOMCurrentDispatcher.current;
-ReactDOMCurrentDispatcher.current = {
+const previousDispatcher =
+  ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */
+ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */ = {
   flushSyncWork: disableLegacyMode
     ? flushSyncWork
     : previousDispatcher.flushSyncWork,

diff --git 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 */ = {
   flushSyncWork: previousDispatcher.flushSyncWork,
   prefetchDNS,
   preconnect,

diff --git 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 */ = {
   flushSyncWork: previousDispatcher.flushSyncWork,
   prefetchDNS,
   preconnect,

diff --git a/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js b/packages/react-dom-bindings/src/shared/ReactFlightClientConfigDOM.js
@@ -13,16 +13,14 @@
 import type {HintCode, HintModel} from '../server/ReactFlightServerConfigDOM';
 
 import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals';
-const ReactDOMCurrentDispatcher =
-  ReactDOMSharedInternals.ReactDOMCurrentDispatcher;
 
 import {getCrossOriginString} from './crossOriginStrings';
 
 export function dispatchHint<Code: HintCode>(
   code: Code,
   model: HintModel<Code>,
 ): void {
-  const dispatcher = ReactDOMCurrentDispatcher.current;
+  const dispatcher = ReactDOMSharedInternals.d; /* ReactDOMCurrentDispatcher */
   switch (code) {
     case 'D': {
       const refined = refineModel(code, model);
@@ -117,25 +115,21 @@ export function preinitModuleForSSR(
   nonce: ?string,
   crossOrigin: ?string,
 ) {
-  const dispatcher = ReactDOMCurrentDispatcher.current;
-  if (dispatcher) {
-    dispatcher.preinitModuleScript(href, {
+  ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+    .preinitModuleScript(href, {
       crossOrigin: getCrossOriginString(crossOrigin),
       nonce,
     });
-  }
 }
 
 export function preinitScriptForSSR(
   href: string,
   nonce: ?string,
   crossOrigin: ?string,
 ) {
-  const dispatcher = ReactDOMCurrentDispatcher.current;
-  if (dispatcher) {
-    dispatcher.preinitScript(href, {
+  ReactDOMSharedInternals.d /* ReactDOMCurrentDispatcher */
+    .preinitScript(href, {
       crossOrigin: getCrossOriginString(crossOrigin),
       nonce,
     });
-  }
 }
diff --git 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: any).usingClientEntryPoint = true;
   }
   try {
     return createRootImpl(container, options);
   } finally {
     if (__DEV__) {
-      Internals.usingClientEntryPoint = false;
+      (Internals: any).usingClientEntryPoint = false;
     }
   }
 }
@@ -44,13 +44,13 @@ export function hydrateRoot(
   options?: HydrateRootOptions,
 ): RootType {
   if (__DEV__) {
-    Internals.usingClientEntryPoint = true;
+    (Internals: any).usingClientEntryPoint = true;
   }
   try {
     return hydrateRootImpl(container, children, options);
   } finally {
     if (__DEV__) {
-      Internals.usingClientEntryPoint = false;
+      (Internals: any).usingClientEntryPoint = false;
     }
   }
 }
diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
@@ -9,7 +9,7 @@
 
 import {isEnabled} from 'react-dom-bindings/src/events/ReactDOMEventListener';
 
-import Internals from './src/ReactDOMSharedInternals';
+import Internals from './src/ReactDOMSharedInternalsFB';
 
 // For classic WWW builds, include a few internals that are already in use.
 Object.assign((Internals: any), {
@@ -32,7 +32,7 @@ export {
   preinit,
   preinitModule,
   version,
-} from './src/client/ReactDOM';
+} from './src/client/ReactDOMFB';
 
 export {
   createRoot,

diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternals';
+export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternalsFB';
 export {
   createPortal,
   flushSync,
@@ -23,6 +23,6 @@ export {
   preinit,
   preinitModule,
   version,
-} from './src/client/ReactDOM';
+} from './src/client/ReactDOMFB';
 
 export {createRoot, hydrateRoot} from './src/client/ReactDOMRootFB';
diff --git a/packages/react-dom/src/ReactDOMSharedInternals.js b/packages/react-dom/src/ReactDOMSharedInternals.js
@@ -12,18 +12,19 @@ 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,
-  },
+type ReactDOMInternals = {
+  d /* ReactDOMCurrentDispatcher */: HostDispatcher,
+  p /* currentUpdatePriority */: EventPriority,
   findDOMNode:
     | null
     | ((
         componentOrElement: React$Component<any, any>,
       ) => null | Element | Text),
-  up /* currentUpdatePriority */: EventPriority,
+  usingClientEntryPoint: boolean,
+};
+
+export type ReactDOMInternalsDev = ReactDOMInternals & {
+  usingClientEntryPoint: boolean,
 };
 
 function noop() {}
@@ -39,14 +40,15 @@ const DefaultDispatcher: HostDispatcher = {
   preinitModuleScript: noop,
 };
 
-const Internals: InternalsType = {
-  usingClientEntryPoint: false,
-  Events: (null: any),
-  ReactDOMCurrentDispatcher: {
-    current: DefaultDispatcher,
-  },
+const Internals: ReactDOMInternals = {
+  d /* ReactDOMCurrentDispatcher */: DefaultDispatcher,
+  p /* currentUpdatePriority */: NoEventPriority,
   findDOMNode: null,
-  up /* currentUpdatePriority */: NoEventPriority,
+  usingClientEntryPoint: false,
 };
 
+// if (__DEV__) {
+//   (Internals: any).usingClientEntryPoint = false;
+// }
+
 export default Internals;
diff --git a/packages/react-dom/src/ReactDOMSharedInternalsFB.js b/packages/react-dom/src/ReactDOMSharedInternalsFB.js
@@ -0,0 +1,46 @@
+/**
+ * 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
+ */
+
+import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
+import type {HostDispatcher} from './shared/ReactDOMTypes';
+
+import {NoEventPriority} from 'react-reconciler/src/ReactEventPriorities';
+
+type ReactDOMInternals = {
+  Events: [any, any, any, any, any, any],
+  d /* ReactDOMCurrentDispatcher */: HostDispatcher,
+  p /* currentUpdatePriority */: EventPriority,
+  findDOMNode:
+    | null
+    | ((
+        componentOrElement: React$Component<any, any>,
+      ) => null | Element | Text),
+};
+
+function noop() {}
+
+const DefaultDispatcher: HostDispatcher = {
+  flushSyncWork: noop,
+  prefetchDNS: noop,
+  preconnect: noop,
+  preload: noop,
+  preloadModule: noop,
+  preinitScript: noop,
+  preinitStyle: noop,
+  preinitModuleScript: noop,
+};
+
+const Internals: ReactDOMInternals = {
+  Events: (null: any),
+  d /* ReactDOMCurrentDispatcher */: DefaultDispatcher,
+  p /* currentUpdatePriority */: NoEventPriority,
+  findDOMNode: null,
+};
+
+export default Internals;
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
@@ -34,16 +34,7 @@ import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
 
-import {
-  getClosestInstanceFromNode,
-  getInstanceFromNode,
-  getNodeFromInstance,
-  getFiberCurrentPropsFromNode,
-} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
-import {
-  enqueueStateRestore,
-  restoreStateIfNeeded,
-} from 'react-dom-bindings/src/events/ReactDOMControlledComponent';
+import {getClosestInstanceFromNode} from 'react-dom-bindings/src/client/ReactDOMComponentTree';
 import Internals from '../ReactDOMSharedInternals';
 
 export {
@@ -97,7 +88,7 @@ function createRoot(
   options?: CreateRootOptions,
 ): RootType {
   if (__DEV__) {
-    if (!Internals.usingClientEntryPoint && !__UMD__) {
+    if (!(Internals: any).usingClientEntryPoint && !__UMD__) {
       console.error(
         'You are importing createRoot from "react-dom" which is not supported. ' +
           'You should instead import it from "react-dom/client".',
@@ -113,7 +104,7 @@ function hydrateRoot(
   options?: HydrateRootOptions,
 ): RootType {
   if (__DEV__) {
-    if (!Internals.usingClientEntryPoint && !__UMD__) {
+    if (!(Internals: any).usingClientEntryPoint && !__UMD__) {
       console.error(
         'You are importing hydrateRoot from "react-dom" which is not supported. ' +
           'You should instead import it from "react-dom/client".',
@@ -177,17 +168,6 @@ export {
   runWithPriority as unstable_runWithPriority,
 };
 
-// Keep in sync with ReactTestUtils.js.
-// This is an array for better minification.
-Internals.Events = [
-  getInstanceFromNode,
-  getNodeFromInstance,
-  getFiberCurrentPropsFromNode,
-  enqueueStateRestore,
-  restoreStateIfNeeded,
-  unstable_batchedUpdates,
-];
-
 const foundDevTools = injectIntoDevTools({
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: __DEV__ ? 1 : 0,