chore: update npm packages (16-12-2023) (#35)

* chore: update packages

* fix: svgs not converting to react component

* fix: ts not finding declaration file for tauri api

* fix: marked.parse wrong type

* chore: rename cacheTime to gcTime as per new tanstack query v5

https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#rename-cachetime-to-gctime

package.json

@@ -14,57 +14,56 @@
  "front:build": "tsc && vite build"
  },
  "devDependencies": {
- "@octokit/types": "^11.1.0",
- "@tauri-apps/cli": "^1.4.0",
- "@types/dompurify": "^3.0.2",
- "@types/marked": "^5.0.1",
- "@types/node": "^20.5.0",
- "@types/react": "^18.2.20",
- "@types/react-dom": "^18.2.7",
- "@types/sort-array": "^4.1.0",
- "@typescript-eslint/eslint-plugin": "^6.3.0",
- "@typescript-eslint/parser": "^6.3.0",
- "@vitejs/plugin-react": "^4.0.4",
- "autoprefixer": "^10.4.15",
- "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.9",
- "vite-plugin-node-polyfills": "^0.10.0",
- "vite-plugin-svgr": "^3.2.0",
- "vite-tsconfig-paths": "^4.2.0"
+ "@octokit/types": "^12.4.0",
+ "@tauri-apps/cli": "^1.5.8",
+ "@types/dompurify": "^3.0.5",
+ "@types/node": "^20.10.4",
+ "@types/react": "^18.2.45",
+ "@types/react-dom": "^18.2.18",
+ "@types/sort-array": "^4.1.2",
+ "@typescript-eslint/eslint-plugin": "^6.14.0",
+ "@typescript-eslint/parser": "^6.14.0",
+ "@vitejs/plugin-react": "^4.2.1",
+ "autoprefixer": "^10.4.16",
+ "eslint": "^8.56.0",
+ "eslint-import-resolver-typescript": "^3.6.1",
+ "eslint-plugin-import": "^2.29.1",
+ "eslint-plugin-react": "^7.33.2",
+ "postcss": "^8.4.32",
+ "postcss-cli": "^11.0.0",
+ "typescript": "^5.3.3",
+ "vite": "^5.0.10",
+ "vite-plugin-node-polyfills": "^0.17.0",
+ "vite-plugin-svgr": "^4.2.0",
+ "vite-tsconfig-paths": "^4.2.2"
  },
  "dependencies": {
- "@radix-ui/react-dialog": "^1.0.4",
+ "@radix-ui/react-dialog": "^1.0.5",
  "@radix-ui/react-dropdown-menu": "^2.0.6",
  "@radix-ui/react-progress": "^1.0.3",
  "@radix-ui/react-toggle-group": "^1.0.4",
- "@radix-ui/react-tooltip": "1.0.6",
- "@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.197",
+ "@radix-ui/react-tooltip": "1.0.7",
+ "@tanstack/query-sync-storage-persister": "^5.14.0",
+ "@tanstack/react-query": "^5.14.0",
+ "@tanstack/react-query-persist-client": "^5.14.0",
+ "@tauri-apps/api": "^1.5.2",
+ "@types/lodash": "^4.14.202",
  "async-wait-until": "^2.0.12",
  "date-fns": "^2.30.0",
- "dompurify": "^3.0.5",
+ "dompurify": "^3.0.6",
  "gray-matter": "^4.0.3",
  "js-video-url-parser": "^0.5.1",
  "lodash": "^4.17.21",
- "marked": "^7.0.2",
+ "marked": "^11.1.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
- "react-error-boundary": "^4.0.11",
+ "react-error-boundary": "^4.0.12",
  "react-image": "^4.1.0",
- "react-router-dom": "^6.15.0",
- "serialize-error": "^11.0.1",
+ "react-router-dom": "^6.21.0",
+ "serialize-error": "^11.0.3",
  "sort-array": "^4.1.5",
  "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
- "vite-plugin-top-level-await": "^1.3.1",
- "zustand": "^4.4.1"
+ "vite-plugin-top-level-await": "^1.4.1",
+ "zustand": "^4.4.7"
  }
 }

src/assets/Icons/index.ts

