@symbo.ls/fetch 3.8.8 → 3.14.0

package/adapters/supabase.js

@@ -1,6 +1,14 @@
 'use strict'
 
-export const setup = async ({ url, key, projectId, createClient, ...options }) => {
+// Cache Supabase clients by (url, key, authMode) so every `setup` call
+// against the same project reuses a single GoTrueClient. Without this
+// cache, each fresh adapter resolution (per db/fetch config, per query)
+// spins up a new GoTrueClient on the same storage key — Supabase logs
+// "Multiple GoTrueClient instances" warnings and auth state can drift.
+const CLIENT_CACHE = new Map()
+const clientCacheKey = (url, key, authMode) => `${url}|${key}|${authMode ? 'off' : 'on'}`
+
+export const setup = async ({ url, key, projectId, createClient, auth, retry, adapter, ...supabaseOptions }) => {
   const supabaseUrl = url || (projectId && `https://${projectId}.supabase.co`)
   if (!supabaseUrl || !key) {
     throw new Error('@symbo.ls/fetch supabase: url (or projectId) and key are required')
@@ -10,8 +18,16 @@ export const setup = async ({ url, key, projectId, createClient, ...options }) =
     const mod = await import(/* webpackIgnore: true */ pkg)
     createClient = mod.createClient
   }
-  const client = createClient(supabaseUrl, key, options)
-  // Guard against no-op createClient (e.g. deserialized placeholder from SSR)
+  // Disable Supabase auto-auth when auth: false (prevents navigator.locks hang)
+  if (auth === false) {
+    supabaseOptions.auth = { autoRefreshToken: false, persistSession: false, detectSessionInUrl: false }
+  }
+  const cacheKey = clientCacheKey(supabaseUrl, key, auth === false)
+  let client = CLIENT_CACHE.get(cacheKey)
+  if (!client) {
+    client = createClient(supabaseUrl, key, supabaseOptions)
+    if (client?.auth) CLIENT_CACHE.set(cacheKey, client)
+  }
   if (!client || !client.auth) return null
   return supabaseAdapter(client)
 }
@@ -101,26 +117,42 @@ export const supabaseAdapter = (client) => ({
   },
 
   // CRUD
-  select: async ({ from, select, params, ...modifiers }) => {
-    let q = client.from(from).select(select || '*')
+  select: async ({ from, schema, select, params, headers, ...modifiers }) => {
+    const base = schema ? client.schema(schema) : client
+    let q = base.from(from).select(select || '*')
     q = applyFilters(q, params)
     q = applyModifiers(q, modifiers)
+    if (headers) {
+      try {
+        for (const k in headers) {
+          if (q.setHeader) q = q.setHeader(k, headers[k])
+          else if (client.rest) client.rest.headers[k] = headers[k]
+        }
+      } catch (e) {
+        console.warn('[supabase] setHeader failed:', e.message)
+      }
+    }
     return q
   },
 
   rpc: ({ from, params }) => client.rpc(from, params),
 
-  insert: ({ from, data, select }) =>
-    client.from(from).insert(data).select(select || '*'),
+  insert: ({ from, schema, data, select }) => {
+    const base = schema ? client.schema(schema) : client
+    return base.from(from).insert(data).select(select || '*')
+  },
 
-  update: ({ from, data, params, select }) => {
-    let q = client.from(from).update(data)
+  update: ({ from, schema, data, params, select }) => {
+    const base = schema ? client.schema(schema) : client
+    let q = base.from(from).update(data)
     q = applyFilters(q, params)
     return q.select(select || '*')
   },
 
-  upsert: ({ from, data, select }) =>
-    client.from(from).upsert(data).select(select || '*'),
+  upsert: ({ from, schema, data, select }) => {
+    const base = schema ? client.schema(schema) : client
+    return base.from(from).upsert(data).select(select || '*')
+  },
 
   delete: ({ from, params }) => {
     let q = client.from(from).delete()

package/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isArray, isFunction, isObject, isString, exec } from '@domql/utils'
+import { isArray, isFunction, isObject, isString, exec } from '@symbo.ls/utils'
 
 // --- Adapter resolution ---
 
@@ -62,10 +62,16 @@ const cacheStore = new Map()
 const querySubscribers = new Map() // key -> Set of elements
 const activeQueries = new Map() // key -> Promise (deduplication)
 
-const buildCacheKey = (config) => {
+// Cache key includes lang when provided so different-locale responses don't
+// collide. The fetch plugin injects Accept-Language on requests, so the same
+// (from, method, params) tuple yields different bodies per lang. queryClient.
+// dropNonLang(keepLang) leans on this suffix to evict stale-language entries
+// on a setLang() event without touching the kept lang's cache.
+const buildCacheKey = (config, lang) => {
   if (config.cache?.key) return config.cache.key
   const params = resolveParamsSync(config.params)
-  return `${config.from}:${config.method}:${JSON.stringify(params || '')}`
+  const base = `${config.from}:${config.method}:${JSON.stringify(params || '')}`
+  return lang ? `${base}:${lang}` : base
 }
 
 const getCacheEntry = (key) => cacheStore.get(key) || null
@@ -318,6 +324,9 @@ const resolveAdapter = async (db, context) => {
   const resolved = await db.__resolving
   delete db.__resolving
   if (!resolved) return null
+  resolved.auth = db.auth
+  resolved.url = db.url
+  resolved.key = db.key
   db.__resolved = resolved
   context.fetch = resolved
 
@@ -328,9 +337,12 @@ const resolveAdapter = async (db, context) => {
 }
 
 const triggerCallback = (element, name, ...args) => {
-  const fn = isFunction(element[name]) ? element[name]
-    : (element.props && isFunction(element.props[name])) ? element.props[name]
-      : null
+  const fn = isFunction(element[name]) ? element[name] : null
+  if (fn) fn.call(element, ...args, element, element.state, element.context)
+}
+
+const triggerConfigCallback = (config, element, name, ...args) => {
+  const fn = config && isFunction(config[name]) ? config[name] : null
   if (fn) fn.call(element, ...args, element, element.state, element.context)
 }
 
@@ -366,14 +378,33 @@ const collectFormData = (element) => {
 // --- State update helpers ---
 
 const updateElementState = (element, data, stateKey, options = {}) => {
-  const stateData = stateKey ? { [stateKey]: data } : data
-  if (element.state?.update) {
-    element.state.update(stateData, { preventFetch: true, ...options })
+  const isRoot = stateKey && stateKey.startsWith('~/')
+  const target = isRoot ? (element.state?.root || element.state) : element.state
+  if (!target?.update) return
+
+  if (isRoot) {
+    const key = stateKey.slice(2)
+    // If transform returned an object containing the key itself, spread on root
+    // e.g. transform returns { transactions: [...], totalSaved: 755 } for as: '~/transactions'
+    if (data && typeof data === 'object' && !Array.isArray(data) && key in data) {
+      target.update(data, { preventFetch: true, ...options })
+    } else {
+      target.update({ [key]: data }, { preventFetch: true, ...options })
+    }
+  } else {
+    const stateData = stateKey ? { [stateKey]: data } : data
+    target.update(stateData, { preventFetch: true, ...options })
   }
 }
 
 const setFetchStatus = (element, status) => {
-  const ref = element.__ref
+  // Element may have been torn down (route change, modal close, parent
+  // unmount) between the runFetch entry guard and this call site —
+  // `runFetch` checks `__ref` once at start, but a long-lived async fetch
+  // can outlive the element. Without this null-guard the framework throws
+  // `TypeError: Cannot set properties of null` from every status write.
+  const ref = element?.__ref
+  if (!ref) return
   ref.__fetchStatus = status
   ref.__fetching = status.isFetching
   ref.__fetchError = status.error
@@ -385,13 +416,26 @@ const runFetch = async (config, element, context, opts = {}) => {
   const db = context?.fetch
   if (!db) return
 
+  // Element may have been torn down (unmounted, navigated away, modal
+  // closed) while a reactive dependency on its fetch config was still
+  // scheduling this run. `__ref` is the framework's marker for "alive" —
+  // if it's gone, bail before anything else touches `element`.
+  if (!element || !element.__ref) return
+
   // enabled check
   if (config.enabled === false) return
   if (isFunction(config.enabled) && !config.enabled(element, element.state)) return
+  // Also honor `skip` as an alias — some call sites already use it.
+  if (config.skip === true) return
+  if (isFunction(config.skip) && config.skip(element, element.state)) return
 
   const adapter = await resolveAdapter(db, context)
   if (!adapter) return
 
+  // Re-check after the await — a slow adapter-resolve can outlive the
+  // element that triggered the fetch.
+  if (!element.__ref) return
+
   const ref = element.__ref
   const {
     from, method, query, params: rawParams, cache: cacheRaw, transform,
@@ -404,19 +448,22 @@ const runFetch = async (config, element, context, opts = {}) => {
     keepPreviousData
   } = config
 
-  let select
+  let select = isString(selectTransform) ? selectTransform : undefined
   if (query && isFunction(element.getQuery)) {
     const q = element.getQuery(adapter.name || 'paths')
-    if (q) select = q.select || (q.length && q.join(',')) || undefined
+    if (q) select = q.select || (q.length && q.join(',')) || select
   }
 
   const params = resolveParams(rawParams, element, context)
   const cacheConfig = parseCacheConfig(cacheRaw)
   const retryConfig = resolveRetryConfig(config)
+  const lang = resolveLanguage(element, context)
 
-  // Build cache key
+  // Build cache key — lang suffix lets queryClient.dropNonLang(keepLang)
+  // evict stale-language entries on setLang() without flushing the rest.
+  const langSuffix = lang ? `:${lang}` : ''
   const cacheKey = cacheConfig
-    ? (cacheRaw?.key || `${from}:${method}:${JSON.stringify(params || '')}${infinite ? ':infinite' : ''}${page ? ':p' + JSON.stringify(page) : ''}`)
+    ? (cacheRaw?.key || `${from}:${method}:${JSON.stringify(params || '')}${infinite ? ':infinite' : ''}${page ? ':p' + JSON.stringify(page) : ''}${langSuffix}`)
     : null
 
   // Apply initial/placeholder data on first mount
@@ -435,7 +482,7 @@ const runFetch = async (config, element, context, opts = {}) => {
       const age = Date.now() - cached.time
       const isStale = cached.stale || age > (cacheConfig.staleTime || 0)
       let data = cached.data
-      if (selectTransform) data = selectTransform(data, element, element.state)
+      if (isFunction(selectTransform)) data = selectTransform(data, element, element.state)
       if (transform) data = transform(data, element, element.state)
       updateElementState(element, data, stateKey)
       if (!isStale) {
@@ -451,17 +498,18 @@ const runFetch = async (config, element, context, opts = {}) => {
     }
   }
 
-  // Deduplication — if same query is already in-flight, share the promise
+  // Deduplication — if same query is already in-flight, share the promise (with timeout)
   if (cacheKey && activeQueries.has(cacheKey) && !opts.force) {
     const existing = activeQueries.get(cacheKey)
     try {
-      const result = await existing
+      const result = await Promise.race([existing, new Promise((_, r) => setTimeout(() => r('DEDUP_TIMEOUT'), 15000))])
       if (result?.data !== undefined) {
         let finalData = result.data
-        if (selectTransform) finalData = selectTransform(finalData, element, element.state)
+        if (isFunction(selectTransform)) finalData = selectTransform(finalData, element, element.state)
         if (transform) finalData = transform(finalData, element, element.state)
         updateElementState(element, finalData, stateKey)
         triggerCallback(element, 'onFetchComplete', finalData)
+        triggerConfigCallback(config, element, 'onFetchComplete', finalData)
       }
     } catch (e) {
       // Error handled by the original caller
@@ -481,14 +529,20 @@ const runFetch = async (config, element, context, opts = {}) => {
     fetchStatus: 'fetching'
   })
   triggerCallback(element, 'onFetchStart')
+  triggerConfigCallback(config, element, 'onFetchStart')
+
+  const _emitNet = context?.analyze?.emitNetwork
+  const __analyzeStart = _emitNet ? (typeof performance !== 'undefined' ? performance.now() : Date.now()) : 0
+  if (_emitNet) _emitNet({ phase: 'start', mode: 'query', from, method, cacheKey, lang })
 
   const doFetch = async () => {
-    if (auth !== false && adapter.getSession) {
+    if (auth !== false && adapter.auth !== false && adapter.getSession) {
       const session = await adapter.getSession()
       if (auth === true && !session) {
         const err = { message: 'Not authenticated' }
         setFetchStatus(element, { isFetching: false, isLoading: false, isStale: false, isSuccess: false, error: err, status: 'error', fetchStatus: 'idle' })
         triggerCallback(element, 'onFetchError', err)
+        triggerConfigCallback(config, element, 'onFetchError', err)
         return { data: null, error: err }
       }
     }
@@ -556,6 +610,7 @@ const runFetch = async (config, element, context, opts = {}) => {
         (newData, oldData, payload) => {
           updateElementState(element, newData, stateKey)
           triggerCallback(element, 'onFetchComplete', newData)
+          triggerConfigCallback(config, element, 'onFetchComplete', newData)
         }
       )
       ref.__unsubscribe = unsubscribe
@@ -581,6 +636,12 @@ const runFetch = async (config, element, context, opts = {}) => {
       if (cacheKey) setCacheEntry(cacheKey, null, error)
       setFetchStatus(element, { isFetching: false, isLoading: false, isStale: false, isSuccess: false, error, status: 'error', fetchStatus: 'idle' })
       triggerCallback(element, 'onFetchError', error)
+      triggerConfigCallback(config, element, 'onFetchError', error)
+      if (_emitNet) _emitNet({
+        phase: 'error', mode: 'query', from, method, cacheKey,
+        error: error.message || error,
+        durationMs: (typeof performance !== 'undefined' ? performance.now() : Date.now()) - __analyzeStart
+      })
       return
     }
 
@@ -614,7 +675,7 @@ const runFetch = async (config, element, context, opts = {}) => {
         }
       }
 
-      if (selectTransform) finalData = selectTransform(finalData, element, element.state)
+      if (isFunction(selectTransform)) finalData = selectTransform(finalData, element, element.state)
       if (transform) finalData = transform(finalData, element, element.state)
 
       // keepPreviousData — don't clear state while fetching new page
@@ -624,10 +685,21 @@ const runFetch = async (config, element, context, opts = {}) => {
 
       setFetchStatus(element, { isFetching: false, isLoading: false, isStale: false, isSuccess: true, error: null, status: 'success', fetchStatus: 'idle' })
       triggerCallback(element, 'onFetchComplete', finalData)
+      triggerConfigCallback(config, element, 'onFetchComplete', finalData)
+      if (_emitNet) _emitNet({
+        phase: 'success', mode: 'query', ok: true, from, method, cacheKey,
+        durationMs: (typeof performance !== 'undefined' ? performance.now() : Date.now()) - __analyzeStart
+      })
     }
   } catch (e) {
     setFetchStatus(element, { isFetching: false, isLoading: false, isStale: false, isSuccess: false, error: e, status: 'error', fetchStatus: 'idle' })
     triggerCallback(element, 'onFetchError', e)
+    triggerConfigCallback(config, element, 'onFetchError', e)
+    if (_emitNet) _emitNet({
+      phase: 'error', mode: 'query', from, method, cacheKey,
+      error: e.message || String(e),
+      durationMs: (typeof performance !== 'undefined' ? performance.now() : Date.now()) - __analyzeStart
+    })
   } finally {
     if (cacheKey) activeQueries.delete(cacheKey)
   }
@@ -689,7 +761,8 @@ const bindAutoRefetch = (config, element, context) => {
   // refetchOnWindowFocus
   if (config.refetchOnWindowFocus !== false) {
     const onFocus = () => {
-      const cacheKey = buildCacheKey(config)
+      const lang = resolveLanguage(element, context)
+      const cacheKey = buildCacheKey(config, lang)
       const entry = getCacheEntry(cacheKey)
       const cacheConfig = parseCacheConfig(config.cache)
       if (!entry || entry.stale || (Date.now() - entry.time) > (cacheConfig?.staleTime || 0)) {
@@ -776,14 +849,20 @@ const runMutation = async (config, element, context) => {
   ref.__fetching = true
   setFetchStatus(element, { isFetching: true, isLoading: false, isStale: false, isSuccess: false, error: null, status: 'pending', fetchStatus: 'fetching' })
   triggerCallback(element, 'onFetchStart')
+  triggerConfigCallback(config, element, 'onFetchStart')
+
+  const _emitNet = context?.analyze?.emitNetwork
+  const __analyzeStart = _emitNet ? (typeof performance !== 'undefined' ? performance.now() : Date.now()) : 0
+  if (_emitNet) _emitNet({ phase: 'start', mode: 'mutation', from, method })
 
   try {
-    if (auth !== false && adapter.getSession) {
+    if (auth !== false && adapter.auth !== false && adapter.getSession) {
       const session = await adapter.getSession()
       if (auth === true && !session) {
         if (snapshot !== undefined) rollbackOptimistic(element, config)
         const err = { message: 'Not authenticated' }
         triggerCallback(element, 'onFetchError', err)
+        triggerConfigCallback(config, element, 'onFetchError', err)
         return
       }
     }
@@ -810,6 +889,11 @@ const runMutation = async (config, element, context) => {
       triggerCallback(element, 'onFetchError', error)
       if (isFunction(onError)) onError(error, mutationData, element)
       if (isFunction(onSettled)) onSettled(null, error, mutationData, element)
+      if (_emitNet) _emitNet({
+        phase: 'error', mode: 'mutation', from, method,
+        error: error.message || String(error),
+        durationMs: (typeof performance !== 'undefined' ? performance.now() : Date.now()) - __analyzeStart
+      })
       return
     }
 
@@ -822,8 +906,13 @@ const runMutation = async (config, element, context) => {
 
     setFetchStatus(element, { isFetching: false, isLoading: false, isStale: false, isSuccess: true, error: null, status: 'success', fetchStatus: 'idle' })
     triggerCallback(element, 'onFetchComplete', data)
+    triggerConfigCallback(config, element, 'onFetchComplete', data)
     if (isFunction(onSuccess)) onSuccess(data, mutationData, element)
     if (isFunction(onSettled)) onSettled(data, null, mutationData, element)
+    if (_emitNet) _emitNet({
+      phase: 'success', mode: 'mutation', ok: true, from, method,
+      durationMs: (typeof performance !== 'undefined' ? performance.now() : Date.now()) - __analyzeStart
+    })
 
     // Invalidate related queries
     if (invalidates) {
@@ -843,8 +932,14 @@ const runMutation = async (config, element, context) => {
     if (snapshot !== undefined) rollbackOptimistic(element, config)
     setFetchStatus(element, { isFetching: false, isLoading: false, isStale: false, isSuccess: false, error: e, status: 'error', fetchStatus: 'idle' })
     triggerCallback(element, 'onFetchError', e)
+    triggerConfigCallback(config, element, 'onFetchError', e)
     if (isFunction(onError)) onError(e, mutationData, element)
     if (isFunction(onSettled)) onSettled(null, e, mutationData, element)
+    if (_emitNet) _emitNet({
+      phase: 'error', mode: 'mutation', from, method,
+      error: e.message || String(e),
+      durationMs: (typeof performance !== 'undefined' ? performance.now() : Date.now()) - __analyzeStart
+    })
   } finally {
     ref.__fetching = false
   }
@@ -987,7 +1082,31 @@ export const queryClient = {
   },
 
   getCache: () => cacheStore,
-  clear: () => removeCache()
+  clear: () => removeCache(),
+
+  // Drop every cache entry whose lang suffix isn't `keepLang`.
+  // Cache keys are of the form `${from}:${method}:${params}[:lang]` — entries
+  // without a lang suffix are kept (they were inserted before lang gating
+  // was active). Used by setLang() to evict stale-language entries while
+  // keeping the new active lang's entries warm.
+  //
+  // The English-fallback policy: callers typically pass `'en'` as keepLang
+  // so English bundle stays cached even after switching to e.g. French,
+  // since the page's English fallback may still render where French data
+  // hasn't loaded yet.
+  dropNonLang: (keepLang) => {
+    if (!keepLang) return
+    const keepSuffix = `:${keepLang}`
+    for (const [key] of cacheStore) {
+      // Entry without any lang suffix: presence of `:` in middle but not
+      // matching any 2-3 letter ISO suffix at the end. Conservative: keep
+      // entries whose tail doesn't look like `:xx` or `:xxx`.
+      const tailMatch = key.match(/:([a-z]{2,3})$/i)
+      if (!tailMatch) continue              // no lang suffix → keep
+      if (key.endsWith(keepSuffix)) continue // matches keepLang → keep
+      removeCache(key)
+    }
+  }
 }
 
 // --- Plugin interface ---
@@ -1010,8 +1129,10 @@ export const fetchPlugin = {
 
   // Hook into element creation to auto-execute fetch configs
   create (element) {
-    const fetchProp = element.fetch || element.props?.fetch
+    const fetchProp = element.fetch
     if (!fetchProp) return
+    // Clear stale in-flight queries on root element creation
+    if (!element.parent) activeQueries.clear()
     executeFetch(fetchProp, element, element.state, element.context)
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/fetch",
-  "version": "3.8.8",
+  "version": "3.14.0",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./index.js",
@@ -25,7 +25,7 @@
     "adapters"
   ],
   "dependencies": {
-    "@domql/utils": "^3.8.8"
+    "@symbo.ls/utils": "^3.14.0"
   },
   "peerDependencies": {
     "@supabase/supabase-js": "^2.0.0"