UNPKG

react-server-dom-webpack

Version:

React Server Components bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.

1,667 lines (1,386 loc) 109 kB
/** * @license React * react-server-dom-webpack-server.edge.development.js * * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict'; if (process.env.NODE_ENV !== "production") { (function() { 'use strict'; var React = require('react'); var ReactDOM = require('react-dom'); var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; function error(format) { { { for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { args[_key2 - 1] = arguments[_key2]; } printWarning('error', format, args); } } } function printWarning(level, format, args) { // When changing this logic, you might want to also // update consoleWithStackDev.www.js as well. { var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; var stack = ReactDebugCurrentFrame.getStackAddendum(); if (stack !== '') { format += '%s'; args = args.concat([stack]); } // eslint-disable-next-line react-internal/safe-string-coercion var argsWithFormat = args.map(function (item) { return String(item); }); // Careful: RN currently depends on this prefix argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it // breaks IE9: https://github.com/facebook/react/issues/13610 // eslint-disable-next-line react-internal/no-production-logging Function.prototype.apply.call(console[level], console, argsWithFormat); } } // ----------------------------------------------------------------------------- var enablePostpone = false; function scheduleWork(callback) { setTimeout(callback, 0); } var VIEW_SIZE = 512; var currentView = null; var writtenBytes = 0; function beginWriting(destination) { currentView = new Uint8Array(VIEW_SIZE); writtenBytes = 0; } function writeChunk(destination, chunk) { if (chunk.byteLength === 0) { return; } if (chunk.byteLength > VIEW_SIZE) { { if (precomputedChunkSet.has(chunk)) { error('A large precomputed chunk was passed to writeChunk without being copied.' + ' Large chunks get enqueued directly and are not copied. This is incompatible with precomputed chunks because you cannot enqueue the same precomputed chunk twice.' + ' Use "cloneChunk" to make a copy of this large precomputed chunk before writing it. This is a bug in React.'); } } // this chunk may overflow a single view which implies it was not // one that is cached by the streaming renderer. We will enqueu // it directly and expect it is not re-used if (writtenBytes > 0) { destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes)); currentView = new Uint8Array(VIEW_SIZE); writtenBytes = 0; } destination.enqueue(chunk); return; } var bytesToWrite = chunk; var allowableBytes = currentView.length - writtenBytes; if (allowableBytes < bytesToWrite.byteLength) { // this chunk would overflow the current view. We enqueue a full view // and start a new view with the remaining chunk if (allowableBytes === 0) { // the current view is already full, send it destination.enqueue(currentView); } else { // fill up the current view and apply the remaining chunk bytes // to a new view. currentView.set(bytesToWrite.subarray(0, allowableBytes), writtenBytes); // writtenBytes += allowableBytes; // this can be skipped because we are going to immediately reset the view destination.enqueue(currentView); bytesToWrite = bytesToWrite.subarray(allowableBytes); } currentView = new Uint8Array(VIEW_SIZE); writtenBytes = 0; } currentView.set(bytesToWrite, writtenBytes); writtenBytes += bytesToWrite.byteLength; } function writeChunkAndReturn(destination, chunk) { writeChunk(destination, chunk); // in web streams there is no backpressure so we can alwas write more return true; } function completeWriting(destination) { if (currentView && writtenBytes > 0) { destination.enqueue(new Uint8Array(currentView.buffer, 0, writtenBytes)); currentView = null; writtenBytes = 0; } } function close$1(destination) { destination.close(); } var textEncoder = new TextEncoder(); function stringToChunk(content) { return textEncoder.encode(content); } var precomputedChunkSet = new Set() ; function byteLengthOfChunk(chunk) { return chunk.byteLength; } function closeWithError(destination, error) { // $FlowFixMe[method-unbinding] if (typeof destination.error === 'function') { // $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types. destination.error(error); } else { // Earlier implementations doesn't support this method. In that environment you're // supposed to throw from a promise returned but we don't return a promise in our // approach. We could fork this implementation but this is environment is an edge // case to begin with. It's even less common to run this in an older environment. // Even then, this is not where errors are supposed to happen and they get reported // to a global callback in addition to this anyway. So it's fine just to close this. destination.close(); } } // eslint-disable-next-line no-unused-vars var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference'); var SERVER_REFERENCE_TAG = Symbol.for('react.server.reference'); function isClientReference(reference) { return reference.$$typeof === CLIENT_REFERENCE_TAG; } function isServerReference(reference) { return reference.$$typeof === SERVER_REFERENCE_TAG; } function registerClientReference(proxyImplementation, id, exportName) { return registerClientReferenceImpl(proxyImplementation, id + '#' + exportName, false); } function registerClientReferenceImpl(proxyImplementation, id, async) { return Object.defineProperties(proxyImplementation, { $$typeof: { value: CLIENT_REFERENCE_TAG }, $$id: { value: id }, $$async: { value: async } }); } // $FlowFixMe[method-unbinding] var FunctionBind = Function.prototype.bind; // $FlowFixMe[method-unbinding] var ArraySlice = Array.prototype.slice; function bind() { // $FlowFixMe[unsupported-syntax] var newFn = FunctionBind.apply(this, arguments); if (this.$$typeof === SERVER_REFERENCE_TAG) { var args = ArraySlice.call(arguments, 1); return Object.defineProperties(newFn, { $$typeof: { value: SERVER_REFERENCE_TAG }, $$id: { value: this.$$id }, $$bound: { value: this.$$bound ? this.$$bound.concat(args) : args }, bind: { value: bind } }); } return newFn; } function registerServerReference(reference, id, exportName) { return Object.defineProperties(reference, { $$typeof: { value: SERVER_REFERENCE_TAG }, $$id: { value: exportName === null ? id : id + '#' + exportName }, $$bound: { value: null }, bind: { value: bind } }); } var PROMISE_PROTOTYPE = Promise.prototype; var deepProxyHandlers = { get: function (target, name, receiver) { switch (name) { // These names are read by the Flight runtime if you end up using the exports object. case '$$typeof': // These names are a little too common. We should probably have a way to // have the Flight runtime extract the inner target instead. return target.$$typeof; case '$$id': return target.$$id; case '$$async': return target.$$async; case 'name': return target.name; case 'displayName': return undefined; // We need to special case this because createElement reads it if we pass this // reference. case 'defaultProps': return undefined; // Avoid this attempting to be serialized. case 'toJSON': return undefined; case Symbol.toPrimitive: // $FlowFixMe[prop-missing] return Object.prototype[Symbol.toPrimitive]; case 'Provider': throw new Error("Cannot render a Client Context Provider on the Server. " + "Instead, you can export a Client Component wrapper " + "that itself renders a Client Context Provider."); } // eslint-disable-next-line react-internal/safe-string-coercion var expression = String(target.name) + '.' + String(name); throw new Error("Cannot access " + expression + " on the server. " + 'You cannot dot into a client module from a server component. ' + 'You can only pass the imported name through.'); }, set: function () { throw new Error('Cannot assign to a client module from a server module.'); } }; function getReference(target, name) { switch (name) { // These names are read by the Flight runtime if you end up using the exports object. case '$$typeof': return target.$$typeof; case '$$id': return target.$$id; case '$$async': return target.$$async; case 'name': return target.name; // We need to special case this because createElement reads it if we pass this // reference. case 'defaultProps': return undefined; // Avoid this attempting to be serialized. case 'toJSON': return undefined; case Symbol.toPrimitive: // $FlowFixMe[prop-missing] return Object.prototype[Symbol.toPrimitive]; case '__esModule': // Something is conditionally checking which export to use. We'll pretend to be // an ESM compat module but then we'll check again on the client. var moduleId = target.$$id; target.default = registerClientReferenceImpl(function () { throw new Error("Attempted to call the default export of " + moduleId + " from the server " + "but it's on the client. It's not possible to invoke a client function from " + "the server, it can only be rendered as a Component or passed to props of a " + "Client Component."); }, target.$$id + '#', target.$$async); return true; case 'then': if (target.then) { // Use a cached value return target.then; } if (!target.$$async) { // If this module is expected to return a Promise (such as an AsyncModule) then // we should resolve that with a client reference that unwraps the Promise on // the client. var clientReference = registerClientReferenceImpl({}, target.$$id, true); var proxy = new Proxy(clientReference, proxyHandlers); // Treat this as a resolved Promise for React's use() target.status = 'fulfilled'; target.value = proxy; var then = target.then = registerClientReferenceImpl(function then(resolve, reject) { // Expose to React. return Promise.resolve(resolve(proxy)); }, // If this is not used as a Promise but is treated as a reference to a `.then` // export then we should treat it as a reference to that name. target.$$id + '#then', false); return then; } else { // Since typeof .then === 'function' is a feature test we'd continue recursing // indefinitely if we return a function. Instead, we return an object reference // if we check further. return undefined; } } var cachedReference = target[name]; if (!cachedReference) { var reference = registerClientReferenceImpl(function () { throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion "Attempted to call " + String(name) + "() from the server but " + String(name) + " is on the client. " + "It's not possible to invoke a client function from the server, it can " + "only be rendered as a Component or passed to props of a Client Component."); }, target.$$id + '#' + name, target.$$async); Object.defineProperty(reference, 'name', { value: name }); cachedReference = target[name] = new Proxy(reference, deepProxyHandlers); } return cachedReference; } var proxyHandlers = { get: function (target, name, receiver) { return getReference(target, name); }, getOwnPropertyDescriptor: function (target, name) { var descriptor = Object.getOwnPropertyDescriptor(target, name); if (!descriptor) { descriptor = { value: getReference(target, name), writable: false, configurable: false, enumerable: false }; Object.defineProperty(target, name, descriptor); } return descriptor; }, getPrototypeOf: function (target) { // Pretend to be a Promise in case anyone asks. return PROMISE_PROTOTYPE; }, set: function () { throw new Error('Cannot assign to a client module from a server module.'); } }; function createClientModuleProxy(moduleId) { var clientReference = registerClientReferenceImpl({}, // Represents the whole Module object instead of a particular import. moduleId, false); return new Proxy(clientReference, proxyHandlers); } function getClientReferenceKey(reference) { return reference.$$async ? reference.$$id + '#async' : reference.$$id; } function resolveClientReferenceMetadata(config, clientReference) { var modulePath = clientReference.$$id; var name = ''; var resolvedModuleData = config[modulePath]; if (resolvedModuleData) { // The potentially aliased name. name = resolvedModuleData.name; } else { // We didn't find this specific export name but we might have the * export // which contains this name as well. // TODO: It's unfortunate that we now have to parse this string. We should // probably go back to encoding path and name separately on the client reference. var idx = modulePath.lastIndexOf('#'); if (idx !== -1) { name = modulePath.slice(idx + 1); resolvedModuleData = config[modulePath.slice(0, idx)]; } if (!resolvedModuleData) { throw new Error('Could not find the module "' + modulePath + '" in the React Client Manifest. ' + 'This is probably a bug in the React Server Components bundler.'); } } if (clientReference.$$async === true) { return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1]; } else { return [resolvedModuleData.id, resolvedModuleData.chunks, name]; } } function getServerReferenceId(config, serverReference) { return serverReference.$$id; } function getServerReferenceBoundArguments(config, serverReference) { return serverReference.$$bound; } var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; var ReactDOMFlightServerDispatcher = { prefetchDNS: prefetchDNS, preconnect: preconnect, preload: preload, preloadModule: preloadModule$1, preinitStyle: preinitStyle, preinitScript: preinitScript, preinitModuleScript: preinitModuleScript }; function prefetchDNS(href) { { if (typeof href === 'string' && href) { var request = resolveRequest(); if (request) { var hints = getHints(request); var key = 'D|' + href; if (hints.has(key)) { // duplicate hint return; } hints.add(key); emitHint(request, 'D', href); } } } } function preconnect(href, crossOrigin) { { if (typeof href === 'string') { var request = resolveRequest(); if (request) { var hints = getHints(request); var key = "C|" + (crossOrigin == null ? 'null' : crossOrigin) + "|" + href; if (hints.has(key)) { // duplicate hint return; } hints.add(key); if (typeof crossOrigin === 'string') { emitHint(request, 'C', [href, crossOrigin]); } else { emitHint(request, 'C', href); } } } } } function preload(href, as, options) { { if (typeof href === 'string') { var request = resolveRequest(); if (request) { var hints = getHints(request); var key = 'L'; if (as === 'image' && options) { key += getImagePreloadKey(href, options.imageSrcSet, options.imageSizes); } else { key += "[" + as + "]" + href; } if (hints.has(key)) { // duplicate hint return; } hints.add(key); var trimmed = trimOptions(options); if (trimmed) { emitHint(request, 'L', [href, as, trimmed]); } else { emitHint(request, 'L', [href, as]); } } } } } function preloadModule$1(href, options) { { if (typeof href === 'string') { var request = resolveRequest(); if (request) { var hints = getHints(request); var key = 'm|' + href; if (hints.has(key)) { // duplicate hint return; } hints.add(key); var trimmed = trimOptions(options); if (trimmed) { return emitHint(request, 'm', [href, trimmed]); } else { return emitHint(request, 'm', href); } } } } } function preinitStyle(href, precedence, options) { { if (typeof href === 'string') { var request = resolveRequest(); if (request) { var hints = getHints(request); var key = 'S|' + href; if (hints.has(key)) { // duplicate hint return; } hints.add(key); var trimmed = trimOptions(options); if (trimmed) { return emitHint(request, 'S', [href, typeof precedence === 'string' ? precedence : 0, trimmed]); } else if (typeof precedence === 'string') { return emitHint(request, 'S', [href, precedence]); } else { return emitHint(request, 'S', href); } } } } } function preinitScript(href, options) { { if (typeof href === 'string') { var request = resolveRequest(); if (request) { var hints = getHints(request); var key = 'X|' + href; if (hints.has(key)) { // duplicate hint return; } hints.add(key); var trimmed = trimOptions(options); if (trimmed) { return emitHint(request, 'X', [href, trimmed]); } else { return emitHint(request, 'X', href); } } } } } function preinitModuleScript(href, options) { { if (typeof href === 'string') { var request = resolveRequest(); if (request) { var hints = getHints(request); var key = 'M|' + href; if (hints.has(key)) { // duplicate hint return; } hints.add(key); var trimmed = trimOptions(options); if (trimmed) { return emitHint(request, 'M', [href, trimmed]); } else { return emitHint(request, 'M', href); } } } } } // Flight normally encodes undefined as a special character however for directive option // arguments we don't want to send unnecessary keys and bloat the payload so we create a // trimmed object which omits any keys with null or undefined values. // This is only typesafe because these option objects have entirely optional fields where // null and undefined represent the same thing as no property. function trimOptions(options) { if (options == null) return null; var hasProperties = false; var trimmed = {}; for (var key in options) { if (options[key] != null) { hasProperties = true; trimmed[key] = options[key]; } } return hasProperties ? trimmed : null; } function getImagePreloadKey(href, imageSrcSet, imageSizes) { var uniquePart = ''; if (typeof imageSrcSet === 'string' && imageSrcSet !== '') { uniquePart += '[' + imageSrcSet + ']'; if (typeof imageSizes === 'string') { uniquePart += '[' + imageSizes + ']'; } } else { uniquePart += '[][]' + href; } return "[image]" + uniquePart; } var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher; function prepareHostDispatcher() { ReactDOMCurrentDispatcher.current = ReactDOMFlightServerDispatcher; } // Used to distinguish these contexts from ones used in other renderers. // small, smaller than how we encode undefined, and is unambiguous. We could use // a different tuple structure to encode this instead but this makes the runtime // cost cheaper by eliminating a type checks in more positions. // prettier-ignore function createHints() { return new Set(); } var supportsRequestStorage = typeof AsyncLocalStorage === 'function'; var requestStorage = supportsRequestStorage ? new AsyncLocalStorage() : null; // We use the Node version but get access to async_hooks from a global. typeof async_hooks === 'object' ? async_hooks.createHook : function () { return { enable: function () {}, disable: function () {} }; }; typeof async_hooks === 'object' ? async_hooks.executionAsyncId : null; // ATTENTION // When adding new symbols to this file, // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols' // The Symbol used to tag the ReactElement-like types. var REACT_ELEMENT_TYPE = Symbol.for('react.element'); var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment'); var REACT_CONTEXT_TYPE = Symbol.for('react.context'); var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref'); var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense'); var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list'); var REACT_MEMO_TYPE = Symbol.for('react.memo'); var REACT_LAZY_TYPE = Symbol.for('react.lazy'); var REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel'); var REACT_POSTPONE_TYPE = Symbol.for('react.postpone'); var MAYBE_ITERATOR_SYMBOL = Symbol.iterator; var FAUX_ITERATOR_SYMBOL = '@@iterator'; function getIteratorFn(maybeIterable) { if (maybeIterable === null || typeof maybeIterable !== 'object') { return null; } var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]; if (typeof maybeIterator === 'function') { return maybeIterator; } return null; } // Corresponds to ReactFiberWakeable and ReactFizzWakeable modules. Generally, // changes to one module should be reflected in the others. // TODO: Rename this module and the corresponding Fiber one to "Thenable" // instead of "Wakeable". Or some other more appropriate name. // An error that is thrown (e.g. by `use`) to trigger Suspense. If we // detect this is caught by userspace, we'll log a warning in development. var SuspenseException = new Error("Suspense Exception: This is not a real error! It's an implementation " + 'detail of `use` to interrupt the current render. You must either ' + 'rethrow it immediately, or move the `use` call outside of the ' + '`try/catch` block. Capturing without rethrowing will lead to ' + 'unexpected behavior.\n\n' + 'To handle async errors, wrap your component in an error boundary, or ' + "call the promise's `.catch` method and pass the result to `use`"); function createThenableState() { // The ThenableState is created the first time a component suspends. If it // suspends again, we'll reuse the same state. return []; } function noop() {} function trackUsedThenable(thenableState, thenable, index) { var previous = thenableState[index]; if (previous === undefined) { thenableState.push(thenable); } else { if (previous !== thenable) { // Reuse the previous thenable, and drop the new one. We can assume // they represent the same value, because components are idempotent. // Avoid an unhandled rejection errors for the Promises that we'll // intentionally ignore. thenable.then(noop, noop); thenable = previous; } } // We use an expando to track the status and result of a thenable so that we // can synchronously unwrap the value. Think of this as an extension of the // Promise API, or a custom interface that is a superset of Thenable. // // If the thenable doesn't have a status, set it to "pending" and attach // a listener that will update its status and result when it resolves. switch (thenable.status) { case 'fulfilled': { var fulfilledValue = thenable.value; return fulfilledValue; } case 'rejected': { var rejectedError = thenable.reason; throw rejectedError; } default: { if (typeof thenable.status === 'string') ; else { var pendingThenable = thenable; pendingThenable.status = 'pending'; pendingThenable.then(function (fulfilledValue) { if (thenable.status === 'pending') { var fulfilledThenable = thenable; fulfilledThenable.status = 'fulfilled'; fulfilledThenable.value = fulfilledValue; } }, function (error) { if (thenable.status === 'pending') { var rejectedThenable = thenable; rejectedThenable.status = 'rejected'; rejectedThenable.reason = error; } }); // Check one more time in case the thenable resolved synchronously switch (thenable.status) { case 'fulfilled': { var fulfilledThenable = thenable; return fulfilledThenable.value; } case 'rejected': { var rejectedThenable = thenable; throw rejectedThenable.reason; } } } // Suspend. // // Throwing here is an implementation detail that allows us to unwind the // call stack. But we shouldn't allow it to leak into userspace. Throw an // opaque placeholder value instead of the actual thenable. If it doesn't // get captured by the work loop, log a warning, because that means // something in userspace must have caught it. suspendedThenable = thenable; throw SuspenseException; } } } // This is used to track the actual thenable that suspended so it can be // passed to the rest of the Suspense implementation — which, for historical // reasons, expects to receive a thenable. var suspendedThenable = null; function getSuspendedThenable() { // This is called right after `use` suspends by throwing an exception. `use` // throws an opaque value instead of the thenable itself so that it can't be // caught in userspace. Then the work loop accesses the actual thenable using // this function. if (suspendedThenable === null) { throw new Error('Expected a suspended thenable. This is a bug in React. Please file ' + 'an issue.'); } var thenable = suspendedThenable; suspendedThenable = null; return thenable; } var currentRequest$1 = null; var thenableIndexCounter = 0; var thenableState = null; function prepareToUseHooksForRequest(request) { currentRequest$1 = request; } function resetHooksForRequest() { currentRequest$1 = null; } function prepareToUseHooksForComponent(prevThenableState) { thenableIndexCounter = 0; thenableState = prevThenableState; } function getThenableStateAfterSuspending() { // If you use() to Suspend this should always exist but if you throw a Promise instead, // which is not really supported anymore, it will be empty. We use the empty set as a // marker to know if this was a replay of the same component or first attempt. var state = thenableState || createThenableState(); thenableState = null; return state; } var HooksDispatcher = { useMemo: function (nextCreate) { return nextCreate(); }, useCallback: function (callback) { return callback; }, useDebugValue: function () {}, useDeferredValue: unsupportedHook, useTransition: unsupportedHook, readContext: unsupportedContext, useContext: unsupportedContext, useReducer: unsupportedHook, useRef: unsupportedHook, useState: unsupportedHook, useInsertionEffect: unsupportedHook, useLayoutEffect: unsupportedHook, useImperativeHandle: unsupportedHook, useEffect: unsupportedHook, useId: useId, useSyncExternalStore: unsupportedHook, useCacheRefresh: function () { return unsupportedRefresh; }, useMemoCache: function (size) { var data = new Array(size); for (var i = 0; i < size; i++) { data[i] = REACT_MEMO_CACHE_SENTINEL; } return data; }, use: use }; function unsupportedHook() { throw new Error('This Hook is not supported in Server Components.'); } function unsupportedRefresh() { throw new Error('Refreshing the cache is not supported in Server Components.'); } function unsupportedContext() { throw new Error('Cannot read a Client Context from a Server Component.'); } function useId() { if (currentRequest$1 === null) { throw new Error('useId can only be used while React is rendering'); } var id = currentRequest$1.identifierCount++; // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client return ':' + currentRequest$1.identifierPrefix + 'S' + id.toString(32) + ':'; } function use(usable) { if (usable !== null && typeof usable === 'object' || typeof usable === 'function') { // $FlowFixMe[method-unbinding] if (typeof usable.then === 'function') { // This is a thenable. var thenable = usable; // Track the position of the thenable within this fiber. var index = thenableIndexCounter; thenableIndexCounter += 1; if (thenableState === null) { thenableState = createThenableState(); } return trackUsedThenable(thenableState, thenable, index); } else if (usable.$$typeof === REACT_CONTEXT_TYPE) { unsupportedContext(); } } if (isClientReference(usable)) { if (usable.value != null && usable.value.$$typeof === REACT_CONTEXT_TYPE) { // Show a more specific message since it's a common mistake. throw new Error('Cannot read a Client Context from a Server Component.'); } else { throw new Error('Cannot use() an already resolved Client Reference.'); } } else { throw new Error( // eslint-disable-next-line react-internal/safe-string-coercion 'An unsupported type was passed to use(): ' + String(usable)); } } function createSignal() { return new AbortController().signal; } function resolveCache() { var request = resolveRequest(); if (request) { return getCache(request); } return new Map(); } var DefaultCacheDispatcher = { getCacheSignal: function () { var cache = resolveCache(); var entry = cache.get(createSignal); if (entry === undefined) { entry = createSignal(); cache.set(createSignal, entry); } return entry; }, getCacheForType: function (resourceType) { var cache = resolveCache(); var entry = cache.get(resourceType); if (entry === undefined) { entry = resourceType(); // TODO: Warn if undefined? cache.set(resourceType, entry); } return entry; } }; var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare function isArray(a) { return isArrayImpl(a); } var getPrototypeOf = Object.getPrototypeOf; // in case they error. var jsxPropsParents = new WeakMap(); var jsxChildrenParents = new WeakMap(); function isObjectPrototype(object) { if (!object) { return false; } var ObjectPrototype = Object.prototype; if (object === ObjectPrototype) { return true; } // It might be an object from a different Realm which is // still just a plain simple object. if (getPrototypeOf(object)) { return false; } var names = Object.getOwnPropertyNames(object); for (var i = 0; i < names.length; i++) { if (!(names[i] in ObjectPrototype)) { return false; } } return true; } function isSimpleObject(object) { if (!isObjectPrototype(getPrototypeOf(object))) { return false; } var names = Object.getOwnPropertyNames(object); for (var i = 0; i < names.length; i++) { var descriptor = Object.getOwnPropertyDescriptor(object, names[i]); if (!descriptor) { return false; } if (!descriptor.enumerable) { if ((names[i] === 'key' || names[i] === 'ref') && typeof descriptor.get === 'function') { // React adds key and ref getters to props objects to issue warnings. // Those getters will not be transferred to the client, but that's ok, // so we'll special case them. continue; } return false; } } return true; } function objectName(object) { // $FlowFixMe[method-unbinding] var name = Object.prototype.toString.call(object); return name.replace(/^\[object (.*)\]$/, function (m, p0) { return p0; }); } function describeKeyForErrorMessage(key) { var encodedKey = JSON.stringify(key); return '"' + key + '"' === encodedKey ? key : encodedKey; } function describeValueForErrorMessage(value) { switch (typeof value) { case 'string': { return JSON.stringify(value.length <= 10 ? value : value.slice(0, 10) + '...'); } case 'object': { if (isArray(value)) { return '[...]'; } var name = objectName(value); if (name === 'Object') { return '{...}'; } return name; } case 'function': return 'function'; default: // eslint-disable-next-line react-internal/safe-string-coercion return String(value); } } function describeElementType(type) { if (typeof type === 'string') { return type; } switch (type) { case REACT_SUSPENSE_TYPE: return 'Suspense'; case REACT_SUSPENSE_LIST_TYPE: return 'SuspenseList'; } if (typeof type === 'object') { switch (type.$$typeof) { case REACT_FORWARD_REF_TYPE: return describeElementType(type.render); case REACT_MEMO_TYPE: return describeElementType(type.type); case REACT_LAZY_TYPE: { var lazyComponent = type; var payload = lazyComponent._payload; var init = lazyComponent._init; try { // Lazy may contain any component type so we recursively resolve it. return describeElementType(init(payload)); } catch (x) {} } } } return ''; } function describeObjectForErrorMessage(objectOrArray, expandedName) { var objKind = objectName(objectOrArray); if (objKind !== 'Object' && objKind !== 'Array') { return objKind; } var str = ''; var start = -1; var length = 0; if (isArray(objectOrArray)) { if (jsxChildrenParents.has(objectOrArray)) { // Print JSX Children var type = jsxChildrenParents.get(objectOrArray); str = '<' + describeElementType(type) + '>'; var array = objectOrArray; for (var i = 0; i < array.length; i++) { var value = array[i]; var substr = void 0; if (typeof value === 'string') { substr = value; } else if (typeof value === 'object' && value !== null) { substr = '{' + describeObjectForErrorMessage(value) + '}'; } else { substr = '{' + describeValueForErrorMessage(value) + '}'; } if ('' + i === expandedName) { start = str.length; length = substr.length; str += substr; } else if (substr.length < 15 && str.length + substr.length < 40) { str += substr; } else { str += '{...}'; } } str += '</' + describeElementType(type) + '>'; } else { // Print Array str = '['; var _array = objectOrArray; for (var _i = 0; _i < _array.length; _i++) { if (_i > 0) { str += ', '; } var _value = _array[_i]; var _substr = void 0; if (typeof _value === 'object' && _value !== null) { _substr = describeObjectForErrorMessage(_value); } else { _substr = describeValueForErrorMessage(_value); } if ('' + _i === expandedName) { start = str.length; length = _substr.length; str += _substr; } else if (_substr.length < 10 && str.length + _substr.length < 40) { str += _substr; } else { str += '...'; } } str += ']'; } } else { if (objectOrArray.$$typeof === REACT_ELEMENT_TYPE) { str = '<' + describeElementType(objectOrArray.type) + '/>'; } else if (jsxPropsParents.has(objectOrArray)) { // Print JSX var _type = jsxPropsParents.get(objectOrArray); str = '<' + (describeElementType(_type) || '...'); var object = objectOrArray; var names = Object.keys(object); for (var _i2 = 0; _i2 < names.length; _i2++) { str += ' '; var name = names[_i2]; str += describeKeyForErrorMessage(name) + '='; var _value2 = object[name]; var _substr2 = void 0; if (name === expandedName && typeof _value2 === 'object' && _value2 !== null) { _substr2 = describeObjectForErrorMessage(_value2); } else { _substr2 = describeValueForErrorMessage(_value2); } if (typeof _value2 !== 'string') { _substr2 = '{' + _substr2 + '}'; } if (name === expandedName) { start = str.length; length = _substr2.length; str += _substr2; } else if (_substr2.length < 10 && str.length + _substr2.length < 40) { str += _substr2; } else { str += '...'; } } str += '>'; } else { // Print Object str = '{'; var _object = objectOrArray; var _names = Object.keys(_object); for (var _i3 = 0; _i3 < _names.length; _i3++) { if (_i3 > 0) { str += ', '; } var _name = _names[_i3]; str += describeKeyForErrorMessage(_name) + ': '; var _value3 = _object[_name]; var _substr3 = void 0; if (typeof _value3 === 'object' && _value3 !== null) { _substr3 = describeObjectForErrorMessage(_value3); } else { _substr3 = describeValueForErrorMessage(_value3); } if (_name === expandedName) { start = str.length; length = _substr3.length; str += _substr3; } else if (_substr3.length < 10 && str.length + _substr3.length < 40) { str += _substr3; } else { str += '...'; } } str += '}'; } } if (expandedName === undefined) { return str; } if (start > -1 && length > 0) { var highlight = ' '.repeat(start) + '^'.repeat(length); return '\n ' + str + '\n ' + highlight; } return '\n ' + str; } var ReactSharedServerInternals = // $FlowFixMe: It's defined in the one we resolve to. React.__SECRET_SERVER_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; if (!ReactSharedServerInternals) { throw new Error('The "react" package in this environment is not configured correctly. ' + 'The "react-server" condition must be enabled in any environment that ' + 'runs React Server Components.'); } var ObjectPrototype = Object.prototype; var stringify = JSON.stringify; // Serializable values // Thenable<ReactClientValue> var PENDING$1 = 0; var COMPLETED = 1; var ABORTED = 3; var ERRORED$1 = 4; var ReactCurrentCache = ReactSharedServerInternals.ReactCurrentCache; var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher; function defaultErrorHandler(error) { console['error'](error); // Don't transform to our wrapper } function defaultPostponeHandler(reason) {// Noop } var OPEN = 0; var CLOSING = 1; var CLOSED = 2; function createRequest(model, bundlerConfig, onError, identifierPrefix, onPostpone, environmentName) { if (ReactCurrentCache.current !== null && ReactCurrentCache.current !== DefaultCacheDispatcher) { throw new Error('Currently React only supports one RSC renderer at a time.'); } prepareHostDispatcher(); ReactCurrentCache.current = DefaultCacheDispatcher; var abortSet = new Set(); var pingedTasks = []; var cleanupQueue = []; var hints = createHints(); var request = { status: OPEN, flushScheduled: false, fatalError: null, destination: null, bundlerConfig: bundlerConfig, cache: new Map(), nextChunkId: 0, pendingChunks: 0, hints: hints, abortableTasks: abortSet, pingedTasks: pingedTasks, completedImportChunks: [], completedHintChunks: [], completedRegularChunks: [], completedErrorChunks: [], writtenSymbols: new Map(), writtenClientReferences: new Map(), writtenServerReferences: new Map(), writtenObjects: new WeakMap(), identifierPrefix: identifierPrefix || '', identifierCount: 1, taintCleanupQueue: cleanupQueue, onError: onError === undefined ? defaultErrorHandler : onError, onPostpone: onPostpone === undefined ? defaultPostponeHandler : onPostpone }; { request.environmentName = environmentName === undefined ? 'server' : environmentName; } var rootTask = createTask(request, model, null, false, abortSet); pingedTasks.push(rootTask); return request; } var currentRequest = null; function resolveRequest() { if (currentRequest) return currentRequest; if (supportsRequestStorage) { var store = requestStorage.getStore(); if (store) return store; } return null; } function serializeThenable(request, task, thenable) { var newTask = createTask(request, null, task.keyPath, // the server component sequence continues through Promise-as-a-child. task.implicitSlot, request.abortableTasks); { // If this came from Flight, forward any debug info into this new row. var debugInfo = thenable._debugInfo; if (debugInfo) { forwardDebugInfo(request, newTask.id, debugInfo); } } switch (thenable.status) { case 'fulfilled': { // We have the resolved value, we can go ahead and schedule it for serialization. newTask.model = thenable.value; pingTask(request, newTask); return newTask.id; } case 'rejected': { var x = thenable.reason; { var digest = logRecoverableError(request, x); emitErrorChunk(request, newTask.id, digest, x); } return newTask.id; } default: { if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by // some custom userspace implementation. We treat it as "pending". break; } var pendingThenable = thenable; pendingThenable.status = 'pending'; pendingThenable.then(function (fulfilledValue) { if (thenable.status === 'pending') { var fulfilledThenable = thenable; fulfilledThenable.status = 'fulfilled'; fulfilledThenable.value = fulfilledValue; } }, function (error) { if (thenable.status === 'pending') { var rejectedThenable = thenable; rejectedThenable.status = 'rejected'; rejectedThenable.reason = error; } }); break; } } thenable.then(function (value) { newTask.model = value; pingTask(request, newTask); }, function (reason) { { newTask.status = ERRORED$1; var _digest = logRecoverableError(request, reason); emitErrorChunk(request, newTask.id, _digest, reason); } request.abortableTasks.delete(newTask); if (request.destination !== null) { flushCompletedChunks(request, request.destination); } }); return newTask.id; } function emitHint(request, code, model) { emitHintChunk(request, code, model); enqueueFlush(request); } function getHints(request) { return request.hints; } function getCache(request) { return request.cache; } function readThenable(thenable) { if (thenable.status === 'fulfilled') { return thenable.value; } else if (thenable.status === 'rejected') { throw thenable.reason; } throw thenable; } function createLazyWrapperAroundWakeable(wakeable) { // This is a temporary fork of the `use` implementation until we accept // promises everywhere. var thenable = wakeable; switch (thenable.status) { case 'fulfilled': case 'rejected': break; default: { if (typeof thenable.status === 'string') { // Only instrument the thenable if the status if not defined. If // it's defined, but an unknown value, assume it's been instrumented by // some custom userspace implementation. We treat it as "pending". break; } var pendingThenable = thenable; pendingThenable.status = 'pending'; pendingThenable.then(function (fulfilledValue) { if (thenable.status === 'pending') { var fulfilledThenable = thenable; fulfilledThenable.status = 'fulfilled'; fulfilledThenable.value = fulfilledValue; } }, function (error) { if (thenable.status === 'pending') { var rejectedThenable = thenable; rejectedThenable.status = 'rejected'; rejectedThenable.reason = error; } }); break; } } var lazyType = { $$typeof: REACT_LAZY_TYPE, _payload: thenable, _init: readThenable }; { // If this came from React, transfer the debug info. lazyType._debugInfo = thenable._debugInfo || []; } return lazyType; } function renderFunctionComponent(request, task, key, Component, props) { // Reset the task's thenable state before continuing, so that if a later // component suspends we can reuse the same task object. If the same // component suspends again, the thenable state will be restored. var prevThenableState = task.thenableState; task.thenableState = null; { if (debugID === null) { // We don't have a chunk to assign debug info. We need to outline this // component to assign it an ID. return outlineTask(request, task); } else if (prevThenableState !== null) ; else { // This is a new component in the same task so we can emit more debug info. var componentName = Component.displayName || Component.name || ''; request.pendingChunks++; emitDebugChunk(request, debugID, { name: componentName, env: request.environmentName }); } } prepareToUseHooksForComponent(prevThenableState); // The secondArg is always undefined in Server Components since refs error early. var secondArg = undefined; var result = Component(props, secondArg); if (typeof result === 'object' && result !== null && typeof result.then === 'function') { // When the return value is in children position we can resolve it immediately, // to its value without a wrapper if it's synchronously available. var thenable = result; if (thenable.status === 'fulfilled') { return thenable.value; } // TODO: Once we accept Promises as children on the client, we can just return // the thenable here. result = createLazyWrapperAroundWakeable(result); } // Track this element's key on the Server Component on the keyPath context.. var prevKeyPath = task.keyPath; var prevImplicitSlot = task.implicitSlot; if (key !== null) { // Append the key to the path. Technically a null key should really add the child // index. We don't do that to hold the payload small and implementation simple. task.keyPath = prevKeyPath === null ? key : prevKeyPath + ',' + key; } else if (prevKeyPath === null) { // This sequence of Server Components has no keys. This means that it was rendered // in a slot that needs to assign an implicit key. Even if children below have // explicit keys, they should not be used for the outer most key since it might // collide with other slots in that set. task.implicitSlot = true; } var json = renderModelDestructive(request, task, emptyRoot, '', result); task.keyPath = prevKeyPath; task.implicitSlot = prevImplicitSlot; return json; } function renderFragment(request, task, children) { { var debugInfo = children._debugInfo; if (debugInfo) { // If this came from Flight, forward any debug info into this new row. if (debugID === null) { // We don't have a chunk to assign debug info. We need to outline this // component to assign it an ID. return outlineTask(request, task); } else { // Forward any debug info we have the first time we see it. // We do this after init so that we have received all the debug info // from the server by the time we emit it. forwardDebugInfo(request, debugID, debugInfo); } } } { return children; } } function renderClientElement(task, type, key, props) { { return [REACT_ELEMENT_TYPE, type, key, props]; } // We prepend the terminal client element that actually gets serialized with } // The chunk ID we're currently rendering that we can assign debug data to. var debugID = null; function outlineTask(request, task) { var newTask = createTask(request, task.model, // the currently rendering element task.keyPath, // unlike outlineModel this one carries along context task.implicitSlot, request.abortableTasks); retryTask(request, newTask); if (newTask.status === COMPLETED) { // We completed synchronously so we can refer to this by reference. This // makes it behaves the same as prod during deserialization. return serializeByValueID(newTask.id); } // This didn't complete synchronously so it wouldn't have even if we didn't // outline it,