mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Mond WAN
fc542d7f78
* Fix missing react in create-react-class refs #9689 * Test 'create-react-class' with fixtures NOTE: Never going to merge this commit, but I may cherry-pick it onto branches in order to test fixes for issue #9765 In this case I will clean it up afterwards. **what is the change?:** Require and use the UMD bundles of 'create-react-class' in three fixtures to test the three supported uses; - test Global JS with globals.html - test AMD with requirejs.html - test CommonJS with webpack-alias **why make this change?:** To test https://github.com/facebook/react/pull/9761 and other PRs fixing https://github.com/facebook/react/issues/9765 **test plan:** Manual testing; - cd into the directory in fixtures - run the build step if needed - open the file **issue:** https://github.com/facebook/react/issues/9765 * Remove fiber specific fixures This already was merged (https://github.com/facebook/react/pull/9902) but I wanted to do manual testing and needed the change locally. **what is the change?:** Remove 'fiber-debugger', 'fiber-triangle', and 'packaging' from 'fixtures' directory. **why make this change?:** These were not meant to be included on this branch and cause the 'build-all.js' script to throw. **test plan:** `cd ./fixtures && node ./build-all.js` * Modify the 'create-react-class' package to make 'globals' work again **what is the change?:** Pass the global 'react' into the global conditional in the UMD build of 'create-react-class'. **why make this change?:** Here is the deal: - @mondwan's original fix does fix the AMD build, but breaks the 'global JS' build. - My modification makes it work with both AMD and the 'global JS' build. - @mondwan's fix seems to have fixed the CommonJS build too, and I maintained that fix with my modification. ``` Does the 'create-react-class' UMD build work? Before After After + @mondwan's + @mondwan's + @flarnie's Build System | fix | fix | modification +---------------------------------------------------------+ | | | Global JS | :D Success | X Fail | :D Success | | | +---------------------------------------------------------+ | | | AMD | X Fail | :D Success | :D Success | | | +---------------------------------------------------------+ | | | Common JS | X Fail | :D Success | :D Success | | | + + + ``` **test plan:** The testing for this was really tricky and involves a fragile multi-step process: 1) Make sure the fixtures are working on your branch 2) Modify some of the fixtures to use 'create-react-class', like in this commit (you can just cherry-pick it if you are on a branch based on the 15.* branches) - https://github.com/flarnie/react/commit/51dcbd5ef164b86bc509ae070a6273758a60e13c 3) Make sure React is set up, and then `cd fixures && node ./build-all.js` 4) The following fixtures could be used to test the various builds: - test GlobalJS with `globals.html` - test AMD with `requirejs.html` - test CommonJS with `webpack-alias/index.html` **issue:** https://github.com/facebook/react/issues/9689 and https://github.com/facebook/react/issues/9765 * Undo modifications that add 'create-react-class' to fixtures **what is the change?:** In the previous commit we modified the fixtures to test 'create-react-class' manually, and this puts them all back. **why make this change?:** This will be useful for cherry-picking onto branches where we used the previous commit for testing purposes **test plan:** `cd fixtures && node ./build-all.js` and open the fixtures * remove stray console.log
40 lines
1.0 KiB
HTML
40 lines
1.0 KiB
HTML
<html>
|
|
<body>
|
|
<script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
|
|
<style>
|
|
.example-appear {
|
|
opacity: 0.01;
|
|
}
|
|
|
|
.example-appear.example-appear-active {
|
|
opacity: 1;
|
|
transition: opacity .5s ease-in;
|
|
}
|
|
</style>
|
|
<div id="container"></div>
|
|
<script>
|
|
requirejs.config({
|
|
paths: {
|
|
react: '../build/react-with-addons',
|
|
'react-dom': '../build/react-dom'
|
|
}
|
|
});
|
|
require(['react', 'react-dom'], function(React, ReactDOM) {
|
|
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
|
|
ReactDOM.render(
|
|
React.createElement(CSSTransitionGroup, {
|
|
transitionName: 'example',
|
|
transitionAppear: true,
|
|
transitionAppearTimeout: 500,
|
|
transitionEnterTimeout: 0,
|
|
transitionLeaveTimeout: 0,
|
|
}, React.createElement('h1', null,
|
|
'Hello World!'
|
|
)),
|
|
document.getElementById('container')
|
|
);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|