feat(depot): add setting run depot at launch

package.json

@@ -34,7 +34,6 @@
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.14.0",
-    "@tanstack/react-query-devtools": "^5.14.0",
     "@tauri-apps/api": "2.0.0-alpha.11",
     "@tauri-apps/cli": "2.0.0-alpha.17",
     "@tauri-apps/plugin-autostart": "2.0.0-alpha.3",
@@ -117,7 +116,6 @@
     "tailwindcss": "^3.3.6",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
-    "vite-plugin-top-level-await": "^1.4.1",
     "vite-tsconfig-paths": "^4.2.2"
   }
 }

pnpm-lock.yaml

@@ -53,9 +53,6 @@ dependencies:
   '@tanstack/react-query':
     specifier: ^5.14.0
     version: 5.14.0(react@18.2.0)
-  '@tanstack/react-query-devtools':
-    specifier: ^5.14.0
-    version: 5.14.0(@tanstack/react-query@5.14.0)(react@18.2.0)
   '@tauri-apps/api':
     specifier: 2.0.0-alpha.11
     version: 2.0.0-alpha.11
@@ -298,9 +295,6 @@ devDependencies:
   vite:
     specifier: ^5.0.10
     version: 5.0.10(@types/node@20.10.4)
-  vite-plugin-top-level-await:
-    specifier: ^1.4.1
-    version: 1.4.1(vite@5.0.10)
   vite-tsconfig-paths:
     specifier: ^4.2.2
     version: 4.2.2(typescript@5.3.3)(vite@5.0.10)
@@ -800,6 +794,12 @@ packages:
       '@noble/hashes': 1.3.1
     dev: false
 
+  /@noble/curves@1.3.0:
+    resolution: {integrity: sha512-t01iSXPuN+Eqzb4eBX0S5oubSqXbK/xXa1Ne18Hj8f9pStxztHCE2gfboSp/dZRLSqfuLpRK2nDXDK+W9puocA==}
+    dependencies:
+      '@noble/hashes': 1.3.3
+    dev: false
+
   /@noble/hashes@1.3.1:
     resolution: {integrity: sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==}
     engines: {node: '>= 16'}
@@ -868,7 +868,7 @@ packages:
   /@nostr-fetch/kernel@0.14.0:
     resolution: {integrity: sha512-gJWlOXYBkb3SqTP8WTm7E8dwGA7g+TaYtZntjMf3L2wzivS2OjVLSURyuidSyzdpK8kPpyiL2O3RuotssncO1g==}
     dependencies:
-      '@noble/curves': 1.1.0
+      '@noble/curves': 1.3.0
       '@noble/hashes': 1.3.3
     dev: false
 
@@ -1773,16 +1773,6 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: false
 
-  /@rollup/plugin-virtual@3.0.2:
-    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dev: true
-
   /@rollup/rollup-android-arm-eabi@4.9.0:
     resolution: {integrity: sha512-+1ge/xmaJpm1KVBuIH38Z94zj9fBD+hp+/5WLaHgyY8XLq1ibxk/zj6dTXaqM2cAbYKq8jYlhHd6k05If1W5xA==}
     cpu: [arm]
@@ -2055,21 +2045,6 @@ packages:
     resolution: {integrity: sha512-OEri9fVDYT8XEqgh/dc6fFp1niyqu+MDY+Vp/LwU+scdk9xQLZ7KdUMEUh/sqTEjRM5BlFzAhAv+EIYcvSxt0Q==}
     dev: false
 
-  /@tanstack/query-devtools@5.13.5:
-    resolution: {integrity: sha512-effSYz9AWcZ6sNd+c8LCBYFIuDZApoCTXEpRlEYChBZpMz9QUUVMLToThwCyUY49+T5pANL3XxgZf3HV7hwJlg==}
-    dev: false
-
-  /@tanstack/react-query-devtools@5.14.0(@tanstack/react-query@5.14.0)(react@18.2.0):
-    resolution: {integrity: sha512-A/I/jYeyyNduI3+Kb84emkvqw5YOt7+MpO1ZpfYFyfHzCd5dQ7nWuCZzI67gS/JARwqRfGkuuuJkTfuKnipEzA==}
-    peerDependencies:
-      '@tanstack/react-query': ^5.14.0
-      react: ^18.0.0
-    dependencies:
-      '@tanstack/query-devtools': 5.13.5
-      '@tanstack/react-query': 5.14.0(react@18.2.0)
-      react: 18.2.0
-    dev: false
-
   /@tanstack/react-query@5.14.0(react@18.2.0):
     resolution: {integrity: sha512-+qCooNZr7aGr6a0UEblfEgDSO1y+H7h7JnT4nUlbyfgCGE695lmBiqTciuW1C1Jr6J6Z2bwyd6YmBDKFKszWhA==}
     peerDependencies:
