react-dom 16.4.0-alpha.0911da3 → 16.4.1

package/cjs/react-dom-server.browser.development.js

@@ -1,4 +1,4 @@
-/** @license React v16.4.0-alpha.0911da3
+/** @license React v16.4.1
  * react-dom-server.browser.development.js
  *
  * Copyright (c) 2013-present, Facebook, Inc.
@@ -26,16 +26,12 @@ var warning = require('fbjs/lib/warning');
 var checkPropTypes = require('prop-types/checkPropTypes');
 var camelizeStyleName = require('fbjs/lib/camelizeStyleName');
 
-/**
- * WARNING: DO NOT manually require this module.
- * This is a replacement for `invariant(...)` used by the error code system
- * and will _only_ be required by the corresponding babel pass.
- * It always throws.
- */
+// Relying on the `invariant()` implementation lets us
+// have preserve the format and params in the www builds.
 
 // TODO: this is special because it gets imported during build.
 
-var ReactVersion = '16.4.0-alpha.0911da3';
+var ReactVersion = '16.4.1';
 
 /**
  * Forked from fbjs/warning:
@@ -102,16 +98,11 @@ var ReactDebugCurrentFrame = ReactInternals.ReactDebugCurrentFrame;
 // Exports ReactDOM.createRoot
 
 
-
-// Mutating mode (React DOM, React ART, React Native):
-
-// Experimental noop mode (currently unused):
-
-// Experimental persistent mode (Fabric):
-
 // Experimental error-boundary API that can recover from errors within a single
 // render phase
 
+// Suspense
+
 // Helps identify side effects in begin-phase lifecycle hooks and setState reducers:
 
 
@@ -128,21 +119,27 @@ var ReactDebugCurrentFrame = ReactInternals.ReactDebugCurrentFrame;
 // Warn about deprecated, async-unsafe lifecycles; relates to RFC #6:
 var warnAboutDeprecatedLifecycles = false;
 
+// Warn about legacy context API
+
+
+// Gather advanced timing metrics for Profiler subtrees.
+
+
 // Only used in www builds.
 
 // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
 // nor polyfill, then a plain number is used for performance.
-var hasSymbol = typeof Symbol === 'function' && Symbol['for'];
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
 
 
-var REACT_CALL_TYPE = hasSymbol ? Symbol['for']('react.call') : 0xeac8;
-var REACT_RETURN_TYPE = hasSymbol ? Symbol['for']('react.return') : 0xeac9;
-var REACT_PORTAL_TYPE = hasSymbol ? Symbol['for']('react.portal') : 0xeaca;
-var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol['for']('react.fragment') : 0xeacb;
-var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol['for']('react.strict_mode') : 0xeacc;
-var REACT_PROVIDER_TYPE = hasSymbol ? Symbol['for']('react.provider') : 0xeacd;
-var REACT_CONTEXT_TYPE = hasSymbol ? Symbol['for']('react.context') : 0xeace;
-var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol['for']('react.async_mode') : 0xeacf;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
 
 // A reserved attribute.
 // It is handled by React separately and shouldn't be written to the DOM.
@@ -254,6 +251,9 @@ function shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)
   if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag)) {
     return true;
   }
+  if (isCustomComponentTag) {
+    return false;
+  }
   if (propertyInfo !== null) {
     switch (propertyInfo.type) {
       case BOOLEAN:
@@ -296,15 +296,20 @@ var properties = {};
   properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty
   name, // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // A few React string attributes have a different name.
 // This is a mapping from React prop names to the attribute names.
-new Map([['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']]).forEach(function (attributeName, name) {
+[['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']].forEach(function (_ref) {
+  var name = _ref[0],
+      attributeName = _ref[1];
+
   properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
   attributeName, // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // These are "enumerated" HTML attributes that accept "true" and "false".
 // In React, we let users pass `true` and `false` even though technically
@@ -313,7 +318,8 @@ new Map([['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor'
   properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
   name.toLowerCase(), // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // These are "enumerated" SVG attributes that accept "true" and "false".
 // In React, we let users pass `true` and `false` even though technically
@@ -323,7 +329,8 @@ new Map([['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor'
   properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
   name, // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // These are HTML boolean attributes.
 ['allowFullScreen', 'async',
@@ -335,7 +342,8 @@ new Map([['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor'
   properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty
   name.toLowerCase(), // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // These are the few React props that we set as DOM properties
 // rather than attributes. These are all booleans.
@@ -346,7 +354,8 @@ new Map([['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor'
   properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty
   name.toLowerCase(), // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // These are HTML attributes that are "overloaded booleans": they behave like
 // booleans, but can also accept a string value.
@@ -354,21 +363,24 @@ new Map([['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor'
   properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty
   name.toLowerCase(), // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // These are HTML attributes that must be positive numbers.
 ['cols', 'rows', 'size', 'span'].forEach(function (name) {
   properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty
   name.toLowerCase(), // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 // These are HTML attributes that must be numbers.
 ['rowSpan', 'start'].forEach(function (name) {
   properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty
   name.toLowerCase(), // attributeName
   null);
-});
+} // attributeNamespace
+);
 
 var CAMELIZE = /[\-\:]([a-z])/g;
 var capitalize = function (token) {
@@ -384,7 +396,8 @@ var capitalize = function (token) {
   var name = attributeName.replace(CAMELIZE, capitalize);
   properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
   attributeName, null);
-});
+} // attributeNamespace
+);
 
 // String SVG attributes with the xlink namespace.
 ['xlink:actuate', 'xlink:arcrole', 'xlink:href', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type'].forEach(function (attributeName) {
@@ -652,6 +665,7 @@ var omittedCloseTags = {
   source: true,
   track: true,
   wbr: true
+  // NOTE: menuitem's close tag should be omitted, but that causes problems.
 };
 
 // For HTML, certain tags cannot have children. This has the same purpose as
@@ -676,7 +690,7 @@ function assertValidProps(tag, props, getStack) {
     !(typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML) ? invariant(false, '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.') : void 0;
   }
   {
-    warning(props.suppressContentEditableWarning || !props.contentEditable || props.children == null, 'A component is `contentEditable` and contains `children` managed by ' + 'React. It is now your responsibility to guarantee that none of ' + 'those nodes are unexpectedly modified or duplicated. This is ' + 'probably not intentional.%s', getStack());
+    !(props.suppressContentEditableWarning || !props.contentEditable || props.children == null) ? warning(false, 'A component is `contentEditable` and contains `children` managed by ' + 'React. It is now your responsibility to guarantee that none of ' + 'those nodes are unexpectedly modified or duplicated. This is ' + 'probably not intentional.%s', getStack()) : void 0;
   }
   !(props.style == null || typeof props.style === 'object') ? invariant(false, 'The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + \'em\'}} when using JSX.%s', getStack()) : void 0;
 }
@@ -1135,7 +1149,7 @@ var possibleStandardNames = {
   checked: 'checked',
   children: 'children',
   cite: 'cite',
-  'class': 'className',
+  class: 'className',
   classid: 'classID',
   classname: 'className',
   cols: 'cols',
@@ -1150,7 +1164,7 @@ var possibleStandardNames = {
   dangerouslysetinnerhtml: 'dangerouslySetInnerHTML',
   data: 'data',
   datetime: 'dateTime',
-  'default': 'default',
+  default: 'default',
   defaultchecked: 'defaultChecked',
   defaultvalue: 'defaultValue',
   defer: 'defer',
@@ -1159,7 +1173,7 @@ var possibleStandardNames = {
   download: 'download',
   draggable: 'draggable',
   enctype: 'encType',
-  'for': 'htmlFor',
+  for: 'htmlFor',
   form: 'form',
   formmethod: 'formMethod',
   formaction: 'formAction',
@@ -1377,7 +1391,7 @@ var possibleStandardNames = {
   imagerendering: 'imageRendering',
   'image-rendering': 'imageRendering',
   in2: 'in2',
-  'in': 'in',
+  in: 'in',
   inlist: 'inlist',
   intercept: 'intercept',
   k1: 'k1',
@@ -1517,7 +1531,7 @@ var possibleStandardNames = {
   'text-rendering': 'textRendering',
   to: 'to',
   transform: 'transform',
-  'typeof': 'typeof',
+  typeof: 'typeof',
   u1: 'u1',
   u2: 'u2',
   underlineposition: 'underlinePosition',
@@ -2033,42 +2047,26 @@ function validateRenderResult(child, type) {
 }
 
 function resolve(child, context) {
-  var element = void 0;
-
-  var Component = void 0;
-  var publicContext = void 0;
-  var inst = void 0,
-      queue = void 0,
-      replace = void 0;
-  var updater = void 0;
-
-  var initialState = void 0;
-  var oldQueue = void 0,
-      oldReplace = void 0;
-  var nextState = void 0,
-      dontMutate = void 0;
-  var partial = void 0,
-      partialState = void 0;
-
-  var childContext = void 0;
-  var childContextTypes = void 0,
-      contextKey = void 0;
-
   while (React.isValidElement(child)) {
     // Safe because we just checked it's an element.
-    element = child;
+    var element = child;
+    var Component = element.type;
     {
       pushElementToDebugStack(element);
     }
-    Component = element.type;
     if (typeof Component !== 'function') {
       break;
     }
-    publicContext = processContext(Component, context);
+    processChild(element, Component);
+  }
 
-    queue = [];
-    replace = false;
-    updater = {
+  // Extra closure so queue and replace can be captured properly
+  function processChild(element, Component) {
+    var publicContext = processContext(Component, context);
+
+    var queue = [];
+    var replace = false;
+    var updater = {
       isMounted: function (publicInstance) {
         return false;
       },
@@ -2091,6 +2089,7 @@ function resolve(child, context) {
       }
     };
 
+    var inst = void 0;
     if (shouldConstruct(Component)) {
       inst = new Component(element.props, publicContext, updater);
 
@@ -2105,7 +2104,7 @@ function resolve(child, context) {
           }
         }
 
-        partialState = Component.getDerivedStateFromProps.call(null, element.props, inst.state);
+        var partialState = Component.getDerivedStateFromProps.call(null, element.props, inst.state);
 
         {
           if (partialState === undefined) {
@@ -2136,7 +2135,7 @@ function resolve(child, context) {
       if (inst == null || inst.render == null) {
         child = inst;
         validateRenderResult(child, Component);
-        continue;
+        return;
       }
     }
 
@@ -2144,7 +2143,7 @@ function resolve(child, context) {
     inst.context = publicContext;
     inst.updater = updater;
 
-    initialState = inst.state;
+    var initialState = inst.state;
     if (initialState === undefined) {
       inst.state = initialState = null;
     }
@@ -2173,25 +2172,25 @@ function resolve(child, context) {
         inst.UNSAFE_componentWillMount();
       }
       if (queue.length) {
-        oldQueue = queue;
-        oldReplace = replace;
+        var oldQueue = queue;
+        var oldReplace = replace;
         queue = null;
         replace = false;
 
         if (oldReplace && oldQueue.length === 1) {
           inst.state = oldQueue[0];
         } else {
-          nextState = oldReplace ? oldQueue[0] : inst.state;
-          dontMutate = true;
+          var nextState = oldReplace ? oldQueue[0] : inst.state;
+          var dontMutate = true;
           for (var i = oldReplace ? 1 : 0; i < oldQueue.length; i++) {
-            partial = oldQueue[i];
-            partialState = typeof partial === 'function' ? partial.call(inst, nextState, element.props, publicContext) : partial;
-            if (partialState != null) {
+            var partial = oldQueue[i];
+            var _partialState = typeof partial === 'function' ? partial.call(inst, nextState, element.props, publicContext) : partial;
+            if (_partialState != null) {
               if (dontMutate) {
                 dontMutate = false;
-                nextState = _assign({}, nextState, partialState);
+                nextState = _assign({}, nextState, _partialState);
               } else {
-                _assign(nextState, partialState);
+                _assign(nextState, _partialState);
               }
             }
           }
@@ -2212,11 +2211,12 @@ function resolve(child, context) {
     }
     validateRenderResult(child, Component);
 
+    var childContext = void 0;
     if (typeof inst.getChildContext === 'function') {
-      childContextTypes = Component.childContextTypes;
+      var childContextTypes = Component.childContextTypes;
       if (typeof childContextTypes === 'object') {
         childContext = inst.getChildContext();
-        for (contextKey in childContext) {
+        for (var contextKey in childContext) {
           !(contextKey in childContextTypes) ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', getComponentName(Component) || 'Unknown', contextKey) : void 0;
         }
       } else {
@@ -2231,6 +2231,8 @@ function resolve(child, context) {
 }
 
 var ReactDOMServerRenderer = function () {
+  // DEV-only
+
   function ReactDOMServerRenderer(children, makeStaticMarkup) {
     _classCallCheck(this, ReactDOMServerRenderer);
 
@@ -2256,33 +2258,65 @@ var ReactDOMServerRenderer = function () {
     this.makeStaticMarkup = makeStaticMarkup;
 
     // Context (new API)
-    this.providerStack = []; // Stack of provider objects
-    this.providerIndex = -1;
+    this.contextIndex = -1;
+    this.contextStack = [];
+    this.contextValueStack = [];
+    {
+      this.contextProviderStack = [];
+    }
   }
+
+  /**
+   * Note: We use just two stacks regardless of how many context providers you have.
+   * Providers are always popped in the reverse order to how they were pushed
+   * so we always know on the way down which provider you'll encounter next on the way up.
+   * On the way down, we push the current provider, and its context value *before*
+   * we mutated it, onto the stacks. Therefore, on the way up, we always know which
+   * provider needs to be "restored" to which value.
+   * https://github.com/facebook/react/pull/12985#issuecomment-396301248
+   */
+
   // TODO: type this more strictly:
 
 
   ReactDOMServerRenderer.prototype.pushProvider = function pushProvider(provider) {
-    this.providerIndex += 1;
-    this.providerStack[this.providerIndex] = provider;
-    var context = provider.type.context;
-    context.currentValue = provider.props.value;
+    var index = ++this.contextIndex;
+    var context = provider.type._context;
+    var previousValue = context._currentValue;
+
+    // Remember which value to restore this context to on our way up.
+    this.contextStack[index] = context;
+    this.contextValueStack[index] = previousValue;
+    {
+      // Only used for push/pop mismatch warnings.
+      this.contextProviderStack[index] = provider;
+    }
+
+    // Mutate the current value.
+    context._currentValue = provider.props.value;
   };
 
   ReactDOMServerRenderer.prototype.popProvider = function popProvider(provider) {
+    var index = this.contextIndex;
     {
-      warning(this.providerIndex > -1 && provider === this.providerStack[this.providerIndex], 'Unexpected pop.');
+      !(index > -1 && provider === this.contextProviderStack[index]) ? warning(false, 'Unexpected pop.') : void 0;
     }
-    this.providerStack[this.providerIndex] = null;
-    this.providerIndex -= 1;
-    var context = provider.type.context;
-    if (this.providerIndex < 0) {
-      context.currentValue = context.defaultValue;
-    } else {
-      // We assume this type is correct because of the index check above.
-      var previousProvider = this.providerStack[this.providerIndex];
-      context.currentValue = previousProvider.props.value;
+
+    var context = this.contextStack[index];
+    var previousValue = this.contextValueStack[index];
+
+    // "Hide" these null assignments from Flow by using `any`
+    // because conceptually they are deletions--as long as we
+    // promise to never access values beyond `this.contextIndex`.
+    this.contextStack[index] = null;
+    this.contextValueStack[index] = null;
+    {
+      this.contextProviderStack[index] = null;
     }
+    this.contextIndex--;
+
+    // Restore to the previous value we stored as we were walking down.
+    context._currentValue = previousValue;
   };
 
   ReactDOMServerRenderer.prototype.read = function read(bytes) {
@@ -2383,6 +2417,7 @@ var ReactDOMServerRenderer = function () {
       switch (elementType) {
         case REACT_STRICT_MODE_TYPE:
         case REACT_ASYNC_MODE_TYPE:
+        case REACT_PROFILER_TYPE:
         case REACT_FRAGMENT_TYPE:
           {
             var _nextChildren = toArray(nextChild.props.children);
@@ -2400,56 +2435,71 @@ var ReactDOMServerRenderer = function () {
             this.stack.push(_frame);
             return '';
           }
-        case REACT_CALL_TYPE:
-        case REACT_RETURN_TYPE:
-          invariant(false, 'The experimental Call and Return types are not currently supported by the server renderer.');
         // eslint-disable-next-line-no-fallthrough
         default:
           break;
       }
       if (typeof elementType === 'object' && elementType !== null) {
         switch (elementType.$$typeof) {
+          case REACT_FORWARD_REF_TYPE:
+            {
+              var element = nextChild;
+              var _nextChildren2 = toArray(elementType.render(element.props, element.ref));
+              var _frame2 = {
+                type: null,
+                domNamespace: parentNamespace,
+                children: _nextChildren2,
+                childIndex: 0,
+                context: context,
+                footer: ''
+              };
+              {
+                _frame2.debugElementStack = [];
+              }
+              this.stack.push(_frame2);
+              return '';
+            }
           case REACT_PROVIDER_TYPE:
             {
               var provider = nextChild;
               var nextProps = provider.props;
-              var _nextChildren2 = toArray(nextProps.children);
-              var _frame2 = {
+              var _nextChildren3 = toArray(nextProps.children);
+              var _frame3 = {
                 type: provider,
                 domNamespace: parentNamespace,
-                children: _nextChildren2,
+                children: _nextChildren3,
                 childIndex: 0,
                 context: context,
                 footer: ''
               };
               {
-                _frame2.debugElementStack = [];
+                _frame3.debugElementStack = [];
               }
 
               this.pushProvider(provider);
 
-              this.stack.push(_frame2);
+              this.stack.push(_frame3);
               return '';
             }
           case REACT_CONTEXT_TYPE:
             {
               var consumer = nextChild;
               var _nextProps = consumer.props;
-              var nextValue = consumer.type.currentValue;
+              var nextValue = consumer.type._currentValue;
 
-              var _nextChildren3 = toArray(_nextProps.children(nextValue));
-              var _frame3 = {
+              var _nextChildren4 = toArray(_nextProps.children(nextValue));
+              var _frame4 = {
                 type: nextChild,
                 domNamespace: parentNamespace,
-                children: _nextChildren3,
+                children: _nextChildren4,
                 childIndex: 0,
                 context: context,
                 footer: ''
               };
               {
-                _frame3.debugElementStack = [];
+                _frame4.debugElementStack = [];
               }
-              this.stack.push(_frame3);
+              this.stack.push(_frame4);
               return '';
             }
           default:
@@ -2484,7 +2534,7 @@ var ReactDOMServerRenderer = function () {
       if (namespace === Namespaces.html) {
         // Should this check be gated by parent namespace? Not sure we want to
         // allow <SVG> or <mATH>.
-        warning(tag === element.type, '<%s /> is using uppercase HTML. Always use lowercase HTML tags ' + 'in React.', element.type);
+        !(tag === element.type) ? warning(false, '<%s /> is using incorrect casing. ' + 'Use PascalCase for React components, ' + 'or lowercase for HTML elements.', element.type) : void 0;
       }
     }
 
@@ -2560,9 +2610,11 @@ var ReactDOMServerRenderer = function () {
           }
           var isArray = Array.isArray(props[propName]);
           if (props.multiple && !isArray) {
-            warning(false, 'The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.%s', propName, '');
+            warning(false, 'The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.%s', propName, '' // getDeclarationErrorAddendum(),
+            );
           } else if (!props.multiple && isArray) {
-            warning(false, 'The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.%s', propName, '');
+            warning(false, 'The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.%s', propName, '' // getDeclarationErrorAddendum(),
+            );
           }
         }
 
@@ -2710,7 +2762,7 @@ var ReactDOMServer = ( ReactDOMServerBrowser$1 && ReactDOMServerBrowser ) || Rea
 
 // TODO: decide on the top-level export form.
 // This is hacky but makes it work with both Rollup and Jest
-var server_browser = ReactDOMServer['default'] ? ReactDOMServer['default'] : ReactDOMServer;
+var server_browser = ReactDOMServer.default ? ReactDOMServer.default : ReactDOMServer;
 
 module.exports = server_browser;
   })();