Test state of react-linked-input and create-fragment before fix

**what is the change?:** Setting up the fixtures to enable manual testing of the `react-linked-input` and `create-fragment` UMD builds. This was a painstaking and frustrating process and we need something better before making any more fixes to addons. Here is roughly what I did; - add 'console.log' statements to the add-on to confirm that you've loaded the right build case - copy the add-on into 'build/packages' so that the 'webpack-alias' can find it. - make copies of each of the following three fixtures for each add-on you want to test, renaming them to specify what you are testing: - globals.js - requirejs.js - webpack-alias/* - modify those fixtures to use the add-on you intend to text **why make this change?:** We need to verify the current state of the bug before fixing it, to confirm that the change actually is fixing the bug. **test plan:** `open fixtures/globals-with-create-react-fragment.html` `open fixtures/globals-with-react-linked-input.html` `open fixtures/requirejswith-create-react-fragment.html` `open fixtures/requirejswith-react-linked-input.html` `cd fixtures/webpack-aliaswith-create-react-fragment/ && yarn build && open index.html` `cd fixtures/webpack-aliaswith-react-linked-input/ && yarn build && open index.html` **issue:** facebook#9765
flarnie · Jun 10, 2017 · 54bf912 · 54bf912
1 parent 2b7ea39
commit 54bf912
Show file tree

Hide file tree

Showing 18 changed files with 3,082 additions and 2 deletions.
diff --git a/addons/react-addons-create-fragment/react-addons-create-fragment.js b/addons/react-addons-create-fragment/react-addons-create-fragment.js
@@ -1,15 +1,19 @@
 (function(f) {
+ console.log('here in addons');
  if (
  typeof exports === "object" &&
  typeof module !== "undefined"
  ) {
+ console.log('successfully tested CommonJS');
  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
@@ -390,7 +394,7 @@ module.exports = createReactFragment;
  * 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) {
@@ -542,4 +546,4 @@ if ("development" !== 'production') {
 
 module.exports = warning;
 },{"./emptyFunction":2}]},{},[1])(1)
