fix(overmind): object prop delete, react hmr and sync events

christianalfoni · christianalfoni · commit c76a49d4d7a3 · 2018-08-22T21:53:41.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "prismjs": "1.15.0",
     "react": "16.4.1",
     "react-dom": "16.4.1",
+    "react-hot-loader": "^4.3.4",
     "styled-components": "3.3.3",
     "tslib": "1.9.3",
     "vue": "2.5.16",
diff --git a/packages/demos/todomvc/.babelrc b/packages/demos/todomvc/.babelrc
@@ -1,4 +1,5 @@
 {
+  "plugins": ["../../../node_modules/react-hot-loader/babel"],
   "presets": [
     "../../../node_modules/@babel/preset-react",
     "../../../node_modules/@babel/preset-typescript",
diff --git a/packages/demos/todomvc/package.json b/packages/demos/todomvc/package.json
@@ -7,7 +7,7 @@
 	"license": "MIT",
 	"repository": "git+https://github.com/cerebral/overmind.git",
 	"scripts": {
-		"start": "webpack-dev-server --port 4000",
+		"start": "webpack-dev-server --port 4000 --hot",
 		"build": "webpack",
 		"typecheck": "tsc --noEmit",
 		"prepare": "npm run build",
diff --git a/packages/demos/todomvc/src/app/actions.ts b/packages/demos/todomvc/src/app/actions.ts
@@ -16,6 +16,8 @@ export const addTodo: Action<React.FormEvent> = (action) =>
     .do(operations.preventEventDefault)
     .mutation(mutations.addTodo)
     .mutation(mutations.clearNewTodoTitle)
+    .map(() => Promise.resolve())
+    .map(() => Promise.resolve())
 
 export const toggleCompleted: Action<Todo> = (action) =>
   action<Todo>().mutation(mutations.toggleCompleted)
diff --git a/packages/demos/todomvc/src/components/AddTodo/index.tsx b/packages/demos/todomvc/src/components/AddTodo/index.tsx
@@ -5,6 +5,7 @@ import { Wrapper, Input, Button, Form } from './elements'
 const AddTodo: React.SFC<Connect> = ({ app }) => (
   <Wrapper>
     {app.state.testCount(5)}
+    {app.state.count}
     <Form onSubmit={app.actions.addTodo}>
       <Input
         placeholder="I need to..."
diff --git a/packages/demos/todomvc/src/components/App/index.tsx b/packages/demos/todomvc/src/components/App/index.tsx
@@ -1,3 +1,4 @@
+import { hot } from 'react-hot-loader'
 import * as React from 'react'
 import { Wrapper, InnerWrapper } from './elements'
 import AddTodo from '../AddTodo'
@@ -12,4 +13,4 @@ const App: React.SFC = () => (
   </Wrapper>
 )
 
-export default App
+export default hot(module)(App)
diff --git a/packages/node_modules/action-chain/src/ActionBase.ts b/packages/node_modules/action-chain/src/ActionBase.ts
@@ -113,7 +113,7 @@ export class ActionBase<Effects> {
             executionContextWithPath
           )
 
-          this.actionChain.emitAsync('operator:start', {
+          this.actionChain.emit('operator:start', {
             type,
             name,
             path,
@@ -122,15 +122,15 @@ export class ActionBase<Effects> {
           const result = cb(effects, currentValue)
 
           if (result instanceof Promise) {
-            this.actionChain.emitAsync('operator:async', {
+            this.actionChain.emit('operator:async', {
               type,
               name,
               path,
               isAsync: true,
               ...thisExecution,
             })
             return result.then((promiseResult) => {
-              this.actionChain.emitAsync('operator:end', {
+              this.actionChain.emit('operator:end', {
                 type,
                 name,
                 path,
@@ -142,7 +142,7 @@ export class ActionBase<Effects> {
             })
           }
 
-          this.actionChain.emitAsync('operator:end', {
+          this.actionChain.emit('operator:end', {
             type,
             name,
             path,
diff --git a/packages/node_modules/overmind-devtools/src/app/mutations.ts b/packages/node_modules/overmind-devtools/src/app/mutations.ts
@@ -93,6 +93,7 @@ export const performMutationsByMessageType: Mutation<Message> = (
   message
 ) => {
   message.message.forEach((clientMessage) => {
+    console.log(clientMessage)
     switch (clientMessage.type) {
       case 'init': {
         state.apps[message.port] = createApp({
diff --git a/packages/node_modules/overmind/src/Devtools.ts b/packages/node_modules/overmind/src/Devtools.ts
@@ -88,8 +88,10 @@ export default class Devtools {
     )
   }
   send(message: Message) {
-    this.buffer.push(JSON.stringify(message))
-    this.sendBuffer()
+    setTimeout(() => {
+      this.buffer.push(JSON.stringify(message))
+      this.sendBuffer()
+    })
   }
   private sendBuffer = debounce(function() {
     if (this.isConnected) {
diff --git a/packages/node_modules/proxy-state-tree/src/index.test.ts b/packages/node_modules/proxy-state-tree/src/index.test.ts
@@ -590,9 +590,7 @@ describe('ITERATIONS', () => {
     const state = tree.get()
     function update() {
       const trackId = tree.startPathsTracking()
-      Object.keys(state.items).forEach((key) => {
-        state.items[key] // eslint-disable-line
-      })
+      state.items // eslint-disable-line
       const paths = tree.clearPathsTracking(trackId)
 
       if (mutationListener) {
@@ -602,13 +600,13 @@ describe('ITERATIONS', () => {
       }
 
       if (runCount === 1) {
-        expect(paths).toEqual(new Set(['items', 'items.foo']))
+        expect(paths).toEqual(new Set(['items']))
       }
       if (runCount === 2) {
-        expect(paths).toEqual(new Set(['items', 'items.foo', 'items.bar']))
+        expect(paths).toEqual(new Set(['items']))
       }
       if (runCount === 3) {
-        expect(paths).toEqual(new Set(['items', 'items.bar']))
+        expect(paths).toEqual(new Set(['items']))
       }
 
       runCount++
diff --git a/packages/node_modules/proxy-state-tree/src/proxify.ts b/packages/node_modules/proxy-state-tree/src/proxify.ts
@@ -154,7 +154,7 @@ function createObjectProxy(tree, value, path) {
         )
       }
       if (shouldTrackMutations(tree, nestedPath)) {
-        if (!(prop in target)) {
+        if (prop in target) {
           tree.objectChanges.add(path)
         }
 
diff --git a/packages/node_modules/react-overmind/src/index.ts b/packages/node_modules/react-overmind/src/index.ts
@@ -74,7 +74,6 @@ export default class ReactApp<
       }>
     >
   > => {
-    const componentId = nextComponentId++
     let componentInstanceId = 0
     const instance = this
     const isClassComponent =
@@ -88,7 +87,7 @@ export default class ReactApp<
         this.__isUnmounting = true
         if (this.__mutationListener) {
           instance.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-            componentId,
+            componentId: this.__componentId,
             componentInstanceId: this.props.app.__componentInstanceId,
             name: Component.name || '',
           })
@@ -98,6 +97,9 @@ export default class ReactApp<
         originalWillUnmount && originalWillUnmount.call(this)
       }
       Component.prototype.render = function() {
+        if (typeof this.__componentId === 'undefined') {
+          this.__componentId = nextComponentId++
+        }
         const trackId = instance.trackState()
         const value = originalRender.call(this)
         const paths = instance.clearTrackState(trackId)
@@ -106,7 +108,7 @@ export default class ReactApp<
           this.__mutationListener.update(paths)
         } else {
           instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-            componentId,
+            componentId: this.__componentId,
             componentInstanceId: this.props.app.__componentInstanceId,
             name: Component.name || '',
             paths: Array.from(paths),
@@ -118,7 +120,7 @@ export default class ReactApp<
                 return
               }
               instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
-                componentId,
+                componentId: this.__componentId,
                 componentInstanceId: this.props.app.__componentInstanceId,
                 name: Component.name || '',
                 paths: Array.from(paths),
@@ -148,7 +150,7 @@ export default class ReactApp<
     > {
       __mutationListener: any
       __isUnmounting: boolean
-      __componentId = componentId
+      __componentId: number
       __componentInstanceId = componentInstanceId++
       __reactionFactory = instance.createReactionFactory(
         Component.name || Component.displayName
@@ -157,7 +159,7 @@ export default class ReactApp<
         this.__isUnmounting = true
         if (this.__mutationListener) {
           instance.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-            componentId,
+            componentId: this.__componentId,
             componentInstanceId: this.__componentInstanceId,
             name: Component.name || '',
           })
@@ -184,7 +186,7 @@ export default class ReactApp<
           this.__mutationListener.update(paths)
         } else {
           instance.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-            componentId,
+            componentId: this.__componentId,
             componentInstanceId: this.__componentInstanceId,
             name: Component.name || '',
             paths: Array.from(paths),
@@ -196,7 +198,7 @@ export default class ReactApp<
                 return
               }
               instance.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
-                componentId,
+                componentId: this.__componentId,
                 componentInstanceId: this.__componentInstanceId,
                 name: Component.name || '',
                 paths: Array.from(paths),
@@ -224,6 +226,10 @@ export default class ReactApp<
           return this.renderClassComponent()
         }
 
+        if (typeof this.__componentId === 'undefined') {
+          this.__componentId = nextComponentId++
+        }
+
         return this.renderStatelessComponent()
       }
     }
diff --git a/packages/overmind-website/examples/guide/getstarted/devtools.ts b/packages/overmind-website/examples/guide/getstarted/devtools.ts
@@ -5,7 +5,7 @@ export const js = [
 {
   "name": "my-app",
   "scripts": {
-    "devtools": "npx overmind-devtools"
+    "devtools": "npx overmind-devtools@next"
   }
 }
   `,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
	`2`	`+ "plugins": ["../../../node_modules/react-hot-loader/babel"],`
`2`	`3`	`"presets": [`
`3`	`4`	`"../../../node_modules/@babel/preset-react",`
`4`	`5`	`"../../../node_modules/@babel/preset-typescript",`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { hot } from 'react-hot-loader'`
`1`	`2`	`import * as React from 'react'`
`2`	`3`	`import { Wrapper, InnerWrapper } from './elements'`
`3`	`4`	`import AddTodo from '../AddTodo'`
`@@ -12,4 +13,4 @@ const App: React.SFC = () => (`
`12`	`13`	`</Wrapper>`
`13`	`14`	`)`
`14`	`15`
`15`		`-export default App`
	`16`	`+export default hot(module)(App)`
Original file line number	Diff line number	Diff line change
`@@ -88,8 +88,10 @@ export default class Devtools {`
`88`	`88`	`)`
`89`	`89`	`}`
`90`	`90`	`send(message: Message) {`
`91`		`- this.buffer.push(JSON.stringify(message))`
`92`		`- this.sendBuffer()`
	`91`	`+ setTimeout(() => {`
	`92`	`+ this.buffer.push(JSON.stringify(message))`
	`93`	`+ this.sendBuffer()`
	`94`	`+ })`
`93`	`95`	`}`
`94`	`96`	`private sendBuffer = debounce(function() {`
`95`	`97`	`if (this.isConnected) {`