WIP vite migration

2023-12-12 19:37:41 +01:00
parent cba850251f
commit 34efa48c3e
15 changed files with 729 additions and 16603 deletions
--- a/geneit_app/.env
+++ b/geneit_app/.env
@@ -1 +1 @@
-REACT_APP_BACKEND=http://localhost:8000
+VITE_APP_BACKEND=http://localhost:8000
--- a/geneit_app/.env.production
+++ b/geneit_app/.env.production
@@ -1 +1 @@
-REACT_APP_BACKEND=https://geneit-backend.communiquons.org
+VITE_APP_BACKEND=https://geneit-backend.communiquons.org
--- a/geneit_app/public/index.html
+++ b/geneit_app/public/index.html
@@ -2,25 +2,25 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
@@ -39,5 +39,7 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
+
+    <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
--- a/geneit_app/package-lock.json
+++ b/geneit_app/package-lock.json
--- a/geneit_app/package.json
+++ b/geneit_app/package.json
@@ -2,6 +2,7 @@
  "name": "geneit_app",
  "version": "0.1.0",
  "private": true,
+  "type": "module",
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@emotion/react": "^11.11.0",
@@ -18,9 +19,9 @@
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.34",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.4",
+    "@vitejs/plugin-react": "^4.2.1",
    "date-and-time": "^3.0.1",
    "email-validator": "^2.0.4",
    "family-chart": "^0.0.0-beta-1",
@@ -30,17 +31,17 @@
    "react-dom": "^18.2.0",
    "react-easy-crop": "^5.0.0",
    "react-router-dom": "^6.11.2",
-    "react-scripts": "^5.0.1",
    "react-zoom-pan-pinch": "^3.1.0",
-    "svg2pdf.js": "^2.2.2",
+    "svg2pdf.js": "^2.2.3",
    "typescript": "^4.9.5",
+    "vite": "^5.0.8",
+    "vite-tsconfig-paths": "^4.2.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
  },
  "eslintConfig": {
    "extends": [
--- a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
+++ b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
--- a/geneit_app/src/api/ApiClient.ts
+++ b/geneit_app/src/api/ApiClient.ts
@@ -16,7 +16,7 @@ export class APIClient {
   * Get backend URL
   */
  static backendURL(): string {
-    const URL = process.env.REACT_APP_BACKEND ?? "";
+    const URL = import.meta.env.VITE_APP_BACKEND ?? "";
    if (URL.length === 0) throw new Error("Backend URL undefined!");
    return URL;
  }
--- a/geneit_app/src/react-app-env.d.ts
+++ b/geneit_app/src/react-app-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
--- a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
+++ b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
@@ -26,7 +26,6 @@ import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
 import { MemberItem } from "../../widgets/MemberItem";
 import { RouterLink } from "../../widgets/RouterLink";
-import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
 import { SimpleFamilyTree } from "../../widgets/simple_family_tree/SimpleFamilyTree";

 enum CurrTab {
@@ -149,7 +148,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
        >
          <Tab tabIndex={CurrTab.BasicTree} label="Basique" />
          <Tab tabIndex={CurrTab.SimpleTree} label="Simple" />
-          <Tab tabIndex={CurrTab.AdvancedTree} label="Avancé" />
+          {/*<Tab tabIndex={CurrTab.AdvancedTree} label="Avancé" />*/}
        </Tabs>
      </div>

@@ -160,11 +159,11 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
        ) : currTab === CurrTab.SimpleTree ? (
          <SimpleFamilyTree tree={tree!} depth={currDepth} />
        ) : (
-          <ComplexFamilyTree
+          <>unimplemented</> /*<ComplexFamilyTree
            tree={tree!}
            isUp={currMode === TreeMode.Ascending}
            depth={currDepth}
-          />
+        />*/
        )}
      </Paper>
    </div>
--- a/geneit_app/src/utils/debug_utils.ts
+++ b/geneit_app/src/utils/debug_utils.ts
@@ -1,3 +1,5 @@
 export function isDebug(): boolean {
-  return !process.env.NODE_ENV || process.env.NODE_ENV === "development";
+  return (
+    !import.meta.env.NODE_ENV || import.meta.env.NODE_ENV === "development"
+  );
 }
--- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
+++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
@@ -2,7 +2,7 @@ import { mdiXml } from "@mdi/js";
 import Icon from "@mdi/react";
 import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 import { IconButton, Tooltip } from "@mui/material";
-import f3, { f3Data } from "family-chart";
+import "family-chart";
 import { jsPDF } from "jspdf";
 import React from "react";
 import "svg2pdf.js";
@@ -24,7 +24,7 @@ export function ComplexFamilyTree(p: {
  depth: number;
 }): React.ReactElement {
  const darkTheme = useDarkTheme();
-
+  console.log(f3);
  const applyTree = (container: HTMLDivElement) => {
    if (!container) return;

@@ -207,10 +207,10 @@ function treeToF3Data(
  node: FamilyTreeNode,
  isUp: boolean,
  depth: number
-): f3Data[] {
+): f3.f3Data[] {
  const availableMembers = getAvailableMembers(node, depth);

-  const list: f3Data[] = [];
+  const list: f3.f3Data[] = [];
  if (isUp) treeToF3DataUpRecurse(node, list, availableMembers);
  else treeToF3DataDownRecurse(node, list, availableMembers);
  return list;
@@ -232,7 +232,7 @@ function memberData(m: Member, c?: Couple): f3.f3DataData {

 function treeToF3DataUpRecurse(
  node: FamilyTreeNode,
-  array: f3Data[],
+  array: f3.f3Data[],
  availableMembers: Set<number>,
  child?: number,
  spouses?: number[]
@@ -274,7 +274,7 @@ function treeToF3DataUpRecurse(

 function treeToF3DataDownRecurse(
  node: FamilyTreeNode,
-  array: f3Data[],
+  array: f3.f3Data[],
  availableMembers: Set<number>
 ) {
  if (!availableMembers.has(node.member.id)) return;
--- a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
+++ b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
@@ -13,6 +13,7 @@ import { downloadBlob } from "../../utils/files_utils";
 import { getTextWidth } from "../../utils/render_utils";
 import "./simpletree.css";
 import "./Roboto-normal";
+import "svg2pdf.js";

 const FACE_WIDTH = 60;
 const FACE_HEIGHT = 70;
@@ -92,7 +93,8 @@ function buildSimpleTreeNode(
 ): SimpleTreeNode {
  if (depth === 0) throw new Error("Too much recursion reached!");

-  const lastCouple = tree.couples?.[tree.couples?.length - 1 ?? 0];
+  const lastCoupleId = tree.couples?.length ?? 1;
+  const lastCouple = tree.couples?.[lastCoupleId - 1];

  // Preprocess children
  let childrenToProcess = tree.down;
--- a/geneit_app/tsconfig.json
+++ b/geneit_app/tsconfig.json
@@ -1,11 +1,8 @@
 {
  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
@@ -20,7 +17,5 @@
    "noEmit": true,
    "jsx": "react-jsx"
  },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
--- a/geneit_app/vite-env.d.ts
+++ b/geneit_app/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/geneit_app/vite.config.ts
+++ b/geneit_app/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+import { resolve } from "path";
+
+export default defineConfig({
+  // depending on your application, base can also be "/"
+  base: "/",
+  plugins: [react(), viteTsconfigPaths()],
+  server: {
+    // this ensures that the browser opens upon server start
+    open: true,
+    // this sets a default port to 3000
+    port: 3000,
+  },
+  resolve: {
+    alias: {
+      "family-chart": resolve(__dirname, "src"),
+    },
+  },
+});