refactor(overmind-vue): refactor connect and remove typing, TS sucks with Vue

Author: christianalfoni

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

@@ -1,98 +1,59 @@
-import { TApp, EventType, Overmind, Configuration } from 'overmind'
-import Vue, { ComponentOptions } from 'vue'
-import { IMutation } from 'proxy-state-tree'
-
-export type TConnect<Config extends Configuration> = {
-  state: TApp<Config>['state']
-  actions: TApp<Config>['actions']
-  addMutationListener: (cb: (mutation: IMutation) => void) => () => void
-}
-
-type DefaultData<V> = object | ((this: V) => object)
-type DefaultProps = Record<string, any>
-type DefaultMethods<V> = { [key: string]: (this: V, ...args: any[]) => any }
-type DefaultComputed = { [key: string]: any }
+import { EventType, Overmind } from 'overmind'
 
 let nextComponentId = 0
 
-export const createConnect = <A extends Overmind<any>>(overmind: A) => <
-  V extends Vue & A,
-  Data extends DefaultData<V>,
-  Methods extends DefaultMethods<V>,
-  Computed extends DefaultComputed,
-  PropsDef,
-  Props extends DefaultProps
->(
-  componentOptions: ComponentOptions<
-    V,
-    Data,
-    Methods,
-    Computed,
-    PropsDef,
-    Props
-  >
-): ComponentOptions<V, Data, Methods, Computed, PropsDef, Props> => {
+export const createConnect = (overmind) => (options) => {
   const componentId = nextComponentId++
   let componentInstanceId = 0
-  const beforeMount = componentOptions.beforeMount
-  const mounted = componentOptions.mounted
-  const beforeUpdate = componentOptions.beforeUpdate
-  const updated = componentOptions.updated
-  const beforeDestroy = componentOptions.beforeDestroy
-
-  componentOptions.beforeMount = function() {
-    this.__tree = (overmind as any).proxyStateTree.getTrackStateTree()
-    this.__componentInstanceId = componentInstanceId++
-    this.__onUpdate = (mutations, paths, flushId) => {
-      this.__currentFlushId = flushId
-      this.$forceUpdate()
-    }
-    this.overmind = {
-      state: this.__tree.state,
-      actions: overmind.actions,
-      addMutationListener: overmind.addMutationListener,
-    }
-    this.__tree.track(this.__onUpdate)
-    beforeMount && beforeMount.call(this)
-  }
-
-  componentOptions.beforeUpdate = function() {
-    this.__tree.track(this.__onUpdate)
-    beforeUpdate && beforeUpdate.call(this)
-  }
-
-  componentOptions.mounted = function() {
-    overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-      componentId,
-      componentInstanceId: this.__componentInstanceId,
-      name: componentOptions.name || this.name || '',
-      paths: Array.from(this.__tree.pathDependencies) as any,
-    })
-    mounted && mounted.call(this)
-  }
-
-  componentOptions.updated = function() {
-    overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
-      componentId,
-      componentInstanceId: this.__componentInstanceId,
-      name: componentOptions.name || this.name || '',
-      flushId: this.__currentFlushId,
-      paths: Array.from(this.__tree.pathDependencies) as any,
-    })
-    updated && updated.call(this)
-  }
-
-  componentOptions.beforeDestroy = function() {
-    overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-      componentId,
-      componentInstanceId: this.__componentInstanceId,
-      name: componentOptions.name || this.name || '',
-    })
-
-    // @ts-ignore
-    overmind.proxyStateTree.disposeTree(this.__tree)
-    beforeDestroy && beforeDestroy.call(this)
-  }
 
-  return componentOptions as any
+  return {
+    ...options,
+    mixins: (options.mixins ? options.mixins : []).concat({
+      beforeMount(this: any) {
+        this.__tree = (overmind as any).proxyStateTree.getTrackStateTree()
+        this.__componentInstanceId = componentInstanceId++
+        this.__onUpdate = (mutations, paths, flushId) => {
+          this.__currentFlushId = flushId
+          this.$forceUpdate()
+        }
+        this.overmind = {
+          state: this.__tree.state,
+          actions: overmind.actions,
+          addMutationListener: overmind.addMutationListener,
+        }
+        this.__tree.track(this.__onUpdate)
+      },
+      beforeUpdate(this: any) {
+        this.__tree.track(this.__onUpdate)
+      },
+      mounted(this: any) {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+          componentId,
+          componentInstanceId: this.__componentInstanceId,
+          name: options.name || this.name || '',
+          paths: Array.from(this.__tree.pathDependencies) as any,
+        })
+      },
+      updated(this: any) {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+          componentId,
+          componentInstanceId: this.__componentInstanceId,
+          name: options.name || this.name || '',
+          flushId: this.__currentFlushId,
+          paths: Array.from(this.__tree.pathDependencies) as any,
+        })
+      },
+      beforeDestroy(this: any) {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
+          componentId,
+          componentInstanceId: this.__componentInstanceId,
+          name: options.name || this.name || '',
+        })
+
+        // @ts-ignore
+        overmind.proxyStateTree.disposeTree(this.__tree)
+      },
+    }),
+    overmind,
+  } as any
 }