devskill 2.0.2

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

@@ -0,0 +1,144 @@
+---
+category: '@Electron'
+---
+
+# useIpcRenderer
+
+Provides [ipcRenderer](https://www.electronjs.org/docs/api/ipc-renderer) and all of its APIs with Vue reactivity.
+
+## Usage
+
+```ts
+import { useIpcRenderer } from '@vueuse/electron'
+import { computed } from 'vue'
+
+// enable nodeIntegration if you don't provide ipcRenderer explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+const ipcRenderer = useIpcRenderer()
+
+// Ref result will return
+const result = ipcRenderer.invoke<string>('custom-channel', 'some data')
+const msg = computed(() => result.value?.msg)
+
+// remove listener automatically on unmounted
+ipcRenderer.on('custom-event', (event, ...args) => {
+  console.log(args)
+})
+```
+
+### Available Methods
+
+| Method                                     | Description                                          |
+| ------------------------------------------ | ---------------------------------------------------- |
+| `on(channel, listener)`                    | Listen to channel. Auto-removes listener on unmount. |
+| `once(channel, listener)`                  | Listen to channel once                               |
+| `removeListener(channel, listener)`        | Remove specific listener                             |
+| `removeAllListeners(channel)`              | Remove all listeners for channel                     |
+| `send(channel, ...args)`                   | Send async message to main process                   |
+| `invoke(channel, ...args)`                 | Send message and get response as `ShallowRef`        |
+| `sendSync(channel, ...args)`               | Send sync message and get response as `ShallowRef`   |
+| `postMessage(channel, message, transfer?)` | Send message with transferable objects               |
+| `sendTo(webContentsId, channel, ...args)`  | Send to specific webContents                         |
+| `sendToHost(channel, ...args)`             | Send to webview host                                 |
+
+### With Custom IpcRenderer
+
+If `nodeIntegration` is disabled, you can pass the `ipcRenderer` instance explicitly:
+
+```ts
+import { useIpcRenderer } from '@vueuse/electron'
+import { ipcRenderer } from 'electron'
+
+const ipc = useIpcRenderer(ipcRenderer)
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Result from useIpcRenderer
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer
+ */
+export interface UseIpcRendererReturn {
+  /**
+   * Listens to channel, when a new message arrives listener would be called with listener(event, args...).
+   * [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
+   */
+  on: (channel: string, listener: IpcRendererListener) => IpcRenderer
+  /**
+   * Adds a one time listener function for the event. This listener is invoked only the next time a message is sent to channel, after which it is removed.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereroncechannel-listener
+   */
+  once: (
+    channel: string,
+    listener: (event: IpcRendererEvent, ...args: any[]) => void,
+  ) => IpcRenderer
+  /**
+   * Removes the specified listener from the listener array for the specified channel.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener
+   */
+  removeListener: (
+    channel: string,
+    listener: (...args: any[]) => void,
+  ) => IpcRenderer
+  /**
+   * Removes all listeners, or those of the specified channel.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovealllistenerschannel
+   */
+  removeAllListeners: (channel: string) => IpcRenderer
+  /**
+   * Send an asynchronous message to the main process via channel, along with arguments.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendchannel-args
+   */
+  send: (channel: string, ...args: any[]) => void
+  /**
+   * Returns Promise<any> - Resolves with the response from the main process.
+   * Send a message to the main process via channel and expect a result ~~asynchronously~~.
+   * As composition-api, it makes asynchronous operations look like synchronous.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
+   */
+  invoke: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
+  /**
+   * Returns any - The value sent back by the ipcMain handler.
+   * Send a message to the main process via channel and expect a result synchronously.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendsyncchannel-args
+   */
+  sendSync: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
+  /**
+   * Send a message to the main process, optionally transferring ownership of zero or more MessagePort objects.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererpostmessagechannel-message-transfer
+   */
+  postMessage: (channel: string, message: any, transfer?: MessagePort[]) => void
+  /**
+   * Sends a message to a window with webContentsId via channel.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtowebcontentsid-channel-args
+   */
+  sendTo: (webContentsId: number, channel: string, ...args: any[]) => void
+  /**
+   * Like ipcRenderer.send but the event will be sent to the <webview> element in the host page instead of the main process.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
+   */
+  sendToHost: (channel: string, ...args: any[]) => void
+}
+/**
+ * Get the `ipcRenderer` module with all APIs.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
+ * @see https://vueuse.org/useIpcRenderer
+ */
+export declare function useIpcRenderer(
+  ipcRenderer?: IpcRenderer,
+): UseIpcRendererReturn
+```

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

@@ -0,0 +1,58 @@
+---
+category: '@Electron'
+---
+
+# useIpcRendererInvoke
+
+Reactive [ipcRenderer.invoke API](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args) result. Make asynchronous operations look synchronous.
+
+## Usage
+
+```ts
+import { useIpcRendererInvoke } from '@vueuse/electron'
+import { computed } from 'vue'
+
+// enable nodeIntegration if you don't provide ipcRenderer explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+// Ref result will return
+const result = useIpcRendererInvoke<string>('custom-channel', 'some data')
+const msg = computed(() => result.value?.msg)
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Returns Promise<any> - Resolves with the response from the main process.
+ *
+ * Send a message to the main process via channel and expect a result ~~asynchronously~~. As composition-api, it makes asynchronous operations look like synchronous.
+ *
+ * You need to provide `ipcRenderer` to this function.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
+ * @see https://vueuse.org/useIpcRendererInvoke
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useIpcRendererInvoke<T>(
+  ipcRenderer: IpcRenderer,
+  channel: string,
+  ...args: any[]
+): ShallowRef<T | null>
+/**
+ * Returns Promise<any> - Resolves with the response from the main process.
+ *
+ * Send a message to the main process via channel and expect a result ~~asynchronously~~. As composition-api, it makes asynchronous operations look like synchronous.
+ *
+ * `ipcRenderer` will be automatically gotten.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
+ * @see https://vueuse.org/useIpcRendererInvoke
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useIpcRendererInvoke<T>(
+  channel: string,
+  ...args: any[]
+): ShallowRef<T | null>
+```

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

@@ -0,0 +1,52 @@
+---
+category: '@Electron'
+---
+
+# useIpcRendererOn
+
+Use [ipcRenderer.on](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener) with ease and [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+
+## Usage
+
+```ts
+import { useIpcRendererOn } from '@vueuse/electron'
+
+// enable nodeIntegration if you don't provide ipcRenderer explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+// remove listener automatically on unmounted
+useIpcRendererOn('custom-event', (event, ...args) => {
+  console.log(args)
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Listens to channel, when a new message arrives listener would be called with listener(event, args...).
+ * [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+ *
+ * You need to provide `ipcRenderer` to this function.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
+ * @see https://vueuse.org/useIpcRendererOn
+ */
+export declare function useIpcRendererOn(
+  ipcRenderer: IpcRenderer,
+  channel: string,
+  listener: IpcRendererListener,
+): IpcRenderer
+/**
+ * Listens to channel, when a new message arrives listener would be called with listener(event, args...).
+ * [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+ *
+ * `ipcRenderer` will be automatically gotten.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
+ * @see https://vueuse.org/useIpcRendererOn
+ */
+export declare function useIpcRendererOn(
+  channel: string,
+  listener: IpcRendererListener,
+): IpcRenderer
+```

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

@@ -0,0 +1,57 @@
+---
+category: '@Integrations'
+---
+
+# useJwt
+
+Wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode).
+
+## Install
+
+```bash
+npm install jwt-decode@^4
+```
+
+## Usage
+
+```ts
+import { useJwt } from '@vueuse/integrations/useJwt'
+import { defineComponent } from 'vue'
+
+const encodedJwt = ref('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.L8i6g3PfcHlioHCCPURC9pmXT7gdJpx3kOoyAfNUwCc')
+const { header, payload } = useJwt(encodedJwt)
+```
+
+## Type Declarations
+
+```ts
+export interface UseJwtOptions<Fallback> {
+  /**
+   * Value returned when encounter error on decoding
+   *
+   * @default null
+   */
+  fallbackValue?: Fallback
+  /**
+   * Error callback for decoding
+   */
+  onError?: (error: unknown) => void
+}
+export interface UseJwtReturn<Payload, Header, Fallback> {
+  header: ComputedRef<Header | Fallback>
+  payload: ComputedRef<Payload | Fallback>
+}
+/**
+ * Reactive decoded jwt token.
+ *
+ * @see https://vueuse.org/useJwt
+ */
+export declare function useJwt<
+  Payload extends object = JwtPayload,
+  Header extends object = JwtHeader,
+  Fallback = null,
+>(
+  encodedJwt: MaybeRefOrGetter<string>,
+  options?: UseJwtOptions<Fallback>,
+): UseJwtReturn<Payload, Header, Fallback>
+```

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

@@ -0,0 +1,87 @@
+---
+category: Sensors
+---
+
+# useKeyModifier
+
+Reactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState). Tracks state of any of the [supported modifiers](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#browser_compatibility) - see Browser Compatibility notes.
+
+<CourseLink href="https://vueschool.io/lessons/alt-drag-to-clone-tasks?friend=vueuse">Learn useKeyModifier with this FREE video lesson from Vue School!</CourseLink>
+
+## Usage
+
+```ts
+import { useKeyModifier } from '@vueuse/core'
+
+const capsLockState = useKeyModifier('CapsLock')
+
+console.log(capsLockState.value)
+```
+
+## Events
+
+You can customize which events will prompt the state to update. By default, these are `mouseup`, `mousedown`, `keyup`, `keydown`. To customize these events:
+
+```ts
+import { useKeyModifier } from '@vueuse/core'
+
+const capsLockState = useKeyModifier('CapsLock', { events: ['mouseup', 'mousedown'] })
+
+console.log(capsLockState) // null
+
+// Caps Lock turned on with key press
+console.log(capsLockState) // null
+
+// Mouse button clicked
+console.log(capsLockState) // true
+```
+
+## Initial State
+
+By default, the returned ref will be `Ref<null>` until the first event is received. You can explicitly pass the initial state to it via:
+
+```ts
+import { useKeyModifier } from '@vueuse/core'
+// ---cut---
+const capsLockState1 = useKeyModifier('CapsLock') // Ref<boolean | null>
+const capsLockState2 = useKeyModifier('CapsLock', { initial: false }) // Ref<boolean>
+```
+
+## Type Declarations
+
+```ts
+export type KeyModifier =
+  | "Alt"
+  | "AltGraph"
+  | "CapsLock"
+  | "Control"
+  | "Fn"
+  | "FnLock"
+  | "Meta"
+  | "NumLock"
+  | "ScrollLock"
+  | "Shift"
+  | "Symbol"
+  | "SymbolLock"
+export interface UseModifierOptions<Initial> extends ConfigurableDocument {
+  /**
+   * Event names that will prompt update to modifier states
+   *
+   * @default ['mousedown', 'mouseup', 'keydown', 'keyup']
+   */
+  events?: WindowEventName[]
+  /**
+   * Initial value of the returned ref
+   *
+   * @default null
+   */
+  initial?: Initial
+}
+export type UseKeyModifierReturn<Initial> = ShallowRef<
+  Initial extends boolean ? boolean : boolean | null
+>
+export declare function useKeyModifier<Initial extends boolean | null>(
+  modifier: KeyModifier,
+  options?: UseModifierOptions<Initial>,
+): UseKeyModifierReturn<Initial>
+```

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

@@ -0,0 +1,63 @@
+---
+category: State
+---
+
+# useLastChanged
+
+Records the timestamp of the last change
+
+## Usage
+
+```ts
+import { useLastChanged } from '@vueuse/core'
+import { nextTick } from 'vue'
+
+const a = ref(0)
+const lastChanged = useLastChanged(a)
+
+a.value = 1
+
+await nextTick()
+
+console.log(lastChanged.value) // 1704709379457
+```
+
+By default the change is recorded on the next tick (`watch()` with `flush: 'post'`). If you want to record the change immediately, pass `flush: 'sync'` as the second argument.
+
+```ts
+import { useLastChanged } from '@vueuse/core'
+
+const a = ref(0)
+const lastChanged = useLastChanged(a, { flush: 'sync' })
+
+a.value = 1
+
+console.log(lastChanged.value) // 1704709379457
+```
+
+## Type Declarations
+
+```ts
+export interface UseLastChangedOptions<
+  Immediate extends boolean,
+  InitialValue extends number | null | undefined = undefined,
+> extends WatchOptions<Immediate> {
+  initialValue?: InitialValue
+}
+export type UseLastChangedReturn =
+  | Readonly<ShallowRef<number | null>>
+  | Readonly<ShallowRef<number>>
+/**
+ * Records the timestamp of the last change
+ *
+ * @see https://vueuse.org/useLastChanged
+ */
+export declare function useLastChanged(
+  source: WatchSource,
+  options?: UseLastChangedOptions<false>,
+): Readonly<ShallowRef<number | null>>
+export declare function useLastChanged(
+  source: WatchSource,
+  options: UseLastChangedOptions<true> | UseLastChangedOptions<boolean, number>,
+): Readonly<ShallowRef<number>>
+```

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

@@ -0,0 +1,41 @@
+---
+category: State
+---
+
+# useLocalStorage
+
+Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
+## Usage
+
+Please refer to `useStorage`.
+
+## Type Declarations
+
+```ts
+export declare function useLocalStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<string>,
+  options?: UseStorageOptions<string>,
+): RemovableRef<string>
+export declare function useLocalStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<boolean>,
+  options?: UseStorageOptions<boolean>,
+): RemovableRef<boolean>
+export declare function useLocalStorage(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<number>,
+  options?: UseStorageOptions<number>,
+): RemovableRef<number>
+export declare function useLocalStorage<T>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<T>,
+  options?: UseStorageOptions<T>,
+): RemovableRef<T>
+export declare function useLocalStorage<T = unknown>(
+  key: MaybeRefOrGetter<string>,
+  initialValue: MaybeRefOrGetter<null>,
+  options?: UseStorageOptions<T>,
+): RemovableRef<T>
+```