deno.land / x / ultra@v2.3.8 / lib / stream.ts
نووسراو ببینە
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350/** * A lot of this code originally comes from https://github.com/vercel/next.js * with some tweaking. * * node-web-stream-helpers.ts: https://github.com/vercel/next.js/blob/c79b67ccedda1ae6fd9d05cfccf1d2842b94f43f/packages/next/server/node-web-streams-helper.ts */import type { ReactElement } from "react";import * as ReactDOMServer from "react-dom/server";import { ImportMap, Mode, RenderedReadableStream } from "./types.ts";import { nonNullable } from "./utils/non-nullable.ts";import { log } from "./logger.ts";import { readableStreamFromReader, StringReader } from "./deps.ts";
export function encodeText(input: string) { return new TextEncoder().encode(input);}
export function decodeText(input?: Uint8Array, textDecoder?: TextDecoder) { return textDecoder ? textDecoder.decode(input, { stream: true }) : new TextDecoder().decode(input);}
export async function streamToString( stream: ReadableStream<Uint8Array>,): Promise<string> { const reader = stream.getReader(); const textDecoder = new TextDecoder();
let bufferedString = "";
while (true) { const { done, value } = await reader.read();
if (done) { return bufferedString; }
bufferedString += decodeText(value, textDecoder); }}
export function createBufferedTransformStream(): TransformStream< Uint8Array, Uint8Array> { let bufferedString = ""; let pendingFlush: Promise<void> | null = null;
const flushBuffer = (controller: TransformStreamDefaultController) => { if (!pendingFlush) { pendingFlush = new Promise((resolve) => { setTimeout(() => { controller.enqueue(encodeText(bufferedString)); bufferedString = ""; pendingFlush = null; resolve(); }, 0); }); } return pendingFlush; };
const textDecoder = new TextDecoder();
return new TransformStream({ transform(chunk, controller) { bufferedString += decodeText(chunk, textDecoder); flushBuffer(controller); },
flush() { if (pendingFlush) { textDecoder.decode(); return pendingFlush; } }, });}
export function createTransformStream( transform: (value: string) => string | Promise<string> = (value) => value,): TransformStream<Uint8Array, Uint8Array> { const textDecoder = new TextDecoder();
return new TransformStream({ async transform(chunk, controller) { const decoded = decodeText(chunk, textDecoder); const transformed = await transform(decoded); controller.enqueue(encodeText(transformed)); }, flush() { textDecoder.decode(); }, });}
export function createInsertedHTMLStream( getServerInsertedHTML: () => Promise<string>,): TransformStream<Uint8Array, Uint8Array> { return new TransformStream({ async transform(chunk, controller) { const insertedHTMLChunk = encodeText(await getServerInsertedHTML());
controller.enqueue(insertedHTMLChunk); controller.enqueue(chunk); }, });}
export function createHeadInsertionTransformStream( insert: () => Promise<string>,): TransformStream<Uint8Array, Uint8Array> { let inserted = false; let freezing = false;
return new TransformStream({ async transform(chunk, controller) { // While react is flushing chunks, we don't apply insertions if (freezing) { controller.enqueue(chunk); return; }
const insertion = await insert();
if (inserted) { controller.enqueue(encodeText(insertion)); controller.enqueue(chunk); freezing = true; } else { const content = decodeText(chunk); const index = content.indexOf("</head>"); if (index !== -1) { const insertedHeadContent = content.slice(0, index) + insertion + content.slice(index); controller.enqueue(encodeText(insertedHeadContent)); freezing = true; inserted = true; } }
if (!inserted) { controller.enqueue(chunk); } else { setTimeout(() => { freezing = false; }); } }, });}
export function createImportMapInjectionStream( importMap: ImportMap, enableEsModuleShims?: boolean, esModuleShimsPath?: string, mode?: Mode,) { log.debug("Stream inject importMap"); let injected = false;
return createHeadInsertionTransformStream(() => { if (injected) return Promise.resolve("");
if (mode === "development") { importMap.imports = Object.fromEntries( Object.entries(importMap.imports).map(([key, value]) => { if (key.startsWith("@ultra/")) { value = value.endsWith("/") ? value.slice(0, -1) : value; value = `/_ultra/compiler/${encodeURIComponent(value)}/`; }
return [key, value]; }), ); }
const scripts = [ `<script type="importmap">${JSON.stringify(importMap)}</script>`, ];
if (enableEsModuleShims && esModuleShimsPath) { scripts.unshift( `<script async src="${esModuleShimsPath}" crossorigin="anonymous" nomodule></script>`, ); }
injected = true; return Promise.resolve(scripts.join("\n")); });}
export function createInlineDataStream( dataStream: ReadableStream<Uint8Array>,): TransformStream<Uint8Array, Uint8Array> { let dataStreamFinished: Promise<void> | null = null; return new TransformStream({ transform(chunk, controller) { controller.enqueue(chunk);
if (!dataStreamFinished) { const dataStreamReader = dataStream.getReader(); dataStreamFinished = new Promise((resolve) => { setTimeout(async () => { try { while (true) { const { done, value } = await dataStreamReader.read(); if (done) { return resolve(); } controller.enqueue(value); } } catch (error) { controller.error(error); } resolve(); }, 0); }); } }, flush() { if (dataStreamFinished) { return dataStreamFinished; } }, });}
export function renderToInitialStream({ element, options,}: { element: ReactElement; options?: ReactDOMServer.RenderToReadableStreamOptions;}): Promise<RenderedReadableStream> { /** * If the ReactDOM implementation doesn't support streams * eg Preact, just use renderToString */ if (!ReactDOMServer["renderToReadableStream"]) { const reactDomImpl = import.meta.resolve("react-dom/server"); log.warning(`${reactDomImpl} doesn't support streams`);
let html = ReactDOMServer.renderToString(element);
if (options?.bootstrapModules) { for (const bootstrapModule of options.bootstrapModules) { html = `${html}<script src="${bootstrapModule}" type="module" async></script>`; } }
return Promise.resolve(readableStreamFromReader(new StringReader(html))); }
log.debug("Render to initial stream"); return ReactDOMServer.renderToReadableStream(element, options);}
type ContinueFromInitialStreamOptions = { mode?: Mode; generateStaticHTML: boolean; disableHydration: boolean; dataStream?: TransformStream<Uint8Array, Uint8Array>; importMap?: ImportMap; enableEsModuleShims?: boolean; esModuleShimsPath?: string; getServerInsertedHTML?: () => Promise<string>; serverInsertedHTMLToHead: boolean; flushDataStreamHandler?: () => void;};
export async function continueFromInitialStream( renderStream: RenderedReadableStream, options: ContinueFromInitialStreamOptions,): Promise<ReadableStream<Uint8Array>> { const { mode, importMap, enableEsModuleShims, esModuleShimsPath, generateStaticHTML, disableHydration, dataStream, getServerInsertedHTML, flushDataStreamHandler, serverInsertedHTMLToHead, } = options;
log.debug("Continue from initial stream");
/** * @see https://reactjs.org/docs/react-dom-server.html#rendertoreadablestream */ if (generateStaticHTML && typeof renderStream.allReady !== undefined) { log.debug( "Waiting for stream to complete, generateStaticHTML was requested", ); await renderStream.allReady; }
const transforms: Array<TransformStream<Uint8Array, Uint8Array>> = [ createBufferedTransformStream(), /** * Inject the provided importMap to the head, before any of the other * transform streams below. */ importMap && !disableHydration ? createImportMapInjectionStream( importMap, enableEsModuleShims, esModuleShimsPath, mode, ) : null, /** * Enqueue server injected html if serverInsertedHTMLToHead is false */ getServerInsertedHTML && !serverInsertedHTMLToHead ? createInsertedHTMLStream(getServerInsertedHTML) : null, /** * Handles useAsync calls */ dataStream ? createInlineDataStream(dataStream.readable) : null, /** * Insert server injected html to the head if serverInsertedHTMLToHead is true */ createHeadInsertionTransformStream(async () => { log.debug("Stream Insert server side html", { serverInsertedHTMLToHead }); // Insert server side html to end of head in app layout rendering, to avoid // hydration errors. Remove this once it's ready to be handled by react itself. const serverInsertedHTML = getServerInsertedHTML && serverInsertedHTMLToHead ? await getServerInsertedHTML() : "";
return serverInsertedHTML; }), ].filter(nonNullable);
flushDataStreamHandler && flushDataStreamHandler();
return transforms.reduce( (readable, transform) => readable.pipeThrough(transform), renderStream, );}
ultra
Version Info
8 months ago
