@fy-/fws-vue 2.3.63 → 2.3.65

package/components/ui/DefaultBreadcrumb.vue

@@ -27,23 +27,44 @@ const baseUrl = computed(() => {
 })
 
 // Memoize breadcrumb schema format to avoid recalculation
-const breadcrumbsSchemaFormat = computed(() => props.nav.map((item, index) => {
-  if (!item.to) {
+const breadcrumbsSchemaFormat = computed(() => {
+  const navLength = props.nav.length
+
+  return props.nav.map((item, index) => {
+    const isLastItem = index === navLength - 1
+
+    // According to Google's guidelines, the last item should not have a URL
+    if (!item.to || isLastItem) {
+      return {
+        '@type': 'ListItem',
+        'position': index + 1,
+        'name': item.name,
+      }
+    }
+
+    // Ensure proper URL construction
+    let itemUrl = item.to
+
+    // Handle relative URLs
+    if (itemUrl.startsWith('/')) {
+      itemUrl = `${baseUrl.value.scheme}://${baseUrl.value.host}${itemUrl}`
+    }
+    else if (!itemUrl.startsWith('http')) {
+      // Handle paths without leading slash
+      itemUrl = `${baseUrl.value.scheme}://${baseUrl.value.host}/${itemUrl}`
+    }
+
+    // Clean up any double slashes (except after protocol)
+    itemUrl = itemUrl.replace(/([^:]\/)\/+/g, '$1')
+
     return {
+      '@type': 'ListItem',
       'position': index + 1,
       'name': item.name,
-      '@type': 'ListItem',
+      'item': itemUrl,
     }
-  }
-
-  const fullUrl = `${baseUrl.value.host}${item.to}`.replace(/\/\//g, '/')
-  return {
-    'position': index + 1,
-    'name': item.name,
-    'item': `${baseUrl.value.scheme}://${fullUrl}`,
-    '@type': 'ListItem',
-  }
-}))
+  })
+})
 
 // Cache breadcrumb ID to avoid string operations on every render
 const breadcrumbId = computed(() => {
@@ -52,11 +73,19 @@ const breadcrumbId = computed(() => {
   return stringHash(chain)
 })
 
+// Class strings extracted for reusability and mobile optimization
+const linkClasses = 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white transition-colors duration-200'
+const textClasses = 'text-xs font-medium text-fv-neutral-500 dark:text-fv-neutral-200'
+const chevronClasses = 'w-4 h-4 md:w-5 md:h-5 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
+const homeIconClasses = 'w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5 md:mr-2 inline-block'
+
 // Only run schema.org setup if we have breadcrumbs
-if (props.nav && props.nav.length) {
+if (props.nav && props.nav.length > 0) {
   useSchemaOrg([
     defineBreadcrumb({
       '@id': `#${breadcrumbId.value}`,
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
       'itemListElement': breadcrumbsSchemaFormat,
     }),
   ])
@@ -64,44 +93,36 @@ if (props.nav && props.nav.length) {
 </script>
 
 <template>
-  <ol class="inline-flex items-center flex-wrap">
-    <template v-for="(item, index) in nav" :key="`bc_${index.toString()}`">
-      <li class="inline-flex items-center">
-        <ChevronRightIcon
-          v-if="index !== 0"
-          :class="
-            index === 0
-              ? 'w-4 h-4 mr-2 inline-block'
-              : 'w-5 h-5 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
-          "
-        />
-
-        <router-link
-          v-if="item.to"
-          :to="item.to"
-          :class="
-            index === 0
-              ? 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
-              : 'text-xs font-medium text-fv-neutral-700 hover:text-fv-neutral-900 dark:text-fv-neutral-200 dark:hover:text-white'
-          "
-        >
-          <HomeIcon
-            v-if="showHome && index === 0"
-            :class="
-              index === 0
-                ? 'w-4 h-4 mr-2 inline-block'
-                : 'w-4 h-4 text-fv-neutral-400 inline-block mx-0.5 md:mx-1.5'
-            "
+  <nav aria-label="Breadcrumb">
+    <ol class="inline-flex items-center flex-wrap gap-y-1">
+      <template v-for="(item, index) in nav" :key="`bc_${index.toString()}`">
+        <li class="inline-flex items-center">
+          <ChevronRightIcon
+            v-if="index !== 0"
+            :class="chevronClasses"
           />
-          <span>{{ item.name }}</span>
-        </router-link>
-        <span
-          v-else
-          class="text-xs font-medium text-fv-neutral-500 dark:text-fv-neutral-200"
-        >
-          {{ item.name }}
-        </span>
-      </li>
-    </template>
-  </ol>
+
+          <router-link
+            v-if="item.to && index !== nav.length - 1"
+            :to="item.to"
+            :class="linkClasses"
+            :aria-current="index === nav.length - 1 ? 'page' : undefined"
+          >
+            <HomeIcon
+              v-if="showHome && index === 0"
+              :class="homeIconClasses"
+            />
+            <span>{{ item.name }}</span>
+          </router-link>
+          <span
+            v-else
+            :class="textClasses"
+            :aria-current="index === nav.length - 1 ? 'page' : undefined"
+          >
+            {{ item.name }}
+          </span>
+        </li>
+      </template>
+    </ol>
+  </nav>
 </template>

package/components/ui/DefaultInput.vue

@@ -387,7 +387,7 @@ defineExpose({ focus, blur, getInputRef })
               @blur="handleBlur"
             >
               <option
-                v-for="opt in options"
+                v-for="opt in (options || [])"
                 :key="opt[0]?.toString()"
                 :value="opt[0]"
               >

package/components/ui/DefaultModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { XCircleIcon } from '@heroicons/vue/24/solid'
 import { useDebounceFn, useEventListener } from '@vueuse/core'
-import { h, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { computed, h, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
 // Use a shared global registry in the window to track all modals across instances
@@ -75,7 +75,7 @@ const props = withDefaults(
 const eventBus = useEventBus()
 
 const isOpen = ref<boolean>(false)
-const modalRef = ref<HTMLElement | null>(null)
+const modalRef = shallowRef<HTMLElement | null>(null)
 let previouslyFocusedElement: HTMLElement | null = null
 let focusableElements: HTMLElement[] = []
 
@@ -91,6 +91,14 @@ const modalUniqueId = shallowRef('')
 // Trap focus within modal for accessibility - memoize selector for better performance
 const focusableSelector = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
 
+// Mobile-optimized backdrop classes
+const backdropClasses = 'flex fixed backdrop-blur-[8px] inset-0 flex-col items-center py-4 md:py-8 px-2 md:px-4 overflow-y-auto text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]'
+
+// Modal panel classes with mobile optimization
+const modalPanelClasses = computed(() => {
+  return `relative ${props.mSize} max-w-[calc(100vw-1rem)] md:max-w-6xl max-h-[85vh] my-auto px-0 box-border bg-white rounded-lg shadow-xl dark:bg-fv-neutral-900 flex flex-col`
+})
+
 function getFocusableElements(element: HTMLElement): HTMLElement[] {
   return Array.from(
     element.querySelectorAll(focusableSelector),
@@ -99,12 +107,11 @@ function getFocusableElements(element: HTMLElement): HTMLElement[] {
   ) as HTMLElement[]
 }
 
-// Use VueUse's useEventListener for better event handling
-function setupKeydownListener() {
-  useEventListener(document, 'keydown', handleKeyDown)
-}
+// Forward declare setModal to avoid use-before-define
+let setModal: any
 
-function handleKeyDown(event: KeyboardEvent) {
+// Memoize keydown handler for better performance
+const handleKeyDown = useDebounceFn((event: KeyboardEvent) => {
   // Only handle events for the top-most modal
   if (!isOpen.value) return
 
@@ -117,25 +124,28 @@ function handleKeyDown(event: KeyboardEvent) {
   // Close on escape
   if (event.key === 'Escape') {
     event.preventDefault()
-    // Use direct state to avoid the use-before-define issue
-    isOpen.value = false
+    setModal(false)
     return
   }
 
-  // Handle tab trapping
+  // Handle tab trapping only if we have focusable elements
   if (event.key === 'Tab' && focusableElements.length > 0) {
+    const firstElement = focusableElements[0]
+    const lastElement = focusableElements[focusableElements.length - 1]
+    const activeElement = document.activeElement
+
     // If shift + tab on first element, focus last element
-    if (event.shiftKey && document.activeElement === focusableElements[0]) {
+    if (event.shiftKey && activeElement === firstElement) {
       event.preventDefault()
-      focusableElements[focusableElements.length - 1].focus()
+      lastElement.focus()
     }
     // If tab on last element, focus first element
-    else if (!event.shiftKey && document.activeElement === focusableElements[focusableElements.length - 1]) {
+    else if (!event.shiftKey && activeElement === lastElement) {
       event.preventDefault()
-      focusableElements[0].focus()
+      firstElement.focus()
     }
   }
-}
+}, 10)
 
 // Check if this modal is the top-most (highest z-index)
 function isTopMostModal(id: string): boolean {
@@ -152,7 +162,7 @@ function isTopMostModal(id: string): boolean {
   return highestEntry[0] === id
 }
 
-const setModal = useDebounceFn((value: boolean) => {
+setModal = useDebounceFn((value: boolean) => {
   if (value === true) {
     if (props.onOpen) props.onOpen()
     previouslyFocusedElement = document.activeElement as HTMLElement
@@ -176,7 +186,8 @@ const setModal = useDebounceFn((value: boolean) => {
     // Set this modal's z-index
     zIndex.value = newZIndex
 
-    setupKeydownListener()
+    // Set up keyboard listener directly
+    useEventListener(document, 'keydown', handleKeyDown)
   }
   if (value === false) {
     if (props.onClose) props.onClose()
@@ -197,12 +208,13 @@ const setModal = useDebounceFn((value: boolean) => {
 watch(isOpen, async (newVal) => {
   if (newVal) {
     await nextTick()
-    if (modalRef.value) {
-      focusableElements = getFocusableElements(modalRef.value)
+    const modalEl = modalRef.value
+    if (modalEl) {
+      focusableElements = getFocusableElements(modalEl)
 
       // Focus the close button or first focusable element
       requestAnimationFrame(() => {
-        const closeButton = modalRef.value?.querySelector('button[aria-label="Close modal"]') as HTMLElement
+        const closeButton = modalEl.querySelector('button[aria-label="Close modal"]') as HTMLElement
         if (closeButton) {
           closeButton.focus()
         }
@@ -211,7 +223,7 @@ watch(isOpen, async (newVal) => {
         }
         else {
           // If no focusable elements, focus the modal itself
-          modalRef.value?.focus()
+          modalEl.focus()
         }
       })
     }
@@ -243,10 +255,10 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
 <template>
   <ClientOnly>
     <transition
-      enter-active-class="duration-50 ease-out"
+      enter-active-class="duration-150 ease-out"
       enter-from-class="opacity-0"
       enter-to-class="opacity-100"
-      leave-active-class="duration-50 ease-in"
+      leave-active-class="duration-100 ease-in"
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >
@@ -262,14 +274,14 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
       >
         <!-- Backdrop with click to close functionality -->
         <div
-          class="flex fixed backdrop-blur-[8px] inset-0 flex-col items-center py-8 px-4 overflow-y-auto text-fv-neutral-800 dark:text-fv-neutral-300 bg-fv-neutral-900/[.20] dark:bg-fv-neutral-50/[.20]"
+          :class="backdropClasses"
           :style="{ zIndex }"
           @click="handleBackdropClick"
         >
           <!-- Modal panel -->
           <div
             ref="modalRef"
-            :class="`relative ${mSize} max-w-6xl max-h-[85vh] my-auto px-0 box-border bg-white rounded-lg shadow dark:bg-fv-neutral-900 flex flex-col`"
+            :class="modalPanelClasses"
             :style="{ zIndex }"
             tabindex="-1"
             @click.stop
@@ -277,17 +289,17 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
             <!-- Header with title if provided -->
             <div
               v-if="title"
-              class="flex items-center justify-between p-2 w-full border-b rounded-t dark:border-fv-neutral-700"
+              class="flex items-center justify-between p-2 md:p-3 w-full border-b rounded-t dark:border-fv-neutral-700"
             >
               <slot name="before" />
               <h2
                 v-if="title"
                 :id="`${props.id}-title`"
-                class="text-xl font-semibold text-fv-neutral-900 dark:text-white"
+                class="text-lg md:text-xl font-semibold text-fv-neutral-900 dark:text-white"
                 v-html="title"
               />
               <button
-                class="text-fv-neutral-400 bg-transparent hover:bg-fv-neutral-200 hover:text-fv-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-fv-neutral-600 dark:hover:text-white"
+                class="text-fv-neutral-400 bg-transparent hover:bg-fv-neutral-200 hover:text-fv-neutral-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-fv-neutral-600 dark:hover:text-white transition-colors duration-200"
                 aria-label="Close modal"
                 @click="setModal(false)"
               >
@@ -295,7 +307,7 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
               </button>
             </div>
             <!-- Content area -->
-            <div :class="`p-2 space-y-3 flex-grow ${ofy}`">
+            <div :class="`p-2 md:p-4 space-y-3 flex-grow ${ofy}`">
               <slot />
             </div>
           </div>

package/components/ui/DefaultPaging.vue

@@ -282,12 +282,13 @@ onMounted(() => {
             </div>
             <input
               v-else
+              :id="`jump-input-${id}`"
               v-model="jumpPageValue"
               type="number"
               :min="1"
               :max="items.page_max"
               :class="`pagination-jump-input ${inputWidthClass}`"
-              placeholder=""
+              placeholder="#"
               @keydown="handleJumpInputKeydown"
               @blur="showJumpInput = false; jumpPageValue = ''"
             >
@@ -336,12 +337,13 @@ onMounted(() => {
             </div>
             <input
               v-else
+              :id="`jump-input-${id}`"
               v-model="jumpPageValue"
               type="number"
               :min="1"
               :max="items.page_max"
               :class="`pagination-jump-input ${inputWidthClass}`"
-              placeholder=""
+              placeholder="#"
               @keydown="handleJumpInputKeydown"
               @blur="showJumpInput = false; jumpPageValue = ''"
             >
@@ -366,12 +368,13 @@ onMounted(() => {
             </div>
             <input
               v-else
+              :id="`jump-input-${id}`"
               v-model="jumpPageValue"
               type="number"
               :min="1"
               :max="items.page_max"
               :class="`pagination-jump-input ${inputWidthClass}`"
-              placeholder=""
+              placeholder="#"
               @keydown="handleJumpInputKeydown"
               @blur="showJumpInput = false; jumpPageValue = ''"
             >

package/composables/rest.ts

@@ -27,15 +27,19 @@ export interface APIResult {
   status?: number
 }
 
-// Cache for URL parsing to avoid repeated parsing of the same URL
+// Use WeakMap for caches to allow garbage collection of unused entries
 const urlParseCache = new Map<string, string>()
 
-// Global request hash cache shared across all instances
+// Global request hash cache with size limit to prevent memory leaks
 const globalHashCache = new Map<string, number>()
+const MAX_HASH_CACHE_SIZE = 1000
 
 // Track in-flight requests to avoid duplicates
 const inFlightRequests = new Map<number, Promise<any>>()
 
+// Reusable TextEncoder instance
+const textEncoder = new TextEncoder()
+
 // Detect if we're in SSR mode once and cache the result
 let isSSRMode: boolean | null = null
 
@@ -73,7 +77,7 @@ function stringifyParams(params?: RestParams): string {
   return params ? JSON.stringify(params) : ''
 }
 
-// Compute request hash with global caching
+// Compute request hash with global caching and size limit
 function computeRequestHash(url: string, method: RestMethod, params?: RestParams): number {
   const cacheKey = `${url}|${method}|${stringifyParams(params)}`
 
@@ -83,17 +87,25 @@ function computeRequestHash(url: string, method: RestMethod, params?: RestParams
   const urlForHash = getUrlForHash(url)
   const hash = stringHash(urlForHash + method + stringifyParams(params))
 
+  // Implement LRU-like cache eviction when size limit is reached
+  if (globalHashCache.size >= MAX_HASH_CACHE_SIZE) {
+    // Delete the first (oldest) entry
+    const firstKey = globalHashCache.keys().next().value
+    if (firstKey !== undefined) {
+      globalHashCache.delete(firstKey)
+    }
+  }
+
   globalHashCache.set(cacheKey, hash)
   return hash
 }
 
-function str2ab(str) {
-  const encoder = new TextEncoder()
-  return encoder.encode(str)
+function str2ab(str: string): Uint8Array {
+  return textEncoder.encode(str)
 }
 
-// Create HMAC signature
-async function createHMACSignature(secret, data) {
+// Create HMAC signature with proper typing
+async function createHMACSignature(secret: string, data: string): Promise<string> {
   const key = await crypto.subtle.importKey(
     'raw',
     str2ab(secret),
@@ -122,10 +134,13 @@ params?: RestParams,
   // Pre-check for server rendering state
   const isSSR = isServerRendered()
 
-  // Handle API error response consistently
+  // Handle API error response consistently - memoize emitter functions
+  const emitMainLoading = (value: boolean) => eventBus.emit('main-loading', value)
+  const emitRestError = (result: any) => eventBus.emit('rest-error', result)
+
   function handleErrorResult<ResultType extends APIResult>(result: ResultType): Promise<ResultType> {
-    eventBus.emit('main-loading', false)
-    eventBus.emit('rest-error', result)
+    emitMainLoading(false)
+    emitRestError(result)
     return Promise.reject(result)
   }
 
@@ -197,8 +212,8 @@ params?: RestParams,
           serverRouter.addResult(requestHash, restError)
         }
 
-        eventBus.emit('main-loading', false)
-        eventBus.emit('rest-error', restError)
+        emitMainLoading(false)
+        emitRestError(restError)
         return Promise.resolve(restError)
       }
       finally {

package/composables/seo.ts

@@ -27,22 +27,29 @@ export interface LazyHead {
   twitterCreator?: string
 }
 
-// Helper function to process image URLs
+// Cache for processed image URLs
+const processedImageUrlCache = new Map<string, string>()
+
+// Helper function to process image URLs with caching
 function processImageUrl(image: string | undefined, imageType: string | undefined): string | undefined {
   if (!image) return undefined
 
+  // Create cache key
+  const cacheKey = `${image}|${imageType || ''}`
+  const cached = processedImageUrlCache.get(cacheKey)
+  if (cached) return cached
+
+  let result: string
   if (image.includes('?vars=')) {
-    if (imageType) {
-      return image.replace(
-        '?vars=',
-        `.${imageType.replace('image/', '')}?vars=`,
-      )
-    }
-    else {
-      return image.replace('?vars=', '.png?vars=')
-    }
+    const extension = imageType ? imageType.replace('image/', '') : 'png'
+    result = image.replace('?vars=', `.${extension}?vars=`)
+  }
+  else {
+    result = image
   }
-  return image
+
+  processedImageUrlCache.set(cacheKey, result)
+  return result
 }
 
 // Helper function to normalize image type
@@ -56,6 +63,11 @@ function normalizeImageType(imageType: string | undefined): 'image/jpeg' | 'imag
   return 'image/png'
 }
 
+// Precomputed alternate locale URL template
+function ALTERNATE_LOCALE_TEMPLATE(scheme: string, host: string, locale: string, path: string) {
+  return `${scheme}://${host}/l/${locale}${path}`
+}
+
 // eslint-disable-next-line unused-imports/no-unused-vars
 export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
   const currentLocale = getLocale()
@@ -106,18 +118,26 @@ export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
       })
       */
 
-      seoData.value.alternateLocales?.forEach((locale) => {
-        if (locale !== currentLocale) {
-          links.push({
-            rel: 'alternate',
-            hreflang: locale,
-            href: `${urlBase.value.scheme}://${
-              urlBase.value.host
-            }/l/${locale}${urlBase.value.path.replace(urlBase.value.prefix, '')}`,
-            key: `alternate-${locale}`,
-          })
+      // Optimize alternate locale generation
+      if (seoData.value.alternateLocales?.length) {
+        const pathWithoutPrefix = urlBase.value.path.replace(urlBase.value.prefix, '')
+
+        for (const locale of seoData.value.alternateLocales) {
+          if (locale !== currentLocale) {
+            links.push({
+              rel: 'alternate',
+              hreflang: locale,
+              href: ALTERNATE_LOCALE_TEMPLATE(
+                urlBase.value.scheme,
+                urlBase.value.host,
+                locale,
+                pathWithoutPrefix,
+              ),
+              key: `alternate-${locale}`,
+            })
+          }
         }
-      })
+      }
 
       /*
       if (seoData.value.image) {
@@ -134,25 +154,30 @@ export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
     },
   })
 
+  // Create memoized getters for frequently accessed values
+  const seoTitle = computed(() => seoData.value.title)
+  const seoDescription = computed(() => seoData.value.description)
+  const seoType = computed(() => seoData.value.type || 'website')
+  const twitterCreator = computed(() => seoData.value.twitterCreator)
+
   useSeoMeta({
     ogUrl: () => urlBase.value.canonical,
     ogLocale: () => localeForOg.value,
-    robots:
-      'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
-    title: () => seoData.value.title || '',
-    ogTitle: () => seoData.value.title,
-    ogDescription: () => seoData.value.description,
+    robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
+    title: () => seoTitle.value || '',
+    ogTitle: () => seoTitle.value,
+    ogDescription: () => seoDescription.value,
     twitterCard: 'summary_large_image',
     ogSiteName: () => seoData.value.name,
-    twitterTitle: () => seoData.value.title,
-    twitterDescription: () => seoData.value.description,
+    twitterTitle: () => seoTitle.value,
+    twitterDescription: () => seoDescription.value,
     ogImageAlt: () => imageAlt.value,
     // @ts-expect-error: Type 'string' is not assignable to type 'undefined'.
-    ogType: () => (seoData.value.type ? seoData.value.type : 'website'),
-    twitterCreator: () => seoData.value.twitterCreator,
-    twitterSite: () => seoData.value.twitterCreator,
+    ogType: () => seoType.value,
+    twitterCreator: () => twitterCreator.value,
+    twitterSite: () => twitterCreator.value,
     twitterImageAlt: () => imageAlt.value,
-    description: () => seoData.value.description,
+    description: () => seoDescription.value,
     keywords: () => seoData.value.keywords,
     articlePublishedTime: () => seoData.value.published,
     articleModifiedTime: () => seoData.value.modified,
@@ -160,8 +185,6 @@ export function useSeo(seoData: Ref<LazyHead>, initial: boolean = false) {
     ogImageUrl: () => imageUrl.value,
     ogImageType: () => imageType.value,
     twitterImageUrl: () => imageUrl.value,
-    twitterImageType() {
-      return imageType.value
-    },
+    twitterImageType: () => imageType.value,
   })
 }

package/composables/ssr.ts

@@ -22,10 +22,15 @@ export interface SSRResult {
   redirect?: string
 }
 
+// Cache SSR state to avoid repeated checks
+let cachedSSRState: boolean | null = null
+
 export function isServerRendered() {
+  if (cachedSSRState !== null) return cachedSSRState
+
   const state = getInitialState()
-  if (state && state.isSSR) return true
-  return false
+  cachedSSRState = !!(state && state.isSSR)
+  return cachedSSRState
 }
 
 export function initVueClient(router: Router, pinia: Pinia) {
@@ -41,8 +46,9 @@ export async function initVueServer(
   callback: Function,
   options: { url?: string } = {},
 ) {
-  const url
-    = options.url || `${getPath()}${getURL().Query ? `?${getURL().Query}` : ''}`
+  // Cache URL object to avoid multiple calls
+  const urlObj = getURL()
+  const url = options.url || `${getPath()}${urlObj.Query ? `?${urlObj.Query}` : ''}`
   const { app, router, head, pinia } = await createApp(true)
   const serverRouter = useServerRouter(pinia)
   serverRouter._setRouter(router)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.63",
+  "version": "2.3.65",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",

package/stores/serverRouter.ts

@@ -5,7 +5,7 @@ export interface ServerRouterState {
   _router: any | null
   status: number
   redirect?: string
-  results: Record<number, any | undefined>
+  results: Map<number, any>
 }
 
 export const useServerRouter = defineStore('routerStore', {
@@ -15,7 +15,7 @@ export const useServerRouter = defineStore('routerStore', {
       _router: null,
       status: 200,
       redirect: undefined,
-      results: {},
+      results: new Map(),
     }) as ServerRouterState,
   getters: {
     currentRoute: state => state._router?.currentRoute,
@@ -48,16 +48,22 @@ export const useServerRouter = defineStore('routerStore', {
       this._router?.go(1)
     },
     addResult(id: number, result: any) {
-      this.results[id] = result
+      // Limit results cache size to prevent memory leaks
+      if (this.results.size > 100) {
+        // Remove oldest entries (first 10)
+        const keysToDelete = Array.from(this.results.keys()).slice(0, 10)
+        keysToDelete.forEach(key => this.results.delete(key))
+      }
+      this.results.set(id, result)
     },
     hasResult(id: number) {
-      return this.results[id] !== undefined
+      return this.results.has(id)
     },
     getResult(id: number) {
-      return this.results[id]
+      return this.results.get(id)
     },
     removeResult(id: number) {
-      delete this.results[id]
+      this.results.delete(id)
     },
   },
 })

package/stores/user.ts

@@ -3,7 +3,6 @@ import type { RouteLocation } from 'vue-router'
 import type { APIResult } from '../composables/rest'
 import { rest } from '@fy-/fws-js'
 import { defineStore } from 'pinia'
-import { computed, shallowRef } from 'vue'
 import { useServerRouter } from './serverRouter'
 
 export interface UserStore {
@@ -15,6 +14,10 @@ let refreshPromise: Promise<void> | null = null
 const refreshDebounceTime = 200 // 200ms
 let lastRefreshTime = 0
 
+// Cache for API endpoints
+const USER_GET_ENDPOINT = 'User:get'
+const USER_LOGOUT_ENDPOINT = 'User:logout'
+
 export const useUserStore = defineStore('userStore', {
   state: (): UserStore => ({
     user: null,
@@ -34,7 +37,7 @@ export const useUserStore = defineStore('userStore', {
 
       lastRefreshTime = now
       refreshPromise = new Promise((resolve) => {
-        rest('User:get', 'GET')
+        rest(USER_GET_ENDPOINT, 'GET')
           .then((user: APIResult) => {
             if (user.result === 'success') {
               this.setUser(user.data)
@@ -60,7 +63,7 @@ export const useUserStore = defineStore('userStore', {
 
     async logout() {
       try {
-        const user: APIResult = await rest('User:logout', 'POST')
+        const user: APIResult = await rest(USER_LOGOUT_ENDPOINT, 'POST')
         // In all cases, we set the user to null
         this.setUser(null)
         return user.result === 'success'
@@ -79,23 +82,24 @@ export const useUserStore = defineStore('userStore', {
 
 // Shared implementation for route checking to avoid code duplication
 function createUserChecker(path: string, redirectLink: boolean) {
-  // Use shallowRef for router since it doesn't need reactivity
-  const router = shallowRef(useServerRouter())
+  // Get router once instead of creating shallowRef
+  const router = useServerRouter()
+
+  // Pre-build redirect URL template
+  const redirectUrl = redirectLink ? `${path}?return_to=` : path
 
   return (route: RouteLocation, isAuthenticated: boolean) => {
-    if (!route.meta.reqLogin) return false
+    // Early return for most common case
+    if (!route.meta?.reqLogin || isAuthenticated) return false
 
-    if (!isAuthenticated) {
-      if (!redirectLink) {
-        router.value.push(path)
-      }
-      else {
-        router.value.status = 307
-        router.value.push(`${path}?return_to=${route.path}`)
-      }
-      return true
+    if (redirectLink) {
+      router.status = 307
+      router.push(`${redirectUrl}${route.path}`)
+    }
+    else {
+      router.push(path)
     }
-    return false
+    return true
   }
 }
 
@@ -105,17 +109,16 @@ export async function useUserCheckAsyncSimple(
 ) {
   const userStore = useUserStore()
   await userStore.refreshUser()
-  const isAuth = computed(() => userStore.isAuth)
   const router = useServerRouter()
   const checkUser = createUserChecker(path, redirectLink)
 
   // Check current route immediately
-  checkUser(router.currentRoute, isAuth.value)
+  checkUser(router.currentRoute, userStore.isAuth)
 
-  // Setup route guard
+  // Setup route guard - use arrow function to always get current auth state
   router._router.beforeEach((to: any) => {
     if (to.fullPath !== path) {
-      checkUser(to, isAuth.value)
+      checkUser(to, userStore.isAuth)
     }
   })
 }
@@ -123,46 +126,54 @@ export async function useUserCheckAsyncSimple(
 export async function useUserCheckAsync(path = '/login', redirectLink = false) {
   const userStore = useUserStore()
   await userStore.refreshUser()
-  const isAuth = computed(() => userStore.isAuth)
   const router = useServerRouter()
   const checkUser = createUserChecker(path, redirectLink)
 
   // Check current route immediately
-  checkUser(router.currentRoute, isAuth.value)
-
-  // Setup route guards
-  router._router.afterEach(async () => {
-    await userStore.refreshUser()
+  checkUser(router.currentRoute, userStore.isAuth)
+
+  // Setup route guards - throttle afterEach refresh
+  let afterEachTimeout: NodeJS.Timeout | null = null
+  router._router.afterEach(() => {
+    if (afterEachTimeout) clearTimeout(afterEachTimeout)
+    afterEachTimeout = setTimeout(() => {
+      userStore.refreshUser()
+      afterEachTimeout = null
+    }, 100)
   })
 
   router._router.beforeEach((to: any) => {
     if (to.fullPath !== path) {
-      checkUser(to, isAuth.value)
+      checkUser(to, userStore.isAuth)
     }
   })
 }
 
 export function useUserCheck(path = '/login', redirectLink = false) {
   const userStore = useUserStore()
-  const isAuth = computed(() => userStore.isAuth)
   const router = useServerRouter()
   const checkUser = createUserChecker(path, redirectLink)
 
   // Check current route after refresh
   userStore.refreshUser().then(() => {
     if (router.currentRoute) {
-      checkUser(router.currentRoute, isAuth.value)
+      checkUser(router.currentRoute, userStore.isAuth)
     }
   })
 
-  // Setup route guards
-  router._router.afterEach(async () => {
-    await userStore.refreshUser()
+  // Setup route guards - throttle afterEach refresh
+  let afterEachTimeout: NodeJS.Timeout | null = null
+  router._router.afterEach(() => {
+    if (afterEachTimeout) clearTimeout(afterEachTimeout)
+    afterEachTimeout = setTimeout(() => {
+      userStore.refreshUser()
+      afterEachTimeout = null
+    }, 100)
   })
 
   router._router.beforeEach((to: any) => {
     if (to.fullPath !== path) {
-      checkUser(to, isAuth.value)
+      checkUser(to, userStore.isAuth)
     }
   })
 }