@brickflow/http 0.0.15 → 0.0.16

package/src/http.ts

@@ -0,0 +1,286 @@
+export interface CreateHttpOptions {
+  arrayMode?: HttpArrayMode
+  baseURL: string
+  fetch?: typeof fetch
+  headers?: (() => HttpHeaders) | HttpHeaders
+  onResponse?: (response: HttpAnyResponse) => Promise<void> | void
+  timeout?: number
+}
+
+export type GetConfig<TKey extends HttpKey = HttpKey> = HttpConfigFull<TKey> & {
+  retry?: {
+    delay?: number
+    retries?: number
+  }
+}
+
+export type HttpAnyResponse = HttpResponse<HttpResponseData<HttpKey>, HttpKey, HttpConfigFull<HttpKey>>
+
+export type HttpArrayMode = 'json' | 'repeat'
+
+export type HttpClient = {
+  get: <T extends HttpKey, TConfig extends GetConfig<T> = GetConfig<T>>(
+    url: T,
+    config?: TConfig,
+  ) => Promise<HttpResponse<HttpResponseData<T>, T, TConfig>>
+  post: <T extends HttpKey, TConfig extends PostConfig<T> = PostConfig<T>>(
+    url: T,
+    data?: FormData | Record<string, unknown>,
+    config?: TConfig,
+  ) => Promise<HttpResponse<HttpResponseData<T>, T, TConfig>>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export interface HttpConfig<TKey extends HttpKey = HttpKey> {}
+export interface HttpEndpoint {}
+export type HttpErrorGuard<TData = unknown, TError extends TData = TData> = (payload: TData) => payload is TError
+
+export type HttpKey = Extract<keyof HttpSchema, string>
+export type HttpParam = Record<string, boolean | number | string | string[] | undefined>
+
+export interface HttpResponse<
+  T = unknown,
+  TKey extends HttpKey = HttpKey,
+  TConfig extends HttpConfigFull<TKey> = HttpConfigFull<TKey>,
+> {
+  config: HttpResponseConfig<TKey, TConfig>
+  data: T
+  status: number
+}
+export type HttpResponseConfig<
+  TKey extends HttpKey = HttpKey,
+  TConfig extends HttpConfig<TKey> = HttpConfig<TKey>,
+> = Omit<TConfig, 'signal'> & { url: string }
+
+export type HttpResponseData<TKey extends HttpKey = HttpKey> = HttpSchema[TKey]
+
+export type PostConfig<TKey extends HttpKey = HttpKey> = HttpConfigFull<TKey>
+
+type HttpConfigFull<TKey extends HttpKey = HttpKey> = HttpConfig<TKey> & {
+  params?: HttpParam
+  signal?: AbortSignal | AbortSignal[]
+}
+
+type HttpHeaders = Record<string, string | undefined>
+
+type HttpSchema = keyof HttpEndpoint extends never ? Record<string, unknown> : HttpEndpoint
+
+export function createHttp(options: CreateHttpOptions): HttpClient {
+  const arrayMode = options.arrayMode ?? 'json'
+  const clientFetch = options.fetch ?? fetch
+  const timeout = options.timeout ?? 80000
+
+  return {
+    get<T extends HttpKey, TConfig extends GetConfig<T> = GetConfig<T>>(url: T, config?: TConfig) {
+      const requestConfig = (config ?? {}) as TConfig
+      const requestUrl = `${joinUrl(options.baseURL, url)}${toQueryString(requestConfig.params, arrayMode)}`
+      const { delay = 300, retries = 3 } = requestConfig.retry ?? {}
+
+      const attemptRequest = async (attempt: number): Promise<HttpResponse<HttpResponseData<T>, T, TConfig>> => {
+        try {
+          const result = await clientFetch(requestUrl, {
+            credentials: 'include',
+            headers: resolveHeaders(options.headers),
+            method: 'GET',
+            signal: createSignal(requestConfig.signal, timeout),
+          })
+
+          const parsedResult = await result.json()
+          const response: HttpResponse<HttpResponseData<T>, T, TConfig> = {
+            config: createResponseConfig<T, TConfig>(joinUrl(options.baseURL, url), requestConfig),
+            data: parsedResult,
+            status: result.status,
+          }
+
+          if (!result.ok && isRetryableStatus(result.status) && attempt < retries) {
+            await wait(getRetryDelay(attempt, delay))
+            return attemptRequest(attempt + 1)
+          }
+
+          await options.onResponse?.(response as HttpAnyResponse)
+          return response
+        } catch (err) {
+          if (isAbortError(err) || attempt >= retries) {
+            throw err
+          }
+
+          await wait(getRetryDelay(attempt, delay))
+          return attemptRequest(attempt + 1)
+        }
+      }
+
+      return attemptRequest(0)
+    },
+    async post<T extends HttpKey, TConfig extends PostConfig<T> = PostConfig<T>>(
+      url: T,
+      data?: FormData | Record<string, unknown>,
+      config?: TConfig,
+    ) {
+      const requestConfig = (config ?? {}) as TConfig
+      const isForm = isFormData(data)
+      const requestUrl = `${joinUrl(options.baseURL, url)}${toQueryString(requestConfig.params, arrayMode)}`
+      const response = await clientFetch(requestUrl, {
+        body: isForm || data === undefined ? data : JSON.stringify(data),
+        credentials: 'include',
+        headers: resolveHeaders(
+          options.headers,
+          data !== undefined && !isForm ? { 'Content-Type': 'application/json' } : undefined,
+        ),
+        method: 'POST',
+        signal: createSignal(requestConfig.signal, timeout),
+      })
+
+      let parsedResult: Awaited<ReturnType<typeof response.json>> = {}
+      try {
+        parsedResult = await response.json()
+      } catch {
+        parsedResult = {}
+      }
+
+      const parsedResponse: HttpResponse<HttpResponseData<T>, T, TConfig> = {
+        config: createResponseConfig<T, TConfig>(joinUrl(options.baseURL, url), requestConfig),
+        data: parsedResult,
+        status: response.status,
+      }
+
+      await options.onResponse?.(parsedResponse as HttpAnyResponse)
+      return parsedResponse
+    },
+  }
+}
+
+function createAnySignal(signals: AbortSignal[]): AbortSignal {
+  if (typeof AbortSignal?.any === 'function') {
+    return AbortSignal.any(signals)
+  }
+
+  const controller = new AbortController()
+
+  signals.filter(Boolean).forEach((signal) => {
+    signal.addEventListener('abort', () => controller.abort(), { once: true })
+  })
+
+  return controller.signal
+}
+
+function createResponseConfig<TKey extends HttpKey, TConfig extends HttpConfigFull<TKey>>(
+  url: string,
+  config: TConfig,
+): HttpResponseConfig<TKey, TConfig> {
+  const responseConfig = { ...config } as Record<string, unknown>
+  delete responseConfig.signal
+
+  return {
+    ...responseConfig,
+    url,
+  } as HttpResponseConfig<TKey, TConfig>
+}
+
+function createSignal(signal: AbortSignal | AbortSignal[] | undefined, timeout: number): AbortSignal {
+  const timeoutSignal = createTimeoutSignal(timeout)
+
+  if (Array.isArray(signal)) {
+    return createAnySignal([...signal, timeoutSignal])
+  }
+
+  if (signal) {
+    return createAnySignal([signal, timeoutSignal])
+  }
+
+  return timeoutSignal
+}
+
+function createTimeoutSignal(ms: number): AbortSignal {
+  if (typeof AbortSignal?.timeout === 'function') {
+    return AbortSignal.timeout(ms)
+  }
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), ms)
+
+  controller.signal.addEventListener('abort', () => clearTimeout(timeoutId), {
+    once: true,
+  })
+
+  return controller.signal
+}
+
+function getRetryDelay(attempt: number, delay: number): number {
+  return delay * 2 ** attempt
+}
+
+function isAbortError(err: unknown): boolean {
+  return err instanceof DOMException && err.name === 'AbortError'
+}
+
+function isFormData(value: FormData | Record<string, unknown> | undefined): value is FormData {
+  return typeof FormData !== 'undefined' && value instanceof FormData
+}
+
+function isRetryableStatus(status: number): boolean {
+  return status >= 500 || status === 429
+}
+
+function joinUrl(baseURL: string, url: string): string {
+  const normalizedBase = baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL
+  const normalizedUrl = url.startsWith('/') ? url.slice(1) : url
+
+  return `${normalizedBase}/${normalizedUrl}`
+}
+
+function resolveHeaders(
+  value: CreateHttpOptions['headers'],
+  extraHeaders?: Record<string, string>,
+): Record<string, string> {
+  const headers = typeof value === 'function' ? value() : value
+
+  return Object.entries({
+    ...headers,
+    ...extraHeaders,
+  }).reduce<Record<string, string>>((acc, [key, headerValue]) => {
+    if (typeof headerValue === 'string') {
+      acc[key] = headerValue
+    }
+
+    return acc
+  }, {})
+}
+
+function serializeQueryValue(
+  urlParams: URLSearchParams,
+  key: string,
+  value: HttpParam[string],
+  arrayMode: HttpArrayMode,
+): void {
+  if (value === undefined) {
+    return
+  }
+
+  if (Array.isArray(value)) {
+    if (arrayMode === 'json') {
+      urlParams.append(key, JSON.stringify(value))
+      return
+    }
+
+    value.forEach((item) => {
+      urlParams.append(`${key}[]`, item)
+    })
+    return
+  }
+
+  urlParams.append(key, String(value))
+}
+
+function toQueryString(params?: HttpParam, arrayMode: HttpArrayMode = 'json'): string {
+  const urlParams = new URLSearchParams()
+
+  Object.entries(params ?? {}).forEach(([key, value]) => {
+    serializeQueryValue(urlParams, key, value, arrayMode)
+  })
+
+  return urlParams.size > 0 ? `?${urlParams}` : ''
+}
+
+function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './create-get'
+export * from './http'
+export * from './nuxt'

