feat(overmind): root statecharts

Author: christianalfoni

packages/node_modules/overmind/src/config/statecharts.test.ts

@@ -26,6 +26,26 @@ describe('Statecharts', () => {
     })).toEqual(true)
   })
 
+  test.only('should allow root chart', () => {
+    const config = {}
+
+    const chart: Statechart<typeof config, {
+      foo: void
+    }> = {
+      initial: 'foo',
+      states: {
+        foo: {},
+      },
+    }
+    const instance = createOvermind(statecharts(config, chart))
+
+    expect(instance.state.states).toEqual([['ROOT_CHART', 'foo']])
+    expect(instance.state.actions).toEqual({})
+    expect(instance.state.matches({
+        foo: true
+    })).toEqual(true)
+  })
+
   test('should filter actions', () => {
     const increaseCount: Action = ({ state }) => {
       state.count++

packages/node_modules/overmind/src/config/statecharts.ts

@@ -9,6 +9,7 @@ import {
 } from '../'
 
 const ACTIONS = 'ACTIONS'
+const ROOT_CHART = 'ROOT_CHART'
 
 export interface Statechart<C extends IConfiguration, S extends {
   [state: string]: Statecharts | void
@@ -182,15 +183,18 @@ function getStateTarget(charts, path) {
   )
 }
 
-type Match<T extends Statecharts> = {
+type Match<T extends Statecharts | Statechart<any, any>> = T extends Statecharts ? {
   [I in keyof T]?: {
     [S in keyof T[I]["states"]]?: T[I]["states"][S]["charts"] extends void ? boolean : boolean | Match<T[I]["states"][S]["charts"]>
   }
-}
+} : T extends Statechart<any, any> ? {
+  [S in keyof T["states"]]?: T["states"][S]["charts"] extends void ? boolean : boolean | Match<T["states"][S]["charts"]>
+} : never
+
 
-export function statecharts<C extends IConfiguration, Charts extends Statecharts>(
+export function statecharts<C extends IConfiguration, Charts extends Statecharts | Statechart<any, any>>(
   config: C,
-  charts: Charts
+  chartsDefinition: Charts
 ): IConfig<{
   onInitialize: C['onInitialize']
   state: C['state'] & {
@@ -204,6 +208,9 @@ export function statecharts<C extends IConfiguration, Charts extends Statecharts
   onInitialize: C['onInitialize']
 } {
   let currentInstance
+
+  const IS_ROOT_CHART = ('initial' in chartsDefinition && 'states' in chartsDefinition)
+  const charts = (IS_ROOT_CHART ? { [ROOT_CHART]: chartsDefinition} : chartsDefinition) as Statecharts
   const actions = config.actions || {}
   const state = config.state || {}
 
@@ -232,6 +239,10 @@ export function statecharts<C extends IConfiguration, Charts extends Statecharts
         context.state,
         context.execution.namespacePath
       )
+      const actionsTarget = getTarget(
+        context.actions,
+        context.execution.namespacePath
+      )
 
       const statePaths = stateTarget.states.slice()
 
@@ -242,7 +253,7 @@ export function statecharts<C extends IConfiguration, Charts extends Statecharts
           const target = getStateTarget(charts, state)
 
           if (config.actions && config.actions[target.entry]) {
-            config.actions[target.entry](context)
+            actionsTarget[ACTIONS][target.entry](context)
           }
 
           state.pop()
@@ -265,6 +276,11 @@ export function statecharts<C extends IConfiguration, Charts extends Statecharts
       states: getInitialStates(charts),
       actions: ((state) => getCanTransitionActions(actions, charts, state)) as any,
       matches: (state) => (match) => {
+        if (IS_ROOT_CHART) {
+          match = {
+            [ROOT_CHART]: match
+          }
+        }
         const matchPaths = getMatchPaths(match)
 
         for (let x = 0; x < matchPaths.length; x++) {
@@ -299,6 +315,8 @@ export function statecharts<C extends IConfiguration, Charts extends Statecharts
           const canTransition = stateTarget.actions[key]
           if (currentTransitionAction && !canTransition) {
             console.warn(`Overmind Statecharts: Transition action "${currentTransitionAction}" is calling transition action "${key}" synchronously. The previous transition is not done yet and "${key}" will be ignored. Consider calling it asynchronously `)
+          } else if (!canTransition && process.env.NODE_ENV === 'development') {
+            console.warn(`You tried to call action "${key}", but it was blocked by the statechart. You are not supposed to call this action in the current state of the chart. This warning only appear during development`)
           }
 
           return {

packages/overmind-website/examples/guide/statecharts/condition.ts

@@ -35,9 +35,7 @@ const loginChart: Statechart<typeof config, {
   }
 }
 
-export default statecharts(config, {
-  login: loginChart
-})
+export default statecharts(config, loginChart)
 `,
         },
       ]

packages/overmind-website/examples/guide/statecharts/define.ts

@@ -47,9 +47,7 @@ const loginChart: Statechart<typeof config, {
   }
 }
 
-export default statecharts(config, {
-  login: loginChart
-})
+export default statecharts(config, loginChart)
 `,
         },
       ]
@@ -95,9 +93,7 @@ const loginChart = {
   }
 }
 
-export default statecharts(config, {
-  login: loginChart
-})
+export default statecharts(config, loginChart)
 `,
         },
       ]

packages/overmind-website/examples/guide/statecharts/matches.ts

@@ -4,9 +4,7 @@ export default (ts, view) =>
         {
           code: `
 state.login.matches({
-  login: {
-    LOGIN: true
-  }
+  LOGIN: true
 })
 `,
         },
@@ -15,9 +13,7 @@ state.login.matches({
         {
           code: `
 state.login.matches({
-  login: {
-    LOGIN: true
-  }
+  LOGIN: true
 })
 `,
         },

packages/overmind-website/examples/guide/statecharts/matches_multiple.ts

@@ -5,11 +5,9 @@ export default (ts, view) =>
           code: `
 // Nested
 const isSearching = state.dashboard.matches({
-  issues: {
-    LIST: {
-      search: {
-        SEARCHING: true
-      }
+  LIST: {
+    search: {
+      SEARCHING: true
     }
   }
 })
@@ -41,11 +39,9 @@ const isOnlyDownloading = state.files.matches({
           code: `
 // Nested
 const isSearching = state.dashboard.matches({
-  issues: {
-    LIST: {
-      search: {
-        SEARCHING: true
-      }
+  LIST: {
+    search: {
+      SEARCHING: true
     }
   }
 })

packages/overmind-website/examples/guide/statecharts/nested.ts

@@ -94,9 +94,7 @@ const dashboardChart: Statechart<typeof config, {
   }
 }
 
-export default statecharts(config, {
-  dashboard: dashboardChart
-})
+export default statecharts(config, dashboardChart)
 `,
         },
       ]

packages/overmind-website/guides/intermediate/06_statecharts.md

@@ -86,7 +86,7 @@ As you can see we have no state indicating that we have received an error, like
   password: '',
   user: null,
   authenticationError: null,
-  states: [['login', 'LOGIN']],
+  states: [['ROOT_CHART', 'LOGIN']],
   actions: {
     changeUsername: true,
     changePassword: true,