{"commit":{"authoredAt":"2019-07-19T22:20:28+01:00","subject":"Adds experimental fundamental interface (#16049)","authorEmail":"trueadm@users.noreply.github.com","authorName":"Dominic Gannaway","revision":"2c4d61e1022ae383dd11fe237f6df8451e6f0310","shortRevision":"2c4d61e102"},"body":"","patch":"diff --git a\/package.json b\/package.json\nindex 85411e430e..13b23b070a 100644\n--- a\/package.json\n+++ b\/package.json\n@@ -104,6 +104,7 @@\n \"debug-test\": \"cross-env NODE_ENV=development node --inspect-brk node_modules\/.bin\/jest --config .\/scripts\/jest\/config.source.js --runInBand\",\n \"test\": \"cross-env NODE_ENV=development jest --config .\/scripts\/jest\/config.source.js\",\n \"test-persistent\": \"cross-env NODE_ENV=development jest --config .\/scripts\/jest\/config.source-persistent.js\",\n+ \"debug-test-persistent\": \"cross-env NODE_ENV=development node --inspect-brk node_modules\/.bin\/jest --config .\/scripts\/jest\/config.source-persistent.js --runInBand\",\n \"test-prod\": \"cross-env NODE_ENV=production jest --config .\/scripts\/jest\/config.source.js\",\n \"test-prod-build\": \"yarn test-build-prod\",\n \"test-build\": \"cross-env NODE_ENV=development jest --config .\/scripts\/jest\/config.build.js\",\ndiff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex 58580f1f5c..11df9690f7 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -444,3 +444,23 @@ export function unmountEventComponent(\n ): void {\n throw new Error('Not yet implemented.');\n }\n+\n+export function getFundamentalComponentInstance(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function mountFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function shouldUpdateFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function updateFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function unmountFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex f76d77cb0a..901b2413b9 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -45,6 +45,7 @@ import type {DOMContainer} from '.\/ReactDOM';\n import type {\n ReactDOMEventResponder,\n ReactDOMEventComponentInstance,\n+ ReactDOMFundamentalComponentInstance,\n } from 'shared\/ReactDOMTypes';\n import {\n addRootEventTypesForComponentInstance,\n@@ -103,6 +104,7 @@ export type NoTimeout = -1;\n import {\n enableSuspenseServerRenderer,\n enableFlareAPI,\n+ enableFundamentalAPI,\n } from 'shared\/ReactFeatureFlags';\n import warning from 'shared\/warning';\n \n@@ -882,3 +884,65 @@ export function unmountEventComponent(\n unmountEventResponder(eventComponentInstance);\n }\n }\n+\n+export function getFundamentalComponentInstance(\n+ fundamentalInstance: ReactDOMFundamentalComponentInstance,\n+): Instance {\n+ if (enableFundamentalAPI) {\n+ const {currentFiber, impl, props, state} = fundamentalInstance;\n+ const instance = impl.getInstance(null, props, state);\n+ precacheFiberNode(currentFiber, instance);\n+ return instance;\n+ }\n+ \/\/ Because of the flag above, this gets around the Flow error;\n+ return (null: any);\n+}\n+\n+export function mountFundamentalComponent(\n+ fundamentalInstance: ReactDOMFundamentalComponentInstance,\n+): void {\n+ if (enableFundamentalAPI) {\n+ const {impl, instance, props, state} = fundamentalInstance;\n+ const onMount = impl.onMount;\n+ if (onMount !== undefined) {\n+ onMount(null, instance, props, state);\n+ }\n+ }\n+}\n+\n+export function shouldUpdateFundamentalComponent(\n+ fundamentalInstance: ReactDOMFundamentalComponentInstance,\n+): boolean {\n+ if (enableFundamentalAPI) {\n+ const {impl, prevProps, props, state} = fundamentalInstance;\n+ const shouldUpdate = impl.shouldUpdate;\n+ if (shouldUpdate !== undefined) {\n+ return shouldUpdate(null, prevProps, props, state);\n+ }\n+ }\n+ return true;\n+}\n+\n+export function updateFundamentalComponent(\n+ fundamentalInstance: ReactDOMFundamentalComponentInstance,\n+): void {\n+ if (enableFundamentalAPI) {\n+ const {impl, instance, prevProps, props, state} = fundamentalInstance;\n+ const onUpdate = impl.onUpdate;\n+ if (onUpdate !== undefined) {\n+ onUpdate(null, instance, prevProps, props, state);\n+ }\n+ }\n+}\n+\n+export function unmountFundamentalComponent(\n+ fundamentalInstance: ReactDOMFundamentalComponentInstance,\n+): void {\n+ if (enableFundamentalAPI) {\n+ const {impl, instance, props, state} = fundamentalInstance;\n+ const onUnmount = impl.onUnmount;\n+ if (onUnmount !== undefined) {\n+ onUnmount(null, instance, props, state);\n+ }\n+ }\n+}\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex 34c95ec25c..99dfaa5bd1 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -23,6 +23,7 @@ import {\n warnAboutDeprecatedLifecycles,\n enableSuspenseServerRenderer,\n enableFlareAPI,\n+ enableFundamentalAPI,\n } from 'shared\/ReactFeatureFlags';\n \n import {\n@@ -39,6 +40,7 @@ import {\n REACT_LAZY_TYPE,\n REACT_MEMO_TYPE,\n REACT_EVENT_COMPONENT_TYPE,\n+ REACT_FUNDAMENTAL_TYPE,\n } from 'shared\/ReactSymbols';\n \n import {\n@@ -1190,6 +1192,43 @@ class ReactDOMServerRenderer {\n );\n }\n \/\/ eslint-disable-next-line-no-fallthrough\n+ case REACT_FUNDAMENTAL_TYPE: {\n+ if (enableFundamentalAPI) {\n+ const fundamentalImpl = elementType.impl;\n+ const open = fundamentalImpl.getServerSideString(\n+ null,\n+ nextElement.props,\n+ );\n+ const getServerSideStringClose =\n+ fundamentalImpl.getServerSideStringClose;\n+ const close =\n+ getServerSideStringClose !== undefined\n+ ? getServerSideStringClose(null, nextElement.props)\n+ : '';\n+ const nextChildren =\n+ fundamentalImpl.reconcileChildren !== false\n+ ? toArray(((nextChild: any): ReactElement).props.children)\n+ : [];\n+ const frame: Frame = {\n+ type: null,\n+ domNamespace: parentNamespace,\n+ children: nextChildren,\n+ childIndex: 0,\n+ context: context,\n+ footer: close,\n+ };\n+ if (__DEV__) {\n+ ((frame: any): FrameDev).debugElementStack = [];\n+ }\n+ this.stack.push(frame);\n+ return open;\n+ }\n+ invariant(\n+ false,\n+ 'ReactDOMServer does not yet support the fundamental API.',\n+ );\n+ }\n+ \/\/ eslint-disable-next-line-no-fallthrough\n case REACT_LAZY_TYPE:\n invariant(\n false,\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex 49a26bc870..dc2572ff6d 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -472,3 +472,27 @@ export function unmountEventComponent(\n unmountEventResponder(eventComponentInstance);\n }\n }\n+\n+export function getFundamentalComponentInstance(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function mountFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function shouldUpdateFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function updateFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function unmountFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function cloneFundamentalInstance(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex fd8ba518ad..1dd7a3afac 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -511,3 +511,23 @@ export function unmountEventComponent(\n ): void {\n throw new Error('Not yet implemented.');\n }\n+\n+export function getFundamentalComponentInstance(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function mountFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function shouldUpdateFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function updateFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\n+\n+export function unmountFundamentalComponent(fundamentalInstance) {\n+ throw new Error('Not yet implemented.');\n+}\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 5033283025..46e3fd3183 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -407,6 +407,57 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n unmountEventComponent(): void {\n \/\/ NO-OP\n },\n+\n+ getFundamentalComponentInstance(fundamentalInstance): Instance {\n+ const {impl, props, state} = fundamentalInstance;\n+ return impl.getInstance(null, props, state);\n+ },\n+\n+ mountFundamentalComponent(fundamentalInstance): void {\n+ const {impl, instance, props, state} = fundamentalInstance;\n+ const onMount = impl.onUpdate;\n+ if (onMount !== undefined) {\n+ onMount(null, instance, props, state);\n+ }\n+ },\n+\n+ shouldUpdateFundamentalComponent(fundamentalInstance): boolean {\n+ const {impl, instance, prevProps, props, state} = fundamentalInstance;\n+ const shouldUpdate = impl.shouldUpdate;\n+ if (shouldUpdate !== undefined) {\n+ return shouldUpdate(null, instance, prevProps, props, state);\n+ }\n+ return true;\n+ },\n+\n+ updateFundamentalComponent(fundamentalInstance): void {\n+ const {impl, instance, prevProps, props, state} = fundamentalInstance;\n+ const onUpdate = impl.onUpdate;\n+ if (onUpdate !== undefined) {\n+ onUpdate(null, instance, prevProps, props, state);\n+ }\n+ },\n+\n+ unmountFundamentalComponent(fundamentalInstance): void {\n+ const {impl, instance, props, state} = fundamentalInstance;\n+ const onUnmount = impl.onUnmount;\n+ if (onUnmount !== undefined) {\n+ onUnmount(null, instance, props, state);\n+ }\n+ },\n+\n+ cloneFundamentalInstance(fundamentalInstance): Instance {\n+ const instance = fundamentalInstance.instance;\n+ return {\n+ children: [],\n+ text: instance.text,\n+ type: instance.type,\n+ prop: instance.prop,\n+ id: instance.id,\n+ context: instance.context,\n+ hidden: instance.hidden,\n+ };\n+ },\n };\n \n const hostConfig = useMutation\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.js b\/packages\/react-reconciler\/src\/ReactFiber.js\nindex 73a3c4c179..13c452fb52 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.js\n@@ -13,6 +13,7 @@ import type {\n ReactPortal,\n RefObject,\n ReactEventComponent,\n+ ReactFundamentalComponent,\n } from 'shared\/ReactTypes';\n import type {RootTag} from 'shared\/ReactRootTags';\n import type {WorkTag} from 'shared\/ReactWorkTags';\n@@ -26,7 +27,11 @@ import type {ReactEventComponentInstance} from 'shared\/ReactTypes';\n \n import invariant from 'shared\/invariant';\n import warningWithoutStack from 'shared\/warningWithoutStack';\n-import {enableProfilerTimer, enableFlareAPI} from 'shared\/ReactFeatureFlags';\n+import {\n+ enableProfilerTimer,\n+ enableFlareAPI,\n+ enableFundamentalAPI,\n+} from 'shared\/ReactFeatureFlags';\n import {NoEffect, Placement} from 'shared\/ReactSideEffectTags';\n import {ConcurrentRoot, BatchedRoot} from 'shared\/ReactRootTags';\n import {\n@@ -49,6 +54,7 @@ import {\n SimpleMemoComponent,\n LazyComponent,\n EventComponent,\n+ FundamentalComponent,\n } from 'shared\/ReactWorkTags';\n import getComponentName from 'shared\/getComponentName';\n \n@@ -79,6 +85,7 @@ import {\n REACT_MEMO_TYPE,\n REACT_LAZY_TYPE,\n REACT_EVENT_COMPONENT_TYPE,\n+ REACT_FUNDAMENTAL_TYPE,\n } from 'shared\/ReactSymbols';\n \n let hasBadMapPolyfill;\n@@ -663,6 +670,17 @@ export function createFiberFromTypeAndProps(\n );\n }\n break;\n+ case REACT_FUNDAMENTAL_TYPE:\n+ if (enableFundamentalAPI) {\n+ return createFiberFromFundamental(\n+ type,\n+ pendingProps,\n+ mode,\n+ expirationTime,\n+ key,\n+ );\n+ }\n+ break;\n }\n }\n let info = '';\n@@ -742,7 +760,7 @@ export function createFiberFromFragment(\n }\n \n export function createFiberFromEventComponent(\n- eventComponent: ReactEventComponent,\n+ eventComponent: ReactEventComponent,\n pendingProps: any,\n mode: TypeOfMode,\n expirationTime: ExpirationTime,\n@@ -755,6 +773,20 @@ export function createFiberFromEventComponent(\n return fiber;\n }\n \n+export function createFiberFromFundamental(\n+ fundamentalComponent: ReactFundamentalComponent,\n+ pendingProps: any,\n+ mode: TypeOfMode,\n+ expirationTime: ExpirationTime,\n+ key: null | string,\n+): Fiber {\n+ const fiber = createFiber(FundamentalComponent, pendingProps, key, mode);\n+ fiber.elementType = fundamentalComponent;\n+ fiber.type = fundamentalComponent;\n+ fiber.expirationTime = expirationTime;\n+ return fiber;\n+}\n+\n function createFiberFromProfiler(\n pendingProps: any,\n mode: TypeOfMode,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\nindex 3c62caf099..df2519a248 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.js\n@@ -42,6 +42,7 @@ import {\n LazyComponent,\n IncompleteClassComponent,\n EventComponent,\n+ FundamentalComponent,\n } from 'shared\/ReactWorkTags';\n import {\n NoEffect,\n@@ -61,6 +62,7 @@ import {\n enableSchedulerTracing,\n enableSuspenseServerRenderer,\n enableFlareAPI,\n+ enableFundamentalAPI,\n } from 'shared\/ReactFeatureFlags';\n import invariant from 'shared\/invariant';\n import shallowEqual from 'shared\/shallowEqual';\n@@ -2479,7 +2481,7 @@ function updateContextConsumer(\n \n function updateEventComponent(current, workInProgress, renderExpirationTime) {\n const nextProps = workInProgress.pendingProps;\n- let nextChildren = nextProps.children;\n+ const nextChildren = nextProps.children;\n \n reconcileChildren(\n current,\n@@ -2491,6 +2493,27 @@ function updateEventComponent(current, workInProgress, renderExpirationTime) {\n return workInProgress.child;\n }\n \n+function updateFundamentalComponent(\n+ current,\n+ workInProgress,\n+ renderExpirationTime,\n+) {\n+ const fundamentalImpl = workInProgress.type.impl;\n+ if (fundamentalImpl.reconcileChildren === false) {\n+ return null;\n+ }\n+ const nextProps = workInProgress.pendingProps;\n+ const nextChildren = nextProps.children;\n+\n+ reconcileChildren(\n+ current,\n+ workInProgress,\n+ nextChildren,\n+ renderExpirationTime,\n+ );\n+ return workInProgress.child;\n+}\n+\n export function markWorkInProgressReceivedUpdate() {\n didReceiveUpdate = true;\n }\n@@ -2980,6 +3003,16 @@ function beginWork(\n }\n break;\n }\n+ case FundamentalComponent: {\n+ if (enableFundamentalAPI) {\n+ return updateFundamentalComponent(\n+ current,\n+ workInProgress,\n+ renderExpirationTime,\n+ );\n+ }\n+ break;\n+ }\n }\n invariant(\n false,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\nindex 576ac65f27..bf5591af1b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n@@ -29,6 +29,7 @@ import {\n enableProfilerTimer,\n enableSuspenseServerRenderer,\n enableFlareAPI,\n+ enableFundamentalAPI,\n } from 'shared\/ReactFeatureFlags';\n import {\n FunctionComponent,\n@@ -46,6 +47,7 @@ import {\n SimpleMemoComponent,\n EventComponent,\n SuspenseListComponent,\n+ FundamentalComponent,\n } from 'shared\/ReactWorkTags';\n import {\n invokeGuardedCallback,\n@@ -94,6 +96,8 @@ import {\n unhideTextInstance,\n unmountEventComponent,\n mountEventComponent,\n+ unmountFundamentalComponent,\n+ updateFundamentalComponent,\n } from '.\/ReactFiberHostConfig';\n import {\n captureCommitPhaseError,\n@@ -590,6 +594,7 @@ function commitLifeCycles(\n case SuspenseComponent:\n case SuspenseListComponent:\n case IncompleteClassComponent:\n+ case FundamentalComponent:\n return;\n case EventComponent: {\n if (enableFlareAPI) {\n@@ -757,6 +762,16 @@ function commitUnmount(current: Fiber): void {\n unmountEventComponent(eventComponentInstance);\n current.stateNode = null;\n }\n+ break;\n+ }\n+ case FundamentalComponent: {\n+ if (enableFundamentalAPI) {\n+ const fundamentalInstance = current.stateNode;\n+ if (fundamentalInstance !== null) {\n+ unmountFundamentalComponent(fundamentalInstance);\n+ current.stateNode = null;\n+ }\n+ }\n }\n }\n }\n@@ -838,6 +853,7 @@ function commitContainer(finishedWork: Fiber) {\n case ClassComponent:\n case HostComponent:\n case HostText:\n+ case FundamentalComponent:\n case EventComponent: {\n return;\n }\n@@ -942,20 +958,26 @@ function commitPlacement(finishedWork: Fiber): void {\n \/\/ Note: these two variables *must* always be updated together.\n let parent;\n let isContainer;\n-\n+ const parentStateNode = parentFiber.stateNode;\n switch (parentFiber.tag) {\n case HostComponent:\n- parent = parentFiber.stateNode;\n+ parent = parentStateNode;\n isContainer = false;\n break;\n case HostRoot:\n- parent = parentFiber.stateNode.containerInfo;\n+ parent = parentStateNode.containerInfo;\n isContainer = true;\n break;\n case HostPortal:\n- parent = parentFiber.stateNode.containerInfo;\n+ parent = parentStateNode.containerInfo;\n isContainer = true;\n break;\n+ case FundamentalComponent:\n+ if (enableFundamentalAPI) {\n+ parent = parentStateNode.instance;\n+ isContainer = false;\n+ }\n+ \/\/ eslint-disable-next-line-no-fallthrough\n default:\n invariant(\n false,\n@@ -975,8 +997,9 @@ function commitPlacement(finishedWork: Fiber): void {\n \/\/ children to find all the terminal nodes.\n let node: Fiber = finishedWork;\n while (true) {\n- if (node.tag === HostComponent || node.tag === HostText) {\n- const stateNode = node.stateNode;\n+ const isHost = node.tag === HostComponent || node.tag === HostText;\n+ if (isHost || node.tag === FundamentalComponent) {\n+ const stateNode = isHost ? node.stateNode : node.stateNode.instance;\n if (before) {\n if (isContainer) {\n insertInContainerBefore(parent, stateNode, before);\n@@ -1035,19 +1058,25 @@ function unmountHostComponents(current): void {\n 'Expected to find a host parent. This error is likely caused by ' +\n 'a bug in React. Please file an issue.',\n );\n+ const parentStateNode = parent.stateNode;\n switch (parent.tag) {\n case HostComponent:\n- currentParent = parent.stateNode;\n+ currentParent = parentStateNode;\n currentParentIsContainer = false;\n break findParent;\n case HostRoot:\n- currentParent = parent.stateNode.containerInfo;\n+ currentParent = parentStateNode.containerInfo;\n currentParentIsContainer = true;\n break findParent;\n case HostPortal:\n- currentParent = parent.stateNode.containerInfo;\n+ currentParent = parentStateNode.containerInfo;\n currentParentIsContainer = true;\n break findParent;\n+ case FundamentalComponent:\n+ if (enableFundamentalAPI) {\n+ currentParent = parentStateNode.instance;\n+ currentParentIsContainer = false;\n+ }\n }\n parent = parent.return;\n }\n@@ -1070,6 +1099,22 @@ function unmountHostComponents(current): void {\n );\n }\n \/\/ Don't visit children because we already visited them.\n+ } else if (node.tag === FundamentalComponent) {\n+ const fundamentalNode = node.stateNode.instance;\n+ commitNestedUnmounts(node);\n+ \/\/ After all the children have unmounted, it is now safe to remove the\n+ \/\/ node from the tree.\n+ if (currentParentIsContainer) {\n+ removeChildFromContainer(\n+ ((currentParent: any): Container),\n+ (fundamentalNode: Instance),\n+ );\n+ } else {\n+ removeChild(\n+ ((currentParent: any): Instance),\n+ (fundamentalNode: Instance),\n+ );\n+ }\n } else if (\n enableSuspenseServerRenderer &&\n node.tag === DehydratedSuspenseComponent\n@@ -1243,6 +1288,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n case EventComponent: {\n return;\n }\n+ case FundamentalComponent: {\n+ if (enableFundamentalAPI) {\n+ const fundamentalInstance = finishedWork.stateNode;\n+ updateFundamentalComponent(fundamentalInstance);\n+ }\n+ return;\n+ }\n default: {\n invariant(\n false,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\nindex faa6548120..5609ce1571 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n@@ -17,7 +17,10 @@ import type {\n Container,\n ChildSet,\n } from '.\/ReactFiberHostConfig';\n-import type {ReactEventComponentInstance} from 'shared\/ReactTypes';\n+import type {\n+ ReactEventComponentInstance,\n+ ReactFundamentalComponentInstance,\n+} from 'shared\/ReactTypes';\n import type {\n SuspenseState,\n SuspenseListRenderState,\n@@ -48,6 +51,7 @@ import {\n LazyComponent,\n IncompleteClassComponent,\n EventComponent,\n+ FundamentalComponent,\n } from 'shared\/ReactWorkTags';\n import {NoMode, BatchedMode} from '.\/ReactTypeOfMode';\n import {\n@@ -75,6 +79,10 @@ import {\n appendChildToContainerChildSet,\n finalizeContainerChildren,\n updateEventComponent,\n+ getFundamentalComponentInstance,\n+ mountFundamentalComponent,\n+ cloneFundamentalInstance,\n+ shouldUpdateFundamentalComponent,\n } from '.\/ReactFiberHostConfig';\n import {\n getRootHostContainer,\n@@ -109,6 +117,7 @@ import {\n enableSchedulerTracing,\n enableSuspenseServerRenderer,\n enableFlareAPI,\n+ enableFundamentalAPI,\n } from 'shared\/ReactFeatureFlags';\n import {\n markSpawnedWork,\n@@ -117,6 +126,7 @@ import {\n renderHasNotSuspendedYet,\n } from '.\/ReactFiberWorkLoop';\n import {createEventComponentInstance} from '.\/ReactFiberEvents';\n+import {createFundamentalStateInstance} from '.\/ReactFiberFundamental';\n import {Never} from '.\/ReactFiberExpirationTime';\n import {resetChildFibers} from '.\/ReactChildFiber';\n \n@@ -149,6 +159,8 @@ if (supportsMutation) {\n while (node !== null) {\n if (node.tag === HostComponent || node.tag === HostText) {\n appendInitialChild(parent, node.stateNode);\n+ } else if (node.tag === FundamentalComponent) {\n+ appendInitialChild(parent, node.stateNode.instance);\n } else if (node.tag === HostPortal) {\n \/\/ If we have a portal child, then we don't want to traverse\n \/\/ down its children. Instead, we'll get insertions from each child in\n@@ -258,6 +270,15 @@ if (supportsMutation) {\n instance = cloneHiddenTextInstance(instance, text, node);\n }\n appendInitialChild(parent, instance);\n+ } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {\n+ let instance = node.stateNode.instance;\n+ if (needsVisibilityToggle && isHidden) {\n+ \/\/ This child is inside a timed out tree. Hide it.\n+ const props = node.memoizedProps;\n+ const type = node.type;\n+ instance = cloneHiddenInstance(instance, type, props, node);\n+ }\n+ appendInitialChild(parent, instance);\n } else if (node.tag === HostPortal) {\n \/\/ If we have a portal child, then we don't want to traverse\n \/\/ down its children. Instead, we'll get insertions from each child in\n@@ -343,6 +364,15 @@ if (supportsMutation) {\n instance = cloneHiddenTextInstance(instance, text, node);\n }\n appendChildToContainerChildSet(containerChildSet, instance);\n+ } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {\n+ let instance = node.stateNode.instance;\n+ if (needsVisibilityToggle && isHidden) {\n+ \/\/ This child is inside a timed out tree. Hide it.\n+ const props = node.memoizedProps;\n+ const type = node.type;\n+ instance = cloneHiddenInstance(instance, type, props, node);\n+ }\n+ appendChildToContainerChildSet(containerChildSet, instance);\n } else if (node.tag === HostPortal) {\n \/\/ If we have a portal child, then we don't want to traverse\n \/\/ down its children. Instead, we'll get insertions from each child in\n@@ -1139,6 +1169,57 @@ function completeWork(\n }\n break;\n }\n+ case FundamentalComponent: {\n+ if (enableFundamentalAPI) {\n+ const fundamentalImpl = workInProgress.type.impl;\n+ let fundamentalInstance: ReactFundamentalComponentInstance<\n+ any,\n+ any,\n+ > | null =\n+ workInProgress.stateNode;\n+\n+ if (fundamentalInstance === null) {\n+ const getInitialState = fundamentalImpl.getInitialState;\n+ let fundamentalState;\n+ if (getInitialState !== undefined) {\n+ fundamentalState = getInitialState(newProps);\n+ }\n+ fundamentalInstance = workInProgress.stateNode = createFundamentalStateInstance(\n+ workInProgress,\n+ newProps,\n+ fundamentalImpl,\n+ fundamentalState || {},\n+ );\n+ const instance = ((getFundamentalComponentInstance(\n+ fundamentalInstance,\n+ ): any): Instance);\n+ fundamentalInstance.instance = instance;\n+ if (fundamentalImpl.reconcileChildren === false) {\n+ return null;\n+ }\n+ appendAllChildren(instance, workInProgress, false, false);\n+ mountFundamentalComponent(fundamentalInstance);\n+ } else {\n+ \/\/ We fire update in commit phase\n+ const prevProps = fundamentalInstance.props;\n+ fundamentalInstance.prevProps = prevProps;\n+ fundamentalInstance.props = newProps;\n+ fundamentalInstance.currentFiber = workInProgress;\n+ if (supportsPersistence) {\n+ const instance = cloneFundamentalInstance(fundamentalInstance);\n+ fundamentalInstance.instance = instance;\n+ appendAllChildren(instance, workInProgress, false, false);\n+ }\n+ const shouldUpdate = shouldUpdateFundamentalComponent(\n+ fundamentalInstance,\n+ );\n+ if (shouldUpdate) {\n+ markUpdate(workInProgress);\n+ }\n+ }\n+ }\n+ break;\n+ }\n default:\n invariant(\n false,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberFundamental.js b\/packages\/react-reconciler\/src\/ReactFiberFundamental.js\nnew file mode 100644\nindex 0000000000..ba2d6fd223\n--- \/dev\/null\n+++ b\/packages\/react-reconciler\/src\/ReactFiberFundamental.js\n@@ -0,0 +1,30 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import type {Fiber} from '.\/ReactFiber';\n+import type {\n+ ReactFundamentalImpl,\n+ ReactFundamentalComponentInstance,\n+} from 'shared\/ReactTypes';\n+\n+export function createFundamentalStateInstance(\n+ currentFiber: Fiber,\n+ props: Object,\n+ impl: ReactFundamentalImpl,\n+ state: Object,\n+): ReactFundamentalComponentInstance {\n+ return {\n+ currentFiber,\n+ impl,\n+ instance: null,\n+ prevProps: null,\n+ props,\n+ state,\n+ };\n+}\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\nindex 682bfe7d3b..aade7ccb15 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n@@ -16,6 +16,7 @@ import type {\n Container,\n PublicInstance,\n } from '.\/ReactFiberHostConfig';\n+import {FundamentalComponent} from 'shared\/ReactWorkTags';\n import type {ReactNodeList} from 'shared\/ReactTypes';\n import type {ExpirationTime} from '.\/ReactFiberExpirationTime';\n import type {SuspenseConfig} from '.\/ReactFiberSuspenseConfig';\n@@ -374,6 +375,9 @@ export function findHostInstanceWithNoPortals(\n if (hostFiber === null) {\n return null;\n }\n+ if (hostFiber.tag === FundamentalComponent) {\n+ return hostFiber.stateNode.instance;\n+ }\n return hostFiber.stateNode;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js b\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\nindex 734dead68c..abcb1f3677 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n@@ -21,6 +21,7 @@ import {\n HostRoot,\n HostPortal,\n HostText,\n+ FundamentalComponent,\n } from 'shared\/ReactWorkTags';\n import {NoEffect, Placement} from 'shared\/ReactSideEffectTags';\n \n@@ -277,7 +278,11 @@ export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {\n \/\/ Next we'll drill down this component to find the first HostComponent\/Text.\n let node: Fiber = currentParent;\n while (true) {\n- if (node.tag === HostComponent || node.tag === HostText) {\n+ if (\n+ node.tag === HostComponent ||\n+ node.tag === HostText ||\n+ node.tag === FundamentalComponent\n+ ) {\n return node;\n } else if (node.child && node.tag !== HostPortal) {\n node.child.return = node;\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberFundamental-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberFundamental-test.internal.js\nnew file mode 100644\nindex 0000000000..00b00b533b\n--- \/dev\/null\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberFundamental-test.internal.js\n@@ -0,0 +1,225 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let React;\n+let ReactNoop;\n+let Scheduler;\n+let ReactFeatureFlags;\n+let ReactTestRenderer;\n+let ReactDOM;\n+let ReactDOMServer;\n+\n+function createReactFundamentalComponent(fundamentalImpl) {\n+ return React.unstable_createFundamental(fundamentalImpl);\n+}\n+\n+function init() {\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ ReactFeatureFlags.enableFundamentalAPI = true;\n+ React = require('react');\n+ Scheduler = require('scheduler');\n+}\n+\n+function initNoopRenderer() {\n+ init();\n+ ReactNoop = require('react-noop-renderer');\n+}\n+\n+function initTestRenderer() {\n+ init();\n+ ReactTestRenderer = require('react-test-renderer');\n+}\n+\n+function initReactDOM() {\n+ init();\n+ ReactDOM = require('react-dom');\n+}\n+\n+function initReactDOMServer() {\n+ init();\n+ ReactDOMServer = require('react-dom\/server');\n+}\n+\n+describe('ReactFiberFundamental', () => {\n+ describe('NoopRenderer', () => {\n+ beforeEach(() => {\n+ initNoopRenderer();\n+ });\n+\n+ it('should render a simple fundamental component with a single child', () => {\n+ const FundamentalComponent = createReactFundamentalComponent({\n+ reconcileChildren: true,\n+ getInstance(context, props, state) {\n+ const instance = {\n+ children: [],\n+ text: null,\n+ type: 'test',\n+ };\n+ return instance;\n+ },\n+ });\n+\n+ const Test = ({children}) => (\n+ {children}<\/FundamentalComponent>\n+ );\n+\n+ ReactNoop.render(Hello world<\/Test>);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(ReactNoop).toMatchRenderedOutput(Hello world<\/test>);\n+ ReactNoop.render(Hello world again<\/Test>);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(ReactNoop).toMatchRenderedOutput(Hello world again<\/test>);\n+ ReactNoop.render(null);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(ReactNoop).toMatchRenderedOutput(null);\n+ });\n+ });\n+\n+ describe('NoopTestRenderer', () => {\n+ beforeEach(() => {\n+ initTestRenderer();\n+ });\n+\n+ it('should render a simple fundamental component with a single child', () => {\n+ const FundamentalComponent = createReactFundamentalComponent({\n+ reconcileChildren: true,\n+ getInstance(context, props, state) {\n+ const instance = {\n+ children: [],\n+ props,\n+ type: 'test',\n+ tag: 'INSTANCE',\n+ };\n+ return instance;\n+ },\n+ });\n+\n+ const Test = ({children}) => (\n+ {children}<\/FundamentalComponent>\n+ );\n+\n+ const root = ReactTestRenderer.create(null);\n+ root.update(Hello world<\/Test>);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(root).toMatchRenderedOutput(Hello world<\/test>);\n+ root.update(Hello world again<\/Test>);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(root).toMatchRenderedOutput(Hello world again<\/test>);\n+ root.update(null);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(root).toMatchRenderedOutput(null);\n+ });\n+ });\n+\n+ describe('ReactDOM', () => {\n+ beforeEach(() => {\n+ initReactDOM();\n+ });\n+\n+ it('should render a simple fundamental component with a single child', () => {\n+ const FundamentalComponent = createReactFundamentalComponent({\n+ reconcileChildren: true,\n+ getInstance(context, props, state) {\n+ const instance = document.createElement('div');\n+ return instance;\n+ },\n+ });\n+\n+ const Test = ({children}) => (\n+ {children}<\/FundamentalComponent>\n+ );\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(Hello world<\/Test>, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

Hello world<\/div>');\n+ ReactDOM.render(Hello world again<\/Test>, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

Hello world again<\/div>');\n+ ReactDOM.render(null, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('');\n+ });\n+\n+ it('should render a simple fundamental component without reconcileChildren', () => {\n+ const FundamentalComponent = createReactFundamentalComponent({\n+ reconcileChildren: false,\n+ getInstance(context, props, state) {\n+ const instance = document.createElement('div');\n+ instance.textContent = 'Hello world';\n+ return instance;\n+ },\n+ });\n+\n+ const Test = () => ;\n+\n+ const container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

Hello world<\/div>');\n+ \/\/ Children should be ignored\n+ ReactDOM.render(Hello world again<\/Test>, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('

Hello world<\/div>');\n+ ReactDOM.render(null, container);\n+ expect(Scheduler).toFlushWithoutYielding();\n+ expect(container.innerHTML).toBe('');\n+ });\n+ });\n+\n+ describe('ReactDOMServer', () => {\n+ beforeEach(() => {\n+ initReactDOMServer();\n+ });\n+\n+ it('should render a simple fundamental component with a single child', () => {\n+ const getInstance = jest.fn();\n+ const FundamentalComponent = createReactFundamentalComponent({\n+ reconcileChildren: true,\n+ getInstance,\n+ getServerSideString(context, props) {\n+ return `

`;\n+ },\n+ getServerSideStringClose(context, props) {\n+ return `<\/div>`;\n+ },\n+ });\n+\n+ const Test = ({children}) => (\n+ {children}<\/FundamentalComponent>\n+ );\n+\n+ expect(getInstance).not.toBeCalled();\n+ let output = ReactDOMServer.renderToString(Hello world<\/Test>);\n+ expect(output).toBe('

Hello world<\/div>');\n+ output = ReactDOMServer.renderToString(Hello world again<\/Test>);\n+ expect(output).toBe('

Hello world again<\/div>');\n+ });\n+\n+ it('should render a simple fundamental component without reconcileChildren', () => {\n+ const FundamentalComponent = createReactFundamentalComponent({\n+ reconcileChildren: false,\n+ getServerSideString(context, props) {\n+ return `

Hello world<\/div>`;\n+ },\n+ });\n+\n+ const Test = () => ;\n+\n+ let output = ReactDOMServer.renderToString();\n+ expect(output).toBe('

Hello world<\/div>');\n+ \/\/ Children should be ignored\n+ output = ReactDOMServer.renderToString(Hello world again<\/Test>);\n+ expect(output).toBe('

Hello world<\/div>');\n+ });\n+ });\n+});\ndiff --git a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\nindex 5d87abd379..80f5221b25 100644\n--- a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n+++ b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n@@ -65,7 +65,12 @@ export const supportsPersistence = $$$hostConfig.supportsPersistence;\n export const supportsHydration = $$$hostConfig.supportsHydration;\n export const mountEventComponent = $$$hostConfig.mountEventComponent;\n export const updateEventComponent = $$$hostConfig.updateEventComponent;\n-export const handleEventTarget = $$$hostConfig.handleEventTarget;\n+export const getFundamentalComponentInstance =\n+ $$$hostConfig.getFundamentalComponentInstance;\n+export const mountFundamentalComponent =\n+ $$$hostConfig.mountFundamentalComponent;\n+export const shouldUpdateFundamentalComponent =\n+ $$$hostConfig.shouldUpdateFundamentalComponent;\n \n \/\/ -------------------\n \/\/ Mutation\n@@ -87,6 +92,10 @@ export const unhideInstance = $$$hostConfig.unhideInstance;\n export const unhideTextInstance = $$$hostConfig.unhideTextInstance;\n export const unmountEventComponent = $$$hostConfig.unmountEventComponent;\n export const commitEventTarget = $$$hostConfig.commitEventTarget;\n+export const updateFundamentalComponent =\n+ $$$hostConfig.updateFundamentalComponent;\n+export const unmountFundamentalComponent =\n+ $$$hostConfig.unmountFundamentalComponent;\n \n \/\/ -------------------\n \/\/ Persistence\n@@ -101,6 +110,7 @@ export const finalizeContainerChildren =\n export const replaceContainerChildren = $$$hostConfig.replaceContainerChildren;\n export const cloneHiddenInstance = $$$hostConfig.cloneHiddenInstance;\n export const cloneHiddenTextInstance = $$$hostConfig.cloneHiddenTextInstance;\n+export const cloneFundamentalInstance = $$$hostConfig.cloneInstance;\n \n \/\/ -------------------\n \/\/ Hydration\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\nindex 467fc4550c..f57f425aa8 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n@@ -9,7 +9,10 @@\n \n import warning from 'shared\/warning';\n \n-import type {ReactEventComponentInstance} from 'shared\/ReactTypes';\n+import type {\n+ ReactEventComponentInstance,\n+ ReactFundamentalComponentInstance,\n+} from 'shared\/ReactTypes';\n \n import {enableFlareAPI} from 'shared\/ReactFeatureFlags';\n \n@@ -302,3 +305,49 @@ export function unmountEventComponent(\n ): void {\n \/\/ noop\n }\n+\n+export function getFundamentalComponentInstance(fundamentalInstance): Instance {\n+ const {impl, props, state} = fundamentalInstance;\n+ return impl.getInstance(null, props, state);\n+}\n+\n+export function mountFundamentalComponent(\n+ fundamentalInstance: ReactFundamentalComponentInstance,\n+): void {\n+ const {impl, instance, props, state} = fundamentalInstance;\n+ const onMount = impl.onMount;\n+ if (onMount !== undefined) {\n+ onMount(null, instance, props, state);\n+ }\n+}\n+\n+export function shouldUpdateFundamentalComponent(\n+ fundamentalInstance: ReactFundamentalComponentInstance,\n+): boolean {\n+ const {impl, prevProps, props, state} = fundamentalInstance;\n+ const shouldUpdate = impl.shouldUpdate;\n+ if (shouldUpdate !== undefined) {\n+ return shouldUpdate(null, prevProps, props, state);\n+ }\n+ return true;\n+}\n+\n+export function updateFundamentalComponent(\n+ fundamentalInstance: ReactFundamentalComponentInstance,\n+): void {\n+ const {impl, instance, prevProps, props, state} = fundamentalInstance;\n+ const onUpdate = impl.onUpdate;\n+ if (onUpdate !== undefined) {\n+ onUpdate(null, instance, prevProps, props, state);\n+ }\n+}\n+\n+export function unmountFundamentalComponent(\n+ fundamentalInstance: ReactFundamentalComponentInstance,\n+): void {\n+ const {impl, instance, props, state} = fundamentalInstance;\n+ const onUnmount = impl.onUnmount;\n+ if (onUnmount !== undefined) {\n+ onUnmount(null, instance, props, state);\n+ }\n+}\ndiff --git a\/packages\/react\/src\/React.js b\/packages\/react\/src\/React.js\nindex 74bb3a5683..a1a181c976 100644\n--- a\/packages\/react\/src\/React.js\n+++ b\/packages\/react\/src\/React.js\n@@ -52,7 +52,12 @@ import {\n } from '.\/ReactElementValidator';\n import ReactSharedInternals from '.\/ReactSharedInternals';\n import createEvent from 'shared\/createEventComponent';\n-import {enableJSXTransformAPI, enableFlareAPI} from 'shared\/ReactFeatureFlags';\n+import createFundamental from 'shared\/createFundamentalComponent';\n+import {\n+ enableJSXTransformAPI,\n+ enableFlareAPI,\n+ enableFundamentalAPI,\n+} from 'shared\/ReactFeatureFlags';\n const React = {\n Children: {\n map,\n@@ -105,6 +110,10 @@ if (enableFlareAPI) {\n React.unstable_useEvent = useEvent;\n }\n \n+if (enableFundamentalAPI) {\n+ React.unstable_createFundamental = createFundamental;\n+}\n+\n \/\/ Note: some APIs are added with feature flags.\n \/\/ Make sure that stable builds for open source\n \/\/ don't modify the React object to avoid deopts.\ndiff --git a\/packages\/shared\/HostConfigWithNoPersistence.js b\/packages\/shared\/HostConfigWithNoPersistence.js\nindex d5f84cf43f..2b58a0db4d 100644\n--- a\/packages\/shared\/HostConfigWithNoPersistence.js\n+++ b\/packages\/shared\/HostConfigWithNoPersistence.js\n@@ -24,6 +24,7 @@ function shim(...args: any) {\n \/\/ Persistence (when unsupported)\n export const supportsPersistence = false;\n export const cloneInstance = shim;\n+export const cloneFundamentalInstance = shim;\n export const createContainerChildSet = shim;\n export const appendChildToContainerChildSet = shim;\n export const finalizeContainerChildren = shim;\ndiff --git a\/packages\/shared\/ReactDOMTypes.js b\/packages\/shared\/ReactDOMTypes.js\nindex 060a2a11d7..9590ec323b 100644\n--- a\/packages\/shared\/ReactDOMTypes.js\n+++ b\/packages\/shared\/ReactDOMTypes.js\n@@ -8,6 +8,7 @@\n *\/\n \n import type {\n+ ReactFundamentalComponentInstance,\n ReactEventResponder,\n ReactEventComponentInstance,\n EventPriority,\n@@ -44,6 +45,11 @@ export type ReactDOMEventComponentInstance = ReactEventComponentInstance<\n ReactDOMResponderContext,\n >;\n \n+export type ReactDOMFundamentalComponentInstance = ReactFundamentalComponentInstance<\n+ any,\n+ any,\n+>;\n+\n export type ReactDOMResponderContext = {\n dispatchEvent: (\n eventObject: Object,\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex c7c4f54bb4..2c87bb1a06 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -62,6 +62,9 @@ export const warnAboutDeprecatedSetNativeProps = false;\n \/\/ Experimental React Flare event system and event components support.\n export const enableFlareAPI = false;\n \n+\/\/ Experimental Host Component support.\n+export const enableFundamentalAPI = false;\n+\n \/\/ New API for JSX transforms to target - https:\/\/github.com\/reactjs\/rfcs\/pull\/107\n export const enableJSXTransformAPI = false;\n \ndiff --git a\/packages\/shared\/ReactSymbols.js b\/packages\/shared\/ReactSymbols.js\nindex 77d46ad32d..6581cc34d5 100644\n--- a\/packages\/shared\/ReactSymbols.js\n+++ b\/packages\/shared\/ReactSymbols.js\n@@ -54,6 +54,9 @@ export const REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;\n export const REACT_EVENT_COMPONENT_TYPE = hasSymbol\n ? Symbol.for('react.event_component')\n : 0xead5;\n+export const REACT_FUNDAMENTAL_TYPE = hasSymbol\n+ ? Symbol.for('react.fundamental')\n+ : 0xead6;\n \n const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n const FAUX_ITERATOR_SYMBOL = '@@iterator';\ndiff --git a\/packages\/shared\/ReactTypes.js b\/packages\/shared\/ReactTypes.js\nindex d8ef40f361..58c9b6bddc 100644\n--- a\/packages\/shared\/ReactTypes.js\n+++ b\/packages\/shared\/ReactTypes.js\n@@ -112,3 +112,48 @@ export opaque type EventPriority = 0 | 1 | 2;\n export const DiscreteEvent: EventPriority = 0;\n export const UserBlockingEvent: EventPriority = 1;\n export const ContinuousEvent: EventPriority = 2;\n+\n+export type ReactFundamentalComponentInstance = {|\n+ currentFiber: mixed,\n+ instance: mixed,\n+ prevProps: null | Object,\n+ props: Object,\n+ impl: ReactFundamentalImpl,\n+ state: Object,\n+|};\n+\n+export type ReactFundamentalImpl = {\n+ displayName: string,\n+ reconcileChildren: boolean,\n+ getInitialState?: (props: Object) => Object,\n+ getInstance: (context: C, props: Object, state: Object) => H,\n+ getServerSideString?: (context: C, props: Object) => string,\n+ getServerSideStringClose?: (context: C, props: Object) => string,\n+ onMount: (context: C, instance: mixed, props: Object, state: Object) => void,\n+ shouldUpdate?: (\n+ context: C,\n+ prevProps: null | Object,\n+ nextProps: Object,\n+ state: Object,\n+ ) => boolean,\n+ onUpdate?: (\n+ context: C,\n+ instance: mixed,\n+ prevProps: null | Object,\n+ nextProps: Object,\n+ state: Object,\n+ ) => void,\n+ onUnmount?: (\n+ context: C,\n+ instance: mixed,\n+ props: Object,\n+ state: Object,\n+ ) => void,\n+ onHydrate?: (context: C, props: Object, state: Object) => boolean,\n+ onFocus?: (context: C, props: Object, state: Object) => boolean,\n+};\n+\n+export type ReactFundamentalComponent = {|\n+ $$typeof: Symbol | number,\n+ impl: ReactFundamentalImpl,\n+|};\ndiff --git a\/packages\/shared\/ReactWorkTags.js b\/packages\/shared\/ReactWorkTags.js\nindex c5d397264f..9de376d691 100644\n--- a\/packages\/shared\/ReactWorkTags.js\n+++ b\/packages\/shared\/ReactWorkTags.js\n@@ -51,5 +51,5 @@ export const LazyComponent = 16;\n export const IncompleteClassComponent = 17;\n export const DehydratedSuspenseComponent = 18;\n export const EventComponent = 19;\n-export const EventTarget = 20;\n+export const FundamentalComponent = 20;\n export const SuspenseListComponent = 21;\ndiff --git a\/packages\/shared\/createEventComponent.js b\/packages\/shared\/createEventComponent.js\nindex 622e9d6b2f..66998b3942 100644\n--- a\/packages\/shared\/createEventComponent.js\n+++ b\/packages\/shared\/createEventComponent.js\n@@ -8,25 +8,7 @@\n \n import type {ReactEventResponder, ReactEventComponent} from 'shared\/ReactTypes';\n import {REACT_EVENT_COMPONENT_TYPE} from 'shared\/ReactSymbols';\n-\n-let hasBadMapPolyfill;\n-\n-if (__DEV__) {\n- hasBadMapPolyfill = false;\n- try {\n- const frozenObject = Object.freeze({});\n- const testMap = new Map([[frozenObject, null]]);\n- const testSet = new Set([frozenObject]);\n- \/\/ This is necessary for Rollup to not consider these unused.\n- \/\/ https:\/\/github.com\/rollup\/rollup\/issues\/1771\n- \/\/ TODO: we can remove these if Rollup fixes the bug.\n- testMap.set(0, 0);\n- testSet.add(0);\n- } catch (e) {\n- \/\/ TODO: Consider warning about bad polyfills\n- hasBadMapPolyfill = true;\n- }\n-}\n+import {hasBadMapPolyfill} from '.\/hasBadMapPolyfill';\n \n export default function createEventComponent(\n responder: ReactEventResponder,\n@@ -39,7 +21,7 @@ export default function createEventComponent(\n }\n const eventComponent = {\n $$typeof: REACT_EVENT_COMPONENT_TYPE,\n- responder: responder,\n+ responder,\n };\n if (__DEV__) {\n Object.freeze(eventComponent);\ndiff --git a\/packages\/shared\/createFundamentalComponent.js b\/packages\/shared\/createFundamentalComponent.js\nnew file mode 100644\nindex 0000000000..88fa369922\n--- \/dev\/null\n+++ b\/packages\/shared\/createFundamentalComponent.js\n@@ -0,0 +1,33 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ * @flow\n+ *\/\n+\n+import type {\n+ ReactFundamentalImpl,\n+ ReactFundamentalComponent,\n+} from 'shared\/ReactTypes';\n+import {REACT_FUNDAMENTAL_TYPE} from 'shared\/ReactSymbols';\n+import {hasBadMapPolyfill} from '.\/hasBadMapPolyfill';\n+\n+export default function createFundamentalComponent(\n+ impl: ReactFundamentalImpl,\n+): ReactFundamentalComponent {\n+ \/\/ We use responder as a Map key later on. When we have a bad\n+ \/\/ polyfill, then we can't use it as a key as the polyfill tries\n+ \/\/ to add a property to the object.\n+ if (__DEV__ && !hasBadMapPolyfill) {\n+ Object.freeze(impl);\n+ }\n+ const fundamantalComponent = {\n+ $$typeof: REACT_FUNDAMENTAL_TYPE,\n+ impl,\n+ };\n+ if (__DEV__) {\n+ Object.freeze(fundamantalComponent);\n+ }\n+ return fundamantalComponent;\n+}\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex dd632f0cbe..e458937a62 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -32,6 +32,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;\n export const warnAboutDeprecatedLifecycles = true;\n export const warnAboutDeprecatedSetNativeProps = true;\n export const enableFlareAPI = false;\n+export const enableFundamentalAPI = false;\n export const enableJSXTransformAPI = false;\n export const warnAboutMissingMockScheduler = true;\n export const revertPassiveEffectsChange = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex b5049d473a..25c03a5387 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -27,6 +27,7 @@ export const warnAboutShorthandPropertyCollision = false;\n export const enableSchedulerDebugging = false;\n export const warnAboutDeprecatedSetNativeProps = false;\n export const enableFlareAPI = false;\n+export const enableFundamentalAPI = false;\n export const enableJSXTransformAPI = false;\n export const warnAboutMissingMockScheduler = false;\n export const revertPassiveEffectsChange = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js b\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\nindex 88e8103373..a43a9b6873 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\n@@ -27,6 +27,7 @@ export const warnAboutShorthandPropertyCollision = false;\n export const enableSchedulerDebugging = false;\n export const warnAboutDeprecatedSetNativeProps = false;\n export const enableFlareAPI = false;\n+export const enableFundamentalAPI = false;\n export const enableJSXTransformAPI = false;\n export const warnAboutMissingMockScheduler = true;\n export const revertPassiveEffectsChange = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex f71eb8275e..1f50db3277 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -27,6 +27,7 @@ export const warnAboutShorthandPropertyCollision = false;\n export const enableSchedulerDebugging = false;\n export const warnAboutDeprecatedSetNativeProps = false;\n export const enableFlareAPI = false;\n+export const enableFundamentalAPI = false;\n export const enableJSXTransformAPI = false;\n export const warnAboutMissingMockScheduler = false;\n export const revertPassiveEffectsChange = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex bef8c47484..060d0d8142 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -28,6 +28,7 @@ export const enableSchedulerDebugging = false;\n export const warnAboutDeprecatedSetNativeProps = false;\n export const disableJavaScriptURLs = false;\n export const enableFlareAPI = true;\n+export const enableFundamentalAPI = false;\n export const enableJSXTransformAPI = true;\n export const warnAboutMissingMockScheduler = true;\n export const enableUserBlockingEvents = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 09ac6f03aa..a9c01b5417 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -70,6 +70,8 @@ function updateFlagOutsideOfReactCallStack() {\n \n export const enableFlareAPI = true;\n \n+export const enableFundamentalAPI = false;\n+\n export const enableJSXTransformAPI = true;\n \n export const warnAboutMissingMockScheduler = true;\ndiff --git a\/packages\/shared\/hasBadMapPolyfill.js b\/packages\/shared\/hasBadMapPolyfill.js\nnew file mode 100644\nindex 0000000000..7ceb9ca65f\n--- \/dev\/null\n+++ b\/packages\/shared\/hasBadMapPolyfill.js\n@@ -0,0 +1,26 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ * @flow\n+ *\/\n+\n+export let hasBadMapPolyfill;\n+\n+if (__DEV__) {\n+ hasBadMapPolyfill = false;\n+ try {\n+ const frozenObject = Object.freeze({});\n+ const testMap = new Map([[frozenObject, null]]);\n+ const testSet = new Set([frozenObject]);\n+ \/\/ This is necessary for Rollup to not consider these unused.\n+ \/\/ https:\/\/github.com\/rollup\/rollup\/issues\/1771\n+ \/\/ TODO: we can remove these if Rollup fixes the bug.\n+ testMap.set(0, 0);\n+ testSet.add(0);\n+ } catch (e) {\n+ \/\/ TODO: Consider warning about bad polyfills\n+ hasBadMapPolyfill = true;\n+ }\n+}\ndiff --git a\/packages\/shared\/isValidElementType.js b\/packages\/shared\/isValidElementType.js\nindex 739b216991..0b9f768f4d 100644\n--- a\/packages\/shared\/isValidElementType.js\n+++ b\/packages\/shared\/isValidElementType.js\n@@ -20,6 +20,7 @@ import {\n REACT_MEMO_TYPE,\n REACT_LAZY_TYPE,\n REACT_EVENT_COMPONENT_TYPE,\n+ REACT_FUNDAMENTAL_TYPE,\n } from 'shared\/ReactSymbols';\n \n export default function isValidElementType(type: mixed) {\n@@ -40,6 +41,7 @@ export default function isValidElementType(type: mixed) {\n type.$$typeof === REACT_PROVIDER_TYPE ||\n type.$$typeof === REACT_CONTEXT_TYPE ||\n type.$$typeof === REACT_FORWARD_REF_TYPE ||\n- type.$$typeof === REACT_EVENT_COMPONENT_TYPE))\n+ type.$$typeof === REACT_EVENT_COMPONENT_TYPE ||\n+ type.$$typeof === REACT_FUNDAMENTAL_TYPE))\n );\n }\ndiff --git a\/scripts\/error-codes\/codes.json b\/scripts\/error-codes\/codes.json\nindex caacc6085e..926646f116 100644\n--- a\/scripts\/error-codes\/codes.json\n+++ b\/scripts\/error-codes\/codes.json\n@@ -334,5 +334,6 @@\n \"333\": \"This should have a parent host component initialized. This error is likely caused by a bug in React. Please file an issue.\",\n \"334\": \"accumulate(...): Accumulated items must not be null or undefined.\",\n \"335\": \"ReactDOMServer does not yet support the event API.\",\n- \"336\": \"The \\\"%s\\\" event responder cannot be used via the \\\"useEvent\\\" hook.\"\n+ \"336\": \"The \\\"%s\\\" event responder cannot be used via the \\\"useEvent\\\" hook.\",\n+ \"337\": \"ReactDOMServer does not yet support the fundamental API.\"\n }\n","parents":["b4178af81b02dfa0e898670ce564c4649fd8947f"],"files":[{"status":"M","path":"package.json"},{"status":"M","path":"packages\/react-art\/src\/ReactARTHostConfig.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFabricHostConfig.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeHostConfig.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/createReactNoop.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.js"},{"status":"A","path":"packages\/react-reconciler\/src\/ReactFiberFundamental.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberReconciler.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTreeReflection.js"},{"status":"A","path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberFundamental-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js"},{"status":"M","path":"packages\/react\/src\/React.js"},{"status":"M","path":"packages\/shared\/HostConfigWithNoPersistence.js"},{"status":"M","path":"packages\/shared\/ReactDOMTypes.js"},{"status":"M","path":"packages\/shared\/ReactFeatureFlags.js"},{"status":"M","path":"packages\/shared\/ReactSymbols.js"},{"status":"M","path":"packages\/shared\/ReactTypes.js"},{"status":"M","path":"packages\/shared\/ReactWorkTags.js"},{"status":"M","path":"packages\/shared\/createEventComponent.js"},{"status":"A","path":"packages\/shared\/createFundamentalComponent.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.persistent.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js"},{"status":"M","path":"packages\/shared\/forks\/ReactFeatureFlags.www.js"},{"status":"A","path":"packages\/shared\/hasBadMapPolyfill.js"},{"status":"M","path":"packages\/shared\/isValidElementType.js"},{"status":"M","path":"scripts\/error-codes\/codes.json"}]}

dillon1000/react

Files changed