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>

apps/client/src/common/components/qr-code/QrCode.module.scss

@@ -0,0 +1,22 @@
+@use '@/theme/viewerDefs' as *;
+
+.square {
+  border-radius: $component-border-radius-sm;
+  background-color: $viewer-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blink {
+  animation: blink 1s ease-in-out infinite alternate;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 10%;
+  }
+  100% {
+    opacity: 100%;
+  }
+}

apps/client/src/common/components/qr-code/QrCode.tsx

@@ -0,0 +1,43 @@
+import { toString } from 'qrcode';
+import { Suspense, use } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './QrCode.module.scss';
+
+interface QRCodeProps {
+  value: string;
+  size: number;
+}
+
+export default function QRCode({ value, size }: QRCodeProps) {
+  'use memo';
+  const svgPromise = toString(value, {
+    width: size,
+    margin: 2,
+    color: { dark: '#101010', light: '#cfcfcf' },
+  });
+
+  return (
+    <Suspense fallback={<QrFallback size={size} />}>
+      <QrSvg svgPromise={svgPromise} size={size} />
+    </Suspense>
+  );
+}
+
+function QrFallback({ size }: { size: number }) {
+  'use memo';
+  return <span style={{ width: size + 2, height: size + 2 }} className={cx([style.blink, style.square])} />;
+}
+
+function QrSvg({ svgPromise, size }: { svgPromise: Promise<string>; size: number }) {
+  'use memo';
+  const svg = use(svgPromise);
+  return (
+    <span
+      className={style.square}
+      style={{ width: size + 2, height: size + 2 }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

apps/client/src/features/sharing/GenerateLinkForm.module.scss

@@ -1,9 +1,3 @@
-.qrCode {
-  padding: 0.5rem;
-  background: $ui-white;
-  border-radius: 3px;
-}
-
 .column {
   margin-top: 1rem;
   display: flex;

apps/client/src/features/sharing/GenerateLinkForm.tsx

@@ -2,7 +2,6 @@ import { OntimeView, URLPreset } from 'ontime-types';
 import { generateId } from 'ontime-utils';
 import { useRef, useState } from 'react';
 import { FieldErrors, useForm } from 'react-hook-form';
-import QRCode from 'react-qr-code';
 
 import { generateUrl } from '../../common/api/session';
 import { maybeAxiosError } from '../../common/api/utils';
@@ -10,6 +9,7 @@ import Button from '../../common/components/buttons/Button';
 import CopyTag from '../../common/components/copy-tag/CopyTag';
 import Info from '../../common/components/info/Info';
 import Input from '../../common/components/input/input/Input';
+import QRCode from '../../common/components/qr-code/QrCode';
 import Select from '../../common/components/select/Select';
 import Switch from '../../common/components/switch/Switch';
 import { useUpdateUrlPreset } from '../../common/hooks-query/useUrlPresets';
@@ -275,7 +275,7 @@ export default function GenerateLinkForm({ hostOptions, pathOptions, presets, is
         </div>
         <Panel.Section className={style.column}>
           <Panel.Description>Share this link</Panel.Description>
-          <QRCode size={172} value={url} className={style.qrCode} />
+          <QRCode size={172} value={url} />
           <div className={style.copiableLink} data-testid='copy-link'>
             {url}
           </div>

apps/client/src/views/backstage/Backstage.scss

@@ -179,12 +179,6 @@
       flex: 1;
     }
 
-    &__qr {
-      padding: 0.5rem;
-      background-color: $ui-white;
-      border-radius: 2px;
-    }
-
     &__img {
       padding: 0.5rem;
       border-radius: 2px;

apps/client/src/views/backstage/Backstage.tsx

@@ -2,9 +2,9 @@ import { useViewportSize } from '@mantine/hooks';
 import { OntimeView, ProjectData } from 'ontime-types';
 import { millisToString, removeLeadingZero } from 'ontime-utils';
 import { useEffect, useMemo, useState } from 'react';
-import QRCode from 'react-qr-code';
 
 import ProgressBar from '../../common/components/progress-bar/ProgressBar';
+import QRCode from '../../common/components/qr-code/QrCode';
 import Empty from '../../common/components/state/Empty';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import TitleCard from '../../common/components/title-card/TitleCard';
@@ -171,7 +171,7 @@ function Backstage({ events, customFields, projectData, isMirrored, settings }:
       <div className={cx(['info', !showSchedule && 'info--stretch'])}>
         {extraInfo && <ExtraInfo projectData={projectData} size={qrSize} source={extraInfo} />}
         <div className='info-card'>
-          {projectData.url && <QRCode value={projectData.url} size={qrSize} level='L' className='info-card__qr' />}
+          {projectData.url && <QRCode value={projectData.url} size={qrSize} />}
           {projectData.info && <div className='info-card__message'>{projectData.info}</div>}
         </div>
       </div>