⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	11
📊 Variables & Constants	1
📐 Interfaces	2

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useBroadcastChannel/index.ts

📦 Imports

Name	Source
ComputedRef	vue
Ref	vue
ShallowRef	vue
ConfigurableWindow	../_configurable
tryOnMounted	@vueuse/shared
tryOnScopeDispose	@vueuse/shared
deepRef	vue
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useSupported	../useSupported

---

Variables & Constants

Name	Type	Kind	Value	Exported
listenerOptions	{ passive: boolean; }	const	`{
passive: true,
}`	✗

---

Functions

useBroadcastChannel(options: UseBroadcastChannelOptions): UseBroadcastChannelReturn<D, P>

Code

export function useBroadcastChannel<D, P>(options: UseBroadcastChannelOptions): UseBroadcastChannelReturn<D, P> {
  const {
    name,
    window = defaultWindow,
  } = options

  const isSupported = useSupported(() => window && 'BroadcastChannel' in window)
  const isClosed = shallowRef(false)

  const channel = deepRef<BroadcastChannel | undefined>()
  const data = deepRef()
  const error = shallowRef<Event | null>(null)

  const post = (data: unknown) => {
    if (channel.value)
      channel.value.postMessage(data)
  }

  const close = () => {
    if (channel.value)
      channel.value.close()
    isClosed.value = true
  }

  if (isSupported.value) {
    tryOnMounted(() => {
      error.value = null
      channel.value = new BroadcastChannel(name)

      const listenerOptions = {
        passive: true,
      }

      useEventListener(channel, 'message', (e: MessageEvent) => {
        data.value = e.data
      }, listenerOptions)

      useEventListener(channel, 'messageerror', (e: MessageEvent) => {
        error.value = e
      }, listenerOptions)

      useEventListener(channel, 'close', () => {
        isClosed.value = true
      }, listenerOptions)
    })
  }

  tryOnScopeDispose(() => {
    close()
  })

  return {
    isSupported,
    channel,
    data,
    post,
    close,
    error,
    isClosed,
  }
}

• JSDoc:

  /**
   * Reactive BroadcastChannel
   *
   * @see https://vueuse.org/useBroadcastChannel
   * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
   * @param options
   *
   */
  

• Parameters:

• options: UseBroadcastChannelOptions
• Return Type: UseBroadcastChannelReturn<D, P>
• Calls:
• useSupported (from ../useSupported)
• shallowRef (from vue)
• deepRef (from vue)
• channel.value.postMessage
• channel.value.close
• tryOnMounted (from @vueuse/shared)
• useEventListener (from ../useEventListener)
• tryOnScopeDispose (from @vueuse/shared)
• close

post(data: unknown): void

Code

(data: unknown) => {
    if (channel.value)
      channel.value.postMessage(data)
  }

• Parameters:
• data: unknown
• Return Type: void
• Calls:
• channel.value.postMessage

close(): void

Code

() => {
    if (channel.value)
      channel.value.close()
    isClosed.value = true
  }

• Return Type: void
• Calls:
• channel.value.close

---

Interfaces

UseBroadcastChannelOptions

Interface Code

export interface UseBroadcastChannelOptions extends ConfigurableWindow {
  /**
   * The name of the channel.
   */
  name: string
}

Properties

Name	Type	Optional	Description
name	string	✗

UseBroadcastChannelReturn<D, P>

Interface Code

export interface UseBroadcastChannelReturn<D, P> {
  isSupported: ComputedRef<boolean>
  channel: Ref<BroadcastChannel | undefined>
  data: Ref<D>
  post: (data: P) => void
  close: () => void
  error: ShallowRef<Event | null>
  isClosed: ShallowRef<boolean>
}

Properties

Name	Type	Optional	Description
isSupported	ComputedRef<boolean>	✗
channel	Ref<BroadcastChannel | undefined>	✗
data	Ref<D>	✗
post	(data: P) => void	✗
close	() => void	✗
error	ShallowRef<Event | null>	✗
isClosed	ShallowRef<boolean>	✗

---