feat(overmind-angular): decorator required, state scope transfer

Author: christianalfoni

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

@@ -1,6 +1,7 @@
 import { Overmind, EventType } from 'overmind'
 import { BehaviorSubject, Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
+import { IS_PROXY } from 'proxy-state-tree'
 
 class ServiceBase {}
 
@@ -10,27 +11,61 @@ const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 let nextComponentId = 0
 
 const Track = (Component) => {
-  if (IS_PRODUCTION) {
-    return
-  }
-
   const componentId = nextComponentId++
   let componentInstanceId = 0
 
   function findService(target) {
     return Object.keys(target).find((key) => target[key] instanceof ServiceBase)
   }
 
-  const targetNgAfterViewInit = Component.prototype.ngAfterViewInit
-  Component.prototype.ngAfterViewInit = function() {
+  if (!IS_PRODUCTION) {
+    const targetNgOnInit = Component.prototype.ngOnInit
+    Component.prototype.ngOnInit = function() {
+      if (
+        !Component['__annotations__'][0] ||
+        Component['__annotations__'][0].changeDetection !== 0
+      ) {
+        throw new Error(
+          'OVERMIND: You have to add ChangeDetectionStrategy.OnPush on component ' +
+            Component.name
+        )
+      }
+      targetNgOnInit && targetNgOnInit.call(this)
+    }
+    const targetNgAfterViewInit = Component.prototype.ngAfterViewInit
+    Component.prototype.ngAfterViewInit = function() {
+      const service = this[findService(this)]
+
+      if (!service) {
+        throw new Error(
+          'OVERMIND - You have not added the Overmind service to component ' +
+            Component.name
+        )
+      }
+
+      service.addComponent({
+        componentId,
+        componentInstanceId: componentInstanceId++,
+        name: Component.name,
+      })
+
+      targetNgAfterViewInit && targetNgAfterViewInit.call(this)
+    }
+  }
+
+  const targetNgOnChanges = Component.prototype.ngOnChanges
+  Component.prototype.ngOnChanges = function(changes) {
     const service = this[findService(this)]
-    service.addComponent({
-      componentId,
-      componentInstanceId: componentInstanceId++,
-      name: Component.name,
-    })
 
-    targetNgAfterViewInit && targetNgAfterViewInit.call(this)
+    for (let key in changes) {
+      if (changes[key].currentValue[IS_PROXY]) {
+        this[key] = service.tree.master.rescope(
+          changes[key].currentValue,
+          service.tree
+        )
+      }
+    }
+    targetNgOnChanges && targetNgOnChanges.call(this, changes)
   }
 }
 
@@ -49,7 +84,7 @@ export function createService<App extends Overmind<any>>(
   overmind: App
 ): IService<App> {
   return class Service extends ServiceBase {
-    static Track
+    static Track = Track
     private tree: any
     private state$: Observable<any>
     private subject: BehaviorSubject<any>
@@ -69,8 +104,24 @@ export function createService<App extends Overmind<any>>(
       this.addMutationListener = this.overmind.addMutationListener
 
       this.tree.track(this.onUpdate)
+
+      if (!IS_PRODUCTION) {
+        ;(window['__zone_symbol__setTimeout'] || setTimeout)(() => {
+          if (!this.componentDetails) {
+            throw new Error(
+              'OVERMIND - You have added a service without adding the Track decorator'
+            )
+          }
+        })
+      }
     }
     private addComponent(componentDetails) {
+      if (this.componentDetails) {
+        throw new Error(
+          'OVERMIND - This service is already instantiated, you have to provide it as well with providers: [OvermindService] on ' +
+            this.componentDetails.name
+        )
+      }
       this.componentDetails = componentDetails
       this.overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
         componentId: componentDetails.componentId,

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

@@ -39,6 +39,7 @@ import { OvermindService } from '../overmind'
   providers: [OvermindService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
+@OvermindService.Track
 export class AppComponent {
   state$ = this.overmind.select()
   actions: this.overmind.actions

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

@@ -15,6 +15,7 @@ import { OvermindService } from '../overmind'
   providers: [OvermindService],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
+@OvermindService.Track
 export class AppComponent {
   state$ = this.overmind.select(state => state.admin)
   actions: this.overmind.actions.admin

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

@@ -8,15 +8,14 @@ import { Todo } from '../overmind/state'
 
 @Component({
   selector: 'todos-todo',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   template: \`
 <li ngIf="todo$ | async as todo">{{ todo.title }}</li>
-  \`
+  \`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-@connect()
+@OvermindService.Track
 export class TodoComponent {
-  @Input() index: number
-  todo$ = this.overmind.select(state => state.todos[this.index])
+  @Input() todo: Todo
   constructor(private overmind: OvermindService) {}
 }    
     `,
@@ -31,13 +30,12 @@ import { OvermindService } from '../overmind'
   selector: 'todos-list',
   template: \`
 <ul *ngIf="state$ | async as state">
-  <todos-todo
-    *ngFor="let todo of state.todos; index as i;"
-    [index]="i"
-  ></todos-todo>
+  <todos-todo *ngFor="let todo of state.todos;" [todo]="todo"></todos-todo>
 </ul>
-  \`
+  \`,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
+@OvermindService.Track
 export class ListComponent {
   state$ = this.overmind.select()
   constructor(private overmind: OvermindService)

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

@@ -12,30 +12,22 @@ Let us have a look at how you create the service an expose it to components:
 h(Example, { name: "guide/usingovermindwithangular/connect" })
 ```
 
-You can also expose parts of the configuration:
+The **service** is responsible for exposing the configuration of your application and manage notifying the component when tracked state changes. The **Track** decorator primarily helps you with debugging, but also manages transferring tracking between components when it is passed as input. If you forget to any of these parts Overmind will yell at you.
 
 ```marksy
 h(Example, { name: "guide/usingovermindwithangular/connect_custom" })
 ```
 
 You can now access the **admin** state and actions directly with **state** and **actions**.
 
-## Track components
-
-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/track" })
-```
-
 ## 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. 
+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
 
-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. 
+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. By just adding the **service** to the child components as well this tracking is transferred to the child component.
 
 ```marksy
 h(Example, { name: "guide/usingovermindwithangular/passprop" })