react-dom 16.8.0-alpha.0 → 16.8.2

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

@@ -1,4 +1,4 @@
-/** @license React v16.8.0-alpha.0
+/** @license React v16.8.2
  * react-dom-server.node.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -22,7 +22,7 @@ var stream = require('stream');
 
 // TODO: this is special because it gets imported during build.
 
-var ReactVersion = '16.8.0-alpha.0';
+var ReactVersion = '16.8.2';
 
 /**
  * Use invariant() to assert state which your program assumes to be true.
@@ -257,6 +257,15 @@ var lowPriorityWarning$1 = lowPriorityWarning;
 
 var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
+// Prevent newer renderers from RTE when used with older react package versions.
+// Current owner and dispatcher used to share the same ref,
+// but PR #14548 split them out to better support the react-debug-tools package.
+if (!ReactSharedInternals.hasOwnProperty('ReactCurrentDispatcher')) {
+  ReactSharedInternals.ReactCurrentDispatcher = {
+    current: null
+  };
+}
+
 /**
  * Similar to invariant but only logs a warning if the condition is not met.
  * This can be used to log issues in development environments in critical
@@ -313,7 +322,6 @@ var describeComponentFrame = function (name, source, ownerName) {
   return '\n    in ' + (name || 'Unknown') + sourceInfo;
 };
 
-var enableHooks = true;
 // Helps identify side effects in begin-phase lifecycle hooks and setState reducers:
 
 
@@ -734,12 +742,15 @@ var capitalize = function (token) {
   attributeName, 'http://www.w3.org/XML/1998/namespace');
 });
 
-// Special case: this attribute exists both in HTML and SVG.
-// Its "tabindex" attribute name is case-sensitive in SVG so we can't just use
-// its React `tabIndex` name, like we do for attributes that exist only in HTML.
-properties.tabIndex = new PropertyInfoRecord('tabIndex', STRING, false, // mustUseProperty
-'tabindex', // attributeName
-null);
+// These attribute exists both in HTML and SVG.
+// The attribute name is case-sensitive in SVG so we can't just use
+// the React name like we do for attributes that exist only in HTML.
+['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
+  properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
+  attributeName.toLowerCase(), // attributeName
+  null);
+} // attributeNamespace
+);
 
 // code copied and modified from escape-html
 /**
@@ -903,21 +914,6 @@ function is(x, y) {
   ;
 }
 
-function areHookInputsEqual(arr1, arr2) {
-  // Don't bother comparing lengths in prod because these arrays should be
-  // passed inline.
-  {
-    !(arr1.length === arr2.length) ? warning$1(false, 'Detected a variable number of hook dependencies. The length of the ' + 'dependencies array should be constant between renders.\n\n' + 'Previous: %s\n' + 'Incoming: %s', arr1.join(', '), arr2.join(', ')) : void 0;
-  }
-  for (var i = 0; i < arr1.length; i++) {
-    if (is(arr1[i], arr2[i])) {
-      continue;
-    }
-    return false;
-  }
-  return true;
-}
-
 var currentlyRenderingComponent = null;
 var firstWorkInProgressHook = null;
 var workInProgressHook = null;
@@ -931,12 +927,47 @@ var renderPhaseUpdates = null;
 var numberOfReRenders = 0;
 var RE_RENDER_LIMIT = 25;
 
+var isInHookUserCodeInDev = false;
+
+// In DEV, this is the name of the currently executing primitive hook
+var currentHookNameInDev = void 0;
+
 function resolveCurrentlyRenderingComponent() {
-  !(currentlyRenderingComponent !== null) ? invariant(false, 'Hooks can only be called inside the body of a function component.') : void 0;
+  !(currentlyRenderingComponent !== null) ? invariant(false, 'Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)') : void 0;
+  {
+    !!isInHookUserCodeInDev ? warning$1(false, 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' + 'You can only call Hooks at the top level of your React function. ' + 'For more information, see ' + 'https://fb.me/rules-of-hooks') : void 0;
+  }
   return currentlyRenderingComponent;
 }
 
+function areHookInputsEqual(nextDeps, prevDeps) {
+  if (prevDeps === null) {
+    {
+      warning$1(false, '%s received a final argument during this render, but not during ' + 'the previous render. Even though the final argument is optional, ' + 'its type cannot change between renders.', currentHookNameInDev);
+    }
+    return false;
+  }
+
+  {
+    // Don't bother comparing lengths in prod because these arrays should be
+    // passed inline.
+    if (nextDeps.length !== prevDeps.length) {
+      warning$1(false, 'The final argument passed to %s changed size between renders. The ' + 'order and size of this array must remain constant.\n\n' + 'Previous: %s\n' + 'Incoming: %s', currentHookNameInDev, '[' + nextDeps.join(', ') + ']', '[' + prevDeps.join(', ') + ']');
+    }
+  }
+  for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
+    if (is(nextDeps[i], prevDeps[i])) {
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+
 function createHook() {
+  if (numberOfReRenders > 0) {
+    invariant(false, 'Rendered more hooks than during the previous render');
+  }
   return {
     memoizedState: null,
     queue: null,
@@ -971,6 +1002,9 @@ function createWorkInProgressHook() {
 
 function prepareToUseHooks(componentIdentity) {
   currentlyRenderingComponent = componentIdentity;
+  {
+    isInHookUserCodeInDev = false;
+  }
 
   // The following should have already been reset
   // didScheduleRenderPhaseUpdate = false;
@@ -1002,6 +1036,9 @@ function finishHooks(Component, props, children, refOrContext) {
   numberOfReRenders = 0;
   renderPhaseUpdates = null;
   workInProgressHook = null;
+  {
+    isInHookUserCodeInDev = false;
+  }
 
   // These were reset above
   // currentlyRenderingComponent = null;
@@ -1017,10 +1054,16 @@ function finishHooks(Component, props, children, refOrContext) {
 function readContext(context, observedBits) {
   var threadID = currentThreadID;
   validateContextBounds(context, threadID);
+  {
+    !!isInHookUserCodeInDev ? warning$1(false, 'Context can only be read while React is rendering. ' + 'In classes, you can read it in the render method or getDerivedStateFromProps. ' + 'In function components, you can read it directly in the function body, but not ' + 'inside Hooks like useReducer() or useMemo().') : void 0;
+  }
   return context[threadID];
 }
 
 function useContext(context, observedBits) {
+  {
+    currentHookNameInDev = 'useContext';
+  }
   resolveCurrentlyRenderingComponent();
   var threadID = currentThreadID;
   validateContextBounds(context, threadID);
@@ -1032,12 +1075,20 @@ function basicStateReducer(state, action) {
 }
 
 function useState(initialState) {
+  {
+    currentHookNameInDev = 'useState';
+  }
   return useReducer(basicStateReducer,
   // useReducer has a special case to support lazy useState initializers
   initialState);
 }
 
-function useReducer(reducer, initialState, initialAction) {
+function useReducer(reducer, initialArg, init) {
+  {
+    if (reducer !== basicStateReducer) {
+      currentHookNameInDev = 'useReducer';
+    }
+  }
   currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
   workInProgressHook = createWorkInProgressHook();
   if (isReRender) {
@@ -1056,7 +1107,13 @@ function useReducer(reducer, initialState, initialAction) {
           // priority because it will always be the same as the current
           // render's.
           var _action = update.action;
+          {
+            isInHookUserCodeInDev = true;
+          }
           newState = reducer(newState, _action);
+          {
+            isInHookUserCodeInDev = false;
+          }
           update = update.next;
         } while (update !== null);
 
@@ -1067,13 +1124,18 @@ function useReducer(reducer, initialState, initialAction) {
     }
     return [workInProgressHook.memoizedState, _dispatch];
   } else {
+    {
+      isInHookUserCodeInDev = true;
+    }
+    var initialState = void 0;
     if (reducer === basicStateReducer) {
       // Special case for `useState`.
-      if (typeof initialState === 'function') {
-        initialState = initialState();
-      }
-    } else if (initialAction !== undefined && initialAction !== null) {
-      initialState = reducer(initialState, initialAction);
+      initialState = typeof initialArg === 'function' ? initialArg() : initialArg;
+    } else {
+      initialState = init !== undefined ? init(initialArg) : initialArg;
+    }
+    {
+      isInHookUserCodeInDev = false;
     }
     workInProgressHook.memoizedState = initialState;
     var _queue2 = workInProgressHook.queue = {
@@ -1085,22 +1147,32 @@ function useReducer(reducer, initialState, initialAction) {
   }
 }
 
-function useMemo(nextCreate, inputs) {
+function useMemo(nextCreate, deps) {
   currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
   workInProgressHook = createWorkInProgressHook();
 
-  var nextInputs = inputs !== undefined && inputs !== null ? inputs : [nextCreate];
+  var nextDeps = deps === undefined ? null : deps;
 
-  if (workInProgressHook !== null && workInProgressHook.memoizedState !== null) {
+  if (workInProgressHook !== null) {
     var prevState = workInProgressHook.memoizedState;
-    var prevInputs = prevState[1];
-    if (areHookInputsEqual(nextInputs, prevInputs)) {
-      return prevState[0];
+    if (prevState !== null) {
+      if (nextDeps !== null) {
+        var prevDeps = prevState[1];
+        if (areHookInputsEqual(nextDeps, prevDeps)) {
+          return prevState[0];
+        }
+      }
     }
   }
 
+  {
+    isInHookUserCodeInDev = true;
+  }
   var nextValue = nextCreate();
-  workInProgressHook.memoizedState = [nextValue, nextInputs];
+  {
+    isInHookUserCodeInDev = false;
+  }
+  workInProgressHook.memoizedState = [nextValue, nextDeps];
   return nextValue;
 }
 
@@ -1121,6 +1193,9 @@ function useRef(initialValue) {
 }
 
 function useLayoutEffect(create, inputs) {
+  {
+    currentHookNameInDev = 'useLayoutEffect';
+  }
   warning$1(false, 'useLayoutEffect does nothing on the server, because its effect cannot ' + "be encoded into the server renderer's output format. This will lead " + 'to a mismatch between the initial, non-hydrated UI and the intended ' + 'UI. To avoid this, useLayoutEffect should only be used in ' + 'components that render exclusively on the client.');
 }
 
@@ -1157,11 +1232,13 @@ function dispatchAction(componentIdentity, queue, action) {
   }
 }
 
-function noop() {}
-function identity(fn) {
-  return fn;
+function useCallback(callback, deps) {
+  // Callbacks are passed as they are in the server environment.
+  return callback;
 }
 
+function noop() {}
+
 var currentThreadID = 0;
 
 function setCurrentThreadID(threadID) {
@@ -1176,15 +1253,13 @@ var Dispatcher = {
   useRef: useRef,
   useState: useState,
   useLayoutEffect: useLayoutEffect,
-  // Callbacks are passed as they are in the server environment.
-  useCallback: identity,
-  // useImperativeMethods is not run in the server environment
-  useImperativeMethods: noop,
+  useCallback: useCallback,
+  // useImperativeHandle is not run in the server environment
+  useImperativeHandle: noop,
   // Effects are not run in the server environment.
-  useEffect: noop
-};
-var DispatcherWithoutHooks = {
-  readContext: readContext
+  useEffect: noop,
+  // Debugging effect
+  useDebugValue: noop
 };
 
 var HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
@@ -3002,11 +3077,7 @@ var ReactDOMServerRenderer = function () {
     var prevThreadID = currentThreadID;
     setCurrentThreadID(this.threadID);
     var prevDispatcher = ReactCurrentDispatcher.current;
-    if (enableHooks) {
-      ReactCurrentDispatcher.current = Dispatcher;
-    } else {
-      ReactCurrentDispatcher.current = DispatcherWithoutHooks;
-    }
+    ReactCurrentDispatcher.current = Dispatcher;
     try {
       // Markup generated within <Suspense> ends up buffered until we know
       // nothing in that boundary suspended
@@ -3163,7 +3234,25 @@ var ReactDOMServerRenderer = function () {
         case REACT_SUSPENSE_TYPE:
           {
             if (enableSuspenseServerRenderer) {
-              var fallbackChildren = toArray(nextChild.props.fallback);
+              var fallback = nextChild.props.fallback;
+              if (fallback === undefined) {
+                // If there is no fallback, then this just behaves as a fragment.
+                var _nextChildren3 = toArray(nextChild.props.children);
+                var _frame3 = {
+                  type: null,
+                  domNamespace: parentNamespace,
+                  children: _nextChildren3,
+                  childIndex: 0,
+                  context: context,
+                  footer: ''
+                };
+                {
+                  _frame3.debugElementStack = [];
+                }
+                this.stack.push(_frame3);
+                return '';
+              }
+              var fallbackChildren = toArray(fallback);
               var _nextChildren2 = toArray(nextChild.props.children);
               var _fallbackFrame2 = {
                 type: null,
@@ -3181,7 +3270,7 @@ var ReactDOMServerRenderer = function () {
                 children: _nextChildren2,
                 childIndex: 0,
                 context: context,
-                footer: ''
+                footer: '<!--/$-->'
               };
               {
                 _frame2.debugElementStack = [];
@@ -3189,7 +3278,7 @@ var ReactDOMServerRenderer = function () {
               }
               this.stack.push(_frame2);
               this.suspenseDepth++;
-              return '';
+              return '<!--$-->';
             } else {
               invariant(false, 'ReactDOMServer does not yet support Suspense.');
             }
@@ -3203,64 +3292,64 @@ var ReactDOMServerRenderer = function () {
           case REACT_FORWARD_REF_TYPE:
             {
               var element = nextChild;
-              var _nextChildren3 = void 0;
+              var _nextChildren4 = void 0;
               var componentIdentity = {};
               prepareToUseHooks(componentIdentity);
-              _nextChildren3 = elementType.render(element.props, element.ref);
-              _nextChildren3 = finishHooks(elementType.render, element.props, _nextChildren3, element.ref);
-              _nextChildren3 = toArray(_nextChildren3);
-              var _frame3 = {
+              _nextChildren4 = elementType.render(element.props, element.ref);
+              _nextChildren4 = finishHooks(elementType.render, element.props, _nextChildren4, element.ref);
+              _nextChildren4 = toArray(_nextChildren4);
+              var _frame4 = {
                 type: null,
                 domNamespace: parentNamespace,
-                children: _nextChildren3,
+                children: _nextChildren4,
                 childIndex: 0,
                 context: context,
                 footer: ''
               };
               {
-                _frame3.debugElementStack = [];
+                _frame4.debugElementStack = [];
               }
-              this.stack.push(_frame3);
+              this.stack.push(_frame4);
               return '';
             }
           case REACT_MEMO_TYPE:
             {
               var _element = nextChild;
-              var _nextChildren4 = [React.createElement(elementType.type, _assign({ ref: _element.ref }, _element.props))];
-              var _frame4 = {
+              var _nextChildren5 = [React.createElement(elementType.type, _assign({ ref: _element.ref }, _element.props))];
+              var _frame5 = {
                 type: null,
                 domNamespace: parentNamespace,
-                children: _nextChildren4,
+                children: _nextChildren5,
                 childIndex: 0,
                 context: context,
                 footer: ''
               };
               {
-                _frame4.debugElementStack = [];
+                _frame5.debugElementStack = [];
               }
-              this.stack.push(_frame4);
+              this.stack.push(_frame5);
               return '';
             }
           case REACT_PROVIDER_TYPE:
             {
               var provider = nextChild;
               var nextProps = provider.props;
-              var _nextChildren5 = toArray(nextProps.children);
-              var _frame5 = {
+              var _nextChildren6 = toArray(nextProps.children);
+              var _frame6 = {
                 type: provider,
                 domNamespace: parentNamespace,
-                children: _nextChildren5,
+                children: _nextChildren6,
                 childIndex: 0,
                 context: context,
                 footer: ''
               };
               {
-                _frame5.debugElementStack = [];
+                _frame6.debugElementStack = [];
               }
 
               this.pushProvider(provider);
 
-              this.stack.push(_frame5);
+              this.stack.push(_frame6);
               return '';
             }
           case REACT_CONTEXT_TYPE:
@@ -3293,19 +3382,19 @@ var ReactDOMServerRenderer = function () {
               validateContextBounds(reactContext, threadID);
               var nextValue = reactContext[threadID];
 
-              var _nextChildren6 = toArray(_nextProps.children(nextValue));
-              var _frame6 = {
+              var _nextChildren7 = toArray(_nextProps.children(nextValue));
+              var _frame7 = {
                 type: nextChild,
                 domNamespace: parentNamespace,
-                children: _nextChildren6,
+                children: _nextChildren7,
                 childIndex: 0,
                 context: context,
                 footer: ''
               };
               {
-                _frame6.debugElementStack = [];
+                _frame7.debugElementStack = [];
               }
-              this.stack.push(_frame6);
+              this.stack.push(_frame7);
               return '';
             }
           case REACT_LAZY_TYPE: