fix: news page crashing; + feat: loading "page" for yarg launch page; (…

…#29) * refactor: getYARGReleaseZip + getYARGReleaseSig * refactor: remove os fetch from util methods * refactor: make useYARG hooks more type safe; * feat: add return for loading/error states on yarg pages * fix: new news crashing when opening oops * fix: missing "os" tauri module for catching os type also just discovered that the os module has locale in BCP-47 which will be quite useful in the future (https://tauri.app/v1/api/js/os#locale) * refactor: get sig asset url from an zip asset url * chore: package updates * chore: use es2020 instead of esnext for compatibility * feat: compatibility with es2020 (safari 14/chrome 105)
YARC-Official · Aug 13, 2023 · 03ab5f3 · 03ab5f3
1 parent d99fb9e
commit 03ab5f3
Show file tree

Hide file tree

Showing 17 changed files with 737 additions and 1,329 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -12,7 +12,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": "latest",
+    "ecmaVersion": "2020",
     "sourceType": "module"
   },
   "plugins": [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,49 +18,49 @@
     "@tauri-apps/cli": "^1.4.0",
     "@types/dompurify": "^3.0.2",
     "@types/marked": "^5.0.1",
-    "@types/node": "^20.4.2",
-    "@types/react": "^18.2.15",
+    "@types/node": "^20.4.10",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-react": "^7.33.0",
-    "postcss": "^8.4.26",
+    "eslint": "^8.47.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-react": "^7.33.1",
+    "postcss": "^8.4.27",
     "postcss-cli": "^10.1.0",
     "typescript": "^5.1.6",
-    "vite": "^4.4.5",
-    "vite-plugin-node-polyfills": "^0.9.0",
+    "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.11.1",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-tooltip": "1.0.6",
-    "@tanstack/query-sync-storage-persister": "^4.29.25",
-    "@tanstack/react-query": "^4.29.25",
-    "@tanstack/react-query-persist-client": "^4.29.25",
+    "@tanstack/query-sync-storage-persister": "^4.32.6",
+    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-persist-client": "^4.32.6",
     "@tauri-apps/api": "^1.4.0",
-    "@types/lodash": "^4.14.195",
+    "@types/lodash": "^4.14.197",
     "async-wait-until": "^2.0.12",
     "date-fns": "^2.30.0",
     "dompurify": "^3.0.5",
     "gray-matter": "^4.0.3",
     "js-video-url-parser": "^0.5.1",
     "lodash": "^4.17.21",
-    "marked": "^5.1.1",
+    "marked": "^7.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.10",
+    "react-error-boundary": "^4.0.11",
     "react-image": "^4.1.0",
-    "react-router-dom": "^6.14.2",
-    "serialize-error": "^11.0.0",
+    "react-router-dom": "^6.15.0",
+    "serialize-error": "^11.0.1",
     "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
     "vite-plugin-top-level-await": "^1.3.1",
-    "zustand": "^4.3.9"
+    "zustand": "^4.4.1"
   }
 }
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -15,7 +15,7 @@ tauri-build = { version = "1.3", features = [] }
 [dependencies]
 log = "^0.4"
 tauri-plugin-log = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
