feat(overmind-angular): change how the service is created

Author: christianalfoni

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

@@ -1,15 +1,15 @@
-// @ts-ignore
-import { Injectable } from '@angular/core'
 import { Overmind, EventType } from 'overmind'
 import { BehaviorSubject, Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 
+class ServiceBase {}
+
 // @ts-ignore
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 
 let nextComponentId = 0
 
-export const Track = (Component) => {
+const Track = (Component) => {
   if (IS_PRODUCTION) {
     return
   }
@@ -18,7 +18,7 @@ export const Track = (Component) => {
   let componentInstanceId = 0
 
   function findService(target) {
-    return Object.keys(target).find((key) => target[key] instanceof Service)
+    return Object.keys(target).find((key) => target[key] instanceof ServiceBase)
   }
 
   const targetNgAfterViewInit = Component.prototype.ngAfterViewInit
@@ -34,65 +34,83 @@ export const Track = (Component) => {
   }
 }
 
-@Injectable()
-export class Service<App extends Overmind<any>> {
-  private tree: any
-  private state$: Observable<any>
-  private subject: BehaviorSubject<any>
-  private overmind: App
-  private componentDetails: any
-  actions: App['actions']
-  effects: App['effects']
-  addMutationListener: App['addMutationListener']
-  constructor(overmind: App) {
-    this.tree = (overmind as any).proxyStateTree.getTrackStateTreeWithProxifier()
-    this.subject = new BehaviorSubject(this.tree.state)
-    this.state$ = this.subject.asObservable()
-    this.overmind = overmind
+interface IService<App extends Overmind<any>> {
+  new (): {
+    actions: App['actions']
+    effects: App['effects']
+    addMutationListener: App['addMutationListener']
+    select<T>(expr: (state: App['state']) => T): Observable<T>
+    select(): Observable<App['state']>
+  }
+  Track
+}
 
-    this.actions = this.overmind.actions
-    this.addMutationListener = this.overmind.addMutationListener
+export function createService<App extends Overmind<any>>(
+  overmind: App
+): IService<App> {
+  return class Service extends ServiceBase {
+    static Track
+    private tree: any
+    private state$: Observable<any>
+    private subject: BehaviorSubject<any>
+    private overmind: App
+    private componentDetails: any
+    actions: App['actions']
+    effects: App['effects']
+    addMutationListener: App['addMutationListener']
+    constructor() {
+      super()
+      this.tree = (overmind as any).proxyStateTree.getTrackStateTreeWithProxifier()
+      this.subject = new BehaviorSubject(this.tree.state)
+      this.state$ = this.subject.asObservable()
+      this.overmind = overmind
 
-    this.tree.track(this.onUpdate)
-  }
-  private addComponent(componentDetails) {
-    this.componentDetails = componentDetails
-    this.overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-      componentId: componentDetails.componentId,
-      componentInstanceId: componentDetails.componentInstanceId,
-      name: componentDetails.name,
-      paths: Array.from(this.tree.pathDependencies) as any,
-    })
-  }
-  private onUpdate = (mutations, paths, flushId) => {
-    this.tree.track(this.onUpdate)
-    this.subject.next(this.tree.state)
-    if (this.componentDetails) {
-      ;(window['__zone_symbol__setTimeout'] || setTimeout)(() => {
-        this.overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+      this.actions = this.overmind.actions
+      this.addMutationListener = this.overmind.addMutationListener
+
+      this.tree.track(this.onUpdate)
+    }
+    private addComponent(componentDetails) {
+      this.componentDetails = componentDetails
+      this.overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+        componentId: componentDetails.componentId,
+        componentInstanceId: componentDetails.componentInstanceId,
+        name: componentDetails.name,
+        paths: Array.from(this.tree.pathDependencies) as any,
+      })
+    }
+    private onUpdate = (mutations, paths, flushId) => {
+      this.tree.track(this.onUpdate)
+      this.subject.next(this.tree.state)
+      if (this.componentDetails) {
+        ;(window['__zone_symbol__setTimeout'] || setTimeout)(() => {
+          this.overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId: this.componentDetails.componentId,
+            componentInstanceId: this.componentDetails.componentInstanceId,
+            name: this.componentDetails.name,
+            paths: Array.from(this.tree.pathDependencies) as any,
+            flushId,
+          })
+        })
+      }
+    }
+    private ngOnDestroy() {
+      ;(this.overmind as any).proxyStateTree.disposeTree(this.tree)
+      if (this.componentDetails) {
+        this.overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
           componentId: this.componentDetails.componentId,
           componentInstanceId: this.componentDetails.componentInstanceId,
           name: this.componentDetails.name,
-          paths: Array.from(this.tree.pathDependencies) as any,
-          flushId,
         })
-      })
+      }
     }
-  }
-  private ngOnDestroy() {
-    ;(this.overmind as any).proxyStateTree.disposeTree(this.tree)
-    if (this.componentDetails) {
-      this.overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-        componentId: this.componentDetails.componentId,
-        componentInstanceId: this.componentDetails.componentInstanceId,
-        name: this.componentDetails.name,
-      })
+    select<T>(expr: (state: App['state']) => T): Observable<T>
+    select(): Observable<App['state']>
+    select() {
+      const args = arguments
+      return this.state$.pipe(
+        map((value) => (args[0] ? args[0](value) : value))
+      )
     }
   }
-  select<T>(expr: (state: App['state']) => T): Observable<T>
-  select(): Observable<App['state']>
-  select() {
-    const args = arguments
-    return this.state$.pipe(map((value) => (args[0] ? args[0](value) : value)))
-  }
 }