4c3bd7e Fix statically replaced HASH_ROUTING env variables — radicle-explorer

modified .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

modified 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": {

modified 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,

added 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;

modified 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();

added 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;
   };
 }

modified 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:

modified 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("/");

modified 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);

modified 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() {