GitBook: [master] 2 pages modified

Author: christianalfoni

core/typescript.md

@@ -387,7 +387,41 @@ export const filterAwesome: <T extends { isAwesome: boolean }>() => Operator<T>
 
 That means this operator can handle any type that matches an **isAwesome** property, though will pass the original type through.
 
-## Statecharts
+## Statemachine
+
+Statemachines exposes a type called **Statemachine** which you will give a single type argument of what states it should manage:
+
+{% tabs %}
+{% tab title="overmind/state.ts" %}
+```typescript
+import { Statemachine, statemachine } from 'overmind'
+
+type Mode =
+  | 'unauthenticated'
+  | 'authenticating'
+  | 'authenticated'
+  | 'unauthenticating'
+
+type State = {
+  mode: Statemachine<Mode>
+}
+
+export const state: State = {
+  mode: statemachine<Mode>({
+    initial: 'unauthenticated',
+    states: {
+      unauthenticated: ['authenticating'],
+      authenticating: ['unauthenticated', 'authenticated'],
+      authenticated: ['unauthenticating'],
+      unauthenticating: ['unauthenticated', 'authenticated']
+    }
+  })
+}
+```
+{% endtab %}
+{% endtabs %}
+
+## Statechart
 
 To type a statechart you use the **Statechart** type:
 

quickstart.md

@@ -35,7 +35,7 @@ export const state = {
 ```
 {% endtab %}
 
-{% tab title="overmind/index.js" %}
+{% tab title="overmind/index.ts" %}
 ```typescript
 import { state } from './state'
 
@@ -44,20 +44,41 @@ export const config = {
 }
 ```
 {% endtab %}
+{% endtabs %}
 
-{% tab title="index.js" %}
-```typescript
-import { createOvermind } from 'overmind'
-import { config } from './overmind'
+And fire up your application in the browser or whatever environment your user interface is to be consumed in by the users.
+
+### VS Code
+
+For the best experience you should install the [OVERMIND DEVTOOLS](https://marketplace.visualstudio.com/items?itemName=christianalfoni.overmind-devtools-vscode) extension. This will allow you to work on your application without leaving the IDE at all.
+
+![](.gitbook/assets/amazing_devtools.png)
+
+{% hint style="info" %}
+If you are using the **Insiders** version of VSCode the extension will not work. It seems to be some extra security setting.
+{% endhint %}
+
+### Devtool app
 
-const overmind = createOvermind(config)
+Alternatively you can install the standalone application of the devtools. It is highly recommended to install the package [CONCURRENTLY](https://www.npmjs.com/package/concurrently). It allows you to start the devtools as you start your build process:
+
+```text
+npm install overmind-devtools concurrently
 ```
-{% endtab %}
-{% endtabs %}
 
-And fire up your application in the browser or whatever environment your user interface is to be consumed in by the users.
+{% code title="package.json" %}
+```javascript
+{
+  ...
+  "scripts": {
+    "start": "concurrently \"overmind-devtools\" \"someBuildTool\""
+  },
+  ...
+}
+```
+{% endcode %}
 
-Move on with the specific view layer of choice to connect your app:
+### Hot Module Replacement <a id="quickstart-hot-module-replacement"></a>
 
-\*\*\*\*[**REACT** ](views/react.md)**-** [**ANGULAR**](views/angular.md) **-** [**VUE**](views/vue.md)\*\*\*\*
+A popular concept introduced by Webpack is [HMR](https://webpack.js.org/concepts/hot-module-replacement/). It allows you to make changes to your code without having to refresh. Overmind automatically supports HMR. That means when **HMR** is activated Overmind will make sure it updates and manages its state, actions and effects. Even the devtools will be updated as you make changes.