From cdd23a9884e9543cb9328350bcce4eb45f13295b Mon Sep 17 00:00:00 2001 From: yidafu Date: Sat, 8 Aug 2020 23:06:39 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=BF=87=20flow2typescript=20?= =?UTF-8?q?=E6=9E=84=E5=BB=BA=E7=9A=84=20ts=20=E7=89=88=E6=BA=90=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit success compile: /Users/yidafu/github/react/packages/scheduler/src/forks/SchedulerFeatureFlags.www.ts success compile: /Users/yidafu/github/react/packages/scheduler/src/TracingSubscriptions.ts Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/scheduler/src/Tracing.js: line 12, column 26). See https://github.com/Microsoft/TypeScript/issues/12936 success compile: /Users/yidafu/github/react/packages/scheduler/src/Tracing.ts success compile: /Users/yidafu/github/react/packages/scheduler/src/SchedulerFeatureFlags.ts success compile: /Users/yidafu/github/react/packages/react-is/src/ReactIs.ts success compile: /Users/yidafu/github/react/packages/scheduler/src/Scheduler.ts success compile: /Users/yidafu/github/react/packages/react/src/forks/ReactCurrentDispatcher.www.ts success compile: /Users/yidafu/github/react/packages/react/src/forwardRef.ts success compile: /Users/yidafu/github/react/packages/react/src/forks/ReactCurrentOwner.www.ts success compile: /Users/yidafu/github/react/packages/react/src/memo.ts success compile: /Users/yidafu/github/react/packages/react/src/React.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactContext.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactCreateRef.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactBaseClasses.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactChildren.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactCurrentDispatcher.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactCurrentOwner.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactDebugCurrentFrame.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactElement.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactElementValidator.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactHooks.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactLazy.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactNoopUpdateQueue.ts success compile: /Users/yidafu/github/react/packages/react/src/ReactSharedInternals.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/DOMPropertyOperations.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/getActiveElement.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/inputValueTracking.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/getNodeForCharacterOffset.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMComponentTree.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMClientInjection.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMFB.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMInput.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMOption.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMSelect.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMSelection.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMTextarea.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/setInnerHTML.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactInputSelection.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/setTextContent.ts Warning: Opaque types can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/client/ToStringValue.js: line 10, column 7). See https://github.com/Microsoft/TypeScript/issues/202 success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ToStringValue.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/validateDOMNesting.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/BeforeInputEventPlugin.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/ChangeEventPlugin.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/DOMEventPluginOrder.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/DOMTopLevelEventTypes.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/EnterLeaveEventPlugin.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/EventListener.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/forks/EventListener-www.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/FallbackCompositionState.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/getEventCharCode.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/getEventKey.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/getEventModifierState.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/getEventTarget.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/getVendorPrefixedEventName.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/isEventSupported.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/ReactBrowserEventEmitter.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/ReactDOMEventListener.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SelectEventPlugin.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SimpleEventPlugin.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticClipboardEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticCompositionEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticAnimationEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticDragEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticFocusEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticInputEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticKeyboardEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticMouseEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticPointerEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticTouchEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticTransitionEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticWheelEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/events/SyntheticUIEvent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/fire/ReactFireHostConfig.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/DOMMarkupOperations.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/escapeTextForBrowser.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/quoteAttributeValueForBrowser.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactDOMFizzServerBrowser.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactDOMFizzServerFormatConfig.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactDOMFizzServerNode.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactDOMNodeStreamRenderer.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactDOMServerBrowser.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactDOMServerNode.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactDOMStringRenderer.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactPartialRendererContext.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactPartialRendererHooks.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactThreadIDAllocator.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/assertValidProps.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/checkReact.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/createMicrosoftUnsafeLocalFunction.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/CSSProperty.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/CSSPropertyOperations.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/CSSShorthandProperty.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/dangerousStyleValue.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/DOMNamespaces.ts The following comments are not represented in leadingComments, trailingComments or innerComments of any node in the AST: [ { type: 'CommentLine', value: ' attributeNamespace', start: 6393, end: 6414, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 6850, end: 6871, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 7329, end: 7350, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 7900, end: 7921, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 8621, end: 8642, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 9275, end: 9296, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 9782, end: 9803, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 10233, end: 10254, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 10504, end: 10525, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 12777, end: 12798, loc: SourceLocation { start: [Position], end: [Position] } }, { type: 'CommentLine', value: ' attributeNamespace', start: 14306, end: 14327, loc: SourceLocation { start: [Position], end: [Position] } } ] Attempting to add them back into the AST Successfully backfilled comments into the AST Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/shared/DOMProperty.js: line 47, column 27). See https://github.com/Microsoft/TypeScript/issues/12936 Warning: Contravariance can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/shared/DOMProperty.js: line 48, column 2). See https://github.com/Microsoft/TypeScript/issues/1394 Warning: Contravariance can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/shared/DOMProperty.js: line 49, column 2). See https://github.com/Microsoft/TypeScript/issues/1394 Warning: Contravariance can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/shared/DOMProperty.js: line 50, column 2). See https://github.com/Microsoft/TypeScript/issues/1394 Warning: Contravariance can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/shared/DOMProperty.js: line 51, column 2). See https://github.com/Microsoft/TypeScript/issues/1394 Warning: Contravariance can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/shared/DOMProperty.js: line 52, column 2). See https://github.com/Microsoft/TypeScript/issues/1394 Warning: Contravariance can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/shared/DOMProperty.js: line 53, column 2). See https://github.com/Microsoft/TypeScript/issues/1394 success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/DOMProperty.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/HTMLNodeType.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/hyphenateStyleName.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/isCustomComponent.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/omittedCloseTags.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/possibleStandardNames.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/ReactControlledValuePropTypes.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/ReactDOMNullInputValuePropHook.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/validAriaProperties.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/voidElementTags.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/shared/warnValidStyle.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/unstable-native-dependencies/ReactDOMUnstableNativeDependencies.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.art.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-browser.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom.ts /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.native.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.test.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.fabric.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.fire.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/maxSigned31BitInt.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactCapturedValue.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactCurrentFiber.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactDebugFiberPerf.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberContext.ts /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberDevToolsHook.js success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberErrorDialog.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberErrorLogger.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberExpirationTime.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberHostConfig.ts /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberHostContext.js success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberHydrationContext.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberInstrumentation.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberLazyComponent.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberNewContext.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberPendingPriority.ts Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/react-reconciler/src/ReactFiberReconciler.js: line 74, column 22). See https://github.com/Microsoft/TypeScript/issues/12936 success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberReconciler.ts Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/react-reconciler/src/ReactFiberRoot.js: line 32, column 31). See https://github.com/Microsoft/TypeScript/issues/12936 Warning: Contravariance can't be expressed in TypeScript (at ../../../../../react/packages/react-reconciler/src/ReactFiberRoot.js: line 75, column 2). See https://github.com/Microsoft/TypeScript/issues/1394 Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/react-reconciler/src/ReactFiberRoot.js: line 92, column 40). See https://github.com/Microsoft/TypeScript/issues/12936 success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberRoot.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberStack.ts Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/react-reconciler/src/ReactFiberSuspenseComponent.js: line 13, column 28). See https://github.com/Microsoft/TypeScript/issues/12936 success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberSuspenseComponent.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberTreeReflection.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactHookEffectTags.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactProfilerTimer.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactStrictModeWarnings.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactTypeOfMode.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOM.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMHostConfig.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/fire/ReactFire.ts /Users/yidafu/github/react/packages/react-dom/src/test-utils/ReactTestUtils.js Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/react-reconciler/src/ReactFiber.js: line 86, column 20). See https://github.com/Microsoft/TypeScript/issues/12936 success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiber.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberCompleteWork.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberUnwindWork.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactUpdateQueue.ts success compile: /Users/yidafu/github/react/packages/react-dom/src/client/ReactDOMComponent.ts Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/react-dom/src/server/ReactPartialRenderer.js: line 403, column 3). See https://github.com/Microsoft/TypeScript/issues/12936 success compile: /Users/yidafu/github/react/packages/react-dom/src/server/ReactPartialRenderer.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactChildFiber.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberClassComponent.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberCommitWork.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberHooks.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberBeginWork.ts success compile: /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberScheduler.ts ➜ script-tools git:(master) ✗ node ./react-trans-flow-2-ts /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberHostContext.js /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberDevToolsHook.js /Users/yidafu/github/react/packages/react-dom/src/test-utils/ReactTestUtils.js ➜ script-tools git:(master) ✗ node ./react-trans-flow-2-ts /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberDevToolsHook.js /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberHostContext.js /Users/yidafu/github/react/packages/react-dom/src/test-utils/ReactTestUtils.js ➜ script-tools git:(master) ✗ node ./react-trans-flow-2-ts success compile: /Users/yidafu/github/react/packages/shared/describeComponentFrame.ts success compile: /Users/yidafu/github/react/packages/shared/ExecutionEnvironment.ts success compile: /Users/yidafu/github/react/packages/shared/forks/invariant.www.ts success compile: /Users/yidafu/github/react/packages/shared/forks/lowPriorityWarning.www.ts success compile: /Users/yidafu/github/react/packages/shared/forks/invokeGuardedCallbackImpl.www.ts success compile: /Users/yidafu/github/react/packages/shared/forks/object-assign.umd.ts success compile: /Users/yidafu/github/react/packages/shared/forks/ReactFeatureFlags.native-fb.ts success compile: /Users/yidafu/github/react/packages/shared/forks/ReactFeatureFlags.native-oss.ts success compile: /Users/yidafu/github/react/packages/shared/forks/ReactFeatureFlags.persistent.ts success compile: /Users/yidafu/github/react/packages/shared/forks/ReactFeatureFlags.readonly.ts success compile: /Users/yidafu/github/react/packages/shared/forks/ReactFeatureFlags.test-renderer.ts success compile: /Users/yidafu/github/react/packages/shared/forks/ReactFeatureFlags.test-renderer.www.ts success compile: /Users/yidafu/github/react/packages/shared/forks/ReactFeatureFlags.www.ts success compile: /Users/yidafu/github/react/packages/shared/forks/Scheduler.umd.ts success compile: /Users/yidafu/github/react/packages/shared/forks/SchedulerTracing.umd.ts success compile: /Users/yidafu/github/react/packages/shared/forks/warningWithoutStack.www.ts success compile: /Users/yidafu/github/react/packages/shared/HostConfigWithNoHydration.ts success compile: /Users/yidafu/github/react/packages/shared/getComponentName.ts success compile: /Users/yidafu/github/react/packages/shared/HostConfigWithNoMutation.ts success compile: /Users/yidafu/github/react/packages/shared/HostConfigWithNoPersistence.ts success compile: /Users/yidafu/github/react/packages/shared/invariant.ts success compile: /Users/yidafu/github/react/packages/shared/invokeGuardedCallbackImpl.ts success compile: /Users/yidafu/github/react/packages/shared/isTextInputElement.ts success compile: /Users/yidafu/github/react/packages/shared/isValidElementType.ts success compile: /Users/yidafu/github/react/packages/shared/lowPriorityWarning.ts success compile: /Users/yidafu/github/react/packages/shared/objectIs.ts success compile: /Users/yidafu/github/react/packages/shared/ReactElementType.ts success compile: /Users/yidafu/github/react/packages/shared/ReactErrorUtils.ts success compile: /Users/yidafu/github/react/packages/shared/ReactFeatureFlags.ts success compile: /Users/yidafu/github/react/packages/shared/ReactInstanceMap.ts success compile: /Users/yidafu/github/react/packages/shared/ReactLazyComponent.ts success compile: /Users/yidafu/github/react/packages/shared/ReactPortal.ts success compile: /Users/yidafu/github/react/packages/shared/reactProdInvariant.ts success compile: /Users/yidafu/github/react/packages/shared/ReactSharedInternals.ts success compile: /Users/yidafu/github/react/packages/shared/ReactSymbols.ts success compile: /Users/yidafu/github/react/packages/shared/ReactTreeTraversal.ts success compile: /Users/yidafu/github/react/packages/shared/ReactSideEffectTags.ts Warning: Exact types can't be expressed in TypeScript (at ../../../../../react/packages/shared/ReactTypes.js: line 78, column 24). See https://github.com/Microsoft/TypeScript/issues/12936 success compile: /Users/yidafu/github/react/packages/shared/ReactTypes.ts success compile: /Users/yidafu/github/react/packages/shared/ReactVersion.ts success compile: /Users/yidafu/github/react/packages/shared/shallowEqual.ts success compile: /Users/yidafu/github/react/packages/shared/ReactWorkTags.ts success compile: /Users/yidafu/github/react/packages/shared/warning.ts success compile: /Users/yidafu/github/react/packages/shared/warningWithoutStack.ts /Users/yidafu/github/react/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberHostContext.js /Users/yidafu/github/react/packages/react-reconciler/src/ReactFiberDevToolsHook.js /Users/yidafu/github/react/packages/react-dom/src/test-utils/ReactTestUtils.js --- ...Operations.js => DOMPropertyOperations.ts} | 102 +- packages/react-dom/src/client/ReactDOM.js | 893 -------- packages/react-dom/src/client/ReactDOM.ts | 908 ++++++++ ...njection.js => ReactDOMClientInjection.ts} | 33 +- ...ctDOMComponent.js => ReactDOMComponent.ts} | 678 +++--- ...ponentTree.js => ReactDOMComponentTree.ts} | 26 +- packages/react-dom/src/client/ReactDOMFB.js | 39 - packages/react-dom/src/client/ReactDOMFB.ts | 39 + ...DOMHostConfig.js => ReactDOMHostConfig.ts} | 646 +++--- .../{ReactDOMInput.js => ReactDOMInput.ts} | 230 +- .../{ReactDOMOption.js => ReactDOMOption.ts} | 26 +- .../{ReactDOMSelect.js => ReactDOMSelect.ts} | 124 +- ...ctDOMSelection.js => ReactDOMSelection.ts} | 106 +- ...eactDOMTextarea.js => ReactDOMTextarea.ts} | 108 +- ...putSelection.js => ReactInputSelection.ts} | 102 +- .../{ToStringValue.js => ToStringValue.ts} | 22 +- ...etActiveElement.js => getActiveElement.ts} | 2 +- ...Offset.js => getNodeForCharacterOffset.ts} | 42 +- ...ValueTracking.js => inputValueTracking.ts} | 52 +- .../{setInnerHTML.js => setInnerHTML.ts} | 24 +- .../react-dom/src/client/setTextContent.js | 37 - .../react-dom/src/client/setTextContent.ts | 37 + ...ateDOMNesting.js => validateDOMNesting.ts} | 348 ++-- ...entPlugin.js => BeforeInputEventPlugin.ts} | 436 ++-- ...ngeEventPlugin.js => ChangeEventPlugin.ts} | 180 +- .../src/events/DOMEventPluginOrder.js | 26 - .../src/events/DOMEventPluginOrder.ts | 26 + ...EventTypes.js => DOMTopLevelEventTypes.ts} | 156 +- ...ventPlugin.js => EnterLeaveEventPlugin.ts} | 94 +- .../{EventListener.js => EventListener.ts} | 16 +- ...onState.js => FallbackCompositionState.ts} | 20 +- .../src/events/ReactBrowserEventEmitter.js | 190 -- .../src/events/ReactBrowserEventEmitter.ts | 190 ++ ...ntListener.js => ReactDOMEventListener.ts} | 164 +- ...ectEventPlugin.js => SelectEventPlugin.ts} | 190 +- .../react-dom/src/events/SimpleEventPlugin.js | 333 --- .../react-dom/src/events/SimpleEventPlugin.ts | 333 +++ .../src/events/SyntheticAnimationEvent.js | 21 - .../src/events/SyntheticAnimationEvent.ts | 21 + .../src/events/SyntheticClipboardEvent.js | 22 - .../src/events/SyntheticClipboardEvent.ts | 22 + ...nEvent.js => SyntheticCompositionEvent.ts} | 10 +- ...eticDragEvent.js => SyntheticDragEvent.ts} | 10 +- ...icFocusEvent.js => SyntheticFocusEvent.ts} | 10 +- .../src/events/SyntheticInputEvent.js | 19 - .../src/events/SyntheticInputEvent.ts | 19 + ...oardEvent.js => SyntheticKeyboardEvent.ts} | 16 +- ...icMouseEvent.js => SyntheticMouseEvent.ts} | 26 +- ...interEvent.js => SyntheticPointerEvent.ts} | 10 +- ...icTouchEvent.js => SyntheticTouchEvent.ts} | 10 +- .../src/events/SyntheticTransitionEvent.js | 21 - .../src/events/SyntheticTransitionEvent.ts | 21 + ...yntheticUIEvent.js => SyntheticUIEvent.ts} | 4 +- .../src/events/SyntheticWheelEvent.js | 43 - .../src/events/SyntheticWheelEvent.ts | 43 + ...ntListener-www.js => EventListener-www.ts} | 20 +- ...etEventCharCode.js => getEventCharCode.ts} | 18 +- .../events/{getEventKey.js => getEventKey.ts} | 28 +- ...ifierState.js => getEventModifierState.ts} | 18 +- .../{getEventTarget.js => getEventTarget.ts} | 14 +- ...tName.js => getVendorPrefixedEventName.ts} | 46 +- .../react-dom/src/events/isEventSupported.js | 40 - .../react-dom/src/events/isEventSupported.ts | 40 + .../src/fire/{ReactFire.js => ReactFire.ts} | 766 +++---- ...reHostConfig.js => ReactFireHostConfig.ts} | 0 .../src/server/DOMMarkupOperations.js | 84 - .../src/server/DOMMarkupOperations.ts | 84 + ...rowser.js => ReactDOMFizzServerBrowser.ts} | 17 +- ...g.js => ReactDOMFizzServerFormatConfig.ts} | 2 +- ...erverNode.js => ReactDOMFizzServerNode.ts} | 17 +- ...derer.js => ReactDOMNodeStreamRenderer.ts} | 22 +- ...verBrowser.js => ReactDOMServerBrowser.ts} | 21 +- ...DOMServerNode.js => ReactDOMServerNode.ts} | 11 +- ...gRenderer.js => ReactDOMStringRenderer.ts} | 16 +- ...ialRenderer.js => ReactPartialRenderer.ts} | 1076 +++++----- ...text.js => ReactPartialRendererContext.ts} | 70 +- ...rHooks.js => ReactPartialRendererHooks.ts} | 251 ++- ...Allocator.js => ReactThreadIDAllocator.ts} | 12 +- ...tForBrowser.js => escapeTextForBrowser.ts} | 16 +- .../server/quoteAttributeValueForBrowser.js | 20 - .../server/quoteAttributeValueForBrowser.ts | 20 + .../shared/{CSSProperty.js => CSSProperty.ts} | 28 +- .../src/shared/CSSPropertyOperations.js | 161 -- .../src/shared/CSSPropertyOperations.ts | 161 ++ .../src/shared/CSSShorthandProperty.js | 192 -- .../src/shared/CSSShorthandProperty.ts | 191 ++ .../{DOMNamespaces.js => DOMNamespaces.ts} | 14 +- .../shared/{DOMProperty.js => DOMProperty.ts} | 584 +++--- .../{HTMLNodeType.js => HTMLNodeType.ts} | 4 +- .../shared/ReactControlledValuePropTypes.js | 81 - .../shared/ReactControlledValuePropTypes.ts | 81 + ...ARIAHook.js => ReactDOMInvalidARIAHook.ts} | 72 +- ...k.js => ReactDOMNullInputValuePropHook.ts} | 24 +- ...Hook.js => ReactDOMUnknownPropertyHook.ts} | 262 +-- .../react-dom/src/shared/assertValidProps.js | 70 - .../react-dom/src/shared/assertValidProps.ts | 70 + .../shared/{checkReact.js => checkReact.ts} | 7 +- ... => createMicrosoftUnsafeLocalFunction.ts} | 10 +- ...usStyleValue.js => dangerousStyleValue.ts} | 28 +- .../src/shared/hyphenateStyleName.js | 31 - .../src/shared/hyphenateStyleName.ts | 31 + ...ustomComponent.js => isCustomComponent.ts} | 4 +- ...mittedCloseTags.js => omittedCloseTags.ts} | 2 +- ...ndardNames.js => possibleStandardNames.ts} | 4 +- ...iaProperties.js => validAriaProperties.ts} | 4 +- ...{voidElementTags.js => voidElementTags.ts} | 4 +- .../{warnValidStyle.js => warnValidStyle.ts} | 70 +- ... => ReactDOMUnstableNativeDependencies.ts} | 27 +- .../react-is/src/{ReactIs.js => ReactIs.ts} | 54 +- .../src/ReactCapturedValue.js | 41 - .../src/ReactCapturedValue.ts | 41 + ...{ReactChildFiber.js => ReactChildFiber.ts} | 960 ++++----- ...ctCurrentFiber.js => ReactCurrentFiber.ts} | 22 +- ...bugFiberPerf.js => ReactDebugFiberPerf.ts} | 208 +- .../src/{ReactFiber.js => ReactFiber.ts} | 442 ++-- ...berBeginWork.js => ReactFiberBeginWork.ts} | 1856 ++++++++--------- ...mponent.js => ReactFiberClassComponent.ts} | 1003 +++++---- ...rCommitWork.js => ReactFiberCommitWork.ts} | 1173 ++++++----- ...pleteWork.js => ReactFiberCompleteWork.ts} | 764 +++---- ...ctFiberContext.js => ReactFiberContext.ts} | 231 +- ...rrorDialog.js => ReactFiberErrorDialog.ts} | 2 +- ...rrorLogger.js => ReactFiberErrorLogger.ts} | 34 +- ...ionTime.js => ReactFiberExpirationTime.ts} | 42 +- ...{ReactFiberHooks.js => ReactFiberHooks.ts} | 1002 ++++----- ...rHostConfig.js => ReactFiberHostConfig.ts} | 0 ...ntext.js => ReactFiberHydrationContext.ts} | 411 ++-- ...tation.js => ReactFiberInstrumentation.ts} | 4 +- ...omponent.js => ReactFiberLazyComponent.ts} | 76 +- ...rNewContext.js => ReactFiberNewContext.ts} | 224 +- ...iority.js => ReactFiberPendingPriority.ts} | 80 +- ...rReconciler.js => ReactFiberReconciler.ts} | 340 +-- .../{ReactFiberRoot.js => ReactFiberRoot.ts} | 116 +- ...berScheduler.js => ReactFiberScheduler.ts} | 1203 ++++++----- ...{ReactFiberStack.js => ReactFiberStack.ts} | 31 +- ...nent.js => ReactFiberSuspenseComponent.ts} | 10 +- ...lection.js => ReactFiberTreeReflection.ts} | 72 +- ...rUnwindWork.js => ReactFiberUnwindWork.ts} | 433 ++-- .../src/ReactHookEffectTags.js | 19 - .../src/ReactHookEffectTags.ts | 19 + ...ProfilerTimer.js => ReactProfilerTimer.ts} | 39 +- .../src/ReactStrictModeWarnings.js | 363 ---- .../src/ReactStrictModeWarnings.ts | 363 ++++ ...{ReactTypeOfMode.js => ReactTypeOfMode.ts} | 0 ...eactUpdateQueue.js => ReactUpdateQueue.ts} | 324 +-- ...ive.js => ReactFiberErrorDialog.native.ts} | 16 +- ...og.www.js => ReactFiberErrorDialog.www.ts} | 8 +- ...fig.art.js => ReactFiberHostConfig.art.ts} | 0 ...js => ReactFiberHostConfig.dom-browser.ts} | 0 ...fig.dom.js => ReactFiberHostConfig.dom.ts} | 0 ...bric.js => ReactFiberHostConfig.fabric.ts} | 0 ...g.fire.js => ReactFiberHostConfig.fire.ts} | 0 ...tive.js => ReactFiberHostConfig.native.ts} | 0 ...g.test.js => ReactFiberHostConfig.test.ts} | 0 ...Signed31BitInt.js => maxSigned31BitInt.ts} | 0 packages/react/src/{React.js => React.ts} | 74 +- packages/react/src/ReactBaseClasses.js | 145 -- packages/react/src/ReactBaseClasses.ts | 145 ++ packages/react/src/ReactChildren.js | 401 ---- packages/react/src/ReactChildren.ts | 400 ++++ .../src/{ReactContext.js => ReactContext.ts} | 74 +- .../{ReactCreateRef.js => ReactCreateRef.ts} | 6 +- packages/react/src/ReactCurrentDispatcher.js | 23 - packages/react/src/ReactCurrentDispatcher.ts | 24 + packages/react/src/ReactCurrentOwner.js | 26 - packages/react/src/ReactCurrentOwner.ts | 26 + ...rentFrame.js => ReactDebugCurrentFrame.ts} | 16 +- .../src/{ReactElement.js => ReactElement.ts} | 194 +- ...tValidator.js => ReactElementValidator.ts} | 224 +- packages/react/src/ReactHooks.js | 137 -- packages/react/src/ReactHooks.ts | 137 ++ .../react/src/{ReactLazy.js => ReactLazy.ts} | 46 +- packages/react/src/ReactNoopUpdateQueue.js | 113 - packages/react/src/ReactNoopUpdateQueue.ts | 113 + ...edInternals.js => ReactSharedInternals.ts} | 72 +- ...r.www.js => ReactCurrentDispatcher.www.ts} | 0 ...tOwner.www.js => ReactCurrentOwner.www.ts} | 0 packages/react/src/forwardRef.js | 53 - packages/react/src/forwardRef.ts | 53 + packages/react/src/{memo.js => memo.ts} | 24 +- .../src/{Scheduler.js => Scheduler.ts} | 190 +- ...atureFlags.js => SchedulerFeatureFlags.ts} | 0 .../scheduler/src/{Tracing.js => Tracing.ts} | 70 +- ...bscriptions.js => TracingSubscriptions.ts} | 32 +- ...gs.www.js => SchedulerFeatureFlags.www.ts} | 0 ...Environment.js => ExecutionEnvironment.ts} | 7 +- ...ration.js => HostConfigWithNoHydration.ts} | 12 +- ...utation.js => HostConfigWithNoMutation.ts} | 10 +- ...ence.js => HostConfigWithNoPersistence.ts} | 10 +- ...eactElementType.js => ReactElementType.ts} | 29 +- packages/shared/ReactErrorUtils.js | 126 -- packages/shared/ReactErrorUtils.ts | 126 ++ ...ctFeatureFlags.js => ReactFeatureFlags.ts} | 0 packages/shared/ReactInstanceMap.js | 37 - packages/shared/ReactInstanceMap.ts | 37 + ...LazyComponent.js => ReactLazyComponent.ts} | 28 +- .../shared/{ReactPortal.js => ReactPortal.ts} | 20 +- ...edInternals.js => ReactSharedInternals.ts} | 6 +- packages/shared/ReactSideEffectTags.js | 35 - packages/shared/ReactSideEffectTags.ts | 35 + packages/shared/ReactSymbols.js | 64 - packages/shared/ReactSymbols.ts | 64 + ...TreeTraversal.js => ReactTreeTraversal.ts} | 36 +- packages/shared/ReactTypes.js | 80 - packages/shared/ReactTypes.ts | 79 + .../{ReactVersion.js => ReactVersion.ts} | 0 .../{ReactWorkTags.js => ReactWorkTags.ts} | 38 +- ...nentFrame.js => describeComponentFrame.ts} | 10 +- ...e-fb.js => ReactFeatureFlags.native-fb.ts} | 6 +- ...oss.js => ReactFeatureFlags.native-oss.ts} | 4 +- ...ent.js => ReactFeatureFlags.persistent.ts} | 4 +- ...donly.js => ReactFeatureFlags.readonly.ts} | 2 +- ....js => ReactFeatureFlags.test-renderer.ts} | 4 +- ...=> ReactFeatureFlags.test-renderer.www.ts} | 4 +- ...eFlags.www.js => ReactFeatureFlags.www.ts} | 8 +- .../{Scheduler.umd.js => Scheduler.umd.ts} | 35 +- ...Tracing.umd.js => SchedulerTracing.umd.ts} | 23 +- .../{invariant.www.js => invariant.www.ts} | 0 ...ww.js => invokeGuardedCallbackImpl.www.ts} | 28 +- ...rning.www.js => lowPriorityWarning.www.ts} | 0 ...ect-assign.umd.js => object-assign.umd.ts} | 0 ...tack.www.js => warningWithoutStack.www.ts} | 0 ...etComponentName.js => getComponentName.ts} | 76 +- .../shared/{invariant.js => invariant.ts} | 34 +- ...ckImpl.js => invokeGuardedCallbackImpl.ts} | 110 +- ...tInputElement.js => isTextInputElement.ts} | 14 +- packages/shared/isValidElementType.js | 41 - packages/shared/isValidElementType.ts | 41 + packages/shared/lowPriorityWarning.js | 52 - packages/shared/lowPriorityWarning.ts | 52 + packages/shared/objectIs.js | 20 - packages/shared/objectIs.ts | 20 + ...ProdInvariant.js => reactProdInvariant.ts} | 32 +- packages/shared/shallowEqual.js | 53 - packages/shared/shallowEqual.ts | 53 + packages/shared/{warning.js => warning.ts} | 12 +- ...WithoutStack.js => warningWithoutStack.ts} | 24 +- scripts/rollup/build.js | 18 +- scripts/rollup/results.json | 260 +-- 238 files changed, 14516 insertions(+), 14519 deletions(-) rename packages/react-dom/src/client/{DOMPropertyOperations.js => DOMPropertyOperations.ts} (64%) delete mode 100644 packages/react-dom/src/client/ReactDOM.js create mode 100644 packages/react-dom/src/client/ReactDOM.ts rename packages/react-dom/src/client/{ReactDOMClientInjection.js => ReactDOMClientInjection.ts} (55%) rename packages/react-dom/src/client/{ReactDOMComponent.js => ReactDOMComponent.ts} (75%) rename packages/react-dom/src/client/{ReactDOMComponentTree.js => ReactDOMComponentTree.ts} (79%) delete mode 100644 packages/react-dom/src/client/ReactDOMFB.js create mode 100644 packages/react-dom/src/client/ReactDOMFB.ts rename packages/react-dom/src/client/{ReactDOMHostConfig.js => ReactDOMHostConfig.ts} (56%) rename packages/react-dom/src/client/{ReactDOMInput.js => ReactDOMInput.ts} (68%) rename packages/react-dom/src/client/{ReactDOMOption.js => ReactDOMOption.ts} (80%) rename packages/react-dom/src/client/{ReactDOMSelect.js => ReactDOMSelect.ts} (62%) rename packages/react-dom/src/client/{ReactDOMSelection.js => ReactDOMSelection.ts} (69%) rename packages/react-dom/src/client/{ReactDOMTextarea.js => ReactDOMTextarea.ts} (55%) rename packages/react-dom/src/client/{ReactInputSelection.js => ReactInputSelection.ts} (65%) rename packages/react-dom/src/client/{ToStringValue.js => ToStringValue.ts} (76%) rename packages/react-dom/src/client/{getActiveElement.js => getActiveElement.ts} (80%) rename packages/react-dom/src/client/{getNodeForCharacterOffset.js => getNodeForCharacterOffset.ts} (51%) rename packages/react-dom/src/client/{inputValueTracking.js => inputValueTracking.ts} (80%) rename packages/react-dom/src/client/{setInnerHTML.js => setInnerHTML.ts} (71%) delete mode 100644 packages/react-dom/src/client/setTextContent.js create mode 100644 packages/react-dom/src/client/setTextContent.ts rename packages/react-dom/src/client/{validateDOMNesting.js => validateDOMNesting.ts} (71%) rename packages/react-dom/src/events/{BeforeInputEventPlugin.js => BeforeInputEventPlugin.ts} (52%) rename packages/react-dom/src/events/{ChangeEventPlugin.js => ChangeEventPlugin.ts} (73%) delete mode 100644 packages/react-dom/src/events/DOMEventPluginOrder.js create mode 100644 packages/react-dom/src/events/DOMEventPluginOrder.ts rename packages/react-dom/src/events/{DOMTopLevelEventTypes.js => DOMTopLevelEventTypes.ts} (77%) rename packages/react-dom/src/events/{EnterLeaveEventPlugin.js => EnterLeaveEventPlugin.ts} (66%) rename packages/react-dom/src/events/{EventListener.js => EventListener.ts} (70%) rename packages/react-dom/src/events/{FallbackCompositionState.js => FallbackCompositionState.ts} (73%) delete mode 100644 packages/react-dom/src/events/ReactBrowserEventEmitter.js create mode 100644 packages/react-dom/src/events/ReactBrowserEventEmitter.ts rename packages/react-dom/src/events/{ReactDOMEventListener.js => ReactDOMEventListener.ts} (54%) rename packages/react-dom/src/events/{SelectEventPlugin.js => SelectEventPlugin.ts} (59%) delete mode 100644 packages/react-dom/src/events/SimpleEventPlugin.js create mode 100644 packages/react-dom/src/events/SimpleEventPlugin.ts delete mode 100644 packages/react-dom/src/events/SyntheticAnimationEvent.js create mode 100644 packages/react-dom/src/events/SyntheticAnimationEvent.ts delete mode 100644 packages/react-dom/src/events/SyntheticClipboardEvent.js create mode 100644 packages/react-dom/src/events/SyntheticClipboardEvent.ts rename packages/react-dom/src/events/{SyntheticCompositionEvent.js => SyntheticCompositionEvent.ts} (56%) rename packages/react-dom/src/events/{SyntheticDragEvent.js => SyntheticDragEvent.ts} (55%) rename packages/react-dom/src/events/{SyntheticFocusEvent.js => SyntheticFocusEvent.ts} (56%) delete mode 100644 packages/react-dom/src/events/SyntheticInputEvent.js create mode 100644 packages/react-dom/src/events/SyntheticInputEvent.ts rename packages/react-dom/src/events/{SyntheticKeyboardEvent.js => SyntheticKeyboardEvent.ts} (83%) rename packages/react-dom/src/events/{SyntheticMouseEvent.js => SyntheticMouseEvent.ts} (77%) rename packages/react-dom/src/events/{SyntheticPointerEvent.js => SyntheticPointerEvent.ts} (65%) rename packages/react-dom/src/events/{SyntheticTouchEvent.js => SyntheticTouchEvent.ts} (63%) delete mode 100644 packages/react-dom/src/events/SyntheticTransitionEvent.js create mode 100644 packages/react-dom/src/events/SyntheticTransitionEvent.ts rename packages/react-dom/src/events/{SyntheticUIEvent.js => SyntheticUIEvent.ts} (94%) delete mode 100644 packages/react-dom/src/events/SyntheticWheelEvent.js create mode 100644 packages/react-dom/src/events/SyntheticWheelEvent.ts rename packages/react-dom/src/events/forks/{EventListener-www.js => EventListener-www.ts} (74%) rename packages/react-dom/src/events/{getEventCharCode.js => getEventCharCode.ts} (66%) rename packages/react-dom/src/events/{getEventKey.js => getEventKey.ts} (72%) rename packages/react-dom/src/events/{getEventModifierState.js => getEventModifierState.ts} (73%) rename packages/react-dom/src/events/{getEventTarget.js => getEventTarget.ts} (57%) rename packages/react-dom/src/events/{getVendorPrefixedEventName.js => getVendorPrefixedEventName.ts} (59%) delete mode 100644 packages/react-dom/src/events/isEventSupported.js create mode 100644 packages/react-dom/src/events/isEventSupported.ts rename packages/react-dom/src/fire/{ReactFire.js => ReactFire.ts} (50%) rename packages/react-dom/src/fire/{ReactFireHostConfig.js => ReactFireHostConfig.ts} (100%) delete mode 100644 packages/react-dom/src/server/DOMMarkupOperations.js create mode 100644 packages/react-dom/src/server/DOMMarkupOperations.ts rename packages/react-dom/src/server/{ReactDOMFizzServerBrowser.js => ReactDOMFizzServerBrowser.ts} (73%) rename packages/react-dom/src/server/{ReactDOMFizzServerFormatConfig.js => ReactDOMFizzServerFormatConfig.ts} (85%) rename packages/react-dom/src/server/{ReactDOMFizzServerNode.js => ReactDOMFizzServerNode.ts} (61%) rename packages/react-dom/src/server/{ReactDOMNodeStreamRenderer.js => ReactDOMNodeStreamRenderer.ts} (70%) rename packages/react-dom/src/server/{ReactDOMServerBrowser.js => ReactDOMServerBrowser.ts} (56%) rename packages/react-dom/src/server/{ReactDOMServerNode.js => ReactDOMServerNode.ts} (69%) rename packages/react-dom/src/server/{ReactDOMStringRenderer.js => ReactDOMStringRenderer.ts} (53%) rename packages/react-dom/src/server/{ReactPartialRenderer.js => ReactPartialRenderer.ts} (59%) rename packages/react-dom/src/server/{ReactPartialRendererContext.js => ReactPartialRendererContext.ts} (68%) rename packages/react-dom/src/server/{ReactPartialRendererHooks.js => ReactPartialRendererHooks.ts} (67%) rename packages/react-dom/src/server/{ReactThreadIDAllocator.js => ReactThreadIDAllocator.ts} (80%) rename packages/react-dom/src/server/{escapeTextForBrowser.js => escapeTextForBrowser.ts} (88%) delete mode 100644 packages/react-dom/src/server/quoteAttributeValueForBrowser.js create mode 100644 packages/react-dom/src/server/quoteAttributeValueForBrowser.ts rename packages/react-dom/src/shared/{CSSProperty.js => CSSProperty.ts} (69%) delete mode 100644 packages/react-dom/src/shared/CSSPropertyOperations.js create mode 100644 packages/react-dom/src/shared/CSSPropertyOperations.ts delete mode 100644 packages/react-dom/src/shared/CSSShorthandProperty.js create mode 100644 packages/react-dom/src/shared/CSSShorthandProperty.ts rename packages/react-dom/src/shared/{DOMNamespaces.js => DOMNamespaces.ts} (89%) rename packages/react-dom/src/shared/{DOMProperty.js => DOMProperty.ts} (50%) rename packages/react-dom/src/shared/{HTMLNodeType.js => HTMLNodeType.ts} (83%) delete mode 100644 packages/react-dom/src/shared/ReactControlledValuePropTypes.js create mode 100644 packages/react-dom/src/shared/ReactControlledValuePropTypes.ts rename packages/react-dom/src/shared/{ReactDOMInvalidARIAHook.js => ReactDOMInvalidARIAHook.ts} (72%) rename packages/react-dom/src/shared/{ReactDOMNullInputValuePropHook.js => ReactDOMNullInputValuePropHook.ts} (56%) rename packages/react-dom/src/shared/{ReactDOMUnknownPropertyHook.js => ReactDOMUnknownPropertyHook.ts} (52%) delete mode 100644 packages/react-dom/src/shared/assertValidProps.js create mode 100644 packages/react-dom/src/shared/assertValidProps.ts rename packages/react-dom/src/shared/{checkReact.js => checkReact.ts} (69%) rename packages/react-dom/src/shared/{createMicrosoftUnsafeLocalFunction.js => createMicrosoftUnsafeLocalFunction.ts} (60%) rename packages/react-dom/src/shared/{dangerousStyleValue.js => dangerousStyleValue.ts} (54%) delete mode 100644 packages/react-dom/src/shared/hyphenateStyleName.js create mode 100644 packages/react-dom/src/shared/hyphenateStyleName.ts rename packages/react-dom/src/shared/{isCustomComponent.js => isCustomComponent.ts} (97%) rename packages/react-dom/src/shared/{omittedCloseTags.js => omittedCloseTags.ts} (98%) rename packages/react-dom/src/shared/{possibleStandardNames.js => possibleStandardNames.ts} (99%) rename packages/react-dom/src/shared/{validAriaProperties.js => validAriaProperties.ts} (98%) rename packages/react-dom/src/shared/{voidElementTags.js => voidElementTags.ts} (94%) rename packages/react-dom/src/shared/{warnValidStyle.js => warnValidStyle.ts} (60%) rename packages/react-dom/src/unstable-native-dependencies/{ReactDOMUnstableNativeDependencies.js => ReactDOMUnstableNativeDependencies.ts} (56%) rename packages/react-is/src/{ReactIs.js => ReactIs.ts} (82%) delete mode 100644 packages/react-reconciler/src/ReactCapturedValue.js create mode 100644 packages/react-reconciler/src/ReactCapturedValue.ts rename packages/react-reconciler/src/{ReactChildFiber.js => ReactChildFiber.ts} (68%) rename packages/react-reconciler/src/{ReactCurrentFiber.js => ReactCurrentFiber.ts} (89%) rename packages/react-reconciler/src/{ReactDebugFiberPerf.js => ReactDebugFiberPerf.ts} (76%) rename packages/react-reconciler/src/{ReactFiber.js => ReactFiber.ts} (75%) rename packages/react-reconciler/src/{ReactFiberBeginWork.js => ReactFiberBeginWork.ts} (67%) rename packages/react-reconciler/src/{ReactFiberClassComponent.js => ReactFiberClassComponent.ts} (56%) rename packages/react-reconciler/src/{ReactFiberCommitWork.js => ReactFiberCommitWork.ts} (53%) rename packages/react-reconciler/src/{ReactFiberCompleteWork.js => ReactFiberCompleteWork.ts} (55%) rename packages/react-reconciler/src/{ReactFiberContext.js => ReactFiberContext.ts} (62%) rename packages/react-reconciler/src/{ReactFiberErrorDialog.js => ReactFiberErrorDialog.ts} (88%) rename packages/react-reconciler/src/{ReactFiberErrorLogger.js => ReactFiberErrorLogger.ts} (71%) rename packages/react-reconciler/src/{ReactFiberExpirationTime.js => ReactFiberExpirationTime.ts} (77%) rename packages/react-reconciler/src/{ReactFiberHooks.js => ReactFiberHooks.ts} (69%) rename packages/react-reconciler/src/{ReactFiberHostConfig.js => ReactFiberHostConfig.ts} (100%) rename packages/react-reconciler/src/{ReactFiberHydrationContext.js => ReactFiberHydrationContext.ts} (50%) rename packages/react-reconciler/src/{ReactFiberInstrumentation.js => ReactFiberInstrumentation.ts} (96%) rename packages/react-reconciler/src/{ReactFiberLazyComponent.js => ReactFiberLazyComponent.ts} (55%) rename packages/react-reconciler/src/{ReactFiberNewContext.js => ReactFiberNewContext.ts} (66%) rename packages/react-reconciler/src/{ReactFiberPendingPriority.js => ReactFiberPendingPriority.ts} (87%) rename packages/react-reconciler/src/{ReactFiberReconciler.js => ReactFiberReconciler.ts} (55%) rename packages/react-reconciler/src/{ReactFiberRoot.js => ReactFiberRoot.ts} (70%) rename packages/react-reconciler/src/{ReactFiberScheduler.js => ReactFiberScheduler.ts} (77%) rename packages/react-reconciler/src/{ReactFiberStack.js => ReactFiberStack.ts} (82%) rename packages/react-reconciler/src/{ReactFiberSuspenseComponent.js => ReactFiberSuspenseComponent.ts} (80%) rename packages/react-reconciler/src/{ReactFiberTreeReflection.js => ReactFiberTreeReflection.ts} (83%) rename packages/react-reconciler/src/{ReactFiberUnwindWork.js => ReactFiberUnwindWork.ts} (65%) delete mode 100644 packages/react-reconciler/src/ReactHookEffectTags.js create mode 100644 packages/react-reconciler/src/ReactHookEffectTags.ts rename packages/react-reconciler/src/{ReactProfilerTimer.js => ReactProfilerTimer.ts} (61%) delete mode 100644 packages/react-reconciler/src/ReactStrictModeWarnings.js create mode 100644 packages/react-reconciler/src/ReactStrictModeWarnings.ts rename packages/react-reconciler/src/{ReactTypeOfMode.js => ReactTypeOfMode.ts} (100%) rename packages/react-reconciler/src/{ReactUpdateQueue.js => ReactUpdateQueue.ts} (76%) rename packages/react-reconciler/src/forks/{ReactFiberErrorDialog.native.js => ReactFiberErrorDialog.native.ts} (71%) rename packages/react-reconciler/src/forks/{ReactFiberErrorDialog.www.js => ReactFiberErrorDialog.www.ts} (71%) rename packages/react-reconciler/src/forks/{ReactFiberHostConfig.art.js => ReactFiberHostConfig.art.ts} (100%) rename packages/react-reconciler/src/forks/{ReactFiberHostConfig.dom-browser.js => ReactFiberHostConfig.dom-browser.ts} (100%) rename packages/react-reconciler/src/forks/{ReactFiberHostConfig.dom.js => ReactFiberHostConfig.dom.ts} (100%) rename packages/react-reconciler/src/forks/{ReactFiberHostConfig.fabric.js => ReactFiberHostConfig.fabric.ts} (100%) rename packages/react-reconciler/src/forks/{ReactFiberHostConfig.fire.js => ReactFiberHostConfig.fire.ts} (100%) rename packages/react-reconciler/src/forks/{ReactFiberHostConfig.native.js => ReactFiberHostConfig.native.ts} (100%) rename packages/react-reconciler/src/forks/{ReactFiberHostConfig.test.js => ReactFiberHostConfig.test.ts} (100%) rename packages/react-reconciler/src/{maxSigned31BitInt.js => maxSigned31BitInt.ts} (100%) rename packages/react/src/{React.js => React.ts} (65%) delete mode 100644 packages/react/src/ReactBaseClasses.js create mode 100644 packages/react/src/ReactBaseClasses.ts delete mode 100644 packages/react/src/ReactChildren.js create mode 100644 packages/react/src/ReactChildren.ts rename packages/react/src/{ReactContext.js => ReactContext.ts} (72%) rename packages/react/src/{ReactCreateRef.js => ReactCreateRef.ts} (83%) delete mode 100644 packages/react/src/ReactCurrentDispatcher.js create mode 100644 packages/react/src/ReactCurrentDispatcher.ts delete mode 100644 packages/react/src/ReactCurrentOwner.js create mode 100644 packages/react/src/ReactCurrentOwner.ts rename packages/react/src/{ReactDebugCurrentFrame.js => ReactDebugCurrentFrame.ts} (75%) rename packages/react/src/{ReactElement.js => ReactElement.ts} (69%) rename packages/react/src/{ReactElementValidator.js => ReactElementValidator.ts} (64%) delete mode 100644 packages/react/src/ReactHooks.js create mode 100644 packages/react/src/ReactHooks.ts rename packages/react/src/{ReactLazy.js => ReactLazy.ts} (60%) delete mode 100644 packages/react/src/ReactNoopUpdateQueue.js create mode 100644 packages/react/src/ReactNoopUpdateQueue.ts rename packages/react/src/{ReactSharedInternals.js => ReactSharedInternals.ts} (70%) rename packages/react/src/forks/{ReactCurrentDispatcher.www.js => ReactCurrentDispatcher.www.ts} (100%) rename packages/react/src/forks/{ReactCurrentOwner.www.js => ReactCurrentOwner.www.ts} (100%) delete mode 100644 packages/react/src/forwardRef.js create mode 100644 packages/react/src/forwardRef.ts rename packages/react/src/{memo.js => memo.ts} (53%) rename packages/scheduler/src/{Scheduler.js => Scheduler.ts} (84%) rename packages/scheduler/src/{SchedulerFeatureFlags.js => SchedulerFeatureFlags.ts} (100%) rename packages/scheduler/src/{Tracing.js => Tracing.ts} (89%) rename packages/scheduler/src/{TracingSubscriptions.js => TracingSubscriptions.ts} (84%) rename packages/scheduler/src/forks/{SchedulerFeatureFlags.www.js => SchedulerFeatureFlags.www.ts} (100%) rename packages/shared/{ExecutionEnvironment.js => ExecutionEnvironment.ts} (72%) rename packages/shared/{HostConfigWithNoHydration.js => HostConfigWithNoHydration.ts} (88%) rename packages/shared/{HostConfigWithNoMutation.js => HostConfigWithNoMutation.ts} (85%) rename packages/shared/{HostConfigWithNoPersistence.js => HostConfigWithNoPersistence.ts} (83%) rename packages/shared/{ReactElementType.js => ReactElementType.ts} (51%) delete mode 100644 packages/shared/ReactErrorUtils.js create mode 100644 packages/shared/ReactErrorUtils.ts rename packages/shared/{ReactFeatureFlags.js => ReactFeatureFlags.ts} (100%) delete mode 100644 packages/shared/ReactInstanceMap.js create mode 100644 packages/shared/ReactInstanceMap.ts rename packages/shared/{ReactLazyComponent.js => ReactLazyComponent.ts} (57%) rename packages/shared/{ReactPortal.js => ReactPortal.ts} (56%) rename packages/shared/{ReactSharedInternals.js => ReactSharedInternals.ts} (88%) delete mode 100644 packages/shared/ReactSideEffectTags.js create mode 100644 packages/shared/ReactSideEffectTags.ts delete mode 100644 packages/shared/ReactSymbols.js create mode 100644 packages/shared/ReactSymbols.ts rename packages/shared/{ReactTreeTraversal.js => ReactTreeTraversal.ts} (80%) delete mode 100644 packages/shared/ReactTypes.js create mode 100644 packages/shared/ReactTypes.ts rename packages/shared/{ReactVersion.js => ReactVersion.ts} (100%) rename packages/shared/{ReactWorkTags.js => ReactWorkTags.ts} (89%) rename packages/shared/{describeComponentFrame.js => describeComponentFrame.ts} (91%) rename packages/shared/forks/{ReactFeatureFlags.native-fb.js => ReactFeatureFlags.native-fb.ts} (88%) rename packages/shared/forks/{ReactFeatureFlags.native-oss.js => ReactFeatureFlags.native-oss.ts} (92%) rename packages/shared/forks/{ReactFeatureFlags.persistent.js => ReactFeatureFlags.persistent.ts} (91%) rename packages/shared/forks/{ReactFeatureFlags.readonly.js => ReactFeatureFlags.readonly.ts} (89%) rename packages/shared/forks/{ReactFeatureFlags.test-renderer.js => ReactFeatureFlags.test-renderer.ts} (91%) rename packages/shared/forks/{ReactFeatureFlags.test-renderer.www.js => ReactFeatureFlags.test-renderer.www.ts} (91%) rename packages/shared/forks/{ReactFeatureFlags.www.js => ReactFeatureFlags.www.ts} (91%) rename packages/shared/forks/{Scheduler.umd.js => Scheduler.umd.ts} (60%) rename packages/shared/forks/{SchedulerTracing.umd.js => SchedulerTracing.umd.ts} (67%) rename packages/shared/forks/{invariant.www.js => invariant.www.ts} (100%) rename packages/shared/forks/{invokeGuardedCallbackImpl.www.js => invokeGuardedCallbackImpl.www.ts} (58%) rename packages/shared/forks/{lowPriorityWarning.www.js => lowPriorityWarning.www.ts} (100%) rename packages/shared/forks/{object-assign.umd.js => object-assign.umd.ts} (100%) rename packages/shared/forks/{warningWithoutStack.www.js => warningWithoutStack.www.ts} (100%) rename packages/shared/{getComponentName.js => getComponentName.ts} (54%) rename packages/shared/{invariant.js => invariant.ts} (54%) rename packages/shared/{invokeGuardedCallbackImpl.js => invokeGuardedCallbackImpl.ts} (75%) rename packages/shared/{isTextInputElement.js => isTextInputElement.ts} (64%) delete mode 100644 packages/shared/isValidElementType.js create mode 100644 packages/shared/isValidElementType.ts delete mode 100644 packages/shared/lowPriorityWarning.js create mode 100644 packages/shared/lowPriorityWarning.ts delete mode 100644 packages/shared/objectIs.js create mode 100644 packages/shared/objectIs.ts rename packages/shared/{reactProdInvariant.js => reactProdInvariant.ts} (51%) delete mode 100644 packages/shared/shallowEqual.js create mode 100644 packages/shared/shallowEqual.ts rename packages/shared/{warning.js => warning.ts} (72%) rename packages/shared/{warningWithoutStack.js => warningWithoutStack.ts} (65%) diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.ts similarity index 64% rename from packages/react-dom/src/client/DOMPropertyOperations.js rename to packages/react-dom/src/client/DOMPropertyOperations.ts index 9a186827fa700..8022ebc118d30 100644 --- a/packages/react-dom/src/client/DOMPropertyOperations.js +++ b/packages/react-dom/src/client/DOMPropertyOperations.ts @@ -8,31 +8,31 @@ */ import { - getPropertyInfo, - shouldIgnoreAttribute, - shouldRemoveAttribute, - isAttributeNameSafe, - BOOLEAN, - OVERLOADED_BOOLEAN, -} from '../shared/DOMProperty'; +getPropertyInfo, +shouldIgnoreAttribute, +shouldRemoveAttribute, +isAttributeNameSafe, +BOOLEAN, +OVERLOADED_BOOLEAN } from +'../shared/DOMProperty'; -import type {PropertyInfo} from '../shared/DOMProperty'; +import { PropertyInfo } from '../shared/DOMProperty'; /** - * Get the value for a property on a node. Only used in DEV for SSR validation. - * The "expected" argument is used as a hint of what the expected value is. - * Some properties have multiple equivalent values. - */ + * Get the value for a property on a node. Only used in DEV for SSR validation. + * The "expected" argument is used as a hint of what the expected value is. + * Some properties have multiple equivalent values. + */ export function getValueForProperty( - node: Element, - name: string, - expected: mixed, - propertyInfo: PropertyInfo, -): mixed { +node: Element, +name: string, +expected: unknown, +propertyInfo: PropertyInfo) +: unknown { if (__DEV__) { if (propertyInfo.mustUseProperty) { - const {propertyName} = propertyInfo; - return (node: any)[propertyName]; + const { propertyName } = propertyInfo; + return (node as any)[propertyName]; } else { const attributeName = propertyInfo.attributeName; @@ -47,7 +47,7 @@ export function getValueForProperty( if (shouldRemoveAttribute(name, expected, propertyInfo, false)) { return value; } - if (value === '' + (expected: any)) { + if (value === '' + (expected as any)) { return expected; } return value; @@ -72,7 +72,7 @@ export function getValueForProperty( if (shouldRemoveAttribute(name, expected, propertyInfo, false)) { return stringValue === null ? expected : stringValue; - } else if (stringValue === '' + (expected: any)) { + } else if (stringValue === '' + (expected as any)) { return expected; } else { return stringValue; @@ -82,15 +82,15 @@ export function getValueForProperty( } /** - * Get the value for a attribute on a node. Only used in DEV for SSR validation. - * The third argument is used as a hint of what the expected value is. Some - * attributes have multiple equivalent values. - */ + * Get the value for a attribute on a node. Only used in DEV for SSR validation. + * The third argument is used as a hint of what the expected value is. Some + * attributes have multiple equivalent values. + */ export function getValueForAttribute( - node: Element, - name: string, - expected: mixed, -): mixed { +node: Element, +name: string, +expected: unknown) +: unknown { if (__DEV__) { if (!isAttributeNameSafe(name)) { return; @@ -99,7 +99,7 @@ export function getValueForAttribute( return expected === undefined ? undefined : null; } const value = node.getAttribute(name); - if (value === '' + (expected: any)) { + if (value === '' + (expected as any)) { return expected; } return value; @@ -107,18 +107,18 @@ export function getValueForAttribute( } /** - * Sets the value for a property on a node. - * - * @param {DOMElement} node - * @param {string} name - * @param {*} value - */ + * Sets the value for a property on a node. + * + * @param {DOMElement} node + * @param {string} name + * @param {*} value + */ export function setValueForProperty( - node: Element, - name: string, - value: mixed, - isCustomComponentTag: boolean, -) { +node: Element, +name: string, +value: unknown, +isCustomComponentTag: boolean) +{ const propertyInfo = getPropertyInfo(name); if (shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag)) { return; @@ -133,37 +133,37 @@ export function setValueForProperty( if (value === null) { node.removeAttribute(attributeName); } else { - node.setAttribute(attributeName, '' + (value: any)); + node.setAttribute(attributeName, '' + (value as any)); } } return; } - const {mustUseProperty} = propertyInfo; + const { mustUseProperty } = propertyInfo; if (mustUseProperty) { - const {propertyName} = propertyInfo; + const { propertyName } = propertyInfo; if (value === null) { - const {type} = propertyInfo; - (node: any)[propertyName] = type === BOOLEAN ? false : ''; + const { type } = propertyInfo; + (node as any)[propertyName] = type === BOOLEAN ? false : ''; } else { // Contrary to `setAttribute`, object properties are properly // `toString`ed by IE8/9. - (node: any)[propertyName] = value; + (node as any)[propertyName] = value; } return; } // The rest are treated as attributes with special cases. - const {attributeName, attributeNamespace} = propertyInfo; + const { attributeName, attributeNamespace } = propertyInfo; if (value === null) { node.removeAttribute(attributeName); } else { - const {type} = propertyInfo; + const { type } = propertyInfo; let attributeValue; - if (type === BOOLEAN || (type === OVERLOADED_BOOLEAN && value === true)) { + if (type === BOOLEAN || type === OVERLOADED_BOOLEAN && value === true) { attributeValue = ''; } else { // `setAttribute` with objects becomes only `[object]` in IE8/9, // ('' + value) makes it output the correct toString()-value. - attributeValue = '' + (value: any); + attributeValue = '' + (value as any); } if (attributeNamespace) { node.setAttributeNS(attributeNamespace, attributeName, attributeValue); diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js deleted file mode 100644 index 0eac062bed74f..0000000000000 --- a/packages/react-dom/src/client/ReactDOM.js +++ /dev/null @@ -1,893 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its 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 {ReactNodeList} from 'shared/ReactTypes'; -// TODO: This type is shared between the reconciler and ReactDOM, but will -// eventually be lifted out to the renderer. -import type { - FiberRoot, - Batch as FiberRootBatch, -} from 'react-reconciler/src/ReactFiberRoot'; - -import '../shared/checkReact'; -import './ReactDOMClientInjection'; - -import { - computeUniqueAsyncExpiration, - findHostInstanceWithNoPortals, - updateContainerAtExpirationTime, - flushRoot, - createContainer, - updateContainer, - batchedUpdates, - unbatchedUpdates, - interactiveUpdates, - flushInteractiveUpdates, - flushSync, - flushControlled, - injectIntoDevTools, - getPublicRootInstance, - findHostInstance, - findHostInstanceWithWarning, -} from 'react-reconciler/inline.dom'; -import {createPortal as createPortalImpl} from 'shared/ReactPortal'; -import {canUseDOM} from 'shared/ExecutionEnvironment'; -import {setBatchingImplementation} from 'events/ReactGenericBatching'; -import { - setRestoreImplementation, - enqueueStateRestore, - restoreStateIfNeeded, -} from 'events/ReactControlledComponent'; -import { - injection as EventPluginHubInjection, - runEventsInBatch, -} from 'events/EventPluginHub'; -import {eventNameDispatchConfigs} from 'events/EventPluginRegistry'; -import { - accumulateTwoPhaseDispatches, - accumulateDirectDispatches, -} from 'events/EventPropagators'; -import {has as hasInstance} from 'shared/ReactInstanceMap'; -import ReactVersion from 'shared/ReactVersion'; -import ReactSharedInternals from 'shared/ReactSharedInternals'; -import getComponentName from 'shared/getComponentName'; -import invariant from 'shared/invariant'; -import lowPriorityWarning from 'shared/lowPriorityWarning'; -import warningWithoutStack from 'shared/warningWithoutStack'; -import {enableStableConcurrentModeAPIs} from 'shared/ReactFeatureFlags'; - -import { - getInstanceFromNode, - getNodeFromInstance, - getFiberCurrentPropsFromNode, - getClosestInstanceFromNode, -} from './ReactDOMComponentTree'; -import {restoreControlledState} from './ReactDOMComponent'; -import {dispatchEvent} from '../events/ReactDOMEventListener'; -import { - ELEMENT_NODE, - COMMENT_NODE, - DOCUMENT_NODE, - DOCUMENT_FRAGMENT_NODE, -} from '../shared/HTMLNodeType'; -import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty'; - -const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; - -let topLevelUpdateWarnings; -let warnOnInvalidCallback; -let didWarnAboutUnstableCreatePortal = false; - -if (__DEV__) { - if ( - typeof Map !== 'function' || - // $FlowIssue Flow incorrectly thinks Map has no prototype - Map.prototype == null || - typeof Map.prototype.forEach !== 'function' || - typeof Set !== 'function' || - // $FlowIssue Flow incorrectly thinks Set has no prototype - Set.prototype == null || - typeof Set.prototype.clear !== 'function' || - typeof Set.prototype.forEach !== 'function' - ) { - warningWithoutStack( - false, - 'React depends on Map and Set built-in types. Make sure that you load a ' + - 'polyfill in older browsers. https://fb.me/react-polyfills', - ); - } - - topLevelUpdateWarnings = (container: DOMContainer) => { - if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) { - const hostInstance = findHostInstanceWithNoPortals( - container._reactRootContainer._internalRoot.current, - ); - if (hostInstance) { - warningWithoutStack( - hostInstance.parentNode === container, - 'render(...): It looks like the React-rendered content of this ' + - 'container was removed without using React. This is not ' + - 'supported and will cause errors. Instead, call ' + - 'ReactDOM.unmountComponentAtNode to empty a container.', - ); - } - } - - const isRootRenderedBySomeReact = !!container._reactRootContainer; - const rootEl = getReactRootElementInContainer(container); - const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl)); - - warningWithoutStack( - !hasNonRootReactChild || isRootRenderedBySomeReact, - 'render(...): Replacing React-rendered children with a new root ' + - 'component. If you intended to update the children of this node, ' + - 'you should instead have the existing children update their state ' + - 'and render the new components instead of calling ReactDOM.render.', - ); - - warningWithoutStack( - container.nodeType !== ELEMENT_NODE || - !((container: any): Element).tagName || - ((container: any): Element).tagName.toUpperCase() !== 'BODY', - 'render(): Rendering components directly into document.body is ' + - 'discouraged, since its children are often manipulated by third-party ' + - 'scripts and browser extensions. This may lead to subtle ' + - 'reconciliation issues. Try rendering into a container element created ' + - 'for your app.', - ); - }; - - warnOnInvalidCallback = function(callback: mixed, callerName: string) { - warningWithoutStack( - callback === null || typeof callback === 'function', - '%s(...): Expected the last optional `callback` argument to be a ' + - 'function. Instead received: %s.', - callerName, - callback, - ); - }; -} - -setRestoreImplementation(restoreControlledState); - -export type DOMContainer = - | (Element & { - _reactRootContainer: ?Root, - _reactHasBeenPassedToCreateRootDEV: ?boolean, - }) - | (Document & { - _reactRootContainer: ?Root, - _reactHasBeenPassedToCreateRootDEV: ?boolean, - }); - -type Batch = FiberRootBatch & { - render(children: ReactNodeList): Work, - then(onComplete: () => mixed): void, - commit(): void, - - // The ReactRoot constructor is hoisted but the prototype methods are not. If - // we move ReactRoot to be above ReactBatch, the inverse error occurs. - // $FlowFixMe Hoisting issue. - _root: Root, - _hasChildren: boolean, - _children: ReactNodeList, - - _callbacks: Array<() => mixed> | null, - _didComplete: boolean, -}; - -type Root = { - render(children: ReactNodeList, callback: ?() => mixed): Work, - unmount(callback: ?() => mixed): Work, - legacy_renderSubtreeIntoContainer( - parentComponent: ?React$Component, - children: ReactNodeList, - callback: ?() => mixed, - ): Work, - createBatch(): Batch, - - _internalRoot: FiberRoot, -}; - -function ReactBatch(root: ReactRoot) { - const expirationTime = computeUniqueAsyncExpiration(); - this._expirationTime = expirationTime; - this._root = root; - this._next = null; - this._callbacks = null; - this._didComplete = false; - this._hasChildren = false; - this._children = null; - this._defer = true; -} -ReactBatch.prototype.render = function(children: ReactNodeList) { - invariant( - this._defer, - 'batch.render: Cannot render a batch that already committed.', - ); - this._hasChildren = true; - this._children = children; - const internalRoot = this._root._internalRoot; - const expirationTime = this._expirationTime; - const work = new ReactWork(); - updateContainerAtExpirationTime( - children, - internalRoot, - null, - expirationTime, - work._onCommit, - ); - return work; -}; -ReactBatch.prototype.then = function(onComplete: () => mixed) { - if (this._didComplete) { - onComplete(); - return; - } - let callbacks = this._callbacks; - if (callbacks === null) { - callbacks = this._callbacks = []; - } - callbacks.push(onComplete); -}; -ReactBatch.prototype.commit = function() { - const internalRoot = this._root._internalRoot; - let firstBatch = internalRoot.firstBatch; - invariant( - this._defer && firstBatch !== null, - 'batch.commit: Cannot commit a batch multiple times.', - ); - - if (!this._hasChildren) { - // This batch is empty. Return. - this._next = null; - this._defer = false; - return; - } - - let expirationTime = this._expirationTime; - - // Ensure this is the first batch in the list. - if (firstBatch !== this) { - // This batch is not the earliest batch. We need to move it to the front. - // Update its expiration time to be the expiration time of the earliest - // batch, so that we can flush it without flushing the other batches. - if (this._hasChildren) { - expirationTime = this._expirationTime = firstBatch._expirationTime; - // Rendering this batch again ensures its children will be the final state - // when we flush (updates are processed in insertion order: last - // update wins). - // TODO: This forces a restart. Should we print a warning? - this.render(this._children); - } - - // Remove the batch from the list. - let previous = null; - let batch = firstBatch; - while (batch !== this) { - previous = batch; - batch = batch._next; - } - invariant( - previous !== null, - 'batch.commit: Cannot commit a batch multiple times.', - ); - previous._next = batch._next; - - // Add it to the front. - this._next = firstBatch; - firstBatch = internalRoot.firstBatch = this; - } - - // Synchronously flush all the work up to this batch's expiration time. - this._defer = false; - flushRoot(internalRoot, expirationTime); - - // Pop the batch from the list. - const next = this._next; - this._next = null; - firstBatch = internalRoot.firstBatch = next; - - // Append the next earliest batch's children to the update queue. - if (firstBatch !== null && firstBatch._hasChildren) { - firstBatch.render(firstBatch._children); - } -}; -ReactBatch.prototype._onComplete = function() { - if (this._didComplete) { - return; - } - this._didComplete = true; - const callbacks = this._callbacks; - if (callbacks === null) { - return; - } - // TODO: Error handling. - for (let i = 0; i < callbacks.length; i++) { - const callback = callbacks[i]; - callback(); - } -}; - -type Work = { - then(onCommit: () => mixed): void, - _onCommit: () => void, - _callbacks: Array<() => mixed> | null, - _didCommit: boolean, -}; - -function ReactWork() { - this._callbacks = null; - this._didCommit = false; - // TODO: Avoid need to bind by replacing callbacks in the update queue with - // list of Work objects. - this._onCommit = this._onCommit.bind(this); -} -ReactWork.prototype.then = function(onCommit: () => mixed): void { - if (this._didCommit) { - onCommit(); - return; - } - let callbacks = this._callbacks; - if (callbacks === null) { - callbacks = this._callbacks = []; - } - callbacks.push(onCommit); -}; -ReactWork.prototype._onCommit = function(): void { - if (this._didCommit) { - return; - } - this._didCommit = true; - const callbacks = this._callbacks; - if (callbacks === null) { - return; - } - // TODO: Error handling. - for (let i = 0; i < callbacks.length; i++) { - const callback = callbacks[i]; - invariant( - typeof callback === 'function', - 'Invalid argument passed as callback. Expected a function. Instead ' + - 'received: %s', - callback, - ); - callback(); - } -}; - -function ReactRoot( - container: DOMContainer, - isConcurrent: boolean, - hydrate: boolean, -) { - const root = createContainer(container, isConcurrent, hydrate); - this._internalRoot = root; -} -ReactRoot.prototype.render = function( - children: ReactNodeList, - callback: ?() => mixed, -): Work { - const root = this._internalRoot; - const work = new ReactWork(); - callback = callback === undefined ? null : callback; - if (__DEV__) { - warnOnInvalidCallback(callback, 'render'); - } - if (callback !== null) { - work.then(callback); - } - updateContainer(children, root, null, work._onCommit); - return work; -}; -ReactRoot.prototype.unmount = function(callback: ?() => mixed): Work { - const root = this._internalRoot; - const work = new ReactWork(); - callback = callback === undefined ? null : callback; - if (__DEV__) { - warnOnInvalidCallback(callback, 'render'); - } - if (callback !== null) { - work.then(callback); - } - updateContainer(null, root, null, work._onCommit); - return work; -}; -ReactRoot.prototype.legacy_renderSubtreeIntoContainer = function( - parentComponent: ?React$Component, - children: ReactNodeList, - callback: ?() => mixed, -): Work { - const root = this._internalRoot; - const work = new ReactWork(); - callback = callback === undefined ? null : callback; - if (__DEV__) { - warnOnInvalidCallback(callback, 'render'); - } - if (callback !== null) { - work.then(callback); - } - updateContainer(children, root, parentComponent, work._onCommit); - return work; -}; -ReactRoot.prototype.createBatch = function(): Batch { - const batch = new ReactBatch(this); - const expirationTime = batch._expirationTime; - - const internalRoot = this._internalRoot; - const firstBatch = internalRoot.firstBatch; - if (firstBatch === null) { - internalRoot.firstBatch = batch; - batch._next = null; - } else { - // Insert sorted by expiration time then insertion order - let insertAfter = null; - let insertBefore = firstBatch; - while ( - insertBefore !== null && - insertBefore._expirationTime >= expirationTime - ) { - insertAfter = insertBefore; - insertBefore = insertBefore._next; - } - batch._next = insertBefore; - if (insertAfter !== null) { - insertAfter._next = batch; - } - } - - return batch; -}; - -/** - * True if the supplied DOM node is a valid node element. - * - * @param {?DOMElement} node The candidate DOM node. - * @return {boolean} True if the DOM is a valid DOM node. - * @internal - */ -function isValidContainer(node) { - return !!( - node && - (node.nodeType === ELEMENT_NODE || - node.nodeType === DOCUMENT_NODE || - node.nodeType === DOCUMENT_FRAGMENT_NODE || - (node.nodeType === COMMENT_NODE && - node.nodeValue === ' react-mount-point-unstable ')) - ); -} - -function getReactRootElementInContainer(container: any) { - if (!container) { - return null; - } - - if (container.nodeType === DOCUMENT_NODE) { - return container.documentElement; - } else { - return container.firstChild; - } -} - -function shouldHydrateDueToLegacyHeuristic(container) { - const rootElement = getReactRootElementInContainer(container); - return !!( - rootElement && - rootElement.nodeType === ELEMENT_NODE && - rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME) - ); -} - -setBatchingImplementation( - batchedUpdates, - interactiveUpdates, - flushInteractiveUpdates, -); - -let warnedAboutHydrateAPI = false; - -function legacyCreateRootFromDOMContainer( - container: DOMContainer, - forceHydrate: boolean, -): Root { - const shouldHydrate = - forceHydrate || shouldHydrateDueToLegacyHeuristic(container); - // First clear any existing content. - if (!shouldHydrate) { - let warned = false; - let rootSibling; - while ((rootSibling = container.lastChild)) { - if (__DEV__) { - if ( - !warned && - rootSibling.nodeType === ELEMENT_NODE && - (rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME) - ) { - warned = true; - warningWithoutStack( - false, - 'render(): Target node has markup rendered by React, but there ' + - 'are unrelated nodes as well. This is most commonly caused by ' + - 'white-space inserted around server-rendered markup.', - ); - } - } - container.removeChild(rootSibling); - } - } - if (__DEV__) { - if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) { - warnedAboutHydrateAPI = true; - lowPriorityWarning( - false, - 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + - 'will stop working in React v17. Replace the ReactDOM.render() call ' + - 'with ReactDOM.hydrate() if you want React to attach to the server HTML.', - ); - } - } - // Legacy roots are not async by default. - const isConcurrent = false; - return new ReactRoot(container, isConcurrent, shouldHydrate); -} - -function legacyRenderSubtreeIntoContainer( - parentComponent: ?React$Component, - children: ReactNodeList, - container: DOMContainer, - forceHydrate: boolean, - callback: ?Function, -) { - if (__DEV__) { - topLevelUpdateWarnings(container); - } - - // TODO: Without `any` type, Flow says "Property cannot be accessed on any - // member of intersection type." Whyyyyyy. - let root: Root = (container._reactRootContainer: any); - if (!root) { - // Initial mount - root = container._reactRootContainer = legacyCreateRootFromDOMContainer( - container, - forceHydrate, - ); - if (typeof callback === 'function') { - const originalCallback = callback; - callback = function() { - const instance = getPublicRootInstance(root._internalRoot); - originalCallback.call(instance); - }; - } - // Initial mount should not be batched. - unbatchedUpdates(() => { - if (parentComponent != null) { - root.legacy_renderSubtreeIntoContainer( - parentComponent, - children, - callback, - ); - } else { - root.render(children, callback); - } - }); - } else { - if (typeof callback === 'function') { - const originalCallback = callback; - callback = function() { - const instance = getPublicRootInstance(root._internalRoot); - originalCallback.call(instance); - }; - } - // Update - if (parentComponent != null) { - root.legacy_renderSubtreeIntoContainer( - parentComponent, - children, - callback, - ); - } else { - root.render(children, callback); - } - } - return getPublicRootInstance(root._internalRoot); -} - -function createPortal( - children: ReactNodeList, - container: DOMContainer, - key: ?string = null, -) { - invariant( - isValidContainer(container), - 'Target container is not a DOM element.', - ); - // TODO: pass ReactDOM portal implementation as third argument - return createPortalImpl(children, container, null, key); -} - -const ReactDOM: Object = { - createPortal, - - findDOMNode( - componentOrElement: Element | ?React$Component, - ): null | Element | Text { - if (__DEV__) { - let owner = (ReactCurrentOwner.current: any); - if (owner !== null && owner.stateNode !== null) { - const warnedAboutRefsInRender = - owner.stateNode._warnedAboutRefsInRender; - warningWithoutStack( - warnedAboutRefsInRender, - '%s is accessing findDOMNode inside its render(). ' + - 'render() should be a pure function of props and state. It should ' + - 'never access something that requires stale data from the previous ' + - 'render, such as refs. Move this logic to componentDidMount and ' + - 'componentDidUpdate instead.', - getComponentName(owner.type) || 'A component', - ); - owner.stateNode._warnedAboutRefsInRender = true; - } - } - if (componentOrElement == null) { - return null; - } - if ((componentOrElement: any).nodeType === ELEMENT_NODE) { - return (componentOrElement: any); - } - if (__DEV__) { - return findHostInstanceWithWarning(componentOrElement, 'findDOMNode'); - } - return findHostInstance(componentOrElement); - }, - - hydrate(element: React$Node, container: DOMContainer, callback: ?Function) { - invariant( - isValidContainer(container), - 'Target container is not a DOM element.', - ); - if (__DEV__) { - warningWithoutStack( - !container._reactHasBeenPassedToCreateRootDEV, - 'You are calling ReactDOM.hydrate() on a container that was previously ' + - 'passed to ReactDOM.%s(). This is not supported. ' + - 'Did you mean to call createRoot(container, {hydrate: true}).render(element)?', - enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot', - ); - } - // TODO: throw or warn if we couldn't hydrate? - return legacyRenderSubtreeIntoContainer( - null, - element, - container, - true, - callback, - ); - }, - - render( - element: React$Element, - container: DOMContainer, - callback: ?Function, - ) { - invariant( - isValidContainer(container), - 'Target container is not a DOM element.', - ); - if (__DEV__) { - warningWithoutStack( - !container._reactHasBeenPassedToCreateRootDEV, - 'You are calling ReactDOM.render() on a container that was previously ' + - 'passed to ReactDOM.%s(). This is not supported. ' + - 'Did you mean to call root.render(element)?', - enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot', - ); - } - return legacyRenderSubtreeIntoContainer( - null, - element, - container, - false, - callback, - ); - }, - - unstable_renderSubtreeIntoContainer( - parentComponent: React$Component, - element: React$Element, - containerNode: DOMContainer, - callback: ?Function, - ) { - invariant( - isValidContainer(containerNode), - 'Target container is not a DOM element.', - ); - invariant( - parentComponent != null && hasInstance(parentComponent), - 'parentComponent must be a valid React Component', - ); - return legacyRenderSubtreeIntoContainer( - parentComponent, - element, - containerNode, - false, - callback, - ); - }, - - unmountComponentAtNode(container: DOMContainer) { - invariant( - isValidContainer(container), - 'unmountComponentAtNode(...): Target container is not a DOM element.', - ); - - if (__DEV__) { - warningWithoutStack( - !container._reactHasBeenPassedToCreateRootDEV, - 'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' + - 'passed to ReactDOM.%s(). This is not supported. Did you mean to call root.unmount()?', - enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot', - ); - } - - if (container._reactRootContainer) { - if (__DEV__) { - const rootEl = getReactRootElementInContainer(container); - const renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl); - warningWithoutStack( - !renderedByDifferentReact, - "unmountComponentAtNode(): The node you're attempting to unmount " + - 'was rendered by another copy of React.', - ); - } - - // Unmount should not be batched. - unbatchedUpdates(() => { - legacyRenderSubtreeIntoContainer(null, null, container, false, () => { - container._reactRootContainer = null; - }); - }); - // If you call unmountComponentAtNode twice in quick succession, you'll - // get `true` twice. That's probably fine? - return true; - } else { - if (__DEV__) { - const rootEl = getReactRootElementInContainer(container); - const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl)); - - // Check if the container itself is a React root node. - const isContainerReactRoot = - container.nodeType === ELEMENT_NODE && - isValidContainer(container.parentNode) && - !!container.parentNode._reactRootContainer; - - warningWithoutStack( - !hasNonRootReactChild, - "unmountComponentAtNode(): The node you're attempting to unmount " + - 'was rendered by React and is not a top-level container. %s', - isContainerReactRoot - ? 'You may have accidentally passed in a React root node instead ' + - 'of its container.' - : 'Instead, have the parent component update its state and ' + - 'rerender in order to remove this component.', - ); - } - - return false; - } - }, - - // Temporary alias since we already shipped React 16 RC with it. - // TODO: remove in React 17. - unstable_createPortal(...args) { - if (!didWarnAboutUnstableCreatePortal) { - didWarnAboutUnstableCreatePortal = true; - lowPriorityWarning( - false, - 'The ReactDOM.unstable_createPortal() alias has been deprecated, ' + - 'and will be removed in React 17+. Update your code to use ' + - 'ReactDOM.createPortal() instead. It has the exact same API, ' + - 'but without the "unstable_" prefix.', - ); - } - return createPortal(...args); - }, - - unstable_batchedUpdates: batchedUpdates, - - unstable_interactiveUpdates: interactiveUpdates, - - flushSync: flushSync, - - unstable_createRoot: createRoot, - unstable_flushControlled: flushControlled, - - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: { - // Keep in sync with ReactDOMUnstableNativeDependencies.js - // and ReactTestUtils.js. This is an array for better minification. - Events: [ - getInstanceFromNode, - getNodeFromInstance, - getFiberCurrentPropsFromNode, - EventPluginHubInjection.injectEventPluginsByName, - eventNameDispatchConfigs, - accumulateTwoPhaseDispatches, - accumulateDirectDispatches, - enqueueStateRestore, - restoreStateIfNeeded, - dispatchEvent, - runEventsInBatch, - ], - }, -}; - -type RootOptions = { - hydrate?: boolean, -}; - -function createRoot(container: DOMContainer, options?: RootOptions): ReactRoot { - const functionName = enableStableConcurrentModeAPIs - ? 'createRoot' - : 'unstable_createRoot'; - invariant( - isValidContainer(container), - '%s(...): Target container is not a DOM element.', - functionName, - ); - if (__DEV__) { - warningWithoutStack( - !container._reactRootContainer, - 'You are calling ReactDOM.%s() on a container that was previously ' + - 'passed to ReactDOM.render(). This is not supported.', - enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot', - ); - container._reactHasBeenPassedToCreateRootDEV = true; - } - const hydrate = options != null && options.hydrate === true; - return new ReactRoot(container, true, hydrate); -} - -if (enableStableConcurrentModeAPIs) { - ReactDOM.createRoot = createRoot; - ReactDOM.unstable_createRoot = undefined; -} - -const foundDevTools = injectIntoDevTools({ - findFiberByHostInstance: getClosestInstanceFromNode, - bundleType: __DEV__ ? 1 : 0, - version: ReactVersion, - rendererPackageName: 'react-dom', -}); - -if (__DEV__) { - if (!foundDevTools && canUseDOM && window.top === window.self) { - // If we're in Chrome or Firefox, provide a download link if not installed. - if ( - (navigator.userAgent.indexOf('Chrome') > -1 && - navigator.userAgent.indexOf('Edge') === -1) || - navigator.userAgent.indexOf('Firefox') > -1 - ) { - const protocol = window.location.protocol; - // Don't warn in exotic cases like chrome-extension://. - if (/^(https?|file):$/.test(protocol)) { - console.info( - '%cDownload the React DevTools ' + - 'for a better development experience: ' + - 'https://fb.me/react-devtools' + - (protocol === 'file:' - ? '\nYou might need to use a local HTTP server (instead of file://): ' + - 'https://fb.me/react-devtools-faq' - : ''), - 'font-weight:bold', - ); - } - } - } -} - -export default ReactDOM; diff --git a/packages/react-dom/src/client/ReactDOM.ts b/packages/react-dom/src/client/ReactDOM.ts new file mode 100644 index 0000000000000..b166d348506d4 --- /dev/null +++ b/packages/react-dom/src/client/ReactDOM.ts @@ -0,0 +1,908 @@ +/** + * Copyright (c) Facebook, Inc. and its 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 { ReactNodeList } from 'shared/ReactTypes'; +// TODO: This type is shared between the reconciler and ReactDOM, but will +// eventually be lifted out to the renderer. +import { +FiberRoot, +Batch as FiberRootBatch } from +'react-reconciler/src/ReactFiberRoot'; + +import '../shared/checkReact'; +import './ReactDOMClientInjection'; + +import { +computeUniqueAsyncExpiration, +findHostInstanceWithNoPortals, +updateContainerAtExpirationTime, +flushRoot, +createContainer, +updateContainer, +batchedUpdates, +unbatchedUpdates, +interactiveUpdates, +flushInteractiveUpdates, +flushSync, +flushControlled, +injectIntoDevTools, +getPublicRootInstance, +findHostInstance, +findHostInstanceWithWarning } from +'react-reconciler/inline.dom'; +import { createPortal as createPortalImpl } from 'shared/ReactPortal'; +import { canUseDOM } from 'shared/ExecutionEnvironment'; +import { setBatchingImplementation } from 'events/ReactGenericBatching'; +import { +setRestoreImplementation, +enqueueStateRestore, +restoreStateIfNeeded } from +'events/ReactControlledComponent'; +import { +injection as EventPluginHubInjection, +runEventsInBatch } from +'events/EventPluginHub'; +import { eventNameDispatchConfigs } from 'events/EventPluginRegistry'; +import { +accumulateTwoPhaseDispatches, +accumulateDirectDispatches } from +'events/EventPropagators'; +import { has as hasInstance } from 'shared/ReactInstanceMap'; +import ReactVersion from 'shared/ReactVersion'; +import ReactSharedInternals from 'shared/ReactSharedInternals'; +import getComponentName from 'shared/getComponentName'; +import invariant from 'shared/invariant'; +import lowPriorityWarning from 'shared/lowPriorityWarning'; +import warningWithoutStack from 'shared/warningWithoutStack'; +import { enableStableConcurrentModeAPIs } from 'shared/ReactFeatureFlags'; + +import { +getInstanceFromNode, +getNodeFromInstance, +getFiberCurrentPropsFromNode, +getClosestInstanceFromNode } from +'./ReactDOMComponentTree'; +import { restoreControlledState } from './ReactDOMComponent'; +import { dispatchEvent } from '../events/ReactDOMEventListener'; +import { +ELEMENT_NODE, +COMMENT_NODE, +DOCUMENT_NODE, +DOCUMENT_FRAGMENT_NODE } from +'../shared/HTMLNodeType'; +import { ROOT_ATTRIBUTE_NAME } from '../shared/DOMProperty'; + +const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; + +let topLevelUpdateWarnings; +let warnOnInvalidCallback; +let didWarnAboutUnstableCreatePortal = false; + +if (__DEV__) { + if ( + typeof Map !== 'function' || + // $FlowIssue Flow incorrectly thinks Map has no prototype + Map.prototype == null || + typeof Map.prototype.forEach !== 'function' || + typeof Set !== 'function' || + // $FlowIssue Flow incorrectly thinks Set has no prototype + Set.prototype == null || + typeof Set.prototype.clear !== 'function' || + typeof Set.prototype.forEach !== 'function') + { + warningWithoutStack( + false, + 'React depends on Map and Set built-in types. Make sure that you load a ' + + 'polyfill in older browsers. https://fb.me/react-polyfills'); + + } + + topLevelUpdateWarnings = (container: DOMContainer) => { + if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) { + const hostInstance = findHostInstanceWithNoPortals( + container._reactRootContainer._internalRoot.current); + + if (hostInstance) { + warningWithoutStack( + hostInstance.parentNode === container, + 'render(...): It looks like the React-rendered content of this ' + + 'container was removed without using React. This is not ' + + 'supported and will cause errors. Instead, call ' + + 'ReactDOM.unmountComponentAtNode to empty a container.'); + + } + } + + const isRootRenderedBySomeReact = !!container._reactRootContainer; + const rootEl = getReactRootElementInContainer(container); + const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl)); + + warningWithoutStack( + !hasNonRootReactChild || isRootRenderedBySomeReact, + 'render(...): Replacing React-rendered children with a new root ' + + 'component. If you intended to update the children of this node, ' + + 'you should instead have the existing children update their state ' + + 'and render the new components instead of calling ReactDOM.render.'); + + + warningWithoutStack( + container.nodeType !== ELEMENT_NODE || + !((container as any) as Element).tagName || + ((container as any) as Element).tagName.toUpperCase() !== 'BODY', + 'render(): Rendering components directly into document.body is ' + + 'discouraged, since its children are often manipulated by third-party ' + + 'scripts and browser extensions. This may lead to subtle ' + + 'reconciliation issues. Try rendering into a container element created ' + + 'for your app.'); + + }; + + warnOnInvalidCallback = function (callback: unknown, callerName: string) { + warningWithoutStack( + callback === null || typeof callback === 'function', + '%s(...): Expected the last optional `callback` argument to be a ' + + 'function. Instead received: %s.', + callerName, + callback); + + }; +} + +setRestoreImplementation(restoreControlledState); + +export type DOMContainer = +(Element & { + _reactRootContainer: Root | null | undefined; + _reactHasBeenPassedToCreateRootDEV: boolean | null | undefined;}) | ( + +Document & { + _reactRootContainer: Root | null | undefined; + _reactHasBeenPassedToCreateRootDEV: boolean | null | undefined;}); + + +type Batch = FiberRootBatch & { + render: (children: ReactNodeList) => Work; + then: (onComplete: () => unknown) => void; + commit: () => void; + + // The ReactRoot constructor is hoisted but the prototype methods are not. If + // we move ReactRoot to be above ReactBatch, the inverse error occurs. + // $FlowFixMe Hoisting issue. + _root: Root; + _hasChildren: boolean; + _children: ReactNodeList; + + _callbacks: Array<() => unknown> | null; + _didComplete: boolean;}; + + +type Root = { + render: (children: ReactNodeList, callback: () => unknown | null | undefined) => Work; + unmount: (callback: () => unknown | null | undefined) => Work; + legacy_renderSubtreeIntoContainer: (parentComponent: + React$Component | null | undefined, children: + ReactNodeList, callback: + () => unknown | null | undefined) => + Work; + createBatch: () => Batch; + + _internalRoot: FiberRoot;}; + + +function ReactBatch(root: ReactRoot) { + const expirationTime = computeUniqueAsyncExpiration(); + this._expirationTime = expirationTime; + this._root = root; + this._next = null; + this._callbacks = null; + this._didComplete = false; + this._hasChildren = false; + this._children = null; + this._defer = true; +} +ReactBatch.prototype.render = function (children: ReactNodeList) { + invariant( + this._defer, + 'batch.render: Cannot render a batch that already committed.'); + + this._hasChildren = true; + this._children = children; + const internalRoot = this._root._internalRoot; + const expirationTime = this._expirationTime; + const work = new ReactWork(); + updateContainerAtExpirationTime( + children, + internalRoot, + null, + expirationTime, + work._onCommit); + + return work; +}; +ReactBatch.prototype.then = function (onComplete: () => unknown) { + if (this._didComplete) { + onComplete(); + return; + } + let callbacks = this._callbacks; + if (callbacks === null) { + callbacks = this._callbacks = []; + } + callbacks.push(onComplete); +}; +ReactBatch.prototype.commit = function () { + const internalRoot = this._root._internalRoot; + let firstBatch = internalRoot.firstBatch; + invariant( + this._defer && firstBatch !== null, + 'batch.commit: Cannot commit a batch multiple times.'); + + + if (!this._hasChildren) { + // This batch is empty. Return. + this._next = null; + this._defer = false; + return; + } + + let expirationTime = this._expirationTime; + + // Ensure this is the first batch in the list. + if (firstBatch !== this) { + // This batch is not the earliest batch. We need to move it to the front. + // Update its expiration time to be the expiration time of the earliest + // batch, so that we can flush it without flushing the other batches. + if (this._hasChildren) { + expirationTime = this._expirationTime = firstBatch._expirationTime; + // Rendering this batch again ensures its children will be the final state + // when we flush (updates are processed in insertion order: last + // update wins). + // TODO: This forces a restart. Should we print a warning? + this.render(this._children); + } + + // Remove the batch from the list. + let previous = null; + let batch = firstBatch; + while (batch !== this) { + previous = batch; + batch = batch._next; + } + invariant( + previous !== null, + 'batch.commit: Cannot commit a batch multiple times.'); + + previous._next = batch._next; + + // Add it to the front. + this._next = firstBatch; + firstBatch = internalRoot.firstBatch = this; + } + + // Synchronously flush all the work up to this batch's expiration time. + this._defer = false; + flushRoot(internalRoot, expirationTime); + + // Pop the batch from the list. + const next = this._next; + this._next = null; + firstBatch = internalRoot.firstBatch = next; + + // Append the next earliest batch's children to the update queue. + if (firstBatch !== null && firstBatch._hasChildren) { + firstBatch.render(firstBatch._children); + } +}; +ReactBatch.prototype._onComplete = function () { + if (this._didComplete) { + return; + } + this._didComplete = true; + const callbacks = this._callbacks; + if (callbacks === null) { + return; + } + // TODO: Error handling. + for (let i = 0; i < callbacks.length; i++) { + const callback = callbacks[i]; + callback(); + } +}; + +type Work = { + then: (onCommit: () => unknown) => void; + _onCommit: () => void; + _callbacks: Array<() => unknown> | null; + _didCommit: boolean;}; + + +/** + * 在 this._onCommit 被调用时，执行 this.then 传入的所有 callback + * + */ +function ReactWork() { + this._callbacks = null; + this._didCommit = false; + // TODO: Avoid need to bind by replacing callbacks in the update queue with + // list of Work objects. + this._onCommit = this._onCommit.bind(this); +} +ReactWork.prototype.then = function (onCommit: () => unknown): undefined { + if (this._didCommit) { + onCommit(); + return; + } + let callbacks = this._callbacks; + if (callbacks === null) { + callbacks = this._callbacks = []; + } + callbacks.push(onCommit); +}; +ReactWork.prototype._onCommit = function (): undefined { + if (this._didCommit) { + return; + } + this._didCommit = true; + const callbacks = this._callbacks; + if (callbacks === null) { + return; + } + // TODO: Error handling. + for (let i = 0; i < callbacks.length; i++) { + const callback = callbacks[i]; + invariant( + typeof callback === 'function', + 'Invalid argument passed as callback. Expected a function. Instead ' + + 'received: %s', + callback); + + callback(); + } +}; + +function ReactRoot(container: +DOMContainer, isConcurrent: +boolean, hydrate: +boolean) +{ + const root = createContainer(container, isConcurrent, hydrate); + this._internalRoot = root; +} +ReactRoot.prototype.render = function ( +children: ReactNodeList, +callback: () => unknown | null | undefined) +: Work { + const root = this._internalRoot; + const work = new ReactWork(); + callback = callback === undefined ? null : callback; + if (__DEV__) { + warnOnInvalidCallback(callback, 'render'); + } + if (callback !== null) { + // callback 是 ReactDOM.render 的第三个参数 + work.then(callback); + } + updateContainer(children, root, null, work._onCommit); + return work; +}; +ReactRoot.prototype.unmount = function (callback: () => unknown | null | undefined): Work { + const root = this._internalRoot; + const work = new ReactWork(); + callback = callback === undefined ? null : callback; + if (__DEV__) { + warnOnInvalidCallback(callback, 'render'); + } + if (callback !== null) { + work.then(callback); + } + updateContainer(null, root, null, work._onCommit); + return work; +}; +ReactRoot.prototype.legacy_renderSubtreeIntoContainer = function ( +parentComponent: React$Component | null | undefined, +children: ReactNodeList, +callback: () => unknown | null | undefined) +: Work { + const root = this._internalRoot; + const work = new ReactWork(); + callback = callback === undefined ? null : callback; + if (__DEV__) { + warnOnInvalidCallback(callback, 'render'); + } + if (callback !== null) { + work.then(callback); + } + updateContainer(children, root, parentComponent, work._onCommit); + return work; +}; +ReactRoot.prototype.createBatch = function (): Batch { + const batch = new ReactBatch(this); + const expirationTime = batch._expirationTime; + + const internalRoot = this._internalRoot; + const firstBatch = internalRoot.firstBatch; + if (firstBatch === null) { + internalRoot.firstBatch = batch; + batch._next = null; + } else { + // Insert sorted by expiration time then insertion order + let insertAfter = null; + let insertBefore = firstBatch; + while ( + insertBefore !== null && + insertBefore._expirationTime >= expirationTime) + { + insertAfter = insertBefore; + insertBefore = insertBefore._next; + } + batch._next = insertBefore; + if (insertAfter !== null) { + insertAfter._next = batch; + } + } + + return batch; +}; + +/** + * True if the supplied DOM node is a valid node element. + * + * @param {?DOMElement} node The candidate DOM node. + * @return {boolean} True if the DOM is a valid DOM node. + * @internal + */ +function isValidContainer(node) { + return !!( + node && ( + node.nodeType === ELEMENT_NODE || + node.nodeType === DOCUMENT_NODE || + node.nodeType === DOCUMENT_FRAGMENT_NODE || + node.nodeType === COMMENT_NODE && + node.nodeValue === ' react-mount-point-unstable ')); + +} + +function getReactRootElementInContainer(container: any) { + if (!container) { + return null; + } + + if (container.nodeType === DOCUMENT_NODE) { + return container.documentElement; + } else { + return container.firstChild; + } +} + +function shouldHydrateDueToLegacyHeuristic(container) { + const rootElement = getReactRootElementInContainer(container); + return !!( + rootElement && + rootElement.nodeType === ELEMENT_NODE && + rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)); + +} + +setBatchingImplementation( +batchedUpdates, +interactiveUpdates, +flushInteractiveUpdates); + + +let warnedAboutHydrateAPI = false; + +function legacyCreateRootFromDOMContainer(container: +DOMContainer, forceHydrate: +boolean) +: Root { + const shouldHydrate = + forceHydrate || shouldHydrateDueToLegacyHeuristic(container); + // First clear any existing content. + if (!shouldHydrate) { + let warned = false; + let rootSibling; + while (rootSibling = container.lastChild) { + if (__DEV__) { + if ( + !warned && + rootSibling.nodeType === ELEMENT_NODE && + (rootSibling as any).hasAttribute(ROOT_ATTRIBUTE_NAME)) + { + warned = true; + warningWithoutStack( + false, + 'render(): Target node has markup rendered by React, but there ' + + 'are unrelated nodes as well. This is most commonly caused by ' + + 'white-space inserted around server-rendered markup.'); + + } + } + container.removeChild(rootSibling); + } + } + if (__DEV__) { + if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) { + warnedAboutHydrateAPI = true; + lowPriorityWarning( + false, + 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + + 'will stop working in React v17. Replace the ReactDOM.render() call ' + + 'with ReactDOM.hydrate() if you want React to attach to the server HTML.'); + + } + } + // Legacy roots are not async by default. + const isConcurrent = false; + return new ReactRoot(container, isConcurrent, shouldHydrate); +} + +/** + * + * + * @param {?React$Component} parentComponent + * @param {ReactNodeList} children + * @param {DOMContainer} container + * @param {boolean} forceHydrate + * @param {?Function} callback + * @returns + */ +function legacyRenderSubtreeIntoContainer(parentComponent: +React$Component | null | undefined, children: +ReactNodeList, container: +DOMContainer, forceHydrate: +boolean, callback: +Function | null | undefined) +{ + if (__DEV__) { + topLevelUpdateWarnings(container); + } + + // TODO: Without `any` type, Flow says "Property cannot be accessed on any + // member of intersection type." Whyyyyyy. + let root: Root = (container._reactRootContainer as any); + if (!root) { + // Initial mount + root = container._reactRootContainer = legacyCreateRootFromDOMContainer( + container, + forceHydrate); + + if (typeof callback === 'function') { + const originalCallback = callback; + callback = function () { + const instance = getPublicRootInstance(root._internalRoot); + originalCallback.call(instance); + }; + } + // Initial mount should not be batched. + unbatchedUpdates(() => { + if (parentComponent != null) { + root.legacy_renderSubtreeIntoContainer( + parentComponent, + children, + callback); + + } else { + root.render(children, callback); + } + }); + } else { + if (typeof callback === 'function') { + const originalCallback = callback; + callback = function () { + const instance = getPublicRootInstance(root._internalRoot); + originalCallback.call(instance); + }; + } + // Update + if (parentComponent != null) { + root.legacy_renderSubtreeIntoContainer( + parentComponent, + children, + callback); + + } else { + root.render(children, callback); + } + } + return getPublicRootInstance(root._internalRoot); +} + +function createPortal(children: +ReactNodeList, container: +DOMContainer, +key: string | null | undefined = null) +{ + invariant( + isValidContainer(container), + 'Target container is not a DOM element.'); + + // TODO: pass ReactDOM portal implementation as third argument + return createPortalImpl(children, container, null, key); +} + +const ReactDOM: Object = { + createPortal, + + findDOMNode( + componentOrElement: Element | (React$Component | null | undefined)) + : null | Element | Text { + if (__DEV__) { + let owner = (ReactCurrentOwner.current as any); + if (owner !== null && owner.stateNode !== null) { + const warnedAboutRefsInRender = + owner.stateNode._warnedAboutRefsInRender; + warningWithoutStack( + warnedAboutRefsInRender, + '%s is accessing findDOMNode inside its render(). ' + + 'render() should be a pure function of props and state. It should ' + + 'never access something that requires stale data from the previous ' + + 'render, such as refs. Move this logic to componentDidMount and ' + + 'componentDidUpdate instead.', + getComponentName(owner.type) || 'A component'); + + owner.stateNode._warnedAboutRefsInRender = true; + } + } + if (componentOrElement == null) { + return null; + } + if ((componentOrElement as any).nodeType === ELEMENT_NODE) { + return (componentOrElement as any); + } + if (__DEV__) { + return findHostInstanceWithWarning(componentOrElement, 'findDOMNode'); + } + return findHostInstance(componentOrElement); + }, + + hydrate(element: React$Node, container: DOMContainer, callback: Function | null | undefined) { + invariant( + isValidContainer(container), + 'Target container is not a DOM element.'); + + if (__DEV__) { + warningWithoutStack( + !container._reactHasBeenPassedToCreateRootDEV, + 'You are calling ReactDOM.hydrate() on a container that was previously ' + + 'passed to ReactDOM.%s(). This is not supported. ' + + 'Did you mean to call createRoot(container, {hydrate: true}).render(element)?', + enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot'); + + } + // TODO: throw or warn if we couldn't hydrate? + return legacyRenderSubtreeIntoContainer( + null, + element, + container, + true, + callback); + + }, + + render( + element: React$Element, + container: DOMContainer, + callback: Function | null | undefined) + { + invariant( + isValidContainer(container), + 'Target container is not a DOM element.'); + + if (__DEV__) { + warningWithoutStack( + !container._reactHasBeenPassedToCreateRootDEV, + 'You are calling ReactDOM.render() on a container that was previously ' + + 'passed to ReactDOM.%s(). This is not supported. ' + + 'Did you mean to call root.render(element)?', + enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot'); + + } + return legacyRenderSubtreeIntoContainer( + null, + element, + container, + false, + callback); + + }, + + unstable_renderSubtreeIntoContainer( + parentComponent: React$Component, + element: React$Element, + containerNode: DOMContainer, + callback: Function | null | undefined) + { + invariant( + isValidContainer(containerNode), + 'Target container is not a DOM element.'); + + invariant( + parentComponent != null && hasInstance(parentComponent), + 'parentComponent must be a valid React Component'); + + return legacyRenderSubtreeIntoContainer( + parentComponent, + element, + containerNode, + false, + callback); + + }, + + unmountComponentAtNode(container: DOMContainer) { + invariant( + isValidContainer(container), + 'unmountComponentAtNode(...): Target container is not a DOM element.'); + + + if (__DEV__) { + warningWithoutStack( + !container._reactHasBeenPassedToCreateRootDEV, + 'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' + + 'passed to ReactDOM.%s(). This is not supported. Did you mean to call root.unmount()?', + enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot'); + + } + + if (container._reactRootContainer) { + if (__DEV__) { + const rootEl = getReactRootElementInContainer(container); + const renderedByDifferentReact = rootEl && !getInstanceFromNode(rootEl); + warningWithoutStack( + !renderedByDifferentReact, + "unmountComponentAtNode(): The node you're attempting to unmount " + + 'was rendered by another copy of React.'); + + } + + // Unmount should not be batched. + unbatchedUpdates(() => { + legacyRenderSubtreeIntoContainer(null, null, container, false, () => { + container._reactRootContainer = null; + }); + }); + // If you call unmountComponentAtNode twice in quick succession, you'll + // get `true` twice. That's probably fine? + return true; + } else { + if (__DEV__) { + const rootEl = getReactRootElementInContainer(container); + const hasNonRootReactChild = !!(rootEl && getInstanceFromNode(rootEl)); + + // Check if the container itself is a React root node. + const isContainerReactRoot = + container.nodeType === ELEMENT_NODE && + isValidContainer(container.parentNode) && + !!container.parentNode._reactRootContainer; + + warningWithoutStack( + !hasNonRootReactChild, + "unmountComponentAtNode(): The node you're attempting to unmount " + + 'was rendered by React and is not a top-level container. %s', + isContainerReactRoot ? + 'You may have accidentally passed in a React root node instead ' + + 'of its container.' : + 'Instead, have the parent component update its state and ' + + 'rerender in order to remove this component.'); + + } + + return false; + } + }, + + // Temporary alias since we already shipped React 16 RC with it. + // TODO: remove in React 17. + unstable_createPortal(...args) { + if (!didWarnAboutUnstableCreatePortal) { + didWarnAboutUnstableCreatePortal = true; + lowPriorityWarning( + false, + 'The ReactDOM.unstable_createPortal() alias has been deprecated, ' + + 'and will be removed in React 17+. Update your code to use ' + + 'ReactDOM.createPortal() instead. It has the exact same API, ' + + 'but without the "unstable_" prefix.'); + + } + return createPortal(...args); + }, + + unstable_batchedUpdates: batchedUpdates, + + unstable_interactiveUpdates: interactiveUpdates, + + flushSync: flushSync, + + unstable_createRoot: createRoot, + unstable_flushControlled: flushControlled, + + __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: { + // Keep in sync with ReactDOMUnstableNativeDependencies.js + // and ReactTestUtils.js. This is an array for better minification. + Events: [ + getInstanceFromNode, + getNodeFromInstance, + getFiberCurrentPropsFromNode, + EventPluginHubInjection.injectEventPluginsByName, + eventNameDispatchConfigs, + accumulateTwoPhaseDispatches, + accumulateDirectDispatches, + enqueueStateRestore, + restoreStateIfNeeded, + dispatchEvent, + runEventsInBatch] } }; + + + + +type RootOptions = { + hydrate?: boolean;}; + + +function createRoot(container: DOMContainer, options: RootOptions): ReactRoot { + const functionName = enableStableConcurrentModeAPIs ? + 'createRoot' : + 'unstable_createRoot'; + invariant( + isValidContainer(container), + '%s(...): Target container is not a DOM element.', + functionName); + + if (__DEV__) { + warningWithoutStack( + !container._reactRootContainer, + 'You are calling ReactDOM.%s() on a container that was previously ' + + 'passed to ReactDOM.render(). This is not supported.', + enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot'); + + container._reactHasBeenPassedToCreateRootDEV = true; + } + const hydrate = options != null && options.hydrate === true; + return new ReactRoot(container, true, hydrate); +} + +if (enableStableConcurrentModeAPIs) { + ReactDOM.createRoot = createRoot; + ReactDOM.unstable_createRoot = undefined; +} + +const foundDevTools = injectIntoDevTools({ + findFiberByHostInstance: getClosestInstanceFromNode, + bundleType: __DEV__ ? 1 : 0, + version: ReactVersion, + rendererPackageName: 'react-dom' }); + + +if (__DEV__) { + if (!foundDevTools && canUseDOM && window.top === window.self) { + // If we're in Chrome or Firefox, provide a download link if not installed. + if ( + navigator.userAgent.indexOf('Chrome') > -1 && + navigator.userAgent.indexOf('Edge') === -1 || + navigator.userAgent.indexOf('Firefox') > -1) + { + const protocol = window.location.protocol; + // Don't warn in exotic cases like chrome-extension://. + if (/^(https?|file):$/.test(protocol)) { + console.info( + '%cDownload the React DevTools ' + + 'for a better development experience: ' + + 'https://fb.me/react-devtools' + ( + protocol === 'file:' ? + '\nYou might need to use a local HTTP server (instead of file://): ' + + 'https://fb.me/react-devtools-faq' : + ''), + 'font-weight:bold'); + + } + } + } +} + +export default ReactDOM; diff --git a/packages/react-dom/src/client/ReactDOMClientInjection.js b/packages/react-dom/src/client/ReactDOMClientInjection.ts similarity index 55% rename from packages/react-dom/src/client/ReactDOMClientInjection.js rename to packages/react-dom/src/client/ReactDOMClientInjection.ts index c2c6229e05656..c08fe362b98c8 100644 --- a/packages/react-dom/src/client/ReactDOMClientInjection.js +++ b/packages/react-dom/src/client/ReactDOMClientInjection.ts @@ -5,14 +5,14 @@ * LICENSE file in the root directory of this source tree. */ -import {injection as EventPluginHubInjection} from 'events/EventPluginHub'; -import {setComponentTree} from 'events/EventPluginUtils'; +import { injection as EventPluginHubInjection } from 'events/EventPluginHub'; +import { setComponentTree } from 'events/EventPluginUtils'; import { - getFiberCurrentPropsFromNode, - getInstanceFromNode, - getNodeFromInstance, -} from './ReactDOMComponentTree'; +getFiberCurrentPropsFromNode, +getInstanceFromNode, +getNodeFromInstance } from +'./ReactDOMComponentTree'; import BeforeInputEventPlugin from '../events/BeforeInputEventPlugin'; import ChangeEventPlugin from '../events/ChangeEventPlugin'; import DOMEventPluginOrder from '../events/DOMEventPluginOrder'; @@ -21,23 +21,22 @@ import SelectEventPlugin from '../events/SelectEventPlugin'; import SimpleEventPlugin from '../events/SimpleEventPlugin'; /** - * Inject modules for resolving DOM hierarchy and plugin ordering. - */ + * Inject modules for resolving DOM hierarchy and plugin ordering. + */ EventPluginHubInjection.injectEventPluginOrder(DOMEventPluginOrder); setComponentTree( - getFiberCurrentPropsFromNode, - getInstanceFromNode, - getNodeFromInstance, -); +getFiberCurrentPropsFromNode, +getInstanceFromNode, +getNodeFromInstance); + /** - * Some important event plugins included by default (without having to require - * them). - */ + * Some important event plugins included by default (without having to require + * them). + */ EventPluginHubInjection.injectEventPluginsByName({ SimpleEventPlugin: SimpleEventPlugin, EnterLeaveEventPlugin: EnterLeaveEventPlugin, ChangeEventPlugin: ChangeEventPlugin, SelectEventPlugin: SelectEventPlugin, - BeforeInputEventPlugin: BeforeInputEventPlugin, -}); + BeforeInputEventPlugin: BeforeInputEventPlugin }); diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.ts similarity index 75% rename from packages/react-dom/src/client/ReactDOMComponent.js rename to packages/react-dom/src/client/ReactDOMComponent.ts index fa8ee0a0acfb0..9d2e0a1fe36a1 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.ts @@ -8,75 +8,75 @@ */ // TODO: direct imports like some-package/src/* are bad. Fix me. -import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber'; -import {registrationNameModules} from 'events/EventPluginRegistry'; +import { getCurrentFiberOwnerNameInDevOrNull } from 'react-reconciler/src/ReactCurrentFiber'; +import { registrationNameModules } from 'events/EventPluginRegistry'; import warning from 'shared/warning'; -import {canUseDOM} from 'shared/ExecutionEnvironment'; +import { canUseDOM } from 'shared/ExecutionEnvironment'; import warningWithoutStack from 'shared/warningWithoutStack'; import { - getValueForAttribute, - getValueForProperty, - setValueForProperty, -} from './DOMPropertyOperations'; +getValueForAttribute, +getValueForProperty, +setValueForProperty } from +'./DOMPropertyOperations'; import { - initWrapperState as ReactDOMInputInitWrapperState, - getHostProps as ReactDOMInputGetHostProps, - postMountWrapper as ReactDOMInputPostMountWrapper, - updateChecked as ReactDOMInputUpdateChecked, - updateWrapper as ReactDOMInputUpdateWrapper, - restoreControlledState as ReactDOMInputRestoreControlledState, -} from './ReactDOMInput'; +initWrapperState as ReactDOMInputInitWrapperState, +getHostProps as ReactDOMInputGetHostProps, +postMountWrapper as ReactDOMInputPostMountWrapper, +updateChecked as ReactDOMInputUpdateChecked, +updateWrapper as ReactDOMInputUpdateWrapper, +restoreControlledState as ReactDOMInputRestoreControlledState } from +'./ReactDOMInput'; import { - getHostProps as ReactDOMOptionGetHostProps, - postMountWrapper as ReactDOMOptionPostMountWrapper, - validateProps as ReactDOMOptionValidateProps, -} from './ReactDOMOption'; +getHostProps as ReactDOMOptionGetHostProps, +postMountWrapper as ReactDOMOptionPostMountWrapper, +validateProps as ReactDOMOptionValidateProps } from +'./ReactDOMOption'; import { - initWrapperState as ReactDOMSelectInitWrapperState, - getHostProps as ReactDOMSelectGetHostProps, - postMountWrapper as ReactDOMSelectPostMountWrapper, - restoreControlledState as ReactDOMSelectRestoreControlledState, - postUpdateWrapper as ReactDOMSelectPostUpdateWrapper, -} from './ReactDOMSelect'; +initWrapperState as ReactDOMSelectInitWrapperState, +getHostProps as ReactDOMSelectGetHostProps, +postMountWrapper as ReactDOMSelectPostMountWrapper, +restoreControlledState as ReactDOMSelectRestoreControlledState, +postUpdateWrapper as ReactDOMSelectPostUpdateWrapper } from +'./ReactDOMSelect'; import { - initWrapperState as ReactDOMTextareaInitWrapperState, - getHostProps as ReactDOMTextareaGetHostProps, - postMountWrapper as ReactDOMTextareaPostMountWrapper, - updateWrapper as ReactDOMTextareaUpdateWrapper, - restoreControlledState as ReactDOMTextareaRestoreControlledState, -} from './ReactDOMTextarea'; -import {track} from './inputValueTracking'; +initWrapperState as ReactDOMTextareaInitWrapperState, +getHostProps as ReactDOMTextareaGetHostProps, +postMountWrapper as ReactDOMTextareaPostMountWrapper, +updateWrapper as ReactDOMTextareaUpdateWrapper, +restoreControlledState as ReactDOMTextareaRestoreControlledState } from +'./ReactDOMTextarea'; +import { track } from './inputValueTracking'; import setInnerHTML from './setInnerHTML'; import setTextContent from './setTextContent'; import { - TOP_ERROR, - TOP_INVALID, - TOP_LOAD, - TOP_RESET, - TOP_SUBMIT, - TOP_TOGGLE, -} from '../events/DOMTopLevelEventTypes'; -import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter'; -import {mediaEventTypes} from '../events/DOMTopLevelEventTypes'; +TOP_ERROR, +TOP_INVALID, +TOP_LOAD, +TOP_RESET, +TOP_SUBMIT, +TOP_TOGGLE } from +'../events/DOMTopLevelEventTypes'; +import { listenTo, trapBubbledEvent } from '../events/ReactBrowserEventEmitter'; +import { mediaEventTypes } from '../events/DOMTopLevelEventTypes'; import { - createDangerousStringForStyles, - setValueForStyles, - validateShorthandPropertyCollisionInDev, -} from '../shared/CSSPropertyOperations'; -import {Namespaces, getIntrinsicNamespace} from '../shared/DOMNamespaces'; +createDangerousStringForStyles, +setValueForStyles, +validateShorthandPropertyCollisionInDev } from +'../shared/CSSPropertyOperations'; +import { Namespaces, getIntrinsicNamespace } from '../shared/DOMNamespaces'; import { - getPropertyInfo, - shouldIgnoreAttribute, - shouldRemoveAttribute, -} from '../shared/DOMProperty'; +getPropertyInfo, +shouldIgnoreAttribute, +shouldRemoveAttribute } from +'../shared/DOMProperty'; import assertValidProps from '../shared/assertValidProps'; -import {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE} from '../shared/HTMLNodeType'; +import { DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE } from '../shared/HTMLNodeType'; import isCustomComponent from '../shared/isCustomComponent'; import possibleStandardNames from '../shared/possibleStandardNames'; -import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook'; -import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook'; -import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook'; +import { validateProperties as validateARIAProperties } from '../shared/ReactDOMInvalidARIAHook'; +import { validateProperties as validateInputProperties } from '../shared/ReactDOMNullInputValuePropHook'; +import { validateProperties as validateUnknownProperties } from '../shared/ReactDOMUnknownPropertyHook'; let didWarnInvalidHydration = false; let didWarnShadyDOM = false; @@ -89,7 +89,7 @@ const CHILDREN = 'children'; const STYLE = 'style'; const HTML = '__html'; -const {html: HTML_NAMESPACE} = Namespaces; +const { html: HTML_NAMESPACE } = Namespaces; let warnedUnknownTags; let suppressHydrationWarning; @@ -118,13 +118,13 @@ if (__DEV__) { // This tag is not present in non Electron environments such as JSDom which // is often used for testing purposes. // @see https://electronjs.org/docs/api/webview-tag - webview: true, - }; + webview: true }; + - validatePropertiesInDevelopment = function(type, props) { + validatePropertiesInDevelopment = function (type, props) { validateARIAProperties(type, props); validateInputProperties(type, props); - validateUnknownProperties(type, props, /* canUseEventSystem */ true); + validateUnknownProperties(type, props, /* canUseEventSystem */true); }; // IE 11 parses & normalizes the style attribute as opposed to other @@ -145,18 +145,18 @@ if (__DEV__) { const NORMALIZE_NEWLINES_REGEX = /\r\n?/g; const NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g; - normalizeMarkupForTextOrAttribute = function(markup: mixed): string { + normalizeMarkupForTextOrAttribute = function (markup: unknown): string { const markupString = - typeof markup === 'string' ? markup : '' + (markup: any); - return markupString - .replace(NORMALIZE_NEWLINES_REGEX, '\n') - .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ''); + typeof markup === 'string' ? markup : '' + (markup as any); + return markupString. + replace(NORMALIZE_NEWLINES_REGEX, '\n'). + replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, ''); }; - warnForTextDifference = function( - serverText: string, - clientText: string | number, - ) { + warnForTextDifference = function ( + serverText: string, + clientText: string | number) + { if (didWarnInvalidHydration) { return; } @@ -167,87 +167,87 @@ if (__DEV__) { } didWarnInvalidHydration = true; warningWithoutStack( - false, - 'Text content did not match. Server: "%s" Client: "%s"', - normalizedServerText, - normalizedClientText, - ); + false, + 'Text content did not match. Server: "%s" Client: "%s"', + normalizedServerText, + normalizedClientText); + }; - warnForPropDifference = function( - propName: string, - serverValue: mixed, - clientValue: mixed, - ) { + warnForPropDifference = function ( + propName: string, + serverValue: unknown, + clientValue: unknown) + { if (didWarnInvalidHydration) { return; } const normalizedClientValue = normalizeMarkupForTextOrAttribute( - clientValue, - ); + clientValue); + const normalizedServerValue = normalizeMarkupForTextOrAttribute( - serverValue, - ); + serverValue); + if (normalizedServerValue === normalizedClientValue) { return; } didWarnInvalidHydration = true; warningWithoutStack( - false, - 'Prop `%s` did not match. Server: %s Client: %s', - propName, - JSON.stringify(normalizedServerValue), - JSON.stringify(normalizedClientValue), - ); + false, + 'Prop `%s` did not match. Server: %s Client: %s', + propName, + JSON.stringify(normalizedServerValue), + JSON.stringify(normalizedClientValue)); + }; - warnForExtraAttributes = function(attributeNames: Set) { + warnForExtraAttributes = function (attributeNames: Set) { if (didWarnInvalidHydration) { return; } didWarnInvalidHydration = true; const names = []; - attributeNames.forEach(function(name) { + attributeNames.forEach(function (name) { names.push(name); }); warningWithoutStack(false, 'Extra attributes from the server: %s', names); }; - warnForInvalidEventListener = function(registrationName, listener) { + warnForInvalidEventListener = function (registrationName, listener) { if (listener === false) { warning( - false, - 'Expected `%s` listener to be a function, instead got `false`.\n\n' + - 'If you used to conditionally omit it with %s={condition && value}, ' + - 'pass %s={condition ? value : undefined} instead.', - registrationName, - registrationName, - registrationName, - ); + false, + 'Expected `%s` listener to be a function, instead got `false`.\n\n' + + 'If you used to conditionally omit it with %s={condition && value}, ' + + 'pass %s={condition ? value : undefined} instead.', + registrationName, + registrationName, + registrationName); + } else { warning( - false, - 'Expected `%s` listener to be a function, instead got a value of `%s` type.', - registrationName, - typeof listener, - ); + false, + 'Expected `%s` listener to be a function, instead got a value of `%s` type.', + registrationName, + 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) { + normalizeHTML = function (parent: Element, html: string) { // We could have created a separate document here to avoid // re-initializing custom elements if they exist. But this breaks // how