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 **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
flarnie · Jun 9, 2017 · 803ebb6 · 803ebb6
1 parent d1d49f5
commit 803ebb6
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([], f);
   } else {
+    console.log('successfully tested globals');
     var g;
     if (typeof window !== "undefined") {
       g = window;
@@ -1044,4 +1048,4 @@ module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 };
 
 },{}]},{},[2])(2)
-});
+});
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',
+      'react-dom': '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')
 );