UNPKG

next

Version:

The React Framework

118 lines (117 loc) 5.18 kB
import { htmlEscapeJsonString } from '../htmlescape'; const isEdgeRuntime = process.env.NEXT_RUNTIME === 'edge'; const INLINE_FLIGHT_PAYLOAD_BOOTSTRAP = 0; const INLINE_FLIGHT_PAYLOAD_DATA = 1; const INLINE_FLIGHT_PAYLOAD_FORM_STATE = 2; const INLINE_FLIGHT_PAYLOAD_BINARY = 3; const flightResponses = new WeakMap(); const encoder = new TextEncoder(); /** * Render Flight stream. * This is only used for renderToHTML, the Flight response does not need additional wrappers. */ export function useFlightStream(flightStream, clientReferenceManifest, nonce) { const response = flightResponses.get(flightStream); if (response) { return response; } // react-server-dom-webpack/client.edge must not be hoisted for require cache clearing to work correctly const { createFromReadableStream } = // eslint-disable-next-line import/no-extraneous-dependencies require('react-server-dom-webpack/client.edge'); const newResponse = createFromReadableStream(flightStream, { serverConsumerManifest: { moduleLoading: clientReferenceManifest.moduleLoading, moduleMap: isEdgeRuntime ? clientReferenceManifest.edgeSSRModuleMapping : clientReferenceManifest.ssrModuleMapping, serverModuleMap: null }, nonce }); flightResponses.set(flightStream, newResponse); return newResponse; } /** * Creates a ReadableStream provides inline script tag chunks for writing hydration * data to the client outside the React render itself. * * @param flightStream The RSC render stream * @param nonce optionally a nonce used during this particular render * @param formState optionally the formState used with this particular render * @returns a ReadableStream without the complete property. This signifies a lazy ReadableStream */ export function createInlinedDataReadableStream(flightStream, nonce, formState) { const startScriptTag = nonce ? `<script nonce=${JSON.stringify(nonce)}>` : '<script>'; const flightReader = flightStream.getReader(); const decoder = new TextDecoder('utf-8', { fatal: true }); const readable = new ReadableStream({ type: 'bytes', start (controller) { try { writeInitialInstructions(controller, startScriptTag, formState); } catch (error) { // during encoding or enqueueing forward the error downstream controller.error(error); } }, async pull (controller) { try { const { done, value } = await flightReader.read(); if (value) { try { const decodedString = decoder.decode(value, { stream: !done }); // The chunk cannot be decoded as valid UTF-8 string as it might // have arbitrary binary data. writeFlightDataInstruction(controller, startScriptTag, decodedString); } catch { // The chunk cannot be decoded as valid UTF-8 string. writeFlightDataInstruction(controller, startScriptTag, value); } } if (done) { controller.close(); } } catch (error) { // There was a problem in the upstream reader or during decoding or enqueuing // forward the error downstream controller.error(error); } } }); return readable; } function writeInitialInstructions(controller, scriptStart, formState) { if (formState != null) { controller.enqueue(encoder.encode(`${scriptStart}(self.__next_f=self.__next_f||[]).push(${htmlEscapeJsonString(JSON.stringify([ INLINE_FLIGHT_PAYLOAD_BOOTSTRAP ]))});self.__next_f.push(${htmlEscapeJsonString(JSON.stringify([ INLINE_FLIGHT_PAYLOAD_FORM_STATE, formState ]))})</script>`)); } else { controller.enqueue(encoder.encode(`${scriptStart}(self.__next_f=self.__next_f||[]).push(${htmlEscapeJsonString(JSON.stringify([ INLINE_FLIGHT_PAYLOAD_BOOTSTRAP ]))})</script>`)); } } function writeFlightDataInstruction(controller, scriptStart, chunk) { let htmlInlinedData; if (typeof chunk === 'string') { htmlInlinedData = htmlEscapeJsonString(JSON.stringify([ INLINE_FLIGHT_PAYLOAD_DATA, chunk ])); } else { // The chunk cannot be embedded as a UTF-8 string in the script tag. // Instead let's inline it in base64. // Credits to Devon Govett (devongovett) for the technique. // https://github.com/devongovett/rsc-html-stream const base64 = btoa(String.fromCodePoint(...chunk)); htmlInlinedData = htmlEscapeJsonString(JSON.stringify([ INLINE_FLIGHT_PAYLOAD_BINARY, base64 ])); } controller.enqueue(encoder.encode(`${scriptStart}self.__next_f.push(${htmlInlinedData})</script>`)); } //# sourceMappingURL=use-flight-response.js.map