@mmstack/primitives 22.1.0 → 22.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -319,7 +319,7 @@ Composes with `indexArray` to give each mapped item its own effect that's automa
|
|
|
319
319
|
|
|
320
320
|
## Concurrency & transitions
|
|
321
321
|
|
|
322
|
-
Angular
|
|
322
|
+
The Angular signal-native equivalent of React's `<Suspense>`, `useTransition`, `useOptimistic`, or `<Activity>` — nor Vue's `<keep-alive>`. This is that vocabulary, expressed with Angular signals: keep a stale value on screen while the next one loads, hold a whole subtree until its data settles, pause a hidden tab's background work, freeze the display through a multi-resource update and reveal it in one frame. It's mostly built on `linkedSignal` (the one primitive that hands a computation its own previous output), so the value-holding pieces add no `effect()` and no zone churn.
|
|
323
323
|
|
|
324
324
|
The pieces compose, but each stands alone — reach for only what you need. `@mmstack/resource` and `@mmstack/router-core` plug into the same machinery (a resource opts into the nearest scope with its `register` option; `<mm-transition-outlet>` turns navigation into a transition).
|
|
325
325
|
|
|
@@ -391,7 +391,10 @@ A **transition scope** is a per-boundary registry of resources whose async state
|
|
|
391
391
|
|
|
392
392
|
```typescript
|
|
393
393
|
import { Component } from '@angular/core';
|
|
394
|
-
import {
|
|
394
|
+
import {
|
|
395
|
+
UnscopedSuspenseBoundary,
|
|
396
|
+
provideTransitionScope,
|
|
397
|
+
} from '@mmstack/primitives';
|
|
395
398
|
import { queryResource } from '@mmstack/resource';
|
|
396
399
|
|
|
397
400
|
@Component({
|
|
@@ -408,7 +411,7 @@ import { queryResource } from '@mmstack/resource';
|
|
|
408
411
|
export class UserProfile {
|
|
409
412
|
// …so this query registers into it, and the boundary below reads the same scope.
|
|
410
413
|
readonly user = queryResource<User>(() => '/api/users/me', {
|
|
411
|
-
register:
|
|
414
|
+
register: 'suspend',
|
|
412
415
|
});
|
|
413
416
|
}
|
|
414
417
|
```
|
|
@@ -475,12 +478,12 @@ export class UserList {
|
|
|
475
478
|
private readonly startTransition = injectStartTransition();
|
|
476
479
|
protected readonly search = signal('');
|
|
477
480
|
|
|
478
|
-
// `register:
|
|
481
|
+
// `register: 'suspend'` → this query blocks the boundary's first paint.
|
|
479
482
|
// `keepPrevious` holds the rows through every refetch, so a filter change never
|
|
480
483
|
// re-suspends — it just flips the boundary to its [busy] state.
|
|
481
484
|
protected readonly users = queryResource<User[]>(
|
|
482
485
|
() => ({ url: '/api/users', params: { q: this.search() } }),
|
|
483
|
-
{ register:
|
|
486
|
+
{ register: 'suspend', keepPrevious: true },
|
|
484
487
|
);
|
|
485
488
|
|
|
486
489
|
protected filter(q: string) {
|