feat(overmind): server Side Rendering

Author: christianalfoni

packages/node_modules/overmind/src/index.ts

@@ -18,7 +18,9 @@ import {
   NestedPartial,
   Options,
   ResolveActions,
-  ResolveMockActions,
+  DefaultMode,
+  TestMode,
+  SSRMode,
   ResolveState,
 } from './internalTypes'
 import { proxifyEffects } from './proxyfyEffects'
@@ -31,6 +33,11 @@ import {
   IState,
   IOnInitialize,
 } from './types'
+import {
+  deepCopy,
+  MockedEventEmitter,
+  makeStringifySafeMutations,
+} from './utils'
 
 export * from './types'
 
@@ -52,6 +59,11 @@ const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 const IS_DEVELOPMENT =
   !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
 const IS_OPERATOR = Symbol('operator')
+
+const MODE_DEFAULT = Symbol('MODE_DEFAULT')
+const MODE_TEST = Symbol('MODE_TEST')
+const MODE_SSR = Symbol('MODE_SSR')
+
 let hasWarnedDeprecatedValue = false
 
 function warnValueDeprecation() {
@@ -63,31 +75,33 @@ function warnValueDeprecation() {
   }
 }
 
-export const makeStringifySafeMutations = (mutations: IMutation[]) => {
-  return mutations.map((mutation) => ({
-    ...mutation,
-    args: safeValues(mutation.args),
-  }))
+export interface OvermindSSR<Config extends IConfiguration>
+  extends Overmind<Config> {
+  hydrate(): IMutation[]
 }
 
-function deepCopy(obj) {
-  if (isPlainObject(obj)) {
-    return Object.keys(obj).reduce((aggr, key) => {
-      aggr[key] = deepCopy(obj[key])
+export function createOvermindSSR<Config extends IConfiguration>(
+  config: Config
+): OvermindSSR<Config> {
+  const ssr = new Overmind(
+    config,
+    {
+      devtools: false,
+    },
+    {
+      mode: MODE_SSR,
+    } as SSRMode
+  ) as OvermindSSR<Config>
 
-      return aggr
-    }, {})
-  } else if (Array.isArray(obj)) {
-    return obj.map((item) => deepCopy(item))
+  ssr.state = (ssr as any).proxyStateTree.getMutationTree().state
+  ssr.hydrate = () => {
+    return (ssr as any).proxyStateTree.mutationTree.flush().mutations
   }
-
-  return obj
+  return ssr
 }
 
-export interface OvermindMock<Config extends IConfiguration> {
-  actions: ResolveMockActions<Config['actions']>
-  effects: Config['effects']
-  state: ResolveState<Config['state']>
+export interface OvermindMock<Config extends IConfiguration>
+  extends Overmind<Config> {
   onInitialize: () => Promise<IMutation[]>
 }
 
@@ -101,7 +115,10 @@ export function createOvermindMock<Config extends IConfiguration>(
     }),
     {
       devtools: false,
-      testMode: {
+    },
+    {
+      mode: MODE_TEST,
+      options: {
         effectsCallback: (effect) => {
           const mockedEffect = (effect.name
             ? effect.name.split('.')
@@ -124,33 +141,50 @@ export function createOvermindMock<Config extends IConfiguration>(
           return execution.flush().mutations
         },
       },
-    }
-  )
+    } as TestMode
+  ) as OvermindMock<Config>
+
+  const action = (mock as any).createAction('onInitialize', config.onInitialize)
+
+  mock.onInitialize = () => action(mock)
 
   return mock as any
 }
 
+export function createOvermind<Config extends IConfiguration>(
+  config: Config,
+  options?: Options
+): Overmind<Config> {
+  return new Overmind(config, options, { mode: MODE_DEFAULT })
+}
+
 const hotReloadingCache = {}
 
 // We do not use IConfig<Config> directly to type the class in order to avoid
 // the 'import(...)' function to be used in exported types.
-
 export class Overmind<ThisConfig extends IConfiguration>
   implements IConfiguration {
   private proxyStateTree: ProxyStateTree<object>
   private actionReferences: Function[] = []
   private nextExecutionId: number = 0
   private options: Options
+  private mode: DefaultMode | TestMode | SSRMode
   initialized: Promise<any>
   eventHub: EventEmitter<Events>
   devtools: Devtools
   actions: ResolveActions<ThisConfig['actions']>
   state: ResolveState<ThisConfig['state']>
   effects: ThisConfig['effects'] & {}
-  constructor(configuration: ThisConfig, options: Options = {}) {
-    const name = options.name || 'MyConfig'
-
-    if (IS_DEVELOPMENT && !options.testMode) {
+  constructor(
+    configuration: ThisConfig,
+    options: Options = {},
+    mode: DefaultMode | TestMode | SSRMode = {
+      mode: MODE_DEFAULT,
+    } as DefaultMode
+  ) {
+    const name = options.name || 'OvermindApp'
+
+    if (IS_DEVELOPMENT && mode.mode === MODE_DEFAULT) {
       if (hotReloadingCache[name]) {
         return hotReloadingCache[name]
       } else {
@@ -161,7 +195,10 @@ export class Overmind<ThisConfig extends IConfiguration>
     /*
       Set up an eventHub to trigger information from derived, computed and reactions
     */
-    const eventHub = new EventEmitter<Events>()
+    const eventHub =
+      mode.mode === MODE_SSR
+        ? new MockedEventEmitter()
+        : new EventEmitter<Events>()
 
     /*
       Create the proxy state tree instance with the state and a wrapper to expose
@@ -170,27 +207,34 @@ export class Overmind<ThisConfig extends IConfiguration>
     const proxyStateTree = new ProxyStateTree(
       this.getState(configuration) as any,
       {
-        devmode: !IS_PRODUCTION,
+        devmode: IS_DEVELOPMENT,
         dynamicWrapper: (_, path, func) => func(eventHub, proxyStateTree, path),
-        onGetter: (path, value) => {
-          // We need to let any initial values be set first
-          setTimeout(() => {
-            this.eventHub.emit(EventType.GETTER, {
-              path,
-              value: safeValue(value),
-            })
-          })
-        },
+        onGetter: IS_DEVELOPMENT
+          ? (path, value) => {
+              // We need to let any initial values be set first
+              setTimeout(() => {
+                this.eventHub.emit(EventType.GETTER, {
+                  path,
+                  value: safeValue(value),
+                })
+              })
+            }
+          : undefined,
       }
     )
 
     this.state = proxyStateTree.state
     this.effects = configuration.effects || {}
     this.proxyStateTree = proxyStateTree
-    this.eventHub = eventHub
+    this.eventHub = eventHub as EventEmitter<Event>
     this.options = options
+    this.mode = mode
 
-    if (!IS_PRODUCTION && typeof window !== 'undefined') {
+    if (
+      IS_DEVELOPMENT &&
+      mode.mode === MODE_DEFAULT &&
+      typeof window !== 'undefined'
+    ) {
       let warning = 'OVERMIND: You are running in DEVELOPMENT mode.'
       if (options.logProxies !== true) {
         const originalConsoleLog = console.log
@@ -246,7 +290,7 @@ export class Overmind<ThisConfig extends IConfiguration>
         nextTick && clearTimeout(nextTick)
         nextTick = setTimeout(flushTree, 0)
       })
-    } else if (!options.testMode) {
+    } else if (mode.mode === MODE_DEFAULT) {
       eventHub.on(EventType.OPERATOR_ASYNC, (execution) => {
         const flushData = execution.flush()
         if (this.devtools && flushData.mutations.length) {
@@ -279,15 +323,7 @@ export class Overmind<ThisConfig extends IConfiguration>
     */
     this.actions = this.getActions(configuration)
 
-    if (options.testMode) {
-      const action = this.createAction(
-        'onInitialize',
-        configuration.onInitialize
-      )
-
-      const overmind = this as any
-      overmind.onInitialize = () => action(this)
-    } else if (configuration.onInitialize) {
+    if (mode.mode === MODE_DEFAULT && configuration.onInitialize) {
       const onInitialize = this.createAction(
         'onInitialize',
         configuration.onInitialize
@@ -390,7 +426,12 @@ export class Overmind<ThisConfig extends IConfiguration>
                       operatorId: finalContext.execution.operatorId - 1,
                     })
                   if (err) reject(err)
-                  else resolve(this.options.testMode && finalContext.execution)
+                  else
+                    resolve(
+                      this.mode.mode === MODE_TEST
+                        ? finalContext.execution
+                        : undefined
+                    )
                 }
               )
             : resolve(
@@ -454,12 +495,13 @@ export class Overmind<ThisConfig extends IConfiguration>
           await result
         }
 
-        return this.options.testMode && execution
+        return this.mode.mode === MODE_TEST ? execution : undefined
       }
     }
 
-    if (this.options.testMode) {
-      const actionCallback = this.options.testMode.actionCallback
+    if (this.mode.mode === MODE_TEST) {
+      const mode = this.mode as TestMode
+      const actionCallback = mode.options.actionCallback
 
       return async (value?) => {
         const result = await actionFunc(value)
@@ -478,9 +520,12 @@ export class Overmind<ThisConfig extends IConfiguration>
     return proxifyEffects(this.effects, (effect) => {
       let result
       try {
-        result = this.options.testMode
-          ? this.options.testMode.effectsCallback(effect)
-          : effect.func.apply(this, effect.args)
+        if (this.mode.mode === MODE_TEST) {
+          const mode = this.mode as TestMode
+          result = mode.options.effectsCallback(effect)
+        } else {
+          result = effect.func.apply(this, effect.args)
+        }
       } catch (error) {
         // eslint-disable-next-line standard/no-callback-literal
         this.eventHub.emit(EventType.EFFECT, {
@@ -657,6 +702,21 @@ export class Overmind<ThisConfig extends IConfiguration>
   addFlushListener = (cb: IFlushCallback) => {
     return this.proxyStateTree.onFlush(cb)
   }
+  rehydrate(state: object, mutations: IMutation[]) {
+    mutations.forEach((mutation) => {
+      const pathArray = mutation.path.split('.')
+      const key = pathArray.pop()
+      const target = pathArray.reduce((aggr, key) => aggr[key], state)
+
+      if (mutation.method === 'set') {
+        target[key] = mutation.args[0]
+      } else if (mutation.method === 'unset') {
+        delete target[key]
+      } else {
+        target[key][mutation.method](...mutation.args)
+      }
+    })
+  }
 }
 
 /*

packages/node_modules/overmind/src/internalTypes.ts

@@ -14,7 +14,15 @@ export type Options = {
   name?: string
   devtools?: string | boolean
   logProxies?: boolean
-  testMode?: {
+}
+
+export type DefaultMode = {
+  mode: Symbol
+}
+
+export type TestMode = {
+  mode: Symbol
+  options: {
     effectsCallback: (
       effect: {
         effectId: number
@@ -27,6 +35,10 @@ export type Options = {
   }
 }
 
+export type SSRMode = {
+  mode: Symbol
+}
+
 export enum EventType {
   ACTION_START = 'action:start',
   ACTION_END = 'action:end',

packages/node_modules/overmind/src/mock.test.ts

@@ -1,10 +1,5 @@
 import { createOvermindMock, IAction, IOnInitialize } from './'
 
-type State = {
-  foo: string
-  upperFoo: string
-}
-
 describe('Mock', () => {
   test('should run action tests', async () => {
     type State = {