added more docs, changed trigger method name

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"typescript.tsdk": "./node_modules/typescript/lib",
 	"cSpell.ignoreWords": [

demo/store.ts

@@ -84,9 +84,9 @@ const createStore = (): Store => {
 		console.log("throttledSubmitEvent called");
 	});
 
-	debouncedSubmitEvent.trigger(submitted);
-	throttledSubmitEvent.trigger(submitted);
-	logEffectRunner.trigger(submitted);
+	debouncedSubmitEvent.on(submitted);
+	throttledSubmitEvent.on(submitted);
+	logEffectRunner.on(submitted);
 
 	resetEvent.subscribe(() => {
 		demoFormModule.reset();

docs/.vitepress/cache/deps/_metadata.json

@@ -1,23 +1,23 @@
 {
-  "hash": "d045bc4a",
-  "browserHash": "51a78d22",
+  "hash": "f9af5a9c",
+  "browserHash": "1765bf14",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "89eb42af",
+      "fileHash": "5ec59935",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "4e25a332",
+      "fileHash": "5c166a54",
       "needsInterop": false
     },
     "@theme/index": {
       "src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
       "file": "@theme_index.js",
-      "fileHash": "bf82decb",
+      "fileHash": "7f8b60bb",
       "needsInterop": false
     }
   },

docs/.vitepress/config.ts

@@ -13,10 +13,22 @@ export default defineConfig({
 			{
 				text: "Entities",
 				items: [
+					{
+						text: "AbstractEntity",
+						link: "/entities/abstract-entity",
+					},
 					{
 						text: "State",
 						link: "/entities/state",
 					},
+					{
+						text: "PersistState",
+						link: "/entities/persist-state",
+					},
+					{
+						text: "ComputedState",
+						link: "/entities/computed-state",
+					},
 				],
 			},
 			{

docs/entities/abstract-entity.md

@@ -0,0 +1,34 @@
+# AbstractEntity
+
+The base entity.
+You cannot create an instance of it, but every entity in `svitore` inherits its behavior
+
+## subscribe
+
+Subscribe to entity
+
+**Interface:**
+
+```ts
+subscribe(subscriber: (data: T) => void): () => void
+```
+
+## unsubscribe
+
+Unsubscribe from entity
+
+**Interface:**
+
+```ts
+unsubscribe(subscriber: ((data: T) => void) | Entity<any>): void
+```
+
+## release
+
+Remove all subscribers
+
+**Interface:**
+
+```ts
+release(): void
+```

docs/entities/computed-state.md

@@ -0,0 +1,3 @@
+# ComputedState
+
+Derived state entity

docs/entities/persist-state.md

@@ -0,0 +1,43 @@
+# PersistState
+
+Entity to store a state and save the value in the storage
+
+_Has the same api as [State](/entities/state)_
+
+## constructor
+
+```ts
+constructor(
+  state: T,
+  storageKey: string,
+  storage?: Storage, // globalThis.Storage
+): PersistState<T>
+```
+
+**Example:**
+
+```ts
+const $m = new SvitoreModule();
+
+const firstName = $m.PersistState(
+  "Alex",
+  "firstName",
+  globalThis.sessionStorage
+);
+```
+
+This code means to create a state with a default value of `"Alex"` and store the value in the storage by the key `"firstName"`
+
+::: info
+By default `localStorage` is used, but you can use any storage, including your own custom storage by implementing the `Storage` interface
+:::
+
+## clear
+
+Delete state from storage
+
+**Interface:**
+
+```ts
+clear(): void
+```

docs/entities/state.md

@@ -1,3 +1,133 @@
 # State
 
-## Description
+Entity to store the state
+
+_Has the same api as [AbstractEntity](/entities/abstract-entity)_
+
+## constructor
+
+```ts
+constructor(state: T): State<T>
+```
+
+## get
+
+Return current state
+
+**Interface:**
+
+```ts
+get(): T
+```
+
+**Example:**
+
+```ts
+const $m = new SvitoreModule();
+
+const counter = $m.State(0);
+
+counter.get(); // 0
+```
+
+## changeOn
+
+Method to change the state using an event
+
+**Interface:**
+
+```ts
+changeOn<Payload extends T>(event: Event<Payload>): this;
+```
+
+```ts
+changeOn<Payload>(
+  event: Event<Payload>,
+  selector: (payload: Payload, state: T, prevState: T) => T
+): this;
+```
+
+**Example:**
+
+```ts
+const $m = new SvitoreModule();
+
+const counter = $m.State(0);
+const counterChanged = $m.Event<number>();
+
+counter.changeOn(counterChanged);
+```
+
+You can use in several ways
+
+if the event type matches the state type - short form:
+
+```ts
+counter.changeOn(counterChanged);
+```
+
+if you want to transform the value
+
+```ts
+counter.changeOn(counterChanged, (payload) => payload * 10);
+```
+
+if you want to calculate a value based on the state
+
+```ts
+counter.changeOn(counterChanged, (payload, state) => state + payload);
+```
+
+## resetOn
+
+Reset state to default value
+
+**Interface:**
+
+```ts
+resetOn(event: Event<any>): this
+```
+
+**Example:**
+
+```ts
+const $m = new SvitoreModule();
+
+const counter = $m.State(5);
+const counterChanged = $m.Event<number>();
+const reset = $m.Event();
+
+counter.changeOn(counterChanged).resetOn(reset);
+
+counterChanged.dispatch(10);
+
+reset.dispatch();
+
+counter.get(); // 5
+```
+
+## getPrev
+
+Return prev state
+
+**Interface:**
+
+```ts
+getPrev(): T
+```
+
+**Example:**
+
+```ts
+const $m = new SvitoreModule();
+
+const counter = $m.State(0);
+const counterChanged = $m.Event<number>();
+
+counter.changeOn(counterChanged);
+
+counterChanged.dispatch(10);
+
+counter.getPrev(); // 0
+counter.get(); // 10
+```

docs/getting-started.md

@@ -135,12 +135,9 @@ This code means:
 Let's connect our entities.
 
 ```ts
-fetchGitHubUsersEffect.trigger(searchChanged);
+fetchGitHubUsersEffect.on(searchChanged);
 
-githubUsersUpdated.trigger(
-  fetchGitHubUsersEffect.fulfilled,
-  ({ result }) => result
-);
+githubUsersUpdated.on(fetchGitHubUsersEffect.fulfilled, ({ result }) => result);
 ```
 
 Our application is already functioning.
@@ -180,12 +177,9 @@ gitHubUsers.subscribe(console.log);
 gitHubUsers.changeOn(githubUsersUpdated);
 search.changeOn(searchChanged);
 
-fetchGitHubUsersEffect.trigger(searchChanged);
+fetchGitHubUsersEffect.on(searchChanged);
 
-githubUsersUpdated.trigger(
-  fetchGitHubUsersEffect.fulfilled,
-  ({ result }) => result
-);
+githubUsersUpdated.on(fetchGitHubUsersEffect.fulfilled, ({ result }) => result);
 ```
 
 The application works, but there are a few problems
@@ -211,13 +205,10 @@ const fetchGitHubUsersEffect = $module.Effect<string, GitHubUser[]>(
 gitHubUsers.changeOn(githubUsersUpdated);
 searchState.changeOn(searchChanged);
 
-requestSent.trigger(searchChanged); // [!code ++]
-fetchGitHubUsersEffect.trigger(requestSent); // [!code ++]
-fetchGitHubUsersEffect.trigger(searchChanged); // [!code --]
-githubUsersUpdated.trigger(
-  fetchGitHubUsersEffect.fulfilled,
-  ({ result }) => result
-);
+requestSent.on(searchChanged); // [!code ++]
+fetchGitHubUsersEffect.on(requestSent); // [!code ++]
+fetchGitHubUsersEffect.on(searchChanged); // [!code --]
+githubUsersUpdated.on(fetchGitHubUsersEffect.fulfilled, ({ result }) => result);
 ```
 
 Effect support auto-cancellation, which will help us cancel previous requests.
@@ -290,12 +281,9 @@ requestSent.applyMiddleware((context, next) => {
 gitHubUsers.changeOn(githubUsersUpdated);
 searchState.changeOn(searchChanged);
 
-requestSent.trigger(searchChanged);
-fetchGitHubUsersEffect.trigger(requestSent);
-githubUsersUpdated.trigger(
-  fetchGitHubUsersEffect.fulfilled,
-  ({ result }) => result
-);
+requestSent.on(searchChanged);
+fetchGitHubUsersEffect.on(requestSent);
+githubUsersUpdated.on(fetchGitHubUsersEffect.fulfilled, ({ result }) => result);
 
 searchChanged.dispatch("a");
 ```

docs/index.md

@@ -14,20 +14,6 @@ hero:
       link: https://github.com/vitlolik/svitore
 
 features:
-  - title: State
-    link: /state
-  - title: ComputedState
-    link: /computed-state
-  - title: Event
-    link: /event
-  - title: DebouncedEvent
-    link: /debounced-event
-  - title: ThrottledEvent
-    link: /throttled-event
-  - title: Effect
-    link: /effect
-  - title: Effect runner
-    link: /effect-runner
-  - title: Reaction
-    link: /reaction
+  - title: Entities
+    link: /entities/state
 ---

src/entities/computed-state.ts

@@ -11,13 +11,13 @@ class ComputedState<
 		const selector = args.pop() as SelectorCallback<States, T>;
 		const states = args as unknown as States;
 
-		const getStateData = (): T =>
+		const getState = (): T =>
 			selector(...(states.map((state) => state.get()) as any));
 
-		super(getStateData());
+		super(getState());
 
 		this.unsubscribes = states.map((state) =>
-			state.subscribe(() => this.notify(getStateData()))
+			state.subscribe(() => this.notify(getState()))
 		);
 	}