@figliolia/galena 3.0.3 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -33
- package/dist/API.cjs +9 -0
- package/dist/API.d.cts +13 -0
- package/dist/API.d.cts.map +1 -0
- package/dist/API.d.mts +13 -0
- package/dist/API.d.mts.map +1 -0
- package/dist/API.mjs +11 -0
- package/dist/API.mjs.map +1 -0
- package/dist/Galena.cjs +31 -4
- package/dist/Galena.d.cts +24 -4
- package/dist/Galena.d.cts.map +1 -1
- package/dist/Galena.d.mts +24 -4
- package/dist/Galena.d.mts.map +1 -1
- package/dist/Galena.mjs +31 -4
- package/dist/Galena.mjs.map +1 -1
- package/dist/Logger.cjs +2 -2
- package/dist/Logger.mjs +2 -2
- package/dist/Logger.mjs.map +1 -1
- package/dist/Middleware.cjs +2 -2
- package/dist/Middleware.d.cts +2 -2
- package/dist/Middleware.d.mts +2 -2
- package/dist/Middleware.mjs +2 -2
- package/dist/Middleware.mjs.map +1 -1
- package/dist/Profiler.cjs +2 -2
- package/dist/Profiler.mjs +2 -2
- package/dist/Profiler.mjs.map +1 -1
- package/dist/State.cjs +17 -14
- package/dist/State.d.cts +14 -11
- package/dist/State.d.cts.map +1 -1
- package/dist/State.d.mts +14 -11
- package/dist/State.d.mts.map +1 -1
- package/dist/State.mjs +17 -14
- package/dist/State.mjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.mts +2 -2
- package/dist/types.d.cts +3 -2
- package/dist/types.d.cts.map +1 -1
- package/dist/types.d.mts +3 -2
- package/dist/types.d.mts.map +1 -1
- package/package.json +9 -9
- package/src/API.ts +12 -0
- package/src/Galena.ts +37 -4
- package/src/Logger.ts +2 -2
- package/src/Middleware.ts +2 -2
- package/src/Profiler.ts +2 -2
- package/src/State.ts +17 -14
- package/src/types.ts +5 -1
package/README.md
CHANGED
|
@@ -2,26 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Lightning fast, framework agnostic state, that doesn't glue your state operations to your UI components!
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
import { State, createState } from "@figliolia/galena";
|
|
9
|
-
|
|
10
|
-
const myState = new State(/* any value */);
|
|
11
|
-
// or
|
|
12
|
-
const myState = createState(/* any value */);
|
|
13
|
-
|
|
14
|
-
const currentValue = myState.getSnapshot();
|
|
15
|
-
const subscriber = myState.subscribe(nextValue => {});
|
|
16
|
-
myState.set(/* new value */);
|
|
17
|
-
myState.update(previousValue => /* new value */);
|
|
18
|
-
|
|
19
|
-
// to reset state back to its original value
|
|
20
|
-
myState.reset();
|
|
21
|
-
|
|
22
|
-
// to unregister the subscription
|
|
23
|
-
subscriber();
|
|
24
|
-
```
|
|
5
|
+
[State](#the-state-model)
|
|
6
|
+
[Galena](#the-galena-model)
|
|
7
|
+
[For use with react](#frameworks)
|
|
25
8
|
|
|
26
9
|
## Installation
|
|
27
10
|
|
|
@@ -38,20 +21,22 @@ npm i @figliolia/react-galena
|
|
|
38
21
|
The instancable `State` object in Galena is a reactive wrapper around any value. You can use it to apply reactivity to large objects or simple values
|
|
39
22
|
|
|
40
23
|
```typescript
|
|
41
|
-
import { State } from "@figliolia/galena";
|
|
24
|
+
import { State, createState } from "@figliolia/galena";
|
|
42
25
|
|
|
43
|
-
const
|
|
26
|
+
const myState = new State(/* any value */, /* middleware */);
|
|
27
|
+
// or
|
|
28
|
+
const myState = createState(/* any value */, /* middleware */);
|
|
44
29
|
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
30
|
+
const currentValue = myState.getState();
|
|
31
|
+
const subscriber = myState.subscribe(nextValue => {});
|
|
32
|
+
myState.set(/* new value */);
|
|
33
|
+
myState.update(previousValue => /* new value */);
|
|
48
34
|
|
|
49
|
-
// to
|
|
50
|
-
|
|
35
|
+
// to reset state back to its original value
|
|
36
|
+
myState.reset();
|
|
51
37
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
MyState.reset(); // reset state back to the initial value
|
|
38
|
+
// to unregister the subscription
|
|
39
|
+
subscriber();
|
|
55
40
|
```
|
|
56
41
|
|
|
57
42
|
Instances of `State` are ultimately what compose all reactivity in Galena. They can exist as islands compose larger stateful model.
|
|
@@ -99,7 +84,10 @@ const UserState = AppState.get("user");
|
|
|
99
84
|
// to operate
|
|
100
85
|
UserState.update(state => /* next state */);
|
|
101
86
|
// or
|
|
102
|
-
AppState.update("user", state => /* next state */)
|
|
87
|
+
AppState.update("user", state => /* next state */);
|
|
88
|
+
|
|
89
|
+
// to get the current value of the state tree
|
|
90
|
+
const state = AppState.getState();
|
|
103
91
|
```
|
|
104
92
|
|
|
105
93
|
### Beyond the Basics
|
|
@@ -181,7 +169,7 @@ export class Logger<T = any> extends Middleware<T> {
|
|
|
181
169
|
|
|
182
170
|
override onBeforeUpdate(state: State<T>) {
|
|
183
171
|
// capture the previous state before an update takes place
|
|
184
|
-
this.previousState = state.
|
|
172
|
+
this.previousState = state.getState();
|
|
185
173
|
}
|
|
186
174
|
|
|
187
175
|
override onUpdate(state: State<T>) {
|
|
@@ -202,7 +190,7 @@ export class Logger<T = any> extends Middleware<T> {
|
|
|
202
190
|
console.log(
|
|
203
191
|
" %cNext State ",
|
|
204
192
|
"color: rgb(17, 118, 249); font-weight: bold",
|
|
205
|
-
state.
|
|
193
|
+
state.getState(),
|
|
206
194
|
);
|
|
207
195
|
}
|
|
208
196
|
|
package/dist/API.cjs
ADDED
package/dist/API.d.cts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Middleware } from "./Middleware.cjs";
|
|
2
|
+
|
|
3
|
+
//#region src/API.d.ts
|
|
4
|
+
declare abstract class API<T, E, M = T> {
|
|
5
|
+
readonly middleware: Middleware<M>[];
|
|
6
|
+
constructor(...middleware: Middleware<M>[]);
|
|
7
|
+
abstract getState(): T;
|
|
8
|
+
abstract subscribe(subscriber: (payload: E) => void): () => void;
|
|
9
|
+
abstract registerMiddleware(...middlewares: Middleware<M>[]): void;
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { API };
|
|
13
|
+
//# sourceMappingURL=API.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"API.d.cts","names":[],"sources":["../src/API.ts"],"mappings":";;;uBAEsB,GAAA,WAAc,CAAA;EAAA,SAClB,UAAA,EAAY,UAAA,CAAW,CAAA;iBACxB,UAAA,EAAY,UAAA,CAAW,CAAA;EAAA,SAItB,QAAA,CAAA,GAAY,CAAA;EAAA,SACZ,SAAA,CAAU,UAAA,GAAa,OAAA,EAAS,CAAA;EAAA,SAChC,kBAAA,CAAA,GAAsB,WAAA,EAAa,UAAA,CAAW,CAAA;AAAA"}
|
package/dist/API.d.mts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Middleware } from "./Middleware.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/API.d.ts
|
|
4
|
+
declare abstract class API<T, E, M = T> {
|
|
5
|
+
readonly middleware: Middleware<M>[];
|
|
6
|
+
constructor(...middleware: Middleware<M>[]);
|
|
7
|
+
abstract getState(): T;
|
|
8
|
+
abstract subscribe(subscriber: (payload: E) => void): () => void;
|
|
9
|
+
abstract registerMiddleware(...middlewares: Middleware<M>[]): void;
|
|
10
|
+
}
|
|
11
|
+
//#endregion
|
|
12
|
+
export { API };
|
|
13
|
+
//# sourceMappingURL=API.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"API.d.mts","names":[],"sources":["../src/API.ts"],"mappings":";;;uBAEsB,GAAA,WAAc,CAAA;EAAA,SAClB,UAAA,EAAY,UAAA,CAAW,CAAA;iBACxB,UAAA,EAAY,UAAA,CAAW,CAAA;EAAA,SAItB,QAAA,CAAA,GAAY,CAAA;EAAA,SACZ,SAAA,CAAU,UAAA,GAAa,OAAA,EAAS,CAAA;EAAA,SAChC,kBAAA,CAAA,GAAsB,WAAA,EAAa,UAAA,CAAW,CAAA;AAAA"}
|
package/dist/API.mjs
ADDED
package/dist/API.mjs.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"API.mjs","names":[],"sources":["../src/API.ts"],"sourcesContent":["import type { Middleware } from \"./Middleware\";\n\nexport abstract class API<T, E, M = T> {\n public readonly middleware: Middleware<M>[] = [];\n constructor(...middleware: Middleware<M>[]) {\n this.registerMiddleware(...middleware);\n }\n\n public abstract getState(): T;\n public abstract subscribe(subscriber: (payload: E) => void): () => void;\n public abstract registerMiddleware(...middlewares: Middleware<M>[]): void;\n}\n"],"mappings":";AAEA,IAAsB,MAAtB,MAAuC;CACrC,aAA8C,EAAE;CAChD,YAAY,GAAG,YAA6B;AAC1C,OAAK,mBAAmB,GAAG,WAAW"}
|
package/dist/Galena.cjs
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
const require_API = require("./API.cjs");
|
|
1
2
|
let _figliolia_event_emitter = require("@figliolia/event-emitter");
|
|
2
3
|
//#region src/Galena.ts
|
|
3
4
|
/**
|
|
@@ -20,20 +21,37 @@ let _figliolia_event_emitter = require("@figliolia/event-emitter");
|
|
|
20
21
|
* }, ...middleware);
|
|
21
22
|
*
|
|
22
23
|
* // to retreive and work with an individual unit
|
|
23
|
-
* const
|
|
24
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
24
25
|
*
|
|
25
26
|
* // to run a callback anytime a unit of state changes
|
|
26
27
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
27
28
|
* // do something with the `State` instance that updated
|
|
28
29
|
* // the entirety of your state
|
|
29
30
|
* });
|
|
31
|
+
*
|
|
32
|
+
* // get the current application state
|
|
33
|
+
* const currentState = AppState.getState();
|
|
34
|
+
*
|
|
35
|
+
* // operate on an instance of state
|
|
36
|
+
* AppState.update("user", userState => ({
|
|
37
|
+
* ...userState,
|
|
38
|
+
* // your updates
|
|
39
|
+
* }));
|
|
30
40
|
* ```
|
|
31
41
|
*/
|
|
32
|
-
var Galena = class {
|
|
42
|
+
var Galena = class extends require_API.API {
|
|
33
43
|
Emitter = new _figliolia_event_emitter.EventEmitter();
|
|
34
44
|
constructor(state, ...middleware) {
|
|
45
|
+
super(...middleware);
|
|
35
46
|
this.state = state;
|
|
36
|
-
|
|
47
|
+
}
|
|
48
|
+
getState() {
|
|
49
|
+
const result = {};
|
|
50
|
+
for (const key in this.state) {
|
|
51
|
+
const state = key;
|
|
52
|
+
result[state] = this.state[key].getState();
|
|
53
|
+
}
|
|
54
|
+
return result;
|
|
37
55
|
}
|
|
38
56
|
/**
|
|
39
57
|
* Get
|
|
@@ -116,13 +134,22 @@ var Galena = class {
|
|
|
116
134
|
* }, ...middleware);
|
|
117
135
|
*
|
|
118
136
|
* // to retreive and work with an individual unit
|
|
119
|
-
* const
|
|
137
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
120
138
|
*
|
|
121
139
|
* // to run a callback anytime a unit of state changes
|
|
122
140
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
123
141
|
* // do something with the `State` instance that updated
|
|
124
142
|
* // the entirety of your state
|
|
125
143
|
* });
|
|
144
|
+
*
|
|
145
|
+
* // get the current application state
|
|
146
|
+
* const currentState = AppState.getState();
|
|
147
|
+
*
|
|
148
|
+
* // operate on an instance of state
|
|
149
|
+
* AppState.update("user", userState => ({
|
|
150
|
+
* ...userState,
|
|
151
|
+
* // your updates
|
|
152
|
+
* }));
|
|
126
153
|
* ```
|
|
127
154
|
*/
|
|
128
155
|
const createGalena = (...args) => {
|
package/dist/Galena.d.cts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { AppSubscriber, Setter, StateType, StateTypes } from "./types.cjs";
|
|
1
|
+
import { AppSubscriber, GalenaSnapshot, GalenaState, Setter, StateType, StateTypes } from "./types.cjs";
|
|
2
2
|
import { State } from "./State.cjs";
|
|
3
3
|
import { Middleware } from "./Middleware.cjs";
|
|
4
|
+
import { API } from "./API.cjs";
|
|
4
5
|
|
|
5
6
|
//#region src/Galena.d.ts
|
|
6
7
|
/**
|
|
@@ -23,19 +24,29 @@ import { Middleware } from "./Middleware.cjs";
|
|
|
23
24
|
* }, ...middleware);
|
|
24
25
|
*
|
|
25
26
|
* // to retreive and work with an individual unit
|
|
26
|
-
* const
|
|
27
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
27
28
|
*
|
|
28
29
|
* // to run a callback anytime a unit of state changes
|
|
29
30
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
30
31
|
* // do something with the `State` instance that updated
|
|
31
32
|
* // the entirety of your state
|
|
32
33
|
* });
|
|
34
|
+
*
|
|
35
|
+
* // get the current application state
|
|
36
|
+
* const currentState = AppState.getState();
|
|
37
|
+
*
|
|
38
|
+
* // operate on an instance of state
|
|
39
|
+
* AppState.update("user", userState => ({
|
|
40
|
+
* ...userState,
|
|
41
|
+
* // your updates
|
|
42
|
+
* }));
|
|
33
43
|
* ```
|
|
34
44
|
*/
|
|
35
|
-
declare class Galena<T extends Record<string, State<any>>> {
|
|
45
|
+
declare class Galena<T extends Record<string, State<any>>> extends API<GalenaState<T>, GalenaSnapshot<T>, StateTypes<T>> {
|
|
36
46
|
readonly state: T;
|
|
37
47
|
private Emitter;
|
|
38
48
|
constructor(state: T, ...middleware: Middleware<StateTypes<T>>[]);
|
|
49
|
+
getState(): GalenaState<T>;
|
|
39
50
|
/**
|
|
40
51
|
* Get
|
|
41
52
|
*
|
|
@@ -92,13 +103,22 @@ declare class Galena<T extends Record<string, State<any>>> {
|
|
|
92
103
|
* }, ...middleware);
|
|
93
104
|
*
|
|
94
105
|
* // to retreive and work with an individual unit
|
|
95
|
-
* const
|
|
106
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
96
107
|
*
|
|
97
108
|
* // to run a callback anytime a unit of state changes
|
|
98
109
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
99
110
|
* // do something with the `State` instance that updated
|
|
100
111
|
* // the entirety of your state
|
|
101
112
|
* });
|
|
113
|
+
*
|
|
114
|
+
* // get the current application state
|
|
115
|
+
* const currentState = AppState.getState();
|
|
116
|
+
*
|
|
117
|
+
* // operate on an instance of state
|
|
118
|
+
* AppState.update("user", userState => ({
|
|
119
|
+
* ...userState,
|
|
120
|
+
* // your updates
|
|
121
|
+
* }));
|
|
102
122
|
* ```
|
|
103
123
|
*/
|
|
104
124
|
declare const createGalena: <T extends Record<string, State<any>>>(...args: ConstructorParameters<typeof Galena<T>>) => Galena<T>;
|
package/dist/Galena.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Galena.d.cts","names":[],"sources":["../src/Galena.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Galena.d.cts","names":[],"sources":["../src/Galena.ts"],"mappings":";;;;;;;;AAmDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,MAAA,WAAiB,MAAA,SAAe,KAAA,gBAAqB,GAAA,CAChE,WAAA,CAAY,CAAA,GACZ,cAAA,CAAe,CAAA,GACf,UAAA,CAAW,CAAA;EAAA,SAIO,KAAA,EAAO,CAAA;EAAA,QAFjB,OAAA;cAEU,KAAA,EAAO,CAAA,KACpB,UAAA,EAAY,UAAA,CAAW,UAAA,CAAW,CAAA;EAKhC,QAAA,CAAA,GAAQ,WAAA,CAAA,CAAA;EAbiD;;;;;EA2BzD,GAAA,WAAc,OAAA,OAAc,CAAA,UAAA,CAAY,GAAA,EAAK,CAAA,GAAC,CAAA,CAAA,CAAA;EA3BW;;;;;EAoCzD,GAAA,WAAc,OAAA,OAAc,CAAA,UAAA,CACjC,GAAA,EAAK,CAAA,EACL,KAAA,EAAO,SAAA,CAAU,CAAA,CAAE,CAAA;EAnCV;;;;;EA6CJ,MAAA,WAAiB,OAAA,OAAc,CAAA,UAAA,CACpC,GAAA,EAAK,CAAA,EACL,OAAA,EAAS,MAAA,CAAO,SAAA,CAAU,CAAA,CAAE,CAAA;EA3CZ;;;;;;;;EAwDX,SAAA,GAAa,UAAA,EAAY,aAAA,CAAc,CAAA;EApCnC;;;;;;EAgEJ,kBAAA,CAAA,GAAsB,WAAA,EAAa,UAAA,CAAW,UAAA,CAAW,CAAA;EAAA,QAMxD,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CV;;;;;;;cAAa,YAAA,aAA0B,MAAA,SAAe,KAAA,WACjD,IAAA,EAAM,qBAAA,QAA6B,MAAA,CAAO,CAAA,OAAG,MAAA,CAAA,CAAA"}
|
package/dist/Galena.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { AppSubscriber, Setter, StateType, StateTypes } from "./types.mjs";
|
|
1
|
+
import { AppSubscriber, GalenaSnapshot, GalenaState, Setter, StateType, StateTypes } from "./types.mjs";
|
|
2
2
|
import { State } from "./State.mjs";
|
|
3
3
|
import { Middleware } from "./Middleware.mjs";
|
|
4
|
+
import { API } from "./API.mjs";
|
|
4
5
|
|
|
5
6
|
//#region src/Galena.d.ts
|
|
6
7
|
/**
|
|
@@ -23,19 +24,29 @@ import { Middleware } from "./Middleware.mjs";
|
|
|
23
24
|
* }, ...middleware);
|
|
24
25
|
*
|
|
25
26
|
* // to retreive and work with an individual unit
|
|
26
|
-
* const
|
|
27
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
27
28
|
*
|
|
28
29
|
* // to run a callback anytime a unit of state changes
|
|
29
30
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
30
31
|
* // do something with the `State` instance that updated
|
|
31
32
|
* // the entirety of your state
|
|
32
33
|
* });
|
|
34
|
+
*
|
|
35
|
+
* // get the current application state
|
|
36
|
+
* const currentState = AppState.getState();
|
|
37
|
+
*
|
|
38
|
+
* // operate on an instance of state
|
|
39
|
+
* AppState.update("user", userState => ({
|
|
40
|
+
* ...userState,
|
|
41
|
+
* // your updates
|
|
42
|
+
* }));
|
|
33
43
|
* ```
|
|
34
44
|
*/
|
|
35
|
-
declare class Galena<T extends Record<string, State<any>>> {
|
|
45
|
+
declare class Galena<T extends Record<string, State<any>>> extends API<GalenaState<T>, GalenaSnapshot<T>, StateTypes<T>> {
|
|
36
46
|
readonly state: T;
|
|
37
47
|
private Emitter;
|
|
38
48
|
constructor(state: T, ...middleware: Middleware<StateTypes<T>>[]);
|
|
49
|
+
getState(): GalenaState<T>;
|
|
39
50
|
/**
|
|
40
51
|
* Get
|
|
41
52
|
*
|
|
@@ -92,13 +103,22 @@ declare class Galena<T extends Record<string, State<any>>> {
|
|
|
92
103
|
* }, ...middleware);
|
|
93
104
|
*
|
|
94
105
|
* // to retreive and work with an individual unit
|
|
95
|
-
* const
|
|
106
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
96
107
|
*
|
|
97
108
|
* // to run a callback anytime a unit of state changes
|
|
98
109
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
99
110
|
* // do something with the `State` instance that updated
|
|
100
111
|
* // the entirety of your state
|
|
101
112
|
* });
|
|
113
|
+
*
|
|
114
|
+
* // get the current application state
|
|
115
|
+
* const currentState = AppState.getState();
|
|
116
|
+
*
|
|
117
|
+
* // operate on an instance of state
|
|
118
|
+
* AppState.update("user", userState => ({
|
|
119
|
+
* ...userState,
|
|
120
|
+
* // your updates
|
|
121
|
+
* }));
|
|
102
122
|
* ```
|
|
103
123
|
*/
|
|
104
124
|
declare const createGalena: <T extends Record<string, State<any>>>(...args: ConstructorParameters<typeof Galena<T>>) => Galena<T>;
|
package/dist/Galena.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Galena.d.mts","names":[],"sources":["../src/Galena.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Galena.d.mts","names":[],"sources":["../src/Galena.ts"],"mappings":";;;;;;;;AAmDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,MAAA,WAAiB,MAAA,SAAe,KAAA,gBAAqB,GAAA,CAChE,WAAA,CAAY,CAAA,GACZ,cAAA,CAAe,CAAA,GACf,UAAA,CAAW,CAAA;EAAA,SAIO,KAAA,EAAO,CAAA;EAAA,QAFjB,OAAA;cAEU,KAAA,EAAO,CAAA,KACpB,UAAA,EAAY,UAAA,CAAW,UAAA,CAAW,CAAA;EAKhC,QAAA,CAAA,GAAQ,WAAA,CAAA,CAAA;EAbiD;;;;;EA2BzD,GAAA,WAAc,OAAA,OAAc,CAAA,UAAA,CAAY,GAAA,EAAK,CAAA,GAAC,CAAA,CAAA,CAAA;EA3BW;;;;;EAoCzD,GAAA,WAAc,OAAA,OAAc,CAAA,UAAA,CACjC,GAAA,EAAK,CAAA,EACL,KAAA,EAAO,SAAA,CAAU,CAAA,CAAE,CAAA;EAnCV;;;;;EA6CJ,MAAA,WAAiB,OAAA,OAAc,CAAA,UAAA,CACpC,GAAA,EAAK,CAAA,EACL,OAAA,EAAS,MAAA,CAAO,SAAA,CAAU,CAAA,CAAE,CAAA;EA3CZ;;;;;;;;EAwDX,SAAA,GAAa,UAAA,EAAY,aAAA,CAAc,CAAA;EApCnC;;;;;;EAgEJ,kBAAA,CAAA,GAAsB,WAAA,EAAa,UAAA,CAAW,UAAA,CAAW,CAAA;EAAA,QAMxD,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CV;;;;;;;cAAa,YAAA,aAA0B,MAAA,SAAe,KAAA,WACjD,IAAA,EAAM,qBAAA,QAA6B,MAAA,CAAO,CAAA,OAAG,MAAA,CAAA,CAAA"}
|
package/dist/Galena.mjs
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { API } from "./API.mjs";
|
|
1
2
|
import { EventEmitter } from "@figliolia/event-emitter";
|
|
2
3
|
//#region src/Galena.ts
|
|
3
4
|
/**
|
|
@@ -20,20 +21,37 @@ import { EventEmitter } from "@figliolia/event-emitter";
|
|
|
20
21
|
* }, ...middleware);
|
|
21
22
|
*
|
|
22
23
|
* // to retreive and work with an individual unit
|
|
23
|
-
* const
|
|
24
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
24
25
|
*
|
|
25
26
|
* // to run a callback anytime a unit of state changes
|
|
26
27
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
27
28
|
* // do something with the `State` instance that updated
|
|
28
29
|
* // the entirety of your state
|
|
29
30
|
* });
|
|
31
|
+
*
|
|
32
|
+
* // get the current application state
|
|
33
|
+
* const currentState = AppState.getState();
|
|
34
|
+
*
|
|
35
|
+
* // operate on an instance of state
|
|
36
|
+
* AppState.update("user", userState => ({
|
|
37
|
+
* ...userState,
|
|
38
|
+
* // your updates
|
|
39
|
+
* }));
|
|
30
40
|
* ```
|
|
31
41
|
*/
|
|
32
|
-
var Galena = class {
|
|
42
|
+
var Galena = class extends API {
|
|
33
43
|
Emitter = new EventEmitter();
|
|
34
44
|
constructor(state, ...middleware) {
|
|
45
|
+
super(...middleware);
|
|
35
46
|
this.state = state;
|
|
36
|
-
|
|
47
|
+
}
|
|
48
|
+
getState() {
|
|
49
|
+
const result = {};
|
|
50
|
+
for (const key in this.state) {
|
|
51
|
+
const state = key;
|
|
52
|
+
result[state] = this.state[key].getState();
|
|
53
|
+
}
|
|
54
|
+
return result;
|
|
37
55
|
}
|
|
38
56
|
/**
|
|
39
57
|
* Get
|
|
@@ -116,13 +134,22 @@ var Galena = class {
|
|
|
116
134
|
* }, ...middleware);
|
|
117
135
|
*
|
|
118
136
|
* // to retreive and work with an individual unit
|
|
119
|
-
* const
|
|
137
|
+
* const userState = AppState.get("user"); // Returns State<T>
|
|
120
138
|
*
|
|
121
139
|
* // to run a callback anytime a unit of state changes
|
|
122
140
|
* const listener = AppState.subscribe(({ state, updated }) => {
|
|
123
141
|
* // do something with the `State` instance that updated
|
|
124
142
|
* // the entirety of your state
|
|
125
143
|
* });
|
|
144
|
+
*
|
|
145
|
+
* // get the current application state
|
|
146
|
+
* const currentState = AppState.getState();
|
|
147
|
+
*
|
|
148
|
+
* // operate on an instance of state
|
|
149
|
+
* AppState.update("user", userState => ({
|
|
150
|
+
* ...userState,
|
|
151
|
+
* // your updates
|
|
152
|
+
* }));
|
|
126
153
|
* ```
|
|
127
154
|
*/
|
|
128
155
|
const createGalena = (...args) => {
|
package/dist/Galena.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Galena.mjs","names":[],"sources":["../src/Galena.ts"],"sourcesContent":["import { EventEmitter } from \"@figliolia/event-emitter\";\nimport type { Middleware } from \"./Middleware\";\nimport type { State } from \"./State\";\nimport type {\n AppSubscriber,\n GalenaSnapshot,\n Setter,\n StateType,\n StateTypes,\n} from \"./types\";\n\n/**\n * ### Galena\n *\n * Galena instances are designed to house one or more units of `State`\n * and exist as a pseudo global application state.\n *\n * By design, each of its `State` units have isolated reactivity\n * that prevents entire state trees from updating when a single\n * unit changes.\n *\n * ```typescript\n * import { Galena } from \"@figliolia/galena\";\n *\n * const AppState = new Galena({\n * user: new State(\"<user-stuff>\"),\n * business: new State(\"<business-logic-stuff>\")\n * // your reactive instances\n * }, ...middleware);\n *\n * // to retreive and work with an individual unit\n * const
|
|
1
|
+
{"version":3,"file":"Galena.mjs","names":[],"sources":["../src/Galena.ts"],"sourcesContent":["import { EventEmitter } from \"@figliolia/event-emitter\";\nimport { API } from \"./API\";\nimport type { Middleware } from \"./Middleware\";\nimport type { State } from \"./State\";\nimport type {\n AppSubscriber,\n GalenaSnapshot,\n GalenaState,\n Setter,\n StateType,\n StateTypes,\n} from \"./types\";\n\n/**\n * ### Galena\n *\n * Galena instances are designed to house one or more units of `State`\n * and exist as a pseudo global application state.\n *\n * By design, each of its `State` units have isolated reactivity\n * that prevents entire state trees from updating when a single\n * unit changes.\n *\n * ```typescript\n * import { Galena } from \"@figliolia/galena\";\n *\n * const AppState = new Galena({\n * user: new State(\"<user-stuff>\"),\n * business: new State(\"<business-logic-stuff>\")\n * // your reactive instances\n * }, ...middleware);\n *\n * // to retreive and work with an individual unit\n * const userState = AppState.get(\"user\"); // Returns State<T>\n *\n * // to run a callback anytime a unit of state changes\n * const listener = AppState.subscribe(({ state, updated }) => {\n * // do something with the `State` instance that updated\n * // the entirety of your state\n * });\n *\n * // get the current application state\n * const currentState = AppState.getState();\n *\n * // operate on an instance of state\n * AppState.update(\"user\", userState => ({\n * ...userState,\n * // your updates\n * }));\n * ```\n */\nexport class Galena<T extends Record<string, State<any>>> extends API<\n GalenaState<T>,\n GalenaSnapshot<T>,\n StateTypes<T>\n> {\n private Emitter = new EventEmitter<{ change: GalenaSnapshot<T> }>();\n constructor(\n public readonly state: T,\n ...middleware: Middleware<StateTypes<T>>[]\n ) {\n super(...middleware);\n }\n\n public getState() {\n const result = {} as GalenaState<T>;\n for (const key in this.state) {\n const state = key as keyof T;\n result[state] = this.state[key].getState();\n }\n return result;\n }\n\n /**\n * Get\n *\n * Returns a connected State instance by key\n */\n public get<K extends Extract<keyof T, string>>(key: K) {\n return this.state[key];\n }\n\n /**\n * Set\n *\n * Sets a connected State instance's state by key\n */\n public set<K extends Extract<keyof T, string>>(\n key: K,\n value: StateType<T[K]>,\n ) {\n return this.get(key).set(value);\n }\n\n /**\n * Update\n *\n * Invokes a connected State instance's update method key\n */\n public update<K extends Extract<keyof T, string>>(\n key: K,\n updater: Setter<StateType<T[K]>>,\n ) {\n return this.get(key).update(updater);\n }\n\n /**\n * Subscribe\n *\n * Listen for changes on your Galena instnace. Your provided\n * callback will be invoked each time an attached state instance\n * changes. To your callback will be provided the `updated` state\n * instance, along with the entire `state` tree\n */\n public subscribe = (subscriber: AppSubscriber<T>) => {\n const ID = this.Emitter.on(\"change\", subscriber);\n const unsubscribers: (() => void)[] = [];\n for (const key in this.state) {\n const instance = this.state[key];\n if (!instance) {\n continue;\n }\n unsubscribers.push(\n instance.subscribe(() =>\n this.emit({ state: this.state, updated: instance }),\n ),\n );\n }\n return () => {\n this.Emitter.off(\"change\", ID);\n while (unsubscribers.length) {\n unsubscribers.pop?.()?.();\n }\n };\n };\n\n /**\n * Register Middleware\n *\n * Adds middleware instances to each of the connected\n * `State` instances\n */\n public registerMiddleware(...middlewares: Middleware<StateTypes<T>>[]) {\n for (const key in this.state) {\n this.state[key]?.registerMiddleware?.(...middlewares);\n }\n }\n\n private emit<K extends Extract<keyof T, string>>(\n event: GalenaSnapshot<T, K>,\n ) {\n this.Emitter.emit(\"change\", event);\n }\n}\n\n/**\n * ### createGalena\n *\n * Galena instances are designed to house one or more units of `State`\n * and exist as a pseudo global application state.\n *\n * By design, each of its `State` units have isolated reactivity\n * that prevents entire state trees from updating when a single\n * unit changes.\n *\n * ```typescript\n * import { Galena } from \"@figliolia/galena\";\n *\n * const AppState = new Galena({\n * user: new State(\"<user-stuff>\"),\n * business: new State(\"<business-logic-stuff>\")\n * // your reactive instances\n * }, ...middleware);\n *\n * // to retreive and work with an individual unit\n * const userState = AppState.get(\"user\"); // Returns State<T>\n *\n * // to run a callback anytime a unit of state changes\n * const listener = AppState.subscribe(({ state, updated }) => {\n * // do something with the `State` instance that updated\n * // the entirety of your state\n * });\n *\n * // get the current application state\n * const currentState = AppState.getState();\n *\n * // operate on an instance of state\n * AppState.update(\"user\", userState => ({\n * ...userState,\n * // your updates\n * }));\n * ```\n */\nexport const createGalena = <T extends Record<string, State<any>>>(\n ...args: ConstructorParameters<typeof Galena<T>>\n) => {\n return new Galena(...args);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAa,SAAb,cAAkE,IAIhE;CACA,UAAkB,IAAI,cAA6C;CACnE,YACE,OACA,GAAG,YACH;AACA,QAAM,GAAG,WAAW;AAHJ,OAAA,QAAA;;CAMlB,WAAkB;EAChB,MAAM,SAAS,EAAE;AACjB,OAAK,MAAM,OAAO,KAAK,OAAO;GAC5B,MAAM,QAAQ;AACd,UAAO,SAAS,KAAK,MAAM,KAAK,UAAU;;AAE5C,SAAO;;;;;;;CAQT,IAA+C,KAAQ;AACrD,SAAO,KAAK,MAAM;;;;;;;CAQpB,IACE,KACA,OACA;AACA,SAAO,KAAK,IAAI,IAAI,CAAC,IAAI,MAAM;;;;;;;CAQjC,OACE,KACA,SACA;AACA,SAAO,KAAK,IAAI,IAAI,CAAC,OAAO,QAAQ;;;;;;;;;;CAWtC,aAAoB,eAAiC;EACnD,MAAM,KAAK,KAAK,QAAQ,GAAG,UAAU,WAAW;EAChD,MAAM,gBAAgC,EAAE;AACxC,OAAK,MAAM,OAAO,KAAK,OAAO;GAC5B,MAAM,WAAW,KAAK,MAAM;AAC5B,OAAI,CAAC,SACH;AAEF,iBAAc,KACZ,SAAS,gBACP,KAAK,KAAK;IAAE,OAAO,KAAK;IAAO,SAAS;IAAU,CAAC,CACpD,CACF;;AAEH,eAAa;AACX,QAAK,QAAQ,IAAI,UAAU,GAAG;AAC9B,UAAO,cAAc,OACnB,eAAc,OAAO,IAAI;;;;;;;;;CAW/B,mBAA0B,GAAG,aAA0C;AACrE,OAAK,MAAM,OAAO,KAAK,MACrB,MAAK,MAAM,MAAM,qBAAqB,GAAG,YAAY;;CAIzD,KACE,OACA;AACA,OAAK,QAAQ,KAAK,UAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CtC,MAAa,gBACX,GAAG,SACA;AACH,QAAO,IAAI,OAAO,GAAG,KAAK"}
|
package/dist/Logger.cjs
CHANGED
|
@@ -20,12 +20,12 @@ const require_Middleware = require("./Middleware.cjs");
|
|
|
20
20
|
var Logger = class extends require_Middleware.Middleware {
|
|
21
21
|
previousState = null;
|
|
22
22
|
onBeforeUpdate(state) {
|
|
23
|
-
this.previousState = state.
|
|
23
|
+
this.previousState = state.getState();
|
|
24
24
|
}
|
|
25
25
|
onUpdate(state) {
|
|
26
26
|
console.log("%cMutation:", "color: rgb(187, 186, 186); font-weight: bold", "@", this.time);
|
|
27
27
|
console.log(" %cPrevious State", "color: #26ad65; font-weight: bold", this.previousState);
|
|
28
|
-
console.log(" %cNext State ", "color: rgb(17, 118, 249); font-weight: bold", state.
|
|
28
|
+
console.log(" %cNext State ", "color: rgb(17, 118, 249); font-weight: bold", state.getState());
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* Time
|
package/dist/Logger.mjs
CHANGED
|
@@ -20,12 +20,12 @@ import { Middleware } from "./Middleware.mjs";
|
|
|
20
20
|
var Logger = class extends Middleware {
|
|
21
21
|
previousState = null;
|
|
22
22
|
onBeforeUpdate(state) {
|
|
23
|
-
this.previousState = state.
|
|
23
|
+
this.previousState = state.getState();
|
|
24
24
|
}
|
|
25
25
|
onUpdate(state) {
|
|
26
26
|
console.log("%cMutation:", "color: rgb(187, 186, 186); font-weight: bold", "@", this.time);
|
|
27
27
|
console.log(" %cPrevious State", "color: #26ad65; font-weight: bold", this.previousState);
|
|
28
|
-
console.log(" %cNext State ", "color: rgb(17, 118, 249); font-weight: bold", state.
|
|
28
|
+
console.log(" %cNext State ", "color: rgb(17, 118, 249); font-weight: bold", state.getState());
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* Time
|
package/dist/Logger.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logger.mjs","names":[],"sources":["../src/Logger.ts"],"sourcesContent":["import { Middleware } from \"./Middleware\";\nimport type { State } from \"./State\";\n\n/**\n * Logger\n *\n * A middleware for Redux-style logging! Each state transition\n * will log to the console the `State` instance that changed\n * along with a before and after snapshot of the current state:\n *\n * ```typescript\n * const AppState = new Galena({}, new Logger());\n * // or\n * AppState.registerMiddlerware(new Logger());\n * // or\n * const MyState = new State(4, new Logger());\n * // or\n * MyState.registerMiddleware(new Logger());\n * ```\n */\nexport class Logger<T = any> extends Middleware {\n private previousState: T | null = null;\n\n override onBeforeUpdate(state: State<T>) {\n this.previousState = state.
|
|
1
|
+
{"version":3,"file":"Logger.mjs","names":[],"sources":["../src/Logger.ts"],"sourcesContent":["import { Middleware } from \"./Middleware\";\nimport type { State } from \"./State\";\n\n/**\n * Logger\n *\n * A middleware for Redux-style logging! Each state transition\n * will log to the console the `State` instance that changed\n * along with a before and after snapshot of the current state:\n *\n * ```typescript\n * const AppState = new Galena({}, new Logger());\n * // or\n * AppState.registerMiddlerware(new Logger());\n * // or\n * const MyState = new State(4, new Logger());\n * // or\n * MyState.registerMiddleware(new Logger());\n * ```\n */\nexport class Logger<T = any> extends Middleware {\n private previousState: T | null = null;\n\n override onBeforeUpdate(state: State<T>) {\n this.previousState = state.getState();\n }\n\n override onUpdate(state: State<T>) {\n console.log(\n \"%cMutation:\",\n \"color: rgb(187, 186, 186); font-weight: bold\",\n \"@\",\n this.time,\n );\n console.log(\n \" %cPrevious State\",\n \"color: #26ad65; font-weight: bold\",\n this.previousState,\n );\n console.log(\n \" %cNext State \",\n \"color: rgb(17, 118, 249); font-weight: bold\",\n state.getState(),\n );\n }\n\n /**\n * Time\n *\n * Returns the time in which a given state transition completed\n */\n private get time() {\n const date = new Date();\n const mHours = date.getHours();\n const hours = mHours > 12 ? mHours - 12 : mHours;\n const mins = date.getMinutes();\n const minutes = mins.toString().length === 1 ? `0${mins}` : mins;\n const secs = date.getSeconds();\n const seconds = secs.toString().length === 1 ? `0${secs}` : secs;\n const milliseconds = date.getMilliseconds();\n return `${hours}:${minutes}:${seconds}:${milliseconds}`;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAa,SAAb,cAAqC,WAAW;CAC9C,gBAAkC;CAElC,eAAwB,OAAiB;AACvC,OAAK,gBAAgB,MAAM,UAAU;;CAGvC,SAAkB,OAAiB;AACjC,UAAQ,IACN,eACA,gDACA,KACA,KAAK,KACN;AACD,UAAQ,IACN,uBACA,qCACA,KAAK,cACN;AACD,UAAQ,IACN,uBACA,+CACA,MAAM,UAAU,CACjB;;;;;;;CAQH,IAAY,OAAO;EACjB,MAAM,uBAAO,IAAI,MAAM;EACvB,MAAM,SAAS,KAAK,UAAU;EAC9B,MAAM,QAAQ,SAAS,KAAK,SAAS,KAAK;EAC1C,MAAM,OAAO,KAAK,YAAY;EAC9B,MAAM,UAAU,KAAK,UAAU,CAAC,WAAW,IAAI,IAAI,SAAS;EAC5D,MAAM,OAAO,KAAK,YAAY;AAG9B,SAAO,GAAG,MAAM,GAAG,QAAQ,GAFX,KAAK,UAAU,CAAC,WAAW,IAAI,IAAI,SAAS,KAEtB,GADjB,KAAK,iBAAiB"}
|
package/dist/Middleware.cjs
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
*
|
|
19
19
|
* public override onBeforeUpdate(state: State<T>) {
|
|
20
20
|
* this.startTime = performance.now();
|
|
21
|
-
* this.previousState = state.
|
|
21
|
+
* this.previousState = state.getState();
|
|
22
22
|
* }
|
|
23
23
|
*
|
|
24
24
|
* public override onUpdate(state: T) {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
* if(diff >= this.threshold) {
|
|
27
27
|
* console.warn(`A slow state transition was detected when transitioning the following piece of state`);
|
|
28
28
|
* console.log('Previous state', this.previousState);
|
|
29
|
-
* console.log('Current state', state.
|
|
29
|
+
* console.log('Current state', state.getState());
|
|
30
30
|
* }
|
|
31
31
|
* }
|
|
32
32
|
* }
|
package/dist/Middleware.d.cts
CHANGED
|
@@ -20,7 +20,7 @@ import { State } from "./State.cjs";
|
|
|
20
20
|
*
|
|
21
21
|
* public override onBeforeUpdate(state: State<T>) {
|
|
22
22
|
* this.startTime = performance.now();
|
|
23
|
-
* this.previousState = state.
|
|
23
|
+
* this.previousState = state.getState();
|
|
24
24
|
* }
|
|
25
25
|
*
|
|
26
26
|
* public override onUpdate(state: T) {
|
|
@@ -28,7 +28,7 @@ import { State } from "./State.cjs";
|
|
|
28
28
|
* if(diff >= this.threshold) {
|
|
29
29
|
* console.warn(`A slow state transition was detected when transitioning the following piece of state`);
|
|
30
30
|
* console.log('Previous state', this.previousState);
|
|
31
|
-
* console.log('Current state', state.
|
|
31
|
+
* console.log('Current state', state.getState());
|
|
32
32
|
* }
|
|
33
33
|
* }
|
|
34
34
|
* }
|
package/dist/Middleware.d.mts
CHANGED
|
@@ -20,7 +20,7 @@ import { State } from "./State.mjs";
|
|
|
20
20
|
*
|
|
21
21
|
* public override onBeforeUpdate(state: State<T>) {
|
|
22
22
|
* this.startTime = performance.now();
|
|
23
|
-
* this.previousState = state.
|
|
23
|
+
* this.previousState = state.getState();
|
|
24
24
|
* }
|
|
25
25
|
*
|
|
26
26
|
* public override onUpdate(state: T) {
|
|
@@ -28,7 +28,7 @@ import { State } from "./State.mjs";
|
|
|
28
28
|
* if(diff >= this.threshold) {
|
|
29
29
|
* console.warn(`A slow state transition was detected when transitioning the following piece of state`);
|
|
30
30
|
* console.log('Previous state', this.previousState);
|
|
31
|
-
* console.log('Current state', state.
|
|
31
|
+
* console.log('Current state', state.getState());
|
|
32
32
|
* }
|
|
33
33
|
* }
|
|
34
34
|
* }
|
package/dist/Middleware.mjs
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
*
|
|
19
19
|
* public override onBeforeUpdate(state: State<T>) {
|
|
20
20
|
* this.startTime = performance.now();
|
|
21
|
-
* this.previousState = state.
|
|
21
|
+
* this.previousState = state.getState();
|
|
22
22
|
* }
|
|
23
23
|
*
|
|
24
24
|
* public override onUpdate(state: T) {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
* if(diff >= this.threshold) {
|
|
27
27
|
* console.warn(`A slow state transition was detected when transitioning the following piece of state`);
|
|
28
28
|
* console.log('Previous state', this.previousState);
|
|
29
|
-
* console.log('Current state', state.
|
|
29
|
+
* console.log('Current state', state.getState());
|
|
30
30
|
* }
|
|
31
31
|
* }
|
|
32
32
|
* }
|
package/dist/Middleware.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Middleware.mjs","names":[],"sources":["../src/Middleware.ts"],"sourcesContent":["import type { State } from \"./State\";\n\n/**\n * Middleware\n *\n * Galena's middleware API is designed to provide hooks\n * for state changes that you can tap into to run your\n * own logic.\n *\n * Middleware is great for logging, analytics, and profiling:\n *\n * ```typescript\n * export class Profiler<T = any> extends Middleware<T> {\n * private previousState: T | null = null;\n * private startTime: null | number = null;\n * constructor(public readonly threshold: number = 16) {\n * super();\n * }\n *\n * public override onBeforeUpdate(state: State<T>) {\n * this.startTime = performance.now();\n * this.previousState = state.
|
|
1
|
+
{"version":3,"file":"Middleware.mjs","names":[],"sources":["../src/Middleware.ts"],"sourcesContent":["import type { State } from \"./State\";\n\n/**\n * Middleware\n *\n * Galena's middleware API is designed to provide hooks\n * for state changes that you can tap into to run your\n * own logic.\n *\n * Middleware is great for logging, analytics, and profiling:\n *\n * ```typescript\n * export class Profiler<T = any> extends Middleware<T> {\n * private previousState: T | null = null;\n * private startTime: null | number = null;\n * constructor(public readonly threshold: number = 16) {\n * super();\n * }\n *\n * public override onBeforeUpdate(state: State<T>) {\n * this.startTime = performance.now();\n * this.previousState = state.getState();\n * }\n *\n * public override onUpdate(state: T) {\n * const diff = performance.now() - this.startTime;\n * if(diff >= this.threshold) {\n * console.warn(`A slow state transition was detected when transitioning the following piece of state`);\n * console.log('Previous state', this.previousState);\n * console.log('Current state', state.getState());\n * }\n * }\n * }\n * ```\n *\n * To register your middleware, simply add it when constructing\n * a `State` or `Galena` instance.\n *\n * ```typescript\n * import { State } from \"@figliolia/galena\";\n * import { Profiler } from './myProfiler';\n *\n * const myState = new State(5, new Profiler());\n * ```\n */\nexport class Middleware<T = any> {\n /**\n * On Before Update\n *\n * Executes prior to a `State` instance being updated.\n * Receives the state prior to its update as a parameter\n */\n public onBeforeUpdate(_state: State<T>) {}\n\n /**\n * On Update\n *\n * Executes after a `State` instance has been update.\n * Receives the most recent state as a parameter\n */\n public onUpdate(_state: State<T>) {}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,aAAb,MAAiC;;;;;;;CAO/B,eAAsB,QAAkB;;;;;;;CAQxC,SAAgB,QAAkB"}
|
package/dist/Profiler.cjs
CHANGED
|
@@ -25,7 +25,7 @@ var Profiler = class extends require_Middleware.Middleware {
|
|
|
25
25
|
}
|
|
26
26
|
onBeforeUpdate(state) {
|
|
27
27
|
this.startTime = performance.now();
|
|
28
|
-
this.previousState = state.
|
|
28
|
+
this.previousState = state.getState();
|
|
29
29
|
}
|
|
30
30
|
onUpdate(state) {
|
|
31
31
|
if (this.startTime === null) return;
|
|
@@ -33,7 +33,7 @@ var Profiler = class extends require_Middleware.Middleware {
|
|
|
33
33
|
if (diff >= this.threshold) {
|
|
34
34
|
console.warn(`A slow state transition of ${diff.toFixed(1)}ms was detected when transitioning the following piece of state`);
|
|
35
35
|
console.log(" %cPrevious State", "color: #26ad65; font-weight: bold", this.previousState);
|
|
36
|
-
console.log(" %cCurrent State ", "color: rgb(17, 118, 249); font-weight: bold", state.
|
|
36
|
+
console.log(" %cCurrent State ", "color: rgb(17, 118, 249); font-weight: bold", state.getState());
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
};
|
package/dist/Profiler.mjs
CHANGED
|
@@ -25,7 +25,7 @@ var Profiler = class extends Middleware {
|
|
|
25
25
|
}
|
|
26
26
|
onBeforeUpdate(state) {
|
|
27
27
|
this.startTime = performance.now();
|
|
28
|
-
this.previousState = state.
|
|
28
|
+
this.previousState = state.getState();
|
|
29
29
|
}
|
|
30
30
|
onUpdate(state) {
|
|
31
31
|
if (this.startTime === null) return;
|
|
@@ -33,7 +33,7 @@ var Profiler = class extends Middleware {
|
|
|
33
33
|
if (diff >= this.threshold) {
|
|
34
34
|
console.warn(`A slow state transition of ${diff.toFixed(1)}ms was detected when transitioning the following piece of state`);
|
|
35
35
|
console.log(" %cPrevious State", "color: #26ad65; font-weight: bold", this.previousState);
|
|
36
|
-
console.log(" %cCurrent State ", "color: rgb(17, 118, 249); font-weight: bold", state.
|
|
36
|
+
console.log(" %cCurrent State ", "color: rgb(17, 118, 249); font-weight: bold", state.getState());
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
};
|