Merge pull request cerebral#177 from cerebral/moreStuff

More stuff

Author: christianalfoni

packages/node_modules/proxy-state-tree/src/index.ts

@@ -121,9 +121,15 @@ export class ProxyStateTree<T extends object> implements IProxyStateTree<T> {
   }
   onMutation(callback: IMutationCallback) {
     this.mutationCallbacks.push(callback)
+
+    return () =>
+      this.mutationCallbacks.splice(this.mutationCallbacks.indexOf(callback), 1)
   }
   onFlush(callback: IFlushCallback) {
     this.flushCallbacks.push(callback)
+
+    return () =>
+      this.flushCallbacks.splice(this.flushCallbacks.indexOf(callback), 1)
   }
   addMutation(mutation: IMutation, objectChangePath?: string) {
     this.mutations.push(mutation)

packages/overmind-website/api/connect.md

@@ -4,4 +4,12 @@
 h(Example, { name: "api/connect" })
 ```
 
-The **connect** function you created is used to connect components to your application. Any state you access in the component is automatically tracked by Overmind and the component will rerender when there is a change.
+The **connect** function you created is used to connect components to your application. Any state you access in the component is automatically tracked by Overmind and the component will rerender when there is a change.
+
+## addMutationListener
+
+You also have access to manually react to changes in the state. This gives you a lot of flexibility as you can react to type of change and at what path. You can even pattern match the path to react to nested changes etc.
+
+```marksy
+h(Example, { name: "api/connect_listener" })
+```

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

@@ -0,0 +1,134 @@
+const javascript = {
+  react: [
+    {
+      fileName: 'SomeComponent.js',
+      code: `
+import React from 'react'
+import { connect } from '../app'
+
+class SomeComponent extends React.Component {
+  componentDidMount() {
+    const overmind = this.props.overmind
+
+    this.disposeMutationListener = overmind.addMutationListener((mutation) => {
+      // Check mutation and do something
+    })
+  }
+  componentWillUnmount() {
+    this.disposeMutationListener()
+  }
+  render() {
+    const overmind = this.props.overmind
+    
+    return (
+      <div onClick={overmind.actions.onClick}>
+        {overmind.state.foo}
+      </div>
+    )
+  }
+}
+
+export default connect(SomeComponent)
+    `,
+    },
+  ],
+  vue: [
+    {
+      fileName: 'SomeComponent.vue (template)',
+      code: `
+<div v-on:click="overmind.actions.onClick">
+  {{overmind.state.foo}}
+</div>
+    `,
+    },
+    {
+      fileName: 'SomeComponent.vue (script)',
+      code: `
+import { connect } from '../app'
+
+export default connect({
+  mounted() {
+    this.disposeMutationListener = this.overmind.addMutationListener((mutation) => {
+      // Check mutation and do something
+    })
+  },
+  beforeDestroy() {
+    this.disposeMutationListener()
+  }
+})
+  `,
+    },
+  ],
+}
+
+const typescript = {
+  react: [
+    {
+      fileName: 'SomeComponent.tsx',
+      code: `
+import * as React from 'react'
+import { connect, Connect } from '../app'
+
+type Props = {} & Connect
+
+class SomeComponent extends React.Component<Props> {
+  disposeMutationListener: () => void
+  componentDidMount() {
+    const overmind = this.props.overmind
+
+    this.disposeMutationListener = overmind.addMutationListener((mutation) => {
+      // Check mutation and do something
+    })
+  }
+  componentWillUnmount() {
+    this.disposeMutationListener()
+  }
+  render() {
+    const overmind = this.props.overmind
+    
+    return (
+      <div onClick={overmind.actions.onClick}>
+        {overmind.state.foo}
+      </div>
+    )
+  }
+}
+
+export default connect(SomeComponent)
+    `,
+    },
+  ],
+  vue: javascript.vue,
+  angular: [
+    {
+      fileName: 'some.component.ts',
+      code: `
+import { Component } from '@angular/core';
+import { connect } from '../app'
+
+@Component({
+  selector: 'some-component',
+  template: \`
+  <div (click)="overmind.actions.onClick()">
+    {{overmind.state.foo}}
+  </div>
+  \`
+})
+@connect()
+export class SomeComponent {
+  disposeMutationListener: () => void
+  ngOnInit() {
+    this.disposeMutationListener = this.overmind.addMutationListener((mutation) => {
+      // Check mutation and do something
+    })
+  }
+  ngOnDestroy() {
+    this.disposeMutationListener()
+  }
+}    
+    `,
+    },
+  ],
+}
+
+export default (ts, view) => (ts ? typescript[view] : javascript[view])

packages/overmind-website/examples/frontpage/operators.ts

