@view-models/core 2.1.1 → 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/dist/index.d.ts +192 -3
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -0
- package/package.json +8 -2
- 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 -151
- package/dist/ViewModelWithDerivedState.d.ts.map +0 -1
- package/dist/ViewModelWithDerivedState.js +0 -126
- package/dist/index.d.ts.map +0 -1
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,7 +36,8 @@
|
|
|
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",
|
|
@@ -47,8 +48,13 @@
|
|
|
47
48
|
"prepublishOnly": "npm run build"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
51
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
52
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
50
53
|
"@vitest/coverage-v8": "^4.0.16",
|
|
51
54
|
"prettier": "^3.7.4",
|
|
55
|
+
"rollup": "^4.57.0",
|
|
56
|
+
"rollup-plugin-dts": "^6.3.0",
|
|
57
|
+
"tslib": "^2.8.1",
|
|
52
58
|
"typedoc": "^0.28.16",
|
|
53
59
|
"typedoc-plugin-markdown": "^4.9.0",
|
|
54
60
|
"typescript": "^5.7.3",
|
package/dist/ViewModel.d.ts
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { ViewModelWithDerivedState } from "./ViewModelWithDerivedState.js";
|
|
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,gCAAgC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;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.js";
|
|
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,151 +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
|
-
*/
|
|
15
|
-
export 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
|
-
export 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
|
-
//# 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;;;;GAIG;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 TodoState = {
|
|
15
|
-
* items: Array<{ id: string; text: string; done: boolean }>;
|
|
16
|
-
* };
|
|
17
|
-
*
|
|
18
|
-
* type TodoDerivedState = TodoState & {
|
|
19
|
-
* totalCount: number;
|
|
20
|
-
* completedCount: number;
|
|
21
|
-
* remainingCount: number;
|
|
22
|
-
* };
|
|
23
|
-
*
|
|
24
|
-
* class TodoViewModel extends ViewModelWithDerivedState<TodoState, TodoDerivedState> {
|
|
25
|
-
* constructor() {
|
|
26
|
-
* super({ items: [] });
|
|
27
|
-
* }
|
|
28
|
-
*
|
|
29
|
-
* computeDerivedState({ items }: TodoState): 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"}
|