package/src/nuxt.ts

@@ -0,0 +1,355 @@
+import { onScopeDispose, shallowReactive, shallowRef } from 'vue'
+
+import { useLazyAsyncData, useState } from '#app'
+
+import type { GetConfig, HttpClient, HttpErrorGuard, HttpKey, HttpParam, HttpResponseData } from './http'
+
+import { createURL, hashData } from './utils'
+
+const DAY = 1000 * 60 * 60 * 24
+const DEFAULT_CHANNEL_NAME = 'http-tab-sync'
+const DEFAULT_TTL = DAY * 7
+export interface CreateUseHttpDependencies {
+  channelName?: string
+  getCache: () => null | UseHttpCache
+  getHttpClient: () => HttpClient
+  isDev?: () => boolean
+  isError?: HttpErrorGuard<unknown>
+  ttl?: number
+}
+
+export type HttpError = HttpErrorMap[keyof HttpErrorMap]
+export interface HttpErrorMap {}
+export type HttpSuccessData<TKey extends HttpKey = HttpKey> = Exclude<HttpResponseData<TKey>, HttpError>
+
+export interface UseHttpCache {
+  deleteKeysWithPart: (part: string) => Promise<void>
+  get: <T>(key: string) => Promise<null | UseHttpCacheEntry<T>>
+  set: <T>(key: string, value: T, ttl: number) => Promise<void>
+}
+
+export interface UseHttpCacheEntry<T> {
+  hash: string
+  value: T
+}
+
+export interface UseHttpFn {
+  <T extends HttpKey, P extends HttpParam>(options: UseHttpOptions<T, P>): Promise<UseHttpResult<T, P>>
+}
+
+export interface UseHttpOptions<T extends HttpKey, P extends HttpParam> {
+  effect?: UseHttpEffect<T, P>
+  initParams?: P
+  isError?: (payload: HttpResponseData<T>) => boolean
+  lazy?: true
+  mapParams?: (params?: P) => P
+  server?: boolean
+  url: T
+}
+
+export interface UseHttpResult<T extends HttpKey, P extends HttpParam> {
+  data: HttpSuccessData<T> | null
+  error: null | UseHttpError<T>
+  fetch: UseHttpFetch<P>
+  hasFirstData: boolean
+  hasFreshData: boolean
+  pending: boolean
+  pendingCache: boolean
+}
+
+type BroadcastMessage = {
+  data: unknown
+  fullUrl: string
+  params: HttpParam
+  type: 'STATE_UPDATE'
+}
+
+type UseHttpEffect<T extends HttpKey, P extends HttpParam> = (
+  data: HttpResponseData<T>,
+  config: UseHttpEffectConfig<P>,
+) => void
+type UseHttpEffectConfig<P extends HttpParam> = {
+  cached: boolean
+  params: P
+}
+type UseHttpError<T extends HttpKey> = Extract<HttpResponseData<T>, HttpError>
+
+type UseHttpFetch<P extends HttpParam> = (params?: P, opt?: { signal: AbortSignal }) => Promise<void>
+
+export function createUseHttp(dependencies: CreateUseHttpDependencies): UseHttpFn {
+  let channel: BroadcastChannel | null
+
+  const useHttp: UseHttpFn = async <T extends HttpKey, P extends HttpParam>(
+    options: UseHttpOptions<T, P>,
+  ): Promise<UseHttpResult<T, P>> => {
+    const mapParams = (params?: P): P => {
+      if (options.mapParams) {
+        return options.mapParams(params)
+      }
+
+      return params ?? ({} as P)
+    }
+    const effect = options.effect
+    const isError = createIsErrorGuard(options.isError, dependencies.isError)
+
+    const buildUrl = createURL
+    const initFullUrl = buildUrl(options.url, mapParams(options.initParams))
+    const httpClient = dependencies.getHttpClient()
+    const cache = import.meta.client ? (dependencies.getCache?.() ?? null) : null
+    let hasDataFromServer = false
+
+    const result = shallowReactive({
+      data: null as null | unknown,
+      error: null as null | unknown,
+      fetch: async (_params?: P, _opt?: { signal: AbortSignal }): Promise<void> => await undefined,
+      hasFirstData: false,
+      hasFreshData: false,
+      pending: true,
+      pendingCache: true,
+    })
+    const setError = (value: null | unknown): void => {
+      result.error = value
+    }
+    const setData = (value: null | unknown): void => {
+      result.data = value
+    }
+    const syncResult = (payload: HttpResponseData<T> | null | undefined): void => {
+      if (payload === null || payload === undefined) {
+        setData(null)
+        setError(null)
+        return
+      }
+
+      if (isError(payload)) {
+        setData(null)
+        setError(payload)
+        return
+      }
+
+      setData(payload)
+      setError(null)
+    }
+
+    const controller = new AbortController()
+    const serverData = useState<null | unknown>(`http-${initFullUrl}`, () => null)
+
+    if (options.server && import.meta.server) {
+      const paramsReactive = shallowRef(mapParams(options.initParams))
+      const ssr = await useLazyAsyncData(initFullUrl, async () => {
+        return await httpClient.get<T>(options.url, {
+          params: paramsReactive.value,
+        } as GetConfig<T>)
+      })
+
+      result.fetch = async (params?: P) => {
+        paramsReactive.value = mapParams(params)
+        await ssr.refresh()
+      }
+
+      serverData.value = ssr.data.value?.data ?? null
+      const serverPayload = serverData.value as HttpResponseData<T>
+      syncResult(serverPayload)
+
+      result.pending = false
+      result.pendingCache = false
+      result.hasFirstData = true
+      result.hasFreshData = true
+
+      if (serverData.value) {
+        effect?.(serverData.value as HttpResponseData<T>, {
+          cached: false,
+          params: mapParams(options.initParams),
+        })
+      }
+
+      if (result.data) {
+        hasDataFromServer = true
+      }
+    }
+
+    if (import.meta.client) {
+      channel = getChannel(dependencies.channelName ?? DEFAULT_CHANNEL_NAME, channel)
+      const fullUrlHistory: Record<string, true> = {}
+
+      function onMessage(event: MessageEvent<Partial<BroadcastMessage>>): void {
+        if (event.data.fullUrl && fullUrlHistory[event.data.fullUrl]) {
+          const eventPayload = event.data.data as HttpResponseData<T> | undefined
+
+          if (eventPayload) {
+            effect?.(eventPayload, {
+              cached: false,
+              params: event.data.params as P,
+            })
+          }
+
+          syncResult(eventPayload)
+
+          result.hasFirstData = true
+          result.hasFreshData = true
+        }
+      }
+
+      channel?.addEventListener('message', onMessage)
+
+      if (serverData.value) {
+        const clientServerPayload = serverData.value as HttpResponseData<T>
+        syncResult(clientServerPayload)
+        result.pending = false
+        result.pendingCache = false
+        result.hasFirstData = true
+        result.hasFreshData = true
+      }
+
+      const raceCondition: Record<string, number> = {}
+      const ttl = dependencies.ttl ?? DEFAULT_TTL
+
+      const runFetch = async (params?: P, fetchOpt?: { signal?: AbortSignal }): Promise<void> => {
+        const mappedParams = mapParams(params)
+        const fullUrl = buildUrl(options.url, mappedParams)
+        const fetchId = Date.now() + getRandom(0, 300)
+
+        if (raceCondition[fullUrl]) {
+          console.info('Race Condition affect', fullUrl)
+          return
+        }
+
+        raceCondition[fullUrl] = fetchId
+
+        try {
+          result.pending = true
+          result.pendingCache = true
+
+          const cachedFetch = cache && !dependencies.isDev?.() ? await cache.get<unknown>(fullUrl) : null
+
+          if (cachedFetch) {
+            const cachedPayload = cachedFetch.value as HttpResponseData<T>
+
+            effect?.(cachedPayload, {
+              cached: true,
+              params: mappedParams,
+            })
+
+            syncResult(cachedPayload)
+            result.hasFirstData = true
+
+            result.pendingCache = false
+          }
+
+          if (controller.signal.aborted || fetchOpt?.signal?.aborted) {
+            throw new DOMException('Aborted', 'AbortError')
+          }
+
+          const signalHttp = fetchOpt?.signal ? [controller.signal, fetchOpt.signal] : controller.signal
+          const response = await httpClient.get<T>(options.url, {
+            params: mappedParams,
+            signal: signalHttp,
+          } as GetConfig<T>)
+          const responsePayload = response.data as HttpResponseData<T>
+
+          effect?.(responsePayload, {
+            cached: false,
+            params: mappedParams,
+          })
+
+          if (isError(responsePayload)) {
+            syncResult(responsePayload)
+          } else {
+            syncResult(responsePayload)
+            const successData = responsePayload
+
+            fullUrlHistory[fullUrl] = true
+            channel?.postMessage({
+              data: normalizeBroadcastValue(successData),
+              fullUrl,
+              params: normalizeBroadcastValue(mappedParams),
+              type: 'STATE_UPDATE',
+            } satisfies BroadcastMessage)
+
+            if (cache) {
+              if (cachedFetch) {
+                const newHash = await hashData(responsePayload)
+                if (newHash !== cachedFetch.hash) {
+                  await cache.deleteKeysWithPart(options.url)
+                }
+              }
+
+              if (response.status === 200) {
+                await cache.set(fullUrl, successData, ttl)
+              }
+            }
+          }
+
+          result.hasFirstData = true
+          result.hasFreshData = true
+        } catch (error) {
+          console.error(error)
+        } finally {
+          if (raceCondition[fullUrl] === fetchId) {
+            delete raceCondition[fullUrl]
+          }
+
+          result.pending = false
+          result.pendingCache = false
+        }
+      }
+
+      result.fetch = runFetch
+
+      if (!hasDataFromServer && options.lazy !== true) {
+        runFetch(options.initParams)
+      }
+
+      onScopeDispose(() => {
+        channel?.removeEventListener('message', onMessage)
+        controller.abort(`Http Abort -> onScopeDispose ${options.url}`)
+
+        if (serverData.value) {
+          serverData.value = null
+        }
+      })
+    }
+
+    return result as UseHttpResult<T, P>
+  }
+
+  return useHttp
+}
+
+function createIsErrorGuard<TData>(
+  localGuard?: (payload: TData) => boolean,
+  globalGuard?: HttpErrorGuard<unknown>,
+): (payload: TData) => boolean {
+  if (localGuard) {
+    return localGuard
+  }
+
+  if (globalGuard) {
+    return globalGuard as (payload: TData) => boolean
+  }
+
+  return (): boolean => false
+}
+
+function getChannel(name: string, currentChannel?: BroadcastChannel | null): BroadcastChannel | null {
+  if (currentChannel) {
+    return currentChannel
+  }
+
+  if (import.meta.server || typeof BroadcastChannel !== 'function') {
+    return null
+  }
+
+  return new BroadcastChannel(name)
+}
+
+function getRandom(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+function normalizeBroadcastValue<T>(payload: T): T {
+  try {
+    return structuredClone(payload)
+  } catch {
+    return JSON.parse(JSON.stringify(payload)) as T
+  }
+}

package/src/utils.ts

@@ -0,0 +1,50 @@
+import type { HttpParam } from './http'
+
+export function createURL(url: string, params?: HttpParam): string {
+  const urlParams = new URLSearchParams()
+
+  Object.entries(params ?? {}).forEach(([key, value]) => {
+    if (value === undefined) {
+      return
+    }
+
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        urlParams.append(`${key}[]`, item)
+      })
+      return
+    }
+
+    urlParams.append(key, String(value))
+  })
+
+  const query = urlParams.size > 0 ? `?${urlParams}` : ''
+  return urlParams.size > 0 ? `${url}${query}` : url
+}
+
+export function fastDevHash(data: unknown): string {
+  const str = JSON.stringify(data)
+  let hash = 0
+
+  for (let i = 0; i < str.length; i++) {
+    const chr = str.charCodeAt(i)
+    hash = (hash << 5) - hash + chr
+    hash |= 0
+  }
+
+  return Math.abs(hash).toString(16)
+}
+
+export async function hashData(data: unknown): Promise<string> {
+  const subtle = globalThis.crypto?.subtle
+
+  if (subtle) {
+    const encoded = new TextEncoder().encode(JSON.stringify(data))
+    const buffer = await subtle.digest('SHA-1', encoded)
+    const array = Array.from(new Uint8Array(buffer))
+
+    return array.map((value) => value.toString(16).padStart(2, '0')).join('')
+  }
+
+  return fastDevHash(data)
+}