@@ -1,30 +1,37 @@
-import { ReactComponent as AddIcon } from "./Add.svg";
-import { ReactComponent as ChartersIcon } from "./Charters.svg";
-import { ReactComponent as CheckmarkIcon } from "./Checkmark.svg";
-import { ReactComponent as CloseIcon } from "./Close.svg";
-import { ReactComponent as DateIcon } from "./Date.svg";
-import { ReactComponent as DiscordIcon } from "./Discord.svg";
-import { ReactComponent as GithubIcon } from "./Github.svg";
-import { ReactComponent as HomeIcon } from "./Home.svg";
-import { ReactComponent as InformationIcon } from "./Information.svg";
-import { ReactComponent as InstallingIcon } from "./Installing.svg";
-import { ReactComponent as LinkIcon } from "./Link.svg";
-import { ReactComponent as MinimizeIcon } from "./Minimize.svg";
-import { ReactComponent as NewsIcon } from "./News.svg";
-import { ReactComponent as NoteIcon } from "./Note.svg";
-import { ReactComponent as OrganizerIcon } from "./Organizer.svg";
-import { ReactComponent as QueueIcon } from "./Queue.svg";
-import { ReactComponent as QueueListIcon } from "./QueueList.svg";
-import { ReactComponent as SettingsIcon } from "./Settings.svg";
-import { ReactComponent as SongIcon } from "./Song.svg";
-import { ReactComponent as TimeIcon } from "./Time.svg";
-import { ReactComponent as TwitterIcon } from "./Twitter.svg";
-import { ReactComponent as UpdateIcon } from "./Update.svg";
-import { ReactComponent as DriveIcon } from "./Drive.svg";
-import { ReactComponent as UnknownUserIcon } from "./UnknownUser.svg";
-import { ReactComponent as BackIcon } from "./Back.svg";
-import { ReactComponent as WarningIcon } from "./Warning.svg";
-import { ReactComponent as DropdownIcon } from "./Dropdown.svg";
+/**
+ * Note for adding new icons:
+ * For auto-converting SVG to React Components, we're currently using vite-plugin-svgr.
+ * When referencing the path for the svg, insert "?react" at the end of the path to auto-convert into a React Component. 
+ * Also if possible, replace the static colors inside the SVG file with "currentColor" for dynamic color.
+ */
+
+import AddIcon from "./Add.svg?react";
+import ChartersIcon from "./Charters.svg?react";
+import CheckmarkIcon from "./Checkmark.svg?react";
+import CloseIcon from "./Close.svg?react";
+import DateIcon from "./Date.svg?react";
+import DiscordIcon from "./Discord.svg?react";
+import GithubIcon from "./Github.svg?react";
+import HomeIcon from "./Home.svg?react";
+import InformationIcon from "./Information.svg?react";
+import InstallingIcon from "./Installing.svg?react";
+import LinkIcon from "./Link.svg?react";
+import MinimizeIcon from "./Minimize.svg?react";
+import NewsIcon from "./News.svg?react";
+import NoteIcon from "./Note.svg?react";
+import OrganizerIcon from "./Organizer.svg?react";
+import QueueIcon from "./Queue.svg?react";
+import QueueListIcon from "./QueueList.svg?react";
+import SettingsIcon from "./Settings.svg?react";
+import SongIcon from "./Song.svg?react";
+import TimeIcon from "./Time.svg?react";
+import TwitterIcon from "./Twitter.svg?react";
+import UpdateIcon from "./Update.svg?react";
+import DriveIcon from "./Drive.svg?react";
+import UnknownUserIcon from "./UnknownUser.svg?react";
+import BackIcon from "./Back.svg?react";
+import WarningIcon from "./Warning.svg?react";
+import DropdownIcon from "./Dropdown.svg?react";
 
 export {
  AddIcon,

src/hooks/useNewsArticle.ts

@@ -13,7 +13,7 @@ export interface Article {
 export const useNewsArticle = (md: string) => {
  return useQuery({
  queryKey: ["NewsArticle", md],
- cacheTime: 60 * 60 * 1000,
+ gcTime: 60 * 60 * 1000,
  queryFn: async () => await fetch(
  `${newsBaseURL}/articles/${md}.md`)
  .then(res => res.text())

src/query.ts

@@ -6,7 +6,7 @@ export const queryClient = new QueryClient({
  defaultOptions: {
  queries: {
  refetchOnWindowFocus: false,
- cacheTime: Infinity
+ gcTime: Infinity
  },
  },
 });

src/routes/NewsPage/index.tsx

@@ -78,7 +78,9 @@ function NewsPage() {
  /> : ""
  }
 
- <SanitizedHTML dirtyHTML={marked.parse(content)} />
+ <SanitizedHTML 
+ dirtyHTML={ marked.parse(content, {async: false}) as string } 
+ />
  </div>
  </>;
 }

src/routes/Queue/index.tsx

@@ -1,11 +1,10 @@
 import styles from "./Queue.module.css";
 import QueueSection from "@app/components/Queue/QueueSection";
 import { useDownloadClient } from "@app/utils/Download/provider";
-import { ReactComponent as QueueListIcon } from "@app/assets/Icons/QueueList.svg";
 import PayloadProgress from "@app/components/PayloadProgress";
 import * as Progress from "@radix-ui/react-progress";
 import { useEffect, useState } from "react";
-import { InstallingIcon } from "@app/assets/Icons";
+import { InstallingIcon, QueueListIcon } from "@app/assets/Icons";
 
 function Queue() {
  // These are for the "You've been staring at this blank page for..."

tsconfig.json

@@ -14,7 +14,7 @@
  "strict": true,
  "forceConsistentCasingInFileNames": true,
  "module": "ES2020",
- "moduleResolution": "Node",
+ "moduleResolution": "Bundler",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noEmit": true,