Fix statically replaced HASH_ROUTING env variables

Also moves the HASH_ROUTING env variable from being modified inside the
hashRouter.spec.ts into the webserver config in the
playwright.config.ipfs.ts

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

.github/workflows/check-e2e.yml

@@ -42,7 +42,9 @@ jobs:
           ./scripts/run-httpd-with-fixtures --non-interactive --download 2>&1 | tee tests/artifacts/httpd-${{ matrix.browser }}.log &
 
       - name: Run Playwright tests
-        run: npm run test:e2e -- --project ${{ matrix.browser }};
+        run: |
+          npm run test:e2e -- --project ${{ matrix.browser }};
+          npm run test:e2e:ipfs -- --project ${{ matrix.browser }};
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v3

package.json

@@ -2,15 +2,16 @@
   "version": "1.0.0",
   "scripts": {
     "start": "vite",
-    "start:ipfs": "HASH_ROUTING=1 vite --base ./",
+    "start:ipfs": "VITE_HASH_ROUTING=1 vite --base ./",
     "serve": "vite preview",
     "build": "vite build && scripts/copy-katex-assets && scripts/install-twemoji-assets",
-    "build:ipfs": "HASH_ROUTING=1 vite build --base ./",
+    "build:ipfs": "VITE_HASH_ROUTING=1 vite build --base ./",
     "postinstall": "scripts/copy-katex-assets && scripts/install-twemoji-assets",
     "check": "scripts/check",
     "format": "npx prettier '**/*.@(ts|js|svelte|json|css|html|yml)' --ignore-path .gitignore --write",
     "test:unit": "TZ='UTC' vitest run",
-    "test:e2e": "TZ='UTC' playwright test"
+    "test:e2e": "TZ='UTC' playwright test",
+    "test:e2e:ipfs": "TZ='UTC' playwright test ./tests/e2e/hashRouter.spec.ts --config playwright.ipfs.config.ts"
   },
   "type": "module",
   "engines": {

playwright.config.ts

@@ -4,6 +4,7 @@ import { devices } from "@playwright/test";
 const config: PlaywrightTestConfig = {
   testDir: "./tests/e2e",
   outputDir: "./tests/artifacts",
+  testIgnore: "hashRouter.spec.ts",
   timeout: 30_000,
   expect: {
     timeout: 8000,

playwright.ipfs.config.ts

@@ -0,0 +1,14 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+import base from "./playwright.config.js";
+
+const config: PlaywrightTestConfig = {
+  ...base,
+  testIgnore: undefined,
+  webServer: {
+    command: "npm run start:ipfs",
+    port: 3000,
+  },
+};
+
+export default config;

src/App.svelte

@@ -23,7 +23,7 @@
   if (!window.VITEST && !window.PLAYWRIGHT && import.meta.env.PROD) {
     const plausible = Plausible({
       domain: "app.radicle.xyz",
-      hashMode: window.HASH_ROUTING,
+      hashMode: import.meta.env.VITE_HASH_ROUTING,
     });
 
     plausible.enableAutoPageviews();

src/env.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// Defined by vite or by custom passed env variables
+// Custom entries will be defined as globals during dev and statically replaced during build.
+interface ImportMeta extends Readonly<Record<string, unknown>> {
+  env: {
+    MODE: string;
+    BASE_URL: string;
+    PROD: boolean;
+    DEV: boolean;
+    SSR: boolean;
+    VITE_HASH_ROUTING: boolean;
+  };
+}

src/global.d.ts

@@ -8,7 +8,6 @@ declare global {
     // production.
     VITEST: boolean;
     PLAYWRIGHT: boolean;
-    HASH_ROUTING: boolean;
 
     // APP_CONFIG is set from within Playwright tests at runtime.
     // To better understand how it works together, have a look at:

src/lib/router.ts

@@ -16,7 +16,7 @@ export const activeRouteStore: Readable<Route> = derived(
   },
 );
 
-export const base = window.HASH_ROUTING ? "./" : "/";
+export const base = import.meta.env.VITE_HASH_ROUTING ? "./" : "/";
 
 // Gets triggered when clicking on an anchor hash tag e.g. <a href="#header"/>
 // Allows the jump to a anchor hash
@@ -97,7 +97,7 @@ export const push = (newRoute: Route): void => {
   // one subsequent pop() anyway.
   historyStore.set([...history, newRoute].slice(-10));
 
-  const path = window.HASH_ROUTING
+  const path = import.meta.env.VITE_HASH_ROUTING
     ? "#" + routeToPath(newRoute)
     : routeToPath(newRoute);
 
@@ -116,7 +116,7 @@ export const pop = (): void => {
 export function replace(newRoute: Route): void {
   historyStore.set([newRoute]);
 
-  const path = window.HASH_ROUTING
+  const path = import.meta.env.VITE_HASH_ROUTING
     ? "#" + routeToPath(newRoute)
     : routeToPath(newRoute);
 
@@ -142,7 +142,7 @@ function pathToRoute(path: string): Route | null {
   }
 
   const url = new URL(path, window.origin);
-  const segments = window.HASH_ROUTING
+  const segments = import.meta.env.VITE_HASH_ROUTING
     ? url.hash.substring(2).split("#")[0].split("/") // Try to remove any additional hashes at the end of the URL.
     : url.pathname.substring(1).split("/");
 

tests/e2e/hashRouter.spec.ts

@@ -11,12 +11,6 @@ import {
   expectUrlPersistsReload,
 } from "@tests/support/router.js";
 
-test.beforeEach(async ({ page }) => {
-  await page.addInitScript(() => {
-    window.HASH_ROUTING = true;
-  });
-});
-
 test("navigate between landing and project page", async ({ page }) => {
   await page.addInitScript(appConfigWithFixture);
 

vite.config.ts

@@ -8,22 +8,6 @@ import path from "node:path";
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 
-function defineConstants() {
-  const constants = {
-    VITEST: process.env.VITEST !== undefined,
-    PLAYWRIGHT: process.env.PLAYWRIGHT_TEST_BASE_URL !== undefined,
-  };
-
-  // Don't overwrite HASH_ROUTING in Playwright tests, so we can control it
-  // from within the tests.
-  if (process.env.PLAYWRIGHT_TEST_BASE_URL !== undefined) {
-    return constants;
-  } else {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    return { ...constants, HASH_ROUTING: Boolean(process.env.HASH_ROUTING) };
-  }
-}
-
 export default defineConfig({
   test: {
     setupFiles: "./tests/support/setupVitest",
@@ -85,7 +69,10 @@ export default defineConfig({
     },
   },
 
-  define: defineConstants(),
+  define: {
+    VITEST: process.env.VITEST !== undefined,
+    PLAYWRIGHT: process.env.PLAYWRIGHT_TEST_BASE_URL !== undefined,
+  },
 });
 
 function configureDevServer() {