@view-models/core 2.1.0 → 2.2.0
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 +2 -102
- package/dist/index.d.ts +192 -3
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -0
- package/package.json +11 -2
- package/src/ViewModel.ts +1 -1
- package/src/ViewModelWithDerivedState.ts +4 -5
- package/dist/ViewModel.d.ts +0 -40
- package/dist/ViewModel.d.ts.map +0 -1
- package/dist/ViewModel.js +0 -43
- package/dist/ViewModelWithDerivedState.d.ts +0 -152
- package/dist/ViewModelWithDerivedState.d.ts.map +0 -1
- package/dist/ViewModelWithDerivedState.js +0 -126
- package/dist/index.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -118,7 +118,7 @@ class TodoViewModel extends ViewModelWithDerivedState<
|
|
|
118
118
|
toggleTodo(id: string) {
|
|
119
119
|
this.update(({ items }) => ({
|
|
120
120
|
items: items.map((item) =>
|
|
121
|
-
item.id === id ? { ...item, done: !item.done } : item
|
|
121
|
+
item.id === id ? { ...item, done: !item.done } : item,
|
|
122
122
|
),
|
|
123
123
|
}));
|
|
124
124
|
}
|
|
@@ -160,107 +160,7 @@ function Counter({ model }) {
|
|
|
160
160
|
|
|
161
161
|
## API Reference
|
|
162
162
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
Abstract base class for creating view models.
|
|
166
|
-
|
|
167
|
-
#### Constructor
|
|
168
|
-
|
|
169
|
-
```typescript
|
|
170
|
-
constructor(initialState: T)
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
Initialize the view model with an initial state.
|
|
174
|
-
|
|
175
|
-
#### Methods
|
|
176
|
-
|
|
177
|
-
##### `subscribe(listener: ViewModelListener): () => void`
|
|
178
|
-
|
|
179
|
-
Subscribe to state changes. The listener will be called whenever `update()` is called. Returns a function to unsubscribe.
|
|
180
|
-
|
|
181
|
-
```typescript
|
|
182
|
-
const unsubscribe = viewModel.subscribe(() => {
|
|
183
|
-
console.log("State changed:", viewModel.state);
|
|
184
|
-
});
|
|
185
|
-
|
|
186
|
-
// Later, to unsubscribe:
|
|
187
|
-
unsubscribe();
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
##### `update(updater: Updater<T>): void` (protected)
|
|
191
|
-
|
|
192
|
-
Update the state and notify all subscribers. This method is protected and should only be called from within your view model subclass.
|
|
193
|
-
|
|
194
|
-
```typescript
|
|
195
|
-
protected update(updater: (currentState: T) => T): void
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
The updater function receives the current state and should return the new state.
|
|
199
|
-
|
|
200
|
-
##### `state: T` (getter)
|
|
201
|
-
|
|
202
|
-
Access the current state.
|
|
203
|
-
|
|
204
|
-
```typescript
|
|
205
|
-
const currentState = viewModel.state;
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
### `ViewModelWithDerivedState<S, D>`
|
|
209
|
-
|
|
210
|
-
Abstract base class for creating view models with derived state. Use this when you need computed properties that are automatically recalculated when the internal state changes.
|
|
211
|
-
|
|
212
|
-
#### Constructor
|
|
213
|
-
|
|
214
|
-
```typescript
|
|
215
|
-
constructor(initialState: S)
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
Initialize the view model with an initial internal state. The derived state is automatically computed during construction.
|
|
219
|
-
|
|
220
|
-
#### Methods
|
|
221
|
-
|
|
222
|
-
##### `subscribe(listener: ViewModelListener): () => void`
|
|
223
|
-
|
|
224
|
-
Subscribe to state changes. The listener will be called whenever the derived state changes. Returns a function to unsubscribe.
|
|
225
|
-
|
|
226
|
-
```typescript
|
|
227
|
-
const unsubscribe = viewModel.subscribe(() => {
|
|
228
|
-
console.log("State changed:", viewModel.state);
|
|
229
|
-
});
|
|
230
|
-
|
|
231
|
-
// Later, to unsubscribe:
|
|
232
|
-
unsubscribe();
|
|
233
|
-
```
|
|
234
|
-
|
|
235
|
-
##### `update(updater: Updater<S>): void` (protected)
|
|
236
|
-
|
|
237
|
-
Update the internal state, automatically recompute derived state, and notify all subscribers. This method is protected and should only be called from within your view model subclass.
|
|
238
|
-
|
|
239
|
-
```typescript
|
|
240
|
-
protected update(updater: (currentState: S) => S): void
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
##### `computeDerivedState(state: S): D` (abstract)
|
|
244
|
-
|
|
245
|
-
Abstract method that must be implemented to compute the derived state from the internal state. This is called automatically after each update and during initialization.
|
|
246
|
-
|
|
247
|
-
```typescript
|
|
248
|
-
computeDerivedState({ items }: InternalState): DerivedState {
|
|
249
|
-
return {
|
|
250
|
-
items,
|
|
251
|
-
count: items.length,
|
|
252
|
-
hasItems: items.length > 0,
|
|
253
|
-
};
|
|
254
|
-
}
|
|
255
|
-
```
|
|
256
|
-
|
|
257
|
-
##### `state: D` (getter)
|
|
258
|
-
|
|
259
|
-
Access the current derived state.
|
|
260
|
-
|
|
261
|
-
```typescript
|
|
262
|
-
const currentState = viewModel.state;
|
|
263
|
-
```
|
|
163
|
+
For detailed API documentation, see [docs](./docs).
|
|
264
164
|
|
|
265
165
|
## Patterns and Best Practices
|
|
266
166
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,192 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Function that receives the current state and returns the new state.
|
|
3
|
+
* The updater function should be pure and return a new state object.
|
|
4
|
+
*
|
|
5
|
+
* @template T - The state type
|
|
6
|
+
* @param currentState - The current state
|
|
7
|
+
* @returns The new state
|
|
8
|
+
*/
|
|
9
|
+
type Updater<T> = (currentState: T) => T;
|
|
10
|
+
/**
|
|
11
|
+
* Function that gets called when the state changes.
|
|
12
|
+
*
|
|
13
|
+
* @template T - The state type
|
|
14
|
+
*/
|
|
15
|
+
type ViewModelListener = () => void;
|
|
16
|
+
/**
|
|
17
|
+
* Abstract base class for creating reactive view models with derived state.
|
|
18
|
+
*
|
|
19
|
+
* This class extends the basic ViewModel pattern by allowing you to compute
|
|
20
|
+
* derived state from internal state. The internal state is managed privately,
|
|
21
|
+
* while the derived state (which can include computed properties) is exposed
|
|
22
|
+
* to subscribers.
|
|
23
|
+
*
|
|
24
|
+
* @template S - The internal state type (managed internally)
|
|
25
|
+
* @template D - The derived state type (exposed to subscribers)
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```typescript
|
|
29
|
+
* type TodoState = {
|
|
30
|
+
* items: Array<{ id: string; text: string; done: boolean }>;
|
|
31
|
+
* };
|
|
32
|
+
*
|
|
33
|
+
* type TodoDerivedState = TodoState & {
|
|
34
|
+
* totalCount: number;
|
|
35
|
+
* completedCount: number;
|
|
36
|
+
* remainingCount: number;
|
|
37
|
+
* };
|
|
38
|
+
*
|
|
39
|
+
* class TodoViewModel extends ViewModelWithDerivedState<TodoState, TodoDerivedState> {
|
|
40
|
+
* constructor() {
|
|
41
|
+
* super({ items: [] });
|
|
42
|
+
* }
|
|
43
|
+
*
|
|
44
|
+
* computeDerivedState({ items }: TodoState): TodoDerivedState {
|
|
45
|
+
* return {
|
|
46
|
+
* items,
|
|
47
|
+
* totalCount: items.length,
|
|
48
|
+
* completedCount: items.filter(item => item.done).length,
|
|
49
|
+
* remainingCount: items.filter(item => !item.done).length,
|
|
50
|
+
* };
|
|
51
|
+
* }
|
|
52
|
+
*
|
|
53
|
+
* addTodo(text: string) {
|
|
54
|
+
* this.update(({ items }) => ({
|
|
55
|
+
* items: [...items, { id: crypto.randomUUID(), text, done: false }],
|
|
56
|
+
* }));
|
|
57
|
+
* }
|
|
58
|
+
* }
|
|
59
|
+
*
|
|
60
|
+
* const todos = new TodoViewModel();
|
|
61
|
+
* todos.subscribe(() => {
|
|
62
|
+
* console.log('Completed:', todos.state.completedCount);
|
|
63
|
+
* });
|
|
64
|
+
* todos.addTodo('Learn ViewModels'); // Logs: Completed: 0
|
|
65
|
+
* ```
|
|
66
|
+
*/
|
|
67
|
+
declare abstract class ViewModelWithDerivedState<S, D> {
|
|
68
|
+
private _listeners;
|
|
69
|
+
private _internalState;
|
|
70
|
+
private _state;
|
|
71
|
+
/**
|
|
72
|
+
* Subscribe to state changes.
|
|
73
|
+
*
|
|
74
|
+
* The listener will be called immediately after any state update.
|
|
75
|
+
*
|
|
76
|
+
* @param listener - Function to call when state changes
|
|
77
|
+
* @returns Function to unsubscribe the listener
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```typescript
|
|
81
|
+
* const unsubscribe = viewModel.subscribe((state) => {
|
|
82
|
+
* console.log('State changed:', state);
|
|
83
|
+
* });
|
|
84
|
+
*
|
|
85
|
+
* // Later, when you want to stop listening:
|
|
86
|
+
* unsubscribe();
|
|
87
|
+
* ```
|
|
88
|
+
*/
|
|
89
|
+
subscribe(listener: ViewModelListener): () => void;
|
|
90
|
+
/**
|
|
91
|
+
* Create a new ViewModel with the given initial internal state.
|
|
92
|
+
*
|
|
93
|
+
* The constructor initializes the internal state and immediately computes
|
|
94
|
+
* the derived state by calling `computeDerivedState`.
|
|
95
|
+
*
|
|
96
|
+
* @param initialState - The initial internal state of the view model
|
|
97
|
+
*/
|
|
98
|
+
constructor(initialState: S);
|
|
99
|
+
/**
|
|
100
|
+
* Update the internal state, recompute derived state, and notify all subscribers.
|
|
101
|
+
*
|
|
102
|
+
* This method is protected and should only be called from within your view model subclass.
|
|
103
|
+
* The updater function receives the current internal state and should return the new internal state.
|
|
104
|
+
* After updating, the derived state is automatically recomputed via `computeDerivedState`.
|
|
105
|
+
* Always return a new state object to ensure immutability.
|
|
106
|
+
*
|
|
107
|
+
* @param updater - Function that receives current internal state and returns new internal state
|
|
108
|
+
*
|
|
109
|
+
* @example
|
|
110
|
+
* ```typescript
|
|
111
|
+
* this.update((currentState) => ({
|
|
112
|
+
* ...currentState,
|
|
113
|
+
* count: currentState.count + 1
|
|
114
|
+
* }));
|
|
115
|
+
* ```
|
|
116
|
+
*/
|
|
117
|
+
protected update(updater: Updater<S>): void;
|
|
118
|
+
/**
|
|
119
|
+
* Compute the derived state from the internal state.
|
|
120
|
+
*
|
|
121
|
+
* This abstract method must be implemented by subclasses to transform
|
|
122
|
+
* the internal state into the derived state that will be exposed to
|
|
123
|
+
* subscribers. This method is called automatically after each state
|
|
124
|
+
* update and during initialization.
|
|
125
|
+
*
|
|
126
|
+
* @param state - The current internal state
|
|
127
|
+
* @returns The derived state with any computed properties
|
|
128
|
+
*
|
|
129
|
+
* @example
|
|
130
|
+
* ```typescript
|
|
131
|
+
* computeDerivedState({ count }: CounterState): CounterDerivedState {
|
|
132
|
+
* return {
|
|
133
|
+
* count,
|
|
134
|
+
* isEven: count % 2 === 0,
|
|
135
|
+
* isPositive: count > 0,
|
|
136
|
+
* };
|
|
137
|
+
* }
|
|
138
|
+
* ```
|
|
139
|
+
*/
|
|
140
|
+
abstract computeDerivedState(state: S): D;
|
|
141
|
+
/**
|
|
142
|
+
* Get the current derived state.
|
|
143
|
+
*
|
|
144
|
+
* This returns the derived state computed by `computeDerivedState`,
|
|
145
|
+
* not the internal state.
|
|
146
|
+
*
|
|
147
|
+
* @returns The current derived state
|
|
148
|
+
*/
|
|
149
|
+
get state(): D;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Abstract base class for creating reactive view models.
|
|
154
|
+
*
|
|
155
|
+
* A ViewModel manages state and notifies subscribers when the state changes.
|
|
156
|
+
* Extend this class to create your own view models with custom business logic.
|
|
157
|
+
*
|
|
158
|
+
* @template S - The state type
|
|
159
|
+
*
|
|
160
|
+
* @example
|
|
161
|
+
* ```typescript
|
|
162
|
+
* type CounterState = { count: number };
|
|
163
|
+
*
|
|
164
|
+
* class CounterViewModel extends ViewModel<CounterState> {
|
|
165
|
+
* constructor() {
|
|
166
|
+
* super({ count: 0 });
|
|
167
|
+
* }
|
|
168
|
+
*
|
|
169
|
+
* increment() {
|
|
170
|
+
* this.update(({ count }) => ({ count: count + 1 }));
|
|
171
|
+
* }
|
|
172
|
+
* }
|
|
173
|
+
*
|
|
174
|
+
* const counter = new CounterViewModel();
|
|
175
|
+
* const unsubscribe = counter.subscribe((state) => {
|
|
176
|
+
* console.log('Count:', state.count);
|
|
177
|
+
* });
|
|
178
|
+
* counter.increment(); // Logs: Count: 1
|
|
179
|
+
* ```
|
|
180
|
+
*/
|
|
181
|
+
declare abstract class ViewModel<S> extends ViewModelWithDerivedState<S, S> {
|
|
182
|
+
/**
|
|
183
|
+
* Create a new ViewModel with the given initial state.
|
|
184
|
+
*
|
|
185
|
+
* @param initialState - The initial state of the view model
|
|
186
|
+
*/
|
|
187
|
+
constructor(initialState: S);
|
|
188
|
+
computeDerivedState(state: S): S;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
export { ViewModel, ViewModelWithDerivedState };
|
|
192
|
+
export type { Updater, ViewModelListener };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
class t{subscribe(t){return this.t.add(t),()=>{this.t.delete(t)}}constructor(t){this.t=new Set,this.i=t,this.h=this.computeDerivedState(this.i)}update(t){this.i=t(this.i),this.h=this.computeDerivedState(this.i);for(const t of this.t)t()}get state(){return this.h}}class s extends t{constructor(t){super(t)}computeDerivedState(t){return t}}export{s as ViewModel,t as ViewModelWithDerivedState};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/ViewModelWithDerivedState.ts","../src/ViewModel.ts"],"sourcesContent":["/**\n * Function that receives the current state and returns the new state.\n * The updater function should be pure and return a new state object.\n *\n * @template T - The state type\n * @param currentState - The current state\n * @returns The new state\n */\nexport type Updater<T> = (currentState: T) => T;\n\n/**\n * Function that gets called when the state changes.\n *\n * @template T - The state type\n */\nexport type ViewModelListener = () => void;\n\n/**\n * Abstract base class for creating reactive view models with derived state.\n *\n * This class extends the basic ViewModel pattern by allowing you to compute\n * derived state from internal state. The internal state is managed privately,\n * while the derived state (which can include computed properties) is exposed\n * to subscribers.\n *\n * @template S - The internal state type (managed internally)\n * @template D - The derived state type (exposed to subscribers)\n *\n * @example\n * ```typescript\n * type TodoState = {\n * items: Array<{ id: string; text: string; done: boolean }>;\n * };\n *\n * type TodoDerivedState = TodoState & {\n * totalCount: number;\n * completedCount: number;\n * remainingCount: number;\n * };\n *\n * class TodoViewModel extends ViewModelWithDerivedState<TodoState, TodoDerivedState> {\n * constructor() {\n * super({ items: [] });\n * }\n *\n * computeDerivedState({ items }: TodoState): TodoDerivedState {\n * return {\n * items,\n * totalCount: items.length,\n * completedCount: items.filter(item => item.done).length,\n * remainingCount: items.filter(item => !item.done).length,\n * };\n * }\n *\n * addTodo(text: string) {\n * this.update(({ items }) => ({\n * items: [...items, { id: crypto.randomUUID(), text, done: false }],\n * }));\n * }\n * }\n *\n * const todos = new TodoViewModel();\n * todos.subscribe(() => {\n * console.log('Completed:', todos.state.completedCount);\n * });\n * todos.addTodo('Learn ViewModels'); // Logs: Completed: 0\n * ```\n */\nexport abstract class ViewModelWithDerivedState<S, D> {\n private _listeners: Set<ViewModelListener> = new Set();\n private _internalState: S;\n private _state: D;\n\n /**\n * Subscribe to state changes.\n *\n * The listener will be called immediately after any state update.\n *\n * @param listener - Function to call when state changes\n * @returns Function to unsubscribe the listener\n *\n * @example\n * ```typescript\n * const unsubscribe = viewModel.subscribe((state) => {\n * console.log('State changed:', state);\n * });\n *\n * // Later, when you want to stop listening:\n * unsubscribe();\n * ```\n */\n subscribe(listener: ViewModelListener): () => void {\n this._listeners.add(listener);\n return () => {\n this._listeners.delete(listener);\n };\n }\n\n /**\n * Create a new ViewModel with the given initial internal state.\n *\n * The constructor initializes the internal state and immediately computes\n * the derived state by calling `computeDerivedState`.\n *\n * @param initialState - The initial internal state of the view model\n */\n constructor(initialState: S) {\n this._internalState = initialState;\n this._state = this.computeDerivedState(this._internalState);\n }\n\n /**\n * Update the internal state, recompute derived state, and notify all subscribers.\n *\n * This method is protected and should only be called from within your view model subclass.\n * The updater function receives the current internal state and should return the new internal state.\n * After updating, the derived state is automatically recomputed via `computeDerivedState`.\n * Always return a new state object to ensure immutability.\n *\n * @param updater - Function that receives current internal state and returns new internal state\n *\n * @example\n * ```typescript\n * this.update((currentState) => ({\n * ...currentState,\n * count: currentState.count + 1\n * }));\n * ```\n */\n protected update(updater: Updater<S>) {\n this._internalState = updater(this._internalState);\n this._state = this.computeDerivedState(this._internalState);\n\n for (const listener of this._listeners) {\n listener();\n }\n }\n\n /**\n * Compute the derived state from the internal state.\n *\n * This abstract method must be implemented by subclasses to transform\n * the internal state into the derived state that will be exposed to\n * subscribers. This method is called automatically after each state\n * update and during initialization.\n *\n * @param state - The current internal state\n * @returns The derived state with any computed properties\n *\n * @example\n * ```typescript\n * computeDerivedState({ count }: CounterState): CounterDerivedState {\n * return {\n * count,\n * isEven: count % 2 === 0,\n * isPositive: count > 0,\n * };\n * }\n * ```\n */\n abstract computeDerivedState(state: S): D;\n\n /**\n * Get the current derived state.\n *\n * This returns the derived state computed by `computeDerivedState`,\n * not the internal state.\n *\n * @returns The current derived state\n */\n get state(): D {\n return this._state;\n }\n}\n","import { ViewModelWithDerivedState } from \"./ViewModelWithDerivedState.js\";\n\n/**\n * Abstract base class for creating reactive view models.\n *\n * A ViewModel manages state and notifies subscribers when the state changes.\n * Extend this class to create your own view models with custom business logic.\n *\n * @template S - The state type\n *\n * @example\n * ```typescript\n * type CounterState = { count: number };\n *\n * class CounterViewModel extends ViewModel<CounterState> {\n * constructor() {\n * super({ count: 0 });\n * }\n *\n * increment() {\n * this.update(({ count }) => ({ count: count + 1 }));\n * }\n * }\n *\n * const counter = new CounterViewModel();\n * const unsubscribe = counter.subscribe((state) => {\n * console.log('Count:', state.count);\n * });\n * counter.increment(); // Logs: Count: 1\n * ```\n */\nexport abstract class ViewModel<S> extends ViewModelWithDerivedState<S, S> {\n /**\n * Create a new ViewModel with the given initial state.\n *\n * @param initialState - The initial state of the view model\n */\n constructor(initialState: S) {\n super(initialState);\n }\n\n computeDerivedState(state: S): S {\n return state;\n }\n}\n"],"names":["ViewModelWithDerivedState","subscribe","listener","this","_listeners","add","delete","constructor","initialState","Set","_internalState","_state","computeDerivedState","update","updater","state","ViewModel","super"],"mappings":"MAoEsBA,EAuBpB,SAAAC,CAAUC,GAER,OADAC,KAAKC,EAAWC,IAAIH,GACb,KACLC,KAAKC,EAAWE,OAAOJ,GAE3B,CAUA,WAAAK,CAAYC,GArCJL,KAAAC,EAAqC,IAAIK,IAsC/CN,KAAKO,EAAiBF,EACtBL,KAAKQ,EAASR,KAAKS,oBAAoBT,KAAKO,EAC9C,CAoBU,MAAAG,CAAOC,GACfX,KAAKO,EAAiBI,EAAQX,KAAKO,GACnCP,KAAKQ,EAASR,KAAKS,oBAAoBT,KAAKO,GAE5C,IAAK,MAAMR,KAAYC,KAAKC,EAC1BF,GAEJ,CAkCA,SAAIa,GACF,OAAOZ,KAAKQ,CACd,EC7II,MAAgBK,UAAqBhB,EAMzC,WAAAO,CAAYC,GACVS,MAAMT,EACR,CAEA,mBAAAI,CAAoBG,GAClB,OAAOA,CACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@view-models/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "A lightweight, framework-agnostic library for building reactive view models with TypeScript",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"view",
|
|
@@ -36,18 +36,27 @@
|
|
|
36
36
|
"node": ">=18.0.0"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
|
-
"
|
|
39
|
+
"clean": "rm -rf dist",
|
|
40
|
+
"build": "npm run clean && rollup -c",
|
|
40
41
|
"typecheck": "tsc --noEmit",
|
|
41
42
|
"test": "vitest run",
|
|
42
43
|
"test:watch": "vitest",
|
|
43
44
|
"test:coverage": "vitest run --coverage",
|
|
44
45
|
"format": "prettier --write \"**/*.{ts,js,json,md}\"",
|
|
45
46
|
"format:check": "prettier --check \"**/*.{ts,js,json,md}\"",
|
|
47
|
+
"docs": "typedoc && npm run format",
|
|
46
48
|
"prepublishOnly": "npm run build"
|
|
47
49
|
},
|
|
48
50
|
"devDependencies": {
|
|
51
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
52
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
49
53
|
"@vitest/coverage-v8": "^4.0.16",
|
|
50
54
|
"prettier": "^3.7.4",
|
|
55
|
+
"rollup": "^4.57.0",
|
|
56
|
+
"rollup-plugin-dts": "^6.3.0",
|
|
57
|
+
"tslib": "^2.8.1",
|
|
58
|
+
"typedoc": "^0.28.16",
|
|
59
|
+
"typedoc-plugin-markdown": "^4.9.0",
|
|
51
60
|
"typescript": "^5.7.3",
|
|
52
61
|
"vitest": "^4.0.16"
|
|
53
62
|
},
|
package/src/ViewModel.ts
CHANGED
|
@@ -12,7 +12,6 @@ export type Updater<T> = (currentState: T) => T;
|
|
|
12
12
|
* Function that gets called when the state changes.
|
|
13
13
|
*
|
|
14
14
|
* @template T - The state type
|
|
15
|
-
* @param state - The new state
|
|
16
15
|
*/
|
|
17
16
|
export type ViewModelListener = () => void;
|
|
18
17
|
|
|
@@ -29,22 +28,22 @@ export type ViewModelListener = () => void;
|
|
|
29
28
|
*
|
|
30
29
|
* @example
|
|
31
30
|
* ```typescript
|
|
32
|
-
* type
|
|
31
|
+
* type TodoState = {
|
|
33
32
|
* items: Array<{ id: string; text: string; done: boolean }>;
|
|
34
33
|
* };
|
|
35
34
|
*
|
|
36
|
-
* type TodoDerivedState =
|
|
35
|
+
* type TodoDerivedState = TodoState & {
|
|
37
36
|
* totalCount: number;
|
|
38
37
|
* completedCount: number;
|
|
39
38
|
* remainingCount: number;
|
|
40
39
|
* };
|
|
41
40
|
*
|
|
42
|
-
* class TodoViewModel extends ViewModelWithDerivedState<
|
|
41
|
+
* class TodoViewModel extends ViewModelWithDerivedState<TodoState, TodoDerivedState> {
|
|
43
42
|
* constructor() {
|
|
44
43
|
* super({ items: [] });
|
|
45
44
|
* }
|
|
46
45
|
*
|
|
47
|
-
* computeDerivedState({ items }:
|
|
46
|
+
* computeDerivedState({ items }: TodoState): TodoDerivedState {
|
|
48
47
|
* return {
|
|
49
48
|
* items,
|
|
50
49
|
* totalCount: items.length,
|
package/dist/ViewModel.d.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { ViewModelWithDerivedState } from "./ViewModelWithDerivedState";
|
|
2
|
-
/**
|
|
3
|
-
* Abstract base class for creating reactive view models.
|
|
4
|
-
*
|
|
5
|
-
* A ViewModel manages state and notifies subscribers when the state changes.
|
|
6
|
-
* Extend this class to create your own view models with custom business logic.
|
|
7
|
-
*
|
|
8
|
-
* @template S - The state type
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```typescript
|
|
12
|
-
* type CounterState = { count: number };
|
|
13
|
-
*
|
|
14
|
-
* class CounterViewModel extends ViewModel<CounterState> {
|
|
15
|
-
* constructor() {
|
|
16
|
-
* super({ count: 0 });
|
|
17
|
-
* }
|
|
18
|
-
*
|
|
19
|
-
* increment() {
|
|
20
|
-
* this.update(({ count }) => ({ count: count + 1 }));
|
|
21
|
-
* }
|
|
22
|
-
* }
|
|
23
|
-
*
|
|
24
|
-
* const counter = new CounterViewModel();
|
|
25
|
-
* const unsubscribe = counter.subscribe((state) => {
|
|
26
|
-
* console.log('Count:', state.count);
|
|
27
|
-
* });
|
|
28
|
-
* counter.increment(); // Logs: Count: 1
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export declare abstract class ViewModel<S> extends ViewModelWithDerivedState<S, S> {
|
|
32
|
-
/**
|
|
33
|
-
* Create a new ViewModel with the given initial state.
|
|
34
|
-
*
|
|
35
|
-
* @param initialState - The initial state of the view model
|
|
36
|
-
*/
|
|
37
|
-
constructor(initialState: S);
|
|
38
|
-
computeDerivedState(state: S): S;
|
|
39
|
-
}
|
|
40
|
-
//# sourceMappingURL=ViewModel.d.ts.map
|
package/dist/ViewModel.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ViewModel.d.ts","sourceRoot":"","sources":["../src/ViewModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,8BAAsB,SAAS,CAAC,CAAC,CAAE,SAAQ,yBAAyB,CAAC,CAAC,EAAE,CAAC,CAAC;IACxE;;;;OAIG;gBACS,YAAY,EAAE,CAAC;IAI3B,mBAAmB,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC;CAGjC"}
|
package/dist/ViewModel.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { ViewModelWithDerivedState } from "./ViewModelWithDerivedState";
|
|
2
|
-
/**
|
|
3
|
-
* Abstract base class for creating reactive view models.
|
|
4
|
-
*
|
|
5
|
-
* A ViewModel manages state and notifies subscribers when the state changes.
|
|
6
|
-
* Extend this class to create your own view models with custom business logic.
|
|
7
|
-
*
|
|
8
|
-
* @template S - The state type
|
|
9
|
-
*
|
|
10
|
-
* @example
|
|
11
|
-
* ```typescript
|
|
12
|
-
* type CounterState = { count: number };
|
|
13
|
-
*
|
|
14
|
-
* class CounterViewModel extends ViewModel<CounterState> {
|
|
15
|
-
* constructor() {
|
|
16
|
-
* super({ count: 0 });
|
|
17
|
-
* }
|
|
18
|
-
*
|
|
19
|
-
* increment() {
|
|
20
|
-
* this.update(({ count }) => ({ count: count + 1 }));
|
|
21
|
-
* }
|
|
22
|
-
* }
|
|
23
|
-
*
|
|
24
|
-
* const counter = new CounterViewModel();
|
|
25
|
-
* const unsubscribe = counter.subscribe((state) => {
|
|
26
|
-
* console.log('Count:', state.count);
|
|
27
|
-
* });
|
|
28
|
-
* counter.increment(); // Logs: Count: 1
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export class ViewModel extends ViewModelWithDerivedState {
|
|
32
|
-
/**
|
|
33
|
-
* Create a new ViewModel with the given initial state.
|
|
34
|
-
*
|
|
35
|
-
* @param initialState - The initial state of the view model
|
|
36
|
-
*/
|
|
37
|
-
constructor(initialState) {
|
|
38
|
-
super(initialState);
|
|
39
|
-
}
|
|
40
|
-
computeDerivedState(state) {
|
|
41
|
-
return state;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Function that receives the current state and returns the new state.
|
|
3
|
-
* The updater function should be pure and return a new state object.
|
|
4
|
-
*
|
|
5
|
-
* @template T - The state type
|
|
6
|
-
* @param currentState - The current state
|
|
7
|
-
* @returns The new state
|
|
8
|
-
*/
|
|
9
|
-
export type Updater<T> = (currentState: T) => T;
|
|
10
|
-
/**
|
|
11
|
-
* Function that gets called when the state changes.
|
|
12
|
-
*
|
|
13
|
-
* @template T - The state type
|
|
14
|
-
* @param state - The new state
|
|
15
|
-
*/
|
|
16
|
-
export type ViewModelListener = () => void;
|
|
17
|
-
/**
|
|
18
|
-
* Abstract base class for creating reactive view models with derived state.
|
|
19
|
-
*
|
|
20
|
-
* This class extends the basic ViewModel pattern by allowing you to compute
|
|
21
|
-
* derived state from internal state. The internal state is managed privately,
|
|
22
|
-
* while the derived state (which can include computed properties) is exposed
|
|
23
|
-
* to subscribers.
|
|
24
|
-
*
|
|
25
|
-
* @template S - The internal state type (managed internally)
|
|
26
|
-
* @template D - The derived state type (exposed to subscribers)
|
|
27
|
-
*
|
|
28
|
-
* @example
|
|
29
|
-
* ```typescript
|
|
30
|
-
* type TodoInternalState = {
|
|
31
|
-
* items: Array<{ id: string; text: string; done: boolean }>;
|
|
32
|
-
* };
|
|
33
|
-
*
|
|
34
|
-
* type TodoDerivedState = TodoInternalState & {
|
|
35
|
-
* totalCount: number;
|
|
36
|
-
* completedCount: number;
|
|
37
|
-
* remainingCount: number;
|
|
38
|
-
* };
|
|
39
|
-
*
|
|
40
|
-
* class TodoViewModel extends ViewModelWithDerivedState<TodoInternalState, TodoDerivedState> {
|
|
41
|
-
* constructor() {
|
|
42
|
-
* super({ items: [] });
|
|
43
|
-
* }
|
|
44
|
-
*
|
|
45
|
-
* computeDerivedState({ items }: TodoInternalState): TodoDerivedState {
|
|
46
|
-
* return {
|
|
47
|
-
* items,
|
|
48
|
-
* totalCount: items.length,
|
|
49
|
-
* completedCount: items.filter(item => item.done).length,
|
|
50
|
-
* remainingCount: items.filter(item => !item.done).length,
|
|
51
|
-
* };
|
|
52
|
-
* }
|
|
53
|
-
*
|
|
54
|
-
* addTodo(text: string) {
|
|
55
|
-
* this.update(({ items }) => ({
|
|
56
|
-
* items: [...items, { id: crypto.randomUUID(), text, done: false }],
|
|
57
|
-
* }));
|
|
58
|
-
* }
|
|
59
|
-
* }
|
|
60
|
-
*
|
|
61
|
-
* const todos = new TodoViewModel();
|
|
62
|
-
* todos.subscribe(() => {
|
|
63
|
-
* console.log('Completed:', todos.state.completedCount);
|
|
64
|
-
* });
|
|
65
|
-
* todos.addTodo('Learn ViewModels'); // Logs: Completed: 0
|
|
66
|
-
* ```
|
|
67
|
-
*/
|
|
68
|
-
export declare abstract class ViewModelWithDerivedState<S, D> {
|
|
69
|
-
private _listeners;
|
|
70
|
-
private _internalState;
|
|
71
|
-
private _state;
|
|
72
|
-
/**
|
|
73
|
-
* Subscribe to state changes.
|
|
74
|
-
*
|
|
75
|
-
* The listener will be called immediately after any state update.
|
|
76
|
-
*
|
|
77
|
-
* @param listener - Function to call when state changes
|
|
78
|
-
* @returns Function to unsubscribe the listener
|
|
79
|
-
*
|
|
80
|
-
* @example
|
|
81
|
-
* ```typescript
|
|
82
|
-
* const unsubscribe = viewModel.subscribe((state) => {
|
|
83
|
-
* console.log('State changed:', state);
|
|
84
|
-
* });
|
|
85
|
-
*
|
|
86
|
-
* // Later, when you want to stop listening:
|
|
87
|
-
* unsubscribe();
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
|
-
subscribe(listener: ViewModelListener): () => void;
|
|
91
|
-
/**
|
|
92
|
-
* Create a new ViewModel with the given initial internal state.
|
|
93
|
-
*
|
|
94
|
-
* The constructor initializes the internal state and immediately computes
|
|
95
|
-
* the derived state by calling `computeDerivedState`.
|
|
96
|
-
*
|
|
97
|
-
* @param initialState - The initial internal state of the view model
|
|
98
|
-
*/
|
|
99
|
-
constructor(initialState: S);
|
|
100
|
-
/**
|
|
101
|
-
* Update the internal state, recompute derived state, and notify all subscribers.
|
|
102
|
-
*
|
|
103
|
-
* This method is protected and should only be called from within your view model subclass.
|
|
104
|
-
* The updater function receives the current internal state and should return the new internal state.
|
|
105
|
-
* After updating, the derived state is automatically recomputed via `computeDerivedState`.
|
|
106
|
-
* Always return a new state object to ensure immutability.
|
|
107
|
-
*
|
|
108
|
-
* @param updater - Function that receives current internal state and returns new internal state
|
|
109
|
-
*
|
|
110
|
-
* @example
|
|
111
|
-
* ```typescript
|
|
112
|
-
* this.update((currentState) => ({
|
|
113
|
-
* ...currentState,
|
|
114
|
-
* count: currentState.count + 1
|
|
115
|
-
* }));
|
|
116
|
-
* ```
|
|
117
|
-
*/
|
|
118
|
-
protected update(updater: Updater<S>): void;
|
|
119
|
-
/**
|
|
120
|
-
* Compute the derived state from the internal state.
|
|
121
|
-
*
|
|
122
|
-
* This abstract method must be implemented by subclasses to transform
|
|
123
|
-
* the internal state into the derived state that will be exposed to
|
|
124
|
-
* subscribers. This method is called automatically after each state
|
|
125
|
-
* update and during initialization.
|
|
126
|
-
*
|
|
127
|
-
* @param state - The current internal state
|
|
128
|
-
* @returns The derived state with any computed properties
|
|
129
|
-
*
|
|
130
|
-
* @example
|
|
131
|
-
* ```typescript
|
|
132
|
-
* computeDerivedState({ count }: CounterState): CounterDerivedState {
|
|
133
|
-
* return {
|
|
134
|
-
* count,
|
|
135
|
-
* isEven: count % 2 === 0,
|
|
136
|
-
* isPositive: count > 0,
|
|
137
|
-
* };
|
|
138
|
-
* }
|
|
139
|
-
* ```
|
|
140
|
-
*/
|
|
141
|
-
abstract computeDerivedState(state: S): D;
|
|
142
|
-
/**
|
|
143
|
-
* Get the current derived state.
|
|
144
|
-
*
|
|
145
|
-
* This returns the derived state computed by `computeDerivedState`,
|
|
146
|
-
* not the internal state.
|
|
147
|
-
*
|
|
148
|
-
* @returns The current derived state
|
|
149
|
-
*/
|
|
150
|
-
get state(): D;
|
|
151
|
-
}
|
|
152
|
-
//# sourceMappingURL=ViewModelWithDerivedState.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ViewModelWithDerivedState.d.ts","sourceRoot":"","sources":["../src/ViewModelWithDerivedState.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,8BAAsB,yBAAyB,CAAC,CAAC,EAAE,CAAC;IAClD,OAAO,CAAC,UAAU,CAAqC;IACvD,OAAO,CAAC,cAAc,CAAI;IAC1B,OAAO,CAAC,MAAM,CAAI;IAElB;;;;;;;;;;;;;;;;;OAiBG;IACH,SAAS,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,IAAI;IAOlD;;;;;;;OAOG;gBACS,YAAY,EAAE,CAAC;IAK3B;;;;;;;;;;;;;;;;;OAiBG;IACH,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IASpC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC;IAEzC;;;;;;;OAOG;IACH,IAAI,KAAK,IAAI,CAAC,CAEb;CACF"}
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Abstract base class for creating reactive view models with derived state.
|
|
3
|
-
*
|
|
4
|
-
* This class extends the basic ViewModel pattern by allowing you to compute
|
|
5
|
-
* derived state from internal state. The internal state is managed privately,
|
|
6
|
-
* while the derived state (which can include computed properties) is exposed
|
|
7
|
-
* to subscribers.
|
|
8
|
-
*
|
|
9
|
-
* @template S - The internal state type (managed internally)
|
|
10
|
-
* @template D - The derived state type (exposed to subscribers)
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```typescript
|
|
14
|
-
* type TodoInternalState = {
|
|
15
|
-
* items: Array<{ id: string; text: string; done: boolean }>;
|
|
16
|
-
* };
|
|
17
|
-
*
|
|
18
|
-
* type TodoDerivedState = TodoInternalState & {
|
|
19
|
-
* totalCount: number;
|
|
20
|
-
* completedCount: number;
|
|
21
|
-
* remainingCount: number;
|
|
22
|
-
* };
|
|
23
|
-
*
|
|
24
|
-
* class TodoViewModel extends ViewModelWithDerivedState<TodoInternalState, TodoDerivedState> {
|
|
25
|
-
* constructor() {
|
|
26
|
-
* super({ items: [] });
|
|
27
|
-
* }
|
|
28
|
-
*
|
|
29
|
-
* computeDerivedState({ items }: TodoInternalState): TodoDerivedState {
|
|
30
|
-
* return {
|
|
31
|
-
* items,
|
|
32
|
-
* totalCount: items.length,
|
|
33
|
-
* completedCount: items.filter(item => item.done).length,
|
|
34
|
-
* remainingCount: items.filter(item => !item.done).length,
|
|
35
|
-
* };
|
|
36
|
-
* }
|
|
37
|
-
*
|
|
38
|
-
* addTodo(text: string) {
|
|
39
|
-
* this.update(({ items }) => ({
|
|
40
|
-
* items: [...items, { id: crypto.randomUUID(), text, done: false }],
|
|
41
|
-
* }));
|
|
42
|
-
* }
|
|
43
|
-
* }
|
|
44
|
-
*
|
|
45
|
-
* const todos = new TodoViewModel();
|
|
46
|
-
* todos.subscribe(() => {
|
|
47
|
-
* console.log('Completed:', todos.state.completedCount);
|
|
48
|
-
* });
|
|
49
|
-
* todos.addTodo('Learn ViewModels'); // Logs: Completed: 0
|
|
50
|
-
* ```
|
|
51
|
-
*/
|
|
52
|
-
export class ViewModelWithDerivedState {
|
|
53
|
-
/**
|
|
54
|
-
* Subscribe to state changes.
|
|
55
|
-
*
|
|
56
|
-
* The listener will be called immediately after any state update.
|
|
57
|
-
*
|
|
58
|
-
* @param listener - Function to call when state changes
|
|
59
|
-
* @returns Function to unsubscribe the listener
|
|
60
|
-
*
|
|
61
|
-
* @example
|
|
62
|
-
* ```typescript
|
|
63
|
-
* const unsubscribe = viewModel.subscribe((state) => {
|
|
64
|
-
* console.log('State changed:', state);
|
|
65
|
-
* });
|
|
66
|
-
*
|
|
67
|
-
* // Later, when you want to stop listening:
|
|
68
|
-
* unsubscribe();
|
|
69
|
-
* ```
|
|
70
|
-
*/
|
|
71
|
-
subscribe(listener) {
|
|
72
|
-
this._listeners.add(listener);
|
|
73
|
-
return () => {
|
|
74
|
-
this._listeners.delete(listener);
|
|
75
|
-
};
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* Create a new ViewModel with the given initial internal state.
|
|
79
|
-
*
|
|
80
|
-
* The constructor initializes the internal state and immediately computes
|
|
81
|
-
* the derived state by calling `computeDerivedState`.
|
|
82
|
-
*
|
|
83
|
-
* @param initialState - The initial internal state of the view model
|
|
84
|
-
*/
|
|
85
|
-
constructor(initialState) {
|
|
86
|
-
this._listeners = new Set();
|
|
87
|
-
this._internalState = initialState;
|
|
88
|
-
this._state = this.computeDerivedState(this._internalState);
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* Update the internal state, recompute derived state, and notify all subscribers.
|
|
92
|
-
*
|
|
93
|
-
* This method is protected and should only be called from within your view model subclass.
|
|
94
|
-
* The updater function receives the current internal state and should return the new internal state.
|
|
95
|
-
* After updating, the derived state is automatically recomputed via `computeDerivedState`.
|
|
96
|
-
* Always return a new state object to ensure immutability.
|
|
97
|
-
*
|
|
98
|
-
* @param updater - Function that receives current internal state and returns new internal state
|
|
99
|
-
*
|
|
100
|
-
* @example
|
|
101
|
-
* ```typescript
|
|
102
|
-
* this.update((currentState) => ({
|
|
103
|
-
* ...currentState,
|
|
104
|
-
* count: currentState.count + 1
|
|
105
|
-
* }));
|
|
106
|
-
* ```
|
|
107
|
-
*/
|
|
108
|
-
update(updater) {
|
|
109
|
-
this._internalState = updater(this._internalState);
|
|
110
|
-
this._state = this.computeDerivedState(this._internalState);
|
|
111
|
-
for (const listener of this._listeners) {
|
|
112
|
-
listener();
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
/**
|
|
116
|
-
* Get the current derived state.
|
|
117
|
-
*
|
|
118
|
-
* This returns the derived state computed by `computeDerivedState`,
|
|
119
|
-
* not the internal state.
|
|
120
|
-
*
|
|
121
|
-
* @returns The current derived state
|
|
122
|
-
*/
|
|
123
|
-
get state() {
|
|
124
|
-
return this._state;
|
|
125
|
-
}
|
|
126
|
-
}
|
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gCAAgC,CAAC"}
|