feat: persist changelog queries

packages/repl/package.json

@@ -24,6 +24,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "filesize": "^10.1.6",
+    "idb-keyval": "^6.2.1",
     "lucide-solid": "^0.445.0",
     "md5": "^2.3.0",
     "monaco-editor": "0.52.0",

packages/repl/src/App.tsx

@@ -1,10 +1,8 @@
 import type { RunnerController } from './components/runner/Runner.tsx'
 
 import { ColorModeProvider, ColorModeScript } from '@kobalte/core'
-import {
+import { QueryClient } from '@tanstack/solid-query'
-  QueryClient,
+import { PersistQueryClientProvider } from '@tanstack/solid-query-persist-client'
-  QueryClientProvider,
-} from '@tanstack/solid-query'
 import { LucidePartyPopper } from 'lucide-solid'
 import { workerInit } from 'mtcute-repl-worker/client'
 import { createSignal, lazy, onCleanup, onMount, Show } from 'solid-js'
@@ -17,6 +15,7 @@ import { SettingsDialog, type SettingsTab } from './components/settings/Settings
 import { Updater } from './components/Updater.tsx'
 import { Resizable, ResizableHandle, ResizablePanel } from './lib/components/ui/resizable.tsx'
 import { Toaster } from './lib/components/ui/sonner.tsx'
+import { createIdbPersister } from './store/query-persist.ts'
 
 const Editor = lazy(() => import('./components/editor/Editor.tsx'))
 
@@ -41,6 +40,7 @@ export function App() {
 
     if (localBuild === null || new Date(localBuild) !== new Date(latestBuild)) {
       localStorage.setItem('repl:buildVersion', latestBuild)
+      queryClient.clear()
       setTimeout(() => {
         toast.custom(t => (
           <div
@@ -81,7 +81,12 @@ export function App() {
     <div class="flex h-screen w-screen flex-col overflow-hidden">
       <Toaster />
       <ColorModeScript />
-      <QueryClientProvider client={queryClient}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{
+          persister: createIdbPersister(),
+        }}
+      >
         <ColorModeProvider>
           <iframe
             ref={workerIframe}
@@ -113,7 +118,7 @@ export function App() {
               />
             </div>
           </nav>
-          <div class="bg-border h-px shrink-0" />
+          <div class="h-px shrink-0 bg-border" />
           <Show
             when={!updating()}
             fallback={(
@@ -163,7 +168,7 @@ export function App() {
             onTabChange={setSettingsTab}
           />
         </ColorModeProvider>
-      </QueryClientProvider>
+      </PersistQueryClientProvider>
     </div>
   )
 }

packages/repl/src/store/query-persist.ts

@@ -0,0 +1,21 @@
+import type {
+  PersistedClient,
+  Persister,
+} from '@tanstack/solid-query-persist-client'
+import { del, get, set } from 'idb-keyval'
+
+const PERSIST_KEY = 'repl-query-persist'
+
+export function createIdbPersister() {
+  return {
+    persistClient: async (client: PersistedClient) => {
+      await set(PERSIST_KEY, client)
+    },
+    restoreClient: async () => {
+      return await get<PersistedClient>(PERSIST_KEY)
+    },
+    removeClient: async () => {
+      await del(PERSIST_KEY)
+    },
+  } as Persister
+}

pnpm-lock.yaml

@@ -106,6 +106,9 @@ importers:
       filesize:
         specifier: ^10.1.6
         version: 10.1.6
+      idb-keyval:
+        specifier: ^6.2.1
+        version: 6.2.1
       lucide-solid:
         specifier: ^0.445.0
         version: 0.445.0(solid-js@1.9.4)
@@ -1951,6 +1954,9 @@ packages:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
+  idb-keyval@6.2.1:
+    resolution: {integrity: sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==}
+
   idb@8.0.1:
     resolution: {integrity: sha512-EkBCzUZSdhJV8PxMSbeEV//xguVKZu9hZZulM+2gHXI0t2hGVU3eYE6/XnH77DS6FM2FY8wl17aDcu9vXpvLWQ==}
 
@@ -4690,6 +4696,8 @@ snapshots:
 
   html-tags@3.3.1: {}
 
+  idb-keyval@6.2.1: {}
+
   idb@8.0.1: {}
 
   ignore@5.3.2: {}