diff --git a/integration/bug-report-test.ts b/integration/bug-report-test.ts index 8be63c7fc2..ab2b70abf5 100644 --- a/integration/bug-report-test.ts +++ b/integration/bug-report-test.ts @@ -1,127 +1,52 @@ -import { test, expect } from "@playwright/test"; - -import { PlaywrightFixture } from "./helpers/playwright-fixture.js"; -import type { Fixture, AppFixture } from "./helpers/create-fixture.js"; -import { - createAppFixture, - createFixture, - js, -} from "./helpers/create-fixture.js"; - -let fixture: Fixture; -let appFixture: AppFixture; - -//////////////////////////////////////////////////////////////////////////////// -// 👋 Hola! I'm here to help you write a great bug report pull request. -// -// You don't need to fix the bug, this is just to report one. -// -// The pull request you are submitting is supposed to fail when created, to let -// the team see the erroneous behavior, and understand what's going wrong. -// -// If you happen to have a fix as well, it will have to be applied in a subsequent -// commit to this pull request, and your now-succeeding test will have to be moved -// to the appropriate file. -// -// First, make sure to install dependencies and build React Router. From the root of -// the project, run this: -// -// ``` -// pnpm install && pnpm build -// ``` -// -// If you have never installed playwright on your system before, you may also need -// to install a browser engine: -// -// ``` -// pnpm exec playwright install chromium -// ``` -// -// Now try running this test: -// -// ``` -// pnpm test:integration bug-report --project chromium -// ``` -// -// You can add `--watch` to the end to have it re-run on file changes: -// -// ``` -// pnpm test:integration bug-report --project chromium --watch -// ``` -//////////////////////////////////////////////////////////////////////////////// - -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({ - //////////////////////////////////////////////////////////////////////////// - // 💿 Next, add files to this object, just like files in a real app, - // `createFixture` will make an app and run your tests against it. - //////////////////////////////////////////////////////////////////////////// - files: { - "app/routes/_index.tsx": js` - import { useLoaderData, Link } from "react-router"; - - export function loader() { - return "pizza"; - } - - export default function Index() { - let data = useLoaderData(); - return ( -
- {data} - Other Route -
- ) - } +import { expect, test } from "@playwright/test"; +import getPort from "get-port"; + +import { build, createProject, dev } from "./helpers/vite.js"; + +test("splitRouteModules enforce accepts JSX exports in Vite dev", async ({ + page, +}) => { + let port = await getPort(); + let cwd = await createProject( + { + "react-router.config.ts": ` + import type { Config } from "@react-router/dev/config"; + + export default { + splitRouteModules: "enforce", + } satisfies Config; + `, + "vite.config.ts": ` + import { reactRouter } from "@react-router/dev/vite"; + import react from "@vitejs/plugin-react"; + import { defineConfig } from "vite"; + + export default defineConfig({ + plugins: [reactRouter(), react()], + server: { port: ${port}, strictPort: true }, + }); `, + "app/routes/_index.tsx": ` + export function HydrateFallback() { + return

Loading...

; + } - "app/routes/burgers.tsx": js` export default function Index() { - return
cheeseburger
; + return

Ready

; } `, }, - }); - - // This creates an interactive app using playwright. - appFixture = await createAppFixture(fixture); -}); - -test.afterAll(() => { - appFixture.close(); + "rsc-vite-framework", + ); + + let buildResult = build({ cwd }); + expect(buildResult.status).toBe(0); + + let stop = await dev({ cwd, port }); + try { + await page.goto(`http://localhost:${port}`); + await expect(page.getByRole("heading", { name: "Ready" })).toBeVisible(); + } finally { + stop(); + } }); - -//////////////////////////////////////////////////////////////////////////////// -// 💿 Almost done, now write your failing test case(s) down here Make sure to -// add a good description for what you expect React Router to do 👇🏽 -//////////////////////////////////////////////////////////////////////////////// - -test("[description of what you expect it to do]", async ({ page }) => { - let app = new PlaywrightFixture(appFixture, page); - // You can test any request your app might get using `fixture`. - let response = await fixture.requestDocument("/"); - expect(await response.text()).toMatch("pizza"); - - // If you need to test interactivity use the `app` - await app.goto("/"); - await app.clickLink("/burgers"); - await page.waitForSelector("text=cheeseburger"); - - // If you're not sure what's going on, you can "poke" the app, it'll - // automatically open up in your browser for 20 seconds, so be quick! - // await app.poke(20); - - // Go check out the other tests to see what else you can do. -}); - -//////////////////////////////////////////////////////////////////////////////// -// 💿 Finally, push your changes to your fork of React Router -// and open a pull request! -//////////////////////////////////////////////////////////////////////////////// diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts index ac89e62bc9..d038ed864e 100644 --- a/packages/react-router-dev/vite/plugin.ts +++ b/packages/react-router-dev/vite/plugin.ts @@ -1079,16 +1079,11 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => { ctx, ); - let enforceSplitRouteModules = - ctx.reactRouterConfig.splitRouteModules === "enforce"; - for (let [key, route] of Object.entries(ctx.reactRouterConfig.routes)) { - let routeFile = route.file; let sourceExports = routeManifestExports[key]; let hasClientAction = sourceExports.includes("clientAction"); let hasClientLoader = sourceExports.includes("clientLoader"); let hasClientMiddleware = sourceExports.includes("clientMiddleware"); - let hasHydrateFallback = sourceExports.includes("HydrateFallback"); let routeModulePath = combineURLs( ctx.publicPath, `${resolveFileUrl( @@ -1097,31 +1092,6 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => { )}`, ); - if (enforceSplitRouteModules) { - let { hasRouteChunkByExportName } = await detectRouteChunksIfEnabled( - cache, - ctx, - routeFile, - { routeFile, viteChildCompiler }, - ); - - validateRouteChunks({ - ctx, - id: route.file, - valid: { - clientAction: - !hasClientAction || hasRouteChunkByExportName.clientAction, - clientLoader: - !hasClientLoader || hasRouteChunkByExportName.clientLoader, - clientMiddleware: - !hasClientMiddleware || - hasRouteChunkByExportName.clientMiddleware, - HydrateFallback: - !hasHydrateFallback || hasRouteChunkByExportName.HydrateFallback, - }, - }); - } - routes[key] = { id: route.id, parentId: route.parentId,