react-native-list 1.0.0 → 2.0.0-alpha.1

package/src/renderer/react/ReactFabricMirror.ts

@@ -0,0 +1,766 @@
+/* eslint-disable @react-native/no-deep-imports, @typescript-eslint/no-unused-vars, no-dupe-keys, prettier/prettier */
+// @ts-nocheck
+
+import type * as ReactModule from 'react'
+
+function nativeLog(...args: unknown[]): void {
+  global._log?.(
+    '[ReactFabricMirror] ' +
+      args
+        .map((a) => {
+          try {
+            return JSON.stringify(a)
+          } catch (e) {
+            return '<failed to parse> ' + String(a)
+          }
+        })
+        .join(' ')
+  )
+}
+global.log = nativeLog
+
+const Reconciler = require('react-reconciler')
+
+// FabricUIManager is basically a wrapper around global.nativeFabricUIManager
+// but caches each function to avoid recreating a jsi::HostFunction on each call.
+const {
+  getFabricUIManager,
+} = require('react-native/Libraries/ReactNative/FabricUIManager')
+const uiManager = getFabricUIManager()
+
+const {
+  create: createAttributePayload,
+  diff: diffAttributePayloads,
+} = require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload')
+
+const ReactNativeViewConfigRegistry = require('react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry')
+
+global.rootHostContext = {}
+global.childHostContext = {}
+
+const {
+  NoEventPriority,
+  DefaultEventPriority,
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  IdleEventPriority,
+} = require('react-reconciler/constants')
+global.currentUpdatePriority = NoEventPriority
+let currentCompleteRootSync: null | ((surfaceId: number, childSet: unknown) => void) =
+  null
+
+global.rootContainersBySurfaceId = global.rootContainersBySurfaceId ?? {}
+
+const {
+  getPublicInstance,
+} = require('../../../shims/react-fiber-config-fabric.js')
+
+//#region Event handling
+const EventPluginUtilsModule = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/EventPluginUtils')
+const { setComponentTree } = EventPluginUtilsModule
+const {
+  injectEventPluginOrder,
+  injectEventPluginsByName,
+  plugins: legacyPlugins,
+} = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/EventPluginRegistry')
+const ResponderEventPluginModule = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin')
+const ReactNativeEventPluginOrderModule = require('../../../../third_party/react/packages/react-native-renderer/src/ReactNativeEventPluginOrder')
+const ReactFabricGlobalResponderHandlerModule = require('../../../../third_party/react/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler')
+const SyntheticEventModule = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/SyntheticEvent')
+const accumulateIntoModule = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/accumulateInto')
+const forEachAccumulatedModule = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/forEachAccumulated')
+const {
+  batchedUpdates,
+} = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/ReactGenericBatching')
+const {
+  runEventsInBatch,
+} = require('../../../../third_party/react/packages/react-native-renderer/src/legacy-events/EventBatching')
+const { HostComponent } = require('react-reconciler/src/ReactWorkTags')
+
+const ResponderEventPlugin =
+  ResponderEventPluginModule.default ?? ResponderEventPluginModule
+const ReactNativeEventPluginOrder =
+  ReactNativeEventPluginOrderModule.default ?? ReactNativeEventPluginOrderModule
+const ReactFabricGlobalResponderHandler =
+  ReactFabricGlobalResponderHandlerModule.default ??
+  ReactFabricGlobalResponderHandlerModule
+
+const SyntheticEvent = SyntheticEventModule.default ?? SyntheticEventModule
+const accumulateInto = accumulateIntoModule.default ?? accumulateIntoModule
+const forEachAccumulated =
+  forEachAccumulatedModule.default ?? forEachAccumulatedModule
+
+const { customBubblingEventTypes, customDirectEventTypes } =
+  ReactNativeViewConfigRegistry
+
+function getParent(inst) {
+  do {
+    inst = inst.return
+  } while (inst && inst.tag !== HostComponent)
+  return inst || null
+}
+
+function traverseTwoPhase(inst, fn, arg, skipBubbling) {
+  const path = []
+  while (inst) {
+    path.push(inst)
+    inst = getParent(inst)
+  }
+
+  for (let i = path.length - 1; i >= 0; i--) {
+    fn(path[i], 'captured', arg)
+  }
+
+  if (skipBubbling) {
+    fn(path[0], 'bubbled', arg)
+  } else {
+    for (let i = 0; i < path.length; i++) {
+      fn(path[i], 'bubbled', arg)
+    }
+  }
+}
+
+function getListener(inst, registrationName) {
+  const stateNode = inst.stateNode
+  if (stateNode == null) {
+    return null
+  }
+
+  const props = EventPluginUtilsModule.getFiberCurrentPropsFromNode(stateNode)
+  if (props == null) {
+    return null
+  }
+
+  const listener = props[registrationName]
+  if (listener != null && typeof listener !== 'function') {
+    throw new Error(
+      `Expected \`${registrationName}\` listener to be a function, got \`${typeof listener}\`.`
+    )
+  }
+  return listener
+}
+
+function listenerAtPhase(inst, event, propagationPhase) {
+  const registrationName =
+    event.dispatchConfig.phasedRegistrationNames[propagationPhase]
+  return getListener(inst, registrationName)
+}
+
+function accumulateDirectionalDispatches(inst, phase, event) {
+  const listener = listenerAtPhase(inst, event, phase)
+  if (listener) {
+    event._dispatchListeners = accumulateInto(
+      event._dispatchListeners,
+      listener
+    )
+    event._dispatchInstances = accumulateInto(event._dispatchInstances, inst)
+  }
+}
+
+function accumulateTwoPhaseDispatchesSingle(event) {
+  if (event && event.dispatchConfig.phasedRegistrationNames) {
+    traverseTwoPhase(
+      event._targetInst,
+      accumulateDirectionalDispatches,
+      event,
+      false
+    )
+  }
+}
+
+function accumulateTwoPhaseDispatches(events) {
+  forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle)
+}
+
+function accumulateCapturePhaseDispatches(event) {
+  if (event && event.dispatchConfig.phasedRegistrationNames) {
+    traverseTwoPhase(
+      event._targetInst,
+      accumulateDirectionalDispatches,
+      event,
+      true
+    )
+  }
+}
+
+function accumulateDispatches(inst, _ignoredDirection, event) {
+  if (inst && event && event.dispatchConfig.registrationName) {
+    const registrationName = event.dispatchConfig.registrationName
+    const listener = getListener(inst, registrationName)
+    if (listener) {
+      event._dispatchListeners = accumulateInto(
+        event._dispatchListeners,
+        listener
+      )
+      event._dispatchInstances = accumulateInto(event._dispatchInstances, inst)
+    }
+  }
+}
+
+function accumulateDirectDispatchesSingle(event) {
+  if (event && event.dispatchConfig.registrationName) {
+    accumulateDispatches(event._targetInst, null, event)
+  }
+}
+
+function accumulateDirectDispatches(events) {
+  forEachAccumulated(events, accumulateDirectDispatchesSingle)
+}
+
+const ReactNativeBridgeEventPlugin = {
+  eventTypes: {},
+  extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+    if (targetInst == null) {
+      return null
+    }
+
+    const bubbleDispatchConfig = customBubblingEventTypes[topLevelType]
+    const directDispatchConfig = customDirectEventTypes[topLevelType]
+
+    if (!bubbleDispatchConfig && !directDispatchConfig) {
+      throw new Error(
+        `Unsupported top level event type "${topLevelType}" dispatched`
+      )
+    }
+
+    const event = SyntheticEvent.getPooled(
+      bubbleDispatchConfig || directDispatchConfig,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget
+    )
+
+    if (bubbleDispatchConfig) {
+      const skipBubbling =
+        event != null &&
+        event.dispatchConfig.phasedRegistrationNames != null &&
+        event.dispatchConfig.phasedRegistrationNames.skipBubbling
+      if (skipBubbling) {
+        accumulateCapturePhaseDispatches(event)
+      } else {
+        accumulateTwoPhaseDispatches(event)
+      }
+    } else if (directDispatchConfig) {
+      accumulateDirectDispatches(event)
+    } else {
+      return null
+    }
+
+    return event
+  },
+}
+
+function extractPluginEvents(
+  topLevelType,
+  targetInst,
+  nativeEvent,
+  nativeEventTarget
+) {
+  let events = null
+  for (let i = 0; i < legacyPlugins.length; i++) {
+    const plugin = legacyPlugins[i]
+    if (plugin) {
+      const extractedEvents = plugin.extractEvents(
+        topLevelType,
+        targetInst,
+        nativeEvent,
+        nativeEventTarget
+      )
+      if (extractedEvents) {
+        events = accumulateInto(events, extractedEvents)
+      }
+    }
+  }
+  return events
+}
+
+function runExtractedPluginEventsInBatch(
+  topLevelType,
+  targetInst,
+  nativeEvent,
+  nativeEventTarget
+) {
+  const events = extractPluginEvents(
+    topLevelType,
+    targetInst,
+    nativeEvent,
+    nativeEventTarget
+  )
+  runEventsInBatch(events)
+}
+
+function ensureLegacyEventPluginsInjected() {
+  try {
+    injectEventPluginOrder(ReactNativeEventPluginOrder)
+  } catch (error) {
+    // The plugin order can only be injected once for a given registry instance.
+    if (
+      !String(error).includes(
+        'Cannot inject event plugin ordering more than once'
+      )
+    ) {
+      throw error
+    }
+  }
+
+  injectEventPluginsByName({
+    ResponderEventPlugin,
+    ReactNativeBridgeEventPlugin,
+  })
+
+  setComponentTree(
+    // Equivalent to ReactFabricComponentTree.getFiberCurrentPropsFromNode
+    (instance) => instance?.canonical?.currentProps ?? null,
+    // Equivalent to ReactFabricComponentTree.getInstanceFromNode
+    (node) => {
+      if (
+        node?.canonical != null &&
+        node.canonical.internalInstanceHandle != null
+      ) {
+        return node.canonical.internalInstanceHandle
+      }
+      return node ?? null
+    },
+    // Equivalent to ReactFabricComponentTree.getNodeFromInstance
+    (fiber) => {
+      const publicInstance = getPublicInstance(fiber.stateNode)
+      if (publicInstance == null) {
+        throw new Error('Could not find host instance from fiber')
+      }
+      return publicInstance
+    }
+  )
+
+  ResponderEventPlugin.injection.injectGlobalResponderHandler(
+    ReactFabricGlobalResponderHandler
+  )
+}
+
+ensureLegacyEventPluginsInjected()
+
+function dispatchEvent(target, topLevelType, nativeEvent) {
+  const targetFiber = target
+  let eventTarget = null
+  if (targetFiber != null) {
+    const stateNode = targetFiber.stateNode
+    if (stateNode != null) {
+      eventTarget = getPublicInstance(stateNode)
+    }
+  }
+
+  batchedUpdates(() => {
+    runExtractedPluginEventsInBatch(
+      topLevelType,
+      targetFiber,
+      nativeEvent,
+      eventTarget
+    )
+  })
+}
+
+// This will be retrieved on the native side in JSI ... hm or we call and set it?
+global.handleEvent = dispatchEvent
+//#endregion
+
+// Counter for uniquely identifying views.
+// % 10 === 1 means it is a rootTag.
+// % 2 === 0 means it is a Fabric tag.
+// This means that they never overlap.
+global.nextReactTag = 200_000_000
+// ^ Why is this number so high?
+// We share the ReactInstance (ie we don't create a seperate one)
+// That means our surface shares the RCTComponentViewRegistry on iOS with the main React Native renderer.
+// When creating new views its checking if the tag already exists, meaning we can't use the same tags that react is using. Bummer!\
+// TODO: find a better solution for this
+
+const HostConfig = {
+  now: performance.now,
+  getRootHostContext(rootContainerInstance) {
+    return global.rootHostContext
+  },
+  getChildHostContext() {
+    return global.childHostContext
+  },
+  //   prepareForCommit(containerInfo) {},
+  //   resetAfterCommit(containerInfo) {},
+  supportsPersistence: true,
+  createInstance: (
+    type,
+    props,
+    rootContainerInstance,
+    _currentHostContext,
+    workInProgress
+  ) => {
+    const tag = global.nextReactTag
+    global.nextReactTag += 2
+
+    const viewConfig = ReactNativeViewConfigRegistry.get(type)
+    const updatePayload = createAttributePayload(
+      props,
+      viewConfig.validAttributes
+    )
+
+    let node
+    try {
+      node = uiManager.createNode(
+        tag, // reactTag
+        viewConfig.uiViewClassName, // viewName
+        rootContainerInstance.containerTag, // rootTag
+        updatePayload, // props
+        workInProgress // internalInstanceHandle
+      )
+    } catch (e) {
+      nativeLog(
+        '[createInstance] ERROR in createNode:',
+        e.message || String(e)
+      )
+      nativeLog('Stack:', new Error().stack)
+      throw e
+    }
+
+    return {
+      node: node,
+      canonical: {
+        nativeTag: tag,
+        viewConfig, // TODO: is this needed? for what
+        currentProps: props, // funny, react is passing here props instead of updatePayload, is this okay?
+        internalInstanceHandle: workInProgress,
+        publicInstance: null,
+        publicRootInstance: rootContainerInstance.publicInstance,
+      },
+    }
+  },
+
+  finalizeInitialChildren(parentInstance, type, props, hostContext) {
+    return false
+  },
+
+  cloneInstance(instance, type, oldProps, newProps, keepChildren, newChildSet) {
+
+    const viewConfig = instance.canonical.viewConfig
+    const updatePayload = diffAttributePayloads(
+      oldProps,
+      newProps,
+      viewConfig.validAttributes
+    )
+    // TODO: If the event handlers have changed, we need to update the current props
+    // in the commit phase but there is no host config hook to do it yet.
+    // So instead we hack it by updating it in the render phase.
+    instance.canonical.currentProps = newProps
+
+    const node = instance.node
+    let clone
+    if (keepChildren) {
+      if (updatePayload !== null) {
+        clone = uiManager.cloneNodeWithNewProps(node, updatePayload)
+      } else {
+        // No changes
+        return instance
+      }
+    } else {
+      // If passChildrenWhenCloningPersistedNodes is enabled, children will be non-null
+      if (newChildSet != null) {
+        if (updatePayload !== null) {
+          clone = uiManager.cloneNodeWithNewChildrenAndProps(
+            node,
+            newChildSet,
+            updatePayload
+          )
+        } else {
+          clone = uiManager.cloneNodeWithNewChildren(node, newChildSet)
+        }
+      } else {
+        if (updatePayload !== null) {
+          clone = uiManager.cloneNodeWithNewChildrenAndProps(
+            node,
+            updatePayload
+          )
+        } else {
+          clone = uiManager.cloneNodeWithNewChildren(node)
+        }
+      }
+    }
+
+    return {
+      node: clone,
+      canonical: instance.canonical,
+    }
+  },
+  createTextInstance(
+    text,
+    rootContainerInstance,
+    hostContext,
+    internalInstanceHandle
+  ) {
+    const tag = global.nextReactTag
+    global.nextReactTag += 2
+
+    const node = uiManager.createNode(
+      tag, // reactTag
+      'RCTRawText', // viewName
+      rootContainerInstance.containerTag, // rootTag
+      { text: text }, // props
+      internalInstanceHandle // instance handle
+    )
+
+    return {
+      node: node,
+    }
+  },
+  createContainerChildSet() {
+    return uiManager.createChildSet()
+  },
+  appendChildToContainerChildSet(childSet, child) {
+    uiManager.appendChildToSet(childSet, child.node)
+  },
+  finalizeContainerChildren(container, newChildren) {
+    // Noop - children will be replaced in replaceContainerChildren
+  },
+  appendInitialChild(parentInstance, child) {
+    uiManager.appendChild(parentInstance.node, child.node)
+  },
+  replaceContainerChildren(container, newChildren) {
+    const completeRootSync = currentCompleteRootSync
+    if (completeRootSync == null) {
+      throw new Error('completeRootSync callback is required.')
+    }
+
+    completeRootSync(container.containerTag, newChildren)
+  },
+
+  // TODO: hm, this could get problematic, to share event priorities between the fabric ui manager.
+  // Maybe we need to create a clone of the ui manager? the important thing is that all view managers are resolved when we do so.
+  // However that would concern me if commitHooks from reanimated would work.
+  setCurrentUpdatePriority(priority) {
+    global.currentUpdatePriority = priority
+  },
+  getCurrentUpdatePriority() {
+    return global.currentUpdatePriority
+  },
+  resolveUpdatePriority() {
+    if (global.currentUpdatePriority !== NoEventPriority) {
+      return global.currentUpdatePriority
+    } else {
+      return DefaultEventPriority
+    }
+    // TODO:
+    /*   const currentEventPriority = fabricGetCurrentEventPriority
+    ? fabricGetCurrentEventPriority()
+    : null;
+
+  if (currentEventPriority != null) {
+    switch (currentEventPriority) {
+      case FabricDiscretePriority:
+        return DiscreteEventPriority;
+      case FabricContinuousPriority:
+        return ContinuousEventPriority;
+      case FabricIdlePriority:
+        return IdleEventPriority;
+      case FabricDefaultPriority:
+      default:
+        return DefaultEventPriority;
+    }
+  }
+
+  return DefaultEventPriority; */
+  },
+
+  getPublicInstance(instance) {
+    return getPublicInstance(instance)
+  },
+
+  // getPublicTextInstance(textInstance, internalInstanceHandle) {
+  //   if (textInstance.publicInstance == null) {
+  //     textInstance.publicInstance = createPublicTextInstance(
+  //       internalInstanceHandle
+  //     )
+  //   }
+  //   return textInstance.publicInstance
+  // },
+  // getPublicInstanceFromInternalInstanceHandle(internalInstanceHandle) {
+  //   const instance = internalInstanceHandle.stateNode
+
+  //   // React resets all the fields in the fiber when the component is unmounted
+  //   // to prevent memory leaks.
+  //   if (instance == null) {
+  //     return null
+  //   }
+
+  //   if (internalInstanceHandle.tag === HostText) {
+  //     const textInstance = instance
+  //     return this.getPublicTextInstance(textInstance, internalInstanceHandle)
+  //   }
+
+  //   const elementInstance = internalInstanceHandle.stateNode
+  //   return this.getPublicInstance(elementInstance)
+  // },
+
+  prepareForCommit(containerInfo) {
+    return null
+  },
+  resetAfterCommit(containerInfo) {},
+
+  trackSchedulerEvent() {},
+  resolveEventType() {
+    return null
+  },
+  resolveEventTimeStamp() {
+    return -1.1
+  },
+  shouldAttemptEagerTransition() {
+    return false
+  },
+  shouldSetTextContent(type, props) {
+    return false
+  },
+  // TODO: microtask scheduling, should work with worklets on the UI thread i believe! not sure though if even RN implements this?
+  supportsMicrotasks: false,
+
+  detachDeletedInstance(node) {},
+  beforeActiveInstanceBlur(internalInstanceHandle) {
+    // noop
+  },
+
+  afterActiveInstanceBlur() {
+    // noop
+  },
+
+  preparePortalMount(portalInstance) {
+    // noop
+  },
+
+  detachDeletedInstance(node) {
+    // noop
+  },
+
+  requestPostPaintCallback(callback) {
+    // noop
+  },
+
+  maySuspendCommit(type, props) {
+    return false
+  },
+
+  maySuspendCommitOnUpdate(type, oldProps, newProps) {
+    return false
+  },
+  maySuspendCommitInSyncRender(type, props) {
+    return false
+  },
+
+  preloadInstance(instance, type, props) {
+    return true
+  },
+  startSuspendingCommit() {
+    return null
+  },
+  suspendInstance(state, instance, type, props) {},
+
+  suspendOnActiveViewTransition(state, container) {},
+
+  waitForCommitToBeReady(state, timeoutOffset) {
+    return null
+  },
+
+  getSuspendedCommitReason(state, rootContainer) {
+    return null
+  },
+
+  isPrimaryRenderer: false,
+}
+
+const Renderer = Reconciler(HostConfig)
+global.React = require('react')
+
+function createRootContainer(surfaceId: number) {
+  const rootInstance = {
+    containerTag: surfaceId,
+    publicInstance: null,
+  }
+
+  return Renderer.createContainer(
+    rootInstance,
+    0, // concurrentRoot ? 1 : 0
+    null,
+    false,
+    null,
+    'ui-renderer-' + surfaceId,
+    function onUncaughtError(error, info) {
+      nativeLog(
+        '[Error][ReactFabricMirror] Uncaught error in React renderer: ',
+        error,
+        info
+      )
+    },
+    function onCaughtError(error, info) {
+      nativeLog(
+        '[Error][ReactFabricMirror] Caught error in React renderer: ',
+        error,
+        info
+      )
+    },
+    function onRecoverableError(error, info) {
+      nativeLog(
+        '[Error][ReactFabricMirror] Recoverable error in React renderer: ',
+        error,
+        info
+      )
+    },
+    function nativeOnDefaultTransitionIndicator() {
+      // Native doesn't have a default indicator.
+    }
+  )
+}
+
+function getRootContainer(surfaceId: number) {
+  let rootContainer = global.rootContainersBySurfaceId[surfaceId]
+  if (rootContainer == null) {
+    rootContainer = createRootContainer(surfaceId)
+    global.rootContainersBySurfaceId[surfaceId] = rootContainer
+  }
+
+  return rootContainer
+}
+
+function reactRender(
+  surfaceId: number,
+  element: ReactModule.ReactElement,
+  callback?: () => void,
+  completeRootSync?: (surfaceId: number, childSet: unknown) => void
+): void {
+  const rootContainer = getRootContainer(surfaceId)
+  const previousCompleteRootSync = currentCompleteRootSync
+  currentCompleteRootSync = completeRootSync ?? null
+
+  // updateContainerSync + flushSyncWork is making the renderer work immediately/blocking/…sync
+  try {
+    Renderer.updateContainerSync(element, rootContainer, null, callback)
+    // Renderer.flushPassiveEffects();
+    Renderer.flushSyncWork()
+  } finally {
+    currentCompleteRootSync = previousCompleteRootSync
+  }
+}
+
+function disposeReactRoot(
+  surfaceId: number,
+  completeRootSync: (surfaceId: number, childSet: unknown) => void
+): void {
+  const rootContainer = global.rootContainersBySurfaceId[surfaceId]
+  if (rootContainer == null) {
+    return
+  }
+
+  const previousCompleteRootSync = currentCompleteRootSync
+  currentCompleteRootSync = completeRootSync
+  try {
+    Renderer.updateContainerSync(null, rootContainer, null, null)
+    Renderer.flushSyncWork()
+    delete global.rootContainersBySurfaceId[surfaceId]
+  } finally {
+    currentCompleteRootSync = previousCompleteRootSync
+  }
+}
+nativeLog('[ReactFabricMirror] ReactFabricMirror initialized')
+
+export { disposeReactRoot, nativeLog, reactRender }