react-router/integration/vite-extra-server-environment-test.ts at v7 · remix-run/react-router · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import { test, expect } from "@playwright/test";
import glob from "glob";

import { build, createProject, reactRouterConfig } from "./helpers/vite.js";

const js = String.raw;

test("ignores external server environments without skipping React Router build hooks", async () => {
  let cwd = await createProject(
    {
      "react-router.config.ts": reactRouterConfig({
        future: { v8_viteEnvironmentApi: true },
      }),
      "vite.config.ts": js`
        import { defineConfig } from "vite";
        import { reactRouter } from "@react-router/dev/vite";

        function extraServerEnvironment() {
          return {
            name: "extra-server-environment",
            config() {
              return {
                environments: {
                  externalServerEnv: {
                    consumer: "server",
                    build: {
                      rollupOptions: { input: "./external-server-env.ts" },
                    },
                  },
                },
                builder: {
                  sharedConfigBuild: true,
                  sharedPlugins: true,
                  async buildApp(builder) {
                    // External build orchestrators can introduce additional
                    // server environments that React Router should ignore.
                    await builder.build(builder.environments.client);
                    await builder.build(builder.environments.ssr);
                    await builder.build(builder.environments.externalServerEnv);
                  },
                },
              };
            },
          };
        }

        export default defineConfig({
          build: {
            assetsInlineLimit: 0,
          },
          plugins: [
            reactRouter(),
            extraServerEnvironment(),
          ],
        });
      `,
      "app/root.tsx": js`
        import { Links, Meta, Outlet, Scripts } from "react-router";

        export default function Root() {
          return (
            <html lang="en">
              <head>
                <Meta />
                <Links />
              </head>
              <body>
                <Outlet />
                <Scripts />
              </body>
            </html>
          );
        }
      `,
      "app/routes/_index.tsx": js`
        export default function Index() {
          return <h1>Hello</h1>;
        }
      `,
      "app/assets/test.txt": "test",
      "app/ssr-only-asset.server.ts": js`
        import txtUrl from "./assets/test.txt?url";

        export { txtUrl };
      `,
      "app/routes/ssr-only-assets.tsx": js`
        import { useLoaderData } from "react-router";

        export const loader = async () => {
          let { txtUrl } = await import("../ssr-only-asset.server");
          return { txtUrl };
        };

        export default function SsrOnlyAssetsRoute() {
          const loaderData = useLoaderData<typeof loader>();
          return <a href={loaderData.txtUrl}>txtUrl</a>;
        }
      `,
      "external-server-env.ts": js`
        export default {
          async fetch() {
            return new Response("ok");
          },
        };
      `,
    },
    "vite-6-template",
  );

  let { status, stderr } = build({ cwd });

  expect(stderr.toString().trim()).toBeFalsy();
  expect(status).toBe(0);
  expect(glob.sync("build/client/assets/test-*.txt", { cwd }).length).toBe(1);
});