devskill 2.0.2

package/skills/vueuse-functions/references/useWebNotification.md

@@ -0,0 +1,176 @@
+---
+category: Browser
+---
+
+# useWebNotification
+
+Reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification)
+
+The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
+
+## Usage
+
+::: tip
+Before an app can send a notification, the user must grant the application the right to do so. The user's OS settings may also prevent expected notification behaviour.
+:::
+
+```ts
+import { useWebNotification } from '@vueuse/core'
+
+const {
+  isSupported,
+  notification,
+  permissionGranted,
+  show,
+  close,
+  onClick,
+  onShow,
+  onError,
+  onClose,
+} = useWebNotification({
+  title: 'Hello, VueUse world!',
+  dir: 'auto',
+  lang: 'en',
+  renotify: true,
+  tag: 'test',
+})
+
+if (isSupported.value && permissionGranted.value)
+  show()
+```
+
+This composable also utilizes the createEventHook utility from '@vueuse/shared`:
+
+```ts
+import { useWebNotification } from '@vueuse/core'
+
+const { onClick, onShow, onError, onClose, } = useWebNotification()
+// ---cut---
+onClick((evt: Event) => {
+  // Do something with the notification on:click event...
+})
+
+onShow((evt: Event) => {
+  // Do something with the notification on:show event...
+})
+
+onError((evt: Event) => {
+  // Do something with the notification on:error event...
+})
+
+onClose((evt: Event) => {
+  // Do something with the notification on:close event...
+})
+```
+
+## Type Declarations
+
+```ts
+export interface WebNotificationOptions {
+  /**
+   * The title read-only property of the Notification interface indicates
+   * the title of the notification
+   *
+   * @default ''
+   */
+  title?: string
+  /**
+   * The body string of the notification as specified in the constructor's
+   * options parameter.
+   *
+   * @default ''
+   */
+  body?: string
+  /**
+   * The text direction of the notification as specified in the constructor's
+   * options parameter.
+   *
+   * @default ''
+   */
+  dir?: "auto" | "ltr" | "rtl"
+  /**
+   * The language code of the notification as specified in the constructor's
+   * options parameter.
+   *
+   * @default DOMString
+   */
+  lang?: string
+  /**
+   * The ID of the notification(if any) as specified in the constructor's options
+   * parameter.
+   *
+   * @default ''
+   */
+  tag?: string
+  /**
+   * The URL of the image used as an icon of the notification as specified
+   * in the constructor's options parameter.
+   *
+   * @default ''
+   */
+  icon?: string
+  /**
+   * Specifies whether the user should be notified after a new notification
+   * replaces an old one.
+   *
+   * @default false
+   */
+  renotify?: boolean
+  /**
+   * A boolean value indicating that a notification should remain active until the
+   * user clicks or dismisses it, rather than closing automatically.
+   *
+   * @default false
+   */
+  requireInteraction?: boolean
+  /**
+   * The silent read-only property of the Notification interface specifies
+   * whether the notification should be silent, i.e., no sounds or vibrations
+   * should be issued, regardless of the device settings.
+   *
+   * @default false
+   */
+  silent?: boolean
+  /**
+   * Specifies a vibration pattern for devices with vibration hardware to emit.
+   * A vibration pattern, as specified in the Vibration API spec
+   *
+   * @see https://w3c.github.io/vibration/
+   */
+  vibrate?: number[]
+}
+export interface UseWebNotificationOptions
+  extends ConfigurableWindow, WebNotificationOptions {
+  /**
+   * Request for permissions onMounted if it's not granted.
+   *
+   * Can be disabled and calling `ensurePermissions` to grant afterwords.
+   *
+   * @default true
+   */
+  requestPermissions?: boolean
+}
+/**
+ * Reactive useWebNotification
+ *
+ * @see https://vueuse.org/useWebNotification
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/notification
+ */
+export declare function useWebNotification(
+  options?: UseWebNotificationOptions,
+): {
+  isSupported: ComputedRef<boolean>
+  notification: Ref<Notification | null, Notification | null>
+  ensurePermissions: () => Promise<boolean | undefined>
+  permissionGranted: ShallowRef<boolean, boolean>
+  show: (
+    overrides?: WebNotificationOptions,
+  ) => Promise<Notification | undefined>
+  close: () => void
+  onClick: EventHookOn<any>
+  onShow: EventHookOn<any>
+  onError: EventHookOn<any>
+  onClose: EventHookOn<any>
+}
+export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>
+```

