* Add invariant check for composite components to event simulation test utils
* Change simulate variable names from domComponentOrNode to domNode, language for new simulate invariant, and add space in existing invariant
* Update test name
* Update test for invariant with shallow rendering
* Update text for existing invariant and change comments to reflect change to only domNode usage
* Update text for existing invariant to reflect syntax with new invariant
* Update ReactTestUtilsEntry.js
* Update React element invariant to reflect usage with shallow rendering
* Move Simulate-related tests into Simulate block
* Run prettier
* Add babel transform for object getters
**what is the change?:**
We were not transforming object getters[1], and our new TestRenderer
uses one.[2]
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
[2]: https://github.com/facebook/react/blob/master/src/renderers/testing/ReactTestRendererFiberEntry.js#L569
**why make this change?:**
Our internal build system was not supporting object getters.
**test plan:**
`yarn build && yarn test`
Also built and opened the 'packaging' fixture.
Honestly I'm not sure what else to test, this seems pretty low risk.
**issue:**
None opened yet
* Replace object getter with `Object.defineProperty` in TestRenderer
**what is the change?:**
Replaces an Object Getter [1] with `Object.defineProperty`.
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
**why make this change?:**
Our internal build system does not support object getters.
**test plan:**
We should do follow-up work to ensure that this doesn't come up again -
we can't commit code which uses object getters.
**issue:**
No issue opened yet
* Tweak the Object.defineProperty call in test renderer to make flow pass
**what is the change?:**
- switched from `Object.defineProperties` to `Object.defineProperty`
- set some undefined properties to get flow to pass
**why make this change?:**
- Flow doesn't seem to play nicely with `Object.defineProperty/ies`
calls, specifically when you implement `get` and `set` methods.
See https://github.com/facebook/flow/issues/1336
- Switched from `properties` to `property` because it seems more
conventional in our codebase to use `property`, and I'm only setting
one anyway.
**test plan:**
`flow`
**issue:**
no issue
* More flow type tweaking
**what is the change?:**
Forced the typing of an argument to 'Object.defineProperty' to be
'Object' to avoid an issue with Flow.
**why make this change?:**
To get tests passing and flow passing.
**test plan:**
`flow && yarn test`
**issue:**
* Throw error to warn of mistaken loading of prod + dev React bundles
**what is the change?:**
Credit to @gaearon for coming up with a clever way to check for this. :)
I mainly just did the manual testing and fixed a couple of typos in his
idea.
I'd like to do a follow-up PR to add a link and a page explaining this
issue more and suggesting how to fix it.
**why make this change?:**
We want to warn for an unfortunate gotcha for
the following situation -
1. Wanting to shrink their JS bundle, an engineer runs it through
'uglifyjs' or some other minifier. They assume this will also do
dead-code-elimination, but the 'prod' and 'dev' checks are not
envified yet and dev-only code does not get removed.
2. Then they run it through browserify's 'envify' or some other tool to
change all calls to 'process.env.NODE_ENV' to "production". This
makes their code ready to ship, except the 'dev' only dead code is
still in the bundle. Their bundle is twice as large as it needs to
be, due to the dead code.
This was a problem with the old build system before, but with our new
build system output it's possible to detect and throw an informative
error in this case.
**test plan:**
1. run the build in react as usual; `yarn build`
2. manually run 'uglifyjs -mt' on 'build/packages/react/index.js' to
simulate mistakenly minifying React before env variables are
resolved, which skips dead code elimination.
3. run the fixtures build - `cd fixtures/packaging && node
./build-all.js && serve ../..`
4. Visit just the production browserify fixture -
http://localhost:5000/fixtures/packaging/browserify/prod/
5. You should see the error thrown indicating this problem has occurred.
(Flarnie will insert a screenshot)
6. Do the above steps with NO uglifyjs step, and verify that no error is
thrown. When there is no minification applied, we don't assume that
this mix-up has occurred.
(Flarnie will insert a screenshot)
**issue:**
fixes#9589
* Remove extra 'prod' env. check and add link to docs in error message
**what is the change?:**
Based on helpful feedback from @gaearon
- removed outer check that `process.env.NODE_ENV` is "production" since
we are only calling the `testMinification` method inside of another
check for "production" environment.
- Added an fburl that points to [our current docs on using the production version of React](https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build)
**why make this change?:**
To save an extra layer of conditionals and to make the error message
more clear.
**test plan:**
Same test plan as earlier -
1. run the build in react as usual; yarn build
2. manually run 'uglifyjs -mt' on 'build/packages/react/index.js' to
simulate mistakenly minifying React before env variables are
resolved, which skips dead code elimination.
3. run the fixtures build - cd fixtures/packaging && node ./build-all.js && serve ../..
4. Visit just the production browserify fixture -
http://localhost:5000/fixtures/packaging/browserify/prod/
You should see the error thrown indicating this problem has occurred.
(Flarnie will insert a screenshot in comments on the PR)
6. Do the above steps with NO uglifyjs step, and verify that no error is thrown. When there is no minification applied, we don't assume that this mix-up has occurred.
(Flarnie will insert a screenshot in the comments on the PR.)
**issue:**
https://github.com/facebook/react/issues/9589
* WIP fix and test 'testMinificationUsedDCE' method
**what is the change?:**
- Instead of looking for one match when having the method inspect it's
own source, we look for two matches, because the search itself will be
a match.
- WIP moving this method into another file and testing it.
Next steps:
- Figure out why the babel.transform call is not actually minifying the
code
- Add tests for uglifyjs
- Update build process so that this file can be accessed from
`packages/react/index.js`
**why make this change?:**
- We had a bug in the 'testMinification' method, and I thought the name
could be more clear. I fixed the code and also changed the name.
- In order to avoid other bugs and keep this code working in the future
we'd like to add a unit test for this method. Using the npm modules
for 'uglifyjs' and 'babel'/'babili' we should be able to actually test
how this method will work when minified with different configurations.
**test plan:**
`yarn test`
**issue:**
https://github.com/facebook/react/issues/9589
* Add babeli and uglifyjs as dev-only dependencies
**what is the change?:**
See commit title
**why make this change?:**
In order to test that we are correctly detecting different minification
situations, we are using these modules in a test.
**test plan:**
NA
**issue:**
https://github.com/facebook/react/issues/9589
* Fix typo and add 'uglifyjs' tests
**what is the change?:**
There was a mix-up in the conditional in 'testMinificationUsedDCE' and
this fixes it.
The great new tests we added caught the typo. :)
Next steps:
- get the tests for 'babili' working
- update build scripts so that this the 'testMinificationUsedDCE'
module is available from 'packages/react/index.js'
**why make this change?:**
We want to modularize 'testMinificationUsedDCE' and test it.
This verifies that the method warns when `uglifyjs` is used to minify
but dead code elimination is not done, in a production environment.
Generally this is a 'gotcha' which we want to warn folks aboug.
**test plan:**
`yarn test src/shared/utils/__tests__/testMinificationUsedDCE-test.js`
**issue:**
https://github.com/facebook/react/issues/9589
* Run prettier
* var -> const/let
* Require specific version of `uglify-js`
**what is the change?:**
Removed the '^' from the npm package requirement
**why make this change?:**
I am seeing failures in CI that show `uglify-js` is returning different
output there from my local environment. To further debug this I'd like
to run CI with the exact same version of `uglify-js` that I am using
locally.
**test plan:**
push and see what CI does
**issue:**
https://github.com/facebook/react/issues/9589
* Add build step copying testMinificationUsedDCE into build/packages/react/cj
**what is the change?:**
This is a first step - we still need (I think) to process this file to
get it's contents wrapped in an 'iffe'.
Added a step to the build script which copies the source file for the
'testMinificationUsedDCE' module into the 'cjs' directory of our react
package build.
**why make this change?:**
We want this module to be available to the 'index.js' module in this
build.
**test plan:**
Will do manual testing once the build stuff is fully set up.
**issue:**
* Inline 'testMinificationUsedDCE' and remove unit test for now
What:
- Inlines the 'testMinificationUsedDCE' method into
'packages/react/index.js'
- Removes unit test for 'testMinififcationUsedDCE'
- Puts dependencies back the way that they were; should remove extra
dependencies that were added for the unit test.
Why:
- It would add complexity to the build process to add another file to
the 'build/packages/react/cjs' folder, and that is the only way to
pull this out and test it. So instead we are inlining this.
* Revert unintentional changes to dependency versions, variable placing
**what is the change?:**
- We had updated and added some dependencies, but ended up reverting
this in a previous commit. The `yarn.lock` and `package.json` needed
updated still though.
- There is a call to `Function.toString` which we wanted to wrap in a
`try/catch` block.
**why make this change?:**
To remove unrelated dependency changes and increase the safety of the
`Function.toString` call.
**test plan:**
Manual testing again
**issue:**
https://github.com/facebook/react/issues/9589
* Allow custom attributes. Add flag to toggle custom attribute behavior
* Update custom attribute logic
- Only allow string attributes
- Remove custom attribute feature flag
- Add additional tests for data, aria, and custom attributes
* Allow numbers and booleans custom attributes. Cut isCustomAttribute
* Cover objects with custom attributes in warning test
* Rename DOMProperty.isWriteable to shouldSetAttribute
* Rework conditions in shouldSetProperty to avoid edge cases
* Update unknown property warning to include custom attribute information
* Remove ref and key from reserved props
* Ensure SSR test coverage for DOMProperty injections
* Add ajaxify attribute for internal FB support
* Ajaxify is a stringifiable object attribute
* Remove non-case sensitive standard attributes. Make ARIA hook dev only.
* Update test name for custom attributes on custom elements
* Remove SSR custom injection test
* Remove case sensitive props
* Remove onAfterResetModules hooks in SSR render tests
* Add back a few attributes and explain why they are needed
* Remove possibleStandardNames from DOMProperty.js
* Fix typo in HTMLPropertyConfig comment
* Remove duplicative comment
* Add back loop boolean property
* Do not allow assignment of attributes that are aliased
* Update custom attribute test to check value, not just presence
* Address case where class is assigned as an attribute on custom elements. Improve SSR tests
* Cover cases where className and for are given to custom elements
* Remove unnecessary spys on console.error. Reduce extra space in tests
* Cover cased custom attributes in SSR tests
* Custom attributes are case sensitive
* Allow uppercase letters in custom attributes. Address associated edge cases
* Allow improperly cased aliased attributes. Add additional tests
* Handle special properties like onFocusOut
* Add some comments to document where casing matters. Remove DOMPropertyNames
* Fix spelling mistake in ajaxify HTML property comment
* Make ARIA enforcement dev-only
* Remove alias test that covers multiple aliases for one property
* Fix typo in comment
* Build SVG aliases dynamically
* Remove unused DOMPropertyNames reference
* Do not translate bad casings of aliased attributes
- classname writes to the DOM as classname
- class does not write to the DOM
- cLASS does not write to the DOM
- arabic-form does not write to the DOM
* Revise the way custom booleans are treated
- Custom attributes can not have boolean values unless they are aria
or data attributes
- Attributes with boolean values have been added back to the whitelist
- Warnings now exclude booleans from supported types
- Associated test coverage
* Add developer warnings for NaN and ARIA hooks
* Use string comparison instead of regex to check for data and aria attributes.
* Warn about unsupported properties without case sensitivity
* Remove attributes that are updated to invalid values
* Support object property values with toString methods. Allow boolean props to coerce objects
* Add back ajaxify test
* Address bad references in ReactDOMComponent-test. Format.
* Revert changes to the docs
We'll update them separately
* Allow all objects and pass incorrect aliases
The prior message was a bit wordy and didn't cover all cases (like the one we discovered while researching #10441).
We can use the new URL to explain background info on the DEV-mode technique we're using in addition to common fixes (eg crossorigin attribute for CDN scripts and Webpack devtools settings). Putting this information behind a link will allow us to more easily edit it in the future as common causes for this issue change.
Resolves#10441
* Add test for nested controlled selects
The failure repros only when two events are fired sequentially, where the second
event is what updates the value.
* Add failure case to DOM select fixture
* Use virtual event target for change event instead of native target
Ensures that we use the same node to make decisions instead of two like
we do now.
This will cause restore to be called or not called consistently.
* Pass native event target to the event
We normally pass the native event target to the event object. This ensures
that we do the same thing here.
We still want to schedule a "restore" on the virtual target though since
those are the only nodes known to React.
* Find callsites that would call toString() if we pass attributes through
* Warn for all object unknown props, not just 'toString' ones
fixing this as per Sebastian's feedback, because we want to find all
objects and not just ones with 'toString' defined. Because there may be
other corner cases and issues that are revealed.
* Wrap warning() calls in a DEV check for RN_* builds too.
* Wrapped several warning() imports and calls in if-DEV checks.
* Removed a useless variable (allTypesByEventName) and loop from ReactNativeBridgeEventPlugin.
* Use GCC instead of Uglify for UMD/NODE bundles
* Prettier run
* Fixes fixtures that were alterated by Pretter and trailing function commas
* prettier on prettier
* updated prettier config
* altered prettier config slightly
* Reverted prettier changes
* updated results.json
* made createFiber create a constructed FiberNode object
* updated comment
* satisfying flow and prettier
* better comments :)
* fixes flow error
* updates comment
* converted function constructor to a ES2015 class
* Revert "converted function constructor to a ES2015 class"
This reverts commit c020982c5f.
* fixed some merge conflict issues
* Flow....
* removed exact types to make flow pass
* opted for $FlowFixMe instead
* removed exact types to make flow pass
* opted for $FlowFixMe instead
* run prettier
* Don't warn about setState on unmounted when scheduling error recovery
We shouldn't schedule an update on unmounted error boundaries, but we
don't know if a boundary is unmounted until we traverse its parents.
Added an additional argument to scheduleUpdate so we know not to warn
about setState on unmounted components.
* Should be able to unmount an error boundary before it is handled
Fixes the case where an error boundary captures an error, but its
parent is unmounted before we can re-render it. componentDidCatch is
never called, and we don't remove the boundary from our set of
unhandled error boundaries.
We should not assume that if capturedErrors is non-null that we still
have unhandled errors.
* Rewrite DOMPropertyOperations-test in terms of public API
* Add more assertions
I don't understand what the jsdom comments are about since they pass.
* Address review feedback
* Remove PooledClass from FallbackCompositionState
The only module that uses FallbackCompositonState is BeforeInputEventPlugin. The way its structured means there can only be a single instance of FallbackCompositionState at any given time (stored in a local variable at the top-level) so we don't really need pooling here at all. Instead, a single object is now stored in FallbackCompositionState, and access (initializing, reseting, getting data) is gaurded by the exported helper object.
* Use new FallbackCompositionState API in BeforeInputEventPlugin
* Implement event-specific pooling in SyntheticEvent
* Remove PooledClass from TopLevelCallbackBookKeeping
* Update results.json
* Add pooled event test fixtures (#1)
* Fix fixture lint
This prevents the captured error from becoming separated from the component stack if other errors (or console.error calls) are made between them, eg a component errors during unmount.
* Add DOM fixture for cross-origin errors
* Use a custom error object in place of cross-origin errors
Cross-origin errors aren't accessible by React in DEV mode because we
catch errors using a global error handler, in order to preserve the
"Pause on exceptions" behavior of the DevTools. When this happens, we
should use a custom error object that explains what happened.
For uncaught errors, the actual error message is logged to the console
by the browser, so React should skip logging the message again.
* Add test case that demonstrates errors are logged even if they're caught
* Don't double log error messages in DEV
In DEV, the browser always logs errors thrown inside React components,
even if the originating update is wrapped in a try-catch, because of the
dispatchEvent trick used by invokeGuardedCallback. So the error logger
should not log the message again.
* Fix tests
* Change how error is printed in DEV and PROD
In DEV, we don't want to print the stack trace because the browser already always prints it.
We'll just print the component stack now.
In PROD, we used to omit the JS error message. However we *do* want to show it because
if the application swallows the error, the browser will *not* print it. In DEV it works
only because of the fake event trick. So in PROD we will always print the underlying error
by logging the error object directly. This will show both the message and the JS stack.
* Make the wording tighter and emphasize the real error is above
There's a few goals in the rewording:
* Make it tighter using line breaks between sentences.
* Make it slightly less patronizing ("You should fix it" => "You can find its details in an earlier log")
* ^^ This also helps highlight that the real error message and stack is above
* Group subsections: intro (there's an error), component stack, and final addendum about error boundaries
* ^^ Otherwise people might think error boundaries are part of the reason they have an error
* Make it clear "located at" is not the stacktrace. Otherwise it feels confusing. This makes it clearer you should still look for stack trace (with other details) above and introduces the concept of component stack.
* Make the message shorter
* Unused variables
* Fix an error caused by fixing lint
* One more bikeshed
* Fix fixture
* Remove unused file
* Concise wording
* Unused variables
* Upgrade DOM Fixtures
Upgrade to react-scripts v1 and include required polyfills for older
browsers
* Remove ChangeEvent polyfills for unsupported browsers
Andrew Clark
Jack Ford
Flarnie Marchan
Nathan Hunzaker
Karthik Balakrishnan
ksvitkovsky
Ian Sutherland
Brian Vaughn
Ben Alpert
Brandon Dail
Sebastian Markbåge
Edgar (Algebr)
Dan Abramov
Sasha Aickin
Dominic Gannaway
Mateusz Burzyński
Rodrigo Pombo
Devedse
Jason Quense