teamplay 0.4.0-alpha.4 → 0.4.0-alpha.41
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 +12 -0
- package/index.d.ts +2 -0
- package/index.js +1 -0
- package/orm/Compat/README.md +175 -23
- package/orm/Compat/SignalCompat.js +187 -27
- package/orm/Compat/hooksCompat.js +182 -20
- package/orm/Compat/modelEvents.js +2 -4
- package/orm/Compat/refFallback.js +60 -0
- package/orm/Compat/startStopCompat.js +107 -0
- package/orm/Doc.js +155 -25
- package/orm/Query.js +112 -12
- package/orm/Reaction.js +2 -1
- package/orm/Signal.js +2 -5
- package/orm/SignalBase.js +61 -3
- package/orm/associations.js +99 -0
- package/orm/batchScheduler.js +62 -0
- package/orm/compatEnv.js +4 -0
- package/orm/dataTree.js +6 -1
- package/orm/getSignal.js +32 -3
- package/orm/index.d.ts +6 -0
- package/orm/index.js +5 -0
- package/orm/subscriptionGcDelay.js +32 -0
- package/package.json +9 -8
- package/react/convertToObserver.js +2 -1
- package/react/promiseBatcher.js +120 -0
- package/react/trapRender.js +11 -4
- package/react/useSub.js +16 -2
- package/react/wrapIntoSuspense.js +1 -1
- package/utils/setDiffDeep.js +32 -12
- package/orm/Compat/REF.md +0 -315
package/README.md
CHANGED
|
@@ -19,6 +19,18 @@ Features:
|
|
|
19
19
|
|
|
20
20
|
For installation and documentation see [teamplay.dev](https://teamplay.dev)
|
|
21
21
|
|
|
22
|
+
## ORM Compat Helpers
|
|
23
|
+
|
|
24
|
+
For legacy Racer-style model mixins (for example versioning libraries which call
|
|
25
|
+
`getAssociations()`), use ORM compat helpers from the `teamplay/orm` subpath:
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import BaseModel, { hasMany, hasOne, belongsTo } from 'teamplay/orm'
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
These helpers attach class-level associations and expose them through
|
|
32
|
+
`$doc.getAssociations()` on model signals.
|
|
33
|
+
|
|
22
34
|
## License
|
|
23
35
|
|
|
24
36
|
MIT
|
package/index.d.ts
CHANGED
|
@@ -94,6 +94,8 @@ export function useDidUpdate (fn: () => EffectCleanup, deps?: any[]): void
|
|
|
94
94
|
export function useOnce (condition: any, fn: () => EffectCleanup): void
|
|
95
95
|
export function useSyncEffect (fn: () => EffectCleanup, deps?: any[]): void
|
|
96
96
|
export { connection, setConnection, getConnection, fetchOnly, setFetchOnly, publicOnly, setPublicOnly } from './orm/connection.js'
|
|
97
|
+
export function getSubscriptionGcDelay (): number
|
|
98
|
+
export function setSubscriptionGcDelay (ms?: number | null): number
|
|
97
99
|
export { useId, useNow, useScheduleUpdate, useTriggerUpdate } from './react/helpers.js'
|
|
98
100
|
export { GUID_PATTERN, hasMany, hasOne, hasManyFlags, belongsTo, pickFormFields } from '@teamplay/schema'
|
|
99
101
|
export { aggregation, aggregationHeader as __aggregationHeader } from '@teamplay/utils/aggregation'
|
package/index.js
CHANGED
|
@@ -66,6 +66,7 @@ export {
|
|
|
66
66
|
useSyncEffect
|
|
67
67
|
} from './react/helpers.js'
|
|
68
68
|
export { connection, setConnection, getConnection, fetchOnly, setFetchOnly, publicOnly, setPublicOnly } from './orm/connection.js'
|
|
69
|
+
export { getSubscriptionGcDelay, setSubscriptionGcDelay } from './orm/subscriptionGcDelay.js'
|
|
69
70
|
export { useId, useNow, useScheduleUpdate, useTriggerUpdate } from './react/helpers.js'
|
|
70
71
|
export { GUID_PATTERN, hasMany, hasOne, hasManyFlags, belongsTo, pickFormFields } from '@teamplay/schema'
|
|
71
72
|
export { aggregation, aggregationHeader as __aggregationHeader } from '@teamplay/utils/aggregation'
|
package/orm/Compat/README.md
CHANGED
|
@@ -94,9 +94,11 @@ $.users.user1.name.parent(2) // $.users
|
|
|
94
94
|
Legacy path navigation. Accepts:
|
|
95
95
|
- string with dot path (`'a.b.c'`)
|
|
96
96
|
- integer index for arrays (`0`)
|
|
97
|
+
- multiple path segments (`'a', 'b', 0`)
|
|
97
98
|
|
|
98
99
|
```js
|
|
99
100
|
$.users.user1.at('profile.name')
|
|
101
|
+
$.users.user1.at('profile', 'name')
|
|
100
102
|
$.items.at(0)
|
|
101
103
|
```
|
|
102
104
|
|
|
@@ -106,6 +108,7 @@ Resolve a path from root, ignoring the current signal path.
|
|
|
106
108
|
|
|
107
109
|
```js
|
|
108
110
|
$.users.user1.scope('users.user2')
|
|
111
|
+
$.users.user1.scope('users', 'user2')
|
|
109
112
|
```
|
|
110
113
|
|
|
111
114
|
### ref(target) / ref(subpath, target)
|
|
@@ -113,6 +116,8 @@ $.users.user1.scope('users.user2')
|
|
|
113
116
|
Creates a lightweight alias between signals (minimal Racer-style ref).
|
|
114
117
|
Mutations on the alias are forwarded to the target. The alias mirrors target updates.
|
|
115
118
|
Reads (`get`/`peek`) are forwarded to the target while the ref is active.
|
|
119
|
+
Ref mirroring is scheduled through Teamplay runtime scheduler, so updates remain batch-friendly
|
|
120
|
+
and do not leak intermediate ref states during a single batched cycle.
|
|
116
121
|
|
|
117
122
|
```js
|
|
118
123
|
const $local = $.local.value
|
|
@@ -171,6 +176,49 @@ $alias.get() === $user.get() // false
|
|
|
171
176
|
- No event emissions specific to refs.
|
|
172
177
|
- No support for racer-style ref meta/options beyond the basic signature.
|
|
173
178
|
|
|
179
|
+
### start(targetPath, ...deps, getter)
|
|
180
|
+
|
|
181
|
+
Legacy computed binding API from Racer/StartupJS.
|
|
182
|
+
Creates a reactive computation and writes its result into `targetPath`.
|
|
183
|
+
Source of truth is root API (`$root.start(...)`), but non-root calls are supported as sugar:
|
|
184
|
+
- `$scope.start('a.b', ...deps, getter)` → `$root.start('<scopePath>.a.b', ...deps, getter)`
|
|
185
|
+
|
|
186
|
+
- `targetPath`: string path where computed value is written.
|
|
187
|
+
- `deps`: dependencies used by `getter`.
|
|
188
|
+
- `getter`: function called as `getter(...resolvedDeps)`.
|
|
189
|
+
|
|
190
|
+
Dependency resolution:
|
|
191
|
+
- Signal-like dep (`$doc`, `$session.user`) → `dep.get()`.
|
|
192
|
+
- String dep (`'settings.theme'`) → `$root.get(dep)`.
|
|
193
|
+
- Any other dep → passed as-is.
|
|
194
|
+
|
|
195
|
+
```js
|
|
196
|
+
$root.start('_virtual.lesson', $.lessons[lessonId], '_session.userId', (lesson, userId) => {
|
|
197
|
+
if (!lesson) return undefined
|
|
198
|
+
return { stageIds: lesson.stageIds, userId }
|
|
199
|
+
})
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
Behavior:
|
|
203
|
+
- Calling `start()` again for the same `targetPath` replaces previous reaction.
|
|
204
|
+
- `undefined` result applies compat delete semantics at target path.
|
|
205
|
+
- `null` result is stored as `null`.
|
|
206
|
+
- Returns target signal.
|
|
207
|
+
- If any dependency temporarily suspends (throws a Promise/thenable), compat skips the whole tick (getter is not called and target is not written).
|
|
208
|
+
- If `getter` throws a Promise, compat skips that tick and retries on next reactive update.
|
|
209
|
+
|
|
210
|
+
### stop(targetPath)
|
|
211
|
+
|
|
212
|
+
Stops a computation created with `start(targetPath, ...)`.
|
|
213
|
+
No-op if there is no active computation for the path.
|
|
214
|
+
Source of truth is root API (`$root.stop(...)`), but non-root calls are supported as sugar:
|
|
215
|
+
- `$scope.stop('a.b')` → `$root.stop('<scopePath>.a.b')`
|
|
216
|
+
- `$scope.stop()` → `$root.stop('<scopePath>')`
|
|
217
|
+
|
|
218
|
+
```js
|
|
219
|
+
$root.stop('_virtual.lesson')
|
|
220
|
+
```
|
|
221
|
+
|
|
174
222
|
### query(collection, query, options?)
|
|
175
223
|
|
|
176
224
|
Creates a query signal **without** subscribing. Supports shorthand params:
|
|
@@ -202,6 +250,19 @@ await $.subscribe($user, $$active)
|
|
|
202
250
|
$.unsubscribe($user, $$active)
|
|
203
251
|
```
|
|
204
252
|
|
|
253
|
+
### close(callback?)
|
|
254
|
+
|
|
255
|
+
Compatibility shim for legacy `model.close()` calls.
|
|
256
|
+
|
|
257
|
+
- In Teamplay, `$`/`model` is a global root signal (not a per-request Racer model instance).
|
|
258
|
+
- Therefore `close()` is intentionally a no-op.
|
|
259
|
+
- Optional callback is supported and called immediately.
|
|
260
|
+
|
|
261
|
+
```js
|
|
262
|
+
model.close()
|
|
263
|
+
model.close(() => console.log('closed'))
|
|
264
|
+
```
|
|
265
|
+
|
|
205
266
|
### fetch(...signals) / unfetch(...signals)
|
|
206
267
|
|
|
207
268
|
Fetch-only variants of `subscribe` / `unsubscribe`. They load data once without a live subscription.
|
|
@@ -236,6 +297,7 @@ Returns the current value and tracks reactivity.
|
|
|
236
297
|
const name = $.users.user1.name.get()
|
|
237
298
|
$root.get('$render.url')
|
|
238
299
|
$user.get('profile.name')
|
|
300
|
+
$user.get('profile', 'name')
|
|
239
301
|
```
|
|
240
302
|
|
|
241
303
|
### peek(subpath?)
|
|
@@ -245,6 +307,7 @@ Returns the current value **without** tracking reactivity.
|
|
|
245
307
|
```js
|
|
246
308
|
const name = $.users.user1.name.peek()
|
|
247
309
|
$user.peek('profile.name')
|
|
310
|
+
$user.peek('profile', 'name')
|
|
248
311
|
```
|
|
249
312
|
|
|
250
313
|
### getCopy(subpath)
|
|
@@ -306,6 +369,44 @@ for (const $doc of $query) {
|
|
|
306
369
|
}
|
|
307
370
|
```
|
|
308
371
|
|
|
372
|
+
### Mutator Semantics (Core vs Compat)
|
|
373
|
+
|
|
374
|
+
Compatibility mode intentionally aligns mutators with Racer. This differs from core `Signal` behavior.
|
|
375
|
+
|
|
376
|
+
| API | Core (`Signal`) | Compat (`SignalCompat`) |
|
|
377
|
+
| --- | --- | --- |
|
|
378
|
+
| `set` | Uses deep-diff path (`dataTree.set` + internal `setDiffDeep`). | Path-targeted replace semantics, Racer-like. `undefined` keeps delete semantics. |
|
|
379
|
+
| `setEach` | Not a special API in core mutators. | Per-key compat `set` (not `assign` merge/delete behavior). |
|
|
380
|
+
| `setDiffDeep` | Deep-diff engine (`utils/setDiffDeep.js`). | Recursive Racer-like diff implemented via compat mutators (`set` / `del`) on nested paths. |
|
|
381
|
+
| `setDiff` | N/A as compat shim. | Alias to compat `set` for both signatures: `setDiff(value)` and `setDiff(path, value)`. |
|
|
382
|
+
|
|
383
|
+
Migration note: compat behavior is intentionally Racer-aligned and may differ from core mutators.
|
|
384
|
+
Composite compat mutators (`setEach`, `setDiffDeep`) apply updates atomically for Teamplay-scheduled observers via the runtime batch scheduler.
|
|
385
|
+
|
|
386
|
+
### Subscription GC Delay (Compat)
|
|
387
|
+
|
|
388
|
+
To reduce UI blink on rapid `unsub -> sub` cycles, compat uses an unload grace period for docs/queries.
|
|
389
|
+
|
|
390
|
+
- Default in compat: `300ms`
|
|
391
|
+
- Default in non-compat: `0ms` (immediate cleanup)
|
|
392
|
+
|
|
393
|
+
You can tune it globally:
|
|
394
|
+
|
|
395
|
+
```js
|
|
396
|
+
import { getSubscriptionGcDelay, setSubscriptionGcDelay } from 'teamplay'
|
|
397
|
+
|
|
398
|
+
setSubscriptionGcDelay(500)
|
|
399
|
+
console.log(getSubscriptionGcDelay()) // 500
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
When refCount drops to `0`, unsubscribe/destroy is scheduled after this delay.
|
|
403
|
+
If a new subscribe arrives before timeout, pending destroy is cancelled and the same doc/query instance is reused.
|
|
404
|
+
|
|
405
|
+
Compat queries also retain lifecycle ownership of docs they materialize into DataTree.
|
|
406
|
+
This means a doc that arrived through `useQuery` / `useBatchQuery` will stay available
|
|
407
|
+
for immediate `useLocal` / `useModel` reads while that query remains subscribed, even if
|
|
408
|
+
some unrelated `useDoc` subscriber for the same `collection.id` unmounts.
|
|
409
|
+
|
|
309
410
|
### set(value) and set(path, value)
|
|
310
411
|
|
|
311
412
|
`SignalCompat` accepts both:
|
|
@@ -315,7 +416,14 @@ $.users.user1.name.set('Alice')
|
|
|
315
416
|
$.users.user1.set('profile.name', 'Alice')
|
|
316
417
|
```
|
|
317
418
|
|
|
318
|
-
In compat mode, `set` replaces
|
|
419
|
+
In compat mode, `set` replaces the value at the target path.
|
|
420
|
+
- `set(path, null)` stores `null`.
|
|
421
|
+
- `set(path, undefined)` applies current delete semantics.
|
|
422
|
+
|
|
423
|
+
```js
|
|
424
|
+
await $.users.user1.set('profile', { name: 'Ann', role: 'student' })
|
|
425
|
+
await $.users.user1.set('profile', { name: 'Kate' }) // role is removed
|
|
426
|
+
```
|
|
319
427
|
|
|
320
428
|
### setNull(path?, value)
|
|
321
429
|
|
|
@@ -327,26 +435,47 @@ $.config.setNull('theme', 'light')
|
|
|
327
435
|
|
|
328
436
|
### setDiffDeep(path?, value)
|
|
329
437
|
|
|
330
|
-
Applies a
|
|
438
|
+
Applies a recursive Racer-like diff using compat mutators (`set` / `del`) on subpaths.
|
|
439
|
+
This is intentionally a compat implementation detail and differs from core deep-diff internals.
|
|
331
440
|
|
|
332
441
|
```js
|
|
333
|
-
$.users.user1.
|
|
442
|
+
await $.users.user1.set({ profile: { name: 'Ann', role: 'student' } })
|
|
443
|
+
await $.users.user1.setDiffDeep({ profile: { name: 'Kate' } }) // deep-diff path
|
|
334
444
|
```
|
|
335
445
|
|
|
336
446
|
### setDiff(path?, value)
|
|
337
447
|
|
|
338
|
-
Alias for `set
|
|
448
|
+
Alias for compat `set` in both forms:
|
|
449
|
+
- `setDiff(value)` -> same as `set(value)`
|
|
450
|
+
- `setDiff(path, value)` -> same as `set(path, value)`
|
|
339
451
|
|
|
340
452
|
```js
|
|
341
|
-
$.users.user1.setDiff({ profile: { name: '
|
|
453
|
+
await $.users.user1.setDiff({ profile: { name: 'Kate' } })
|
|
454
|
+
await $.users.user1.setDiff('profile', { name: 'Bob' })
|
|
342
455
|
```
|
|
343
456
|
|
|
344
457
|
### setEach(path?, object)
|
|
345
458
|
|
|
346
|
-
|
|
459
|
+
Racer-like per-key set. `setEach` iterates keys and applies compat `set` for each key.
|
|
460
|
+
- `setEach({ k: null })` stores `null`.
|
|
461
|
+
- `setEach({ k: undefined })` applies current delete semantics.
|
|
347
462
|
|
|
348
463
|
```js
|
|
349
|
-
$.users.user1.setEach({ name: 'Bob', age:
|
|
464
|
+
await $.users.user1.setEach({ name: 'Bob', age: null })
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
### Null / Undefined Matrix (Compat)
|
|
468
|
+
|
|
469
|
+
| Call | Result |
|
|
470
|
+
| --- | --- |
|
|
471
|
+
| `set(path, null)` | stores `null` at `path` |
|
|
472
|
+
| `set(path, undefined)` | applies delete semantics at `path` |
|
|
473
|
+
| `setEach({ k: null })` | stores `null` for `k` |
|
|
474
|
+
| `setEach({ k: undefined })` | applies delete semantics for `k` |
|
|
475
|
+
|
|
476
|
+
```js
|
|
477
|
+
await $.users.user1.set('status', null) // status === null
|
|
478
|
+
await $.users.user1.setEach({ status: undefined }) // status deleted
|
|
350
479
|
```
|
|
351
480
|
|
|
352
481
|
### assign(object)
|
|
@@ -478,8 +607,12 @@ They are designed to behave close to StartupJS hooks, but adapted to Teamplay’
|
|
|
478
607
|
General notes:
|
|
479
608
|
- Hooks should be used inside `observer()` components to get reactive updates.
|
|
480
609
|
- Sync hooks (`useDoc`, `useQuery`) use Suspense by default (via `useSub`).
|
|
610
|
+
- In compatibility mode, sync hooks are strict (`defer: false`) to match racer-like
|
|
611
|
+
semantics and avoid transient `undefined` / empty snapshots during fast navigation.
|
|
612
|
+
This is enforced by compat hooks (user `defer` option is ignored for sync hooks).
|
|
481
613
|
- Async hooks (`useAsyncDoc`, `useAsyncQuery`) never throw; they return `undefined` until ready.
|
|
482
|
-
- Batch hooks
|
|
614
|
+
- Batch hooks use a Suspense batch barrier (`useBatch`) and wait for both
|
|
615
|
+
subscribe promises and DataTree materialization readiness.
|
|
483
616
|
|
|
484
617
|
### Events
|
|
485
618
|
|
|
@@ -652,10 +785,12 @@ if (!user) return 'Loading...'
|
|
|
652
785
|
|
|
653
786
|
Returns `undefined` until subscription resolves.
|
|
654
787
|
|
|
655
|
-
#### Batch
|
|
788
|
+
#### Batch variants
|
|
656
789
|
|
|
657
|
-
`useBatchDoc` / `useBatchDoc$`
|
|
658
|
-
|
|
790
|
+
`useBatchDoc` / `useBatchDoc$` participate in batch Suspense flow:
|
|
791
|
+
- they register subscribe promises for `useBatch()`;
|
|
792
|
+
- they also register a **materialization readiness check**:
|
|
793
|
+
doc is considered ready only when it is visible in DataTree (or explicitly missing).
|
|
659
794
|
|
|
660
795
|
### Query Hooks
|
|
661
796
|
|
|
@@ -672,10 +807,12 @@ This matches StartupJS and makes updates easy:
|
|
|
672
807
|
$users[userId].name.set('New Name')
|
|
673
808
|
```
|
|
674
809
|
|
|
675
|
-
`useQuery$` returns the
|
|
810
|
+
`useQuery$` returns the **query signal**:
|
|
676
811
|
|
|
677
812
|
```js
|
|
678
|
-
const $
|
|
813
|
+
const $query = useQuery$('users', { active: true })
|
|
814
|
+
const ids = $query.getIds()
|
|
815
|
+
const docs = $query.get()
|
|
679
816
|
```
|
|
680
817
|
|
|
681
818
|
If `query == null`, a warning is logged and `{ _id: '__NON_EXISTENT__' }` is used.
|
|
@@ -690,9 +827,18 @@ if (!users) return 'Loading...'
|
|
|
690
827
|
|
|
691
828
|
Async variant: no Suspense, returns `undefined` until ready.
|
|
692
829
|
|
|
693
|
-
#### Batch
|
|
830
|
+
#### Batch variants
|
|
694
831
|
|
|
695
|
-
`useBatchQuery` / `useBatchQuery$`
|
|
832
|
+
`useBatchQuery` / `useBatchQuery$` participate in batch Suspense flow:
|
|
833
|
+
- they register subscribe promises for `useBatch()`;
|
|
834
|
+
- they register a **query readiness check**:
|
|
835
|
+
query ids must be materialized in DataTree, and each `collection.id` from ids must
|
|
836
|
+
be visible in DataTree (or explicitly missing).
|
|
837
|
+
- for `$aggregate` queries, readiness is query-level:
|
|
838
|
+
DataTree must have `$queries.<hash>.docs` (array, including empty), or `extra`.
|
|
839
|
+
Aggregate rows are not required to exist as `collection.<id>` docs.
|
|
840
|
+
Presence of `$queries.<hash>.ids` alone does not mark aggregate readiness.
|
|
841
|
+
For Teamplay aggregation subscriptions, `$aggregations.<hash>` also marks readiness.
|
|
696
842
|
|
|
697
843
|
### Query Helpers
|
|
698
844
|
|
|
@@ -706,7 +852,7 @@ const [users] = useQueryIds('users', ['b', 'a'])
|
|
|
706
852
|
Options:
|
|
707
853
|
- `reverse: true` — reverse order of IDs before mapping.
|
|
708
854
|
|
|
709
|
-
`useBatchQueryIds` and `useAsyncQueryIds` are
|
|
855
|
+
`useBatchQueryIds` and `useAsyncQueryIds` are batch/async variants.
|
|
710
856
|
|
|
711
857
|
#### `useQueryDoc`
|
|
712
858
|
|
|
@@ -721,16 +867,20 @@ Implementation details:
|
|
|
721
867
|
- Adds default `$sort: { createdAt: -1 }` if `$sort` is missing
|
|
722
868
|
|
|
723
869
|
`useQueryDoc$` returns only the doc signal (or `undefined`).
|
|
724
|
-
`useBatchQueryDoc` / `useAsyncQueryDoc` are
|
|
870
|
+
`useBatchQueryDoc` / `useAsyncQueryDoc` are batch/async variants.
|
|
725
871
|
|
|
726
|
-
###
|
|
872
|
+
### Batch Barrier
|
|
727
873
|
|
|
728
|
-
`useBatch()` is a
|
|
729
|
-
All batch hooks are **aliases** to their non-batch versions.
|
|
874
|
+
`useBatch()` is a Suspense barrier for batch hooks.
|
|
730
875
|
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
876
|
+
It throws while:
|
|
877
|
+
- batch subscribe promises are pending;
|
|
878
|
+
- or subscribe promises are resolved but requested docs/queries are not yet
|
|
879
|
+
materialized in DataTree.
|
|
880
|
+
|
|
881
|
+
After `useBatch()` stops throwing in compat mode, immediate reads via
|
|
882
|
+
`useLocal(...).get(...)` for already requested batch entities should not produce
|
|
883
|
+
transient `undefined` caused by materialization races.
|
|
734
884
|
|
|
735
885
|
## Examples
|
|
736
886
|
|
|
@@ -758,6 +908,8 @@ const Component = observer(() => {
|
|
|
758
908
|
```js
|
|
759
909
|
const Component = observer(() => {
|
|
760
910
|
const [users, $users] = useQuery('users', { active: true })
|
|
911
|
+
const $query = useQuery$('users', { active: true })
|
|
912
|
+
const ids = $query.getIds()
|
|
761
913
|
return (
|
|
762
914
|
<>
|
|
763
915
|
{users.map(u => <div key={u._id}>{u.name}</div>)}
|