docs(website): new docs for angular

Author: christianalfoni

packages/overmind-website/examples/guide/usingovermindwithangular/connect.ts

@@ -3,7 +3,8 @@ export default () => [
     fileName: 'overmind/index.ts',
     code: `
 import { Overmind, IConfig } from 'overmind'
-import { createConnect, IConnect } from 'overmind-angular'
+import { createService } from 'overmind-angular'
+import { Injectable } from '@angular/core'
 import { state } from './state'
 import * as actions from './actions'
 
@@ -16,29 +17,33 @@ declare module 'overmind' {
   interface Config extends IConfig<typeof config> {}
 }
 
-export interface Connect extends IConnect<typeof config> {}
-
 const overmind = new Overmind(config)
 
-export const connect = createConnect(overmind)
+@Injectable()
+export class OvermindService extends createService(overmind) {}
 `,
   },
   {
     fileName: 'components/app.component.ts',
     code: `
-import { Component } from '@angular/core'
-import { connect, Connect } from '../overmind'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { OvermindService } from '../overmind'
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  template: \`
+<div *ngIf="state$ | async as state">
+  <h1 (click)="actions.changeTitle()">{{ state.title }}</h1>
+</div>
+  \`,
+  providers: [OvermindService],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-@connect()
 export class AppComponent {
-  overmind: Connect
-  title = 'My First Angular App with Overmind!'
-}
+  state$ = this.overmind.select()
+  actions: this.overmind.actions
+  constructor(private overmind: OvermindService) {}
+},
 `,
   },
 ]

packages/overmind-website/examples/guide/usingovermindwithangular/connect_custom.ts

@@ -1,20 +1,25 @@
 export default () => [
   {
-    fileName: 'components/admin.component.ts',
+    fileName: 'components/app.component.ts',
     code: `
-import { Component } from '@angular/core'
-import { connect } from '../overmind'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { OvermindService } from '../overmind'
 
 @Component({
-  selector: 'admin-root',
-  templateUrl: './admin.component.html',
-  styleUrls: ['./admin.component.css']
+  selector: 'app-root',
+  template: \`
+<div *ngIf="state$ | async as state">
+  <h1 (click)="actions.changeAdmin()">{{ state.adminTitle }}</h1>
+</div>
+  \`,
+  providers: [OvermindService],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-@connect(({ state, actions, effects }) => ({
-  state: state.admin,
-  actions: actions.admin
-}))
-export class AdminComponent {}
+export class AppComponent {
+  state$ = this.overmind.select(state => state.admin)
+  actions: this.overmind.actions.admin
+  constructor(private overmind: OvermindService) {}
+},
 `,
   },
 ]

packages/overmind-website/examples/guide/usingovermindwithangular/effect.ts

