chore: sveltekit 2 (#143)

* chore: sveltekit 2 chore: upgrade bun to v1.0.18 chore: bump dependencies chore: lint * fix: bun format erroring on unknown prettier rule file * chore: update devcontainer extensions + suggestions --------- Co-authored-by: Rob B <[email protected]>
satisfactorymodding · Dec 21, 2023 · 14a38da · 14a38da
1 parent aee6c1b
commit 14a38da
Show file tree

Hide file tree

Showing 37 changed files with 122 additions and 122 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -34,7 +34,9 @@
 				"vunguyentuan.vscode-postcss",
 				"bbenoist.Nix",
 				"mikestead.dotenv",
-				"me-dutour-mathieu.vscode-github-actions"
+				"me-dutour-mathieu.vscode-github-actions",
+				"eamodio.gitlens",
+				"GitHub.copilot"
 			]
 		}
 	},

diff --git a/.github/workflows/push-base.yml b/.github/workflows/push-base.yml
@@ -8,7 +8,7 @@ on:
         type: string
 
 env:
-  BUN_VERSION: "1.0.11"
+  BUN_VERSION: "1.0.18"
 
 jobs:
   build:

diff --git a/.prettierrc → .prettierrc.json b/.prettierrc → .prettierrc.json
@@ -8,4 +8,4 @@
   "trailingComma": "none",
   "useTabs": false,
   "plugins": ["prettier-plugin-svelte"]
-}
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -4,6 +4,8 @@
     "streetsidesoftware.code-spell-checker",
     "dbaeumer.vscode-eslint",
     "csstools.postcss",
-    "vunguyentuan.vscode-postcss"
+    "vunguyentuan.vscode-postcss",
+    "github.copilot",
+    "eamodio.gitlens"
   ]
 }
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM oven/bun:1.0.11 as build
+FROM oven/bun:1.0.18 as build
 
 ARG NODE_ENV_ARG=production
 
@@ -20,7 +20,7 @@ RUN NODE_ENV=$NODE_ENV_ARG set -o allexport; set -ex; source .env.$NODE_ENV_ARG;
 
 FROM ghcr.io/vilsol/yeet:v0.6.4 as yeet
 
-FROM oven/bun:1.0.11
+FROM oven/bun:1.0.18
 
 COPY --from=yeet /yeet /yeet
 

diff --git a/bun.lockb b/bun.lockb
diff --git a/flake.lock b/flake.lock
diff --git a/package.json b/package.json
@@ -38,9 +38,9 @@
     "felte": "^1.2.12",
     "graphql": "^16.8.1",
     "js-cookie": "^3.0.5",
-    "jsdom": "^22.1.0",
+    "jsdom": "^23.0.1",
     "jszip": "^3.10.1",
-    "marked": "^9.1.5",
+    "marked": "^11.1.0",
     "marked-gfm-heading-id": "^3.1.0",
     "marked-mangle": "^1.1.4",
     "prismjs": "^1.29.0",
@@ -69,12 +69,13 @@
     "@parcel/watcher": "^2.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@skeletonlabs/skeleton": "^2.4.0",
-    "@skeletonlabs/tw-plugin": "^0.2.3",
-    "@sveltejs/adapter-node": "^1.3.1",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.27.3",
+    "@skeletonlabs/tw-plugin": "^0.3.0",
+    "@sveltejs/adapter-node": "^2.0.0",
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/js-cookie": "^3.0.5",
-    "@types/marked": "^5.0.2",
+    "@types/marked": "^6.0.0",
     "@types/node": "^20.8.10",
     "@types/prismjs": "^1.26.2",
     "@types/semver": "^7.5.4",
@@ -95,7 +96,7 @@
     "husky": "^8.0.3",
     "postcss": "^8.4.31",
     "postcss-import-url": "^7.2.0",
-    "postcss-load-config": "^4.0.1",
+    "postcss-load-config": "^5.0.2",
     "postcss-preset-env": "^9.3.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
