{"action":"opened","issue":{"url":"https://api.github.com/repos/paldepind/hareactive/issues/10","repository_url":"https://api.github.com/repos/paldepind/hareactive","labels_url":"https://api.github.com/repos/paldepind/hareactive/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/paldepind/hareactive/issues/10/comments","events_url":"https://api.github.com/repos/paldepind/hareactive/issues/10/events","html_url":"https://github.com/paldepind/hareactive/issues/10","id":173464534,"number":10,"title":"Speciel do-notation for view creation","user":{"login":"paldepind","id":521604,"avatar_url":"https://avatars.githubusercontent.com/u/521604?v=3","gravatar_id":"","url":"https://api.github.com/users/paldepind","html_url":"https://github.com/paldepind","followers_url":"https://api.github.com/users/paldepind/followers","following_url":"https://api.github.com/users/paldepind/following{/other_user}","gists_url":"https://api.github.com/users/paldepind/gists{/gist_id}","starred_url":"https://api.github.com/users/paldepind/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paldepind/subscriptions","organizations_url":"https://api.github.com/users/paldepind/orgs","repos_url":"https://api.github.com/users/paldepind/repos","events_url":"https://api.github.com/users/paldepind/events{/privacy}","received_events_url":"https://api.github.com/users/paldepind/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-08-26T14:20:16Z","updated_at":"2016-08-26T14:20:16Z","closed_at":null,"body":"Currently in `examples/simple/index.ts` the view function looks like this:\r\n\r\n```js\r\nview({validB, lengthB}) {\r\n  return Do(function*(): Iterator<Component<any>> {\r\n    yield span(\"Please enter an email address:\");\r\n    const {inputValue: emailB} = yield input();\r\n    yield br();\r\n    yield text(\"The length of the email is \");\r\n    yield text(lengthB);\r\n    yield br();\r\n    yield text(\"The address is \");\r\n    yield text(validB.map(t => t ? \"valid\" : \"invalid\"));\r\n    return Component.of({behaviors: [emailB], events: []});\r\n  });\r\n}\r\n```\r\n\r\nThis uses the general do-notation form Jabz. Maybe it is worth it to create a modified overloaded do-notation for creating views. It could allow for\r\n\r\n* yielding `string` and `string` valued behaviors directly instead of using the `text` function.\r\n* yielding several components at once by wrapping them in array. This of cannot be used when the return value of the component is needed, like with `input` in the example.\r\n* Not needing to wrap the final return value with `Component.of`.\r\n\r\n```js\r\nview({validB, lengthB}) {\r\n  return componentDo(function*(): Iterator<Component<any>> {\r\n    yield span(\"Please enter an email address:\");\r\n    const {inputValue: emailB} = yield input();\r\n    yield [\r\n      br(),\r\n      \"The length of the email is \",\r\n      text(lengthB),\r\n      br(),\r\n      \"The address is \",\r\n      validB.map(t => t ? \"valid\" : \"invalid\"),\r\n    ];\r\n    return {behaviors: [emailB], events: []};\r\n  });\r\n}\r\n```\r\n\r\nThe downside is of course that complexity is increased. Additionally it might be harder to understand due to the extra magic that is going on."}}
{"actor":{"display_login":"paldepind"}}