test: refactor vite config templates (#8687)

remix-run · Feb 5, 2024 · 7f3c0dc · 7f3c0dc
1 parent fef7d16
commit 7f3c0dc
Show file tree

Hide file tree

Showing 13 changed files with 232 additions and 211 deletions.
diff --git a/integration/helpers/vite.ts b/integration/helpers/vite.ts
@@ -9,43 +9,29 @@ import waitOn from "wait-on";
 import getPort from "get-port";
 import shell from "shelljs";
 import glob from "glob";
+import dedent from "dedent";
 
 const remixBin = "node_modules/@remix-run/dev/dist/cli.js";
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
-export const VITE_CONFIG = async (args: {
-  port: number;
-  pluginOptions?: string;
-  vitePlugins?: string;
-  viteManifest?: boolean;
-  viteSsrResolveExternalConditions?: string[];
-}) => {
-  let hmrPort = await getPort();
-  return String.raw`
-    import { defineConfig } from "vite";
-    import { unstable_vitePlugin as remix } from "@remix-run/dev";
-
-    export default defineConfig({
-      ssr: {
-        resolve: {
-          externalConditions: ${JSON.stringify(
-            args.viteSsrResolveExternalConditions ?? []
-          )},
-        },
-      },
-      server: {
-        port: ${args.port},
-        strictPort: true,
-        hmr: {
-          port: ${hmrPort}
-        }
-      },
-      build: {
-        manifest: ${String(args.viteManifest ?? false)},
-      },
-      plugins: [remix(${args.pluginOptions}),${args.vitePlugins ?? ""}],
-    });
-  `;
+export const viteConfig = {
+  server: async (args: { port: number }) => {
+    let hmrPort = await getPort();
+    let text = dedent`
+      server: { port: ${args.port}, strictPort: true, hmr: { port: ${hmrPort} } },
+    `;
+    return text;
+  },
+  basic: async (args: { port: number }) => {
+    return dedent`
+      import { unstable_vitePlugin as remix } from "@remix-run/dev";
+
+      export default {
+        ${await viteConfig.server(args)}
+        plugins: [remix()]
+      }
+    `;
+  },
 };
 
 export const EXPRESS_SERVER = (args: {

diff --git a/integration/vite-cloudflare-test.ts b/integration/vite-cloudflare-test.ts
@@ -1,7 +1,8 @@
 import { test, expect } from "@playwright/test";
 import getPort from "get-port";
+import dedent from "dedent";
 
-import { VITE_CONFIG, createProject, using, viteDev } from "./helpers/vite.js";
+import { viteConfig, createProject, using, viteDev } from "./helpers/vite.js";
 
 test.describe("Vite / cloudflare", async () => {
   let port: number;
@@ -49,17 +50,30 @@ test.describe("Vite / cloudflare", async () => {
         null,
         2
       ),
-      "vite.config.ts": await VITE_CONFIG({
-        port,
-        viteSsrResolveExternalConditions: ["workerd", "worker"],
-        pluginOptions: `{
-          presets: [
-            (await import("@remix-run/dev")).unstable_cloudflarePreset({
-              getRemixDevLoadContext: (ctx) => ({ ...ctx, extra: "stuff" })
+      "vite.config.ts": dedent`
+        import {
+          unstable_vitePlugin as remix,
+          unstable_cloudflarePreset as cloudflare,
+        } from "@remix-run/dev";
+
+        export default {
+          ${await viteConfig.server({ port })}
+          ssr: {
+            resolve: {
+              externalConditions: ["workerd", "worker"],
+            },
+          },
+          plugins: [
+            remix({
+              presets: [
+                cloudflare({
+                  getRemixDevLoadContext: (ctx) => ({ ...ctx, extra: "stuff" })
+                })
+              ]
             })
-          ]
-        }`,
-      }),
+          ],
+        }
+      `,
       "functions/[[page]].ts": `
         import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
 

diff --git a/integration/vite-css-test.ts b/integration/vite-css-test.ts
@@ -1,6 +1,7 @@
 import type { Page } from "@playwright/test";
 import { test, expect } from "@playwright/test";
 import getPort from "get-port";
+import dedent from "dedent";
 
 import {
   createProject,
@@ -9,8 +10,8 @@ import {
   viteBuild,
   viteRemixServe,
   customDev,
-  VITE_CONFIG,
   EXPRESS_SERVER,
+  viteConfig,
 } from "./helpers/vite.js";
 
 const js = String.raw;
@@ -149,8 +150,15 @@ const files = {
   `,
 };
 
-const vitePlugins =
-  '(await import("@vanilla-extract/vite-plugin")).vanillaExtractPlugin()';
+const VITE_CONFIG = async (port: number) => dedent`
+  import { unstable_vitePlugin as remix } from "@remix-run/dev";
+  import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+
+  export default {
+    ${await viteConfig.server({ port })}
+    plugins: [remix(), vanillaExtractPlugin()],
+  }
+`;
 
 test.describe(() => {
   test.describe(async () => {
@@ -161,7 +169,7 @@ test.describe(() => {
     test.beforeAll(async () => {
       port = await getPort();
       cwd = await createProject({
-        "vite.config.ts": await VITE_CONFIG({ port, vitePlugins }),
+        "vite.config.ts": await VITE_CONFIG(port),
         ...files,
       });
       stop = await viteDev({ cwd, port });
@@ -192,7 +200,7 @@ test.describe(() => {
     test.beforeAll(async () => {
       port = await getPort();
       cwd = await createProject({
-        "vite.config.ts": await VITE_CONFIG({ port, vitePlugins }),
+        "vite.config.ts": await VITE_CONFIG(port),
         "server.mjs": EXPRESS_SERVER({ port }),
         ...files,
       });
@@ -224,7 +232,7 @@ test.describe(() => {
     test.beforeAll(async () => {
       port = await getPort();
       cwd = await createProject({
-        "vite.config.ts": await VITE_CONFIG({ port, vitePlugins }),
+        "vite.config.ts": await VITE_CONFIG(port),
         ...files,
       });
 

diff --git a/integration/vite-dot-server-test.ts b/integration/vite-dot-server-test.ts
@@ -2,13 +2,14 @@ import * as path from "node:path";
 import { test, expect } from "@playwright/test";
 import stripAnsi from "strip-ansi";
 import getPort from "get-port";
+import dedent from "dedent";
 
 import {
-  VITE_CONFIG,
   createProject,
   grep,
   using,
   viteBuild,
+  viteConfig,
   viteDev,
   viteRemixServe,
 } from "./helpers/vite.js";
@@ -222,11 +223,16 @@ test.describe("Vite / server-only escape hatch", async () => {
   test.beforeAll(async () => {
     port = await getPort();
     cwd = await createProject({
-      "vite.config.ts": await VITE_CONFIG({
-        port,
-        vitePlugins:
-          '(await import("vite-env-only")).default(), (await import("vite-tsconfig-paths")).default()',
-      }),
+      "vite.config.ts": dedent`
+        import { unstable_vitePlugin as remix } from "@remix-run/dev";
+        import envOnly from "vite-env-only";
+        import tsconfigPaths from "vite-tsconfig-paths";
+
+        export default {
+          ${await viteConfig.server({ port })}
+          plugins: [remix(), envOnly(), tsconfigPaths()],
+        }
+      `,
       "app/utils.server.ts": serverOnlyModule,
       "app/.server/utils.ts": serverOnlyModule,
       "app/routes/_index.tsx": String.raw`

diff --git a/integration/vite-dotenv-test.ts b/integration/vite-dotenv-test.ts
@@ -5,7 +5,7 @@ import {
   createProject,
   customDev,
   EXPRESS_SERVER,
-  VITE_CONFIG,
+  viteConfig,
 } from "./helpers/vite.js";
 
 let files = {
@@ -51,7 +51,7 @@ test.describe(async () => {
   test.beforeAll(async () => {
     port = await getPort();
     cwd = await createProject({
-      "vite.config.js": await VITE_CONFIG({ port }),
+      "vite.config.js": await viteConfig.basic({ port }),
       "server.mjs": EXPRESS_SERVER({ port }),
       ...files,
     });

diff --git a/integration/vite-hmr-hdr-test.ts b/integration/vite-hmr-hdr-test.ts
@@ -9,8 +9,8 @@ import {
   createEditor,
   viteDev,
   customDev,
-  VITE_CONFIG,
   EXPRESS_SERVER,
+  viteConfig,
 } from "./helpers/vite.js";
 
 const files = {
@@ -50,7 +50,7 @@ test.describe(async () => {
   test.beforeAll(async () => {
     port = await getPort();
     cwd = await createProject({
-      "vite.config.js": await VITE_CONFIG({ port }),
+      "vite.config.js": await viteConfig.basic({ port }),
       ...files,
     });
     stop = await viteDev({ cwd, port });
@@ -70,7 +70,7 @@ test.describe(async () => {
   test.beforeAll(async () => {
     port = await getPort();
     cwd = await createProject({
-      "vite.config.js": await VITE_CONFIG({ port }),
+      "vite.config.js": await viteConfig.basic({ port }),
       "server.mjs": EXPRESS_SERVER({ port }),
       ...files,
     });

diff --git a/integration/vite-loader-context-test.ts b/integration/vite-loader-context-test.ts
@@ -5,7 +5,7 @@ import {
   createProject,
   customDev,
   EXPRESS_SERVER,
-  VITE_CONFIG,
+  viteConfig,
 } from "./helpers/vite.js";
 
 let port: number;
@@ -15,7 +15,7 @@ let stop: () => void;
 test.beforeAll(async () => {
   port = await getPort();
   cwd = await createProject({
-    "vite.config.js": await VITE_CONFIG({ port }),
+    "vite.config.js": await viteConfig.basic({ port }),
     "server.mjs": EXPRESS_SERVER({ port, loadContext: { value: "value" } }),
     "app/routes/_index.tsx": String.raw`
       import { json } from "@remix-run/node";

diff --git a/integration/vite-manifests-test.ts b/integration/vite-manifests-test.ts
@@ -2,8 +2,9 @@ import fs from "node:fs";
 import path from "node:path";
 import { test, expect } from "@playwright/test";
 import getPort from "get-port";
+import dedent from "dedent";
 
-import { createProject, viteBuild, VITE_CONFIG } from "./helpers/vite.js";
+import { createProject, viteBuild, viteConfig } from "./helpers/vite.js";
 
 function createRoute(path: string) {
   return {
@@ -49,15 +50,18 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     cwd = await createProject({
-      "vite.config.ts": await VITE_CONFIG({
-        port: await getPort(),
-        pluginOptions: "{ manifest: true }",
-        viteManifest: true,
-      }),
+      "vite.config.ts": dedent`
+        import { unstable_vitePlugin as remix } from "@remix-run/dev";
+
+        export default {
+          build: { manifest: true },
+          plugins: [remix({ manifest: true })],
+        }
+      `,
       ...files,
     });
 
-    await viteBuild({ cwd });
+    viteBuild({ cwd });
   });
 
   test("Vite / manifests enabled / Vite manifests", () => {
@@ -106,11 +110,11 @@ test.describe(() => {
 
   test.beforeAll(async () => {
     cwd = await createProject({
-      "vite.config.ts": await VITE_CONFIG({ port: await getPort() }),
+      "vite.config.ts": await viteConfig.basic({ port: await getPort() }),
       ...files,
     });
 
-    await viteBuild({ cwd });
+    viteBuild({ cwd });
   });
 
   test("Vite / manifest disabled / Vite manifests", () => {

diff --git a/integration/vite-node-env-test.ts b/integration/vite-node-env-test.ts
@@ -6,7 +6,7 @@ import {
   viteDev,
   viteBuild,
   viteRemixServe,
-  VITE_CONFIG,
+  viteConfig,
 } from "./helpers/vite.js";
 
 let files = {
@@ -18,29 +18,29 @@ let files = {
 };
 
 test.describe(async () => {
-  let devPort: number;
+  let port: number;
   let cwd: string;
   let stop: () => void;
 
   test.beforeAll(async () => {
-    devPort = await getPort();
+    port = await getPort();
     cwd = await createProject({
-      "vite.config.js": await VITE_CONFIG({ port: devPort }),
+      "vite.config.js": await viteConfig.basic({ port: port }),
       ...files,
     });
   });
 
   test.describe(() => {
     test.beforeAll(async () => {
-      stop = await viteDev({ cwd, port: devPort });
+      stop = await viteDev({ cwd, port });
     });
     test.afterAll(() => stop());
 
     test("Vite / NODE_ENV / dev", async ({ page }) => {
       let pageErrors: unknown[] = [];
       page.on("pageerror", (error) => pageErrors.push(error));
 
-      await page.goto(`http://localhost:${devPort}/node_env`, {
+      await page.goto(`http://localhost:${port}/node_env`, {
         waitUntil: "networkidle",
       });
       expect(pageErrors).toEqual([]);