Skip to content

Commit 6fab326

Browse files
js2mejs2me
committed
docs: viewModelsConfig,recipes;feat:rename config -> vmConfig
1 parent ba95279 commit 6fab326

13 files changed

+152
-39
lines changed

‎.changeset/hip-peaches-lie.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"mobx-view-model": patch
3+
---
4+
5+
fix `wrapViewsInObserver` option check on already wrapped components

‎.changeset/odd-cats-stick.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"mobx-view-model": patch
3+
---
4+
5+
Add Recipes documentation (How to wrap all view components in observer() HOC)

‎.changeset/silent-doodles-dance.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"mobx-view-model": patch
3+
---
4+
5+
Update documentation for `ViewModelsConfig`. Added more examples

‎.changeset/silver-impalas-shave.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"mobx-view-model": patch
3+
---
4+
5+
rename `config` to `vmConfig` in `ViewModelParams` (add deprecation). This was needed for more identical naming in all places in package

‎docs/.vitepress/config.mts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,12 +186,19 @@ export default defineConfig({
186186
}
187187
],
188188
},
189+
{
190+
text: 'Recipes',
191+
items: [
192+
{ text: 'Wrap in observer() all view components', link: '/recipes/observer-wrap-all-view-components' },
193+
]
194+
},
189195
{
190196
text: 'Other',
191197
link: '/other/project-examples',
192198
items: [
193199
{ text: 'Project examples', link: '/other/project-examples' },
194200
{ text: 'Dependent packages', link: '/other/dependent-packages' },
201+
// { text: 'Vite plugin for better HMR', link: '/other/dependent-packages' },
195202
],
196203
}
197204
],

‎docs/api/view-models/view-models-config.md‎

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
11
# `ViewModelsConfig` configuration object
2-
This object contains all global options for some behaviour of view models instances
2+
This configration contains all options for some behaviour of [`ViewModel`](/api/view-models/overview) instances.
3+
4+
The package provides a **global object** with this configuration, but you can also change it for each [`ViewModel`](/api/view-models/overview) and [`ViewModelStore`](/api/view-model-store/overview) separately using the `vmConfig` field.
5+
6+
```ts
7+
import {
8+
viewModelsConfig,
9+
withViewModel,
10+
ViewModelStoreBase
11+
} from "mobx-view-model";
12+
13+
viewModelsConfig.comparePayload = false;
14+
15+
import { withViewModel } from "mobx-view-model";
16+
17+
viewViewModel(VM, {
18+
vmConfig: {
19+
comparePayload: false
20+
}
21+
})()
22+
23+
new ViewModelStoreBase({
24+
vmConfig: {
25+
comparePayload: false
26+
}
27+
})
28+
```
29+
330

431

