fix(stage-*): not respond if no websocket works

Author: nekomeowww

apps/stage-tamagotchi-electron/src/renderer/main.ts

@@ -1,6 +1,12 @@
-import { initializeApp } from '@proj-airi/stage-ui/services'
+import type { Plugin } from 'vue'
+
+import Tres from '@tresjs/core'
+
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { MotionPlugin } from '@vueuse/motion'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
+import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -32,11 +38,12 @@ const router = createRouter({
   routes: setupLayouts(routes),
 })
 
-// Initialize and mount the app using the shared initialization logic
-initializeApp(App, {
-  router,
-  pinia,
-  i18n,
-}).then((app) => {
-  app.mount('#app')
-})
+createApp(App)
+  .use(MotionPlugin)
+  // TODO: Fix autoAnimatePlugin type error
+  .use(autoAnimatePlugin as unknown as Plugin)
+  .use(router)
+  .use(pinia)
+  .use(i18n)
+  .use(Tres)
+  .mount('#app')

apps/stage-tamagotchi/src/main.ts

@@ -1,6 +1,12 @@
-import { initializeApp } from '@proj-airi/stage-ui/services'
+import type { Plugin } from 'vue'
+
+import Tres from '@tresjs/core'
+
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { MotionPlugin } from '@vueuse/motion'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
+import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -32,11 +38,12 @@ const router = createRouter({
   routes: setupLayouts(routes),
 })
 
-// Initialize and mount the app using the shared initialization logic
-initializeApp(App, {
-  router,
-  pinia,
-  i18n,
-}).then((app) => {
-  app.mount('#app')
-})
+createApp(App)
+  .use(MotionPlugin)
+  // TODO: Fix autoAnimatePlugin type error
+  .use(autoAnimatePlugin as unknown as Plugin)
+  .use(router)
+  .use(pinia)
+  .use(i18n)
+  .use(Tres)
+  .mount('#app')

apps/stage-web/src/App.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { OnboardingDialog, ToasterRoot } from '@proj-airi/stage-ui/components'
+import { useConfiguratorForAiriSdk } from '@proj-airi/stage-ui/stores/configurator'
 import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
 import { useOnboardingStore } from '@proj-airi/stage-ui/stores/onboarding'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
 import { StageTransitionGroup } from '@proj-airi/ui-transitions'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView } from 'vue-router'
 import { toast, Toaster } from 'vue-sonner'
@@ -23,6 +24,7 @@ const settings = storeToRefs(settingsStore)
 const onboardingStore = useOnboardingStore()
 const { shouldShowSetup } = storeToRefs(onboardingStore)
 const isDark = useDark()
