{"commit":{"authorEmail":"bvaughn@fb.com","authoredAt":"2019-07-25T08:21:41-07:00","subject":"Support new Flare hook, unstable_useListener","revision":"270f34f7f0e1d121c340937fe3302908ec117e3d","shortRevision":"270f34f7f0","authorName":"Brian Vaughn"},"body":"","parents":["8d1c82901942a67f51847c1e1dbedb1732f0bed6"],"files":[{"path":"src\/backend\/ReactDebugHooks.js","status":"M"},{"path":"src\/backend\/types.js","status":"M"}],"patch":"diff --git a\/src\/backend\/ReactDebugHooks.js b\/src\/backend\/ReactDebugHooks.js\nindex 7dc1e1c2f5..01734c840a 100644\n--- a\/src\/backend\/ReactDebugHooks.js\n+++ b\/src\/backend\/ReactDebugHooks.js\n@@ -8,6 +8,8 @@\n \n import ErrorStackParser from 'error-stack-parser';\n \n+import type { ReactContext, ReactEventResponder } from '.\/types';\n+\n type Fiber = any;\n type Hook = any;\n \n@@ -28,6 +30,8 @@ type HookLogEntry = {\n value: mixed,\n };\n \n+const emptyObject = {};\n+\n let hookLog: Array = [];\n \n \/\/ Primitives\n@@ -53,9 +57,9 @@ function getPrimitiveStackCache(): Map> {\n Dispatcher.useLayoutEffect(() => {});\n Dispatcher.useEffect(() => {});\n Dispatcher.useImperativeHandle(undefined, () => null);\n+ Dispatcher.useDebugValue(null);\n Dispatcher.useCallback(() => {});\n Dispatcher.useMemo(() => null);\n- Dispatcher.useDebugValue(null);\n } finally {\n readHookLog = hookLog;\n hookLog = [];\n@@ -79,14 +83,17 @@ function nextHook(): null | Hook {\n }\n \n function readContext(\n- context: any,\n+ context: ReactContext,\n observedBits: void | number | boolean\n ): T {\n \/\/ For now we don't expose readContext usage in the hooks debugging info.\n return context._currentValue;\n }\n \n-function useContext(context: any, observedBits: void | number | boolean): T {\n+function useContext(\n+ context: ReactContext,\n+ observedBits: void | number | boolean\n+): T {\n hookLog.push({\n primitive: 'Context',\n stackError: new Error(),\n@@ -109,13 +116,18 @@ function useState(\n return [state, (action: BasicStateAction) => {}];\n }\n \n-function useReducer(\n+function useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null\n+ initialArg: I,\n+ init?: I => S\n ): [S, Dispatch] {\n const hook = nextHook();\n- const state = hook !== null ? hook.memoizedState : initialState;\n+ let state;\n+ if (hook !== null) {\n+ state = hook.memoizedState;\n+ } else {\n+ state = init !== undefined ? init(initialArg) : ((initialArg: any): S);\n+ }\n hookLog.push({\n primitive: 'Reducer',\n stackError: new Error(),\n@@ -136,7 +148,7 @@ function useRef(initialValue: T): { current: T } {\n }\n \n function useLayoutEffect(\n- create: () => mixed,\n+ create: () => (() => void) | void,\n inputs: Array | void | null\n ): void {\n nextHook();\n@@ -148,7 +160,7 @@ function useLayoutEffect(\n }\n \n function useEffect(\n- create: () => mixed,\n+ create: () => (() => void) | void,\n inputs: Array | void | null\n ): void {\n nextHook();\n@@ -176,22 +188,22 @@ function useImperativeHandle(\n });\n }\n \n-function useCallback(callback: T, inputs: Array | void | null): T {\n- const hook = nextHook();\n+function useDebugValue(value: any, formatterFn: ?(value: any) => any) {\n hookLog.push({\n- primitive: 'Callback',\n+ primitive: 'DebugValue',\n stackError: new Error(),\n- value: hook !== null ? hook.memoizedState[0] : callback,\n+ value: typeof formatterFn === 'function' ? formatterFn(value) : value,\n });\n- return callback;\n }\n \n-function useDebugValue(value: any, formatterFn: ?(value: any) => any) {\n+function useCallback(callback: T, inputs: Array | void | null): T {\n+ const hook = nextHook();\n hookLog.push({\n- primitive: 'DebugValue',\n+ primitive: 'Callback',\n stackError: new Error(),\n- value: typeof formatterFn === 'function' ? formatterFn(value) : value,\n+ value: hook !== null ? hook.memoizedState[0] : callback,\n });\n+ return callback;\n }\n \n function useMemo(\n@@ -204,6 +216,21 @@ function useMemo(\n return value;\n }\n \n+function useListener(\n+ responder: ReactEventResponder,\n+ hookProps: ?Object\n+): void {\n+ const value = {\n+ responder: responder.displayName || 'EventComponent',\n+ props: hookProps || emptyObject,\n+ };\n+ hookLog.push({\n+ primitive: 'Listener',\n+ stackError: new Error(),\n+ value,\n+ });\n+}\n+\n const Dispatcher = {\n readContext,\n useCallback,\n@@ -216,6 +243,7 @@ const Dispatcher = {\n useReducer,\n useRef,\n useState,\n+ useListener,\n };\n \n \/\/ Inspect\n@@ -400,10 +428,10 @@ function buildTree(rootStack, readHookLog): HooksTree {\n for (let j = stack.length - commonSteps - 1; j >= 1; j--) {\n const children = [];\n levelChildren.push({\n- name: parseCustomHookName(stack[j - 1].functionName),\n- value: undefined,\n id: null,\n isStateEditable: false,\n+ name: parseCustomHookName(stack[j - 1].functionName),\n+ value: undefined,\n subHooks: children,\n });\n stackOfChildren.push(levelChildren);\n@@ -438,10 +466,11 @@ function buildTree(rootStack, readHookLog): HooksTree {\n return rootChildren;\n }\n \n-\/\/ Custom hooks support user-configurable labels (via the useDebugValue() hook).\n-\/\/ That hook adds the user-provided values to the hooks tree.\n-\/\/ This method removes those values (so they don't appear in DevTools),\n-\/\/ and bubbles them up to the \"value\" attribute of their parent custom hook.\n+\/\/ Custom hooks support user-configurable labels (via the special useDebugValue() hook).\n+\/\/ That hook adds user-provided values to the hooks tree,\n+\/\/ but these values aren't intended to appear alongside of the other hooks.\n+\/\/ Instead they should be attributed to their parent custom hook.\n+\/\/ This method walks the tree and assigns debug values to their custom hook owners.\n function processDebugValues(\n hooksTree: HooksTree,\n parentHooksNode: HooksNode | null\n@@ -459,8 +488,8 @@ function processDebugValues(\n }\n }\n \n- \/\/ Bubble debug value labels to their parent custom hook.\n- \/\/ If there is no parent hook, just ignore them.\n+ \/\/ Bubble debug value labels to their custom hook owner.\n+ \/\/ If there is no parent hook, just ignore them for now.\n \/\/ (We may warn about this in the future.)\n if (parentHooksNode !== null) {\n if (debugValueHooksNodes.length === 1) {\n@@ -476,6 +505,12 @@ export function inspectHooks(\n props: Props,\n currentDispatcher: ReactCurrentDispatcher\n ): HooksTree {\n+ \/\/ DevTools will pass the current renderer's injected dispatcher.\n+ \/\/ Other apps might compile debug hooks as part of their app though.\n+ \/\/if (currentDispatcher == null) {\n+ \/\/currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;\n+ \/\/}\n+\n const previousDispatcher = currentDispatcher.current;\n let readHookLog;\n currentDispatcher.current = Dispatcher;\n@@ -554,6 +589,12 @@ export function inspectHooksOfFiber(\n fiber: Fiber,\n currentDispatcher: ReactCurrentDispatcher\n ) {\n+ \/\/ DevTools will pass the current renderer's injected dispatcher.\n+ \/\/ Other apps might compile debug hooks as part of their app though.\n+ \/\/if (currentDispatcher == null) {\n+ \/\/currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;\n+ \/\/}\n+\n if (\n fiber.tag !== FunctionComponent &&\n fiber.tag !== SimpleMemoComponent &&\ndiff --git a\/src\/backend\/types.js b\/src\/backend\/types.js\nindex ac6b6a49da..6bc08d6e18 100644\n--- a\/src\/backend\/types.js\n+++ b\/src\/backend\/types.js\n@@ -91,6 +91,27 @@ export type GetFiberIDForNative = (\n ) => number | null;\n export type FindNativeNodesForFiberID = (id: number) => ?Array;\n \n+export type ReactProviderType = {\n+ $$typeof: Symbol | number,\n+ _context: ReactContext,\n+};\n+\n+export type ReactContext = {\n+ $$typeof: Symbol | number,\n+ Consumer: ReactContext,\n+ Provider: ReactProviderType,\n+\n+ _calculateChangedBits: ((a: T, b: T) => number) | null,\n+\n+ _currentValue: T,\n+ _currentValue2: T,\n+ _threadCount: number,\n+\n+ \/\/ DEV only\n+ _currentRenderer?: Object | null,\n+ _currentRenderer2?: Object | null,\n+};\n+\n export type ReactRenderer = {\n findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,\n version: string,\n@@ -332,3 +353,22 @@ export type HooksNode = {\n subHooks: Array,\n };\n export type HooksTree = Array;\n+\n+export type ReactEventResponder = {\n+ $$typeof: Symbol | number,\n+ displayName: string,\n+ targetEventTypes: null | Array,\n+ rootEventTypes: null | Array,\n+ getInitialState: null | ((props: Object) => Object),\n+ onEvent:\n+ | null\n+ | ((event: E, context: C, props: Object, state: Object) => void),\n+ onRootEvent:\n+ | null\n+ | ((event: E, context: C, props: Object, state: Object) => void),\n+ onMount: null | ((context: C, props: Object, state: Object) => void),\n+ onUnmount: null | ((context: C, props: Object, state: Object) => void),\n+ onOwnershipChange:\n+ | null\n+ | ((context: C, props: Object, state: Object) => void),\n+};\n"}

dillon1000/react

Files changed