@@ -6023,11 +5998,6 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
-  /uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
-    hasBin: true
-    dev: true
-
   /virtua@0.17.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xTlxQ2/mDNSpU1tsdmpZT3kgoxSnjodTfs+OUeahkTSlBEWXnBujXKWXdl+hIRKOF1Igq8/gKPYltGSQV9p2eA==}
     peerDependencies:
@@ -6038,20 +6008,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /vite-plugin-top-level-await@1.4.1(vite@5.0.10):
-    resolution: {integrity: sha512-hogbZ6yT7+AqBaV6lK9JRNvJDn4/IJvHLu6ET06arNfo0t2IsyCaon7el9Xa8OumH+ESuq//SDf8xscZFE0rWw==}
-    peerDependencies:
-      vite: '>=2.8'
-    dependencies:
-      '@rollup/plugin-virtual': 3.0.2
-      '@swc/core': 1.3.100
-      uuid: 9.0.1
-      vite: 5.0.10(@types/node@20.10.4)
-    transitivePeerDependencies:
-      - '@swc/helpers'
-      - rollup
-    dev: true
-
   /vite-tsconfig-paths@4.2.2(typescript@5.3.3)(vite@5.0.10):
     resolution: {integrity: sha512-dq0FjyxHHDnp0uS3P12WEOX2W7NeuLzX9AWP38D7Zw2CTbFErapwQVlCiT5DMJcVWKQ1MMdTe92PZl/rBQ7qcw==}
     peerDependencies:

src/app/depot/index.tsx

@@ -15,7 +15,8 @@ export function DepotScreen() {
       setLoading(true);
 
       await ark.launchDepot();
-      await delay(5000); // delay 5s to make sure depot is running
+      await ark.createSetting('depot', '1');
+      await delay(2000); // delay 2s to make sure depot is running
 
       // default depot url: ws://localhost:6090
       // #TODO: user can custom depot url

src/libs/ark/ark.ts

@@ -51,6 +51,7 @@ export class Ark {
     outbox: boolean;
     media: boolean;
     hashtag: boolean;
+    depot: boolean;
   };
 
   constructor({ storage, platform }: { storage: Database; platform: Platform }) {
@@ -62,6 +63,7 @@ export class Ark {
       outbox: false,
       media: true,
       hashtag: true,
+      depot: false,
     };
   }
 
@@ -162,6 +164,7 @@ export class Ark {
       if (item.key === 'media') this.settings.media = !!parseInt(item.value);
       if (item.key === 'hashtag') this.settings.hashtag = !!parseInt(item.value);
       if (item.key === 'autoupdate') this.settings.autoupdate = !!parseInt(item.value);
+      if (item.key === 'depot') this.settings.depot = !!parseInt(item.value);
     }
 
     const explicitRelayUrls = normalizeRelayUrlSet([

src/libs/ark/provider.tsx

@@ -8,6 +8,7 @@ import { PropsWithChildren, createContext, useContext, useEffect, useState } fro
 import { Ark } from '@libs/ark';
 import { LoaderIcon } from '@shared/icons';
 import { QUOTES } from '@utils/constants';
+import { delay } from '@utils/delay';
 
 const ArkContext = createContext<Ark>(undefined);
 
@@ -23,8 +24,8 @@ const ArkProvider = ({ children }: PropsWithChildren<object>) => {
       const _ark = new Ark({ storage: sqlite, platform: platformName });
       await _ark.init();
 
-      if (_ark.settings.autoupdate) {
       // check update
+      if (_ark.settings.autoupdate) {
         const update = await check();
         // install new version
         if (update) {
@@ -35,6 +36,12 @@ const ArkProvider = ({ children }: PropsWithChildren<object>) => {
         }
       }
 
+      // start depot
+      if (_ark.settings.depot) {
+        await ark.launchDepot();
+        await delay(2000);
+      }
+
       setArk(_ark);
     } catch (e) {
       console.error(e);

src/main.jsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRoot } from 'react-dom/client';
 import { Toaster } from 'sonner';
 import { ArkProvider } from '@libs/ark/provider';
@@ -19,7 +18,6 @@ const root = createRoot(container);
 
 root.render(
   <QueryClientProvider client={queryClient}>
-    <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-right" />
     <Toaster position="top-center" theme="system" closeButton />
     <ArkProvider>
       <App />

src/shared/widgets/index.ts

@@ -7,6 +7,7 @@ export * from './file';
 export * from './hashtag';
 export * from './thread';
 export * from './group';
+export * from './titleBar';
 export * from './nostrBand/trendingAccounts';
 export * from './nostrBand/trendingNotes';
 export * from './other/wrapper';
@@ -16,5 +17,4 @@ export * from './other/widgetList';
 export * from './other/addGroupFeeds';
 export * from './other/addHashtagFeeds';
 export * from './other/userProfile';
-export * from './titleBar';
 export * from './other/nostrBandUserProfile';

src/shared/widgets/newsfeed.tsx

@@ -1,6 +1,6 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { useCallback, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { VList, VListHandle } from 'virtua';
 import { useArk } from '@libs/ark';
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
@@ -15,6 +15,8 @@ import { FETCH_LIMIT } from '@utils/constants';
 
 export function NewsfeedWidget() {
   const ark = useArk();
+  const ref = useRef<VListHandle>();
+
   const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed'],
@@ -48,14 +50,12 @@ export function NewsfeedWidget() {
       refetchOnWindowFocus: false,
     });
 
-  const ref = useRef<VListHandle>();
   const allEvents = useMemo(
     () => (data ? data.pages.flatMap((page) => page) : []),
     [data]
   );
 
-  const renderItem = useCallback(
+  const renderItem = (event: NDKEvent) => {
-    (event: NDKEvent) => {
     switch (event.kind) {
       case NDKKind.Text:
         return <MemoizedTextNote key={event.id} event={event} />;
@@ -64,15 +64,13 @@ export function NewsfeedWidget() {
       default:
         return <UnknownNote key={event.id} event={event} />;
     }
-    },
+  };
-    [data]
-  );
 
   return (
     <WidgetWrapper>
       <TitleBar id="9999" isLive />
       <LiveUpdater status={status} />
-      <VList className="flex-1" ref={ref} overscan={2}>
+      <VList ref={ref} overscan={2} className="flex-1">
         {status === 'pending' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
@@ -91,7 +89,7 @@ export function NewsfeedWidget() {
               className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none"
             >
               {isFetchingNextPage ? (
-                <LoaderIcon className="h-4 w-4 animate-spin" />
+                <LoaderIcon className="h-5 w-5 animate-spin" />
               ) : (
                 <>
                   <ArrowRightCircleIcon className="h-5 w-5" />

src/shared/widgets/other/liveUpdater.tsx

@@ -6,9 +6,10 @@ import { ChevronUpIcon } from '@shared/icons';
 
 export function LiveUpdater({ status }: { status: QueryStatus }) {
   const ark = useArk();
-  const [events, setEvents] = useState<NDKEvent[]>([]);
   const queryClient = useQueryClient();
 
+  const [events, setEvents] = useState<NDKEvent[]>([]);
+
   const update = async () => {
     await queryClient.setQueryData(
       ['newsfeed'],

vite.config.ts

@@ -1,17 +1,9 @@
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
-import topLevelAwait from 'vite-plugin-top-level-await';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [
+  plugins: [react(), viteTsconfigPaths()],
-    react(),
-    viteTsconfigPaths(),
-    topLevelAwait({
-      promiseExportName: '__tla',
-      promiseImportName: (i) => `__tla_${i}`,
-    }),
-  ],
   envPrefix: ['VITE_', 'TAURI_'],
   build: {
     target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13',