mosaicstack/stack
25
0
Fork 1
Code Issues 344 Pull Requests 13 Actions Packages Projects Releases 15 Wiki Activity

format: apply repo prettier (3.8.1) to the folded skills tree

Browse Source 
963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.
This commit is contained in:
fargo
2026-08-19 14:37:17 -05:00
parent d2eeb64433
commit 1a822493ba
962 changed files with 29594 additions and 27188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/mosaic/framework/skills/vueuse-functions/references/useExtractedObservable.md
+51 -70
View File
@@ -17,14 +17,17 @@ of [`watch`](https://vuejs.org/guide/essentials/watchers.html#basic-example).
<!-- TODO: import rxjs error if enable twoslash -->
```ts no-twoslash
import { useExtractedObservable } from '@vueuse/rxjs'
import ObservableSocket from 'observable-socket'
import { computed } from 'vue'
import { makeSocket, useUser } from '../some/lib/func'
import { useExtractedObservable } from '@vueuse/rxjs';
import ObservableSocket from 'observable-socket';
import { computed } from 'vue';
import { makeSocket, useUser } from '../some/lib/func';
// setup()
const user = useUser()
const lastMessage = useExtractedObservable(user, u => ObservableSocket.create(makeSocket(u.id)).down)
const user = useUser();
const lastMessage = useExtractedObservable(
user,
(u) => ObservableSocket.create(makeSocket(u.id)).down,
);
```
If you want to add custom error handling to an `Observable` that might error, you can supply an optional `onError`
@@ -32,13 +35,13 @@ configuration. Without this, RxJS will treat any error in the supplied `Observab
be thrown in a new call stack and reported to `window.onerror` (or `process.on('error')` if you happen to be in Node).
```ts no-twoslash
import { useExtractedObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { mapTo, scan, startWith, tap } from 'rxjs/operators'
import { shallowRef } from 'vue'
import { useExtractedObservable } from '@vueuse/rxjs';
import { interval } from 'rxjs';
import { mapTo, scan, startWith, tap } from 'rxjs/operators';
import { shallowRef } from 'vue';
// setup()
const start = shallowRef(0)
const start = shallowRef(0);
const count = useExtractedObservable(
start,
@@ -48,30 +51,29 @@ const count = useExtractedObservable(
startWith(start),
scan((total, next) => next + total),
tap((n) => {
if (n === 10)
throw new Error('oops')
})
)
if (n === 10) throw new Error('oops');
}),
);
},
{
onError: (err) => {
console.log(err.message) // "oops"
console.log(err.message); // "oops"
},
}
)
},
);
```
You can also supply an optional `onComplete` configuration if you need to attach special behavior when the watched
observable completes.
```ts no-twoslash
import { useExtractedObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators'
import { shallowRef } from 'vue'
import { useExtractedObservable } from '@vueuse/rxjs';
import { interval } from 'rxjs';
import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators';
import { shallowRef } from 'vue';
// setup()
const start = shallowRef(0)
const start = shallowRef(0);
const count = useExtractedObservable(
start,
@@ -80,27 +82,27 @@ const count = useExtractedObservable(
mapTo(1),
startWith(start),
scan((total, next) => next + total),
takeWhile(num => num < 10)
)
takeWhile((num) => num < 10),
);
},
{
onComplete: () => {
console.log('Done!')
console.log('Done!');
},
}
)
},
);
```
If you want, you can also pass `watch` options as the last argument:
```ts no-twoslash
import { useExtractedObservable } from '@vueuse/rxjs'
import { interval } from 'rxjs'
import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators'
import { shallowRef } from 'vue'
import { useExtractedObservable } from '@vueuse/rxjs';
import { interval } from 'rxjs';
import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators';
import { shallowRef } from 'vue';
// setup()
const start = shallowRef<number>()
const start = shallowRef<number>();
const count = useExtractedObservable(
start,
@@ -109,22 +111,21 @@ const count = useExtractedObservable(
mapTo(1),
startWith(start),
scan((total, next) => next + total),
takeWhile(num => num < 10)
)
takeWhile((num) => num < 10),
);
},
{},
{
immediate: false
}
)
immediate: false,
},
);
```
## Type Declarations
```ts
export interface UseExtractedObservableOptions<E>
extends UseObservableOptions<E> {
onComplete?: () => void
export interface UseExtractedObservableOptions<E> extends UseObservableOptions<E> {
onComplete?: () => void;
}
export declare function useExtractedObservable<
T extends MultiWatchSources,
@@ -132,54 +133,34 @@ export declare function useExtractedObservable<
Immediate extends Readonly<boolean> = false,
>(
sources: [...T],
extractor: WatchExtractedObservableCallback<
MapSources<T>,
MapOldSources<T, Immediate>,
E
>,
extractor: WatchExtractedObservableCallback<MapSources<T>, MapOldSources<T, Immediate>, E>,
options?: UseExtractedObservableOptions<E>,
watchOptions?: WatchOptions<Immediate>,
): Readonly<ShallowRef<E>>
): Readonly<ShallowRef<E>>;
export declare function useExtractedObservable<
T extends Readonly<MultiWatchSources>,
E,
Immediate extends Readonly<boolean> = false,
>(
sources: T,
extractor: WatchExtractedObservableCallback<
MapSources<T>,
MapOldSources<T, Immediate>,
E
>,
extractor: WatchExtractedObservableCallback<MapSources<T>, MapOldSources<T, Immediate>, E>,
options?: UseExtractedObservableOptions<E>,
watchOptions?: WatchOptions<Immediate>,
): Readonly<ShallowRef<E>>
export declare function useExtractedObservable<
T,
E,
Immediate extends Readonly<boolean> = false,
>(
): Readonly<ShallowRef<E>>;
export declare function useExtractedObservable<T, E, Immediate extends Readonly<boolean> = false>(
sources: WatchSource<T>,
extractor: WatchExtractedObservableCallback<
T,
Immediate extends true ? T | undefined : T,
E
>,
extractor: WatchExtractedObservableCallback<T, Immediate extends true ? T | undefined : T, E>,
options?: UseExtractedObservableOptions<E>,
watchOptions?: WatchOptions<Immediate>,
): Readonly<ShallowRef<E>>
): Readonly<ShallowRef<E>>;
export declare function useExtractedObservable<
T extends object,
E,
Immediate extends Readonly<boolean> = false,
>(
sources: T,
extractor: WatchExtractedObservableCallback<
T,
Immediate extends true ? T | undefined : T,
E
>,
extractor: WatchExtractedObservableCallback<T, Immediate extends true ? T | undefined : T, E>,
options?: UseExtractedObservableOptions<E>,
watchOptions?: WatchOptions<Immediate>,
): Readonly<ShallowRef<E>>
): Readonly<ShallowRef<E>>;
```