-tauri = { version = "1.3", features = ["dialog-all", "shell-open", "updater", "window-close", "window-hide", "window-maximize", "window-minimize", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
+tauri = { version = "1.3", features = [ "os-all", "dialog-all", "shell-open", "updater", "window-close", "window-hide", "window-maximize", "window-minimize", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 reqwest = { version = "0.11.18", features = ["stream"] }

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -35,6 +35,9 @@
         "message": true,
         "open": true,
         "save": true
+      },
+      "os": {
+        "all": true
       }
     },
     "bundle": {

diff --git a/src/components/Sidebar/Versions/YARG.tsx b/src/components/Sidebar/Versions/YARG.tsx
@@ -1,4 +1,4 @@
-import { useYARGRelease } from "@app/hooks/useYARGRelease";
+import { YARGChannels, useYARGRelease } from "@app/hooks/useYARGRelease";
 import { YARGStates, useYARGVersion } from "@app/hooks/useYARGVersion";
 import BaseVersion from "./Base";
 import NightlyYARGIcon from "@app/assets/NightlyYARGIcon.png";
@@ -7,11 +7,11 @@ import DevYARGIcon from "@app/assets/DevYARGIcon.png";
 import { NavLink } from "react-router-dom";
 
 interface Props {
-    channel: "stable" | "nightly" | "newEngine";
+    channel: YARGChannels
 }
 
 const YARGVersion: React.FC<Props> = ({ channel }: Props) => {
-    const releaseData = useYARGRelease(channel);
+    const {data: releaseData} = useYARGRelease(channel);
     const { state } = useYARGVersion(releaseData, channel);
 
     function getChannelIcon() {

diff --git a/src/hooks/useYARGRelease.ts b/src/hooks/useYARGRelease.ts
@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Endpoints } from "@octokit/types";
-import { invoke } from "@tauri-apps/api/tauri";
+import { OsType } from "@tauri-apps/api/os";
+
 
 export type YARGChannels = "stable" | "nightly" | "newEngine";
 
@@ -22,62 +23,36 @@ export const useYARGRelease = (channel: YARGChannels) => {
             `https://api.github.com/repos/YARC-Official/${repositoryName[channel]}/releases/latest`)
             .then(res => res.json()),
         select: (data): ExtendedReleaseData => ({ ...data, channel: channel })
-    }).data as ExtendedReleaseData;
+    });
 };
 
