@fy-/fws-vue 2.3.47 → 2.3.49

package/components/ui/DefaultModal.vue

@@ -243,10 +243,10 @@ const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
 <template>
   <ClientOnly>
     <transition
-      enter-active-class="duration-300 ease-out"
+      enter-active-class="duration-50 ease-out"
       enter-from-class="opacity-0"
       enter-to-class="opacity-100"
-      leave-active-class="duration-200 ease-in"
+      leave-active-class="duration-50 ease-in"
       leave-from-class="opacity-100"
       leave-to-class="opacity-0"
     >

package/composables/rest.ts

@@ -30,11 +30,19 @@ export interface APIResult {
 // Cache for URL parsing to avoid repeated parsing of the same URL
 const urlParseCache = new Map<string, string>()
 
+// Global request hash cache shared across all instances
+const globalHashCache = new Map<string, number>()
+
+// Track in-flight requests to avoid duplicates
+const inFlightRequests = new Map<number, Promise<any>>()
+
+// Detect if we're in SSR mode once and cache the result
+let isSSRMode: boolean | null = null
+
 // Memoized function to extract URL pathname and search for hashing
 function getUrlForHash(url: string): string {
-  if (urlParseCache.has(url)) {
-    return urlParseCache.get(url)!
-  }
+  const cached = urlParseCache.get(url)
+  if (cached) return cached
 
   let urlForHash: string
   try {
@@ -49,20 +57,34 @@ function getUrlForHash(url: string): string {
   return urlForHash
 }
 
-// Detect if we're in SSR mode once and cache the result
-let isSSRMode: boolean | null = null
+// Check SSR mode with caching
 function checkSSRMode(): boolean {
   if (isSSRMode === null) {
     isSSRMode = getMode() === 'ssr'
   }
+
   return isSSRMode
 }
 
-// Optimized JSON.stringify for params
+// Fast JSON.stringify for params
 function stringifyParams(params?: RestParams): string {
   return params ? JSON.stringify(params) : ''
 }
 
+// Compute request hash with global caching
+function computeRequestHash(url: string, method: RestMethod, params?: RestParams): number {
+  const cacheKey = `${url}|${method}|${stringifyParams(params)}`
+
+  const cached = globalHashCache.get(cacheKey)
+  if (cached !== undefined) return cached
+
+  const urlForHash = getUrlForHash(url)
+  const hash = stringHash(urlForHash + method + stringifyParams(params))
+
+  globalHashCache.set(cacheKey, hash)
+  return hash
+}
+
 export function useRest(): <ResultType extends APIResult>(
 url: string,
 method: RestMethod,
@@ -71,23 +93,8 @@ params?: RestParams,
   const serverRouter = useServerRouter()
   const eventBus = useEventBus()
 
-  // Cache for request hash computations
-  const hashCache = new Map<string, number>()
-
-  // Function to compute and cache request hash
-  function computeRequestHash(url: string, method: RestMethod, params?: RestParams): number {
-    const cacheKey = `${url}|${method}|${stringifyParams(params)}`
-
-    if (hashCache.has(cacheKey)) {
-      return hashCache.get(cacheKey)!
-    }
-
-    const urlForHash = getUrlForHash(url)
-    const hash = stringHash(urlForHash + method + stringifyParams(params))
-
-    hashCache.set(cacheKey, hash)
-    return hash
-  }
+  // Pre-check for server rendering state
+  const isSSR = isServerRendered()
 
   // Handle API error response consistently
   function handleErrorResult<ResultType extends APIResult>(result: ResultType): Promise<ResultType> {
@@ -104,7 +111,7 @@ params?: RestParams,
     const requestHash = computeRequestHash(url, method, params)
 
     // Check for server-rendered results first
-    if (isServerRendered()) {
+    if (isSSR) {
       const hasResult = serverRouter.getResult(requestHash)
       if (hasResult !== undefined) {
         const result = hasResult as ResultType
@@ -118,35 +125,55 @@ params?: RestParams,
       }
     }
 
-    try {
-      const restResult: ResultType = await rest(url, method, params)
+    // Check if this exact request is already in-flight
+    const existingRequest = inFlightRequests.get(requestHash)
+    if (existingRequest) {
+      // Return the existing promise for the in-flight request
+      return existingRequest
+    }
 
-      // Store result in server router if in SSR mode
-      if (checkSSRMode()) {
-        // Use structuredClone if available for better performance than JSON.parse/stringify
-        const resultCopy = typeof structuredClone !== 'undefined'
-          ? structuredClone(restResult)
-          : JSON.parse(JSON.stringify(restResult))
+    // Create the actual request function
+    const performRequest = async (): Promise<ResultType> => {
+      try {
+        const restResult: ResultType = await rest(url, method, params)
 
-        serverRouter.addResult(requestHash, resultCopy)
-      }
+        // Store result in server router if in SSR mode
+        if (checkSSRMode()) {
+          // Use structuredClone if available for better performance than JSON.parse/stringify
+          const resultCopy = typeof structuredClone !== 'undefined'
+            ? structuredClone(restResult)
+            : JSON.parse(JSON.stringify(restResult))
 
-      if (restResult.result === 'error') {
-        return handleErrorResult(restResult)
-      }
+          serverRouter.addResult(requestHash, resultCopy)
+        }
 
-      return Promise.resolve(restResult)
-    }
-    catch (error) {
-      const restError = error as ResultType
+        if (restResult.result === 'error') {
+          return handleErrorResult(restResult)
+        }
 
-      if (checkSSRMode()) {
-        serverRouter.addResult(requestHash, restError)
+        return Promise.resolve(restResult)
       }
+      catch (error) {
+        const restError = error as ResultType
+
+        if (checkSSRMode()) {
+          serverRouter.addResult(requestHash, restError)
+        }
 
-      eventBus.emit('main-loading', false)
-      eventBus.emit('rest-error', restError)
-      return Promise.resolve(restError)
+        eventBus.emit('main-loading', false)
+        eventBus.emit('rest-error', restError)
+        return Promise.resolve(restError)
+      }
+      finally {
+        // Always remove from in-flight requests when done
+        inFlightRequests.delete(requestHash)
+      }
     }
+
+    // Track this request as in-flight
+    const requestPromise = performRequest()
+    inFlightRequests.set(requestHash, requestPromise)
+
+    return requestPromise
   }
 }

package/composables/templating.ts

@@ -11,86 +11,112 @@ import ru from 'timeago.js/esm/lang/ru'
 import zh_CN from 'timeago.js/esm/lang/zh_CN'
 import { useTranslation } from './translations'
 
-// Register common locales
-register('fr', fr)
-register('fr_FR', fr)
-register('es', es)
-register('es_ES', es)
-register('de', de)
-register('de_DE', de)
-register('it', it)
-register('it_IT', it)
-register('nl', nl)
-register('nl_NL', nl)
-register('ru', ru)
-register('ru_RU', ru)
-register('ja', ja)
-register('ja_JP', ja)
-register('zh_CN', zh_CN)
+// Register common locales - do this once at module initialization
+const localeMap = {
+  fr,
+  fr_FR: fr,
+  es,
+  es_ES: es,
+  de,
+  de_DE: de,
+  it,
+  it_IT: it,
+  nl,
+  nl_NL: nl,
+  ru,
+  ru_RU: ru,
+  ja,
+  ja_JP: ja,
+  zh_CN,
+}
+
+// Register all locales at once
+Object.entries(localeMap).forEach(([locale, func]) => register(locale, func))
 
 // Cache common constants and patterns
 const k = 1024
 const byteSizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+// Precompute log(k) for formatBytes
+const logK = Math.log(k)
+
+// Define date format options once
 const dateFormatOptions = {
-  date: {
+  date: Object.freeze({
     year: 'numeric',
     month: 'long',
     day: 'numeric',
-  },
-  datetime: {
+  }),
+  datetime: Object.freeze({
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     hour: 'numeric',
     minute: 'numeric',
     second: 'numeric',
-  },
+  }),
 }
 
 // Color cache for contrast calculations to avoid repeated calculations
 const colorContrastCache = new Map<string, string>()
 
+// Locale transform cache to avoid repeated replacements
+const localeTransformCache = new Map<string, string>()
+
+// Default colors for contrast errors
+const DEFAULT_DARK_COLOR = '#000000'
+const DEFAULT_LIGHT_COLOR = '#FFFFFF'
+
 function cropText(str: string, ml = 100, end = '...') {
-  if (!str) return str
+  if (!str) {
+    return str
+  }
   if (str.length > ml) {
     return `${str.slice(0, ml)}${end}`
   }
+
   return str
 }
 
 function getContrastingTextColor(backgroundColor: string) {
   // Return from cache if available
-  if (colorContrastCache.has(backgroundColor)) {
-    return colorContrastCache.get(backgroundColor)!
+  const cached = colorContrastCache.get(backgroundColor)
+  if (cached) {
+    return cached
   }
 
   // Input validation
   if (!backgroundColor || backgroundColor.length !== 7 || backgroundColor[0] !== '#') {
-    return '#000000'
+    return DEFAULT_DARK_COLOR
   }
 
   try {
+    // Parse hex color components more efficiently
     const r = Number.parseInt(backgroundColor.substring(1, 3), 16)
     const g = Number.parseInt(backgroundColor.substring(3, 5), 16)
     const b = Number.parseInt(backgroundColor.substring(5, 7), 16)
 
+    // Calculate relative luminance (standard formula for text contrast)
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-    const result = luminance > 0.5 ? '#000000' : '#FFFFFF'
+    const result = luminance > 0.5 ? DEFAULT_DARK_COLOR : DEFAULT_LIGHT_COLOR
 
     // Cache the result
     colorContrastCache.set(backgroundColor, result)
     return result
   }
   catch {
-    return '#000000'
+    return DEFAULT_DARK_COLOR
   }
 }
 
 function formatBytes(bytes: number, decimals = 2) {
-  if (!+bytes) return '0 Bytes'
+  if (!+bytes) {
+    return '0 Bytes'
+  }
 
   const dm = decimals < 0 ? 0 : decimals
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  // Use precomputed logK for better performance
+  const i = Math.floor(Math.log(bytes) / logK)
 
   return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${byteSizes[i]}`
 }
@@ -103,7 +129,7 @@ function parseDateInput(dt: Date | string | number): number {
 
   if (typeof dt === 'string') {
     const parsed = Date.parse(dt)
-    return Number.isNaN(parsed) ? Number.parseInt(dt) : parsed
+    return Number.isNaN(parsed) ? Number.parseInt(dt, 10) : parsed
   }
 
   return dt
@@ -137,14 +163,17 @@ function formatTimeago(dt: Date | string | number) {
   const timestamp = parseDateInput(dt)
   const dateObj = new Date(timestamp)
 
-  // Get browser locale and format it for timeago.js
+  // Get browser locale and lookup in cache
   const fullLocale = getLocale()
 
-  // Convert locale format (e.g., fr-FR to fr_FR)
-  const localeWithUnderscore = fullLocale.replace('-', '_')
+  // Use cached locale transformation if available
+  let localeWithUnderscore = localeTransformCache.get(fullLocale)
+  if (!localeWithUnderscore) {
+    localeWithUnderscore = fullLocale.replace('-', '_')
+    localeTransformCache.set(fullLocale, localeWithUnderscore)
+  }
 
   // Use the locale directly - the registration above ensures support
-  // timeago.js will fall back to en_US if no matching locale is found
   return formatDateTimeago(dateObj, localeWithUnderscore)
 }
 

package/package.json

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