mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
3c898931ed
* 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 **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 * Rename fixtures testing create-react-class **what is the change?:** Renamed some fixtures. **why make this change?:** This is part of setting up manual tests of the add-ons we are fixing. **test plan:** `cd fixtures && node ./build-all.js` and manually open the renamed fixtures. **issue:** https://github.com/facebook/react/issues/9765 * Prettify the unminified UMD build of `react-linked-input` **what is the change?:** `prettier addons/react-linked-input/react-linked-input.js | pbcopy` and replaced the contents of the file. **why make this change?:** I am manually tweaking this file and want it to be more readable. **test plan:** about to set up manual testing of this with fixtures. I expect that right now only the use of it as a global will work, and subsequent commits will fix the AMD and CommonJS use cases. **issue:** https://github.com/facebook/react/issues/9765 * 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:** https://github.com/facebook/react/issues/9765 * Fix missing `React` in `react-linked-input` and `create-fragment` **what is the change?:** Manually tweaking the UMD builds for both add-ons to include a dependency on React. **why make this change?:** They were broken before for AMD and CommonJS. For reasons I have not debugged, the CommonJS builds are still broken, but the AMD is now fixed and globals still work: ``` do 'react-linked-input' and 'create-react-fragment' work? before after + my + my + en^ironment | fix | fix | +---------------------------------------- | | | Global JS | :) yes | :) yes | +---------------------------------------- | | | AMD | X no | :) yes | +---------------------------------------- | | | CommonJS | X no | X no | +-------------+-----------+-----------+-- ``` **test plan:** In the previous commit we set up fixtures to manually test these. **issue:** https://github.com/facebook/react/issues/9765 * More adjustments to enable testing with fixtures Not worth explaining - just committing as a 'save point' while I fiddle with the fixtures. * Remove all cruft from manually testing addons in fixtures **what is the change?:** We forked three of the fixtures into two variations to test two of the react addons. We also added `console.log` statements to the addons to verify that we were loading the right build. This commit cleans it up by - deleting forked fixtures - re-adding the original fixtures - removing `console.log` statements **why make this change?:** To get this branch ready for review. **test plan:** `cd fixtures && node ./build-all.js` and then check the updated fixtures manually **issue:** https://github.com/facebook/react/issues/9765 * Double to single quotes in 'react-linked-input' **what is the change?:** `:%s /"/'/gc` I left double quotes wrapping cases where we have single quotes in the string. **why make this change?:** I ran the code for the unminified 'react-linked-input' through 'prettier' so it would be easier for me to manually fix the UMD wrapper. And 'prettier' changed many single quotes into double quotes. @spicyj pointed out this will be treated differently by the google closure compiler, and may have semantic differences. **test plan:** It's not worth testing imo. **issue:** https://github.com/facebook/react/issues/9765 * remove random newline
453 lines
14 KiB
JavaScript
453 lines
14 KiB
JavaScript
(function(f) {
|
|
if (typeof exports === 'object' && typeof module !== 'undefined') {
|
|
module.exports = f(require('react'));
|
|
} else if (typeof define === 'function' && define.amd) {
|
|
define(['react'], f);
|
|
} else {
|
|
var g;
|
|
if (typeof window !== 'undefined') {
|
|
g = window;
|
|
} else if (typeof global !== 'undefined') {
|
|
g = global;
|
|
} else if (typeof self !== 'undefined') {
|
|
g = self;
|
|
} else {
|
|
g = this;
|
|
}
|
|
|
|
if (typeof g.React === 'undefined') {
|
|
throw Error('React module should be required before createFragment');
|
|
} else if (typeof g.React.addons === 'undefined') {
|
|
g.React.addons = {};
|
|
}
|
|
|
|
g.LinkedInput = f(g.React);
|
|
}
|
|
})(function(React) {
|
|
var define, module, exports;
|
|
return (function e(t, n, r) {
|
|
function s(o, u) {
|
|
if (!n[o]) {
|
|
if (!t[o]) {
|
|
var a = typeof require == 'function' && require;
|
|
if (!u && a) return a(o, !0);
|
|
if (i) return i(o, !0);
|
|
var f = new Error("Cannot find module '" + o + "'");
|
|
throw ((f.code = 'MODULE_NOT_FOUND'), f);
|
|
}
|
|
var l = (n[o] = { exports: {} });
|
|
t[o][0].call(
|
|
l.exports,
|
|
function(e) {
|
|
var n = t[o][1][e];
|
|
return s(n ? n : e);
|
|
},
|
|
l,
|
|
l.exports,
|
|
e,
|
|
t,
|
|
n,
|
|
r
|
|
);
|
|
}
|
|
return n[o].exports;
|
|
}
|
|
var i = typeof require == 'function' && require;
|
|
for (var o = 0; o < r.length; o++) s(r[o]);
|
|
return s;
|
|
})(
|
|
{
|
|
1: [
|
|
function(require, module, exports) {
|
|
/**
|
|
* Copyright 2013-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* 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.
|
|
*/
|
|
|
|
'use strict';
|
|
var emptyFunction = require('fbjs/lib/emptyFunction');
|
|
var invariant = require('fbjs/lib/invariant');
|
|
var warning = require('fbjs/lib/warning');
|
|
|
|
var hasReadOnlyValue = {
|
|
button: true,
|
|
checkbox: true,
|
|
image: true,
|
|
hidden: true,
|
|
radio: true,
|
|
reset: true,
|
|
submit: true
|
|
};
|
|
|
|
function _assertSingleLink(inputProps) {
|
|
invariant(
|
|
inputProps.checkedLink == null || inputProps.valueLink == null,
|
|
'Cannot provide a checkedLink and a valueLink. If you want to use ' +
|
|
"checkedLink, you probably don't want to use valueLink and vice versa."
|
|
);
|
|
}
|
|
function _assertValueLink(inputProps) {
|
|
_assertSingleLink(inputProps);
|
|
invariant(
|
|
inputProps.value == null && inputProps.onChange == null,
|
|
'Cannot provide a valueLink and a value or onChange event. If you want ' +
|
|
"to use value or onChange, you probably don't want to use valueLink."
|
|
);
|
|
}
|
|
|
|
function _assertCheckedLink(inputProps) {
|
|
_assertSingleLink(inputProps);
|
|
invariant(
|
|
inputProps.checked == null && inputProps.onChange == null,
|
|
'Cannot provide a checkedLink and a checked property or onChange event. ' +
|
|
"If you want to use checked or onChange, you probably don't want to " +
|
|
'use checkedLink'
|
|
);
|
|
}
|
|
|
|
var loggedTypeFailures = {};
|
|
function getDeclarationErrorAddendum(owner) {
|
|
if (owner) {
|
|
var name = owner.getName();
|
|
if (name) {
|
|
return ' Check the render method of `' + name + '`.';
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
|
|
/**
|
|
* Provide a linked `value` attribute for controlled forms. You should not use
|
|
* this outside of the ReactDOM controlled form components.
|
|
*/
|
|
var LinkedValueUtils = {
|
|
/**
|
|
* @param {object} inputProps Props for form component
|
|
* @return {*} current value of the input either from value prop or link.
|
|
*/
|
|
getValue: function(inputProps) {
|
|
if (inputProps.valueLink) {
|
|
_assertValueLink(inputProps);
|
|
return inputProps.valueLink.value;
|
|
}
|
|
return inputProps.value;
|
|
},
|
|
|
|
/**
|
|
* @param {object} inputProps Props for form component
|
|
* @return {*} current checked status of the input either from checked prop
|
|
* or link.
|
|
*/
|
|
getChecked: function(inputProps) {
|
|
if (inputProps.checkedLink) {
|
|
_assertCheckedLink(inputProps);
|
|
return inputProps.checkedLink.value;
|
|
}
|
|
return inputProps.checked;
|
|
},
|
|
|
|
/**
|
|
* @param {object} inputProps Props for form component
|
|
* @param {SyntheticEvent} event change event to handle
|
|
*/
|
|
executeOnChange: function(inputProps, event) {
|
|
if (inputProps.valueLink) {
|
|
_assertValueLink(inputProps);
|
|
return inputProps.valueLink.requestChange(event.target.value);
|
|
} else if (inputProps.checkedLink) {
|
|
_assertCheckedLink(inputProps);
|
|
return inputProps.checkedLink.requestChange(
|
|
event.target.checked
|
|
);
|
|
} else if (inputProps.onChange) {
|
|
return inputProps.onChange.call(undefined, event);
|
|
}
|
|
}
|
|
};
|
|
|
|
function _classCallCheck(instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError('Cannot call a class as a function');
|
|
}
|
|
}
|
|
|
|
function _possibleConstructorReturn(self, call) {
|
|
if (!self) {
|
|
throw new ReferenceError(
|
|
"this hasn't been initialised - super() hasn't been called"
|
|
);
|
|
}
|
|
return call &&
|
|
(typeof call === 'object' || typeof call === 'function')
|
|
? call
|
|
: self;
|
|
}
|
|
|
|
function _inherits(subClass, superClass) {
|
|
if (typeof superClass !== 'function' && superClass !== null) {
|
|
throw new TypeError(
|
|
'Super expression must either be null or a function, not ' +
|
|
typeof superClass
|
|
);
|
|
}
|
|
subClass.prototype = Object.create(
|
|
superClass && superClass.prototype,
|
|
{
|
|
constructor: {
|
|
value: subClass,
|
|
enumerable: false,
|
|
writable: true,
|
|
configurable: true
|
|
}
|
|
}
|
|
);
|
|
if (superClass)
|
|
Object.setPrototypeOf
|
|
? Object.setPrototypeOf(subClass, superClass)
|
|
: (subClass.__proto__ = superClass);
|
|
}
|
|
|
|
var LinkedInput = (function(_React$Component) {
|
|
_inherits(LinkedInput, _React$Component);
|
|
|
|
function LinkedInput() {
|
|
_classCallCheck(this, LinkedInput);
|
|
|
|
var _this = _possibleConstructorReturn(
|
|
this,
|
|
_React$Component.call(this)
|
|
);
|
|
|
|
_this.handleChange = _this.handleChange.bind(_this);
|
|
return _this;
|
|
}
|
|
|
|
LinkedInput.prototype.handleChange = function handleChange(e) {
|
|
LinkedValueUtils.executeOnChange(this.props, e);
|
|
};
|
|
|
|
LinkedInput.prototype.render = function render() {
|
|
var newProps = Object.assign({}, this.props);
|
|
newProps.value = LinkedValueUtils.getValue(this.props);
|
|
newProps.checked = LinkedValueUtils.getChecked(this.props);
|
|
newProps.onChange = this.handleChange;
|
|
delete newProps.valueLink;
|
|
delete newProps.checkedLink;
|
|
return React.createElement('input', newProps);
|
|
};
|
|
|
|
return LinkedInput;
|
|
})(React.Component);
|
|
|
|
module.exports = LinkedInput;
|
|
},
|
|
{
|
|
'fbjs/lib/emptyFunction': 2,
|
|
'fbjs/lib/invariant': 3,
|
|
'fbjs/lib/warning': 4
|
|
}
|
|
],
|
|
2: [
|
|
function(require, module, exports) {
|
|
'use strict';
|
|
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* 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) {
|
|
return function() {
|
|
return arg;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* This function accepts and discards inputs; it has no side effects. This is
|
|
* primarily useful idiomatically for overridable function endpoints which
|
|
* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
|
|
*/
|
|
var emptyFunction = function emptyFunction() {};
|
|
|
|
emptyFunction.thatReturns = makeEmptyFunction;
|
|
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
|
|
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
|
|
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
|
|
emptyFunction.thatReturnsThis = function() {
|
|
return this;
|
|
};
|
|
emptyFunction.thatReturnsArgument = function(arg) {
|
|
return arg;
|
|
};
|
|
|
|
module.exports = emptyFunction;
|
|
},
|
|
{}
|
|
],
|
|
3: [
|
|
function(require, module, exports) {
|
|
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* 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.
|
|
*
|
|
*/
|
|
|
|
'use strict';
|
|
/**
|
|
* Use invariant() to assert state which your program assumes to be true.
|
|
*
|
|
* Provide sprintf-style format (only %s is supported) and arguments
|
|
* to provide information about what broke and what you were
|
|
* expecting.
|
|
*
|
|
* The invariant message will be stripped in production, but the invariant
|
|
* will remain to ensure logic does not differ in production.
|
|
*/
|
|
|
|
var validateFormat = function validateFormat(format) {};
|
|
|
|
if ('development' !== 'production') {
|
|
validateFormat = function validateFormat(format) {
|
|
if (format === undefined) {
|
|
throw new Error('invariant requires an error message argument');
|
|
}
|
|
};
|
|
}
|
|
|
|
function invariant(condition, format, a, b, c, d, e, f) {
|
|
validateFormat(format);
|
|
|
|
if (!condition) {
|
|
var error;
|
|
if (format === undefined) {
|
|
error = new Error(
|
|
'Minified exception occurred; use the non-minified dev environment ' +
|
|
'for the full error message and additional helpful warnings.'
|
|
);
|
|
} else {
|
|
var args = [a, b, c, d, e, f];
|
|
var argIndex = 0;
|
|
error = new Error(
|
|
format.replace(/%s/g, function() {
|
|
return args[argIndex++];
|
|
})
|
|
);
|
|
error.name = 'Invariant Violation';
|
|
}
|
|
|
|
error.framesToPop = 1; // we don't care about invariant's own frame
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
module.exports = invariant;
|
|
},
|
|
{}
|
|
],
|
|
4: [
|
|
function(require, module, exports) {
|
|
/**
|
|
* Copyright 2014-2015, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* 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.
|
|
*
|
|
*/
|
|
|
|
'use strict';
|
|
var emptyFunction = require('./emptyFunction');
|
|
|
|
/**
|
|
* Similar to invariant but only logs a warning if the condition is not met.
|
|
* This can be used to log issues in development environments in critical
|
|
* paths. Removing the logging code for production environments will keep the
|
|
* same logic and follow the same code paths.
|
|
*/
|
|
|
|
var warning = emptyFunction;
|
|
|
|
if ('development' !== 'production') {
|
|
(function() {
|
|
var printWarning = function printWarning(format) {
|
|
for (
|
|
var _len = arguments.length,
|
|
args = Array(_len > 1 ? _len - 1 : 0),
|
|
_key = 1;
|
|
_key < _len;
|
|
_key++
|
|
) {
|
|
args[_key - 1] = arguments[_key];
|
|
}
|
|
|
|
var argIndex = 0;
|
|
var message =
|
|
'Warning: ' +
|
|
format.replace(/%s/g, function() {
|
|
return args[argIndex++];
|
|
});
|
|
if (typeof console !== 'undefined') {
|
|
console.error(message);
|
|
}
|
|
try {
|
|
// --- Welcome to debugging React ---
|
|
// This error was thrown as a convenience so that you can use this stack
|
|
// to find the callsite that caused this warning to fire.
|
|
throw new Error(message);
|
|
} catch (x) {}
|
|
};
|
|
|
|
warning = function warning(condition, format) {
|
|
if (format === undefined) {
|
|
throw new Error(
|
|
'`warning(condition, format, ...args)` requires a warning ' +
|
|
'message argument'
|
|
);
|
|
}
|
|
|
|
if (format.indexOf('Failed Composite propType: ') === 0) {
|
|
return; // Ignore CompositeComponent proptype check.
|
|
}
|
|
|
|
if (!condition) {
|
|
for (
|
|
var _len2 = arguments.length,
|
|
args = Array(_len2 > 2 ? _len2 - 2 : 0),
|
|
_key2 = 2;
|
|
_key2 < _len2;
|
|
_key2++
|
|
) {
|
|
args[_key2 - 2] = arguments[_key2];
|
|
}
|
|
|
|
printWarning.apply(undefined, [format].concat(args));
|
|
}
|
|
};
|
|
})();
|
|
}
|
|
|
|
module.exports = warning;
|
|
},
|
|
{ './emptyFunction': 2 }
|
|
]
|
|
},
|
|
{},
|
|
[1]
|
|
)(1);
|
|
});
|
|
|