@@ -108,8 +109,8 @@
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "urql": "^4.0.5",
-    "vite": "^4.5.0",
-    "vite-plugin-tailwind-purgecss": "^0.1.3"
+    "vite": "^5.0.0",
+    "vite-plugin-tailwind-purgecss": "^0.2.0"
   },
   "type": "module",
   "engines": {

diff --git a/src/lib/components/auth/LoginDialog.svelte b/src/lib/components/auth/LoginDialog.svelte
@@ -12,9 +12,9 @@
   import { user, userToken } from '$lib/stores/user';
   import cookie from 'js-cookie';
   import { getTranslate } from '@tolgee/svelte';
-  import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton";
+  import { getModalStore, getToastStore, type ModalSettings } from '@skeletonlabs/skeleton';
   import LoginModal from '$lib/modals/LoginModal.svelte';
-  import { derived, get, writable } from "svelte/store";
+  import { derived, get, writable } from 'svelte/store';
 
   const client = getContextClient();
 
@@ -81,15 +81,19 @@
   };
 
   const signingIn = writable(false);
-  const loginModal = derived(signingIn, (val) => ({
-      type: 'component',
-      component: {
-        ref: LoginModal,
-        props: {
-          signingIn: val
+  const loginModal = derived(
+    signingIn,
+    (val) =>
+      ({
+        type: 'component',
+        component: {
+          ref: LoginModal,
+          props: {
+            signingIn: val
+          }
         }
-      }
-    } satisfies ModalSettings))
+      }) satisfies ModalSettings
+  );
 
   const modalStore = getModalStore();
 

diff --git a/src/lib/components/general/FicsitCard.svelte b/src/lib/components/general/FicsitCard.svelte
@@ -47,12 +47,8 @@
     class:text-gray-500={fake}
     class:font-flow={fake}
     class="grid grid-max-auto sm:grid-cols-2 grid-cols-1 justify-items-center">
-    <div
-      class="cursor-pointer card-image-container"
-      >
-      <a href={link}
-      on:keypress={() => goto(link)}
-      tabindex="0">
+    <div class="cursor-pointer card-image-container">
+      <a href={link} on:keypress={() => goto(link)} tabindex="0">
         {#if fake}
           <div class="bg-gray-500 logo min-w-full min-h-full max-w-full max-h-full" />
         {:else}
@@ -81,14 +77,18 @@
         <div class:font-flow={fake} style="word-wrap: anywhere">
           {renderedDescription}
 
-          <div class="float-right"
-               style="width: {(actionButtons?.clientWidth || 0) - 8}px; height: {(actionButtons?.clientHeight || 0) - 8}px">
+          <div
+            class="float-right"
+            style="width: {(actionButtons?.clientWidth || 0) - 8}px; height: {(actionButtons?.clientHeight || 0) -
+              8}px">
             <!-- Placeholder for action buttons -->
           </div>
         </div>
       </div>
 
-      <div class="self-end py-2 px-2 flex flex-row items-center text-lg gap-1 absolute bottom-0 right-0" bind:this={actionButtons}>
+      <div
+        class="self-end py-2 px-2 flex flex-row items-center text-lg gap-1 absolute bottom-0 right-0"
+        bind:this={actionButtons}>
         {#if !fake}
           <a
             href={link}

diff --git a/src/lib/components/general/Page404.svelte b/src/lib/components/general/Page404.svelte
@@ -1,8 +1,6 @@
 <div class="w-full h-full flex justify-center items-center pt-16">
   <div class="flex flex-col items-center gap-4">
-    <h1 class="h1">
-      404
-    </h1>
+    <h1 class="h1">404</h1>
     <h4 class="h4">there probably should be something here</h4>
   </div>
-</div>
+</div>
diff --git a/src/lib/components/general/TopBar.svelte b/src/lib/components/general/TopBar.svelte
@@ -25,9 +25,9 @@
 
   const openSidebar = () => {
     drawerStore.open({
-      width: 'w-[280px]',
+      width: 'w-[280px]'
     });
-  }
+  };
 </script>
 
 <AppBar variant="static">

diff --git a/src/lib/components/general/TranslationDropdown.svelte b/src/lib/components/general/TranslationDropdown.svelte
@@ -2,7 +2,7 @@
   import { getTolgee, getTranslate } from '@tolgee/svelte';
   import { writable } from 'svelte/store';
   import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
-  import { browser } from "$app/environment";
+  import { browser } from '$app/environment';
 
   const tolgee = getTolgee(['language']);
 
@@ -51,7 +51,7 @@
     }
   } as const;
 
