feat(overmind-devtools): add actions, operators and flushes

Author: christianalfoni

package-lock.json

@@ -31,7 +31,8 @@
     "styled-components": "3.3.3",
     "ws": "5.2.1",
     "color": "3.0.0",
-    "tslib": "1.9.3"
+    "tslib": "1.9.3",
+    "color-hash": "1.0.3"
   },
   "devDependencies": {
     "@types/jest": "23.1.4",

package.json

@@ -1,5 +1,7 @@
-export const getEventValue = (_, event: React.ChangeEvent<HTMLInputElement>) =>
-  event.currentTarget.value
+export function getEventValue(_, event: React.ChangeEvent<HTMLInputElement>) {
+  return Promise.resolve(event.currentTarget.value)
+}
 
-export const preventEventDefault = (_, event: React.FormEvent) =>
+export function preventEventDefault(_, event: React.FormEvent) {
   event.preventDefault()
+}

packages/demos/todomvc/src/app/helpers.ts

@@ -2,17 +2,22 @@ import { State, Todo } from './state'
 
 let nextTodoId = 0
 
-export const setNewTodoTitle = (state: State, value: string) =>
-  (state.newTodoTitle = value)
+export function setNewTodoTitle(state: State, value: string) {
+  state.newTodoTitle = value
+}
 
-export const addTodo = (state: State) =>
+export function addTodo(state: State) {
   state.todos.unshift({
     id: String(nextTodoId++),
     title: state.newTodoTitle,
     completed: false,
   })
+}
 
-export const clearNewTodoTitle = (state: State) => (state.newTodoTitle = '')
+export function clearNewTodoTitle(state: State) {
+  state.newTodoTitle = ''
+}
 
-export const toggleCompleted = (_, todo: Todo) =>
-  (todo.completed = !todo.completed)
+export function toggleCompleted(_, todo: Todo) {
+  todo.completed = !todo.completed
+}

packages/demos/todomvc/src/app/mutations.ts

@@ -33,5 +33,7 @@
 		"@types/node": "^10.5.1",
 		"tslib": "^1.9.3"
 	},
-	"devDependencies": {}
+	"devDependencies": {
+		"typescript": "^2.9.2"
+	}
 }

packages/node_modules/betsy/package.json

@@ -9,8 +9,8 @@
 		"overmind-devtools": "bin.js"
 	},
 	"scripts": {
-    "start": "concurrently \"electron ./backend/main\" \"webpack-dev-server --port 3000\"",
-    "build": "webpack",
+		"start": "concurrently \"electron ./backend/main\" \"webpack-dev-server --port 3000\"",
+		"build": "webpack",
 		"typecheck": "tsc --noEmit",
 		"test": "jest",
 		"test:watch": "jest --watch --updateSnapshot --coverage false",
@@ -23,10 +23,11 @@
 	],
 	"dependencies": {
 		"@types/node": "^10.5.1",
-		"overmind": "next",
 		"color": "^3.0.0",
+		"color-hash": "^1.0.3",
 		"electron": "^2.0.4",
 		"electron-json-storage": "^4.1.0",
+		"overmind": "next",
 		"react": "^16.4.1",
 		"react-dom": "^16.4.1",
 		"styled-components": "^3.3.3",

packages/node_modules/overmind-devtools/package.json

@@ -9,7 +9,7 @@ export default (action: Action) => {
     .mutation(mutations.performMutationsByMessageType)
 
   const loadDevtools = action()
-    // .do((_, { storage }) => storage.clear())
+    // .do(({ storage }) => storage.clear())
     .map(helpers.getAppsFromStorage)
     .mutation(mutations.setApps)
     .map(helpers.getCurrentPortFromStorage)
@@ -38,6 +38,14 @@ export default (action: Action) => {
     mutations.toggleExpandStatePath
   )
 
+  const selectAction = action<string>()
+    .mutation(mutations.toggleActionItemCollapse)
+    .mutation(mutations.selectAction)
+
+  const toggleCollapsed = action<{ isCollapsed: boolean }>().mutation(
+    mutations.toggleCollapsed
+  )
+
   return {
     loadDevtools,
     setError,
@@ -46,5 +54,7 @@ export default (action: Action) => {
     changeTab,
     openApp,
     toggleExpandState,
+    selectAction,
+    toggleCollapsed,
   }
 }

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

@@ -33,7 +33,13 @@ export const componentsStatePathCount = derived((state: State) =>
 )
 
 export const flushes = derived((state: State) =>
-  state.currentApp.flushes.slice(1).reverse()
+  Object.keys(state.currentApp.flushes)
+    .sort(
+      (idA, idB) =>
+        state.currentApp.flushes[idA].flushId -
+        state.currentApp.flushes[idB].flushId
+    )
+    .map((id) => state.currentApp.flushes[id])
 )
 
 export const flushesMutationsCount = derived((state: State) =>
@@ -50,3 +56,7 @@ export const flushesStatePathCount = derived(
       )
     }, []).length
 )
+
+export const currentAction = derived(
+  (state: State) => state.currentApp.actions[state.currentApp.currentActionId]
+)

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

@@ -1,18 +1,27 @@
 import { Context } from './'
 
-export const getAppsFromStorage = ({ storage }: Context) => storage.get('apps')
+export function getAppsFromStorage({ storage }: Context) {
+  return storage.get('apps')
+}
 
-export const getCurrentPortFromStorage = ({ storage }: Context) =>
-  storage.get('currentPort')
+export function getCurrentPortFromStorage({ storage }: Context) {
+  return storage.get('currentPort')
+}
 
-export const getNewPortFromState = ({ state }: Context) => state.newPortValue
+export function getNewPortFromState({ state }: Context) {
+  return state.newPortValue
+}
 
-export const storeApps = ({ storage, state }: Context) =>
+export function storeApps({ storage, state }: Context) {
   storage.set('apps', state.apps)
+}
 
-export const toNumber = (_, value: string) => String(Number(value))
+export function toNumber(_, value: string) {
+  return String(Number(value))
+}
 
-export const connectCurrentPort = (action: (message: any) => void) => ({
-  state,
-  connector,
-}: Context) => connector.addPort(state.currentPort, action)
+export function connectCurrentPort(action: (message: any) => void) {
+  return function connectCurrentPort({ state, connector }: Context) {
+    connector.addPort(state.currentPort, action)
+  }
+}