Improve page performance with server-side rendering

.gitignore

@@ -20,7 +20,7 @@
 /out/
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "start": "vite preview",
+    "start": "vite build && vite preview",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
     "test": "vitest"
   },
@@ -38,6 +38,8 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
+    "vike": "^0.4.179",
+    "vike-react": "^0.4.17",
     "vite": "^5.2.12",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^1.6.0"

src/app/Flash.jsx → src/components/Flash.jsx

@@ -1,10 +1,11 @@
-import { useCallback } from 'react'
+'use client';
+
+import { useCallback, useEffect } from 'react'
 
 import { Step, Error, useFastboot } from '@/utils/fastboot'
 
 import bolt from '@/assets/bolt.svg'
 import cable from '@/assets/cable.svg'
-import cloud from '@/assets/cloud.svg'
 import cloudDownload from '@/assets/cloud_download.svg'
 import cloudError from '@/assets/cloud_error.svg'
 import deviceExclamation from '@/assets/device_exclamation_c3.svg'
@@ -16,11 +17,6 @@ import systemUpdate from '@/assets/system_update_c3.svg'
 
 
 const steps = {
-  [Step.INITIALIZING]: {
-    status: 'Initializing...',
-    bgColor: 'bg-gray-400 dark:bg-gray-700',
-    icon: cloud,
-  },
   [Step.READY]: {
     status: 'Ready',
     description: 'Tap the button above to begin',
@@ -189,10 +185,6 @@ export default function Flash() {
     serial,
   } = useFastboot()
 
-  const handleContinue = useCallback(() => {
-    onContinue?.()
-  }, [onContinue])
-
   const handleRetry = useCallback(() => {
     onRetry?.()
   }, [onRetry])
@@ -214,18 +206,24 @@ export default function Flash() {
   }
 
   // warn the user if they try to leave the page while flashing
-  if (Step.DOWNLOADING <= step && step <= Step.ERASING) {
-    window.addEventListener("beforeunload", beforeUnloadListener, { capture: true })
-  } else {
-    window.removeEventListener("beforeunload", beforeUnloadListener, { capture: true })
-  }
+  useEffect(() => {
+    if (Step.DOWNLOADING <= step && step <= Step.ERASING) {
+      window.addEventListener("beforeunload", beforeUnloadListener, { capture: true })
+    } else {
+      window.removeEventListener("beforeunload", beforeUnloadListener, { capture: true })
+    }
+
+    return () => {
+      window.removeEventListener("beforeunload", beforeUnloadListener, { capture: true })
+    }
+  }, [step])
 
   return (
     <div id="flash" className="relative flex flex-col gap-8 justify-center items-center h-full">
       <div
         className={`p-8 rounded-full ${bgColor}`}
-        style={{ cursor: onContinue ? 'pointer' : 'default' }}
-        onClick={handleContinue}
+        style={{ cursor: 'pointer' }}
+        onClick={onContinue}
       >
         <img
           src={icon}

src/layouts/Head.jsx

@@ -0,0 +1,12 @@
+import iconUrl from '../../public/icon.svg'
+
+export default function HeadDefault() {
+  return (
+    <>
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="description" content="Update your comma device to the latest software" />
+      <link rel="icon" type="image/svg+xml" href={iconUrl} />
+      <script defer data-domain="flash.comma.ai" src="https://plausible.io/js/script.outbound-links.js"></script>
+    </>
+  );
+}

src/layouts/Layout.jsx

@@ -0,0 +1,9 @@
+import '../index.css'
+
+import React from 'react'
+
+export default function Layout({ children }) {
+  return (
+    <React.StrictMode>{children}</React.StrictMode>
+  )
+}

src/pages/+config.js

@@ -0,0 +1,11 @@
+import vikeReact from 'vike-react/config'
+import Head from '../layouts/Head'
+import Layout from '../layouts/Layout'
+
+export default {
+  Head,
+  Layout,
+  title: "flash.comma.ai",
+  extends: vikeReact,
+}
+

src/app/index.jsx → src/pages/index/+Page.jsx

@@ -1,15 +1,13 @@
-import { Suspense, lazy } from 'react'
+import Flash from '../../components/Flash'
 
-import comma from '../assets/comma.svg'
-import fastbootPorts from '../assets/fastboot-ports.svg'
-import zadigCreateNewDevice from '../assets/zadig_create_new_device.png'
-import zadigForm from '../assets/zadig_form.png'
-
-const Flash = lazy(() => import('./Flash'))
+import comma from '../../assets/comma.svg'
+import fastbootPorts from '../../assets/fastboot-ports.svg'
+import zadigCreateNewDevice from '../../assets/zadig_create_new_device.png'
+import zadigForm from '../../assets/zadig_form.png'
 
 export default function App() {
-  const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev'
-  console.info(`flash.comma.ai version: ${version}`);
+  const version = import.meta?.env?.VITE_PUBLIC_GIT_SHA ?? 'dev'
+  console.info(`flash.comma.ai version: ${version}`)
   return (
     <div className="flex flex-col lg:flex-row flex-wrap">
       <main className="p-12 md:p-16 lg:p-20 xl:p-24 w-screen max-w-none lg:max-w-prose lg:w-auto h-auto lg:h-screen lg:overflow-y-auto prose dark:prose-invert prose-green bg-white dark:bg-gray-900">
@@ -149,9 +147,7 @@ export default function App() {
       </main>
 
       <div className="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
-        <Suspense fallback={<p className="text-black dark:text-white">Loading...</p>}>
-          <Flash />
-        </Suspense>
+        <Flash />
       </div>
 
       <div className="w-screen max-w-none p-12 md:p-16 prose dark:prose-invert bg-white dark:bg-gray-900 lg:hidden">

src/app/App.test.jsx → src/pages/index/Page.test.jsx

@@ -1,10 +1,9 @@
 import { Suspense } from 'react'
 import { expect, test } from 'vitest'
 import { render, screen } from '@testing-library/react'
-
-import App from '.'
+import Page from './+Page'
 
 test('renders without crashing', () => {
-  render(<Suspense fallback="loading"><App /></Suspense>)
+  render(<Suspense fallback="loading"><Page /></Suspense>)
   expect(screen.getByText('flash.comma.ai')).toBeInTheDocument()
 })

src/test/mockWorker.js

@@ -0,0 +1,16 @@
+class MockWorker {
+  constructor(stringUrl) {
+    this.url = stringUrl;
+    this.onmessage = () => {};
+  }
+
+  postMessage(msg) {
+    this.onmessage({ data: msg });
+  }
+
+  addEventListener() {}
+  removeEventListener() {}
+  terminate() {}
+}
+
+export default MockWorker;

src/test/setup.js

@@ -1 +1,4 @@
 import '@testing-library/jest-dom'
+import MockWorker from './mockWorker';
+
+global.Worker = MockWorker