Compare commits

..

130 Commits

Author SHA1 Message Date
Sophie Alpert
4c67be212d Fix lint after automated replacements 2018-10-20 00:33:18 -07:00
Sophie Alpert
93e0bdf2ee Remove unnecessary comparisons
Ran these, then prettier, then these again.

```
codemod --accept-all -d packages -m '\(\s*([a-zA-Z.]+) === NoWork\s*\|\|\s*\1 (>=?) ([a-zA-Z.]+)\s*\)' '(\1 \2 \3)'
codemod --accept-all -d packages -m '\(\s*([a-zA-Z.]+) === NoWork\s*\|\|\s*([a-zA-Z.]+) (<=?) \1\s*\)' '(\2 \3 \1)'

codemod --accept-all -d packages -m '(?<![.\w])([a-zA-Z.]+) !== NoWork\s*&&\s*\1 (<) ([a-zA-Z.]+)' '\1 \2 \3'
codemod --accept-all -d packages -m '(?<![.\w])([a-zA-Z.]+) !== NoWork\s*&&\s*([a-zA-Z.]+) (>) \1' '\2 \3 \1'

codemod --accept-all -d packages -m '(?<![.\w])([a-zA-Z.]+) === NoWork\s*\|\|\s*\1 (>=?) ([a-zA-Z.]+)\s*\?\s' '\1 \2 \3 ? '
codemod --accept-all -d packages -m '(?<![.\w])([a-zA-Z.]+) === NoWork\s*\|\|\s*([a-zA-Z.]+) (<=?) \1\s*\?\s' '\2 \3 \1 ? '
```
2018-10-20 00:31:21 -07:00
Sophie Alpert
a684f09e58 Make NoWork big instead of small 2018-10-20 00:16:42 -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
Brian Vaughn
42d12317a7 Update bundle sizes for 16.6.0-alpha.0 release 2018-09-17 15:05:46 -07:00
Brian Vaughn
21ceb19ea0 Update error codes for 16.6.0-alpha.0 release 2018-09-17 15:05:46 -07:00
Brian Vaughn
489614c4fc Updating dependencies for react-noop-renderer 2018-09-17 14:59:57 -07:00
Brian Vaughn
351c9015c8 Updating package versions for release 16.6.0-alpha.0 2018-09-17 14:59:57 -07:00
Dan Abramov
a210b5b440 Revert "Do not bind topLevelType to dispatch" (#13674)
* Revert "Do not bind topLevelType to dispatch (#13618)"

This reverts commit 0c9c591bfb.
2018-09-17 18:43:16 +01:00
Sam Kvale
2f54a0467b docs(changelog): Fix misspelling (#13663)
dangerouslySetInnerHTML was misspelled dangerousSetInnerHTML
2018-09-15 08:16:58 -07:00
Alexey Raspopov
1d8a75fef0 remove flow typings from Schedule.js (#13662) 2018-09-15 03:55:23 +01:00
Nathan Hunzaker
d92114b98e Resubmit: Fix updateWrapper causing re-render textarea, even though their data (#13643)
* fix updateWrapper causing re-render textarea, even though their data has not changed

* fix updateWrapper causing re-render textarea, even though their data, prettier-all

* minor changes to updateWrapper, add test
2018-09-14 16:09:07 -07:00
Nathan Hunzaker
0c9c591bfb Do not bind topLevelType to dispatch (#13618)
* Do not bind topLevelType to dispatch

A previous change made it such that all top level event types
correspond to their associated native event string values. This commit
eliminates the .bind attached to dispatch and fixes a related flow
type.

* Add note about why casting event.type to a topLevelType is safe

* Move interactiveUpdates comment to point of assignment
2018-09-14 16:08:37 -07:00
Andrew Clark
9f819a5ea9 [schedule] Refactor Schedule, remove React-isms (#13582)
* Refactor Schedule, remove React-isms

Once the API stabilizes, we will move Schedule this into a separate
repo. To promote adoption, especially by projects outside the React
ecosystem, we'll remove all React-isms from the source and keep it as
simple as possible:

- No build step.
- No static types.
- Everything is in a single file.

If we end up needing to support multiple targets, like CommonJS and ESM,
we can still avoid a build step by maintaining two copies of the same
file, but with different exports.

This commit also refactors the implementation to split out the DOM-
specific parts (essentially a requestIdleCallback polyfill). Aside from
the architectural benefits, this also makes it possible to write host-
agnostic tests. If/when we publish a version of Schedule that targets
other environments, like React Native, we can run these same tests
across all implementations.

* Edits in response to Dan's PR feedback
2018-09-14 14:05:55 -07:00
Jérôme Steunou
9c961c0a27 Fix some iframe edge cases (#13650)
Should fix #13648 by fallback on `window` when `document.defaultView` does not exists anymore
2018-09-14 16:44:14 +01:00
Brian Vaughn
8bc0bcabe7 Add UMD production+profiling entry points (#13642)
* Added UMD_PROFILING type to react-dom and scheduling package. Added UMD shim to schedule package.
* Added new schedule umd prod+prof bundle to API test
2018-09-13 17:44:08 -07:00
Heaven
b488a5d9c5 Fix test comment typo (#13568) 2018-09-13 17:33:16 -07:00
Brian Vaughn
4bcee56210 Rename "tracking" API to "tracing" (#13641)
* Replaced "tracking" with "tracing" in all directory and file names
* Global rename of track/tracking/tracked to trace/tracing/traced
2018-09-13 14:23:16 -07:00
Dan Abramov
9a6c5ba72d Fix packaging fixtures 2018-09-13 19:31:18 +01:00
Dan Abramov
72217d0819 Update bundle sizes for 16.5.1 release 2018-09-13 19:31:18 +01:00
Dan Abramov
cc66a1aa23 Update error codes for 16.5.1 release 2018-09-13 19:31:18 +01:00
Dan Abramov
8b93a60c5e Updating package versions for release 16.5.1 2018-09-13 19:31:18 +01:00
Dan Abramov
7a5eecc073 Add 16.5.1 changelog (#13638) 2018-09-13 19:31:00 +01:00
Andres Rojas
ecbf7af40b Enhance dev warnings for forwardRef render function (#13627) (#13636)
* Enhance dev warnings for forwardRef render function

- For 0 parameters: Do not warn because it may be due to usage of the
  arguments object.

- For 1 parameter: Warn about missing the 'ref' parameter.

- For 2 parameters: This is the ideal. Do not warn.

- For more than 2 parameters: Warn about undefined parameters.

* Make test cases for forwardRef warnings more realistic

* Add period to warning sentence
2018-09-13 16:12:34 +01:00
Dan Abramov
2282400850 Delete TapEventPlugin (#13630) 2018-09-12 19:53:29 +01:00
Nathan Hunzaker
a079011f95 🔥 Stop syncing the value attribute on inputs (behind a feature flag) (#13526)
* 🔥 Stop syncing the value attribute on inputs

* Eliminate some additional checks

* Remove initialValue and initialWrapper from wrapperState flow type

* Update tests with new sync logic, reduce some operations

* Update tests, add some caveats for SSR mismatches

* Revert newline change

* Remove unused type

* Call toString to safely type string values

* Add disableInputAttributeSyncing feature flag

Reverts tests to original state, adds attribute sync feature flag,
then moves all affected tests to ReactFire-test.js.

* Revert position of types in toStringValues

* Invert flag on number input blur

* Add clarification why double blur is necessary

* Update ReactFire number cases to be more explicite about blur

* Move comments to reduce diff size

* Add comments to clarify behavior in each branch

* There is no need to assign a different checked behavior in Fire

* Use checked reference

* Format

* Avoid precomputing stringable values

* Revert getToStringValue comment

* Revert placement of undefined in getToStringValue

* Do not eagerly stringify value

* Unify Fire test cases with normal ones

* Revert toString change. Only assign unsynced values when not nully
2018-09-12 19:29:23 +01:00
Dan Abramov
a7bd7c3c04 Allow reading default feature flags from bundle tests (#13629) 2018-09-12 16:56:04 +01:00
Dan Abramov
7204b636ee Run tests for Fire feature flags (#13628)
* Run tests for Fire feature flags

* Only run ReactDOM tests for Fire
2018-09-12 16:17:36 +01:00
Dan Abramov
d3bbfe09cc Fix IE version in comment 2018-09-12 15:10:28 +01:00
Aliaksandr Manzhula
1b2646a403 Fix warning without stack for ie9 (#13620)
* Fix warning without stack for ie9

Where console methods like log, error etc. don't have 'apply' method.
Because of the lot of tests already expect that exactly console['method']
will be called - had to reapply references for console.error method

https://github.com/facebook/react/issues/13610

* pass parameters explicitly to avoid using .apply
which is not supported for console methods in ie9

* Minor tweaks
2018-09-12 15:09:57 +01:00
Héctor Ramos
dde0645fcf Switch to @sizebot token (#13622) 2018-09-11 21:06:44 +01:00
Evan Jacobs
e49f3ca08e honor displayName set on ForwardRef if available (#13615)
* add failing test

* honor displayName set on ForwardRef if available

Since React.forwardRef returns a component object, some users
(including styled-components and react-native) are starting to
decorate them with various statics including displayName.

This adjusts React's various name-getters to honor this if set and
surface the name in warnings and hopefully DevTools.

* fix typing

* Refine later
2018-09-11 20:19:54 +01:00
Nathan Hunzaker
f6fb03edff Hydration DOM Fixture (#13521)
* Add home component. Async load fixtures.

This commit adds a homepage to the DOM fixtures that includes browser
testing information and asynchronously loads fixtures.

This should make it easier to find DOM testing information and keep
the payload size in check as we add more components to the fixtures.

* Adds experimental hydration fixture

This commit adds a first pass at a fixture that makes it easier to
debug the process of hydrating static markup. This is not complete:

1. It needs to be verified across multiple browsers
2. It needs to render with the current version of react

Still, it at least demonstrates the idea. A fixture like this will
also be helpful for debugging change events for hydrated inputs, which
presently do not fire if the user changes an input's text before
hydration.

* Tweak select width

* Manually join extra attributes in warning

This prevents a bug where Chrome reports `Array(n)` where `n` is the
size of the array.

* Transform with buble

* Eliminate dependencies

* Pull in react-live for better editing

* Handle encoding errors, pass react version

* Load the correct version of React

* Tweaks

* Revert style change

* Revert warning update

* Properly handle script errors. Fix dom-server CDN loading

* Fix 15.x releases

* Use postMessage to reduce latency, support older browsers

This commit makes a few tweaks to support older browsers and updates
the code transition process to use window.postMessage. This avoids
loading React on every single change.

* Fix fixture renamespacing bug

* Gracefully fallback to textarea in React 14

* Replace buble with babel, react-live with codemirror

* Simplify layout to resolve production code-mirror issues

* Tweak height rules for code-mirror

* Update theme to paraiso

* Format Code.js

* Adjust viewport to fix CodeMirror resize issue in production build

* Eliminate react-code-mirror

* Improve error state. Make full stack collapsable

* Add link to license in codemirror stylesheet

* Make code example more concise

* Replace "Hydrate" with "Auto-hydrate" for clarity

* Remove border below hydration header

* Rename query function in render.js

* Use Function(code) to evaluate hydration fixture

For clarity, and so that the Fixture component does not need to be
assigned to the window, this commit changes the way code is executed
such that it evaluates using a Function constructor.

* Extend hydration fixture to fill width. Design adjustments

This commit extends the hydration fixture such that it takes up the
full screen view. To accomplish this, the container that wraps all
fixtures has been moved to the FixtureSet component, utilized by all
other fixtures.

* Improve error scroll state

* Lazy load CodeMirror together before executing

This commit fixes an issue where CodeMirror wouldn't layout correctly
in production builds because the editor executes before the stylesheet
loaded. CodeMirror needs layout information, and was rendering
off-screen without correct CSS layout measurements.

* Fix indentation on error message

* Do not highlight errors from Babel. Add setPrototypeOf polyfill

This commit fixes an error in Safari 7.1 where Chalk highlighted Babel
errors caused a crash when setPrototypeOf was called within the
library.

This is also an issue on IE9, however this fix does not resolve issues
in that browser.

* Increase resilience to bad errors in Hydration fixture

- Reverts highlighting change. Polyfilling Safari 7.1 is sufficient
- Do not render a details tag in IE9
2018-09-10 14:04:14 -07:00
Brian Vaughn
54bfab5d6d Release script updates private package dependencies also (#13612) 2018-09-10 13:14:34 -07:00
Brian Vaughn
ade5e69288 Manually update schedule dep in react-native-renderer (#13609) 2018-09-10 11:07:08 -07:00
Dan Abramov
f260b14a8f Fix host bailout for the persistent mode (#13611)
* Add regression test for persistent bailout bug

* Fork more logic into updateHostComponent

This is mostly copy paste. But I added a bailout only to mutation mode. Persistent mode doesn't have that props equality bailout anymore, so the Fabric test now passes.

* Add failing test for persistence host minimalism

* Add bailouts to the persistent host updates
2018-09-10 19:05:40 +01:00
Dan Abramov
4a40d76245 Fix a regression related to isReactComponent prototype check (#13608) 2018-09-10 17:54:45 +01:00
Brian Vaughn
03ab1efeb4 Improve DX when combining react-dom/profiling and schedule/tracking (#13605)
* Added blessed production+profiling entry point for schedule/tracking
* Add invariant when profiling renderer is used with non-profiling schedule/tracking
2018-09-10 08:32:56 -07:00
Dan Abramov
144328fe81 Enable no-use-before-define rule (#13606) 2018-09-10 16:15:18 +01:00
Dan
8a8d973d3c Use clearer wording
Fixes #13604
2018-09-09 16:54:31 +01:00
Brandon Dail
7d1169b2d7 Remove injectComponentTree from unstable-native-dependencies, add EventPluginHub (#13598)
* Remove injectComponentTree from unstable-native-dependencies, add
EventPluginHub

injectComponentTree was exposed for react-native-web, but wasn't
actually being used by the project. They were using EventPluginHub
through ReactDOM's secret internals, but that was removed in https://github.com/facebook/react/pull/13539

This removes the unused injectComponentTree export, refactors the
ResponderEventPlugin test so it doesn't depend on it, and also adds
EventPluginHub to the exports to unbreak react-native-web

* Re-export injectEventPluginsByName from ReactDOM internals
2018-09-08 12:07:59 -07:00
Nathan Hunzaker
8d1038fc6d Break up ReactDOMServerIntegrationForm-test (#13600)
In https://github.com/facebook/react/pull/13394, I encountered an
issue where the ReactDOMServerIntegrationForm test suite consumed
sufficient memory to crash CircleCI. Breaking up this test suite by
form element type resolved the issue.

This commit performs that change separate from the Symbol/Function
stringification changes in #13394.
2018-09-08 11:31:32 -07:00
Héctor Ramos
b87aabdfe1 Drop the year from Facebook copyright headers and the LICENSE file. (#13593) 2018-09-07 15:11:23 -07:00
Ali Torki
12f3a5475f chore: remove duplicate **when** (#13587) 2018-09-07 07:52:31 -10:00
Nish
c6dcf46d65 Build schedule which is required for time slicing demo (#13588)
* Build schedule which is required for time slicing demo

* Update suspense demo README too

* Update README.md

* Update README.md

* Update README.md
2018-09-07 17:11:19 +01:00
Brian Vaughn
7bcc0778fd Fixed small CHANGELOG error (#13583) 2018-09-06 18:03:58 -07:00
Brian Vaughn
d66505dbc7 Updated 16.5 changelog 2018-09-06 12:59:22 -07:00
Timothy Yung
e417e0bf7c Update ReactNativeViewConfigRegistry Flow Types (#13579) 2018-09-06 12:27:44 -07:00
Brian Vaughn
8f45a685be Add 2fa OTP code to npm dist-tag command too 2018-09-06 09:49:42 -07:00
631 changed files with 17273 additions and 7635 deletions

View File

@@ -37,6 +37,7 @@ module.exports = {
'no-shadow': ERROR,
'no-unused-expressions': ERROR,
'no-unused-vars': [ERROR, {args: 'none'}],
'no-use-before-define': [ERROR, {functions: false, variables: false}],
'no-useless-concat': OFF,
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
'space-before-blocks': ERROR,

View File

@@ -7,12 +7,44 @@
</details>
## 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
* Improve the warning when `React.forwardRef` receives an unexpected number of arguments. ([@andresroberto](https://github.com/andresroberto) in [#13636](https://github.com/facebook/react/issues/13636))
### React DOM
* Fix a regression in unstable exports used by React Native Web. ([@aweary](https://github.com/aweary) in [#13598](https://github.com/facebook/react/issues/13598))
* Fix a crash when component defines a method called `isReactComponent`. ([@gaearon](https://github.com/gaearon) in [#13608](https://github.com/facebook/react/issues/13608))
* Fix a crash in development mode in IE9 when printing a warning. ([@link-alex](https://github.com/link-alex) in [#13620](https://github.com/facebook/react/issues/13620))
* Provide a better error message when running `react-dom/profiling` with `schedule/tracking`. ([@bvaughn](https://github.com/bvaughn) in [#13605](https://github.com/facebook/react/issues/13605))
* If a `ForwardRef` component defines a `displayName`, use it in warnings. ([@probablyup](https://github.com/probablyup) in [#13615](https://github.com/facebook/react/issues/13615))
### Schedule (Experimental)
* Add a separate profiling entry point at `schedule/tracking-profiling`. ([@bvaughn](https://github.com/bvaughn) in [#13605](https://github.com/facebook/react/issues/13605))
## 16.5.0 (September 5, 2018)
### React
* Add a warning if `React.forwardRef` render function doesn't take exactly two arguments ([@bvaughn](https://github.com/bvaughn) in [#13168](https://github.com/facebook/react/issues/13168))
* Improve the error message when passing an element to `createElement` by mistake ([@DCtheTall](https://github.com/DCtheTall) in [#13131](https://github.com/facebook/react/issues/13131))
* Don't call profiler `onRender` until after mutations ([@bvaughn](https://github.com/bvaughn) in [#13572](https://github.com/facebook/react/issues/13572))
### React DOM
@@ -23,12 +55,12 @@
* Add `tangentialPressure` and `twist` fields to pointer events ([@motiz88](https://github.com/motiz88) in [#13374](https://github.com/facebook/react/issues/13374))
* Minimally support iframes (nested browsing contexts) in selection event handling ([@acusti](https://github.com/acusti) in [#12037](https://github.com/facebook/react/issues/12037))
* Support passing booleans to the `focusable` SVG attribute ([@gaearon](https://github.com/gaearon) in [#13339](https://github.com/facebook/react/issues/13339))
* Ignore `<noscript>` on the client when when hydrating ([@Ephem](https://github.com/Ephem) in [#13537](https://github.com/facebook/react/issues/13537))
* Ignore `<noscript>` on the client when hydrating ([@Ephem](https://github.com/Ephem) in [#13537](https://github.com/facebook/react/issues/13537))
* Fix `gridArea` to be treated as a unitless CSS property ([@mgol](https://github.com/mgol) in [#13550](https://github.com/facebook/react/issues/13550))
* Fix incorrect data in `compositionend` event when typing Korean on IE11 ([@robbertbrak](https://github.com/robbertbrak) in [#10217](https://github.com/facebook/react/issues/10217))
* 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 `dangerousSetInnerHTML` 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))

View File

@@ -1,6 +1,6 @@
MIT License
Copyright (c) 2013-present, Facebook, Inc.
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -10,6 +10,7 @@ coverage
build
public/react.development.js
public/react-dom.development.js
public/react-dom-server.browser.development.js
# misc
.DS_Store

View File

@@ -6,7 +6,9 @@
"react-scripts": "^1.0.11"
},
"dependencies": {
"@babel/standalone": "^7.0.0",
"classnames": "^2.2.5",
"codemirror": "^5.40.0",
"core-js": "^2.4.1",
"prop-types": "^15.6.0",
"query-string": "^4.2.3",
@@ -16,7 +18,7 @@
},
"scripts": {
"start": "react-scripts start",
"prestart": "cp ../../build/dist/react.development.js public/ && cp ../../build/dist/react-dom.development.js public/",
"prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react-dom-server.browser.development.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

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Renderer</title>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
font-family: sans-serif;
margin: 0;
height: 100%;
}
body {
padding-top: 32px;
}
#status {
font-size: 12px;
left: 8px;
letter-spacing: 0.05em;
line-height: 16px;
margin: -8px 0 0;
max-width: 50%;
overflow: hidden;
position: absolute;
text-align: left;
text-overflow: ellipsis;
top: 50%;
white-space: nowrap;
width: 100%;
}
#output {
margin: 16px;
}
.header {
background: white;
border-bottom: 1px solid #d9d9d9;
padding: 4px;
top: 0;
left: 0;
position: fixed;
width: 100%;
text-align: right;
}
.controls {
display: inline-block;
margin: 0;
}
.button {
background: #eee;
border-radius: 2px;
border: 1px solid #aaa;
font-size: 11px;
padding: 4px 6px;
text-transform: uppercase;
}
</style>
</head>
<body>
<header class="header">
<p id="status">Loading</p>
<menu class="controls">
<button class="button" id="hydrate">Hydrate</button>
<button class="button" id="reload">Reload</button>
</menu>
</header>
<div id="output"></div>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="renderer.js"></script>
</body>
</html>

View File

@@ -0,0 +1,141 @@
/**
* Supports render.html, a piece of the hydration fixture. See /hydration
*/
'use strict';
(function() {
var Fixture = null;
var output = document.getElementById('output');
var status = document.getElementById('status');
var hydrate = document.getElementById('hydrate');
var reload = document.getElementById('reload');
var renders = 0;
var failed = false;
function getQueryParam(key) {
var pattern = new RegExp(key + '=([^&]+)(&|$)');
var matches = window.location.search.match(pattern);
if (matches) {
return decodeURIComponent(matches[1]);
}
handleError(new Error('No key found for' + key));
}
function getBooleanQueryParam(key) {
return getQueryParam(key) === 'true';
}
function setStatus(label) {
status.innerHTML = label;
}
function prerender() {
setStatus('Generating markup');
output.innerHTML = ReactDOMServer.renderToString(
React.createElement(Fixture)
);
setStatus('Markup only (No React)');
}
function render() {
setStatus('Hydrating');
if (ReactDOM.hydrate) {
ReactDOM.hydrate(React.createElement(Fixture), output);
} else {
ReactDOM.render(React.createElement(Fixture), output);
}
setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
renders += 1;
hydrate.innerHTML = 'Re-render';
}
function handleError(error) {
console.log(error);
failed = true;
setStatus('Javascript Error');
output.innerHTML = error;
}
function loadScript(src) {
return new Promise(function(resolve, reject) {
var script = document.createElement('script');
script.async = true;
script.src = src;
script.onload = resolve;
script.onerror = function(error) {
reject(new Error('Unable to load ' + src));
};
document.body.appendChild(script);
});
}
function injectFixture(src) {
Fixture = new Function(src + '\nreturn Fixture;')();
if (typeof Fixture === 'undefined') {
setStatus('Failed');
output.innerHTML = 'Please name your root component "Fixture"';
} else {
prerender();
if (getBooleanQueryParam('hydrate')) {
render();
}
}
}
function reloadFixture(code) {
renders = 0;
ReactDOM.unmountComponentAtNode(output);
injectFixture(code);
}
window.onerror = handleError;
reload.onclick = function() {
window.location.reload();
};
hydrate.onclick = render;
loadScript(getQueryParam('reactPath'))
.then(function() {
return getBooleanQueryParam('needsReactDOM')
? loadScript(getQueryParam('reactDOMPath'))
: null;
})
.then(function() {
return loadScript(getQueryParam('reactDOMServerPath'));
})
.then(function() {
if (failed) {
return;
}
window.addEventListener('message', function(event) {
var data = JSON.parse(event.data);
switch (data.type) {
case 'code':
reloadFixture(data.payload);
break;
default:
throw new Error(
'Renderer Error: Unrecognized message "' + data.type + '"'
);
}
});
window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');
})
.catch(handleError);
})();

View File

@@ -8,9 +8,7 @@ function App() {
return (
<div>
<Header />
<div className="container">
<Fixtures />
</div>
<Fixtures />
</div>
);
}

View File

@@ -11,7 +11,7 @@ class FixtureSet extends React.Component {
const {title, description, children} = this.props;
return (
<div>
<div className="container">
<h1>{title}</h1>
{description && <p>{description}</p>}

View File

@@ -48,7 +48,8 @@ class Header extends React.Component {
<select
value={window.location.pathname}
onChange={this.handleFixtureChange}>
<option value="/">Select a Fixture</option>
<option value="/">Home</option>
<option value="/hydration">Hydration</option>
<option value="/range-inputs">Range Inputs</option>
<option value="/text-inputs">Text Inputs</option>
<option value="/number-inputs">Number Input</option>
@@ -67,6 +68,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

@@ -2,7 +2,7 @@ const React = window.React;
export default function Home() {
return (
<main>
<main className="container">
<h1>DOM Test Fixtures</h1>
<p>
Use this site to test browser quirks and other behavior that can not be

View File

@@ -0,0 +1,85 @@
const React = window.React;
export class CodeEditor extends React.Component {
shouldComponentUpdate() {
return false;
}
componentDidMount() {
// Important: CodeMirror incorrectly lays out the editor
// if it executes before CSS has loaded
// https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
Promise.all([
import('codemirror'),
import('codemirror/mode/jsx/jsx'),
import('codemirror/lib/codemirror.css'),
import('./codemirror-paraiso-dark.css'),
]).then(([CodeMirror]) => this.install(CodeMirror));
}
install(CodeMirror) {
if (!this.textarea) {
return;
}
const {onChange} = this.props;
this.editor = CodeMirror.fromTextArea(this.textarea, {
mode: 'jsx',
theme: 'paraiso-dark',
lineNumbers: true,
});
this.editor.on('change', function(doc) {
onChange(doc.getValue());
});
}
componentWillUnmount() {
if (this.editor) {
this.editor.toTextArea();
}
}
render() {
return (
<textarea
ref={ref => (this.textarea = ref)}
defaultValue={this.props.code}
autoComplete="off"
hidden={true}
/>
);
}
}
/**
* Prevent IE9 from raising an error on an unrecognized element:
* See https://github.com/facebook/react/issues/13610
*/
const supportsDetails = !(
document.createElement('details') instanceof HTMLUnknownElement
);
export class CodeError extends React.Component {
render() {
const {error, className} = this.props;
if (!error) {
return null;
}
if (supportsDetails) {
const [summary, ...body] = error.message.split(/\n+/g);
return (
<details className={className}>
<summary>{summary}</summary>
{body.join('\n')}
</details>
);
}
return <div className={className}>{error.message}</div>;
}
}

View File

@@ -0,0 +1,18 @@
/**
* Babel works across all browsers, however it requires many polyfills.
*/
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/number';
import 'core-js/es6/string';
import 'core-js/es6/array';
import 'core-js/modules/es6.object.set-prototype-of';
import {transform} from '@babel/standalone';
const presets = ['es2015', 'stage-3', 'react'];
export function compile(raw) {
return transform(raw, {presets}).code;
}

View File

@@ -0,0 +1,38 @@
/**
* Name: Paraíso (Dark)
* Author: Jan T. Sott
* License: Creative Commons Attribution-ShareAlike 4.0 Unported License.
* https://creativecommons.org/licenses/by-sa/4.0/deed.en_US
*
* Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
* Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
*/
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
.cm-s-paraiso-dark div.CodeMirror-selected { background: #41323f; }
.cm-s-paraiso-dark .CodeMirror-line::selection, .cm-s-paraiso-dark .CodeMirror-line > span::selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::selection { background: rgba(65, 50, 63, .99); }
.cm-s-paraiso-dark .CodeMirror-line::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(65, 50, 63, .99); }
.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
.cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
.cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
.cm-s-paraiso-dark .CodeMirror-linenumber { color: #776e71; }
.cm-s-paraiso-dark .CodeMirror-cursor { border-left: 1px solid #8d8687; }
.cm-s-paraiso-dark span.cm-comment { color: #e96ba8; }
.cm-s-paraiso-dark span.cm-atom { color: #815ba4; }
.cm-s-paraiso-dark span.cm-number { color: #815ba4; }
.cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute { color: #48b685; }
.cm-s-paraiso-dark span.cm-keyword { color: #ef6155; }
.cm-s-paraiso-dark span.cm-string { color: #fec418; }
.cm-s-paraiso-dark span.cm-variable { color: #48b685; }
.cm-s-paraiso-dark span.cm-variable-2 { color: #06b6ef; }
.cm-s-paraiso-dark span.cm-def { color: #f99b15; }
.cm-s-paraiso-dark span.cm-bracket { color: #b9b6b0; }
.cm-s-paraiso-dark span.cm-tag { color: #ef6155; }
.cm-s-paraiso-dark span.cm-link { color: #815ba4; }
.cm-s-paraiso-dark span.cm-error { background: #ef6155; color: #8d8687; }
.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
.cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

View File

@@ -0,0 +1,22 @@
export const SAMPLE_CODE = `
class Fixture extends React.Component {
state = {
value: 'asdf'
}
onChange(event) {
this.setState({ value: event.target.value });
}
render() {
const { value } = this.state;
return (
<form>
<input value={value} onChange={this.onChange.bind(this)} />
<p>Value: {value}</p>
</form>
);
}
}
`.trim();

View File

@@ -0,0 +1,68 @@
.hydration {
background: #2f1e2e;
margin: 0;
position: relative;
height: calc(100vh - 40px); /* height of header */
overflow: auto;
padding-top: 32px;
}
.hydration-options {
background: #171717;
border-top: 1px dashed rgba(215, 235, 255, 0.12);
color: #def5ff;
height: 32px;
line-height: 28px;
padding: 0 8px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.hydration-options label {
font-size: 13px;
}
.hydration-options input[type=checkbox] {
display: inline-block;
margin-right: 4px;
vertical-align: middle;
}
.hydration .CodeMirror {
font-size: 13px;
padding-top: 8px;
padding-bottom: 68px;
height: calc(100vh - 72px);
width: 55%;
}
.hydration-sandbox {
background: white;
border-radius: 2px;
border: 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.54);
height: calc(100% - 34px);
position: absolute;
right: 16px;
top: 16px;
width: calc(45% - 24px);
}
.hydration-code-error {
background: #df3f3f;
border-radius: 2px;
bottom: 18px;
color: white;
font-family: monospace;
font-size: 13px;
left: 16px;
line-height: 1.25;
overflow: auto;
padding: 12px;
position: fixed;
white-space: pre;
max-width: calc(55% - 26px);
z-index: 10;
}

View File

@@ -0,0 +1,109 @@
import './hydration.css';
import {SAMPLE_CODE} from './data';
import {CodeEditor, CodeError} from './Code';
import {compile} from './code-transformer';
import {reactPaths} from '../../../react-loader';
import qs from 'query-string';
const React = window.React;
class Hydration extends React.Component {
state = {
error: null,
code: SAMPLE_CODE,
hydrate: true,
};
ready = false;
componentDidMount() {
window.addEventListener('message', this.handleMessage);
}
componentWillUnmount() {
window.removeEventListener('message', this.handleMessage);
}
handleMessage = event => {
var data = JSON.parse(event.data);
switch (data.type) {
case 'ready':
this.ready = true;
this.injectCode();
break;
default:
throw new Error(
'Editor Error: Unrecognized message "' + data.type + '"'
);
}
};
injectCode = () => {
try {
this.send({
type: 'code',
payload: compile(this.state.code),
});
this.setState({error: null});
} catch (error) {
this.setState({error});
}
};
send = message => {
if (this.ready) {
this.frame.contentWindow.postMessage(JSON.stringify(message), '*');
}
};
setFrame = frame => {
this.frame = frame;
};
setCode = code => {
this.setState({code}, this.injectCode);
};
setCheckbox = event => {
this.setState({
[event.target.name]: event.target.checked,
});
};
render() {
const {code, error, hydrate} = this.state;
const src = '/renderer.html?' + qs.stringify({hydrate, ...reactPaths()});
return (
<div className="hydration">
<header className="hydration-options">
<label htmlFor="hydrate">
<input
id="hydrate"
name="hydrate"
type="checkbox"
checked={hydrate}
onChange={this.setCheckbox}
/>
Auto-Hydrate
</label>
</header>
<CodeEditor code={code} onChange={this.setCode} />
<CodeError error={error} className="hydration-code-error" />
<iframe
ref={this.setFrame}
className="hydration-sandbox"
title="Hydration Preview"
src={src}
/>
</div>
);
}
}
export default Hydration;

View File

@@ -1,3 +1,5 @@
import FixtureSet from '../../FixtureSet';
const React = window.React;
class RangeInputs extends React.Component {
@@ -7,22 +9,26 @@ class RangeInputs extends React.Component {
};
render() {
return (
<form>
<fieldset>
<legend>Controlled</legend>
<input
type="range"
value={this.state.value}
onChange={this.onChange}
/>
<span className="hint">Value: {this.state.value}</span>
</fieldset>
<FixtureSet
title="Range Inputs"
description="Note: Range inputs are not supported in IE9.">
<form>
<fieldset>
<legend>Controlled</legend>
<input
type="range"
value={this.state.value}
onChange={this.onChange}
/>
<span className="hint">Value: {this.state.value}</span>
</fieldset>
<fieldset>
<legend>Uncontrolled</legend>
<input type="range" defaultValue={0.5} />
</fieldset>
</form>
<fieldset>
<legend>Uncontrolled</legend>
<input type="range" defaultValue={0.5} />
</fieldset>
</form>
</FixtureSet>
);
}
}

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.unstable_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

@@ -1,3 +1,4 @@
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
import 'core-js/es6/set';
import 'core-js/es6/map';

View File

@@ -36,9 +36,10 @@ function loadScript(src) {
});
}
export default function loadReact() {
let REACT_PATH = 'react.development.js';
let DOM_PATH = 'react-dom.development.js';
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';
@@ -49,25 +50,37 @@ export default function loadReact() {
// The file structure was updated in 16. This wasn't the case for alphas.
// Load the old module location for anything less than 16 RC
if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
REACT_PATH =
reactPath =
'https://unpkg.com/react@' + version + '/umd/react.development.js';
DOM_PATH =
reactDOMPath =
'https://unpkg.com/react-dom@' +
version +
'/umd/react-dom.development.js';
reactDOMServerPath =
'https://unpkg.com/react-dom@' +
version +
'/umd/react-dom-server.browser.development';
} else {
REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.js';
DOM_PATH =
reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
reactDOMPath =
'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
reactDOMServerPath =
'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
}
}
const needsReactDOM = version === 'local' || parseFloat(version, 10) > 0.13;
let request = loadScript(REACT_PATH);
return {reactPath, reactDOMPath, reactDOMServerPath, needsReactDOM};
}
export default function loadReact() {
const {reactPath, reactDOMPath, needsReactDOM} = reactPaths();
let request = loadScript(reactPath);
if (needsReactDOM) {
request = request.then(() => loadScript(DOM_PATH));
request = request.then(() => loadScript(reactDOMPath));
} else {
// Aliasing React to ReactDOM for compatibility.
request = request.then(() => {

View File

@@ -79,7 +79,6 @@ textarea {
.header {
background: #171717;
box-shadow: inset 0 -1px 3px #000;
overflow: hidden;
padding: 8px;
}
@@ -102,7 +101,6 @@ textarea {
.header__inner {
display: table;
margin: 0 auto;
max-width: 1000px;
overflow: hidden;
text-align: center;
width: 100%;

View File

@@ -2,6 +2,10 @@
# yarn lockfile v1
"@babel/standalone@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.0.0.tgz#856446641620c1c5f0ca775621d478324ebd1f52"
abab@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -1556,6 +1560,10 @@ code-point-at@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
codemirror@^5.40.0:
version "5.40.0"
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.40.0.tgz#2f5ed47366e514f41349ba0fe34daaa39be4e257"
color-convert@^1.3.0:
version "1.8.2"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.8.2.tgz#be868184d7c8631766d54e7078e2672d7c7e3339"

View File

@@ -42,51 +42,51 @@
</div>
<div class="frame">
<h2>browserify (dev)</h2>
<iframe src="/fixtures/packaging/browserify/dev/index.html"></iframe>
<iframe src="/fixtures/packaging/browserify/dev/"></iframe>
</div>
<div class="frame">
<h2>browserify (prod)</h2>
<iframe src="/fixtures/packaging/browserify/prod/index.html"></iframe>
<iframe src="/fixtures/packaging/browserify/prod/"></iframe>
</div>
<div class="frame">
<h2>brunch (dev)</h2>
<iframe src="/fixtures/packaging/brunch/dev/index.html"></iframe>
<iframe src="/fixtures/packaging/brunch/dev/"></iframe>
</div>
<div class="frame">
<h2>brunch (prod)</h2>
<iframe src="/fixtures/packaging/brunch/prod/index.html"></iframe>
<iframe src="/fixtures/packaging/brunch/prod/"></iframe>
</div>
<div class="frame">
<h2>rjs (dev)</h2>
<iframe src="/fixtures/packaging/rjs/dev/index.html"></iframe>
<iframe src="/fixtures/packaging/rjs/dev/"></iframe>
</div>
<div class="frame">
<h2>rjs (prod)</h2>
<iframe src="/fixtures/packaging/rjs/prod/index.html"></iframe>
<iframe src="/fixtures/packaging/rjs/prod/"></iframe>
</div>
<div class="frame">
<h2>systemjs-builder (dev)</h2>
<iframe src="/fixtures/packaging/systemjs-builder/dev/index.html"></iframe>
<iframe src="/fixtures/packaging/systemjs-builder/dev/"></iframe>
</div>
<div class="frame">
<h2>systemjs-builder (prod)</h2>
<iframe src="/fixtures/packaging/systemjs-builder/prod/index.html"></iframe>
<iframe src="/fixtures/packaging/systemjs-builder/prod/"></iframe>
</div>
<div class="frame">
<h2>webpack (dev)</h2>
<iframe src="/fixtures/packaging/webpack/dev/index.html"></iframe>
<iframe src="/fixtures/packaging/webpack/dev/"></iframe>
</div>
<div class="frame">
<h2>webpack (prod)</h2>
<iframe src="/fixtures/packaging/webpack/prod/index.html"></iframe>
<iframe src="/fixtures/packaging/webpack/prod/"></iframe>
</div>
<div class="frame">
<h2>webpack-alias (dev)</h2>
<iframe src="/fixtures/packaging/webpack-alias/dev/index.html"></iframe>
<iframe src="/fixtures/packaging/webpack-alias/dev/"></iframe>
</div>
<div class="frame">
<h2>webpack-alias (prod)</h2>
<iframe src="/fixtures/packaging/webpack-alias/prod/index.html"></iframe>
<iframe src="/fixtures/packaging/webpack-alias/prod/"></iframe>
</div>
</body>
</html>

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,94 @@
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 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.
<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>
</ol>
<script src="../../build/dist/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_scheduleCallback: scheduleCallback,
unstable_cancelCallback: cancelCallback,
unstable_now: now
} = Schedule;
} = Scheduler;
function displayTestResult(testNumber) {
const expectationNode = document.getElementById('test-' + testNumber + '-expected');
const resultNode = document.getElementById('test-' + testNumber);
@@ -495,4 +498,4 @@ function runTestSeven() {
}
</script type="text/babel">
</body>
</html>
</html>

View File

@@ -2,7 +2,7 @@
<html style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>Test tracking UMD</title>
<title>Test tracing UMD</title>
<style>
body {
font-family: sans-serif;
@@ -36,9 +36,9 @@
</style>
</head>
<body>
<h1>Test tracking UMD</h1>
<h1>Test tracing UMD</h1>
<p>
This fixture tests that the new tracking API is accessible via UMD build using the UMD shim.
This fixture tests that the new tracing API is accessible via UMD build using the UMD shim.
It does not exhaustively test API functionality, only that the forwarded methods can be called.
</p>
<p>
@@ -52,19 +52,19 @@
<li id="checkSchedulerAPI" data-value="...">
<strong>Test scheduler API</strong>
</li>
<li id="checkSchedulerTrackingAPI" data-value="...">
<strong>Test tracking API</strong>
<li id="checkSchedulerTracingAPI" data-value="...">
<strong>Test tracing API</strong>
</li>
<li id="checkSchedulerTrackingSubscriptionsAPI" data-value="...">
<strong>Test tracking subscriptions API</strong>
<li id="checkSchedulerTracingSubscriptionsAPI" data-value="...">
<strong>Test tracing subscriptions API</strong>
</li>
<li id="checkEndToEndIntegration" data-value="...">
<strong>Test end-to-end integration</strong>
</li>
</ol>
<!-- Load the tracking 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-tracking.development.js"></script>
<!-- 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="./script.js"></script>

View File

@@ -14,10 +14,10 @@ function runAllTests() {
checkSchedulerAPI();
} finally {
try {
checkSchedulerTrackingAPI();
checkSchedulerTracingAPI();
} finally {
try {
checkSchedulerTrackingSubscriptionsAPI();
checkSchedulerTracingSubscriptionsAPI();
} finally {
checkEndToEndIntegration();
}
@@ -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';
}
@@ -44,23 +44,23 @@ function checkSchedulerAPI() {
});
}
function checkSchedulerTrackingAPI() {
runTest(document.getElementById('checkSchedulerTrackingAPI'), () => {
function checkSchedulerTracingAPI() {
runTest(document.getElementById('checkSchedulerTracingAPI'), () => {
if (
typeof ScheduleTracking === 'undefined' ||
typeof ScheduleTracking.unstable_clear !== 'function' ||
typeof ScheduleTracking.unstable_getCurrent !== 'function' ||
typeof ScheduleTracking.unstable_getThreadID !== 'function' ||
typeof ScheduleTracking.unstable_track !== 'function' ||
typeof ScheduleTracking.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;
ScheduleTracking.unstable_track('test', 123, () => {
interactionsSet = ScheduleTracking.unstable_getCurrent();
SchedulerTracing.unstable_trace('test', 123, () => {
interactionsSet = SchedulerTracing.unstable_getCurrent();
});
if (interactionsSet.size !== 1) {
throw null;
@@ -73,32 +73,32 @@ function checkSchedulerTrackingAPI() {
throw 'API does not work';
}
const ForwardedSchedulerTracking =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ScheduleTracking;
const ForwardedSchedulerTracing =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing;
if (
ScheduleTracking.unstable_getThreadID() ===
ForwardedSchedulerTracking.unstable_getThreadID()
SchedulerTracing.unstable_getThreadID() ===
ForwardedSchedulerTracing.unstable_getThreadID()
) {
throw 'API forwarding is broken';
}
});
}
function checkSchedulerTrackingSubscriptionsAPI() {
function checkSchedulerTracingSubscriptionsAPI() {
runTest(
document.getElementById('checkSchedulerTrackingSubscriptionsAPI'),
document.getElementById('checkSchedulerTracingSubscriptionsAPI'),
() => {
if (
typeof ScheduleTracking === 'undefined' ||
typeof ScheduleTracking.unstable_subscribe !== 'function' ||
typeof ScheduleTracking.unstable_unsubscribe !== 'function'
typeof SchedulerTracing === 'undefined' ||
typeof SchedulerTracing.unstable_subscribe !== 'function' ||
typeof SchedulerTracing.unstable_unsubscribe !== 'function'
) {
throw 'API is not defined';
}
const onInteractionScheduledWorkCompletedCalls = [];
const onInteractionTrackedCalls = [];
const onInteractionTracedCalls = [];
const onWorkCanceledCalls = [];
const onWorkScheduledCalls = [];
const onWorkStartedCalls = [];
@@ -106,7 +106,7 @@ function checkSchedulerTrackingSubscriptionsAPI() {
const subscriber = {
onInteractionScheduledWorkCompleted: (...args) =>
onInteractionScheduledWorkCompletedCalls.push(args),
onInteractionTracked: (...args) => onInteractionTrackedCalls.push(args),
onInteractionTraced: (...args) => onInteractionTracedCalls.push(args),
onWorkCanceled: (...args) => onWorkCanceledCalls.push(args),
onWorkScheduled: (...args) => onWorkScheduledCalls.push(args),
onWorkStarted: (...args) => onWorkStartedCalls.push(args),
@@ -114,38 +114,38 @@ function checkSchedulerTrackingSubscriptionsAPI() {
};
try {
ScheduleTracking.unstable_subscribe(subscriber);
ScheduleTracking.unstable_track('foo', 123, () => {});
ScheduleTracking.unstable_unsubscribe(subscriber);
if (onInteractionTrackedCalls.length !== 1) {
SchedulerTracing.unstable_subscribe(subscriber);
SchedulerTracing.unstable_trace('foo', 123, () => {});
SchedulerTracing.unstable_unsubscribe(subscriber);
if (onInteractionTracedCalls.length !== 1) {
throw null;
}
const interaction = onInteractionTrackedCalls[0][0];
const interaction = onInteractionTracedCalls[0][0];
if (interaction.name !== 'foo' || interaction.timestamp !== 123) {
throw null;
}
ScheduleTracking.unstable_track('bar', 456, () => {});
if (onInteractionTrackedCalls.length !== 1) {
SchedulerTracing.unstable_trace('bar', 456, () => {});
if (onInteractionTracedCalls.length !== 1) {
throw null;
}
} catch (error) {
throw 'API does not forward methods';
}
const ForwardedSchedulerTracking =
const ForwardedSchedulerTracing =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
.ScheduleTracking;
.SchedulerTracing;
try {
ForwardedSchedulerTracking.unstable_subscribe(subscriber);
ScheduleTracking.unstable_track('foo', 123, () => {});
ForwardedSchedulerTracking.unstable_track('bar', 456, () => {});
ScheduleTracking.unstable_unsubscribe(subscriber);
if (onInteractionTrackedCalls.length !== 3) {
ForwardedSchedulerTracing.unstable_subscribe(subscriber);
SchedulerTracing.unstable_trace('foo', 123, () => {});
ForwardedSchedulerTracing.unstable_trace('bar', 456, () => {});
SchedulerTracing.unstable_unsubscribe(subscriber);
if (onInteractionTracedCalls.length !== 3) {
throw null;
}
const interactionFoo = onInteractionTrackedCalls[1][0];
const interactionBar = onInteractionTrackedCalls[2][0];
const interactionFoo = onInteractionTracedCalls[1][0];
const interactionBar = onInteractionTracedCalls[2][0];
if (
interactionFoo.name !== 'foo' ||
interactionFoo.timestamp !== 123 ||
@@ -154,8 +154,8 @@ function checkSchedulerTrackingSubscriptionsAPI() {
) {
throw null;
}
ForwardedSchedulerTracking.unstable_track('baz', 789, () => {});
if (onInteractionTrackedCalls.length !== 3) {
ForwardedSchedulerTracing.unstable_trace('baz', 789, () => {});
if (onInteractionTracedCalls.length !== 3) {
throw null;
}
} catch (error) {
@@ -172,7 +172,7 @@ function checkEndToEndIntegration() {
const onRender = (...args) => onRenderCalls.push(args);
const container = document.createElement('div');
ScheduleTracking.unstable_track('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,core,interaction,simple-cache-provider --type=NODE
yarn build dom-client,core,react-cache,scheduler --type=NODE
# 2: Install fixture dependencies
cd fixtures/unstable-async/suspense/

View File

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

View File

@@ -1,20 +1,13 @@
import React, {Placeholder, PureComponent} from 'react';
import {unstable_scheduleWork} from 'schedule';
import React, {lazy, unstable_Suspense as Suspense, PureComponent} from 'react';
import {unstable_scheduleCallback} from 'scheduler';
import {
unstable_track as track,
unstable_trace as trace,
unstable_wrap as wrap,
} from 'schedule/tracking';
import {createResource} from 'simple-cache-provider';
import {cache} from '../cache';
} 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 = {
@@ -32,15 +25,15 @@ export default class App extends PureComponent {
}
handleUserClick = id => {
track(`View ${id}`, performance.now(), () => {
track(`View ${id} (high-pri)`, performance.now(), () =>
trace(`View ${id}`, performance.now(), () => {
trace(`View ${id} (high-pri)`, performance.now(), () =>
this.setState({
currentId: id,
})
);
unstable_scheduleWork(
unstable_scheduleCallback(
wrap(() =>
track(`View ${id} (low-pri)`, performance.now(), () =>
trace(`View ${id} (low-pri)`, performance.now(), () =>
this.setState({
showDetail: true,
})
@@ -51,7 +44,7 @@ export default class App extends PureComponent {
};
handleBackClick = () =>
track('View list', performance.now(), () =>
trace('View list', performance.now(), () =>
this.setState({
currentId: null,
showDetail: false,
@@ -76,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,5 +1,5 @@
import React, {Fragment} from 'react';
import {createResource} from 'simple-cache-provider';
import {createResource} from 'react-cache';
import {cache} from '../cache';
import Spinner from './Spinner';
import {fetchCoreContributorListJSON} from '../api';

View File

@@ -1,5 +1,5 @@
import React, {Placeholder} from 'react';
import {createResource} from 'simple-cache-provider';
import React, {unstable_Suspense as Suspense} from 'react';
import {createResource} from 'react-cache';
import Spinner from './Spinner';
import {cache} from '../cache';
import {fetchUserProfileJSON, fetchUserRepositoriesListJSON} from '../api';
@@ -14,9 +14,9 @@ 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>
);
}
@@ -118,7 +118,7 @@ function Img({src, 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,7 +128,7 @@ function UserPicture({source}) {
borderRadius: '0.5rem',
}}
/>
</Placeholder>
</Suspense>
);
}

View File

@@ -1,6 +1,6 @@
import React, {Fragment, PureComponent} from 'react';
import {unstable_createRoot, render} from 'react-dom';
import {unstable_track as track} from 'schedule/tracking';
import {unstable_trace as trace} from 'scheduler/tracing';
import {cache} from './cache';
import {
setFakeRequestTime,
@@ -65,7 +65,7 @@ class Debugger extends PureComponent {
}
handleReset = () => {
track('Clear cache', () => {
trace('Clear cache', () => {
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,core,interaction,simple-cache-provider --type=NODE
yarn build dom-client,core,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;
@@ -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

@@ -1,6 +1,6 @@
{
"private": true,
"version": "16.5.0",
"version": "16.6.0-alpha.8af6728",
"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",
@@ -99,7 +99,9 @@
"postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js",
"debug-test": "cross-env NODE_ENV=development node --inspect-brk node_modules/.bin/jest --config ./scripts/jest/config.source.js --runInBand",
"test": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source.js",
"test-fire": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.source-fire.js",
"test-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source.js",
"test-fire-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.source-fire.js",
"test-prod-build": "yarn test-build-prod",
"test-build": "cross-env NODE_ENV=development jest --config ./scripts/jest/config.build.js",
"test-build-prod": "cross-env NODE_ENV=production jest --config ./scripts/jest/config.build.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?

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,7 +1,7 @@
{
"name": "create-subscription",
"description": "utility for subscribing to external data sources inside React components",
"version": "16.5.0",
"version": "16.6.0-alpha.8af6728",
"repository": "facebook/react",
"files": [
"LICENSE",
@@ -10,7 +10,7 @@
"cjs/"
],
"peerDependencies": {
"react": "^16.3.0"
"react": "^16.3.0 || 16.6.0-alpha.8af6728"
},
"devDependencies": {
"rxjs": "^5.5.6"

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2014-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.
@@ -12,12 +12,21 @@
const {HostComponent} = require('shared/ReactWorkTags');
let EventPluginHub;
let EventPluginUtils;
let ResponderEventPlugin;
const touch = function(nodeHandle, i) {
return {target: nodeHandle, identifier: i};
};
function injectComponentTree(ComponentTree) {
EventPluginUtils.setComponentTree(
ComponentTree.getFiberCurrentPropsFromNode,
ComponentTree.getInstanceFromNode,
ComponentTree.getNodeFromInstance,
);
}
/**
* @param {NodeHandle} nodeHandle @see NodeHandle. Handle of target.
* @param {Array<Touch>} touches All active touches.
@@ -395,8 +404,7 @@ describe('ResponderEventPlugin', () => {
const ReactDOMUnstableNativeDependencies = require('react-dom/unstable-native-dependencies');
EventPluginHub = require('events/EventPluginHub');
const injectComponentTree =
ReactDOMUnstableNativeDependencies.injectComponentTree;
EventPluginUtils = require('events/EventPluginUtils');
ResponderEventPlugin =
ReactDOMUnstableNativeDependencies.ResponderEventPlugin;

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2014-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2014-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

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

View File

@@ -1,12 +1,10 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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
*/
'use strict';
export * from './src/SimpleCacheProvider';
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,28 @@
{
"name": "jest-react",
"version": "0.3.0-alpha.8af6728",
"description": "Jest matchers and utilities for testing React components.",
"main": "index.js",
"repository": "facebook/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 || 16.6.0-alpha.8af6728",
"react-test-renderer": "^16.0.0"
},
"files": [
"LICENSE",
"README.md",
"index.js",
"cjs/"
]
}

View File

@@ -0,0 +1,169 @@
/**
* 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).toHaveYielded(...) first.',
);
}
export function toFlushAndYield(root, expectedYields) {
return captureAssertion(() => {
assertYieldsWereCleared(root);
const actualYields = root.unstable_flushAll();
expect(actualYields).toEqual(expectedYields);
});
}
export function toFlushAndYieldThrough(root, expectedYields) {
return captureAssertion(() => {
assertYieldsWereCleared(root);
const actualYields = root.unstable_flushNumberOfYields(
expectedYields.length,
);
expect(actualYields).toEqual(expectedYields);
});
}
export function toFlushWithoutYielding(root) {
return toFlushAndYield(root, []);
}
export function toHaveYielded(ReactTestRenderer, expectedYields) {
return captureAssertion(() => {
if (
ReactTestRenderer === null ||
typeof ReactTestRenderer !== 'object' ||
typeof ReactTestRenderer.unstable_setNowImplementation !== 'function'
) {
invariant(
false,
'The matcher `toHaveYielded` expects an instance of React Test ' +
'Renderer.\n\nTry: ' +
'expect(ReactTestRenderer).toHaveYielded(expectedYields)',
);
}
const actualYields = ReactTestRenderer.unstable_clearYields();
expect(actualYields).toEqual(expectedYields);
});
}
export function toFlushAndThrow(root, ...rest) {
return captureAssertion(() => {
assertYieldsWereCleared(root);
expect(() => {
root.unstable_flushAll();
}).toThrow(...rest);
});
}
export function 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,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,7 +1,7 @@
{
"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.5.0",
"version": "16.6.0-alpha.8af6728",
"main": "index.js",
"repository": "facebook/react",
"keywords": [
@@ -23,10 +23,10 @@
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"schedule": "^0.3.0"
"scheduler": "^0.10.0-alpha.8af6728"
},
"peerDependencies": {
"react": "^16.0.0"
"react": "^16.0.0 || 16.6.0-alpha.8af6728"
},
"files": [
"LICENSE",

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.
@@ -7,9 +7,9 @@
export {
unstable_now as now,
unstable_scheduleWork as scheduleDeferredCallback,
unstable_cancelScheduledWork as cancelDeferredCallback,
} from 'schedule';
unstable_scheduleCallback as scheduleDeferredCallback,
unstable_cancelCallback as cancelDeferredCallback,
} from 'scheduler';
import Transform from 'art/core/transform';
import Mode from 'art/modes/current';
import invariant from 'shared/invariant';
@@ -405,3 +405,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,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

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

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.
@@ -9,4 +9,4 @@
'use strict';
export * from './src/Schedule';
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

@@ -1,7 +1,7 @@
{
"name": "simple-cache-provider",
"name": "react-cache",
"description": "A basic cache for React applications",
"version": "0.8.0",
"version": "16.6.0-alpha.8af6728",
"repository": "facebook/react",
"files": [
"LICENSE",
@@ -10,6 +10,6 @@
"cjs/"
],
"peerDependencies": {
"react": "^16.3.0-alpha.1"
"react": "^16.3.0-alpha.1 || 16.6.0-alpha.8af6728"
}
}

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2014-present, Facebook, Inc.
* 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.
@@ -400,4 +400,4 @@ export function createResource<V, K, H: primitive>(
// Global cache has no eviction policy (except for, ya know, a browser refresh).
const globalCache = createCache(noop);
export const SimpleCache = React.createContext(globalCache);
export const ReactCache = React.createContext(globalCache);

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.
@@ -9,16 +9,16 @@
'use strict';
let SimpleCacheProvider;
let ReactCache;
describe('SimpleCacheProvider', () => {
describe('ReactCache', () => {
beforeEach(() => {
jest.resetModules();
SimpleCacheProvider = require('simple-cache-provider');
ReactCache = require('react-cache');
});
it('throws a promise if the requested value is not in the cache', async () => {
const {createCache, createResource} = SimpleCacheProvider;
const {createCache, createResource} = ReactCache;
function loadUpperCase(text) {
return Promise.resolve(text.toUpperCase());
@@ -39,7 +39,7 @@ describe('SimpleCacheProvider', () => {
});
it('throws an error on the subsequent read if the promise is rejected', async () => {
const {createCache, createResource} = SimpleCacheProvider;
const {createCache, createResource} = ReactCache;
let shouldFail = true;
function loadUpperCase(text) {
@@ -83,7 +83,7 @@ describe('SimpleCacheProvider', () => {
});
it('can preload data ahead of time', async () => {
const {createCache, createResource} = SimpleCacheProvider;
const {createCache, createResource} = ReactCache;
function loadUpperCase(text) {
return Promise.resolve(text.toUpperCase());
@@ -99,7 +99,7 @@ describe('SimpleCacheProvider', () => {
});
it('does not throw if preloaded promise rejects', async () => {
const {createCache, createResource} = SimpleCacheProvider;
const {createCache, createResource} = ReactCache;
function loadUpperCase(text) {
return Promise.reject(new Error('uh oh'));
@@ -115,7 +115,7 @@ describe('SimpleCacheProvider', () => {
});
it('accepts custom hash function', async () => {
const {createCache, createResource} = SimpleCacheProvider;
const {createCache, createResource} = ReactCache;
function loadSum([a, b]) {
return Promise.resolve(a + b);
@@ -138,7 +138,7 @@ describe('SimpleCacheProvider', () => {
});
it('warns if resourceType is a string or number', () => {
const {createCache} = SimpleCacheProvider;
const {createCache} = ReactCache;
spyOnDev(console, 'error');
const cache = createCache();
@@ -166,7 +166,7 @@ describe('SimpleCacheProvider', () => {
});
it('warns if non-primitive key is passed to a resource without a hash function', () => {
const {createCache, createResource} = SimpleCacheProvider;
const {createCache, createResource} = ReactCache;
spyOnDev(console, 'error');
@@ -197,7 +197,7 @@ describe('SimpleCacheProvider', () => {
});
it('stays within maximum capacity by evicting the least recently used record', async () => {
const {createCache, createResource} = SimpleCacheProvider;
const {createCache, createResource} = ReactCache;
function loadIntegerString(int) {
return Promise.resolve(int + '');

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,6 +1,6 @@
{
"name": "react-dom",
"version": "16.5.0",
"version": "16.6.0-alpha.8af6728",
"description": "React package for working with the DOM.",
"main": "index.js",
"repository": "facebook/react",
@@ -16,10 +16,10 @@
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
"schedule": "^0.3.0"
"scheduler": "^0.10.0-alpha.8af6728"
},
"peerDependencies": {
"react": "^16.0.0"
"react": "^16.0.0 || 16.6.0-alpha.8af6728"
},
"files": [
"LICENSE",

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.
@@ -9,6 +9,9 @@
'use strict';
// Set by `yarn test-fire`.
const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
describe('DOMPropertyOperations', () => {
let React;
let ReactDOM;
@@ -80,7 +83,11 @@ describe('DOMPropertyOperations', () => {
it('should not remove empty attributes for special input properties', () => {
const container = document.createElement('div');
ReactDOM.render(<input value="" onChange={() => {}} />, container);
expect(container.firstChild.getAttribute('value')).toBe('');
if (disableInputAttributeSyncing) {
expect(container.firstChild.hasAttribute('value')).toBe(false);
} else {
expect(container.firstChild.getAttribute('value')).toBe('');
}
expect(container.firstChild.value).toBe('');
});
@@ -165,7 +172,11 @@ describe('DOMPropertyOperations', () => {
<input type="text" value="foo" onChange={function() {}} />,
container,
);
expect(container.firstChild.getAttribute('value')).toBe('foo');
if (disableInputAttributeSyncing) {
expect(container.firstChild.hasAttribute('value')).toBe(false);
} else {
expect(container.firstChild.getAttribute('value')).toBe('foo');
}
expect(container.firstChild.value).toBe('foo');
expect(() =>
ReactDOM.render(
@@ -175,7 +186,11 @@ describe('DOMPropertyOperations', () => {
).toWarnDev(
'A component is changing a controlled input of type text to be uncontrolled',
);
expect(container.firstChild.getAttribute('value')).toBe('foo');
if (disableInputAttributeSyncing) {
expect(container.firstChild.hasAttribute('value')).toBe(false);
} else {
expect(container.firstChild.getAttribute('value')).toBe('foo');
}
expect(container.firstChild.value).toBe('foo');
});

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

View File

@@ -1,5 +1,5 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* 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.

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