1 | /**
|
---|
2 | * @license React
|
---|
3 | * react-dom-server.node.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 | var util = require('util');
|
---|
19 |
|
---|
20 | var ReactVersion = '18.3.1';
|
---|
21 |
|
---|
22 | var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
---|
23 |
|
---|
24 | // by calls to these methods by a Babel plugin.
|
---|
25 | //
|
---|
26 | // In PROD (or in packages without access to React internals),
|
---|
27 | // they are left as they are instead.
|
---|
28 |
|
---|
29 | function warn(format) {
|
---|
30 | {
|
---|
31 | {
|
---|
32 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
---|
33 | args[_key - 1] = arguments[_key];
|
---|
34 | }
|
---|
35 |
|
---|
36 | printWarning('warn', format, args);
|
---|
37 | }
|
---|
38 | }
|
---|
39 | }
|
---|
40 | function error(format) {
|
---|
41 | {
|
---|
42 | {
|
---|
43 | for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
---|
44 | args[_key2 - 1] = arguments[_key2];
|
---|
45 | }
|
---|
46 |
|
---|
47 | printWarning('error', format, args);
|
---|
48 | }
|
---|
49 | }
|
---|
50 | }
|
---|
51 |
|
---|
52 | function printWarning(level, format, args) {
|
---|
53 | // When changing this logic, you might want to also
|
---|
54 | // update consoleWithStackDev.www.js as well.
|
---|
55 | {
|
---|
56 | var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
|
---|
57 | var stack = ReactDebugCurrentFrame.getStackAddendum();
|
---|
58 |
|
---|
59 | if (stack !== '') {
|
---|
60 | format += '%s';
|
---|
61 | args = args.concat([stack]);
|
---|
62 | } // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
63 |
|
---|
64 |
|
---|
65 | var argsWithFormat = args.map(function (item) {
|
---|
66 | return String(item);
|
---|
67 | }); // Careful: RN currently depends on this prefix
|
---|
68 |
|
---|
69 | argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
|
---|
70 | // breaks IE9: https://github.com/facebook/react/issues/13610
|
---|
71 | // eslint-disable-next-line react-internal/no-production-logging
|
---|
72 |
|
---|
73 | Function.prototype.apply.call(console[level], console, argsWithFormat);
|
---|
74 | }
|
---|
75 | }
|
---|
76 |
|
---|
77 | function scheduleWork(callback) {
|
---|
78 | setImmediate(callback);
|
---|
79 | }
|
---|
80 | function flushBuffered(destination) {
|
---|
81 | // If we don't have any more data to send right now.
|
---|
82 | // Flush whatever is in the buffer to the wire.
|
---|
83 | if (typeof destination.flush === 'function') {
|
---|
84 | // By convention the Zlib streams provide a flush function for this purpose.
|
---|
85 | // For Express, compression middleware adds this method.
|
---|
86 | destination.flush();
|
---|
87 | }
|
---|
88 | }
|
---|
89 | var VIEW_SIZE = 2048;
|
---|
90 | var currentView = null;
|
---|
91 | var writtenBytes = 0;
|
---|
92 | var destinationHasCapacity = true;
|
---|
93 | function beginWriting(destination) {
|
---|
94 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
95 | writtenBytes = 0;
|
---|
96 | destinationHasCapacity = true;
|
---|
97 | }
|
---|
98 |
|
---|
99 | function writeStringChunk(destination, stringChunk) {
|
---|
100 | if (stringChunk.length === 0) {
|
---|
101 | return;
|
---|
102 | } // maximum possible view needed to encode entire string
|
---|
103 |
|
---|
104 |
|
---|
105 | if (stringChunk.length * 3 > VIEW_SIZE) {
|
---|
106 | if (writtenBytes > 0) {
|
---|
107 | writeToDestination(destination, currentView.subarray(0, writtenBytes));
|
---|
108 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
109 | writtenBytes = 0;
|
---|
110 | }
|
---|
111 |
|
---|
112 | writeToDestination(destination, textEncoder.encode(stringChunk));
|
---|
113 | return;
|
---|
114 | }
|
---|
115 |
|
---|
116 | var target = currentView;
|
---|
117 |
|
---|
118 | if (writtenBytes > 0) {
|
---|
119 | target = currentView.subarray(writtenBytes);
|
---|
120 | }
|
---|
121 |
|
---|
122 | var _textEncoder$encodeIn = textEncoder.encodeInto(stringChunk, target),
|
---|
123 | read = _textEncoder$encodeIn.read,
|
---|
124 | written = _textEncoder$encodeIn.written;
|
---|
125 |
|
---|
126 | writtenBytes += written;
|
---|
127 |
|
---|
128 | if (read < stringChunk.length) {
|
---|
129 | writeToDestination(destination, currentView);
|
---|
130 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
131 | writtenBytes = textEncoder.encodeInto(stringChunk.slice(read), currentView).written;
|
---|
132 | }
|
---|
133 |
|
---|
134 | if (writtenBytes === VIEW_SIZE) {
|
---|
135 | writeToDestination(destination, currentView);
|
---|
136 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
137 | writtenBytes = 0;
|
---|
138 | }
|
---|
139 | }
|
---|
140 |
|
---|
141 | function writeViewChunk(destination, chunk) {
|
---|
142 | if (chunk.byteLength === 0) {
|
---|
143 | return;
|
---|
144 | }
|
---|
145 |
|
---|
146 | if (chunk.byteLength > VIEW_SIZE) {
|
---|
147 | // this chunk may overflow a single view which implies it was not
|
---|
148 | // one that is cached by the streaming renderer. We will enqueu
|
---|
149 | // it directly and expect it is not re-used
|
---|
150 | if (writtenBytes > 0) {
|
---|
151 | writeToDestination(destination, currentView.subarray(0, writtenBytes));
|
---|
152 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
153 | writtenBytes = 0;
|
---|
154 | }
|
---|
155 |
|
---|
156 | writeToDestination(destination, chunk);
|
---|
157 | return;
|
---|
158 | }
|
---|
159 |
|
---|
160 | var bytesToWrite = chunk;
|
---|
161 | var allowableBytes = currentView.length - writtenBytes;
|
---|
162 |
|
---|
163 | if (allowableBytes < bytesToWrite.byteLength) {
|
---|
164 | // this chunk would overflow the current view. We enqueue a full view
|
---|
165 | // and start a new view with the remaining chunk
|
---|
166 | if (allowableBytes === 0) {
|
---|
167 | // the current view is already full, send it
|
---|
168 | writeToDestination(destination, currentView);
|
---|
169 | } else {
|
---|
170 | // fill up the current view and apply the remaining chunk bytes
|
---|
171 | // to a new view.
|
---|
172 | currentView.set(bytesToWrite.subarray(0, allowableBytes), writtenBytes);
|
---|
173 | writtenBytes += allowableBytes;
|
---|
174 | writeToDestination(destination, currentView);
|
---|
175 | bytesToWrite = bytesToWrite.subarray(allowableBytes);
|
---|
176 | }
|
---|
177 |
|
---|
178 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
179 | writtenBytes = 0;
|
---|
180 | }
|
---|
181 |
|
---|
182 | currentView.set(bytesToWrite, writtenBytes);
|
---|
183 | writtenBytes += bytesToWrite.byteLength;
|
---|
184 |
|
---|
185 | if (writtenBytes === VIEW_SIZE) {
|
---|
186 | writeToDestination(destination, currentView);
|
---|
187 | currentView = new Uint8Array(VIEW_SIZE);
|
---|
188 | writtenBytes = 0;
|
---|
189 | }
|
---|
190 | }
|
---|
191 |
|
---|
192 | function writeChunk(destination, chunk) {
|
---|
193 | if (typeof chunk === 'string') {
|
---|
194 | writeStringChunk(destination, chunk);
|
---|
195 | } else {
|
---|
196 | writeViewChunk(destination, chunk);
|
---|
197 | }
|
---|
198 | }
|
---|
199 |
|
---|
200 | function writeToDestination(destination, view) {
|
---|
201 | var currentHasCapacity = destination.write(view);
|
---|
202 | destinationHasCapacity = destinationHasCapacity && currentHasCapacity;
|
---|
203 | }
|
---|
204 |
|
---|
205 | function writeChunkAndReturn(destination, chunk) {
|
---|
206 | writeChunk(destination, chunk);
|
---|
207 | return destinationHasCapacity;
|
---|
208 | }
|
---|
209 | function completeWriting(destination) {
|
---|
210 | if (currentView && writtenBytes > 0) {
|
---|
211 | destination.write(currentView.subarray(0, writtenBytes));
|
---|
212 | }
|
---|
213 |
|
---|
214 | currentView = null;
|
---|
215 | writtenBytes = 0;
|
---|
216 | destinationHasCapacity = true;
|
---|
217 | }
|
---|
218 | function close(destination) {
|
---|
219 | destination.end();
|
---|
220 | }
|
---|
221 | var textEncoder = new util.TextEncoder();
|
---|
222 | function stringToChunk(content) {
|
---|
223 | return content;
|
---|
224 | }
|
---|
225 | function stringToPrecomputedChunk(content) {
|
---|
226 | return textEncoder.encode(content);
|
---|
227 | }
|
---|
228 | function closeWithError(destination, error) {
|
---|
229 | // $FlowFixMe: This is an Error object or the destination accepts other types.
|
---|
230 | destination.destroy(error);
|
---|
231 | }
|
---|
232 |
|
---|
233 | /*
|
---|
234 | * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
|
---|
235 | * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
|
---|
236 | *
|
---|
237 | * The functions in this module will throw an easier-to-understand,
|
---|
238 | * easier-to-debug exception with a clear errors message message explaining the
|
---|
239 | * problem. (Instead of a confusing exception thrown inside the implementation
|
---|
240 | * of the `value` object).
|
---|
241 | */
|
---|
242 | // $FlowFixMe only called in DEV, so void return is not possible.
|
---|
243 | function typeName(value) {
|
---|
244 | {
|
---|
245 | // toStringTag is needed for namespaced types like Temporal.Instant
|
---|
246 | var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
|
---|
247 | var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
|
---|
248 | return type;
|
---|
249 | }
|
---|
250 | } // $FlowFixMe only called in DEV, so void return is not possible.
|
---|
251 |
|
---|
252 |
|
---|
253 | function willCoercionThrow(value) {
|
---|
254 | {
|
---|
255 | try {
|
---|
256 | testStringCoercion(value);
|
---|
257 | return false;
|
---|
258 | } catch (e) {
|
---|
259 | return true;
|
---|
260 | }
|
---|
261 | }
|
---|
262 | }
|
---|
263 |
|
---|
264 | function testStringCoercion(value) {
|
---|
265 | // If you ended up here by following an exception call stack, here's what's
|
---|
266 | // happened: you supplied an object or symbol value to React (as a prop, key,
|
---|
267 | // DOM attribute, CSS property, string ref, etc.) and when React tried to
|
---|
268 | // coerce it to a string using `'' + value`, an exception was thrown.
|
---|
269 | //
|
---|
270 | // The most common types that will cause this exception are `Symbol` instances
|
---|
271 | // and Temporal objects like `Temporal.Instant`. But any object that has a
|
---|
272 | // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
|
---|
273 | // exception. (Library authors do this to prevent users from using built-in
|
---|
274 | // numeric operators like `+` or comparison operators like `>=` because custom
|
---|
275 | // methods are needed to perform accurate arithmetic or comparison.)
|
---|
276 | //
|
---|
277 | // To fix the problem, coerce this object or symbol value to a string before
|
---|
278 | // passing it to React. The most reliable way is usually `String(value)`.
|
---|
279 | //
|
---|
280 | // To find which value is throwing, check the browser or debugger console.
|
---|
281 | // Before this exception was thrown, there should be `console.error` output
|
---|
282 | // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
|
---|
283 | // problem and how that type was used: key, atrribute, input value prop, etc.
|
---|
284 | // In most cases, this console output also shows the component and its
|
---|
285 | // ancestor components where the exception happened.
|
---|
286 | //
|
---|
287 | // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
288 | return '' + value;
|
---|
289 | }
|
---|
290 |
|
---|
291 | function checkAttributeStringCoercion(value, attributeName) {
|
---|
292 | {
|
---|
293 | if (willCoercionThrow(value)) {
|
---|
294 | 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));
|
---|
295 |
|
---|
296 | return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
|
---|
297 | }
|
---|
298 | }
|
---|
299 | }
|
---|
300 | function checkCSSPropertyStringCoercion(value, propName) {
|
---|
301 | {
|
---|
302 | if (willCoercionThrow(value)) {
|
---|
303 | 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));
|
---|
304 |
|
---|
305 | return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
|
---|
306 | }
|
---|
307 | }
|
---|
308 | }
|
---|
309 | function checkHtmlStringCoercion(value) {
|
---|
310 | {
|
---|
311 | if (willCoercionThrow(value)) {
|
---|
312 | 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));
|
---|
313 |
|
---|
314 | return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
|
---|
315 | }
|
---|
316 | }
|
---|
317 | }
|
---|
318 |
|
---|
319 | var hasOwnProperty = Object.prototype.hasOwnProperty;
|
---|
320 |
|
---|
321 | // A reserved attribute.
|
---|
322 | // It is handled by React separately and shouldn't be written to the DOM.
|
---|
323 | var RESERVED = 0; // A simple string attribute.
|
---|
324 | // Attributes that aren't in the filter are presumed to have this type.
|
---|
325 |
|
---|
326 | var STRING = 1; // A string attribute that accepts booleans in React. In HTML, these are called
|
---|
327 | // "enumerated" attributes with "true" and "false" as possible values.
|
---|
328 | // When true, it should be set to a "true" string.
|
---|
329 | // When false, it should be set to a "false" string.
|
---|
330 |
|
---|
331 | var BOOLEANISH_STRING = 2; // A real boolean attribute.
|
---|
332 | // When true, it should be present (set either to an empty string or its name).
|
---|
333 | // When false, it should be omitted.
|
---|
334 |
|
---|
335 | var BOOLEAN = 3; // An attribute that can be used as a flag as well as with a value.
|
---|
336 | // When true, it should be present (set either to an empty string or its name).
|
---|
337 | // When false, it should be omitted.
|
---|
338 | // For any other value, should be present with that value.
|
---|
339 |
|
---|
340 | var OVERLOADED_BOOLEAN = 4; // An attribute that must be numeric or parse as a numeric.
|
---|
341 | // When falsy, it should be removed.
|
---|
342 |
|
---|
343 | var NUMERIC = 5; // An attribute that must be positive numeric or parse as a positive numeric.
|
---|
344 | // When falsy, it should be removed.
|
---|
345 |
|
---|
346 | var POSITIVE_NUMERIC = 6;
|
---|
347 |
|
---|
348 | /* eslint-disable max-len */
|
---|
349 | 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";
|
---|
350 | /* eslint-enable max-len */
|
---|
351 |
|
---|
352 | var ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + "\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
|
---|
353 | var VALID_ATTRIBUTE_NAME_REGEX = new RegExp('^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
354 | var illegalAttributeNameCache = {};
|
---|
355 | var validatedAttributeNameCache = {};
|
---|
356 | function isAttributeNameSafe(attributeName) {
|
---|
357 | if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) {
|
---|
358 | return true;
|
---|
359 | }
|
---|
360 |
|
---|
361 | if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) {
|
---|
362 | return false;
|
---|
363 | }
|
---|
364 |
|
---|
365 | if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {
|
---|
366 | validatedAttributeNameCache[attributeName] = true;
|
---|
367 | return true;
|
---|
368 | }
|
---|
369 |
|
---|
370 | illegalAttributeNameCache[attributeName] = true;
|
---|
371 |
|
---|
372 | {
|
---|
373 | error('Invalid attribute name: `%s`', attributeName);
|
---|
374 | }
|
---|
375 |
|
---|
376 | return false;
|
---|
377 | }
|
---|
378 | function shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag) {
|
---|
379 | if (propertyInfo !== null && propertyInfo.type === RESERVED) {
|
---|
380 | return false;
|
---|
381 | }
|
---|
382 |
|
---|
383 | switch (typeof value) {
|
---|
384 | case 'function': // $FlowIssue symbol is perfectly valid here
|
---|
385 |
|
---|
386 | case 'symbol':
|
---|
387 | // eslint-disable-line
|
---|
388 | return true;
|
---|
389 |
|
---|
390 | case 'boolean':
|
---|
391 | {
|
---|
392 | if (isCustomComponentTag) {
|
---|
393 | return false;
|
---|
394 | }
|
---|
395 |
|
---|
396 | if (propertyInfo !== null) {
|
---|
397 | return !propertyInfo.acceptsBooleans;
|
---|
398 | } else {
|
---|
399 | var prefix = name.toLowerCase().slice(0, 5);
|
---|
400 | return prefix !== 'data-' && prefix !== 'aria-';
|
---|
401 | }
|
---|
402 | }
|
---|
403 |
|
---|
404 | default:
|
---|
405 | return false;
|
---|
406 | }
|
---|
407 | }
|
---|
408 | function getPropertyInfo(name) {
|
---|
409 | return properties.hasOwnProperty(name) ? properties[name] : null;
|
---|
410 | }
|
---|
411 |
|
---|
412 | function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) {
|
---|
413 | this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
|
---|
414 | this.attributeName = attributeName;
|
---|
415 | this.attributeNamespace = attributeNamespace;
|
---|
416 | this.mustUseProperty = mustUseProperty;
|
---|
417 | this.propertyName = name;
|
---|
418 | this.type = type;
|
---|
419 | this.sanitizeURL = sanitizeURL;
|
---|
420 | this.removeEmptyString = removeEmptyString;
|
---|
421 | } // When adding attributes to this list, be sure to also add them to
|
---|
422 | // the `possibleStandardNames` module to ensure casing and incorrect
|
---|
423 | // name warnings.
|
---|
424 |
|
---|
425 |
|
---|
426 | var properties = {}; // These props are reserved by React. They shouldn't be written to the DOM.
|
---|
427 |
|
---|
428 | var reservedProps = ['children', 'dangerouslySetInnerHTML', // TODO: This prevents the assignment of defaultValue to regular
|
---|
429 | // elements (not just inputs). Now that ReactDOMInput assigns to the
|
---|
430 | // defaultValue property -- do we need this?
|
---|
431 | 'defaultValue', 'defaultChecked', 'innerHTML', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'style'];
|
---|
432 |
|
---|
433 | reservedProps.forEach(function (name) {
|
---|
434 | properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty
|
---|
435 | name, // attributeName
|
---|
436 | null, // attributeNamespace
|
---|
437 | false, // sanitizeURL
|
---|
438 | false);
|
---|
439 | }); // A few React string attributes have a different name.
|
---|
440 | // This is a mapping from React prop names to the attribute names.
|
---|
441 |
|
---|
442 | [['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']].forEach(function (_ref) {
|
---|
443 | var name = _ref[0],
|
---|
444 | attributeName = _ref[1];
|
---|
445 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
446 | attributeName, // attributeName
|
---|
447 | null, // attributeNamespace
|
---|
448 | false, // sanitizeURL
|
---|
449 | false);
|
---|
450 | }); // These are "enumerated" HTML attributes that accept "true" and "false".
|
---|
451 | // In React, we let users pass `true` and `false` even though technically
|
---|
452 | // these aren't boolean attributes (they are coerced to strings).
|
---|
453 |
|
---|
454 | ['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (name) {
|
---|
455 | properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
|
---|
456 | name.toLowerCase(), // attributeName
|
---|
457 | null, // attributeNamespace
|
---|
458 | false, // sanitizeURL
|
---|
459 | false);
|
---|
460 | }); // These are "enumerated" SVG attributes that accept "true" and "false".
|
---|
461 | // In React, we let users pass `true` and `false` even though technically
|
---|
462 | // these aren't boolean attributes (they are coerced to strings).
|
---|
463 | // Since these are SVG attributes, their attribute names are case-sensitive.
|
---|
464 |
|
---|
465 | ['autoReverse', 'externalResourcesRequired', 'focusable', 'preserveAlpha'].forEach(function (name) {
|
---|
466 | properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
|
---|
467 | name, // attributeName
|
---|
468 | null, // attributeNamespace
|
---|
469 | false, // sanitizeURL
|
---|
470 | false);
|
---|
471 | }); // These are HTML boolean attributes.
|
---|
472 |
|
---|
473 | ['allowFullScreen', 'async', // Note: there is a special case that prevents it from being written to the DOM
|
---|
474 | // on the client side because the browsers are inconsistent. Instead we call focus().
|
---|
475 | 'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'disablePictureInPicture', 'disableRemotePlayback', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless', // Microdata
|
---|
476 | 'itemScope'].forEach(function (name) {
|
---|
477 | properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty
|
---|
478 | name.toLowerCase(), // attributeName
|
---|
479 | null, // attributeNamespace
|
---|
480 | false, // sanitizeURL
|
---|
481 | false);
|
---|
482 | }); // These are the few React props that we set as DOM properties
|
---|
483 | // rather than attributes. These are all booleans.
|
---|
484 |
|
---|
485 | ['checked', // Note: `option.selected` is not updated if `select.multiple` is
|
---|
486 | // disabled with `removeAttribute`. We have special logic for handling this.
|
---|
487 | 'multiple', 'muted', 'selected' // NOTE: if you add a camelCased prop to this list,
|
---|
488 | // you'll need to set attributeName to name.toLowerCase()
|
---|
489 | // instead in the assignment below.
|
---|
490 | ].forEach(function (name) {
|
---|
491 | properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty
|
---|
492 | name, // attributeName
|
---|
493 | null, // attributeNamespace
|
---|
494 | false, // sanitizeURL
|
---|
495 | false);
|
---|
496 | }); // These are HTML attributes that are "overloaded booleans": they behave like
|
---|
497 | // booleans, but can also accept a string value.
|
---|
498 |
|
---|
499 | ['capture', 'download' // NOTE: if you add a camelCased prop to this list,
|
---|
500 | // you'll need to set attributeName to name.toLowerCase()
|
---|
501 | // instead in the assignment below.
|
---|
502 | ].forEach(function (name) {
|
---|
503 | properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty
|
---|
504 | name, // attributeName
|
---|
505 | null, // attributeNamespace
|
---|
506 | false, // sanitizeURL
|
---|
507 | false);
|
---|
508 | }); // These are HTML attributes that must be positive numbers.
|
---|
509 |
|
---|
510 | ['cols', 'rows', 'size', 'span' // NOTE: if you add a camelCased prop to this list,
|
---|
511 | // you'll need to set attributeName to name.toLowerCase()
|
---|
512 | // instead in the assignment below.
|
---|
513 | ].forEach(function (name) {
|
---|
514 | properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty
|
---|
515 | name, // attributeName
|
---|
516 | null, // attributeNamespace
|
---|
517 | false, // sanitizeURL
|
---|
518 | false);
|
---|
519 | }); // These are HTML attributes that must be numbers.
|
---|
520 |
|
---|
521 | ['rowSpan', 'start'].forEach(function (name) {
|
---|
522 | properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty
|
---|
523 | name.toLowerCase(), // attributeName
|
---|
524 | null, // attributeNamespace
|
---|
525 | false, // sanitizeURL
|
---|
526 | false);
|
---|
527 | });
|
---|
528 | var CAMELIZE = /[\-\:]([a-z])/g;
|
---|
529 |
|
---|
530 | var capitalize = function (token) {
|
---|
531 | return token[1].toUpperCase();
|
---|
532 | }; // This is a list of all SVG attributes that need special casing, namespacing,
|
---|
533 | // or boolean value assignment. Regular attributes that just accept strings
|
---|
534 | // and have the same names are omitted, just like in the HTML attribute filter.
|
---|
535 | // Some of these attributes can be hard to find. This list was created by
|
---|
536 | // scraping the MDN documentation.
|
---|
537 |
|
---|
538 |
|
---|
539 | ['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,
|
---|
540 | // you'll need to set attributeName to name.toLowerCase()
|
---|
541 | // instead in the assignment below.
|
---|
542 | ].forEach(function (attributeName) {
|
---|
543 | var name = attributeName.replace(CAMELIZE, capitalize);
|
---|
544 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
545 | attributeName, null, // attributeNamespace
|
---|
546 | false, // sanitizeURL
|
---|
547 | false);
|
---|
548 | }); // String SVG attributes with the xlink namespace.
|
---|
549 |
|
---|
550 | ['xlink:actuate', 'xlink:arcrole', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type' // NOTE: if you add a camelCased prop to this list,
|
---|
551 | // you'll need to set attributeName to name.toLowerCase()
|
---|
552 | // instead in the assignment below.
|
---|
553 | ].forEach(function (attributeName) {
|
---|
554 | var name = attributeName.replace(CAMELIZE, capitalize);
|
---|
555 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
556 | attributeName, 'http://www.w3.org/1999/xlink', false, // sanitizeURL
|
---|
557 | false);
|
---|
558 | }); // String SVG attributes with the xml namespace.
|
---|
559 |
|
---|
560 | ['xml:base', 'xml:lang', 'xml:space' // NOTE: if you add a camelCased prop to this list,
|
---|
561 | // you'll need to set attributeName to name.toLowerCase()
|
---|
562 | // instead in the assignment below.
|
---|
563 | ].forEach(function (attributeName) {
|
---|
564 | var name = attributeName.replace(CAMELIZE, capitalize);
|
---|
565 | properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
|
---|
566 | attributeName, 'http://www.w3.org/XML/1998/namespace', false, // sanitizeURL
|
---|
567 | false);
|
---|
568 | }); // These attribute exists both in HTML and SVG.
|
---|
569 | // The attribute name is case-sensitive in SVG so we can't just use
|
---|
570 | // the React name like we do for attributes that exist only in HTML.
|
---|
571 |
|
---|
572 | ['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
|
---|
573 | properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
|
---|
574 | attributeName.toLowerCase(), // attributeName
|
---|
575 | null, // attributeNamespace
|
---|
576 | false, // sanitizeURL
|
---|
577 | false);
|
---|
578 | }); // These attributes accept URLs. These must not allow javascript: URLS.
|
---|
579 | // These will also need to accept Trusted Types object in the future.
|
---|
580 |
|
---|
581 | var xlinkHref = 'xlinkHref';
|
---|
582 | properties[xlinkHref] = new PropertyInfoRecord('xlinkHref', STRING, false, // mustUseProperty
|
---|
583 | 'xlink:href', 'http://www.w3.org/1999/xlink', true, // sanitizeURL
|
---|
584 | false);
|
---|
585 | ['src', 'href', 'action', 'formAction'].forEach(function (attributeName) {
|
---|
586 | properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
|
---|
587 | attributeName.toLowerCase(), // attributeName
|
---|
588 | null, // attributeNamespace
|
---|
589 | true, // sanitizeURL
|
---|
590 | true);
|
---|
591 | });
|
---|
592 |
|
---|
593 | /**
|
---|
594 | * CSS properties which accept numbers but are not in units of "px".
|
---|
595 | */
|
---|
596 | var isUnitlessNumber = {
|
---|
597 | animationIterationCount: true,
|
---|
598 | aspectRatio: true,
|
---|
599 | borderImageOutset: true,
|
---|
600 | borderImageSlice: true,
|
---|
601 | borderImageWidth: true,
|
---|
602 | boxFlex: true,
|
---|
603 | boxFlexGroup: true,
|
---|
604 | boxOrdinalGroup: true,
|
---|
605 | columnCount: true,
|
---|
606 | columns: true,
|
---|
607 | flex: true,
|
---|
608 | flexGrow: true,
|
---|
609 | flexPositive: true,
|
---|
610 | flexShrink: true,
|
---|
611 | flexNegative: true,
|
---|
612 | flexOrder: true,
|
---|
613 | gridArea: true,
|
---|
614 | gridRow: true,
|
---|
615 | gridRowEnd: true,
|
---|
616 | gridRowSpan: true,
|
---|
617 | gridRowStart: true,
|
---|
618 | gridColumn: true,
|
---|
619 | gridColumnEnd: true,
|
---|
620 | gridColumnSpan: true,
|
---|
621 | gridColumnStart: true,
|
---|
622 | fontWeight: true,
|
---|
623 | lineClamp: true,
|
---|
624 | lineHeight: true,
|
---|
625 | opacity: true,
|
---|
626 | order: true,
|
---|
627 | orphans: true,
|
---|
628 | tabSize: true,
|
---|
629 | widows: true,
|
---|
630 | zIndex: true,
|
---|
631 | zoom: true,
|
---|
632 | // SVG-related properties
|
---|
633 | fillOpacity: true,
|
---|
634 | floodOpacity: true,
|
---|
635 | stopOpacity: true,
|
---|
636 | strokeDasharray: true,
|
---|
637 | strokeDashoffset: true,
|
---|
638 | strokeMiterlimit: true,
|
---|
639 | strokeOpacity: true,
|
---|
640 | strokeWidth: true
|
---|
641 | };
|
---|
642 | /**
|
---|
643 | * @param {string} prefix vendor-specific prefix, eg: Webkit
|
---|
644 | * @param {string} key style name, eg: transitionDuration
|
---|
645 | * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
|
---|
646 | * WebkitTransitionDuration
|
---|
647 | */
|
---|
648 |
|
---|
649 | function prefixKey(prefix, key) {
|
---|
650 | return prefix + key.charAt(0).toUpperCase() + key.substring(1);
|
---|
651 | }
|
---|
652 | /**
|
---|
653 | * Support style names that may come passed in prefixed by adding permutations
|
---|
654 | * of vendor prefixes.
|
---|
655 | */
|
---|
656 |
|
---|
657 |
|
---|
658 | var prefixes = ['Webkit', 'ms', 'Moz', 'O']; // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
|
---|
659 | // infinite loop, because it iterates over the newly added props too.
|
---|
660 |
|
---|
661 | Object.keys(isUnitlessNumber).forEach(function (prop) {
|
---|
662 | prefixes.forEach(function (prefix) {
|
---|
663 | isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
|
---|
664 | });
|
---|
665 | });
|
---|
666 |
|
---|
667 | var hasReadOnlyValue = {
|
---|
668 | button: true,
|
---|
669 | checkbox: true,
|
---|
670 | image: true,
|
---|
671 | hidden: true,
|
---|
672 | radio: true,
|
---|
673 | reset: true,
|
---|
674 | submit: true
|
---|
675 | };
|
---|
676 | function checkControlledValueProps(tagName, props) {
|
---|
677 | {
|
---|
678 | if (!(hasReadOnlyValue[props.type] || props.onChange || props.onInput || props.readOnly || props.disabled || props.value == null)) {
|
---|
679 | 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`.');
|
---|
680 | }
|
---|
681 |
|
---|
682 | if (!(props.onChange || props.readOnly || props.disabled || props.checked == null)) {
|
---|
683 | 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`.');
|
---|
684 | }
|
---|
685 | }
|
---|
686 | }
|
---|
687 |
|
---|
688 | function isCustomComponent(tagName, props) {
|
---|
689 | if (tagName.indexOf('-') === -1) {
|
---|
690 | return typeof props.is === 'string';
|
---|
691 | }
|
---|
692 |
|
---|
693 | switch (tagName) {
|
---|
694 | // These are reserved SVG and MathML elements.
|
---|
695 | // We don't mind this list too much because we expect it to never grow.
|
---|
696 | // The alternative is to track the namespace in a few places which is convoluted.
|
---|
697 | // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
|
---|
698 | case 'annotation-xml':
|
---|
699 | case 'color-profile':
|
---|
700 | case 'font-face':
|
---|
701 | case 'font-face-src':
|
---|
702 | case 'font-face-uri':
|
---|
703 | case 'font-face-format':
|
---|
704 | case 'font-face-name':
|
---|
705 | case 'missing-glyph':
|
---|
706 | return false;
|
---|
707 |
|
---|
708 | default:
|
---|
709 | return true;
|
---|
710 | }
|
---|
711 | }
|
---|
712 |
|
---|
713 | var ariaProperties = {
|
---|
714 | 'aria-current': 0,
|
---|
715 | // state
|
---|
716 | 'aria-description': 0,
|
---|
717 | 'aria-details': 0,
|
---|
718 | 'aria-disabled': 0,
|
---|
719 | // state
|
---|
720 | 'aria-hidden': 0,
|
---|
721 | // state
|
---|
722 | 'aria-invalid': 0,
|
---|
723 | // state
|
---|
724 | 'aria-keyshortcuts': 0,
|
---|
725 | 'aria-label': 0,
|
---|
726 | 'aria-roledescription': 0,
|
---|
727 | // Widget Attributes
|
---|
728 | 'aria-autocomplete': 0,
|
---|
729 | 'aria-checked': 0,
|
---|
730 | 'aria-expanded': 0,
|
---|
731 | 'aria-haspopup': 0,
|
---|
732 | 'aria-level': 0,
|
---|
733 | 'aria-modal': 0,
|
---|
734 | 'aria-multiline': 0,
|
---|
735 | 'aria-multiselectable': 0,
|
---|
736 | 'aria-orientation': 0,
|
---|
737 | 'aria-placeholder': 0,
|
---|
738 | 'aria-pressed': 0,
|
---|
739 | 'aria-readonly': 0,
|
---|
740 | 'aria-required': 0,
|
---|
741 | 'aria-selected': 0,
|
---|
742 | 'aria-sort': 0,
|
---|
743 | 'aria-valuemax': 0,
|
---|
744 | 'aria-valuemin': 0,
|
---|
745 | 'aria-valuenow': 0,
|
---|
746 | 'aria-valuetext': 0,
|
---|
747 | // Live Region Attributes
|
---|
748 | 'aria-atomic': 0,
|
---|
749 | 'aria-busy': 0,
|
---|
750 | 'aria-live': 0,
|
---|
751 | 'aria-relevant': 0,
|
---|
752 | // Drag-and-Drop Attributes
|
---|
753 | 'aria-dropeffect': 0,
|
---|
754 | 'aria-grabbed': 0,
|
---|
755 | // Relationship Attributes
|
---|
756 | 'aria-activedescendant': 0,
|
---|
757 | 'aria-colcount': 0,
|
---|
758 | 'aria-colindex': 0,
|
---|
759 | 'aria-colspan': 0,
|
---|
760 | 'aria-controls': 0,
|
---|
761 | 'aria-describedby': 0,
|
---|
762 | 'aria-errormessage': 0,
|
---|
763 | 'aria-flowto': 0,
|
---|
764 | 'aria-labelledby': 0,
|
---|
765 | 'aria-owns': 0,
|
---|
766 | 'aria-posinset': 0,
|
---|
767 | 'aria-rowcount': 0,
|
---|
768 | 'aria-rowindex': 0,
|
---|
769 | 'aria-rowspan': 0,
|
---|
770 | 'aria-setsize': 0
|
---|
771 | };
|
---|
772 |
|
---|
773 | var warnedProperties = {};
|
---|
774 | var rARIA = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
775 | var rARIACamel = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
776 |
|
---|
777 | function validateProperty(tagName, name) {
|
---|
778 | {
|
---|
779 | if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
|
---|
780 | return true;
|
---|
781 | }
|
---|
782 |
|
---|
783 | if (rARIACamel.test(name)) {
|
---|
784 | var ariaName = 'aria-' + name.slice(4).toLowerCase();
|
---|
785 | var correctName = ariaProperties.hasOwnProperty(ariaName) ? ariaName : null; // If this is an aria-* attribute, but is not listed in the known DOM
|
---|
786 | // DOM properties, then it is an invalid aria-* attribute.
|
---|
787 |
|
---|
788 | if (correctName == null) {
|
---|
789 | error('Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.', name);
|
---|
790 |
|
---|
791 | warnedProperties[name] = true;
|
---|
792 | return true;
|
---|
793 | } // aria-* attributes should be lowercase; suggest the lowercase version.
|
---|
794 |
|
---|
795 |
|
---|
796 | if (name !== correctName) {
|
---|
797 | error('Invalid ARIA attribute `%s`. Did you mean `%s`?', name, correctName);
|
---|
798 |
|
---|
799 | warnedProperties[name] = true;
|
---|
800 | return true;
|
---|
801 | }
|
---|
802 | }
|
---|
803 |
|
---|
804 | if (rARIA.test(name)) {
|
---|
805 | var lowerCasedName = name.toLowerCase();
|
---|
806 | var standardName = ariaProperties.hasOwnProperty(lowerCasedName) ? lowerCasedName : null; // If this is an aria-* attribute, but is not listed in the known DOM
|
---|
807 | // DOM properties, then it is an invalid aria-* attribute.
|
---|
808 |
|
---|
809 | if (standardName == null) {
|
---|
810 | warnedProperties[name] = true;
|
---|
811 | return false;
|
---|
812 | } // aria-* attributes should be lowercase; suggest the lowercase version.
|
---|
813 |
|
---|
814 |
|
---|
815 | if (name !== standardName) {
|
---|
816 | error('Unknown ARIA attribute `%s`. Did you mean `%s`?', name, standardName);
|
---|
817 |
|
---|
818 | warnedProperties[name] = true;
|
---|
819 | return true;
|
---|
820 | }
|
---|
821 | }
|
---|
822 | }
|
---|
823 |
|
---|
824 | return true;
|
---|
825 | }
|
---|
826 |
|
---|
827 | function warnInvalidARIAProps(type, props) {
|
---|
828 | {
|
---|
829 | var invalidProps = [];
|
---|
830 |
|
---|
831 | for (var key in props) {
|
---|
832 | var isValid = validateProperty(type, key);
|
---|
833 |
|
---|
834 | if (!isValid) {
|
---|
835 | invalidProps.push(key);
|
---|
836 | }
|
---|
837 | }
|
---|
838 |
|
---|
839 | var unknownPropString = invalidProps.map(function (prop) {
|
---|
840 | return '`' + prop + '`';
|
---|
841 | }).join(', ');
|
---|
842 |
|
---|
843 | if (invalidProps.length === 1) {
|
---|
844 | error('Invalid aria prop %s on <%s> tag. ' + 'For details, see https://reactjs.org/link/invalid-aria-props', unknownPropString, type);
|
---|
845 | } else if (invalidProps.length > 1) {
|
---|
846 | error('Invalid aria props %s on <%s> tag. ' + 'For details, see https://reactjs.org/link/invalid-aria-props', unknownPropString, type);
|
---|
847 | }
|
---|
848 | }
|
---|
849 | }
|
---|
850 |
|
---|
851 | function validateProperties(type, props) {
|
---|
852 | if (isCustomComponent(type, props)) {
|
---|
853 | return;
|
---|
854 | }
|
---|
855 |
|
---|
856 | warnInvalidARIAProps(type, props);
|
---|
857 | }
|
---|
858 |
|
---|
859 | var didWarnValueNull = false;
|
---|
860 | function validateProperties$1(type, props) {
|
---|
861 | {
|
---|
862 | if (type !== 'input' && type !== 'textarea' && type !== 'select') {
|
---|
863 | return;
|
---|
864 | }
|
---|
865 |
|
---|
866 | if (props != null && props.value === null && !didWarnValueNull) {
|
---|
867 | didWarnValueNull = true;
|
---|
868 |
|
---|
869 | if (type === 'select' && props.multiple) {
|
---|
870 | 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);
|
---|
871 | } else {
|
---|
872 | error('`value` prop on `%s` should not be null. ' + 'Consider using an empty string to clear the component or `undefined` ' + 'for uncontrolled components.', type);
|
---|
873 | }
|
---|
874 | }
|
---|
875 | }
|
---|
876 | }
|
---|
877 |
|
---|
878 | // When adding attributes to the HTML or SVG allowed attribute list, be sure to
|
---|
879 | // also add them to this module to ensure casing and incorrect name
|
---|
880 | // warnings.
|
---|
881 | var possibleStandardNames = {
|
---|
882 | // HTML
|
---|
883 | accept: 'accept',
|
---|
884 | acceptcharset: 'acceptCharset',
|
---|
885 | 'accept-charset': 'acceptCharset',
|
---|
886 | accesskey: 'accessKey',
|
---|
887 | action: 'action',
|
---|
888 | allowfullscreen: 'allowFullScreen',
|
---|
889 | alt: 'alt',
|
---|
890 | as: 'as',
|
---|
891 | async: 'async',
|
---|
892 | autocapitalize: 'autoCapitalize',
|
---|
893 | autocomplete: 'autoComplete',
|
---|
894 | autocorrect: 'autoCorrect',
|
---|
895 | autofocus: 'autoFocus',
|
---|
896 | autoplay: 'autoPlay',
|
---|
897 | autosave: 'autoSave',
|
---|
898 | capture: 'capture',
|
---|
899 | cellpadding: 'cellPadding',
|
---|
900 | cellspacing: 'cellSpacing',
|
---|
901 | challenge: 'challenge',
|
---|
902 | charset: 'charSet',
|
---|
903 | checked: 'checked',
|
---|
904 | children: 'children',
|
---|
905 | cite: 'cite',
|
---|
906 | class: 'className',
|
---|
907 | classid: 'classID',
|
---|
908 | classname: 'className',
|
---|
909 | cols: 'cols',
|
---|
910 | colspan: 'colSpan',
|
---|
911 | content: 'content',
|
---|
912 | contenteditable: 'contentEditable',
|
---|
913 | contextmenu: 'contextMenu',
|
---|
914 | controls: 'controls',
|
---|
915 | controlslist: 'controlsList',
|
---|
916 | coords: 'coords',
|
---|
917 | crossorigin: 'crossOrigin',
|
---|
918 | dangerouslysetinnerhtml: 'dangerouslySetInnerHTML',
|
---|
919 | data: 'data',
|
---|
920 | datetime: 'dateTime',
|
---|
921 | default: 'default',
|
---|
922 | defaultchecked: 'defaultChecked',
|
---|
923 | defaultvalue: 'defaultValue',
|
---|
924 | defer: 'defer',
|
---|
925 | dir: 'dir',
|
---|
926 | disabled: 'disabled',
|
---|
927 | disablepictureinpicture: 'disablePictureInPicture',
|
---|
928 | disableremoteplayback: 'disableRemotePlayback',
|
---|
929 | download: 'download',
|
---|
930 | draggable: 'draggable',
|
---|
931 | enctype: 'encType',
|
---|
932 | enterkeyhint: 'enterKeyHint',
|
---|
933 | for: 'htmlFor',
|
---|
934 | form: 'form',
|
---|
935 | formmethod: 'formMethod',
|
---|
936 | formaction: 'formAction',
|
---|
937 | formenctype: 'formEncType',
|
---|
938 | formnovalidate: 'formNoValidate',
|
---|
939 | formtarget: 'formTarget',
|
---|
940 | frameborder: 'frameBorder',
|
---|
941 | headers: 'headers',
|
---|
942 | height: 'height',
|
---|
943 | hidden: 'hidden',
|
---|
944 | high: 'high',
|
---|
945 | href: 'href',
|
---|
946 | hreflang: 'hrefLang',
|
---|
947 | htmlfor: 'htmlFor',
|
---|
948 | httpequiv: 'httpEquiv',
|
---|
949 | 'http-equiv': 'httpEquiv',
|
---|
950 | icon: 'icon',
|
---|
951 | id: 'id',
|
---|
952 | imagesizes: 'imageSizes',
|
---|
953 | imagesrcset: 'imageSrcSet',
|
---|
954 | innerhtml: 'innerHTML',
|
---|
955 | inputmode: 'inputMode',
|
---|
956 | integrity: 'integrity',
|
---|
957 | is: 'is',
|
---|
958 | itemid: 'itemID',
|
---|
959 | itemprop: 'itemProp',
|
---|
960 | itemref: 'itemRef',
|
---|
961 | itemscope: 'itemScope',
|
---|
962 | itemtype: 'itemType',
|
---|
963 | keyparams: 'keyParams',
|
---|
964 | keytype: 'keyType',
|
---|
965 | kind: 'kind',
|
---|
966 | label: 'label',
|
---|
967 | lang: 'lang',
|
---|
968 | list: 'list',
|
---|
969 | loop: 'loop',
|
---|
970 | low: 'low',
|
---|
971 | manifest: 'manifest',
|
---|
972 | marginwidth: 'marginWidth',
|
---|
973 | marginheight: 'marginHeight',
|
---|
974 | max: 'max',
|
---|
975 | maxlength: 'maxLength',
|
---|
976 | media: 'media',
|
---|
977 | mediagroup: 'mediaGroup',
|
---|
978 | method: 'method',
|
---|
979 | min: 'min',
|
---|
980 | minlength: 'minLength',
|
---|
981 | multiple: 'multiple',
|
---|
982 | muted: 'muted',
|
---|
983 | name: 'name',
|
---|
984 | nomodule: 'noModule',
|
---|
985 | nonce: 'nonce',
|
---|
986 | novalidate: 'noValidate',
|
---|
987 | open: 'open',
|
---|
988 | optimum: 'optimum',
|
---|
989 | pattern: 'pattern',
|
---|
990 | placeholder: 'placeholder',
|
---|
991 | playsinline: 'playsInline',
|
---|
992 | poster: 'poster',
|
---|
993 | preload: 'preload',
|
---|
994 | profile: 'profile',
|
---|
995 | radiogroup: 'radioGroup',
|
---|
996 | readonly: 'readOnly',
|
---|
997 | referrerpolicy: 'referrerPolicy',
|
---|
998 | rel: 'rel',
|
---|
999 | required: 'required',
|
---|
1000 | reversed: 'reversed',
|
---|
1001 | role: 'role',
|
---|
1002 | rows: 'rows',
|
---|
1003 | rowspan: 'rowSpan',
|
---|
1004 | sandbox: 'sandbox',
|
---|
1005 | scope: 'scope',
|
---|
1006 | scoped: 'scoped',
|
---|
1007 | scrolling: 'scrolling',
|
---|
1008 | seamless: 'seamless',
|
---|
1009 | selected: 'selected',
|
---|
1010 | shape: 'shape',
|
---|
1011 | size: 'size',
|
---|
1012 | sizes: 'sizes',
|
---|
1013 | span: 'span',
|
---|
1014 | spellcheck: 'spellCheck',
|
---|
1015 | src: 'src',
|
---|
1016 | srcdoc: 'srcDoc',
|
---|
1017 | srclang: 'srcLang',
|
---|
1018 | srcset: 'srcSet',
|
---|
1019 | start: 'start',
|
---|
1020 | step: 'step',
|
---|
1021 | style: 'style',
|
---|
1022 | summary: 'summary',
|
---|
1023 | tabindex: 'tabIndex',
|
---|
1024 | target: 'target',
|
---|
1025 | title: 'title',
|
---|
1026 | type: 'type',
|
---|
1027 | usemap: 'useMap',
|
---|
1028 | value: 'value',
|
---|
1029 | width: 'width',
|
---|
1030 | wmode: 'wmode',
|
---|
1031 | wrap: 'wrap',
|
---|
1032 | // SVG
|
---|
1033 | about: 'about',
|
---|
1034 | accentheight: 'accentHeight',
|
---|
1035 | 'accent-height': 'accentHeight',
|
---|
1036 | accumulate: 'accumulate',
|
---|
1037 | additive: 'additive',
|
---|
1038 | alignmentbaseline: 'alignmentBaseline',
|
---|
1039 | 'alignment-baseline': 'alignmentBaseline',
|
---|
1040 | allowreorder: 'allowReorder',
|
---|
1041 | alphabetic: 'alphabetic',
|
---|
1042 | amplitude: 'amplitude',
|
---|
1043 | arabicform: 'arabicForm',
|
---|
1044 | 'arabic-form': 'arabicForm',
|
---|
1045 | ascent: 'ascent',
|
---|
1046 | attributename: 'attributeName',
|
---|
1047 | attributetype: 'attributeType',
|
---|
1048 | autoreverse: 'autoReverse',
|
---|
1049 | azimuth: 'azimuth',
|
---|
1050 | basefrequency: 'baseFrequency',
|
---|
1051 | baselineshift: 'baselineShift',
|
---|
1052 | 'baseline-shift': 'baselineShift',
|
---|
1053 | baseprofile: 'baseProfile',
|
---|
1054 | bbox: 'bbox',
|
---|
1055 | begin: 'begin',
|
---|
1056 | bias: 'bias',
|
---|
1057 | by: 'by',
|
---|
1058 | calcmode: 'calcMode',
|
---|
1059 | capheight: 'capHeight',
|
---|
1060 | 'cap-height': 'capHeight',
|
---|
1061 | clip: 'clip',
|
---|
1062 | clippath: 'clipPath',
|
---|
1063 | 'clip-path': 'clipPath',
|
---|
1064 | clippathunits: 'clipPathUnits',
|
---|
1065 | cliprule: 'clipRule',
|
---|
1066 | 'clip-rule': 'clipRule',
|
---|
1067 | color: 'color',
|
---|
1068 | colorinterpolation: 'colorInterpolation',
|
---|
1069 | 'color-interpolation': 'colorInterpolation',
|
---|
1070 | colorinterpolationfilters: 'colorInterpolationFilters',
|
---|
1071 | 'color-interpolation-filters': 'colorInterpolationFilters',
|
---|
1072 | colorprofile: 'colorProfile',
|
---|
1073 | 'color-profile': 'colorProfile',
|
---|
1074 | colorrendering: 'colorRendering',
|
---|
1075 | 'color-rendering': 'colorRendering',
|
---|
1076 | contentscripttype: 'contentScriptType',
|
---|
1077 | contentstyletype: 'contentStyleType',
|
---|
1078 | cursor: 'cursor',
|
---|
1079 | cx: 'cx',
|
---|
1080 | cy: 'cy',
|
---|
1081 | d: 'd',
|
---|
1082 | datatype: 'datatype',
|
---|
1083 | decelerate: 'decelerate',
|
---|
1084 | descent: 'descent',
|
---|
1085 | diffuseconstant: 'diffuseConstant',
|
---|
1086 | direction: 'direction',
|
---|
1087 | display: 'display',
|
---|
1088 | divisor: 'divisor',
|
---|
1089 | dominantbaseline: 'dominantBaseline',
|
---|
1090 | 'dominant-baseline': 'dominantBaseline',
|
---|
1091 | dur: 'dur',
|
---|
1092 | dx: 'dx',
|
---|
1093 | dy: 'dy',
|
---|
1094 | edgemode: 'edgeMode',
|
---|
1095 | elevation: 'elevation',
|
---|
1096 | enablebackground: 'enableBackground',
|
---|
1097 | 'enable-background': 'enableBackground',
|
---|
1098 | end: 'end',
|
---|
1099 | exponent: 'exponent',
|
---|
1100 | externalresourcesrequired: 'externalResourcesRequired',
|
---|
1101 | fill: 'fill',
|
---|
1102 | fillopacity: 'fillOpacity',
|
---|
1103 | 'fill-opacity': 'fillOpacity',
|
---|
1104 | fillrule: 'fillRule',
|
---|
1105 | 'fill-rule': 'fillRule',
|
---|
1106 | filter: 'filter',
|
---|
1107 | filterres: 'filterRes',
|
---|
1108 | filterunits: 'filterUnits',
|
---|
1109 | floodopacity: 'floodOpacity',
|
---|
1110 | 'flood-opacity': 'floodOpacity',
|
---|
1111 | floodcolor: 'floodColor',
|
---|
1112 | 'flood-color': 'floodColor',
|
---|
1113 | focusable: 'focusable',
|
---|
1114 | fontfamily: 'fontFamily',
|
---|
1115 | 'font-family': 'fontFamily',
|
---|
1116 | fontsize: 'fontSize',
|
---|
1117 | 'font-size': 'fontSize',
|
---|
1118 | fontsizeadjust: 'fontSizeAdjust',
|
---|
1119 | 'font-size-adjust': 'fontSizeAdjust',
|
---|
1120 | fontstretch: 'fontStretch',
|
---|
1121 | 'font-stretch': 'fontStretch',
|
---|
1122 | fontstyle: 'fontStyle',
|
---|
1123 | 'font-style': 'fontStyle',
|
---|
1124 | fontvariant: 'fontVariant',
|
---|
1125 | 'font-variant': 'fontVariant',
|
---|
1126 | fontweight: 'fontWeight',
|
---|
1127 | 'font-weight': 'fontWeight',
|
---|
1128 | format: 'format',
|
---|
1129 | from: 'from',
|
---|
1130 | fx: 'fx',
|
---|
1131 | fy: 'fy',
|
---|
1132 | g1: 'g1',
|
---|
1133 | g2: 'g2',
|
---|
1134 | glyphname: 'glyphName',
|
---|
1135 | 'glyph-name': 'glyphName',
|
---|
1136 | glyphorientationhorizontal: 'glyphOrientationHorizontal',
|
---|
1137 | 'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
|
---|
1138 | glyphorientationvertical: 'glyphOrientationVertical',
|
---|
1139 | 'glyph-orientation-vertical': 'glyphOrientationVertical',
|
---|
1140 | glyphref: 'glyphRef',
|
---|
1141 | gradienttransform: 'gradientTransform',
|
---|
1142 | gradientunits: 'gradientUnits',
|
---|
1143 | hanging: 'hanging',
|
---|
1144 | horizadvx: 'horizAdvX',
|
---|
1145 | 'horiz-adv-x': 'horizAdvX',
|
---|
1146 | horizoriginx: 'horizOriginX',
|
---|
1147 | 'horiz-origin-x': 'horizOriginX',
|
---|
1148 | ideographic: 'ideographic',
|
---|
1149 | imagerendering: 'imageRendering',
|
---|
1150 | 'image-rendering': 'imageRendering',
|
---|
1151 | in2: 'in2',
|
---|
1152 | in: 'in',
|
---|
1153 | inlist: 'inlist',
|
---|
1154 | intercept: 'intercept',
|
---|
1155 | k1: 'k1',
|
---|
1156 | k2: 'k2',
|
---|
1157 | k3: 'k3',
|
---|
1158 | k4: 'k4',
|
---|
1159 | k: 'k',
|
---|
1160 | kernelmatrix: 'kernelMatrix',
|
---|
1161 | kernelunitlength: 'kernelUnitLength',
|
---|
1162 | kerning: 'kerning',
|
---|
1163 | keypoints: 'keyPoints',
|
---|
1164 | keysplines: 'keySplines',
|
---|
1165 | keytimes: 'keyTimes',
|
---|
1166 | lengthadjust: 'lengthAdjust',
|
---|
1167 | letterspacing: 'letterSpacing',
|
---|
1168 | 'letter-spacing': 'letterSpacing',
|
---|
1169 | lightingcolor: 'lightingColor',
|
---|
1170 | 'lighting-color': 'lightingColor',
|
---|
1171 | limitingconeangle: 'limitingConeAngle',
|
---|
1172 | local: 'local',
|
---|
1173 | markerend: 'markerEnd',
|
---|
1174 | 'marker-end': 'markerEnd',
|
---|
1175 | markerheight: 'markerHeight',
|
---|
1176 | markermid: 'markerMid',
|
---|
1177 | 'marker-mid': 'markerMid',
|
---|
1178 | markerstart: 'markerStart',
|
---|
1179 | 'marker-start': 'markerStart',
|
---|
1180 | markerunits: 'markerUnits',
|
---|
1181 | markerwidth: 'markerWidth',
|
---|
1182 | mask: 'mask',
|
---|
1183 | maskcontentunits: 'maskContentUnits',
|
---|
1184 | maskunits: 'maskUnits',
|
---|
1185 | mathematical: 'mathematical',
|
---|
1186 | mode: 'mode',
|
---|
1187 | numoctaves: 'numOctaves',
|
---|
1188 | offset: 'offset',
|
---|
1189 | opacity: 'opacity',
|
---|
1190 | operator: 'operator',
|
---|
1191 | order: 'order',
|
---|
1192 | orient: 'orient',
|
---|
1193 | orientation: 'orientation',
|
---|
1194 | origin: 'origin',
|
---|
1195 | overflow: 'overflow',
|
---|
1196 | overlineposition: 'overlinePosition',
|
---|
1197 | 'overline-position': 'overlinePosition',
|
---|
1198 | overlinethickness: 'overlineThickness',
|
---|
1199 | 'overline-thickness': 'overlineThickness',
|
---|
1200 | paintorder: 'paintOrder',
|
---|
1201 | 'paint-order': 'paintOrder',
|
---|
1202 | panose1: 'panose1',
|
---|
1203 | 'panose-1': 'panose1',
|
---|
1204 | pathlength: 'pathLength',
|
---|
1205 | patterncontentunits: 'patternContentUnits',
|
---|
1206 | patterntransform: 'patternTransform',
|
---|
1207 | patternunits: 'patternUnits',
|
---|
1208 | pointerevents: 'pointerEvents',
|
---|
1209 | 'pointer-events': 'pointerEvents',
|
---|
1210 | points: 'points',
|
---|
1211 | pointsatx: 'pointsAtX',
|
---|
1212 | pointsaty: 'pointsAtY',
|
---|
1213 | pointsatz: 'pointsAtZ',
|
---|
1214 | prefix: 'prefix',
|
---|
1215 | preservealpha: 'preserveAlpha',
|
---|
1216 | preserveaspectratio: 'preserveAspectRatio',
|
---|
1217 | primitiveunits: 'primitiveUnits',
|
---|
1218 | property: 'property',
|
---|
1219 | r: 'r',
|
---|
1220 | radius: 'radius',
|
---|
1221 | refx: 'refX',
|
---|
1222 | refy: 'refY',
|
---|
1223 | renderingintent: 'renderingIntent',
|
---|
1224 | 'rendering-intent': 'renderingIntent',
|
---|
1225 | repeatcount: 'repeatCount',
|
---|
1226 | repeatdur: 'repeatDur',
|
---|
1227 | requiredextensions: 'requiredExtensions',
|
---|
1228 | requiredfeatures: 'requiredFeatures',
|
---|
1229 | resource: 'resource',
|
---|
1230 | restart: 'restart',
|
---|
1231 | result: 'result',
|
---|
1232 | results: 'results',
|
---|
1233 | rotate: 'rotate',
|
---|
1234 | rx: 'rx',
|
---|
1235 | ry: 'ry',
|
---|
1236 | scale: 'scale',
|
---|
1237 | security: 'security',
|
---|
1238 | seed: 'seed',
|
---|
1239 | shaperendering: 'shapeRendering',
|
---|
1240 | 'shape-rendering': 'shapeRendering',
|
---|
1241 | slope: 'slope',
|
---|
1242 | spacing: 'spacing',
|
---|
1243 | specularconstant: 'specularConstant',
|
---|
1244 | specularexponent: 'specularExponent',
|
---|
1245 | speed: 'speed',
|
---|
1246 | spreadmethod: 'spreadMethod',
|
---|
1247 | startoffset: 'startOffset',
|
---|
1248 | stddeviation: 'stdDeviation',
|
---|
1249 | stemh: 'stemh',
|
---|
1250 | stemv: 'stemv',
|
---|
1251 | stitchtiles: 'stitchTiles',
|
---|
1252 | stopcolor: 'stopColor',
|
---|
1253 | 'stop-color': 'stopColor',
|
---|
1254 | stopopacity: 'stopOpacity',
|
---|
1255 | 'stop-opacity': 'stopOpacity',
|
---|
1256 | strikethroughposition: 'strikethroughPosition',
|
---|
1257 | 'strikethrough-position': 'strikethroughPosition',
|
---|
1258 | strikethroughthickness: 'strikethroughThickness',
|
---|
1259 | 'strikethrough-thickness': 'strikethroughThickness',
|
---|
1260 | string: 'string',
|
---|
1261 | stroke: 'stroke',
|
---|
1262 | strokedasharray: 'strokeDasharray',
|
---|
1263 | 'stroke-dasharray': 'strokeDasharray',
|
---|
1264 | strokedashoffset: 'strokeDashoffset',
|
---|
1265 | 'stroke-dashoffset': 'strokeDashoffset',
|
---|
1266 | strokelinecap: 'strokeLinecap',
|
---|
1267 | 'stroke-linecap': 'strokeLinecap',
|
---|
1268 | strokelinejoin: 'strokeLinejoin',
|
---|
1269 | 'stroke-linejoin': 'strokeLinejoin',
|
---|
1270 | strokemiterlimit: 'strokeMiterlimit',
|
---|
1271 | 'stroke-miterlimit': 'strokeMiterlimit',
|
---|
1272 | strokewidth: 'strokeWidth',
|
---|
1273 | 'stroke-width': 'strokeWidth',
|
---|
1274 | strokeopacity: 'strokeOpacity',
|
---|
1275 | 'stroke-opacity': 'strokeOpacity',
|
---|
1276 | suppresscontenteditablewarning: 'suppressContentEditableWarning',
|
---|
1277 | suppresshydrationwarning: 'suppressHydrationWarning',
|
---|
1278 | surfacescale: 'surfaceScale',
|
---|
1279 | systemlanguage: 'systemLanguage',
|
---|
1280 | tablevalues: 'tableValues',
|
---|
1281 | targetx: 'targetX',
|
---|
1282 | targety: 'targetY',
|
---|
1283 | textanchor: 'textAnchor',
|
---|
1284 | 'text-anchor': 'textAnchor',
|
---|
1285 | textdecoration: 'textDecoration',
|
---|
1286 | 'text-decoration': 'textDecoration',
|
---|
1287 | textlength: 'textLength',
|
---|
1288 | textrendering: 'textRendering',
|
---|
1289 | 'text-rendering': 'textRendering',
|
---|
1290 | to: 'to',
|
---|
1291 | transform: 'transform',
|
---|
1292 | typeof: 'typeof',
|
---|
1293 | u1: 'u1',
|
---|
1294 | u2: 'u2',
|
---|
1295 | underlineposition: 'underlinePosition',
|
---|
1296 | 'underline-position': 'underlinePosition',
|
---|
1297 | underlinethickness: 'underlineThickness',
|
---|
1298 | 'underline-thickness': 'underlineThickness',
|
---|
1299 | unicode: 'unicode',
|
---|
1300 | unicodebidi: 'unicodeBidi',
|
---|
1301 | 'unicode-bidi': 'unicodeBidi',
|
---|
1302 | unicoderange: 'unicodeRange',
|
---|
1303 | 'unicode-range': 'unicodeRange',
|
---|
1304 | unitsperem: 'unitsPerEm',
|
---|
1305 | 'units-per-em': 'unitsPerEm',
|
---|
1306 | unselectable: 'unselectable',
|
---|
1307 | valphabetic: 'vAlphabetic',
|
---|
1308 | 'v-alphabetic': 'vAlphabetic',
|
---|
1309 | values: 'values',
|
---|
1310 | vectoreffect: 'vectorEffect',
|
---|
1311 | 'vector-effect': 'vectorEffect',
|
---|
1312 | version: 'version',
|
---|
1313 | vertadvy: 'vertAdvY',
|
---|
1314 | 'vert-adv-y': 'vertAdvY',
|
---|
1315 | vertoriginx: 'vertOriginX',
|
---|
1316 | 'vert-origin-x': 'vertOriginX',
|
---|
1317 | vertoriginy: 'vertOriginY',
|
---|
1318 | 'vert-origin-y': 'vertOriginY',
|
---|
1319 | vhanging: 'vHanging',
|
---|
1320 | 'v-hanging': 'vHanging',
|
---|
1321 | videographic: 'vIdeographic',
|
---|
1322 | 'v-ideographic': 'vIdeographic',
|
---|
1323 | viewbox: 'viewBox',
|
---|
1324 | viewtarget: 'viewTarget',
|
---|
1325 | visibility: 'visibility',
|
---|
1326 | vmathematical: 'vMathematical',
|
---|
1327 | 'v-mathematical': 'vMathematical',
|
---|
1328 | vocab: 'vocab',
|
---|
1329 | widths: 'widths',
|
---|
1330 | wordspacing: 'wordSpacing',
|
---|
1331 | 'word-spacing': 'wordSpacing',
|
---|
1332 | writingmode: 'writingMode',
|
---|
1333 | 'writing-mode': 'writingMode',
|
---|
1334 | x1: 'x1',
|
---|
1335 | x2: 'x2',
|
---|
1336 | x: 'x',
|
---|
1337 | xchannelselector: 'xChannelSelector',
|
---|
1338 | xheight: 'xHeight',
|
---|
1339 | 'x-height': 'xHeight',
|
---|
1340 | xlinkactuate: 'xlinkActuate',
|
---|
1341 | 'xlink:actuate': 'xlinkActuate',
|
---|
1342 | xlinkarcrole: 'xlinkArcrole',
|
---|
1343 | 'xlink:arcrole': 'xlinkArcrole',
|
---|
1344 | xlinkhref: 'xlinkHref',
|
---|
1345 | 'xlink:href': 'xlinkHref',
|
---|
1346 | xlinkrole: 'xlinkRole',
|
---|
1347 | 'xlink:role': 'xlinkRole',
|
---|
1348 | xlinkshow: 'xlinkShow',
|
---|
1349 | 'xlink:show': 'xlinkShow',
|
---|
1350 | xlinktitle: 'xlinkTitle',
|
---|
1351 | 'xlink:title': 'xlinkTitle',
|
---|
1352 | xlinktype: 'xlinkType',
|
---|
1353 | 'xlink:type': 'xlinkType',
|
---|
1354 | xmlbase: 'xmlBase',
|
---|
1355 | 'xml:base': 'xmlBase',
|
---|
1356 | xmllang: 'xmlLang',
|
---|
1357 | 'xml:lang': 'xmlLang',
|
---|
1358 | xmlns: 'xmlns',
|
---|
1359 | 'xml:space': 'xmlSpace',
|
---|
1360 | xmlnsxlink: 'xmlnsXlink',
|
---|
1361 | 'xmlns:xlink': 'xmlnsXlink',
|
---|
1362 | xmlspace: 'xmlSpace',
|
---|
1363 | y1: 'y1',
|
---|
1364 | y2: 'y2',
|
---|
1365 | y: 'y',
|
---|
1366 | ychannelselector: 'yChannelSelector',
|
---|
1367 | z: 'z',
|
---|
1368 | zoomandpan: 'zoomAndPan'
|
---|
1369 | };
|
---|
1370 |
|
---|
1371 | var validateProperty$1 = function () {};
|
---|
1372 |
|
---|
1373 | {
|
---|
1374 | var warnedProperties$1 = {};
|
---|
1375 | var EVENT_NAME_REGEX = /^on./;
|
---|
1376 | var INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/;
|
---|
1377 | var rARIA$1 = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
1378 | var rARIACamel$1 = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
|
---|
1379 |
|
---|
1380 | validateProperty$1 = function (tagName, name, value, eventRegistry) {
|
---|
1381 | if (hasOwnProperty.call(warnedProperties$1, name) && warnedProperties$1[name]) {
|
---|
1382 | return true;
|
---|
1383 | }
|
---|
1384 |
|
---|
1385 | var lowerCasedName = name.toLowerCase();
|
---|
1386 |
|
---|
1387 | if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
|
---|
1388 | 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.');
|
---|
1389 |
|
---|
1390 | warnedProperties$1[name] = true;
|
---|
1391 | return true;
|
---|
1392 | } // We can't rely on the event system being injected on the server.
|
---|
1393 |
|
---|
1394 |
|
---|
1395 | if (eventRegistry != null) {
|
---|
1396 | var registrationNameDependencies = eventRegistry.registrationNameDependencies,
|
---|
1397 | possibleRegistrationNames = eventRegistry.possibleRegistrationNames;
|
---|
1398 |
|
---|
1399 | if (registrationNameDependencies.hasOwnProperty(name)) {
|
---|
1400 | return true;
|
---|
1401 | }
|
---|
1402 |
|
---|
1403 | var registrationName = possibleRegistrationNames.hasOwnProperty(lowerCasedName) ? possibleRegistrationNames[lowerCasedName] : null;
|
---|
1404 |
|
---|
1405 | if (registrationName != null) {
|
---|
1406 | error('Invalid event handler property `%s`. Did you mean `%s`?', name, registrationName);
|
---|
1407 |
|
---|
1408 | warnedProperties$1[name] = true;
|
---|
1409 | return true;
|
---|
1410 | }
|
---|
1411 |
|
---|
1412 | if (EVENT_NAME_REGEX.test(name)) {
|
---|
1413 | error('Unknown event handler property `%s`. It will be ignored.', name);
|
---|
1414 |
|
---|
1415 | warnedProperties$1[name] = true;
|
---|
1416 | return true;
|
---|
1417 | }
|
---|
1418 | } else if (EVENT_NAME_REGEX.test(name)) {
|
---|
1419 | // If no event plugins have been injected, we are in a server environment.
|
---|
1420 | // So we can't tell if the event name is correct for sure, but we can filter
|
---|
1421 | // out known bad ones like `onclick`. We can't suggest a specific replacement though.
|
---|
1422 | if (INVALID_EVENT_NAME_REGEX.test(name)) {
|
---|
1423 | error('Invalid event handler property `%s`. ' + 'React events use the camelCase naming convention, for example `onClick`.', name);
|
---|
1424 | }
|
---|
1425 |
|
---|
1426 | warnedProperties$1[name] = true;
|
---|
1427 | return true;
|
---|
1428 | } // Let the ARIA attribute hook validate ARIA attributes
|
---|
1429 |
|
---|
1430 |
|
---|
1431 | if (rARIA$1.test(name) || rARIACamel$1.test(name)) {
|
---|
1432 | return true;
|
---|
1433 | }
|
---|
1434 |
|
---|
1435 | if (lowerCasedName === 'innerhtml') {
|
---|
1436 | error('Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.');
|
---|
1437 |
|
---|
1438 | warnedProperties$1[name] = true;
|
---|
1439 | return true;
|
---|
1440 | }
|
---|
1441 |
|
---|
1442 | if (lowerCasedName === 'aria') {
|
---|
1443 | error('The `aria` attribute is reserved for future use in React. ' + 'Pass individual `aria-` attributes instead.');
|
---|
1444 |
|
---|
1445 | warnedProperties$1[name] = true;
|
---|
1446 | return true;
|
---|
1447 | }
|
---|
1448 |
|
---|
1449 | if (lowerCasedName === 'is' && value !== null && value !== undefined && typeof value !== 'string') {
|
---|
1450 | error('Received a `%s` for a string attribute `is`. If this is expected, cast ' + 'the value to a string.', typeof value);
|
---|
1451 |
|
---|
1452 | warnedProperties$1[name] = true;
|
---|
1453 | return true;
|
---|
1454 | }
|
---|
1455 |
|
---|
1456 | if (typeof value === 'number' && isNaN(value)) {
|
---|
1457 | error('Received NaN for the `%s` attribute. If this is expected, cast ' + 'the value to a string.', name);
|
---|
1458 |
|
---|
1459 | warnedProperties$1[name] = true;
|
---|
1460 | return true;
|
---|
1461 | }
|
---|
1462 |
|
---|
1463 | var propertyInfo = getPropertyInfo(name);
|
---|
1464 | var isReserved = propertyInfo !== null && propertyInfo.type === RESERVED; // Known attributes should match the casing specified in the property config.
|
---|
1465 |
|
---|
1466 | if (possibleStandardNames.hasOwnProperty(lowerCasedName)) {
|
---|
1467 | var standardName = possibleStandardNames[lowerCasedName];
|
---|
1468 |
|
---|
1469 | if (standardName !== name) {
|
---|
1470 | error('Invalid DOM property `%s`. Did you mean `%s`?', name, standardName);
|
---|
1471 |
|
---|
1472 | warnedProperties$1[name] = true;
|
---|
1473 | return true;
|
---|
1474 | }
|
---|
1475 | } else if (!isReserved && name !== lowerCasedName) {
|
---|
1476 | // Unknown attributes should have lowercase casing since that's how they
|
---|
1477 | // will be cased anyway with server rendering.
|
---|
1478 | 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);
|
---|
1479 |
|
---|
1480 | warnedProperties$1[name] = true;
|
---|
1481 | return true;
|
---|
1482 | }
|
---|
1483 |
|
---|
1484 | if (typeof value === 'boolean' && shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
|
---|
1485 | if (value) {
|
---|
1486 | 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);
|
---|
1487 | } else {
|
---|
1488 | 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);
|
---|
1489 | }
|
---|
1490 |
|
---|
1491 | warnedProperties$1[name] = true;
|
---|
1492 | return true;
|
---|
1493 | } // Now that we've validated casing, do not validate
|
---|
1494 | // data types for reserved props
|
---|
1495 |
|
---|
1496 |
|
---|
1497 | if (isReserved) {
|
---|
1498 | return true;
|
---|
1499 | } // Warn when a known attribute is a bad type
|
---|
1500 |
|
---|
1501 |
|
---|
1502 | if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
|
---|
1503 | warnedProperties$1[name] = true;
|
---|
1504 | return false;
|
---|
1505 | } // Warn when passing the strings 'false' or 'true' into a boolean prop
|
---|
1506 |
|
---|
1507 |
|
---|
1508 | if ((value === 'false' || value === 'true') && propertyInfo !== null && propertyInfo.type === BOOLEAN) {
|
---|
1509 | 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);
|
---|
1510 |
|
---|
1511 | warnedProperties$1[name] = true;
|
---|
1512 | return true;
|
---|
1513 | }
|
---|
1514 |
|
---|
1515 | return true;
|
---|
1516 | };
|
---|
1517 | }
|
---|
1518 |
|
---|
1519 | var warnUnknownProperties = function (type, props, eventRegistry) {
|
---|
1520 | {
|
---|
1521 | var unknownProps = [];
|
---|
1522 |
|
---|
1523 | for (var key in props) {
|
---|
1524 | var isValid = validateProperty$1(type, key, props[key], eventRegistry);
|
---|
1525 |
|
---|
1526 | if (!isValid) {
|
---|
1527 | unknownProps.push(key);
|
---|
1528 | }
|
---|
1529 | }
|
---|
1530 |
|
---|
1531 | var unknownPropString = unknownProps.map(function (prop) {
|
---|
1532 | return '`' + prop + '`';
|
---|
1533 | }).join(', ');
|
---|
1534 |
|
---|
1535 | if (unknownProps.length === 1) {
|
---|
1536 | 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);
|
---|
1537 | } else if (unknownProps.length > 1) {
|
---|
1538 | 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);
|
---|
1539 | }
|
---|
1540 | }
|
---|
1541 | };
|
---|
1542 |
|
---|
1543 | function validateProperties$2(type, props, eventRegistry) {
|
---|
1544 | if (isCustomComponent(type, props)) {
|
---|
1545 | return;
|
---|
1546 | }
|
---|
1547 |
|
---|
1548 | warnUnknownProperties(type, props, eventRegistry);
|
---|
1549 | }
|
---|
1550 |
|
---|
1551 | var warnValidStyle = function () {};
|
---|
1552 |
|
---|
1553 | {
|
---|
1554 | // 'msTransform' is correct, but the other prefixes should be capitalized
|
---|
1555 | var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
|
---|
1556 | var msPattern = /^-ms-/;
|
---|
1557 | var hyphenPattern = /-(.)/g; // style values shouldn't contain a semicolon
|
---|
1558 |
|
---|
1559 | var badStyleValueWithSemicolonPattern = /;\s*$/;
|
---|
1560 | var warnedStyleNames = {};
|
---|
1561 | var warnedStyleValues = {};
|
---|
1562 | var warnedForNaNValue = false;
|
---|
1563 | var warnedForInfinityValue = false;
|
---|
1564 |
|
---|
1565 | var camelize = function (string) {
|
---|
1566 | return string.replace(hyphenPattern, function (_, character) {
|
---|
1567 | return character.toUpperCase();
|
---|
1568 | });
|
---|
1569 | };
|
---|
1570 |
|
---|
1571 | var warnHyphenatedStyleName = function (name) {
|
---|
1572 | if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
---|
1573 | return;
|
---|
1574 | }
|
---|
1575 |
|
---|
1576 | warnedStyleNames[name] = true;
|
---|
1577 |
|
---|
1578 | error('Unsupported style property %s. Did you mean %s?', name, // As Andi Smith suggests
|
---|
1579 | // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
|
---|
1580 | // is converted to lowercase `ms`.
|
---|
1581 | camelize(name.replace(msPattern, 'ms-')));
|
---|
1582 | };
|
---|
1583 |
|
---|
1584 | var warnBadVendoredStyleName = function (name) {
|
---|
1585 | if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
---|
1586 | return;
|
---|
1587 | }
|
---|
1588 |
|
---|
1589 | warnedStyleNames[name] = true;
|
---|
1590 |
|
---|
1591 | error('Unsupported vendor-prefixed style property %s. Did you mean %s?', name, name.charAt(0).toUpperCase() + name.slice(1));
|
---|
1592 | };
|
---|
1593 |
|
---|
1594 | var warnStyleValueWithSemicolon = function (name, value) {
|
---|
1595 | if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
|
---|
1596 | return;
|
---|
1597 | }
|
---|
1598 |
|
---|
1599 | warnedStyleValues[value] = true;
|
---|
1600 |
|
---|
1601 | error("Style property values shouldn't contain a semicolon. " + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, ''));
|
---|
1602 | };
|
---|
1603 |
|
---|
1604 | var warnStyleValueIsNaN = function (name, value) {
|
---|
1605 | if (warnedForNaNValue) {
|
---|
1606 | return;
|
---|
1607 | }
|
---|
1608 |
|
---|
1609 | warnedForNaNValue = true;
|
---|
1610 |
|
---|
1611 | error('`NaN` is an invalid value for the `%s` css style property.', name);
|
---|
1612 | };
|
---|
1613 |
|
---|
1614 | var warnStyleValueIsInfinity = function (name, value) {
|
---|
1615 | if (warnedForInfinityValue) {
|
---|
1616 | return;
|
---|
1617 | }
|
---|
1618 |
|
---|
1619 | warnedForInfinityValue = true;
|
---|
1620 |
|
---|
1621 | error('`Infinity` is an invalid value for the `%s` css style property.', name);
|
---|
1622 | };
|
---|
1623 |
|
---|
1624 | warnValidStyle = function (name, value) {
|
---|
1625 | if (name.indexOf('-') > -1) {
|
---|
1626 | warnHyphenatedStyleName(name);
|
---|
1627 | } else if (badVendoredStyleNamePattern.test(name)) {
|
---|
1628 | warnBadVendoredStyleName(name);
|
---|
1629 | } else if (badStyleValueWithSemicolonPattern.test(value)) {
|
---|
1630 | warnStyleValueWithSemicolon(name, value);
|
---|
1631 | }
|
---|
1632 |
|
---|
1633 | if (typeof value === 'number') {
|
---|
1634 | if (isNaN(value)) {
|
---|
1635 | warnStyleValueIsNaN(name, value);
|
---|
1636 | } else if (!isFinite(value)) {
|
---|
1637 | warnStyleValueIsInfinity(name, value);
|
---|
1638 | }
|
---|
1639 | }
|
---|
1640 | };
|
---|
1641 | }
|
---|
1642 |
|
---|
1643 | var warnValidStyle$1 = warnValidStyle;
|
---|
1644 |
|
---|
1645 | // code copied and modified from escape-html
|
---|
1646 | var matchHtmlRegExp = /["'&<>]/;
|
---|
1647 | /**
|
---|
1648 | * Escapes special characters and HTML entities in a given html string.
|
---|
1649 | *
|
---|
1650 | * @param {string} string HTML string to escape for later insertion
|
---|
1651 | * @return {string}
|
---|
1652 | * @public
|
---|
1653 | */
|
---|
1654 |
|
---|
1655 | function escapeHtml(string) {
|
---|
1656 | {
|
---|
1657 | checkHtmlStringCoercion(string);
|
---|
1658 | }
|
---|
1659 |
|
---|
1660 | var str = '' + string;
|
---|
1661 | var match = matchHtmlRegExp.exec(str);
|
---|
1662 |
|
---|
1663 | if (!match) {
|
---|
1664 | return str;
|
---|
1665 | }
|
---|
1666 |
|
---|
1667 | var escape;
|
---|
1668 | var html = '';
|
---|
1669 | var index;
|
---|
1670 | var lastIndex = 0;
|
---|
1671 |
|
---|
1672 | for (index = match.index; index < str.length; index++) {
|
---|
1673 | switch (str.charCodeAt(index)) {
|
---|
1674 | case 34:
|
---|
1675 | // "
|
---|
1676 | escape = '"';
|
---|
1677 | break;
|
---|
1678 |
|
---|
1679 | case 38:
|
---|
1680 | // &
|
---|
1681 | escape = '&';
|
---|
1682 | break;
|
---|
1683 |
|
---|
1684 | case 39:
|
---|
1685 | // '
|
---|
1686 | escape = '''; // modified from escape-html; used to be '''
|
---|
1687 |
|
---|
1688 | break;
|
---|
1689 |
|
---|
1690 | case 60:
|
---|
1691 | // <
|
---|
1692 | escape = '<';
|
---|
1693 | break;
|
---|
1694 |
|
---|
1695 | case 62:
|
---|
1696 | // >
|
---|
1697 | escape = '>';
|
---|
1698 | break;
|
---|
1699 |
|
---|
1700 | default:
|
---|
1701 | continue;
|
---|
1702 | }
|
---|
1703 |
|
---|
1704 | if (lastIndex !== index) {
|
---|
1705 | html += str.substring(lastIndex, index);
|
---|
1706 | }
|
---|
1707 |
|
---|
1708 | lastIndex = index + 1;
|
---|
1709 | html += escape;
|
---|
1710 | }
|
---|
1711 |
|
---|
1712 | return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
|
---|
1713 | } // end code copied and modified from escape-html
|
---|
1714 |
|
---|
1715 | /**
|
---|
1716 | * Escapes text to prevent scripting attacks.
|
---|
1717 | *
|
---|
1718 | * @param {*} text Text value to escape.
|
---|
1719 | * @return {string} An escaped string.
|
---|
1720 | */
|
---|
1721 |
|
---|
1722 |
|
---|
1723 | function escapeTextForBrowser(text) {
|
---|
1724 | if (typeof text === 'boolean' || typeof text === 'number') {
|
---|
1725 | // this shortcircuit helps perf for types that we know will never have
|
---|
1726 | // special characters, especially given that this function is used often
|
---|
1727 | // for numeric dom ids.
|
---|
1728 | return '' + text;
|
---|
1729 | }
|
---|
1730 |
|
---|
1731 | return escapeHtml(text);
|
---|
1732 | }
|
---|
1733 |
|
---|
1734 | var uppercasePattern = /([A-Z])/g;
|
---|
1735 | var msPattern$1 = /^ms-/;
|
---|
1736 | /**
|
---|
1737 | * Hyphenates a camelcased CSS property name, for example:
|
---|
1738 | *
|
---|
1739 | * > hyphenateStyleName('backgroundColor')
|
---|
1740 | * < "background-color"
|
---|
1741 | * > hyphenateStyleName('MozTransition')
|
---|
1742 | * < "-moz-transition"
|
---|
1743 | * > hyphenateStyleName('msTransition')
|
---|
1744 | * < "-ms-transition"
|
---|
1745 | *
|
---|
1746 | * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
|
---|
1747 | * is converted to `-ms-`.
|
---|
1748 | */
|
---|
1749 |
|
---|
1750 | function hyphenateStyleName(name) {
|
---|
1751 | return name.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern$1, '-ms-');
|
---|
1752 | }
|
---|
1753 |
|
---|
1754 | // and any newline or tab are filtered out as if they're not part of the URL.
|
---|
1755 | // https://url.spec.whatwg.org/#url-parsing
|
---|
1756 | // Tab or newline are defined as \r\n\t:
|
---|
1757 | // https://infra.spec.whatwg.org/#ascii-tab-or-newline
|
---|
1758 | // A C0 control is a code point in the range \u0000 NULL to \u001F
|
---|
1759 | // INFORMATION SEPARATOR ONE, inclusive:
|
---|
1760 | // https://infra.spec.whatwg.org/#c0-control-or-space
|
---|
1761 |
|
---|
1762 | /* eslint-disable max-len */
|
---|
1763 |
|
---|
1764 | 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;
|
---|
1765 | var didWarn = false;
|
---|
1766 |
|
---|
1767 | function sanitizeURL(url) {
|
---|
1768 | {
|
---|
1769 | if (!didWarn && isJavaScriptProtocol.test(url)) {
|
---|
1770 | didWarn = true;
|
---|
1771 |
|
---|
1772 | 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));
|
---|
1773 | }
|
---|
1774 | }
|
---|
1775 | }
|
---|
1776 |
|
---|
1777 | var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
|
---|
1778 |
|
---|
1779 | function isArray(a) {
|
---|
1780 | return isArrayImpl(a);
|
---|
1781 | }
|
---|
1782 |
|
---|
1783 | var startInlineScript = stringToPrecomputedChunk('<script>');
|
---|
1784 | var endInlineScript = stringToPrecomputedChunk('</script>');
|
---|
1785 | var startScriptSrc = stringToPrecomputedChunk('<script src="');
|
---|
1786 | var startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
|
---|
1787 | var endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
|
---|
1788 | /**
|
---|
1789 | * This escaping function is designed to work with bootstrapScriptContent only.
|
---|
1790 | * because we know we are escaping the entire script. We can avoid for instance
|
---|
1791 | * escaping html comment string sequences that are valid javascript as well because
|
---|
1792 | * if there are no sebsequent <script sequences the html parser will never enter
|
---|
1793 | * script data double escaped state (see: https://www.w3.org/TR/html53/syntax.html#script-data-double-escaped-state)
|
---|
1794 | *
|
---|
1795 | * While untrusted script content should be made safe before using this api it will
|
---|
1796 | * ensure that the script cannot be early terminated or never terminated state
|
---|
1797 | */
|
---|
1798 |
|
---|
1799 | function escapeBootstrapScriptContent(scriptText) {
|
---|
1800 | {
|
---|
1801 | checkHtmlStringCoercion(scriptText);
|
---|
1802 | }
|
---|
1803 |
|
---|
1804 | return ('' + scriptText).replace(scriptRegex, scriptReplacer);
|
---|
1805 | }
|
---|
1806 |
|
---|
1807 | var scriptRegex = /(<\/|<)(s)(cript)/gi;
|
---|
1808 |
|
---|
1809 | var scriptReplacer = function (match, prefix, s, suffix) {
|
---|
1810 | return "" + prefix + (s === 's' ? "\\u0073" : "\\u0053") + suffix;
|
---|
1811 | }; // Allows us to keep track of what we've already written so we can refer back to it.
|
---|
1812 |
|
---|
1813 |
|
---|
1814 | function createResponseState(identifierPrefix, nonce, bootstrapScriptContent, bootstrapScripts, bootstrapModules) {
|
---|
1815 | var idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
|
---|
1816 | var inlineScriptWithNonce = nonce === undefined ? startInlineScript : stringToPrecomputedChunk('<script nonce="' + escapeTextForBrowser(nonce) + '">');
|
---|
1817 | var bootstrapChunks = [];
|
---|
1818 |
|
---|
1819 | if (bootstrapScriptContent !== undefined) {
|
---|
1820 | bootstrapChunks.push(inlineScriptWithNonce, stringToChunk(escapeBootstrapScriptContent(bootstrapScriptContent)), endInlineScript);
|
---|
1821 | }
|
---|
1822 |
|
---|
1823 | if (bootstrapScripts !== undefined) {
|
---|
1824 | for (var i = 0; i < bootstrapScripts.length; i++) {
|
---|
1825 | bootstrapChunks.push(startScriptSrc, stringToChunk(escapeTextForBrowser(bootstrapScripts[i])), endAsyncScript);
|
---|
1826 | }
|
---|
1827 | }
|
---|
1828 |
|
---|
1829 | if (bootstrapModules !== undefined) {
|
---|
1830 | for (var _i = 0; _i < bootstrapModules.length; _i++) {
|
---|
1831 | bootstrapChunks.push(startModuleSrc, stringToChunk(escapeTextForBrowser(bootstrapModules[_i])), endAsyncScript);
|
---|
1832 | }
|
---|
1833 | }
|
---|
1834 |
|
---|
1835 | return {
|
---|
1836 | bootstrapChunks: bootstrapChunks,
|
---|
1837 | startInlineScript: inlineScriptWithNonce,
|
---|
1838 | placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
|
---|
1839 | segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
|
---|
1840 | boundaryPrefix: idPrefix + 'B:',
|
---|
1841 | idPrefix: idPrefix,
|
---|
1842 | nextSuspenseID: 0,
|
---|
1843 | sentCompleteSegmentFunction: false,
|
---|
1844 | sentCompleteBoundaryFunction: false,
|
---|
1845 | sentClientRenderFunction: false
|
---|
1846 | };
|
---|
1847 | } // Constants for the insertion mode we're currently writing in. We don't encode all HTML5 insertion
|
---|
1848 | // modes. We only include the variants as they matter for the sake of our purposes.
|
---|
1849 | // We don't actually provide the namespace therefore we use constants instead of the string.
|
---|
1850 |
|
---|
1851 | var ROOT_HTML_MODE = 0; // Used for the root most element tag.
|
---|
1852 |
|
---|
1853 | var HTML_MODE = 1;
|
---|
1854 | var SVG_MODE = 2;
|
---|
1855 | var MATHML_MODE = 3;
|
---|
1856 | var HTML_TABLE_MODE = 4;
|
---|
1857 | var HTML_TABLE_BODY_MODE = 5;
|
---|
1858 | var HTML_TABLE_ROW_MODE = 6;
|
---|
1859 | var HTML_COLGROUP_MODE = 7; // We have a greater than HTML_TABLE_MODE check elsewhere. If you add more cases here, make sure it
|
---|
1860 | // still makes sense
|
---|
1861 |
|
---|
1862 | function createFormatContext(insertionMode, selectedValue) {
|
---|
1863 | return {
|
---|
1864 | insertionMode: insertionMode,
|
---|
1865 | selectedValue: selectedValue
|
---|
1866 | };
|
---|
1867 | }
|
---|
1868 |
|
---|
1869 | function createRootFormatContext(namespaceURI) {
|
---|
1870 | var insertionMode = namespaceURI === 'http://www.w3.org/2000/svg' ? SVG_MODE : namespaceURI === 'http://www.w3.org/1998/Math/MathML' ? MATHML_MODE : ROOT_HTML_MODE;
|
---|
1871 | return createFormatContext(insertionMode, null);
|
---|
1872 | }
|
---|
1873 | function getChildFormatContext(parentContext, type, props) {
|
---|
1874 | switch (type) {
|
---|
1875 | case 'select':
|
---|
1876 | return createFormatContext(HTML_MODE, props.value != null ? props.value : props.defaultValue);
|
---|
1877 |
|
---|
1878 | case 'svg':
|
---|
1879 | return createFormatContext(SVG_MODE, null);
|
---|
1880 |
|
---|
1881 | case 'math':
|
---|
1882 | return createFormatContext(MATHML_MODE, null);
|
---|
1883 |
|
---|
1884 | case 'foreignObject':
|
---|
1885 | return createFormatContext(HTML_MODE, null);
|
---|
1886 | // Table parents are special in that their children can only be created at all if they're
|
---|
1887 | // wrapped in a table parent. So we need to encode that we're entering this mode.
|
---|
1888 |
|
---|
1889 | case 'table':
|
---|
1890 | return createFormatContext(HTML_TABLE_MODE, null);
|
---|
1891 |
|
---|
1892 | case 'thead':
|
---|
1893 | case 'tbody':
|
---|
1894 | case 'tfoot':
|
---|
1895 | return createFormatContext(HTML_TABLE_BODY_MODE, null);
|
---|
1896 |
|
---|
1897 | case 'colgroup':
|
---|
1898 | return createFormatContext(HTML_COLGROUP_MODE, null);
|
---|
1899 |
|
---|
1900 | case 'tr':
|
---|
1901 | return createFormatContext(HTML_TABLE_ROW_MODE, null);
|
---|
1902 | }
|
---|
1903 |
|
---|
1904 | if (parentContext.insertionMode >= HTML_TABLE_MODE) {
|
---|
1905 | // Whatever tag this was, it wasn't a table parent or other special parent, so we must have
|
---|
1906 | // entered plain HTML again.
|
---|
1907 | return createFormatContext(HTML_MODE, null);
|
---|
1908 | }
|
---|
1909 |
|
---|
1910 | if (parentContext.insertionMode === ROOT_HTML_MODE) {
|
---|
1911 | // We've emitted the root and is now in plain HTML mode.
|
---|
1912 | return createFormatContext(HTML_MODE, null);
|
---|
1913 | }
|
---|
1914 |
|
---|
1915 | return parentContext;
|
---|
1916 | }
|
---|
1917 | var UNINITIALIZED_SUSPENSE_BOUNDARY_ID = null;
|
---|
1918 | function assignSuspenseBoundaryID(responseState) {
|
---|
1919 | var generatedID = responseState.nextSuspenseID++;
|
---|
1920 | return stringToPrecomputedChunk(responseState.boundaryPrefix + generatedID.toString(16));
|
---|
1921 | }
|
---|
1922 | function makeId(responseState, treeId, localId) {
|
---|
1923 | var idPrefix = responseState.idPrefix;
|
---|
1924 | var id = ':' + idPrefix + 'R' + treeId; // Unless this is the first id at this level, append a number at the end
|
---|
1925 | // that represents the position of this useId hook among all the useId
|
---|
1926 | // hooks for this fiber.
|
---|
1927 |
|
---|
1928 | if (localId > 0) {
|
---|
1929 | id += 'H' + localId.toString(32);
|
---|
1930 | }
|
---|
1931 |
|
---|
1932 | return id + ':';
|
---|
1933 | }
|
---|
1934 |
|
---|
1935 | function encodeHTMLTextNode(text) {
|
---|
1936 | return escapeTextForBrowser(text);
|
---|
1937 | }
|
---|
1938 |
|
---|
1939 | var textSeparator = stringToPrecomputedChunk('<!-- -->');
|
---|
1940 | function pushTextInstance(target, text, responseState, textEmbedded) {
|
---|
1941 | if (text === '') {
|
---|
1942 | // Empty text doesn't have a DOM node representation and the hydration is aware of this.
|
---|
1943 | return textEmbedded;
|
---|
1944 | }
|
---|
1945 |
|
---|
1946 | if (textEmbedded) {
|
---|
1947 | target.push(textSeparator);
|
---|
1948 | }
|
---|
1949 |
|
---|
1950 | target.push(stringToChunk(encodeHTMLTextNode(text)));
|
---|
1951 | return true;
|
---|
1952 | } // Called when Fizz is done with a Segment. Currently the only purpose is to conditionally
|
---|
1953 | // emit a text separator when we don't know for sure it is safe to omit
|
---|
1954 |
|
---|
1955 | function pushSegmentFinale(target, responseState, lastPushedText, textEmbedded) {
|
---|
1956 | if (lastPushedText && textEmbedded) {
|
---|
1957 | target.push(textSeparator);
|
---|
1958 | }
|
---|
1959 | }
|
---|
1960 | var styleNameCache = new Map();
|
---|
1961 |
|
---|
1962 | function processStyleName(styleName) {
|
---|
1963 | var chunk = styleNameCache.get(styleName);
|
---|
1964 |
|
---|
1965 | if (chunk !== undefined) {
|
---|
1966 | return chunk;
|
---|
1967 | }
|
---|
1968 |
|
---|
1969 | var result = stringToPrecomputedChunk(escapeTextForBrowser(hyphenateStyleName(styleName)));
|
---|
1970 | styleNameCache.set(styleName, result);
|
---|
1971 | return result;
|
---|
1972 | }
|
---|
1973 |
|
---|
1974 | var styleAttributeStart = stringToPrecomputedChunk(' style="');
|
---|
1975 | var styleAssign = stringToPrecomputedChunk(':');
|
---|
1976 | var styleSeparator = stringToPrecomputedChunk(';');
|
---|
1977 |
|
---|
1978 | function pushStyle(target, responseState, style) {
|
---|
1979 | if (typeof style !== 'object') {
|
---|
1980 | 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.');
|
---|
1981 | }
|
---|
1982 |
|
---|
1983 | var isFirst = true;
|
---|
1984 |
|
---|
1985 | for (var styleName in style) {
|
---|
1986 | if (!hasOwnProperty.call(style, styleName)) {
|
---|
1987 | continue;
|
---|
1988 | } // If you provide unsafe user data here they can inject arbitrary CSS
|
---|
1989 | // which may be problematic (I couldn't repro this):
|
---|
1990 | // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
|
---|
1991 | // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
|
---|
1992 | // This is not an XSS hole but instead a potential CSS injection issue
|
---|
1993 | // which has lead to a greater discussion about how we're going to
|
---|
1994 | // trust URLs moving forward. See #2115901
|
---|
1995 |
|
---|
1996 |
|
---|
1997 | var styleValue = style[styleName];
|
---|
1998 |
|
---|
1999 | if (styleValue == null || typeof styleValue === 'boolean' || styleValue === '') {
|
---|
2000 | // TODO: We used to set empty string as a style with an empty value. Does that ever make sense?
|
---|
2001 | continue;
|
---|
2002 | }
|
---|
2003 |
|
---|
2004 | var nameChunk = void 0;
|
---|
2005 | var valueChunk = void 0;
|
---|
2006 | var isCustomProperty = styleName.indexOf('--') === 0;
|
---|
2007 |
|
---|
2008 | if (isCustomProperty) {
|
---|
2009 | nameChunk = stringToChunk(escapeTextForBrowser(styleName));
|
---|
2010 |
|
---|
2011 | {
|
---|
2012 | checkCSSPropertyStringCoercion(styleValue, styleName);
|
---|
2013 | }
|
---|
2014 |
|
---|
2015 | valueChunk = stringToChunk(escapeTextForBrowser(('' + styleValue).trim()));
|
---|
2016 | } else {
|
---|
2017 | {
|
---|
2018 | warnValidStyle$1(styleName, styleValue);
|
---|
2019 | }
|
---|
2020 |
|
---|
2021 | nameChunk = processStyleName(styleName);
|
---|
2022 |
|
---|
2023 | if (typeof styleValue === 'number') {
|
---|
2024 | if (styleValue !== 0 && !hasOwnProperty.call(isUnitlessNumber, styleName)) {
|
---|
2025 | valueChunk = stringToChunk(styleValue + 'px'); // Presumes implicit 'px' suffix for unitless numbers
|
---|
2026 | } else {
|
---|
2027 | valueChunk = stringToChunk('' + styleValue);
|
---|
2028 | }
|
---|
2029 | } else {
|
---|
2030 | {
|
---|
2031 | checkCSSPropertyStringCoercion(styleValue, styleName);
|
---|
2032 | }
|
---|
2033 |
|
---|
2034 | valueChunk = stringToChunk(escapeTextForBrowser(('' + styleValue).trim()));
|
---|
2035 | }
|
---|
2036 | }
|
---|
2037 |
|
---|
2038 | if (isFirst) {
|
---|
2039 | isFirst = false; // If it's first, we don't need any separators prefixed.
|
---|
2040 |
|
---|
2041 | target.push(styleAttributeStart, nameChunk, styleAssign, valueChunk);
|
---|
2042 | } else {
|
---|
2043 | target.push(styleSeparator, nameChunk, styleAssign, valueChunk);
|
---|
2044 | }
|
---|
2045 | }
|
---|
2046 |
|
---|
2047 | if (!isFirst) {
|
---|
2048 | target.push(attributeEnd);
|
---|
2049 | }
|
---|
2050 | }
|
---|
2051 |
|
---|
2052 | var attributeSeparator = stringToPrecomputedChunk(' ');
|
---|
2053 | var attributeAssign = stringToPrecomputedChunk('="');
|
---|
2054 | var attributeEnd = stringToPrecomputedChunk('"');
|
---|
2055 | var attributeEmptyString = stringToPrecomputedChunk('=""');
|
---|
2056 |
|
---|
2057 | function pushAttribute(target, responseState, name, value) {
|
---|
2058 | switch (name) {
|
---|
2059 | case 'style':
|
---|
2060 | {
|
---|
2061 | pushStyle(target, responseState, value);
|
---|
2062 | return;
|
---|
2063 | }
|
---|
2064 |
|
---|
2065 | case 'defaultValue':
|
---|
2066 | case 'defaultChecked': // These shouldn't be set as attributes on generic HTML elements.
|
---|
2067 |
|
---|
2068 | case 'innerHTML': // Must use dangerouslySetInnerHTML instead.
|
---|
2069 |
|
---|
2070 | case 'suppressContentEditableWarning':
|
---|
2071 | case 'suppressHydrationWarning':
|
---|
2072 | // Ignored. These are built-in to React on the client.
|
---|
2073 | return;
|
---|
2074 | }
|
---|
2075 |
|
---|
2076 | if ( // shouldIgnoreAttribute
|
---|
2077 | // We have already filtered out null/undefined and reserved words.
|
---|
2078 | name.length > 2 && (name[0] === 'o' || name[0] === 'O') && (name[1] === 'n' || name[1] === 'N')) {
|
---|
2079 | return;
|
---|
2080 | }
|
---|
2081 |
|
---|
2082 | var propertyInfo = getPropertyInfo(name);
|
---|
2083 |
|
---|
2084 | if (propertyInfo !== null) {
|
---|
2085 | // shouldRemoveAttribute
|
---|
2086 | switch (typeof value) {
|
---|
2087 | case 'function': // $FlowIssue symbol is perfectly valid here
|
---|
2088 |
|
---|
2089 | case 'symbol':
|
---|
2090 | // eslint-disable-line
|
---|
2091 | return;
|
---|
2092 |
|
---|
2093 | case 'boolean':
|
---|
2094 | {
|
---|
2095 | if (!propertyInfo.acceptsBooleans) {
|
---|
2096 | return;
|
---|
2097 | }
|
---|
2098 | }
|
---|
2099 | }
|
---|
2100 |
|
---|
2101 | var attributeName = propertyInfo.attributeName;
|
---|
2102 | var attributeNameChunk = stringToChunk(attributeName); // TODO: If it's known we can cache the chunk.
|
---|
2103 |
|
---|
2104 | switch (propertyInfo.type) {
|
---|
2105 | case BOOLEAN:
|
---|
2106 | if (value) {
|
---|
2107 | target.push(attributeSeparator, attributeNameChunk, attributeEmptyString);
|
---|
2108 | }
|
---|
2109 |
|
---|
2110 | return;
|
---|
2111 |
|
---|
2112 | case OVERLOADED_BOOLEAN:
|
---|
2113 | if (value === true) {
|
---|
2114 | target.push(attributeSeparator, attributeNameChunk, attributeEmptyString);
|
---|
2115 | } else if (value === false) ; else {
|
---|
2116 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2117 | }
|
---|
2118 |
|
---|
2119 | return;
|
---|
2120 |
|
---|
2121 | case NUMERIC:
|
---|
2122 | if (!isNaN(value)) {
|
---|
2123 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2124 | }
|
---|
2125 |
|
---|
2126 | break;
|
---|
2127 |
|
---|
2128 | case POSITIVE_NUMERIC:
|
---|
2129 | if (!isNaN(value) && value >= 1) {
|
---|
2130 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2131 | }
|
---|
2132 |
|
---|
2133 | break;
|
---|
2134 |
|
---|
2135 | default:
|
---|
2136 | if (propertyInfo.sanitizeURL) {
|
---|
2137 | {
|
---|
2138 | checkAttributeStringCoercion(value, attributeName);
|
---|
2139 | }
|
---|
2140 |
|
---|
2141 | value = '' + value;
|
---|
2142 | sanitizeURL(value);
|
---|
2143 | }
|
---|
2144 |
|
---|
2145 | target.push(attributeSeparator, attributeNameChunk, attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2146 | }
|
---|
2147 | } else if (isAttributeNameSafe(name)) {
|
---|
2148 | // shouldRemoveAttribute
|
---|
2149 | switch (typeof value) {
|
---|
2150 | case 'function': // $FlowIssue symbol is perfectly valid here
|
---|
2151 |
|
---|
2152 | case 'symbol':
|
---|
2153 | // eslint-disable-line
|
---|
2154 | return;
|
---|
2155 |
|
---|
2156 | case 'boolean':
|
---|
2157 | {
|
---|
2158 | var prefix = name.toLowerCase().slice(0, 5);
|
---|
2159 |
|
---|
2160 | if (prefix !== 'data-' && prefix !== 'aria-') {
|
---|
2161 | return;
|
---|
2162 | }
|
---|
2163 | }
|
---|
2164 | }
|
---|
2165 |
|
---|
2166 | target.push(attributeSeparator, stringToChunk(name), attributeAssign, stringToChunk(escapeTextForBrowser(value)), attributeEnd);
|
---|
2167 | }
|
---|
2168 | }
|
---|
2169 |
|
---|
2170 | var endOfStartTag = stringToPrecomputedChunk('>');
|
---|
2171 | var endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
|
---|
2172 |
|
---|
2173 | function pushInnerHTML(target, innerHTML, children) {
|
---|
2174 | if (innerHTML != null) {
|
---|
2175 | if (children != null) {
|
---|
2176 | throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.');
|
---|
2177 | }
|
---|
2178 |
|
---|
2179 | if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
|
---|
2180 | throw new Error('`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' + 'Please visit https://reactjs.org/link/dangerously-set-inner-html ' + 'for more information.');
|
---|
2181 | }
|
---|
2182 |
|
---|
2183 | var html = innerHTML.__html;
|
---|
2184 |
|
---|
2185 | if (html !== null && html !== undefined) {
|
---|
2186 | {
|
---|
2187 | checkHtmlStringCoercion(html);
|
---|
2188 | }
|
---|
2189 |
|
---|
2190 | target.push(stringToChunk('' + html));
|
---|
2191 | }
|
---|
2192 | }
|
---|
2193 | } // TODO: Move these to ResponseState so that we warn for every request.
|
---|
2194 | // It would help debugging in stateful servers (e.g. service worker).
|
---|
2195 |
|
---|
2196 |
|
---|
2197 | var didWarnDefaultInputValue = false;
|
---|
2198 | var didWarnDefaultChecked = false;
|
---|
2199 | var didWarnDefaultSelectValue = false;
|
---|
2200 | var didWarnDefaultTextareaValue = false;
|
---|
2201 | var didWarnInvalidOptionChildren = false;
|
---|
2202 | var didWarnInvalidOptionInnerHTML = false;
|
---|
2203 | var didWarnSelectedSetOnOption = false;
|
---|
2204 |
|
---|
2205 | function checkSelectProp(props, propName) {
|
---|
2206 | {
|
---|
2207 | var value = props[propName];
|
---|
2208 |
|
---|
2209 | if (value != null) {
|
---|
2210 | var array = isArray(value);
|
---|
2211 |
|
---|
2212 | if (props.multiple && !array) {
|
---|
2213 | error('The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.', propName);
|
---|
2214 | } else if (!props.multiple && array) {
|
---|
2215 | error('The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.', propName);
|
---|
2216 | }
|
---|
2217 | }
|
---|
2218 | }
|
---|
2219 | }
|
---|
2220 |
|
---|
2221 | function pushStartSelect(target, props, responseState) {
|
---|
2222 | {
|
---|
2223 | checkControlledValueProps('select', props);
|
---|
2224 | checkSelectProp(props, 'value');
|
---|
2225 | checkSelectProp(props, 'defaultValue');
|
---|
2226 |
|
---|
2227 | if (props.value !== undefined && props.defaultValue !== undefined && !didWarnDefaultSelectValue) {
|
---|
2228 | 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');
|
---|
2229 |
|
---|
2230 | didWarnDefaultSelectValue = true;
|
---|
2231 | }
|
---|
2232 | }
|
---|
2233 |
|
---|
2234 | target.push(startChunkForTag('select'));
|
---|
2235 | var children = null;
|
---|
2236 | var innerHTML = null;
|
---|
2237 |
|
---|
2238 | for (var propKey in props) {
|
---|
2239 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2240 | var propValue = props[propKey];
|
---|
2241 |
|
---|
2242 | if (propValue == null) {
|
---|
2243 | continue;
|
---|
2244 | }
|
---|
2245 |
|
---|
2246 | switch (propKey) {
|
---|
2247 | case 'children':
|
---|
2248 | children = propValue;
|
---|
2249 | break;
|
---|
2250 |
|
---|
2251 | case 'dangerouslySetInnerHTML':
|
---|
2252 | // TODO: This doesn't really make sense for select since it can't use the controlled
|
---|
2253 | // value in the innerHTML.
|
---|
2254 | innerHTML = propValue;
|
---|
2255 | break;
|
---|
2256 |
|
---|
2257 | case 'defaultValue':
|
---|
2258 | case 'value':
|
---|
2259 | // These are set on the Context instead and applied to the nested options.
|
---|
2260 | break;
|
---|
2261 |
|
---|
2262 | default:
|
---|
2263 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2264 | break;
|
---|
2265 | }
|
---|
2266 | }
|
---|
2267 | }
|
---|
2268 |
|
---|
2269 | target.push(endOfStartTag);
|
---|
2270 | pushInnerHTML(target, innerHTML, children);
|
---|
2271 | return children;
|
---|
2272 | }
|
---|
2273 |
|
---|
2274 | function flattenOptionChildren(children) {
|
---|
2275 | var content = ''; // Flatten children and warn if they aren't strings or numbers;
|
---|
2276 | // invalid types are ignored.
|
---|
2277 |
|
---|
2278 | React.Children.forEach(children, function (child) {
|
---|
2279 | if (child == null) {
|
---|
2280 | return;
|
---|
2281 | }
|
---|
2282 |
|
---|
2283 | content += child;
|
---|
2284 |
|
---|
2285 | {
|
---|
2286 | if (!didWarnInvalidOptionChildren && typeof child !== 'string' && typeof child !== 'number') {
|
---|
2287 | didWarnInvalidOptionChildren = true;
|
---|
2288 |
|
---|
2289 | error('Cannot infer the option value of complex children. ' + 'Pass a `value` prop or use a plain string as children to <option>.');
|
---|
2290 | }
|
---|
2291 | }
|
---|
2292 | });
|
---|
2293 | return content;
|
---|
2294 | }
|
---|
2295 |
|
---|
2296 | var selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
|
---|
2297 |
|
---|
2298 | function pushStartOption(target, props, responseState, formatContext) {
|
---|
2299 | var selectedValue = formatContext.selectedValue;
|
---|
2300 | target.push(startChunkForTag('option'));
|
---|
2301 | var children = null;
|
---|
2302 | var value = null;
|
---|
2303 | var selected = null;
|
---|
2304 | var innerHTML = null;
|
---|
2305 |
|
---|
2306 | for (var propKey in props) {
|
---|
2307 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2308 | var propValue = props[propKey];
|
---|
2309 |
|
---|
2310 | if (propValue == null) {
|
---|
2311 | continue;
|
---|
2312 | }
|
---|
2313 |
|
---|
2314 | switch (propKey) {
|
---|
2315 | case 'children':
|
---|
2316 | children = propValue;
|
---|
2317 | break;
|
---|
2318 |
|
---|
2319 | case 'selected':
|
---|
2320 | // ignore
|
---|
2321 | selected = propValue;
|
---|
2322 |
|
---|
2323 | {
|
---|
2324 | // TODO: Remove support for `selected` in <option>.
|
---|
2325 | if (!didWarnSelectedSetOnOption) {
|
---|
2326 | error('Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.');
|
---|
2327 |
|
---|
2328 | didWarnSelectedSetOnOption = true;
|
---|
2329 | }
|
---|
2330 | }
|
---|
2331 |
|
---|
2332 | break;
|
---|
2333 |
|
---|
2334 | case 'dangerouslySetInnerHTML':
|
---|
2335 | innerHTML = propValue;
|
---|
2336 | break;
|
---|
2337 | // eslint-disable-next-line-no-fallthrough
|
---|
2338 |
|
---|
2339 | case 'value':
|
---|
2340 | value = propValue;
|
---|
2341 | // We intentionally fallthrough to also set the attribute on the node.
|
---|
2342 | // eslint-disable-next-line-no-fallthrough
|
---|
2343 |
|
---|
2344 | default:
|
---|
2345 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2346 | break;
|
---|
2347 | }
|
---|
2348 | }
|
---|
2349 | }
|
---|
2350 |
|
---|
2351 | if (selectedValue != null) {
|
---|
2352 | var stringValue;
|
---|
2353 |
|
---|
2354 | if (value !== null) {
|
---|
2355 | {
|
---|
2356 | checkAttributeStringCoercion(value, 'value');
|
---|
2357 | }
|
---|
2358 |
|
---|
2359 | stringValue = '' + value;
|
---|
2360 | } else {
|
---|
2361 | {
|
---|
2362 | if (innerHTML !== null) {
|
---|
2363 | if (!didWarnInvalidOptionInnerHTML) {
|
---|
2364 | didWarnInvalidOptionInnerHTML = true;
|
---|
2365 |
|
---|
2366 | error('Pass a `value` prop if you set dangerouslyInnerHTML so React knows ' + 'which value should be selected.');
|
---|
2367 | }
|
---|
2368 | }
|
---|
2369 | }
|
---|
2370 |
|
---|
2371 | stringValue = flattenOptionChildren(children);
|
---|
2372 | }
|
---|
2373 |
|
---|
2374 | if (isArray(selectedValue)) {
|
---|
2375 | // multiple
|
---|
2376 | for (var i = 0; i < selectedValue.length; i++) {
|
---|
2377 | {
|
---|
2378 | checkAttributeStringCoercion(selectedValue[i], 'value');
|
---|
2379 | }
|
---|
2380 |
|
---|
2381 | var v = '' + selectedValue[i];
|
---|
2382 |
|
---|
2383 | if (v === stringValue) {
|
---|
2384 | target.push(selectedMarkerAttribute);
|
---|
2385 | break;
|
---|
2386 | }
|
---|
2387 | }
|
---|
2388 | } else {
|
---|
2389 | {
|
---|
2390 | checkAttributeStringCoercion(selectedValue, 'select.value');
|
---|
2391 | }
|
---|
2392 |
|
---|
2393 | if ('' + selectedValue === stringValue) {
|
---|
2394 | target.push(selectedMarkerAttribute);
|
---|
2395 | }
|
---|
2396 | }
|
---|
2397 | } else if (selected) {
|
---|
2398 | target.push(selectedMarkerAttribute);
|
---|
2399 | }
|
---|
2400 |
|
---|
2401 | target.push(endOfStartTag);
|
---|
2402 | pushInnerHTML(target, innerHTML, children);
|
---|
2403 | return children;
|
---|
2404 | }
|
---|
2405 |
|
---|
2406 | function pushInput(target, props, responseState) {
|
---|
2407 | {
|
---|
2408 | checkControlledValueProps('input', props);
|
---|
2409 |
|
---|
2410 | if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnDefaultChecked) {
|
---|
2411 | 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);
|
---|
2412 |
|
---|
2413 | didWarnDefaultChecked = true;
|
---|
2414 | }
|
---|
2415 |
|
---|
2416 | if (props.value !== undefined && props.defaultValue !== undefined && !didWarnDefaultInputValue) {
|
---|
2417 | 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);
|
---|
2418 |
|
---|
2419 | didWarnDefaultInputValue = true;
|
---|
2420 | }
|
---|
2421 | }
|
---|
2422 |
|
---|
2423 | target.push(startChunkForTag('input'));
|
---|
2424 | var value = null;
|
---|
2425 | var defaultValue = null;
|
---|
2426 | var checked = null;
|
---|
2427 | var defaultChecked = null;
|
---|
2428 |
|
---|
2429 | for (var propKey in props) {
|
---|
2430 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2431 | var propValue = props[propKey];
|
---|
2432 |
|
---|
2433 | if (propValue == null) {
|
---|
2434 | continue;
|
---|
2435 | }
|
---|
2436 |
|
---|
2437 | switch (propKey) {
|
---|
2438 | case 'children':
|
---|
2439 | case 'dangerouslySetInnerHTML':
|
---|
2440 | throw new Error('input' + " is a self-closing tag and must neither have `children` nor " + 'use `dangerouslySetInnerHTML`.');
|
---|
2441 | // eslint-disable-next-line-no-fallthrough
|
---|
2442 |
|
---|
2443 | case 'defaultChecked':
|
---|
2444 | defaultChecked = propValue;
|
---|
2445 | break;
|
---|
2446 |
|
---|
2447 | case 'defaultValue':
|
---|
2448 | defaultValue = propValue;
|
---|
2449 | break;
|
---|
2450 |
|
---|
2451 | case 'checked':
|
---|
2452 | checked = propValue;
|
---|
2453 | break;
|
---|
2454 |
|
---|
2455 | case 'value':
|
---|
2456 | value = propValue;
|
---|
2457 | break;
|
---|
2458 |
|
---|
2459 | default:
|
---|
2460 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2461 | break;
|
---|
2462 | }
|
---|
2463 | }
|
---|
2464 | }
|
---|
2465 |
|
---|
2466 | if (checked !== null) {
|
---|
2467 | pushAttribute(target, responseState, 'checked', checked);
|
---|
2468 | } else if (defaultChecked !== null) {
|
---|
2469 | pushAttribute(target, responseState, 'checked', defaultChecked);
|
---|
2470 | }
|
---|
2471 |
|
---|
2472 | if (value !== null) {
|
---|
2473 | pushAttribute(target, responseState, 'value', value);
|
---|
2474 | } else if (defaultValue !== null) {
|
---|
2475 | pushAttribute(target, responseState, 'value', defaultValue);
|
---|
2476 | }
|
---|
2477 |
|
---|
2478 | target.push(endOfStartTagSelfClosing);
|
---|
2479 | return null;
|
---|
2480 | }
|
---|
2481 |
|
---|
2482 | function pushStartTextArea(target, props, responseState) {
|
---|
2483 | {
|
---|
2484 | checkControlledValueProps('textarea', props);
|
---|
2485 |
|
---|
2486 | if (props.value !== undefined && props.defaultValue !== undefined && !didWarnDefaultTextareaValue) {
|
---|
2487 | 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');
|
---|
2488 |
|
---|
2489 | didWarnDefaultTextareaValue = true;
|
---|
2490 | }
|
---|
2491 | }
|
---|
2492 |
|
---|
2493 | target.push(startChunkForTag('textarea'));
|
---|
2494 | var value = null;
|
---|
2495 | var defaultValue = null;
|
---|
2496 | var children = null;
|
---|
2497 |
|
---|
2498 | for (var propKey in props) {
|
---|
2499 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2500 | var propValue = props[propKey];
|
---|
2501 |
|
---|
2502 | if (propValue == null) {
|
---|
2503 | continue;
|
---|
2504 | }
|
---|
2505 |
|
---|
2506 | switch (propKey) {
|
---|
2507 | case 'children':
|
---|
2508 | children = propValue;
|
---|
2509 | break;
|
---|
2510 |
|
---|
2511 | case 'value':
|
---|
2512 | value = propValue;
|
---|
2513 | break;
|
---|
2514 |
|
---|
2515 | case 'defaultValue':
|
---|
2516 | defaultValue = propValue;
|
---|
2517 | break;
|
---|
2518 |
|
---|
2519 | case 'dangerouslySetInnerHTML':
|
---|
2520 | throw new Error('`dangerouslySetInnerHTML` does not make sense on <textarea>.');
|
---|
2521 | // eslint-disable-next-line-no-fallthrough
|
---|
2522 |
|
---|
2523 | default:
|
---|
2524 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2525 | break;
|
---|
2526 | }
|
---|
2527 | }
|
---|
2528 | }
|
---|
2529 |
|
---|
2530 | if (value === null && defaultValue !== null) {
|
---|
2531 | value = defaultValue;
|
---|
2532 | }
|
---|
2533 |
|
---|
2534 | target.push(endOfStartTag); // TODO (yungsters): Remove support for children content in <textarea>.
|
---|
2535 |
|
---|
2536 | if (children != null) {
|
---|
2537 | {
|
---|
2538 | error('Use the `defaultValue` or `value` props instead of setting ' + 'children on <textarea>.');
|
---|
2539 | }
|
---|
2540 |
|
---|
2541 | if (value != null) {
|
---|
2542 | throw new Error('If you supply `defaultValue` on a <textarea>, do not pass children.');
|
---|
2543 | }
|
---|
2544 |
|
---|
2545 | if (isArray(children)) {
|
---|
2546 | if (children.length > 1) {
|
---|
2547 | throw new Error('<textarea> can only have at most one child.');
|
---|
2548 | } // TODO: remove the coercion and the DEV check below because it will
|
---|
2549 | // always be overwritten by the coercion several lines below it. #22309
|
---|
2550 |
|
---|
2551 |
|
---|
2552 | {
|
---|
2553 | checkHtmlStringCoercion(children[0]);
|
---|
2554 | }
|
---|
2555 |
|
---|
2556 | value = '' + children[0];
|
---|
2557 | }
|
---|
2558 |
|
---|
2559 | {
|
---|
2560 | checkHtmlStringCoercion(children);
|
---|
2561 | }
|
---|
2562 |
|
---|
2563 | value = '' + children;
|
---|
2564 | }
|
---|
2565 |
|
---|
2566 | if (typeof value === 'string' && value[0] === '\n') {
|
---|
2567 | // text/html ignores the first character in these tags if it's a newline
|
---|
2568 | // Prefer to break application/xml over text/html (for now) by adding
|
---|
2569 | // a newline specifically to get eaten by the parser. (Alternately for
|
---|
2570 | // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first
|
---|
2571 | // \r is normalized out by HTMLTextAreaElement#value.)
|
---|
2572 | // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
|
---|
2573 | // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
|
---|
2574 | // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
|
---|
2575 | // See: Parsing of "textarea" "listing" and "pre" elements
|
---|
2576 | // from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
|
---|
2577 | target.push(leadingNewline);
|
---|
2578 | } // ToString and push directly instead of recurse over children.
|
---|
2579 | // We don't really support complex children in the value anyway.
|
---|
2580 | // This also currently avoids a trailing comment node which breaks textarea.
|
---|
2581 |
|
---|
2582 |
|
---|
2583 | if (value !== null) {
|
---|
2584 | {
|
---|
2585 | checkAttributeStringCoercion(value, 'value');
|
---|
2586 | }
|
---|
2587 |
|
---|
2588 | target.push(stringToChunk(encodeHTMLTextNode('' + value)));
|
---|
2589 | }
|
---|
2590 |
|
---|
2591 | return null;
|
---|
2592 | }
|
---|
2593 |
|
---|
2594 | function pushSelfClosing(target, props, tag, responseState) {
|
---|
2595 | target.push(startChunkForTag(tag));
|
---|
2596 |
|
---|
2597 | for (var propKey in props) {
|
---|
2598 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2599 | var propValue = props[propKey];
|
---|
2600 |
|
---|
2601 | if (propValue == null) {
|
---|
2602 | continue;
|
---|
2603 | }
|
---|
2604 |
|
---|
2605 | switch (propKey) {
|
---|
2606 | case 'children':
|
---|
2607 | case 'dangerouslySetInnerHTML':
|
---|
2608 | throw new Error(tag + " is a self-closing tag and must neither have `children` nor " + 'use `dangerouslySetInnerHTML`.');
|
---|
2609 | // eslint-disable-next-line-no-fallthrough
|
---|
2610 |
|
---|
2611 | default:
|
---|
2612 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2613 | break;
|
---|
2614 | }
|
---|
2615 | }
|
---|
2616 | }
|
---|
2617 |
|
---|
2618 | target.push(endOfStartTagSelfClosing);
|
---|
2619 | return null;
|
---|
2620 | }
|
---|
2621 |
|
---|
2622 | function pushStartMenuItem(target, props, responseState) {
|
---|
2623 | target.push(startChunkForTag('menuitem'));
|
---|
2624 |
|
---|
2625 | for (var propKey in props) {
|
---|
2626 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2627 | var propValue = props[propKey];
|
---|
2628 |
|
---|
2629 | if (propValue == null) {
|
---|
2630 | continue;
|
---|
2631 | }
|
---|
2632 |
|
---|
2633 | switch (propKey) {
|
---|
2634 | case 'children':
|
---|
2635 | case 'dangerouslySetInnerHTML':
|
---|
2636 | throw new Error('menuitems cannot have `children` nor `dangerouslySetInnerHTML`.');
|
---|
2637 | // eslint-disable-next-line-no-fallthrough
|
---|
2638 |
|
---|
2639 | default:
|
---|
2640 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2641 | break;
|
---|
2642 | }
|
---|
2643 | }
|
---|
2644 | }
|
---|
2645 |
|
---|
2646 | target.push(endOfStartTag);
|
---|
2647 | return null;
|
---|
2648 | }
|
---|
2649 |
|
---|
2650 | function pushStartTitle(target, props, responseState) {
|
---|
2651 | target.push(startChunkForTag('title'));
|
---|
2652 | var children = null;
|
---|
2653 |
|
---|
2654 | for (var propKey in props) {
|
---|
2655 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2656 | var propValue = props[propKey];
|
---|
2657 |
|
---|
2658 | if (propValue == null) {
|
---|
2659 | continue;
|
---|
2660 | }
|
---|
2661 |
|
---|
2662 | switch (propKey) {
|
---|
2663 | case 'children':
|
---|
2664 | children = propValue;
|
---|
2665 | break;
|
---|
2666 |
|
---|
2667 | case 'dangerouslySetInnerHTML':
|
---|
2668 | throw new Error('`dangerouslySetInnerHTML` does not make sense on <title>.');
|
---|
2669 | // eslint-disable-next-line-no-fallthrough
|
---|
2670 |
|
---|
2671 | default:
|
---|
2672 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2673 | break;
|
---|
2674 | }
|
---|
2675 | }
|
---|
2676 | }
|
---|
2677 |
|
---|
2678 | target.push(endOfStartTag);
|
---|
2679 |
|
---|
2680 | {
|
---|
2681 | var child = Array.isArray(children) && children.length < 2 ? children[0] || null : children;
|
---|
2682 |
|
---|
2683 | if (Array.isArray(children) && children.length > 1) {
|
---|
2684 | 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');
|
---|
2685 | } else if (child != null && child.$$typeof != null) {
|
---|
2686 | 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');
|
---|
2687 | } else if (child != null && typeof child !== 'string' && typeof child !== 'number') {
|
---|
2688 | 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');
|
---|
2689 | }
|
---|
2690 | }
|
---|
2691 |
|
---|
2692 | return children;
|
---|
2693 | }
|
---|
2694 |
|
---|
2695 | function pushStartGenericElement(target, props, tag, responseState) {
|
---|
2696 | target.push(startChunkForTag(tag));
|
---|
2697 | var children = null;
|
---|
2698 | var innerHTML = null;
|
---|
2699 |
|
---|
2700 | for (var propKey in props) {
|
---|
2701 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2702 | var propValue = props[propKey];
|
---|
2703 |
|
---|
2704 | if (propValue == null) {
|
---|
2705 | continue;
|
---|
2706 | }
|
---|
2707 |
|
---|
2708 | switch (propKey) {
|
---|
2709 | case 'children':
|
---|
2710 | children = propValue;
|
---|
2711 | break;
|
---|
2712 |
|
---|
2713 | case 'dangerouslySetInnerHTML':
|
---|
2714 | innerHTML = propValue;
|
---|
2715 | break;
|
---|
2716 |
|
---|
2717 | default:
|
---|
2718 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2719 | break;
|
---|
2720 | }
|
---|
2721 | }
|
---|
2722 | }
|
---|
2723 |
|
---|
2724 | target.push(endOfStartTag);
|
---|
2725 | pushInnerHTML(target, innerHTML, children);
|
---|
2726 |
|
---|
2727 | if (typeof children === 'string') {
|
---|
2728 | // Special case children as a string to avoid the unnecessary comment.
|
---|
2729 | // TODO: Remove this special case after the general optimization is in place.
|
---|
2730 | target.push(stringToChunk(encodeHTMLTextNode(children)));
|
---|
2731 | return null;
|
---|
2732 | }
|
---|
2733 |
|
---|
2734 | return children;
|
---|
2735 | }
|
---|
2736 |
|
---|
2737 | function pushStartCustomElement(target, props, tag, responseState) {
|
---|
2738 | target.push(startChunkForTag(tag));
|
---|
2739 | var children = null;
|
---|
2740 | var innerHTML = null;
|
---|
2741 |
|
---|
2742 | for (var propKey in props) {
|
---|
2743 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2744 | var propValue = props[propKey];
|
---|
2745 |
|
---|
2746 | if (propValue == null) {
|
---|
2747 | continue;
|
---|
2748 | }
|
---|
2749 |
|
---|
2750 | switch (propKey) {
|
---|
2751 | case 'children':
|
---|
2752 | children = propValue;
|
---|
2753 | break;
|
---|
2754 |
|
---|
2755 | case 'dangerouslySetInnerHTML':
|
---|
2756 | innerHTML = propValue;
|
---|
2757 | break;
|
---|
2758 |
|
---|
2759 | case 'style':
|
---|
2760 | pushStyle(target, responseState, propValue);
|
---|
2761 | break;
|
---|
2762 |
|
---|
2763 | case 'suppressContentEditableWarning':
|
---|
2764 | case 'suppressHydrationWarning':
|
---|
2765 | // Ignored. These are built-in to React on the client.
|
---|
2766 | break;
|
---|
2767 |
|
---|
2768 | default:
|
---|
2769 | if (isAttributeNameSafe(propKey) && typeof propValue !== 'function' && typeof propValue !== 'symbol') {
|
---|
2770 | target.push(attributeSeparator, stringToChunk(propKey), attributeAssign, stringToChunk(escapeTextForBrowser(propValue)), attributeEnd);
|
---|
2771 | }
|
---|
2772 |
|
---|
2773 | break;
|
---|
2774 | }
|
---|
2775 | }
|
---|
2776 | }
|
---|
2777 |
|
---|
2778 | target.push(endOfStartTag);
|
---|
2779 | pushInnerHTML(target, innerHTML, children);
|
---|
2780 | return children;
|
---|
2781 | }
|
---|
2782 |
|
---|
2783 | var leadingNewline = stringToPrecomputedChunk('\n');
|
---|
2784 |
|
---|
2785 | function pushStartPreformattedElement(target, props, tag, responseState) {
|
---|
2786 | target.push(startChunkForTag(tag));
|
---|
2787 | var children = null;
|
---|
2788 | var innerHTML = null;
|
---|
2789 |
|
---|
2790 | for (var propKey in props) {
|
---|
2791 | if (hasOwnProperty.call(props, propKey)) {
|
---|
2792 | var propValue = props[propKey];
|
---|
2793 |
|
---|
2794 | if (propValue == null) {
|
---|
2795 | continue;
|
---|
2796 | }
|
---|
2797 |
|
---|
2798 | switch (propKey) {
|
---|
2799 | case 'children':
|
---|
2800 | children = propValue;
|
---|
2801 | break;
|
---|
2802 |
|
---|
2803 | case 'dangerouslySetInnerHTML':
|
---|
2804 | innerHTML = propValue;
|
---|
2805 | break;
|
---|
2806 |
|
---|
2807 | default:
|
---|
2808 | pushAttribute(target, responseState, propKey, propValue);
|
---|
2809 | break;
|
---|
2810 | }
|
---|
2811 | }
|
---|
2812 | }
|
---|
2813 |
|
---|
2814 | target.push(endOfStartTag); // text/html ignores the first character in these tags if it's a newline
|
---|
2815 | // Prefer to break application/xml over text/html (for now) by adding
|
---|
2816 | // a newline specifically to get eaten by the parser. (Alternately for
|
---|
2817 | // textareas, replacing "^\n" with "\r\n" doesn't get eaten, and the first
|
---|
2818 | // \r is normalized out by HTMLTextAreaElement#value.)
|
---|
2819 | // See: <http://www.w3.org/TR/html-polyglot/#newlines-in-textarea-and-pre>
|
---|
2820 | // See: <http://www.w3.org/TR/html5/syntax.html#element-restrictions>
|
---|
2821 | // See: <http://www.w3.org/TR/html5/syntax.html#newlines>
|
---|
2822 | // See: Parsing of "textarea" "listing" and "pre" elements
|
---|
2823 | // from <http://www.w3.org/TR/html5/syntax.html#parsing-main-inbody>
|
---|
2824 | // TODO: This doesn't deal with the case where the child is an array
|
---|
2825 | // or component that returns a string.
|
---|
2826 |
|
---|
2827 | if (innerHTML != null) {
|
---|
2828 | if (children != null) {
|
---|
2829 | throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.');
|
---|
2830 | }
|
---|
2831 |
|
---|
2832 | if (typeof innerHTML !== 'object' || !('__html' in innerHTML)) {
|
---|
2833 | throw new Error('`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' + 'Please visit https://reactjs.org/link/dangerously-set-inner-html ' + 'for more information.');
|
---|
2834 | }
|
---|
2835 |
|
---|
2836 | var html = innerHTML.__html;
|
---|
2837 |
|
---|
2838 | if (html !== null && html !== undefined) {
|
---|
2839 | if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
|
---|
2840 | target.push(leadingNewline, stringToChunk(html));
|
---|
2841 | } else {
|
---|
2842 | {
|
---|
2843 | checkHtmlStringCoercion(html);
|
---|
2844 | }
|
---|
2845 |
|
---|
2846 | target.push(stringToChunk('' + html));
|
---|
2847 | }
|
---|
2848 | }
|
---|
2849 | }
|
---|
2850 |
|
---|
2851 | if (typeof children === 'string' && children[0] === '\n') {
|
---|
2852 | target.push(leadingNewline);
|
---|
2853 | }
|
---|
2854 |
|
---|
2855 | return children;
|
---|
2856 | } // We accept any tag to be rendered but since this gets injected into arbitrary
|
---|
2857 | // HTML, we want to make sure that it's a safe tag.
|
---|
2858 | // http://www.w3.org/TR/REC-xml/#NT-Name
|
---|
2859 |
|
---|
2860 |
|
---|
2861 | var VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
|
---|
2862 |
|
---|
2863 | var validatedTagCache = new Map();
|
---|
2864 |
|
---|
2865 | function startChunkForTag(tag) {
|
---|
2866 | var tagStartChunk = validatedTagCache.get(tag);
|
---|
2867 |
|
---|
2868 | if (tagStartChunk === undefined) {
|
---|
2869 | if (!VALID_TAG_REGEX.test(tag)) {
|
---|
2870 | throw new Error("Invalid tag: " + tag);
|
---|
2871 | }
|
---|
2872 |
|
---|
2873 | tagStartChunk = stringToPrecomputedChunk('<' + tag);
|
---|
2874 | validatedTagCache.set(tag, tagStartChunk);
|
---|
2875 | }
|
---|
2876 |
|
---|
2877 | return tagStartChunk;
|
---|
2878 | }
|
---|
2879 |
|
---|
2880 | var DOCTYPE = stringToPrecomputedChunk('<!DOCTYPE html>');
|
---|
2881 | function pushStartInstance(target, type, props, responseState, formatContext) {
|
---|
2882 | {
|
---|
2883 | validateProperties(type, props);
|
---|
2884 | validateProperties$1(type, props);
|
---|
2885 | validateProperties$2(type, props, null);
|
---|
2886 |
|
---|
2887 | if (!props.suppressContentEditableWarning && props.contentEditable && props.children != null) {
|
---|
2888 | 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.');
|
---|
2889 | }
|
---|
2890 |
|
---|
2891 | if (formatContext.insertionMode !== SVG_MODE && formatContext.insertionMode !== MATHML_MODE) {
|
---|
2892 | if (type.indexOf('-') === -1 && typeof props.is !== 'string' && type.toLowerCase() !== type) {
|
---|
2893 | error('<%s /> is using incorrect casing. ' + 'Use PascalCase for React components, ' + 'or lowercase for HTML elements.', type);
|
---|
2894 | }
|
---|
2895 | }
|
---|
2896 | }
|
---|
2897 |
|
---|
2898 | switch (type) {
|
---|
2899 | // Special tags
|
---|
2900 | case 'select':
|
---|
2901 | return pushStartSelect(target, props, responseState);
|
---|
2902 |
|
---|
2903 | case 'option':
|
---|
2904 | return pushStartOption(target, props, responseState, formatContext);
|
---|
2905 |
|
---|
2906 | case 'textarea':
|
---|
2907 | return pushStartTextArea(target, props, responseState);
|
---|
2908 |
|
---|
2909 | case 'input':
|
---|
2910 | return pushInput(target, props, responseState);
|
---|
2911 |
|
---|
2912 | case 'menuitem':
|
---|
2913 | return pushStartMenuItem(target, props, responseState);
|
---|
2914 |
|
---|
2915 | case 'title':
|
---|
2916 | return pushStartTitle(target, props, responseState);
|
---|
2917 | // Newline eating tags
|
---|
2918 |
|
---|
2919 | case 'listing':
|
---|
2920 | case 'pre':
|
---|
2921 | {
|
---|
2922 | return pushStartPreformattedElement(target, props, type, responseState);
|
---|
2923 | }
|
---|
2924 | // Omitted close tags
|
---|
2925 |
|
---|
2926 | case 'area':
|
---|
2927 | case 'base':
|
---|
2928 | case 'br':
|
---|
2929 | case 'col':
|
---|
2930 | case 'embed':
|
---|
2931 | case 'hr':
|
---|
2932 | case 'img':
|
---|
2933 | case 'keygen':
|
---|
2934 | case 'link':
|
---|
2935 | case 'meta':
|
---|
2936 | case 'param':
|
---|
2937 | case 'source':
|
---|
2938 | case 'track':
|
---|
2939 | case 'wbr':
|
---|
2940 | {
|
---|
2941 | return pushSelfClosing(target, props, type, responseState);
|
---|
2942 | }
|
---|
2943 | // These are reserved SVG and MathML elements, that are never custom elements.
|
---|
2944 | // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
|
---|
2945 |
|
---|
2946 | case 'annotation-xml':
|
---|
2947 | case 'color-profile':
|
---|
2948 | case 'font-face':
|
---|
2949 | case 'font-face-src':
|
---|
2950 | case 'font-face-uri':
|
---|
2951 | case 'font-face-format':
|
---|
2952 | case 'font-face-name':
|
---|
2953 | case 'missing-glyph':
|
---|
2954 | {
|
---|
2955 | return pushStartGenericElement(target, props, type, responseState);
|
---|
2956 | }
|
---|
2957 |
|
---|
2958 | case 'html':
|
---|
2959 | {
|
---|
2960 | if (formatContext.insertionMode === ROOT_HTML_MODE) {
|
---|
2961 | // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
|
---|
2962 | // then we also emit the DOCTYPE as part of the root content as a convenience for
|
---|
2963 | // rendering the whole document.
|
---|
2964 | target.push(DOCTYPE);
|
---|
2965 | }
|
---|
2966 |
|
---|
2967 | return pushStartGenericElement(target, props, type, responseState);
|
---|
2968 | }
|
---|
2969 |
|
---|
2970 | default:
|
---|
2971 | {
|
---|
2972 | if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
|
---|
2973 | // Generic element
|
---|
2974 | return pushStartGenericElement(target, props, type, responseState);
|
---|
2975 | } else {
|
---|
2976 | // Custom element
|
---|
2977 | return pushStartCustomElement(target, props, type, responseState);
|
---|
2978 | }
|
---|
2979 | }
|
---|
2980 | }
|
---|
2981 | }
|
---|
2982 | var endTag1 = stringToPrecomputedChunk('</');
|
---|
2983 | var endTag2 = stringToPrecomputedChunk('>');
|
---|
2984 | function pushEndInstance(target, type, props) {
|
---|
2985 | switch (type) {
|
---|
2986 | // Omitted close tags
|
---|
2987 | // TODO: Instead of repeating this switch we could try to pass a flag from above.
|
---|
2988 | // That would require returning a tuple. Which might be ok if it gets inlined.
|
---|
2989 | case 'area':
|
---|
2990 | case 'base':
|
---|
2991 | case 'br':
|
---|
2992 | case 'col':
|
---|
2993 | case 'embed':
|
---|
2994 | case 'hr':
|
---|
2995 | case 'img':
|
---|
2996 | case 'input':
|
---|
2997 | case 'keygen':
|
---|
2998 | case 'link':
|
---|
2999 | case 'meta':
|
---|
3000 | case 'param':
|
---|
3001 | case 'source':
|
---|
3002 | case 'track':
|
---|
3003 | case 'wbr':
|
---|
3004 | {
|
---|
3005 | // No close tag needed.
|
---|
3006 | break;
|
---|
3007 | }
|
---|
3008 |
|
---|
3009 | default:
|
---|
3010 | {
|
---|
3011 | target.push(endTag1, stringToChunk(type), endTag2);
|
---|
3012 | }
|
---|
3013 | }
|
---|
3014 | }
|
---|
3015 | function writeCompletedRoot(destination, responseState) {
|
---|
3016 | var bootstrapChunks = responseState.bootstrapChunks;
|
---|
3017 | var i = 0;
|
---|
3018 |
|
---|
3019 | for (; i < bootstrapChunks.length - 1; i++) {
|
---|
3020 | writeChunk(destination, bootstrapChunks[i]);
|
---|
3021 | }
|
---|
3022 |
|
---|
3023 | if (i < bootstrapChunks.length) {
|
---|
3024 | return writeChunkAndReturn(destination, bootstrapChunks[i]);
|
---|
3025 | }
|
---|
3026 |
|
---|
3027 | return true;
|
---|
3028 | } // Structural Nodes
|
---|
3029 | // A placeholder is a node inside a hidden partial tree that can be filled in later, but before
|
---|
3030 | // display. It's never visible to users. We use the template tag because it can be used in every
|
---|
3031 | // type of parent. <script> tags also work in every other tag except <colgroup>.
|
---|
3032 |
|
---|
3033 | var placeholder1 = stringToPrecomputedChunk('<template id="');
|
---|
3034 | var placeholder2 = stringToPrecomputedChunk('"></template>');
|
---|
3035 | function writePlaceholder(destination, responseState, id) {
|
---|
3036 | writeChunk(destination, placeholder1);
|
---|
3037 | writeChunk(destination, responseState.placeholderPrefix);
|
---|
3038 | var formattedID = stringToChunk(id.toString(16));
|
---|
3039 | writeChunk(destination, formattedID);
|
---|
3040 | return writeChunkAndReturn(destination, placeholder2);
|
---|
3041 | } // Suspense boundaries are encoded as comments.
|
---|
3042 |
|
---|
3043 | var startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
|
---|
3044 | var startPendingSuspenseBoundary1 = stringToPrecomputedChunk('<!--$?--><template id="');
|
---|
3045 | var startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
|
---|
3046 | var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk('<!--$!-->');
|
---|
3047 | var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
|
---|
3048 | var clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk('<template');
|
---|
3049 | var clientRenderedSuspenseBoundaryErrorAttrInterstitial = stringToPrecomputedChunk('"');
|
---|
3050 | var clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk(' data-dgst="');
|
---|
3051 | var clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk(' data-msg="');
|
---|
3052 | var clientRenderedSuspenseBoundaryError1C = stringToPrecomputedChunk(' data-stck="');
|
---|
3053 | var clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk('></template>');
|
---|
3054 | function writeStartCompletedSuspenseBoundary(destination, responseState) {
|
---|
3055 | return writeChunkAndReturn(destination, startCompletedSuspenseBoundary);
|
---|
3056 | }
|
---|
3057 | function writeStartPendingSuspenseBoundary(destination, responseState, id) {
|
---|
3058 | writeChunk(destination, startPendingSuspenseBoundary1);
|
---|
3059 |
|
---|
3060 | if (id === null) {
|
---|
3061 | throw new Error('An ID must have been assigned before we can complete the boundary.');
|
---|
3062 | }
|
---|
3063 |
|
---|
3064 | writeChunk(destination, id);
|
---|
3065 | return writeChunkAndReturn(destination, startPendingSuspenseBoundary2);
|
---|
3066 | }
|
---|
3067 | function writeStartClientRenderedSuspenseBoundary(destination, responseState, errorDigest, errorMesssage, errorComponentStack) {
|
---|
3068 | var result;
|
---|
3069 | result = writeChunkAndReturn(destination, startClientRenderedSuspenseBoundary);
|
---|
3070 | writeChunk(destination, clientRenderedSuspenseBoundaryError1);
|
---|
3071 |
|
---|
3072 | if (errorDigest) {
|
---|
3073 | writeChunk(destination, clientRenderedSuspenseBoundaryError1A);
|
---|
3074 | writeChunk(destination, stringToChunk(escapeTextForBrowser(errorDigest)));
|
---|
3075 | writeChunk(destination, clientRenderedSuspenseBoundaryErrorAttrInterstitial);
|
---|
3076 | }
|
---|
3077 |
|
---|
3078 | {
|
---|
3079 | if (errorMesssage) {
|
---|
3080 | writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
|
---|
3081 | writeChunk(destination, stringToChunk(escapeTextForBrowser(errorMesssage)));
|
---|
3082 | writeChunk(destination, clientRenderedSuspenseBoundaryErrorAttrInterstitial);
|
---|
3083 | }
|
---|
3084 |
|
---|
3085 | if (errorComponentStack) {
|
---|
3086 | writeChunk(destination, clientRenderedSuspenseBoundaryError1C);
|
---|
3087 | writeChunk(destination, stringToChunk(escapeTextForBrowser(errorComponentStack)));
|
---|
3088 | writeChunk(destination, clientRenderedSuspenseBoundaryErrorAttrInterstitial);
|
---|
3089 | }
|
---|
3090 | }
|
---|
3091 |
|
---|
3092 | result = writeChunkAndReturn(destination, clientRenderedSuspenseBoundaryError2);
|
---|
3093 | return result;
|
---|
3094 | }
|
---|
3095 | function writeEndCompletedSuspenseBoundary(destination, responseState) {
|
---|
3096 | return writeChunkAndReturn(destination, endSuspenseBoundary);
|
---|
3097 | }
|
---|
3098 | function writeEndPendingSuspenseBoundary(destination, responseState) {
|
---|
3099 | return writeChunkAndReturn(destination, endSuspenseBoundary);
|
---|
3100 | }
|
---|
3101 | function writeEndClientRenderedSuspenseBoundary(destination, responseState) {
|
---|
3102 | return writeChunkAndReturn(destination, endSuspenseBoundary);
|
---|
3103 | }
|
---|
3104 | var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
|
---|
3105 | var startSegmentHTML2 = stringToPrecomputedChunk('">');
|
---|
3106 | var endSegmentHTML = stringToPrecomputedChunk('</div>');
|
---|
3107 | var startSegmentSVG = stringToPrecomputedChunk('<svg aria-hidden="true" style="display:none" id="');
|
---|
3108 | var startSegmentSVG2 = stringToPrecomputedChunk('">');
|
---|
3109 | var endSegmentSVG = stringToPrecomputedChunk('</svg>');
|
---|
3110 | var startSegmentMathML = stringToPrecomputedChunk('<math aria-hidden="true" style="display:none" id="');
|
---|
3111 | var startSegmentMathML2 = stringToPrecomputedChunk('">');
|
---|
3112 | var endSegmentMathML = stringToPrecomputedChunk('</math>');
|
---|
3113 | var startSegmentTable = stringToPrecomputedChunk('<table hidden id="');
|
---|
3114 | var startSegmentTable2 = stringToPrecomputedChunk('">');
|
---|
3115 | var endSegmentTable = stringToPrecomputedChunk('</table>');
|
---|
3116 | var startSegmentTableBody = stringToPrecomputedChunk('<table hidden><tbody id="');
|
---|
3117 | var startSegmentTableBody2 = stringToPrecomputedChunk('">');
|
---|
3118 | var endSegmentTableBody = stringToPrecomputedChunk('</tbody></table>');
|
---|
3119 | var startSegmentTableRow = stringToPrecomputedChunk('<table hidden><tr id="');
|
---|
3120 | var startSegmentTableRow2 = stringToPrecomputedChunk('">');
|
---|
3121 | var endSegmentTableRow = stringToPrecomputedChunk('</tr></table>');
|
---|
3122 | var startSegmentColGroup = stringToPrecomputedChunk('<table hidden><colgroup id="');
|
---|
3123 | var startSegmentColGroup2 = stringToPrecomputedChunk('">');
|
---|
3124 | var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
|
---|
3125 | function writeStartSegment(destination, responseState, formatContext, id) {
|
---|
3126 | switch (formatContext.insertionMode) {
|
---|
3127 | case ROOT_HTML_MODE:
|
---|
3128 | case HTML_MODE:
|
---|
3129 | {
|
---|
3130 | writeChunk(destination, startSegmentHTML);
|
---|
3131 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3132 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3133 | return writeChunkAndReturn(destination, startSegmentHTML2);
|
---|
3134 | }
|
---|
3135 |
|
---|
3136 | case SVG_MODE:
|
---|
3137 | {
|
---|
3138 | writeChunk(destination, startSegmentSVG);
|
---|
3139 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3140 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3141 | return writeChunkAndReturn(destination, startSegmentSVG2);
|
---|
3142 | }
|
---|
3143 |
|
---|
3144 | case MATHML_MODE:
|
---|
3145 | {
|
---|
3146 | writeChunk(destination, startSegmentMathML);
|
---|
3147 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3148 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3149 | return writeChunkAndReturn(destination, startSegmentMathML2);
|
---|
3150 | }
|
---|
3151 |
|
---|
3152 | case HTML_TABLE_MODE:
|
---|
3153 | {
|
---|
3154 | writeChunk(destination, startSegmentTable);
|
---|
3155 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3156 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3157 | return writeChunkAndReturn(destination, startSegmentTable2);
|
---|
3158 | }
|
---|
3159 | // TODO: For the rest of these, there will be extra wrapper nodes that never
|
---|
3160 | // get deleted from the document. We need to delete the table too as part
|
---|
3161 | // of the injected scripts. They are invisible though so it's not too terrible
|
---|
3162 | // and it's kind of an edge case to suspend in a table. Totally supported though.
|
---|
3163 |
|
---|
3164 | case HTML_TABLE_BODY_MODE:
|
---|
3165 | {
|
---|
3166 | writeChunk(destination, startSegmentTableBody);
|
---|
3167 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3168 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3169 | return writeChunkAndReturn(destination, startSegmentTableBody2);
|
---|
3170 | }
|
---|
3171 |
|
---|
3172 | case HTML_TABLE_ROW_MODE:
|
---|
3173 | {
|
---|
3174 | writeChunk(destination, startSegmentTableRow);
|
---|
3175 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3176 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3177 | return writeChunkAndReturn(destination, startSegmentTableRow2);
|
---|
3178 | }
|
---|
3179 |
|
---|
3180 | case HTML_COLGROUP_MODE:
|
---|
3181 | {
|
---|
3182 | writeChunk(destination, startSegmentColGroup);
|
---|
3183 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3184 | writeChunk(destination, stringToChunk(id.toString(16)));
|
---|
3185 | return writeChunkAndReturn(destination, startSegmentColGroup2);
|
---|
3186 | }
|
---|
3187 |
|
---|
3188 | default:
|
---|
3189 | {
|
---|
3190 | throw new Error('Unknown insertion mode. This is a bug in React.');
|
---|
3191 | }
|
---|
3192 | }
|
---|
3193 | }
|
---|
3194 | function writeEndSegment(destination, formatContext) {
|
---|
3195 | switch (formatContext.insertionMode) {
|
---|
3196 | case ROOT_HTML_MODE:
|
---|
3197 | case HTML_MODE:
|
---|
3198 | {
|
---|
3199 | return writeChunkAndReturn(destination, endSegmentHTML);
|
---|
3200 | }
|
---|
3201 |
|
---|
3202 | case SVG_MODE:
|
---|
3203 | {
|
---|
3204 | return writeChunkAndReturn(destination, endSegmentSVG);
|
---|
3205 | }
|
---|
3206 |
|
---|
3207 | case MATHML_MODE:
|
---|
3208 | {
|
---|
3209 | return writeChunkAndReturn(destination, endSegmentMathML);
|
---|
3210 | }
|
---|
3211 |
|
---|
3212 | case HTML_TABLE_MODE:
|
---|
3213 | {
|
---|
3214 | return writeChunkAndReturn(destination, endSegmentTable);
|
---|
3215 | }
|
---|
3216 |
|
---|
3217 | case HTML_TABLE_BODY_MODE:
|
---|
3218 | {
|
---|
3219 | return writeChunkAndReturn(destination, endSegmentTableBody);
|
---|
3220 | }
|
---|
3221 |
|
---|
3222 | case HTML_TABLE_ROW_MODE:
|
---|
3223 | {
|
---|
3224 | return writeChunkAndReturn(destination, endSegmentTableRow);
|
---|
3225 | }
|
---|
3226 |
|
---|
3227 | case HTML_COLGROUP_MODE:
|
---|
3228 | {
|
---|
3229 | return writeChunkAndReturn(destination, endSegmentColGroup);
|
---|
3230 | }
|
---|
3231 |
|
---|
3232 | default:
|
---|
3233 | {
|
---|
3234 | throw new Error('Unknown insertion mode. This is a bug in React.');
|
---|
3235 | }
|
---|
3236 | }
|
---|
3237 | } // Instruction Set
|
---|
3238 | // The following code is the source scripts that we then minify and inline below,
|
---|
3239 | // with renamed function names that we hope don't collide:
|
---|
3240 | // const COMMENT_NODE = 8;
|
---|
3241 | // const SUSPENSE_START_DATA = '$';
|
---|
3242 | // const SUSPENSE_END_DATA = '/$';
|
---|
3243 | // const SUSPENSE_PENDING_START_DATA = '$?';
|
---|
3244 | // const SUSPENSE_FALLBACK_START_DATA = '$!';
|
---|
3245 | //
|
---|
3246 | // function clientRenderBoundary(suspenseBoundaryID, errorDigest, errorMsg, errorComponentStack) {
|
---|
3247 | // // Find the fallback's first element.
|
---|
3248 | // const suspenseIdNode = document.getElementById(suspenseBoundaryID);
|
---|
3249 | // if (!suspenseIdNode) {
|
---|
3250 | // // The user must have already navigated away from this tree.
|
---|
3251 | // // E.g. because the parent was hydrated.
|
---|
3252 | // return;
|
---|
3253 | // }
|
---|
3254 | // // Find the boundary around the fallback. This is always the previous node.
|
---|
3255 | // const suspenseNode = suspenseIdNode.previousSibling;
|
---|
3256 | // // Tag it to be client rendered.
|
---|
3257 | // suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
|
---|
3258 | // // assign error metadata to first sibling
|
---|
3259 | // let dataset = suspenseIdNode.dataset;
|
---|
3260 | // if (errorDigest) dataset.dgst = errorDigest;
|
---|
3261 | // if (errorMsg) dataset.msg = errorMsg;
|
---|
3262 | // if (errorComponentStack) dataset.stck = errorComponentStack;
|
---|
3263 | // // Tell React to retry it if the parent already hydrated.
|
---|
3264 | // if (suspenseNode._reactRetry) {
|
---|
3265 | // suspenseNode._reactRetry();
|
---|
3266 | // }
|
---|
3267 | // }
|
---|
3268 | //
|
---|
3269 | // function completeBoundary(suspenseBoundaryID, contentID) {
|
---|
3270 | // // Find the fallback's first element.
|
---|
3271 | // const suspenseIdNode = document.getElementById(suspenseBoundaryID);
|
---|
3272 | // const contentNode = document.getElementById(contentID);
|
---|
3273 | // // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
|
---|
3274 | // // This might also help by not causing recalcing each time we move a child from here to the target.
|
---|
3275 | // contentNode.parentNode.removeChild(contentNode);
|
---|
3276 | // if (!suspenseIdNode) {
|
---|
3277 | // // The user must have already navigated away from this tree.
|
---|
3278 | // // E.g. because the parent was hydrated. That's fine there's nothing to do
|
---|
3279 | // // but we have to make sure that we already deleted the container node.
|
---|
3280 | // return;
|
---|
3281 | // }
|
---|
3282 | // // Find the boundary around the fallback. This is always the previous node.
|
---|
3283 | // const suspenseNode = suspenseIdNode.previousSibling;
|
---|
3284 | //
|
---|
3285 | // // Clear all the existing children. This is complicated because
|
---|
3286 | // // there can be embedded Suspense boundaries in the fallback.
|
---|
3287 | // // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
|
---|
3288 | // // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
|
---|
3289 | // // They never hydrate anyway. However, currently we support incrementally loading the fallback.
|
---|
3290 | // const parentInstance = suspenseNode.parentNode;
|
---|
3291 | // let node = suspenseNode.nextSibling;
|
---|
3292 | // let depth = 0;
|
---|
3293 | // do {
|
---|
3294 | // if (node && node.nodeType === COMMENT_NODE) {
|
---|
3295 | // const data = node.data;
|
---|
3296 | // if (data === SUSPENSE_END_DATA) {
|
---|
3297 | // if (depth === 0) {
|
---|
3298 | // break;
|
---|
3299 | // } else {
|
---|
3300 | // depth--;
|
---|
3301 | // }
|
---|
3302 | // } else if (
|
---|
3303 | // data === SUSPENSE_START_DATA ||
|
---|
3304 | // data === SUSPENSE_PENDING_START_DATA ||
|
---|
3305 | // data === SUSPENSE_FALLBACK_START_DATA
|
---|
3306 | // ) {
|
---|
3307 | // depth++;
|
---|
3308 | // }
|
---|
3309 | // }
|
---|
3310 | //
|
---|
3311 | // const nextNode = node.nextSibling;
|
---|
3312 | // parentInstance.removeChild(node);
|
---|
3313 | // node = nextNode;
|
---|
3314 | // } while (node);
|
---|
3315 | //
|
---|
3316 | // const endOfBoundary = node;
|
---|
3317 | //
|
---|
3318 | // // Insert all the children from the contentNode between the start and end of suspense boundary.
|
---|
3319 | // while (contentNode.firstChild) {
|
---|
3320 | // parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
|
---|
3321 | // }
|
---|
3322 | // suspenseNode.data = SUSPENSE_START_DATA;
|
---|
3323 | // if (suspenseNode._reactRetry) {
|
---|
3324 | // suspenseNode._reactRetry();
|
---|
3325 | // }
|
---|
3326 | // }
|
---|
3327 | //
|
---|
3328 | // function completeSegment(containerID, placeholderID) {
|
---|
3329 | // const segmentContainer = document.getElementById(containerID);
|
---|
3330 | // const placeholderNode = document.getElementById(placeholderID);
|
---|
3331 | // // We always expect both nodes to exist here because, while we might
|
---|
3332 | // // have navigated away from the main tree, we still expect the detached
|
---|
3333 | // // tree to exist.
|
---|
3334 | // segmentContainer.parentNode.removeChild(segmentContainer);
|
---|
3335 | // while (segmentContainer.firstChild) {
|
---|
3336 | // placeholderNode.parentNode.insertBefore(
|
---|
3337 | // segmentContainer.firstChild,
|
---|
3338 | // placeholderNode,
|
---|
3339 | // );
|
---|
3340 | // }
|
---|
3341 | // placeholderNode.parentNode.removeChild(placeholderNode);
|
---|
3342 | // }
|
---|
3343 |
|
---|
3344 | 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)}';
|
---|
3345 | 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()}}';
|
---|
3346 | 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())}';
|
---|
3347 | var completeSegmentScript1Full = stringToPrecomputedChunk(completeSegmentFunction + ';$RS("');
|
---|
3348 | var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
|
---|
3349 | var completeSegmentScript2 = stringToPrecomputedChunk('","');
|
---|
3350 | var completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
|
---|
3351 | function writeCompletedSegmentInstruction(destination, responseState, contentSegmentID) {
|
---|
3352 | writeChunk(destination, responseState.startInlineScript);
|
---|
3353 |
|
---|
3354 | if (!responseState.sentCompleteSegmentFunction) {
|
---|
3355 | // The first time we write this, we'll need to include the full implementation.
|
---|
3356 | responseState.sentCompleteSegmentFunction = true;
|
---|
3357 | writeChunk(destination, completeSegmentScript1Full);
|
---|
3358 | } else {
|
---|
3359 | // Future calls can just reuse the same function.
|
---|
3360 | writeChunk(destination, completeSegmentScript1Partial);
|
---|
3361 | }
|
---|
3362 |
|
---|
3363 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3364 | var formattedID = stringToChunk(contentSegmentID.toString(16));
|
---|
3365 | writeChunk(destination, formattedID);
|
---|
3366 | writeChunk(destination, completeSegmentScript2);
|
---|
3367 | writeChunk(destination, responseState.placeholderPrefix);
|
---|
3368 | writeChunk(destination, formattedID);
|
---|
3369 | return writeChunkAndReturn(destination, completeSegmentScript3);
|
---|
3370 | }
|
---|
3371 | var completeBoundaryScript1Full = stringToPrecomputedChunk(completeBoundaryFunction + ';$RC("');
|
---|
3372 | var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
|
---|
3373 | var completeBoundaryScript2 = stringToPrecomputedChunk('","');
|
---|
3374 | var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
|
---|
3375 | function writeCompletedBoundaryInstruction(destination, responseState, boundaryID, contentSegmentID) {
|
---|
3376 | writeChunk(destination, responseState.startInlineScript);
|
---|
3377 |
|
---|
3378 | if (!responseState.sentCompleteBoundaryFunction) {
|
---|
3379 | // The first time we write this, we'll need to include the full implementation.
|
---|
3380 | responseState.sentCompleteBoundaryFunction = true;
|
---|
3381 | writeChunk(destination, completeBoundaryScript1Full);
|
---|
3382 | } else {
|
---|
3383 | // Future calls can just reuse the same function.
|
---|
3384 | writeChunk(destination, completeBoundaryScript1Partial);
|
---|
3385 | }
|
---|
3386 |
|
---|
3387 | if (boundaryID === null) {
|
---|
3388 | throw new Error('An ID must have been assigned before we can complete the boundary.');
|
---|
3389 | }
|
---|
3390 |
|
---|
3391 | var formattedContentID = stringToChunk(contentSegmentID.toString(16));
|
---|
3392 | writeChunk(destination, boundaryID);
|
---|
3393 | writeChunk(destination, completeBoundaryScript2);
|
---|
3394 | writeChunk(destination, responseState.segmentPrefix);
|
---|
3395 | writeChunk(destination, formattedContentID);
|
---|
3396 | return writeChunkAndReturn(destination, completeBoundaryScript3);
|
---|
3397 | }
|
---|
3398 | var clientRenderScript1Full = stringToPrecomputedChunk(clientRenderFunction + ';$RX("');
|
---|
3399 | var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
|
---|
3400 | var clientRenderScript1A = stringToPrecomputedChunk('"');
|
---|
3401 | var clientRenderScript2 = stringToPrecomputedChunk(')</script>');
|
---|
3402 | var clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
|
---|
3403 | function writeClientRenderBoundaryInstruction(destination, responseState, boundaryID, errorDigest, errorMessage, errorComponentStack) {
|
---|
3404 | writeChunk(destination, responseState.startInlineScript);
|
---|
3405 |
|
---|
3406 | if (!responseState.sentClientRenderFunction) {
|
---|
3407 | // The first time we write this, we'll need to include the full implementation.
|
---|
3408 | responseState.sentClientRenderFunction = true;
|
---|
3409 | writeChunk(destination, clientRenderScript1Full);
|
---|
3410 | } else {
|
---|
3411 | // Future calls can just reuse the same function.
|
---|
3412 | writeChunk(destination, clientRenderScript1Partial);
|
---|
3413 | }
|
---|
3414 |
|
---|
3415 | if (boundaryID === null) {
|
---|
3416 | throw new Error('An ID must have been assigned before we can complete the boundary.');
|
---|
3417 | }
|
---|
3418 |
|
---|
3419 | writeChunk(destination, boundaryID);
|
---|
3420 | writeChunk(destination, clientRenderScript1A);
|
---|
3421 |
|
---|
3422 | if (errorDigest || errorMessage || errorComponentStack) {
|
---|
3423 | writeChunk(destination, clientRenderErrorScriptArgInterstitial);
|
---|
3424 | writeChunk(destination, stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')));
|
---|
3425 | }
|
---|
3426 |
|
---|
3427 | if (errorMessage || errorComponentStack) {
|
---|
3428 | writeChunk(destination, clientRenderErrorScriptArgInterstitial);
|
---|
3429 | writeChunk(destination, stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')));
|
---|
3430 | }
|
---|
3431 |
|
---|
3432 | if (errorComponentStack) {
|
---|
3433 | writeChunk(destination, clientRenderErrorScriptArgInterstitial);
|
---|
3434 | writeChunk(destination, stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)));
|
---|
3435 | }
|
---|
3436 |
|
---|
3437 | return writeChunkAndReturn(destination, clientRenderScript2);
|
---|
3438 | }
|
---|
3439 | var regexForJSStringsInScripts = /[<\u2028\u2029]/g;
|
---|
3440 |
|
---|
3441 | function escapeJSStringsForInstructionScripts(input) {
|
---|
3442 | var escaped = JSON.stringify(input);
|
---|
3443 | return escaped.replace(regexForJSStringsInScripts, function (match) {
|
---|
3444 | switch (match) {
|
---|
3445 | // santizing breaking out of strings and script tags
|
---|
3446 | case '<':
|
---|
3447 | return "\\u003c";
|
---|
3448 |
|
---|
3449 | case "\u2028":
|
---|
3450 | return "\\u2028";
|
---|
3451 |
|
---|
3452 | case "\u2029":
|
---|
3453 | return "\\u2029";
|
---|
3454 |
|
---|
3455 | default:
|
---|
3456 | {
|
---|
3457 | // eslint-disable-next-line react-internal/prod-error-codes
|
---|
3458 | 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');
|
---|
3459 | }
|
---|
3460 | }
|
---|
3461 | });
|
---|
3462 | }
|
---|
3463 |
|
---|
3464 | var assign = Object.assign;
|
---|
3465 |
|
---|
3466 | // ATTENTION
|
---|
3467 | // When adding new symbols to this file,
|
---|
3468 | // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
|
---|
3469 | // The Symbol used to tag the ReactElement-like types.
|
---|
3470 | var REACT_ELEMENT_TYPE = Symbol.for('react.element');
|
---|
3471 | var REACT_PORTAL_TYPE = Symbol.for('react.portal');
|
---|
3472 | var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
|
---|
3473 | var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
|
---|
3474 | var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
|
---|
3475 | var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
|
---|
3476 | var REACT_CONTEXT_TYPE = Symbol.for('react.context');
|
---|
3477 | var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
|
---|
3478 | var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
|
---|
3479 | var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
|
---|
3480 | var REACT_MEMO_TYPE = Symbol.for('react.memo');
|
---|
3481 | var REACT_LAZY_TYPE = Symbol.for('react.lazy');
|
---|
3482 | var REACT_SCOPE_TYPE = Symbol.for('react.scope');
|
---|
3483 | var REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for('react.debug_trace_mode');
|
---|
3484 | var REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
|
---|
3485 | var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value');
|
---|
3486 | var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
|
---|
3487 | var FAUX_ITERATOR_SYMBOL = '@@iterator';
|
---|
3488 | function getIteratorFn(maybeIterable) {
|
---|
3489 | if (maybeIterable === null || typeof maybeIterable !== 'object') {
|
---|
3490 | return null;
|
---|
3491 | }
|
---|
3492 |
|
---|
3493 | var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
|
---|
3494 |
|
---|
3495 | if (typeof maybeIterator === 'function') {
|
---|
3496 | return maybeIterator;
|
---|
3497 | }
|
---|
3498 |
|
---|
3499 | return null;
|
---|
3500 | }
|
---|
3501 |
|
---|
3502 | function getWrappedName(outerType, innerType, wrapperName) {
|
---|
3503 | var displayName = outerType.displayName;
|
---|
3504 |
|
---|
3505 | if (displayName) {
|
---|
3506 | return displayName;
|
---|
3507 | }
|
---|
3508 |
|
---|
3509 | var functionName = innerType.displayName || innerType.name || '';
|
---|
3510 | return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
|
---|
3511 | } // Keep in sync with react-reconciler/getComponentNameFromFiber
|
---|
3512 |
|
---|
3513 |
|
---|
3514 | function getContextName(type) {
|
---|
3515 | return type.displayName || 'Context';
|
---|
3516 | } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
|
---|
3517 |
|
---|
3518 |
|
---|
3519 | function getComponentNameFromType(type) {
|
---|
3520 | if (type == null) {
|
---|
3521 | // Host root, text node or just invalid type.
|
---|
3522 | return null;
|
---|
3523 | }
|
---|
3524 |
|
---|
3525 | {
|
---|
3526 | if (typeof type.tag === 'number') {
|
---|
3527 | error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
|
---|
3528 | }
|
---|
3529 | }
|
---|
3530 |
|
---|
3531 | if (typeof type === 'function') {
|
---|
3532 | return type.displayName || type.name || null;
|
---|
3533 | }
|
---|
3534 |
|
---|
3535 | if (typeof type === 'string') {
|
---|
3536 | return type;
|
---|
3537 | }
|
---|
3538 |
|
---|
3539 | switch (type) {
|
---|
3540 | case REACT_FRAGMENT_TYPE:
|
---|
3541 | return 'Fragment';
|
---|
3542 |
|
---|
3543 | case REACT_PORTAL_TYPE:
|
---|
3544 | return 'Portal';
|
---|
3545 |
|
---|
3546 | case REACT_PROFILER_TYPE:
|
---|
3547 | return 'Profiler';
|
---|
3548 |
|
---|
3549 | case REACT_STRICT_MODE_TYPE:
|
---|
3550 | return 'StrictMode';
|
---|
3551 |
|
---|
3552 | case REACT_SUSPENSE_TYPE:
|
---|
3553 | return 'Suspense';
|
---|
3554 |
|
---|
3555 | case REACT_SUSPENSE_LIST_TYPE:
|
---|
3556 | return 'SuspenseList';
|
---|
3557 |
|
---|
3558 | }
|
---|
3559 |
|
---|
3560 | if (typeof type === 'object') {
|
---|
3561 | switch (type.$$typeof) {
|
---|
3562 | case REACT_CONTEXT_TYPE:
|
---|
3563 | var context = type;
|
---|
3564 | return getContextName(context) + '.Consumer';
|
---|
3565 |
|
---|
3566 | case REACT_PROVIDER_TYPE:
|
---|
3567 | var provider = type;
|
---|
3568 | return getContextName(provider._context) + '.Provider';
|
---|
3569 |
|
---|
3570 | case REACT_FORWARD_REF_TYPE:
|
---|
3571 | return getWrappedName(type, type.render, 'ForwardRef');
|
---|
3572 |
|
---|
3573 | case REACT_MEMO_TYPE:
|
---|
3574 | var outerName = type.displayName || null;
|
---|
3575 |
|
---|
3576 | if (outerName !== null) {
|
---|
3577 | return outerName;
|
---|
3578 | }
|
---|
3579 |
|
---|
3580 | return getComponentNameFromType(type.type) || 'Memo';
|
---|
3581 |
|
---|
3582 | case REACT_LAZY_TYPE:
|
---|
3583 | {
|
---|
3584 | var lazyComponent = type;
|
---|
3585 | var payload = lazyComponent._payload;
|
---|
3586 | var init = lazyComponent._init;
|
---|
3587 |
|
---|
3588 | try {
|
---|
3589 | return getComponentNameFromType(init(payload));
|
---|
3590 | } catch (x) {
|
---|
3591 | return null;
|
---|
3592 | }
|
---|
3593 | }
|
---|
3594 |
|
---|
3595 | // eslint-disable-next-line no-fallthrough
|
---|
3596 | }
|
---|
3597 | }
|
---|
3598 |
|
---|
3599 | return null;
|
---|
3600 | }
|
---|
3601 |
|
---|
3602 | // Helpers to patch console.logs to avoid logging during side-effect free
|
---|
3603 | // replaying on render function. This currently only patches the object
|
---|
3604 | // lazily which won't cover if the log function was extracted eagerly.
|
---|
3605 | // We could also eagerly patch the method.
|
---|
3606 | var disabledDepth = 0;
|
---|
3607 | var prevLog;
|
---|
3608 | var prevInfo;
|
---|
3609 | var prevWarn;
|
---|
3610 | var prevError;
|
---|
3611 | var prevGroup;
|
---|
3612 | var prevGroupCollapsed;
|
---|
3613 | var prevGroupEnd;
|
---|
3614 |
|
---|
3615 | function disabledLog() {}
|
---|
3616 |
|
---|
3617 | disabledLog.__reactDisabledLog = true;
|
---|
3618 | function disableLogs() {
|
---|
3619 | {
|
---|
3620 | if (disabledDepth === 0) {
|
---|
3621 | /* eslint-disable react-internal/no-production-logging */
|
---|
3622 | prevLog = console.log;
|
---|
3623 | prevInfo = console.info;
|
---|
3624 | prevWarn = console.warn;
|
---|
3625 | prevError = console.error;
|
---|
3626 | prevGroup = console.group;
|
---|
3627 | prevGroupCollapsed = console.groupCollapsed;
|
---|
3628 | prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
|
---|
3629 |
|
---|
3630 | var props = {
|
---|
3631 | configurable: true,
|
---|
3632 | enumerable: true,
|
---|
3633 | value: disabledLog,
|
---|
3634 | writable: true
|
---|
3635 | }; // $FlowFixMe Flow thinks console is immutable.
|
---|
3636 |
|
---|
3637 | Object.defineProperties(console, {
|
---|
3638 | info: props,
|
---|
3639 | log: props,
|
---|
3640 | warn: props,
|
---|
3641 | error: props,
|
---|
3642 | group: props,
|
---|
3643 | groupCollapsed: props,
|
---|
3644 | groupEnd: props
|
---|
3645 | });
|
---|
3646 | /* eslint-enable react-internal/no-production-logging */
|
---|
3647 | }
|
---|
3648 |
|
---|
3649 | disabledDepth++;
|
---|
3650 | }
|
---|
3651 | }
|
---|
3652 | function reenableLogs() {
|
---|
3653 | {
|
---|
3654 | disabledDepth--;
|
---|
3655 |
|
---|
3656 | if (disabledDepth === 0) {
|
---|
3657 | /* eslint-disable react-internal/no-production-logging */
|
---|
3658 | var props = {
|
---|
3659 | configurable: true,
|
---|
3660 | enumerable: true,
|
---|
3661 | writable: true
|
---|
3662 | }; // $FlowFixMe Flow thinks console is immutable.
|
---|
3663 |
|
---|
3664 | Object.defineProperties(console, {
|
---|
3665 | log: assign({}, props, {
|
---|
3666 | value: prevLog
|
---|
3667 | }),
|
---|
3668 | info: assign({}, props, {
|
---|
3669 | value: prevInfo
|
---|
3670 | }),
|
---|
3671 | warn: assign({}, props, {
|
---|
3672 | value: prevWarn
|
---|
3673 | }),
|
---|
3674 | error: assign({}, props, {
|
---|
3675 | value: prevError
|
---|
3676 | }),
|
---|
3677 | group: assign({}, props, {
|
---|
3678 | value: prevGroup
|
---|
3679 | }),
|
---|
3680 | groupCollapsed: assign({}, props, {
|
---|
3681 | value: prevGroupCollapsed
|
---|
3682 | }),
|
---|
3683 | groupEnd: assign({}, props, {
|
---|
3684 | value: prevGroupEnd
|
---|
3685 | })
|
---|
3686 | });
|
---|
3687 | /* eslint-enable react-internal/no-production-logging */
|
---|
3688 | }
|
---|
3689 |
|
---|
3690 | if (disabledDepth < 0) {
|
---|
3691 | error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
|
---|
3692 | }
|
---|
3693 | }
|
---|
3694 | }
|
---|
3695 |
|
---|
3696 | var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
|
---|
3697 | var prefix;
|
---|
3698 | function describeBuiltInComponentFrame(name, source, ownerFn) {
|
---|
3699 | {
|
---|
3700 | if (prefix === undefined) {
|
---|
3701 | // Extract the VM specific prefix used by each line.
|
---|
3702 | try {
|
---|
3703 | throw Error();
|
---|
3704 | } catch (x) {
|
---|
3705 | var match = x.stack.trim().match(/\n( *(at )?)/);
|
---|
3706 | prefix = match && match[1] || '';
|
---|
3707 | }
|
---|
3708 | } // We use the prefix to ensure our stacks line up with native stack frames.
|
---|
3709 |
|
---|
3710 |
|
---|
3711 | return '\n' + prefix + name;
|
---|
3712 | }
|
---|
3713 | }
|
---|
3714 | var reentry = false;
|
---|
3715 | var componentFrameCache;
|
---|
3716 |
|
---|
3717 | {
|
---|
3718 | var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
|
---|
3719 | componentFrameCache = new PossiblyWeakMap();
|
---|
3720 | }
|
---|
3721 |
|
---|
3722 | function describeNativeComponentFrame(fn, construct) {
|
---|
3723 | // If something asked for a stack inside a fake render, it should get ignored.
|
---|
3724 | if ( !fn || reentry) {
|
---|
3725 | return '';
|
---|
3726 | }
|
---|
3727 |
|
---|
3728 | {
|
---|
3729 | var frame = componentFrameCache.get(fn);
|
---|
3730 |
|
---|
3731 | if (frame !== undefined) {
|
---|
3732 | return frame;
|
---|
3733 | }
|
---|
3734 | }
|
---|
3735 |
|
---|
3736 | var control;
|
---|
3737 | reentry = true;
|
---|
3738 | var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
|
---|
3739 |
|
---|
3740 | Error.prepareStackTrace = undefined;
|
---|
3741 | var previousDispatcher;
|
---|
3742 |
|
---|
3743 | {
|
---|
3744 | previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
|
---|
3745 | // for warnings.
|
---|
3746 |
|
---|
3747 | ReactCurrentDispatcher.current = null;
|
---|
3748 | disableLogs();
|
---|
3749 | }
|
---|
3750 |
|
---|
3751 | try {
|
---|
3752 | // This should throw.
|
---|
3753 | if (construct) {
|
---|
3754 | // Something should be setting the props in the constructor.
|
---|
3755 | var Fake = function () {
|
---|
3756 | throw Error();
|
---|
3757 | }; // $FlowFixMe
|
---|
3758 |
|
---|
3759 |
|
---|
3760 | Object.defineProperty(Fake.prototype, 'props', {
|
---|
3761 | set: function () {
|
---|
3762 | // We use a throwing setter instead of frozen or non-writable props
|
---|
3763 | // because that won't throw in a non-strict mode function.
|
---|
3764 | throw Error();
|
---|
3765 | }
|
---|
3766 | });
|
---|
3767 |
|
---|
3768 | if (typeof Reflect === 'object' && Reflect.construct) {
|
---|
3769 | // We construct a different control for this case to include any extra
|
---|
3770 | // frames added by the construct call.
|
---|
3771 | try {
|
---|
3772 | Reflect.construct(Fake, []);
|
---|
3773 | } catch (x) {
|
---|
3774 | control = x;
|
---|
3775 | }
|
---|
3776 |
|
---|
3777 | Reflect.construct(fn, [], Fake);
|
---|
3778 | } else {
|
---|
3779 | try {
|
---|
3780 | Fake.call();
|
---|
3781 | } catch (x) {
|
---|
3782 | control = x;
|
---|
3783 | }
|
---|
3784 |
|
---|
3785 | fn.call(Fake.prototype);
|
---|
3786 | }
|
---|
3787 | } else {
|
---|
3788 | try {
|
---|
3789 | throw Error();
|
---|
3790 | } catch (x) {
|
---|
3791 | control = x;
|
---|
3792 | }
|
---|
3793 |
|
---|
3794 | fn();
|
---|
3795 | }
|
---|
3796 | } catch (sample) {
|
---|
3797 | // This is inlined manually because closure doesn't do it for us.
|
---|
3798 | if (sample && control && typeof sample.stack === 'string') {
|
---|
3799 | // This extracts the first frame from the sample that isn't also in the control.
|
---|
3800 | // Skipping one frame that we assume is the frame that calls the two.
|
---|
3801 | var sampleLines = sample.stack.split('\n');
|
---|
3802 | var controlLines = control.stack.split('\n');
|
---|
3803 | var s = sampleLines.length - 1;
|
---|
3804 | var c = controlLines.length - 1;
|
---|
3805 |
|
---|
3806 | while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
|
---|
3807 | // We expect at least one stack frame to be shared.
|
---|
3808 | // Typically this will be the root most one. However, stack frames may be
|
---|
3809 | // cut off due to maximum stack limits. In this case, one maybe cut off
|
---|
3810 | // earlier than the other. We assume that the sample is longer or the same
|
---|
3811 | // and there for cut off earlier. So we should find the root most frame in
|
---|
3812 | // the sample somewhere in the control.
|
---|
3813 | c--;
|
---|
3814 | }
|
---|
3815 |
|
---|
3816 | for (; s >= 1 && c >= 0; s--, c--) {
|
---|
3817 | // Next we find the first one that isn't the same which should be the
|
---|
3818 | // frame that called our sample function and the control.
|
---|
3819 | if (sampleLines[s] !== controlLines[c]) {
|
---|
3820 | // In V8, the first line is describing the message but other VMs don't.
|
---|
3821 | // If we're about to return the first line, and the control is also on the same
|
---|
3822 | // line, that's a pretty good indicator that our sample threw at same line as
|
---|
3823 | // the control. I.e. before we entered the sample frame. So we ignore this result.
|
---|
3824 | // This can happen if you passed a class to function component, or non-function.
|
---|
3825 | if (s !== 1 || c !== 1) {
|
---|
3826 | do {
|
---|
3827 | s--;
|
---|
3828 | c--; // We may still have similar intermediate frames from the construct call.
|
---|
3829 | // The next one that isn't the same should be our match though.
|
---|
3830 |
|
---|
3831 | if (c < 0 || sampleLines[s] !== controlLines[c]) {
|
---|
3832 | // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
|
---|
3833 | var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
|
---|
3834 | // but we have a user-provided "displayName"
|
---|
3835 | // splice it in to make the stack more readable.
|
---|
3836 |
|
---|
3837 |
|
---|
3838 | if (fn.displayName && _frame.includes('<anonymous>')) {
|
---|
3839 | _frame = _frame.replace('<anonymous>', fn.displayName);
|
---|
3840 | }
|
---|
3841 |
|
---|
3842 | {
|
---|
3843 | if (typeof fn === 'function') {
|
---|
3844 | componentFrameCache.set(fn, _frame);
|
---|
3845 | }
|
---|
3846 | } // Return the line we found.
|
---|
3847 |
|
---|
3848 |
|
---|
3849 | return _frame;
|
---|
3850 | }
|
---|
3851 | } while (s >= 1 && c >= 0);
|
---|
3852 | }
|
---|
3853 |
|
---|
3854 | break;
|
---|
3855 | }
|
---|
3856 | }
|
---|
3857 | }
|
---|
3858 | } finally {
|
---|
3859 | reentry = false;
|
---|
3860 |
|
---|
3861 | {
|
---|
3862 | ReactCurrentDispatcher.current = previousDispatcher;
|
---|
3863 | reenableLogs();
|
---|
3864 | }
|
---|
3865 |
|
---|
3866 | Error.prepareStackTrace = previousPrepareStackTrace;
|
---|
3867 | } // Fallback to just using the name if we couldn't make it throw.
|
---|
3868 |
|
---|
3869 |
|
---|
3870 | var name = fn ? fn.displayName || fn.name : '';
|
---|
3871 | var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
|
---|
3872 |
|
---|
3873 | {
|
---|
3874 | if (typeof fn === 'function') {
|
---|
3875 | componentFrameCache.set(fn, syntheticFrame);
|
---|
3876 | }
|
---|
3877 | }
|
---|
3878 |
|
---|
3879 | return syntheticFrame;
|
---|
3880 | }
|
---|
3881 |
|
---|
3882 | function describeClassComponentFrame(ctor, source, ownerFn) {
|
---|
3883 | {
|
---|
3884 | return describeNativeComponentFrame(ctor, true);
|
---|
3885 | }
|
---|
3886 | }
|
---|
3887 | function describeFunctionComponentFrame(fn, source, ownerFn) {
|
---|
3888 | {
|
---|
3889 | return describeNativeComponentFrame(fn, false);
|
---|
3890 | }
|
---|
3891 | }
|
---|
3892 |
|
---|
3893 | function shouldConstruct(Component) {
|
---|
3894 | var prototype = Component.prototype;
|
---|
3895 | return !!(prototype && prototype.isReactComponent);
|
---|
3896 | }
|
---|
3897 |
|
---|
3898 | function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
|
---|
3899 |
|
---|
3900 | if (type == null) {
|
---|
3901 | return '';
|
---|
3902 | }
|
---|
3903 |
|
---|
3904 | if (typeof type === 'function') {
|
---|
3905 | {
|
---|
3906 | return describeNativeComponentFrame(type, shouldConstruct(type));
|
---|
3907 | }
|
---|
3908 | }
|
---|
3909 |
|
---|
3910 | if (typeof type === 'string') {
|
---|
3911 | return describeBuiltInComponentFrame(type);
|
---|
3912 | }
|
---|
3913 |
|
---|
3914 | switch (type) {
|
---|
3915 | case REACT_SUSPENSE_TYPE:
|
---|
3916 | return describeBuiltInComponentFrame('Suspense');
|
---|
3917 |
|
---|
3918 | case REACT_SUSPENSE_LIST_TYPE:
|
---|
3919 | return describeBuiltInComponentFrame('SuspenseList');
|
---|
3920 | }
|
---|
3921 |
|
---|
3922 | if (typeof type === 'object') {
|
---|
3923 | switch (type.$$typeof) {
|
---|
3924 | case REACT_FORWARD_REF_TYPE:
|
---|
3925 | return describeFunctionComponentFrame(type.render);
|
---|
3926 |
|
---|
3927 | case REACT_MEMO_TYPE:
|
---|
3928 | // Memo may contain any component type so we recursively resolve it.
|
---|
3929 | return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
|
---|
3930 |
|
---|
3931 | case REACT_LAZY_TYPE:
|
---|
3932 | {
|
---|
3933 | var lazyComponent = type;
|
---|
3934 | var payload = lazyComponent._payload;
|
---|
3935 | var init = lazyComponent._init;
|
---|
3936 |
|
---|
3937 | try {
|
---|
3938 | // Lazy may contain any component type so we recursively resolve it.
|
---|
3939 | return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
|
---|
3940 | } catch (x) {}
|
---|
3941 | }
|
---|
3942 | }
|
---|
3943 | }
|
---|
3944 |
|
---|
3945 | return '';
|
---|
3946 | }
|
---|
3947 |
|
---|
3948 | var loggedTypeFailures = {};
|
---|
3949 | var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
|
---|
3950 |
|
---|
3951 | function setCurrentlyValidatingElement(element) {
|
---|
3952 | {
|
---|
3953 | if (element) {
|
---|
3954 | var owner = element._owner;
|
---|
3955 | var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
|
---|
3956 | ReactDebugCurrentFrame.setExtraStackFrame(stack);
|
---|
3957 | } else {
|
---|
3958 | ReactDebugCurrentFrame.setExtraStackFrame(null);
|
---|
3959 | }
|
---|
3960 | }
|
---|
3961 | }
|
---|
3962 |
|
---|
3963 | function checkPropTypes(typeSpecs, values, location, componentName, element) {
|
---|
3964 | {
|
---|
3965 | // $FlowFixMe This is okay but Flow doesn't know it.
|
---|
3966 | var has = Function.call.bind(hasOwnProperty);
|
---|
3967 |
|
---|
3968 | for (var typeSpecName in typeSpecs) {
|
---|
3969 | if (has(typeSpecs, typeSpecName)) {
|
---|
3970 | var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
|
---|
3971 | // fail the render phase where it didn't fail before. So we log it.
|
---|
3972 | // After these have been cleaned up, we'll let them throw.
|
---|
3973 |
|
---|
3974 | try {
|
---|
3975 | // This is intentionally an invariant that gets caught. It's the same
|
---|
3976 | // behavior as without this statement except with a better message.
|
---|
3977 | if (typeof typeSpecs[typeSpecName] !== 'function') {
|
---|
3978 | // eslint-disable-next-line react-internal/prod-error-codes
|
---|
3979 | 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`.');
|
---|
3980 | err.name = 'Invariant Violation';
|
---|
3981 | throw err;
|
---|
3982 | }
|
---|
3983 |
|
---|
3984 | error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
|
---|
3985 | } catch (ex) {
|
---|
3986 | error$1 = ex;
|
---|
3987 | }
|
---|
3988 |
|
---|
3989 | if (error$1 && !(error$1 instanceof Error)) {
|
---|
3990 | setCurrentlyValidatingElement(element);
|
---|
3991 |
|
---|
3992 | 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);
|
---|
3993 |
|
---|
3994 | setCurrentlyValidatingElement(null);
|
---|
3995 | }
|
---|
3996 |
|
---|
3997 | if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
|
---|
3998 | // Only monitor this failure once because there tends to be a lot of the
|
---|
3999 | // same error.
|
---|
4000 | loggedTypeFailures[error$1.message] = true;
|
---|
4001 | setCurrentlyValidatingElement(element);
|
---|
4002 |
|
---|
4003 | error('Failed %s type: %s', location, error$1.message);
|
---|
4004 |
|
---|
4005 | setCurrentlyValidatingElement(null);
|
---|
4006 | }
|
---|
4007 | }
|
---|
4008 | }
|
---|
4009 | }
|
---|
4010 | }
|
---|
4011 |
|
---|
4012 | var warnedAboutMissingGetChildContext;
|
---|
4013 |
|
---|
4014 | {
|
---|
4015 | warnedAboutMissingGetChildContext = {};
|
---|
4016 | }
|
---|
4017 |
|
---|
4018 | var emptyContextObject = {};
|
---|
4019 |
|
---|
4020 | {
|
---|
4021 | Object.freeze(emptyContextObject);
|
---|
4022 | }
|
---|
4023 |
|
---|
4024 | function getMaskedContext(type, unmaskedContext) {
|
---|
4025 | {
|
---|
4026 | var contextTypes = type.contextTypes;
|
---|
4027 |
|
---|
4028 | if (!contextTypes) {
|
---|
4029 | return emptyContextObject;
|
---|
4030 | }
|
---|
4031 |
|
---|
4032 | var context = {};
|
---|
4033 |
|
---|
4034 | for (var key in contextTypes) {
|
---|
4035 | context[key] = unmaskedContext[key];
|
---|
4036 | }
|
---|
4037 |
|
---|
4038 | {
|
---|
4039 | var name = getComponentNameFromType(type) || 'Unknown';
|
---|
4040 | checkPropTypes(contextTypes, context, 'context', name);
|
---|
4041 | }
|
---|
4042 |
|
---|
4043 | return context;
|
---|
4044 | }
|
---|
4045 | }
|
---|
4046 | function processChildContext(instance, type, parentContext, childContextTypes) {
|
---|
4047 | {
|
---|
4048 | // TODO (bvaughn) Replace this behavior with an invariant() in the future.
|
---|
4049 | // It has only been added in Fiber to match the (unintentional) behavior in Stack.
|
---|
4050 | if (typeof instance.getChildContext !== 'function') {
|
---|
4051 | {
|
---|
4052 | var componentName = getComponentNameFromType(type) || 'Unknown';
|
---|
4053 |
|
---|
4054 | if (!warnedAboutMissingGetChildContext[componentName]) {
|
---|
4055 | warnedAboutMissingGetChildContext[componentName] = true;
|
---|
4056 |
|
---|
4057 | 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);
|
---|
4058 | }
|
---|
4059 | }
|
---|
4060 |
|
---|
4061 | return parentContext;
|
---|
4062 | }
|
---|
4063 |
|
---|
4064 | var childContext = instance.getChildContext();
|
---|
4065 |
|
---|
4066 | for (var contextKey in childContext) {
|
---|
4067 | if (!(contextKey in childContextTypes)) {
|
---|
4068 | throw new Error((getComponentNameFromType(type) || 'Unknown') + ".getChildContext(): key \"" + contextKey + "\" is not defined in childContextTypes.");
|
---|
4069 | }
|
---|
4070 | }
|
---|
4071 |
|
---|
4072 | {
|
---|
4073 | var name = getComponentNameFromType(type) || 'Unknown';
|
---|
4074 | checkPropTypes(childContextTypes, childContext, 'child context', name);
|
---|
4075 | }
|
---|
4076 |
|
---|
4077 | return assign({}, parentContext, childContext);
|
---|
4078 | }
|
---|
4079 | }
|
---|
4080 |
|
---|
4081 | var rendererSigil;
|
---|
4082 |
|
---|
4083 | {
|
---|
4084 | // Use this to detect multiple renderers using the same context
|
---|
4085 | rendererSigil = {};
|
---|
4086 | } // Used to store the parent path of all context overrides in a shared linked list.
|
---|
4087 | // Forming a reverse tree.
|
---|
4088 |
|
---|
4089 |
|
---|
4090 | var rootContextSnapshot = null; // We assume that this runtime owns the "current" field on all ReactContext instances.
|
---|
4091 | // This global (actually thread local) state represents what state all those "current",
|
---|
4092 | // fields are currently in.
|
---|
4093 |
|
---|
4094 | var currentActiveSnapshot = null;
|
---|
4095 |
|
---|
4096 | function popNode(prev) {
|
---|
4097 | {
|
---|
4098 | prev.context._currentValue = prev.parentValue;
|
---|
4099 | }
|
---|
4100 | }
|
---|
4101 |
|
---|
4102 | function pushNode(next) {
|
---|
4103 | {
|
---|
4104 | next.context._currentValue = next.value;
|
---|
4105 | }
|
---|
4106 | }
|
---|
4107 |
|
---|
4108 | function popToNearestCommonAncestor(prev, next) {
|
---|
4109 | if (prev === next) ; else {
|
---|
4110 | popNode(prev);
|
---|
4111 | var parentPrev = prev.parent;
|
---|
4112 | var parentNext = next.parent;
|
---|
4113 |
|
---|
4114 | if (parentPrev === null) {
|
---|
4115 | if (parentNext !== null) {
|
---|
4116 | throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
|
---|
4117 | }
|
---|
4118 | } else {
|
---|
4119 | if (parentNext === null) {
|
---|
4120 | throw new Error('The stacks must reach the root at the same time. This is a bug in React.');
|
---|
4121 | }
|
---|
4122 |
|
---|
4123 | popToNearestCommonAncestor(parentPrev, parentNext);
|
---|
4124 | } // On the way back, we push the new ones that weren't common.
|
---|
4125 |
|
---|
4126 |
|
---|
4127 | pushNode(next);
|
---|
4128 | }
|
---|
4129 | }
|
---|
4130 |
|
---|
4131 | function popAllPrevious(prev) {
|
---|
4132 | popNode(prev);
|
---|
4133 | var parentPrev = prev.parent;
|
---|
4134 |
|
---|
4135 | if (parentPrev !== null) {
|
---|
4136 | popAllPrevious(parentPrev);
|
---|
4137 | }
|
---|
4138 | }
|
---|
4139 |
|
---|
4140 | function pushAllNext(next) {
|
---|
4141 | var parentNext = next.parent;
|
---|
4142 |
|
---|
4143 | if (parentNext !== null) {
|
---|
4144 | pushAllNext(parentNext);
|
---|
4145 | }
|
---|
4146 |
|
---|
4147 | pushNode(next);
|
---|
4148 | }
|
---|
4149 |
|
---|
4150 | function popPreviousToCommonLevel(prev, next) {
|
---|
4151 | popNode(prev);
|
---|
4152 | var parentPrev = prev.parent;
|
---|
4153 |
|
---|
4154 | if (parentPrev === null) {
|
---|
4155 | throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
|
---|
4156 | }
|
---|
4157 |
|
---|
4158 | if (parentPrev.depth === next.depth) {
|
---|
4159 | // We found the same level. Now we just need to find a shared ancestor.
|
---|
4160 | popToNearestCommonAncestor(parentPrev, next);
|
---|
4161 | } else {
|
---|
4162 | // We must still be deeper.
|
---|
4163 | popPreviousToCommonLevel(parentPrev, next);
|
---|
4164 | }
|
---|
4165 | }
|
---|
4166 |
|
---|
4167 | function popNextToCommonLevel(prev, next) {
|
---|
4168 | var parentNext = next.parent;
|
---|
4169 |
|
---|
4170 | if (parentNext === null) {
|
---|
4171 | throw new Error('The depth must equal at least at zero before reaching the root. This is a bug in React.');
|
---|
4172 | }
|
---|
4173 |
|
---|
4174 | if (prev.depth === parentNext.depth) {
|
---|
4175 | // We found the same level. Now we just need to find a shared ancestor.
|
---|
4176 | popToNearestCommonAncestor(prev, parentNext);
|
---|
4177 | } else {
|
---|
4178 | // We must still be deeper.
|
---|
4179 | popNextToCommonLevel(prev, parentNext);
|
---|
4180 | }
|
---|
4181 |
|
---|
4182 | pushNode(next);
|
---|
4183 | } // Perform context switching to the new snapshot.
|
---|
4184 | // To make it cheap to read many contexts, while not suspending, we make the switch eagerly by
|
---|
4185 | // updating all the context's current values. That way reads, always just read the current value.
|
---|
4186 | // At the cost of updating contexts even if they're never read by this subtree.
|
---|
4187 |
|
---|
4188 |
|
---|
4189 | function switchContext(newSnapshot) {
|
---|
4190 | // The basic algorithm we need to do is to pop back any contexts that are no longer on the stack.
|
---|
4191 | // We also need to update any new contexts that are now on the stack with the deepest value.
|
---|
4192 | // The easiest way to update new contexts is to just reapply them in reverse order from the
|
---|
4193 | // perspective of the backpointers. To avoid allocating a lot when switching, we use the stack
|
---|
4194 | // for that. Therefore this algorithm is recursive.
|
---|
4195 | // 1) First we pop which ever snapshot tree was deepest. Popping old contexts as we go.
|
---|
4196 | // 2) Then we find the nearest common ancestor from there. Popping old contexts as we go.
|
---|
4197 | // 3) Then we reapply new contexts on the way back up the stack.
|
---|
4198 | var prev = currentActiveSnapshot;
|
---|
4199 | var next = newSnapshot;
|
---|
4200 |
|
---|
4201 | if (prev !== next) {
|
---|
4202 | if (prev === null) {
|
---|
4203 | // $FlowFixMe: This has to be non-null since it's not equal to prev.
|
---|
4204 | pushAllNext(next);
|
---|
4205 | } else if (next === null) {
|
---|
4206 | popAllPrevious(prev);
|
---|
4207 | } else if (prev.depth === next.depth) {
|
---|
4208 | popToNearestCommonAncestor(prev, next);
|
---|
4209 | } else if (prev.depth > next.depth) {
|
---|
4210 | popPreviousToCommonLevel(prev, next);
|
---|
4211 | } else {
|
---|
4212 | popNextToCommonLevel(prev, next);
|
---|
4213 | }
|
---|
4214 |
|
---|
4215 | currentActiveSnapshot = next;
|
---|
4216 | }
|
---|
4217 | }
|
---|
4218 | function pushProvider(context, nextValue) {
|
---|
4219 | var prevValue;
|
---|
4220 |
|
---|
4221 | {
|
---|
4222 | prevValue = context._currentValue;
|
---|
4223 | context._currentValue = nextValue;
|
---|
4224 |
|
---|
4225 | {
|
---|
4226 | if (context._currentRenderer !== undefined && context._currentRenderer !== null && context._currentRenderer !== rendererSigil) {
|
---|
4227 | error('Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.');
|
---|
4228 | }
|
---|
4229 |
|
---|
4230 | context._currentRenderer = rendererSigil;
|
---|
4231 | }
|
---|
4232 | }
|
---|
4233 |
|
---|
4234 | var prevNode = currentActiveSnapshot;
|
---|
4235 | var newNode = {
|
---|
4236 | parent: prevNode,
|
---|
4237 | depth: prevNode === null ? 0 : prevNode.depth + 1,
|
---|
4238 | context: context,
|
---|
4239 | parentValue: prevValue,
|
---|
4240 | value: nextValue
|
---|
4241 | };
|
---|
4242 | currentActiveSnapshot = newNode;
|
---|
4243 | return newNode;
|
---|
4244 | }
|
---|
4245 | function popProvider(context) {
|
---|
4246 | var prevSnapshot = currentActiveSnapshot;
|
---|
4247 |
|
---|
4248 | if (prevSnapshot === null) {
|
---|
4249 | throw new Error('Tried to pop a Context at the root of the app. This is a bug in React.');
|
---|
4250 | }
|
---|
4251 |
|
---|
4252 | {
|
---|
4253 | if (prevSnapshot.context !== context) {
|
---|
4254 | error('The parent context is not the expected context. This is probably a bug in React.');
|
---|
4255 | }
|
---|
4256 | }
|
---|
4257 |
|
---|
4258 | {
|
---|
4259 | var value = prevSnapshot.parentValue;
|
---|
4260 |
|
---|
4261 | if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
|
---|
4262 | prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
|
---|
4263 | } else {
|
---|
4264 | prevSnapshot.context._currentValue = value;
|
---|
4265 | }
|
---|
4266 |
|
---|
4267 | {
|
---|
4268 | if (context._currentRenderer !== undefined && context._currentRenderer !== null && context._currentRenderer !== rendererSigil) {
|
---|
4269 | error('Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.');
|
---|
4270 | }
|
---|
4271 |
|
---|
4272 | context._currentRenderer = rendererSigil;
|
---|
4273 | }
|
---|
4274 | }
|
---|
4275 |
|
---|
4276 | return currentActiveSnapshot = prevSnapshot.parent;
|
---|
4277 | }
|
---|
4278 | function getActiveContext() {
|
---|
4279 | return currentActiveSnapshot;
|
---|
4280 | }
|
---|
4281 | function readContext(context) {
|
---|
4282 | var value = context._currentValue ;
|
---|
4283 | return value;
|
---|
4284 | }
|
---|
4285 |
|
---|
4286 | /**
|
---|
4287 | * `ReactInstanceMap` maintains a mapping from a public facing stateful
|
---|
4288 | * instance (key) and the internal representation (value). This allows public
|
---|
4289 | * methods to accept the user facing instance as an argument and map them back
|
---|
4290 | * to internal methods.
|
---|
4291 | *
|
---|
4292 | * Note that this module is currently shared and assumed to be stateless.
|
---|
4293 | * If this becomes an actual Map, that will break.
|
---|
4294 | */
|
---|
4295 | function get(key) {
|
---|
4296 | return key._reactInternals;
|
---|
4297 | }
|
---|
4298 | function set(key, value) {
|
---|
4299 | key._reactInternals = value;
|
---|
4300 | }
|
---|
4301 |
|
---|
4302 | var didWarnAboutNoopUpdateForComponent = {};
|
---|
4303 | var didWarnAboutDeprecatedWillMount = {};
|
---|
4304 | var didWarnAboutUninitializedState;
|
---|
4305 | var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
|
---|
4306 | var didWarnAboutLegacyLifecyclesAndDerivedState;
|
---|
4307 | var didWarnAboutUndefinedDerivedState;
|
---|
4308 | var warnOnUndefinedDerivedState;
|
---|
4309 | var warnOnInvalidCallback;
|
---|
4310 | var didWarnAboutDirectlyAssigningPropsToState;
|
---|
4311 | var didWarnAboutContextTypeAndContextTypes;
|
---|
4312 | var didWarnAboutInvalidateContextType;
|
---|
4313 |
|
---|
4314 | {
|
---|
4315 | didWarnAboutUninitializedState = new Set();
|
---|
4316 | didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set();
|
---|
4317 | didWarnAboutLegacyLifecyclesAndDerivedState = new Set();
|
---|
4318 | didWarnAboutDirectlyAssigningPropsToState = new Set();
|
---|
4319 | didWarnAboutUndefinedDerivedState = new Set();
|
---|
4320 | didWarnAboutContextTypeAndContextTypes = new Set();
|
---|
4321 | didWarnAboutInvalidateContextType = new Set();
|
---|
4322 | var didWarnOnInvalidCallback = new Set();
|
---|
4323 |
|
---|
4324 | warnOnInvalidCallback = function (callback, callerName) {
|
---|
4325 | if (callback === null || typeof callback === 'function') {
|
---|
4326 | return;
|
---|
4327 | }
|
---|
4328 |
|
---|
4329 | var key = callerName + '_' + callback;
|
---|
4330 |
|
---|
4331 | if (!didWarnOnInvalidCallback.has(key)) {
|
---|
4332 | didWarnOnInvalidCallback.add(key);
|
---|
4333 |
|
---|
4334 | error('%s(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callerName, callback);
|
---|
4335 | }
|
---|
4336 | };
|
---|
4337 |
|
---|
4338 | warnOnUndefinedDerivedState = function (type, partialState) {
|
---|
4339 | if (partialState === undefined) {
|
---|
4340 | var componentName = getComponentNameFromType(type) || 'Component';
|
---|
4341 |
|
---|
4342 | if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
|
---|
4343 | didWarnAboutUndefinedDerivedState.add(componentName);
|
---|
4344 |
|
---|
4345 | error('%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' + 'You have returned undefined.', componentName);
|
---|
4346 | }
|
---|
4347 | }
|
---|
4348 | };
|
---|
4349 | }
|
---|
4350 |
|
---|
4351 | function warnNoop(publicInstance, callerName) {
|
---|
4352 | {
|
---|
4353 | var _constructor = publicInstance.constructor;
|
---|
4354 | var componentName = _constructor && getComponentNameFromType(_constructor) || 'ReactClass';
|
---|
4355 | var warningKey = componentName + '.' + callerName;
|
---|
4356 |
|
---|
4357 | if (didWarnAboutNoopUpdateForComponent[warningKey]) {
|
---|
4358 | return;
|
---|
4359 | }
|
---|
4360 |
|
---|
4361 | 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);
|
---|
4362 |
|
---|
4363 | didWarnAboutNoopUpdateForComponent[warningKey] = true;
|
---|
4364 | }
|
---|
4365 | }
|
---|
4366 |
|
---|
4367 | var classComponentUpdater = {
|
---|
4368 | isMounted: function (inst) {
|
---|
4369 | return false;
|
---|
4370 | },
|
---|
4371 | enqueueSetState: function (inst, payload, callback) {
|
---|
4372 | var internals = get(inst);
|
---|
4373 |
|
---|
4374 | if (internals.queue === null) {
|
---|
4375 | warnNoop(inst, 'setState');
|
---|
4376 | } else {
|
---|
4377 | internals.queue.push(payload);
|
---|
4378 |
|
---|
4379 | {
|
---|
4380 | if (callback !== undefined && callback !== null) {
|
---|
4381 | warnOnInvalidCallback(callback, 'setState');
|
---|
4382 | }
|
---|
4383 | }
|
---|
4384 | }
|
---|
4385 | },
|
---|
4386 | enqueueReplaceState: function (inst, payload, callback) {
|
---|
4387 | var internals = get(inst);
|
---|
4388 | internals.replace = true;
|
---|
4389 | internals.queue = [payload];
|
---|
4390 |
|
---|
4391 | {
|
---|
4392 | if (callback !== undefined && callback !== null) {
|
---|
4393 | warnOnInvalidCallback(callback, 'setState');
|
---|
4394 | }
|
---|
4395 | }
|
---|
4396 | },
|
---|
4397 | enqueueForceUpdate: function (inst, callback) {
|
---|
4398 | var internals = get(inst);
|
---|
4399 |
|
---|
4400 | if (internals.queue === null) {
|
---|
4401 | warnNoop(inst, 'forceUpdate');
|
---|
4402 | } else {
|
---|
4403 | {
|
---|
4404 | if (callback !== undefined && callback !== null) {
|
---|
4405 | warnOnInvalidCallback(callback, 'setState');
|
---|
4406 | }
|
---|
4407 | }
|
---|
4408 | }
|
---|
4409 | }
|
---|
4410 | };
|
---|
4411 |
|
---|
4412 | function applyDerivedStateFromProps(instance, ctor, getDerivedStateFromProps, prevState, nextProps) {
|
---|
4413 | var partialState = getDerivedStateFromProps(nextProps, prevState);
|
---|
4414 |
|
---|
4415 | {
|
---|
4416 | warnOnUndefinedDerivedState(ctor, partialState);
|
---|
4417 | } // Merge the partial state and the previous state.
|
---|
4418 |
|
---|
4419 |
|
---|
4420 | var newState = partialState === null || partialState === undefined ? prevState : assign({}, prevState, partialState);
|
---|
4421 | return newState;
|
---|
4422 | }
|
---|
4423 |
|
---|
4424 | function constructClassInstance(ctor, props, maskedLegacyContext) {
|
---|
4425 | var context = emptyContextObject;
|
---|
4426 | var contextType = ctor.contextType;
|
---|
4427 |
|
---|
4428 | {
|
---|
4429 | if ('contextType' in ctor) {
|
---|
4430 | var isValid = // Allow null for conditional declaration
|
---|
4431 | contextType === null || contextType !== undefined && contextType.$$typeof === REACT_CONTEXT_TYPE && contextType._context === undefined; // Not a <Context.Consumer>
|
---|
4432 |
|
---|
4433 | if (!isValid && !didWarnAboutInvalidateContextType.has(ctor)) {
|
---|
4434 | didWarnAboutInvalidateContextType.add(ctor);
|
---|
4435 | var addendum = '';
|
---|
4436 |
|
---|
4437 | if (contextType === undefined) {
|
---|
4438 | 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.';
|
---|
4439 | } else if (typeof contextType !== 'object') {
|
---|
4440 | addendum = ' However, it is set to a ' + typeof contextType + '.';
|
---|
4441 | } else if (contextType.$$typeof === REACT_PROVIDER_TYPE) {
|
---|
4442 | addendum = ' Did you accidentally pass the Context.Provider instead?';
|
---|
4443 | } else if (contextType._context !== undefined) {
|
---|
4444 | // <Context.Consumer>
|
---|
4445 | addendum = ' Did you accidentally pass the Context.Consumer instead?';
|
---|
4446 | } else {
|
---|
4447 | addendum = ' However, it is set to an object with keys {' + Object.keys(contextType).join(', ') + '}.';
|
---|
4448 | }
|
---|
4449 |
|
---|
4450 | error('%s defines an invalid contextType. ' + 'contextType should point to the Context object returned by React.createContext().%s', getComponentNameFromType(ctor) || 'Component', addendum);
|
---|
4451 | }
|
---|
4452 | }
|
---|
4453 | }
|
---|
4454 |
|
---|
4455 | if (typeof contextType === 'object' && contextType !== null) {
|
---|
4456 | context = readContext(contextType);
|
---|
4457 | } else {
|
---|
4458 | context = maskedLegacyContext;
|
---|
4459 | }
|
---|
4460 |
|
---|
4461 | var instance = new ctor(props, context);
|
---|
4462 |
|
---|
4463 | {
|
---|
4464 | if (typeof ctor.getDerivedStateFromProps === 'function' && (instance.state === null || instance.state === undefined)) {
|
---|
4465 | var componentName = getComponentNameFromType(ctor) || 'Component';
|
---|
4466 |
|
---|
4467 | if (!didWarnAboutUninitializedState.has(componentName)) {
|
---|
4468 | didWarnAboutUninitializedState.add(componentName);
|
---|
4469 |
|
---|
4470 | 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);
|
---|
4471 | }
|
---|
4472 | } // If new component APIs are defined, "unsafe" lifecycles won't be called.
|
---|
4473 | // Warn about these lifecycles if they are present.
|
---|
4474 | // Don't warn about react-lifecycles-compat polyfilled methods though.
|
---|
4475 |
|
---|
4476 |
|
---|
4477 | if (typeof ctor.getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function') {
|
---|
4478 | var foundWillMountName = null;
|
---|
4479 | var foundWillReceivePropsName = null;
|
---|
4480 | var foundWillUpdateName = null;
|
---|
4481 |
|
---|
4482 | if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true) {
|
---|
4483 | foundWillMountName = 'componentWillMount';
|
---|
4484 | } else if (typeof instance.UNSAFE_componentWillMount === 'function') {
|
---|
4485 | foundWillMountName = 'UNSAFE_componentWillMount';
|
---|
4486 | }
|
---|
4487 |
|
---|
4488 | if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true) {
|
---|
4489 | foundWillReceivePropsName = 'componentWillReceiveProps';
|
---|
4490 | } else if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
|
---|
4491 | foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
|
---|
4492 | }
|
---|
4493 |
|
---|
4494 | if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true) {
|
---|
4495 | foundWillUpdateName = 'componentWillUpdate';
|
---|
4496 | } else if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
|
---|
4497 | foundWillUpdateName = 'UNSAFE_componentWillUpdate';
|
---|
4498 | }
|
---|
4499 |
|
---|
4500 | if (foundWillMountName !== null || foundWillReceivePropsName !== null || foundWillUpdateName !== null) {
|
---|
4501 | var _componentName = getComponentNameFromType(ctor) || 'Component';
|
---|
4502 |
|
---|
4503 | var newApiName = typeof ctor.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' : 'getSnapshotBeforeUpdate()';
|
---|
4504 |
|
---|
4505 | if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(_componentName)) {
|
---|
4506 | didWarnAboutLegacyLifecyclesAndDerivedState.add(_componentName);
|
---|
4507 |
|
---|
4508 | 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 : '');
|
---|
4509 | }
|
---|
4510 | }
|
---|
4511 | }
|
---|
4512 | }
|
---|
4513 |
|
---|
4514 | return instance;
|
---|
4515 | }
|
---|
4516 |
|
---|
4517 | function checkClassInstance(instance, ctor, newProps) {
|
---|
4518 | {
|
---|
4519 | var name = getComponentNameFromType(ctor) || 'Component';
|
---|
4520 | var renderPresent = instance.render;
|
---|
4521 |
|
---|
4522 | if (!renderPresent) {
|
---|
4523 | if (ctor.prototype && typeof ctor.prototype.render === 'function') {
|
---|
4524 | error('%s(...): No `render` method found on the returned component ' + 'instance: did you accidentally return an object from the constructor?', name);
|
---|
4525 | } else {
|
---|
4526 | error('%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', name);
|
---|
4527 | }
|
---|
4528 | }
|
---|
4529 |
|
---|
4530 | if (instance.getInitialState && !instance.getInitialState.isReactClassApproved && !instance.state) {
|
---|
4531 | 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);
|
---|
4532 | }
|
---|
4533 |
|
---|
4534 | if (instance.getDefaultProps && !instance.getDefaultProps.isReactClassApproved) {
|
---|
4535 | 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);
|
---|
4536 | }
|
---|
4537 |
|
---|
4538 | if (instance.propTypes) {
|
---|
4539 | error('propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', name);
|
---|
4540 | }
|
---|
4541 |
|
---|
4542 | if (instance.contextType) {
|
---|
4543 | error('contextType was defined as an instance property on %s. Use a static ' + 'property to define contextType instead.', name);
|
---|
4544 | }
|
---|
4545 |
|
---|
4546 | {
|
---|
4547 | if (instance.contextTypes) {
|
---|
4548 | error('contextTypes was defined as an instance property on %s. Use a static ' + 'property to define contextTypes instead.', name);
|
---|
4549 | }
|
---|
4550 |
|
---|
4551 | if (ctor.contextType && ctor.contextTypes && !didWarnAboutContextTypeAndContextTypes.has(ctor)) {
|
---|
4552 | didWarnAboutContextTypeAndContextTypes.add(ctor);
|
---|
4553 |
|
---|
4554 | error('%s declares both contextTypes and contextType static properties. ' + 'The legacy contextTypes property will be ignored.', name);
|
---|
4555 | }
|
---|
4556 | }
|
---|
4557 |
|
---|
4558 | if (typeof instance.componentShouldUpdate === 'function') {
|
---|
4559 | 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);
|
---|
4560 | }
|
---|
4561 |
|
---|
4562 | if (ctor.prototype && ctor.prototype.isPureReactComponent && typeof instance.shouldComponentUpdate !== 'undefined') {
|
---|
4563 | 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');
|
---|
4564 | }
|
---|
4565 |
|
---|
4566 | if (typeof instance.componentDidUnmount === 'function') {
|
---|
4567 | error('%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', name);
|
---|
4568 | }
|
---|
4569 |
|
---|
4570 | if (typeof instance.componentDidReceiveProps === 'function') {
|
---|
4571 | 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);
|
---|
4572 | }
|
---|
4573 |
|
---|
4574 | if (typeof instance.componentWillRecieveProps === 'function') {
|
---|
4575 | error('%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', name);
|
---|
4576 | }
|
---|
4577 |
|
---|
4578 | if (typeof instance.UNSAFE_componentWillRecieveProps === 'function') {
|
---|
4579 | error('%s has a method called ' + 'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?', name);
|
---|
4580 | }
|
---|
4581 |
|
---|
4582 | var hasMutatedProps = instance.props !== newProps;
|
---|
4583 |
|
---|
4584 | if (instance.props !== undefined && hasMutatedProps) {
|
---|
4585 | error('%s(...): When calling super() in `%s`, make sure to pass ' + "up the same props that your component's constructor was passed.", name, name);
|
---|
4586 | }
|
---|
4587 |
|
---|
4588 | if (instance.defaultProps) {
|
---|
4589 | 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);
|
---|
4590 | }
|
---|
4591 |
|
---|
4592 | if (typeof instance.getSnapshotBeforeUpdate === 'function' && typeof instance.componentDidUpdate !== 'function' && !didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)) {
|
---|
4593 | didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
|
---|
4594 |
|
---|
4595 | error('%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' + 'This component defines getSnapshotBeforeUpdate() only.', getComponentNameFromType(ctor));
|
---|
4596 | }
|
---|
4597 |
|
---|
4598 | if (typeof instance.getDerivedStateFromProps === 'function') {
|
---|
4599 | error('%s: getDerivedStateFromProps() is defined as an instance method ' + 'and will be ignored. Instead, declare it as a static method.', name);
|
---|
4600 | }
|
---|
4601 |
|
---|
4602 | if (typeof instance.getDerivedStateFromError === 'function') {
|
---|
4603 | error('%s: getDerivedStateFromError() is defined as an instance method ' + 'and will be ignored. Instead, declare it as a static method.', name);
|
---|
4604 | }
|
---|
4605 |
|
---|
4606 | if (typeof ctor.getSnapshotBeforeUpdate === 'function') {
|
---|
4607 | error('%s: getSnapshotBeforeUpdate() is defined as a static method ' + 'and will be ignored. Instead, declare it as an instance method.', name);
|
---|
4608 | }
|
---|
4609 |
|
---|
4610 | var _state = instance.state;
|
---|
4611 |
|
---|
4612 | if (_state && (typeof _state !== 'object' || isArray(_state))) {
|
---|
4613 | error('%s.state: must be set to an object or null', name);
|
---|
4614 | }
|
---|
4615 |
|
---|
4616 | if (typeof instance.getChildContext === 'function' && typeof ctor.childContextTypes !== 'object') {
|
---|
4617 | error('%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', name);
|
---|
4618 | }
|
---|
4619 | }
|
---|
4620 | }
|
---|
4621 |
|
---|
4622 | function callComponentWillMount(type, instance) {
|
---|
4623 | var oldState = instance.state;
|
---|
4624 |
|
---|
4625 | if (typeof instance.componentWillMount === 'function') {
|
---|
4626 | {
|
---|
4627 | if ( instance.componentWillMount.__suppressDeprecationWarning !== true) {
|
---|
4628 | var componentName = getComponentNameFromType(type) || 'Unknown';
|
---|
4629 |
|
---|
4630 | if (!didWarnAboutDeprecatedWillMount[componentName]) {
|
---|
4631 | warn( // keep this warning in sync with ReactStrictModeWarning.js
|
---|
4632 | '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);
|
---|
4633 |
|
---|
4634 | didWarnAboutDeprecatedWillMount[componentName] = true;
|
---|
4635 | }
|
---|
4636 | }
|
---|
4637 | }
|
---|
4638 |
|
---|
4639 | instance.componentWillMount();
|
---|
4640 | }
|
---|
4641 |
|
---|
4642 | if (typeof instance.UNSAFE_componentWillMount === 'function') {
|
---|
4643 | instance.UNSAFE_componentWillMount();
|
---|
4644 | }
|
---|
4645 |
|
---|
4646 | if (oldState !== instance.state) {
|
---|
4647 | {
|
---|
4648 | error('%s.componentWillMount(): Assigning directly to this.state is ' + "deprecated (except inside a component's " + 'constructor). Use setState instead.', getComponentNameFromType(type) || 'Component');
|
---|
4649 | }
|
---|
4650 |
|
---|
4651 | classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
|
---|
4652 | }
|
---|
4653 | }
|
---|
4654 |
|
---|
4655 | function processUpdateQueue(internalInstance, inst, props, maskedLegacyContext) {
|
---|
4656 | if (internalInstance.queue !== null && internalInstance.queue.length > 0) {
|
---|
4657 | var oldQueue = internalInstance.queue;
|
---|
4658 | var oldReplace = internalInstance.replace;
|
---|
4659 | internalInstance.queue = null;
|
---|
4660 | internalInstance.replace = false;
|
---|
4661 |
|
---|
4662 | if (oldReplace && oldQueue.length === 1) {
|
---|
4663 | inst.state = oldQueue[0];
|
---|
4664 | } else {
|
---|
4665 | var nextState = oldReplace ? oldQueue[0] : inst.state;
|
---|
4666 | var dontMutate = true;
|
---|
4667 |
|
---|
4668 | for (var i = oldReplace ? 1 : 0; i < oldQueue.length; i++) {
|
---|
4669 | var partial = oldQueue[i];
|
---|
4670 | var partialState = typeof partial === 'function' ? partial.call(inst, nextState, props, maskedLegacyContext) : partial;
|
---|
4671 |
|
---|
4672 | if (partialState != null) {
|
---|
4673 | if (dontMutate) {
|
---|
4674 | dontMutate = false;
|
---|
4675 | nextState = assign({}, nextState, partialState);
|
---|
4676 | } else {
|
---|
4677 | assign(nextState, partialState);
|
---|
4678 | }
|
---|
4679 | }
|
---|
4680 | }
|
---|
4681 |
|
---|
4682 | inst.state = nextState;
|
---|
4683 | }
|
---|
4684 | } else {
|
---|
4685 | internalInstance.queue = null;
|
---|
4686 | }
|
---|
4687 | } // Invokes the mount life-cycles on a previously never rendered instance.
|
---|
4688 |
|
---|
4689 |
|
---|
4690 | function mountClassInstance(instance, ctor, newProps, maskedLegacyContext) {
|
---|
4691 | {
|
---|
4692 | checkClassInstance(instance, ctor, newProps);
|
---|
4693 | }
|
---|
4694 |
|
---|
4695 | var initialState = instance.state !== undefined ? instance.state : null;
|
---|
4696 | instance.updater = classComponentUpdater;
|
---|
4697 | instance.props = newProps;
|
---|
4698 | instance.state = initialState; // We don't bother initializing the refs object on the server, since we're not going to resolve them anyway.
|
---|
4699 | // The internal instance will be used to manage updates that happen during this mount.
|
---|
4700 |
|
---|
4701 | var internalInstance = {
|
---|
4702 | queue: [],
|
---|
4703 | replace: false
|
---|
4704 | };
|
---|
4705 | set(instance, internalInstance);
|
---|
4706 | var contextType = ctor.contextType;
|
---|
4707 |
|
---|
4708 | if (typeof contextType === 'object' && contextType !== null) {
|
---|
4709 | instance.context = readContext(contextType);
|
---|
4710 | } else {
|
---|
4711 | instance.context = maskedLegacyContext;
|
---|
4712 | }
|
---|
4713 |
|
---|
4714 | {
|
---|
4715 | if (instance.state === newProps) {
|
---|
4716 | var componentName = getComponentNameFromType(ctor) || 'Component';
|
---|
4717 |
|
---|
4718 | if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
|
---|
4719 | didWarnAboutDirectlyAssigningPropsToState.add(componentName);
|
---|
4720 |
|
---|
4721 | 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);
|
---|
4722 | }
|
---|
4723 | }
|
---|
4724 | }
|
---|
4725 |
|
---|
4726 | var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
|
---|
4727 |
|
---|
4728 | if (typeof getDerivedStateFromProps === 'function') {
|
---|
4729 | instance.state = applyDerivedStateFromProps(instance, ctor, getDerivedStateFromProps, initialState, newProps);
|
---|
4730 | } // In order to support react-lifecycles-compat polyfilled components,
|
---|
4731 | // Unsafe lifecycles should not be invoked for components using the new APIs.
|
---|
4732 |
|
---|
4733 |
|
---|
4734 | if (typeof ctor.getDerivedStateFromProps !== 'function' && typeof instance.getSnapshotBeforeUpdate !== 'function' && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
|
---|
4735 | callComponentWillMount(ctor, instance); // If we had additional state updates during this life-cycle, let's
|
---|
4736 | // process them now.
|
---|
4737 |
|
---|
4738 | processUpdateQueue(internalInstance, instance, newProps, maskedLegacyContext);
|
---|
4739 | }
|
---|
4740 | }
|
---|
4741 |
|
---|
4742 | // Ids are base 32 strings whose binary representation corresponds to the
|
---|
4743 | // position of a node in a tree.
|
---|
4744 | // Every time the tree forks into multiple children, we add additional bits to
|
---|
4745 | // the left of the sequence that represent the position of the child within the
|
---|
4746 | // current level of children.
|
---|
4747 | //
|
---|
4748 | // 00101 00010001011010101
|
---|
4749 | // ╰─┬─╯ ╰───────┬───────╯
|
---|
4750 | // Fork 5 of 20 Parent id
|
---|
4751 | //
|
---|
4752 | // The leading 0s are important. In the above example, you only need 3 bits to
|
---|
4753 | // represent slot 5. However, you need 5 bits to represent all the forks at
|
---|
4754 | // the current level, so we must account for the empty bits at the end.
|
---|
4755 | //
|
---|
4756 | // For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
|
---|
4757 | // the zeroth id at a level would be indistinguishable from its parent.
|
---|
4758 | //
|
---|
4759 | // If a node has only one child, and does not materialize an id (i.e. does not
|
---|
4760 | // contain a useId hook), then we don't need to allocate any space in the
|
---|
4761 | // sequence. It's treated as a transparent indirection. For example, these two
|
---|
4762 | // trees produce the same ids:
|
---|
4763 | //
|
---|
4764 | // <> <>
|
---|
4765 | // <Indirection> <A />
|
---|
4766 | // <A /> <B />
|
---|
4767 | // </Indirection> </>
|
---|
4768 | // <B />
|
---|
4769 | // </>
|
---|
4770 | //
|
---|
4771 | // However, we cannot skip any node that materializes an id. Otherwise, a parent
|
---|
4772 | // id that does not fork would be indistinguishable from its child id. For
|
---|
4773 | // example, this tree does not fork, but the parent and child must have
|
---|
4774 | // different ids.
|
---|
4775 | //
|
---|
4776 | // <Parent>
|
---|
4777 | // <Child />
|
---|
4778 | // </Parent>
|
---|
4779 | //
|
---|
4780 | // To handle this scenario, every time we materialize an id, we allocate a
|
---|
4781 | // new level with a single slot. You can think of this as a fork with only one
|
---|
4782 | // prong, or an array of children with length 1.
|
---|
4783 | //
|
---|
4784 | // It's possible for the size of the sequence to exceed 32 bits, the max
|
---|
4785 | // size for bitwise operations. When this happens, we make more room by
|
---|
4786 | // converting the right part of the id to a string and storing it in an overflow
|
---|
4787 | // variable. We use a base 32 string representation, because 32 is the largest
|
---|
4788 | // power of 2 that is supported by toString(). We want the base to be large so
|
---|
4789 | // that the resulting ids are compact, and we want the base to be a power of 2
|
---|
4790 | // because every log2(base) bits corresponds to a single character, i.e. every
|
---|
4791 | // log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
|
---|
4792 | // affecting the final result.
|
---|
4793 | var emptyTreeContext = {
|
---|
4794 | id: 1,
|
---|
4795 | overflow: ''
|
---|
4796 | };
|
---|
4797 | function getTreeId(context) {
|
---|
4798 | var overflow = context.overflow;
|
---|
4799 | var idWithLeadingBit = context.id;
|
---|
4800 | var id = idWithLeadingBit & ~getLeadingBit(idWithLeadingBit);
|
---|
4801 | return id.toString(32) + overflow;
|
---|
4802 | }
|
---|
4803 | function pushTreeContext(baseContext, totalChildren, index) {
|
---|
4804 | var baseIdWithLeadingBit = baseContext.id;
|
---|
4805 | var baseOverflow = baseContext.overflow; // The leftmost 1 marks the end of the sequence, non-inclusive. It's not part
|
---|
4806 | // of the id; we use it to account for leading 0s.
|
---|
4807 |
|
---|
4808 | var baseLength = getBitLength(baseIdWithLeadingBit) - 1;
|
---|
4809 | var baseId = baseIdWithLeadingBit & ~(1 << baseLength);
|
---|
4810 | var slot = index + 1;
|
---|
4811 | var length = getBitLength(totalChildren) + baseLength; // 30 is the max length we can store without overflowing, taking into
|
---|
4812 | // consideration the leading 1 we use to mark the end of the sequence.
|
---|
4813 |
|
---|
4814 | if (length > 30) {
|
---|
4815 | // We overflowed the bitwise-safe range. Fall back to slower algorithm.
|
---|
4816 | // This branch assumes the length of the base id is greater than 5; it won't
|
---|
4817 | // work for smaller ids, because you need 5 bits per character.
|
---|
4818 | //
|
---|
4819 | // We encode the id in multiple steps: first the base id, then the
|
---|
4820 | // remaining digits.
|
---|
4821 | //
|
---|
4822 | // Each 5 bit sequence corresponds to a single base 32 character. So for
|
---|
4823 | // example, if the current id is 23 bits long, we can convert 20 of those
|
---|
4824 | // bits into a string of 4 characters, with 3 bits left over.
|
---|
4825 | //
|
---|
4826 | // First calculate how many bits in the base id represent a complete
|
---|
4827 | // sequence of characters.
|
---|
4828 | var numberOfOverflowBits = baseLength - baseLength % 5; // Then create a bitmask that selects only those bits.
|
---|
4829 |
|
---|
4830 | var newOverflowBits = (1 << numberOfOverflowBits) - 1; // Select the bits, and convert them to a base 32 string.
|
---|
4831 |
|
---|
4832 | var newOverflow = (baseId & newOverflowBits).toString(32); // Now we can remove those bits from the base id.
|
---|
4833 |
|
---|
4834 | var restOfBaseId = baseId >> numberOfOverflowBits;
|
---|
4835 | var restOfBaseLength = baseLength - numberOfOverflowBits; // Finally, encode the rest of the bits using the normal algorithm. Because
|
---|
4836 | // we made more room, this time it won't overflow.
|
---|
4837 |
|
---|
4838 | var restOfLength = getBitLength(totalChildren) + restOfBaseLength;
|
---|
4839 | var restOfNewBits = slot << restOfBaseLength;
|
---|
4840 | var id = restOfNewBits | restOfBaseId;
|
---|
4841 | var overflow = newOverflow + baseOverflow;
|
---|
4842 | return {
|
---|
4843 | id: 1 << restOfLength | id,
|
---|
4844 | overflow: overflow
|
---|
4845 | };
|
---|
4846 | } else {
|
---|
4847 | // Normal path
|
---|
4848 | var newBits = slot << baseLength;
|
---|
4849 |
|
---|
4850 | var _id = newBits | baseId;
|
---|
4851 |
|
---|
4852 | var _overflow = baseOverflow;
|
---|
4853 | return {
|
---|
4854 | id: 1 << length | _id,
|
---|
4855 | overflow: _overflow
|
---|
4856 | };
|
---|
4857 | }
|
---|
4858 | }
|
---|
4859 |
|
---|
4860 | function getBitLength(number) {
|
---|
4861 | return 32 - clz32(number);
|
---|
4862 | }
|
---|
4863 |
|
---|
4864 | function getLeadingBit(id) {
|
---|
4865 | return 1 << getBitLength(id) - 1;
|
---|
4866 | } // TODO: Math.clz32 is supported in Node 12+. Maybe we can drop the fallback.
|
---|
4867 |
|
---|
4868 |
|
---|
4869 | var clz32 = Math.clz32 ? Math.clz32 : clz32Fallback; // Count leading zeros.
|
---|
4870 | // Based on:
|
---|
4871 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/clz32
|
---|
4872 |
|
---|
4873 | var log = Math.log;
|
---|
4874 | var LN2 = Math.LN2;
|
---|
4875 |
|
---|
4876 | function clz32Fallback(x) {
|
---|
4877 | var asUint = x >>> 0;
|
---|
4878 |
|
---|
4879 | if (asUint === 0) {
|
---|
4880 | return 32;
|
---|
4881 | }
|
---|
4882 |
|
---|
4883 | return 31 - (log(asUint) / LN2 | 0) | 0;
|
---|
4884 | }
|
---|
4885 |
|
---|
4886 | /**
|
---|
4887 | * inlined Object.is polyfill to avoid requiring consumers ship their own
|
---|
4888 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
|
---|
4889 | */
|
---|
4890 | function is(x, y) {
|
---|
4891 | return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
|
---|
4892 | ;
|
---|
4893 | }
|
---|
4894 |
|
---|
4895 | var objectIs = typeof Object.is === 'function' ? Object.is : is;
|
---|
4896 |
|
---|
4897 | var currentlyRenderingComponent = null;
|
---|
4898 | var currentlyRenderingTask = null;
|
---|
4899 | var firstWorkInProgressHook = null;
|
---|
4900 | var workInProgressHook = null; // Whether the work-in-progress hook is a re-rendered hook
|
---|
4901 |
|
---|
4902 | var isReRender = false; // Whether an update was scheduled during the currently executing render pass.
|
---|
4903 |
|
---|
4904 | var didScheduleRenderPhaseUpdate = false; // Counts the number of useId hooks in this component
|
---|
4905 |
|
---|
4906 | var localIdCounter = 0; // Lazily created map of render-phase updates
|
---|
4907 |
|
---|
4908 | var renderPhaseUpdates = null; // Counter to prevent infinite loops.
|
---|
4909 |
|
---|
4910 | var numberOfReRenders = 0;
|
---|
4911 | var RE_RENDER_LIMIT = 25;
|
---|
4912 | var isInHookUserCodeInDev = false; // In DEV, this is the name of the currently executing primitive hook
|
---|
4913 |
|
---|
4914 | var currentHookNameInDev;
|
---|
4915 |
|
---|
4916 | function resolveCurrentlyRenderingComponent() {
|
---|
4917 | if (currentlyRenderingComponent === null) {
|
---|
4918 | 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.');
|
---|
4919 | }
|
---|
4920 |
|
---|
4921 | {
|
---|
4922 | if (isInHookUserCodeInDev) {
|
---|
4923 | 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');
|
---|
4924 | }
|
---|
4925 | }
|
---|
4926 |
|
---|
4927 | return currentlyRenderingComponent;
|
---|
4928 | }
|
---|
4929 |
|
---|
4930 | function areHookInputsEqual(nextDeps, prevDeps) {
|
---|
4931 | if (prevDeps === null) {
|
---|
4932 | {
|
---|
4933 | 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);
|
---|
4934 | }
|
---|
4935 |
|
---|
4936 | return false;
|
---|
4937 | }
|
---|
4938 |
|
---|
4939 | {
|
---|
4940 | // Don't bother comparing lengths in prod because these arrays should be
|
---|
4941 | // passed inline.
|
---|
4942 | if (nextDeps.length !== prevDeps.length) {
|
---|
4943 | 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(', ') + "]");
|
---|
4944 | }
|
---|
4945 | }
|
---|
4946 |
|
---|
4947 | for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
|
---|
4948 | if (objectIs(nextDeps[i], prevDeps[i])) {
|
---|
4949 | continue;
|
---|
4950 | }
|
---|
4951 |
|
---|
4952 | return false;
|
---|
4953 | }
|
---|
4954 |
|
---|
4955 | return true;
|
---|
4956 | }
|
---|
4957 |
|
---|
4958 | function createHook() {
|
---|
4959 | if (numberOfReRenders > 0) {
|
---|
4960 | throw new Error('Rendered more hooks than during the previous render');
|
---|
4961 | }
|
---|
4962 |
|
---|
4963 | return {
|
---|
4964 | memoizedState: null,
|
---|
4965 | queue: null,
|
---|
4966 | next: null
|
---|
4967 | };
|
---|
4968 | }
|
---|
4969 |
|
---|
4970 | function createWorkInProgressHook() {
|
---|
4971 | if (workInProgressHook === null) {
|
---|
4972 | // This is the first hook in the list
|
---|
4973 | if (firstWorkInProgressHook === null) {
|
---|
4974 | isReRender = false;
|
---|
4975 | firstWorkInProgressHook = workInProgressHook = createHook();
|
---|
4976 | } else {
|
---|
4977 | // There's already a work-in-progress. Reuse it.
|
---|
4978 | isReRender = true;
|
---|
4979 | workInProgressHook = firstWorkInProgressHook;
|
---|
4980 | }
|
---|
4981 | } else {
|
---|
4982 | if (workInProgressHook.next === null) {
|
---|
4983 | isReRender = false; // Append to the end of the list
|
---|
4984 |
|
---|
4985 | workInProgressHook = workInProgressHook.next = createHook();
|
---|
4986 | } else {
|
---|
4987 | // There's already a work-in-progress. Reuse it.
|
---|
4988 | isReRender = true;
|
---|
4989 | workInProgressHook = workInProgressHook.next;
|
---|
4990 | }
|
---|
4991 | }
|
---|
4992 |
|
---|
4993 | return workInProgressHook;
|
---|
4994 | }
|
---|
4995 |
|
---|
4996 | function prepareToUseHooks(task, componentIdentity) {
|
---|
4997 | currentlyRenderingComponent = componentIdentity;
|
---|
4998 | currentlyRenderingTask = task;
|
---|
4999 |
|
---|
5000 | {
|
---|
5001 | isInHookUserCodeInDev = false;
|
---|
5002 | } // The following should have already been reset
|
---|
5003 | // didScheduleRenderPhaseUpdate = false;
|
---|
5004 | // localIdCounter = 0;
|
---|
5005 | // firstWorkInProgressHook = null;
|
---|
5006 | // numberOfReRenders = 0;
|
---|
5007 | // renderPhaseUpdates = null;
|
---|
5008 | // workInProgressHook = null;
|
---|
5009 |
|
---|
5010 |
|
---|
5011 | localIdCounter = 0;
|
---|
5012 | }
|
---|
5013 | function finishHooks(Component, props, children, refOrContext) {
|
---|
5014 | // This must be called after every function component to prevent hooks from
|
---|
5015 | // being used in classes.
|
---|
5016 | while (didScheduleRenderPhaseUpdate) {
|
---|
5017 | // Updates were scheduled during the render phase. They are stored in
|
---|
5018 | // the `renderPhaseUpdates` map. Call the component again, reusing the
|
---|
5019 | // work-in-progress hooks and applying the additional updates on top. Keep
|
---|
5020 | // restarting until no more updates are scheduled.
|
---|
5021 | didScheduleRenderPhaseUpdate = false;
|
---|
5022 | localIdCounter = 0;
|
---|
5023 | numberOfReRenders += 1; // Start over from the beginning of the list
|
---|
5024 |
|
---|
5025 | workInProgressHook = null;
|
---|
5026 | children = Component(props, refOrContext);
|
---|
5027 | }
|
---|
5028 |
|
---|
5029 | resetHooksState();
|
---|
5030 | return children;
|
---|
5031 | }
|
---|
5032 | function checkDidRenderIdHook() {
|
---|
5033 | // This should be called immediately after every finishHooks call.
|
---|
5034 | // Conceptually, it's part of the return value of finishHooks; it's only a
|
---|
5035 | // separate function to avoid using an array tuple.
|
---|
5036 | var didRenderIdHook = localIdCounter !== 0;
|
---|
5037 | return didRenderIdHook;
|
---|
5038 | } // Reset the internal hooks state if an error occurs while rendering a component
|
---|
5039 |
|
---|
5040 | function resetHooksState() {
|
---|
5041 | {
|
---|
5042 | isInHookUserCodeInDev = false;
|
---|
5043 | }
|
---|
5044 |
|
---|
5045 | currentlyRenderingComponent = null;
|
---|
5046 | currentlyRenderingTask = null;
|
---|
5047 | didScheduleRenderPhaseUpdate = false;
|
---|
5048 | firstWorkInProgressHook = null;
|
---|
5049 | numberOfReRenders = 0;
|
---|
5050 | renderPhaseUpdates = null;
|
---|
5051 | workInProgressHook = null;
|
---|
5052 | }
|
---|
5053 |
|
---|
5054 | function readContext$1(context) {
|
---|
5055 | {
|
---|
5056 | if (isInHookUserCodeInDev) {
|
---|
5057 | 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().');
|
---|
5058 | }
|
---|
5059 | }
|
---|
5060 |
|
---|
5061 | return readContext(context);
|
---|
5062 | }
|
---|
5063 |
|
---|
5064 | function useContext(context) {
|
---|
5065 | {
|
---|
5066 | currentHookNameInDev = 'useContext';
|
---|
5067 | }
|
---|
5068 |
|
---|
5069 | resolveCurrentlyRenderingComponent();
|
---|
5070 | return readContext(context);
|
---|
5071 | }
|
---|
5072 |
|
---|
5073 | function basicStateReducer(state, action) {
|
---|
5074 | // $FlowFixMe: Flow doesn't like mixed types
|
---|
5075 | return typeof action === 'function' ? action(state) : action;
|
---|
5076 | }
|
---|
5077 |
|
---|
5078 | function useState(initialState) {
|
---|
5079 | {
|
---|
5080 | currentHookNameInDev = 'useState';
|
---|
5081 | }
|
---|
5082 |
|
---|
5083 | return useReducer(basicStateReducer, // useReducer has a special case to support lazy useState initializers
|
---|
5084 | initialState);
|
---|
5085 | }
|
---|
5086 | function useReducer(reducer, initialArg, init) {
|
---|
5087 | {
|
---|
5088 | if (reducer !== basicStateReducer) {
|
---|
5089 | currentHookNameInDev = 'useReducer';
|
---|
5090 | }
|
---|
5091 | }
|
---|
5092 |
|
---|
5093 | currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
|
---|
5094 | workInProgressHook = createWorkInProgressHook();
|
---|
5095 |
|
---|
5096 | if (isReRender) {
|
---|
5097 | // This is a re-render. Apply the new render phase updates to the previous
|
---|
5098 | // current hook.
|
---|
5099 | var queue = workInProgressHook.queue;
|
---|
5100 | var dispatch = queue.dispatch;
|
---|
5101 |
|
---|
5102 | if (renderPhaseUpdates !== null) {
|
---|
5103 | // Render phase updates are stored in a map of queue -> linked list
|
---|
5104 | var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
|
---|
5105 |
|
---|
5106 | if (firstRenderPhaseUpdate !== undefined) {
|
---|
5107 | renderPhaseUpdates.delete(queue);
|
---|
5108 | var newState = workInProgressHook.memoizedState;
|
---|
5109 | var update = firstRenderPhaseUpdate;
|
---|
5110 |
|
---|
5111 | do {
|
---|
5112 | // Process this render phase update. We don't have to check the
|
---|
5113 | // priority because it will always be the same as the current
|
---|
5114 | // render's.
|
---|
5115 | var action = update.action;
|
---|
5116 |
|
---|
5117 | {
|
---|
5118 | isInHookUserCodeInDev = true;
|
---|
5119 | }
|
---|
5120 |
|
---|
5121 | newState = reducer(newState, action);
|
---|
5122 |
|
---|
5123 | {
|
---|
5124 | isInHookUserCodeInDev = false;
|
---|
5125 | }
|
---|
5126 |
|
---|
5127 | update = update.next;
|
---|
5128 | } while (update !== null);
|
---|
5129 |
|
---|
5130 | workInProgressHook.memoizedState = newState;
|
---|
5131 | return [newState, dispatch];
|
---|
5132 | }
|
---|
5133 | }
|
---|
5134 |
|
---|
5135 | return [workInProgressHook.memoizedState, dispatch];
|
---|
5136 | } else {
|
---|
5137 | {
|
---|
5138 | isInHookUserCodeInDev = true;
|
---|
5139 | }
|
---|
5140 |
|
---|
5141 | var initialState;
|
---|
5142 |
|
---|
5143 | if (reducer === basicStateReducer) {
|
---|
5144 | // Special case for `useState`.
|
---|
5145 | initialState = typeof initialArg === 'function' ? initialArg() : initialArg;
|
---|
5146 | } else {
|
---|
5147 | initialState = init !== undefined ? init(initialArg) : initialArg;
|
---|
5148 | }
|
---|
5149 |
|
---|
5150 | {
|
---|
5151 | isInHookUserCodeInDev = false;
|
---|
5152 | }
|
---|
5153 |
|
---|
5154 | workInProgressHook.memoizedState = initialState;
|
---|
5155 |
|
---|
5156 | var _queue = workInProgressHook.queue = {
|
---|
5157 | last: null,
|
---|
5158 | dispatch: null
|
---|
5159 | };
|
---|
5160 |
|
---|
5161 | var _dispatch = _queue.dispatch = dispatchAction.bind(null, currentlyRenderingComponent, _queue);
|
---|
5162 |
|
---|
5163 | return [workInProgressHook.memoizedState, _dispatch];
|
---|
5164 | }
|
---|
5165 | }
|
---|
5166 |
|
---|
5167 | function useMemo(nextCreate, deps) {
|
---|
5168 | currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
|
---|
5169 | workInProgressHook = createWorkInProgressHook();
|
---|
5170 | var nextDeps = deps === undefined ? null : deps;
|
---|
5171 |
|
---|
5172 | if (workInProgressHook !== null) {
|
---|
5173 | var prevState = workInProgressHook.memoizedState;
|
---|
5174 |
|
---|
5175 | if (prevState !== null) {
|
---|
5176 | if (nextDeps !== null) {
|
---|
5177 | var prevDeps = prevState[1];
|
---|
5178 |
|
---|
5179 | if (areHookInputsEqual(nextDeps, prevDeps)) {
|
---|
5180 | return prevState[0];
|
---|
5181 | }
|
---|
5182 | }
|
---|
5183 | }
|
---|
5184 | }
|
---|
5185 |
|
---|
5186 | {
|
---|
5187 | isInHookUserCodeInDev = true;
|
---|
5188 | }
|
---|
5189 |
|
---|
5190 | var nextValue = nextCreate();
|
---|
5191 |
|
---|
5192 | {
|
---|
5193 | isInHookUserCodeInDev = false;
|
---|
5194 | }
|
---|
5195 |
|
---|
5196 | workInProgressHook.memoizedState = [nextValue, nextDeps];
|
---|
5197 | return nextValue;
|
---|
5198 | }
|
---|
5199 |
|
---|
5200 | function useRef(initialValue) {
|
---|
5201 | currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
|
---|
5202 | workInProgressHook = createWorkInProgressHook();
|
---|
5203 | var previousRef = workInProgressHook.memoizedState;
|
---|
5204 |
|
---|
5205 | if (previousRef === null) {
|
---|
5206 | var ref = {
|
---|
5207 | current: initialValue
|
---|
5208 | };
|
---|
5209 |
|
---|
5210 | {
|
---|
5211 | Object.seal(ref);
|
---|
5212 | }
|
---|
5213 |
|
---|
5214 | workInProgressHook.memoizedState = ref;
|
---|
5215 | return ref;
|
---|
5216 | } else {
|
---|
5217 | return previousRef;
|
---|
5218 | }
|
---|
5219 | }
|
---|
5220 |
|
---|
5221 | function useLayoutEffect(create, inputs) {
|
---|
5222 | {
|
---|
5223 | currentHookNameInDev = 'useLayoutEffect';
|
---|
5224 |
|
---|
5225 | 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.');
|
---|
5226 | }
|
---|
5227 | }
|
---|
5228 |
|
---|
5229 | function dispatchAction(componentIdentity, queue, action) {
|
---|
5230 | if (numberOfReRenders >= RE_RENDER_LIMIT) {
|
---|
5231 | throw new Error('Too many re-renders. React limits the number of renders to prevent ' + 'an infinite loop.');
|
---|
5232 | }
|
---|
5233 |
|
---|
5234 | if (componentIdentity === currentlyRenderingComponent) {
|
---|
5235 | // This is a render phase update. Stash it in a lazily-created map of
|
---|
5236 | // queue -> linked list of updates. After this render pass, we'll restart
|
---|
5237 | // and apply the stashed updates on top of the work-in-progress hook.
|
---|
5238 | didScheduleRenderPhaseUpdate = true;
|
---|
5239 | var update = {
|
---|
5240 | action: action,
|
---|
5241 | next: null
|
---|
5242 | };
|
---|
5243 |
|
---|
5244 | if (renderPhaseUpdates === null) {
|
---|
5245 | renderPhaseUpdates = new Map();
|
---|
5246 | }
|
---|
5247 |
|
---|
5248 | var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
|
---|
5249 |
|
---|
5250 | if (firstRenderPhaseUpdate === undefined) {
|
---|
5251 | renderPhaseUpdates.set(queue, update);
|
---|
5252 | } else {
|
---|
5253 | // Append the update to the end of the list.
|
---|
5254 | var lastRenderPhaseUpdate = firstRenderPhaseUpdate;
|
---|
5255 |
|
---|
5256 | while (lastRenderPhaseUpdate.next !== null) {
|
---|
5257 | lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
|
---|
5258 | }
|
---|
5259 |
|
---|
5260 | lastRenderPhaseUpdate.next = update;
|
---|
5261 | }
|
---|
5262 | }
|
---|
5263 | }
|
---|
5264 |
|
---|
5265 | function useCallback(callback, deps) {
|
---|
5266 | return useMemo(function () {
|
---|
5267 | return callback;
|
---|
5268 | }, deps);
|
---|
5269 | } // TODO Decide on how to implement this hook for server rendering.
|
---|
5270 | // If a mutation occurs during render, consider triggering a Suspense boundary
|
---|
5271 | // and falling back to client rendering.
|
---|
5272 |
|
---|
5273 | function useMutableSource(source, getSnapshot, subscribe) {
|
---|
5274 | resolveCurrentlyRenderingComponent();
|
---|
5275 | return getSnapshot(source._source);
|
---|
5276 | }
|
---|
5277 |
|
---|
5278 | function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
|
---|
5279 | if (getServerSnapshot === undefined) {
|
---|
5280 | throw new Error('Missing getServerSnapshot, which is required for ' + 'server-rendered content. Will revert to client rendering.');
|
---|
5281 | }
|
---|
5282 |
|
---|
5283 | return getServerSnapshot();
|
---|
5284 | }
|
---|
5285 |
|
---|
5286 | function useDeferredValue(value) {
|
---|
5287 | resolveCurrentlyRenderingComponent();
|
---|
5288 | return value;
|
---|
5289 | }
|
---|
5290 |
|
---|
5291 | function unsupportedStartTransition() {
|
---|
5292 | throw new Error('startTransition cannot be called during server rendering.');
|
---|
5293 | }
|
---|
5294 |
|
---|
5295 | function useTransition() {
|
---|
5296 | resolveCurrentlyRenderingComponent();
|
---|
5297 | return [false, unsupportedStartTransition];
|
---|
5298 | }
|
---|
5299 |
|
---|
5300 | function useId() {
|
---|
5301 | var task = currentlyRenderingTask;
|
---|
5302 | var treeId = getTreeId(task.treeContext);
|
---|
5303 | var responseState = currentResponseState;
|
---|
5304 |
|
---|
5305 | if (responseState === null) {
|
---|
5306 | throw new Error('Invalid hook call. Hooks can only be called inside of the body of a function component.');
|
---|
5307 | }
|
---|
5308 |
|
---|
5309 | var localId = localIdCounter++;
|
---|
5310 | return makeId(responseState, treeId, localId);
|
---|
5311 | }
|
---|
5312 |
|
---|
5313 | function noop() {}
|
---|
5314 |
|
---|
5315 | var Dispatcher = {
|
---|
5316 | readContext: readContext$1,
|
---|
5317 | useContext: useContext,
|
---|
5318 | useMemo: useMemo,
|
---|
5319 | useReducer: useReducer,
|
---|
5320 | useRef: useRef,
|
---|
5321 | useState: useState,
|
---|
5322 | useInsertionEffect: noop,
|
---|
5323 | useLayoutEffect: useLayoutEffect,
|
---|
5324 | useCallback: useCallback,
|
---|
5325 | // useImperativeHandle is not run in the server environment
|
---|
5326 | useImperativeHandle: noop,
|
---|
5327 | // Effects are not run in the server environment.
|
---|
5328 | useEffect: noop,
|
---|
5329 | // Debugging effect
|
---|
5330 | useDebugValue: noop,
|
---|
5331 | useDeferredValue: useDeferredValue,
|
---|
5332 | useTransition: useTransition,
|
---|
5333 | useId: useId,
|
---|
5334 | // Subscriptions are not setup in a server environment.
|
---|
5335 | useMutableSource: useMutableSource,
|
---|
5336 | useSyncExternalStore: useSyncExternalStore
|
---|
5337 | };
|
---|
5338 |
|
---|
5339 | var currentResponseState = null;
|
---|
5340 | function setCurrentResponseState(responseState) {
|
---|
5341 | currentResponseState = responseState;
|
---|
5342 | }
|
---|
5343 |
|
---|
5344 | function getStackByComponentStackNode(componentStack) {
|
---|
5345 | try {
|
---|
5346 | var info = '';
|
---|
5347 | var node = componentStack;
|
---|
5348 |
|
---|
5349 | do {
|
---|
5350 | switch (node.tag) {
|
---|
5351 | case 0:
|
---|
5352 | info += describeBuiltInComponentFrame(node.type, null, null);
|
---|
5353 | break;
|
---|
5354 |
|
---|
5355 | case 1:
|
---|
5356 | info += describeFunctionComponentFrame(node.type, null, null);
|
---|
5357 | break;
|
---|
5358 |
|
---|
5359 | case 2:
|
---|
5360 | info += describeClassComponentFrame(node.type, null, null);
|
---|
5361 | break;
|
---|
5362 | }
|
---|
5363 |
|
---|
5364 | node = node.parent;
|
---|
5365 | } while (node);
|
---|
5366 |
|
---|
5367 | return info;
|
---|
5368 | } catch (x) {
|
---|
5369 | return '\nError generating stack: ' + x.message + '\n' + x.stack;
|
---|
5370 | }
|
---|
5371 | }
|
---|
5372 |
|
---|
5373 | var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher;
|
---|
5374 | var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
|
---|
5375 | var PENDING = 0;
|
---|
5376 | var COMPLETED = 1;
|
---|
5377 | var FLUSHED = 2;
|
---|
5378 | var ABORTED = 3;
|
---|
5379 | var ERRORED = 4;
|
---|
5380 | var OPEN = 0;
|
---|
5381 | var CLOSING = 1;
|
---|
5382 | var CLOSED = 2;
|
---|
5383 | // This is a default heuristic for how to split up the HTML content into progressive
|
---|
5384 | // loading. Our goal is to be able to display additional new content about every 500ms.
|
---|
5385 | // Faster than that is unnecessary and should be throttled on the client. It also
|
---|
5386 | // adds unnecessary overhead to do more splits. We don't know if it's a higher or lower
|
---|
5387 | // end device but higher end suffer less from the overhead than lower end does from
|
---|
5388 | // not getting small enough pieces. We error on the side of low end.
|
---|
5389 | // We base this on low end 3G speeds which is about 500kbits per second. We assume
|
---|
5390 | // that there can be a reasonable drop off from max bandwidth which leaves you with
|
---|
5391 | // as little as 80%. We can receive half of that each 500ms - at best. In practice,
|
---|
5392 | // a little bandwidth is lost to processing and contention - e.g. CSS and images that
|
---|
5393 | // are downloaded along with the main content. So we estimate about half of that to be
|
---|
5394 | // the lower end throughput. In other words, we expect that you can at least show
|
---|
5395 | // about 12.5kb of content per 500ms. Not counting starting latency for the first
|
---|
5396 | // paint.
|
---|
5397 | // 500 * 1024 / 8 * .8 * 0.5 / 2
|
---|
5398 | var DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
|
---|
5399 |
|
---|
5400 | function defaultErrorHandler(error) {
|
---|
5401 | console['error'](error); // Don't transform to our wrapper
|
---|
5402 |
|
---|
5403 | return null;
|
---|
5404 | }
|
---|
5405 |
|
---|
5406 | function noop$1() {}
|
---|
5407 |
|
---|
5408 | function createRequest(children, responseState, rootFormatContext, progressiveChunkSize, onError, onAllReady, onShellReady, onShellError, onFatalError) {
|
---|
5409 | var pingedTasks = [];
|
---|
5410 | var abortSet = new Set();
|
---|
5411 | var request = {
|
---|
5412 | destination: null,
|
---|
5413 | responseState: responseState,
|
---|
5414 | progressiveChunkSize: progressiveChunkSize === undefined ? DEFAULT_PROGRESSIVE_CHUNK_SIZE : progressiveChunkSize,
|
---|
5415 | status: OPEN,
|
---|
5416 | fatalError: null,
|
---|
5417 | nextSegmentId: 0,
|
---|
5418 | allPendingTasks: 0,
|
---|
5419 | pendingRootTasks: 0,
|
---|
5420 | completedRootSegment: null,
|
---|
5421 | abortableTasks: abortSet,
|
---|
5422 | pingedTasks: pingedTasks,
|
---|
5423 | clientRenderedBoundaries: [],
|
---|
5424 | completedBoundaries: [],
|
---|
5425 | partialBoundaries: [],
|
---|
5426 | onError: onError === undefined ? defaultErrorHandler : onError,
|
---|
5427 | onAllReady: onAllReady === undefined ? noop$1 : onAllReady,
|
---|
5428 | onShellReady: onShellReady === undefined ? noop$1 : onShellReady,
|
---|
5429 | onShellError: onShellError === undefined ? noop$1 : onShellError,
|
---|
5430 | onFatalError: onFatalError === undefined ? noop$1 : onFatalError
|
---|
5431 | }; // This segment represents the root fallback.
|
---|
5432 |
|
---|
5433 | var rootSegment = createPendingSegment(request, 0, null, rootFormatContext, // Root segments are never embedded in Text on either edge
|
---|
5434 | false, false); // There is no parent so conceptually, we're unblocked to flush this segment.
|
---|
5435 |
|
---|
5436 | rootSegment.parentFlushed = true;
|
---|
5437 | var rootTask = createTask(request, children, null, rootSegment, abortSet, emptyContextObject, rootContextSnapshot, emptyTreeContext);
|
---|
5438 | pingedTasks.push(rootTask);
|
---|
5439 | return request;
|
---|
5440 | }
|
---|
5441 |
|
---|
5442 | function pingTask(request, task) {
|
---|
5443 | var pingedTasks = request.pingedTasks;
|
---|
5444 | pingedTasks.push(task);
|
---|
5445 |
|
---|
5446 | if (pingedTasks.length === 1) {
|
---|
5447 | scheduleWork(function () {
|
---|
5448 | return performWork(request);
|
---|
5449 | });
|
---|
5450 | }
|
---|
5451 | }
|
---|
5452 |
|
---|
5453 | function createSuspenseBoundary(request, fallbackAbortableTasks) {
|
---|
5454 | return {
|
---|
5455 | id: UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
|
---|
5456 | rootSegmentID: -1,
|
---|
5457 | parentFlushed: false,
|
---|
5458 | pendingTasks: 0,
|
---|
5459 | forceClientRender: false,
|
---|
5460 | completedSegments: [],
|
---|
5461 | byteSize: 0,
|
---|
5462 | fallbackAbortableTasks: fallbackAbortableTasks,
|
---|
5463 | errorDigest: null
|
---|
5464 | };
|
---|
5465 | }
|
---|
5466 |
|
---|
5467 | function createTask(request, node, blockedBoundary, blockedSegment, abortSet, legacyContext, context, treeContext) {
|
---|
5468 | request.allPendingTasks++;
|
---|
5469 |
|
---|
5470 | if (blockedBoundary === null) {
|
---|
5471 | request.pendingRootTasks++;
|
---|
5472 | } else {
|
---|
5473 | blockedBoundary.pendingTasks++;
|
---|
5474 | }
|
---|
5475 |
|
---|
5476 | var task = {
|
---|
5477 | node: node,
|
---|
5478 | ping: function () {
|
---|
5479 | return pingTask(request, task);
|
---|
5480 | },
|
---|
5481 | blockedBoundary: blockedBoundary,
|
---|
5482 | blockedSegment: blockedSegment,
|
---|
5483 | abortSet: abortSet,
|
---|
5484 | legacyContext: legacyContext,
|
---|
5485 | context: context,
|
---|
5486 | treeContext: treeContext
|
---|
5487 | };
|
---|
5488 |
|
---|
5489 | {
|
---|
5490 | task.componentStack = null;
|
---|
5491 | }
|
---|
5492 |
|
---|
5493 | abortSet.add(task);
|
---|
5494 | return task;
|
---|
5495 | }
|
---|
5496 |
|
---|
5497 | function createPendingSegment(request, index, boundary, formatContext, lastPushedText, textEmbedded) {
|
---|
5498 | return {
|
---|
5499 | status: PENDING,
|
---|
5500 | id: -1,
|
---|
5501 | // lazily assigned later
|
---|
5502 | index: index,
|
---|
5503 | parentFlushed: false,
|
---|
5504 | chunks: [],
|
---|
5505 | children: [],
|
---|
5506 | formatContext: formatContext,
|
---|
5507 | boundary: boundary,
|
---|
5508 | lastPushedText: lastPushedText,
|
---|
5509 | textEmbedded: textEmbedded
|
---|
5510 | };
|
---|
5511 | } // DEV-only global reference to the currently executing task
|
---|
5512 |
|
---|
5513 |
|
---|
5514 | var currentTaskInDEV = null;
|
---|
5515 |
|
---|
5516 | function getCurrentStackInDEV() {
|
---|
5517 | {
|
---|
5518 | if (currentTaskInDEV === null || currentTaskInDEV.componentStack === null) {
|
---|
5519 | return '';
|
---|
5520 | }
|
---|
5521 |
|
---|
5522 | return getStackByComponentStackNode(currentTaskInDEV.componentStack);
|
---|
5523 | }
|
---|
5524 | }
|
---|
5525 |
|
---|
5526 | function pushBuiltInComponentStackInDEV(task, type) {
|
---|
5527 | {
|
---|
5528 | task.componentStack = {
|
---|
5529 | tag: 0,
|
---|
5530 | parent: task.componentStack,
|
---|
5531 | type: type
|
---|
5532 | };
|
---|
5533 | }
|
---|
5534 | }
|
---|
5535 |
|
---|
5536 | function pushFunctionComponentStackInDEV(task, type) {
|
---|
5537 | {
|
---|
5538 | task.componentStack = {
|
---|
5539 | tag: 1,
|
---|
5540 | parent: task.componentStack,
|
---|
5541 | type: type
|
---|
5542 | };
|
---|
5543 | }
|
---|
5544 | }
|
---|
5545 |
|
---|
5546 | function pushClassComponentStackInDEV(task, type) {
|
---|
5547 | {
|
---|
5548 | task.componentStack = {
|
---|
5549 | tag: 2,
|
---|
5550 | parent: task.componentStack,
|
---|
5551 | type: type
|
---|
5552 | };
|
---|
5553 | }
|
---|
5554 | }
|
---|
5555 |
|
---|
5556 | function popComponentStackInDEV(task) {
|
---|
5557 | {
|
---|
5558 | if (task.componentStack === null) {
|
---|
5559 | error('Unexpectedly popped too many stack frames. This is a bug in React.');
|
---|
5560 | } else {
|
---|
5561 | task.componentStack = task.componentStack.parent;
|
---|
5562 | }
|
---|
5563 | }
|
---|
5564 | } // stash the component stack of an unwinding error until it is processed
|
---|
5565 |
|
---|
5566 |
|
---|
5567 | var lastBoundaryErrorComponentStackDev = null;
|
---|
5568 |
|
---|
5569 | function captureBoundaryErrorDetailsDev(boundary, error) {
|
---|
5570 | {
|
---|
5571 | var errorMessage;
|
---|
5572 |
|
---|
5573 | if (typeof error === 'string') {
|
---|
5574 | errorMessage = error;
|
---|
5575 | } else if (error && typeof error.message === 'string') {
|
---|
5576 | errorMessage = error.message;
|
---|
5577 | } else {
|
---|
5578 | // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
5579 | errorMessage = String(error);
|
---|
5580 | }
|
---|
5581 |
|
---|
5582 | var errorComponentStack = lastBoundaryErrorComponentStackDev || getCurrentStackInDEV();
|
---|
5583 | lastBoundaryErrorComponentStackDev = null;
|
---|
5584 | boundary.errorMessage = errorMessage;
|
---|
5585 | boundary.errorComponentStack = errorComponentStack;
|
---|
5586 | }
|
---|
5587 | }
|
---|
5588 |
|
---|
5589 | function logRecoverableError(request, error) {
|
---|
5590 | // If this callback errors, we intentionally let that error bubble up to become a fatal error
|
---|
5591 | // so that someone fixes the error reporting instead of hiding it.
|
---|
5592 | var errorDigest = request.onError(error);
|
---|
5593 |
|
---|
5594 | if (errorDigest != null && typeof errorDigest !== 'string') {
|
---|
5595 | // eslint-disable-next-line react-internal/prod-error-codes
|
---|
5596 | 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");
|
---|
5597 | }
|
---|
5598 |
|
---|
5599 | return errorDigest;
|
---|
5600 | }
|
---|
5601 |
|
---|
5602 | function fatalError(request, error) {
|
---|
5603 | // This is called outside error handling code such as if the root errors outside
|
---|
5604 | // a suspense boundary or if the root suspense boundary's fallback errors.
|
---|
5605 | // It's also called if React itself or its host configs errors.
|
---|
5606 | var onShellError = request.onShellError;
|
---|
5607 | onShellError(error);
|
---|
5608 | var onFatalError = request.onFatalError;
|
---|
5609 | onFatalError(error);
|
---|
5610 |
|
---|
5611 | if (request.destination !== null) {
|
---|
5612 | request.status = CLOSED;
|
---|
5613 | closeWithError(request.destination, error);
|
---|
5614 | } else {
|
---|
5615 | request.status = CLOSING;
|
---|
5616 | request.fatalError = error;
|
---|
5617 | }
|
---|
5618 | }
|
---|
5619 |
|
---|
5620 | function renderSuspenseBoundary(request, task, props) {
|
---|
5621 | pushBuiltInComponentStackInDEV(task, 'Suspense');
|
---|
5622 | var parentBoundary = task.blockedBoundary;
|
---|
5623 | var parentSegment = task.blockedSegment; // Each time we enter a suspense boundary, we split out into a new segment for
|
---|
5624 | // the fallback so that we can later replace that segment with the content.
|
---|
5625 | // This also lets us split out the main content even if it doesn't suspend,
|
---|
5626 | // in case it ends up generating a large subtree of content.
|
---|
5627 |
|
---|
5628 | var fallback = props.fallback;
|
---|
5629 | var content = props.children;
|
---|
5630 | var fallbackAbortSet = new Set();
|
---|
5631 | var newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
|
---|
5632 | var insertionIndex = parentSegment.chunks.length; // The children of the boundary segment is actually the fallback.
|
---|
5633 |
|
---|
5634 | var boundarySegment = createPendingSegment(request, insertionIndex, newBoundary, parentSegment.formatContext, // boundaries never require text embedding at their edges because comment nodes bound them
|
---|
5635 | false, false);
|
---|
5636 | parentSegment.children.push(boundarySegment); // The parentSegment has a child Segment at this index so we reset the lastPushedText marker on the parent
|
---|
5637 |
|
---|
5638 | parentSegment.lastPushedText = false; // This segment is the actual child content. We can start rendering that immediately.
|
---|
5639 |
|
---|
5640 | var contentRootSegment = createPendingSegment(request, 0, null, parentSegment.formatContext, // boundaries never require text embedding at their edges because comment nodes bound them
|
---|
5641 | false, false); // We mark the root segment as having its parent flushed. It's not really flushed but there is
|
---|
5642 | // no parent segment so there's nothing to wait on.
|
---|
5643 |
|
---|
5644 | contentRootSegment.parentFlushed = true; // Currently this is running synchronously. We could instead schedule this to pingedTasks.
|
---|
5645 | // I suspect that there might be some efficiency benefits from not creating the suspended task
|
---|
5646 | // and instead just using the stack if possible.
|
---|
5647 | // TODO: Call this directly instead of messing with saving and restoring contexts.
|
---|
5648 | // We can reuse the current context and task to render the content immediately without
|
---|
5649 | // context switching. We just need to temporarily switch which boundary and which segment
|
---|
5650 | // we're writing to. If something suspends, it'll spawn new suspended task with that context.
|
---|
5651 |
|
---|
5652 | task.blockedBoundary = newBoundary;
|
---|
5653 | task.blockedSegment = contentRootSegment;
|
---|
5654 |
|
---|
5655 | try {
|
---|
5656 | // We use the safe form because we don't handle suspending here. Only error handling.
|
---|
5657 | renderNode(request, task, content);
|
---|
5658 | pushSegmentFinale(contentRootSegment.chunks, request.responseState, contentRootSegment.lastPushedText, contentRootSegment.textEmbedded);
|
---|
5659 | contentRootSegment.status = COMPLETED;
|
---|
5660 | queueCompletedSegment(newBoundary, contentRootSegment);
|
---|
5661 |
|
---|
5662 | if (newBoundary.pendingTasks === 0) {
|
---|
5663 | // This must have been the last segment we were waiting on. This boundary is now complete.
|
---|
5664 | // Therefore we won't need the fallback. We early return so that we don't have to create
|
---|
5665 | // the fallback.
|
---|
5666 | popComponentStackInDEV(task);
|
---|
5667 | return;
|
---|
5668 | }
|
---|
5669 | } catch (error) {
|
---|
5670 | contentRootSegment.status = ERRORED;
|
---|
5671 | newBoundary.forceClientRender = true;
|
---|
5672 | newBoundary.errorDigest = logRecoverableError(request, error);
|
---|
5673 |
|
---|
5674 | {
|
---|
5675 | captureBoundaryErrorDetailsDev(newBoundary, error);
|
---|
5676 | } // We don't need to decrement any task numbers because we didn't spawn any new task.
|
---|
5677 | // We don't need to schedule any task because we know the parent has written yet.
|
---|
5678 | // We do need to fallthrough to create the fallback though.
|
---|
5679 |
|
---|
5680 | } finally {
|
---|
5681 | task.blockedBoundary = parentBoundary;
|
---|
5682 | task.blockedSegment = parentSegment;
|
---|
5683 | } // We create suspended task for the fallback because we don't want to actually work
|
---|
5684 | // on it yet in case we finish the main content, so we queue for later.
|
---|
5685 |
|
---|
5686 |
|
---|
5687 | var suspendedFallbackTask = createTask(request, fallback, parentBoundary, boundarySegment, fallbackAbortSet, task.legacyContext, task.context, task.treeContext);
|
---|
5688 |
|
---|
5689 | {
|
---|
5690 | suspendedFallbackTask.componentStack = task.componentStack;
|
---|
5691 | } // TODO: This should be queued at a separate lower priority queue so that we only work
|
---|
5692 | // on preparing fallbacks if we don't have any more main content to task on.
|
---|
5693 |
|
---|
5694 |
|
---|
5695 | request.pingedTasks.push(suspendedFallbackTask);
|
---|
5696 | popComponentStackInDEV(task);
|
---|
5697 | }
|
---|
5698 |
|
---|
5699 | function renderHostElement(request, task, type, props) {
|
---|
5700 | pushBuiltInComponentStackInDEV(task, type);
|
---|
5701 | var segment = task.blockedSegment;
|
---|
5702 | var children = pushStartInstance(segment.chunks, type, props, request.responseState, segment.formatContext);
|
---|
5703 | segment.lastPushedText = false;
|
---|
5704 | var prevContext = segment.formatContext;
|
---|
5705 | segment.formatContext = getChildFormatContext(prevContext, type, props); // We use the non-destructive form because if something suspends, we still
|
---|
5706 | // need to pop back up and finish this subtree of HTML.
|
---|
5707 |
|
---|
5708 | renderNode(request, task, children); // We expect that errors will fatal the whole task and that we don't need
|
---|
5709 | // the correct context. Therefore this is not in a finally.
|
---|
5710 |
|
---|
5711 | segment.formatContext = prevContext;
|
---|
5712 | pushEndInstance(segment.chunks, type);
|
---|
5713 | segment.lastPushedText = false;
|
---|
5714 | popComponentStackInDEV(task);
|
---|
5715 | }
|
---|
5716 |
|
---|
5717 | function shouldConstruct$1(Component) {
|
---|
5718 | return Component.prototype && Component.prototype.isReactComponent;
|
---|
5719 | }
|
---|
5720 |
|
---|
5721 | function renderWithHooks(request, task, Component, props, secondArg) {
|
---|
5722 | var componentIdentity = {};
|
---|
5723 | prepareToUseHooks(task, componentIdentity);
|
---|
5724 | var result = Component(props, secondArg);
|
---|
5725 | return finishHooks(Component, props, result, secondArg);
|
---|
5726 | }
|
---|
5727 |
|
---|
5728 | function finishClassComponent(request, task, instance, Component, props) {
|
---|
5729 | var nextChildren = instance.render();
|
---|
5730 |
|
---|
5731 | {
|
---|
5732 | if (instance.props !== props) {
|
---|
5733 | if (!didWarnAboutReassigningProps) {
|
---|
5734 | 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');
|
---|
5735 | }
|
---|
5736 |
|
---|
5737 | didWarnAboutReassigningProps = true;
|
---|
5738 | }
|
---|
5739 | }
|
---|
5740 |
|
---|
5741 | {
|
---|
5742 | var childContextTypes = Component.childContextTypes;
|
---|
5743 |
|
---|
5744 | if (childContextTypes !== null && childContextTypes !== undefined) {
|
---|
5745 | var previousContext = task.legacyContext;
|
---|
5746 | var mergedContext = processChildContext(instance, Component, previousContext, childContextTypes);
|
---|
5747 | task.legacyContext = mergedContext;
|
---|
5748 | renderNodeDestructive(request, task, nextChildren);
|
---|
5749 | task.legacyContext = previousContext;
|
---|
5750 | return;
|
---|
5751 | }
|
---|
5752 | }
|
---|
5753 |
|
---|
5754 | renderNodeDestructive(request, task, nextChildren);
|
---|
5755 | }
|
---|
5756 |
|
---|
5757 | function renderClassComponent(request, task, Component, props) {
|
---|
5758 | pushClassComponentStackInDEV(task, Component);
|
---|
5759 | var maskedContext = getMaskedContext(Component, task.legacyContext) ;
|
---|
5760 | var instance = constructClassInstance(Component, props, maskedContext);
|
---|
5761 | mountClassInstance(instance, Component, props, maskedContext);
|
---|
5762 | finishClassComponent(request, task, instance, Component, props);
|
---|
5763 | popComponentStackInDEV(task);
|
---|
5764 | }
|
---|
5765 |
|
---|
5766 | var didWarnAboutBadClass = {};
|
---|
5767 | var didWarnAboutModulePatternComponent = {};
|
---|
5768 | var didWarnAboutContextTypeOnFunctionComponent = {};
|
---|
5769 | var didWarnAboutGetDerivedStateOnFunctionComponent = {};
|
---|
5770 | var didWarnAboutReassigningProps = false;
|
---|
5771 | var didWarnAboutDefaultPropsOnFunctionComponent = {};
|
---|
5772 | var didWarnAboutGenerators = false;
|
---|
5773 | var didWarnAboutMaps = false;
|
---|
5774 | var hasWarnedAboutUsingContextAsConsumer = false; // This would typically be a function component but we still support module pattern
|
---|
5775 | // components for some reason.
|
---|
5776 |
|
---|
5777 | function renderIndeterminateComponent(request, task, Component, props) {
|
---|
5778 | var legacyContext;
|
---|
5779 |
|
---|
5780 | {
|
---|
5781 | legacyContext = getMaskedContext(Component, task.legacyContext);
|
---|
5782 | }
|
---|
5783 |
|
---|
5784 | pushFunctionComponentStackInDEV(task, Component);
|
---|
5785 |
|
---|
5786 | {
|
---|
5787 | if (Component.prototype && typeof Component.prototype.render === 'function') {
|
---|
5788 | var componentName = getComponentNameFromType(Component) || 'Unknown';
|
---|
5789 |
|
---|
5790 | if (!didWarnAboutBadClass[componentName]) {
|
---|
5791 | 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);
|
---|
5792 |
|
---|
5793 | didWarnAboutBadClass[componentName] = true;
|
---|
5794 | }
|
---|
5795 | }
|
---|
5796 | }
|
---|
5797 |
|
---|
5798 | var value = renderWithHooks(request, task, Component, props, legacyContext);
|
---|
5799 | var hasId = checkDidRenderIdHook();
|
---|
5800 |
|
---|
5801 | {
|
---|
5802 | // Support for module components is deprecated and is removed behind a flag.
|
---|
5803 | // Whether or not it would crash later, we want to show a good message in DEV first.
|
---|
5804 | if (typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
|
---|
5805 | var _componentName = getComponentNameFromType(Component) || 'Unknown';
|
---|
5806 |
|
---|
5807 | if (!didWarnAboutModulePatternComponent[_componentName]) {
|
---|
5808 | 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);
|
---|
5809 |
|
---|
5810 | didWarnAboutModulePatternComponent[_componentName] = true;
|
---|
5811 | }
|
---|
5812 | }
|
---|
5813 | }
|
---|
5814 |
|
---|
5815 | if ( // Run these checks in production only if the flag is off.
|
---|
5816 | // Eventually we'll delete this branch altogether.
|
---|
5817 | typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
|
---|
5818 | {
|
---|
5819 | var _componentName2 = getComponentNameFromType(Component) || 'Unknown';
|
---|
5820 |
|
---|
5821 | if (!didWarnAboutModulePatternComponent[_componentName2]) {
|
---|
5822 | 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);
|
---|
5823 |
|
---|
5824 | didWarnAboutModulePatternComponent[_componentName2] = true;
|
---|
5825 | }
|
---|
5826 | }
|
---|
5827 |
|
---|
5828 | mountClassInstance(value, Component, props, legacyContext);
|
---|
5829 | finishClassComponent(request, task, value, Component, props);
|
---|
5830 | } else {
|
---|
5831 |
|
---|
5832 | {
|
---|
5833 | validateFunctionComponentInDev(Component);
|
---|
5834 | } // We're now successfully past this task, and we don't have to pop back to
|
---|
5835 | // the previous task every again, so we can use the destructive recursive form.
|
---|
5836 |
|
---|
5837 |
|
---|
5838 | if (hasId) {
|
---|
5839 | // This component materialized an id. We treat this as its own level, with
|
---|
5840 | // a single "child" slot.
|
---|
5841 | var prevTreeContext = task.treeContext;
|
---|
5842 | var totalChildren = 1;
|
---|
5843 | var index = 0;
|
---|
5844 | task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
|
---|
5845 |
|
---|
5846 | try {
|
---|
5847 | renderNodeDestructive(request, task, value);
|
---|
5848 | } finally {
|
---|
5849 | task.treeContext = prevTreeContext;
|
---|
5850 | }
|
---|
5851 | } else {
|
---|
5852 | renderNodeDestructive(request, task, value);
|
---|
5853 | }
|
---|
5854 | }
|
---|
5855 |
|
---|
5856 | popComponentStackInDEV(task);
|
---|
5857 | }
|
---|
5858 |
|
---|
5859 | function validateFunctionComponentInDev(Component) {
|
---|
5860 | {
|
---|
5861 | if (Component) {
|
---|
5862 | if (Component.childContextTypes) {
|
---|
5863 | error('%s(...): childContextTypes cannot be defined on a function component.', Component.displayName || Component.name || 'Component');
|
---|
5864 | }
|
---|
5865 | }
|
---|
5866 |
|
---|
5867 | if ( Component.defaultProps !== undefined) {
|
---|
5868 | var componentName = getComponentNameFromType(Component) || 'Unknown';
|
---|
5869 |
|
---|
5870 | if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
|
---|
5871 | error('%s: Support for defaultProps will be removed from function components ' + 'in a future major release. Use JavaScript default parameters instead.', componentName);
|
---|
5872 |
|
---|
5873 | didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
|
---|
5874 | }
|
---|
5875 | }
|
---|
5876 |
|
---|
5877 | if (typeof Component.getDerivedStateFromProps === 'function') {
|
---|
5878 | var _componentName3 = getComponentNameFromType(Component) || 'Unknown';
|
---|
5879 |
|
---|
5880 | if (!didWarnAboutGetDerivedStateOnFunctionComponent[_componentName3]) {
|
---|
5881 | error('%s: Function components do not support getDerivedStateFromProps.', _componentName3);
|
---|
5882 |
|
---|
5883 | didWarnAboutGetDerivedStateOnFunctionComponent[_componentName3] = true;
|
---|
5884 | }
|
---|
5885 | }
|
---|
5886 |
|
---|
5887 | if (typeof Component.contextType === 'object' && Component.contextType !== null) {
|
---|
5888 | var _componentName4 = getComponentNameFromType(Component) || 'Unknown';
|
---|
5889 |
|
---|
5890 | if (!didWarnAboutContextTypeOnFunctionComponent[_componentName4]) {
|
---|
5891 | error('%s: Function components do not support contextType.', _componentName4);
|
---|
5892 |
|
---|
5893 | didWarnAboutContextTypeOnFunctionComponent[_componentName4] = true;
|
---|
5894 | }
|
---|
5895 | }
|
---|
5896 | }
|
---|
5897 | }
|
---|
5898 |
|
---|
5899 | function resolveDefaultProps(Component, baseProps) {
|
---|
5900 | if (Component && Component.defaultProps) {
|
---|
5901 | // Resolve default props. Taken from ReactElement
|
---|
5902 | var props = assign({}, baseProps);
|
---|
5903 | var defaultProps = Component.defaultProps;
|
---|
5904 |
|
---|
5905 | for (var propName in defaultProps) {
|
---|
5906 | if (props[propName] === undefined) {
|
---|
5907 | props[propName] = defaultProps[propName];
|
---|
5908 | }
|
---|
5909 | }
|
---|
5910 |
|
---|
5911 | return props;
|
---|
5912 | }
|
---|
5913 |
|
---|
5914 | return baseProps;
|
---|
5915 | }
|
---|
5916 |
|
---|
5917 | function renderForwardRef(request, task, type, props, ref) {
|
---|
5918 | pushFunctionComponentStackInDEV(task, type.render);
|
---|
5919 | var children = renderWithHooks(request, task, type.render, props, ref);
|
---|
5920 | var hasId = checkDidRenderIdHook();
|
---|
5921 |
|
---|
5922 | if (hasId) {
|
---|
5923 | // This component materialized an id. We treat this as its own level, with
|
---|
5924 | // a single "child" slot.
|
---|
5925 | var prevTreeContext = task.treeContext;
|
---|
5926 | var totalChildren = 1;
|
---|
5927 | var index = 0;
|
---|
5928 | task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
|
---|
5929 |
|
---|
5930 | try {
|
---|
5931 | renderNodeDestructive(request, task, children);
|
---|
5932 | } finally {
|
---|
5933 | task.treeContext = prevTreeContext;
|
---|
5934 | }
|
---|
5935 | } else {
|
---|
5936 | renderNodeDestructive(request, task, children);
|
---|
5937 | }
|
---|
5938 |
|
---|
5939 | popComponentStackInDEV(task);
|
---|
5940 | }
|
---|
5941 |
|
---|
5942 | function renderMemo(request, task, type, props, ref) {
|
---|
5943 | var innerType = type.type;
|
---|
5944 | var resolvedProps = resolveDefaultProps(innerType, props);
|
---|
5945 | renderElement(request, task, innerType, resolvedProps, ref);
|
---|
5946 | }
|
---|
5947 |
|
---|
5948 | function renderContextConsumer(request, task, context, props) {
|
---|
5949 | // The logic below for Context differs depending on PROD or DEV mode. In
|
---|
5950 | // DEV mode, we create a separate object for Context.Consumer that acts
|
---|
5951 | // like a proxy to Context. This proxy object adds unnecessary code in PROD
|
---|
5952 | // so we use the old behaviour (Context.Consumer references Context) to
|
---|
5953 | // reduce size and overhead. The separate object references context via
|
---|
5954 | // a property called "_context", which also gives us the ability to check
|
---|
5955 | // in DEV mode if this property exists or not and warn if it does not.
|
---|
5956 | {
|
---|
5957 | if (context._context === undefined) {
|
---|
5958 | // This may be because it's a Context (rather than a Consumer).
|
---|
5959 | // Or it may be because it's older React where they're the same thing.
|
---|
5960 | // We only want to warn if we're sure it's a new React.
|
---|
5961 | if (context !== context.Consumer) {
|
---|
5962 | if (!hasWarnedAboutUsingContextAsConsumer) {
|
---|
5963 | hasWarnedAboutUsingContextAsConsumer = true;
|
---|
5964 |
|
---|
5965 | error('Rendering <Context> directly is not supported and will be removed in ' + 'a future major release. Did you mean to render <Context.Consumer> instead?');
|
---|
5966 | }
|
---|
5967 | }
|
---|
5968 | } else {
|
---|
5969 | context = context._context;
|
---|
5970 | }
|
---|
5971 | }
|
---|
5972 |
|
---|
5973 | var render = props.children;
|
---|
5974 |
|
---|
5975 | {
|
---|
5976 | if (typeof render !== 'function') {
|
---|
5977 | 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.');
|
---|
5978 | }
|
---|
5979 | }
|
---|
5980 |
|
---|
5981 | var newValue = readContext(context);
|
---|
5982 | var newChildren = render(newValue);
|
---|
5983 | renderNodeDestructive(request, task, newChildren);
|
---|
5984 | }
|
---|
5985 |
|
---|
5986 | function renderContextProvider(request, task, type, props) {
|
---|
5987 | var context = type._context;
|
---|
5988 | var value = props.value;
|
---|
5989 | var children = props.children;
|
---|
5990 | var prevSnapshot;
|
---|
5991 |
|
---|
5992 | {
|
---|
5993 | prevSnapshot = task.context;
|
---|
5994 | }
|
---|
5995 |
|
---|
5996 | task.context = pushProvider(context, value);
|
---|
5997 | renderNodeDestructive(request, task, children);
|
---|
5998 | task.context = popProvider(context);
|
---|
5999 |
|
---|
6000 | {
|
---|
6001 | if (prevSnapshot !== task.context) {
|
---|
6002 | error('Popping the context provider did not return back to the original snapshot. This is a bug in React.');
|
---|
6003 | }
|
---|
6004 | }
|
---|
6005 | }
|
---|
6006 |
|
---|
6007 | function renderLazyComponent(request, task, lazyComponent, props, ref) {
|
---|
6008 | pushBuiltInComponentStackInDEV(task, 'Lazy');
|
---|
6009 | var payload = lazyComponent._payload;
|
---|
6010 | var init = lazyComponent._init;
|
---|
6011 | var Component = init(payload);
|
---|
6012 | var resolvedProps = resolveDefaultProps(Component, props);
|
---|
6013 | renderElement(request, task, Component, resolvedProps, ref);
|
---|
6014 | popComponentStackInDEV(task);
|
---|
6015 | }
|
---|
6016 |
|
---|
6017 | function renderElement(request, task, type, props, ref) {
|
---|
6018 | if (typeof type === 'function') {
|
---|
6019 | if (shouldConstruct$1(type)) {
|
---|
6020 | renderClassComponent(request, task, type, props);
|
---|
6021 | return;
|
---|
6022 | } else {
|
---|
6023 | renderIndeterminateComponent(request, task, type, props);
|
---|
6024 | return;
|
---|
6025 | }
|
---|
6026 | }
|
---|
6027 |
|
---|
6028 | if (typeof type === 'string') {
|
---|
6029 | renderHostElement(request, task, type, props);
|
---|
6030 | return;
|
---|
6031 | }
|
---|
6032 |
|
---|
6033 | switch (type) {
|
---|
6034 | // TODO: LegacyHidden acts the same as a fragment. This only works
|
---|
6035 | // because we currently assume that every instance of LegacyHidden is
|
---|
6036 | // accompanied by a host component wrapper. In the hidden mode, the host
|
---|
6037 | // component is given a `hidden` attribute, which ensures that the
|
---|
6038 | // initial HTML is not visible. To support the use of LegacyHidden as a
|
---|
6039 | // true fragment, without an extra DOM node, we would have to hide the
|
---|
6040 | // initial HTML in some other way.
|
---|
6041 | // TODO: Add REACT_OFFSCREEN_TYPE here too with the same capability.
|
---|
6042 | case REACT_LEGACY_HIDDEN_TYPE:
|
---|
6043 | case REACT_DEBUG_TRACING_MODE_TYPE:
|
---|
6044 | case REACT_STRICT_MODE_TYPE:
|
---|
6045 | case REACT_PROFILER_TYPE:
|
---|
6046 | case REACT_FRAGMENT_TYPE:
|
---|
6047 | {
|
---|
6048 | renderNodeDestructive(request, task, props.children);
|
---|
6049 | return;
|
---|
6050 | }
|
---|
6051 |
|
---|
6052 | case REACT_SUSPENSE_LIST_TYPE:
|
---|
6053 | {
|
---|
6054 | pushBuiltInComponentStackInDEV(task, 'SuspenseList'); // TODO: SuspenseList should control the boundaries.
|
---|
6055 |
|
---|
6056 | renderNodeDestructive(request, task, props.children);
|
---|
6057 | popComponentStackInDEV(task);
|
---|
6058 | return;
|
---|
6059 | }
|
---|
6060 |
|
---|
6061 | case REACT_SCOPE_TYPE:
|
---|
6062 | {
|
---|
6063 |
|
---|
6064 | throw new Error('ReactDOMServer does not yet support scope components.');
|
---|
6065 | }
|
---|
6066 | // eslint-disable-next-line-no-fallthrough
|
---|
6067 |
|
---|
6068 | case REACT_SUSPENSE_TYPE:
|
---|
6069 | {
|
---|
6070 | {
|
---|
6071 | renderSuspenseBoundary(request, task, props);
|
---|
6072 | }
|
---|
6073 |
|
---|
6074 | return;
|
---|
6075 | }
|
---|
6076 | }
|
---|
6077 |
|
---|
6078 | if (typeof type === 'object' && type !== null) {
|
---|
6079 | switch (type.$$typeof) {
|
---|
6080 | case REACT_FORWARD_REF_TYPE:
|
---|
6081 | {
|
---|
6082 | renderForwardRef(request, task, type, props, ref);
|
---|
6083 | return;
|
---|
6084 | }
|
---|
6085 |
|
---|
6086 | case REACT_MEMO_TYPE:
|
---|
6087 | {
|
---|
6088 | renderMemo(request, task, type, props, ref);
|
---|
6089 | return;
|
---|
6090 | }
|
---|
6091 |
|
---|
6092 | case REACT_PROVIDER_TYPE:
|
---|
6093 | {
|
---|
6094 | renderContextProvider(request, task, type, props);
|
---|
6095 | return;
|
---|
6096 | }
|
---|
6097 |
|
---|
6098 | case REACT_CONTEXT_TYPE:
|
---|
6099 | {
|
---|
6100 | renderContextConsumer(request, task, type, props);
|
---|
6101 | return;
|
---|
6102 | }
|
---|
6103 |
|
---|
6104 | case REACT_LAZY_TYPE:
|
---|
6105 | {
|
---|
6106 | renderLazyComponent(request, task, type, props);
|
---|
6107 | return;
|
---|
6108 | }
|
---|
6109 | }
|
---|
6110 | }
|
---|
6111 |
|
---|
6112 | var info = '';
|
---|
6113 |
|
---|
6114 | {
|
---|
6115 | if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
|
---|
6116 | 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.';
|
---|
6117 | }
|
---|
6118 | }
|
---|
6119 |
|
---|
6120 | 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));
|
---|
6121 | }
|
---|
6122 |
|
---|
6123 | function validateIterable(iterable, iteratorFn) {
|
---|
6124 | {
|
---|
6125 | // We don't support rendering Generators because it's a mutation.
|
---|
6126 | // See https://github.com/facebook/react/issues/12995
|
---|
6127 | if (typeof Symbol === 'function' && // $FlowFixMe Flow doesn't know about toStringTag
|
---|
6128 | iterable[Symbol.toStringTag] === 'Generator') {
|
---|
6129 | if (!didWarnAboutGenerators) {
|
---|
6130 | 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.');
|
---|
6131 | }
|
---|
6132 |
|
---|
6133 | didWarnAboutGenerators = true;
|
---|
6134 | } // Warn about using Maps as children
|
---|
6135 |
|
---|
6136 |
|
---|
6137 | if (iterable.entries === iteratorFn) {
|
---|
6138 | if (!didWarnAboutMaps) {
|
---|
6139 | error('Using Maps as children is not supported. ' + 'Use an array of keyed ReactElements instead.');
|
---|
6140 | }
|
---|
6141 |
|
---|
6142 | didWarnAboutMaps = true;
|
---|
6143 | }
|
---|
6144 | }
|
---|
6145 | }
|
---|
6146 |
|
---|
6147 | function renderNodeDestructive(request, task, node) {
|
---|
6148 | {
|
---|
6149 | // In Dev we wrap renderNodeDestructiveImpl in a try / catch so we can capture
|
---|
6150 | // a component stack at the right place in the tree. We don't do this in renderNode
|
---|
6151 | // becuase it is not called at every layer of the tree and we may lose frames
|
---|
6152 | try {
|
---|
6153 | return renderNodeDestructiveImpl(request, task, node);
|
---|
6154 | } catch (x) {
|
---|
6155 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') ; else {
|
---|
6156 | // This is an error, stash the component stack if it is null.
|
---|
6157 | lastBoundaryErrorComponentStackDev = lastBoundaryErrorComponentStackDev !== null ? lastBoundaryErrorComponentStackDev : getCurrentStackInDEV();
|
---|
6158 | } // rethrow so normal suspense logic can handle thrown value accordingly
|
---|
6159 |
|
---|
6160 |
|
---|
6161 | throw x;
|
---|
6162 | }
|
---|
6163 | }
|
---|
6164 | } // This function by it self renders a node and consumes the task by mutating it
|
---|
6165 | // to update the current execution state.
|
---|
6166 |
|
---|
6167 |
|
---|
6168 | function renderNodeDestructiveImpl(request, task, node) {
|
---|
6169 | // Stash the node we're working on. We'll pick up from this task in case
|
---|
6170 | // something suspends.
|
---|
6171 | task.node = node; // Handle object types
|
---|
6172 |
|
---|
6173 | if (typeof node === 'object' && node !== null) {
|
---|
6174 | switch (node.$$typeof) {
|
---|
6175 | case REACT_ELEMENT_TYPE:
|
---|
6176 | {
|
---|
6177 | var element = node;
|
---|
6178 | var type = element.type;
|
---|
6179 | var props = element.props;
|
---|
6180 | var ref = element.ref;
|
---|
6181 | renderElement(request, task, type, props, ref);
|
---|
6182 | return;
|
---|
6183 | }
|
---|
6184 |
|
---|
6185 | case REACT_PORTAL_TYPE:
|
---|
6186 | throw new Error('Portals are not currently supported by the server renderer. ' + 'Render them conditionally so that they only appear on the client render.');
|
---|
6187 | // eslint-disable-next-line-no-fallthrough
|
---|
6188 |
|
---|
6189 | case REACT_LAZY_TYPE:
|
---|
6190 | {
|
---|
6191 | var lazyNode = node;
|
---|
6192 | var payload = lazyNode._payload;
|
---|
6193 | var init = lazyNode._init;
|
---|
6194 | var resolvedNode;
|
---|
6195 |
|
---|
6196 | {
|
---|
6197 | try {
|
---|
6198 | resolvedNode = init(payload);
|
---|
6199 | } catch (x) {
|
---|
6200 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
|
---|
6201 | // this Lazy initializer is suspending. push a temporary frame onto the stack so it can be
|
---|
6202 | // popped off in spawnNewSuspendedTask. This aligns stack behavior between Lazy in element position
|
---|
6203 | // vs Component position. We do not want the frame for Errors so we exclusively do this in
|
---|
6204 | // the wakeable branch
|
---|
6205 | pushBuiltInComponentStackInDEV(task, 'Lazy');
|
---|
6206 | }
|
---|
6207 |
|
---|
6208 | throw x;
|
---|
6209 | }
|
---|
6210 | }
|
---|
6211 |
|
---|
6212 | renderNodeDestructive(request, task, resolvedNode);
|
---|
6213 | return;
|
---|
6214 | }
|
---|
6215 | }
|
---|
6216 |
|
---|
6217 | if (isArray(node)) {
|
---|
6218 | renderChildrenArray(request, task, node);
|
---|
6219 | return;
|
---|
6220 | }
|
---|
6221 |
|
---|
6222 | var iteratorFn = getIteratorFn(node);
|
---|
6223 |
|
---|
6224 | if (iteratorFn) {
|
---|
6225 | {
|
---|
6226 | validateIterable(node, iteratorFn);
|
---|
6227 | }
|
---|
6228 |
|
---|
6229 | var iterator = iteratorFn.call(node);
|
---|
6230 |
|
---|
6231 | if (iterator) {
|
---|
6232 | // We need to know how many total children are in this set, so that we
|
---|
6233 | // can allocate enough id slots to acommodate them. So we must exhaust
|
---|
6234 | // the iterator before we start recursively rendering the children.
|
---|
6235 | // TODO: This is not great but I think it's inherent to the id
|
---|
6236 | // generation algorithm.
|
---|
6237 | var step = iterator.next(); // If there are not entries, we need to push an empty so we start by checking that.
|
---|
6238 |
|
---|
6239 | if (!step.done) {
|
---|
6240 | var children = [];
|
---|
6241 |
|
---|
6242 | do {
|
---|
6243 | children.push(step.value);
|
---|
6244 | step = iterator.next();
|
---|
6245 | } while (!step.done);
|
---|
6246 |
|
---|
6247 | renderChildrenArray(request, task, children);
|
---|
6248 | return;
|
---|
6249 | }
|
---|
6250 |
|
---|
6251 | return;
|
---|
6252 | }
|
---|
6253 | }
|
---|
6254 |
|
---|
6255 | var childString = Object.prototype.toString.call(node);
|
---|
6256 | 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.');
|
---|
6257 | }
|
---|
6258 |
|
---|
6259 | if (typeof node === 'string') {
|
---|
6260 | var segment = task.blockedSegment;
|
---|
6261 | segment.lastPushedText = pushTextInstance(task.blockedSegment.chunks, node, request.responseState, segment.lastPushedText);
|
---|
6262 | return;
|
---|
6263 | }
|
---|
6264 |
|
---|
6265 | if (typeof node === 'number') {
|
---|
6266 | var _segment = task.blockedSegment;
|
---|
6267 | _segment.lastPushedText = pushTextInstance(task.blockedSegment.chunks, '' + node, request.responseState, _segment.lastPushedText);
|
---|
6268 | return;
|
---|
6269 | }
|
---|
6270 |
|
---|
6271 | {
|
---|
6272 | if (typeof node === 'function') {
|
---|
6273 | 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.');
|
---|
6274 | }
|
---|
6275 | }
|
---|
6276 | }
|
---|
6277 |
|
---|
6278 | function renderChildrenArray(request, task, children) {
|
---|
6279 | var totalChildren = children.length;
|
---|
6280 |
|
---|
6281 | for (var i = 0; i < totalChildren; i++) {
|
---|
6282 | var prevTreeContext = task.treeContext;
|
---|
6283 | task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
|
---|
6284 |
|
---|
6285 | try {
|
---|
6286 | // We need to use the non-destructive form so that we can safely pop back
|
---|
6287 | // up and render the sibling if something suspends.
|
---|
6288 | renderNode(request, task, children[i]);
|
---|
6289 | } finally {
|
---|
6290 | task.treeContext = prevTreeContext;
|
---|
6291 | }
|
---|
6292 | }
|
---|
6293 | }
|
---|
6294 |
|
---|
6295 | function spawnNewSuspendedTask(request, task, x) {
|
---|
6296 | // Something suspended, we'll need to create a new segment and resolve it later.
|
---|
6297 | var segment = task.blockedSegment;
|
---|
6298 | var insertionIndex = segment.chunks.length;
|
---|
6299 | var newSegment = createPendingSegment(request, insertionIndex, null, segment.formatContext, // Adopt the parent segment's leading text embed
|
---|
6300 | segment.lastPushedText, // Assume we are text embedded at the trailing edge
|
---|
6301 | true);
|
---|
6302 | segment.children.push(newSegment); // Reset lastPushedText for current Segment since the new Segment "consumed" it
|
---|
6303 |
|
---|
6304 | segment.lastPushedText = false;
|
---|
6305 | var newTask = createTask(request, task.node, task.blockedBoundary, newSegment, task.abortSet, task.legacyContext, task.context, task.treeContext);
|
---|
6306 |
|
---|
6307 | {
|
---|
6308 | if (task.componentStack !== null) {
|
---|
6309 | // We pop one task off the stack because the node that suspended will be tried again,
|
---|
6310 | // which will add it back onto the stack.
|
---|
6311 | newTask.componentStack = task.componentStack.parent;
|
---|
6312 | }
|
---|
6313 | }
|
---|
6314 |
|
---|
6315 | var ping = newTask.ping;
|
---|
6316 | x.then(ping, ping);
|
---|
6317 | } // This is a non-destructive form of rendering a node. If it suspends it spawns
|
---|
6318 | // a new task and restores the context of this task to what it was before.
|
---|
6319 |
|
---|
6320 |
|
---|
6321 | function renderNode(request, task, node) {
|
---|
6322 | // TODO: Store segment.children.length here and reset it in case something
|
---|
6323 | // suspended partially through writing something.
|
---|
6324 | // Snapshot the current context in case something throws to interrupt the
|
---|
6325 | // process.
|
---|
6326 | var previousFormatContext = task.blockedSegment.formatContext;
|
---|
6327 | var previousLegacyContext = task.legacyContext;
|
---|
6328 | var previousContext = task.context;
|
---|
6329 | var previousComponentStack = null;
|
---|
6330 |
|
---|
6331 | {
|
---|
6332 | previousComponentStack = task.componentStack;
|
---|
6333 | }
|
---|
6334 |
|
---|
6335 | try {
|
---|
6336 | return renderNodeDestructive(request, task, node);
|
---|
6337 | } catch (x) {
|
---|
6338 | resetHooksState();
|
---|
6339 |
|
---|
6340 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
|
---|
6341 | spawnNewSuspendedTask(request, task, x); // Restore the context. We assume that this will be restored by the inner
|
---|
6342 | // functions in case nothing throws so we don't use "finally" here.
|
---|
6343 |
|
---|
6344 | task.blockedSegment.formatContext = previousFormatContext;
|
---|
6345 | task.legacyContext = previousLegacyContext;
|
---|
6346 | task.context = previousContext; // Restore all active ReactContexts to what they were before.
|
---|
6347 |
|
---|
6348 | switchContext(previousContext);
|
---|
6349 |
|
---|
6350 | {
|
---|
6351 | task.componentStack = previousComponentStack;
|
---|
6352 | }
|
---|
6353 |
|
---|
6354 | return;
|
---|
6355 | } else {
|
---|
6356 | // Restore the context. We assume that this will be restored by the inner
|
---|
6357 | // functions in case nothing throws so we don't use "finally" here.
|
---|
6358 | task.blockedSegment.formatContext = previousFormatContext;
|
---|
6359 | task.legacyContext = previousLegacyContext;
|
---|
6360 | task.context = previousContext; // Restore all active ReactContexts to what they were before.
|
---|
6361 |
|
---|
6362 | switchContext(previousContext);
|
---|
6363 |
|
---|
6364 | {
|
---|
6365 | task.componentStack = previousComponentStack;
|
---|
6366 | } // We assume that we don't need the correct context.
|
---|
6367 | // Let's terminate the rest of the tree and don't render any siblings.
|
---|
6368 |
|
---|
6369 |
|
---|
6370 | throw x;
|
---|
6371 | }
|
---|
6372 | }
|
---|
6373 | }
|
---|
6374 |
|
---|
6375 | function erroredTask(request, boundary, segment, error) {
|
---|
6376 | // Report the error to a global handler.
|
---|
6377 | var errorDigest = logRecoverableError(request, error);
|
---|
6378 |
|
---|
6379 | if (boundary === null) {
|
---|
6380 | fatalError(request, error);
|
---|
6381 | } else {
|
---|
6382 | boundary.pendingTasks--;
|
---|
6383 |
|
---|
6384 | if (!boundary.forceClientRender) {
|
---|
6385 | boundary.forceClientRender = true;
|
---|
6386 | boundary.errorDigest = errorDigest;
|
---|
6387 |
|
---|
6388 | {
|
---|
6389 | captureBoundaryErrorDetailsDev(boundary, error);
|
---|
6390 | } // Regardless of what happens next, this boundary won't be displayed,
|
---|
6391 | // so we can flush it, if the parent already flushed.
|
---|
6392 |
|
---|
6393 |
|
---|
6394 | if (boundary.parentFlushed) {
|
---|
6395 | // We don't have a preference where in the queue this goes since it's likely
|
---|
6396 | // to error on the client anyway. However, intentionally client-rendered
|
---|
6397 | // boundaries should be flushed earlier so that they can start on the client.
|
---|
6398 | // We reuse the same queue for errors.
|
---|
6399 | request.clientRenderedBoundaries.push(boundary);
|
---|
6400 | }
|
---|
6401 | }
|
---|
6402 | }
|
---|
6403 |
|
---|
6404 | request.allPendingTasks--;
|
---|
6405 |
|
---|
6406 | if (request.allPendingTasks === 0) {
|
---|
6407 | var onAllReady = request.onAllReady;
|
---|
6408 | onAllReady();
|
---|
6409 | }
|
---|
6410 | }
|
---|
6411 |
|
---|
6412 | function abortTaskSoft(task) {
|
---|
6413 | // This aborts task without aborting the parent boundary that it blocks.
|
---|
6414 | // It's used for when we didn't need this task to complete the tree.
|
---|
6415 | // If task was needed, then it should use abortTask instead.
|
---|
6416 | var request = this;
|
---|
6417 | var boundary = task.blockedBoundary;
|
---|
6418 | var segment = task.blockedSegment;
|
---|
6419 | segment.status = ABORTED;
|
---|
6420 | finishedTask(request, boundary, segment);
|
---|
6421 | }
|
---|
6422 |
|
---|
6423 | function abortTask(task, request, reason) {
|
---|
6424 | // This aborts the task and aborts the parent that it blocks, putting it into
|
---|
6425 | // client rendered mode.
|
---|
6426 | var boundary = task.blockedBoundary;
|
---|
6427 | var segment = task.blockedSegment;
|
---|
6428 | segment.status = ABORTED;
|
---|
6429 |
|
---|
6430 | if (boundary === null) {
|
---|
6431 | request.allPendingTasks--; // We didn't complete the root so we have nothing to show. We can close
|
---|
6432 | // the request;
|
---|
6433 |
|
---|
6434 | if (request.status !== CLOSED) {
|
---|
6435 | request.status = CLOSED;
|
---|
6436 |
|
---|
6437 | if (request.destination !== null) {
|
---|
6438 | close(request.destination);
|
---|
6439 | }
|
---|
6440 | }
|
---|
6441 | } else {
|
---|
6442 | boundary.pendingTasks--;
|
---|
6443 |
|
---|
6444 | if (!boundary.forceClientRender) {
|
---|
6445 | boundary.forceClientRender = true;
|
---|
6446 |
|
---|
6447 | var _error = reason === undefined ? new Error('The render was aborted by the server without a reason.') : reason;
|
---|
6448 |
|
---|
6449 | boundary.errorDigest = request.onError(_error);
|
---|
6450 |
|
---|
6451 | {
|
---|
6452 | var errorPrefix = 'The server did not finish this Suspense boundary: ';
|
---|
6453 |
|
---|
6454 | if (_error && typeof _error.message === 'string') {
|
---|
6455 | _error = errorPrefix + _error.message;
|
---|
6456 | } else {
|
---|
6457 | // eslint-disable-next-line react-internal/safe-string-coercion
|
---|
6458 | _error = errorPrefix + String(_error);
|
---|
6459 | }
|
---|
6460 |
|
---|
6461 | var previousTaskInDev = currentTaskInDEV;
|
---|
6462 | currentTaskInDEV = task;
|
---|
6463 |
|
---|
6464 | try {
|
---|
6465 | captureBoundaryErrorDetailsDev(boundary, _error);
|
---|
6466 | } finally {
|
---|
6467 | currentTaskInDEV = previousTaskInDev;
|
---|
6468 | }
|
---|
6469 | }
|
---|
6470 |
|
---|
6471 | if (boundary.parentFlushed) {
|
---|
6472 | request.clientRenderedBoundaries.push(boundary);
|
---|
6473 | }
|
---|
6474 | } // If this boundary was still pending then we haven't already cancelled its fallbacks.
|
---|
6475 | // We'll need to abort the fallbacks, which will also error that parent boundary.
|
---|
6476 |
|
---|
6477 |
|
---|
6478 | boundary.fallbackAbortableTasks.forEach(function (fallbackTask) {
|
---|
6479 | return abortTask(fallbackTask, request, reason);
|
---|
6480 | });
|
---|
6481 | boundary.fallbackAbortableTasks.clear();
|
---|
6482 | request.allPendingTasks--;
|
---|
6483 |
|
---|
6484 | if (request.allPendingTasks === 0) {
|
---|
6485 | var onAllReady = request.onAllReady;
|
---|
6486 | onAllReady();
|
---|
6487 | }
|
---|
6488 | }
|
---|
6489 | }
|
---|
6490 |
|
---|
6491 | function queueCompletedSegment(boundary, segment) {
|
---|
6492 | if (segment.chunks.length === 0 && segment.children.length === 1 && segment.children[0].boundary === null) {
|
---|
6493 | // This is an empty segment. There's nothing to write, so we can instead transfer the ID
|
---|
6494 | // to the child. That way any existing references point to the child.
|
---|
6495 | var childSegment = segment.children[0];
|
---|
6496 | childSegment.id = segment.id;
|
---|
6497 | childSegment.parentFlushed = true;
|
---|
6498 |
|
---|
6499 | if (childSegment.status === COMPLETED) {
|
---|
6500 | queueCompletedSegment(boundary, childSegment);
|
---|
6501 | }
|
---|
6502 | } else {
|
---|
6503 | var completedSegments = boundary.completedSegments;
|
---|
6504 | completedSegments.push(segment);
|
---|
6505 | }
|
---|
6506 | }
|
---|
6507 |
|
---|
6508 | function finishedTask(request, boundary, segment) {
|
---|
6509 | if (boundary === null) {
|
---|
6510 | if (segment.parentFlushed) {
|
---|
6511 | if (request.completedRootSegment !== null) {
|
---|
6512 | throw new Error('There can only be one root segment. This is a bug in React.');
|
---|
6513 | }
|
---|
6514 |
|
---|
6515 | request.completedRootSegment = segment;
|
---|
6516 | }
|
---|
6517 |
|
---|
6518 | request.pendingRootTasks--;
|
---|
6519 |
|
---|
6520 | if (request.pendingRootTasks === 0) {
|
---|
6521 | // We have completed the shell so the shell can't error anymore.
|
---|
6522 | request.onShellError = noop$1;
|
---|
6523 | var onShellReady = request.onShellReady;
|
---|
6524 | onShellReady();
|
---|
6525 | }
|
---|
6526 | } else {
|
---|
6527 | boundary.pendingTasks--;
|
---|
6528 |
|
---|
6529 | if (boundary.forceClientRender) ; else if (boundary.pendingTasks === 0) {
|
---|
6530 | // This must have been the last segment we were waiting on. This boundary is now complete.
|
---|
6531 | if (segment.parentFlushed) {
|
---|
6532 | // Our parent segment already flushed, so we need to schedule this segment to be emitted.
|
---|
6533 | // If it is a segment that was aborted, we'll write other content instead so we don't need
|
---|
6534 | // to emit it.
|
---|
6535 | if (segment.status === COMPLETED) {
|
---|
6536 | queueCompletedSegment(boundary, segment);
|
---|
6537 | }
|
---|
6538 | }
|
---|
6539 |
|
---|
6540 | if (boundary.parentFlushed) {
|
---|
6541 | // The segment might be part of a segment that didn't flush yet, but if the boundary's
|
---|
6542 | // parent flushed, we need to schedule the boundary to be emitted.
|
---|
6543 | request.completedBoundaries.push(boundary);
|
---|
6544 | } // We can now cancel any pending task on the fallback since we won't need to show it anymore.
|
---|
6545 | // This needs to happen after we read the parentFlushed flags because aborting can finish
|
---|
6546 | // work which can trigger user code, which can start flushing, which can change those flags.
|
---|
6547 |
|
---|
6548 |
|
---|
6549 | boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
|
---|
6550 | boundary.fallbackAbortableTasks.clear();
|
---|
6551 | } else {
|
---|
6552 | if (segment.parentFlushed) {
|
---|
6553 | // Our parent already flushed, so we need to schedule this segment to be emitted.
|
---|
6554 | // If it is a segment that was aborted, we'll write other content instead so we don't need
|
---|
6555 | // to emit it.
|
---|
6556 | if (segment.status === COMPLETED) {
|
---|
6557 | queueCompletedSegment(boundary, segment);
|
---|
6558 | var completedSegments = boundary.completedSegments;
|
---|
6559 |
|
---|
6560 | if (completedSegments.length === 1) {
|
---|
6561 | // This is the first time since we last flushed that we completed anything.
|
---|
6562 | // We can schedule this boundary to emit its partially completed segments early
|
---|
6563 | // in case the parent has already been flushed.
|
---|
6564 | if (boundary.parentFlushed) {
|
---|
6565 | request.partialBoundaries.push(boundary);
|
---|
6566 | }
|
---|
6567 | }
|
---|
6568 | }
|
---|
6569 | }
|
---|
6570 | }
|
---|
6571 | }
|
---|
6572 |
|
---|
6573 | request.allPendingTasks--;
|
---|
6574 |
|
---|
6575 | if (request.allPendingTasks === 0) {
|
---|
6576 | // This needs to be called at the very end so that we can synchronously write the result
|
---|
6577 | // in the callback if needed.
|
---|
6578 | var onAllReady = request.onAllReady;
|
---|
6579 | onAllReady();
|
---|
6580 | }
|
---|
6581 | }
|
---|
6582 |
|
---|
6583 | function retryTask(request, task) {
|
---|
6584 | var segment = task.blockedSegment;
|
---|
6585 |
|
---|
6586 | if (segment.status !== PENDING) {
|
---|
6587 | // We completed this by other means before we had a chance to retry it.
|
---|
6588 | return;
|
---|
6589 | } // We restore the context to what it was when we suspended.
|
---|
6590 | // We don't restore it after we leave because it's likely that we'll end up
|
---|
6591 | // needing a very similar context soon again.
|
---|
6592 |
|
---|
6593 |
|
---|
6594 | switchContext(task.context);
|
---|
6595 | var prevTaskInDEV = null;
|
---|
6596 |
|
---|
6597 | {
|
---|
6598 | prevTaskInDEV = currentTaskInDEV;
|
---|
6599 | currentTaskInDEV = task;
|
---|
6600 | }
|
---|
6601 |
|
---|
6602 | try {
|
---|
6603 | // We call the destructive form that mutates this task. That way if something
|
---|
6604 | // suspends again, we can reuse the same task instead of spawning a new one.
|
---|
6605 | renderNodeDestructive(request, task, task.node);
|
---|
6606 | pushSegmentFinale(segment.chunks, request.responseState, segment.lastPushedText, segment.textEmbedded);
|
---|
6607 | task.abortSet.delete(task);
|
---|
6608 | segment.status = COMPLETED;
|
---|
6609 | finishedTask(request, task.blockedBoundary, segment);
|
---|
6610 | } catch (x) {
|
---|
6611 | resetHooksState();
|
---|
6612 |
|
---|
6613 | if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
|
---|
6614 | // Something suspended again, let's pick it back up later.
|
---|
6615 | var ping = task.ping;
|
---|
6616 | x.then(ping, ping);
|
---|
6617 | } else {
|
---|
6618 | task.abortSet.delete(task);
|
---|
6619 | segment.status = ERRORED;
|
---|
6620 | erroredTask(request, task.blockedBoundary, segment, x);
|
---|
6621 | }
|
---|
6622 | } finally {
|
---|
6623 | {
|
---|
6624 | currentTaskInDEV = prevTaskInDEV;
|
---|
6625 | }
|
---|
6626 | }
|
---|
6627 | }
|
---|
6628 |
|
---|
6629 | function performWork(request) {
|
---|
6630 | if (request.status === CLOSED) {
|
---|
6631 | return;
|
---|
6632 | }
|
---|
6633 |
|
---|
6634 | var prevContext = getActiveContext();
|
---|
6635 | var prevDispatcher = ReactCurrentDispatcher$1.current;
|
---|
6636 | ReactCurrentDispatcher$1.current = Dispatcher;
|
---|
6637 | var prevGetCurrentStackImpl;
|
---|
6638 |
|
---|
6639 | {
|
---|
6640 | prevGetCurrentStackImpl = ReactDebugCurrentFrame$1.getCurrentStack;
|
---|
6641 | ReactDebugCurrentFrame$1.getCurrentStack = getCurrentStackInDEV;
|
---|
6642 | }
|
---|
6643 |
|
---|
6644 | var prevResponseState = currentResponseState;
|
---|
6645 | setCurrentResponseState(request.responseState);
|
---|
6646 |
|
---|
6647 | try {
|
---|
6648 | var pingedTasks = request.pingedTasks;
|
---|
6649 | var i;
|
---|
6650 |
|
---|
6651 | for (i = 0; i < pingedTasks.length; i++) {
|
---|
6652 | var task = pingedTasks[i];
|
---|
6653 | retryTask(request, task);
|
---|
6654 | }
|
---|
6655 |
|
---|
6656 | pingedTasks.splice(0, i);
|
---|
6657 |
|
---|
6658 | if (request.destination !== null) {
|
---|
6659 | flushCompletedQueues(request, request.destination);
|
---|
6660 | }
|
---|
6661 | } catch (error) {
|
---|
6662 | logRecoverableError(request, error);
|
---|
6663 | fatalError(request, error);
|
---|
6664 | } finally {
|
---|
6665 | setCurrentResponseState(prevResponseState);
|
---|
6666 | ReactCurrentDispatcher$1.current = prevDispatcher;
|
---|
6667 |
|
---|
6668 | {
|
---|
6669 | ReactDebugCurrentFrame$1.getCurrentStack = prevGetCurrentStackImpl;
|
---|
6670 | }
|
---|
6671 |
|
---|
6672 | if (prevDispatcher === Dispatcher) {
|
---|
6673 | // This means that we were in a reentrant work loop. This could happen
|
---|
6674 | // in a renderer that supports synchronous work like renderToString,
|
---|
6675 | // when it's called from within another renderer.
|
---|
6676 | // Normally we don't bother switching the contexts to their root/default
|
---|
6677 | // values when leaving because we'll likely need the same or similar
|
---|
6678 | // context again. However, when we're inside a synchronous loop like this
|
---|
6679 | // we'll to restore the context to what it was before returning.
|
---|
6680 | switchContext(prevContext);
|
---|
6681 | }
|
---|
6682 | }
|
---|
6683 | }
|
---|
6684 |
|
---|
6685 | function flushSubtree(request, destination, segment) {
|
---|
6686 | segment.parentFlushed = true;
|
---|
6687 |
|
---|
6688 | switch (segment.status) {
|
---|
6689 | case PENDING:
|
---|
6690 | {
|
---|
6691 | // We're emitting a placeholder for this segment to be filled in later.
|
---|
6692 | // Therefore we'll need to assign it an ID - to refer to it by.
|
---|
6693 | var segmentID = segment.id = request.nextSegmentId++; // When this segment finally completes it won't be embedded in text since it will flush separately
|
---|
6694 |
|
---|
6695 | segment.lastPushedText = false;
|
---|
6696 | segment.textEmbedded = false;
|
---|
6697 | return writePlaceholder(destination, request.responseState, segmentID);
|
---|
6698 | }
|
---|
6699 |
|
---|
6700 | case COMPLETED:
|
---|
6701 | {
|
---|
6702 | segment.status = FLUSHED;
|
---|
6703 | var r = true;
|
---|
6704 | var chunks = segment.chunks;
|
---|
6705 | var chunkIdx = 0;
|
---|
6706 | var children = segment.children;
|
---|
6707 |
|
---|
6708 | for (var childIdx = 0; childIdx < children.length; childIdx++) {
|
---|
6709 | var nextChild = children[childIdx]; // Write all the chunks up until the next child.
|
---|
6710 |
|
---|
6711 | for (; chunkIdx < nextChild.index; chunkIdx++) {
|
---|
6712 | writeChunk(destination, chunks[chunkIdx]);
|
---|
6713 | }
|
---|
6714 |
|
---|
6715 | r = flushSegment(request, destination, nextChild);
|
---|
6716 | } // Finally just write all the remaining chunks
|
---|
6717 |
|
---|
6718 |
|
---|
6719 | for (; chunkIdx < chunks.length - 1; chunkIdx++) {
|
---|
6720 | writeChunk(destination, chunks[chunkIdx]);
|
---|
6721 | }
|
---|
6722 |
|
---|
6723 | if (chunkIdx < chunks.length) {
|
---|
6724 | r = writeChunkAndReturn(destination, chunks[chunkIdx]);
|
---|
6725 | }
|
---|
6726 |
|
---|
6727 | return r;
|
---|
6728 | }
|
---|
6729 |
|
---|
6730 | default:
|
---|
6731 | {
|
---|
6732 | throw new Error('Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.');
|
---|
6733 | }
|
---|
6734 | }
|
---|
6735 | }
|
---|
6736 |
|
---|
6737 | function flushSegment(request, destination, segment) {
|
---|
6738 | var boundary = segment.boundary;
|
---|
6739 |
|
---|
6740 | if (boundary === null) {
|
---|
6741 | // Not a suspense boundary.
|
---|
6742 | return flushSubtree(request, destination, segment);
|
---|
6743 | }
|
---|
6744 |
|
---|
6745 | boundary.parentFlushed = true; // This segment is a Suspense boundary. We need to decide whether to
|
---|
6746 | // emit the content or the fallback now.
|
---|
6747 |
|
---|
6748 | if (boundary.forceClientRender) {
|
---|
6749 | // Emit a client rendered suspense boundary wrapper.
|
---|
6750 | // We never queue the inner boundary so we'll never emit its content or partial segments.
|
---|
6751 | writeStartClientRenderedSuspenseBoundary(destination, request.responseState, boundary.errorDigest, boundary.errorMessage, boundary.errorComponentStack); // Flush the fallback.
|
---|
6752 |
|
---|
6753 | flushSubtree(request, destination, segment);
|
---|
6754 | return writeEndClientRenderedSuspenseBoundary(destination, request.responseState);
|
---|
6755 | } else if (boundary.pendingTasks > 0) {
|
---|
6756 | // This boundary is still loading. Emit a pending suspense boundary wrapper.
|
---|
6757 | // Assign an ID to refer to the future content by.
|
---|
6758 | boundary.rootSegmentID = request.nextSegmentId++;
|
---|
6759 |
|
---|
6760 | if (boundary.completedSegments.length > 0) {
|
---|
6761 | // If this is at least partially complete, we can queue it to be partially emitted early.
|
---|
6762 | request.partialBoundaries.push(boundary);
|
---|
6763 | } /// This is the first time we should have referenced this ID.
|
---|
6764 |
|
---|
6765 |
|
---|
6766 | var id = boundary.id = assignSuspenseBoundaryID(request.responseState);
|
---|
6767 | writeStartPendingSuspenseBoundary(destination, request.responseState, id); // Flush the fallback.
|
---|
6768 |
|
---|
6769 | flushSubtree(request, destination, segment);
|
---|
6770 | return writeEndPendingSuspenseBoundary(destination, request.responseState);
|
---|
6771 | } else if (boundary.byteSize > request.progressiveChunkSize) {
|
---|
6772 | // This boundary is large and will be emitted separately so that we can progressively show
|
---|
6773 | // other content. We add it to the queue during the flush because we have to ensure that
|
---|
6774 | // the parent flushes first so that there's something to inject it into.
|
---|
6775 | // We also have to make sure that it's emitted into the queue in a deterministic slot.
|
---|
6776 | // I.e. we can't insert it here when it completes.
|
---|
6777 | // Assign an ID to refer to the future content by.
|
---|
6778 | boundary.rootSegmentID = request.nextSegmentId++;
|
---|
6779 | request.completedBoundaries.push(boundary); // Emit a pending rendered suspense boundary wrapper.
|
---|
6780 |
|
---|
6781 | writeStartPendingSuspenseBoundary(destination, request.responseState, boundary.id); // Flush the fallback.
|
---|
6782 |
|
---|
6783 | flushSubtree(request, destination, segment);
|
---|
6784 | return writeEndPendingSuspenseBoundary(destination, request.responseState);
|
---|
6785 | } else {
|
---|
6786 | // We can inline this boundary's content as a complete boundary.
|
---|
6787 | writeStartCompletedSuspenseBoundary(destination, request.responseState);
|
---|
6788 | var completedSegments = boundary.completedSegments;
|
---|
6789 |
|
---|
6790 | if (completedSegments.length !== 1) {
|
---|
6791 | throw new Error('A previously unvisited boundary must have exactly one root segment. This is a bug in React.');
|
---|
6792 | }
|
---|
6793 |
|
---|
6794 | var contentSegment = completedSegments[0];
|
---|
6795 | flushSegment(request, destination, contentSegment);
|
---|
6796 | return writeEndCompletedSuspenseBoundary(destination, request.responseState);
|
---|
6797 | }
|
---|
6798 | }
|
---|
6799 |
|
---|
6800 | function flushClientRenderedBoundary(request, destination, boundary) {
|
---|
6801 | return writeClientRenderBoundaryInstruction(destination, request.responseState, boundary.id, boundary.errorDigest, boundary.errorMessage, boundary.errorComponentStack);
|
---|
6802 | }
|
---|
6803 |
|
---|
6804 | function flushSegmentContainer(request, destination, segment) {
|
---|
6805 | writeStartSegment(destination, request.responseState, segment.formatContext, segment.id);
|
---|
6806 | flushSegment(request, destination, segment);
|
---|
6807 | return writeEndSegment(destination, segment.formatContext);
|
---|
6808 | }
|
---|
6809 |
|
---|
6810 | function flushCompletedBoundary(request, destination, boundary) {
|
---|
6811 | var completedSegments = boundary.completedSegments;
|
---|
6812 | var i = 0;
|
---|
6813 |
|
---|
6814 | for (; i < completedSegments.length; i++) {
|
---|
6815 | var segment = completedSegments[i];
|
---|
6816 | flushPartiallyCompletedSegment(request, destination, boundary, segment);
|
---|
6817 | }
|
---|
6818 |
|
---|
6819 | completedSegments.length = 0;
|
---|
6820 | return writeCompletedBoundaryInstruction(destination, request.responseState, boundary.id, boundary.rootSegmentID);
|
---|
6821 | }
|
---|
6822 |
|
---|
6823 | function flushPartialBoundary(request, destination, boundary) {
|
---|
6824 | var completedSegments = boundary.completedSegments;
|
---|
6825 | var i = 0;
|
---|
6826 |
|
---|
6827 | for (; i < completedSegments.length; i++) {
|
---|
6828 | var segment = completedSegments[i];
|
---|
6829 |
|
---|
6830 | if (!flushPartiallyCompletedSegment(request, destination, boundary, segment)) {
|
---|
6831 | i++;
|
---|
6832 | completedSegments.splice(0, i); // Only write as much as the buffer wants. Something higher priority
|
---|
6833 | // might want to write later.
|
---|
6834 |
|
---|
6835 | return false;
|
---|
6836 | }
|
---|
6837 | }
|
---|
6838 |
|
---|
6839 | completedSegments.splice(0, i);
|
---|
6840 | return true;
|
---|
6841 | }
|
---|
6842 |
|
---|
6843 | function flushPartiallyCompletedSegment(request, destination, boundary, segment) {
|
---|
6844 | if (segment.status === FLUSHED) {
|
---|
6845 | // We've already flushed this inline.
|
---|
6846 | return true;
|
---|
6847 | }
|
---|
6848 |
|
---|
6849 | var segmentID = segment.id;
|
---|
6850 |
|
---|
6851 | if (segmentID === -1) {
|
---|
6852 | // This segment wasn't previously referred to. This happens at the root of
|
---|
6853 | // a boundary. We make kind of a leap here and assume this is the root.
|
---|
6854 | var rootSegmentID = segment.id = boundary.rootSegmentID;
|
---|
6855 |
|
---|
6856 | if (rootSegmentID === -1) {
|
---|
6857 | throw new Error('A root segment ID must have been assigned by now. This is a bug in React.');
|
---|
6858 | }
|
---|
6859 |
|
---|
6860 | return flushSegmentContainer(request, destination, segment);
|
---|
6861 | } else {
|
---|
6862 | flushSegmentContainer(request, destination, segment);
|
---|
6863 | return writeCompletedSegmentInstruction(destination, request.responseState, segmentID);
|
---|
6864 | }
|
---|
6865 | }
|
---|
6866 |
|
---|
6867 | function flushCompletedQueues(request, destination) {
|
---|
6868 | beginWriting();
|
---|
6869 |
|
---|
6870 | try {
|
---|
6871 | // The structure of this is to go through each queue one by one and write
|
---|
6872 | // until the sink tells us to stop. When we should stop, we still finish writing
|
---|
6873 | // that item fully and then yield. At that point we remove the already completed
|
---|
6874 | // items up until the point we completed them.
|
---|
6875 | // TODO: Emit preloading.
|
---|
6876 | // TODO: It's kind of unfortunate to keep checking this array after we've already
|
---|
6877 | // emitted the root.
|
---|
6878 | var completedRootSegment = request.completedRootSegment;
|
---|
6879 |
|
---|
6880 | if (completedRootSegment !== null && request.pendingRootTasks === 0) {
|
---|
6881 | flushSegment(request, destination, completedRootSegment);
|
---|
6882 | request.completedRootSegment = null;
|
---|
6883 | writeCompletedRoot(destination, request.responseState);
|
---|
6884 | } // We emit client rendering instructions for already emitted boundaries first.
|
---|
6885 | // This is so that we can signal to the client to start client rendering them as
|
---|
6886 | // soon as possible.
|
---|
6887 |
|
---|
6888 |
|
---|
6889 | var clientRenderedBoundaries = request.clientRenderedBoundaries;
|
---|
6890 | var i;
|
---|
6891 |
|
---|
6892 | for (i = 0; i < clientRenderedBoundaries.length; i++) {
|
---|
6893 | var boundary = clientRenderedBoundaries[i];
|
---|
6894 |
|
---|
6895 | if (!flushClientRenderedBoundary(request, destination, boundary)) {
|
---|
6896 | request.destination = null;
|
---|
6897 | i++;
|
---|
6898 | clientRenderedBoundaries.splice(0, i);
|
---|
6899 | return;
|
---|
6900 | }
|
---|
6901 | }
|
---|
6902 |
|
---|
6903 | clientRenderedBoundaries.splice(0, i); // Next we emit any complete boundaries. It's better to favor boundaries
|
---|
6904 | // that are completely done since we can actually show them, than it is to emit
|
---|
6905 | // any individual segments from a partially complete boundary.
|
---|
6906 |
|
---|
6907 | var completedBoundaries = request.completedBoundaries;
|
---|
6908 |
|
---|
6909 | for (i = 0; i < completedBoundaries.length; i++) {
|
---|
6910 | var _boundary = completedBoundaries[i];
|
---|
6911 |
|
---|
6912 | if (!flushCompletedBoundary(request, destination, _boundary)) {
|
---|
6913 | request.destination = null;
|
---|
6914 | i++;
|
---|
6915 | completedBoundaries.splice(0, i);
|
---|
6916 | return;
|
---|
6917 | }
|
---|
6918 | }
|
---|
6919 |
|
---|
6920 | completedBoundaries.splice(0, i); // Allow anything written so far to flush to the underlying sink before
|
---|
6921 | // we continue with lower priorities.
|
---|
6922 |
|
---|
6923 | completeWriting(destination);
|
---|
6924 | beginWriting(destination); // TODO: Here we'll emit data used by hydration.
|
---|
6925 | // Next we emit any segments of any boundaries that are partially complete
|
---|
6926 | // but not deeply complete.
|
---|
6927 |
|
---|
6928 | var partialBoundaries = request.partialBoundaries;
|
---|
6929 |
|
---|
6930 | for (i = 0; i < partialBoundaries.length; i++) {
|
---|
6931 | var _boundary2 = partialBoundaries[i];
|
---|
6932 |
|
---|
6933 | if (!flushPartialBoundary(request, destination, _boundary2)) {
|
---|
6934 | request.destination = null;
|
---|
6935 | i++;
|
---|
6936 | partialBoundaries.splice(0, i);
|
---|
6937 | return;
|
---|
6938 | }
|
---|
6939 | }
|
---|
6940 |
|
---|
6941 | partialBoundaries.splice(0, i); // Next we check the completed boundaries again. This may have had
|
---|
6942 | // boundaries added to it in case they were too larged to be inlined.
|
---|
6943 | // New ones might be added in this loop.
|
---|
6944 |
|
---|
6945 | var largeBoundaries = request.completedBoundaries;
|
---|
6946 |
|
---|
6947 | for (i = 0; i < largeBoundaries.length; i++) {
|
---|
6948 | var _boundary3 = largeBoundaries[i];
|
---|
6949 |
|
---|
6950 | if (!flushCompletedBoundary(request, destination, _boundary3)) {
|
---|
6951 | request.destination = null;
|
---|
6952 | i++;
|
---|
6953 | largeBoundaries.splice(0, i);
|
---|
6954 | return;
|
---|
6955 | }
|
---|
6956 | }
|
---|
6957 |
|
---|
6958 | largeBoundaries.splice(0, i);
|
---|
6959 | } finally {
|
---|
6960 | completeWriting(destination);
|
---|
6961 | flushBuffered(destination);
|
---|
6962 |
|
---|
6963 | 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
|
---|
6964 | // either they have pending task or they're complete.
|
---|
6965 | ) {
|
---|
6966 | {
|
---|
6967 | if (request.abortableTasks.size !== 0) {
|
---|
6968 | error('There was still abortable task at the root when we closed. This is a bug in React.');
|
---|
6969 | }
|
---|
6970 | } // We're done.
|
---|
6971 |
|
---|
6972 |
|
---|
6973 | close(destination);
|
---|
6974 | }
|
---|
6975 | }
|
---|
6976 | }
|
---|
6977 |
|
---|
6978 | function startWork(request) {
|
---|
6979 | scheduleWork(function () {
|
---|
6980 | return performWork(request);
|
---|
6981 | });
|
---|
6982 | }
|
---|
6983 | function startFlowing(request, destination) {
|
---|
6984 | if (request.status === CLOSING) {
|
---|
6985 | request.status = CLOSED;
|
---|
6986 | closeWithError(destination, request.fatalError);
|
---|
6987 | return;
|
---|
6988 | }
|
---|
6989 |
|
---|
6990 | if (request.status === CLOSED) {
|
---|
6991 | return;
|
---|
6992 | }
|
---|
6993 |
|
---|
6994 | if (request.destination !== null) {
|
---|
6995 | // We're already flowing.
|
---|
6996 | return;
|
---|
6997 | }
|
---|
6998 |
|
---|
6999 | request.destination = destination;
|
---|
7000 |
|
---|
7001 | try {
|
---|
7002 | flushCompletedQueues(request, destination);
|
---|
7003 | } catch (error) {
|
---|
7004 | logRecoverableError(request, error);
|
---|
7005 | fatalError(request, error);
|
---|
7006 | }
|
---|
7007 | } // This is called to early terminate a request. It puts all pending boundaries in client rendered state.
|
---|
7008 |
|
---|
7009 | function abort(request, reason) {
|
---|
7010 | try {
|
---|
7011 | var abortableTasks = request.abortableTasks;
|
---|
7012 | abortableTasks.forEach(function (task) {
|
---|
7013 | return abortTask(task, request, reason);
|
---|
7014 | });
|
---|
7015 | abortableTasks.clear();
|
---|
7016 |
|
---|
7017 | if (request.destination !== null) {
|
---|
7018 | flushCompletedQueues(request, request.destination);
|
---|
7019 | }
|
---|
7020 | } catch (error) {
|
---|
7021 | logRecoverableError(request, error);
|
---|
7022 | fatalError(request, error);
|
---|
7023 | }
|
---|
7024 | }
|
---|
7025 |
|
---|
7026 | function createDrainHandler(destination, request) {
|
---|
7027 | return function () {
|
---|
7028 | return startFlowing(request, destination);
|
---|
7029 | };
|
---|
7030 | }
|
---|
7031 |
|
---|
7032 | function createAbortHandler(request, reason) {
|
---|
7033 | return function () {
|
---|
7034 | return abort(request, reason);
|
---|
7035 | };
|
---|
7036 | }
|
---|
7037 |
|
---|
7038 | function createRequestImpl(children, options) {
|
---|
7039 | return 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, options ? options.onAllReady : undefined, options ? options.onShellReady : undefined, options ? options.onShellError : undefined, undefined);
|
---|
7040 | }
|
---|
7041 |
|
---|
7042 | function renderToPipeableStream(children, options) {
|
---|
7043 | var request = createRequestImpl(children, options);
|
---|
7044 | var hasStartedFlowing = false;
|
---|
7045 | startWork(request);
|
---|
7046 | return {
|
---|
7047 | pipe: function (destination) {
|
---|
7048 | if (hasStartedFlowing) {
|
---|
7049 | throw new Error('React currently only supports piping to one writable stream.');
|
---|
7050 | }
|
---|
7051 |
|
---|
7052 | hasStartedFlowing = true;
|
---|
7053 | startFlowing(request, destination);
|
---|
7054 | destination.on('drain', createDrainHandler(destination, request));
|
---|
7055 | destination.on('error', createAbortHandler(request, // eslint-disable-next-line react-internal/prod-error-codes
|
---|
7056 | new Error('The destination stream errored while writing data.')));
|
---|
7057 | destination.on('close', createAbortHandler(request, // eslint-disable-next-line react-internal/prod-error-codes
|
---|
7058 | new Error('The destination stream closed early.')));
|
---|
7059 | return destination;
|
---|
7060 | },
|
---|
7061 | abort: function (reason) {
|
---|
7062 | abort(request, reason);
|
---|
7063 | }
|
---|
7064 | };
|
---|
7065 | }
|
---|
7066 |
|
---|
7067 | exports.renderToPipeableStream = renderToPipeableStream;
|
---|
7068 | exports.version = ReactVersion;
|
---|
7069 | })();
|
---|
7070 | }
|
---|