@shopify/hydrogen 0.1.0

package/dist/esnext/entry-client.d.ts

@@ -0,0 +1,3 @@
+import type { ClientHandler } from './types';
+declare const renderHydrogen: ClientHandler;
+export default renderHydrogen;

package/dist/esnext/entry-client.js

@@ -0,0 +1,36 @@
+import React, { Suspense, useState } from 'react';
+// @ts-ignore
+import { createRoot } from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
+import { HelmetProvider } from 'react-helmet-async';
+import { useServerResponse, ServerStateProvider, ServerStateRouter, } from './client';
+import { QueryProvider } from './hooks';
+const renderHydrogen = async (ClientWrapper) => {
+    const root = document.getElementById('root');
+    if (!root) {
+        console.error(`Could not find a root element <div id="root"></div> to render.`);
+        return;
+    }
+    createRoot(root, { hydrate: true }).render(React.createElement(ErrorBoundary, { FallbackComponent: Error },
+        React.createElement(Suspense, { fallback: null },
+            React.createElement(Content, { clientWrapper: ClientWrapper }))));
+};
+export default renderHydrogen;
+function Content({ clientWrapper: ClientWrapper }) {
+    const [serverState, setServerState] = useState({
+        page: window.location.pathname,
+    });
+    const response = useServerResponse(serverState);
+    return (React.createElement(ServerStateProvider, { serverState: serverState, setServerState: setServerState },
+        React.createElement(QueryProvider, null,
+            React.createElement(HelmetProvider, null,
+                React.createElement(BrowserRouter, null,
+                    React.createElement(ServerStateRouter, null),
+                    React.createElement(ClientWrapper, null, response.read()))))));
+}
+function Error({ error }) {
+    return (React.createElement("div", { style: { padding: '1em' } },
+        React.createElement("h1", { style: { fontSize: '2em', marginBottom: '1em', fontWeight: 'bold' } }, "Error"),
+        React.createElement("pre", { style: { whiteSpace: 'pre-wrap' } }, error.stack)));
+}

package/dist/esnext/entry-server.d.ts

@@ -0,0 +1,3 @@
+import type { ServerHandler } from './types';
+declare const renderHydrogen: ServerHandler;
+export default renderHydrogen;

package/dist/esnext/entry-server.js