-export const getYARGReleaseZip = async (releaseData: ReleaseData) => {
-    const os = await invoke("get_os") as string;
-
-    // Get the zip suffix depending on the OS
-    let zipSuffixes: string[] = [];
-    switch (os) {
-        case "windows":
-            zipSuffixes = ["Windows-x64.zip"];
-            break;
-        case "macos":
-            zipSuffixes = ["MacOS-Universal.zip"];
-            break;
-        case "linux":
-            zipSuffixes = ["Linux-x86_64.zip", "Linux-x64.zip"];
-            break;
-    }
+export const getYARGReleaseZip = (releaseData: ReleaseData, platformType: OsType) => {
+    const suffixesPerPlatform: {[key in OsType]: string[]} = {
+        "Windows_NT": ["Windows-x64.zip"],
+        "Darwin": ["MacOS-Universal.zip"],
+        "Linux": ["Linux-x86_64.zip", "Linux-x64.zip"],
+    };
 
-    // Find the zip in the assets
-    for (const asset of releaseData.assets) {
-        // Check all of the suffixes
-        let skip = true;
-        for (const suffix of zipSuffixes) {
-            if (asset.name.endsWith(suffix)) {
-                skip = false;
-                break;
-            }
-        }
+    const platformSuffixes = suffixesPerPlatform[platformType];
 
-        // If not found, continue
-        if (skip) {
-            continue;
-        }
+    const asset = releaseData.assets.find(asset => {
+        return platformSuffixes.find(suffix => asset.name.endsWith(suffix));
+    });
 
-        // Done!
-        return asset.browser_download_url;
-    }
+    if(asset) return asset.browser_download_url;
 
     // Otherwise, the platform is not supported!
-    throw new Error(`Platform "${os}" is not supported in release "${releaseData.tag_name}"!`);
+    throw new Error(`Platform of type "${platformType}" is not supported in release "${releaseData.tag_name}"!`);
 };
 
-export const getYARGReleaseSig = async (releaseData: ReleaseData) => {
-    const zip = await getYARGReleaseZip(releaseData);
-    const sig = zip.split("/").at(-1) + ".sig";
+export const getYARGReleaseSigFromZipURL = (releaseData: ReleaseData, zipUrl: string) => {
+    const sigAssetName = zipUrl.split("/").slice(-1) + ".sig";
+
+    const asset = releaseData.assets.find(asset => asset.name === sigAssetName);
 
-    // Find the zip in the assets
-    for (const asset of releaseData.assets) {
-        if (asset.name == sig) {
-            return asset.browser_download_url;
-        }
-    }
+    if(asset) return asset.browser_download_url;
 
     // Otherwise, there's no signature
-    console.warn(`Failed to find signature file "${sig}" in release "${releaseData.tag_name}"!`);
+    console.warn(`Failed to find signature file "${sigAssetName}" in release "${releaseData.tag_name}"!`);
     return undefined;
 };
diff --git a/src/hooks/useYARGVersion.ts b/src/hooks/useYARGVersion.ts
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
-import { ExtendedReleaseData, getYARGReleaseZip, getYARGReleaseSig } from "./useYARGRelease";
+import { ExtendedReleaseData, getYARGReleaseZip, getYARGReleaseSigFromZipURL } from "./useYARGRelease";
 import { invoke } from "@tauri-apps/api/tauri";
+import { type } from "@tauri-apps/api/os";
 import { useYARGState } from "@app/stores/YARGStateStore";
 import { useDownloadClient } from "@app/utils/Download/provider";
 import { YARGDownload, generateYARGUUID } from "@app/utils/Download/Processors/YARG";
@@ -24,12 +25,12 @@ export type YARGVersion = {
     payload?: DownloadPayload
 }
 
-export const useYARGVersion = (releaseData: ExtendedReleaseData, profileName: string) => {
+export const useYARGVersion = (releaseData: ExtendedReleaseData | undefined, profileName: string): YARGVersion => {
+    // Initialize hooks before returning
     const { state, setState } = useYARGState(releaseData?.tag_name);
-
     const dialogManager = useDialogManager();
     const downloadClient = useDownloadClient();
-    const payload = downloadClient.usePayload(generateYARGUUID(releaseData?.tag_name));
+    const payload = downloadClient.usePayload(releaseData ? generateYARGUUID(releaseData.tag_name) : undefined);
 
     useEffect(() => {
         (
@@ -46,6 +47,15 @@ export const useYARGVersion = (releaseData: ExtendedReleaseData, profileName: st
         )();
     }, [releaseData]);
 
+    // If we don't have a release data yet, return a dummy loading version;
+    if(!releaseData) {
+        return {
+            state,
+            play: async () => {},
+            download: async () => {},
+        };
+    } 
+
     const play = async () => {
         if (!releaseData) return;
 
@@ -83,8 +93,9 @@ export const useYARGVersion = (releaseData: ExtendedReleaseData, profileName: st
         setState(YARGStates.DOWNLOADING);
 
         try {
-            const zipUrl = await getYARGReleaseZip(releaseData);
-            const sigUrl = await getYARGReleaseSig(releaseData);
+            const platformType = await type();
+            const zipUrl = getYARGReleaseZip(releaseData, platformType);
+            const sigUrl = getYARGReleaseSigFromZipURL(releaseData, zipUrl);
 
             const downloader = new YARGDownload(
                 zipUrl,
@@ -104,5 +115,5 @@ export const useYARGVersion = (releaseData: ExtendedReleaseData, profileName: st
         }
     };
 
-    return { state, play, download, payload } as YARGVersion;
+    return { state, play, download, payload };
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -18,16 +18,7 @@ window.addEventListener("error", event => {
     LogError(JSON.stringify(serializeError(event)));
 });
 
-let error = undefined;
-
-try {
-    await invoke("init");
-} catch (e) {
-    error = e as string;
-    console.error(e);
-}
-
-if (!error) {
+invoke("init").then(() => {
     ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         <React.StrictMode>
             <ErrorBoundary FallbackComponent={ErrorScreen} onError={onError}>
@@ -42,7 +33,10 @@ if (!error) {
             </ErrorBoundary>
         </React.StrictMode>
     );
-} else {
+}).catch(e => {
+    console.error(e);
+    LogError(JSON.stringify(serializeError(e)));
+
     ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         <React.StrictMode>
             <TitleBar />
@@ -51,8 +45,8 @@ if (!error) {
                 Please report this to our Discord or GitHub immediately.
             </p>
             <p>
-                {error}
+                {e instanceof Error ? e.message : JSON.stringify(serializeError(e))}
             </p>
         </React.StrictMode>
     );
-}
+});