@@ -5,9 +5,7 @@ export const search = pipe(
   setQuery,
   filterValidQuery,
   debounce(200),
-  getResult,
-  catchResultError,
-  setResult
+  getSearchResult
 )
 `,
   },

packages/overmind-website/examples/guide/usingovermindwithreact/hoc.ts

@@ -0,0 +1,76 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'app/index.ts',
+          code: `
+import { Overmind, TConfig } from 'overmind'
+import { createConnect, TConnect } from 'overmind-react'
+import { state } from './state'
+import * as actions from './actions'
+
+const config = {
+  state,
+  actions
+}
+
+declare module 'overmind' {
+  interface IConfig extends TConfig<typeof config> {}
+}
+
+export type Connect = TConnect<typeof config>
+
+const app = new Overmind(config)
+
+export const connect = createConnect(app)
+  `,
+        },
+        {
+          fileName: 'components/App.tsx',
+          code: `
+import * as React from 'react'
+import { connect, Connect } from '../app'
+
+type Props = {} & Connect
+
+const App: React.SFC<Props> = ({ overmind }) => {
+  const { state, actions } = overmind
+
+  return <div />
+}
+
+export default connect(App)
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'app/index.jsx',
+          code: `
+import { Overmind } from 'overmind'
+import { createConnect } from 'overmind-react'
+
+const app = new Overmind({
+  state: {},
+  actions: {}
+})
+
+export const connect = createConnect(app)
+`,
+        },
+        {
+          fileName: 'components/App.jsx',
+          code: `
+import React from 'react'
+import { connect } from '../app'
+
+const App = ({ overmind }) => {
+  const { state, actions } = overmind
+
+  return <div />
+}
+
+export default connect(App)
+`,
+        },
+      ]

packages/overmind-website/examples/guide/usingovermindwithreact/hoc_effect.ts

@@ -0,0 +1,63 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'components/App.tsx',
+          code: `
+import * as React from 'react'
+import { connect, Connect } from '../app'
+
+type Props = {} & Connect
+
+class App extends React.Component<Props> {
+  disposeMutationListener: () => void
+  componentDidMount() {
+    this.disposeMutationListener = this.props.overmind.addMutationListener((mutation) => {
+      if (mutation.path === 'currentPage') {
+        document.querySelector('#app').scrollTop = 0
+      }
+    })
+  }
+  componentWillUnmount() {
+    this.disposeMutationListener()
+  }
+  render() {
+    const { state, actions } = this.props.overmind
+
+    return <div />
+  }
+}
+
+export default connect(App)
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'components/App.jsx',
+          code: `
+import React from 'react'
+import { connect } from '../app'
+
+class App extends React.Component {
+  componentDidMount() {
+    this.disposeMutationListener = this.props.overmind.addMutationListener((mutation) => {
+      if (mutation.path.includes('currentPage')) {
+        document.querySelector('#app').scrollTop = 0
+      }
+    })
+  }
+  componentWillUnmount() {
+    this.disposeMutationListener()
+  }
+  render() {
+    const { state, actions } = this.props.overmind
+
+    return <div />
+  }
+}
+
+export default connect(App)
+`,
+        },
+      ]

packages/overmind-website/examples/guide/usingovermindwithreact/hoc_passprop.ts

@@ -0,0 +1,78 @@
+export default (ts) =>
+  ts
+    ? [
+        {
+          fileName: 'components/Todos.tsx',
+          code: `
+import * as React from 'react'
+import { connect, Connect } from '../app'
+import Todo from './Todo'
+
+type Props = {} & Connect
+
+const Todos: React.SFC<Props> = ({ overmind }) => {
+  const { state } = overmind
+
+  return (
+    <ul>
+      {state.todos.map(todo => <Todo key={todo.id} todo={todo} />)}
+    </ul<
+  )
+}
+
+export default connect(Todos)
+`,
+        },
+        {
+          fileName: 'components/Todo.tsx',
+          code: `
+import * as React from 'react'
+import { connect, Connect } from '../app'
+
+type Props = {
+  todo: Todo
+} & Connect
+
+const Todo: React.SFC<Props> = ({ todo }) => {
+  return <li>{todo.title}</li>
+}
+
+export default connect(Todo)
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'components/Todos.jsx',
+          code: `
+import React from 'react'
+import { connect } from '../app'
+import Todo from './Todo'
+
+const Todos = ({ overmind }) => {
+  const { state } = overmind
+
+  return (
+    <ul>
+      {state.todos.map(todo => <Todo key={todo.id} todo={todo} />)}
+    </ul<
+  )
+}
+
+export default connect(Todos)
+`,
+        },
+        {
+          fileName: 'components/Todo.jsx',
+          code: `
+import React from 'react'
+import { connect } from '../app'
+
+const Todo = ({ todo }) => {
+  return <li>{todo.title}</li>
+}
+
+export default connect(Todo)
+`,
+        },
+      ]