-});
+});
diff --git a/addons/react-linked-input/react-linked-input.js b/addons/react-linked-input/react-linked-input.js
@@ -1,9 +1,13 @@
 (function(f) {
+ console.log('here in addons');
  if (typeof exports === "object" && typeof module !== "undefined") {
+ console.log('successfully tested CommonJS');
  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;

diff --git a/fixtures/globals-with-create-react-fragment.html b/fixtures/globals-with-create-react-fragment.html
@@ -0,0 +1,57 @@
+<html>
+ <body>
+ <script src="../build/react-with-addons.js"></script>
+ <script src="../build/react-dom.js"></script>
+ <script src="../addons/react-addons-create-fragment/react-addons-create-fragment.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>
+ var createFragment = React.addons.createFragment;
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ function Swapper(props) {
+ let children;
+ if (props.swapped) {
+ children = createFragment({
+ right: props.rightChildren,
+ left: props.leftChildren
+ });
+ } else {
+ children = createFragment({
+ left: props.leftChildren,
+ right: props.rightChildren
+ });
+ }
+ return React.createElement('div', null, children);
+ }
+ ReactDOM.render(
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0,
+ },
+ React.createElement(
+ Swapper,
+ {
+ swapped: true,
+ leftChildren: 'Hello!',
+ rightChildren: 'FOO!!!',
+ },
+ ),
+ ),
+ document.getElementById('container')
+ );
+ </script>
+ </body>
+</html>
diff --git a/fixtures/globals-with-react-linked-input.html b/fixtures/globals-with-react-linked-input.html
@@ -0,0 +1,51 @@
+<html>
+ <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>
+ <script src="https://unpkg.com/react-addons-linked-state-mixin/react-addons-linked-state-mixin.js"></script>
+ <script src="../addons/react-linked-input/react-linked-input.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>
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ var LinkedStateMixin = React.addons.LinkedStateMixin;
+ var WithLink = createReactClass({
+ mixins: [LinkedStateMixin],
+ getInitialState: function() {
+ return {message: 'Hello!'};
+ },
+ render: function() {
+ return React.createElement(
+ LinkedInput,
+ {type: 'text', valueLink: this.linkState('message')},
+ );
+ }
+ });
+ ReactDOM.render(
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0,
+ },
+ React.createElement(
+ WithLink,
+ ),
+ ),
+ document.getElementById('container')
+ );
+ </script>
+ </body>
+</html>
diff --git a/fixtures/requirejswith-create-react-fragment.html b/fixtures/requirejswith-create-react-fragment.html
@@ -0,0 +1,72 @@
+<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',
+ 'create-react-fragment':
+ '../addons/react-addons-create-fragment/react-addons-create-fragment'
+ }
+ });
+
+ require(
+ ['react', 'react-dom', 'create-react-fragment'],
+ function(
+ React,
+ ReactDOM,
+ createReactFragment
+ ) {
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ function Swapper(props) {
+ let children;
+ if (props.swapped) {
+ children = createReactFragment({
+ right: props.rightChildren,
+ left: props.leftChildren
+ });
+ } else {
+ children = createReactFragment({
+ left: props.leftChildren,
+ right: props.rightChildren
+ });
+ }
+ return React.createElement('div', null, children);
+ }
+ ReactDOM.render(
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0,
+ },
+ React.createElement(
+ Swapper,
+ {
+ swapped: true,
+ leftChildren: 'Hello!',
+ rightChildren: 'FOO!!!',
+ },
+ ),
+ ),
+ document.getElementById('container')
+ );
+ });
+ </script>
+ </body>
+</html>
diff --git a/fixtures/requirejswith-react-linked-input.html b/fixtures/requirejswith-react-linked-input.html
@@ -0,0 +1,69 @@
+<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',
+ 'create-react-class':
+ '../addons/create-react-class/create-react-class',
+ 'linked-state-mixin':
+ '../addons/react-addons-linked-state-mixin/react-addons-linked-state-mixin',
+ 'linked-input':
+ '../addons/react-linked-input/react-linked-input',
+ }
+ });
+
+ require(
+ ['react', 'react-dom', 'create-react-class', 'linked-state-mixin',
+ 'linked-input'],
+ function(
+ React,
+ ReactDOM,
+ createReactClass,
+ LinkedStateMixin,
+ LinkedInput,
+ ) {
+ var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ var WithLink = createReactClass({
+ mixins: [LinkedStateMixin],
+ getInitialState: function() {
+ return {message: 'Hello!'};
+ },
+ render: function() {
+ return React.createElement(
+ LinkedInput,
+ {type: 'text', valueLink: this.linkState('message')},
+ );
+ }
+ });
+ ReactDOM.render(
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0,
+ },
+ React.createElement(WithLink),
+ ),
+ document.getElementById('container')
+ );
+ });
+ </script>
+ </body>
+</html>
diff --git a/fixtures/webpack-aliaswith-create-react-fragment/.gitignore b/fixtures/webpack-aliaswith-create-react-fragment/.gitignore
@@ -0,0 +1 @@
+output.js
diff --git a/fixtures/webpack-aliaswith-create-react-fragment/config.js b/fixtures/webpack-aliaswith-create-react-fragment/config.js
@@ -0,0 +1,15 @@
+module.exports = {
+ entry: './input',
+ output: {
+ filename: 'output.js',
+ },
+ resolve: {
+ root: '../../build/packages',
+ alias: {
+ 'react': 'react/dist/react-with-addons',
+ 'react-dom': 'react-dom/dist/react-dom',
+ 'create-react-fragment':
+ 'react-addons-create-fragment/react-addons-create-fragment'
+ },
+ },
+};
diff --git a/fixtures/webpack-aliaswith-create-react-fragment/index.html b/fixtures/webpack-aliaswith-create-react-fragment/index.html
@@ -0,0 +1,16 @@
+<html>
+ <body>
+ <style>
+ .example-appear {
+ opacity: 0.01;
+ }
+
+ .example-appear.example-appear-active {
+ opacity: 1;
+ transition: opacity .5s ease-in;
+ }
+ </style>
+ <div id="container"></div>
+ <script src="output.js"></script>
+ </body>
+</html>
diff --git a/fixtures/webpack-aliaswith-create-react-fragment/input.js b/fixtures/webpack-aliaswith-create-react-fragment/input.js
@@ -0,0 +1,41 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+var createReactFragment = require('create-react-fragment');
+function Swapper(props) {
+ let children;
+ if (props.swapped) {
+ children = createReactFragment({
+ right: props.rightChildren,
+ left: props.leftChildren
+ });
+ } else {
+ children = createReactFragment({
+ left: props.leftChildren,
+ right: props.rightChildren
+ });
+ }
+ return React.createElement('div', null, children);
+}
+
+var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ReactDOM.render(
+ React.createElement(
+ CSSTransitionGroup,
+ {
+ transitionName: 'example',
+ transitionAppear: true,
+ transitionAppearTimeout: 500,
+ transitionEnterTimeout: 0,
+ transitionLeaveTimeout: 0
+ },
+ React.createElement(
+ Swapper,
+ {
+ swapped: true,
+ leftChildren: 'Hello!',
+ rightChildren: 'FOO!!!',
+ }
+ )
+ ),
+ document.getElementById('container')
+);
diff --git a/fixtures/webpack-aliaswith-create-react-fragment/package.json b/fixtures/webpack-aliaswith-create-react-fragment/package.json
@@ -0,0 +1,10 @@
+{
+ "name": "webpack-test",
+ "private": true,
+ "dependencies": {
+ "webpack": "^1.14.0"
+ },
+ "scripts": {
+ "build": "rm -f output.js && webpack --config config.js"
+ }
+}