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