532
## `startViewTransitions`
@@ -123,19 +150,28 @@ viewModelsConfig.processViewComponent = (Component) => {
123150
}
124151
}
125152
```
153+
::: tip It works only for [`withViewModel` HOCs](/react/api/with-view-model)
154+
:::
126155

127156
## `wrapViewsInObserver`
128157

129-
Wrap View components into [`observer()` MobX HOC](https://mobx.js.org/api.html#observer)
158+
Wrap View components in [`observer()` MobX HOC](https://mobx.js.org/api.html#observer)
159+
160+
Example:
161+
162+
```tsx
163+
import { viewModelsConfig } from "mobx-view-model";
164+
165+
viewModelsConfig.wrapViewsInObserver = true;
166+
```
130167

131-
::: tip
132-
It works only for [`withViewModel` HOCs](/react/api/with-view-model)
168+
::: tip It works only for [`withViewModel` HOCs](/react/api/with-view-model)
133169
:::
134170

135171
## `observable`
136172

137173
This is huge configuration object for all base implementations `mobx-view-model` entities like `ViewModelBase` or `ViewModelStoreBase`.
138-
You can modify default behaviour of the wrapping into [`makeObservable()` MobX functions](https://mobx.js.org/observable-state.html#makeobservable).
174+
You can modify default behaviour of the wrapping in [`makeObservable()` MobX functions](https://mobx.js.org/observable-state.html#makeobservable).
139175

140176
Properties of the nested observable configs:
141177
### - `disableWrapping`

‎docs/recipes/observer-wrap-all-view-components.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Wrap in `observer()` all view components
2+
3+
If you need to automatically wrap in [`observer()` MobX HOC](https://mobx.js.org/api.html#observer) view components for your ViewModel charged components you can achieve this using:
4+
5+
**1.** [`wrapViewsInObserver`](/api/view-models/view-models-config.html#wrapviewsinobserver) view model config option
6+
7+
Example:
8+
9+
```tsx
10+
import { viewModelsConfig } from "mobx-view-model";
11+
12+
viewModelsConfig.wrapViewsInObserver = true;
13+
```
14+
15+
16+
**2.** [`processViewComponent`](/api/view-models/view-models-config.html#processviewcomponent) view model config option
17+
18+
Example:
19+
20+
```tsx
21+
import { viewModelsConfig } from "mobx-view-model";
22+
23+
viewModelsConfig.processViewComponent = (component) => {
24+
if ((component as any).$$typeof !== Symbol.for('react.memo')) {
25+
return;
26+
}
27+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
28+
// @ts-ignore
29+
return component && observer(component);
30+
};
31+
```

‎src/hoc/with-view-model.test.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -280,13 +280,13 @@ describe('withViewModel', () => {
280280
});
281281

282282
const createTestPayloadChanges = async ({
283-
config,
283+
vmConfig,
284284
wrapViewInObserver,
285285
renderPayloadInView,
286286
expectedCounterInPayload,
287287
expectedRerendersCountInVMComponentView,
288288
}: {
289-
config?: ViewModelsRawConfig;
289+
vmConfig?: ViewModelsRawConfig;
290290
wrapViewInObserver?: boolean;
291291
renderPayloadInView?: boolean;
292292
expectedCounterInPayload: number;
@@ -320,7 +320,7 @@ describe('withViewModel', () => {
320320

321321
const Component = withViewModel(VM, {
322322
generateId: createIdGenerator(),
323-
config,
323+
vmConfig,
324324
})(VMConnectedComponentView);
325325

326326
const SuperContainer = () => {
@@ -401,15 +401,15 @@ describe('withViewModel', () => {
401401

402402
test('View should have actual payload state (comparePayload: strict)', async () => {
403403
await createTestPayloadChanges({
404-
config: { comparePayload: 'strict' },
404+
vmConfig: { comparePayload: 'strict' },
405405
expectedCounterInPayload: 3,
406406
expectedRerendersCountInVMComponentView: 7,
407407
});
408408
});
409409

410410
test('View should have actual payload state (comparePayload: strict + observer view wrap())', async () => {
411411
await createTestPayloadChanges({
412-
config: { comparePayload: 'strict' },
412+
vmConfig: { comparePayload: 'strict' },
413413
expectedCounterInPayload: 3,
414414
expectedRerendersCountInVMComponentView: 1,
415415
wrapViewInObserver: true,
@@ -418,7 +418,7 @@ describe('withViewModel', () => {
418418

419419
test('View should have actual payload state (comparePayload: strict + observer view wrap() + render payload in view)', async () => {
420420
await createTestPayloadChanges({
421-
config: { comparePayload: 'strict' },
421+
vmConfig: { comparePayload: 'strict' },
422422
expectedCounterInPayload: 3,
423423
expectedRerendersCountInVMComponentView: getBasedReactVersion({
424424
18: 4,
@@ -431,15 +431,15 @@ describe('withViewModel', () => {
431431

432432
test('View should have actual payload state (comparePayload: shallow)', async () => {
433433
await createTestPayloadChanges({
434-
config: { comparePayload: 'shallow' },
434+
vmConfig: { comparePayload: 'shallow' },
435435
expectedCounterInPayload: 3,
436436
expectedRerendersCountInVMComponentView: 7,
437437
});
438438
});
439439

440440
test('View should have actual payload state (comparePayload: shallow + observer view wrap())', async () => {
441441
await createTestPayloadChanges({
442-
config: { comparePayload: 'shallow' },
442+
vmConfig: { comparePayload: 'shallow' },
443443
expectedCounterInPayload: 3,
444444
expectedRerendersCountInVMComponentView: 1,
445445
wrapViewInObserver: true,
@@ -448,7 +448,7 @@ describe('withViewModel', () => {
448448

449449
test('View should have actual payload state (comparePayload: shallow + observer view wrap() + render payload in view)', async () => {
450450
await createTestPayloadChanges({
451-
config: { comparePayload: 'shallow' },
451+
vmConfig: { comparePayload: 'shallow' },
452452
expectedCounterInPayload: 3,
453453
expectedRerendersCountInVMComponentView: getBasedReactVersion({
454454
18: 4,
@@ -461,15 +461,15 @@ describe('withViewModel', () => {
461461

462462
test('View should have actual payload state (comparePayload: false)', async () => {
463463
await createTestPayloadChanges({
464-
config: { comparePayload: false },
464+
vmConfig: { comparePayload: false },
465465
expectedCounterInPayload: 3,
466466
expectedRerendersCountInVMComponentView: 7,
467467
});
468468
});
469469

470470
test('View should have actual payload state (comparePayload: false + observer view wrap())', async () => {
471471
await createTestPayloadChanges({
472-
config: { comparePayload: false },
472+
vmConfig: { comparePayload: false },
473473
expectedCounterInPayload: 3,
474474
expectedRerendersCountInVMComponentView: 1,
475475
wrapViewInObserver: true,
@@ -478,7 +478,7 @@ describe('withViewModel', () => {
478478

479479
test('View should have actual payload state (comparePayload: false + observer view wrap() + render payload in view)', async () => {
480480
await createTestPayloadChanges({
481-
config: { comparePayload: false },
481+
vmConfig: { comparePayload: false },
482482
expectedCounterInPayload: 3,
483483
expectedRerendersCountInVMComponentView: getBasedReactVersion({
484484
18: 7,
@@ -491,15 +491,15 @@ describe('withViewModel', () => {
491491

492492
test('View should have actual payload state (comparePayload: comparer.shallow)', async () => {
493493
await createTestPayloadChanges({
494-
config: { comparePayload: comparer.shallow },
494+
vmConfig: { comparePayload: comparer.shallow },
495495
expectedCounterInPayload: 3,
496496
expectedRerendersCountInVMComponentView: 7,
497497
});
498498
});
499499

500500
test('View should have actual payload state (comparePayload: comparer.shallow + observer view wrap())', async () => {
501501
await createTestPayloadChanges({
502-
config: { comparePayload: comparer.shallow },
502+
vmConfig: { comparePayload: comparer.shallow },
503503
expectedCounterInPayload: 3,
504504
expectedRerendersCountInVMComponentView: 1,
505505
wrapViewInObserver: true,
@@ -508,7 +508,7 @@ describe('withViewModel', () => {
508508

509509
test('View should have actual payload state (comparePayload: comparer.shallow + observer view wrap() + render payload in view)', async () => {
510510
await createTestPayloadChanges({
511-
config: { comparePayload: comparer.shallow },
511+
vmConfig: { comparePayload: comparer.shallow },
512512
expectedCounterInPayload: 3,
513513
expectedRerendersCountInVMComponentView: getBasedReactVersion({
514514
18: 4,
@@ -521,15 +521,15 @@ describe('withViewModel', () => {
521521

522522
test('View should have actual payload state (comparePayload: comparer.structural)', async () => {
523523
await createTestPayloadChanges({
524-
config: { comparePayload: comparer.structural },
524+
vmConfig: { comparePayload: comparer.structural },
525525
expectedCounterInPayload: 3,
526526
expectedRerendersCountInVMComponentView: 7,
527527
});
528528
});
529529

530530
test('View should have actual payload state (comparePayload: comparer.structural + observer view wrap())', async () => {
531531
await createTestPayloadChanges({
532-
config: { comparePayload: comparer.structural },
532+
vmConfig: { comparePayload: comparer.structural },
533533
expectedCounterInPayload: 3,
534534
expectedRerendersCountInVMComponentView: 1,
535535
wrapViewInObserver: true,
@@ -538,7 +538,7 @@ describe('withViewModel', () => {
538538

539539
test('View should have actual payload state (comparePayload: comparer.structural + observer view wrap() + render payload in view)', async () => {
540540
await createTestPayloadChanges({
541-
config: { comparePayload: comparer.structural },
541+
vmConfig: { comparePayload: comparer.structural },
542542
expectedCounterInPayload: 3,
543543
expectedRerendersCountInVMComponentView: getBasedReactVersion({
544544
18: 4,
@@ -551,15 +551,15 @@ describe('withViewModel', () => {
551551

552552
test('View should have actual payload state (comparePayload: comparer.identity)', async () => {
553553
await createTestPayloadChanges({
554-
config: { comparePayload: comparer.identity },
554+
vmConfig: { comparePayload: comparer.identity },
555555
expectedCounterInPayload: 3,
556556
expectedRerendersCountInVMComponentView: 7,
557557
});
558558
});
559559

560560
test('View should have actual payload state (comparePayload: comparer.identity + observer view wrap())', async () => {
561561
await createTestPayloadChanges({
562-
config: { comparePayload: comparer.identity },
562+
vmConfig: { comparePayload: comparer.identity },
563563
expectedCounterInPayload: 3,
564564
expectedRerendersCountInVMComponentView: 1,
565565
wrapViewInObserver: true,
@@ -568,7 +568,7 @@ describe('withViewModel', () => {
568568

569569
test('View should have actual payload state (comparePayload: comparer.identity + observer view wrap() + render payload in view)', async () => {
570570
await createTestPayloadChanges({
571-
config: { comparePayload: comparer.identity },
571+
vmConfig: { comparePayload: comparer.identity },
572572
expectedCounterInPayload: 3,
573573
expectedRerendersCountInVMComponentView: getBasedReactVersion({
574574
18: 7,
@@ -581,15 +581,15 @@ describe('withViewModel', () => {
581581

582582
test('View should have actual payload state (comparePayload: comparer.default)', async () => {
583583
await createTestPayloadChanges({
584-
config: { comparePayload: comparer.default },
584+
vmConfig: { comparePayload: comparer.default },
585585
expectedCounterInPayload: 3,
586586
expectedRerendersCountInVMComponentView: 7,
587587
});
588588
});
589589

590590
test('View should have actual payload state (comparePayload: comparer.default + observer view wrap())', async () => {
591591
await createTestPayloadChanges({
592-
config: { comparePayload: comparer.default },
592+
vmConfig: { comparePayload: comparer.default },
593593
expectedCounterInPayload: 3,
594594
expectedRerendersCountInVMComponentView: 1,
595595
wrapViewInObserver: true,
@@ -598,7 +598,7 @@ describe('withViewModel', () => {
598598

599599
test('View should have actual payload state (comparePayload: comparer.default + observer view wrap() + render payload in view)', async () => {
600600
await createTestPayloadChanges({
601-
config: { comparePayload: comparer.default },
601+
vmConfig: { comparePayload: comparer.default },
602602
expectedCounterInPayload: 3,
603603
expectedRerendersCountInVMComponentView: getBasedReactVersion({
604604
18: 7,
@@ -619,7 +619,7 @@ describe('withViewModel', () => {
619619
}
620620

621621
const ChildView = withViewModel(ChildVM, {
622-
config: {
622+
vmConfig: {
623623
comparePayload: 'shallow',
624624
},
625625
})(
@@ -654,7 +654,7 @@ describe('withViewModel', () => {
654654
}
655655

656656
const ParentView = withViewModel(ParentVM, {
657-
config: {
657+
vmConfig: {
658658
comparePayload: 'shallow',
659659
},
660660
})(

‎src/hoc/with-view-model.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,13 +106,16 @@ export function withViewModel(
106106
let Component =
107107
(
108108
config.config?.processViewComponent ??
109+
config.vmConfig?.processViewComponent ??
109110
viewModelsConfig.processViewComponent
110111
)?.(OriginalComponent, VM, config) ?? OriginalComponent;
111112

112113
if (
113114
Component &&
114115
(config.config?.wrapViewsInObserver ??
115-
viewModelsConfig.wrapViewsInObserver)
116+
config.vmConfig?.wrapViewsInObserver ??
117+
viewModelsConfig.wrapViewsInObserver) &&
118+
(Component as any).$$typeof !== Symbol.for('react.memo')
116119
) {
117120
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
118121
// @ts-ignore

0 commit comments

Comments
 (0)