WIP: switch from create-react-app to vite

create-react-app is apparently deprecated, so the cool kids use vite,
I guess.

Not ready to merge for several major reasons:

* tests fail. My attempt to support relative URLs from within
  `FixJSDomEnvironment.ts` doesn't appear to be working.
* `npm run build` is failing. It seems to be stricter now about some
  things that were already wrong.
* `npm run dev` seems to be just showing a blank page. I swear it was
  just working. Not sure what I changed since then.
* I probably have some docs to update.

ui/FixJSDomEnvironment.ts

@@ -0,0 +1,29 @@
+// https://github.com/jsdom/jsdom/issues/1724#issuecomment-1446858041
+
+import JSDOMEnvironment from "jest-environment-jsdom";
+
+// https://github.com/facebook/jest/blob/v29.4.3/website/versioned_docs/version-29.4/Configuration.md#testenvironment-string
+export default class FixJSDOMEnvironment extends JSDOMEnvironment {
+  constructor(...args: ConstructorParameters<typeof JSDOMEnvironment>) {
+    super(...args);
+
+    // `src/api.ts` expects to be able to use fetch with relative URLs, which
+    // node's native fetch does not like. Somehow this matters even though we're
+    // using msw?
+    this.global.fetch = (
+      resource: RequestInfo | URL,
+      options?: RequestInit
+    ) => {
+      return global.fetch(
+        new URL(resource as string, "http://localhost"),
+        options
+      );
+    };
+    this.global.Headers = Headers;
+    this.global.Request = Request;
+    this.global.Response = Response;
+
+    // `src/LiveCamera/parser.ts` uses TextDecoder.
+    this.global.TextDecoder = TextDecoder;
+  }
+}

ui/public/index.html → ui/index.html

@@ -11,24 +11,24 @@
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/favicons/apple-touch-icon-94a09b5d2ddb5af47.png"
+      href="favicons/apple-touch-icon-94a09b5d2ddb5af47.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/favicons/favicon-32x32-ab95901a9e0d040e2.png"
+      href="favicons/favicon-32x32-ab95901a9e0d040e2.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/favicons/favicon-16x16-b16b3f2883aacf9f1.png"
+      href="favicons/favicon-16x16-b16b3f2883aacf9f1.png"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <link rel="manifest" href="site.webmanifest" />
     <link
       rel="mask-icon"
-      href="%PUBLIC_URL%/favicons/safari-pinned-tab-9792c2c82f04639f8.svg"
+      href="favicons/safari-pinned-tab-9792c2c82f04639f8.svg"
       color="#e04e1b"
     />
     <meta name="theme-color" content="#e04e1b" />

ui/jest.config.ts

@@ -0,0 +1,36 @@
+// This file is part of Moonfire NVR, a security camera network video recorder.
+// Copyright (C) 2023 The Moonfire NVR Authors; see AUTHORS and LICENSE.txt.
+// SPDX-License-Identifier: GPL-v3.0-or-later WITH GPL-3.0-linking-exception
+
+import type { Config } from "jest";
+
+const config: Config = {
+  testEnvironment: "./FixJSDomEnvironment.ts",
+
+  transform: {
+    // https://github.com/swc-project/jest
+    "\\.[tj]sx?$": [
+      "@swc/jest",
+      {
+        // https://swc.rs/docs/configuration/compilation
+        // https://github.com/swc-project/jest/issues/167#issuecomment-1809868077
+        jsc: {
+          transform: {
+            react: {
+              runtime: "automatic",
+            },
+          },
+        },
+      },
+    ],
+  },
+
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+
+  // https://github.com/jaredLunde/react-hook/issues/300#issuecomment-1845227937
+  moduleNameMapper: {
+    "@react-hook/(.*)": "<rootDir>/node_modules/@react-hook/$1/dist/main",
+  },
+};
+
+export default config;