Add useMutableSource and useOpaqueIdentifier hooks (#64)

* Add useMutableSource hook * Add useOpaqueIdentifier * Memoize opaque identifiers * Add useOpaqueIdentifier hook to Dispatcher

Author: kitten

src/index.js

@@ -1,7 +1,13 @@
 // @flow
 
 import { type Node, type Element } from 'react'
-import type { Visitor, YieldFrame, Frame, AbstractElement } from './types'
+import type {
+ Visitor,
+ YieldFrame,
+ Frame,
+ AbstractElement,
+ RendererState
+} from './types'
 import { visit, update, SHOULD_YIELD } from './visitor'
 import { getChildrenArray } from './element'
 
@@ -10,6 +16,8 @@ import {
  setCurrentContextMap,
  setCurrentErrorFrame,
  getCurrentErrorFrame,
+ setCurrentRendererState,
+ initRendererState,
  Dispatcher
 } from './internals'
 
@@ -18,7 +26,11 @@ import {
  the queue. Hence we recursively look at suspended components in
  this queue, wait for their promises to resolve, and continue
  calling visit() on their children. */
-const flushFrames = (queue: Frame[], visitor: Visitor): Promise<void> => {
+const flushFrames = (
+ queue: Frame[],
+ visitor: Visitor,
+ state: RendererState
+): Promise<void> => {
  const frame = queue.shift()
  if (!frame) {
  return Promise.resolve()
@@ -32,8 +44,9 @@ const flushFrames = (queue: Frame[], visitor: Visitor): Promise<void> => {
 
  return Promise.resolve(frame.thenable).then(
  () => {
+ setCurrentRendererState(state)
  update(frame, queue, visitor)
- return flushFrames(queue, visitor)
+ return flushFrames(queue, visitor, state)
  },
  (error: Error) => {
  if (!frame.errorFrame) throw error
@@ -49,7 +62,10 @@ const renderPrepass = (element: Node, visitor?: Visitor): Promise<void> => {
  if (!visitor) visitor = defaultVisitor
 
  const queue: Frame[] = []
-
+ // Renderer state is kept globally but restored and
+ // passed around manually since it isn't dependent on the
+ // render tree
+ const state = initRendererState()
  // Context state is kept globally and is modified in-place.
  // Before we start walking the element tree we need to reset
  // its current state
@@ -63,7 +79,7 @@ const renderPrepass = (element: Node, visitor?: Visitor): Promise<void> => {
  return Promise.reject(error)
  }
 
- return flushFrames(queue, visitor)
+ return flushFrames(queue, visitor, state)
 }
 
 export default renderPrepass

src/internals/dispatcher.js

@@ -2,9 +2,13 @@
 // Source: https://github.com/facebook/react/blob/c21c41e/packages/react-dom/src/server/ReactPartialRendererHooks.js
 
 import { readContextValue } from './context'
+import { rendererStateRef } from './state'
 import is from './objectIs'
 
 import type {
+ MutableSource,
+ MutableSourceGetSnapshotFn,
+ MutableSourceSubscribeFn,
  AbstractContext,
  BasicStateAction,
  Dispatch,
@@ -14,6 +18,7 @@ import type {
 } from '../types'
 
 export opaque type Identity = {}
+export opaque type OpaqueIDType = string
 
 let currentIdentity: Identity | null = null
 
@@ -245,6 +250,15 @@ function useRef<T>(initialValue: T): { current: T } {
  }
 }
 
+function useOpaqueIdentifier(): OpaqueIDType {
+ getCurrentIdentity()
+ workInProgressHook = createWorkInProgressHook()
+ if (!workInProgressHook.memoizedState)
+ workInProgressHook.memoizedState =
+ 'R:' + (rendererStateRef.current.uniqueID++).toString(36)
+ return workInProgressHook.memoizedState
+}
+
 function dispatchAction<A>(
  componentIdentity: Identity,
  queue: UpdateQueue<A>,
@@ -284,6 +298,15 @@ function useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  return useMemo(() => callback, deps)
 }
 
+function useMutableSource<Source, Snapshot>(
+ source: MutableSource<Source>,
+ getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+ _subscribe: MutableSourceSubscribeFn<Source, Snapshot>
+): Snapshot {
+ getCurrentIdentity()
+ return getSnapshot(source._source)
+}
+
 function noop(): void {}
 
 function useTransition(): [(callback: () => void) => void, boolean] {
@@ -305,8 +328,10 @@ export const Dispatcher = {
  useRef,
  useState,
  useCallback,
+ useMutableSource,
  useTransition,
  useDeferredValue,
+ useOpaqueIdentifier,
  // ignore useLayout effect completely as usage of it will be caught
  // in a subsequent render pass
  useLayoutEffect: noop,

src/internals/index.js

@@ -2,4 +2,5 @@
 
 export * from './context'
 export * from './error'
+export * from './state'
 export * from './dispatcher'

src/internals/state.js

@@ -0,0 +1,12 @@
+// @flow
+
+import type { RendererState } from '../types'
+
+/** The current global renderer state per render cycle */
+export const rendererStateRef: {| current: RendererState |} = {
+ current: { uniqueID: 0 }
+}
+export const initRendererState = (): RendererState =>
+ (rendererStateRef.current = { uniqueID: 0 })
+export const setCurrentRendererState = (state: RendererState) =>
+ (rendererStateRef.current = state)

src/types/element.js

@@ -180,3 +180,17 @@ export type AbstractElement =
  | DOMElement
  | PortalElement
  | SuspenseElement
+
+export type MutableSourceGetSnapshotFn<
+ Source: $NonMaybeType<mixed>,
+ Snapshot
+> = (source: Source) => Snapshot
+
+export type MutableSourceSubscribeFn<Source: $NonMaybeType<mixed>, Snapshot> = (
+ source: Source,
+ callback: (snapshot: Snapshot) => void
+) => () => void
+
+export type MutableSource<Source: $NonMaybeType<mixed>> = {
+ _source: Source
+}

src/types/frames.js

@@ -47,3 +47,7 @@ export type YieldFrame = BaseFrame & {
 }
 
 export type Frame = ClassFrame | HooksFrame | LazyFrame | YieldFrame
+
+export type RendererState = {|
+ uniqueID: number
+|}