1 | /**
|
---|
2 | * @license React
|
---|
3 | * react-dom-server.browser.development.js
|
---|
4 | *
|
---|
5 | * Copyright (c) Facebook, Inc. and its affiliates.
|
---|
6 | *
|
---|
7 | * This source code is licensed under the MIT license found in the
|
---|
8 | * LICENSE file in the root directory of this source tree.
|
---|
9 | */
|
---|
10 |
|
---|
11 | 'use strict';
|
---|
12 |
|
---|
13 | if (process.env.NODE_ENV !== "production") {
|
---|
14 | (function() {
|
---|
15 | 'use strict';
|
---|
16 |
|
---|
17 | var React = require('react');
|
---|
18 |
|
---|
19 | var ReactVersion = '18.3.1';
|
---|
20 |
|
---|
21 | var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
---|
22 |
|
---|
23 | // by calls to these methods by a Babel plugin.
|
---|
24 | //
|
---|
25 | // In PROD (or in packages without access to React internals),
|
---|
26 | // they are left as they are instead.
|
---|
27 |
|
---|
28 | function warn(format) {
|
---|
29 | {
|
---|
30 | {
|
---|
31 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
---|
32 | args[_key - 1] = arguments[_key];
|
---|
33 | }
|
---|
34 |
|
---|
35 | printWarning('warn', format, args);
|
---|
36 | }
|
---|
37 | }
|
---|
38 | }
|
---|
39 | function error(format) {
|
---|
40 | {
|
---|
41 | {
|
---|
42 | for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
---|
43 | args[_key2 - 1] = arguments[_key2];
|
---|
44 | }
|
---|
45 |
|
---|
46 | printWarning('error', format, args);
|
---|
47 | }
|
---|
48 | }
|
---|
49 | }
|
---|
50 |
|
---|
51 | function printWarning(level, format, args) {
|
---|
52 | // When changing this logic, you might want to also
|
---|
53 | // update consoleWithStackDev.www.js as well.
|
---|
54 | {
|
---|
55 | var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
|
---|
56 | var stack = ReactDebugCurrentFrame.getStackAddendum();
|
---|
57 |
|
---|
58 | if (stack !== '') {
|
---|
59 | format += '%s';
|
---|
60 | args = args.concat([stack]);
|
---|
61 | } // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
62 |
|
---|
63 |
|
---|
64 | var argsWithFormat = args.map(function (item) {
|
---|
65 | return String(item);
|
---|
66 | }); // Careful: RN currently depends on this prefix
|
---|
67 |
|
---|
68 | argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
|
---|
69 | // breaks IE9: https://github.com/facebook/react/issues/13610
|
---|
70 | // eslint-disable-next-line react-internal/no-production-logging
|
---|
71 |
|
---|
72 | Function.prototype.apply.call(console[level], console, argsWithFormat);
|
---|
73 | }
|
---|
74 | }
|
---|
75 |
|
---|
76 | function scheduleWork(callback) {
|
---|
77 | callback();
|
---|
78 | }
|
---|
79 | var VIEW_SIZE = 512;
|
---|
80 | var currentView = null;
|
---|
81 | var writtenBytes = 0;
|
---|
82 | function beginWriting(destination) {
|
---|
83 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
84 | writtenBytes = 0;
|
---|
85 | }
|
---|
86 | function writeChunk(destination, chunk) {
|
---|
87 | if (chunk.length === 0) {
|
---|
88 | return;
|
---|
89 | }
|
---|
90 |
|
---|
91 | if (chunk.length > VIEW_SIZE) {
|
---|
92 | // this chunk may overflow a single view which implies it was not
|
---|
93 | // one that is cached by the streaming renderer. We will enqueu
|
---|
94 | // it directly and expect it is not re-used
|
---|
95 | if (writtenBytes > 0) {
|
---|
96 | destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
|
---|
97 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
98 | writtenBytes = 0;
|
---|
99 | }
|
---|
100 |
|
---|
101 | destination.enqueue(chunk);
|
---|
102 | return;
|
---|
103 | }
|
---|
104 |
|
---|
105 | var bytesToWrite = chunk;
|
---|
106 | var allowableBytes = currentView.length - writtenBytes;
|
---|
107 |
|
---|
108 | if (allowableBytes < bytesToWrite.length) {
|
---|
109 | // this chunk would overflow the current view. We enqueue a full view
|
---|
110 | // and start a new view with the remaining chunk
|
---|
111 | if (allowableBytes === 0) {
|
---|
112 | // the current view is already full, send it
|
---|
113 | destination.enqueue(currentView);
|
---|
114 | } else {
|
---|
115 | // fill up the current view and apply the remaining chunk bytes
|
---|
116 | // to a new view.
|
---|
117 | currentView.set(bytesToWrite.subarray(0, allowableBytes), writtenBytes); // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view
|
---|
118 |
|
---|
119 | destination.enqueue(currentView);
|
---|
120 | bytesToWrite = bytesToWrite.subarray(allowableBytes);
|
---|
121 | }
|
---|
122 |
|
---|
123 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
124 | writtenBytes = 0;
|
---|
125 | }
|
---|
126 |
|
---|
127 | currentView.set(bytesToWrite, writtenBytes);
|
---|
128 | writtenBytes += bytesToWrite.length;
|
---|
129 | }
|
---|
130 | function writeChunkAndReturn(destination, chunk) {
|
---|
131 | writeChunk(destination, chunk); // in web streams there is no backpressure so we can alwas write more
|
---|
132 |
|
---|
133 | return true;
|
---|
134 | }
|
---|
135 | function completeWriting(destination) {
|
---|
136 | if (currentView && writtenBytes > 0) {
|
---|
137 | destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes));
|
---|
138 | currentView = null;
|
---|
139 | writtenBytes = 0;
|
---|
140 | }
|
---|
141 | }
|
---|
142 | function close(destination) {
|
---|
143 | destination.close();
|
---|
144 | }
|
---|
145 | var textEncoder = new TextEncoder();
|
---|
146 | function stringToChunk(content) {
|
---|
147 | return textEncoder.encode(content);
|
---|
148 | }
|
---|
149 | function stringToPrecomputedChunk(content) {
|
---|
150 | return textEncoder.encode(content);
|
---|
151 | }
|
---|
152 | function closeWithError(destination, error) {
|
---|
153 | if (typeof destination.error === 'function') {
|
---|
154 | // $FlowFixMe: This is an Error object or the destination accepts other types.
|
---|
155 | destination.error(error);
|
---|
156 | } else {
|
---|
157 | // Earlier implementations doesn't support this method. In that environment you're
|
---|
158 | // supposed to throw from a promise returned but we don't return a promise in our
|
---|
159 | // approach. We could fork this implementation but this is environment is an edge
|
---|
160 | // case to begin with. It's even less common to run this in an older environment.
|
---|
161 | // Even then, this is not where errors are supposed to happen and they get reported
|
---|
162 | // to a global callback in addition to this anyway. So it's fine just to close this.
|
---|
163 | destination.close();
|
---|
164 | }
|
---|
165 | }
|
---|
166 |
|
---|
167 | /*
|
---|
168 | * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
|
---|
169 | * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
|
---|
170 | *
|
---|
171 | * The functions in this module will throw an easier-to-understand,
|
---|
172 | * easier-to-debug exception with a clear errors message message explaining the
|
---|
173 | * problem. (Instead of a confusing exception thrown inside the implementation
|
---|
174 | * of the `value` object).
|
---|
175 | */
|
---|
176 | // $FlowFixMe only called in DEV, so void return is not possible.
|
---|
177 | function typeName(value) {
|
---|
178 | {
|
---|
179 | // toStringTag is needed for namespaced types like Temporal.Instant
|
---|
180 | var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
|
---|
181 | var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
|
---|
182 | return type;
|
---|
183 | }
|
---|
184 | } // $FlowFixMe only called in DEV, so void return is not possible.
|
---|
185 |
|
---|
186 |
|
---|
187 | function willCoercionThrow(value) {
|
---|
188 | {
|
---|
189 | try {
|
---|
190 | testStringCoercion(value);
|
---|
191 | return false;
|
---|
192 | } catch (e) {
|
---|
193 | return true;
|
---|
194 | }
|
---|
195 | }
|
---|
196 | }
|
---|
197 |
|
---|
198 | function testStringCoercion(value) {
|
---|
199 | // If you ended up here by following an exception call stack, here's what's
|
---|
200 | // happened: you supplied an object or symbol value to React (as a prop, key,
|
---|
201 | // DOM attribute, CSS property, string ref, etc.) and when React tried to
|
---|
202 | // coerce it to a string using `'' + value`, an exception was thrown.
|
---|
203 | //
|
---|
204 | // The most common types that will cause this exception are `Symbol` instances
|
---|
205 | // and Temporal objects like `Temporal.Instant`. But any object that has a
|
---|
206 | // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
|
---|
207 | // exception. (Library authors do this to prevent users from using built-in
|
---|
208 | // numeric operators like `+` or comparison operators like `>=` because custom
|
---|
209 | // methods are needed to perform accurate arithmetic or comparison.)
|
---|
210 | //
|
---|
211 | // To fix the problem, coerce this object or symbol value to a string before
|
---|
212 | // passing it to React. The most reliable way is usually `String(value)`.
|
---|
213 | //
|
---|
214 | // To find which value is throwing, check the browser or debugger console.
|
---|
215 | // Before this exception was thrown, there should be `console.error` output
|
---|
216 | // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
|
---|
217 | // problem and how that type was used: key, atrribute, input value prop, etc.
|
---|
218 | // In most cases, this console output also shows the component and its
|
---|
219 | // ancestor components where the exception happened.
|
---|
220 | //
|
---|
221 | // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
222 | return '' + value;
|
---|
223 | }
|
---|
224 |
|
---|
225 | function checkAttributeStringCoercion(value, attributeName) {
|
---|
226 | {
|
---|
227 | if (willCoercionThrow(value)) {
|
---|
228 | error('The provided `%s` attribute is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', attributeName, typeName(value));
|
---|
229 |
|
---|
230 | return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
|
---|
231 | }
|
---|
232 | }
|
---|
233 | }
|
---|
234 | function checkCSSPropertyStringCoercion(value, propName) {
|
---|
235 | {
|
---|
236 | if (willCoercionThrow(value)) {
|
---|
237 | error('The provided `%s` CSS property is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', propName, typeName(value));
|
---|
238 |
|
---|
239 | return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
|
---|
240 | }
|
---|
241 | }
|
---|
242 | }
|
---|
243 | function checkHtmlStringCoercion(value) {
|
---|
244 | {
|
---|
245 | if (willCoercionThrow(value)) {
|
---|
246 | error('The provided HTML markup uses a value of unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
|
---|
247 |
|
---|
248 | return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
|
---|
249 | }
|
---|
250 | }
|
---|
251 | }
|
---|
252 |
|
---|
253 | var hasOwnProperty = Object.prototype.hasOwnProperty;
|
---|
254 |
|
---|
255 | // A reserved attribute.
|
---|
256 | // It is handled by React separately and shouldn't be written to the DOM.
|
---|
257 | var RESERVED = 0; // A simple string attribute.
|
---|
258 | // Attributes that aren't in the filter are presumed to have this type.
|
---|
259 |
|
---|
260 | var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
|
---|
261 | // "enumerated" attributes with "true" and "false" as possible values.
|
---|
262 | // When true, it should be set to a "true" string.
|
---|
263 | // When false, it should be set to a "false" string.
|
---|
264 |
|
---|
265 | var BOOLEANISH_STRING = 2; // A real boolean attribute.
|
---|
266 | // When true, it should be present (set either to an empty string or its name).
|
---|
267 | // When false, it should be omitted.
|
---|
268 |
|
---|
269 | var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value.
|
---|
270 | // When true, it should be present (set either to an empty string or its name).
|
---|
271 | // When false, it should be omitted.
|
---|
272 | // For any other value, should be present with that value.
|
---|
273 |
|
---|
274 | var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric.
|
---|
275 | // When falsy, it should be removed.
|
---|
276 |
|
---|
277 | var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric.
|
---|
278 | // When falsy, it should be removed.
|
---|
279 |
|
---|
280 | var POSITIVE_NUMERIC = 6;
|
---|
281 |
|
---|
282 | /* eslint-disable max-len */
|
---|
283 | var ATTRIBUTE_NAME_START_CHAR = ":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
|
---|
284 | /* eslint-enable max-len */
|
---|
285 |
|
---|
286 | var ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + "\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
|
---|
287 | var VALID_ATTRIBUTE_NAME_REGEX = new RegExp('^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
288 | var illegalAttributeNameCache = {};
|
---|
289 | var validatedAttributeNameCache = {};
|
---|
290 | function isAttributeNameSafe(attributeName) {
|
---|
291 | if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) {
|
---|
292 | return true;
|
---|
293 | }
|
---|
294 |
|
---|
295 | if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) {
|
---|
296 | return false;
|
---|
297 | }
|
---|
298 |
|
---|
299 | if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {
|
---|
300 | validatedAttributeNameCache[attributeName] = true;
|
---|
301 | return true;
|
---|
302 | }
|
---|
303 |
|
---|
304 | illegalAttributeNameCache[attributeName] = true;
|
---|
305 |
|
---|
306 | {
|
---|
307 | error('Invalid attribute name: `%s`', attributeName);
|
---|
308 | }
|
---|
309 |
|
---|
310 | return false;
|
---|
311 | }
|
---|
312 | function shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag) {
|
---|
313 | if (propertyInfo !== null && propertyInfo.type === RESERVED) {
|
---|
314 | return false;
|
---|
315 | }
|
---|
316 |
|
---|
317 | switch (typeof value) {
|
---|
318 | case 'function': // $FlowIssue symbol is perfectly valid here
|
---|
319 |
|
---|
320 | case 'symbol':
|
---|
321 | // eslint-disable-line
|
---|
322 | return true;
|
---|
323 |
|
---|
324 | case 'boolean':
|
---|
325 | {
|
---|
326 | if (isCustomComponentTag) {
|
---|
327 | return false;
|
---|
328 | }
|
---|
329 |
|
---|
330 | if (propertyInfo !== null) {
|
---|
331 | return !propertyInfo.acceptsBooleans;
|
---|
332 | } else {
|
---|
333 | var prefix = name.toLowerCase().slice(0, 5);
|
---|
334 | return prefix !== 'data-' && prefix !== 'aria-';
|
---|
335 | }
|
---|
336 | }
|
---|
337 |
|
---|
338 | default:
|
---|
339 | return false;
|
---|
340 | }
|
---|
341 | }
|
---|
342 | function getPropertyInfo(name) {
|
---|
343 | return properties.hasOwnProperty(name) ? properties[name] : null;
|
---|
344 | }
|
---|
345 |
|
---|
346 | function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) {
|
---|
347 | this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
|
---|
348 | this.attributeName = attributeName;
|
---|
349 | this.attributeNamespace = attributeNamespace;
|
---|
350 | this.mustUseProperty = mustUseProperty;
|
---|
351 | this.propertyName = name;
|
---|
352 | this.type = type;
|
---|
353 | this.sanitizeURL = sanitizeURL;
|
---|
354 | this.removeEmptyString = removeEmptyString;
|
---|
355 | } // When adding attributes to this list, be sure to also add them to
|
---|
356 | // the `possibleStandardNames` module to ensure casing and incorrect
|
---|
357 | // name warnings.
|
---|
358 |
|
---|
359 |
|
---|
360 | var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM.
|
---|
361 |
|
---|
362 | var reservedProps = ['children', 'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular
|
---|
363 | // elements (not just inputs). Now that ReactDOMInput assigns to the
|
---|
364 | // defaultValue property -- do we need this?
|
---|
365 | 'defaultValue', 'defaultChecked', 'innerHTML', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'style'];
|
---|
366 |
|
---|
367 | reservedProps.forEach(function (name) {
|
---|
368 | properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty
|
---|
369 | name, // attributeName
|
---|
370 | null, // attributeNamespace
|
---|
371 | false, // sanitizeURL
|
---|
372 | false);
|
---|
373 | }); // A few React string attributes have a different name.
|
---|
374 | // This is a mapping from React prop names to the attribute names.
|
---|
375 |
|
---|
376 | [['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']].forEach(function (_ref) {
|
---|
377 | var name = _ref[0],
|
---|
378 | attributeName = _ref[1];
|
---|
379 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
380 | attributeName, // attributeName
|
---|
381 | null, // attributeNamespace
|
---|
382 | false, // sanitizeURL
|
---|
383 | false);
|
---|
384 | }); // These are "enumerated" HTML attributes that accept "true" and "false".
|
---|
385 | // In React, we let users pass `true` and `false` even though technically
|
---|
386 | // these aren't boolean attributes (they are coerced to strings).
|
---|
387 |
|
---|
388 | ['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (name) {
|
---|
389 | properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
|
---|
390 | name.toLowerCase(), // attributeName
|
---|
391 | null, // attributeNamespace
|
---|
392 | false, // sanitizeURL
|
---|
393 | false);
|
---|
394 | }); // These are "enumerated" SVG attributes that accept "true" and "false".
|
---|
395 | // In React, we let users pass `true` and `false` even though technically
|
---|
396 | // these aren't boolean attributes (they are coerced to strings).
|
---|
397 | // Since these are SVG attributes, their attribute names are case-sensitive.
|
---|
398 |
|
---|
399 | ['autoReverse', 'externalResourcesRequired', 'focusable', 'preserveAlpha'].forEach(function (name) {
|
---|
400 | properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
|
---|
401 | name, // attributeName
|
---|
402 | null, // attributeNamespace
|
---|
403 | false, // sanitizeURL
|
---|
404 | false);
|
---|
405 | }); // These are HTML boolean attributes.
|
---|
406 |
|
---|
407 | ['allowFullScreen', 'async', // Note: there is a special case that prevents it from being written to the DOM
|
---|
408 | // on the client side because the browsers are inconsistent. Instead we call focus().
|
---|
409 | 'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'disablePictureInPicture', 'disableRemotePlayback', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless', // Microdata
|
---|
410 | 'itemScope'].forEach(function (name) {
|
---|
411 | properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty
|
---|
412 | name.toLowerCase(), // attributeName
|
---|
413 | null, // attributeNamespace
|
---|
414 | false, // sanitizeURL
|
---|
415 | false);
|
---|
416 | }); // These are the few React props that we set as DOM properties
|
---|
417 | // rather than attributes. These are all booleans.
|
---|
418 |
|
---|
419 | ['checked', // Note: `option.selected` is not updated if `select.multiple` is
|
---|
420 | // disabled with `removeAttribute`. We have special logic for handling this.
|
---|
421 | 'multiple', 'muted', 'selected' // NOTE: if you add a camelCased prop to this list,
|
---|
422 | // you'll need to set attributeName to name.toLowerCase()
|
---|
423 | // instead in the assignment below.
|
---|
424 | ].forEach(function (name) {
|
---|
425 | properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty
|
---|
426 | name, // attributeName
|
---|
427 | null, // attributeNamespace
|
---|
428 | false, // sanitizeURL
|
---|
429 | false);
|
---|
430 | }); // These are HTML attributes that are "overloaded booleans": they behave like
|
---|
431 | // booleans, but can also accept a string value.
|
---|
432 |
|
---|
433 | ['capture', 'download' // NOTE: if you add a camelCased prop to this list,
|
---|
434 | // you'll need to set attributeName to name.toLowerCase()
|
---|
435 | // instead in the assignment below.
|
---|
436 | ].forEach(function (name) {
|
---|
437 | properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty
|
---|
438 | name, // attributeName
|
---|
439 | null, // attributeNamespace
|
---|
440 | false, // sanitizeURL
|
---|
441 | false);
|
---|
442 | }); // These are HTML attributes that must be positive numbers.
|
---|
443 |
|
---|
444 | ['cols', 'rows', 'size', 'span' // NOTE: if you add a camelCased prop to this list,
|
---|
445 | // you'll need to set attributeName to name.toLowerCase()
|
---|
446 | // instead in the assignment below.
|
---|
447 | ].forEach(function (name) {
|
---|
448 | properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty
|
---|
449 | name, // attributeName
|
---|
450 | null, // attributeNamespace
|
---|
451 | false, // sanitizeURL
|
---|
452 | false);
|
---|
453 | }); // These are HTML attributes that must be numbers.
|
---|
454 |
|
---|
455 | ['rowSpan', 'start'].forEach(function (name) {
|
---|
456 | properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty
|
---|
457 | name.toLowerCase(), // attributeName
|
---|
458 | null, // attributeNamespace
|
---|
459 | false, // sanitizeURL
|
---|
460 | false);
|
---|
461 | });
|
---|
462 | var CAMELIZE = /[\-\:]([a-z])/g;
|
---|
463 |
|
---|
464 | var capitalize = function (token) {
|
---|
465 | return token[1].toUpperCase();
|
---|
466 | }; // This is a list of all SVG attributes that need special casing, namespacing,
|
---|
467 | // or boolean value assignment. Regular attributes that just accept strings
|
---|
468 | // and have the same names are omitted, just like in the HTML attribute filter.
|
---|
469 | // Some of these attributes can be hard to find. This list was created by
|
---|
470 | // scraping the MDN documentation.
|
---|
471 |
|
---|
472 |
|
---|
473 | ['accent-height', 'alignment-baseline', 'arabic-form', 'baseline-shift', 'cap-height', 'clip-path', 'clip-rule', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'dominant-baseline', 'enable-background', 'fill-opacity', 'fill-rule', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'horiz-adv-x', 'horiz-origin-x', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start', 'overline-position', 'overline-thickness', 'paint-order', 'panose-1', 'pointer-events', 'rendering-intent', 'shape-rendering', 'stop-color', 'stop-opacity', 'strikethrough-position', 'strikethrough-thickness', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', 'text-rendering', 'underline-position', 'underline-thickness', 'unicode-bidi', 'unicode-range', 'units-per-em', 'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'vector-effect', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'word-spacing', 'writing-mode', 'xmlns:xlink', 'x-height' // NOTE: if you add a camelCased prop to this list,
|
---|
474 | // you'll need to set attributeName to name.toLowerCase()
|
---|
475 | // instead in the assignment below.
|
---|
476 | ].forEach(function (attributeName) {
|
---|
477 | var name = attributeName.replace(CAMELIZE, capitalize);
|
---|
478 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
479 | attributeName, null, // attributeNamespace
|
---|
480 | false, // sanitizeURL
|
---|
481 | false);
|
---|
482 | }); // String SVG attributes with the xlink namespace.
|
---|
483 |
|
---|
484 | ['xlink:actuate', 'xlink:arcrole', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type' // NOTE: if you add a camelCased prop to this list,
|
---|
485 | // you'll need to set attributeName to name.toLowerCase()
|
---|
486 | // instead in the assignment below.
|
---|
487 | ].forEach(function (attributeName) {
|
---|
488 | var name = attributeName.replace(CAMELIZE, capitalize);
|
---|
489 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
490 | attributeName, 'http://www.w3.org/1999/xlink', false, // sanitizeURL
|
---|
491 | false);
|
---|
492 | }); // String SVG attributes with the xml namespace.
|
---|
493 |
|
---|
494 | ['xml:base', 'xml:lang', 'xml:space' // NOTE: if you add a camelCased prop to this list,
|
---|
495 | // you'll need to set attributeName to name.toLowerCase()
|
---|
496 | // instead in the assignment below.
|
---|
497 | ].forEach(function (attributeName) {
|
---|
498 | var name = attributeName.replace(CAMELIZE, capitalize);
|
---|
499 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
500 | attributeName, 'http://www.w3.org/XML/1998/namespace', false, // sanitizeURL
|
---|
501 | false);
|
---|
502 | }); // These attribute exists both in HTML and SVG.
|
---|
503 | // The attribute name is case-sensitive in SVG so we can't just use
|
---|
504 | // the React name like we do for attributes that exist only in HTML.
|
---|
505 |
|
---|
506 | ['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
|
---|
507 | properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
|
---|
508 | attributeName.toLowerCase(), // attributeName
|
---|
509 | null, // attributeNamespace
|
---|
510 | false, // sanitizeURL
|
---|
511 | false);
|
---|
512 | }); // These attributes accept URLs. These must not allow javascript: URLS.
|
---|
513 | // These will also need to accept Trusted Types object in the future.
|
---|
514 |
|
---|
515 | var xlinkHref = 'xlinkHref';
|
---|
516 | properties[xlinkHref] = new PropertyInfoRecord('xlinkHref', STRING, false, // mustUseProperty
|
---|
517 | 'xlink:href', 'http://www.w3.org/1999/xlink', true, // sanitizeURL
|
---|
518 | false);
|
---|
519 | ['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
|
---|
520 | properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
|
---|
521 | attributeName.toLowerCase(), // attributeName
|
---|
522 | null, // attributeNamespace
|
---|
523 | true, // sanitizeURL
|
---|
524 | true);
|
---|
525 | });
|
---|
526 |
|
---|
527 | /**
|
---|
528 | * CSS properties which accept numbers but are not in units of "px".
|
---|
529 | */
|
---|
530 | var isUnitlessNumber = {
|
---|
531 | animationIterationCount: true,
|
---|
532 | aspectRatio: true,
|
---|
533 | borderImageOutset: true,
|
---|
534 | borderImageSlice: true,
|
---|
535 | borderImageWidth: true,
|
---|
536 | boxFlex: true,
|
---|
537 | boxFlexGroup: true,
|
---|
538 | boxOrdinalGroup: true,
|
---|
539 | columnCount: true,
|
---|
540 | columns: true,
|
---|
541 | flex: true,
|
---|
542 | flexGrow: true,
|
---|
543 | flexPositive: true,
|
---|
544 | flexShrink: true,
|
---|
545 | flexNegative: true,
|
---|
546 | flexOrder: true,
|
---|
547 | gridArea: true,
|
---|
548 | gridRow: true,
|
---|
549 | gridRowEnd: true,
|
---|
550 | gridRowSpan: true,
|
---|
551 | gridRowStart: true,
|
---|
552 | gridColumn: true,
|
---|
553 | gridColumnEnd: true,
|
---|
554 | gridColumnSpan: true,
|
---|
555 | gridColumnStart: true,
|
---|
556 | fontWeight: true,
|
---|
557 | lineClamp: true,
|
---|
558 | lineHeight: true,
|
---|
559 | opacity: true,
|
---|
560 | order: true,
|
---|
561 | orphans: true,
|
---|
562 | tabSize: true,
|
---|
563 | widows: true,
|
---|
564 | zIndex: true,
|
---|
565 | zoom: true,
|
---|
566 | // SVG-related properties
|
---|
567 | fillOpacity: true,
|
---|
568 | floodOpacity: true,
|
---|
569 | stopOpacity: true,
|
---|
570 | strokeDasharray: true,
|
---|
571 | strokeDashoffset: true,
|
---|
572 | strokeMiterlimit: true,
|
---|
573 | strokeOpacity: true,
|
---|
574 | strokeWidth: true
|
---|
575 | };
|
---|
576 | /**
|
---|
577 | * @param {string} prefix vendor-specific prefix, eg: Webkit
|
---|
578 | * @param {string} key style name, eg: transitionDuration
|
---|
579 | * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
|
---|
580 | * WebkitTransitionDuration
|
---|
581 | */
|
---|
582 |
|
---|
583 | function prefixKey(prefix, key) {
|
---|
584 | return prefix + key.charAt(0).toUpperCase() + key.substring(1);
|
---|
585 | }
|
---|
586 | /**
|
---|
587 | * Support style names that may come passed in prefixed by adding permutations
|
---|
588 | * of vendor prefixes.
|
---|
589 | */
|
---|
590 |
|
---|
591 |
|
---|
592 | var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
|
---|
593 | // infinite loop, because it iterates over the newly added props too.
|
---|
594 |
|
---|
595 | Object.keys(isUnitlessNumber).forEach(function (prop) {
|
---|
596 | prefixes.forEach(function (prefix) {
|
---|
597 | isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
|
---|
598 | });
|
---|
599 | });
|
---|
600 |
|
---|
601 | var hasReadOnlyValue = {
|
---|
602 | button: true,
|
---|
603 | checkbox: true,
|
---|
604 | image: true,
|
---|
605 | hidden: true,
|
---|
606 | radio: true,
|
---|
607 | reset: true,
|
---|
608 | submit: true
|
---|
609 | };
|
---|
610 | function checkControlledValueProps(tagName, props) {
|
---|
611 | {
|
---|
612 | if (!(hasReadOnlyValue[props.type] || props.onChange || props.onInput || props.readOnly || props.disabled || props.value == null)) {
|
---|
613 | error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
|
---|
614 | }
|
---|
615 |
|
---|
616 | if (!(props.onChange || props.readOnly || props.disabled || props.checked == null)) {
|
---|
617 | error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
|
---|
618 | }
|
---|
619 | }
|
---|
620 | }
|
---|
621 |
|
---|
622 | function isCustomComponent(tagName, props) {
|
---|
623 | if (tagName.indexOf('-') === -1) {
|
---|
624 | return typeof props.is === 'string';
|
---|
625 | }
|
---|
626 |
|
---|
627 | switch (tagName) {
|
---|
628 | // These are reserved SVG and MathML elements.
|
---|
629 | // We don't mind this list too much because we expect it to never grow.
|
---|
630 | // The alternative is to track the namespace in a few places which is convoluted.
|
---|
631 | // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
|
---|
632 | case 'annotation-xml':
|
---|
633 | case 'color-profile':
|
---|
634 | case 'font-face':
|
---|
635 | case 'font-face-src':
|
---|
636 | case 'font-face-uri':
|
---|
637 | case 'font-face-format':
|
---|
638 | case 'font-face-name':
|
---|
639 | case 'missing-glyph':
|
---|
640 | return false;
|
---|
641 |
|
---|
642 | default:
|
---|
643 | return true;
|
---|
644 | }
|
---|
645 | }
|
---|
646 |
|
---|
647 | var ariaProperties = {
|
---|
648 | 'aria-current': 0,
|
---|
649 | // state
|
---|
650 | 'aria-description': 0,
|
---|
651 | 'aria-details': 0,
|
---|
652 | 'aria-disabled': 0,
|
---|
653 | // state
|
---|
654 | 'aria-hidden': 0,
|
---|
655 | // state
|
---|
656 | 'aria-invalid': 0,
|
---|
657 | // state
|
---|
658 | 'aria-keyshortcuts': 0,
|
---|
659 | 'aria-label': 0,
|
---|
660 | 'aria-roledescription': 0,
|
---|
661 | // Widget Attributes
|
---|
662 | 'aria-autocomplete': 0,
|
---|
663 | 'aria-checked': 0,
|
---|
664 | 'aria-expanded': 0,
|
---|
665 | 'aria-haspopup': 0,
|
---|
666 | 'aria-level': 0,
|
---|
667 | 'aria-modal': 0,
|
---|
668 | 'aria-multiline': 0,
|
---|
669 | 'aria-multiselectable': 0,
|
---|
670 | 'aria-orientation': 0,
|
---|
671 | 'aria-placeholder': 0,
|
---|
672 | 'aria-pressed': 0,
|
---|
673 | 'aria-readonly': 0,
|
---|
674 | 'aria-required': 0,
|
---|
675 | 'aria-selected': 0,
|
---|
676 | 'aria-sort': 0,
|
---|
677 | 'aria-valuemax': 0,
|
---|
678 | 'aria-valuemin': 0,
|
---|
679 | 'aria-valuenow': 0,
|
---|
680 | 'aria-valuetext': 0,
|
---|
681 | // Live Region Attributes
|
---|
682 | 'aria-atomic': 0,
|
---|
683 | 'aria-busy': 0,
|
---|
684 | 'aria-live': 0,
|
---|
685 | 'aria-relevant': 0,
|
---|
686 | // Drag-and-Drop Attributes
|
---|
687 | 'aria-dropeffect': 0,
|
---|
688 | 'aria-grabbed': 0,
|
---|
689 | // Relationship Attributes
|
---|
690 | 'aria-activedescendant': 0,
|
---|
691 | 'aria-colcount': 0,
|
---|
692 | 'aria-colindex': 0,
|
---|
693 | 'aria-colspan': 0,
|
---|
694 | 'aria-controls': 0,
|
---|
695 | 'aria-describedby': 0,
|
---|
696 | 'aria-errormessage': 0,
|
---|
697 | 'aria-flowto': 0,
|
---|
698 | 'aria-labelledby': 0,
|
---|
699 | 'aria-owns': 0,
|
---|
700 | 'aria-posinset': 0,
|
---|
701 | 'aria-rowcount': 0,
|
---|
702 | 'aria-rowindex': 0,
|
---|
703 | 'aria-rowspan': 0,
|
---|
704 | 'aria-setsize': 0
|
---|
705 | };
|
---|
706 |
|
---|
707 | var warnedProperties = {};
|
---|
708 | var rARIA = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
709 | var rARIACamel = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
710 |
|
---|
711 | function validateProperty(tagName, name) {
|
---|
712 | {
|
---|
713 | if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
|
---|
714 | return true;
|
---|
715 | }
|
---|
716 |
|
---|
717 | if (rARIACamel.test(name)) {
|
---|
718 | var ariaName = 'aria-' + name.slice(4).toLowerCase();
|
---|
719 | var correctName = ariaProperties.hasOwnProperty(ariaName) ? ariaName : null; // If this is an aria-* attribute, but is not listed in the known DOM
|
---|
720 | // DOM properties, then it is an invalid aria-* attribute.
|
---|
721 |
|
---|
722 | if (correctName == null) {
|
---|
723 | error('Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.', name);
|
---|
724 |
|
---|
725 | warnedProperties[name] = true;
|
---|
726 | return true;
|
---|
727 | } // aria-* attributes should be lowercase; suggest the lowercase version.
|
---|
728 |
|
---|
729 |
|
---|
730 | if (name !== correctName) {
|
---|
731 | error('Invalid ARIA attribute `%s`. Did you mean `%s`?', name, correctName);
|
---|
732 |
|
---|
733 | warnedProperties[name] = true;
|
---|
734 | return true;
|
---|
735 | }
|
---|
736 | }
|
---|
737 |
|
---|
738 | if (rARIA.test(name)) {
|
---|
739 | var lowerCasedName = name.toLowerCase();
|
---|
740 | var standardName = ariaProperties.hasOwnProperty(lowerCasedName) ? lowerCasedName : null; // If this is an aria-* attribute, but is not listed in the known DOM
|
---|
741 | // DOM properties, then it is an invalid aria-* attribute.
|
---|
742 |
|
---|
743 | if (standardName == null) {
|
---|
744 | warnedProperties[name] = true;
|
---|
745 | return false;
|
---|
746 | } // aria-* attributes should be lowercase; suggest the lowercase version.
|
---|
747 |
|
---|
748 |
|
---|
749 | if (name !== standardName) {
|
---|
750 | error('Unknown ARIA attribute `%s`. Did you mean `%s`?', name, standardName);
|
---|
751 |
|
---|
752 | warnedProperties[name] = true;
|
---|
753 | return true;
|
---|
754 | }
|
---|
755 | }
|
---|
756 | }
|
---|
757 |
|
---|
758 | return true;
|
---|
759 | }
|
---|
760 |
|
---|
761 | function warnInvalidARIAProps(type, props) {
|
---|
762 | {
|
---|
763 | var invalidProps = [];
|
---|
764 |
|
---|
765 | for (var key in props) {
|
---|
766 | var isValid = validateProperty(type, key);
|
---|
767 |
|
---|
768 | if (!isValid) {
|
---|
769 | invalidProps.push(key);
|
---|
770 | }
|
---|
771 | }
|
---|
772 |
|
---|
773 | var unknownPropString = invalidProps.map(function (prop) {
|
---|
774 | return '`' + prop + '`';
|
---|
775 | }).join(', ');
|
---|
776 |
|
---|
777 | if (invalidProps.length === 1) {
|
---|
778 | error('Invalid aria prop %s on <%s> tag. ' + 'For details, see https://reactjs.org/link/invalid-aria-props', unknownPropString, type);
|
---|
779 | } else if (invalidProps.length > 1) {
|
---|
780 | error('Invalid aria props %s on <%s> tag. ' + 'For details, see https://reactjs.org/link/invalid-aria-props', unknownPropString, type);
|
---|
781 | }
|
---|
782 | }
|
---|
783 | }
|
---|
784 |
|
---|
785 | function validateProperties(type, props) {
|
---|
786 | if (isCustomComponent(type, props)) {
|
---|
787 | return;
|
---|
788 | }
|
---|
789 |
|
---|
790 | warnInvalidARIAProps(type, props);
|
---|
791 | }
|
---|
792 |
|
---|
793 | var didWarnValueNull = false;
|
---|
794 | function validateProperties$1(type, props) {
|
---|
795 | {
|
---|
796 | if (type !== 'input' && type !== 'textarea' && type !== 'select') {
|
---|
797 | return;
|
---|
798 | }
|
---|
799 |
|
---|
800 | if (props != null && props.value === null && !didWarnValueNull) {
|
---|
801 | didWarnValueNull = true;
|
---|
802 |
|
---|
803 | if (type === 'select' && props.multiple) {
|
---|
804 | error('`value` prop on `%s` should not be null. ' + 'Consider using an empty array when `multiple` is set to `true` ' + 'to clear the component or `undefined` for uncontrolled components.', type);
|
---|
805 | } else {
|
---|
806 | error('`value` prop on `%s` should not be null. ' + 'Consider using an empty string to clear the component or `undefined` ' + 'for uncontrolled components.', type);
|
---|
807 | }
|
---|
808 | }
|
---|
809 | }
|
---|
810 | }
|
---|
811 |
|
---|
812 | // When adding attributes to the HTML or SVG allowed attribute list, be sure to
|
---|
813 | // also add them to this module to ensure casing and incorrect name
|
---|
814 | // warnings.
|
---|
815 | var possibleStandardNames = {
|
---|
816 | // HTML
|
---|
817 | accept: 'accept',
|
---|
818 | acceptcharset: 'acceptCharset',
|
---|
819 | 'accept-charset': 'acceptCharset',
|
---|
820 | accesskey: 'accessKey',
|
---|
821 | action: 'action',
|
---|
822 | allowfullscreen: 'allowFullScreen',
|
---|
823 | alt: 'alt',
|
---|
824 | as: 'as',
|
---|
825 | async: 'async',
|
---|
826 | autocapitalize: 'autoCapitalize',
|
---|
827 | autocomplete: 'autoComplete',
|
---|
828 | autocorrect: 'autoCorrect',
|
---|
829 | autofocus: 'autoFocus',
|
---|
830 | autoplay: 'autoPlay',
|
---|
831 | autosave: 'autoSave',
|
---|
832 | capture: 'capture',
|
---|
833 | cellpadding: 'cellPadding',
|
---|
834 | cellspacing: 'cellSpacing',
|
---|
835 | challenge: 'challenge',
|
---|
836 | charset: 'charSet',
|
---|
837 | checked: 'checked',
|
---|
838 | children: 'children',
|
---|
839 | cite: 'cite',
|
---|
840 | class: 'className',
|
---|
841 | classid: 'classID',
|
---|
842 | classname: 'className',
|
---|
843 | cols: 'cols',
|
---|
844 | colspan: 'colSpan',
|
---|
845 | content: 'content',
|
---|
846 | contenteditable: 'contentEditable',
|
---|
847 | contextmenu: 'contextMenu',
|
---|
848 | controls: 'controls',
|
---|
849 | controlslist: 'controlsList',
|
---|
850 | coords: 'coords',
|
---|
851 | crossorigin: 'crossOrigin',
|
---|
852 | dangerouslysetinnerhtml: 'dangerouslySetInnerHTML',
|
---|
853 | data: 'data',
|
---|
854 | datetime: 'dateTime',
|
---|
855 | default: 'default',
|
---|
856 | defaultchecked: 'defaultChecked',
|
---|
857 | defaultvalue: 'defaultValue',
|
---|
858 | defer: 'defer',
|
---|
859 | dir: 'dir',
|
---|
860 | disabled: 'disabled',
|
---|
861 | disablepictureinpicture: 'disablePictureInPicture',
|
---|
862 | disableremoteplayback: 'disableRemotePlayback',
|
---|
863 | download: 'download',
|
---|
864 | draggable: 'draggable',
|
---|
865 | enctype: 'encType',
|
---|
866 | enterkeyhint: 'enterKeyHint',
|
---|
867 | for: 'htmlFor',
|
---|
868 | form: 'form',
|
---|
869 | formmethod: 'formMethod',
|
---|
870 | formaction: 'formAction',
|
---|
871 | formenctype: 'formEncType',
|
---|
872 | formnovalidate: 'formNoValidate',
|
---|
873 | formtarget: 'formTarget',
|
---|
874 | frameborder: 'frameBorder',
|
---|
875 | headers: 'headers',
|
---|
876 | height: 'height',
|
---|
877 | hidden: 'hidden',
|
---|
878 | high: 'high',
|
---|
879 | href: 'href',
|
---|
880 | hreflang: 'hrefLang',
|
---|
881 | htmlfor: 'htmlFor',
|
---|
882 | httpequiv: 'httpEquiv',
|
---|
883 | 'http-equiv': 'httpEquiv',
|
---|
884 | icon: 'icon',
|
---|
885 | id: 'id',
|
---|
886 | imagesizes: 'imageSizes',
|
---|
887 | imagesrcset: 'imageSrcSet',
|
---|
888 | innerhtml: 'innerHTML',
|
---|
889 | inputmode: 'inputMode',
|
---|
890 | integrity: 'integrity',
|
---|
891 | is: 'is',
|
---|
892 | itemid: 'itemID',
|
---|
893 | itemprop: 'itemProp',
|
---|
894 | itemref: 'itemRef',
|
---|
895 | itemscope: 'itemScope',
|
---|
896 | itemtype: 'itemType',
|
---|
897 | keyparams: 'keyParams',
|
---|
898 | keytype: 'keyType',
|
---|
899 | kind: 'kind',
|
---|
900 | label: 'label',
|
---|
901 | lang: 'lang',
|
---|
902 | list: 'list',
|
---|
903 | loop: 'loop',
|
---|
904 | low: 'low',
|
---|
905 | manifest: 'manifest',
|
---|
906 | marginwidth: 'marginWidth',
|
---|
907 | marginheight: 'marginHeight',
|
---|
908 | max: 'max',
|
---|
909 | maxlength: 'maxLength',
|
---|
910 | media: 'media',
|
---|
911 | mediagroup: 'mediaGroup',
|
---|
912 | method: 'method',
|
---|
913 | min: 'min',
|
---|
914 | minlength: 'minLength',
|
---|
915 | multiple: 'multiple',
|
---|
916 | muted: 'muted',
|
---|
917 | name: 'name',
|
---|
918 | nomodule: 'noModule',
|
---|
919 | nonce: 'nonce',
|
---|
920 | novalidate: 'noValidate',
|
---|
921 | open: 'open',
|
---|
922 | optimum: 'optimum',
|
---|
923 | pattern: 'pattern',
|
---|
924 | placeholder: 'placeholder',
|
---|
925 | playsinline: 'playsInline',
|
---|
926 | poster: 'poster',
|
---|
927 | preload: 'preload',
|
---|
928 | profile: 'profile',
|
---|
929 | radiogroup: 'radioGroup',
|
---|
930 | readonly: 'readOnly',
|
---|
931 | referrerpolicy: 'referrerPolicy',
|
---|
932 | rel: 'rel',
|
---|
933 | required: 'required',
|
---|
934 | reversed: 'reversed',
|
---|
935 | role: 'role',
|
---|
936 | rows: 'rows',
|
---|
937 | rowspan: 'rowSpan',
|
---|
938 | sandbox: 'sandbox',
|
---|
939 | scope: 'scope',
|
---|
940 | scoped: 'scoped',
|
---|
941 | scrolling: 'scrolling',
|
---|
942 | seamless: 'seamless',
|
---|
943 | selected: 'selected',
|
---|
944 | shape: 'shape',
|
---|
945 | size: 'size',
|
---|
946 | sizes: 'sizes',
|
---|
947 | span: 'span',
|
---|
948 | spellcheck: 'spellCheck',
|
---|
949 | src: 'src',
|
---|
950 | srcdoc: 'srcDoc',
|
---|
951 | srclang: 'srcLang',
|
---|
952 | srcset: 'srcSet',
|
---|
953 | start: 'start',
|
---|
954 | step: 'step',
|
---|
955 | style: 'style',
|
---|
956 | summary: 'summary',
|
---|
957 | tabindex: 'tabIndex',
|
---|
958 | target: 'target',
|
---|
959 | title: 'title',
|
---|
960 | type: 'type',
|
---|
961 | usemap: 'useMap',
|
---|
962 | value: 'value',
|
---|
963 | width: 'width',
|
---|
964 | wmode: 'wmode',
|
---|
965 | wrap: 'wrap',
|
---|
966 | // SVG
|
---|
967 | about: 'about',
|
---|
968 | accentheight: 'accentHeight',
|
---|
969 | 'accent-height': 'accentHeight',
|
---|
970 | accumulate: 'accumulate',
|
---|
971 | additive: 'additive',
|
---|
972 | alignmentbaseline: 'alignmentBaseline',
|
---|
973 | 'alignment-baseline': 'alignmentBaseline',
|
---|
974 | allowreorder: 'allowReorder',
|
---|
975 | alphabetic: 'alphabetic',
|
---|
976 | amplitude: 'amplitude',
|
---|
977 | arabicform: 'arabicForm',
|
---|
978 | 'arabic-form': 'arabicForm',
|
---|
979 | ascent: 'ascent',
|
---|
980 | attributename: 'attributeName',
|
---|
981 | attributetype: 'attributeType',
|
---|
982 | autoreverse: 'autoReverse',
|
---|
983 | azimuth: 'azimuth',
|
---|
984 | basefrequency: 'baseFrequency',
|
---|
985 | baselineshift: 'baselineShift',
|
---|
986 | 'baseline-shift': 'baselineShift',
|
---|
987 | baseprofile: 'baseProfile',
|
---|
988 | bbox: 'bbox',
|
---|
989 | begin: 'begin',
|
---|
990 | bias: 'bias',
|
---|
991 | by: 'by',
|
---|
992 | calcmode: 'calcMode',
|
---|
993 | capheight: 'capHeight',
|
---|
994 | 'cap-height': 'capHeight',
|
---|
995 | clip: 'clip',
|
---|
996 | clippath: 'clipPath',
|
---|
997 | 'clip-path': 'clipPath',
|
---|
998 | clippathunits: 'clipPathUnits',
|
---|
999 | cliprule: 'clipRule',
|
---|
1000 | 'clip-rule': 'clipRule',
|
---|
1001 | color: 'color',
|
---|
1002 | colorinterpolation: 'colorInterpolation',
|
---|
1003 | 'color-interpolation': 'colorInterpolation',
|
---|
1004 | colorinterpolationfilters: 'colorInterpolationFilters',
|
---|
1005 | 'color-interpolation-filters': 'colorInterpolationFilters',
|
---|
1006 | colorprofile: 'colorProfile',
|
---|
1007 | 'color-profile': 'colorProfile',
|
---|
1008 | colorrendering: 'colorRendering',
|
---|
1009 | 'color-rendering': 'colorRendering',
|
---|
1010 | contentscripttype: 'contentScriptType',
|
---|
1011 | contentstyletype: 'contentStyleType',
|
---|
1012 | cursor: 'cursor',
|
---|
1013 | cx: 'cx',
|
---|
1014 | cy: 'cy',
|
---|
1015 | d: 'd',
|
---|
1016 | datatype: 'datatype',
|
---|
1017 | decelerate: 'decelerate',
|
---|
1018 | descent: 'descent',
|
---|
1019 | diffuseconstant: 'diffuseConstant',
|
---|
1020 | direction: 'direction',
|
---|
1021 | display: 'display',
|
---|
1022 | divisor: 'divisor',
|
---|
1023 | dominantbaseline: 'dominantBaseline',
|
---|
1024 | 'dominant-baseline': 'dominantBaseline',
|
---|
1025 | dur: 'dur',
|
---|
1026 | dx: 'dx',
|
---|
1027 | dy: 'dy',
|
---|
1028 | edgemode: 'edgeMode',
|
---|
1029 | elevation: 'elevation',
|
---|
1030 | enablebackground: 'enableBackground',
|
---|
1031 | 'enable-background': 'enableBackground',
|
---|
1032 | end: 'end',
|
---|
1033 | exponent: 'exponent',
|
---|
1034 | externalresourcesrequired: 'externalResourcesRequired',
|
---|
1035 | fill: 'fill',
|
---|
1036 | fillopacity: 'fillOpacity',
|
---|
1037 | 'fill-opacity': 'fillOpacity',
|
---|
1038 | fillrule: 'fillRule',
|
---|
1039 | 'fill-rule': 'fillRule',
|
---|
1040 | filter: 'filter',
|
---|
1041 | filterres: 'filterRes',
|
---|
1042 | filterunits: 'filterUnits',
|
---|
1043 | floodopacity: 'floodOpacity',
|
---|
1044 | 'flood-opacity': 'floodOpacity',
|
---|
1045 | floodcolor: 'floodColor',
|
---|
1046 | 'flood-color': 'floodColor',
|
---|
1047 | focusable: 'focusable',
|
---|
1048 | fontfamily: 'fontFamily',
|
---|
1049 | 'font-family': 'fontFamily',
|
---|
1050 | fontsize: 'fontSize',
|
---|
1051 | 'font-size': 'fontSize',
|
---|
1052 | fontsizeadjust: 'fontSizeAdjust',
|
---|
1053 | 'font-size-adjust': 'fontSizeAdjust',
|
---|
1054 | fontstretch: 'fontStretch',
|
---|
1055 | 'font-stretch': 'fontStretch',
|
---|
1056 | fontstyle: 'fontStyle',
|
---|
1057 | 'font-style': 'fontStyle',
|
---|
1058 | fontvariant: 'fontVariant',
|
---|
1059 | 'font-variant': 'fontVariant',
|
---|
1060 | fontweight: 'fontWeight',
|
---|
1061 | 'font-weight': 'fontWeight',
|
---|
1062 | format: 'format',
|
---|
1063 | from: 'from',
|
---|
1064 | fx: 'fx',
|
---|
1065 | fy: 'fy',
|
---|
1066 | g1: 'g1',
|
---|
1067 | g2: 'g2',
|
---|
1068 | glyphname: 'glyphName',
|
---|
1069 | 'glyph-name': 'glyphName',
|
---|
1070 | glyphorientationhorizontal: 'glyphOrientationHorizontal',
|
---|
1071 | 'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
|
---|
1072 | glyphorientationvertical: 'glyphOrientationVertical',
|
---|
1073 | 'glyph-orientation-vertical': 'glyphOrientationVertical',
|
---|
1074 | glyphref: 'glyphRef',
|
---|
1075 | gradienttransform: 'gradientTransform',
|
---|
1076 | gradientunits: 'gradientUnits',
|
---|
1077 | hanging: 'hanging',
|
---|
1078 | horizadvx: 'horizAdvX',
|
---|
1079 | 'horiz-adv-x': 'horizAdvX',
|
---|
1080 | horizoriginx: 'horizOriginX',
|
---|
1081 | 'horiz-origin-x': 'horizOriginX',
|
---|
1082 | ideographic: 'ideographic',
|
---|
1083 | imagerendering: 'imageRendering',
|
---|
1084 | 'image-rendering': 'imageRendering',
|
---|
1085 | in2: 'in2',
|
---|
1086 | in: 'in',
|
---|
1087 | inlist: 'inlist',
|
---|
1088 | intercept: 'intercept',
|
---|
1089 | k1: 'k1',
|
---|
1090 | k2: 'k2',
|
---|
1091 | k3: 'k3',
|
---|
1092 | k4: 'k4',
|
---|
1093 | k: 'k',
|
---|
1094 | kernelmatrix: 'kernelMatrix',
|
---|
1095 | kernelunitlength: 'kernelUnitLength',
|
---|
1096 | kerning: 'kerning',
|
---|
1097 | keypoints: 'keyPoints',
|
---|
1098 | keysplines: 'keySplines',
|
---|
1099 | keytimes: 'keyTimes',
|
---|
1100 | lengthadjust: 'lengthAdjust',
|
---|
1101 | letterspacing: 'letterSpacing',
|
---|
1102 | 'letter-spacing': 'letterSpacing',
|
---|
1103 | lightingcolor: 'lightingColor',
|
---|
1104 | 'lighting-color': 'lightingColor',
|
---|
1105 | limitingconeangle: 'limitingConeAngle',
|
---|
1106 | local: 'local',
|
---|
1107 | markerend: 'markerEnd',
|
---|
1108 | 'marker-end': 'markerEnd',
|
---|
1109 | markerheight: 'markerHeight',
|
---|
1110 | markermid: 'markerMid',
|
---|
1111 | 'marker-mid': 'markerMid',
|
---|
1112 | markerstart: 'markerStart',
|
---|
1113 | 'marker-start': 'markerStart',
|
---|
1114 | markerunits: 'markerUnits',
|
---|
1115 | markerwidth: 'markerWidth',
|
---|
1116 | mask: 'mask',
|
---|
1117 | maskcontentunits: 'maskContentUnits',
|
---|
1118 | maskunits: 'maskUnits',
|
---|
1119 | mathematical: 'mathematical',
|
---|
1120 | mode: 'mode',
|
---|
1121 | numoctaves: 'numOctaves',
|
---|
1122 | offset: 'offset',
|
---|
1123 | opacity: 'opacity',
|
---|
1124 | operator: 'operator',
|
---|
1125 | order: 'order',
|
---|
1126 | orient: 'orient',
|
---|
1127 | orientation: 'orientation',
|
---|
1128 | origin: 'origin',
|
---|
1129 | overflow: 'overflow',
|
---|
1130 | overlineposition: 'overlinePosition',
|
---|
1131 | 'overline-position': 'overlinePosition',
|
---|
1132 | overlinethickness: 'overlineThickness',
|
---|
1133 | 'overline-thickness': 'overlineThickness',
|
---|
1134 | paintorder: 'paintOrder',
|
---|
1135 | 'paint-order': 'paintOrder',
|
---|
1136 | panose1: 'panose1',
|
---|
1137 | 'panose-1': 'panose1',
|
---|
1138 | pathlength: 'pathLength',
|
---|
1139 | patterncontentunits: 'patternContentUnits',
|
---|
1140 | patterntransform: 'patternTransform',
|
---|
1141 | patternunits: 'patternUnits',
|
---|
1142 | pointerevents: 'pointerEvents',
|
---|
1143 | 'pointer-events': 'pointerEvents',
|
---|
1144 | points: 'points',
|
---|
1145 | pointsatx: 'pointsAtX',
|
---|
1146 | pointsaty: 'pointsAtY',
|
---|
1147 | pointsatz: 'pointsAtZ',
|
---|
1148 | prefix: 'prefix',
|
---|
1149 | preservealpha: 'preserveAlpha',
|
---|
1150 | preserveaspectratio: 'preserveAspectRatio',
|
---|
1151 | primitiveunits: 'primitiveUnits',
|
---|
1152 | property: 'property',
|
---|
1153 | r: 'r',
|
---|
1154 | radius: 'radius',
|
---|
1155 | refx: 'refX',
|
---|
1156 | refy: 'refY',
|
---|
1157 | renderingintent: 'renderingIntent',
|
---|
1158 | 'rendering-intent': 'renderingIntent',
|
---|
1159 | repeatcount: 'repeatCount',
|
---|
1160 | repeatdur: 'repeatDur',
|
---|
1161 | requiredextensions: 'requiredExtensions',
|
---|
1162 | requiredfeatures: 'requiredFeatures',
|
---|
1163 | resource: 'resource',
|
---|
1164 | restart: 'restart',
|
---|
1165 | result: 'result',
|
---|
1166 | results: 'results',
|
---|
1167 | rotate: 'rotate',
|
---|
1168 | rx: 'rx',
|
---|
1169 | ry: 'ry',
|
---|
1170 | scale: 'scale',
|
---|
1171 | security: 'security',
|
---|
1172 | seed: 'seed',
|
---|
1173 | shaperendering: 'shapeRendering',
|
---|
1174 | 'shape-rendering': 'shapeRendering',
|
---|
1175 | slope: 'slope',
|
---|
1176 | spacing: 'spacing',
|
---|
1177 | specularconstant: 'specularConstant',
|
---|
1178 | specularexponent: 'specularExponent',
|
---|
1179 | speed: 'speed',
|
---|
1180 | spreadmethod: 'spreadMethod',
|
---|
1181 | startoffset: 'startOffset',
|
---|
1182 | stddeviation: 'stdDeviation',
|
---|
1183 | stemh: 'stemh',
|
---|
1184 | stemv: 'stemv',
|
---|
1185 | stitchtiles: 'stitchTiles',
|
---|
1186 | stopcolor: 'stopColor',
|
---|
1187 | 'stop-color': 'stopColor',
|
---|
1188 | stopopacity: 'stopOpacity',
|
---|
1189 | 'stop-opacity': 'stopOpacity',
|
---|
1190 | strikethroughposition: 'strikethroughPosition',
|
---|
1191 | 'strikethrough-position': 'strikethroughPosition',
|
---|
1192 | strikethroughthickness: 'strikethroughThickness',
|
---|
1193 | 'strikethrough-thickness': 'strikethroughThickness',
|
---|
1194 | string: 'string',
|
---|
1195 | stroke: 'stroke',
|
---|
1196 | strokedasharray: 'strokeDasharray',
|
---|
1197 | 'stroke-dasharray': 'strokeDasharray',
|
---|
1198 | strokedashoffset: 'strokeDashoffset',
|
---|
1199 | 'stroke-dashoffset': 'strokeDashoffset',
|
---|
1200 | strokelinecap: 'strokeLinecap',
|
---|
1201 | 'stroke-linecap': 'strokeLinecap',
|
---|
1202 | strokelinejoin: 'strokeLinejoin',
|
---|
1203 | 'stroke-linejoin': 'strokeLinejoin',
|
---|
1204 | strokemiterlimit: 'strokeMiterlimit',
|
---|
1205 | 'stroke-miterlimit': 'strokeMiterlimit',
|
---|
1206 | strokewidth: 'strokeWidth',
|
---|
1207 | 'stroke-width': 'strokeWidth',
|
---|
1208 | strokeopacity: 'strokeOpacity',
|
---|
1209 | 'stroke-opacity': 'strokeOpacity',
|
---|
1210 | suppresscontenteditablewarning: 'suppressContentEditableWarning',
|
---|
1211 | suppresshydrationwarning: 'suppressHydrationWarning',
|
---|
1212 | surfacescale: 'surfaceScale',
|
---|
1213 | systemlanguage: 'systemLanguage',
|
---|
1214 | tablevalues: 'tableValues',
|
---|
1215 | targetx: 'targetX',
|
---|
1216 | targety: 'targetY',
|
---|
1217 | textanchor: 'textAnchor',
|
---|
1218 | 'text-anchor': 'textAnchor',
|
---|
1219 | textdecoration: 'textDecoration',
|
---|
1220 | 'text-decoration': 'textDecoration',
|
---|
1221 | textlength: 'textLength',
|
---|
1222 | textrendering: 'textRendering',
|
---|
1223 | 'text-rendering': 'textRendering',
|
---|
1224 | to: 'to',
|
---|
1225 | transform: 'transform',
|
---|
1226 | typeof: 'typeof',
|
---|
1227 | u1: 'u1',
|
---|
1228 | u2: 'u2',
|
---|
1229 | underlineposition: 'underlinePosition',
|
---|
1230 | 'underline-position': 'underlinePosition',
|
---|
1231 | underlinethickness: 'underlineThickness',
|
---|
1232 | 'underline-thickness': 'underlineThickness',
|
---|
1233 | unicode: 'unicode',
|
---|
1234 | unicodebidi: 'unicodeBidi',
|
---|
1235 | 'unicode-bidi': 'unicodeBidi',
|
---|
1236 | unicoderange: 'unicodeRange',
|
---|
1237 | 'unicode-range': 'unicodeRange',
|
---|
1238 | unitsperem: 'unitsPerEm',
|
---|
1239 | 'units-per-em': 'unitsPerEm',
|
---|
1240 | unselectable: 'unselectable',
|
---|
1241 | valphabetic: 'vAlphabetic',
|
---|
1242 | 'v-alphabetic': 'vAlphabetic',
|
---|
1243 | values: 'values',
|
---|
1244 | vectoreffect: 'vectorEffect',
|
---|
1245 | 'vector-effect': 'vectorEffect',
|
---|
1246 | version: 'version',
|
---|
1247 | vertadvy: 'vertAdvY',
|
---|
1248 | 'vert-adv-y': 'vertAdvY',
|
---|
1249 | vertoriginx: 'vertOriginX',
|
---|
1250 | 'vert-origin-x': 'vertOriginX',
|
---|
1251 | vertoriginy: 'vertOriginY',
|
---|
1252 | 'vert-origin-y': 'vertOriginY',
|
---|
1253 | vhanging: 'vHanging',
|
---|
1254 | 'v-hanging': 'vHanging',
|
---|
1255 | videographic: 'vIdeographic',
|
---|
1256 | 'v-ideographic': 'vIdeographic',
|
---|
1257 | viewbox: 'viewBox',
|
---|
1258 | viewtarget: 'viewTarget',
|
---|
1259 | visibility: 'visibility',
|
---|
1260 | vmathematical: 'vMathematical',
|
---|
1261 | 'v-mathematical': 'vMathematical',
|
---|
1262 | vocab: 'vocab',
|
---|
1263 | widths: 'widths',
|
---|
1264 | wordspacing: 'wordSpacing',
|
---|
1265 | 'word-spacing': 'wordSpacing',
|
---|
1266 | writingmode: 'writingMode',
|
---|
1267 | 'writing-mode': 'writingMode',
|
---|
1268 | x1: 'x1',
|
---|
1269 | x2: 'x2',
|
---|
1270 | x: 'x',
|
---|
1271 | xchannelselector: 'xChannelSelector',
|
---|
1272 | xheight: 'xHeight',
|
---|
1273 | 'x-height': 'xHeight',
|
---|
1274 | xlinkactuate: 'xlinkActuate',
|
---|
1275 | 'xlink:actuate': 'xlinkActuate',
|
---|
1276 | xlinkarcrole: 'xlinkArcrole',
|
---|
1277 | 'xlink:arcrole': 'xlinkArcrole',
|
---|
1278 | xlinkhref: 'xlinkHref',
|
---|
1279 | 'xlink:href': 'xlinkHref',
|
---|
1280 | xlinkrole: 'xlinkRole',
|
---|
1281 | 'xlink:role': 'xlinkRole',
|
---|
1282 | xlinkshow: 'xlinkShow',
|
---|
1283 | 'xlink:show': 'xlinkShow',
|
---|
1284 | xlinktitle: 'xlinkTitle',
|
---|
1285 | 'xlink:title': 'xlinkTitle',
|
---|
1286 | xlinktype: 'xlinkType',
|
---|
1287 | 'xlink:type': 'xlinkType',
|
---|
1288 | xmlbase: 'xmlBase',
|
---|
1289 | 'xml:base': 'xmlBase',
|
---|
1290 | xmllang: 'xmlLang',
|
---|
1291 | 'xml:lang': 'xmlLang',
|
---|
1292 | xmlns: 'xmlns',
|
---|
1293 | 'xml:space': 'xmlSpace',
|
---|
1294 | xmlnsxlink: 'xmlnsXlink',
|
---|
1295 | 'xmlns:xlink': 'xmlnsXlink',
|
---|
1296 | xmlspace: 'xmlSpace',
|
---|
1297 | y1: 'y1',
|
---|
1298 | y2: 'y2',
|
---|
1299 | y: 'y',
|
---|
1300 | ychannelselector: 'yChannelSelector',
|
---|
1301 | z: 'z',
|
---|
1302 | zoomandpan: 'zoomAndPan'
|
---|
1303 | };
|
---|
1304 |
|
---|
1305 | var validateProperty$1 = function () {};
|
---|
1306 |
|
---|
1307 | {
|
---|
1308 | var warnedProperties$1 = {};
|
---|
1309 | var EVENT_NAME_REGEX = /^on./;
|
---|
1310 | var INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/;
|
---|
1311 | var rARIA$1 = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
1312 | var rARIACamel$1 = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
1313 |
|
---|
1314 | validateProperty$1 = function (tagName, name, value, eventRegistry) {
|
---|
1315 | if (hasOwnProperty.call(warnedProperties$1, name) && warnedProperties$1[name]) {
|
---|
1316 | return true;
|
---|
1317 | }
|
---|
1318 |
|
---|
1319 | var lowerCasedName = name.toLowerCase();
|
---|
1320 |
|
---|
1321 | if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
|
---|
1322 | error('React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + 'are not needed/supported by React.');
|
---|
1323 |
|
---|
1324 | warnedProperties$1[name] = true;
|
---|
1325 | return true;
|
---|
1326 | } // We can't rely on the event system being injected on the server.
|
---|
1327 |
|
---|
1328 |
|
---|
1329 | if (eventRegistry != null) {
|
---|
1330 | var registrationNameDependencies = eventRegistry.registrationNameDependencies,
|
---|
1331 | possibleRegistrationNames = eventRegistry.possibleRegistrationNames;
|
---|
1332 |
|
---|
1333 | if (registrationNameDependencies.hasOwnProperty(name)) {
|
---|
1334 | return true;
|
---|
1335 | }
|
---|
1336 |
|
---|
1337 | var registrationName = possibleRegistrationNames.hasOwnProperty(lowerCasedName) ? possibleRegistrationNames[lowerCasedName] : null;
|
---|
1338 |
|
---|
1339 | if (registrationName != null) {
|
---|
1340 | error('Invalid event handler property `%s`. Did you mean `%s`?', name, registrationName);
|
---|
1341 |
|
---|
1342 | warnedProperties$1[name] = true;
|
---|
1343 | return true;
|
---|
1344 | }
|
---|
1345 |
|
---|
1346 | if (EVENT_NAME_REGEX.test(name)) {
|
---|
1347 | error('Unknown event handler property `%s`. It will be ignored.', name);
|
---|
1348 |
|
---|
1349 | warnedProperties$1[name] = true;
|
---|
1350 | return true;
|
---|
1351 | }
|
---|
1352 | } else if (EVENT_NAME_REGEX.test(name)) {
|
---|
1353 | // If no event plugins have been injected, we are in a server environment.
|
---|
1354 | // So we can't tell if the event name is correct for sure, but we can filter
|
---|
1355 | // out known bad ones like `onclick`. We can't suggest a specific replacement though.
|
---|
1356 | if (INVALID_EVENT_NAME_REGEX.test(name)) {
|
---|
1357 | error('Invalid event handler property `%s`. ' + 'React events use the camelCase naming convention, for example `onClick`.', name);
|
---|
1358 | }
|
---|
1359 |
|
---|
1360 | warnedProperties$1[name] = true;
|
---|
1361 | return true;
|
---|
1362 | } // Let the ARIA attribute hook validate ARIA attributes
|
---|
1363 |
|
---|
1364 |
|
---|
1365 | if (rARIA$1.test(name) || rARIACamel$1.test(name)) {
|
---|
1366 | return true;
|
---|
1367 | }
|
---|
1368 |
|
---|
1369 | if (lowerCasedName === 'innerhtml') {
|
---|
1370 | error('Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.');
|
---|
1371 |
|
---|
1372 | warnedProperties$1[name] = true;
|
---|
1373 | return true;
|
---|
1374 | }
|
---|
1375 |
|
---|
1376 | if (lowerCasedName === 'aria') {
|
---|
1377 | error('The `aria` attribute is reserved for future use in React. ' + 'Pass individual `aria-` attributes instead.');
|
---|
1378 |
|
---|
1379 | warnedProperties$1[name] = true;
|
---|
1380 | return true;
|
---|
1381 | }
|
---|
1382 |
|
---|
1383 | if (lowerCasedName === 'is' && value !== null && value !== undefined && typeof value !== 'string') {
|
---|
1384 | error('Received a `%s` for a string attribute `is`. If this is expected, cast ' + 'the value to a string.', typeof value);
|
---|
1385 |
|
---|
1386 | warnedProperties$1[name] = true;
|
---|
1387 | return true;
|
---|
1388 | }
|
---|
1389 |
|
---|
1390 | if (typeof value === 'number' && isNaN(value)) {
|
---|
1391 | error('Received NaN for the `%s` attribute. If this is expected, cast ' + 'the value to a string.', name);
|
---|
1392 |
|
---|
1393 | warnedProperties$1[name] = true;
|
---|
1394 | return true;
|
---|
1395 | }
|
---|
1396 |
|
---|
1397 | var propertyInfo = getPropertyInfo(name);
|
---|
1398 | var isReserved = propertyInfo !== null && propertyInfo.type === RESERVED; // Known attributes should match the casing specified in the property config.
|
---|
1399 |
|
---|
1400 | if (possibleStandardNames.hasOwnProperty(lowerCasedName)) {
|
---|
1401 | var standardName = possibleStandardNames[lowerCasedName];
|
---|
1402 |
|
---|
1403 | if (standardName !== name) {
|
---|
1404 | error('Invalid DOM property `%s`. Did you mean `%s`?', name, standardName);
|
---|
1405 |
|
---|
1406 | warnedProperties$1[name] = true;
|
---|
1407 | return true;
|
---|
1408 | }
|
---|
1409 | } else if (!isReserved && name !== lowerCasedName) {
|
---|
1410 | // Unknown attributes should have lowercase casing since that's how they
|
---|
1411 | // will be cased anyway with server rendering.
|
---|
1412 | error('React does not recognize the `%s` prop on a DOM element. If you ' + 'intentionally want it to appear in the DOM as a custom ' + 'attribute, spell it as lowercase `%s` instead. ' + 'If you accidentally passed it from a parent component, remove ' + 'it from the DOM element.', name, lowerCasedName);
|
---|
1413 |
|
---|
1414 | warnedProperties$1[name] = true;
|
---|
1415 | return true;
|
---|
1416 | }
|
---|
1417 |
|
---|
1418 | if (typeof value === 'boolean' && shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
|
---|
1419 | if (value) {
|
---|
1420 | error('Received `%s` for a non-boolean attribute `%s`.\n\n' + 'If you want to write it to the DOM, pass a string instead: ' + '%s="%s" or %s={value.toString()}.', value, name, name, value, name);
|
---|
1421 | } else {
|
---|
1422 | error('Received `%s` for a non-boolean attribute `%s`.\n\n' + 'If you want to write it to the DOM, pass a string instead: ' + '%s="%s" or %s={value.toString()}.\n\n' + 'If you used to conditionally omit it with %s={condition && value}, ' + 'pass %s={condition ? value : undefined} instead.', value, name, name, value, name, name, name);
|
---|
1423 | }
|
---|
1424 |
|
---|
1425 | warnedProperties$1[name] = true;
|
---|
1426 | return true;
|
---|
1427 | } // Now that we've validated casing, do not validate
|
---|
1428 | // data types for reserved props
|
---|
1429 |
|
---|
1430 |
|
---|
1431 | if (isReserved) {
|
---|
1432 | return true;
|
---|
1433 | } // Warn when a known attribute is a bad type
|
---|
1434 |
|
---|
1435 |
|
---|
1436 | if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
|
---|
1437 | warnedProperties$1[name] = true;
|
---|
1438 | return false;
|
---|
1439 | } // Warn when passing the strings 'false' or 'true' into a boolean prop
|
---|
1440 |
|
---|
1441 |
|
---|
1442 | if ((value === 'false' || value === 'true') && propertyInfo !== null && propertyInfo.type === BOOLEAN) {
|
---|
1443 | error('Received the string `%s` for the boolean attribute `%s`. ' + '%s ' + 'Did you mean %s={%s}?', value, name, value === 'false' ? 'The browser will interpret it as a truthy value.' : 'Although this works, it will not work as expected if you pass the string "false".', name, value);
|
---|
1444 |
|
---|
1445 | warnedProperties$1[name] = true;
|
---|
1446 | return true;
|
---|
1447 | }
|
---|
1448 |
|
---|
1449 | return true;
|
---|
1450 | };
|
---|
1451 | }
|
---|
1452 |
|
---|
1453 | var warnUnknownProperties = function (type, props, eventRegistry) {
|
---|
1454 | {
|
---|
1455 | var unknownProps = [];
|
---|
1456 |
|
---|
1457 | for (var key in props) {
|
---|
1458 | var isValid = validateProperty$1(type, key, props[key], eventRegistry);
|
---|
1459 |
|
---|
1460 | if (!isValid) {
|
---|
1461 | unknownProps.push(key);
|
---|
1462 | }
|
---|
1463 | }
|
---|
1464 |
|
---|
1465 | var unknownPropString = unknownProps.map(function (prop) {
|
---|
1466 | return '`' + prop + '`';
|
---|
1467 | }).join(', ');
|
---|
1468 |
|
---|
1469 | if (unknownProps.length === 1) {
|
---|
1470 | error('Invalid value for prop %s on <%s> tag. Either remove it from the element, ' + 'or pass a string or number value to keep it in the DOM. ' + 'For details, see https://reactjs.org/link/attribute-behavior ', unknownPropString, type);
|
---|
1471 | } else if (unknownProps.length > 1) {
|
---|
1472 | error('Invalid values for props %s on <%s> tag. Either remove them from the element, ' + 'or pass a string or number value to keep them in the DOM. ' + 'For details, see https://reactjs.org/link/attribute-behavior ', unknownPropString, type);
|
---|
1473 | }
|
---|
1474 | }
|
---|
1475 | };
|
---|
1476 |
|
---|
1477 | function validateProperties$2(type, props, eventRegistry) {
|
---|
1478 | if (isCustomComponent(type, props)) {
|
---|
1479 | return;
|
---|
1480 | }
|
---|
1481 |
|
---|
1482 | warnUnknownProperties(type, props, eventRegistry);
|
---|
1483 | }
|
---|
1484 |
|
---|
1485 | var warnValidStyle = function () {};
|
---|
1486 |
|
---|
1487 | {
|
---|
1488 | // 'msTransform' is correct, but the other prefixes should be capitalized
|
---|
1489 | var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
|
---|
1490 | var msPattern = /^-ms-/;
|
---|
1491 | var hyphenPattern = /-(.)/g; // style values shouldn't contain a semicolon
|
---|
1492 |
|
---|
1493 | var badStyleValueWithSemicolonPattern = /;\s*$/;
|
---|
1494 | var warnedStyleNames = {};
|
---|
1495 | var warnedStyleValues = {};
|
---|
1496 | var warnedForNaNValue = false;
|
---|
1497 | var warnedForInfinityValue = false;
|
---|
1498 |
|
---|
1499 | var camelize = function (string) {
|
---|
1500 | return string.replace(hyphenPattern, function (_, character) {
|
---|
1501 | return character.toUpperCase();
|
---|
1502 | });
|
---|
1503 | };
|
---|
1504 |
|
---|
1505 | var warnHyphenatedStyleName = function (name) {
|
---|
1506 | if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
---|
1507 | return;
|
---|
1508 | }
|
---|
1509 |
|
---|
1510 | warnedStyleNames[name] = true;
|
---|
1511 |
|
---|
1512 | error('Unsupported style property %s. Did you mean %s?', name, // As Andi Smith suggests
|
---|
1513 | // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
|
---|
1514 | // is converted to lowercase `ms`.
|
---|
1515 | camelize(name.replace(msPattern, 'ms-')));
|
---|
1516 | };
|
---|
1517 |
|
---|
1518 | var warnBadVendoredStyleName = function (name) {
|
---|
1519 | if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
---|
1520 | return;
|
---|
1521 | }
|
---|
1522 |
|
---|
1523 | warnedStyleNames[name] = true;
|
---|
1524 |
|
---|
1525 | error('Unsupported vendor-prefixed style property %s. Did you mean %s?', name, name.charAt(0).toUpperCase() + name.slice(1));
|
---|
1526 | };
|
---|
1527 |
|
---|
1528 | var warnStyleValueWithSemicolon = function (name, value) {
|
---|
1529 | if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
|
---|
1530 | return;
|
---|
1531 | }
|
---|
1532 |
|
---|
1533 | warnedStyleValues[value] = true;
|
---|
1534 |
|
---|
1535 | error("Style property values shouldn't contain a semicolon. " + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, ''));
|
---|
1536 | };
|
---|
1537 |
|
---|
1538 | var warnStyleValueIsNaN = function (name, value) {
|
---|
1539 | if (warnedForNaNValue) {
|
---|
1540 | return;
|
---|
1541 | }
|
---|
1542 |
|
---|
1543 | warnedForNaNValue = true;
|
---|
1544 |
|
---|
1545 | error('`NaN` is an invalid value for the `%s` css style property.', name);
|
---|
1546 | };
|
---|
1547 |
|
---|
1548 | var warnStyleValueIsInfinity = function (name, value) {
|
---|
1549 | if (warnedForInfinityValue) {
|
---|
1550 | return;
|
---|
1551 | }
|
---|
1552 |
|
---|
1553 | warnedForInfinityValue = true;
|
---|
1554 |
|
---|
1555 | error('`Infinity` is an invalid value for the `%s` css style property.', name);
|
---|
1556 | };
|
---|
1557 |
|
---|
1558 | warnValidStyle = function (name, value) {
|
---|
1559 | if (name.indexOf('-') > -1) {
|
---|
1560 | warnHyphenatedStyleName(name);
|
---|
1561 | } else if (badVendoredStyleNamePattern.test(name)) {
|
---|
1562 | warnBadVendoredStyleName(name);
|
---|
1563 | } else if (badStyleValueWithSemicolonPattern.test(value)) {
|
---|
1564 | warnStyleValueWithSemicolon(name, value);
|
---|
1565 | }
|
---|
1566 |
|
---|
1567 | if (typeof value === 'number') {
|
---|
1568 | if (isNaN(value)) {
|
---|
1569 | warnStyleValueIsNaN(name, value);
|
---|
1570 | } else if (!isFinite(value)) {
|
---|
1571 | warnStyleValueIsInfinity(name, value);
|
---|
1572 | }
|
---|
1573 | }
|
---|
1574 | };
|
---|
1575 | }
|
---|
1576 |
|
---|
1577 | var warnValidStyle$1 = warnValidStyle;
|
---|
1578 |
|
---|
1579 | // code copied and modified from escape-html
|
---|
1580 | var matchHtmlRegExp = /["'&<>]/;
|
---|
1581 | /**
|
---|
1582 | * Escapes special characters and HTML entities in a given html string.
|
---|
1583 | *
|
---|
1584 | * @param {string} string HTML string to escape for later insertion
|
---|
1585 | * @return {string}
|
---|
1586 | * @public
|
---|
1587 | */
|
---|
1588 |
|
---|
1589 | function escapeHtml(string) {
|
---|
1590 | {
|
---|
1591 | checkHtmlStringCoercion(string);
|
---|
1592 | }
|
---|
1593 |
|
---|
1594 | var str = '' + string;
|
---|
1595 | var match = matchHtmlRegExp.exec(str);
|
---|
1596 |
|
---|
1597 | if (!match) {
|
---|
1598 | return str;
|
---|
1599 | }
|
---|
1600 |
|
---|
1601 | var escape;
|
---|
1602 | var html = '';
|
---|
1603 | var index;
|
---|
1604 | var lastIndex = 0;
|
---|
1605 |
|
---|
1606 | for (index = match.index; index < str.length; index++) {
|
---|
1607 | switch (str.charCodeAt(index)) {
|
---|
1608 | case 34:
|
---|
1609 | // "
|
---|
1610 | escape = '"';
|
---|
1611 | break;
|
---|
1612 |
|
---|
1613 | case 38:
|
---|
1614 | // &
|
---|
1615 | escape = '&';
|
---|
1616 | break;
|
---|
1617 |
|
---|
1618 | case 39:
|
---|
1619 | // '
|
---|
1620 | escape = '''; // modified from escape-html; used to be '''
|
---|
1621 |
|
---|
1622 | break;
|
---|
1623 |
|
---|
1624 | case 60:
|
---|
1625 | // <
|
---|
1626 | escape = '<';
|
---|
1627 | break;
|
---|
1628 |
|
---|
1629 | case 62:
|
---|
1630 | // >
|
---|
1631 | escape = '>';
|
---|
1632 | break;
|
---|
1633 |
|
---|
1634 | default:
|
---|
1635 | continue;
|
---|
1636 | }
|
---|
1637 |
|
---|
1638 | if (lastIndex !== index) {
|
---|
1639 | html += str.substring(lastIndex, index);
|
---|
1640 | }
|
---|
1641 |
|
---|
1642 | lastIndex = index + 1;
|
---|
1643 | html += escape;
|
---|
1644 | }
|
---|
1645 |
|
---|
1646 | return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
|
---|
1647 | } // end code copied and modified from escape-html
|
---|
1648 |
|
---|
1649 | /**
|
---|
1650 | * Escapes text to prevent scripting attacks.
|
---|
1651 | *
|
---|
1652 | * @param {*} text Text value to escape.
|
---|
1653 | * @return {string} An escaped string.
|
---|
1654 | */
|
---|
1655 |
|
---|
1656 |
|
---|
1657 | function escapeTextForBrowser(text) {
|
---|
1658 | if (typeof text === 'boolean' || typeof text === 'number') {
|
---|
1659 | // this shortcircuit helps perf for types that we know will never have
|
---|
1660 | // special characters, especially given that this function is used often
|
---|
1661 | // for numeric dom ids.
|
---|
1662 | return '' + text;
|
---|
1663 | }
|
---|
1664 |
|
---|
1665 | return escapeHtml(text);
|
---|
1666 | }
|
---|
1667 |
|
---|
1668 | var uppercasePattern = /([A-Z])/g;
|
---|
1669 | var msPattern$1 = /^ms-/;
|
---|
1670 | /**
|
---|
1671 | * Hyphenates a camelcased CSS property name, for example:
|
---|
1672 | *
|
---|
1673 | * > hyphenateStyleName('backgroundColor')
|
---|
1674 | * < "background-color"
|
---|
1675 | * > hyphenateStyleName('MozTransition')
|
---|
1676 | * < "-moz-transition"
|
---|
1677 | * > hyphenateStyleName('msTransition')
|
---|
1678 | * < "-ms-transition"
|
---|
1679 | *
|
---|
1680 | * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
|
---|
1681 | * is converted to `-ms-`.
|
---|
1682 | */
|
---|
1683 |
|
---|
1684 | function hyphenateStyleName(name) {
|
---|
1685 | return name.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern$1, '-ms-');
|
---|
1686 | }
|
---|
1687 |
|
---|
1688 | // and any newline or tab are filtered out as if they're not part of the URL.
|
---|
1689 | // https://url.spec.whatwg.org/#url-parsing
|
---|
1690 | // Tab or newline are defined as \r\n\t:
|
---|
1691 | // https://infra.spec.whatwg.org/#ascii-tab-or-newline
|
---|
1692 | // A C0 control is a code point in the range \u0000 NULL to \u001F
|
---|
1693 | // INFORMATION SEPARATOR ONE, inclusive:
|
---|
1694 | // https://infra.spec.whatwg.org/#c0-control-or-space
|
---|
1695 |
|
---|
1696 | /* eslint-disable max-len */
|
---|
1697 |
|
---|
1698 | var isJavaScriptProtocol = /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i;
|
---|
1699 | var didWarn = false;
|
---|
1700 |
|
---|
1701 | function sanitizeURL(url) {
|
---|
1702 | {
|
---|
1703 | if (!didWarn && isJavaScriptProtocol.test(url)) {
|
---|
1704 | didWarn = true;
|
---|
1705 |
|
---|
1706 | error('A future version of React will block javascript: URLs as a security precaution. ' + 'Use event handlers instead if you can. If you need to generate unsafe HTML try ' + 'using dangerouslySetInnerHTML instead. React was passed %s.', JSON.stringify(url));
|
---|
1707 | }
|
---|
1708 | }
|
---|
1709 | }
|
---|
1710 |
|
---|
1711 | var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
|
---|
1712 |
|
---|
1713 | function isArray(a) {
|
---|
1714 | return isArrayImpl(a);
|
---|
1715 | }
|
---|
1716 |
|
---|
1717 | var startInlineScript = stringToPrecomputedChunk('<script>');
|
---|
1718 | var endInlineScript = stringToPrecomputedChunk('</script>');
|
---|
1719 | var startScriptSrc = stringToPrecomputedChunk('<script src="');
|
---|
1720 | var startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
|
---|
1721 | var endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
|
---|
1722 | /**
|
---|
1723 | * This escaping function is designed to work with bootstrapScriptContent only.
|
---|
1724 | * because we know we are escaping the entire script. We can avoid for instance
|
---|
1725 | * escaping html comment string sequences that are valid javascript as well because
|
---|
1726 | * if there are no sebsequent <script sequences the html parser will never enter
|
---|
1727 | * script data double escaped state (see: https://www.w3.org/TR/html53/syntax.html#script-data-double-escaped-state)
|
---|
1728 | *
|
---|
1729 | * While untrusted script content should be made safe before using this api it will
|
---|
1730 | * ensure that the script cannot be early terminated or never terminated state
|
---|
1731 | */
|
---|
1732 |
|
---|
1733 | function escapeBootstrapScriptContent(scriptText) {
|
---|
1734 | {
|
---|
1735 | checkHtmlStringCoercion(scriptText);
|
---|
1736 | }
|
---|
1737 |
|
---|
1738 | return ('' + scriptText).replace(scriptRegex, scriptReplacer);
|
---|
1739 | }
|
---|
1740 |
|
---|
1741 | var scriptRegex = /(<\/|<)(s)(cript)/gi;
|
---|
1742 |
|
---|
1743 | var scriptReplacer = function (match, prefix, s, suffix) {
|
---|
1744 | return "" + prefix + (s === 's' ? "\\u0073" : "\\u0053") + suffix;
|
---|
1745 | }; // Allows us to keep track of what we've already written so we can refer back to it.
|
---|
1746 |
|
---|
1747 |
|
---|
1748 | function createResponseState(identifierPrefix, nonce, bootstrapScriptContent, bootstrapScripts, bootstrapModules) {
|
---|
1749 | var idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
|
---|
1750 | var inlineScriptWithNonce = nonce === undefined ? startInlineScript : stringToPrecomputedChunk('<script nonce="' + escapeTextForBrowser(nonce) + '">');
|
---|
1751 | var bootstrapChunks = [];
|
---|
1752 |
|
---|
1753 | if (bootstrapScriptContent !== undefined) {
|
---|
1754 | bootstrapChunks.push(inlineScriptWithNonce, stringToChunk(escapeBootstrapScriptContent(bootstrapScriptContent)), endInlineScript);
|
---|
1755 | }
|
---|
1756 |
|
---|
1757 | if (bootstrapScripts !== undefined) {
|
---|
1758 | for (var i = 0; i < bootstrapScripts.length; i++) {
|
---|
1759 | bootstrapChunks.push(startScriptSrc, stringToChunk(escapeTextForBrowser(bootstrapScripts[i])), endAsyncScript);
|
---|
1760 | }
|
---|
1761 | }
|
---|
1762 |
|
---|
1763 | if (bootstrapModules !== undefined) {
|
---|
1764 | for (var _i = 0; _i < bootstrapModules.length; _i++) {
|
---|
1765 | bootstrapChunks.push(startModuleSrc, stringToChunk(escapeTextForBrowser(bootstrapModules[_i])), endAsyncScript);
|
---|
1766 | }
|
---|
1767 | }
|
---|
1768 |
|
---|
1769 | return {
|
---|
1770 | bootstrapChunks: bootstrapChunks,
|
---|
1771 | startInlineScript: inlineScriptWithNonce,
|
---|
1772 | placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
|
---|
1773 | segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
|
---|
1774 | boundaryPrefix: idPrefix + 'B:',
|
---|
1775 | idPrefix: idPrefix,
|
---|
1776 | nextSuspenseID: 0,
|
---|
1777 | sentCompleteSegmentFunction: false,
|
---|
1778 | sentCompleteBoundaryFunction: false,
|
---|
1779 | sentClientRenderFunction: false
|
---|
1780 | };
|
---|
1781 | } // Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
|
---|
1782 | // modes. We only include the variants as they matter for the sake of our purposes.
|
---|
1783 | // We don't actually provide the namespace therefore we use constants instead of the string.
|
---|
1784 |
|
---|
1785 | var ROOT_HTML_MODE = 0; // Used for the root most element tag.
|
---|
1786 |
|
---|
1787 | var HTML_MODE = 1;
|
---|
1788 | var SVG_MODE = 2;
|
---|
1789 | var MATHML_MODE = 3;
|
---|
1790 | var HTML_TABLE_MODE = 4;
|
---|
1791 | var HTML_TABLE_BODY_MODE = 5;
|
---|
1792 | var HTML_TABLE_ROW_MODE = 6;
|
---|
1793 | var HTML_COLGROUP_MODE = 7; // We have a greater than HTML_TABLE_MODE check elsewhere. If you add more cases here, make sure it
|
---|
1794 | // still makes sense
|
---|
1795 |
|
---|
1796 | function createFormatContext(insertionMode, selectedValue) {
|
---|
1797 | return {
|
---|
1798 | insertionMode: insertionMode,
|
---|
1799 | selectedValue: selectedValue
|
---|
1800 | };
|
---|
1801 | }
|
---|
1802 |
|
---|
1803 | function createRootFormatContext(namespaceURI) {
|
---|
1804 | var insertionMode = namespaceURI === 'http://www.w3.org/2000/svg' ? SVG_MODE : namespaceURI === 'http://www.w3.org/1998/Math/MathML' ? MATHML_MODE : ROOT_HTML_MODE;
|
---|
1805 | return createFormatContext(insertionMode, null);
|
---|
1806 | }
|
---|
1807 | function getChildFormatContext(parentContext, type, props) {
|
---|
1808 | switch (type) {
|
---|
1809 | case 'select':
|
---|
1810 | return createFormatContext(HTML_MODE, props.value != null ? props.value : props.defaultValue);
|
---|
1811 |
|
---|
1812 | case 'svg':
|
---|
1813 | return createFormatContext(SVG_MODE, null);
|
---|
1814 |
|
---|
1815 | case 'math':
|
---|
1816 | return createFormatContext(MATHML_MODE, null);
|
---|
1817 |
|
---|
1818 | case 'foreignObject':
|
---|
1819 | return createFormatContext(HTML_MODE, null);
|
---|
1820 | // Table parents are special in that their children can only be created at all if they're
|
---|
1821 | // wrapped in a table parent. So we need to encode that we're entering this mode.
|
---|
1822 |
|
---|
1823 | case 'table':
|
---|
1824 | return createFormatContext(HTML_TABLE_MODE, null);
|
---|
1825 |
|
---|
1826 | case 'thead':
|
---|
1827 | case 'tbody':
|
---|
1828 | case 'tfoot':
|
---|
1829 | return createFormatContext(HTML_TABLE_BODY_MODE, null);
|
---|
1830 |
|
---|
1831 | case 'colgroup':
|
---|
1832 | return createFormatContext(HTML_COLGROUP_MODE, null);
|
---|
1833 |
|
---|
1834 | case 'tr':
|
---|
1835 | return createFormatContext(HTML_TABLE_ROW_MODE, null);
|
---|
1836 | }
|
---|
1837 |
|
---|
1838 | if (parentContext.insertionMode >= HTML_TABLE_MODE) {
|
---|
1839 | // Whatever tag this was, it wasn't a table parent or other special parent, so we must have
|
---|
1840 | // entered plain HTML again.
|
---|
1841 | return createFormatContext(HTML_MODE, null);
|
---|
1842 | }
|
---|
1843 |
|
---|
1844 | if (parentContext.insertionMode === ROOT_HTML_MODE) {
|
---|
1845 | // We've emitted the root and is now in plain HTML mode.
|
---|
1846 | return createFormatContext(HTML_MODE, null);
|
---|
1847 | }
|
---|
1848 |
|
---|
1849 | return parentContext;
|
---|
1850 | }
|
---|
1851 | var UNINITIALIZED_SUSPENSE_BOUNDARY_ID = null;
|
---|
1852 | function assignSuspenseBoundaryID(responseState) {
|
---|
1853 | var generatedID = responseState.nextSuspenseID++;
|
---|
1854 | return stringToPrecomputedChunk(responseState.boundaryPrefix + generatedID.toString(16));
|
---|
1855 | }
|
---|
1856 | function makeId(responseState, treeId, localId) {
|
---|
1857 | var idPrefix = responseState.idPrefix;
|
---|
1858 | var id = ':' + idPrefix + 'R' + treeId; // Unless this is the first id at this level, append a number at the end
|
---|
1859 | // that represents the position of this useId hook among all the useId
|
---|
1860 | // hooks for this fiber.
|
---|
1861 |
|
---|
1862 | if (localId > 0) {
|
---|
1863 | id += 'H' + localId.toString(32);
|
---|
1864 | }
|
---|
1865 |
|
---|
1866 | return id + ':';
|
---|
1867 | }
|
---|
1868 |
|
---|
1869 | function encodeHTMLTextNode(text) {
|
---|
1870 | return escapeTextForBrowser(text);
|
---|
1871 | }
|
---|
1872 |
|
---|
1873 | var textSeparator = stringToPrecomputedChunk('<!-- -->');
|
---|
1874 | function pushTextInstance(target, text, responseState, textEmbedded) {
|
---|
1875 | if (text === '') {
|
---|
1876 | // Empty text doesn't have a DOM node representation and the hydration is aware of this.
|
---|
1877 | return textEmbedded;
|
---|
1878 | }
|
---|
1879 |
|
---|
1880 | if (textEmbedded) {
|
---|
1881 | target.push(textSeparator);
|
---|
1882 | }
|
---|
1883 |
|
---|
1884 | target.push(stringToChunk(encodeHTMLTextNode(text)));
|
---|
1885 | return true;
|
---|
1886 | } // Called when Fizz is done with a Segment. Currently the only purpose is to conditionally
|
---|
1887 | // emit a text separator when we don't know for sure it is safe to omit
|
---|
1888 |
|
---|
1889 | function pushSegmentFinale(target, responseState, lastPushedText, textEmbedded) {
|
---|
1890 | if (lastPushedText && textEmbedded) {
|
---|
1891 | target.push(textSeparator);
|
---|
1892 | }
|
---|
1893 | }
|
---|
1894 | var styleNameCache = new Map();
|
---|
1895 |
|
---|
1896 | function processStyleName(styleName) {
|
---|
1897 | var chunk = styleNameCache.get(styleName);
|
---|
1898 |
|
---|
1899 | if (chunk !== undefined) {
|
---|
1900 | return chunk;
|
---|
1901 | }
|
---|
1902 |
|
---|
1903 | var result = stringToPrecomputedChunk(escapeTextForBrowser(hyphenateStyleName(styleName)));
|
---|
1904 | styleNameCache.set(styleName, result);
|
---|
1905 | return result;
|
---|
1906 | }
|
---|
1907 |
|
---|
1908 | var styleAttributeStart = stringToPrecomputedChunk(' style="');
|
---|
1909 | var styleAssign = stringToPrecomputedChunk(':');
|
---|
1910 | var styleSeparator = stringToPrecomputedChunk(';');
|
---|
1911 |
|
---|
1912 | function pushStyle(target, responseState, style) {
|
---|
1913 | if (typeof style !== 'object') {
|
---|
1914 | throw new Error('The `style` prop expects a mapping from style properties to values, ' + "not a string. For example, style={{marginRight: spacing + 'em'}} when " + 'using JSX.');
|
---|
1915 | }
|
---|
1916 |
|
---|
1917 | var isFirst = true;
|
---|
1918 |
|
---|
1919 | for (var styleName in style) {
|
---|
1920 | if (!hasOwnProperty.call(style, styleName)) {
|
---|
1921 | continue;
|
---|
1922 | } // If you provide unsafe user data here they can inject arbitrary CSS
|
---|
1923 | // which may be problematic (I couldn't repro this):
|
---|
1924 | // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
|
---|
1925 | // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
|
---|
1926 | // This is not an XSS hole but instead a potential CSS injection issue
|
---|
1927 | // which has lead to a greater discussion about how we're going to
|
---|
1928 | // trust URLs moving forward. See #2115901
|
---|
1929 |
|
---|
1930 |
|
---|
1931 | var styleValue = style[styleName];
|
---|
1932 |
|
---|
1933 | if (styleValue == null || typeof styleValue === 'boolean' || styleValue === '') {
|
---|
1934 | // TODO: We used to set empty string as a style with an empty value. Does that ever make sense?
|
---|
1935 | continue;
|
---|
1936 | }
|
---|
1937 |
|
---|
1938 | var nameChunk = void 0;
|
---|
1939 | var valueChunk = void 0;
|
---|
1940 | var isCustomProperty = styleName.indexOf('--') === 0;
|
---|
1941 |
|
---|
1942 | if (isCustomProperty) {
|
---|
1943 | nameChunk = stringToChunk(escapeTextForBrowser(styleName));
|
---|
1944 |
|
---|
1945 | {
|
---|
1946 | checkCSSPropertyStringCoercion(styleValue, styleName);
|
---|
1947 | }
|
---|
1948 |
|
---|
1949 | valueChunk = stringToChunk(escapeTextForBrowser(('' + styleValue).trim()));
|
---|
1950 | } else {
|
---|
1951 | {
|
---|
1952 | warnValidStyle$1(styleName, styleValue);
|
---|
1953 | }
|
---|
1954 |
|
---|
1955 | nameChunk = processStyleName(styleName);
|
---|
1956 |
|
---|
1957 | if (typeof styleValue === 'number') {
|
---|
1958 | if (styleValue !== 0 && !hasOwnProperty.call(isUnitlessNumber, styleName)) {
|
---|
1959 | valueChunk = stringToChunk(styleValue + 'px'); // Presumes implicit 'px' suffix for unitless numbers
|
---|
1960 | } else {
|
---|
1961 | valueChunk = stringToChunk('' + styleValue);
|
---|
1962 | }
|
---|
1963 | } else {
|
---|
1964 | {
|
---|
1965 | checkCSSPropertyStringCoercion(styleValue, styleName);
|
---|
1966 | }
|
---|
1967 |
|
---|
1968 | valueChunk = stringToChunk(escapeTextForBrowser(('' + styleValue).trim()));
|
---|
1969 | }
|
---|
1970 | }
|
---|
1971 |
|
---|
1972 | if (isFirst) {
|
---|
1973 | isFirst = false; // If it's first, we don't need any separators prefixed.
|
---|
1974 |
|
---|
1975 | target.push(styleAttributeStart, nameChunk, styleAssign, valueChunk);
|
---|
1976 | } else {
|
---|
1977 | target.push(styleSeparator, nameChunk, styleAssign, valueChunk);
|
---|
1978 | }
|
---|
1979 | }
|
---|
1980 |
|
---|
1981 | if (!isFirst) {
|
---|
1982 | target.push(attributeEnd);
|
---|
1983 | }
|
---|
1984 | }
|
---|
1985 |
|
---|
1986 | var attributeSeparator = stringToPrecomputedChunk(' ');
|
---|
1987 | var attributeAssign = stringToPrecomputedChunk('="');
|
---|
1988 | var attributeEnd = stringToPrecomputedChunk('"');
|
---|
1989 | var attributeEmptyString = stringToPrecomputedChunk('=""');
|
---|
1990 |
|
---|
1991 | function pushAttribute(target, responseState, name, value) {
|
---|
1992 | switch (name) {
|
---|
1993 | case 'style':
|
---|
1994 | {
|
---|
1995 | pushStyle(target, responseState, value);
|
---|
1996 | return;
|
---|
1997 | }
|
---|
1998 |
|
---|
1999 | case 'defaultValue':
|
---|
2000 | case 'defaultChecked': // These shouldn't be set as attributes on generic HTML elements.
|
---|
2001 |
|
---|
2002 | case 'innerHTML': // Must use dangerouslySetInnerHTML instead.
|
---|
2003 |
|
---|
2004 | case 'suppressContentEditableWarning':
|
---|
2005 | case 'suppressHydrationWarning':
|
---|
2006 | // Ignored. These are built-in to React on the client.
|
---|
2007 | return;
|
---|
2008 | }
|
---|
2009 |
|
---|
2010 | if ( // shouldIgnoreAttribute
|
---|
2011 | // We have already filtered out null/undefined and reserved words.
|
---|
2012 | name.length > 2 && (name[0] === 'o' || name[0] === 'O') && (name[1] === 'n' || name[1] === 'N')) {
|
---|
2013 | return;
|
---|
2014 | }
|
---|
2015 |
|
---|
2016 | var propertyInfo = getPropertyInfo(name);
|
---|
2017 |
|
---|
2018 | if (propertyInfo !== null) {
|
---|
2019 | // shouldRemoveAttribute
|
---|
2020 | switch (typeof value) {
|
---|
2021 | case 'function': // $FlowIssue symbol is perfectly valid here
|
---|
2022 |
|
---|
2023 | case 'symbol':
|
---|
2024 | // eslint-disable-line
|
---|
2025 | return;
|
---|
2026 |
|
---|
2027 | case 'boolean':
|
---|
2028 | {
|
---|
2029 | if (!propertyInfo.acceptsBooleans) {
|
---|
2030 | return;
|
---|
2031 | }
|
---|
2032 | }
|
---|
2033 | }
|
---|
2034 |
|
---|
2035 | var attributeName = propertyInfo.attributeName;
|
---|
2036 | var attributeNameChunk = stringToChunk(attributeName); // TODO: If it's known we can cache the chunk.
|
---|
2037 |
|
---|
2038 | switch (propertyInfo.type) {
|
---|
2039 | case BOOLEAN:
|
---|
2040 | if (value) {
|
---|
2041 | target.push(attributeSeparator, attributeNameChunk, attributeEmptyString);
|
---|
2042 | }
|
---|
2043 |
|
---|
2044 | return;
|
---|
2045 |
|
---|
2046 | case OVERLOADED_BOOLEAN:
|
---|
2047 | if (value === true) {
|
---|
2048 | target.push(attributeSeparator, attributeNameChunk, attributeEmptyString);
|
---|
2049 | } else if (value === false) ; else {
|
---|
2050 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2051 | }
|
---|
2052 |
|
---|
2053 | return;
|
---|
2054 |
|
---|
2055 | case NUMERIC:
|
---|
2056 | if (!isNaN(value)) {
|
---|
2057 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2058 | }
|
---|
2059 |
|
---|
2060 | break;
|
---|
2061 |
|
---|
2062 | case POSITIVE_NUMERIC:
|
---|
2063 | if (!isNaN(value) && value >= 1) {
|
---|
2064 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2065 | }
|
---|
2066 |
|
---|
2067 | break;
|
---|
2068 |
|
---|
2069 | default:
|
---|
2070 | if (propertyInfo.sanitizeURL) {
|
---|
2071 | {
|
---|
2072 | checkAttributeStringCoercion(value, attributeName);
|
---|
2073 | }
|
---|
2074 |
|
---|
2075 | value = '' + value;
|
---|
2076 | sanitizeURL(value);
|
---|
2077 | }
|
---|
2078 |
|
---|
2079 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2080 | }
|
---|
2081 | } else if (isAttributeNameSafe(name)) {
|
---|
2082 | // shouldRemoveAttribute
|
---|
2083 | switch (typeof value) {
|
---|
2084 | case 'function': // $FlowIssue symbol is perfectly valid here
|
---|
2085 |
|
---|
2086 | case 'symbol':
|
---|
2087 | // eslint-disable-line
|
---|
2088 | return;
|
---|
2089 |
|
---|
2090 | case 'boolean':
|
---|
2091 | {
|
---|
2092 | var prefix = name.toLowerCase().slice(0, 5);
|
---|
2093 |
|
---|
2094 | if (prefix !== 'data-' && prefix !== 'aria-') {
|
---|
2095 | return;
|
---|
2096 | }
|
---|
2097 | }
|
---|
2098 | }
|
---|
2099 |
|
---|
2100 | target.push(attributeSeparator, stringToChunk(name), attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2101 | }
|
---|
2102 | }
|
---|
2103 |
|
---|
2104 | var endOfStartTag = stringToPrecomputedChunk('>');
|
---|
2105 | var endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
|
---|
2106 |
|
---|
2107 | function pushInnerHTML(target, innerHTML, children) {
|
---|
2108 | if (innerHTML != null) {
|
---|
2109 | if (children != null) {
|
---|
2110 | throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.');
|
---|
2111 | }
|
---|
2112 |
|
---|
2113 | if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
|
---|
2114 | throw new Error('`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' + 'Please visit https://reactjs.org/link/dangerously-set-inner-html ' + 'for more information.');
|
---|
2115 | }
|
---|
2116 |
|
---|
2117 | var html = innerHTML.__html;
|
---|
2118 |
|
---|
2119 | if (html !== null && html !== undefined) {
|
---|
2120 | {
|
---|
2121 | checkHtmlStringCoercion(html);
|
---|
2122 | }
|
---|
2123 |
|
---|
2124 | target.push(stringToChunk('' + html));
|
---|
2125 | }
|
---|
2126 | }
|
---|
2127 | } // TODO: Move these to ResponseState so that we warn for every request.
|
---|
2128 | // It would help debugging in stateful servers (e.g. service worker).
|
---|
2129 |
|
---|
2130 |
|
---|
2131 | var didWarnDefaultInputValue = false;
|
---|
2132 | var didWarnDefaultChecked = false;
|
---|
2133 | var didWarnDefaultSelectValue = false;
|
---|
2134 | var didWarnDefaultTextareaValue = false;
|
---|
2135 | var didWarnInvalidOptionChildren = false;
|
---|
2136 | var didWarnInvalidOptionInnerHTML = false;
|
---|
2137 | var didWarnSelectedSetOnOption = false;
|
---|
2138 |
|
---|
2139 | function checkSelectProp(props, propName) {
|
---|
2140 | {
|
---|
2141 | var value = props[propName];
|
---|
2142 |
|
---|
2143 | if (value != null) {
|
---|
2144 | var array = isArray(value);
|
---|
2145 |
|
---|
2146 | if (props.multiple && !array) {
|
---|
2147 | error('The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.', propName);
|
---|
2148 | } else if (!props.multiple && array) {
|
---|
2149 | error('The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.', propName);
|
---|
2150 | }
|
---|
2151 | }
|
---|
2152 | }
|
---|
2153 | }
|
---|
2154 |
|
---|
2155 | function pushStartSelect(target, props, responseState) {
|
---|
2156 | {
|
---|
2157 | checkControlledValueProps('select', props);
|
---|
2158 | checkSelectProp(props, 'value');
|
---|
2159 | checkSelectProp(props, 'defaultValue');
|
---|
2160 |
|
---|
2161 | if (props.value !== undefined && props.defaultValue !== undefined && !didWarnDefaultSelectValue) {
|
---|
2162 | error('Select elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled select ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components');
|
---|
2163 |
|
---|
2164 | didWarnDefaultSelectValue = true;
|
---|
2165 | }
|
---|
2166 | }
|
---|
2167 |
|
---|
2168 | target.push(startChunkForTag('select'));
|
---|
2169 | var children = null;
|
---|
2170 | var innerHTML = null;
|
---|
2171 |
|
---|
2172 | for (var propKey in props) {
|
---|
2173 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2174 | var propValue = props[propKey];
|
---|
2175 |
|
---|
2176 | if (propValue == null) {
|
---|
2177 | continue;
|
---|
2178 | }
|
---|
2179 |
|
---|
2180 | switch (propKey) {
|
---|
2181 | case 'children':
|
---|
2182 | children = propValue;
|
---|
2183 | break;
|
---|
2184 |
|
---|
2185 | case 'dangerouslySetInnerHTML':
|
---|
2186 | // TODO: This doesn't really make sense for select since it can't use the controlled
|
---|
2187 | // value in the innerHTML.
|
---|
2188 | innerHTML = propValue;
|
---|
2189 | break;
|
---|
2190 |
|
---|
2191 | case 'defaultValue':
|
---|
2192 | case 'value':
|
---|
2193 | // These are set on the Context instead and applied to the nested options.
|
---|
2194 | break;
|
---|
2195 |
|
---|
2196 | default:
|
---|
2197 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2198 | break;
|
---|
2199 | }
|
---|
2200 | }
|
---|
2201 | }
|
---|
2202 |
|
---|
2203 | target.push(endOfStartTag);
|
---|
2204 | pushInnerHTML(target, innerHTML, children);
|
---|
2205 | return children;
|
---|
2206 | }
|
---|
2207 |
|
---|
2208 | function flattenOptionChildren(children) {
|
---|
2209 | var content = ''; // Flatten children and warn if they aren't strings or numbers;
|
---|
2210 | // invalid types are ignored.
|
---|
2211 |
|
---|
2212 | React.Children.forEach(children, function (child) {
|
---|
2213 | if (child == null) {
|
---|
2214 | return;
|
---|
2215 | }
|
---|
2216 |
|
---|
2217 | content += child;
|
---|
2218 |
|
---|
2219 | {
|
---|
2220 | if (!didWarnInvalidOptionChildren && typeof child !== 'string' && typeof child !== 'number') {
|
---|
2221 | didWarnInvalidOptionChildren = true;
|
---|
2222 |
|
---|
2223 | error('Cannot infer the option value of complex children. ' + 'Pass a `value` prop or use a plain string as children to <option>.');
|
---|
2224 | }
|
---|
2225 | }
|
---|
2226 | });
|
---|
2227 | return content;
|
---|
2228 | }
|
---|
2229 |
|
---|
2230 | var selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
|
---|
2231 |
|
---|
2232 | function pushStartOption(target, props, responseState, formatContext) {
|
---|
2233 | var selectedValue = formatContext.selectedValue;
|
---|
2234 | target.push(startChunkForTag('option'));
|
---|
2235 | var children = null;
|
---|
2236 | var value = null;
|
---|
2237 | var selected = null;
|
---|
2238 | var innerHTML = null;
|
---|
2239 |
|
---|
2240 | for (var propKey in props) {
|
---|
2241 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2242 | var propValue = props[propKey];
|
---|
2243 |
|
---|
2244 | if (propValue == null) {
|
---|
2245 | continue;
|
---|
2246 | }
|
---|
2247 |
|
---|
2248 | switch (propKey) {
|
---|
2249 | case 'children':
|
---|
2250 | children = propValue;
|
---|
2251 | break;
|
---|
2252 |
|
---|
2253 | case 'selected':
|
---|
2254 | // ignore
|
---|
2255 | selected = propValue;
|
---|
2256 |
|
---|
2257 | {
|
---|
2258 | // TODO: Remove support for `selected` in <option>.
|
---|
2259 | if (!didWarnSelectedSetOnOption) {
|
---|
2260 | error('Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.');
|
---|
2261 |
|
---|
2262 | didWarnSelectedSetOnOption = true;
|
---|
2263 | }
|
---|
2264 | }
|
---|
2265 |
|
---|
2266 | break;
|
---|
2267 |
|
---|
2268 | case 'dangerouslySetInnerHTML':
|
---|
2269 | innerHTML = propValue;
|
---|
2270 | break;
|
---|
2271 | // eslint-disable-next-line-no-fallthrough
|
---|
2272 |
|
---|
2273 | case 'value':
|
---|
2274 | value = propValue;
|
---|
2275 | // We intentionally fallthrough to also set the attribute on the node.
|
---|
2276 | // eslint-disable-next-line-no-fallthrough
|
---|
2277 |
|
---|
2278 | default:
|
---|
2279 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2280 | break;
|
---|
2281 | }
|
---|
2282 | }
|
---|
2283 | }
|
---|
2284 |
|
---|
2285 | if (selectedValue != null) {
|
---|
2286 | var stringValue;
|
---|
2287 |
|
---|
2288 | if (value !== null) {
|
---|
2289 | {
|
---|
2290 | checkAttributeStringCoercion(value, 'value');
|
---|
2291 | }
|
---|
2292 |
|
---|
2293 | stringValue = '' + value;
|
---|
2294 | } else {
|
---|
2295 | {
|
---|
2296 | if (innerHTML !== null) {
|
---|
2297 | if (!didWarnInvalidOptionInnerHTML) {
|
---|
2298 | didWarnInvalidOptionInnerHTML = true;
|
---|
2299 |
|
---|
2300 | error('Pass a `value` prop if you set dangerouslyInnerHTML so React knows ' + 'which value should be selected.');
|
---|
2301 | }
|
---|
2302 | }
|
---|
2303 | }
|
---|
2304 |
|
---|
2305 | stringValue = flattenOptionChildren(children);
|
---|
2306 | }
|
---|
2307 |
|
---|
2308 | if (isArray(selectedValue)) {
|
---|
2309 | // multiple
|
---|
2310 | for (var i = 0; i < selectedValue.length; i++) {
|
---|
2311 | {
|
---|
2312 | checkAttributeStringCoercion(selectedValue[i], 'value');
|
---|
2313 | }
|
---|
2314 |
|
---|
2315 | var v = '' + selectedValue[i];
|
---|
2316 |
|
---|
2317 | if (v === stringValue) {
|
---|
2318 | target.push(selectedMarkerAttribute);
|
---|
2319 | break;
|
---|
2320 | }
|
---|
2321 | }
|
---|
2322 | } else {
|
---|
2323 | {
|
---|
2324 | checkAttributeStringCoercion(selectedValue, 'select.value');
|
---|
2325 | }
|
---|
2326 |
|
---|
2327 | if ('' + selectedValue === stringValue) {
|
---|
2328 | target.push(selectedMarkerAttribute);
|
---|
2329 | }
|
---|
2330 | }
|
---|
2331 | } else if (selected) {
|
---|
2332 | target.push(selectedMarkerAttribute);
|
---|
2333 | }
|
---|
2334 |
|
---|
2335 | target.push(endOfStartTag);
|
---|
2336 | pushInnerHTML(target, innerHTML, children);
|
---|
2337 | return children;
|
---|
2338 | }
|
---|
2339 |
|
---|
2340 | function pushInput(target, props, responseState) {
|
---|
2341 | {
|
---|
2342 | checkControlledValueProps('input', props);
|
---|
2343 |
|
---|
2344 | if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnDefaultChecked) {
|
---|
2345 | error('%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components', 'A component', props.type);
|
---|
2346 |
|
---|
2347 | didWarnDefaultChecked = true;
|
---|
2348 | }
|
---|
2349 |
|
---|
2350 | if (props.value !== undefined && props.defaultValue !== undefined && !didWarnDefaultInputValue) {
|
---|
2351 | error('%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components', 'A component', props.type);
|
---|
2352 |
|
---|
2353 | didWarnDefaultInputValue = true;
|
---|
2354 | }
|
---|
2355 | }
|
---|
2356 |
|
---|
2357 | target.push(startChunkForTag('input'));
|
---|
2358 | var value = null;
|
---|
2359 | var defaultValue = null;
|
---|
2360 | var checked = null;
|
---|
2361 | var defaultChecked = null;
|
---|
2362 |
|
---|
2363 | for (var propKey in props) {
|
---|
2364 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2365 | var propValue = props[propKey];
|
---|
2366 |
|
---|
2367 | if (propValue == null) {
|
---|
2368 | continue;
|
---|
2369 | }
|
---|
2370 |
|
---|
2371 | switch (propKey) {
|
---|
2372 | case 'children':
|
---|
2373 | case 'dangerouslySetInnerHTML':
|
---|
2374 | throw new Error('input' + " is a self-closing tag and must neither have `children` nor " + 'use `dangerouslySetInnerHTML`.');
|
---|
2375 | // eslint-disable-next-line-no-fallthrough
|
---|
2376 |
|
---|
2377 | case 'defaultChecked':
|
---|
2378 | defaultChecked = propValue;
|
---|
2379 | break;
|
---|
2380 |
|
---|
2381 | case 'defaultValue':
|
---|
2382 | defaultValue = propValue;
|
---|
2383 | break;
|
---|
2384 |
|
---|
2385 | case 'checked':
|
---|
2386 | checked = propValue;
|
---|
2387 | break;
|
---|
2388 |
|
---|
2389 | case 'value':
|
---|
2390 | value = propValue;
|
---|
2391 | break;
|
---|
2392 |
|
---|
2393 | default:
|
---|
2394 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2395 | break;
|
---|
2396 | }
|
---|
2397 | }
|
---|
2398 | }
|
---|
2399 |
|
---|
2400 | if (checked !== null) {
|
---|
2401 | pushAttribute(target, responseState, 'checked', checked);
|
---|
2402 | } else if (defaultChecked !== null) {
|
---|
2403 | pushAttribute(target, responseState, 'checked', defaultChecked);
|
---|
2404 | }
|
---|
2405 |
|
---|
2406 | if (value !== null) {
|
---|
2407 | pushAttribute(target, responseState, 'value', value);
|
---|
2408 | } else if (defaultValue !== null) {
|
---|
2409 | pushAttribute(target, responseState, 'value', defaultValue);
|
---|
2410 | }
|
---|
2411 |
|
---|
2412 | target.push(endOfStartTagSelfClosing);
|
---|
2413 | return null;
|
---|
2414 | }
|
---|
2415 |
|
---|
2416 | function pushStartTextArea(target, props, responseState) {
|
---|
2417 | {
|
---|
2418 | checkControlledValueProps('textarea', props);
|
---|
2419 |
|
---|
2420 | if (props.value !== undefined && props.defaultValue !== undefined && !didWarnDefaultTextareaValue) {
|
---|
2421 | error('Textarea elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled textarea ' + 'and remove one of these props. More info: ' + 'https://reactjs.org/link/controlled-components');
|
---|
2422 |
|
---|
2423 | didWarnDefaultTextareaValue = true;
|
---|
2424 | }
|
---|
2425 | }
|
---|
2426 |
|
---|
2427 | target.push(startChunkForTag('textarea'));
|
---|
2428 | var value = null;
|
---|
2429 | var defaultValue = null;
|
---|
2430 | var children = null;
|
---|
2431 |
|
---|
2432 | for (var propKey in props) {
|
---|
2433 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2434 | var propValue = props[propKey];
|
---|
2435 |
|
---|
2436 | if (propValue == null) {
|
---|
2437 | continue;
|
---|
2438 | }
|
---|
2439 |
|
---|
2440 | switch (propKey) {
|
---|
2441 | case 'children':
|
---|
2442 | children = propValue;
|
---|
2443 | break;
|
---|
2444 |
|
---|
2445 | case 'value':
|
---|
2446 | value = propValue;
|
---|
2447 | break;
|
---|
2448 |
|
---|
2449 | case 'defaultValue':
|
---|
2450 | defaultValue = propValue;
|
---|
2451 | break;
|
---|
2452 |
|
---|
2453 | case 'dangerouslySetInnerHTML':
|
---|
2454 | throw new Error('`dangerouslySetInnerHTML` does not make sense on <textarea>.');
|
---|
2455 | // eslint-disable-next-line-no-fallthrough
|
---|
2456 |
|
---|
2457 | default:
|
---|
2458 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2459 | break;
|
---|
2460 | }
|
---|
2461 | }
|
---|
2462 | }
|
---|
2463 |
|
---|
2464 | if (value === null && defaultValue !== null) {
|
---|
2465 | value = defaultValue;
|
---|
2466 | }
|
---|
2467 |
|
---|
2468 | target.push(endOfStartTag); // TODO (yungsters): Remove support for children content in <textarea>.
|
---|
2469 |
|
---|
2470 | if (children != null) {
|
---|
2471 | {
|
---|
2472 | error('Use the `defaultValue` or `value` props instead of setting ' + 'children on <textarea>.');
|
---|
2473 | }
|
---|
2474 |
|
---|
2475 | if (value != null) {
|
---|
2476 | throw new Error('If you supply `defaultValue` on a <textarea>, do not pass children.');
|
---|
2477 | }
|
---|
2478 |
|
---|
2479 | if (isArray(children)) {
|
---|
2480 | if (children.length > 1) {
|
---|
2481 | throw new Error('<textarea> can only have at most one child.');
|
---|
2482 | } // TODO: remove the coercion and the DEV check below because it will
|
---|
2483 | // always be overwritten by the coercion several lines below it. #22309
|
---|
2484 |
|
---|
2485 |
|
---|
2486 | {
|
---|
2487 | checkHtmlStringCoercion(children[0]);
|
---|
2488 | }
|
---|
2489 |
|
---|
2490 | value = '' + children[0];
|
---|
2491 | }
|
---|
2492 |
|
---|
2493 | {
|
---|
2494 | checkHtmlStringCoercion(children);
|
---|
2495 | }
|
---|
2496 |
|
---|
2497 | value = '' + children;
|
---|
2498 | }
|
---|
2499 |
|
---|
2500 | if (typeof value === 'string' && value[0] === '\n') {
|
---|
2501 | // text/html ignores the first character in these tags if it's a newline
|
---|
2502 | // Prefer to break application/xml over text/html (for now) by adding
|
---|
2503 | // a newline specifically to get eaten by the parser. (Alternately for
|
---|
2504 | // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first
|
---|
2505 | // \r is normalized out by HTMLTextAreaElement#value.)
|
---|
2506 | // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
|
---|
2507 | // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
|
---|
2508 | // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
|
---|
2509 | // See: Parsing of "textarea" "listing" and "pre" elements
|
---|
2510 | // from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
|
---|
2511 | target.push(leadingNewline);
|
---|
2512 | } // ToString and push directly instead of recurse over children.
|
---|
2513 | // We don't really support complex children in the value anyway.
|
---|
2514 | // This also currently avoids a trailing comment node which breaks textarea.
|
---|
2515 |
|
---|
2516 |
|
---|
2517 | if (value !== null) {
|
---|
2518 | {
|
---|
2519 | checkAttributeStringCoercion(value, 'value');
|
---|
2520 | }
|
---|
2521 |
|
---|
2522 | target.push(stringToChunk(encodeHTMLTextNode('' + value)));
|
---|
2523 | }
|
---|
2524 |
|
---|
2525 | return null;
|
---|
2526 | }
|
---|
2527 |
|
---|
2528 | function pushSelfClosing(target, props, tag, responseState) {
|
---|
2529 | target.push(startChunkForTag(tag));
|
---|
2530 |
|
---|
2531 | for (var propKey in props) {
|
---|
2532 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2533 | var propValue = props[propKey];
|
---|
2534 |
|
---|
2535 | if (propValue == null) {
|
---|
2536 | continue;
|
---|
2537 | }
|
---|
2538 |
|
---|
2539 | switch (propKey) {
|
---|
2540 | case 'children':
|
---|
2541 | case 'dangerouslySetInnerHTML':
|
---|
2542 | throw new Error(tag + " is a self-closing tag and must neither have `children` nor " + 'use `dangerouslySetInnerHTML`.');
|
---|
2543 | // eslint-disable-next-line-no-fallthrough
|
---|
2544 |
|
---|
2545 | default:
|
---|
2546 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2547 | break;
|
---|
2548 | }
|
---|
2549 | }
|
---|
2550 | }
|
---|
2551 |
|
---|
2552 | target.push(endOfStartTagSelfClosing);
|
---|
2553 | return null;
|
---|
2554 | }
|
---|
2555 |
|
---|
2556 | function pushStartMenuItem(target, props, responseState) {
|
---|
2557 | target.push(startChunkForTag('menuitem'));
|
---|
2558 |
|
---|
2559 | for (var propKey in props) {
|
---|
2560 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2561 | var propValue = props[propKey];
|
---|
2562 |
|
---|
2563 | if (propValue == null) {
|
---|
2564 | continue;
|
---|
2565 | }
|
---|
2566 |
|
---|
2567 | switch (propKey) {
|
---|
2568 | case 'children':
|
---|
2569 | case 'dangerouslySetInnerHTML':
|
---|
2570 | throw new Error('menuitems cannot have `children` nor `dangerouslySetInnerHTML`.');
|
---|
2571 | // eslint-disable-next-line-no-fallthrough
|
---|
2572 |
|
---|
2573 | default:
|
---|
2574 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2575 | break;
|
---|
2576 | }
|
---|
2577 | }
|
---|
2578 | }
|
---|
2579 |
|
---|
2580 | target.push(endOfStartTag);
|
---|
2581 | return null;
|
---|
2582 | }
|
---|
2583 |
|
---|
2584 | function pushStartTitle(target, props, responseState) {
|
---|
2585 | target.push(startChunkForTag('title'));
|
---|
2586 | var children = null;
|
---|
2587 |
|
---|
2588 | for (var propKey in props) {
|
---|
2589 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2590 | var propValue = props[propKey];
|
---|
2591 |
|
---|
2592 | if (propValue == null) {
|
---|
2593 | continue;
|
---|
2594 | }
|
---|
2595 |
|
---|
2596 | switch (propKey) {
|
---|
2597 | case 'children':
|
---|
2598 | children = propValue;
|
---|
2599 | break;
|
---|
2600 |
|
---|
2601 | case 'dangerouslySetInnerHTML':
|
---|
2602 | throw new Error('`dangerouslySetInnerHTML` does not make sense on <title>.');
|
---|
2603 | // eslint-disable-next-line-no-fallthrough
|
---|
2604 |
|
---|
2605 | default:
|
---|
2606 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2607 | break;
|
---|
2608 | }
|
---|
2609 | }
|
---|
2610 | }
|
---|
2611 |
|
---|
2612 | target.push(endOfStartTag);
|
---|
2613 |
|
---|
2614 | {
|
---|
2615 | var child = Array.isArray(children) && children.length < 2 ? children[0] || null : children;
|
---|
2616 |
|
---|
2617 | if (Array.isArray(children) && children.length > 1) {
|
---|
2618 | error('A title element received an array with more than 1 element as children. ' + 'In browsers title Elements can only have Text Nodes as children. If ' + 'the children being rendered output more than a single text node in aggregate the browser ' + 'will display markup and comments as text in the title and hydration will likely fail and ' + 'fall back to client rendering');
|
---|
2619 | } else if (child != null && child.$$typeof != null) {
|
---|
2620 | error('A title element received a React element for children. ' + 'In the browser title Elements can only have Text Nodes as children. If ' + 'the children being rendered output more than a single text node in aggregate the browser ' + 'will display markup and comments as text in the title and hydration will likely fail and ' + 'fall back to client rendering');
|
---|
2621 | } else if (child != null && typeof child !== 'string' && typeof child !== 'number') {
|
---|
2622 | error('A title element received a value that was not a string or number for children. ' + 'In the browser title Elements can only have Text Nodes as children. If ' + 'the children being rendered output more than a single text node in aggregate the browser ' + 'will display markup and comments as text in the title and hydration will likely fail and ' + 'fall back to client rendering');
|
---|
2623 | }
|
---|
2624 | }
|
---|
2625 |
|
---|
2626 | return children;
|
---|
2627 | }
|
---|
2628 |
|
---|
2629 | function pushStartGenericElement(target, props, tag, responseState) {
|
---|
2630 | target.push(startChunkForTag(tag));
|
---|
2631 | var children = null;
|
---|
2632 | var innerHTML = null;
|
---|
2633 |
|
---|
2634 | for (var propKey in props) {
|
---|
2635 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2636 | var propValue = props[propKey];
|
---|
2637 |
|
---|
2638 | if (propValue == null) {
|
---|
2639 | continue;
|
---|
2640 | }
|
---|
2641 |
|
---|
2642 | switch (propKey) {
|
---|
2643 | case 'children':
|
---|
2644 | children = propValue;
|
---|
2645 | break;
|
---|
2646 |
|
---|
2647 | case 'dangerouslySetInnerHTML':
|
---|
2648 | innerHTML = propValue;
|
---|
2649 | break;
|
---|
2650 |
|
---|
2651 | default:
|
---|
2652 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2653 | break;
|
---|
2654 | }
|
---|
2655 | }
|
---|
2656 | }
|
---|
2657 |
|
---|
2658 | target.push(endOfStartTag);
|
---|
2659 | pushInnerHTML(target, innerHTML, children);
|
---|
2660 |
|
---|
2661 | if (typeof children === 'string') {
|
---|
2662 | // Special case children as a string to avoid the unnecessary comment.
|
---|
2663 | // TODO: Remove this special case after the general optimization is in place.
|
---|
2664 | target.push(stringToChunk(encodeHTMLTextNode(children)));
|
---|
2665 | return null;
|
---|
2666 | }
|
---|
2667 |
|
---|
2668 | return children;
|
---|
2669 | }
|
---|
2670 |
|
---|
2671 | function pushStartCustomElement(target, props, tag, responseState) {
|
---|
2672 | target.push(startChunkForTag(tag));
|
---|
2673 | var children = null;
|
---|
2674 | var innerHTML = null;
|
---|
2675 |
|
---|
2676 | for (var propKey in props) {
|
---|
2677 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2678 | var propValue = props[propKey];
|
---|
2679 |
|
---|
2680 | if (propValue == null) {
|
---|
2681 | continue;
|
---|
2682 | }
|
---|
2683 |
|
---|
2684 | switch (propKey) {
|
---|
2685 | case 'children':
|
---|
2686 | children = propValue;
|
---|
2687 | break;
|
---|
2688 |
|
---|
2689 | case 'dangerouslySetInnerHTML':
|
---|
2690 | innerHTML = propValue;
|
---|
2691 | break;
|
---|
2692 |
|
---|
2693 | case 'style':
|
---|
2694 | pushStyle(target, responseState, propValue);
|
---|
2695 | break;
|
---|
2696 |
|
---|
2697 | case 'suppressContentEditableWarning':
|
---|
2698 | case 'suppressHydrationWarning':
|
---|
2699 | // Ignored. These are built-in to React on the client.
|
---|
2700 | break;
|
---|
2701 |
|
---|
2702 | default:
|
---|
2703 | if (isAttributeNameSafe(propKey) && typeof propValue !== 'function' && typeof propValue !== 'symbol') {
|
---|
2704 | target.push(attributeSeparator, stringToChunk(propKey), attributeAssign, stringToChunk(escapeTextForBrowser(propValue)), attributeEnd);
|
---|
2705 | }
|
---|
2706 |
|
---|
2707 | break;
|
---|
2708 | }
|
---|
2709 | }
|
---|
2710 | }
|
---|
2711 |
|
---|
2712 | target.push(endOfStartTag);
|
---|
2713 | pushInnerHTML(target, innerHTML, children);
|
---|
2714 | return children;
|
---|
2715 | }
|
---|
2716 |
|
---|
2717 | var leadingNewline = stringToPrecomputedChunk('\n');
|
---|
2718 |
|
---|
2719 | function pushStartPreformattedElement(target, props, tag, responseState) {
|
---|
2720 | target.push(startChunkForTag(tag));
|
---|
2721 | var children = null;
|
---|
2722 | var innerHTML = null;
|
---|
2723 |
|
---|
2724 | for (var propKey in props) {
|
---|
2725 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2726 | var propValue = props[propKey];
|
---|
2727 |
|
---|
2728 | if (propValue == null) {
|
---|
2729 | continue;
|
---|
2730 | }
|
---|
2731 |
|
---|
2732 | switch (propKey) {
|
---|
2733 | case 'children':
|
---|
2734 | children = propValue;
|
---|
2735 | break;
|
---|
2736 |
|
---|
2737 | case 'dangerouslySetInnerHTML':
|
---|
2738 | innerHTML = propValue;
|
---|
2739 | break;
|
---|
2740 |
|
---|
2741 | default:
|
---|
2742 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2743 | break;
|
---|
2744 | }
|
---|
2745 | }
|
---|
2746 | }
|
---|
2747 |
|
---|
2748 | target.push(endOfStartTag); // text/html ignores the first character in these tags if it's a newline
|
---|
2749 | // Prefer to break application/xml over text/html (for now) by adding
|
---|
2750 | // a newline specifically to get eaten by the parser. (Alternately for
|
---|
2751 | // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first
|
---|
2752 | // \r is normalized out by HTMLTextAreaElement#value.)
|
---|
2753 | // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
|
---|
2754 | // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
|
---|
2755 | // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
|
---|
2756 | // See: Parsing of "textarea" "listing" and "pre" elements
|
---|
2757 | // from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
|
---|
2758 | // TODO: This doesn't deal with the case where the child is an array
|
---|
2759 | // or component that returns a string.
|
---|
2760 |
|
---|
2761 | if (innerHTML != null) {
|
---|
2762 | if (children != null) {
|
---|
2763 | throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.');
|
---|
2764 | }
|
---|
2765 |
|
---|
2766 | if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
|
---|
2767 | throw new Error('`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' + 'Please visit https://reactjs.org/link/dangerously-set-inner-html ' + 'for more information.');
|
---|
2768 | }
|
---|
2769 |
|
---|
2770 | var html = innerHTML.__html;
|
---|
2771 |
|
---|
2772 | if (html !== null && html !== undefined) {
|
---|
2773 | if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
|
---|
2774 | target.push(leadingNewline, stringToChunk(html));
|
---|
2775 | } else {
|
---|
2776 | {
|
---|
2777 | checkHtmlStringCoercion(html);
|
---|
2778 | }
|
---|
2779 |
|
---|
2780 | target.push(stringToChunk('' + html));
|
---|
2781 | }
|
---|
2782 | }
|
---|
2783 | }
|
---|
2784 |
|
---|
2785 | if (typeof children === 'string' && children[0] === '\n') {
|
---|
2786 | target.push(leadingNewline);
|
---|
2787 | }
|
---|
2788 |
|
---|
2789 | return children;
|
---|
2790 | } // We accept any tag to be rendered but since this gets injected into arbitrary
|
---|
2791 | // HTML, we want to make sure that it's a safe tag.
|
---|
2792 | // http://www.w3.org/TR/REC-xml/#NT-Name
|
---|
2793 |
|
---|
2794 |
|
---|
2795 | var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
|
---|
2796 |
|
---|
2797 | var validatedTagCache = new Map();
|
---|
2798 |
|
---|
2799 | function startChunkForTag(tag) {
|
---|
2800 | var tagStartChunk = validatedTagCache.get(tag);
|
---|
2801 |
|
---|
2802 | if (tagStartChunk === undefined) {
|
---|
2803 | if (!VALID_TAG_REGEX.test(tag)) {
|
---|
2804 | throw new Error("Invalid tag: " + tag);
|
---|
2805 | }
|
---|
2806 |
|
---|
2807 | tagStartChunk = stringToPrecomputedChunk('<' + tag);
|
---|
2808 | validatedTagCache.set(tag, tagStartChunk);
|
---|
2809 | }
|
---|
2810 |
|
---|
2811 | return tagStartChunk;
|
---|
2812 | }
|
---|
2813 |
|
---|
2814 | var DOCTYPE = stringToPrecomputedChunk('<!DOCTYPE html>');
|
---|
2815 | function pushStartInstance(target, type, props, responseState, formatContext) {
|
---|
2816 | {
|
---|
2817 | validateProperties(type, props);
|
---|
2818 | validateProperties$1(type, props);
|
---|
2819 | validateProperties$2(type, props, null);
|
---|
2820 |
|
---|
2821 | if (!props.suppressContentEditableWarning && props.contentEditable && props.children != null) {
|
---|
2822 | error('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.');
|
---|
2823 | }
|
---|
2824 |
|
---|
2825 | if (formatContext.insertionMode !== SVG_MODE && formatContext.insertionMode !== MATHML_MODE) {
|
---|
2826 | if (type.indexOf('-') === -1 && typeof props.is !== 'string' && type.toLowerCase() !== type) {
|
---|
2827 | error('<%s /> is using incorrect casing. ' + 'Use PascalCase for React components, ' + 'or lowercase for HTML elements.', type);
|
---|
2828 | }
|
---|
2829 | }
|
---|
2830 | }
|
---|
2831 |
|
---|
2832 | switch (type) {
|
---|
2833 | // Special tags
|
---|
2834 | case 'select':
|
---|
2835 | return pushStartSelect(target, props, responseState);
|
---|
2836 |
|
---|
2837 | case 'option':
|
---|
2838 | return pushStartOption(target, props, responseState, formatContext);
|
---|
2839 |
|
---|
2840 | case 'textarea':
|
---|
2841 | return pushStartTextArea(target, props, responseState);
|
---|
2842 |
|
---|
2843 | case 'input':
|
---|
2844 | return pushInput(target, props, responseState);
|
---|
2845 |
|
---|
2846 | case 'menuitem':
|
---|
2847 | return pushStartMenuItem(target, props, responseState);
|
---|
2848 |
|
---|
2849 | case 'title':
|
---|
2850 | return pushStartTitle(target, props, responseState);
|
---|
2851 | // Newline eating tags
|
---|
2852 |
|
---|
2853 | case 'listing':
|
---|
2854 | case 'pre':
|
---|
2855 | {
|
---|
2856 | return pushStartPreformattedElement(target, props, type, responseState);
|
---|
2857 | }
|
---|
2858 | // Omitted close tags
|
---|
2859 |
|
---|
2860 | case 'area':
|
---|
2861 | case 'base':
|
---|
2862 | case 'br':
|
---|
2863 | case 'col':
|
---|
2864 | case 'embed':
|
---|
2865 | case 'hr':
|
---|
2866 | case 'img':
|
---|
2867 | case 'keygen':
|
---|
2868 | case 'link':
|
---|
2869 | case 'meta':
|
---|
2870 | case 'param':
|
---|
2871 | case 'source':
|
---|
2872 | case 'track':
|
---|
2873 | case 'wbr':
|
---|
2874 | {
|
---|
2875 | return pushSelfClosing(target, props, type, responseState);
|
---|
2876 | }
|
---|
2877 | // These are reserved SVG and MathML elements, that are never custom elements.
|
---|
2878 | // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
|
---|
2879 |
|
---|
2880 | case 'annotation-xml':
|
---|
2881 | case 'color-profile':
|
---|
2882 | case 'font-face':
|
---|
2883 | case 'font-face-src':
|
---|
2884 | case 'font-face-uri':
|
---|
2885 | case 'font-face-format':
|
---|
2886 | case 'font-face-name':
|
---|
2887 | case 'missing-glyph':
|
---|
2888 | {
|
---|
2889 | return pushStartGenericElement(target, props, type, responseState);
|
---|
2890 | }
|
---|
2891 |
|
---|
2892 | case 'html':
|
---|
2893 | {
|
---|
2894 | if (formatContext.insertionMode === ROOT_HTML_MODE) {
|
---|
2895 | // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
|
---|
2896 | // then we also emit the DOCTYPE as part of the root content as a convenience for
|
---|
2897 | // rendering the whole document.
|
---|
2898 | target.push(DOCTYPE);
|
---|
2899 | }
|
---|
2900 |
|
---|
2901 | return pushStartGenericElement(target, props, type, responseState);
|
---|
2902 | }
|
---|
2903 |
|
---|
2904 | default:
|
---|
2905 | {
|
---|
2906 | if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
|
---|
2907 | // Generic element
|
---|
2908 | return pushStartGenericElement(target, props, type, responseState);
|
---|
2909 | } else {
|
---|
2910 | // Custom element
|
---|
2911 | return pushStartCustomElement(target, props, type, responseState);
|
---|
2912 | }
|
---|
2913 | }
|
---|
2914 | }
|
---|
2915 | }
|
---|
2916 | var endTag1 = stringToPrecomputedChunk('</');
|
---|
2917 | var endTag2 = stringToPrecomputedChunk('>');
|
---|
2918 | function pushEndInstance(target, type, props) {
|
---|
2919 | switch (type) {
|
---|
2920 | // Omitted close tags
|
---|
2921 | // TODO: Instead of repeating this switch we could try to pass a flag from above.
|
---|
2922 | // That would require returning a tuple. Which might be ok if it gets inlined.
|
---|
2923 | case 'area':
|
---|
2924 | case 'base':
|
---|
2925 | case 'br':
|
---|
2926 | case 'col':
|
---|
2927 | case 'embed':
|
---|
2928 | case 'hr':
|
---|
2929 | case 'img':
|
---|
2930 | case 'input':
|
---|
2931 | case 'keygen':
|
---|
2932 | case 'link':
|
---|
2933 | case 'meta':
|
---|
2934 | case 'param':
|
---|
2935 | case 'source':
|
---|
2936 | case 'track':
|
---|
2937 | case 'wbr':
|
---|
2938 | {
|
---|
2939 | // No close tag needed.
|
---|
2940 | break;
|
---|
2941 | }
|
---|
2942 |
|
---|
2943 | default:
|
---|
2944 | {
|
---|
2945 | target.push(endTag1, stringToChunk(type), endTag2);
|
---|
2946 | }
|
---|
2947 | }
|
---|
2948 | }
|
---|
2949 | function writeCompletedRoot(destination, responseState) {
|
---|
2950 | var bootstrapChunks = responseState.bootstrapChunks;
|
---|
2951 | var i = 0;
|
---|
2952 |
|
---|
2953 | for (; i < bootstrapChunks.length - 1; i++) {
|
---|
2954 | writeChunk(destination, bootstrapChunks[i]);
|
---|
2955 | }
|
---|
2956 |
|
---|
2957 | if (i < bootstrapChunks.length) {
|
---|
2958 | return writeChunkAndReturn(destination, bootstrapChunks[i]);
|
---|
2959 | }
|
---|
2960 |
|
---|
2961 | return true;
|
---|
2962 | } // Structural Nodes
|
---|
2963 | // A placeholder is a node inside a hidden partial tree that can be filled in later, but before
|
---|
2964 | // display. It's never visible to users. We use the template tag because it can be used in every
|
---|
2965 | // type of parent. <script> tags also work in every other tag except <colgroup>.
|
---|
2966 |
|
---|
2967 | var placeholder1 = stringToPrecomputedChunk('<template id="');
|
---|
2968 | var placeholder2 = stringToPrecomputedChunk('"></template>');
|
---|
2969 | function writePlaceholder(destination, responseState, id) {
|
---|
2970 | writeChunk(destination, placeholder1);
|
---|
2971 | writeChunk(destination, responseState.placeholderPrefix);
|
---|
2972 | var formattedID = stringToChunk(id.toString(16));
|
---|
2973 | writeChunk(destination, formattedID);
|
---|
2974 | return writeChunkAndReturn(destination, placeholder2);
|
---|
2975 | } // Suspense boundaries are encoded as comments.
|
---|
2976 |
|
---|
2977 | var startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
|
---|
2978 | var startPendingSuspenseBoundary1 = stringToPrecomputedChunk('<!--$?--><template id="');
|
---|
2979 | var startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
|
---|
2980 | var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk('<!--$!-->');
|
---|
2981 | var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
|
---|
2982 | var clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk('<template');
|
---|
2983 | var clientRenderedSuspenseBoundaryErrorAttrInterstitial = stringToPrecomputedChunk('"');
|
---|
2984 | var clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk(' data-dgst="');
|
---|
2985 | var clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk(' data-msg="');
|
---|
2986 | var clientRenderedSuspenseBoundaryError1C = stringToPrecomputedChunk(' data-stck="');
|
---|
2987 | var clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk('></template>');
|
---|
2988 | function writeStartCompletedSuspenseBoundary(destination, responseState) {
|
---|
2989 | return writeChunkAndReturn(destination, startCompletedSuspenseBoundary);
|
---|
2990 | }
|
---|
2991 | function writeStartPendingSuspenseBoundary(destination, responseState, id) {
|
---|
2992 | writeChunk(destination, startPendingSuspenseBoundary1);
|
---|
2993 |
|
---|
2994 | if (id === null) {
|
---|
2995 | throw new Error('An ID must have been assigned before we can complete the boundary.');
|
---|
2996 | }
|
---|
2997 |
|
---|
2998 | writeChunk(destination, id);
|
---|
2999 | return writeChunkAndReturn(destination, startPendingSuspenseBoundary2);
|
---|
3000 | }
|
---|
3001 | function writeStartClientRenderedSuspenseBoundary(destination, responseState, errorDigest, errorMesssage, errorComponentStack) {
|
---|
3002 | var result;
|
---|
3003 | result = writeChunkAndReturn(destination, startClientRenderedSuspenseBoundary);
|
---|
3004 | writeChunk(destination, clientRenderedSuspenseBoundaryError1);
|
---|
3005 |
|
---|
3006 | if (errorDigest) {
|
---|
3007 | writeChunk(destination, clientRenderedSuspenseBoundaryError1A);
|
---|
3008 | writeChunk(destination, stringToChunk(escapeTextForBrowser(errorDigest)));
|
---|
3009 | writeChunk(destination, clientRenderedSuspenseBoundaryErrorAttrInterstitial);
|
---|
3010 | }
|
---|
3011 |
|
---|
3012 | {
|
---|
3013 | if (errorMesssage) {
|
---|
3014 | writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
|
---|
3015 | writeChunk(destination, stringToChunk(escapeTextForBrowser(errorMesssage)));
|
---|
3016 | writeChunk(destination, clientRenderedSuspenseBoundaryErrorAttrInterstitial);
|
---|
3017 | }
|
---|
3018 |
|
---|
3019 | if (errorComponentStack) {
|
---|
3020 | writeChunk(destination, clientRenderedSuspenseBoundaryError1C);
|
---|
3021 | writeChunk(destination, stringToChunk(escapeTextForBrowser(errorComponentStack)));
|
---|
3022 | writeChunk(destination, clientRenderedSuspenseBoundaryErrorAttrInterstitial);
|
---|
3023 | }
|
---|
3024 | }
|
---|
3025 |
|
---|
3026 | result = writeChunkAndReturn(destination, clientRenderedSuspenseBoundaryError2);
|
---|
3027 | return result;
|
---|
3028 | }
|
---|
3029 | function writeEndCompletedSuspenseBoundary(destination, responseState) {
|
---|
3030 | return writeChunkAndReturn(destination, endSuspenseBoundary);
|
---|
3031 | }
|
---|
3032 | function writeEndPendingSuspenseBoundary(destination, responseState) {
|
---|
3033 | return writeChunkAndReturn(destination, endSuspenseBoundary);
|
---|
3034 | }
|
---|
3035 | function writeEndClientRenderedSuspenseBoundary(destination, responseState) {
|
---|
3036 | return writeChunkAndReturn(destination, endSuspenseBoundary);
|
---|
3037 | }
|
---|
3038 | var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
|
---|
3039 | var startSegmentHTML2 = stringToPrecomputedChunk('">');
|
---|
3040 | var endSegmentHTML = stringToPrecomputedChunk('</div>');
|
---|
3041 | var startSegmentSVG = stringToPrecomputedChunk('<svg aria-hidden="true" style="display:none" id="');
|
---|
3042 | var startSegmentSVG2 = stringToPrecomputedChunk('">');
|
---|
3043 | var endSegmentSVG = stringToPrecomputedChunk('</svg>');
|
---|
3044 | var startSegmentMathML = stringToPrecomputedChunk('<math aria-hidden="true" style="display:none" id="');
|
---|
3045 | var startSegmentMathML2 = stringToPrecomputedChunk('">');
|
---|
3046 | var endSegmentMathML = stringToPrecomputedChunk('</math>');
|
---|
3047 | var startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
|
---|
3048 | var startSegmentTable2 = stringToPrecomputedChunk('">');
|
---|
3049 | var endSegmentTable = stringToPrecomputedChunk('</table>');
|
---|
3050 | var startSegmentTableBody = stringToPrecomputedChunk('<table hidden><tbody id="');
|
---|
3051 | var startSegmentTableBody2 = stringToPrecomputedChunk('">');
|
---|
3052 | var endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
|
---|
3053 | var startSegmentTableRow = stringToPrecomputedChunk('<table hidden><tr id="');
|
---|
3054 | var startSegmentTableRow2 = stringToPrecomputedChunk('">');
|
---|
3055 | var endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
|
---|
3056 | var startSegmentColGroup = stringToPrecomputedChunk('<table hidden><colgroup id="');
|
---|
3057 | var startSegmentColGroup2 = stringToPrecomputedChunk('">');
|
---|
3058 | var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
|
---|
3059 | function writeStartSegment(destination, responseState, formatContext, id) {
|
---|
3060 | switch (formatContext.insertionMode) {
|
---|
3061 | case ROOT_HTML_MODE:
|
---|
3062 | case HTML_MODE:
|
---|
3063 | {
|
---|
3064 | writeChunk(destination, startSegmentHTML);
|
---|
3065 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3066 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3067 | return writeChunkAndReturn(destination, startSegmentHTML2);
|
---|
3068 | }
|
---|
3069 |
|
---|
3070 | case SVG_MODE:
|
---|
3071 | {
|
---|
3072 | writeChunk(destination, startSegmentSVG);
|
---|
3073 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3074 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3075 | return writeChunkAndReturn(destination, startSegmentSVG2);
|
---|
3076 | }
|
---|
3077 |
|
---|
3078 | case MATHML_MODE:
|
---|
3079 | {
|
---|
3080 | writeChunk(destination, startSegmentMathML);
|
---|
3081 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3082 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3083 | return writeChunkAndReturn(destination, startSegmentMathML2);
|
---|
3084 | }
|
---|
3085 |
|
---|
3086 | case HTML_TABLE_MODE:
|
---|
3087 | {
|
---|
3088 | writeChunk(destination, startSegmentTable);
|
---|
3089 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3090 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3091 | return writeChunkAndReturn(destination, startSegmentTable2);
|
---|
3092 | }
|
---|
3093 | // TODO: For the rest of these, there will be extra wrapper nodes that never
|
---|
3094 | // get deleted from the document. We need to delete the table too as part
|
---|
3095 | // of the injected scripts. They are invisible though so it's not too terrible
|
---|
3096 | // and it's kind of an edge case to suspend in a table. Totally supported though.
|
---|
3097 |
|
---|
3098 | case HTML_TABLE_BODY_MODE:
|
---|
3099 | {
|
---|
3100 | writeChunk(destination, startSegmentTableBody);
|
---|
3101 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3102 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3103 | return writeChunkAndReturn(destination, startSegmentTableBody2);
|
---|
3104 | }
|
---|
3105 |
|
---|
3106 | case HTML_TABLE_ROW_MODE:
|
---|
3107 | {
|
---|
3108 | writeChunk(destination, startSegmentTableRow);
|
---|
3109 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3110 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3111 | return writeChunkAndReturn(destination, startSegmentTableRow2);
|
---|
3112 | }
|
---|
3113 |
|
---|
3114 | case HTML_COLGROUP_MODE:
|
---|
3115 | {
|
---|
3116 | writeChunk(destination, startSegmentColGroup);
|
---|
3117 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3118 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3119 | return writeChunkAndReturn(destination, startSegmentColGroup2);
|
---|
3120 | }
|
---|
3121 |
|
---|
3122 | default:
|
---|
3123 | {
|
---|
3124 | throw new Error('Unknown insertion mode. This is a bug in React.');
|
---|
3125 | }
|
---|
3126 | }
|
---|
3127 | }
|
---|
3128 | function writeEndSegment(destination, formatContext) {
|
---|
3129 | switch (formatContext.insertionMode) {
|
---|
3130 | case ROOT_HTML_MODE:
|
---|
3131 | case HTML_MODE:
|
---|
3132 | {
|
---|
3133 | return writeChunkAndReturn(destination, endSegmentHTML);
|
---|
3134 | }
|
---|
3135 |
|
---|
3136 | case SVG_MODE:
|
---|
3137 | {
|
---|
3138 | return writeChunkAndReturn(destination, endSegmentSVG);
|
---|
3139 | }
|
---|
3140 |
|
---|
3141 | case MATHML_MODE:
|
---|
3142 | {
|
---|
3143 | return writeChunkAndReturn(destination, endSegmentMathML);
|
---|
3144 | }
|
---|
3145 |
|
---|
3146 | case HTML_TABLE_MODE:
|
---|
3147 | {
|
---|
3148 | return writeChunkAndReturn(destination, endSegmentTable);
|
---|
3149 | }
|
---|
3150 |
|
---|
3151 | case HTML_TABLE_BODY_MODE:
|
---|
3152 | {
|
---|
3153 | return writeChunkAndReturn(destination, endSegmentTableBody);
|
---|
3154 | }
|
---|
3155 |
|
---|
3156 | case HTML_TABLE_ROW_MODE:
|
---|
3157 | {
|
---|
3158 | return writeChunkAndReturn(destination, endSegmentTableRow);
|
---|
3159 | }
|
---|
3160 |
|
---|
3161 | case HTML_COLGROUP_MODE:
|
---|
3162 | {
|
---|
3163 | return writeChunkAndReturn(destination, endSegmentColGroup);
|
---|
3164 | }
|
---|
3165 |
|
---|
3166 | default:
|
---|
3167 | {
|
---|
3168 | throw new Error('Unknown insertion mode. This is a bug in React.');
|
---|
3169 | }
|
---|
3170 | }
|
---|
3171 | } // Instruction Set
|
---|
3172 | // The following code is the source scripts that we then minify and inline below,
|
---|
3173 | // with renamed function names that we hope don't collide:
|
---|
3174 | // const COMMENT_NODE = 8;
|
---|
3175 | // const SUSPENSE_START_DATA = '$';
|
---|
3176 | // const SUSPENSE_END_DATA = '/$';
|
---|
3177 | // const SUSPENSE_PENDING_START_DATA = '$?';
|
---|
3178 | // const SUSPENSE_FALLBACK_START_DATA = '$!';
|
---|
3179 | //
|
---|
3180 | // function clientRenderBoundary(suspenseBoundaryID, errorDigest, errorMsg, errorComponentStack) {
|
---|
3181 | // // Find the fallback's first element.
|
---|
3182 | // const suspenseIdNode = document.getElementById(suspenseBoundaryID);
|
---|
3183 | // if (!suspenseIdNode) {
|
---|
3184 | // // The user must have already navigated away from this tree.
|
---|
3185 | // // E.g. because the parent was hydrated.
|
---|
3186 | // return;
|
---|
3187 | // }
|
---|
3188 | // // Find the boundary around the fallback. This is always the previous node.
|
---|
3189 | // const suspenseNode = suspenseIdNode.previousSibling;
|
---|
3190 | // // Tag it to be client rendered.
|
---|
3191 | // suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
|
---|
3192 | // // assign error metadata to first sibling
|
---|
3193 | // let dataset = suspenseIdNode.dataset;
|
---|
3194 | // if (errorDigest) dataset.dgst = errorDigest;
|
---|
3195 | // if (errorMsg) dataset.msg = errorMsg;
|
---|
3196 | // if (errorComponentStack) dataset.stck = errorComponentStack;
|
---|
3197 | // // Tell React to retry it if the parent already hydrated.
|
---|
3198 | // if (suspenseNode._reactRetry) {
|
---|
3199 | // suspenseNode._reactRetry();
|
---|
3200 | // }
|
---|
3201 | // }
|
---|
3202 | //
|
---|
3203 | // function completeBoundary(suspenseBoundaryID, contentID) {
|
---|
3204 | // // Find the fallback's first element.
|
---|
3205 | // const suspenseIdNode = document.getElementById(suspenseBoundaryID);
|
---|
3206 | // const contentNode = document.getElementById(contentID);
|
---|
3207 | // // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
|
---|
3208 | // // This might also help by not causing recalcing each time we move a child from here to the target.
|
---|
3209 | // contentNode.parentNode.removeChild(contentNode);
|
---|
3210 | // if (!suspenseIdNode) {
|
---|
3211 | // // The user must have already navigated away from this tree.
|
---|
3212 | // // E.g. because the parent was hydrated. That's fine there's nothing to do
|
---|
3213 | // // but we have to make sure that we already deleted the container node.
|
---|
3214 | // return;
|
---|
3215 | // }
|
---|
3216 | // // Find the boundary around the fallback. This is always the previous node.
|
---|
3217 | // const suspenseNode = suspenseIdNode.previousSibling;
|
---|
3218 | //
|
---|
3219 | // // Clear all the existing children. This is complicated because
|
---|
3220 | // // there can be embedded Suspense boundaries in the fallback.
|
---|
3221 | // // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
|
---|
3222 | // // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
|
---|
3223 | // // They never hydrate anyway. However, currently we support incrementally loading the fallback.
|
---|
3224 | // const parentInstance = suspenseNode.parentNode;
|
---|
3225 | // let node = suspenseNode.nextSibling;
|
---|
3226 | // let depth = 0;
|
---|
3227 | // do {
|
---|
3228 | // if (node && node.nodeType === COMMENT_NODE) {
|
---|
3229 | // const data = node.data;
|
---|
3230 | // if (data === SUSPENSE_END_DATA) {
|
---|
3231 | // if (depth === 0) {
|
---|
3232 | // break;
|
---|
3233 | // } else {
|
---|
3234 | // depth--;
|
---|
3235 | // }
|
---|
3236 | // } else if (
|
---|
3237 | // data === SUSPENSE_START_DATA ||
|
---|
3238 | // data === SUSPENSE_PENDING_START_DATA ||
|
---|
3239 | // data === SUSPENSE_FALLBACK_START_DATA
|
---|
3240 | // ) {
|
---|
3241 | // depth++;
|
---|
3242 | // }
|
---|
3243 | // }
|
---|
3244 | //
|
---|
3245 | // const nextNode = node.nextSibling;
|
---|
3246 | // parentInstance.removeChild(node);
|
---|
3247 | // node = nextNode;
|
---|
3248 | // } while (node);
|
---|
3249 | //
|
---|
3250 | // const endOfBoundary = node;
|
---|
3251 | //
|
---|
3252 | // // Insert all the children from the contentNode between the start and end of suspense boundary.
|
---|
3253 | // while (contentNode.firstChild) {
|
---|
3254 | // parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
|
---|
3255 | // }
|
---|
3256 | // suspenseNode.data = SUSPENSE_START_DATA;
|
---|
3257 | // if (suspenseNode._reactRetry) {
|
---|
3258 | // suspenseNode._reactRetry();
|
---|
3259 | // }
|
---|
3260 | // }
|
---|
3261 | //
|
---|
3262 | // function completeSegment(containerID, placeholderID) {
|
---|
3263 | // const segmentContainer = document.getElementById(containerID);
|
---|
3264 | // const placeholderNode = document.getElementById(placeholderID);
|
---|
3265 | // // We always expect both nodes to exist here because, while we might
|
---|
3266 | // // have navigated away from the main tree, we still expect the detached
|
---|
3267 | // // tree to exist.
|
---|
3268 | // segmentContainer.parentNode.removeChild(segmentContainer);
|
---|
3269 | // while (segmentContainer.firstChild) {
|
---|
3270 | // placeholderNode.parentNode.insertBefore(
|
---|
3271 | // segmentContainer.firstChild,
|
---|
3272 | // placeholderNode,
|
---|
3273 | // );
|
---|
3274 | // }
|
---|
3275 | // placeholderNode.parentNode.removeChild(placeholderNode);
|
---|
3276 | // }
|
---|
3277 |
|
---|
3278 | var completeSegmentFunction = 'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
|
---|
3279 | var completeBoundaryFunction = 'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
|
---|
3280 | var clientRenderFunction = 'function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),b._reactRetry&&b._reactRetry())}';
|
---|
3281 | var completeSegmentScript1Full = stringToPrecomputedChunk(completeSegmentFunction + ';$RS("');
|
---|
3282 | var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
|
---|
3283 | var completeSegmentScript2 = stringToPrecomputedChunk('","');
|
---|
3284 | var completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
|
---|
3285 | function writeCompletedSegmentInstruction(destination, responseState, contentSegmentID) {
|
---|
3286 | writeChunk(destination, responseState.startInlineScript);
|
---|
3287 |
|
---|
3288 | if (!responseState.sentCompleteSegmentFunction) {
|
---|
3289 | // The first time we write this, we'll need to include the full implementation.
|
---|
3290 | responseState.sentCompleteSegmentFunction = true;
|
---|
3291 | writeChunk(destination, completeSegmentScript1Full);
|
---|
3292 | } else {
|
---|
3293 | // Future calls can just reuse the same function.
|
---|
3294 | writeChunk(destination, completeSegmentScript1Partial);
|
---|
3295 | }
|
---|
3296 |
|
---|
3297 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3298 | var formattedID = stringToChunk(contentSegmentID.toString(16));
|
---|
3299 | writeChunk(destination, formattedID);
|
---|
3300 | writeChunk(destination, completeSegmentScript2);
|
---|
3301 | writeChunk(destination, responseState.placeholderPrefix);
|
---|
3302 | writeChunk(destination, formattedID);
|
---|
3303 | return writeChunkAndReturn(destination, completeSegmentScript3);
|
---|
3304 | }
|
---|
3305 | var completeBoundaryScript1Full = stringToPrecomputedChunk(completeBoundaryFunction + ';$RC("');
|
---|
3306 | var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
|
---|
3307 | var completeBoundaryScript2 = stringToPrecomputedChunk('","');
|
---|
3308 | var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
|
---|
3309 | function writeCompletedBoundaryInstruction(destination, responseState, boundaryID, contentSegmentID) {
|
---|
3310 | writeChunk(destination, responseState.startInlineScript);
|
---|
3311 |
|
---|
3312 | if (!responseState.sentCompleteBoundaryFunction) {
|
---|
3313 | // The first time we write this, we'll need to include the full implementation.
|
---|
3314 | responseState.sentCompleteBoundaryFunction = true;
|
---|
3315 | writeChunk(destination, completeBoundaryScript1Full);
|
---|
3316 | } else {
|
---|
3317 | // Future calls can just reuse the same function.
|
---|
3318 | writeChunk(destination, completeBoundaryScript1Partial);
|
---|
3319 | }
|
---|
3320 |
|
---|
3321 | if (boundaryID === null) {
|
---|
3322 | throw new Error('An ID must have been assigned before we can complete the boundary.');
|
---|
3323 | }
|
---|
3324 |
|
---|
3325 | var formattedContentID = stringToChunk(contentSegmentID.toString(16));
|
---|
3326 | writeChunk(destination, boundaryID);
|
---|
3327 | writeChunk(destination, completeBoundaryScript2);
|
---|
3328 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3329 | writeChunk(destination, formattedContentID);
|
---|
3330 | return writeChunkAndReturn(destination, completeBoundaryScript3);
|
---|
3331 | }
|
---|
3332 | var clientRenderScript1Full = stringToPrecomputedChunk(clientRenderFunction + ';$RX("');
|
---|
3333 | var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
|
---|
3334 | var clientRenderScript1A = stringToPrecomputedChunk('"');
|
---|
3335 | var clientRenderScript2 = stringToPrecomputedChunk(')</script>');
|
---|
3336 | var clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
|
---|
3337 | function writeClientRenderBoundaryInstruction(destination, responseState, boundaryID, errorDigest, errorMessage, errorComponentStack) {
|
---|
3338 | writeChunk(destination, responseState.startInlineScript);
|
---|
3339 |
|
---|
3340 | if (!responseState.sentClientRenderFunction) {
|
---|
3341 | // The first time we write this, we'll need to include the full implementation.
|
---|
3342 | responseState.sentClientRenderFunction = true;
|
---|
3343 | writeChunk(destination, clientRenderScript1Full);
|
---|
3344 | } else {
|
---|
3345 | // Future calls can just reuse the same function.
|
---|
3346 | writeChunk(destination, clientRenderScript1Partial);
|
---|
3347 | }
|
---|
3348 |
|
---|
3349 | if (boundaryID === null) {
|
---|
3350 | throw new Error('An ID must have been assigned before we can complete the boundary.');
|
---|
3351 | }
|
---|
3352 |
|
---|
3353 | writeChunk(destination, boundaryID);
|
---|
3354 | writeChunk(destination, clientRenderScript1A);
|
---|
3355 |
|
---|
3356 | if (errorDigest || errorMessage || errorComponentStack) {
|
---|
3357 | writeChunk(destination, clientRenderErrorScriptArgInterstitial);
|
---|
3358 | writeChunk(destination, stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')));
|
---|
3359 | }
|
---|
3360 |
|
---|
3361 | if (errorMessage || errorComponentStack) {
|
---|
3362 | writeChunk(destination, clientRenderErrorScriptArgInterstitial);
|
---|
3363 | writeChunk(destination, stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')));
|
---|
3364 | }
|
---|
3365 |
|
---|
3366 | if (errorComponentStack) {
|
---|
3367 | writeChunk(destination, clientRenderErrorScriptArgInterstitial);
|
---|
3368 | writeChunk(destination, stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)));
|
---|
3369 | }
|
---|
3370 |
|
---|
3371 | return writeChunkAndReturn(destination, clientRenderScript2);
|
---|
3372 | }
|
---|
3373 | var regexForJSStringsInScripts = /[<\u2028\u2029]/g;
|
---|
3374 |
|
---|
3375 | function escapeJSStringsForInstructionScripts(input) {
|
---|
3376 | var escaped = JSON.stringify(input);
|
---|
3377 | return escaped.replace(regexForJSStringsInScripts, function (match) {
|
---|
3378 | switch (match) {
|
---|
3379 | // santizing breaking out of strings and script tags
|
---|
3380 | case '<':
|
---|
3381 | return "\\u003c";
|
---|
3382 |
|
---|
3383 | case "\u2028":
|
---|
3384 | return "\\u2028";
|
---|
3385 |
|
---|
3386 | case "\u2029":
|
---|
3387 | return "\\u2029";
|
---|
3388 |
|
---|
3389 | default:
|
---|
3390 | {
|
---|
3391 | // eslint-disable-next-line react-internal/prod-error-codes
|
---|
3392 | throw new Error('escapeJSStringsForInstructionScripts encountered a match it does not know how to replace. this means the match regex and the replacement characters are no longer in sync. This is a bug in React');
|
---|
3393 | }
|
---|
3394 | }
|
---|
3395 | });
|
---|
3396 | }
|
---|
3397 |
|
---|
3398 | var assign = Object.assign;
|
---|
3399 |
|
---|
3400 | // ATTENTION
|
---|
3401 | // When adding new symbols to this file,
|
---|
3402 | // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
|
---|
3403 | // The Symbol used to tag the ReactElement-like types.
|
---|
3404 | var REACT_ELEMENT_TYPE = Symbol.for('react.element');
|
---|
3405 | var REACT_PORTAL_TYPE = Symbol.for('react.portal');
|
---|
3406 | var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
|
---|
3407 | var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
|
---|
3408 | var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
|
---|
3409 | var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
|
---|
3410 | var REACT_CONTEXT_TYPE = Symbol.for('react.context');
|
---|
3411 | var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
|
---|
3412 | var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
|
---|
3413 | var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
|
---|
3414 | var REACT_MEMO_TYPE = Symbol.for('react.memo');
|
---|
3415 | var REACT_LAZY_TYPE = Symbol.for('react.lazy');
|
---|
3416 | var REACT_SCOPE_TYPE = Symbol.for('react.scope');
|
---|
3417 | var REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for('react.debug_trace_mode');
|
---|
3418 | var REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
|
---|
3419 | var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
|
---|
3420 | var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
|
---|
3421 | var FAUX_ITERATOR_SYMBOL = '@@iterator';
|
---|
3422 | function getIteratorFn(maybeIterable) {
|
---|
3423 | if (maybeIterable === null || typeof maybeIterable !== 'object') {
|
---|
3424 | return null;
|
---|
3425 | }
|
---|
3426 |
|
---|
3427 | var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
|
---|
3428 |
|
---|
3429 | if (typeof maybeIterator === 'function') {
|
---|
3430 | return maybeIterator;
|
---|
3431 | }
|
---|
3432 |
|
---|
3433 | return null;
|
---|
3434 | }
|
---|
3435 |
|
---|
3436 | function getWrappedName(outerType, innerType, wrapperName) {
|
---|
3437 | var displayName = outerType.displayName;
|
---|
3438 |
|
---|
3439 | if (displayName) {
|
---|
3440 | return displayName;
|
---|
3441 | }
|
---|
3442 |
|
---|
3443 | var functionName = innerType.displayName || innerType.name || '';
|
---|
3444 | return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
|
---|
3445 | } // Keep in sync with react-reconciler/getComponentNameFromFiber
|
---|
3446 |
|
---|
3447 |
|
---|
3448 | function getContextName(type) {
|
---|
3449 | return type.displayName || 'Context';
|
---|
3450 | } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
|
---|
3451 |
|
---|
3452 |
|
---|
3453 | function getComponentNameFromType(type) {
|
---|
3454 | if (type == null) {
|
---|
3455 | // Host root, text node or just invalid type.
|
---|
3456 | return null;
|
---|
3457 | }
|
---|
3458 |
|
---|
3459 | {
|
---|
3460 | if (typeof type.tag === 'number') {
|
---|
3461 | error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
|
---|
3462 | }
|
---|
3463 | }
|
---|
3464 |
|
---|
3465 | if (typeof type === 'function') {
|
---|
3466 | return type.displayName || type.name || null;
|
---|
3467 | }
|
---|
3468 |
|
---|
3469 | if (typeof type === 'string') {
|
---|
3470 | return type;
|
---|
3471 | }
|
---|
3472 |
|
---|
3473 | switch (type) {
|
---|
3474 | case REACT_FRAGMENT_TYPE:
|
---|
3475 | return 'Fragment';
|
---|
3476 |
|
---|
3477 | case REACT_PORTAL_TYPE:
|
---|
3478 | return 'Portal';
|
---|
3479 |
|
---|
3480 | case REACT_PROFILER_TYPE:
|
---|
3481 | return 'Profiler';
|
---|
3482 |
|
---|
3483 | case REACT_STRICT_MODE_TYPE:
|
---|
3484 | return 'StrictMode';
|
---|
3485 |
|
---|
3486 | case REACT_SUSPENSE_TYPE:
|
---|
3487 | return 'Suspense';
|
---|
3488 |
|
---|
3489 | case REACT_SUSPENSE_LIST_TYPE:
|
---|
3490 | return 'SuspenseList';
|
---|
3491 |
|
---|
3492 | }
|
---|
3493 |
|
---|
3494 | if (typeof type === 'object') {
|
---|
3495 | switch (type.$$typeof) {
|
---|
3496 | case REACT_CONTEXT_TYPE:
|
---|
3497 | var context = type;
|
---|
3498 | return getContextName(context) + '.Consumer';
|
---|
3499 |
|
---|
3500 | case REACT_PROVIDER_TYPE:
|
---|
3501 | var provider = type;
|
---|
3502 | return getContextName(provider._context) + '.Provider';
|
---|
3503 |
|
---|
3504 | case REACT_FORWARD_REF_TYPE:
|
---|
3505 | return getWrappedName(type, type.render, 'ForwardRef');
|
---|
3506 |
|
---|
3507 | case REACT_MEMO_TYPE:
|
---|
3508 | var outerName = type.displayName || null;
|
---|
3509 |
|
---|
3510 | if (outerName !== null) {
|
---|
3511 | return outerName;
|
---|
3512 | }
|
---|
3513 |
|
---|
3514 | return getComponentNameFromType(type.type) || 'Memo';
|
---|
3515 |
|
---|
3516 | case REACT_LAZY_TYPE:
|
---|
3517 | {
|
---|
3518 | var lazyComponent = type;
|
---|
3519 | var payload = lazyComponent._payload;
|
---|
3520 | var init = lazyComponent._init;
|
---|
3521 |
|
---|
3522 | try {
|
---|
3523 | return getComponentNameFromType(init(payload));
|
---|
3524 | } catch (x) {
|
---|
3525 | return null;
|
---|
3526 | }
|
---|
3527 | }
|
---|
3528 |
|
---|
3529 | // eslint-disable-next-line no-fallthrough
|
---|
3530 | }
|
---|
3531 | }
|
---|
3532 |
|
---|
3533 | return null;
|
---|
3534 | }
|
---|
3535 |
|
---|
3536 | // Helpers to patch console.logs to avoid logging during side-effect free
|
---|
3537 | // replaying on render function. This currently only patches the object
|
---|
3538 | // lazily which won't cover if the log function was extracted eagerly.
|
---|
3539 | // We could also eagerly patch the method.
|
---|
3540 | var disabledDepth = 0;
|
---|
3541 | var prevLog;
|
---|
3542 | var prevInfo;
|
---|
3543 | var prevWarn;
|
---|
3544 | var prevError;
|
---|
3545 | var prevGroup;
|
---|
3546 | var prevGroupCollapsed;
|
---|
3547 | var prevGroupEnd;
|
---|
3548 |
|
---|
3549 | function disabledLog() {}
|
---|
3550 |
|
---|
3551 | disabledLog.__reactDisabledLog = true;
|
---|
3552 | function disableLogs() {
|
---|
3553 | {
|
---|
3554 | if (disabledDepth === 0) {
|
---|
3555 | /* eslint-disable react-internal/no-production-logging */
|
---|
3556 | prevLog = console.log;
|
---|
3557 | prevInfo = console.info;
|
---|
3558 | prevWarn = console.warn;
|
---|
3559 | prevError = console.error;
|
---|
3560 | prevGroup = console.group;
|
---|
3561 | prevGroupCollapsed = console.groupCollapsed;
|
---|
3562 | prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
|
---|
3563 |
|
---|
3564 | var props = {
|
---|
3565 | configurable: true,
|
---|
3566 | enumerable: true,
|
---|
3567 | value: disabledLog,
|
---|
3568 | writable: true
|
---|
3569 | }; // $FlowFixMe Flow thinks console is immutable.
|
---|
3570 |
|
---|
3571 | Object.defineProperties(console, {
|
---|
3572 | info: props,
|
---|
3573 | log: props,
|
---|
3574 | warn: props,
|
---|
3575 | error: props,
|
---|
3576 | group: props,
|
---|
3577 | groupCollapsed: props,
|
---|
3578 | groupEnd: props
|
---|
3579 | });
|
---|
3580 | /* eslint-enable react-internal/no-production-logging */
|
---|
3581 | }
|
---|
3582 |
|
---|
3583 | disabledDepth++;
|
---|
3584 | }
|
---|
3585 | }
|
---|
3586 | function reenableLogs() {
|
---|
3587 | {
|
---|
3588 | disabledDepth--;
|
---|
3589 |
|
---|
3590 | if (disabledDepth === 0) {
|
---|
3591 | /* eslint-disable react-internal/no-production-logging */
|
---|
3592 | var props = {
|
---|
3593 | configurable: true,
|
---|
3594 | enumerable: true,
|
---|
3595 | writable: true
|
---|
3596 | }; // $FlowFixMe Flow thinks console is immutable.
|
---|
3597 |
|
---|
3598 | Object.defineProperties(console, {
|
---|
3599 | log: assign({}, props, {
|
---|
3600 | value: prevLog
|
---|
3601 | }),
|
---|
3602 | info: assign({}, props, {
|
---|
3603 | value: prevInfo
|
---|
3604 | }),
|
---|
3605 | warn: assign({}, props, {
|
---|
3606 | value: prevWarn
|
---|
3607 | }),
|
---|
3608 | error: assign({}, props, {
|
---|
3609 | value: prevError
|
---|
3610 | }),
|
---|
3611 | group: assign({}, props, {
|
---|
3612 | value: prevGroup
|
---|
3613 | }),
|
---|
3614 | groupCollapsed: assign({}, props, {
|
---|
3615 | value: prevGroupCollapsed
|
---|
3616 | }),
|
---|
3617 | groupEnd: assign({}, props, {
|
---|
3618 | value: prevGroupEnd
|
---|
3619 | })
|
---|
3620 | });
|
---|
3621 | /* eslint-enable react-internal/no-production-logging */
|
---|
3622 | }
|
---|
3623 |
|
---|
3624 | if (disabledDepth < 0) {
|
---|
3625 | error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
|
---|
3626 | }
|
---|
3627 | }
|
---|
3628 | }
|
---|
3629 |
|
---|
3630 | var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
|
---|
3631 | var prefix;
|
---|
3632 | function describeBuiltInComponentFrame(name, source, ownerFn) {
|
---|
3633 | {
|
---|
3634 | if (prefix === undefined) {
|
---|
3635 | // Extract the VM specific prefix used by each line.
|
---|
3636 | try {
|
---|
3637 | throw Error();
|
---|
3638 | } catch (x) {
|
---|
3639 | var match = x.stack.trim().match(/\n( *(at )?)/);
|
---|
3640 | prefix = match && match[1] || '';
|
---|
3641 | }
|
---|
3642 | } // We use the prefix to ensure our stacks line up with native stack frames.
|
---|
3643 |
|
---|
3644 |
|
---|
3645 | return '\n' + prefix + name;
|
---|
3646 | }
|
---|
3647 | }
|
---|
3648 | var reentry = false;
|
---|
3649 | var componentFrameCache;
|
---|
3650 |
|
---|
3651 | {
|
---|
3652 | var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
|
---|
3653 | componentFrameCache = new PossiblyWeakMap();
|
---|
3654 | }
|
---|
3655 |
|
---|
3656 | function describeNativeComponentFrame(fn, construct) {
|
---|
3657 | // If something asked for a stack inside a fake render, it should get ignored.
|
---|
3658 | if ( !fn || reentry) {
|
---|
3659 | return '';
|
---|
3660 | }
|
---|
3661 |
|
---|
3662 | {
|
---|
3663 | var frame = componentFrameCache.get(fn);
|
---|
3664 |
|
---|
3665 | if (frame !== undefined) {
|
---|
3666 | return frame;
|
---|
3667 | }
|
---|
3668 | }
|
---|
3669 |
|
---|
3670 | var control;
|
---|
3671 | reentry = true;
|
---|
3672 | var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
|
---|
3673 |
|
---|
3674 | Error.prepareStackTrace = undefined;
|
---|
3675 | var previousDispatcher;
|
---|
3676 |
|
---|
3677 | {
|
---|
3678 | previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
|
---|
3679 | // for warnings.
|
---|
3680 |
|
---|
3681 | ReactCurrentDispatcher.current = null;
|
---|
3682 | disableLogs();
|
---|
3683 | }
|
---|
3684 |
|
---|
3685 | try {
|
---|
3686 | // This should throw.
|
---|
3687 | if (construct) {
|
---|
3688 | // Something should be setting the props in the constructor.
|
---|
3689 | var Fake = function () {
|
---|
3690 | throw Error();
|
---|
3691 | }; // $FlowFixMe
|
---|
3692 |
|
---|
3693 |
|
---|
3694 | Object.defineProperty(Fake.prototype, 'props', {
|
---|
3695 | set: function () {
|
---|
3696 | // We use a throwing setter instead of frozen or non-writable props
|
---|
3697 | // because that won't throw in a non-strict mode function.
|
---|
3698 | throw Error();
|
---|
3699 | }
|
---|
3700 | });
|
---|
3701 |
|
---|
3702 | if (typeof Reflect === 'object' && Reflect.construct) {
|
---|
3703 | // We construct a different control for this case to include any extra
|
---|
3704 | // frames added by the construct call.
|
---|
3705 | try {
|
---|
3706 | Reflect.construct(Fake, []);
|
---|
3707 | } catch (x) {
|
---|
3708 | control = x;
|
---|
3709 | }
|
---|
3710 |
|
---|
3711 | Reflect.construct(fn, [], Fake);
|
---|
3712 | } else {
|
---|
3713 | try {
|
---|
3714 | Fake.call();
|
---|
3715 | } catch (x) {
|
---|
3716 | control = x;
|
---|
3717 | }
|
---|
3718 |
|
---|
3719 | fn.call(Fake.prototype);
|
---|
3720 | }
|
---|
3721 | } else {
|
---|
3722 | try {
|
---|
3723 | throw Error();
|
---|
3724 | } catch (x) {
|
---|
3725 | control = x;
|
---|
3726 | }
|
---|
3727 |
|
---|
3728 | fn();
|
---|
3729 | }
|
---|
3730 | } catch (sample) {
|
---|
3731 | // This is inlined manually because closure doesn't do it for us.
|
---|
3732 | if (sample && control && typeof sample.stack === 'string') {
|
---|
3733 | // This extracts the first frame from the sample that isn't also in the control.
|
---|
3734 | // Skipping one frame that we assume is the frame that calls the two.
|
---|
3735 | var sampleLines = sample.stack.split('\n');
|
---|
3736 | var controlLines = control.stack.split('\n');
|
---|
3737 | var s = sampleLines.length - 1;
|
---|
3738 | var c = controlLines.length - 1;
|
---|
3739 |
|
---|
3740 | while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
|
---|
3741 | // We expect at least one stack frame to be shared.
|
---|
3742 | // Typically this will be the root most one. However, stack frames may be
|
---|
3743 | // cut off due to maximum stack limits. In this case, one maybe cut off
|
---|
3744 | // earlier than the other. We assume that the sample is longer or the same
|
---|
3745 | // and there for cut off earlier. So we should find the root most frame in
|
---|
3746 | // the sample somewhere in the control.
|
---|
3747 | c--;
|
---|
3748 | }
|
---|
3749 |
|
---|
3750 | for (; s >= 1 && c >= 0; s--, c--) {
|
---|
3751 | // Next we find the first one that isn't the same which should be the
|
---|
3752 | // frame that called our sample function and the control.
|
---|
3753 | if (sampleLines[s] !== controlLines[c]) {
|
---|
3754 | // In V8, the first line is describing the message but other VMs don't.
|
---|
3755 | // If we're about to return the first line, and the control is also on the same
|
---|
3756 | // line, that's a pretty good indicator that our sample threw at same line as
|
---|
3757 | // the control. I.e. before we entered the sample frame. So we ignore this result.
|
---|
3758 | // This can happen if you passed a class to function component, or non-function.
|
---|
3759 | if (s !== 1 || c !== 1) {
|
---|
3760 | do {
|
---|
3761 | s--;
|
---|
3762 | c--; // We may still have similar intermediate frames from the construct call.
|
---|
3763 | // The next one that isn't the same should be our match though.
|
---|
3764 |
|
---|
3765 | if (c < 0 || sampleLines[s] !== controlLines[c]) {
|
---|
3766 | // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
|
---|
3767 | var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
|
---|
3768 | // but we have a user-provided "displayName"
|
---|
3769 | // splice it in to make the stack more readable.
|
---|
3770 |
|
---|
3771 |
|
---|
3772 | if (fn.displayName && _frame.includes('<anonymous>')) {
|
---|
3773 | _frame = _frame.replace('<anonymous>', fn.displayName);
|
---|
3774 | }
|
---|
3775 |
|
---|
3776 | {
|
---|
3777 | if (typeof fn === 'function') {
|
---|
3778 | componentFrameCache.set(fn, _frame);
|
---|
3779 | }
|
---|
3780 | } // Return the line we found.
|
---|
3781 |
|
---|
3782 |
|
---|
3783 | return _frame;
|
---|
3784 | }
|
---|
3785 | } while (s >= 1 && c >= 0);
|
---|
3786 | }
|
---|
3787 |
|
---|
3788 | break;
|
---|
3789 | }
|
---|
3790 | }
|
---|
3791 | }
|
---|
3792 | } finally {
|
---|
3793 | reentry = false;
|
---|
3794 |
|
---|
3795 | {
|
---|
3796 | ReactCurrentDispatcher.current = previousDispatcher;
|
---|
3797 | reenableLogs();
|
---|
3798 | }
|
---|
3799 |
|
---|
3800 | Error.prepareStackTrace = previousPrepareStackTrace;
|
---|
3801 | } // Fallback to just using the name if we couldn't make it throw.
|
---|
3802 |
|
---|
3803 |
|
---|
3804 | var name = fn ? fn.displayName || fn.name : '';
|
---|
3805 | var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
|
---|
3806 |
|
---|
3807 | {
|
---|
3808 | if (typeof fn === 'function') {
|
---|
3809 | componentFrameCache.set(fn, syntheticFrame);
|
---|
3810 | }
|
---|
3811 | }
|
---|
3812 |
|
---|
3813 | return syntheticFrame;
|
---|
3814 | }
|
---|
3815 |
|
---|
3816 | function describeClassComponentFrame(ctor, source, ownerFn) {
|
---|
3817 | {
|
---|
3818 | return describeNativeComponentFrame(ctor, true);
|
---|
3819 | }
|
---|
3820 | }
|
---|
3821 | function describeFunctionComponentFrame(fn, source, ownerFn) {
|
---|
3822 | {
|
---|
3823 | return describeNativeComponentFrame(fn, false);
|
---|
3824 | }
|
---|
3825 | }
|
---|
3826 |
|
---|
3827 | function shouldConstruct(Component) {
|
---|
3828 | var prototype = Component.prototype;
|
---|
3829 | return !!(prototype && prototype.isReactComponent);
|
---|
3830 | }
|
---|
3831 |
|
---|
3832 | function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
|
---|
3833 |
|
---|
3834 | if (type == null) {
|
---|
3835 | return '';
|
---|
3836 | }
|
---|
3837 |
|
---|
3838 | if (typeof type === 'function') {
|
---|
3839 | {
|
---|
3840 | return describeNativeComponentFrame(type, shouldConstruct(type));
|
---|
3841 | }
|
---|
3842 | }
|
---|
3843 |
|
---|
3844 | if (typeof type === 'string') {
|
---|
3845 | return describeBuiltInComponentFrame(type);
|
---|
3846 | }
|
---|
3847 |
|
---|
3848 | switch (type) {
|
---|
3849 | case REACT_SUSPENSE_TYPE:
|
---|
3850 | return describeBuiltInComponentFrame('Suspense');
|
---|
3851 |
|
---|
3852 | case REACT_SUSPENSE_LIST_TYPE:
|
---|
3853 | return describeBuiltInComponentFrame('SuspenseList');
|
---|
3854 | }
|
---|
3855 |
|
---|
3856 | if (typeof type === 'object') {
|
---|
3857 | switch (type.$$typeof) {
|
---|
3858 | case REACT_FORWARD_REF_TYPE:
|
---|
3859 | return describeFunctionComponentFrame(type.render);
|
---|
3860 |
|
---|
3861 | case REACT_MEMO_TYPE:
|
---|
3862 | // Memo may contain any component type so we recursively resolve it.
|
---|
3863 | return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
|
---|
3864 |
|
---|
3865 | case REACT_LAZY_TYPE:
|
---|
3866 | {
|
---|
3867 | var lazyComponent = type;
|
---|
3868 | var payload = lazyComponent._payload;
|
---|
3869 | var init = lazyComponent._init;
|
---|
3870 |
|
---|
3871 | try {
|
---|
3872 | // Lazy may contain any component type so we recursively resolve it.
|
---|
3873 | return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
|
---|
3874 | } catch (x) {}
|
---|
3875 | }
|
---|
3876 | }
|
---|
3877 | }
|
---|
3878 |
|
---|
3879 | return '';
|
---|
3880 | }
|
---|
3881 |
|
---|
3882 | var loggedTypeFailures = {};
|
---|
3883 | var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
|
---|
3884 |
|
---|
3885 | function setCurrentlyValidatingElement(element) {
|
---|
3886 | {
|
---|
3887 | if (element) {
|
---|
3888 | var owner = element._owner;
|
---|
3889 | var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
|
---|
3890 | ReactDebugCurrentFrame.setExtraStackFrame(stack);
|
---|
3891 | } else {
|
---|
3892 | ReactDebugCurrentFrame.setExtraStackFrame(null);
|
---|
3893 | }
|
---|
3894 | }
|
---|
3895 | }
|
---|
3896 |
|
---|
3897 | function checkPropTypes(typeSpecs, values, location, componentName, element) {
|
---|
3898 | {
|
---|
3899 | // $FlowFixMe This is okay but Flow doesn't know it.
|
---|
3900 | var has = Function.call.bind(hasOwnProperty);
|
---|
3901 |
|
---|
3902 | for (var typeSpecName in typeSpecs) {
|
---|
3903 | if (has(typeSpecs, typeSpecName)) {
|
---|
3904 | var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
|
---|
3905 | // fail the render phase where it didn't fail before. So we log it.
|
---|
3906 | // After these have been cleaned up, we'll let them throw.
|
---|
3907 |
|
---|
3908 | try {
|
---|
3909 | // This is intentionally an invariant that gets caught. It's the same
|
---|
3910 | // behavior as without this statement except with a better message.
|
---|
3911 | if (typeof typeSpecs[typeSpecName] !== 'function') {
|
---|
3912 | // eslint-disable-next-line react-internal/prod-error-codes
|
---|
3913 | var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
|
---|
3914 | err.name = 'Invariant Violation';
|
---|
3915 | throw err;
|
---|
3916 | }
|
---|
3917 |
|
---|
3918 | error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
|
---|
3919 | } catch (ex) {
|
---|
3920 | error$1 = ex;
|
---|
3921 | }
|
---|
3922 |
|
---|
3923 | if (error$1 && !(error$1 instanceof Error)) {
|
---|
3924 | setCurrentlyValidatingElement(element);
|
---|
3925 |
|
---|
3926 | error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
|
---|
3927 |
|
---|
3928 | setCurrentlyValidatingElement(null);
|
---|
3929 | }
|
---|
3930 |
|
---|
3931 | if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
|
---|
3932 | // Only monitor this failure once because there tends to be a lot of the
|
---|
3933 | // same error.
|
---|
3934 | loggedTypeFailures[error$1.message] = true;
|
---|
3935 | setCurrentlyValidatingElement(element);
|
---|
3936 |
|
---|
3937 | error('Failed %s type: %s', location, error$1.message);
|
---|
3938 |
|
---|
3939 | setCurrentlyValidatingElement(null);
|
---|
3940 | }
|
---|
3941 | }
|
---|
3942 | }
|
---|
3943 | }
|
---|
3944 | }
|
---|
3945 |
|
---|
3946 | var warnedAboutMissingGetChildContext;
|
---|
3947 |
|
---|
3948 | {
|
---|
3949 | warnedAboutMissingGetChildContext = {};
|
---|
3950 | }
|
---|
3951 |
|
---|
3952 | var emptyContextObject = {};
|
---|
3953 |
|
---|
3954 | {
|
---|
3955 | Object.freeze(emptyContextObject);
|
---|
3956 | }
|
---|
3957 |
|
---|
3958 | function getMaskedContext(type, unmaskedContext) {
|
---|
3959 | {
|
---|
3960 | var contextTypes = type.contextTypes;
|
---|
3961 |
|
---|
3962 | if (!contextTypes) {
|
---|
3963 | return emptyContextObject;
|
---|
3964 | }
|
---|
3965 |
|
---|
3966 | var context = {};
|
---|
3967 |
|
---|
3968 | for (var key in contextTypes) {
|
---|
3969 | context[key] = unmaskedContext[key];
|
---|
3970 | }
|
---|
3971 |
|
---|
3972 | {
|
---|
3973 | var name = getComponentNameFromType(type) || 'Unknown';
|
---|
3974 | checkPropTypes(contextTypes, context, 'context', name);
|
---|
3975 | }
|
---|
3976 |
|
---|
3977 | return context;
|
---|
3978 | }
|
---|
3979 | }
|
---|
3980 | function processChildContext(instance, type, parentContext, childContextTypes) {
|
---|
3981 | {
|
---|
3982 | // TODO (bvaughn) Replace this behavior with an invariant() in the future.
|
---|
3983 | // It has only been added in Fiber to match the (unintentional) behavior in Stack.
|
---|
3984 | if (typeof instance.getChildContext !== 'function') {
|
---|
3985 | {
|
---|
3986 | var componentName = getComponentNameFromType(type) || 'Unknown';
|
---|
3987 |
|
---|
3988 | if (!warnedAboutMissingGetChildContext[componentName]) {
|
---|
3989 | warnedAboutMissingGetChildContext[componentName] = true;
|
---|
3990 |
|
---|
3991 | error('%s.childContextTypes is specified but there is no getChildContext() method ' + 'on the instance. You can either define getChildContext() on %s or remove ' + 'childContextTypes from it.', componentName, componentName);
|
---|
3992 | }
|
---|
3993 | }
|
---|
3994 |
|
---|
3995 | return parentContext;
|
---|
3996 | }
|
---|
3997 |
|
---|
3998 | var childContext = instance.getChildContext();
|
---|
3999 |
|
---|
4000 | for (var contextKey in childContext) {
|
---|
4001 | if (!(contextKey in childContextTypes)) {
|
---|
4002 | throw new Error((getComponentNameFromType(type) || 'Unknown') + ".getChildContext(): key \"" + contextKey + "\" is not defined in childContextTypes.");
|
---|
4003 | }
|
---|
4004 | }
|
---|
4005 |
|
---|
4006 | {
|
---|
4007 | var name = getComponentNameFromType(type) || 'Unknown';
|
---|
4008 | checkPropTypes(childContextTypes, childContext, 'child context', name);
|
---|
4009 | }
|
---|
4010 |
|
---|
4011 | return assign({}, parentContext, childContext);
|
---|
4012 | }
|
---|
4013 | }
|
---|
4014 |
|
---|
4015 | var rendererSigil;
|
---|
4016 |
|
---|
4017 | {
|
---|
4018 | // Use this to detect multiple renderers using the same context
|
---|
4019 | rendererSigil = {};
|
---|
4020 | } // Used to store the parent path of all context overrides in a shared linked list.
|
---|
4021 | // Forming a reverse tree.
|
---|
4022 |
|
---|
4023 |
|
---|
4024 | var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
|
---|
4025 | // This global (actually thread local) state represents what state all those "current",
|
---|
4026 | // fields are currently in.
|
---|
4027 |
|
---|
4028 | var currentActiveSnapshot = null;
|
---|
4029 |
|
---|
4030 | function popNode(prev) {
|
---|
4031 | {
|
---|
4032 | prev.context._currentValue = prev.parentValue;
|
---|
4033 | }
|
---|
4034 | }
|
---|
4035 |
|
---|
4036 | function pushNode(next) {
|
---|
4037 | {
|
---|
4038 | next.context._currentValue = next.value;
|
---|
4039 | }
|
---|
4040 | }
|
---|
4041 |
|
---|
4042 | function popToNearestCommonAncestor(prev, next) {
|
---|
4043 | if (prev === next) ; else {
|
---|
4044 | popNode(prev);
|
---|
4045 | var parentPrev = prev.parent;
|
---|
4046 | var parentNext = next.parent;
|
---|
4047 |
|
---|
4048 | if (parentPrev === null) {
|
---|
4049 | if (parentNext !== null) {
|
---|
4050 | throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
|
---|
4051 | }
|
---|
4052 | } else {
|
---|
4053 | if (parentNext === null) {
|
---|
4054 | throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
|
---|
4055 | }
|
---|
4056 |
|
---|
4057 | popToNearestCommonAncestor(parentPrev, parentNext);
|
---|
4058 | } // On the way back, we push the new ones that weren't common.
|
---|
4059 |
|
---|
4060 |
|
---|
4061 | pushNode(next);
|
---|
4062 | }
|
---|
4063 | }
|
---|
4064 |
|
---|
4065 | function popAllPrevious(prev) {
|
---|
4066 | popNode(prev);
|
---|
4067 | var parentPrev = prev.parent;
|
---|
4068 |
|
---|
4069 | if (parentPrev !== null) {
|
---|
4070 | popAllPrevious(parentPrev);
|
---|
4071 | }
|
---|
4072 | }
|
---|
4073 |
|
---|
4074 | function pushAllNext(next) {
|
---|
4075 | var parentNext = next.parent;
|
---|
4076 |
|
---|
4077 | if (parentNext !== null) {
|
---|
4078 | pushAllNext(parentNext);
|
---|
4079 | }
|
---|
4080 |
|
---|
4081 | pushNode(next);
|
---|
4082 | }
|
---|
4083 |
|
---|
4084 | function popPreviousToCommonLevel(prev, next) {
|
---|
4085 | popNode(prev);
|
---|
4086 | var parentPrev = prev.parent;
|
---|
4087 |
|
---|
4088 | if (parentPrev === null) {
|
---|
4089 | throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
|
---|
4090 | }
|
---|
4091 |
|
---|
4092 | if (parentPrev.depth === next.depth) {
|
---|
4093 | // We found the same level. Now we just need to find a shared ancestor.
|
---|
4094 | popToNearestCommonAncestor(parentPrev, next);
|
---|
4095 | } else {
|
---|
4096 | // We must still be deeper.
|
---|
4097 | popPreviousToCommonLevel(parentPrev, next);
|
---|
4098 | }
|
---|
4099 | }
|
---|
4100 |
|
---|
4101 | function popNextToCommonLevel(prev, next) {
|
---|
4102 | var parentNext = next.parent;
|
---|
4103 |
|
---|
4104 | if (parentNext === null) {
|
---|
4105 | throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
|
---|
4106 | }
|
---|
4107 |
|
---|
4108 | if (prev.depth === parentNext.depth) {
|
---|
4109 | // We found the same level. Now we just need to find a shared ancestor.
|
---|
4110 | popToNearestCommonAncestor(prev, parentNext);
|
---|
4111 | } else {
|
---|
4112 | // We must still be deeper.
|
---|
4113 | popNextToCommonLevel(prev, parentNext);
|
---|
4114 | }
|
---|
4115 |
|
---|
4116 | pushNode(next);
|
---|
4117 | } // Perform context switching to the new snapshot.
|
---|
4118 | // To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
|
---|
4119 | // updating all the context's current values. That way reads, always just read the current value.
|
---|
4120 | // At the cost of updating contexts even if they're never read by this subtree.
|
---|
4121 |
|
---|
4122 |
|
---|
4123 | function switchContext(newSnapshot) {
|
---|
4124 | // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
|
---|
4125 | // We also need to update any new contexts that are now on the stack with the deepest value.
|
---|
4126 | // The easiest way to update new contexts is to just reapply them in reverse order from the
|
---|
4127 | // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
|
---|
4128 | // for that. Therefore this algorithm is recursive.
|
---|
4129 | // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
|
---|
4130 | // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
|
---|
4131 | // 3) Then we reapply new contexts on the way back up the stack.
|
---|
4132 | var prev = currentActiveSnapshot;
|
---|
4133 | var next = newSnapshot;
|
---|
4134 |
|
---|
4135 | if (prev !== next) {
|
---|
4136 | if (prev === null) {
|
---|
4137 | // $FlowFixMe: This has to be non-null since it's not equal to prev.
|
---|
4138 | pushAllNext(next);
|
---|
4139 | } else if (next === null) {
|
---|
4140 | popAllPrevious(prev);
|
---|
4141 | } else if (prev.depth === next.depth) {
|
---|
4142 | popToNearestCommonAncestor(prev, next);
|
---|
4143 | } else if (prev.depth > next.depth) {
|
---|
4144 | popPreviousToCommonLevel(prev, next);
|
---|
4145 | } else {
|
---|
4146 | popNextToCommonLevel(prev, next);
|
---|
4147 | }
|
---|
4148 |
|
---|
4149 | currentActiveSnapshot = next;
|
---|
4150 | }
|
---|
4151 | }
|
---|
4152 | function pushProvider(context, nextValue) {
|
---|
4153 | var prevValue;
|
---|
4154 |
|
---|
4155 | {
|
---|
4156 | prevValue = context._currentValue;
|
---|
4157 | context._currentValue = nextValue;
|
---|
4158 |
|
---|
4159 | {
|
---|
4160 | if (context._currentRenderer !== undefined && context._currentRenderer !== null && context._currentRenderer !== rendererSigil) {
|
---|
4161 | error('Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.');
|
---|
4162 | }
|
---|
4163 |
|
---|
4164 | context._currentRenderer = rendererSigil;
|
---|
4165 | }
|
---|
4166 | }
|
---|
4167 |
|
---|
4168 | var prevNode = currentActiveSnapshot;
|
---|
4169 | var newNode = {
|
---|
4170 | parent: prevNode,
|
---|
4171 | depth: prevNode === null ? 0 : prevNode.depth + 1,
|
---|
4172 | context: context,
|
---|
4173 | parentValue: prevValue,
|
---|
4174 | value: nextValue
|
---|
4175 | };
|
---|
4176 | currentActiveSnapshot = newNode;
|
---|
4177 | return newNode;
|
---|
4178 | }
|
---|
4179 | function popProvider(context) {
|
---|
4180 | var prevSnapshot = currentActiveSnapshot;
|
---|
4181 |
|
---|
4182 | if (prevSnapshot === null) {
|
---|
4183 | throw new Error('Tried to pop a Context at the root of the app. This is a bug in React.');
|
---|
4184 | }
|
---|
4185 |
|
---|
4186 | {
|
---|
4187 | if (prevSnapshot.context !== context) {
|
---|
4188 | error('The parent context is not the expected context. This is probably a bug in React.');
|
---|
4189 | }
|
---|
4190 | }
|
---|
4191 |
|
---|
4192 | {
|
---|
4193 | var value = prevSnapshot.parentValue;
|
---|
4194 |
|
---|
4195 | if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
|
---|
4196 | prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
|
---|
4197 | } else {
|
---|
4198 | prevSnapshot.context._currentValue = value;
|
---|
4199 | }
|
---|
4200 |
|
---|
4201 | {
|
---|
4202 | if (context._currentRenderer !== undefined && context._currentRenderer !== null && context._currentRenderer !== rendererSigil) {
|
---|
4203 | error('Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.');
|
---|
4204 | }
|
---|
4205 |
|
---|
4206 | context._currentRenderer = rendererSigil;
|
---|
4207 | }
|
---|
4208 | }
|
---|
4209 |
|
---|
4210 | return currentActiveSnapshot = prevSnapshot.parent;
|
---|
4211 | }
|
---|
4212 | function getActiveContext() {
|
---|
4213 | return currentActiveSnapshot;
|
---|
4214 | }
|
---|
4215 | function readContext(context) {
|
---|
4216 | var value = context._currentValue ;
|
---|
4217 | return value;
|
---|
4218 | }
|
---|
4219 |
|
---|
4220 | /**
|
---|
4221 | * `ReactInstanceMap` maintains a mapping from a public facing stateful
|
---|
4222 | * instance (key) and the internal representation (value). This allows public
|
---|
4223 | * methods to accept the user facing instance as an argument and map them back
|
---|
4224 | * to internal methods.
|
---|
4225 | *
|
---|
4226 | * Note that this module is currently shared and assumed to be stateless.
|
---|
4227 | * If this becomes an actual Map, that will break.
|
---|
4228 | */
|
---|
4229 | function get(key) {
|
---|
4230 | return key._reactInternals;
|
---|
4231 | }
|
---|
4232 | function set(key, value) {
|
---|
4233 | key._reactInternals = value;
|
---|
4234 | }
|
---|
4235 |
|
---|
4236 | var didWarnAboutNoopUpdateForComponent = {};
|
---|
4237 | var didWarnAboutDeprecatedWillMount = {};
|
---|
4238 | var didWarnAboutUninitializedState;
|
---|
4239 | var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
|
---|
4240 | var didWarnAboutLegacyLifecyclesAndDerivedState;
|
---|
4241 | var didWarnAboutUndefinedDerivedState;
|
---|
4242 | var warnOnUndefinedDerivedState;
|
---|
4243 | var warnOnInvalidCallback;
|
---|
4244 | var didWarnAboutDirectlyAssigningPropsToState;
|
---|
4245 | var didWarnAboutContextTypeAndContextTypes;
|
---|
4246 | var didWarnAboutInvalidateContextType;
|
---|
4247 |
|
---|
4248 | {
|
---|
4249 | didWarnAboutUninitializedState = new Set();
|
---|
4250 | didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set();
|
---|
4251 | didWarnAboutLegacyLifecyclesAndDerivedState = new Set();
|
---|
4252 | didWarnAboutDirectlyAssigningPropsToState = new Set();
|
---|
4253 | didWarnAboutUndefinedDerivedState = new Set();
|
---|
4254 | didWarnAboutContextTypeAndContextTypes = new Set();
|
---|
4255 | didWarnAboutInvalidateContextType = new Set();
|
---|
4256 | var didWarnOnInvalidCallback = new Set();
|
---|
4257 |
|
---|
4258 | warnOnInvalidCallback = function (callback, callerName) {
|
---|
4259 | if (callback === null || typeof callback === 'function') {
|
---|
4260 | return;
|
---|
4261 | }
|
---|
4262 |
|
---|
4263 | var key = callerName + '_' + callback;
|
---|
4264 |
|
---|
4265 | if (!didWarnOnInvalidCallback.has(key)) {
|
---|
4266 | didWarnOnInvalidCallback.add(key);
|
---|
4267 |
|
---|
4268 | error('%s(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callerName, callback);
|
---|
4269 | }
|
---|
4270 | };
|
---|
4271 |
|
---|
4272 | warnOnUndefinedDerivedState = function (type, partialState) {
|
---|
4273 | if (partialState === undefined) {
|
---|
4274 | var componentName = getComponentNameFromType(type) || 'Component';
|
---|
4275 |
|
---|
4276 | if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
|
---|
4277 | didWarnAboutUndefinedDerivedState.add(componentName);
|
---|
4278 |
|
---|
4279 | error('%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' + 'You have returned undefined.', componentName);
|
---|
4280 | }
|
---|
4281 | }
|
---|
4282 | };
|
---|
4283 | }
|
---|
4284 |
|
---|
4285 | function warnNoop(publicInstance, callerName) {
|
---|
4286 | {
|
---|
4287 | var _constructor = publicInstance.constructor;
|
---|
4288 | var componentName = _constructor && getComponentNameFromType(_constructor) || 'ReactClass';
|
---|
4289 | var warningKey = componentName + '.' + callerName;
|
---|
4290 |
|
---|
4291 | if (didWarnAboutNoopUpdateForComponent[warningKey]) {
|
---|
4292 | return;
|
---|
4293 | }
|
---|
4294 |
|
---|
4295 | error('%s(...): Can only update a mounting component. ' + 'This usually means you called %s() outside componentWillMount() on the server. ' + 'This is a no-op.\n\nPlease check the code for the %s component.', callerName, callerName, componentName);
|
---|
4296 |
|
---|
4297 | didWarnAboutNoopUpdateForComponent[warningKey] = true;
|
---|
4298 | }
|
---|
4299 | }
|
---|
4300 |
|
---|
4301 | var classComponentUpdater = {
|
---|
4302 | isMounted: function (inst) {
|
---|
4303 | return false;
|
---|
4304 | },
|
---|
4305 | enqueueSetState: function (inst, payload, callback) {
|
---|
4306 | var internals = get(inst);
|
---|
4307 |
|
---|
4308 | if (internals.queue === null) {
|
---|
4309 | warnNoop(inst, 'setState');
|
---|
4310 | } else {
|
---|
4311 | internals.queue.push(payload);
|
---|
4312 |
|
---|
4313 | {
|
---|
4314 | if (callback !== undefined && callback !== null) {
|
---|
4315 | warnOnInvalidCallback(callback, 'setState');
|
---|
4316 | }
|
---|
4317 | }
|
---|
4318 | }
|
---|
4319 | },
|
---|
4320 | enqueueReplaceState: function (inst, payload, callback) {
|
---|
4321 | var internals = get(inst);
|
---|
4322 | internals.replace = true;
|
---|
4323 | internals.queue = [payload];
|
---|
4324 |
|
---|
4325 | {
|
---|
4326 | if (callback !== undefined && callback !== null) {
|
---|
4327 | warnOnInvalidCallback(callback, 'setState');
|
---|
4328 | }
|
---|
4329 | }
|
---|
4330 | },
|
---|
4331 | enqueueForceUpdate: function (inst, callback) {
|
---|
4332 | var internals = get(inst);
|
---|
4333 |
|
---|
4334 | if (internals.queue === null) {
|
---|
4335 | warnNoop(inst, 'forceUpdate');
|
---|
4336 | } else {
|
---|
4337 | {
|
---|
4338 | if (callback !== undefined && callback !== null) {
|
---|
4339 | warnOnInvalidCallback(callback, 'setState');
|
---|
4340 | }
|
---|
4341 | }
|
---|
4342 | }
|
---|
4343 | }
|
---|
4344 | };
|
---|
4345 |
|
---|
4346 | function applyDerivedStateFromProps(instance, ctor, getDerivedStateFromProps, prevState, nextProps) {
|
---|
4347 | var partialState = getDerivedStateFromProps(nextProps, prevState);
|
---|
4348 |
|
---|
4349 | {
|
---|
4350 | warnOnUndefinedDerivedState(ctor, partialState);
|
---|
4351 | } // Merge the partial state and the previous state.
|
---|
4352 |
|
---|
4353 |
|
---|
4354 | var newState = partialState === null || partialState === undefined ? prevState : assign({}, prevState, partialState);
|
---|
4355 | return newState;
|
---|
4356 | }
|
---|
4357 |
|
---|
4358 | function constructClassInstance(ctor, props, maskedLegacyContext) {
|
---|
4359 | var context = emptyContextObject;
|
---|
4360 | var contextType = ctor.contextType;
|
---|
4361 |
|
---|
4362 | {
|
---|
4363 | if ('contextType' in ctor) {
|
---|
4364 | var isValid = // Allow null for conditional declaration
|
---|
4365 | contextType === null || contextType !== undefined && contextType.$$typeof === REACT_CONTEXT_TYPE && contextType._context === undefined; // Not a <Context.Consumer>
|
---|
4366 |
|
---|
4367 | if (!isValid && !didWarnAboutInvalidateContextType.has(ctor)) {
|
---|
4368 | didWarnAboutInvalidateContextType.add(ctor);
|
---|
4369 | var addendum = '';
|
---|
4370 |
|
---|
4371 | if (contextType === undefined) {
|
---|
4372 | addendum = ' However, it is set to undefined. ' + 'This can be caused by a typo or by mixing up named and default imports. ' + 'This can also happen due to a circular dependency, so ' + 'try moving the createContext() call to a separate file.';
|
---|
4373 | } else if (typeof contextType !== 'object') {
|
---|
4374 | addendum = ' However, it is set to a ' + typeof contextType + '.';
|
---|
4375 | } else if (contextType.$$typeof === REACT_PROVIDER_TYPE) {
|
---|
4376 | addendum = ' Did you accidentally pass the Context.Provider instead?';
|
---|
4377 | } else if (contextType._context !== undefined) {
|
---|
4378 | // <Context.Consumer>
|
---|
4379 | addendum = ' Did you accidentally pass the Context.Consumer instead?';
|
---|
4380 | } else {
|
---|
4381 | addendum = ' However, it is set to an object with keys {' + Object.keys(contextType).join(', ') + '}.';
|
---|
4382 | }
|
---|
4383 |
|
---|
4384 | error('%s defines an invalid contextType. ' + 'contextType should point to the Context object returned by React.createContext().%s', getComponentNameFromType(ctor) || 'Component', addendum);
|
---|
4385 | }
|
---|
4386 | }
|
---|
4387 | }
|
---|
4388 |
|
---|
4389 | if (typeof contextType === 'object' && contextType !== null) {
|
---|
4390 | context = readContext(contextType);
|
---|
4391 | } else {
|
---|
4392 | context = maskedLegacyContext;
|
---|
4393 | }
|
---|
4394 |
|
---|
4395 | var instance = new ctor(props, context);
|
---|
4396 |
|
---|
4397 | {
|
---|
4398 | if (typeof ctor.getDerivedStateFromProps === 'function' && (instance.state === null || instance.state === undefined)) {
|
---|
4399 | var componentName = getComponentNameFromType(ctor) || 'Component';
|
---|
4400 |
|
---|
4401 | if (!didWarnAboutUninitializedState.has(componentName)) {
|
---|
4402 | didWarnAboutUninitializedState.add(componentName);
|
---|
4403 |
|
---|
4404 | error('`%s` uses `getDerivedStateFromProps` but its initial state is ' + '%s. This is not recommended. Instead, define the initial state by ' + 'assigning an object to `this.state` in the constructor of `%s`. ' + 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.', componentName, instance.state === null ? 'null' : 'undefined', componentName);
|
---|
4405 | }
|
---|
4406 | } // If new component APIs are defined, "unsafe" lifecycles won't be called.
|
---|
4407 | // Warn about these lifecycles if they are present.
|
---|
4408 | // Don't warn about react-lifecycles-compat polyfilled methods though.
|
---|
4409 |
|
---|
4410 |
|
---|
4411 | if (typeof ctor.getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function') {
|
---|
4412 | var foundWillMountName = null;
|
---|
4413 | var foundWillReceivePropsName = null;
|
---|
4414 | var foundWillUpdateName = null;
|
---|
4415 |
|
---|
4416 | if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true) {
|
---|
4417 | foundWillMountName = 'componentWillMount';
|
---|
4418 | } else if (typeof instance.UNSAFE_componentWillMount === 'function') {
|
---|
4419 | foundWillMountName = 'UNSAFE_componentWillMount';
|
---|
4420 | }
|
---|
4421 |
|
---|
4422 | if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true) {
|
---|
4423 | foundWillReceivePropsName = 'componentWillReceiveProps';
|
---|
4424 | } else if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
|
---|
4425 | foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
|
---|
4426 | }
|
---|
4427 |
|
---|
4428 | if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true) {
|
---|
4429 | foundWillUpdateName = 'componentWillUpdate';
|
---|
4430 | } else if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
|
---|
4431 | foundWillUpdateName = 'UNSAFE_componentWillUpdate';
|
---|
4432 | }
|
---|
4433 |
|
---|
4434 | if (foundWillMountName !== null || foundWillReceivePropsName !== null || foundWillUpdateName !== null) {
|
---|
4435 | var _componentName = getComponentNameFromType(ctor) || 'Component';
|
---|
4436 |
|
---|
4437 | var newApiName = typeof ctor.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' : 'getSnapshotBeforeUpdate()';
|
---|
4438 |
|
---|
4439 | if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(_componentName)) {
|
---|
4440 | didWarnAboutLegacyLifecyclesAndDerivedState.add(_componentName);
|
---|
4441 |
|
---|
4442 | error('Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' + '%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' + 'The above lifecycles should be removed. Learn more about this warning here:\n' + 'https://reactjs.org/link/unsafe-component-lifecycles', _componentName, newApiName, foundWillMountName !== null ? "\n " + foundWillMountName : '', foundWillReceivePropsName !== null ? "\n " + foundWillReceivePropsName : '', foundWillUpdateName !== null ? "\n " + foundWillUpdateName : '');
|
---|
4443 | }
|
---|
4444 | }
|
---|
4445 | }
|
---|
4446 | }
|
---|
4447 |
|
---|
4448 | return instance;
|
---|
4449 | }
|
---|
4450 |
|
---|
4451 | function checkClassInstance(instance, ctor, newProps) {
|
---|
4452 | {
|
---|
4453 | var name = getComponentNameFromType(ctor) || 'Component';
|
---|
4454 | var renderPresent = instance.render;
|
---|
4455 |
|
---|
4456 | if (!renderPresent) {
|
---|
4457 | if (ctor.prototype && typeof ctor.prototype.render === 'function') {
|
---|
4458 | error('%s(...): No `render` method found on the returned component ' + 'instance: did you accidentally return an object from the constructor?', name);
|
---|
4459 | } else {
|
---|
4460 | error('%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', name);
|
---|
4461 | }
|
---|
4462 | }
|
---|
4463 |
|
---|
4464 | if (instance.getInitialState && !instance.getInitialState.isReactClassApproved && !instance.state) {
|
---|
4465 | error('getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', name);
|
---|
4466 | }
|
---|
4467 |
|
---|
4468 | if (instance.getDefaultProps && !instance.getDefaultProps.isReactClassApproved) {
|
---|
4469 | error('getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', name);
|
---|
4470 | }
|
---|
4471 |
|
---|
4472 | if (instance.propTypes) {
|
---|
4473 | error('propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', name);
|
---|
4474 | }
|
---|
4475 |
|
---|
4476 | if (instance.contextType) {
|
---|
4477 | error('contextType was defined as an instance property on %s. Use a static ' + 'property to define contextType instead.', name);
|
---|
4478 | }
|
---|
4479 |
|
---|
4480 | {
|
---|
4481 | if (instance.contextTypes) {
|
---|
4482 | error('contextTypes was defined as an instance property on %s. Use a static ' + 'property to define contextTypes instead.', name);
|
---|
4483 | }
|
---|
4484 |
|
---|
4485 | if (ctor.contextType && ctor.contextTypes && !didWarnAboutContextTypeAndContextTypes.has(ctor)) {
|
---|
4486 | didWarnAboutContextTypeAndContextTypes.add(ctor);
|
---|
4487 |
|
---|
4488 | error('%s declares both contextTypes and contextType static properties. ' + 'The legacy contextTypes property will be ignored.', name);
|
---|
4489 | }
|
---|
4490 | }
|
---|
4491 |
|
---|
4492 | if (typeof instance.componentShouldUpdate === 'function') {
|
---|
4493 | error('%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', name);
|
---|
4494 | }
|
---|
4495 |
|
---|
4496 | if (ctor.prototype && ctor.prototype.isPureReactComponent && typeof instance.shouldComponentUpdate !== 'undefined') {
|
---|
4497 | error('%s has a method called shouldComponentUpdate(). ' + 'shouldComponentUpdate should not be used when extending React.PureComponent. ' + 'Please extend React.Component if shouldComponentUpdate is used.', getComponentNameFromType(ctor) || 'A pure component');
|
---|
4498 | }
|
---|
4499 |
|
---|
4500 | if (typeof instance.componentDidUnmount === 'function') {
|
---|
4501 | error('%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', name);
|
---|
4502 | }
|
---|
4503 |
|
---|
4504 | if (typeof instance.componentDidReceiveProps === 'function') {
|
---|
4505 | error('%s has a method called ' + 'componentDidReceiveProps(). But there is no such lifecycle method. ' + 'If you meant to update the state in response to changing props, ' + 'use componentWillReceiveProps(). If you meant to fetch data or ' + 'run side-effects or mutations after React has updated the UI, use componentDidUpdate().', name);
|
---|
4506 | }
|
---|
4507 |
|
---|
4508 | if (typeof instance.componentWillRecieveProps === 'function') {
|
---|
4509 | error('%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', name);
|
---|
4510 | }
|
---|
4511 |
|
---|
4512 | if (typeof instance.UNSAFE_componentWillRecieveProps === 'function') {
|
---|
4513 | error('%s has a method called ' + 'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?', name);
|
---|
4514 | }
|
---|
4515 |
|
---|
4516 | var hasMutatedProps = instance.props !== newProps;
|
---|
4517 |
|
---|
4518 | if (instance.props !== undefined && hasMutatedProps) {
|
---|
4519 | error('%s(...): When calling super() in `%s`, make sure to pass ' + "up the same props that your component's constructor was passed.", name, name);
|
---|
4520 | }
|
---|
4521 |
|
---|
4522 | if (instance.defaultProps) {
|
---|
4523 | error('Setting defaultProps as an instance property on %s is not supported and will be ignored.' + ' Instead, define defaultProps as a static property on %s.', name, name);
|
---|
4524 | }
|
---|
4525 |
|
---|
4526 | if (typeof instance.getSnapshotBeforeUpdate === 'function' && typeof instance.componentDidUpdate !== 'function' && !didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)) {
|
---|
4527 | didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
|
---|
4528 |
|
---|
4529 | error('%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' + 'This component defines getSnapshotBeforeUpdate() only.', getComponentNameFromType(ctor));
|
---|
4530 | }
|
---|
4531 |
|
---|
4532 | if (typeof instance.getDerivedStateFromProps === 'function') {
|
---|
4533 | error('%s: getDerivedStateFromProps() is defined as an instance method ' + 'and will be ignored. Instead, declare it as a static method.', name);
|
---|
4534 | }
|
---|
4535 |
|
---|
4536 | if (typeof instance.getDerivedStateFromError === 'function') {
|
---|
4537 | error('%s: getDerivedStateFromError() is defined as an instance method ' + 'and will be ignored. Instead, declare it as a static method.', name);
|
---|
4538 | }
|
---|
4539 |
|
---|
4540 | if (typeof ctor.getSnapshotBeforeUpdate === 'function') {
|
---|
4541 | error('%s: getSnapshotBeforeUpdate() is defined as a static method ' + 'and will be ignored. Instead, declare it as an instance method.', name);
|
---|
4542 | }
|
---|
4543 |
|
---|
4544 | var _state = instance.state;
|
---|
4545 |
|
---|
4546 | if (_state && (typeof _state !== 'object' || isArray(_state))) {
|
---|
4547 | error('%s.state: must be set to an object or null', name);
|
---|
4548 | }
|
---|
4549 |
|
---|
4550 | if (typeof instance.getChildContext === 'function' && typeof ctor.childContextTypes !== 'object') {
|
---|
4551 | error('%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', name);
|
---|
4552 | }
|
---|
4553 | }
|
---|
4554 | }
|
---|
4555 |
|
---|
4556 | function callComponentWillMount(type, instance) {
|
---|
4557 | var oldState = instance.state;
|
---|
4558 |
|
---|
4559 | if (typeof instance.componentWillMount === 'function') {
|
---|
4560 | {
|
---|
4561 | if ( instance.componentWillMount.__suppressDeprecationWarning !== true) {
|
---|
4562 | var componentName = getComponentNameFromType(type) || 'Unknown';
|
---|
4563 |
|
---|
4564 | if (!didWarnAboutDeprecatedWillMount[componentName]) {
|
---|
4565 | warn( // keep this warning in sync with ReactStrictModeWarning.js
|
---|
4566 | 'componentWillMount has been renamed, and is not recommended for use. ' + 'See https://reactjs.org/link/unsafe-component-lifecycles for details.\n\n' + '* Move code from componentWillMount to componentDidMount (preferred in most cases) ' + 'or the constructor.\n' + '\nPlease update the following components: %s', componentName);
|
---|
4567 |
|
---|
4568 | didWarnAboutDeprecatedWillMount[componentName] = true;
|
---|
4569 | }
|
---|
4570 | }
|
---|
4571 | }
|
---|
4572 |
|
---|
4573 | instance.componentWillMount();
|
---|
4574 | }
|
---|
4575 |
|
---|
4576 | if (typeof instance.UNSAFE_componentWillMount === 'function') {
|
---|
4577 | instance.UNSAFE_componentWillMount();
|
---|
4578 | }
|
---|
4579 |
|
---|
4580 | if (oldState !== instance.state) {
|
---|
4581 | {
|
---|
4582 | error('%s.componentWillMount(): Assigning directly to this.state is ' + "deprecated (except inside a component's " + 'constructor). Use setState instead.', getComponentNameFromType(type) || 'Component');
|
---|
4583 | }
|
---|
4584 |
|
---|
4585 | classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
|
---|
4586 | }
|
---|
4587 | }
|
---|
4588 |
|
---|
4589 | function processUpdateQueue(internalInstance, inst, props, maskedLegacyContext) {
|
---|
4590 | if (internalInstance.queue !== null && internalInstance.queue.length > 0) {
|
---|
4591 | var oldQueue = internalInstance.queue;
|
---|
4592 | var oldReplace = internalInstance.replace;
|
---|
4593 | internalInstance.queue = null;
|
---|
4594 | internalInstance.replace = false;
|
---|
4595 |
|
---|
4596 | if (oldReplace && oldQueue.length === 1) {
|
---|
4597 | inst.state = oldQueue[0];
|
---|
4598 | } else {
|
---|
4599 | var nextState = oldReplace ? oldQueue[0] : inst.state;
|
---|
4600 | var dontMutate = true;
|
---|
4601 |
|
---|
4602 | for (var i = oldReplace ? 1 : 0; i < oldQueue.length; i++) {
|
---|
4603 | var partial = oldQueue[i];
|
---|
4604 | var partialState = typeof partial === 'function' ? partial.call(inst, nextState, props, maskedLegacyContext) : partial;
|
---|
4605 |
|
---|
4606 | if (partialState != null) {
|
---|
4607 | if (dontMutate) {
|
---|
4608 | dontMutate = false;
|
---|
4609 | nextState = assign({}, nextState, partialState);
|
---|
4610 | } else {
|
---|
4611 | assign(nextState, partialState);
|
---|
4612 | }
|
---|
4613 | }
|
---|
4614 | }
|
---|
4615 |
|
---|
4616 | inst.state = nextState;
|
---|
4617 | }
|
---|
4618 | } else {
|
---|
4619 | internalInstance.queue = null;
|
---|
4620 | }
|
---|
4621 | } // Invokes the mount life-cycles on a previously never rendered instance.
|
---|
4622 |
|
---|
4623 |
|
---|
4624 | function mountClassInstance(instance, ctor, newProps, maskedLegacyContext) {
|
---|
4625 | {
|
---|
4626 | checkClassInstance(instance, ctor, newProps);
|
---|
4627 | }
|
---|
4628 |
|
---|
4629 | var initialState = instance.state !== undefined ? instance.state : null;
|
---|
4630 | instance.updater = classComponentUpdater;
|
---|
4631 | instance.props = newProps;
|
---|
4632 | instance.state = initialState; // We don't bother initializing the refs object on the server, since we're not going to resolve them anyway.
|
---|
4633 | // The internal instance will be used to manage updates that happen during this mount.
|
---|
4634 |
|
---|
4635 | var internalInstance = {
|
---|
4636 | queue: [],
|
---|
4637 | replace: false
|
---|
4638 | };
|
---|
4639 | set(instance, internalInstance);
|
---|
4640 | var contextType = ctor.contextType;
|
---|
4641 |
|
---|
4642 | if (typeof contextType === 'object' && contextType !== null) {
|
---|
4643 | instance.context = readContext(contextType);
|
---|
4644 | } else {
|
---|
4645 | instance.context = maskedLegacyContext;
|
---|
4646 | }
|
---|
4647 |
|
---|
4648 | {
|
---|
4649 | if (instance.state === newProps) {
|
---|
4650 | var componentName = getComponentNameFromType(ctor) || 'Component';
|
---|
4651 |
|
---|
4652 | if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
|
---|
4653 | didWarnAboutDirectlyAssigningPropsToState.add(componentName);
|
---|
4654 |
|
---|
4655 | error('%s: It is not recommended to assign props directly to state ' + "because updates to props won't be reflected in state. " + 'In most cases, it is better to use props directly.', componentName);
|
---|
4656 | }
|
---|
4657 | }
|
---|
4658 | }
|
---|
4659 |
|
---|
4660 | var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
|
---|
4661 |
|
---|
4662 | if (typeof getDerivedStateFromProps === 'function') {
|
---|
4663 | instance.state = applyDerivedStateFromProps(instance, ctor, getDerivedStateFromProps, initialState, newProps);
|
---|
4664 | } // In order to support react-lifecycles-compat polyfilled components,
|
---|
4665 | // Unsafe lifecycles should not be invoked for components using the new APIs.
|
---|
4666 |
|
---|
4667 |
|
---|
4668 | if (typeof ctor.getDerivedStateFromProps !== 'function' && typeof instance.getSnapshotBeforeUpdate !== 'function' && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
|
---|
4669 | callComponentWillMount(ctor, instance); // If we had additional state updates during this life-cycle, let's
|
---|
4670 | // process them now.
|
---|
4671 |
|
---|
4672 | processUpdateQueue(internalInstance, instance, newProps, maskedLegacyContext);
|
---|
4673 | }
|
---|
4674 | }
|
---|
4675 |
|
---|
4676 | // Ids are base 32 strings whose binary representation corresponds to the
|
---|
4677 | // position of a node in a tree.
|
---|
4678 | // Every time the tree forks into multiple children, we add additional bits to
|
---|
4679 | // the left of the sequence that represent the position of the child within the
|
---|
4680 | // current level of children.
|
---|
4681 | //
|
---|
4682 | // 00101 00010001011010101
|
---|
4683 | // ╰─┬─╯ ╰───────┬───────╯
|
---|
4684 | // Fork 5 of 20 Parent id
|
---|
4685 | //
|
---|
4686 | // The leading 0s are important. In the above example, you only need 3 bits to
|
---|
4687 | // represent slot 5. However, you need 5 bits to represent all the forks at
|
---|
4688 | // the current level, so we must account for the empty bits at the end.
|
---|
4689 | //
|
---|
4690 | // For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
|
---|
4691 | // the zeroth id at a level would be indistinguishable from its parent.
|
---|
4692 | //
|
---|
4693 | // If a node has only one child, and does not materialize an id (i.e. does not
|
---|
4694 | // contain a useId hook), then we don't need to allocate any space in the
|
---|
4695 | // sequence. It's treated as a transparent indirection. For example, these two
|
---|
4696 | // trees produce the same ids:
|
---|
4697 | //
|
---|
4698 | // <> <>
|
---|
4699 | // <Indirection> <A />
|
---|
4700 | // <A /> <B />
|
---|
4701 | // </Indirection> </>
|
---|
4702 | // <B />
|
---|
4703 | // </>
|
---|
4704 | //
|
---|
4705 | // However, we cannot skip any node that materializes an id. Otherwise, a parent
|
---|
4706 | // id that does not fork would be indistinguishable from its child id. For
|
---|
4707 | // example, this tree does not fork, but the parent and child must have
|
---|
4708 | // different ids.
|
---|
4709 | //
|
---|
4710 | // <Parent>
|
---|
4711 | // <Child />
|
---|
4712 | // </Parent>
|
---|
4713 | //
|
---|
4714 | // To handle this scenario, every time we materialize an id, we allocate a
|
---|
4715 | // new level with a single slot. You can think of this as a fork with only one
|
---|
4716 | // prong, or an array of children with length 1.
|
---|
4717 | //
|
---|
4718 | // It's possible for the size of the sequence to exceed 32 bits, the max
|
---|
4719 | // size for bitwise operations. When this happens, we make more room by
|
---|
4720 | // converting the right part of the id to a string and storing it in an overflow
|
---|
4721 | // variable. We use a base 32 string representation, because 32 is the largest
|
---|
4722 | // power of 2 that is supported by toString(). We want the base to be large so
|
---|
4723 | // that the resulting ids are compact, and we want the base to be a power of 2
|
---|
4724 | // because every log2(base) bits corresponds to a single character, i.e. every
|
---|
4725 | // log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
|
---|
4726 | // affecting the final result.
|
---|
4727 | var emptyTreeContext = {
|
---|
4728 | id: 1,
|
---|
4729 | overflow: ''
|
---|
4730 | };
|
---|
4731 | function getTreeId(context) {
|
---|
4732 | var overflow = context.overflow;
|
---|
4733 | var idWithLeadingBit = context.id;
|
---|
4734 | var id = idWithLeadingBit & ~getLeadingBit(idWithLeadingBit);
|
---|
4735 | return id.toString(32) + overflow;
|
---|
4736 | }
|
---|
4737 | function pushTreeContext(baseContext, totalChildren, index) {
|
---|
4738 | var baseIdWithLeadingBit = baseContext.id;
|
---|
4739 | var baseOverflow = baseContext.overflow; // The leftmost 1 marks the end of the sequence, non-inclusive. It's not part
|
---|
4740 | // of the id; we use it to account for leading 0s.
|
---|
4741 |
|
---|
4742 | var baseLength = getBitLength(baseIdWithLeadingBit) - 1;
|
---|
4743 | var baseId = baseIdWithLeadingBit & ~(1 << baseLength);
|
---|
4744 | var slot = index + 1;
|
---|
4745 | var length = getBitLength(totalChildren) + baseLength; // 30 is the max length we can store without overflowing, taking into
|
---|
4746 | // consideration the leading 1 we use to mark the end of the sequence.
|
---|
4747 |
|
---|
4748 | if (length > 30) {
|
---|
4749 | // We overflowed the bitwise-safe range. Fall back to slower algorithm.
|
---|
4750 | // This branch assumes the length of the base id is greater than 5; it won't
|
---|
4751 | // work for smaller ids, because you need 5 bits per character.
|
---|
4752 | //
|
---|
4753 | // We encode the id in multiple steps: first the base id, then the
|
---|
4754 | // remaining digits.
|
---|
4755 | //
|
---|
4756 | // Each 5 bit sequence corresponds to a single base 32 character. So for
|
---|
4757 | // example, if the current id is 23 bits long, we can convert 20 of those
|
---|
4758 | // bits into a string of 4 characters, with 3 bits left over.
|
---|
4759 | //
|
---|
4760 | // First calculate how many bits in the base id represent a complete
|
---|
4761 | // sequence of characters.
|
---|
4762 | var numberOfOverflowBits = baseLength - baseLength % 5; // Then create a bitmask that selects only those bits.
|
---|
4763 |
|
---|
4764 | var newOverflowBits = (1 << numberOfOverflowBits) - 1; // Select the bits, and convert them to a base 32 string.
|
---|
4765 |
|
---|
4766 | var newOverflow = (baseId & newOverflowBits).toString(32); // Now we can remove those bits from the base id.
|
---|
4767 |
|
---|
4768 | var restOfBaseId = baseId >> numberOfOverflowBits;
|
---|
4769 | var restOfBaseLength = baseLength - numberOfOverflowBits; // Finally, encode the rest of the bits using the normal algorithm. Because
|
---|
4770 | // we made more room, this time it won't overflow.
|
---|
4771 |
|
---|
4772 | var restOfLength = getBitLength(totalChildren) + restOfBaseLength;
|
---|
4773 | var restOfNewBits = slot << restOfBaseLength;
|
---|
4774 | var id = restOfNewBits | restOfBaseId;
|
---|
4775 | var overflow = newOverflow + baseOverflow;
|
---|
4776 | return {
|
---|
4777 | id: 1 << restOfLength | id,
|
---|
4778 | overflow: overflow
|
---|
4779 | };
|
---|
4780 | } else {
|
---|
4781 | // Normal path
|
---|
4782 | var newBits = slot << baseLength;
|
---|
4783 |
|
---|
4784 | var _id = newBits | baseId;
|
---|
4785 |
|
---|
4786 | var _overflow = baseOverflow;
|
---|
4787 | return {
|
---|
4788 | id: 1 << length | _id,
|
---|
4789 | overflow: _overflow
|
---|
4790 | };
|
---|
4791 | }
|
---|
4792 | }
|
---|
4793 |
|
---|
4794 | function getBitLength(number) {
|
---|
4795 | return 32 - clz32(number);
|
---|
4796 | }
|
---|
4797 |
|
---|
4798 | function getLeadingBit(id) {
|
---|
4799 | return 1 << getBitLength(id) - 1;
|
---|
4800 | } // TODO: Math.clz32 is supported in Node 12+. Maybe we can drop the fallback.
|
---|
4801 |
|
---|
4802 |
|
---|
4803 | var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback; // Count leading zeros.
|
---|
4804 | // Based on:
|
---|
4805 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
|
---|
4806 |
|
---|
4807 | var log = Math.log;
|
---|
4808 | var LN2 = Math.LN2;
|
---|
4809 |
|
---|
4810 | function clz32Fallback(x) {
|
---|
4811 | var asUint = x >>> 0;
|
---|
4812 |
|
---|
4813 | if (asUint === 0) {
|
---|
4814 | return 32;
|
---|
4815 | }
|
---|
4816 |
|
---|
4817 | return 31 - (log(asUint) / LN2 | 0) | 0;
|
---|
4818 | }
|
---|
4819 |
|
---|
4820 | /**
|
---|
4821 | * inlined Object.is polyfill to avoid requiring consumers ship their own
|
---|
4822 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
|
---|
4823 | */
|
---|
4824 | function is(x, y) {
|
---|
4825 | return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
|
---|
4826 | ;
|
---|
4827 | }
|
---|
4828 |
|
---|
4829 | var objectIs = typeof Object.is === 'function' ? Object.is : is;
|
---|
4830 |
|
---|
4831 | var currentlyRenderingComponent = null;
|
---|
4832 | var currentlyRenderingTask = null;
|
---|
4833 | var firstWorkInProgressHook = null;
|
---|
4834 | var workInProgressHook = null; // Whether the work-in-progress hook is a re-rendered hook
|
---|
4835 |
|
---|
4836 | var isReRender = false; // Whether an update was scheduled during the currently executing render pass.
|
---|
4837 |
|
---|
4838 | var didScheduleRenderPhaseUpdate = false; // Counts the number of useId hooks in this component
|
---|
4839 |
|
---|
4840 | var localIdCounter = 0; // Lazily created map of render-phase updates
|
---|
4841 |
|
---|
4842 | var renderPhaseUpdates = null; // Counter to prevent infinite loops.
|
---|
4843 |
|
---|
4844 | var numberOfReRenders = 0;
|
---|
4845 | var RE_RENDER_LIMIT = 25;
|
---|
4846 | var isInHookUserCodeInDev = false; // In DEV, this is the name of the currently executing primitive hook
|
---|
4847 |
|
---|
4848 | var currentHookNameInDev;
|
---|
4849 |
|
---|
4850 | function resolveCurrentlyRenderingComponent() {
|
---|
4851 | if (currentlyRenderingComponent === null) {
|
---|
4852 | throw new Error('Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' + ' one of the following reasons:\n' + '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' + '2. You might be breaking the Rules of Hooks\n' + '3. You might have more than one copy of React in the same app\n' + 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.');
|
---|
4853 | }
|
---|
4854 |
|
---|
4855 | {
|
---|
4856 | if (isInHookUserCodeInDev) {
|
---|
4857 | error('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://reactjs.org/link/rules-of-hooks');
|
---|
4858 | }
|
---|
4859 | }
|
---|
4860 |
|
---|
4861 | return currentlyRenderingComponent;
|
---|
4862 | }
|
---|
4863 |
|
---|
4864 | function areHookInputsEqual(nextDeps, prevDeps) {
|
---|
4865 | if (prevDeps === null) {
|
---|
4866 | {
|
---|
4867 | error('%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);
|
---|
4868 | }
|
---|
4869 |
|
---|
4870 | return false;
|
---|
4871 | }
|
---|
4872 |
|
---|
4873 | {
|
---|
4874 | // Don't bother comparing lengths in prod because these arrays should be
|
---|
4875 | // passed inline.
|
---|
4876 | if (nextDeps.length !== prevDeps.length) {
|
---|
4877 | error('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(', ') + "]");
|
---|
4878 | }
|
---|
4879 | }
|
---|
4880 |
|
---|
4881 | for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
|
---|
4882 | if (objectIs(nextDeps[i], prevDeps[i])) {
|
---|
4883 | continue;
|
---|
4884 | }
|
---|
4885 |
|
---|
4886 | return false;
|
---|
4887 | }
|
---|
4888 |
|
---|
4889 | return true;
|
---|
4890 | }
|
---|
4891 |
|
---|
4892 | function createHook() {
|
---|
4893 | if (numberOfReRenders > 0) {
|
---|
4894 | throw new Error('Rendered more hooks than during the previous render');
|
---|
4895 | }
|
---|
4896 |
|
---|
4897 | return {
|
---|
4898 | memoizedState: null,
|
---|
4899 | queue: null,
|
---|
4900 | next: null
|
---|
4901 | };
|
---|
4902 | }
|
---|
4903 |
|
---|
4904 | function createWorkInProgressHook() {
|
---|
4905 | if (workInProgressHook === null) {
|
---|
4906 | // This is the first hook in the list
|
---|
4907 | if (firstWorkInProgressHook === null) {
|
---|
4908 | isReRender = false;
|
---|
4909 | firstWorkInProgressHook = workInProgressHook = createHook();
|
---|
4910 | } else {
|
---|
4911 | // There's already a work-in-progress. Reuse it.
|
---|
4912 | isReRender = true;
|
---|
4913 | workInProgressHook = firstWorkInProgressHook;
|
---|
4914 | }
|
---|
4915 | } else {
|
---|
4916 | if (workInProgressHook.next === null) {
|
---|
4917 | isReRender = false; // Append to the end of the list
|
---|
4918 |
|
---|
4919 | workInProgressHook = workInProgressHook.next = createHook();
|
---|
4920 | } else {
|
---|
4921 | // There's already a work-in-progress. Reuse it.
|
---|
4922 | isReRender = true;
|
---|
4923 | workInProgressHook = workInProgressHook.next;
|
---|
4924 | }
|
---|
4925 | }
|
---|
4926 |
|
---|
4927 | return workInProgressHook;
|
---|
4928 | }
|
---|
4929 |
|
---|
4930 | function prepareToUseHooks(task, componentIdentity) {
|
---|
4931 | currentlyRenderingComponent = componentIdentity;
|
---|
4932 | currentlyRenderingTask = task;
|
---|
4933 |
|
---|
4934 | {
|
---|
4935 | isInHookUserCodeInDev = false;
|
---|
4936 | } // The following should have already been reset
|
---|
4937 | // didScheduleRenderPhaseUpdate = false;
|
---|
4938 | // localIdCounter = 0;
|
---|
4939 | // firstWorkInProgressHook = null;
|
---|
4940 | // numberOfReRenders = 0;
|
---|
4941 | // renderPhaseUpdates = null;
|
---|
4942 | // workInProgressHook = null;
|
---|
4943 |
|
---|
4944 |
|
---|
4945 | localIdCounter = 0;
|
---|
4946 | }
|
---|
4947 | function finishHooks(Component, props, children, refOrContext) {
|
---|
4948 | // This must be called after every function component to prevent hooks from
|
---|
4949 | // being used in classes.
|
---|
4950 | while (didScheduleRenderPhaseUpdate) {
|
---|
4951 | // Updates were scheduled during the render phase. They are stored in
|
---|
4952 | // the `renderPhaseUpdates` map. Call the component again, reusing the
|
---|
4953 | // work-in-progress hooks and applying the additional updates on top. Keep
|
---|
4954 | // restarting until no more updates are scheduled.
|
---|
4955 | didScheduleRenderPhaseUpdate = false;
|
---|
4956 | localIdCounter = 0;
|
---|
4957 | numberOfReRenders += 1; // Start over from the beginning of the list
|
---|
4958 |
|
---|
4959 | workInProgressHook = null;
|
---|
4960 | children = Component(props, refOrContext);
|
---|
4961 | }
|
---|
4962 |
|
---|
4963 | resetHooksState();
|
---|
4964 | return children;
|
---|
4965 | }
|
---|
4966 | function checkDidRenderIdHook() {
|
---|
4967 | // This should be called immediately after every finishHooks call.
|
---|
4968 | // Conceptually, it's part of the return value of finishHooks; it's only a
|
---|
4969 | // separate function to avoid using an array tuple.
|
---|
4970 | var didRenderIdHook = localIdCounter !== 0;
|
---|
4971 | return didRenderIdHook;
|
---|
4972 | } // Reset the internal hooks state if an error occurs while rendering a component
|
---|
4973 |
|
---|
4974 | function resetHooksState() {
|
---|
4975 | {
|
---|
4976 | isInHookUserCodeInDev = false;
|
---|
4977 | }
|
---|
4978 |
|
---|
4979 | currentlyRenderingComponent = null;
|
---|
4980 | currentlyRenderingTask = null;
|
---|
4981 | didScheduleRenderPhaseUpdate = false;
|
---|
4982 | firstWorkInProgressHook = null;
|
---|
4983 | numberOfReRenders = 0;
|
---|
4984 | renderPhaseUpdates = null;
|
---|
4985 | workInProgressHook = null;
|
---|
4986 | }
|
---|
4987 |
|
---|
4988 | function readContext$1(context) {
|
---|
4989 | {
|
---|
4990 | if (isInHookUserCodeInDev) {
|
---|
4991 | error('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().');
|
---|
4992 | }
|
---|
4993 | }
|
---|
4994 |
|
---|
4995 | return readContext(context);
|
---|
4996 | }
|
---|
4997 |
|
---|
4998 | function useContext(context) {
|
---|
4999 | {
|
---|
5000 | currentHookNameInDev = 'useContext';
|
---|
5001 | }
|
---|
5002 |
|
---|
5003 | resolveCurrentlyRenderingComponent();
|
---|
5004 | return readContext(context);
|
---|
5005 | }
|
---|
5006 |
|
---|
5007 | function basicStateReducer(state, action) {
|
---|
5008 | // $FlowFixMe: Flow doesn't like mixed types
|
---|
5009 | return typeof action === 'function' ? action(state) : action;
|
---|
5010 | }
|
---|
5011 |
|
---|
5012 | function useState(initialState) {
|
---|
5013 | {
|
---|
5014 | currentHookNameInDev = 'useState';
|
---|
5015 | }
|
---|
5016 |
|
---|
5017 | return useReducer(basicStateReducer, // useReducer has a special case to support lazy useState initializers
|
---|
5018 | initialState);
|
---|
5019 | }
|
---|
5020 | function useReducer(reducer, initialArg, init) {
|
---|
5021 | {
|
---|
5022 | if (reducer !== basicStateReducer) {
|
---|
5023 | currentHookNameInDev = 'useReducer';
|
---|
5024 | }
|
---|
5025 | }
|
---|
5026 |
|
---|
5027 | currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
|
---|
5028 | workInProgressHook = createWorkInProgressHook();
|
---|
5029 |
|
---|
5030 | if (isReRender) {
|
---|
5031 | // This is a re-render. Apply the new render phase updates to the previous
|
---|
5032 | // current hook.
|
---|
5033 | var queue = workInProgressHook.queue;
|
---|
5034 | var dispatch = queue.dispatch;
|
---|
5035 |
|
---|
5036 | if (renderPhaseUpdates !== null) {
|
---|
5037 | // Render phase updates are stored in a map of queue -> linked list
|
---|
5038 | var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
|
---|
5039 |
|
---|
5040 | if (firstRenderPhaseUpdate !== undefined) {
|
---|
5041 | renderPhaseUpdates.delete(queue);
|
---|
5042 | var newState = workInProgressHook.memoizedState;
|
---|
5043 | var update = firstRenderPhaseUpdate;
|
---|
5044 |
|
---|
5045 | do {
|
---|
5046 | // Process this render phase update. We don't have to check the
|
---|
5047 | // priority because it will always be the same as the current
|
---|
5048 | // render's.
|
---|
5049 | var action = update.action;
|
---|
5050 |
|
---|
5051 | {
|
---|
5052 | isInHookUserCodeInDev = true;
|
---|
5053 | }
|
---|
5054 |
|
---|
5055 | newState = reducer(newState, action);
|
---|
5056 |
|
---|
5057 | {
|
---|
5058 | isInHookUserCodeInDev = false;
|
---|
5059 | }
|
---|
5060 |
|
---|
5061 | update = update.next;
|
---|
5062 | } while (update !== null);
|
---|
5063 |
|
---|
5064 | workInProgressHook.memoizedState = newState;
|
---|
5065 | return [newState, dispatch];
|
---|
5066 | }
|
---|
5067 | }
|
---|
5068 |
|
---|
5069 | return [workInProgressHook.memoizedState, dispatch];
|
---|
5070 | } else {
|
---|
5071 | {
|
---|
5072 | isInHookUserCodeInDev = true;
|
---|
5073 | }
|
---|
5074 |
|
---|
5075 | var initialState;
|
---|
5076 |
|
---|
5077 | if (reducer === basicStateReducer) {
|
---|
5078 | // Special case for `useState`.
|
---|
5079 | initialState = typeof initialArg === 'function' ? initialArg() : initialArg;
|
---|
5080 | } else {
|
---|
5081 | initialState = init !== undefined ? init(initialArg) : initialArg;
|
---|
5082 | }
|
---|
5083 |
|
---|
5084 | {
|
---|
5085 | isInHookUserCodeInDev = false;
|
---|
5086 | }
|
---|
5087 |
|
---|
5088 | workInProgressHook.memoizedState = initialState;
|
---|
5089 |
|
---|
5090 | var _queue = workInProgressHook.queue = {
|
---|
5091 | last: null,
|
---|
5092 | dispatch: null
|
---|
5093 | };
|
---|
5094 |
|
---|
5095 | var _dispatch = _queue.dispatch = dispatchAction.bind(null, currentlyRenderingComponent, _queue);
|
---|
5096 |
|
---|
5097 | return [workInProgressHook.memoizedState, _dispatch];
|
---|
5098 | }
|
---|
5099 | }
|
---|
5100 |
|
---|
5101 | function useMemo(nextCreate, deps) {
|
---|
5102 | currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
|
---|
5103 | workInProgressHook = createWorkInProgressHook();
|
---|
5104 | var nextDeps = deps === undefined ? null : deps;
|
---|
5105 |
|
---|
5106 | if (workInProgressHook !== null) {
|
---|
5107 | var prevState = workInProgressHook.memoizedState;
|
---|
5108 |
|
---|
5109 | if (prevState !== null) {
|
---|
5110 | if (nextDeps !== null) {
|
---|
5111 | var prevDeps = prevState[1];
|
---|
5112 |
|
---|
5113 | if (areHookInputsEqual(nextDeps, prevDeps)) {
|
---|
5114 | return prevState[0];
|
---|
5115 | }
|
---|
5116 | }
|
---|
5117 | }
|
---|
5118 | }
|
---|
5119 |
|
---|
5120 | {
|
---|
5121 | isInHookUserCodeInDev = true;
|
---|
5122 | }
|
---|
5123 |
|
---|
5124 | var nextValue = nextCreate();
|
---|
5125 |
|
---|
5126 | {
|
---|
5127 | isInHookUserCodeInDev = false;
|
---|
5128 | }
|
---|
5129 |
|
---|
5130 | workInProgressHook.memoizedState = [nextValue, nextDeps];
|
---|
5131 | return nextValue;
|
---|
5132 | }
|
---|
5133 |
|
---|
5134 | function useRef(initialValue) {
|
---|
5135 | currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
|
---|
5136 | workInProgressHook = createWorkInProgressHook();
|
---|
5137 | var previousRef = workInProgressHook.memoizedState;
|
---|
5138 |
|
---|
5139 | if (previousRef === null) {
|
---|
5140 | var ref = {
|
---|
5141 | current: initialValue
|
---|
5142 | };
|
---|
5143 |
|
---|
5144 | {
|
---|
5145 | Object.seal(ref);
|
---|
5146 | }
|
---|
5147 |
|
---|
5148 | workInProgressHook.memoizedState = ref;
|
---|
5149 | return ref;
|
---|
5150 | } else {
|
---|
5151 | return previousRef;
|
---|
5152 | }
|
---|
5153 | }
|
---|
5154 |
|
---|
5155 | function useLayoutEffect(create, inputs) {
|
---|
5156 | {
|
---|
5157 | currentHookNameInDev = 'useLayoutEffect';
|
---|
5158 |
|
---|
5159 | error('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. ' + 'See https://reactjs.org/link/uselayouteffect-ssr for common fixes.');
|
---|
5160 | }
|
---|
5161 | }
|
---|
5162 |
|
---|
5163 | function dispatchAction(componentIdentity, queue, action) {
|
---|
5164 | if (numberOfReRenders >= RE_RENDER_LIMIT) {
|
---|
5165 | throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');
|
---|
5166 | }
|
---|
5167 |
|
---|
5168 | if (componentIdentity === currentlyRenderingComponent) {
|
---|
5169 | // This is a render phase update. Stash it in a lazily-created map of
|
---|
5170 | // queue -> linked list of updates. After this render pass, we'll restart
|
---|
5171 | // and apply the stashed updates on top of the work-in-progress hook.
|
---|
5172 | didScheduleRenderPhaseUpdate = true;
|
---|
5173 | var update = {
|
---|
5174 | action: action,
|
---|
5175 | next: null
|
---|
5176 | };
|
---|
5177 |
|
---|
5178 | if (renderPhaseUpdates === null) {
|
---|
5179 | renderPhaseUpdates = new Map();
|
---|
5180 | }
|
---|
5181 |
|
---|
5182 | var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
|
---|
5183 |
|
---|
5184 | if (firstRenderPhaseUpdate === undefined) {
|
---|
5185 | renderPhaseUpdates.set(queue, update);
|
---|
5186 | } else {
|
---|
5187 | // Append the update to the end of the list.
|
---|
5188 | var lastRenderPhaseUpdate = firstRenderPhaseUpdate;
|
---|
5189 |
|
---|
5190 | while (lastRenderPhaseUpdate.next !== null) {
|
---|
5191 | lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
|
---|
5192 | }
|
---|
5193 |
|
---|
5194 | lastRenderPhaseUpdate.next = update;
|
---|
5195 | }
|
---|
5196 | }
|
---|
5197 | }
|
---|
5198 |
|
---|
5199 | function useCallback(callback, deps) {
|
---|
5200 | return useMemo(function () {
|
---|
5201 | return callback;
|
---|
5202 | }, deps);
|
---|
5203 | } // TODO Decide on how to implement this hook for server rendering.
|
---|
5204 | // If a mutation occurs during render, consider triggering a Suspense boundary
|
---|
5205 | // and falling back to client rendering.
|
---|
5206 |
|
---|
5207 | function useMutableSource(source, getSnapshot, subscribe) {
|
---|
5208 | resolveCurrentlyRenderingComponent();
|
---|
5209 | return getSnapshot(source._source);
|
---|
5210 | }
|
---|
5211 |
|
---|
5212 | function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
|
---|
5213 | if (getServerSnapshot === undefined) {
|
---|
5214 | throw new Error('Missing getServerSnapshot, which is required for ' + 'server-rendered content. Will revert to client rendering.');
|
---|
5215 | }
|
---|
5216 |
|
---|
5217 | return getServerSnapshot();
|
---|
5218 | }
|
---|
5219 |
|
---|
5220 | function useDeferredValue(value) {
|
---|
5221 | resolveCurrentlyRenderingComponent();
|
---|
5222 | return value;
|
---|
5223 | }
|
---|
5224 |
|
---|
5225 | function unsupportedStartTransition() {
|
---|
5226 | throw new Error('startTransition cannot be called during server rendering.');
|
---|
5227 | }
|
---|
5228 |
|
---|
5229 | function useTransition() {
|
---|
5230 | resolveCurrentlyRenderingComponent();
|
---|
5231 | return [false, unsupportedStartTransition];
|
---|
5232 | }
|
---|
5233 |
|
---|
5234 | function useId() {
|
---|
5235 | var task = currentlyRenderingTask;
|
---|
5236 | var treeId = getTreeId(task.treeContext);
|
---|
5237 | var responseState = currentResponseState;
|
---|
5238 |
|
---|
5239 | if (responseState === null) {
|
---|
5240 | throw new Error('Invalid hook call. Hooks can only be called inside of the body of a function component.');
|
---|
5241 | }
|
---|
5242 |
|
---|
5243 | var localId = localIdCounter++;
|
---|
5244 | return makeId(responseState, treeId, localId);
|
---|
5245 | }
|
---|
5246 |
|
---|
5247 | function noop() {}
|
---|
5248 |
|
---|
5249 | var Dispatcher = {
|
---|
5250 | readContext: readContext$1,
|
---|
5251 | useContext: useContext,
|
---|
5252 | useMemo: useMemo,
|
---|
5253 | useReducer: useReducer,
|
---|
5254 | useRef: useRef,
|
---|
5255 | useState: useState,
|
---|
5256 | useInsertionEffect: noop,
|
---|
5257 | useLayoutEffect: useLayoutEffect,
|
---|
5258 | useCallback: useCallback,
|
---|
5259 | // useImperativeHandle is not run in the server environment
|
---|
5260 | useImperativeHandle: noop,
|
---|
5261 | // Effects are not run in the server environment.
|
---|
5262 | useEffect: noop,
|
---|
5263 | // Debugging effect
|
---|
5264 | useDebugValue: noop,
|
---|
5265 | useDeferredValue: useDeferredValue,
|
---|
5266 | useTransition: useTransition,
|
---|
5267 | useId: useId,
|
---|
5268 | // Subscriptions are not setup in a server environment.
|
---|
5269 | useMutableSource: useMutableSource,
|
---|
5270 | useSyncExternalStore: useSyncExternalStore
|
---|
5271 | };
|
---|
5272 |
|
---|
5273 | var currentResponseState = null;
|
---|
5274 | function setCurrentResponseState(responseState) {
|
---|
5275 | currentResponseState = responseState;
|
---|
5276 | }
|
---|
5277 |
|
---|
5278 | function getStackByComponentStackNode(componentStack) {
|
---|
5279 | try {
|
---|
5280 | var info = '';
|
---|
5281 | var node = componentStack;
|
---|
5282 |
|
---|
5283 | do {
|
---|
5284 | switch (node.tag) {
|
---|
5285 | case 0:
|
---|
5286 | info += describeBuiltInComponentFrame(node.type, null, null);
|
---|
5287 | break;
|
---|
5288 |
|
---|
5289 | case 1:
|
---|
5290 | info += describeFunctionComponentFrame(node.type, null, null);
|
---|
5291 | break;
|
---|
5292 |
|
---|
5293 | case 2:
|
---|
5294 | info += describeClassComponentFrame(node.type, null, null);
|
---|
5295 | break;
|
---|
5296 | }
|
---|
5297 |
|
---|
5298 | node = node.parent;
|
---|
5299 | } while (node);
|
---|
5300 |
|
---|
5301 | return info;
|
---|
5302 | } catch (x) {
|
---|
5303 | return '\nError generating stack: ' + x.message + '\n' + x.stack;
|
---|
5304 | }
|
---|
5305 | }
|
---|
5306 |
|
---|
5307 | var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher;
|
---|
5308 | var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
|
---|
5309 | var PENDING = 0;
|
---|
5310 | var COMPLETED = 1;
|
---|
5311 | var FLUSHED = 2;
|
---|
5312 | var ABORTED = 3;
|
---|
5313 | var ERRORED = 4;
|
---|
5314 | var OPEN = 0;
|
---|
5315 | var CLOSING = 1;
|
---|
5316 | var CLOSED = 2;
|
---|
5317 | // This is a default heuristic for how to split up the HTML content into progressive
|
---|
5318 | // loading. Our goal is to be able to display additional new content about every 500ms.
|
---|
5319 | // Faster than that is unnecessary and should be throttled on the client. It also
|
---|
5320 | // adds unnecessary overhead to do more splits. We don't know if it's a higher or lower
|
---|
5321 | // end device but higher end suffer less from the overhead than lower end does from
|
---|
5322 | // not getting small enough pieces. We error on the side of low end.
|
---|
5323 | // We base this on low end 3G speeds which is about 500kbits per second. We assume
|
---|
5324 | // that there can be a reasonable drop off from max bandwidth which leaves you with
|
---|
5325 | // as little as 80%. We can receive half of that each 500ms - at best. In practice,
|
---|
5326 | // a little bandwidth is lost to processing and contention - e.g. CSS and images that
|
---|
5327 | // are downloaded along with the main content. So we estimate about half of that to be
|
---|
5328 | // the lower end throughput. In other words, we expect that you can at least show
|
---|
5329 | // about 12.5kb of content per 500ms. Not counting starting latency for the first
|
---|
5330 | // paint.
|
---|
5331 | // 500 * 1024 / 8 * .8 * 0.5 / 2
|
---|
5332 | var DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
|
---|
5333 |
|
---|
5334 | function defaultErrorHandler(error) {
|
---|
5335 | console['error'](error); // Don't transform to our wrapper
|
---|
5336 |
|
---|
5337 | return null;
|
---|
5338 | }
|
---|
5339 |
|
---|
5340 | function noop$1() {}
|
---|
5341 |
|
---|
5342 | function createRequest(children, responseState, rootFormatContext, progressiveChunkSize, onError, onAllReady, onShellReady, onShellError, onFatalError) {
|
---|
5343 | var pingedTasks = [];
|
---|
5344 | var abortSet = new Set();
|
---|
5345 | var request = {
|
---|
5346 | destination: null,
|
---|
5347 | responseState: responseState,
|
---|
5348 | progressiveChunkSize: progressiveChunkSize === undefined ? DEFAULT_PROGRESSIVE_CHUNK_SIZE : progressiveChunkSize,
|
---|
5349 | status: OPEN,
|
---|
5350 | fatalError: null,
|
---|
5351 | nextSegmentId: 0,
|
---|
5352 | allPendingTasks: 0,
|
---|
5353 | pendingRootTasks: 0,
|
---|
5354 | completedRootSegment: null,
|
---|
5355 | abortableTasks: abortSet,
|
---|
5356 | pingedTasks: pingedTasks,
|
---|
5357 | clientRenderedBoundaries: [],
|
---|
5358 | completedBoundaries: [],
|
---|
5359 | partialBoundaries: [],
|
---|
5360 | onError: onError === undefined ? defaultErrorHandler : onError,
|
---|
5361 | onAllReady: onAllReady === undefined ? noop$1 : onAllReady,
|
---|
5362 | onShellReady: onShellReady === undefined ? noop$1 : onShellReady,
|
---|
5363 | onShellError: onShellError === undefined ? noop$1 : onShellError,
|
---|
5364 | onFatalError: onFatalError === undefined ? noop$1 : onFatalError
|
---|
5365 | }; // This segment represents the root fallback.
|
---|
5366 |
|
---|
5367 | var rootSegment = createPendingSegment(request, 0, null, rootFormatContext, // Root segments are never embedded in Text on either edge
|
---|
5368 | false, false); // There is no parent so conceptually, we're unblocked to flush this segment.
|
---|
5369 |
|
---|
5370 | rootSegment.parentFlushed = true;
|
---|
5371 | var rootTask = createTask(request, children, null, rootSegment, abortSet, emptyContextObject, rootContextSnapshot, emptyTreeContext);
|
---|
5372 | pingedTasks.push(rootTask);
|
---|
5373 | return request;
|
---|
5374 | }
|
---|
5375 |
|
---|
5376 | function pingTask(request, task) {
|
---|
5377 | var pingedTasks = request.pingedTasks;
|
---|
5378 | pingedTasks.push(task);
|
---|
5379 |
|
---|
5380 | if (pingedTasks.length === 1) {
|
---|
5381 | scheduleWork(function () {
|
---|
5382 | return performWork(request);
|
---|
5383 | });
|
---|
5384 | }
|
---|
5385 | }
|
---|
5386 |
|
---|
5387 | function createSuspenseBoundary(request, fallbackAbortableTasks) {
|
---|
5388 | return {
|
---|
5389 | id: UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
|
---|
5390 | rootSegmentID: -1,
|
---|
5391 | parentFlushed: false,
|
---|
5392 | pendingTasks: 0,
|
---|
5393 | forceClientRender: false,
|
---|
5394 | completedSegments: [],
|
---|
5395 | byteSize: 0,
|
---|
5396 | fallbackAbortableTasks: fallbackAbortableTasks,
|
---|
5397 | errorDigest: null
|
---|
5398 | };
|
---|
5399 | }
|
---|
5400 |
|
---|
5401 | function createTask(request, node, blockedBoundary, blockedSegment, abortSet, legacyContext, context, treeContext) {
|
---|
5402 | request.allPendingTasks++;
|
---|
5403 |
|
---|
5404 | if (blockedBoundary === null) {
|
---|
5405 | request.pendingRootTasks++;
|
---|
5406 | } else {
|
---|
5407 | blockedBoundary.pendingTasks++;
|
---|
5408 | }
|
---|
5409 |
|
---|
5410 | var task = {
|
---|
5411 | node: node,
|
---|
5412 | ping: function () {
|
---|
5413 | return pingTask(request, task);
|
---|
5414 | },
|
---|
5415 | blockedBoundary: blockedBoundary,
|
---|
5416 | blockedSegment: blockedSegment,
|
---|
5417 | abortSet: abortSet,
|
---|
5418 | legacyContext: legacyContext,
|
---|
5419 | context: context,
|
---|
5420 | treeContext: treeContext
|
---|
5421 | };
|
---|
5422 |
|
---|
5423 | {
|
---|
5424 | task.componentStack = null;
|
---|
5425 | }
|
---|
5426 |
|
---|
5427 | abortSet.add(task);
|
---|
5428 | return task;
|
---|
5429 | }
|
---|
5430 |
|
---|
5431 | function createPendingSegment(request, index, boundary, formatContext, lastPushedText, textEmbedded) {
|
---|
5432 | return {
|
---|
5433 | status: PENDING,
|
---|
5434 | id: -1,
|
---|
5435 | // lazily assigned later
|
---|
5436 | index: index,
|
---|
5437 | parentFlushed: false,
|
---|
5438 | chunks: [],
|
---|
5439 | children: [],
|
---|
5440 | formatContext: formatContext,
|
---|
5441 | boundary: boundary,
|
---|
5442 | lastPushedText: lastPushedText,
|
---|
5443 | textEmbedded: textEmbedded
|
---|
5444 | };
|
---|
5445 | } // DEV-only global reference to the currently executing task
|
---|
5446 |
|
---|
5447 |
|
---|
5448 | var currentTaskInDEV = null;
|
---|
5449 |
|
---|
5450 | function getCurrentStackInDEV() {
|
---|
5451 | {
|
---|
5452 | if (currentTaskInDEV === null || currentTaskInDEV.componentStack === null) {
|
---|
5453 | return '';
|
---|
5454 | }
|
---|
5455 |
|
---|
5456 | return getStackByComponentStackNode(currentTaskInDEV.componentStack);
|
---|
5457 | }
|
---|
5458 | }
|
---|
5459 |
|
---|
5460 | function pushBuiltInComponentStackInDEV(task, type) {
|
---|
5461 | {
|
---|
5462 | task.componentStack = {
|
---|
5463 | tag: 0,
|
---|
5464 | parent: task.componentStack,
|
---|
5465 | type: type
|
---|
5466 | };
|
---|
5467 | }
|
---|
5468 | }
|
---|
5469 |
|
---|
5470 | function pushFunctionComponentStackInDEV(task, type) {
|
---|
5471 | {
|
---|
5472 | task.componentStack = {
|
---|
5473 | tag: 1,
|
---|
5474 | parent: task.componentStack,
|
---|
5475 | type: type
|
---|
5476 | };
|
---|
5477 | }
|
---|
5478 | }
|
---|
5479 |
|
---|
5480 | function pushClassComponentStackInDEV(task, type) {
|
---|
5481 | {
|
---|
5482 | task.componentStack = {
|
---|
5483 | tag: 2,
|
---|
5484 | parent: task.componentStack,
|
---|
5485 | type: type
|
---|
5486 | };
|
---|
5487 | }
|
---|
5488 | }
|
---|
5489 |
|
---|
5490 | function popComponentStackInDEV(task) {
|
---|
5491 | {
|
---|
5492 | if (task.componentStack === null) {
|
---|
5493 | error('Unexpectedly popped too many stack frames. This is a bug in React.');
|
---|
5494 | } else {
|
---|
5495 | task.componentStack = task.componentStack.parent;
|
---|
5496 | }
|
---|
5497 | }
|
---|
5498 | } // stash the component stack of an unwinding error until it is processed
|
---|
5499 |
|
---|
5500 |
|
---|
5501 | var lastBoundaryErrorComponentStackDev = null;
|
---|
5502 |
|
---|
5503 | function captureBoundaryErrorDetailsDev(boundary, error) {
|
---|
5504 | {
|
---|
5505 | var errorMessage;
|
---|
5506 |
|
---|
5507 | if (typeof error === 'string') {
|
---|
5508 | errorMessage = error;
|
---|
5509 | } else if (error && typeof error.message === 'string') {
|
---|
5510 | errorMessage = error.message;
|
---|
5511 | } else {
|
---|
5512 | // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
5513 | errorMessage = String(error);
|
---|
5514 | }
|
---|
5515 |
|
---|
5516 | var errorComponentStack = lastBoundaryErrorComponentStackDev || getCurrentStackInDEV();
|
---|
5517 | lastBoundaryErrorComponentStackDev = null;
|
---|
5518 | boundary.errorMessage = errorMessage;
|
---|
5519 | boundary.errorComponentStack = errorComponentStack;
|
---|
5520 | }
|
---|
5521 | }
|
---|
5522 |
|
---|
5523 | function logRecoverableError(request, error) {
|
---|
5524 | // If this callback errors, we intentionally let that error bubble up to become a fatal error
|
---|
5525 | // so that someone fixes the error reporting instead of hiding it.
|
---|
5526 | var errorDigest = request.onError(error);
|
---|
5527 |
|
---|
5528 | if (errorDigest != null && typeof errorDigest !== 'string') {
|
---|
5529 | // eslint-disable-next-line react-internal/prod-error-codes
|
---|
5530 | throw new Error("onError returned something with a type other than \"string\". onError should return a string and may return null or undefined but must not return anything else. It received something of type \"" + typeof errorDigest + "\" instead");
|
---|
5531 | }
|
---|
5532 |
|
---|
5533 | return errorDigest;
|
---|
5534 | }
|
---|
5535 |
|
---|
5536 | function fatalError(request, error) {
|
---|
5537 | // This is called outside error handling code such as if the root errors outside
|
---|
5538 | // a suspense boundary or if the root suspense boundary's fallback errors.
|
---|
5539 | // It's also called if React itself or its host configs errors.
|
---|
5540 | var onShellError = request.onShellError;
|
---|
5541 | onShellError(error);
|
---|
5542 | var onFatalError = request.onFatalError;
|
---|
5543 | onFatalError(error);
|
---|
5544 |
|
---|
5545 | if (request.destination !== null) {
|
---|
5546 | request.status = CLOSED;
|
---|
5547 | closeWithError(request.destination, error);
|
---|
5548 | } else {
|
---|
5549 | request.status = CLOSING;
|
---|
5550 | request.fatalError = error;
|
---|
5551 | }
|
---|
5552 | }
|
---|
5553 |
|
---|
5554 | function renderSuspenseBoundary(request, task, props) {
|
---|
5555 | pushBuiltInComponentStackInDEV(task, 'Suspense');
|
---|
5556 | var parentBoundary = task.blockedBoundary;
|
---|
5557 | var parentSegment = task.blockedSegment; // Each time we enter a suspense boundary, we split out into a new segment for
|
---|
5558 | // the fallback so that we can later replace that segment with the content.
|
---|
5559 | // This also lets us split out the main content even if it doesn't suspend,
|
---|
5560 | // in case it ends up generating a large subtree of content.
|
---|
5561 |
|
---|
5562 | var fallback = props.fallback;
|
---|
5563 | var content = props.children;
|
---|
5564 | var fallbackAbortSet = new Set();
|
---|
5565 | var newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
|
---|
5566 | var insertionIndex = parentSegment.chunks.length; // The children of the boundary segment is actually the fallback.
|
---|
5567 |
|
---|
5568 | var boundarySegment = createPendingSegment(request, insertionIndex, newBoundary, parentSegment.formatContext, // boundaries never require text embedding at their edges because comment nodes bound them
|
---|
5569 | false, false);
|
---|
5570 | parentSegment.children.push(boundarySegment); // The parentSegment has a child Segment at this index so we reset the lastPushedText marker on the parent
|
---|
5571 |
|
---|
5572 | parentSegment.lastPushedText = false; // This segment is the actual child content. We can start rendering that immediately.
|
---|
5573 |
|
---|
5574 | var contentRootSegment = createPendingSegment(request, 0, null, parentSegment.formatContext, // boundaries never require text embedding at their edges because comment nodes bound them
|
---|
5575 | false, false); // We mark the root segment as having its parent flushed. It's not really flushed but there is
|
---|
5576 | // no parent segment so there's nothing to wait on.
|
---|
5577 |
|
---|
5578 | contentRootSegment.parentFlushed = true; // Currently this is running synchronously. We could instead schedule this to pingedTasks.
|
---|
5579 | // I suspect that there might be some efficiency benefits from not creating the suspended task
|
---|
5580 | // and instead just using the stack if possible.
|
---|
5581 | // TODO: Call this directly instead of messing with saving and restoring contexts.
|
---|
5582 | // We can reuse the current context and task to render the content immediately without
|
---|
5583 | // context switching. We just need to temporarily switch which boundary and which segment
|
---|
5584 | // we're writing to. If something suspends, it'll spawn new suspended task with that context.
|
---|
5585 |
|
---|
5586 | task.blockedBoundary = newBoundary;
|
---|
5587 | task.blockedSegment = contentRootSegment;
|
---|
5588 |
|
---|
5589 | try {
|
---|
5590 | // We use the safe form because we don't handle suspending here. Only error handling.
|
---|
5591 | renderNode(request, task, content);
|
---|
5592 | pushSegmentFinale(contentRootSegment.chunks, request.responseState, contentRootSegment.lastPushedText, contentRootSegment.textEmbedded);
|
---|
5593 | contentRootSegment.status = COMPLETED;
|
---|
5594 | queueCompletedSegment(newBoundary, contentRootSegment);
|
---|
5595 |
|
---|
5596 | if (newBoundary.pendingTasks === 0) {
|
---|
5597 | // This must have been the last segment we were waiting on. This boundary is now complete.
|
---|
5598 | // Therefore we won't need the fallback. We early return so that we don't have to create
|
---|
5599 | // the fallback.
|
---|
5600 | popComponentStackInDEV(task);
|
---|
5601 | return;
|
---|
5602 | }
|
---|
5603 | } catch (error) {
|
---|
5604 | contentRootSegment.status = ERRORED;
|
---|
5605 | newBoundary.forceClientRender = true;
|
---|
5606 | newBoundary.errorDigest = logRecoverableError(request, error);
|
---|
5607 |
|
---|
5608 | {
|
---|
5609 | captureBoundaryErrorDetailsDev(newBoundary, error);
|
---|
5610 | } // We don't need to decrement any task numbers because we didn't spawn any new task.
|
---|
5611 | // We don't need to schedule any task because we know the parent has written yet.
|
---|
5612 | // We do need to fallthrough to create the fallback though.
|
---|
5613 |
|
---|
5614 | } finally {
|
---|
5615 | task.blockedBoundary = parentBoundary;
|
---|
5616 | task.blockedSegment = parentSegment;
|
---|
5617 | } // We create suspended task for the fallback because we don't want to actually work
|
---|
5618 | // on it yet in case we finish the main content, so we queue for later.
|
---|
5619 |
|
---|
5620 |
|
---|
5621 | var suspendedFallbackTask = createTask(request, fallback, parentBoundary, boundarySegment, fallbackAbortSet, task.legacyContext, task.context, task.treeContext);
|
---|
5622 |
|
---|
5623 | {
|
---|
5624 | suspendedFallbackTask.componentStack = task.componentStack;
|
---|
5625 | } // TODO: This should be queued at a separate lower priority queue so that we only work
|
---|
5626 | // on preparing fallbacks if we don't have any more main content to task on.
|
---|
5627 |
|
---|
5628 |
|
---|
5629 | request.pingedTasks.push(suspendedFallbackTask);
|
---|
5630 | popComponentStackInDEV(task);
|
---|
5631 | }
|
---|
5632 |
|
---|
5633 | function renderHostElement(request, task, type, props) {
|
---|
5634 | pushBuiltInComponentStackInDEV(task, type);
|
---|
5635 | var segment = task.blockedSegment;
|
---|
5636 | var children = pushStartInstance(segment.chunks, type, props, request.responseState, segment.formatContext);
|
---|
5637 | segment.lastPushedText = false;
|
---|
5638 | var prevContext = segment.formatContext;
|
---|
5639 | segment.formatContext = getChildFormatContext(prevContext, type, props); // We use the non-destructive form because if something suspends, we still
|
---|
5640 | // need to pop back up and finish this subtree of HTML.
|
---|
5641 |
|
---|
5642 | renderNode(request, task, children); // We expect that errors will fatal the whole task and that we don't need
|
---|
5643 | // the correct context. Therefore this is not in a finally.
|
---|
5644 |
|
---|
5645 | segment.formatContext = prevContext;
|
---|
5646 | pushEndInstance(segment.chunks, type);
|
---|
5647 | segment.lastPushedText = false;
|
---|
5648 | popComponentStackInDEV(task);
|
---|
5649 | }
|
---|
5650 |
|
---|
5651 | function shouldConstruct$1(Component) {
|
---|
5652 | return Component.prototype && Component.prototype.isReactComponent;
|
---|
5653 | }
|
---|
5654 |
|
---|
5655 | function renderWithHooks(request, task, Component, props, secondArg) {
|
---|
5656 | var componentIdentity = {};
|
---|
5657 | prepareToUseHooks(task, componentIdentity);
|
---|
5658 | var result = Component(props, secondArg);
|
---|
5659 | return finishHooks(Component, props, result, secondArg);
|
---|
5660 | }
|
---|
5661 |
|
---|
5662 | function finishClassComponent(request, task, instance, Component, props) {
|
---|
5663 | var nextChildren = instance.render();
|
---|
5664 |
|
---|
5665 | {
|
---|
5666 | if (instance.props !== props) {
|
---|
5667 | if (!didWarnAboutReassigningProps) {
|
---|
5668 | error('It looks like %s is reassigning its own `this.props` while rendering. ' + 'This is not supported and can lead to confusing bugs.', getComponentNameFromType(Component) || 'a component');
|
---|
5669 | }
|
---|
5670 |
|
---|
5671 | didWarnAboutReassigningProps = true;
|
---|
5672 | }
|
---|
5673 | }
|
---|
5674 |
|
---|
5675 | {
|
---|
5676 | var childContextTypes = Component.childContextTypes;
|
---|
5677 |
|
---|
5678 | if (childContextTypes !== null && childContextTypes !== undefined) {
|
---|
5679 | var previousContext = task.legacyContext;
|
---|
5680 | var mergedContext = processChildContext(instance, Component, previousContext, childContextTypes);
|
---|
5681 | task.legacyContext = mergedContext;
|
---|
5682 | renderNodeDestructive(request, task, nextChildren);
|
---|
5683 | task.legacyContext = previousContext;
|
---|
5684 | return;
|
---|
5685 | }
|
---|
5686 | }
|
---|
5687 |
|
---|
5688 | renderNodeDestructive(request, task, nextChildren);
|
---|
5689 | }
|
---|
5690 |
|
---|
5691 | function renderClassComponent(request, task, Component, props) {
|
---|
5692 | pushClassComponentStackInDEV(task, Component);
|
---|
5693 | var maskedContext = getMaskedContext(Component, task.legacyContext) ;
|
---|
5694 | var instance = constructClassInstance(Component, props, maskedContext);
|
---|
5695 | mountClassInstance(instance, Component, props, maskedContext);
|
---|
5696 | finishClassComponent(request, task, instance, Component, props);
|
---|
5697 | popComponentStackInDEV(task);
|
---|
5698 | }
|
---|
5699 |
|
---|
5700 | var didWarnAboutBadClass = {};
|
---|
5701 | var didWarnAboutModulePatternComponent = {};
|
---|
5702 | var didWarnAboutContextTypeOnFunctionComponent = {};
|
---|
5703 | var didWarnAboutGetDerivedStateOnFunctionComponent = {};
|
---|
5704 | var didWarnAboutReassigningProps = false;
|
---|
5705 | var didWarnAboutDefaultPropsOnFunctionComponent = {};
|
---|
5706 | var didWarnAboutGenerators = false;
|
---|
5707 | var didWarnAboutMaps = false;
|
---|
5708 | var hasWarnedAboutUsingContextAsConsumer = false; // This would typically be a function component but we still support module pattern
|
---|
5709 | // components for some reason.
|
---|
5710 |
|
---|
5711 | function renderIndeterminateComponent(request, task, Component, props) {
|
---|
5712 | var legacyContext;
|
---|
5713 |
|
---|
5714 | {
|
---|
5715 | legacyContext = getMaskedContext(Component, task.legacyContext);
|
---|
5716 | }
|
---|
5717 |
|
---|
5718 | pushFunctionComponentStackInDEV(task, Component);
|
---|
5719 |
|
---|
5720 | {
|
---|
5721 | if (Component.prototype && typeof Component.prototype.render === 'function') {
|
---|
5722 | var componentName = getComponentNameFromType(Component) || 'Unknown';
|
---|
5723 |
|
---|
5724 | if (!didWarnAboutBadClass[componentName]) {
|
---|
5725 | error("The <%s /> component appears to have a render method, but doesn't extend React.Component. " + 'This is likely to cause errors. Change %s to extend React.Component instead.', componentName, componentName);
|
---|
5726 |
|
---|
5727 | didWarnAboutBadClass[componentName] = true;
|
---|
5728 | }
|
---|
5729 | }
|
---|
5730 | }
|
---|
5731 |
|
---|
5732 | var value = renderWithHooks(request, task, Component, props, legacyContext);
|
---|
5733 | var hasId = checkDidRenderIdHook();
|
---|
5734 |
|
---|
5735 | {
|
---|
5736 | // Support for module components is deprecated and is removed behind a flag.
|
---|
5737 | // Whether or not it would crash later, we want to show a good message in DEV first.
|
---|
5738 | if (typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
|
---|
5739 | var _componentName = getComponentNameFromType(Component) || 'Unknown';
|
---|
5740 |
|
---|
5741 | if (!didWarnAboutModulePatternComponent[_componentName]) {
|
---|
5742 | error('The <%s /> component appears to be a function component that returns a class instance. ' + 'Change %s to a class that extends React.Component instead. ' + "If you can't use a class try assigning the prototype on the function as a workaround. " + "`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " + 'cannot be called with `new` by React.', _componentName, _componentName, _componentName);
|
---|
5743 |
|
---|
5744 | didWarnAboutModulePatternComponent[_componentName] = true;
|
---|
5745 | }
|
---|
5746 | }
|
---|
5747 | }
|
---|
5748 |
|
---|
5749 | if ( // Run these checks in production only if the flag is off.
|
---|
5750 | // Eventually we'll delete this branch altogether.
|
---|
5751 | typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
|
---|
5752 | {
|
---|
5753 | var _componentName2 = getComponentNameFromType(Component) || 'Unknown';
|
---|
5754 |
|
---|
5755 | if (!didWarnAboutModulePatternComponent[_componentName2]) {
|
---|
5756 | error('The <%s /> component appears to be a function component that returns a class instance. ' + 'Change %s to a class that extends React.Component instead. ' + "If you can't use a class try assigning the prototype on the function as a workaround. " + "`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " + 'cannot be called with `new` by React.', _componentName2, _componentName2, _componentName2);
|
---|
5757 |
|
---|
5758 | didWarnAboutModulePatternComponent[_componentName2] = true;
|
---|
5759 | }
|
---|
5760 | }
|
---|
5761 |
|
---|
5762 | mountClassInstance(value, Component, props, legacyContext);
|
---|
5763 | finishClassComponent(request, task, value, Component, props);
|
---|
5764 | } else {
|
---|
5765 |
|
---|
5766 | {
|
---|
5767 | validateFunctionComponentInDev(Component);
|
---|
5768 | } // We're now successfully past this task, and we don't have to pop back to
|
---|
5769 | // the previous task every again, so we can use the destructive recursive form.
|
---|
5770 |
|
---|
5771 |
|
---|
5772 | if (hasId) {
|
---|
5773 | // This component materialized an id. We treat this as its own level, with
|
---|
5774 | // a single "child" slot.
|
---|
5775 | var prevTreeContext = task.treeContext;
|
---|
5776 | var totalChildren = 1;
|
---|
5777 | var index = 0;
|
---|
5778 | task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
|
---|
5779 |
|
---|
5780 | try {
|
---|
5781 | renderNodeDestructive(request, task, value);
|
---|
5782 | } finally {
|
---|
5783 | task.treeContext = prevTreeContext;
|
---|
5784 | }
|
---|
5785 | } else {
|
---|
5786 | renderNodeDestructive(request, task, value);
|
---|
5787 | }
|
---|
5788 | }
|
---|
5789 |
|
---|
5790 | popComponentStackInDEV(task);
|
---|
5791 | }
|
---|
5792 |
|
---|
5793 | function validateFunctionComponentInDev(Component) {
|
---|
5794 | {
|
---|
5795 | if (Component) {
|
---|
5796 | if (Component.childContextTypes) {
|
---|
5797 | error('%s(...): childContextTypes cannot be defined on a function component.', Component.displayName || Component.name || 'Component');
|
---|
5798 | }
|
---|
5799 | }
|
---|
5800 |
|
---|
5801 | if ( Component.defaultProps !== undefined) {
|
---|
5802 | var componentName = getComponentNameFromType(Component) || 'Unknown';
|
---|
5803 |
|
---|
5804 | if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
|
---|
5805 | error('%s: Support for defaultProps will be removed from function components ' + 'in a future major release. Use JavaScript default parameters instead.', componentName);
|
---|
5806 |
|
---|
5807 | didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
|
---|
5808 | }
|
---|
5809 | }
|
---|
5810 |
|
---|
5811 | if (typeof Component.getDerivedStateFromProps === 'function') {
|
---|
5812 | var _componentName3 = getComponentNameFromType(Component) || 'Unknown';
|
---|
5813 |
|
---|
5814 | if (!didWarnAboutGetDerivedStateOnFunctionComponent[_componentName3]) {
|
---|
5815 | error('%s: Function components do not support getDerivedStateFromProps.', _componentName3);
|
---|
5816 |
|
---|
5817 | didWarnAboutGetDerivedStateOnFunctionComponent[_componentName3] = true;
|
---|
5818 | }
|
---|
5819 | }
|
---|
5820 |
|
---|
5821 | if (typeof Component.contextType === 'object' && Component.contextType !== null) {
|
---|
5822 | var _componentName4 = getComponentNameFromType(Component) || 'Unknown';
|
---|
5823 |
|
---|
5824 | if (!didWarnAboutContextTypeOnFunctionComponent[_componentName4]) {
|
---|
5825 | error('%s: Function components do not support contextType.', _componentName4);
|
---|
5826 |
|
---|
5827 | didWarnAboutContextTypeOnFunctionComponent[_componentName4] = true;
|
---|
5828 | }
|
---|
5829 | }
|
---|
5830 | }
|
---|
5831 | }
|
---|
5832 |
|
---|
5833 | function resolveDefaultProps(Component, baseProps) {
|
---|
5834 | if (Component && Component.defaultProps) {
|
---|
5835 | // Resolve default props. Taken from ReactElement
|
---|
5836 | var props = assign({}, baseProps);
|
---|
5837 | var defaultProps = Component.defaultProps;
|
---|
5838 |
|
---|
5839 | for (var propName in defaultProps) {
|
---|
5840 | if (props[propName] === undefined) {
|
---|
5841 | props[propName] = defaultProps[propName];
|
---|
5842 | }
|
---|
5843 | }
|
---|
5844 |
|
---|
5845 | return props;
|
---|
5846 | }
|
---|
5847 |
|
---|
5848 | return baseProps;
|
---|
5849 | }
|
---|
5850 |
|
---|
5851 | function renderForwardRef(request, task, type, props, ref) {
|
---|
5852 | pushFunctionComponentStackInDEV(task, type.render);
|
---|
5853 | var children = renderWithHooks(request, task, type.render, props, ref);
|
---|
5854 | var hasId = checkDidRenderIdHook();
|
---|
5855 |
|
---|
5856 | if (hasId) {
|
---|
5857 | // This component materialized an id. We treat this as its own level, with
|
---|
5858 | // a single "child" slot.
|
---|
5859 | var prevTreeContext = task.treeContext;
|
---|
5860 | var totalChildren = 1;
|
---|
5861 | var index = 0;
|
---|
5862 | task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
|
---|
5863 |
|
---|
5864 | try {
|
---|
5865 | renderNodeDestructive(request, task, children);
|
---|
5866 | } finally {
|
---|
5867 | task.treeContext = prevTreeContext;
|
---|
5868 | }
|
---|
5869 | } else {
|
---|
5870 | renderNodeDestructive(request, task, children);
|
---|
5871 | }
|
---|
5872 |
|
---|
5873 | popComponentStackInDEV(task);
|
---|
5874 | }
|
---|
5875 |
|
---|
5876 | function renderMemo(request, task, type, props, ref) {
|
---|
5877 | var innerType = type.type;
|
---|
5878 | var resolvedProps = resolveDefaultProps(innerType, props);
|
---|
5879 | renderElement(request, task, innerType, resolvedProps, ref);
|
---|
5880 | }
|
---|
5881 |
|
---|
5882 | function renderContextConsumer(request, task, context, props) {
|
---|
5883 | // The logic below for Context differs depending on PROD or DEV mode. In
|
---|
5884 | // DEV mode, we create a separate object for Context.Consumer that acts
|
---|
5885 | // like a proxy to Context. This proxy object adds unnecessary code in PROD
|
---|
5886 | // so we use the old behaviour (Context.Consumer references Context) to
|
---|
5887 | // reduce size and overhead. The separate object references context via
|
---|
5888 | // a property called "_context", which also gives us the ability to check
|
---|
5889 | // in DEV mode if this property exists or not and warn if it does not.
|
---|
5890 | {
|
---|
5891 | if (context._context === undefined) {
|
---|
5892 | // This may be because it's a Context (rather than a Consumer).
|
---|
5893 | // Or it may be because it's older React where they're the same thing.
|
---|
5894 | // We only want to warn if we're sure it's a new React.
|
---|
5895 | if (context !== context.Consumer) {
|
---|
5896 | if (!hasWarnedAboutUsingContextAsConsumer) {
|
---|
5897 | hasWarnedAboutUsingContextAsConsumer = true;
|
---|
5898 |
|
---|
5899 | error('Rendering <Context> directly is not supported and will be removed in ' + 'a future major release. Did you mean to render <Context.Consumer> instead?');
|
---|
5900 | }
|
---|
5901 | }
|
---|
5902 | } else {
|
---|
5903 | context = context._context;
|
---|
5904 | }
|
---|
5905 | }
|
---|
5906 |
|
---|
5907 | var render = props.children;
|
---|
5908 |
|
---|
5909 | {
|
---|
5910 | if (typeof render !== 'function') {
|
---|
5911 | error('A context consumer was rendered with multiple children, or a child ' + "that isn't a function. A context consumer expects a single child " + 'that is a function. If you did pass a function, make sure there ' + 'is no trailing or leading whitespace around it.');
|
---|
5912 | }
|
---|
5913 | }
|
---|
5914 |
|
---|
5915 | var newValue = readContext(context);
|
---|
5916 | var newChildren = render(newValue);
|
---|
5917 | renderNodeDestructive(request, task, newChildren);
|
---|
5918 | }
|
---|
5919 |
|
---|
5920 | function renderContextProvider(request, task, type, props) {
|
---|
5921 | var context = type._context;
|
---|
5922 | var value = props.value;
|
---|
5923 | var children = props.children;
|
---|
5924 | var prevSnapshot;
|
---|
5925 |
|
---|
5926 | {
|
---|
5927 | prevSnapshot = task.context;
|
---|
5928 | }
|
---|
5929 |
|
---|
5930 | task.context = pushProvider(context, value);
|
---|
5931 | renderNodeDestructive(request, task, children);
|
---|
5932 | task.context = popProvider(context);
|
---|
5933 |
|
---|
5934 | {
|
---|
5935 | if (prevSnapshot !== task.context) {
|
---|
5936 | error('Popping the context provider did not return back to the original snapshot. This is a bug in React.');
|
---|
5937 | }
|
---|
5938 | }
|
---|
5939 | }
|
---|
5940 |
|
---|
5941 | function renderLazyComponent(request, task, lazyComponent, props, ref) {
|
---|
5942 | pushBuiltInComponentStackInDEV(task, 'Lazy');
|
---|
5943 | var payload = lazyComponent._payload;
|
---|
5944 | var init = lazyComponent._init;
|
---|
5945 | var Component = init(payload);
|
---|
5946 | var resolvedProps = resolveDefaultProps(Component, props);
|
---|
5947 | renderElement(request, task, Component, resolvedProps, ref);
|
---|
5948 | popComponentStackInDEV(task);
|
---|
5949 | }
|
---|
5950 |
|
---|
5951 | function renderElement(request, task, type, props, ref) {
|
---|
5952 | if (typeof type === 'function') {
|
---|
5953 | if (shouldConstruct$1(type)) {
|
---|
5954 | renderClassComponent(request, task, type, props);
|
---|
5955 | return;
|
---|
5956 | } else {
|
---|
5957 | renderIndeterminateComponent(request, task, type, props);
|
---|
5958 | return;
|
---|
5959 | }
|
---|
5960 | }
|
---|
5961 |
|
---|
5962 | if (typeof type === 'string') {
|
---|
5963 | renderHostElement(request, task, type, props);
|
---|
5964 | return;
|
---|
5965 | }
|
---|
5966 |
|
---|
5967 | switch (type) {
|
---|
5968 | // TODO: LegacyHidden acts the same as a fragment. This only works
|
---|
5969 | // because we currently assume that every instance of LegacyHidden is
|
---|
5970 | // accompanied by a host component wrapper. In the hidden mode, the host
|
---|
5971 | // component is given a `hidden` attribute, which ensures that the
|
---|
5972 | // initial HTML is not visible. To support the use of LegacyHidden as a
|
---|
5973 | // true fragment, without an extra DOM node, we would have to hide the
|
---|
5974 | // initial HTML in some other way.
|
---|
5975 | // TODO: Add REACT_OFFSCREEN_TYPE here too with the same capability.
|
---|
5976 | case REACT_LEGACY_HIDDEN_TYPE:
|
---|
5977 | case REACT_DEBUG_TRACING_MODE_TYPE:
|
---|
5978 | case REACT_STRICT_MODE_TYPE:
|
---|
5979 | case REACT_PROFILER_TYPE:
|
---|
5980 | case REACT_FRAGMENT_TYPE:
|
---|
5981 | {
|
---|
5982 | renderNodeDestructive(request, task, props.children);
|
---|
5983 | return;
|
---|
5984 | }
|
---|
5985 |
|
---|
5986 | case REACT_SUSPENSE_LIST_TYPE:
|
---|
5987 | {
|
---|
5988 | pushBuiltInComponentStackInDEV(task, 'SuspenseList'); // TODO: SuspenseList should control the boundaries.
|
---|
5989 |
|
---|
5990 | renderNodeDestructive(request, task, props.children);
|
---|
5991 | popComponentStackInDEV(task);
|
---|
5992 | return;
|
---|
5993 | }
|
---|
5994 |
|
---|
5995 | case REACT_SCOPE_TYPE:
|
---|
5996 | {
|
---|
5997 |
|
---|
5998 | throw new Error('ReactDOMServer does not yet support scope components.');
|
---|
5999 | }
|
---|
6000 | // eslint-disable-next-line-no-fallthrough
|
---|
6001 |
|
---|
6002 | case REACT_SUSPENSE_TYPE:
|
---|
6003 | {
|
---|
6004 | {
|
---|
6005 | renderSuspenseBoundary(request, task, props);
|
---|
6006 | }
|
---|
6007 |
|
---|
6008 | return;
|
---|
6009 | }
|
---|
6010 | }
|
---|
6011 |
|
---|
6012 | if (typeof type === 'object' && type !== null) {
|
---|
6013 | switch (type.$$typeof) {
|
---|
6014 | case REACT_FORWARD_REF_TYPE:
|
---|
6015 | {
|
---|
6016 | renderForwardRef(request, task, type, props, ref);
|
---|
6017 | return;
|
---|
6018 | }
|
---|
6019 |
|
---|
6020 | case REACT_MEMO_TYPE:
|
---|
6021 | {
|
---|
6022 | renderMemo(request, task, type, props, ref);
|
---|
6023 | return;
|
---|
6024 | }
|
---|
6025 |
|
---|
6026 | case REACT_PROVIDER_TYPE:
|
---|
6027 | {
|
---|
6028 | renderContextProvider(request, task, type, props);
|
---|
6029 | return;
|
---|
6030 | }
|
---|
6031 |
|
---|
6032 | case REACT_CONTEXT_TYPE:
|
---|
6033 | {
|
---|
6034 | renderContextConsumer(request, task, type, props);
|
---|
6035 | return;
|
---|
6036 | }
|
---|
6037 |
|
---|
6038 | case REACT_LAZY_TYPE:
|
---|
6039 | {
|
---|
6040 | renderLazyComponent(request, task, type, props);
|
---|
6041 | return;
|
---|
6042 | }
|
---|
6043 | }
|
---|
6044 | }
|
---|
6045 |
|
---|
6046 | var info = '';
|
---|
6047 |
|
---|
6048 | {
|
---|
6049 | if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
|
---|
6050 | info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and " + 'named imports.';
|
---|
6051 | }
|
---|
6052 | }
|
---|
6053 |
|
---|
6054 | throw new Error('Element type is invalid: expected a string (for built-in ' + 'components) or a class/function (for composite components) ' + ("but got: " + (type == null ? type : typeof type) + "." + info));
|
---|
6055 | }
|
---|
6056 |
|
---|
6057 | function validateIterable(iterable, iteratorFn) {
|
---|
6058 | {
|
---|
6059 | // We don't support rendering Generators because it's a mutation.
|
---|
6060 | // See https://github.com/facebook/react/issues/12995
|
---|
6061 | if (typeof Symbol === 'function' && // $FlowFixMe Flow doesn't know about toStringTag
|
---|
6062 | iterable[Symbol.toStringTag] === 'Generator') {
|
---|
6063 | if (!didWarnAboutGenerators) {
|
---|
6064 | error('Using Generators as children is unsupported and will likely yield ' + 'unexpected results because enumerating a generator mutates it. ' + 'You may convert it to an array with `Array.from()` or the ' + '`[...spread]` operator before rendering. Keep in mind ' + 'you might need to polyfill these features for older browsers.');
|
---|
6065 | }
|
---|
6066 |
|
---|
6067 | didWarnAboutGenerators = true;
|
---|
6068 | } // Warn about using Maps as children
|
---|
6069 |
|
---|
6070 |
|
---|
6071 | if (iterable.entries === iteratorFn) {
|
---|
6072 | if (!didWarnAboutMaps) {
|
---|
6073 | error('Using Maps as children is not supported. ' + 'Use an array of keyed ReactElements instead.');
|
---|
6074 | }
|
---|
6075 |
|
---|
6076 | didWarnAboutMaps = true;
|
---|
6077 | }
|
---|
6078 | }
|
---|
6079 | }
|
---|
6080 |
|
---|
6081 | function renderNodeDestructive(request, task, node) {
|
---|
6082 | {
|
---|
6083 | // In Dev we wrap renderNodeDestructiveImpl in a try / catch so we can capture
|
---|
6084 | // a component stack at the right place in the tree. We don't do this in renderNode
|
---|
6085 | // becuase it is not called at every layer of the tree and we may lose frames
|
---|
6086 | try {
|
---|
6087 | return renderNodeDestructiveImpl(request, task, node);
|
---|
6088 | } catch (x) {
|
---|
6089 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') ; else {
|
---|
6090 | // This is an error, stash the component stack if it is null.
|
---|
6091 | lastBoundaryErrorComponentStackDev = lastBoundaryErrorComponentStackDev !== null ? lastBoundaryErrorComponentStackDev : getCurrentStackInDEV();
|
---|
6092 | } // rethrow so normal suspense logic can handle thrown value accordingly
|
---|
6093 |
|
---|
6094 |
|
---|
6095 | throw x;
|
---|
6096 | }
|
---|
6097 | }
|
---|
6098 | } // This function by it self renders a node and consumes the task by mutating it
|
---|
6099 | // to update the current execution state.
|
---|
6100 |
|
---|
6101 |
|
---|
6102 | function renderNodeDestructiveImpl(request, task, node) {
|
---|
6103 | // Stash the node we're working on. We'll pick up from this task in case
|
---|
6104 | // something suspends.
|
---|
6105 | task.node = node; // Handle object types
|
---|
6106 |
|
---|
6107 | if (typeof node === 'object' && node !== null) {
|
---|
6108 | switch (node.$$typeof) {
|
---|
6109 | case REACT_ELEMENT_TYPE:
|
---|
6110 | {
|
---|
6111 | var element = node;
|
---|
6112 | var type = element.type;
|
---|
6113 | var props = element.props;
|
---|
6114 | var ref = element.ref;
|
---|
6115 | renderElement(request, task, type, props, ref);
|
---|
6116 | return;
|
---|
6117 | }
|
---|
6118 |
|
---|
6119 | case REACT_PORTAL_TYPE:
|
---|
6120 | throw new Error('Portals are not currently supported by the server renderer. ' + 'Render them conditionally so that they only appear on the client render.');
|
---|
6121 | // eslint-disable-next-line-no-fallthrough
|
---|
6122 |
|
---|
6123 | case REACT_LAZY_TYPE:
|
---|
6124 | {
|
---|
6125 | var lazyNode = node;
|
---|
6126 | var payload = lazyNode._payload;
|
---|
6127 | var init = lazyNode._init;
|
---|
6128 | var resolvedNode;
|
---|
6129 |
|
---|
6130 | {
|
---|
6131 | try {
|
---|
6132 | resolvedNode = init(payload);
|
---|
6133 | } catch (x) {
|
---|
6134 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
|
---|
6135 | // this Lazy initializer is suspending. push a temporary frame onto the stack so it can be
|
---|
6136 | // popped off in spawnNewSuspendedTask. This aligns stack behavior between Lazy in element position
|
---|
6137 | // vs Component position. We do not want the frame for Errors so we exclusively do this in
|
---|
6138 | // the wakeable branch
|
---|
6139 | pushBuiltInComponentStackInDEV(task, 'Lazy');
|
---|
6140 | }
|
---|
6141 |
|
---|
6142 | throw x;
|
---|
6143 | }
|
---|
6144 | }
|
---|
6145 |
|
---|
6146 | renderNodeDestructive(request, task, resolvedNode);
|
---|
6147 | return;
|
---|
6148 | }
|
---|
6149 | }
|
---|
6150 |
|
---|
6151 | if (isArray(node)) {
|
---|
6152 | renderChildrenArray(request, task, node);
|
---|
6153 | return;
|
---|
6154 | }
|
---|
6155 |
|
---|
6156 | var iteratorFn = getIteratorFn(node);
|
---|
6157 |
|
---|
6158 | if (iteratorFn) {
|
---|
6159 | {
|
---|
6160 | validateIterable(node, iteratorFn);
|
---|
6161 | }
|
---|
6162 |
|
---|
6163 | var iterator = iteratorFn.call(node);
|
---|
6164 |
|
---|
6165 | if (iterator) {
|
---|
6166 | // We need to know how many total children are in this set, so that we
|
---|
6167 | // can allocate enough id slots to acommodate them. So we must exhaust
|
---|
6168 | // the iterator before we start recursively rendering the children.
|
---|
6169 | // TODO: This is not great but I think it's inherent to the id
|
---|
6170 | // generation algorithm.
|
---|
6171 | var step = iterator.next(); // If there are not entries, we need to push an empty so we start by checking that.
|
---|
6172 |
|
---|
6173 | if (!step.done) {
|
---|
6174 | var children = [];
|
---|
6175 |
|
---|
6176 | do {
|
---|
6177 | children.push(step.value);
|
---|
6178 | step = iterator.next();
|
---|
6179 | } while (!step.done);
|
---|
6180 |
|
---|
6181 | renderChildrenArray(request, task, children);
|
---|
6182 | return;
|
---|
6183 | }
|
---|
6184 |
|
---|
6185 | return;
|
---|
6186 | }
|
---|
6187 | }
|
---|
6188 |
|
---|
6189 | var childString = Object.prototype.toString.call(node);
|
---|
6190 | throw new Error("Objects are not valid as a React child (found: " + (childString === '[object Object]' ? 'object with keys {' + Object.keys(node).join(', ') + '}' : childString) + "). " + 'If you meant to render a collection of children, use an array ' + 'instead.');
|
---|
6191 | }
|
---|
6192 |
|
---|
6193 | if (typeof node === 'string') {
|
---|
6194 | var segment = task.blockedSegment;
|
---|
6195 | segment.lastPushedText = pushTextInstance(task.blockedSegment.chunks, node, request.responseState, segment.lastPushedText);
|
---|
6196 | return;
|
---|
6197 | }
|
---|
6198 |
|
---|
6199 | if (typeof node === 'number') {
|
---|
6200 | var _segment = task.blockedSegment;
|
---|
6201 | _segment.lastPushedText = pushTextInstance(task.blockedSegment.chunks, '' + node, request.responseState, _segment.lastPushedText);
|
---|
6202 | return;
|
---|
6203 | }
|
---|
6204 |
|
---|
6205 | {
|
---|
6206 | if (typeof node === 'function') {
|
---|
6207 | error('Functions are not valid as a React child. This may happen if ' + 'you return a Component instead of <Component /> from render. ' + 'Or maybe you meant to call this function rather than return it.');
|
---|
6208 | }
|
---|
6209 | }
|
---|
6210 | }
|
---|
6211 |
|
---|
6212 | function renderChildrenArray(request, task, children) {
|
---|
6213 | var totalChildren = children.length;
|
---|
6214 |
|
---|
6215 | for (var i = 0; i < totalChildren; i++) {
|
---|
6216 | var prevTreeContext = task.treeContext;
|
---|
6217 | task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
|
---|
6218 |
|
---|
6219 | try {
|
---|
6220 | // We need to use the non-destructive form so that we can safely pop back
|
---|
6221 | // up and render the sibling if something suspends.
|
---|
6222 | renderNode(request, task, children[i]);
|
---|
6223 | } finally {
|
---|
6224 | task.treeContext = prevTreeContext;
|
---|
6225 | }
|
---|
6226 | }
|
---|
6227 | }
|
---|
6228 |
|
---|
6229 | function spawnNewSuspendedTask(request, task, x) {
|
---|
6230 | // Something suspended, we'll need to create a new segment and resolve it later.
|
---|
6231 | var segment = task.blockedSegment;
|
---|
6232 | var insertionIndex = segment.chunks.length;
|
---|
6233 | var newSegment = createPendingSegment(request, insertionIndex, null, segment.formatContext, // Adopt the parent segment's leading text embed
|
---|
6234 | segment.lastPushedText, // Assume we are text embedded at the trailing edge
|
---|
6235 | true);
|
---|
6236 | segment.children.push(newSegment); // Reset lastPushedText for current Segment since the new Segment "consumed" it
|
---|
6237 |
|
---|
6238 | segment.lastPushedText = false;
|
---|
6239 | var newTask = createTask(request, task.node, task.blockedBoundary, newSegment, task.abortSet, task.legacyContext, task.context, task.treeContext);
|
---|
6240 |
|
---|
6241 | {
|
---|
6242 | if (task.componentStack !== null) {
|
---|
6243 | // We pop one task off the stack because the node that suspended will be tried again,
|
---|
6244 | // which will add it back onto the stack.
|
---|
6245 | newTask.componentStack = task.componentStack.parent;
|
---|
6246 | }
|
---|
6247 | }
|
---|
6248 |
|
---|
6249 | var ping = newTask.ping;
|
---|
6250 | x.then(ping, ping);
|
---|
6251 | } // This is a non-destructive form of rendering a node. If it suspends it spawns
|
---|
6252 | // a new task and restores the context of this task to what it was before.
|
---|
6253 |
|
---|
6254 |
|
---|
6255 | function renderNode(request, task, node) {
|
---|
6256 | // TODO: Store segment.children.length here and reset it in case something
|
---|
6257 | // suspended partially through writing something.
|
---|
6258 | // Snapshot the current context in case something throws to interrupt the
|
---|
6259 | // process.
|
---|
6260 | var previousFormatContext = task.blockedSegment.formatContext;
|
---|
6261 | var previousLegacyContext = task.legacyContext;
|
---|
6262 | var previousContext = task.context;
|
---|
6263 | var previousComponentStack = null;
|
---|
6264 |
|
---|
6265 | {
|
---|
6266 | previousComponentStack = task.componentStack;
|
---|
6267 | }
|
---|
6268 |
|
---|
6269 | try {
|
---|
6270 | return renderNodeDestructive(request, task, node);
|
---|
6271 | } catch (x) {
|
---|
6272 | resetHooksState();
|
---|
6273 |
|
---|
6274 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
|
---|
6275 | spawnNewSuspendedTask(request, task, x); // Restore the context. We assume that this will be restored by the inner
|
---|
6276 | // functions in case nothing throws so we don't use "finally" here.
|
---|
6277 |
|
---|
6278 | task.blockedSegment.formatContext = previousFormatContext;
|
---|
6279 | task.legacyContext = previousLegacyContext;
|
---|
6280 | task.context = previousContext; // Restore all active ReactContexts to what they were before.
|
---|
6281 |
|
---|
6282 | switchContext(previousContext);
|
---|
6283 |
|
---|
6284 | {
|
---|
6285 | task.componentStack = previousComponentStack;
|
---|
6286 | }
|
---|
6287 |
|
---|
6288 | return;
|
---|
6289 | } else {
|
---|
6290 | // Restore the context. We assume that this will be restored by the inner
|
---|
6291 | // functions in case nothing throws so we don't use "finally" here.
|
---|
6292 | task.blockedSegment.formatContext = previousFormatContext;
|
---|
6293 | task.legacyContext = previousLegacyContext;
|
---|
6294 | task.context = previousContext; // Restore all active ReactContexts to what they were before.
|
---|
6295 |
|
---|
6296 | switchContext(previousContext);
|
---|
6297 |
|
---|
6298 | {
|
---|
6299 | task.componentStack = previousComponentStack;
|
---|
6300 | } // We assume that we don't need the correct context.
|
---|
6301 | // Let's terminate the rest of the tree and don't render any siblings.
|
---|
6302 |
|
---|
6303 |
|
---|
6304 | throw x;
|
---|
6305 | }
|
---|
6306 | }
|
---|
6307 | }
|
---|
6308 |
|
---|
6309 | function erroredTask(request, boundary, segment, error) {
|
---|
6310 | // Report the error to a global handler.
|
---|
6311 | var errorDigest = logRecoverableError(request, error);
|
---|
6312 |
|
---|
6313 | if (boundary === null) {
|
---|
6314 | fatalError(request, error);
|
---|
6315 | } else {
|
---|
6316 | boundary.pendingTasks--;
|
---|
6317 |
|
---|
6318 | if (!boundary.forceClientRender) {
|
---|
6319 | boundary.forceClientRender = true;
|
---|
6320 | boundary.errorDigest = errorDigest;
|
---|
6321 |
|
---|
6322 | {
|
---|
6323 | captureBoundaryErrorDetailsDev(boundary, error);
|
---|
6324 | } // Regardless of what happens next, this boundary won't be displayed,
|
---|
6325 | // so we can flush it, if the parent already flushed.
|
---|
6326 |
|
---|
6327 |
|
---|
6328 | if (boundary.parentFlushed) {
|
---|
6329 | // We don't have a preference where in the queue this goes since it's likely
|
---|
6330 | // to error on the client anyway. However, intentionally client-rendered
|
---|
6331 | // boundaries should be flushed earlier so that they can start on the client.
|
---|
6332 | // We reuse the same queue for errors.
|
---|
6333 | request.clientRenderedBoundaries.push(boundary);
|
---|
6334 | }
|
---|
6335 | }
|
---|
6336 | }
|
---|
6337 |
|
---|
6338 | request.allPendingTasks--;
|
---|
6339 |
|
---|
6340 | if (request.allPendingTasks === 0) {
|
---|
6341 | var onAllReady = request.onAllReady;
|
---|
6342 | onAllReady();
|
---|
6343 | }
|
---|
6344 | }
|
---|
6345 |
|
---|
6346 | function abortTaskSoft(task) {
|
---|
6347 | // This aborts task without aborting the parent boundary that it blocks.
|
---|
6348 | // It's used for when we didn't need this task to complete the tree.
|
---|
6349 | // If task was needed, then it should use abortTask instead.
|
---|
6350 | var request = this;
|
---|
6351 | var boundary = task.blockedBoundary;
|
---|
6352 | var segment = task.blockedSegment;
|
---|
6353 | segment.status = ABORTED;
|
---|
6354 | finishedTask(request, boundary, segment);
|
---|
6355 | }
|
---|
6356 |
|
---|
6357 | function abortTask(task, request, reason) {
|
---|
6358 | // This aborts the task and aborts the parent that it blocks, putting it into
|
---|
6359 | // client rendered mode.
|
---|
6360 | var boundary = task.blockedBoundary;
|
---|
6361 | var segment = task.blockedSegment;
|
---|
6362 | segment.status = ABORTED;
|
---|
6363 |
|
---|
6364 | if (boundary === null) {
|
---|
6365 | request.allPendingTasks--; // We didn't complete the root so we have nothing to show. We can close
|
---|
6366 | // the request;
|
---|
6367 |
|
---|
6368 | if (request.status !== CLOSED) {
|
---|
6369 | request.status = CLOSED;
|
---|
6370 |
|
---|
6371 | if (request.destination !== null) {
|
---|
6372 | close(request.destination);
|
---|
6373 | }
|
---|
6374 | }
|
---|
6375 | } else {
|
---|
6376 | boundary.pendingTasks--;
|
---|
6377 |
|
---|
6378 | if (!boundary.forceClientRender) {
|
---|
6379 | boundary.forceClientRender = true;
|
---|
6380 |
|
---|
6381 | var _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason;
|
---|
6382 |
|
---|
6383 | boundary.errorDigest = request.onError(_error);
|
---|
6384 |
|
---|
6385 | {
|
---|
6386 | var errorPrefix = 'The server did not finish this Suspense boundary: ';
|
---|
6387 |
|
---|
6388 | if (_error && typeof _error.message === 'string') {
|
---|
6389 | _error = errorPrefix + _error.message;
|
---|
6390 | } else {
|
---|
6391 | // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
6392 | _error = errorPrefix + String(_error);
|
---|
6393 | }
|
---|
6394 |
|
---|
6395 | var previousTaskInDev = currentTaskInDEV;
|
---|
6396 | currentTaskInDEV = task;
|
---|
6397 |
|
---|
6398 | try {
|
---|
6399 | captureBoundaryErrorDetailsDev(boundary, _error);
|
---|
6400 | } finally {
|
---|
6401 | currentTaskInDEV = previousTaskInDev;
|
---|
6402 | }
|
---|
6403 | }
|
---|
6404 |
|
---|
6405 | if (boundary.parentFlushed) {
|
---|
6406 | request.clientRenderedBoundaries.push(boundary);
|
---|
6407 | }
|
---|
6408 | } // If this boundary was still pending then we haven't already cancelled its fallbacks.
|
---|
6409 | // We'll need to abort the fallbacks, which will also error that parent boundary.
|
---|
6410 |
|
---|
6411 |
|
---|
6412 | boundary.fallbackAbortableTasks.forEach(function (fallbackTask) {
|
---|
6413 | return abortTask(fallbackTask, request, reason);
|
---|
6414 | });
|
---|
6415 | boundary.fallbackAbortableTasks.clear();
|
---|
6416 | request.allPendingTasks--;
|
---|
6417 |
|
---|
6418 | if (request.allPendingTasks === 0) {
|
---|
6419 | var onAllReady = request.onAllReady;
|
---|
6420 | onAllReady();
|
---|
6421 | }
|
---|
6422 | }
|
---|
6423 | }
|
---|
6424 |
|
---|
6425 | function queueCompletedSegment(boundary, segment) {
|
---|
6426 | if (segment.chunks.length === 0 && segment.children.length === 1 && segment.children[0].boundary === null) {
|
---|
6427 | // This is an empty segment. There's nothing to write, so we can instead transfer the ID
|
---|
6428 | // to the child. That way any existing references point to the child.
|
---|
6429 | var childSegment = segment.children[0];
|
---|
6430 | childSegment.id = segment.id;
|
---|
6431 | childSegment.parentFlushed = true;
|
---|
6432 |
|
---|
6433 | if (childSegment.status === COMPLETED) {
|
---|
6434 | queueCompletedSegment(boundary, childSegment);
|
---|
6435 | }
|
---|
6436 | } else {
|
---|
6437 | var completedSegments = boundary.completedSegments;
|
---|
6438 | completedSegments.push(segment);
|
---|
6439 | }
|
---|
6440 | }
|
---|
6441 |
|
---|
6442 | function finishedTask(request, boundary, segment) {
|
---|
6443 | if (boundary === null) {
|
---|
6444 | if (segment.parentFlushed) {
|
---|
6445 | if (request.completedRootSegment !== null) {
|
---|
6446 | throw new Error('There can only be one root segment. This is a bug in React.');
|
---|
6447 | }
|
---|
6448 |
|
---|
6449 | request.completedRootSegment = segment;
|
---|
6450 | }
|
---|
6451 |
|
---|
6452 | request.pendingRootTasks--;
|
---|
6453 |
|
---|
6454 | if (request.pendingRootTasks === 0) {
|
---|
6455 | // We have completed the shell so the shell can't error anymore.
|
---|
6456 | request.onShellError = noop$1;
|
---|
6457 | var onShellReady = request.onShellReady;
|
---|
6458 | onShellReady();
|
---|
6459 | }
|
---|
6460 | } else {
|
---|
6461 | boundary.pendingTasks--;
|
---|
6462 |
|
---|
6463 | if (boundary.forceClientRender) ; else if (boundary.pendingTasks === 0) {
|
---|
6464 | // This must have been the last segment we were waiting on. This boundary is now complete.
|
---|
6465 | if (segment.parentFlushed) {
|
---|
6466 | // Our parent segment already flushed, so we need to schedule this segment to be emitted.
|
---|
6467 | // If it is a segment that was aborted, we'll write other content instead so we don't need
|
---|
6468 | // to emit it.
|
---|
6469 | if (segment.status === COMPLETED) {
|
---|
6470 | queueCompletedSegment(boundary, segment);
|
---|
6471 | }
|
---|
6472 | }
|
---|
6473 |
|
---|
6474 | if (boundary.parentFlushed) {
|
---|
6475 | // The segment might be part of a segment that didn't flush yet, but if the boundary's
|
---|
6476 | // parent flushed, we need to schedule the boundary to be emitted.
|
---|
6477 | request.completedBoundaries.push(boundary);
|
---|
6478 | } // We can now cancel any pending task on the fallback since we won't need to show it anymore.
|
---|
6479 | // This needs to happen after we read the parentFlushed flags because aborting can finish
|
---|
6480 | // work which can trigger user code, which can start flushing, which can change those flags.
|
---|
6481 |
|
---|
6482 |
|
---|
6483 | boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
|
---|
6484 | boundary.fallbackAbortableTasks.clear();
|
---|
6485 | } else {
|
---|
6486 | if (segment.parentFlushed) {
|
---|
6487 | // Our parent already flushed, so we need to schedule this segment to be emitted.
|
---|
6488 | // If it is a segment that was aborted, we'll write other content instead so we don't need
|
---|
6489 | // to emit it.
|
---|
6490 | if (segment.status === COMPLETED) {
|
---|
6491 | queueCompletedSegment(boundary, segment);
|
---|
6492 | var completedSegments = boundary.completedSegments;
|
---|
6493 |
|
---|
6494 | if (completedSegments.length === 1) {
|
---|
6495 | // This is the first time since we last flushed that we completed anything.
|
---|
6496 | // We can schedule this boundary to emit its partially completed segments early
|
---|
6497 | // in case the parent has already been flushed.
|
---|
6498 | if (boundary.parentFlushed) {
|
---|
6499 | request.partialBoundaries.push(boundary);
|
---|
6500 | }
|
---|
6501 | }
|
---|
6502 | }
|
---|
6503 | }
|
---|
6504 | }
|
---|
6505 | }
|
---|
6506 |
|
---|
6507 | request.allPendingTasks--;
|
---|
6508 |
|
---|
6509 | if (request.allPendingTasks === 0) {
|
---|
6510 | // This needs to be called at the very end so that we can synchronously write the result
|
---|
6511 | // in the callback if needed.
|
---|
6512 | var onAllReady = request.onAllReady;
|
---|
6513 | onAllReady();
|
---|
6514 | }
|
---|
6515 | }
|
---|
6516 |
|
---|
6517 | function retryTask(request, task) {
|
---|
6518 | var segment = task.blockedSegment;
|
---|
6519 |
|
---|
6520 | if (segment.status !== PENDING) {
|
---|
6521 | // We completed this by other means before we had a chance to retry it.
|
---|
6522 | return;
|
---|
6523 | } // We restore the context to what it was when we suspended.
|
---|
6524 | // We don't restore it after we leave because it's likely that we'll end up
|
---|
6525 | // needing a very similar context soon again.
|
---|
6526 |
|
---|
6527 |
|
---|
6528 | switchContext(task.context);
|
---|
6529 | var prevTaskInDEV = null;
|
---|
6530 |
|
---|
6531 | {
|
---|
6532 | prevTaskInDEV = currentTaskInDEV;
|
---|
6533 | currentTaskInDEV = task;
|
---|
6534 | }
|
---|
6535 |
|
---|
6536 | try {
|
---|
6537 | // We call the destructive form that mutates this task. That way if something
|
---|
6538 | // suspends again, we can reuse the same task instead of spawning a new one.
|
---|
6539 | renderNodeDestructive(request, task, task.node);
|
---|
6540 | pushSegmentFinale(segment.chunks, request.responseState, segment.lastPushedText, segment.textEmbedded);
|
---|
6541 | task.abortSet.delete(task);
|
---|
6542 | segment.status = COMPLETED;
|
---|
6543 | finishedTask(request, task.blockedBoundary, segment);
|
---|
6544 | } catch (x) {
|
---|
6545 | resetHooksState();
|
---|
6546 |
|
---|
6547 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
|
---|
6548 | // Something suspended again, let's pick it back up later.
|
---|
6549 | var ping = task.ping;
|
---|
6550 | x.then(ping, ping);
|
---|
6551 | } else {
|
---|
6552 | task.abortSet.delete(task);
|
---|
6553 | segment.status = ERRORED;
|
---|
6554 | erroredTask(request, task.blockedBoundary, segment, x);
|
---|
6555 | }
|
---|
6556 | } finally {
|
---|
6557 | {
|
---|
6558 | currentTaskInDEV = prevTaskInDEV;
|
---|
6559 | }
|
---|
6560 | }
|
---|
6561 | }
|
---|
6562 |
|
---|
6563 | function performWork(request) {
|
---|
6564 | if (request.status === CLOSED) {
|
---|
6565 | return;
|
---|
6566 | }
|
---|
6567 |
|
---|
6568 | var prevContext = getActiveContext();
|
---|
6569 | var prevDispatcher = ReactCurrentDispatcher$1.current;
|
---|
6570 | ReactCurrentDispatcher$1.current = Dispatcher;
|
---|
6571 | var prevGetCurrentStackImpl;
|
---|
6572 |
|
---|
6573 | {
|
---|
6574 | prevGetCurrentStackImpl = ReactDebugCurrentFrame$1.getCurrentStack;
|
---|
6575 | ReactDebugCurrentFrame$1.getCurrentStack = getCurrentStackInDEV;
|
---|
6576 | }
|
---|
6577 |
|
---|
6578 | var prevResponseState = currentResponseState;
|
---|
6579 | setCurrentResponseState(request.responseState);
|
---|
6580 |
|
---|
6581 | try {
|
---|
6582 | var pingedTasks = request.pingedTasks;
|
---|
6583 | var i;
|
---|
6584 |
|
---|
6585 | for (i = 0; i < pingedTasks.length; i++) {
|
---|
6586 | var task = pingedTasks[i];
|
---|
6587 | retryTask(request, task);
|
---|
6588 | }
|
---|
6589 |
|
---|
6590 | pingedTasks.splice(0, i);
|
---|
6591 |
|
---|
6592 | if (request.destination !== null) {
|
---|
6593 | flushCompletedQueues(request, request.destination);
|
---|
6594 | }
|
---|
6595 | } catch (error) {
|
---|
6596 | logRecoverableError(request, error);
|
---|
6597 | fatalError(request, error);
|
---|
6598 | } finally {
|
---|
6599 | setCurrentResponseState(prevResponseState);
|
---|
6600 | ReactCurrentDispatcher$1.current = prevDispatcher;
|
---|
6601 |
|
---|
6602 | {
|
---|
6603 | ReactDebugCurrentFrame$1.getCurrentStack = prevGetCurrentStackImpl;
|
---|
6604 | }
|
---|
6605 |
|
---|
6606 | if (prevDispatcher === Dispatcher) {
|
---|
6607 | // This means that we were in a reentrant work loop. This could happen
|
---|
6608 | // in a renderer that supports synchronous work like renderToString,
|
---|
6609 | // when it's called from within another renderer.
|
---|
6610 | // Normally we don't bother switching the contexts to their root/default
|
---|
6611 | // values when leaving because we'll likely need the same or similar
|
---|
6612 | // context again. However, when we're inside a synchronous loop like this
|
---|
6613 | // we'll to restore the context to what it was before returning.
|
---|
6614 | switchContext(prevContext);
|
---|
6615 | }
|
---|
6616 | }
|
---|
6617 | }
|
---|
6618 |
|
---|
6619 | function flushSubtree(request, destination, segment) {
|
---|
6620 | segment.parentFlushed = true;
|
---|
6621 |
|
---|
6622 | switch (segment.status) {
|
---|
6623 | case PENDING:
|
---|
6624 | {
|
---|
6625 | // We're emitting a placeholder for this segment to be filled in later.
|
---|
6626 | // Therefore we'll need to assign it an ID - to refer to it by.
|
---|
6627 | var segmentID = segment.id = request.nextSegmentId++; // When this segment finally completes it won't be embedded in text since it will flush separately
|
---|
6628 |
|
---|
6629 | segment.lastPushedText = false;
|
---|
6630 | segment.textEmbedded = false;
|
---|
6631 | return writePlaceholder(destination, request.responseState, segmentID);
|
---|
6632 | }
|
---|
6633 |
|
---|
6634 | case COMPLETED:
|
---|
6635 | {
|
---|
6636 | segment.status = FLUSHED;
|
---|
6637 | var r = true;
|
---|
6638 | var chunks = segment.chunks;
|
---|
6639 | var chunkIdx = 0;
|
---|
6640 | var children = segment.children;
|
---|
6641 |
|
---|
6642 | for (var childIdx = 0; childIdx < children.length; childIdx++) {
|
---|
6643 | var nextChild = children[childIdx]; // Write all the chunks up until the next child.
|
---|
6644 |
|
---|
6645 | for (; chunkIdx < nextChild.index; chunkIdx++) {
|
---|
6646 | writeChunk(destination, chunks[chunkIdx]);
|
---|
6647 | }
|
---|
6648 |
|
---|
6649 | r = flushSegment(request, destination, nextChild);
|
---|
6650 | } // Finally just write all the remaining chunks
|
---|
6651 |
|
---|
6652 |
|
---|
6653 | for (; chunkIdx < chunks.length - 1; chunkIdx++) {
|
---|
6654 | writeChunk(destination, chunks[chunkIdx]);
|
---|
6655 | }
|
---|
6656 |
|
---|
6657 | if (chunkIdx < chunks.length) {
|
---|
6658 | r = writeChunkAndReturn(destination, chunks[chunkIdx]);
|
---|
6659 | }
|
---|
6660 |
|
---|
6661 | return r;
|
---|
6662 | }
|
---|
6663 |
|
---|
6664 | default:
|
---|
6665 | {
|
---|
6666 | throw new Error('Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.');
|
---|
6667 | }
|
---|
6668 | }
|
---|
6669 | }
|
---|
6670 |
|
---|
6671 | function flushSegment(request, destination, segment) {
|
---|
6672 | var boundary = segment.boundary;
|
---|
6673 |
|
---|
6674 | if (boundary === null) {
|
---|
6675 | // Not a suspense boundary.
|
---|
6676 | return flushSubtree(request, destination, segment);
|
---|
6677 | }
|
---|
6678 |
|
---|
6679 | boundary.parentFlushed = true; // This segment is a Suspense boundary. We need to decide whether to
|
---|
6680 | // emit the content or the fallback now.
|
---|
6681 |
|
---|
6682 | if (boundary.forceClientRender) {
|
---|
6683 | // Emit a client rendered suspense boundary wrapper.
|
---|
6684 | // We never queue the inner boundary so we'll never emit its content or partial segments.
|
---|
6685 | writeStartClientRenderedSuspenseBoundary(destination, request.responseState, boundary.errorDigest, boundary.errorMessage, boundary.errorComponentStack); // Flush the fallback.
|
---|
6686 |
|
---|
6687 | flushSubtree(request, destination, segment);
|
---|
6688 | return writeEndClientRenderedSuspenseBoundary(destination, request.responseState);
|
---|
6689 | } else if (boundary.pendingTasks > 0) {
|
---|
6690 | // This boundary is still loading. Emit a pending suspense boundary wrapper.
|
---|
6691 | // Assign an ID to refer to the future content by.
|
---|
6692 | boundary.rootSegmentID = request.nextSegmentId++;
|
---|
6693 |
|
---|
6694 | if (boundary.completedSegments.length > 0) {
|
---|
6695 | // If this is at least partially complete, we can queue it to be partially emitted early.
|
---|
6696 | request.partialBoundaries.push(boundary);
|
---|
6697 | } /// This is the first time we should have referenced this ID.
|
---|
6698 |
|
---|
6699 |
|
---|
6700 | var id = boundary.id = assignSuspenseBoundaryID(request.responseState);
|
---|
6701 | writeStartPendingSuspenseBoundary(destination, request.responseState, id); // Flush the fallback.
|
---|
6702 |
|
---|
6703 | flushSubtree(request, destination, segment);
|
---|
6704 | return writeEndPendingSuspenseBoundary(destination, request.responseState);
|
---|
6705 | } else if (boundary.byteSize > request.progressiveChunkSize) {
|
---|
6706 | // This boundary is large and will be emitted separately so that we can progressively show
|
---|
6707 | // other content. We add it to the queue during the flush because we have to ensure that
|
---|
6708 | // the parent flushes first so that there's something to inject it into.
|
---|
6709 | // We also have to make sure that it's emitted into the queue in a deterministic slot.
|
---|
6710 | // I.e. we can't insert it here when it completes.
|
---|
6711 | // Assign an ID to refer to the future content by.
|
---|
6712 | boundary.rootSegmentID = request.nextSegmentId++;
|
---|
6713 | request.completedBoundaries.push(boundary); // Emit a pending rendered suspense boundary wrapper.
|
---|
6714 |
|
---|
6715 | writeStartPendingSuspenseBoundary(destination, request.responseState, boundary.id); // Flush the fallback.
|
---|
6716 |
|
---|
6717 | flushSubtree(request, destination, segment);
|
---|
6718 | return writeEndPendingSuspenseBoundary(destination, request.responseState);
|
---|
6719 | } else {
|
---|
6720 | // We can inline this boundary's content as a complete boundary.
|
---|
6721 | writeStartCompletedSuspenseBoundary(destination, request.responseState);
|
---|
6722 | var completedSegments = boundary.completedSegments;
|
---|
6723 |
|
---|
6724 | if (completedSegments.length !== 1) {
|
---|
6725 | throw new Error('A previously unvisited boundary must have exactly one root segment. This is a bug in React.');
|
---|
6726 | }
|
---|
6727 |
|
---|
6728 | var contentSegment = completedSegments[0];
|
---|
6729 | flushSegment(request, destination, contentSegment);
|
---|
6730 | return writeEndCompletedSuspenseBoundary(destination, request.responseState);
|
---|
6731 | }
|
---|
6732 | }
|
---|
6733 |
|
---|
6734 | function flushClientRenderedBoundary(request, destination, boundary) {
|
---|
6735 | return writeClientRenderBoundaryInstruction(destination, request.responseState, boundary.id, boundary.errorDigest, boundary.errorMessage, boundary.errorComponentStack);
|
---|
6736 | }
|
---|
6737 |
|
---|
6738 | function flushSegmentContainer(request, destination, segment) {
|
---|
6739 | writeStartSegment(destination, request.responseState, segment.formatContext, segment.id);
|
---|
6740 | flushSegment(request, destination, segment);
|
---|
6741 | return writeEndSegment(destination, segment.formatContext);
|
---|
6742 | }
|
---|
6743 |
|
---|
6744 | function flushCompletedBoundary(request, destination, boundary) {
|
---|
6745 | var completedSegments = boundary.completedSegments;
|
---|
6746 | var i = 0;
|
---|
6747 |
|
---|
6748 | for (; i < completedSegments.length; i++) {
|
---|
6749 | var segment = completedSegments[i];
|
---|
6750 | flushPartiallyCompletedSegment(request, destination, boundary, segment);
|
---|
6751 | }
|
---|
6752 |
|
---|
6753 | completedSegments.length = 0;
|
---|
6754 | return writeCompletedBoundaryInstruction(destination, request.responseState, boundary.id, boundary.rootSegmentID);
|
---|
6755 | }
|
---|
6756 |
|
---|
6757 | function flushPartialBoundary(request, destination, boundary) {
|
---|
6758 | var completedSegments = boundary.completedSegments;
|
---|
6759 | var i = 0;
|
---|
6760 |
|
---|
6761 | for (; i < completedSegments.length; i++) {
|
---|
6762 | var segment = completedSegments[i];
|
---|
6763 |
|
---|
6764 | if (!flushPartiallyCompletedSegment(request, destination, boundary, segment)) {
|
---|
6765 | i++;
|
---|
6766 | completedSegments.splice(0, i); // Only write as much as the buffer wants. Something higher priority
|
---|
6767 | // might want to write later.
|
---|
6768 |
|
---|
6769 | return false;
|
---|
6770 | }
|
---|
6771 | }
|
---|
6772 |
|
---|
6773 | completedSegments.splice(0, i);
|
---|
6774 | return true;
|
---|
6775 | }
|
---|
6776 |
|
---|
6777 | function flushPartiallyCompletedSegment(request, destination, boundary, segment) {
|
---|
6778 | if (segment.status === FLUSHED) {
|
---|
6779 | // We've already flushed this inline.
|
---|
6780 | return true;
|
---|
6781 | }
|
---|
6782 |
|
---|
6783 | var segmentID = segment.id;
|
---|
6784 |
|
---|
6785 | if (segmentID === -1) {
|
---|
6786 | // This segment wasn't previously referred to. This happens at the root of
|
---|
6787 | // a boundary. We make kind of a leap here and assume this is the root.
|
---|
6788 | var rootSegmentID = segment.id = boundary.rootSegmentID;
|
---|
6789 |
|
---|
6790 | if (rootSegmentID === -1) {
|
---|
6791 | throw new Error('A root segment ID must have been assigned by now. This is a bug in React.');
|
---|
6792 | }
|
---|
6793 |
|
---|
6794 | return flushSegmentContainer(request, destination, segment);
|
---|
6795 | } else {
|
---|
6796 | flushSegmentContainer(request, destination, segment);
|
---|
6797 | return writeCompletedSegmentInstruction(destination, request.responseState, segmentID);
|
---|
6798 | }
|
---|
6799 | }
|
---|
6800 |
|
---|
6801 | function flushCompletedQueues(request, destination) {
|
---|
6802 | beginWriting();
|
---|
6803 |
|
---|
6804 | try {
|
---|
6805 | // The structure of this is to go through each queue one by one and write
|
---|
6806 | // until the sink tells us to stop. When we should stop, we still finish writing
|
---|
6807 | // that item fully and then yield. At that point we remove the already completed
|
---|
6808 | // items up until the point we completed them.
|
---|
6809 | // TODO: Emit preloading.
|
---|
6810 | // TODO: It's kind of unfortunate to keep checking this array after we've already
|
---|
6811 | // emitted the root.
|
---|
6812 | var completedRootSegment = request.completedRootSegment;
|
---|
6813 |
|
---|
6814 | if (completedRootSegment !== null && request.pendingRootTasks === 0) {
|
---|
6815 | flushSegment(request, destination, completedRootSegment);
|
---|
6816 | request.completedRootSegment = null;
|
---|
6817 | writeCompletedRoot(destination, request.responseState);
|
---|
6818 | } // We emit client rendering instructions for already emitted boundaries first.
|
---|
6819 | // This is so that we can signal to the client to start client rendering them as
|
---|
6820 | // soon as possible.
|
---|
6821 |
|
---|
6822 |
|
---|
6823 | var clientRenderedBoundaries = request.clientRenderedBoundaries;
|
---|
6824 | var i;
|
---|
6825 |
|
---|
6826 | for (i = 0; i < clientRenderedBoundaries.length; i++) {
|
---|
6827 | var boundary = clientRenderedBoundaries[i];
|
---|
6828 |
|
---|
6829 | if (!flushClientRenderedBoundary(request, destination, boundary)) {
|
---|
6830 | request.destination = null;
|
---|
6831 | i++;
|
---|
6832 | clientRenderedBoundaries.splice(0, i);
|
---|
6833 | return;
|
---|
6834 | }
|
---|
6835 | }
|
---|
6836 |
|
---|
6837 | clientRenderedBoundaries.splice(0, i); // Next we emit any complete boundaries. It's better to favor boundaries
|
---|
6838 | // that are completely done since we can actually show them, than it is to emit
|
---|
6839 | // any individual segments from a partially complete boundary.
|
---|
6840 |
|
---|
6841 | var completedBoundaries = request.completedBoundaries;
|
---|
6842 |
|
---|
6843 | for (i = 0; i < completedBoundaries.length; i++) {
|
---|
6844 | var _boundary = completedBoundaries[i];
|
---|
6845 |
|
---|
6846 | if (!flushCompletedBoundary(request, destination, _boundary)) {
|
---|
6847 | request.destination = null;
|
---|
6848 | i++;
|
---|
6849 | completedBoundaries.splice(0, i);
|
---|
6850 | return;
|
---|
6851 | }
|
---|
6852 | }
|
---|
6853 |
|
---|
6854 | completedBoundaries.splice(0, i); // Allow anything written so far to flush to the underlying sink before
|
---|
6855 | // we continue with lower priorities.
|
---|
6856 |
|
---|
6857 | completeWriting(destination);
|
---|
6858 | beginWriting(destination); // TODO: Here we'll emit data used by hydration.
|
---|
6859 | // Next we emit any segments of any boundaries that are partially complete
|
---|
6860 | // but not deeply complete.
|
---|
6861 |
|
---|
6862 | var partialBoundaries = request.partialBoundaries;
|
---|
6863 |
|
---|
6864 | for (i = 0; i < partialBoundaries.length; i++) {
|
---|
6865 | var _boundary2 = partialBoundaries[i];
|
---|
6866 |
|
---|
6867 | if (!flushPartialBoundary(request, destination, _boundary2)) {
|
---|
6868 | request.destination = null;
|
---|
6869 | i++;
|
---|
6870 | partialBoundaries.splice(0, i);
|
---|
6871 | return;
|
---|
6872 | }
|
---|
6873 | }
|
---|
6874 |
|
---|
6875 | partialBoundaries.splice(0, i); // Next we check the completed boundaries again. This may have had
|
---|
6876 | // boundaries added to it in case they were too larged to be inlined.
|
---|
6877 | // New ones might be added in this loop.
|
---|
6878 |
|
---|
6879 | var largeBoundaries = request.completedBoundaries;
|
---|
6880 |
|
---|
6881 | for (i = 0; i < largeBoundaries.length; i++) {
|
---|
6882 | var _boundary3 = largeBoundaries[i];
|
---|
6883 |
|
---|
6884 | if (!flushCompletedBoundary(request, destination, _boundary3)) {
|
---|
6885 | request.destination = null;
|
---|
6886 | i++;
|
---|
6887 | largeBoundaries.splice(0, i);
|
---|
6888 | return;
|
---|
6889 | }
|
---|
6890 | }
|
---|
6891 |
|
---|
6892 | largeBoundaries.splice(0, i);
|
---|
6893 | } finally {
|
---|
6894 | completeWriting(destination);
|
---|
6895 |
|
---|
6896 | if (request.allPendingTasks === 0 && request.pingedTasks.length === 0 && request.clientRenderedBoundaries.length === 0 && request.completedBoundaries.length === 0 // We don't need to check any partially completed segments because
|
---|
6897 | // either they have pending task or they're complete.
|
---|
6898 | ) {
|
---|
6899 | {
|
---|
6900 | if (request.abortableTasks.size !== 0) {
|
---|
6901 | error('There was still abortable task at the root when we closed. This is a bug in React.');
|
---|
6902 | }
|
---|
6903 | } // We're done.
|
---|
6904 |
|
---|
6905 |
|
---|
6906 | close(destination);
|
---|
6907 | }
|
---|
6908 | }
|
---|
6909 | }
|
---|
6910 |
|
---|
6911 | function startWork(request) {
|
---|
6912 | scheduleWork(function () {
|
---|
6913 | return performWork(request);
|
---|
6914 | });
|
---|
6915 | }
|
---|
6916 | function startFlowing(request, destination) {
|
---|
6917 | if (request.status === CLOSING) {
|
---|
6918 | request.status = CLOSED;
|
---|
6919 | closeWithError(destination, request.fatalError);
|
---|
6920 | return;
|
---|
6921 | }
|
---|
6922 |
|
---|
6923 | if (request.status === CLOSED) {
|
---|
6924 | return;
|
---|
6925 | }
|
---|
6926 |
|
---|
6927 | if (request.destination !== null) {
|
---|
6928 | // We're already flowing.
|
---|
6929 | return;
|
---|
6930 | }
|
---|
6931 |
|
---|
6932 | request.destination = destination;
|
---|
6933 |
|
---|
6934 | try {
|
---|
6935 | flushCompletedQueues(request, destination);
|
---|
6936 | } catch (error) {
|
---|
6937 | logRecoverableError(request, error);
|
---|
6938 | fatalError(request, error);
|
---|
6939 | }
|
---|
6940 | } // This is called to early terminate a request. It puts all pending boundaries in client rendered state.
|
---|
6941 |
|
---|
6942 | function abort(request, reason) {
|
---|
6943 | try {
|
---|
6944 | var abortableTasks = request.abortableTasks;
|
---|
6945 | abortableTasks.forEach(function (task) {
|
---|
6946 | return abortTask(task, request, reason);
|
---|
6947 | });
|
---|
6948 | abortableTasks.clear();
|
---|
6949 |
|
---|
6950 | if (request.destination !== null) {
|
---|
6951 | flushCompletedQueues(request, request.destination);
|
---|
6952 | }
|
---|
6953 | } catch (error) {
|
---|
6954 | logRecoverableError(request, error);
|
---|
6955 | fatalError(request, error);
|
---|
6956 | }
|
---|
6957 | }
|
---|
6958 |
|
---|
6959 | function renderToReadableStream(children, options) {
|
---|
6960 | return new Promise(function (resolve, reject) {
|
---|
6961 | var onFatalError;
|
---|
6962 | var onAllReady;
|
---|
6963 | var allReady = new Promise(function (res, rej) {
|
---|
6964 | onAllReady = res;
|
---|
6965 | onFatalError = rej;
|
---|
6966 | });
|
---|
6967 |
|
---|
6968 | function onShellReady() {
|
---|
6969 | var stream = new ReadableStream({
|
---|
6970 | type: 'bytes',
|
---|
6971 | pull: function (controller) {
|
---|
6972 | startFlowing(request, controller);
|
---|
6973 | },
|
---|
6974 | cancel: function (reason) {
|
---|
6975 | abort(request);
|
---|
6976 | }
|
---|
6977 | }, // $FlowFixMe size() methods are not allowed on byte streams.
|
---|
6978 | {
|
---|
6979 | highWaterMark: 0
|
---|
6980 | }); // TODO: Move to sub-classing ReadableStream.
|
---|
6981 |
|
---|
6982 | stream.allReady = allReady;
|
---|
6983 | resolve(stream);
|
---|
6984 | }
|
---|
6985 |
|
---|
6986 | function onShellError(error) {
|
---|
6987 | // If the shell errors the caller of `renderToReadableStream` won't have access to `allReady`.
|
---|
6988 | // However, `allReady` will be rejected by `onFatalError` as well.
|
---|
6989 | // So we need to catch the duplicate, uncatchable fatal error in `allReady` to prevent a `UnhandledPromiseRejection`.
|
---|
6990 | allReady.catch(function () {});
|
---|
6991 | reject(error);
|
---|
6992 | }
|
---|
6993 |
|
---|
6994 | var request = createRequest(children, createResponseState(options ? options.identifierPrefix : undefined, options ? options.nonce : undefined, options ? options.bootstrapScriptContent : undefined, options ? options.bootstrapScripts : undefined, options ? options.bootstrapModules : undefined), createRootFormatContext(options ? options.namespaceURI : undefined), options ? options.progressiveChunkSize : undefined, options ? options.onError : undefined, onAllReady, onShellReady, onShellError, onFatalError);
|
---|
6995 |
|
---|
6996 | if (options && options.signal) {
|
---|
6997 | var signal = options.signal;
|
---|
6998 |
|
---|
6999 | var listener = function () {
|
---|
7000 | abort(request, signal.reason);
|
---|
7001 | signal.removeEventListener('abort', listener);
|
---|
7002 | };
|
---|
7003 |
|
---|
7004 | signal.addEventListener('abort', listener);
|
---|
7005 | }
|
---|
7006 |
|
---|
7007 | startWork(request);
|
---|
7008 | });
|
---|
7009 | }
|
---|
7010 |
|
---|
7011 | exports.renderToReadableStream = renderToReadableStream;
|
---|
7012 | exports.version = ReactVersion;
|
---|
7013 | })();
|
---|
7014 | }
|
---|