docs(website): update to latest api changes

Author: christianalfoni

package-lock.json

@@ -9,8 +9,6 @@ import {
 import {
   forkEachMessage,
   ensureCurrentApp,
-  addMessagesFromClient,
-  createNewApp,
   addFlushAndRunMutations,
   updateComponent,
   addComponent,
@@ -26,6 +24,10 @@ import {
   addEffect,
   setPortExists,
   isPortExistsMessage,
+  getMessages,
+  addState,
+  ensureApp,
+  addClientMessages,
 } from './operators'
 
 export const onInitialize: OnInitialize = async ({
@@ -44,9 +46,12 @@ export const onInitialize: OnInitialize = async ({
 
 const handleClientMessage: Pipe<Message> = pipe(
   ensureCurrentApp,
+  ensureApp,
+  addClientMessages,
+  getMessages,
   forkEachMessage({
     [AppMessageType.PORT_EXISTS]: setPortExists,
-    [ExecutionType.INIT]: createNewApp,
+    [ExecutionType.INIT]: addState,
     [ExecutionType.FLUSH]: addFlushAndRunMutations,
     [ExecutionType.DERIVED]: updateDerived,
     [ExecutionType.MUTATIONS]: addMutations,
@@ -60,8 +65,7 @@ const handleClientMessage: Pipe<Message> = pipe(
     [ExecutionType.OPERATOR_START]: addOperator,
     [ExecutionType.OPERATOR_END]: updateOperator,
     [ExecutionType.ACTION_END]: updateAction,
-  }),
-  addMessagesFromClient
+  })
 )
 
 export const onMessage: Pipe<Message> = pipe(

packages/node_modules/overmind-devtools/src/app/actions.ts

@@ -1,4 +1,4 @@
-import { mutate, forEach, fork, Operator, when } from 'overmind'
+import { mutate, forEach, fork, Operator, when, map } from 'overmind'
 import {
   Message,
   AppMessage,
@@ -47,12 +47,9 @@ export const isPortExistsMessage = (paths: {
     paths
   )
 
-export const createNewApp = mutate<InitMessage>(({ value: message, state }) => {
+export const addState = mutate<InitMessage>(({ value: message, state }) => {
   state.isConnecting = false
-  state.apps[message.appName] = createApp({
-    name: message.appName,
-    state: message.data.state,
-  })
+  state.apps[message.appName].state = message.data.state
 })
 
 export const addFlushAndRunMutations = mutate<FlushMessage>(
@@ -79,9 +76,18 @@ export const addFlushAndRunMutations = mutate<FlushMessage>(
   }
 )
 
-export const addMessagesFromClient = mutate<Message>(
+export const ensureApp = mutate<Message>(({ value: message, state }) => {
+  if (!state.apps[message.appName]) {
+    state.apps[message.appName] = createApp({
+      name: message.appName,
+    })
+  }
+})
+
+export const addClientMessages = mutate<Message>(
   ({ value: message, state }) => {
     state.apps[message.appName].messages = message.messages
+      .slice()
       .reverse()
       .concat(state.apps[message.appName].messages)
   }
@@ -285,11 +291,10 @@ export const addEffect = mutate<EffectMessage>(({ value: message, state }) => {
   operator.effects.push(effect)
 })
 
+export const getMessages = map<Message, AppMessage<any>[]>(({ value }) =>
+  value.messages.map((message) => ({ ...message, appName: value.appName }))
+)
+
 export const forkEachMessage = (paths: {
   [key: string]: Operator<AppMessage<any>>
-}) =>
-  forEach<Message, AppMessage<any>[]>(
-    ({ value }) =>
-      value.messages.map((message) => ({ ...message, appName: value.appName })),
-    fork(({ value }) => value.type, paths)
-  )
+}) => forEach<AppMessage<any>[]>(fork(({ value }) => value.type, paths))

packages/node_modules/overmind-devtools/src/app/operators.ts

@@ -456,52 +456,73 @@ export class Overmind<Config extends Configuration> implements BaseApp {
 
 export type Operator<C, RC = C> = TOperator<Context<C>, Context<RC>>
 
-export function pipe<A, AR = A>(aOperator: Operator<A, AR>): Operator<A, AR>
-
-export function pipe<A, AR = A, B = AR, BR = B>(
-  aOperator: Operator<A, AR>,
-  bOperator: Operator<AR, B>
-): Operator<A, BR>
-
-export function pipe<A, AR = A, B = AR, BR = B, C = BR, CR = C>(
-  aOperator: Operator<A, AR>,
-  bOperator: Operator<AR, B>,
-  cOperator: Operator<BR, C>
-): Operator<A, CR>
-
-export function pipe<A, AR = A, B = AR, BR = B, C = BR, CR = C, D = CR, DR = D>(
-  aOperator: Operator<A, AR>,
-  bOperator: Operator<AR, B>,
-  cOperator: Operator<BR, C>,
-  dOperator: Operator<CR, D>
-): Operator<A, DR>
+export function pipe<A, B>(aOperator: Operator<A, B>): Operator<A, B>
+
+export function pipe<A, B, C>(
+  aOperator: Operator<A, B>,
+  bOperator: Operator<B, C>
+): Operator<A, C>
+
+export function pipe<A, B, C, D>(
+  aOperator: Operator<A, B>,
+  bOperator: Operator<B, C>,
+  cOperator: Operator<C, D>
+): Operator<A, D>
+
+export function pipe<A, B, C, D, E>(
+  aOperator: Operator<A, B>,
+  bOperator: Operator<B, C>,
+  cOperator: Operator<C, D>,
+  dOperator: Operator<D, E>
+): Operator<A, E>
+
+export function pipe<A, B, C, D, E, F>(
+  aOperator: Operator<A, B>,
+  bOperator: Operator<B, C>,
+  cOperator: Operator<C, D>,
+  dOperator: Operator<D, E>,
+  eOperator: Operator<E, F>
+): Operator<A, F>
+
+export function pipe<A, B, C, D, E, F, G>(
+  aOperator: Operator<A, B>,
+  bOperator: Operator<B, C>,
+  cOperator: Operator<C, D>,
+  dOperator: Operator<D, E>,
+  eOperator: Operator<E, F>,
+  fOperator: Operator<F, G>
+): Operator<A, G>
 
 export function pipe(...operators) {
-  const instance = (err, val, next, final?) => {
-    if (err) return next(err)
-    const operatorsCopy = operators.slice()
-    function runNext(err, val?) {
-      const nextOperator = operatorsCopy.shift()
-      if (nextOperator) {
-        try {
-          if (val instanceof Promise) {
-            val
-              .then((promiseVal) =>
-                nextOperator(err, promiseVal, runNext, final || next)
-              )
-              .catch((promiseErr) =>
-                nextOperator(promiseErr, val, runNext, final || next)
-              )
-          } else {
-            nextOperator(err, val, runNext, final || next)
+  const instance = (err, context, next, final = next) => {
+    if (err) next(err)
+    else {
+      let operatorIndex = 0
+      const run = (runErr, runContext) =>
+        operators[operatorIndex++](runErr, runContext, runNextOperator, final)
+
+      const runNextOperator = (operatorError, operatorContext) => {
+        if (operatorError) return next(operatorError)
+        if (operatorIndex >= operators.length)
+          return next(null, operatorContext)
+
+        if (operatorContext.value instanceof Promise) {
+          operatorContext.value
+            .then((promiseValue) =>
+              run(null, { ...operatorContext, value: promiseValue })
+            )
+            .catch((promiseError) => next(promiseError, operatorContext))
+        } else {
+          try {
+            run(null, operatorContext)
+          } catch (operatorError) {
+            next(operatorError, operatorContext)
           }
-        } catch (err) {
-          runNext(err)
         }
-      } else if (err) next(err)
-      else next(null, val)
+      }
+
+      runNextOperator(null, context)
     }
-    runNext(null, val)
   }
   instance[IS_PIPE] = true
   return instance
@@ -555,18 +576,17 @@ export const map = <Input, Output>(
   }
 }
 
-export const forEach = <Input, Output extends any[]>(
-  operation: (input: Context<Input>) => Output,
-  forEachItemOperator: Operator<Output[0]>
+export const forEach = <Input extends any[]>(
+  forEachItemOperator: Operator<Input[0]>
 ): Operator<Input> => (err, context, next) => {
   if (err) next(err)
   else {
     const stopDebugOperator = startDebugOperator(
       'forEach',
-      operation.name,
+      '',
       context.execution
     )
-    let array = operation(context)
+    let array = context.value
     let evaluatingCount = array.length
 
     let hasErrored = false
@@ -650,3 +670,29 @@ export function when<Input, Output = Input>(
     else paths.false(null, context, next)
   }
 }
+
+export function wait<Input>(ms: number): Operator<Input> {
+  return (err, context, next) => {
+    if (err) next(err)
+    else setTimeout(() => next(null, context), ms)
+  }
+}
+
+export function debounce<Input>(ms: number): Operator<Input> {
+  let timeout
+  let previousFinal
+  return (err, value, next, final) => {
+    if (err) {
+      return next(err)
+    }
+    if (timeout) {
+      clearTimeout(timeout)
+      previousFinal(null, value)
+    }
+    previousFinal = final
+    timeout = setTimeout(() => {
+      timeout = null
+      next(null, value)
+    }, ms)
+  }
+}

packages/node_modules/overmind/src/index.ts

@@ -1,4 +1,14 @@
-import { pipe, map, forEach, filter, fork, when, Pipe } from './'
+import {
+  pipe,
+  map,
+  forEach,
+  filter,
+  fork,
+  when,
+  Pipe,
+  wait,
+  debounce,
+} from './'
 
 function createMockAction(pipe) {
   return (value) =>
@@ -49,7 +59,7 @@ describe('PIPE', () => {
     })
     test('map (async)', () => {
       expect.assertions(1)
-      const test = pipe<string>(
+      const test: Pipe<string> = pipe(
         map(({ value }) => Promise.resolve(value.toUpperCase()))
       )
 
@@ -60,14 +70,11 @@ describe('PIPE', () => {
     test('forEach', () => {
       expect.assertions(1)
       let runCount = 0
-      const test = pipe<string[]>(
-        forEach(
-          ({ value }) => value,
-          (_, val, next) => {
-            runCount++
-            next(null, val)
-          }
-        )
+      const test: Pipe<string[]> = pipe(
+        forEach((_, val, next) => {
+          runCount++
+          next(null, val)
+        })
       )
 
       return createMockAction(test)(['foo']).then(() => {
@@ -76,7 +83,7 @@ describe('PIPE', () => {
     })
     test('filter - truthy', () => {
       expect.assertions(1)
-      const test = pipe<string>(
+      const test: Pipe<string> = pipe(
         filter(({ value }) => value === 'foo'),
         map(({ value }) => value.toUpperCase())
       )
@@ -86,7 +93,7 @@ describe('PIPE', () => {
       })
     })
     test('filter - falsy', () => {
-      const test = pipe<string>(
+      const test: Pipe<string> = pipe(
         filter(({ value }) => value === 'bar'),
         map(({ value }) => value.toUpperCase())
       )
@@ -97,7 +104,7 @@ describe('PIPE', () => {
     })
     test('fork', () => {
       expect.assertions(1)
-      const test = pipe<string>(
+      const test: Pipe<string> = pipe(
         fork(() => 'foo', {
           foo: map(({ value }) => value.toUpperCase()),
         })
@@ -109,7 +116,7 @@ describe('PIPE', () => {
     })
     test('when', () => {
       expect.assertions(1)
-      const test = pipe<string>(
+      const test: Pipe<string> = pipe(
         when(() => true, {
           true: map(({ value }) => value.toUpperCase()),
           false: map(({ value }) => value),
@@ -120,5 +127,24 @@ describe('PIPE', () => {
         expect(value).toBe('FOO')
       })
     })
+    test('wait', () => {
+      expect.assertions(1)
+      const runTime = Date.now()
+      const test: Pipe<string> = pipe(wait(500))
+      return createMockAction(test)('foo').then(() => {
+        expect(Date.now() - runTime).toBeGreaterThanOrEqual(500)
+      })
+    })
+    test('debounce', () => {
+      expect.assertions(1)
+      const test: Pipe<string> = pipe(
+        debounce(100),
+        map(({ value }) => value.toUpperCase())
+      )
+      const action = createMockAction(test)
+      return Promise.all([action('foo'), action('foo')]).then((value) => {
+        expect(value).toEqual(['foo', 'FOO'])
+      })
+    })
   })
 })