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 facebook#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 facebook#9761 and other PRs fixing facebook#9765 **test plan:** Manual testing; - cd into the directory in fixtures - run the build step if needed - open the file **issue:** facebook#9765
mondwan · Jun 10, 2017 · 254c4cb · 254c4cb
1 parent 1c303da
commit 254c4cb
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 45 deletions.
diff --git a/addons/create-react-class/create-react-class.js b/addons/create-react-class/create-react-class.js
@@ -1,9 +1,13 @@
 (function(f) {
+ console.log('here in addons');
  if (typeof exports === "object" && typeof module !== "undefined") {
+ console.log('successfully tested Common JS');
  module.exports = f();
  } else if (typeof define === "function" && define.amd) {
+ console.log('successfully tested AMD');
  define(['react'], f);
  } else {
+ console.log('successfully tested globals');
  var g;
  if (typeof window !== "undefined") {
  g = window;
@@ -781,7 +785,7 @@ module.exports = factory(
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
- * 
+ *
  */
 
 function makeEmptyFunction(arg) {

diff --git a/fixtures/globals.html b/fixtures/globals.html
@@ -2,6 +2,7 @@
  <body>
  <script src="../build/react-with-addons.js"></script>
  <script src="../build/react-dom.js"></script>
+ <script src="../addons/create-react-class/create-react-class.js"></script>
  <style>
  .example-appear {
  opacity: 0.01;
@@ -15,18 +16,25 @@
  <div id="container"></div>
  <script>
  var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ var Greeting = createReactClass({
+ render: function() {
+ return React.createElement('H1', null, 'Hello' + this.props.name + '!!!!!');
+ }
+ });
  ReactDOM.render(
- React.createElement(CSSTransitionGroup, {
- transitionName: 'example',
- transitionAppear: true,
- transitionAppearTimeout: 500,
- transitionEnterTimeout: 0,
- transitionLeaveTimeout: 0,
- }, React.createElement('h1', null,
- 'Hello World!'
- )),
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0,
+ },
+ React.createElement(Greeting, {name: 'FOO'}),
+ ),
  document.getElementById('container')
  );
  </script>
  </body>
-</html>
+</html>
diff --git a/fixtures/requirejs.html b/fixtures/requirejs.html
@@ -16,25 +16,40 @@
  requirejs.config({
  paths: {
  react: '../build/react-with-addons',
- 'react-dom': '../build/react-dom'
+ 'react-dom': '../build/react-dom',
+ 'create-react-class':
+ '../addons/create-react-class/create-react-class'
  }
  });
 
- 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')
- );
+ require(
+ ['react', 'react-dom', 'create-react-class'],
+ function(
+ React,
+ ReactDOM,
+ createReactClass
+ ) {
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ var Greeting = createReactClass({
+ render: function() {
+ return React.createElement('H1', null, 'Hello' + this.props.name + '!!!!!');
+ }
+ });
+ ReactDOM.render(
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0,
+ },
+ React.createElement(Greeting, {name: 'FOO'}),
+ ),
+ document.getElementById('container')
+ );
  });
  </script>
  </body>
-</html>
+</html>
diff --git a/fixtures/webpack-alias/config.js b/fixtures/webpack-alias/config.js
@@ -8,6 +8,7 @@ module.exports = {
  alias: {
  'react': 'react/dist/react-with-addons',
  'react-dom': 'react-dom/dist/react-dom',
+ 'create-react-class': 'create-react-class/create-react-class',
  },
  },
 };
diff --git a/fixtures/webpack-alias/input.js b/fixtures/webpack-alias/input.js
@@ -1,16 +1,25 @@
 var React = require('react');
 var ReactDOM = require('react-dom');
+var createReactClass = require('create-react-class');
+
+var Greeting = createReactClass({
+ render: function() {
+ return React.createElement('H1', null, 'Hello' + this.props.name + '!!!!!');
+ }
+});
 
 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!'
- )),
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0
+ },
+ React.createElement(Greeting, {name: 'FOO'})
+ ),
  document.getElementById('container')
 );
diff --git a/fixtures/webpack/input.js b/fixtures/webpack/input.js
@@ -1,16 +1,25 @@
 var React = require('react');
 var CSSTransitionGroup = require('react-addons-css-transition-group');
 var ReactDOM = require('react-dom');
+var createReactClass = require('create-react-class');
+
+var Greeting = createReactClass({
+ render: function() {
+ return React.createElement('H1', null, 'Hello' + this.props.name + '!!!!!');
+ }
+});
 
 ReactDOM.render(
- React.createElement(CSSTransitionGroup, {
- transitionName: 'example',
- transitionAppear: true,
- transitionAppearTimeout: 500,
- transitionEnterTimeout: 0,
- transitionLeaveTimeout: 0,
- }, React.createElement('h1', null,
- 'Hello World!'
- )),
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0
+ },
+ React.createElement(Greeting, {name: 'FOO'})
+ ),
  document.getElementById('container')
 );