feat(overmind-vue): add plugin factory

Author: christianalfoni

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

@@ -2,71 +2,91 @@ import { EventType } from 'overmind'
 
 let nextComponentId = 0
 
-export const createConnect = (overmind) => (...args) => {
+function createMixin(overmind, propsCallback) {
   const componentId = nextComponentId++
   let componentInstanceId = 0
+
+  return {
+    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,
+        effects: overmind.effects,
+        addMutationListener: overmind.addMutationListener,
+      }
+      if (propsCallback) {
+        Object.assign(
+          this,
+          propsCallback({
+            state: this.__tree.state,
+            actions: overmind.actions,
+            effects: overmind.effects,
+          })
+        )
+      }
+      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: this.$options.name || '',
+        paths: Array.from(this.__tree.pathDependencies) as any,
+      })
+    },
+    updated(this: any) {
+      overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+        componentId,
+        componentInstanceId: this.__componentInstanceId,
+        name: this.$options.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: this.$options.name || '',
+      })
+
+      // @ts-ignore
+      overmind.proxyStateTree.disposeTree(this.__tree)
+    },
+  }
+}
+
+export const createPlugin = (overmind) => ({
+  install(
+    Vue,
+    propsCallback = ({ state, actions, effects }) => ({
+      state,
+      actions,
+      effects,
+    })
+  ) {
+    Vue.mixin(createMixin(overmind, propsCallback))
+  },
+})
+
+export const createConnect = (overmind) => (...args) => {
   let options = args.length === 1 ? args[0] : args[1]
   let propsCallback = args.length === 1 ? null : args[0]
 
   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,
-          effects: overmind.effects,
-          addMutationListener: overmind.addMutationListener,
-        }
-        if (propsCallback) {
-          Object.assign(
-            this,
-            propsCallback({
-              state: this.__tree.state,
-              actions: overmind.actions,
-              effects: overmind.effects,
-            })
-          )
-        }
-        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)
-      },
-    }),
+    mixins: (options.mixins ? options.mixins : []).concat(
+      createMixin(overmind, propsCallback)
+    ),
     overmind,
   } as any
 }