+const { dispose } = useConfiguratorForAiriSdk()
 
 const primaryColor = computed(() => {
   return isDark.value
@@ -66,6 +68,10 @@ onMounted(async () => {
   await settingsStore.initializeStageModel()
 })
 
+onUnmounted(() => {
+  dispose()
+})
+
 // Handle first-time setup events
 function handleSetupConfigured() {
   onboardingStore.markSetupCompleted()

apps/stage-web/src/main.ts

@@ -1,11 +1,14 @@
-import type { App as VueApp } from 'vue'
+import type { Plugin } from 'vue'
 import type { Router } from 'vue-router'
 
+import Tres from '@tresjs/core'
 import NProgress from 'nprogress'
 
-import { initializeApp } from '@proj-airi/stage-ui/services'
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { MotionPlugin } from '@vueuse/motion'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
+import { createApp } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 
@@ -37,30 +40,12 @@ router.afterEach(() => {
   NProgress.done()
 })
 
-// Custom initialization callback for web-specific post-initialization
-async function onInitialized(_app: VueApp, router: Router) {
-  // Handle PWA registration after router is ready
-  router.isReady()
-    .then(async () => {
-      if (import.meta.env.SSR) {
-        return
-      }
-      if (import.meta.env.VITE_APP_TARGET_HUGGINGFACE_SPACE) {
-        return
-      }
-
-      const { registerSW } = await import('./modules/pwa')
-      registerSW({ immediate: true })
-    })
-    .catch(error => console.error('Failed during post-initialization:', error))
-}
-
-// Initialize and mount the app using the shared initialization logic with web-specific options
-initializeApp(App, {
-  router,
-  pinia,
-  i18n,
-  onInitialized,
-}).then((app) => {
-  app.mount('#app')
-})
+createApp(App)
+  .use(MotionPlugin)
+  // TODO: Fix autoAnimatePlugin type error
+  .use(autoAnimatePlugin as unknown as Plugin)
+  .use(router)
+  .use(pinia)
+  .use(i18n)
+  .use(Tres)
+  .mount('#app')

apps/stage-web/vite.config.ts

@@ -49,6 +49,7 @@ export default defineConfig({
 
   resolve: {
     alias: {
+      '@proj-airi/server-sdk': resolve(join(import.meta.dirname, '..', '..', 'packages', 'server-sdk', 'src')),
       '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src')),
       '@proj-airi/i18n': resolve(join(import.meta.dirname, '..', '..', 'packages', 'i18n', 'src')),
     },

packages/server-sdk/src/client.ts

@@ -4,6 +4,13 @@ import WebSocket from 'crossws/websocket'
 
 import { sleep } from '@moeru/std'
 
+class ReconnectingError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'ReconnectingError'
+  }
+}
+
 export interface ClientOptions<C = undefined> {
   url?: string
   name: string
@@ -18,6 +25,7 @@ export interface ClientOptions<C = undefined> {
 
 export class Client<C = undefined> {
   private connected = false
+  private connecting = false
   private websocket?: WebSocket
   private shouldClose = false
 
@@ -70,6 +78,10 @@ export class Client<C = undefined> {
         return
       }
       catch (err) {
+        if (err instanceof ReconnectingError) {
+          return
+        }
+
         this.opts.onError?.(err)
         const delay = Math.min(2 ** attempts * 1000, 30_000) // capped exponential backoff
         await sleep(delay)
@@ -82,25 +94,35 @@ export class Client<C = undefined> {
     if (this.shouldClose) {
       return
     }
+
     await this.retryWithExponentialBackoff(() => this._connect())
   }
 
   private _connect(): Promise<void> {
     if (this.shouldClose || this.connected) {
       return Promise.resolve()
     }
+    if (this.connecting) {
+      return Promise.reject(new ReconnectingError('Already connecting'))
+    }
 
     return new Promise((resolve, reject) => {
+      this.connecting = true
+
       const ws = new WebSocket(this.opts.url)
       this.websocket = ws
 
+      ws.onmessage = this.handleMessageBound
       ws.onerror = (event: any) => {
+        this.connecting = false
         this.connected = false
+
         this.opts.onError?.(event)
         reject(event?.error ?? new Error('WebSocket error'))
       }
-
       ws.onclose = () => {
+        this.connecting = false
+
         if (this.connected) {
           this.connected = false
           this.opts.onClose?.()
@@ -109,11 +131,10 @@ export class Client<C = undefined> {
           void this.tryReconnectWithExponentialBackoff()
         }
       }
-
-      ws.onmessage = this.handleMessageBound
-
       ws.onopen = () => {
+        this.connecting = false
         this.connected = true
+
         this.opts.token ? this.tryAuthenticate() : this.tryAnnounce()
         resolve()
       }

packages/stage-ui/package.json

@@ -26,8 +26,6 @@
     "./constants": "./src/constants/index.ts",
     "./libs/*": "./src/libs/*.ts",
     "./libs": "./src/libs/index.ts",
-    "./services/*": "./src/services/*.ts",
-    "./services": "./src/services/index.ts",
     "./stores/*": "./src/stores/*.ts",
     "./stores": "./src/stores/index.ts",
     "./utils": "./src/utils/index.ts"