@@ -0,0 +1,286 @@
+import React from 'react';
+import { renderToReadableStream, pipeToNodeWritable,
+// @ts-ignore
+ } from 'react-dom/unstable-fizz';
+import { renderToString } from 'react-dom/server';
+import ssrPrepass from 'react-ssr-prepass';
+import { StaticRouter } from 'react-router-dom';
+import { HydrationContext } from './foundation/Hydration/HydrationContext.server';
+import { generateWireSyntaxFromRenderedHtml } from './foundation/Hydration/wire.server';
+import { HelmetProvider } from 'react-helmet-async';
+import { Html } from './foundation/Hydration/Html';
+import { HydrationWriter } from './foundation/Hydration/writer.server';
+import { ServerComponentResponse } from './foundation/Hydration/ServerComponentResponse.server';
+import { dehydrate } from 'react-query/hydration';
+/**
+ * react-dom/unstable-fizz provides different entrypoints based on runtime:
+ * - `renderToReadableStream` for "browser" (aka worker)
+ * - `pipeToNodeWritable` for node.js
+ */
+const isWorker = Boolean(renderToReadableStream);
+/**
+ * If a query is taking too long, or something else went wrong,
+ * send back a response containing the Suspense fallback and rely
+ * on the client to hydrate and build the React tree.
+ */
+const STREAM_ABORT_TIMEOUT_MS = 3000;
+const renderHydrogen = (App, hook) => {
+    /**
+     * The render function is responsible for turning the provided `App` into an HTML string,
+     * and returning any initial state that needs to be hydrated into the client version of the app.
+     * NOTE: This is currently only used for SEO bots or Worker runtime (where Stream is not yet supported).
+     */
+    const render = async function (url, { context, request, isReactHydrationRequest }) {
+        var _a, _b;
+        const state = isReactHydrationRequest
+            ? JSON.parse((_b = (_a = url.searchParams) === null || _a === void 0 ? void 0 : _a.get('state')) !== null && _b !== void 0 ? _b : '{}')
+            : { page: url.pathname };
+        const { ReactApp, helmetContext, componentResponse } = buildReactApp({
+            App,
+            state,
+            context,
+            request,
+        });
+        const body = await renderApp(ReactApp, state, isReactHydrationRequest);
+        if (componentResponse.customBody) {
+            return { body: await componentResponse.customBody, url, componentResponse };
+        }
+        let params = { url, ...extractHeadElements(helmetContext) };
+        /**
+         * We allow the developer to "hook" into this process and mutate the params.
+         */
+        if (hook) {
+            params = hook(params) || params;
+        }
+        return { body, componentResponse, ...params };
+    };
+    /**
+     * Stream a response to the client. NOTE: This omits custom `<head>`
+     * information, so this method should not be used by crawlers.
+     */
+    const stream = function (url, { context, request, response, template }) {
+        const state = { page: url.pathname };
+        const { ReactApp, componentResponse } = buildReactApp({
+            App,
+            state,
+            context,
+            request,
+        });
+        response.socket.on('error', (error) => {
+            console.error('Fatal', error);
+        });
+        let didError = false;
+        const head = template.match(/<head>(.+?)<\/head>/s)[1];
+        const { startWriting, abort } = pipeToNodeWritable(React.createElement(Html, { head: head },
+            React.createElement(ReactApp, { ...state })), response, {
+            onReadyToStream() {
+                if (!componentResponse.canStream())
+                    return;
+                response.statusCode = didError ? 500 : 200;
+                response.setHeader('Content-type', 'text/html');
+                response.write('<!DOCTYPE html>');
+                startWriting();
+            },
+            onCompleteAll() {
+                var _a;
+                if (componentResponse.canStream())
+                    return;
+                response.statusCode =
+                    (_a = componentResponse.status) !== null && _a !== void 0 ? _a : (didError ? 500 : 200);
+                componentResponse.headers.forEach((value, header) => {
+                    response.setHeader(header, value);
+                });
+                if (componentResponse.customBody) {
+                    if (componentResponse.customBody instanceof Promise) {
+                        componentResponse.customBody.then((body) => response.end(body));
+                    }
+                    else {
+                        response.end(componentResponse.customBody);
+                    }
+                }
+                else {
+                    response.setHeader('Content-type', 'text/html');
+                    response.write('<!DOCTYPE html>');
+                    startWriting();
+                }
+            },
+            onError(error) {
+                didError = true;
+                console.error(error);
+            },
+        });
+        setTimeout(abort, STREAM_ABORT_TIMEOUT_MS);
+    };
+    /**
+     * Stream a hydration response to the client.
+     */
+    const hydrate = function (url, { context, request, response }) {
+        const state = JSON.parse(url.searchParams.get('state') || '{}');
+        const { ReactApp } = buildReactApp({ App, state, context, request });
+        response.socket.on('error', (error) => {
+            console.error('Fatal', error);
+        });
+        let didError = false;
+        const writer = new HydrationWriter();
+        const { startWriting, abort } = pipeToNodeWritable(React.createElement(HydrationContext.Provider, { value: true },
+            React.createElement(ReactApp, { ...state })), writer, {
+            /**
+             * When hydrating, we have to wait until `onCompleteAll` to avoid having
+             * `template` and `script` tags inserted and rendered as part of the hydration response.
+             */
+            onCompleteAll() {
+                // Tell React to start writing to the writer
+                startWriting();
+                // Tell React that the writer is ready to drain, which sometimes results in a last "chunk" being written.
+                writer.drain();
+                response.statusCode = didError ? 500 : 200;
+                response.end(generateWireSyntaxFromRenderedHtml(writer.toString()));
+            },
+            onError(error) {
+                didError = true;
+                console.error(error);
+            },
+        });
+        setTimeout(abort, STREAM_ABORT_TIMEOUT_MS);
+    };
+    return {
+        render,
+        stream,
+        hydrate,
+    };
+};
+function buildReactApp({ App, state, context, request, }) {
+    const helmetContext = {};
+    const componentResponse = new ServerComponentResponse();
+    const ReactApp = (props) => (React.createElement(StaticRouter, { location: state.page, context: context },
+        React.createElement(HelmetProvider, { context: helmetContext },
+            React.createElement(App, { request: request, response: componentResponse, ...props }))));
+    return { helmetContext, ReactApp, componentResponse };
+}
+function extractHeadElements(helmetContext) {
+    const { helmet } = helmetContext;
+    return {
+        base: helmet.base.toString(),
+        bodyAttributes: helmet.bodyAttributes.toString(),
+        htmlAttributes: helmet.htmlAttributes.toString(),
+        link: helmet.link.toString(),
+        meta: helmet.meta.toString(),
+        noscript: helmet.noscript.toString(),
+        script: helmet.script.toString(),
+        style: helmet.style.toString(),
+        title: helmet.title.toString(),
+    };
+}
+function supportsReadableStream() {
+    try {
+        new ReadableStream();
+        return true;
+    }
+    catch (_e) {
+        return false;
+    }
+}
+async function renderApp(ReactApp, state, isReactHydrationRequest) {
+    /**
+     * Temporary workaround until all Worker runtimes support ReadableStream
+     */
+    if (isWorker && !supportsReadableStream()) {
+        return renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest);
+    }
+    const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
+        React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
+    return renderAppFromBufferedStream(app, isReactHydrationRequest);
+}
+function renderAppFromBufferedStream(app, isReactHydrationRequest) {
+    return new Promise((resolve, reject) => {
+        if (isWorker) {
+            let isComplete = false;
+            const stream = renderToReadableStream(app, {
+                onCompleteAll() {
+                    isComplete = true;
+                },
+                onError(error) {
+                    console.error(error);
+                    reject(error);
+                },
+            });
+            /**
+             * We want to wait until `onCompleteAll` has been called before fetching the
+             * stream body. Otherwise, React 18's streaming JS script/template tags
+             * will be included in the output and cause issues when loading
+             * the Client Components in the browser.
+             */
+            async function checkForResults() {
+                if (!isComplete) {
+                    setTimeout(checkForResults, 100);
+                    return;
+                }
+                /**
+                 * Use the stream to build a `Response`, and fetch the body from the response
+                 * to resolve and be processed by the rest of the pipeline.
+                 */
+                const res = new Response(stream);
+                if (isReactHydrationRequest) {
+                    resolve(generateWireSyntaxFromRenderedHtml(await res.text()));
+                }
+                else {
+                    resolve(await res.text());
+                }
+            }
+            checkForResults();
+        }
+        else {
+            const writer = new HydrationWriter();
+            const { startWriting } = pipeToNodeWritable(app, writer, {
+                /**
+                 * When hydrating, we have to wait until `onCompleteAll` to avoid having
+                 * `template` and `script` tags inserted and rendered as part of the hydration response.
+                 */
+                onCompleteAll() {
+                    // Tell React to start writing to the writer
+                    startWriting();
+                    // Tell React that the writer is ready to drain, which sometimes results in a last "chunk" being written.
+                    writer.drain();
+                    if (isReactHydrationRequest) {
+                        resolve(generateWireSyntaxFromRenderedHtml(writer.toString()));
+                    }
+                    else {
+                        resolve(writer.toString());
+                    }
+                },
+                onError(error) {
+                    console.error(error);
+                    reject(error);
+                },
+            });
+        }
+    });
+}
+/**
+ * If we can't render a "blocking" response by buffering React's SSR
+ * streaming functionality (likely due to lack of support for a primitive
+ * in the runtime), we fall back to using `renderToString`. By default,
+ * `renderToString` stops at Suspense boundaries and will not
+ * keep trying them until they resolve. This means have to
+ * use ssr-prepass to fetch all the queries once, store
+ * the results in a context object, and re-render.
+ */
+async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest) {
+    const hydrationContext = {};
+    const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
+        React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }))) : (React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }));
+    await ssrPrepass(app);
+    /**
+     * Dehydrate all the queries made during the prepass above and store
+     * them in the context object to be used for the next render pass.
+     * This prevents rendering the Suspense fallback in `renderToString`.
+     */
+    if (hydrationContext.queryClient) {
+        hydrationContext.dehydratedState = dehydrate(hydrationContext.queryClient);
+    }
+    const body = renderToString(app);
+    return isReactHydrationRequest
+        ? generateWireSyntaxFromRenderedHtml(body)
+        : body;
+}
+export default renderHydrogen;

