Migrate from create react app to vite

src/app.tsx

@@ -50,12 +50,12 @@ import {
 import {DonatsoChart} from './donatso-chart';
 
 /**
- * Load GEDCOM URL from REACT_APP_STATIC_URL environment variable.
+ * Load GEDCOM URL from VITE_STATIC_URL environment variable.
  *
  * If this environment variable is provided, the viewer is switched to
  * single-tree mode without the option to load other data.
  */
-const staticUrl = process.env.REACT_APP_STATIC_URL;
+const staticUrl = import.meta.env.VITE_STATIC_URL;
 
 /** Shows an error message in the middle of the screen. */
 function ErrorMessage(props: {message?: string}) {

src/changelog.tsx

@@ -19,8 +19,10 @@ export async function getChangelog(maxVersions: number, seenVersion?: string) {
     ? Date.parse(seenVersion.slice(0, 10))
     : 0;
 
+  const changelog = import.meta.env.VITE_CHANGELOG as string;
   const changes =
-    process.env.REACT_APP_CHANGELOG?.split('##')
+    changelog
+      .split('##')
       .slice(1, maxVersions + 1)
       .map((notes) => {
         const date = Date.parse(notes.split('\n')[0].trim());
@@ -40,7 +42,7 @@ export async function getChangelog(maxVersions: number, seenVersion?: string) {
 
 /** Stores in local storage the current app version as the last seen version. */
 export function updateSeenVersion() {
-  localStorage.setItem(LAST_SEEN_VERSION_KEY, process.env.REACT_APP_GIT_TIME!);
+  localStorage.setItem(LAST_SEEN_VERSION_KEY, import.meta.env.VITE_GIT_TIME!);
 }
 
 /**
@@ -54,7 +56,7 @@ export function Changelog() {
   useEffect(() => {
     (async () => {
       const seenVersion = localStorage.getItem(LAST_SEEN_VERSION_KEY);
-      const currentVersion = process.env.REACT_APP_GIT_TIME!;
+      const currentVersion = import.meta.env.VITE_GIT_TIME!;
       if (!seenVersion || seenVersion === currentVersion) {
         return;
       }

src/datasource/load_data.spec.ts

@@ -1,3 +1,4 @@
+import {expect, describe, it} from '@jest/globals';
 import {loadFile} from './load_data';
 import {readFileSync} from 'fs';
 import {Blob} from 'buffer';

src/declaration.d.ts

@@ -1 +0,0 @@
-declare module '*.jpg';

src/donatso-chart.tsx

@@ -1,3 +1,4 @@
+import f3 from 'family-chart';
 import {useEffect, useRef} from 'react';
 import {IntlShape, useIntl} from 'react-intl';
 import {IndiInfo, JsonFam, JsonGedcomData} from 'topola';
@@ -5,8 +6,6 @@ import {IndiInfo, JsonFam, JsonGedcomData} from 'topola';
 import {formatDateOrRange} from './util/date_util';
 import {usePrevious} from './util/previous-hook';
 
-const f3: any = require('family-chart');
-
 export interface DonatsoChartProps {
   data: JsonGedcomData;
   selection: IndiInfo;

src/family-chart.d.ts

@@ -0,0 +1,7 @@
+// Data type definitions for the family-chart library.
+declare module 'family-chart' {
+  export function createStore(args: any): any;
+  export function createSvg(args: any): any;
+  export function view(arg1: any, arg2: any, arg3: any, arg4: any): any;
+  export const elements: any;
+}

src/imports.d.ts

@@ -1,2 +1,2 @@
-declare module '*.jng';
+declare module '*.jpg';
 declare module '*.png';

src/intro.tsx

@@ -126,11 +126,11 @@ function Contents() {
       />
 
       <p className="ui right aligned version">
-        version: {formatBuildDate(process.env.REACT_APP_GIT_TIME!)} (
+        version: {formatBuildDate(import.meta.env.VITE_GIT_TIME!)} (
         <a
-          href={`https://github.com/PeWu/topola-viewer/commit/${process.env.REACT_APP_GIT_SHA}`}
+          href={`https://github.com/PeWu/topola-viewer/commit/${import.meta.env.VITE_GIT_SHA}`}
         >
-          {process.env.REACT_APP_GIT_SHA}
+          {import.meta.env.VITE_GIT_SHA}
         </a>
         )
       </p>

src/lunr-languages.d.ts

@@ -0,0 +1,7 @@
+declare module 'lunr-languages/lunr.*' {
+  import lunr from 'lunr';
+
+  function register(l: typeof lunr): void;
+
+  export = register;
+}

src/menu/search_index.ts

@@ -3,12 +3,17 @@ import naturalSort from 'javascript-natural-sort';
 import {idToFamMap, idToIndiMap} from '../util/gedcom_util';
 import {JsonFam, JsonGedcomData, JsonIndi} from 'topola';
 
-// TODO: Add type declarations and use import instead of require.
-require('lunr-languages/lunr.stemmer.support')(lunr);
-require('lunr-languages/lunr.de')(lunr);
-require('lunr-languages/lunr.fr')(lunr);
-require('lunr-languages/lunr.it')(lunr);
-require('lunr-languages/lunr.ru')(lunr);
+import lunrStemmer from 'lunr-languages/lunr.stemmer.support';
+import lunrDe from 'lunr-languages/lunr.de';
+import lunrFr from 'lunr-languages/lunr.fr';
+import lunrIt from 'lunr-languages/lunr.it';
+import lunrRu from 'lunr-languages/lunr.ru';
+
+lunrStemmer(lunr);
+lunrDe(lunr);
+lunrFr(lunr);
+lunrIt(lunr);
+lunrRu(lunr);
 
 const MAX_RESULTS = 8;
 

src/util/age_util.spec.ts

@@ -1,4 +1,4 @@
-import expect from 'expect';
+import {expect, describe, it} from '@jest/globals';
 import {createIntl} from 'react-intl';
 import {calcAge} from './age_util';
 

src/util/gedcom_util.spec.ts

@@ -1,3 +1,4 @@
+import {expect, describe, it} from '@jest/globals';
 import {getName, normalizeGedcom} from './gedcom_util';
 
 describe('normalizeGedcom()', () => {

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />