diff --git a/.changeset/turbo-v3.md b/.changeset/turbo-v3.md new file mode 100644 index 0000000000..8a57150968 --- /dev/null +++ b/.changeset/turbo-v3.md @@ -0,0 +1,6 @@ +--- +"integration": minor +"react-router": minor +--- + +feat: turbo-stream v3 diff --git a/integration/defer-test.ts b/integration/defer-test.ts index b325cbe7ba..d7cbf7b7b4 100644 --- a/integration/defer-test.ts +++ b/integration/defer-test.ts @@ -32,21 +32,22 @@ declare global { }; } -test.describe("non-aborted", () => { - let fixture: Fixture; - let appFixture: AppFixture; - - test.beforeEach(async ({ context }) => { - await context.route(/.data/, async (route) => { - await new Promise((resolve) => setTimeout(resolve, 50)); - route.continue(); +test.describe("turbo-stream-v2", () => { + test.describe("non-aborted", () => { + let fixture: Fixture; + let appFixture: AppFixture; + + test.beforeEach(async ({ context }) => { + await context.route(/.data/, async (route) => { + await new Promise((resolve) => setTimeout(resolve, 50)); + route.continue(); + }); }); - }); - test.beforeAll(async () => { - fixture = await createFixture({ - files: { - "app/components/counter.tsx": js` + test.beforeAll(async () => { + fixture = await createFixture({ + files: { + "app/components/counter.tsx": js` import { useState } from "react"; export default function Counter({ id }) { @@ -59,7 +60,7 @@ test.describe("non-aborted", () => { ) } `, - "app/components/interactive.tsx": js` + "app/components/interactive.tsx": js` import { useEffect, useState } from "react"; export default function Interactive() { @@ -74,7 +75,7 @@ test.describe("non-aborted", () => { ) : null; } `, - "app/root.tsx": js` + "app/root.tsx": js` import { Links, Meta, Outlet, Scripts, useLoaderData } from "react-router"; import Counter from "~/components/counter"; import Interactive from "~/components/interactive"; @@ -114,7 +115,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/_index.tsx": js` + "app/routes/_index.tsx": js` import { Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -144,7 +145,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-noscript-resolved.tsx": js` + "app/routes/deferred-noscript-resolved.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -178,7 +179,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-noscript-unresolved.tsx": js` + "app/routes/deferred-noscript-unresolved.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -216,7 +217,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-script-resolved.tsx": js` + "app/routes/deferred-script-resolved.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -251,7 +252,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-script-unresolved.tsx": js` + "app/routes/deferred-script-unresolved.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -294,7 +295,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-script-rejected.tsx": js` + "app/routes/deferred-script-rejected.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -334,7 +335,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-script-unrejected.tsx": js` + "app/routes/deferred-script-unrejected.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -378,7 +379,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-script-rejected-no-error-element.tsx": js` + "app/routes/deferred-script-rejected-no-error-element.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -421,7 +422,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-script-unrejected-no-error-element.tsx": js` + "app/routes/deferred-script-unrejected-no-error-element.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -468,7 +469,7 @@ test.describe("non-aborted", () => { } `, - "app/routes/deferred-manual-resolve.tsx": js` + "app/routes/deferred-manual-resolve.tsx": js` import { Suspense } from "react"; import { Await, Link, useLoaderData } from "react-router"; import Counter from "~/components/counter"; @@ -534,401 +535,411 @@ test.describe("non-aborted", () => { ); } `, - }, + }, + }); + + // This creates an interactive app using playwright. + appFixture = await createAppFixture(fixture); + originalConsoleError = console.error; + console.error = () => {}; }); - // This creates an interactive app using playwright. - appFixture = await createAppFixture(fixture); - originalConsoleError = console.error; - console.error = () => {}; - }); + test.afterAll(() => { + console.error = originalConsoleError; + appFixture.close(); + }); - test.afterAll(() => { - console.error = originalConsoleError; - appFixture.close(); - }); + function counterHtml(id: string, val: number) { + return `
${val}
`; + } - function counterHtml(id: string, val: number) { - return `${val}
`; - } - - test("works with critical JSON like data", async ({ page }) => { - let response = await fixture.requestDocument("/"); - let html = await response.text(); - let criticalHTML = html.slice(0, html.indexOf("