📄 `useBrowserLocation`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	2
📦 Imports	8
📊 Variables & Constants	1
🟢 Vue Composition API	2
📐 Interfaces	2
📑 Type Aliases	1

📚 Table of Contents¶

Imports
Variables & Constants
Vue Composition API
Functions
Interfaces
Type Aliases

🛠️ File Location:¶

📂 packages/core/useBrowserLocation/index.ts

📦 Imports¶

Name	Source
`Ref`	`vue`
`ConfigurableWindow`	`../_configurable`
`objectEntries`	`@vueuse/shared`
`deepRef`	`vue`
`reactive`	`vue`
`watch`	`vue`
`defaultWindow`	`../_configurable`
`useEventListener`	`../useEventListener`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`WRITABLE_PROPERTIES`	`readonly ["hash", "host", "hostname",...`	const	`[ 'hash', 'host', 'hostname', 'href', 'pathname', 'port', 'protocol', 'search...`	✗

Vue Composition API¶

Name	Type	Reactive Variables	Composables
`reactive`	reactive	none	none
`watch`	watch	none	none

Functions¶

`useBrowserLocation(options: UseBrowserLocationOptions): UseBrowserLocationReturn`¶

Reactive browser location.

See: https://vueuse.org/useBrowserLocation

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive browser location.
 *
 * @see https://vueuse.org/useBrowserLocation
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

Object.fromEntries
WRITABLE_PROPERTIES.map
deepRef (from vue)
reactive (from vue)
buildState
objectEntries (from @vueuse/shared)
watch (from vue)
useEventListener (from ../useEventListener)

Code

export function useBrowserLocation(options: UseBrowserLocationOptions = {}): UseBrowserLocationReturn {
  const { window = defaultWindow } = options
  const refs = Object.fromEntries(
    WRITABLE_PROPERTIES.map(key => [key, deepRef()]),
  ) as Record<typeof WRITABLE_PROPERTIES[number], Ref<string | undefined>>

  const buildState = (trigger: string): BrowserLocationState => {
    const { state, length } = window?.history || {}
    const { origin } = window?.location || {}

    for (const key of WRITABLE_PROPERTIES)
      refs[key].value = window?.location?.[key]

    return reactive({
      trigger,
      state,
      length,
      origin,
      ...refs,
    })
  }

  const state = deepRef<BrowserLocationState>(buildState('load'))

  for (const [key, ref] of objectEntries(refs)) {
    watch(ref, (value) => {
      if (!window?.location || window.location[key] === value)
        return
      window.location[key] = value!
    })
  }
  if (window) {
    const listenerOptions = { passive: true }
    useEventListener(window, 'popstate', () => state.value = buildState('popstate'), listenerOptions)
    useEventListener(window, 'hashchange', () => state.value = buildState('hashchange'), listenerOptions)
  }

  return state
}

Internal helpers¶

Declared inside another function in this file.

`buildState(trigger: string): BrowserLocationState`¶

Parameters:

trigger string

Returns: BrowserLocationState

Calls:

reactive (from vue)

Code

(trigger: string): BrowserLocationState => {
    const { state, length } = window?.history || {}
    const { origin } = window?.location || {}

    for (const key of WRITABLE_PROPERTIES)
      refs[key].value = window?.location?.[key]

    return reactive({
      trigger,
      state,
      length,
      origin,
      ...refs,
    })
  }

Interfaces¶

`UseBrowserLocationOptions`¶

Interface Code

export interface UseBrowserLocationOptions extends ConfigurableWindow {
}

`BrowserLocationState`¶

Interface Code

export interface BrowserLocationState {
  readonly trigger: string
  readonly state?: any
  readonly length?: number
  readonly origin?: string
  hash?: string
  host?: string
  hostname?: string
  href?: string
  pathname?: string
  port?: string
  protocol?: string
  search?: string
}

Properties¶

Name	Type	Optional	Description
`trigger`	`string`	✗	not shown
`state`	`any`	✓	not shown
`length`	`number`	✓	not shown
`origin`	`string`	✓	not shown
`hash`	`string`	✓	not shown
`host`	`string`	✓	not shown
`hostname`	`string`	✓	not shown
`href`	`string`	✓	not shown
`pathname`	`string`	✓	not shown
`port`	`string`	✓	not shown
`protocol`	`string`	✓	not shown
`search`	`string`	✓	not shown

Type Aliases¶

`UseBrowserLocationReturn`¶

type UseBrowserLocationReturn = Ref<BrowserLocationState>;

Generated by Syntax Scribe

📄 useBrowserLocation¶