feat: Vite 8 (#2018)

* chore: upgrade vite

* fix: inconsistentCjsInterop for ReactQR

* chore: e2e tests should use relativve path and get host from playwright config

* refactor: drop qr code dependency

---------

Co-authored-by: alex-Arc <omnivox@LAPTOP-RC5SNBVV.localdomain>

e2e/tests/000-upload-showfile.spec.ts

@@ -7,7 +7,7 @@ const fileToUpload = 'e2e/tests/fixtures/e2e-test-db.json';
 const fileToDownload = 'e2e/tests/fixtures/tmp/';
 
 test('project file upload', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
 
   // Try to close welcome modal if it appears (times out silently if not present)
   try {
@@ -47,7 +47,7 @@ test('project file upload', async ({ page }) => {
 
 //TODO: this works when testing locally, but not in github actions
 test.fixme('project file download', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor/?settings=project__manage');
+  await page.goto('/editor/?settings=project__manage');
 
   await page
     .getByRole('row', { name: /.*currently loaded/i })

e2e/tests/002-view-navigation.spec.ts

@@ -2,7 +2,7 @@ import { type Page, expect, test } from '@playwright/test';
 
 test.describe('test view navigation feature', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('http://localhost:4001/');
+    await page.goto('/');
     await expect(page.locator('data-testid=timer-view')).toBeVisible();
   });
 
@@ -10,51 +10,51 @@ test.describe('test view navigation feature', () => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Timeline' }).click();
     page.locator('data-testid=timeline-view');
-    await expect(page).toHaveURL('http://localhost:4001/timeline');
+    await expect(page).toHaveURL('/timeline');
   });
 
   test('Backstage', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Backstage' }).click();
     page.locator('data-testid=backstage-view');
-    await expect(page).toHaveURL('http://localhost:4001/backstage');
+    await expect(page).toHaveURL('/backstage');
   });
 
   test('Studio Clock', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Studio Clock' }).click();
     page.locator('data-testid=studio-view');
-    await expect(page).toHaveURL('http://localhost:4001/studio');
+    await expect(page).toHaveURL('/studio');
   });
 
   test('Countdown', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Countdown' }).click();
     page.locator('data-testid=countdown-view');
-    await expect(page).toHaveURL('http://localhost:4001/countdown');
+    await expect(page).toHaveURL('/countdown');
   });
 
   test('Project Info', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Project Info' }).click();
     page.locator('data-testid=project-view');
-    await expect(page).toHaveURL('http://localhost:4001/info');
+    await expect(page).toHaveURL('/info');
   });
 
   test('Timer', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Timer', exact: true }).click();
     page.locator('data-testid=timer-view');
-    await expect(page).toHaveURL('http://localhost:4001/timer');
+    await expect(page).toHaveURL('/timer');
   });
 
   test('not-found', async ({ page }) => {
-    await page.goto('http://localhost:4001/not-found');
+    await page.goto('/not-found');
 
     await expect(page).toHaveTitle(/ontime/);
     await expect(page.getByRole('heading', { name: 'Not found' })).toBeVisible();
 
-    await page.goto('http://localhost:4001/preset/not-found');
+    await page.goto('/preset/not-found');
 
     await expect(page).toHaveTitle(/ontime/);
     await expect(page.getByRole('heading', { name: 'Not found' })).toBeVisible();

e2e/tests/features/201-message-control.spec.ts

@@ -4,14 +4,14 @@ test('message control sends messages to screens', async ({ context }) => {
   const editorPage = await context.newPage();
   const featurePage = await context.newPage();
 
-  await editorPage.goto('http://localhost:4001/messagecontrol');
+  await editorPage.goto('/messagecontrol');
 
   // stage timer message
   await editorPage.getByPlaceholder('Message shown fullscreen in stage timer').click();
   await editorPage.getByPlaceholder('Message shown fullscreen in stage timer').fill('testing stage');
   await editorPage.getByRole('button', { name: /toggle timer message/i }).click({ timeout: 5000 });
 
-  await featurePage.goto('http://localhost:4001/timer');
+  await featurePage.goto('/timer');
   await featurePage.waitForLoadState('load', { timeout: 5000 });
   await expect(featurePage.getByText('testing stage')).toBeVisible();
 

e2e/tests/features/203-delay-block.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('delays add time to events', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
 
   // delete all events and add a new one
   await page.getByRole('button', { name: 'Edit' }).click();
@@ -50,7 +50,7 @@ test('delays add time to events', async ({ page }) => {
 });
 
 test('delays are show correctly', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
 
   // add a test event
   await page.getByRole('button', { name: 'Edit' }).click();
@@ -81,10 +81,10 @@ test('delays are show correctly', async ({ page }) => {
   await page.getByText('New start 00:11').click();
 
   // delay is shown in the cuesheet
-  await page.goto('http://localhost:4001/cuesheet');
+  await page.goto('/cuesheet');
   await page.getByRole('cell', { name: 'Delayed by 1 min' }).click();
 
   // delay is shown in the backstage view
-  await page.goto('http://localhost:4001/backstage');
+  await page.goto('/backstage');
   await page.getByText('00:11→00:21').click();
 });

e2e/tests/features/204-editor-crud.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('CRUD operations on the rundown', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
 
   await page.getByRole('button', { name: 'Edit' }).click();
   await page.getByRole('button', { name: 'Rundown menu' }).click();

e2e/tests/features/206-url-preset.spec.ts

@@ -8,7 +8,7 @@ test.describe('URL Preset', () => {
   test.beforeAll(async ({ browser }) => {
     const context = await browser.newContext();
     const page = await context.newPage();
-    await page.goto('http://localhost:4001/editor');
+    await page.goto('/editor');
 
     // Create the preset that will be used by other tests
     await page.getByRole('button', { name: 'Toggle settings' }).click();
@@ -31,7 +31,7 @@ test.describe('URL Preset', () => {
   });
 
   test('Unwrapping a preset from a view', async ({ page }) => {
-    await page.goto('http://localhost:4001/timer');
+    await page.goto('/timer');
 
     // 1. the URL points to the view
     expect(page.url().includes('hideTimerSeconds=true')).not.toBeTruthy();
@@ -52,7 +52,7 @@ test.describe('URL Preset', () => {
   });
 
   test('Sharing a link to an unwrapped preset', async ({ page }) => {
-    await page.goto('http://localhost:4001/editor');
+    await page.goto('/editor');
 
     // open settings
     await page.getByRole('button', { name: 'Toggle settings' }).click();
@@ -83,7 +83,7 @@ test.describe('URL Preset', () => {
   });
 
   test('Sharing a link to a masked preset', async ({ page }) => {
-    await page.goto('http://localhost:4001/editor');
+    await page.goto('/editor');
 
     // open settings
     await page.getByRole('button', { name: 'Toggle settings' }).click();
@@ -118,7 +118,7 @@ test.describe('Sharing from cuesheet', () => {
   test.beforeAll(async ({ browser }) => {
     const context = await browser.newContext();
     const page = await context.newPage();
-    await page.goto('http://localhost:4001/editor');
+    await page.goto('/editor');
 
     // we create some elements to test with
     await page.getByRole('button', { name: 'Rundown menu' }).click();
@@ -135,7 +135,7 @@ test.describe('Sharing from cuesheet', () => {
   test('Sharing a link with readonly permissions', async ({ page }, testInfo) => {
     const alias = `cuesheet-read-test-${testInfo.retry}-${Date.now()}`;
 
-    await page.goto('http://localhost:4001/cuesheet');
+    await page.goto('/cuesheet');
     await expect(page.getByTestId('cuesheet')).toBeVisible();
 
     await page.getByRole('button', { name: 'Share...' }).click();
@@ -189,7 +189,7 @@ test.describe('Sharing from cuesheet', () => {
   test('Sharing a link with scoped read-write permissions', async ({ page }, testInfo) => {
     const alias = `cuesheet-scope-test-${testInfo.retry}-${Date.now()}`;
 
-    await page.goto('http://localhost:4001/cuesheet');
+    await page.goto('/cuesheet');
     await expect(page.getByTestId('cuesheet')).toBeVisible();
 
     await page.getByRole('button', { name: 'Share...' }).click();

e2e/tests/features/207-view-params.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('View params configures timer view', async ({ page }) => {
-  await page.goto('http://localhost:4001/timer');
+  await page.goto('/timer');
 
   await expect(page.getByText('TIME NOW')).toBeInViewport();
 

e2e/tests/features/208-auxtimer.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('Aux timer buttons', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
   await page.getByTestId('time-input-aux1').click();
   await page.getByTestId('time-input-aux1').fill('123456');
   await page.getByTestId('time-input-aux1').press('Enter');

e2e/tests/features/209-rundown-shortcuts.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('Copy-paste', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
@@ -32,7 +32,7 @@ test('Copy-paste', async ({ page }) => {
 });
 
 test('Cut-paste', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
@@ -64,7 +64,7 @@ test('Cut-paste', async ({ page }) => {
 });
 
 test('Move', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
@@ -102,7 +102,7 @@ test('Move', async ({ page }) => {
 });
 
 test('Add group', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
@@ -137,7 +137,7 @@ test('Add group', async ({ page }) => {
 });
 
 test('Add delay', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
@@ -168,7 +168,7 @@ test('Add delay', async ({ page }) => {
 });
 
 test('Add event', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
@@ -195,11 +195,11 @@ test('Add event', async ({ page }) => {
 });
 
 test('Delete event', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Rundown menu' }).click();
   await page.getByRole('menuitem', { name: 'Clear all' }).click();
   await page.getByRole('button', { name: 'Delete all' }).click();
@@ -218,7 +218,7 @@ test('Delete event', async ({ page }) => {
 });
 
 test('Find in rundown', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await expect(page.getByTestId('panel-rundown')).toBeVisible();
 
   await page.keyboard.press('ControlOrMeta+f');
@@ -229,7 +229,7 @@ test('Find in rundown', async ({ page }) => {
 });
 
 test('Open settings', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
   await expect(page.getByTestId('editor-container')).toBeVisible();
 
   await page.keyboard.press('ControlOrMeta+,');

e2e/tests/features/210-client-remote.spec.ts

@@ -4,8 +4,8 @@ test('redirect', async ({ context }) => {
   const controllerPage = await context.newPage();
   const remotePage = await context.newPage();
 
-  await controllerPage.goto('http://localhost:4001/editor?settings=network__clients');
-  await remotePage.goto('http://localhost:4001/timer');
+  await controllerPage.goto('/editor?settings=network__clients');
+  await remotePage.goto('/timer');
 
   await controllerPage.getByTestId('not-self-redirect').click();
   await controllerPage.getByRole('textbox', { name: 'http://localhost:' }).click();
@@ -19,8 +19,8 @@ test('identify', async ({ context }) => {
   const controllerPage = await context.newPage();
   const remotePage = await context.newPage();
 
-  await controllerPage.goto('http://localhost:4001/editor?settings=network__clients');
-  await remotePage.goto('http://localhost:4001/timer');
+  await controllerPage.goto('/editor?settings=network__clients');
+  await remotePage.goto('/timer');
 
   await controllerPage.getByTestId('not-self-identify').click();
 
@@ -31,8 +31,8 @@ test('rename', async ({ context }) => {
   const controllerPage = await context.newPage();
   const remotePage = await context.newPage();
 
-  await controllerPage.goto('http://localhost:4001/editor?settings=network__clients');
-  await remotePage.goto('http://localhost:4001/timer');
+  await controllerPage.goto('/editor?settings=network__clients');
+  await remotePage.goto('/timer');
 
   await controllerPage.getByTestId('not-self-rename').click();
   await controllerPage.getByPlaceholder('new name').click();

e2e/tests/features/211-report-data.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('show warning when event crosses midnight', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
 
   await page.getByRole('button', { name: 'Edit' }).click();
 
@@ -24,7 +24,7 @@ test('show warning when event crosses midnight', async ({ page }) => {
 });
 
 test('show warning when event starts next day midnight', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
 
   await page.getByRole('button', { name: 'Edit' }).click();
 

e2e/tests/features/212-time-until.spec.ts

@@ -129,7 +129,7 @@ test('time until absolute', async ({ context }) => {
 
 test('time until relative', async ({ context }) => {
   const editor = await context.newPage();
-  editor.goto('http://localhost:4001/editor');
+  editor.goto('/editor');
 
   await editor.getByRole('button', { name: 'Edit' }).click();
   await editor.getByRole('button', { name: 'Rundown menu' }).click();

e2e/tests/features/213-arrange-while-playing.spec.ts

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 test('Rearrange while playing', async ({ page }) => {
-  await page.goto('http://localhost:4001/rundown');
+  await page.goto('/rundown');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   // clear rundown
@@ -34,7 +34,7 @@ test('Rearrange while playing', async ({ page }) => {
 });
 
 test('flag and unflag an event while playing', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor/');
+  await page.goto('/editor/');
   await page.getByRole('button', { name: 'Edit' }).click();
 
   await page.getByRole('button', { name: 'Rundown menu' }).click();

e2e/tests/features/301-spreadsheet-import.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test';
 const fileToUpload = 'e2e/tests/fixtures/test-sheet.xlsx';
 
 test('sheet file upload', async ({ page }) => {
-  await page.goto('http://localhost:4001/editor');
+  await page.goto('/editor');
   await page.getByRole('button', { name: 'Edit' }).click();
   await page.getByRole('button', { name: 'Rundown menu' }).click();
   await page.getByRole('menuitem', { name: 'Clear all' }).click();