Commit Graph

54 Commits

Author SHA1 Message Date
Juan
b537247678 New devtools test for named hooks verifying case when hooks are used indirectly (#21996)
## Summary
Adds a new unit test to `parseHookNames-test` which verifies that we correctly give names to hooks when they are used indirectly: 

e.g.
```
  const countState = useState(0);
  const count = countState[0];
  const setCount = countState[1];
``` 

Should produce `count` as the name.

## Test plan

```
yarn test
yarn test-build-devtools
yarn test-build-devtools parseHookNames
```
2021-07-30 17:10:46 -04:00
Brian Vaughn
f4161c3ec7 [DRAFT] Import scheduling profiler into DevTools Profiler (#21897) 2021-07-22 13:58:57 -04:00
Lucas Correia
25f09e3e4e DevTools: Parse named source AST in a worker (#21902)
Resolves #21855

Ended up using workerize in order to setup the worker once it allows easy imports (for babel's parse function) and exports.
2021-07-21 12:16:08 -04:00
Brian Vaughn
6840c98c32 Remove named hooks feature flag (#21894) 2021-07-16 00:14:20 -04:00
Brian Vaughn
e26cb8f86d Clear named hooks Suspense and AST cache after a Fast Refresh (#21891) 2021-07-15 23:39:30 -04:00
Brian Vaughn
87b3ada89d DevTools: Named hooks supports "cheap-module-source-map" (#21874)
"cheap-module-source-map" is the default source-map generation mode used in created-react-dev mode because of speed. The major trade-off is that the source maps generated don't contain column numbers, so DevTools needs to be more lenient when matching AST nodes in this mode.

In this case, it can ignore column numbers and match nodes using line numbers only– so long as only a single node matches. If more than one match is found, treat it the same as if none were found, and fall back to no name.
2021-07-14 14:37:27 -04:00
Brian Vaughn
9fec3f2add DevTools: Ignore multiple sourceMappingUrls for external source maps (#21871)
Added an edge case regression test and bugfix.
2021-07-13 16:39:29 -04:00
Brian Vaughn
64bbd7a7f1 Adjust Error stack columns numbers by 1 (#21865)
To account for differences between error stacks (1-based) and ASTs (0-based). In practice this change should not make an observable difference.
2021-07-13 13:28:01 -04:00
Brian Vaughn
32d88d4332 DevTools: Don't load source files contaning only unnamed hooks (#21835)
This wastes CPU cycles.
2021-07-08 16:46:17 -04:00
Brian Vaughn
f52b73f9d0 DevTools: Update named hooks match to use column number also (#21833)
This prevents edge cases where AST nodes are incorrectly matched.
2021-07-08 16:12:22 -04:00
Brian Vaughn
feb2f6892a DevTool: hook names cache no longer loses entries between selection (#21831)
Made several changes to the hooks name cache to avoid losing cached data between selected elements:
1. No longer use React-managed cache. This had the unfortunate side effect of the inspected element cache also clearing the hook names cache. For now, instead, a module-level WeakMap cache is used. This isn't great but we can revisit it later.
2. Hooks are no longer the cache keys (since hook objects get recreated between element inspections). Instead a hook key string made of fileName + line number + column number is used.
3. If hook names have already been loaded for a component, skip showing the load button and just show the hook names by default when selecting the component.
2021-07-08 13:54:16 -04:00
Brian Vaughn
b6258b05f4 DevTools named hooks: Support FLow syntax (#21815)
Detect Flow pragma (@flow) and use Flow plug-in instead of TypeScript (default)
2021-07-07 14:29:41 -04:00
Brian Vaughn
42b3c89c57 DevTooks: Don't dehydrate hook source fileNames (#21814) 2021-07-07 14:24:17 -04:00
Moti Zilberman
9c7f29ebe7 [WIP] DevTools: Support named hooks for >1 module in a bundle (#21790)
* Add named hooks test case built with Rollup

* Fix prepareStackTrace unpatching, remove sourceURL

* Prettier

* Resolve source map URL/path relative to the script

* Add failing tests for multi-module bundle

* Parse hook names from multiple modules in a bundle

* Create a HookSourceData per location key (file, line, column).
* Cache the source map per runtime URL ( = file part of location key).
* Don't store sourceMapContents - only store a consumer instance.
* Look up original source URLs in the source map correctly.
* Cache the code + AST per original URL.
* Fix off-by-one column number lookup.
* Some naming and typing tweaks related to the above.
* Stop storing the consumer outside the with() callback, which is a bug.

* Lint fix for 8d8dd25

* Added devDependencies to react-devtools-extensions package.json

* Added some debug logging and TODO comments

* Added additional DEBUG logging to hook names cache

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
2021-07-07 13:07:58 -04:00
Brian Vaughn
c5cfa71948 DevTools: Show hook names based on variable usage (#21641)
Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Co-authored-by: Saphal Patro <saphal1998@gmail.com>
Co-authored-by: VibhorCodecianGupta <vibhordelgupta@gmail.com>
2021-07-01 14:39:18 -04:00
Brian Vaughn
2bf4805e4b Update entry point exports (#21488)
The following APIs have been added to the `react` stable entry point:
* `SuspenseList`
* `startTransition`
* `unstable_createMutableSource`
* `unstable_useMutableSource`
* `useDeferredValue`
* `useTransition`

The following APIs have been added or removed from the `react-dom` stable entry point:
* `createRoot`
* `unstable_createPortal` (removed)

The following APIs have been added to the `react-is` stable entry point:
* `SuspenseList`
* `isSuspenseList`

The following feature flags have been changed from experimental to true:
* `enableLazyElements`
* `enableSelectiveHydration`
* `enableSuspenseServerRenderer`
2021-05-12 11:28:14 -04:00
Sebastian Silbermann
09a2c363a5 Expose DEV-mode warnings in devtools UI (#20463)
Co-authored-by: Brian Vaughn <bvaughn@fb.com>
2020-12-22 11:09:29 -05:00
Saikat Guha
4eb589169c DevTools: Handle restricted browser pages properly like new tab page, extensions page etc(only chrome and edge for now) (#20023) 2020-10-14 13:59:05 -04:00
Saikat Guha
91d2b6ef01 DevTools: Remove ReactJS.org version check "cheat" (#19939)
Remove dead code as facebook.github.io/react always redirects to reactjs.org, which has prod version of react. so removing the "cheat" (#19939)
2020-10-01 10:16:50 -04:00
Brian Vaughn
c3ee973c56 Fix emoji character displayed in Chrome extension (#19603) 2020-08-13 11:16:35 -04:00
Pascal Fong Kye
b6e1d08604 DevTools bug fix: Proxied methods should be safely dehydrated for display 2020-08-12 12:15:53 -04:00
Ricky
30b47103d4 Fix spelling errors and typos (#19138) 2020-06-15 19:59:44 -04:00
Brian Vaughn
2efe63d99c DevTools: Add break-on-warn feature (#19048)
This commit adds a new tab to the Settings modal: Debugging

This new tab has the append component stacks feature and a new one: break on warn

This new feature adds a debugger statement into the console override
2020-05-29 14:34:43 -07:00
Brian Vaughn
7eaa1d7e33 Updated DevTools unstable_ API references (#18847) 2020-05-06 11:14:30 -07:00
Sebastian Markbåge
3e94bce765 Enable prefer-const lint rules (#18451)
* Enable prefer-const rule

Stylistically I don't like this but Closure Compiler takes advantage of
this information.

* Auto-fix lints

* Manually fix the remaining callsites
2020-04-01 12:35:52 -07:00
Mark Huang
08c1f79e1e Fix Cannot read property 'sub' of undefined when navigating to plain-text pages (#17848)
Update various parts of DevTools to account for the fact that the global "hook" might be undefined if DevTools didn't inject it (due to the page's `contentType`) it (due to the page's `contentType`)
2020-02-02 12:04:48 -08:00
Brian Vaughn
d2ae77d0e4 Remove root.unmount() callback from DevTools code (#17939) 2020-01-30 09:36:43 -08:00
Brian Vaughn
1e1a989422 Re-enabled DevTools context menu option in Firefox to inspect function prop source (#17838) 2020-01-14 14:00:28 -08:00
Brian Vaughn
1c63b2e416 Renamed "backend.js" to "react_devtools_backend.js" (#17790) 2020-01-06 09:29:20 -08:00
Brian Vaughn
22ef96ae63 Devtools renable copy attr context menu for firefox (#17740)
* Use exportFunction() to share clipboard copy with JS running in document/page context.

* Remove no-longer-used option to disable copy operation.
2019-12-29 13:27:44 -08:00
Brian Vaughn
2b903da355 Make DevTools check document.contentType before injecting (#17739)
It should only inject the global hook into HTML documents. This will avoid breaking syntax highlighting for e.g. XML documents.
2019-12-29 13:02:50 -08:00
Brian Vaughn
79734771cd Disable "copy to clipboard" and "go to definition" context menu options for Firefox addon (#17668) 2019-12-20 08:31:38 -08:00
Brian Vaughn
933f6a07ca DevTools context menu (#17608)
* Added rudimentary context menu hook and menu UI

* Added backend support for copying a value at a specific path for the inspected element

* Added backend support for storing a value (at a specified path) as a global variable

* Added special casing to enable copying undefined/unserializable values to the clipboard

* Added copy and store-as-global context menu options to selected element props panel

* Store global variables separately, with auto-incremented name (like browsers do)

* Added tests for new copy and store-as-global backend functions

* Fixed some ownerDocument/contentWindow edge cases

* Refactored context menu to support dynamic options

Used this mechanism to add a conditional menu option for inspecting the current value (if it's a function)

* Renamed "safeSerialize" to "serializeToString" and added inline comment
2019-12-18 12:12:34 -08:00
Sebastian Markbåge
68fb58029d Remove unstable_ prefix in various internal uses (#17146)
* Rename unstable_createRoot in DevTools

* Rename createSyncRoot in warning
2019-10-18 17:18:10 -07:00
Brian Vaughn
0545f366d4 Added trace updates feature (DOM only) (#16989)
* Added trace updates feature (DOM only)
* Updated DevTools CHANGELOG
2019-10-03 11:07:18 -07:00
David Huang
6a3de7a414 [DevTools] postMessage target origin needs to be '*' for local files (#16953) 2019-09-30 08:29:18 -07:00
Brian Vaughn
b6606ecba8 DevTools shows unsupported renderer version dialog (#16897)
* DevTools shows unsupported renderer version dialog

* Optimistic CHANGELOG udpate
2019-09-26 08:41:46 -07:00
David Huang
49b0cb6db8 Moving backend injection to the content script (#16900) 2019-09-26 14:03:07 +01:00
Brian Vaughn
bce2ac63a9 Revert change to backend injection method from PR #16752 (#16864)
PR #16752 changed how we were injecting the backend script to be done by the content script in order to work around Trusted Type limitations with our previous approach. This may have caused a regression (see #16840) so I'm backing it out to verify.
2019-09-23 12:56:36 -07:00
Dan Abramov
4ddcb8e134 [DevTools] Remove Welcome dialog (#16834) 2019-09-19 08:41:18 -07:00
Anton Korzunov
ba932a5ad9 fix: inspect ClassComponent.render instead of constructor, fixes #16749 (#16759) 2019-09-12 08:32:42 -07:00
Brian Vaughn
efa780d0ab Removed DT inject() script since it's no longer being used 2019-09-11 09:51:24 -07:00
Brian Vaughn
f09854a9e8 Moved inline comment. 2019-09-11 09:30:57 -07:00
Stephanie Ding
776d1c69b9 Lint fixes 2019-09-11 08:11:14 -07:00
Stephanie Ding
2e75000f40 Removed done(), added some comments explaining the change 2019-09-11 08:05:27 -07:00
Stephanie Ding
8a6cd3cd12 remove ability to inject arbitrary scripts 2019-09-10 18:06:23 -07:00
Stephanie Ding
d51f062d03 Formatting changes 2019-09-10 17:46:29 -07:00
Stephanie Ding
85c7211014 Moved injection logic to content script 2019-09-10 17:45:27 -07:00
Stephanie Ding
788036c7ed Moved backend injection logic to content script 2019-09-10 17:34:12 -07:00
Stephanie Ding
c93038fabe Moved backend injection logic to content script 2019-09-10 17:22:04 -07:00