fix(overmind): flush handling with devtools

Author: christianalfoni

packages/node_modules/overmind-devtools/src/components/History/index.tsx

@@ -15,6 +15,8 @@ import {
   FaVolumeDown,
   FaVolumeUp,
   FaDatabase,
+  FaClock,
+  FaCheck,
 } from 'react-icons/fa'
 
 const History: FunctionComponent = () => {
@@ -53,25 +55,43 @@ const History: FunctionComponent = () => {
                 <div className={styles.label}>
                   <FaSave />
                 </div>
+                <div className={styles.flushActionName}>
+                  {flushRecord.data.actionName}
+                </div>
                 <div className={styles.flushDetail}>
                   {flushRecord.data.components.length} <FaCode />
+                  {flushRecord.data.components.length ? (
+                    <div className={styles.flushPopup}>
+                      {flushRecord.data.components.join(', ')}
+                    </div>
+                  ) : null}
                 </div>
                 <div className={styles.flushDetail}>
                   {flushRecord.data.derived.length} <FaLink />
+                  {flushRecord.data.derived.length ? (
+                    <div className={styles.flushPopup}>
+                      {flushRecord.data.derived.join(', ')}
+                    </div>
+                  ) : null}
                 </div>
               </div>
             )
           case HistoryRecordType.Effect:
             const effectRecord = record as EffectHistoryRecord
 
+            // If the effect was sync, we do not show both start and end
+            if (
+              state.history[index - 1] &&
+              state.history[index - 1].data.effectId ===
+                effectRecord.data.effectId
+            ) {
+              return null
+            }
+
             return (
               <div className={styles.recordWrapper} key={index}>
                 <div className={styles.label}>
-                  {effectRecord.data.isPending ? (
-                    <FaVolumeDown />
-                  ) : (
-                    <FaVolumeUp />
-                  )}
+                  {effectRecord.data.isPending ? <FaClock /> : <FaCheck />}
                 </div>
                 <div className={styles.effectPath}>
                   {effectRecord.data.name

packages/node_modules/overmind-devtools/src/components/History/styles.ts

@@ -11,13 +11,27 @@ export const wrapper = css({
 
 export const label = css({
   padding: '0 0.5rem',
-  marginRight: '0.5rem',
   color: colors.blue,
   opacity: 0.25,
   display: 'flex',
   alignItems: 'center',
 })
 
+export const addComponent = css({
+  color: colors.green,
+  padding: '0 0.5rem',
+})
+
+export const updateComponent = css({
+  color: colors.white2,
+  padding: '0 0.5rem',
+})
+
+export const removeComponent = css({
+  color: colors.red,
+  padding: '0 0.5rem',
+})
+
 export const recordWrapper = css({
   display: 'flex',
   alignItems: 'center',
@@ -44,12 +58,35 @@ export const arg = css({
 })
 
 export const flushDetail = css({
+  position: 'relative',
   display: 'flex',
   margin: '0 0.5rem',
   fontSize: 12,
   alignItems: 'center',
   color: colors.white,
+  cursor: 'default',
   '> svg': {
     marginLeft: '0.25rem',
   },
+  ':hover > div': {
+    display: 'block',
+  },
+})
+export const flushActionName = css({
+  padding: '0 0.5rem',
+})
+
+export const flushPopup = css({
+  position: 'absolute',
+  boxShadow: '0px 10px 13px 0px rgba(0,0,0,0.1)',
+  display: 'none',
+  width: 300,
+  zIndex: 2,
+  borderRadius: 3,
+  fontSize: 14,
+  top: '100%',
+  left: 0,
+  backgroundColor: colors.dark,
+  color: colors.white,
+  padding: '0.5rem',
 })

packages/node_modules/overmind-devtools/src/overmind/state.ts

@@ -7,7 +7,6 @@ import {
   Flush,
   GroupedComponents,
   Tab,
-  AppMessageType,
   HistoryRecord,
   ExecutionType,
   MutationsMessage,
@@ -135,9 +134,18 @@ const state: State = {
           )
         case ExecutionType.FLUSH:
           const flushMessage = message as FlushMessage
+          const flush = state.currentApp.flushes[flushMessage.data.flushId]
           const flushRecord: FlushHistoryRecord = {
             type: HistoryRecordType.Flush,
-            data: state.currentApp.flushes[flushMessage.data.flushId],
+            data: {
+              ...flush,
+              components: flush.components.map(
+                (componentId) => state.currentApp.components[componentId].name
+              ),
+              derived: flush.derived.map(
+                (derivedId) => state.currentApp.derived[derivedId]
+              ),
+            },
           }
 
           return aggr.concat(flushRecord)

packages/node_modules/overmind-devtools/src/overmind/types.ts

@@ -132,10 +132,6 @@ export type DerivedMap = {
 export enum HistoryRecordType {
   Mutation = 'Mutation',
   Effect = 'Effect',
-  PendingEffect = 'PendingEffect',
-  AddComponent = 'AddComponent',
-  UpdateComponent = 'UpdateComponent',
-  RemoveComponent = 'RemoveComponent',
   Flush = 'Flush',
 }
 

packages/node_modules/overmind-react/src/index.ts

@@ -74,8 +74,11 @@ export const createHook = <Config extends IConfiguration>(
       ? ReactCurrentOwner.current.elementType
       : {}
   }
-  const useForceRerender = () => {
-    const [, setState] = useState(true)
+  const useForceRerender = (cb?: () => void) => {
+    const [, setState] = useState(() => {
+      cb && cb()
+      return true
+    })
     const forceRerender = (_, __, flushId): void => {
       setState(flushId)
     }
@@ -103,12 +106,13 @@ export const createHook = <Config extends IConfiguration>(
         ? nextComponentId++
         : component.__componentId
 
-    const rerenderComponent = useForceRerender()
     const { current: tree } = useRef<any>(
       (overmind as any).proxyStateTree.getTrackStateTree()
     )
 
     if (IS_PRODUCTION) {
+      const rerenderComponent = useForceRerender()
+
       tree.track(rerenderComponent)
 
       useEffect(
@@ -124,6 +128,15 @@ export const createHook = <Config extends IConfiguration>(
         currentComponentInstanceId++
       )
 
+      const rerenderComponent = useForceRerender(() => {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+          componentId: component.__componentId,
+          componentInstanceId,
+          name,
+          paths: Array.from(tree.pathDependencies) as any,
+        })
+      })
+
       tree.track((_, __, flushId) => {
         rerenderComponent(_, __, flushId)
         overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
@@ -138,12 +151,6 @@ export const createHook = <Config extends IConfiguration>(
       useLayoutEffect(() => tree.stopTracking())
 
       useEffect(() => {
-        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-          componentId: component.__componentId,
-          componentInstanceId,
-          name,
-          paths: Array.from(tree.pathDependencies) as any,
-        })
         return () => {
           ;(overmind as any).proxyStateTree.disposeTree(tree)
           overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {

packages/node_modules/overmind/src/derived.ts

@@ -3,7 +3,6 @@ import {
   ProxyStateTree,
   VALUE,
   IS_PROXY,
-  ITrackCallback,
   ITrackStateTree,
   TrackStateTree,
 } from 'proxy-state-tree'
@@ -41,18 +40,20 @@ export class Derived {
           return
         }
 
-        for (let path of paths) {
-          if (this.paths.has(path)) {
+        for (let mutationPath of paths) {
+          if (this.paths.has(mutationPath)) {
+            this.isDirty = true
             eventHub.emitAsync(EventType.DERIVED_DIRTY, {
-              path,
+              derivedPath: path,
+              path: mutationPath,
               flushId,
             })
-            this.isDirty = true
             return
           }
         }
       })
     }
+
     if (
       this.isDirty ||
       (this.value &&