{"action":"closed","issue":{"url":"https://api.github.com/repos/paldepind/snabbdom/issues/49","repository_url":"https://api.github.com/repos/paldepind/snabbdom","labels_url":"https://api.github.com/repos/paldepind/snabbdom/issues/49/labels{/name}","comments_url":"https://api.github.com/repos/paldepind/snabbdom/issues/49/comments","events_url":"https://api.github.com/repos/paldepind/snabbdom/issues/49/events","html_url":"https://github.com/paldepind/snabbdom/issues/49","id":124006834,"number":49,"title":"Can't add to child array from \"onmessage\" in websockets application.","user":{"login":"dschalk","id":2214003,"avatar_url":"https://avatars.githubusercontent.com/u/2214003?v=3","gravatar_id":"","url":"https://api.github.com/users/dschalk","html_url":"https://github.com/dschalk","followers_url":"https://api.github.com/users/dschalk/followers","following_url":"https://api.github.com/users/dschalk/following{/other_user}","gists_url":"https://api.github.com/users/dschalk/gists{/gist_id}","starred_url":"https://api.github.com/users/dschalk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dschalk/subscriptions","organizations_url":"https://api.github.com/users/dschalk/orgs","repos_url":"https://api.github.com/users/dschalk/repos","events_url":"https://api.github.com/users/dschalk/events{/privacy}","received_events_url":"https://api.github.com/users/dschalk/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":21,"created_at":"2015-12-28T02:02:21Z","updated_at":"2016-05-24T18:02:48Z","closed_at":"2016-05-24T18:02:48Z","body":"I am working on the third page of a project I call  \"Javascript Monads\". The page is called  \"Javascript Monads Part 2\" and is the third item down on the menu at http://schalk.net . It runs at http://schalk.net:3093/ .\r\n\r\nI'm stuck on the usually trivial task of writing code to display chat messages. main.js starts with\r\n```javascript\r\n\"use strict\";\r\n\r\nimport cow from './cow';\r\nimport snabbdom from 'snabbdom';\r\nimport h from 'snabbdom/h';\r\n\r\nvar newMessage = (v,mon) => {\r\n  let ar = mM11.x;\r\n  ar.push(h('div', mM16.x));\r\n  mM11.ret(ar);\r\n  return mon;\r\n};\r\nmM16.ret('One').bnd(newMessage);\r\n```\r\nWhen the web page is refreshed, \"One\" appears as expected.\r\n```javascript\r\n      h('input', {style: inputStyle1, on: {keydown: updateLogin},  } ),\r\n      h('div', {props: {id:'chat'}}, mM11.x ),\r\n```\r\nmM11 and mM16 are instances of Monad which is made available by a script tag in index.html. I had the same problem when I didn't use the Monad instances, so I hope they aren't too much of a distraction. I'll modify the code if you like. mM11.x is the value of mM11, and is an array created by h('div', ' One '  ) when the page loads and mM16.ret('One').bnd(newMessage) executes. The screen shot \"After_reload.png\" shows that everything succeeds as intended. mM11.x is shown in the console log in the screen shot.\r\nWhen I run similar code from \"onmessage\" with \"Two\"  hard coded in and \"Three\" received from the server,  nothing appears on the webpage. The console log shows that mM11.x contains three objects, but the ones with text \"Two\" and \"Three\" show \"elm: undefined\" instead of \"elm: div\".\r\nHere's the code in \"onmessage\":\r\n```javascript\r\n          case \"CD#$42\":\r\n            mM16.ret('Two').bnd(newMessage);\r\n            mM16.ret(extra).bnd(newMessage).bnd(update);\r\n          break;\r\n```\r\nAs I mentioned above, I get the same behavior without using Monad instances, but I'll include the definition of Monad anyway. What I haven't been able to figure out is why \"newMessage()\" works as intended at the top of the file, but pushes an object with \"elm: undefined\" when called from inside \"onmessage\".\r\n```javascript\r\n  class Monad {\r\n    constructor(z) {\r\n\r\n      this.x = z;\r\n\r\n      this.bnd = (func, ...args) => {\r\n        return func(this.x, this, ...args);\r\n      };\r\n\r\n      this.ret = a => {\r\n        this.x = a;\r\n        return this;\r\n      };\r\n\r\n      this.fmap = (f, mon = this, ...args) => {      \r\n        mon.ret( f(mon.x, ...args));\r\n        return mon;\r\n\r\n      };\r\n    }\r\n```\r\n The browser screenshots are from Chrome running http://schalk.net:3093 in Ubuntu 14.04. The code repository is at https://github.com/dschalk/websockets-monads-part2. \r\nI am a refugee from React (See https://www.fpcomplete.com/user/dschalk/Websockets%20Game%20of%20Score?show=tutorials, running at http://schalk.net:3015/). I love what you and your collaborators are doing. I expect to eventually use pure functions and immutable data in my Javascript Monads project, but not until an application gets so complex that I see an advantage in doing so. \r\nHere are the screen shots:\r\n[main js](https://cloud.githubusercontent.com/assets/2214003/12031116/560c744a-add6-11e5-9e53-befdbf676011.png)\r\n[after_browser_refresh](https://cloud.githubusercontent.com/assets/2214003/12031120/5ad7c2ea-add6-11e5-976d-29d955bb1f04.png)\r\n[after_logging_in_as_d](https://cloud.githubusercontent.com/assets/2214003/12031122/5e0284d2-add6-11e5-9cae-40e22d7449ed.png)\r\n[after_sending_the_message_three](https://cloud.githubusercontent.com/assets/2214003/12031126/625aec5e-add6-11e5-823d-fcefb18921a0.png)\r\n"}}
{"actor":{"display_login":"paldepind"}}