import { concatArrayBuffers, readableStreamToArray, readableStreamToArrayBuffer, readableStreamToBlob, readableStreamToText, serve, } from "bun"; import { heapStats } from "bun:jsc"; import { describe, expect, it } from "bun:test"; import { renderToReadableStream as renderToReadableStreamBrowser } from "react-dom/server.browser"; import { gc } from "./gc"; import { renderToReadableStream as renderToReadableStreamBun } from "./react-dom-server.bun"; import React from "react"; Object.defineProperty(renderToReadableStreamBrowser, "name", { value: "server.browser", }); Object.defineProperty(renderToReadableStreamBun, "name", { value: "server.bun", }); var port = 8908; const fixtures = [ // Needs at least six variations // - < 8 chars, latin1 // - 8+ chars, latin1 // - 16+ chars, latin1 // - < 8 chars, utf16 // - 8+ chars, utf16 // - 16+ chars, utf16 ["b", b], ["Hello World!", Hello World!], ["", ], ["πŸ˜‹", πŸ˜‹], ["πŸ˜‹", πŸ˜‹], ["Hello World! πŸ˜‹", Hello World! πŸ˜‹], [ "Hello World!πŸ˜‹", <> Hello World!πŸ˜‹ , ], [ "πŸ˜‹Hello World!", <> πŸ˜‹Hello World! , ], ["πŸ˜‹", <>πŸ˜‹], ["lπŸ˜‹l", <>lπŸ˜‹l], ["loπŸ˜‹", <>loπŸ˜‹], ["πŸ˜‹lo", <>πŸ˜‹lo], [ "πŸ˜‹Hello World!", <> πŸ˜‹ Hello World! , ], [ "πŸ˜‹πŸ˜‹πŸ˜‹πŸ˜‹Hello World!", <> πŸ˜‹πŸ˜‹πŸ˜‹πŸ˜‹ Hello World! , ], ["HelloπŸ˜‹πŸ˜‹πŸ˜‹πŸ˜‹World!", HelloπŸ˜‹πŸ˜‹πŸ˜‹πŸ˜‹World!], [ "Hello World!πŸ˜‹πŸ˜‹πŸ˜‹πŸ˜‹", <> Hello World! πŸ˜‹πŸ˜‹πŸ˜‹πŸ˜‹ , ], [ "πŸ˜‹LπŸ˜‹lπŸ˜‹LπŸ˜‹Alternating latin1 & utf16", <> πŸ˜‹LπŸ˜‹lπŸ˜‹LπŸ˜‹Alternating latin1 & utf16 , ], ["HelloπŸ˜‹LπŸ˜‹lπŸ˜‹LπŸ˜‹World!", HelloπŸ˜‹LπŸ˜‹lπŸ˜‹LπŸ˜‹World!], [ "Hello World!πŸ˜‹LπŸ˜‹lπŸ˜‹LπŸ˜‹", <> Hello World! πŸ˜‹LπŸ˜‹lπŸ˜‹LπŸ˜‹ , ], ]; describe("React", () => { it("React.createContext works", () => { expect(typeof React.createContext).toBe("function"); const pleaseDontThrow = React.createContext({ foo: true }); expect(pleaseDontThrow.$$typeof.description).toBe("react.context"); const pleaseDontThrow2 = React.default.createContext({ foo: true }); expect(pleaseDontThrow2.$$typeof.description).toBe("react.context"); }); }); describe("ReactDOM", () => { for (let renderToReadableStream of [ renderToReadableStreamBun, renderToReadableStreamBrowser, ]) { for (let [inputString, reactElement] of fixtures) { describe(`${renderToReadableStream.name}(${inputString})`, () => { it("Response.text()", async () => { const stream = await renderToReadableStream(reactElement); gc(); const response = new Response(stream); gc(); try { const text = await response.text(); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); } catch (e) { console.log(e.stack); throw e; } }); it("Response.arrayBuffer()", async () => { const stream = await renderToReadableStream(reactElement); gc(); const response = new Response(stream); gc(); const text = new TextDecoder().decode(await response.arrayBuffer()); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); }); it("Response.blob()", async () => { const stream = await renderToReadableStream(reactElement); gc(); const response = new Response(stream); gc(); const text = await (await response.blob()).text(); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); }); it("readableStreamToText(stream)", async () => { const stream = await renderToReadableStream(reactElement); gc(); const text = await readableStreamToText(stream); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); }); it("readableStreamToBlob(stream)", async () => { try { const stream = await renderToReadableStream(reactElement); gc(); const blob = await readableStreamToBlob(stream); const text = await blob.text(); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); } catch (e) { console.error(e.message); console.error(e.stack); throw e; } }); it("readableStreamToArray(stream)", async () => { const stream = await renderToReadableStream(reactElement); gc(); const array = await readableStreamToArray(stream); const text = renderToReadableStream === renderToReadableStreamBun ? array.join("") : new TextDecoder().decode(concatArrayBuffers(array)); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); }); it("readableStreamToArrayBuffer(stream)", async () => { const stream = await renderToReadableStream(reactElement); gc(); const arrayBuffer = await readableStreamToArrayBuffer(stream); const text = new TextDecoder().decode(arrayBuffer); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); }); it("for await (chunk of stream)", async () => { const stream = await renderToReadableStream(reactElement); gc(); const chunks = []; for await (let chunk of stream) { chunks.push(chunk); } const text = await new Response(chunks).text(); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); }); it("for await (chunk of stream) (arrayBuffer)", async () => { const stream = await renderToReadableStream(reactElement); gc(); const chunks = []; for await (let chunk of stream) { chunks.push(chunk); } const text = new TextDecoder().decode( await new Response(chunks).arrayBuffer() ); gc(); expect(text.replaceAll("", "")).toBe(inputString); gc(); }); }); } } // for (let renderToReadableStream of [ // renderToReadableStreamBun, // // renderToReadableStreamBrowser, // ]) { // // there is an event loop bug that causes deadlocks // // the bug is with `fetch`, not with the HTTP server // for (let [inputString, reactElement] of fixtures) { // describe(`${renderToReadableStream.name}(${inputString})`, () => { // it("http server, 1 request", async () => { // var server; // try { // server = serve({ // port: port++, // async fetch(req) { // return new Response(await renderToReadableStream(reactElement)); // }, // }); // const resp = await fetch("http://localhost:" + server.port + "/"); // expect((await resp.text()).replaceAll("", "")).toBe( // inputString // ); // gc(); // } catch (e) { // throw e; // } finally { // server?.stop(); // gc(); // } // // expect( // // heapStats().objectTypeCounts.ReadableHTTPResponseSinkController ?? 0 // // ).toBe(0); // }); // // const count = 4; // // it(`http server, ${count} requests`, async () => { // // var server; // // try { // // server = serve({ // // port: port++, // // async fetch(req) { // // return new Response(await renderToReadableStream(reactElement)); // // }, // // }); // // var total = 0; // // gc(); // // while (total++ < count) { // // var attempt = total; // // const response = await fetch( // // "http://localhost:" + server.port + "/" // // ); // // gc(); // // const result = await response.text(); // // try { // // expect(result.replaceAll("", "")).toBe(inputString); // // } catch (e) { // // e.message += "\nAttempt: " + attempt; // // throw e; // // } // // gc(); // // } // // } catch (e) { // // throw e; // // } finally { // // server.stop(); // // } // // }); // }); // } // } });