{"action":"created","issue":{"url":"https://api.github.com/repos/PixelsCommander/ReactiveElements/issues/63","repository_url":"https://api.github.com/repos/PixelsCommander/ReactiveElements","labels_url":"https://api.github.com/repos/PixelsCommander/ReactiveElements/issues/63/labels{/name}","comments_url":"https://api.github.com/repos/PixelsCommander/ReactiveElements/issues/63/comments","events_url":"https://api.github.com/repos/PixelsCommander/ReactiveElements/issues/63/events","html_url":"https://github.com/PixelsCommander/ReactiveElements/pull/63","id":168526511,"number":63,"title":"using \"react-render-html\" module to create element children property ","user":{"login":"digital-flowers","id":5216291,"avatar_url":"https://avatars.githubusercontent.com/u/5216291?v=3","gravatar_id":"","url":"https://api.github.com/users/digital-flowers","html_url":"https://github.com/digital-flowers","followers_url":"https://api.github.com/users/digital-flowers/followers","following_url":"https://api.github.com/users/digital-flowers/following{/other_user}","gists_url":"https://api.github.com/users/digital-flowers/gists{/gist_id}","starred_url":"https://api.github.com/users/digital-flowers/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/digital-flowers/subscriptions","organizations_url":"https://api.github.com/users/digital-flowers/orgs","repos_url":"https://api.github.com/users/digital-flowers/repos","events_url":"https://api.github.com/users/digital-flowers/events{/privacy}","received_events_url":"https://api.github.com/users/digital-flowers/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2016-07-31T16:43:45Z","updated_at":"2016-10-17T10:21:17Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/PixelsCommander/ReactiveElements/pulls/63","html_url":"https://github.com/PixelsCommander/ReactiveElements/pull/63","diff_url":"https://github.com/PixelsCommander/ReactiveElements/pull/63.diff","patch_url":"https://github.com/PixelsCommander/ReactiveElements/pull/63.patch"},"body":"when creating react element the getChildren method result to the error \"If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.\"  i could solve this issue using the \"react-render-html\" module that create react elements from html string."},"comment":{"url":"https://api.github.com/repos/PixelsCommander/ReactiveElements/issues/comments/254169608","html_url":"https://github.com/PixelsCommander/ReactiveElements/pull/63#issuecomment-254169608","issue_url":"https://api.github.com/repos/PixelsCommander/ReactiveElements/issues/63","id":254169608,"user":{"login":"kulor","id":38616,"avatar_url":"https://avatars.githubusercontent.com/u/38616?v=3","gravatar_id":"","url":"https://api.github.com/users/kulor","html_url":"https://github.com/kulor","followers_url":"https://api.github.com/users/kulor/followers","following_url":"https://api.github.com/users/kulor/following{/other_user}","gists_url":"https://api.github.com/users/kulor/gists{/gist_id}","starred_url":"https://api.github.com/users/kulor/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kulor/subscriptions","organizations_url":"https://api.github.com/users/kulor/orgs","repos_url":"https://api.github.com/users/kulor/repos","events_url":"https://api.github.com/users/kulor/events{/privacy}","received_events_url":"https://api.github.com/users/kulor/received_events","type":"User","site_admin":false},"created_at":"2016-10-17T10:21:16Z","updated_at":"2016-10-17T10:21:16Z","body":"TLDR; I like this suggestion but feel it carries baggage to this simple library and I have a open question about how it'd recursively render custom elements.\r\n\r\nDisclosure, this issue's one close to my heart (https://github.com/PixelsCommander/ReactiveElements/issues/56).\r\n\r\nUsing ReactiveElements in anger (on thread.com) I've found a workaround solution of using regular `span` children with custom attributes to declaratively define repeating data. This comes with issues like having to manually parse child nodes and extract the values from them which feels unclean & non-idiomatic React.\r\n\r\nThe mind-funk situation I have with nested children is should they be React Elements that are parsed by the parent node or should they go through the ReactiveElements > React render flow and be returned to the parent before the parent is invoked. Given my usage I still feel there should be a more elegant way.\r\n\r\nI've created a mini tradeoff table to try and rationalise my thoughts on both efforts (ignoring for now the idea of solely relying on props).\r\n\r\n|               | a). Native React | b). ReactiveElements rendered, passed to parent |\r\n|---------|--------------|-----------------------------------------------|\r\n| Example| `<parent><Child prop={foo} /></parent>` | `<parent><child data-prop=\"foo\"></parent>` |\r\n|Pros        | Clear understanding of boundaries (barring the parent, children will all be in React) | Inert code, won't have side effects in browsers/editors |\r\n| Cons       | Hard to reason how you'd import dependent modules, variables etc in React context                   | Expensive to compute each child node through RE and pass children back to parent |\r\n\r\nHaving been fairly involved in the Web Components scene, I prefer the `b` option as:\r\n* It's how you'd expect to compose modules in HTML\r\n* You don't have to worry about the \"Source code\" in your HTML that's yet to be parsed and could throw up spurious issues.\r\n\r\nI like @digital-flowers's suggestion which plays off `b` but share the concern that it'd bring a lot of bloat and possibly introduce performance implications but feel it would be worth it if you knew what you were aware of the implications. I haven't done any experiments to see how much this PR would increase the size of this library, I'd love to know if someone's able to calculate this?\r\n\r\nAnother concern with this PR and use case combo is how would `react-render-html` know how to render a custom element (e.g. `<user ...>`)? There's no examples in their docs or tests. In my mind you'd have to rely on using ReactiveElements interface (`registerReact`) to keep consistent.\r\n"}}
{"actor":{"display_login":"kulor"}}