Compare commits

..

360 Commits

Author SHA1 Message Date
Brian Vaughn
11565a207c Revert "Scheduler.unstable_next (#14756)"
This reverts commit bc9818f24d.
2019-02-06 17:16:39 +00:00
Brian Vaughn
f2e2637c8e Backwards compat fix for ReactCurrentDispatcher on older react versions (#14770)
* Add current owner ref fallback for newer renderers with older react versions
* Replaced current owner forward with current:null
2019-02-06 17:02:14 +00:00
Sunil Pai
1107b9673c [TestUtils.act] warn when using TestUtils.act in node (#14768)
* warn when using TestUtils.act in node

* s/warns/throws

* s/throw/warn

* consistent ellipses
2019-02-06 16:25:26 +00:00
Brian Vaughn
0975ea3278 eslint-plugin-react-hooks v1.0.0 2019-02-06 10:14:57 +00:00
Dan Abramov
d827445a50 Add 16.8.0 changelog and update some READMEs (#14692)
* Add 16.8.0 changelog

* Mention ESLint plugin

* Remove experimental notices from the ESLint plugin README

* Update CHANGELOG.md

* Add more details for Hooks

* fix

* Set a date

* Update CHANGELOG.md

Co-Authored-By: gaearon <dan.abramov@gmail.com>

* Update CHANGELOG.md

* useReducer in changelog

* Add to changelog

* Update date

* Add #14119 to changelog

* Add #14744 to changelog

* Fix PR links

* act() method was added to test utils, too

* Updated release date to February 6th
2019-02-06 08:31:00 +00:00
Andrew Clark
bc9818f24d Scheduler.unstable_next (#14756)
* Add Scheduler.unstable_next

* Use Scheduler to prioritize updates

Changes the implementation of syncUpdates, deferredUpdates, and
interactiveUpdates to use runWithPriority, so

This is the minimum integration between Scheduler and React needed to
unblock use of the Scheduler.next API.

* Add Scheduler.unstable_next

* Use Scheduler to prioritize updates

Changes the implementation of syncUpdates, deferredUpdates, and
interactiveUpdates to use runWithPriority, so

This is the minimum integration between Scheduler and React needed to
unblock use of the Scheduler.next API.
2019-02-06 08:16:41 +00:00
Dan Abramov
b5398a9130 Add 16.8.0 changelog and update some READMEs (#14692)
* Add 16.8.0 changelog

* Mention ESLint plugin

* Remove experimental notices from the ESLint plugin README

* Update CHANGELOG.md

* Add more details for Hooks

* fix

* Set a date

* Update CHANGELOG.md

Co-Authored-By: gaearon <dan.abramov@gmail.com>

* Update CHANGELOG.md

* useReducer in changelog

* Add to changelog

* Update date

* Add #14119 to changelog

* Add #14744 to changelog

* Fix PR links

* act() method was added to test utils, too

* Updated release date to February 6th
2019-02-06 08:05:54 +00:00
Dan Abramov
ce6ecd3fbf Add 16.8.0 changelog and update some READMEs (#14692)
* Add 16.8.0 changelog

* Mention ESLint plugin

* Remove experimental notices from the ESLint plugin README

* Update CHANGELOG.md

* Add more details for Hooks

* fix

* Set a date

* Update CHANGELOG.md

Co-Authored-By: gaearon <dan.abramov@gmail.com>

* Update CHANGELOG.md

* useReducer in changelog

* Add to changelog

* Update date

* Add #14119 to changelog

* Add #14744 to changelog

* Fix PR links

* act() method was added to test utils, too

* Updated release date to February 6th
2019-02-06 08:05:18 +00:00
Brian Vaughn
008a2ab9cd 16.8.0 2019-02-06 08:04:00 +00:00
Sunil Pai
d1326f466a [TestUtils.act] fix return result checking (#14758)
* fix .act return value testing when result === null

* nit
2019-02-05 17:34:21 +00:00
Sunil Pai
267ed98146 expose TestUtils.act() for batching actions in tests (#14744)
* expose unstable_interact for batching actions in tests

* move to TestUtils

* move it all into testutils

* s/interact/act

* warn when calling hook-like setState outside batching mode

* pass tests

* merge-temp

* move jsdom test to callsite

* mark failing tests

* pass most tests (except one)

* augh IE

* pass fuzz tests

* better warning, expose the right batchedUpdates on TestRenderer for www

* move it into hooks, test for dom

* expose a flag on the host config, move stuff around

* rename, pass flow

* pass flow... again

* tweak .act() type

* enable for all jest environments/renderers; pass (most) tests.

* pass all tests

* expose just the warning from the scheduler

* don't return values

* a bunch of changes.

can't return values from .act
don't try to await .act calls
pass tests

* fixes and nits

* "fire events that udpates state"

* nit

* 🙄

* my bad

* hi andrew

(prettier fix)
2019-02-05 16:10:16 +00:00
Andrew Clark
fb3f7bfde9 Avoid importing Scheduler directly (#14757)
* Avoid importing Scheduler directly

The reconciler should not depend directly on Scheduler. This adds it to
the host config for the renderer instead.

(Except for `scheduler/tracing` imports, which are used only by the
profiling build. I've left those imports as-is, though I'm open to
directing those through the host config, too.)

* Make throwaway root id longer to appease Brian
2019-02-05 03:21:25 -08:00
Dan Abramov
81470a0027 Add missing 16.6.1 changelog entry 2019-02-04 13:28:26 +00:00
Jessica Franco
e602b5291c Use SameValue instead of === to check for dispatchAction equivalence (#14752) 2019-02-04 04:56:21 -08:00
SToneX
e489c3f9c1 Update the version with Hooks proposal in README (#14751) 2019-02-04 09:36:56 +00:00
Dan Abramov
c21c41ecfa Tweak invalid Hook warning and error (#14747) 2019-02-01 21:05:13 +00:00
Deniz Susman
fec00a869c Typo in comment (#14739)
"synchronously" instead of "syncrhonously".
2019-02-01 13:26:24 +01:00
Andrew Clark
66eb293742 Restrict effect return type to a function or nothing (#14119)
* Restrict effect return type to a function or nothing

We already warn in dev if the wrong type is returned. This updates the
Flow type.

* Restrict return type further

* Assume Effect hook returns either a function or undefined

* Tweak warning message
2019-01-31 10:11:47 -08:00
Dan Abramov
51c07912ac Warn when second argument is passed to useCallback (#14729) 2019-01-31 13:56:48 +00:00
Andrew Clark
70d4075832 Move Hook mismatch warning to first mismatch site (#14720)
* Move Hook mismatch warning to first mismatch site

Allows us to localize the warning logic in one place.

* Nit
2019-01-30 08:11:18 -08:00
Andrew Clark
ba6477aa3c Improve Reducer Hook's lazy init API (#14723)
* Improve Reducer Hook's lazy init API

* Use generic type for initilizer input

Still requires an `any` cast in the case where `init` function is
not provided.
2019-01-29 17:39:24 -08:00
Andrew Clark
cb1ff430e8 Phased dispatcher (#14701)
* Move DEV-only function right above where it's used

I don't like looking at this top-level function #petty

* Use different dispatchers for functions & classes

Classes support readContext, but not any of the other dispatcher
methods. Function support all methods.

This is a more robust version of our previous strategy of checking
whether `currentlyRenderingFiber` is null.

As a next step, we can use a separate dispatcher for each phase of the
render cycle (mount versus update).

* Use separate dispatchers for mount and update

* Remove mount code from update path

Deletes mount-specific code from the update path, since it should be
unreachable. To continue supporting progressive enhancement (mounting
new hooks at the end of the list), we detect when there are no more
current hooks and switch back to the mount dispatcher. Progressive
enhancement isn't officially supported yet, so it will continue to warn.

* Factoring nits

* Fix Flow

Had to cheat more than I would like

* More Flow nits

* Switch back to using a special dispatcher for nested hooks in DEV

In order for this strategy to work, I had to revert progressive
enhancement support (appending hooks to the end). It was previously a
warning but now it results in an error. We'll reconsider later.

* Always pass args to updateState and updateReducer

Even though the extra args are only used on mount, to ensure
type consistency.
2019-01-29 16:32:15 -08:00
Peter Donald
9d483dcfd6 Spelling abitrarily -> arbitrarily (#14710) 2019-01-27 14:54:37 +00:00
DeepCold
6d5ea54eee change codeofconduct link (#14711) 2019-01-27 14:54:21 +00:00
Yurick
e19c9e1064 Fix issue with multiple code branches in hooks linter (#14661)
* Fix issue with multiple code branches

* Add solution by @calebmer

* Add performance test

* Undo unrelated change
2019-01-25 17:06:33 +00:00
Brian Vaughn
f11a9c1cb0 State update bug in concurrent mode (#14698)
* State update bug in concurrent mode

* Fix bug introduced by double-rendering Functions using hooks
2019-01-24 16:10:13 -08:00
Greg Hurrell
e679a4b6e2 Fix typo in code comment (#14696) 2019-01-24 20:19:53 +00:00
Dan Abramov
8bcc88f2e7 Make all readContext() and Hook-in-a-Hook checks DEV-only (#14677)
* Make readContext() in Hooks DEV-only warning

* Warn about readContext() during class render-phase setState()

* Warn on readContext() in SSR inside useMemo and useReducer

* Make all Hooks-in-Hooks warnings DEV-only

* Rename stashContextDependencies

* Clean up warning state on errors
2019-01-24 19:31:20 +00:00
Brian Vaughn
6cb26774e2 Enable hooks! (#14679)
* Turned enableHooks feature flag on everywhere
* Removed useHooks feature flag from tests (now that it's on by default)
* Remove useHooks feature flag entirely
2019-01-23 13:28:09 -08:00
Dan Abramov
73962c3664 Revert "Revert "Double-render function components with Hooks in DEV in StrictMode" (#14652)" (#14654)
This reverts commit 3fbebb2a0b.
2019-01-23 19:12:18 +00:00
Dan Abramov
9944392285 Put DEV-only code into DEV blocks (#14673) 2019-01-23 16:59:55 +00:00
Dan Abramov
f0befae657 Tweak context invariant message (#14671) 2019-01-23 16:14:32 +00:00
Dan Abramov
a129259ad6 Disallow reading context during useMemo etc (#14653)
* Revert "Revert "Double-render function components with Hooks in DEV in StrictMode" (#14652)"

This reverts commit 3fbebb2a0b.

* Revert "Revert "Disallow reading context during useMemo etc" (#14651)"

This reverts commit 5fce6488ce.

* Add extra passing test for an edge case

Mentioned by @acdlite to watch out for

* More convoluted test

* Don't rely on expirationTime

Addresses @acdlite's concerns

* Edge case: forbid readContext() during eager reducer
2019-01-23 15:51:57 +00:00
Sebastian Markbåge
c068d31cca Add unit tests for concurrent mode event dispatching (#14415) 2019-01-23 15:28:19 +00:00
Dan Abramov
db695c4d32 Bump GCC (#14657) 2019-01-23 14:28:03 +00:00
SamCortopassi
38247cba36 --save is no longer needed (#14302)
`--save` is on by default as of npm 5. `npm install create-subscription` is equivalent to `npm install --save create-subscription` now
2019-01-23 14:13:05 +00:00
Ramón Chancay Ortega
3f0bcaf0db Importing React for the first example. (#14346) 2019-01-23 14:10:03 +00:00
Sunil Pai
ecd919a2f9 RFC: warn when returning different hooks on subsequent renders (#14585)
* warn when returning different hooks on next render

like it says. adds a field to Hook to track effect 'type', and compares when cloning subsequently.

* lint

* review changes

- numbered enum for hook types
- s/hookType/_debugType
- better dce

* cleaner detection location

* redundant comments

* different EffectHook / LayoutEffectHook

* prettier

* top level currentHookType

* nulling currentHookType

need to verify dce still works

* small enhancements

* hook order checks for useContext/useImperative

* prettier

* stray whitespace

* move some bits around

* better errors

* pass tests

* lint, flow

* show a before - after diff

* an error stack in the warning

* lose currentHookMatches, fix a test

* tidy

* clear the mismatch only in dev

* pass flow

* side by side diff

* tweak warning

* pass flow

* dedupe warnings per fiber, nits

* better format

* nit

* fix bad merge, pass flow

* lint

* missing hooktype enum

* merge currentHookType/currentHookNameInDev, fix nits

* lint

* final nits
2019-01-22 22:40:07 +00:00
Dan Abramov
3fbebb2a0b Revert "Double-render function components with Hooks in DEV in StrictMode" (#14652)
* Revert "Revert "Disallow reading context during useMemo etc" (#14651)"

This reverts commit 5fce6488ce.

* Revert "Add test coverage for readContext() on the server (#14649)"

This reverts commit fe2ecd276e.

* Revert "Warn about incorrect use of useImperativeHandle() (#14647)"

This reverts commit 8f45a7fdc4.

* Revert "Disallow reading context during useMemo etc (#14648)"

This reverts commit 1fcbd22431.

* Revert "Warn about refs on lazy function components (#14645)"

This reverts commit 2a084f51a9.

* Revert "Fix typo (#14560)"

This reverts commit b5a3df6e88.

* Revert "fix typo (#14316)"

This reverts commit 9c146e6751.

* Revert "Mention forwardRef() in <Fn ref={...} /> errors and warnings (#14644)"

This reverts commit baa6d40fc8.

* Revert "Double-render function components with Hooks in DEV in StrictMode (#14643)"

This reverts commit a1414e8949.
2019-01-21 20:34:38 +00:00
Dan Abramov
5fce6488ce Revert "Disallow reading context during useMemo etc" (#14651)
* Revert "Add test coverage for readContext() on the server (#14649)"

This reverts commit fe2ecd276e.

* Revert "Warn about incorrect use of useImperativeHandle() (#14647)"

This reverts commit 8f45a7fdc4.

* Revert "Disallow reading context during useMemo etc (#14648)"

This reverts commit 1fcbd22431.
2019-01-21 20:28:36 +00:00
Dan Abramov
fe2ecd276e Add test coverage for readContext() on the server (#14649)
* Rename context variables

I just spent half an hour debugging why readContext(PurpleContext) doesn't work.

* Add test coverage for readContext() on the server
2019-01-21 19:55:26 +00:00
Dan Abramov
8f45a7fdc4 Warn about incorrect use of useImperativeHandle() (#14647) 2019-01-21 19:44:18 +00:00
Dan Abramov
1fcbd22431 Disallow reading context during useMemo etc (#14648)
* Disallow reading context during useMemo etc

* Continue allowing readContext() in classes and context consumers

The previous commit check was too broad and incorrectly restricted classes from calling readContext(). This check is more precise and only targets components that are Hook-capable. It exploits the fact that `renderExpirationTime` is never `NoWork` after `renderWithHooks` -- something we already rely on.
2019-01-21 19:06:09 +00:00
Dan Abramov
2a084f51a9 Warn about refs on lazy function components (#14645) 2019-01-21 16:57:55 +00:00
Linchengyi
b5a3df6e88 Fix typo (#14560)
fix typo
2019-01-21 16:18:29 +00:00
liunian
9c146e6751 fix typo (#14316) 2019-01-21 16:18:02 +00:00
Dan Abramov
baa6d40fc8 Mention forwardRef() in <Fn ref={...} /> errors and warnings (#14644) 2019-01-21 16:01:48 +00:00
Dan Abramov
a1414e8949 Double-render function components with Hooks in DEV in StrictMode (#14643)
* Double-render functions in strict mode

* Double-invoke first function component render too

* Mark TestRendererAsync test as internal and revert changes to it

TestRenderer is built with strict mode doublerender off.

We could change that but I'm not sure we want to. So I'll just flip the flag off for this test.

* Only double-invoke components using Hooks

* Revert unintentional change
2019-01-21 15:35:47 +00:00
Dan Abramov
10a7a5b5ce Fix synchronous thenable rejection (#14633)
* Fix handling of sync rejection

Reverts #14632 and adds a regression test.

* Handle rejection synchronously too

Fewer footguns and seems like nicer behavior anyway.
2019-01-19 00:42:43 +00:00
Dan Abramov
a2fa6eb98d Move lazy._result assignment (#14632) 2019-01-18 21:57:26 +00:00
Dan Abramov
9120f6c2d8 Support sync thenables for lazy() (#14626)
* Support sync thenables for lazy()

* Don't commit twice
2019-01-18 21:16:02 +00:00
Grey Baker
b66e6e41e6 Add directory details to the package.json of all packages (#14628)
Specifying the directory as part of the `repository` field in a `package.json`
allows third party tools to provide better support when working with monorepos.
For example, it allows them to correctly construct a commit diff for a specific
package.

This format was accepted by npm in https://github.com/npm/rfcs/pull/19.
2019-01-18 20:21:12 +00:00
Brian Vaughn
8c1614a2fd Tidy up NPM checkout process (#14631) 2019-01-18 11:40:50 -08:00
Dan Abramov
177fb76353 Warn when second callback is passed to setState/dispatch in Hooks (#14625) 2019-01-18 18:48:58 +00:00
Sebastian Silbermann
d17d0b99c1 Use public context.report interface in eslint rules (#14623) 2019-01-18 09:26:11 +00:00
Yi-Shan, Chen
4f332885a2 Fix shallow renderer set instance state after gDSFP before calling sCU (#14613)
* Fix shallow renderer set instance state after gDSFP before calling sCU

* Update ReactShallowRenderer.js

* Unwind abstraction

* Fewer names
2019-01-18 02:31:14 +00:00
Sunil Pai
e1cd83e49d Throw an error when using hooks inside useMemo/useState/useReducer, or .memo's comparator (#14608)
* hooks inside useMemo/.memo - failing tests

* throw an error when using hooks inside useMemo

* throw when using hooks inside .memo's compare fn

* faster/better/stronger

* same logic for useReducer, tests for the server, etc

* Update ReactDOMServerIntegrationHooks-test.internal.js

ack lint

* nits

* whitespace

* whitespace

* stray semi

* Tweak comment

* stray unmatched fiber reset

* nit
2019-01-18 02:15:21 +00:00
Dan Abramov
be457ca685 Small tweaks to SSR to match #14594 (#14618)
* Small tweaks to SSR to match #14594

* Remove unnecessary comparison
2019-01-18 00:52:13 +00:00
Dan Abramov
17d70df919 Warn when mixing createRoot() and old APIs (#14615)
* Warn when mixing createRoot() and old APIs

* Move container checks to entry points

This way further warning check doesn't crash on bad inputs.

* Fix Flow

* Rename flag to be clearer

* managed by -> passed to

* Revert accidental change

* Fix Fire shim to match
2019-01-18 00:20:21 +00:00
Brian Vaughn
4846809370 Prune NPM metadata fields from packages before re-publishing (#14617) 2019-01-17 14:34:34 -08:00
Dominic Gannaway
4feab7fc92 Add hooks support to ReactShallowRenderer (#14567)
* Add hook support to ReactShallowRenderer
2019-01-17 17:42:27 +00:00
Andrew Clark
1454a8be03 Don't bother comparing constructor when deps are not provided (#14594)
* Don't bother comparing constructor when deps are not provided

When no dependencies are passed to an effect hook, what we used to do is
compare the effect constructor. If there was no change, then we would
skip firing the effect. In practice, this is a useless optimization
because the constructor will always be different when you pass an inline
closure. And if you don't pass an inline closure, then you can't access
any props or state.

There are some edge cases where an effect that doesn't close over props
or state could be useful, like reference counting the number of mounted
components. But those are rare and can be addressed by passing an empty
array of dependencies.

By removing this "optimization," we can avoid retaining the constructor
in the majority of cases where it's a closure that changes on
every render.

I made corresponding changes to the other hooks that accept
dependencies, too (useMemo, useCallback, and useImperativeHandle).

* Improve hook dependencies warning

It now includes the name of the hook in the message.

* Nits
2019-01-16 17:53:48 -08:00
Andrew Clark
71b64d5211 Warn if number of hooks increases (#14591)
Eventually, we'll likely support adding hooks to the end (to enable
progressive enhancement), but let's warn until we figure out how it
should work.
2019-01-16 17:25:32 -08:00
Andrew Clark
790c8ef041 Allow useReducer to bail out of rendering by returning previous state (#14569)
* Allow useReducer to bail out of rendering by returning previous state

This is conceptually similar to `shouldComponentUpdate`, except because
there could be multiple useReducer (or useState) Hooks in a single
component, we can only bail out if none of the Hooks produce a new
value. We also can't bail out if any the other types of inputs — state
and context — have changed.

These optimizations rely on the constraint that components are pure
functions of props, state, and context.

In some cases, we can bail out without entering the render phase by
eagerly computing the next state and comparing it to the current one.
This only works if we are absolutely certain that the queue is empty at
the time of the update. In concurrent mode, this is difficult to
determine, because there could be multiple copies of the queue and we
don't know which one is current without doing lots of extra work, which
would defeat the purpose of the optimization. However, in our
implementation, there are at most only two copies of the queue, and if
*both* are empty then we know that the current queue must be.

* Add test for context consumers inside hidden subtree

Should not bail out during subsequent update. (This isn't directly
related to this PR because we should have had this test, anyway.)

* Refactor to use module-level variable instead of effect bit

* Add test combining state bailout and props bailout (memo)
2019-01-16 17:23:35 -08:00
Dan Abramov
8a120095bf Add ESLint rule playground (#14609)
* Add ESLint rule playground

* Update index.js

* Update index.js
2019-01-16 23:52:33 +00:00
Brian Vaughn
7ab8a8e979 Added Flow type to keep hooks dispatchers in-sync (#14599)
* Added Flow type to keep hooks dispatchers in-sync
2019-01-16 12:49:31 -08:00
Brian Vaughn
4392e3821d useDebugValue should throw if used in a class component (#14601) 2019-01-15 13:49:39 -08:00
Brian Vaughn
153a0b5980 Add noop useDebugValue hook to partial/server renderer (#14597) 2019-01-15 11:00:03 -08:00
Brian Vaughn
0ca628b216 Rename release script fixture test scheduler->tracing (#14590) 2019-01-14 17:52:03 -08:00
Brandon Dail
7ad9806d11 Tweak to avoid property read (#14593) 2019-01-14 17:39:27 -08:00
Brandon Dail
0fc1547513 Avoid new Set([iterable]) for thenables (#14592)
Fixes https://github.com/facebook/react/issues/14583

Using `new Set([iterable])` does not work with IE11's non-compliant Set
implementation. By avoiding this pattern we don't need to require a Set
polyfill for IE11
2019-01-15 01:00:15 +00:00
Brian Vaughn
edb1f59564 Support configurable labels for custom hooks (#14559)
* react-debug-tools accepts currentDispatcher ref as param

* ReactDebugHooks injected dispatcher ref is optional

* Support custom values for custom hooks

* PR feedback:

1. Renamed useDebugValueLabel hook to useDebugValue
2. Wrapped useDebugValue internals in if-DEV so that it could be removed from production builds.

* PR feedback:

1. Fixed some minor typos
2. Added inline comment explaining the purpose of  rollupDebugValues()
3. Refactored rollupDebugValues() to use a for loop rather than filter()
4. Improve check for useDebugValue hook to lessen the chance of a false positive
5. Added optional formatter function param to useDebugValue

* Nitpick renamed a method
2019-01-14 14:53:22 -08:00
Sunil Pai
3e15b1c690 make a fork for ReactCurrentDispatcher (#14588) 2019-01-14 16:35:56 +00:00
Carl Mungazi
0005d1e3f5 Fix typo (#14576) 2019-01-11 21:46:05 -08:00
Brian Vaughn
f290138d32 react-debug-tools accepts currentDispatcher ref as param (#14556)
* react-debug-tools accepts currentDispatcher ref as param

* ReactDebugHooks injected dispatcher ref is optional
2019-01-10 12:56:52 -08:00
Sunil Pai
b4ad8e9471 rename useImperativeMethods -> useImperativeHandle (#14565) 2019-01-10 13:37:50 +00:00
Brian Vaughn
ab03e3d651 Inject ReactCurrentDispatcher ref to DevTools (#14550) 2019-01-08 21:25:26 -08:00
Brian Vaughn
19ef0ec116 Separate current owner and dispatcher (#14548) 2019-01-08 14:39:52 -08:00
Maksim Markelov
a9b035b0c2 Separate Object.is polyfill (#14334)
* Separate_Object_Is_Polyfill
2019-01-08 14:21:12 +00:00
Sophie Alpert
547e059f0b Simplify wording of key warning (#14503)
I don't think "array or iterator" is adding anything, and it may well be confusing, especially since this is one of the first and most common warnings that devs see.
2019-01-07 08:30:23 -08:00
Carl Mungazi
3494ee57e6 Update ReactUpdateQueue.js (#14521)
Fix comment typo
2019-01-02 20:53:05 +00:00
Ilja Daderko
fef40c061e Allow node 11 as devEngine (#14450)
Using node 11 throws incompatibility error. This fixes it. Only test I performed was to run `yarn build -- --type=RN_OSS` everything seemed ok.
2018-12-25 17:05:31 +00:00
Carl Mungazi
659c13963e Update ReactFiberScheduler.js (#14477)
Fixed typo
2018-12-20 08:51:47 -08:00
Andrew Clark
84b86471ea Update CHANGELOG for 16.7 2018-12-19 17:29:25 -08:00
Andrew Clark
c695b2384f React v16.7.0 2018-12-19 17:23:14 -08:00
Andrew Clark
1c5aa2f23a Move SchedulerFeatureFlags fork to src directory to fix lint 2018-12-18 11:09:44 -08:00
Andrew Clark
653bc582f9 Create separate SchedulerFeatureFlags instead of using ReactFeatureFlags (#14455) 2018-12-17 17:55:34 -08:00
Andrew Clark
8bfef0da55 Make scheduler debugging feature flag static 2018-12-17 16:50:38 -08:00
Andrew Clark
4a1072194f Memoize promise listeners to prevent exponential growth (#14429)
* Memoize promise listeners to prevent exponential growth

Previously, React would attach a new listener every time a promise is
thrown, regardless of whether the same listener was already attached
during a previous render. Because React attempts to render every time
a promise resolves, the number of listeners grows quickly.

This was especially bad in synchronous mode because the renders that
happen when the promise pings are not batched together. So if a single
promise has multiple listeners for the same root, there will be multiple
renders, which in turn results in more listeners being added to the
remaining unresolved promises. This results in exponential growth in
the number of listeners with respect to the number of IO-bound
components in a single render.

Fixes #14220

* Memoize on the root and Suspense fiber instead of on the promise

* Add TODO to fix persistent mode tests
2018-12-14 11:03:23 -08:00
Brian Vaughn
535804f5c8 Removed Fabric-specific feature flag files and updated Rollup to use the (non-Fabric) React Native flag files. (#14437) 2018-12-14 07:54:46 -08:00
Brian Vaughn
2743fb7b23 Enable hooks by default for FB React Native renderer (#14435)
* Enable hooks by default for FB React Native renderer
* Updated RN+FB feature flags to make some of the dynamic ones static
2018-12-13 13:20:23 -08:00
Brian Vaughn
7325ebe4d6 Inject overrideProps() fn to DevTools (#14427)
* Inject overrideProps() fn to DevTools

This function will enable editing props for function components, host nodes, and special types like memo and forwardRef.
2018-12-13 09:40:59 -08:00
Pleun Vanderbauwhede
a22880e5e5 Add support for Suspense & lazy() to the react-is package (#14423)
* Add support for lazy & Suspense to react-is
2018-12-12 10:56:52 -08:00
Heaven
947bddd5cf Remove redundant argument of getPlugins function (#14419) 2018-12-12 10:07:07 -08:00
Brian Vaughn
ce43a8cd07 Updated version incrementing suggestion in release script based on team discussion (#14389) 2018-12-07 09:08:39 -08:00
Brian Vaughn
f64906fba1 Dangerfile exits early if build failed (#14400)
* Dangerfile exits early (without leaving an error comment) if build failed
2018-12-07 09:06:47 -08:00
Kevin Chavez
8df4d59be5 Implement pauseExecution, continueExecution, dumpQueue for Scheduler (#14053)
* Implement pauseExecution, continueExecution, dumpQueue

* Expose firstCallbackNode. Fix tests. Revert results.json

* Put scheduler pausing behind a feature flag
2018-12-06 13:57:23 -08:00
Brian Vaughn
5bb4ad7376 Added ErrorBoundary tests for useEffect and useLayoutEffect (#14401) 2018-12-06 13:55:38 -08:00
Brian Vaughn
98eb5ae531 TestRenderer toJSON should not expose the Array wrapper Suspense uses for hidden trees (#14392) 2018-12-05 11:09:51 -08:00
Spencer Ahrens
39489e7674 Enable hooks in fabric (#14301)
because hooks are awesome.
2018-12-04 19:34:52 -08:00
Brian Vaughn
1dc108e582 Tweaked wording for v8 "performance cliff" issue 2018-12-04 07:49:33 -08:00
AGCB
d9871729c8 fix spelling error: differen -> different (#14378) 2018-12-03 23:29:29 -08:00
Brian Vaughn
6bf5e85986 Fix scheduler setTimeout() re-entrancy check (#14384) 2018-12-03 10:54:01 -08:00
Brian Vaughn
7a48c900b7 Prevent a v8 deopt when profiling (#14383) 2018-12-03 09:22:46 -08:00
Brian Vaughn
e382b0ba95 Don't prompt to tag or create GitHub release for canary releases (#14376) 2018-12-03 09:16:17 -08:00
Brian Vaughn
8482cbe22d Automated fixture tests (#14370)
* Renamed snapshot test from test.js to snapshot-test.js
* Automate fixtures tests
2018-12-02 11:25:45 -08:00
Brian Vaughn
f00c2755b9 Removed unnecessary externals from Jest bundles (#14372) 2018-12-01 17:26:12 -08:00
Brian Vaughn
52bea95cfc Fixed scheduler setTimeout fallback (#14358)
* Fixed scheduler setTimeout fallback
* Moved unit-test-specific setTimeout code into a new NPM package, jest-mock-scheduler.
2018-12-01 13:03:19 -08:00
Sebastian Markbåge
1d25aa5787 [Fizz] New Server Rendering Infra (#14144)
* [Fizz] Add Flow/Jest/Rollup build infra

Add a new package for react-stream which allows for custom server renderer
outputs. I picked the name because it's a reasonable name but also
because the npm name is currently owned by a friend of the project.

The react-dom build has its own inlined server renderer under the
name `react-dom/fizz`.

There is also a noop renderer to be used for testing. At some point
we might add a public one to test-renderer but for now I don't want to have
to think about public API design for the tests.

* Add FormatConfig too

We need to separate the format (DOM, React Native, etc) from the host
running the server (Node, Browser, etc).

* Basic wiring between Node, Noop and DOM configs

The Node DOM API is pipeToNodeStream which accepts a writable stream.

* Merge host and format config in dynamic react-stream entry point

Simpler API this way but also avoids having to fork the wrapper config.

Fixes noop builds.

* Add setImmediate/Buffer globals to lint config

Used by the server renderer

* Properly include fizz.node.js

Also use forwarding to it from fizz.js in builds so that tests covers
this.

* Make react-stream private since we're not ready to publish

or even name it yet

* Rename Renderer -> Streamer

* Prefix react-dom/fizz with react-dom/unstable-fizz

* Add Fizz Browser host config

This lets Fizz render to WHATWG streams. E.g. for rendering in a
Service Worker.

I added react-dom/unstable-fizz.browser as the entry point for this.

Since we now have two configurations of DOM. I had to add another
inlinedHostConfigs configuration called `dom-browser`. The reconciler
treats this configuration the same as `dom`. For stream it checks
against the ReactFizzHostConfigBrowser instead of the Node one.

* Add Fizz Browser Fixture

This is for testing server rendering - on the client.

* Lower version number to detach it from react-reconciler version
2018-11-30 11:38:22 -08:00
Imre Osswald
f1bf281605 Fix bug in cloneHook (#14364)
* Fixes #14360 and adds a test for mixed priority dispatches.

It was broken because `cloneHook` assigned `memoizedState` instead of
`baseState` from the original hook to `baseState` of the clone.

* tweak comments
2018-11-30 15:02:19 +00:00
Dan Abramov
16e120438c [Fire] Add initial build infrastructure (#14359) 2018-11-30 11:52:34 +00:00
Dan Abramov
d14ba87b1b Validate propTypes for lazy() and memo() and warn about invalid patterns (#14298)
* Add a test for current defaultProps behavior in lazy

* Add a warning against definining defaultProps on the outer wrapper

* Warn about setting propTypes too

* Remove redundant async

* Validate propTypes for resolved lazy types

Note this only works for elements created after resolving. So it's not ideal. But it provides the best stack trace for those cases.

* Add a test for lazy(forwardRef()) propTypes check

* Validate memo() inner propTypes and warn about shadowing

* Add test verifying nested lazy is unsupported

* Change error wording to remove "Promise elements"

* Improve error message for nested lazy() and add tests

* Validate propTypes for memo in the reconciler when necessary

* Add comments for why we're calling checkPropTypes

* Fix Flow and lint

* Undo unintentional formatting changes

* Remove unnecessary case (it is handled by function code path)

* Add test coverage for memo(fn.defaultProps).propTypes

* Test should be agnostic of where resolving happens

That's an implementation detail and we might want to change it later. Let's keep it easy by making tests just check that validation happened, not at which stage.

* Unify traversal logic in createElement

This moves all type traversal into createElement. When lazy resolves, we call createElement once to re-check.

* Match prod behavior for propTypes/defaultProps shims closer

* Revert "Unify traversal logic in createElement"

This reverts commit 2e77ca47fe80ebe6595333542a8c5c138c68643f.

See https://github.com/facebook/react/pull/14298#issuecomment-442687775

* Undo unnecessary change to getComponentName
2018-11-29 20:06:28 +00:00
Brian Vaughn
88ada98198 Release script auto-determine the latest Canary build if none specified (#14339)
* Release script auto-determine the latest Canary build if none specified
2018-11-28 13:56:45 -08:00
Jinto Jose
4f964f09c1 Adding isMemo check to react-is package (#14313) 2018-11-28 12:51:21 -08:00
Sophie Alpert
c2a2d8a539 Remove useMutationEffect (#14336)
useMutationEffect has problems (namely, refs aren't attached at the time that it runs) and we're not positive it's necessary. useLayoutEffect runs at the same time as componentDidMount/Update so it's sufficient for all existing use cases; it can be used in any case that useEffect happens too late. Until we figure out what we want to do, let's delete it.
2018-11-27 13:05:13 -08:00
chun shang
48f1e5b3ce Add a null type test for memo (#14325) 2018-11-27 13:25:24 +00:00
Dan Abramov
f93f3402f7 Make useEffect(async) warning more verbose (#14327)
* Make useEffect(async) warning more verbose

* Nit
2018-11-27 13:05:10 +00:00
Pelle Wessman
ee3ef3a079 Fix regression: Errors not emitted in streams (#14314)
Regression introduced in #14182 resulted in errors no longer being emitted on streams, breaking many consumers.

Co-authored-by: Elliot Jalgard <elliot.j@live.se>
2018-11-27 13:00:46 +00:00
Christoph Nakazawa
33f6f5e532 Remove usage of fbjs/lib/invariant in ReactNativeViewConfigRegistry. (#14330) 2018-11-26 21:48:08 +00:00
Brian Vaughn
409066a0a1 Add progress bars to longer running async release tasks (#14322)
* Add progress bars to longer running async release tasks
* Updated to 0.2 progress estimator version
2018-11-26 09:28:37 -08:00
Sunil Pai
a7f270c550 update fixtures/packaging/README.md (#14320)
I had some confusion yesterday with this, figured this reads a little better.  Ran these steps locally to verify they work.
2018-11-24 21:40:56 +00:00
Brian Vaughn
ed4c4a51cd Add basic release script snapshot test (#14280)
Added regression test for release scripts
2018-11-23 12:53:39 -08:00
Brian Vaughn
686f1060ad Publish a local release (canary or stable) to NPM (#14260)
New release scripts.

Learn more at https://github.com/facebook/react/blob/master/scripts/release/README.md
2018-11-23 12:37:18 -08:00
Dan Abramov
7475120ce7 Prevent deopts from modifying exports object in stable builds (#14309) 2018-11-23 14:10:57 +00:00
Dan Abramov
0c7189d923 Fix resolution of outer props with React.memo() (#14312)
* Add failing test for defaultProps between lazy() and memo()

* Add another regression test for defaultProps resolution order

* Resolve outer props for MemoComponent
2018-11-22 19:40:42 +00:00
Dan Abramov
14be29b2b9 Add more test coverage for nested memo() (#14311) 2018-11-22 19:30:56 +00:00
Dan Abramov
dc0dd4bbff Use |0 to coerce to number (#14297) 2018-11-22 15:44:00 +00:00
Dan Abramov
dd8205cef9 List ignored types instead of included types in the stack (#14308) 2018-11-22 15:41:29 +00:00
Isaiah Nields
1da310809e fix spelling error: Here's -> Here (#14307)
"Here's" should be changed to "Here" in the given sentence.
2018-11-22 14:47:20 +00:00
Dan Abramov
a9fdf8a326 Warn about reassigning this.props (#14277)
* Warn about reassigning this.props

* Improve the warning

* Don't show the spammy bug warning if we suspect it's a component bug
2018-11-20 16:40:01 +00:00
Dan Abramov
327cf0ee33 Fix support for mixing react-dom/server@16.6 and react@<16.6 (#14291) 2018-11-20 13:09:44 +00:00
Sebastian Markbåge
c954efa70f Remove import * as pattern from the codebase (#14282)
Whenever we do this, Rollup needs to materialize this as an object.
This causes it to also add the Babel compatibility property which is
unnecessary bloat. However, since when we use these, we leak the object
this often also deopts any compiler optimizations.

If we really need an object we should export default an object.

Currently there is an exception for DOMTopLevelEventTypes since
listing out the imports is a PITA and it doesn't escape so it should
get properly inlined. We should probably move to a different pattern
to avoid this for consistency though.
2018-11-19 15:32:54 -08:00
Dan Abramov
ccb14e270c Fix SSR useCallback in render phase (#14279) 2018-11-19 20:47:38 +00:00
Dominic Gannaway
0e9cb3f5d0 Clear fields on unmount of fiber to avoid memory leak (#14276)
* Clear fields on unmount of fiber to avoid memory leak
2018-11-19 16:09:11 +00:00
Dominic Gannaway
592676503c Revert "Clear memoizedState on unmount of fiber to avoid memory leak (#14218)" (#14275)
This reverts commit 9b2fb24f99.
2018-11-19 15:24:46 +00:00
Dominic Gannaway
9b2fb24f99 Clear memoizedState on unmount of fiber to avoid memory leak (#14218)
* Clear properties on unmount of fiber to ensure objects are not retained
2018-11-19 10:58:14 +00:00
Jason Miller
a22fabc2a1 Reduce scheduler serialization overhead (#14249)
In the process of switching to MessageChannel, it seems the postMessage call was modified to pass `"*"` (originally the target origin value from `window.postMessage`). This actually ends up triggering serialization, whereas passing `undefined` bypasses.

To save some investigation, passing a Number like `0` still incurs serialization overhead - `undefined` has special behavior.
2018-11-16 10:39:27 -08:00
Andrew Clark
21d5f7d32d Wrap shorthand CSS property collision warning in feature flag (#14245)
Disables the recently introduced (#14181) warning for shorthand
CSS property collisions by wrapping in a feature flag. Let's hold off
shipping this until at least the next minor.
2018-11-15 13:36:52 -08:00
Jan Pöschko
5f06576f51 Add a checkbox to fixtures UI to choose React production build (#13786)
* Add a checkbox to fixtures UI to choose React production build

* Assign header__label class name to label directly, instead of using a separate span

* center the production checkbox vertically
2018-11-14 15:34:46 -08:00
Andrew Clark
8feeed10d8 [scheduler] Remove window.postMessage fallback
Every browser we can about supports MessageChannel. The ones we don't
care about will fallback to the setTimeout implementation.
2018-11-14 14:44:26 -08:00
Andrew Clark
5bce0ef10a [scheduler] Post to MessageChannel instead of window (#14234)
Scheduler needs to schedule a task that fires after paint. To do this,
it currently posts a message event to `window`. This happens on every
frame until the queue is empty. An unfortunate consequence is that every
other message event handler also gets called on every frame; even if
they exit immediately, this adds up to significant per-frame overhead.

Instead, we'll create a MessageChannel and post to that, with a
fallback to the old behavior if MessageChannel does not exist.
2018-11-14 12:02:00 -08:00
Dan Abramov
d7fd679a31 Add 16.6.3 Changelog (#14223)
* Add 16.6.3 Changelog

* Remove unreleased fix

* Drop another unreleased fix
2018-11-13 20:32:33 +00:00
Andrew Clark
3cd89daed9 Update error codes 2018-11-13 20:29:30 +00:00
Brian Vaughn
85f5a81eb7 Save CI-built node_modules as build artifacts (#14205)
* Store node_modules generated by CI script as an artifact
* NPM pack artifacts before archiving
2018-11-13 11:00:30 -08:00
Dan Abramov
f55795c8ee Add regression test for #14188 (#14197) 2018-11-13 11:23:01 +00:00
Maksim Markelov
d204747bef Update Readme (#14176)
Replace core with react, dom-client with react-dom
2018-11-12 16:25:32 +00:00
Sophie Alpert
b98adb648a Simplify CSS shorthand property warning (#14183)
I figured out a simpler way to do #14181. It does allocate some but I think that's OK. Time complexity might even be better since we avoid the nested loops the old one had.
2018-11-09 16:56:51 -08:00
Sebastian Markbage
f8bfd58680 fix typo 2018-11-09 16:16:25 -08:00
Sebastian Markbåge
961eb65b4b Use unique thread ID for each partial render to access Context (#14182)
* BUG: ReactPartialRenderer / New Context polutes mutable global state

The new context API stores the provided values on the shared context instance. When used in a synchronous context, this is not an issue. However when used in an concurrent context this can cause a "push provider" from one react render to have an effect on an unrelated concurrent react render.

I've encountered this bug in production when using renderToNodeStream, which asks ReactPartialRenderer for bytes up to a high water mark before yielding. If two Node Streams are created and read from in parallel, the state of one can polute the other.

I wrote a failing test to illustrate the conditions under which this happens.

I'm also concerned that the experimental concurrent/async React rendering on the client could suffer from the same issue.

* Use unique thread ID for each partial render to access Context

This first adds an allocator that keeps track of a unique ThreadID index
for each currently executing partial renderer. IDs are not just growing
but are reused as streams are destroyed.

This ensures that IDs are kept nice and compact.

This lets us use an "array" for each Context object to store the current
values. The look up for these are fast because they're just looking up
an offset in a tightly packed "array".

I don't use an actual Array object to store the values. Instead, I rely
on that VMs (notably V8) treat storage of numeric index property access
as a separate "elements" allocation.

This lets us avoid an extra indirection.

However, we must ensure that these arrays are not holey to preserve this
feature.

To do that I store the _threadCount on each context (effectively it takes
the place of the .length property on an array).

This lets us first validate that the context has enough slots before we
access the slot. If not, we fill in the slots with the default value.
2018-11-09 15:38:20 -08:00
Sophie Alpert
1a6ab1e9b5 SimpleMemoComponent should warn if a ref is given (#14178)
Fixes #13964.
2018-11-09 15:29:41 -08:00
Sophie Alpert
8ae867e6b5 Warn about conflicting style values during updates (#14181)
This is one of the most insidious quirks of React DOM that people run into. Now we warn when we think an update is dangerous.

We still allow rendering `{background, backgroundSize}` with unchanging values, for example. But once you remove either one or change `background` (without changing `backgroundSize` at the same time), that's bad news. So we warn.

Fixes #6348.
2018-11-09 15:21:47 -08:00
Brian Vaughn
d5e1bf07d0 Renamed outdated schedule/tracing referecnes (#14177) 2018-11-09 12:37:03 -08:00
Andrew Clark
2dd4ba11e0 ESlint -> ESLint 2018-11-09 10:22:18 -08:00
Sophie Alpert
9cc631a539 Don't run danger on bad build (#14143)
sizebot comments can be confusing when not based on reality.

If results.json doesn't exist, danger will fail. This is what we want.
2018-11-09 10:21:39 -08:00
Heaven
1034e26fe5 Fix typos (#14124) 2018-11-09 10:17:49 -08:00
Bartosz Gordon
5618da49d8 Fix comment typo (#14156) 2018-11-09 10:17:19 -08:00
Andrew Clark
9fb9199455 Add global to ESLint plugin bundle config 2018-11-08 18:49:03 -08:00
Andrew Clark
c174f85924 Add fb build of ESLint plugin (#14165) 2018-11-08 18:44:08 -08:00
Alex Taylor
02e4848e3a Improved suspense support in ReactDOMServer (#14161) 2018-11-08 18:15:06 -08:00
Andrew Clark
4b163fee1c Remove errant return assignment (#14164)
Oopsie!

This could have been avoided if our types were modeled correctly with
Flow (using a disjoint union).

Fuzz tester didn't catch it because it does not generate cases where
a Suspense component mounts with no children. I'll update it.
2018-11-08 18:13:42 -08:00
Andrew Clark
e58ecda9a2 Suspense fuzz tester (#14147)
* Don't warn if an unmounted component is pinged

* Suspense fuzz tester

The fuzzer works by generating a random tree of React elements. The tree
two types of custom components:

- A Text component suspends rendering on initial mount for a fuzzy
  duration of time. It may update a fuzzy number of times; each update
  supsends for a fuzzy duration of time.
- A Container component wraps some children. It may remount its children
  a fuzzy number of times, by updating its key.

The tree may also include nested Suspense components.

After this tree is generated, the tester sets a flag to temporarily
disable Text components from suspending. The tree is rendered
synchronously. The output of this render is the expected output.

Then the tester flips the flag back to enable suspending. It renders the
tree again. This time the Text components will suspend for the amount of
time configured by the props. The tester waits until everything has
resolved. The resolved output is then compared to the expected output
generated in the previous step.

Finally, we render once more, but this time in concurrent mode. Once
again, the resolved output is compared to the expected output.

I tested by commenting out various parts of the Suspense implementation
to see if broke in the expected way. I also confirmed that it would have
caught #14133, a recent bug related to deletions.

* When a generated test case fails, log its input

* Moar fuzziness

Adds more fuzziness to the generated tests. Specifcally, introduces
nested Suspense cases, where the fallback of a Suspense component
also suspends.

This flushed out a bug (yay!) whose test case I've hard coded.

* Use seeded random number generator

So if there's a failure, we can bisect.
2018-11-08 17:26:43 -08:00
Andrew Clark
7fd1661f80 Don't warn if an unmounted component is pinged (#14158)
* Add failing test for ping on unmounted component

We had a test for this, but not outside of concurrent mode :)

* Don't warn if an unmounted component is pinged
2018-11-08 17:24:32 -08:00
Andrew Clark
f9e9913f0e [Synchronous Suspense] Don't delete children of suspended component (#14157)
Vestigial behavior that should have been removed in #13823.

Found using the Suspense fuzz tester in #14147.
2018-11-08 11:38:38 -08:00
Nathan Schloss
7c560131bf Adding logger pri (#14155) 2018-11-08 11:30:38 -08:00
Minh Nguyen
3d8bda70e5 Refactor ESLint configuration to enable better IDE integration (#13914)
* Refactor ESLint configuration to enable better IDE integration

* Minor tweaks
2018-11-08 17:56:35 +00:00
Sebastian Markbåge
051272f201 Use Entry in yarn build ... Instead of Label (#14148)
* Parse build script type and package names

This ensures that `yarn build core dom` includes DOM.

It also ensures that spaces like `yarn build "core, dom"` doesn't build EVERYTHING.

* Get rid of label in bundles config

Instead we just use the name from entry using fuzzy search.

There is one special case. If you put in `/index` or `/index.js`.

That allows to build things like `react/index` to only build isomorphic
where as `react` would build everything. Or `react-dom/index` to exclude
the server renderers.

* Instead of matching `/index.js` just append it to the search string

That way things like `yarn build react/` works too.
2018-11-07 20:46:41 -08:00
Brian Vaughn
3ff2c7ccd4 Invalid actualDuration+treeBaseDuration for hidden+suspended trees (#14065)
* Fixed `treeBaseDuration` by propagating its value from the suspended tree to the Fragment React temporarily wraps around it when showing the fallback UI.
* Fixed `actualDuration` by recording elapsed profiler time in the event of an error.
* Fixed `actualDuration` in concurrent mode by propagating the time spent rendering the suspending component to its parent.

Also updated ReactSuspensePlaceholder-test.internal to cover these new cases.
2018-11-07 15:46:30 -08:00
Brian Vaughn
5afa1c4eda Tag MemoComponent with PerformedWork effectTag for DevTools Profiler (#14141) 2018-11-07 13:56:12 -08:00
Brian Vaughn
be63473004 Release script supports interleaved stable and alpha releases (#14138) 2018-11-07 12:33:13 -08:00
Andrew Clark
e27720d7f5 [Synchronous Suspense] Reuse deletions from primary tree (#14133)
Fixes a bug where deletion effects in the primary tree were dropped
before entering the second render pass.

Because we no longer reset the effect list after the first render pass,
I've also moved the deletion of the fallback children to the complete
phase, after the tree successfully renders without suspending.

Will need to revisit this heuristic when we implement resuming.
2018-11-07 10:56:57 -08:00
Dominic Gannaway
aa1ffe4e77 Show deprecated context object warnings usage in ReactDOM server (#14033)
* Applies context object warnings to ReactDOM server
2018-11-07 17:19:38 +00:00
Andrew Clark
e3a7b96455 Make react-debug-tools a private package 2018-11-06 18:45:30 -08:00
Andrew Clark
ff29de4029 Updating CHANGELOG.md for 16.6.1 release 2018-11-06 18:32:29 -08:00
Andrew Clark
ba19844236 Update bundle sizes for 16.6.1 release 2018-11-06 18:28:50 -08:00
Andrew Clark
a24d510287 Update error codes for 16.6.1 release 2018-11-06 18:28:50 -08:00
Andrew Clark
b50e63ef53 Updating package versions for release 16.6.1 2018-11-06 18:19:57 -08:00
Andrew Clark
fd4527dbcd Updating yarn.lock file for 16.6.1 release 2018-11-06 18:16:23 -08:00
Andrew Clark
bd5a6d3914 Update changelog with unreleased features 2018-11-06 17:38:19 -08:00
Andrew Clark
8f2c89e963 Make react-debug-tools a private package 2018-11-06 17:37:52 -08:00
locknono
2aecbcd6f1 "functional component" -> "function component" (#14123) 2018-11-06 17:33:26 -08:00
Nadav Kaner
b4608dd24c Remove unused simulated flag parameter (#14127) 2018-11-06 17:33:01 -08:00
Dan Abramov
3c69a18814 Recover from errors with a boundary in completion phase (#14104)
* Recover from errors with a boundary in completion phase

* Use a separate field for completing unit of work

* Use a simpler fix with one boolean

* Reoder conditions

* Clarify which paths are DEV-only

* Move duplicated line out

* Make it clearer this code is DEV-only
2018-11-06 23:38:12 +00:00
Andrew Clark
b020fb1148 Check correct commit phase props in fuzz tester (#14129)
Adds a check to the existing fuzz tester to confirm that the props are
set to the latest values in the commit phase. Only checks
componentDidUpdate; we already have unit tests for the other lifecycles,
so I think this is good enough. This is only a redundancy.
2018-11-06 15:01:18 -08:00
Dan Abramov
b67c1a2ee1 Add DEV-only checks for assumption about instance properties (#14128) 2018-11-06 22:28:50 +00:00
Dan Abramov
f777d196e0 Fix lazy() with defaultProps (#14112)
* Resolve defaultProps for Lazy components

* Make test fail again

* Undo the partial fix

* Make test output more compact

* Add a separate failing test for sync mode

* Clean up tests

* Add another update to both tests

* Resolve props for commit phase lifecycles

* Resolve prevProps for begin phase lifecycles

* Resolve prevProps for pre-commit lifecycles

* Only resolve props if element type differs

* Fix Flow

* Don't set instance.props/state during commit phase

This is an optimization. I'm not sure it's entirely safe. It's probably worth running internal tests and see if we can ever trigger a case where they're different.

This can mess with resuming.

* Keep setting instance.props/state before unmounting

This reverts part of the previous commit. It broke a test that verifies we use current props in componentWillUnmount if the fiber unmounts due to an error.
2018-11-06 19:54:14 +00:00
Sophie Alpert
e4512991c9 Fix unhiding in IE11 (#14126)
Setting to null isn't correct; setting to '' is. I opted to use dangerousStyleValue for consistency with the main path that we set things.

Fixes #14114.

Test Plan:
Verified setting to '' works in Chrome and IE11. (Setting to null works in Chrome but not in IE11.)
2018-11-06 11:24:44 -08:00
Andrew Clark
affb2b50ca Enable hooks in www test renderer, too 2018-11-05 18:50:00 -08:00
Andrew Clark
0a0f503d57 Enable hooks in www build (#14116)
The `enableHooks` feature flag used to only control whether the API
was exposed on the React package. But now it also determines if the
dispatcher and implementation are included in the bundle.

We're using hooks in www, so I've switched the feature flag to `true`
in the www build.

(Alternatively, we could have two feature flags: one for the
implementation and dispatcher, and one for exposing the API on the
React package.)
2018-11-05 17:48:54 -08:00
Dan Abramov
600651e68e Restore the Hooks dispatcher after using SSR (#14105) 2018-11-06 01:15:11 +00:00
Andrew Clark
e9a2ec9156 [suspense] Avoid double commit by re-rendering immediately and reusing primary children (#14083)
* Avoid double commit by re-rendering immediately and reusing children

To support Suspense outside of concurrent mode, any component that
starts rendering must commit synchronously without being interrupted.
This means normal path, where we unwind the stack and try again from the
nearest Suspense boundary, won't work.

We used to have a special case where we commit the suspended tree in an
incomplete state. Then, in a subsequent commit, we re-render using the
fallback.

The first part — committing an incomplete tree — hasn't changed with
this PR. But I've changed the second part — now we render the fallback
children immediately, within the same commit.

* Add a failing test for remounting fallback in sync mode

* Add failing test for stuck Suspense fallback

* Toggle visibility of Suspense children in mutation phase, not layout

If parent reads visibility of children in a lifecycle, they should have
already updated.
2018-11-05 16:32:50 -08:00
Sophie Alpert
9d47143e85 Implement {,un}hideInstance on RN renderer (#14115)
This is required to use lazy.

Test Plan:
* Verified lazy works on a real world use case (shows spinner, shows real content).
* Verified that if I change the primary content's styles to have `display: 'none'` then it never appears (i.e., the code in `unhide` reads the styles successfully)
2018-11-05 15:33:25 -08:00
Sophie Alpert
ebdb47d2c1 DCE hooks code when flag is off (#14111) 2018-11-05 13:04:57 -08:00
Sophie Alpert
8b87ebf5b0 Rename .internal tests that aren't using internals (#14109) 2018-11-05 11:12:28 -08:00
Sophie Alpert
da04058a91 Use Function.prototype.apply in warningWithoutStack (#14107)
console.error.apply() fails in IE9, but I verified this works (and it works everywhere else too). :)
2018-11-05 11:11:33 -08:00
Sebastian Markbåge
fd1256a561 Add Debug Tools Package for Introspection of Hooks (#14085)
* Add debug tools package

* Add basic implementation

* Implement inspection of the current state of hooks using the fiber tree

* Support useContext hooks inspection by backtracking from the Fiber

I'm not sure this is safe because the return fibers may not be current
but close enough and it's fast.

We use this to set up the current values of the providers.

* rm copypasta

* Use lastIndexOf

Just in case. I don't know of any scenario where this can happen.

* Support ForwardRef

* Add test for memo and custom hooks

* Support defaultProps resolution
2018-11-05 10:02:59 -08:00
Tiago Nunes
b305c4e034 fix(react-dom): Fix crash during server render (#14103)
Check for existence of `setTimeout` and `clearTimeout` in the runtime
before using them, to ensure runtimes without them (like .NET ClearScript)
do not crash just by importing `react-dom`.
2018-11-05 17:08:07 +00:00
Keyan Zhang
ce90ffd045 update the benchmark script (#13994) 2018-11-05 15:55:46 +00:00
Marcelo Jorge Vieira
d34d1c3bae react-reconciler: Update README.md (#13953)
Replaced 'var' with 'const'
2018-11-05 15:55:23 +00:00
einarq
6c404d82aa Bugfix: Add back early return in setOffsets which was removed between 16.4.2 and 16.5.0. Fails in Edge in some scenarios. (#14095) 2018-11-05 15:19:50 +00:00
Simen Bekkhus
8eca0eff87 chore(tests): don't rely on jest fake timers scheduling real timers (#14003)
* chore: don't rely on jest fake timers scheduling real timers

* re-add one part not working with Jest 23
2018-11-02 16:54:23 -05:00
Sophie Alpert
293fed8993 Warn for bad useEffect return value (#14069)
Mostly to catch this:

```js
useEffect(async () => {
  // ...
  return cleanup;
});
```

Is this too restrictive? Not sure if you would want to do like

```js
useEffect(() => ref.current.style.color = 'red');
```

which would give a false positive here. We can always relax it to only warn on Promises if people complain.
2018-11-02 14:43:45 -07:00
Mateusz Burzyński
ae196e84b6 Rename inputsAreEqual to areHookInputsEqual & move it to shared (#14036) 2018-11-02 12:50:23 -07:00
Sophie Alpert
c898020e01 Warn for forwardRef(memo(...)) (#14070)
People are probably gonna do this all the time.
2018-11-02 12:32:44 -07:00
Sophie Alpert
c84b9bf828 Tweak error message for missing fallback (#14068) 2018-11-01 22:45:23 -07:00
Chris Bianca
595b4f945b Remove duplicate import declarations (#14062) 2018-11-01 13:31:46 +00:00
Maksim Markelov
d5d10d140e Simplify imports in react reconciler (#13718)
* Simplify imports in ReactChildFiber
* Import type first in ReactCurrentFiber
* Simplify imports in ReactFiberBeginWork
* Simplify imports in ReactFiberScheduler
* Simplify import in ReactFiberTreeReflection
* Simplify import in ReactFiberUnwindWork
* Remove repeated import
* Fix imports from ReactFiberExpirationTime
* Master imports in ReactFiberBeginWork
2018-10-31 21:12:51 -07:00
Jordan Harband
cdbfa6b5dd [react-is] add back proper AsyncMode symbol, for back compat (#13959)
- Partial revert of #13732
 - Fixes #13958.
2018-10-31 19:03:50 +00:00
Brian Vaughn
1ae3f29c20 Fix react-cache UMD build (#14047) 2018-10-31 11:16:03 -07:00
Sophie Alpert
3db8b80e15 Don't lint against Hooks after conditional throw (#14040)
Seems like this should be OK. Fixes #14038.

Now when tracking paths, we completely ignore segments that end in a throw.
2018-10-30 17:13:24 -07:00
Sophie Alpert
169f935f78 Flip expiration times (#13912)
See https://github.com/facebook/react/pull/13912 commit messages for how this was done.
2018-10-30 15:26:20 -07:00
Andrew Clark
bf9fadfcf4 [Hooks] Remove dispatch callbacks (#14037)
Removes the `enableDispatchCallback` feature flag and deletes the
associated code. An earlier version of the Hooks proposal included this
feature but we've since decided to remove it.
2018-10-30 14:14:20 -07:00
Andrew Clark
8c67bbf183 [scheduler] Deadline object -> shouldYield (#14025)
* [scheduler] Deadline object -> shouldYield

Instead of using a requestIdleCallback-style deadline object, expose a
method Scheduler.shouldYield that returns true if there's a higher
priority event in the queue.

* Nits
2018-10-30 13:47:51 -07:00
Andrew Clark
e02086bfcc Warn about variable number of dependencies
We don't check this in prod, since best practice is to always pass
these inline. But we should still warn in dev.
2018-10-29 13:51:43 -07:00
Andrew Clark
b92cdef641 Rename ReactHooks test suite
New tests should use React Test Renderer. We'll put existing tests in
this module and new tests in a new module.
2018-10-29 13:36:41 -07:00
Sophie Alpert
6efbbe0685 Prettier 2018-10-29 12:29:41 -07:00
Andrew Clark
5045763064 Swap order of function member in hook union types 2018-10-29 11:42:41 -07:00
Caleb Meredith
ddbfe2ed50 Add ESLint rule for React Hooks 2018-10-29 11:26:54 -07:00
Andrew Clark
acb4899637 Clear effect tags from a fiber that suspends in non-concurrent mode
Even though we commit the fiber in an incomplete state, we shouldn't
fire any lifecycles or effects.

We already did this for classes, but now with useEffect, the same is
needed for other types of work, too.
2018-10-29 11:26:54 -07:00
Andrew Clark
933b64710a Disable hook update callback (2nd arg to setState/dispatch)
I put the feature behind a feature flag, along with a warning, so
we can phase it out in www.
2018-10-29 11:26:54 -07:00
Sophie Alpert
5fc84efacc Skip updating effect tag when skipping effect
For example, if you have `useEffect(..., [])`, there's no need to set .effectTag to `Update | Passive` on updates.
2018-10-29 11:26:54 -07:00
Alex Taylor
9f34eb79a3 Add readContext to ReactPartialRendererHooks 2018-10-29 11:26:54 -07:00
Dan Abramov
f7cb9d2b22 Warn about useContext(Consumer|Provider) 2018-10-29 11:26:54 -07:00
Dan Abramov
63cc7d2b31 Test useContext in pure, forwardRef, and PureComponent 2018-10-29 11:26:54 -07:00
Sophie Alpert
3a7c6da8d4 Make effects actually work with memo
Bug fix.
2018-10-29 11:26:54 -07:00
Sophie Alpert
75a1c2e72a The Lost Effect, chapter 3
wow, writing code is hard
2018-10-29 11:26:54 -07:00
Sophie Alpert
55a4b1f377 memo supports Hooks 2018-10-29 11:26:53 -07:00
Sophie Alpert
30aa4ad554 The Lost Effect, chapter 2
Previously, flushPassiveEffects (called by scheduling work) would overwrite rootWithPendingPassiveEffects before we had a chance to schedule the work.
2018-10-29 11:26:53 -07:00
Sebastian Markbåge
b772e0e26b "functional component" -> "function component" in hooks error messages 2018-10-29 11:26:53 -07:00
Sophie Alpert
9e9e3970e4 Warn for Hook set-state on unmounted component 2018-10-29 11:26:53 -07:00
Sophie Alpert
6514697f0c Make sure deletions don't stop passive effects
Before the fix, the passive effect in the test is never executed.

We were previously waiting until the next commit phase to run effects. Now, we run them before scheduling work.
2018-10-29 11:26:53 -07:00
Alex Taylor
dd019d34db Add support for hooks to ReactDOMServer
Co-authored-by: Alex Taylor <alexmckenley@gmail.com>
Co-authored-by: Andrew Clark <acdlite@fb.com>
2018-10-29 11:26:53 -07:00
Andrew Clark
11d0781eea Defer useEffect until after paint
Effects scheduled by useEffect should not fire until after the browser
has had a chance to paint. However, they should be fired before any
subsequent mutations.

Also adds useMutationEffect and useLayoutEffect. useMutationEffect fires
during the host update phase. useLayoutEffect fires during the post-
update phase (the same phase as componentDidMount
and componentDidUpdate).
2018-10-29 11:26:53 -07:00
Andrew Clark
105f2de545 Put hooks behind feature flag 2018-10-29 11:26:53 -07:00
Andrew Clark
7bee9fbdd4 Initial hooks implementation
Includes:
- useState
- useContext
- useEffect
- useRef
- useReducer
- useCallback
- useMemo
- useAPI
2018-10-29 11:26:53 -07:00
Rauno Freiberg
37c7fe0a5f Update createRoot warning message based on enableStableConcurrentModeAPIs (#14017) 2018-10-29 11:25:24 -07:00
Jeffrey Zhang
ae4f3f07e5 Remove extraneous CSS selector (#13996) 2018-10-27 10:01:25 -07:00
Joseph
95f98a1873 fix typo (#13955) 2018-10-27 09:59:00 -07:00
Patrick
e217f2f1ac Updated comment for getEventModifierState (#13918) 2018-10-27 09:52:01 -07:00
Brian Vaughn
275e76e83b Enable stable concurrent APIs flag for 16.7 alpha (#13928)
* Add enableStableConcurrentModeAPIs feature flag

* Conditionally name concurrent API based on enableStableConcurrentModeAPIs flag
2018-10-24 13:45:07 -07:00
Dan Abramov
b5539ad628 It's Concurrent 2018-10-23 19:26:00 -07:00
Dan Abramov
0cc50b675a Fix scheduler fixture 2018-10-23 16:35:07 -07:00
Dan Abramov
8b97a9c36f Update bundle sizes for 16.6.0 release 2018-10-23 16:29:35 -07:00
Dan Abramov
c8ade996e9 Update error codes for 16.6.0 release 2018-10-23 16:29:35 -07:00
Dan Abramov
6c29eabf78 Updating package versions for release 16.6.0 2018-10-23 16:23:41 -07:00
Dan Abramov
d520b358d6 Revert all package versions to 16.5.2 state
Our release script is getting really confused so I'm resetting to last working state.
2018-10-23 16:18:28 -07:00
Dan Abramov
8f1ec7649e Bump versions to beta.0 2018-10-23 16:01:57 -07:00
Dan Abramov
5055a83fa4 Revert "Revert "Updating dependencies for react-noop-renderer""
This reverts commit 3e8b4a5b8b.
2018-10-23 15:59:36 -07:00
Brian Vaughn
3e8b4a5b8b Revert "Updating dependencies for react-noop-renderer"
This reverts commit 1a57dc6689.
2018-10-23 15:36:31 -07:00
Brian Vaughn
ff5efb0390 Prettier 2018-10-23 15:06:58 -07:00
Brian Vaughn
f4488bee51 Add skipCI flag to release script (#13933) 2018-10-23 15:05:14 -07:00
Dan Abramov
d42ed60026 Fix Suspense fixture (#13932) 2018-10-23 18:03:22 -04:00
Andrew Clark
d8e03de4aa [react-cache] Remove cache as argument to read (#13865)
* [react-cache] Remove `cache` as argument to `read`

Updated is API is `Resource.read(key)` instead of
`Resource.read(cache, key)`.

The cache is read from context using `readContext`.

This also removes cache invalidation entirely (other than the default
LRU mechanism), as well as the ability to have multiple caches. We'll
add it back once `Context.write` lands and we can implement it the
right way.

Since there's now only a single cache (the global one), we don't
actually need to use context yet, but I've added a dummy context
anyway so the user gets an error if they attempt to read outside the
render phase.

* nits

* Add test for thenables that resolve multiple times
2018-10-23 14:38:51 -07:00
Andrew Clark
fefa1269e2 Revert accidentally committed existence check (#13931) 2018-10-23 14:27:04 -07:00
Brian Vaughn
80a0c05ce3 Removed react-cache from the bundle list for now (#13930)
* Removed react-cache from the bundle list for now

* Re-add react-cache bundle, but mark as private to avoid NPM publishing
2018-10-23 13:55:52 -07:00
Brian Vaughn
915e4eab53 Add "unstable_" prefix to react-cache and jest-react (#13929)
* Add "unstable_" prefix to react-cache createResource and jest-react matchers
* Reverted accidental change to error-codes JSON
* Remove unstable_ prefix from internal React tests for jest-test
2018-10-23 13:55:37 -07:00
Dan Abramov
508b5fba0e Fix Markdown 2018-10-23 12:16:13 -07:00
Dan Abramov
c285ea2700 Tweak changelog credits 2018-10-23 12:15:57 -07:00
Dan Abramov
eac092ecac Add 16.6.0 changelog (#13927)
* Add 16.6.0 changelog

* Update CHANGELOG.md
2018-10-23 15:08:08 -04:00
Andrew Clark
cbbc2b6c4d [Synchronous Suspense] Suspending a class outside concurrent mode (#13926)
* [Synchronous Suspense] Suspending a class outside concurrent mode

When a class component suspends during mount outside concurrent mode,
change the tag so it's not mistaken for a completed component. For
example, we should not call componentWillUnmount if it is deleted.

* PR nits
2018-10-23 11:36:56 -07:00
Sebastian Markbåge
4947fcd762 Fix lint (#13923) 2018-10-22 22:47:39 -07:00
Sebastian Markbåge
d75c69e0cf Remove unstable_ prefix from Suspense (#13922)
We are using it with lazy and the combination Suspense + lazy seems pretty
stable. maxDuration is not but that's only enabled when you're in
ConcurrentMode which is still unstable.
2018-10-22 22:40:05 -07:00
John Lin
c8ef2feda9 Remove redundant word "the" (#13919) 2018-10-22 22:39:23 -07:00
Andrew Clark
55444a6f49 Try rendering again if a timed out tree receives an update (#13921)
Found a bug related to suspending inside an already mounted tree. While
investigating this I noticed we really don't have much coverage of
suspended updates. I think this would greatly benefit from some fuzz
testing; still haven't thought of a good test case, though.
2018-10-22 22:37:15 -07:00
yongningfu
04c4f2fcea [reconciler] ReactFiberNewContext import maxSigned31BitInt twice (#13857)
* [reconciler] ReactFiberNewContext import maxSigned31BitInt twice

* rename maxSigned31BitInt to MAX_SIGNED_31_BIT_INT
2018-10-22 10:24:44 -05:00
Abdul Rauf
409e472fca Add flow types in ReactControlledComponent (#13669) 2018-10-21 14:35:35 -05:00
Abdul Rauf
663835a43a Add flow types in getEventModifierState (#13909) 2018-10-21 13:20:50 -05:00
Abdul Rauf
82710097f6 Add flow types in getNodeForCharacterOffset (#13908) 2018-10-21 13:18:32 -05:00
shawn wang
7ebd90c2c3 [minor bugfix] fix minor bug with handleReset in suspense fixture (#13843)
* fix minor bug with handleReset in suspense fixture

otherwise resetting the cache in debugger throws an error 

reported here
https://www.reddit.com/r/reactjs/comments/9n9nfo/react_166_canary/

* fix singlequote/doublequote

* switch to performance.now()
2018-10-21 13:16:44 -05:00
Abdul Rauf
420001cb4e Fix babel-preset-fbjs configure link in comment (#13666) 2018-10-21 12:23:24 -05:00
Andrew Clark
b753f76a74 Fix failing async tests in Node 10
Dunno why they happened to work in Node 8 but whatever. Tested on both.
2018-10-20 16:06:23 -07:00
ZYSzys
d37f595595 Add use strict to .prettierrc.js (#13787) 2018-10-20 17:42:11 -04:00
Dan Abramov
b5c0852fdd Bump version to 16.6.0-beta.0 (#13906)
* Bump version to 16.6.0-beta.0

* Root too
2018-10-20 13:03:15 -04:00
Dan Abramov
769b1f270e pure -> memo (#13905) 2018-10-20 12:46:23 -04:00
Alex Taylor
8ecd4bd4f0 Add support for React.pure in ReactDOMServer (#13855)
* Add support for React.pure in ReactDOMServer

* Unwrap pure wrappers by creating an additional element as a single child

This is very slow but meh. We're rewriting this whole thing anyway.
2018-10-20 00:42:33 -07:00
Sebastian Markbåge
15b11d23f9 Allow arbitrary types to be wrapped in pure (#13903)
* Allow arbitrary types to be wrapped in pure

This creates an outer fiber that container the pure check and an inner
fiber that represents which ever type of component.

* Add optimized fast path for simple pure function components

Special cased when there are no defaultProps and it's a simple function
component instead of class. This doesn't require an extra fiber.

We could make it so that this also works with custom comparer but that
means we have to go through one extra indirection to get to it.
Maybe it's worth it, donno.
2018-10-20 00:32:16 -07:00
Andrew Clark
e770af7a3a Add back accidentally deleted break to prevent fallthrough 2018-10-19 22:47:37 -07:00
Sebastian Markbåge
95a313ec0b Unfork Lazy Component Branches (#13902)
* Introduce elementType field

This will be used to store the wrapped type of an element. E.g. pure and
lazy.

The existing type field will be used for the unwrapped type within them.

* Store the unwrapped type on the type field of lazy components

* Use the raw tags for lazy components

Instead, we check if the elementType and type are equal to test if
we need to resolve props. This is slightly slower in the normal case
but will yield less code and branching.

* Clean up lazy branches

* Collapse work tag numbering

* Split IndeterminateComponent out from Lazy

This way we don't have to check the type in a hacky way in the
indeterminate path. Also, lets us deal with lazy that resolves to
indeterminate and such.

* Missing clean up in rebase
2018-10-19 22:22:45 -07:00
Andrew Clark
e16cdd5b17 Always bail out timed out children even if they receive an update (#13901)
* Always bail out timed out children even if they receive an update

The fragment that wraps timed-out children should always have an
expiration time of NoWork.

* Don't need to set expirationTime, only childExpirationTime
2018-10-19 20:31:44 -07:00
Sebastian Markbåge
7268d97d2b Centralize props memoization (#13900)
* Move memoizedProps to after beginWork remove memoizeProps helper

We always call this at the end. This is now enforced to line up since
we do the equality check in the beginning of beginWork. So we can't
have special cases.

* Inline the one caller of memoizeState
2018-10-19 20:12:02 -07:00
Andrew Clark
0fc0446798 Class component can suspend without losing state outside concurrent mode (#13899)
Outside of concurrent mode, schedules a force update on a suspended
class component to force it to prevent it from bailing out and
reusing the current fiber, which we know to be inconsistent.
2018-10-19 18:41:47 -07:00
Andrew Clark
36db538226 Bugfix for #13886 (#13896)
Fixes a bug where a lazy component does not cache the result of
its constructor.
2018-10-19 13:57:42 -07:00
Sebastian Markbåge
6938dcaacb SSR support for class contextType (#13889) 2018-10-19 11:18:32 -07:00
Sebastian Markbåge
fa65c58e15 Add readContext to SSR (#13888)
Will be used by react-cache.
2018-10-18 20:20:03 -07:00
Andrew Clark
d9a3cc070c React.lazy constructor must return result of a dynamic import (#13886)
We may want to change the protocol later, so until then we'll be
restrictive. Heuristic is to check for existence of `default`.
2018-10-18 19:58:25 -07:00
Andrew Clark
d9659e499e Lazy components must use React.lazy (#13885)
Removes support for using arbitrary promises as the type of a React
element. Instead, promises must be wrapped in React.lazy. This gives us
flexibility later if we need to change the protocol.

The reason is that promises do not provide a way to call their
constructor multiple times. For example:

const promiseForA = new Promise(resolve => {
  fetchA(a => resolve(a));
});

Given a reference to `promiseForA`, there's no way to call `fetchA`
again. Calling `then` on the promise doesn't run the constructor again;
it only attaches another listener.

In the future we will likely introduce an API like `React.eager` that
is similar to `lazy` but eagerly calls the constructor. That gives us
the ability to call the constructor multiple times. E.g. to increase
the priority, or to retry if the first operation failed.
2018-10-18 19:57:12 -07:00
Sophie Alpert
0648ca618d Revert "React.pure automatically forwards ref" (#13887)
Reverts #13822. We're not sure we want to do this.
2018-10-18 18:53:10 -07:00
Andrew Clark
4dd772ac10 Prettier :( 2018-10-18 18:38:44 -07:00
Andrew Clark
98bab66c35 Fix lint 2018-10-18 18:06:39 -07:00
Andrew Clark
8ced545e3d Suspense component does not capture if fallback is not defined (#13879)
* Suspense component does not capture if `fallback` is not defined

A missing fallback prop means the exception should propagate to the next
parent (like a rethrow). That way a Suspense component can specify other
props like maxDuration without needing to provide a fallback, too.

Closes #13864

* Change order of checks
2018-10-18 16:07:22 -07:00
Andrew Clark
b738ced477 Remove render prop option from Suspense (#13880)
This was the original, lower-level API before we landed on `fallback`
instead. (We might add a different lower-level API in the future, likely
alongside a new API for catching errors).
2018-10-18 15:48:11 -07:00
Andrew Clark
55b8279423 Strict mode and default mode should have same Suspense semantics (#13882)
In the default mode, Suspense has special semantics where, in
addition to timing out immediately, we don't unwind the stack before
rendering the fallback. Instead, we commit the tree in an inconsistent
state, then synchronous render *again* to switch to the fallback. This
is slower but is less likely to cause issues with older components that
perform side effects in the render phase (e.g. componentWillMount,
componentWillUpdate, and componentWillReceiveProps).

We should do this in strict mode, too, so that there are no semantic
differences (in prod, at least) between default mode and strict mode.
The rationale is that it makes it easier to wrap a tree in strict mode
and start migrating components incrementally without worrying about new
bugs in production.
2018-10-18 15:42:40 -07:00
Andrew Clark
dac9202a9c Hide timed-out children instead of deleting them so their state is preserved (#13823)
* Store the start time on `updateQueue` instead of `stateNode`

Originally I did this to free the `stateNode` field to store a second
set of children. I don't we'll need this anymore, since we use fragment
fibers instead. But I still think using `updateQueue` makes more sense
so I'll leave this in.

* Use fragment fibers to keep the primary and fallback children separate

If the children timeout, we switch to showing the fallback children in
place of the "primary" children. However, we don't want to delete the
primary children because then their state will be lost (both the React
state and the host state, e.g. uncontrolled form inputs). Instead we
keep them mounted and hide them. Both the fallback children AND the
primary children are rendered at the same time. Once the primary
children are un-suspended, we can delete the fallback children — don't
need to preserve their state.

The two sets of children are siblings in the host environment, but
semantically, for purposes of reconciliation, they are two separate
sets. So we store them using two fragment fibers.

However, we want to avoid allocating extra fibers for every placeholder.
They're only necessary when the children time out, because that's the
only time when both sets are mounted.

So, the extra fragment fibers are only used if the children time out.
Otherwise, we render the primary children directly. This requires some
custom reconciliation logic to preserve the state of the primary
children. It's essentially a very basic form of re-parenting.

* Use `memoizedState` to store various pieces of SuspenseComponent's state

SuspenseComponent has three pieces of state:

- alreadyCaptured: Whether a component in the child subtree already
suspended. If true, subsequent suspends should bubble up to the
next boundary.
- didTimeout: Whether the boundary renders the primary or fallback
children. This is separate from `alreadyCaptured` because outside of
strict mode, when a boundary times out, the first commit renders the
primary children in an incomplete state, then performs a second commit
to switch the fallback. In that first commit, `alreadyCaptured` is
false and `didTimeout` is true.
- timedOutAt: The time at which the boundary timed out. This is separate
from `didTimeout` because it's not set unless the boundary
actually commits.


These were previously spread across several fields.

This happens to make the non-strict case a bit less hacky; the logic for
that special case is now mostly localized to the UnwindWork module.

* Hide timed-out Suspense children

When a subtree takes too long to load, we swap its contents out for
a fallback to unblock the rest of the tree. Because we don't want
to lose the state of the timed out view, we shouldn't actually delete
the nodes from the tree. Instead, we'll keep them mounted and hide
them visually. When the subtree is unblocked, we un-hide it, having
preserved the existing state.

Adds additional host config methods. For mutation mode:

- hideInstance
- hideTextInstance
- unhideInstance
- unhideTextInstance

For persistent mode:

- cloneHiddenInstance
- cloneUnhiddenInstance
- createHiddenTextInstance

I've only implemented the new methods in the noop and test renderers.
I'll implement them in the other renderers in subsequent commits.

* Include `hidden` prop in noop renderer's output

This will be used in subsequent commits to test that timed-out children
are properly hidden.

Also adds getChildrenAsJSX() method as an alternative to using
getChildren(). (Ideally all our tests would use test renderer #oneday.)

* Implement hide/unhide host config methods for DOM renderer

For DOM nodes, we hide using `el.style.display = 'none'`.

Text nodes don't have style, so we hide using `text.textContent = ''`.

* Implement hide/unhide host config methods for Art renderer

* Create DOM fixture that tests state preservation of timed out content

* Account for class components that suspend outside concurrent mode

Need to distinguish mount from update. An unfortunate edge case :(

* Fork appendAllChildren between persistent and mutation mode

* Remove redundant check for existence of el.style

* Schedule placement effect on indeterminate components

In non-concurrent mode, indeterminate fibers may commit in an
inconsistent state. But when they update, we should throw out the
old fiber and start fresh. Which means the new fiber needs a
placement effect.

* Pass null instead of current everywhere in mountIndeterminateComponent
2018-10-18 15:37:16 -07:00
Pablo Javier D. A
4f0bd45905 Replacement of old links, by the new ones of the documentation. (#13871) 2018-10-17 10:08:06 -04:00
Dan Abramov
7685b55d27 Remove unstable_read() in favor of direct dispatcher call (#13861)
* Remove unstable_read() in favor of direct dispatcher call

* This no longer throws immediately
2018-10-16 14:58:00 -04:00
Trivikram Kamat
21a79a1d9f [schedule] Call ensureHostCallbackIsScheduled without args (#13852)
ensureHostCallbackIsScheduled reads firstCallbackNode from global scope
and need not be passed in function call
2018-10-15 10:26:40 -07:00
Dan Abramov
9ea4bc6ed6 Fix false positive context warning when using an old React (#13850) 2018-10-14 15:35:52 +01:00
Sebastian Markbåge
4773fdf7cd Deprecate findDOMNode in StrictMode (#13841)
* Deprecate findDOMNode in StrictMode

There are two scenarios. One is that we pass a component instance that is
already in strict mode or the node that we find is in strict mode if
an outer component renders into strict mode.

I use a separate method findHostInstanceWithWarning for this so that
a) I can pass the method name (findDOMNode/findNodeHandle).
b) Can ignore this warning in React Native mixins/NativeComponent that use this helper.

I don't want to expose the fiber to the renderers themselves.
2018-10-12 15:42:00 -07:00
Andrew Clark
c9be16f5b6 [scheduler] Rename priority levels (#13842)
- "Interactive" -> "user-blocking"
- "Whenever" -> "Idle"

These are the terms used by @spanicker in their main-thread scheduling
proposal: https://github.com/spanicker/main-thread-scheduling#api-sketch

That proposal also uses "microtask" instead of "immediate" and "default"
instead of "normal." Not sure about "microtask" because I don't think
most people know what that is. And our implementation isn't a proper
microtask, though you could use it to implement microtasks if you made
sure to wrap every entry point. I don't really have a preference between
"default" and "normal."

These aren't necessarily the final names. Still prefixed by `unstable_`.
2018-10-12 14:42:15 -07:00
Dominic Gannaway
3b7ee26925 Deprecate context object as a consumer and add a warning message (#13829)
* Deprecate context object as a consumer and add various warning messages for unsupported usage.
2018-10-12 17:46:47 +01:00
Dan Abramov
8ca8a594e6 Error gracefully for unsupported SSR features (#13839) 2018-10-12 14:47:02 +01:00
Dan Abramov
6d5d250bef Use React.lazy in Suspense fixture (#13834) 2018-10-12 03:37:53 +01:00
Dan Abramov
4a635785f5 Fix User Timing oddities with Suspense, pure, and lazy (#13833)
* Show pure components in fiber timings with name

* Fix Suspense and lazy user timings

* Tweak message and type name

* Fix Flow
2018-10-12 03:15:14 +01:00
Nadia Osipova
d270db1c38 Merge branch 'master' of github.com:facebook/react
Fixed my own author name and email
2018-10-11 17:13:08 -07:00
Nadia Osipova
a165cf7473 Renamed 4 Internal React Modules 2018-10-11 17:12:31 -07:00
Nadia--
30b6076157 Renamed 4 Internal React Modules 2018-10-11 16:41:31 -07:00
Sophie Alpert
a68ca9a5b5 React.pure automatically forwards ref (#13822)
We're not planning to encourage legacy context, and without this change, it's difficult to use pure+forwardRef together. We could special-case `pure(forwardRef(...))` but this is hopefully simpler.

```js
React.pure(function(props, ref) {
  // ...
});
```
2018-10-11 13:04:42 -07:00
Dan Abramov
0af8199709 Revert "comment out temporarily"
This reverts commit 9abb9cd50a.
2018-10-10 17:23:18 +01:00
Dan Abramov
c73497c3c7 Update bundle sizes for 16.6.0-alpha.8af6728 release 2018-10-10 17:19:00 +01:00
Dan Abramov
101ea6b84d Update error codes for 16.6.0-alpha.8af6728 release 2018-10-10 17:18:59 +01:00
Dan Abramov
1a57dc6689 Updating dependencies for react-noop-renderer 2018-10-10 17:12:05 +01:00
Dan Abramov
77f8dfd81e Updating package versions for release 16.6.0-alpha.8af6728 2018-10-10 17:12:05 +01:00
Dan Abramov
9abb9cd50a comment out temporarily 2018-10-10 17:11:44 +01:00
Dan Abramov
8af6728c6f Enable Suspense + rename Placeholder (#13799)
* Enable Suspense

* <unstable_Placeholder delayMs> => <unstable_Suspense maxDuration>

* Update suspense fixture
2018-10-10 17:02:04 +01:00
Philipp
f47a958ea8 Don’t add onclick listener to React root (#13778)
Fixes #13777

As part of #11927 we introduced a regression by adding onclick handler
to the React root. This causes the whole React tree to flash when tapped
on iOS devices (for reasons I outlined in
https://github.com/facebook/react/issues/12989#issuecomment-414266839).

To fix this, we should only apply onclick listeners to portal roots. I
verified that my proposed fix indeed works by checking out our DOM
fixtures and adding regression tests.

Strangely, I had to make changes to the DOM fixtures to see the behavior
in the first place. This seems to be caused by our normal sites (and 
thus their React root) being bigger than the viewport:

![](http://cl.ly/3f18f8b85e91/Screen%20Recording%202018-10-05%20at%2001.32%20AM.gif)

An alternative approach to finding out if we're appending to a React
root would be to add a third parameter to `appendChildToContainer` based
on the tag of the parent fiber.
2018-10-09 10:27:06 +02:00
Andrew Clark
b2cea9078d [scheduler] Eagerly schedule rAF at beginning of frame (#13785)
* [scheduler] Eagerly schedule rAF at beginning of frame

Eagerly schedule the next animation callback at the beginning of the
frame. If the scheduler queue is not empty at the end of the frame, it
will continue flushing inside that callback. If the queue *is* empty,
then it will exit immediately. Posting the callback at the start of the
frame ensures it's fired within the earliest possible frame. If we
waited until the end of the frame to post the callback, we risk the
browser skipping a frame and not firing the callback until the frame
after that.

* Re-name scheduledCallback -> scheduledHostCallback
2018-10-08 17:28:58 -07:00
plievone
e2e7cb9f4c [scheduler] add a test documenting current behavior (#13687)
* [scheduler] add a test documenting current behavior

* Update with latest changes from master and confirm fixed behavior
2018-10-05 11:25:03 -07:00
Sophie Alpert
d83601080a Wrap retrySuspendedRoot using SchedulerTracing (#13776)
Previously, we were emptying root.pendingInteractionMap and permanently losing those interactions when applying an unrelated update to a tree that has no scheduled work that is waiting on promise resolution. (That is, one that is showing a fallback and waiting for the suspended content to resolve.)

The logic I'm leaving untouched with `nextRenderIncludesTimedOutPlaceholder` is *not* correct -- what we want is instead to know if *any* placeholder anywhere in the tree is showing its fallback -- but we don't currently have a better replacement, and this should unblock tracing with suspense again.
2018-10-04 15:11:12 -07:00
Dan Abramov
40a521aa72 Terminology: Functional -> Function Component (#13775)
* Terminology: Functional -> Function Component

* Drop the "stateless" (functions are already stateless, right?)
2018-10-04 22:44:46 +01:00
Michael Ridgway
605ab10a4a Add envify transform to scheduler package (#13766)
This package uses `process.env.NODE_ENV` but does not transform its usage during bundling like the rest of the React libraries do. This causes issues when `process` is not defined globally.
2018-10-04 14:18:19 -07:00
Andrew Clark
acc7f404ce Restart from root if promise pings before end of render phase (#13774)
* Restart from root if promise pings before end of render phase

* Test that placeholder resolves successfully even if fallback render is pending
2018-10-04 12:55:52 -07:00
Spencer Davies
cbc2240288 fix - small misspelling (#13768)
longer term needs a hyphen.
2018-10-04 04:05:51 -04:00
Andrew Clark
4eabeef11b Rename ReactSuspenseWithTestRenderer-test -> ReactSuspense-test 2018-10-03 18:54:38 -06:00
Andrew Clark
95a3e1c2e7 Rename ReactSuspense-test -> ReactSuspenseWithNoopRenderer-test
Doing this in its own commit to preserve history
2018-10-03 18:52:56 -06:00
Andrew Clark
96bcae9d50 Jest + test renderer helpers for concurrent mode (#13751)
* Jest + test renderer helpers for concurrent mode

Most of our concurrent React tests use the noop renderer. But most
of those tests don't test the renderer API, and could instead be
written with the test renderer. We should switch to using the test
renderer whenever possible, because that's what we expect product devs
and library authors to do. If test renderer is sufficient for writing
most React core tests, it should be sufficient for others, too. (The
converse isn't true but we should aim to dogfood test renderer as much
as possible.)

This PR adds a new package, jest-react (thanks @cpojer). I've moved
our existing Jest matchers into that package and added some new ones.

I'm not expecting to figure out the final API in this PR. My goal is
to land something good enough that we can start dogfooding in www.

TODO: Continue migrating Suspense tests, decide on better API names

* Add additional invariants to prevent common errors

- Errors if user attempts to flush when log of yields is not empty
- Throws if argument passed to toClearYields is not ReactTestRenderer

* Better method names

- toFlushAll -> toFlushAndYield
- toFlushAndYieldThrough ->
- toClearYields -> toHaveYielded

Also added toFlushWithoutYielding

* Fix jest-react exports

* Tweak README
2018-10-03 18:37:41 -06:00
Heaven
5c783ee751 Remove unreachable code (#13762) 2018-10-03 18:03:01 -06:00
Brian Vaughn
36c5d69caa Always warn about legacy context within StrictMode tree (#13760) 2018-10-03 08:40:45 -07:00
Maksim Markelov
3e9a5de888 UMD react-cache build (#13761) 2018-10-03 15:09:17 +01:00
Andrew Clark
3c60f32747 Fix simple-cache-provider import that I missed 2018-10-02 00:50:33 -06:00
Joe Cortopassi
8315a30b9b --save is no longer needed (#13756)
`--save` is on by default as of [npm 5](https://blog.npmjs.org/post/161081169345/v500), and `npm install aphrodite` is functionally equivalent to `npm install --save aphrodite` now
2018-10-01 19:15:11 +01:00
Andrew Clark
ce96e2df4d Rename simple-cache-provider to react-cache (#13755) 2018-10-01 09:07:40 -06:00
Brian Vaughn
c5212646f8 Removed extra typeof checks for contextType.unstable_read (#13736) 2018-09-28 13:12:26 -07:00
Brian Vaughn
806eebdaee Enable getDerivedStateFromError (#13746)
* Removed the enableGetDerivedStateFromCatch feature flag (aka permanently enabled the feature)
* Forked/copied ReactErrorBoundaries to ReactLegacyErrorBoundaries for testing componentDidCatch
* Updated error boundaries tests to apply to getDerivedStateFromCatch
* Renamed getDerivedStateFromCatch -> getDerivedStateFromError
* Warn if boundary with only componentDidCatch swallows error
* Fixed a subtle reconciliation bug with render phase error boundary
2018-09-28 13:05:01 -07:00
Andrew Clark
a0733fe13d pure (#13748)
* pure

A higher-order component version of the `React.PureComponent` class.
During an update, the previous props are compared to the new props. If
they are the same, React will skip rendering the component and
its children.

Unlike userspace implementations, `pure` will not add an additional
fiber to the tree.

The first argument must be a functional component; it does not work
with classes.

`pure` uses shallow comparison by default, like `React.PureComponent`.
A custom comparison can be passed as the second argument.

Co-authored-by: Andrew Clark <acdlite@fb.com>
Co-authored-by: Sophie Alpert <sophiebits@fb.com>

* Warn if first argument is not a functional component
2018-09-27 15:25:38 -07:00
Andrew Clark
4d17c3f051 [scheduler] Improve naive fallback version used in non-DOM environments
Added some tests for the non-DOM version of Scheduler that is used
as a fallback, e.g. Jest. The tests use Jest's fake timers API:

- `jest.runAllTimers(ms)` flushes all scheduled work, as expected
- `jest.advanceTimersByTime(ms)` flushes only callbacks that expire
within the given milliseconds.

These capabilities should be sufficient for most product tests. Because
jest's fake timers do not override performance.now or Date.now, we
assume time is constant. This means Scheduler's internal time will not
be aligned with other code that reads from `performance.now`. For finer
control, the user can override `window._sched` like we do in our tests.
We will likely publish a Jest package that has this built in.
2018-09-26 20:25:21 -07:00
Timothy Yung
469005d87b Revise AttributeType React Native Flow Type (#13737) 2018-09-26 14:40:57 -07:00
Dominic Gannaway
0dc0ddc1ef Rename AsyncMode -> ConcurrentMode (#13732)
* Rename AsyncMode -> ConcurrentMode
2018-09-26 17:13:02 +01:00
Dominic Gannaway
7601c37654 Ensure "addEventListener" exists on "window" for "scheduler" package (#13731)
* Ensure addEventListener exists on "window"
2018-09-26 13:38:56 +01:00
Brian Vaughn
d0c0ec98ef Added a PureComponent contextType test (#13729) 2018-09-25 17:28:33 -07:00
Brian Vaughn
4b68a6498b Support class component static contextType attribute (#13728)
* Support class component static contextType attribute
2018-09-25 15:49:46 -07:00
Andrew Clark
f305d2a489 [scheduler] Priority levels, continuations, and wrapped callbacks (#13720)
All of these features are based on features of React's internal
scheduler. The eventual goal is to lift as much as possible out of the
React internals into the Scheduler package.

Includes some renaming of existing methods.

- `scheduleWork` is now `scheduleCallback`
- `cancelScheduledWork` is now `cancelCallback`


Priority levels
---------------

Adds the ability to schedule callbacks at different priority levels.
The current levels are (final names TBD):

- Immediate priority. Fires at the end of the outermost currently
executing (similar to a microtask).
- Interactive priority. Fires within a few hundred milliseconds. This
should only be used to provide quick feedback to the user as a result
of an interaction.
- Normal priority. This is the default. Fires within several seconds.
- "Maybe" priority. Only fires if there's nothing else to do. Used for
prerendering or warming a cache.

The priority is changed using `runWithPriority`:

```js
runWithPriority(InteractivePriority, () => {
  scheduleCallback(callback);
});
```


Continuations
-------------

Adds the ability for a callback to yield without losing its place
in the queue, by returning a continuation. The continuation will have
the same expiration as the callback that yielded.


Wrapped callbacks
-----------------

Adds the ability to wrap a callback so that, when it is called, it
receives the priority of the current execution context.
2018-09-25 15:11:42 -07:00
Brian Ng
970a34baed Bump babel-eslint and remove flow supressions (#13727) 2018-09-25 22:48:31 +01:00
Brian Vaughn
13965b4d30 Interaction tracking ref-counting bug fixes (WIP) (#13590)
* Added new (failing) suspense+interaction tests
* Add new tracing+suspense test harness fixture
* Refactored interaction tracing to fix ref counting bug
2018-09-25 09:27:41 -07:00
Sergei Startsev
17e703cb96 Restore global window.event after event dispatching (#13688) (#13697) 2018-09-25 16:24:23 +01:00
Heaven
a775a767a1 Remove redundant logic (#13502) 2018-09-24 17:59:29 -07:00
Philipp
2c7b78f216 Add closing parenthesis (#13712)
I’ve first seen it in the [releases view](https://github.com/facebook/react/releases/tag/v16.5.2) and fixed it there as well.
2018-09-23 12:36:47 +02:00
Maksim Markelov
e1a067dea0 Fix circular dependency in TracingSubscriptions (#13689) 2018-09-19 18:48:32 +01:00
Heaven
518812eeb8 Clarify comment (#13684)
* fix comment typo

* Update Scheduler.js
2018-09-19 13:14:32 +01:00
Dan
eeb817785c Remove some old files from stats 2018-09-19 01:36:31 +01:00
Dan Abramov
7ea3ca1d13 Rename schedule to scheduler (#13683) 2018-09-19 01:26:28 +01:00
Brian Vaughn
9b70816642 Added another bullet to the CHANGELOG 2018-09-18 12:45:31 -07:00
Brian Vaughn
db9d51b65c Rename 'Schedule' header -> 'Schedule (Experimental)' 2018-09-18 12:41:14 -07:00
Brian Vaughn
0823f845cf 16.5.2 CHANGELOG 2018-09-18 12:39:32 -07:00
Brian Vaughn
bec2ddaf15 Update bundle sizes for 16.5.2 release 2018-09-18 11:30:50 -07:00
Brian Vaughn
789e714bd7 Update error codes for 16.5.2 release 2018-09-18 11:30:50 -07:00
Brian Vaughn
4269fafb0a Updating package versions for release 16.5.2 2018-09-18 11:24:33 -07:00
Brian Vaughn
4380f9ba17 Revert "Updating package versions for release 16.6.0-alpha.0"
This reverts commit 351c9015c8.
2018-09-18 11:00:13 -07:00
Brian Vaughn
72fad84e76 Revert "Updating dependencies for react-noop-renderer"
This reverts commit 489614c4fc.
2018-09-18 11:00:09 -07:00
Brian Vaughn
39f93f7987 Revert "Update error codes for 16.6.0-alpha.0 release"
This reverts commit 21ceb19ea0.
2018-09-18 11:00:04 -07:00
Brian Vaughn
c3fad5acf8 Revert "Update bundle sizes for 16.6.0-alpha.0 release"
This reverts commit 42d12317a7.
2018-09-18 10:59:57 -07:00
Heaven
dd91205617 Kepp calling peformWork consistent (#13596) 2018-09-18 07:48:18 -07:00
484 changed files with 38879 additions and 9158 deletions

View File

@@ -40,3 +40,9 @@ jobs:
key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}
paths:
- node_modules
- store_artifacts:
path: ./node_modules.tgz
- store_artifacts:
path: ./scripts/error-codes/codes.json

View File

@@ -1,5 +1,10 @@
'use strict';
const {
es5Paths,
esNextPaths,
} = require('./scripts/shared/pathsByLanguageVersion');
const OFF = 0;
const ERROR = 2;
@@ -16,6 +21,15 @@ module.exports = {
'react-internal',
],
parser: 'espree',
parserOptions: {
ecmaVersion: 2017,
sourceType: 'script',
ecmaFeatures: {
experimentalObjectRestSpread: true,
},
},
// We're stricter than the default config, mostly. We'll override a few rules
// and then enable some React specific ones.
rules: {
@@ -44,6 +58,13 @@ module.exports = {
'space-before-function-paren': OFF,
'valid-typeof': [ERROR, {requireStringLiterals: true}],
// We apply these settings to files that should run on Node.
// They can't use JSX or ES6 modules, and must be in strict mode.
// They can, however, use other ES6 features.
// (Note these rules are overridden later for source files.)
'no-var': ERROR,
strict: ERROR,
// React & JSX
// Our transforms set this automatically
'react/jsx-boolean-value': [ERROR, 'always'],
@@ -71,6 +92,33 @@ module.exports = {
},
overrides: [
{
// We apply these settings to files that we ship through npm.
// They must be ES5.
files: es5Paths,
parser: 'espree',
parserOptions: {
ecmaVersion: 5,
sourceType: 'script',
},
rules: {
'no-var': OFF,
strict: ERROR,
},
},
{
// We apply these settings to the source files that get compiled.
// They can use all features including JSX (but shouldn't use `var`).
files: esNextPaths,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module',
},
rules: {
'no-var': ERROR,
strict: OFF,
},
},
{
files: ['**/__tests__/*.js'],
rules: {

View File

@@ -1,3 +1,5 @@
'use strict';
const {esNextPaths} = require('./scripts/shared/pathsByLanguageVersion');
module.exports = {

View File

@@ -4,9 +4,135 @@
Changes that have landed in master but are not yet released.
Click to see more.
</summary>
</details>
## 16.8.0 (February 6, 2019)
### React
* Add [Hooks](https://reactjs.org/docs/hooks-intro.html) — a way to use state and other React features without writing a class. ([@acdlite](https://github.com/acdlite) et al. in [#13968](https://github.com/facebook/react/pull/13968))
* Improve the `useReducer` Hook lazy initialization API. ([@acdlite](https://github.com/acdlite) in [#14723](https://github.com/facebook/react/pull/14723))
### React DOM
* Bail out of rendering on identical values for `useState` and `useReducer` Hooks. ([@acdlite](https://github.com/acdlite) in [#14569](https://github.com/facebook/react/pull/14569))
* Use `Object.is` algorithm for comparing `useState` and `useReducer` values. ([@Jessidhia](https://github.com/Jessidhia) in [#14752](https://github.com/facebook/react/pull/14752))
* Dont compare the first argument passed to `useEffect`/`useMemo`/`useCallback` Hooks. ([@acdlite](https://github.com/acdlite) in [#14594](https://github.com/facebook/react/pull/14594))
* Support synchronous thenables passed to `React.lazy()`. ([@gaearon](https://github.com/gaearon) in [#14626](https://github.com/facebook/react/pull/14626))
* Render components with Hooks twice in Strict Mode (DEV-only) to match class behavior. ([@gaearon](https://github.com/gaearon) in [#14654](https://github.com/facebook/react/pull/14654))
* Warn about mismatching Hook order in development. ([@threepointone](https://github.com/threepointone) in [#14585](https://github.com/facebook/react/pull/14585) and [@acdlite](https://github.com/acdlite) in [#14591](https://github.com/facebook/react/pull/14591))
* Effect clean-up functions must return either `undefined` or a function. All other values, including `null`, are not allowed. [@acdlite](https://github.com/acdlite) in [#14119](https://github.com/facebook/react/pull/14119)
### React Test Renderer and Test Utils
* Support Hooks in the shallow renderer. ([@trueadm](https://github.com/trueadm) in [#14567](https://github.com/facebook/react/pull/14567))
* Fix wrong state in `shouldComponentUpdate` in the presence of `getDerivedStateFromProps` for Shallow Renderer. ([@chenesan](https://github.com/chenesan) in [#14613](https://github.com/facebook/react/pull/14613))
* Add `ReactTestRenderer.act()` and `ReactTestUtils.act()` for batching updates so that tests more closely match real behavior. ([@threepointone](https://github.com/threepointone) in [#14744](https://github.com/facebook/react/pull/14744))
### ESLint Plugin: React Hooks
* Initial [release](https://www.npmjs.com/package/eslint-plugin-react-hooks). ([@calebmer](https://github.com/calebmer) in [#13968](https://github.com/facebook/react/pull/13968))
* Fix reporting after encountering a loop. ([@calebmer](https://github.com/calebmer) and [@Yurickh](https://github.com/Yurickh) in [#14661](https://github.com/facebook/react/pull/14661))
* Don't consider throwing to be a rule violation. ([@sophiebits](https://github.com/sophiebits) in [#14040](https://github.com/facebook/react/pull/14040))
## 16.7.0 (December 19, 2018)
### React DOM
* Fix performance of `React.lazy` for large numbers of lazily-loaded components. ([@acdlite](http://github.com/acdlite) in [#14429](https://github.com/facebook/react/pull/14429))
* Clear fields on unmount to avoid memory leaks. ([@trueadm](http://github.com/trueadm) in [#14276](https://github.com/facebook/react/pull/14276))
* Fix bug with SSR and context when mixing `react-dom/server@16.6` and `react@<16.6`. ([@gaearon](http://github.com/gaearon) in [#14291](https://github.com/facebook/react/pull/14291))
* Fix a performance regression in profiling mode. ([@bvaughn](http://github.com/bvaughn) in [#14383](https://github.com/facebook/react/pull/14383))
### Scheduler (Experimental)
* Post to MessageChannel instead of window. ([@acdlite](http://github.com/acdlite) in [#14234](https://github.com/facebook/react/pull/14234))
* Reduce serialization overhead. ([@developit](http://github.com/developit) in [#14249](https://github.com/facebook/react/pull/14249))
* Fix fallback to `setTimeout` in testing environments. ([@bvaughn](http://github.com/bvaughn) in [#14358](https://github.com/facebook/react/pull/14358))
* Add methods for debugging. ([@mrkev](http://github.com/mrkev) in [#14053](https://github.com/facebook/react/pull/14053))
## 16.6.3 (November 12, 2018)
### React DOM
* Fix bugs in `Suspense` and `lazy`. ([@acdlite](https://github.com/acdlite) in [#14133](https://github.com/facebook/react/pull/14133), [#14157](https://github.com/facebook/react/pull/14157), and [#14164](https://github.com/facebook/react/pull/14164))
* Fix highlighting of `React.memo` updates in React DevTools. ([@bvaughn](https://github.com/bvaughn) in [#14141](https://github.com/facebook/react/pull/14141))
* Fix interaction of Suspense with the React Profiler. ([@bvaughn](https://github.com/bvaughn) in [#14065](https://github.com/facebook/react/pull/14065))
* Fix a false positive warning when using Suspense. ([@acdlite](https://github.com/acdlite) in [#14158](https://github.com/facebook/react/pull/14158))
### React DOM Server
* Fix incorrect sharing of context state between `renderToNodeStream()` calls. ([@sebmarkbage](https://github.com/sebmarkbage) in [#14182](https://github.com/facebook/react/pull/14182))
* Add a warning about incorrect usage of the context API. ([@trueadm](https://github.com/trueadm) in [#14033](https://github.com/facebook/react/pull/14033))
## 16.6.2 (November 12, 2018)
This release was published in a broken state and should be skipped.
## 16.6.1 (November 6, 2018)
### React DOM
* Fallback should not remount every time a promise resolves. ([@acdlite](https://github.com/acdlite) in [#14083](https://github.com/facebook/react/pull/14083))
* Fix bug where Suspense keeps showing fallback even after everything finishes loading. ([@acdlite](https://github.com/acdlite) in [#14083](https://github.com/facebook/react/pull/14083))
* Fix a crash when Suspense finishes loading in IE11. ([@sophiebits](https://github.com/sophiebits) in [#14126](https://github.com/facebook/react/pull/14126))
* Fix unresolved default props in lifecycle methods of a lazy component. ([@gaearon](https://github.com/gaearon) in [#14112](https://github.com/facebook/react/pull/14112))
* Fix bug when recovering from an error thrown during complete phase. ([@gaearon](https://github.com/gaearon) in [#14104](https://github.com/facebook/react/pull/14104))
### Scheduler (Experimental)
* Switch from deadline object to `shouldYield` API. ([@acdlite](https://github.com/acdlite) in [#14025](https://github.com/facebook/react/pull/14025))
## 16.6.0 (October 23, 2018)
### React
* Add `React.memo()` as an alternative to `PureComponent` for functions. ([@acdlite](https://github.com/acdlite) in [#13748](https://github.com/facebook/react/pull/13748))
* Add `React.lazy()` for code splitting components. ([@acdlite](https://github.com/acdlite) in [#13885](https://github.com/facebook/react/pull/13885))
* `React.StrictMode` now warns about legacy context API. ([@bvaughn](https://github.com/bvaughn) in [#13760](https://github.com/facebook/react/pull/13760))
* `React.StrictMode` now warns about `findDOMNode`. ([@sebmarkbage](https://github.com/sebmarkbage) in [#13841](https://github.com/facebook/react/pull/13841))
* Rename `unstable_AsyncMode` to `unstable_ConcurrentMode`. ([@trueadm](https://github.com/trueadm) in [#13732](https://github.com/facebook/react/pull/13732))
* Rename `unstable_Placeholder` to `Suspense`, and `delayMs` to `maxDuration`. ([@gaearon](https://github.com/gaearon) in [#13799](https://github.com/facebook/react/pull/13799) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13922](https://github.com/facebook/react/pull/13922))
### React DOM
* Add `contextType` as a more ergonomic way to subscribe to context from a class. ([@bvaughn](https://github.com/bvaughn) in [#13728](https://github.com/facebook/react/pull/13728))
* Add `getDerivedStateFromError` lifecycle method for catching errors in a future asynchronous server-side renderer. ([@bvaughn](https://github.com/bvaughn) in [#13746](https://github.com/facebook/react/pull/13746))
* Warn when `<Context>` is used instead of `<Context.Consumer>`. ([@trueadm](https://github.com/trueadm) in [#13829](https://github.com/facebook/react/pull/13829))
* Fix gray overlay on iOS Safari. ([@philipp-spiess](https://github.com/philipp-spiess) in [#13778](https://github.com/facebook/react/pull/13778))
* Fix a bug caused by overwriting `window.event` in development. ([@sergei-startsev](https://github.com/sergei-startsev) in [#13697](https://github.com/facebook/react/pull/13697))
### React DOM Server
* Add support for `React.memo()`. ([@alexmckenley](https://github.com/alexmckenley) in [#13855](https://github.com/facebook/react/pull/13855))
* Add support for `contextType`. ([@alexmckenley](https://github.com/alexmckenley) and [@sebmarkbage](https://github.com/sebmarkbage) in [#13889](https://github.com/facebook/react/pull/13889))
### Scheduler (Experimental)
* Rename the package to `scheduler`. ([@gaearon](https://github.com/gaearon) in [#13683](https://github.com/facebook/react/pull/13683))
* Support priority levels, continuations, and wrapped callbacks. ([@acdlite](https://github.com/acdlite) in [#13720](https://github.com/facebook/react/pull/13720) and [#13842](https://github.com/facebook/react/pull/13842))
* Improve the fallback mechanism in non-DOM environments. ([@acdlite](https://github.com/acdlite) in [#13740](https://github.com/facebook/react/pull/13740))
* Schedule `requestAnimationFrame` earlier. ([@acdlite](https://github.com/acdlite) in [#13785](https://github.com/facebook/react/pull/13785))
* Fix the DOM detection to be more thorough. ([@trueadm](https://github.com/trueadm) in [#13731](https://github.com/facebook/react/pull/13731))
* Fix bugs with interaction tracing. ([@bvaughn](https://github.com/bvaughn) in [#13590](https://github.com/facebook/react/pull/13590))
* Add the `envify` transform to the package. ([@mridgway](https://github.com/mridgway) in [#13766](https://github.com/facebook/react/pull/13766))
## 16.5.2 (September 18, 2018)
### React DOM
* Fixed a recent `<iframe>` regression ([@JSteunou](https://github.com/JSteunou) in [#13650](https://github.com/facebook/react/pull/13650))
* Fix `updateWrapper` so that `<textarea>`s no longer re-render when data is unchanged ([@joelbarbosa](https://github.com/joelbarbosa) in [#13643](https://github.com/facebook/react/pull/13643))
### Schedule (Experimental)
* Renaming "tracking" API to "tracing" ([@bvaughn](https://github.com/bvaughn) in [#13641](https://github.com/facebook/react/pull/13641))
* Add UMD production+profiling entry points ([@bvaughn](https://github.com/bvaughn) in [#13642](https://github.com/facebook/react/pull/13642))
* Refactored `schedule` to remove some React-isms and improve performance for when deferred updates time out ([@acdlite](https://github.com/acdlite) in [#13582](https://github.com/facebook/react/pull/13582))
## 16.5.1 (September 13, 2018)
### React
@@ -47,7 +173,7 @@
* Fix incorrect data in `compositionend` event when typing Korean on IE11 ([@crux153](https://github.com/crux153) in [#12563](https://github.com/facebook/react/issues/12563))
* Fix a crash when using dynamic `children` in the `<option>` tag ([@Slowyn](https://github.com/Slowyn) in [#13261](https://github.com/facebook/react/issues/13261), [@gaearon](https://github.com/gaearon) in [#13465](https://github.com/facebook/react/pull/13465))
* Fix the `checked` attribute not getting initially set on the `input` ([@dilidili](https://github.com/dilidili) in [#13114](https://github.com/facebook/react/issues/13114))
* Fix hydration of `dangerouslySetInnerHTML` when `__html` is not a string ([@gaearon](https://github.com/gaearon) in [#13353](https://github.com/facebook/react/issues/13353))
* Fix hydration of `dangerouslySetInnerHTML` when `__html` is not a string ([@gaearon](https://github.com/gaearon) in [#13353](https://github.com/facebook/react/issues/13353))
* Fix a warning about missing controlled `onChange` to fire on falsy values too ([@nicolevy](https://github.com/nicolevy) in [#12628](https://github.com/facebook/react/issues/12628))
* Fix `submit` and `reset` buttons getting an empty label ([@ellsclytn](https://github.com/ellsclytn) in [#12780](https://github.com/facebook/react/issues/12780))
* Fix the `onSelect` event not being triggered after drag and drop ([@gaearon](https://github.com/gaearon) in [#13422](https://github.com/facebook/react/issues/13422))
@@ -238,7 +364,7 @@
* Deduplicate warning messages about invalid callback. ([@yenshih](https://github.com/yenshih) in [#11833](https://github.com/facebook/react/pull/11833))
* Deprecate `ReactDOM.unstable_createPortal()` in favor of `ReactDOM.createPortal()`. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#11747](https://github.com/facebook/react/pull/11747))
* Don't emit User Timing entries for context types. ([@abhaynikam](https://github.com/abhaynikam) in [#12250](https://github.com/facebook/react/pull/12250))
* Improve the error message when context consumer child isn't a function. ([@raunofreiberg](https://github.com/raunofreiberg) in [#12267](https://github.com/facebook/react/pull/12267))
* Improve the error message when context consumer child isn't a function. ([@raunofreiberg](https://github.com/raunofreiberg) in [#12267](https://github.com/facebook/react/pull/12267))
* Improve the error message when adding a ref to a functional component. ([@skiritsis](https://github.com/skiritsis) in [#11782](https://github.com/facebook/react/pull/11782))
### React DOM Server

View File

@@ -60,9 +60,9 @@ You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
### [Code of Conduct](https://code.facebook.com/codeofconduct)
### [Code of Conduct](https://code.fb.com/codeofconduct)
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.fb.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
### [Contributing Guide](https://reactjs.org/contributing/how-to-contribute.html)

View File

@@ -17,7 +17,7 @@
//
// You'll need a GitHub token, you can re-use this one:
//
// e622517d9f1136ea8900 07c6373666312cdfaa69
// 0a7d5c3cad9a6dbec2d9 9a5222cf49062a4c1ef7
//
// (Just remove the space)
//
@@ -29,9 +29,16 @@ const {markdown, danger} = require('danger');
const fetch = require('node-fetch');
const {generateResultsArray} = require('./scripts/rollup/stats');
const {readFileSync} = require('fs');
const {existsSync, readFileSync} = require('fs');
const {exec} = require('child_process');
if (!existsSync('./scripts/rollup/results.json')) {
// This indicates the build failed previously.
// In that case, there's nothing for the Dangerfile to do.
// Exit early to avoid leaving a redundant (and potentially confusing) PR comment.
process.exit(0);
}
const currentBuildResults = JSON.parse(
readFileSync('./scripts/rollup/results.json')
);

View File

@@ -32,7 +32,7 @@ class VectorWidget extends React.Component {
/**
* When the component is mounted into the document - this is similar to a
* constructor, but invoked when the instance is actually mounted into the
* document. Here's, we'll just set up an animation loop that invokes our
* document. Here, we'll just set up an animation loop that invokes our
* method. Binding of `this.onTick` is not needed because all React methods
* are automatically bound before being mounted.
*/

View File

@@ -12,7 +12,7 @@
},
"scripts": {
"prestart":
"cp ../../build/dist/react.development.js public/ && cp ../../build/dist/react-dom.development.js public/ && cp ../../build/dist/react-dom-server.browser.development.js public/",
"cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js public/",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",

View File

@@ -860,7 +860,7 @@ class App extends React.Component {
});
break;
default:
throw new Error('Switch statement should be exhuastive');
throw new Error('Switch statement should be exhaustive');
}
// Sort
@@ -887,7 +887,7 @@ class App extends React.Component {
});
}
default:
throw new Error('Switch statement should be exhuastive');
throw new Error('Switch statement should be exhaustive');
}
}

View File

@@ -9,8 +9,11 @@ coverage
# production
build
public/react.development.js
public/react.production.min.js
public/react-dom.development.js
public/react-dom.production.min.js
public/react-dom-server.browser.development.js
public/react-dom-server.browser.production.min.js
# misc
.DS_Store

View File

@@ -18,7 +18,7 @@
},
"scripts": {
"start": "react-scripts start",
"prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react-dom-server.browser.development.js public/",
"prestart": "cp ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js public/",
"build": "react-scripts build && cp build/index.html build/200.html",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"

View File

@@ -7,8 +7,9 @@ class Header extends React.Component {
super(props, context);
const query = parse(window.location.search);
const version = query.version || 'local';
const production = query.production || false;
const versions = [version];
this.state = {version, versions};
this.state = {version, versions, production};
}
componentWillMount() {
getVersionTags().then(tags => {
@@ -25,6 +26,14 @@ class Header extends React.Component {
}
window.location.search = stringify(query);
}
handleProductionChange(event) {
const query = parse(window.location.search);
query.production = event.target.checked;
if (!query.production) {
delete query.production;
}
window.location.search = stringify(query);
}
handleFixtureChange(event) {
window.location.pathname = event.target.value;
}
@@ -43,6 +52,16 @@ class Header extends React.Component {
</span>
<div className="header-controls">
<input
id="react_production"
className="header__checkbox"
type="checkbox"
checked={this.state.production}
onChange={this.handleProductionChange}
/>
<label htmlFor="react_production" className="header__label">
Production
</label>
<label htmlFor="example">
<span className="sr-only">Select an example</span>
<select
@@ -68,6 +87,7 @@ class Header extends React.Component {
<option value="/pointer-events">Pointer Events</option>
<option value="/mouse-events">Mouse Events</option>
<option value="/selection-events">Selection Events</option>
<option value="/suspense">Suspense</option>
</select>
</label>
<label htmlFor="react_version">

View File

@@ -0,0 +1,321 @@
import Fixture from '../../Fixture';
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
const React = window.React;
const ReactDOM = window.ReactDOM;
const Suspense = React.Suspense;
let cache = new Set();
function AsyncStep({text, ms}) {
if (!cache.has(text)) {
throw new Promise(resolve =>
setTimeout(() => {
cache.add(text);
resolve();
}, ms)
);
}
return null;
}
let suspendyTreeIdCounter = 0;
class SuspendyTreeChild extends React.Component {
id = suspendyTreeIdCounter++;
state = {
step: 1,
isHidden: false,
};
increment = () => this.setState(s => ({step: s.step + 1}));
componentDidMount() {
document.addEventListener('keydown', this.onKeydown);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeydown);
}
onKeydown = event => {
if (event.metaKey && event.key === 'Enter') {
this.increment();
}
};
render() {
return (
<React.Fragment>
<Suspense fallback={<div>(display: none)</div>}>
<div>
<AsyncStep text={`${this.state.step} + ${this.id}`} ms={500} />
{this.props.children}
</div>
</Suspense>
<button onClick={this.increment}>Hide</button>
</React.Fragment>
);
}
}
class SuspendyTree extends React.Component {
parentContainer = React.createRef(null);
container = React.createRef(null);
componentDidMount() {
this.setState({});
document.addEventListener('keydown', this.onKeydown);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeydown);
}
onKeydown = event => {
if (event.metaKey && event.key === '/') {
this.removeAndRestore();
}
};
removeAndRestore = () => {
const parentContainer = this.parentContainer.current;
const container = this.container.current;
parentContainer.removeChild(container);
parentContainer.textContent = '(removed from DOM)';
setTimeout(() => {
parentContainer.textContent = '';
parentContainer.appendChild(container);
}, 500);
};
render() {
return (
<React.Fragment>
<div ref={this.parentContainer}>
<div ref={this.container} />
</div>
<div>
{this.container.current !== null
? ReactDOM.createPortal(
<React.Fragment>
<SuspendyTreeChild>{this.props.children}</SuspendyTreeChild>
<button onClick={this.removeAndRestore}>Remove</button>
</React.Fragment>,
this.container.current
)
: null}
</div>
</React.Fragment>
);
}
}
class TextInputFixtures extends React.Component {
render() {
return (
<FixtureSet
title="Suspense"
description="Preserving the state of timed-out children">
<p>
Clicking "Hide" will hide the fixture context using{' '}
<code>display: none</code> for 0.5 seconds, then restore. This is the
built-in behavior for timed-out children. Each fixture tests whether
the state of the DOM is preserved. Clicking "Remove" will remove the
fixture content from the DOM for 0.5 seconds, then restore. This is{' '}
<strong>not</strong> how timed-out children are hidden, but is
included for comparison purposes.
</p>
<div className="footnote">
As a shortcut, you can use Command + Enter (or Control + Enter on
Windows, Linux) to "Hide" all the fixtures, or Command + / to "Remove"
them.
</div>
<TestCase title="Text selection where entire range times out">
<TestCase.Steps>
<li>Use your cursor to select the text below.</li>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Text selection is preserved when hiding, but not when removing.
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
Select this entire sentence (and only this sentence).
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Text selection that extends outside timed-out subtree">
<TestCase.Steps>
<li>
Use your cursor to select a range that includes both the text and
the "Go" button.
</li>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Text selection is preserved when hiding, but not when removing.
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
Select a range that includes both this sentence and the "Go"
button.
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Focus">
<TestCase.Steps>
<li>
Use your cursor to select a range that includes both the text and
the "Go" button.
</li>
<li>
Intead of clicking "Go", which switches focus, press Command +
Enter (or Control + Enter on Windows, Linux).
</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The ideal behavior is that the focus would not be lost, but
currently it is (both when hiding and removing).
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
<button>Focus me</button>
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Uncontrolled form input">
<TestCase.Steps>
<li>Type something ("Hello") into the text input.</li>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Input is preserved when hiding, but not when removing.
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
<input type="text" />
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Image flicker">
<TestCase.Steps>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The image should reappear without flickering. The text should not
reflow.
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Atom_%282%29.png" />React
is cool
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Iframe">
<TestCase.Steps>
<li>
The iframe shows a nested version of this fixtures app. Navigate
to the "Text inputs" page.
</li>
<li>Select one of the checkboxes.</li>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
When removing, the iframe is reloaded. When hiding, the iframe
should still be on the "Text inputs" page. The checkbox should still
be checked. (Unfortunately, scroll position is lost.)
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
<iframe width="500" height="300" src="/" />
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Video playback">
<TestCase.Steps>
<li>Start playing the video, or seek to a specific position.</li>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The playback position should stay the same. When hiding, the video
plays in the background for the entire duration. When removing, the
video stops playing, but the position is not lost.
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
<video controls>
<source
src="http://techslides.com/demos/sample-videos/small.webm"
type="video/webm"
/>
<source
src="http://techslides.com/demos/sample-videos/small.ogv"
type="video/ogg"
/>
<source
src="http://techslides.com/demos/sample-videos/small.mp4"
type="video/mp4"
/>
<source
src="http://techslides.com/demos/sample-videos/small.3gp"
type="video/3gp"
/>
</video>
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Audio playback">
<TestCase.Steps>
<li>Start playing the audio, or seek to a specific position.</li>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The playback position should stay the same. When hiding, the audio
plays in the background for the entire duration. When removing, the
audio stops playing, but the position is not lost.
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
<audio controls={true}>
<source src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Mozart_K448.ogg" />
</audio>
</SuspendyTree>
</Fixture>
</TestCase>
<TestCase title="Scroll position">
<TestCase.Steps>
<li>Scroll to a position in the list.</li>
<li>Click "Hide" or "Remove".</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Scroll position is preserved when hiding, but not when removing.
</TestCase.ExpectedResult>
<Fixture>
<SuspendyTree>
<div style={{height: 200, overflow: 'scroll'}}>
{Array(20)
.fill()
.map((_, i) => <h2 key={i}>{i + 1}</h2>)}
</div>
</SuspendyTree>
</Fixture>
</TestCase>
</FixtureSet>
);
}
}
export default TextInputFixtures;

View File

@@ -37,12 +37,15 @@ function loadScript(src) {
}
export function reactPaths() {
let reactPath = 'react.development.js';
let reactDOMPath = 'react-dom.development.js';
let reactDOMServerPath = 'react-dom-server.browser.development.js';
let query = parseQuery(window.location.search);
let version = query.version || 'local';
let isProduction = query.production === 'true';
let environment = isProduction ? 'production.min' : 'development';
let reactPath = 'react.' + environment + '.js';
let reactDOMPath = 'react-dom.' + environment + '.js';
let reactDOMServerPath = 'react-dom-server.browser.' + environment + '.js';
if (version !== 'local') {
const {major, minor, prerelease} = semver(version);
@@ -51,21 +54,34 @@ export function reactPaths() {
// Load the old module location for anything less than 16 RC
if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
reactPath =
'https://unpkg.com/react@' + version + '/umd/react.development.js';
'https://unpkg.com/react@' +
version +
'/umd/react.' +
environment +
'.js';
reactDOMPath =
'https://unpkg.com/react-dom@' +
version +
'/umd/react-dom.development.js';
'/umd/react-dom.' +
environment +
'.js';
reactDOMServerPath =
'https://unpkg.com/react-dom@' +
version +
'/umd/react-dom-server.browser.development';
'/umd/react-dom-server.browser.' +
environment +
'.js';
} else {
reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
let suffix = isProduction ? '.min.js' : '.js';
reactPath = 'https://unpkg.com/react@' + version + '/dist/react' + suffix;
reactDOMPath =
'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
'https://unpkg.com/react-dom@' + version + '/dist/react-dom' + suffix;
reactDOMServerPath =
'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
'https://unpkg.com/react-dom@' +
version +
'/dist/react-dom-server' +
suffix;
}
}

View File

@@ -50,7 +50,7 @@ h3 {
margin: 8px 0 16px;
}
h4, h4, h5, h6 {
h4, h5, h6 {
font-size: 16px;
margin: 0 0 16px;
}
@@ -126,6 +126,15 @@ textarea {
width: 100%;
}
.header__checkbox {
vertical-align: middle;
}
.header__label {
font-size: 12px;
color: #ccc;
}
.sr-only {
clip: rect(0, 0, 0, 0);
height: 0;

View File

@@ -0,0 +1,14 @@
{
"root": true,
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": ["react-hooks"],
"rules": {
"react-hooks/rules-of-hooks": 2
}
}

View File

@@ -0,0 +1,7 @@
# ESLint Playground Fixture
This is an internal playground for quick iteration on our lint rules inside an IDE like VSCode.
See instructions in `./index.js` in this directory.
![Demo](https://duaw26jehqd4r.cloudfront.net/items/2Z390a31003O0l0o0e3O/Screen%20Recording%202019-01-16%20at%2010.29%20PM.gif?v=d6856125)

11
fixtures/eslint/index.js Normal file
View File

@@ -0,0 +1,11 @@
// This is a testing playground for our lint rules.
// 1. Run yarn && yarn start
// 2. "File > Add Folder to Workspace" this specific folder in VSCode with ESLint extension
// 3. Changes to the rule source should get picked up without restarting ESLint server
function Foo() {
if (condition) {
useEffect(() => {});
}
}

View File

@@ -0,0 +1,12 @@
{
"private": true,
"name": "eslint-playground",
"dependencies": {
"eslint": "4.1.0",
"eslint-plugin-react-hooks": "link:./proxy"
},
"scripts": {
"start": "./watch.sh",
"lint": "eslint index.js"
}
}

View File

@@ -0,0 +1,35 @@
'use strict';
// This file is a proxy for our rule definition that will
// load the latest built version on every check. This makes
// it convenient to test inside IDEs (which would otherwise
// load a version of our rule once and never restart the server).
// See instructions in ../index.js playground.
let build;
reload();
function reload() {
for (let id in require.cache) {
if (/eslint-plugin-react-hooks/.test(id)) {
delete require.cache[id];
}
}
// Point to the built version.
build = require('../../../build/node_modules/eslint-plugin-react-hooks');
}
let rules = {};
for (let key in build.rules) {
if (build.rules.hasOwnProperty(key)) {
rules[key] = Object.assign({}, build.rules, {
create() {
// Reload changes to the built rule
reload();
return build.rules[key].create.apply(this, arguments);
},
});
}
}
module.exports = {rules};

View File

@@ -0,0 +1,4 @@
{
"private": true,
"version": "0.0.0"
}

3
fixtures/eslint/watch.sh Executable file
View File

@@ -0,0 +1,3 @@
#!/bin/bash
(cd ../.. && yarn build eslint --type=NODE_DEV)
(cd ../.. && watchman-make --make 'yarn build eslint --type=NODE_DEV' -p 'packages/eslint-plugin-*/**/*' -t ignored)

853
fixtures/eslint/yarn.lock Normal file
View File

@@ -0,0 +1,853 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
acorn-jsx@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
dependencies:
acorn "^3.0.4"
acorn@^3.0.4:
version "3.3.0"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
acorn@^5.5.0:
version "5.7.3"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
ajv-keywords@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
integrity sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=
ajv@^6.0.1:
version "6.7.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.7.0.tgz#e3ce7bb372d6577bb1839f1dfdfcbf5ad2948d96"
integrity sha512-RZXPviBTtfmtka9n9sy1N5M5b82CbxWIR6HIis4s3WQTXDJamc/0gpCWNGz6EWdWp4DOfjzJfhz/AS9zVPjjWg==
dependencies:
fast-deep-equal "^2.0.1"
fast-json-stable-stringify "^2.0.0"
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"
ansi-escapes@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==
ansi-regex@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
ansi-regex@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
ansi-styles@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
ansi-styles@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
dependencies:
color-convert "^1.9.0"
argparse@^1.0.7:
version "1.0.10"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
dependencies:
sprintf-js "~1.0.2"
babel-code-frame@^6.22.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
dependencies:
chalk "^1.1.3"
esutils "^2.0.2"
js-tokens "^3.0.2"
balanced-match@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
brace-expansion@^1.1.7:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
dependencies:
balanced-match "^1.0.0"
concat-map "0.0.1"
buffer-from@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
caller-path@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
integrity sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=
dependencies:
callsites "^0.2.0"
callsites@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
integrity sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=
chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
dependencies:
ansi-styles "^2.2.1"
escape-string-regexp "^1.0.2"
has-ansi "^2.0.0"
strip-ansi "^3.0.0"
supports-color "^2.0.0"
chalk@^2.0.0, chalk@^2.1.0:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
dependencies:
ansi-styles "^3.2.1"
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"
chardet@^0.4.0:
version "0.4.2"
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
circular-json@^0.3.1:
version "0.3.3"
resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
cli-cursor@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
dependencies:
restore-cursor "^2.0.0"
cli-width@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
color-convert@^1.9.0:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
dependencies:
color-name "1.1.3"
color-name@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
concat-stream@^1.6.0:
version "1.6.2"
resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
dependencies:
buffer-from "^1.0.0"
inherits "^2.0.3"
readable-stream "^2.2.2"
typedarray "^0.0.6"
core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
debug@^2.6.8:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
dependencies:
ms "2.0.0"
deep-is@~0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
doctrine@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
dependencies:
esutils "^2.0.2"
escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
"eslint-plugin-react-hooks@link:./proxy":
version "0.0.0"
uid ""
eslint-scope@^3.7.1:
version "3.7.3"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
integrity sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==
dependencies:
esrecurse "^4.1.0"
estraverse "^4.1.1"
eslint@4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.1.0.tgz#bbb55a28220ee08b69da9554d45a6b2ebfd7d913"
integrity sha1-u7VaKCIO4Itp2pVU1FprLr/X2RM=
dependencies:
babel-code-frame "^6.22.0"
chalk "^1.1.3"
concat-stream "^1.6.0"
debug "^2.6.8"
doctrine "^2.0.0"
eslint-scope "^3.7.1"
espree "^3.4.3"
esquery "^1.0.0"
estraverse "^4.2.0"
esutils "^2.0.2"
file-entry-cache "^2.0.0"
glob "^7.1.2"
globals "^9.17.0"
ignore "^3.3.3"
imurmurhash "^0.1.4"
inquirer "^3.0.6"
is-my-json-valid "^2.16.0"
is-resolvable "^1.0.0"
js-yaml "^3.8.4"
json-stable-stringify "^1.0.1"
levn "^0.3.0"
lodash "^4.17.4"
minimatch "^3.0.2"
mkdirp "^0.5.1"
natural-compare "^1.4.0"
optionator "^0.8.2"
path-is-inside "^1.0.2"
pluralize "^4.0.0"
progress "^2.0.0"
require-uncached "^1.0.3"
strip-json-comments "~2.0.1"
table "^4.0.1"
text-table "~0.2.0"
espree@^3.4.3:
version "3.5.4"
resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
dependencies:
acorn "^5.5.0"
acorn-jsx "^3.0.0"
esprima@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
esquery@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
dependencies:
estraverse "^4.0.0"
esrecurse@^4.1.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
dependencies:
estraverse "^4.1.0"
estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
esutils@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
external-editor@^2.0.4:
version "2.2.0"
resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
dependencies:
chardet "^0.4.0"
iconv-lite "^0.4.17"
tmp "^0.0.33"
fast-deep-equal@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
fast-json-stable-stringify@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
fast-levenshtein@~2.0.4:
version "2.0.6"
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
figures@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
dependencies:
escape-string-regexp "^1.0.5"
file-entry-cache@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
integrity sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=
dependencies:
flat-cache "^1.2.1"
object-assign "^4.0.1"
flat-cache@^1.2.1:
version "1.3.4"
resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.4.tgz#2c2ef77525cc2929007dfffa1dd314aa9c9dee6f"
integrity sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==
dependencies:
circular-json "^0.3.1"
graceful-fs "^4.1.2"
rimraf "~2.6.2"
write "^0.2.1"
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
generate-function@^2.0.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.3.1.tgz#f069617690c10c868e73b8465746764f97c3479f"
integrity sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==
dependencies:
is-property "^1.0.2"
generate-object-property@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
integrity sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=
dependencies:
is-property "^1.0.0"
glob@^7.1.2, glob@^7.1.3:
version "7.1.3"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
inherits "2"
minimatch "^3.0.4"
once "^1.3.0"
path-is-absolute "^1.0.0"
globals@^9.17.0:
version "9.18.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
graceful-fs@^4.1.2:
version "4.1.15"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
has-ansi@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
dependencies:
ansi-regex "^2.0.0"
has-flag@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
iconv-lite@^0.4.17:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
dependencies:
safer-buffer ">= 2.1.2 < 3"
ignore@^3.3.3:
version "3.3.10"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
inflight@^1.0.4:
version "1.0.6"
resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
dependencies:
once "^1.3.0"
wrappy "1"
inherits@2, inherits@^2.0.3, inherits@~2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
inquirer@^3.0.6:
version "3.3.0"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
dependencies:
ansi-escapes "^3.0.0"
chalk "^2.0.0"
cli-cursor "^2.1.0"
cli-width "^2.0.0"
external-editor "^2.0.4"
figures "^2.0.0"
lodash "^4.3.0"
mute-stream "0.0.7"
run-async "^2.2.0"
rx-lite "^4.0.8"
rx-lite-aggregates "^4.0.8"
string-width "^2.1.0"
strip-ansi "^4.0.0"
through "^2.3.6"
is-fullwidth-code-point@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
is-my-ip-valid@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
integrity sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==
is-my-json-valid@^2.16.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.19.0.tgz#8fd6e40363cd06b963fa877d444bfb5eddc62175"
integrity sha512-mG0f/unGX1HZ5ep4uhRaPOS8EkAY8/j6mDRMJrutq4CqhoJWYp7qAlonIPy3TV7p3ju4TK9fo/PbnoksWmsp5Q==
dependencies:
generate-function "^2.0.0"
generate-object-property "^1.1.0"
is-my-ip-valid "^1.0.0"
jsonpointer "^4.0.0"
xtend "^4.0.0"
is-promise@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
is-property@^1.0.0, is-property@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
integrity sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=
is-resolvable@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
js-tokens@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
js-yaml@^3.8.4:
version "3.12.1"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.1.tgz#295c8632a18a23e054cf5c9d3cecafe678167600"
integrity sha512-um46hB9wNOKlwkHgiuyEVAybXBjwFUV0Z/RaHJblRd9DXltue9FTYvzCr9ErQrK9Adz5MU4gHWVaNUfdmrC8qA==
dependencies:
argparse "^1.0.7"
esprima "^4.0.0"
json-schema-traverse@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
json-stable-stringify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
dependencies:
jsonify "~0.0.0"
jsonify@~0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
jsonpointer@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
integrity sha1-T9kss04OnbPInIYi7PUfm5eMbLk=
levn@^0.3.0, levn@~0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
dependencies:
prelude-ls "~1.1.2"
type-check "~0.3.2"
lodash@^4.17.4, lodash@^4.3.0:
version "4.17.11"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
mimic-fn@^1.0.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
minimatch@^3.0.2, minimatch@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
dependencies:
brace-expansion "^1.1.7"
minimist@0.0.8:
version "0.0.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
mkdirp@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
dependencies:
minimist "0.0.8"
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
natural-compare@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
object-assign@^4.0.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
once@^1.3.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
dependencies:
wrappy "1"
onetime@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
dependencies:
mimic-fn "^1.0.0"
optionator@^0.8.2:
version "0.8.2"
resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
integrity sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=
dependencies:
deep-is "~0.1.3"
fast-levenshtein "~2.0.4"
levn "~0.3.0"
prelude-ls "~1.1.2"
type-check "~0.3.2"
wordwrap "~1.0.0"
os-tmpdir@~1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
path-is-absolute@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
path-is-inside@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
pluralize@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
integrity sha1-WbcIwcAZCi9pLxx2GMRGsFL9F2I=
prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
process-nextick-args@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
progress@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
punycode@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
readable-stream@^2.2.2:
version "2.3.6"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
dependencies:
core-util-is "~1.0.0"
inherits "~2.0.3"
isarray "~1.0.0"
process-nextick-args "~2.0.0"
safe-buffer "~5.1.1"
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
require-uncached@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
integrity sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=
dependencies:
caller-path "^0.1.0"
resolve-from "^1.0.0"
resolve-from@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
integrity sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=
restore-cursor@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
dependencies:
onetime "^2.0.0"
signal-exit "^3.0.2"
rimraf@~2.6.2:
version "2.6.3"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
dependencies:
glob "^7.1.3"
run-async@^2.2.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
integrity sha1-A3GrSuC91yDUFm19/aZP96RFpsA=
dependencies:
is-promise "^2.1.0"
rx-lite-aggregates@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
dependencies:
rx-lite "*"
rx-lite@*, rx-lite@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
"safer-buffer@>= 2.1.2 < 3":
version "2.1.2"
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
slice-ansi@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
integrity sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==
dependencies:
is-fullwidth-code-point "^2.0.0"
sprintf-js@~1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
string-width@^2.1.0, string-width@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
dependencies:
is-fullwidth-code-point "^2.0.0"
strip-ansi "^4.0.0"
string_decoder@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
dependencies:
safe-buffer "~5.1.0"
strip-ansi@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
dependencies:
ansi-regex "^2.0.0"
strip-ansi@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
dependencies:
ansi-regex "^3.0.0"
strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
supports-color@^5.3.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
dependencies:
has-flag "^3.0.0"
table@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
integrity sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==
dependencies:
ajv "^6.0.1"
ajv-keywords "^3.0.0"
chalk "^2.1.0"
lodash "^4.17.4"
slice-ansi "1.0.0"
string-width "^2.1.1"
text-table@~0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
through@^2.3.6:
version "2.3.8"
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
dependencies:
os-tmpdir "~1.0.2"
type-check@~0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
dependencies:
prelude-ls "~1.1.2"
typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
uri-js@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
dependencies:
punycode "^2.1.0"
util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
wordwrap@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
wrappy@1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
write@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
integrity sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=
dependencies:
mkdirp "^0.5.1"
xtend@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=

View File

@@ -9,7 +9,7 @@
},
"scripts": {
"prestart":
"cp ../../build/dist/react.development.js public/ && cp ../../build/dist/react-dom.development.js public/",
"cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",

View File

@@ -90,17 +90,17 @@ export default function describeFibers(rootFiber, workInProgress) {
const workInProgressID = acknowledgeFiber(workInProgress);
let currentIDs = new Set();
function markAsCurent(id) {
function markAsCurrent(id) {
currentIDs.add(id);
const fiber = descriptions[id];
if (fiber.sibling) {
markAsCurent(fiber.sibling);
markAsCurrent(fiber.sibling);
}
if (fiber.child) {
markAsCurent(fiber.child);
markAsCurrent(fiber.child);
}
}
markAsCurent(rootID);
markAsCurrent(rootID);
return {
descriptions,

View File

@@ -16,8 +16,8 @@
If you checked out the source from GitHub make sure to run <code>npm run build</code>.
</p>
</div>
<script src="../../build/dist/react.development.js"></script>
<script src="../../build/dist/react-dom.development.js"></script>
<script src="../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
var dotStyle = {

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%; overflow: hidden">
<head>
<meta charset="utf-8">
<title>Fizz Example</title>
</head>
<body>
<h1>Fizz Example</h1>
<div id="container">
<p>
To install React, follow the instructions on
<a href="https://github.com/facebook/react/">GitHub</a>.
</p>
<p>
If you can see this, React is <strong>not</strong> working right.
If you checked out the source from GitHub make sure to run <code>npm run build</code>.
</p>
</div>
<script src="../../build/dist/react.development.js"></script>
<script src="../../build/dist/react-dom-unstable-fizz.browser.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
let stream = ReactDOMFizzServer.renderToReadableStream(<body>Success</body>);
let response = new Response(stream, {
headers: {'Content-Type': 'text/html'},
});
display(response);
async function display(responseToDisplay) {
let blob = await responseToDisplay.blob();
let url = URL.createObjectURL(blob);
let iframe = document.createElement('iframe');
iframe.src = url;
let container = document.getElementById('container');
container.innerHTML = '';
container.appendChild(iframe);
}
</script>
</body>
</html>

View File

@@ -15,28 +15,18 @@ First, build React and the fixtures:
```
cd react
npm run build
cd fixtures/packaging
node build-all.js
node fixtures/packaging/build-all.js
```
Then run a local server at the root of the repo, e.g.
Then run a local server, e.g.
```
npm i -g pushstate-server
cd ../..
pushstate-server .
npx pushstate-server .
```
(Too complicated? Send a PR to simplify this :-)).
Then open the following URL in your browser:
```
open http://localhost:9000/fixtures/packaging/index.html
```
and open the following URL in your browser: [http://localhost:9000/fixtures/packaging/index.html](http://localhost:9000/fixtures/packaging/index.html)
You should see two things:
* "Hello World" is rendered in each iframe.
* A number of iframes (corresponding to various builds), with "Hello World" rendered in each iframe.
* No errors in the console.

View File

@@ -1,7 +1,7 @@
<html>
<body>
<script src="../../../build/dist/react.development.js"></script>
<script src="../../../build/dist/react-dom.development.js"></script>
<script src="../../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<div id="container"></div>
<script type="text/babel">

View File

@@ -1,7 +1,7 @@
<html>
<body>
<script src="../../../build/dist/react.development.js"></script>
<script src="../../../build/dist/react-dom.development.js"></script>
<script src="../../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
<div id="container"></div>
<script>
ReactDOM.render(

View File

@@ -1,7 +1,7 @@
<html>
<body>
<script src="../../../build/dist/react.production.min.js"></script>
<script src="../../../build/dist/react-dom.production.min.js"></script>
<script src="../../../build/node_modules/react/umd/react.production.min.js"></script>
<script src="../../../build/node_modules/react-dom/umd/react-dom.production.min.js"></script>
<div id="container"></div>
<script>
ReactDOM.render(

View File

@@ -5,8 +5,8 @@
<script>
requirejs.config({
paths: {
react: '../../../build/dist/react.development',
'react-dom': '../../../build/dist/react-dom.development'
react: '../../../build/node_modules/react/umd/react.development',
'react-dom': '../../../build/node_modules/react-dom/umd/react-dom.development'
}
});

View File

@@ -5,8 +5,8 @@
<script>
requirejs.config({
paths: {
react: '../../../build/dist/react.production.min',
'react-dom': '../../../build/dist/react-dom.production.min'
react: '../../../build/node_modules/react/umd/react.production.min',
'react-dom': '../../../build/node_modules/react-dom/umd/react-dom.production.min'
}
});

View File

@@ -4,8 +4,9 @@ module.exports = {
out: 'output.js',
optimize: 'none',
paths: {
react: '../../../../build/dist/react.development',
'react-dom': '../../../../build/dist/react-dom.development',
react: '../../../../build/node_modules/react/umd/react.development',
'react-dom':
'../../../../build/node_modules/react-dom/umd/react-dom.development',
schedule: '../../../../build/dist/schedule.development',
},
};

View File

@@ -4,8 +4,9 @@ module.exports = {
out: 'output.js',
optimize: 'none',
paths: {
react: '../../../../build/dist/react.production.min',
'react-dom': '../../../../build/dist/react-dom.production.min',
react: '../../../../build/node_modules/react/umd/react.production.min',
'react-dom':
'../../../../build/node_modules/react-dom/umd/react-dom.production.min',
schedule: '../../../../build/dist/schedule.development',
},
};

View File

@@ -1,7 +1,8 @@
System.config({
paths: {
react: '../../../../build/dist/react.development.js',
'react-dom': '../../../../build/dist/react-dom.development.js',
react: '../../../../build/node_modules/react/umd/react.development.js',
'react-dom':
'../../../../build/node_modules/react-dom/umd/react-dom.development.js',
schedule: '../../../../build/dist/schedule.development',
},
});

View File

@@ -1,7 +1,8 @@
System.config({
paths: {
react: '../../../../build/dist/react.production.min.js',
'react-dom': '../../../../build/dist/react-dom.production.min.js',
react: '../../../../build/node_modules/react/umd/react.production.min.js',
'react-dom':
'../../../../build/node_modules/react-dom/umd/react-dom.production.min.js',
schedule: '../../../../build/dist/schedule.development',
},
});

View File

@@ -5,8 +5,8 @@
<script>
System.config({
paths: {
react: '../../../build/dist/react.development.js',
'react-dom': '../../../build/dist/react-dom.development.js'
react: '../../../build/node_modules/react/umd/react.development.js',
'react-dom': '../../../build/node_modules/react-dom/umd/react-dom.development.js'
}
});

View File

@@ -5,8 +5,8 @@
<script>
System.config({
paths: {
react: '../../../build/dist/react.production.min.js',
'react-dom': '../../../build/dist/react-dom.production.min.js'
react: '../../../build/node_modules/react/umd/react.production.min.js',
'react-dom': '../../../build/node_modules/react-dom/umd/react-dom.production.min.js'
}
});

View File

@@ -1,8 +1,9 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>Schedule Test Page</title>
<head>
<meta charset="utf-8">
<title>Scheduler Test Page</title>
<style>
.correct {
border: solid green 2px;
@@ -11,92 +12,112 @@
border: dashed red 2px;
}
</style>
</head>
<body>
<h1>Schedule Fixture</h1>
<p>
This fixture is for manual testing purposes, and the patterns used in
implementing it should not be used as a model. This is mainly for anyone
working on making changes to the `schedule` module.
</p>
<h2>Tests:</h2>
<ol>
<li>
<button onClick="runTestOne()">Run Test 1</button>
<p>Calls the callback within the frame when not blocked:</p>
<div><b>Expected:</b></div>
<div id="test-1-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
</head>
<body>
<h1>Scheduler Fixture</h1>
<p>
This fixture is for manual testing purposes, and the patterns used in
implementing it should not be used as a model. This is mainly for anyone
working on making changes to the `schedule` module.
</p>
<h2>Tests:</h2>
<ol>
<li>
<button onClick="runTestOne()">Run Test 1</button>
<p>Calls the callback within the frame when not blocked:</p>
<div><b>Expected:</b></div>
<div id="test-1-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-1"></div>
</li>
<li>
<p>Accepts multiple callbacks and calls within frame when not blocked</p>
<button onClick="runTestTwo()">Run Test 2</button>
<div><b>Expected:</b></div>
<div id="test-2-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
</li>
<li>
<p>Accepts multiple callbacks and calls within frame when not blocked</p>
<button onClick="runTestTwo()">Run Test 2</button>
<div><b>Expected:</b></div>
<div id="test-2-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-2"></div>
</li>
<li>
<p>Schedules callbacks in correct order when they use scheduleWork to schedule themselves</p>
<button onClick="runTestThree()">Run Test 3</button>
<div><b>Expected:</b></div>
<div id="test-3-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
</li>
<li>
<p>Schedules callbacks in correct order when they use scheduleCallback to schedule themselves</p>
<button onClick="runTestThree()">Run Test 3</button>
<div><b>Expected:</b></div>
<div id="test-3-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-3"></div>
</li>
<li>
<p>Calls timed out callbacks and then any more pending callbacks, defers others if time runs out</p>
<button onClick="runTestFour()">Run Test 4</button>
<div><b>Expected:</b></div>
<div id="test-4-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
</li>
<li>
<p>Calls timed out callbacks and then any more pending callbacks, defers others if time runs out</p>
<button onClick="runTestFour()">Run Test 4</button>
<div><b>Expected:</b></div>
<div id="test-4-expected">
</div>
<div> -------------------------------------------------</div>
<div> If you see the same above and below it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-4"></div>
</li>
<li>
<p>When some callbacks throw errors, still calls them all within the same frame</p>
<p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
<button onClick="runTestFive()">Run Test 5</button>
</li>
<li>
<p>When some callbacks throw errors <b> and some also time out</b>, still calls them all within the same frame</p>
<p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
<button onClick="runTestSix()">Run Test 6</button>
</li>
<li>
<p>Continues calling callbacks even when user switches away from this tab</p>
<button onClick="runTestSeven()">Run Test 7</button>
<div><b>Click the button above, observe the counter, then switch to
another tab and switch back:</b></div>
<div id="test-7">
</div>
<div> If the counter advanced while you were away from this tab, it's correct.</div>
</li>
</ol>
<script src="../../build/dist/schedule.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
</li>
<li>
<p>When some callbacks throw errors, still calls them all within the same frame</p>
<p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
<button onClick="runTestFive()">Run Test 5</button>
</li>
<li>
<p>When some callbacks throw errors <b> and some also time out</b>, still calls them all within the same frame</p>
<p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
<button onClick="runTestSix()">Run Test 6</button>
</li>
<li>
<p>Continues calling callbacks even when user switches away from this tab</p>
<button onClick="runTestSeven()">Run Test 7</button>
<div><b>Click the button above, observe the counter, then switch to
another tab and switch back:</b></div>
<div id="test-7">
</div>
<div> If the counter advanced while you were away from this tab, it's correct.</div>
</li>
<li>
<p>Can pause execution, dump scheduled callbacks, and continue where it left off</p>
<button onClick="runTestEight()">Run Test 8</button>
<div><b>Click the button above, press "continue" to finish the test after it pauses:</b></div>
<button onClick="continueTestEight()">continue</button>
<div><b>Expected:</b></div>
<div id="test-8-expected">
</div>
<div> -------------------------------------------------</div>
<div> If the test didn't progress until you hit "continue" and </div>
<div> you see the same above and below afterwards it's correct.
<div> -------------------------------------------------</div>
<div><b>Actual:</b></div>
<div id="test-8"></div>
</li>
</ol>
<script src="../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../build/node_modules/scheduler/umd/scheduler.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
const {
unstable_scheduleWork: scheduleWork,
unstable_cancelWork: cancelWork,
unstable_now: now
} = Schedule;
unstable_scheduleCallback: scheduleCallback,
unstable_cancelCallback: cancelCallback,
unstable_now: now,
unstable_getFirstCallbackNode: getFirstCallbackNode,
unstable_pauseExecution: pauseExecution,
unstable_continueExecution: continueExecution,
} = Scheduler;
function displayTestResult(testNumber) {
const expectationNode = document.getElementById('test-' + testNumber + '-expected');
const resultNode = document.getElementById('test-' + testNumber);
@@ -212,6 +233,16 @@ const expectedResults = [
[
// ... TODO
],
[],
[],
// Test 8
[
'Queue size: 0.',
'Pausing... press continue to resume.',
'Queue size: 2.',
'Finishing...',
'Done!',
],
];
function runTestOne() {
// Test 1
@@ -222,7 +253,7 @@ function runTestOne() {
const cb1 = (x) => {
updateTestResult(1, 'cb1 called with argument of ' + JSON.stringify(x));
}
scheduleWork(cb1);
scheduleCallback(cb1);
updateTestResult(1, 'scheduled Cb1');
logWhenFramesStart(1, () => {
displayTestResult(1);
@@ -240,9 +271,9 @@ function runTestTwo() {
const cbB = (x) => {
updateTestResult(2, 'cbB called with argument of ' + JSON.stringify(x));
}
scheduleWork(cbA);
scheduleCallback(cbA);
updateTestResult(2, 'scheduled CbA');
scheduleWork(cbB);
scheduleCallback(cbB);
updateTestResult(2, 'scheduled CbB');
logWhenFramesStart(2, () => {
displayTestResult(2);
@@ -252,12 +283,12 @@ function runTestTwo() {
function runTestThree() {
// Test 3
// Schedules callbacks in correct order when they use scheduleWork to schedule themselves
// Schedules callbacks in correct order when they use scheduleCallback to schedule themselves
clearTestResult(3);
let callbackAIterations = 0;
const cbA = (x) => {
if (callbackAIterations < 1) {
scheduleWork(cbA);
scheduleCallback(cbA);
updateTestResult(3, 'scheduled CbA again');
}
updateTestResult(3, 'cbA' + callbackAIterations + ' called with argument of ' + JSON.stringify(x));
@@ -266,9 +297,9 @@ function runTestThree() {
const cbB = (x) => {
updateTestResult(3, 'cbB called with argument of ' + JSON.stringify(x));
}
scheduleWork(cbA);
scheduleCallback(cbA);
updateTestResult(3, 'scheduled CbA');
scheduleWork(cbB);
scheduleCallback(cbB);
updateTestResult(3, 'scheduled CbB');
logWhenFramesStart(3, () => {
displayTestResult(3);
@@ -302,13 +333,13 @@ function runTestFour() {
const cbD = (x) => {
updateTestResult(4, 'cbD called with argument of ' + JSON.stringify(x));
}
scheduleWork(cbA); // won't time out
scheduleCallback(cbA); // won't time out
updateTestResult(4, 'scheduled cbA');
scheduleWork(cbB, {timeout: 100}); // times out later
scheduleCallback(cbB, {timeout: 100}); // times out later
updateTestResult(4, 'scheduled cbB');
scheduleWork(cbC, {timeout: 1}); // will time out fast
scheduleCallback(cbC, {timeout: 1}); // will time out fast
updateTestResult(4, 'scheduled cbC');
scheduleWork(cbD); // won't time out
scheduleCallback(cbD); // won't time out
updateTestResult(4, 'scheduled cbD');
// should have run in order of C, A, B, D
@@ -387,15 +418,15 @@ function runTestFive() {
});
});
});
scheduleWork(cbA);
scheduleCallback(cbA);
console.log('scheduled cbA');
scheduleWork(cbB); // will throw error
scheduleCallback(cbB); // will throw error
console.log('scheduled cbB');
scheduleWork(cbC);
scheduleCallback(cbC);
console.log('scheduled cbC');
scheduleWork(cbD); // will throw error
scheduleCallback(cbD); // will throw error
console.log('scheduled cbD');
scheduleWork(cbE);
scheduleCallback(cbE);
console.log('scheduled cbE');
};
}
@@ -465,15 +496,15 @@ function runTestSix() {
});
});
});
scheduleWork(cbA);
scheduleCallback(cbA);
console.log('scheduled cbA');
scheduleWork(cbB); // will throw error
scheduleCallback(cbB); // will throw error
console.log('scheduled cbB');
scheduleWork(cbC, {timeout: 1});
scheduleCallback(cbC, {timeout: 1});
console.log('scheduled cbC');
scheduleWork(cbD, {timeout: 1}); // will throw error
scheduleCallback(cbD, {timeout: 1}); // will throw error
console.log('scheduled cbD');
scheduleWork(cbE, {timeout: 1});
scheduleCallback(cbE, {timeout: 1});
console.log('scheduled cbE');
};
}
@@ -489,10 +520,55 @@ function runTestSeven() {
counter++;
counterNode.innerHTML = counter;
waitForTimeToPass(100);
scheduleWork(incrementCounterAndScheduleNextCallback);
scheduleCallback(incrementCounterAndScheduleNextCallback);
}
scheduleWork(incrementCounterAndScheduleNextCallback);
scheduleCallback(incrementCounterAndScheduleNextCallback);
}
function runTestEight() {
// Test 8
// Pauses execution, dumps the queue, and continues execution
clearTestResult(8);
function countNodesInStack(firstCallbackNode) {
var node = firstCallbackNode;
var count = 0;
if (node !== null) {
do {
count = count + 1;
node = node.next;
} while (node !== firstCallbackNode);
}
return count;
}
scheduleCallback(() => {
// size should be 0
updateTestResult(8, `Queue size: ${countNodesInStack(getFirstCallbackNode())}.`);
updateTestResult(8, 'Pausing... press continue to resume.');
pauseExecution();
scheduleCallback(function () {
updateTestResult(8, 'Finishing...');
displayTestResult(8);
})
scheduleCallback(function () {
updateTestResult(8, 'Done!');
displayTestResult(8);
checkTestResult(8);
})
// new size should be 2 now
updateTestResult(8, `Queue size: ${countNodesInStack(getFirstCallbackNode())}.`);
displayTestResult(8);
});
}
function continueTestEight() {
continueExecution();
}
</script type="text/babel">
</body>
</html>
</html>

View File

@@ -46,7 +46,7 @@
</p>
<h3>
Tests
<button onClick="runAllTests()">Run all tests</button>
<button id="run-test-button" onClick="runAllTests()">Run all tests</button>
</h3>
<ol>
<li id="checkSchedulerAPI" data-value="...">
@@ -62,9 +62,20 @@
<strong>Test end-to-end integration</strong>
</li>
</ol>
<script>
if (window.location.search.includes('puppeteer=true')) {
// Colocated calls to performance.now() often yield different values in Puppeteer.
// This causes the Scheduler API test to fail.
// For the purposes of our automated release scripts,
// Coerce tests to use Date.now() instead to reduce the chances of a false positive.
window.performance = {now: Date.now};
}
</script>
<!-- Load the tracing API before react to test that it's lazily evaluated -->
<script src="../../build/node_modules/schedule/umd/schedule.development.js"></script>
<script src="../../build/node_modules/schedule/umd/schedule-tracing.development.js"></script>
<script src="../../build/node_modules/scheduler/umd/scheduler.development.js"></script>
<script src="../../build/node_modules/scheduler/umd/scheduler-tracing.development.js"></script>
<script src="../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="./script.js"></script>

View File

@@ -28,15 +28,15 @@ function runAllTests() {
function checkSchedulerAPI() {
runTest(document.getElementById('checkSchedulerAPI'), () => {
if (
typeof Schedule === 'undefined' ||
typeof Schedule.unstable_now !== 'function' ||
typeof Schedule.unstable_scheduleWork !== 'function' ||
typeof Schedule.unstable_cancelScheduledWork !== 'function'
typeof Scheduler === 'undefined' ||
typeof Scheduler.unstable_now !== 'function' ||
typeof Scheduler.unstable_scheduleCallback !== 'function' ||
typeof Scheduler.unstable_cancelCallback !== 'function'
) {
throw 'API is not defined';
}
if (Schedule.unstable_now() !== performance.now()) {
if (Scheduler.unstable_now() !== performance.now()) {
throw 'API does not work';
}
@@ -47,20 +47,20 @@ function checkSchedulerAPI() {
function checkSchedulerTracingAPI() {
runTest(document.getElementById('checkSchedulerTracingAPI'), () => {
if (
typeof ScheduleTracing === 'undefined' ||
typeof ScheduleTracing.unstable_clear !== 'function' ||
typeof ScheduleTracing.unstable_getCurrent !== 'function' ||
typeof ScheduleTracing.unstable_getThreadID !== 'function' ||
typeof ScheduleTracing.unstable_trace !== 'function' ||
typeof ScheduleTracing.unstable_wrap !== 'function'
typeof SchedulerTracing === 'undefined' ||
typeof SchedulerTracing.unstable_clear !== 'function' ||
typeof SchedulerTracing.unstable_getCurrent !== 'function' ||
typeof SchedulerTracing.unstable_getThreadID !== 'function' ||
typeof SchedulerTracing.unstable_trace !== 'function' ||
typeof SchedulerTracing.unstable_wrap !== 'function'
) {
throw 'API is not defined';
}
try {
let interactionsSet;
ScheduleTracing.unstable_trace('test', 123, () => {
interactionsSet = ScheduleTracing.unstable_getCurrent();
SchedulerTracing.unstable_trace('test', 123, () => {
interactionsSet = SchedulerTracing.unstable_getCurrent();
});
if (interactionsSet.size !== 1) {
throw null;
@@ -74,10 +74,10 @@ function checkSchedulerTracingAPI() {
}
const ForwardedSchedulerTracing =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ScheduleTracing;
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing;
if (
ScheduleTracing.unstable_getThreadID() ===
SchedulerTracing.unstable_getThreadID() ===
ForwardedSchedulerTracing.unstable_getThreadID()
) {
throw 'API forwarding is broken';
@@ -90,9 +90,9 @@ function checkSchedulerTracingSubscriptionsAPI() {
document.getElementById('checkSchedulerTracingSubscriptionsAPI'),
() => {
if (
typeof ScheduleTracing === 'undefined' ||
typeof ScheduleTracing.unstable_subscribe !== 'function' ||
typeof ScheduleTracing.unstable_unsubscribe !== 'function'
typeof SchedulerTracing === 'undefined' ||
typeof SchedulerTracing.unstable_subscribe !== 'function' ||
typeof SchedulerTracing.unstable_unsubscribe !== 'function'
) {
throw 'API is not defined';
}
@@ -114,9 +114,9 @@ function checkSchedulerTracingSubscriptionsAPI() {
};
try {
ScheduleTracing.unstable_subscribe(subscriber);
ScheduleTracing.unstable_trace('foo', 123, () => {});
ScheduleTracing.unstable_unsubscribe(subscriber);
SchedulerTracing.unstable_subscribe(subscriber);
SchedulerTracing.unstable_trace('foo', 123, () => {});
SchedulerTracing.unstable_unsubscribe(subscriber);
if (onInteractionTracedCalls.length !== 1) {
throw null;
}
@@ -124,7 +124,7 @@ function checkSchedulerTracingSubscriptionsAPI() {
if (interaction.name !== 'foo' || interaction.timestamp !== 123) {
throw null;
}
ScheduleTracing.unstable_trace('bar', 456, () => {});
SchedulerTracing.unstable_trace('bar', 456, () => {});
if (onInteractionTracedCalls.length !== 1) {
throw null;
}
@@ -134,13 +134,13 @@ function checkSchedulerTracingSubscriptionsAPI() {
const ForwardedSchedulerTracing =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
.ScheduleTracing;
.SchedulerTracing;
try {
ForwardedSchedulerTracing.unstable_subscribe(subscriber);
ScheduleTracing.unstable_trace('foo', 123, () => {});
SchedulerTracing.unstable_trace('foo', 123, () => {});
ForwardedSchedulerTracing.unstable_trace('bar', 456, () => {});
ScheduleTracing.unstable_unsubscribe(subscriber);
SchedulerTracing.unstable_unsubscribe(subscriber);
if (onInteractionTracedCalls.length !== 3) {
throw null;
}
@@ -172,7 +172,7 @@ function checkEndToEndIntegration() {
const onRender = (...args) => onRenderCalls.push(args);
const container = document.createElement('div');
ScheduleTracing.unstable_trace('render', 123, () => {
SchedulerTracing.unstable_trace('render', 123, () => {
ReactDOM.render(
React.createElement(
React.unstable_Profiler,

View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>Test tracing UMD</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- Load the tracing API before react to test that it's lazily evaluated -->
<script src="../../build/node_modules/scheduler/umd/scheduler.development.js"></script>
<script src="../../build/node_modules/scheduler/umd/scheduler-tracing.development.js"></script>
<script src="../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="./test.js"></script>
</body>
</html>

103
fixtures/tracing/test.js Normal file
View File

@@ -0,0 +1,103 @@
const {createElement, Component, Placeholder} = React;
const {unstable_createRoot: createRoot} = ReactDOM;
const {
unstable_subscribe: subscribe,
unstable_trace: trace,
unstable_wrap: wrap,
} = SchedulerTracing;
const createLogger = (backgroundColor, color, enabled) => (
message,
...args
) => {
if (enabled === false) return;
console.groupCollapsed(
`%c${message}`,
`background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
...args
);
console.log(
new Error('stack').stack
.split('\n')
.slice(2)
.join('\n')
);
console.groupEnd();
};
window.log = {
app: createLogger('#37474f', '#fff'),
interaction: createLogger('#6a1b9a', '#fff'),
react: createLogger('#ff5722', '#fff'),
tracing: createLogger('#2962ff', '#fff'),
work: createLogger('#e1bee7', '#000'),
};
// Fake suspense
const resolvedValues = {};
const read = key => {
if (!resolvedValues[key]) {
log.app(`Suspending for "${key}" ...`);
throw new Promise(
wrap(resolve => {
setTimeout(
wrap(() => {
log.app(`Loaded "${key}" ...`);
resolvedValues[key] = true;
resolve(key);
}),
1000
);
})
);
}
return key;
};
const TestApp = () =>
createElement(
Placeholder,
{delayMs: 100, fallback: createElement(PlaceholderText)},
createElement(SuspendingChild, {text: 'foo'}),
createElement(SuspendingChild, {text: 'bar'}),
createElement(SuspendingChild, {text: 'baz'})
);
const PlaceholderText = () => 'Loading ...';
const SuspendingChild = ({text}) => {
const resolvedValue = read(text);
return resolvedValue;
};
subscribe({
onInteractionScheduledWorkCompleted: interaction =>
log.interaction(
'onInteractionScheduledWorkCompleted',
JSON.stringify(interaction)
),
onInteractionTraced: interaction =>
log.interaction('onInteractionTraced', JSON.stringify(interaction)),
onWorkCanceled: interactions =>
log.work('onWorkCanceled', JSON.stringify(Array.from(interactions))),
onWorkScheduled: interactions =>
log.work('onWorkScheduled', JSON.stringify(Array.from(interactions))),
onWorkStarted: interactions =>
log.work('onWorkStarted', JSON.stringify(Array.from(interactions))),
onWorkStopped: interactions =>
log.work('onWorkStopped', JSON.stringify(Array.from(interactions))),
});
const element = document.getElementById('root');
trace('initial_render', performance.now(), () => {
const root = createRoot(element);
const batch = root.createBatch();
log.app('batch.render()');
batch.render(createElement(TestApp));
batch.then(
wrap(() => {
log.app('batch.commit()');
batch.commit();
})
);
});

View File

@@ -14,19 +14,13 @@ No. The APIs being tested here are unstable and some of them have still not been
Clone the React repository.
First, open this file locally:
* `packages/shared/ReactFeatureFlags.js` (make sure you didn't open a similarly named file!)
Set [the `enableSuspense` flag](https://github.com/facebook/react/blob/d79238f1eeb6634ba7a3df23c3b2709b56cbb8b2/packages/shared/ReactFeatureFlags.js#L19) to `true` and save the file.
**After you've done that,** follow these steps:
Follow these steps:
```shell
# 1: Build react from source
cd /path/to/react
yarn
yarn build dom-client,core,simple-cache-provider,schedule --type=NODE
yarn build react-dom/index,react/index,react-cache,scheduler --type=NODE
# 2: Install fixture dependencies
cd fixtures/unstable-async/suspense/

View File

@@ -1,7 +0,0 @@
import {createCache} from 'simple-cache-provider';
export let cache;
function initCache() {
cache = createCache(initCache);
}
initCache();

View File

@@ -1,17 +1,13 @@
import React, {Placeholder, PureComponent} from 'react';
import {unstable_scheduleWork} from 'schedule';
import {unstable_trace as trace, unstable_wrap as wrap} from 'schedule/tracing';
import {createResource} from 'simple-cache-provider';
import {cache} from '../cache';
import React, {lazy, Suspense, PureComponent} from 'react';
import {unstable_scheduleCallback} from 'scheduler';
import {
unstable_trace as trace,
unstable_wrap as wrap,
} from 'scheduler/tracing';
import Spinner from './Spinner';
import ContributorListPage from './ContributorListPage';
const UserPageResource = createResource(() => import('./UserPage'));
function UserPageLoader(props) {
const UserPage = UserPageResource.read(cache).default;
return <UserPage {...props} />;
}
const UserPage = lazy(() => import('./UserPage'));
export default class App extends PureComponent {
state = {
@@ -35,7 +31,7 @@ export default class App extends PureComponent {
currentId: id,
})
);
unstable_scheduleWork(
unstable_scheduleCallback(
wrap(() =>
trace(`View ${id} (low-pri)`, performance.now(), () =>
this.setState({
@@ -73,21 +69,21 @@ export default class App extends PureComponent {
}}>
Return to list
</button>
<Placeholder delayMs={2000} fallback={<Spinner size="large" />}>
<UserPageLoader id={id} />
</Placeholder>
<Suspense maxDuration={2000} fallback={<Spinner size="large" />}>
<UserPage id={id} />
</Suspense>
</div>
);
}
renderList(loadingId) {
return (
<Placeholder delayMs={1500} fallback={<Spinner size="large" />}>
<Suspense maxDuration={1500} fallback={<Spinner size="large" />}>
<ContributorListPage
loadingId={loadingId}
onUserClick={this.handleUserClick}
/>
</Placeholder>
</Suspense>
);
}
}

View File

@@ -1,10 +1,11 @@
import React, {Fragment} from 'react';
import {createResource} from 'simple-cache-provider';
import {cache} from '../cache';
import {unstable_createResource} from 'react-cache';
import Spinner from './Spinner';
import {fetchCoreContributorListJSON} from '../api';
const ContributorListResource = createResource(fetchCoreContributorListJSON);
const ContributorListResource = unstable_createResource(
fetchCoreContributorListJSON
);
const ContributorListPage = ({loadingId, onUserClick}) => (
<Fragment>
@@ -17,7 +18,7 @@ const ContributorListPage = ({loadingId, onUserClick}) => (
padding: 0,
margin: 0,
}}>
{ContributorListResource.read(cache).map(user => (
{ContributorListResource.read().map(user => (
<ContributorListItem
key={user.id}
onClick={() => onUserClick(user.id)}

View File

@@ -1,7 +1,6 @@
import React, {Placeholder} from 'react';
import {createResource} from 'simple-cache-provider';
import React, {Suspense} from 'react';
import {unstable_createResource} from 'react-cache';
import Spinner from './Spinner';
import {cache} from '../cache';
import {fetchUserProfileJSON, fetchUserRepositoriesListJSON} from '../api';
export default function UserPage({id}) {
@@ -14,17 +13,17 @@ export default function UserPage({id}) {
alignItems: 'start',
}}>
<UserDetails id={id} />
<Placeholder delayMs={1000} fallback={<Spinner size="medium" />}>
<Suspense maxDuration={1000} fallback={<Spinner size="medium" />}>
<Repositories id={id} />
</Placeholder>
</Suspense>
</div>
);
}
const UserDetailsResource = createResource(fetchUserProfileJSON);
const UserDetailsResource = unstable_createResource(fetchUserProfileJSON);
function UserDetails({id}) {
const user = UserDetailsResource.read(cache, id);
const user = UserDetailsResource.read(id);
return (
<div
style={{
@@ -103,7 +102,7 @@ const Email = ({email}) => (
</div>
);
const ImageResource = createResource(
const ImageResource = unstable_createResource(
src =>
new Promise(resolve => {
const img = new Image();
@@ -113,12 +112,12 @@ const ImageResource = createResource(
);
function Img({src, alt, ...rest}) {
return <img src={ImageResource.read(cache, src)} alt={alt} {...rest} />;
return <img src={ImageResource.read(src)} alt={alt} {...rest} />;
}
function UserPicture({source}) {
return (
<Placeholder delayMs={1500} fallback={<img src={source} alt="poster" />}>
<Suspense maxDuration={1500} fallback={<img src={source} alt="poster" />}>
<Img
src={source}
alt="profile picture"
@@ -128,14 +127,16 @@ function UserPicture({source}) {
borderRadius: '0.5rem',
}}
/>
</Placeholder>
</Suspense>
);
}
const UserRepositoriesResource = createResource(fetchUserRepositoriesListJSON);
const UserRepositoriesResource = unstable_createResource(
fetchUserRepositoriesListJSON
);
function Repositories({id}) {
const repos = UserRepositoriesResource.read(cache, id);
const repos = UserRepositoriesResource.read(id);
return (
<ul
style={{

View File

@@ -1,7 +1,6 @@
import React, {Fragment, PureComponent} from 'react';
import {unstable_createRoot, render} from 'react-dom';
import {unstable_trace as trace} from 'schedule/tracing';
import {cache} from './cache';
import {unstable_trace as trace} from 'scheduler/tracing';
import {
setFakeRequestTime,
setPaused,
@@ -65,8 +64,9 @@ class Debugger extends PureComponent {
}
handleReset = () => {
trace('Clear cache', () => {
cache.invalidate();
trace('Clear cache', performance.now(), () => {
// TODO: this is not implemented.
// cache.invalidate();
this.setState(state => ({
requests: {},
}));

View File

@@ -18,7 +18,7 @@ There are also known bugs and inefficiencies in master so **don't use this fixtu
# 1: Build react from source
cd /path/to/react
yarn
yarn build dom-client,core,simple-cache-provider,schedule --type=NODE
yarn build react-dom/index,react/index,react-cache,scheduler --type=NODE
# 2: Install fixture dependencies
cd fixtures/unstable-async/time-slicing/

View File

@@ -1,6 +1,6 @@
import React, {PureComponent} from 'react';
import {flushSync, render} from 'react-dom';
import {unstable_scheduleWork} from 'schedule';
import {unstable_scheduleCallback} from 'scheduler';
import _ from 'lodash';
import Charts from './Charts';
import Clock from './Clock';
@@ -67,7 +67,7 @@ class App extends PureComponent {
}
this._ignoreClick = true;
unstable_scheduleWork(() => {
unstable_scheduleCallback(() => {
this.setState({showDemo: true}, () => {
this._ignoreClick = false;
});
@@ -107,7 +107,7 @@ class App extends PureComponent {
this.debouncedHandleChange(value);
break;
case 'async':
unstable_scheduleWork(() => {
unstable_scheduleCallback(() => {
this.setState({value});
});
break;
@@ -124,7 +124,7 @@ class App extends PureComponent {
<div className="rendering">
{this.renderOption('sync', 'Synchronous')}
{this.renderOption('debounced', 'Debounced')}
{this.renderOption('async', 'Asynchronous')}
{this.renderOption('async', 'Concurrent')}
</div>
<input
className={'input ' + this.state.strategy}
@@ -147,8 +147,8 @@ class App extends PureComponent {
const container = document.getElementById('root');
render(
<React.unstable_AsyncMode>
<React.unstable_ConcurrentMode>
<App />
</React.unstable_AsyncMode>,
</React.unstable_ConcurrentMode>,
container
);

View File

@@ -0,0 +1,14 @@
<html>
<body>
<script src="../../build/node_modules/react/umd/react.development.js"></script>
<script src="../../build/node_modules/react-dom/umd/react-dom-unstable-fire.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<div id="container"></div>
<script type="text/babel">
ReactFire.render(
<h1>Hello World!</h1>,
document.getElementById('container')
);
</script>
</body>
</html>

View File

@@ -1,6 +1,6 @@
{
"private": true,
"version": "16.6.0-alpha.0",
"version": "16.6.1",
"workspaces": [
"packages/*"
],
@@ -9,7 +9,7 @@
"babel-cli": "^6.6.5",
"babel-code-frame": "^6.26.0",
"babel-core": "^6.0.0",
"babel-eslint": "^8.0.0",
"babel-eslint": "^10.0.0",
"babel-jest": "^23.0.1",
"babel-plugin-check-es2015-constants": "^6.5.0",
"babel-plugin-external-helpers": "^6.22.0",
@@ -44,6 +44,7 @@
"create-react-class": "^15.6.3",
"cross-env": "^5.1.1",
"danger": "^3.0.4",
"error-stack-parser": "^2.0.2",
"eslint": "^4.1.0",
"eslint-config-fbjs": "^1.1.1",
"eslint-plugin-babel": "^3.3.0",
@@ -57,7 +58,7 @@
"flow-bin": "^0.72.0",
"glob": "^6.0.4",
"glob-stream": "^6.1.0",
"google-closure-compiler": "20180506.0.0",
"google-closure-compiler": "20190106.0.0",
"gzip-size": "^3.0.0",
"jasmine-check": "^1.0.0-rc.0",
"jest": "^23.1.0",
@@ -83,16 +84,17 @@
"targz": "^1.0.1",
"through2": "^2.0.0",
"tmp": "~0.0.28",
"typescript": "~1.8.10"
"typescript": "~1.8.10",
"@mattiasbuelens/web-streams-polyfill": "0.1.0"
},
"devEngines": {
"node": "8.x || 9.x || 10.x"
"node": "8.x || 9.x || 10.x || 11.x"
},
"jest": {
"testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"
},
"scripts": {
"build": "npm run version-check && node ./scripts/rollup/build.js",
"build": "node ./scripts/rollup/build.js",
"linc": "node ./scripts/tasks/linc.js",
"lint": "node ./scripts/tasks/eslint.js",
"lint-build": "node ./scripts/rollup/validate/index.js",

View File

@@ -8,7 +8,7 @@ This utility should be used for subscriptions to a single value that are typical
Other cases have **better long-term solutions**:
* Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
* I/O subscriptions (e.g. notifications) that update infrequently should use [`simple-cache-provider`](https://github.com/facebook/react/blob/master/packages/simple-cache-provider/README.md) instead.
* I/O subscriptions (e.g. notifications) that update infrequently should use [`react-cache`](https://github.com/facebook/react/blob/master/packages/react-cache/README.md) instead.
* Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
## Limitations in async mode
@@ -19,7 +19,7 @@ However, [it achieves correctness by sometimes de-opting to synchronous mode](ht
The effect of de-opting to sync mode is that the main thread may periodically be blocked (in the case of CPU-bound work), and placeholders may appear earlier than desired (in the case of IO-bound work).
For **full compatibility** with asynchronous rendering, including both **time-slicing** and **React Suspense**, the suggested longer term solution is to move to one of the patterns described in the previous section.
For **full compatibility** with asynchronous rendering, including both **time-slicing** and **React Suspense**, the suggested longer-term solution is to move to one of the patterns described in the previous section.
## What types of subscriptions can this support?
@@ -36,7 +36,7 @@ This abstraction can handle a variety of subscription types, including:
yarn add create-subscription
# NPM
npm install create-subscription --save
npm install create-subscription
```
# Usage
@@ -81,7 +81,7 @@ import React from "react";
import { createSubscription } from "create-subscription";
// Start with a simple component.
// In this case, it's a functional component, but it could have been a class.
// In this case, it's a function component, but it could have been a class.
function FollowerComponent({ followersCount }) {
return <div>You have {followersCount} followers!</div>;
}
@@ -164,7 +164,7 @@ function LoadingComponent({ loadingStatus }) {
}
}
// Wrap the functional component with a subscriber HOC.
// Wrap the function component with a subscriber HOC.
// This HOC will manage subscriptions and pass values to the decorated component.
// It will add and remove subscriptions in an async-safe way when props change.
const PromiseSubscription = createSubscription({

View File

@@ -1,16 +1,21 @@
{
"name": "create-subscription",
"description": "utility for subscribing to external data sources inside React components",
"version": "16.6.0-alpha.0",
"repository": "facebook/react",
"version": "16.8.0",
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/create-subscription"
},
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"cjs/"
],
"peerDependencies": {
"react": "^16.3.0 || 16.6.0-alpha.0"
"react": "^16.3.0"
},
"devDependencies": {
"rxjs": "^5.5.6"

View File

@@ -148,7 +148,7 @@ describe('createSubscription', () => {
// Test a promise that resolves before render
// Note that this will require an extra render anyway,
// Because there is no way to syncrhonously get a Promise's value
// Because there is no way to synchronously get a Promise's value
rejectB(false);
ReactNoop.render(<Subscription source={promiseB}>{render}</Subscription>);
expect(ReactNoop.flush()).toEqual(['loading']);
@@ -431,7 +431,7 @@ describe('createSubscription', () => {
'Parent.componentDidUpdate',
]);
// Updates from the new subsribable should be ignored.
// Updates from the new subscribable should be ignored.
observableB.next('b-1');
expect(ReactNoop.flush()).toEqual([]);
expect(log).toEqual([

View File

@@ -0,0 +1,42 @@
# `eslint-plugin-react-hooks`
This ESLint plugin enforces the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html).
It is a part of the [Hooks API](https://reactjs.org/docs/hooks-intro.html) for React.
## Installation
**Note: If you're using Create React App, please wait for a corresponding release of `react-scripts` that includes this rule instead of adding it directly.**
Assuming you already have ESLint installed, run:
```sh
# npm
npm install eslint-plugin-react-hooks --save-dev
# yarn
yarn add eslint-plugin-react-hooks --dev
```
Then add it to your ESLint configuration:
```js
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error"
}
}
```
## Valid and Invalid Examples
Please refer to the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) documentation and the [Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce) to learn more about this rule.
## License
MIT

View File

@@ -0,0 +1,710 @@
/**
* 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.
*/
'use strict';
const ESLintTester = require('eslint').RuleTester;
const ReactHooksESLintPlugin = require('eslint-plugin-react-hooks');
const ReactHooksESLintRule = ReactHooksESLintPlugin.rules['rules-of-hooks'];
ESLintTester.setDefaultConfig({
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
},
});
const eslintTester = new ESLintTester();
eslintTester.run('react-hooks', ReactHooksESLintRule, {
valid: [
`
// Valid because components can use hooks.
function ComponentWithHook() {
useHook();
}
`,
`
// Valid because components can use hooks.
function createComponentWithHook() {
return function ComponentWithHook() {
useHook();
};
}
`,
`
// Valid because hooks can use hooks.
function useHookWithHook() {
useHook();
}
`,
`
// Valid because hooks can use hooks.
function createHook() {
return function useHookWithHook() {
useHook();
}
}
`,
`
// Valid because components can call functions.
function ComponentWithNormalFunction() {
doSomething();
}
`,
`
// Valid because functions can call functions.
function normalFunctionWithNormalFunction() {
doSomething();
}
`,
`
// Valid because functions can call functions.
function normalFunctionWithConditionalFunction() {
if (cond) {
doSomething();
}
}
`,
`
// Valid because functions can call functions.
function functionThatStartsWithUseButIsntAHook() {
if (cond) {
userFetch();
}
}
`,
`
// Valid although unconditional return doesn't make sense and would fail other rules.
// We could make it invalid but it doesn't matter.
function useUnreachable() {
return;
useHook();
}
`,
`
// Valid because hooks can call hooks.
function useHook() { useState(); }
const whatever = function useHook() { useState(); };
const useHook1 = () => { useState(); };
let useHook2 = () => useState();
useHook2 = () => { useState(); };
({useHook: () => { useState(); }});
({useHook() { useState(); }});
const {useHook = () => { useState(); }} = {};
({useHook = () => { useState(); }} = {});
`,
`
// Valid because hooks can call hooks.
function useHook() {
useHook1();
useHook2();
}
`,
`
// Valid because hooks can call hooks.
function createHook() {
return function useHook() {
useHook1();
useHook2();
};
}
`,
`
// Valid because hooks can call hooks.
function useHook() {
useState() && a;
}
`,
`
// Valid because hooks can call hooks.
function useHook() {
return useHook1() + useHook2();
}
`,
`
// Valid because hooks can call hooks.
function useHook() {
return useHook1(useHook2());
}
`,
`
// Valid because classes can call functions.
// We don't consider these to be hooks.
class C {
m() {
this.useHook();
super.useHook();
}
}
`,
`
// Currently valid.
// We *could* make this invalid if we want, but it creates false positives
// (see the FooStore case).
class C {
m() {
This.useHook();
Super.useHook();
}
}
`,
`
// Valid although we *could* consider these invalid.
// But it doesn't bring much benefit since it's an immediate runtime error anyway.
// So might as well allow it.
Hook.use();
Hook._use();
Hook.useState();
Hook._useState();
Hook.use42();
Hook.useHook();
Hook.use_hook();
`,
`
// Valid -- this is a regression test.
jest.useFakeTimers();
beforeEach(() => {
jest.useRealTimers();
})
`,
`
// Valid because that's a false positive we've seen quite a bit.
// This is a regression test.
class Foo extends Component {
render() {
if (cond) {
FooStore.useFeatureFlag();
}
}
}
`,
`
// Currently valid because we found this to be a common pattern
// for feature flag checks in existing components.
// We *could* make it invalid but that produces quite a few false positives.
// Why does it make sense to ignore it? Firstly, because using
// hooks in a class would cause a runtime error anyway.
// But why don't we care about the same kind of false positive in a functional
// component? Because even if it was a false positive, it would be confusing
// anyway. So it might make sense to rename a feature flag check in that case.
class ClassComponentWithFeatureFlag extends React.Component {
render() {
if (foo) {
useFeatureFlag();
}
}
}
`,
`
// Currently valid because we don't check for hooks in classes.
// See ClassComponentWithFeatureFlag for rationale.
// We *could* make it invalid if we don't regress that false positive.
class ClassComponentWithHook extends React.Component {
render() {
React.useState();
}
}
`,
`
// Currently valid.
// These are variations capturing the current heuristic--
// we only allow hooks in PascalCase, useFoo functions,
// or classes (due to common false positives and because they error anyway).
// We *could* make some of these invalid.
// They probably don't matter much.
(class {useHook = () => { useState(); }});
(class {useHook() { useState(); }});
(class {h = () => { useState(); }});
(class {i() { useState(); }});
`,
`
// Currently valid although we *could* consider these invalid.
// It doesn't make a lot of difference because it would crash early.
use();
_use();
useState();
_useState();
use42();
useHook();
use_hook();
React.useState();
`,
`
// Regression test for the popular "history" library
const {createHistory, useBasename} = require('history-2.1.2');
const browserHistory = useBasename(createHistory)({
basename: '/',
});
`,
`
// Regression test for some internal code.
// This shows how the "callback rule" is more relaxed,
// and doesn't kick in unless we're confident we're in
// a component or a hook.
function makeListener(instance) {
each(pixelsWithInferredEvents, pixel => {
if (useExtendedSelector(pixel.id) && extendedButton) {
foo();
}
});
}
`,
`
// Regression test for incorrectly flagged valid code.
function RegressionTest() {
const foo = cond ? a : b;
useState();
}
`,
`
// Valid because exceptions abort rendering
function RegressionTest() {
if (page == null) {
throw new Error('oh no!');
}
useState();
}
`,
`
// Valid because the loop doesn't change the order of hooks calls.
function RegressionTest() {
const res = [];
const additionalCond = true;
for (let i = 0; i !== 10 && additionalCond; ++i ) {
res.push(i);
}
React.useLayoutEffect(() => {});
}
`,
`
// Is valid but hard to compute by brute-forcing
function MyComponent() {
// 40 conditions
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
if (c) {} else {}
// 10 hooks
useHook();
useHook();
useHook();
useHook();
useHook();
useHook();
useHook();
useHook();
useHook();
useHook();
}
`,
],
invalid: [
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function ComponentWithConditionalHook() {
if (cond) {
useConditionalHook();
}
}
`,
errors: [conditionalError('useConditionalHook')],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function createComponent() {
return function ComponentWithConditionalHook() {
if (cond) {
useConditionalHook();
}
}
}
`,
errors: [conditionalError('useConditionalHook')],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHookWithConditionalHook() {
if (cond) {
useConditionalHook();
}
}
`,
errors: [conditionalError('useConditionalHook')],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function createHook() {
return function useHookWithConditionalHook() {
if (cond) {
useConditionalHook();
}
}
}
`,
errors: [conditionalError('useConditionalHook')],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function ComponentWithTernaryHook() {
cond ? useTernaryHook() : null;
}
`,
errors: [conditionalError('useTernaryHook')],
},
{
code: `
// Invalid because it's a common misunderstanding.
// We *could* make it valid but the runtime error could be confusing.
function ComponentWithHookInsideCallback() {
useEffect(() => {
useHookInsideCallback();
});
}
`,
errors: [genericError('useHookInsideCallback')],
},
{
code: `
// Invalid because it's a common misunderstanding.
// We *could* make it valid but the runtime error could be confusing.
function createComponent() {
return function ComponentWithHookInsideCallback() {
useEffect(() => {
useHookInsideCallback();
});
}
}
`,
errors: [genericError('useHookInsideCallback')],
},
{
code: `
// Invalid because it's a common misunderstanding.
// We *could* make it valid but the runtime error could be confusing.
function ComponentWithHookInsideCallback() {
function handleClick() {
useState();
}
}
`,
errors: [functionError('useState', 'handleClick')],
},
{
code: `
// Invalid because it's a common misunderstanding.
// We *could* make it valid but the runtime error could be confusing.
function createComponent() {
return function ComponentWithHookInsideCallback() {
function handleClick() {
useState();
}
}
}
`,
errors: [functionError('useState', 'handleClick')],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function ComponentWithHookInsideLoop() {
while (cond) {
useHookInsideLoop();
}
}
`,
errors: [loopError('useHookInsideLoop')],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function renderItem() {
useState();
}
function List(props) {
return props.items.map(renderItem);
}
`,
errors: [functionError('useState', 'renderItem')],
},
{
code: `
// Currently invalid because it violates the convention and removes the "taint"
// from a hook. We *could* make it valid to avoid some false positives but let's
// ensure that we don't break the "renderItem" and "normalFunctionWithConditionalHook"
// cases which must remain invalid.
function normalFunctionWithHook() {
useHookInsideNormalFunction();
}
`,
errors: [
functionError('useHookInsideNormalFunction', 'normalFunctionWithHook'),
],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function normalFunctionWithConditionalHook() {
if (cond) {
useHookInsideNormalFunction();
}
}
`,
errors: [
functionError(
'useHookInsideNormalFunction',
'normalFunctionWithConditionalHook'
),
],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHookInLoops() {
while (a) {
useHook1();
if (b) return;
useHook2();
}
while (c) {
useHook3();
if (d) return;
useHook4();
}
}
`,
errors: [
loopError('useHook1'),
loopError('useHook2'),
loopError('useHook3'),
loopError('useHook4'),
],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHookInLoops() {
while (a) {
useHook1();
if (b) continue;
useHook2();
}
}
`,
errors: [
loopError('useHook1'),
// NOTE: Small imprecision in error reporting due to caching means we
// have a conditional error here instead of a loop error. However,
// we will always get an error so this is acceptable.
conditionalError('useHook2', true),
],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useLabeledBlock() {
label: {
if (a) break label;
useHook();
}
}
`,
errors: [conditionalError('useHook')],
},
{
code: `
// Currently invalid.
// These are variations capturing the current heuristic--
// we only allow hooks in PascalCase or useFoo functions.
// We *could* make some of these valid. But before doing it,
// consider specific cases documented above that contain reasoning.
function a() { useState(); }
const whatever = function b() { useState(); };
const c = () => { useState(); };
let d = () => useState();
e = () => { useState(); };
({f: () => { useState(); }});
({g() { useState(); }});
const {j = () => { useState(); }} = {};
({k = () => { useState(); }} = {});
`,
errors: [
functionError('useState', 'a'),
functionError('useState', 'b'),
functionError('useState', 'c'),
functionError('useState', 'd'),
functionError('useState', 'e'),
functionError('useState', 'f'),
functionError('useState', 'g'),
functionError('useState', 'j'),
functionError('useState', 'k'),
],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHook() {
if (a) return;
useState();
}
`,
errors: [conditionalError('useState', true)],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHook() {
if (a) return;
if (b) {
console.log('true');
} else {
console.log('false');
}
useState();
}
`,
errors: [conditionalError('useState', true)],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHook() {
if (b) {
console.log('true');
} else {
console.log('false');
}
if (a) return;
useState();
}
`,
errors: [conditionalError('useState', true)],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHook() {
a && useHook1();
b && useHook2();
}
`,
errors: [conditionalError('useHook1'), conditionalError('useHook2')],
},
{
code: `
// Invalid because it's dangerous and might not warn otherwise.
// This *must* be invalid.
function useHook() {
try {
f();
useState();
} catch {}
}
`,
errors: [
// NOTE: This is an error since `f()` could possibly throw.
conditionalError('useState'),
],
},
],
});
function conditionalError(hook, hasPreviousFinalizer = false) {
return {
message:
`React Hook "${hook}" is called conditionally. React Hooks must be ` +
'called in the exact same order in every component render.' +
(hasPreviousFinalizer
? ' Did you accidentally call a React Hook after an early return?'
: ''),
};
}
function loopError(hook) {
return {
message:
`React Hook "${hook}" may be executed more than once. Possibly ` +
'because it is called in a loop. React Hooks must be called in the ' +
'exact same order in every component render.',
};
}
function functionError(hook, fn) {
return {
message:
`React Hook "${hook}" is called in function "${fn}" which is neither ` +
'a React function component or a custom React Hook function.',
};
}
function genericError(hook) {
return {
message:
`React Hook "${hook}" cannot be called inside a callback. React Hooks ` +
'must be called in a React function component or a custom React ' +
'Hook function.',
};
}

View File

@@ -0,0 +1,10 @@
/**
* 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.
*/
'use strict';
module.exports = require('./src/index');

View File

@@ -0,0 +1,9 @@
'use strict';
// TODO: this doesn't make sense for an ESLint rule.
// We need to fix our build process to not create bundles for "raw" packages like this.
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/eslint-plugin-react-hooks.production.min.js');
} else {
module.exports = require('./cjs/eslint-plugin-react-hooks.development.js');
}

View File

@@ -0,0 +1,34 @@
{
"name": "eslint-plugin-react-hooks",
"description": "ESLint rules for React Hooks",
"version": "1.0.0",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"directory": "packages/eslint-plugin-react-hooks"
},
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"cjs"
],
"keywords": [
"eslint",
"eslint-plugin",
"eslintplugin",
"react"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"engines": {
"node": ">=6"
},
"homepage": "https://reactjs.org/",
"peerDependencies": {
"eslint": "^3.0.0 || ^4.0.0 || ^5.0.0"
}
}

View File

@@ -0,0 +1,554 @@
/**
* 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.
*/
/* eslint-disable no-for-of-loops/no-for-of-loops */
'use strict';
/**
* Catch all identifiers that begin with "use" followed by an uppercase Latin
* character to exclude identifiers like "user".
*/
function isHookName(s) {
return /^use[A-Z0-9].*$/.test(s);
}
/**
* We consider hooks to be a hook name identifier or a member expression
* containing a hook name.
*/
function isHook(node) {
if (node.type === 'Identifier') {
return isHookName(node.name);
} else if (
node.type === 'MemberExpression' &&
!node.computed &&
isHook(node.property)
) {
// Only consider React.useFoo() to be namespace hooks for now to avoid false positives.
// We can expand this check later.
const obj = node.object;
return obj.type === 'Identifier' && obj.name === 'React';
} else {
return false;
}
}
/**
* Checks if the node is a React component name. React component names must
* always start with a non-lowercase letter. So `MyComponent` or `_MyComponent`
* are valid component names for instance.
*/
function isComponentName(node) {
if (node.type === 'Identifier') {
return !/^[a-z]/.test(node.name);
} else {
return false;
}
}
function isInsideComponentOrHook(node) {
while (node) {
const functionName = getFunctionName(node);
if (functionName) {
if (isComponentName(functionName) || isHook(functionName)) {
return true;
}
}
node = node.parent;
}
return false;
}
export default {
create(context) {
const codePathReactHooksMapStack = [];
const codePathSegmentStack = [];
return {
// Maintain code segment path stack as we traverse.
onCodePathSegmentStart: segment => codePathSegmentStack.push(segment),
onCodePathSegmentEnd: () => codePathSegmentStack.pop(),
// Maintain code path stack as we traverse.
onCodePathStart: () => codePathReactHooksMapStack.push(new Map()),
// Process our code path.
//
// Everything is ok if all React Hooks are both reachable from the initial
// segment and reachable from every final segment.
onCodePathEnd(codePath, codePathNode) {
const reactHooksMap = codePathReactHooksMapStack.pop();
if (reactHooksMap.size === 0) {
return;
}
// All of the segments which are cyclic are recorded in this set.
const cyclic = new Set();
/**
* Count the number of code paths from the start of the function to this
* segment. For example:
*
* ```js
* function MyComponent() {
* if (condition) {
* // Segment 1
* } else {
* // Segment 2
* }
* // Segment 3
* }
* ```
*
* Segments 1 and 2 have one path to the beginning of `MyComponent` and
* segment 3 has two paths to the beginning of `MyComponent` since we
* could have either taken the path of segment 1 or segment 2.
*
* Populates `cyclic` with cyclic segments.
*/
function countPathsFromStart(segment) {
const {cache} = countPathsFromStart;
let paths = cache.get(segment.id);
// If `paths` is null then we've found a cycle! Add it to `cyclic` and
// any other segments which are a part of this cycle.
if (paths === null) {
if (cyclic.has(segment.id)) {
return 0;
} else {
cyclic.add(segment.id);
for (const prevSegment of segment.prevSegments) {
countPathsFromStart(prevSegment);
}
return 0;
}
}
// We have a cached `paths`. Return it.
if (paths !== undefined) {
return paths;
}
// Compute `paths` and cache it. Guarding against cycles.
cache.set(segment.id, null);
if (codePath.thrownSegments.includes(segment)) {
paths = 0;
} else if (segment.prevSegments.length === 0) {
paths = 1;
} else {
paths = 0;
for (const prevSegment of segment.prevSegments) {
paths += countPathsFromStart(prevSegment);
}
}
// If our segment is reachable then there should be at least one path
// to it from the start of our code path.
if (segment.reachable && paths === 0) {
cache.delete(segment.id);
} else {
cache.set(segment.id, paths);
}
return paths;
}
/**
* Count the number of code paths from this segment to the end of the
* function. For example:
*
* ```js
* function MyComponent() {
* // Segment 1
* if (condition) {
* // Segment 2
* } else {
* // Segment 3
* }
* }
* ```
*
* Segments 2 and 3 have one path to the end of `MyComponent` and
* segment 1 has two paths to the end of `MyComponent` since we could
* either take the path of segment 1 or segment 2.
*
* Populates `cyclic` with cyclic segments.
*/
function countPathsToEnd(segment) {
const {cache} = countPathsToEnd;
let paths = cache.get(segment.id);
// If `paths` is null then we've found a cycle! Add it to `cyclic` and
// any other segments which are a part of this cycle.
if (paths === null) {
if (cyclic.has(segment.id)) {
return 0;
} else {
cyclic.add(segment.id);
for (const nextSegment of segment.nextSegments) {
countPathsToEnd(nextSegment);
}
return 0;
}
}
// We have a cached `paths`. Return it.
if (paths !== undefined) {
return paths;
}
// Compute `paths` and cache it. Guarding against cycles.
cache.set(segment.id, null);
if (codePath.thrownSegments.includes(segment)) {
paths = 0;
} else if (segment.nextSegments.length === 0) {
paths = 1;
} else {
paths = 0;
for (const nextSegment of segment.nextSegments) {
paths += countPathsToEnd(nextSegment);
}
}
cache.set(segment.id, paths);
return paths;
}
/**
* Gets the shortest path length to the start of a code path.
* For example:
*
* ```js
* function MyComponent() {
* if (condition) {
* // Segment 1
* }
* // Segment 2
* }
* ```
*
* There is only one path from segment 1 to the code path start. Its
* length is one so that is the shortest path.
*
* There are two paths from segment 2 to the code path start. One
* through segment 1 with a length of two and another directly to the
* start with a length of one. The shortest path has a length of one
* so we would return that.
*/
function shortestPathLengthToStart(segment) {
const {cache} = shortestPathLengthToStart;
let length = cache.get(segment.id);
// If `length` is null then we found a cycle! Return infinity since
// the shortest path is definitely not the one where we looped.
if (length === null) {
return Infinity;
}
// We have a cached `length`. Return it.
if (length !== undefined) {
return length;
}
// Compute `length` and cache it. Guarding against cycles.
cache.set(segment.id, null);
if (segment.prevSegments.length === 0) {
length = 1;
} else {
length = Infinity;
for (const prevSegment of segment.prevSegments) {
const prevLength = shortestPathLengthToStart(prevSegment);
if (prevLength < length) {
length = prevLength;
}
}
length += 1;
}
cache.set(segment.id, length);
return length;
}
countPathsFromStart.cache = new Map();
countPathsToEnd.cache = new Map();
shortestPathLengthToStart.cache = new Map();
// Count all code paths to the end of our component/hook. Also primes
// the `countPathsToEnd` cache.
const allPathsFromStartToEnd = countPathsToEnd(codePath.initialSegment);
// Gets the function name for our code path. If the function name is
// `undefined` then we know either that we have an anonymous function
// expression or our code path is not in a function. In both cases we
// will want to error since neither are React function components or
// hook functions.
const codePathFunctionName = getFunctionName(codePathNode);
// This is a valid code path for React hooks if we are direcly in a React
// function component or we are in a hook function.
const isSomewhereInsideComponentOrHook = isInsideComponentOrHook(
codePathNode,
);
const isDirectlyInsideComponentOrHook = codePathFunctionName
? isComponentName(codePathFunctionName) ||
isHook(codePathFunctionName)
: false;
// Compute the earliest finalizer level using information from the
// cache. We expect all reachable final segments to have a cache entry
// after calling `visitSegment()`.
let shortestFinalPathLength = Infinity;
for (const finalSegment of codePath.finalSegments) {
if (!finalSegment.reachable) {
continue;
}
const length = shortestPathLengthToStart(finalSegment);
if (length < shortestFinalPathLength) {
shortestFinalPathLength = length;
}
}
// Make sure all React Hooks pass our lint invariants. Log warnings
// if not.
for (const [segment, reactHooks] of reactHooksMap) {
// NOTE: We could report here that the hook is not reachable, but
// that would be redundant with more general "no unreachable"
// lint rules.
if (!segment.reachable) {
continue;
}
// If there are any final segments with a shorter path to start then
// we possibly have an early return.
//
// If our segment is a final segment itself then siblings could
// possibly be early returns.
const possiblyHasEarlyReturn =
segment.nextSegments.length === 0
? shortestFinalPathLength <= shortestPathLengthToStart(segment)
: shortestFinalPathLength < shortestPathLengthToStart(segment);
// Count all the paths from the start of our code path to the end of
// our code path that go _through_ this segment. The critical piece
// of this is _through_. If we just call `countPathsToEnd(segment)`
// then we neglect that we may have gone through multiple paths to get
// to this point! Consider:
//
// ```js
// function MyComponent() {
// if (a) {
// // Segment 1
// } else {
// // Segment 2
// }
// // Segment 3
// if (b) {
// // Segment 4
// } else {
// // Segment 5
// }
// }
// ```
//
// In this component we have four code paths:
//
// 1. `a = true; b = true`
// 2. `a = true; b = false`
// 3. `a = false; b = true`
// 4. `a = false; b = false`
//
// From segment 3 there are two code paths to the end through segment
// 4 and segment 5. However, we took two paths to get here through
// segment 1 and segment 2.
//
// If we multiply the paths from start (two) by the paths to end (two)
// for segment 3 we get four. Which is our desired count.
const pathsFromStartToEnd =
countPathsFromStart(segment) * countPathsToEnd(segment);
// Is this hook a part of a cyclic segment?
const cycled = cyclic.has(segment.id);
for (const hook of reactHooks) {
// Report an error if a hook may be called more then once.
if (cycled) {
context.report({
node: hook,
message:
`React Hook "${context.getSource(hook)}" may be executed ` +
'more than once. Possibly because it is called in a loop. ' +
'React Hooks must be called in the exact same order in ' +
'every component render.',
});
}
// If this is not a valid code path for React hooks then we need to
// log a warning for every hook in this code path.
//
// Pick a special message depending on the scope this hook was
// called in.
if (isDirectlyInsideComponentOrHook) {
// Report an error if a hook does not reach all finalizing code
// path segments.
//
// Special case when we think there might be an early return.
if (!cycled && pathsFromStartToEnd !== allPathsFromStartToEnd) {
const message =
`React Hook "${context.getSource(hook)}" is called ` +
'conditionally. React Hooks must be called in the exact ' +
'same order in every component render.' +
(possiblyHasEarlyReturn
? ' Did you accidentally call a React Hook after an' +
' early return?'
: '');
context.report({node: hook, message});
}
} else if (
codePathNode.parent &&
(codePathNode.parent.type === 'MethodDefinition' ||
codePathNode.parent.type === 'ClassProperty') &&
codePathNode.parent.value === codePathNode
) {
// Ignore class methods for now because they produce too many
// false positives due to feature flag checks. We're less
// sensitive to them in classes because hooks would produce
// runtime errors in classes anyway, and because a use*()
// call in a class, if it works, is unambigously *not* a hook.
} else if (codePathFunctionName) {
// Custom message if we found an invalid function name.
const message =
`React Hook "${context.getSource(hook)}" is called in ` +
`function "${context.getSource(codePathFunctionName)}" ` +
'which is neither a React function component or a custom ' +
'React Hook function.';
context.report({node: hook, message});
} else if (codePathNode.type === 'Program') {
// For now, ignore if it's in top level scope.
// We could warn here but there are false positives related
// configuring libraries like `history`.
} else {
// Assume in all other cases the user called a hook in some
// random function callback. This should usually be true for
// anonymous function expressions. Hopefully this is clarifying
// enough in the common case that the incorrect message in
// uncommon cases doesn't matter.
if (isSomewhereInsideComponentOrHook) {
const message =
`React Hook "${context.getSource(hook)}" cannot be called ` +
'inside a callback. React Hooks must be called in a ' +
'React function component or a custom React Hook function.';
context.report({node: hook, message});
}
}
}
}
},
// Missed opportunity...We could visit all `Identifier`s instead of all
// `CallExpression`s and check that _every use_ of a hook name is valid.
// But that gets complicated and enters type-system territory, so we're
// only being strict about hook calls for now.
CallExpression(node) {
if (isHook(node.callee)) {
// Add the hook node to a map keyed by the code path segment. We will
// do full code path analysis at the end of our code path.
const reactHooksMap = last(codePathReactHooksMapStack);
const codePathSegment = last(codePathSegmentStack);
let reactHooks = reactHooksMap.get(codePathSegment);
if (!reactHooks) {
reactHooks = [];
reactHooksMap.set(codePathSegment, reactHooks);
}
reactHooks.push(node.callee);
}
},
};
},
};
/**
* Gets tbe static name of a function AST node. For function declarations it is
* easy. For anonymous function expressions it is much harder. If you search for
* `IsAnonymousFunctionDefinition()` in the ECMAScript spec you'll find places
* where JS gives anonymous function expressions names. We roughly detect the
* same AST nodes with some exceptions to better fit our usecase.
*/
function getFunctionName(node) {
if (
node.type === 'FunctionDeclaration' ||
(node.type === 'FunctionExpression' && node.id)
) {
// function useHook() {}
// const whatever = function useHook() {};
//
// Function declaration or function expression names win over any
// assignment statements or other renames.
return node.id;
} else if (
node.type === 'FunctionExpression' ||
node.type === 'ArrowFunctionExpression'
) {
if (
node.parent.type === 'VariableDeclarator' &&
node.parent.init === node
) {
// const useHook = () => {};
return node.parent.id;
} else if (
node.parent.type === 'AssignmentExpression' &&
node.parent.right === node &&
node.parent.operator === '='
) {
// useHook = () => {};
return node.parent.left;
} else if (
node.parent.type === 'Property' &&
node.parent.value === node &&
!node.parent.computed
) {
// {useHook: () => {}}
// {useHook() {}}
return node.parent.key;
// NOTE: We could also support `ClassProperty` and `MethodDefinition`
// here to be pedantic. However, hooks in a class are an anti-pattern. So
// we don't allow it to error early.
//
// class {useHook = () => {}}
// class {useHook() {}}
} else if (
node.parent.type === 'AssignmentPattern' &&
node.parent.right === node &&
!node.parent.computed
) {
// const {useHook = () => {}} = {};
// ({useHook = () => {}} = {});
//
// Kinda clowny, but we'd said we'd follow spec convention for
// `IsAnonymousFunctionDefinition()` usage.
return node.parent.left;
} else {
return undefined;
}
} else {
return undefined;
}
}
/**
* Convenience function for peeking the last item in a stack.
*/
function last(array) {
return array[array.length - 1];
}

View File

@@ -0,0 +1,14 @@
/**
* 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.
*/
'use strict';
import RuleOfHooks from './RulesOfHooks';
export const rules = {
'rules-of-hooks': RuleOfHooks,
};

View File

@@ -37,26 +37,19 @@ let eventQueue: ?(Array<ReactSyntheticEvent> | ReactSyntheticEvent) = null;
* Dispatches an event and releases it back into the pool, unless persistent.
*
* @param {?object} event Synthetic event to be dispatched.
* @param {boolean} simulated If the event is simulated (changes exn behavior)
* @private
*/
const executeDispatchesAndRelease = function(
event: ReactSyntheticEvent,
simulated: boolean,
) {
const executeDispatchesAndRelease = function(event: ReactSyntheticEvent) {
if (event) {
executeDispatchesInOrder(event, simulated);
executeDispatchesInOrder(event);
if (!event.isPersistent()) {
event.constructor.release(event);
}
}
};
const executeDispatchesAndReleaseSimulated = function(e) {
return executeDispatchesAndRelease(e, true);
};
const executeDispatchesAndReleaseTopLevel = function(e) {
return executeDispatchesAndRelease(e, false);
return executeDispatchesAndRelease(e);
};
function isInteractive(tag) {
@@ -192,7 +185,6 @@ function extractEvents(
export function runEventsInBatch(
events: Array<ReactSyntheticEvent> | ReactSyntheticEvent | null,
simulated: boolean,
) {
if (events !== null) {
eventQueue = accumulateInto(eventQueue, events);
@@ -207,17 +199,7 @@ export function runEventsInBatch(
return;
}
if (simulated) {
forEachAccumulated(
processingEventQueue,
executeDispatchesAndReleaseSimulated,
);
} else {
forEachAccumulated(
processingEventQueue,
executeDispatchesAndReleaseTopLevel,
);
}
forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
invariant(
!eventQueue,
'processEventQueue(): Additional events were enqueued while processing ' +
@@ -239,5 +221,5 @@ export function runExtractedEventsInBatch(
nativeEvent,
nativeEventTarget,
);
runEventsInBatch(events, false);
runEventsInBatch(events);
}

View File

@@ -60,11 +60,10 @@ if (__DEV__) {
/**
* Dispatch the event to the listener.
* @param {SyntheticEvent} event SyntheticEvent to handle
* @param {boolean} simulated If the event is simulated (changes exn behavior)
* @param {function} listener Application-level callback
* @param {*} inst Internal component instance
*/
function executeDispatch(event, simulated, listener, inst) {
function executeDispatch(event, listener, inst) {
const type = event.type || 'unknown-event';
event.currentTarget = getNodeFromInstance(inst);
invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
@@ -74,7 +73,7 @@ function executeDispatch(event, simulated, listener, inst) {
/**
* Standard/simple iteration through an event's collected dispatches.
*/
export function executeDispatchesInOrder(event, simulated) {
export function executeDispatchesInOrder(event) {
const dispatchListeners = event._dispatchListeners;
const dispatchInstances = event._dispatchInstances;
if (__DEV__) {
@@ -86,15 +85,10 @@ export function executeDispatchesInOrder(event, simulated) {
break;
}
// Listeners and Instances are two parallel arrays that are always in sync.
executeDispatch(
event,
simulated,
dispatchListeners[i],
dispatchInstances[i],
);
executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
}
} else if (dispatchListeners) {
executeDispatch(event, simulated, dispatchListeners, dispatchInstances);
executeDispatch(event, dispatchListeners, dispatchInstances);
}
event._dispatchListeners = null;
event._dispatchInstances = null;

View File

@@ -3,6 +3,8 @@
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import invariant from 'shared/invariant';
@@ -35,11 +37,13 @@ function restoreStateOfTarget(target) {
restoreImpl(internalInstance.stateNode, internalInstance.type, props);
}
export function setRestoreImplementation(impl) {
export function setRestoreImplementation(
impl: (domElement: Element, tag: string, props: Object) => void,
): void {
restoreImpl = impl;
}
export function enqueueStateRestore(target) {
export function enqueueStateRestore(target: EventTarget): void {
if (restoreTarget) {
if (restoreQueue) {
restoreQueue.push(target);

View File

@@ -321,7 +321,7 @@ const run = function(config, hierarchyConfig, nativeEventConfig) {
// At this point the negotiation events have been dispatched as part of the
// extraction process, but not the side effectful events. Below, we dispatch
// side effectful events.
EventPluginHub.runEventsInBatch(extractedEvents, true);
EventPluginHub.runEventsInBatch(extractedEvents);
// Ensure that every event that declared an `order`, was actually dispatched.
expect('number of events dispatched:' + runData.dispatchCount).toBe(

View File

@@ -0,0 +1,5 @@
# `jest-mock-scheduler`
Jest matchers and utilities for testing the `scheduler` package.
This package is experimental. APIs may change between releases.

View File

@@ -0,0 +1,8 @@
/**
* 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.
*/
export * from './src/JestMockScheduler';

View File

@@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/jest-mock-scheduler.production.min.js');
} else {
module.exports = require('./cjs/jest-mock-scheduler.development.js');
}

View File

@@ -0,0 +1,32 @@
{
"name": "jest-mock-scheduler",
"private": true,
"version": "0.1.0",
"description": "Jest matchers and utilities for testing the scheduler package.",
"main": "index.js",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"directory": "packages/jest-mock-scheduler"
},
"keywords": [
"jest",
"scheduler"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"homepage": "https://reactjs.org/",
"peerDependencies": {
"jest": "^23.0.1",
"scheduler": "^0.11.0"
},
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"cjs/"
]
}

View File

@@ -0,0 +1,61 @@
/**
* 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.
*/
// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
// Math.pow(2, 30) - 1
// 0b111111111111111111111111111111
const maxSigned31BitInt = 1073741823;
export function mockRestore() {
delete global._schedMock;
}
let callback = null;
let currentTime = -1;
function flushCallback(didTimeout, ms) {
if (callback !== null) {
let cb = callback;
callback = null;
try {
currentTime = ms;
cb(didTimeout);
} finally {
currentTime = -1;
}
}
}
function requestHostCallback(cb, ms) {
if (currentTime !== -1) {
// Protect against re-entrancy.
setTimeout(requestHostCallback, 0, cb, ms);
} else {
callback = cb;
setTimeout(flushCallback, ms, true, ms);
setTimeout(flushCallback, maxSigned31BitInt, false, maxSigned31BitInt);
}
}
function cancelHostCallback() {
callback = null;
}
function shouldYieldToHost() {
return false;
}
function getCurrentTime() {
return currentTime === -1 ? 0 : currentTime;
}
global._schedMock = [
requestHostCallback,
cancelHostCallback,
shouldYieldToHost,
getCurrentTime,
];

View File

@@ -0,0 +1,3 @@
# `jest-react`
Jest matchers and utilities for testing React Test Renderer.

View File

@@ -7,4 +7,4 @@
'use strict';
export * from './src/Schedule';
export * from './src/JestReact';

View File

@@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/jest-react.production.min.js');
} else {
module.exports = require('./cjs/jest-react.development.js');
}

View File

@@ -0,0 +1,33 @@
{
"name": "jest-react",
"version": "0.6.0",
"description": "Jest matchers and utilities for testing React components.",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/jest-react"
},
"keywords": [
"react",
"jest",
"react-testing"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"homepage": "https://reactjs.org/",
"peerDependencies": {
"jest": "^23.0.1",
"react": "^16.0.0",
"react-test-renderer": "^16.0.0"
},
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"cjs/"
]
}

View File

@@ -0,0 +1,167 @@
/**
* 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.
*/
import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
import invariant from 'shared/invariant';
function captureAssertion(fn) {
// Trick to use a Jest matcher inside another Jest matcher. `fn` contains an
// assertion; if it throws, we capture the error and return it, so the stack
// trace presented to the user points to the original assertion in the
// test file.
try {
fn();
} catch (error) {
return {
pass: false,
message: () => error.message,
};
}
return {pass: true};
}
function assertYieldsWereCleared(root) {
const actualYields = root.unstable_clearYields();
invariant(
actualYields.length === 0,
'Log of yielded values is not empty. ' +
'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
);
}
export function unstable_toFlushAndYield(root, expectedYields) {
assertYieldsWereCleared(root);
const actualYields = root.unstable_flushAll();
return captureAssertion(() => {
expect(actualYields).toEqual(expectedYields);
});
}
export function unstable_toFlushAndYieldThrough(root, expectedYields) {
assertYieldsWereCleared(root);
const actualYields = root.unstable_flushNumberOfYields(expectedYields.length);
return captureAssertion(() => {
expect(actualYields).toEqual(expectedYields);
});
}
export function unstable_toFlushWithoutYielding(root) {
return unstable_toFlushAndYield(root, []);
}
export function unstable_toHaveYielded(ReactTestRenderer, expectedYields) {
return captureAssertion(() => {
if (
ReactTestRenderer === null ||
typeof ReactTestRenderer !== 'object' ||
typeof ReactTestRenderer.unstable_setNowImplementation !== 'function'
) {
invariant(
false,
'The matcher `unstable_toHaveYielded` expects an instance of React Test ' +
'Renderer.\n\nTry: ' +
'expect(ReactTestRenderer).unstable_toHaveYielded(expectedYields)',
);
}
const actualYields = ReactTestRenderer.unstable_clearYields();
expect(actualYields).toEqual(expectedYields);
});
}
export function unstable_toFlushAndThrow(root, ...rest) {
assertYieldsWereCleared(root);
return captureAssertion(() => {
expect(() => {
root.unstable_flushAll();
}).toThrow(...rest);
});
}
export function unstable_toMatchRenderedOutput(root, expectedJSX) {
assertYieldsWereCleared(root);
const actualJSON = root.toJSON();
let actualJSX;
if (actualJSON === null || typeof actualJSON === 'string') {
actualJSX = actualJSON;
} else if (Array.isArray(actualJSON)) {
if (actualJSON.length === 0) {
actualJSX = null;
} else if (actualJSON.length === 1) {
actualJSX = jsonChildToJSXChild(actualJSON[0]);
} else {
const actualJSXChildren = jsonChildrenToJSXChildren(actualJSON);
if (actualJSXChildren === null || typeof actualJSXChildren === 'string') {
actualJSX = actualJSXChildren;
} else {
actualJSX = {
$$typeof: REACT_ELEMENT_TYPE,
type: REACT_FRAGMENT_TYPE,
key: null,
ref: null,
props: {
children: actualJSXChildren,
},
_owner: null,
_store: __DEV__ ? {} : undefined,
};
}
}
} else {
actualJSX = jsonChildToJSXChild(actualJSON);
}
return captureAssertion(() => {
expect(actualJSX).toEqual(expectedJSX);
});
}
function jsonChildToJSXChild(jsonChild) {
if (jsonChild === null || typeof jsonChild === 'string') {
return jsonChild;
} else {
const jsxChildren = jsonChildrenToJSXChildren(jsonChild.children);
return {
$$typeof: REACT_ELEMENT_TYPE,
type: jsonChild.type,
key: null,
ref: null,
props:
jsxChildren === null
? jsonChild.props
: {...jsonChild.props, children: jsxChildren},
_owner: null,
_store: __DEV__ ? {} : undefined,
};
}
}
function jsonChildrenToJSXChildren(jsonChildren) {
if (jsonChildren !== null) {
if (jsonChildren.length === 1) {
return jsonChildToJSXChild(jsonChildren[0]);
} else if (jsonChildren.length > 1) {
let jsxChildren = [];
let allJSXChildrenAreStrings = true;
let jsxChildrenString = '';
for (let i = 0; i < jsonChildren.length; i++) {
const jsxChild = jsonChildToJSXChild(jsonChildren[i]);
jsxChildren.push(jsxChild);
if (allJSXChildrenAreStrings) {
if (typeof jsxChild === 'string') {
jsxChildrenString += jsxChild;
} else if (jsxChild !== null) {
allJSXChildrenAreStrings = false;
}
}
}
return allJSXChildrenAreStrings ? jsxChildrenString : jsxChildren;
}
}
return null;
}

View File

@@ -1,9 +1,13 @@
{
"name": "react-art",
"description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
"version": "16.6.0-alpha.0",
"version": "16.8.0",
"main": "index.js",
"repository": "facebook/react",
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-art"
},
"keywords": [
"react",
"art",
@@ -23,14 +27,15 @@
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"schedule": "^0.5.0-alpha.0"
"scheduler": "^0.13.0"
},
"peerDependencies": {
"react": "^16.0.0 || 16.6.0-alpha.0"
"react": "^16.0.0"
},
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"cjs/",
"umd/",

View File

@@ -7,7 +7,11 @@
import React from 'react';
import ReactVersion from 'shared/ReactVersion';
import * as ARTRenderer from 'react-reconciler/inline.art';
import {
createContainer,
updateContainer,
injectIntoDevTools,
} from 'react-reconciler/inline.art';
import Transform from 'art/core/transform';
import Mode from 'art/modes/current';
import FastNoSideEffects from 'art/modes/fast-noSideEffects';
@@ -61,8 +65,8 @@ class Surface extends React.Component {
this._surface = Mode.Surface(+width, +height, this._tagRef);
this._mountNode = ARTRenderer.createContainer(this._surface);
ARTRenderer.updateContainer(this.props.children, this._mountNode, this);
this._mountNode = createContainer(this._surface);
updateContainer(this.props.children, this._mountNode, this);
}
componentDidUpdate(prevProps, prevState) {
@@ -72,7 +76,7 @@ class Surface extends React.Component {
this._surface.resize(+props.width, +props.height);
}
ARTRenderer.updateContainer(this.props.children, this._mountNode, this);
updateContainer(this.props.children, this._mountNode, this);
if (this._surface.render) {
this._surface.render();
@@ -80,7 +84,7 @@ class Surface extends React.Component {
}
componentWillUnmount() {
ARTRenderer.updateContainer(null, this._mountNode, this);
updateContainer(null, this._mountNode, this);
}
render() {
@@ -132,7 +136,7 @@ class Text extends React.Component {
}
}
ARTRenderer.injectIntoDevTools({
injectIntoDevTools({
findFiberByHostInstance: () => null,
bundleType: __DEV__ ? 1 : 0,
version: ReactVersion,

View File

@@ -5,11 +5,16 @@
* LICENSE file in the root directory of this source tree.
*/
import {
unstable_scheduleCallback as scheduleDeferredCallback,
unstable_cancelCallback as cancelDeferredCallback,
} from 'scheduler';
export {
unstable_now as now,
unstable_scheduleWork as scheduleDeferredCallback,
unstable_cancelScheduledWork as cancelDeferredCallback,
} from 'schedule';
unstable_scheduleCallback as scheduleDeferredCallback,
unstable_shouldYield as shouldYield,
unstable_cancelCallback as cancelDeferredCallback,
} from 'scheduler';
import Transform from 'art/core/transform';
import Mode from 'art/modes/current';
import invariant from 'shared/invariant';
@@ -336,6 +341,8 @@ export function getChildHostContext() {
export const scheduleTimeout = setTimeout;
export const cancelTimeout = clearTimeout;
export const noTimeout = -1;
export const schedulePassiveEffects = scheduleDeferredCallback;
export const cancelPassiveEffects = cancelDeferredCallback;
export function shouldSetTextContent(type, props) {
return (
@@ -405,3 +412,21 @@ export function commitUpdate(
) {
instance._applyProps(instance, newProps, oldProps);
}
export function hideInstance(instance) {
instance.hide();
}
export function hideTextInstance(textInstance) {
// Noop
}
export function unhideInstance(instance, props) {
if (props.visible == null || props.visible) {
instance.show();
}
}
export function unhideTextInstance(textInstance, text): void {
// Noop
}

View File

@@ -1,4 +1,4 @@
# simple-cache-provider
# react-cache
A basic cache for React applications. It also serves as a reference for more
advanced caching implementations.

View File

@@ -9,4 +9,4 @@
'use strict';
export * from './src/SimpleCacheProvider';
export * from './src/ReactCache';

7
packages/react-cache/npm/index.js vendored Normal file
View File

@@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-cache.production.min.js');
} else {
module.exports = require('./cjs/react-cache.development.js');
}

View File

@@ -0,0 +1,22 @@
{
"private": true,
"name": "react-cache",
"description": "A basic cache for React applications",
"version": "2.0.0-alpha.0",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"directory": "packages/react-cache"
},
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"cjs/",
"umd/"
],
"peerDependencies": {
"react": "^16.3.0-alpha.1"
}
}

142
packages/react-cache/src/LRU.js vendored Normal file
View File

@@ -0,0 +1,142 @@
/**
* Copyright (c) 2014-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import {unstable_scheduleCallback as scheduleCallback} from 'scheduler';
type Entry<T> = {|
value: T,
onDelete: () => mixed,
previous: Entry<T>,
next: Entry<T>,
|};
export function createLRU<T>(limit: number) {
let LIMIT = limit;
// Circular, doubly-linked list
let first: Entry<T> | null = null;
let size: number = 0;
let cleanUpIsScheduled: boolean = false;
function scheduleCleanUp() {
if (cleanUpIsScheduled === false && size > LIMIT) {
// The cache size exceeds the limit. Schedule a callback to delete the
// least recently used entries.
cleanUpIsScheduled = true;
scheduleCallback(cleanUp);
}
}
function cleanUp() {
cleanUpIsScheduled = false;
deleteLeastRecentlyUsedEntries(LIMIT);
}
function deleteLeastRecentlyUsedEntries(targetSize: number) {
// Delete entries from the cache, starting from the end of the list.
if (first !== null) {
const resolvedFirst: Entry<T> = (first: any);
let last = resolvedFirst.previous;
while (size > targetSize && last !== null) {
const onDelete = last.onDelete;
const previous = last.previous;
last.onDelete = (null: any);
// Remove from the list
last.previous = last.next = (null: any);
if (last === first) {
// Reached the head of the list.
first = last = null;
} else {
(first: any).previous = previous;
previous.next = (first: any);
last = previous;
}
size -= 1;
// Call the destroy method after removing the entry from the list. If it
// throws, the rest of cache will not be deleted, but it will be in a
// valid state.
onDelete();
}
}
}
function add(value: T, onDelete: () => mixed): Entry<T> {
const entry = {
value,
onDelete,
next: (null: any),
previous: (null: any),
};
if (first === null) {
entry.previous = entry.next = entry;
first = entry;
} else {
// Append to head
const last = first.previous;
last.next = entry;
entry.previous = last;
first.previous = entry;
entry.next = first;
first = entry;
}
size += 1;
return entry;
}
function update(entry: Entry<T>, newValue: T): void {
entry.value = newValue;
}
function access(entry: Entry<T>): T {
const next = entry.next;
if (next !== null) {
// Entry already cached
const resolvedFirst: Entry<T> = (first: any);
if (first !== entry) {
// Remove from current position
const previous = entry.previous;
previous.next = next;
next.previous = previous;
// Append to head
const last = resolvedFirst.previous;
last.next = entry;
entry.previous = last;
resolvedFirst.previous = entry;
entry.next = resolvedFirst;
first = entry;
}
} else {
// Cannot access a deleted entry
// TODO: Error? Warning?
}
scheduleCleanUp();
return entry.value;
}
function setLimit(newLimit: number) {
LIMIT = newLimit;
scheduleCleanUp();
}
return {
add,
update,
access,
setLimit,
};
}

188
packages/react-cache/src/ReactCache.js vendored Normal file
View File

@@ -0,0 +1,188 @@
/**
* 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 React from 'react';
import warningWithoutStack from 'shared/warningWithoutStack';
import {createLRU} from './LRU';
type Thenable<T> = {
then(resolve: (T) => mixed, reject: (mixed) => mixed): mixed,
};
type Suspender = {
then(resolve: () => mixed, reject: () => mixed): mixed,
};
type PendingResult = {|
status: 0,
value: Suspender,
|};
type ResolvedResult<V> = {|
status: 1,
value: V,
|};
type RejectedResult = {|
status: 2,
value: mixed,
|};
type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
type Resource<I, V> = {
read(I): V,
preload(I): void,
};
const Pending = 0;
const Resolved = 1;
const Rejected = 2;
const ReactCurrentDispatcher =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
.ReactCurrentDispatcher;
function readContext(Context, observedBits) {
const dispatcher = ReactCurrentDispatcher.current;
if (dispatcher === null) {
throw new Error(
'react-cache: read and preload may only be called from within a ' +
"component's render. They are not supported in event handlers or " +
'lifecycle methods.',
);
}
return dispatcher.readContext(Context, observedBits);
}
function identityHashFn(input) {
if (__DEV__) {
warningWithoutStack(
typeof input === 'string' ||
typeof input === 'number' ||
typeof input === 'boolean' ||
input === undefined ||
input === null,
'Invalid key type. Expected a string, number, symbol, or boolean, ' +
'but instead received: %s' +
'\n\nTo use non-primitive values as keys, you must pass a hash ' +
'function as the second argument to createResource().',
input,
);
}
return input;
}
const CACHE_LIMIT = 500;
const lru = createLRU(CACHE_LIMIT);
const entries: Map<Resource<any, any>, Map<any, any>> = new Map();
const CacheContext = React.createContext(null);
function accessResult<I, K, V>(
resource: any,
fetch: I => Thenable<V>,
input: I,
key: K,
): Result<V> {
let entriesForResource = entries.get(resource);
if (entriesForResource === undefined) {
entriesForResource = new Map();
entries.set(resource, entriesForResource);
}
let entry = entriesForResource.get(key);
if (entry === undefined) {
const thenable = fetch(input);
thenable.then(
value => {
if (newResult.status === Pending) {
const resolvedResult: ResolvedResult<V> = (newResult: any);
resolvedResult.status = Resolved;
resolvedResult.value = value;
}
},
error => {
if (newResult.status === Pending) {
const rejectedResult: RejectedResult = (newResult: any);
rejectedResult.status = Rejected;
rejectedResult.value = error;
}
},
);
const newResult: PendingResult = {
status: Pending,
value: thenable,
};
const newEntry = lru.add(newResult, deleteEntry.bind(null, resource, key));
entriesForResource.set(key, newEntry);
return newResult;
} else {
return (lru.access(entry): any);
}
}
function deleteEntry(resource, key) {
const entriesForResource = entries.get(resource);
if (entriesForResource !== undefined) {
entriesForResource.delete(key);
if (entriesForResource.size === 0) {
entries.delete(resource);
}
}
}
export function unstable_createResource<I, K: string | number, V>(
fetch: I => Thenable<V>,
maybeHashInput?: I => K,
): Resource<I, V> {
const hashInput: I => K =
maybeHashInput !== undefined ? maybeHashInput : (identityHashFn: any);
const resource = {
read(input: I): V {
// react-cache currently doesn't rely on context, but it may in the
// future, so we read anyway to prevent access outside of render.
readContext(CacheContext);
const key = hashInput(input);
const result: Result<V> = accessResult(resource, fetch, input, key);
switch (result.status) {
case Pending: {
const suspender = result.value;
throw suspender;
}
case Resolved: {
const value = result.value;
return value;
}
case Rejected: {
const error = result.value;
throw error;
}
default:
// Should be unreachable
return (undefined: any);
}
},
preload(input: I): void {
// react-cache currently doesn't rely on context, but it may in the
// future, so we read anyway to prevent access outside of render.
readContext(CacheContext);
const key = hashInput(input);
accessResult(resource, fetch, input, key);
},
};
return resource;
}
export function unstable_setGlobalCacheLimit(limit: number) {
lru.setLimit(limit);
}

View File

@@ -0,0 +1,402 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
let ReactCache;
let createResource;
let React;
let ReactFeatureFlags;
let ReactTestRenderer;
let Suspense;
let TextResource;
let textResourceShouldFail;
let flushScheduledWork;
let evictLRU;
describe('ReactCache', () => {
beforeEach(() => {
jest.resetModules();
jest.mock('scheduler', () => {
let callbacks = [];
return {
unstable_scheduleCallback(callback) {
const callbackIndex = callbacks.length;
callbacks.push(callback);
return {callbackIndex};
},
flushScheduledWork() {
while (callbacks.length) {
const callback = callbacks.pop();
callback();
}
},
};
});
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
React = require('react');
Suspense = React.Suspense;
ReactCache = require('react-cache');
createResource = ReactCache.unstable_createResource;
ReactTestRenderer = require('react-test-renderer');
flushScheduledWork = require('scheduler').flushScheduledWork;
evictLRU = flushScheduledWork;
TextResource = createResource(([text, ms = 0]) => {
let listeners = null;
let status = 'pending';
let value = null;
return {
then(resolve, reject) {
switch (status) {
case 'pending': {
if (listeners === null) {
listeners = [{resolve, reject}];
setTimeout(() => {
if (textResourceShouldFail) {
ReactTestRenderer.unstable_yield(
`Promise rejected [${text}]`,
);
status = 'rejected';
value = new Error('Failed to load: ' + text);
listeners.forEach(listener => listener.reject(value));
} else {
ReactTestRenderer.unstable_yield(
`Promise resolved [${text}]`,
);
status = 'resolved';
value = text;
listeners.forEach(listener => listener.resolve(value));
}
}, ms);
} else {
listeners.push({resolve, reject});
}
break;
}
case 'resolved': {
resolve(value);
break;
}
case 'rejected': {
reject(value);
break;
}
}
},
};
}, ([text, ms]) => text);
textResourceShouldFail = false;
});
function Text(props) {
ReactTestRenderer.unstable_yield(props.text);
return props.text;
}
function AsyncText(props) {
const text = props.text;
try {
TextResource.read([props.text, props.ms]);
ReactTestRenderer.unstable_yield(text);
return text;
} catch (promise) {
if (typeof promise.then === 'function') {
ReactTestRenderer.unstable_yield(`Suspend! [${text}]`);
} else {
ReactTestRenderer.unstable_yield(`Error! [${text}]`);
}
throw promise;
}
}
it('throws a promise if the requested value is not in the cache', () => {
function App() {
return (
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText ms={100} text="Hi" />
</Suspense>
);
}
const root = ReactTestRenderer.create(<App />, {
unstable_isConcurrent: true,
});
expect(root).toFlushAndYield(['Suspend! [Hi]', 'Loading...']);
jest.advanceTimersByTime(100);
expect(ReactTestRenderer).toHaveYielded(['Promise resolved [Hi]']);
expect(root).toFlushAndYield(['Hi']);
});
it('throws an error on the subsequent read if the promise is rejected', async () => {
function App() {
return (
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText ms={100} text="Hi" />
</Suspense>
);
}
const root = ReactTestRenderer.create(<App />, {
unstable_isConcurrent: true,
});
expect(root).toFlushAndYield(['Suspend! [Hi]', 'Loading...']);
textResourceShouldFail = true;
jest.advanceTimersByTime(100);
expect(ReactTestRenderer).toHaveYielded(['Promise rejected [Hi]']);
expect(root).toFlushAndThrow('Failed to load: Hi');
expect(ReactTestRenderer).toHaveYielded(['Error! [Hi]', 'Error! [Hi]']);
// Should throw again on a subsequent read
root.update(<App />);
expect(root).toFlushAndThrow('Failed to load: Hi');
expect(ReactTestRenderer).toHaveYielded(['Error! [Hi]', 'Error! [Hi]']);
});
it('warns if non-primitive key is passed to a resource without a hash function', () => {
const BadTextResource = createResource(([text, ms = 0]) => {
return new Promise((resolve, reject) =>
setTimeout(() => {
resolve(text);
}, ms),
);
});
function App() {
ReactTestRenderer.unstable_yield('App');
return BadTextResource.read(['Hi', 100]);
}
const root = ReactTestRenderer.create(
<Suspense fallback={<Text text="Loading..." />}>
<App />
</Suspense>,
{
unstable_isConcurrent: true,
},
);
if (__DEV__) {
expect(() => {
expect(root).toFlushAndYield(['App', 'Loading...']);
}).toWarnDev(
[
'Invalid key type. Expected a string, number, symbol, or ' +
'boolean, but instead received: Hi,100\n\n' +
'To use non-primitive values as keys, you must pass a hash ' +
'function as the second argument to createResource().',
],
{withoutStack: true},
);
} else {
expect(root).toFlushAndYield(['App', 'Loading...']);
}
});
it('evicts least recently used values', async () => {
ReactCache.unstable_setGlobalCacheLimit(3);
// Render 1, 2, and 3
const root = ReactTestRenderer.create(
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText ms={100} text={1} />
<AsyncText ms={100} text={2} />
<AsyncText ms={100} text={3} />
</Suspense>,
{
unstable_isConcurrent: true,
},
);
expect(root).toFlushAndYield([
'Suspend! [1]',
'Suspend! [2]',
'Suspend! [3]',
'Loading...',
]);
jest.advanceTimersByTime(100);
expect(ReactTestRenderer).toHaveYielded([
'Promise resolved [1]',
'Promise resolved [2]',
'Promise resolved [3]',
]);
expect(root).toFlushAndYield([1, 2, 3]);
expect(root).toMatchRenderedOutput('123');
// Render 1, 4, 5
root.update(
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText ms={100} text={1} />
<AsyncText ms={100} text={4} />
<AsyncText ms={100} text={5} />
</Suspense>,
);
expect(root).toFlushAndYield([
1,
'Suspend! [4]',
'Suspend! [5]',
'Loading...',
]);
jest.advanceTimersByTime(100);
expect(ReactTestRenderer).toHaveYielded([
'Promise resolved [4]',
'Promise resolved [5]',
]);
expect(root).toFlushAndYield([1, 4, 5]);
expect(root).toMatchRenderedOutput('145');
// We've now rendered values 1, 2, 3, 4, 5, over our limit of 3. The least
// recently used values are 2 and 3. They will be evicted during the
// next sweep.
evictLRU();
root.update(
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText ms={100} text={1} />
<AsyncText ms={100} text={2} />
<AsyncText ms={100} text={3} />
</Suspense>,
);
expect(root).toFlushAndYield([
// 1 is still cached
1,
// 2 and 3 suspend because they were evicted from the cache
'Suspend! [2]',
'Suspend! [3]',
'Loading...',
]);
jest.advanceTimersByTime(100);
expect(ReactTestRenderer).toHaveYielded([
'Promise resolved [2]',
'Promise resolved [3]',
]);
expect(root).toFlushAndYield([1, 2, 3]);
expect(root).toMatchRenderedOutput('123');
});
it('preloads during the render phase', async () => {
function App() {
TextResource.preload(['B', 1000]);
TextResource.read(['A', 1000]);
TextResource.read(['B', 1000]);
return <Text text="Result" />;
}
const root = ReactTestRenderer.create(
<Suspense fallback={<Text text="Loading..." />}>
<App />
</Suspense>,
{
unstable_isConcurrent: true,
},
);
expect(root).toFlushAndYield(['Loading...']);
jest.advanceTimersByTime(1000);
expect(ReactTestRenderer).toHaveYielded([
'Promise resolved [B]',
'Promise resolved [A]',
]);
expect(root).toFlushAndYield(['Result']);
expect(root).toMatchRenderedOutput('Result');
});
it('if a thenable resolves multiple times, does not update the first cached value', () => {
let resolveThenable;
const BadTextResource = createResource(([text, ms = 0]) => {
let listeners = null;
let value = null;
return {
then(resolve, reject) {
if (value !== null) {
resolve(value);
} else {
if (listeners === null) {
listeners = [resolve];
resolveThenable = v => {
listeners.forEach(listener => listener(v));
};
} else {
listeners.push(resolve);
}
}
},
};
}, ([text, ms]) => text);
function BadAsyncText(props) {
const text = props.text;
try {
const actualText = BadTextResource.read([props.text, props.ms]);
ReactTestRenderer.unstable_yield(actualText);
return actualText;
} catch (promise) {
if (typeof promise.then === 'function') {
ReactTestRenderer.unstable_yield(`Suspend! [${text}]`);
} else {
ReactTestRenderer.unstable_yield(`Error! [${text}]`);
}
throw promise;
}
}
const root = ReactTestRenderer.create(
<Suspense fallback={<Text text="Loading..." />}>
<BadAsyncText text="Hi" />
</Suspense>,
{
unstable_isConcurrent: true,
},
);
expect(root).toFlushAndYield(['Suspend! [Hi]', 'Loading...']);
resolveThenable('Hi');
// This thenable improperly resolves twice. We should not update the
// cached value.
resolveThenable('Hi muahahaha I am different');
root.update(
<Suspense fallback={<Text text="Loading..." />}>
<BadAsyncText text="Hi" />
</Suspense>,
{
unstable_isConcurrent: true,
},
);
expect(ReactTestRenderer).toHaveYielded([]);
expect(root).toFlushAndYield(['Hi']);
expect(root).toMatchRenderedOutput('Hi');
});
it('throws if read is called outside render', () => {
expect(() => TextResource.read(['A', 1000])).toThrow(
"read and preload may only be called from within a component's render",
);
});
it('throws if preload is called outside render', () => {
expect(() => TextResource.preload(['A', 1000])).toThrow(
"read and preload may only be called from within a component's render",
);
});
});

View File

@@ -0,0 +1,7 @@
# react-debug-tools
This is an experimental package for debugging React renderers.
**Its API is not as stable as that of React, React Native, or React DOM, and does not follow the common versioning scheme.**
**Use it at your own risk.**

13
packages/react-debug-tools/index.js vendored Normal file
View File

@@ -0,0 +1,13 @@
/**
* 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.
*/
'use strict';
const ReactDebugTools = require('./src/ReactDebugTools');
// This is hacky but makes it work with both Rollup and Jest.
module.exports = ReactDebugTools.default || ReactDebugTools;

View File

@@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-debug-tools.production.min.js');
} else {
module.exports = require('./cjs/react-debug-tools.development.js');
}

View File

@@ -0,0 +1,34 @@
{
"private": true,
"name": "react-debug-tools",
"description": "React package for debugging React trees.",
"version": "0.16.0",
"keywords": [
"react"
],
"homepage": "https://reactjs.org/",
"bugs": "https://github.com/facebook/react/issues",
"license": "MIT",
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"cjs/"
],
"main": "index.js",
"repository": {
"type" : "git",
"url" : "https://github.com/facebook/react.git",
"directory": "packages/react-debug-tools"
},
"engines": {
"node": ">=0.10.0"
},
"peerDependencies": {
"react": "^16.0.0"
},
"dependencies": {
"error-stack-parser": "^2.0.2"
}
}

View File

@@ -0,0 +1,592 @@
/**
* 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 type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
import type {Fiber} from 'react-reconciler/src/ReactFiber';
import type {Hook} from 'react-reconciler/src/ReactFiberHooks';
import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactFiberHooks';
import ErrorStackParser from 'error-stack-parser';
import ReactSharedInternals from 'shared/ReactSharedInternals';
import {
FunctionComponent,
SimpleMemoComponent,
ContextProvider,
ForwardRef,
} from 'shared/ReactWorkTags';
type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
// Used to track hooks called during a render
type HookLogEntry = {
primitive: string,
stackError: Error,
value: mixed,
};
let hookLog: Array<HookLogEntry> = [];
// Primitives
type BasicStateAction<S> = (S => S) | S;
type Dispatch<A> = A => void;
let primitiveStackCache: null | Map<string, Array<any>> = null;
function getPrimitiveStackCache(): Map<string, Array<any>> {
// This initializes a cache of all primitive hooks so that the top
// most stack frames added by calling the primitive hook can be removed.
if (primitiveStackCache === null) {
let cache = new Map();
let readHookLog;
try {
// Use all hooks here to add them to the hook log.
Dispatcher.useContext(({_currentValue: null}: any));
Dispatcher.useState(null);
Dispatcher.useReducer((s, a) => s, null);
Dispatcher.useRef(null);
Dispatcher.useLayoutEffect(() => {});
Dispatcher.useEffect(() => {});
Dispatcher.useImperativeHandle(undefined, () => null);
Dispatcher.useDebugValue(null);
Dispatcher.useCallback(() => {});
Dispatcher.useMemo(() => null);
} finally {
readHookLog = hookLog;
hookLog = [];
}
for (let i = 0; i < readHookLog.length; i++) {
let hook = readHookLog[i];
cache.set(hook.primitive, ErrorStackParser.parse(hook.stackError));
}
primitiveStackCache = cache;
}
return primitiveStackCache;
}
let currentHook: null | Hook = null;
function nextHook(): null | Hook {
let hook = currentHook;
if (hook !== null) {
currentHook = hook.next;
}
return hook;
}
function readContext<T>(
context: ReactContext<T>,
observedBits: void | number | boolean,
): T {
// For now we don't expose readContext usage in the hooks debugging info.
return context._currentValue;
}
function useContext<T>(
context: ReactContext<T>,
observedBits: void | number | boolean,
): T {
hookLog.push({
primitive: 'Context',
stackError: new Error(),
value: context._currentValue,
});
return context._currentValue;
}
function useState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
let hook = nextHook();
let state: S =
hook !== null
? hook.memoizedState
: typeof initialState === 'function'
? initialState()
: initialState;
hookLog.push({primitive: 'State', stackError: new Error(), value: state});
return [state, (action: BasicStateAction<S>) => {}];
}
function useReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: I => S,
): [S, Dispatch<A>] {
let hook = nextHook();
let state;
if (hook !== null) {
state = hook.memoizedState;
} else {
state = init !== undefined ? init(initialArg) : ((initialArg: any): S);
}
hookLog.push({
primitive: 'Reducer',
stackError: new Error(),
value: state,
});
return [state, (action: A) => {}];
}
function useRef<T>(initialValue: T): {current: T} {
let hook = nextHook();
let ref = hook !== null ? hook.memoizedState : {current: initialValue};
hookLog.push({
primitive: 'Ref',
stackError: new Error(),
value: ref.current,
});
return ref;
}
function useLayoutEffect(
create: () => (() => void) | void,
inputs: Array<mixed> | void | null,
): void {
nextHook();
hookLog.push({
primitive: 'LayoutEffect',
stackError: new Error(),
value: create,
});
}
function useEffect(
create: () => (() => void) | void,
inputs: Array<mixed> | void | null,
): void {
nextHook();
hookLog.push({primitive: 'Effect', stackError: new Error(), value: create});
}
function useImperativeHandle<T>(
ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
create: () => T,
inputs: Array<mixed> | void | null,
): void {
nextHook();
// We don't actually store the instance anywhere if there is no ref callback
// and if there is a ref callback it might not store it but if it does we
// have no way of knowing where. So let's only enable introspection of the
// ref itself if it is using the object form.
let instance = undefined;
if (ref !== null && typeof ref === 'object') {
instance = ref.current;
}
hookLog.push({
primitive: 'ImperativeHandle',
stackError: new Error(),
value: instance,
});
}
function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
hookLog.push({
primitive: 'DebugValue',
stackError: new Error(),
value: typeof formatterFn === 'function' ? formatterFn(value) : value,
});
}
function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
let hook = nextHook();
hookLog.push({
primitive: 'Callback',
stackError: new Error(),
value: hook !== null ? hook.memoizedState[0] : callback,
});
return callback;
}
function useMemo<T>(
nextCreate: () => T,
inputs: Array<mixed> | void | null,
): T {
let hook = nextHook();
let value = hook !== null ? hook.memoizedState[0] : nextCreate();
hookLog.push({primitive: 'Memo', stackError: new Error(), value});
return value;
}
const Dispatcher: DispatcherType = {
readContext,
useCallback,
useContext,
useEffect,
useImperativeHandle,
useDebugValue,
useLayoutEffect,
useMemo,
useReducer,
useRef,
useState,
};
// Inspect
type HooksNode = {
name: string,
value: mixed,
subHooks: Array<HooksNode>,
};
type HooksTree = Array<HooksNode>;
// Don't assume
//
// We can't assume that stack frames are nth steps away from anything.
// E.g. we can't assume that the root call shares all frames with the stack
// of a hook call. A simple way to demonstrate this is wrapping `new Error()`
// in a wrapper constructor like a polyfill. That'll add an extra frame.
// Similar things can happen with the call to the dispatcher. The top frame
// may not be the primitive. Likewise the primitive can have fewer stack frames
// such as when a call to useState got inlined to use dispatcher.useState.
//
// We also can't assume that the last frame of the root call is the same
// frame as the last frame of the hook call because long stack traces can be
// truncated to a stack trace limit.
let mostLikelyAncestorIndex = 0;
function findSharedIndex(hookStack, rootStack, rootIndex) {
let source = rootStack[rootIndex].source;
hookSearch: for (let i = 0; i < hookStack.length; i++) {
if (hookStack[i].source === source) {
// This looks like a match. Validate that the rest of both stack match up.
for (
let a = rootIndex + 1, b = i + 1;
a < rootStack.length && b < hookStack.length;
a++, b++
) {
if (hookStack[b].source !== rootStack[a].source) {
// If not, give up and try a different match.
continue hookSearch;
}
}
return i;
}
}
return -1;
}
function findCommonAncestorIndex(rootStack, hookStack) {
let rootIndex = findSharedIndex(
hookStack,
rootStack,
mostLikelyAncestorIndex,
);
if (rootIndex !== -1) {
return rootIndex;
}
// If the most likely one wasn't a hit, try any other frame to see if it is shared.
// If that takes more than 5 frames, something probably went wrong.
for (let i = 0; i < rootStack.length && i < 5; i++) {
rootIndex = findSharedIndex(hookStack, rootStack, i);
if (rootIndex !== -1) {
mostLikelyAncestorIndex = i;
return rootIndex;
}
}
return -1;
}
function isReactWrapper(functionName, primitiveName) {
if (!functionName) {
return false;
}
let expectedPrimitiveName = 'use' + primitiveName;
if (functionName.length < expectedPrimitiveName.length) {
return false;
}
return (
functionName.lastIndexOf(expectedPrimitiveName) ===
functionName.length - expectedPrimitiveName.length
);
}
function findPrimitiveIndex(hookStack, hook) {
let stackCache = getPrimitiveStackCache();
let primitiveStack = stackCache.get(hook.primitive);
if (primitiveStack === undefined) {
return -1;
}
for (let i = 0; i < primitiveStack.length && i < hookStack.length; i++) {
if (primitiveStack[i].source !== hookStack[i].source) {
// If the next two frames are functions called `useX` then we assume that they're part of the
// wrappers that the React packager or other packages adds around the dispatcher.
if (
i < hookStack.length - 1 &&
isReactWrapper(hookStack[i].functionName, hook.primitive)
) {
i++;
}
if (
i < hookStack.length - 1 &&
isReactWrapper(hookStack[i].functionName, hook.primitive)
) {
i++;
}
return i;
}
}
return -1;
}
function parseTrimmedStack(rootStack, hook) {
// Get the stack trace between the primitive hook function and
// the root function call. I.e. the stack frames of custom hooks.
let hookStack = ErrorStackParser.parse(hook.stackError);
let rootIndex = findCommonAncestorIndex(rootStack, hookStack);
let primitiveIndex = findPrimitiveIndex(hookStack, hook);
if (
rootIndex === -1 ||
primitiveIndex === -1 ||
rootIndex - primitiveIndex < 2
) {
// Something went wrong. Give up.
return null;
}
return hookStack.slice(primitiveIndex, rootIndex - 1);
}
function parseCustomHookName(functionName: void | string): string {
if (!functionName) {
return '';
}
let startIndex = functionName.lastIndexOf('.');
if (startIndex === -1) {
startIndex = 0;
}
if (functionName.substr(startIndex, 3) === 'use') {
startIndex += 3;
}
return functionName.substr(startIndex);
}
function buildTree(rootStack, readHookLog): HooksTree {
let rootChildren = [];
let prevStack = null;
let levelChildren = rootChildren;
let stackOfChildren = [];
for (let i = 0; i < readHookLog.length; i++) {
let hook = readHookLog[i];
let stack = parseTrimmedStack(rootStack, hook);
if (stack !== null) {
// Note: The indices 0 <= n < length-1 will contain the names.
// The indices 1 <= n < length will contain the source locations.
// That's why we get the name from n - 1 and don't check the source
// of index 0.
let commonSteps = 0;
if (prevStack !== null) {
// Compare the current level's stack to the new stack.
while (commonSteps < stack.length && commonSteps < prevStack.length) {
let stackSource = stack[stack.length - commonSteps - 1].source;
let prevSource = prevStack[prevStack.length - commonSteps - 1].source;
if (stackSource !== prevSource) {
break;
}
commonSteps++;
}
// Pop back the stack as many steps as were not common.
for (let j = prevStack.length - 1; j > commonSteps; j--) {
levelChildren = stackOfChildren.pop();
}
}
// The remaining part of the new stack are custom hooks. Push them
// to the tree.
for (let j = stack.length - commonSteps - 1; j >= 1; j--) {
let children = [];
levelChildren.push({
name: parseCustomHookName(stack[j - 1].functionName),
value: undefined,
subHooks: children,
});
stackOfChildren.push(levelChildren);
levelChildren = children;
}
prevStack = stack;
}
levelChildren.push({
name: hook.primitive,
value: hook.value,
subHooks: [],
});
}
// Associate custom hook values (useDebugValue() hook entries) with the correct hooks.
processDebugValues(rootChildren, null);
return rootChildren;
}
// Custom hooks support user-configurable labels (via the special useDebugValue() hook).
// That hook adds user-provided values to the hooks tree,
// but these values aren't intended to appear alongside of the other hooks.
// Instead they should be attributed to their parent custom hook.
// This method walks the tree and assigns debug values to their custom hook owners.
function processDebugValues(
hooksTree: HooksTree,
parentHooksNode: HooksNode | null,
): void {
let debugValueHooksNodes: Array<HooksNode> = [];
for (let i = 0; i < hooksTree.length; i++) {
const hooksNode = hooksTree[i];
if (hooksNode.name === 'DebugValue' && hooksNode.subHooks.length === 0) {
hooksTree.splice(i, 1);
i--;
debugValueHooksNodes.push(hooksNode);
} else {
processDebugValues(hooksNode.subHooks, hooksNode);
}
}
// Bubble debug value labels to their custom hook owner.
// If there is no parent hook, just ignore them for now.
// (We may warn about this in the future.)
if (parentHooksNode !== null) {
if (debugValueHooksNodes.length === 1) {
parentHooksNode.value = debugValueHooksNodes[0].value;
} else if (debugValueHooksNodes.length > 1) {
parentHooksNode.value = debugValueHooksNodes.map(({value}) => value);
}
}
}
export function inspectHooks<Props>(
renderFunction: Props => React$Node,
props: Props,
currentDispatcher: ?CurrentDispatcherRef,
): HooksTree {
// DevTools will pass the current renderer's injected dispatcher.
// Other apps might compile debug hooks as part of their app though.
if (currentDispatcher == null) {
currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
}
let previousDispatcher = currentDispatcher.current;
let readHookLog;
currentDispatcher.current = Dispatcher;
let ancestorStackError;
try {
ancestorStackError = new Error();
renderFunction(props);
} finally {
readHookLog = hookLog;
hookLog = [];
currentDispatcher.current = previousDispatcher;
}
let rootStack = ErrorStackParser.parse(ancestorStackError);
return buildTree(rootStack, readHookLog);
}
function setupContexts(contextMap: Map<ReactContext<any>, any>, fiber: Fiber) {
let current = fiber;
while (current) {
if (current.tag === ContextProvider) {
const providerType: ReactProviderType<any> = current.type;
const context: ReactContext<any> = providerType._context;
if (!contextMap.has(context)) {
// Store the current value that we're going to restore later.
contextMap.set(context, context._currentValue);
// Set the inner most provider value on the context.
context._currentValue = current.memoizedProps.value;
}
}
current = current.return;
}
}
function restoreContexts(contextMap: Map<ReactContext<any>, any>) {
contextMap.forEach((value, context) => (context._currentValue = value));
}
function inspectHooksOfForwardRef<Props, Ref>(
renderFunction: (Props, Ref) => React$Node,
props: Props,
ref: Ref,
currentDispatcher: CurrentDispatcherRef,
): HooksTree {
let previousDispatcher = currentDispatcher.current;
let readHookLog;
currentDispatcher.current = Dispatcher;
let ancestorStackError;
try {
ancestorStackError = new Error();
renderFunction(props, ref);
} finally {
readHookLog = hookLog;
hookLog = [];
currentDispatcher.current = previousDispatcher;
}
let rootStack = ErrorStackParser.parse(ancestorStackError);
return buildTree(rootStack, readHookLog);
}
function resolveDefaultProps(Component, baseProps) {
if (Component && Component.defaultProps) {
// Resolve default props. Taken from ReactElement
const props = Object.assign({}, baseProps);
const defaultProps = Component.defaultProps;
for (let propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
return props;
}
return baseProps;
}
export function inspectHooksOfFiber(
fiber: Fiber,
currentDispatcher: ?CurrentDispatcherRef,
) {
// DevTools will pass the current renderer's injected dispatcher.
// Other apps might compile debug hooks as part of their app though.
if (currentDispatcher == null) {
currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
}
if (
fiber.tag !== FunctionComponent &&
fiber.tag !== SimpleMemoComponent &&
fiber.tag !== ForwardRef
) {
throw new Error(
'Unknown Fiber. Needs to be a function component to inspect hooks.',
);
}
// Warm up the cache so that it doesn't consume the currentHook.
getPrimitiveStackCache();
let type = fiber.type;
let props = fiber.memoizedProps;
if (type !== fiber.elementType) {
props = resolveDefaultProps(type, props);
}
// Set up the current hook so that we can step through and read the
// current state from them.
currentHook = (fiber.memoizedState: Hook);
let contextMap = new Map();
try {
setupContexts(contextMap, fiber);
if (fiber.tag === ForwardRef) {
return inspectHooksOfForwardRef(
type.render,
props,
fiber.ref,
currentDispatcher,
);
}
return inspectHooks(type, props, currentDispatcher);
} finally {
currentHook = null;
restoreContexts(contextMap);
}
}

View File

@@ -0,0 +1,12 @@
/**
* 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 {inspectHooks, inspectHooksOfFiber} from './ReactDebugHooks';
export {inspectHooks, inspectHooksOfFiber};

View File

@@ -0,0 +1,280 @@
/**
* 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.
*
* @emails react-core
* @jest-environment node
*/
'use strict';
let React;
let ReactDebugTools;
describe('ReactHooksInspection', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDebugTools = require('react-debug-tools');
});
it('should inspect a simple useState hook', () => {
function Foo(props) {
let [state] = React.useState('hello world');
return <div>{state}</div>;
}
let tree = ReactDebugTools.inspectHooks(Foo, {});
expect(tree).toEqual([
{
name: 'State',
value: 'hello world',
subHooks: [],
},
]);
});
it('should inspect a simple custom hook', () => {
function useCustom(value) {
let [state] = React.useState(value);
React.useDebugValue('custom hook label');
return state;
}
function Foo(props) {
let value = useCustom('hello world');
return <div>{value}</div>;
}
let tree = ReactDebugTools.inspectHooks(Foo, {});
expect(tree).toEqual([
{
name: 'Custom',
value: __DEV__ ? 'custom hook label' : undefined,
subHooks: [
{
name: 'State',
value: 'hello world',
subHooks: [],
},
],
},
]);
});
it('should inspect a tree of multiple hooks', () => {
function effect() {}
function useCustom(value) {
let [state] = React.useState(value);
React.useEffect(effect);
return state;
}
function Foo(props) {
let value1 = useCustom('hello');
let value2 = useCustom('world');
return (
<div>
{value1} {value2}
</div>
);
}
let tree = ReactDebugTools.inspectHooks(Foo, {});
expect(tree).toEqual([
{
name: 'Custom',
value: undefined,
subHooks: [
{
name: 'State',
subHooks: [],
value: 'hello',
},
{
name: 'Effect',
subHooks: [],
value: effect,
},
],
},
{
name: 'Custom',
value: undefined,
subHooks: [
{
name: 'State',
value: 'world',
subHooks: [],
},
{
name: 'Effect',
value: effect,
subHooks: [],
},
],
},
]);
});
it('should inspect a tree of multiple levels of hooks', () => {
function effect() {}
function useCustom(value) {
let [state] = React.useReducer((s, a) => s, value);
React.useEffect(effect);
return state;
}
function useBar(value) {
let result = useCustom(value);
React.useLayoutEffect(effect);
return result;
}
function useBaz(value) {
React.useLayoutEffect(effect);
let result = useCustom(value);
return result;
}
function Foo(props) {
let value1 = useBar('hello');
let value2 = useBaz('world');
return (
<div>
{value1} {value2}
</div>
);
}
let tree = ReactDebugTools.inspectHooks(Foo, {});
expect(tree).toEqual([
{
name: 'Bar',
value: undefined,
subHooks: [
{
name: 'Custom',
value: undefined,
subHooks: [
{
name: 'Reducer',
value: 'hello',
subHooks: [],
},
{
name: 'Effect',
value: effect,
subHooks: [],
},
],
},
{
name: 'LayoutEffect',
value: effect,
subHooks: [],
},
],
},
{
name: 'Baz',
value: undefined,
subHooks: [
{
name: 'LayoutEffect',
value: effect,
subHooks: [],
},
{
name: 'Custom',
subHooks: [
{
name: 'Reducer',
subHooks: [],
value: 'world',
},
{
name: 'Effect',
subHooks: [],
value: effect,
},
],
value: undefined,
},
],
},
]);
});
it('should inspect the default value using the useContext hook', () => {
let MyContext = React.createContext('default');
function Foo(props) {
let value = React.useContext(MyContext);
return <div>{value}</div>;
}
let tree = ReactDebugTools.inspectHooks(Foo, {});
expect(tree).toEqual([
{
name: 'Context',
value: 'default',
subHooks: [],
},
]);
});
it('should support an injected dispatcher', () => {
function Foo(props) {
let [state] = React.useState('hello world');
return <div>{state}</div>;
}
let initial = {};
let current = initial;
let getterCalls = 0;
let setterCalls = [];
let FakeDispatcherRef = {
get current() {
getterCalls++;
return current;
},
set current(value) {
setterCalls.push(value);
current = value;
},
};
expect(() => {
ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
}).toThrow(
'Hooks can only be called inside the body of a function component.',
);
expect(getterCalls).toBe(1);
expect(setterCalls).toHaveLength(2);
expect(setterCalls[0]).not.toBe(initial);
expect(setterCalls[1]).toBe(initial);
});
describe('useDebugValue', () => {
it('should be ignored when called outside of a custom hook', () => {
function Foo(props) {
React.useDebugValue('this is invalid');
return null;
}
let tree = ReactDebugTools.inspectHooks(Foo, {});
expect(tree).toHaveLength(0);
});
it('should support an optional formatter function param', () => {
function useCustom() {
React.useDebugValue({bar: 123}, object => `bar:${object.bar}`);
React.useState(0);
}
function Foo(props) {
useCustom();
return null;
}
let tree = ReactDebugTools.inspectHooks(Foo, {});
expect(tree).toEqual([
{
name: 'Custom',
value: __DEV__ ? 'bar:123' : undefined,
subHooks: [{name: 'State', subHooks: [], value: 0}],
},
]);
});
});
});

View File

@@ -0,0 +1,430 @@
/**
* 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.
*
* @emails react-core
* @jest-environment node
*/
'use strict';
let React;
let ReactTestRenderer;
let ReactDebugTools;
let act;
describe('ReactHooksInspectionIntegration', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactTestRenderer = require('react-test-renderer');
act = ReactTestRenderer.act;
ReactDebugTools = require('react-debug-tools');
});
it('should inspect the current state of useState hooks', () => {
let useState = React.useState;
function Foo(props) {
let [state1, setState1] = useState('hello');
let [state2, setState2] = useState('world');
return (
<div onMouseDown={setState1} onMouseUp={setState2}>
{state1} {state2}
</div>
);
}
let renderer = ReactTestRenderer.create(<Foo prop="prop" />);
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{name: 'State', value: 'hello', subHooks: []},
{name: 'State', value: 'world', subHooks: []},
]);
let {
onMouseDown: setStateA,
onMouseUp: setStateB,
} = renderer.root.findByType('div').props;
act(() => setStateA('Hi'));
childFiber = renderer.root.findByType(Foo)._currentFiber();
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{name: 'State', value: 'Hi', subHooks: []},
{name: 'State', value: 'world', subHooks: []},
]);
act(() => setStateB('world!'));
childFiber = renderer.root.findByType(Foo)._currentFiber();
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{name: 'State', value: 'Hi', subHooks: []},
{name: 'State', value: 'world!', subHooks: []},
]);
});
it('should inspect the current state of all stateful hooks', () => {
let outsideRef = React.createRef();
function effect() {}
function Foo(props) {
let [state1, setState] = React.useState('a');
let [state2, dispatch] = React.useReducer((s, a) => a.value, 'b');
let ref = React.useRef('c');
React.useLayoutEffect(effect);
React.useEffect(effect);
React.useImperativeHandle(
outsideRef,
() => {
// Return a function so that jest treats them as non-equal.
return function Instance() {};
},
[],
);
React.useMemo(() => state1 + state2, [state1]);
function update() {
act(() => {
setState('A');
});
act(() => {
dispatch({value: 'B'});
});
ref.current = 'C';
}
let memoizedUpdate = React.useCallback(update, []);
return (
<div onClick={memoizedUpdate}>
{state1} {state2}
</div>
);
}
let renderer = ReactTestRenderer.create(<Foo prop="prop" />);
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let {onClick: updateStates} = renderer.root.findByType('div').props;
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{name: 'State', value: 'a', subHooks: []},
{name: 'Reducer', value: 'b', subHooks: []},
{name: 'Ref', value: 'c', subHooks: []},
{name: 'LayoutEffect', value: effect, subHooks: []},
{name: 'Effect', value: effect, subHooks: []},
{name: 'ImperativeHandle', value: outsideRef.current, subHooks: []},
{name: 'Memo', value: 'ab', subHooks: []},
{name: 'Callback', value: updateStates, subHooks: []},
]);
updateStates();
childFiber = renderer.root.findByType(Foo)._currentFiber();
tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{name: 'State', value: 'A', subHooks: []},
{name: 'Reducer', value: 'B', subHooks: []},
{name: 'Ref', value: 'C', subHooks: []},
{name: 'LayoutEffect', value: effect, subHooks: []},
{name: 'Effect', value: effect, subHooks: []},
{name: 'ImperativeHandle', value: outsideRef.current, subHooks: []},
{name: 'Memo', value: 'Ab', subHooks: []},
{name: 'Callback', value: updateStates, subHooks: []},
]);
});
it('should inspect the value of the current provider in useContext', () => {
let MyContext = React.createContext('default');
function Foo(props) {
let value = React.useContext(MyContext);
return <div>{value}</div>;
}
let renderer = ReactTestRenderer.create(
<MyContext.Provider value="contextual">
<Foo prop="prop" />
</MyContext.Provider>,
);
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
name: 'Context',
value: 'contextual',
subHooks: [],
},
]);
});
it('should inspect forwardRef', () => {
let obj = function() {};
let Foo = React.forwardRef(function(props, ref) {
React.useImperativeHandle(ref, () => obj);
return <div />;
});
let ref = React.createRef();
let renderer = ReactTestRenderer.create(<Foo ref={ref} />);
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{name: 'ImperativeHandle', value: obj, subHooks: []},
]);
});
it('should inspect memo', () => {
function InnerFoo(props) {
let [value] = React.useState('hello');
return <div>{value}</div>;
}
let Foo = React.memo(InnerFoo);
let renderer = ReactTestRenderer.create(<Foo />);
// TODO: Test renderer findByType is broken for memo. Have to search for the inner.
let childFiber = renderer.root.findByType(InnerFoo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([{name: 'State', value: 'hello', subHooks: []}]);
});
it('should inspect custom hooks', () => {
function useCustom() {
let [value] = React.useState('hello');
return value;
}
function Foo(props) {
let value = useCustom();
return <div>{value}</div>;
}
let renderer = ReactTestRenderer.create(<Foo />);
let childFiber = renderer.root.findByType(Foo)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
name: 'Custom',
value: undefined,
subHooks: [{name: 'State', value: 'hello', subHooks: []}],
},
]);
});
describe('useDebugValue', () => {
it('should support inspectable values for multiple custom hooks', () => {
function useLabeledValue(label) {
let [value] = React.useState(label);
React.useDebugValue(`custom label ${label}`);
return value;
}
function useAnonymous(label) {
let [value] = React.useState(label);
return value;
}
function Example() {
useLabeledValue('a');
React.useState('b');
useAnonymous('c');
useLabeledValue('d');
return null;
}
let renderer = ReactTestRenderer.create(<Example />);
let childFiber = renderer.root.findByType(Example)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
name: 'LabeledValue',
value: __DEV__ ? 'custom label a' : undefined,
subHooks: [{name: 'State', value: 'a', subHooks: []}],
},
{
name: 'State',
value: 'b',
subHooks: [],
},
{
name: 'Anonymous',
value: undefined,
subHooks: [{name: 'State', value: 'c', subHooks: []}],
},
{
name: 'LabeledValue',
value: __DEV__ ? 'custom label d' : undefined,
subHooks: [{name: 'State', value: 'd', subHooks: []}],
},
]);
});
it('should support inspectable values for nested custom hooks', () => {
function useInner() {
React.useDebugValue('inner');
React.useState(0);
}
function useOuter() {
React.useDebugValue('outer');
useInner();
}
function Example() {
useOuter();
return null;
}
let renderer = ReactTestRenderer.create(<Example />);
let childFiber = renderer.root.findByType(Example)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
name: 'Outer',
value: __DEV__ ? 'outer' : undefined,
subHooks: [
{
name: 'Inner',
value: __DEV__ ? 'inner' : undefined,
subHooks: [{name: 'State', value: 0, subHooks: []}],
},
],
},
]);
});
it('should support multiple inspectable values per custom hooks', () => {
function useMultiLabelCustom() {
React.useDebugValue('one');
React.useDebugValue('two');
React.useDebugValue('three');
React.useState(0);
}
function useSingleLabelCustom(value) {
React.useDebugValue(`single ${value}`);
React.useState(0);
}
function Example() {
useSingleLabelCustom('one');
useMultiLabelCustom();
useSingleLabelCustom('two');
return null;
}
let renderer = ReactTestRenderer.create(<Example />);
let childFiber = renderer.root.findByType(Example)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
name: 'SingleLabelCustom',
value: __DEV__ ? 'single one' : undefined,
subHooks: [{name: 'State', value: 0, subHooks: []}],
},
{
name: 'MultiLabelCustom',
value: __DEV__ ? ['one', 'two', 'three'] : undefined,
subHooks: [{name: 'State', value: 0, subHooks: []}],
},
{
name: 'SingleLabelCustom',
value: __DEV__ ? 'single two' : undefined,
subHooks: [{name: 'State', value: 0, subHooks: []}],
},
]);
});
it('should ignore useDebugValue() made outside of a custom hook', () => {
function Example() {
React.useDebugValue('this is invalid');
return null;
}
let renderer = ReactTestRenderer.create(<Example />);
let childFiber = renderer.root.findByType(Example)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toHaveLength(0);
});
it('should support an optional formatter function param', () => {
function useCustom() {
React.useDebugValue({bar: 123}, object => `bar:${object.bar}`);
React.useState(0);
}
function Example() {
useCustom();
return null;
}
let renderer = ReactTestRenderer.create(<Example />);
let childFiber = renderer.root.findByType(Example)._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
{
name: 'Custom',
value: __DEV__ ? 'bar:123' : undefined,
subHooks: [{name: 'State', subHooks: [], value: 0}],
},
]);
});
});
it('should support defaultProps and lazy', async () => {
let Suspense = React.Suspense;
function Foo(props) {
let [value] = React.useState(props.defaultValue.substr(0, 3));
return <div>{value}</div>;
}
Foo.defaultProps = {
defaultValue: 'default',
};
async function fakeImport(result) {
return {default: result};
}
let LazyFoo = React.lazy(() => fakeImport(Foo));
let renderer = ReactTestRenderer.create(
<Suspense fallback="Loading...">
<LazyFoo />
</Suspense>,
);
await LazyFoo;
let childFiber = renderer.root._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([{name: 'State', value: 'def', subHooks: []}]);
});
it('should support an injected dispatcher', () => {
function Foo(props) {
let [state] = React.useState('hello world');
return <div>{state}</div>;
}
let initial = {};
let current = initial;
let getterCalls = 0;
let setterCalls = [];
let FakeDispatcherRef = {
get current() {
getterCalls++;
return current;
},
set current(value) {
setterCalls.push(value);
current = value;
},
};
let renderer = ReactTestRenderer.create(<Foo />);
let childFiber = renderer.root._currentFiber();
expect(() => {
ReactDebugTools.inspectHooksOfFiber(childFiber, FakeDispatcherRef);
}).toThrow(
'Hooks can only be called inside the body of a function component.',
);
expect(getterCalls).toBe(1);
expect(setterCalls).toHaveLength(2);
expect(setterCalls[0]).not.toBe(initial);
expect(setterCalls[1]).toBe(initial);
});
});

View File

@@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-dom-unstable-fizz.browser.production.min.js');
} else {
module.exports = require('./cjs/react-dom-unstable-fizz.browser.development.js');
}

View File

@@ -0,0 +1,3 @@
'use strict';
module.exports = require('./unstable-fizz.node');

View File

@@ -0,0 +1,7 @@
'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-dom-unstable-fizz.node.production.min.js');
} else {
module.exports = require('./cjs/react-dom-unstable-fizz.node.development.js');
}

View File

@@ -1,9 +1,13 @@
{
"name": "react-dom",
"version": "16.6.0-alpha.0",
"version": "16.8.0",
"description": "React package for working with the DOM.",
"main": "index.js",
"repository": "facebook/react",
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-dom"
},
"keywords": [
"react"
],
@@ -16,26 +20,32 @@
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"schedule": "^0.5.0-alpha.0"
"scheduler": "^0.13.0"
},
"peerDependencies": {
"react": "^16.0.0 || 16.6.0-alpha.0"
"react": "^16.0.0"
},
"files": [
"LICENSE",
"README.md",
"build-info.json",
"index.js",
"profiling.js",
"server.js",
"server.browser.js",
"server.node.js",
"test-utils.js",
"unstable-fire.js",
"unstable-fizz.js",
"unstable-fizz.browser.js",
"unstable-fizz.node.js",
"unstable-native-dependencies.js",
"cjs/",
"umd/"
],
"browser": {
"./server.js": "./server.browser.js"
"./server.js": "./server.browser.js",
"./unstable-fizz.js": "./unstable-fizz.browser.js"
},
"browserify": {
"transform": [

Some files were not shown because too many files have changed in this diff Show More