forked from Gitlink/forgeplus-react
3270 lines
98 KiB
JavaScript
3270 lines
98 KiB
JavaScript
|
|
'use strict';
|
|||
|
|
|
|||
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|||
|
|
|
|||
|
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|||
|
|
|
|||
|
|
var React = require('react');
|
|||
|
|
var React__default = _interopDefault(React);
|
|||
|
|
var shallowEqual = _interopDefault(require('shallowequal'));
|
|||
|
|
var levenshtein = _interopDefault(require('fast-levenshtein'));
|
|||
|
|
var ReactDOM = _interopDefault(require('react-dom'));
|
|||
|
|
var PropTypes = _interopDefault(require('prop-types'));
|
|||
|
|
var defaultPolyfill = require('react-lifecycles-compat');
|
|||
|
|
var defaultPolyfill__default = _interopDefault(defaultPolyfill);
|
|||
|
|
var hoistNonReactStatic = _interopDefault(require('hoist-non-react-statics'));
|
|||
|
|
|
|||
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
|
|||
|
|
return typeof obj;
|
|||
|
|
} : function (obj) {
|
|||
|
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var classCallCheck = function (instance, Constructor) {
|
|||
|
|
if (!(instance instanceof Constructor)) {
|
|||
|
|
throw new TypeError("Cannot call a class as a function");
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var _extends = Object.assign || function (target) {
|
|||
|
|
for (var i = 1; i < arguments.length; i++) {
|
|||
|
|
var source = arguments[i];
|
|||
|
|
|
|||
|
|
for (var key in source) {
|
|||
|
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|||
|
|
target[key] = source[key];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return target;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var inherits = function (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 possibleConstructorReturn = function (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;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* eslint-disable no-underscore-dangle */
|
|||
|
|
|
|||
|
|
var isCompositeComponent = function isCompositeComponent(type) {
|
|||
|
|
return typeof type === 'function';
|
|||
|
|
};
|
|||
|
|
var isReloadableComponent = function isReloadableComponent(type) {
|
|||
|
|
return typeof type === 'function' || (typeof type === 'undefined' ? 'undefined' : _typeof(type)) === 'object';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getComponentDisplayName = function getComponentDisplayName(type) {
|
|||
|
|
var displayName = type.displayName || type.name;
|
|||
|
|
return displayName && displayName !== 'ReactComponent' ? displayName : 'Component';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var reactLifeCycleMountMethods = ['componentWillMount', 'componentDidMount'];
|
|||
|
|
|
|||
|
|
function isReactClass(Component) {
|
|||
|
|
return !!(Component.prototype && (React__default.Component.prototype.isPrototypeOf(Component.prototype) ||
|
|||
|
|
// react 14 support
|
|||
|
|
Component.prototype.isReactComponent || Component.prototype.componentWillMount || Component.prototype.componentWillUnmount || Component.prototype.componentDidMount || Component.prototype.componentDidUnmount || Component.prototype.render));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isReactClassInstance(Component) {
|
|||
|
|
return Component && isReactClass({ prototype: Object.getPrototypeOf(Component) });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var getInternalInstance = function getInternalInstance(instance) {
|
|||
|
|
return instance._reactInternalFiber || // React 16
|
|||
|
|
instance._reactInternalInstance || // React 15
|
|||
|
|
null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var updateInstance = function updateInstance(instance) {
|
|||
|
|
var updater = instance.updater,
|
|||
|
|
forceUpdate = instance.forceUpdate;
|
|||
|
|
|
|||
|
|
if (typeof forceUpdate === 'function') {
|
|||
|
|
instance.forceUpdate();
|
|||
|
|
} else if (updater && typeof updater.enqueueForceUpdate === 'function') {
|
|||
|
|
updater.enqueueForceUpdate(instance);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var isFragmentNode = function isFragmentNode(_ref) {
|
|||
|
|
var type = _ref.type;
|
|||
|
|
return React__default.Fragment && type === React__default.Fragment;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var ContextType = React__default.createContext ? React__default.createContext() : null;
|
|||
|
|
var ConsumerType = ContextType && ContextType.Consumer.$$typeof;
|
|||
|
|
var ProviderType = ContextType && ContextType.Provider.$$typeof;
|
|||
|
|
var MemoType = React__default.memo && React__default.memo(function () {
|
|||
|
|
return null;
|
|||
|
|
}).$$typeof;
|
|||
|
|
var LazyType = React__default.lazy && React__default.lazy(function () {
|
|||
|
|
return null;
|
|||
|
|
}).$$typeof;
|
|||
|
|
var ForwardType = React__default.forwardRef && React__default.forwardRef(function () {
|
|||
|
|
return null;
|
|||
|
|
}).$$typeof;
|
|||
|
|
|
|||
|
|
var CONTEXT_CURRENT_VALUE = '_currentValue';
|
|||
|
|
|
|||
|
|
var isContextConsumer = function isContextConsumer(_ref2) {
|
|||
|
|
var type = _ref2.type;
|
|||
|
|
return type && (typeof type === 'undefined' ? 'undefined' : _typeof(type)) === 'object' && '$$typeof' in type && type.$$typeof === ConsumerType && ConsumerType;
|
|||
|
|
};
|
|||
|
|
var isContextProvider = function isContextProvider(_ref3) {
|
|||
|
|
var type = _ref3.type;
|
|||
|
|
return type && (typeof type === 'undefined' ? 'undefined' : _typeof(type)) === 'object' && '$$typeof' in type && type.$$typeof === ProviderType && ProviderType;
|
|||
|
|
};
|
|||
|
|
var isMemoType = function isMemoType(_ref4) {
|
|||
|
|
var type = _ref4.type;
|
|||
|
|
return type && (typeof type === 'undefined' ? 'undefined' : _typeof(type)) === 'object' && '$$typeof' in type && type.$$typeof === MemoType && MemoType;
|
|||
|
|
};
|
|||
|
|
var isLazyType = function isLazyType(_ref5) {
|
|||
|
|
var type = _ref5.type;
|
|||
|
|
return type && (typeof type === 'undefined' ? 'undefined' : _typeof(type)) === 'object' && '$$typeof' in type && type.$$typeof === LazyType && LazyType;
|
|||
|
|
};
|
|||
|
|
var isForwardType = function isForwardType(_ref6) {
|
|||
|
|
var type = _ref6.type;
|
|||
|
|
return type && (typeof type === 'undefined' ? 'undefined' : _typeof(type)) === 'object' && '$$typeof' in type && type.$$typeof === ForwardType && ForwardType;
|
|||
|
|
};
|
|||
|
|
var isContextType = function isContextType(type) {
|
|||
|
|
return isContextConsumer(type) || isContextProvider(type);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getElementType = function getElementType(type) {
|
|||
|
|
var element = { type: type };
|
|||
|
|
|
|||
|
|
if (isContextConsumer(element)) {
|
|||
|
|
return 'Consumer';
|
|||
|
|
}
|
|||
|
|
if (isContextProvider(element)) {
|
|||
|
|
return 'Provider';
|
|||
|
|
}
|
|||
|
|
if (isLazyType(element)) {
|
|||
|
|
return 'Lazy';
|
|||
|
|
}
|
|||
|
|
if (isMemoType(element)) {
|
|||
|
|
return 'Memo';
|
|||
|
|
}
|
|||
|
|
if (isForwardType(element)) {
|
|||
|
|
return 'Forward';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isReactClass(type)) {
|
|||
|
|
return 'Class';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (typeof element === 'function') {
|
|||
|
|
return 'FC';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return 'unknown';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getContextProvider = function getContextProvider(type) {
|
|||
|
|
return type && type._context;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var configuration = {
|
|||
|
|
// Log level
|
|||
|
|
logLevel: 'error',
|
|||
|
|
|
|||
|
|
// Allows using SFC without changes
|
|||
|
|
pureSFC: true,
|
|||
|
|
|
|||
|
|
// keep render method unpatched, moving sideEffect to componentDidUpdate
|
|||
|
|
pureRender: true,
|
|||
|
|
|
|||
|
|
// Allows SFC to be used, enables "intermediate" components used by Relay, should be disabled for Preact
|
|||
|
|
allowSFC: true,
|
|||
|
|
|
|||
|
|
// Allow reload of effect hooks with non zero dependency list
|
|||
|
|
reloadHooks: true,
|
|||
|
|
|
|||
|
|
// Allow reload of mount effect hooks - zero deps
|
|||
|
|
reloadLifeCycleHooks: false,
|
|||
|
|
|
|||
|
|
// Enables hook reload on hook body change
|
|||
|
|
reloadHooksOnBodyChange: true,
|
|||
|
|
|
|||
|
|
// Disable "hot-replacement-render"
|
|||
|
|
disableHotRenderer: false,
|
|||
|
|
|
|||
|
|
// @private
|
|||
|
|
integratedComparator: false,
|
|||
|
|
// @private
|
|||
|
|
integratedResolver: false,
|
|||
|
|
|
|||
|
|
// Disable "hot-replacement-render" when injection into react-dom is made
|
|||
|
|
disableHotRendererWhenInjected: true,
|
|||
|
|
|
|||
|
|
// Controls `react-🔥-dom patch` notification
|
|||
|
|
showReactDomPatchNotification: true,
|
|||
|
|
|
|||
|
|
// Hook on babel component register.
|
|||
|
|
onComponentRegister: false,
|
|||
|
|
|
|||
|
|
// Hook on React renders for a first time component
|
|||
|
|
onComponentCreate: false,
|
|||
|
|
|
|||
|
|
// flag to completely disable RHL for SFC. Probably don't use it without dom patch made.
|
|||
|
|
ignoreSFC: false,
|
|||
|
|
|
|||
|
|
// ignoreSFC when injection into react-dom is made
|
|||
|
|
ignoreSFCWhenInjected: true,
|
|||
|
|
|
|||
|
|
// flag to completely disable RHL for Components
|
|||
|
|
ignoreComponents: false,
|
|||
|
|
|
|||
|
|
// default value for AppContainer errorOverlay
|
|||
|
|
errorReporter: undefined,
|
|||
|
|
|
|||
|
|
// Global error overlay
|
|||
|
|
ErrorOverlay: undefined,
|
|||
|
|
|
|||
|
|
// Actively track lazy loaded components
|
|||
|
|
trackTailUpdates: true,
|
|||
|
|
|
|||
|
|
// wrap lazy with AppProvider to allow independent updates
|
|||
|
|
wrapLazy: true,
|
|||
|
|
|
|||
|
|
// react hot dom features enabled
|
|||
|
|
IS_REACT_MERGE_ENABLED: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var internalConfiguration = {
|
|||
|
|
// control proxy creation
|
|||
|
|
disableProxyCreation: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var setConfiguration = function setConfiguration(config) {
|
|||
|
|
// not using Object.assing for IE11 compliance
|
|||
|
|
for (var i in config) {
|
|||
|
|
if (config.hasOwnProperty(i)) {
|
|||
|
|
configuration[i] = config[i];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* eslint-disable no-console */
|
|||
|
|
|
|||
|
|
var logger = {
|
|||
|
|
debug: function debug() {
|
|||
|
|
if (['debug'].indexOf(configuration.logLevel) !== -1) {
|
|||
|
|
var _console;
|
|||
|
|
|
|||
|
|
(_console = console).debug.apply(_console, arguments);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
log: function log() {
|
|||
|
|
if (['debug', 'log'].indexOf(configuration.logLevel) !== -1) {
|
|||
|
|
var _console2;
|
|||
|
|
|
|||
|
|
(_console2 = console).log.apply(_console2, arguments);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
warn: function warn() {
|
|||
|
|
if (['debug', 'log', 'warn'].indexOf(configuration.logLevel) !== -1) {
|
|||
|
|
var _console3;
|
|||
|
|
|
|||
|
|
(_console3 = console).warn.apply(_console3, arguments);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function error() {
|
|||
|
|
if (['debug', 'log', 'warn', 'error'].indexOf(configuration.logLevel) !== -1) {
|
|||
|
|
var _console4;
|
|||
|
|
|
|||
|
|
(_console4 = console).error.apply(_console4, arguments);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* eslint-disable no-eval, func-names */
|
|||
|
|
|
|||
|
|
function safeReactConstructor(Component, lastInstance) {
|
|||
|
|
try {
|
|||
|
|
if (lastInstance) {
|
|||
|
|
return new Component(lastInstance.props, lastInstance.context);
|
|||
|
|
}
|
|||
|
|
return new Component({}, {});
|
|||
|
|
} catch (e) {
|
|||
|
|
// some components, like Redux connect could not be created without proper context
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function isNativeFunction(fn) {
|
|||
|
|
return typeof fn === 'function' ? fn.toString().indexOf('[native code]') > 0 : false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var identity = function identity(a) {
|
|||
|
|
return a;
|
|||
|
|
};
|
|||
|
|
var indirectEval = eval;
|
|||
|
|
|
|||
|
|
var doesSupportClasses = function () {
|
|||
|
|
try {
|
|||
|
|
indirectEval('class Test {}');
|
|||
|
|
return true;
|
|||
|
|
} catch (e) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
var ES6ProxyComponentFactory = function ES6ProxyComponentFactory(InitialParent, postConstructionAction) {
|
|||
|
|
return indirectEval('\n(function(InitialParent, postConstructionAction) {\n return class ' + (InitialParent.name || 'HotComponent') + ' extends InitialParent {\n /*\n ! THIS IS NOT YOUR COMPONENT !\n ! THIS IS REACT-HOT-LOADER !\n \n this is a "' + InitialParent.name + '" component, patched by React-Hot-Loader\n Sorry, but the real class code was hidden behind this facade\n Please refer to https://github.com/gaearon/react-hot-loader for details...\n */ \n \n constructor(props, context) {\n super(props, context)\n postConstructionAction.call(this)\n }\n }\n})\n')(InitialParent, postConstructionAction);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var ES5ProxyComponentFactory = function ES5ProxyComponentFactory(InitialParent, postConstructionAction) {
|
|||
|
|
function ProxyComponent(props, context) {
|
|||
|
|
InitialParent.call(this, props, context);
|
|||
|
|
postConstructionAction.call(this);
|
|||
|
|
}
|
|||
|
|
ProxyComponent.prototype = Object.create(InitialParent.prototype);
|
|||
|
|
Object.setPrototypeOf(ProxyComponent, InitialParent);
|
|||
|
|
return ProxyComponent;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var proxyClassCreator = doesSupportClasses ? ES6ProxyComponentFactory : ES5ProxyComponentFactory;
|
|||
|
|
|
|||
|
|
function getOwnKeys(target) {
|
|||
|
|
return [].concat(Object.getOwnPropertyNames(target), Object.getOwnPropertySymbols(target));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function shallowStringsEqual(a, b) {
|
|||
|
|
for (var key in a) {
|
|||
|
|
if (String(a[key]) !== String(b[key])) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function deepPrototypeUpdate(dest, source) {
|
|||
|
|
var deepDest = Object.getPrototypeOf(dest);
|
|||
|
|
var deepSrc = Object.getPrototypeOf(source);
|
|||
|
|
if (deepDest && deepSrc && deepSrc !== deepDest) {
|
|||
|
|
deepPrototypeUpdate(deepDest, deepSrc);
|
|||
|
|
}
|
|||
|
|
if (source.prototype && source.prototype !== dest.prototype) {
|
|||
|
|
dest.prototype = source.prototype;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function safeDefineProperty(target, key, props) {
|
|||
|
|
try {
|
|||
|
|
Object.defineProperty(target, key, props);
|
|||
|
|
} catch (e) {
|
|||
|
|
logger.warn('Error while wrapping', key, ' -> ', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var PREFIX = '__reactstandin__';
|
|||
|
|
var PROXY_KEY = PREFIX + 'key';
|
|||
|
|
var GENERATION = PREFIX + 'proxyGeneration';
|
|||
|
|
var REGENERATE_METHOD = PREFIX + 'regenerateByEval';
|
|||
|
|
var UNWRAP_PROXY = PREFIX + 'getCurrent';
|
|||
|
|
var CACHED_RESULT = PREFIX + 'cachedResult';
|
|||
|
|
var PROXY_IS_MOUNTED = PREFIX + 'isMounted';
|
|||
|
|
|
|||
|
|
var RENDERED_GENERATION = 'REACT_HOT_LOADER_RENDERED_GENERATION';
|
|||
|
|
|
|||
|
|
var RESERVED_STATICS = ['length', 'displayName', 'name', 'arguments', 'caller', 'prototype', 'toString', 'valueOf', 'isStatelessFunctionalProxy', PROXY_KEY, UNWRAP_PROXY];
|
|||
|
|
|
|||
|
|
function transferStaticProps(ProxyComponent, savedDescriptors, PreviousComponent, NextComponent) {
|
|||
|
|
Object.getOwnPropertyNames(ProxyComponent).forEach(function (key) {
|
|||
|
|
if (RESERVED_STATICS.indexOf(key) !== -1) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var prevDescriptor = Object.getOwnPropertyDescriptor(ProxyComponent, key);
|
|||
|
|
var savedDescriptor = savedDescriptors[key];
|
|||
|
|
|
|||
|
|
if (!shallowEqual(prevDescriptor, savedDescriptor)) {
|
|||
|
|
safeDefineProperty(NextComponent, key, prevDescriptor);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Copy newly defined static methods and properties
|
|||
|
|
Object.getOwnPropertyNames(NextComponent).forEach(function (key) {
|
|||
|
|
if (RESERVED_STATICS.indexOf(key) !== -1) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var prevDescriptor = PreviousComponent && Object.getOwnPropertyDescriptor(ProxyComponent, key);
|
|||
|
|
var savedDescriptor = savedDescriptors[key];
|
|||
|
|
|
|||
|
|
// Skip redefined descriptors
|
|||
|
|
if (prevDescriptor && savedDescriptor && !shallowEqual(savedDescriptor, prevDescriptor)) {
|
|||
|
|
safeDefineProperty(NextComponent, key, prevDescriptor);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (prevDescriptor && !savedDescriptor) {
|
|||
|
|
safeDefineProperty(ProxyComponent, key, prevDescriptor);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var nextDescriptor = _extends({}, Object.getOwnPropertyDescriptor(NextComponent, key), {
|
|||
|
|
configurable: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
savedDescriptors[key] = nextDescriptor;
|
|||
|
|
safeDefineProperty(ProxyComponent, key, nextDescriptor);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Remove static methods and properties that are no longer defined
|
|||
|
|
Object.getOwnPropertyNames(ProxyComponent).forEach(function (key) {
|
|||
|
|
if (RESERVED_STATICS.indexOf(key) !== -1) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// Skip statics that exist on the next class
|
|||
|
|
if (NextComponent.hasOwnProperty(key)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// Skip non-configurable statics
|
|||
|
|
var proxyDescriptor = Object.getOwnPropertyDescriptor(ProxyComponent, key);
|
|||
|
|
if (proxyDescriptor && !proxyDescriptor.configurable) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var prevDescriptor = PreviousComponent && Object.getOwnPropertyDescriptor(PreviousComponent, key);
|
|||
|
|
var savedDescriptor = savedDescriptors[key];
|
|||
|
|
|
|||
|
|
// Skip redefined descriptors
|
|||
|
|
if (prevDescriptor && savedDescriptor && !shallowEqual(savedDescriptor, prevDescriptor)) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
safeDefineProperty(ProxyComponent, key, {
|
|||
|
|
value: undefined
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return savedDescriptors;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function mergeComponents(ProxyComponent, NextComponent, InitialComponent, lastInstance, injectedMembers) {
|
|||
|
|
var injectedCode = {};
|
|||
|
|
try {
|
|||
|
|
var nextInstance = safeReactConstructor(NextComponent, lastInstance);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// Bypass babel class inheritance checking
|
|||
|
|
deepPrototypeUpdate(InitialComponent, NextComponent);
|
|||
|
|
} catch (e) {
|
|||
|
|
// It was ES6 class
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var proxyInstance = safeReactConstructor(ProxyComponent, lastInstance);
|
|||
|
|
|
|||
|
|
if (!nextInstance || !proxyInstance) {
|
|||
|
|
return injectedCode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var mergedAttrs = _extends({}, proxyInstance, nextInstance);
|
|||
|
|
var hasRegenerate = proxyInstance[REGENERATE_METHOD];
|
|||
|
|
var ownKeys = getOwnKeys(Object.getPrototypeOf(ProxyComponent.prototype));
|
|||
|
|
Object.keys(mergedAttrs).forEach(function (key) {
|
|||
|
|
if (key.indexOf(PREFIX) === 0) return;
|
|||
|
|
var nextAttr = nextInstance[key];
|
|||
|
|
var prevAttr = proxyInstance[key];
|
|||
|
|
if (nextAttr) {
|
|||
|
|
if (isNativeFunction(nextAttr) || isNativeFunction(prevAttr)) {
|
|||
|
|
// this is bound method
|
|||
|
|
var isSameArity = nextAttr.length === prevAttr.length;
|
|||
|
|
var existsInPrototype = ownKeys.indexOf(key) >= 0 || ProxyComponent.prototype[key];
|
|||
|
|
if ((isSameArity || !prevAttr) && existsInPrototype) {
|
|||
|
|
if (hasRegenerate) {
|
|||
|
|
injectedCode[key] = 'Object.getPrototypeOf(this)[\'' + key + '\'].bind(this)';
|
|||
|
|
} else {
|
|||
|
|
logger.warn('React Hot Loader:,', 'Non-controlled class', ProxyComponent.name, 'contains a new native or bound function ', key, nextAttr, '. Unable to reproduce');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
logger.warn('React Hot Loader:', 'Updated class ', ProxyComponent.name, 'contains native or bound function ', key, nextAttr, '. Unable to reproduce, use arrow functions instead.', '(arity: ' + nextAttr.length + '/' + prevAttr.length + ', proto: ' + (existsInPrototype ? 'yes' : 'no'));
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var nextString = String(nextAttr);
|
|||
|
|
var injectedBefore = injectedMembers[key];
|
|||
|
|
var isArrow = nextString.indexOf('=>') >= 0;
|
|||
|
|
var isFunction = nextString.indexOf('function') >= 0 || isArrow;
|
|||
|
|
var referToThis = nextString.indexOf('this') >= 0;
|
|||
|
|
if (nextString !== String(prevAttr) || injectedBefore && nextString !== String(injectedBefore) || isArrow && referToThis) {
|
|||
|
|
if (!hasRegenerate) {
|
|||
|
|
if (!isFunction) {
|
|||
|
|
// just copy prop over
|
|||
|
|
injectedCode[key] = nextAttr;
|
|||
|
|
} else {
|
|||
|
|
logger.warn('React Hot Loader:', ' Updated class ', ProxyComponent.name, 'had different code for', key, nextAttr, '. Unable to reproduce. Regeneration support needed.');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
injectedCode[key] = nextAttr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
logger.warn('React Hot Loader:', e);
|
|||
|
|
}
|
|||
|
|
return injectedCode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function checkLifeCycleMethods(ProxyComponent, NextComponent) {
|
|||
|
|
try {
|
|||
|
|
var p1 = Object.getPrototypeOf(ProxyComponent.prototype);
|
|||
|
|
var p2 = NextComponent.prototype;
|
|||
|
|
reactLifeCycleMountMethods.forEach(function (key) {
|
|||
|
|
var d1 = Object.getOwnPropertyDescriptor(p1, key) || { value: p1[key] };
|
|||
|
|
var d2 = Object.getOwnPropertyDescriptor(p2, key) || { value: p2[key] };
|
|||
|
|
if (!shallowStringsEqual(d1, d2)) {
|
|||
|
|
logger.warn('React Hot Loader:', 'You did update', ProxyComponent.name, 's lifecycle method', key, '. Unable to repeat');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
// Ignore errors
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function inject(target, currentGeneration, injectedMembers) {
|
|||
|
|
if (target[GENERATION] !== currentGeneration) {
|
|||
|
|
var hasRegenerate = !!target[REGENERATE_METHOD];
|
|||
|
|
Object.keys(injectedMembers).forEach(function (key) {
|
|||
|
|
try {
|
|||
|
|
if (hasRegenerate) {
|
|||
|
|
var usedThis = String(injectedMembers[key]).match(/_this([\d]+)/gi) || [];
|
|||
|
|
target[REGENERATE_METHOD](key, '(function REACT_HOT_LOADER_SANDBOX () {\n var _this = this; // common babel transpile\n ' + usedThis.map(function (name) {
|
|||
|
|
return 'var ' + name + ' = this;';
|
|||
|
|
}) + '\n\n return ' + injectedMembers[key] + ';\n }).call(this)');
|
|||
|
|
} else {
|
|||
|
|
target[key] = injectedMembers[key];
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
logger.warn('React Hot Loader: Failed to regenerate method ', key, ' of class ', target);
|
|||
|
|
logger.warn('got error', e);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
target[GENERATION] = currentGeneration;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var has = Object.prototype.hasOwnProperty;
|
|||
|
|
|
|||
|
|
var proxies = new WeakMap();
|
|||
|
|
|
|||
|
|
var resetClassProxies = function resetClassProxies() {
|
|||
|
|
proxies = new WeakMap();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var blackListedClassMembers = ['constructor', 'render', 'componentWillMount', 'componentDidMount', 'componentDidCatch', 'componentWillReceiveProps', 'componentWillUnmount', 'hotComponentRender', 'getInitialState', 'getDefaultProps'];
|
|||
|
|
|
|||
|
|
var defaultRenderOptions = {
|
|||
|
|
componentWillRender: identity,
|
|||
|
|
componentDidUpdate: function componentDidUpdate(result) {
|
|||
|
|
return result;
|
|||
|
|
},
|
|||
|
|
componentDidRender: function componentDidRender(result) {
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var filteredPrototypeMethods = function filteredPrototypeMethods(Proto) {
|
|||
|
|
return Object.getOwnPropertyNames(Proto).filter(function (prop) {
|
|||
|
|
var descriptor = Object.getOwnPropertyDescriptor(Proto, prop);
|
|||
|
|
return descriptor && prop.indexOf(PREFIX) !== 0 && blackListedClassMembers.indexOf(prop) < 0 && typeof descriptor.value === 'function';
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var defineClassMember = function defineClassMember(Class, methodName, methodBody) {
|
|||
|
|
return safeDefineProperty(Class.prototype, methodName, {
|
|||
|
|
configurable: true,
|
|||
|
|
writable: true,
|
|||
|
|
enumerable: false,
|
|||
|
|
value: methodBody
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var defineClassMembers = function defineClassMembers(Class, methods) {
|
|||
|
|
return Object.keys(methods).forEach(function (methodName) {
|
|||
|
|
return defineClassMember(Class, methodName, methods[methodName]);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var setSFPFlag = function setSFPFlag(component, flag) {
|
|||
|
|
return safeDefineProperty(component, 'isStatelessFunctionalProxy', {
|
|||
|
|
configurable: false,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: false,
|
|||
|
|
value: flag
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var copyMethodDescriptors = function copyMethodDescriptors(target, source) {
|
|||
|
|
if (source) {
|
|||
|
|
// it is possible to use `function-double` to construct an ideal clone, but does not make a sence
|
|||
|
|
var keys = Object.getOwnPropertyNames(source);
|
|||
|
|
|
|||
|
|
keys.forEach(function (key) {
|
|||
|
|
return safeDefineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
safeDefineProperty(target, 'toString', {
|
|||
|
|
configurable: true,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: false,
|
|||
|
|
value: function toString() {
|
|||
|
|
return String(source);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return target;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var knownClassComponents = [];
|
|||
|
|
|
|||
|
|
var forEachKnownClass = function forEachKnownClass(cb) {
|
|||
|
|
return knownClassComponents.forEach(cb);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function createClassProxy(InitialComponent, proxyKey) {
|
|||
|
|
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|||
|
|
|
|||
|
|
var renderOptions = _extends({}, defaultRenderOptions, options);
|
|||
|
|
var proxyConfig = _extends({}, configuration, options.proxy);
|
|||
|
|
// Prevent double wrapping.
|
|||
|
|
// Given a proxy class, return the existing proxy managing it.
|
|||
|
|
var existingProxy = proxies.get(InitialComponent);
|
|||
|
|
|
|||
|
|
if (existingProxy) {
|
|||
|
|
return existingProxy;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var CurrentComponent = void 0;
|
|||
|
|
var savedDescriptors = {};
|
|||
|
|
var injectedMembers = {};
|
|||
|
|
var proxyGeneration = 0;
|
|||
|
|
var classUpdatePostponed = null;
|
|||
|
|
var instancesCount = 0;
|
|||
|
|
var isFunctionalComponent = !isReactClass(InitialComponent);
|
|||
|
|
|
|||
|
|
var lastInstance = null;
|
|||
|
|
|
|||
|
|
function postConstructionAction() {
|
|||
|
|
this[GENERATION] = 0;
|
|||
|
|
|
|||
|
|
lastInstance = this;
|
|||
|
|
// is there is an update pending
|
|||
|
|
if (classUpdatePostponed) {
|
|||
|
|
var callUpdate = classUpdatePostponed;
|
|||
|
|
classUpdatePostponed = null;
|
|||
|
|
callUpdate();
|
|||
|
|
}
|
|||
|
|
// As long we can't override constructor
|
|||
|
|
// every class shall evolve from a base class
|
|||
|
|
inject(this, proxyGeneration, injectedMembers);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function proxiedUpdate() {
|
|||
|
|
if (this) {
|
|||
|
|
inject(this, proxyGeneration, injectedMembers);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function lifeCycleWrapperFactory(wrapperName) {
|
|||
|
|
var sideEffect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : identity;
|
|||
|
|
|
|||
|
|
return copyMethodDescriptors(function wrappedMethod() {
|
|||
|
|
proxiedUpdate.call(this);
|
|||
|
|
sideEffect(this);
|
|||
|
|
|
|||
|
|
for (var _len = arguments.length, rest = Array(_len), _key = 0; _key < _len; _key++) {
|
|||
|
|
rest[_key] = arguments[_key];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return !isFunctionalComponent && CurrentComponent.prototype[wrapperName] && CurrentComponent.prototype[wrapperName].apply(this, rest);
|
|||
|
|
}, InitialComponent.prototype && InitialComponent.prototype[wrapperName]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function methodWrapperFactory(wrapperName, realMethod) {
|
|||
|
|
return copyMethodDescriptors(function wrappedMethod() {
|
|||
|
|
for (var _len2 = arguments.length, rest = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|||
|
|
rest[_key2] = arguments[_key2];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return realMethod.apply(this, rest);
|
|||
|
|
}, realMethod);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var fakeBasePrototype = function fakeBasePrototype(Proto) {
|
|||
|
|
return filteredPrototypeMethods(Proto).reduce(function (acc, key) {
|
|||
|
|
acc[key] = methodWrapperFactory(key, Proto[key]);
|
|||
|
|
return acc;
|
|||
|
|
}, {});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var componentDidMount = lifeCycleWrapperFactory('componentDidMount', function (target) {
|
|||
|
|
target[PROXY_IS_MOUNTED] = true;
|
|||
|
|
target[RENDERED_GENERATION] = get$1();
|
|||
|
|
instancesCount++;
|
|||
|
|
});
|
|||
|
|
var componentDidUpdate = lifeCycleWrapperFactory('componentDidUpdate', renderOptions.componentDidUpdate);
|
|||
|
|
var componentWillUnmount = lifeCycleWrapperFactory('componentWillUnmount', function (target) {
|
|||
|
|
target[PROXY_IS_MOUNTED] = false;
|
|||
|
|
instancesCount--;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function hotComponentRender() {
|
|||
|
|
// repeating subrender call to keep RENDERED_GENERATION up to date
|
|||
|
|
renderOptions.componentWillRender(this);
|
|||
|
|
proxiedUpdate.call(this);
|
|||
|
|
var result = void 0;
|
|||
|
|
|
|||
|
|
// We need to use hasOwnProperty here, as the cached result is a React node
|
|||
|
|
// and can be null or some other falsy value.
|
|||
|
|
if (has.call(this, CACHED_RESULT)) {
|
|||
|
|
result = this[CACHED_RESULT];
|
|||
|
|
delete this[CACHED_RESULT];
|
|||
|
|
} else if (isFunctionalComponent) {
|
|||
|
|
result = CurrentComponent(this.props, this.context);
|
|||
|
|
} else {
|
|||
|
|
var renderMethod = CurrentComponent.prototype.render || this.render;
|
|||
|
|
/* eslint-disable no-use-before-define */
|
|||
|
|
if (renderMethod === proxiedRender) {
|
|||
|
|
throw new Error('React-Hot-Loader: you are trying to render Component without .render method');
|
|||
|
|
}
|
|||
|
|
/* eslint-enable */
|
|||
|
|
result = renderMethod.apply(this,
|
|||
|
|
// eslint-disable-next-line prefer-rest-params
|
|||
|
|
arguments);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return renderOptions.componentDidRender.call(this, result);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hotComponentUpdate() {
|
|||
|
|
renderOptions.componentWillRender(this);
|
|||
|
|
proxiedUpdate.call(this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function proxiedRender() {
|
|||
|
|
renderOptions.componentWillRender(this);
|
|||
|
|
|
|||
|
|
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|||
|
|
args[_key3] = arguments[_key3];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return hotComponentRender.call.apply(hotComponentRender, [this].concat(args));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var defineProxyMethods = function defineProxyMethods(Proxy) {
|
|||
|
|
var Base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|||
|
|
|
|||
|
|
defineClassMembers(Proxy, _extends({}, fakeBasePrototype(Base), proxyConfig.pureRender ? {} : { render: proxiedRender }, {
|
|||
|
|
hotComponentRender: hotComponentRender,
|
|||
|
|
hotComponentUpdate: hotComponentUpdate,
|
|||
|
|
componentDidMount: componentDidMount,
|
|||
|
|
componentDidUpdate: componentDidUpdate,
|
|||
|
|
componentWillUnmount: componentWillUnmount
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var _ProxyFacade = void 0;
|
|||
|
|
var ProxyComponent = null;
|
|||
|
|
var proxy = void 0;
|
|||
|
|
|
|||
|
|
if (!isFunctionalComponent) {
|
|||
|
|
// Component
|
|||
|
|
ProxyComponent = proxyClassCreator(InitialComponent, postConstructionAction);
|
|||
|
|
|
|||
|
|
defineProxyMethods(ProxyComponent, InitialComponent.prototype);
|
|||
|
|
|
|||
|
|
knownClassComponents.push(ProxyComponent);
|
|||
|
|
|
|||
|
|
_ProxyFacade = ProxyComponent;
|
|||
|
|
} else if (!proxyConfig.allowSFC) {
|
|||
|
|
proxyConfig.pureRender = false;
|
|||
|
|
// SFC Converted to component. Does not support returning precreated instances from render.
|
|||
|
|
ProxyComponent = proxyClassCreator(React.Component, postConstructionAction);
|
|||
|
|
|
|||
|
|
defineProxyMethods(ProxyComponent);
|
|||
|
|
_ProxyFacade = ProxyComponent;
|
|||
|
|
} else {
|
|||
|
|
// SFC
|
|||
|
|
|
|||
|
|
// This function only gets called for the initial mount. The actual
|
|||
|
|
// rendered component instance will be the return value.
|
|||
|
|
|
|||
|
|
// eslint-disable-next-line func-names
|
|||
|
|
_ProxyFacade = function ProxyFacade(props, context) {
|
|||
|
|
/*
|
|||
|
|
! THIS IS NOT YOUR COMPONENT !
|
|||
|
|
! THIS IS REACT-HOT-LOADER !
|
|||
|
|
And you are probably looking for a function component of yours
|
|||
|
|
It's hidden, but there is a way to fix this - just reconfigure your application a bit
|
|||
|
|
see https://github.com/gaearon/react-hot-loader/issues/1311
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
var result = CurrentComponent(props, context);
|
|||
|
|
|
|||
|
|
// This is a Relay-style container constructor. We can't do the prototype-
|
|||
|
|
// style wrapping for this as we do elsewhere, so just we just pass it
|
|||
|
|
// through as-is.
|
|||
|
|
if (isReactClassInstance(result)) {
|
|||
|
|
ProxyComponent = null;
|
|||
|
|
|
|||
|
|
// Relay lazily sets statics like getDerivedStateFromProps on initial
|
|||
|
|
// render in lazy construction, so we need to do the same here.
|
|||
|
|
transferStaticProps(_ProxyFacade, savedDescriptors, null, CurrentComponent);
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// simple SFC, could continue to be SFC
|
|||
|
|
if (proxyConfig.pureSFC) {
|
|||
|
|
if (!CurrentComponent.contextTypes) {
|
|||
|
|
if (!_ProxyFacade.isStatelessFunctionalProxy) {
|
|||
|
|
setSFPFlag(_ProxyFacade, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return renderOptions.componentDidRender(result);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setSFPFlag(_ProxyFacade, false);
|
|||
|
|
proxyConfig.pureRender = false;
|
|||
|
|
|
|||
|
|
// Otherwise, it's a normal functional component. Build the real proxy
|
|||
|
|
// and use it going forward.
|
|||
|
|
ProxyComponent = proxyClassCreator(React.Component, postConstructionAction);
|
|||
|
|
|
|||
|
|
defineProxyMethods(ProxyComponent);
|
|||
|
|
|
|||
|
|
var determinateResult = new ProxyComponent(props, context);
|
|||
|
|
|
|||
|
|
// Cache the initial render result so we don't call the component function
|
|||
|
|
// a second time for the initial render.
|
|||
|
|
determinateResult[CACHED_RESULT] = result;
|
|||
|
|
return determinateResult;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function get$$1() {
|
|||
|
|
return _ProxyFacade;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getCurrent() {
|
|||
|
|
return CurrentComponent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
safeDefineProperty(_ProxyFacade, UNWRAP_PROXY, {
|
|||
|
|
configurable: false,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: false,
|
|||
|
|
value: getCurrent
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
safeDefineProperty(_ProxyFacade, PROXY_KEY, {
|
|||
|
|
configurable: false,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: false,
|
|||
|
|
value: proxyKey
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
safeDefineProperty(_ProxyFacade, 'toString', {
|
|||
|
|
configurable: true,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: false,
|
|||
|
|
value: function toString() {
|
|||
|
|
return String(CurrentComponent);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function update(NextComponent) {
|
|||
|
|
if (typeof NextComponent !== 'function') {
|
|||
|
|
throw new Error('Expected a constructor.');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (NextComponent === CurrentComponent) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Prevent proxy cycles
|
|||
|
|
var existingProxy = proxies.get(NextComponent);
|
|||
|
|
if (existingProxy) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
isFunctionalComponent = !isReactClass(NextComponent);
|
|||
|
|
|
|||
|
|
proxies.set(NextComponent, proxy);
|
|||
|
|
|
|||
|
|
proxyGeneration++;
|
|||
|
|
|
|||
|
|
// Save the next constructor so we call it
|
|||
|
|
var PreviousComponent = CurrentComponent;
|
|||
|
|
CurrentComponent = NextComponent;
|
|||
|
|
|
|||
|
|
// Try to infer displayName
|
|||
|
|
var displayName = getComponentDisplayName(CurrentComponent);
|
|||
|
|
|
|||
|
|
safeDefineProperty(_ProxyFacade, 'displayName', {
|
|||
|
|
configurable: true,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: true,
|
|||
|
|
value: displayName
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (ProxyComponent) {
|
|||
|
|
safeDefineProperty(ProxyComponent, 'name', {
|
|||
|
|
value: displayName
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
savedDescriptors = transferStaticProps(_ProxyFacade, savedDescriptors, PreviousComponent, NextComponent);
|
|||
|
|
|
|||
|
|
if (isFunctionalComponent || !ProxyComponent) ; else {
|
|||
|
|
var classHotReplacement = function classHotReplacement() {
|
|||
|
|
checkLifeCycleMethods(ProxyComponent, NextComponent);
|
|||
|
|
if (proxyGeneration > 1) {
|
|||
|
|
getElementCloseHook(ProxyComponent);
|
|||
|
|
filteredPrototypeMethods(ProxyComponent.prototype).forEach(function (methodName) {
|
|||
|
|
if (!has.call(NextComponent.prototype, methodName)) {
|
|||
|
|
delete ProxyComponent.prototype[methodName];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
Object.setPrototypeOf(ProxyComponent.prototype, NextComponent.prototype);
|
|||
|
|
defineProxyMethods(ProxyComponent, NextComponent.prototype);
|
|||
|
|
if (proxyGeneration > 1) {
|
|||
|
|
injectedMembers = mergeComponents(ProxyComponent, NextComponent, InitialComponent, lastInstance, injectedMembers);
|
|||
|
|
getElementComparisonHook(ProxyComponent);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Was constructed once
|
|||
|
|
if (instancesCount > 0) {
|
|||
|
|
classHotReplacement();
|
|||
|
|
} else {
|
|||
|
|
classUpdatePostponed = classHotReplacement;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
update(InitialComponent);
|
|||
|
|
|
|||
|
|
var dereference = function dereference() {
|
|||
|
|
proxies.delete(InitialComponent);
|
|||
|
|
proxies.delete(_ProxyFacade);
|
|||
|
|
proxies.delete(CurrentComponent);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
proxy = { get: get$$1, update: update, dereference: dereference, getCurrent: function getCurrent() {
|
|||
|
|
return CurrentComponent;
|
|||
|
|
} };
|
|||
|
|
|
|||
|
|
proxies.set(InitialComponent, proxy);
|
|||
|
|
proxies.set(_ProxyFacade, proxy);
|
|||
|
|
|
|||
|
|
safeDefineProperty(proxy, UNWRAP_PROXY, {
|
|||
|
|
configurable: false,
|
|||
|
|
writable: false,
|
|||
|
|
enumerable: false,
|
|||
|
|
value: getCurrent
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return proxy;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// this counter tracks `register` invocations.
|
|||
|
|
// works good, but code splitting is breaking it
|
|||
|
|
var generation = 1;
|
|||
|
|
|
|||
|
|
// these counters are aimed to mitigate the "first render"
|
|||
|
|
var hotComparisonCounter = 0;
|
|||
|
|
var hotComparisonRuns = 0;
|
|||
|
|
var hotReplacementGeneration = 0;
|
|||
|
|
|
|||
|
|
var nullFunction = function nullFunction() {
|
|||
|
|
return {};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// these callbacks would be called on component update
|
|||
|
|
var onHotComparisonOpen = nullFunction;
|
|||
|
|
var onHotComparisonElement = nullFunction;
|
|||
|
|
var onHotComparisonClose = nullFunction;
|
|||
|
|
|
|||
|
|
// inversion of control
|
|||
|
|
var setComparisonHooks = function setComparisonHooks(open, element, close) {
|
|||
|
|
onHotComparisonOpen = open;
|
|||
|
|
onHotComparisonElement = element;
|
|||
|
|
onHotComparisonClose = close;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getElementComparisonHook = function getElementComparisonHook(component) {
|
|||
|
|
return onHotComparisonElement(component);
|
|||
|
|
};
|
|||
|
|
var getElementCloseHook = function getElementCloseHook(component) {
|
|||
|
|
return onHotComparisonClose(component);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hotComparisonOpen = function hotComparisonOpen() {
|
|||
|
|
return hotComparisonCounter > 0 && hotComparisonRuns > 0 && hotReplacementGeneration > 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var openGeneration = function openGeneration() {
|
|||
|
|
return forEachKnownClass(onHotComparisonElement);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var closeGeneration = function closeGeneration() {
|
|||
|
|
return forEachKnownClass(onHotComparisonClose);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var incrementHot = function incrementHot() {
|
|||
|
|
if (!hotComparisonCounter) {
|
|||
|
|
openGeneration();
|
|||
|
|
onHotComparisonOpen();
|
|||
|
|
}
|
|||
|
|
hotComparisonCounter++;
|
|||
|
|
};
|
|||
|
|
var decrementHot = function decrementHot() {
|
|||
|
|
hotComparisonCounter--;
|
|||
|
|
if (!hotComparisonCounter) {
|
|||
|
|
closeGeneration();
|
|||
|
|
hotComparisonRuns++;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// TODO: shall it be called from incrementHotGeneration?
|
|||
|
|
var enterHotUpdate = function enterHotUpdate() {
|
|||
|
|
Promise.resolve(incrementHot()).then(function () {
|
|||
|
|
return setTimeout(decrementHot, 0);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// TODO: deprecate?
|
|||
|
|
var increment = function increment() {
|
|||
|
|
enterHotUpdate();
|
|||
|
|
return generation++;
|
|||
|
|
};
|
|||
|
|
var get$1 = function get() {
|
|||
|
|
return generation;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// These counters tracks HMR generations, and probably should be used instead of the old one
|
|||
|
|
var incrementHotGeneration = function incrementHotGeneration() {
|
|||
|
|
return hotReplacementGeneration++;
|
|||
|
|
};
|
|||
|
|
var getHotGeneration = function getHotGeneration() {
|
|||
|
|
return hotReplacementGeneration;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// some `empty` names, React can autoset display name to...
|
|||
|
|
var UNDEFINED_NAMES = {
|
|||
|
|
Unknown: true,
|
|||
|
|
Component: true
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var areNamesEqual = function areNamesEqual(a, b) {
|
|||
|
|
return a === b || UNDEFINED_NAMES[a] && UNDEFINED_NAMES[b];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var isFunctional = function isFunctional(fn) {
|
|||
|
|
return typeof fn === 'function';
|
|||
|
|
};
|
|||
|
|
var getTypeOf = function getTypeOf(type) {
|
|||
|
|
if (isReactClass(type)) return 'ReactComponent';
|
|||
|
|
if (isFunctional(type)) return 'StatelessFunctional';
|
|||
|
|
return 'Fragment'; // ?
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function clearStringFast(str) {
|
|||
|
|
return str.length < 12 ? str : (' ' + str).slice(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var haveTextSimilarity = function haveTextSimilarity(a, b) {
|
|||
|
|
return (
|
|||
|
|
// equal or slight changed
|
|||
|
|
a === b || levenshtein.get(clearStringFast(a), clearStringFast(b)) < a.length * 0.2
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getBaseProto = function getBaseProto(source) {
|
|||
|
|
return source.prototype.hotComponentRender ? Object.getPrototypeOf(source.prototype) : source.prototype;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var equalClasses = function equalClasses(a, b) {
|
|||
|
|
var prototypeA = getBaseProto(a);
|
|||
|
|
var prototypeB = getBaseProto(b);
|
|||
|
|
|
|||
|
|
var hits = 0;
|
|||
|
|
var misses = 0;
|
|||
|
|
var comparisons = 0;
|
|||
|
|
Object.getOwnPropertyNames(prototypeA).forEach(function (key) {
|
|||
|
|
var descriptorA = Object.getOwnPropertyDescriptor(prototypeA, key);
|
|||
|
|
var valueA = descriptorA && (descriptorA.value || descriptorA.get || descriptorA.set);
|
|||
|
|
var descriptorB = Object.getOwnPropertyDescriptor(prototypeB, key);
|
|||
|
|
var valueB = descriptorB && (descriptorB.value || descriptorB.get || descriptorB.set);
|
|||
|
|
|
|||
|
|
if (typeof valueA === 'function' && key !== 'constructor') {
|
|||
|
|
comparisons++;
|
|||
|
|
if (haveTextSimilarity(String(valueA), String(valueB))) {
|
|||
|
|
hits++;
|
|||
|
|
} else {
|
|||
|
|
misses++;
|
|||
|
|
if (key === 'render') {
|
|||
|
|
misses++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// allow to add or remove one function
|
|||
|
|
return hits > 0 && misses <= 1 || comparisons === 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var areSwappable = function areSwappable(a, b) {
|
|||
|
|
// both are registered components and have the same name
|
|||
|
|
if (getIdByType(b) && getIdByType(a) === getIdByType(b)) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
if (getTypeOf(a) !== getTypeOf(b)) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (isReactClass(a)) {
|
|||
|
|
return areNamesEqual(getComponentDisplayName(a), getComponentDisplayName(b)) && equalClasses(a, b);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isFunctional(a)) {
|
|||
|
|
var nameA = getComponentDisplayName(a);
|
|||
|
|
if (!areNamesEqual(nameA, getComponentDisplayName(b))) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return nameA !== 'Component' || haveTextSimilarity(String(a), String(b));
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function merge() {
|
|||
|
|
var acc = {};
|
|||
|
|
|
|||
|
|
for (var _len = arguments.length, sources = Array(_len), _key = 0; _key < _len; _key++) {
|
|||
|
|
sources[_key] = arguments[_key];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (var _iterator = sources, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
|
|||
|
|
var _ref;
|
|||
|
|
|
|||
|
|
if (_isArray) {
|
|||
|
|
if (_i >= _iterator.length) break;
|
|||
|
|
_ref = _iterator[_i++];
|
|||
|
|
} else {
|
|||
|
|
_i = _iterator.next();
|
|||
|
|
if (_i.done) break;
|
|||
|
|
_ref = _i.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var source = _ref;
|
|||
|
|
|
|||
|
|
if (source instanceof Array) {
|
|||
|
|
if (!(acc instanceof Array)) {
|
|||
|
|
acc = [];
|
|||
|
|
}
|
|||
|
|
acc = [].concat(acc, source);
|
|||
|
|
} else if (source instanceof Object) {
|
|||
|
|
for (var _iterator2 = Object.keys(source), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
|
|||
|
|
var _babelHelpers$extends;
|
|||
|
|
|
|||
|
|
var _ref2;
|
|||
|
|
|
|||
|
|
if (_isArray2) {
|
|||
|
|
if (_i2 >= _iterator2.length) break;
|
|||
|
|
_ref2 = _iterator2[_i2++];
|
|||
|
|
} else {
|
|||
|
|
_i2 = _iterator2.next();
|
|||
|
|
if (_i2.done) break;
|
|||
|
|
_ref2 = _i2.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var key = _ref2;
|
|||
|
|
|
|||
|
|
var value = source[key];
|
|||
|
|
if (value instanceof Object && key in acc) {
|
|||
|
|
value = merge(acc[key], value);
|
|||
|
|
}
|
|||
|
|
acc = _extends({}, acc, (_babelHelpers$extends = {}, _babelHelpers$extends[key] = value, _babelHelpers$extends));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return acc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var signatures = void 0;
|
|||
|
|
var proxiesByID = void 0;
|
|||
|
|
var blackListedProxies = void 0;
|
|||
|
|
var registeredComponents = void 0;
|
|||
|
|
var idsByType = void 0;
|
|||
|
|
|
|||
|
|
var elementCount = 0;
|
|||
|
|
var renderOptions = {};
|
|||
|
|
|
|||
|
|
var componentOptions = void 0;
|
|||
|
|
|
|||
|
|
var generateTypeId = function generateTypeId() {
|
|||
|
|
return 'auto-' + elementCount++;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getIdByType = function getIdByType(type) {
|
|||
|
|
return idsByType.get(type);
|
|||
|
|
};
|
|||
|
|
var isProxyType = function isProxyType(type) {
|
|||
|
|
return type[PROXY_KEY];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getProxyById = function getProxyById(id) {
|
|||
|
|
return proxiesByID[id];
|
|||
|
|
};
|
|||
|
|
var getProxyByType = function getProxyByType(type) {
|
|||
|
|
return getProxyById(getIdByType(type));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var registerComponent = function registerComponent(type) {
|
|||
|
|
return registeredComponents.set(type, 1);
|
|||
|
|
};
|
|||
|
|
var isRegisteredComponent = function isRegisteredComponent(type) {
|
|||
|
|
return registeredComponents.has(type);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var setStandInOptions = function setStandInOptions(options) {
|
|||
|
|
renderOptions = options;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var updateFunctionProxyById = function updateFunctionProxyById(id, type, updater) {
|
|||
|
|
// Remember the ID.
|
|||
|
|
idsByType.set(type, id);
|
|||
|
|
var proxy = proxiesByID[id];
|
|||
|
|
if (!proxy) {
|
|||
|
|
proxiesByID[id] = type;
|
|||
|
|
}
|
|||
|
|
updater(proxiesByID[id], type);
|
|||
|
|
// proxiesByID[id] = type; // keep the first ref
|
|||
|
|
|
|||
|
|
return proxiesByID[id];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var updateProxyById = function updateProxyById(id, type) {
|
|||
|
|
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|||
|
|
|
|||
|
|
if (!id) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
// Remember the ID.
|
|||
|
|
idsByType.set(type, id);
|
|||
|
|
|
|||
|
|
if (!proxiesByID[id]) {
|
|||
|
|
proxiesByID[id] = createClassProxy(type, id, merge({}, renderOptions, { proxy: componentOptions.get(type) || {} }, options));
|
|||
|
|
} else if (proxiesByID[id].update(type)) {
|
|||
|
|
// proxy could be registered again only in case of HMR
|
|||
|
|
incrementHotGeneration();
|
|||
|
|
}
|
|||
|
|
return proxiesByID[id];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var createProxyForType = function createProxyForType(type, options) {
|
|||
|
|
return getProxyByType(type) || updateProxyById(generateTypeId(), type, options);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var isColdType = function isColdType(type) {
|
|||
|
|
return blackListedProxies.has(type);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var isTypeBlacklisted = function isTypeBlacklisted(type) {
|
|||
|
|
return isColdType(type) || isCompositeComponent(type) && (configuration.ignoreSFC && !isReactClass(type) || configuration.ignoreComponents && isReactClass(type));
|
|||
|
|
};
|
|||
|
|
var blacklistByType = function blacklistByType(type) {
|
|||
|
|
return blackListedProxies.set(type, true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var setComponentOptions = function setComponentOptions(component, options) {
|
|||
|
|
return componentOptions.set(component, options);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var addSignature = function addSignature(type, signature) {
|
|||
|
|
return signatures.set(type, signature);
|
|||
|
|
};
|
|||
|
|
var getSignature = function getSignature(type) {
|
|||
|
|
return signatures.get(type);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var resetProxies = function resetProxies() {
|
|||
|
|
proxiesByID = {};
|
|||
|
|
idsByType = new WeakMap();
|
|||
|
|
blackListedProxies = new WeakMap();
|
|||
|
|
registeredComponents = new WeakMap();
|
|||
|
|
componentOptions = new WeakMap();
|
|||
|
|
signatures = new WeakMap();
|
|||
|
|
resetClassProxies();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
resetProxies();
|
|||
|
|
|
|||
|
|
var tune = {
|
|||
|
|
allowSFC: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var preactAdapter = function preactAdapter(instance, resolveType) {
|
|||
|
|
var oldHandler = instance.options.vnode;
|
|||
|
|
|
|||
|
|
setConfiguration(tune);
|
|||
|
|
|
|||
|
|
instance.options.vnode = function (vnode) {
|
|||
|
|
if (vnode.type) {
|
|||
|
|
vnode.type = resolveType(vnode.type);
|
|||
|
|
} else if (vnode.nodeName) {
|
|||
|
|
vnode.nodeName = resolveType(vnode.nodeName);
|
|||
|
|
}
|
|||
|
|
if (oldHandler) {
|
|||
|
|
oldHandler(vnode);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* global document */
|
|||
|
|
|
|||
|
|
var lastError = [];
|
|||
|
|
|
|||
|
|
var overlayStyle = {
|
|||
|
|
position: 'fixed',
|
|||
|
|
left: 0,
|
|||
|
|
top: 0,
|
|||
|
|
right: 0,
|
|||
|
|
|
|||
|
|
backgroundColor: 'rgba(255,200,200,0.9)',
|
|||
|
|
|
|||
|
|
color: '#000',
|
|||
|
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
|
|||
|
|
fontSize: '12px',
|
|||
|
|
margin: 0,
|
|||
|
|
padding: '16px',
|
|||
|
|
maxHeight: '50%',
|
|||
|
|
overflow: 'auto',
|
|||
|
|
zIndex: 10000
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var inlineErrorStyle = {
|
|||
|
|
backgroundColor: '#FEE'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var liCounter = {
|
|||
|
|
position: 'absolute',
|
|||
|
|
left: '10px'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var listStyle = {};
|
|||
|
|
|
|||
|
|
var EmptyErrorPlaceholder = function EmptyErrorPlaceholder(_ref) {
|
|||
|
|
var component = _ref.component;
|
|||
|
|
return React__default.createElement(
|
|||
|
|
'span',
|
|||
|
|
{ style: inlineErrorStyle, role: 'img', 'aria-label': 'Rect-Hot-Loader Error' },
|
|||
|
|
'\u269B\uFE0F\uD83D\uDD25\uD83E\uDD15 (',
|
|||
|
|
component ? getComponentDisplayName(component.constructor || component) : 'Unknown location',
|
|||
|
|
')',
|
|||
|
|
component && component.retryHotLoaderError && React__default.createElement(
|
|||
|
|
'button',
|
|||
|
|
{ onClick: function onClick() {
|
|||
|
|
return component.retryHotLoaderError();
|
|||
|
|
}, title: 'Retry' },
|
|||
|
|
'\u27F3'
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var errorHeader = function errorHeader(component, componentStack) {
|
|||
|
|
if (component || componentStack) {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
'span',
|
|||
|
|
null,
|
|||
|
|
'(',
|
|||
|
|
component ? getComponentDisplayName(component.constructor || component) : 'Unknown location',
|
|||
|
|
component && ', ',
|
|||
|
|
componentStack && componentStack.split('\n').filter(Boolean)[0],
|
|||
|
|
')'
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var mapError = function mapError(_ref2) {
|
|||
|
|
var error = _ref2.error,
|
|||
|
|
errorInfo = _ref2.errorInfo,
|
|||
|
|
component = _ref2.component;
|
|||
|
|
|
|||
|
|
if (!error) {
|
|||
|
|
error = { message: 'undefined error' };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return React__default.createElement(
|
|||
|
|
React__default.Fragment,
|
|||
|
|
null,
|
|||
|
|
React__default.createElement(
|
|||
|
|
'p',
|
|||
|
|
{ style: { color: 'red' } },
|
|||
|
|
errorHeader(component, errorInfo && errorInfo.componentStack),
|
|||
|
|
' ',
|
|||
|
|
error.toString ? error.toString() : error && error.message || 'undefined error'
|
|||
|
|
),
|
|||
|
|
errorInfo && errorInfo.componentStack ? React__default.createElement(
|
|||
|
|
'div',
|
|||
|
|
null,
|
|||
|
|
React__default.createElement(
|
|||
|
|
'div',
|
|||
|
|
null,
|
|||
|
|
'Stack trace:'
|
|||
|
|
),
|
|||
|
|
React__default.createElement(
|
|||
|
|
'ul',
|
|||
|
|
{ style: { color: 'red', marginTop: '10px' } },
|
|||
|
|
error.stack.split('\n').slice(1, 2).map(function (line, i) {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
'li',
|
|||
|
|
{ key: String(i) },
|
|||
|
|
line
|
|||
|
|
);
|
|||
|
|
}),
|
|||
|
|
React__default.createElement('hr', null),
|
|||
|
|
errorInfo.componentStack.split('\n').filter(Boolean).map(function (line, i) {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
'li',
|
|||
|
|
{ key: String(i) },
|
|||
|
|
line
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
) : error.stack && React__default.createElement(
|
|||
|
|
'div',
|
|||
|
|
null,
|
|||
|
|
React__default.createElement(
|
|||
|
|
'div',
|
|||
|
|
null,
|
|||
|
|
'Stack trace:'
|
|||
|
|
),
|
|||
|
|
React__default.createElement(
|
|||
|
|
'ul',
|
|||
|
|
{ style: { color: 'red', marginTop: '10px' } },
|
|||
|
|
error.stack.split('\n').map(function (line, i) {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
'li',
|
|||
|
|
{ key: String(i) },
|
|||
|
|
line
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var ErrorOverlay = function (_React$Component) {
|
|||
|
|
inherits(ErrorOverlay, _React$Component);
|
|||
|
|
|
|||
|
|
function ErrorOverlay() {
|
|||
|
|
var _temp, _this, _ret;
|
|||
|
|
|
|||
|
|
classCallCheck(this, ErrorOverlay);
|
|||
|
|
|
|||
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|||
|
|
args[_key] = arguments[_key];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
|
|||
|
|
visible: true
|
|||
|
|
}, _this.toggle = function () {
|
|||
|
|
return _this.setState({ visible: !_this.state.visible });
|
|||
|
|
}, _this.retry = function () {
|
|||
|
|
return _this.setState(function () {
|
|||
|
|
var errors = _this.props.errors;
|
|||
|
|
|
|||
|
|
enterHotUpdate();
|
|||
|
|
clearExceptions();
|
|||
|
|
errors.map(function (_ref3) {
|
|||
|
|
var component = _ref3.component;
|
|||
|
|
return component;
|
|||
|
|
}).filter(Boolean).filter(function (_ref4) {
|
|||
|
|
var retryHotLoaderError = _ref4.retryHotLoaderError;
|
|||
|
|
return !!retryHotLoaderError;
|
|||
|
|
}).forEach(function (component) {
|
|||
|
|
return component.retryHotLoaderError();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {};
|
|||
|
|
});
|
|||
|
|
}, _temp), possibleConstructorReturn(_this, _ret);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ErrorOverlay.prototype.render = function render() {
|
|||
|
|
var errors = this.props.errors;
|
|||
|
|
|
|||
|
|
if (!errors.length) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
var visible = this.state.visible;
|
|||
|
|
|
|||
|
|
return React__default.createElement(
|
|||
|
|
'div',
|
|||
|
|
{ style: overlayStyle },
|
|||
|
|
React__default.createElement(
|
|||
|
|
'h2',
|
|||
|
|
{ style: { margin: 0 } },
|
|||
|
|
'\u269B\uFE0F\uD83D\uDD25\uD83D\uDE2D: hot update was not successful ',
|
|||
|
|
React__default.createElement(
|
|||
|
|
'button',
|
|||
|
|
{ onClick: this.toggle },
|
|||
|
|
visible ? 'collapse' : 'expand'
|
|||
|
|
),
|
|||
|
|
React__default.createElement(
|
|||
|
|
'button',
|
|||
|
|
{ onClick: this.retry },
|
|||
|
|
'Retry'
|
|||
|
|
)
|
|||
|
|
),
|
|||
|
|
visible && React__default.createElement(
|
|||
|
|
'ul',
|
|||
|
|
{ style: listStyle },
|
|||
|
|
errors.map(function (err, i) {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
'li',
|
|||
|
|
{ key: i },
|
|||
|
|
React__default.createElement(
|
|||
|
|
'span',
|
|||
|
|
{ style: liCounter },
|
|||
|
|
'(',
|
|||
|
|
i + 1,
|
|||
|
|
'/',
|
|||
|
|
errors.length,
|
|||
|
|
')'
|
|||
|
|
),
|
|||
|
|
mapError(err)
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return ErrorOverlay;
|
|||
|
|
}(React__default.Component);
|
|||
|
|
|
|||
|
|
var initErrorOverlay = function initErrorOverlay() {
|
|||
|
|
if (typeof document === 'undefined' || !document.body) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var div = document.querySelector('.react-hot-loader-error-overlay');
|
|||
|
|
if (!div) {
|
|||
|
|
div = document.createElement('div');
|
|||
|
|
div.className = 'react-hot-loader-error-overlay';
|
|||
|
|
document.body.appendChild(div);
|
|||
|
|
}
|
|||
|
|
if (lastError.length) {
|
|||
|
|
var Overlay = configuration.ErrorOverlay || ErrorOverlay;
|
|||
|
|
ReactDOM.render(React__default.createElement(Overlay, { errors: lastError }), div);
|
|||
|
|
} else {
|
|||
|
|
div.parentNode.removeChild(div);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function clearExceptions() {
|
|||
|
|
if (lastError.length) {
|
|||
|
|
lastError = [];
|
|||
|
|
initErrorOverlay();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function logException(error, errorInfo, component) {
|
|||
|
|
// do not suppress error
|
|||
|
|
|
|||
|
|
/* eslint-disable no-console */
|
|||
|
|
console.error(error);
|
|||
|
|
/* eslint-enable */
|
|||
|
|
|
|||
|
|
lastError.push({ error: error, errorInfo: errorInfo, component: component });
|
|||
|
|
initErrorOverlay();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* eslint-disable no-underscore-dangle */
|
|||
|
|
|
|||
|
|
var hotRenderWithHooks = ReactDOM.hotRenderWithHooks || function (fiber, render) {
|
|||
|
|
return render();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function pushStack(stack, node) {
|
|||
|
|
stack.type = node.type;
|
|||
|
|
stack.elementType = node.elementType || node.type;
|
|||
|
|
stack.children = [];
|
|||
|
|
stack.instance = typeof node.type === 'function' ? node.stateNode : stack;
|
|||
|
|
stack.fiber = node;
|
|||
|
|
|
|||
|
|
if (!stack.instance) {
|
|||
|
|
stack.instance = {
|
|||
|
|
SFC_fake: stack.type,
|
|||
|
|
props: {},
|
|||
|
|
render: function render() {
|
|||
|
|
return hotRenderWithHooks(node, function () {
|
|||
|
|
return stack.type(stack.instance.props);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hydrateFiberStack(node, stack) {
|
|||
|
|
pushStack(stack, node);
|
|||
|
|
if (node.child) {
|
|||
|
|
var child = node.child;
|
|||
|
|
|
|||
|
|
do {
|
|||
|
|
var childStack = {};
|
|||
|
|
hydrateFiberStack(child, childStack);
|
|||
|
|
stack.children.push(childStack);
|
|||
|
|
child = child.sibling;
|
|||
|
|
} while (child);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* eslint-disable no-underscore-dangle */
|
|||
|
|
|
|||
|
|
function pushState(stack, type, instance) {
|
|||
|
|
stack.type = type;
|
|||
|
|
stack.elementType = type;
|
|||
|
|
stack.children = [];
|
|||
|
|
stack.instance = instance || stack;
|
|||
|
|
|
|||
|
|
if (typeof type === 'function' && type.isStatelessFunctionalProxy) {
|
|||
|
|
// In React 15 SFC is wrapped by component. We have to detect our proxies and change the way it works
|
|||
|
|
stack.instance = {
|
|||
|
|
SFC_fake: type,
|
|||
|
|
props: {},
|
|||
|
|
render: function render() {
|
|||
|
|
return type(stack.instance.props);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hydrateLegacyStack(node, stack) {
|
|||
|
|
if (node._currentElement) {
|
|||
|
|
pushState(stack, node._currentElement.type, node._instance || stack);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (node._renderedComponent) {
|
|||
|
|
var childStack = {};
|
|||
|
|
hydrateLegacyStack(node._renderedComponent, childStack);
|
|||
|
|
stack.children.push(childStack);
|
|||
|
|
} else if (node._renderedChildren) {
|
|||
|
|
Object.keys(node._renderedChildren).forEach(function (key) {
|
|||
|
|
var childStack = {};
|
|||
|
|
hydrateLegacyStack(node._renderedChildren[key], childStack);
|
|||
|
|
stack.children.push(childStack);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var shouldNotPatchComponent = function shouldNotPatchComponent(type) {
|
|||
|
|
return isTypeBlacklisted(type);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function resolveUtility(type) {
|
|||
|
|
// all "utility" types are resolved to their __initial__ shapes
|
|||
|
|
// that enables to never change reference to them, and gives the ability to maintain React Tree on HMR
|
|||
|
|
|
|||
|
|
// all operations could be skipped with react-hot-dom enabled
|
|||
|
|
|
|||
|
|
if ((typeof type === 'undefined' ? 'undefined' : _typeof(type)) === 'object') {
|
|||
|
|
if (configuration.integratedComparator) {
|
|||
|
|
return type;
|
|||
|
|
}
|
|||
|
|
var element = { type: type };
|
|||
|
|
if (isLazyType(element) || isMemoType(element) || isForwardType(element) || isContextType(element)) {
|
|||
|
|
return getProxyByType(type) || type;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resolveComponent(type) {
|
|||
|
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|||
|
|
|
|||
|
|
var existingProxy = getProxyByType(type);
|
|||
|
|
|
|||
|
|
// cold API
|
|||
|
|
if (shouldNotPatchComponent(type)) {
|
|||
|
|
return existingProxy ? existingProxy.getCurrent() : type;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!existingProxy && configuration.onComponentCreate) {
|
|||
|
|
configuration.onComponentCreate(type, getComponentDisplayName(type));
|
|||
|
|
if (shouldNotPatchComponent(type)) {
|
|||
|
|
return type;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var proxy = internalConfiguration.disableProxyCreation ? existingProxy : createProxyForType(type, options);
|
|||
|
|
|
|||
|
|
return proxy ? proxy.get() : undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resolveProxy(type) {
|
|||
|
|
if (isProxyType(type)) {
|
|||
|
|
return type;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resolveNotComponent(type) {
|
|||
|
|
if (!isCompositeComponent(type)) {
|
|||
|
|
return type;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var getLatestTypeVersion = function getLatestTypeVersion(type) {
|
|||
|
|
var existingProxy = getProxyByType(type);
|
|||
|
|
return existingProxy && existingProxy.getCurrent && existingProxy.getCurrent();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var resolveSimpleType = function resolveSimpleType(type) {
|
|||
|
|
if (!type) {
|
|||
|
|
return type;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var simpleResult = resolveProxy(type) || resolveUtility(type) || resolveNotComponent(type);
|
|||
|
|
if (simpleResult) {
|
|||
|
|
return simpleResult;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var lastType = getLatestTypeVersion(type);
|
|||
|
|
|
|||
|
|
// only lazy loaded components any now failing into this branch
|
|||
|
|
|
|||
|
|
// if (lastType && lastType !== type) {
|
|||
|
|
// console.warn('RHL: used type', type, 'is obsolete. Something is wrong with HMR.');
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
return lastType || type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var resolveType = function resolveType(type) {
|
|||
|
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|||
|
|
|
|||
|
|
if (!type) {
|
|||
|
|
return type;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return resolveProxy(type) || resolveUtility(type) || resolveNotComponent(type) || resolveComponent(type, options) || type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* eslint-disable no-underscore-dangle */
|
|||
|
|
|
|||
|
|
function getReactStack(instance) {
|
|||
|
|
var rootNode = getInternalInstance(instance);
|
|||
|
|
var stack = {};
|
|||
|
|
if (rootNode) {
|
|||
|
|
// React stack
|
|||
|
|
var isFiber = typeof rootNode.tag === 'number';
|
|||
|
|
if (isFiber) {
|
|||
|
|
hydrateFiberStack(rootNode, stack);
|
|||
|
|
} else {
|
|||
|
|
hydrateLegacyStack(rootNode, stack);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return stack;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var markUpdate = function markUpdate(_ref) {
|
|||
|
|
var fiber = _ref.fiber;
|
|||
|
|
|
|||
|
|
// do not update what we should not
|
|||
|
|
if (!fiber || typeof fiber.type === 'string') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var mostResentType = resolveType(fiber.type) || fiber.type;
|
|||
|
|
fiber.type = mostResentType;
|
|||
|
|
// do not change fiber.elementType to keep old information for the hot-update
|
|||
|
|
|
|||
|
|
fiber.expirationTime = 1;
|
|||
|
|
if (fiber.alternate) {
|
|||
|
|
fiber.alternate.expirationTime = 1;
|
|||
|
|
fiber.alternate.type = fiber.type;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (fiber.memoizedProps && _typeof(fiber.memoizedProps) === 'object') {
|
|||
|
|
fiber.memoizedProps = _extends({
|
|||
|
|
cacheBusterProp: true
|
|||
|
|
}, fiber.memoizedProps);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (fiber.stateNode) ;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var cleanupReact = function cleanupReact() {
|
|||
|
|
if (ReactDOM.hotCleanup) {
|
|||
|
|
ReactDOM.hotCleanup();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var deepMarkUpdate = function deepMarkUpdate(stack) {
|
|||
|
|
markUpdate(stack);
|
|||
|
|
if (stack.children) {
|
|||
|
|
stack.children.forEach(deepMarkUpdate);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var renderStack = [];
|
|||
|
|
|
|||
|
|
var stackReport = function stackReport() {
|
|||
|
|
var rev = renderStack.slice().reverse();
|
|||
|
|
logger.warn('in', rev[0].name, rev);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var emptyMap = new Map();
|
|||
|
|
var stackContext = function stackContext() {
|
|||
|
|
return (renderStack[renderStack.length - 1] || {}).context || emptyMap;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var shouldUseRenderMethod = function shouldUseRenderMethod(fn) {
|
|||
|
|
return fn && (isReactClassInstance(fn) || fn.SFC_fake);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getElementType$1 = function getElementType$$1(child) {
|
|||
|
|
return child.type[UNWRAP_PROXY] ? child.type[UNWRAP_PROXY]() : child.type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var filterNullArray = function filterNullArray(a) {
|
|||
|
|
if (!a) return [];
|
|||
|
|
return a.filter(function (x) {
|
|||
|
|
return !!x;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var unflatten = function unflatten(a) {
|
|||
|
|
return a.reduce(function (acc, a) {
|
|||
|
|
if (Array.isArray(a)) {
|
|||
|
|
acc.push.apply(acc, unflatten(a));
|
|||
|
|
} else {
|
|||
|
|
acc.push(a);
|
|||
|
|
}
|
|||
|
|
return acc;
|
|||
|
|
}, []);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var isArray = function isArray(fn) {
|
|||
|
|
return Array.isArray(fn);
|
|||
|
|
};
|
|||
|
|
var asArray = function asArray(a) {
|
|||
|
|
return isArray(a) ? a : [a];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var render = function render(component, stack) {
|
|||
|
|
if (!component) {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
if (component.hotComponentUpdate) {
|
|||
|
|
component.hotComponentUpdate();
|
|||
|
|
}
|
|||
|
|
if (shouldUseRenderMethod(component)) {
|
|||
|
|
// not calling real render method to prevent call recursion.
|
|||
|
|
// stateless components does not have hotComponentRender
|
|||
|
|
return component.hotComponentRender ? component.hotComponentRender() : component.render();
|
|||
|
|
}
|
|||
|
|
if (isForwardType(component)) {
|
|||
|
|
// render forward type in a sandbox
|
|||
|
|
return hotRenderWithHooks(stack.fiber, function () {
|
|||
|
|
return component.type.render(component.props, null);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if (isArray(component)) {
|
|||
|
|
return component.map(render);
|
|||
|
|
}
|
|||
|
|
if (component.children) {
|
|||
|
|
return component.children;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return [];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var NO_CHILDREN = { children: [] };
|
|||
|
|
var mapChildren = function mapChildren(children, instances) {
|
|||
|
|
return {
|
|||
|
|
children: children.filter(function (c) {
|
|||
|
|
return c;
|
|||
|
|
}).map(function (child, index) {
|
|||
|
|
if ((typeof child === 'undefined' ? 'undefined' : _typeof(child)) !== 'object' || child.isMerged) {
|
|||
|
|
return child;
|
|||
|
|
}
|
|||
|
|
var instanceLine = instances[index] || {};
|
|||
|
|
var oldChildren = asArray(instanceLine.children || []);
|
|||
|
|
|
|||
|
|
if (Array.isArray(child)) {
|
|||
|
|
return _extends({
|
|||
|
|
type: null
|
|||
|
|
}, mapChildren(child, oldChildren));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var newChildren = asArray(child.props && child.props.children || child.children || []);
|
|||
|
|
var nextChildren = child.type !== 'function' && oldChildren.length && mapChildren(newChildren, oldChildren);
|
|||
|
|
|
|||
|
|
return _extends({
|
|||
|
|
nextProps: child.props,
|
|||
|
|
isMerged: true
|
|||
|
|
}, instanceLine, nextChildren || {}, {
|
|||
|
|
type: child.type
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var mergeInject = function mergeInject(a, b, instance) {
|
|||
|
|
if (a && !Array.isArray(a)) {
|
|||
|
|
return mergeInject([a], b);
|
|||
|
|
}
|
|||
|
|
if (b && !Array.isArray(b)) {
|
|||
|
|
return mergeInject(a, [b]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!a || !b) {
|
|||
|
|
return NO_CHILDREN;
|
|||
|
|
}
|
|||
|
|
if (a.length === b.length) {
|
|||
|
|
return mapChildren(a, b);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// in some cases (no confidence here) B could contain A except null children
|
|||
|
|
// in some cases - could not.
|
|||
|
|
// this depends on React version and the way you build component.
|
|||
|
|
|
|||
|
|
var nonNullA = filterNullArray(a);
|
|||
|
|
if (nonNullA.length === b.length) {
|
|||
|
|
return mapChildren(nonNullA, b);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var flatA = unflatten(nonNullA);
|
|||
|
|
var flatB = unflatten(b);
|
|||
|
|
if (flatA.length === flatB.length) {
|
|||
|
|
return mapChildren(flatA, flatB);
|
|||
|
|
}
|
|||
|
|
if (flatB.length === 0 && flatA.length === 1 && _typeof(flatA[0]) !== 'object') ; else if (!configuration.IS_REACT_MERGE_ENABLED) {
|
|||
|
|
logger.warn('React-hot-loader: unable to merge ', a, 'and children of ', instance);
|
|||
|
|
stackReport();
|
|||
|
|
}
|
|||
|
|
return NO_CHILDREN;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var transformFlowNode = function transformFlowNode(flow) {
|
|||
|
|
return flow.reduce(function (acc, node) {
|
|||
|
|
if (node && isFragmentNode(node)) {
|
|||
|
|
if (node.props && node.props.children) {
|
|||
|
|
return [].concat(acc, filterNullArray(asArray(node.props.children)));
|
|||
|
|
}
|
|||
|
|
if (node.children) {
|
|||
|
|
return [].concat(acc, filterNullArray(asArray(node.children)));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return [].concat(acc, [node]);
|
|||
|
|
}, []);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var scheduledUpdates = [];
|
|||
|
|
var scheduledUpdate = 0;
|
|||
|
|
|
|||
|
|
var flushScheduledUpdates = function flushScheduledUpdates() {
|
|||
|
|
var instances = scheduledUpdates;
|
|||
|
|
scheduledUpdates = [];
|
|||
|
|
scheduledUpdate = 0;
|
|||
|
|
instances.forEach(function (instance) {
|
|||
|
|
return instance[PROXY_IS_MOUNTED] && updateInstance(instance);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var unscheduleUpdate = function unscheduleUpdate(instance) {
|
|||
|
|
scheduledUpdates = scheduledUpdates.filter(function (inst) {
|
|||
|
|
return inst !== instance;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var scheduleInstanceUpdate = function scheduleInstanceUpdate(instance) {
|
|||
|
|
scheduledUpdates.push(instance);
|
|||
|
|
if (!scheduledUpdate) {
|
|||
|
|
scheduledUpdate = setTimeout(flushScheduledUpdates, 4);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hotReplacementRender = function hotReplacementRender(instance, stack) {
|
|||
|
|
if (isReactClassInstance(instance)) {
|
|||
|
|
var type = getElementType$1(stack);
|
|||
|
|
|
|||
|
|
renderStack.push({
|
|||
|
|
name: getComponentDisplayName(type),
|
|||
|
|
type: type,
|
|||
|
|
props: stack.instance.props,
|
|||
|
|
context: stackContext()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
var flow = transformFlowNode(filterNullArray(asArray(render(instance, stack))));
|
|||
|
|
|
|||
|
|
var children = stack.children;
|
|||
|
|
|
|||
|
|
|
|||
|
|
flow.forEach(function (child, index) {
|
|||
|
|
var childType = child.type;
|
|||
|
|
var stackChild = children[index];
|
|||
|
|
var next = function next(instance) {
|
|||
|
|
// copy over props as long new component may be hidden inside them
|
|||
|
|
// child does not have all props, as long some of them can be calculated on componentMount.
|
|||
|
|
var realProps = instance.props;
|
|||
|
|
var nextProps = _extends({}, realProps, child.nextProps || {}, child.props || {});
|
|||
|
|
|
|||
|
|
if (isReactClassInstance(instance) && instance.componentWillUpdate) {
|
|||
|
|
// Force-refresh component (bypass redux renderedComponent)
|
|||
|
|
instance.componentWillUpdate(_extends({}, realProps), instance.state);
|
|||
|
|
}
|
|||
|
|
instance.props = nextProps;
|
|||
|
|
hotReplacementRender(instance, stackChild);
|
|||
|
|
instance.props = realProps;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// text node
|
|||
|
|
if ((typeof child === 'undefined' ? 'undefined' : _typeof(child)) !== 'object' || !stackChild || !stackChild.instance) {
|
|||
|
|
if (stackChild && stackChild.children && stackChild.children.length) {
|
|||
|
|
logger.error('React-hot-loader: reconciliation failed', 'could not dive into [', child, '] while some elements are still present in the tree.');
|
|||
|
|
stackReport();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// comparing rendered type to fiber.ElementType
|
|||
|
|
if ((typeof childType === 'undefined' ? 'undefined' : _typeof(childType)) !== _typeof(stackChild.elementType)) {
|
|||
|
|
// Portals could generate undefined !== null
|
|||
|
|
if (childType && stackChild.type) {
|
|||
|
|
logger.warn('React-hot-loader: got ', childType, 'instead of', stackChild.type);
|
|||
|
|
stackReport();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isMemoType(child) || isLazyType(child)) {
|
|||
|
|
// force update memo children
|
|||
|
|
if (stackChild.children && stackChild.children[0]) {
|
|||
|
|
scheduleInstanceUpdate(stackChild.children[0].instance);
|
|||
|
|
}
|
|||
|
|
childType = childType.type || childType;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isForwardType(child)) {
|
|||
|
|
next(stackChild.instance);
|
|||
|
|
} else if (isContextConsumer(child)) {
|
|||
|
|
try {
|
|||
|
|
var contextValue = stackContext().get(getContextProvider(childType));
|
|||
|
|
next({
|
|||
|
|
children: (child.props ? child.props.children : child.children[0])(contextValue !== undefined ? contextValue : childType[CONTEXT_CURRENT_VALUE])
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
// do nothing, yet
|
|||
|
|
}
|
|||
|
|
} else if (typeof childType !== 'function') {
|
|||
|
|
// React
|
|||
|
|
var childName = childType ? getComponentDisplayName(childType) : 'empty';
|
|||
|
|
var extraContext = stackContext();
|
|||
|
|
|
|||
|
|
if (isContextProvider(child)) {
|
|||
|
|
extraContext = new Map(extraContext);
|
|||
|
|
extraContext.set(getContextProvider(childType), _extends({}, child.nextProps || {}, child.props || {}).value);
|
|||
|
|
childName = 'ContextProvider';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderStack.push({
|
|||
|
|
name: childName,
|
|||
|
|
type: childType,
|
|||
|
|
props: stack.instance.props,
|
|||
|
|
context: extraContext
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
next(
|
|||
|
|
// move types from render to the instances of hydrated tree
|
|||
|
|
mergeInject(transformFlowNode(asArray(child.props ? child.props.children : child.children)), stackChild.instance.children, stackChild.instance));
|
|||
|
|
renderStack.pop();
|
|||
|
|
} else {
|
|||
|
|
if (childType === stackChild.type) {
|
|||
|
|
next(stackChild.instance);
|
|||
|
|
} else {
|
|||
|
|
// unwrap proxy
|
|||
|
|
var _childType = getElementType$1(child);
|
|||
|
|
|
|||
|
|
if (isMemoType(child)) {
|
|||
|
|
_childType = _childType.type || _childType;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!stackChild.type[PROXY_KEY]) {
|
|||
|
|
if (!configuration.IS_REACT_MERGE_ENABLED) {
|
|||
|
|
if (isTypeBlacklisted(stackChild.type)) {
|
|||
|
|
logger.warn('React-hot-loader: cold element got updated ', stackChild.type);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isRegisteredComponent(_childType) || isRegisteredComponent(stackChild.type)) {
|
|||
|
|
// one of elements are registered via babel plugin, and should not be handled by hot swap
|
|||
|
|
if (resolveType(_childType) === resolveType(stackChild.type)) {
|
|||
|
|
next(stackChild.instance);
|
|||
|
|
}
|
|||
|
|
} else if (areSwappable(_childType, stackChild.type)) {
|
|||
|
|
// they are both registered, or have equal code/displayname/signature
|
|||
|
|
|
|||
|
|
// update proxy using internal PROXY_KEY
|
|||
|
|
updateProxyById(stackChild.type[PROXY_KEY] || getIdByType(stackChild.type), _childType);
|
|||
|
|
|
|||
|
|
next(stackChild.instance);
|
|||
|
|
} else {
|
|||
|
|
logger.warn('React-hot-loader: a ' + getComponentDisplayName(_childType) + ' was found where a ' + getComponentDisplayName(stackChild) + ' was expected.\n ' + _childType);
|
|||
|
|
stackReport();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
scheduleInstanceUpdate(stackChild.instance);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
if (e.then) ; else {
|
|||
|
|
logger.warn('React-hot-loader: run time error during reconciliation', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isReactClassInstance(instance)) {
|
|||
|
|
renderStack.pop();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hotReplacementRender$1 = (function (instance, stack) {
|
|||
|
|
if (configuration.disableHotRenderer) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
// disable reconciler to prevent upcoming components from proxying.
|
|||
|
|
internalConfiguration.disableProxyCreation = true;
|
|||
|
|
renderStack = [];
|
|||
|
|
hotReplacementRender(instance, stack);
|
|||
|
|
} catch (e) {
|
|||
|
|
logger.warn('React-hot-loader: reconcilation failed due to error', e);
|
|||
|
|
} finally {
|
|||
|
|
internalConfiguration.disableProxyCreation = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var reconcileHotReplacement = function reconcileHotReplacement(ReactInstance) {
|
|||
|
|
var stack = getReactStack(ReactInstance);
|
|||
|
|
hotReplacementRender$1(ReactInstance, stack);
|
|||
|
|
cleanupReact();
|
|||
|
|
deepMarkUpdate(stack);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var renderReconciler = function renderReconciler(target, force) {
|
|||
|
|
// we are not inside parent reconcilation
|
|||
|
|
var currentGeneration = get$1();
|
|||
|
|
var componentGeneration = target[RENDERED_GENERATION];
|
|||
|
|
|
|||
|
|
target[RENDERED_GENERATION] = currentGeneration;
|
|||
|
|
|
|||
|
|
if (!internalConfiguration.disableProxyCreation) {
|
|||
|
|
if ((componentGeneration || force) && componentGeneration !== currentGeneration) {
|
|||
|
|
enterHotUpdate();
|
|||
|
|
reconcileHotReplacement(target);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function asyncReconciledRender(target) {
|
|||
|
|
renderReconciler(target, false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function proxyWrapper(element) {
|
|||
|
|
// post wrap on post render
|
|||
|
|
if (!internalConfiguration.disableProxyCreation) {
|
|||
|
|
unscheduleUpdate(this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!element) {
|
|||
|
|
return element;
|
|||
|
|
}
|
|||
|
|
if (Array.isArray(element)) {
|
|||
|
|
return element.map(proxyWrapper);
|
|||
|
|
}
|
|||
|
|
if (typeof element.type === 'function') {
|
|||
|
|
var proxy = getProxyByType(element.type);
|
|||
|
|
if (proxy) {
|
|||
|
|
return _extends({}, element, {
|
|||
|
|
type: proxy.get()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return element;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var ERROR_STATE = 'react_hot_loader_catched_error';
|
|||
|
|
var ERROR_STATE_PROTO = 'react_hot_loader_catched_error-prototype';
|
|||
|
|
var OLD_RENDER = 'react_hot_loader_original_render';
|
|||
|
|
|
|||
|
|
function componentDidCatch(error, errorInfo) {
|
|||
|
|
this[ERROR_STATE] = {
|
|||
|
|
location: 'boundary',
|
|||
|
|
error: error,
|
|||
|
|
errorInfo: errorInfo,
|
|||
|
|
generation: get$1()
|
|||
|
|
};
|
|||
|
|
Object.getPrototypeOf(this)[ERROR_STATE_PROTO] = this[ERROR_STATE];
|
|||
|
|
if (!configuration.errorReporter) {
|
|||
|
|
logException(error, errorInfo, this);
|
|||
|
|
}
|
|||
|
|
this.forceUpdate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function componentRender() {
|
|||
|
|
var _ref = this[ERROR_STATE] || {},
|
|||
|
|
error = _ref.error,
|
|||
|
|
errorInfo = _ref.errorInfo,
|
|||
|
|
generation = _ref.generation;
|
|||
|
|
|
|||
|
|
if (error && generation === get$1()) {
|
|||
|
|
return React__default.createElement(configuration.errorReporter || EmptyErrorPlaceholder, {
|
|||
|
|
error: error,
|
|||
|
|
errorInfo: errorInfo,
|
|||
|
|
component: this
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.hotComponentUpdate) {
|
|||
|
|
this.hotComponentUpdate();
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
var _OLD_RENDER$render;
|
|||
|
|
|
|||
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|||
|
|
args[_key] = arguments[_key];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (_OLD_RENDER$render = this[OLD_RENDER].render).call.apply(_OLD_RENDER$render, [this].concat(args));
|
|||
|
|
} catch (renderError) {
|
|||
|
|
this[ERROR_STATE] = {
|
|||
|
|
location: 'render',
|
|||
|
|
error: renderError,
|
|||
|
|
generation: get$1()
|
|||
|
|
};
|
|||
|
|
if (!configuration.errorReporter) {
|
|||
|
|
logException(renderError, undefined, this);
|
|||
|
|
}
|
|||
|
|
return componentRender.call(this);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function retryHotLoaderError() {
|
|||
|
|
delete this[ERROR_STATE];
|
|||
|
|
this.forceUpdate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setComparisonHooks(function () {
|
|||
|
|
return {};
|
|||
|
|
}, function (component) {
|
|||
|
|
if (!hotComparisonOpen()) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var prototype = component.prototype;
|
|||
|
|
|
|||
|
|
if (!prototype[OLD_RENDER]) {
|
|||
|
|
var renderDescriptior = Object.getOwnPropertyDescriptor(prototype, 'render');
|
|||
|
|
prototype[OLD_RENDER] = {
|
|||
|
|
descriptor: renderDescriptior ? renderDescriptior.value : undefined,
|
|||
|
|
render: prototype.render
|
|||
|
|
};
|
|||
|
|
prototype.componentDidCatch = componentDidCatch;
|
|||
|
|
prototype.retryHotLoaderError = retryHotLoaderError;
|
|||
|
|
|
|||
|
|
prototype.render = componentRender;
|
|||
|
|
}
|
|||
|
|
delete prototype[ERROR_STATE];
|
|||
|
|
}, function (_ref2) {
|
|||
|
|
var prototype = _ref2.prototype;
|
|||
|
|
|
|||
|
|
if (prototype[OLD_RENDER]) {
|
|||
|
|
var _ref3 = prototype[ERROR_STATE_PROTO] || {},
|
|||
|
|
generation = _ref3.generation;
|
|||
|
|
|
|||
|
|
if (generation === get$1()) ; else {
|
|||
|
|
delete prototype.componentDidCatch;
|
|||
|
|
delete prototype.retryHotLoaderError;
|
|||
|
|
|
|||
|
|
// undo only what we did
|
|||
|
|
if (prototype.render === componentRender) {
|
|||
|
|
if (!prototype[OLD_RENDER].descriptor) {
|
|||
|
|
delete prototype.render;
|
|||
|
|
} else {
|
|||
|
|
prototype.render = prototype[OLD_RENDER].descriptor;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.error('React-Hot-Loader: something unexpectedly mutated Component', prototype);
|
|||
|
|
}
|
|||
|
|
delete prototype[ERROR_STATE_PROTO];
|
|||
|
|
delete prototype[OLD_RENDER];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setStandInOptions({
|
|||
|
|
componentWillRender: asyncReconciledRender,
|
|||
|
|
componentDidRender: proxyWrapper,
|
|||
|
|
componentDidUpdate: function componentDidUpdate(component) {
|
|||
|
|
component[RENDERED_GENERATION] = get$1();
|
|||
|
|
flushScheduledUpdates();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var AppContainer = function (_React$Component) {
|
|||
|
|
inherits(AppContainer, _React$Component);
|
|||
|
|
|
|||
|
|
AppContainer.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
|||
|
|
if (prevState.generation !== get$1()) {
|
|||
|
|
// Hot reload is happening.
|
|||
|
|
return {
|
|||
|
|
error: null,
|
|||
|
|
generation: get$1()
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function AppContainer(props) {
|
|||
|
|
classCallCheck(this, AppContainer);
|
|||
|
|
|
|||
|
|
var _this = possibleConstructorReturn(this, _React$Component.call(this, props));
|
|||
|
|
|
|||
|
|
if (configuration.showReactDomPatchNotification) {
|
|||
|
|
configuration.showReactDomPatchNotification = false;
|
|||
|
|
console.warn('React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
_this.state = {
|
|||
|
|
error: null,
|
|||
|
|
errorInfo: null,
|
|||
|
|
// eslint-disable-next-line react/no-unused-state
|
|||
|
|
generation: 0
|
|||
|
|
};
|
|||
|
|
return _this;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
AppContainer.prototype.shouldComponentUpdate = function shouldComponentUpdate(prevProps, prevState) {
|
|||
|
|
// Don't update the component if the state had an error and still has one.
|
|||
|
|
// This allows to break an infinite loop of error -> render -> error -> render
|
|||
|
|
// https://github.com/gaearon/react-hot-loader/issues/696
|
|||
|
|
if (prevState.error && this.state.error) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
AppContainer.prototype.componentDidCatch = function componentDidCatch(error, errorInfo) {
|
|||
|
|
logger.error(error);
|
|||
|
|
|
|||
|
|
if (!hotComparisonOpen()) {
|
|||
|
|
// do not log error outside of HMR cycle
|
|||
|
|
|
|||
|
|
// trigger update to kick error
|
|||
|
|
this.setState({});
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
var _props$errorReporter = this.props.errorReporter,
|
|||
|
|
errorReporter = _props$errorReporter === undefined ? configuration.errorReporter : _props$errorReporter;
|
|||
|
|
|
|||
|
|
if (!errorReporter) {
|
|||
|
|
logException(error, errorInfo, this);
|
|||
|
|
}
|
|||
|
|
this.setState({
|
|||
|
|
error: error,
|
|||
|
|
errorInfo: errorInfo
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
AppContainer.prototype.retryHotLoaderError = function retryHotLoaderError$$1() {
|
|||
|
|
var _this2 = this;
|
|||
|
|
|
|||
|
|
this.setState({ error: null }, function () {
|
|||
|
|
retryHotLoaderError.call(_this2);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
AppContainer.prototype.render = function render() {
|
|||
|
|
var _state = this.state,
|
|||
|
|
error = _state.error,
|
|||
|
|
errorInfo = _state.errorInfo;
|
|||
|
|
var _props$errorReporter2 = this.props.errorReporter,
|
|||
|
|
ErrorReporter = _props$errorReporter2 === undefined ? configuration.errorReporter || EmptyErrorPlaceholder : _props$errorReporter2;
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (error && this.props.errorBoundary) {
|
|||
|
|
return React__default.createElement(ErrorReporter, { error: error, errorInfo: errorInfo, component: this });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.hotComponentUpdate) {
|
|||
|
|
this.hotComponentUpdate();
|
|||
|
|
} else {
|
|||
|
|
throw new Error('React-Hot-Loader: AppContainer should be patched');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return React__default.Children.only(this.props.children);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return AppContainer;
|
|||
|
|
}(React__default.Component);
|
|||
|
|
|
|||
|
|
AppContainer.reactHotLoadable = false;
|
|||
|
|
|
|||
|
|
|
|||
|
|
AppContainer.propTypes = {
|
|||
|
|
children: function children(props) {
|
|||
|
|
if (React__default.Children.count(props.children) !== 1) {
|
|||
|
|
return new Error('Invalid prop "children" supplied to AppContainer. ' + 'Expected a single React element with your app’s root component, e.g. <App />.');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return undefined;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
errorReporter: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|||
|
|
errorBoundary: PropTypes.bool
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
AppContainer.defaultProps = {
|
|||
|
|
errorBoundary: true
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// trying first react-lifecycles-compat.polyfill, then trying react-lifecycles-compat, which could be .default
|
|||
|
|
var realPolyfill = defaultPolyfill.polyfill || defaultPolyfill__default;
|
|||
|
|
realPolyfill(AppContainer);
|
|||
|
|
|
|||
|
|
/* eslint-disable no-underscore-dangle */
|
|||
|
|
|
|||
|
|
var lazyConstructor = '_ctor';
|
|||
|
|
|
|||
|
|
var getLazyConstructor = function getLazyConstructor(target) {
|
|||
|
|
// React 16
|
|||
|
|
if (target[lazyConstructor]) {
|
|||
|
|
return target[lazyConstructor];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// React 17
|
|||
|
|
if (target._payload) {
|
|||
|
|
return target._payload._result;
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var setLazyConstructor = function setLazyConstructor(target, replacement) {
|
|||
|
|
replacement.isPatchedByReactHotLoader = true;
|
|||
|
|
|
|||
|
|
// React 16
|
|||
|
|
if (target[lazyConstructor]) {
|
|||
|
|
target[lazyConstructor] = replacement;
|
|||
|
|
}
|
|||
|
|
// React 17
|
|||
|
|
else if (target._payload) {
|
|||
|
|
target._payload._hotUpdated = true;
|
|||
|
|
target._payload._result = replacement;
|
|||
|
|
} else {
|
|||
|
|
console.error('could not update lazy component');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var patched = function patched(fn) {
|
|||
|
|
fn.isPatchedByReactHotLoader = true;
|
|||
|
|
return fn;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var patchLazyConstructor = function patchLazyConstructor(target) {
|
|||
|
|
if (configuration.wrapLazy && !getLazyConstructor(target).isPatchedByReactHotLoader) {
|
|||
|
|
var ctor = getLazyConstructor(target);
|
|||
|
|
setLazyConstructor(target, function () {
|
|||
|
|
return ctor().then(function (m) {
|
|||
|
|
var C = resolveType(m.default);
|
|||
|
|
// chunks has been updated - new hot loader process is taking a place
|
|||
|
|
enterHotUpdate();
|
|||
|
|
if (!React__default.forwardRef) {
|
|||
|
|
return {
|
|||
|
|
default: patched(function (props) {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
AppContainer,
|
|||
|
|
null,
|
|||
|
|
React__default.createElement(C, props)
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
default: patched(
|
|||
|
|
// eslint-disable-next-line prefer-arrow-callback
|
|||
|
|
React__default.forwardRef(function HotLoaderLazyWrapper(props, ref) {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
AppContainer,
|
|||
|
|
null,
|
|||
|
|
React__default.createElement(C, _extends({}, props, { ref: ref }))
|
|||
|
|
);
|
|||
|
|
}))
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var updateLazy = function updateLazy(target, type) {
|
|||
|
|
var ctor = getLazyConstructor(type);
|
|||
|
|
if (getLazyConstructor(target) !== ctor) {
|
|||
|
|
// just execute `import` and RHL.register will do the job
|
|||
|
|
ctor();
|
|||
|
|
}
|
|||
|
|
patchLazyConstructor(target);
|
|||
|
|
patchLazyConstructor(type);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var updateMemo = function updateMemo(target, _ref) {
|
|||
|
|
var type = _ref.type;
|
|||
|
|
|
|||
|
|
target.type = resolveType(type);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var updateForward = function updateForward(target, _ref2) {
|
|||
|
|
var render = _ref2.render;
|
|||
|
|
|
|||
|
|
target.render = render;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var updateContext = function updateContext() {
|
|||
|
|
// nil
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var getInnerComponentType = function getInnerComponentType(component) {
|
|||
|
|
var unwrapper = component[UNWRAP_PROXY];
|
|||
|
|
return unwrapper ? unwrapper() : component;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function haveEqualSignatures(prevType, nextType) {
|
|||
|
|
try {
|
|||
|
|
var prevSignature = getSignature(prevType);
|
|||
|
|
var nextSignature = getSignature(nextType);
|
|||
|
|
|
|||
|
|
if (prevSignature === undefined && nextSignature === undefined) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
if (prevSignature === undefined || nextSignature === undefined) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (prevSignature.key !== nextSignature.key) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// TODO: we might need to calculate previous signature earlier in practice,
|
|||
|
|
// such as during the first time a component is resolved. We'll revisit this.
|
|||
|
|
var prevCustomHooks = prevSignature.getCustomHooks();
|
|||
|
|
var nextCustomHooks = nextSignature.getCustomHooks();
|
|||
|
|
if (prevCustomHooks.length !== nextCustomHooks.length) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (var i = 0; i < nextCustomHooks.length; i++) {
|
|||
|
|
if (!haveEqualSignatures(prevCustomHooks[i], nextCustomHooks[i])) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
logger.error('React-Hot-Loader: error occurred while comparing hook signature', e);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var areSignaturesCompatible = function areSignaturesCompatible(a, b) {
|
|||
|
|
// compare signatures of two components
|
|||
|
|
// non-equal component have to remount and there is two options to do it
|
|||
|
|
// - fail the comparison, remounting all tree below
|
|||
|
|
// - fulfill it, but set `_debugNeedsRemount` on a fiber to drop only local state
|
|||
|
|
// the second way is not published yet, so going with the first one
|
|||
|
|
if (!haveEqualSignatures(a, b)) {
|
|||
|
|
logger.warn('⚛️🔥🎣 Hook order change detected: component', a, 'has been remounted');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var compareRegistered = function compareRegistered(a, b) {
|
|||
|
|
return getIdByType(a) === getIdByType(b) && getProxyByType(a) === getProxyByType(b) && areSignaturesCompatible(a, b);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var areDeepSwappable = function areDeepSwappable(oldType, newType) {
|
|||
|
|
var type = { type: oldType };
|
|||
|
|
|
|||
|
|
if (typeof oldType === 'function') {
|
|||
|
|
return areSwappable(oldType, newType);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isForwardType(type)) {
|
|||
|
|
return areDeepSwappable(oldType.render, newType.render);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isMemoType(type)) {
|
|||
|
|
return areDeepSwappable(oldType.type, newType.type);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// that's not safe
|
|||
|
|
// if (isLazyType(type)) {
|
|||
|
|
// return areDeepSwappable(oldType._ctor, newType._ctor)
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var compareComponents = function compareComponents(oldType, newType, setNewType, baseType) {
|
|||
|
|
var defaultResult = oldType === newType;
|
|||
|
|
|
|||
|
|
if (oldType && !newType || !oldType && newType || (typeof oldType === 'undefined' ? 'undefined' : _typeof(oldType)) !== (typeof newType === 'undefined' ? 'undefined' : _typeof(newType)) || getElementType(oldType) !== getElementType(newType) || 0) {
|
|||
|
|
return defaultResult;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (getIdByType(newType) || getIdByType(oldType)) {
|
|||
|
|
if (!compareRegistered(oldType, newType)) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
defaultResult = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isForwardType({ type: oldType }) && isForwardType({ type: newType })) {
|
|||
|
|
if (!compareRegistered(oldType.render, newType.render)) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (oldType.render === newType.render || areDeepSwappable(oldType, newType)) {
|
|||
|
|
setNewType(newType);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return defaultResult;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isMemoType({ type: oldType }) && isMemoType({ type: newType })) {
|
|||
|
|
if (!compareRegistered(oldType.type, newType.type)) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (oldType.type === newType.type || areDeepSwappable(oldType, newType)) {
|
|||
|
|
if (baseType) {
|
|||
|
|
// memo form different fibers, why?
|
|||
|
|
if (baseType.$$typeof === newType.$$typeof) {
|
|||
|
|
setNewType(newType);
|
|||
|
|
} else {
|
|||
|
|
setNewType(newType.type);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
logger.warn('Please update hot-loader/react-dom');
|
|||
|
|
if (isReactClass(newType.type)) {
|
|||
|
|
setNewType(newType);
|
|||
|
|
} else {
|
|||
|
|
setNewType(newType.type);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
return defaultResult;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isLazyType({ type: oldType })) {
|
|||
|
|
updateLazy(oldType, newType);
|
|||
|
|
// no need to update
|
|||
|
|
// setNewType(newType);
|
|||
|
|
return defaultResult;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isContextType({ type: oldType })) {
|
|||
|
|
// update provider
|
|||
|
|
setNewType(newType);
|
|||
|
|
return defaultResult;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (typeof newType === 'function' && (defaultResult || newType !== oldType && areSignaturesCompatible(newType, oldType) && areSwappable(newType, oldType))) {
|
|||
|
|
var unwrapFactory = newType[UNWRAP_PROXY];
|
|||
|
|
var oldProxy = unwrapFactory && getProxyByType(unwrapFactory());
|
|||
|
|
if (oldProxy) {
|
|||
|
|
oldProxy.dereference();
|
|||
|
|
updateProxyById(oldType[PROXY_KEY] || getIdByType(oldType), getInnerComponentType(newType));
|
|||
|
|
} else {
|
|||
|
|
setNewType(newType);
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return defaultResult;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var knownPairs = new WeakMap();
|
|||
|
|
var emptyMap$1 = new WeakMap();
|
|||
|
|
|
|||
|
|
var getKnownPair = function getKnownPair(oldType, newType) {
|
|||
|
|
var pair = knownPairs.get(oldType) || emptyMap$1;
|
|||
|
|
return pair.get(newType);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hotComponentCompare = function hotComponentCompare(oldType, preNewType, setNewType, baseType) {
|
|||
|
|
var hotActive = hotComparisonOpen();
|
|||
|
|
var newType = configuration.integratedResolver ? resolveType(preNewType) : preNewType;
|
|||
|
|
|
|||
|
|
// TODO: find out the root cause
|
|||
|
|
// we could not use "fast result" here - go a full part to update a fiber.
|
|||
|
|
// const knownType = getKnownPair(oldType, newType);
|
|||
|
|
// if (knownType !== undefined) {
|
|||
|
|
// return knownType;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
var result = oldType === newType;
|
|||
|
|
|
|||
|
|
if (hotActive) {
|
|||
|
|
// pre fail components which could not be merged
|
|||
|
|
if (!isReloadableComponent(oldType) || !isReloadableComponent(newType) || isColdType(oldType) || isColdType(oldType) || !oldType || !newType || 0) {
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
result = compareComponents(oldType, newType, setNewType, baseType);
|
|||
|
|
var pair = knownPairs.get(oldType) || new WeakMap();
|
|||
|
|
pair.set(newType, result);
|
|||
|
|
knownPairs.set(oldType, pair);
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// result - true if components are equal, or were "equal" at any point in the past
|
|||
|
|
return result || getKnownPair(oldType, newType) || false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* eslint-disable no-use-before-define */
|
|||
|
|
|
|||
|
|
var forceSimpleSFC = { proxy: { pureSFC: true } };
|
|||
|
|
|
|||
|
|
var hookWrapper = function hookWrapper(hook) {
|
|||
|
|
var wrappedHook = function wrappedHook(cb, deps) {
|
|||
|
|
if (configuration.reloadHooks && deps) {
|
|||
|
|
var inputs = [].concat(deps);
|
|||
|
|
|
|||
|
|
// reload hooks which have changed string representation
|
|||
|
|
if (configuration.reloadHooksOnBodyChange) {
|
|||
|
|
inputs.push(String(cb));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
// reload hooks with dependencies
|
|||
|
|
deps.length > 0 ||
|
|||
|
|
// reload all hooks of option is set
|
|||
|
|
configuration.reloadLifeCycleHooks && deps.length === 0) {
|
|||
|
|
inputs.push(getHotGeneration());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return hook(cb, inputs);
|
|||
|
|
}
|
|||
|
|
return hook(cb, deps);
|
|||
|
|
};
|
|||
|
|
wrappedHook.isPatchedByReactHotLoader = true;
|
|||
|
|
return wrappedHook;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var noDeps = function noDeps() {
|
|||
|
|
return [];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var reactHotLoader = {
|
|||
|
|
signature: function signature(type, key) {
|
|||
|
|
var getCustomHooks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : noDeps;
|
|||
|
|
|
|||
|
|
addSignature(type, { key: key, getCustomHooks: getCustomHooks });
|
|||
|
|
return type;
|
|||
|
|
},
|
|||
|
|
register: function register(type, uniqueLocalName, fileName) {
|
|||
|
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|||
|
|
|
|||
|
|
var id = fileName + '#' + uniqueLocalName;
|
|||
|
|
|
|||
|
|
if (isCompositeComponent(type) && typeof uniqueLocalName === 'string' && uniqueLocalName && typeof fileName === 'string' && fileName) {
|
|||
|
|
var proxy = getProxyById(id);
|
|||
|
|
|
|||
|
|
if (proxy && proxy.getCurrent() !== type) {
|
|||
|
|
if (!configuration.IS_REACT_MERGE_ENABLED) {
|
|||
|
|
if (isTypeBlacklisted(type) || isTypeBlacklisted(proxy.getCurrent())) {
|
|||
|
|
logger.error('React-hot-loader: Cold component', uniqueLocalName, 'at', fileName, 'has been updated');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (configuration.onComponentRegister) {
|
|||
|
|
configuration.onComponentRegister(type, uniqueLocalName, fileName);
|
|||
|
|
}
|
|||
|
|
if (configuration.onComponentCreate) {
|
|||
|
|
configuration.onComponentCreate(type, getComponentDisplayName(type));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
registerComponent(updateProxyById(id, type, options).get(), 2);
|
|||
|
|
registerComponent(type);
|
|||
|
|
increment();
|
|||
|
|
}
|
|||
|
|
if (isContextType({ type: type })) {
|
|||
|
|
// possible options - Context, Consumer, Provider.
|
|||
|
|
['Provider', 'Consumer'].forEach(function (prop) {
|
|||
|
|
var descriptor = Object.getOwnPropertyDescriptor(type, prop);
|
|||
|
|
if (descriptor && descriptor.value) {
|
|||
|
|
updateFunctionProxyById(id + ':' + prop, descriptor.value, updateContext);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
updateFunctionProxyById(id, type, updateContext);
|
|||
|
|
increment();
|
|||
|
|
}
|
|||
|
|
if (isLazyType({ type: type })) {
|
|||
|
|
updateFunctionProxyById(id, type, updateLazy);
|
|||
|
|
increment();
|
|||
|
|
}
|
|||
|
|
if (isForwardType({ type: type })) {
|
|||
|
|
reactHotLoader.register(type.render, uniqueLocalName + ':render', fileName, forceSimpleSFC);
|
|||
|
|
updateFunctionProxyById(id, type, updateForward);
|
|||
|
|
increment();
|
|||
|
|
}
|
|||
|
|
if (isMemoType({ type: type })) {
|
|||
|
|
reactHotLoader.register(type.type, uniqueLocalName + ':memo', fileName, forceSimpleSFC);
|
|||
|
|
updateFunctionProxyById(id, type, updateMemo);
|
|||
|
|
increment();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
reset: function reset() {
|
|||
|
|
resetProxies();
|
|||
|
|
},
|
|||
|
|
preact: function preact(instance) {
|
|||
|
|
preactAdapter(instance, resolveType);
|
|||
|
|
},
|
|||
|
|
resolveType: function resolveType$$1(type) {
|
|||
|
|
return resolveType(type);
|
|||
|
|
},
|
|||
|
|
patch: function patch(React$$1, ReactDOM$$1) {
|
|||
|
|
var typeResolver = resolveType;
|
|||
|
|
/* eslint-disable no-console */
|
|||
|
|
if (ReactDOM$$1 && !ReactDOM$$1.render) {
|
|||
|
|
logger.error('React-Hot-Loader: broken state detected, please import React-Hot-Loader before react-dom, see https://github.com/gaearon/react-hot-loader/issues/1315');
|
|||
|
|
}
|
|||
|
|
if (ReactDOM$$1 && ReactDOM$$1.setHotElementComparator) {
|
|||
|
|
ReactDOM$$1.setHotElementComparator(hotComponentCompare);
|
|||
|
|
configuration.disableHotRenderer = configuration.disableHotRendererWhenInjected;
|
|||
|
|
|
|||
|
|
configuration.ignoreSFC = configuration.ignoreSFCWhenInjected;
|
|||
|
|
|
|||
|
|
configuration.IS_REACT_MERGE_ENABLED = true;
|
|||
|
|
configuration.showReactDomPatchNotification = false;
|
|||
|
|
configuration.integratedComparator = true;
|
|||
|
|
|
|||
|
|
if (ReactDOM$$1.setHotTypeResolver) {
|
|||
|
|
configuration.integratedResolver = true;
|
|||
|
|
typeResolver = resolveSimpleType;
|
|||
|
|
ReactDOM$$1.setHotTypeResolver(resolveType);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// PATCH REACT METHODS
|
|||
|
|
|
|||
|
|
/* eslint-enable */
|
|||
|
|
if (!React$$1.createElement.isPatchedByReactHotLoader) {
|
|||
|
|
var originalCreateElement = React$$1.createElement;
|
|||
|
|
// Trick React into rendering a proxy so that
|
|||
|
|
// its state is preserved when the class changes.
|
|||
|
|
// This will update the proxy if it's for a known type.
|
|||
|
|
React$$1.createElement = function (type) {
|
|||
|
|
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|||
|
|
args[_key - 1] = arguments[_key];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return originalCreateElement.apply(undefined, [typeResolver(type)].concat(args));
|
|||
|
|
};
|
|||
|
|
React$$1.createElement.isPatchedByReactHotLoader = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!React$$1.cloneElement.isPatchedByReactHotLoader) {
|
|||
|
|
var originalCloneElement = React$$1.cloneElement;
|
|||
|
|
|
|||
|
|
React$$1.cloneElement = function (element) {
|
|||
|
|
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|||
|
|
args[_key2 - 1] = arguments[_key2];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var newType = element.type && typeResolver(element.type);
|
|||
|
|
if (newType && newType !== element.type) {
|
|||
|
|
return originalCloneElement.apply(undefined, [_extends({}, element, {
|
|||
|
|
type: newType
|
|||
|
|
})].concat(args));
|
|||
|
|
}
|
|||
|
|
return originalCloneElement.apply(undefined, [element].concat(args));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
React$$1.cloneElement.isPatchedByReactHotLoader = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!React$$1.createFactory.isPatchedByReactHotLoader) {
|
|||
|
|
// Patch React.createFactory to use patched createElement
|
|||
|
|
// because the original implementation uses the internal,
|
|||
|
|
// unpatched ReactElement.createElement
|
|||
|
|
React$$1.createFactory = function (type) {
|
|||
|
|
var factory = React$$1.createElement.bind(null, type);
|
|||
|
|
factory.type = type;
|
|||
|
|
return factory;
|
|||
|
|
};
|
|||
|
|
React$$1.createFactory.isPatchedByReactHotLoader = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!React$$1.Children.only.isPatchedByReactHotLoader) {
|
|||
|
|
var originalChildrenOnly = React$$1.Children.only;
|
|||
|
|
// Use the same trick as React.createElement
|
|||
|
|
React$$1.Children.only = function (children) {
|
|||
|
|
return originalChildrenOnly(_extends({}, children, {
|
|||
|
|
type: typeResolver(children.type)
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
React$$1.Children.only.isPatchedByReactHotLoader = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// PATCH REACT HOOKS
|
|||
|
|
|
|||
|
|
if (React$$1.useEffect && !React$$1.useEffect.isPatchedByReactHotLoader) {
|
|||
|
|
React$$1.useEffect = hookWrapper(React$$1.useEffect);
|
|||
|
|
React$$1.useLayoutEffect = hookWrapper(React$$1.useLayoutEffect);
|
|||
|
|
React$$1.useCallback = hookWrapper(React$$1.useCallback);
|
|||
|
|
React$$1.useMemo = hookWrapper(React$$1.useMemo);
|
|||
|
|
|
|||
|
|
// transform context for useContext
|
|||
|
|
var useContext = React$$1.useContext;
|
|||
|
|
|
|||
|
|
React$$1.useContext = function (context) {
|
|||
|
|
for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
|||
|
|
args[_key3 - 1] = arguments[_key3];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return useContext.apply(undefined, [typeResolver(context)].concat(args));
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// reactHotLoader.reset()
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var openedModules = {};
|
|||
|
|
var lastModuleOpened = '';
|
|||
|
|
var getLastModuleOpened = function getLastModuleOpened() {
|
|||
|
|
return lastModuleOpened;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hotModules = {};
|
|||
|
|
|
|||
|
|
var createHotModule = function createHotModule() {
|
|||
|
|
return { instances: [], updateTimeout: 0 };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hotModule = function hotModule(moduleId) {
|
|||
|
|
if (!hotModules[moduleId]) {
|
|||
|
|
hotModules[moduleId] = createHotModule();
|
|||
|
|
}
|
|||
|
|
return hotModules[moduleId];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var isOpened = function isOpened(sourceModule) {
|
|||
|
|
return sourceModule && !!openedModules[sourceModule.id];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var enter = function enter(sourceModule) {
|
|||
|
|
if (sourceModule && sourceModule.id) {
|
|||
|
|
lastModuleOpened = sourceModule.id;
|
|||
|
|
openedModules[sourceModule.id] = true;
|
|||
|
|
} else {
|
|||
|
|
logger.warn('React-hot-loader: no `module` variable found. Did you shadow a system variable?');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var leave = function leave(sourceModule) {
|
|||
|
|
if (sourceModule && sourceModule.id) {
|
|||
|
|
delete openedModules[sourceModule.id];
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var createQueue = function createQueue() {
|
|||
|
|
var runner = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (a) {
|
|||
|
|
return a();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var promise = void 0;
|
|||
|
|
var queue = [];
|
|||
|
|
|
|||
|
|
var runAll = function runAll() {
|
|||
|
|
var oldQueue = queue;
|
|||
|
|
oldQueue.forEach(function (cb) {
|
|||
|
|
return cb();
|
|||
|
|
});
|
|||
|
|
queue = [];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var add = function add(cb) {
|
|||
|
|
if (queue.length === 0) {
|
|||
|
|
promise = Promise.resolve().then(function () {
|
|||
|
|
return runner(runAll);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
queue.push(cb);
|
|||
|
|
|
|||
|
|
return promise;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return add;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* eslint-disable camelcase, no-undef */
|
|||
|
|
var requireIndirect = typeof __webpack_require__ !== 'undefined' ? __webpack_require__ : require;
|
|||
|
|
/* eslint-enable */
|
|||
|
|
|
|||
|
|
var chargeFailbackTimer = function chargeFailbackTimer(id) {
|
|||
|
|
return setTimeout(function () {
|
|||
|
|
var error = 'hot update failed for module "' + id + '". Last file processed: "' + getLastModuleOpened() + '".';
|
|||
|
|
logger.error(error);
|
|||
|
|
logException({
|
|||
|
|
toString: function toString() {
|
|||
|
|
return error;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 100 ms more "code" tolerant that 0, and would catch error in any case
|
|||
|
|
}, 100);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var clearFailbackTimer = function clearFailbackTimer(timerId) {
|
|||
|
|
return clearTimeout(timerId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var createHoc = function createHoc(SourceComponent, TargetComponent) {
|
|||
|
|
hoistNonReactStatic(TargetComponent, SourceComponent);
|
|||
|
|
TargetComponent.displayName = 'HotExported' + getComponentDisplayName(SourceComponent);
|
|||
|
|
return TargetComponent;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var runInRequireQueue = createQueue();
|
|||
|
|
var runInRenderQueue = createQueue(function (cb) {
|
|||
|
|
if (ReactDOM.unstable_batchedUpdates) {
|
|||
|
|
ReactDOM.unstable_batchedUpdates(cb);
|
|||
|
|
} else {
|
|||
|
|
cb();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var makeHotExport = function makeHotExport(sourceModule, moduleId) {
|
|||
|
|
var updateInstances = function updateInstances(possibleError) {
|
|||
|
|
if (possibleError && possibleError instanceof Error) {
|
|||
|
|
console.error(possibleError);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var module = hotModule(moduleId);
|
|||
|
|
|
|||
|
|
var deepUpdate = function deepUpdate() {
|
|||
|
|
// force flush all updates
|
|||
|
|
runInRenderQueue(function () {
|
|||
|
|
enterHotUpdate();
|
|||
|
|
var gen = getHotGeneration();
|
|||
|
|
module.instances.forEach(function (inst) {
|
|||
|
|
return inst.forceUpdate();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (configuration.trackTailUpdates) {
|
|||
|
|
var runLimit = 0;
|
|||
|
|
var checkTailUpdates = function checkTailUpdates() {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
if (getHotGeneration() !== gen) {
|
|||
|
|
// we know that some components were updated, but not tracking which ones
|
|||
|
|
// even if their updates might be incorporated automatically (like lazy)
|
|||
|
|
// we dont know which one should be tracked, and which updates are important
|
|||
|
|
logger.warn('React-Hot-Loader: some components were updated out-of-bound. Updating your app to reconcile the changes.');
|
|||
|
|
// increment generator for cache-busting existing tree
|
|||
|
|
increment();
|
|||
|
|
deepUpdate();
|
|||
|
|
} else if (++runLimit < 5) {
|
|||
|
|
checkTailUpdates();
|
|||
|
|
}
|
|||
|
|
}, 16);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
checkTailUpdates();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// require all modules
|
|||
|
|
runInRequireQueue(function () {
|
|||
|
|
try {
|
|||
|
|
// webpack will require everything by this time
|
|||
|
|
// but let's double check...
|
|||
|
|
requireIndirect(moduleId);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('React-Hot-Loader: error detected while loading', moduleId);
|
|||
|
|
console.error(e);
|
|||
|
|
}
|
|||
|
|
}).then(deepUpdate);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (sourceModule.hot) {
|
|||
|
|
// Mark as self-accepted for Webpack (callback is an Error Handler)
|
|||
|
|
// Update instances for Parcel (callback is an Accept Handler)
|
|||
|
|
sourceModule.hot.accept(updateInstances);
|
|||
|
|
|
|||
|
|
// Webpack way
|
|||
|
|
if (sourceModule.hot.addStatusHandler) {
|
|||
|
|
if (sourceModule.hot.status() === 'idle') {
|
|||
|
|
sourceModule.hot.addStatusHandler(function (status) {
|
|||
|
|
if (status === 'apply') {
|
|||
|
|
clearExceptions();
|
|||
|
|
updateInstances();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
logger.warn('React-hot-loader: Hot Module Replacement is not enabled');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hot = function hot(sourceModule) {
|
|||
|
|
if (!sourceModule) {
|
|||
|
|
// this is fatal
|
|||
|
|
throw new Error('React-hot-loader: `hot` was called without any argument provided');
|
|||
|
|
}
|
|||
|
|
var moduleId = sourceModule.id || sourceModule.i || sourceModule.filename;
|
|||
|
|
if (!moduleId) {
|
|||
|
|
console.error('`module` provided', sourceModule);
|
|||
|
|
throw new Error('React-hot-loader: `hot` could not find the `name` of the the `module` you have provided');
|
|||
|
|
}
|
|||
|
|
var module = hotModule(moduleId);
|
|||
|
|
makeHotExport(sourceModule, moduleId);
|
|||
|
|
|
|||
|
|
clearExceptions();
|
|||
|
|
var failbackTimer = chargeFailbackTimer(moduleId);
|
|||
|
|
var firstHotRegistered = false;
|
|||
|
|
|
|||
|
|
// TODO: Ensure that all exports from this file are react components.
|
|||
|
|
|
|||
|
|
return function (WrappedComponent, props) {
|
|||
|
|
clearFailbackTimer(failbackTimer);
|
|||
|
|
// register proxy for wrapped component
|
|||
|
|
// only one hot per file would use this registration
|
|||
|
|
if (!firstHotRegistered) {
|
|||
|
|
firstHotRegistered = true;
|
|||
|
|
reactHotLoader.register(WrappedComponent, getComponentDisplayName(WrappedComponent), 'RHL' + moduleId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return createHoc(WrappedComponent, function (_Component) {
|
|||
|
|
inherits(ExportedComponent, _Component);
|
|||
|
|
|
|||
|
|
function ExportedComponent() {
|
|||
|
|
classCallCheck(this, ExportedComponent);
|
|||
|
|
return possibleConstructorReturn(this, _Component.apply(this, arguments));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ExportedComponent.prototype.componentDidMount = function componentDidMount() {
|
|||
|
|
module.instances.push(this);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ExportedComponent.prototype.componentWillUnmount = function componentWillUnmount() {
|
|||
|
|
var _this2 = this;
|
|||
|
|
|
|||
|
|
if (isOpened(sourceModule)) {
|
|||
|
|
var componentName = getComponentDisplayName(WrappedComponent);
|
|||
|
|
logger.error('React-hot-loader: Detected AppContainer unmount on module \'' + moduleId + '\' update.\n' + ('Did you use "hot(' + componentName + ')" and "ReactDOM.render()" in the same file?\n') + ('"hot(' + componentName + ')" shall only be used as export.\n') + 'Please refer to "Getting Started" (https://github.com/gaearon/react-hot-loader/).');
|
|||
|
|
}
|
|||
|
|
module.instances = module.instances.filter(function (a) {
|
|||
|
|
return a !== _this2;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
ExportedComponent.prototype.render = function render() {
|
|||
|
|
return React__default.createElement(
|
|||
|
|
AppContainer,
|
|||
|
|
props,
|
|||
|
|
React__default.createElement(WrappedComponent, this.props)
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return ExportedComponent;
|
|||
|
|
}(React.Component));
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
reactHotLoader.register(AppContainer, 'AppContainer', 'hot-dev');
|
|||
|
|
|
|||
|
|
var getProxyOrType = function getProxyOrType(type) {
|
|||
|
|
var proxy = getProxyByType(type);
|
|||
|
|
return proxy ? proxy.get() : type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var areComponentsEqual = function areComponentsEqual(a, b) {
|
|||
|
|
return getProxyOrType(a) === getProxyOrType(b);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var compareOrSwap = function compareOrSwap(oldType, newType) {
|
|||
|
|
return hotComponentCompare(oldType, newType);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var cold = function cold(type) {
|
|||
|
|
blacklistByType(type);
|
|||
|
|
return type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var configureComponent = function configureComponent(component, options) {
|
|||
|
|
return setComponentOptions(component, options);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var setConfig = function setConfig(config) {
|
|||
|
|
return setConfiguration(config);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
reactHotLoader.patch(React__default, ReactDOM);
|
|||
|
|
|
|||
|
|
exports.default = reactHotLoader;
|
|||
|
|
exports.AppContainer = AppContainer;
|
|||
|
|
exports.hot = hot;
|
|||
|
|
exports.enterModule = enter;
|
|||
|
|
exports.leaveModule = leave;
|
|||
|
|
exports.areComponentsEqual = areComponentsEqual;
|
|||
|
|
exports.compareOrSwap = compareOrSwap;
|
|||
|
|
exports.cold = cold;
|
|||
|
|
exports.configureComponent = configureComponent;
|
|||
|
|
exports.setConfig = setConfig;
|