@fy-/fws-vue 2.3.64 → 2.3.65

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.64",
+  "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)
     }
   })
 }