Use config files instead of hardcoded vars

ethanl21 · Jul 12, 2023 · 3542fd3 · 3542fd3
1 parent 183bb56
commit 3542fd3
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>wasmGBA</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,12 @@
 {
   "name": "wasmgba",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ethanl21/wasmGBA.git"
+  },
+  "license": "MIT",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,19 +9,13 @@ function App() {
   const [aboutDialogIsOpen, setAboutDialogIsOpen] = useState(false);
   const [usageDialogIsOpen, setUsageDialogIsOpen] = useState(false);
 
-  // todo: use a config file instead of hardcoding these
-  const mGBARepoURL = new URL(
-    "https://github.com/thenick775/mgba/tree/c3d5ca5d5ffd47b2866fe6e40a7d551d845e512a"
-  );
-  const sourceRepoURL = new URL("https://github.com/ethanl21/wasmGBA");
-
   return (
     <>
       <AboutDialog
         open={aboutDialogIsOpen}
         setIsOpen={setAboutDialogIsOpen}
-        upstreamRepo={mGBARepoURL}
-        repo={sourceRepoURL}
+        upstreamRepo={MGBA_UPSTREAM_REPO_URL}
+        repo={WASMGBA_REPO_URL}
       />
       <UsageDialog open={usageDialogIsOpen} setIsOpen={setUsageDialogIsOpen} />
 
@@ -30,7 +24,8 @@ function App() {
           <TopMenuBar
             onOpenAboutDialog={() => setAboutDialogIsOpen(true)}
             onOpenUsageDialog={() => setUsageDialogIsOpen(true)}
-            repo={sourceRepoURL}
+            repo={WASMGBA_REPO_URL}
+            licenses={WASMGBA_OSS_LICENSES_URL}
           />
         </header>
 

diff --git a/src/components/wasmgba/aboutdialog.tsx b/src/components/wasmgba/aboutdialog.tsx
@@ -9,19 +9,18 @@ import {
 import { Github } from "lucide-react";
 
 interface AboutDialogProps {
-  upstreamRepo?: string | URL;
-  repo?: string | URL;
+  upstreamRepo?: string;
+  repo?: string;
   open?: boolean;
   setIsOpen?: (open: boolean) => void;
 }
 export default function AboutDialog(props: AboutDialogProps) {
-  if (typeof props.upstreamRepo === "string")
-    props.upstreamRepo = new URL(props.upstreamRepo);
-
   let upstream = "";
   let commit = "";
   if (props.upstreamRepo != null) {
-    const parts = props.upstreamRepo?.pathname.split("/");
+    // copy string to prevent mutation of env var
+    const upstream_url = new URL(("" + props.upstreamRepo).slice(1));
+    const parts = upstream_url?.pathname.split("/");
     upstream = `${parts[1]}/${parts[2]}`;
     commit = `${parts[4]}`.slice(0, 10);
   }
@@ -40,7 +39,7 @@ export default function AboutDialog(props: AboutDialogProps) {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  {upstream} @ {commit}
+                  {upstream}@{commit}
                 </a>
               </DialogDescription>
             )}

diff --git a/src/components/wasmgba/topmenubar.tsx b/src/components/wasmgba/topmenubar.tsx
@@ -59,18 +59,10 @@ interface TopMenuBarProps {
   onOpenUsageDialog: () => void;
   version?: string;
   upstream?: string;
-  repo?: string | URL;
-  licenses?: string | URL;
+  repo?: string;
+  licenses?: string;
 }
 export default function TopMenuBar(props: TopMenuBarProps) {
-  if (typeof props.repo === "string") {
-    props.repo = new URL(props.repo);
-  }
-
-  if (typeof props.licenses === "string") {
-    props.licenses = new URL(props.licenses);
-  }
-
   return (
     <>
       <Menubar>

diff --git a/src/components/wasmgba/usagedialog.tsx b/src/components/wasmgba/usagedialog.tsx
@@ -90,7 +90,7 @@ export default function UsageDialog(props: UsageDialogProps) {
               </TableHeader>
               <TableBody>
                 {keybinds.map((keybind) => (
-                  <TableRow>
+                  <TableRow key={`gba-button-${keybind.gba}`}>
                     <td className="px-4 border-slate-200 border-r">
                       {keybind.gba}
                     </td>

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+document.title = `wasmGBA v${WASMGBA_VERSION}-${import.meta.env.MODE}`;
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1 +1,5 @@
 /// <reference types="vite/client" />
+declare const WASMGBA_VERSION: string;
+declare const WASMGBA_REPO_URL: string;
+declare const WASMGBA_OSS_LICENSES_URL: string;
+declare const MGBA_UPSTREAM_REPO_URL: string;
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,13 +1,23 @@
-import path from "path"
-import react from "@vitejs/plugin-react-swc"
-import { defineConfig } from "vite"
+import path from "path";
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-  base: '/wasmGBA/',
+  base: "/wasmGBA/",
   plugins: [react()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
   },
-})
+  define: {
+    WASMGBA_VERSION: JSON.stringify(process.env.npm_package_version),
+    WASMGBA_REPO_URL: JSON.stringify(process.env.npm_package_repository_url),
+    WASMGBA_OSS_LICENSES_URL: JSON.stringify(
+      `${process.env.npm_package_repository_url}#Dependencies`
+    ),
+    MGBA_UPSTREAM_REPO_URL: JSON.stringify(
+      "https://github.com/thenick775/mgba/tree/c3d5ca5d5ffd47b2866fe6e40a7d551d845e512a"
+    ),
+  },
+});