package/dist/esnext/foundation/ClientMarker/ClientMarker.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+interface Props {
+    name: string;
+    id: string;
+    props: any;
+    component: FunctionComponent;
+    named: boolean;
+}
+export declare function ClientMarker({ name, id, props: allProps, component: Component, named, }: Props): JSX.Element;
+export {};

package/dist/esnext/foundation/ClientMarker/ClientMarker.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { HydrationContext } from '../Hydration/HydrationContext.server';
+import { renderReactProps } from '../Hydration/react-utils';
+export function ClientMarker({ name, id, props: allProps, component: Component, named, }) {
+    const isHydrating = useContext(HydrationContext);
+    if (!isHydrating)
+        return React.createElement(Component, { ...allProps });
+    let { children, ...props } = allProps;
+    /**
+     * Convert props that happen to be React components to actual
+     * objects representing DOM elements. This is because we
+     * serialize props to JSON below, and React element Functions
+     * cannot be serialized.
+     */
+    props = renderReactProps(props);
+    /**
+     * Components ending in *Provider are special components to
+     * Hydrogen's RSC implementation. They are rendered during
+     * the hydration process in the state tree even though they
+     * don't output any DOM. This is key to supporting crossing
+     * the server/client context boundary.
+     */
+    const shouldRenderDuringHydration = name.endsWith('Provider');
+    return (React.createElement("span", { "data-client-component": name, "data-id": id, "data-props": JSON.stringify(props), "data-named": named }, shouldRenderDuringHydration ? (React.createElement(Component, { ...allProps }, children)) : (children)));
+}

