react 19.0.0-canary-95e6f032c-20240401 → 19.0.0-canary-7a2609eed-20240403

Sign up to get free protection for your applications and to get access to all the features.
@@ -35,7 +35,6 @@ var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
35
35
  var REACT_MEMO_TYPE = Symbol.for('react.memo');
36
36
  var REACT_LAZY_TYPE = Symbol.for('react.lazy');
37
37
  var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
38
- var REACT_CACHE_TYPE = Symbol.for('react.cache');
39
38
  var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
40
39
  var FAUX_ITERATOR_SYMBOL = '@@iterator';
41
40
  function getIteratorFn(maybeIterable) {
@@ -94,18 +93,16 @@ function printWarning(level, format, args) {
94
93
  // -----------------------------------------------------------------------------
95
94
 
96
95
  var enableScopeAPI = false; // Experimental Create Event Handle API.
97
- var enableCacheElement = false;
98
96
  var enableTransitionTracing = false; // No known bugs, but needs performance testing
99
97
 
100
98
  var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
101
- // Ready for next major.
102
- //
103
- // Alias __NEXT_MAJOR__ to false for easier skimming.
104
- // -----------------------------------------------------------------------------
99
+ // as a normal prop instead of stripping it from the props object.
100
+ // Passes `ref` as a normal prop instead of stripping it from the props object
101
+ // during element creation.
105
102
 
106
- var __NEXT_MAJOR__ = false; // Removes legacy style context
103
+ var enableRefAsProp = true;
107
104
 
108
- var enableRenderableContext = __NEXT_MAJOR__; // -----------------------------------------------------------------------------
105
+ var enableRenderableContext = true; // -----------------------------------------------------------------------------
109
106
  // stuff. Intended to enable React core members to more easily debug scheduling
110
107
  // issues in DEV builds.
111
108
 
@@ -167,11 +164,6 @@ function getComponentNameFromType(type) {
167
164
  case REACT_SUSPENSE_LIST_TYPE:
168
165
  return 'SuspenseList';
169
166
 
170
- case REACT_CACHE_TYPE:
171
- {
172
- return 'Cache';
173
- }
174
-
175
167
  }
176
168
 
177
169
  if (typeof type === 'object') {
@@ -184,20 +176,20 @@ function getComponentNameFromType(type) {
184
176
  switch (type.$$typeof) {
185
177
  case REACT_PROVIDER_TYPE:
186
178
  {
187
- var provider = type;
188
- return getContextName(provider._context) + '.Provider';
179
+ return null;
189
180
  }
190
181
 
191
182
  case REACT_CONTEXT_TYPE:
192
183
  var context = type;
193
184
 
194
185
  {
195
- return getContextName(context) + '.Consumer';
186
+ return getContextName(context) + '.Provider';
196
187
  }
197
188
 
198
189
  case REACT_CONSUMER_TYPE:
199
190
  {
200
- return null;
191
+ var consumer = type;
192
+ return getContextName(consumer._context) + '.Consumer';
201
193
  }
202
194
 
203
195
  case REACT_FORWARD_REF_TYPE:
@@ -310,12 +302,12 @@ function isValidElementType(type) {
310
302
  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
311
303
 
312
304
 
313
- if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {
305
+ if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableTransitionTracing ) {
314
306
  return true;
315
307
  }
316
308
 
317
309
  if (typeof type === 'object' && type !== null) {
318
- if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || enableRenderableContext || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
310
+ if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || !enableRenderableContext || type.$$typeof === REACT_CONSUMER_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
319
311
  // types supported by any Flight configuration anywhere since
320
312
  // we don't know which Flight build this will end up being used
321
313
  // with.
@@ -758,11 +750,10 @@ var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
758
750
  var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
759
751
  var REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference');
760
752
  var specialPropKeyWarningShown;
761
- var specialPropRefWarningShown;
762
- var didWarnAboutStringRefs;
753
+ var didWarnAboutElementRef;
763
754
 
764
755
  {
765
- didWarnAboutStringRefs = {};
756
+ didWarnAboutElementRef = {};
766
757
  }
767
758
 
768
759
  function hasValidRef(config) {
@@ -793,20 +784,6 @@ function hasValidKey(config) {
793
784
  return config.key !== undefined;
794
785
  }
795
786
 
796
- function warnIfStringRefCannotBeAutoConverted(config, self) {
797
- {
798
- if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
799
- var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
800
-
801
- if (!didWarnAboutStringRefs[componentName]) {
802
- error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://react.dev/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
803
-
804
- didWarnAboutStringRefs[componentName] = true;
805
- }
806
- }
807
- }
808
- }
809
-
810
787
  function defineKeyPropWarningGetter(props, displayName) {
811
788
  {
812
789
  var warnAboutAccessingKey = function () {
@@ -825,23 +802,20 @@ function defineKeyPropWarningGetter(props, displayName) {
825
802
  }
826
803
  }
827
804
 
828
- function defineRefPropWarningGetter(props, displayName) {
805
+ function elementRefGetterWithDeprecationWarning() {
829
806
  {
830
- {
831
- var warnAboutAccessingRef = function () {
832
- if (!specialPropRefWarningShown) {
833
- specialPropRefWarningShown = true;
807
+ var componentName = getComponentNameFromType(this.type);
834
808
 
835
- error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://react.dev/link/special-props)', displayName);
836
- }
837
- };
809
+ if (!didWarnAboutElementRef[componentName]) {
810
+ didWarnAboutElementRef[componentName] = true;
838
811
 
839
- warnAboutAccessingRef.isReactWarning = true;
840
- Object.defineProperty(props, 'ref', {
841
- get: warnAboutAccessingRef,
842
- configurable: true
843
- });
844
- }
812
+ error('Accessing element.ref was removed in React 19. ref is now a ' + 'regular prop. It will be removed from the JSX Element ' + 'type in a future release.');
813
+ } // An undefined `element.ref` is coerced to `null` for
814
+ // backwards compatibility.
815
+
816
+
817
+ var refProp = this.props.ref;
818
+ return refProp !== undefined ? refProp : null;
845
819
  }
846
820
  }
847
821
  /**
@@ -870,25 +844,60 @@ function ReactElement(type, key, _ref, self, source, owner, props) {
870
844
  var ref;
871
845
 
872
846
  {
873
- ref = _ref;
847
+ // When enableRefAsProp is on, ignore whatever was passed as the ref
848
+ // argument and treat `props.ref` as the source of truth. The only thing we
849
+ // use this for is `element.ref`, which will log a deprecation warning on
850
+ // access. In the next release, we can remove `element.ref` as well as the
851
+ // `ref` argument.
852
+ var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
853
+ // backwards compatibility.
854
+
855
+ ref = refProp !== undefined ? refProp : null;
874
856
  }
875
857
 
876
858
  var element;
877
859
 
878
860
  {
879
- // In prod, `ref` is a regular property. It will be removed in a
880
- // future release.
861
+ // In dev, make `ref` a non-enumerable property with a warning. It's non-
862
+ // enumerable so that test matchers and serializers don't access it and
863
+ // trigger the warning.
864
+ //
865
+ // `ref` will be removed from the element completely in a future release.
881
866
  element = {
882
867
  // This tag allows us to uniquely identify this as a React Element
883
868
  $$typeof: REACT_ELEMENT_TYPE,
884
869
  // Built-in properties that belong on the element
885
870
  type: type,
886
871
  key: key,
887
- ref: ref,
888
872
  props: props,
889
873
  // Record the component responsible for creating this element.
890
874
  _owner: owner
891
875
  };
876
+
877
+ if (ref !== null) {
878
+ Object.defineProperty(element, 'ref', {
879
+ enumerable: false,
880
+ get: elementRefGetterWithDeprecationWarning
881
+ });
882
+ } else {
883
+ // Don't warn on access if a ref is not given. This reduces false
884
+ // positives in cases where a test serializer uses
885
+ // getOwnPropertyDescriptors to compare objects, like Jest does, which is
886
+ // a problem because it bypasses non-enumerability.
887
+ //
888
+ // So unfortunately this will trigger a false positive warning in Jest
889
+ // when the diff is printed:
890
+ //
891
+ // expect(<div ref={ref} />).toEqual(<span ref={ref} />);
892
+ //
893
+ // A bit sketchy, but this is what we've done for the `props.key` and
894
+ // `props.ref` accessors for years, which implies it will be good enough
895
+ // for `element.ref`, too. Let's see if anyone complains.
896
+ Object.defineProperty(element, 'ref', {
897
+ enumerable: false,
898
+ value: null
899
+ });
900
+ }
892
901
  }
893
902
 
894
903
  {
@@ -1030,20 +1039,12 @@ function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
1030
1039
  key = '' + config.key;
1031
1040
  }
1032
1041
 
1033
- if (hasValidRef(config)) {
1034
- {
1035
- ref = config.ref;
1036
- }
1037
-
1038
- {
1039
- warnIfStringRefCannotBeAutoConverted(config, self);
1040
- }
1041
- } // Remaining properties are added to a new props object
1042
+ if (hasValidRef(config)) ; // Remaining properties are added to a new props object
1042
1043
 
1043
1044
 
1044
1045
  for (propName in config) {
1045
1046
  if (hasOwnProperty.call(config, propName) && // Skip over reserved prop names
1046
- propName !== 'key' && (propName !== 'ref')) {
1047
+ propName !== 'key' && (enableRefAsProp )) {
1047
1048
  props[propName] = config[propName];
1048
1049
  }
1049
1050
  } // Resolve default props
@@ -1059,16 +1060,12 @@ function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
1059
1060
  }
1060
1061
  }
1061
1062
 
1062
- if (key || ref) {
1063
+ if (key || !enableRefAsProp ) {
1063
1064
  var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
1064
1065
 
1065
1066
  if (key) {
1066
1067
  defineKeyPropWarningGetter(props, displayName);
1067
1068
  }
1068
-
1069
- if (ref) {
1070
- defineRefPropWarningGetter(props, displayName);
1071
- }
1072
1069
  }
1073
1070
 
1074
1071
  var element = ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
@@ -1251,14 +1248,6 @@ function validateFragmentProps(fragment) {
1251
1248
  break;
1252
1249
  }
1253
1250
  }
1254
-
1255
- if (fragment.ref !== null) {
1256
- setCurrentlyValidatingElement(fragment);
1257
-
1258
- error('Invalid attribute `ref` supplied to `React.Fragment`.');
1259
-
1260
- setCurrentlyValidatingElement(null);
1261
- }
1262
1251
  }
1263
1252
  }
1264
1253
 
@@ -35,7 +35,6 @@ var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
35
35
  var REACT_MEMO_TYPE = Symbol.for('react.memo');
36
36
  var REACT_LAZY_TYPE = Symbol.for('react.lazy');
37
37
  var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
38
- var REACT_CACHE_TYPE = Symbol.for('react.cache');
39
38
  var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
40
39
  var FAUX_ITERATOR_SYMBOL = '@@iterator';
41
40
  function getIteratorFn(maybeIterable) {
@@ -94,18 +93,16 @@ function printWarning(level, format, args) {
94
93
  // -----------------------------------------------------------------------------
95
94
 
96
95
  var enableScopeAPI = false; // Experimental Create Event Handle API.
97
- var enableCacheElement = false;
98
96
  var enableTransitionTracing = false; // No known bugs, but needs performance testing
99
97
 
100
98
  var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
101
- // Ready for next major.
102
- //
103
- // Alias __NEXT_MAJOR__ to false for easier skimming.
104
- // -----------------------------------------------------------------------------
99
+ // as a normal prop instead of stripping it from the props object.
100
+ // Passes `ref` as a normal prop instead of stripping it from the props object
101
+ // during element creation.
105
102
 
106
- var __NEXT_MAJOR__ = false; // Removes legacy style context
103
+ var enableRefAsProp = true;
107
104
 
108
- var enableRenderableContext = __NEXT_MAJOR__; // -----------------------------------------------------------------------------
105
+ var enableRenderableContext = true; // -----------------------------------------------------------------------------
109
106
  // stuff. Intended to enable React core members to more easily debug scheduling
110
107
  // issues in DEV builds.
111
108
 
@@ -167,11 +164,6 @@ function getComponentNameFromType(type) {
167
164
  case REACT_SUSPENSE_LIST_TYPE:
168
165
  return 'SuspenseList';
169
166
 
170
- case REACT_CACHE_TYPE:
171
- {
172
- return 'Cache';
173
- }
174
-
175
167
  }
176
168
 
177
169
  if (typeof type === 'object') {
@@ -184,20 +176,20 @@ function getComponentNameFromType(type) {
184
176
  switch (type.$$typeof) {
185
177
  case REACT_PROVIDER_TYPE:
186
178
  {
187
- var provider = type;
188
- return getContextName(provider._context) + '.Provider';
179
+ return null;
189
180
  }
190
181
 
191
182
  case REACT_CONTEXT_TYPE:
192
183
  var context = type;
193
184
 
194
185
  {
195
- return getContextName(context) + '.Consumer';
186
+ return getContextName(context) + '.Provider';
196
187
  }
197
188
 
198
189
  case REACT_CONSUMER_TYPE:
199
190
  {
200
- return null;
191
+ var consumer = type;
192
+ return getContextName(consumer._context) + '.Consumer';
201
193
  }
202
194
 
203
195
  case REACT_FORWARD_REF_TYPE:
@@ -310,12 +302,12 @@ function isValidElementType(type) {
310
302
  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
311
303
 
312
304
 
313
- if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {
305
+ if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableTransitionTracing ) {
314
306
  return true;
315
307
  }
316
308
 
317
309
  if (typeof type === 'object' && type !== null) {
318
- if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || enableRenderableContext || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
310
+ if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || !enableRenderableContext || type.$$typeof === REACT_CONSUMER_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
319
311
  // types supported by any Flight configuration anywhere since
320
312
  // we don't know which Flight build this will end up being used
321
313
  // with.
@@ -758,11 +750,10 @@ var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
758
750
  var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
759
751
  var REACT_CLIENT_REFERENCE = Symbol.for('react.client.reference');
760
752
  var specialPropKeyWarningShown;
761
- var specialPropRefWarningShown;
762
- var didWarnAboutStringRefs;
753
+ var didWarnAboutElementRef;
763
754
 
764
755
  {
765
- didWarnAboutStringRefs = {};
756
+ didWarnAboutElementRef = {};
766
757
  }
767
758
 
768
759
  function hasValidRef(config) {
@@ -793,20 +784,6 @@ function hasValidKey(config) {
793
784
  return config.key !== undefined;
794
785
  }
795
786
 
796
- function warnIfStringRefCannotBeAutoConverted(config, self) {
797
- {
798
- if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
799
- var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
800
-
801
- if (!didWarnAboutStringRefs[componentName]) {
802
- error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://react.dev/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
803
-
804
- didWarnAboutStringRefs[componentName] = true;
805
- }
806
- }
807
- }
808
- }
809
-
810
787
  function defineKeyPropWarningGetter(props, displayName) {
811
788
  {
812
789
  var warnAboutAccessingKey = function () {
@@ -825,23 +802,20 @@ function defineKeyPropWarningGetter(props, displayName) {
825
802
  }
826
803
  }
827
804
 
828
- function defineRefPropWarningGetter(props, displayName) {
805
+ function elementRefGetterWithDeprecationWarning() {
829
806
  {
830
- {
831
- var warnAboutAccessingRef = function () {
832
- if (!specialPropRefWarningShown) {
833
- specialPropRefWarningShown = true;
807
+ var componentName = getComponentNameFromType(this.type);
834
808
 
835
- error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://react.dev/link/special-props)', displayName);
836
- }
837
- };
809
+ if (!didWarnAboutElementRef[componentName]) {
810
+ didWarnAboutElementRef[componentName] = true;
838
811
 
839
- warnAboutAccessingRef.isReactWarning = true;
840
- Object.defineProperty(props, 'ref', {
841
- get: warnAboutAccessingRef,
842
- configurable: true
843
- });
844
- }
812
+ error('Accessing element.ref was removed in React 19. ref is now a ' + 'regular prop. It will be removed from the JSX Element ' + 'type in a future release.');
813
+ } // An undefined `element.ref` is coerced to `null` for
814
+ // backwards compatibility.
815
+
816
+
817
+ var refProp = this.props.ref;
818
+ return refProp !== undefined ? refProp : null;
845
819
  }
846
820
  }
847
821
  /**
@@ -870,25 +844,60 @@ function ReactElement(type, key, _ref, self, source, owner, props) {
870
844
  var ref;
871
845
 
872
846
  {
873
- ref = _ref;
847
+ // When enableRefAsProp is on, ignore whatever was passed as the ref
848
+ // argument and treat `props.ref` as the source of truth. The only thing we
849
+ // use this for is `element.ref`, which will log a deprecation warning on
850
+ // access. In the next release, we can remove `element.ref` as well as the
851
+ // `ref` argument.
852
+ var refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
853
+ // backwards compatibility.
854
+
855
+ ref = refProp !== undefined ? refProp : null;
874
856
  }
875
857
 
876
858
  var element;
877
859
 
878
860
  {
879
- // In prod, `ref` is a regular property. It will be removed in a
880
- // future release.
861
+ // In dev, make `ref` a non-enumerable property with a warning. It's non-
862
+ // enumerable so that test matchers and serializers don't access it and
863
+ // trigger the warning.
864
+ //
865
+ // `ref` will be removed from the element completely in a future release.
881
866
  element = {
882
867
  // This tag allows us to uniquely identify this as a React Element
883
868
  $$typeof: REACT_ELEMENT_TYPE,
884
869
  // Built-in properties that belong on the element
885
870
  type: type,
886
871
  key: key,
887
- ref: ref,
888
872
  props: props,
889
873
  // Record the component responsible for creating this element.
890
874
  _owner: owner
891
875
  };
876
+
877
+ if (ref !== null) {
878
+ Object.defineProperty(element, 'ref', {
879
+ enumerable: false,
880
+ get: elementRefGetterWithDeprecationWarning
881
+ });
882
+ } else {
883
+ // Don't warn on access if a ref is not given. This reduces false
884
+ // positives in cases where a test serializer uses
885
+ // getOwnPropertyDescriptors to compare objects, like Jest does, which is
886
+ // a problem because it bypasses non-enumerability.
887
+ //
888
+ // So unfortunately this will trigger a false positive warning in Jest
889
+ // when the diff is printed:
890
+ //
891
+ // expect(<div ref={ref} />).toEqual(<span ref={ref} />);
892
+ //
893
+ // A bit sketchy, but this is what we've done for the `props.key` and
894
+ // `props.ref` accessors for years, which implies it will be good enough
895
+ // for `element.ref`, too. Let's see if anyone complains.
896
+ Object.defineProperty(element, 'ref', {
897
+ enumerable: false,
898
+ value: null
899
+ });
900
+ }
892
901
  }
893
902
 
894
903
  {
@@ -1054,20 +1063,12 @@ function jsxDEV(type, config, maybeKey, isStaticChildren, source, self) {
1054
1063
  key = '' + config.key;
1055
1064
  }
1056
1065
 
1057
- if (hasValidRef(config)) {
1058
- {
1059
- ref = config.ref;
1060
- }
1061
-
1062
- {
1063
- warnIfStringRefCannotBeAutoConverted(config, self);
1064
- }
1065
- } // Remaining properties are added to a new props object
1066
+ if (hasValidRef(config)) ; // Remaining properties are added to a new props object
1066
1067
 
1067
1068
 
1068
1069
  for (propName in config) {
1069
1070
  if (hasOwnProperty.call(config, propName) && // Skip over reserved prop names
1070
- propName !== 'key' && (propName !== 'ref')) {
1071
+ propName !== 'key' && (enableRefAsProp )) {
1071
1072
  props[propName] = config[propName];
1072
1073
  }
1073
1074
  } // Resolve default props
@@ -1083,16 +1084,12 @@ function jsxDEV(type, config, maybeKey, isStaticChildren, source, self) {
1083
1084
  }
1084
1085
  }
1085
1086
 
1086
- if (key || ref) {
1087
+ if (key || !enableRefAsProp ) {
1087
1088
  var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
1088
1089
 
1089
1090
  if (key) {
1090
1091
  defineKeyPropWarningGetter(props, displayName);
1091
1092
  }
1092
-
1093
- if (ref) {
1094
- defineRefPropWarningGetter(props, displayName);
1095
- }
1096
1093
  }
1097
1094
 
1098
1095
  var element = ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
@@ -1275,14 +1272,6 @@ function validateFragmentProps(fragment) {
1275
1272
  break;
1276
1273
  }
1277
1274
  }
1278
-
1279
- if (fragment.ref !== null) {
1280
- setCurrentlyValidatingElement(fragment);
1281
-
1282
- error('Invalid attribute `ref` supplied to `React.Fragment`.');
1283
-
1284
- setCurrentlyValidatingElement(null);
1285
- }
1286
1275
  }
1287
1276
  }
1288
1277
 
@@ -19,6 +19,13 @@ var React = require('react');
19
19
  const REACT_ELEMENT_TYPE = Symbol.for('react.element');
20
20
  const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
21
21
 
22
+ // -----------------------------------------------------------------------------
23
+ // as a normal prop instead of stripping it from the props object.
24
+ // Passes `ref` as a normal prop instead of stripping it from the props object
25
+ // during element creation.
26
+
27
+ const enableRefAsProp = true;
28
+
22
29
  const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
23
30
 
24
31
  // $FlowFixMe[method-unbinding]
@@ -26,11 +33,6 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
26
33
 
27
34
  const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
28
35
 
29
- function hasValidRef(config) {
30
-
31
- return config.ref !== undefined;
32
- }
33
-
34
36
  function hasValidKey(config) {
35
37
 
36
38
  return config.key !== undefined;
@@ -61,7 +63,15 @@ function ReactElement(type, key, _ref, self, source, owner, props) {
61
63
  let ref;
62
64
 
63
65
  {
64
- ref = _ref;
66
+ // When enableRefAsProp is on, ignore whatever was passed as the ref
67
+ // argument and treat `props.ref` as the source of truth. The only thing we
68
+ // use this for is `element.ref`, which will log a deprecation warning on
69
+ // access. In the next release, we can remove `element.ref` as well as the
70
+ // `ref` argument.
71
+ const refProp = props.ref; // An undefined `element.ref` is coerced to `null` for
72
+ // backwards compatibility.
73
+
74
+ ref = refProp !== undefined ? refProp : null;
65
75
  }
66
76
 
67
77
  let element;
@@ -114,16 +124,10 @@ function jsxProd(type, config, maybeKey) {
114
124
  key = '' + config.key;
115
125
  }
116
126
 
117
- if (hasValidRef(config)) {
118
- {
119
- ref = config.ref;
120
- }
121
- } // Remaining properties are added to a new props object
122
-
123
127
 
124
128
  for (propName in config) {
125
129
  if (hasOwnProperty.call(config, propName) && // Skip over reserved prop names
126
- propName !== 'key' && (propName !== 'ref')) {
130
+ propName !== 'key' && (enableRefAsProp )) {
127
131
  props[propName] = config[propName];
128
132
  }
129
133
  } // Resolve default props
@@ -7,7 +7,7 @@
7
7
  This source code is licensed under the MIT license found in the
8
8
  LICENSE file in the root directory of this source tree.
9
9
  */
10
- 'use strict';var f=require("react"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
11
- function p(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&"key"!==b&&"ref"!==b&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=p;exports.jsxs=p;
10
+ 'use strict';var f=require("react"),h=Symbol.for("react.element"),k=Symbol.for("react.fragment"),l=Object.prototype.hasOwnProperty,m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
11
+ function n(d,b,g){var c={},e=null;void 0!==g&&(e=""+g);void 0!==b.key&&(e=""+b.key);for(a in b)l.call(b,a)&&"key"!==a&&(c[a]=b[a]);if(d&&d.defaultProps)for(a in b=d.defaultProps,b)void 0===c[a]&&(c[a]=b[a]);var a=c.ref;return{$$typeof:h,type:d,key:e,ref:void 0!==a?a:null,props:c,_owner:m.current}}exports.Fragment=k;exports.jsx=n;exports.jsxs=n;
12
12
 
13
13
  //# sourceMappingURL=react-jsx-runtime.production.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"react-jsx-runtime.production.min.js","lineCount":11,"mappings":"A;;;;;;;;;aAYA,IAAIA,EAAQC,OAAA,CAAQ,OAAR,CAAZ,CAMMC,EAAqBC,MAAOC,CAAAA,GAAP,CAAW,eAAX,CAN3B,CAOMC,EAAsBF,MAAOC,CAAAA,GAAP,CAAW,gBAAX,CAP5B,CAYME,EAAiBC,MAAOC,CAAAA,SAAUF,CAAAA,cAZxC,CAcMG,EALuBT,CAAMU,CAAAA,kDAKYD,CAAAA,iBAoE/CE;QAASA,EAAO,CAACC,CAAD,CAAOC,CAAP,CAAeC,CAAf,CAAyB,CACvC,IAAIC,CAAJ,CAEMC,EAAQ,EAFd,CAGIC,EAAM,IAHV,CAIIC,EAAM,IAOOC,KAAAA,EAAjB,GAAIL,CAAJ,GAEEG,CAFF,CAEQ,EAFR,CAEaH,CAFb,CAvEsBK,KAAAA,EA4EtB,GAAgBN,CA5EFI,CAAAA,GA4Ed,GAEEA,CAFF,CAEQ,EAFR,CAEaJ,CAAOI,CAAAA,GAFpB,CAjFsBE,KAAAA,EAsFtB,GAAgBN,CAtFFK,CAAAA,GAsFd,GAEIA,CAFJ,CAEUL,CAAOK,CAAAA,GAFjB,CAOA,KAAKH,CAAL,GAAiBF,EAAjB,CACMP,CAAec,CAAAA,IAAf,CAAoBP,CAApB,CAA4BE,CAA5B,CAAJ,EACa,KADb,GACAA,CADA,EACoC,KADpC,GACuBA,CADvB,GAEEC,CAAA,CAAMD,CAAN,CAFF,CAEoBF,CAAA,CAAOE,CAAP,CAFpB,CAOF,IAAIH,CAAJ,EAAYA,CAAKS,CAAAA,YAAjB,CAGE,IAAKN,CAAL,GAFMM,EAEWA,CAFIT,CAAKS,CAAAA,YAETA,CAAAA,CAAjB,CAC0BF,IAAAA,EAAxB,GAAIH,CAAA,CAAMD,CAAN,CAAJ,GACEC,CAAA,CAAMD,CAAN,CADF,CACoBM,CAAA,CAAaN,CAAb,CADpB,CAMJ,OAtEYO,CAERC,SAAUrB,CAFFoB,CAIRV,KAkEgBA,CAtERU,CAKRL,IAiEsBA,CAtEdK,CAMRJ,IAgE2BA,CAtEnBI,CAORN,MA+DiFA,CAtEzEM,CASRE,OA6DsDf,CAAkBgB,CAAAA,OAtEhEH,CAuB2B,CAuDzCI,OAAQC,CAAAA,QAAR,CAAmBtB,CACnBqB,QAAQE,CAAAA,GAAR,CAAcA,CACdF,QAAQG,CAAAA,IAAR,CAAeA;","sources":["react-jsx-runtime.production.js"],"names":["React","require","REACT_ELEMENT_TYPE","Symbol","for","REACT_FRAGMENT_TYPE","hasOwnProperty","Object","prototype","ReactCurrentOwner","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","jsxProd","type","config","maybeKey","propName","props","key","ref","undefined","call","defaultProps","element","$$typeof","_owner","current","exports","Fragment","jsx","jsxs"],"ignoreList":[0]}
1
+ {"version":3,"file":"react-jsx-runtime.production.min.js","lineCount":11,"mappings":"A;;;;;;;;;aAYA,IAAIA,EAAQC,OAAA,CAAQ,OAAR,CAAZ,CAMMC,EAAqBC,MAAOC,CAAAA,GAAP,CAAW,eAAX,CAN3B,CAOMC,EAAsBF,MAAOC,CAAAA,GAAP,CAAW,gBAAX,CAP5B,CAmBME,EAAiBC,MAAOC,CAAAA,SAAUF,CAAAA,cAnBxC,CAqBMG,EALuBT,CAAMU,CAAAA,kDAKYD,CAAAA,iBAuE/CE;QAASA,EAAO,CAACC,CAAD,CAAOC,CAAP,CAAeC,CAAf,CAAyB,CACvC,IAEMC,EAAQ,EAFd,CAGIC,EAAM,IAQOC,KAAAA,EAAjB,GAAIH,CAAJ,GAEEE,CAFF,CAEQ,EAFR,CAEaF,CAFb,CA/EsBG,KAAAA,EAoFtB,GAAgBJ,CApFFG,CAAAA,GAoFd,GAEEA,CAFF,CAEQ,EAFR,CAEaH,CAAOG,CAAAA,GAFpB,CAMA,KAAKE,CAAL,GAAiBL,EAAjB,CACMP,CAAea,CAAAA,IAAf,CAAoBN,CAApB,CAA4BK,CAA5B,CAAJ,EACa,KADb,GACAA,CADA,GAEEH,CAAA,CAAMG,CAAN,CAFF,CAEoBL,CAAA,CAAOK,CAAP,CAFpB,CAOF,IAAIN,CAAJ,EAAYA,CAAKQ,CAAAA,YAAjB,CAGE,IAAKF,CAAL,GAFME,EAEWA,CAFIR,CAAKQ,CAAAA,YAETA,CAAAA,CAAjB,CAC0BH,IAAAA,EAAxB,GAAIF,CAAA,CAAMG,CAAN,CAAJ,GACEH,CAAA,CAAMG,CAAN,CADF,CACoBE,CAAA,CAAaF,CAAb,CADpB,CArEIG,KAAAA,EA2E6EN,CA3E7DO,CAAAA,GA2ExB,OAhEYC,CAERC,SAAUtB,CAFFqB,CAIRX,KA4DgBA,CAhERW,CAKRP,IA2DsBA,CAhEdO,CAMRD,IAdgBL,IAAAA,EAAZK,GAAAD,CAAAC,CAAwBD,CAAxBC,CAAkC,IAQ9BC,CAORR,MAyDiFA,CAhEzEQ,CASRE,OAuDsDhB,CAAkBiB,CAAAA,OAhEhEH,CAuB2B,CAiDzCI,OAAQC,CAAAA,QAAR,CAAmBvB,CACnBsB,QAAQE,CAAAA,GAAR,CAAcA,CACdF,QAAQG,CAAAA,IAAR,CAAeA;","sources":["react-jsx-runtime.production.js"],"names":["React","require","REACT_ELEMENT_TYPE","Symbol","for","REACT_FRAGMENT_TYPE","hasOwnProperty","Object","prototype","ReactCurrentOwner","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","jsxProd","type","config","maybeKey","props","key","undefined","propName","call","defaultProps","refProp","ref","element","$$typeof","_owner","current","exports","Fragment","jsx","jsxs"],"ignoreList":[0]}