docs(website): update docs for new version

Author: christianalfoni

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

@@ -63,6 +63,11 @@ export const createHook = <Config extends IConfiguration>(
   effects: Overmind<Config>['effects']
   addMutationListener: Overmind<Config>['addMutationListener']
 }) => {
+  if (overmindInstance) {
+    console.warn(
+      'DEPRECATION - Do not pass the overmind instance to "createHook", but use the provider. Please read docs for more information'
+    )
+  }
   let currentComponentInstanceId = 0
   const {
     ReactCurrentOwner,
@@ -186,6 +191,12 @@ export const createConnect = <ThisConfig extends IConfiguration>(
       keyof IConnect<Overmind<ThisConfig>>
     >
   > => {
+    if (overmindInstance) {
+      console.warn(
+        'DEPRECATION - Do not pass the overmind instance to "createConnect", but use the provider. Please read docs for more information'
+      )
+    }
+
     let componentInstanceId = 0
     const name = component.name
     const populatedComponent = component as any

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

@@ -12,7 +12,7 @@ import { state } from './state'
 import * as effects from './effects'
 import * as actions from './actions'
 
-const config = {
+export const config = {
   state,
   effects,
   actions

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

@@ -29,7 +29,7 @@ import onInitialize from './onInitialize'
 import { state } from './state'
 import * as actions from './actions'
 
-const config = {
+export const config = {
   onInitialize,
   state,
   actions

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

@@ -94,18 +94,20 @@ export const toggleAwesomeApp: Action = ({ state }) =>
       fileName: 'components/app.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
   selector: 'app-root',
   template: \`
-  <button (click)="overmind.actions.toggleAwesomeApp()">
+  <button (click)="actions.toggleAwesomeApp()">
     Toggle awesome
   </button>
   \`
 })
-@connect()
-export class App {}
+export class App {
+  actions = this.store.actions
+  constructor(private store: Store) {}
+}
     `,
     },
   ],

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

@@ -56,16 +56,18 @@ export default List
       fileName: 'components/list.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
   selector: 'app-list',
   template: \`
-  <h1>{{overmind.state.items}}</h1>
+  <h1 *track>{{state.items}}</h1>
   \`
 })
-@connect()
-export class List {}
+export class List {
+  state = this.store.select()
+  constructor(private store: Store) {}
+}
     `,
     },
   ],

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

@@ -68,20 +68,21 @@ export default App
       fileName: 'components/list.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
   selector: 'app-list',
   template: \`
   <ul>
-    <li *ngFor="let item of overmind.state.items;trackby: trackById">
+    <li *ngFor="let item of state.items;trackby: trackById">
       {{item.title}}
     </li>
   </ul>
   \`
 })
-@connect()
 export class List {
+  state = this.store.select()
+  constructor(private store: Store) {}
   trackById(index, item) {
     return item.id
   }

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

@@ -87,9 +87,9 @@ export default {
 const typescript = {
   react: [
     {
-      fileName: 'components/Item.jsx',
+      fileName: 'components/Item.tsx',
       code: `
-import React from 'react'
+import * as React from 'react'
 import { useOvermind } from '../overmind'
 
 type Props = {
@@ -142,12 +142,11 @@ import { Item } from '../overmind/state'
 @Component({
   selector: 'app-list-item',
   template: \`
-  <li>
+  <li *track>
     {{item.title}}
   </li>
   \`
 })
-@connect()
 export class List {
   @Input() item: Item;
 }
@@ -157,21 +156,22 @@ export class List {
       fileName: 'components/list.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
   selector: 'app-list',
   template: \`
-  <ul>
+  <ul *track>
     <app-list-item
-      *ngFor="let item of overmind.state.items;trackby: trackById"
+      *ngFor="let item of state.items;trackby: trackById"
       [item]="item"
     ></app-list-item>
   </ul>
   \`
 })
-@connect()
 export class List {
+  state = this.store.select()
+  constructor(private store: Store) {}
   trackById(index, item) {
     return item.id
   }

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

@@ -84,20 +84,19 @@ export default Article
       fileName: 'app.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect, Connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
   selector: 'app-root',
   template: \`
   <article></article>
   \`
 })
-@connect()
 export class App {
-  overmind: Connect
   disposeEffect: () => void
+  constructor(private store: Store) {}
   ngOnInit() {
-    this.disposeEffect = this.overmind.addMutationListener(() => {
+    this.disposeEffect = this.store.addMutationListener(() => {
       if (mutation.path === 'currentArticle') {
         document.querySelector('#app').scrollTop = 0
       } 

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

@@ -56,16 +56,18 @@ export default List
       fileName: 'components/list.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
   selector: 'app-list',
   template: \`
-  <h1>{{overmind.state.items}}</h1>
+  <h1>{{state.items}}</h1>
   \`
 })
-@connect()
-export class List {}
+export class List {
+  state = this.store.select()
+  constructor(private store: Store) {}
+}
     `,
     },
   ],

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

@@ -87,9 +87,9 @@ export default {
 const typescript = {
   react: [
     {
-      fileName: 'components/Item.jsx',
+      fileName: 'components/Item.tsx',
       code: `
-import React from 'react'
+import * as React from 'react'
 import { useOvermind } from '../overmind'
 
 type Props = {
@@ -136,18 +136,16 @@ export default List
       fileName: 'components/item.component.ts',
       code: `
 import { Component Input } from '@angular/core';
-import { connect } from '../overmind'
 import { Item } from '../overmind/state'
 
 @Component({
   selector: 'app-list-item',
   template: \`
-  <li>
+  <li *track>
     {{item.title}}
   </li>
   \`
 })
-@connect()
 export class List {
   @Input() item: Item;
 }
@@ -157,22 +155,23 @@ export class List {
       fileName: 'components/list.component.ts',
       code: `
 import { Component } from '@angular/core';
-import { connect } from '../overmind'
+import { Store } from '../overmind'
 
 @Component({
   selector: 'app-list',
   template: \`
-  <ul>
+  <ul *track>
     <app-list-item
-      *ngFor="let id of keys(overmind.state.items);trackby: trackById"
-      [item]="overmind.state.items[id]"
+      *ngFor="let id of keys(state.items);trackby: trackById"
+      [item]="state.items[id]"
     ></app-list-item>
   </ul>
   \`
 })
-@connect()
 export class List {
+  state = this.store.select()
   keys =  Object.keys
+  constructor(private store: Store) {}
   trackById(index, id) {
     return id
   }