DevTools: Update named hooks match to use column number also (faceboo…

…k#21833)

This prevents edge cases where AST nodes are incorrectly matched.

.eslintignore

@@ -21,6 +21,7 @@ packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist

.prettierignore

@@ -3,6 +3,7 @@ packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist

packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithMultipleHooksPerLine.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {createContext, useContext} from 'react';
+
+const A = createContext(1);
+const B = createContext(2);
+
+export function Component() {
+  const a = useContext(A);
+  const b = useContext(B);
+
+  // prettier-ignore
+  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var
+
+  return a + b + c + d;
+}

packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const {useDebugValue, useState} = require('react');
+
+function Component(props) {
+  const foo = useCustomHookOne();
+  // This cae is ignored;
+  // the meaning of a tuple assignment for a custom hook is unclear.
+  const [bar] = useCustomHookTwo();
+  return `${foo}-${bar}`;
+}
+
+function useCustomHookOne() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example');
+  return true;
+}
+
+function useCustomHookTwo() {
+  const [baz, setBaz] = useState(true);
+  return [baz, setBaz];
+}
+
+module.exports = {Component};

packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const {useDebugValue} = require('react');
+
+function Component(props) {
+  useCustomHookOne();
+  const [bar] = useCustomHookTwo();
+  return bar;
+}
+
+function useCustomHookOne() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example');
+}
+
+function useCustomHookTwo() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example');
+  return [true];
+}
+
+module.exports = {Component};

packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const React = require('react');
+const {useEffect} = React;
+
+function Component(props) {
+  useEffect(() => {});
+  React.useLayoutEffect(() => () => {});
+  return null;
+}
+
+module.exports = {Component};

packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const React = require('react');
+const {useReducer} = React;
+
+function Component(props) {
+  const [foo] = useReducer(true);
+  const [bar] = useReducer(true);
+  const [baz] = React.useReducer(true);
+  return `${foo}-${bar}-${baz}`;
+}
+
+module.exports = {Component};

packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const React = require('react');
+const {useState} = React;
+
+function Component(props) {
+  const [foo] = useState(true);
+  const bar = useState(true);
+  const [baz] = React.useState(true);
+  return `${foo}-${bar}-${baz}`;
+}
+
+module.exports = {Component};

packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/README.md

@@ -0,0 +1 @@
+The JavaScript source files in this directory are not linted or pre-processed in any way. This is intentional, since they are used by the `parseHookNames-test` to test the behavior of "uncompiled" JavaScript (without source maps).

packages/react-devtools-extensions/src/__tests__/__source__/index.js

@@ -9,6 +9,7 @@
 
 export {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';
 export {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';
+export {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';
 export {Component as Example} from './Example';
 export {Component as InlineRequire} from './InlineRequire';
 import * as ToDoList from './ToDoList';