package/dist/esnext/foundation/ClientMarker/index.d.ts

@@ -0,0 +1 @@
+export * from './ClientMarker';

package/dist/esnext/foundation/ClientMarker/index.js

@@ -0,0 +1 @@
+export * from './ClientMarker';

package/dist/esnext/foundation/Hydration/Cache.client.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+/**
+ * Much of this is borrowed from React's demo implementation:
+ * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js
+ *
+ * Note that we'd want to add some other constraints and controls around caching here.
+ */
+export declare function useServerResponse(state: any): any;
+export declare function convertHydrationResponseToReactComponents(response: string): Promise<ReactElement>;

package/dist/esnext/foundation/Hydration/Cache.client.js

@@ -0,0 +1,131 @@
+import { createElement, Fragment } from 'react';
+import { wrapPromise } from '../../utilities';
+const cache = new Map();
+/**
+ * Much of this is borrowed from React's demo implementation:
+ * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js
+ *
+ * Note that we'd want to add some other constraints and controls around caching here.
+ */
+export function useServerResponse(state) {
+    const key = JSON.stringify(state);
+    let response = cache.get(key);
+    if (response) {
+        return response;
+    }
+    response = createFromFetch(fetch('/react?state=' + encodeURIComponent(key)));
+    cache.set(key, response);
+    return response;
+}
+/**
+ * Similar to the RSC demo, `createFromFetch` wraps around a fetch call and throws
+ * promise events to the Suspense boundary until the content has loaded.
+ */
+function createFromFetch(fetchPromise) {
+    return wrapPromise(fetchPromise
+        .then((response) => {
+        if (!response.ok) {
+            throw new Error(`Hydration request failed: ${response.statusText}`);
+        }
+        return response.text();
+    })
+        .then((payload) => {
+        return convertHydrationResponseToReactComponents(payload);
+    })
+        .catch((e) => {
+        console.error(e);
+    }));
+}
+export async function convertHydrationResponseToReactComponents(response) {
+    const manifest = createManifestFromWirePayload(response);
+    /**
+     * Eager-load all the modules referenced in the manifest. Otherwise,
+     * Hydration errors crop up and show in the console.
+     */
+    const modules = await eagerLoadModules(manifest);
+    function isReactTuple(item) {
+        return item instanceof Array && item.length === 4 && item[0] === '$';
+    }
+    function isReactTupleOrString(item) {
+        return typeof item === 'string' || isReactTuple(item);
+    }
+    function isReactTupleOrArrayOfTuples(item) {
+        return isReactTupleOrString(item) || isReactTupleOrString(item[0]);
+    }
+    function wireSyntaxToReactElement(item, key) {
+        if (typeof item === 'string')
+            return item;
+        if (typeof item !== 'object')
+            return null;
+        // Assume it's an array of tuples, defined in the component as a fragment.
+        if (!isReactTuple(item)) {
+            return createElement(Fragment, {
+                children: item.map(wireSyntaxToReactElement),
+            });
+        }
+        let [, type, , props] = item;
+        const allProps = { ...props };
+        /**
+         * Convert all props (including children) that may be serialized as tuples
+         * or arrays of tuples into React elements.
+         */
+        Object.entries(allProps).map(([key, prop]) => {
+            if (prop instanceof Array && isReactTupleOrArrayOfTuples(prop)) {
+                /**
+                 * - Array of children tuples
+                 * - ...or a list of children, combo of strings and tuples, produced by dangerouslySetInnerHtml
+                 */
+                if (prop.every(isReactTupleOrString)) {
+                    allProps[key] = prop.map(wireSyntaxToReactElement);
+                    /**
+                     * - Single tuple
+                     */
+                }
+                else {
+                    allProps[key] = wireSyntaxToReactElement(prop);
+                }
+            }
+        });
+        /**
+         * If the type is a module and not a React Symbol, reference the component
+         * listed in the manifest as `M<number>` and lazy-load it.
+         * `lazy()` throws Suspense promises until the component has loaded.
+         */
+        if (type.startsWith('@')) {
+            const module = manifest[type.replace('@', 'M')];
+            const mod = modules[type.replace('@', 'M')];
+            type = module.named ? mod[module.name] : mod.default;
+        }
+        return createElement(type, { ...allProps, key });
+    }
+    /**
+     * The manifest is listed as `J0` for some reason. This is how React does it.
+     * Maybe this is to support for additional model trees like `J1`?
+     *
+     * Regardless, this is guaranteed to exist from our server response.
+     */
+    return wireSyntaxToReactElement(manifest.J0);
+}
+function createManifestFromWirePayload(payload) {
+    return payload.split('\n').reduce((memo, row) => {
+        const [key, ...values] = row.split(':');
+        memo[key] = JSON.parse(values.join(':'));
+        return memo;
+    }, {});
+}
+async function eagerLoadModules(manifest) {
+    const modules = await Promise.all(Object.entries(manifest)
+        .map(([key, module]) => {
+        if (!key.startsWith('M'))
+            return;
+        return import(/* @vite-ignore */ module.id);
+    })
+        .filter(Boolean));
+    return Object.keys(manifest)
+        .filter((key) => key.startsWith('M'))
+        .map((key, idx) => [key, modules[idx]])
+        .reduce((memo, item) => {
+        memo[item[0]] = item[1];
+        return memo;
+    }, {});
+}

