Compare commits

...

292 Commits

Author SHA1 Message Date
Dan Abramov
0a65b94024 Update bundle sizes for 16.5.1 release 2018-09-13 19:11:31 +01:00
Dan Abramov
0dd19ce3e6 Update error codes for 16.5.1 release 2018-09-13 19:11:31 +01:00
Dan Abramov
8998f38789 Updating package versions for release 16.5.1 2018-09-13 19:06:38 +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
Brian Vaughn
71c0e05ba7 Update bundle sizes for 16.5.0 release 2018-09-06 09:34:27 -07:00
Brian Vaughn
92a620e214 Update error codes for 16.5.0 release 2018-09-06 09:34:27 -07:00
Brian Vaughn
6255cc3949 Updating package versions for release 16.5.0 2018-09-06 09:29:36 -07:00
Brian Vaughn
5c5fc5f473 Updating yarn.lock file for 16.5.0 release 2018-09-06 09:27:41 -07:00
Brian Vaughn
1bede616d1 Build script correctly bumps prerelease deps (e.g. schedule) for react (#13577) 2018-09-06 08:59:51 -07:00
Brian Vaughn
0a8740db61 Build script correctly bumps prerelease deps (e.g. schedule) (#13576) 2018-09-06 08:06:05 -07:00
Brian Vaughn
28cb379782 Added a test for Profiler onRender that throws (#13575) 2018-09-06 08:03:09 -07:00
Dan Abramov
8963118b3c Update react-dom README 2018-09-06 15:27:06 +01:00
Dan Abramov
b47a28cb9e Tweak react-dom README 2018-09-06 15:22:10 +01:00
Andrew Clark
f765f02253 When a root expires, flush all expired work in a single batch (#13503)
Instead of flushing each level one at a time.
2018-09-06 15:07:02 +01:00
Dan Abramov
0156740610 Changelog for 16.5.0 (#13571) 2018-09-06 15:06:32 +01:00
Brian Vaughn
550dd1d2ec Call Profiler onRender after mutations (#13572) 2018-09-05 17:55:12 -07:00
Alex Taylor
34348a45b4 Add enableSuspenseServerRenderer feature flag (#13573) 2018-09-05 15:04:59 -07:00
Brian Vaughn
4e744be6ee Added react-dom/profiling entry point to NPM package (#13570) 2018-09-05 11:16:43 -07:00
laoxiong
bb627228ea test: add test for fragement props (#13565) 2018-09-05 16:28:50 +01:00
Brian Vaughn
9a110ebd8c Cleaned up 'schedule' API wrt interactions and subscriber ref: (#13561)
* Removed 'private' ref methods from UMD forwarding API
* Replaced getters with exported constants since they were no longer referenced for UMD forwarding
2018-09-05 07:29:30 -07:00
Brian Vaughn
fb88fd9d8c Fixed schedule/tracking require for www sync script (#13556)
* Fixed schedule/tracking require for www sync script

* Remove unused remapped FB modules from bundle as well

* Remove www module rename plugin

* Revert unnecessary change to strip-unused-imports plugin
2018-09-04 10:31:52 -07:00
Dan Abramov
2d5c590cc2 Change async fixtures to use schedule 2018-09-04 15:27:07 +01:00
laoxiong
955393cab9 refactor: remove emove type judgment when defining warning props (#13553) 2018-09-04 15:03:10 +01:00
Dan Abramov
ff93996028 Fix import of ReactDOM in server env 2018-09-04 15:00:03 +01:00
Dan Abramov
281bd64c00 Fix test file name 2018-09-04 14:27:35 +01:00
Dan Abramov
d6b59e3d26 Check document.documentMode once 2018-09-04 14:27:21 +01:00
Dan Abramov
52633c84e2 Try/finally 2018-09-04 14:27:14 +01:00
Michał Gołębiowski-Owczarek
2d4705e753 Make IE 11 not complain about non-crucial style attribute hydration mismatch (#13534)
IE 11 parses & normalizes the style attribute as opposed to other
browsers. It adds spaces and sorts the properties in some
non-alphabetical order. Handling that would require sorting CSS
properties in the client & server versions or applying
`expectedStyle` to a temporary DOM node to read its `style` attribute
normalized. Since it only affects IE, we're skipping style warnings
in that browser completely in favor of doing all that work.

Fixes #11807
2018-09-04 14:26:51 +01:00
Michał Gołębiowski-Owczarek
25d48a7281 Add gridArea to unitless CSS properties (#13550)
Ref #9185
2018-09-04 12:22:21 +01:00
Brian Vaughn
877f8bc6b2 Renamed schedule UMD forwarding methods to stay in-sync with SECRET_INTERNALS change (#13549) 2018-09-03 18:48:47 -07:00
Dan Abramov
0a96f90572 Revert "Extract common logic" (#13547)
* Revert "Fix test"

This reverts commit 17a57adde2.

* Revert "Extract common logic (#13535)"

This reverts commit 605da8b420.
2018-09-03 21:46:16 +01:00
Dan Abramov
17a57adde2 Fix test 2018-09-03 21:39:45 +01:00
Heaven
605da8b420 Extract common logic (#13535) 2018-09-03 20:57:13 +01:00
Philipp
69f9f4127a Document event bubble order (#13546)
This is documenting the current order in which events are dispatched
when interacting with native document listeners and other React apps.

For more context, check out #12919.
2018-09-03 21:39:20 +02:00
Dan Abramov
c1ba7b8cfd Remove www scheduler fork (#13545)
Remove unused www scheduler fork
2018-09-03 19:55:58 +01:00
Dan Abramov
b473d5f864 Secret exports: Scheduler => Schedule (#13544) 2018-09-03 19:51:30 +01:00
Dan Abramov
6312efc34f Tweak README and description 2018-09-03 19:34:04 +01:00
Brian Vaughn
b92f947af1 Rename "react-scheduler" package to "schedule" (#13543)
* Git moved packages/react-scheduler -> packages/schedule

* Global find+replace 'react-scheduler' -> 'schedule'

* Global find+replace 'ReactScheduler' -> 'Scheduler'

* Renamed remaining files "ReactScheduler" -> "Schedule"

* Add thank-you note to schedule package README

* Replaced schedule package versions 0.1.0-alpha-1 -> 0.2.0

* Patched our local fixtures to work around Yarn install issue

* Removed some fixture hacks
2018-09-03 19:27:50 +01:00
Dan Abramov
3c1dcd349a Expose less internals for TestUtils (#13539)
* Expose less internals for TestUtils

* Keep EventPluginHub for www

* Reorder to simplify
2018-09-03 17:21:00 +01:00
Fredrik Höglund
0b74e95d7b Ignore noscript content on the client (#13537)
* Ignore noscript content on the client (#11423)

* Fix failing test for ignoring noscript content

* Add a ServerIntegration test for noscript
2018-09-03 17:17:53 +01:00
Brian Vaughn
8a1e3962ab Remove negative lookbehind from Rollup plugin that broke Node <= v8.9 (#13538) 2018-09-02 17:59:29 -07:00
Dan Abramov
9604d26aec Rename ReactDOMFiber* to ReactDOM* (#13540) 2018-09-03 01:45:12 +01:00
Brian Vaughn
28b9289022 Tidied up scheduling UMD API forwarding test (#13533) 2018-09-01 13:05:21 -07:00
Brian Vaughn
bf8aa60925 Added Jest test to verify UMD API-forwarding for scheduling package (#13532)
* Added Jest test to verify UMD API-forwarding for scheduling package
* Added separate dev/prod UMD bundles for scheduler package
2018-09-01 12:52:26 -07:00
Heaven
0040efc8d8 Fix a typo (#13531) 2018-09-01 20:40:17 +01:00
Brian Vaughn
46950a3dfc Interaction tracking follow up (#13509)
* Merged interaction-tracking package into react-scheduler
* Add tracking API to FB+www builds
* Added Rollup plugin to strip no-side-effect imports from Rollup bundles
* Re-bundle tracking and scheduling APIs on SECRET_INTERNALS object for UMD build (and provide lazy forwarding methods)
* Added some additional tests and fixtures
* Fixed broken UMD fixture in master (#13512)
2018-09-01 12:00:00 -07:00
Dan Abramov
0452c9bba5 Add a regression test for #4618 2018-08-31 16:40:05 +01:00
Dan Abramov
c21bab6940 Add SSR regression test for #6119 2018-08-31 16:15:05 +01:00
Dan Abramov
0d3fc9de10 Add regression test for #6119 2018-08-31 16:09:29 +01:00
Dan Abramov
0f050ad7cc Make regression test better 2018-08-31 15:57:02 +01:00
Dan Abramov
f943423231 Add a more precise regression test for #6219 2018-08-31 15:54:39 +01:00
Dan Abramov
6ff062e048 Fetch all tags in DOM fixtures 2018-08-31 14:38:53 +01:00
Ivan
a3e4d00089 Fixed typo (#13519) 2018-08-30 16:33:47 -07:00
Dan Abramov
b3d8c5376f [RN] Remove isMounted() false positive warning (#13511) 2018-08-30 18:42:09 +01:00
Timothy Yung
d2123d6569 Sync React Native Flow Changes (#13513) 2018-08-29 13:54:58 -07:00
Dan
1c0ba70b4b Fix test to use AsyncMode
Addresses one of the issues brought up by @NE-SmallTown in https://github.com/facebook/react/pull/13488#issuecomment-416805935
2018-08-29 13:20:16 +01:00
Brian Vaughn
6e4f7c7886 Profiler integration with interaction-tracking package (#13253)
* Updated suspense fixture to use new interaction-tracking API

* Integrated Profiler API with interaction-tracking API (and added tests)

* Pass interaction Set (rather than Array) to Profiler onRender callback

* Removed some :any casts for enableInteractionTracking fields in FiberRoot type

* Refactored threadID calculation into a helper method

* Errors thrown by interaction tracking hooks use unhandledError to rethrow more safely.
Reverted try/finally change to ReactTestRendererScheduling

* Added a $FlowFixMe above the FiberRoot :any cast

* Reduce overhead from calling work-started hook

* Remove interaction-tracking wrap() references from unwind work in favor of managing suspense/interaction continuations in the scheduler
* Moved the logic for calling work-started hook from performWorkOnRoot() to renderRoot()

* Add interaction-tracking to bundle externals. Set feature flag to __PROFILE__

* Renamed the freezeInteractionCount flag and replaced one use-case with a method param

* let -> const

* Updated suspense fixture to handle recent API changes
2018-08-28 18:58:11 -07:00
Dan Abramov
2967ebdbea Remove buggy unstable_deferredUpdates() (#13488)
* Add a failing test for deferredUpdates not being respected

* Don't consider deferred updates interactive

* Remove now-unnecessary setTimeout hack in the fixture

* Remove unstable_deferredUpdates
2018-08-28 18:12:51 +01:00
Bryan M
1664b08f0c added flow types to setInnerHTML (#13495) 2018-08-28 07:37:29 -07:00
Veekas Shrivastava
672e859d31 Add warning to prevent setting this.state to this.props referentially (#11658)
* add test to warn if setting this.state to this.props referentially

* Avoid an extra check
2018-08-28 14:17:44 +01:00
Heaven
29287f0886 Rename lowestPendingInteractiveExpirationTime (#13484)
* Rename lowestPendingInteractiveExpirationTime

* fix prettier
2018-08-27 10:27:45 -07:00
ryota-murakami
bb48622a36 [SSR Fixture] Update yarn.lock (#13481)
* Update yarn.lock
2018-08-27 08:28:06 -07:00
Heaven
d400d6d5ef Replace magic number 1 with ELEMENT_NODE (#13479)
* Replace magic number 1 with ELEMENT_NODE

* Add flow pragma to HTMLNodeType
2018-08-27 08:16:24 -07:00
Sophie Alpert
340bfd9393 Rename ReactTypeOfWork to ReactWorkTags, ReactTypeOfSideEffect to ReactSideEffectTags (#13476)
* Rename ReactTypeOfWork to ReactWorkTags

And `type TypeOfWork` to `type WorkTag`.

* Rename ReactTypeOfSideEffect too
2018-08-26 13:40:27 -07:00
Rodrigo Bermúdez Schettino
53ddcec4f1 Correct syntax in CHANGELOG (#13474)
Non-breakable space was replaced with whitespace.
2018-08-25 19:08:20 +01:00
Dan Abramov
5cefd9b1e2 Stringify <option> children (#13465) 2018-08-23 00:24:05 +01:00
Philipp Spieß
3661616c28 Improve test harness of submit events (#13463)
This PR includes a test that I've enabled in #13358 and another test that we've discussed in #13462 as well as some random cleanup while I'm at it.
2018-08-22 22:46:37 +02:00
Dan Abramov
a1be17140d Revert "Rely on bubbling for submit and reset events (#13358)" (#13462)
This reverts commit 725e499cfb.
2018-08-22 19:33:42 +01:00
Dan Abramov
90c92c7007 Fix warning message 2018-08-21 18:44:34 +01:00
Dan Abramov
5cb0f2bf51 Change www error shim API (#13454) 2018-08-21 18:38:27 +01:00
Brian Vaughn
e106b8c44f Warn about unsafe toWarnDev() nesting in tests (#12457)
* Add lint run to warn about improperly nested toWarnDev matchers
* Updated tests to avoid invalid nesting
2018-08-21 07:43:02 -07:00
Brian Vaughn
026aa9c978 Bumped version to 16.4.3-alpha.0 (#13448)
* Bumped version to 16.4.3-alpha.0
* Bump react-is peer dep version in react-test-renderer
2018-08-20 14:28:43 -07:00
Matt Hamlin
3cae7543be Update scroll restoration logic in suspense fixture (#13437) 2018-08-20 14:01:12 -07:00
Brian Vaughn
d670bdc6b1 Warn about ReactDOM.createPortal usage within ReactTestRenderer (#12895) 2018-08-20 10:03:22 -07:00
Dan Abramov
bf1abf478b Fix React.lazy(forwardRef) (#13446)
* Fix React.lazy(forwardRef)

* Forbid bad typeof
2018-08-20 17:28:04 +01:00
Dan Abramov
e8571c798d Tweak ReactTypeOfWork order (#13444) 2018-08-20 16:51:09 +01:00
Dan Abramov
973496b40c Fix component name for React.lazy (#13443)
* Fix component name for React.lazy

* Fix lint
2018-08-20 16:43:25 +01:00
Dan Abramov
0beb2ee76b Fix incorrect legacy context for factory components (#13441)
* Add a repro case for context bug

* Be explicit about whether context has been pushed

* Put cheaper check first

* Naming
2018-08-20 16:08:46 +01:00
Joseph
004cb21bbb Short circuit the logic for exporting a module (#13392)
* short circuit some logic

* revert back to ternary operator
2018-08-20 12:29:40 +01:00
Brandon Dail
f7a538c913 Remove getTextContentAccessor (#13434)
According to caniuse the only browsers that don't support textContent
are <=IE8, which we no longer support.
2018-08-20 12:28:41 +01:00
Brandon Dail
d1c42d2f1e Remove addEventListener check in isEventSupported (#13435)
* Remove addEventListener check in isEventSupported

All browsers we support also support addEventListener, so this check is
unncessary

* Remove capture argument from isEventSupported
2018-08-20 12:26:06 +01:00
Brandon Dail
a869f992a8 Remove helper object from FallbackCompositionState (#13430)
There's no good reason for this to be an object. This refactors it so
that we just use three variables instead. We can avoid the property reads/writes and also minify better, since property names don't get mangled but variables do.
2018-08-18 08:07:12 -06:00
Nathan Hunzaker
0cd8d470da Do not toLowerCase lists of lowercase words (#13428)
* Do not toLowerCase lists of lowercase words

* Add notes about downcasing to DOMProperty.js

* Use consistent comment breakout

* Make toLowerCase more obvious
2018-08-17 19:52:30 -07:00
Brandon Dail
b3a4cfea57 Trap click events for portal root (#11927)
* Trap click events for portal root

* Trap click event on container in appendChildToContainer

* Add a comment
2018-08-18 02:10:20 +01:00
Brian Vaughn
0da5102cf0 Add interaction-tracking/subscriptions (#13426)
* Removed enableInteractionTrackingObserver as a separate flag; only enableInteractionTracking is used now

* Added interaction-tracking/subscriptions bundle and split tests

* Added multi-subscriber support

* Moved subscriptions behind feature flag

* Fixed bug with wrap() parameters and added test

* Replaced wrap arrow function
2018-08-17 14:45:18 -06:00
Dan Abramov
4b32f525e1 Refactor away some namespace imports (#13427)
* Replace some namespace imports

* Simplify the controlled component injection

* Simplify the batching injection

* Simplify the component tree injection
2018-08-17 21:17:37 +01:00
Dan Abramov
d2f5c3fbc2 Don't diff memoized host components in completion phase (#13423)
* Add a regression test for 12643#issuecomment-413727104

* Don't diff memoized host components

* Add regression tests for noop renderer

* No early return

* Strengthen the test for host siblings

* Flow types
2018-08-17 18:13:46 +01:00
Brian Vaughn
5e0f073d50 interaction-tracking package (#13234)
Add new interaction-tracking package/bundle
2018-08-17 10:16:05 -06:00
Dan Abramov
d14e443d6e Resume onSelect tracking after dragend (#13422) 2018-08-17 00:22:16 +01:00
Nathan Hunzaker
146c9fb307 Update attribute table for master (#13421) 2018-08-16 13:40:11 -07:00
Esteban
d5edc1f51e Remove unused ReactCall & ReactReturn types (#13419)
These are no longer used after the removal of the `react-call-return` package.
2018-08-16 18:48:13 +01:00
Sebastian Markbåge
4fa20b53b7 Don't pass instanceHandle to clones (#13125)
We will instead just reuse the first one.
2018-08-16 09:54:12 -07:00
Andrew Clark
fe959eea73 React.lazy (#13398)
Lazily starts loading a component the first time it's rendered. The
implementation is fairly simple and could be left to userspace, but since
this is an important use case, there's value in standardization.
2018-08-16 09:43:32 -07:00
Andrew Clark
2b30828000 Fix wrong Flow return type 2018-08-16 09:29:17 -07:00
Andrew Clark
5031ebf6be Accept promise as element type (#13397)
* Accept promise as element type

On the initial render, the element will suspend as if a promise were
thrown from inside the body of the unresolved component. Siblings should
continue rendering and if the parent is a Placeholder, the promise
should be captured by that Placeholder.

When the promise resolves, rendering resumes. If the resolved value
has a `default` property, it is assumed to be the default export of
an ES module, and we use that as the component type. If it does not have
a `default` property, we use the resolved value itself.

The resolved value is stored as an expando on the promise/thenable.

* Use special types of work for lazy components

Because reconciliation is a hot path, this adds ClassComponentLazy,
FunctionalComponentLazy, and ForwardRefLazy as special types of work.
The other types are not supported, but wouldn't be placed into a
separate module regardless.

* Resolve defaultProps for lazy types

* Remove some calls to isContextProvider

isContextProvider checks the fiber tag, but it's typically called after
we've already refined the type of work. We should get rid of it. I
removed some of them in the previous commit, and deleted a few more
in this one. I left a few behind because the remaining ones would
require additional refactoring that feels outside the scope of this PR.

* Remove getLazyComponentTypeIfResolved

* Return baseProps instead of null

The caller compares the result to baseProps to see if anything changed.

* Avoid redundant checks by inlining getFiberTagFromObjectType

* Move tag resolution to ReactFiber module

* Pass next props to update* functions

We should do this with all types of work in the future.

* Refine component type before pushing/popping context

Removes unnecessary checks.

* Replace all occurrences of _reactResult with helper

* Move shared thenable logic to `shared` package

* Check type of wrapper object before resolving to `default` export

* Return resolved tag instead of reassigning
2018-08-16 09:21:59 -07:00
Rauno Freiberg
77b7a660b9 fix: do not reconcile children that are iterable functions (#13416)
* fix: do not reconcile children that are iterable functions

* fix: remove fit

* Refactor comparison to exclude anything that isnt an object

* Remove redundant undefined check
2018-08-16 16:38:10 +01:00
Kartik Lad
cb7745c6cf remove unused state initialValue from ReactDOMFiberSelect (#13412) 2018-08-16 07:55:57 -07:00
Ellis Clayton
9832a1b6d5 Avoid setting empty value on reset & submit inputs (#12780)
* Avoid setting empty value on reset & submit inputs

* Update ReactDOMFiberInput.js

* More test coverage
2018-08-16 15:19:03 +01:00
Aaron Brager
8862172fa3 Provide a better error message (#12421) 2018-08-16 14:54:45 +01:00
Ruud Burger
5816829170 De-duplicate commitUpdateQueue effect commit (#13403) 2018-08-15 11:21:08 -07:00
Andrew Clark
1bc975d073 Don't stop context traversal at matching consumers (#13391)
* Don't stop context traversal at matching consumers

Originally, the idea was to time slice the traversal. This worked when
there was only a single context type per consumer.

Now that each fiber may have a list of context dependencies, including
duplicate entries, that optimization no longer makes sense – we could
end up scanning the same subtree multiple times.

* Remove changedBits from context object and stack

Don't need it anymore, yay
2018-08-15 11:19:53 -07:00
Dan Abramov
83e446e1d8 Refactor ReactErrorUtils (#13406)
* Refactor ReactErrorUtils

* Remove unnecessary assignments
2018-08-15 19:02:11 +01:00
Dan Abramov
13fa96a547 Improve bad ref invariant (#13408) 2018-08-15 18:30:17 +01:00
Dan Abramov
b2adcfba32 Don't suppress jsdom error reporting in our tests (#13401)
* Don't suppress jsdom error reporting

* Address review
2018-08-15 17:44:46 +01:00
Conrad Irwin
69e2a0d732 Ability to access window.event in development (#11687) (#11696)
Before this change in development window.event was overridden
in invokeGuardedCallback.

After this change window.event is preserved in the browsers that
support it.
2018-08-14 21:35:31 +01:00
davidblnc
ade4dd3f6f Fix typo in a comment (#13373)
* Typo

* Changed to use rest parameter

* 'Bugfix'

* Typo fix
2018-08-14 20:58:35 +01:00
Moti Zilberman
2c59076d26 Warn when "false" or "true" is the value of a boolean DOM prop (#13372)
* Warn when the string "false" is the value of a boolean DOM prop

* Only warn on exact case match for "false" in DOM boolean props

* Warn on string "true" as well as "false" in DOM boolean props

* Clarify warnings on "true" / "false" values in DOM boolean props
2018-08-14 20:51:33 +01:00
Esteban
24b0ed7a2e Remove 'flow-coverage-report' script. (#13395)
`flow-coverage-report` stopped working after Flow was set to run for each renderer separately (#12846). As discussed in #13393, this is hard to fix without adding complexity to `.flowconfig`'s generation.
2018-08-14 19:21:57 +01:00
Rauno Freiberg
de5102c4cd Ignore symbols and functions in select tag (#13389)
* wip: ignore symbols and functions in select tag

* fix: Use ToStringValue as a maybe type

* refactor: remove unnecessary test

* refactor: remove implicit return from tests
2018-08-14 10:31:41 -07:00
Nathan Hunzaker
e3d5b5ea7f DOM fixture updates (#13368)
* 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.

* Update browser support fields

* Tweak select width

* Fix typo

* Report actual error when fixture fails to load

* Update browser information

* Update browserstack subscription info

* English

* Switch let for const in fixture loader
2018-08-14 07:32:52 -07:00
Rauno Freiberg
d04d03e470 Fix passing symbols and functions to textarea (#13362)
* refactor: move getSafeValue to separate file

* fix(?): ReactDOMFiberTextarea sanitization for symbols and functions

* tests: add TODOs for warnings

* fix: restore accidentally removed test

* fix: remove redundant logic for initialValue

* refactor: integrate SafeValue typings into textarea

* fix: restore stringified newValue for equality check

* fix: remove getSafeValue from hostProps

* refactor: SafeValue -> ToStringValue

* refactor: update TODO comment in test file

* refactor: no need to convert children to ToStringValue
2018-08-14 07:16:48 -07:00
Nathan Hunzaker
5550ed4a8f Ensure arguments are coerced to strings in warnings (#13385)
* Manually join extra attributes in warning

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

* Prettier

* Stringify all %s replaced symbols in warning

* Eliminate extra string coercion

* Pass args through with spread, convert all arguments to strings

* Rename strings to stringArgs
2018-08-13 16:13:51 -07:00
Dan Abramov
3938ccc88a Allow the user to opt out of seeing "The above error..." addendum (#13384)
* Remove e.suppressReactErrorLogging check before last resort throw

It's unnecessary here. It was here because this method called console.error().
But we now rethrow with a clean stack, and that's worth doing regardless of whether the logging is silenced.

* Don't print error addendum if 'error' event got preventDefault()

* Add fixtures

* Use an expando property instead of a WeakSet

* Make it a bit less fragile

* Clarify comments
2018-08-13 21:33:55 +01:00
Rauno Freiberg
47e217a77d Provide component reference in ReactDOMFiberTextarea warnings (#13361)
* Provide component reference if possible in ReactDOMFiberTextarea.js warning

* Nits
2018-08-13 15:55:56 +01:00
Rauno Freiberg
714c78d5a1 Fixtures nits (#13375)
* fix: PropTypes failing in textarea fixtures

* fix: Iframe title attribute in fixtures

* Make description a optional prop in FixtureSet
2018-08-13 07:08:44 -07:00
Philipp Spieß
a0190f828f Rename SafeValue to ToStringValue (#13376)
Following up on the changes I made in #13367, @gaearon suggest that
"safe" could be read as necessary for security. To avoid misleading a
reader, I'm changing the name.

A few names where discussed in the previous PR. I think `ToStringValue`
makes sense since the value itself is not a string yet but an opaque
type that can be cast to a string. For the actual string concatenation,
I've used `toString` now to avoid confusion: `toStringValueToString`
is super weird and it's namespaced anyhow.

Definitely open for suggestions here. :) I'll wait until we wrap up
#13362 and take care of rebase afterwards.
2018-08-13 14:58:59 +01:00
Ryan Florence
d1e589137f Fix fixture title (#13377)
about time I made a significant commit to the react project directly
2018-08-12 17:12:31 -07:00
Philipp Spieß
33602d435a Improve soundness of ReactDOMFiberInput typings (#13367)
* Improve soundness of ReactDOMFiberInput typings

This is an attempt in improving the soundness for the safe value cast
that was added in #11741. We want this to avoid situations like [this
one](https://github.com/facebook/react/pull/13362#discussion_r209380079)
where we need to remember why we have certain type casts. Additionally
we can be sure that we only cast safe values to string.

The problem was `getSafeValue()`. It used the (deprecated) `*` type to
infer the type which resulted in a passing-through of the implicit `any`
of the props `Object`. So `getSafeValue()` was effectively returning
`any`.

Once I fixed this, I found out that Flow does not allow concatenating
all possible types to a string (e.g `"" + false` fails in Flow). To
fix this as well, I've opted into making the SafeValue type opaque and
added a function that can be used to get the string value. This is sound
because we know that SafeValue is already checked.

I've verified that the interim function is inlined by the compiler and
also looked at a diff of the compiled react-dom bundles to see if I've
regressed anything. Seems like we're good.

* Fix typo
2018-08-12 17:14:05 +02:00
Moti Zilberman
ae855cec22 Support tangentialPressure and twist fields of pointer events (#13374)
While working on https://github.com/facebook/flow/pull/6728 I noticed React's recently-added `SyntheticPointerEvent` was missing the [`tangentialPressure`](https://www.w3.org/TR/pointerevents/#dom-pointerevent-tangentialpressure) and [`twist`](https://www.w3.org/TR/pointerevents/#dom-pointerevent-twist) fields. I couldn't find any reason for their omission in https://github.com/facebook/react/pull/12507 (nor in the spec) so I assume they were meant to be included, like the rest of `PointerEvent`. This PR adds these two fields to `SyntheticPointerEvent`.
2018-08-12 15:16:23 +02:00
Philipp Spieß
725e499cfb Rely on bubbling for submit and reset events (#13358)
* Bring back onSubmit bubble test

I found a test that was written more than 5 years ago and probably never
run until now. The behavior still works, although the API changed quite
a bit over the years.

Seems like this was part of the initial public release already:

75897c2dcd (diff-1bf5126edab96f3b7fea034cd3b0c742R31)

* Rely on bubbling for submit and reset events

* Update dom fixture lockfile

* Revet rollup results

Whoopsie.
2018-08-10 21:10:35 +02:00
Alex Rohleder
e07a3cd28f fix typo on inline comment (#13364) 2018-08-10 16:51:06 +01:00
Kazuhiro Sera
e0204084a0 Fix typos detected by github.com/client9/misspell (#13349) 2018-08-10 14:06:08 +01:00
Dan Abramov
be4533af7d Fix hydration of non-string dangerousSetInnerHTML.__html (#13353)
* Consistently handle non-string dangerousSetInnerHTML.__html in SSR

* Add another test
2018-08-09 18:05:05 +01:00
Dan Abramov
0072b59984 Improve scry() error message for bad first argument (#13351) 2018-08-09 15:05:44 +01:00
Dan
d59b993a74 Make nicer stacks DEV-only
No need to spend production bytes on this.
2018-08-09 03:44:56 +01:00
Billy Janitsch
54d86eb822 Improve display of filenames in component stack (#12059)
* Improve display of filenames in component stack

* Add explanatory comment

* tests: add tests for component stack trace displaying

* Tweak test

* Rewrite test and revert implementation

* Extract a variable

* Rewrite implementation
2018-08-09 03:33:30 +01:00
Brian Vaughn
067cc24f55 Profiler actualDuration bugfix (#13313)
* Simplified profiler actualDuration timing

While testing the new DevTools profiler, I noticed that sometimes– in larger, more complicated applications– the actualDuration value was incorrect (either too large, or sometimes negative). I was not able to reproduce this in a smaller application or test (which sucks) but I assume it has something to do with the way I was tracking render times across priorities/roots. So this PR replaces the previous approach with a simpler one.

* Changed bubbling logic after chatting out of band with Andrew

* Replaced __PROFILE__ with feature-flag conditionals in test

* Updated test comment
2018-08-08 09:42:53 -07:00
Bartosz Kaszubowski
1209ae50f3 Bump "fbjs-scripts" to remove Babel 5 from dependencies (#13344) 2018-08-08 11:43:35 +01:00
Dan Abramov
3cfab14b96 Treat focusable as enumerated boolean SVG attribute (#13339)
* Treat focusable as enumerated boolean attribute

* Update attribute table
2018-08-07 19:39:56 +01:00
Dan Abramov
a66217b571 Update attribute table (#13343)
* Update table for React 16.3

* Update table for master

* Re-run the table with recent Chrome
2018-08-07 19:35:28 +01:00
Esteban
212437eaf0 Remove unused dependencies from workspace root. (#13340)
Remove 'async', 'bundle-collapser', 'del', 'derequire', 'escape-string-regexp', 'git-branch', 'gzip-js',
'merge-stream', 'platform', 'run-sequence' & 'yargs'.

Most of them were used in the old Grunt build system.

This ends up removing 32 packages, according to yarn.lock.
2018-08-07 11:38:25 +01:00
Dan Abramov
3b3b7fcbbd Don't search beyond Sync roots for highest priority work (#13335) 2018-08-07 01:59:18 +01:00
nico
43a137d9c1 Fix undefined variable on suspense fixture (#13325) 2018-08-05 15:28:08 +01:00
Bartosz Kaszubowski
08e32263f9 Fix Prettier "No parser" warning while building (#13323) 2018-08-05 02:50:58 +01:00
Clark Du
f8456b2ecb refactor: remove promise on checkModule (#13318)
* refactor: remove promise on checkModule
* refactor: use forEach instead of map for checkModule
2018-08-03 13:25:31 -07:00
Alexey Raspopov
61122347dd Suspense/UserPage: id -> name (#13320)
* Suspense/UserPage: id -> name

* Suspense/UserPage: review -> repo
2018-08-03 12:59:34 -07:00
Alexey Raspopov
c0bf34c9c4 Suspense/Spinner: class -> className (#13319) 2018-08-03 12:17:36 -07:00
Jason Quense
ac72388563 Add support for auxclick event (#11571)
* Add support for auxclick event

* Add to simpleEventPLugin

* Add auxclick as interactive event type in SimpleEventPlugin

* Update ReactTestUtils fixture to include auxClick
2018-08-03 11:57:34 -07:00
Gareth Small
75491a8f4b Add a regression test for #12200 (#12242)
* fix selectedIndex in postMountWrapper in ReactDOMFiberSelected

* comment in ReactDomFiberSelect in postMountWrapper for selectedIndex fix

* test for selectedIndex fix

* set boolean value for multiple

* Revert the fix which has been fixed on master
2018-08-03 18:10:18 +01:00
Dmytro Zasyadko
2d0356a524 Make sure that select has multiple attribute set to appropriate state before appending options (#13270)
* Make sure that `select` has `multiple` attribute set to appropriate state before appending options
fixes #13222

* Add dom test fixture to test long multiple select scrolling to the first selected option
fixes #13222

* typo fix

* update comment
remove redundant conversion to bool type

* change a way of assigning property to domElement

* Remove unused ref on select fixture form
2018-08-03 18:05:25 +01:00
Felix Wu
b179bae0ae Enhance get derived state from props state warning - #12670 (#13317)
* Enhance warning message for missing state with getDerivedStateFromProps

* Adapt tests

* style fix

* Tweak da message

* Fix test
2018-08-03 16:09:57 +01:00
Dan
fa824d0921 Fix lint 2018-08-03 13:31:20 +01:00
Alex Jegtnes
f265d545a1 Suspense fixture placeholder styling improvement (#13314)
Vertically and horizontally center 'large' placeholder spinner in suspense demo
as per @gaearon's tweet:
https://twitter.com/dan_abramov/status/1025190261784289280
2018-08-03 13:08:45 +01:00
Alexey
15a8f03183 Fix ambiguity in doc comment for isValidElement (#12826)
`isValidElement(object)` checks if object is a ReactElement.

`@return {boolean} True if `object` is a valid component.` leading to confusion which was described in several blog posts:
- https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
- https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62
2018-08-02 21:32:41 -07:00
ryota-murakami
5cff212072 add flowtype to function signature (#13285) 2018-08-02 21:23:07 -07:00
Dan Abramov
261da3f0a9 Update fixture instructions 2018-08-03 01:56:03 +01:00
Andrew Patton
b565f49531 Minimally support iframes (nested browsing contexts) in selection event handling (#12037)
* Prefer node’s window and document over globals

* Support active elements in nested browsing contexts

* Avoid invoking defaultView getter unnecessarily

* Prefer node’s window and document over globals

* Support active elements in nested browsing contexts

* Avoid invoking defaultView getter unnecessarily

* Implement selection event fixtures

* Prefer node’s window and document over globals

* Avoid invoking defaultView getter unnecessarily

* Fix react-scripts to work with alphas after 16.0.0

The current logic just checks if the version is an alpha with a major version of 16 to account for weirdness with the 16 RC releases, but now we have alphas for newer minor releases that don't have weirdness

* Run prettier on new selection events fixtures

* Add fixture for onSelect in iframes, remove DraftJS fixture

The DraftJs fixture wasn't really working in all supported browsers anyways, so just drop it and try to cover our bases without using it directly

* Purge remnants of draft.js from fixtures

* Use prop-types import instead of window global

* Make fixtures’ Iframe component Firefox-compatible

* Fix switch case for SelectionEventsFixture

* Remove draft.js / immutable.js dependencies

* Cache owner doc as var to avoid reading it twice

* Add documentation for getActiveElementDeep to explain try/catch

Add documentation for getActiveElementDeep to explain try/catch

* Ensure getActiveElement always returns DOM element

* Tighten up isNode and isTextNode

* Remove ie8 compatibility

* Specify cross-origin example in getActiveElementDeep

* Revert back to returning null if document is not defined
2018-08-02 23:23:07 +01:00
Dan Abramov
1609cf3432 Warn about rendering Generators (#13312)
* Warn about rendering Generators

* Fix Flow

* Add an explicit test for iterable

* Moar test coverage
2018-08-02 20:04:03 +01:00
Dan Abramov
46d5afc54d Replace console.error() with a throw in setTimeout() as last resort exception logging (#13310)
* Add a regression test for #13188

* Replace console.error() with a throw in setTimeout() as last resort

* Fix lint and comment

* Fix tests to check we throw after all

* Fix build tests
2018-08-02 18:16:47 +01:00
Yunchan Cho
b3b80a4835 Inject react-art renderer into react-devtools (#13173)
* Inject react-art renderer into react-devtools

This commit makes react-art renderer to be injected to react-devtools,
so that component tree of the renderer is presented on debug panel of browser.

* Update ReactART.js
2018-08-02 12:04:31 +01:00
Dan Abramov
5e8beec84b Add a regression test for #11602 2018-08-02 02:46:08 +01:00
Dan Abramov
470377bbdb Remove extraneous condition
It's covered by a check below.
2018-08-02 02:33:54 +01:00
Dan Abramov
ad17ca639b Fix Prettier 2018-08-02 02:29:15 +01:00
Ideveloper
6db080154b Remove irrelevant suggestion of a legacy method from a warning (#13169)
* Edit warn message what use deprecated lifecycle method

* delete setState warn message about prescriptive and deprecated life cycle

* fix lint

* Prettier

* Formatting
2018-08-02 02:11:17 +01:00
Dan Abramov
fddb23601f Tweak other fixture instructions 2018-08-02 01:36:44 +01:00
Dan Abramov
95738e5cfd Tweak fixture instructions 2018-08-02 01:34:08 +01:00
Jiawen Geng
d79238f1ee add nodejs 10 to windows test (#13241)
* add nodejs 10 to windows test

* remove node 8 for better build speed
2018-08-02 01:09:37 +01:00
Dan Abramov
ae63110335 Fix time slicing fixture (#13305)
* Fix time slicing fixture

* Remove unused option
2018-08-02 00:02:24 +01:00
Dan Abramov
e341e503b2 Move async fixtures (#13304) 2018-08-01 22:21:26 +01:00
Brian Vaughn
00cd4444e2 [WIP] Add suspense fixtures for IO and CPU demo (#13295)
Add suspense fixtures for IO and CPU demo
2018-08-01 14:10:28 -07:00
Dan Abramov
41f6d8cc7a Fix incorrect changelog entry for 16.3.3 2018-08-01 21:12:51 +01:00
Dan Abramov
0624c719f4 Add 16.4.2 and other releases to changelog 2018-08-01 20:29:05 +01:00
Dan Abramov
f60a7f722c Fix SSR crash on a hasOwnProperty attribute (#13303) 2018-08-01 20:23:19 +01:00
Dan Abramov
ff41519ec2 Sanitize unknown attribute names for SSR (#13302) 2018-08-01 20:23:10 +01:00
Dylan Cutler
c44c2a2161 More helpful message when passing an element to createElement() (#13131)
* [#13130] Add a more helpful message when passing an element to createElement()

* better conditional flow

* update after review

* move last condition inside last else clause

* Added test case

* compare 25132typeof to REACT_ELEMENT_TYPE

* runs prettier

* remove unrelated changes

* Tweak the message
2018-08-01 18:45:08 +01:00
Dan Abramov
28cd494bdf Refactor validateDOMNesting a bit (#13300) 2018-08-01 17:08:03 +01:00
Philipp Spieß
b381f41411 Allow Electrons <webview> tag (#13301)
Fixes #13299

Adds Electrons <webview> tag to the attribute whitelist.
2018-08-01 17:07:52 +01:00
Konstantin Yakushin
0182a74632 Fix a crash when using dynamic children in <option> tag (#13261)
* Make option children a text content by default

fix #11911

* Apply requested changes

- Remove meaningless comments
- revert scripts/rollup/results.json

* remove empty row

* Update comment

* Add a simple unit-test

* [WIP: no flow] Pass through hostContext

* [WIP: no flow] Give better description for test

* Fixes

* Don't pass hostContext through

It ended up being more complicated than I thought.

* Also warn on hydration
2018-08-01 16:16:34 +01:00
Andrew Clark
2a2ef7e0fd Remove unnecessary branching from updateContextProvider (#13282)
This code had gotten unnecessarily complex after some recent changes.
Cleaned it up a bit.
2018-07-27 13:42:17 -07:00
Dan Abramov
840cb1a268 Add an invariant to createRoot() to validate containers (#13279) 2018-07-27 16:50:20 +02:00
Andrew Clark
bc1ea9cd96 Handle errors thrown in gDSFP of a module-style context provider (#13269)
Context should be pushed before calling any user code, so if it errors
the stack unwinds correctly.
2018-07-25 14:22:27 -07:00
Flarnie Marchan
0154a79fed Remove 'warning' module from the JS scheduler (#13264)
* Remove 'warning' module from the JS scheduler

**what is the change?:**
See title

**why make this change?:**
Internally the 'warning' module has some dependencies which we want to
avoid pulling in during the very early stages of initial pageload. It is
creating a cyclical dependency.

And we wanted to remove this dependency anyway, because this module
should be kept small and decoupled.

**test plan:**
- Tested the exact same change internally in Facebook.com
- Ran unit tests
- Tried out the fixture

**issue:**
Internal task T31831021

* check for console existence before calling console.error

* Move DEV check into separate block
2018-07-25 08:58:18 -07:00
Brian Vaughn
dbd16c8a96 Add @flow directive to findDOMNode shim (#13265)
* Add @flow directive to findDOMNode shim
2018-07-24 14:53:54 -07:00
Andrew Clark
ca0941fce3 Add regression test for Placeholder fallbacks with lifecycle methods (#13254)
Found by @rhagigi

Co-authored-by: Royi Hagigi <rhagigi@gmail.com>
Co-authored-by: Andrew Clark <acdlite@me.com>
2018-07-23 17:47:40 -07:00
Sebastian Markbåge
a32c727f2e Optimize readContext for Subsequent Reads of All Bits (#13248)
This is likely the common case because individual component authors
will casually call read on common contexts like the cache, or cache
provider.

Where as libraries like Relay only call read once per fragment and pass
all observed bits at once.
2018-07-21 20:13:46 -07:00
Andrew Clark
2b509e2c8c [Experimental] API for reading context from within any render phase function (#13139)
* Store list of contexts on the fiber

Currently, context can only be read by a special type of component,
ContextConsumer. We want to add support to all fibers, including
classes and functional components.

Each fiber may read from one or more contexts. To enable quick, mono-
morphic access of this list, we'll store them on a fiber property.

* Context.unstable_read

unstable_read can be called anywhere within the render phase. That
includes the render method, getDerivedStateFromProps, constructors,
functional components, and context consumer render props.

If it's called outside the render phase, an error is thrown.

* Remove vestigial context cursor

Wasn't being used.

* Split fiber.expirationTime into two separate fields

Currently, the `expirationTime` field represents the pending work of
both the fiber itself — including new props, state, and context — and of
any updates in that fiber's subtree.

This commit adds a second field called `childExpirationTime`. Now
`expirationTime` only represents the pending work of the fiber itself.
The subtree's pending work is represented by `childExpirationTime`.

The biggest advantage is it requires fewer checks to bailout on already
finished work. For most types of work, if the `expirationTime` does not
match the render expiration time, we can bailout immediately without
any further checks. This won't work for fibers that have
`shouldComponentUpdate` semantics (class components), for which we still
need to check for props and state changes explicitly.

* Performance nits

Optimize `readContext` for most common case
2018-07-20 16:49:06 -07:00
Dan Abramov
5776fa3fcf Update www warning shim (#13244) 2018-07-20 16:50:43 +01:00
Dan Abramov
3d3506d37d Include Modes in the component stack (#13240)
* Add a test that StrictMode shows up in the component stack

The SSR test passes. The client one doesn't.

* Include Modes in component stack

* Update other tests to include modes
2018-07-19 22:11:59 +01:00
Andrew Clark
71b4e99901 [react-test-renderer] Jest matchers for async tests (#13236)
Adds custom Jest matchers that help with writing async tests:

- `toFlushThrough`
- `toFlushAll`
- `toFlushAndThrow`
- `toClearYields`

Each one accepts an array of expected yielded values, to prevent
false negatives.

Eventually I imagine we'll want to publish this on npm.
2018-07-19 10:26:24 -07:00
Dan Abramov
8121212f0d Fix warning extraction script 2018-07-19 13:04:56 +01:00
Dan Abramov
2a1bc3f74c Format messages in unexpected console.error() test failure 2018-07-19 12:15:01 +01:00
Dan Abramov
2c560cb995 Fix unwinding starting with a wrong Fiber on error in the complete phase (#13237)
* Add a repro case for profiler unwinding

This currently fails the tests due to an unexpected warning.

* Add a regression test for context stack

* Simplify the first test case

* Update nextUnitOfWork inside completeUnitOfWork()

The bug was caused by a structure like this:

    </Provider>
  </div>
</errorInCompletePhase>

We forgot to update nextUnitOfWork so it was still pointing at Provider when errorInCompletePhase threw. As a result, we would try to unwind from Provider (rather than from errorInCompletePhase), and thus pop the Provider twice.
2018-07-19 02:16:10 +01:00
Dan Abramov
ead08827d0 Add more flexibility in testing errors in begin/complete phases (#13235)
* Add more flexibility in testing errors in begin/complete phases

* Update too
2018-07-19 00:23:10 +01:00
Andrew Clark
e4e58343e4 Move unstable_yield to main export (#13232)
The `yield` method isn't tied to any specific root. Putting this
on the main export enables test components that are not within scope
to yield even if they don't have access to the currently rendering
root instance. This follows the pattern established by ReactNoop.

Added a `clearYields` method, too, for reading values that were yielded
out of band. This is also based on ReactNoop.
2018-07-18 16:10:56 -07:00
Mateusz Burzyński
0e235bb8f7 Removed unused state argument in unsubscribe method of <Subscription /> (#13233) 2018-07-18 13:52:59 -07:00
Dan Abramov
236f608723 Fail tests if toWarnDev() does not wrap warnings in array (#13227)
* Fail tests if toWarn() does not wrap warnings in array

* Fix newly failing tests

* Another fix
2018-07-18 02:38:39 +01:00
Dan Abramov
acbb4f93f0 Remove the use of proxies for synthetic events in DEV (#13225)
* Revert #5947 and disable the test

* Fix isDefaultPrevented and isPropagationStopped to not get nulled

This was a bug introduced by #5947. It's very confusing that they become nulled while stopPropagation/preventDefault don't.

* Add a comment

* Run Prettier

* Fix grammar
2018-07-18 00:14:13 +01:00
Nicole Levy
171e0b7d44 Fix “no onChange handler” warning to fire on falsy values ("", 0, false) too (#12628)
* throw warning for falsey `value` prop

* add nop onChange handler to tests for `value` prop

* prettier

* check for falsey checked

* fix tests for `checked` prop

* new tests for `value` prop

* test formatting

* forgot 0 (:

* test for falsey `checked` prop

* add null check

* Update ReactDOMInput-test.js

* revert unneeded change

* prettier

* Update DOMPropertyOperations-test.js

* Update ReactDOMInput-test.js

* Update ReactDOMSelect-test.js

* Fixes and tests

* Remove unnecessary changes
2018-07-17 22:46:43 +01:00
Fumiya Shibusawa
606c30aa5f fixed a typo in commentout in ReactFiberUnwindWork.js (#13172) 2018-07-17 20:21:53 +01:00
Johan Henriksson
9f78913b20 Update prettier (#13205)
* Update Prettier to 1.13.7

* Apply Prettier changes

* Pin prettier version

* EOL
2018-07-17 20:18:34 +01:00
jddxf
6d3e262880 Remove unnecessary typeof checks (#13196)
This aligns with #10351 which removed extra check on `injectInternals`.
2018-07-17 20:18:15 +01:00
Dan Abramov
82c7ca4cca Add component stacks to some warnings (#13218) 2018-07-17 20:15:03 +01:00
Thibault Malbranche
21ac62c77a Fix a portal unmounting crash for renderers with distinct Instance and Container (#13220)
* Fix Portal unmount

Before that change, currentParent is not set as a container even if it should so it break on react-native and probably other custom renderers

* Assert that *ToContainer() methods receive containers

* Add regression tests

* Add comments
2018-07-17 01:35:33 +01:00
Dan Abramov
d6a0626b38 Set current fiber during before-mutation traversal (#13219) 2018-07-17 01:11:56 +01:00
Dan Abramov
fd410f43fc Protect against passing component stack twice
This is a leftover from #13161 that I forgot to include.
It ensures we don't accidentally write code in the old way and end up passing the stack twice.
2018-07-16 22:47:41 +01:00
Dan Abramov
f9358c51c8 Change warning() to automatically inject the stack, and add warningWithoutStack() as opt-out (#13161)
* Use %s in the console calls

* Add shared/warningWithStack

* Convert some warning callsites to warningWithStack

* Use warningInStack in shared utilities and remove unnecessary checks

* Replace more warning() calls with warningWithStack()

* Fixes after rebase + use warningWithStack in react

* Make warning have stack by default; warningWithoutStack opts out

* Forbid builds that may not use internals

* Revert newly added stacks

I changed my mind and want to keep this PR without functional changes. So we won't "fix" any warnings that are already missing stacks. We'll do it in follow-ups instead.

* Fix silly find/replace mistake

* Reorder imports

* Add protection against warning argument count mismatches

* Address review
2018-07-16 22:31:59 +01:00
Dan Abramov
854c953905 Fix matcher tests to be DEV-only 2018-07-16 20:35:43 +01:00
Dan Abramov
467d139101 Enforce presence or absence of component stack in tests (#13215)
* Enforce presence or absence of stack in tests

* Rename expectNoStack to withoutStack

* Fix lint

* Add some tests for toWarnDev()
2018-07-16 20:20:18 +01:00
Andrew Clark
43ffae2d17 Suspending inside a constructor outside of strict mode (#13200)
* Suspending inside a constructor outside of strict mode

Outside of strict mode, suspended components commit in an incomplete
state, then are synchronously deleted in a subsequent commit. If a
component suspends inside the constructor, it mounts without
an instance.

This breaks at least one invariant: during deletion, we assume that
every mounted component has an instance, and check the instance for
the existence of `componentWillUnmount`.

Rather than add a redundant check to the deletion of every class
component, components that suspend inside their constructor and outside
of strict mode are turned into empty functional components before they
are mounted. This is a bit weird, but it's an edge case, and the empty
component will be synchronously unmounted regardless.

* Do not fire lifecycles of a suspended component

In non-strict mode, suspended components commit, but their lifecycles
should not fire.
2018-07-13 11:24:03 -07:00
Dan Abramov
659a29cecf Reorganize how shared internals are accessed (#13201)
* Reorganize how shared internals are accessed

* Update forks.js
2018-07-13 02:45:37 +01:00
Brian Vaughn
58f3b29d91 Added SSR/hydration tests for modes, forwardRef, and Profiler (#13195)
* Added more SSR tests for modes, profiler, and forward-ref
2018-07-12 08:35:21 -07:00
Dan Abramov
1c89cb62fd Use ReactDebugCurrentFrame.getStackAddendum() in element validator (#13198)
Instead of wrapping ReactDebugCurrentFrame.getStackAddendum() call into a custom wrapper inside ReactElementValidator, "teach" the main ReactDebugCurrentFrame.getStackAddendum() to take currently validating element into account.
2018-07-12 16:18:24 +01:00
Dan Abramov
e6076ecf48 Remove ad-hoc forks of getComponentName() and fix it (#13197)
* Fix getComponentName() for types with nested $$typeof

* Temporarily remove Profiler ID from messages

* Change getComponentName() signature to take just type

It doesn't actually need the whole Fiber.

* Remove getComponentName() forks in isomorphic and SSR

* Remove unnecessary .type access where we already have a type

* Remove unused type
2018-07-12 07:32:06 -07:00
Philipp Spieß
32f6f258ba Remove event simulation of onChange events (#13176)
* Remove event simulation of onChange events

It’s time to get rid of even more `ReactTestUtils.Simulate`s. In this PR
we remove the event simulation from all onChange tests. To do this, we
have to get a setter to the untracked value/checked props.

All remaining `ReactTestUtils.Simulate` calls are either testing
ReactTestUtils or assert that they do/don't throw.

* Use input instead of change event for all but checkbox, radio, and select
2018-07-12 12:11:35 +01:00
Sen Yang
9ca37f8431 docs: update comments (#13043) 2018-07-11 14:31:48 -07:00
Moti Zilberman
f89f25f471 Correct type of ref in forwardRef render() (#13100)
`React$ElementRef<T>` is the type of the ref _instance_ for a component of type T, whereas `React$Ref<T>` is the type of the ref _prop_ for a component of type T, which seems to be the intended type here.
2018-07-11 14:27:46 -07:00
Brian Vaughn
7b99ceabec Deprecate test utils mock component follow up (#13194)
* De-duplicate the mockComponent deprecation warning

* Added fb.me link to mockComponent
2018-07-11 11:56:44 -07:00
Dan Abramov
6ebc8f3c07 Add support for re-entrant SSR stacks (#13181)
* Add failing tests

* Fix re-entrancy in ReactDOMServer
2018-07-11 19:43:54 +01:00
Brian Vaughn
d64d1ddb57 Deprecate ReactTestUtils.mockComponent() (#13193)
Deprecate ReactTestUtils.mockComponent()
2018-07-11 10:18:49 -07:00
dongyuwei
afd46490d0 update devEngines to include nodejs 10.x (#13190) 2018-07-11 11:46:44 +01:00
Brian Vaughn
e79366d549 Link create-subscription doc to GH issue with de-opt explanation (#13187) 2018-07-10 14:00:06 -07:00
Brian Vaughn
1f32d3c6dc Test renderer flushAll method verifies an array of expected yields (#13174) 2018-07-09 09:05:13 -07:00
Dan Abramov
377e1a049e Add a test for SSR stack traces (#13180) 2018-07-09 14:41:48 +01:00
Dan Abramov
96d38d178a Fix concatenation of null to a warning message (#13166) 2018-07-09 13:56:24 +01:00
Brian Vaughn
095dd5049c Add DEV warning if forwardRef function doesn't use the ref param (#13168)
* Add DEV warning if forwardRef function doesn't use the ref param
* Fixed a forwardRef arity warning in another test
2018-07-07 08:11:30 -07:00
Dan Abramov
5662595677 Refactor stack handling (no functional changes) (#13165)
* Refactor ReactDebugCurrentFiber to use named exports

This makes the difference between it and ReactFiberCurrentFrame a bit clearer.

ReactDebugCurrentFiber is Fiber's own implementation.
ReactFiberCurrentFrame is the thing that holds a reference to the current implementation and delegates to it.

* Unify ReactFiberComponentTreeHook and ReactDebugCurrentFiber

Conceptually they're very related.

ReactFiberComponentTreeHook contains implementation details of reading Fiber's stack (both in DEV and PROD).
ReactDebugCurrentFiber contained a reference to the current fiber, and used the above utility.

It was confusing when to use which one. Colocating them makes it clearer what you could do with each method.

In the future, the plan is to stop using these methods explicitly in most places, and instead delegate to a warning system that includes stacks automatically. This change makes future refactorings simpler by colocating related logic.

* Rename methods to better reflect their meanings

Clarify which are DEV or PROD-only.
Clarify which can return null.

I believe the "work in progress only" was a mistake. I introduced it because I wasn't sure what guarantees we have around .return. But we know for sure that following a .return chain gives us an accurate stack even if we get into WIP trees because we don't have reparenting. So it's fine to relax that naming.

* Rename ReactDebugCurrentFiber -> ReactCurrentFiber

It's not completely DEV-only anymore.
Individual methods already specify whether they work in DEV or PROD in their names.
2018-07-07 01:09:41 +01:00
Brandon Dail
ebbd221432 Configure react-test-renderer as a secondary (#13164) 2018-07-06 16:04:45 -07:00
Andrew Clark
ddc91af795 Decrease nested update limit from 1000 to 50 (#13163)
An infinite update loop can occur when an update is scheduled inside a
lifecycle method, which causes a re-render, which schedules another
update, and so on. Before the Fiber rewrite, this scenario resulted in a
stack overflow.

Because Fiber does not use the JavaScript stack, we maintain our own
counter to track the number of nested, synchronous updates. We throw an
error if the limit is exceeded.

The nested update limit is currently 1000. I chose this number
arbitrarily, certain that there was no valid reason for a component to
schedule so many synchronous re-renders.

I think we can go much lower. This commit decreases the limit to 50. I
believe this is still comfortably above the reasonable number of
synchronous re-renders a component may perform.

This will make it easier for developers to debug infinite update bugs
when they occur.
2018-07-06 15:50:31 -07:00
Andrew Clark
3596e40b39 Fix nested update bug (#13160)
A recent change to the scheduler caused a regression when scheduling
many updates within a single batch. Added a test case that would
have caught this.
2018-07-06 13:55:18 -07:00
Chang Yan
449f6ddd5c create a new FeatureFlags file for test renderer on www (#13159) 2018-07-06 12:55:29 -07:00
Dan Abramov
f762b3abb1 Run react-dom SSR import test in jsdom-less environment (#13157) 2018-07-06 16:43:43 +01:00
Brian Vaughn
6f6b560a64 Renamed selfBaseTime/treeBaseTime Fiber attributes to selfBaseDuration/treeBaseDuration (#13156)
This is an unobservable change to all but the (under development) DevTools Profiler plugin. It is being done so that the plugin can safely feature detect a version of React that supports it. The profiler API has existed since the 16.4.0 release, but it did not support the DevTools plugin prior to PR #13058.

Side note: I am not a big fan of the term "base duration". Both it and "actual duration" are kind of awkward and vague. If anyone has suggestions for better names– this is the best time to bikeshed about them.
2018-07-06 08:25:29 -07:00
Dan Abramov
1386ccddd8 Fix ReferenceError when requestAnimationFrame isn't defined (#13152)
* Make the test fail

* Fix rAF detection to avoid a ReferenceError
2018-07-05 19:42:45 +01:00
Dan Abramov
f5779bbc10 Run server rendering test on bundles (#13153) 2018-07-05 19:42:22 +01:00
Brian Vaughn
9faf389e79 Reset profiler timer correctly after errors (#13123)
* Reset ReactProfilerTimer's DEV-only Fiber stack after an error

* Added ReactNoop functionality to error during "complete" phase

* Added failing profiler stack unwinding test

* Potential fix for unwinding time bug

* Renamed test

* Don't record time until complete phase succeeds. Simplifies unwinding.

* Expanded ReactProfilerDevToolsIntegration-test coverage a bit

* Added unstable_flushWithoutCommitting method to noop renderer

* Added failing multi-root/batch test to ReactProfiler-test

* Beefed up tests a bit and added some TODOs

* Profiler timer differentiates between batched commits and in-progress async work

This was a two-part change:
1) Don't count time spent working on a batched commit against yielded async work.
2) Don't assert an empty stack after processing a batched commit (because there may be yielded async work)

This is kind of a hacky solution, and may have problems that I haven't thought of yet. I need to commit this so I can mentally clock out for a bit without worrying about it. I will think about it more when I'm back from PTO. In the meanwhile, input is welcome.

* Removed TODO

* Replaced FiberRoot map with boolean

* Removed unnecessary whitespace edit
2018-07-05 11:38:06 -07:00
XuMM_12
85fe4ddce7 Fix - issue #12765 / the checked attribute is not initially set on the input (#13114) 2018-07-04 16:00:42 -04:00
Rouven Weßling
07fefe3331 Drop handling for ms and O prefixes for CSS transition and animation events. (#13133)
Internet Explorer never needed the prefix and Opera 11.5 is no longer supported by React.
2018-07-04 18:20:02 +01:00
Andrew Clark
88d7ed8bfb React.Timeout -> React.Placeholder (#13105)
Changed the API to match what we've been using in our latest discussions.

Our tentative plans are for <Placeholder> to automatically hide the timed-out
children, instead of removing them, so their state is not lost. This part is
not yet implemented. We'll likely have a lower level API that does not include
the hiding behavior. This is also not yet implemented.
2018-07-03 19:47:00 -07:00
Andrew Clark
f128fdea48 Suspending outside of strict trees and async trees (#13098)
We can support components that suspend outside of an async mode tree
by immediately committing their placeholders.

In strict mode, the Timeout acts effectively like an error boundary.
Within a single render pass, we unwind to the nearest Timeout and
re-render the placeholder view.

Outside of strict mode, it's not safe to unwind and re-render the
siblings without committing. (Technically, this is true of error
boundaries, too, though probably not a huge deal, since we don't support
using error boundaries for control flow (yet, at least)). We need to be
clever. What we do is pretend the suspended component rendered null.*
There's no unwinding. The siblings commit like normal.

Then, in the commit phase, schedule an update on the Timeout to
synchronously re-render the placeholder. Although this requires an extra
commit, it will not be observable. And because the siblings were not
blocked from committing, they don't have to be strict mode compatible.

Another caveat is that if a component suspends during an async render,
but it's captured by a non-async Timeout, we need to revert to sync
mode. In other words, if any non-async component renders, the entire
tree must complete and commit without yielding.

* The downside of rendering null is that the existing children will be
deleted. We should hide them instead. I'll work on this in a follow-up.
2018-07-03 19:44:19 -07:00
Andrew Clark
aa8266c4f7 Prepare placeholders before timing out (#13092)
* Prepare placeholders before timing out

While a tree is suspended, prepare for the timeout by pre-rendering the
placeholder state.

This simplifies the implementation a bit because every render now
results in a completed tree.

* Suspend inside an already timed out Placeholder

A component should be able to suspend inside an already timed out
placeholder. The time at which the placeholder committed is used as 
the start time for a subsequent suspend.

So, if a placeholder times out after 3 seconds, and an inner
placeholder has a threshold of 2 seconds, the inner placeholder will
not time out until 5 seconds total have elapsed.
2018-07-03 19:22:41 -07:00
Toru Kobayashi
c039c16f21 Fix this in a functional component for ShallowRenderer (#13144) 2018-07-03 17:47:40 +01:00
Joseph Lin
6731bfbed7 Update README.md (#13085)
Fix grammatical error via addition of comma.
2018-06-30 23:45:06 +01:00
Sebastian Markbåge
64e1921aab Fix Flow type that event target can be null (#13124)
We pass null sometimes when the event target has disappeared. E.g. when
touches fires on a deleted node.
2018-06-29 12:51:48 -07:00
Hilbrand Bouwkamp
bf32a3d195 Updated url to Code of Conduct page (#13126)
url is not working. Did a search on code.fb.com that returned the page I've put in the commit.
2018-06-29 13:27:24 +01:00
Dan Abramov
183aefa51f More links 2018-06-27 17:59:29 +01:00
Dan Abramov
3297102de6 Reorder sections 2018-06-27 17:12:12 +01:00
Dan Abramov
f4b6a9f8ee Just remove this sentence 2018-06-27 17:09:45 +01:00
Dan Abramov
3eedcb1fda Tweak links in README 2018-06-27 17:07:26 +01:00
Brian Vaughn
6d6de6011c Add PROFILE bundles for www+DOM and fbsource+RN/RF (#13112) 2018-06-26 13:28:41 -07:00
Dan Abramov
71a60ddb16 Add link to another article about React renderers 2018-06-26 16:45:03 +01:00
Rauno Freiberg
9e6c99ca2e Fix README typo (#13110) 2018-06-26 07:17:02 -04:00
Dan Abramov
baff5cc2f6 Update links 2018-06-26 01:31:36 +01:00
Jason Williams
6a530e3baa adding check for mousemove (#13090)
* adding check for mousemove

* adding unit test for SyntheticMouseEvent

* changing test to start with 2, removing comments
2018-06-24 10:24:54 +01:00
Dustin Masters
c35a1e7483 Fix crash during server render in react 16.4.1. (#13088)
* Fix crash during server render.

setTimeout and clearTimeout may not be available in some server-render environments (such as ChakraCore in React.NET), and loading ReactScheduler.js will cause a crash unless the existence of the variables are checked via a typeof comparison.

https://github.com/reactjs/React.NET/issues/555

The crash did not occur in 16.4.0, and the change appears to have been introduced here: https://github.com/facebook/react/pull/12931/files#diff-bbebc3357e1fb99ab13ad796e04b69a6L47

I tested this by using yarn link and running it with a local copy of React.NET. I am unsure the best way to unit test this change, since assigning null to `setTimeout` causes an immediate crash within the Node REPL.

* Fix flow errors and log warning if setTimeout / clearTimeout are
not defined / not a function.

* Use invariant to assert setTimeout / clearTimeout are functions

* Remove use of invariant

* Explain
2018-06-22 20:07:54 +01:00
Flarnie Marchan
076bbeace7 Fall back to 'setTimeout' when 'requestAnimationFrame' is not called (#13091)
* Add fixture test for schedule running when tab is backgrounded

**what is the change?:**
Just adding a test to the fixture, where we can easily see whether
scheduled callbacks are called after switching away from the fixture
tab.

**why make this change?:**
We are about to fix the schedule module so that it still runs even when
the tab is in the backround.

**test plan:**
Manually tested the fixture, verified that it works as expected and
right now callbacks are not called when the tab is in the background.

**issue:**
Internal task T30754186

* Fall back to 'setTimeout' when 'requestAnimationFrame' is not called

**what is the change?:**
If 'requestAnimationFrame' is not called for 100ms we fall back to
'setTimeout' to schedule the postmessage.

**why make this change?:**
When you start loading a page, and then switch tabs,
'requestAnimationFrame' is throttled or not called until you come back
to that tab. That means React's rendering, any any other scheduled work,
are paused.

Users expect the page to continue loading, and rendering is part of the
page load in a React app. So we need to continue calling callbacks.

**test plan:**
Manually tested using the new fixture test, observed that the callbacks
were called while switched to another tab. They were called more
slowly, but that seems like a reasonable thing.

**issue:**
Internal task T30754186

* make arguments more explicit
2018-06-22 09:13:47 -07:00
Michael Ridgway
da5c87bdfa Fixes children when using dangerouslySetInnerHtml in a selected <option> (#13078)
* Fixes children when using dangerouslySetInnerHtml in a selected <option>

This fixes an inadvertent cast of undefined children to an empty string when creating an option tag that will be selected:

```
  <select defaultValue="test">
    <option value='test' dangerouslySetInnerHTML={{ __html: '&rlm; test'}} />
  </select>
```

This causes an invariant error because both children and dangerouslySetInnerHTML are set.

* PR fix and new ReactDOMServerIntegrationForms test

* Account for null case

* Combine test cases into single test

* Add tests for failure cases

* Fix lint
2018-06-21 20:21:21 +01:00
Nathan Quarles
a960d18bc7 eliminate unnecessary do-while loop in renderRoot() (#13087) 2018-06-21 18:52:26 +01:00
Jason Williams
5b3d17a5f7 setting a flag, so that the first movement will have the correct value (#13082) 2018-06-20 22:48:53 +01:00
Brian Vaughn
b0f60895f7 Automatically Profile roots when DevTools is present (#13058)
* react-test-renderer injects itself into DevTools if present
* Fibers are always opted into ProfileMode if DevTools is present
* Added simple test for DevTools + always profiling behavior
2018-06-20 09:24:52 -07:00
Nathan Quarles
ae8c6dd534 remove some redundant lines (#13077)
* remove another couple of redundant lines

* a few more
2018-06-20 16:35:03 +01:00
Dan Abramov
0fcf92d06d Add a link to custom renderer intro article 2018-06-20 14:46:18 +01:00
Andrew Clark
97af3e1f3a Do not add additional work to a batch that is already rendering (#13072)
* Do not add additional work to a batch that is already rendering.

Otherwise, the part of the tree that hasn't rendered yet will receive
the latest state, but the already rendered part will show the state
as it was before the intervening update.

* Reduce non-helpfulness of comments
2018-06-19 10:36:56 -07:00
Andrew Clark
4fe6eec15b Always batch updates of like priority within the same event (#13071)
Expiration times are computed by adding to the current time (the start
time). However, if two updates are scheduled within the same event, we
should treat their start times as simultaneous, even if the actual clock
time has advanced between the first and second call.

In other words, because expiration times determine how updates are
batched, we want all updates of like priority that occur within the same
event to receive the same expiration time. Otherwise we get tearing.

We keep track of two separate times: the current "renderer" time and the
current "scheduler" time. The renderer time can be updated whenever; it
only exists to minimize the calls performance.now.

But the scheduler time can only be updated if there's no pending work,
or if we know for certain that we're not in the middle of an event.
2018-06-19 10:34:19 -07:00
Dan Abramov
8e87c139b4 Remove transitive dependency on fbjs (#13075) 2018-06-19 17:52:37 +01:00
Dan Abramov
aeda7b745d Remove fbjs dependency (#13069)
* Inline fbjs/lib/invariant

* Inline fbjs/lib/warning

* Remove remaining usage of fbjs in packages/*.js

* Fix lint

* Remove fbjs from dependencies

* Protect against accidental fbjs imports

* Fix broken test mocks

* Allow transitive deps on fbjs/ for UMD bundles

* Remove fbjs from release script
2018-06-19 16:03:45 +01:00
Dan Abramov
b1b3acbd6b Inline fbjs/lib/emptyObject (#13055)
* Inline fbjs/lib/emptyObject

* Explicit naming

* Compare to undefined

* Another approach for detecting whether we can mutate

Each renderer would have its own local LegacyRefsObject function.

While in general we don't want `instanceof`, here it lets us do a simple check: did *we* create the refs object?
Then we can mutate it.

If the check didn't pass, either we're attaching ref for the first time (so we know to use the constructor),
or (unlikely) we're attaching a ref to a component owned by another renderer. In this case, to avoid "losing"
refs, we assign them onto the new object. Even in that case it shouldn't "hop" between renderers anymore.

* Clearer naming

* Add test case for strings refs across renderers

* Use a shared empty object for refs by reading it from React

* Remove string refs from ReactART test

It's not currently possible to resetModules() between several renderers
without also resetting the `React` module. However, that leads to losing
the referential identity of the empty ref object, and thus subsequent
checks in the renderers for whether it is pooled fail (and cause assignments
to a frozen object).

This has always been the case, but we used to work around it by shimming
fbjs/lib/emptyObject in tests and preserving its referential identity.
This won't work anymore because we've inlined it. And preserving referential
identity of React itself wouldn't be great because it could be confusing during
testing (although we might want to revisit this in the future by moving its
stateful parts into a separate package).

For now, I'm removing string ref usage from this test because only this is
the only place in our tests where we hit this problem, and it's only
related to string refs, and not just ref mechanism in general.

* Simplify the condition
2018-06-19 13:41:42 +01:00
Dan Abramov
ae14317d68 Inline fbjs/lib/emptyFunction (#13054) 2018-06-15 18:45:14 +01:00
Dan Abramov
72434a7686 Remove or inline some fbjs dependencies (#13046) 2018-06-15 18:12:45 +01:00
Jason Williams
64c54edea4 Adding movementX and movementY to synthenticMouseEvent fixes #6723 (#9018)
* adding movementX and movementY into syntheticMouseEvent

* fixing case mistake

* Add test fixture for movementX/Y fields
2018-06-15 09:15:36 -04:00
Andrew Clark
9bd4d1fae2 Synchronously restart when an error is thrown during async rendering (#13041)
In async mode, events are interleaved with rendering. If one of those
events mutates state that is later accessed during render, it can lead
to inconsistencies/tearing.

Restarting the render from the root is often sufficient to fix the
inconsistency. We'll flush the restart synchronously to prevent yet
another mutation from happening during an interleaved event.

We'll only restart during an async render. Sync renders are already
sync, so there's no benefit in restarting. (Unless a mutation happens
during the render phase, but we don't support that.)
2018-06-14 16:37:30 -07:00
Andrew Clark
9bda7b28f3 Suspended high pri work forces lower priority work to expire early (#12965)
* onFatal, onComplete, onSuspend, onYield

For every call to renderRoot, one of onFatal, onComplete, onSuspend,
and onYield is called upon exiting. We use these in lieu of returning a
tuple. I've also chosen not to inline them into renderRoot because these
will eventually be lifted into the renderer.

* Suspended high pri work forces lower priority work to expire early

If an error is thrown, and there is lower priority pending work, we
retry at the lower priority. The lower priority work should expire
at the same time at which the high priority work would have expired.
Effectively, this increases the priority of the low priority work.

Simple example: If an error is thrown during a synchronous render, and
there's an async update, the async update should flush synchronously in
case it's able to fix the error. I've added a unit test for
this scenario.

User provided timeouts should have the same behavior, but I'll leave
that for a future PR.
2018-06-14 15:29:27 -07:00
Crux
2e75779075 Fix incorrect data in compositionend event with Korean IME on IE11 (#10217) (#12563)
* Add isUsingKoreanIME function to check if a composition event was triggered by Korean IME

* Add Korean IME check alongside useFallbackCompositionData and disable fallback mode with Korean IME
2018-06-14 16:35:05 +01:00
Sebastian Markbåge
bc963f353d setJSResponder in Fabric renderer (#13031) 2018-06-13 17:03:26 -07:00
Sebastian Markbåge
051637da61 Extract Fabric event handlers from canonical props (#13024)
We need a different "component tree" thingy for Fabric.

A lot of this doesn't really make much sense in a persistent world but
currently we can't dispatch events to memoizedProps on a Fiber since
they're pooled. Also, it's unclear what the semantics should be when we
dispatch an event that happened when the old props were in effect but now
we have new props already.

This implementation tries to use the last committed props but also fails
at that because we don't have a commit hook in the persistent mode.

However, at least it doesn't crash when dispatching. :)
2018-06-13 16:20:48 -07:00
Flarnie Marchan
2a8085980f Remove rAF fork (#12980)
* Remove rAF fork

**what is the change?:**
Undid https://github.com/facebook/react/pull/12837

**why make this change?:**
We originally forked rAF because we needed to pull in a particular
version of rAF internally at Facebook, to avoid grabbing the default
polyfilled version.

The longer term solution, until we can get rid of the global polyfill
behavior, is to initialize 'schedule' before the polyfilling happens.

Now that we have landed and synced
https://github.com/facebook/react/pull/12900 successfully, we can
initialize 'schedule' before the polyfill runs.
So we can remove the rAF fork. Here is how it will work:

1. Land this PR on Github.
2. Flarnie will quickly run a sync getting this change into www.
3. We delete the internal forked version of
   'requestAnimationFrameForReact'.
4. We require 'schedule' in the polyfill file itself, before the
   polyfilling happens.

**test plan:**
Flarnie will manually try the above steps locally and verify that things
work.

**issue:**
Internal task T29442940

* fix nits

* fix tests, fix changes from rebasing

* fix lint
2018-06-13 10:57:35 -07:00
Andrew Clark
e0c78344e2 Retry on error if there's lower priority pending work (#12957)
* Remove enableSuspense flag from PendingPriority module

We're going to use this for suspending on error, too.

* Retry on error if there's lower priority pending work

If an error is thrown, and there's lower priority work, it's possible
the lower priority work will fix the error. Retry at the lower priority.

If an error is thrown and there's no more work to try, handle the error
like we normally do (trigger the nearest error boundary).
2018-06-13 10:47:14 -07:00
Dan Abramov
74b1723df1 Update changelog for 16.4.1 2018-06-13 17:23:59 +01:00
688 changed files with 40304 additions and 11047 deletions

View File

@@ -37,10 +37,12 @@ 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,
'space-before-function-paren': OFF,
'valid-typeof': [ERROR, {requireStringLiterals: true}],
// React & JSX
// Our transforms set this automatically
@@ -64,6 +66,7 @@ module.exports = {
// CUSTOM RULES
// the second argument of warning/invariant should be a literal string
'react-internal/no-primitive-constructors': ERROR,
'react-internal/no-to-warn-dev-within-to-throw': ERROR,
'react-internal/warning-and-invariant-args': ERROR,
},
@@ -82,5 +85,6 @@ module.exports = {
spyOnDevAndProd: true,
spyOnProd: true,
__PROFILE__: true,
__UMD__: true,
},
};

View File

@@ -1,17 +0,0 @@
{
"excludeGlob": [
"node_modules/**",
"packages/**/__mocks__/*.js",
"packages/**/__tests__/*.js"
],
"includeGlob": [
"packages/**/src/**/*.js"
],
"outputDir": "flow-coverage",
"threshold": 90,
"type": [
"html",
"json",
"text"
]
}

1
.gitignore vendored
View File

@@ -9,7 +9,6 @@ __benchmarks__
build/
remote-repo/
coverage/
flow-coverage/
.module-cache
fixtures/dom/public/react-dom.js
fixtures/dom/public/react.js

View File

@@ -6,6 +6,7 @@ module.exports = {
jsxBracketSameLine: true,
trailingComma: 'es5',
printWidth: 80,
parser: 'babylon',
overrides: [
{

View File

@@ -5,6 +5,85 @@
Click to see more.
</summary>
</details>
## 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
* Add support for React DevTools Profiler ([@bvaughn](https://github.com/bvaughn) in [#13058](https://github.com/facebook/react/issues/13058))
* Add `react-dom/profiling` entry point alias for profiling in production ([@bvaughn](https://github.com/bvaughn) in [#13570](https://github.com/facebook/react/issues/13570))
* Add `onAuxClick` event for browsers that support it ([@jquense](https://github.com/jquense) in [#11571](https://github.com/facebook/react/issues/11571))
* Add `movementX` and `movementY` fields to mouse events ([@jasonwilliams](https://github.com/jasonwilliams) in [#9018](https://github.com/facebook/react/issues/9018))
* 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 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 ([@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 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))
* Fix the `onClick` event not working inside a portal on iOS ([@aweary](https://github.com/aweary) in [#11927](https://github.com/facebook/react/issues/11927))
* Fix a performance issue when thousands of roots are re-rendered ([@gaearon](https://github.com/gaearon) in [#13335](https://github.com/facebook/react/issues/13335))
* Fix a performance regression that also caused `onChange` to not fire in some cases ([@gaearon](https://github.com/gaearon) in [#13423](https://github.com/facebook/react/issues/13423))
* Handle errors in more edge cases gracefully ([@gaearon](https://github.com/gaearon) in [#13237](https://github.com/facebook/react/issues/13237) and [@acdlite](https://github.com/acdlite) in [#13269](https://github.com/facebook/react/issues/13269))
* Don't use proxies for synthetic events in development ([@gaearon](https://github.com/gaearon) in [#12171](https://github.com/facebook/react/issues/12171))
* Warn when `"false"` or `"true"` is the value of a boolean DOM prop ([@motiz88](https://github.com/motiz88) in [#13372](https://github.com/facebook/react/issues/13372))
* Warn when `this.state` is initialized to `props` ([@veekas](https://github.com/veekas) in [#11658](https://github.com/facebook/react/issues/11658))
* Don't compare `style` on hydration in IE due to noisy false positives ([@mgol](https://github.com/mgol) in [#13534](https://github.com/facebook/react/issues/13534))
* Include `StrictMode` in the component stack ([@gaearon](https://github.com/gaearon) in [#13240](https://github.com/facebook/react/issues/13240))
* Don't overwrite `window.event` in IE ([@ConradIrwin](https://github.com/ConradIrwin) in [#11696](https://github.com/facebook/react/issues/11696))
* Improve component stack for the `folder/index.js` naming convention ([@gaearon](https://github.com/gaearon) in [#12059](https://github.com/facebook/react/issues/12059))
* Improve a warning when using `getDerivedStateFromProps` without initialized state ([@flxwu](https://github.com/flxwu) in [#13317](https://github.com/facebook/react/issues/13317))
* Improve a warning about invalid textarea usage ([@raunofreiberg](https://github.com/raunofreiberg) in [#13361](https://github.com/facebook/react/issues/13361))
* Treat invalid Symbol and function values more consistently ([@raunofreiberg](https://github.com/raunofreiberg) in [#13362](https://github.com/facebook/react/issues/13362) and [#13389](https://github.com/facebook/react/issues/13389))
* Allow Electron `<webview>` tag without warnings ([@philipp-spiess](https://github.com/philipp-spiess) in [#13301](https://github.com/facebook/react/issues/13301))
* Don't show the uncaught error addendum if `e.preventDefault()` was called ([@gaearon](https://github.com/gaearon) in [#13384](https://github.com/facebook/react/issues/13384))
* Warn about rendering Generators ([@gaearon](https://github.com/gaearon) in [#13312](https://github.com/facebook/react/issues/13312))
* Remove irrelevant suggestion of a legacy method from a warning ([@zx6658](https://github.com/zx6658) in [#13169](https://github.com/facebook/react/issues/13169))
* Remove `unstable_deferredUpdates` in favor of `unstable_scheduleWork` from `schedule` ([@gaearon](https://github.com/gaearon) in [#13488](https://github.com/facebook/react/issues/13488))
* Fix unstable asynchronous mode from doing unnecessary work when an update takes too long ([@acdlite](https://github.com/acdlite) in [#13503](https://github.com/facebook/react/issues/13503))
### React DOM Server
* Fix crash with nullish children when using `dangerouslySetInnerHtml` in a selected `<option>` ([@mridgway](https://github.com/mridgway) in [#13078](https://github.com/facebook/react/issues/13078))
* Fix crash when `setTimeout` is missing ([@dustinsoftware](https://github.com/dustinsoftware) in [#13088](https://github.com/facebook/react/issues/13088))
### React Test Renderer and Test Utils
* Fix `this` in a functional component for shallow renderer to be `undefined` ([@koba04](https://github.com/koba04) in [#13144](https://github.com/facebook/react/issues/13144))
* Deprecate a Jest-specific `ReactTestUtils.mockComponent()` helper ([@bvaughn](https://github.com/bvaughn) in [#13193](https://github.com/facebook/react/issues/13193))
* Warn about `ReactDOM.createPortal` usage within the test renderer ([@bvaughn](https://github.com/bvaughn) in [#12895](https://github.com/facebook/react/issues/12895))
* Improve a confusing error message ([@gaearon](https://github.com/gaearon) in [#13351](https://github.com/facebook/react/issues/13351))
### React ART
* Add support for DevTools ([@yunchancho](https://github.com/yunchancho) in [#13173](https://github.com/facebook/react/issues/13173))
### Schedule (Experimental)
* New package for cooperatively scheduling work in a browser environment. It's used by React internally, but its public API is not finalized yet. ([@flarnie](https://github.com/flarnie) in [#12624](https://github.com/facebook/react/pull/12624))
## 16.4.2 (August 1, 2018)
### React DOM Server
* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
* Fix a crash in the server renderer when an attribute is called `hasOwnProperty`. This fix is only available in `react-dom@16.4.2`. ([@gaearon](https://github.com/gaearon) in [#13303](https://github.com/facebook/react/pull/13303))
## 16.4.1 (June 13, 2018)
### React
* You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn](https://github.com/bvaughn) in [#12911](https://github.com/facebook/react/pull/12911))
@@ -27,8 +106,6 @@
* Allow multiple root children in test renderer traversal API. ([@gaearon](https://github.com/gaearon) in [#13017](https://github.com/facebook/react/pull/13017))
* Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz](https://github.com/fatfisz) in [#13030](https://github.com/facebook/react/pull/13030))
</details>
## 16.4.0 (May 23, 2018)
### React
@@ -68,6 +145,12 @@
* The [new host config shape](https://github.com/facebook/react/blob/c601f7a64640290af85c9f0e33c78480656b46bc/packages/react-noop-renderer/src/createReactNoop.js#L82-L285) is flat and doesn't use nested objects. ([@gaearon](https://github.com/gaearon) in [#12792](https://github.com/facebook/react/pull/12792))
## 16.3.3 (August 1, 2018)
### React DOM Server
* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
## 16.3.2 (April 16, 2018)
### React
@@ -177,6 +260,12 @@
* Fix a crash on updates. ([@rmhartog](https://github.com/rmhartog) in [#11955](https://github.com/facebook/react/pull/11955))
## 16.2.1 (August 1, 2018)
### React DOM Server
* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
## 16.2.0 (November 28, 2017)
### React
@@ -201,6 +290,12 @@
* Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)!
## 16.1.2 (August 1, 2018)
### React DOM Server
* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
## 16.1.1 (November 13, 2017)
### React
@@ -291,6 +386,12 @@ Starting with 16.1.0, we will no longer be publishing new releases on Bower. You
* First release of the [new experimental package](https://github.com/facebook/react/tree/master/packages/react-call-return) for parent-child communication. ([@gaearon](https://github.com/gaearon) in [#11364](https://github.com/facebook/react/pull/11364))
## 16.0.1 (August 1, 2018)
### React DOM Server
* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
## 16.0.0 (September 26, 2017)
### New JS Environment Requirements
@@ -777,7 +878,7 @@ Each of these changes will continue to work as before with a new warning until t
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132))
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they dont really touch the DOM due to event delegation. ([@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209))
### Other improvements
### Other improvements
- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies. ([@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303))
- Shallow renderer now exposes `getMountedInstance()`. ([@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918))

View File

@@ -1,3 +1,3 @@
# Code of Conduct
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct) so that you can understand what actions will and will not be tolerated.
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.fb.com/codeofconduct/) so that you can understand what actions will and will not be tolerated.

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

@@ -8,15 +8,28 @@ React is a JavaScript library for building user interfaces.
[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
## Installation
React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
* Use [Online Playgrounds](https://reactjs.org/docs/getting-started.html#online-playgrounds) to get a taste of React.
* [Add React to a Website](https://reactjs.org/docs/add-react-to-a-website.html) as a `<script>` tag in one minute.
* [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html) if you're looking for a powerful JavaScript toolchain.
You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-links.html), or as a `react` package on [npm](https://www.npmjs.com/).
## Documentation
You can find the React documentation [on the website](https://reactjs.org/docs).
It is divided into several sections:
* [Quick Start](https://reactjs.org/docs/hello-world.html)
Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
The documentation is divided into several sections:
* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
* [Main Concepts](https://reactjs.org/docs/hello-world.html)
* [Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)
* [API Reference](https://reactjs.org/docs/react-api.html)
* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
* [Where to Get Support](https://reactjs.org/community/support.html)
* [Contributing Guide](https://reactjs.org/docs/how-to-contribute.html)
@@ -34,26 +47,14 @@ class HelloMessage extends React.Component {
}
ReactDOM.render(
<HelloMessage name="John" />,
<HelloMessage name="Taylor" />,
document.getElementById('container')
);
```
This example will render "Hello John" into a container on the page.
This example will render "Hello Taylor" into a container on the page.
You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using [Babel](https://babeljs.io/) with a [React preset](https://babeljs.io/docs/plugins/preset-react/) to convert JSX into native JavaScript for browsers to digest.
## Installation
React is available as the `react` package on [npm](https://www.npmjs.com/). It is also available on a [CDN](https://reactjs.org/docs/cdn-links.html).
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
The recommended way to install React depends on your project. Here you can find short guides for the most common scenarios:
* [Trying Out React](https://reactjs.org/docs/try-react.html)
* [Creating a New Application](https://reactjs.org/docs/add-react-to-a-new-app.html)
* [Adding React to an Existing Application](https://reactjs.org/docs/add-react-to-an-existing-app.html)
You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
## Contributing

View File

@@ -5,8 +5,9 @@ init:
- git config --global core.autocrlf input
environment:
nodejs_version: 8
JAVA_HOME: C:\Program Files\Java\jdk1.8.0
matrix:
- nodejs_version: 10
# Finish on first failed build
matrix:

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

@@ -277,9 +277,9 @@
| Test Case | Flags | Result |
| --- | --- | --- |
| `action=(string)`| (changed)| `"https://reactjs.com/"` |
| `action=(empty string)`| (changed)| `"http://localhost:3000/"` |
| `action=(empty string)`| (initial)| `"http://localhost:3000/"` |
| `action=(array with string)`| (changed)| `"https://reactjs.com/"` |
| `action=(empty array)`| (changed)| `"http://localhost:3000/"` |
| `action=(empty array)`| (initial)| `"http://localhost:3000/"` |
| `action=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
| `action=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
| `action=(-1)`| (changed)| `"http://localhost:3000/-1"` |
@@ -287,16 +287,16 @@
| `action=(integer)`| (changed)| `"http://localhost:3000/1"` |
| `action=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
| `action=(float)`| (changed)| `"http://localhost:3000/99.99"` |
| `action=(true)`| (initial, warning)| `<empty string>` |
| `action=(false)`| (initial, warning)| `<empty string>` |
| `action=(true)`| (initial, warning)| `"http://localhost:3000/"` |
| `action=(false)`| (initial, warning)| `"http://localhost:3000/"` |
| `action=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
| `action=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
| `action=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
| `action=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
| `action=(symbol)`| (initial, warning)| `<empty string>` |
| `action=(function)`| (initial, warning)| `<empty string>` |
| `action=(null)`| (initial)| `<empty string>` |
| `action=(undefined)`| (initial)| `<empty string>` |
| `action=(symbol)`| (initial, warning)| `"http://localhost:3000/"` |
| `action=(function)`| (initial, warning)| `"http://localhost:3000/"` |
| `action=(null)`| (initial)| `"http://localhost:3000/"` |
| `action=(undefined)`| (initial)| `"http://localhost:3000/"` |
## `additive` (on `<animate>` inside `<svg>`)
| Test Case | Flags | Result |
@@ -389,8 +389,8 @@
| `allowFullScreen=(float)`| (changed)| `<boolean: true>` |
| `allowFullScreen=(true)`| (changed)| `<boolean: true>` |
| `allowFullScreen=(false)`| (initial)| `<boolean: false>` |
| `allowFullScreen=(string 'true')`| (changed)| `<boolean: true>` |
| `allowFullScreen=(string 'false')`| (changed)| `<boolean: true>` |
| `allowFullScreen=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `allowFullScreen=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `allowFullScreen=(string 'on')`| (changed)| `<boolean: true>` |
| `allowFullScreen=(string 'off')`| (changed)| `<boolean: true>` |
| `allowFullScreen=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -739,8 +739,8 @@
| `async=(float)`| (changed)| `<boolean: true>` |
| `async=(true)`| (changed)| `<boolean: true>` |
| `async=(false)`| (initial)| `<boolean: false>` |
| `async=(string 'true')`| (changed)| `<boolean: true>` |
| `async=(string 'false')`| (changed)| `<boolean: true>` |
| `async=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `async=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `async=(string 'on')`| (changed)| `<boolean: true>` |
| `async=(string 'off')`| (changed)| `<boolean: true>` |
| `async=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -802,26 +802,26 @@
| Test Case | Flags | Result |
| --- | --- | --- |
| `autoCapitalize=(string)`| (changed)| `"words"` |
| `autoCapitalize=(empty string)`| (initial)| `"sentences"` |
| `autoCapitalize=(empty string)`| (initial)| `<empty string>` |
| `autoCapitalize=(array with string)`| (changed)| `"words"` |
| `autoCapitalize=(empty array)`| (initial)| `"sentences"` |
| `autoCapitalize=(object)`| (initial)| `"sentences"` |
| `autoCapitalize=(numeric string)`| (initial)| `"sentences"` |
| `autoCapitalize=(-1)`| (initial)| `"sentences"` |
| `autoCapitalize=(0)`| (initial)| `"sentences"` |
| `autoCapitalize=(integer)`| (initial)| `"sentences"` |
| `autoCapitalize=(NaN)`| (initial, warning)| `"sentences"` |
| `autoCapitalize=(float)`| (initial)| `"sentences"` |
| `autoCapitalize=(true)`| (initial, warning)| `"sentences"` |
| `autoCapitalize=(false)`| (initial, warning)| `"sentences"` |
| `autoCapitalize=(string 'true')`| (initial)| `"sentences"` |
| `autoCapitalize=(string 'false')`| (initial)| `"sentences"` |
| `autoCapitalize=(string 'on')`| (initial)| `"sentences"` |
| `autoCapitalize=(empty array)`| (initial)| `<empty string>` |
| `autoCapitalize=(object)`| (changed)| `"sentences"` |
| `autoCapitalize=(numeric string)`| (changed)| `"sentences"` |
| `autoCapitalize=(-1)`| (changed)| `"sentences"` |
| `autoCapitalize=(0)`| (changed)| `"sentences"` |
| `autoCapitalize=(integer)`| (changed)| `"sentences"` |
| `autoCapitalize=(NaN)`| (changed, warning)| `"sentences"` |
| `autoCapitalize=(float)`| (changed)| `"sentences"` |
| `autoCapitalize=(true)`| (initial, warning)| `<empty string>` |
| `autoCapitalize=(false)`| (initial, warning)| `<empty string>` |
| `autoCapitalize=(string 'true')`| (changed)| `"sentences"` |
| `autoCapitalize=(string 'false')`| (changed)| `"sentences"` |
| `autoCapitalize=(string 'on')`| (changed)| `"sentences"` |
| `autoCapitalize=(string 'off')`| (changed)| `"none"` |
| `autoCapitalize=(symbol)`| (initial, warning)| `"sentences"` |
| `autoCapitalize=(function)`| (initial, warning)| `"sentences"` |
| `autoCapitalize=(null)`| (initial)| `"sentences"` |
| `autoCapitalize=(undefined)`| (initial)| `"sentences"` |
| `autoCapitalize=(symbol)`| (initial, warning)| `<empty string>` |
| `autoCapitalize=(function)`| (initial, warning)| `<empty string>` |
| `autoCapitalize=(null)`| (initial)| `<empty string>` |
| `autoCapitalize=(undefined)`| (initial)| `<empty string>` |
## `autoComplete` (on `<input>` inside `<div>`)
| Test Case | Flags | Result |
@@ -889,8 +889,8 @@
| `autoPlay=(float)`| (changed)| `<boolean: true>` |
| `autoPlay=(true)`| (changed)| `<boolean: true>` |
| `autoPlay=(false)`| (initial)| `<boolean: false>` |
| `autoPlay=(string 'true')`| (changed)| `<boolean: true>` |
| `autoPlay=(string 'false')`| (changed)| `<boolean: true>` |
| `autoPlay=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `autoPlay=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `autoPlay=(string 'on')`| (changed)| `<boolean: true>` |
| `autoPlay=(string 'off')`| (changed)| `<boolean: true>` |
| `autoPlay=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -1389,8 +1389,8 @@
| `checked=(float)`| (changed)| `<boolean: true>` |
| `checked=(true)`| (changed)| `<boolean: true>` |
| `checked=(false)`| (initial)| `<boolean: false>` |
| `checked=(string 'true')`| (changed)| `<boolean: true>` |
| `checked=(string 'false')`| (changed)| `<boolean: true>` |
| `checked=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `checked=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `checked=(string 'on')`| (changed)| `<boolean: true>` |
| `checked=(string 'off')`| (changed)| `<boolean: true>` |
| `checked=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -1401,23 +1401,23 @@
## `Checked` (on `<input>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
| `Checked=(string)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(empty string)`| (changed, warning)| `<empty string>` |
| `Checked=(array with string)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(empty array)`| (changed, warning)| `<empty string>` |
| `Checked=(object)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(numeric string)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(-1)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(0)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(integer)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(NaN)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(float)`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(string)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(object)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(0)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(float)`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(true)`| (initial, warning)| `<null>` |
| `Checked=(false)`| (initial, warning)| `<null>` |
| `Checked=(string 'true')`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(string 'false')`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(string 'on')`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(string 'off')`| (changed, warning, ssr mismatch)| `<empty string>` |
| `Checked=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
| `Checked=(symbol)`| (initial, warning)| `<null>` |
| `Checked=(function)`| (initial, warning)| `<null>` |
| `Checked=(null)`| (initial, warning)| `<null>` |
@@ -2139,8 +2139,8 @@
| `controls=(float)`| (changed)| `<boolean: true>` |
| `controls=(true)`| (changed)| `<boolean: true>` |
| `controls=(false)`| (initial)| `<boolean: false>` |
| `controls=(string 'true')`| (changed)| `<boolean: true>` |
| `controls=(string 'false')`| (changed)| `<boolean: true>` |
| `controls=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `controls=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `controls=(string 'on')`| (changed)| `<boolean: true>` |
| `controls=(string 'off')`| (changed)| `<boolean: true>` |
| `controls=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -2514,8 +2514,8 @@
| `default=(float)`| (changed)| `<boolean: true>` |
| `default=(true)`| (changed)| `<boolean: true>` |
| `default=(false)`| (initial)| `<boolean: false>` |
| `default=(string 'true')`| (changed)| `<boolean: true>` |
| `default=(string 'false')`| (changed)| `<boolean: true>` |
| `default=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `default=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `default=(string 'on')`| (changed)| `<boolean: true>` |
| `default=(string 'off')`| (changed)| `<boolean: true>` |
| `default=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -2551,25 +2551,25 @@
## `defaultChecked` (on `<input>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
| `defaultChecked=(string)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(string)`| (changed)| `<boolean: true>` |
| `defaultChecked=(empty string)`| (initial)| `<boolean: false>` |
| `defaultChecked=(array with string)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(empty array)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(object)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(numeric string)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(-1)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(array with string)`| (changed)| `<boolean: true>` |
| `defaultChecked=(empty array)`| (changed)| `<boolean: true>` |
| `defaultChecked=(object)`| (changed)| `<boolean: true>` |
| `defaultChecked=(numeric string)`| (changed)| `<boolean: true>` |
| `defaultChecked=(-1)`| (changed)| `<boolean: true>` |
| `defaultChecked=(0)`| (initial)| `<boolean: false>` |
| `defaultChecked=(integer)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(integer)`| (changed)| `<boolean: true>` |
| `defaultChecked=(NaN)`| (initial, warning, ssr warning)| `<boolean: false>` |
| `defaultChecked=(float)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(true)`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(float)`| (changed)| `<boolean: true>` |
| `defaultChecked=(true)`| (changed)| `<boolean: true>` |
| `defaultChecked=(false)`| (initial)| `<boolean: false>` |
| `defaultChecked=(string 'true')`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(string 'false')`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(string 'on')`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(string 'off')`| (initial, ssr mismatch)| `<boolean: false>` |
| `defaultChecked=(symbol)`| (initial)| `<boolean: false>` |
| `defaultChecked=(function)`| (initial)| `<boolean: false>` |
| `defaultChecked=(string 'true')`| (changed)| `<boolean: true>` |
| `defaultChecked=(string 'false')`| (changed)| `<boolean: true>` |
| `defaultChecked=(string 'on')`| (changed)| `<boolean: true>` |
| `defaultChecked=(string 'off')`| (changed)| `<boolean: true>` |
| `defaultChecked=(symbol)`| (changed, ssr mismatch)| `<boolean: true>` |
| `defaultChecked=(function)`| (changed, ssr mismatch)| `<boolean: true>` |
| `defaultChecked=(null)`| (initial)| `<boolean: false>` |
| `defaultChecked=(undefined)`| (initial)| `<boolean: false>` |
@@ -2639,8 +2639,8 @@
| `defer=(float)`| (changed)| `<boolean: true>` |
| `defer=(true)`| (changed)| `<boolean: true>` |
| `defer=(false)`| (initial)| `<boolean: false>` |
| `defer=(string 'true')`| (changed)| `<boolean: true>` |
| `defer=(string 'false')`| (changed)| `<boolean: true>` |
| `defer=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `defer=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `defer=(string 'on')`| (changed)| `<boolean: true>` |
| `defer=(string 'off')`| (changed)| `<boolean: true>` |
| `defer=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -2764,8 +2764,8 @@
| `disabled=(float)`| (changed)| `<boolean: true>` |
| `disabled=(true)`| (changed)| `<boolean: true>` |
| `disabled=(false)`| (initial)| `<boolean: false>` |
| `disabled=(string 'true')`| (changed)| `<boolean: true>` |
| `disabled=(string 'false')`| (changed)| `<boolean: true>` |
| `disabled=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `disabled=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `disabled=(string 'on')`| (changed)| `<boolean: true>` |
| `disabled=(string 'off')`| (changed)| `<boolean: true>` |
| `disabled=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -3587,8 +3587,8 @@
| `focusable=(integer)`| (changed)| `"1"` |
| `focusable=(NaN)`| (changed, warning)| `"NaN"` |
| `focusable=(float)`| (changed)| `"99.99"` |
| `focusable=(true)`| (initial, warning)| `<null>` |
| `focusable=(false)`| (initial, warning)| `<null>` |
| `focusable=(true)`| (changed)| `"true"` |
| `focusable=(false)`| (changed)| `"false"` |
| `focusable=(string 'true')`| (changed)| `"true"` |
| `focusable=(string 'false')`| (changed)| `"false"` |
| `focusable=(string 'on')`| (changed)| `"on"` |
@@ -4139,8 +4139,8 @@
| `formNoValidate=(float)`| (changed)| `<boolean: true>` |
| `formNoValidate=(true)`| (changed)| `<boolean: true>` |
| `formNoValidate=(false)`| (initial)| `<boolean: false>` |
| `formNoValidate=(string 'true')`| (changed)| `<boolean: true>` |
| `formNoValidate=(string 'false')`| (changed)| `<boolean: true>` |
| `formNoValidate=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `formNoValidate=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `formNoValidate=(string 'on')`| (changed)| `<boolean: true>` |
| `formNoValidate=(string 'off')`| (changed)| `<boolean: true>` |
| `formNoValidate=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -4764,8 +4764,8 @@
| `hidden=(float)`| (changed)| `<boolean: true>` |
| `hidden=(true)`| (changed)| `<boolean: true>` |
| `hidden=(false)`| (initial)| `<boolean: false>` |
| `hidden=(string 'true')`| (changed)| `<boolean: true>` |
| `hidden=(string 'false')`| (changed)| `<boolean: true>` |
| `hidden=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `hidden=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `hidden=(string 'on')`| (changed)| `<boolean: true>` |
| `hidden=(string 'off')`| (changed)| `<boolean: true>` |
| `hidden=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -5489,8 +5489,8 @@
| `itemScope=(float)`| (changed)| `<empty string>` |
| `itemScope=(true)`| (changed)| `<empty string>` |
| `itemScope=(false)`| (initial)| `<null>` |
| `itemScope=(string 'true')`| (changed)| `<empty string>` |
| `itemScope=(string 'false')`| (changed)| `<empty string>` |
| `itemScope=(string 'true')`| (changed, warning)| `<empty string>` |
| `itemScope=(string 'false')`| (changed, warning)| `<empty string>` |
| `itemScope=(string 'on')`| (changed)| `<empty string>` |
| `itemScope=(string 'off')`| (changed)| `<empty string>` |
| `itemScope=(symbol)`| (initial, warning)| `<null>` |
@@ -6239,8 +6239,8 @@
| `loop=(float)`| (changed)| `<boolean: true>` |
| `loop=(true)`| (changed)| `<boolean: true>` |
| `loop=(false)`| (initial)| `<boolean: false>` |
| `loop=(string 'true')`| (changed)| `<boolean: true>` |
| `loop=(string 'false')`| (changed)| `<boolean: true>` |
| `loop=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `loop=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `loop=(string 'on')`| (changed)| `<boolean: true>` |
| `loop=(string 'off')`| (changed)| `<boolean: true>` |
| `loop=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -7064,8 +7064,8 @@
| `multiple=(float)`| (changed)| `<boolean: true>` |
| `multiple=(true)`| (changed)| `<boolean: true>` |
| `multiple=(false)`| (initial)| `<boolean: false>` |
| `multiple=(string 'true')`| (changed)| `<boolean: true>` |
| `multiple=(string 'false')`| (changed)| `<boolean: true>` |
| `multiple=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `multiple=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `multiple=(string 'on')`| (changed)| `<boolean: true>` |
| `multiple=(string 'off')`| (changed)| `<boolean: true>` |
| `multiple=(symbol)`| (changed, warning, ssr mismatch)| `<boolean: true>` |
@@ -7076,23 +7076,23 @@
## `muted` (on `<video>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
| `muted=(string)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(string)`| (changed)| `<boolean: true>` |
| `muted=(empty string)`| (initial)| `<boolean: false>` |
| `muted=(array with string)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(empty array)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(object)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(numeric string)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(-1)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(array with string)`| (changed)| `<boolean: true>` |
| `muted=(empty array)`| (changed)| `<boolean: true>` |
| `muted=(object)`| (changed)| `<boolean: true>` |
| `muted=(numeric string)`| (changed)| `<boolean: true>` |
| `muted=(-1)`| (changed)| `<boolean: true>` |
| `muted=(0)`| (initial)| `<boolean: false>` |
| `muted=(integer)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(integer)`| (changed)| `<boolean: true>` |
| `muted=(NaN)`| (initial, warning)| `<boolean: false>` |
| `muted=(float)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(true)`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(float)`| (changed)| `<boolean: true>` |
| `muted=(true)`| (changed)| `<boolean: true>` |
| `muted=(false)`| (initial)| `<boolean: false>` |
| `muted=(string 'true')`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(string 'false')`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(string 'on')`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(string 'off')`| (changed, ssr mismatch)| `<boolean: true>` |
| `muted=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `muted=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `muted=(string 'on')`| (changed)| `<boolean: true>` |
| `muted=(string 'off')`| (changed)| `<boolean: true>` |
| `muted=(symbol)`| (initial, warning)| `<boolean: false>` |
| `muted=(function)`| (initial, warning)| `<boolean: false>` |
| `muted=(null)`| (initial)| `<boolean: false>` |
@@ -7148,6 +7148,31 @@
| `name=(null)`| (initial)| `<null>` |
| `name=(undefined)`| (initial)| `<null>` |
## `noModule` (on `<script>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
| `noModule=(string)`| (changed)| `<boolean: true>` |
| `noModule=(empty string)`| (initial)| `<boolean: false>` |
| `noModule=(array with string)`| (changed)| `<boolean: true>` |
| `noModule=(empty array)`| (changed)| `<boolean: true>` |
| `noModule=(object)`| (changed)| `<boolean: true>` |
| `noModule=(numeric string)`| (changed)| `<boolean: true>` |
| `noModule=(-1)`| (changed)| `<boolean: true>` |
| `noModule=(0)`| (initial)| `<boolean: false>` |
| `noModule=(integer)`| (changed)| `<boolean: true>` |
| `noModule=(NaN)`| (initial, warning)| `<boolean: false>` |
| `noModule=(float)`| (changed)| `<boolean: true>` |
| `noModule=(true)`| (changed)| `<boolean: true>` |
| `noModule=(false)`| (initial)| `<boolean: false>` |
| `noModule=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `noModule=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `noModule=(string 'on')`| (changed)| `<boolean: true>` |
| `noModule=(string 'off')`| (changed)| `<boolean: true>` |
| `noModule=(symbol)`| (initial, warning)| `<boolean: false>` |
| `noModule=(function)`| (initial, warning)| `<boolean: false>` |
| `noModule=(null)`| (initial)| `<boolean: false>` |
| `noModule=(undefined)`| (initial)| `<boolean: false>` |
## `nonce` (on `<div>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
@@ -7173,31 +7198,6 @@
| `nonce=(null)`| (initial)| `<null>` |
| `nonce=(undefined)`| (initial)| `<null>` |
## `noModule` (on `<script>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
| `noModule=(string)`| (changed)| `<boolean: true>` |
| `noModule=(empty string)`| (initial)| `<boolean: false>` |
| `noModule=(array with string)`| (changed)| `<boolean: true>` |
| `noModule=(empty array)`| (changed)| `<boolean: true>` |
| `noModule=(object)`| (changed)| `<boolean: true>` |
| `noModule=(numeric string)`| (changed)| `<boolean: true>` |
| `noModule=(-1)`| (changed)| `<boolean: true>` |
| `noModule=(0)`| (initial)| `<boolean: false>` |
| `noModule=(integer)`| (changed)| `<boolean: true>` |
| `noModule=(NaN)`| (initial, warning)| `<boolean: false>` |
| `noModule=(float)`| (changed)| `<boolean: true>` |
| `noModule=(true)`| (changed)| `<boolean: true>` |
| `noModule=(false)`| (initial)| `<boolean: false>` |
| `noModule=(string 'true')`| (changed)| `<boolean: true>` |
| `noModule=(string 'false')`| (changed)| `<boolean: true>` |
| `noModule=(string 'on')`| (changed)| `<boolean: true>` |
| `noModule=(string 'off')`| (changed)| `<boolean: true>` |
| `noModule=(symbol)`| (initial, warning)| `<boolean: false>` |
| `noModule=(function)`| (initial, warning)| `<boolean: false>` |
| `noModule=(null)`| (initial)| `<boolean: false>` |
| `noModule=(undefined)`| (initial)| `<boolean: false>` |
## `noValidate` (on `<form>` inside `<div>`)
| Test Case | Flags | Result |
| --- | --- | --- |
@@ -7214,8 +7214,8 @@
| `noValidate=(float)`| (changed)| `<boolean: true>` |
| `noValidate=(true)`| (changed)| `<boolean: true>` |
| `noValidate=(false)`| (initial)| `<boolean: false>` |
| `noValidate=(string 'true')`| (changed)| `<boolean: true>` |
| `noValidate=(string 'false')`| (changed)| `<boolean: true>` |
| `noValidate=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `noValidate=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `noValidate=(string 'on')`| (changed)| `<boolean: true>` |
| `noValidate=(string 'off')`| (changed)| `<boolean: true>` |
| `noValidate=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -7464,8 +7464,8 @@
| `open=(float)`| (changed)| `<boolean: true>` |
| `open=(true)`| (changed)| `<boolean: true>` |
| `open=(false)`| (initial)| `<boolean: false>` |
| `open=(string 'true')`| (changed)| `<boolean: true>` |
| `open=(string 'false')`| (changed)| `<boolean: true>` |
| `open=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `open=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `open=(string 'on')`| (changed)| `<boolean: true>` |
| `open=(string 'off')`| (changed)| `<boolean: true>` |
| `open=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8014,8 +8014,8 @@
| `playsInline=(float)`| (changed)| `<empty string>` |
| `playsInline=(true)`| (changed)| `<empty string>` |
| `playsInline=(false)`| (initial)| `<null>` |
| `playsInline=(string 'true')`| (changed)| `<empty string>` |
| `playsInline=(string 'false')`| (changed)| `<empty string>` |
| `playsInline=(string 'true')`| (changed, warning)| `<empty string>` |
| `playsInline=(string 'false')`| (changed, warning)| `<empty string>` |
| `playsInline=(string 'on')`| (changed)| `<empty string>` |
| `playsInline=(string 'off')`| (changed)| `<empty string>` |
| `playsInline=(symbol)`| (initial, warning)| `<null>` |
@@ -8227,26 +8227,26 @@
| Test Case | Flags | Result |
| --- | --- | --- |
| `preload=(string)`| (changed)| `"none"` |
| `preload=(empty string)`| (initial)| `"auto"` |
| `preload=(empty string)`| (changed)| `"auto"` |
| `preload=(array with string)`| (changed)| `"none"` |
| `preload=(empty array)`| (initial)| `"auto"` |
| `preload=(object)`| (initial)| `"auto"` |
| `preload=(numeric string)`| (initial)| `"auto"` |
| `preload=(-1)`| (initial)| `"auto"` |
| `preload=(0)`| (initial)| `"auto"` |
| `preload=(integer)`| (initial)| `"auto"` |
| `preload=(NaN)`| (initial, warning)| `"auto"` |
| `preload=(float)`| (initial)| `"auto"` |
| `preload=(true)`| (initial, warning)| `"auto"` |
| `preload=(false)`| (initial, warning)| `"auto"` |
| `preload=(string 'true')`| (initial)| `"auto"` |
| `preload=(string 'false')`| (initial)| `"auto"` |
| `preload=(string 'on')`| (initial)| `"auto"` |
| `preload=(string 'off')`| (initial)| `"auto"` |
| `preload=(symbol)`| (initial, warning)| `"auto"` |
| `preload=(function)`| (initial, warning)| `"auto"` |
| `preload=(null)`| (initial)| `"auto"` |
| `preload=(undefined)`| (initial)| `"auto"` |
| `preload=(empty array)`| (changed)| `"auto"` |
| `preload=(object)`| (initial)| `"metadata"` |
| `preload=(numeric string)`| (initial)| `"metadata"` |
| `preload=(-1)`| (initial)| `"metadata"` |
| `preload=(0)`| (initial)| `"metadata"` |
| `preload=(integer)`| (initial)| `"metadata"` |
| `preload=(NaN)`| (initial, warning)| `"metadata"` |
| `preload=(float)`| (initial)| `"metadata"` |
| `preload=(true)`| (initial, warning)| `"metadata"` |
| `preload=(false)`| (initial, warning)| `"metadata"` |
| `preload=(string 'true')`| (initial)| `"metadata"` |
| `preload=(string 'false')`| (initial)| `"metadata"` |
| `preload=(string 'on')`| (initial)| `"metadata"` |
| `preload=(string 'off')`| (initial)| `"metadata"` |
| `preload=(symbol)`| (initial, warning)| `"metadata"` |
| `preload=(function)`| (initial, warning)| `"metadata"` |
| `preload=(null)`| (initial)| `"metadata"` |
| `preload=(undefined)`| (initial)| `"metadata"` |
## `preserveAlpha` (on `<feConvolveMatrix>` inside `<svg>`)
| Test Case | Flags | Result |
@@ -8489,8 +8489,8 @@
| `readOnly=(float)`| (changed)| `<boolean: true>` |
| `readOnly=(true)`| (changed)| `<boolean: true>` |
| `readOnly=(false)`| (initial)| `<boolean: false>` |
| `readOnly=(string 'true')`| (changed)| `<boolean: true>` |
| `readOnly=(string 'false')`| (changed)| `<boolean: true>` |
| `readOnly=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `readOnly=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `readOnly=(string 'on')`| (changed)| `<boolean: true>` |
| `readOnly=(string 'off')`| (changed)| `<boolean: true>` |
| `readOnly=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8714,8 +8714,8 @@
| `required=(float)`| (changed)| `<boolean: true>` |
| `required=(true)`| (changed)| `<boolean: true>` |
| `required=(false)`| (initial)| `<boolean: false>` |
| `required=(string 'true')`| (changed)| `<boolean: true>` |
| `required=(string 'false')`| (changed)| `<boolean: true>` |
| `required=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `required=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `required=(string 'on')`| (changed)| `<boolean: true>` |
| `required=(string 'off')`| (changed)| `<boolean: true>` |
| `required=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8889,8 +8889,8 @@
| `reversed=(float)`| (changed)| `<boolean: true>` |
| `reversed=(true)`| (changed)| `<boolean: true>` |
| `reversed=(false)`| (initial)| `<boolean: false>` |
| `reversed=(string 'true')`| (changed)| `<boolean: true>` |
| `reversed=(string 'false')`| (changed)| `<boolean: true>` |
| `reversed=(string 'true')`| (changed, warning)| `<boolean: true>` |
| `reversed=(string 'false')`| (changed, warning)| `<boolean: true>` |
| `reversed=(string 'on')`| (changed)| `<boolean: true>` |
| `reversed=(string 'off')`| (changed)| `<boolean: true>` |
| `reversed=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8983,7 +8983,7 @@
| `rowSpan=(object)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
| `rowSpan=(numeric string)`| (changed, ssr error, ssr mismatch)| `<number: 42>` |
| `rowSpan=(-1)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
| `rowSpan=(0)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
| `rowSpan=(0)`| (changed, ssr error, ssr mismatch)| `<number: 0>` |
| `rowSpan=(integer)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
| `rowSpan=(NaN)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
| `rowSpan=(float)`| (changed, ssr error, ssr mismatch)| `<number: 99>` |
@@ -9139,8 +9139,8 @@
| `scoped=(float)`| (changed)| `<empty string>` |
| `scoped=(true)`| (changed)| `<empty string>` |
| `scoped=(false)`| (initial)| `<null>` |
| `scoped=(string 'true')`| (changed)| `<empty string>` |
| `scoped=(string 'false')`| (changed)| `<empty string>` |
| `scoped=(string 'true')`| (changed, warning)| `<empty string>` |
| `scoped=(string 'false')`| (changed, warning)| `<empty string>` |
| `scoped=(string 'on')`| (changed)| `<empty string>` |
| `scoped=(string 'off')`| (changed)| `<empty string>` |
| `scoped=(symbol)`| (initial, warning)| `<null>` |
@@ -9189,8 +9189,8 @@
| `seamless=(float)`| (changed)| `<empty string>` |
| `seamless=(true)`| (changed)| `<empty string>` |
| `seamless=(false)`| (initial)| `<null>` |
| `seamless=(string 'true')`| (changed)| `<empty string>` |
| `seamless=(string 'false')`| (changed)| `<empty string>` |
| `seamless=(string 'true')`| (changed, warning)| `<empty string>` |
| `seamless=(string 'false')`| (changed, warning)| `<empty string>` |
| `seamless=(string 'on')`| (changed)| `<empty string>` |
| `seamless=(string 'off')`| (changed)| `<empty string>` |
| `seamless=(symbol)`| (initial, warning)| `<null>` |
@@ -9264,8 +9264,8 @@
| `selected=(float)`| (initial, warning, ssr warning)| `<boolean: true>` |
| `selected=(true)`| (initial, warning, ssr warning)| `<boolean: true>` |
| `selected=(false)`| (initial, warning, ssr warning)| `<boolean: true>` |
| `selected=(string 'true')`| (initial, warning, ssr warning)| `<boolean: true>` |
| `selected=(string 'false')`| (initial, warning, ssr warning)| `<boolean: true>` |
| `selected=(string 'true')`| (initial, warning)| `<boolean: true>` |
| `selected=(string 'false')`| (initial, warning)| `<boolean: true>` |
| `selected=(string 'on')`| (initial, warning, ssr warning)| `<boolean: true>` |
| `selected=(string 'off')`| (initial, warning, ssr warning)| `<boolean: true>` |
| `selected=(symbol)`| (initial, warning)| `<boolean: true>` |
@@ -11868,8 +11868,8 @@
| `value=(string 'false')`| (changed)| `"false"` |
| `value=(string 'on')`| (changed)| `"on"` |
| `value=(string 'off')`| (changed)| `"off"` |
| `value=(symbol)`| (changed, error, warning, ssr error)| `` |
| `value=(function)`| (changed, warning, ssr warning)| `"function f() {}"` |
| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
| `value=(function)`| (initial, warning, ssr mismatch)| `<empty string>` |
| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
| `value=(undefined)`| (initial)| `<empty string>` |
@@ -11893,8 +11893,8 @@
| `value=(string 'false')`| (changed)| `"false"` |
| `value=(string 'on')`| (changed)| `"on"` |
| `value=(string 'off')`| (changed)| `"off"` |
| `value=(symbol)`| (changed, error, warning, ssr mismatch)| `` |
| `value=(function)`| (changed, warning, ssr mismatch)| `"function f() {}"` |
| `value=(symbol)`| (initial, warning)| `<empty string>` |
| `value=(function)`| (initial, warning)| `<empty string>` |
| `value=(null)`| (initial)| `<empty string>` |
| `value=(undefined)`| (initial)| `<empty string>` |

View File

@@ -20,7 +20,7 @@ The left box shows the property (or attribute) assigned by React 15.\*, and the
right box shows the property (or attribute) assigned by the latest version of
React 16.
Right now we use a purple outline to call out cases where the assigned property
Right now, we use a purple outline to call out cases where the assigned property
(or attribute) has changed between React 15 and 16.
---

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,17 +6,19 @@
"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",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"semver": "^5.3.0"
"semver": "^5.5.0"
},
"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

@@ -1,4 +1,4 @@
const PropTypes = window.PropTypes;
import PropTypes from 'prop-types';
const React = window.React;
const propTypes = {

View File

@@ -3,7 +3,7 @@ const React = window.React;
const propTypes = {
title: PropTypes.node.isRequired,
description: PropTypes.node.isRequired,
description: PropTypes.node,
};
class FixtureSet extends React.Component {
@@ -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

@@ -35,11 +35,11 @@ class Header extends React.Component {
<span className="header__logo">
<img
src={process.env.PUBLIC_URL + '/react-logo.svg'}
alt=""
width="32"
height="32"
alt="React"
width="20"
height="20"
/>
React Sandbox (v{React.version})
<a href="/">DOM Test Fixtures (v{React.version})</a>
</span>
<div className="header-controls">
@@ -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>
@@ -65,6 +66,8 @@ class Header extends React.Component {
<option value="/custom-elements">Custom Elements</option>
<option value="/media-events">Media Events</option>
<option value="/pointer-events">Pointer Events</option>
<option value="/mouse-events">Mouse Events</option>
<option value="/selection-events">Selection Events</option>
</select>
</label>
<label htmlFor="react_version">

View File

@@ -0,0 +1,58 @@
const React = window.React;
const ReactDOM = window.ReactDOM;
class IframePortal extends React.Component {
iframeRef = null;
handleRef = ref => {
if (ref !== this.iframeRef) {
this.iframeRef = ref;
if (ref) {
if (ref.contentDocument && this.props.head) {
ref.contentDocument.head.innerHTML = this.props.head;
}
// Re-render must take place in the next tick (Firefox)
setTimeout(() => {
this.forceUpdate();
});
}
}
};
render() {
const ref = this.iframeRef;
let portal = null;
if (ref && ref.contentDocument) {
portal = ReactDOM.createPortal(
this.props.children,
ref.contentDocument.body
);
}
return (
<div>
<iframe
title="Iframe portal"
style={{border: 'none', height: this.props.height}}
ref={this.handleRef}
/>
{portal}
</div>
);
}
}
class IframeSubtree extends React.Component {
warned = false;
render() {
if (!this.warned) {
console.error(
`IFrame has not yet been implemented for React v${React.version}`
);
this.warned = true;
}
return <div>{this.props.children}</div>;
}
}
export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);

View File

@@ -10,7 +10,7 @@ function onButtonClick() {
export default class ButtonTestCases extends React.Component {
render() {
return (
<FixtureSet title="Buttons" description="">
<FixtureSet title="Buttons">
<TestCase
title="onClick with disabled buttons"
description="The onClick event handler should not be invoked when clicking on a disabled buyaton">

View File

@@ -8,7 +8,7 @@ const React = window.React;
class DateInputFixtures extends React.Component {
render() {
return (
<FixtureSet title="Dates" description="">
<FixtureSet title="Dates">
<TestCase title="Switching between date and datetime-local">
<TestCase.Steps>
<li>Type a date into the date picker</li>

View File

@@ -7,9 +7,21 @@ const ReactDOM = window.ReactDOM;
function BadRender(props) {
props.doThrow();
}
class BadDidMount extends React.Component {
componentDidMount() {
this.props.doThrow();
}
render() {
return null;
}
}
class ErrorBoundary extends React.Component {
static defaultProps = {
buttonText: 'Trigger error',
badChildType: BadRender,
};
state = {
shouldThrow: false,
@@ -33,7 +45,8 @@ class ErrorBoundary extends React.Component {
}
}
if (this.state.shouldThrow) {
return <BadRender doThrow={this.props.doThrow} />;
const BadChild = this.props.badChildType;
return <BadChild doThrow={this.props.doThrow} />;
}
return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
}
@@ -84,10 +97,154 @@ class TriggerErrorAndCatch extends React.Component {
}
}
function silenceWindowError(event) {
event.preventDefault();
}
class SilenceErrors extends React.Component {
state = {
silenceErrors: false,
};
componentDidMount() {
if (this.state.silenceErrors) {
window.addEventListener('error', silenceWindowError);
}
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.silenceErrors && this.state.silenceErrors) {
window.addEventListener('error', silenceWindowError);
} else if (prevState.silenceErrors && !this.state.silenceErrors) {
window.removeEventListener('error', silenceWindowError);
}
}
componentWillUnmount() {
if (this.state.silenceErrors) {
window.removeEventListener('error', silenceWindowError);
}
}
render() {
return (
<div>
<label>
<input
type="checkbox"
value={this.state.silenceErrors}
onChange={() =>
this.setState(state => ({
silenceErrors: !state.silenceErrors,
}))
}
/>
Silence errors
</label>
{this.state.silenceErrors && (
<div>
{this.props.children}
<br />
<hr />
<b style={{color: 'red'}}>
Don't forget to uncheck "Silence errors" when you're done with
this test!
</b>
</div>
)}
</div>
);
}
}
class GetEventTypeDuringUpdate extends React.Component {
state = {};
onClick = () => {
this.expectUpdate = true;
this.forceUpdate();
};
componentDidUpdate() {
if (this.expectUpdate) {
this.expectUpdate = false;
this.setState({eventType: window.event.type});
setTimeout(() => {
this.setState({cleared: !window.event});
});
}
}
render() {
return (
<div className="test-fixture">
<button onClick={this.onClick}>Trigger callback in event.</button>
{this.state.eventType ? (
<p>
Got <b>{this.state.eventType}</b> event.
</p>
) : (
<p>Got no event</p>
)}
{this.state.cleared ? (
<p>Event cleared correctly.</p>
) : (
<p>Event failed to clear.</p>
)}
</div>
);
}
}
class SilenceRecoverableError extends React.Component {
render() {
return (
<SilenceErrors>
<ErrorBoundary
badChildType={BadRender}
buttonText={'Throw (render phase)'}
doThrow={() => {
throw new Error('Silenced error (render phase)');
}}
/>
<ErrorBoundary
badChildType={BadDidMount}
buttonText={'Throw (commit phase)'}
doThrow={() => {
throw new Error('Silenced error (commit phase)');
}}
/>
</SilenceErrors>
);
}
}
class TrySilenceFatalError extends React.Component {
container = document.createElement('div');
triggerErrorAndCatch = () => {
try {
ReactDOM.flushSync(() => {
ReactDOM.render(
<BadRender
doThrow={() => {
throw new Error('Caught error');
}}
/>,
this.container
);
});
} catch (e) {}
};
render() {
return (
<SilenceErrors>
<button onClick={this.triggerErrorAndCatch}>Throw fatal error</button>
</SilenceErrors>
);
}
}
export default class ErrorHandlingTestCases extends React.Component {
render() {
return (
<FixtureSet title="Error handling" description="">
<FixtureSet title="Error handling">
<TestCase
title="Break on uncaught exceptions"
description="In DEV, errors should be treated as uncaught, even though React catches them internally">
@@ -103,6 +260,12 @@ export default class ErrorHandlingTestCases extends React.Component {
the BadRender component. After resuming, the "Trigger error" button
should be replaced with "Captured an error: Oops!" Clicking reset
should reset the test case.
<br />
<br />
In the console, you should see <b>two</b> messages: the actual error
("Oops") printed natively by the browser with its JavaScript stack,
and our addendum ("The above error occurred in BadRender component")
with a React component stack.
</TestCase.ExpectedResult>
<Example
doThrow={() => {
@@ -155,10 +318,59 @@ export default class ErrorHandlingTestCases extends React.Component {
</TestCase.Steps>
<TestCase.ExpectedResult>
Open the console. "Uncaught Error: Caught error" should have been
logged by the browser.
logged by the browser. You should also see our addendum ("The above
error...").
</TestCase.ExpectedResult>
<TriggerErrorAndCatch />
</TestCase>
<TestCase
title="Recoverable errors can be silenced with preventDefault (development mode only)"
description="">
<TestCase.Steps>
<li>Check the "Silence errors" checkbox below</li>
<li>Click the "Throw (render phase)" button</li>
<li>Click the "Throw (commit phase)" button</li>
<li>Uncheck the "Silence errors" checkbox</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Open the console. You shouldn't see <b>any</b> messages in the
console: neither the browser error, nor our "The above error"
addendum, from either of the buttons. The buttons themselves should
get replaced by two labels: "Captured an error: Silenced error
(render phase)" and "Captured an error: Silenced error (commit
phase)".
</TestCase.ExpectedResult>
<SilenceRecoverableError />
</TestCase>
<TestCase
title="Fatal errors cannot be silenced with preventDefault (development mode only)"
description="">
<TestCase.Steps>
<li>Check the "Silence errors" checkbox below</li>
<li>Click the "Throw fatal error" button</li>
<li>Uncheck the "Silence errors" checkbox</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Open the console. "Error: Caught error" should have been logged by
React. You should also see our addendum ("The above error...").
</TestCase.ExpectedResult>
<TrySilenceFatalError />
</TestCase>
{window.hasOwnProperty('event') ? (
<TestCase
title="Error handling does not interfere with window.event"
description="">
<TestCase.Steps>
<li>Click the "Trigger callback in event" button</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
You should see "Got <b>click</b> event" and "Event cleared
successfully" below.
</TestCase.ExpectedResult>
<GetEventTypeDuringUpdate />
</TestCase>
) : null}
</FixtureSet>
);
}

View File

@@ -7,7 +7,7 @@ const React = window.React;
class EventPooling extends React.Component {
render() {
return (
<FixtureSet title="Event Pooling" description="">
<FixtureSet title="Event Pooling">
<MouseMove />
<Persistence />
</FixtureSet>

View File

@@ -0,0 +1,117 @@
const React = window.React;
export default function Home() {
return (
<main className="container">
<h1>DOM Test Fixtures</h1>
<p>
Use this site to test browser quirks and other behavior that can not be
captured through unit tests.
</p>
<section>
<h2>Tested Browsers</h2>
<table>
<thead>
<tr>
<th>Browser</th>
<th>Versions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome - Desktop</td>
<td>
49<sup>*</sup>, Latest
</td>
</tr>
<tr>
<td>Chrome - Android</td>
<td>Latest</td>
</tr>
<tr>
<td>Firefox Desktop</td>
<td>
<a href="https://www.mozilla.org/en-US/firefox/organizations/">
ESR<sup></sup>
</a>, Latest
</td>
</tr>
<tr>
<td>Internet Explorer</td>
<td>9, 10, 11</td>
</tr>
<tr>
<td>Microsoft Edge</td>
<td>14, Latest</td>
</tr>
<tr>
<td>Safari - Desktop</td>
<td>7, Latest</td>
</tr>
<tr>
<td>Safari - iOS</td>
<td>7, Latest</td>
</tr>
</tbody>
</table>
<footer>
<small>* Chrome 49 is the last release for Windows XP.</small>
<br />
<small>
Firefox Extended Support Release (ESR) is used by many
institutions.
</small>
</footer>
</section>
<section>
<h2>How do I test browsers I don't have access to?</h2>
<p>
Getting test coverage across all of these browsers can be difficult,
particularly for older versions of evergreen browsers. Fortunately
there are a handful of tools that make browser testing easy.
</p>
<section>
<h3>Paid services</h3>
<ul>
<li>
<a href="https://browserstack.com">BrowserStack</a>
</li>
<li>
<a href="https://saucelabs.com">Sauce Labs</a>
</li>
<li>
<a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
</li>
</ul>
<p>
These services provide access to all browsers we test, however they
cost money. There is no obligation to pay for them. Maintainers have
access to a BrowserStack subscription; feel free to contact a
maintainer or mention browsers where extra testing is required.
</p>
</section>
<section>
<h3>Browser downloads</h3>
<p>A handful of browsers are available for download directly:</p>
<ul>
<li>
<a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
Internet Explorer (9-11) and MS Edge virtual machines
</a>
</li>
<li>
<a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
Chromium snapshots (for older versions of Chrome)
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/organizations/">
Firefox Extended Support Release (ESR)
</a>
</li>
</ul>
</section>
</section>
</main>
);
}

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,57 +1,62 @@
import RangeInputFixtures from './range-inputs';
import TextInputFixtures from './text-inputs';
import SelectFixtures from './selects';
import TextAreaFixtures from './textareas';
import InputChangeEvents from './input-change-events';
import NumberInputFixtures from './number-inputs';
import PasswordInputFixtures from './password-inputs';
import ButtonFixtures from './buttons';
import DateInputFixtures from './date-inputs';
import ErrorHandling from './error-handling';
import EventPooling from './event-pooling';
import CustomElementFixtures from './custom-elements';
import MediaEventsFixtures from './media-events';
import PointerEventsFixtures from './pointer-events';
const React = window.React;
const fixturePath = window.location.pathname;
/**
* A simple routing component that renders the appropriate
* fixture based on the location pathname.
*/
function FixturesPage() {
switch (window.location.pathname) {
case '/text-inputs':
return <TextInputFixtures />;
case '/range-inputs':
return <RangeInputFixtures />;
case '/selects':
return <SelectFixtures />;
case '/textareas':
return <TextAreaFixtures />;
case '/input-change-events':
return <InputChangeEvents />;
case '/number-inputs':
return <NumberInputFixtures />;
case '/password-inputs':
return <PasswordInputFixtures />;
case '/buttons':
return <ButtonFixtures />;
case '/date-inputs':
return <DateInputFixtures />;
case '/error-handling':
return <ErrorHandling />;
case '/event-pooling':
return <EventPooling />;
case '/custom-elements':
return <CustomElementFixtures />;
case '/media-events':
return <MediaEventsFixtures />;
case '/pointer-events':
return <PointerEventsFixtures />;
default:
return <p>Please select a test fixture.</p>;
class FixturesPage extends React.Component {
static defaultProps = {
fixturePath: fixturePath === '/' ? '/home' : fixturePath,
};
state = {
isLoading: true,
error: null,
Fixture: null,
};
componentDidMount() {
this.loadFixture();
}
async loadFixture() {
const {fixturePath} = this.props;
try {
const module = await import(`.${fixturePath}`);
this.setState({Fixture: module.default});
} catch (error) {
console.error(error);
this.setState({error});
} finally {
this.setState({isLoading: false});
}
}
render() {
const {Fixture, error, isLoading} = this.state;
if (isLoading) {
return null;
}
if (error) {
return <FixtureError error={error} />;
}
return <Fixture />;
}
}
function FixtureError({error}) {
return (
<section>
<h2>Error loading fixture</h2>
<p>{error.message}</p>
</section>
);
}
export default FixturesPage;

View File

@@ -60,7 +60,7 @@ export default class MediaEvents extends React.Component {
}, {});
return (
<FixtureSet title="Media Events" description="">
<FixtureSet title="Media Events">
<TestCase
title="Event bubbling"
description="Media events should synthetically bubble">

View File

@@ -0,0 +1,16 @@
import FixtureSet from '../../FixtureSet';
import MouseMovement from './mouse-movement';
const React = window.React;
class MouseEvents extends React.Component {
render() {
return (
<FixtureSet title="Mouse Events">
<MouseMovement />
</FixtureSet>
);
}
}
export default MouseEvents;

View File

@@ -0,0 +1,48 @@
import TestCase from '../../TestCase';
const React = window.React;
class MouseMovement extends React.Component {
state = {
movement: {x: 0, y: 0},
};
onMove = event => {
this.setState({x: event.movementX, y: event.movementY});
};
render() {
const {x, y} = this.state;
const boxStyle = {
padding: '10px 20px',
border: '1px solid #d9d9d9',
margin: '10px 0 20px',
};
return (
<TestCase
title="Mouse Movement"
description="We polyfill the movementX and movementY fields."
affectedBrowsers="IE, Safari">
<TestCase.Steps>
<li>Mouse over the box below</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The reported values should equal the pixel (integer) difference
between mouse movements positions.
</TestCase.ExpectedResult>
<div style={boxStyle} onMouseMove={this.onMove}>
<p>Trace your mouse over this box.</p>
<p>
Last movement: {x},{y}
</p>
</div>
</TestCase>
);
}
}
export default MouseMovement;

View File

@@ -6,7 +6,7 @@ const React = window.React;
function NumberInputs() {
return (
<FixtureSet title="Password inputs" description="">
<FixtureSet title="Password inputs">
<TestCase
title="The show password icon"
description={`

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,50 @@
import TestCase from '../../TestCase';
import Iframe from '../../Iframe';
const React = window.React;
class OnSelectIframe extends React.Component {
state = {count: 0, value: 'Select Me!'};
_onSelect = event => {
this.setState(({count}) => ({count: count + 1}));
};
_onChange = event => {
this.setState({value: event.target.value});
};
render() {
const {count, value} = this.state;
return (
<Iframe height={60}>
Selection Event Count: {count}
<input
type="text"
onSelect={this._onSelect}
value={value}
onChange={this._onChange}
/>
</Iframe>
);
}
}
export default class OnSelectEventTestCase extends React.Component {
render() {
return (
<TestCase
title="onSelect events within iframes"
description="onSelect events should fire for elements rendered inside iframes">
<TestCase.Steps>
<li>Highlight some of the text in the input below</li>
<li>Move the cursor around using the arrow keys</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The displayed count should increase as you highlight or move the
cursor
</TestCase.ExpectedResult>
<OnSelectIframe />
</TestCase>
);
}
}

View File

@@ -0,0 +1,44 @@
import TestCase from '../../TestCase';
import Iframe from '../../Iframe';
const React = window.React;
export default class ReorderedInputsTestCase extends React.Component {
state = {count: 0};
componentDidMount() {
this.interval = setInterval(() => {
this.setState({count: this.state.count + 1});
}, 2000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
renderInputs() {
const inputs = [
<input key={1} defaultValue="Foo" />,
<input key={2} defaultValue="Bar" />,
];
if (this.state.count % 2 === 0) {
inputs.reverse();
}
return inputs;
}
render() {
return (
<TestCase title="Reordered input elements in iframes" description="">
<TestCase.Steps>
<li>The two inputs below swap positions every two seconds</li>
<li>Select the text in either of them</li>
<li>Wait for the swap to occur</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The selection you made should be maintained
</TestCase.ExpectedResult>
<Iframe height={50}>{this.renderInputs()}</Iframe>
</TestCase>
);
}
}

View File

@@ -0,0 +1,19 @@
import FixtureSet from '../../FixtureSet';
import ReorderedInputsTestCase from './ReorderedInputsTestCase';
import OnSelectEventTestCase from './OnSelectEventTestCase';
const React = window.React;
export default function SelectionEvents() {
return (
<FixtureSet
title="Selection Restoration"
description="
When React commits changes it may perform operations which cause existing
selection state to be lost. This is manually managed by reading the
selection state before commits and then restoring it afterwards.
">
<ReorderedInputsTestCase />
<OnSelectEventTestCase />
</FixtureSet>
);
}

View File

@@ -46,7 +46,7 @@ class SelectFixture extends React.Component {
render() {
return (
<FixtureSet title="Selects" description="">
<FixtureSet title="Selects">
<form className="field-group">
<fieldset>
<legend>Controlled</legend>
@@ -158,6 +158,50 @@ class SelectFixture extends React.Component {
</form>
</div>
</TestCase>
<TestCase title="A multiple select being scrolled to first selected option">
<TestCase.ExpectedResult>
First selected option should be visible
</TestCase.ExpectedResult>
<div className="test-fixture">
<form>
<select multiple defaultValue={['tiger']}>
<option value="gorilla">gorilla</option>
<option value="giraffe">giraffe</option>
<option value="monkey">monkey</option>
<option value="lion">lion</option>
<option value="mongoose">mongoose</option>
<option value="tiger">tiget</option>
</select>
</form>
</div>
</TestCase>
<TestCase
title="An option which contains conditional render fails"
relatedIssues="11911">
<TestCase.Steps>
<li>Select any option</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
Option should be set
</TestCase.ExpectedResult>
<div className="test-fixture">
<select value={this.state.value} onChange={this.onChange}>
<option value="red">
red {this.state.value === 'red' && 'is chosen '} TextNode
</option>
<option value="blue">
blue {this.state.value === 'blue' && 'is chosen '} TextNode
</option>
<option value="green">
green {this.state.value === 'green' && 'is chosen '} TextNode
</option>
</select>
</div>
</TestCase>
</FixtureSet>
);
}

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

@@ -1,3 +1,5 @@
import semver from 'semver';
/**
* Take a version from the window query string and load a specific
* version of React.
@@ -34,36 +36,51 @@ 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';
if (version !== 'local') {
const {major, minor, prerelease} = semver(version);
const [preReleaseStage] = prerelease;
// 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 (parseInt(version, 10) >= 16 && version.indexOf('alpha') < 0) {
REACT_PATH =
if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
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

@@ -4,14 +4,13 @@
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
color: #333;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-size: 1.4rem;
font-size: 15px;
line-height: 24px;
margin: 0;
padding: 0;
}
@@ -26,23 +25,82 @@ button {
padding: 6px 8px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #171717;
font-weight: 600;
}
h1 {
font-size: 32px;
margin: 24px 0;
}
h2 {
font-size: 24px;
margin: 24px 0 16px;
}
h3 {
font-size: 18px;
margin: 8px 0 16px;
}
h4, h4, h5, h6 {
font-size: 16px;
margin: 0 0 16px;
}
code {
font-size: 90%;
}
a {
text-decoration: none;
}
a:link:hover,
a:link:focus {
text-decoration: underline;
}
textarea {
border-radius: 2px;
border: 1px solid #d9d9d9;
font-size: 12px;
min-height: 100px;
min-width: 300px;
padding: 8px;
}
.header {
background: #222;
box-shadow: inset 0 -1px 3px #000;
font-size: 1.6rem;
line-height: 3.2rem;
background: #171717;
overflow: hidden;
padding: .8rem 1.6rem;
padding: 8px;
}
.header a {
text-decoration: none;
color: white;
}
.header a:hover,
.header a:focus{
text-decoration: underline;
}
.header select {
width: 12rem;
margin-left: 8px;
max-width: 150px;
}
.header__inner {
display: table;
margin: 0 auto;
max-width: 1000px;
overflow: hidden;
text-align: center;
width: 100%;
@@ -108,11 +166,11 @@ fieldset {
ul,
ol {
margin: 0 0 2rem 0;
margin: 0 0 16px 0;
}
li {
margin-bottom: 0.4rem;
p {
margin: 16px 0;
}
.type-subheading {
@@ -130,11 +188,10 @@ li {
.footnote {
border-left: 4px solid #aaa;
color: #444;
font-size: 14px;
font-style: italic;
line-height: 1.5;
margin-bottom: 2.4rem;
margin-left: 0.4rem;
padding-left: 1.6rem;
margin-left: 8px;
padding-left: 16px;
}
.test-case {
@@ -158,7 +215,7 @@ li {
}
.test-case__body {
padding: 0 15px;
padding: 10px;
}
.test-case__desc {
@@ -222,3 +279,24 @@ li {
.field-group {
overflow: hidden;
}
table {
border: 1px solid #d9d9d9;
border-width: 1px 1px 1px 0;
border-collapse: collapse;
margin: 16px 0;
font-size: 14px;
line-height: 20px;
width: 100%;
}
td,
th {
text-align: left;
border: 1px solid #d9d9d9;
padding: 6px;
}
tbody tr:nth-child(even) {
background: #f0f0f0;
}

View File

@@ -52,7 +52,9 @@ export default function getVersionTags() {
cachedTags = JSON.parse(cachedTags);
resolve(cachedTags);
} else {
fetch('https://api.github.com/repos/facebook/react/tags', {mode: 'cors'})
fetch('https://api.github.com/repos/facebook/react/tags?per_page=1000', {
mode: 'cors',
})
.then(res => res.json())
.then(tags => {
// A message property indicates an error was sent from the API

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"
@@ -5878,6 +5886,10 @@ semver@^5.0.3:
version "5.4.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
semver@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
send@0.14.1:
version "0.14.1"
resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"

View File

@@ -2,11 +2,10 @@
"private": true,
"name": "browserify-dev-fixture",
"dependencies": {
"browserify": "^13.3.0",
"react": "link:../../../../build/node_modules/react",
"react-dom": "link:../../../../build/node_modules/react-dom"
"browserify": "^13.3.0"
},
"scripts": {
"build": "rm -f output.js && browserify ./input.js -o output.js"
"build": "rm -f output.js && browserify ./input.js -o output.js",
"prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
}
}

View File

@@ -25,10 +25,6 @@ array-reduce@~0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
asn1.js@^4.0.0:
version "4.9.1"
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -254,10 +250,6 @@ convert-source-map@~1.1.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -365,12 +357,6 @@ elliptic@^6.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0"
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
dependencies:
iconv-lite "~0.4.13"
events@~1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
@@ -382,18 +368,6 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
md5.js "^1.3.4"
safe-buffer "^5.1.1"
fbjs@^0.8.16:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -455,10 +429,6 @@ https-browserify@~0.0.0:
version "0.0.1"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
iconv-lite@~0.4.13:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
ieee754@^1.1.4:
version "1.1.8"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
@@ -505,10 +475,6 @@ is-buffer@^1.1.0:
version "1.1.5"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
is-stream@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -517,17 +483,6 @@ isarray@~0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
js-tokens@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
json-stable-stringify@~0.0.0:
version "0.0.1"
resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
@@ -560,12 +515,6 @@ lodash.memoize@~3.0.3:
version "3.0.4"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
js-tokens "^3.0.0"
md5.js@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -618,17 +567,6 @@ module-deps@^4.0.8:
through2 "^2.0.0"
xtend "^4.0.0"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
once@^1.3.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -693,20 +631,6 @@ process@~0.11.0:
version "0.11.10"
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.3.1"
object-assign "^4.1.1"
public-encrypt@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
@@ -739,14 +663,6 @@ randombytes@^2.0.0, randombytes@^2.0.1:
dependencies:
safe-buffer "^5.1.0"
"react-dom@link:../../../../build/node_modules/react-dom":
version "0.0.0"
uid ""
"react@link:../../../../build/node_modules/react":
version "0.0.0"
uid ""
read-only-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
@@ -797,10 +713,6 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0,
version "5.1.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
version "2.4.9"
resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
@@ -910,10 +822,6 @@ typedarray@~0.0.5:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
ua-parser-js@^0.7.9:
version "0.7.17"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
umd@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e"
@@ -941,10 +849,6 @@ vm-browserify@~0.0.1:
dependencies:
indexof "0.0.1"
whatwg-fetch@>=0.10.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
wrappy@1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

View File

@@ -2,12 +2,11 @@
"private": true,
"name": "browserify-prod-fixture",
"dependencies": {
"browserify": "^13.3.0",
"react": "link:../../../../build/node_modules/react",
"react-dom": "link:../../../../build/node_modules/react-dom"
"browserify": "^13.3.0"
},
"scripts": {
"build": "rm -f output.js && browserify ./input.js -g [envify --NODE_ENV 'production'] -o output.js"
"build": "rm -f output.js && browserify ./input.js -g [envify --NODE_ENV 'production'] -o output.js",
"prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
},
"devDependencies": {
"envify": "^4.0.0"

View File

@@ -25,10 +25,6 @@ array-reduce@~0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
asn1.js@^4.0.0:
version "4.9.1"
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -254,10 +250,6 @@ convert-source-map@~1.1.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -365,12 +357,6 @@ elliptic@^6.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0"
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
dependencies:
iconv-lite "~0.4.13"
envify@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
@@ -393,18 +379,6 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
md5.js "^1.3.4"
safe-buffer "^5.1.1"
fbjs@^0.8.16:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -466,10 +440,6 @@ https-browserify@~0.0.0:
version "0.0.1"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
iconv-lite@~0.4.13:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
ieee754@^1.1.4:
version "1.1.8"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
@@ -516,10 +486,6 @@ is-buffer@^1.1.0:
version "1.1.5"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
is-stream@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
isarray@^1.0.0, isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -528,17 +494,6 @@ isarray@~0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
js-tokens@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
json-stable-stringify@~0.0.0:
version "0.0.1"
resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
@@ -571,12 +526,6 @@ lodash.memoize@~3.0.3:
version "3.0.4"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
js-tokens "^3.0.0"
md5.js@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -629,17 +578,6 @@ module-deps@^4.0.8:
through2 "^2.0.0"
xtend "^4.0.0"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
once@^1.3.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -704,20 +642,6 @@ process@~0.11.0:
version "0.11.10"
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.3.1"
object-assign "^4.1.1"
public-encrypt@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
@@ -750,14 +674,6 @@ randombytes@^2.0.0, randombytes@^2.0.1:
dependencies:
safe-buffer "^5.1.0"
"react-dom@link:../../../../build/node_modules/react-dom":
version "0.0.0"
uid ""
"react@link:../../../../build/node_modules/react":
version "0.0.0"
uid ""
read-only-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
@@ -808,10 +724,6 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0,
version "5.1.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
version "2.4.9"
resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
@@ -921,10 +833,6 @@ typedarray@~0.0.5:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
ua-parser-js@^0.7.9:
version "0.7.17"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
umd@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e"
@@ -952,10 +860,6 @@ vm-browserify@~0.0.1:
dependencies:
indexof "0.0.1"
whatwg-fetch@>=0.10.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
wrappy@1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

View File

@@ -3,11 +3,10 @@
"name": "brunch-dev-fixture",
"devDependencies": {
"brunch": "^2.9.1",
"javascript-brunch": "^2.0.0",
"react": "link:../../../../build/node_modules/react",
"react-dom": "link:../../../../build/node_modules/react-dom"
"javascript-brunch": "^2.0.0"
},
"scripts": {
"build": "rm -rf public && brunch build"
"build": "rm -rf public && brunch build",
"prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
}
}

View File

@@ -78,10 +78,6 @@ array-unique@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
asn1.js@^4.0.0:
version "4.9.1"
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -413,10 +409,6 @@ cookie@0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -604,12 +596,6 @@ encodeurl@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
dependencies:
iconv-lite "~0.4.13"
es-abstract@^1.6.1:
version "1.9.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
@@ -726,18 +712,6 @@ fast-levenshtein@^1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz#e6a754cc8f15e58987aa9cbd27af66fd6f4e5af9"
fbjs@^0.8.16:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
fcache@~0.3:
version "0.3.0"
resolved "https://registry.yarnpkg.com/fcache/-/fcache-0.3.0.tgz#d45f2f908642b91b798e88195ec47881a51c3d44"
@@ -1027,7 +1001,7 @@ https-browserify@~0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
iconv-lite@0.4.19, iconv-lite@~0.4.13:
iconv-lite@0.4.19:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -1152,10 +1126,6 @@ is-regex@^1.0.4:
dependencies:
has "^1.0.1"
is-stream@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
is-symbol@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
@@ -1182,13 +1152,6 @@ isobject@^2.0.0:
dependencies:
isarray "1.0.0"
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -1199,10 +1162,6 @@ javascript-brunch@^2.0.0:
dependencies:
esprima "~3.0.0"
js-tokens@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
jsbn@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -1264,12 +1223,6 @@ loggy@~0.3.0:
ansicolors "~0.3.2"
growl "~1.8.1"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
js-tokens "^3.0.0"
md5.js@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -1423,13 +1376,6 @@ node-browser-modules@^0.1.0:
util "~0.10.3"
vm-browserify "~0.0.4"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-pre-gyp@^0.6.36:
version "0.6.38"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
@@ -1479,7 +1425,7 @@ oauth-sign@~0.8.1:
version "0.8.2"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
object-assign@^4.1.0, object-assign@^4.1.1:
object-assign@^4.1.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -1605,20 +1551,6 @@ promise.prototype.finally@^2:
es-abstract "^1.6.1"
function-bind "^1.1.0"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.3.1"
object-assign "^4.1.1"
proxy-addr@~2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -1704,14 +1636,6 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
"react-dom@link:../../../../build/node_modules/react-dom":
version "0.0.0"
uid ""
"react@link:../../../../build/node_modules/react":
version "0.0.0"
uid ""
read-components@~0.7:
version "0.7.0"
resolved "https://registry.yarnpkg.com/read-components/-/read-components-0.7.0.tgz#77dce7adcb72a514240c47a675b9bcf7a3509dd9"
@@ -1870,10 +1794,6 @@ set-immediate-shim@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
setprototypeof@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@@ -2053,10 +1973,6 @@ type-is@~1.6.15:
media-typer "0.3.0"
mime-types "~2.1.15"
ua-parser-js@^0.7.9:
version "0.7.17"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
uid-number@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -2118,10 +2034,6 @@ vm-browserify@~0.0.4:
dependencies:
indexof "0.0.1"
whatwg-fetch@>=0.10.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
which@^1.2.12:
version "1.3.0"
resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"

View File

@@ -3,11 +3,10 @@
"name": "brunch-prod-fixture",
"devDependencies": {
"brunch": "^2.9.1",
"javascript-brunch": "^2.0.0",
"react": "link:../../../../build/node_modules/react",
"react-dom": "link:../../../../build/node_modules/react-dom"
"javascript-brunch": "^2.0.0"
},
"scripts": {
"build": "rm -rf public && brunch build -p"
"build": "rm -rf public && brunch build -p",
"prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
}
}

View File

@@ -78,10 +78,6 @@ array-unique@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
asn1.js@^4.0.0:
version "4.9.1"
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -413,10 +409,6 @@ cookie@0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -604,12 +596,6 @@ encodeurl@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
dependencies:
iconv-lite "~0.4.13"
es-abstract@^1.6.1:
version "1.9.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
@@ -726,18 +712,6 @@ fast-levenshtein@^1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz#e6a754cc8f15e58987aa9cbd27af66fd6f4e5af9"
fbjs@^0.8.16:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
fcache@~0.3:
version "0.3.0"
resolved "https://registry.yarnpkg.com/fcache/-/fcache-0.3.0.tgz#d45f2f908642b91b798e88195ec47881a51c3d44"
@@ -1027,7 +1001,7 @@ https-browserify@~0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
iconv-lite@0.4.19, iconv-lite@~0.4.13:
iconv-lite@0.4.19:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -1152,10 +1126,6 @@ is-regex@^1.0.4:
dependencies:
has "^1.0.1"
is-stream@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
is-symbol@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
@@ -1182,13 +1152,6 @@ isobject@^2.0.0:
dependencies:
isarray "1.0.0"
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -1199,10 +1162,6 @@ javascript-brunch@^2.0.0:
dependencies:
esprima "~3.0.0"
js-tokens@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
jsbn@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -1264,12 +1223,6 @@ loggy@~0.3.0:
ansicolors "~0.3.2"
growl "~1.8.1"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
js-tokens "^3.0.0"
md5.js@^1.3.4:
version "1.3.4"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -1423,13 +1376,6 @@ node-browser-modules@^0.1.0:
util "~0.10.3"
vm-browserify "~0.0.4"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-pre-gyp@^0.6.36:
version "0.6.38"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
@@ -1479,7 +1425,7 @@ oauth-sign@~0.8.1:
version "0.8.2"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
object-assign@^4.1.0, object-assign@^4.1.1:
object-assign@^4.1.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -1605,20 +1551,6 @@ promise.prototype.finally@^2:
es-abstract "^1.6.1"
function-bind "^1.1.0"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.3.1"
object-assign "^4.1.1"
proxy-addr@~2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -1704,14 +1636,6 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
"react-dom@link:../../../../build/node_modules/react-dom":
version "0.0.0"
uid ""
"react@link:../../../../build/node_modules/react":
version "0.0.0"
uid ""
read-components@~0.7:
version "0.7.0"
resolved "https://registry.yarnpkg.com/read-components/-/read-components-0.7.0.tgz#77dce7adcb72a514240c47a675b9bcf7a3509dd9"
@@ -1870,10 +1794,6 @@ set-immediate-shim@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
setprototypeof@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@@ -2053,10 +1973,6 @@ type-is@~1.6.15:
media-typer "0.3.0"
mime-types "~2.1.15"
ua-parser-js@^0.7.9:
version "0.7.17"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
uid-number@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -2118,10 +2034,6 @@ vm-browserify@~0.0.4:
dependencies:
indexof "0.0.1"
whatwg-fetch@>=0.10.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
which@^1.2.12:
version "1.3.0"
resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"

View File

@@ -6,5 +6,6 @@ module.exports = {
paths: {
react: '../../../../build/dist/react.development',
'react-dom': '../../../../build/dist/react-dom.development',
schedule: '../../../../build/dist/schedule.development',
},
};

View File

@@ -6,5 +6,6 @@ module.exports = {
paths: {
react: '../../../../build/dist/react.production.min',
'react-dom': '../../../../build/dist/react-dom.production.min',
schedule: '../../../../build/dist/schedule.development',
},
};

View File

@@ -2,5 +2,6 @@ System.config({
paths: {
react: '../../../../build/dist/react.development.js',
'react-dom': '../../../../build/dist/react-dom.development.js',
schedule: '../../../../build/dist/schedule.development',
},
});

View File

@@ -2,5 +2,6 @@ System.config({
paths: {
react: '../../../../build/dist/react.production.min.js',
'react-dom': '../../../../build/dist/react-dom.production.min.js',
schedule: '../../../../build/dist/schedule.development',
},
});

View File

@@ -23,7 +23,7 @@
<ol>
<li>
<button onClick="runTestOne()">Run Test 1</button>
<p>Calls the callback with the frame when not blocked:</p>
<p>Calls the callback within the frame when not blocked:</p>
<div><b>Expected:</b></div>
<div id="test-1-expected">
</div>
@@ -79,11 +79,24 @@
<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-scheduler.development.js"></script>
<script src="../../build/dist/schedule.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
const {scheduleWork, cancelWork, now} = ReactScheduler;
const {
unstable_scheduleWork: scheduleWork,
unstable_cancelWork: cancelWork,
unstable_now: now
} = Schedule;
function displayTestResult(testNumber) {
const expectationNode = document.getElementById('test-' + testNumber + '-expected');
const resultNode = document.getElementById('test-' + testNumber);
@@ -464,6 +477,22 @@ function runTestSix() {
console.log('scheduled cbE');
};
}
function runTestSeven() {
// Test 7
// Calls callbacks, continues calling them even when this tab is in the
// background
clearTestResult(7);
let counter = -1;
function incrementCounterAndScheduleNextCallback() {
const counterNode = document.getElementById('test-7');
counter++;
counterNode.innerHTML = counter;
waitForTimeToPass(100);
scheduleWork(incrementCounterAndScheduleNextCallback);
}
scheduleWork(incrementCounterAndScheduleNextCallback);
}
</script type="text/babel">
</body>
</html>

View File

@@ -1334,10 +1334,6 @@ cookie@0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
core-js@^2.4.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
@@ -2057,18 +2053,6 @@ fb-watchman@^1.8.0, fb-watchman@^1.9.0:
dependencies:
bser "1.0.2"
fbjs@^0.8.16:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"
figures@^1.3.5:
version "1.7.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -2753,13 +2737,6 @@ isobject@^2.0.0:
dependencies:
isarray "1.0.0"
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -3265,7 +3242,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
loose-envify@^1.0.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
@@ -3446,13 +3423,6 @@ node-emoji@^1.4.1:
dependencies:
string.prototype.codepointat "^0.2.0"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-fetch@^1.6.3:
version "1.6.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
@@ -3588,7 +3558,7 @@ oauth-sign@~0.8.1:
version "0.8.2"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -4101,20 +4071,6 @@ promise@7.1.1:
dependencies:
asap "~2.0.3"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.3.1"
object-assign "^4.1.1"
proxy-addr@~1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
@@ -4590,7 +4546,7 @@ set-immediate-shim@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
setimmediate@^1.0.4, setimmediate@^1.0.5:
setimmediate@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
@@ -4985,10 +4941,6 @@ typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
ua-parser-js@^0.7.9:
version "0.7.17"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
uglify-js@2.8.x, uglify-js@^2.6:
version "2.8.21"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.21.tgz#1733f669ae6f82fc90c7b25ec0f5c783ee375314"
@@ -5242,10 +5194,6 @@ whatwg-fetch@2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
whatwg-fetch@>=0.10.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
whatwg-url@^4.3.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.7.0.tgz#202035ac1955b087cdd20fa8b58ded3ab1cd2af5"

View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>Test tracking UMD</title>
<style>
body {
font-family: sans-serif;
}
ol {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
li {
background-color: #F7F7F7;
border: solid #CCC 0.125rem;
margin-bottom: 0.5rem;
border-radius: 0.25rem;
padding: 0.5rem;
}
li:after {
content: attr(data-value);
margin-left: 0.25rem;
}
.correct {
border-color: #0C0;
border-style: solid;
background: #EFE;
}
.incorrect {
border-color: #F00;
border-style: dashed;
background-color: #FEE;
}
</style>
</head>
<body>
<h1>Test tracking UMD</h1>
<p>
This fixture tests that the new tracking 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>
Before running the tests below, check the console to make sure there are no errors.
</p>
<h3>
Tests
<button onClick="runAllTests()">Run all tests</button>
</h3>
<ol>
<li id="checkSchedulerAPI" data-value="...">
<strong>Test scheduler API</strong>
</li>
<li id="checkSchedulerTrackingAPI" data-value="...">
<strong>Test tracking API</strong>
</li>
<li id="checkSchedulerTrackingSubscriptionsAPI" data-value="...">
<strong>Test tracking 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>
<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>
</body>
</html>

205
fixtures/tracking/script.js Normal file
View File

@@ -0,0 +1,205 @@
function runTest(listItem, callback) {
try {
callback();
listItem.className = 'correct';
listItem.setAttribute('data-value', 'All checks pass');
} catch (error) {
listItem.className = 'incorrect';
listItem.setAttribute('data-value', error);
}
}
function runAllTests() {
try {
checkSchedulerAPI();
} finally {
try {
checkSchedulerTrackingAPI();
} finally {
try {
checkSchedulerTrackingSubscriptionsAPI();
} finally {
checkEndToEndIntegration();
}
}
}
}
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'
) {
throw 'API is not defined';
}
if (Schedule.unstable_now() !== performance.now()) {
throw 'API does not work';
}
// There is no real way to verify that the two APIs are connected.
});
}
function checkSchedulerTrackingAPI() {
runTest(document.getElementById('checkSchedulerTrackingAPI'), () => {
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'
) {
throw 'API is not defined';
}
try {
let interactionsSet;
ScheduleTracking.unstable_track('test', 123, () => {
interactionsSet = ScheduleTracking.unstable_getCurrent();
});
if (interactionsSet.size !== 1) {
throw null;
}
const interaction = Array.from(interactionsSet)[0];
if (interaction.name !== 'test' || interaction.timestamp !== 123) {
throw null;
}
} catch (error) {
throw 'API does not work';
}
const ForwardedSchedulerTracking =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ScheduleTracking;
if (
ScheduleTracking.unstable_getThreadID() ===
ForwardedSchedulerTracking.unstable_getThreadID()
) {
throw 'API forwarding is broken';
}
});
}
function checkSchedulerTrackingSubscriptionsAPI() {
runTest(
document.getElementById('checkSchedulerTrackingSubscriptionsAPI'),
() => {
if (
typeof ScheduleTracking === 'undefined' ||
typeof ScheduleTracking.unstable_subscribe !== 'function' ||
typeof ScheduleTracking.unstable_unsubscribe !== 'function'
) {
throw 'API is not defined';
}
const onInteractionScheduledWorkCompletedCalls = [];
const onInteractionTrackedCalls = [];
const onWorkCanceledCalls = [];
const onWorkScheduledCalls = [];
const onWorkStartedCalls = [];
const onWorkStoppedCalls = [];
const subscriber = {
onInteractionScheduledWorkCompleted: (...args) =>
onInteractionScheduledWorkCompletedCalls.push(args),
onInteractionTracked: (...args) => onInteractionTrackedCalls.push(args),
onWorkCanceled: (...args) => onWorkCanceledCalls.push(args),
onWorkScheduled: (...args) => onWorkScheduledCalls.push(args),
onWorkStarted: (...args) => onWorkStartedCalls.push(args),
onWorkStopped: (...args) => onWorkStoppedCalls.push(args),
};
try {
ScheduleTracking.unstable_subscribe(subscriber);
ScheduleTracking.unstable_track('foo', 123, () => {});
ScheduleTracking.unstable_unsubscribe(subscriber);
if (onInteractionTrackedCalls.length !== 1) {
throw null;
}
const interaction = onInteractionTrackedCalls[0][0];
if (interaction.name !== 'foo' || interaction.timestamp !== 123) {
throw null;
}
ScheduleTracking.unstable_track('bar', 456, () => {});
if (onInteractionTrackedCalls.length !== 1) {
throw null;
}
} catch (error) {
throw 'API does not forward methods';
}
const ForwardedSchedulerTracking =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
.ScheduleTracking;
try {
ForwardedSchedulerTracking.unstable_subscribe(subscriber);
ScheduleTracking.unstable_track('foo', 123, () => {});
ForwardedSchedulerTracking.unstable_track('bar', 456, () => {});
ScheduleTracking.unstable_unsubscribe(subscriber);
if (onInteractionTrackedCalls.length !== 3) {
throw null;
}
const interactionFoo = onInteractionTrackedCalls[1][0];
const interactionBar = onInteractionTrackedCalls[2][0];
if (
interactionFoo.name !== 'foo' ||
interactionFoo.timestamp !== 123 ||
interactionBar.name !== 'bar' ||
interactionBar.timestamp !== 456
) {
throw null;
}
ForwardedSchedulerTracking.unstable_track('baz', 789, () => {});
if (onInteractionTrackedCalls.length !== 3) {
throw null;
}
} catch (error) {
throw 'API forwarding is broken';
}
}
);
}
function checkEndToEndIntegration() {
runTest(document.getElementById('checkEndToEndIntegration'), () => {
try {
const onRenderCalls = [];
const onRender = (...args) => onRenderCalls.push(args);
const container = document.createElement('div');
ScheduleTracking.unstable_track('render', 123, () => {
ReactDOM.render(
React.createElement(
React.unstable_Profiler,
{id: 'profiler', onRender},
React.createElement('div', null, 'hi')
),
container
);
});
if (container.textContent !== 'hi') {
throw null;
}
if (onRenderCalls.length !== 1) {
throw null;
}
const call = onRenderCalls[0];
if (call.length !== 7) {
throw null;
}
const interaction = Array.from(call[6])[0];
if (interaction.name !== 'render' || interaction.timestamp !== 123) {
throw null;
}
} catch (error) {
throw 'End to end integration is broken';
}
});
}

View File

@@ -0,0 +1,14 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# testing
coverage
# production
build
# misc
.DS_Store
npm-debug.log

View File

@@ -0,0 +1,37 @@
# IO "suspense" demo
## What is this fixture?
This is a demo application based on [Dan Abramov's](https://github.com/gaearon) recent [JSConf Iceland talk](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) about React.
It depends on a local build of React and enables us to easily test async and "suspense" APIs in a more "real world app" like context.
## Can I use this code in production?
No. The APIs being tested here are unstable and some of them have still not been released to NPM. For now, this fixture is only a test harness.
## How do I run this fixture?
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:
```shell
# 1: Build react from source
cd /path/to/react
yarn
yarn build dom-client,core,simple-cache-provider,schedule --type=NODE
# 2: Install fixture dependencies
cd fixtures/unstable-async/suspense/
yarn
# 3: Run the app
yarn start
```

View File

@@ -0,0 +1,40 @@
{
"name": "io-demo",
"version": "0.1.0",
"private": true,
"homepage": ".",
"devDependencies": {
"gh-pages": "^1.1.0",
"react-scripts": "^1.1.4"
},
"dependencies": {
"clipboard": "^1.7.1",
"github-fork-ribbon-css": "^0.2.1",
"react-draggable": "^3.0.5"
},
"scripts": {
"prestart": "cp -r ../../../build/node_modules/* ./node_modules/",
"prebuild": "cp -r ../../../build/node_modules/* ./node_modules/",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./src/favicon.ico">
<title>React Core Team</title>
</head>
<body>
<div id="root"></div>
<div id="debugger"></div>
</body>
</html>

View File

@@ -0,0 +1,15 @@
{
"short_name": "Emoji Search",
"name": "Emoji Search Example App",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@@ -0,0 +1,334 @@
export const coreContributorListJSON = [
{
id: 'acdlite',
name: 'Andrew Clark',
},
{
id: 'bvaughn',
name: 'Brian Vaughn',
},
{
id: 'gaearon',
name: 'Dan Abramov',
},
{
id: 'trueadm',
name: 'Dominic Gannaway',
},
{
id: 'flarnie',
name: 'Flarnie Marchan',
},
{
id: 'sebmarkbage',
name: 'Sebastian Markbåge',
},
{
id: 'sophiebits',
name: 'Sophie Alpert',
},
];
export const userProfileJSON = {
acdlite: {
id: 'acdlite',
name: 'Andrew Clark',
image: '/img/acdlite.jpeg',
location: 'Redwood City, CA',
email: 'acdlite@me.com',
tagline: 'React core at Facebook. Hi!',
},
bvaughn: {
id: 'bvaughn',
name: 'Brian Vaughn',
image: '/img/bvaughn.jpeg',
location: 'Mountain View, CA',
email: 'brian.david.vaughn@gmail.com',
tagline:
'React JS core team at @facebook; formerly at @treasure-data and @google.',
},
gaearon: {
id: 'gaearon',
name: 'Dan Abramov',
image: '/img/gaearon.jpeg',
location: 'London, UK',
email: 'dan.abramov@me.com',
tagline:
'Working on @reactjs. Co-author of Redux and Create React App. Building tools for humans.',
},
flarnie: {
id: 'flarnie',
name: 'Flarnie Marchan',
image: '/img/flarnie.jpeg',
location: 'Oakland, CA',
email: null,
tagline:
'Software Engineer at Facebook React Core Team & Co-maintainer of Draft.js',
},
sebmarkbage: {
id: 'sebmarkbage',
name: 'Sebastian Markbåge',
image: '/img/sebmarkbage.jpeg',
location: 'San Francisco',
email: 'sebastian@calyptus.eu',
tagline: null,
},
sophiebits: {
id: 'sophiebits',
name: 'Sophie Alpert',
image: '/img/sophiebits.jpeg',
location: 'California',
email: 'hi@sophiebits.com',
tagline:
'I like fixing things. eng manager of @reactjs at Facebook. ex-@khanacademy. 💎🌸 she/her. kindness, intersectional feminism, music.',
},
trueadm: {
id: 'trueadm',
name: 'Dominic Gannaway',
image: '/img/trueadm.jpeg',
location: 'London, United Kingdom',
email: null,
tagline:
'Currently an engineer on the React core team at @facebook. Author of @infernojs and t7. Enjoys coding + being a Dad.',
},
};
export const userRepositoriesListJSON = {
acdlite: [
{
name: 'recompose',
url: 'https://github.com/acdlite/recompose',
description:
'A React utility belt for function components and higher-order components.',
},
{
name: 'react-fiber-architecture',
url: 'https://github.com/acdlite/react-fiber-architecture',
description: "A description of React's new core algorithm, React Fiber",
},
{
name: 'redux-router',
url: 'https://github.com/acdlite/redux-router',
description:
'Redux bindings for React Router keep your router state inside your Redux store',
},
{
name: 'flummox',
url: 'https://github.com/acdlite/flummox',
description: 'Minimal, isomorphic Flux.',
},
{
name: 'redux-rx',
url: 'https://github.com/acdlite/redux-rx',
description: 'RxJS utilities for Redux.',
},
{
name: 'react-remarkable',
url: 'https://github.com/acdlite/react-remarkable',
description: 'A React component for rendering Markdown with remarkable',
},
],
bvaughn: [
{
name: 'react-virtualized',
url: 'https://github.com/bvaughn/react-virtualized',
description:
'React components for efficiently rendering large lists and tabular data',
},
{
name: 'redux-search',
url: 'https://github.com/bvaughn/redux-search',
description: 'Redux bindings for client-side search',
},
{
name: 'react-window',
url: 'https://github.com/bvaughn/react-window',
description:
'React components for efficiently rendering large lists and tabular data',
},
{
name: 'react-virtualized-select',
url: 'https://github.com/bvaughn/react-virtualized-select',
description:
'HOC that uses react-virtualized and react-select to display large lists of options in a drop-down',
},
{
name: 'js-search',
url: 'https://github.com/bvaughn/js-search',
description:
'JS Search is an efficient, client-side search library for JavaScript and JSON objects',
},
{
name: 'react-highlight-words',
url: 'https://github.com/bvaughn/react-highlight-words',
description:
'React component to highlight words within a larger body of text',
},
],
gaearon: [
{
name: 'facebook/react',
url: 'https://github.com/facebook/react',
description:
'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
},
{
name: 'reduxjs/redux',
url: 'https://github.com/reduxjs/redux',
description: 'Predictable state container for JavaScript apps',
},
{
name: 'facebook/create-react-app',
url: 'https://github.com/facebook/create-react-app',
description: 'Create React apps with no build configuration.',
},
{
name: 'reduxjs/redux-devtools',
url: 'https://github.com/reduxjs/redux-devtools',
description:
'DevTools for Redux with hot reloading, action replay, and customizable UI',
},
{
name: 'react-dnd/react-dnd',
url: 'https://github.com/react-dnd/react-dnd',
description: 'Drag and Drop for React',
},
{
name: 'paularmstrong/normalizr',
url: 'https://github.com/paularmstrong/normalizr',
description: 'Normalizes nested JSON according to a schema',
},
],
flarnie: [
{
name: 'diffux/diffux',
url: 'https://github.com/diffux/diffux',
description: 'Perceptual diffs of responsive screenshots made simple.',
},
{
name: 'facebook/draft-js',
url: 'https://github.com/facebook/draft-js',
description: 'A React framework for building text editors.',
},
{
name: 'facebook/react',
url: 'https://github.com/facebook/react',
description:
'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
},
{
name: 'facebook/jest',
url: 'https://github.com/facebook/jest',
description: '🃏 Delightful JavaScript Testing.',
},
{
name: 'Galooshi/import-js',
url: 'https://github.com/Galooshi/import-js',
description: 'A tool to simplify importing JS modules',
},
{
name: 'webpack_rails_demo',
url: 'https://github.com/flarnie/webpack_rails_demo',
description: 'Setting up webpack with Ruby on Rails: a basic demo',
},
],
sebmarkbage: [
{
name: 'art',
url: 'https://github.com/sebmarkbage/art',
description:
"Retained mode vector drawing API designed for multiple output modes. There's also a built-in SVG parser.",
},
{
name: 'ecmascript-immutable-data-structures',
url:
'https://github.com/sebmarkbage/ecmascript-immutable-data-structures',
description: null,
},
{
name: 'ocamlrun-wasm',
url: 'https://github.com/sebmarkbage/ocamlrun-wasm',
description: 'OCamlrun WebAssembly - OCaml Bytecode Interpreter in WASM',
},
{
name: 'ecmascript-generator-expression',
url: 'https://github.com/sebmarkbage/ecmascript-generator-expression',
description:
'Proposal for do Generator Expressions in ECMAScript. Work in progress. Edit Add topics',
},
{
name: 'ecmascript-undefined-propagation',
url: 'https://github.com/sebmarkbage/ecmascript-undefined-propagation',
description:
'ECMAScript proposal to relax the rules to return `undefined` for property access on `null` or `undefined` instead of throwing.',
},
{
name: 'ecmascript-shallow-equal',
url: 'https://github.com/sebmarkbage/ecmascript-shallow-equal',
description: 'A proposal for ECMAScript for Object.shallowEqual',
},
],
sophiebits: [
{
name: 'facebook/react',
url: 'https://github.com/facebook/react',
description:
'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
},
{
name: 'Khan/KaTeX',
url: 'https://github.com/Khan/KaTeX',
description: 'Fast math typesetting for the web.',
},
{
name: 'facebook/react-devtools',
url: 'https://github.com/facebook/react-devtools',
description:
'An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.',
},
{
name: 'vim-awesome/vim-awesome',
url: 'https://github.com/vim-awesome/vim-awesome',
description: 'Awesome Vim plugins from across the universe',
},
{
name: 'facebook/draft-js',
url: 'https://github.com/facebook/draft-js',
description: 'A React framework for building text editors.',
},
{
name: 'es3ify',
url: 'https://github.com/sophiebits/es3ify',
description:
'Browserify transform to convert ES5 syntax to be ES3-compatible.',
},
],
trueadm: [
{
name: 'facebook/react',
url: 'https://github.com/facebook/react',
description:
'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
},
{
name: 'infernojs/inferno',
url: 'https://github.com/infernojs/inferno',
description:
'An extremely fast, React-like JavaScript library for building modern user interfaces',
},
{
name: 'facebook/prepack',
url: 'https://github.com/facebook/prepack',
description: 'A JavaScript bundle optimizer.',
},
{
name: 't7',
url: 'https://github.com/trueadm/t7',
description: 'Lightweight virtual DOM templating library',
},
{
name: 'infernojs/babel-plugin-inferno',
url: 'https://github.com/infernojs/babel-plugin-inferno',
description: null,
},
],
};

View File

@@ -0,0 +1,67 @@
import {
coreContributorListJSON,
userProfileJSON,
userRepositoriesListJSON,
} from './data';
export function fetchCoreContributorListJSON() {
return makeFakeAPICall('/react/contributors', coreContributorListJSON);
}
export function fetchUserProfileJSON(id) {
return makeFakeAPICall(`/${id}/details`, userProfileJSON[id]);
}
export function fetchUserRepositoriesListJSON(id) {
return makeFakeAPICall(`/${id}/repositories`, userRepositoriesListJSON[id]);
}
let fakeRequestTime = 1000;
let onProgress = () => true;
export function setFakeRequestTime(val) {
fakeRequestTime = val;
}
export function setProgressHandler(handler) {
onProgress = handler;
}
export function setPauseNewRequests(value) {
shouldPauseNewRequests = value;
}
let shouldPauseNewRequests = false;
let notifiers = {};
let isPausedUrl = {};
export function setPaused(url, isPaused) {
const wasPaused = isPausedUrl[url];
isPausedUrl[url] = isPaused;
if (isPaused !== wasPaused) {
notifiers[url]();
}
}
function makeFakeAPICall(url, result) {
let i = 1;
return new Promise(resolve => {
isPausedUrl[url] = shouldPauseNewRequests;
function notify() {
if (!isPausedUrl[url]) {
i++;
}
onProgress(url, i, isPausedUrl[url]);
if (isPausedUrl[url]) {
return;
}
if (i === 100) {
resolve(result);
} else {
setTimeout(notify, fakeRequestTime / 100);
}
}
notifiers[url] = notify;
notify();
});
}

View File

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

View File

@@ -0,0 +1,96 @@
import React, {Placeholder, PureComponent} from 'react';
import {unstable_scheduleWork} from 'schedule';
import {
unstable_track as track,
unstable_wrap as wrap,
} from 'schedule/tracking';
import {createResource} from 'simple-cache-provider';
import {cache} from '../cache';
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} />;
}
export default class App extends PureComponent {
state = {
currentId: null,
showDetail: false,
};
componentDidUpdate(prevProps, prevState) {
if (
prevState.showDetail !== this.state.showDetail ||
(prevState.currentId !== this.state.currentId && this.state.showDetail)
) {
window.scrollTo(0, 0);
}
}
handleUserClick = id => {
track(`View ${id}`, performance.now(), () => {
track(`View ${id} (high-pri)`, performance.now(), () =>
this.setState({
currentId: id,
})
);
unstable_scheduleWork(
wrap(() =>
track(`View ${id} (low-pri)`, performance.now(), () =>
this.setState({
showDetail: true,
})
)
)
);
});
};
handleBackClick = () =>
track('View list', performance.now(), () =>
this.setState({
currentId: null,
showDetail: false,
})
);
render() {
const {currentId, showDetail} = this.state;
return showDetail
? this.renderDetail(currentId)
: this.renderList(currentId);
}
renderDetail(id) {
return (
<div>
<button
onClick={this.handleBackClick}
style={{
display: 'block',
marginBottom: '1rem',
}}>
Return to list
</button>
<Placeholder delayMs={2000} fallback={<Spinner size="large" />}>
<UserPageLoader id={id} />
</Placeholder>
</div>
);
}
renderList(loadingId) {
return (
<Placeholder delayMs={1500} fallback={<Spinner size="large" />}>
<ContributorListPage
loadingId={loadingId}
onUserClick={this.handleUserClick}
/>
</Placeholder>
);
}
}

View File

@@ -0,0 +1,62 @@
import React, {Fragment} from 'react';
import {createResource} from 'simple-cache-provider';
import {cache} from '../cache';
import Spinner from './Spinner';
import {fetchCoreContributorListJSON} from '../api';
const ContributorListResource = createResource(fetchCoreContributorListJSON);
const ContributorListPage = ({loadingId, onUserClick}) => (
<Fragment>
<h1>React Core Team</h1>
<ul
style={{
display: 'grid',
gridGap: '0.5rem',
gridTemplateColumns: 'repeat(auto-fill, 20rem)',
padding: 0,
margin: 0,
}}>
{ContributorListResource.read(cache).map(user => (
<ContributorListItem
key={user.id}
onClick={() => onUserClick(user.id)}
isLoading={loadingId && user.id === loadingId}
user={user}
/>
))}
</ul>
</Fragment>
);
const ContributorListItem = ({isLoading, onClick, user}) => (
<li
onClick={onClick}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '1rem',
backgroundColor: 'var(--color-buttonBg)',
border: '1px solid var(--color-buttonBorder)',
borderRadius: '1rem',
opacity: isLoading === false ? 0.5 : 1,
cursor: isLoading ? 'default' : 'pointer',
}}
tabIndex="0">
<div>
<strong>{user.name}</strong>
<div style={{marginTop: '0.5rem'}}>{user.id}</div>
</div>
{isLoading ? (
<Spinner size="small" />
) : (
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
)}
</li>
);
export default ContributorListPage;

View File

@@ -0,0 +1,75 @@
.Spinner {
animation: rotate 1.3s linear infinite;
}
.SpinnerContainer-large {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.SmallSpinnerPath {
stroke-dasharray: 100;
stroke-dashoffset: 0;
transform-origin: center;
animation:
SmallDash 1.3s ease-in-out infinite;
}
@keyframes SmallDash {
0% { stroke-dashoffset: 100; }
50% {
stroke-dashoffset: 50;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 100;
transform:rotate(450deg);
}
}
.MediumSpinnerPath {
stroke-dasharray: 150;
stroke-dashoffset: 0;
transform-origin: center;
animation:
MediumDash 1.3s ease-in-out infinite;
}
@keyframes MediumDash {
0% { stroke-dashoffset: 150; }
50% {
stroke-dashoffset: 50;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 150;
transform:rotate(450deg);
}
}
.LargeSpinnerPath {
stroke-dasharray: 200;
stroke-dashoffset: 0;
transform-origin: center;
animation:
LargeDash 1.3s ease-in-out infinite;
}
@keyframes LargeDash {
0% { stroke-dashoffset: 200; }
50% {
stroke-dashoffset: 50;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 200;
transform:rotate(450deg);
}
}

View File

@@ -0,0 +1,51 @@
import React from 'react';
import './Spinner.css';
const SPINNER_SIZES = {
small: 30,
medium: 50,
large: 70,
};
const STROKE_WIDTHS = {
small: 4,
medium: 5,
large: 6,
};
const PATH_CLASS_NAMES = {
small: 'SmallSpinnerPath',
medium: 'MediumSpinnerPath',
large: 'LargeSpinnerPath',
};
// Heavily inspired by https://codepen.io/mrrocks/pen/EiplA
export default function Spinner({size = 'small'}) {
const baseSize = SPINNER_SIZES[size];
const pathSize = baseSize / 2;
const strokeWidth = STROKE_WIDTHS[size];
const pathRadius = `${baseSize / 2 - strokeWidth}px`;
const className = PATH_CLASS_NAMES[size];
const containerClassName = `SpinnerContainer SpinnerContainer-${size}`;
return (
<div className={containerClassName}>
<svg
className={className}
width={baseSize}
height={baseSize}
viewBox={`0 0 ${baseSize} ${baseSize}`}>
<circle
className="SpinnerPath"
fill="none"
stroke="currentColor"
strokeWidth={strokeWidth}
strokeLinecap="round"
cx={pathSize}
cy={pathSize}
r={pathRadius}
/>
</svg>
</div>
);
}

View File

@@ -0,0 +1,169 @@
import React, {Placeholder} from 'react';
import {createResource} from 'simple-cache-provider';
import Spinner from './Spinner';
import {cache} from '../cache';
import {fetchUserProfileJSON, fetchUserRepositoriesListJSON} from '../api';
export default function UserPage({id}) {
return (
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, 20rem)',
gridGap: '1rem',
alignItems: 'start',
}}>
<UserDetails id={id} />
<Placeholder delayMs={1000} fallback={<Spinner size="medium" />}>
<Repositories id={id} />
</Placeholder>
</div>
);
}
const UserDetailsResource = createResource(fetchUserProfileJSON);
function UserDetails({id}) {
const user = UserDetailsResource.read(cache, id);
return (
<div
style={{
display: 'grid',
gridGap: '0.5rem',
width: '20rem',
padding: '1rem',
backgroundColor: 'var(--color-buttonBg)',
border: '1px solid var(--color-buttonBorder)',
borderRadius: '1rem',
}}>
<UserPicture source={user.image} />
<div
style={{
fontSize: '1.5rem',
fontWeight: 'bold',
color: 'var(--color-pageTextDark)',
}}>
{user.name}
</div>
<div style={{fontSize: '1.25rem'}}>{user.id}</div>
{user.tagline !== null && <div>{user.tagline}</div>}
<hr
style={{
width: '100%',
height: '1px',
border: 'none',
backgroundColor: '#ddd',
}}
/>
{user.location && <Location location={user.location} />}
{user.email && <Email email={user.email} />}
</div>
);
}
const Location = ({location}) => (
<div
style={{
display: 'flex',
alignItems: 'center',
}}>
<svg
viewBox="0 0 24 24"
style={{
width: '24px',
height: '24px',
marginRight: '0.5rem',
fill: 'currentColor',
}}>
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
{location}
</div>
);
const Email = ({email}) => (
<div
style={{
display: 'flex',
alignItems: 'center',
}}>
<svg
viewBox="0 0 24 24"
style={{
width: '24px',
height: '24px',
marginRight: '0.5rem',
fill: 'currentColor',
}}>
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
<a href={`mailto:${email}`}>{email}</a>
</div>
);
const ImageResource = createResource(
src =>
new Promise(resolve => {
const img = new Image();
img.onload = () => resolve(src);
img.src = src;
})
);
function Img({src, alt, ...rest}) {
return <img src={ImageResource.read(cache, src)} alt={alt} {...rest} />;
}
function UserPicture({source}) {
return (
<Placeholder delayMs={1500} fallback={<img src={source} alt="poster" />}>
<Img
src={source}
alt="profile picture"
style={{
width: '100%',
height: 'auto',
borderRadius: '0.5rem',
}}
/>
</Placeholder>
);
}
const UserRepositoriesResource = createResource(fetchUserRepositoriesListJSON);
function Repositories({id}) {
const repos = UserRepositoriesResource.read(cache, id);
return (
<ul
style={{
display: 'grid',
gridGap: '1rem',
padding: 0,
margin: 0,
}}>
{repos.map(repo => <Repository key={repo.name} {...repo} />)}
</ul>
);
}
function Repository({description, name, url}) {
return (
<li
style={{
display: 'grid',
gridGap: '0.5rem',
padding: '1rem',
backgroundColor: 'var(--color-buttonBg)',
border: '1px solid var(--color-buttonBorder)',
borderRadius: '1rem',
}}>
<strong>
<a href={url}>{name}</a>
</strong>
<div>{description}</div>
</li>
);
}

View File

@@ -0,0 +1,90 @@
* { box-sizing: border-box; }
:root {
--color-debuggerBg: #f7f7f7;
--color-debuggerText: #333;
--color-debuggerBorder: #e7e7e7;
--color-panelBg: #f7f7f7;
--color-panelText: #333;
--color-pageTextDark: #000;
--color-pageText: #333;
--color-pageBg: #fff;
--color-buttonBg: #f7f7f7;
--color-buttonBorder: #e7e7e7;
--pt: 8px;
}
body {
margin: 0;
padding: calc(var(--pt)*4);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: var(--color-pageText);
background-color: var(--color-pageBg);
}
/* -------------------------------- */
/* Debugger */
/* -------------------------------- */
#debugger {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* width: 100vw; */
/* height: 100vh; */
pointer-events: none;
}
.🎛 {
position: fixed;
max-width: calc(var(--pt)*28);
border-radius: var(--pt);
padding: calc(var(--pt)*2);
background-color: var(--color-debuggerBg);
border: 1px solid var(--color-debuggerBorder);
border-radius: 0.5rem;
color: var(--color-debuggerText);
pointer-events: all;
}
.🕹 {
background-color: var(--color-buttonBg);
border: 1px solid var(--color-buttonBorder);
border-radius: var(--pt);
padding: 0;
width: calc(var(--pt)*5);
height: calc(var(--pt)*5);
font-size: calc(var(--pt)*3);
line-height: 1;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.🕹.👶 {
width: calc(var(--pt)*3);
height: calc(var(--pt)*3);
font-size: calc(var(--pt)*2);
}
.🕹.🐘 {
width: auto;
height: calc(var(--pt)*7);
padding: var(--pt) calc(var(--pt)*2);
}
.🕹:hover {
background-color: white;
top: -4px;
left: -4px;
box-shadow: 4px 4px 0 var(--color-buttonBorder);
}
.🕹:active {
box-shadow: none;
top: 0;
left: 0;
}

View File

@@ -0,0 +1,275 @@
import React, {Fragment, PureComponent} from 'react';
import {unstable_createRoot, render} from 'react-dom';
import {unstable_track as track} from 'schedule/tracking';
import {cache} from './cache';
import {
setFakeRequestTime,
setPaused,
setPauseNewRequests,
setProgressHandler,
} from './api';
import App from './components/App';
import Draggable from 'react-draggable';
import './index.css';
let handleReset;
class Shell extends PureComponent {
state = {
iteration: 0,
};
componentDidMount() {
handleReset = this.handleReset;
}
handleReset = () =>
this.setState(prevState => ({
iteration: prevState.iteration + 1,
}));
render() {
return <App key={this.state.iteration} />;
}
}
class Debugger extends PureComponent {
state = {
iteration: 0,
strategy: 'async',
requestTime: 1,
showDebugger: false,
pauseNewRequests: false,
waitTime: 0,
requests: {},
};
componentDidMount() {
setFakeRequestTime(this.state.requestTime * 1000);
setProgressHandler(this.handleProgress);
window.addEventListener('keydown', e => {
if (e.key.toLowerCase() === '/') {
this.setState(state => ({
showDebugger: !state.showDebugger,
}));
} else if (e.key.toLowerCase() === 'p') {
this.togglePauseRequests();
}
});
}
componentDidUpdate(prevProps, prevState) {
if (prevState.requestTime !== this.state.requestTime) {
setFakeRequestTime(this.state.requestTime * 1000);
}
}
handleReset = () => {
track('Clear cache', () => {
cache.invalidate();
this.setState(state => ({
requests: {},
}));
handleReset();
});
};
handleProgress = (url, progress, isPaused) => {
this.setState(state => ({
requests: {
...state.requests,
[url]: {
url,
progress,
isPaused,
},
},
}));
};
togglePauseRequests = () => {
this.setState(
prevState => {
return {pauseNewRequests: !prevState.pauseNewRequests};
},
() => {
setPauseNewRequests(this.state.pauseNewRequests);
}
);
};
render() {
if (!this.state.showDebugger) {
return null;
}
return (
<Draggable cancel="input">
<div
className="🎛"
style={{
bottom: 20,
right: 20,
}}>
<div>
Latency: {this.state.requestTime} second{this.state.requestTime !==
1
? 's'
: ''}{' '}
<input
type="range"
min="0"
max="3"
step="0.5"
style={{width: '100%'}}
value={this.state.requestTime}
onChange={e => {
e.stopPropagation();
this.setState({requestTime: parseFloat(e.target.value)});
}}
/>
</div>
<label>
<input
type="checkbox"
checked={this.state.pauseNewRequests}
onChange={this.togglePauseRequests}
/>
Pause new requests
</label>
<br />
<br />
{Object.values(this.state.requests).filter(x => x.progress !== 100)
.length > 0 ? (
<Fragment>
<div style={{marginBottom: 10}}>
<b>Loading</b>
</div>
</Fragment>
) : (
<Fragment>
<div style={{marginBottom: 10}}>
<b>Loading</b>
</div>
<small style={{height: 20, display: 'block'}}>(None)</small>
</Fragment>
)}
{Object.keys(this.state.requests)
.reverse()
.map(url => {
const {progress, isPaused} = this.state.requests[url];
if (progress === 100) {
return null;
}
return (
<div
key={url}
style={{
height: 20,
width: '100%',
position: 'relative',
cursor: 'pointer',
title: isPaused ? 'Resume' : 'Pause',
}}
onClick={e => {
setPaused(url, !isPaused);
}}>
<div
style={{
height: '100%',
width: progress + '%',
position: 'absolute',
left: 0,
top: 0,
backgroundColor: isPaused ? '#fbfb0e' : '#61dafb',
zIndex: -1,
opacity: 0.8,
}}
/>
<div
style={{
fontFamily: 'monospace',
fontWeight: 'bold',
color: 'black',
}}>
{url}
</div>
</div>
);
})}
{Object.values(this.state.requests).filter(x => x.progress === 100)
.length > 0 ? (
<Fragment>
<br />
<div style={{marginBottom: 10}}>
<b>Cached</b>{' '}
<button
style={{
height: 16,
outline: 'none',
border: 'none',
background: 'none',
cursor: 'pointer',
}}
onClick={this.handleReset}>
🗑
</button>
</div>
</Fragment>
) : (
<Fragment>
<br />
<div style={{marginBottom: 10}}>
<b>Cached</b>
</div>
<small style={{height: 20, display: 'block'}}>(None)</small>
</Fragment>
)}
{Object.keys(this.state.requests)
.reverse()
.map(url => {
const {progress} = this.state.requests[url];
if (progress !== 100) {
return null;
}
return (
<div
key={url}
style={{
height: 20,
width: '100%',
position: 'relative',
}}>
<div
style={{
height: '100%',
width: progress + '%',
position: 'absolute',
left: 0,
top: 0,
backgroundColor:
progress !== 100 ? '#61dafb' : 'lightgreen',
zIndex: -1,
opacity: 0.8,
}}
/>
<div
style={{
fontFamily: 'monospace',
fontWeight: 'bold',
color: 'black',
}}>
{url}
</div>
</div>
);
})}
</div>
</Draggable>
);
}
}
unstable_createRoot(document.getElementById('root')).render(<Shell />);
render(<Debugger />, document.getElementById('debugger'));

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@@ -0,0 +1,29 @@
# CPU async rendering demo
## What is this fixture?
This is a demo application based on [Dan Abramov's](https://github.com/gaearon) recent [JSConf Iceland talk](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) about React.
It depends on a local build of React and enables us to easily test async "time slicing" APIs in a more "real world app" like context.
## Can I use this code in production?
No. The APIs being tested here are unstable and some of them have still not been released to NPM. For now, this fixture is only a test harness.
There are also known bugs and inefficiencies in master so **don't use this fixture for demonstration purposes either yet**. Until they are fixed, this fixture is **not** indicative of React async rendering performance.
## How do I run this fixture?
```shell
# 1: Build react from source
cd /path/to/react
yarn
yarn build dom-client,core,simple-cache-provider,schedule --type=NODE
# 2: Install fixture dependencies
cd fixtures/unstable-async/time-slicing/
yarn
# 3: Run the app
yarn start
```

View File

@@ -0,0 +1,19 @@
{
"name": "cpu-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"glamor": "^2.20.40",
"react-markdown": "^3.2.0",
"react-scripts": "^1.1.4",
"victory": "^0.25.6"
},
"scripts": {
"prestart": "cp -r ../../../build/node_modules/* ./node_modules/",
"prebuild": "cp -r ../../../build/node_modules/* ./node_modules/",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

View File

@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@@ -0,0 +1,126 @@
import React, {PureComponent} from 'react';
import {
VictoryArea,
VictoryAxis,
VictoryChart,
VictoryBar,
VictoryTheme,
VictoryScatter,
VictoryStack,
} from 'victory';
const colors = ['#fff489', '#fa57c1', '#b166cc', '#7572ff', '#69a6f9'];
export default class Charts extends PureComponent {
render() {
const streamData = this.props.data;
return (
<div>
<div style={{display: 'flex'}}>
<VictoryChart
theme={VictoryTheme.material}
width={400}
height={400}
style={{
parent: {
backgroundColor: '#222',
},
}}>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
/>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
dependentAxis
/>
<VictoryScatter
data={streamData[0]}
size={6}
style={{
data: {
fill: d => colors[d.x % 5],
},
}}
/>
</VictoryChart>
<VictoryChart
theme={VictoryTheme.material}
width={400}
height={400}
style={{
parent: {
backgroundColor: '#222',
},
}}
domainPadding={[20, 20]}>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
/>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
dependentAxis
/>
<VictoryBar
data={streamData[0]}
style={{
data: {
fill: d => colors[d.x % 5],
stroke: 'none',
padding: 5,
},
}}
/>
</VictoryChart>
</div>
<div
style={{
display: 'flex',
position: 'relative',
top: '-50px',
}}>
<VictoryChart
theme={VictoryTheme.material}
width={800}
height={350}
style={{
parent: {
backgroundColor: '#222',
},
}}>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
/>
<VictoryAxis
style={{
axis: {stroke: 'white'},
tickLabels: {fill: 'white'},
}}
dependentAxis
/>
<VictoryStack>
{streamData.map((data, i) => (
<VictoryArea key={i} data={data} colorScale={colors} />
))}
</VictoryStack>
</VictoryChart>
</div>
</div>
);
}
}

View File

@@ -0,0 +1,105 @@
import React, {createRef, PureComponent} from 'react';
const SPEED = 0.003 / Math.PI;
const FRAMES = 10;
export default class Clock extends PureComponent {
faceRef = createRef();
arcGroupRef = createRef();
clockHandRef = createRef();
frame = null;
hitCounter = 0;
rotation = 0;
t0 = Date.now();
arcs = [];
animate = () => {
const now = Date.now();
const td = now - this.t0;
this.rotation = (this.rotation + SPEED * td) % (2 * Math.PI);
this.t0 = now;
this.arcs.push({rotation: this.rotation, td});
let lx, ly, tx, ty;
if (this.arcs.length > FRAMES) {
this.arcs.forEach(({rotation, td}, i) => {
lx = tx;
ly = ty;
const r = 145;
tx = 155 + r * Math.cos(rotation);
ty = 155 + r * Math.sin(rotation);
const bigArc = SPEED * td < Math.PI ? '0' : '1';
const path = `M${tx} ${ty}A${r} ${r} 0 ${bigArc} 0 ${lx} ${ly}L155 155`;
const hue = 120 - Math.min(120, td / 4);
const colour = `hsl(${hue}, 100%, ${60 - i * (30 / FRAMES)}%)`;
if (i !== 0) {
const arcEl = this.arcGroupRef.current.children[i - 1];
arcEl.setAttribute('d', path);
arcEl.setAttribute('fill', colour);
}
});
this.clockHandRef.current.setAttribute('d', `M155 155L${tx} ${ty}`);
this.arcs.shift();
}
if (this.hitCounter > 0) {
this.faceRef.current.setAttribute(
'fill',
`hsla(0, 0%, ${this.hitCounter}%, 0.95)`
);
this.hitCounter -= 1;
} else {
this.hitCounter = 0;
this.faceRef.current.setAttribute('fill', 'hsla(0, 0%, 5%, 0.95)');
}
this.frame = requestAnimationFrame(this.animate);
};
componentDidMount() {
this.frame = requestAnimationFrame(this.animate);
if (this.faceRef.current) {
this.faceRef.current.addEventListener('click', this.handleClick);
}
}
componentDidUpdate() {
console.log('componentDidUpdate()', this.faceRef.current);
}
componentWillUnmount() {
this.faceRef.current.removeEventListener('click', this.handleClick);
if (this.frame) {
cancelAnimationFrame(this.frame);
}
}
handleClick = e => {
e.stopPropagation();
this.hitCounter = 50;
};
render() {
const paths = new Array(FRAMES);
for (let i = 0; i < FRAMES; i++) {
paths.push(<path className="arcHand" key={i} />);
}
return (
<div className="stutterer">
<svg height="310" width="310">
<circle
className="clockFace"
onClick={this.handleClick}
cx={155}
cy={155}
r={150}
ref={this.faceRef}
/>
<g ref={this.arcGroupRef}>{paths}</g>
<path className="clockHand" ref={this.clockHandRef} />
</svg>
</div>
);
}
}

View File

@@ -0,0 +1,143 @@
html,
body {
padding: 0px;
margin: 0px;
user-select: none;
font-family: Karla, Helvetica Neue, Helvetica, sans-serif;
background: rgb(34, 34, 34);
color: white;
overflow: hidden;
}
.VictoryContainer {
opacity: 0.8;
}
* {
box-sizing: border-box;
}
#root {
height: 100vh;
}
.container {
width: 100%;
max-width: 960px;
margin: auto;
padding: 10px;
}
.rendering {
margin-top: 20px;
margin-bottom: 20px;
zoom: 1.8;
}
label {
zoom: 1;
margin-right: 50px;
font-size: 30px;
}
label.selected {
font-weight: bold;
}
label:nth-child(1).selected {
color: rgb(253, 25, 153);
}
label:nth-child(2).selected {
color: rgb(255, 240, 1);
}
label:nth-child(3).selected {
color: #61dafb;
}
.chart {
width: 100%;
height: 100%;
}
.input {
padding: 16px;
font-size: 30px;
width: 100%;
display: block;
}
.input.sync {
outline-color: rgba(253, 25, 153, 0.1);
}
.input.debounced {
outline-color: rgba(255, 240, 1, 0.1);
}
.input.async {
outline-color: rgba(97, 218, 251, 0.1);
}
label {
font-size: 20px;
}
label label {
display: 'inline-block';
margin-left: 20px;
}
.row {
flex: 1;
display: flex;
margin-top: 20px;
min-height: 100%;
}
.column {
flex: 1;
}
.demo {
position: relative;
min-height: 100vh;
}
.stutterer {
transform: scale(1.5);
height: 310px;
width: 310px;
position: absolute;
left: 0;
right: 0;
top: -256px;
bottom: 0;
margin: auto;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
border-radius: 200px;
}
.clockHand {
stroke: white;
stroke-width: 10px;
stroke-linecap: round;
}
.clockFace {
stroke: white;
stroke-width: 10px;
}
.arcHand {
}
.innerLine {
border-radius: 6px;
position: absolute;
height: 149px;
left: 47.5%;
top: 0%;
width: 5%;
background-color: red;
transform-origin: bottom center;
}

View File

@@ -0,0 +1,154 @@
import React, {PureComponent} from 'react';
import {flushSync, render} from 'react-dom';
import {unstable_scheduleWork} from 'schedule';
import _ from 'lodash';
import Charts from './Charts';
import Clock from './Clock';
import './index.css';
let cachedData = new Map();
class App extends PureComponent {
state = {
value: '',
strategy: 'sync',
showDemo: true,
showClock: false,
};
// Random data for the chart
getStreamData(input) {
if (cachedData.has(input)) {
return cachedData.get(input);
}
const multiplier = input.length !== 0 ? input.length : 1;
const complexity =
(parseInt(window.location.search.substring(1), 10) / 100) * 25 || 25;
const data = _.range(5).map(t =>
_.range(complexity * multiplier).map((j, i) => {
return {
x: j,
y: (t + 1) * _.random(0, 255),
};
})
);
cachedData.set(input, data);
return data;
}
componentDidMount() {
window.addEventListener('keydown', e => {
if (e.key.toLowerCase() === '?') {
e.preventDefault();
this.setState(state => ({
showClock: !state.showClock,
}));
}
});
}
handleChartClick = e => {
if (this.state.showDemo) {
if (e.shiftKey) {
this.setState({showDemo: false});
}
return;
}
if (this.state.strategy !== 'async') {
flushSync(() => {
this.setState(state => ({
showDemo: !state.showDemo,
}));
});
return;
}
if (this._ignoreClick) {
return;
}
this._ignoreClick = true;
unstable_scheduleWork(() => {
this.setState({showDemo: true}, () => {
this._ignoreClick = false;
});
});
};
debouncedHandleChange = _.debounce(value => {
if (this.state.strategy === 'debounced') {
flushSync(() => {
this.setState({value: value});
});
}
}, 1000);
renderOption(strategy, label) {
const {strategy: currentStrategy} = this.state;
return (
<label className={strategy === currentStrategy ? 'selected' : null}>
<input
type="radio"
checked={strategy === currentStrategy}
onChange={() => this.setState({strategy})}
/>
{label}
</label>
);
}
handleChange = e => {
const value = e.target.value;
const {strategy} = this.state;
switch (strategy) {
case 'sync':
this.setState({value});
break;
case 'debounced':
this.debouncedHandleChange(value);
break;
case 'async':
unstable_scheduleWork(() => {
this.setState({value});
});
break;
default:
break;
}
};
render() {
const {showClock} = this.state;
const data = this.getStreamData(this.state.value);
return (
<div className="container">
<div className="rendering">
{this.renderOption('sync', 'Synchronous')}
{this.renderOption('debounced', 'Debounced')}
{this.renderOption('async', 'Asynchronous')}
</div>
<input
className={'input ' + this.state.strategy}
placeholder="longer input → more components and DOM nodes"
defaultValue={this.state.input}
onChange={this.handleChange}
/>
<div className="demo" onClick={this.handleChartClick}>
{this.state.showDemo && (
<Charts data={data} onClick={this.handleChartClick} />
)}
<div style={{display: showClock ? 'block' : 'none'}}>
<Clock />
</div>
</div>
</div>
);
}
}
const container = document.getElementById('root');
render(
<React.unstable_AsyncMode>
<App />
</React.unstable_AsyncMode>,
container
);

File diff suppressed because it is too large Load Diff

View File

@@ -1,12 +1,11 @@
{
"private": true,
"version": "16.4.1",
"version": "16.5.1",
"workspaces": [
"packages/*"
],
"devDependencies": {
"art": "^0.10.1",
"async": "^1.5.0",
"babel-cli": "^6.6.5",
"babel-code-frame": "^6.26.0",
"babel-core": "^6.0.0",
@@ -37,7 +36,6 @@
"babel-preset-react": "^6.5.0",
"babel-traverse": "^6.9.0",
"babylon": "6.18.0",
"bundle-collapser": "^1.1.1",
"chalk": "^1.1.3",
"cli-table": "^0.3.1",
"coffee-script": "^1.8.0",
@@ -46,9 +44,6 @@
"create-react-class": "^15.6.3",
"cross-env": "^5.1.1",
"danger": "^3.0.4",
"del": "^2.0.2",
"derequire": "^2.0.3",
"escape-string-regexp": "^1.0.5",
"eslint": "^4.1.0",
"eslint-config-fbjs": "^1.1.1",
"eslint-plugin-babel": "^3.3.0",
@@ -57,29 +52,23 @@
"eslint-plugin-no-for-of-loops": "^1.0.0",
"eslint-plugin-react": "^6.7.1",
"eslint-plugin-react-internal": "link:./scripts/eslint-rules/",
"fbjs": "^0.8.16",
"fbjs-scripts": "^0.6.0",
"fbjs-scripts": "^0.8.3",
"filesize": "^3.5.6",
"flow-bin": "^0.72.0",
"flow-coverage-report": "^0.4.0",
"git-branch": "^0.3.0",
"glob": "^6.0.4",
"glob-stream": "^6.1.0",
"google-closure-compiler": "20180506.0.0",
"gzip-js": "~0.3.2",
"gzip-size": "^3.0.0",
"jasmine-check": "^1.0.0-rc.0",
"jest": "^23.1.0",
"jest-diff": "^23.0.1",
"merge-stream": "^1.0.0",
"minimatch": "^3.0.4",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"ncp": "^2.0.0",
"object-assign": "^4.1.1",
"platform": "^1.1.0",
"prettier": "1.11.1",
"prop-types": "^15.6.0",
"prettier": "1.13.7",
"prop-types": "^15.6.2",
"random-seed": "^0.3.0",
"react-lifecycles-compat": "^3.0.2",
"rimraf": "^2.6.1",
@@ -90,30 +79,29 @@
"rollup-plugin-prettier": "^0.3.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-strip-banner": "^0.2.0",
"run-sequence": "^1.1.4",
"semver": "^5.5.0",
"targz": "^1.0.1",
"through2": "^2.0.0",
"tmp": "~0.0.28",
"typescript": "~1.8.10",
"yargs": "^6.3.0"
"typescript": "~1.8.10"
},
"devEngines": {
"node": "8.x || 9.x"
"node": "8.x || 9.x || 10.x"
},
"jest": {
"testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"
},
"scripts": {
"build": "npm run version-check && node ./scripts/rollup/build.js",
"flow-coverage": "flow-coverage-report --config ./.flowcoverage",
"linc": "node ./scripts/tasks/linc.js",
"lint": "node ./scripts/tasks/eslint.js",
"lint-build": "node ./scripts/rollup/validate/index.js",
"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",

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