From d310d654a7c7aab6c8213da84ef36dfba82711b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Tue, 14 Mar 2023 21:00:22 -0400 Subject: [PATCH] Avoid meta programming to initialize functions in module scope (#26388) I'm trying to get rid of all meta programming in the module scope so that closure can do a better job figuring out cyclic dependencies and ability to reorder. This is converting a lot of the patterns that assign functions conditionally to using function declarations instead. ``` let fn; if (__DEV__) { fn = function() { ... }; } ``` -> ``` function fn() { if (__DEV__) { ... } } ``` --- .../domEnvironment.js | 2 +- .../src/client/ReactDOMComponent.js | 66 +- .../createMicrosoftUnsafeLocalFunction.js | 25 - .../src/client/setInnerHTML.js | 37 +- .../src/client/setTextContent.js | 4 +- .../src/client/validateDOMNesting.js | 716 +++++++++--------- .../src/shared/ReactDOMUnknownPropertyHook.js | 26 +- .../src/shared/warnValidStyle.js | 74 +- .../src/test-utils/ReactTestUtils.js | 4 +- .../src/ReactNativeEventEmitter.js | 8 +- .../src/ReactNativeFiberInspector.js | 194 +++-- .../Libraries/ReactPrivate/deepDiffer.js | 4 +- .../deepFreezeAndThrowOnMutationInDev.js | 2 +- .../Libraries/ReactPrivate/flattenStyle.js | 2 +- .../src/legacy-events/EventBatching.js | 8 +- .../src/legacy-events/EventPluginUtils.js | 7 +- .../src/legacy-events/ResponderEventPlugin.js | 4 +- packages/react-reconciler/src/ReactFiber.js | 4 +- .../src/ReactFiberClassComponent.js | 56 +- .../src/ReactFiberCommitWork.js | 7 +- .../src/ReactFizzClassComponent.js | 18 +- packages/react/src/ReactElement.js | 4 +- packages/react/src/jsx/ReactJSXElement.js | 4 +- .../forks/invokeGuardedCallbackImpl.www.js | 4 +- 24 files changed, 628 insertions(+), 652 deletions(-) delete mode 100644 packages/react-dom-bindings/src/client/createMicrosoftUnsafeLocalFunction.js diff --git a/packages/dom-event-testing-library/domEnvironment.js b/packages/dom-event-testing-library/domEnvironment.js index 3ec9e016bff90..185b0b5ace349 100644 --- a/packages/dom-event-testing-library/domEnvironment.js +++ b/packages/dom-event-testing-library/domEnvironment.js @@ -13,7 +13,7 @@ * Change environment support for PointerEvent. */ -const emptyFunction = function () {}; +function emptyFunction() {} export function hasPointerEvent() { return global != null && global.PointerEvent != null; diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 8cb2e95accb9f..037d787197c85 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js @@ -94,15 +94,8 @@ const HTML = '__html'; let warnedUnknownTags: { [key: string]: boolean, }; - -let validatePropertiesInDevelopment; -let warnForPropDifference; -let warnForExtraAttributes; -let warnForInvalidEventListener; let canDiffStyleForHydrationWarning; -let normalizeHTML; - if (__DEV__) { warnedUnknownTags = { // There are working polyfills for . Let people use it. @@ -115,15 +108,6 @@ if (__DEV__) { webview: true, }; - validatePropertiesInDevelopment = function (type: string, props: any) { - validateARIAProperties(type, props); - validateInputProperties(type, props); - validateUnknownProperties(type, props, { - registrationNameDependencies, - possibleRegistrationNames, - }); - }; - // IE 11 parses & normalizes the style attribute as opposed to other // browsers. It adds spaces and sorts the properties in some // non-alphabetical order. Handling that would require sorting CSS @@ -133,12 +117,25 @@ if (__DEV__) { // in that browser completely in favor of doing all that work. // See https://github.com/facebook/react/issues/11807 canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode; +} - warnForPropDifference = function ( - propName: string, - serverValue: mixed, - clientValue: mixed, - ) { +function validatePropertiesInDevelopment(type: string, props: any) { + if (__DEV__) { + validateARIAProperties(type, props); + validateInputProperties(type, props); + validateUnknownProperties(type, props, { + registrationNameDependencies, + possibleRegistrationNames, + }); + } +} + +function warnForPropDifference( + propName: string, + serverValue: mixed, + clientValue: mixed, +) { + if (__DEV__) { if (didWarnInvalidHydration) { return; } @@ -156,9 +153,11 @@ if (__DEV__) { JSON.stringify(normalizedServerValue), JSON.stringify(normalizedClientValue), ); - }; + } +} - warnForExtraAttributes = function (attributeNames: Set) { +function warnForExtraAttributes(attributeNames: Set) { + if (__DEV__) { if (didWarnInvalidHydration) { return; } @@ -168,12 +167,11 @@ if (__DEV__) { names.push(name); }); console.error('Extra attributes from the server: %s', names); - }; + } +} - warnForInvalidEventListener = function ( - registrationName: string, - listener: any, - ) { +function warnForInvalidEventListener(registrationName: string, listener: any) { + if (__DEV__) { if (listener === false) { console.error( 'Expected `%s` listener to be a function, instead got `false`.\n\n' + @@ -190,11 +188,13 @@ if (__DEV__) { typeof listener, ); } - }; + } +} - // Parse the HTML and read it back to normalize the HTML string so that it - // can be used for comparison. - normalizeHTML = function (parent: Element, html: string) { +// Parse the HTML and read it back to normalize the HTML string so that it +// can be used for comparison. +function normalizeHTML(parent: Element, html: string) { + if (__DEV__) { // We could have created a separate document here to avoid // re-initializing custom elements if they exist. But this breaks // how