You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,7 +21,7 @@ citizens. The main features are:
21
21
If you are not familiar with the ACTION->REDUCER->STORE pattern and why is a good idea, have a look at the [Redux Docs](https://redux.js.org/introduction/core-concepts) where it is very well explained.
22
22
23
23
24
-
# Demo
24
+
# Demos
25
25
26
26
[Simple todo App demo](https://webcomponenthelpers.github.io/ImperaJS/demo/litDemo.html) made with **ImperaJs** and **Lit-Element**.
27
27
@@ -40,13 +40,13 @@ while a transition from one app state to another is implemented by **State-Trans
40
40
State-Variables and Transitions can be hooked to custom-elements, so that on StateVarible change, or on dispatch of a Transition, the custom-element
41
41
can apply its own UI-related changes.
42
42
43
-
###Install
43
+
## Install
44
44
45
45
```bash
46
46
npm i impera-js
47
47
```
48
48
49
-
###StateVariables
49
+
## StateVariables
50
50
A StateVariable hold the state of the App, its content can be a String, Object, Number and Boolean. Its **DEFAULT** value is passed at creation time and defines the type of the variable, the type cannot be changed later. A StateVariable is automatically stored in **localStorage**, if a value already exist it is automatically loaded. You can have a look at [a more complete example here](https://github.com/WebComponentHelpers/ImperaJS/blob/master/demo/Store.js).
51
51
52
52
```js
@@ -74,7 +74,7 @@ myProxy.txt = "modified todo"
74
74
The property **value** of a stateVariable returns a proxy to the content of the stateVariable, whenever it is set (directly or indirectly using Array.push for example) will run the callback for all watchers.
75
75
76
76
77
-
###StateTransitions
77
+
## StateTransitions
78
78
Transitions must be **Pure Functions**, they only compute a final state, they are defined by initial state and input data only, they reproduce always the same result for same inputs.
A global stateTransition is a global function that is meant to apply simultaneously an overall state change, this can be made of just one variable change or multiple stateVariables changes at the same time, so that the initial and final states are always well defined, it guarantees that UI updates are made at transition completion (final state) only.
123
123
124
-
###StateMixin
124
+
## StateMixin
125
125
The StateMixins are a way to attach custom-element callbacks to a stateVariable or a stateTransition in an easy way. The callbacks get attached and detached automatically when the custom-element is connected/disconnected from the DOM.
126
126
127
127
```js
@@ -160,7 +160,7 @@ class myTodo extends statesMixin([todos,removeTodo], HTMLElement){
160
160
```
161
161
For any **stateVariables** in the list a read-only property named as the stateVariable will be added to the element. Also an **applyTransition** method to dispatch the added transitions (either of a stateVariable or of a global stateTransition) will be added. Callbacks to react on stateVariable change needs to be overwritten by the user and have a predefiend naming scheme: **on_"stateVarName"\_update**. Callbacks to react to transitions are instead called **on_"stateTransitionName"**, in the latter case also the transition input data are passed.
162
162
163
-
###Usage with Lit-Element
163
+
## Usage with Lit-Element
164
164
165
165
The usage with Lit-Element is very similar to what shown above, with the exception that
166
166
each update of any stateVariable or dispatch of Transition will request a render of the element. You can have a look at [a more complete example here](https://github.com/WebComponentHelpers/ImperaJS/blob/master/demo/litWebComponents.js), while a demo can be found [here](https://webcomponenthelpers.github.io/ImperaJS/demo/litDemo.html).
0 commit comments