-  const lang = writable<string>(browser && localStorage.getItem('language') || $tolgee.getLanguage());
+  const lang = writable<string>((browser && localStorage.getItem('language')) || $tolgee.getLanguage());
   lang.subscribe((l) => {
     $tolgee.changeLanguage(l);
     if (browser) {

diff --git a/src/lib/components/mods/ModGrid.svelte b/src/lib/components/mods/ModGrid.svelte
@@ -17,13 +17,13 @@
 
   const client = getContextClient();
 
-  let search = browser && $storePage.url.searchParams.get('q') || '';
+  let search = (browser && $storePage.url.searchParams.get('q')) || '';
 
   let order: Order = Order.Desc;
   let orderBy: ModFields = ModFields.LastVersionDate;
 
   let perPage = 32;
-  let page = parseInt(browser && $storePage.url.searchParams.get('p') || '0', 10) || 0;
+  let page = parseInt((browser && $storePage.url.searchParams.get('p')) || '0', 10) || 0;
 
   $: mods = queryStore({
     query: GetModsDocument,

diff --git a/src/lib/components/mods/ModLatestVersions.svelte b/src/lib/components/mods/ModLatestVersions.svelte
@@ -41,9 +41,10 @@
               <span class="material-icons">{stabilities[stability]}</span>
             </div>
             <div class="grid grid-flow-row">
-              <a href="{base}/mod/{modId}/version/{latestVersions[stability].id}/"
-              class="text-yellow-500 underline"
-              title="Click to view patch notes for this version"
+              <a
+                href="{base}/mod/{modId}/version/{latestVersions[stability].id}/"
+                class="text-yellow-500 underline"
+                title="Click to view patch notes for this version"
                 >Version {latestVersions[stability].version} ({stability})</a>
               <div>{prettyDate(latestVersions[stability].created_at)}</div>
             </div>

diff --git a/src/lib/components/mods/ModVersions.svelte b/src/lib/components/mods/ModVersions.svelte
@@ -94,8 +94,7 @@
                       <nav class="list-nav">
                         <ul>
                           <li>
-                            <a
-                              href={API_REST + '/mod/' + modId + '/versions/' + version.id + '/download'}>
+                            <a href={API_REST + '/mod/' + modId + '/versions/' + version.id + '/download'}>
                               <span class="material-icons">polyline</span>
                               <span>{$t('version.download-multi-target')}</span>
                             </a>

diff --git a/src/lib/components/mods/compatibility/CompatibilityGrid.svelte b/src/lib/components/mods/compatibility/CompatibilityGrid.svelte
@@ -3,8 +3,8 @@
   import CompatibilityStateText from '$lib/components/mods/compatibility/CompatibilityStateText.svelte';
   import { markdown } from '../../../utils/markdown';
   import CompatibilityIcon from '$lib/components/mods/compatibility/CompatibilityIcon.svelte';
-  import { getModalStore } from "@skeletonlabs/skeleton";
-  import CompatibilityModal from "$lib/modals/CompatibilityModal.svelte";
+  import { getModalStore } from '@skeletonlabs/skeleton';
+  import CompatibilityModal from '$lib/modals/CompatibilityModal.svelte';
   import { getTranslate } from '@tolgee/svelte';
 
   export let compatibility: CompatibilityInfoInput;
@@ -31,9 +31,7 @@
     <h3 class="text-2xl my-4 font-bold">Compatibility Information</h3>
     <p>Click the colored text for more details.</p>
     <div class="grid grid-flow-row">
-      <table
-        aria-label="Available Releases"
-        class="table table-hover max-w-auto !overflow-visible">
+      <table aria-label="Available Releases" class="table table-hover max-w-auto !overflow-visible">
         <tbody>
           <tr class="border rounded !border-surface-500">
             <td><div class="flex justify-center items-center"><CompatibilityIcon /> Early Access</div></td>
@@ -44,18 +42,12 @@
           </tr>
           <tr class="border rounded !border-surface-500">
             <td class="text-center">
-              <button
-                class="min-w-0 m-0"
-                title="Click for more information"
-                on:click={openCompatibility}>
+              <button class="min-w-0 m-0" title="Click for more information" on:click={openCompatibility}>
                 <CompatibilityStateText state={compatibility?.EA?.state} />
               </button>
             </td>
             <td class="text-center">
-              <button
-                class="min-w-0 m-0"
-                title="Click for more information"
-                on:click={openCompatibility}>
+              <button class="min-w-0 m-0" title="Click for more information" on:click={openCompatibility}>
                 <CompatibilityStateText state={compatibility?.EXP?.state} />
               </button>
             </td>
@@ -86,9 +78,9 @@
               </td>
             {:else}
               <td colspan="2">
-                  <span style="padding: 2px; white-space:normal">
-                    {$t('compatibility-info.state.unknown.description')}
-                  </span>
+                <span style="padding: 2px; white-space:normal">
+                  {$t('compatibility-info.state.unknown.description')}
+                </span>
               </td>
             {/if}
           </tr>

diff --git a/src/lib/components/mods/compatibility/ModCompatibilityEdit.svelte b/src/lib/components/mods/compatibility/ModCompatibilityEdit.svelte
@@ -27,7 +27,7 @@
   <AccordionItem>
     <svelte:fragment slot="summary">
       <span class="material-icons text-sm">rocket_launch</span>
-    {$t('early-access')} - {$t('compatibility')}</svelte:fragment>
+      {$t('early-access')} - {$t('compatibility')}</svelte:fragment>
     <svelte:fragment slot="content">
       <CompatibilityEdit bind:compatibility={compatibilityInfo.EA} />
     </svelte:fragment>

diff --git a/src/lib/components/sml-versions/SMLVersionForm.svelte b/src/lib/components/sml-versions/SMLVersionForm.svelte
@@ -142,8 +142,10 @@
           </ValidationMessage>
 
           <button class="btn variant-ghost-primary" on:click={addTarget}>{$t('add')}</button>
-          <button class="btn variant-ghost-primary" disabled={$data.targets.length == 1} on:click={() => removeTarget(i)}
-            >{$t('remove')}</button>
+          <button
+            class="btn variant-ghost-primary"
+            disabled={$data.targets.length == 1}
+            on:click={() => removeTarget(i)}>{$t('remove')}</button>
         </div>
       {/each}
 

diff --git a/src/lib/components/versions/VersionDependenciesGrid.svelte b/src/lib/components/versions/VersionDependenciesGrid.svelte
@@ -6,9 +6,7 @@
 </script>
 
 <div class="grid grid-flow-row">
-  <table
-    aria-label="Mod Dependency"
-    class="table table-hover max-w-auto !overflow-visible">
+  <table aria-label="Mod Dependency" class="table table-hover max-w-auto !overflow-visible">
     <tbody>
       <tr class="border rounded !border-surface-500">
         <td>Mod Dependency</td>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ on: @@
             type: string
     env:
-      BUN_VERSION: "1.0.11"
+      BUN_VERSION: "1.0.18"
     jobs:
       build:
@@ Expand Down @@