package/dist/esnext/foundation/Hydration/ClientComponents.server.d.ts

@@ -0,0 +1,13 @@
+export interface ClientModule {
+    name: string;
+    id: string;
+}
+/**
+ * Track the client components discovered while rendering SSR output to wire syntax.
+ */
+export declare class ClientComponents {
+    modules: string[];
+    add(module: ClientModule): number;
+    indexOf(module: ClientModule): number;
+    all(): any[];
+}

package/dist/esnext/foundation/Hydration/ClientComponents.server.js

@@ -0,0 +1,18 @@
+/**
+ * Track the client components discovered while rendering SSR output to wire syntax.
+ */
+export class ClientComponents {
+    constructor() {
+        this.modules = [];
+    }
+    add(module) {
+        this.modules.push(JSON.stringify(module));
+        return this.modules.length;
+    }
+    indexOf(module) {
+        return this.modules.indexOf(JSON.stringify(module)) + 1;
+    }
+    all() {
+        return this.modules.map((module) => JSON.parse(module));
+    }
+}

package/dist/esnext/foundation/Hydration/Html.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function Html({ children, head }: {
+    children: ReactNode;
+    head: string;
+}): JSX.Element;

package/dist/esnext/foundation/Hydration/Html.js

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+import React from 'react';
+export function Html({ children, head }) {
+    return (React.createElement("html", { lang: "en" },
+        React.createElement("head", { dangerouslySetInnerHTML: { __html: head } }),
+        React.createElement("body", null,
+            React.createElement("div", { id: "root" }, children),
+            import.meta.env.DEV && (React.createElement("script", { type: "module", src: "/src/entry-client.jsx" })))));
+}

