Skip to content

⬅️ Back to Table of Contents

📄 useCookies

📊 Analysis Summary

Metric Count
🔧 Functions 10
📦 Imports 4
📑 Type Aliases 1

📚 Table of Contents

🛠️ File Location:

📂 packages/integrations/useCookies/index.ts

📦 Imports

Name Source
IncomingMessage node:http
tryOnScopeDispose @vueuse/shared
Cookie universal-cookie
shallowRef vue

Functions

createCookies(req: IncomingMessage): (dependencies?: string[] | null, { doNotParse, autoUpdateDe…

Creates a new function

Parameters:

  • req any: incoming http request (for SSR)

See: https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie

Tags: @description Creates universal-cookie instance using request (default is window.document.cookie) and returns useCookies function with provided universal-cookie instance

Raw JSDoc 
/**
 * Creates a new {@link useCookies} function
 * @param req - incoming http request (for SSR)
 * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
 * @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
 */

Calls:

  • useCookies
Code 
export function createCookies(req?: IncomingMessage) {
  const universalCookie = new Cookie(req ? req.headers.cookie : null)

  return (
    dependencies?: string[] | null,
    { doNotParse = false, autoUpdateDependencies = false } = {},
  ) => useCookies(dependencies, { doNotParse, autoUpdateDependencies }, universalCookie)
}

useCookies(dependencies: string[] | null, { doNotParse = false, autoUpdat…: any, cookies: any): { get: <T = any>(...args: Parameters<Cookie["get"]>) => any…

Reactive methods to work with cookies (use method instead if you are using SSR)

Parameters:

  • dependencies any: array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
  • options any: No description
  • options.doNotParse any: don't try parse value as JSON
  • options.autoUpdateDependencies any: automatically update watching dependencies
  • cookies any: universal-cookie instance

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc 
/**
 * Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
 * @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
 * @param options
 * @param options.doNotParse - don't try parse value as JSON
 * @param options.autoUpdateDependencies - automatically update watching dependencies
 * @param cookies - universal-cookie instance
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

  • cookies.getAll
  • shallowRef (from vue)
  • shouldUpdate
  • cookies.addChangeListener
  • tryOnScopeDispose (from @vueuse/shared)
  • cookies.removeChangeListener
  • watchingDependencies.includes
  • watchingDependencies.push
  • cookies.get
  • cookies.set
  • cookies.remove

Internal Comments: 

/**
   * Adds reactivity to get/getAll methods
   */ (x2)
/**
     * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
     */ (x2)
/**
       * Auto update watching dependencies if needed
       */
// eslint-disable-next-line ts/no-unused-expressions (x6)
/**
     * Reactive get all cookies
     */ (x2)

Code 
export function useCookies(
  dependencies?: string[] | null,
  { doNotParse = false, autoUpdateDependencies = false } = {},
  cookies = new Cookie(),
) {
  const watchingDependencies = autoUpdateDependencies ? [...dependencies || []] : dependencies

  let previousCookies = cookies.getAll<RawCookies>({ doNotParse: true })

  /**
   * Adds reactivity to get/getAll methods
   */
  const touches = shallowRef(0)

  const onChange = () => {
    const newCookies = cookies.getAll({ doNotParse: true })

    if (
      shouldUpdate(
        watchingDependencies || null,
        newCookies,
        previousCookies,
      )
    ) {
      touches.value++
    }

    previousCookies = newCookies
  }

  cookies.addChangeListener(onChange)

  tryOnScopeDispose(() => {
    cookies.removeChangeListener(onChange)
  })

  return {
    /**
     * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
     */
    get: <T = any>(...args: Parameters<Cookie['get']>) => {
      /**
       * Auto update watching dependencies if needed
       */
      if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
        watchingDependencies.push(args[0])

      // eslint-disable-next-line ts/no-unused-expressions
      touches.value // adds reactivity to method
      return cookies.get<T>(args[0], { doNotParse, ...args[1] })
    },
    /**
     * Reactive get all cookies
     */
    getAll: <T = any>(...args: Parameters<Cookie['getAll']>) => {
      // eslint-disable-next-line ts/no-unused-expressions
      touches.value // adds reactivity to method
      return cookies.getAll<T>({ doNotParse, ...args[0] })
    },
    set: (...args: Parameters<Cookie['set']>) => cookies.set(...args),
    remove: (...args: Parameters<Cookie['remove']>) => cookies.remove(...args),
    addChangeListener: (...args: Parameters<Cookie['addChangeListener']>) => cookies.addChangeListener(...args),
    removeChangeListener: (...args: Parameters<Cookie['removeChangeListener']>) => cookies.removeChangeListener(...args),
  }
}

shouldUpdate(dependencies: string[] | null, newCookies: RawCookies, oldCookies: RawCookies): boolean

Parameters:

  • dependencies string[] | null
  • newCookies RawCookies
  • oldCookies RawCookies

Returns: boolean

Code 
function shouldUpdate(
  dependencies: string[] | null,
  newCookies: RawCookies,
  oldCookies: RawCookies,
) {
  if (!dependencies)
    return true

  for (const dependency of dependencies) {
    if (newCookies[dependency] !== oldCookies[dependency])
      return true
  }

  return false
}

Internal helpers

Declared inside another function in this file.

onChange(): void

Returns: void

Calls:

  • cookies.getAll
  • shouldUpdate
Code 
() => {
    const newCookies = cookies.getAll({ doNotParse: true })

    if (
      shouldUpdate(
        watchingDependencies || null,
        newCookies,
        previousCookies,
      )
    ) {
      touches.value++
    }

    previousCookies = newCookies
  }

get(args: Parameters<Cookie['get']>): any

Parameters:

  • args Parameters<Cookie['get']>

Returns: any

Calls:

  • watchingDependencies.includes
  • watchingDependencies.push
  • cookies.get

Internal Comments: 

/**
       * Auto update watching dependencies if needed
       */
// eslint-disable-next-line ts/no-unused-expressions (x3)

Code 
<T = any>(...args: Parameters<Cookie['get']>) => {
      /**
       * Auto update watching dependencies if needed
       */
      if (autoUpdateDependencies && watchingDependencies && !watchingDependencies.includes(args[0]))
        watchingDependencies.push(args[0])

      // eslint-disable-next-line ts/no-unused-expressions
      touches.value // adds reactivity to method
      return cookies.get<T>(args[0], { doNotParse, ...args[1] })
    }

getAll(args: Parameters<Cookie['getAll']>): any

Parameters:

  • args Parameters<Cookie['getAll']>

Returns: any

Calls:

  • cookies.getAll

Internal Comments: 

// eslint-disable-next-line ts/no-unused-expressions (x3)

Code 
<T = any>(...args: Parameters<Cookie['getAll']>) => {
      // eslint-disable-next-line ts/no-unused-expressions
      touches.value // adds reactivity to method
      return cookies.getAll<T>({ doNotParse, ...args[0] })
    }

set(args: Parameters<Cookie['set']>): any

Parameters:

  • args Parameters<Cookie['set']>

Returns: any

Calls:

  • cookies.set
Code 
(...args: Parameters<Cookie['set']>) => cookies.set(...args)

remove(args: Parameters<Cookie['remove']>): any

Parameters:

  • args Parameters<Cookie['remove']>

Returns: any

Calls:

  • cookies.remove
Code 
(...args: Parameters<Cookie['remove']>) => cookies.remove(...args)

addChangeListener(args: Parameters<Cookie['addChangeListener']>): any

Parameters:

  • args Parameters<Cookie['addChangeListener']>

Returns: any

Calls:

  • cookies.addChangeListener
Code 
(...args: Parameters<Cookie['addChangeListener']>) => cookies.addChangeListener(...args)

removeChangeListener(args: Parameters<Cookie['removeChangeListener…): any

Parameters:

  • args Parameters<Cookie['removeChangeListener']>

Returns: any

Calls:

  • cookies.removeChangeListener
Code 
(...args: Parameters<Cookie['removeChangeListener']>) => cookies.removeChangeListener(...args)

Type Aliases

RawCookies

type RawCookies = Record<string, string>;

Generated by Syntax Scribe