|
| 1 | +/** |
| 2 | + * Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | + * |
| 4 | + * This source code is licensed under the MIT license found in the |
| 5 | + * LICENSE file in the root directory of this source tree. |
| 6 | + * |
| 7 | + * @flow |
| 8 | + */ |
| 9 | + |
| 10 | +import type {Thenable} from 'shared/ReactTypes'; |
| 11 | + |
| 12 | +import {knownServerReferences} from './ReactFlightServerReferenceRegistry'; |
| 13 | + |
| 14 | +import { |
| 15 | + REACT_ELEMENT_TYPE, |
| 16 | + REACT_LAZY_TYPE, |
| 17 | + REACT_PROVIDER_TYPE, |
| 18 | +} from 'shared/ReactSymbols'; |
| 19 | + |
| 20 | +import { |
| 21 | + describeObjectForErrorMessage, |
| 22 | + isSimpleObject, |
| 23 | + objectName, |
| 24 | +} from 'shared/ReactSerializationErrors'; |
| 25 | + |
| 26 | +import isArray from 'shared/isArray'; |
| 27 | + |
| 28 | +type ReactJSONValue = |
| 29 | + | string |
| 30 | + | boolean |
| 31 | + | number |
| 32 | + | null |
| 33 | + | $ReadOnlyArray<ReactJSONValue> |
| 34 | + | ReactServerObject; |
| 35 | + |
| 36 | +export opaque type ServerReference<T> = T; |
| 37 | + |
| 38 | +// Serializable values |
| 39 | +export type ReactServerValue = |
| 40 | + // References are passed by their value |
| 41 | + | ServerReference<any> |
| 42 | + // The rest are passed as is. Sub-types can be passed in but lose their |
| 43 | + // subtype, so the receiver can only accept once of these. |
| 44 | + | string |
| 45 | + | boolean |
| 46 | + | number |
| 47 | + | symbol |
| 48 | + | null |
| 49 | + | Iterable<ReactServerValue> |
| 50 | + | Array<ReactServerValue> |
| 51 | + | ReactServerObject |
| 52 | + | Promise<ReactServerValue>; // Thenable<ReactServerValue> |
| 53 | + |
| 54 | +type ReactServerObject = {+[key: string]: ReactServerValue}; |
| 55 | + |
| 56 | +// function serializeByValueID(id: number): string { |
| 57 | +// return '$' + id.toString(16); |
| 58 | +// } |
| 59 | + |
| 60 | +function serializePromiseID(id: number): string { |
| 61 | + return '$@' + id.toString(16); |
| 62 | +} |
| 63 | + |
| 64 | +function serializeServerReferenceID(id: number): string { |
| 65 | + return '$F' + id.toString(16); |
| 66 | +} |
| 67 | + |
| 68 | +function serializeSymbolReference(name: string): string { |
| 69 | + return '$S' + name; |
| 70 | +} |
| 71 | + |
| 72 | +function escapeStringValue(value: string): string { |
| 73 | + if (value[0] === '$') { |
| 74 | + // We need to escape $ prefixed strings since we use those to encode |
| 75 | + // references to IDs and as special symbol values. |
| 76 | + return '$' + value; |
| 77 | + } else { |
| 78 | + return value; |
| 79 | + } |
| 80 | +} |
| 81 | + |
| 82 | +export function processReply( |
| 83 | + root: ReactServerValue, |
| 84 | + resolve: (string | FormData) => void, |
| 85 | + reject: (error: mixed) => void, |
| 86 | +): void { |
| 87 | + let nextPartId = 1; |
| 88 | + let pendingParts = 0; |
| 89 | + let formData: null | FormData = null; |
| 90 | + |
| 91 | + function resolveToJSON( |
| 92 | + this: |
| 93 | + | {+[key: string | number]: ReactServerValue} |
| 94 | + | $ReadOnlyArray<ReactServerValue>, |
| 95 | + key: string, |
| 96 | + value: ReactServerValue, |
| 97 | + ): ReactJSONValue { |
| 98 | + const parent = this; |
| 99 | + if (__DEV__) { |
| 100 | + // $FlowFixMe |
| 101 | + const originalValue = this[key]; |
| 102 | + if (typeof originalValue === 'object' && originalValue !== value) { |
| 103 | + if (objectName(originalValue) !== 'Object') { |
| 104 | + console.error( |
| 105 | + 'Only plain objects can be passed to Server Functions from the Client. ' + |
| 106 | + '%s objects are not supported.%s', |
| 107 | + objectName(originalValue), |
| 108 | + describeObjectForErrorMessage(parent, key), |
| 109 | + ); |
| 110 | + } else { |
| 111 | + console.error( |
| 112 | + 'Only plain objects can be passed to Server Functions from the Client. ' + |
| 113 | + 'Objects with toJSON methods are not supported. Convert it manually ' + |
| 114 | + 'to a simple value before passing it to props.%s', |
| 115 | + describeObjectForErrorMessage(parent, key), |
| 116 | + ); |
| 117 | + } |
| 118 | + } |
| 119 | + } |
| 120 | + |
| 121 | + if (value === null) { |
| 122 | + return null; |
| 123 | + } |
| 124 | + |
| 125 | + if (typeof value === 'object') { |
| 126 | + // $FlowFixMe[method-unbinding] |
| 127 | + if (typeof value.then === 'function') { |
| 128 | + // We assume that any object with a .then property is a "Thenable" type, |
| 129 | + // or a Promise type. Either of which can be represented by a Promise. |
| 130 | + if (formData === null) { |
| 131 | + // Upgrade to use FormData to allow us to stream this value. |
| 132 | + formData = new FormData(); |
| 133 | + } |
| 134 | + pendingParts++; |
| 135 | + const promiseId = nextPartId++; |
| 136 | + const thenable: Thenable<any> = (value: any); |
| 137 | + thenable.then( |
| 138 | + partValue => { |
| 139 | + const partJSON = JSON.stringify(partValue, resolveToJSON); |
| 140 | + // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above. |
| 141 | + const data: FormData = formData; |
| 142 | + // eslint-disable-next-line react-internal/safe-string-coercion |
| 143 | + data.append('' + promiseId, partJSON); |
| 144 | + pendingParts--; |
| 145 | + if (pendingParts === 0) { |
| 146 | + resolve(data); |
| 147 | + } |
| 148 | + }, |
| 149 | + reason => { |
| 150 | + // In the future we could consider serializing this as an error |
| 151 | + // that throws on the server instead. |
| 152 | + reject(reason); |
| 153 | + }, |
| 154 | + ); |
| 155 | + return serializePromiseID(promiseId); |
| 156 | + } |
| 157 | + |
| 158 | + if (__DEV__) { |
| 159 | + if (value !== null && !isArray(value)) { |
| 160 | + // Verify that this is a simple plain object. |
| 161 | + if ((value: any).$$typeof === REACT_ELEMENT_TYPE) { |
| 162 | + console.error( |
| 163 | + 'React Element cannot be passed to Server Functions from the Client.%s', |
| 164 | + describeObjectForErrorMessage(parent, key), |
| 165 | + ); |
| 166 | + } else if ((value: any).$$typeof === REACT_LAZY_TYPE) { |
| 167 | + console.error( |
| 168 | + 'React Lazy cannot be passed to Server Functions from the Client.%s', |
| 169 | + describeObjectForErrorMessage(parent, key), |
| 170 | + ); |
| 171 | + } else if ((value: any).$$typeof === REACT_PROVIDER_TYPE) { |
| 172 | + console.error( |
| 173 | + 'React Context Providers cannot be passed to Server Functions from the Client.%s', |
| 174 | + describeObjectForErrorMessage(parent, key), |
| 175 | + ); |
| 176 | + } else if (objectName(value) !== 'Object') { |
| 177 | + console.error( |
| 178 | + 'Only plain objects can be passed to Client Components from Server Components. ' + |
| 179 | + '%s objects are not supported.%s', |
| 180 | + objectName(value), |
| 181 | + describeObjectForErrorMessage(parent, key), |
| 182 | + ); |
| 183 | + } else if (!isSimpleObject(value)) { |
| 184 | + console.error( |
| 185 | + 'Only plain objects can be passed to Client Components from Server Components. ' + |
| 186 | + 'Classes or other objects with methods are not supported.%s', |
| 187 | + describeObjectForErrorMessage(parent, key), |
| 188 | + ); |
| 189 | + } else if (Object.getOwnPropertySymbols) { |
| 190 | + const symbols = Object.getOwnPropertySymbols(value); |
| 191 | + if (symbols.length > 0) { |
| 192 | + console.error( |
| 193 | + 'Only plain objects can be passed to Client Components from Server Components. ' + |
| 194 | + 'Objects with symbol properties like %s are not supported.%s', |
| 195 | + symbols[0].description, |
| 196 | + describeObjectForErrorMessage(parent, key), |
| 197 | + ); |
| 198 | + } |
| 199 | + } |
| 200 | + } |
| 201 | + } |
| 202 | + |
| 203 | + // $FlowFixMe |
| 204 | + return value; |
| 205 | + } |
| 206 | + |
| 207 | + if (typeof value === 'string') { |
| 208 | + return escapeStringValue(value); |
| 209 | + } |
| 210 | + |
| 211 | + if ( |
| 212 | + typeof value === 'boolean' || |
| 213 | + typeof value === 'number' || |
| 214 | + typeof value === 'undefined' |
| 215 | + ) { |
| 216 | + return value; |
| 217 | + } |
| 218 | + |
| 219 | + if (typeof value === 'function') { |
| 220 | + const metaData = knownServerReferences.get(value); |
| 221 | + if (metaData !== undefined) { |
| 222 | + const metaDataJSON = JSON.stringify(metaData, resolveToJSON); |
| 223 | + if (formData === null) { |
| 224 | + // Upgrade to use FormData to allow us to stream this value. |
| 225 | + formData = new FormData(); |
| 226 | + } |
| 227 | + // The reference to this function came from the same client so we can pass it back. |
| 228 | + const refId = nextPartId++; |
| 229 | + // eslint-disable-next-line react-internal/safe-string-coercion |
| 230 | + formData.set('' + refId, metaDataJSON); |
| 231 | + return serializeServerReferenceID(refId); |
| 232 | + } |
| 233 | + throw new Error( |
| 234 | + 'Client Functions cannot be passed directly to Server Functions. ' + |
| 235 | + 'Only Functions passed from the Server can be passed back again.', |
| 236 | + ); |
| 237 | + } |
| 238 | + |
| 239 | + if (typeof value === 'symbol') { |
| 240 | + // $FlowFixMe `description` might be undefined |
| 241 | + const name: string = value.description; |
| 242 | + if (Symbol.for(name) !== value) { |
| 243 | + throw new Error( |
| 244 | + 'Only global symbols received from Symbol.for(...) can be passed to Server Functions. ' + |
| 245 | + `The symbol Symbol.for(${ |
| 246 | + // $FlowFixMe `description` might be undefined |
| 247 | + value.description |
| 248 | + }) cannot be found among global symbols.`, |
| 249 | + ); |
| 250 | + } |
| 251 | + return serializeSymbolReference(name); |
| 252 | + } |
| 253 | + |
| 254 | + if (typeof value === 'bigint') { |
| 255 | + throw new Error( |
| 256 | + `BigInt (${value}) is not yet supported as an argument to a Server Function.`, |
| 257 | + ); |
| 258 | + } |
| 259 | + |
| 260 | + throw new Error( |
| 261 | + `Type ${typeof value} is not supported as an argument to a Server Function.`, |
| 262 | + ); |
| 263 | + } |
| 264 | + |
| 265 | + // $FlowFixMe[incompatible-type] it's not going to be undefined because we'll encode it. |
| 266 | + const json: string = JSON.stringify(root, resolveToJSON); |
| 267 | + if (formData === null) { |
| 268 | + // If it's a simple data structure, we just use plain JSON. |
| 269 | + resolve(json); |
| 270 | + } else { |
| 271 | + // Otherwise, we use FormData to let us stream in the result. |
| 272 | + formData.set('0', json); |
| 273 | + if (pendingParts === 0) { |
| 274 | + // $FlowFixMe[incompatible-call] this has already been refined. |
| 275 | + resolve(formData); |
| 276 | + } |
| 277 | + } |
| 278 | +} |
0 commit comments