@@ -3,16 +3,15 @@ export default () => [
     fileName: 'components/app.component.ts',
     code: `
 import { Component } from '@angular/core'
-import { connect, Connect } from '../overmind'
+import { OvermindService } from '../overmind'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
-@connect()
 export class AppComponent {
-  overmind: Connect
   disposeMutationListener: () => void
+  constructor (private overmind: OvermindService) {}
   ngOnInit() {
     this.disposeMutationListener = this.overmind.addMutationListener((mutation) => {
       if (mutation.path === 'currentPage') {

packages/overmind-website/examples/guide/usingovermindwithangular/onpush.ts

@@ -2,41 +2,46 @@ export default () => [
   {
     fileName: 'components/todo.component.ts',
     code: `
-import { Component, Input } from '@angular/core'
-import { connect } from '../overmind'
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
+import { OvermindService } from '../overmind'
 import { Todo } from '../overmind/state'
 
 @Component({
   selector: 'todos-todo',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: \`
-  <li>{{todo.title}}</li>
+<li ngIf="todo$ | async as todo">{{ todo.title }}</li>
   \`
 })
 @connect()
 export class TodoComponent {
-  @Input() todo: Todo
+  @Input() index: number
+  todo$ = this.overmind.select(state => state.todos[this.index])
+  constructor(private overmind: OvermindService) {}
 }    
     `,
   },
   {
     fileName: 'components/todos.component.ts',
     code: `
-import { Component } from '@angular/core'
-import { connect } from '../overmind'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { OvermindService } from '../overmind'
 
 @Component({
   selector: 'todos-list',
   template: \`
-  <ul>
-    <todos-todo
-      *ngFor="let todo of overmind.state.todos"
-      [todo]="todo"
-    ></todos-todo>
-  </ul>
+<ul *ngIf="state$ | async as state">
+  <todos-todo
+    *ngFor="let todo of state.todos; index as i;"
+    [index]="i"
+  ></todos-todo>
+</ul>
   \`
 })
-@connect()
-export class ListComponent {}
+export class ListComponent {
+  state$ = this.overmind.select()
+  constructor(private overmind: OvermindService)
+}
 `,
   },
 ]

packages/overmind-website/examples/guide/usingovermindwithangular/passprop.ts

@@ -0,0 +1,22 @@
+export default () => [
+  {
+    fileName: 'components/app.component.ts',
+    code: `
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { OvermindService } from '../overmind'
+
+@Component({
+  selector: 'app-root',
+  template: \`\`,
+  providers: [OvermindService],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+@OvermindService.Track
+export class AppComponent {
+  state$ = this.overmind.select()
+  actions: this.overmind.actions
+  constructor(private overmind: OvermindService) {}
+},
+`,
+  },
+]

packages/overmind-website/examples/guide/usingovermindwithangular/track.ts

@@ -17,7 +17,8 @@ export const useOvermind = createHook(overmind)
 `,
   angular: (config) => `
 import { Overmind, IConfig } from 'overmind'
-import { createConnect, IConnect } from 'overmind-angular'
+import { createService } from 'overmind-angular'
+import { Injectable } from '@angular/core'
 ${config.trim()}
 
 // For explicit typing check the Typescript guide
@@ -29,7 +30,8 @@ export interface Connect extends IConnect<typeof config> {}
 
 export const overmind = new Overmind(config)
 
-export const connect = createConnect(overmind) 
+@Injectable()
+export class OvermindService extends createService(overmind) {}
 `,
   vue: (config) => ``,
 }

packages/overmind-website/examples/templates.ts

@@ -1,39 +1,48 @@
 # Using Overmind with Angular
 
-Using Overmind with Angular is straight forward. You create a **connect** decorator and use it with whatever component. An **overmind** property is added to the component and there you can access state, actions and listen to mutations to do effects.
+Using Overmind with Angular is straight forward. You create a **service** and use it with whatever component. By using the **select** API you create observable state.
+
+```marksy
+h(Notice, null, "Make sure that your transpile target is configured to **ES2015** or later. This allows you to extend the service correctly")
+```
+
+Let us have a look at how you create the service an expose it to components:
 
 ```marksy
 h(Example, { name: "guide/usingovermindwithangular/connect" })
 ```
 
-You can also expose parts of the configuration on custom properties of the component:
+You can also expose parts of the configuration:
 
 ```marksy
 h(Example, { name: "guide/usingovermindwithangular/connect_custom" })
 ```
 
 You can now access the **admin** state and actions directly with **state** and **actions**.
 
-## Rendering
+## Track components
 
-When you connect Overmind to a component it will use its lifecycle hooks to manage updates. By default you really do not have to think about this as it relies on Angulars default change detection strategy.You can change this behaviour though. By adding the **onPush** strategy and injecting the **ChangeDetectorRef**, the component will only update when it receives input from its parents or Overmind tells it to update due to tracked state has changed.
+Optionally you can also track the component itself. The **service** exposes a decorator called **Track**. This will allow you to follow what components are looking at state, what exact state they are looking at and when they update, using the devtools.
 
 ```marksy
-h(Example, { name: "guide/usingovermindwithangular/onpush" })
+h(Example, { name: "guide/usingovermindwithangular/track" })
 ```
 
-```marksy
-h(Notice, null, "The class property has to be named **cdr**. Overmind gives an error if you use onPush strategy without injecting ChangeDetectorRef correctly.")
-```
+## Rendering
+
+When you connect Overmind to your component and expose state you do not have to think about how much state you expose. The exact state that is being accessed in the template is the state that will be tracked. That means you can expose all the state of the application to all your components without worrying about performance. 
+
 
 ## Passing state as input
 
-If you pass a state object or array as a property to a child component you will also in the child component need to **connect**. This ensures that the property you passed is tracked within that component, even though you do not access any state or actions from Overmind. The devtools will help you identify where any components are left "unconnected".
+When you pass state objects or arrays as input to a child component that state will by default be tracked on the component passing it a long, which you can also see in the devtools. If you want to effectively pass state as input you should rather pass a reference so that the child component can connect to it. 
 
 ```marksy
 h(Example, { name: "guide/usingovermindwithangular/passprop" })
 ```
 
+What is important to understand here is that Overmind is **not** immutable. That means if you would change any property on any todo, only the component actually looking at the todo will render. The list is untouched. 
+
 ## State effects
 
 To run effects in components based on changes to state you use the **addMutationListener** function in the lifecycle hooks of Angular.