package/skills/vueuse-functions/references/useWebSocket.md

@@ -0,0 +1,299 @@
+---
+category: Network
+---
+
+# useWebSocket
+
+Reactive [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket) client.
+
+## Usage
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+
+const { status, data, send, open, close, ws } = useWebSocket('ws://websocketurl')
+```
+
+### Return Values
+
+| Property | Type                                      | Description                          |
+| -------- | ----------------------------------------- | ------------------------------------ |
+| `data`   | `Ref<any>`                                | Latest received data                 |
+| `status` | `Ref<'OPEN' \| 'CONNECTING' \| 'CLOSED'>` | Connection status                    |
+| `ws`     | `Ref<WebSocket>`                          | WebSocket instance                   |
+| `send`   | `(data, useBuffer?) => boolean`           | Send data (buffers if not connected) |
+| `open`   | `() => void`                              | Open/reconnect the connection        |
+| `close`  | `(code?, reason?) => void`                | Close the connection                 |
+
+### Callbacks
+
+```ts
+const { data } = useWebSocket('ws://websocketurl', {
+  onConnected(ws) {
+    console.log('Connected!')
+  },
+  onDisconnected(ws, event) {
+    console.log('Disconnected!', event.code)
+  },
+  onError(ws, event) {
+    console.error('Error:', event)
+  },
+  onMessage(ws, event) {
+    console.log('Message:', event.data)
+  },
+})
+```
+
+See the [Type Declarations](#type-declarations) for more options.
+
+### immediate
+
+Enable by default.
+
+Establish the connection immediately when the composable is called.
+
+### autoConnect
+
+Enable by default.
+
+If a URL is provided as a ref, when the URL changes, it will automatically reconnect to the new URL.
+
+### autoClose
+
+Enable by default.
+
+This will call `close()` automatically when the `beforeunload` event is triggered or the associated effect scope is stopped.
+
+### autoReconnect
+
+Reconnect on errors automatically (disabled by default).
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+// ---cut---
+const { status, data, close } = useWebSocket('ws://websocketurl', {
+  autoReconnect: true,
+})
+```
+
+Or with more controls over its behavior:
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+// ---cut---
+const { status, data, close } = useWebSocket('ws://websocketurl', {
+  autoReconnect: {
+    retries: 3,
+    delay: 1000,
+    onFailed() {
+      alert('Failed to connect WebSocket after 3 retries')
+    },
+  },
+})
+```
+
+You can also pass a function to `delay` to calculate the delay based on the number of retries. This is useful for implementing exponential backoff:
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+// ---cut---
+const { status, data, close } = useWebSocket('ws://websocketurl', {
+  autoReconnect: {
+    retries: 5,
+    // Exponential backoff: 1s, 2s, 4s, 8s, 16s
+    delay: retries => Math.min(1000 * 2 ** (retries - 1), 30000),
+  },
+})
+```
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+// ---cut---
+const { status, data, close } = useWebSocket('ws://websocketurl', {
+  autoReconnect: {
+    retries: 5,
+    // Linear backoff: 1s, 2s, 3s, 4s, 5s
+    delay: retries => retries * 1000,
+  },
+})
+```
+
+Explicitly calling `close()` won't trigger the auto reconnection.
+
+### heartbeat
+
+It's common practice to send a small message (heartbeat) for every given time passed to keep the connection active. In this function we provide a convenient helper to do it:
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+// ---cut---
+const { status, data, close } = useWebSocket('ws://websocketurl', {
+  heartbeat: true,
+})
+```
+
+Or with more controls:
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+// ---cut---
+const { status, data, close } = useWebSocket('ws://websocketurl', {
+  heartbeat: {
+    message: 'ping',
+    scheduler: cb => useIntervalFn(cb, 2000),
+    pongTimeout: 1000,
+  },
+})
+```
+
+### Sub-protocols
+
+List of one or more subprotocols to use, in this case SOAP and WAMP.
+
+```ts
+import { useWebSocket } from '@vueuse/core'
+// ---cut---
+const { status, data, send, open, close } = useWebSocket('ws://websocketurl', {
+  protocols: ['soap'], // ['soap', 'wamp']
+})
+```
+
+## Type Declarations
+
+```ts
+export type WebSocketStatus = "OPEN" | "CONNECTING" | "CLOSED"
+export type WebSocketHeartbeatMessage = string | ArrayBuffer | Blob
+export interface UseWebSocketOptions {
+  onConnected?: (ws: WebSocket) => void
+  onDisconnected?: (ws: WebSocket, event: CloseEvent) => void
+  onError?: (ws: WebSocket, event: Event) => void
+  onMessage?: (ws: WebSocket, event: MessageEvent) => void
+  /**
+   * Send heartbeat for every x milliseconds passed
+   *
+   * @default false
+   */
+  heartbeat?:
+    | boolean
+    | (ConfigurableScheduler & {
+        /**
+         * Message for the heartbeat
+         *
+         * @default 'ping'
+         */
+        message?: MaybeRefOrGetter<WebSocketHeartbeatMessage>
+        /**
+         * Response message for the heartbeat, if undefined the message will be used
+         */
+        responseMessage?: MaybeRefOrGetter<WebSocketHeartbeatMessage>
+        /**
+         * Interval, in milliseconds
+         *
+         * @deprecated Please use `scheduler` option instead
+         * @default 1000
+         */
+        interval?: number
+        /**
+         * Heartbeat response timeout, in milliseconds
+         *
+         * @default 1000
+         */
+        pongTimeout?: number
+      })
+  /**
+   * Enabled auto reconnect
+   *
+   * @default false
+   */
+  autoReconnect?:
+    | boolean
+    | {
+        /**
+         * Maximum retry times.
+         *
+         * Or you can pass a predicate function (which returns true if you want to retry).
+         *
+         * @default -1
+         */
+        retries?: number | ((retried: number) => boolean)
+        /**
+         * Delay for reconnect, in milliseconds
+         *
+         * Or you can pass a function to calculate the delay based on the number of retries.
+         *
+         * @default 1000
+         */
+        delay?: number | ((retries: number) => number)
+        /**
+         * On maximum retry times reached.
+         */
+        onFailed?: Fn
+      }
+  /**
+   * Immediately open the connection when calling this composable
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Automatically connect to the websocket when URL changes
+   *
+   * @default true
+   */
+  autoConnect?: boolean
+  /**
+   * Automatically close a connection
+   *
+   * @default true
+   */
+  autoClose?: boolean
+  /**
+   * List of one or more sub-protocol strings
+   *
+   * @default []
+   */
+  protocols?: string[]
+}
+export interface UseWebSocketReturn<T> {
+  /**
+   * Reference to the latest data received via the websocket,
+   * can be watched to respond to incoming messages
+   */
+  data: Ref<T | null>
+  /**
+   * The current websocket status, can be only one of:
+   * 'OPEN', 'CONNECTING', 'CLOSED'
+   */
+  status: ShallowRef<WebSocketStatus>
+  /**
+   * Closes the websocket connection gracefully.
+   */
+  close: WebSocket["close"]
+  /**
+   * Reopen the websocket connection.
+   * If there the current one is active, will close it before opening a new one.
+   */
+  open: Fn
+  /**
+   * Sends data through the websocket connection.
+   *
+   * @param data
+   * @param useBuffer when the socket is not yet open, store the data into the buffer and sent them one connected. Default to true.
+   */
+  send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean
+  /**
+   * Reference to the WebSocket instance.
+   */
+  ws: Ref<WebSocket | undefined>
+}
+/**
+ * Reactive WebSocket client.
+ *
+ * @see https://vueuse.org/useWebSocket
+ * @param url
+ */
+export declare function useWebSocket<Data = any>(
+  url: MaybeRefOrGetter<string | URL | undefined>,
+  options?: UseWebSocketOptions,
+): UseWebSocketReturn<Data>
+```

package/skills/vueuse-functions/references/useWebWorker.md

@@ -0,0 +1,60 @@
+---
+category: Browser
+related: useWebWorkerFn
+---
+
+# useWebWorker
+
+Simple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) registration and communication.
+
+## Usage
+
+```ts
+import { useWebWorker } from '@vueuse/core'
+
+const { data, post, terminate, worker } = useWebWorker('/path/to/worker.js')
+```
+
+| State  | Type                              | Description                                                                                          |
+| ------ | --------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| data   | `Ref<any>`                        | Reference to the latest data received via the worker, can be watched to respond to incoming messages |
+| worker | `ShallowRef<Worker \| undefined>` | Reference to the instance of the WebWorker                                                           |
+
+| Method    | Signature                                                                                                                     | Description                      |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| post      | `(message: any, transfer: Transferable[]): void`<br>`(message: any, options?: StructuredSerializeOptions \| undefined): void` | Sends data to the worker thread. |
+| terminate | `() => void`                                                                                                                  | Stops and terminates the worker. |
+
+## Type Declarations
+
+```ts
+type PostMessage = (typeof Worker.prototype)["postMessage"]
+export interface UseWebWorkerReturn<Data = any> {
+  data: Ref<Data>
+  post: PostMessage
+  terminate: () => void
+  worker: ShallowRef<Worker | undefined>
+}
+type WorkerFn = (...args: unknown[]) => Worker
+/**
+ * Simple Web Workers registration and communication.
+ *
+ * @see https://vueuse.org/useWebWorker
+ * @param url
+ * @param workerOptions
+ * @param options
+ */
+export declare function useWebWorker<T = any>(
+  url: string,
+  workerOptions?: WorkerOptions,
+  options?: ConfigurableWindow,
+): UseWebWorkerReturn<T>
+/**
+ * Simple Web Workers registration and communication.
+ *
+ * @see https://vueuse.org/useWebWorker
+ */
+export declare function useWebWorker<T = any>(
+  worker: Worker | WorkerFn,
+): UseWebWorkerReturn<T>
+```

package/skills/vueuse-functions/references/useWebWorkerFn.md

@@ -0,0 +1,102 @@
+---
+category: Browser
+---
+
+# useWebWorkerFn
+
+Run expensive functions without blocking the UI, using a simple syntax that makes use of Promise. A port of [alewin/useWorker](https://github.com/alewin/useWorker).
+
+## Usage
+
+### Basic example
+
+```ts
+import { useWebWorkerFn } from '@vueuse/core'
+
+const { workerFn } = useWebWorkerFn(() => {
+  // some heavy works to do in web worker
+})
+```
+
+### With dependencies
+
+```ts {7-9}
+import { useWebWorkerFn } from '@vueuse/core'
+
+const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
+  dates => dates.sort(dateFns.compareAsc),
+  {
+    timeout: 50000,
+    dependencies: [
+      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js', // dateFns
+    ],
+  },
+)
+```
+
+### With local dependencies
+
+```ts {9-9}
+import { useWebWorkerFn } from '@vueuse/core'
+
+const pow = (a: number) => a * a
+
+const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
+  numbers => pow(numbers),
+  {
+    timeout: 50000,
+    localDependencies: [pow]
+  },
+)
+```
+
+## Web Worker
+
+Before you start using this function, we suggest you read the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) documentation.
+
+## Credit
+
+This function is a Vue port of https://github.com/alewin/useWorker by Alessio Koci, with the help of [@Donskelle](https://github.com/Donskelle) to migration.
+
+## Type Declarations
+
+```ts
+export type WebWorkerStatus =
+  | "PENDING"
+  | "SUCCESS"
+  | "RUNNING"
+  | "ERROR"
+  | "TIMEOUT_EXPIRED"
+export interface UseWebWorkerOptions extends ConfigurableWindow {
+  /**
+   * Number of milliseconds before killing the worker
+   *
+   * @default undefined
+   */
+  timeout?: number
+  /**
+   * An array that contains the external dependencies needed to run the worker
+   */
+  dependencies?: string[]
+  /**
+   * An array that contains the local dependencies needed to run the worker
+   */
+  localDependencies?: Function[]
+}
+/**
+ * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
+ *
+ * @see https://vueuse.org/useWebWorkerFn
+ * @param fn
+ * @param options
+ */
+export declare function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(
+  fn: T,
+  options?: UseWebWorkerOptions,
+): {
+  workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
+  workerStatus: ShallowRef<WebWorkerStatus, WebWorkerStatus>
+  workerTerminate: (status?: WebWorkerStatus) => void
+}
+export type UseWebWorkerFnReturn = ReturnType<typeof useWebWorkerFn>
+```

package/skills/vueuse-functions/references/useWindowFocus.md

@@ -0,0 +1,46 @@
+---
+category: Elements
+---
+
+# useWindowFocus
+
+Reactively track window focus with `window.onfocus` and `window.onblur` events.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useWindowFocus } from '@vueuse/core'
+
+const focused = useWindowFocus()
+</script>
+
+<template>
+  <div>{{ focused }}</div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseWindowFocus v-slot="{ focused }">
+    Document Focus: {{ focused }}
+  </UseWindowFocus>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactively track window focus with `window.onfocus` and `window.onblur`.
+ *
+ * @see https://vueuse.org/useWindowFocus
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useWindowFocus(
+  options?: ConfigurableWindow,
+): ShallowRef<boolean>
+```