package/dist/esnext/foundation/Hydration/HydrationContext.server.d.ts

@@ -0,0 +1 @@
+export declare const HydrationContext: import("react").Context<boolean>;

package/dist/esnext/foundation/Hydration/HydrationContext.server.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const HydrationContext = createContext(false);

package/dist/esnext/foundation/Hydration/ServerComponentRequest.server.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This augments the `Request` object from the Fetch API:
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
+ *
+ * - Adds a `cookies` map for easy access
+ * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
+ */
+export declare class ServerComponentRequest extends Request {
+    cookies: Map<string, string>;
+    constructor(input: any);
+    constructor(input: RequestInfo, init?: RequestInit);
+    private parseCookies;
+}

package/dist/esnext/foundation/Hydration/ServerComponentRequest.server.js

@@ -0,0 +1,39 @@
+/**
+ * This augments the `Request` object from the Fetch API:
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
+ *
+ * - Adds a `cookies` map for easy access
+ * - Adds a static constructor to convert a Node.js `IncomingMessage` to a Request.
+ */
+export class ServerComponentRequest extends Request {
+    constructor(input, init) {
+        if (input instanceof Request) {
+            super(input, init);
+        }
+        else {
+            super(getUrlFromNodeRequest(input), {
+                headers: new Headers(input.headers),
+                method: input.method,
+            });
+        }
+        this.cookies = this.parseCookies();
+    }
+    parseCookies() {
+        const cookieString = this.headers.get('cookie') || '';
+        return new Map(cookieString
+            .split(';')
+            .map((chunk) => chunk.trim().split('=')));
+    }
+}
+/**
+ * @see https://github.com/frandiox/vitedge/blob/17f3cd943e86d7c0c71a862985ddd6caa2899425/src/node/utils.js#L19-L24
+ *
+ * Note: Request can sometimes be an instance of Express request, where `originalUrl` is the true source of what the
+ * URL pathname is. We want to use that if it's present, so we union type this to `any`.
+ */
+function getUrlFromNodeRequest(request) {
+    var _a;
+    // TODO: Find out how to determine https from `request` object without forwarded proto
+    const secure = request.headers['x-forwarded-proto'] === 'https';
+    return new URL(`${secure ? 'https' : 'http'}://${request.headers.host + ((_a = request.originalUrl) !== null && _a !== void 0 ? _a : request.url)}`).toString();
+}

package/dist/esnext/foundation/Hydration/ServerComponentResponse.server.d.ts

@@ -0,0 +1,18 @@
+export declare class ServerComponentResponse extends Response {
+    private wait;
+    /**
+     * Allow custom body to be a string or a Promise.
+     */
+    customBody: string | Promise<string>;
+    /**
+     * Buffer the current response until all queries have resolved,
+     * and prevent it from streaming back early.
+     */
+    doNotStream(): void;
+    canStream(): boolean;
+    /**
+     * Send the response from a Server Component. Renders React components to string,
+     * and returns `null` to make React happy.
+     */
+    send(body: any): null;
+}