docs(website): add angular stuff

Author: christianalfoni

packages/node_modules/overmind-angular/src/index.ts

@@ -1,9 +1,4 @@
-import App, {
-  ActionCallback,
-  EventType,
-  Configuration,
-  TConfig,
-} from 'overmind'
+import App, { EventType, Configuration, TConfig } from 'overmind'
 
 export * from 'overmind'
 
@@ -21,8 +16,6 @@ export type TConnect<App extends { state: any; actions: any }> = {
 
 let nextComponentId = 0
 
-let hasWarnedOnPush = false
-
 export default class VueApp<
   Config extends Configuration,
   EvalConfig extends TConfig<Config>
@@ -36,13 +29,17 @@ export default class VueApp<
       const targetNgOnInit = target.prototype.ngOnInit
       const targetNgDoCheck = target.prototype.ngDoCheck
       const targetNgAfterViewChecked = target.prototype.ngAfterViewChecked
+      const reactionFactory = instance.createReactionFactory(
+        target.constructor.name
+      )
       let currentTrackId
       let listener
 
       target.prototype.ngOnInit = function() {
         this.app = {
           state: instance.state,
           actions: instance.actions,
+          reaction: reactionFactory.add,
         }
         this.__componentInstanceId = componentInstanceId++
 

packages/node_modules/overmind/src/index.ts

@@ -9,6 +9,9 @@ export { default as compute } from './computed'
 
 export { IValueAction, Compose }
 
+export const log = (...objects: any[]) =>
+  console.log(...objects.map((obj) => JSON.parse(JSON.stringify(obj))))
+
 /*
   BASE TYPES
 */

packages/overmind-website/api/log.md

@@ -0,0 +1,7 @@
+# Log
+
+If you ever need to log out state it can be a good idea to use the log function from Overmind. First of all it will log out a plain value. Since Overmind heavily depends on JavaScript proxies a normal **console.log** will give you an object that you probably will not recognize at first sight. The other benefit of the Overmind logger is that it will show you the state of that value when it was logged. If you do a plain **console.log** on an object or array your developer console will show you the latest state of the value, meaning that it might have changed after you logged. This can be very confusing when debugging.
+
+```marksy
+h(Example, {name: "api/log"})
+```

packages/overmind-website/examples/api/log.ts

@@ -0,0 +1,28 @@
+export const js = [
+  {
+    fileName: 'app/mutations.js',
+    code: `
+import { log } from 'overmind'
+
+export const setItems = (state, items) => {
+  log(state.items)
+  state.items = items
+}
+    `,
+  },
+]
+
+export const ts = [
+  {
+    fileName: 'app/mutations.ts',
+    code: `
+import { Mutation, log } from 'overmind'
+import { Item } from './state'
+
+export const setItems: Mutation<Item[]> = (state, items) => {
+  log(state.items)
+  state.items = items
+}
+    `,
+  },
+]

packages/overmind-website/examples/guide/connectingcomponents/actions.ts

@@ -67,14 +67,16 @@ export const toggleAwesomeApp: Action = action =>
   `,
   },
   {
-    fileName: 'components/List.vue (template)',
+    fileName: 'components/App.vue (template)',
     target: 'markup',
     code: `
-<h1>{{app.state.myObject}}</h1>
+<button v-on:click="app.actions.toggleAwesomeApp()">
+  Toggle awesome
+</button>
   `,
   },
   {
-    fileName: 'components/List.vue (script)',
+    fileName: 'components/App.vue (script)',
     code: `
 import app from './app'
 
@@ -84,3 +86,41 @@ export default app.connect({})
 ]
 
 export const vueTs = vue
+
+export const angularTs = [
+  {
+    fileName: 'app/actions.ts',
+    code: `
+import * as mutations from './mutations'
+
+export const toggleAwesomeApp: Action = action =>
+    action()
+      .mutate(mutations.toggleAwesomeApp)
+  `,
+  },
+  {
+    fileName: 'components/app.component.ts',
+    code: `
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+import app from '../app'
+
+@Component({
+  selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: \`
+  <button (click)="app.actions.toggleAwesomeApp()">
+    Toggle awesome
+  </button>
+  \`
+})
+@app.connect()
+export class App {
+  constructor(private cdr: ChangeDetectorRef) {}
+}
+  `,
+  },
+]

packages/overmind-website/examples/guide/connectingcomponents/array_1.ts

@@ -7,7 +7,7 @@ import React from 'react'
 import app from './app'
 
 const List = ({ app }) => (
-  <h1>{app.state.myArray}</h1>
+  <h1>{app.state.items}</h1>
 )
 
 export default app.connect(List)
@@ -23,7 +23,7 @@ import * as React from 'react'
 import app, { Connect } from './app'
 
 const List: React.SFC<Connect> = ({ app }) => (
-  <h1>{app.state.myArray}</h1>
+  <h1>{app.state.items}</h1>
 )
 
 export default app.connect(List)
@@ -36,7 +36,7 @@ export const vue = [
     fileName: 'components/List.vue (template)',
     target: 'markup',
     code: `
-<h1>{{app.state.myArray}}</h1>
+<h1>{{app.state.items}}</h1>
   `,
   },
   {
@@ -50,3 +50,29 @@ export default app.connect({})
 ]
 
 export const vueTs = vue
+
+export const angularTs = [
+  {
+    fileName: 'components/list.component.ts',
+    code: `
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+import app from '../app'
+
+@Component({
+  selector: 'app-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: \`
+  <h1>{{app.state.items}}</h1>
+  \`
+})
+@app.connect()
+export class List {
+  constructor(private cdr: ChangeDetectorRef) {}
+}
+  `,
+  },
+]

packages/overmind-website/examples/guide/connectingcomponents/array_2.ts

@@ -8,7 +8,7 @@ import app from './app'
 
 const List = ({ app }) => (
   <ul>
-    {app.state.myArray.map(item => 
+    {app.state.items.map(item => 
       <li key={item.id}>{item.title}</li>
     )}
   </ul>
@@ -28,7 +28,7 @@ import app, { Connect } from './app'
 
 const List: React.SFC<Connect> = ({ app }) => (
   <ul>
-    {app.state.myArray.map(item => 
+    {app.state.items.map(item => 
       <li key={item.id}>{item.title}</li>
     )}
   </ul>
@@ -45,7 +45,7 @@ export const vue = [
     target: 'markup',
     code: `
 <ul>
-  <li v-for="item in app.state.myArray" :key="item.id>
+  <li v-for="item in app.state.items" :key="item.id>
   {{ item.title }}
   </li>
 </ul>
@@ -62,3 +62,36 @@ export default app.connect({})
 ]
 
 export const vueTs = vue
+
+export const angularTs = [
+  {
+    fileName: 'components/list.component.ts',
+    code: `
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+import app from '../app'
+
+@Component({
+  selector: 'app-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: \`
+  <ul>
+    <li *ngFor="let item of app.state.items;trackby: trackById">
+      {{item.title}}
+    </li>
+  </ul>
+  \`
+})
+@app.connect()
+export class List {
+  constructor(private cdr: ChangeDetectorRef) {}
+  trackById(index, item) {
+    return item.id
+  }
+}
+  `,
+  },
+]

packages/overmind-website/examples/guide/connectingcomponents/array_3.ts

@@ -23,7 +23,7 @@ import Item from './Item'
 
 const App = ({ app }) => (
   <ul>
-    {app.state.myArray.map(item => 
+    {app.state.items.map(item => 
       <Item key={item.id} item={item} />
     )}
   </ul>
@@ -61,7 +61,7 @@ import Item from './Item'
 
 const List: React.SFC<Connect> = ({ app }) => (
   <ul>
-    {app.state.myArray.map(item => 
+    {app.state.items.map(item => 
       <Item key={item.id} item={item} />
     )}
   </ul>
@@ -95,7 +95,7 @@ export default app.connect({
     target: 'markup',
     code: `
 <ul>
-  <li is="Item" v-for="item in app.state.myArray" v-bind:item="item" :key="item.id" />
+  <li is="Item" v-for="item in app.state.items" v-bind:item="item" :key="item.id" />
 </ul>
   `,
   },
@@ -115,3 +115,65 @@ export default app.connect({
 ]
 
 export const vueTs = vue
+
+export const angularTs = [
+  {
+    fileName: 'components/item.component.ts',
+    code: `
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input
+} from '@angular/core';
+import app from '../app'
+import { Item } from '../app/state'
+
+@Component({
+  selector: 'app-list-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: \`
+  <li>
+    {{item.title}}
+  </li>
+  \`
+})
+@app.connect()
+export class List {
+  @Input() item: Item;
+  constructor(private cdr: ChangeDetectorRef) {}
+}
+  `,
+  },
+  {
+    fileName: 'components/list.component.ts',
+    code: `
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+import app from '../app'
+
+@Component({
+  selector: 'app-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: \`
+  <ul>
+    <app-list-item
+      *ngFor="let item of app.state.items;trackby: trackById"
+      [item]="item"
+    ></app-list-item>
+  </ul>
+  \`
+})
+@app.connect()
+export class List {
+  constructor(private cdr: ChangeDetectorRef) {}
+  trackById(index, item) {
+    return item.id
+  }
+}
+  `,
+  },
+]