feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
97
skills/vueuse-functions/references/watchTriggerable.md
Normal file
97
skills/vueuse-functions/references/watchTriggerable.md
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
category: Watch
|
||||
---
|
||||
|
||||
# watchTriggerable
|
||||
|
||||
Watch that can be triggered manually
|
||||
|
||||
## Usage
|
||||
|
||||
A `watch` wrapper that supports manual triggering of `WatchCallback`, which returns an additional `trigger` to execute a `WatchCallback` immediately.
|
||||
|
||||
```ts
|
||||
import { watchTriggerable } from '@vueuse/core'
|
||||
import { nextTick, shallowRef } from 'vue'
|
||||
|
||||
const source = shallowRef(0)
|
||||
|
||||
const { trigger, ignoreUpdates } = watchTriggerable(
|
||||
source,
|
||||
v => console.log(`Changed to ${v}!`),
|
||||
)
|
||||
|
||||
source.value = 'bar'
|
||||
await nextTick() // logs: Changed to bar!
|
||||
|
||||
// Execution of WatchCallback via `trigger` does not require waiting
|
||||
trigger() // logs: Changed to bar!
|
||||
```
|
||||
|
||||
### `onCleanup`
|
||||
|
||||
When you want to manually call a `watch` that uses the onCleanup parameter; simply taking the `WatchCallback` out and calling it doesn't make it easy to implement the `onCleanup` parameter.
|
||||
|
||||
Using `watchTriggerable` will solve this problem.
|
||||
|
||||
```ts
|
||||
import { watchTriggerable } from '@vueuse/core'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const source = shallowRef(0)
|
||||
|
||||
const { trigger } = watchTriggerable(
|
||||
source,
|
||||
async (v, _, onCleanup) => {
|
||||
let canceled = false
|
||||
onCleanup(() => canceled = true)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 500))
|
||||
if (canceled)
|
||||
return
|
||||
|
||||
console.log(`The value is "${v}"\n`)
|
||||
},
|
||||
)
|
||||
|
||||
source.value = 1 // no log
|
||||
await trigger() // logs (after 500 ms): The value is "1"
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface WatchTriggerableReturn<FnReturnT = void>
|
||||
extends WatchIgnorableReturn {
|
||||
/** Execute `WatchCallback` immediately */
|
||||
trigger: () => FnReturnT
|
||||
}
|
||||
type OnCleanup = (cleanupFn: () => void) => void
|
||||
export type WatchTriggerableCallback<V = any, OV = any, R = void> = (
|
||||
value: V,
|
||||
oldValue: OV,
|
||||
onCleanup: OnCleanup,
|
||||
) => R
|
||||
export declare function watchTriggerable<
|
||||
T extends Readonly<MultiWatchSources>,
|
||||
FnReturnT,
|
||||
>(
|
||||
sources: [...T],
|
||||
cb: WatchTriggerableCallback<
|
||||
MapSources<T>,
|
||||
MapOldSources<T, true>,
|
||||
FnReturnT
|
||||
>,
|
||||
options?: WatchWithFilterOptions<boolean>,
|
||||
): WatchTriggerableReturn<FnReturnT>
|
||||
export declare function watchTriggerable<T, FnReturnT>(
|
||||
source: WatchSource<T>,
|
||||
cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
|
||||
options?: WatchWithFilterOptions<boolean>,
|
||||
): WatchTriggerableReturn<FnReturnT>
|
||||
export declare function watchTriggerable<T extends object, FnReturnT>(
|
||||
source: T,
|
||||
cb: WatchTriggerableCallback<T, T | undefined, FnReturnT>,
|
||||
options?: WatchWithFilterOptions<boolean>,
|
||||
): WatchTriggerableReturn<FnReturnT>
|
||||
```
|
||||
Reference in New Issue
Block a user