Merge branch 'vite'

perliedman · Dec 27, 2024 · 24f820f · 24f820f
2 parents dcf7f1d + 3ce9a25
commit 24f820f
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,8 +33,6 @@
     "zustand": "^3.5.1"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@eslint/js": "^9.17.0",
     "@tailwindcss/forms": "^0.5.9",
     "@testing-library/jest-dom": "^5.16.4",

diff --git a/src/ControlDescriptionLayer.jsx b/src/ControlDescriptionLayer.jsx
@@ -2,10 +2,7 @@ import ImageLayer from "ol/layer/Image";
 import Static from "ol/source/ImageStatic";
 import { useEffect, useState } from "react";
 import { svgToUrl } from "./services/svg-to-bitmap";
-import {
-  courseDefinitionToSvg,
-  getControlDescriptionExtent,
-} from "./services/create-svg";
+import { courseDefinitionToSvg } from "./services/create-svg";
 import { transformExtent } from "./services/coordinates";
 
 export function useControlDescriptions(

diff --git a/src/ControlDescriptionSheet.jsx b/src/ControlDescriptionSheet.jsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { controlDistance } from "./models/control";
 import { courseDistance } from "./models/course";
 import DefinitionTexts from "svg-control-descriptions/symbols/lang.json";
 import Button from "./ui/Button";
 import { useHotkeys } from "react-hotkeys-hook";
+import { descriptionSymbols } from "./services/fetch-symbol-svg";
 
 export default function ControlDescriptionSheet({
   eventName,
@@ -156,8 +157,8 @@ function DescriptionSymbol({ symbol }) {
   const [svg, setSvg] = useState();
 
   useEffect(() => {
-    if (symbol) {
-      import(`svg-control-descriptions/symbols/${symbol}.svg`).then(setSvg);
+    if (symbol && symbol in descriptionSymbols) {
+      descriptionSymbols[symbol]().then(setSvg);
     } else {
       setSvg(null);
     }

diff --git a/src/services/create-svg.js b/src/services/create-svg.js
@@ -332,18 +332,18 @@ export async function courseDefinitionToSvg(eventName, course, mapScale) {
                     cellSize - 1 // TODO: LOL
                   ),
                   text(
-                    Math.round(
-                      ((controlDistance(
-                        course.controls[index - 1],
-                        course.controls[index]
-                      ) /
-                        1000) *
-                        // TODO: Use correct map scale
-                        mapScale) /
-                        10
-                    ) *
-                      10 +
-                      " m",
+                    (index > 0
+                      ? Math.round(
+                          ((controlDistance(
+                            course.controls[index - 1],
+                            course.controls[index]
+                          ) /
+                            1000) *
+                            // TODO: Use correct map scale
+                            mapScale) /
+                            10
+                        ) * 10
+                      : 0) + " m",
                     cellSize * 4 + cellSize / 2,
                     baseLine,
                     "black",

diff --git a/src/services/fetch-symbol-svg.js b/src/services/fetch-symbol-svg.js
@@ -1,10 +1,18 @@
 import fetch from "./fetch";
 import { getSvgDimensions } from "./svg-utils";
 
+const symbols = import.meta.glob(
+  "../../node_modules/svg-control-descriptions/symbols/*.svg"
+);
+
+export const descriptionSymbols = {};
+for (const path in symbols) {
+  const symbol = /symbols\/(.*)\.svg/.exec(path)[1];
+  descriptionSymbols[symbol] = symbols[path];
+}
+
 export default async function fetchSymbolSvg(symbol) {
-  const svgUrl = (
-    await import(`svg-control-descriptions/symbols/${symbol}.svg`)
-  ).default;
+  const svgUrl = (await descriptionSymbols[symbol]()).default;
   const symbolXml = await fetch(svgUrl, null, { format: "text" });
   const svg = new window.DOMParser().parseFromString(
     symbolXml,

diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,5 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
-import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 // https://vite.dev/config/
@@ -14,13 +12,7 @@ export default defineConfig({
         global: "globalThis",
       },
       // Enable esbuild polyfill plugins
-      plugins: [
-        NodeGlobalsPolyfillPlugin({
-          process: true,
-          buffer: true,
-        }),
-        NodeModulesPolyfillPlugin(),
-      ],
+      plugins: [],
     },
   },
 });