fix(overmind): fix async pipes, cache scoped tree in dev and proxy all effects

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -118,14 +118,6 @@ export class Overmind<Config extends Configuration> implements Configuration {
 
     this.initializeReactions(configuration, eventHub, proxyStateTree)
 
-    /*
-      Identify when the state tree should flush out changes
-
-      TODO:
-        - How should I know when an operator is connected to a flushId?
-        - Pass in operatorId on :async and set flushId directly?
-        - Store operatorId on the flush and check?
-    */
     eventHub.on(EventType.OPERATOR_ASYNC, (data) => {
       const flushData = proxyStateTree.flush(true)
       if (this.devtools && flushData.mutations.length) {
@@ -255,7 +247,9 @@ export class Overmind<Config extends Configuration> implements Configuration {
         }
         this.eventHub.emit(EventType.ACTION_START, execution)
         this.eventHub.emit(EventType.OPERATOR_START, execution)
-        const scopedTree = this.proxyStateTree.getScopedTree()
+
+        const scopedTree = (action.__scopedTree =
+          action.__scopedTree || this.proxyStateTree.getScopedTree())
         scopedTree.startMutationTracking()
         const result = action(
           this.createContext(
@@ -513,10 +507,28 @@ export function pipe(...operators) {
     if (err) next(err)
     else {
       let operatorIndex = 0
-      const run = (runErr, runContext) =>
-        operators[operatorIndex++](runErr, runContext, runNextOperator, final)
+      let asyncTimeout
+      const finalClearingAsync = (...args) => {
+        clearTimeout(asyncTimeout)
+        final(...args)
+      }
+      const run = (runErr, runContext) => {
+        asyncTimeout = setTimeout(() => {
+          context.execution.emit(EventType.OPERATOR_ASYNC, {
+            ...context.execution,
+            isAsync: true,
+          })
+        })
+        operators[operatorIndex++](
+          runErr,
+          runContext,
+          runNextOperator,
+          finalClearingAsync
+        )
+      }
 
       const runNextOperator = (operatorError, operatorContext) => {
+        clearTimeout(asyncTimeout)
         if (operatorError) return next(operatorError)
         if (operatorIndex >= operators.length)
           return next(null, operatorContext)

packages/node_modules/overmind/src/proxyfyEffects.ts

@@ -6,60 +6,68 @@ function isObject(value) {
 
 let hasWarnedConstructor = false
 
+function wrapEffect(target, prop, path, cb) {
+  const func = function(...args) {
+    const result = target[prop].apply(this, args)
+    if (result instanceof Promise) {
+      result.then((promisedResult) => {
+        // eslint-disable-next-line standard/no-callback-literal
+        cb({
+          name: path,
+          method: prop,
+          args,
+          result: promisedResult,
+        })
+      })
+    } else {
+      // eslint-disable-next-line standard/no-callback-literal
+      cb({
+        name: path,
+        method: prop,
+        args,
+        result,
+      })
+    }
+    return result
+  }
+
+  return new Proxy(func, {
+    construct(_, args) {
+      // eslint-disable-next-line
+      cb({
+        name: path,
+        method: prop,
+        args,
+        result: `[${prop.toString()}]`,
+      })
+
+      if (!hasWarnedConstructor) {
+        console.warn(
+          `EFFECTS - It is highly recommended to create a custom effect, exposing a method that deals with the instantiation of "${path}.${prop.toString()}". It improves readability and debugability of your app`
+        )
+        hasWarnedConstructor = true
+      }
+
+      return new target[prop](...args)
+    },
+  })
+}
+
 function createProxyGetHandler(
   path: string,
   cb: (effect) => void
 ): ProxyHandler<any>['get'] {
   return (target, prop) => {
     if (typeof target[prop] === 'function') {
-      const func = function(...args) {
-        const result = target[prop].apply(this, args)
-        if (result instanceof Promise) {
-          result.then((promisedResult) => {
-            // eslint-disable-next-line standard/no-callback-literal
-            cb({
-              name: path,
-              method: prop,
-              args,
-              result: promisedResult,
-            })
-          })
-        } else {
-          // eslint-disable-next-line standard/no-callback-literal
-          cb({
-            name: path,
-            method: prop,
-            args,
-            result,
-          })
-        }
-        return result
-      }
-
-      return new Proxy(func, {
-        construct(_, args) {
-          // eslint-disable-next-line
-          cb({
-            name: path,
-            method: prop,
-            args,
-            result: `[${prop.toString()}]`,
-          })
-
-          if (!hasWarnedConstructor) {
-            console.warn(
-              `EFFECTS - It is highly recommended to create a custom effect, exposing a method that deals with the instantiation of "${path}.${prop.toString()}". It improves readability and debugability of your app`
-            )
-            hasWarnedConstructor = true
-          }
-
-          return new target[prop](...args)
-        },
-      })
+      return wrapEffect(target, prop, path, cb)
     }
+
     if (isObject(target[prop])) {
       return new Proxy(target[prop], {
-        get: createProxyGetHandler(path + '.' + prop.toString(), cb),
+        get: createProxyGetHandler(
+          path ? path + '.' + prop.toString() : prop.toString(),
+          cb
+        ),
       })
     }
     return target[prop]
@@ -70,18 +78,7 @@ export function proxifyEffects<Effects>(
   effects: Effects,
   cb: (effect) => void
 ): Effects {
-  return Object.keys(effects).reduce(
-    (currentEffects, key) => {
-      const effect = effects[key]
-      if (isObject(effect)) {
-        currentEffects[key] = new Proxy(effect, {
-          get: createProxyGetHandler(key, cb),
-        })
-      } else {
-        currentEffects[key] = effect
-      }
-      return currentEffects
-    },
-    {} as Effects
-  )
+  return new Proxy(effects, {
+    get: createProxyGetHandler('', cb),
+  })
 }