chore: migrate build system to Vite and update TS config

.github/actions/get-node-version/src/main.ts

@@ -1,6 +1,6 @@
-import { setOutput, setFailed, getInput } from "@actions/core";
-import semver from "semver";
+import { getInput, setFailed, setOutput } from "@actions/core";
 import { readFileSync } from "fs";
+import semver from "semver";
 
 (() => {
   const inputPath = getInput("package-json");

.pre-commit-config.yaml

@@ -13,6 +13,9 @@ repos:
     hooks:
       - id: prettier
         exclude_types: [markdown, yaml]
+        additional_dependencies:
+          - prettier@3.1.0
+          - "@trivago/prettier-plugin-sort-imports@6.0.0"
   - repo: https://github.com/thibaudcolas/pre-commit-stylelint
     rev: v16.9.0
     hooks:

.prettierrc

@@ -15,5 +15,9 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false,
-  "vueIndentScriptAndStyle": false
+  "vueIndentScriptAndStyle": false,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["<THIRD_PARTY_MODULES>", "^@thunderstore/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

apps/cyberstorm-remix/app/c/community.tsx

@@ -1,3 +1,12 @@
+import { faDiscord } from "@fortawesome/free-brands-svg-icons";
+import { faBook, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  getPublicEnvVariables,
+  getSessionTools,
+} from "cyberstorm/security/publicEnvVariables";
+import { Suspense } from "react";
 import type {
   LoaderFunctionArgs,
   ShouldRevalidateFunctionArgs,
@@ -9,26 +18,19 @@ import {
   useLocation,
   useOutletContext,
 } from "react-router";
+
 import {
   Heading,
   NewButton,
   NewIcon,
   NewLink,
   SkeletonBox,
+  classnames,
 } from "@thunderstore/cyberstorm";
-import "./Community.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBook, faDownload } from "@fortawesome/free-solid-svg-icons";
-import { faDiscord } from "@fortawesome/free-brands-svg-icons";
-import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 import { DapperTs } from "@thunderstore/dapper-ts";
+
 import { type OutletContextShape } from "../root";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
-import { Suspense } from "react";
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import "./Community.css";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   if (params.communityId) {

apps/cyberstorm-remix/app/c/tabs/PackageSearch/PackageSearch.tsx

@@ -1,12 +1,14 @@
-import { useLoaderData, useOutletContext } from "react-router";
-import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
-import { PackageOrderOptions } from "~/commonComponents/PackageSearch/components/PackageOrder";
-import { DapperTs } from "@thunderstore/dapper-ts";
 import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
+import { useLoaderData, useOutletContext } from "react-router";
+import { PackageSearch } from "~/commonComponents/PackageSearch/PackageSearch";
+import { PackageOrderOptions } from "~/commonComponents/PackageSearch/components/PackageOrder";
 import { type OutletContextShape } from "~/root";
+
+import { DapperTs } from "@thunderstore/dapper-ts";
+
 import type { Route } from "./+types/PackageSearch";
 
 export async function loader({ params, request }: Route.LoaderArgs) {

apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.tsx

@@ -4,12 +4,12 @@ import {
   faSquareCheck,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { memo } from "react";
+import { type TRISTATE } from "~/commonComponents/types";
+
+import { Actionable, NewIcon, classnames } from "@thunderstore/cyberstorm";
 
 import "./CheckboxList.css";
-import { Actionable, NewIcon } from "@thunderstore/cyberstorm";
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
-import { type TRISTATE } from "~/commonComponents/types";
-import { memo } from "react";
 
 type typeA<B> = (v: B) => void;
 

apps/cyberstorm-remix/app/commonComponents/CodeBoxHTML/CodeBoxHTML.tsx

@@ -1,4 +1,5 @@
-import { useState, useMemo, useRef, useEffect } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
 import "./CodeBoxHTML.css";
 import "./Highlight.css";
 

apps/cyberstorm-remix/app/commonComponents/Collapsible/Collapsible.tsx

@@ -1,9 +1,10 @@
-import { memo, type PropsWithChildren } from "react";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { type PropsWithChildren, memo } from "react";
+
+import { NewIcon, classnames } from "@thunderstore/cyberstorm";
+
 import "./Collapsible.css";
-import { NewIcon } from "@thunderstore/cyberstorm";
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 interface Props extends PropsWithChildren {
   headerTitle: string;

apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx

@@ -1,6 +1,8 @@
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import { type ReactElement, useState } from "react";
+
+import { classnames } from "@thunderstore/cyberstorm";
+
 import "./CollapsibleText.css";
-import { useState, type ReactElement } from "react";
 
 export interface CollapsibleTextProps {
   text?: string;

apps/cyberstorm-remix/app/commonComponents/Connection/Connection.tsx

@@ -1,8 +1,10 @@
-import "./Connection.css";
-import { NewIcon, NewSwitch } from "@thunderstore/cyberstorm";
-import { type OAuthConnection } from "@thunderstore/dapper/types";
 import { type ReactElement } from "react";
-import { type userLinkedAccountDisconnectProviders } from "../../../../../packages/thunderstore-api/src";
+
+import { NewIcon, NewSwitch } from "@thunderstore/cyberstorm";
+import { type OAuthConnection } from "@thunderstore/dapper";
+import { type userLinkedAccountDisconnectProviders } from "@thunderstore/thunderstore-api";
+
+import "./Connection.css";
 
 interface ConnectionProps {
   name: string;

apps/cyberstorm-remix/app/commonComponents/CopyButton/CopyButton.tsx

@@ -1,10 +1,12 @@
+import { faCheck, faClone } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClone, faCheck } from "@fortawesome/free-solid-svg-icons";
 import { type Dispatch, type SetStateAction, useState } from "react";
-import "./CopyButton.css";
-import { NewIcon, Tooltip } from "@thunderstore/cyberstorm/src";
 import React from "react";
 
+import { NewIcon, Tooltip } from "@thunderstore/cyberstorm";
+
+import "./CopyButton.css";
+
 interface CopyButtonProps {
   text: string;
 }

apps/cyberstorm-remix/app/commonComponents/Footer/Footer.tsx

@@ -1,15 +1,17 @@
-import "./Footer.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faBoltLightning } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import {
   Heading,
   NewButton,
   NewIcon,
   NewLink,
   ThunderstoreLogoHorizontal,
 } from "@thunderstore/cyberstorm";
-import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
+
+import "./Footer.css";
 
 const AD_IMAGE_SRC = "/cyberstorm-static/images/tsmm_screenshot.png";
 const DISCORD_URL = "https://discord.thunderstore.io/";

apps/cyberstorm-remix/app/commonComponents/ListingDependency/ListingDependency.tsx

@@ -1,6 +1,7 @@
+import { Image, NewLink, formatToDisplayName } from "@thunderstore/cyberstorm";
 import { type PackageVersionDependency } from "@thunderstore/thunderstore-api";
+
 import "./ListingDependency.css";
-import { formatToDisplayName, Image, NewLink } from "@thunderstore/cyberstorm";
 
 export interface ListingDependencyProps {
   dependency: PackageVersionDependency;

apps/cyberstorm-remix/app/commonComponents/Markdown/Markdown.tsx

@@ -1,5 +1,6 @@
 import { MarkdownHooks } from "react-markdown";
 import gfm from "remark-gfm";
+
 import { nimbusSanitize } from "./Sanitize";
 
 interface MarkdownProps {

apps/cyberstorm-remix/app/commonComponents/Markdown/Sanitize.ts

@@ -1,5 +1,5 @@
-import { type Schema, sanitize } from "hast-util-sanitize";
 import type { Nodes } from "hast";
+import { type Schema, sanitize } from "hast-util-sanitize";
 
 /**
  * Based on:

apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx

@@ -1,46 +1,45 @@
+import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 import {
   faBars,
-  faGamepad,
-  faLongArrowLeft,
-  faCaretRight,
   faCaretDown,
+  faCaretRight,
   faCog,
-  faUsers,
+  faGamepad,
+  faLongArrowLeft,
   faUpload,
+  faUsers,
 } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowRightToBracket,
+  faSignOut,
+} from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
+import {
+  buildAuthLoginUrl,
+  buildLogoutUrl,
+} from "cyberstorm/utils/ThunderstoreAuth";
 
-import "./MobileNavigation.css";
-import "./Navigation.css";
 import {
   Heading,
   Menu,
   Modal,
+  NewAvatar,
   NewButton,
   NewDropDown,
   NewDropDownDivider,
   NewDropDownItem,
-  NewAvatar,
   NewIcon,
   NewLink,
   OverwolfLogo,
   ThunderstoreLogo,
+  classnames,
 } from "@thunderstore/cyberstorm";
-import { type CurrentUser } from "@thunderstore/dapper/types";
-
-import {
-  faSignOut,
-  faArrowRightToBracket,
-} from "@fortawesome/free-solid-svg-icons";
-import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { type CurrentUser } from "@thunderstore/dapper";
 
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
-import {
-  buildAuthLoginUrl,
-  buildLogoutUrl,
-} from "cyberstorm/utils/ThunderstoreAuth";
-import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
-import { getPublicEnvVariables } from "cyberstorm/security/publicEnvVariables";
+import "./MobileNavigation.css";
+import "./Navigation.css";
 
 export function Navigation(props: {
   // hydrationCheck: boolean;

apps/cyberstorm-remix/app/commonComponents/Navigation/NavigationWrapper.tsx

@@ -1,8 +1,8 @@
 // import { useSession } from "@thunderstore/ts-api-react";
 // import { useHydrated } from "remix-utils/use-hydrated";
 // import { useEffect, useRef, useState } from "react";
+import { type CurrentUser } from "@thunderstore/dapper";
 
-import { type CurrentUser } from "@thunderstore/dapper/types";
 import {
   MobileNavigationMenu,
   MobileUserPopoverContent,

apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx

@@ -1,15 +1,11 @@
 import { faGhost, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  type CurrentUser,
-  type PackageListings,
-  type Section,
-} from "@thunderstore/dapper/types";
-import { memo, Suspense, useEffect, useRef, useState } from "react";
+import { setParamsBlobValue } from "cyberstorm/utils/searchParamsUtils";
+import { isPromise } from "cyberstorm/utils/typeChecks";
+import { Suspense, memo, useEffect, useRef, useState } from "react";
+import { Await, useNavigationType, useSearchParams } from "react-router";
 import { useDebounce } from "use-debounce";
 
-import "./PackageSearch.css";
-import { type CategorySelection, type TRISTATE } from "../types";
 import {
   CardPackage,
   EmptyState,
@@ -18,26 +14,31 @@ import {
   NewTextInput,
   SkeletonBox,
 } from "@thunderstore/cyberstorm";
-import { Await, useNavigationType, useSearchParams } from "react-router";
+import { PackageLikeAction } from "@thunderstore/cyberstorm-forms";
+import {
+  type CurrentUser,
+  type PackageListings,
+  type Section,
+} from "@thunderstore/dapper";
+import { DapperTs } from "@thunderstore/dapper-ts";
+import {
+  type CommunityFilters,
+  type RequestConfig,
+} from "@thunderstore/thunderstore-api";
+
+import { CheckboxList } from "../CheckboxList/CheckboxList";
+import { CollapsibleMenu } from "../Collapsible/Collapsible";
+import { RadioGroup } from "../RadioGroup/RadioGroup";
+import { type CategorySelection, type TRISTATE } from "../types";
+import "./PackageSearch.css";
+import { CategoryTagCloud } from "./components/CategoryTagCloud/CategoryTagCloud";
 import { PackageCount } from "./components/PackageCount/PackageCount";
 import {
-  isPackageOrderOptions,
   PackageOrder,
   PackageOrderOptions,
   type PackageOrderOptionsType,
+  isPackageOrderOptions,
 } from "./components/PackageOrder";
-import { RadioGroup } from "../RadioGroup/RadioGroup";
-import { CategoryTagCloud } from "./components/CategoryTagCloud/CategoryTagCloud";
-import { CollapsibleMenu } from "../Collapsible/Collapsible";
-import { CheckboxList } from "../CheckboxList/CheckboxList";
-import { PackageLikeAction } from "@thunderstore/cyberstorm-forms";
-import {
-  type CommunityFilters,
-  type RequestConfig,
-} from "@thunderstore/thunderstore-api";
-import { DapperTs } from "@thunderstore/dapper-ts";
-import { isPromise } from "cyberstorm/utils/typeChecks";
-import { setParamsBlobValue } from "cyberstorm/utils/searchParamsUtils";
 
 const PER_PAGE = 20;
 

apps/cyberstorm-remix/app/commonComponents/PackageSearch/components/CategoryTagCloud/CategoryTagCloud.tsx

@@ -1,10 +1,11 @@
 import { faBan, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { memo } from "react";
 
-import "./CategoryTagCloud.css";
-import { type CategorySelection, TRISTATE_STATES } from "../../../types";
 import { NewButton, NewIcon, NewTag } from "@thunderstore/cyberstorm";
-import { memo } from "react";
+
+import { type CategorySelection, TRISTATE_STATES } from "../../../types";
+import "./CategoryTagCloud.css";
 
 const OFF = TRISTATE_STATES[0];
 

apps/cyberstorm-remix/app/commonComponents/PackageSearch/components/PackageCount/PackageCount.tsx

@@ -1,4 +1,5 @@
 import { memo } from "react";
+
 import "./PackageCount.css";
 
 interface Props {

apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.tsx

@@ -1,8 +1,9 @@
-import { Heading, Image } from "@thunderstore/cyberstorm";
+import { type PropsWithChildren, type ReactElement, memo } from "react";
+
+import { Heading, Image, classnames } from "@thunderstore/cyberstorm";
+import type { HeadingSizes } from "@thunderstore/cyberstorm-theme";
+
 import "./PageHeader.css";
-import { memo, type PropsWithChildren, type ReactElement } from "react";
-import type { HeadingSizes } from "@thunderstore/cyberstorm-theme/src/components";
-import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 export interface PageHeaderProps extends PropsWithChildren {
   image?: string | null;