1 2013-08-26 19:00:13 vjeux testing the irc bot ircloggr-react 2 2013-08-26 19:01:05 vjeux http://vjeux.com:50169/#browse/irc.freenode.net/reactjs 3 2013-08-26 19:01:06 vjeux cool 4 2013-08-26 19:01:22 chenglou vjeux: =D! 5 2013-08-26 19:01:51 mg-work nice 6 2013-08-26 19:01:55 petehunt vjeux: yo, can you include something like prototype in there 7 2013-08-26 19:02:06 petehunt i want a bot that randomly throws out sassy comments 8 2013-08-26 19:02:17 chenglou lol 9 2013-08-26 19:02:39 mg-work it doesnt monitor the log and append updates! :( 10 2013-08-26 19:02:56 chenglou mg-work: it does 11 2013-08-26 19:03:02 chenglou mg-work: refresh 12 2013-08-26 19:03:06 mg-work perhaps it stalled 13 2013-08-26 19:03:18 mg-work doesnt work for me 14 2013-08-26 19:03:20 vjeux it does update for me 15 2013-08-26 19:03:34 mg-work 404 in js console 16 2013-08-26 19:03:39 mg-work ...nm thats an image 17 2013-08-26 19:03:49 vjeux Igot that 404 too 18 2013-08-26 19:04:09 petehunt vjeux: not feeling the lack of data-reactid attributes on your dom nodes :P 19 2013-08-26 19:04:10 chenglou same 20 2013-08-26 19:04:10 vjeux it's the github banner at the top right :p 21 2013-08-26 19:04:11 mg-work yeah its the top right image haha 22 2013-08-26 19:04:16 jwalke lyaunzbe: You can file a task to get levelup working. 23 2013-08-26 19:04:29 mg-work still, no live updates somehow 24 2013-08-26 19:04:29 jwalke lyaunzbe: (or a github issue) 25 2013-08-26 19:04:29 vjeux mg-work: yeah it doesn't seem to have live updates 26 2013-08-26 19:05:01 mg-work thats what I meant earlier, I guess I didnt use the right words 27 2013-08-26 19:05:02 vjeux ok, I need to launch it using forever and we should be good to go 28 2013-08-26 19:05:10 lyaunzbe jwalke: No problem, will do! 29 2013-08-26 19:05:14 mg-work otherwise its neat! 30 2013-08-26 19:05:16 vjeux https://github.com/lloyd/ircloggr 31 2013-08-26 19:05:16 vjeux I'm using this one 32 2013-08-26 19:05:17 vjeux if you know a better one, feel free to tell me :p 33 2013-08-26 19:06:18 jwalke petehunt: you just totally busted vjeux 34 2013-08-26 19:06:20 mg-work the one I had tried wasn't actually an out of the box logger, it was closer to the protocol, but just close enough as to not bother with protocol implementation 35 2013-08-26 19:06:21 mg-work basically it just emitted for every type of event, and you could call every type of action 36 2013-08-26 19:06:25 jwalke I guess we shouldn't fault vjeux for not rewriting an entire irc logger in react 37 2013-08-26 19:06:35 mg-work jwalke : indeed 38 2013-08-26 19:06:35 vjeux yeah, I just want something that logs and that's already built :p 39 2013-08-26 19:06:37 ammit How about using socket and React ? 40 2013-08-26 19:06:43 ammit for irclogger 41 2013-08-26 19:06:50 mg-work fork away! 42 2013-08-26 19:06:51 vjeux if you guys want to make one awesome logger using react, feel free :p 43 2013-08-26 19:07:16 jwalke yeah - that would be awesome. 44 2013-08-26 19:07:40 vjeux this one is in nodejs, so it's already in js :) 45 2013-08-26 19:09:18 vjeux mg-work: yeah the project i'm using has this as a dependency :) 46 2013-08-26 19:12:09 ammit lol :P 47 2013-08-26 19:15:11 jwalke I'm guessing you could simply render the irc log pretty easily in react and keep everything else using the existing backend 48 2013-08-26 19:15:23 ammit yeh, 49 2013-08-26 19:15:58 jwalke here's the UI part: 50 2013-08-26 19:15:58 jwalke https://github.com/lloyd/ircloggr/blob/master/static/js/main.js 51 2013-08-26 19:16:07 jwalke Could definitely stand to be reactified :) 52 2013-08-26 19:16:52 jwalke also - zpao is it appropriate that we require xcode for contextify? That just feels so wrong. 53 2013-08-26 19:17:24 jwalke ammit/zpao: We could detect if they have contextify installed - if so, use it - else run the server code in *UNSAFE* eval mode. 54 2013-08-26 19:17:50 jwalke ammit: Can you file an issue for that (and either you, me or someone can get around to doing that)? 55 2013-08-26 19:18:12 jwalke Everyone: Thanks a ton for all the help finding the little points of friction in react-page! 56 2013-08-26 19:18:25 jwalke Early adopters are much appreciated troopers for sure! 57 2013-08-26 19:18:41 ammit jwalke: yes, I'll 58 2013-08-26 19:19:27 jwalke vjeux: the logger up? 59 2013-08-26 19:19:48 vjeux jwalke 60 2013-08-26 19:19:49 vjeux yeah 61 2013-08-26 19:20:01 vjeux jwalke: forever is awesome 62 2013-08-26 19:20:01 vjeux http://blog.nodejitsu.com/keep-a-nodejs-server-up-with-forever 63 2013-08-26 19:20:24 lyaunzbe Np jwalke, reactapp and react-page have been super nice to work with so far 64 2013-08-26 19:20:28 mg-work jwalke : are there any plans to have the React backend push the packages (I think you called them?) through a socket or something? 65 2013-08-26 19:20:47 jwalke mg-work oh yeah. 66 2013-08-26 19:20:57 mg-work jwalke : that would be quite something :) 67 2013-08-26 19:21:08 mg-work yeah forever is really nice 68 2013-08-26 19:21:13 jwalke So petehunt and I were thinking - we can do *fine grained* react module reloading. 69 2013-08-26 19:21:22 petehunt jwalke: i have a project that does it actually 70 2013-08-26 19:21:36 jwalke mg-work: Imagine if you are editing a deep component - it should reload just that changed module 71 2013-08-26 19:21:36 petehunt it serializes the state of the app and reloads the code on demand :) 72 2013-08-26 19:21:40 jwalke and retain all the state everywhere else 73 2013-08-26 19:21:48 mg-work :D 74 2013-08-26 19:21:50 jwalke petehunt: but we need the module reloading part 75 2013-08-26 19:21:53 chenglou vjeux: https://news.ycombinator.com/item?id=5945420 76 2013-08-26 19:22:01 petehunt jwalke: just refresh the page 77 2013-08-26 19:22:16 petehunt if the whole state is serialized it will return to that state 78 2013-08-26 19:22:26 petehunt simple websocket push that says "reload the world" 79 2013-08-26 19:22:30 jwalke petehunt: are you talking about the freezer? 80 2013-08-26 19:22:34 petehunt ya 81 2013-08-26 19:22:40 petehunt i used it to implement this 82 2013-08-26 19:22:43 jwalke hmmm - there might be some edge cases around focus. 83 2013-08-26 19:22:47 vjeux chenglou: nice 84 2013-08-26 19:23:07 jwalke petehunt: But maybe it's good enough to create the Mother Of All Demos? 85 2013-08-26 19:23:29 petehunt jwalke: we need a week to do it i think, maybe with maykel 86 2013-08-26 19:23:54 petehunt i really want a hot code reloaded full-react 3d game that runs on mobile 87 2013-08-26 19:24:06 petehunt :P 88 2013-08-26 19:24:17 jwalke petehunt: So the statefreezer mixin - that should work no? 89 2013-08-26 19:24:22 jwalke If you include it by default 90 2013-08-26 19:24:27 jwalke monkey patch it on top of the base classes 91 2013-08-26 19:24:47 petehunt jwalke: i built it so you need to explicitly implement like getFreezableState() or smoething, but it could just as easily have a more aggressive default 92 2013-08-26 19:25:06 petehunt however -- this is the stuff i'm going to focus on this month i think 93 2013-08-26 19:26:15 jwalke mg-work: However we get there - the end result should be a demo where we have our editor on one side of the screen, an animating game (or 3d scene) on the other side of the screen, and as you type - the UI updates dynamically. 94 2013-08-26 19:26:29 vjeux react: I need some eyes for the new community post: http://fooo.fr:4000/react/blog/2013/08/26/community-roundup-7.html 95 2013-08-26 19:26:31 jwalke If you change the physics of some scene or character, it automatically adjusts 96 2013-08-26 19:26:40 mg-work jwalke : like Brent Victor's "Inventing on principle" demo? 97 2013-08-26 19:27:02 jwalke A lot like that - but it's not *just* a demo. 98 2013-08-26 19:27:08 jwalke It's a *real* way to build apps. 99 2013-08-26 19:27:12 jwalke like - every day. 100 2013-08-26 19:27:16 mg-work :> 101 2013-08-26 19:27:23 petehunt jwalke: probably the coolest thing would be a pure-react instagram clone 102 2013-08-26 19:27:42 jwalke I know a guy who built the Instagram site. I can hook you up. 103 2013-08-26 19:27:50 jwalke :) 104 2013-08-26 19:27:52 petehunt cloning that instagram main feed in the browser == hardest problem in in frontend web dev today, imo 105 2013-08-26 19:28:00 jwalke mobile? 106 2013-08-26 19:28:02 jwalke or desktop? 107 2013-08-26 19:28:03 petehunt es 108 2013-08-26 19:28:06 petehunt mobile 109 2013-08-26 19:28:13 petehunt desktop is super easy 110 2013-08-26 19:31:03 chenglou vjeux: looking good 111 2013-08-26 19:31:54 petehunt jwalke: i think i am gonna open source the zynga scroller, rAF queue, image decoding and IO daemon stuff 112 2013-08-26 19:32:06 vjeux petehunt: like-stamp 113 2013-08-26 19:32:29 petehunt let's just agree on a way to package static assets in commonjs 114 2013-08-26 19:32:34 petehunt and then we can run with it 115 2013-08-26 19:32:38 chenglou petehunt: so you DO have treasures hidden 116 2013-08-26 19:32:48 petehunt chenglou: those aren't instagram! 117 2013-08-26 19:32:52 chenglou hold on lemme open source my Facebook clone done entirely in React 118 2013-08-26 19:33:02 petehunt chenglou: it's like react-animations, but way more hardcore 119 2013-08-26 19:33:18 chenglou gosh so much to try in so little time 120 2013-08-26 19:33:50 vjeux chenglou: we have something under our belt that looks like what you are describing, but even more awesome :p 121 2013-08-26 19:34:18 chenglou vjeux: for Facebook? 122 2013-08-26 19:34:23 vjeux yeah 123 2013-08-26 19:34:52 chenglou vjeux: my dream would be for Facebook _mobile_ to be entirely made of react, and then one day when the performance gets good enough you guys just creep up and swap it out 124 2013-08-26 19:35:05 chenglou bam, infinite PR 125 2013-08-26 19:35:08 vjeux :) 126 2013-08-26 19:35:21 balpert at Khan Academy our CS environment allows live code changes like the Bret Victor demo: https://www.khanacademy.org/cs/super-spiral/823021393 127 2013-08-26 19:35:49 balpert try changing a number by clicking and dragging the slider 128 2013-08-26 19:36:14 chenglou balpert: holy that's cool 129 2013-08-26 19:37:13 mg-work yeah I actually said Brent earlier... my bad 130 2013-08-26 19:37:30 balpert chenglou: :) 131 2013-08-26 19:37:35 mg-work did you know that demo was shot in Montreal? :) 132 2013-08-26 19:37:38 balpert mostly a John Resig production 133 2013-08-26 19:37:52 chenglou balpert: how's it like working with him? 134 2013-08-26 19:38:03 jwalke love it! 135 2013-08-26 19:38:06 jwalke great demo 136 2013-08-26 19:38:15 jwalke I want that for my regular day-to-day programming 137 2013-08-26 19:39:26 vjeux jwalke: https://github.com/facebook/react-page/issues/5 138 2013-08-26 19:39:36 jwalke vjeux: Yes I saw that. 139 2013-08-26 19:39:38 jwalke thanks 140 2013-08-26 19:47:38 mg-work I wish {condition ? result} would be valid 141 2013-08-26 19:49:13 vjeux mg-work: {condition && result} is 142 2013-08-26 19:49:17 chenglou mg-work: 143 2013-08-26 19:49:32 chenglou yeah what vjeux said lol 144 2013-08-26 19:49:36 mg-work TIL 145 2013-08-26 19:49:43 mg-work it makes sense 146 2013-08-26 19:49:49 mg-work thanks 147 2013-08-26 20:12:47 zpao vjeux: but then you have "false" 148 2013-08-26 20:12:49 vjeux zpao: don't we have a special case to not show anything when we return false? 149 2013-08-26 20:12:52 zpao "return"? 150 2013-08-26 20:13:02 zpao i guess it depends on where {false} is 151 2013-08-26 20:13:05 vjeux zpao: http://jsfiddle.net/vjeux/8jMmQ/ 152 2013-08-26 20:13:06 vjeux only 0 is being used, false and null are discarded 153 2013-08-26 20:13:08 mg-work don't you always want to show something for either true or false? else why would you put it there? 154 2013-08-26 20:13:10 zpao mg-work: http://jsfiddle.net/zpao/pMAas/ 155 2013-08-26 20:13:11 zpao err, vjeux^^ 156 2013-08-26 20:13:13 chenglou function c(cond, exp) {return cond ? exp : ''} 157 2013-08-26 20:13:49 chenglou there you go, c(condition, result) 158 2013-08-26 20:13:49 chenglou lol 159 2013-08-26 20:13:50 mg-work argg 160 2013-08-26 20:13:50 vjeux zpao: I see 161 2013-08-26 21:01:30 mg-work any of you uses a pretty way to escape multi-line js without using escaping? 162 2013-08-26 21:01:45 balpert mg-work: what do you mean? 163 2013-08-26 21:02:19 zpao mg-work: no, just line up quotes :/ 164 2013-08-26 21:02:24 zpao balpert: i think he mean multiline strings 165 2013-08-26 21:02:31 mg-work yeah sorry 166 2013-08-26 21:02:38 balpert ah 167 2013-08-26 21:02:43 balpert you can do backslash continuations right? 168 2013-08-26 21:02:48 mg-work yeah, except that 169 2013-08-26 21:02:51 mg-work its ugly.. 170 2013-08-26 21:02:53 balpert yes 171 2013-08-26 21:03:10 mg-work there's that, but its super hacky: http://tomasz.janczuk.org/2013/05/multi-line-strings-in-javascript-and.html 172 2013-08-26 21:03:18 mg-work also, its not actually a comment 173 2013-08-26 21:03:21 balpert ew, yes 174 2013-08-26 21:03:42 chenglou mg-work: use + 175 2013-08-26 21:04:06 chenglou oh never mind 176 2013-08-26 21:04:09 chenglou misread 177 2013-08-26 21:04:16 mg-work chenglou : + would be as cumbersome as \\ anyway 178 2013-08-26 21:04:25 mg-work I was just wondering if there was any other way 179 2013-08-26 21:04:27 chenglou yeah sorry, though you wanted something else 180 2013-08-26 21:04:45 chenglou you could… go to coffeescript's page, write the string then copy paste the result lol 181 2013-08-26 21:04:45 mg-work im in node, perhaps there is a util 182 2013-08-26 21:04:55 chenglou jk 183 2013-08-26 21:05:14 zpao vjeux: do you have a screenshot of what that looks like? i'll get it out with the same site update 184 2013-08-26 21:05:36 vjeux zpao: let me switch back to that branch 185 2013-08-26 21:05:56 mg-work apparently es6 will allow backticks to make multi-line strings: yipee! 186 2013-08-26 21:06:14 vjeux zpao: http://fooo.fr:4000/react/blog/2013/08/26/community-roundup-7.html 187 2013-08-26 21:06:34 zpao mg-work: one day in the future your problem will be solved... the perpertual problem of JS 188 2013-08-26 21:06:55 mg-work zpao : hehe 189 2013-08-26 21:07:05 zpao vjeux: no, the tooling update 190 2013-08-26 21:07:08 vjeux oh 191 2013-08-26 21:07:18 mg-work pretty funny: http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript all more hacky than the other 192 2013-08-26 21:07:24 vjeux http://fooo.fr:4000/react/docs/tooling-integration.html 193 2013-08-26 21:07:27 vjeux zpao 194 2013-08-26 21:07:44 balpert vjeux: for the blog post, nit: GitHub not Github 195 2013-08-26 21:07:49 petehunt jwalke__: any reason why we don't let mixins have state other than the fact that it would take work to implement? 196 2013-08-26 21:07:55 balpert also all three of those things are FB people ;) 197 2013-08-26 21:08:31 vjeux balpert: well, they are outside of their day job :p 198 2013-08-26 21:08:37 zpao petehunt: i think they should have state (or rather, they should be able to mixin to the rest of this.state just like they can access it) 199 2013-08-26 21:08:43 zpao (and ditto for props) 200 2013-08-26 21:08:45 vjeux balpert: so technically it's still community stuff :p 201 2013-08-26 21:09:23 andreypopp I thought of Mixin.getInitialState — that would be cool 202 2013-08-26 21:09:47 andreypopp also defining event handlers (we already have an issue on gh) 203 2013-08-26 21:09:55 petehunt zpao: i think the best interface would probably for them to have their own isolated state 204 2013-08-26 21:10:06 petehunt but i'm not sure how we'd implement that 205 2013-08-26 21:10:08 petehunt (in an efficient way) 206 2013-08-26 21:10:24 zpao andreypopp: i havent tested, but *if* the mixin defines getInitialState but the component doesn't... what happens? 207 2013-08-26 21:11:02 zpao i know what happens with getDefaultProps but i don't like to talk about the problems we introduce there 208 2013-08-26 21:11:12 zpao ACTION should file an issue on GH in case anybody wants to fix it 209 2013-08-26 21:11:37 vjeux zpao: ok, just installed a chrome extension that lets me capture screenshot of the page 210 2013-08-26 21:11:41 andreypopp zpao: don't know, I want getInitialState from several mixing to be merged 211 2013-08-26 21:11:49 vjeux going to add screenshots from now on :) 212 2013-08-26 21:11:50 zpao vjeux: open firefox dev console, type screenshot 213 2013-08-26 21:12:15 balpert [14:12:19.663] ReferenceError: screenshot is not defined 214 2013-08-26 21:12:32 zpao *developer toolbar 215 2013-08-26 21:13:05 balpert zpao: oh, how do you get to that? 216 2013-08-26 21:13:05 zpao and you actually want screenshot --fullpage 217 2013-08-26 21:13:05 balpert never mind, found it 218 2013-08-26 21:13:14 balpert that is so fancy 219 2013-08-26 21:13:53 zpao yea, it's really nice. i wish i had more uses for it besides taking screenshots (but it's good at that so... worth it) 220 2013-08-26 21:14:05 vjeux https://chrome.google.com/webstore/detail/screen-capture-by-google/cpngackimfmofbokmjmljamhdncknpmg 221 2013-08-26 21:14:06 vjeux for chrome 222 2013-08-26 21:14:09 balpert I normally use http://derailer.org/paparazzi/ 223 2013-08-26 21:15:05 balpert sometimes also https://github.com/paulhammond/webkit2png) 224 2013-08-26 21:15:22 zpao balpert: screenshots from 10.3 o_O i guess if it works it works. 225 2013-08-26 21:15:50 balpert zpao: indeed. still works great though! 226 2013-08-26 21:17:01 zpao i bet you could wrap phantom in something pretty easily too 227 2013-08-26 21:17:18 balpert oh yeah! that too. 228 2013-08-26 21:17:18 balpert https://github.com/ariya/phantomjs/wiki/Screen-Capture 229 2013-08-26 21:17:24 balpert its font rendering is worse in my experience though 230 2013-08-26 21:18:35 zpao oh neat 231 2013-08-26 21:18:49 petehunt webdriver has screenshot functionality also, no idea how it works though 232 2013-08-26 21:19:23 zpao tl;dr: it's a solved problem many times over 233 2013-08-26 21:35:17 petehunt alright, time to shave this yak 234 2013-08-26 21:36:55 petehunt zpao: how about i fix propTypes too? 235 2013-08-26 21:37:38 zpao petehunt: oh that's actually what i meant was broken. i haven't actually even looked at getDefaultProps 236 2013-08-26 21:37:47 petehunt zpao: they're marked as DEFINE_ONCE 237 2013-08-26 21:39:55 ammit how to get `
` in React ? 238 2013-08-26 21:40:25 zpao ammit: should just work 239 2013-08-26 21:43:07 zpao ammit: http://jsfiddle.net/zpao/B24s4/3/ is working for me 240 2013-08-26 21:44:13 ammit Ok then, How to create 241 2013-08-26 21:45:32 zpao we don't support charset right now... should probably add that with content in https://github.com/facebook/react/pull/293 242 2013-08-26 21:45:44 balpert weren't we getting an awesome new React website sometime? 243 2013-08-26 21:45:48 balpert what happened to that? 244 2013-08-26 21:45:53 zpao sometime 245 2013-08-26 21:45:58 zpao react-page happened because of it 246 2013-08-26 21:47:44 petehunt i <3 electric blue 247 2013-08-26 21:49:47 balpert so as someone who has not made any effort to try react-page, I am still not sure what it is 248 2013-08-26 21:49:53 balpert is it like a jekyll competitor? 249 2013-08-26 21:50:00 balpert does it interface with databases? 250 2013-08-26 21:50:09 zpao it's react front-to-back 251 2013-08-26 21:50:22 zpao you can use it for dynamic pages 252 2013-08-26 21:50:37 petehunt balpert: no dbs 253 2013-08-26 21:50:38 zpao ACTION also hasn't tried it 254 2013-08-26 21:50:50 zpao petehunt: is there anythign actually stopping that from happening? 255 2013-08-26 21:51:03 balpert I am mostly commenting that the readme does a bad job of explaining this :) 256 2013-08-26 21:51:10 petehunt zpao: other than the fact that it is a ginormous can of worms? not really, you can use whatever you want 257 2013-08-26 21:51:34 zpao balpert: heh. jwalke is your man about that. it's mostly his 258 2013-08-26 21:51:49 chenglou balpert: jwalke is still working on the readme, the one for react-page-middleware too 259 2013-08-26 21:51:53 zpao it's pretty experimental at this point 260 2013-08-26 21:52:02 balpert ACTION nods 261 2013-08-26 21:52:10 petehunt balpert: did you see my commonjs asset spec? 262 2013-08-26 21:52:17 petehunt figured it would be up your alley 263 2013-08-26 21:52:19 balpert petehunt: I skimmed it 264 2013-08-26 21:52:49 balpert everything seemed to make sense 265 2013-08-26 21:53:12 petehunt would you use it at khan? or is it too commonjs-y 266 2013-08-26 21:53:51 balpert perhaps 267 2013-08-26 21:53:57 balpert I need to get our JS packaging sorted out first 268 2013-08-26 21:54:53 balpert probably going to write my own packager with commonjs syntax 269 2013-08-26 21:55:00 balpert just so we can more easily transition from what we have now 270 2013-08-26 21:55:09 balpert though I agree that there are too many JS packaging things :( 271 2013-08-26 21:55:34 petehunt balpert: sadly that is what i did too 272 2013-08-26 21:55:37 jwalke balpert: react-page is an effort to solve that exact problem 273 2013-08-26 21:55:47 jwalke + fast development 274 2013-08-26 21:55:51 balpert jwalke: sorry, which exact problem? 275 2013-08-26 21:56:09 jwalke So my observation was that a lot of people build packaging/jsx transforming/commonJS-browser-modules and the tooling is all very slow. 276 2013-08-26 21:56:20 zpao balpert: coughcough node-haste coughcough 277 2013-08-26 21:56:26 jwalke And we don't have anything that exists today that you can just "npm install" and have a fully working development environment. 278 2013-08-26 21:56:32 balpert zpao: I was looking at it... 279 2013-08-26 21:56:44 jwalke zpao: The only difference is that as far as I can tell, node-haste is fast 280 2013-08-26 21:57:03 jwalke and understands all the facebook-isms 281 2013-08-26 21:57:13 petehunt i wish we could kill @providesModule :/ 282 2013-08-26 21:57:14 zpao jwalke: does it understand our css? 283 2013-08-26 21:57:21 balpert node-haste is also badly documented but I decided that was because you weren't planning on advertising it by itself 284 2013-08-26 21:57:34 zpao balpert: right. at least for now 285 2013-08-26 21:59:09 jwalke balpert: We're not suggesting people use it currently. 286 2013-08-26 21:59:13 jwalke right. 287 2013-08-26 21:59:16 balpert cool 288 2013-08-26 22:00:35 jwalke balpert: You should try react-page and tell me what you think I should put for the readme. But at the end of the day, I noticed we had nothing that actually lets you use React for real projects (that means commonJS, JSX). 289 2013-08-26 22:00:37 jwalke So I built this thing and then took some opinionated liberties to do some novel features - new ways to build real apps: like full page rendering, and server rendering. 290 2013-08-26 22:00:38 balpert jwalke: planning on trying it out as soon as I have time 291 2013-08-26 22:00:41 balpert and as soon as I figure out what it is ;) 292 2013-08-26 22:00:50 jwalke And by "nothing that actually lets you use React for real projects 293 2013-08-26 22:01:02 jwalke " I mean nothing that works fast. 294 2013-08-26 22:01:40 jwalke This serves your page in about 30ms and you never need to wait for a watcher - it builds on the fly and is always up to date - 0% chance of getting served a stale page. 295 2013-08-26 22:01:50 jwalke Someone should let me know how to describe this thing in the README :) 296 2013-08-26 22:02:17 jwalke The truth is: It's everything I wanted in a toolchain to develop and render React applications. 297 2013-08-26 22:02:27 jwalke It the things that I personally need to be productive and satisfied :) 298 2013-08-26 22:02:37 jwalke But that really makes for a horrible README title! :P 299 2013-08-26 22:03:18 balpert still haven't figured out -- can I talk to a db using it? 300 2013-08-26 22:05:48 balpert I've been encouraged not to do dependency graph traversal in a packager as it makes it too easy to make large packages accidentally 301 2013-08-26 22:06:10 petehunt balpert: whats the alternative 302 2013-08-26 22:06:20 balpert petehunt: including everything in a list 303 2013-08-26 22:06:39 petehunt balpert: you could whitelist dependency traversal 304 2013-08-26 22:06:57 petehunt the IG packager i made lets you do ['path/to/whatever', 'glob:path/to/*', 'deps:path/to/whatever'] 305 2013-08-26 22:07:08 jwalke balpert: I had a whitelist 306 2013-08-26 22:07:11 jwalke then I removed it. 307 2013-08-26 22:07:17 jwalke because it was confusing people. 308 2013-08-26 22:07:33 jwalke So I log timing metrics and packaging metrics when you run the page 309 2013-08-26 22:07:34 petehunt what you really want is like a genetic algorithm to package your jonx 310 2013-08-26 22:07:40 jwalke it prints out colored graphs telling you when you've gone red 311 2013-08-26 22:07:56 jwalke balpert: Currently, you could connect to a DB 312 2013-08-26 22:08:03 jwalke though I'm not advertising support for that. 313 2013-08-26 22:08:05 balpert petehunt: I hear some people do that... 314 2013-08-26 22:08:32 balpert jwalke: so most websites using this are static from the server's perspective 315 2013-08-26 22:08:45 balpert jwalke: which means that the wget thing is very reasonable 316 2013-08-26 22:09:49 petehunt jwalke: would be pretty cool to figure out how to do state transitions on the server. 317 2013-08-26 22:09:58 petehunt so i could do data fetching 318 2013-08-26 22:09:59 jwalke balpert: Currently - that's how I'm using it. But you could use a db - and then realize at that point wget doesn't make sense. 319 2013-08-26 22:10:52 petehunt jwalke: can you though? i don't think you can do server-rendered markup with this today. 320 2013-08-26 22:11:00 petehunt you'd have to do your fetching outside of react. 321 2013-08-26 22:11:01 jwalke petehunt: What do you mean? 322 2013-08-26 22:11:17 petehunt jwalke: we don't know how to init a component, do a transition, and get static html out 323 2013-08-26 22:11:24 jwalke petehunt: Technically, you can customize the router 324 2013-08-26 22:11:35 petehunt jwalke: right, thats what youd have to do, pass the data fetch in as props 325 2013-08-26 22:11:40 jwalke So your router can do all the fetching it needs - then when it's done pass those off as additional props 326 2013-08-26 22:11:41 petehunt not the end of the world but not exactly intuitive 327 2013-08-26 22:12:13 jwalke petehunt: Yes, it's not the incremental data fetching grand solution - but react-page is meant to be a place for you to *prototype* that grand solution rapidly. 328 2013-08-26 22:12:13 jwalke :) 329 2013-08-26 22:12:16 lyaunzbe Or, you can have no routes, single page, and fetch what you need from the components on the client 330 2013-08-26 22:12:26 jwalke lyaunzbe: Yes you can do that too. 331 2013-08-26 22:12:35 jwalke But at the same time get that first rendering done on the server 332 2013-08-26 22:12:41 jwalke before you've fetched any data 333 2013-08-26 22:12:46 jwalke so the "chrome" of your site loads very fast 334 2013-08-26 22:13:00 jwalke without any content - but that chrome fast loading is critical to a website's perceived speed. 335 2013-08-26 22:13:39 petehunt jwalke: wait is someone prototyping the grand data fetchign solution? :P 336 2013-08-26 22:13:52 jwalke I don't know - you tell me :P 337 2013-08-26 22:14:27 petehunt jwalke: trying to finish up my outstanding diffs first :) 338 2013-08-26 22:14:41 petehunt oh speaking of 339 2013-08-26 22:19:17 balpert so, I can almost guarantee that someone will shoot me for this suggestion 340 2013-08-26 22:19:32 balpert but the many try/catch/finally blocks are frustrating in Chrome 341 2013-08-26 22:19:44 balpert and we could do try/finally everywhere except that IE8 doesn't like it 342 2013-08-26 22:20:07 balpert so we can use JScript conditional compilation to add it in IE8 only, riight? 343 2013-08-26 22:23:35 jwalke balpert: That's a good thought - but we might need a utility like tryFinally(f1, f2) anyways - as try/catch ends up doing horrible things to even modern VMs. 344 2013-08-26 22:24:09 petehunt lol we were just talking about that 345 2013-08-26 22:24:12 balpert if we extract it out to a util then we can just branch in normal JS which seems much more reasonable 346 2013-08-26 22:24:22 balpert I don't know if the function-call overhead is noticeable 347 2013-08-26 22:30:36 balpert now I'm confused 348 2013-08-26 22:30:44 balpert I'm testing in IE8 and it seems to like try/finally just fine 349 2013-08-26 22:34:29 zpao real ie8 or ie9/10/11 with ie8 compat? 350 2013-08-26 22:37:32 balpert I tried both 351 2013-08-26 22:55:53 balpert zpao: hmm, I think of charset as one word 352 2013-08-26 22:56:03 zpao balpert: i knoooooooowwwww 353 2013-08-26 22:56:06 zpao i was torn 354 2013-08-26 22:56:49 balpert well if there is a vote, I vote for lowercase charset 355 2013-08-26 22:57:24 zpao i also think of autocomplete as 1 word (autofocus, autoplay) 356 2013-08-26 22:57:40 zpao ditto for spellcheck 357 2013-08-26 22:57:45 balpert me too but I can at least imagine that it's one 358 2013-08-26 22:57:48 balpert charset, less so 359 2013-08-26 22:57:51 balpert s/one/two 360 2013-08-26 22:58:35 jwalke zpao: you rock 361 2013-08-26 22:58:47 jwalke So irritating that content= wasn't supported in react-page :) 362 2013-08-26 22:59:11 zpao i wouldn't have know if jkassens hadn't filed it :) 363 2013-08-26 23:49:53 chenglou alright! let's see what I missed 364 2013-08-26 23:52:01 chenglou jwalke: saw your comment about readme in the brand new irc log ™ 365 2013-08-26 23:52:21 chenglou if you want, I can write a readme (after I use react-page correctly that is) 366 2013-08-26 23:52:22 vjeux the log is godlike :p 367 2013-08-26 23:54:09 balpert wait, where is the log? 368 2013-08-26 23:54:46 vjeux balpert: look at the title of the irc 369 2013-08-26 23:54:52 vjeux | http://vjeux.com:8001/ for IRC Logs 370 2013-08-26 23:54:55 balpert ah, I see 371 2013-08-26 23:55:05 balpert sweet 372 2013-08-26 23:55:13 balpert I went to http://irclog.gr/#browse/irc.freenode.net/reactjs but that was unhelpful 373 2013-08-26 23:55:48 vjeux the ui is not optimal but it gets the job done :p 374 2013-08-26 23:59:27 jwalke vjeux: are you the only source of irc logs? 375 2013-08-26 23:59:33 vjeux jwalke: i'm not really sure by what you mean by that :p 376 2013-08-26 23:59:35 jwalke are they logged anywhere else besides yours? 377 2013-08-26 23:59:36 mg-work vjeux : only you is allowed to talk in here! :P 378 2013-08-26 23:59:37 vjeux jwalke: nop, the bot is ran by my server and only logs to my database 379 2013-08-26 23:59:42 vjeux ircloggr-react: <--- 380 2013-08-26 23:59:58 chenglou oh silly funny robot 381 2013-08-27 00:00:00 vjeux omg it can talk! 382 2013-08-27 00:00:17 jwalke ircloggr-react: talk about vjeux 383 2013-08-27 00:00:22 jwalke :( 384 2013-08-27 00:00:28 zpao it's not prototype 385 2013-08-27 00:00:41 chenglou hey ircloggr-react, what is the best javascript framework of all time? 386 2013-08-27 00:01:07 chenglou lol 387 2013-08-27 00:01:16 zpao i was going to use hubot and build something that logged and then build a react front end for it 388 2013-08-27 00:01:47 zpao and then it would be pretty easy to plug in other commands (and there are already a lot of scripts for it) 389 2013-08-27 00:03:07 jwalke chenglou: I guess it has no comment? :) 390 2013-08-27 00:03:33 chenglou was probably too obvious so it didn't bother to answer 391 2013-08-27 00:03:49 petehunt jwalke: hey i'm having an issue with react-page, i just opened an issue 392 2013-08-27 00:04:20 petehunt jwalke: i ran jsx transform on my code manually and it all worked. 393 2013-08-27 00:18:21 vjeux I'm looking for demos to put on the website that show what you can do with react. Right now I have in mind. * Instagram website, * The formula editor of Khan Academy, * Wolfenstein demo, * fb ads charts (once ART is open sourced) 394 2013-08-27 00:18:26 vjeux do you have other ideas? 395 2013-08-27 00:19:40 balpert mm, ART 396 2013-08-27 00:20:12 balpert vjeux: like the backbone examples thing? 397 2013-08-27 00:22:29 vjeux balpert: http://fooo.fr/~vjeux/fb/art.png 398 2013-08-27 00:22:39 vjeux those charts are done in react 399 2013-08-27 00:22:43 balpert I know 400 2013-08-27 00:22:48 balpert I've been bugging sebmarkbage to open-source the bindings 401 2013-08-27 00:22:52 vjeux :) 402 2013-08-27 00:22:54 balpert ART itself is open source already 403 2013-08-27 00:22:59 vjeux yeah 404 2013-08-27 00:23:37 vjeux what I'm looking for is non trivial real world usage of react 405 2013-08-27 00:23:51 vjeux to show what you can build with react 406 2013-08-27 00:24:05 vjeux I don't really care if there isn't any source code available 407 2013-08-27 00:24:20 vjeux I want to give some inspiration 408 2013-08-27 00:24:36 balpert so, like the backbone examples thing then 409 2013-08-27 00:25:09 vjeux balpert: link? 410 2013-08-27 00:25:10 mg-work vjeux : I would have been really close to have something 411 2013-08-27 00:25:18 balpert http://backbonejs.org/#examples 412 2013-08-27 00:26:10 vjeux balpert: yeah! something like this, thanks for the link 413 2013-08-27 00:26:12 balpert np 414 2013-08-27 00:26:20 vjeux mg-work: what are you working on? :) 415 2013-08-27 00:28:06 mg-work vjeux: live auctioning system in an embeddable widget, it's coming along pretty nicely actually! 416 2013-08-27 00:28:29 vjeux mg-work: auctioning for what? 417 2013-08-27 00:28:46 mg-work vjeux : in general! 418 2013-08-27 00:29:14 vjeux mg-work: is there a website yet? 419 2013-08-27 00:29:17 vjeux for that? 420 2013-08-27 00:29:19 vjeux I'm curious 421 2013-08-27 00:30:00 chenglou vjeux smells potential community round-up material? =) 422 2013-08-27 00:31:18 vjeux yeah always :) 423 2013-08-27 00:47:09 balpert vjeux: this is not super exciting, but here's another KA thing using React -- if you go to https://www.khanacademy.org/coach/demo and click Access Demo 424 2013-08-27 00:47:19 balpert then the By Student report on the left is all React 425 2013-08-27 00:47:34 balpert note how the table rows load incrementally 426 2013-08-27 00:48:18 balpert and you can sort the table 427 2013-08-27 00:48:54 balpert and you can change the date range 428 2013-08-27 00:49:00 balpert and then you can filter for certain topics or exercises 429 2013-08-27 00:49:12 vjeux balpert: this is sweet 430 2013-08-27 00:49:17 mg-work balpert : good runner-up! :P 431 2013-08-27 00:49:48 mg-work TIL: KH loves Bens 432 2013-08-27 00:49:51 vjeux balpert: go make a 3min video about it :) 433 2013-08-27 00:50:02 balpert vjeux: about what? 434 2013-08-27 00:50:14 balpert mg-work: mm? 435 2013-08-27 00:50:24 chenglou vjeux: did you see that post on groups, workflowy is considering using react! 436 2013-08-27 00:50:31 chenglou vjeux: PR PR pR 437 2013-08-27 00:50:35 chenglou P*8 438 2013-08-27 00:50:37 mg-work balpert : I see 4 bens in that table, two I know are KH employees, I just assumed for the rest.. 439 2013-08-27 00:50:37 chenglou P* 440 2013-08-27 00:50:42 balpert ah yes 441 2013-08-27 00:50:45 vjeux balpert: showing the student reports, animation when it expands, instant filtering 442 2013-08-27 00:50:58 mg-work balpert : runner-up was referring to your score in the same table 443 2013-08-27 00:51:20 balpert mg-work: you'll note I have more proficiencies 444 2013-08-27 00:51:21 mg-work KH... KA* 445 2013-08-27 00:51:35 vjeux chenglou: link? Can't see it 446 2013-08-27 00:51:48 balpert vjeux: sorry, which animation? 447 2013-08-27 00:51:50 vjeux https://groups.google.com/forum/#!searchin/reactjs/workflowy/reactjs/e3bYersyd64/56m-cwwuP_YJ 448 2013-08-27 00:51:52 balpert maybe I'm just being dense 449 2013-08-27 00:51:52 vjeux oh this one 450 2013-08-27 00:52:07 vjeux balpert: when you click on the stack of numbers 451 2013-08-27 00:52:15 chenglou vjeux: yup 452 2013-08-27 00:54:11 balpert vjeux: oh! you missed a crucial part of my instructions 453 2013-08-27 00:54:15 balpert click on "By Student" 454 2013-08-27 00:54:26 balpert the "By Exercise" report is also React now but has a tiny bit of jQuery 455 2013-08-27 00:54:56 vjeux balpert: oh sweet :) 456 2013-08-27 00:55:03 vjeux well, that works too! 457 2013-08-27 00:55:07 vjeux screencast both of them! 458 2013-08-27 01:42:25 balpert chenglou: any reason you closed https://github.com/facebook/react/issues/174? 459 2013-08-27 01:44:24 chenglou balpert: oh damn, I thought your commit got merged, sorry reopening 460 2013-08-27 01:44:35 balpert np, just wanted to check 461 2013-08-27 02:34:43 jwalke balpert: Not digging the fact that those functions touch the DOM even if they don't need to 462 2013-08-27 02:35:07 jwalke But I guess I'd say the same thing about componentDidMount too. 463 2013-08-27 02:36:11 chenglou jwalke: then why not just, not pass any. I opened the issue but I'm fine with both 464 2013-08-27 02:36:27 chenglou one less thing to remember. Not as if it was a super duper shortcut or anything 465 2013-08-27 02:36:33 jwalke we already have a bunch of people relying on it 466 2013-08-27 02:36:39 chenglou including me lol 467 2013-08-27 02:36:44 chenglou alright then 468 2013-08-27 02:36:51 jwalke me too - I don't think we're going to get to remove it unless there's a resounding consensus. 469 2013-08-27 02:39:10 balpert jwalke: yeah, that's one of the reasons I mentioned removing them 470 2013-08-27 02:39:18 jwalke did you mention that? 471 2013-08-27 02:39:23 jwalke must have missed the discussion 472 2013-08-27 02:39:50 jwalke Oh I see 473 2013-08-27 02:44:28 jwalke g2g replied on the issue 474 2013-08-27 03:20:08 balpert jwalke: React isn't 1.0 yet so it's okay to make breaking changes, right? :) 475 2013-08-27 03:21:27 jwalke balpert: I suppose so. 476 2013-08-27 03:21:42 jwalke We need to give people the command line scripts that codemode existing code bases when possible. 477 2013-08-27 03:22:10 balpert ACTION nods 478 2013-08-27 03:30:10 petehunt jwalke: another request: would be cool to be able to require('elements/whatever') rather than have to do relative paths everywhere in react-page 479 2013-08-27 03:30:29 jwalke petehunt: I believe that is not commonJS compliant 480 2013-08-27 03:30:32 jwalke I really want that too 481 2013-08-27 03:30:41 petehunt jwalke: if you auto install it to node_modules it is 482 2013-08-27 03:30:43 jwalke why *can't* a commonJS module require itself, or other resources in it. 483 2013-08-27 03:30:51 jwalke "auto install"? 484 2013-08-27 03:30:55 petehunt jwalke: i believe that's what `npm develop` does 485 2013-08-27 03:31:46 jwalke petehunt: I've never heard of that. 486 2013-08-27 03:32:03 petehunt er 487 2013-08-27 03:32:07 petehunt jwalke: `npm link` 488 2013-08-27 03:32:13 petehunt jwalke: in python it's setup.py develop :P 489 2013-08-27 03:32:32 jwalke but how can it require its own internals? 490 2013-08-27 03:32:36 jwalke npm link myself? 491 2013-08-27 03:33:58 petehunt jwalke: yes 492 2013-08-27 03:34:05 petehunt i think if you npm link the app it would work 493 2013-08-27 03:34:16 jwalke But how can you make it so no one has to link? 494 2013-08-27 03:34:17 petehunt jwalke: also i totally suck at the node toolchain soooo… :/ 495 2013-08-27 03:34:28 jwalke npm link is a development thing 496 2013-08-27 03:34:28 petehunt jwalke: one second, let me try something. 497 2013-08-27 03:34:43 petehunt jwalke: shouldnt we think of the app as just another npm package? 498 2013-08-27 03:34:56 jwalke petehunt: that's what react-page is 499 2013-08-27 03:35:04 petehunt so why not npm link? :D 500 2013-08-27 03:35:06 jwalke I think server.js should even be put into react-page-middleware eventually 501 2013-08-27 03:35:20 jwalke npm link is a development time thing 502 2013-08-27 03:35:28 petehunt yeah actually 503 2013-08-27 03:35:31 jwalke someone should be able to npm install yourApp and have everything setup 504 2013-08-27 03:35:57 jwalke And even if npm link lets you get around it - if there's no way to specify it with package.json then it's not compliant IIRC. 505 2013-08-27 03:36:03 jwalke I *wish* so badly there was a way though 506 2013-08-27 03:36:13 jwalke it's quite horrible to have to do relative paths. 507 2013-08-27 03:36:14 petehunt jwalke: yeah there is :P 508 2013-08-27 03:36:18 petehunt NODE_PATH=src node server.js 509 2013-08-27 03:36:21 jwalke :/ 510 2013-08-27 03:36:43 jwalke If we had a way to do it - I think we would not use @providesModule at fb 511 2013-08-27 03:37:10 petehunt jwalke: NODE_PATH does it 512 2013-08-27 03:37:30 balpert iirc NODE_PATH is deprecated/removed in recent versions of node 513 2013-08-27 03:37:57 petehunt balpert: isn't that require.paths? 514 2013-08-27 03:38:12 balpert petehunt: ah, you're right 515 2013-08-27 03:39:00 balpert one weird thing with that is that npm modules will be preferred over local files so you have to watch out for name collisons 516 2013-08-27 03:39:04 balpert I think 517 2013-08-27 03:39:42 jwalke petehunt: You could break all of them up into sub npm modules 518 2013-08-27 03:45:34 jwalke petehunt: You know you can use @providesModule with react-page right? 519 2013-08-27 03:45:42 jwalke Not so good for open source examples though. 520 2013-08-27 07:17:46 petehunt jwalke_: i'm very productive with react-page, nice work. getting the css/image asset stuff going, plus integrating seamless client/server-side routing would be my final asks 521 2013-08-27 07:18:10 jwalke_ I'm pretty far with the css/image stuff 522 2013-08-27 07:18:20 jwalke_ what about the client routing? 523 2013-08-27 07:18:52 petehunt jwalke_: it would be great if i could get quickling for free 524 2013-08-27 07:19:19 jwalke_ well it's a good platform to try building that. 525 2013-08-27 07:19:23 jwalke_ Using the same module loader as fb 526 2013-08-27 07:19:30 jwalke_ __d etc 527 2013-08-27 08:00:16 jwalke_ petehunt: how easily 15 mins turns into three hours :) 528 2013-08-27 08:00:30 petehunt jwalke: it's cool man, i've been crazy productive with react-page 529 2013-08-27 08:00:45 petehunt jwalke: however i have a big "global.css" file :) 530 2013-08-27 08:00:55 petehunt jwalke: can you support arbitrary browserify transform modules please please please 531 2013-08-27 08:01:07 petehunt then i can use sass etc 532 2013-08-27 08:03:30 jwalke_ oh petehunt: it's connect middleware so for at least now, you can just plug in a sass connect plugin 533 2013-08-27 08:03:51 jwalke_ right in server.js - see where I inject the connect "static" file server plugin 534 2013-08-27 08:03:54 jwalke_ just add one more for sass 535 2013-08-27 08:04:00 petehunt jwalke_: you sure? if you're implementing my spec, i'll want to compile the sass before it hits your packager. 536 2013-08-27 08:04:14 jwalke_ oh yeah - I'm just saying to unblock you in the mean time 537 2013-08-27 08:04:18 petehunt oh 538 2013-08-27 08:04:27 petehunt i don't really use any sass features except variables, so i'm fine 539 2013-08-27 08:04:32 jwalke_ but that step is totally done in react-page-middleware so it will be easy for you to build exactly what you want 540 2013-08-27 08:04:35 petehunt i can put commas in my selectors until then 541 2013-08-27 08:04:50 petehunt jwalke_: but if you could support browserify transforms out of the box, that would be really, really excellent. 542 2013-08-27 08:04:59 petehunt i am convinced that is a truly good interface 543 2013-08-27 08:05:05 jwalke_ what's the api again? 544 2013-08-27 08:06:32 petehunt jwalke_: https://github.com/substack/module-deps#transforms 545 2013-08-27 08:06:46 petehunt trust me, it will make *everyones* lives much easier. 546 2013-08-27 08:06:55 petehunt i.e. free coffeescript 547 2013-08-27 08:07:04 petehunt free less/sass 548 2013-08-27 08:10:20 jwalke_ petehunt: That example is not helpful 549 2013-08-27 08:10:36 petehunt jwalke_: ok sec 550 2013-08-27 08:11:47 petehunt jwalke_: this is a browserify transform module: https://github.com/petehunt/staticify/blob/master/index.js 551 2013-08-27 08:13:00 jwalke_ wth is through? 552 2013-08-27 08:13:12 petehunt jwalke_: some streams thing 553 2013-08-27 08:13:29 petehunt that you have to use 554 2013-08-27 08:13:30 petehunt or ont 555 2013-08-27 08:13:32 petehunt not* 556 2013-08-27 08:13:37 petehunt i dont know, browserify really likes streams. 557 2013-08-27 08:13:53 petehunt jwalke_: but please please please make that api usable in react-page 558 2013-08-27 08:14:02 petehunt it will save us integration work down the line 559 2013-08-27 08:14:03 jwalke_ why is that so important? 560 2013-08-27 08:14:24 petehunt jwalke_: well, if you just made that available, then i could just plug in staticify and be done 561 2013-08-27 08:14:44 petehunt jwalke_: but lets say i want to use the spec and coffeescript 562 2013-08-27 08:14:51 petehunt i can just plug in staticify AND i can plug in coffeescript 563 2013-08-27 08:14:52 petehunt and itll work 564 2013-08-27 08:16:12 jwalke_ petehunt: How does one of these plugins define how to replace/transform the actual require() call? 565 2013-08-27 08:16:36 petehunt jwalke_: they don't, they're just syntax transforms. 566 2013-08-27 08:17:16 jwalke_ how do they define what is returned from require()? 567 2013-08-27 08:17:31 balpert given a file name, it produces a r/w stream that the file contents is piped through 568 2013-08-27 08:18:33 petehunt jwalke_: just look at my code. you need to turn it into js source code 569 2013-08-27 08:18:38 petehunt they use a stream interface because… i don't know. 570 2013-08-27 08:18:53 balpert so one of these plugins is like function(filename) { if (/\\.jsx$/.test(filename)) { return JSXTransformer.transform; } } 571 2013-08-27 08:18:56 balpert but with more streams 572 2013-08-27 08:19:07 petehunt Non Blocking I/O Is Better 573 2013-08-27 08:20:21 jwalke_ petehunt: So, I wanted to accumulate all the require('x.css') calls and not generate javascript 574 2013-08-27 08:20:28 jwalke_ rather, bundle a css package. 575 2013-08-27 08:21:04 petehunt jwalke_: if you just give me the browserify transform api, we can plug in staticify easily to get it working, then make it more optimal later 576 2013-08-27 08:21:22 petehunt if you want to do something like that, youll need to hack haste, the transform api won't work for that 577 2013-08-27 08:21:51 jwalke_ petehunt: I was suggesting that the API we use be powerful to allow this bundling. 578 2013-08-27 08:22:56 petehunt jwalke_: well, if somewhere we could plug in browserify syntax transforms that would be helpful 579 2013-08-27 08:23:03 petehunt unless you want to personally make coffeescript and sass work. 580 2013-08-27 08:28:08 jwalke_ petehunt: Do you think images could be handled at the router level? 581 2013-08-27 08:28:16 jwalke_ localhost:8080/myProject/image.png 582 2013-08-27 08:28:26 jwalke_ would route to whichever package.json defined myProject 583 2013-08-27 08:28:31 jwalke_ possibly in node_modules 584 2013-08-27 08:28:42 petehunt jwalke_: as far as the spec goes? sounds interesting, think it would work 585 2013-08-27 08:29:07 jwalke_ only thing is that we would also need to rewrite require('../some.png') 586 2013-08-27 08:29:08 jwalke_ statically 587 2013-08-27 08:29:24 jwalke_ to require('whieverProjectItIs/path/some.png') 588 2013-08-27 08:29:39 petehunt jwalke_: i do not know node-haste at all. 589 2013-08-27 08:29:43 petehunt sorry :/ 590 2013-08-27 08:29:52 jwalke_ does that matter? 591 2013-08-27 08:30:00 jwalke_ But I think the spec should not specify how this is accomplished. 592 2013-08-27 08:30:19 petehunt it doesnt, right? 593 2013-08-27 08:30:20 jwalke_ It should just specify that however it has to happen, that needs to resolve to the correct string that produces that image being required 594 2013-08-27 08:30:26 petehunt not a string 595 2013-08-27 08:30:34 petehunt a "something that can be used to render the final image" 596 2013-08-27 08:30:36 jwalke_ it has to be a string 597 2013-08-27 08:30:45 petehunt oh, the param passed to require() 598 2013-08-27 08:30:46 petehunt right 599 2013-08-27 08:30:48 jwalke_ img src={require('../x.png')} 600 2013-08-27 08:30:50 jwalke_ no 601 2013-08-27 08:30:54 jwalke_ the result of the require 602 2013-08-27 08:31:03 petehunt it depends on your environment 603 2013-08-27 08:31:13 petehunt you could imagine an environment where your img component takes a sprite 604 2013-08-27 08:31:18 jwalke_ "By the time runtime happens - that require statement better resolve to the right string") 605 2013-08-27 08:31:27 petehunt which needs to have a box and an asset url 606 2013-08-27 08:37:35 jwalke_ petehunt: couple of questions. It says it's already character encoded 607 2013-08-27 08:37:40 jwalke_ so you have to read the file again 608 2013-08-27 08:37:44 petehunt jwalke_: yes 609 2013-08-27 08:37:48 jwalke_ We shouldn't do that. 610 2013-08-27 08:37:52 petehunt fortunately you have a reliable path 611 2013-08-27 08:38:04 petehunt you are talking about browserify transform, right? 612 2013-08-27 08:38:10 jwalke_ yeah 613 2013-08-27 08:38:16 petehunt i know, i wasted a ton of time on that 614 2013-08-27 08:38:35 jwalke_ In my implementation, I probably don't want to character encode right? 615 2013-08-27 08:38:58 petehunt jwalke_: i would have preferred that it give me a buffer. 616 2013-08-27 08:42:15 balpert jwalke_: does this look familiar to you? https://gist.github.com/spicyj/186f5e1ee7e1c759af2f 617 2013-08-27 08:43:14 jwalke_ balpert: Hmmm 618 2013-08-27 08:43:15 jwalke_ no 619 2013-08-27 08:43:19 jwalke_ did it just start happening? 620 2013-08-27 08:43:41 balpert I just cloned react-page for the first time 621 2013-08-27 08:43:49 jwalke_ npm installed of course? 622 2013-08-27 08:43:53 jwalke_ no errors on npm install? 623 2013-08-27 08:43:58 jwalke_ and what version of node do you have 624 2013-08-27 08:43:58 balpert yup, no errors 625 2013-08-27 08:44:02 jwalke_ and do you have xcode installed 626 2013-08-27 08:44:14 balpert 0.8.16, too old? 627 2013-08-27 08:44:19 jwalke_ oh wow 628 2013-08-27 08:44:21 jwalke_ yeah 629 2013-08-27 08:44:30 jwalke_ we should be failing fast telling you it's too old 630 2013-08-27 08:44:54 jwalke_ It has issues with pointing package.json's to github repos - which turns out to be the most awesome feature ever. 631 2013-08-27 08:44:59 jwalke_ can you update? 632 2013-08-27 08:45:15 balpert yup, doing so 633 2013-08-27 08:46:50 balpert okay, now at 0.10.13 and it works 634 2013-08-27 08:47:09 balpert had to rm -rf node_modules and reinstall 635 2013-08-27 08:52:49 balpert jwalke_: that spinning logo is awesome 636 2013-08-27 08:53:05 jwalke_ :) 637 2013-08-27 08:53:07 jwalke_ click it! 638 2013-08-27 08:53:14 balpert I did! 639 2013-08-27 08:53:21 balpert then after reading the source I found I could click it a lot 640 2013-08-27 08:53:49 jwalke_ haha - actually a nice little demo of reactive animations 641 2013-08-27 08:54:00 jwalke_ tiny amount of friction 642 2013-08-27 08:57:43 jwalke_ petehunt: can you chain those transforms 643 2013-08-27 08:57:49 petehunt jwalke_: yes 644 2013-08-27 08:57:54 jwalke_ without accumulating the buffer for filetypes you don't care about 645 2013-08-27 08:58:10 petehunt jwalke_: yes you can just stream it through if you aren't interested in it 646 2013-08-27 08:58:23 jwalke_ how do you just stream it through? 647 2013-08-27 08:58:27 jwalke_ without accumulating? 648 2013-08-27 09:07:57 jwalke_ petehunt: I'm going to have to continue this throughout the week. 649 2013-08-27 09:08:06 jwalke_ Here's the react-page-middleware changes so far: 650 2013-08-27 09:08:07 jwalke_ https://github.com/facebook/react-page-middleware/commit/10a427bb74381d500628efb7f43784b0799ea425 651 2013-08-27 09:08:43 jwalke_ And here's the node-haste changes required to support image/css deps of JS modules 652 2013-08-27 09:08:44 jwalke_ https://github.com/jordwalke/node-haste/commit/6c37e76e7cebafd0059ab025daad9fafcde76dc6 653 2013-08-27 09:09:16 jwalke_ If all is working well, the only thing left to do, is integrate the browserify streams API into the packager part - where we transform the modules 654 2013-08-27 09:09:21 balpert jwalke_: what's ? 655 2013-08-27 09:09:32 jwalke_ you can feel free to take a stab at it - it's 95% done. 656 2013-08-27 09:09:56 jwalke_ balpert: haha - that was a hack I had in place. 657 2013-08-27 09:10:10 jwalke_ So, we secretly inject the 6224 2013-09-22 16:58:15 hukuuu maybe it's my browser 6225 2013-09-22 16:58:17 vjeux 6226 2013-09-22 16:58:23 vjeux can you try with those js files 6227 2013-09-22 16:58:30 hukuuu sure 6228 2013-09-22 16:58:31 vjeux instead of the ones that are built 6229 2013-09-22 16:58:47 vjeux maybe there's an issue with the files in the kit 6230 2013-09-22 16:59:50 hukuuu same exact error 6231 2013-09-22 17:00:07 hukuuu lettme run it on mozilla as well 6232 2013-09-22 17:00:51 hukuuu no luck there too 6233 2013-09-22 17:01:24 vjeux hmm this is weird :p let me try to copy and paste your files 6234 2013-09-22 17:01:43 jonathanj are all the javascript files being found by the browser? 6235 2013-09-22 17:01:50 hukuuu yes 6236 2013-09-22 17:02:03 hukuuu do you want me to send you zip ? 6237 2013-09-22 17:03:22 hukuuu https://www.filepicker.io/api/file/te15N4AyRI2Cnpvsy18V 6238 2013-09-22 17:03:41 vjeux http://fooo.fr/~vjeux/react-bug/bug.html 6239 2013-09-22 17:03:48 vjeux hmm, this seems to be working fine for me 6240 2013-09-22 17:04:08 hukuuu damn 6241 2013-09-22 17:04:17 hukuuu the link is working for me as well 6242 2013-09-22 17:04:27 vjeux let me try your 6243 2013-09-22 17:04:29 hukuuu can you try to run the hello folder 6244 2013-09-22 17:05:02 vjeux yup, uploading it to my server to try 6245 2013-09-22 17:06:28 jonathanj seems like the problem is the line endings 6246 2013-09-22 17:06:36 hukuuu omg 6247 2013-09-22 17:06:41 jonathanj i converted app.js to UNIX-style line endings 6248 2013-09-22 17:07:02 vjeux http://fooo.fr/~vjeux/react-bug/react/hello/ 6249 2013-09-22 17:07:06 vjeux hello folder seems fine? 6250 2013-09-22 17:07:19 hukuuu .... 6251 2013-09-22 17:07:22 vjeux ohhh 6252 2013-09-22 17:07:26 vjeux so it's a windows line ending 6253 2013-09-22 17:07:31 vjeux instead of unix one? 6254 2013-09-22 17:07:38 hukuuu i guess so :D 6255 2013-09-22 17:07:43 hukuuu i am using windows 6256 2013-09-22 17:07:57 vjeux this is bad that the error message is so bad 6257 2013-09-22 17:08:26 jonathanj seems strange that that should even matter 6258 2013-09-22 17:08:57 hukuuu i am totally new at react, so just tought that i am doing somehting wrong 6259 2013-09-22 17:09:27 vjeux hukuuu: yeah, this error is crazy :p 6260 2013-09-22 17:09:33 vjeux I'm glad we found the issue 6261 2013-09-22 17:09:39 hukuuu me too :) 6262 2013-09-22 17:09:43 hukuuu thanks guys 6263 2013-09-22 17:09:47 vjeux I'm going to open an issue so we can make a better error message 6264 2013-09-22 17:10:01 vjeux so others don't struggle with the same issue 6265 2013-09-22 17:10:29 jonathanj perhaps that should be mentioned in the gotchas until it's resolved? 6266 2013-09-22 17:10:56 vjeux can you paste me the exact error? 6267 2013-09-22 17:11:22 vjeux jonathanj: yeah that's a good idea too 6268 2013-09-22 17:11:33 jonathanj in Firefox it's completely useless 6269 2013-09-22 17:11:39 jonathanj SyntaxError: syntax error 6270 2013-09-22 17:11:47 jonathanj that's what is logged to the console 6271 2013-09-22 17:11:53 hukuuu sec 6272 2013-09-22 17:12:07 jonathanj and it points at the JSX 6914 2013-09-24 17:47:11 zpao yes it is, and it depends on the existance of $ as a global 6915 2013-09-24 17:47:29 balpert zpao: that seems reasonable to me. 6916 2013-09-24 17:47:33 zpao if we want to say fuck require, then we can go that route 6917 2013-09-24 17:47:38 vjeux while this is hacky and bad for performance, it works and people use it :p 6918 2013-09-24 17:47:46 balpert I assume that is react-with-addons 6919 2013-09-24 17:47:52 vjeux and there's a big ecosystem around it 6920 2013-09-24 17:48:23 petehunt i feel like The Solution For Sharable Components and how we expose stuff like ReactTransitionGroup are somewhat different problems 6921 2013-09-24 17:48:32 zpao yes, they are 6922 2013-09-24 17:48:39 petehunt the former is a humongous rabbit hole that several of us have already gone down 6923 2013-09-24 17:48:40 balpert there are like five problems here 6924 2013-09-24 17:49:00 petehunt right 6925 2013-09-24 17:49:19 petehunt let's reduce it down to one which is: there is stuff in the react core repo that we want to expose to the outside world as addons 6926 2013-09-24 17:49:46 balpert react-with-addons.js feels workable for now 6927 2013-09-24 17:50:08 petehunt i don't think we should worry so much about an unstable public api since we're pre-1.0, can document that it's unstable, and it's better to have an unstable API of high quality components rather than everyone one-offing it for their project 6928 2013-09-24 17:51:03 petehunt i also don't think we should worry so much about file size since i think that most people who are willing to have a separate HTTP round-trip to a different cdn for react (that includes a gross http redirect btw), are not going to notice the extra bytes that bundling multiple addons will bring. and if they do, they can always git clone the repo. 6929 2013-09-24 17:51:48 zpao i honestly don't think anybody should be using our cdn and should actually use cdnjs because our cdn setup sucks right now 6930 2013-09-24 17:51:56 balpert petehunt: are you saying we should always bundle the addons in? 6931 2013-09-24 17:52:02 zpao but that's a separate story 6932 2013-09-24 17:52:22 petehunt balpert: i'm saying that if you use react-0.5.0-with-addons.min.js, we should just bundle everything that's useful 6933 2013-09-24 17:52:26 balpert yes, agree 6934 2013-09-24 17:52:32 petehunt i.e. cx(), StaticContainer, ReactTransitionGroup, etc 6935 2013-09-24 17:52:55 petehunt i do want to keep the core react-0.5.0.min.js small 6936 2013-09-24 17:56:06 petehunt zpao: what do you think? you mentioned earlier you want to keep React.addons smaller and not include things like cx(), right? 6937 2013-09-24 17:56:42 balpert someone said cx was going away 6938 2013-09-24 17:56:46 zpao once those things are out, we'll need some way for people to transition easily 6939 2013-09-24 17:57:00 zpao cx isn't going away, but we might call it something less cryptic 6940 2013-09-24 17:57:15 zpao (we use it extensively internally so there's no way we'll kill it) 6941 2013-09-24 17:57:49 petehunt zpao: sure. it will probably be something like npm install react-transitiongroup, right? 6942 2013-09-24 17:57:51 balpert but it munges the names internally or something? 6943 2013-09-24 17:58:16 balpert petehunt: I think the vast vast majority is people for whom npm installing plugins for their website is not practical 6944 2013-09-24 17:58:24 petehunt yet. 6945 2013-09-24 17:59:10 vjeux my dream would be to have npm install AND a cdn url for the scrip 6946 2013-09-24 17:59:11 vjeux t 6947 2013-09-24 17:59:31 zpao balpert: i'm with you here. i don't think npm + browserifying the world is where the chips will fall in the end 6948 2013-09-24 17:59:40 vjeux this way if you just want to hack on the file you can use https://cdn.com/react-transitions-0.5.4.js 6949 2013-09-24 18:00:05 balpert petehunt: it's not practical yet for me at KA and I like to think we're not behind :) 6950 2013-09-24 18:01:03 petehunt balpert: well the tooling sucks. if i gave you a tool that bridged npm to your world it would probably be an easier sell, right? 6951 2013-09-24 18:01:21 balpert well sure 6952 2013-09-24 18:01:24 balpert I would love to use npm 6953 2013-09-24 18:01:35 zpao i don't know that i would 6954 2013-09-24 18:01:38 zpao fwiw 6955 2013-09-24 18:01:38 balpert but it's a pain partly because tools are lacking for a new project and partly because tools are lacking for a migration 6956 2013-09-24 18:01:51 balpert zpao: well it seems not-totally-horrible and better than nothing 6957 2013-09-24 18:01:58 balpert I don't have any huge stake in npm 6958 2013-09-24 18:02:29 vjeux the great thing with npm is that it manages dependencies for you 6959 2013-09-24 18:02:35 zpao sure, better than nothing. but maybe i'm just old school and would prefer to drop a couple script tags on my page because outside of fb, i don't care enough about perf 6960 2013-09-24 18:02:45 zpao or i use rails and my scripts are concatted together 6961 2013-09-24 18:03:25 vjeux maybe what we want to do is to have our own cdn that takes npm based components and generate js files out of it 6962 2013-09-24 18:03:35 balpert yeah, everyone's tools support script tags 6963 2013-09-24 18:03:37 balpert or concatenating 6964 2013-09-24 18:03:40 vjeux so we can have both static js files and npm install + browserify 6965 2013-09-24 18:04:15 petehunt i am betting on commonjs/npm 6966 2013-09-24 18:04:24 petehunt i just think that the tooling isn't there yet 6967 2013-09-24 18:04:28 balpert zpao: you think this proposal is worse than other things we could do w/r/t transitioning away in the future? 6968 2013-09-24 18:06:53 zpao vjeux: http://wzrd.in/ 6969 2013-09-24 18:07:08 balpert what are StaticContainer and DOMContainer? 6970 2013-09-24 18:07:23 vjeux zpao: nice, we could push for that 6971 2013-09-24 18:07:38 hojberg eventually es6 modules will win though :) 6972 2013-09-24 18:07:39 vjeux balpert: StaticContainer just sets componentShouldUpdate to false 6973 2013-09-24 18:07:56 zpao hojberg: i hope, though it will likely be es7 modules now 6974 2013-09-24 18:08:03 balpert zpao: :( really? 6975 2013-09-24 18:08:04 vjeux balpert: DOMContainer lets you write {document.createElement('div')} 6976 2013-09-24 18:08:13 vjeux so you can embed third party code more easily 6977 2013-09-24 18:08:26 hojberg zpao: is still part of the proposals for es6 no? 6978 2013-09-24 18:08:32 vjeux rather than having to hook with componentDidMount manually 6979 2013-09-24 18:08:45 hojberg yea its still part of that 6980 2013-09-24 18:08:54 zpao hojberg: balpert: looking for the meeting notes... i think there were just too many problems and it's been recommended for removal 6981 2013-09-24 18:09:12 balpert vjeux: cool. 6982 2013-09-24 18:09:16 hojberg zpao: interesting. from this latest tc39 in boston? 6983 2013-09-24 18:09:35 zpao hojberg: yea 6984 2013-09-24 18:09:50 hojberg attended a panel with tc39 and they were kinda dismissive of talking modules... hmm 6985 2013-09-24 18:10:42 vjeux http://wzrd.in/bundle/react-tools 6986 2013-09-24 18:10:44 vjeux this is awesome :p 6987 2013-09-24 18:11:27 hojberg zpao: https://github.com/rwaldron/tc39-notes/tree/master/es6/2013-09 6988 2013-09-24 18:12:07 zpao hojberg: yea, trying to find the part i only heard summaraized 6989 2013-09-24 18:12:48 zpao i think there was talk of a new html element to help with this - 6990 2013-09-24 18:13:05 zpao '}} /> 14413 2013-10-30 21:29:24 petehunt its ugliness is a feature, not a bug. 14414 2013-10-30 21:33:24 baranaby haha, fair enough 14415 2013-10-30 21:33:33 baranaby thanks 14416 2013-10-30 21:49:26 sspi currently working on #381 - and looking into how to properly support the event plugins, so my idea was to have the plugins tell what "lower level" events they are dependent on 14417 2013-10-30 21:54:01 sspi I guess this would happen within eventTypes 14418 2013-10-31 00:10:08 balpert yungsters: does Math.max(document.body.scrollLeft, document.documentElement.scrollLeft) not work? 14419 2013-10-31 00:16:04 balpert or even document.body.scrollLeft || document.documentElement.scrollLeft 14420 2013-10-31 01:00:12 yungsters balpert: it does and probably makes a lot of sense w/o seeing the other half of the picture 14421 2013-10-31 01:00:39 yungsters internally, we have a getBoundScrollPosition that also queries the document's clientWidth, clientHeight, scrollWidth, and scrollHeight 14422 2013-10-31 01:00:49 yungsters actually, i think we just call it getScrollPosition 14423 2013-10-31 01:00:59 yungsters but basically, we need the actual element (and not just the scrollTop/scrollLeft0 14424 2013-10-31 01:01:16 yungsters that said, since we do not use the bound-version in React, maybe it would've been better to use X || Y 14425 2013-10-31 01:03:23 yungsters hm.... actually, there's no reason the bound- and unbound- versions need to share a similar implementation 14426 2013-10-31 01:03:30 yungsters i'll change it tomorrow :D 14427 2013-10-31 01:04:08 pieterv yungsters: not sure if you have seen this but the `navigator` call in https://github.com/facebook/react/blob/master/src/vendor/core/dom/getDocumentScrollElement.js#L9 is breaking react-page node rendering for me 14428 2013-10-31 01:04:23 pieterv seems to work fine, if you change the line to: 14429 2013-10-31 01:04:25 pieterv var isWebkit = typeof navigator !== 'undefined' && navigator.userAgent.indexOf('AppleWebKit') > -1; 14430 2013-10-31 01:04:38 yungsters pieterv: oh -.- didn't see that, thanks 14431 2013-10-31 01:04:45 pieterv no worries :) 14432 2013-10-31 01:04:47 yungsters i'll remove the dependency tomorrow 14433 2013-10-31 01:04:53 yungsters sorry for the trouble 14434 2013-10-31 01:05:07 pieterv cool, no problem it was easy to fix locally 14435 2013-10-31 01:08:06 balpert yungsters: cool. I just try to avoid UA sniffing whenever possible :) 14436 2013-10-31 07:45:14 Guest50853 have you guys used any QML (the UI language) ? it feels react is very similar 14437 2013-10-31 15:43:23 chenglou balpert: yt 14438 2013-10-31 17:05:33 SubtleGradient benjamn: ahoy 14439 2013-10-31 17:05:47 benjamn SubtleGradient: welcome! 14440 2013-10-31 17:06:02 SubtleGradient Thanks! 14441 2013-10-31 17:09:30 benjamn SubtleGradient: how are you feeling about SauceLabs vs. Testling nowadays? 14442 2013-10-31 17:10:08 SubtleGradient benjamn: SauceLabs is clearly better for React 14443 2013-10-31 17:10:32 SubtleGradient I'm working on integrating saucelaps jazz into React's grunt scripts 14444 2013-10-31 17:11:03 SubtleGradient with Travis-ci support too of course 14445 2013-10-31 17:11:04 benjamn cool 14446 2013-10-31 17:11:30 SubtleGradient Trying to get it all running in every browser has exposed some issues. 14447 2013-10-31 17:11:40 SubtleGradient A crasher on iOS Safari 14448 2013-10-31 17:11:44 benjamn I like that Sauce supports an HTML file (test/sauce-harness.html) 14449 2013-10-31 17:11:50 benjamn that's great! 14450 2013-10-31 17:11:52 SubtleGradient And various issues on IE8 14451 2013-10-31 17:12:04 SubtleGradient Yeah, sauce lets you do whatever you like. 14452 2013-10-31 17:12:19 SubtleGradient I did have to build a new streaming reporter though. 14453 2013-10-31 17:12:21 petehunt SubtleGradient: loving prodinfraaylott 14454 2013-10-31 17:12:34 benjamn was https://github.com/subtleGradient/react/blob/338084ebd8c5c01fc47bf054409c8c08a81bfe08/test/browser-runner.js specific to testling? 14455 2013-10-31 17:12:48 SubtleGradient #AylottOfProdInfraHackamonth FTW 14456 2013-10-31 17:13:03 SubtleGradient benjamn: yes 14457 2013-10-31 17:13:10 benjamn ok good 14458 2013-10-31 17:13:24 SubtleGradient I'm working on an updated version of that for browsers in general 14459 2013-10-31 17:13:55 SubtleGradient It'll run headless in any browser and report results back to a node.js server running inside a grunt script 14460 2013-10-31 17:14:09 SubtleGradient No need to rely on much in webdriver 14461 2013-10-31 17:14:32 SubtleGradient And you get to see a live stream of test results in your console as they run 14462 2013-10-31 17:15:03 benjamn SubtleGradient: have you read through the phantom harness? 14463 2013-10-31 17:15:08 SubtleGradient I simply can't tolerate staring at a blank screen while something may or may not be happening off in the distance 14464 2013-10-31 17:15:30 SubtleGradient benjamn: yes. This will likely replace that also 14465 2013-10-31 17:15:49 benjamn SubtleGradient: that's great, let's just make sure it's a clear improvement? 14466 2013-10-31 17:16:03 SubtleGradient let's 14467 2013-10-31 17:16:22 SubtleGradient #captainObviousStrikesAgain 14468 2013-10-31 17:16:57 benjamn there's just more to the existing test framework than might meet the eye 14469 2013-10-31 17:17:11 SubtleGradient Sorry, I missed the ";)" 14470 2013-10-31 17:17:21 benjamn happy to explain everything in as much detail as you can tolerate 14471 2013-10-31 17:17:22 balpert chenglou: here now -- in general I'm unlikely to be awake before 10am :) 14472 2013-10-31 17:18:35 chenglou balpert: cool. Im trying transition group right now and testing some error messages 14473 2013-10-31 17:18:39 SubtleGradient benjamn: Thanks. I'll ping you if I have any more questions 14474 2013-10-31 17:18:48 benjamn SubtleGradient: for instance, you might find https://github.com/facebook/react/blob/master/vendor/jasmine/console.js interesting 14475 2013-10-31 17:18:57 benjamn it's a communication channel for console.* 14476 2013-10-31 17:19:30 chenglou balpert: currently it's "[Warning] transition(): tried to perform an animation without ... " 14477 2013-10-31 17:19:40 benjamn that communicates with phantom to log the messages to the console where phantom is running 14478 2013-10-31 17:20:01 chenglou I was wondering if it's possible to indicate which child component it is so I went to modify the message 14479 2013-10-31 17:20:05 chenglou balpert: but no idea what to do 14480 2013-10-31 17:20:27 petehunt chenglou: yo dawg 14481 2013-10-31 17:20:55 balpert chenglou: are you on master or 0.5? 14482 2013-10-31 17:21:11 chenglou balpert: one from bower 14483 2013-10-31 17:21:16 petehunt chenglou: you could prob change the error to look at this.props.__owner__.constructor.displayName 14484 2013-10-31 17:21:29 petehunt chenglou: also 0.5.1 has an important TransitionGroup bugfix 14485 2013-10-31 17:21:43 chenglou petehunt: yep, .5.1 14486 2013-10-31 17:21:46 chenglou alright I'll try that 14487 2013-10-31 17:21:51 chenglou thx 14488 2013-10-31 17:22:05 chenglou is there a 0.5.1 fiddle 14489 2013-10-31 17:22:08 chenglou I want to show something 14490 2013-10-31 17:22:22 petehunt chenglou: please don't break the case where this.props.__owner__ is null (i.e. calling renderComponent() right on a TransitionGroup) 14491 2013-10-31 17:22:53 chenglou petehunt: I'm just gonna display the name so won't 14492 2013-10-31 17:23:02 zpao vjeux__: can you update your base fiddle for 0.5.1? 14493 2013-10-31 17:23:07 vjeux__ zpao: yup 14494 2013-10-31 17:23:12 vjeux__ can you accept the cookbook? :p 14495 2013-10-31 17:23:31 zpao chenglou: in the mean time, just change the external resources in the left column to use 0.5.1 instead, 14496 2013-10-31 17:25:58 vjeux zpao: http://jsfiddle.net/vjeux/kb3gN/419/ 14497 2013-10-31 17:26:07 vjeux can you also see Uncaught TypeError: Cannot call method 'setOption' of undefined in the console? 14498 2013-10-31 17:26:25 vjeux yeah looks like it is jsfiddle 14499 2013-10-31 17:27:14 vjeux ok, jsfiddle are updated 14500 2013-10-31 17:28:17 chenglou vjeux: thx 14501 2013-10-31 17:29:56 chenglou vjeux: do you have a version with the add ons? 14502 2013-10-31 17:30:15 vjeux chenglou: oh, I should probably add addons to it 14503 2013-10-31 17:30:17 vjeux good point 14504 2013-10-31 17:30:19 vjeux let me do that 14505 2013-10-31 17:30:55 zpao needs to be a separate fiddle 14506 2013-10-31 17:31:05 zpao or we just always use the addons build 14507 2013-10-31 17:31:14 vjeux zpao: I was thinking always use the addons build 14508 2013-10-31 17:31:31 vjeux it's going to get messy to give the user the choice of 4 different fiddle 14509 2013-10-31 17:31:38 zpao just 2? 14510 2013-10-31 17:32:08 zpao but yea, probably fine to just make it addons for now. 14511 2013-10-31 17:32:28 vjeux 2 (with/out addons) * 2 (jsx/not) 14512 2013-10-31 17:33:21 vjeux zpao: what's the url for the version with addons? 14513 2013-10-31 17:33:21 vjeux http://facebook.github.io/react/downloads.html 14514 2013-10-31 17:35:57 zpao -with-addons 14515 2013-10-31 17:36:00 vjeux thx 14516 2013-10-31 17:36:45 vjeux http://fb.me/react-0.5.1-with-addons.js 14517 2013-10-31 17:36:46 vjeux like this? 14518 2013-10-31 17:37:07 balpert http://fb.me/react-with-addons-0.5.1.js 14519 2013-10-31 17:38:03 vjeux thx 14520 2013-10-31 17:38:39 vjeux ok, updated 14521 2013-10-31 17:38:54 chenglou vjeux: cool thx 14522 2013-10-31 17:39:22 chenglou vjeux: link please? 14523 2013-10-31 17:39:30 vjeux http://facebook.github.io/react/docs/getting-started.html 14524 2013-10-31 17:40:54 chenglou petehunt: http://jsfiddle.net/chenglou/z6C4p/ 14525 2013-10-31 17:41:04 chenglou =) 14526 2013-10-31 17:41:31 vjeux ok, you just killed my next hour :p 14527 2013-10-31 17:41:46 chenglou lol 14528 2013-10-31 17:42:32 vjeux I can't make it less than 2 :( 14529 2013-10-31 17:43:52 zpao chenglou: fuuuucccck 14530 2013-10-31 17:44:08 vjeux omg, got 1 :p 14531 2013-10-31 17:44:22 chenglou vjeux: yo it used to generate pretty patterns 14532 2013-10-31 17:44:24 zpao chenglou: you might want to look at React.addons.classSet 14533 2013-10-31 17:44:34 chenglou except I just learned this morning that not all patterns are solvable so I dropped it 14534 2013-10-31 17:44:50 zpao chenglou: will be cleaner than your if/else += 14535 2013-10-31 17:44:58 vjeux wat ... let's hope that the default one is solvable :p 14536 2013-10-31 17:45:42 chenglou vjeux: of course, I tried them beforehand lol 14537 2013-10-31 17:45:58 chenglou vjeux: if you check the source code there's a cheat there 14538 2013-10-31 17:46:08 chenglou vjeux: css line 1 lol 14539 2013-10-31 17:46:57 balpert lol 14540 2013-10-31 17:47:04 andreypopp chenglou: hey, I remember you discussed inline styling of components, you might be interested in this — https://github.com/andreypopp/cssobjectify — browserify transform to turn CSS into JSON objects suitable for passing into style prop 14541 2013-10-31 17:49:10 vjeux andreypopp: sweet 14542 2013-10-31 17:49:44 vjeux petehunt: ^^ 14543 2013-10-31 17:50:07 petehunt yeah that's pretty bad ass 14544 2013-10-31 17:50:11 chenglou andreypopp: nice 14545 2013-10-31 17:50:22 chenglou andreypopp: but why wouldn't you just write the css in json in the first place? 14546 2013-10-31 17:50:32 chenglou andreypopp: you get the preprocessors' power for free 14547 2013-10-31 17:50:41 vjeux chenglou: because it looks better in css : 14548 2013-10-31 17:50:41 vjeux p 14549 2013-10-31 17:50:47 andreypopp too verbose :) 14550 2013-10-31 17:51:13 chenglou andreypopp: sorry not json, just plain js file with a module.exports = {blabla} 14551 2013-10-31 17:51:41 benjamn SubtleGradient: yt? 14552 2013-10-31 17:52:07 SubtleGradient benjamn: yup 14553 2013-10-31 17:52:24 benjamn SubtleGradient: glad that rationale made sense :) 14554 2013-10-31 17:52:37 SubtleGradient I figured it was something like that 14555 2013-10-31 17:52:45 benjamn I tried to get some pretty react-specific PRs into browserify and it didn't go well 14556 2013-10-31 17:53:17 SubtleGradient Yeah, as much as I am a huge substack fan, that doesn't surprise me 14557 2013-10-31 17:53:25 benjamn I don't blame him at all! 14558 2013-10-31 17:53:37 andreypopp chenglou: yeah, sure, but that way it will be evaluated at runtime, with cssobjectify (and a couple of rework CSS transforms) you can balance between compile time evaluation and runtime evaluation when you assign styles to a component 14559 2013-10-31 17:53:53 benjamn populist has no ambitions to become a general-purpose tool, but it does give us what we need for mocking 14560 2013-10-31 17:54:06 SubtleGradient #worksForMe 14561 2013-10-31 17:54:21 chenglou andreypopp: ah k 14562 2013-10-31 17:54:36 chenglou andreypopp: have you thought of the other way around, js object -> css? 14563 2013-10-31 17:54:55 andreypopp chenglou: did you see rework? 14564 2013-10-31 17:54:57 chenglou during the transform you can assign unique ids to css classes to solve the scoping problem, then everyone happy 14565 2013-10-31 17:55:14 chenglou andreypopp: from tj? not yet, but im not too fond of preprocessors (if that is one) 14566 2013-10-31 17:56:07 andreypopp chenglou: it's kinda a framework for making lightweight CSS transforms, there are couple of those in the wild and they are pretty composable 14567 2013-10-31 17:56:30 andreypopp chenglou: I think it could be used to do such transform 14568 2013-10-31 17:56:48 chenglou zpao: sorry just saw your message. didn't know classSet was there! no docs? 14569 2013-10-31 17:56:56 zpao no docs... 14570 2013-10-31 17:56:59 zpao (oops) 14571 2013-10-31 17:57:23 zpao it was a last minute thing and it's so small and not directly related to React 14572 2013-10-31 17:57:51 vjeux maybe small but we use it extensively at fb :) 14573 2013-10-31 17:58:16 chenglou andreypopp: alright I'll check into it, thanks 14574 2013-10-31 17:58:33 chenglou andreypopp: I find tj trying too many things at the same time so I stopped caring lol 14575 2013-10-31 18:01:13 chenglou zpao: I'll doc that if you want 14576 2013-10-31 18:01:20 zpao chenglou: sure :) 14577 2013-10-31 18:43:04 chenglou petehunt: in examples/transition.css and in docs, why is final animation opacity .99 14578 2013-10-31 19:18:31 syranide anyone have any experience with running the react tests? 14579 2013-10-31 19:44:20 chenglou benjamn: for #458, done everything except compress.js in grunt/config 14580 2013-10-31 19:44:52 syranide how do I get the filenames of the tests that failed? (or otherwise find out where they are) 14581 2013-10-31 19:44:54 chenglou benjamn: the name sounded a bit generic so not sure what to do with it 14582 2013-10-31 19:48:09 chenglou benjamn: ah nvm misread, compress.js excludes the wrapup folder 14583 2013-10-31 19:53:43 petehunt syranide: grunt test should do the job 14584 2013-10-31 19:54:08 syranide yeah didn't work at first, but ran it once more and then it worked for some reason ^^ 14585 2013-10-31 19:54:48 syranide petehunt: compiling a pull request for the whitespace fix 14586 2013-10-31 19:54:59 petehunt syranide: did you talk to jeffmo? 14587 2013-10-31 19:55:18 syranide petehunt: nope, hasn't responded to the issue yet anyway 14588 2013-10-31 19:55:34 petehunt he is the best resource for it. i have no idea what his opinion is on it :) 14589 2013-10-31 19:57:06 syranide petehunt: ofc, I'm kind of new to github but it seemed like pull requests could work for discussing it too (I have already written the code while experimenting, apart from one or two tweaks) 14590 2013-10-31 19:57:16 petehunt syranide: yep, sure can! 14591 2013-10-31 20:31:14 zpao chenglou: hey, is there another PR you're doing against connormcsheffrey's repo? i see a comment in the PR to fb that something is "fixed in a new PR" 14592 2013-10-31 20:32:55 chenglou ah those are already pulled in 14593 2013-10-31 20:33:03 chenglou zpao: are you pushing these out now? 14594 2013-10-31 20:34:28 zpao doing a pass through. there are things in there i want to tweak so i'm trying to decided if we should just merge and iterate or make some changes in connor's repo first. from a repo history perspective, i kinda like the 2nd option but the first is probably better to get this in sooner 14595 2013-10-31 20:41:31 connormcsheffrey zpao: Yeah, chenglou's changes are in there. 14596 2013-10-31 20:41:54 zpao connormcsheffrey: ok cool 14597 2013-10-31 20:42:03 connormcsheffrey Feel free to fork the repo I created. That's how chenglou and I have been working. 14598 2013-10-31 20:48:16 zpao connormcsheffrey: i won't be able to fork again since i have my fork already but i can have a branch and PR against yours. i might just do that to fixup a few things. i'll figure it out but i didn't want to bug you guys for small fixes 14599 2013-10-31 20:48:48 zpao connormcsheffrey: chenglou: now the big question i have for you guys... do you still feel comfortable calling them "cookbooks" even though we opted for the "tip" format? 14600 2013-10-31 20:49:23 vjeux tipbook? :p 14601 2013-10-31 20:52:35 connormcsheffrey haha 14602 2013-10-31 20:53:12 connormcsheffrey React Tips™ 14603 2013-10-31 21:05:36 chenglou zpao: eh no, we have something more special here 14604 2013-10-31 21:06:29 chenglou zpao: like balpert said, you can link react dev warning messages to tip entries. Cookbooks aren't suitable for that =) 14605 2013-10-31 21:08:50 zpao is "tips" descriptive enough? does that word make sense to non-native english speakers? 14606 2013-10-31 21:09:53 chenglou zpao: Im not sure. It was just a placeholder for comparison with "cookbook" 14607 2013-10-31 21:10:52 vjeux zpao: yeah, tips is often used in video games 14608 2013-10-31 21:12:36 vjeux "tips and tricks" is often use 14609 2013-10-31 21:12:48 vjeux as an expression 14610 2013-10-31 21:34:03 connormcsheffrey vjeux: "Tips & Tricks" would be a good all encompassing categorization. 14611 2013-10-31 21:34:27 vjeux i'm fine with it 14612 2013-11-01 06:53:56 balpert http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ 14613 2013-11-01 12:18:03 sspi isStartish, isMovish, isEndish <- that naming is just bad (EventPluginUtils.js) 14614 2013-11-01 12:18:45 sspi nevermind 14615 2013-11-01 12:18:50 sspi read too fast 14616 2013-11-01 12:21:58 syranide ... it's ... badish? ;) 14617 2013-11-01 12:32:17 sspi syranide: lol 14618 2013-11-01 13:32:36 Guest93438 Is Support React.js .in Mvc4 Asp.net? 14619 2013-11-01 15:12:34 syranide I've further updated and clarified my recommendation for whitespace handling, opinions appreciated, https://github.com/facebook/react/pull/459 14620 2013-11-01 17:36:07 petehunt zpao: is rubygems down right now 14621 2013-11-01 17:36:18 petehunt i cant gem install bundler due to some cert thing 14622 2013-11-01 17:37:41 balpert wfm 14623 2013-11-01 17:38:37 zpao petehunt: not looking like anything official (or unofficial) https://twitter.com/search?q=%40rubygems_status 14624 2013-11-01 17:39:20 petehunt hm yea 14625 2013-11-01 17:39:53 petehunt i think rvm borked my certs 14626 2013-11-01 17:40:01 zpao not unlikely 14627 2013-11-01 17:40:10 balpert eww rvm 14628 2013-11-01 17:40:24 zpao ACTION is going to switch to rbenv at some point 14629 2013-11-01 17:40:34 zpao i use rvm too! 14630 2013-11-01 17:41:11 balpert I in theory use rbenv but in actuality just use system ruby 14631 2013-11-01 17:41:18 balpert because it's a pain to remember 14632 2013-11-01 17:41:19 zpao it's been fine once i set it up 14633 2013-11-01 17:42:21 zpao system ruby was 1.8.5 for so long that i couldn't survive 14634 2013-11-01 17:42:32 petehunt dude i dont know how people are supposed to know how to navigate the ruby worl 14635 2013-11-01 17:42:32 zpao now it's 2.0 so not terrible 14636 2013-11-01 17:42:55 zpao petehunt: in theory you don't really have to worry about this much. 14637 2013-11-01 17:43:13 balpert yeah, I was sad that it was 1.8.7 until 10.9 a couple weeks ago 14638 2013-11-01 17:43:19 petehunt here is my confusion https://www.ruby-lang.org/en/downloads/ 14639 2013-11-01 17:43:28 petehunt that is the worst page ever 14640 2013-11-01 17:43:34 zpao JS has mostly avoided this, but we'll see what happens when ES6+ happens 14641 2013-11-01 17:44:16 balpert petehunt: you're right. that page hasn't been really changed since like 2007 when not everyone's machine came with Ruby 14642 2013-11-01 17:46:25 zpao and if you're on windows... haha good luck 14643 2013-11-01 17:46:40 zpao that's where i started 14644 2013-11-01 17:47:14 zpao and then i TAed a class where we did rails and most of the class used windows... fucking nightmare 14645 2013-11-01 17:47:51 zpao so much time in office hours was just installing things... weeks into the class, the night before phase 1 of the project was due 14646 2013-11-01 17:48:43 balpert aww :( 14647 2013-11-01 18:01:08 chenglou balpert: zpao what does cx even mean lol? 14648 2013-11-01 18:01:16 chenglou I've been wondering since forever 14649 2013-11-01 18:01:16 balpert it means classSet! :D 14650 2013-11-01 18:01:24 balpert I don't know if the x stands for anything 14651 2013-11-01 18:01:24 chenglou the x? 14652 2013-11-01 18:01:31 balpert I assumed it was just a nice short name 14653 2013-11-01 18:02:12 vjeux let me try to dig in the code and see why :p 14654 2013-11-01 18:02:13 zpao class expression maybe? i have no idea since it existed before i started. yungsters might know, but my guess is also that it's short 14655 2013-11-01 18:02:21 chenglou petehunt: vjeux for the todomvc, there's a method stringifyObjKeys that's just classSet, but when I was reviewing the code I didn't know it's now in add-ons 14656 2013-11-01 18:02:37 vjeux chenglou: (y) 14657 2013-11-01 18:02:56 petehunt chenglou: you should have a fork of todomvc with animation :) 14658 2013-11-01 18:03:13 chenglou petehunt: I actually do, in react repo lol 14659 2013-11-01 18:03:39 chenglou petehunt: but I still want to experiment with animations a bit more first, I actually got a few questions coming up, give me a sec 14660 2013-11-01 18:04:12 chenglou midterms over so yeah, suddenly 10 commits from me yesterday lol 14661 2013-11-01 18:04:59 yungsters zpao: chenglou: class transform 14662 2013-11-01 18:05:23 yungsters internally, we have a tx(...) which stands for text transform (and ix for image transform) 14663 2013-11-01 18:05:37 chenglou ah 14664 2013-11-01 18:05:38 petehunt there should be a way for students to get academic credit for open source contributions 14665 2013-11-01 18:06:06 yungsters internally, they are not actually executed — they're transformed by a resource processor :P 14666 2013-11-01 18:06:38 chenglou petehunt: NO ONE around me does open source lmao, or contribution of any kind. It's crazy how shitty the program is but we still get so much work 14667 2013-11-01 18:06:48 yungsters lol 14668 2013-11-01 18:06:53 vjeux so, in the diff where cx() was added, it was made to mimic tx() 14669 2013-11-01 18:07:07 yungsters yup 14670 2013-11-01 18:09:34 vjeux and I suppose that tx() is the successor of t() for translation 14671 2013-11-01 18:09:41 vjeux so here we have the explanation :p 14672 2013-11-01 18:10:07 zpao gather around children as papa vjeux tells the story of short JS function names at Facebook 14673 2013-11-01 18:10:48 chenglou once upon a time in silicon valley 14674 2013-11-01 18:10:58 vjeux http://www.youtube.com/watch?v=xZEmw1VVfbk 14675 2013-11-01 18:11:06 vjeux sadly this is a french only tv show for kids :p 14676 2013-11-01 18:11:58 chenglou vjeux: holy shit I think I know this 14677 2013-11-01 18:12:08 vjeux "Beaver father tell us a story" 14678 2013-11-01 18:12:31 petehunt french children's TV seems way less messed up than american children's TV 14679 2013-11-01 18:13:05 zpao petehunt: this looks like the equivalent of bernstein bears 14680 2013-11-01 18:13:22 zpao americans : bears :: french : beavers 14681 2013-11-01 18:15:07 petehunt i saw this show on tv a few years ago, it was terrifying http://www.youtube.com/watch?v=tJvHrx1X-Gk 14682 2013-11-01 18:15:20 balpert chenglou: I remember one of my friends ran a class (at Waterloo maybe?) where you get credit for doing open-source stuff 14683 2013-11-01 18:15:41 balpert chenglou: at least I think that happened. maybe it was just an idea though 14684 2013-11-01 18:15:41 zpao i think matnel is in class like that now 14685 2013-11-01 18:16:12 zpao i had a class about open source i took. it was a joke, but we could get extra credit for contributing to open source 14686 2013-11-01 18:16:22 vjeux ok looks like teletubbies is not french http://www.youtube.com/watch?v=dJbJKNV2pPg :p 14687 2013-11-01 18:16:33 chenglou eh mcgill is pretty traditional (close-minded?) on this. The only language I've used so far is java lmao 14688 2013-11-01 18:16:40 matnel my class combines a bit more of theory too 14689 2013-11-01 18:16:44 chenglou and one and half class of C 14690 2013-11-01 18:17:05 matnel and management perspectives, so "doing open source" is just part f this 14691 2013-11-01 18:17:19 zpao matnel: ah, gotcha 14692 2013-11-01 18:17:22 petehunt my prediction == upcoming industry crisis due to a workforce that doesn't understand malloc() 14693 2013-11-01 18:17:24 balpert java isn't a _totally_ horrible language 14694 2013-11-01 18:17:35 zpao petehunt: you can't share that video and not share the acid. omg 14695 2013-11-01 18:18:09 vjeux petehunt: great, I actually implemented malloc as a school project :) 14696 2013-11-01 18:18:24 petehunt zpao: isn't that show ridiculous? it seems like some computer like "evolved" that show as a result of a/b test data on children 14697 2013-11-01 18:18:27 matnel just now on the lecture of that course, looking at small world networks :) 14698 2013-11-01 18:18:28 vjeux http://en.wikipedia.org/wiki/Buddy_memory_allocation 14699 2013-11-01 18:18:38 vjeux petehunt: haha :p 14700 2013-11-01 18:19:04 vjeux the most fun part was to run firefox with my own malloc and see it working! 14701 2013-11-01 18:19:16 zpao wooo firefox :P 14702 2013-11-01 18:19:37 vjeux chrome uses its own malloc :( 14703 2013-11-01 18:19:56 zpao i did not do real CS, but i had half a semester of C so i'm basically a wizard. 14704 2013-11-01 18:20:01 vjeux and you could see the different between a dumb linked list allocator, it would be horribly slow 14705 2013-11-01 18:20:08 vjeux and a binary buddy which was usable 14706 2013-11-01 18:20:37 matnel hah. "the old" guys remembering the "good old days" it seems ;) 14707 2013-11-01 18:21:01 chenglou mantel: ok tbh two weeks ago I was checking episodes of spongebob 14708 2013-11-01 18:21:10 chenglou mantel: dont judge lol, it shaped my childhood 14709 2013-11-01 18:21:30 zpao i ... i put on spongebob when i'm really bored 14710 2013-11-01 18:21:30 petehunt matnel: "old guys" by SV standards maybe :P 14711 2013-11-01 18:21:54 zpao ACTION feels like i should be writing that to postsecret 14712 2013-11-01 18:22:53 matnel petehunt: well, I'm too old also, no worries. but seriously, I don't believe in a big cricis when malloc() isn't understood by all developers :) 14713 2013-11-01 18:23:20 vjeux it is already the case, i'm pretty sure no one knows how malloc works 14714 2013-11-01 18:23:39 vjeux the current implementations using arenas and such are pretty complicated 14715 2013-11-01 18:24:07 petehunt vjeux: i mean people not knowing how to use non-GC'd languages 14716 2013-11-01 18:24:34 zpao it's ok guys. this is #reactjs... we don't need to understand 14717 2013-11-01 18:25:00 petehunt zpao: except that i'm still pushing my agenda that react needs its own memory allocator 14718 2013-11-01 18:25:07 chenglou zpao: balpert so about "two-way-binding", check out my comment. What do you thnk? 14719 2013-11-01 18:25:22 vjeux petehunt: compile jemalloc via emscriptem?: p 14720 2013-11-01 18:25:28 petehunt react.asmjs 14721 2013-11-01 18:25:33 chenglou really afraid to name the title two-way binding 14722 2013-11-01 18:25:53 matnel petehunt: even for that, tools develop you know :) and luckily computing has become so wide, that it's used also in places where memory management is not the main priority 14723 2013-11-01 18:26:33 matnel but, it seems that I need to take a course of C :( required for PhD... 14724 2013-11-01 18:27:29 matnel btw: https://github.com/facebook/react/issues/388 was the idea still for this to add a link to react tips/cookbook/whatever it's now 14725 2013-11-01 18:28:26 chenglou mantel: nice, I'll add that to cookbook 14726 2013-11-01 18:28:42 zpao matnel: hmm, i think that one might just benefit from making that message more explicit 14727 2013-11-01 18:31:05 matnel that has the benefit of being offline, but there were some errors where having a more concrete example could be cool 14728 2013-11-01 18:31:37 zpao matnel: sure. maybe we should do both? 14729 2013-11-01 18:32:37 chenglou zpao: balpert https://github.com/facebook/react/pull/463/files#r7376943 and https://github.com/facebook/react/pull/463/files#r7376610 14730 2013-11-01 18:33:06 zpao my concern right now with linking to tips in error messages is that we change a url somewhere and somebody uses an old version of react. we need to make sure we do redirects and handle non-relevant error messages correctly (and not the way msdn just says "this content has moved") 14731 2013-11-01 18:33:50 balpert chenglou: I still like "Two-Way Binding" 14732 2013-11-01 18:33:54 matnel classsical solution :) don't know; haven't seen the errors having urls that often for error messages but then in the end that's what you end up doing after Google 14733 2013-11-01 18:34:17 zpao matnel: truth! i've googled so many error messages 14734 2013-11-01 18:34:33 matnel zpao: true, linking was a good point 14735 2013-11-01 18:35:14 chenglou balpert: it's misleading though 14736 2013-11-01 18:35:17 matnel zpao: yeap. that's what was tought to me in CS101: if error, copy and google 14737 2013-11-01 18:37:46 matnel btw. the thing that pops out from google is that error :D 14738 2013-11-01 18:38:12 matnel oh, I mean the bug in github :) 14739 2013-11-01 18:38:24 chenglou balpert: how about "reverse binding", "input linking", "super glue dom-input", etc. 14740 2013-11-01 18:38:33 balpert chenglou: I don't see what's misleading about that 14741 2013-11-01 18:39:26 petehunt "Two-Way Binding Sugar" ? "Simulated Two-Way Binding" ? 14742 2013-11-01 18:39:33 matnel zpao: if we fix the error message, create a bug report in stackoverflow, answer to that and then link that answer into the error message? 14743 2013-11-01 18:39:34 chenglou it's one of those concepts that just attract eyes, and people who dont know react won't get why this isn't a standard feature rather than just an add-on 14744 2013-11-01 18:39:51 balpert well we should explain that better anyway 14745 2013-11-01 18:39:54 chenglou balpert: especially when all the others are doing it and they dont get react works differently fundamentally 14746 2013-11-01 18:40:22 chenglou balpert: zpao I like petehunt's idea, "two-way binding sugar" 14747 2013-11-01 18:40:24 chenglou how's that? 14748 2013-11-01 18:41:23 zpao not the biggest fan of "sugar" but i guess it's better than what was there 14749 2013-11-01 18:41:47 balpert likewise 14750 2013-11-01 18:41:49 zpao matnel: yea, that and/or just keep the old pages around for some period of time 14751 2013-11-01 18:42:14 balpert chenglou: I think we need a good explanation on that page regardless 14752 2013-11-01 18:42:35 balpert chenglou: I actually think it's good if people see it as a feature-like thing which they will if they see it in the navigation 14753 2013-11-01 18:42:58 petehunt a big ass warning for ReactLink is pretty important 14754 2013-11-01 18:43:07 petehunt something along the lines of: "if you're a noob, don't use this" 14755 2013-11-01 18:43:33 chenglou lol 14756 2013-11-01 18:43:45 chenglou will do 14757 2013-11-01 18:45:03 chenglou ok I'll settle on two-way binding sugar then for now 14758 2013-11-01 18:45:26 chenglou zpao: balpert what about https://github.com/facebook/react/pull/463/files#r7376943 14759 2013-11-01 18:46:06 petehunt chenglou: balpert: zpao: "Two-Way Binding Helper"? 14760 2013-11-01 18:46:27 chenglou should it be Two-way or Two-Way. the add-on title is Add-on 14761 2013-11-01 18:46:44 balpert both should be capitalized I think 14762 2013-11-01 18:46:49 chenglou kk 14763 2013-11-01 18:47:00 petehunt helpers* 14764 2013-11-01 18:47:18 chenglou I like sugar more 14765 2013-11-01 18:47:41 petehunt i am wondering if sugar is going to confuse non-native english speaker 14766 2013-11-01 18:47:43 petehunt s 14767 2013-11-01 18:47:52 petehunt we have a ton of traffic from china for instance 14768 2013-11-01 18:47:58 chenglou oh really? 14769 2013-11-01 18:48:03 petehunt yeah #2 country iirc 14770 2013-11-01 18:48:14 petehunt lemme check 14771 2013-11-01 18:49:40 matnel sugar sounds like something apple would call it :) 14772 2013-11-01 18:50:39 chenglou mantel: nothin' wrong with that 14773 2013-11-01 18:50:50 zpao matnel: apple would say "magic" 14774 2013-11-01 18:51:22 matnel Magic iSugar Linki (TM) ? 14775 2013-11-01 18:51:32 petehunt hrm i was wrong 14776 2013-11-01 18:52:20 petehunt ru is #3 locale after en-us and en-gb at 2.6% of visits 14777 2013-11-01 18:52:28 chenglou mantel: Same amount of sugar. Twice the taste. 14778 2013-11-01 18:52:35 matnel but, I would also go with something that's more safe to non-natives, just for play it a bit more safe 14779 2013-11-01 18:52:57 chenglou ok, Helpers it is then! 14780 2013-11-01 18:54:57 matnel sorry, extra-lame :) 14781 2013-11-01 18:55:11 petehunt "Delicious Two-Way Binding Helpers" 14782 2013-11-01 18:56:34 balpert yum 14783 2013-11-01 18:56:41 matnel btw, is IRC part of the CS curriculum in the US? 14784 2013-11-01 18:57:37 balpert most CS curricula don't really teach specific tools 14785 2013-11-01 18:59:01 matnel I'm having problems with the other I-School students (well, they are not CS): they don't irc. how could you socialize without irc :o 14786 2013-11-01 18:59:23 petehunt matnel: facebook is of course the obvious answer! 14787 2013-11-01 18:59:46 matnel petehunt: jep, but that's so.... multimedia! (includig cat pictures) 14788 2013-11-01 18:59:51 chenglou Facebook group saves my freaking ass for team projects 14789 2013-11-01 19:00:21 chenglou no need to befriend people I dont like either, neat lol 14790 2013-11-01 19:01:03 matnel came to my mind, as one exercise in this class was actually get to irc 14791 2013-11-01 19:01:26 matnel in Finland it's part of the "introduction to computing systems" or something like that 14792 2013-11-01 19:14:58 syranide I've updated and clarified my whitespace patch, any and all feedback welcome https://github.com/facebook/react/pull/459 14793 2013-11-01 19:18:49 chenglou petehunt: not sure how to put "if you're a noob don't use ReactLink" in friendlier terms lol 14794 2013-11-01 19:19:35 balpert if you're new to React, note that ReactLink is not needed for most applications and ... 14795 2013-11-01 19:20:22 chenglou balpert: thx 14796 2013-11-01 19:21:31 petehunt i think it should be even scarier 14797 2013-11-01 19:21:32 andreypopp petehunt: ru is #3? cool :-) 14798 2013-11-01 19:21:47 petehunt

You probably don't need ReactLink

14799 2013-11-01 19:22:21 andreypopp Did you guys think of Chome Dev Tools extension for React? For example component tree browser? 14800 2013-11-01 19:22:28 matnel "Warning: using ReactLink can mess everything, use countiounsly." 14801 2013-11-01 19:22:44 syranide countlounsly? :D 14802 2013-11-01 19:22:48 chenglou petehunt: while we're at it, remove the documentation for it so that only people with enough interest/skills use it lol 14803 2013-11-01 19:23:50 matnel syranide: I'm not a native english speaker :) is it cautiously that I'm looking... 14804 2013-11-01 19:24:05 syranide matnel: me neither, it just looked really funny ;) 14805 2013-11-01 19:25:03 petehunt andreypopp: yes that is being worked on 14806 2013-11-01 19:25:20 petehunt sebmarkbage is working on it 14807 2013-11-01 19:25:38 andreypopp petehunt: cool, I was sure you though about it 14808 2013-11-01 19:25:43 andreypopp thought* 14809 2013-11-01 20:10:02 baranaby hey all, any reason that setState might fail to update the state? My callback is bound to a sorting event from some data and then setting the state - I have some console.log calls that show the data has been sorted, then after the setState call I look at the state and the order doesn't match... sad panda :( 14810 2013-11-01 20:15:51 hojberg is it a correct assumption that ReactLink won't work with checkboxes? 14811 2013-11-01 20:15:54 hojberg since it just looks at value 14812 2013-11-01 20:17:47 zpao baranaby: are you modifying state directly? 14813 2013-11-01 20:18:39 zpao hojberg: we use react link (or essentially that) in ReactDOMInput already, so i think it can work 14814 2013-11-01 20:21:35 hojberg zpao: it doesn't look at the checked attribute afaik? 14815 2013-11-01 20:29:00 zpao hojberg: i haven't actually used it... what if you passed 'checked' to the linkState method? 14816 2013-11-01 20:30:42 balpert hojberg: I think it should work, still called valueLink 14817 2013-11-01 20:30:52 balpert not 100% sure on that though 14818 2013-11-01 20:30:53 baranaby zpao: no, calling `this.setState` 14819 2013-11-01 20:31:42 zpao baranaby: can you reduce to a small test case? 14820 2013-11-01 20:32:08 zpao baranaby: also, when you say that your callback is bound to a sorting event... what callback? 14821 2013-11-01 20:32:19 petehunt hojberg: if valueLink doesn't work it's a bug 14822 2013-11-01 20:32:53 hojberg petehunt: to clarify it does not work with checked='checked' seems to just work with value (which makes sense i guess) 14823 2013-11-01 20:32:56 baranaby zpao: not a React event, a YUI Model event that is bound in my component 14824 2013-11-01 20:33:09 petehunt hojberg: i think we normalized it to value 14825 2013-11-01 20:33:15 hojberg right 14826 2013-11-01 20:33:23 hojberg so setting a value on a checkbox wont make it checked 14827 2013-11-01 20:34:40 hojberg sorry dropped out for a second 14828 2013-11-01 20:34:59 hojberg i mean it's fine, i can do it manually for checkboxes and radios 14829 2013-11-01 20:37:39 balpert yeah, from reading the code it looks like checked won't be set properly 14830 2013-11-01 20:37:54 balpert hojberg: can you file a bug with an example jsfiddle? 14831 2013-11-01 20:42:48 zpao Yea, it's only value... 14832 2013-11-01 20:43:37 hojberg will do 14833 2013-11-01 20:46:48 zpao hojberg: http://jsfiddle.net/f6axu/ 14834 2013-11-01 20:51:47 chenglou zpao: The reason the `react-with-addons.js` build exists is because of the lack of an agreed-upon packaging format for the front-end. Technically these functionalities should live in, for example, npm or bower. 14835 2013-11-01 20:51:56 chenglou Im adding this line to add-ons page 14836 2013-11-01 20:52:03 chenglou is that ok and what else? 14837 2013-11-01 20:52:16 chenglou (also enumerating the three add-ons) 14838 2013-11-01 20:53:29 baranaby zpao: here's the 3 methods in question: https://gist.github.com/barnabyc/4603e5f8732d76460be8 so when _afterChange is called, I see the log messages, but the order is only as expected in the first msg, not the second, this makes me think that setState didn't actually change the state? :/ 14839 2013-11-01 20:54:11 hojberg zpao: thanks :D 14840 2013-11-01 20:54:38 zpao chenglou: i dunno, that's somewhat of an oversimplification with too much detail if that makes any sense. 14841 2013-11-01 20:55:18 chenglou zpao: humm ok 14842 2013-11-01 20:55:43 chenglou zpao: any idea then? 14843 2013-11-01 20:55:51 baranaby zpao: log msg examples added as comment on that gist 14844 2013-11-01 20:56:56 zpao chenglou: I would say something about the long term plan being to release each part individually without mentioning a target source 14845 2013-11-01 20:57:46 zpao it's not totally a lack of agreed upon format. it also has to do with internal APIs being unstable and we don't have any story around exposing them in a sane way yet 14846 2013-11-01 20:57:57 chenglou isn't that "will eventually be rolled into core or a blessed utilities library" 14847 2013-11-01 20:58:07 zpao not necessarily 14848 2013-11-01 20:58:44 chenglou zpao: what do you mean by releasing each part individually then 14849 2013-11-01 20:59:01 zpao oh, i guess that's what that page says already... 14850 2013-11-01 20:59:11 zpao ACTION apparently hasn't read everything 14851 2013-11-01 20:59:26 chenglou zpao: btw I dont see the problem of keeping it short lol 14852 2013-11-01 20:59:39 chenglou the link to specific add-ons are already on the left side 14853 2013-11-01 20:59:58 chenglou and im adding the small list already to the page 14854 2013-11-01 21:02:31 chenglou actually I'll keep the add-ons page as it is, I'll push the other updates out for now 14855 2013-11-01 21:03:49 zpao small list is good. i just personally would want to read a little bit more about what's actually going to be presented before i go read about them (and i don't think a sidenav is explicit enough). it's like having a table of contents on a paper and skipping an introduction because why would they need that when theres a TOC 14856 2013-11-01 21:04:20 chenglou right 14857 2013-11-01 21:09:18 zpao baranaby: there's some asynchronicity to setState, if you move that console.log to render... does it say the same thing? 14858 2013-11-01 21:19:41 syranide lbljeffmo: shameless bump for https://github.com/facebook/react/pull/459 14859 2013-11-01 21:21:19 lbljeffmo syranide: sorry for the delay, I lost track. I'll look into it now...but I do think we need a story around how we'll refactor existing stuff to equivalent compatibility 14860 2013-11-01 21:21:39 syranide lbljeffmo: no rush, just wanted to make sure that it doesn't get lost :) 14861 2013-11-01 22:16:43 sspi https://moot.it/blog/technology/riotjs-the-1kb-mvp-framework.html <- I just can't stop laughing, must be a joke 14862 2013-11-01 22:19:45 syranide sspi: haha, apparently underscore is faster though ^^ 14863 2013-11-01 22:21:08 sspi syranide: yeah, I read the response from jashkenas :) 14864 2013-11-01 22:22:36 syranide https://github.com/moot/riotjs/blob/master/riot.js interesting ... ^^ 14865 2013-11-01 22:23:34 syranide so... riot is basically 4 helper functions or something? 14866 2013-11-01 22:25:27 sspi lol, didn't even look there - just looked at the explanation 14867 2013-11-01 22:25:54 syranide from what I can gather, riotjs is the idea that you don't need a framework, if you write everything yourself 14868 2013-11-01 22:32:07 lbljeffmo syranide: I just commented but -- would you mind rebasing a bit? I put in a diff the other day to bring our internal version of xjs.js in sync with the github version (it was just style stuff) 14869 2013-11-01 22:32:31 syranide lbljeffmo: I'm new github, but will do :) 14870 2013-11-01 22:32:36 syranide *new to 14871 2013-11-01 22:32:54 lbljeffmo thanks! 14872 2013-11-03 18:44:22 vjeux ok, irc logs are back p 14873 2013-11-03 18:44:23 vjeux up 14874 2013-11-03 18:46:14 balpert no one will ever know what petehunt and I talked about last night! 14875 2013-11-03 18:47:40 matnel other than NSA ;) 14876 2013-11-03 18:51:14 vjeux ok, time to write that community roundup 14877 2013-11-03 19:33:34 sspi I agree - the docblock needs to go (and vjeux needs to repair his log as I now can't spy on the channel anymore :() 14878 2013-11-03 19:34:14 sspi but I believe there was already work being done in that area 14879 2013-11-03 19:41:21 balpert sspi: the log is fixed 14880 2013-11-03 19:42:39 sspi balpert: great! 14881 2013-11-03 19:45:32 syranide petehunt: you there? 14882 2013-11-03 20:03:51 chenglou jesus, living without internet for 2 days is hard 14883 2013-11-03 20:04:00 chenglou what is this riot.js thing 14884 2013-11-03 20:04:11 balpert lol 14885 2013-11-03 20:04:22 balpert https://twitter.com/jashkenas/status/396274916695478272 14886 2013-11-03 20:04:31 sspi chenglou: basically we're screwed, riot.js is the best thing ever... 14887 2013-11-03 20:05:15 chenglou balpert: lolol 14888 2013-11-03 20:24:10 brainkim https://github.com/moot/riotjs/blob/master/riot.js 14889 2013-11-03 20:25:25 brainkim Feel like riot.js is conceptual art or satire, but I can't tell anymore. 14890 2013-11-03 20:25:57 sspi def 14891 2013-11-03 20:26:05 sspi definitely a joke 14892 2013-11-03 20:27:16 chenglou sspi: wait, is it? 14893 2013-11-03 20:27:28 chenglou because it'd actually be a legit component for component.io 14894 2013-11-03 20:29:24 petehunt syranide: heyo 14895 2013-11-03 20:29:57 sspi chenglou: "No "Backbone way", "Angular way" or "Ember way". Frameworks come and go but classic programming skills are forever." 14896 2013-11-03 20:30:04 sspi and then... 14897 2013-11-03 20:30:13 sspi "Riot is a manifesto for vanilla JavaScript and jQuery." 14898 2013-11-03 20:33:28 petehunt i was sure that riot was just a really elaborate troll 14899 2013-11-03 20:34:22 sspi petehunt: was also my impression 14900 2013-11-03 20:36:19 balpert that was not my impression, but I might just be gullible 14901 2013-11-03 20:37:06 brainkim riot must be satire. The templating part doesn't even defend against XSS. 14902 2013-11-03 20:39:42 sspi the article was a good laugh for me - creating a model using this.something = function <- pr 14903 2013-11-03 20:39:48 sspi priceless 14904 2013-11-03 20:40:22 petehunt reading some PRs…may not be a troll 14905 2013-11-03 20:47:31 syranide petehunt: ah goodie, now I'm here too, anyway, been tinkering a bit with input fields, and I love how easy it is to filter them, however the input field behaves very poorly then, I have a proof of concept of a simple fix here http://dev.cetrez.com/jsx/examples/ballmer-peak/ compare entering numbers/space/text in the first (in the middle of the fiel 14906 2013-11-03 20:47:31 syranide d) without the fix, and the second with the fix 14907 2013-11-03 20:47:51 syranide could it be of interests for the "core"? 14908 2013-11-03 20:48:20 syranide (the caret always jumps to the end when you filter the input via javascript) 14909 2013-11-03 20:49:03 petehunt syranide: yeah, that's awesome! 14910 2013-11-03 20:49:27 syranide I'm also playing with that experimental there to allow "full control" over selection in an intuitive way 14911 2013-11-03 20:50:04 petehunt syranide: this would be something we def want i think (if we can get it working cross browser) 14912 2013-11-03 20:50:12 syranide it works cross-browser, and IE8 14913 2013-11-03 20:50:18 petehunt woo 14914 2013-11-03 20:50:28 petehunt syranide: gimme that sweet, sweet pull request :) 14915 2013-11-03 20:50:40 petehunt this always bugged me 14916 2013-11-03 20:50:55 syranide petehunt: the second input field works perfectly, as long as one doesn't modify the text after the cursor (which works for most basic uses) 14917 2013-11-03 20:52:53 syranide petehunt: will do, however this is very much just a proof of concept implementation, not sure how to implement it properly in the core yet... and more importantly... this physically restores the caret when filtering, but it would also conflict with any such code that the user might have for doing more advanced stuff... any ideas? 14918 2013-11-03 20:53:08 syranide *user = developer 14919 2013-11-03 20:53:21 syranide a property for toggling it on/off? 14920 2013-11-03 20:53:32 petehunt syranide: i would need to see the code. we would also want to run this by yungsters 14921 2013-11-03 20:54:00 syranide I'll clean up and "distill" the code and then run it past you guys again 14922 2013-11-03 20:54:10 petehunt syranide: if you move the caret in componentDidUpdate() i think it will work, right? 14923 2013-11-03 20:55:20 syranide I currently do it with a callback for setState, but what I mean is, this can conflict if the developer has implemented more advanced input fields (this only solves the case of modifying things before the caret, not behind it, so autocomplete would not work) 14924 2013-11-03 20:57:48 sspi petehunt: use of keyOf was due to closure compiler right? 14925 2013-11-03 20:57:49 syranide petehunt: oh wait I see your point, yeah that would work 14926 2013-11-03 20:57:57 syranide with componentDidUpdate 14927 2013-11-03 20:58:10 petehunt syranide: yeah, i think we can make this work. 14928 2013-11-03 20:58:13 petehunt sspi: yes 14929 2013-11-03 20:58:25 petehunt sspi: i haven't actually looked at your approach yet btw 14930 2013-11-03 20:58:32 petehunt sspi: seems okay though :) 14931 2013-11-03 20:59:19 syranide petehunt: you think the "full feature" version would be of interest for "core" or is it perhaps better suited as a separate addon? 14932 2013-11-03 20:59:59 petehunt syranide: i would want to talk to zpao and yungsters, but this strikes me as strictly better than the current behavior, so if it works in all browsers and doesn't add a ton of bytes i think we should take it for core 14933 2013-11-03 21:01:31 syranide petehunt: the "simple version" in the second field is super simple, the biggest part of that is basically the IE8 code for getting/setting selection... the full feature one is yet to be determined, but won't be very large either, but I'll keep working on it and throw it at you again ;) 14934 2013-11-03 21:01:44 petehunt syranide: how about you decouple them 14935 2013-11-03 21:01:48 petehunt simple version first 14936 2013-11-03 21:01:51 petehunt then full featured one 14937 2013-11-03 21:02:00 petehunt also helps us with code review and dogfooding 14938 2013-11-03 21:02:06 syranide yeah definitely 14939 2013-11-03 21:02:26 sspi syranide: make it a PR! 14940 2013-11-03 21:02:44 syranide sspi: yep, it's just cobbled together crap right now, but I'll get on it ;) 14941 2013-11-03 21:46:23 syranide still a bit new to this, but if I understand this all correctly... parents sends values/properties to children, and children calls functions on parents right? 14942 2013-11-03 21:46:39 syranide or can parents call functions on children? 14943 2013-11-03 21:47:00 chenglou syranide: yeah 14944 2013-11-03 21:47:29 syranide chenglou: as in parents "can't" call functions on children yeah? 14945 2013-11-03 21:47:38 chenglou can 14946 2013-11-03 21:47:45 syranide aha 14947 2013-11-03 21:47:51 syranide how do you get a child then? 14948 2013-11-03 21:48:44 chenglou syranide: ref 14949 2013-11-03 21:48:51 chenglou this.refs.refString 14950 2013-11-03 21:48:56 syranide oh >_< 14951 2013-11-03 21:48:58 chenglou or 14952 2013-11-03 21:49:03 chenglou this.props.children.etc 14953 2013-11-03 21:49:04 syranide I just equated refs to domnodes, but ofc they aren't 14954 2013-11-03 21:49:10 syranide chenglou: thank you :) 14955 2013-11-03 21:49:16 chenglou np 14956 2013-11-03 21:51:11 balpert syranide: better selection behavior would be awesome. I spent a while fighting IE8 and eventually gave up. 14957 2013-11-03 22:26:58 syranide balpert: ^^ 14958 2013-11-04 00:32:28 petehunt syranide: calling functions on children may be an antipattern 14959 2013-11-04 01:14:30 steadicat how would you guys implement a pinterest-like layout in react? i.e. where successive elements need to know something about the size/placement of the previous siblings to render themselves? 14960 2013-11-04 01:14:54 steadicat petehunt: ^^ 14961 2013-11-04 01:15:13 petehunt steadicat: heyo! 14962 2013-11-04 01:15:19 steadicat heyo! :) 14963 2013-11-04 01:15:26 petehunt glad to see you arent a stranger 14964 2013-11-04 01:15:45 steadicat yeah finally got back to work, and it didn't take me long to start rewriting stuff in react :) 14965 2013-11-04 01:15:51 petehunt ? 14966 2013-11-04 01:15:57 steadicat I miss #react :) 14967 2013-11-04 01:16:14 petehunt you've got some of the same people in #reactjs (under different aliases) 14968 2013-11-04 01:17:01 petehunt anyway here's how i would do it 14969 2013-11-04 01:17:13 petehunt 2 compoennts: and 14970 2013-11-04 01:18:01 petehunt renders itself invisibly (offscreen w/ pos absolute or visibility: hidden) and measures itself in componentDidMount() 14971 2013-11-04 01:18:17 petehunt passes a onMeasure callback prop to which it calls when it's been measured 14972 2013-11-04 01:18:29 steadicat yup that's as far as I got 14973 2013-11-04 01:18:36 petehunt when has all the measurements, it passes left/top props to 14974 2013-11-04 01:18:38 steadicat but how do you map the onMeasure calls to the components on second render? 14975 2013-11-04 01:18:49 petehunt steadicat: it's part of 's state 14976 2013-11-04 01:19:19 steadicat I guess you can tie them together using the Block's IDs or something like that 14977 2013-11-04 01:19:21 steadicat that works 14978 2013-11-04 01:19:22 steadicat thanks! 14979 2013-11-04 01:19:27 petehunt so your s need some sort of identifier, and in 's state you have blockID->(width, height) 14980 2013-11-04 01:19:34 steadicat sweet 14981 2013-11-04 01:19:48 petehunt steadicat: i don't know what you're up to, but we certainly appreciate people open-sourcing react stuff :) 14982 2013-11-04 01:19:57 steadicat whatever happened to react-animation btw? 14983 2013-11-04 01:20:22 petehunt steadicat: so there's ReactTransitionGroup which is very simple CSS animations (i.e. enter and leave) 14984 2013-11-04 01:20:36 petehunt steadicat: http://facebook.github.io/react/docs/addons.html 14985 2013-11-04 01:20:41 steadicat yeah I saw that 14986 2013-11-04 01:20:52 petehunt steadicat: there was the hardcore react-animations stuff (live tweening etc) 14987 2013-11-04 01:20:55 petehunt do you have an iphone 5? 14988 2013-11-04 01:21:04 steadicat 5s 14989 2013-11-04 01:21:27 petehunt steadicat: OK, load this in safari on your phone http://www.petehunt.net/react-photos-beta/ 14990 2013-11-04 01:21:43 steadicat simple doesn't cut it for what I'm doing, I was looking for react-animations for doing complex requestAnimationFrame stuff 14991 2013-11-04 01:22:01 petehunt that's basically what react-animations became; i got rid of the tweening stuff and replaced it with zynga scroller. you can view-source to take a look (there's not much there, zynga scroller does all the physics and touch heavy lifting) 14992 2013-11-04 01:22:16 chenglou omg coverflow lol 14993 2013-11-04 01:22:55 petehunt steadicat: BTW: that demo is windowing (i.e. there are only ever 3 images painted at any time) 14994 2013-11-04 01:23:14 steadicat perfect! this is exactly the kind of thing I need to build 14995 2013-11-04 01:24:23 petehunt steadicat: sweet! zynga scroller is pretty rad, jordan and i only found 1 bug in it (paging mode is messed up when it comes to taps). and if you use shouldComponentUpdate() and structure your components correctly you should get good enough perf on modern touch devices (well, as good as the browser can get) 14996 2013-11-04 01:25:29 steadicat petehunt: so you're using stock react for this? 14997 2013-11-04 01:25:35 petehunt steadicat: yeah 14998 2013-11-04 01:25:37 chenglou petehunt: Xcode has the iOS simulator so you could check on that if you dont have your phone 14999 2013-11-04 01:25:46 steadicat cool 15000 2013-11-04 01:25:56 petehunt steadicat: the only reason i hosted the files was so i could use an app manifest and cache it on my phone for conferences 15001 2013-11-04 01:26:54 steadicat so all you're doing is a setState per frame and rerendering everything? 15002 2013-11-04 01:27:07 petehunt steadicat: the only thing you would use a nonstandard react for would be if you have multiple setState()s in a single requestAnimationFrame. then you'd probably want the RequestAnimationFrameBatchingStrategy (which we haven't committed yet but is easy to write yourself) 15003 2013-11-04 01:27:19 petehunt steadicat: yeah 15004 2013-11-04 01:27:53 petehunt steadicat: shouldComponentUpdate() and the component structure were tweaked slightly for performance 15005 2013-11-04 01:28:29 steadicat makes sense 15006 2013-11-04 01:29:06 petehunt steadicat: i don't have it in this demo, and jordan may disagree with me on this. but if you're building a big app you may want to have a global "animation lock" which would just be a boolean that says whether the user is touching the screen or not 15007 2013-11-04 01:29:32 petehunt when the user is doing stuff you'd set shouldComponentUpdate to false for your "content container" components so that only the animating components would be reconciled 15008 2013-11-04 01:29:51 steadicat yep 15009 2013-11-04 01:30:05 steadicat it's all common sense stuff... minimize the stuff that rerenders per frame, etc. 15010 2013-11-04 01:30:12 petehunt but i wouldn't worry about this until you actually have a reason to worry about it. the important takeaway is that you likely won't need to do substantial refactorings :) 15011 2013-11-04 01:30:28 steadicat I was just checking whether I'm missing any special features or forks of react 15012 2013-11-04 01:31:04 petehunt yeah exactly. the cost for react to reconcile is basically number of props rendered into the DOM in components that have shouldComponentUpdate() == true 15013 2013-11-04 01:31:51 petehunt steadicat: nope, just that batching strategy i mentioned earlier. one other custom thing you may be interested in is TapEventPlugin -- that doesn't ship standard (that gives you an onTouchTap event) 15014 2013-11-04 01:32:03 petehunt it's in the repo though, you just have to require() and inject it yourself 15015 2013-11-04 01:32:15 steadicat k... I'm desktop web for now 15016 2013-11-04 01:32:28 steadicat the reconcile stuff would be nice but I think I can structure my code so I only have one setState per frame 15017 2013-11-04 01:32:44 petehunt nice 15018 2013-11-04 02:39:02 vjeux petehunt: AngularJS-perf/TodoMVC : 5000.999999996566 ms 15019 2013-11-04 02:39:06 vjeux AngularJS/TodoMVC : 4782.000000001062 ms 15020 2013-11-04 02:39:14 vjeux there's something messed up 15021 2013-11-04 02:46:05 petehunt vjeux: ya they dont know how to optimize? :P 15022 2013-11-04 02:46:09 vjeux haha :p 15023 2013-11-04 02:47:57 vjeux petehunt: is it official that webkit is using those benchmarks? 15024 2013-11-04 02:48:01 petehunt vjeux: yea 15025 2013-11-04 02:48:06 vjeux do you have a link? 15026 2013-11-04 02:48:10 petehunt i took it from the webkit repo 15027 2013-11-04 02:48:16 vjeux oh ok 15028 2013-11-04 02:48:17 vjeux great 15029 2013-11-04 02:48:57 petehunt vjeux: https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench 15030 2013-11-04 02:49:13 petehunt vjeux: caveat: uses old version of react AND old version of our todomvc 15031 2013-11-04 02:49:18 petehunt which is *dog slow* 15032 2013-11-04 06:06:34 vjeux http://fooo.fr:4000/react/blog/2013/11/03/community-roundup-10.html 15033 2013-11-04 06:07:16 balpert React has gotten quite far 15034 2013-11-04 06:07:24 balpert developed 15035 2013-11-04 06:07:40 balpert JavaScript, CoffeeScript 15036 2013-11-04 06:08:10 balpert Stoyan Stefanov's series 15037 2013-11-04 06:08:14 vjeux <3 15038 2013-11-04 06:08:44 vjeux hmmm, JavaScript looks bad :( 15039 2013-11-04 06:08:48 petehunt vjeux: PS: We didn't know about their framework before that article ;) 15040 2013-11-04 06:08:48 balpert really? 15041 2013-11-04 06:09:09 petehunt vjeux: not really needed but great blog otherwise 15042 2013-11-04 06:09:09 vjeux ok, JavaScript is written like this everywhere :p 15043 2013-11-04 06:09:29 vjeux petehunt: ok, i'm going to remove my attempt to be funny :p 15044 2013-11-04 06:10:53 balpert I'd say something like "Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic." 15045 2013-11-04 06:12:50 vjeux I wish that we had some sort of way to collaborate on articles 15046 2013-11-04 06:12:59 balpert google docs? 15047 2013-11-04 06:13:06 balpert https://editorially.com/? 15048 2013-11-04 06:13:08 vjeux instead of me copy and pasting what you are saying on irc :p 15049 2013-11-04 06:13:13 balpert git? ;) 15050 2013-11-04 06:13:55 vjeux ok, updated 15051 2013-11-04 06:15:27 sspi morning 15052 2013-11-04 06:15:35 balpert sspi: good evening! 15053 2013-11-04 06:15:40 vjeux hey sspi 15054 2013-11-04 06:18:32 vjeux petehunt: are you going to finish your article soon? 15055 2013-11-04 06:18:38 petehunt vjeux: tonight in fact 15056 2013-11-04 06:18:41 vjeux yay 15057 2013-11-04 06:19:00 vjeux i need to finish mine on the diff algorithm this week too 15058 2013-11-04 06:20:01 vjeux https://github.com/whatwg/streams/tree/master#requirements 15059 2013-11-04 06:20:14 vjeux this is crazy that in 2013 we have to re-invent an api for streams 15060 2013-11-04 06:20:17 balpert vjeux: Officially not Officialy 15061 2013-11-04 06:20:38 balpert sorry for missing that the first time 15062 2013-11-04 06:20:59 vjeux i need to get auto-correct on my text editor :p 15063 2013-11-04 06:21:30 vjeux haha, chrome wants me to correct "behaviour" :p 15064 2013-11-04 06:22:26 vjeux updated 15065 2013-11-04 06:30:55 vjeux anyway, off to sleep 15066 2013-11-04 06:30:56 vjeux cya tomororw 15067 2013-11-04 07:03:40 balpert petehunt: I wonder if we should add something like "Simple: React implements the view layer and doesn't try to be more. Instead of taking over your entire app, React is easy to integrate with your existing code." 15068 2013-11-04 07:03:49 balpert I guess the current "Flexible" is sort of that 15069 2013-11-04 07:04:08 petehunt i would be willing to do something like that 15070 2013-11-04 07:04:20 petehunt "Just the UI" ? 15071 2013-11-04 07:05:24 balpert just your UI? 15072 2013-11-04 07:05:25 balpert ACTION shrugs 15073 2013-11-04 08:09:40 andreypopp balpert: what about "provides minimal and orthogonal API" 15074 2013-11-04 10:00:10 andreypopp do you guys have a jstransform to deal with cx? I mean extracting class names and compressing them? 15075 2013-11-04 17:08:40 vjeux_ andreypopp: when you come back, yes cx() minifies the class names :) 15076 2013-11-04 17:08:49 vjeux_ at fb 15077 2013-11-04 17:14:30 RobertZ Hi, what do you think to use simle function as a shortcut to create a component: 15078 2013-11-04 17:15:11 RobertZ -ProductName = React.createClass 15079 2013-11-04 17:15:12 RobertZ - propTypes: 15080 2013-11-04 17:15:12 RobertZ - code: React.PropTypes.string 15081 2013-11-04 17:15:12 RobertZ - 15082 2013-11-04 17:15:12 RobertZ - render: -> 15083 2013-11-04 17:15:12 RobertZ - name = getProductName app.state.helper.productsId[@props.code] 15084 2013-11-04 17:15:15 RobertZ - DOM.h2 {className: "product-text text-3"}, name 15085 2013-11-04 17:15:17 RobertZ +productName = (productId) -> 15086 2013-11-04 17:15:19 RobertZ + name = getProductName app.state.helper.productsId[productId] 15087 2013-11-04 17:15:21 RobertZ + DOM.h2 {className: "product-text text-3"}, name 15088 2013-11-04 17:16:09 RobertZ here more readable version: http://paste.pound-python.org/show/4GRcFXrS500JX5iMVoly/ 15089 2013-11-04 17:16:13 vjeux_ RobertZ: we talked about having a React.simple(function() { /* content of the render function */ }) 15090 2013-11-04 17:16:55 RobertZ but the funciton expects a single argument 15091 2013-11-04 17:17:07 RobertZ Are there any docs for React.simple? 15092 2013-11-04 17:17:10 vjeux_ but if you want to add something else like propType then it's very annoying 15093 2013-11-04 17:17:16 vjeux_ you've got to use the full form 15094 2013-11-04 17:17:28 vjeux_ so it adds cognitive load to switch between the two 15095 2013-11-04 17:18:39 RobertZ Can't find any docs for React.simple 15096 2013-11-04 17:18:45 vjeux_ we haven't shipped it 15097 2013-11-04 17:18:55 RobertZ ah :) 15098 2013-11-04 17:19:03 vjeux_ React.simple = function(render) { return React.createClass({render: render}); } 15099 2013-11-04 17:19:07 vjeux_ this would be the implementation 15100 2013-11-04 17:19:25 RobertZ yes, simple :) 15101 2013-11-04 17:19:49 RobertZ so for my use-case are there any drawback for creating a function which returns a component? 15102 2013-11-04 17:19:51 vjeux_ this is interesting to have props passed as arguments like this 15103 2013-11-04 17:19:56 RobertZ instead of using a component for it? 15104 2013-11-04 17:20:03 vjeux_ nop you can definitively use it 15105 2013-11-04 17:20:13 vjeux_ let me make a quick example of what we usually do at fb 15106 2013-11-04 17:20:13 RobertZ thank you 15107 2013-11-04 17:21:31 vjeux_ http://jsfiddle.net/vjeux/V6P84/ 15108 2013-11-04 17:22:00 vjeux_ instead of creating very small components 15109 2013-11-04 17:22:24 vjeux_ we use functions inside of the class to generate (or not) sub parts of the component 15110 2013-11-04 17:25:01 vjeux_ the great thing with react components is that they are just function calls that return javascript objects 15111 2013-11-04 17:25:13 vjeux_ so you can pass them around freely and use the full power of javascript to build them 15112 2013-11-04 17:27:00 vjeux_ RobertZ: ^^ 15113 2013-11-04 17:53:26 andreypopp vjeux: I knew! but do you have it somewhere in open source? :-) 15114 2013-11-04 17:53:45 vjeux nop 15115 2013-11-04 17:53:56 vjeux it's heavily tied in the way we package resources 15116 2013-11-04 17:54:09 vjeux which has a lot of fb specific stuff 15117 2013-11-04 17:55:02 andreypopp vjeux: heh, ok, I basically have now https://github.com/andreypopp/xcss which can eliminate unused rules and compress classnames given a map, time to write a transform for cx :-) 15118 2013-11-04 17:55:37 andreypopp now it only parses cx() but not rewrites 15119 2013-11-04 17:56:46 vjeux you should talk to jeff morrison, he is the transform expert 15120 2013-11-04 18:12:58 petehunt andreypopp: we do internally yes 15121 2013-11-04 18:13:24 andreypopp petehunt: I wonder does it worth it over gzip? 15122 2013-11-04 18:13:51 vjeux andreypopp: class names are usually unique 15123 2013-11-04 18:14:04 andreypopp ah, yes 15124 2013-11-04 18:14:07 petehunt andreypopp: i think reducing the number of unique strings helps a teeny bit 15125 2013-11-04 18:14:18 vjeux clearfix hasRightCol homeFixedLayout homeWiderContent hasExpandedComposer newsFeedComposer 15126 2013-11-04 18:14:27 vjeux an example of non minified classes on newsfeed 15127 2013-11-04 18:14:28 petehunt andreypopp: also it enforces modularity (we mangle based on module name as well) 15128 2013-11-04 18:14:55 andreypopp petehunt: yeah, should do the same, cool, thanks 15129 2013-11-04 18:15:14 andreypopp also, source maps for CSS work super cool 15130 2013-11-04 18:16:23 petehunt andreypopp: you are building some cool stuff. sometime you should write up a blog post so we know the status / what's cool :) 15131 2013-11-04 18:17:18 andreypopp petehunt: yeah, need more practice with writing :-) 15132 2013-11-04 18:17:45 petehunt andreypopp: i just see tons of cool stuff in your repos and i have no idea what anything does (eg dgraph) 15133 2013-11-04 18:17:57 vjeux petehunt: +1 15134 2013-11-04 18:18:17 vjeux andreypopp: takes just a wordpress install and you are good to go :) 15135 2013-11-04 18:18:46 andreypopp vjeux: I have a blog, btw. want to migrate it to React :-) 15136 2013-11-04 18:19:27 vjeux speaking of which, new blog post 15137 2013-11-04 18:19:27 vjeux http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html 15138 2013-11-04 18:30:55 zpao petehunt: balpert: chenglou: just saw some scrollback about riot... i tried adding react to their speed tests for a bit over the weekend, but a bunch of the test is parsing templates which is so stupid because you would precompile those 15139 2013-11-04 18:31:36 balpert I think everything about riot seems pretty stupid 15140 2013-11-04 18:32:01 petehunt riot is definitely trolling 15141 2013-11-04 18:32:13 petehunt did you see their initial marketing copy 15142 2013-11-04 18:33:28 petehunt it was originally: "The fastest, smallest and most powerful client side framework for building large scale web applications" (they changed it after jashkenas skewered them) 15143 2013-11-04 18:35:32 balpert petehunt: I'm not sure how that copy implies definite trolling 15144 2013-11-04 18:36:50 zpao they aren't trolling. i read the guy's responses on hn/reddit 15145 2013-11-04 18:38:04 syranide I don't think they are either, but basically advocating "responsible coding" does not a framework make 15146 2013-11-04 18:40:05 brainkim riot.js is beautiful. It is an unintentional satire of everything that is wrong with the javascript ecosystem (obsession with size, dumb semantic arguments about "MVC" and "framework", fear of external dependencies that aren't neatly packaged together, senseless performance graphs, emphasis on logos/hype). 15147 2013-11-04 18:43:00 petehunt ? 15148 2013-11-04 18:48:29 matnel so, build by engineers for engineers? :) 15149 2013-11-04 18:56:21 sspi riot is a great interview question 15150 2013-11-04 18:56:57 vjeux i must have played leagues of legend too much but I can't think of something else when I see riot :x 15151 2013-11-04 18:59:03 chenglou zpao: https://github.com/coderstats/todomvc-metrics 15152 2013-11-04 18:59:39 vjeux http://blog.coderstats.net/todomvc-complexity/ 15153 2013-11-04 18:59:42 vjeux angular wins hand off 15154 2013-11-04 19:00:00 vjeux which is why it is so popular imo 15155 2013-11-04 19:04:55 zpao why no react in there? 15156 2013-11-04 19:05:10 balpert it's kind of cheating when all your code is in the view files 15157 2013-11-04 19:05:29 vjeux don't they count html in this? 15158 2013-11-04 19:05:29 syranide the only way to get blur/focus events for input fields is to attach handlers in componentDidMount? 15159 2013-11-04 19:05:55 brainkim balpert: !! That makes sense! They probably wouldn't be able to measure cyclomatic compexity of index.html 15160 2013-11-04 19:06:00 chenglou zpao: https://github.com/coderstats/todomvc-metrics/issues/1 15161 2013-11-04 19:06:01 chenglou lol 15162 2013-11-04 19:06:24 zpao chenglou: ? 15163 2013-11-04 19:06:27 chenglou i was waiting for react to get into stable 15164 2013-11-04 19:06:43 chenglou still am 15165 2013-11-04 19:09:05 chenglou syranide: no, you can attach them directly on your components 15166 2013-11-04 19:09:13 syranide oh really 15167 2013-11-04 19:09:24 chenglou input onBlur={bla} 15168 2013-11-04 19:09:38 syranide chenglou: awesome, thanks! 15169 2013-11-04 19:09:41 chenglou nop 15170 2013-11-04 19:09:42 chenglou np 15171 2013-11-04 19:10:42 brainkim I'm trying to create a custom build of React, but I can't get a handle on the React build process. 15172 2013-11-04 19:10:57 zpao brainkim: what are you trying to do? 15173 2013-11-04 19:12:35 brainkim zpao: Right now I'm trying to use closure-compiler's secret menu for commonjs modules, but I'm unclear about how we get from src to build and whatnot 15174 2013-11-04 19:13:18 zpao ok, we have a tool called commoner which turns our @providesModules specs into commonjs compatible modules 15175 2013-11-04 19:14:15 sspi so how is the weather in California in december? 15176 2013-11-04 19:14:29 zpao if you take a look at our gruntfile, you can see that build:basic is made up of 3 tasks. the first one is the one that does the commonjsifying 15177 2013-11-04 19:14:38 zpao and it puts all of those files into build/modules 15178 2013-11-04 19:14:57 brainkim zpao: So it seems like commoner is tucked into the jsx compiler? 15179 2013-11-04 19:15:02 zpao yep 15180 2013-11-04 19:15:25 brainkim ahhhhh. 15181 2013-11-04 19:15:29 brainkim I feel a little less insane. 15182 2013-11-04 19:15:41 brainkim I thought the jsx compiler was just for jsx 15183 2013-11-04 19:15:44 zpao our build uses the jsx-internal executable which adds the commonjsifying part of it 15184 2013-11-04 19:16:49 zpao brainkim: it's admittedly not the most obvious thing, so no need to feel insane :) 15185 2013-11-04 19:17:16 chenglou sspi: I can tell you how it is in canada: cold 15186 2013-11-04 19:17:21 sspi lol 15187 2013-11-04 19:18:58 zpao sspi: a little chilly these days where ~55(F) is chilly 15188 2013-11-04 19:19:39 sspi ah that's not too bad :) 15189 2013-11-04 19:20:38 zpao no, it really isn't. also, it's been warmer - we just had a cold few days last week or so. i've just gotten weak after too long out here 15190 2013-11-04 19:23:31 sspi alright, I'll experience it first hand soon enough! 15191 2013-11-04 19:25:51 sspi 4 days is a bit short though 15192 2013-11-04 19:28:27 brainkim zpao: So, from a cursory overview it seems like commoner, populist, browserify, and wrapup do a lot of the same things in a way that isn't really orthogonal? But I guess React has a lot of different compilation targets? 15193 2013-11-04 19:30:22 zpao brainkim: well, wrapup should be gone (or will be shortly), it's roughly equivalent to browserify. neither would work without commoner to turn transform our files into commonjs-compatible structure 15194 2013-11-04 19:31:12 zpao populist is just for testing and i don't remember the exact reasoning (it was written for react though.... benjamn would know) 15195 2013-11-04 19:31:50 balpert populist allows you to dump the module cache 15196 2013-11-04 19:32:32 zpao ah right, so each test can be run independently 15197 2013-11-04 19:37:47 benjamn zpao, balpert, brainkim: right, populist is a very stripped down packager that's intended to support auto-mocking and preserve line numbers in stack traces 15198 2013-11-04 19:38:36 benjamn the effort to write it from scratch was less than the effort to extract those benefits from any of the fully-featured packagers that I've worked with (browserify, wrapup, require.js, &c) 15199 2013-11-04 19:41:00 benjamn brainkim: and, for what it's worth, commoner is the odd tool out in that list, since it's built for incremental transformation (src/ -> build/modules/), with the actual packaging left other tools 15200 2013-11-04 19:41:08 balpert zpao: +1 for oxford comma :) 15201 2013-11-04 19:41:10 benjamn left to* other tools 15202 2013-11-04 19:42:38 benjamn so long, wrapup! 15203 2013-11-04 19:42:42 zpao balpert: i'm a firm believer but was going to let it slide. tomo made sure it happened 15204 2013-11-04 19:42:50 chenglou byebye 15205 2013-11-04 19:42:57 benjamn thx chenglou 15206 2013-11-04 19:43:07 chenglou np, had no idea what it even did before this lol 15207 2013-11-04 19:43:15 brainkim benjamn: Hey! I was looking at that! ;_; 15208 2013-11-04 19:43:18 brainkim benjamn: Haha. 15209 2013-11-04 19:49:55 vjeux zpao: https://github.com/facebook/react/pull/469 :) 15210 2013-11-04 19:56:21 zpao petehunt: re marketing copy: i'm going hands off, so do your thing and i'll update the site when its in 15211 2013-11-04 19:57:51 petehunt zpao: ok 15212 2013-11-04 20:11:54 vjeux just finished writing another blog post. "Bitwise truthiness in Javascript: what's the difference between !!value and ~~value." http://blog.vjeux.com/2013/javascript/bitwise-truthiness.html 15213 2013-11-04 20:11:59 vjeux you guys may be interested :p 15214 2013-11-04 20:12:23 sspi vjeux: cool, reading now 15215 2013-11-04 20:18:37 zpao benjamn: if you get a test failure email... i think npm was/is down 15216 2013-11-04 20:18:47 benjamn zpao: yeah, noticed that :/ 15217 2013-11-04 20:23:10 petehunt vjeux: balpert: zpao: https://github.com/facebook/react/pull/440/files 15218 2013-11-04 20:23:45 zpao not looking :P 15219 2013-11-04 20:23:55 zpao finding bugs instead 15220 2013-11-04 20:23:59 petehunt okie 15221 2013-11-04 20:26:36 balpert what do you think of doing just the UI, composable, and virtual DOM (removing data flow)? 15222 2013-11-04 20:49:40 petehunt balpert: composability is really hard to explain without sounding like a dick IMO 15223 2013-11-04 20:50:04 petehunt balpert: i can't think of a way to say it other than: "everyone else sucks at composability" 15224 2013-11-04 20:50:12 petehunt and i don't think we should be those guys 15225 2013-11-04 21:02:52 sspi why not combine composability with learning curve? 15226 2013-11-04 21:03:14 vjeux i also think that composability is better than data flow 15227 2013-11-04 21:05:16 brainkim petehunt: What if you said something like "React encourages you to compose elements from smaller components which represent plain old html/svg elements, rather than relying on unwieldy html string interpolation or magical html extensions" 15228 2013-11-04 21:06:09 petehunt i wonder if i could get both points across in 1 15229 2013-11-04 21:06:35 brainkim Cast react as a middle-ground between the old and cumbersome (templating) and the new and scary (directives/web components). 15230 2013-11-04 21:06:40 sspi vjeux: I was searching for ~~ in your article but didn't find it :P 15231 2013-11-04 21:06:49 vjeux sspi: 0| is equivalent to ~~ 15232 2013-11-04 21:06:57 sspi ah tnx :) 15233 2013-11-04 21:13:21 sspi Build components with an easy learning curve. No hidden transclusions. 15234 2013-11-04 21:14:06 petehunt zpao: npm is down right 15235 2013-11-04 21:14:10 benjamn petehunt: yea 15236 2013-11-04 21:14:19 petehunt lol 15237 2013-11-04 21:30:59 balpert petehunt: I don't think we need to be mean, we can just say, React makes composability easy 15238 2013-11-04 21:58:49 petehunt balpert: i would love for you to take a pass at that then :) 15239 2013-11-04 21:58:57 petehunt i failed like 3x 15240 2013-11-04 22:15:12 shohyuken Is there a scrolling component for reactjs? 15241 2013-11-04 22:15:27 petehunt shohyuken: what do you want specifically? 15242 2013-11-04 22:15:31 vjeux shohyuken:
...
? 15243 2013-11-04 22:15:43 vjeux 'scroll' 15244 2013-11-04 22:16:06 shohyuken petehunt: something like a list that renders only items that are in the viewport 15245 2013-11-04 22:16:20 vjeux nop there isn't 15246 2013-11-04 22:16:43 petehunt shohyuken: your items are a fixed size right? 15247 2013-11-04 22:16:52 shohyuken petehunt: yes 15248 2013-11-04 22:16:52 petehunt fixed height* 15249 2013-11-04 22:17:08 shohyuken i can always calculate height / fixed height 15250 2013-11-04 22:17:17 shohyuken but if there's a pre made component :P 15251 2013-11-04 22:17:43 petehunt shohyuken: ok, so you can use position: absolute for them, right? 15252 2013-11-04 22:17:56 shohyuken petehunt: yeah 15253 2013-11-04 22:19:06 petehunt kk 1s 15254 2013-11-04 22:21:11 vjeux http://jsfiddle.net/vjeux/KbWJ2/8/ 15255 2013-11-04 22:21:19 vjeux i wrote this one that worked 15256 2013-11-04 22:21:25 vjeux but looks like it's broken now 15257 2013-11-04 22:25:09 vjeux http://jsfiddle.net/vjeux/KbWJ2/9/ 15258 2013-11-04 22:25:10 vjeux fixed it 15259 2013-11-04 22:26:27 shohyuken vjeux: whoa nice 15260 2013-11-04 22:26:32 petehunt shohyuken: here is a dumb example http://jsfiddle.net/Gz4Ta/ 15261 2013-11-04 22:26:54 shohyuken petehunt: did you JUST write that? 15262 2013-11-04 22:27:01 petehunt shohyuken: ya 15263 2013-11-04 22:27:12 shohyuken petehunt: cray cray 15264 2013-11-04 22:27:18 petehunt shohyuken: react makes everything easy man :) 15265 2013-11-04 22:27:23 petehunt (or woman!) 15266 2013-11-04 22:27:45 shohyuken man 15267 2013-11-04 22:27:57 shohyuken petehunt: playing around with this, thanks! 15268 2013-11-04 22:28:11 shohyuken vjeux: totally taking notes from your code too! 15269 2013-11-04 22:28:47 vjeux mine is a bit more involved as it updates in batches 15270 2013-11-04 22:29:03 vjeux and maintains some buffer 15271 2013-11-04 22:29:38 vjeux you're always going to drop frame when rendering new lines, so might as well drop them once in a while instead of constantly 15272 2013-11-04 22:30:58 vjeux if you look at pete's example, if you scroll up, you can see that it flashes white 15273 2013-11-04 22:31:16 vjeux by having some buffer you minimize those 15274 2013-11-04 22:32:02 shohyuken vjeux: got it! i will keep the buffer in mind 15275 2013-11-04 22:33:22 vjeux also, pete's example is setting the top position on each node where mine is just a plain and I have the first tr set to the height of all the hidden trs 15276 2013-11-04 22:33:25 vjeux and the last one the same 15277 2013-11-04 22:34:08 vjeux i'm not sure you can position absolute like pete did 15278 2013-11-04 22:34:20 vjeux and, i just re-implemented something that was setup like this 15279 2013-11-04 22:38:42 balpert petehunt: you don't like either of my suggestions at https://github.com/facebook/react/pull/440#discussion_r7394503? 15280 2013-11-04 22:45:24 brainkim Jump for joy everybody I got react to work with google closure advanced compilations. Look at those warnings though. 15281 2013-11-04 22:45:46 petehunt brainkim: wooo! what'd you have to change? 15282 2013-11-04 22:46:02 brainkim petehunt: Literally nothing. 15283 2013-11-04 22:46:07 petehunt good :) 15284 2013-11-04 22:46:10 brainkim The trick was the build part 15285 2013-11-04 22:46:15 petehunt thats what i thought, we just dont have a test case for it 15286 2013-11-04 22:46:26 vjeux brainkim: nice! 15287 2013-11-04 22:46:35 zpao brainkim: when he's back, you should chat with piranha... he did some work to make it work for 0.5 (no build part of it, just internals) 15288 2013-11-04 22:47:15 shohyuken I might have asked for this, but is there a react mobile version? 15289 2013-11-04 22:47:19 vjeux zpao: will you have the time to look at the community roundup soon? 15290 2013-11-04 22:47:29 vjeux shohyuken: the current version works on mobile 15291 2013-11-04 22:47:52 shohyuken vjeux: any performance pitfalls I should be aware of? 15292 2013-11-04 22:48:13 zpao shohyuken: you'll want to call React.initializeTouchEvents(true) (ugghhh, hate that API) 15293 2013-11-04 22:48:26 vjeux shohyuken: oh, didn't we kill that yet? 15294 2013-11-04 22:48:29 petehunt also may want TouchEventPlugin 15295 2013-11-04 22:48:32 petehunt er 15296 2013-11-04 22:48:34 petehunt TapEventPlugin 15297 2013-11-04 22:48:42 brainkim Yup. I dunno if you guys are gonna like what I plan to do with this (clojure dark arts), but I'll make sure to send the build process upstream as soon as I clean up absolute file paths and such. 15298 2013-11-04 22:49:00 balpert vjeux: it's a pain to kill because browsers won't send click events if you listen to tap events 15299 2013-11-04 22:49:02 zpao vjeux: no, couldn't. had issues on fb 15300 2013-11-04 22:49:06 vjeux shohyuken: so, the main pain point right now with mobile is touch handling 15301 2013-11-04 22:49:16 vjeux but this is not really unique to react 15302 2013-11-04 22:49:20 shohyuken vjeux: it's still in the docs at least: http://facebook.github.io/react/docs/top-level-api.html#react.initializetouchevents 15303 2013-11-04 22:50:15 vjeux brainkim: i'd be interested in seeing it :) 15304 2013-11-04 22:51:21 petehunt balpert: vjeux: zpao: do you think there's any reason someone would want click instead of tap on mobile? 15305 2013-11-04 22:51:33 vjeux petehunt: to get rid of the horrible 300ms delay 15306 2013-11-04 22:51:36 shohyuken do I need to do all of this? https://github.com/facebook/react/issues/436 15307 2013-11-04 22:51:37 vjeux oops 15308 2013-11-04 22:51:40 petehunt vjeux: other way around 15309 2013-11-04 22:51:48 vjeux if you want to focus a textbox on android 15310 2013-11-04 22:51:53 vjeux you have to be in the click event 15311 2013-11-04 22:51:55 petehunt we could detect mobile and replace it 15312 2013-11-04 22:51:57 petehunt oh ok 15313 2013-11-04 22:52:02 vjeux this is so annoying 15314 2013-11-04 22:52:02 balpert petehunt: I mean, if you have existing code that binds to click? 15315 2013-11-04 22:52:18 balpert petehunt: zpao said that links don't work on FB if you bind to the touch events at the top level 15316 2013-11-04 22:52:31 balpert petehunt: presumably because of some single-page-app magic that happens 15317 2013-11-04 22:52:41 petehunt ow 15318 2013-11-04 22:52:53 petehunt shohyuken: that is best 15319 2013-11-04 22:53:09 petehunt shohyuken: if you dont need onTouchTap you don't need to do anything except call initializeTouchEvents() 15320 2013-11-04 22:53:38 shohyuken petehunt: what does using commonjs have anything to do with accepting touch events? 15321 2013-11-04 22:53:46 zpao nothing 15322 2013-11-04 22:53:46 vjeux it would be nice to see how hard it is to integrate http://eightmedia.github.io/hammer.js/ into react event system 15323 2013-11-04 22:53:48 zpao ignore that 15324 2013-11-04 22:53:57 petehunt it just lets you import TouchEventPlugin 15325 2013-11-04 22:54:04 petehunt tap* grr 15326 2013-11-04 22:54:21 shohyuken vjeux: damn, 80s throwback there 15327 2013-11-04 22:54:26 brainkim Is there an api for creating event plugins in react or is that a todo? 15328 2013-11-04 22:54:57 zpao brainkim: todo. you can do it today if you roll your own react 15329 2013-11-04 22:55:46 shohyuken zpao: ugh, have to go into the framework's codebase? 15330 2013-11-04 22:55:58 zpao shohyuken: i hate it as much as you... want to stop doing this 15331 2013-11-04 22:56:08 zpao petehunt: so i think we shuold just include it always 15332 2013-11-04 22:56:27 zpao and here's why: "responsive" sites 15333 2013-11-04 22:56:31 petehunt zpao: can we start by putting it into ReactWithAddons? i do think it's important we keep the core small 15334 2013-11-04 22:57:40 brainkim zpao: I can see an event api that uses the same compositional techniques as components, building events from primitive ones. Maybe bacon.js might be a good place to look for inspiration. 15335 2013-11-04 22:58:19 zpao petehunt: uh, how does that PR change anything? just makes it exportable but not usable? 15336 2013-11-04 22:58:22 petehunt brainkim: have you seen our event system? 15337 2013-11-04 22:58:48 brainkim not there yet 15338 2013-11-04 22:59:08 balpert zpao: wow I'm an idiot 15339 2013-11-04 22:59:10 brainkim I saw the beautiful ascii art that described the event system from a high level view 15340 2013-11-04 22:59:14 petehunt zpao: doh you're right 15341 2013-11-04 23:00:06 petehunt zpao: balpert: ok, i added EventPluginHub to __internals :) 15342 2013-11-04 23:00:15 zpao no 15343 2013-11-04 23:00:16 zpao no 15344 2013-11-04 23:00:17 zpao no 15345 2013-11-04 23:00:48 petehunt zpao: it's either that or react-mobile-with-addons-0.5.1.min.js 15346 2013-11-04 23:01:15 zpao in no way ever am i telling anybody to use __internals 15347 2013-11-04 23:01:25 zpao this is why i didn't want it there from the beginning 15348 2013-11-04 23:01:29 petehunt could put it in addons? 15349 2013-11-04 23:01:38 petehunt React.addons.installTapPlugin() 15350 2013-11-04 23:02:28 zpao ... fine 15351 2013-11-04 23:02:32 petehunt yeahhhhh buddy! 15352 2013-11-04 23:02:44 zpao but that name kinda sucks 15353 2013-11-04 23:02:55 balpert enable 15354 2013-11-04 23:03:02 balpert initializeTapPlugin(true) :D 15355 2013-11-04 23:03:09 zpao kill me now 15356 2013-11-04 23:03:11 balpert :) 15357 2013-11-04 23:03:14 zpao :) 15358 2013-11-04 23:03:22 matnel getMeSomeTapMagic() 15359 2013-11-04 23:03:30 petehunt zpao: how about this 15360 2013-11-04 23:03:48 shohyuken how is that different from touch actually? tap vs touch 15361 2013-11-04 23:03:55 petehunt actually nm 15362 2013-11-04 23:04:01 shohyuken i do see this in the doc: http://facebook.github.io/react/docs/top-level-api.html#react.initializetouchevents 15363 2013-11-04 23:04:05 petehunt injectTapEventPlugin() btw 15364 2013-11-04 23:07:03 petehunt zpao updated 15365 2013-11-04 23:07:38 zpao petehunt: how much does this add to our build? 15366 2013-11-04 23:08:37 petehunt zpao: react-with-addons is about 2k bigger post-gzip 15367 2013-11-04 23:08:41 syranide petehunt: are you ready to get your socks rocked off? 15368 2013-11-04 23:08:50 petehunt syranide: HIT ME 15369 2013-11-04 23:09:01 syranide petehunt: http://dev.cetrez.com/jsx/examples/ballmer-peak/ , try typing an equation in the last input (move around with the cursor, etc) 15370 2013-11-04 23:09:07 zpao shohyuken: wraps things up a little bit nicely. combines touchstart and touchend with some fault tolerance for imperfect taps 15371 2013-11-04 23:09:30 syranide (parenthesis too) 15372 2013-11-04 23:09:37 shohyuken zpao: does it include other events such as swipe? 15373 2013-11-04 23:09:51 syranide petehunt: ups, I just broke backspace :P 15374 2013-11-04 23:10:01 zpao shohyuken: no 15375 2013-11-04 23:10:50 syranide petehunt: if you update backspace works now too ^^ 15376 2013-11-04 23:11:29 petehunt i dont know what im looking at :/ 15377 2013-11-04 23:12:00 syranide petehunt: full control of the input field, when you add an operator, it automatically adds space, while keeping the cursor at the right place 15378 2013-11-04 23:12:09 petehunt im getting errors in chrome 15379 2013-11-04 23:12:13 syranide aha... hmm 15380 2013-11-04 23:12:22 syranide force refresh? 15381 2013-11-04 23:12:54 petehunt Uncaught TypeError: Cannot call method 'match' of undefined 15382 2013-11-04 23:12:54 petehunt React.createClass.handleChange4 15383 2013-11-04 23:13:17 syranide that's weird, I'm not getting that and I'm on chrome (although admittedly, the code is not very nice now) 15384 2013-11-04 23:13:46 syranide petehunt: aha wait a minute, don't type at the end of the field ;) 15385 2013-11-04 23:13:55 syranide type in the middle of it 15386 2013-11-04 23:14:29 shohyuken petehunt: is that carly are jepsen? 15387 2013-11-04 23:14:39 petehunt mmhmm 15388 2013-11-04 23:15:05 shohyuken nice... 15389 2013-11-04 23:15:21 petehunt she said her favorite way to build apps in js was react, it was awesome 15390 2013-11-04 23:17:03 shohyuken petehunt: I actually googled "carly rae jepsen day job" 15391 2013-11-04 23:17:10 petehunt :P sarcasm 15392 2013-11-04 23:17:47 zpao petehunt: so your PR adds 441bytes post-gzip 15393 2013-11-04 23:18:11 syranide petehunt: fixed the issue, try typing an equation now :) http://dev.cetrez.com/jsx/examples/ballmer-peak/ 15394 2013-11-04 23:18:34 zpao (to the min build, just shy of 1kb to the dev build) 15395 2013-11-04 23:18:38 petehunt papercuts :) 15396 2013-11-04 23:19:01 zpao that's less of paper cut than knowing to get a different build and run another method? 15397 2013-11-04 23:19:17 zpao s/less/more/ 15398 2013-11-04 23:19:17 petehunt zpao: i basically am thinking of this in terms of marketing. if we aggressively keep our core size down like this no one will get the wrong impression when evaluating react 15399 2013-11-04 23:19:45 petehunt zpao: when someone wants to do taps, all we say is "use addons" and it'snot that high of a cost 15400 2013-11-04 23:20:17 petehunt people that will care about only getting TapEventPlugin are probably using a module build system, so they can invest in cloning the repo 15401 2013-11-04 23:20:51 zpao " riot.js is beautiful. It is an unintentional satire of everything that is wrong with the javascript ecosystem (obsession with size ..." 15402 2013-11-04 23:21:09 petehunt well this is the world we live in sadly 15403 2013-11-04 23:21:19 petehunt there were a ton of positive comments about riot too 15404 2013-11-04 23:22:14 zpao "tiniest thing ever... except it depends on jquery so not really" 15405 2013-11-04 23:22:34 shohyuken how hard is it to integrate a third party eventing system, like the previously mentioned hammer.js into a reactjs app 15406 2013-11-04 23:22:51 zpao even if somebody is using a module system... what makes it obvious that they actually need to run something else to install a tap plugin? 15407 2013-11-04 23:22:55 syranide zpao: can't you guys just release a reactify, 100b, depends on reactjs? ;) 15408 2013-11-04 23:23:02 brainkim zpao: Haha shit I forget there's logs. 15409 2013-11-04 23:23:26 zpao brainkim: still in my scrollback, don't need no stinkin' logs :P 15410 2013-11-04 23:23:37 petehunt zpao: hrm, publish in npm and wzrd.in? 15411 2013-11-04 23:23:53 petehunt would still need to expose all the injection apis somewhere but that at least doesn't add bytes. 15412 2013-11-04 23:24:08 petehunt shohyuken: pretty easy 15413 2013-11-04 23:24:21 petehunt shohyuken: do you have an iphone 5 / have you seen my sweet react demo 15414 2013-11-04 23:24:22 zpao publish what in npm? 15415 2013-11-04 23:24:22 shohyuken petehunt: is there an example for it? 15416 2013-11-04 23:24:31 petehunt zpao: TapEventPlugin, ReactTransitionGroup etc 15417 2013-11-04 23:24:43 shohyuken petehunt: i do have an iPhone, you did give me a link which i conveniently lost 15418 2013-11-04 23:25:18 petehunt www.petehunt.net/react-photos-beta 15419 2013-11-04 23:25:23 brainkim re addons/custom builds of react: I think it would be nicer if the grunt build system were a little less opaque to newcomers. 15420 2013-11-04 23:25:36 petehunt shohyuken: my preferred gesture library is zynga scroller, not hammer, but ymmv 15421 2013-11-04 23:25:55 shohyuken petehunt: I just found that few minutes ago! that was my followup question too! 15422 2013-11-04 23:26:22 petehunt shohyuken: if you view source of that example it just uses zynga scroller plus some sweet declarative css3d sauce 15423 2013-11-04 23:26:59 zpao brainkim: yes. we have some ideas (like maybe switching away from browserify & not not needing to turn requires into commonjs compatible) 15424 2013-11-04 23:27:12 shohyuken petehunt: this is very sweet 15425 2013-11-04 23:27:43 brainkim zpao: I don't mind browserify, it's just there needs to be some refactoring. 15426 2013-11-04 23:28:06 brainkim zpao: Maybe also rely more npm grunt tasks rather building them from scratch. 15427 2013-11-04 23:28:12 zpao ACTION hears brainkim volunteering :P 15428 2013-11-04 23:28:47 zpao brainkim: what were you thinking of replacing? 15429 2013-11-04 23:29:31 brainkim zpao: Not replacing. Just little things. Like uglify.js is currently run from the "browserify" config file, which is crazy. 15430 2013-11-04 23:29:45 brainkim rahter than having a separate uglify grunt task 15431 2013-11-04 23:30:16 zpao brainkim: yea, it kinda is. the reasoning was that i needed to add the separate license header in... sometimes 15432 2013-11-04 23:31:16 zpao brainkim: we wrote all of this build stuff pretty quickly over a few weeks leading up to launch while also fixing up core and building the site, so some of it is definitely haphazard 15433 2013-11-04 23:31:25 brainkim And commoner.js is super impressive/next-level, but it swallows command-line args in a way that is incredibly opaque to me, and I have no doubt people have no idea what's going on there. 15434 2013-11-04 23:31:29 brainkim Just little things. 15435 2013-11-04 23:31:49 brainkim *people as in newcomers 15436 2013-11-04 23:32:46 zpao brainkim: let's make it better :) you're now officially more of an expert than most people, so if you're interested... 15437 2013-11-04 23:33:19 brainkim Fine zpao. I will try. 15438 2013-11-04 23:33:43 brainkim ;p 15439 2013-11-04 23:34:28 zpao \\o/ 15440 2013-11-04 23:37:09 shohyuken petehunt: tried it on android, didn't work, the react photos 15441 2013-11-04 23:38:31 andreypopp petehunt: react-photos-beta so much awesome, feels like native 15442 2013-11-05 00:21:01 petehunt shohyuken: yeah, it's explicitly disabled on non-iphone 5 15443 2013-11-05 00:21:26 petehunt mainly because the image dimensions are hardcoded 15444 2013-11-05 00:24:15 shohyuken petehunt: do you disable the whole thing if it's not an iPhone 5? 15445 2013-11-05 00:24:27 petehunt shohyuken: it should alert() and die to a black screen 15446 2013-11-05 00:24:54 shohyuken petehunt: got it 15447 2013-11-05 01:01:32 shohyuken petehunt: the tutorial doesn't work? 15448 2013-11-05 01:01:42 petehunt shohyuken: should work... 15449 2013-11-05 01:01:42 shohyuken tutorial1.js specifically 15450 2013-11-05 01:01:48 shohyuken it complains 15451 2013-11-05 01:01:55 petehunt DOH 15452 2013-11-05 01:02:00 petehunt wow we are noobs 15453 2013-11-05 01:02:02 shohyuken Uncaught SyntaxError: Unexpected token < 15454 2013-11-05 01:02:23 petehunt oh you're forgetting: /** @jsx React.DOM */ 15455 2013-11-05 01:02:30 petehunt but change class= to className= 15456 2013-11-05 01:02:46 shohyuken ah okay 15457 2013-11-05 01:03:01 shohyuken i did change class to className too but i guess the comment is the issue 15458 2013-11-05 01:04:48 petehunt zpao: ^^ 15459 2013-11-05 01:05:14 balpert petehunt: ?. we should have the tutorial in an example somewhere so it's more obvious when things get broken 15460 2013-11-05 01:08:22 shohyuken does react have a road map written somewhere? 15461 2013-11-05 01:16:41 zpao shohyuken: a rough one on my computer, need to solidify it a bit and publish 15462 2013-11-05 01:26:44 shohyuken is there a tutorial for a single page app architecture in React? How it handles routes, page re-render and stuff? 15463 2013-11-05 01:29:35 petehunt shohyuken: http://github.com/petehunt/ReactHack, or andreypopp has a thing 15464 2013-11-05 01:31:42 shohyuken petehunt: this? https://github.com/andreypopp 15465 2013-11-05 01:33:14 balpert shohyuken: https://github.com/andreypopp/react-app 15466 2013-11-05 01:34:49 shohyuken balpert: thanks! 15467 2013-11-05 01:34:55 balpert np :) 15468 2013-11-05 17:50:16 brainkim q 15469 2013-11-05 17:50:17 brainkim :Q 15470 2013-11-05 17:50:25 vjeux_ qq 15471 2013-11-05 17:50:25 brainkim woops sry 15472 2013-11-05 17:50:42 brainkim trying to quit vim and not knowing what's going on :[ 15473 2013-11-05 18:02:40 zpao vjeux: how about you run the todomvc benchmarks 10 times and give me averages to put into the blog post. A single run and having (????) in there isn't going to fly for me 15474 2013-11-05 18:03:34 zpao i already made some small edits, so just getting the numbers is easier than an update PR 15475 2013-11-05 18:25:11 petehunt zpao: yt? 15476 2013-11-05 18:25:20 zpao sup 15477 2013-11-05 18:25:21 petehunt i think i have a solution to the "everything in addons" problem 15478 2013-11-05 18:25:30 zpao go on 15479 2013-11-05 18:25:45 petehunt zpao: everything in addons goes into npm 15480 2013-11-05 18:26:12 petehunt zpao: and we expose React.injection which has every injection method on it 15481 2013-11-05 18:26:27 petehunt we can recommend wzrd.in for people not using commonjs directly 15482 2013-11-05 18:27:19 zpao step back... how is everything in npm? 15483 2013-11-05 18:28:02 petehunt zpao: dependency injection 15484 2013-11-05 18:28:15 zpao what does it look like? what does it export? 15485 2013-11-05 18:28:24 petehunt zpao: so TapEventPlugin etc will need to be changed to not directly require() React 15486 2013-11-05 18:28:39 petehunt zpao: what we will do instead is in your main.js file or whatever 15487 2013-11-05 18:28:51 petehunt var React = require('React'); // or get it from globals, however you want to get this... 15488 2013-11-05 18:29:07 petehunt require('react-TapEventPlugin').injectInto(React) 15489 2013-11-05 18:29:20 petehunt it'll throw if you call injectInto multiple times 15490 2013-11-05 18:30:03 petehunt zpao: injectInto() will call React.injection.*() methods to put itself into react. and it'll keep a reference to the React module around internally to be able to call into React 15491 2013-11-05 18:30:36 petehunt i'm about 85% sure this will work :) 15492 2013-11-05 18:32:06 zpao so... how would this be different than soldifying and exposing a public API (much like React.injection.*)? 15493 2013-11-05 18:32:29 petehunt zpao: solidifying and exposing a public API is part of this 15494 2013-11-05 18:32:44 zpao there's no injectInto. there's just React.whatever 15495 2013-11-05 18:33:08 petehunt zpao: injectInto() is a convention we come up with for "react addon" npm modules 15496 2013-11-05 18:33:31 petehunt it's not actually part of React core 15497 2013-11-05 18:33:32 zpao if they're requiring React, why do they need to have their own injectInto method? 15498 2013-11-05 18:33:56 petehunt zpao: who is "they" in this context? the add-on? the add-on won't actually require react! 15499 2013-11-05 18:34:10 petehunt so we can sidestep the whole packaging nightmare 15500 2013-11-05 18:35:49 zpao ah, so there are 3 things. React, SomeReactAddon, MyCode. MyCode does require('someaddon).injectInto(require('react')) (or if separate UMD script tags... SomeAddon.injectInto(React) 15501 2013-11-05 18:36:00 zpao is that right? 15502 2013-11-05 18:36:19 petehunt zpao: yes 15503 2013-11-05 18:36:54 zpao ok, so if we get rid of the method on SomeAddon, and just have React.installAddon(SomeAddon), how is that different? 15504 2013-11-05 18:37:15 zpao SomeAddon must comply to a signature (maybe an init method that gets passed React?) 15505 2013-11-05 18:37:19 petehunt zpao: that's cool too 15506 2013-11-05 18:37:25 zpao ? 15507 2013-11-05 18:37:45 zpao ok, so that's very much like what i said a few weeks ago :P 15508 2013-11-05 18:38:22 petehunt zpao: i see tradeoffs there. if we do React.installAddon() it's nice because we don't have to expose the injection APIs publicly (we just pass them directly to the addon). however it does add a new concept to core which will be different than how we do things internally 15509 2013-11-05 18:38:44 zpao the part i started talking about more was solidifying the API we hang off the React object so that the addon has access to the right things. 15510 2013-11-05 18:39:03 zpao maybe we expose React.EventPlugins.install as well, which TapEventPlugin would make use of 15511 2013-11-05 18:39:40 zpao in that case, the public plugin is actually a slight wrapper around what we would do internally because blah blah @providesModule 15512 2013-11-05 18:40:00 petehunt zpao: i think we already know what a large part of that API needs to look like. it's just all of our injection methods plus whatever internals they need to use 15513 2013-11-05 18:40:43 petehunt zpao: the wrapper would be a tiny bit more involved than just normalizing @providesModule 15514 2013-11-05 18:41:17 zpao i agree, we just need to cleanup the internal APIs and make sure they're exposed on React in a sane way... not __internals 15515 2013-11-05 18:41:25 petehunt zpao: since we can't use require('React'), we need to wait until React.installAddon() / Addon.injectInto() gets called to call React.createClass() 15516 2013-11-05 18:42:05 zpao well, i think internally we have our InternalReact object that just installs those straight from the module 15517 2013-11-05 18:44:39 petehunt zpao: is there a way we can do this incrementally? 15518 2013-11-05 18:45:48 petehunt zpao: i'm wondering if we can make the API for using add-ons public, and the API for creating add-ons private so we can iterate on each separately 15519 2013-11-05 18:46:27 petehunt we can use scary naming (__installAddonDoNotUseOrYouWillBeFired()) 15520 2013-11-05 18:48:59 petehunt chenglou: vjeux_: https://github.com/facebook/react/pull/453/files thoughts? 15521 2013-11-05 18:49:45 vjeux_ just glanced over it and i'm good with it :) 15522 2013-11-05 18:49:47 vjeux_ ship it 15523 2013-11-05 18:50:07 zpao petehunt: yea we can do something like that. i would like to figure this out with a solid example as much as possible 15524 2013-11-05 18:50:23 zpao vjeux_: did you see my comment earlier about perftest numbers? 15525 2013-11-05 18:50:38 vjeux_ zpao: no, what did you say? 15526 2013-11-05 18:51:04 zpao vjeux: how about you run the todomvc benchmarks 10 times and give me averages to put into the blog post. A single run and having (????) in there isn't going to fly for me 15527 2013-11-05 18:51:05 zpao i already made some small edits, so just getting the numbers is easier than an update PR 15528 2013-11-05 18:51:35 petehunt zpao: ReactLink doesn't use any internals except ReactStateSetters, which could itself be turned into an addon 15529 2013-11-05 18:51:43 vjeux_ zpao: the results are consistent, the perf version is slower than the normal one 15530 2013-11-05 18:52:26 vjeux but let me re-run it 15531 2013-11-05 18:52:53 zpao vjeux: it's faster for me 15532 2013-11-05 18:53:10 petehunt vjeux: gecko and webkit-derived browsers have significant differences iirc, you may want to include both sets of numbers. also we look a lot better on mobile. i ran it on safari/chrome/firefox desktop and safari/chrome on ios (jit vs nonjit). ill run it on my firefox os phone now :) 15533 2013-11-05 18:53:16 andreypopp petehunt: React.inject() is just a workaround to not require('React') inside plugins? 15534 2013-11-05 18:53:46 petehunt andreypopp: basically 15535 2013-11-05 18:53:57 petehunt constrains the api surface area too 15536 2013-11-05 18:54:12 chenglou petehunt: I bet __dangerouslySetInnerHTML was your idea 15537 2013-11-05 18:54:22 petehunt lol no 15538 2013-11-05 18:54:44 sspi petehunt: looking at your article, is sporting goods and electronics a separate component? seems a bit too much (haven't read the entire article...) 15539 2013-11-05 18:54:52 zpao chenglou: that's a thing we do here to make it obvious you probably don't want to use that method 15540 2013-11-05 18:54:56 andreypopp petehunt: I don't why plugins should be disallowed to call require('React') 15541 2013-11-05 18:55:06 petehunt sspi: they are not separate ;) 15542 2013-11-05 18:55:26 sspi petehunt: yeah but also for a heading a separate component? 15543 2013-11-05 18:55:30 zpao chenglou: we've had method names that include YouWillBeFired and Experimental___DoNotUse 15544 2013-11-05 18:55:32 andreypopp petehunt: anyway there will be self contained React component on npm which will require('React') because... they will need to create some virtual DOM 15545 2013-11-05 18:56:49 sspi petehunt: ProductCategoryRow is overkill - but I can understand adding it for future features :) 15546 2013-11-05 18:56:55 chenglou lol 15547 2013-11-05 18:59:25 vjeux zpao: (running all the bench multiple times) 15548 2013-11-05 18:59:41 petehunt andreypopp: we'll pass them a reference to it 15549 2013-11-05 19:01:16 vjeux so crazy slow on iphone :x 15550 2013-11-05 19:02:25 sspi petehunt: please tell if my reasoning is wrong though :) 15551 2013-11-05 19:02:46 petehunt vjeux: slower it is == more we beat angular/ember 15552 2013-11-05 19:03:27 chenglou petehunt: what happened to the fiddle 15553 2013-11-05 19:03:29 chenglou in the post 15554 2013-11-05 19:03:46 petehunt (and more backbone beats us but w/e…you can mention that todomvc benchmark is optimal for backbone and somewhat pathological for react) 15555 2013-11-05 19:03:49 chenglou everything else's good 15556 2013-11-05 19:03:56 petehunt chenglou: they are embeds at the beginning of each section now 15557 2013-11-05 19:04:12 vjeux zpao: ok you are right the run where angular-perf is slower was an outlier 15558 2013-11-05 19:05:11 chenglou ah oops, was in md preview mode 15559 2013-11-05 19:06:06 petehunt zpao: can we publish my blog post? 15560 2013-11-05 19:06:54 zpao petehunt: sure. vjeux, let's publish yours tomorrow 15561 2013-11-05 19:07:15 zpao (or should we just do both today?) 15562 2013-11-05 19:07:57 sspi petehunt: missing the jsfiddle links, where did they go? 15563 2013-11-05 19:08:10 chenglou sspi: check the raw md 15564 2013-11-05 19:08:20 chenglou sspi: they're embedded and dont show in preview mode 15565 2013-11-05 19:08:30 sspi chenglou: tnx :) 15566 2013-11-05 19:08:36 chenglou np 15567 2013-11-05 19:09:01 petehunt zpao: well, i don't think my blog post is worth doing any press for, i think vjeux's is worth sending to reddit 15568 2013-11-05 19:09:21 vjeux https://gist.github.com/vjeux/7324368 15569 2013-11-05 19:09:36 vjeux i ran chrome and firefox multiple times and the order is the same 15570 2013-11-05 19:09:37 chenglou petehunt: im actually sending your post to my ex-coworker the minute it gets published 15571 2013-11-05 19:09:41 petehunt i think two blog posts on the same day is fine as long as they aren't two externally facing ones (i view community roundups as potentially targeted to people outside the community) 15572 2013-11-05 19:09:48 chenglou the last four points are really good 15573 2013-11-05 19:10:07 petehunt zpao: also fwiw my new team is learning react right now and they want to read this post :) 15574 2013-11-05 19:10:10 vjeux i'm running a second round of iphone but it takes ages :p 15575 2013-11-05 19:10:28 zpao vjeux: these are averages of multiple runs in the browsers? 15576 2013-11-05 19:10:51 zpao (i'm happy to just use a single result set... just want it to be a set, not a single run) 15577 2013-11-05 19:11:09 chenglou here's a new PR idea: "React made me a better programmer". Picture of smiling women holding books in the background 15578 2013-11-05 19:11:11 vjeux zpao: one run but multiple runs have the same ordering in term of ranking (and roughly the same times) 15579 2013-11-05 19:11:44 petehunt chenglou: i have a really good PR idea that i'm going to do 15580 2013-11-05 19:12:10 petehunt chenglou: i'm pretty happy with my js coverflow mobile thing 15581 2013-11-05 19:12:24 chenglou "I was lost during software architecture class, but ever since I started using React I my code's become much more organized!" 15582 2013-11-05 19:12:34 zpao vjeux: sorry, but if we're putting numbers on our blog saying we're super fast, a single run isn't good enough. even if it's "roughly" representative. the first thing people will ask about are methodolgies 15583 2013-11-05 19:12:41 petehunt chenglou: i need to tweak it to look more like coverflow but once i do, the world's best jQuery coverflow plugin will be built in React :) 15584 2013-11-05 19:12:43 petehunt and blogged about 15585 2013-11-05 19:13:30 zpao balpert: time to rebase, petehunt beat you to the classname fix last night https://github.com/facebook/react/commit/6c1e8e8a668d30f02d423498b248541b938586e1 15586 2013-11-05 19:13:54 chenglou petehunt: awesome, did you post the source 15587 2013-11-05 19:13:58 vjeux zpao: ok, the second run on iphone has the same ranking as the first run 15588 2013-11-05 19:14:21 petehunt chenglou: you can view source :P 15589 2013-11-05 19:14:29 chenglou true, true 15590 2013-11-05 19:14:30 petehunt i'm trying to decide how hardcore to be 15591 2013-11-05 19:14:39 vjeux takes 6 minutes to run 15592 2013-11-05 19:14:44 chenglou petehunt: identical replica of coverflow please 15593 2013-11-05 19:14:48 zpao vjeux: skip iphone. 10 runs in chrome on desktop is good enough for me 15594 2013-11-05 19:14:56 vjeux ok let me do that 15595 2013-11-05 19:15:04 zpao ? 15596 2013-11-05 19:15:25 balpert zpao: nooo 15597 2013-11-05 19:15:55 zpao balpert: from the guy who usually knows about commits within seconds... you're slacking :P 15598 2013-11-05 19:16:03 balpert I think I saw it last night and forgot about it 15599 2013-11-05 19:16:05 petehunt brb 15600 2013-11-05 19:16:46 balpert zpao: and hey, sometimes I have real work to do too 15601 2013-11-05 19:17:03 zpao excuses 15602 2013-11-05 19:18:11 balpert zpao: okay, rebased 15603 2013-11-05 19:23:11 zpao balpert: do you know if anythign changed in $.ajax between 1.5 and 1.10? i vaguely remember somebody being a smartass and calling us out on using 1.5 in the tutorial 15604 2013-11-05 19:23:23 zpao (or even, i bet we could drop mentioning the version number totally) 15605 2013-11-05 19:24:39 zpao also, that latest fb comment on the page brings up a good point... 15606 2013-11-05 19:24:43 balpert nothing that I know of but it's been a couple years since I used 1.5 15607 2013-11-05 19:25:35 zpao cool, i'll drop the version number mention entirely... 15608 2013-11-05 19:25:54 balpert I just tested https://github.com/petehunt/react-tutorial/pull/3 and it works fine 15609 2013-11-05 19:26:00 balpert (that uses 1.10) 15610 2013-11-05 19:26:19 petehunt thanks balpert 15611 2013-11-05 19:26:21 petehunt merged 15612 2013-11-05 19:26:27 balpert yay 15613 2013-11-05 19:28:16 zpao petehunt: not yet it isn't :) if you haven't confirmed it yet, i'll just push it with another small commit and avoid the merge 15614 2013-11-05 19:28:40 petehunt zpao: i merged it in react-tutorial (repo of just the code) 15615 2013-11-05 19:28:53 zpao ah gotcha! 15616 2013-11-05 19:29:31 balpert zpao: I think you can --ff 15617 2013-11-05 19:29:40 zpao i can :) 15618 2013-11-05 19:29:46 zpao i like --ff 15619 2013-11-05 19:32:11 sspi SelectEventPlugin - what is useSelect doing there? looks like unfinished code 15620 2013-11-05 19:32:27 sspi (nothing is using it) 15621 2013-11-05 19:33:37 zpao sspi: you appear to be right... let me ask josh (not in here) if he meant to do anything with it 15622 2013-11-05 19:35:20 sspi zpao: seems like we also need more tests in that area? 15623 2013-11-05 19:35:36 sspi (eventPlugins that is) 15624 2013-11-05 19:36:04 zpao yea, probably 15625 2013-11-05 19:37:07 zpao ok, we can kill useSelect. want to make a PR for just that? 15626 2013-11-05 19:37:24 sspi sure, will do :) 15627 2013-11-05 19:37:48 zpao thanks! 15628 2013-11-05 19:38:22 vjeux ok, got all the runs, making the sum now 15629 2013-11-05 19:38:23 vjeux https://gist.github.com/vjeux/7324843 15630 2013-11-05 19:44:14 syranide vjeux: nice! react is fast 15631 2013-11-05 19:47:06 vjeux zpao: https://gist.github.com/vjeux/7324843#comment-944595 15632 2013-11-05 19:47:33 sspi react seems to be very good at deleting :P 15633 2013-11-05 19:48:53 chenglou jQuery/TodoMVC/DeletingAllItems/Sync : 10.760999983176589 ms 15634 2013-11-05 19:48:54 chenglou damn what 15635 2013-11-05 19:49:10 chenglou how does that work 15636 2013-11-05 19:49:20 chenglou vjeux: ^ 15637 2013-11-05 19:49:28 vjeux chenglou: dunno, look at the source code 15638 2013-11-05 19:49:29 petehunt chenglou: $('.completed').remove() or some shit 15639 2013-11-05 19:49:32 vjeux anyway, brb cupcake 15640 2013-11-05 19:49:41 petehunt vjeux: where the cupcakes at!? 15641 2013-11-05 19:49:56 petehunt dammit i have to find vjeux, brb 15642 2013-11-05 19:50:12 syranide petehunt: all items, so I'm guessing more like $("#todos").empty(); 15643 2013-11-05 19:51:52 zpao vjeux: lol 15644 2013-11-05 19:54:44 zpao ide: what's an appropriate amount of time before i de-op you? 15645 2013-11-05 19:54:45 chenglou syranide: https://github.com/WebKit/webkit/blob/master/PerformanceTests/DoYouEvenBench/benchmark.html#L155 15646 2013-11-05 19:54:50 ide zpao: never 15647 2013-11-05 19:55:06 zpao haha, half op? 15648 2013-11-05 19:55:13 ide I already got my hostmask stripped :( 15649 2013-11-05 19:55:26 zpao i saw. you're so unaffiliated now 15650 2013-11-05 19:56:00 petehunt :( 15651 2013-11-05 19:57:16 syranide chenglou: huh, shouldn't be that fast it seems? 15652 2013-11-05 19:58:01 petehunt clear completed will kill them all at once 15653 2013-11-05 19:58:23 chenglou petehunt: looking at the code it seems to be doing it one at time though 15654 2013-11-05 19:58:26 syranide yeah, but it's doing it one by one 15655 2013-11-05 19:58:48 petehunt are you looking at the jquery todomvc source or the benchmark code? 15656 2013-11-05 19:58:49 chenglou and in the todomvc it actually rerenders each time 15657 2013-11-05 19:58:56 chenglou both 15658 2013-11-05 19:59:06 petehunt contentDocument.querySelector('#clear-completed').click(); 15659 2013-11-05 19:59:09 petehunt kills them all i believe 15660 2013-11-05 19:59:15 syranide aha wait I think I get it 15661 2013-11-05 19:59:17 petehunt which will make deleteButtons.length === 0 15662 2013-11-05 20:00:36 chenglou why is there a loop afterward then? 15663 2013-11-05 20:01:34 syranide chenglou: it couldn't be two different implementations or something perhaps? 15664 2013-11-05 20:01:43 syranide are you sure that's the one that was tested? 15665 2013-11-05 20:01:47 petehunt chenglou: dunno, i could be wrong. the guys who wrote the benchmarks aren't really todomvc guys though 15666 2013-11-05 20:02:03 chenglou ok let me test 15667 2013-11-05 20:02:07 petehunt also the benchmark on my site is not the same as the one in webkit. i had to hack it to update todomvc 15668 2013-11-05 20:02:20 petehunt so it's possible jquery fixed it or something 15669 2013-11-05 20:02:49 sspi I got a crazy Idea, maybe not possible - but let's see :) 15670 2013-11-05 20:02:54 vjeux btw, my talk about the diff algorithm has been accepted at http://jsfest.com/ :) 15671 2013-11-05 20:03:05 petehunt yeahhhh vjeux! 15672 2013-11-05 20:03:23 sspi vjeux: awesome! 15673 2013-11-05 20:03:35 chenglou grats =) 15674 2013-11-05 20:04:09 balpert vjeux: is that "Evolution of Experience"? 15675 2013-11-05 20:04:42 vjeux https://github.com/mikeal/jsfest2014-cfp/issues/26 15676 2013-11-05 20:04:47 vjeux React: Why is it so fast? 15677 2013-11-05 20:05:37 balpert I meant which day, sorry 15678 2013-11-05 20:05:51 vjeux i have no idea 15679 2013-11-05 20:06:08 balpert cool 15680 2013-11-05 20:06:14 balpert let me know when you find out so I can come watch! :) 15681 2013-11-05 20:06:17 hojberg awesome 15682 2013-11-05 20:06:23 vjeux will do 15683 2013-11-05 20:10:15 ide I played a bit with ReactTransitionGroup and I think it is directionally correct 15684 2013-11-05 20:11:12 ide one thing I think is worth investigating is making every element support being transitionable 15685 2013-11-05 20:11:54 vjeux petehunt: ^ 15686 2013-11-05 20:11:57 ide e.g. if I'm making a slide deck and want different transitions for the slide going out vs. the slide coming in, the current TransitionGroup model doesn't fit that so well 15687 2013-11-05 20:13:07 chenglou im a bit worried about going in the direction of just using css for animation though, it's very... static 15688 2013-11-05 20:15:03 balpert chenglou: +1, I've been meaning to look at adding JS support to TransitionGroup 15689 2013-11-05 20:15:10 balpert even just for, like, slideUp() 15690 2013-11-05 20:15:25 ide might be useful to let people pass in callbacks with some guardrails (e.g. try-catch around the callbacks so that even if they throw, React will eventually add/remove the element) 15691 2013-11-05 20:15:44 chenglou balpert: I'm testing a mixin for this, I'll clean the code and let you check, it's not complicated 15692 2013-11-05 20:15:52 chenglou (beside unmounting but yeah, sec) 15693 2013-11-05 20:51:05 petehunt balpert: ide: chenglou: feel free to hack on ReactTransitionGroup. the original goal was to clone ng-animate and doing so required a lot of work to handle exit animations. now that it's done let's see what new stuff we can build with it! 15694 2013-11-05 21:01:50 balpert petehunt: yup! glad you got exit animations to work 15695 2013-11-05 21:03:22 balpert I feel bad because I haven't had a chance to really use it yet 15696 2013-11-05 21:59:33 sspi btw. within ReactTextComponent there is receiveProps function which has a transaction value that isn't used, but the method signature is the same as the one from ReactComponent - this is on purpose right? 15697 2013-11-05 22:01:20 zpao yup, though i suppose we could leave that off in RextComponent, it will get called with it though 15698 2013-11-05 22:04:22 sspi PR: Rename everything that is called React with Rext 15699 2013-11-05 22:04:25 sspi :P 15700 2013-11-05 22:06:11 sspi btw. I also want to remove another unused value 15701 2013-11-05 22:06:24 zpao keep the PRs coming :) 15702 2013-11-05 22:07:01 sspi will do :) 15703 2013-11-05 22:15:26 petehunt zpao: want to take my blog post? :) 15704 2013-11-05 22:17:55 zpao petehunt: i haven't read it but others have, so just push it? i'll update the site after 15705 2013-11-05 22:18:02 vjeux push it! 15706 2013-11-05 22:18:25 zpao vjeux: want some time between posts or push yours out with it? 15707 2013-11-05 22:18:36 zpao also, order? 15708 2013-11-05 22:18:48 vjeux i don't care 15709 2013-11-05 22:18:54 vjeux either way is fine 15710 2013-11-05 22:19:38 petehunt ok 15711 2013-11-05 22:19:51 vjeux sspi: do you have a script that checks for unused variables? 15712 2013-11-05 22:20:21 sspi webstorm has an inspect code tool :) 15713 2013-11-05 22:20:28 zpao sspi: can you make that latest PR off master instead of off your other branch? it has both sets of changes. or just wait for the other to merge and then rebase 15714 2013-11-05 22:21:03 sspi yeah I noticed something went wrong... 15715 2013-11-05 22:21:14 sspi ah alright, let's retry :) 15716 2013-11-05 22:23:26 petehunt zpao: argh, i can't get my blog post to show up :( 15717 2013-11-05 22:23:36 petehunt it was working then i renamed the file. any ideas? 15718 2013-11-05 22:23:40 petehunt (to change the date) 15719 2013-11-05 22:23:42 zpao kill the serve 15720 2013-11-05 22:23:54 zpao then start it 15721 2013-11-05 22:23:58 petehunt did 15722 2013-11-05 22:24:29 zpao look at _site/blog/... to make sure the file is there 15723 2013-11-05 22:24:36 petehunt oh nm, i borked the file ext 15724 2013-11-05 22:24:44 zpao smooth move ex lax 15725 2013-11-05 22:26:38 petehunt zpao: wanna deploy? 15726 2013-11-05 22:27:18 zpao ffffsss should have told you to squash 15727 2013-11-05 22:27:37 petehunt zpao: i can squash master if you want 15728 2013-11-05 22:27:43 zpao it's too late 15729 2013-11-05 22:27:49 petehunt push -f? 15730 2013-11-05 22:27:53 zpao nope 15731 2013-11-05 22:28:04 zpao though it's probably quick enough... 15732 2013-11-05 22:28:34 zpao i'll cherrypick and squash, nbd 15733 2013-11-05 22:29:36 zpao or just copy the file... 15734 2013-11-05 22:44:33 chenglou petehunt: syranide ok checked the bench for jquery 15735 2013-11-05 22:44:38 chenglou the loop isn't called 15736 2013-11-05 22:44:45 syranide aha 15737 2013-11-05 22:44:50 syranide that explains it ^^ 15738 2013-11-05 22:45:15 chenglou so yeah petehunt was right, the click does it 15739 2013-11-05 22:45:20 chenglou shouldn't this be a bug? 15740 2013-11-05 22:45:29 syranide it should be 15741 2013-11-05 22:45:39 syranide doesn't really seem like a fair comparison 15742 2013-11-05 22:48:21 syranide been working a bit more on the "configurable input field", http://dev.cetrez.com/jsx/ ... seems like it should be possible to design a small set of functions, that can accomplish pretty cool things with just a few lines of code 15743 2013-11-05 22:51:43 tomocchino petehunt: lol@DoYouEvenBench 15744 2013-11-05 22:51:48 tomocchino oh man 15745 2013-11-05 22:51:50 tomocchino great name 15746 2013-11-05 22:52:00 petehunt tomocchino: i wish i could claim credit for that. it's a webkit guy 15747 2013-11-05 22:52:09 petehunt rniwa.com 15748 2013-11-05 22:52:09 tomocchino props to webkit guy 15749 2013-11-05 22:53:52 vjeux grr, we need to make the h2 black, they look really ugly in red 15750 2013-11-05 22:54:26 sspi zpao: out of curiosity, where is it being used? #479? 15751 2013-11-05 22:57:01 zpao vjeux: fixing 15752 2013-11-05 22:57:10 vjeux zpao: you rock 15753 2013-11-05 22:57:37 balpert zpao: does anyone override updateComponent? last I heard, no one did 15754 2013-11-05 22:58:34 zpao balpert: sspi: i don't think anybody currently does, but until we say they can't, we can't remove that variable (At least not from the call, i guess we could remove it from the function itself right now) 15755 2013-11-05 22:59:06 petehunt zpao: maybe we should constrain it now 15756 2013-11-05 22:59:19 petehunt before someone uses it 15757 2013-11-05 22:59:42 zpao i haven't actually checked internally, at least not recently. worth looking 15758 2013-11-05 23:03:46 sspi nice :) 15759 2013-11-05 23:04:06 syranide lbljeffmo: reject the pull request and I'll create a new fresh one? 15760 2013-11-05 23:05:36 lbljeffmo syranide: ok I can do that -- sorry for being so slow on the reivew. We use that xjs.js file in a couple esoteric/untested places internally, so I'm going through right now and testing as much as I can to make sure its still compatible with all the other stuff 15761 2013-11-05 23:06:26 syranide lbljeffmo: no problem, I realize that it's a breaking change as well (are you satisfied with the final rules, any changes?) 15762 2013-11-05 23:08:50 lbljeffmo syranide: they make sense to me, and no one else has spoken up with objections so... We do still need to have an answer for automated refactoring of broken callsites though 15763 2013-11-05 23:09:24 lbljeffmo syranide: in the past we've used benjamn's recast project to build a script to do the refactoring code transformation 15764 2013-11-05 23:09:25 syranide lbljeffmo: great, I'll fix a new pull request then 15765 2013-11-05 23:10:45 syranide lbljeffmo: I guess one has to make a few assumptions though to make it work, seeing as it adds a lot of unintentional white-space today (although, having it be carried over isn't necessarily bad I guess) 15766 2013-11-05 23:12:56 lbljeffmo yea, carrying it over should only expose oddities when looking over the changes as a result of the refactoring script -- people could just decide if the carry-over is desirable or not when reviewing the results of the changes 15767 2013-11-05 23:15:27 syranide yeah, sounds reasonable... regarding recast, I'm guessing there's an issue with running it over JSX files? or do you guys already have that "fixed"? 15768 2013-11-05 23:16:08 zpao nope. recast uses vanilla esprima, not our branch (last i checked) 15769 2013-11-05 23:16:25 zpao (nope to "already have that fixed?") 15770 2013-11-05 23:17:07 lbljeffmo syranide: I think you just need to swap out it's dependencies on "esprima" in favor of "esprima-fb" 15771 2013-11-05 23:17:38 lbljeffmo there may be a few other little things too (like registering some of the XJS types with ast-types -- but benjamn would be best suited to answer that 15772 2013-11-05 23:18:22 syranide lbljeffmo: would it perhaps be easy to just change the current parser to just output XJS back out? I could easily just hijack that then 15773 2013-11-05 23:19:03 lbljeffmo also also (back to your original PR): it seems this test is failing to aprse: https://github.com/facebook/react/blob/master/src/core/__tests__/ReactDOMComponent-test.js because line 187 is now transforming from `var stub = ReactTestUtils.renderIntoDocument(
);` -> `var stub = ReactTestUtils.renderIntoDocument(React.DOM.div( {value:} ));` 15774 2013-11-05 23:19:23 lbljeffmo syranide: that's fine with me -- however you want to implement the script is up to you, as long as it works :) 15775 2013-11-05 23:19:25 syranide lbljeffmo: oh, I'll make sure to fix that 15776 2013-11-05 23:38:45 syranide bah cuuuuhrap 15777 2013-11-05 23:38:48 syranide or 15778 2013-11-05 23:39:27 syranide how did my other account "cetrez" get the commit? :S 15779 2013-11-05 23:39:51 lbljeffmo weird 15780 2013-11-05 23:40:55 lbljeffmo possibly something to do with the git credentials you used to commit with? (grasping at straws...) 15781 2013-11-05 23:41:20 syranide lbljeffmo: anyway, I fixed the bug above as well, if you can, be on the lookout for weird output, there are 1 or 2 things I'm not entirely sure about in the parser (what can "start" actually contain?) 15782 2013-11-05 23:42:32 krs hm, the docs say all properties and attributes should be camel cased, but that is not the case for data-atributes right? 15783 2013-11-05 23:42:47 krs the paragraph maybe should mention that 15784 2013-11-05 23:43:00 petehunt chenglou: ^^ wanna take that? 15785 2013-11-05 23:43:09 petehunt multiple people have been confused by that 15786 2013-11-05 23:46:29 lbljeffmo syranide: looks like you might not be doing utils.catchup() somewhere for the closing paren on React.DOM() output -- lots of tests failing as a result of this now... 15787 2013-11-05 23:46:44 syranide lbljeffmo: hmm 15788 2013-11-05 23:46:58 lbljeffmo (see the Travis CI build output) 15789 2013-11-05 23:47:40 lbljeffmo one random example file you can look at is https://github.com/facebook/react/blob/master/src/core/__tests__/ReactInstanceHandles-test.js (look at line 36 before and after transformation) 15790 2013-11-05 23:47:41 syranide lbljeffmo: that's weird, I don't see that anywhere in your file? 15791 2013-11-05 23:47:50 syranide xjs.js 15792 2013-11-05 23:48:38 lbljeffmo sorry, utils.catchup() is not what you want -- the utils.append() of the closing paren is what I should've said 15793 2013-11-05 23:48:49 syranide ah :) 15794 2013-11-05 23:48:50 chenglou petehunt: sure, in cookbook or docs 15795 2013-11-05 23:49:04 petehunt krs: which page was confusing? 15796 2013-11-05 23:50:40 syranide lbljeffmo: ah no, apparently the last fix wasn't a fix :) 15797 2013-11-05 23:53:14 petehunt zpao: can you reroll? ^^ 15798 2013-11-06 00:03:04 syranide this is really weird, I'm pushing my changes as "syranide", but they appear as "cetrez" in github 15799 2013-11-06 00:03:57 balpert syranide: github matches based on email 15800 2013-11-06 00:04:06 balpert what does 'git config user.email' give you? 15801 2013-11-06 00:04:19 syranide oh, but all my previous commits were on syranide, and I haven't changed anything, oh well :) 15802 2013-11-06 00:04:52 syranide aha, yeah, I supplied my cetrez.email 15803 2013-11-06 00:04:58 syranide balpert: thanks :) 15804 2013-11-06 00:05:13 balpert np 15805 2013-11-06 00:18:09 zpao petehunt: andreypopp: done. thanks fir the fix! 15806 2013-11-06 00:29:02 syranide lbljeffmo: FYI, I've commited a fix for the issue and Travis CI is passing now 15807 2013-11-06 01:20:01 petehunt vjeux: http://genesis-skeleton.com/ 15808 2013-11-06 01:24:43 vjeux First-class support for AngularJS & ReactJS 15809 2013-11-06 01:24:44 vjeux yay! 15810 2013-11-06 01:26:39 vjeux have anyone seen pickels recently? 15811 2013-11-06 01:27:11 vjeux http://sproutsheet.site44.com/ 15812 2013-11-06 01:27:16 vjeux this is pretty cool and i want to feature it :p 15813 2013-11-06 01:29:30 brainkim ACTION facepalms at genesis-skeleton 15814 2013-11-06 01:29:38 brainkim ACTION so wow at sproutsheet 15815 2013-11-06 01:30:58 vjeux brainkim: do you mind if i feature http://codepen.io/brainkim/pen/FECGb in the next roundup? 15816 2013-11-06 01:31:00 vjeux this is pretty cool 15817 2013-11-06 01:31:51 petehunt yeah wow this is legit 15818 2013-11-06 01:32:35 vjeux chenglou: do you have an updated version of this? http://jsfiddle.net/chenglou/z6C4p/ 15819 2013-11-06 01:33:14 vjeux ok, i have already 11 cool stuff to feature in the next roundup 15820 2013-11-06 01:33:19 vjeux going to write another one pretty soon :p 15821 2013-11-06 01:33:41 brainkim vjeux: My pleasure. I think people will use react more if they see a lot of cool visual examples. Maybe you guys could create a playground website? 15822 2013-11-06 01:34:01 vjeux brainkim: feel free to setup something :) 15823 2013-11-06 01:34:14 brainkim vjeux: Sorta like mbostock's bl.ocks.org 15824 2013-11-06 01:34:26 vjeux i'm trying to show off interesting things written in react in the blog 15825 2013-11-06 01:36:14 brainkim vjeux: Blergh definitely. I'd say if React has an ecological niche, it's in visually stunning shit. Let angular have the simple CRUD apps. 15826 2013-11-06 01:41:56 chenglou vjeux: yeah https://github.com/chenglou/react-lights-out 15827 2013-11-06 01:43:00 vjeux chenglou: add a github link here: http://rawgithub.com/chenglou/react-lights-out/master/index.html 15828 2013-11-06 01:43:34 chenglou vjeux: ? 15829 2013-11-06 01:43:39 chenglou ah to the repo 15830 2013-11-06 01:43:42 vjeux yup 15831 2013-11-06 01:43:49 vjeux i'm going to link the demo 15832 2013-11-06 01:43:56 chenglou =D 15833 2013-11-06 01:44:02 vjeux so if you want people to know about the github, add a link p 15834 2013-11-06 01:49:03 chenglou vjeux: thanks, added a fork ribbon 15835 2013-11-06 01:55:26 lbljeffmo syranide: awesome. Need to head home, but I'll take another look tomorrow. Thanks for digging in to this 15836 2013-11-06 02:14:45 balpert petehunt: are your screenshots supposed to be giant? 15837 2013-11-06 02:15:09 balpert on http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html 15838 2013-11-06 02:15:23 petehunt balpert: that's just how they come out on retina 15839 2013-11-06 02:15:27 balpert yeah, I know 15840 2013-11-06 02:15:31 balpert retina displays are awesome :) 15841 2013-11-06 02:15:38 petehunt balpert: i could 50% them but i thought it looked ok 15842 2013-11-06 02:15:47 balpert k 15843 2013-11-06 02:16:01 petehunt dont feel very strongly about this at all though. 15844 2013-11-06 02:18:17 petehunt balpert: do you know of any awesome native mobile interactions that no one has done on web? 15845 2013-11-06 02:21:17 lbljeffmo petehunt: candy crush? 15846 2013-11-06 02:24:59 brainkim petehunt: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/devicemotion This would be incredible. 15847 2013-11-06 02:25:36 balpert iOS 7 home screen with parallax? 15848 2013-11-06 02:25:43 balpert that's probably hard to do fast 15849 2013-11-06 02:26:40 chenglou balpert: according to jony Ive it's unbelievably more complicated than we think 15850 2013-11-06 02:27:09 chenglou I want a UIKitDynamics.js 15851 2013-11-06 02:27:14 lbljeffmo parallax, by BBC: http://www.bbc.co.uk/news/entertainment-arts-20026367 15852 2013-11-06 02:27:32 lbljeffmo (performs pretty terribly for me on a retina mbp though) 15853 2013-11-06 02:28:37 petehunt nooooo not parallax scrolling 15854 2013-11-06 02:28:45 petehunt would people be satisfied with coverflow? 15855 2013-11-06 02:28:57 petehunt i want something that people would find useful in the community as wel 15856 2013-11-06 02:28:59 chenglou petehunt: five-finger pinch 15857 2013-11-06 02:29:10 chenglou edge swipe 15858 2013-11-06 02:29:22 petehunt chenglou: how about something that's not impossible :P 15859 2013-11-06 02:29:23 vjeux petehunt: yeah, would be nice to make them smaller and center them 15860 2013-11-06 02:29:43 vjeux use
...
to center them 15861 2013-11-06 02:30:23 lbljeffmo petehunt: doom3? 15862 2013-11-06 02:30:23 lbljeffmo ok ok I'll stop 15863 2013-11-06 02:30:46 petehunt lbljeffmo: har har har 15864 2013-11-06 02:30:55 petehunt i already did wolfenstein (from the 90s) 15865 2013-11-06 02:31:29 lbljeffmo yea I saw -- cool, but like...needs actual shaders 15866 2013-11-06 02:31:44 lbljeffmo :p 15867 2013-11-06 02:32:09 petehunt lbljeffmo: did you see my sweet coverflow demo 15868 2013-11-06 02:32:20 lbljeffmo no? where 15869 2013-11-06 02:32:30 petehunt lbljeffmo: do you have an iphone 5 (hardcoded dimensions) 15870 2013-11-06 02:32:32 vjeux ide: about transition group, can't you add a different class on each element with a different transition you care about? 15871 2013-11-06 02:32:42 lbljeffmo yes 15872 2013-11-06 02:32:49 vjeux petehunt: show show show 15873 2013-11-06 02:32:50 petehunt http://petehunt.net/react-photos-beta 15874 2013-11-06 02:32:53 petehunt vjeux: youve seen 15875 2013-11-06 02:32:55 ide vjeux: like .foo-transition-enter.elem1? 15876 2013-11-06 02:32:58 ide yeah I guess so 15877 2013-11-06 02:32:59 petehunt now it just has a fps counter 15878 2013-11-06 02:33:32 ide I think it'd be nice if transition groups didn't introduce a wrapper element (fragments, please) 15879 2013-11-06 02:33:44 vjeux ide: yes 15880 2013-11-06 02:33:46 lbljeffmo hot damn 15881 2013-11-06 02:34:01 vjeux petehunt: but it doesn't have 3d effects :( 15882 2013-11-06 02:34:03 lbljeffmo I am seeing slightly jerkiness, but doesn't seem to affect the fps counter though 15883 2013-11-06 02:34:06 petehunt OH 15884 2013-11-06 02:34:07 petehunt Oops 15885 2013-11-06 02:34:18 petehunt lbljeffmo: refresh 15886 2013-11-06 02:34:36 petehunt had the old version 15887 2013-11-06 02:35:03 lbljeffmo I refreshed and still seeing a bit of jerkiness...but iphone browser cache is literally cat poop 15888 2013-11-06 02:35:26 lbljeffmo so not sure if I got new version? 15889 2013-11-06 02:35:37 lbljeffmo its not terrible though -- very subtle 15890 2013-11-06 02:36:06 balpert wow that is beautiful 15891 2013-11-06 02:36:11 balpert easing feels off though 15892 2013-11-06 02:36:17 vjeux woow, 3d animations now :p 15893 2013-11-06 02:36:48 lbljeffmo balpert: are you seeing super subtle jitter during the easing? that's when I notice it 15894 2013-11-06 02:36:52 vjeux yeah petehunt isn't good at easing :p 15895 2013-11-06 02:37:09 vjeux lbljeffmo: i think it's the easing function that sucks 15896 2013-11-06 02:37:13 vjeux not so much a jitter 15897 2013-11-06 02:37:19 balpert yeah, not sure if it's just the easing 15898 2013-11-06 02:37:35 lbljeffmo possibly -- pretty hard to tell 15899 2013-11-06 02:37:39 lbljeffmo the ease is inconsistent for me though 15900 2013-11-06 02:38:09 lbljeffmo (the jitter in the curve, that is) 15901 2013-11-06 02:38:14 vjeux if you rotate the phone, the browser is resizing a lot and it's slooooow 15902 2013-11-06 02:38:34 ide petehunt: slick demo 15903 2013-11-06 02:38:37 ide works great on a 5s 15904 2013-11-06 02:38:38 lbljeffmo (y) 15905 2013-11-06 02:38:39 petehunt ide: thanks 15906 2013-11-06 02:38:41 petehunt so 15907 2013-11-06 02:38:58 petehunt i haven't decided on the easing parameters yet :) 15908 2013-11-06 02:39:08 lbljeffmo I'm impressed -- but I'm sure mickj wouldn't be 15909 2013-11-06 02:39:27 petehunt lbljeffmo: i mean with the right parameters itll look good 15910 2013-11-06 02:39:47 petehunt there are a few dropped frames (gc, DOM or paint… not sure) but not noticeable that much 15911 2013-11-06 02:39:48 balpert anyone want to disassemble UIKit and figure out the easing? 15912 2013-11-06 02:39:49 lbljeffmo it does look good 15913 2013-11-06 02:39:50 lbljeffmo srsly 15914 2013-11-06 02:40:04 vjeux yeah 15915 2013-11-06 02:40:27 petehunt it's kinda cool because it is windowing (only 3 photos in teh dom at any given time), *however* once you go above a certain number of images you blow out the texture memory 15916 2013-11-06 02:40:30 lbljeffmo hard to tell if the dramatic black backdrop is biasing my opinion though 15917 2013-11-06 02:40:45 petehunt but even when you do that you can still get 30-45fps 15918 2013-11-06 02:41:01 petehunt also gets 30fps with no changes on my ZTE open firefox os phone (hell yeah!) 15919 2013-11-06 02:41:07 vjeux petehunt: when i rotate my phone and start swiping, the fps gets really bad for a while 15920 2013-11-06 02:41:11 vjeux then it is ok again 15921 2013-11-06 02:41:11 lbljeffmo lets see what happens if we try it on an old-school ipod touch 15922 2013-11-06 02:41:20 petehunt lbljeffmo: lol, see ya later 15923 2013-11-06 02:41:36 lbljeffmo have you tried? do you know what the memory footprint is? 15924 2013-11-06 02:41:39 lbljeffmo I was only half trolling 15925 2013-11-06 02:42:01 vjeux you should also test on a galaxy y 15926 2013-11-06 02:42:03 petehunt i've just heard that one of the ipod touches (first gen? first retina?) was like, the hardest mobile web device to get good 15927 2013-11-06 02:42:15 vjeux (gingerbread) 15928 2013-11-06 02:42:24 vjeux i have two on my desk if you need 15929 2013-11-06 02:42:24 petehunt btw i tested on a nexus 4… it's like 30-40 fps 15930 2013-11-06 02:42:26 lbljeffmo yea it crashed nonstop for us when working on mobile timeline 15931 2013-11-06 02:42:45 lbljeffmo and that was just mobile timeline 15932 2013-11-06 02:43:00 lbljeffmo 30-40 is pretty damn good 15933 2013-11-06 02:43:11 lbljeffmo when can we upvote this on hacker news? 15934 2013-11-06 02:43:27 petehunt lbljeffmo: when i complete my insidious plan 15935 2013-11-06 02:43:34 balpert first retina I think had no more memory than the previous model so it was really slow 15936 2013-11-06 02:43:43 vjeux petehunt: have you tried sending images that are not the exact dimensions of the screen, that needs browser resizing? 15937 2013-11-06 02:43:49 petehunt $('#xyz').coverflow() 15938 2013-11-06 02:44:02 petehunt vjeux: no but i dont think it would affect it since i'm pretty sure the textures are cached 15939 2013-11-06 02:44:10 petehunt the instant they get evicted though…you're fucked 15940 2013-11-06 02:44:31 vjeux it's near impossible to get the proper dimensions of the browser 15941 2013-11-06 02:44:34 petehunt lbljeffmo: ide: vjeux: btw protip, i can say with almost total certainty that, despite conventional wisdom, data uris perform way, way better than https for some reason 15942 2013-11-06 02:44:44 petehunt balpert: ^^ 15943 2013-11-06 02:44:49 petehunt (on iphone 5 anyway) 15944 2013-11-06 02:44:57 ide I wonder if the network stack runs on the same thread 15945 2013-11-06 02:45:00 ide wouldn't be surprised 15946 2013-11-06 02:45:22 ide I wish they would parallelize more of that e.g. parsing, initial JITing, etc 15947 2013-11-06 02:45:31 petehunt ide: i think the way they cache textures is different for data URIs b/c even when the images were all fetched and cached it was still worse 15948 2013-11-06 02:45:35 balpert petehunt: interesting. 15949 2013-11-06 02:45:43 petehunt (i.e. black squares / dropped frames) 15950 2013-11-06 02:46:21 ide could be that the data-uris are read from an in-memory JS/CSS string while evicted images need to be read off of flash disk 15951 2013-11-06 02:46:28 petehunt oooo 15952 2013-11-06 02:46:37 ide and by textures, do you mean decoded images? 15953 2013-11-06 02:46:43 petehunt decoded and resized 15954 2013-11-06 02:47:02 ide I think you should just buy everyone a 5s 15955 2013-11-06 02:47:07 balpert petehunt: if the files don't all fit in memory though then data URIs are presumably a bad idea 15956 2013-11-06 02:47:11 ide $299 * 1.2B = do ittttt 15957 2013-11-06 02:47:17 petehunt internet.org that shit! 15958 2013-11-06 02:48:13 petehunt more seriously, i want to see if i can package this into a jquery plugin that performs OK and hacker news it 15959 2013-11-06 02:49:25 lbljeffmo petehunt: we did test datauris vs https at one point and we found the opposite to be true -- but that had to have been > a year ago, and things have very likely changed. I wonder what that optimization looks like across the board for other devices too 15960 2013-11-06 02:49:39 petehunt lbljeffmo: i'm curious how you tested it 15961 2013-11-06 02:50:01 petehunt lbljeffmo: there is a widely-cited blog post and their methodology was to measure Image onload time in production 15962 2013-11-06 02:50:11 petehunt which fires *before* decode, resize and paint 15963 2013-11-06 02:50:16 lbljeffmo I didnt, but I can probably dig out the diff -- it was part of a series of tests for m:image 15964 2013-11-06 02:50:29 lbljeffmo yea I think I've skimmed that post before 15965 2013-11-06 02:51:16 lbljeffmo aight I gotta run -- petehunt srsly, very cool 15966 2013-11-06 02:51:32 petehunt lbljeffmo: see ya. keep in mind i didn't really do anything special, just regular declarative react :) 15967 2013-11-06 02:51:38 vjeux petehunt: is the jquery plugin going to use react? 15968 2013-11-06 02:51:41 petehunt yes! 15969 2013-11-06 02:51:44 petehunt it's our trojan horse! 15970 2013-11-06 02:51:46 vjeux ok, good :p 15971 2013-11-06 02:52:48 petehunt i just want to make sure that when people try it it looks great on all devices. so i need to decide if i want to include petehunt-secret-epic-jpeg-decoder-web-worker-and-incremental-canvas-painter-with-request-animation-frame.js 15972 2013-11-06 02:54:54 chenglou petehunt: didn't you say it was too slow? 15973 2013-11-06 02:55:28 petehunt chenglou: yeah, but it's the type of slow that people may blame on crappy networks, not drop-frames-with-no-control-over-it slow 15974 2013-11-06 02:56:24 vjeux balpert: oh thanks, i didn't notice they were hosted on imgur 15975 2013-11-06 02:57:58 chenglou petehunt: I guess illusion of fast is everything 15976 2013-11-06 02:58:10 vjeux chenglou: you've got to have both :) 15977 2013-11-06 02:58:24 petehunt chenglou: this is one of those fundamental limitations of the web 15978 2013-11-06 02:58:38 petehunt well, current browser implementations 15979 2013-11-06 02:58:45 petehunt rumor has it it's fixed in blink 15980 2013-11-06 03:00:04 vjeux @pamelafox 3h 15981 2013-11-06 03:00:04 vjeux The React docs are good, but there are woefully few results for React-related Google queries. So, plz start blogging/gisting your solutions. 15982 2013-11-06 03:00:13 vjeux chenglou: gogo ship the cookbook :p 15983 2013-11-06 03:00:26 chenglou vjeux: everything's in zpao's hands now! 15984 2013-11-06 03:00:34 vjeux zpao|away: zpao|cloud: gogogo 15985 2013-11-06 03:01:49 chenglou petehunt: what about desktop/mobile safari 15986 2013-11-06 03:02:32 petehunt chenglou: dunno, apple doesn't go to web conferences 15987 2013-11-06 03:02:41 chenglou =( 15988 2013-11-06 03:05:03 balpert I should ask her more about what she was confused about 15989 2013-11-06 03:05:04 chenglou someone should buy a wwdc ticket and go interrogate them 15990 2013-11-06 03:06:28 chenglou wait, _I_ should buy a ticket and interrogate them 15991 2013-11-06 03:09:20 petehunt chenglou: it is funny b/c webkit on ios is so far ahead of blink on android (at least on 1 year old phones) yet apple gets (deserved) shit for crippling the web 15992 2013-11-07 19:12:20 vjeux . 15993 2013-11-07 19:12:29 vjeux ok this is refreshed 15994 2013-11-07 19:12:42 vjeux i need to spend more time digging into why it's not staying up -_- 15995 2013-11-07 19:24:42 syranide petehunt: you there? 15996 2013-11-07 19:25:23 petehunt syranide: heyo 15997 2013-11-07 19:25:43 syranide petehunt: I'm not sure if I understand your response, they are all fixed strings, so it shouldn't matter? 15998 2013-11-07 19:25:59 syranide it would never do " " + x + " " 15999 2013-11-07 19:27:12 petehunt syranide: right but it does make it a little less trivial to think about 16000 2013-11-07 19:27:22 petehunt and the keys of children will change 16001 2013-11-07 19:27:31 petehunt syranide: what's the advantage? 16002 2013-11-07 19:27:56 syranide petehunt: less spans are generated, and I don't see how the keys change, yes they change as a result of this transformation, but they never change at runtime 16003 2013-11-07 19:28:21 petehunt right... like i said, don't feel super strongly about it 16004 2013-11-07 19:28:26 syranide ^^ 16005 2013-11-07 19:28:30 balpert syranide: I guess the unclear thing to me is, why would you put in literal strings like that in the first place? 16006 2013-11-07 19:29:12 syranide balpert: because of whitespace rules mostly, they don't "solve every case", so sometime you have to override/force them with {'\\n'} etc 16007 2013-11-07 19:29:38 syranide balpert: and ONE {' '} cause the span to split in 3 16008 2013-11-07 19:29:43 syranide *cuases 16009 2013-11-07 19:29:45 syranide *causes! 16010 2013-11-07 19:29:58 balpert so what span would you split with a space like that? 16011 2013-11-07 19:30:27 syranide balpert: today "A{' '}B" generates "A B" 16012 2013-11-07 19:30:38 syranide with my PR it generates "A B" 16013 2013-11-07 19:30:41 balpert but why would you write that instead of "A B"? 16014 2013-11-07 19:31:37 zpao Hello {nameWithSpaces}! 16015 2013-11-07 19:31:40 syranide balpert: that was just a bad example, but consider today if you want to insert a newline or additional spaces, the only way to do that is with {' '} or {'\\n'} 16016 2013-11-07 19:32:01 balpert zpao: this pull request doesn't change variables though 16017 2013-11-07 19:32:11 balpert (and it can't, because how could it know if it's a string or not?) 16018 2013-11-07 19:32:14 zpao ACTION hasn't looked closely 16019 2013-11-07 19:32:25 syranide it ONLY concatenates {''} and {""} 16020 2013-11-07 19:32:26 syranide nothing else 16021 2013-11-07 19:32:47 zpao oh 16022 2013-11-07 19:34:06 petehunt syranide: could you update the PR with some more context 16023 2013-11-07 19:34:12 syranide petehunt: will do :) 16024 2013-11-07 19:34:29 petehunt thanks, you rock 16025 2013-11-07 20:07:31 balpert syranide: okay, new question then 16026 2013-11-07 20:07:37 syranide balpert: shoot :) 16027 2013-11-07 20:07:39 balpert why would you want the children to be 'A\\nB'? 16028 2013-11-07 20:07:59 syranide balpert: white-space: pre 16029 2013-11-07 20:08:24 syranide petehunt: FYI, I've updated the description in the PR 16030 2013-11-07 20:13:19 syranide balpert: https://github.com/facebook/react/pull/489 16031 2013-11-07 20:13:50 balpert yes, I saw 16032 2013-11-07 20:40:29 sspi I just updated my PR for on demand events - so shoot! :P 16033 2013-11-07 20:41:06 sspi I removed touchNotMouse, and I want to re-add it 16034 2013-11-07 20:41:29 sspi but I want to add it at the eventPlugin level 16035 2013-11-07 20:44:35 sspi that way you can set dependencies the right way, instead of having dependencies on both mouse and touch 16036 2013-11-07 20:48:06 balpert sspi: that makes sense to me 16037 2013-11-07 20:48:16 balpert SimpleTouchEventPlugin or something 16038 2013-11-07 20:51:13 sspi balpert: I was thinking more in the direction of having a useTouchEvents available within the eventPlugin 16039 2013-11-07 20:51:21 sspi s 16040 2013-11-07 20:53:26 balpert yeah, you could do either 16041 2013-11-07 20:56:05 sspi ok 16042 2013-11-07 20:56:10 balpert if it works, I think extracting to a separate plugin makes a lot of sense 16043 2013-11-07 21:04:27 sspi balpert: the plugin would basically do what initializeTouchEvents does now? 16044 2013-11-07 21:05:36 sspi which is setting useTouchEvents 16045 2013-11-07 21:07:09 balpert no, I meant that SimpleEventPlugin would never listen to touch events 16046 2013-11-07 21:07:17 balpert and if you want touch events you need to add a different plugin 16047 2013-11-07 21:07:27 sspi so no TapEventPlugin? 16048 2013-11-07 21:09:10 balpert TapEventPlugin would depend on TouchEventPlugin? 16049 2013-11-07 21:09:14 balpert if you can do that? 16050 2013-11-07 21:09:19 balpert I didn't look at your code yet 16051 2013-11-07 21:09:52 sspi nah, don't think it can with the current solution :) 16052 2013-11-07 21:20:19 sspi crap - tried to order a laptop, paid and afterwards was rewarded with js errors and no confirmation email or anything 16053 2013-11-07 21:21:38 sspi balpert: I do like your idea :) 16054 2013-11-07 21:21:40 balpert :) 16055 2013-11-07 21:21:49 balpert seems unlikely the order went through if you didn't get an email 16056 2013-11-07 21:22:08 sspi my bank account says otherwise 16057 2013-11-07 21:22:33 balpert hmm 16058 2013-11-07 21:26:15 sspi added discussion to the PR 16059 2013-11-07 21:53:27 hojberg whats the crazy option to be able to be able to put html in {}? 16060 2013-11-07 21:53:56 hojberg its like 'insertDangerousHTML=true' or something lol ? 16061 2013-11-07 21:54:55 pieterv close :)
16062 2013-11-07 21:55:01 pieterv http://facebook.github.io/react/docs/jsx-gotchas.html 16063 2013-11-07 21:55:02 hojberg gotcha 16064 2013-11-07 21:55:17 hojberg thanks :D 16065 2013-11-07 21:55:22 pieterv no worries :) 16066 2013-11-07 21:55:27 balpert why that's on the JSX page, I have no idea 16067 2013-11-07 21:56:16 pieterv it kinda makes sense under 'gotchas' 16068 2013-11-07 21:56:35 sspi yup 16069 2013-11-07 22:02:12 sspi balpert: I'm having second thoughts on the eventplugin dependencies 16070 2013-11-07 22:02:30 sspi to other eventplugins 16071 2013-11-07 22:04:07 sspi even with these dependencies there needs to be some mechanism to decide which events need to be loaded and which not 16072 2013-11-07 22:07:01 balpert right, it was not 100% clear in my mind when I was thinking about it a month or so ago 16073 2013-11-07 22:07:05 balpert which is why I never finished my diff 16074 2013-11-07 22:07:32 balpert :) 16075 2013-11-07 22:11:33 sspi added to the PR also 16076 2013-11-07 22:11:56 sspi balpert: thanks for the feedback and ideas! 16077 2013-11-07 22:12:05 sspi I'm off 16078 2013-11-08 05:28:32 sspi I'm looking at hasSelectionCapabilities... why is that looking at the REAL dom? 16079 2013-11-08 12:29:32 asbjorn hi guys! working on a a nested react component... I want to remove a child comp... I see two options, passing the parent as a prop and using that setState... or doing a this.getDOMNode().remove() on the child...? 16080 2013-11-08 12:29:36 asbjorn comments...? 16081 2013-11-08 12:30:02 asbjorn am I being silly? :-P 16082 2013-11-08 12:30:11 syranide asbjorn: uuh, why do you want to remove the child? 16083 2013-11-08 12:30:23 syranide asbjorn: if it only should be visible at certain times, then it should rely on a state 16084 2013-11-08 12:31:59 asbjorn uhm, well, it's a list of items... when adding a new item I add an special list node with input fields... if use writes noting or clicks esc I want to remove that child... 16085 2013-11-08 12:32:37 syranide asbjorn: do you always put it at the bottom, or can it be anywhere? 16086 2013-11-08 12:32:46 syranide (or top) 16087 2013-11-08 12:32:50 asbjorn top 16088 2013-11-08 12:33:15 asbjorn so I just thought I'd pop state.items 16089 2013-11-08 12:33:22 syranide asbjorn: to me it seems like having a state "shouldShowInput" (or whatever) seems like the best solution, and you simply enable that when the user want to create a new one 16090 2013-11-08 12:33:30 syranide and to hide it, you set it to false 16091 2013-11-08 12:34:40 syranide (the parent should have this state) 16092 2013-11-08 12:34:58 asbjorn yup, I see what your getting at... 16093 2013-11-08 12:35:44 asbjorn I'll give that a go :-) But I still guess there are multiple examples of where you actually DO want to remove a child...? 16094 2013-11-08 12:36:02 asbjorn If someone delete an item..? 16095 2013-11-08 12:36:23 syranide asbjorn: there are bunch of possible solutions, just remember the state+props should uniquely define the rendered state (so you should never remove DOM, you should remove from the state, which leave things out of the DOM for you) 16096 2013-11-08 12:36:49 syranide asbjorn: then you send an onDelete-prop to every child, which the child calls when it wants to be removed 16097 2013-11-08 12:37:00 syranide and the parent removes that child from the list of childs (in the state) 16098 2013-11-08 12:38:35 asbjorn ah, thats clever... so the onDelete would be a function passed from the parent...? sounds better! 16099 2013-11-08 12:38:41 syranide asbjorn: yep! 16100 2013-11-08 12:39:27 syranide asbjorn: basically think of it like this, parents sends props to communicate with its children (functions, values, etc), and children calls the props to communicate the with the parent 16101 2013-11-08 12:39:42 asbjorn what would I pass to hat onDelete from the child as a good way to detect which item to remove? itself? 16102 2013-11-08 12:39:53 asbjorn hat = that 16103 2013-11-08 12:40:14 asbjorn ACTION is trying to avoid looping all the items 16104 2013-11-08 12:40:18 syranide asbjorn: uhm, it's ID (if I'm not mistaken, I even think react has a helper for removing from lists by id) 16105 2013-11-08 12:40:48 asbjorn oh, that's what I'm looking for! 16106 2013-11-08 12:40:50 asbjorn :-D 16107 2013-11-08 12:41:11 syranide but I may be wrong, but I think I remember seeing it somewhere 16108 2013-11-08 12:41:20 asbjorn I'll dig around! thanks :-) 16109 2013-11-08 12:41:34 asbjorn btw, love react! 16110 2013-11-08 12:41:35 syranide asbjorn: anyway, embrace the idea that looping over items isn't slow (that's what react does when rendering it anyway) 16111 2013-11-08 12:41:52 asbjorn true, it's just ugly :-P 16112 2013-11-08 12:41:58 syranide asbjorn: I know that feeling ;D 16113 2013-11-08 12:42:04 asbjorn hehe... 16114 2013-11-08 12:43:05 syranide asbjorn: FYI, you can call the functions exposed by children, but this should never be a go-to solution (as petehunt put it, "it may be an anti-pattern") 16115 2013-11-08 12:43:53 asbjorn yeah, I saw that... I much prefer passing a function to the child... 16116 2013-11-08 12:44:25 syranide asbjorn: and you are right in doing so 16117 2013-11-08 12:45:12 syranide I'm off for a bit, good luck! 16118 2013-11-08 12:59:38 asbjorn syranide: when your back: did it like you suggested with a state, works perfectly :-) thanks again! 16119 2013-11-08 14:02:38 syranide asbjorn: :D 16120 2013-11-08 18:34:07 ly- Angular finally landed real components: https://github.com/angular/angular.js/issues/1924 16121 2013-11-08 19:10:12 hojberg is it at all possible to add a node in the render method that was created with createElement? 16122 2013-11-08 19:10:24 hojberg (trying to integrate with some legacy code) 16123 2013-11-08 19:30:53 zpao hojberg: no. you'd probably want to do that in componentDidMount/DidUpdate 16124 2013-11-08 19:37:20 syranide zpao: I see that you guys have ReactDOMSelection and ReactInputSelection classes, are there any plans to expose those? 16125 2013-11-08 19:37:39 zpao syranide: not right now 16126 2013-11-08 19:38:53 zpao eventually it would be good to pull out the parts of react that are truely reusable outside of react 16127 2013-11-08 19:39:22 syranide zpao: that's sad, hehe... yeah, that selection part would be nice for my advanced input addon 16128 2013-11-08 19:39:28 syranide but I can always just bundle my own code 16129 2013-11-08 19:40:18 zpao yea, or if you wanted a custom build, you could make one. though that makes your addon not usable by others not using your build of react 16130 2013-11-08 19:40:39 syranide yep 16131 2013-11-08 19:40:55 zpao but that said, we're still figuring out what people need out of react's modules to build their addons 16132 2013-11-08 19:41:48 syranide zpao: from my point of view, selection would be a really nice feature, seeing as how easy it is to filter fields today (but that leads to a horrible UX unless you also take care of the selection) 16133 2013-11-08 19:43:04 zpao definitely good feedback and i'll keep that in mind 16134 2013-11-08 19:43:53 syranide I've been toying a bit with the idea of having selection work like value, which would probably be the best solution in react, but I'm not sure if it would get too messy 16135 2013-11-08 19:44:06 syranide and thus also optional 16136 2013-11-08 19:49:28 syranide zpao: I see that the npm package had already been updated, but if I update the dependency, then it warns about jstransform depending on the old, do I submit a PR for that to jstransform? 16137 2013-11-08 19:50:09 syranide (esprimba-fb) 16138 2013-11-08 19:51:02 zpao yea 16139 2013-11-08 19:51:33 zpao and then jstransform needs to get updated on npm. so. many. dependencies 16140 2013-11-08 19:52:49 zpao syranide: can just poke lbljeffmo to update it :) 16141 2013-11-08 19:52:54 syranide will do :) 16142 2013-11-08 19:53:03 syranide ACTION pokes lbljeffmo  16143 2013-11-08 19:53:48 lbljeffmo ACTION pokes back (pro-tip: to engage a professional facebooker in a poke war is futile :p) 16144 2013-11-08 19:54:00 syranide ACTION clubs lbljeffmo to death 16145 2013-11-08 19:54:06 lbljeffmo thats more like it 16146 2013-11-08 19:54:07 lbljeffmo :) 16147 2013-11-08 19:54:20 syranide lbljeffmo: hehe, anyway, could you update jstransform on npm to depend on the newer esprima-fb? 16148 2013-11-08 19:54:41 lbljeffmo yep no prob -- 2 seconds 16149 2013-11-08 19:58:24 syranide ACTION is starting to suspect lbljeffmo's clock might be broken 16150 2013-11-08 20:00:30 lbljeffmo syranide: all set for jstransform (npm caches are slow to update sometimes) 16151 2013-11-08 20:01:00 lbljeffmo just need to update react to point at 2.0.1 for jstransform now -- 2 more seconds 16152 2013-11-08 20:01:12 lbljeffmo (or did you want to do that in your pull request?) 16153 2013-11-08 20:01:19 syranide doesn't matter 16154 2013-11-08 20:01:35 lbljeffmo I'll let you do it in your PR so you can test with the new version etc 16155 2013-11-08 20:01:42 syranide will do 16156 2013-11-08 20:02:14 syranide lbljeffmo: I looked into transforming old JSX to "the new whitespace rules" and it actually turned out to be quite easy 16157 2013-11-08 20:02:55 lbljeffmo yea you mentioned -- wanna include a transformer script in react/scripts with your change ? 16158 2013-11-08 20:03:04 lbljeffmo heading off to lunch 16159 2013-11-08 20:03:06 lbljeffmo back in a bit 16160 2013-11-08 20:03:10 syranide lbljeffmo: oki :) 16161 2013-11-08 20:44:55 syranide zpao: depdencies updated https://github.com/facebook/react/pull/484 16162 2013-11-08 21:04:38 balpert sspi: I don't know what you mean about hasSelectionCapabilities 16163 2013-11-08 21:17:47 sspi balpert: nevermind, my idea doesn't make sense 16164 2013-11-08 21:28:05 petehunt zpao: can you pull this in and redeploy? https://github.com/facebook/react/pull/494 16165 2013-11-08 21:29:21 syranide petehunt: I think it would be wise to explain the idea that parents uses props to send information to children, and children uses prop-functions to send data to the parent (it's not really obvious as it stands to day, IMHO) 16166 2013-11-08 21:33:32 zpao petehunt: going....going.....gone 16167 2013-11-08 21:33:39 petehunt wooo 16168 2013-11-08 21:33:42 petehunt thanks 16169 2013-11-08 21:33:50 petehunt responded to a comment 16170 2013-11-08 21:34:05 petehunt zpao: did you recently set up comment moderation? i got a notification when someone commented 16171 2013-11-08 21:34:17 zpao vjeux_ did 16172 2013-11-08 21:34:20 petehunt (which is great btw, got me to audit everything for snark) 16173 2013-11-08 21:34:28 vjeux :) 16174 2013-11-08 21:35:14 syranide zpao: FYI, https://github.com/facebook/react/pull/484 is ready and working 16175 2013-11-08 21:37:09 chenglou hey zpao, https://github.com/facebook/react/issues/490 can be closed 16176 2013-11-08 21:37:31 chenglou also zpao: how's https://github.com/facebook/react/pull/463 16177 2013-11-08 21:38:43 chenglou also zpao: how's cookbook 16178 2013-11-08 21:38:46 chenglou also zpao zpao zpao 16179 2013-11-08 21:38:49 chenglou =) 16180 2013-11-08 21:39:07 zpao syranide: can you squash to a single commit? 4+merge for that is a bit much and harder to pull into stable branch 16181 2013-11-08 21:39:25 syranide zpao: never done that before, but will try ;) 16182 2013-11-08 21:39:58 zpao chenglou: i think balpert responded? i'm fine either way. maybe doing var cx = ...; var classString = cx(...) would make it less surprising (and set a precendent) for our own code to look like that 16183 2013-11-08 21:40:33 zpao syranide: rebase -i 16184 2013-11-08 21:40:44 syranide ah, that simple :) 16185 2013-11-08 21:40:46 zpao otherwise, i can totally do that locally 16186 2013-11-08 21:40:51 balpert then replace all but the first line with "fixup" 16187 2013-11-08 21:41:01 syranide zpao: gotta learn some time 16188 2013-11-08 21:41:24 zpao syranide: doesn't hurt :) 16189 2013-11-08 21:43:04 syranide zpao: "JSXTransformer now supports IE8" (or perhaps you change in on your end anyway?) 16190 2013-11-08 21:43:14 zpao i have a local branch of that so if you get too far in and things are screwed up, i can recover. i'm pretty sure i screwed up the first time i did anything in git (rebase, merge, amend... somehow all went wrong) 16191 2013-11-08 21:43:47 zpao that sounds fine. ideally, a brief 1 line, then a more descriptive 3rd+N lines as necessary 16192 2013-11-08 21:44:13 syranide zpao: haha yeah, tell me about it, there's a reason why I created a new PR for my whitespace proposal ;) 16193 2013-11-08 21:44:33 zpao my general rule for commit messages: http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html 16194 2013-11-08 21:45:12 zpao i should enforce that more in PRs... 16195 2013-11-08 21:45:50 chenglou and punish those who dont follow them! 16196 2013-11-08 21:46:40 syranide chenglou: definitely! *ahem* "move docs tooling from JSX in Depth .", chenglou authored a day ago ;) 16197 2013-11-08 21:46:43 syranide no capital letter! :P 16198 2013-11-08 21:47:18 chenglou syranide: it was supposed to be satire lol, I suck at commit messages 16199 2013-11-08 21:47:23 syranide chenglou: ;D 16200 2013-11-08 21:48:31 syranide zpao: did I mess it up, or does github always show previous commits? https://github.com/facebook/react/pull/484 16201 2013-11-08 21:49:12 syranide >_< I messed it up 16202 2013-11-08 21:49:15 balpert you messed it up I think. 16203 2013-11-08 21:49:19 zpao something got messed up 16204 2013-11-08 21:49:23 balpert try doing the rebase again? 16205 2013-11-08 21:49:28 chenglou zpao: oh yeah balpert's message... 16206 2013-11-08 21:49:34 balpert alternatively you can make a new branch and cherry-pick that one new commit 16207 2013-11-08 21:49:37 zpao you'll need to push -f the branch 16208 2013-11-08 21:49:37 balpert which looks okay by itself? 16209 2013-11-08 21:49:49 chenglou zpao: balpert im ok with using cx, but you guys sure about this? 16210 2013-11-08 21:50:00 chenglou because it might be meaningless for other readers 16211 2013-11-08 21:50:51 zpao syranide: there's a merge in there, which there shouldn't be for a rebase 16212 2013-11-08 21:51:10 balpert chenglou: they'll get used to it ;) 16213 2013-11-08 21:51:20 zpao chenglou: meh, it's ok if it's meaningless. hopefully they'll see more of it later 16214 2013-11-08 21:52:12 chenglou zpao: more from where though 16215 2013-11-08 21:52:24 zpao other code fb publishes 16216 2013-11-08 21:52:33 zpao (that's the hopefully) 16217 2013-11-08 21:52:35 syranide zpao: apparently I still don't get this rebase thing (I just picked the commits, squash, master). I'm using tortoisegit ... I'll just create a new branch I assume, can I replace the branch or do I need a new PR? 16218 2013-11-08 21:53:00 chenglou but then we'll rely on the fact that they knew what cx means 16219 2013-11-08 21:53:23 zpao syranide: i'll just cherry pick the one commit. otherwise github will force you to make a new PR (though maybe you could trick it) 16220 2013-11-08 21:55:33 chenglou zpao: balpert bah, pushed! 16221 2013-11-08 21:55:37 chenglou any other comment? 16222 2013-11-08 21:56:34 balpert that's all I had 16223 2013-11-08 21:57:00 syranide zpao: according to google it isn't possible to "fix PRs", if you can cherry pick it then sure, otherwise I don't mind fixing the mess (but it does mean a new PR) 16224 2013-11-08 21:57:22 balpert syranide: if you force-push to your remote branch then github will get rid of the old commits 16225 2013-11-08 21:57:38 zpao syranide: not completely true. you can always push -f to the same branch name and github has always figured it out for me 16226 2013-11-08 21:58:31 syranide zpao: ah ok, but how do I resolve merge... rebase master, and rebase my branch onto master? 16227 2013-11-08 21:58:36 syranide *the merge 16228 2013-11-08 21:58:48 balpert syranide: do whatever you just did but without the merge at the end 16229 2013-11-08 21:58:55 vjeux petehunt: troll opportunity https://news.ycombinator.com/item?id=6698906 16230 2013-11-08 21:59:03 syranide balpert: I didn't merge, tortoisegit did it :/ 16231 2013-11-08 21:59:03 zpao what i would do is git reset --hard HEAD~1 to get your branch pointing at the good commit 16232 2013-11-08 21:59:13 syranide zpao: will try 16233 2013-11-08 21:59:18 zpao ah tortoise right... i dunno. i'm a command line junky 16234 2013-11-08 21:59:19 petehunt vjeux: i dont troll hacker news 16235 2013-11-08 21:59:26 petehunt someone else can though 16236 2013-11-08 21:59:29 vjeux ok :p 16237 2013-11-08 21:59:34 syranide zpao: yeah, it seems like CLI is the way 16238 2013-11-08 21:59:37 petehunt vjeux: i only troll when trolled in hacker news 16239 2013-11-08 21:59:48 zpao syranide: you should also make sure your master is synced with our master 16240 2013-11-08 21:59:54 balpert vjeux: do you think they called it timely-delivery to make people thing angular is faster? 16241 2013-11-08 22:00:01 syranide zpao: yeah, I think that was the problem 16242 2013-11-08 22:07:28 syranide zpao: wow, that some magic gitfu right there, fixed it, thanks! 16243 2013-11-08 22:17:43 zpao syranide: trial by fire :) 16244 2013-11-08 22:17:48 syranide haha 16245 2013-11-08 22:22:45 chenglou zpao: new push seems to be stuck in travis 16246 2013-11-08 22:23:04 chenglou the travis page says it's done though 16247 2013-11-08 22:24:35 zpao chenglou: thanks for the heads up... looks like this maybe have gotten screwed up yesterday... 16248 2013-11-08 22:24:57 chenglou that should be github's problem right? 16249 2013-11-08 22:27:45 zpao oh no we didn't screw that up. either travis or GH. it might just be lagging a lot 16250 2013-11-08 22:27:55 zpao syranide's went through and shows up 16251 2013-11-08 22:39:13 syranide \\o/ 16252 2013-11-08 22:39:34 balpert syranide: thanks! 16253 2013-11-08 22:41:31 syranide balpert: ;) 16254 2013-11-08 22:50:03 syranide zpao: JSXTransformer currently supports attributes being written over multiple lines, , is this really something that should be supported? (it's quite hacky right now, looking to fix it) 16255 2013-11-08 22:50:38 zpao syranide: that's a question for lbljeffmo 16256 2013-11-08 22:50:43 syranide hehe ok ;) 16257 2013-11-08 22:51:10 zpao you stepped into a field filled with landmines 16258 2013-11-08 22:51:25 syranide zpao: I'm working my way through it ;) 16259 2013-11-08 22:51:39 syranide a lot will actually be fixed with my whitespace PR 16260 2013-11-08 22:56:39 lbljeffmo syranide: Not sure if we should/shouldn't supprot it. It seems clowny at first glance, but then if you consider something like var myAttr = "line1\\nline2"; var mySpan = ; it makes you wonder if the inconsistency is worth it 16261 2013-11-08 22:57:02 lbljeffmo I'm sort of inclined to suggest we shouldn't reject it -- but should make fun of anyone who ever tries to do it on a span 16262 2013-11-08 22:57:41 syranide lbljeffmo: yeah true, but as it stands right now, attr="abc\\ndef" is treated as text, and thus follows white-space collapsing rules 16263 2013-11-08 22:57:48 syranide which I guess isn't necessarily wrong 16264 2013-11-08 22:58:23 lbljeffmo interesting 16265 2013-11-08 22:58:38 syranide renderXJSLiteral(attr.value, isLast, state); 16266 2013-11-08 22:58:46 lbljeffmo kinda seems wrong to me for the same reasons stated above 16267 2013-11-08 22:59:10 lbljeffmo (you're in legacy code land -- so all bets on reason and sanity are off -- as zpao mentioned :) ) 16268 2013-11-08 22:59:19 lbljeffmo sorry maybe not legacy 16269 2013-11-08 22:59:26 lbljeffmo but certainly not greenfield 16270 2013-11-08 22:59:41 syranide hehe, I guess a reason for keeping it as if someone decides to write a long style="..." now they can split it to multiple lines 16271 2013-11-08 22:59:48 syranide *as-is 16272 2013-11-08 23:00:12 syranide no harm done keeping it I guess 16273 2013-11-08 23:00:22 balpert syranide: except style="..." doesn't work; it takes an object :) 16274 2013-11-08 23:00:29 syranide balpert: oh right :O 16275 2013-11-08 23:15:14 syranide lbljeffmo: btw, I wrote a (too long) post on the whitespace PR, basically, I think producing \\n for newlines is a mistake, everything should collapse to a space (or spaces) 16276 2013-11-08 23:21:29 lbljeffmo syranide: no worries -- I agree we should tread a bit carefully here as it's not a fun thing to have to change again. This is also why it's taking me so long to get back to you on your updates (aside from the other insanities that have been attacking me this week) 16277 2013-11-08 23:22:02 syranide lbljeffmo: yep, as before, don't stress ;) 16278 2013-11-08 23:22:17 syranide uh, no rush ;) 16279 2013-11-08 23:45:51 syranide lbljeffmo: want me to put together a PR for adding "utils." where missing in JSX? 16280 2013-11-08 23:51:00 lbljeffmo syranide: yea that'd be great actually 16281 2013-11-08 23:51:09 syranide lbljeffmo: already on it :) 16282 2013-11-08 23:51:17 lbljeffmo boom 16283 2013-11-09 01:03:15 petehunt balpert: do you guys have any best practices for backbone + react? 16284 2013-11-09 01:03:56 balpert probably not any useful ones 16285 2013-11-09 01:03:57 balpert what for? 16286 2013-11-09 01:04:09 petehunt balpert: i'm convinced that we need a better starter kit 16287 2013-11-09 01:04:15 petehunt would like to have it based on backbone just because. 16288 2013-11-09 01:04:30 zpao starter kit*s*? 16289 2013-11-09 01:04:44 petehunt zpao: One To Rule Them All 16290 2013-11-09 01:05:01 syranide http://www.imdb.com/title/tt0091203/ 16291 2013-11-09 01:05:02 zpao react-starter-kit repo with different branches for different setups? 16292 2013-11-09 01:05:15 petehunt though the more i think about it, the more i think it would end up looking a lot like Rendr 16293 2013-11-09 01:05:30 balpert zpao: I'd be a little afraid that some people don't really do git branches 16294 2013-11-09 01:05:41 balpert I hope that fear is unwarranted though 16295 2013-11-09 01:05:44 petehunt zpao: yo install react-startkit 16296 2013-11-09 01:06:24 zpao well, it's only a repo with samples. you copy into your own directory and then go from there 16297 2013-11-09 01:06:43 zpao petehunt: yo install django 16298 2013-11-09 01:07:00 balpert zpao: but maybe you can't figure out how to switch branches! 16299 2013-11-09 01:07:03 zpao s/it's only/it would only/ 16300 2013-11-09 01:07:08 zpao downloads? 16301 2013-11-09 01:07:12 balpert true 16302 2013-11-09 01:07:14 balpert yeah that's fine then 16303 2013-11-09 01:07:23 syranide at least keep one simple example that shows how to use react, without resorting to bad practices (the current isn't very good at that) 16304 2013-11-09 01:07:24 balpert I don't care how the repo is organized :) 16305 2013-11-09 01:07:33 balpert just having different folders might be sensible though 16306 2013-11-09 01:07:36 balpert we should have the examples viewable without cloning too 16307 2013-11-09 01:07:41 balpert and have better examples :) 16308 2013-11-09 01:07:43 zpao balpert: i guess we could just put things into folders... 16309 2013-11-09 01:07:53 balpert zpao: yeah, I think that's probably reasonable 16310 2013-11-09 01:07:55 petehunt syranide: do we even have an example 16311 2013-11-09 01:07:59 zpao balpert: yes, examples should be on the site 16312 2013-11-09 01:08:04 syranide petehunt: that comment tutorial thingy 16313 2013-11-09 01:08:08 petehunt it's fixed! 16314 2013-11-09 01:08:13 balpert zpao: I'll open an issue to remind myself 16315 2013-11-09 01:08:14 petehunt there was 1 line of bad practice! 16316 2013-11-09 01:08:19 syranide petehunt: yeah but it's still accessing the DOM directly right? 16317 2013-11-09 01:08:28 petehunt don't think so 16318 2013-11-09 01:08:58 syranide var author = this.refs.author.getDOMNode().value.trim(); 16319 2013-11-09 01:09:05 syranide I'm not saying it's bad 16320 2013-11-09 01:09:12 syranide but it doesn't really explain how React works 16321 2013-11-09 01:09:18 petehunt syranide: that's a best practice 16322 2013-11-09 01:09:24 petehunt :) 16323 2013-11-09 01:10:55 syranide petehunt: and I don't disagree, but there was a guy here before who was stuck, and the reason he was stuck was because he didn't understand that he shouldn't be messing with the DOM directly (removing children etc), and it wouldn't surprise me if that is one of the reasons 16324 2013-11-09 01:11:16 petehunt ah i see 16325 2013-11-09 01:11:49 syranide and to be honest, it took me a while before I realized how parents and children communicate 16326 2013-11-09 01:12:05 syranide and even then I wasn't even sure if I was correct, and I believe I even asked you 16327 2013-11-09 01:12:06 petehunt zpao: how's that cookbook coming? :) 16328 2013-11-09 01:12:18 syranide yeah I did ask you :) 16329 2013-11-09 01:13:49 zpao petehunt: tomorrow. it's been a week but amanda has a wedding so i'll sleep in, get the cookbook in, write some express with handlebars 16330 2013-11-09 01:14:05 petehunt wat 16331 2013-11-09 01:14:20 zpao (i spent last weekend fighting handlebars, fucking shit) 16332 2013-11-09 01:14:39 petehunt why are you writing handlebars 16333 2013-11-09 01:14:45 petehunt oh right to separate your concerns, 4got 16334 2013-11-09 01:14:50 zpao yea dude 16335 2013-11-09 01:15:06 zpao i have helpers in my app.js with html in strings so i can use that shit in my views 16336 2013-11-09 01:15:15 petehunt sick, sounds super secure 16337 2013-11-09 01:15:21 zpao it's so good 16338 2013-11-09 01:16:04 zpao i should have just stuck with using ejs. but oh well 16339 2013-11-09 01:16:28 zpao i wrote this site 3 or 4 times so i could try all the templating things. 16340 2013-11-09 01:18:34 syranide I'm curious, are there actually any good alternatives to react? I started migrating the project at work to knockoutjs, which was really nice, except, oh boy gee, they don't have reusable components, or components at all for that matter 16341 2013-11-09 01:18:48 zpao heh 16342 2013-11-09 01:19:11 petehunt syranide: i think you should use react :) but i think ext and enyo are pretty good 16343 2013-11-09 01:19:48 petehunt ext, enyo, and react all had serious companies bet heavily on them 16344 2013-11-09 01:19:54 syranide petehunt: yeah that's for sure, react is pretty much my dream come true after swimming in the js template swamp for years 16345 2013-11-09 01:20:04 zpao some of the things coming out of html spec work (web components) might start to get comparable. but they aren't really declarative so it's still pretty easy to end with spaghetti 16346 2013-11-09 01:20:06 syranide ext is nice, but it's too "windows application" for my taste 16347 2013-11-09 01:20:14 petehunt yeah, same. feels like MFC 16348 2013-11-09 01:20:33 petehunt but i don't think "feel" is a good reason to discount stuff :P JSX "feels" bad when you first try it 16349 2013-11-09 01:20:56 syranide petehunt: I mean visually, it's built to look like windows 16350 2013-11-09 01:21:01 syranide or "regular apps" 16351 2013-11-09 01:21:05 petehunt oh, it's meant for mobile now i think 16352 2013-11-09 01:21:10 syranide aha 16353 2013-11-09 01:21:14 chenglou syranide: you should try angular.js 16354 2013-11-09 01:21:18 chenglou jk, jk 16355 2013-11-09 01:21:26 petehunt trololololoolol 16356 2013-11-09 01:22:03 syranide chenglou: I did try it a bit actually, I think it's a great idea, but too many weird and undocumented concepts to wrap my head around 16357 2013-11-09 01:22:38 petehunt syranide: chenglou: I did try it a bit actually, I think it's a great idea, but too many weird and undocumented concepts to wrap my head around 16358 2013-11-09 01:22:39 chenglou lol! 16359 2013-11-09 01:22:40 syranide in short, I love react, it's simple and it's to the point, and it's fast 16360 2013-11-09 01:23:33 chenglou syranide: I wasn't serious 16361 2013-11-09 01:23:41 syranide chenglou: yeah I know ;) 16362 2013-11-09 01:24:20 petehunt syranide: so what's stopping you from trying it out? 16363 2013-11-09 01:25:41 syranide petehunt: nothing, I am just experimenting right now, but like I said, you guys pretty much answered my "cry for help", when I get some time over I will transition the entire project at work to React 16364 2013-11-09 01:26:03 petehunt you can transition incrementally 16365 2013-11-09 01:26:17 balpert syranide: what are you working on? 16366 2013-11-09 01:26:19 petehunt if you're willing to download an extra 26kb of js for react 16367 2013-11-09 01:26:42 syranide petehunt: yeah, but I'm a "one man developer team" with a lot of spare time ;) 16368 2013-11-09 01:26:52 petehunt syranide: me too until recently! :P 16369 2013-11-09 01:27:18 syranide petehunt: c5mail.com , it's basically a (for now swedish) email marketing tool, with serious focus on UX and simplicity 16370 2013-11-09 01:27:42 petehunt i took over a backbone + jquery + mustasche app (instagram.com). i started by converting a single mustasche template to react 16371 2013-11-09 01:27:58 balpert mailchimp competitor? 16372 2013-11-09 01:28:09 petehunt syranide: wow that looks great 16373 2013-11-09 01:28:25 petehunt sick parallax scroll animation too 16374 2013-11-09 01:28:35 petehunt and doesnt lag real browser scrolling 16375 2013-11-09 01:29:10 syranide balpert: well, in a way, yes... but, I would like to say that we have taken it far enough that you can actually have "regular people" use it, like resellers etc 16376 2013-11-09 01:29:29 balpert syranide: cool :) 16377 2013-11-09 01:29:38 syranide and we are actually releasing it to all resellers of Volkswagen Transport in Sweden in a month 16378 2013-11-09 01:30:08 syranide petehunt: oh you noticed, sadly it's going in the bin in the next update (it jerks in some browsers) 16379 2013-11-09 01:30:30 petehunt congrats 16380 2013-11-09 01:30:37 petehunt syranide: btw, how did you discover react? just curious 16381 2013-11-09 01:30:54 balpert I love the parallax in the pricing table especially 16382 2013-11-09 01:31:14 chenglou same 16383 2013-11-09 01:31:39 syranide petehunt: honestly? I don't remember, you guys probably came to me in my dreams ;) ... I've been looking for alternatives to knockoutjs for a while, and somehow stumbled upon you 16384 2013-11-09 01:31:50 syranide balpert: the designer at work was quite pleased with that ;) 16385 2013-11-09 01:33:34 syranide so thanks you guys for not having to cry myself to sleep over knockoutjs anymore 16386 2013-11-09 01:33:40 petehunt :D 16387 2013-11-09 01:33:59 petehunt balpert: can you send me your backbone mixin again? 16388 2013-11-09 01:36:19 balpert petehunt: yup 16389 2013-11-09 01:36:20 balpert https://gist.github.com/spicyj/55d72e812ffb0d25abc0 16390 2013-11-09 01:42:49 syranide petehunt: oh I remember! 16391 2013-11-09 01:43:06 syranide petehunt: https://twitter.com/jordwalke/status/395027736399323136 16392 2013-11-09 01:44:12 syranide uh, or rather the twitter by khan academy themselves 16393 2013-11-09 01:45:52 balpert syranide: @khanacademy didn't tweet about it 16394 2013-11-09 01:46:11 syranide balpert: Yeah my bad 16395 2013-11-09 01:46:18 syranide https://twitter.com/echojs/status/395241729114120192 16396 2013-11-09 01:46:19 syranide that one 16397 2013-11-09 01:46:26 balpert ooh cool 16398 2013-11-09 01:47:47 syranide but don't ask me how I came across that tweet, I don't normally use twitter 16399 2013-11-09 01:49:55 balpert ooay 16400 2013-11-09 01:49:57 balpert *ookay 16401 2013-11-09 06:40:08 balpert for fun, pick your favorite website and run the following in the web inspector: 16402 2013-11-09 06:40:09 balpert (function(el) { el.innerText = '[data-reactid] { outline: 1px solid red; }'; document.body.appendChild(el); })(document.createElement('style')); 16403 2013-11-09 06:40:19 balpert this probably works best if your favorite website is Facebook or Khan Academy 16404 2013-11-09 06:44:56 sspi balpert: gonna try now :P 16405 2013-11-09 06:45:27 balpert also I have no idea why I put the createElement at the end 16406 2013-11-09 06:48:57 sspi fun hack :) 16407 2013-11-09 12:07:30 syranide petehunt: hey, I remembered how I found out about react, https://twitter.com/echojs/status/395241729114120192 16408 2013-11-09 12:07:49 petehunt saweet 16409 2013-11-09 14:10:21 syranide is it possible to force componentDidUpdate somehow? 16410 2013-11-09 14:14:56 Saulo Hi 16411 2013-11-09 14:14:59 Saulo It seems that react is ignoring the rows attribute of the textarea tag when using jsx. Does anyone knows how to workaround this? 16412 2013-11-09 14:15:13 syranide Saulo: give me a sec and I'll verify 16413 2013-11-09 14:16:39 syranide Saulo: indeed it does, as a temporary fix you could just get the DOM for the textarea in componentDidMount and set it there 16414 2013-11-09 14:18:37 Saulo hmmm, i believe i know how to apply your suggestion. Thanks a lot syranide! 16415 2013-11-09 14:18:56 syranide Saulo: I'll make sure to submit a fix for it, just so you know :) 16416 2013-11-09 14:19:06 Saulo Nice! 16417 2013-11-09 14:36:32 syranide Saulo: if you want you can fix it in your local copy of react instead of working around it, you can do it with a simple search-and-replace 16418 2013-11-09 14:37:07 syranide replace ",rowSpan:null" with ",rows:null,rowSpan:null" if you are using the minified version 16419 2013-11-09 14:37:44 Saulo I will do that! Thanks for fixing that bug so fast! 16420 2013-11-09 14:38:09 syranide Saulo: np, just ask if you run into trouble again :) 16421 2013-11-09 14:38:20 Saulo I will ;) 16422 2013-11-09 15:01:50 syranide balpert: you there? 16423 2013-11-09 15:09:20 Saulo syranide: I am trying to use the style attribute in a td element () but i am getting an error "Invariant Violation" in the console. The documentation says that the style attribute is supported. Am I doing something wrong? 16424 2013-11-09 15:09:30 syranide Saulo: it should be an object 16425 2013-11-09 15:09:36 syranide {padding: "0pt..."} 16426 2013-11-09 15:17:54 Saulo I am afraid i am still doing something wrong because when I wrote as you suggested () i am getting the error "Parse Error: Line 95: Unexpected token : " on the console] 16427 2013-11-09 15:18:18 syranide Saulo: and it's that exact line? 16428 2013-11-09 15:18:27 syranide oh wait 16429 2013-11-09 15:18:34 Saulo Yeah! 16430 2013-11-09 15:18:37 syranide Saulo: sorry! {{padding: "0pt"}} 16431 2013-11-09 15:18:47 syranide otherwise you are not creating an object 16432 2013-11-09 15:19:30 Saulo so the first { is just to hint the jsx compiler that what follows is an expression? 16433 2013-11-09 15:19:36 syranide exactly 16434 2013-11-09 15:19:51 syranide you can write "padding: 0pt ..." it's just that style doesn't support strings in JSX 16435 2013-11-09 15:19:56 syranide but other attributes do 16436 2013-11-09 15:20:10 Saulo I see 16437 2013-11-09 15:20:39 syranide Saulo: have you tried looking at the generated code? If all translates straight to javascript 16438 2013-11-09 15:21:04 syranide React.DOM.td({padding: "..."}, ...); 16439 2013-11-09 15:21:04 Saulo I am using the browser compiler 16440 2013-11-09 15:21:07 syranide ah 16441 2013-11-09 15:21:21 syranide *It all 16442 2013-11-09 15:21:31 Saulo but it is a good suggestion to better understand whats going on behind the scenes 16443 2013-11-09 15:21:55 Saulo Now it is working 16444 2013-11-09 15:22:09 Saulo Thanks 16445 2013-11-09 15:22:10 syranide Saulo: oh, apparently this exists: http://facebook.github.io/react/jsx-compiler.html 16446 2013-11-09 15:23:15 Saulo Uow, a realtime JSX compiler :) 16447 2013-11-09 15:24:57 Saulo this page here http://facebook.github.io/react/docs/dom-differences.html mentions what you just taught me: how to use the style attribute. Maybe an example there would help 16448 2013-11-09 15:25:38 syranide Saulo: yeah, in my opinion documentation is severely lacking right now, but I believe they just released this a few weeks back, and are improving the documentation every day 16449 2013-11-09 15:25:45 syranide ^food 16450 2013-11-09 15:25:53 Saulo Bon appetite :) 16451 2013-11-09 15:40:25 syranide Saulo: back :) 16452 2013-11-09 15:42:47 Saulo :) 16453 2013-11-09 15:43:31 Saulo Everything is working 16454 2013-11-09 15:44:05 syranide Saulo: awesome, and just to "verify", you know that parents communicate with children via props (values and functions), and children communicate with parents by calling props 16455 2013-11-09 15:48:12 Saulo I am getting there :) 16456 2013-11-09 15:49:30 Saulo but I think I understand what you are saying. I have some experience with JSF and AngularJS so the notion of binding is a familiar one 16457 2013-11-09 15:50:26 syranide Saulo: the basic idea is basically that the visual state of a component should be determined by it's properties+states, so you should (in general) never modify the DOM directly 16458 2013-11-09 15:52:36 Saulo Only when you need workaround some bugs right? :) 16459 2013-11-09 15:53:18 syranide Saulo: exactly ;) and obviously, sometimes you want it to do crazy animations and things like that, but that's the basic idea 16460 2013-11-09 15:55:21 Saulo Let me see if I undertood it right. Suppose i have a button that, when clicked, does an ajax request. I want to change the color of this button while the response of that request has not arrived. So the state of my component will have an attribute to represent the color of the button. I bind the color of the button to this attribute. When the button is clicked I only change the attribute. As the attribute is bounded to the button Rea 16461 2013-11-09 15:55:35 Saulo the button. Something like that right? 16462 2013-11-09 15:56:52 syranide Saulo: yep, but taking it even further, you should rather have a prop (or state) that determines whether it is waiting for AJAX or not, and in the render method, you decide color based on the props+states 16463 2013-11-09 15:57:49 syranide ? 17373 2013-11-13 22:22:46 krs seems it wraps the text in another span 17374 2013-11-13 22:23:51 SubtleGradient benjamn: updated my IE8 populist PR https://github.com/benjamn/populist/pull/8 17375 2013-11-13 22:26:31 balpert krs: yes, currently text nodes are wrapped in spans so that react can keep track of them 17376 2013-11-13 22:26:35 balpert krs: is this a problem for you? 17377 2013-11-13 22:27:27 krs not for me it isnt, the guy doing the html asks about it but i dont think its that a big deal 17378 2013-11-13 22:29:43 benjamn SubtleGradient: if you haven't started addressing those nits I'll just merge and then add a trivial commit of my own 17379 2013-11-13 22:30:36 zpao krs: yea, that happens when text is sibling to other nodes 17380 2013-11-13 22:31:02 zpao https://github.com/facebook/react/blob/master/src/core/ReactTextComponent.js?source=cc 17381 2013-11-13 22:31:41 zpao we may be able to drop that constraint in the future, but not today 17382 2013-11-13 22:36:33 SubtleGradient benjamn: I picked all the nits I know about 17383 2013-11-13 22:36:49 benjamn SubtleGradient: merged 17384 2013-11-13 22:40:54 benjamn SubtleGradient: https://github.com/benjamn/populist/releases/tag/v0.1.5 17385 2013-11-13 22:46:45 SubtleGradient benjamn: NPM seems to be working again. The tests are passing: https://github.com/facebook/react/pull/510 17386 2013-11-13 22:57:15 SubtleGradient Tests are running in IE8 now! benjamn FTW 17387 2013-11-13 23:00:18 benjamn ACTION is full of pride 17388 2013-11-13 23:06:54 hojberg woo 17389 2013-11-13 23:12:11 petehunt SubtleGradient: benjamn: why are we doing this to ourselves :( now we have to be held accountable! 17390 2013-11-13 23:12:27 SubtleGradient Muahahaha 17391 2013-11-13 23:14:30 benjamn if we find any bugs this way I blame SubtleGradient 17392 2013-11-13 23:36:59 andreypopp oh, cool, v8 recently gained escape analysis — https://twitter.com/mraleph/status/400769017113092096 17393 2013-11-13 23:37:51 zpao andreypopp: i wonder if spidermonkey has that optimized... it's been supported there for years 17394 2013-11-14 00:16:44 liammcl does react-tools work on windows? 17395 2013-11-14 00:20:42 zpao liammcl: i think there were some issues, but i'm not certain 17396 2013-11-14 00:21:08 liammcl seems not https://github.com/facebook/react/issues/391 17397 2013-11-14 00:24:33 petehunt liammcl: are you using some sort of commonjs build system by any chance? 17398 2013-11-14 00:26:07 liammcl no. Just npm install -g react-tools; jsx js/ build/ 17399 2013-11-14 00:26:44 petehunt liammcl: i would just recommend using something like reactify (for browserify) 17400 2013-11-14 00:27:01 petehunt also grunt-react 17401 2013-11-14 00:27:14 zpao well, our tools should work before just say use something else :( 17402 2013-11-14 00:27:58 liammcl it works in mingw 17403 2013-11-14 00:28:31 liammcl I only care because I'm working on a screencast and I'd like to demonstrate react-tools on windows. 17404 2013-11-14 00:28:42 liammcl ie cmd 17405 2013-11-14 00:31:45 liammcl I see why - it's a bash script 17406 2013-11-14 00:38:56 liammcl the file that throws the error is in mocha. I'm confused. Might leave this one to the pros. 17407 2013-11-14 00:43:38 zpao i think it's because commoner tries to stat every file in the tree... or something silly 17408 2013-11-14 00:53:54 tomocchino liammcl: there's a task internally to make it work on windows 17409 2013-11-14 00:54:03 tomocchino would you like to send us a pull request? :D 17410 2013-11-14 01:00:56 petehunt !!!!! 17411 2013-11-14 01:01:05 ide lol 17412 2013-11-14 01:01:21 petehunt ide: ... did you sign the cla 17413 2013-11-14 01:01:44 ide >:( 17414 2013-11-14 01:19:23 petehunt ide: do you think anyone will ever want that behavior? 17415 2013-11-14 01:23:03 ide petehunt: I think it makes sense -- e.g. lets say that newsfeed used a transition group and animated in new stories 17416 2013-11-14 01:23:26 petehunt yeah i agree it's a good default behavior. just not sure if we want a prop to toggle it 17417 2013-11-14 01:23:28 petehunt for now let's keep it simple 17418 2013-11-14 01:23:31 ide on a quickling transition you wouldn't want each story to animate in individually 17419 2013-11-14 01:23:37 ide agree that having a prop could be cool 17420 2013-11-14 01:24:44 petehunt ide: want to update with a prop for it? i'm thinking it would be nice to have (i'm imagining building a presentation and you want a fade-in for the first slide or something) 17421 2013-11-14 01:28:43 ide petehunt: sure, any preference for the prop name? 17422 2013-11-14 01:28:58 petehunt ide: transitionOnMount? 17423 2013-11-14 01:29:08 petehunt default to false 17424 2013-11-14 01:33:49 petehunt yungsters: thoughts on https://github.com/facebook/react/pull/502/files ? 17425 2013-11-14 01:34:37 petehunt are we including deprecated properties? 17426 2013-11-14 01:34:57 yungsters what do you mean? 17427 2013-11-14 01:35:07 petehunt yungsters: `which` is deprecated in the spec 17428 2013-11-14 01:35:12 yungsters yeah, but it's still there 17429 2013-11-14 01:35:18 petehunt so we can take it, right 17430 2013-11-14 01:35:21 yungsters yeah 17431 2013-11-14 01:35:30 petehunt alright, i'mma pull it in 17432 2013-11-14 01:35:38 yungsters (y) 17433 2013-11-14 01:40:41 zpao petehunt: let's do something about that formatting though 17434 2013-11-14 01:43:49 balpert petehunt: you can just do event.which != null, which is a bit shorter 17435 2013-11-14 01:43:55 balpert (and matches what jQuery does, fwiw) 17436 2013-11-14 01:44:03 petehunt balpert: comment on it :) 17437 2013-11-14 01:44:31 balpert petehunt: fiine :) 17438 2013-11-14 01:47:25 chenglou petehunt: commonjs asset specs: what's the benefit of removing a css style? is there an actual impact? 17439 2013-11-14 01:47:35 chenglou petehunt: never really to consider that 17440 2013-11-14 01:47:41 chenglou *considered 17441 2013-11-14 01:47:51 petehunt chenglou: there is if you're facebook 17442 2013-11-14 01:48:20 chenglou because of browser problems or the amount of css? 17443 2013-11-14 01:48:32 chenglou I've never heard other sites use this 17444 2013-11-14 01:48:45 petehunt style calc perf mostly 17445 2013-11-14 01:49:36 petehunt if it's a premature optimization it doesn't need to be implemented at first, but you don't want to design your way into a dead end so the spec should be thought of with that in mind 17446 2013-11-14 01:50:00 chenglou sadly Im not overly familiar with refcounting (hah! and you feared people who can't into malloc) 17447 2013-11-14 01:50:04 chenglou but I'll put that in mind 17448 2013-11-14 01:50:15 chenglou the other two points are achievable too 17449 2013-11-14 01:50:18 petehunt chenglou: refcounting is easy 17450 2013-11-14 01:50:32 chenglou alright I'll read on it 17451 2013-11-14 01:50:33 petehunt your component needs a stylesheet. when it mounts it increments its refcount 17452 2013-11-14 01:50:42 petehunt when the component unmounts it decrements the refcount 17453 2013-11-14 01:50:46 petehunt when the count == 0, unload the stylesheet 17454 2013-11-14 01:50:54 zpao i think there was also a thing (maybe on IE) where there are a max nmber of stylesheets you can have attached 17455 2013-11-14 01:51:03 petehunt oh yea that too 17456 2013-11-14 01:51:19 chenglou zpao: that won't be a problem. RCSS now loads everything into one single style sheet 17457 2013-11-14 01:51:30 chenglou I'll push it tomorrow or something 17458 2013-11-14 01:51:36 chenglou this is pretty fun actually! 17459 2013-11-14 01:51:45 zpao ACTION doesn't really know what's being talked about... just picking the part of hte conversation i had something to say about :P 17460 2013-11-14 01:52:28 chenglou zpao: my bad, I was playing around with the idea of requiring css similar to staticify 17461 2013-11-14 01:53:42 balpert chenglou: there's also a thing (in IE) where you can't have too many rules in one stylesheet :) 17462 2013-11-14 01:54:06 chenglou balpert: jeeesus alright thanks 17463 2013-11-14 01:54:10 balpert http://stackoverflow.com/a/9906889/49485 17464 2013-11-14 01:54:15 chenglou I'll just split it into chunks then 17465 2013-11-14 01:54:18 balpert yup 17466 2013-11-14 01:56:51 hojberg YEAH 17467 2013-11-14 01:56:55 hojberg ahem 17468 2013-11-14 01:57:52 zpao hojberg: YEAH 17469 2013-11-14 01:59:34 hojberg :D 17470 2013-11-14 02:03:55 zpao hojberg: thanks for taking that on :) i'm going to let petehunt take a look when he has a chance, otherwise I'll take care of it tomorrow :) 17471 2013-11-14 02:04:14 petehunt balpert and i are already all over it 17472 2013-11-14 02:04:20 hojberg zpao: he already jumped on it 17473 2013-11-14 02:04:23 hojberg its awesome 17474 2013-11-14 02:04:34 petehunt #movefast 17475 2013-11-14 02:04:49 zpao alrighty then! 17476 2013-11-14 02:04:54 hojberg :D 17477 2013-11-14 02:04:59 zpao go team go 17478 2013-11-14 02:05:17 zpao ACTION is looking at the things older than 24 hours since those have piled up 17479 2013-11-14 02:05:40 balpert zpao: thanks for doing the dirty work :) 17480 2013-11-14 02:08:25 zpao gotta try to pull this graph back down http://cl.ly/SSzb 17481 2013-11-14 02:08:56 zpao 2 pronged attack... hand off the new ones and go close the old ones 17482 2013-11-14 02:16:47 hojberg down the rabbit hole i go 17483 2013-11-14 02:16:55 balpert zpao: is that a github thing? 17484 2013-11-14 02:17:03 hojberg ReactChildren.map doesn't handle undefine - is that right? 17485 2013-11-14 02:17:21 zpao balpert: no, internal 17486 2013-11-14 02:18:17 balpert hojberg: it actually does -- in JS null == undefined so the check at the beginning catches it 17487 2013-11-14 02:19:02 hojberg oh thats why its a double eq and not 3 17488 2013-11-14 02:25:37 balpert yup 17489 2013-11-14 02:41:33 hojberg balpert: ok so, sure undefined is sorta handled. if undefined is passed, undefined is what you'll get back. mergeKeySets doesn't like that. Should mergeKeySets handle undefined input or should getKeySet always return an object? 17490 2013-11-14 02:42:11 hojberg or ReactChildren.map even ... hmm 17491 2013-11-14 02:42:41 hojberg alternatively children could be default to an empty array always 17492 2013-11-14 02:46:56 chenglou hojberg: if im not mistaken they avoid unnecessary array allocations 17493 2013-11-14 02:47:48 hojberg i see 17494 2013-11-14 09:16:20 balpert syranide: hmm, style seems fine to me then given the existing event code 17495 2013-11-14 09:16:24 balpert I expect petehunt will agree 17496 2013-11-14 09:17:14 balpert now I don't know why I'm still awake, so good night :) 17497 2013-11-14 09:17:24 syranide balpert: good night :) 17498 2013-11-14 11:45:15 fforw ACTION used ReactLink for the first time and was pretty confused by teh documentation 17499 2013-11-14 11:46:01 fforw I think the LinkedStateMixin and .linkState() push people in the wrong direction conceptually 17500 2013-11-14 11:46:21 fforw the term StateLink might have been better 17501 2013-11-14 11:46:41 fforw because that's what it is kind of .. and objectified link to a certain state 17502 2013-11-14 11:47:27 fforw so StateLinkMixin and createStateLink ? 17503 2013-11-14 12:32:11 syranide fforw: it seems that none of it is final yet, feel free open an issue on github :) 17504 2013-11-14 12:32:30 syranide (all the authors are asleep I believe) 17505 2013-11-14 12:52:36 fforw syranide: I might try that 17506 2013-11-14 16:41:22 marclar does anyone have specific recommendations for test frameworks to use with React? 17507 2013-11-14 16:42:41 syranide marclar: react is using jasmine+phantomjs, but more than that, I have no idea :) 17508 2013-11-14 16:42:51 marclar k -- thank you 17509 2013-11-14 16:47:14 toddself marclar: you might want to checkout zuul 17510 2013-11-14 16:47:17 toddself and zuul-mp 17511 2013-11-14 16:47:26 marclar cuul -- checking now ;) 17512 2013-11-14 16:47:32 toddself tests are done in mocha (very similar to jasmine) 17513 2013-11-14 16:47:45 toddself but the newest zuul uses saucelabs for browser testing 17514 2013-11-14 16:47:49 toddself zuul-mp uses phantomjs 17515 2013-11-14 16:49:12 marclar yeah; I have saucelabs set up but it's super-slow, so I'll probably only use that for deployment 17516 2013-11-14 16:49:58 toddself we are going to use it only in our CI enivronment. 17517 2013-11-14 16:50:21 toddself ideally zuul would have a plugable backend, so you could easily switch between phantomjs, saucelabs, testling, etc 17518 2013-11-14 16:50:26 toddself but that's probably for the future 17519 2013-11-14 16:51:02 marclar what's the point of zuul-mp? It seems that zuul does everything you need 17520 2013-11-14 16:51:09 marclar ah 17521 2013-11-14 16:51:11 marclar mocha? 17522 2013-11-14 16:51:51 toddself phantomjs 17523 2013-11-14 16:52:04 toddself zuul wont' run your tests automatically locally 17524 2013-11-14 16:52:13 toddself it'll start the server 17525 2013-11-14 16:52:22 toddself but you'll have to launch phantomjs against it and look at the output 17526 2013-11-14 16:52:30 marclar got it 17527 2013-11-14 16:52:35 toddself zuul-mp does that for you and reutrns a non-zero if the tests fail 17528 2013-11-14 17:44:18 balpert fforw: what confused you about the current name? 17529 2013-11-14 17:44:28 balpert SubtleGradient: how'd you generate the coverage report? 17530 2013-11-14 17:45:03 SubtleGradient balpert: coverify. I'll submit a diff with a grunt coverage task inaminit 17531 2013-11-14 17:47:00 SubtleGradient marclar: We're using webdriver now. That works with phantomjs for fast headless testing. But now we re-use the same test runner for running on `chromedriver` or saucelabs or any other webdriver compatible server. e.g. Selenium for Android 17532 2013-11-14 17:48:27 fforw balpert: it seems to hint to much more magic than what happens. 17533 2013-11-14 17:48:59 marclar thank you -- I just got Selenium + Chromedriver running but it's still pretty slow and reopens Chrome with each run 17534 2013-11-14 17:49:06 marclar probably need to use PhantomJS 17535 2013-11-14 17:49:31 fforw balpert: and it didn't work for checkbox, so I ended up wiring that myself etc. 17536 2013-11-14 17:49:54 SubtleGradient marclar: something is doing it wrong. The best way to run unit tests is to get a simple test runner that works in a browser manually. Then just use webdriver to automate opening it in your browser for you. 17537 2013-11-14 17:49:55 balpert fforw: indeed, we have a bug open for that https://github.com/facebook/react/issues/475 17538 2013-11-14 17:50:32 SubtleGradient benjamn: anything to do before we can merge? https://github.com/facebook/react/pull/510 17539 2013-11-14 17:50:39 fforw balpert: and I felt like LinkedStateMixin and this.linkState were worse as names then the other way round.. and with a create 17540 2013-11-14 17:50:59 fforw you are creating an object that represent that link that you are creating / expressing 17541 2013-11-14 17:52:56 marclar SubtleGradient: yeah; this problem is actually related to using protractor for AngularJS testing... karma is running fine without reopening browser windows 17542 2013-11-14 17:52:56 fforw so it fits "a link" more than "to link" 17543 2013-11-14 17:56:34 petehunt fforw: i built ReactLink and i'm definintely open to changes if you thought some stuff was confusing :) but keep in mind that it works for more than just state -- it's just a pattern for bidirectional data flow 17544 2013-11-14 17:57:18 fforw petehunt: well.. yeah.. and you aptly named ReactLink, react-link 17545 2013-11-14 17:57:36 fforw petehunt: but the mixin names are strange, aren't they? 17546 2013-11-14 17:57:51 petehunt which one? LinkedStateMixin? 17547 2013-11-14 17:58:02 fforw petehunt: yeah.. and its method "linkState" 17548 2013-11-14 17:58:16 fforw linkState sounds like it links some state, not like it creates a link 17549 2013-11-14 17:58:25 petehunt fforw: would you prefer: LinkableStateMixin and createLinkForState()? 17550 2013-11-14 17:58:43 fforw petehunt: or StateLinkMixin and createStateLink 17551 2013-11-14 17:59:26 petehunt fforw: not bad :) another alternative: linkForState() 17552 2013-11-14 17:59:39 petehunt fforw: want to open an issue or pull request? 17553 2013-11-14 17:59:50 petehunt (i need to run in a sec) 17554 2013-11-14 18:00:27 fforw petehunt: I'll open an issue 17555 2013-11-14 18:01:03 petehunt fforw: cool, also include any issues you may have with the documentation 17556 2013-11-14 18:01:26 fforw petehunt: will do 17557 2013-11-14 18:01:58 petehunt gotta run now; see ya! 17558 2013-11-14 18:12:04 benjamn SubtleGradient: the grunt test output is pretty noisy now 17559 2013-11-14 18:12:11 benjamn because it's in JSON format 17560 2013-11-14 18:15:30 SubtleGradient Yeah, needs a better format 17561 2013-11-14 18:18:15 benjamn SubtleGradient: https://github.com/facebook/react/issues/541 17562 2013-11-14 18:43:58 zpao benjamn: where does assert come from? https://github.com/facebook/react/blob/master/vendor/constants.js#L67 17563 2013-11-14 18:44:23 benjamn zpao: derp 17564 2013-11-14 18:44:45 benjamn apparently it's globally defined in node 17565 2013-11-14 18:44:57 benjamn but I'll make sure I require it explicitly 17566 2013-11-14 18:45:32 zpao oh really? they should probably include that on http://nodejs.org/docs/latest/api/globals.html then 17567 2013-11-14 18:47:00 benjamn I just fired up the console and typed assert 17568 2013-11-14 18:47:03 benjamn and lo 17569 2013-11-14 18:50:13 benjamn hope nobody minds I didn't open a PR for that 17570 2013-11-14 18:50:22 hojberg OUTRAGE! 17571 2013-11-14 18:50:31 hojberg :D 17572 2013-11-14 18:50:49 balpert benjamn: that's what phab audits are for :) 17573 2013-11-14 18:54:03 zpao benjamn: yea, me too. kinda crazy 17574 2013-11-14 18:54:21 zpao i believed you, but i didn't want to :) 17575 2013-11-14 18:54:28 benjamn it's like Buffer 17576 2013-11-14 18:54:39 benjamn which you mentioned in that post 17577 2013-11-14 18:54:46 zpao yea, though they at least document that 17578 2013-11-14 18:55:01 benjamn wonder if it's unintentional 17579 2013-11-14 18:55:04 benjamn like there's a 17580 2013-11-14 18:55:09 benjamn assert = require('assert') 17581 2013-11-14 18:55:14 benjamn somewhere in the internals 17582 2013-11-14 18:59:16 zpao https://github.com/joyent/node/blob/master/src/node.js#L528 17583 2013-11-14 19:00:56 zpao i'm guessing it's only still there for compatability 17584 2013-11-14 19:01:47 zpao though... the blame there says that assert was preprocessed out 17585 2013-11-14 19:02:18 zpao so you might be right that they just fucked that up 17586 2013-11-14 19:05:04 zpao it's not in 0.8 or 0.6 so that seems very likely 17587 2013-11-14 19:05:12 benjamn innnteresting 17588 2013-11-14 19:15:21 zpao benjamn: more interesting... node --print 'assert(false)' complains that assert isn't defined. maybe repl is actually debug? 17589 2013-11-14 19:15:42 benjamn zpao: that sounds plausible 17590 2013-11-14 19:15:42 zpao ACTION gets back to real work 17591 2013-11-14 19:29:04 zpao SubtleGradient: soooo i just went through and cleaned up lint warnings/errors from your recent changes. any comments on this? https://github.com/zpao/react/commit/d1fa53ca03fae2e3c6ce8f211de8117a0c04f440 (don't wanna PR, will just push if ok) 17592 2013-11-14 19:29:21 SubtleGradient ACTION looks… 17593 2013-11-14 19:29:23 zpao (mostly using braces around ifs) 17594 2013-11-14 19:34:19 SubtleGradient zpao: seems fine 17595 2013-11-14 19:35:17 SubtleGradient I'll try to adhere to the syntax conventions of the project so you won't need to do that as much anymore. 17596 2013-11-14 19:38:07 zpao SubtleGradient: thanks :) not a huge deal and the win from your changes was worth not being nitpicky. move fast, etc :) 17597 2013-11-14 19:38:20 SubtleGradient indeed 17598 2013-11-14 19:38:32 zpao fwiw, grunt lint catches most of this 17599 2013-11-14 19:39:25 SubtleGradient I used to care deeply about code style. Now I'm trying to only care about things that matter at runtime. It takes effort. 17600 2013-11-14 19:41:59 zpao i probably swing too much the other way and get a bit ocd about code style. unless i'm hacking and then i get bad and name all of my functions "dostuff" 17601 2013-11-14 19:46:05 zpao SubtleGradient: have i said thanks for all the browser testing? because thanks! this is going to be super helpful moving forward 17602 2013-11-14 19:46:19 SubtleGradient zpao: My pleasure 17603 2013-11-14 19:46:45 SubtleGradient Move fast and refactor later 17604 2013-11-14 19:47:00 sspi I think all the commits by SubtleGradient were a secret plot to come closer to the no 1 contributor spot, watch out zpao :P 17605 2013-11-14 19:47:23 SubtleGradient sspi: I haven't actually touched the source code yet ;) 17606 2013-11-14 19:47:34 SubtleGradient Anything that can be trivially changed with an AST transformation isn't worthy of human attention 17607 2013-11-14 19:47:44 zpao sspi: if i have my way, i will eventually have no blame 17608 2013-11-14 19:48:23 SubtleGradient tomocchino: is still in the blame for most of MooTools. Mostly just the whitespace and some brackets, but he's in there 17609 2013-11-14 19:48:53 zpao SubtleGradient: that makes me think... is there a tool that looks at jshintrc and runs your code through escodegen to enforce? sounds like something somebody would have made by now 17610 2013-11-14 19:49:27 SubtleGradient zpao: Sounds like the sort of thing that should exist. 17611 2013-11-14 19:50:08 balpert SubtleGradient: your name appears high here though... https://github.com/facebook/react/graphs/contributors 17612 2013-11-14 19:50:21 balpert thanks to your tendency to make many small commits and not squash them :) 17613 2013-11-14 19:50:21 SubtleGradient Programming a computer using ascii art is pretty dang archaic if you think about it 17614 2013-11-14 19:51:18 SubtleGradient balpert: oops. Need to rebase out some stupid commits I made that artificially boosted me in the rankings. lulz 17615 2013-11-14 19:54:11 SubtleGradient balpert: that graph is actually additions and deletions. I once committed most of /build and then deleted it again in a separate commit. That alone is probly why I'm up there. 17616 2013-11-14 19:54:28 balpert I think it's sorted by number of commits though 17617 2013-11-14 19:54:36 balpert not 100% sure on that though 17618 2013-11-14 19:55:03 vjeux_ zpao: sooooo ... we should be able to launch the cookbook? :P 17619 2013-11-14 20:15:21 chenglou balpert: yes it is 17620 2013-11-14 20:15:33 chenglou zpao: vjeux Im still down for any cookbook change btw so feel free 17621 2013-11-14 20:15:54 vjeux I want to get it shipped so I can write some more :p 17622 2013-11-14 20:16:30 chenglou vjeux: you can put the ideas in the wiki if you want me or something else to do it 17623 2013-11-14 20:16:45 vjeux http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html 17624 2013-11-14 20:21:30 chenglou vjeux: neat, I'll add that 17625 2013-11-14 20:23:24 chenglou vjeux: this reminds me that using properties directly on `this` isn't talked about very much in the docs 17626 2013-11-14 20:23:27 chenglou I'll add that too 17627 2013-11-14 20:24:40 vjeux chenglou: https://github.com/facebook/react/issues/542 17628 2013-11-14 20:24:43 vjeux this would be great too 17629 2013-11-14 20:25:25 vjeux (refresh) 17630 2013-11-14 20:30:10 chenglou ahh true 17631 2013-11-14 20:30:21 chenglou vjeux: what about bind(null, ...)? 17632 2013-11-14 20:30:29 vjeux chenglou: what about it? 17633 2013-11-14 20:30:33 chenglou when it's null it's simply ignored 17634 2013-11-14 20:30:44 vjeux yeah i don't really care 17635 2013-11-14 20:30:55 vjeux just the fact that you can put things after the first argument 17636 2013-11-14 20:31:02 chenglou in this case it doesn't matter because you always bind on `this` but generally speaking for currying I always use null 17637 2013-11-14 20:31:05 vjeux also at fb we use .curry but it's not in standard js 17638 2013-11-14 20:31:10 chenglou kk 17639 2013-11-14 20:31:49 balpert vjeux: is that the same as underscore's partial? 17640 2013-11-14 20:32:32 vjeux balpert: yes 17641 2013-11-14 23:01:22 zpao chenglou: merging that to get it published might be a bit tricky. going to have to learn some new git tricks 17642 2013-11-14 23:17:58 zpao or not. but I'm going to have all the blame in the stable branch until we cut 0.6 17643 2013-11-15 00:04:40 chenglou zpao: back 17644 2013-11-15 00:06:48 zpao chenglou: are you on twitter? 17645 2013-11-15 00:06:55 chenglou zpao: no, why 17646 2013-11-15 00:07:07 zpao was going to mention you 17647 2013-11-15 00:07:13 zpao (tips are up) 17648 2013-11-15 00:07:41 chenglou ah, eh I dont want a twitter account yet lol 17649 2013-11-15 00:07:50 chenglou dont worry about it, but thanks though! 17650 2013-11-15 00:09:07 zpao if you cant get a user id < 1000000, no rush? 17651 2013-11-15 00:17:21 connormcsheffrey zpao: Thanks man! 17652 2013-11-15 00:19:13 zpao connormcsheffrey: no, thank you! apologies for dragging my feet a bit on them, but i'm really happy with where they are 17653 2013-11-15 00:20:04 zpao also, i know somebody who's @connor on twitter, so i almost mentioned him instead of you 17654 2013-11-15 00:20:29 zpao and then he retweeted, so looking at twitter right now is confusing :) 17655 2013-11-15 00:21:58 connormcsheffrey Yeah, Connor Montgomery over at Pinterest, right? 17656 2013-11-15 00:24:53 vjeux WOOOOOOOOOT! :) 17657 2013-11-15 00:28:03 connormcsheffrey I'm excited to get more folks adding entries. It looks like there's a lot of good tip ideas on the wiki. https://github.com/facebook/react/wiki/Tips-(Previously-Cookbook) 17658 2013-11-15 00:28:21 connormcsheffrey I still have one more entry to merge https://github.com/mcsheffrey/react/pull/14 17659 2013-11-15 00:33:42 chenglou zpao: man if I get on twitter I'd waste the rest of the free time I have lol 17660 2013-11-15 00:34:14 zpao connormcsheffrey: do you want to do PRs into your repo and then occasional updates to us? or should we just take PRs directly? if the latter, i'd love for you and chenglou to take the lead on vetting and editing :) 17661 2013-11-15 00:38:25 connormcsheffrey chenglou: lol 17662 2013-11-15 00:39:03 connormcsheffrey zpao: I think the latter too. I'm happy to help with that. 17663 2013-11-15 00:43:10 chenglou zpao: I see a reactjs account on twitter, it's not very active though? 17664 2013-11-15 00:43:45 zpao there's reactjs, which isn't us. i think vjeux has react_js 17665 2013-11-15 00:44:21 zpao quasi,but not really, official 17666 2013-11-15 00:45:00 zpao connormcsheffrey: awesome! i'll be sure to cc you on any tips PRs that come in :) 17667 2013-11-15 00:50:04 vjeux yeah I have react_js 17668 2013-11-15 00:50:27 vjeux but haven't been using it at all 17669 2013-11-15 00:51:28 zpao i think that's fine. would love to have something more official eventually 17670 2013-11-15 01:13:25 chenglou TIL the like button can share to a private chat 17671 2013-11-15 01:13:27 chenglou oh wow 17672 2013-11-15 01:53:09 vjeux fyi, i've asked the guy from mustache-security to take a look at react from a security pov and he seems to be interested 17673 2013-11-15 01:53:09 vjeux https://code.google.com/p/mustache-security/issues/detail?id=1 17674 2013-11-15 01:53:31 vjeux the work he did on the other frameworks is pretty interesting 17675 2013-11-15 01:53:43 vjeux i'll keep you guys posted if he finds anything :) 17676 2013-11-15 02:02:37 chenglou todomvc should include security-related criteria 17677 2013-11-15 02:13:23 vjeux https://github.com/jaubourg/jhp 17678 2013-11-15 02:13:26 vjeux this is pretty legit 17679 2013-11-15 02:13:55 vjeux I don't like the 17743 2013-11-15 14:05:29 fforw will open a pull request once I'm through with this 17744 2013-11-15 14:05:39 fforw preserveAspectRatio was also missing, btw 17745 2013-11-15 14:05:46 fforw back to the problem 17746 2013-11-15 14:06:01 fforw I think I found a solution that isn't too intrusive.. 17747 2013-11-15 14:06:27 fforw I've been creating a registry for these focusable elements and have the mixin call that on mount or after update 17748 2013-11-15 14:06:47 fforw so I should always know about the right element id to feed to the 17749 2013-11-15 14:07:15 fforw was just wondering if there's an easier way of knowing about the react component tree 17750 2013-11-15 14:07:49 syranide fforw: well you have access to the parent (I think?) and all the children 17751 2013-11-15 14:08:10 fforw (the focus technic will in the end create an out-of-screen focusable proxy for every to be focused element.. that way browsers and screen-readers should be happy alike) 17752 2013-11-15 14:08:35 syranide but it seems like this is something that is best done outside of react, but that it in the end feeds back necessary events into react 17753 2013-11-15 14:09:44 fforw does react focus bubble? 17754 2013-11-15 14:10:32 syranide fforw: as the regular doesn't I don't see why it should 17755 2013-11-15 14:10:50 fforw syranide: well.. the regular change also doesn't trigger per key 17756 2013-11-15 14:11:06 fforw I'll just use jQuery focusin/focusout 17757 2013-11-15 14:11:23 fforw so it will be part of the "outside react" 17758 2013-11-15 14:11:29 syranide fforw: yeah, react does synthetic events, and they decided deviate on "change" (which maps to input/keydown I think) 17759 2013-11-15 14:12:09 fforw I wished it would allow to setup an event bouncing.. 17760 2013-11-15 14:12:24 fforw if it already does the per-key 17761 2013-11-15 14:12:46 syranide fforw: you could always look through the source, and since it's all synthetic events, you could probably hijack it in whatever way you want 17762 2013-11-15 14:14:54 fforw syranide: could do.. for now it's easier to just use teh jquery 17763 2013-11-15 17:04:40 jhamm i watched Tom Occhino and Jordan Walke on youtube today talk about how Instagram was getting rid of its models with react.js 17764 2013-11-15 17:04:43 jhamm could someone explain how 17765 2013-11-15 17:04:58 jhamm I understand losing the view, but the models....I must have a disconnect somewhere 17766 2013-11-15 17:06:18 zpao hmm, i don't remember the details of that talk, and instagram hasn't gotten rid of its models yet 17767 2013-11-15 17:07:31 zpao but if i had to guess, the point is that react encourages a data model where at any given point in time in a component, the data you are given is immutable and you have a central place that notifies of changes and sends new copies. this is how facebook uses react in a lot of places 17768 2013-11-15 17:08:42 zpao since backbone models aren't really immutable, you're encouraged to modify them directly which might or might not update other views 17769 2013-11-15 17:12:13 zpao jhamm: ^^ 17770 2013-11-15 17:13:23 zpao this model of immutable data in views is something we call flux. we've talked about it at a high level but haven't shown specific implementations. http://www.youtube.com/watch?v=unEuPvA2wnM talked about the idea a bit 17771 2013-11-15 17:13:45 chenglou balpert: webpack is neaaaaat 17772 2013-11-15 17:13:58 chenglou seems still in early phase though? 17773 2013-11-15 17:15:38 jhamm they talked about flux too, any plans to talk about it a bit in the future 17774 2013-11-15 17:15:49 jhamm maybe give some implementation details 17775 2013-11-15 17:17:06 chenglou balpert: oops forgot it's only 9 am there, I'll ping you again in an hour lol 17776 2013-11-15 17:17:32 baranaby I'm trying to write some template helpers I can reuse, but inserting html into a component seems like a huge pain... :/ 17777 2013-11-15 17:18:25 baranaby I want a template that does like
{formatNumberDelta(deltaValue)}
that can become
+4
17778 2013-11-15 17:24:17 baranaby I guess I'll just construct things as separate components, hmm 17779 2013-11-15 17:25:18 zpao jhamm: yea, i think we need to put an implementation since this keeps coming up 17780 2013-11-15 17:26:38 jhamm zpao: it is hard for me to wrap my head around immutable state in the view. 17781 2013-11-15 17:26:46 jhamm jhamm: i would like to see a bit 17782 2013-11-15 17:29:35 balpert baranaby: just have function formatNumberDelta(delta) { return {delta}; } or whatever and it'll work 17783 2013-11-15 17:30:01 baranaby balpert: you're right, I was coming at it from the perspective of making my old handlebars helpers function properly 17784 2013-11-15 17:30:15 balpert baranaby: np, easy to get mixed up 17785 2013-11-15 17:30:58 zpao jhamm: i'll try to expedite getting some code out 17786 2013-11-15 17:31:24 jhamm zpao: Thanks for the info. 17787 2013-11-15 19:39:18 balpert zpao: I voted you up on SO so now you have 11 points -- one more upvote and you'll be able to upvote others :) 17788 2013-11-15 19:39:43 syranide what's this?! *hails the downvote army* 17789 2013-11-15 19:40:10 zpao balpert: http://i.imgflip.com/2cp1.jpg 17790 2013-11-15 19:40:26 balpert what even is that 17791 2013-11-15 19:40:51 balpert syranide: downvotes only count as -2 so zpao will still be net +8 if we all do that 17792 2013-11-15 19:41:16 syranide balpert: you underestimate the power of the internet 17793 2013-11-15 19:41:19 syranide hehe 17794 2013-11-15 19:42:06 zpao balpert: hmm, can't find on knowyourmeme... so http://memegenerator.net/Ill-Just-Wait-Here 17795 2013-11-15 19:42:22 chenglou balpert: where's your meme skillz 17796 2013-11-15 19:43:26 chenglou zpao: now you have 21 points 17797 2013-11-15 19:43:32 chenglou zpao: happy upvoting lol 17798 2013-11-15 19:43:41 zpao woooo 17799 2013-11-15 19:43:54 zpao i'll catch up to you one day balpert 17800 2013-11-15 19:44:05 zpao 200000000000000000 pts 17801 2013-11-15 19:44:32 balpert I'm mostly angry that John Resig has more rep than me... with his 10 answers http://stackoverflow.com/users/6524/john-resig 17802 2013-11-15 19:45:40 zpao barely 17803 2013-11-15 19:46:07 zpao now that i can upvote you, and you answer every react question before anybody else gets the email, you'll pass him in no time 17804 2013-11-15 19:46:29 zpao ACTION still loves http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags 17805 2013-11-15 19:47:16 chenglou I wonder how balpert manages his emails 17806 2013-11-15 19:49:10 Daniel15 Hmm I haven't answered anything on StackOverflow in a while. I need to up my rep :P http://stackoverflow.com/users/210370/daniel-lo-nigro 17807 2013-11-15 19:50:05 balpert chenglou: very carefully. 17808 2013-11-15 21:36:54 SubtleGradient zpao: ? 17809 2013-11-15 21:37:11 SubtleGradient sebmarkbage: ahoy 17810 2013-11-15 21:37:31 SubtleGradient sebmarkbage: code coverage ? https://github.com/facebook/react/pull/550 17811 2013-11-15 21:50:14 SubtleGradient benjamn: code coverage tasks ? https://github.com/facebook/react/pull/550 17812 2013-11-15 21:55:21 zpao SubtleGradient: sweet! will take a look in a bit 17813 2013-11-15 21:55:47 SubtleGradient grunt test:coverage 17814 2013-11-15 21:56:22 SubtleGradient Next up I plan to write some memory usage tests so we can track out memory usage over time. 17815 2013-11-15 21:57:43 SubtleGradient My initial investigations show that React uses ~36 event listeners. Not sure what's up with that yet 17816 2013-11-15 21:59:49 benjamn listeners gonna listen 17817 2013-11-15 22:04:41 Daniel15 Listen to ALL THE EVENTS 17818 2013-11-15 22:14:09 balpert SubtleGradient: that's currently the case. 17819 2013-11-15 22:14:55 SubtleGradient Yes, yes it is. 17820 2013-11-15 22:18:33 petehunt SubtleGradient: someone is working on that 17821 2013-11-15 22:18:43 SubtleGradient k 17822 2013-11-15 22:18:53 petehunt it's our biggest perf issue 17823 2013-11-15 22:18:54 petehunt tbh 17824 2013-11-15 22:19:04 petehunt (depending on what you're doing that is) 17825 2013-11-15 22:19:31 petehunt SubtleGradient: https://github.com/facebook/react/pull/462 (the big issue is that it listens to mousewheel always which kills hw acceleration) 17826 2013-11-15 22:59:04 petehunt chenglou: yt? 17827 2013-11-15 22:59:18 chenglou petehunt: yeah momentarily 17828 2013-11-15 22:59:36 chenglou petehunt: sup 17829 2013-11-15 22:59:50 petehunt chenglou: sick work on the cookbook :) when you get a chance since you are the docs master, want to add a little note in the ReactLink docs about how you shouldn't use it unless you've built a form with react before? 17830 2013-11-15 23:01:47 chenglou petehunt: it should be in the main docs for ReactLink here: 17831 2013-11-15 23:01:48 chenglou https://github.com/chenglou/react/commit/ff51a23aeabc06701fbf99ebf676169c5e55e402#diff-d6652738dfcfae32e7e7ac63ab2fb304R12 17832 2013-11-15 23:01:58 chenglou petehunt: travis' stuck though 17833 2013-11-15 23:02:11 chenglou also thanks. Docs master sounds neat lol 17834 2013-11-15 23:02:22 zpao chenglou: oh right. need to get that in 17835 2013-11-15 23:04:31 petehunt chenglou: oh when did that happen? is that merged/PR'd? 17836 2013-11-15 23:04:38 petehunt (i didn't see it on the site) 17837 2013-11-15 23:04:42 petehunt also you're the man 17838 2013-11-15 23:06:30 chenglou petehunt: not merged 17839 2013-11-15 23:07:31 chenglou also connormcsheffrey did all the technical part =) 17840 2013-11-15 23:07:56 petehunt well both of you guys did a lot of great work 17841 2013-11-15 23:08:04 petehunt very fortunate to have this stuff :) 17842 2013-11-15 23:24:49 shohyuken anybody getting anything for black friday? :) 17843 2013-11-15 23:26:35 zpao i don't celebrate black friday, so probably not 17844 2013-11-15 23:28:31 petehunt black friday is the worst 17845 2013-11-15 23:49:22 matnel mm. I'm working an accelometer mixin (and other sensor stuff after that), I currently have just a simple system that dumps raw oreitnation data to component, but now started to think what actually would make most sense from developers' view... something like a function which would always return the latest datapoint? 17846 2013-11-15 23:49:37 matnel the deviceorientation sensor dumps a lot of stuff... 17847 2013-11-15 23:50:11 matnel or just something that would tell if when device is rotated in direction x? 17848 2013-11-15 23:55:59 petehunt matnel: bind a state variable to the current orientation vector 17849 2013-11-15 23:56:17 petehunt i.e. whenever you get the evnet call setState() 17850 2013-11-15 23:56:57 matnel mm. yeah :) 17851 2013-11-15 23:58:52 baranaby Hey folks, is there a way to know how many children my component was passed in? 17852 2013-11-15 23:59:12 chenglou baranaby: this.props.children 17853 2013-11-15 23:59:33 zpao Array.isArray(this.props.children) ? this.props.children.length : 1 17854 2013-11-15 23:59:37 baranaby it doesn't have length/size that I can tell, chenglou? 17855 2013-11-15 23:59:41 zpao err, i guess it could be 0 17856 2013-11-15 23:59:42 chenglou baranaby: http://facebook.github.io/react/tips/children-props-type.html 17857 2013-11-15 23:59:44 baranaby really... why am I not seeing that 17858 2013-11-16 00:00:09 chenglou hell yeah, linking to tips =) 17859 2013-11-16 00:00:23 zpao this.props.children ? (Array.isArray(this.props.children) ? this.props.children.length : 1) : 0 17860 2013-11-16 00:00:34 baranaby I mean, it's not zero 17861 2013-11-16 00:00:47 baranaby there's a nested set of props.children.props.children.props.children 17862 2013-11-16 00:00:50 baranaby which IS an array 17863 2013-11-16 00:01:02 zpao ok, so props.children in a single component then 17864 2013-11-16 00:01:14 chenglou baranaby: check that tips page, it warns you of this 17865 2013-11-16 00:01:17 zpao as is props.children.props.children 17866 2013-11-16 00:01:27 baranaby rightyo 17867 2013-11-16 00:01:29 baranaby ACTION reads 17868 2013-11-16 00:01:31 petehunt zpao: mapChildren() into addons? :P 17869 2013-11-16 00:01:31 baranaby thanks guys :) 17870 2013-11-16 00:01:44 baranaby ah, yes! petehunt pretty please 17871 2013-11-16 00:01:49 syranide zpao: I'm curios, is that array allocation actually worth all the trouble the developer has to go through? 17872 2013-11-16 00:01:56 syranide *saving array 17873 2013-11-16 00:02:09 zpao syranide: probably 17874 2013-11-16 00:02:18 zpao petehunt: should all be on this.* 17875 2013-11-16 00:03:36 baranaby I guess I'm still a bit confused as to the nesting levels in props.children 17876 2013-11-16 00:04:16 zpao you shouldn't look beyond props.children 17877 2013-11-16 00:04:25 chenglou syranide: personally I dont think it is, but it might have performance impact. It'd be cool if it becomes insignificant in the future and then this tip can be removed 17878 2013-11-16 00:05:01 zpao syranide: let's step back though... what are you trying to do? 17879 2013-11-16 00:05:37 baranaby zpao: ok so I'm nesting several levels of markup, but there's no way to analzye it through props.children? like a css selector query into it before it's mounted/in a fragment? that'd be awesome 17880 2013-11-16 00:05:41 syranide zpao: I just mean from a developer perspective, we are talking about something that MAY be null, an object, or an array ... why not simply just an array 17881 2013-11-16 00:06:14 syranide zpao: I get the performance/memory thing, but in the scale of things, I can't imagine it being noticeable 17882 2013-11-16 00:07:44 zpao syranide: i hear you, it's awkward. i fought for all arrays too. i think we did it for a short time but we got wins doing this. i don't know all the details though 17883 2013-11-16 00:07:52 petehunt syranide: it is if you reconcile every frame at 60 fps :) 17884 2013-11-16 00:07:54 bheist Are event handlers auto-wired when using renderComponentToString? I've browsed through the documentation but haven't seen any examples of renderComponentToString w events. 17885 2013-11-16 00:08:23 petehunt bheist: if you put the result in a DOM node and then call React.renderComponent() on that DOM node it will do the wiring for you 17886 2013-11-16 00:08:41 syranide petehunt: yeah, I get that, but there must be 10x more objects and arrays being created elsewhere anyway to support all the stuff happening, but anyway... it's "easy" enough to test 17887 2013-11-16 00:08:43 zpao syranide: i thnk the goal is eventually to get to a world where you don't know that props.children is a thing and you only deal with children via helper methods 17888 2013-11-16 00:08:56 balpert bheist: nope, you need to call renderComponent with the same params once the page loads 17889 2013-11-16 00:09:05 bheist @petehunt: that's what I was missing. thanks! 17890 2013-11-16 00:09:06 balpert jk petehunt just said that 17891 2013-11-16 00:09:08 petehunt syranide: right, it's something we're moving towards. not there yet 17892 2013-11-16 00:09:22 petehunt i want to get to the point where you can use react without a single object allocation 17893 2013-11-16 00:09:24 petehunt :) 17894 2013-11-16 00:09:28 syranide petehunt: :D 17895 2013-11-16 00:10:07 zpao syranide: petehunt smokes a lot of crack. it sounds like pretty good crack though, so i might try it soon 17896 2013-11-16 00:10:14 petehunt hahahahaha 17897 2013-11-16 00:10:16 syranide zpao: haha 17898 2013-11-16 00:10:24 baranaby I'm sure bheist is really grateful guys, as am I ;) 17899 2013-11-16 00:10:25 baranaby thanks! 17900 2013-11-16 00:11:10 syranide zpao: if it makes you guys work on react faster, then legalize we shall! ;) 17901 2013-11-16 00:13:19 syranide bah, I'm just longing for the day when I get time switch over to react 17902 2013-11-16 00:17:51 zpao syranide: i thought at sentence was going to end differently 17903 2013-11-16 00:18:03 zpao "i'm just longing for the day i can smoke crack... legally" 17904 2013-11-16 00:18:13 syranide zpao: haha, not that kind of guy ;) 17905 2013-11-16 00:18:35 syranide although, the IE11 team sure smoked some, because they messed up the devtools *bad* 17906 2013-11-16 00:19:02 zpao probably just hired safari 6 devtools team 17907 2013-11-16 00:19:34 syranide zpao: have you seen it? 17908 2013-11-16 00:20:07 zpao looking at http://msdn.microsoft.com/en-us/library/ie/bg182326%28v=vs.85%29.aspx 17909 2013-11-16 00:20:23 zpao really investing in F12 17910 2013-11-16 00:20:38 zpao doesn't look that terrible 17911 2013-11-16 00:20:58 syranide it's quite powerful I believe, but they decided that unless you have it cover half your screen, you should click-scroll through icons to get to the tools you want 17912 2013-11-16 00:22:37 syranide also, it really loves to freeze, all the time 17913 2013-11-16 01:26:05 balpert Chrome Canary dev tools just got worse too IMO 17914 2013-11-16 01:53:19 Daniel15 I'm glad the IE team call them "F12 developer tools" now at least, rather than just "F12 tools" 17915 2013-11-16 01:54:00 Daniel15 Still a stupid name though; why not "developer tools"? 17916 2013-11-16 10:59:52 mhamm is there a Sublime Text 2 plugin to help with react 17917 2013-11-16 11:00:01 mhamm my linter is blowing up with the template now 17918 2013-11-16 19:38:58 chenglou balpert: 17919 2013-11-16 19:53:55 chenglou petehunt: not familiar with ruby. I ran a rake on /docs and it says require("commoner").version(... TypeError: Object # has no method 'version' 17920 2013-11-16 19:54:10 chenglou =( 17921 2013-11-16 19:54:17 chenglou anyone here? 17922 2013-11-16 19:55:18 chenglou thought I got all the dependencies up to date 17923 2013-11-16 19:58:49 chenglou wow nvm, npm dep problem 17924 2013-11-16 22:09:39 balpert chenglou: missing a semicolon on line 21 17925 2013-11-16 22:25:39 chenglou balpert: ugh thanks 17926 2013-11-16 22:25:46 chenglou linter no longer works in ST for some reason 17927 2013-11-16 22:35:13 chenglou also balpert petehunt go vote for react for dash man 17928 2013-11-16 22:35:30 petehunt ? 17929 2013-11-16 22:35:31 balpert hmm? 17930 2013-11-16 22:36:10 chenglou https://github.com/facebook/react/issues/272 17931 2013-11-16 22:36:13 chenglou http://kapeli.com/dash 17932 2013-11-16 22:36:17 chenglou I can't live without dash 17933 2013-11-16 22:36:24 chenglou especially with this subpar internet connection 17934 2013-11-16 22:43:16 balpert solution: get better internet? 17935 2013-11-16 22:44:09 chenglou i am trying, but our provider's been screwing with us for a month now, still trying to resolve it 17936 2013-11-16 22:45:01 chenglou but dash is just generally super useful 17937 2013-11-16 22:45:30 chenglou maybe I'll convert the react docs for it one day 17938 2013-11-16 22:45:32 chenglou one day... 17939 2013-11-17 02:30:58 Makorak Hi Everyone! 17940 2013-11-17 02:31:12 balpert hi 17941 2013-11-17 02:34:12 Makorak I guess we can do multilingual language with ReactJS, but couldn't figure out how to implement. Could you brief the process or share me the url of tutorial on how to do this? 17942 2013-11-17 02:35:19 Makorak I've tried to google it, but with few results and are irrelevant. 17943 2013-11-17 02:40:19 balpert do you mean for displaying a translated interface? 17944 2013-11-17 05:53:34 vjeux chenglou: can you use gh-pages instead of rawgithub for http://rawgithub.com/chenglou/react-lights-out/master/index.html 17945 2013-11-17 05:53:49 vjeux if I link rawgithub on the community roundup they are going to shut me down :( 17946 2013-11-17 06:25:41 Daniel15 Surprised I haven't seen rawgithub.com used for phishing attacks. It seems like such an easy way to host nasty things o_O 17947 2013-11-17 15:37:49 dkreuter I have a question 17948 2013-11-17 15:37:51 dkreuter when I use 17949 2013-11-17 15:38:04 dkreuter React.DOM.div({}, ["text1", "text2"]) 17950 2013-11-17 15:38:08 dkreuter I get two spans 17951 2013-11-17 15:38:18 dkreuter (is that right?) 17952 2013-11-17 15:38:28 dkreuter can I specify attributes for them? 17953 2013-11-17 15:38:50 dkreuter or tell React to create DOM TextNodes instead? 17954 2013-11-17 15:45:14 dkreuter … okay, I guess I figured it out: https://github.com/facebook/react/blob/master/src/core/ReactTextComponent.js 17955 2013-11-17 17:41:05 vjeux http://stackoverflow.com/questions/20033522/how-do-i-render-reactjs-component-as-an-attribute-of-bootstrappopover-using-th 17956 2013-11-17 17:41:13 vjeux someone wants to answer him on stackoverflow? 17957 2013-11-17 18:10:32 vjeux pickels: hey 17958 2013-11-17 18:10:59 vjeux pickels: are you still working on http://sproutsheet.site44.com/ ? 17959 2013-11-17 18:11:05 vjeux i'd like to feature it! 17960 2013-11-17 18:12:46 balpert "its Facebook's root" sounds weird 17961 2013-11-17 18:13:06 vjeux balpert: i spent 10 minutes trying to come up with something good 17962 2013-11-17 18:13:10 vjeux this is the least bad I could find :p 17963 2013-11-17 18:13:40 vjeux i want to say that people outside of fb are starting to get react :p 17964 2013-11-17 18:13:55 balpert "its roots at Facebook" would be much better 17965 2013-11-17 18:14:00 balpert still not totally great 17966 2013-11-17 18:15:26 vjeux afk food 17967 2013-11-17 18:15:30 pickels vjeux: I am 17968 2013-11-17 18:15:49 pickels vjeux: getting closer though but it's a bit of a side-project so can't work on it all the time 17969 2013-11-17 18:16:21 pickels vjeux: I'll ping you when I it's online. 17970 2013-11-17 18:22:49 vjeux pickels: thanks :) 17971 2013-11-17 18:32:57 vjeux balpert: I would just skip this altogether. 17972 2013-11-17 18:33:05 vjeux you don't want the example? 17973 2013-11-17 18:33:19 balpert well, the post is kind of long 17974 2013-11-17 18:33:29 balpert and the example isn't super impressive 17975 2013-11-17 18:33:38 balpert I mean, any normal solution you would write would also maintain the selection 17976 2013-11-17 18:33:44 balpert because you wouldn't write to .innerText 17977 2013-11-17 18:35:14 vjeux balpert: writing a solution in a declarative way that doesn't change the text is pretty hard 17978 2013-11-17 18:35:43 vjeux anyway, this one is a good example of small component written in react so I want to show it :p 17979 2013-11-17 18:35:53 vjeux i already have like 10 things for the next roundup 17980 2013-11-17 18:37:10 vjeux i'm going to try and write them more often :p 17981 2013-11-17 18:42:32 balpert you might consider being more selective ;) 17982 2013-11-17 18:42:38 balpert that way everything in every roundup is really cool 17983 2013-11-17 18:43:07 vjeux balpert: i'd rather doing it more often than being more selective :p 17984 2013-11-17 18:43:33 vjeux i've been slacking off lately, doing it once every month 17985 2013-11-17 18:43:48 vjeux i should be doing it every week 17986 2013-11-17 18:44:26 vjeux when i was working on sc2mapster i would do it every day :p 17987 2013-11-17 18:44:43 vjeux but i was working on it way more than i can do right now :p 17988 2013-11-17 18:45:04 balpert okay -- I just meant it may be more impressive if whenever someone sees one everything is awesome 17989 2013-11-17 18:45:14 balpert I'm afrid if it's too often people will just tune it out as noise 17990 2013-11-17 18:45:15 balpert but I'm not sure 17991 2013-11-17 18:46:04 vjeux from my experience, it's better to do it more often so that people come back and keep reading it 17992 2013-11-17 18:47:05 vjeux it's also good to be able to feature small things, this way people that do those things are really happy they are being featured and will promote it :p 17993 2013-11-17 18:47:22 vjeux and will be more likely to use react in bigger projects 17994 2013-11-17 18:48:52 vjeux also, I want to have diversity in the roundups 17995 2013-11-17 18:49:04 vjeux having small snipets of code that you can play with is good :) 17996 2013-11-17 19:16:24 chenglou vjeux: lol it was a gh-page except rawgithub is so hassle-free 17997 2013-11-17 19:16:31 chenglou vjeux: but sure, I'll change it back, sec. 17998 2013-11-17 19:16:45 vjeux chenglou: yeah, rawgithub is awesome 17999 2013-11-17 19:17:04 vjeux chenglou: what i did for those kind of projects is to remove the master branch 18000 2013-11-17 19:17:08 chenglou and no one (?) so far abuses it! love the community lol 18001 2013-11-17 19:17:09 vjeux and only use gh-pages 18002 2013-11-17 19:17:28 chenglou ehh... woah why didn't I think of that 18003 2013-11-17 19:17:51 vjeux chenglou: people "abuse" rawgithub all the time, they take down on per page basis 18004 2013-11-17 19:23:05 chenglou vjeux: http://chenglou.github.io/react-lights-out/ 18005 2013-11-17 19:23:45 vjeux chenglou: yay 18006 2013-11-17 19:24:04 chenglou lol I love the Intro to React Framework chart 18007 2013-11-17 19:24:10 chenglou component component component component 18008 2013-11-17 19:24:13 vjeux :P 18009 2013-11-17 19:24:15 chenglou summarizes stuff pretty well 18010 2013-11-17 19:32:37 vjeux balpert: i like your component proptype :) 18011 2013-11-17 19:32:55 balpert I wanted it and then I was like, why doesn't this exist. 18012 2013-11-17 19:34:45 vjeux balpert: do you know if Props.instanceOf(SomeComponent) works? 18013 2013-11-17 19:34:52 vjeux I think it should 18014 2013-11-17 19:34:52 balpert I don't 18015 2013-11-17 20:01:17 balpert vjeux: http://jsfiddle.net/spicyj/q6hj7/ 18016 2013-11-17 20:01:58 vjeux Uncaught Error: Invariant Violation: replaceProps(...): You called `setProps` or `replaceProps` on a component with an owner. This is an anti-pattern since props will get reactively updated when rendered. Instead, change the owner's `render` method to pass the correct value as props to the component where it is created. 18017 2013-11-17 20:02:05 vjeux got this a lot after using it for a while 18018 2013-11-17 20:03:17 balpert oh hrm 18019 2013-11-17 20:04:25 balpert this is because content={
The time is
} is instantiated within the PopoverDemo owner 18020 2013-11-17 20:04:48 vjeux this is pretty cool 18021 2013-11-17 20:05:23 vjeux in 30 lines you managed to use the bootstrap popover and made it react compatible 18022 2013-11-17 20:05:58 balpert more like 70 lines 18023 2013-11-17 20:06:14 vjeux yeah :p 18024 2013-11-17 20:06:32 balpert bootstrap is annoying 18025 2013-11-17 20:14:05 vjeux btw, you never use oldSetContent 18026 2013-11-17 20:14:12 vjeux $.fn.popover.Constructor.DEFAULTS.react 18027 2013-11-17 20:14:22 vjeux and i feel like you don't need to override this 18028 2013-11-17 20:14:29 vjeux it's going to be undefined if not set 18029 2013-11-17 20:14:32 vjeux so falsy? 18030 2013-11-17 20:16:04 balpert thanks, it was supposed to be return oldSetContent.call(this); 18031 2013-11-17 20:16:19 balpert yeah, it will be falsy 18032 2013-11-17 20:19:38 balpert ugh, I don't know what to do about the owner thing 18033 2013-11-17 20:19:53 balpert I guess I can make it just render once 18034 2013-11-17 20:20:16 vjeux why is it being destroyed? 18035 2013-11-17 20:20:33 vjeux React.unmountComponentAtNode($title[0]); 18036 2013-11-17 20:20:34 vjeux here? 18037 2013-11-17 20:20:55 balpert if you're switching from having a title to not having one 18038 2013-11-17 20:21:01 balpert ...which isn't actually supported in my impl right now :) 18039 2013-11-17 20:21:07 balpert but that's not the problem 18040 2013-11-17 20:23:01 balpert okay, http://jsfiddle.net/spicyj/q6hj7/1/ 18041 2013-11-17 20:23:35 vjeux why the .html() ? 18042 2013-11-17 20:24:16 balpert how do you want to determine if it's empty? 18043 2013-11-17 20:24:31 vjeux i mean, why do you want to know if it's empty? 18044 2013-11-17 20:24:37 vjeux i didn't understand the issue 18045 2013-11-17 20:24:47 balpert oh, I only want to render once 18046 2013-11-17 20:24:54 balpert because of this stupid owner thing 18047 2013-11-17 20:25:10 vjeux can you explain what the issue was? :p 18048 2013-11-17 20:25:20 vjeux anyway, another time i have to go :p 18049 2013-11-17 20:25:24 vjeux looks good! 18050 2013-11-17 20:48:17 balpert k, posted: http://stackoverflow.com/a/20035981/49485 18051 2013-11-17 20:59:15 balpert vjeux: https://github.com/facebook/react/issues/557 <-- lmk if that makes sense 18052 2013-11-17 22:41:23 chenglou how is #reactjs gonna handle two balperts 18053 2013-11-17 22:41:53 balpert_ I'll probably leave this one eventually maybe 18054 2013-11-17 22:41:58 balpert no promises though 18055 2013-11-18 03:00:22 vjeux balpert: thanks for the explanation and pull request :) 18056 2013-11-18 03:48:28 balpert vjeux: np 18057 2013-11-18 03:52:15 balpert petehunt: lmk if I'm not understanding something here 18058 2013-11-18 03:57:59 petehunt balpert: ill look later. any feedback on http://petehunt.github.io/react-touch ? 18059 2013-11-18 04:01:17 vjeux petehunt: thanks for adding the option to view it on web :p 18060 2013-11-18 04:01:28 petehunt vjeux: still havent hooked up mouse events yet though... 18061 2013-11-18 04:01:35 vjeux petehunt: don't need to 18062 2013-11-18 04:01:38 vjeux you can emulate them on chrome 18063 2013-11-18 04:02:33 vjeux this performs pretty well on web too :p 18064 2013-11-18 04:05:42 balpert petehunt: if you click on the nav link you're currently on, it does nothing -- this is confusing mostly because of the gray tap highlight 18065 2013-11-18 04:06:07 balpert I stared at it for a bit trying to figure out why it was broken 18066 2013-11-18 04:07:48 balpert is it just me or does the frosted glass make the text blue in Chrome? 18067 2013-11-18 04:08:28 balpert a little weird that you can scroll with the nav open 18068 2013-11-18 04:09:25 balpert also I wish zynga scroller's easing was better 18069 2013-11-18 04:09:34 balpert I spent a little while trying to reverse-engineer UIScrollView 18070 2013-11-18 04:09:36 balpert didn't finish yet 18071 2013-11-18 07:32:20 sspi anybody know how I can mock the EventListener? 18072 2013-11-18 07:32:46 sspi I basically want to make sure listen is only called once 18073 2013-11-18 07:35:14 sspi petehunt: ^ 18074 2013-11-18 07:35:34 krs soo, about writing tests 18075 2013-11-18 07:35:59 krs is there any good match of testing framework or similar to use_ 18076 2013-11-18 07:36:05 krs and a ? somewhere 18077 2013-11-18 07:36:22 petehunt sspi: require('mock-modules').mock('EventListener') before import *should* do it 18078 2013-11-18 07:37:29 petehunt krs: what sort of testing do you want to do? we don't currently prescribe anything. ReactTestUtils is in the repo but not exposed. basically it should be pretty easy to drop into an existing test framework. 18079 2013-11-18 07:38:04 krs ah ill take a look at it 18080 2013-11-18 07:38:14 sspi petehunt: tnx! 18081 2013-11-18 07:38:45 petehunt sspi: our test system actually does something called automocking where everything is mocked by default 18082 2013-11-18 07:39:07 petehunt sspi: we just have a blacklist somewhere that keeps the react core out of automocking. so if calling .mock() explicitly doesn't do it then we have to look into overriding that blacklist 18083 2013-11-18 07:39:29 sspi alright, I thought I saw something in that direction as you explicitly say: dontMock 18084 2013-11-18 07:39:44 petehunt yes 18085 2013-11-18 07:40:29 petehunt krs: check this out: http://jsfiddle.net/tKJbL/ 18086 2013-11-18 07:40:48 petehunt you can basically either assert on the generated markup or twiddle props/state and introspect the result of render() 18087 2013-11-18 07:41:26 petehunt krs: i think that gets you pretty far. the other thing i would want is mocking of components returned by render() -- you should be able to use any off-the-shelf JS mocking framework for that 18088 2013-11-18 07:41:35 krs yeah, ty! 18089 2013-11-18 07:41:48 krs a small typo on row 248 in that testutils file btw =) 18090 2013-11-18 07:41:59 petehunt krs: if you want to trigger an event you could explicitly call the callbacks provided on props. 18091 2013-11-18 07:42:49 krs Ill give it a test and see how it goes 18092 2013-11-18 07:44:28 petehunt krs: actually... want to send a pull request? 18093 2013-11-18 07:44:34 krs sure 18094 2013-11-18 07:44:36 petehunt krs: if you added ReactTestUtils to main.js 18095 2013-11-18 07:44:46 petehunt then people could require('react-tools').ReactTestUtils and have it 18096 2013-11-18 07:46:24 petehunt krs: yeah if you sent a PR for that i think it'd get in, then we'd file a task to get it documented. 18097 2013-11-18 07:48:38 sspi btw. I get json objects as test results currently... which sucks 18098 2013-11-18 07:49:59 petehunt sspi: ? 18099 2013-11-18 07:50:04 petehunt oh i dno 18100 2013-11-18 07:50:24 sspi hmmm, maybe I need to pull again... 18101 2013-11-18 07:50:25 sspi or I borked my local React 18102 2013-11-18 07:51:53 balpert sspi: I vote for pull again 18103 2013-11-18 07:52:04 balpert I know benjamn was complaining about that but when I ran tests earlier today it was all fine 18104 2013-11-18 07:52:19 sspi balpert: ah okay, will do so :) tnx 18105 2013-11-18 07:54:04 balpert sspi: though maybe not? https://github.com/facebook/react/issues/541 is still open 18106 2013-11-18 07:54:26 balpert sspi: you're running grunt test? 18107 2013-11-18 07:54:31 sspi yup 18108 2013-11-18 07:55:27 balpert yeah, mine just prints out lines like: 18109 2013-11-18 07:55:28 balpert >> ok 31 - ReactComponentLifeCycle should not throw when updating an auxiliary component. 18110 2013-11-18 07:56:13 sspi ah crap, gotta go... commuting time is over 18111 2013-11-18 08:36:47 petehunt balpert: yt? 18112 2013-11-18 08:36:59 balpert yup 18113 2013-11-18 08:38:15 petehunt balpert: i made the demo better 18114 2013-11-18 08:41:24 balpert nice! 18115 2013-11-18 08:41:36 balpert I don't suppose there's a way to override the Safari pull-from-left gesture 18116 2013-11-18 08:43:27 petehunt balpert: you can add to homescreen 18117 2013-11-18 08:43:43 balpert yup, just did that! 18118 2013-11-18 08:43:44 balpert cool 18119 2013-11-18 09:01:33 krs when using a component for a list-row, should i pass on the key-attribute to the actual LI tag rendered? 18120 2013-11-18 09:03:48 petehunt krs: if it's dynamic, yes 18121 2013-11-18 09:04:51 balpert krs: can you explain a little more? 18122 2013-11-18 09:06:18 krs oh right 18123 2013-11-18 09:07:46 balpert krs: you should use keys in something like rows.map(function(row) { return ; }) 18124 2013-11-18 09:07:54 krs i do, in render, children = rows.map(.. return ); return
    {children}
18125 2013-11-18 09:07:56 krs yeah 18126 2013-11-18 09:08:03 balpert but the actual implementation of ListRow render should just be return
  • ...
  • ; without a key 18127 2013-11-18 09:08:15 krs then in MyRow, shoud i set
  • is the question 18128 2013-11-18 09:08:17 krs ah, right 18129 2013-11-18 09:08:26 balpert nope, just when you do the map 18130 2013-11-18 09:09:08 balpert the reconciler looks at the key attribute before the components are turned into DOM nodes 18131 2013-11-18 12:31:52 dubside hello 18132 2013-11-18 12:40:13 dubside Is there some kind of delay in setState? I have a setState occuring in an onChange, and in a console.log, the state shows no change immediately after the first change happens, shows the first change in value after the second change happens, the second after the third, and so on... 18133 2013-11-18 12:48:25 balpert dubside: yes, setState calls are batched together for efficiency so that if you call setState twice in succession, React only rerenders once 18134 2013-11-18 12:48:49 balpert dubside: if you want to run something after the state has changed, you can pass a callback as a second argument to setState 18135 2013-11-18 12:49:06 balpert this.setState({x: 2}, function() { console.log("x is now", this.state.x); }) 18136 2013-11-18 12:49:17 dubside excellent. thank you balpert! 18137 2013-11-18 12:49:30 balpert np 18138 2013-11-18 12:55:35 dubside balpert: using the callback still exhibits the delay behavior 18139 2013-11-18 12:56:10 balpert can you post a jsfiddle that I can look at? 18140 2013-11-18 13:03:55 dubside balpert: http://jsfiddle.net/jackcompton/QaLTZ/ 18141 2013-11-18 13:04:14 balpert forgot to save? 18142 2013-11-18 13:05:28 dubside oops... http://jsfiddle.net/jackcompton/QaLTZ/1/ 18143 2013-11-18 13:06:50 balpert you want this.updateFilteredItems not this.updateFilteredItems() as the second argument 18144 2013-11-18 13:09:11 dubside Thanks again balpert 18145 2013-11-18 13:09:50 balpert btw, I'd just put the filtering logic inside the render method: http://jsfiddle.net/spicyj/2qn4E/ 18146 2013-11-18 17:48:05 sspi bender's back baby \\o/ 18147 2013-11-18 17:51:55 chenglou hah 18148 2013-11-18 17:59:19 sspi what would be the best way to see if EventListener.listen is only called once within ReactEventEmitter-test.js? 18149 2013-11-18 18:00:31 sspi I was hoping requiring EventListener would automagically add mock functions 18150 2013-11-18 18:01:46 zpao use spyOn 18151 2013-11-18 18:02:13 zpao there are a couple other tests using it, so take a look to see how they're doing it 18152 2013-11-18 18:02:21 sspi ah great :), yes doing that now! 18153 2013-11-18 18:39:23 SubtleGradient benjamn: anything left to do for the code coverage tasks PR? https://github.com/facebook/react/pull/550 18154 2013-11-18 18:40:28 SubtleGradient zpao: All lint has been picked: https://github.com/facebook/react/pull/550 18155 2013-11-18 18:41:44 zpao woo 18156 2013-11-18 18:42:47 benjamn SubtleGradient: I'll check it out this morning 18157 2013-11-18 18:42:54 SubtleGradient Sweet 18158 2013-11-18 18:43:27 SubtleGradient I'm going to Disney with my wife tonight. I'll be gone for the rest of the week. Wanted to make sure I got this in before I left. 18159 2013-11-18 18:46:34 zpao SubtleGradient: anything there that would need major overhaul? i haven't looked closely. we can merge in after youre gone if we need to 18160 2013-11-18 18:47:33 SubtleGradient zpao: That PR just adds a new grunt task and tweaks some of the other testing ones a bit. Should be about as safe as anything could be 18161 2013-11-18 19:24:17 chenglou hey the doc anchors aren't not clickable anymore, did I miss anything? 18162 2013-11-18 19:24:29 balpert chenglou: yup, there's a bug 18163 2013-11-18 19:24:34 balpert I have a PR open to fix it 18164 2013-11-18 19:28:59 zpao balpert: why are there 2 anchors in there? 18165 2013-11-18 19:30:50 balpert zpao: one for the (invisible, position-adjusted) , one for the (visible) # 18166 2013-11-18 19:31:21 zpao i thought name was deprecated and ids on the worked? 18167 2013-11-18 19:34:55 zpao SubtleGradient: i really need better test output in the console. where are we on that? 18168 2013-11-18 19:35:07 zpao debugging failures is... difficult 18169 2013-11-18 19:35:25 SubtleGradient zpao: this PR (#550) improves it 18170 2013-11-18 19:35:27 sspi yeah, think we should move to xml... 18171 2013-11-18 19:36:07 sspi (no I'm not serious) 18172 2013-11-18 19:36:42 zpao SubtleGradient: ok. also, is there any way to run a single test file instead of the suite? 18173 2013-11-18 19:37:33 balpert zpao: I only want to move the anchor but not the actual heading text -- the previous solutions caused problems with invisible overlays making things not clickable 18174 2013-11-18 19:37:35 SubtleGradient zpao: I'm not sure. I know jasmine normally lets you do that, but I'm not sure if it's actually working. 18175 2013-11-18 19:37:46 SubtleGradient I plan to hack on enabling rapid TDD next 18176 2013-11-18 19:38:03 balpert I haven't seen running a single test ever work 18177 2013-11-18 19:40:04 SubtleGradient I guess I'll have to make that work 18178 2013-11-18 19:49:26 zpao yea, i think it's pretty essential eventually 18179 2013-11-18 19:54:53 benjamn balpert, SubtleGradient, zpao: totally agree; jasmine is supposed to respect a URL query parameter to filter by test name, but it has never worked for us 18180 2013-11-18 19:55:26 SubtleGradient Open an issue and assign it to me, or I'll try to remember to do it at some point 18181 2013-11-18 19:58:38 sspi zpao: what would be the best way to get variables send to the spyOn function? (I got a test whereby EventListener.listen is called 5 times, and argsForCall unfortunately has a length of 3) 18182 2013-11-18 20:02:34 sspi gotta run 18183 2013-11-18 20:04:24 zpao sspi: sorry. not sure. sounds like it's not actually getting called 5 times 18184 2013-11-18 20:05:42 chenglou woah contexts? 18185 2013-11-18 21:09:58 benjamn accidental close 18186 2013-11-18 21:10:02 benjamn accidents happen 18187 2013-11-18 21:10:06 benjamn sry 18188 2013-11-18 21:15:39 Aylott :o 18189 2013-11-18 21:24:04 SubtleGradient What's up with this? `Invariant Violation: createAnalyticsPlugin(...): The DOM is not supported in the execution environment`? 18190 2013-11-18 21:31:48 sspi ah, the two missing events were hiding in .capture 18191 2013-11-18 22:00:11 SubtleGradient benjamn: petehunt: zpao: Tests are failing on master. If you check out my PR by itself all the tests pass. https://github.com/facebook/react/pull/550 18192 2013-11-18 22:00:35 benjamn SubtleGradient: thanks for isolating those test failures 18193 2013-11-18 22:00:47 SubtleGradient No worries. 18194 2013-11-18 22:03:22 SubtleGradient Ok, I'm out. See y'all next week. 18195 2013-11-18 22:18:02 baranaby hey all, I'm running into some really weird Invariant Violation "Unable to find element" the suggestion is that the DOM was mutated by the browser, but all that's running on this page are React components, and I don't /always/ get the error... ugh. 18196 2013-11-18 22:18:49 baranaby I think it could be because I'm passing componebts as props.children into another instance maybe? I don't even know :( 18197 2013-11-18 22:20:55 sspi wondering how far I should go with testing of dependencies of on demand events 18198 2013-11-18 22:21:01 baranaby ACTION prods petehunt 18199 2013-11-18 22:21:03 baranaby :D 18200 2013-11-18 22:47:02 chenglou baranaby: got a fiddle? 18201 2013-11-18 23:11:40 benjamn tests that passed when https://github.com/facebook/react/pull/451 was merged are no longer passing when I revert to that revision 18202 2013-11-18 23:12:01 benjamn leading theory is that something changed about ~versioned NPM dependencies 18203 2013-11-18 23:13:03 benjamn zpao|away, petehunt, balpert ^ 18204 2013-11-18 23:13:22 benjamn since SubtleGradient is off to the happiest place on earth, I'm on it 18205 2013-11-18 23:13:26 benjamn jfyi 18206 2013-11-18 23:51:37 blixt Hey guys, I was wondering what a good way to add an attribute to the whitelist of SVG attributes in JSX? It seems to currently have an incomplete list of attributes (according to the SVG spec), and I need one of the non-whitelisted ones. :) 18207 2013-11-18 23:58:01 blixt Actually nevermind, I think it's trickier than that. The attribute I need to set is "class" and I see now that SVG and HTML share the same whitelist… and because of this "class" does work, but it tries to set "className" on the SVG DOM object rather than using setAttribute. Hm. 18208 2013-11-19 00:12:54 vjeux blixt: is there a class attribute in svg? 18209 2013-11-19 00:13:12 blixt vjeux: Yep, http://www.w3.org/TR/SVG/styling.html#ClassAttribute 18210 2013-11-19 00:13:57 balpert baranaby: yeah, if you have a fiddle I'll take a look 18211 2013-11-19 00:13:58 blixt I think I'm going to go about this differently though. A component I'm using in my app is rendering SVG amidst the HTML which is a bit crazy, so I'm going to inject that HTML block using dangerouslySetInnerHtml instead 18212 2013-11-19 01:29:56 zpao blixt: is class in svg different than class in html? 18213 2013-11-19 01:31:03 balpert zpao: I don't know what you mean, "Let's move hash link outside the headers rule, and then if you want to keep the coincidental override of :hover color, make it explicit." 18214 2013-11-19 01:31:21 zpao balpert: move .hash-link outside h1,h2,h3 18215 2013-11-19 01:31:59 zpao then your links were still grey on hover but i think that was just a coincidence because of specificity equaling the a:hover rule 18216 2013-11-19 01:32:25 zpao because if you just move the .hash-link rule outside, they are orangish on hover 18217 2013-11-19 01:34:02 balpert ah yes 18218 2013-11-19 01:34:24 balpert sorry, I thought you meant make .hash-link reusable and I was confused 18219 2013-11-19 01:35:05 balpert okay, updated 18220 2013-11-19 01:36:14 petehunt zpao: lol, ReactBeans 18221 2013-11-19 01:36:27 petehunt Enterprise ReactBeans 18222 2013-11-19 01:36:39 zpao JReact 18223 2013-11-19 01:36:44 zpao FactoryFactory 18224 2013-11-19 01:37:37 zpao (actually JReact isn't the craziest thing...) 18225 2013-11-19 01:38:08 zpao balpert: did you want the links to stay grey on hover? 18226 2013-11-19 01:38:30 zpao (hash links) because they aren't now 18227 2013-11-19 01:41:04 balpert zpao: I decided red was cool 18228 2013-11-19 01:41:34 zpao it's actually warm 18229 2013-11-19 01:41:41 zpao ACTION hangs head in shame 18230 2013-11-19 01:46:53 balpert I like puns too 18231 2013-11-19 01:53:30 chenglou eh anyone wants to weigh in on this? https://github.com/facebook/react/pull/562 18232 2013-11-19 01:53:42 chenglou if it's not good I'll close it 18233 2013-11-19 01:56:45 balpert chenglou: I don't think it's necessary 18234 2013-11-19 01:56:55 balpert I think it's okay if people have to come say hi in the channel for some questions :) 18235 2013-11-19 01:58:22 chenglou balpert: alright, closing 18236 2013-11-19 01:58:56 chenglou my guilty pleasure is to see the tip entries disappearing over time lol 18237 2013-11-19 01:59:17 chenglou maybe a bit too pleasant 18238 2013-11-19 02:00:26 chenglou is the new whitespace rule established? 18239 2013-11-19 02:00:42 balpert no, not yet 18240 2013-11-19 02:03:22 zpao new whitespace rule? 18241 2013-11-19 02:03:28 zpao ohhh jsx. 18242 2013-11-19 02:05:17 blixt vjeux__: class in SVG is only different in that I don't think the DOM node object will convert node.className = 'x' to class="x" 18243 2013-11-19 02:05:37 blixt But that's what React does because it treats SVG the same as HTML when it comes to the class attribute 18244 2013-11-19 02:06:21 zpao blixt: hmm 18245 2013-11-19 02:06:26 vjeux http://facebook.github.io/react/jsx-compiler.html 18246 2013-11-19 02:06:30 vjeux return ; 18247 2013-11-19 02:06:34 vjeux return React.DOM.svg( {class:"vjeux"} ); 18248 2013-11-19 02:06:41 vjeux so that should be working as expected 18249 2013-11-19 02:06:45 vjeux for svg 18250 2013-11-19 02:06:49 chenglou the className conversion isn't at the dom level 18251 2013-11-19 02:06:50 vjeux i'm not sure that your issue is in JSX 18252 2013-11-19 02:06:51 zpao but we don't put that in the dom 18253 2013-11-19 02:07:29 zpao class is now just a regular prop, not a special dom one 18254 2013-11-19 02:07:30 vjeux blixt: the javascript way to set the class --is-- using className 18255 2013-11-19 02:07:52 vjeux this is why we use className to build react component 18256 2013-11-19 02:07:57 vjeux in order to avoid doing magic here 18257 2013-11-19 02:08:27 zpao vjeux: blixt: maybe i'm misunderstanding but i think he's saying that's not the case for svg 18258 2013-11-19 02:08:55 vjeux zpao: yeah, so if that's not the case for svg, just writing should work? 18259 2013-11-19 02:08:58 balpert it sounds to me like the only problem here is that 'class' is missing from the list of attributes 18260 2013-11-19 02:09:16 blixt I'm seeing the class objects being dropped in the actual DOM 18261 2013-11-19 02:09:22 blixt class objects => class attributes 18262 2013-11-19 02:09:27 vjeux oh, I see 18263 2013-11-19 02:10:04 zpao blixt: would be great to see a jsfiddle just to make sure we're all on the same page 18264 2013-11-19 02:10:06 vjeux https://github.com/facebook/react/blob/5c6c02fe0329cb47f2ca26bd96712624d6cf444a/src/dom/DefaultDOMPropertyConfig.js#L115-L117 18265 2013-11-19 02:10:32 vjeux this is the place where we whitelist all the attributes 18266 2013-11-19 02:10:35 vjeux indeed class isn't there 18267 2013-11-19 02:12:40 blixt vjeux: That list is shared with HTML, so it's up there – my theory is just that the DOMAttributeNames map combined with MUST_USE_PROPERTY will make React do node.className = … instead of node.setAttribute(…) 18268 2013-11-19 02:13:02 zpao blixt: yes you are correct 18269 2013-11-19 02:13:26 balpert I wonder if we should have different component types for SVG and HTML 18270 2013-11-19 02:13:45 zpao balpert: yea, was wondering that too 18271 2013-11-19 02:13:46 vjeux balpert: we should, and make them be an addon, because there are so many of them :p 18272 2013-11-19 02:14:09 balpert most of the behavior is shared, of course 18273 2013-11-19 02:14:32 vjeux this is nice to see that so many people use svg though :) 18274 2013-11-19 02:14:50 vjeux I think writing svg with react makes a lot of sense 18275 2013-11-19 02:16:06 blixt zpao: http://jsfiddle.net/kb3gN/475/ 18276 2013-11-19 02:16:37 blixt I didn't do the whole thing but it still shows the issue :) 18277 2013-11-19 02:17:05 vjeux blixt: what happens if you add 'class' to the list I showed you earlier? 18278 2013-11-19 02:17:06 zpao blixt: so in that case, you do want to use className 18279 2013-11-19 02:17:29 zpao which works on first render, but updating that will fail i think 18280 2013-11-19 02:19:21 zpao oh actually... 18281 2013-11-19 02:19:22 blixt Have a look at this one: http://jsfiddle.net/kb3gN/477/ 18282 2013-11-19 02:19:53 zpao look at this and inspect the dom...http://jsfiddle.net/FF4Ld/ 18283 2013-11-19 02:20:34 blixt Ah, so using className instead of class? What's different about doing so? 18284 2013-11-19 02:21:03 zpao className is the actual DOM API 18285 2013-11-19 02:21:22 blixt But svgNode.className = … does not have any effect as proven in my JsFiddle 18286 2013-11-19 02:21:49 blixt I think that using className in React will shortcut past the MUST_USE_ATTRIBUTE, but it'll still use the DOMAttributeNames and then setAttribute('class', …) 18287 2013-11-19 02:21:59 blixt I mean MUST_USE_PROPERTY 18288 2013-11-19 02:22:11 blixt Then again I might be wrong :) 18289 2013-11-19 02:22:21 blixt But it's strange that class=… works for HTML but not SVG 18290 2013-11-19 02:24:23 zpao class= works for html? 18291 2013-11-19 02:24:28 zpao or className? 18292 2013-11-19 02:26:29 blixt zpao: Maybe I'm doing it wrong, but I've been using
    etc. in all my React JSX… It's only when I started using SVG nodes that it didn't work, presumably because SVG nodes don't respond to `className = …;` which I suppose is what React does under the surface? 18293 2013-11-19 02:27:38 zpao blixt: well first, class= no longer works on html 18294 2013-11-19 02:27:59 blixt Since 0.5.1? Because it seemed to work in 0.5.0 18295 2013-11-19 02:28:19 zpao it shouldn't work in 0.5 18296 2013-11-19 02:29:26 blixt Very strange. The app has been using require('react-tools') of version 0.5.0, I updated it to 0.5.1 and admittedly I haven't tried SVG in the previous version 18297 2013-11-19 02:30:35 blixt And classes were definitely rendering in the previous version or the app would look like crap :) I'll try a quick replace to className though and just see if that improves the situation 18298 2013-11-19 02:31:54 zpao hmm, they shouldn't have worked in 0.5 unless i botched something when releasing 18299 2013-11-19 02:33:16 blixt What's the reason for the change by the way? It was very useful to be able to copy/paste most HTML into a JSX file. :) 18300 2013-11-19 02:33:45 balpert blixt: you're not using an old version of JSXTransformer accidentally? 18301 2013-11-19 02:33:50 blixt Yup, replacing class with className in all 40 places fixed most of my issues 18302 2013-11-19 02:34:01 blixt balpert: I just used a clean NPM install of react-tools v0.5.0 18303 2013-11-19 02:34:04 chenglou ^ does this and htmlFor warrant a tips entry? 18304 2013-11-19 02:34:53 balpert chenglou: yeah, that should definitely be somewhere! 18305 2013-11-19 02:35:01 balpert maybe just on the attributes reference though? 18306 2013-11-19 02:35:02 balpert ACTION shrugs 18307 2013-11-19 02:36:33 chenglou balpert: oh wait 18308 2013-11-19 02:36:35 chenglou http://facebook.github.io/react/docs/tags-and-attributes.html#supported-tags 18309 2013-11-19 02:36:52 chenglou balpert: oops, this: http://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes 18310 2013-11-19 02:37:12 balpert that sounds like something I would've written :) 18311 2013-11-19 02:37:34 chenglou maybe an actual > NOTE 18312 2013-11-19 02:37:44 zpao chenglou: ? 18313 2013-11-19 02:38:42 balpert +1 for NOTE: 18314 2013-11-19 02:39:33 chenglou zpao: do I also mention the lowercasing for data-* aria-* or do I leave it there like you said 18315 2013-11-19 02:39:46 chenglou *or do I leave it untouched 18316 2013-11-19 02:39:56 zpao blixt: the reason for the change was a combination of things, but a big part was consistency with other attributes and to reinforce the idea that while JSX looks like HTML it's transformed to regular JS 18317 2013-11-19 02:40:12 blixt zpao: Alright, makes sense 18318 2013-11-19 02:40:53 vjeux zpao: and to clean up all the hacks needed to support 'class' properly :p 18319 2013-11-19 02:40:59 zpao we were also doing the transform for class sneakingly (you would write
    and then your JS would be React.DOM.div({className: "foo"}) 18320 2013-11-19 02:42:00 zpao so we were actually changing the intention of your code at times (maybe you weren't using class for styling but in an education component) 18321 2013-11-19 02:42:26 zpao chenglou: just leave those for now i think 18322 2013-11-19 02:49:15 ide zpao can i click merge on https://github.com/facebook/react/pull/536 18323 2013-11-19 02:49:35 zpao you still have a merge button o_O 18324 2013-11-19 02:49:56 ide not sure if it works but i can try 18325 2013-11-19 02:50:01 zpao but also, no 18326 2013-11-19 02:50:16 zpao gotta pull that in first 18327 2013-11-19 02:50:38 zpao petehunt: that one is you :) 18328 2013-11-19 02:50:43 balpert ide: if you have a merge button, it works 18329 2013-11-19 02:50:59 ide btw is it generally better to develop on a separate branch and submit a pull request? 18330 2013-11-19 02:51:13 balpert ide: that's what I do 18331 2013-11-19 02:51:42 balpert my master branch is almost always the same as origin/master 18332 2013-11-19 02:51:45 ide like, when I rebased against react upstream and pushed to my repo, it added all of the rebased commits to my pull request 18333 2013-11-19 02:52:02 ide balpert: ok sounds good 18334 2013-11-19 02:52:33 balpert you must've rebased wrong if github showed commits that weren't yours 18335 2013-11-19 02:52:33 petehunt zpao: i'm on the bus (slooow wifi) but can review now if you wanna pull it in. otherwise i can do it later 18336 2013-11-19 02:52:58 zpao ide: i've had that happen too 18337 2013-11-19 02:53:07 zpao petehunt: about to head out to dinner 18338 2013-11-19 02:53:15 ide I want something like git pull --rebase upstream/master 18339 2013-11-19 02:53:22 petehunt zpao: no rush 18340 2013-11-19 02:53:26 balpert ide: that sounds reasonable 18341 2013-11-19 02:53:41 zpao git fetch; git rebase upstream/master 18342 2013-11-19 02:53:53 balpert ide: git pull --rebase upstream master, no slash 18343 2013-11-19 02:54:00 balpert or what zpao said which is the same thing 18344 2013-11-19 02:54:16 zpao but yea, branches ftw 18345 2013-11-19 02:54:26 ide yay for branches 18346 2013-11-19 02:54:32 balpert ACTION <3 branches 18347 2013-11-19 02:54:39 ide so, when are you all switching to hg? 18348 2013-11-19 02:54:43 zpao ok, back later probably... maybe 18349 2013-11-19 02:55:40 balpert ide: bookmarks aren't _horrible_ 18350 2013-11-19 02:55:47 balpert and supposedly histedit works like rebase 18351 2013-11-19 02:57:35 ide rebase and reflog are the best 18352 2013-11-19 02:58:37 balpert couldn't agree more 18353 2013-11-19 05:41:29 sspi petehunt: I wonder how far I should go with testing of on demand events 18354 2013-11-19 05:41:32 sspi ah crap 18355 2013-11-19 05:42:25 sspi zpao: I wonder how far I should go with testing of on demand events 18356 2013-11-19 05:43:16 sspi I could add tests for all the events, and basically make sure they are still working... and add tests to see if the correct dependencies are there 18357 2013-11-19 05:44:46 balpert sspi: probably not necessary to test each type of event separately 18358 2013-11-19 05:44:56 balpert unless your code has many branches? 18359 2013-11-19 05:46:12 sspi I already have some simple tests for the new ReactEventEmitter.listenTo function, which should cover most cases... 18360 2013-11-19 05:47:11 sspi balpert: basically touching all the events, so it would be nice to know that they are still working 18361 2013-11-19 05:48:27 sspi I also find it surprising that these tests aren't already available 18362 2013-11-19 05:49:11 sspi I would expect the onChange eventplugin to have some basic tests that check if an event is triggered if the data has changed 18363 2013-11-19 05:50:09 sspi perhaps this wasn't possible before? (understood we just moved testing in PhantomJS - could be wrong) 18364 2013-11-19 05:50:24 balpert mm, ChangeEventPlugin should indeed have more tests 18365 2013-11-19 05:50:40 balpert tests have been in PhantomJS since the release, though they're run internally in jsdom 18366 2013-11-19 05:51:27 balpert honestly, I think it's just a pain to write tests for event handling 18367 2013-11-19 05:51:34 sspi lol, me too 18368 2013-11-19 05:51:45 balpert especially since there isn't much logic in most of what was there before 18369 2013-11-19 05:51:50 balpert ChangeEventPlugin obviously being an exception 18370 2013-11-19 05:52:03 balpert but, like… SimpleEventPlugin is probably going to work or not work 18371 2013-11-19 05:52:32 sspi yeah, looking at plugins besides SimpleEventPlugin :) 18372 2013-11-19 05:53:07 balpert cool 18373 2013-11-19 05:53:12 balpert I fully support having tests for those! 18374 2013-11-19 05:53:18 sspi compositionevent could be another one 18375 2013-11-19 05:53:27 sspi great, more work for me \\o/ 18376 2013-11-19 05:53:34 balpert for one, simulating events is hard :) 18377 2013-11-19 05:53:47 balpert I also don't think there's any way to run different tests in different browsers with the current setup 18378 2013-11-19 05:54:18 balpert so it's hard to test that ChangeEventPlugin interprets the IE8 events correctly because the events it listens to don't happen in other browsers 18379 2013-11-19 05:56:50 sspi ReactTestUtils.simulateEventOnNode or ReactTestUtils.simulateEventOnDOMComponent seems like an entry for simulating events 18380 2013-11-19 05:57:37 balpert yes, for most things that works 18381 2013-11-19 05:57:49 balpert though that doesn't even use the browser's event handling at all 18382 2013-11-19 06:00:04 sspi preferably I just want to say something like: var reactComponent = ; TestUtils.changeValueAndTriggerEvents(reactComponent); expect(yadayada)... 18383 2013-11-19 06:00:37 balpert what would changeValueAndTriggerEvents do though? 18384 2013-11-19 06:01:28 sspi change the value of the textfield 18385 2013-11-19 06:01:50 sspi trigger browser events, however the question still remains... which events 18386 2013-11-19 06:03:02 balpert right 18387 2013-11-19 06:03:15 balpert there's no way afaik from JS to really trigger all the events 18388 2013-11-19 06:03:23 balpert probably you can simulate stuff using selenium maybe? 18389 2013-11-19 06:03:48 sspi that would be a yes 18390 2013-11-19 06:04:14 balpert I almost feel like it would be easier to just have a list of instructions that a human tester is supposed to follow 18391 2013-11-19 06:04:37 balpert "click in the text box, press A, select the A, …" and then the JS would check that it received all the proper events 18392 2013-11-19 06:13:16 sspi perhaps keep it simple - see what's supported and then trigger the low level events 18393 2013-11-19 06:16:07 balpert yeah, but then you're less sure you're testing the right thing 18394 2013-11-19 06:16:11 balpert I guess it's better than nothing 18395 2013-11-19 06:17:13 sspi selenium across multiple browsers would be the best 18396 2013-11-19 06:17:43 balpert yeah 18397 2013-11-19 06:18:05 balpert but even so, it probably can't easily do "select some text, right-click, select 'Delete'" to make sure a change event is fired 18398 2013-11-19 06:19:01 sspi I thought it was that easy actually... need to check (not an selenium expert) 18399 2013-11-19 06:31:57 sspi yes, it could work from what I see here... 18400 2013-11-19 06:32:13 sspi would require the creation of some helper functions to do exactly what you said 18401 2013-11-19 06:33:00 sspi however I'm not going to do that for this PR 18402 2013-11-19 06:33:08 sspi as we have no selenium anyway 18403 2013-11-19 06:33:56 balpert I thought SubtleGradient's stuff added webdriver support 18404 2013-11-19 06:34:14 balpert I haven't been paying super close attention though 18405 2013-11-19 06:34:28 sspi me neither, so I know something is happening... 18406 2013-11-19 06:34:37 sspi with the SauceLabs integration 18407 2013-11-19 06:36:42 sspi balpert: you are correct, there is a wd dependency 18408 2013-11-19 06:36:45 sspi web driver 18409 2013-11-19 06:39:47 sspi I think I'm missing a sauce access key 18410 2013-11-19 06:45:46 balpert yeah, it doesn't come with the repo 18411 2013-11-19 14:58:20 pg__ guys I just forked and patched grunt-contrib-jshint to make it work with jsx files, check this out here if you need this for your project too https://github.com/pgherveou/grunt-contrib-jshint 18412 2013-11-19 15:07:03 baranaby nice pg__! 18413 2013-11-19 15:26:49 fforw ide: hi.. 18414 2013-11-19 17:54:05 sspi for my understanding, initializeTouchEvents is there to enforce only touch events instead of mouse events? 18415 2013-11-19 17:55:12 sspi so it's mouse only, or touch only, but not both? 18416 2013-11-19 17:56:21 sspi hmmm that variable name seems wrong 18417 2013-11-19 18:57:59 zpao lbljeffmo: anything need to be done for https://github.com/facebook/react/pull/495? 18418 2013-11-19 18:59:31 lbljeffmo zpao: nope, lg -- merged. Ugh I'm so far behind after last week... 18419 2013-11-19 19:00:36 lbljeffmo I'm at tc39 this week as well, so getting back to that whitespace PR is going to be an effort for me as well. If anyone wants to try helping out with it I would be eternally greatful.... 18420 2013-11-19 19:01:24 lbljeffmo I think we just need to a) merge locally and make sure tests don't break b) review the rules and make sure the codemod script c) close our eyes and pull the trigger 18421 2013-11-19 19:01:35 lbljeffmo zpao: ^ 18422 2013-11-19 19:01:46 osener Hi all. I think I've found a regression related to transitions addon in React 0.5.1 & master 18423 2013-11-19 19:02:20 zpao lbljeffmo: i'm going to be out thurs-tues so i don't think i'm going to do any codemods this week 18424 2013-11-19 19:02:59 zpao osener: excellent! well... the finding anyway :) 18425 2013-11-19 19:03:05 osener I've prepared a test case for it; v0.5.0: http://jsfiddle.net/osener/rFf23/ v0.5.1: http://jsfiddle.net/osener/2Y8Cj/ 18426 2013-11-19 19:03:11 lbljeffmo zpao: I think it's ok if we lag behind on the transform/codemod by a week or two internally -- the change is isolated to the transform only...but we just need to make sure we don't lose track. 18427 2013-11-19 19:03:25 balpert lbljeffmo: happy to help if there's anything I can do 18428 2013-11-19 19:03:31 osener zpao: or maybe I was relying on a bug and it got fixed, not sure 18429 2013-11-19 19:03:40 vjeux__ zpao: if you have time, the round-up is ready https://github.com/facebook/react/pull/555 18430 2013-11-19 19:03:53 balpert osener: curious! 18431 2013-11-19 19:04:24 zpao vjeux: going to make you do it this time around, but will proofread. come to my desk after lunch? 18432 2013-11-19 19:04:25 lbljeffmo balpert: wanna run through https://github.com/facebook/react/pull/480 and see what it means for khan too? 18433 2013-11-19 19:04:34 vjeux zpao: like-stamp 18434 2013-11-19 19:05:24 balpert osener: that definitely looks to me like 0.5.1 is broken 18435 2013-11-19 19:05:42 balpert osener: mind filing a github issue to keep track? 18436 2013-11-19 19:05:46 lbljeffmo (it's possible there are bugs too, so be on the lookout there...we don't have extensive tests around the transformer publicly yet...which is a huge ball-drop on my part) 18437 2013-11-19 19:06:51 balpert lbljeffmo: yeah okay. currently we use react-tools releases for the JSX transform so I need to figure out how to point to a commit but I'll try it out! 18438 2013-11-19 19:17:17 zpao balpert: this is what we used to do - https://github.com/facebook/react/commit/2d048f1f34a7d10cca81336446920822ad7ea67c#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L40 18439 2013-11-19 19:17:28 zpao (for referencing a commit) 18440 2013-11-19 19:18:33 zpao bin/jsx should work there. anything else would be broken think 18441 2013-11-19 19:18:46 balpert thanks -- iirc there were some problems with that? 18442 2013-11-19 19:18:49 balpert don't remember what though 18443 2013-11-19 19:19:36 zpao yea sometimes changing that url wouldn't trigger an update on npm install, so rm -rf node_modules && npm install 18444 2013-11-19 19:20:02 zpao i think that was the only issue 18445 2013-11-19 19:20:10 balpert weird okay 18446 2013-11-19 19:20:27 zpao maybe something else. i'm glad we're out of that game now 18447 2013-11-19 19:21:08 zpao otherwise, you could build your own package (grunt build && npm pack), then put that tgz somewhere 18448 2013-11-19 19:21:20 balpert yeah or maybe I'll just make it a submodule for our repo 18449 2013-11-19 19:21:42 balpert actually I'm pretty sure react it already a submodule so I just need to make the build look at that 18450 2013-11-19 19:24:40 osener balpert: done: https://github.com/facebook/react/issues/568 18451 2013-11-19 19:24:49 balpert osener: awesome. I'll try to take a look later 18452 2013-11-19 19:25:37 osener thanks, I've tried a fresh build from master and problem still persists but I haven't done any extensive testing 18453 2013-11-19 19:26:50 andreypopp petehunt: hi! any feedback on https://github.com/facebook/react/issues/515#issuecomment-28527481 ? 18454 2013-11-19 19:27:55 petehunt andreypopp: i think we should remove the support if you're OK with it, but we should throw if someone tries 18455 2013-11-19 19:28:50 andreypopp petehunt: I'm OK with this — too many special cases needed and doesn't worth the effort I think 18456 2013-11-19 19:36:53 zpao osener: commented, but i think this is expected behavior 18457 2013-11-19 22:34:51 vjeux achievement complete, I pushed some docs :p 18458 2013-11-19 22:35:55 zpao ACTION is freeeeeeeeeeee 18459 2013-11-19 22:35:58 vjeux haha 18460 2013-11-19 22:45:58 balpert nice job 18461 2013-11-19 22:46:31 balpert I assume that is what rake release is for :) 18462 2013-11-19 22:55:13 zpao balpert: pretty much 18463 2013-11-19 23:30:01 vjeux http://www.reddit.com/r/javascript/comments/1r0lpg/react_community_roundup_11/ 18464 2013-11-19 23:30:07 vjeux ok, the community round up #11 is out :p 18465 2013-11-19 23:49:58 tommyh hi, i've found an issue which only manifests itself when not using jsx to renderComponent 18466 2013-11-19 23:50:15 tommyh (i can log it in github, but thought i'd check here first) 18467 2013-11-19 23:50:52 tommyh when passing an object to renderComponent (and not using jsx), that object will get modified with the props from the component. this doesn't happen when using jsx 18468 2013-11-19 23:51:05 tommyh example with jsx: http://jsfiddle.net/kb3gN/482/ 18469 2013-11-19 23:51:15 tommyh example without jsx: http://jsfiddle.net/ZeNLA/1/ 18470 2013-11-19 23:52:06 tommyh notice how in the jsx example, props.randomNumber is different for each component. in the non-jsx example props.randomNumber from component1 gets propagated to component2, via the configData object 18471 2013-11-19 23:52:55 tommyh note: both examples use jsx for the "render" function, but only one uses jsx for the renderComponent call 18472 2013-11-19 23:53:35 andreypopp tommyh: they are not equivalent — compiles to Hello({configData: true}) 18473 2013-11-19 23:54:11 tommyh oh shoot... /faceplam.... one sec 18474 2013-11-19 23:56:24 tommyh so is it even possible to replicate my scenario in the jsx version? ie can i give a jsx component an object of data, like (instead of specifiying the key/values pairs expliticly) 18475 2013-11-19 23:57:07 zpao tommyh: not really 18476 2013-11-19 23:57:15 andreypopp tommyh: yeah, but it would be different, like
    {Hello(configData)}
    18477 2013-11-19 23:57:34 andreypopp tommyh: so "not really" but you still can do that inside jsx 18478 2013-11-19 23:57:46 zpao and that's only partially JSX, so that's cheating 18479 2013-11-19 23:57:50 zpao :) 18480 2013-11-19 23:58:17 andreypopp that's what jsx is about :-) mix and match with javascript, use only when needed, right? 18481 2013-11-19 23:58:57 zpao you could make that case. i like the distinction between components and "other" js 18482 2013-11-19 23:59:24 tommyh gotcha. so for this "non-jsx only" usecase, does this sound like a valid issue? (that a clone of the object should be made, so it doesn't mess with the original object) 18483 2013-11-20 00:01:44 zpao tommyh: it's a good question. one of the ways we keep React fast is to avoid clones when possible 18484 2013-11-20 00:02:58 zpao cloning here will be really expensive since this is such a common task. BUT it's not outrageous... 18485 2013-11-20 00:05:54 tommyh yeah. i figure most people use jsx so it's not an issue, but as its not a "mandatory dependency" it would be a bit of a narly issue to get stung by 18486 2013-11-20 00:06:17 tommyh and i can definetly code around it, just thought i'd get your guys thoughts on it 18487 2013-11-20 00:06:52 zpao thanks for bringing it up... if you could file an issue too where we could discuss this with other people too, that would be helpdful 18488 2013-11-20 00:08:03 tommyh can do 18489 2013-11-20 00:09:52 zpao thanks 18490 2013-11-20 00:11:10 tommyh ps ive been working on jasmineReact.js which is some helpers for unit testing your react components. i will try to open source it by tomorrow. (i know the react source has some jasmine helpers, but those were fairly intense/powerful. this is a minimal set to be able to test a component) 18491 2013-11-20 00:11:33 zpao awesome :) 18492 2013-11-20 00:13:06 tommyh here's a gist (without the documentation/tutorials/etc): https://gist.github.com/tommyh/7555008 18493 2013-11-20 00:13:56 leifdenby Hi guys, first I'd like to say that I'm really enjoying using React, it is a very impressive piece of code 18494 2013-11-20 00:14:47 leifdenby I have a question about loading data with Ajax. I am going by the example here:http://facebook.github.io/react/tips/initial-ajax.html, but I am wondering what the best approach is if I want to reload data from the backend every time a one of the props changes value 18495 2013-11-20 00:15:49 vjeux leifdenby: you usually don't want to do it that way 18496 2013-11-20 00:16:16 vjeux leifdenby: if the props of an element changes this means that the parent is going to do that change 18497 2013-11-20 00:16:23 leifdenby I see 18498 2013-11-20 00:16:29 vjeux so you want to do the ajax call there 18499 2013-11-20 00:16:32 leifdenby ok 18500 2013-11-20 00:16:41 leifdenby I'll try that, thanks 18501 2013-11-20 00:16:44 vjeux but, if you really want to do it 18502 2013-11-20 00:16:48 zpao well, probably anyway 18503 2013-11-20 00:16:54 vjeux you can add a method componentWillUpdate 18504 2013-11-20 00:17:13 vjeux http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate 18505 2013-11-20 00:17:14 zpao componentWillUpdate or componentWillReceiveProps 18506 2013-11-20 00:17:24 vjeux oh yeah, forgot about willReceiveProps 18507 2013-11-20 00:17:33 leifdenby ah, cool 18508 2013-11-20 00:17:35 leifdenby thanks guys 18509 2013-11-20 00:17:37 vjeux you get this.props (old) and nextProps (new) 18510 2013-11-20 00:17:59 vjeux so you can do your diff and do your ajax call 18511 2013-11-20 00:18:30 vjeux but know that when using that, you're app will be harder to understand and debug 18512 2013-11-20 00:18:44 vjeux so if you can find another way, the better 18513 2013-11-20 00:24:23 leifdenby wow 18514 2013-11-20 00:24:44 leifdenby this reads so much better and was so easy to implement. Thank you vjeux 18515 2013-11-20 00:24:55 vjeux cool :) 18516 2013-11-20 00:25:13 vjeux leifdenby: what are you working on? :) 18517 2013-11-20 00:25:25 leifdenby Could I also ask you a quick question about how to define the default value for the select HTML element? 18518 2013-11-20 00:25:42 tommyh @zpao - logged the issue: https://github.com/facebook/react/issues/570. thanks for the help 18519 2013-11-20 00:25:45 vjeux https://github.com/leifdenby/react-python wow this is cool 18520 2013-11-20 00:26:06 vjeux oh we did that :p 18521 2013-11-20 00:26:11 zpao vjeux: haha 18522 2013-11-20 00:26:12 zpao yup 18523 2013-11-20 00:26:14 leifdenby yeah, haha 18524 2013-11-20 00:26:22 vjeux leifdenby: you want to use controlled inputs 18525 2013-11-20 00:26:53 vjeux http://facebook.github.io/react/docs/forms.html#controlled-components 18526 2013-11-20 00:27:00 leifdenby it's an events platform, and I am designing the interface to discover and browse through events 18527 2013-11-20 00:27:26 vjeux basically, at any point in type you set which value is selected 18528 2013-11-20 00:27:49 vjeux and when you receive onchange event, you update your state that's going to update the dom (but do nothing since nothing actually changed) 18529 2013-11-20 00:28:43 vjeux nice 18530 2013-11-20 00:29:32 leifdenby ok, so normally if would be creating a tag, but what do I assign the say defaultValue in the select tag? 18532 2013-11-20 00:30:37 leifdenby do I need to create a ref for each of the select options? 18533 2013-11-20 00:30:51 vjeux let me make a small jsfiddle 18534 2013-11-20 00:31:04 leifdenby thank you so much 18535 2013-11-20 00:31:52 balpert leifdenby: the value matches whatever value tag each option has 18536 2013-11-20 00:32:07 leifdenby ah 18537 2013-11-20 00:32:13 balpert like 18538 2013-11-20 00:32:14 leifdenby that makes sense 18539 2013-11-20 00:32:27 leifdenby I don't know why I didn't try that 18540 2013-11-20 00:32:31 leifdenby thank you 18541 2013-11-20 00:32:47 balpert you can of course assign the values however you want -- maybe you just want to number them 0, 1, 2, … 18542 2013-11-20 00:33:27 leifdenby right 18543 2013-11-20 00:33:50 vjeux oh that's the way to do it? :p 18544 2013-11-20 00:34:09 vjeux we should document it 18545 2013-11-20 00:34:55 leifdenby haha, yes, that would be great 18546 2013-11-20 00:35:19 leifdenby ok, so what if the select has multiple options with the same value? 18547 2013-11-20 00:35:33 vjeux leifdenby: can you even do that? 18548 2013-11-20 00:36:07 leifdenby I guess it doesn't make much sense, I was just wondering 18549 2013-11-20 00:38:31 balpert leifdenby: this all mirrors the normal JS API for a select element 18550 2013-11-20 00:38:38 leifdenby ok 18551 2013-11-20 00:39:24 leifdenby and it works. Thank you so much guys 18552 2013-11-20 00:39:38 balpert (maybe we should support selectedIndex too...) 18553 2013-11-20 00:40:35 leifdenby is there a repository of React components anywhere on the internet? I have written ones for most of Bootstrap, and was wondering if there was somewhere central to put them. It seems like a waste of time for another person to write this all again 18554 2013-11-20 00:41:38 balpert that's something we haven't really figured out yet 18555 2013-11-20 00:41:44 vjeux http://jsfiddle.net/5734W/ 18556 2013-11-20 00:41:45 leifdenby if not, maybe I'll make a site for that over christmas 18557 2013-11-20 00:41:49 leifdenby :) 18558 2013-11-20 00:41:57 vjeux leifdenby: would be awesome 18559 2013-11-20 00:42:15 vjeux see the jsfiddle for the 3 ways to write select 18560 2013-11-20 00:42:18 balpert leifdenby: I made a popover component! http://stackoverflow.com/questions/20033522/how-do-i-render-reactjs-component-as-an-attribute-of-bootstrappopover-using-th/20035981#20035981 18561 2013-11-20 00:42:27 vjeux controlled, controlled with link state, uncontrolled 18562 2013-11-20 00:42:56 leifdenby haha, you wrote that? I was just looking at that earlier today. I rewrote the functionality of the bootstrap code in React instead, didn't want to get into the internals of bootstrap 18563 2013-11-20 00:43:05 leifdenby cheers vjeux 18564 2013-11-20 00:43:19 balpert leifdenby: yeah, I was thinking if I made a proper library I'd just do the JS from scratch 18565 2013-11-20 00:43:22 leifdenby (I didn't see your version until today, otherwise I definitely would have used it) 18566 2013-11-20 00:44:19 leifdenby discovering LinkedState really got me excited actually, thanks for writing that 18567 2013-11-20 00:44:20 leifdenby :) 18568 2013-11-20 00:44:36 vjeux note: you've got to use react-with-addons to use linkedstate 18569 2013-11-20 00:44:41 vjeux http://facebook.github.io/react/docs/two-way-binding-helpers.html 18570 2013-11-20 00:45:14 balpert leifdenby: most of the time linkState is actually not what you want though 18571 2013-11-20 00:45:17 balpert hence the warning on that page :) 18572 2013-11-20 00:45:49 leifdenby ok, cheers. Yeah I haven't touched it yet, it seemed a bit too magic for now. I feel I need to really understand React before I start using the magic 18573 2013-11-20 00:46:05 balpert good approach! :) 18574 2013-11-20 00:46:08 balpert yungsters: when do we get ReactLayersMixin? 18575 2013-11-20 00:46:18 balpert would be useful for a general purpose bootstrap js replacement for modals, etc. 18576 2013-11-20 00:46:18 leifdenby haha 18577 2013-11-20 00:46:30 yungsters balpert: when Layer gets open sourced (canned answer, it will be very hard to do this :\\ ) 18578 2013-11-20 00:46:44 vjeux yungsters: are we planning to? 18579 2013-11-20 00:46:52 balpert (https://github.com/facebook/react/issues/379) 18580 2013-11-20 00:47:07 yungsters vjeux: no, i dont think we would be opposed, but no one is working on that 18581 2013-11-20 00:47:21 vjeux ok, so basically no :p 18582 2013-11-20 00:47:24 yungsters correct 18583 2013-11-20 00:47:36 balpert yungsters: what's hard about it? 18584 2013-11-20 00:47:48 yungsters there are a lot of dependencies on facebook-specific modules 18585 2013-11-20 00:48:02 leifdenby (uh, this is an interesting discussion) 18586 2013-11-20 00:48:33 balpert yungsters: well, just open-source all those things ;) 18587 2013-11-20 00:48:37 yungsters making code general enough to be useful outside FB would not be trivial 18588 2013-11-20 00:48:38 yungsters haha :P 18589 2013-11-20 00:48:48 zpao liammcl: welcome to #reactjs 18590 2013-11-20 00:49:17 zpao where sometimes we talk vaguely (and sometimes not so vaguely) about things we can't tell you about 18591 2013-11-20 00:49:25 yungsters haha 18592 2013-11-20 00:49:34 yungsters something about making the world more open and connected 18593 2013-11-20 00:50:10 yungsters it would be pretty sweet to get Layers out there, imo it is one of the more intuitively designed layer/dialog/modal stuff, but yeah... just need someone to pull it apart 18594 2013-11-20 00:51:06 vjeux leifdenby: i created an issue for element) 19837 2013-11-25 11:10:47 leifdenby @DeTeam thanks again for suggesting eventbus, it works perfectly 19838 2013-11-25 11:11:26 DeTeam you're welcome :) 19839 2013-11-25 11:15:08 DeTeam leifdenby: I get the same weird behavior onKeyUp :( nativeEvent is null 19840 2013-11-25 11:27:43 krs leifdenby: im doing just that, but on onKeyDown and it works fine 19841 2013-11-25 11:40:38 andreypopp DeTeam: leifdenby I guess it's undefined when you log it onto the console? 19842 2013-11-25 11:41:13 DeTeam yup 19843 2013-11-25 11:41:24 DeTeam but when I do console.log(e.char) it's undefined! 19844 2013-11-25 11:41:32 DeTeam it's passed by value, not by ref, right? 19845 2013-11-25 11:41:35 andreypopp React reuses event objects for performance (to reduce the number of allocations) so it resets all attributes to null after the event happened 19846 2013-11-25 11:41:46 andreypopp so this is what you see in the console 19847 2013-11-25 11:42:09 DeTeam Key char should be displayed properly? 19848 2013-11-25 11:42:14 DeTeam not obj, but char 19849 2013-11-25 11:42:17 andreypopp during the execution of event handle all attributes have their values 19850 2013-11-25 11:42:26 andreypopp yeah 19851 2013-11-25 11:42:40 andreypopp console.log(e.keyCode) would show you the keyCode 19852 2013-11-25 11:43:56 DeTeam oh, missed char with keyCode :) 19853 2013-11-25 11:44:01 DeTeam it works fine 19854 2013-11-25 11:44:02 DeTeam thatnks 19855 2013-11-25 11:44:04 DeTeam thanks* 19856 2013-11-25 11:45:33 andreypopp np, I was confused first time I saw such behaviour 19857 2013-11-25 11:47:42 DeTeam easy to mess up using console.log (: 19858 2013-11-25 11:50:27 andreypopp yeah, that probably should go into tips section of docs 19859 2013-11-25 12:07:41 leifdenby fantastic DeTeam, that works 19860 2013-11-25 12:08:02 leifdenby having you guys here to answer questions like this is invaluable 19861 2013-11-25 16:35:31 balpert I wonder if there's some way we can provide a useful warning for pooling in the console 19862 2013-11-25 16:59:50 SubtleGradient ACTION is back 19863 2013-11-25 17:37:34 SubtleGradient lbljeffmo: mornin' 19864 2013-11-25 17:38:08 lbljeffmo SubtleGradient: howdy 19865 2013-11-25 17:51:55 syranide lbljeffmo: btw, KeyboardEvent.key (html5 spec replacement for which/charCode/etc), would it be interesting to support that for special-keys (enter, shift, f1, etc)? I fiddled some with it and all special-keys can be cheaply solved cross-browser 19866 2013-11-25 17:52:56 syranide IE11 and FF both implement it, but both are basically broken, they only work reliably for special keys (too) 19867 2013-11-25 18:07:09 lbljeffmo syranide: sounds good, but I'm probably not the best one to talk to about that :) Is there an issue open already? 19868 2013-11-25 18:07:29 syranide lbljeffmo: kind of, but it's about normalize which 19869 2013-11-25 18:08:32 syranide but I'm not sure if that's actually useful, if not dangerous, after testing the limits of which/keyCode/charCode I've come to realize that you can really onlt rely on them for special keys 19870 2013-11-25 18:08:48 syranide I should update it :) 19871 2013-11-25 18:09:21 vjeux_ syranide: if you come up with a cross-browser normalized way to access keys, I'm pretty sure no one is going to complain :p 19872 2013-11-25 18:10:20 syranide vjeux: I have a simple cross-browser solution that is according to HTML5-spec, but it only supports special keys (that's all you CAN support), and even the browsers that do support the new spec, they are broken for everything but special keys 19873 2013-11-25 18:10:31 syranide so yeah, I could put a PR for it and see what people think 19874 2013-11-25 18:10:53 vjeux haha 19875 2013-11-25 18:10:55 vjeux that sounds good 19876 2013-11-25 18:22:25 tomocchino hey vjeux SubtleGradient merged https://github.com/facebook/react/pull/596 19877 2013-11-25 18:22:33 tomocchino can you make sure it gets pulled into trunk, since Paul is still out? 19878 2013-11-25 18:22:57 vjeux so far my training has stopped at merging docs 19879 2013-11-25 18:23:02 vjeux but i can try it out today 19880 2013-11-25 18:23:31 tomocchino baha, okay, it can probably wait a day if you can't make it happen :P 19881 2013-11-25 18:25:40 SubtleGradient vjeux: my bad 19882 2013-11-25 18:26:09 vjeux SubtleGradient: move fast! 19883 2013-11-25 18:26:28 SubtleGradient challenge accepted 19884 2013-11-25 18:27:01 vjeux i'm working on a push blocker right now, i'll take a look when i'm done 19885 2013-11-25 18:27:18 SubtleGradient good deal 19886 2013-11-25 18:27:27 tomocchino yea, not that big a deal, just don't want to stay forked internally for long 19887 2013-11-25 18:27:50 tomocchino also I probably should have sent these messages in the other IRC room, ah well :P 19888 2013-11-25 18:27:56 SubtleGradient I'm working on narrowing down exactly why iOS crashes on the ReactRenderDocument-test 19889 2013-11-25 18:28:46 andreypopp SubtleGradient: I think this functionality will be removed soon, no? 19890 2013-11-25 18:29:10 andreypopp SubtleGradient: https://github.com/facebook/react/issues/515#issuecomment-28824010 19891 2013-11-25 18:30:36 vjeux tomocchino: be open 19892 2013-11-25 18:30:56 tomocchino eh, just spam :P 19893 2013-11-25 18:32:05 cpojer_ Why am I not part of the other mysterious chat room? 19894 2013-11-25 18:32:48 SubtleGradient andreypopp: thanks for the heads up, I'll check it out 19895 2013-11-25 18:33:12 andreypopp SubtleGradient: yeah, I even submitted a PR to remove it 19896 2013-11-25 18:33:19 andreypopp linked from the issue above 19897 2013-11-25 18:34:20 SubtleGradient ???? 19898 2013-11-25 18:35:07 chenglou there's another chatroom?! 19899 2013-11-25 18:35:16 chenglou what have we outsiders been missing 19900 2013-11-25 18:36:12 syranide chenglou: search the internet, we must find it! :D 19901 2013-11-25 18:36:42 petehunt vjeux: do you want me to send you the diff? 19902 2013-11-25 18:36:49 vjeux petehunt: sure 19903 2013-11-25 19:44:03 balpert "`document.addEventListener("scroll", callback, true)` crashes iOS Safari" 19904 2013-11-25 19:44:06 balpert SubtleGradient: wow, really? 19905 2013-11-25 19:44:10 syranide lol? 19906 2013-11-25 19:44:13 SubtleGradient yup 19907 2013-11-25 19:45:32 balpert I'm confused, don't we always call that? 19908 2013-11-25 19:45:54 cpojer_ we probably call it with false ;) 19909 2013-11-25 19:46:18 cpojer_ One small boolean for us, one big memory hole in safari. 19910 2013-11-25 19:47:37 balpert trapCapturedEvent(topLevelTypes.topScroll, 'scroll', mountAt); 19911 2013-11-25 19:52:08 SubtleGradient Actually it's `document.implementation.createHTMLDocument('test doc').addEventListener("scroll", function(){}, true)` that crashes 19912 2013-11-25 19:53:08 Daniel15 Yet another iOS Safari bug, I'm not even surprised :P 19913 2013-11-25 19:54:15 SubtleGradient Gotta' love uncatchable crashers 19914 2013-11-25 19:56:09 balpert that's awesome 19915 2013-11-25 20:02:42 syranide vjeux: good call, I'll remove them (they're useless anyway) 19916 2013-11-25 20:02:54 vjeux syranide: what are you going to remove? 19917 2013-11-25 20:02:56 balpert syranide: are they useless? 19918 2013-11-25 20:03:01 balpert I think they're both supposed to say "Meta" 19919 2013-11-25 20:03:04 balpert not 100% sure on that though 19920 2013-11-25 20:03:07 syranide vjeux: ContextMenu and OS 19921 2013-11-25 20:03:12 syranide balpert: yeah Meta 19922 2013-11-25 20:03:20 vjeux is Meta part of the standard? 19923 2013-11-25 20:03:33 syranide vjeux: yep, but in order to support them we would have to guess the keyboard 19924 2013-11-25 20:03:36 syranide which we can't :) 19925 2013-11-25 20:04:04 syranide and like I said, I don't know why you would ever want to listen for them 19926 2013-11-25 20:04:14 vjeux btw, what are you working on that requires you to need to have those bugs fixed? 19927 2013-11-25 20:04:23 syranide vjeux: bugs? 19928 2013-11-25 20:04:55 vjeux whatever wording, why did you encounter this? (I'm curious) 19929 2013-11-25 20:05:23 syranide aha, vjeux primarily you'll find this useful if you listen to keyboard input (say, a user pressing enter in a field, or say, arrow left, right, etc) 19930 2013-11-25 20:06:09 syranide basically, if you want make a webapp more "keyboard friendly" 19931 2013-11-25 20:06:17 vjeux i see 19932 2013-11-25 20:14:43 chenglou vjeux: what do the docs use to take code snippets and highlight them? 19933 2013-11-25 20:14:52 chenglou not the live editor, the static ones 19934 2013-11-25 20:14:54 vjeux you can give a range 19935 2013-11-25 20:15:05 vjeux look at how it's implemented, i don't remember the exact api 19936 2013-11-25 20:15:21 chenglou range? 19937 2013-11-25 20:15:47 chenglou (trying to pass it to a js method to get the highlighted spans and all. Not even sure it's js) 19938 2013-11-25 20:16:32 chenglou wait let me reformulate this: for the jsx compiler page http://facebook.github.io/react/jsx-compiler.html 19939 2013-11-25 20:16:39 chenglou how do I highlight the result on the right 19940 2013-11-25 20:17:06 chenglou or do I just use code mirror and make it uneditable 19941 2013-11-25 20:17:34 Daniel15 Maybe look at what the other pages use? 19942 2013-11-25 20:17:53 chenglou they're generated 19943 2013-11-25 20:18:01 chenglou from the markdown code blocks 19944 2013-11-25 20:18:06 Daniel15 Ah okay 19945 2013-11-25 20:18:38 balpert I don't think the other stuff is done in JS 19946 2013-11-25 20:18:47 Daniel15 Uneditable CodeMirror would work well, I've done that in the past 19947 2013-11-25 20:18:49 balpert codemirror with editing disabled sounds reasonable if that's a thing you can do 19948 2013-11-25 20:18:49 chenglou kk, that's what I wanted to know 19949 2013-11-25 20:19:02 Daniel15 It handles updates pretty well 19950 2013-11-25 20:19:31 chenglou Daniel15: how would you make codemirror uneditable? 19951 2013-11-25 20:19:48 chenglou since it's a div that floats on top of the textarea 19952 2013-11-25 20:20:52 Daniel15 I did it a few years ago with the previous version, there was a sample showing how to render the code statically rather than into a contenteditable div. It's probably different with the latest version, I can't remember how I did it back then 19953 2013-11-25 20:20:56 Daniel15 I just know that it was possible at the time 19954 2013-11-25 20:21:09 chenglou kk i'll check, thx 19955 2013-11-25 20:22:40 chenglou omg 19956 2013-11-25 20:22:44 chenglou readOnly: true 19957 2013-11-25 20:22:46 chenglou there 19958 2013-11-25 20:22:52 chenglou ACTION facepalms 19959 2013-11-25 20:22:59 Daniel15 Oh nice. It wasn't that easy with the old one :D 19960 2013-11-25 21:14:54 SubtleGradient Fixed the iOS crasher ? 19961 2013-11-26 00:05:43 chenglou one react contribution a day keeps the doctors away 19962 2013-11-26 01:25:31 chenglou Is hacker news down? 19963 2013-11-26 01:26:03 vjeux chenglou: working for me 19964 2013-11-26 01:26:31 chenglou Humm ok, can't access it since Saturday 19965 2013-11-26 04:46:13 Daniel15 If I have a UI component similar to a dropdown menu that appears when a user clicks it, what's the best way of hiding it when the user clicks off it / it loses focus? 19966 2013-11-26 04:48:57 balpert heh 19967 2013-11-26 04:49:37 balpert you use the currently-proprietary-to-FB ReactLayersMixin with a custom layer behavior 19968 2013-11-26 04:50:03 balpert right now you probably need to bind to click on document manually in a lifecycle method 19969 2013-11-26 04:52:23 Daniel15 This is for a Facebook component, I didn't realise the layers mixin had something to help with it :) 19970 2013-11-26 04:52:42 Daniel15 I'll have to dig in to it 19971 2013-11-26 04:53:01 Daniel15 Was just curious as to if there's a way to do it easily with React itself 19972 2013-11-26 04:55:41 balpert yeah, I think there are some custom layer behaviors 19973 2013-11-26 04:55:57 balpert you also want a contextual layer if you want it to be attached to something else 19974 2013-11-26 05:00:11 Daniel15 Apparently my server just went down so my IRC bouncer disconnected :/ 19975 2013-11-26 05:00:23 Daniel15 Anyways, yeah, I'm using a contextual layer :) 19976 2013-11-26 05:01:34 Daniel15 I think it'd be interesting to release some of the more generic UI components as open source in a React UI library 19977 2013-11-26 05:02:25 chenglou Daniel15: http://sindresorhus.com/bower-components/#!/search/react- 19978 2013-11-26 05:02:51 chenglou I made a few a while ago. I'm still planning to make more when I get the time 19979 2013-11-26 05:03:10 Daniel15 There's a bunch of generic controls used at Facebook (things like calendars, contextual layers, etc) that could be genericised 19980 2013-11-26 05:03:13 Daniel15 Oh cool 19981 2013-11-26 05:03:20 chenglou and this time not just random components scattered around 19982 2013-11-26 05:03:34 balpert https://github.com/facebook/react/issues/379 19983 2013-11-26 05:03:40 balpert I would love a whole React UI library 19984 2013-11-26 05:04:07 balpert and if there were just an entire set of JS libraries for ajax, routing, models, etc. that work well with React 19985 2013-11-26 05:05:15 chenglou balpert: yo once Im not screwing around with animation and css, I'm right on it 19986 2013-11-26 05:05:25 chenglou except I'm never done screwing around with animation and css 19987 2013-11-26 05:05:30 balpert heh 19988 2013-11-26 05:05:30 chenglou and, finals 19989 2013-11-26 05:05:30 chenglou lol 19990 2013-11-26 05:06:03 Daniel15 balpert: Yeah definitely 19991 2013-11-26 05:06:03 Daniel15 I ended up just writing my own AJAX function for the project I worked on over the weekend, given I didn't need legacy IE support so I could pretty much assume XMLHttpRequest/JSON.parse support 19992 2013-11-26 05:06:28 balpert Daniel15: yeah. I just feel like Facebook has a ton of core JS stuff that must work together well 19993 2013-11-26 05:06:36 balpert and like I don't want to include jQuery just for Ajax support 19994 2013-11-26 05:06:58 chenglou Daniel15: have you checked https://github.com/visionmedia/superagent 19995 2013-11-26 05:07:21 Daniel15 balpert: https://github.com/facebook/react/issues/603 :P 19996 2013-11-26 05:07:35 balpert Daniel15: yep I saw 19997 2013-11-26 05:07:37 balpert +1 19998 2013-11-26 05:07:41 Daniel15 Facebook's JavaScript is quite good compared to other JS codebases I've seen. 19999 2013-11-26 05:09:09 Daniel15 I actually have this in my signature on one of the developer forums I use: 20000 2013-11-26 05:09:16 Daniel15 "Repeat after me: jQuery is not JavaScript. It is not the answer to every JavaScript-related question. When you have to write some JavaScript, do not instantly react with "Oh, I'll do that with jQuery!"" 20001 2013-11-26 05:09:32 balpert heh 20002 2013-11-26 05:11:46 chenglou balpert: isn't swannodette the mori guy 20003 2013-11-26 05:11:50 balpert chenglou: yes! 20004 2013-11-26 05:11:57 chenglou nice to see him using react 20005 2013-11-26 05:13:05 balpert chenglou: I have never been a fan of the whole "request.post('/api/pet').send({ name: 'Manny', species: 'cat' }).set('X-API-Key', 'foobar').set('Accept', 'application/json')" chaining thing but I guess it's not popular 20006 2013-11-26 05:13:21 balpert s/popular/bad 20007 2013-11-26 05:13:38 balpert actually I'm not sure what I meant for that sentence to end with 20008 2013-11-26 05:13:43 balpert but I guess it's not too bad 20009 2013-11-26 05:13:51 chenglou lol 20010 2013-11-26 05:14:02 chenglou Im guilty of just dropping jquery when I need ajax 20011 2013-11-26 05:14:10 chenglou *dropping in 20012 2013-11-26 05:14:48 balpert Daniel15: jQuery's ubiquity makes it sort of reasonable to use in the tutorial, whereas it would be weird to drop in any other AJAX library like superagent since it's not so common 20013 2013-11-26 05:15:22 Daniel15 At my previous workplace someone dropped jQuery in just to get a fancy slider thing <_< 20014 2013-11-26 05:15:31 Daniel15 And then wondered why pages were so slow in IE6 20015 2013-11-26 05:15:47 chenglou it's ok if pages are slow in ie6 20016 2013-11-26 05:15:48 Daniel15 Since most of our clients are large corporations so ~95% of traffic comes from IE 20017 2013-11-26 05:15:51 chenglou jk 20018 2013-11-26 05:16:04 Daniel15 One of the largest companies that used the site were still using IE6 :( 20019 2013-11-26 05:16:32 chenglou my boss had a nice way of saying "browser inconsistencies" 20020 2013-11-26 05:16:41 chenglou "optimizing for the ie ecosystem" 20021 2013-11-26 05:16:44 Daniel15 balpert: I was thinking just include basic XMLHttpRequest code in the tutorial. I don't like loading jQuery in tutorials since it sometimes gives people the impression that you *need* jQuery to do AJAX 20022 2013-11-26 05:17:04 balpert Daniel15: yeah -- I wonder if it's even better to just abstract it out 20023 2013-11-26 05:17:20 Daniel15 Superagent looks interesting 20024 2013-11-26 05:17:29 balpert just tell people, "suppose you have a fetchComments(cb) function" 20025 2013-11-26 05:17:29 Daniel15 Yeah, just have a mock data source in the tutorial 20026 2013-11-26 05:17:33 balpert then process with the rest of the tutorial 20027 2013-11-26 05:17:40 Daniel15 Hard-coded list that gets appended to when you add records 20028 2013-11-26 05:17:52 Daniel15 That might be an even better idea 20029 2013-11-26 05:18:21 balpert I consider myself someone who knows most plain DOM APIs but I haven't touched XMLHTTPRequest 20030 2013-11-26 05:20:28 Daniel15 https://gist.github.com/Daniel15/7653825 That's what I did for the app I was doing over the weekend. It's a bit messy but works well enough 20031 2013-11-26 05:20:39 Daniel15 The alert() is probably not the best error handling mechanism though 20032 2013-11-26 05:22:00 Daniel15 I wish XHR2 actually improved the API a bit, it doesn't though 20033 2013-11-26 05:22:14 Daniel15 Still requires the annoying this.readyState === 4 ( = content is fully loaded) check 20034 2013-11-26 05:22:27 Daniel15 Rather than just having a onload event 20035 2013-11-26 05:23:08 Daniel15 Actually it might now 20036 2013-11-26 05:23:12 Daniel15 I haven't looked at it in a while 20037 2013-11-26 05:24:21 Daniel15 I wrote my own JavaScript libraries a few years ago (2010-2011 maybe?) and at the time I was still writing IE6-compatible code. I should probably learn more about the newer APIs than what I do at the moment. 20038 2013-11-26 05:27:34 balpert the only jQuery-less codebase I've really been working on is React itself 20039 2013-11-26 05:27:56 balpert do you not want to encodeURIComponent(key) as well? 20040 2013-11-26 05:29:10 Daniel15 Hmm, you're right. 20041 2013-11-26 05:29:30 Daniel15 In this case it's only used in my code and I control the keys so I could assume that the values wouldn't be anything weird 20042 2013-11-26 05:29:35 balpert right 20043 2013-11-26 05:29:39 Daniel15 I made a LOT of assumptions in that function 20044 2013-11-26 05:29:50 Daniel15 Like all responses are JSON objects that have a 'success' property 20045 2013-11-26 05:30:09 Daniel15 Since it's only used to load two different URIs, both of which return JSON 20046 2013-11-26 05:50:41 chenglou oh damn @ new issue 20047 2013-11-26 06:00:20 Daniel15 Github needs a 'Like' button 20048 2013-11-26 06:00:38 Daniel15 I've often seen issues flooded with "+1" and "me too!" comments 20049 2013-11-26 06:02:37 balpert isn't that trademarked? ;) 20050 2013-11-26 06:06:17 chenglou ^ lol 20051 2013-11-26 06:08:20 Daniel15 Just don't put a thumbs up or an 'F' on it =P 20052 2013-11-26 06:08:29 Daniel15 Google's probably trademarked '+1' but 'Plus One' is probably okay 20053 2013-11-26 06:29:10 balpert that reminds me, I was at the MIT Museum today and the shop sold stamps that had "Like" with a thumb on them! 20054 2013-11-26 06:29:24 balpert these I guess http://www.amazon.com/Like-Dislike-Stamps-Facebook-Button/dp/B004JOLOEO 20055 2013-11-26 06:40:54 chenglou I like Facebook's new like 20056 2013-11-26 06:43:46 Daniel15 Hah nice 20057 2013-11-26 06:44:03 Daniel15 I got a 'thumbs up' for my keychain from the shop at the Computer History Museum :P 20058 2013-11-26 07:36:17 sspi React + es6 classes? Yes! 20059 2013-11-26 07:36:52 sspi #613 20060 2013-11-26 17:44:01 chenglou ^ man 20061 2013-11-26 17:44:28 chenglou is this gonna boost react's speed in benchmarks much? 20062 2013-11-26 17:45:45 balpert chenglou: looks like you already did a sane thing in todomvc: https://github.com/tastejs/todomvc/blob/gh-pages/labs/architecture-examples/react/js/app.jsx#L140 20063 2013-11-26 17:46:02 balpert though I'm not completely sure how todo.id gets set there 20064 2013-11-26 17:46:33 chenglou balpert: vjeux did that 20065 2013-11-26 17:46:49 balpert oh I see 20066 2013-11-26 17:46:55 balpert it's set on 50 20067 2013-11-26 17:46:59 vjeux yay perf boost 20068 2013-11-26 17:47:06 chenglou once the finals are over I'll sync the new todomvc with the one in examples 20069 2013-11-26 17:47:13 chenglou and change a few small things 20070 2013-11-26 17:47:17 chenglou like use classSet 20071 2013-11-26 17:47:26 chenglou (and animaaationnsss) 20072 2013-11-26 17:50:16 balpert vjeux: no perf boost. mind if I get rid of id and use cid in the todomvc one? 20073 2013-11-26 17:50:37 vjeux oh man 20074 2013-11-26 17:50:38 balpert or if chenglou if you're going to fix it up soon then I'll let you just do that 20075 2013-11-26 17:50:41 vjeux math.random() -_- 20076 2013-11-26 17:55:19 chenglou vjeux: hey it was legit when it wasn't used as a benchmark target... =( 20077 2013-11-26 17:56:08 chenglou ok it wasn't that legit 20078 2013-11-26 17:56:40 SubtleGradient I'm going to setup some automated benchmark tasks next… 20079 2013-11-26 17:57:03 SubtleGradient What do we need to benchmark? 20080 2013-11-26 17:57:20 chenglou balpert: I dont mind so go ahead. While you're at it, can you remove `stringifyObjKeys` and use `classSet` instead? 20081 2013-11-26 18:00:56 balpert SubtleGradient: you could start with automating https://github.com/paulshen/react-bench 20082 2013-11-26 18:01:13 SubtleGradient ???? 20083 2013-11-26 18:19:45 balpert jk I just realized our todomvc doesn't use Backbone 20084 2013-11-26 18:23:01 balpert chenglou: good? https://github.com/spicyj/todomvc/compare/react-cx 20085 2013-11-26 18:24:37 Daniel15 Could you just use `React.addons.classSet` directly rather than aliasing it as `cx`? 20086 2013-11-26 18:24:49 Daniel15 ie. className={React.addons.classSet(...)} 20087 2013-11-26 18:25:26 balpert I suppose so 20088 2013-11-26 18:38:27 chenglou balpert: ours do though? 20089 2013-11-26 18:38:29 chenglou we have two versions 20090 2013-11-26 18:38:32 chenglou oh 20091 2013-11-26 18:38:50 chenglou yeah the backbone version is the simplified one 20092 2013-11-26 18:39:36 chenglou balpert: what about changing from id to cid 20093 2013-11-26 18:39:50 balpert cid is a backbone thing 20094 2013-11-26 18:41:05 chenglou oh right... derp 20095 2013-11-26 18:41:10 chenglou yeah it looks good 20096 2013-11-26 18:43:35 balpert chenglou: k, want to say here https://github.com/tastejs/todomvc/pull/734 that it looks good? 20097 2013-11-26 18:43:52 chenglou done 20098 2013-11-26 18:45:01 balpert thanks 20099 2013-11-26 18:46:10 chenglou -b 20100 2013-11-26 18:46:46 chenglou also, just a head up: I havent had the time to look into react context and write the docs yet 20101 2013-11-26 18:47:05 chenglou if it's not in a hurry then it'll probabaly have to be after december 15th or something 20102 2013-11-26 18:48:01 balpert I think that's fine :) 20103 2013-11-26 18:49:31 Daniel15 I wish Chrome devtools detected infinite loops 20104 2013-11-26 18:49:53 Daniel15 I just accidentally put a .toggle() in my onToggle handler and wondered why it kept locking up <_< 20105 2013-11-26 18:52:26 sspi Daniel15: it's the pause button :P 20106 2013-11-26 18:52:45 sspi (tool to detect infinite loops) 20107 2013-11-26 19:07:23 chenglou does anyone know the performance tradeoffs of converting React to use es6 classes? 20108 2013-11-26 19:07:49 balpert I'd assume it wouldn't change much in either direction 20109 2013-11-26 19:07:54 balpert can't imagine why it would 20110 2013-11-26 19:08:33 syranide balpert: btw, any reason why classSet isn't simply a supported property? 20111 2013-11-26 19:08:51 balpert syranide: there was some brief talk of it 20112 2013-11-26 19:08:59 syranide ah 20113 2013-11-26 19:09:17 syranide seems like an obvious extensions as style is object-based 20114 2013-11-26 19:09:21 syranide *extension 20115 2013-11-26 19:23:17 andreypopp from jwalke's issue on gh I don't understand the rationale to move to es6 classes 20116 2013-11-26 19:24:10 andreypopp createClass looks much nicer than es6 class + enhancers 20117 2013-11-26 19:33:23 sspi I do like the idea of adding es6 classes, but do agree that the enhancers example is suboptimal 20118 2013-11-26 19:36:02 chenglou I wonder what es6 class' impact will be on the js community 20119 2013-11-26 19:50:39 sspi well, there will still be developers who get paid for throwing jQuery at everything... that's 1 20120 2013-11-26 19:52:33 Daniel15 Pretty much every JS framework ever has had its own class-like implementation, would be nice to see a bit of consistency between them :P 20121 2013-11-26 19:54:13 sspi yeah, I was thinking about using es6 classes at my current project... or something like TypeScript 20122 2013-11-26 19:56:20 Daniel15 At this point I'd probably use ES6 classes with a transpiler like Traceur or JSTransform 20123 2013-11-26 19:56:43 Daniel15 Since eventually the same syntax will be native, as opposed to TypeScript which will probably never be native 20124 2013-11-26 19:56:48 Daniel15 TypeScript does have some nice features though 20125 2013-11-26 19:58:43 sspi Traceur does too much to stay spec compliant 20126 2013-11-26 19:59:40 balpert doesn't TypeScript attempt to follow ES6? 20127 2013-11-26 19:59:41 sspi using accessor properties does not make your code fast 20128 2013-11-26 20:00:05 sspi balpert: yes, they try to follow the spec closely... but in a more sane way imho 20129 2013-11-26 20:02:58 sspi btw. TypeScript's type support is nice, right now I'm using console.assert to check every parameter 20130 2013-11-26 20:03:23 sspi typescript would check it at build time 20131 2013-11-26 20:03:26 balpert I just couldn't get over the fact that they said type(a && b) is type(b) 20132 2013-11-26 20:08:24 andreypopp balpert: they lack adt or polymorphic type variants 20133 2013-11-26 20:08:45 balpert andreypopp: well that too. but that's closer to nice-to-have territory 20134 2013-11-26 20:08:55 balpert rather than incorrect semantics 20135 2013-11-26 20:09:00 andreypopp balpert: I'm also not satisfied that left null as is, I'd prefer to have nullable types instead 20136 2013-11-26 20:09:12 balpert yes, another of my complaints :) 20137 2013-11-26 20:09:53 andreypopp balpert: otherwise I really like structural typing 20138 2013-11-26 20:10:04 andreypopp s/that/they 20139 2013-11-26 20:10:39 balpert nullable types: https://typescript.codeplex.com/discussions/397565 20140 2013-11-26 20:10:49 balpert && is wrong: https://typescript.codeplex.com/discussions/397571 20141 2013-11-26 20:12:43 balpert I hope that some of the smart guys at Facebook will add useful static typechecking to JS :) 20142 2013-11-26 20:12:59 sspi I believe there was already a spec for that 20143 2013-11-26 20:12:59 andreypopp yeah, would be great 20144 2013-11-26 20:13:25 balpert right now they have this @typechecks thing but it sounds like it's all runtime 20145 2013-11-26 20:13:26 sspi not es6 btw. 20146 2013-11-26 20:13:50 balpert also no ADTs I think 20147 2013-11-26 20:15:02 Daniel15 Yeah I think the Facebook typechecks are all at runtime 20148 2013-11-26 20:15:31 sspi typechecks at runtime? 20149 2013-11-26 20:15:51 Daniel15 There's a preprocessor that instruments functions with pre- and post-condition checking so devs see the errors in the developer console during development 20150 2013-11-26 20:15:59 balpert sspi: optionally compiled in for testing 20151 2013-11-26 20:16:12 balpert not for prod 20152 2013-11-26 20:16:15 sspi yeah, nevermind... I just thought of it :P - actually, exactly how I do it 20153 2013-11-26 20:17:16 brainkim I can't wait for type variance to hit the javascript community, and everyon realizes why they've been using noop functions all this time 20154 2013-11-26 20:18:51 sspi btw. http://wiki.ecmascript.org/doku.php?id=strawman:guards 20155 2013-11-26 20:19:02 sspi not sure what the current status is 20156 2013-11-26 20:19:12 sspi (or where the es7 page is) 20157 2013-11-26 20:33:08 chenglou hey anyone used Haskell before? how awesome its type checking actually is? 20158 2013-11-26 20:33:25 chenglou and how much can it be ported to js? 20159 2013-11-26 20:33:30 chenglou ^ newb here 20160 2013-11-26 20:35:02 balpert it's awesome :) 20161 2013-11-26 20:35:27 balpert my current hope is that http://www.rust-lang.org/ with emscripten can be a viable JS alternative 20162 2013-11-26 20:35:32 balpert though it may be too low-level to be useful 20163 2013-11-26 20:37:51 syranide chenglou: I've used it, I don't like it :) 20164 2013-11-26 20:38:58 syranide (or rather, had courses in it) 20165 2013-11-26 20:40:46 balpert I haven't used Haskell much directly though I had a course in Standard ML and really enjoyed that 20166 2013-11-26 20:41:49 chenglou yeah same! 20167 2013-11-26 20:41:57 syranide I like the idea of haskell and it's quite "beautiful", but to me, the code that comes out (that I've seen) is comparable to super-optimized javascript, really pretty, but impossible to understand and actually make minor changes to 20168 2013-11-26 20:42:25 balpert chenglou: oh, you did SML? 20169 2013-11-26 20:42:36 chenglou yeah! liked it a lot 20170 2013-11-26 20:42:42 balpert as I understand it, its type system is not too far off 20171 2013-11-26 20:42:45 balpert slightly more constrained 20172 2013-11-26 20:42:54 chenglou everything works after compilation =) 20173 2013-11-26 20:42:55 balpert and of course Haskell is lazy which changes how you write code a lot 20174 2013-11-26 20:43:06 balpert right! 20175 2013-11-26 20:43:48 chenglou clojurescript's typed clojure should be similar right? 20176 2013-11-26 20:43:52 balpert I'm hopeful for Rust http://www.rust-lang.org/ which has a similar type system but is imperative and has the potential to be faster 20177 2013-11-26 20:44:07 balpert I didn't look much at that but it didn't seem to be what I wanted 20178 2013-11-26 20:44:24 chenglou how will ie and safari ever adopt rust though lol 20179 2013-11-26 20:44:42 chenglou and even chrome at that. Can't imagine google adopting rust before dart 20180 2013-11-26 20:45:31 balpert right, Rust isn't designed to be a web language 20181 2013-11-26 20:45:42 balpert but you can use emscripten to make anything a web language ;) 20182 2013-11-26 20:45:56 balpert I'm a little torn on emscripten 20183 2013-11-26 20:46:01 andreypopp there's also purescript which is modelled after Haskell — https://github.com/paf31/purescript 20184 2013-11-26 20:46:22 andreypopp and has extensible records and I think it will have polymorphic type variants soon 20185 2013-11-26 20:48:12 balpert and of course Fay https://github.com/faylang/fay/wiki 20186 2013-11-26 20:48:20 chenglou oh so that's that's what purescript is 20187 2013-11-26 20:48:21 chenglou heard of it 20188 2013-11-26 20:49:01 sspi balpert: have you done anything with Rust? 20189 2013-11-26 20:49:08 balpert sspi: not much yet 20190 2013-11-26 20:49:09 chenglou balpert: so about typed clojurescript, what about it that you didn't like? 20191 2013-11-26 20:49:17 balpert sspi: tried it a little 20192 2013-11-26 20:50:51 balpert chenglou: I didn't look into it a ton but it sounded like it was all runtime type checking? 20193 2013-11-26 20:50:56 balpert though looking back now I'm not so sure 20194 2013-11-26 20:51:11 chenglou dont think so 20195 2013-11-26 20:51:48 chenglou im actually eager to try clojurescript one day 20196 2013-11-26 20:52:01 chenglou is it like, the third most used compile-to-js language right now? 20197 2013-11-26 20:52:26 balpert after CoffeeScript and? 20198 2013-11-26 20:52:28 chenglou behind coffee script and dunno typescript 20199 2013-11-26 20:54:46 sspi anyone used Go here? 20200 2013-11-27 15:45:42 petehunt syranide: classSet was originally built in 20201 2013-11-27 15:45:51 syranide petehunt: oh ok? 20202 2013-11-27 15:45:55 petehunt we took it out since it was fairly magical 20203 2013-11-27 15:46:09 petehunt and also made our transform easier 20204 2013-11-27 15:46:38 syranide magical? in what sense, it should be a trivial transform from object -> string ... just as we do manually now (or with the helper) 20205 2013-11-27 15:47:04 petehunt syranide: we do class name minifying 20206 2013-11-27 15:47:15 syranide ah 20207 2013-11-27 15:47:46 syranide petehunt: ah right, but for class name minifying you could just as well use "cx" that just passes the object through? 20208 2013-11-27 15:48:02 petehunt thats why we switched to it :) 20209 2013-11-27 15:49:05 syranide petehunt: hmm, this minifying, how does it actually work? one has to specify the classNames directly inside cx() or can it actually be a generated object? 20210 2013-11-27 15:49:19 petehunt no it must be an object literal 20211 2013-11-27 15:49:23 petehunt no expressions allowed 20212 2013-11-27 15:49:27 petehunt enforced via lint rule before commit 20213 2013-11-27 15:50:02 syranide ah right, but to me, it seems like you are choosing to go the long way (to get classname minifying), but people who don't want it, are also forced to take the long way now 20214 2013-11-27 15:50:29 syranide I mean, other than being able to accidentally feed a non-cx:ed object to classSet, there's no reason why it can't still be supported? 20215 2013-11-27 15:51:06 petehunt i dont remember too well tbh 20216 2013-11-27 15:51:10 syranide hehe ok :) 20217 2013-11-27 15:51:20 petehunt i think it was something about moving as much special casing out of core as possible 20218 2013-11-27 15:51:36 petehunt keep the number of things you need to learn small 20219 2013-11-27 15:51:48 petehunt ask tomocchino next time he's in here 20220 2013-11-27 15:51:55 syranide yeah, to be quite frank, if it becomes possible to do this via addons, I totally agree with your decision 20221 2013-11-27 15:52:01 petehunt just wanted to highlight that it was not a bad idea :) 20222 2013-11-27 15:52:13 syranide petehunt: appreciated ;) 20223 2013-11-27 18:18:53 sspi I'm trying to hack onClick="command:someCommandName" into React, but the event system doesn't like my idea 20224 2013-11-27 18:19:06 sspi Nor do mixins it seems 20225 2013-11-27 18:23:27 sspi Btw. Anyone looked at #462 yet? 20226 2013-11-27 18:34:55 jxg I just wanted to double-check that I'm not missing some easier way to automate the process 20227 2013-11-27 18:35:12 jxg whoops 20228 2013-11-27 18:43:29 vjeux :p 20229 2013-11-27 20:12:31 sspi zpao: also in Manila (JSConf Asia) ? :) 20230 2013-11-27 20:12:52 zpao not this time, just pete and sebastian 20231 2013-11-27 20:23:57 sspi ^ zpao is going wild 20232 2013-11-27 20:24:39 zpao people wrote lots of code while i was on vacation :) 20233 2013-11-27 20:25:10 sspi you went on vacation? where did you go :) 20234 2013-11-27 20:27:12 zpao seattle for a long weekend 20235 2013-11-27 20:27:28 sspi nice :) hope you had a great time! 20236 2013-11-27 20:27:44 zpao nothing terribly exciting, but exploring bits of the country weekends at a time... 20237 2013-11-27 20:35:41 syranide anyone here vageuly experienced with automated testing in the browser? a double-space that (normally) renders as a space... would testing generally expect a space, or a double-space? 20238 2013-11-27 20:41:30 sspi zpao: I was wondering if anyone had already looked at #462? 20239 2013-11-27 20:45:28 syranide lbljeffmo: have you had any time to think about the whitespace "issue"? 20240 2013-11-27 20:46:17 vjeux zpao: keep merging, we need react to stay first on the list 20241 2013-11-27 20:46:17 vjeux https://code.facebook.com/projects/ 20242 2013-11-27 20:47:33 sspi lol 20243 2013-11-27 20:47:50 sspi think we need a better strategy... 20244 2013-11-27 20:48:02 sspi strike when they update :P 20245 2013-11-27 20:56:22 syranide how do you actually run the phantomjs tests in react? 20246 2013-11-27 21:08:13 balpert syranide: grunt test? 20247 2013-11-27 21:08:41 syranide balpert: yeah that used to work, but now it says "1..0" and "done without errors" even though I intentionally inserted errors 20248 2013-11-27 21:17:51 lbljeffmo syranide: I have, and I think we're good to go. I've primarily been holding off because I was out last week + the week before -- and then this week no one is around 20249 2013-11-27 21:17:52 zpao syranide: should still work. try npm install again? 20250 2013-11-27 21:18:37 lbljeffmo syranide: so I'm thinking we can finally land this thing next week 20251 2013-11-27 21:19:04 zpao sspi: not that i know of. pete was looking at it before and it looks like balpert has been talking with you about it. i'll try to get more eyes on it soon 20252 2013-11-27 21:19:43 sspi zpao: tnx :) 20253 2013-11-27 21:20:28 balpert I can do a review if it's ready and that would be helpful 20254 2013-11-27 21:21:39 syranide lbljeffmo: go with 3B? 20255 2013-11-27 21:21:46 zpao balpert: it would be helpful! 20256 2013-11-27 21:21:59 syranide lbljeffmo: also, I'll fix up the conversion tool 20257 2013-11-27 21:22:07 sspi balpert: awesome! :D 20258 2013-11-27 21:22:09 balpert zpao: okay! 20259 2013-11-27 21:23:47 syranide zpao: did a grunt clean and that fixed it :) 20260 2013-11-27 21:23:50 syranide thanks 20261 2013-11-27 21:26:23 syranide zpao: uuuh, it says no errors but a few tests show>> undefined._assertLink: Invariant Violation: Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don't want to use valueLink 20262 2013-11-27 21:27:35 sspi I think that is on purpose... 20263 2013-11-27 21:28:03 syranide ah right 20264 2013-11-27 21:28:17 zpao syranide: heh, i saw those the other day and haven't had a chance to look into it 20265 2013-11-27 21:28:40 zpao sspi: ah is it? might need to fix a test so that doesn't get lgged then 20266 2013-11-27 21:29:12 sspi I think so at least :P - could imagine a test for a throw to trigger this behavior... could be wrong though 20267 2013-11-27 21:30:22 zpao we have other tests that check invariants and they don't all log. might just be written differently 20268 2013-11-27 21:38:47 zpao syranide: hey, you did the IE8 fixes for the in browser transform right? 20269 2013-11-27 21:38:54 syranide zpao: yep 20270 2013-11-27 21:39:23 zpao want to take a stab at https://github.com/facebook/react/issues/612 then? you know all the different repos to look at to take that one :) 20271 2013-11-27 21:40:01 syranide zpao: that might actually be accidentally fixed by my whitespace PR 20272 2013-11-27 21:40:21 syranide or uh, nvm 20273 2013-11-27 21:40:55 zpao hopefully not :P 20274 2013-11-27 21:40:57 syranide zpao: anyway yep, I'll fix it 20275 2013-11-27 21:41:29 zpao sweet, i think this time you get to commit to upstream esprima 20276 2013-11-27 21:46:49 syranide zpao: do you know what ForOfStatement actually is? for(... ?) 20277 2013-11-27 21:47:18 syranide oh, it's something new apparently, nvm me :) 20278 2013-11-27 21:50:28 zpao yea, es6 and all that fun stuff 20279 2013-11-27 21:51:17 zpao i think it's for...in with wider support and built in hasOwnProperty (but don't quote me on that) 20280 2013-11-27 21:51:32 syranide zpao: createForOfStatement does not exist in esprima/master, only in fb-harmony, I'm assuming that fb-harmony is the right branch then? 20281 2013-11-27 21:52:12 lbljeffmo syranide: https://github.com/ariya/esprima/tree/harmony (it's upstream -- just not in master) 20282 2013-11-27 21:52:28 zpao what lbljeffmo said 20283 2013-11-27 21:52:48 syranide lbljeffmo: ah thought so, thanks :) (still new to this github forking) 20284 2013-11-27 21:53:00 cpojer for of is kinda lame 20285 2013-11-27 21:53:03 cpojer yay more syntax 20286 2013-11-27 21:53:14 cpojer and I think for of only iterates over the values 20287 2013-11-27 21:53:38 syranide it's not actually accepted yet though? 20288 2013-11-27 21:53:59 lbljeffmo syranide: for-of is part of es6, yes 20289 2013-11-27 21:54:40 syranide lbljeffmo: according to dev.mozilla it's just a proposal, but might be outdated 20290 2013-11-27 21:54:55 lbljeffmo syranide: probably outdated -- its def in the spec 20291 2013-11-27 21:55:05 lbljeffmo (es6 isn't finalized yet, but for-of will definitely be a part of it) 20292 2013-11-27 21:55:23 syranide ah yeah that's probably it 20293 2013-11-27 21:56:41 lbljeffmo cpojer: How often do you write for (var key in thing) { var thisThing = thing[key]; /* use thisThing */ } ? I do it a ton 20294 2013-11-27 21:57:03 syranide lbljeffmo: yeah, that is quite rediculous 20295 2013-11-27 21:57:12 cpojer lbljeffmo: absolutely agree but then you refactor your code and you are like "oh I need the key there" 20296 2013-11-27 21:57:23 cpojer and then you change to for in and you have to add thisThing again 20297 2013-11-27 21:57:27 cpojer which is annoying 20298 2013-11-27 21:57:44 zpao cpojer: meh. using for-of would have caught some bugs we released 20299 2013-11-27 21:57:52 cpojer why not something like for ([key, value] in object) 20300 2013-11-27 21:58:05 syranide it's weird that they don't do it like PHP, you always get the value, and you can choose to get the key 20301 2013-11-27 21:58:08 cpojer like a simplified version of array destructuring inside of for..in 20302 2013-11-27 21:58:13 lbljeffmo gotcha -- I don't find myself doing those refactors that often I dont think. It's really useful for iterators of other kinds though (like generators) 20303 2013-11-27 21:58:39 cpojer lbljeffmo: sure, what I say is theoretical because I haven't used for…of yet, however I think that it will be the case in some cases 20304 2013-11-27 21:59:01 cpojer I would have just preferred to extend the for…in to also support values rather than adding for…of 20305 2013-11-27 21:59:33 lbljeffmo I think someone at some point mentioend backward compat issues with that -- but I don't recall what they were 20306 2013-11-27 22:00:10 cpojer it is always backward compat issues :) 20307 2013-11-27 22:00:42 syranide lbljeffmo: for (var k, v in x) seems like a simple solution, but perhaps I'm missing something 20308 2013-11-27 22:01:25 zpao syranide: well, semantics are now different (comma already has meaning 20309 2013-11-27 22:01:33 syranide oh 20310 2013-11-27 22:01:58 zpao so if you do it as destructuring ([k,v] in x) it could work 20311 2013-11-27 22:02:44 balpert zpao: but you can't use comma in an lvalue, can you? 20312 2013-11-27 22:02:52 syranide I'm still holding out for the day they just throw JS in the trash and give us an interpreter (asm.js seems really interesting) 20313 2013-11-27 22:03:05 syranide so that we can actually make our own choices and not get bogged down by old browsers 20314 2013-11-27 22:03:20 syranide *bytecode interpreter 20315 2013-11-27 22:03:25 sspi NO! 20316 2013-11-27 22:03:28 sspi (sorry :P) 20317 2013-11-27 22:03:54 lbljeffmo welp -- I've gotta go.......uh....wash my hair. You guys have fun with this convo 20318 2013-11-27 22:03:55 lbljeffmo :p 20319 2013-11-27 22:04:00 zpao balpert: (probably a bad answer, need to read more of the spec) but wouldn't it just say k is undefined and v is then used for assignment? 20320 2013-11-27 22:04:02 syranide haha 20321 2013-11-27 22:04:02 sspi lol 20322 2013-11-27 22:04:10 balpert zpao: maybe. 20323 2013-11-27 22:05:35 zpao var k,v=7; // k === undefined, v === 7 20324 2013-11-27 22:05:59 syranide zpao: the esprima bug is messing with me, I _know_ that it would throw errors in IE8 (IE9?) ... but it doesn't :O 20325 2013-11-27 22:06:06 syranide *should 20326 2013-11-27 22:07:06 zpao hmm, maybe IE fixed that bug? 20327 2013-11-27 22:07:31 syranide zpao: well, it's IE8 so I doubt it 20328 2013-11-27 22:09:04 syranide zpao: huuuuh... have they? I just tried "[1,]" and it doesn't error 20329 2013-11-27 22:09:21 zpao syranide: in real ie8 or ie9 compat? 20330 2013-11-27 22:09:29 syranide real IE8 20331 2013-11-27 22:09:49 syranide ah wait, {a:1,} errored 20332 2013-11-27 22:10:05 zpao ah, so they fixed one of them 20333 2013-11-27 22:10:13 syranide well, {a:1,} errors in chrome too 20334 2013-11-27 22:10:48 syranide ok, this is really weird, it only errors in the console 20335 2013-11-27 22:10:57 balpert zpao: yeah, but there you're creating a list of var statements 20336 2013-11-27 22:11:07 zpao syranide: make sure you use it in an assignment 20337 2013-11-27 22:11:13 zpao it's an invalid statement on its own 20338 2013-11-27 22:11:13 balpert currently it's probably not possible to define multiple vars in a for/in statement 20339 2013-11-27 22:11:15 balpert though maybe it is 20340 2013-11-27 22:11:23 balpert syranide: or wrap in parens 20341 2013-11-27 22:11:35 balpert zpao: https://github.com/facebook/react/pull/593 look good? 20342 2013-11-27 22:11:50 syranide zpao: ah correct, parens solved it 20343 2013-11-27 22:12:18 zpao balpert: yep. nice way of solving that :) 20344 2013-11-27 22:12:19 balpert in IE8 [1,] gives [1,undefined] I think 20345 2013-11-27 22:12:38 zpao now i want to introduce a lint warning so we can see it in action 20346 2013-11-27 22:14:42 syranide zpao: hmm, am I mistaken perhaps, is it only IE7 that does this, and hes trying it in IE7 (which isn't actually supported anyway) 20347 2013-11-27 22:19:26 zpao syranide: i just opened ie8 and it looks like ({a:1,}) is giving me an error 20348 2013-11-27 22:20:09 syranide zpao: wow, that is weird, it's not giving me any, I have to search my WU history and see if it got patched 20349 2013-11-27 22:20:46 zpao actually, now it's not happening... 20350 2013-11-27 22:21:52 sspi {x:1, } should give an error... 20351 2013-11-27 22:22:13 syranide zpao: :O 20352 2013-11-27 22:22:48 zpao syranide: ok, so if i'm on about:blank it gives an error 20353 2013-11-27 22:23:04 zpao ah ha 20354 2013-11-27 22:23:12 zpao quirks mode triggers it 20355 2013-11-27 22:23:29 balpert :\\ 20356 2013-11-27 22:23:36 syranide aaah yeah thought so 20357 2013-11-27 22:23:39 balpert does that mean it works fine in strict mode? 20358 2013-11-27 22:23:42 syranide yep 20359 2013-11-27 22:23:47 zpao yea 20360 2013-11-27 22:24:09 zpao ie7 standards gives the error too, but that's fine 20361 2013-11-27 22:24:10 syranide awesome, you learn something new every day apparently (no more hunting commas with the shotgun) 20362 2013-11-27 22:24:19 zpao ie8 standards works 20363 2013-11-27 22:24:33 syranide anyway, I'll submit the fix to esprima 20364 2013-11-27 22:25:17 zpao yea, it's a safe fix. more of a style thing now 20365 2013-11-27 22:25:25 syranide yep 20366 2013-11-27 22:28:47 balpert ACTION slowly climbs the ranks 20367 2013-11-27 22:29:04 zpao ACTION gets 1 commit for every merge 20368 2013-11-27 22:29:17 zpao ACTION can never be beaten if this keeps up 20369 2013-11-27 22:29:40 syranide zpao: we can always add more than one commit to each merge, ha! :P 20370 2013-11-27 22:29:58 balpert zpao: github contributors page doesn't count merges :) 20371 2013-11-27 22:30:09 zpao balpert: good :) 20372 2013-11-27 22:30:43 zpao syranide: truth, but it doesn't happen super often (and we'll request a squash if some of those commits are silly) 20373 2013-11-27 22:30:53 syranide zpao: ;) 20374 2013-11-27 22:32:14 balpert zpao: you mean like https://github.com/facebook/react/pull/451? 20375 2013-11-27 22:33:25 zpao well, some people are harder to convince to squash 20376 2013-11-27 22:33:37 sspi lol 20377 2013-11-27 22:33:53 balpert ACTION notes that you just need to be really stubborn 20378 2013-11-27 22:34:19 zpao at that scale it becomes harder to actually do and there's meaningful progress there. a merge with 3 commits where 2 of there are just "doh, typo" will probably get squashed. by you or me 20379 2013-11-27 22:35:17 balpert yeah 20380 2013-11-27 22:35:28 balpert so long-lived branches with small commits are the secret 20381 2013-11-27 22:35:40 syranide zpao: is it not possible to branch from within a branch? 20382 2013-11-27 22:36:09 syranide oh wait nvm 20383 2013-11-27 22:36:13 syranide I misunderstood github 20384 2013-11-27 22:36:21 chenglou SubtleGradient: hey that grunt-complexity is neat 20385 2013-11-27 22:36:27 chenglou SubtleGradient: how reliable is it? 20386 2013-11-27 22:37:16 SubtleGradient chenglou: I do not know. I just turned it on. Afaik it's just walking over the AST and counting stuff. 20387 2013-11-27 22:37:43 chenglou because if there's a magic tool that tells me "hey this piece of code sucks" then I'd use it in every project 20388 2013-11-27 22:39:09 cpojer you can me as a tool and I'll just tell you your code sucks 20389 2013-11-27 22:39:12 cpojer every single line 20390 2013-11-27 22:39:15 cpojer :D 20391 2013-11-27 22:39:29 chenglou lol 20392 2013-11-27 22:41:52 lbljeffmo lol 20393 2013-11-27 22:47:24 zpao chenglou: also, code climate exists 20394 2013-11-27 22:48:21 chenglou oh damn just noticed it's free... 20395 2013-11-27 22:48:55 zpao for open source at least 20396 2013-11-27 22:49:08 zpao though i haven't been able to set up the JS one for react... 20397 2013-11-27 22:49:48 zpao it just tries to look at the 1 ruby file that exists 20398 2013-11-27 23:05:26 chenglou ^ what 20399 2013-11-27 23:05:33 chenglou github app does funny things 20400 2013-11-27 23:06:05 chenglou should have stuck with the command line 20401 2013-11-27 23:06:57 sspi just noticed a new (I think) Chrome feature... 20402 2013-11-27 23:07:48 sspi press a key and don't release it, will give you other variations 20403 2013-11-27 23:08:23 balpert sspi: that's an OS X feature? 20404 2013-11-27 23:08:30 sspi really? lol 20405 2013-11-27 23:09:20 chenglou sspi: yep 20406 2013-11-27 23:10:14 sspi one more reason to love my macbook air 20407 2013-11-27 23:45:36 vjeux just submitted a talk about react to http://2014.jsconf.us/speakers.html, finger crossed :) 20408 2013-11-28 00:29:47 cpojer vjeux: nice! 20409 2013-11-28 00:45:25 balpert vjeux: good luck! 20410 2013-11-28 00:45:53 balpert let us know when you hear 20411 2013-11-28 00:45:55 balpert maybe I'll attend 20412 2013-11-28 00:46:00 vjeux cool 20413 2013-11-28 00:46:28 vjeux will remain open until Friday, January 10th at 12:00PM EST 20414 2013-11-28 00:46:36 vjeux so it's going to be in a while :p 20415 2013-11-28 00:51:16 chenglou zpao: why "final argument"? 20416 2013-11-28 00:51:19 chenglou https://github.com/facebook/react/pull/618/files#r7974399 20417 2013-11-28 00:51:32 zpao so you can reuse the sentence 20418 2013-11-28 00:51:36 zpao or you can be specific 20419 2013-11-28 00:51:56 zpao nobody will know what rootNode is when it's not shown in the signature 20420 2013-11-28 00:52:12 chenglou kk 20421 2013-11-28 00:52:25 zpao or just say first, or third, or whatever 20422 2013-11-28 00:52:40 chenglou first it is 20423 2013-11-28 02:45:02 chenglou zpao: oh man lol! 20424 2013-11-28 02:45:09 chenglou can't believe I was this slow 20425 2013-11-28 02:45:16 chenglou I was like, wait, sentence reuse? 20426 2013-11-28 02:45:22 zpao hehe 20427 2013-11-28 02:46:38 chenglou zpao: alright done, sorry about that 20428 2013-11-28 02:46:44 zpao no worries :) 20429 2013-11-28 02:50:39 zpao thanks for doing that :) 20430 2013-11-28 02:51:05 chenglou np 20431 2013-11-28 02:51:32 zpao ok, i think i'm going to stop working now 20432 2013-11-28 02:53:17 zpao happy thanksgiving fellow americans! (you canadians got yours last month...). 20433 2013-11-28 02:54:21 chenglou oh damn, happy thanksgiving 20434 2013-11-28 03:48:51 chenglou balpert: how to get the error line number? 20435 2013-11-28 03:49:11 chenglou also some errors are general 20436 2013-11-28 03:49:23 balpert chenglou: I don't know if you can, hence my "Can we get a line number for the error?" 20437 2013-11-28 03:49:33 chenglou oh 20438 2013-11-28 03:49:42 chenglou thought it was a request 20439 2013-11-28 03:50:15 balpert well, if it's possible, then it's a request :) 20440 2013-11-28 18:40:24 sspi balpert, I used to think we were friends... :P 20441 2013-11-28 18:40:29 balpert haha 20442 2013-11-28 18:41:07 sspi tnx for the review dude :) 20443 2013-11-28 18:45:14 balpert sspi: okay, done with inline comments 20444 2013-11-28 18:45:20 balpert now I need to remember what my overall feedback was 20445 2013-11-28 18:46:06 sspi balpert: perhaps also add that to the comments? 20446 2013-11-28 18:46:35 balpert yeah, I was going to write any high-level feedback as a comment on the entire pull request 20447 2013-11-28 18:46:46 balpert though I think I actually covered it all inline 20448 2013-11-28 18:47:01 balpert I'll let you know if I think of anything more 20449 2013-11-28 18:47:07 sspi awesome :) 20450 2013-11-28 18:47:14 balpert let me know if anything doesn't make sense :) 20451 2013-11-28 18:47:42 sspi will do, I'll probably start working on it somewhere this weekend 20452 2013-11-28 18:47:56 balpert I think the only big things were that string manipulation can't work and that you need to listen on each document separately 20453 2013-11-28 18:49:07 Schtive I have a question. I came across that URL petehunt.github.io/react-touch that I found on the author's blog or something. Are you guys building a "react-UI" lib? 20454 2013-11-28 18:49:13 balpert looks good overall though! 20455 2013-11-28 18:49:37 balpert Schtive: no immediate plans, though I know we do want to at least have a component/plugin directory 20456 2013-11-28 18:49:47 balpert Schtive: I wouldn't rule out React UI though :) 20457 2013-11-28 18:50:28 Schtive balpert: Oh I see! 20458 2013-11-28 18:52:11 sspi balpert: tnx for code review :) if things look bad, please inform me though - makes me a better developer in the end :) 20459 2013-11-28 18:52:44 balpert sspi: no, your code seems good overall 20460 2013-11-28 18:53:10 balpert once you fix all the things I mentioned I'll do another pass but I think it should be just about good to go 20461 2013-11-28 18:53:34 sspi great :D 20462 2013-11-28 18:53:44 Schtive Another one. Is there a roadmap for the project? Things you guys plan for 1.0 or after 20463 2013-11-28 18:53:59 sspi 1.0 - take over the world 20464 2013-11-28 18:54:28 Schtive The angular guys won't like it :P 20465 2013-11-28 18:54:54 balpert Schtive: informal roadmap: https://groups.google.com/d/msg/reactjs/D17IcWxMfnU/oeAVOWlq6O0J 20466 2013-11-28 18:55:36 Schtive Thanks. 20467 2013-11-28 18:55:37 sspi browser extension, I wanted to do that... lol 20468 2013-11-28 18:55:51 sspi balpert: interesting link btw. 20469 2013-11-28 18:57:21 sspi btw. I was under the impression FB was already using es6 classes internally... 20470 2013-11-28 18:57:32 balpert I think that's right, just not for React 20471 2013-11-28 18:57:38 balpert not 100% sure on that though 20472 2013-11-28 19:01:24 sspi Schtive: how do you like React so far? 20473 2013-11-28 21:18:39 syranide btw guys, any new info on Flux? :) 20474 2013-11-28 21:59:13 syranide any tips for conditionally inserting nodes? 20475 2013-11-28 22:01:58 chenglou syranide: {x &&
    } 20476 2013-11-28 22:02:26 syranide chenglou: hmm, it is possible to use braces inside those braces too? 20477 2013-11-28 22:03:41 bsansouci_ Hey everyone, I just discovered React and after playing around with it a little something came to my mind that I had to let out on this irc: React is an amazing piece of technology which I found is brilliantly executed, in other words it's beautiful 20478 2013-11-28 22:04:01 syranide bsansouci_: I can only agree :) 20479 2013-11-28 22:04:03 chenglou syranide: of course. I remember I had a tip entry on that 20480 2013-11-28 22:04:20 chenglou lol I convinced this guy to switch to react ^ 20481 2013-11-28 22:04:27 chenglou brb convincing the rest of my school 20482 2013-11-28 22:04:30 syranide :D 20483 2013-11-28 22:04:41 bsansouci_ chenglou: have we met? 20484 2013-11-28 22:04:53 chenglou lol 20485 2013-11-28 22:04:56 bsansouci_ ^^ 20486 2013-11-28 22:05:48 syranide chenglou: I like how that "trick" even becomes quite pretty in the code 20487 2013-11-28 22:05:55 syranide it doesn't really look particularily out of place 20488 2013-11-28 22:06:40 syranide you should definitely add that as a tips 20489 2013-11-28 22:07:09 chenglou syranide: it's not a trick really 20490 2013-11-28 22:07:10 chenglou https://github.com/facebook/react/issues/302 20491 2013-11-28 22:07:14 chenglou it's designed to be this way 20492 2013-11-28 22:07:27 chenglou syranide: also yes, there is an entry on that 20493 2013-11-28 22:07:28 chenglou http://facebook.github.io/react/tips/false-in-jsx.html 20494 2013-11-28 22:07:30 chenglou =) 20495 2013-11-28 22:08:00 syranide chenglou: yeah definitely, but it's not immediately obvious that you can use it that way 20496 2013-11-28 22:08:11 chenglou thus the tip 20497 2013-11-28 22:08:18 chenglou but maybe there should be a better title 20498 2013-11-28 22:08:41 syranide chenglou: the only tip I saw was the ternary, but it's not used for DOM, it's used for the prop 20499 2013-11-28 22:09:27 chenglou syranide: what do you mean the only you saw? 20500 2013-11-28 22:09:31 syranide http://facebook.github.io/react/tips/if-else-in-JSX.html 20501 2013-11-28 22:09:52 chenglou did you check the link I pasted? 20502 2013-11-28 22:10:18 syranide yeah but that's hardly were I would check for hints on how to use React ;) 20503 2013-11-28 22:10:43 chenglou well, jsx 20504 2013-11-28 22:10:43 chenglou lol 20505 2013-11-28 22:11:14 balpert bsansouci_: glad you're enjoying React! 20506 2013-11-28 22:11:26 syranide btw, is data={} supported? 20507 2013-11-28 22:12:08 balpert syranide: not currently. why do you want it? 20508 2013-11-28 22:12:18 syranide balpert: just curious when I read that issue 20509 2013-11-28 22:12:19 balpert (assuming you mean data={x: 5} turns into {'data-x': 5}) 20510 2013-11-28 22:12:52 chenglou data itself is an attribute 20511 2013-11-28 22:13:11 chenglou so it's a bit bothersome 20512 2013-11-28 22:13:29 balpert I also haven't heard any convincing explanation of why that's even useful 20513 2013-11-28 22:14:08 syranide balpert: I may be wrong, but from reading zpao's idea I got the feeling that he meant data={value="awd"} would actually set the value to that 20514 2013-11-28 22:14:32 balpert ohh, gotcha 20515 2013-11-28 22:14:40 balpert a different 'data' than some other people were asking for :) 20516 2013-11-28 22:14:49 syranide balpert: ah, that may very well be 20517 2013-11-28 22:14:51 balpert in that case, you can just do React.DOM.input(data) or similar 20518 2013-11-28 22:15:04 syranide anyway, that seemed quite intriguing to me 20519 2013-11-28 22:15:07 balpert I don't think anyone is opposed to the concept of supporting that more directly in JSX 20520 2013-11-28 22:15:25 chenglou syranide: humm that's weird. I clearly remember having made the entry on nested {} in jsx. I'll add that to tips wiki then 20521 2013-11-28 22:15:34 syranide chenglou: ah ok :) 20522 2013-11-28 22:15:38 chenglou wait 20523 2013-11-28 22:15:39 chenglou it's done 20524 2013-11-28 22:15:43 chenglou then where's the entry?! 20525 2013-11-28 22:15:55 syranide chenglou: missing in the sidebar perhaps? 20526 2013-11-28 22:17:42 syranide and just so you know guys, I <3 React :) 20527 2013-11-28 22:18:14 chenglou k nvm, messed up an entry 20528 2013-11-28 22:18:24 chenglou on my long long list of things to do 20529 2013-11-28 22:20:33 bsansouci_ chenglou: pshhhhh what things? LOL 20530 2013-11-28 22:20:42 chenglou if in a few years web devs look back at the evolution of frameworks, there'll be 20531 2013-11-28 22:20:56 chenglou 1. poor dom manipulation 20532 2013-11-28 22:20:57 chenglou 2. templating 20533 2013-11-28 22:21:13 chenglou 3. **React** and potential React dialects 20534 2013-11-28 22:21:36 syranide indeed 20535 2013-11-28 22:22:22 syranide I've been a relucant user of templating for too long (knockoutjs, damn you to hell) 20536 2013-11-29 04:39:09 john2x hello 20537 2013-11-29 04:39:56 john2x I'm going through the tutorial, and confused about this part "Note that we have passed some data from the parent CommentList component to the child Comment" 20538 2013-11-29 04:40:17 john2x the code just before that line doesn't have any data passing from parent to child 20539 2013-11-29 04:40:43 john2x at least none that I can see? 20540 2013-11-29 04:44:48 john2x link for reference http://facebook.github.io/react/docs/tutorial.html#component-properties 20541 2013-11-29 05:12:37 balpert john2x: the data that's passed is the author and the content (as "children") 20542 2013-11-29 05:12:57 balpert in the next code snippet that data is accessed as this.props.author and this.props.children 20543 2013-11-29 05:16:07 john2x hmm ok. so parent here is the .. tag? and `children` is a "special" props, where it always means the tag's, well, children/content? 20544 2013-11-29 05:17:21 john2x (are they called "tags" by the way?) 20545 2013-11-29 05:19:42 petehunt john2x: generally we call them "components" 20546 2013-11-29 05:20:16 john2x oh right. d'oh! 20547 2013-11-29 05:20:38 petehunt john2x: so data flows from owner component to child component by using props 20548 2013-11-29 05:20:56 petehunt the owner component is the component that creates another component in a render() method 20549 2013-11-29 05:21:13 petehunt the props are the "tag attributes" if you want to use html parlance 20550 2013-11-29 05:23:30 john2x got it. thanks! 20551 2013-11-29 05:40:15 petehunt john2x: are you at jsconf asia? 20552 2013-11-29 05:59:10 john2x yes :) 20553 2013-11-29 06:04:55 petehunt john2x: did we meet? 20554 2013-11-29 06:05:03 petehunt (i am in the talks now) 20555 2013-11-29 06:09:50 john2x ah not yet. great talk yesterday. got me interested.. I'm not really a JS developer, just checking things out. 20556 2013-11-29 06:22:28 petehunt balpert_: yt? 20557 2013-11-29 06:41:18 petehunt oops 20558 2013-11-29 07:00:19 chenglou hey why is it called onTouchTap 20559 2013-11-29 07:00:22 chenglou why not just onTap 20560 2013-11-29 07:00:38 chenglou also, nice 20561 2013-11-29 09:57:30 piranha when I get an onClick event, e.target is an element which I've clicked on. Is it possible to get an element which has this onClick handler instead? 20562 2013-11-29 09:57:46 piranha in this case it's a parent of an element I've clicked on, but it will not be like that all the time... 20563 2013-11-30 18:11:46 vjeux http://oridomi.com/# 20564 2013-11-30 18:12:04 vjeux this would be really elegant using react 20565 2013-11-30 18:12:48 balpert there isn't that much DOM manipulation code: http://oridomi.com/docs/oridomi.html 20566 2013-11-30 18:13:26 vjeux balpert: they have to copy the dom for each pane 20567 2013-11-30 18:13:56 vjeux OriDomi does plenty of DOM manipulation behind the scenes to create what you see. If you want to change the content or the styling of the element after it’s been modified, OriDomi provides a setter method to help you out: 20568 2013-11-30 18:13:56 vjeux folded.modifyContent(function(el) { 20569 2013-11-30 18:13:56 vjeux el.querySelector('h1').innerHTML = 'ch-ch-ch-ch-changes... turn and face the strange' 20570 2013-11-30 18:13:58 vjeux el.style.backgroundColor = '#000'; 20571 2013-11-30 18:14:00 vjeux }); 20572 2013-11-30 18:14:07 vjeux and to provide some helper against the DOM 20573 2013-11-30 18:15:29 balpert ah I see 20574 2013-11-30 18:15:40 balpert I clearly didn't read the Usage section 20575 2013-11-30 18:15:41 vjeux in react you can just render the props multiple times 20576 2013-11-30 18:18:50 chenglou sick! 20577 2013-11-30 18:23:45 chenglou hey related question: how will the css way of declaring things ever scale if we can't specify our own method for manipulating the shape of stuff? 20578 2013-11-30 18:24:08 chenglou like if I want to make the element curl I can't do it because there's no curl() css transform 20579 2013-11-30 18:24:37 chenglou and likewise for the other infinite number of custom transformations 20580 2013-11-30 18:25:05 vjeux I wish we could do screenshots in js 20581 2013-11-30 18:25:09 vjeux and modify them 20582 2013-11-30 18:25:24 vjeux but i don't think that's going to happen anytime soon 20583 2013-11-30 18:25:28 chenglou yeah... 20584 2013-11-30 18:25:41 chenglou so how did we end up with this css way of doing things 20585 2013-11-30 18:26:10 vjeux because that's the only way to do it right now? co 20586 2013-11-30 18:26:20 vjeux copy and paste the dom and do some transforms :p 20587 2013-11-30 18:26:39 chenglou yeah predefined transforms 20588 2013-11-30 18:26:50 chenglou which is super limiting 20589 2013-11-30 18:26:53 chenglou same goes for animation 20590 2013-11-30 18:27:02 chenglou but at least you can still do custom animations in js 20591 2013-11-30 18:27:37 chenglou conclusion is that one day someone will just decide to go full canvas? 20592 2013-11-30 18:34:10 vjeux_ you cannot render dom to a canvas :( 20593 2013-11-30 18:44:51 chenglou unless you replace react's danger part by some canvas drawing =) 20594 2013-11-30 18:45:49 chenglou and the beauty is that with react you can still serve dom server-side for crawlers lol 20595 2013-11-30 23:16:18 joes1 Hello, I have a problem I can't figure out. I'm trying to use backbone router with React and basically ended up recreating "page" every time route changes. 20596 2013-11-30 23:16:38 joes1 It works fine, but I'm seeing flickering of tags that are supposed to be static 20597 2013-11-30 23:16:55 joes1 Here's gist to illustrate what I mean: https://gist.github.com/mrjoes/7725868 20598 2013-11-30 23:17:18 joes1 If opened in Chrome, whenever navigation happens, image will blink like its being reloaded. 20599 2013-11-30 23:17:43 joes1 I assume that React decided that DOM changed and recreated it completely. 20600 2013-11-30 23:18:04 joes1 I tried having some sort of "root" component which will conditionally render "page" component - same effect. 20601 2013-11-30 23:18:14 joes1 Is there way to prevent flickers? 20602 2013-11-30 23:18:17 joes1 flickering* 20603 2013-11-30 23:20:52 joes1 forgot to mention, React 0.5.1 20604 2013-12-01 00:08:39 balpert joes1: React has a heuristic which will unmount the entire component if the root constructor changes because it's assumed that it's unlikely that the node structure remains the same 20605 2013-12-01 00:08:54 balpert you can see that this HTML file doesn't flicker: https://gist.github.com/spicyj/0d68b5d2e6ac89d5a63f 20606 2013-12-01 00:12:29 joes1 balpert: so I can get around this problem by having single root component, correct? 20607 2013-12-01 00:12:48 balpert yeah, so you could render as the root component and that would work fine 20608 2013-12-01 00:13:24 joes1 Understood. 20609 2013-12-01 00:13:25 joes1 thanks. 20610 2013-12-01 00:13:37 balpert no problem 20611 2013-12-01 00:20:21 joes1 balpert: is there a way to make it work with separate page templates? for composability reasons I'd like to keep page templates separately from layout 20612 2013-12-01 00:20:40 joes1 basically, if I do something like React.renderComponent(, document.body); it starts flickering 20613 2013-12-01 00:20:50 joes1 (I assume that's happening because property changes) 20614 2013-12-01 00:21:28 balpert well, it depends on what your RootPage render method is 20615 2013-12-01 00:21:45 balpert if you return {this.props.page} then it can work 20616 2013-12-01 00:22:48 joes1 Oh, I see what is the problem. It is other way around and different component, so React decides to scrap DOM tree. 20617 2013-12-01 00:22:57 joes1 thanks. 20618 2013-12-01 20:31:31 sspi balpert you here? 20619 2013-12-01 20:31:52 balpert I'm here! 20620 2013-12-01 20:31:57 sspi \\o/ 20621 2013-12-01 20:32:14 sspi currently working through your list of changes 20622 2013-12-01 20:32:58 sspi now busy with replacing the string manipulation stuff within the listenTo function 20623 2013-12-01 20:33:58 balpert sweet 20624 2013-12-01 20:34:07 sspi I was wondering how I should approach the part where I get the dependencies from the event plugin 20625 2013-12-01 20:34:11 balpert I realized that all the dependencies should be top-level events since that's the only way you can listen right now 20626 2013-12-01 20:34:29 balpert that is, event plugins aren't set up to listen to events dispatched by other event plugins 20627 2013-12-01 20:44:54 balpert sorry, did you have a question? 20628 2013-12-01 20:45:34 sspi yeah, but now kind of trying to make sense of what you just wrote 20629 2013-12-01 20:45:58 balpert okay 20630 2013-12-01 20:46:05 balpert didn't mean for it to be confusing! 20631 2013-12-01 20:46:21 sspi no worries, 20632 2013-12-01 20:46:33 sspi just wondering what kind of idea you have :) 20633 2013-12-01 20:47:54 sspi with my current solution the event plugins have dependencies on the "native" events - by listening to those it seems to solve the problem for event plugins 20634 2013-12-01 20:50:07 balpert right, my point was that you can't have a plugin listen to the onChange events generated by ChangeEventPlugin 20635 2013-12-01 20:50:13 balpert you can only listen to the native events, like you say 20636 2013-12-01 20:50:21 balpert and that's what the topLevelTypes correspond to 20637 2013-12-01 20:50:37 balpert so you can depend on topChange and then get the native onChange events from that 20638 2013-12-01 20:51:10 sspi ah okay, reads a bit better also :) 20639 2013-12-01 20:54:59 sspi would have been nice to have some sort of chain though 20640 2013-12-01 20:57:54 sspi this solves the question that I had btw :) 20641 2013-12-01 20:58:14 balpert yeah, right now there's no way to listen to events that another plugin dispatches 20642 2013-12-01 20:58:19 balpert I agree that it would be nice to make that possible 20643 2013-12-01 20:58:43 balpert it would simplify some of the logic in onTouchTap if it could take advantage of the SyntheticMouseEvent normalization, for instance 20644 2013-12-01 20:59:08 balpert petehunt: (two days later) pong 20645 2013-12-01 20:59:19 petehunt i dont remember 20646 2013-12-01 20:59:53 balpert okay :) 20647 2013-12-01 21:01:15 sspi petehunt: how was JSConf Asia? 20648 2013-12-01 21:01:35 petehunt it was pretty good 20649 2013-12-01 21:02:02 petehunt more react haters than EU, but less than html5 dev conf 20650 2013-12-01 21:03:33 sspi I guess JSX remains a hard sell? 20651 2013-12-01 21:12:45 petehunt sspi: eh, i dunno 20652 2013-12-01 21:12:49 petehunt i didn't push it 20653 2013-12-01 21:13:11 petehunt i pushed the "templates are useless" argument, no one could come up with a good reason to use them so they got defensive 20654 2013-12-01 21:13:38 petehunt overall i think we picked up some new people though, so that's good 20655 2013-12-01 21:14:57 petehunt oh balpert 20656 2013-12-01 21:14:57 petehunt i remember 20657 2013-12-01 21:15:42 petehunt balpert: i started working on a backbone.model-type of thing specifically for react 20658 2013-12-01 21:15:44 petehunt https://github.com/petehunt/react-graph 20659 2013-12-01 21:15:59 balpert # Don't use this! 20660 2013-12-01 21:16:02 balpert I'll take a look :) 20661 2013-12-01 21:16:14 petehunt key differences == immutability, no data flow management, and it's a graph abstraction rather than objects/collections (i think graphs are more expressive) 20662 2013-12-01 21:16:36 petehunt and it doesn't have any sort of server communication component. that's still TODO 20663 2013-12-01 21:21:58 chenglou hey petehunt, maybe it's just me but I've never heard of replacing models with graphs 20664 2013-12-01 21:22:19 petehunt chenglou: graphs can model everything 20665 2013-12-01 21:22:55 andreypopp graphs are cool, there's another one — https://github.com/substance/data 20666 2013-12-01 21:23:02 andreypopp previously data.js 20667 2013-12-01 21:23:07 petehunt the reason i think they're good for this is that it's also pretty straightforward to use when modeling problems 20668 2013-12-01 21:23:21 chenglou how is, say, an ordinary todo item gonna map to a graph and what's the advantage? 20669 2013-12-01 21:23:35 petehunt andreypopp: immutable? 20670 2013-12-01 21:23:42 petehunt everything else from the readme looks perfect 20671 2013-12-01 21:23:53 petehunt chenglou: user->TODO item 20672 2013-12-01 21:23:57 petehunt edge has a well-defined order 20673 2013-12-01 21:24:45 chenglou oh I thought it's as if the todo has edge toward date, title, checked, etc. 20674 2013-12-01 21:24:46 chenglou nvm 20675 2013-12-01 21:24:54 andreypopp petehunt: nope, but they have versioning 20676 2013-12-01 21:25:15 petehunt chenglou: you could do that 20677 2013-12-01 21:25:39 chenglou if say the date has more fields huh 20678 2013-12-01 21:25:40 chenglou got it 20679 2013-12-01 21:25:42 petehunt chenglou: conceptually it would make sense if you wanted to e.g. get all the todos that were entered on a given day 20680 2013-12-01 21:25:53 petehunt (you could also just filter() for it) 20681 2013-12-01 21:26:22 chenglou oh that's neat 20682 2013-12-01 21:27:02 petehunt andreypopp: you know about so many cool libraries! 20683 2013-12-01 21:28:55 chenglou petehunt: how's the performance gonna be since you need to add/remove edges around 20684 2013-12-01 21:29:11 petehunt chenglou: you batch up mutations and then call save() 20685 2013-12-01 21:29:27 chenglou kk 20686 2013-12-01 21:29:28 petehunt so there aren't callbacks/copies firing all over the place 20687 2013-12-01 21:29:43 petehunt additionally it has a pretty useful function in it that has copy-on-write semantics 20688 2013-12-01 21:30:02 petehunt https://github.com/petehunt/react-graph/blob/master/update.js 20689 2013-12-01 21:30:08 petehunt started using it at IG fairly recently, seems to be good 20690 2013-12-01 21:30:54 petehunt this.setState({media: update(this.state.media, {likes: {__push: 'xyz'}})}); 20691 2013-12-01 21:31:54 petehunt andreypopp: so what are your plans with react-app? 20692 2013-12-01 21:32:25 petehunt i think it's really important we get some sort of starter kit really solid 20693 2013-12-01 21:43:29 petehunt chenglou: yt? 20694 2013-12-01 21:43:46 chenglou petehunt: yeah, sorry was submitting an assignment 20695 2013-12-01 21:44:02 chenglou sup 20696 2013-12-01 21:44:22 petehunt chenglou: https://github.com/facebook/react/pull/602/files 20697 2013-12-01 21:44:46 petehunt how about renaming that tip to "communicating between components" 20698 2013-12-01 21:45:06 chenglou sounds way better yeah 20699 2013-12-01 21:45:53 petehunt and including examples of parent->child (passing props), child->parent (passing a callback prop + bind()) 20700 2013-12-01 21:46:12 petehunt for the first one you can just say "this is the answer" and link to the other docs for it 20701 2013-12-01 21:46:52 chenglou kk 20702 2013-12-01 21:46:55 petehunt you may want to add a brief note about non-hierarchical component communication. basically saying that it's very uncommon, but if you want to do it you can use an EventEmitter or something. 20703 2013-12-01 21:47:13 petehunt though that may be its own separate tip 20704 2013-12-01 21:48:57 sspi why are there so many events... 20705 2013-12-01 21:55:49 petehunt balpert: what do you think of https://github.com/facebook/react/pull/440/files 20706 2013-12-01 21:59:01 balpert fine with me -- I think mentioning server rendering is an improvement; otherwise I'm neutral 20707 2013-12-01 21:59:24 petehunt balpert: i kinda just want to hit the merge button and move on with our lives :/ 20708 2013-12-01 21:59:29 petehunt it's sat for a long time 20709 2013-12-01 21:59:57 petehunt we can make that change in a follow-up PR 20710 2013-12-01 22:01:10 balpert yep, moving on is great 20711 2013-12-01 22:15:26 andreypopp petehunt: re react-app: address some issues and release it! 20712 2013-12-01 22:15:43 petehunt andreypopp: i opened a few issues for ya 20713 2013-12-01 22:16:04 petehunt will open a few more :) just to get conversation going at least 20714 2013-12-01 22:16:24 andreypopp petehunt: yeah, seen them, will comment on them tomorrow (it's 2:15 AM here) 20715 2013-12-01 22:16:32 andreypopp petehunt: plz, open more issues! 20716 2013-12-01 22:16:52 andreypopp ok, going to sleep, bye 20717 2013-12-01 22:17:10 petehunt see ya 20718 2013-12-01 22:17:45 chenglou petehunt: the other way of child-parent communication with parent calling a child's exposed method 20719 2013-12-01 22:17:49 chenglou isn't described here 20720 2013-12-01 22:17:57 chenglou should I add it 20721 2013-12-01 22:18:14 petehunt chenglou: yes 20722 2013-12-01 22:18:20 chenglou kk 20723 2013-12-01 22:18:27 petehunt chenglou: but stress that it's very uncommon 20724 2013-12-01 22:18:42 petehunt you only use it for like "intents"... usually you want to think in terms of states 20725 2013-12-01 22:18:53 petehunt like if you want to trigger an animation every time a user clicks, you'd use it 20726 2013-12-01 22:19:06 petehunt but usually you only want to trigger the animation if some state or props change 20727 2013-12-01 22:21:21 chenglou how would I describe the intent 20728 2013-12-01 22:21:35 chenglou also, trying to think of another example because I'll do animation in its own tip 20729 2013-12-01 22:23:04 petehunt chenglou: it's like when you want to perform a side-effect, not render something that'll stick around for a while 20730 2013-12-01 22:23:15 petehunt like you're responding directly to an event, not a state transition as a result of an event 20731 2013-12-01 22:23:25 petehunt balpert may be able to explain better 20732 2013-12-01 22:30:44 sspi what would be a good way to generate an ID for a document within React? 20733 2013-12-01 22:31:01 balpert chenglou: like if you're building Instagram and you want to animate a heart icon when you click it to like a photo 20734 2013-12-01 22:31:11 balpert there's no associated state change 20735 2013-12-01 22:31:43 balpert you could look at something like numLikes but if that changed on the server you don't want to animate the heart 20736 2013-12-01 22:31:54 balpert only if a user clicks the button 20737 2013-12-01 22:32:17 balpert sspi: hmm? 20738 2013-12-01 22:32:21 balpert oh 20739 2013-12-01 22:32:36 sspi iframe situation for the on demand events :) 20740 2013-12-01 22:32:58 balpert probably easiest is to just store it on the document like we're currently storing the boolean 20741 2013-12-01 22:33:16 balpert _reactIsListening or something right now 20742 2013-12-01 22:33:40 chenglou balpert: kk, thx 20743 2013-12-01 22:34:12 sspi yeah, but I need to be able to map it :) so that's why I want an id... 20744 2013-12-01 22:34:22 sspi otherwise I need to add a boolean for every event 20745 2013-12-01 22:35:41 balpert sspi: just number them 0, 1, 2, etc 20746 2013-12-01 22:35:49 sspi ok, I can do that :) 20747 2013-12-01 22:36:32 balpert yeah, just have a global counter :) 20748 2013-12-01 22:37:37 balpert I just realized that we can run into trouble if we have two copies of React rendering into the same document 20749 2013-12-01 22:38:04 balpert they'll get confused and think events are already bound 20750 2013-12-01 22:38:20 balpert shouldn't actually be an issue but it would be cool to warn 20751 2013-12-01 22:38:35 balpert (not any worse than what's there now, in any case) 20752 2013-12-01 22:41:06 petehunt sspi: look at how we do it for react roots 20753 2013-12-01 22:49:12 chenglou petehunt: you think it's a good idea to separate this into its own entry? 20754 2013-12-01 22:49:20 chenglou like Communicate Between Components (2) 20755 2013-12-01 22:49:24 chenglou it's getting big 20756 2013-12-01 22:49:39 chenglou and I don't want to see tips > 100 lines 20757 2013-12-01 22:50:20 chenglou "For a less common type of communication, see this" 20758 2013-12-01 23:14:16 sspi closure compiler makes everything a bit more challenging, now wondering how I should map onChange to eventTypes.change :/ 20759 2013-12-01 23:35:26 sspi balpert: what do you think would be a good idea to map onChange to eventTypes.change? right now I'm having a map within the event plugin ('onChange': keyOf({change: null})) 20760 2013-12-01 23:36:24 sspi could also change change: to 'onChange': 20761 2013-12-01 23:41:47 sspi anyway g2g 20762 2013-12-01 23:42:03 sspi (will read irc log tomorrow) 20763 2013-12-02 02:34:02 balpert sspi: do you mean for the dependencies or specifically for dispatching within SimpleEventPlugin? 20764 2013-12-02 02:34:34 balpert for the dependencies, list eventTypes = {change: {phasedRegistrationNames: ..., dependencies: [topLevelTypes.topChange, ...]}} 20765 2013-12-02 02:34:49 balpert for dispatching, SimpleEventPlugin has the map topLevelEventsToDispatchConfig already 20766 2013-12-02 02:35:09 balpert probably you meant neither of those things but bug me tomorrow and we can talk :) 20767 2013-12-02 06:21:03 sspi balpert what I want is a mapping from for example onCompositionStart to compositionStart, whereby onCompositionStart is the event name that enters listenTo and compositionStart is one of the eventTypes of the event plugin 20768 2013-12-02 06:21:57 sspi so for now I have a topLevelMapping that maps for example onClick to click, and eventPlugin.mapping to map for example onCompositionStart to compositionStart 20769 2013-12-02 06:23:24 balpert ahh 20770 2013-12-02 06:23:39 balpert lemme see 20771 2013-12-02 06:25:12 balpert EventPluginRegistry.registrationNames 20772 2013-12-02 06:26:01 balpert that maps onCompositionStart to CompositionEventPlugin at least… 20773 2013-12-02 06:28:47 balpert you may want to change EventPluginRegistry's publishEventForPlugin to store a reference to the dispatchConfig somewhere 20774 2013-12-02 06:29:06 balpert either that or the eventName that recomputePluginOrdering uses to call publishEventForPlugin 20775 2013-12-02 06:30:45 sspi alright, I'll look more into it this evening :) 20776 2013-12-02 06:31:24 sspi bye! and tnx :) 20777 2013-12-02 06:31:28 balpert np 20778 2013-12-02 07:54:08 sspi alright, the on demand plugins seem to be ready for another review... will do some extra checks before I will push it, but looks good so far :) 20779 2013-12-02 07:54:31 sspi balpert: your suggestion worked out great :) 20780 2013-12-02 07:54:56 balpert sweet 20781 2013-12-02 07:55:09 balpert I'll take a look tomorrow 20782 2013-12-02 07:55:38 balpert thanks for working on this 20783 2013-12-02 07:59:45 chenglou anyone knows what happened to that famo.us framework? 20784 2013-12-02 08:00:03 chenglou haven't heard about it for a while now 20785 2013-12-02 08:00:23 petehunt chenglou: they're launching thurs 20786 2013-12-02 08:00:33 petehunt i'm pretty good friends with their vp eng (he's ex fb) 20787 2013-12-02 08:00:43 chenglou oh really 20788 2013-12-02 08:00:54 petehunt we're talking about getting a deep react integration 20789 2013-12-02 08:01:05 petehunt last i talked with him (few weeks ago) they were evaluating 20790 2013-12-02 08:01:45 petehunt theyre open-sourcing modular libs though, so they'll be consumable as separate pieces 20791 2013-12-02 08:02:13 chenglou awesome =D 20792 2013-12-02 08:04:59 chenglou how is that gonna work out though, if it's another view framework or something like that 20793 2013-12-02 08:05:40 petehunt chenglou: the interesting stuff is their touch gesture recognizer and physics engine 20794 2013-12-02 08:06:26 chenglou just tested that on iPad. Got really surprised by the three fingers panning 20795 2013-12-02 08:07:00 chenglou physics engine... I should look into that 20796 2013-12-02 08:07:03 chenglou well great news 20797 2013-12-02 08:07:04 chenglou thx 20798 2013-12-02 08:08:02 balpert haha, I was more excited about the gesture recognizer 20799 2013-12-02 08:10:46 chenglou 20800 2013-12-02 08:10:48 chenglou hummmmm 20801 2013-12-02 08:11:12 petehunt chenglou: have you seen react-touch? we already basically have that 20802 2013-12-02 08:11:19 petehunt well, anything that zynga scroller can do 20803 2013-12-02 08:11:49 petehunt also, onThreeFingerPan is probably not the event you want :) 20804 2013-12-02 08:12:36 chenglou yeah probabaly not 20805 2013-12-02 08:12:48 chenglou what would be the correct format 20806 2013-12-02 08:13:31 chenglou also of course I've seen react-touch. I actually open that up sometimes when I'm bored on iPad lol 20807 2013-12-02 08:13:44 petehunt i refactored it to be reusable past few days 20808 2013-12-02 08:13:45 petehunt https://github.com/petehunt/react-touch/blob/gh-pages/src/framework/primitives/TouchableArea.js 20809 2013-12-02 08:18:07 chenglou nice 20810 2013-12-02 09:47:06 timg_ hi, which browsers are supported by react? ie starting at? 20811 2013-12-02 10:02:05 petehunt timg_: ie8 with polyfills 20812 2013-12-02 10:02:14 petehunt timg_: then everything more modern than that 20813 2013-12-02 10:02:41 petehunt timg_: i believe it almost works in ie7 too. some people were working on that for a bit 20814 2013-12-02 10:03:54 petehunt (but don't rely on ie7 support) 20815 2013-12-02 10:09:33 syranide petehunt: I tried looking into IE7, but the lack of a debugger kind of killed that for me :/ 20816 2013-12-02 10:10:51 petehunt syranide: ah it's ok 20817 2013-12-02 10:10:57 petehunt wouldnt wish that on anyone :) 20818 2013-12-02 10:31:49 timg_ petehunt: is there a list of required polyfills?, i just get "the method some is not defined..." may it's up to user code 20819 2013-12-02 10:32:29 petehunt timg_: it's documented, sec 20820 2013-12-02 10:32:47 petehunt http://facebook.github.io/react/docs/working-with-the-browser.html 20821 2013-12-02 10:32:48 petehunt bottom of that page 20822 2013-12-02 10:33:37 timg_ awesome 20823 2013-12-02 15:37:47 krs oh docs is updated, neat 20824 2013-12-02 16:36:48 SubtleGradient zpao: https://github.com/facebook/react/pull/609 is Landing internally… shall I press the merge button on Github or should someone else do it? 20825 2013-12-02 18:18:22 hojberg how do you guys typically handle loading states? vs populated states and empty states? 20826 2013-12-02 18:18:29 hojberg just set a state bit? 20827 2013-12-02 18:19:09 zpao hojberg: i think so 20828 2013-12-02 18:23:21 hojberg hmm ok thanks 20829 2013-12-02 18:50:57 petehunt balpert: zpao: responded to comments, getting on a plane now though 20830 2013-12-02 19:15:52 jonathanj i really enjoyed Steve Luscher's VanJS 2013 talk, it seems like React's diff machinery gets glossed over a lot 20831 2013-12-02 19:16:32 jonathanj has there even been a really technical article that dives deep into how it operates? 20832 2013-12-02 19:17:12 zpao i think vjeux had an article... don't know if it got published though 20833 2013-12-02 19:17:35 vjeux https://github.com/facebook/react/pull/411 20834 2013-12-02 19:17:51 vjeux it's pretty much ready to go except for the directory structure 20835 2013-12-02 19:18:22 vjeux and title 20836 2013-12-02 20:49:24 bbloom petehunt: i'm so glad dnolen & other clojure folks are finally checking out react.js. i've been pitching it to #clojure for months :-P 20837 2013-12-02 20:49:42 petehunt bbloom: :) 20838 2013-12-02 20:49:55 dnolen ACTION is slow 20839 2013-12-02 20:50:04 petehunt yeah, more and more i realize that mori+react == amazingness 20840 2013-12-02 20:50:28 petehunt oh hey dnolen :) 20841 2013-12-02 20:50:35 dnolen petehunt: hullo! 20842 2013-12-02 20:50:36 petehunt hope we didn't blow up your twitter too much today 20843 2013-12-02 20:51:16 petehunt i am actually on a plane to NYC right now 20844 2013-12-02 20:51:35 petehunt bbloom: i think i am going to do a blog post: "react for functional programmers" 20845 2013-12-02 20:51:44 dnolen petehunt: haha not at all, very interested in React and happy to get the word out - hopefully will have some time to take it for a real spin very soon. 20846 2013-12-02 20:52:10 bbloom petehunt: how long you in town? interested in a beer? 20847 2013-12-02 20:52:34 petehunt dnolen: for sure. andreypopp and piranha (who hang out in this channel) use cljs a bunch i believe 20848 2013-12-02 20:53:22 petehunt bbloom: yeah though i'm not sure how much time i will have after work... coffee or lunch during the day would be a bit easier for me. i arrive tonight and leave thurs so it would need to be tue or wed 20849 2013-12-02 20:55:45 bbloom petehunt: i'll email your instagram addr i yanked from a commit msg 20850 2013-12-02 20:55:57 petehunt pete@instagram.com! :) 20851 2013-12-02 20:56:16 petehunt wifi at 30000ft is spotty, so may be a few hours before i can get back to ya 20852 2013-12-02 20:56:42 dnolen petehunt: bbloom: up for coffee/lunch around Times square / Madison Square 20853 2013-12-02 20:58:16 petehunt dnolen: sure, i can make that work. any time before dinner works good for me on tues or wed 20854 2013-12-02 20:59:09 petehunt wow... "works good"!? i must be tired :P 20855 2013-12-02 20:59:17 bbloom email sent to both you guys - we can organize from there. would be good to cross pollinate making-js-less-painful ideas :-) 20856 2013-12-02 21:00:28 petehunt bbloom: ? looking forward to it! 20857 2013-12-02 21:24:54 sspi balpert: I guess you have to wait a bit longer :) - my tests were all passing, all 0 of 0 that was :P 20858 2013-12-02 21:25:41 petehunt sspi: is grunt test messed up? 20859 2013-12-02 21:26:32 sspi not sure if it's grunt, or if it's me... I suspect the latter 20860 2013-12-02 21:26:56 petehunt i think i was having issues 20861 2013-12-02 21:29:48 zpao wfm 20862 2013-12-02 21:36:59 balpert sspi: mm? 20863 2013-12-02 21:41:28 balpert dnolen: I haven't personally had a chance to try out mori but it looks pretty sweet :) 20864 2013-12-02 21:55:29 sspi balpert: nothing important, was just fooled by tests passing - while actually it didn't work :) 20865 2013-12-02 22:48:07 balpert yungsters: why don't you believe that https://github.com/facebook/react/pull/558 is correct? 20866 2013-12-02 22:48:48 yungsters looking 20867 2013-12-02 22:52:53 zpao oh yungsters is looking at react PRs? well then.... 20868 2013-12-02 22:58:14 yungsters lol 20869 2013-12-02 22:58:17 yungsters i can stop :D 20870 2013-12-02 23:01:58 yungsters balpert: ahh, mount depth makes sense 20871 2013-12-02 23:02:08 balpert :) 20872 2013-12-02 23:02:10 balpert that's what I said! 20873 2013-12-02 23:02:10 yungsters balpert: what was it before? i cant get github to show me :{ 20874 2013-12-02 23:02:15 balpert owner 20875 2013-12-02 23:02:24 balpert owner == null instead of mountDepth == 0 20876 2013-12-02 23:02:26 balpert === 0 20877 2013-12-02 23:02:38 yungsters this PR didn't change from your original PR? 20878 2013-12-02 23:02:54 yungsters hmm i must have been on something then 20879 2013-12-02 23:02:58 yungsters this makes sense to me 20880 2013-12-02 23:03:10 balpert nope, haven't changed it 20881 2013-12-02 23:03:20 balpert at least I don't think so 20882 2013-12-02 23:04:08 balpert yeah I just fixed a typo; didn't change anything else 20883 2013-12-02 23:09:07 yungsters oh, okay 20884 2013-12-02 23:09:11 yungsters then yeah, i think this makes sense 20885 2013-12-02 23:13:02 balpert cool 20886 2013-12-02 23:13:05 balpert thanks 20887 2013-12-02 23:59:26 chenglou zpao: https://github.com/facebook/react/commit/241f4d29b2caab806c35ce7b3ee1d1a7e8881cd2 20888 2013-12-02 23:59:31 chenglou wow did I seriously miss that? 20889 2013-12-02 23:59:42 zpao chenglou: heh, so did i :) 20890 2013-12-03 00:01:00 chenglou ACTION ashamed 20891 2013-12-03 00:04:45 balpert yay merging things 20892 2013-12-03 00:05:00 zpao sloooowwwwwlly 20893 2013-12-03 00:05:19 zpao catching up on ~2 weeks of email and PRs 20894 2013-12-03 00:06:10 balpert sounds like sspi's lazy event binding stuff is almost done and I'm excited for that 20895 2013-12-03 00:06:53 balpert right sspi? ;) 20896 2013-12-03 00:07:13 zpao \\o/ 20897 2013-12-03 00:08:11 sspi working on it :P 20898 2013-12-03 00:09:24 balpert sweet 20899 2013-12-03 00:09:35 sspi got a merging mess right now 20900 2013-12-03 00:11:14 balpert :( 20901 2013-12-03 00:21:20 sspi CRAP 20902 2013-12-03 00:21:56 zpao sspi: that bad? 20903 2013-12-03 00:22:03 balpert git reflog 20904 2013-12-03 00:22:25 sspi yeah, just did a push that I shouldn't have done 20905 2013-12-03 00:24:16 balpert those are usually pretty easy to undo 20906 2013-12-03 00:25:09 sspi git reflow - looking into it now 20907 2013-12-03 00:25:11 sspi reflog 20908 2013-12-03 00:50:12 zpao lbljeffmo: i thought we fixed &ngsp; - does that just need to be synced out? https://github.com/facebook/react/issues/183 20909 2013-12-03 00:50:34 lbljeffmo zpao: yep -- also the whitespace PR re-fixes it :) 20910 2013-12-03 00:50:51 zpao ? 20911 2013-12-03 00:51:16 zpao balpert: so, i think the answer is still "soon" 20912 2013-12-03 00:51:21 lbljeffmo (I'm trying to get the prep for that together to be merged today/tomorrow) 20913 2013-12-03 00:51:34 lbljeffmo assuming all goes well applying the codemod 20914 2013-12-03 00:51:35 balpert cool 20915 2013-12-03 00:52:02 lbljeffmo I should probably not commit to tomorrow just in case -- but definitely this week 20916 2013-12-03 01:07:07 sspi no more docblock? \\o/ 20917 2013-12-03 01:07:32 zpao sspi: heh, just closed since you have 2 PRs for that up 20918 2013-12-03 01:07:41 sspi lol 20919 2013-12-03 01:28:14 chenglou oh damn, good news! 20920 2013-12-03 01:28:26 chenglou I still forget docblocks once in a while 20921 2013-12-03 01:28:27 chenglou lol 20922 2013-12-03 01:29:02 chenglou oh wait 20923 2013-12-03 01:29:02 chenglou nvm 20924 2013-12-03 01:29:05 chenglou =/ 20925 2013-12-03 04:14:04 dbounds Hello. 20926 2013-12-03 04:15:03 dbounds I'm curious how one would go about applying dynamic inline style in a child component as with: https://gist.github.com/dbounds/84c8e96314eaf438004a#file-gistfile1-js-L27 20927 2013-12-03 04:16:07 chenglou dbounds: what do you mean? 20928 2013-12-03 04:17:18 dbounds well, well, it would appear as though this.props is not accessible to me using the technique I'm using to craft divStyle in that gist 20929 2013-12-03 04:17:23 dbounds -well 20930 2013-12-03 04:18:22 chenglou that's weird 20931 2013-12-03 04:19:31 chenglou dbounds: it should be. I don't see anything weird. What does the console say? 20932 2013-12-03 04:19:51 chenglou maybe the ajax result 20933 2013-12-03 04:45:03 dbounds you're right it does... 20934 2013-12-03 04:45:20 dbounds s/does/is 20935 2013-12-03 04:45:59 dbounds not quite sure why I was obseving an exception earlier. 20936 2013-12-03 06:50:42 chenglou geez I didn't even notice there were comments on tips 20937 2013-12-03 06:55:12 jonathanj vjeux: thanks for that link, unfortunately the link in the issue to the built docs doesn't work anymore :\\ 20938 2013-12-03 07:07:18 balpert sspi: wait I can help you! 20939 2013-12-03 07:07:28 sspi that was quick 20940 2013-12-03 07:07:31 balpert no need to open another PR :) 20941 2013-12-03 07:07:40 balpert so what, you made a new local branch? 20942 2013-12-03 07:07:48 sspi not yet 20943 2013-12-03 07:09:04 sspi for some reason it doesn't sync properly with origin master 20944 2013-12-03 07:10:29 balpert what do you mean? 20945 2013-12-03 07:25:13 sspi alright, that seems to look a lot better 20946 2013-12-03 07:26:05 sspi do notice that some of my changes were lost in the process 20947 2013-12-03 07:26:25 balpert hmm? 20948 2013-12-03 07:28:03 balpert sspi: what did you lose? 20949 2013-12-03 07:28:07 sspi reverted a changeset that was causing the issues 20950 2013-12-03 07:29:24 sspi several changes in several files, mostly where you said I should change something.. the nit parts 20951 2013-12-03 07:53:27 balpert ahh I got my phabricator figured out finally 20952 2013-12-03 07:55:45 balpert sspi: here's what you changed since my last review: http://phabricator.benalpert.com/D61?vs=169&id=171&whitespace=ignore-all#toc 20953 2013-12-03 07:57:01 balpert (faintly colored changes are things that changed because of your merges, not you directly) 20954 2013-12-03 07:58:09 sspi cool :) 20955 2013-12-03 08:03:50 sspi alright did several pushes, need to check if I got everything 20956 2013-12-03 08:04:00 sspi seems to be about right 20957 2013-12-03 08:04:06 sspi anyway gotta run for work 20958 2013-12-03 08:15:31 balpert you accidentally added .idea/dictionaries/sanderspies.xml in the last one :) 20959 2013-12-03 08:46:08 syranide balpert: did I misunderstand you, thougth you said that the+ was redundant (and it is) 20960 2013-12-03 08:46:48 balpert oh hah, I meant in isNaN(+value) 20961 2013-12-03 08:47:37 balpert at any rate, you have the value < 1 check twice and you have a plus in one but not the other 20962 2013-12-03 08:47:57 balpert I'd factor that out to a separate function to make sure the logic is the same 20963 2013-12-03 08:48:07 syranide ah, you are correct about isNaN(+x), I may have misunderstood zpao on that 20964 2013-12-03 08:48:15 syranide can do 20965 2013-12-03 08:48:54 syranide shouldRemoveForValue ? 20966 2013-12-03 08:49:08 balpert oh, I meant 20967 2013-12-03 08:49:17 balpert isPositiveNumeric 20968 2013-12-03 08:49:20 syranide aha 20969 2013-12-03 08:49:31 balpert though perhaps pulling out the whole thing is better 20970 2013-12-03 08:49:35 balpert shouldIgnoreValue? 20971 2013-12-03 08:50:13 syranide is ignore really correct? (seeing as we actively delete the value as a result) 20972 2013-12-03 08:50:46 balpert well, "ignore" as in "pretend it's not there in the first place" 20973 2013-12-03 08:50:51 syranide ah true 20974 2013-12-03 08:52:50 syranide balpert: style question, in shouldIgnoreValue use the same "large expression", or use if-else on the type (value === null, isBoolean, isPositiveNumeric?) 20975 2013-12-03 08:53:21 balpert sorry, not quite sure what you mean 20976 2013-12-03 08:53:37 syranide should I copy the expression as-is to the function, or should I replace it with 20977 2013-12-03 08:53:46 syranide if (hasBooleanValue[name]) { 20978 2013-12-03 08:53:51 syranide return !value; 20979 2013-12-03 08:53:52 syranide } 20980 2013-12-03 08:53:53 syranide etc 20981 2013-12-03 08:54:39 syranide the second is much more readable, but also quite verbose I guess 20982 2013-12-03 08:55:29 balpert probably either way is fine 20983 2013-12-03 08:56:04 balpert personally I'd just go with the existing expression I think 20984 2013-12-03 09:52:08 sspi balpert: changes are in 20985 2013-12-03 10:53:09 barcrab Hi, I'm trying to understand the use of immutable objects. When I pass a piece of information (i.e. an Object) as a component property in my render function should that object be immutable. And if I were to pass the same piece of information to a different component during the same render process should I be passing in another immutable object and not just the reference to the initial object? (I've just started using mori) 20986 2013-12-03 16:52:37 dnolen so what are people doing if you want to render a template server side and you're not running JS there? 20987 2013-12-03 16:57:02 mcarter dnolen: using node? 20988 2013-12-03 16:57:36 dnolen mcarter: if I was using node I would be using JS :) 20989 2013-12-03 16:57:56 mcarter dnolen: good luck using react without js 20990 2013-12-03 16:57:57 mcarter :) 20991 2013-12-03 16:58:26 dnolen mcarter: on the server side of course 20992 2013-12-03 16:59:00 dnolen mcarter: the question is more about whether people are rendering a basic template server side and just replace those parts that need to be controlled by React? 20993 2013-12-03 16:59:05 dnolen is that a pattern? 20994 2013-12-03 16:59:13 dnolen or is everyone using React using Node? 20995 2013-12-03 17:01:08 mcarter you could use react with any backend, its agnostic 20996 2013-12-03 17:01:23 mcarter but react creates the dom elements/templtaes 20997 2013-12-03 17:01:55 mcarter given im fairly new to react but ive made it about halfway through the documentation and working on trying it out on an internal app here augmenting backbone views 20998 2013-12-03 17:03:36 dnolen mcarter: I'm aware that React is backend agnostic :) But my question is probably poorly phrased. 20999 2013-12-03 17:03:54 dnolen tldr; how do people avoid template duplication between client/server? 21000 2013-12-03 17:04:07 mcarter what are you rendering from the server? 21001 2013-12-03 17:05:17 dnolen mcarter: it's a general question, I could be rendering a page which contains a widget destined to be controlled by React, but perhaps I want the widget to be pre-rendered by the server. 21002 2013-12-03 17:05:31 chenglou dnolen: check this out 21003 2013-12-03 17:05:41 chenglou https://github.com/facebook/react-page 21004 2013-12-03 17:05:44 chenglou it's node though 21005 2013-12-03 17:06:21 dnolen chenglou: yeah, so I should - w/o Node.js how is this avoided? 21006 2013-12-03 17:06:27 mcarter @dnolen Interesting, I never would of thought about that. So you are wanting to use React to attach to current dom elements? 21007 2013-12-03 17:06:31 dnolen the answer might very well be simple - there's no good solution 21008 2013-12-03 17:07:00 chenglou don't think so 21009 2013-12-03 17:27:20 andreypopp dnolen: I think you could use Rhino or narwal to run React code to generate markup on a server 21010 2013-12-03 17:27:42 andreypopp dnolen: I use node for that and I just execute client code bundle on server 21011 2013-12-03 17:28:00 andreypopp dnolen: so actually no node is needed... you just need a js runtime though 21012 2013-12-03 17:28:24 andreypopp s/narwal/narwhal 21013 2013-12-03 17:29:54 dnolen andreypopp: that's definitely one possibility - though that adds some less than ideal stack complexity. Reusing template is not really particularly difficult for Clojure since you can have a macro do the right thing for Hiccup style syntax. 21014 2013-12-03 17:29:54 andreypopp dnolen: forget about narwhal... it's not a JS runtime as I thought 21015 2013-12-03 17:30:07 dnolen andreypopp: you're thinking Nashorn in Java 8 21016 2013-12-03 17:30:17 andreypopp dnolen: right, Nashorn 21017 2013-12-03 17:30:29 dnolen andreypopp: my main concerns is whether rendering HTML up front and then letting React take over will be a headache 21018 2013-12-03 17:31:08 andreypopp dnolen: well, you need it to be rendered exactly the same, cause React stores checksum in rendered HTML and do a check against it on client 21019 2013-12-03 17:32:22 dnolen andreypopp: and is the calculation of the checksum particularly difficult / hard to do / require all the infrastructure? 21020 2013-12-03 17:34:26 andreypopp dnolen: I don't think it's hard, the "hard" part is to maintain markup generation on server in sync with how React does it... so checksums would be equal both for server generated and client generated markup 21021 2013-12-03 17:34:56 andreypopp dnolen: this is why I think it's just easier to throw client code in js runtime and execute it 21022 2013-12-03 17:35:49 andreypopp dnolen: another crazy option would be to write js2clj compiler :-) 21023 2013-12-03 17:38:08 dnolen andreypopp: haha, I think just being able to generate the checksums would be sufficient. Not sure if React wants to expose - but it seems to me a generally useful concept ... a standard way to generate a checksum that the client can understand for synchronization. 21024 2013-12-03 17:39:52 andreypopp dnolen: by being "able to generate checksums" you mean being "able to generate the same markup and then checksums from it", right? 21025 2013-12-03 17:40:06 dnolen andreypopp: yes 21026 2013-12-03 17:40:14 andreypopp dnolen: ok 21027 2013-12-03 17:40:54 dnolen andreypopp: generating the same markup doesn't sound particularly hard to me. 21028 2013-12-03 17:41:38 andreypopp dnolen: it's not, you're right 21029 2013-12-03 18:01:19 petehunt dnolen: hey 21030 2013-12-03 18:01:30 dnolen petehunt: hullo 21031 2013-12-03 18:01:34 petehunt most people using react aren't using node i don't think 21032 2013-12-03 18:02:43 dnolen petehunt: so it's common just to render the page and leave "holes" that will be controlled by React? 21033 2013-12-03 18:02:57 petehunt dnolen: that's how facebook works 21034 2013-12-03 18:03:03 petehunt for instagram, the "hole" is document.body 21035 2013-12-03 18:03:29 petehunt you can theoretically generate a full page with react (including the html tag), but unfortunately if you reactively change that stuff a lot of browsers get really confused 21036 2013-12-03 18:03:50 petehunt (i.e. setting document.head.innerHTML can crash safari on ios iirc) 21037 2013-12-03 18:05:53 dnolen petehunt: the approach seems OK for many applications. However at the Times we did this for the Election coverage in 2012, and it was really annoying how complicated it was to render all our JSTs correctly server side for post live coverage (we just gave up) 21038 2013-12-03 18:06:17 petehunt dnolen: let me throw together a quick example for you 21039 2013-12-03 18:07:44 petehunt dnolen: http://jsfiddle.net/uxvwW/ 21040 2013-12-03 18:08:40 petehunt dnolen: one thing to note is that this is just an optimization. if you were to comment out the line that sets innerHTML it would still work 21041 2013-12-03 18:09:55 petehunt dnolen: so for instagram we basically have a regular django template that looks something like: ...{{ renderReactComponent('my/commonjsmodule', someprop=somePythonValue) }} 21042 2013-12-03 18:10:09 dnolen petehunt: yes but does this example assume I am running JS server side? I'm wondering if that can be avoided or if any thought has been put into that use case? 21043 2013-12-03 18:10:17 dnolen petehunt: or at instagram you just shell out to JS? 21044 2013-12-03 18:10:38 petehunt dnolen: if you want to use client rendering (i.e. no JS on the server), it just renders to a
    with a unique ID and queues up React.renderComponent() to run on the client 21045 2013-12-03 18:10:54 petehunt (we have a JSON blob somewhere that tells the client what JS to run on page load) 21046 2013-12-03 18:11:43 petehunt dnolen: but if you want to run with server rendering (SEO, faster first pageload), it will use HTTP to hit our Node tier, which will call renderComponentToString(). then renderReactComponent() will do the same thing as before, except insert that markup into the page 21047 2013-12-03 18:12:20 petehunt dnolen: one cool thing with this approach is that if your node tier goes down, everything still works (you just don't get the SEO or perf benefits) 21048 2013-12-03 18:13:00 petehunt we're basically able to take advantage of the fact that your app is an idempotent function of the top-level props you pass to it 21049 2013-12-03 18:13:26 dnolen petehunt: ok to clarify, that call in the Django template is a service call that will return a blank string on timeout? 21050 2013-12-03 18:13:51 petehunt dnolen: that and queuing the React.renderComponent() to run on the client 21051 2013-12-03 18:14:51 petehunt we basically have a `window.stuffToDoOnPageLoad` array that is also populated by django (contains commonjs module IDs, function names and JSON blobs to pass to the functions) 21052 2013-12-03 18:15:18 petehunt that isn't react specific, just illustrating our architecture. i'm not sure what yours looks like. 21053 2013-12-03 18:16:01 dnolen petehunt: ok that's pretty interesting (service thing) ... still I don't suppose there's a way to generate the correct annotated markup based on some algorithm? (of course not surprised if you all want to hide this implementation detail) 21054 2013-12-03 18:16:14 petehunt what do you mean? 21055 2013-12-03 18:16:21 dnolen still would be interesting to know that for every tree of values you always get identical DOM 21056 2013-12-03 18:16:29 petehunt that's guaranteed 21057 2013-12-03 18:16:44 petehunt React.renderComponentToString() takes a react component and outputs a string of HTML 21058 2013-12-03 18:17:01 petehunt the root node of that HTML contains a "data-react-markup-checksum" attribute 21059 2013-12-03 18:17:10 dnolen petehunt: yes but can this be done simply outside React easily? I mean is this documented somewhere so that it can be done? 21060 2013-12-03 18:17:19 petehunt which is basically the adler32 of the inner HTML or something 21061 2013-12-03 18:17:53 petehunt so if that checksum is invalid, the client will blow away the markup and replace it with the correct markup (if you're using the unminified version of react you will get a big warning in the console that you messed up) 21062 2013-12-03 18:17:57 vjeux http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostring 21063 2013-12-03 18:18:38 dnolen yeah I don't mean code documentation :) 21064 2013-12-03 18:18:53 dnolen I mean give an tree of values how I can produce the DOM that React would have produced 21065 2013-12-03 18:18:59 dnolen or is this too tied up into the implementation? 21066 2013-12-03 18:19:26 petehunt dnolen: i think i am confused. what do you mean by a tree of values? 21067 2013-12-03 18:20:31 chenglou petehunt: "if you stick to this principle and your top-level props and your state are all JSON serializable, you can serialize and deserialize your entire application state pretty easily". 21068 2013-12-03 18:20:48 chenglou You should make a link bait blog post about it, call it "Ten Steps You Need to save your app state in JS", put in this one sentence, then submit on HN 21069 2013-12-03 18:20:59 chenglou =) 21070 2013-12-03 18:21:19 dnolen petehunt: for example, say I render your jsfiddle w/ text == "Hello world!", this is always guaranteed to produce a specific DOM string (disregarding whitespace) 21071 2013-12-03 18:22:04 dnolen petehunt: is there a simple procedure to generate this DOM string is all I'm asking? 21072 2013-12-03 18:22:27 dnolen then I could always send down the correct state for the set of values I have leave React out of it server side 21073 2013-12-03 18:22:31 petehunt dnolen: ah, so you want to get the HTML string of an application that's already handled some events rather than the initial state? 21074 2013-12-03 18:22:36 dnolen s/leave/and leave 21075 2013-12-03 18:22:51 dnolen petehunt: would be preferable I think 21076 2013-12-03 18:23:31 petehunt dnolen: we have an assertion that blocks this today i believe, but we could build it easily 21077 2013-12-03 18:24:10 vjeux dnolen: I sent you a mail to your nyu mail, did you receive it? :) 21078 2013-12-03 18:24:18 dnolen petehunt: ok that's pretty interesting 21079 2013-12-03 18:24:21 petehunt i still don't understand the advantage of your use case though, so I think i'm misunderstanding something 21080 2013-12-03 18:24:45 petehunt dnolen: have you played with our concept of `state` yet? 21081 2013-12-03 18:25:05 dnolen vjeux: sorry that's still floating around I never check it - david.nolen@gmail.com 21082 2013-12-03 18:25:22 vjeux got it, I couldn't find another mail on google :p 21083 2013-12-03 18:25:35 dnolen petehunt: still working up to that. the advantage here is just simplifying the stack and removing a service (Node) server side. 21084 2013-12-03 18:25:51 vjeux sent 21085 2013-12-03 18:25:59 petehunt yeah, facebook doesn't use any node in production. 21086 2013-12-03 18:26:31 dnolen petehunt: I think there's a lot of value in a documented algorithm of how to go from State -> DOM 21087 2013-12-03 18:26:49 petehunt one thing you would probably find cool (and what chenglou mentioned) was if your top-level props are serializable and the state of your components are serializable, you can basically freeze an application, send it over the wire, and restore it 21088 2013-12-03 18:27:03 dnolen petehunt: yes, that is really cool :) 21089 2013-12-03 18:27:04 petehunt imagine being able to repro bugs like that 21090 2013-12-03 18:27:15 petehunt even better: if you keep a log of every call to setState(), you can rewind/fast forward 21091 2013-12-03 18:27:27 petehunt (which facebook does) 21092 2013-12-03 18:27:40 petehunt not for everything, but most stuff around the data model 21093 2013-12-03 18:27:55 dnolen petehunt: yeah, Pedestal supports that feature - it's pretty neato. 21094 2013-12-03 18:28:27 dnolen petehunt: my interest here is that I like React on the client and the render model, but I'd like to be able to generate the same DOM server side w/o needing to fire up a React service 21095 2013-12-03 18:28:36 zpao syranide: looking at your rows/cols diff right now 21096 2013-12-03 18:28:55 petehunt dnolen: i see. you'd have to write your app twice though, right? 21097 2013-12-03 18:29:02 chenglou petehunt: I saw an undo implementation in mori in like two lines of code (simply return the old obj). Been meaning to try mori for a while now 21098 2013-12-03 18:29:21 dnolen petehunt: well this is Lisp we have a lot of freedom for DSLs to compile to different things. 21099 2013-12-03 18:29:42 dnolen petehunt: all that we're missing is a guaranteed transformation 21100 2013-12-03 18:29:52 petehunt i see. well, i don't think it would be very hard 21101 2013-12-03 18:30:01 petehunt (now your questions are making sense to me!) 21102 2013-12-03 18:30:47 petehunt if you're confident you can translate your application logic, the only implementation details you really need to know are the markup checksumming (literally this is just adler32) and generating data-reactid correctly (this is pretty straightforward) 21103 2013-12-03 18:31:10 petehunt however at that point you're definitely reimplementing parts of react 21104 2013-12-03 18:31:22 petehunt the good news is you can easily unit test this against React.renderComponentToString() 21105 2013-12-03 18:31:39 zpao yea, data-reactid is kinda tied to the reconciler isn't it? 21106 2013-12-03 18:32:10 zpao (though if this is just renderComponentToString, I guess that doesn't matter terribly) 21107 2013-12-03 18:32:40 petehunt zpao: yeah, i mean we just need to document it 21108 2013-12-03 18:32:49 petehunt it's not super complex but it is an implementation detail 21109 2013-12-03 18:33:07 petehunt every node basically gets a key corresponding to its position or key prop, and then those get joined by dots 21110 2013-12-03 18:33:29 zpao [1].{key} 21111 2013-12-03 18:33:35 petehunt ? 21112 2013-12-03 18:34:21 dnolen petehunt: definitely reimplementing, but hopefully only a very simple part? We don't need diff'ing or any of the event stuff. 21113 2013-12-03 18:39:03 petehunt dnolen: yeah it's basically just recursively walking a few trees and keying things correctly 21114 2013-12-03 18:39:41 petehunt dnolen: i'm curious: why don't you want to run react server side? 21115 2013-12-03 18:40:27 andreypopp dnolen: I wonder is it a too much overhead to use Rhino/Nashorn on server to render React components? 21116 2013-12-03 18:40:33 dnolen petehunt: I'm not against running React on the server for some setups, but many Clojure users would balk at that level of operational complexity. 21117 2013-12-03 18:40:38 petehunt just want to clear up any misconception you may have: react doesn't depend on a server-side DOM. it's all string concatenations, so you should be able to scale it out. but if you don't want to run a JS implementation at all server side then that's a different story. 21118 2013-12-03 18:40:40 andreypopp as petehunt said it's an optimisation so you could do it only in prod 21119 2013-12-03 18:40:45 dnolen andreypopp: I'd be afraid of Rhino perf, Nashorn not fully baked 21120 2013-12-03 18:41:00 andreypopp ah, ok, never used it myself 21121 2013-12-03 18:41:05 dnolen petehunt: yep know that about lack of React DOM dependence 21122 2013-12-03 18:41:17 petehunt ok cool, just wanted to make sure it wasn't "i dont want to run a dom server side" :) 21123 2013-12-03 18:42:04 vjeux dnolen: can you use clojurescript to generate react's render pass. this way even if js is running that still looks like clojure? 21124 2013-12-03 18:42:52 dnolen vjeux: yeah that's very easy to do if you mean something like what's in the comments - https://gist.github.com/swannodette/7763911 21125 2013-12-03 18:43:11 dnolen vjeux: so we can use the same template DSL on client/server, but it will actually generate different code 21126 2013-12-03 18:43:23 vjeux i see 21127 2013-12-03 18:49:11 syranide zpao: it only results in double-touching the DOM if it has side-effects (and we already did this when _setting_ the value, why not when we delete?) 21128 2013-12-03 18:49:48 zpao oh truth, but the defaultValue part of that holds 21129 2013-12-03 18:50:13 syranide hmm? 21130 2013-12-03 18:50:43 zpao the getDefaultValue call has a chance of touching the dom (creates an element and gets the value, unless cached) 21131 2013-12-03 18:51:09 zpao so if we short circuit on the hasSideEffects, then we just touched the dom unnecessarily 21132 2013-12-03 18:51:22 syranide zpao: ah right 21133 2013-12-03 18:51:41 syranide or, wait, no 21134 2013-12-03 18:51:45 syranide we need to know the defaultValue, always 21135 2013-12-03 18:52:06 syranide either !hasSideEffects fall through and we need it to set, or we need it for comparison with the current value 21136 2013-12-03 18:53:37 zpao syranide: oh truth again. ... it's early? not enough coffeee? 21137 2013-12-03 18:53:42 syranide zpao: :D 21138 2013-12-03 18:53:45 zpao syranide: BUT 21139 2013-12-03 18:53:58 syranide no buts! ;) 21140 2013-12-03 18:54:07 zpao node[propName] is still touching the dom 21141 2013-12-03 18:54:33 syranide zpao: yes, however, that entire if-statement and it's content it "not mine" 21142 2013-12-03 18:54:41 syranide *is 21143 2013-12-03 18:56:40 zpao syranide: hmm? before we just set the value regardless, no lookups. no we check if the current value != defaultValue, then set it 21144 2013-12-03 18:56:47 zpao (maybe i missed something) 21145 2013-12-03 18:56:48 syranide zpao: nope, you did not ;) 21146 2013-12-03 18:56:57 syranide I even asked about this a while back 21147 2013-12-03 18:57:05 syranide well 21148 2013-12-03 18:57:31 syranide you did set it regardless when deleting, but did check (hasSideEffects) during setting 21149 2013-12-03 18:58:21 syranide which is even wrong I guess, because if the defaultValue wasn't ''/null/etc, then it did the wrong thing before 21150 2013-12-03 18:59:04 zpao ACTION wishes github diffs worked like phabricator 21151 2013-12-03 18:59:35 petehunt zpao: how are you feeling about https://github.com/facebook/react/pull/627 ? 21152 2013-12-03 18:59:42 balpert zpao: long live phabricator.benalpert.com 21153 2013-12-03 18:59:47 balpert can't we set up a phabricator for react? 21154 2013-12-03 19:00:07 zpao balpert: probably, but barrier to entry and all that stuff. perhaps 1 day 21155 2013-12-03 19:00:32 balpert zpao: :) like I set up http://phabricator.benalpert.com/D61?vs=169&id=171&whitespace=ignore-all#toc to help me review sspi's new changes 21156 2013-12-03 19:00:58 petehunt no js syntax highlighting!? blasphemy! 21157 2013-12-03 19:01:15 balpert petehunt: lol. maybe I'll install pygments 21158 2013-12-03 19:02:29 balpert petehunt: better? 21159 2013-12-03 19:02:43 petehunt yup 21160 2013-12-03 19:02:51 petehunt gotta get those `var`s red 21161 2013-12-03 19:02:58 syranide btw zpao perhaps it is premature, but is there some merit to actually assuming that all props has '' (or null) has default value, and instead specify which DO NOT (and only those touch the dom) 21162 2013-12-03 19:03:33 zpao syranide: yea, was thinking that too :) 21163 2013-12-03 19:07:38 zpao syranide: so i think we might have been saying different things - here's what i was thinking: https://gist.github.com/zpao/749a95c55992f53a5b46 21164 2013-12-03 19:17:28 dnolen so React.js uses arrays for sequences of DOM children? Any chance of also supporting the coming Iterator interface? 21165 2013-12-03 19:17:41 dnolen then we can put ClojureScript sequences where you all use arrays 21166 2013-12-03 19:19:49 petehunt dnolen: should be easy. we just need to make it work in https://github.com/facebook/react/blob/master/src/utils/traverseAllChildren.js 21167 2013-12-03 19:28:29 dnolen petehunt: cool, how do you all run benchmarks? 21168 2013-12-03 19:29:33 petehunt dnolen: http://paulshen.github.io/react-bench/ 21169 2013-12-03 19:30:09 zpao heh, sort of 21170 2013-12-03 19:30:23 zpao SubtleGradient is working on some stuff around that too 21171 2013-12-03 19:30:31 balpert petehunt: wow 0.5.1 really is like twice as fast as 0.4.1 21172 2013-12-03 19:30:40 petehunt we also roll out master to facebook.com every tuesday and we have some TTI numbers around react. i also have a PR in progress to measure VM optimizations (https://github.com/facebook/react/pull/620), but that's super new 21173 2013-12-03 19:31:02 petehunt balpert: yeah, sebmarkbage and i also have another crazzzzy optimization in the works 21174 2013-12-03 19:31:13 dnolen petehunt: zpao: ok, cool! 21175 2013-12-03 19:31:17 balpert petehunt: sounds exciting... 21176 2013-12-03 19:33:19 balpert petehunt: would love to hear more details when you get a chance :) 21177 2013-12-03 19:33:40 petehunt balpert: in ReactMultiChild we skip reconciling if (prevChild === nextChild) 21178 2013-12-03 19:33:55 petehunt lets us avoid a lot of unneeded reconciliation right now 21179 2013-12-03 19:34:11 balpert petehunt: that's probably only the case when using this.props.children and other ways of passing components around right? 21180 2013-12-03 19:34:25 petehunt right now if you pass a child down from above where the reconcile starts we reconcile it unneccessarily 21181 2013-12-03 19:34:35 petehunt right 21182 2013-12-03 19:34:36 balpert yeah, that's what I meant 21183 2013-12-03 19:34:43 balpert okay cool 21184 2013-12-03 19:34:53 balpert not sure that'll affect any of my stuff but it might 21185 2013-12-03 19:34:57 petehunt not my idea, sebmarkbage's, i just implemented it 21186 2013-12-03 19:35:05 petehunt if it affects your stuff it will almost surely affect ours 21187 2013-12-03 19:35:24 petehunt so we are going to dogfood internally a lot 21188 2013-12-03 19:35:47 petehunt may have a mode where we do it but warn if there is a change or something. i don't know yet :) 21189 2013-12-03 19:36:15 balpert no, I just meant for perf 21190 2013-12-03 19:36:36 balpert seems unlikely that would actually change behavior 21191 2013-12-03 19:36:44 balpert though possible I suppose 21192 2013-12-03 19:37:41 petehunt balpert: if you are doing some crazy mutation and then calling setState() on a component somewhere and it happens to work you may get messed up 21193 2013-12-03 19:38:01 balpert yeah 21194 2013-12-03 20:25:51 sspi you know what you never should do - try to fix a PR at 3am 21195 2013-12-03 20:53:46 vjeux petehunt: finally :) https://twitter.com/__DavidFlanagan/status/407967050154266624 21196 2013-12-03 20:54:07 vjeux baby steps to make code review bearable on github :p 21197 2013-12-03 20:54:25 petehunt vjeux: yea i met some github peeps at jsconf asia 21198 2013-12-03 20:54:30 petehunt and i was like wtf, no side by side diffs 21199 2013-12-03 20:54:39 petehunt at least we get this 21200 2013-12-03 20:54:40 petehunt :D 21201 2013-12-03 20:54:42 vjeux xD 21202 2013-12-03 20:56:08 lbljeffmo petehunt: what did they say when you mentioend side-by-side diffs? 21203 2013-12-03 20:56:27 petehunt lbljeffmo: that it's on the todo list but isn't prioritized 21204 2013-12-03 20:56:30 lbljeffmo ah 21205 2013-12-03 20:56:40 petehunt then i asked why 3d model reviewing tools were out and side by side diffs werent 21206 2013-12-03 20:56:44 petehunt no answer there 21207 2013-12-03 20:56:46 petehunt :P 21208 2013-12-03 20:56:49 lbljeffmo lol 21209 2013-12-03 20:57:01 vjeux xD 21210 2013-12-03 20:58:25 vjeux https://chrome.google.com/webstore/detail/side-by-side-diff-view-in/ihmhmdmhllhleioijdeoocgoddjckbcd?hl=en 21211 2013-12-03 20:58:25 vjeux omg 21212 2013-12-03 21:05:02 balpert vjeux: I heard it breaks often 21213 2013-12-03 22:06:34 chenglou guys, where can I get Xcode's side-by-side + time machine-ish diff, but standalone? 21214 2013-12-03 22:07:42 balpert chenglou: I have no idea what you're talking about 21215 2013-12-03 22:07:44 balpert but it sounds awesome 21216 2013-12-03 22:07:47 balpert what do I click in Xcode? 21217 2013-12-03 22:08:05 chenglou I forgot, it's been a while 21218 2013-12-03 22:08:12 chenglou sec let me check if there's a video of it 21219 2013-12-03 22:08:23 chenglou I'd pay big bucks for this tool, standalone 21220 2013-12-03 22:10:38 dnolen chenglou: used to be called File Merge, it might be history now that XCode has it built in 21221 2013-12-03 22:11:53 balpert chenglou: phabricator is the way to go for all code review related things 21222 2013-12-03 22:16:12 chenglou dnolen: yeah that got killed 21223 2013-12-03 22:16:27 chenglou balpert: found it! 21224 2013-12-03 22:16:30 chenglou http://youtu.be/ncQoYkQp5mo?t=41m41s 21225 2013-12-03 22:21:48 balpert hmm I've never seen that before 21226 2013-12-03 22:22:03 balpert sort of cool 21227 2013-12-03 22:22:40 chenglou it's somewhere in Xcode. In the video 21228 2013-12-03 22:26:21 lbljeffmo SubtleGradient: hey 21229 2013-12-03 22:26:37 lbljeffmo are you using node-haste (explicitly -- not indirectly) anywhere in your new test stuff? 21230 2013-12-03 22:26:59 lbljeffmo more specifically -- are you using it to find manual mocks under __mocks__ dirs 21231 2013-12-03 22:27:17 SubtleGradient lbljeffmo: Ahoy 21232 2013-12-03 22:28:20 SubtleGradient I've never heard of __mocks__ 21233 2013-12-03 22:28:20 SubtleGradient Also, I'm not using haste (afaik) 21234 2013-12-03 22:28:20 SubtleGradient What's node-haste good for? 21235 2013-12-03 22:29:29 lbljeffmo SubtleGradient: nothing, really 21236 2013-12-03 22:29:30 lbljeffmo :p 21237 2013-12-03 22:29:34 SubtleGradient :o 21238 2013-12-03 22:29:47 lbljeffmo it's a utility for finding dependencies in node 21239 2013-12-03 22:29:57 lbljeffmo you can write your own loaders, etc 21240 2013-12-03 22:30:09 lbljeffmo I'm making a change -- and just wanted to check and see if anyone was using it in a way that I might break 21241 2013-12-03 22:30:09 SubtleGradient I believe you 21242 2013-12-03 22:30:24 SubtleGradient Cool. Thanks 21243 2013-12-03 22:39:36 syranide ah hey zpao, Im not quite sure what you meant with your gist https://gist.github.com/zpao/749a95c55992f53a5b46 21244 2013-12-03 22:42:44 zpao syranide: what i mean is don't compare against defaultValue and set it, just set it 21245 2013-12-03 22:43:21 syranide zpao: ah right, but I'm guessing there was a reason for that behavior before? 21246 2013-12-03 22:43:24 zpao node[propName] === defaultValue is a lookup and needs to touch the dom 21247 2013-12-03 22:43:36 zpao and then you touch it again right after that 21248 2013-12-03 22:43:44 syranide zpao: yeah, but I'm guessing the point is, that since they have sideEffects, it's much more expensive to set than to get 21249 2013-12-03 22:43:59 syranide hence the check 21250 2013-12-03 22:44:33 syranide if it doesn't have sideeffects, it sets it right away 21251 2013-12-03 22:55:32 zpao syranide: i'm really having trouble reading today. disregard pretty much everything i've said :/ 21252 2013-12-03 22:55:50 syranide zpao: hehe ok ;) 21253 2013-12-03 22:59:00 syranide zpao: ah before I forget, is there a complete style-guide somewhere or is the "source code" it? 21254 2013-12-03 23:02:40 zpao the source code is it 21255 2013-12-03 23:02:54 syranide zpao: oki thanks 21256 2013-12-03 23:04:55 zpao before we open sourced react i wanted to write a better one, but it didn't happen. i really like airbnb's for the most part 21257 2013-12-03 23:05:31 syranide yeah, I've glanced over it quickly before and I like it 21258 2013-12-03 23:06:26 zpao one of these days... 21259 2013-12-03 23:06:36 zpao gotta run for a bit, back soon 21260 2013-12-03 23:06:39 syranide zpao: it's weekend soon ;) 21261 2013-12-03 23:06:44 syranide yeah, I'm off to bed, take care 21262 2013-12-03 23:06:54 zpao cya 21263 2013-12-03 23:08:59 balpert isn't it Tuesday? 21264 2013-12-03 23:20:57 mcarter unfortunately it is still tuesday 21265 2013-12-04 01:56:43 balpert yay breaking changes? 21266 2013-12-04 02:01:51 vjeux_ balpert: i really like this change, i'd be able to get rid of some duplicated code i have just to make sure this.state is up to date 21267 2013-12-04 02:02:03 balpert vjeux_: hmm? 21268 2013-12-04 02:02:24 vjeux_ setAttachments: function(attachments) { 21269 2013-12-04 02:02:25 vjeux_ this.attachments = attachments; 21270 2013-12-04 02:02:25 vjeux_ this.setState({ attachments: attachments }); 21271 2013-12-04 02:02:50 vjeux_ and i use this.attachments everywhere but in render where i use this.state.attachments 21272 2013-12-04 02:02:53 vjeux_ it's kinda stupid 21273 2013-12-04 02:03:01 vjeux_ and i'd rather use this.state 21274 2013-12-04 02:05:07 balpert hmm interesting 21275 2013-12-04 02:05:27 balpert I'm surprised so many people are running into problems with the current setup 21276 2013-12-04 07:05:25 sspi anybody here got experience with extending Chrome DevTools? was wondering if it would be possible to modify the elements tab 21277 2013-12-04 08:21:50 balpert sspi: sebmarkbage is working on a React inspector plugin 21278 2013-12-04 08:22:33 krs that would be very nice 21279 2013-12-04 09:09:41 sspi Cool! Wonder what he has created so far 21280 2013-12-04 09:10:17 sspi I want my react components to show up like web components do 21281 2013-12-04 09:27:39 sspi can't find anything on his github :( 21282 2013-12-04 16:38:12 dnolen so do you all actually check the contents of props as an optimization? 21283 2013-12-04 16:38:44 dnolen also, I'm assuming for setState, you all merge it into to a tree of values or something? 21284 2013-12-04 16:51:01 petehunt_ dnolen: i can walk you through everything when we meet up today, gotta run right now though 21285 2013-12-04 16:51:18 dnolen petehunt_: cool, talk in a bit 21286 2013-12-04 17:07:35 zpao sspi: the extension isn't open sourced yet 21287 2013-12-04 17:07:49 sspi alright, what can we expect? :) 21288 2013-12-04 18:16:13 SubtleGradient zpao: https://github.com/facebook/react/pull/628 21289 2013-12-04 18:16:19 SubtleGradient https://travis-ci.org/facebook/react/builds/14895478 21290 2013-12-04 18:16:58 SubtleGradient With that change we'll get test results for IE8–IE11 on every PR. 21291 2013-12-04 18:17:45 SubtleGradient balpert: ?? Seem ok for now? 21292 2013-12-04 18:19:40 balpert SubtleGradient: don't like my suggestion here? https://github.com/facebook/react/pull/628#issuecomment-29752724 if it wasn't clear, I was suggesting using three different types in addition to the webdriver stuff 21293 2013-12-04 18:20:16 SubtleGradient balpert: oh yeah, I thought I replied. I guess I hadn't 21294 2013-12-04 18:20:29 balpert I guess you could also do if [ "$TEST_TYPE" = test ]; then grunt build; fi; grunt $TEST_TYPE; 21295 2013-12-04 18:20:44 balpert I just think it's weird to have the "unit" task that's useful only for travis 21296 2013-12-04 18:20:52 balpert in the Gruntfile 21297 2013-12-04 18:21:31 SubtleGradient Unfortunately adding an additional test type will add at least 4 minutes to every build. 21298 2013-12-04 18:21:52 SubtleGradient Ideally we would avoid matrix builds since they carry so much overhead, but this works for now. 21299 2013-12-04 18:22:27 balpert do they run serially? 21300 2013-12-04 18:23:10 SubtleGradient They're supposed to be concurrent, but in practice they appear to be started at different times. 21301 2013-12-04 18:24:07 zpao soooo putting the accesskey in there plaintext... any potential issue there? 21302 2013-12-04 18:24:51 SubtleGradient zpao: I created a new saucelabs account with very minimal access. We can always swap it out if some other project starts using it for something weird 21303 2013-12-04 18:25:00 balpert SubtleGradient: can we do in .travis.yml: if [ "$TEST_TYPE" = test ]; then grunt build; fi; grunt $TEST_TYPE 21304 2013-12-04 18:25:16 balpert makes it easy to add new stuff but doesn't pollute Gruntfile with the weird 'unit' type 21305 2013-12-04 18:25:42 balpert does it make sense to run in Firefox too? 21306 2013-12-04 18:25:50 balpert I assume Chrome/Safari/phantom are probably similar enough 21307 2013-12-04 18:26:14 zpao not really... phantom is safari 5 i think 21308 2013-12-04 18:26:25 SubtleGradient For the ones that all pass I'd like to add those to the normal test run in travis 21309 2013-12-04 18:26:58 SubtleGradient We should have a separate fast unit test run and full test run task for CI 21310 2013-12-04 18:27:11 SubtleGradient You should be able to run any of them using grunt only 21311 2013-12-04 18:27:38 SubtleGradient When developing stuff locally you shouldn't have to test every change in every browser 21312 2013-12-04 18:27:54 SubtleGradient when running tests in travis we should run all the tests in all the browsers 21313 2013-12-04 18:28:29 SubtleGradient But all that is out of scope for this PR imho 21314 2013-12-04 18:28:51 SubtleGradient If you disagree then I can add that stuff to this one… 21315 2013-12-04 18:29:12 SubtleGradient Actually, now that I think about it 'out loud' it does make sense to do all that in this PR 21316 2013-12-04 18:29:17 SubtleGradient brb; hacking… 21317 2013-12-04 18:31:17 SubtleGradient ACTION http://therealscratchpad.files.wordpress.com/2010/06/he-man-masters-of-the-universe-he-man-604199_500_768.jpg 21318 2013-12-04 18:31:29 balpert ACTION shrinks in fear 21319 2013-12-04 18:31:48 SubtleGradient ^_^ 21320 2013-12-04 18:32:25 SubtleGradient balpert: I'd love to know more about how you guys are using React 21321 2013-12-04 18:32:54 balpert we're using it for almost all new stuff now 21322 2013-12-04 18:33:27 SubtleGradient Any examples? 21323 2013-12-04 18:34:01 balpert if you go to https://www.khanacademy.org/coach/demo 21324 2013-12-04 18:34:11 balpert "Student Progress" and "Skill Progress" are all React 21325 2013-12-04 18:35:51 balpert we're using it for an (internal) exercise editor https://s3.amazonaws.com/uploads.hipchat.com/6574/26709/uHES354Q2uRwzlS/upload.png as well as the code which displays the same exercises to students 21326 2013-12-04 18:36:26 balpert we're using it for parts of the logged-in homepage 21327 2013-12-04 18:36:33 SubtleGradient Awesome! 21328 2013-12-04 18:36:45 balpert using it for silly simple things like https://www.khanacademy.org/commoncore/map 21329 2013-12-04 18:37:52 SubtleGradient hipness! 21330 2013-12-04 18:38:08 SubtleGradient balpert: you guys doing anything specific for android or mobile in general? 21331 2013-12-04 18:40:00 SubtleGradient balpert: What do you think about Bret Victor's take on learnable programming UI? http://worrydream.com/LearnableProgramming/ 21332 2013-12-04 18:41:52 balpert petehunt: want to answer http://stackoverflow.com/q/20371566/49485? 21333 2013-12-04 18:41:58 balpert SubtleGradient: I'm actually working on mobile (iOS) right now 21334 2013-12-04 18:42:26 balpert haven't figured exactly how React fits in there but it'll probably play a part 21335 2013-12-04 18:42:26 SubtleGradient balpert: Native or web or hybrid? 21336 2013-12-04 18:42:39 balpert native or hybrid, probably hybrid 21337 2013-12-04 18:43:27 balpert basically our app right now https://itunes.apple.com/us/app/khan-academy/id469863705 only does videos, we're adding exercises now since those are a huge part of the site 21338 2013-12-04 18:43:41 SubtleGradient ooo, exciting! 21339 2013-12-04 18:43:57 SubtleGradient I'm a huge fan of Khan academy 21340 2013-12-04 18:44:14 balpert that's great to hear 21341 2013-12-04 18:44:24 balpert well, you know now that we're extra-awesome because we're using React 21342 2013-12-04 18:44:45 SubtleGradient iPad (and Android) is probly going to be pretty huge for Khan in the future 21343 2013-12-04 18:44:57 balpert yeah, our web traffic is already 20% phones and tablets 21344 2013-12-04 18:45:00 balpert not sure the OS split 21345 2013-12-04 18:46:13 SubtleGradient So what's up with $SERVER and this curl stuff? What is this doing? 21346 2013-12-04 18:46:28 balpert uploads builds to http://react.zpao.com/builds/master/ 21347 2013-12-04 18:47:08 SubtleGradient Why? 21348 2013-12-04 18:47:18 balpert so that we have nightlies somewhere? 21349 2013-12-04 18:48:03 SubtleGradient seems good 21350 2013-12-04 18:48:29 zpao yea, it was easy 21351 2013-12-04 18:48:47 zpao and it's been good for testing fiddles 21352 2013-12-04 18:49:01 SubtleGradient How about I just add `grunt build` right before the curl command? 21353 2013-12-04 18:49:10 SubtleGradient or is that was you were suggesting? 21354 2013-12-04 18:49:18 balpert I was thinking of that too, it should work probably 21355 2013-12-04 18:49:29 balpert I couldn't figure out how after_script is actually different from script 21356 2013-12-04 18:49:35 SubtleGradient ok, I'll do that and update Lé PR 21357 2013-12-04 18:50:06 chenglou SubtleGradient: Im a huuuuuge fan of bret victor 21358 2013-12-04 18:50:14 SubtleGradient http://about.travis-ci.org/docs/user/build-configuration/#before_script%2C-after_script 21359 2013-12-04 18:50:19 SubtleGradient chenglou: who isn't? 21360 2013-12-04 18:50:24 balpert Bret Victor obviously has a lot of good ideas, though few of them have been implemented. I think our CS environment is better than most out there -- if you haven't seen, go to a program like https://www.khanacademy.org/cs/bouncing-ball/863892852 and modify the numbers inside the draw loop by dragging the sliders that appear 21361 2013-12-04 18:51:08 zpao SubtleGradient: balpert: i guess i haven't tested to see if after_Script is getting run multiple times 21362 2013-12-04 18:51:34 balpert zpao: almost positive it is 21363 2013-12-04 18:52:01 chenglou balpert: trying to load it 21364 2013-12-04 18:52:35 SubtleGradient It gets run after every build. The `if` stops it from running except for certain builds 21365 2013-12-04 18:52:55 chenglou balpert: nope, wouldn't load 21366 2013-12-04 18:53:05 chenglou Failed to load resource: the server responded with a status of 401 (Unauthorized) 21367 2013-12-04 18:53:29 chenglou humm works in chrome though 21368 2013-12-04 18:53:37 zpao balpert: that was my guess.... SubtleGradient oh i forgot about that... carry on :) 21369 2013-12-04 18:53:49 SubtleGradient as you wish 21370 2013-12-04 18:53:50 balpert chenglou: what browser did you try first? 21371 2013-12-04 18:54:00 chenglou safari 21372 2013-12-04 18:55:39 balpert weird 21373 2013-12-04 18:55:45 balpert did the right side load or nothing at all? 21374 2013-12-04 18:57:01 chenglou balpert: ok nvm, restarted safari and it works now 21375 2013-12-04 18:57:07 balpert odd 21376 2013-12-04 18:57:09 balpert thanks 21377 2013-12-04 18:57:17 chenglou but yeah cool demo! 21378 2013-12-04 18:59:16 chenglou SubtleGradient: speaking of bret victor, have you tried light table? 21379 2013-12-04 18:59:44 SubtleGradient chenglou: A while ago, but it was for lisp only. Any better now? 21380 2013-12-04 19:00:01 chenglou no idea, haven't used it for a while 21381 2013-12-04 19:08:59 SubtleGradient NoFlo is what I'm excited about getting into next 21382 2013-12-04 19:09:31 petehunt balpert: react-touch! 21383 2013-12-04 19:09:52 zpao http://gifrific.com/wp-content/uploads/2013/02/No-Touching-George-Bluth-Arrested-Development.gif 21384 2013-12-04 19:10:32 balpert petehunt: hmm? 21385 2013-12-04 19:11:03 petehunt if you're working on mobile 21386 2013-12-04 19:11:12 petehunt i started on some touch stuff that's pretty usable 21387 2013-12-04 19:12:04 balpert ah! 21388 2013-12-04 19:12:23 balpert yeah, I saw your crazy stuff 21389 2013-12-04 19:13:25 petehunt balpert: i refactored it to be easy to use 21390 2013-12-04 19:13:48 balpert petehunt: it's just zynga scroller and frosted glass right? 21391 2013-12-04 19:14:07 petehunt balpert: and left nav. 21392 2013-12-04 19:14:14 balpert ah yes 21393 2013-12-04 19:14:22 petehunt it does have some good primitives for zynga scroller and performant animatable surfaces though 21394 2013-12-04 19:22:31 cpojer_ do we not support rest parameters in jstransform yet? 21395 2013-12-04 19:23:14 balpert cpojer_: https://github.com/facebook/jstransform/blob/master/visitors/es6-rest-param-visitors.js 21396 2013-12-04 19:23:48 cpojer_ mhhh 21397 2013-12-04 19:23:51 cpojer_ trying to use it in react 21398 2013-12-04 19:24:28 zpao cpojer_: probably need to add that to the transform visitors 21399 2013-12-04 19:24:47 cpojer_ zpao: can you give me one more hint? 21400 2013-12-04 19:24:52 cpojer_ (this is react open source) 21401 2013-12-04 19:25:23 zpao https://github.com/facebook/react/blob/master/vendor/fbtransform/visitors.js 21402 2013-12-04 19:25:44 zpao those are the transforms run in bin/jsx 21403 2013-12-04 19:25:44 cpojer_ thank you! 21404 2013-12-04 19:26:07 zpao (we probably shouldn't run the es6 classes one for react open source...) 21405 2013-12-04 19:26:35 cpojer_ not yet :) 21406 2013-12-04 19:26:45 petehunt i thought they were disabled 21407 2013-12-04 19:26:59 petehunt instagram is pegged at react-tools 0.4.1 because of that! :) 21408 2013-12-04 19:28:27 zpao petehunt: whhhhaaat 21409 2013-12-04 19:28:32 zpao booooooooooo 21410 2013-12-04 19:29:20 petehunt sorry 21411 2013-12-04 19:29:22 petehunt :) 21412 2013-12-04 19:36:14 balpert react-tools doesn't change that much 21413 2013-12-04 19:36:17 balpert I guess the className thing 21414 2013-12-04 19:36:21 balpert and soon, the whitespace thing! 21415 2013-12-04 19:44:01 SubtleGradient running in ALL THE BROWSERS: https://travis-ci.org/facebook/react/jobs/14941971 21416 2013-12-04 19:44:23 SubtleGradient Watch the test results and chew your fingernails with me 21417 2013-12-04 19:44:34 petehunt "running": Fatal error: Error response status: 13. 21418 2013-12-04 19:44:37 SubtleGradient dang 21419 2013-12-04 19:44:41 zpao \\o/ /o\\ 21420 2013-12-04 19:45:12 zpao lint passed though :P 21421 2013-12-04 19:45:24 SubtleGradient dang iOS 21422 2013-12-04 19:47:42 zpao ie10 legitimately failed 21423 2013-12-04 19:48:47 SubtleGradient I cancelled the rest of the job. Disabled failing on ios and will push again 21424 2013-12-04 19:48:59 sspi awesome! 21425 2013-12-04 19:49:12 sspi (testing in all the browsers that is :P) 21426 2013-12-04 19:49:30 cpojer_ it don't work :( 21427 2013-12-04 19:49:37 cpojer_ I have "var fn = function(...rest) {" 21428 2013-12-04 19:49:45 cpojer_ "Error: Line 22: Unexpected token ." 21429 2013-12-04 19:49:56 zpao sspi: yea, then we need more tests testing things so that we catch thing like onScroll not working 21430 2013-12-04 19:50:33 sspi yeah, we definitely need that :) 21431 2013-12-04 19:51:06 SubtleGradient I'm considering devoting the next few weeks to working towards 100% test coverage 21432 2013-12-04 19:51:22 sspi 100% 21433 2013-12-04 19:52:03 SubtleGradient I'll probly do that unless there's some other more impactful thing to do first 21434 2013-12-04 19:52:03 sspi how much coverage do we have now? 21435 2013-12-04 19:52:41 SubtleGradient 405 expressions not covered 21436 2013-12-04 19:52:47 SubtleGradient 1065 lines not covered 21437 2013-12-04 19:53:11 SubtleGradient Not sure how many expressions ARE covered 21438 2013-12-04 19:53:45 SubtleGradient `grunt test:coverage` will show you the deets 21439 2013-12-04 19:56:36 sspi great, my score is 389 expressions not covered and 1000 lines not covered 21440 2013-12-04 19:56:49 SubtleGradient That's better 21441 2013-12-04 19:59:13 SubtleGradient better: https://travis-ci.org/facebook/react/jobs/14942607 21442 2013-12-04 19:59:44 SubtleGradient phantom, android, firefox, chrome & safari 21443 2013-12-04 19:59:58 petehunt SubtleGradient: i dare you to do opera mini 21444 2013-12-04 20:00:07 SubtleGradient I would if I could 21445 2013-12-04 20:00:18 petehunt but you can't so you shan't? 21446 2013-12-04 20:00:22 SubtleGradient I don't think saucelabs supports it yet. I'll check… 21447 2013-12-04 20:00:34 sspi petehunt: can I report bugs if something doesn't work? :P 21448 2013-12-04 20:01:06 SubtleGradient oh carp… >> not ok 382 - utils/__tests__/ImmutableObject-test ImmutableObject should tolerate arrays at deeper levels and prevent mutation on them:DEV. 21449 2013-12-04 20:15:14 SubtleGradient zpao & balpert: ICANHAZ approval? https://github.com/facebook/react/pull/628 21450 2013-12-04 20:16:24 sspi do they also have multiple ios versions? 21451 2013-12-04 20:17:31 SubtleGradient sspi: https://github.com/subtleGradient/react/blob/0e9906c0e5613c75e98462465d31875294f95498/grunt/config/webdriver-jasmine.js#L52-L64 21452 2013-12-04 20:17:57 sspi SubtleGradient: you are awesome 21453 2013-12-04 20:18:11 SubtleGradient ACTION feels awesome 21454 2013-12-04 20:18:23 SubtleGradient thank you thank you 21455 2013-12-04 20:18:41 SubtleGradient https://saucelabs.com/docs/platforms 21456 2013-12-04 20:19:28 sspi Android support seems crappy? 21457 2013-12-04 20:19:48 SubtleGradient Yeah, they need more Androids 21458 2013-12-04 20:20:10 SubtleGradient But 4.0 is way better than nothing 21459 2013-12-04 20:21:57 sspi yes! 21460 2013-12-04 20:24:16 balpert SubtleGradient: so test:full tests the passing browsers? 21461 2013-12-04 20:24:26 SubtleGradient yes 21462 2013-12-04 20:24:46 petehunt lol 21463 2013-12-04 20:24:48 SubtleGradient eventually it should run all browsers 21464 2013-12-04 20:24:48 petehunt sick 21465 2013-12-04 20:24:58 balpert does it make sense to combine the failing ones? I guess it's nicer to see per-browser info there 21466 2013-12-04 20:25:37 SubtleGradient hmm… yeah, that's not a bad idea actually. 21467 2013-12-04 20:34:34 zpao SubtleGradient: i'm fine with whatever you guys settle one 21468 2013-12-04 20:54:28 SubtleGradient https://travis-ci.org/facebook/react/builds/14945512 21469 2013-12-04 20:55:03 SubtleGradient balpert: ? combined related builds 21470 2013-12-04 20:55:22 SubtleGradient only drawback is that we don't get results for IE9 if the IE8 build fails 21471 2013-12-04 20:56:01 SubtleGradient However, we probly shouldn't be worried about bugs that effect IE9 and not IE8 when there are still failing IE8 bugs to fix 21472 2013-12-04 20:58:52 SubtleGradient petehunt: ? what do you think about that tradeoff? 21473 2013-12-04 20:59:27 petehunt isn't ie8 failing right now 21474 2013-12-04 20:59:33 SubtleGradient yes 21475 2013-12-04 20:59:37 petehunt so we won't get any results for ie9 21476 2013-12-04 20:59:53 SubtleGradient right 21477 2013-12-04 21:00:04 petehunt that doesnt seem super awesome 21478 2013-12-04 21:02:19 SubtleGradient yeah, #seemsbad 21479 2013-12-04 21:13:05 lbljeffmo syranide: yt? 21480 2013-12-04 21:13:16 syranide ofc :) 21481 2013-12-04 21:14:02 lbljeffmo syranide: I've cloned youre whitespace branch and am playing around a bit, and I'm not seeing bin/jsx outputting the new rules (or, maybe the rules have changed and the transform script isn't correct anymore)? 21482 2013-12-04 21:14:09 lbljeffmo for example 21483 2013-12-04 21:14:21 lbljeffmo
    21484 2013-12-04 21:14:23 lbljeffmo stuff
    21485 2013-12-04 21:14:34 lbljeffmo outputs: React.DOM.div(null, 21486 2013-12-04 21:14:37 lbljeffmo ' ',"stuff1"); 21487 2013-12-04 21:14:38 lbljeffmo for me 21488 2013-12-04 21:14:53 lbljeffmo I thought the new rules wouldn't put a space at the front? 21489 2013-12-04 21:14:59 syranide that's weird, I'll have a look (I've only hacked it to run in the browser for now) 21490 2013-12-04 21:15:02 syranide it would 21491 2013-12-04 21:15:13 syranide _and_ it shouldn't actually transform to JSX 21492 2013-12-04 21:15:22 syranide or wait 21493 2013-12-04 21:15:33 lbljeffmo I did cat test.js|bin/jsx 21494 2013-12-04 21:15:38 lbljeffmo to get that output 21495 2013-12-04 21:15:47 syranide you are talking about my whitespace branch right (not the transformer) 21496 2013-12-04 21:15:49 lbljeffmo where test.js has the example code (plus the @jsx header, etc) 21497 2013-12-04 21:15:56 lbljeffmo right, I'm using the whitespace branch 21498 2013-12-04 21:16:02 syranide ah then it makes sense 21499 2013-12-04 21:16:17 syranide no it should not produce a space there according to the current rules (3B) 21500 2013-12-04 21:16:20 syranide however 21501 2013-12-04 21:16:22 syranide
    21502 2013-12-04 21:16:24 syranide A 21503 2013-12-04 21:16:27 syranide B
    21504 2013-12-04 21:16:32 syranide would produce "A B" 21505 2013-12-04 21:16:58 syranide I don't see why you would want a space before A in that example 21506 2013-12-04 21:17:11 lbljeffmo syranide: then maybe your transformer has an inconsistency -- if I apply the refactoring transformer, it spits this out: 21507 2013-12-04 21:17:24 lbljeffmo
    21508 2013-12-04 21:17:28 lbljeffmo {' '}stuff1
    ; 21509 2013-12-04 21:17:58 lbljeffmo but it probably just shouldn't have changed anything in that case, right? 21510 2013-12-04 21:18:13 syranide lbljeffmo: it's correct, the current rules would write it out as " stuff1", my refactoring jsx ensures that output is identical 21511 2013-12-04 21:18:19 syranide before and after the new whitespace patch 21512 2013-12-04 21:18:57 syranide however, the rules can be individually toggled off if you know you want some of the behavior 21513 2013-12-04 21:19:02 lbljeffmo I guess the transformer isn't wrong, but it changed the code and didn't need to 21514 2013-12-04 21:19:04 syranide *you don't 21515 2013-12-04 21:19:44 lbljeffmo i.e. if it didn't add the {' '} to the beginning of the second line, the new whitespace rules and the old ones result in the same output anyway 21516 2013-12-04 21:19:47 syranide lbljeffmo: well, that depends on "needs to", if you are after identical output, it produces identical output, if you don't want the leading/trailing space because of newlines (it can be turned off) 21517 2013-12-04 21:19:53 syranide lbljeffmo: nope 21518 2013-12-04 21:20:01 syranide current rules produce "
    stuff1
    " 21519 2013-12-04 21:20:33 lbljeffmo as does the new code (according to what I'm seeing) 21520 2013-12-04 21:20:35 syranide (check the tests I fixed, they rely on leading/trailing spaces being output) 21521 2013-12-04 21:20:46 syranide lbljeffmo: that is weird though, it shouldn't 21522 2013-12-04 21:20:55 syranide I'll check it 21523 2013-12-04 21:21:59 lbljeffmo syranide: here's my test file: http://pastebin.com/LEWATVA8 21524 2013-12-04 21:22:30 jonathanj so, i can't write JSX in CoffeeScript yet, can i? 21525 2013-12-04 21:23:11 petehunt jonathanj: backquotes work pretty well 21526 2013-12-04 21:23:50 jonathanj petehunt: okay, so i escape all my JSX in my CS, compile it to JS, run the transformer over it? 21527 2013-12-04 21:24:04 petehunt yep! 21528 2013-12-04 21:24:06 syranide one sec, I'll throw together a paste 21529 2013-12-04 21:24:33 petehunt jonathanj: if you are using some sort of build system, just put hte coffeescript step before the jsx step 21530 2013-12-04 21:25:45 cpojer_ is it possible that when adding new transforms, that I need to run "grunt clean"? 21531 2013-12-04 21:25:56 cpojer_ I was fighting with failures in grunt test and it seemed flaky 21532 2013-12-04 21:26:09 cpojer_ now I added the transforms, did a grunt clean and grunt test passes now 21533 2013-12-04 21:26:42 syranide lbljeffmo: http://pastebin.com/z8Y2hrmD 21534 2013-12-04 21:26:49 syranide does that explain it a bit better perhaps? 21535 2013-12-04 21:28:20 jonathanj petehunt: yeah, exactly 21536 2013-12-04 21:28:37 jonathanj cool, that works for me 21537 2013-12-04 21:29:08 lbljeffmo syranide: ok I'm a clown -- I was accidentally using the old transformer when I though I was using yours 21538 2013-12-04 21:29:15 syranide lbljeffmo: ah 21539 2013-12-04 21:29:24 lbljeffmo works for me now 21540 2013-12-04 21:29:29 syranide lbljeffmo: http://pastebin.com/DTGaWAUB 21541 2013-12-04 21:29:36 jonathanj so this conversation about {' '}, is that still something you need to do or does the transformer handle it better than it used to? 21542 2013-12-04 21:29:40 syranide you can play with that, it shows pretty much all of the different cases 21543 2013-12-04 21:30:00 syranide jonathanj: that's exactly what we are talking about right now :) 21544 2013-12-04 21:30:05 lbljeffmo jonathanj: there's a pending PR sent by the great syranide 21545 2013-12-04 21:30:20 lbljeffmo https://github.com/facebook/react/pull/480/ 21546 2013-12-04 21:30:22 jonathanj i thought so, but i'm actually too lazy to read all the scrollback 21547 2013-12-04 21:30:26 jonathanj anyway, that's awesome! 21548 2013-12-04 21:34:39 syranide lbljeffmo: FYI, after this friday I will be away and unavailable until next sunday 21549 2013-12-04 21:35:17 lbljeffmo syranide: ok. I'm working really hard to get our internal transition story straight this week 21550 2013-12-04 21:35:31 syranide yeah no worries 21551 2013-12-04 21:35:49 lbljeffmo if it runs over into when you'll be gone, I'll try to hack into issues and sync up with you when you get back before landing anything 21552 2013-12-04 21:36:21 lbljeffmo (unless its all good in its current form, in which case I'll just merge your PR) 21553 2013-12-04 21:36:46 lbljeffmo hoefully the latter :) 21554 2013-12-04 21:36:49 syranide sure thing, I could look it over once more on my end too and see if I spot anything 21555 2013-12-04 21:37:00 sspi zpao: when can we expect an open source version of the devtools extension? 21556 2013-12-04 21:37:23 syranide lbljeffmo: do you have any thoughts on the rules so far? (very easy to change) 21557 2013-12-04 21:40:23 lbljeffmo syranide: I don't, but I'm trying to get more eyes on it. Your description of the changes is kinda viscous...but that's because it's kind of a nuanced change. As a result, though, it's hard to get people to dive in and try to understand them. So I've made an internal diff using your transform and sent that out as an example of "this is what I'm about to change...do you guys hate it?" to all the people who might care (did this about 40mins ago). So as lon 21558 2013-12-04 21:40:24 lbljeffmo nobody pushes back with legit concerns, I think things are probably good 21559 2013-12-04 21:41:22 syranide ah yeah, I see your point, it took me a while before I managed to actually figure it out on my end (and yes, my explanations are probably not that good) 21560 2013-12-04 21:42:10 lbljeffmo syranide: I don't think your explanation is bad...it just takes a lot to understand the changes (it's kinda subtle, and a lot of people aren't super familiar with the current whitespace rules...so its hard to see what exactly is changing in real life) 21561 2013-12-04 21:43:01 zpao sspi: in the future :P 21562 2013-12-04 21:43:32 benjamn zpao, SubtleGradient: moved the commoner cache buster version hack into package.json: https://github.com/facebook/react/pull/535 21563 2013-12-04 21:46:02 zpao benjamn: want to call it commonerConfig or something since this will need to get busted for non-jsx things? 21564 2013-12-04 21:46:21 zpao eg, the switch to envify 21565 2013-12-04 21:46:34 benjamn what's envify? 21566 2013-12-04 21:47:01 zpao see https://github.com/facebook/react/pull/627 21567 2013-12-04 21:49:29 benjamn zpao: done 21568 2013-12-04 21:49:30 benjamn https://github.com/facebook/react/pull/535/files 21569 2013-12-04 21:50:13 zpao push it 21570 2013-12-04 21:50:27 benjamn get ready to feel the value of the .module-cache :P 21571 2013-12-04 21:50:39 syranide from my perspective, I don't see any clear-cut winner, but I consider the primary purpose of the JSX DOM to be for inserting and ordering components and inline text is secondary (it's for short labels and such)... so I think the starting point is: minimal white-space should be produced, the most important aspect is to be able to structure the code how you want it (indenting, etc), without worrying about whitespace 21572 2013-12-04 21:51:18 syranide and then I added "keeping multiple-spaces" and "generate a space between text on two separate lines", because they felt the least invasive, and actually useful 21573 2013-12-04 21:54:03 syranide so in practice this means, trim whitespace from each line (identing shouldn't matter), turn "A\\nB" into "A B" (if you split text into multiple lines, you want a space) and then remove all newlines (newlines shouldn't matter) 21574 2013-12-04 22:02:29 balpert benjamn: rebuilding everything isn't that painful 21575 2013-12-04 22:02:33 balpert 30s on my machine 21576 2013-12-04 22:02:41 balpert obviously more than you'd like to do frequently though 21577 2013-12-04 22:02:52 balpert btw do you know how to make grunt populist:test faster? 21578 2013-12-04 22:02:57 benjamn I mean, we aren't building a Scala project here 21579 2013-12-04 22:03:11 balpert that seems to be the slowest part of grunt test for me 21580 2013-12-04 22:03:28 benjamn it's worth looking into 21581 2013-12-04 22:03:33 benjamn because it has definitely gotten slower 21582 2013-12-04 22:04:07 balpert I haven't done any investigation into its slowness 21583 2013-12-04 22:07:37 lbljeffmo syranide: one strong result-based argument for the rules you have so far is that the internal diff I mentioend has inserted a bunch of explicit {' '}s in code that probably didn't realize or intend for there to be a space somewhere. There are certainly some cases that did intend for the implicit space...but, being explicit about that (IMO) is only a good thing 21584 2013-12-04 22:08:03 lbljeffmo anyway -- I haven't heard any grumblings brought up after that diff...so I'm planning to proceed 21585 2013-12-04 22:08:10 syranide lbljeffmo: any cases where you had to be explicit that you can share? 21586 2013-12-04 22:08:25 lbljeffmo syranide: mostly s 21587 2013-12-04 22:08:30 syranide (or perhaps you felt they should've been explicit) 21588 2013-12-04 22:08:32 syranide ah 21589 2013-12-04 22:08:57 syranide I'm guessing \\nCount:\\n{count} 21590 2013-12-04 22:08:58 syranide right? 21591 2013-12-04 22:09:09 syranide now produces "Count:{count}" 21592 2013-12-04 22:10:00 lbljeffmo yep 21593 2013-12-04 22:10:23 lbljeffmo a [reduced for simplicity] real life example: 21594 2013-12-04 22:10:27 lbljeffmo 21595 2013-12-04 22:10:29 lbljeffmo {label} 21596 2013-12-04 22:10:42 lbljeffmo {' '}ago{' '} 21597 2013-12-04 22:10:43 lbljeffmo 21598 2013-12-04 22:10:50 lbljeffmo where label is presumably some time string 21599 2013-12-04 22:11:04 lbljeffmo (used to not have the explicit spaces) 21600 2013-12-04 22:11:20 syranide ah yes, you can get away with "{label} ago{' '}" in that case, but yes, it might not always be advisable 21601 2013-12-04 22:11:39 syranide hmm 21602 2013-12-04 22:11:51 lbljeffmo syranide: yup -- kinda unnecessary to have them on separate lines 21603 2013-12-04 22:12:05 syranide the issue here is that if label is a STRING, we want a space, if label is DOM, we don't want a space 21604 2013-12-04 22:12:28 lbljeffmo syranide: yea, but distinguishing that isn't something you can do at static analysis time 21605 2013-12-04 22:12:34 syranide yeah exactly 21606 2013-12-04 22:13:00 syranide and TBH, I'm not sure you actually want, it's better to understand the rules (then have them guess your intent) 21607 2013-12-04 22:13:08 syranide *than 21608 2013-12-04 22:13:18 lbljeffmo syranide: yep 21609 2013-12-04 22:13:21 lbljeffmo I agree 21610 2013-12-04 22:14:22 syranide but it does raise an interesting point, I mean "{}\\nA"/"A\\n{}" could 21611 2013-12-04 22:14:24 syranide ups 21612 2013-12-04 22:14:44 syranide could generate "{} A" and "A {}", but I'm not convinced you always want that 21613 2013-12-04 22:15:04 syranide actually, I'm pretty sure you don't always want when I think about it 21614 2013-12-04 22:15:09 syranide *that 21615 2013-12-04 22:16:57 lbljeffmo syranide: ok I'm at node summit and running out of batt, so gunna sign off for now. will be back on prob later and/or tomorrow 21616 2013-12-04 22:17:18 syranide lbljeffmo: ah take care, it's 23:00 here so I won't be up for long 21617 2013-12-04 22:37:30 benjamn balpert: looks like virtually all the populist time is spent in file reading 21618 2013-12-04 22:37:49 balpert benjamn: weird. have any idea how to make that faster? 21619 2013-12-04 22:38:00 benjamn it uses graceful-fs right now 21620 2013-12-04 22:38:09 benjamn tried adjusting the maximum number of open files 21621 2013-12-04 22:38:17 benjamn also tried just making it do sync reads 21622 2013-12-04 22:38:20 benjamn that shaved off 0.5s 21623 2013-12-04 22:38:27 benjamn down from 7.5s 21624 2013-12-04 22:40:17 tomocchino so, es6 classes.. benjamn petehunt balpert 21625 2013-12-04 22:40:23 balpert tomocchino: mm? 21626 2013-12-04 22:40:34 balpert I know almost nothing about es6 :) 21627 2013-12-04 22:40:40 tomocchino oh my! 21628 2013-12-04 22:40:49 tomocchino okay well we've been talking about this at FB for a while 21629 2013-12-04 22:40:55 tomocchino I think killing React.createClass (in its current form?) is the most important thing for us to focus on in the near term :D 21630 2013-12-04 22:41:24 tomocchino we've talked about moving to use ES6 classes, mixins, etc, but some things are really hard, like autobinding, etc 21631 2013-12-04 22:42:09 tomocchino jordan sebastian and zpao don't appear to be here, so we should probably wait to talk about this more I guess 21632 2013-12-04 22:42:29 cpojer_ are there proposals for how to solve autobinding? 21633 2013-12-04 22:42:32 petehunt uh 21634 2013-12-04 22:42:39 petehunt tomocchino: how many cooks do you want in the kitchen 21635 2013-12-04 22:43:13 petehunt because i can have an opinion but i don't feel super strongly and there are other people that know the tradeoffs a bit better than i do (lbljeffmo) 21636 2013-12-04 22:43:37 tomocchino lol petehunt, I guess just like, a couple of em? 21637 2013-12-04 22:43:37 tomocchino I'm just gonna rely on benjamn to solve all the things ;) 21638 2013-12-04 22:43:47 balpert cpojer_: my proposal was to get rid of autobinding but I think that's impractical :) 21639 2013-12-04 22:44:03 balpert cpojer_: https://github.com/facebook/react/pull/583 21640 2013-12-04 22:44:33 balpert tomocchino: what's the practical motivation for using ES6 classes? 21641 2013-12-04 22:45:05 benjamn balpert: it means, among other things, that there's a clearer "type" for each component class 21642 2013-12-04 22:45:20 tomocchino balpert: well one motivation that popped up this week was that we don't have a concept of statics, and things like propTypes, (and other stuff) actually should be accessible statically 21643 2013-12-04 22:45:26 tomocchino but yes 21644 2013-12-04 22:45:29 tomocchino what benjamn said 21645 2013-12-04 22:45:53 tomocchino another thing we've been talking about for a long time is killing the convenience constructor, which I think is a step in the right direction 21646 2013-12-04 22:46:04 cpojer_ another argument: the futureee 21647 2013-12-04 22:46:13 petehunt tomocchino: whoa 21648 2013-12-04 22:46:16 tomocchino JSX should just output `new ReactDOM.div(...)`, instead of invoking a function 21649 2013-12-04 22:46:26 petehunt tomocchino: ok now i'm in the kitchen :) 21650 2013-12-04 22:46:42 tomocchino lol, cook me something delicious :P 21651 2013-12-04 22:46:43 petehunt if we kill convenience constructor then our interface depends on object allocation 21652 2013-12-04 22:46:48 benjamn petehunt: you're a fan of convenience? 21653 2013-12-04 22:46:52 petehunt hellz yeah 21654 2013-12-04 22:46:59 tomocchino object pooling, yadda yadda yadda 21655 2013-12-04 22:46:59 tomocchino :P 21656 2013-12-04 22:47:12 petehunt yep 21657 2013-12-04 22:47:18 petehunt ::D 21658 2013-12-04 22:47:36 petehunt ACTION has a pipe dream of 0-allocation (and therefore 0-gc) react 21659 2013-12-04 22:47:37 tomocchino can't you just hack things to be custom inside your scroller demo crap? haha 21660 2013-12-04 22:47:59 cpojer_ hahaha 21661 2013-12-04 22:48:02 petehunt tomocchino: http://docs.angularjs.org/misc/contribute 21662 2013-12-04 22:48:32 tomocchino bahaha 21663 2013-12-04 22:49:13 petehunt what's custom today is standard tomorrow imo :) 21664 2013-12-04 22:49:33 balpert I must be missing what's funny 21665 2013-12-04 22:49:34 petehunt more seriously, what's your motivation for getting rid of convenience constructor? 21666 2013-12-04 22:49:42 cpojer_ tomocchino: am I right assuming that if we want ES6 classes we will either end up with our own class syntax (+ transformation) or something like Reactify(MyClass) ? 21667 2013-12-04 22:50:35 petehunt cpojer_: i think it's something like class MyThing extends mixin(ReactComponent, A, B, C) 21668 2013-12-04 22:50:45 cpojer_ which is very custom-y 21669 2013-12-04 22:51:43 cpojer_ I'm just saying, if "moving to ES6 classes" means "moving to our interpretation of ES6 classes" then we should drop the ES6 word in the discussion :) 21670 2013-12-04 22:51:50 tomocchino cpojer_: jordan's proposal is Reactify(MyClass), but sebastian thinks we can do without that step 21671 2013-12-04 22:52:54 cpojer_ My vote goes towards Rectify(MyClass) 21672 2013-12-04 22:53:03 SubtleGradient this.bound('methodName') 21673 2013-12-04 22:53:04 SubtleGradient done 21674 2013-12-04 22:53:07 cpojer_ :D sorry 21675 2013-12-04 22:53:22 cpojer_ SubtleGradient: what works in mootools doesn't work in real life 21676 2013-12-04 22:53:42 petehunt function MyComponent(props, state, incomingMessage) { return [newRenderedContent, newState]; } 21677 2013-12-04 22:53:54 SubtleGradient cpojer_: I forgot that was a MooTools thing. Actually, I think I remember having a very similar discussion in 2007 21678 2013-12-04 22:54:01 petehunt sorry, return PooledReturnValue(newRenderedContent, newState); 21679 2013-12-04 22:54:03 SubtleGradient lazy binding FTW 21680 2013-12-04 22:54:16 petehunt jeez, how many of you guys worked on mootools 21681 2013-12-04 22:54:22 petehunt i feel like everyone at fb worked on that 21682 2013-12-04 22:54:36 cpojer_ petehunt: 6 21683 2013-12-04 22:54:38 cpojer_ but that number will only grow 21684 2013-12-04 22:54:49 cpojer_ gotta catch 'em all 21685 2013-12-04 22:54:59 petehunt ? 21686 2013-12-04 22:55:01 benjamn … as they hear the call of the mooo 21687 2013-12-04 22:55:29 benjamn MooFast 21688 2013-12-04 22:55:49 benjamn ACTION regretted both of those jokes immediately 21689 2013-12-04 22:56:37 SubtleGradient ACTION considers creating a JSX compatibility layer for Prime 21690 2013-12-04 22:57:17 cpojer_ SubtleGradient: no one needs prime 21691 2013-12-04 22:57:35 SubtleGradient cpojer_: I haven't actually looked at it yet 21692 2013-12-04 22:57:47 cpojer_ why are you talking about it then? 21693 2013-12-04 22:57:54 SubtleGradient for humor? 21694 2013-12-04 22:58:57 cpojer_ doesn't compute 21695 2013-12-04 23:04:48 tomocchino anyway... 21696 2013-12-04 23:13:50 dnolen cool to see so many mootoolers in #reactjs :) 21697 2013-12-04 23:15:11 cpojer_ yea we gotta get jkassens into here 21698 2013-12-04 23:15:34 balpert dnolen: so did petehunt convince you over lunch? 21699 2013-12-04 23:16:55 dnolen balpert: still need to poke around some more but I think I'm starting to see a satisfactory approach that'll give us a more idiomatic functional interface 21700 2013-12-04 23:17:36 dnolen balpert: excited about benchmarking the pure approach (since that's what we do) vs. the default and seeing how that turns out 21701 2013-12-04 23:17:57 balpert dnolen: meaning, not using React's notion of a component at all? 21702 2013-12-04 23:18:00 dnolen balpert: even so I already got a bunch of people excited about it 21703 2013-12-04 23:18:13 petehunt dnolen: btw, this is the benchmark i mentioned earlier http://www.petehunt.net/react/tastejs/benchmark.html 21704 2013-12-04 23:18:33 dnolen balpert: I think we will need to wrap a component, but I think we can effectively hide the OOP-y bits 21705 2013-12-04 23:19:03 dnolen petehunt: thanks bookmarked 21706 2013-12-04 23:19:09 SubtleGradient petehunt: where's the code for that? 21707 2013-12-04 23:19:34 balpert dnolen: cool. as long as you're being sane and not mutating things in place then you could probably have a default shouldComponentUpdate function that just compares the previous props to the new props 21708 2013-12-04 23:19:39 petehunt SubtleGradient: somewhere in the webkit repo 21709 2013-12-04 23:19:49 balpert dnolen: that way parts that haven't changed don't need to rebuild their DOM trees 21710 2013-12-04 23:19:54 balpert (even virtually) 21711 2013-12-04 23:20:02 dnolen balpert: yes, we don't mutate things and we already have sensible equality for our immutable types 21712 2013-12-04 23:20:11 balpert cool 21713 2013-12-04 23:20:17 balpert I should really learn clojurescript 21714 2013-12-04 23:20:28 petehunt SubtleGradient: https://github.com/WebKitNix/webkitnix/tree/master/PerformanceTests/DoYouEvenBench 21715 2013-12-04 23:20:36 dnolen balpert: petehunt and I chatted a bit, it might be useful to make PersistentVector and PersistentHashMap extractable sans all the CLJS apis, so people can use it or there models 21716 2013-12-04 23:20:46 petehunt using ancient (buggy) version of our todomvc and react 21717 2013-12-04 23:21:02 dnolen balpert: then everyone could leverage immutable values 21718 2013-12-04 23:21:06 petehunt yeah i'm actually really excited to see how much performance you guys can get 21719 2013-12-04 23:21:10 balpert dnolen: is that different from mori? 21720 2013-12-04 23:21:29 dnolen balpert: it be just the 3 important data structures from Mori w/ possibly a BackBone.js API 21721 2013-12-04 23:21:29 balpert I started working through this clojurescript koans site which I found last week but I got stuck at this level http://clojurescriptkoans.com/#runtime-polymorphism/4 21722 2013-12-04 23:21:37 balpert dnolen: cool 21723 2013-12-04 23:22:02 petehunt dnolen: a pretty cool advertisement for clojurescript could be a react demo where you implement with cljs and js and animate particles or something and see how many particles you can do in each 21724 2013-12-04 23:22:35 dnolen petehunt: yes I think so, something fun to work on, and honestly the BackBone.js API for Mori data structures is pretty genious ;) 21725 2013-12-04 23:22:51 petehunt since your cljs impl will presumably be able to use the PureMixin by default, man oh man will that be fast 21726 2013-12-04 23:23:00 dnolen petehunt: yep 21727 2013-12-04 23:23:03 petehunt dnolen: (c) 2013 Pete Hunt. All Rights Reserved :) 21728 2013-12-04 23:23:06 dnolen haha 21729 2013-12-04 23:23:21 petehunt but yeah, i will look at doing that on the plane ride back 21730 2013-12-04 23:23:32 balpert petehunt: I'm sad that React doesn't use PureMixin by default 21731 2013-12-04 23:23:36 balpert we should have ImpureMixin instead 21732 2013-12-04 23:24:02 petehunt balpert: the beauty of it is you can be pretty ridiculous and it all works out 21733 2013-12-04 23:24:12 petehunt like for example, everyone using backbone today would be broken if we did that 21734 2013-12-04 23:25:17 balpert yeah :( 21735 2013-12-04 23:25:55 petehunt the big problem with mori + backbone is i cant come up with a cool name for it 21736 2013-12-04 23:26:25 vjeux moribon 21737 2013-12-04 23:26:41 balpert so what would this backbone-like API layer provide? 21738 2013-12-04 23:27:05 petehunt balpert: well, i'm not sure exactly what the API would look like 21739 2013-12-04 23:27:34 petehunt but basically modeling real-world problems with OOP/backbone is super easy 21740 2013-12-04 23:28:04 petehunt if we just ditched backbone's change tracking (easy) and were able to compare the previous version to the current version (harder) it would be okay i think 21741 2013-12-04 23:28:31 balpert dnolen: do you know what the status of typed cljs is? 21742 2013-12-04 23:29:37 dnolen balpert: in progress but behind typed clj - since that's what most people use. 21743 2013-12-04 23:29:57 dnolen gotta run, but will check the backlog later for Backbone api thoughts 21744 2013-12-04 23:30:48 balpert thanks 21745 2013-12-04 23:43:29 petehunt tomocchino: https://groups.google.com/forum/#!topic/reactjs/TLfUeVUGNaY 21746 2013-12-04 23:43:42 tomocchino yea yea yea, I saw that 21747 2013-12-04 23:43:47 tomocchino we've been talking about this for months 21748 2013-12-05 00:23:22 chenglou vjeux: haha am I the only one who got that joke 21749 2013-12-05 01:05:39 chenglou petehunt: just tried safari mobile in iPhone today. Wtf happened to the inertial scrolling?! 21750 2013-12-05 01:05:51 petehunt there are 2 modes 21751 2013-12-05 01:05:59 petehunt low intertia and high intertia, safari is set to low 21752 2013-12-05 01:09:33 chenglou petehunt: and I presume only safari? 21753 2013-12-05 01:09:36 chenglou and no way to change that? 21754 2013-12-05 01:11:38 petehunt naw 21755 2013-12-05 01:12:13 chenglou omfg 21756 2013-12-05 01:12:51 chenglou how come no one's complaining about it 21757 2013-12-05 01:22:02 balpert all web views 21758 2013-12-05 01:22:21 balpert if you do -webkit-overflow-scrolling: touch; then it'll be faster 21759 2013-12-05 01:22:29 balpert this has always been true 21760 2013-12-05 01:22:38 balpert and there are numerous references to it if you look around :) 21761 2013-12-05 01:24:47 chenglou balpert: I thought this was an iOS 7 change? 21762 2013-12-05 01:35:01 balpert chenglou: not if you're talking about what I think you're talking about 21763 2013-12-05 01:37:31 balpert vjeux: just found you in a phabricator comment thread :) 21764 2013-12-05 01:37:42 vjeux balpert: which one? 21765 2013-12-05 01:37:44 balpert https://secure.phabricator.com/T988 21766 2013-12-05 01:38:47 vjeux haha :p 21767 2013-12-05 01:39:19 vjeux you saw me at my best! 21768 2013-12-05 01:40:04 cpojer_ anyone know why phantomjs randomly breaks? 21769 2013-12-05 01:40:05 cpojer_ waitForJsCondition has been deprecated, use waitFor + jsCondition asserter instead. 21770 2013-12-05 01:40:05 cpojer_ Fatal error: phantomjs FAIL 21771 2013-12-05 01:40:08 cpojer_ can't run tests no more :( 21772 2013-12-05 01:40:49 balpert cpojer_: SubtleGradient has a PR for that 21773 2013-12-05 01:40:52 balpert I think 21774 2013-12-05 01:41:27 cpojer_ SubtleGradient: pingping 21775 2013-12-05 01:53:57 vjeux cpojer_: are we going to ship all of them with jsx by default? 21776 2013-12-05 01:56:11 petehunt hopefully not the real jsx tool! 21777 2013-12-05 01:56:15 petehunt (public jsx tool) 21778 2013-12-05 01:56:25 vjeux that would be sweet though :p 21779 2013-12-05 01:56:46 petehunt vjeux: no way 21780 2013-12-05 01:56:53 petehunt jsx --yolo perhaps 21781 2013-12-05 01:57:03 vjeux xD 21782 2013-12-05 01:57:06 petehunt vjeux: people are scared of jsx enough as it is, adding more transforms will only make it harder 21783 2013-12-05 02:01:46 vjeux :p 21784 2013-12-05 02:01:49 vjeux true true 21785 2013-12-05 02:02:12 vjeux but that can be a bonus 21786 2013-12-05 02:02:20 vjeux you use jsx, ohh looks like all the sweet es6 for free 21787 2013-12-05 02:23:53 cpojer_ :D 21788 2013-12-05 02:23:58 cpojer_ yeah only jsx-internal for now 21789 2013-12-05 04:49:21 zpao ACTION hopes nobody reads those commits too closely... you might come out confused 21790 2013-12-05 05:41:22 zpao ACTION thinks that might get a bit noisy... will give it some more time 21791 2013-12-05 07:30:55 balpert indeed those commits were a little confusing 21792 2013-12-05 07:31:01 balpert should the test "should warn when using deprecated non-static spec keys" be removed? 21793 2013-12-05 07:58:15 chenglou balpert: lol @ your comment on arrow functions 21794 2013-12-05 07:58:52 chenglou did they ever decide on a final syntax. Last time there were lots of inconsistencies 21795 2013-12-05 07:58:53 balpert they're so short! 21796 2013-12-05 08:00:01 chenglou like I think no argument is () => b 21797 2013-12-05 08:00:06 chenglou one argument is either (a) => b or a => b 21798 2013-12-05 08:00:20 chenglou 2+ is (a, b) => c 21799 2013-12-05 08:00:47 chenglou then returning an object on multiple lines is a => { {obj} } 21800 2013-12-05 15:26:37 hojberg what is up with the weird naming of fbtransforms/visitors.js? 21801 2013-12-05 16:03:40 syranide hojberg: what do you mean? 21802 2013-12-05 16:04:02 syranide I'm assuming it's called that because it uses the visitor pattern 21803 2013-12-05 16:23:42 hojberg oh i am not familiar with that 21804 2013-12-05 16:23:51 hojberg http://en.wikipedia.org/wiki/Visitor_pattern 21805 2013-12-05 16:23:52 hojberg interesting 21806 2013-12-05 16:24:16 syranide hojberg: commonly used when dealing with ASTs, i.e., parsed source code 21807 2013-12-05 16:24:46 hojberg cool 21808 2013-12-05 17:18:21 zpao balpert: yea, that test should probably be removed for now. i think we were considering adding them back into statics at some point 21809 2013-12-05 17:18:41 zpao i missed a lot of the discussion there 21810 2013-12-05 17:18:55 balpert cool 21811 2013-12-05 17:22:20 sspi statics seem kinda vague so far 21812 2013-12-05 17:22:31 sspi to me at least :) 21813 2013-12-05 17:31:52 zpao it makes things kinda more like typical classes 21814 2013-12-05 17:32:03 zpao Component.staticMethod 21815 2013-12-05 17:32:29 zpao right now that's impossible outside of modifying Component after React.createClass 21816 2013-12-05 17:32:34 sspi yeah, I'm now reading into it... 21817 2013-12-05 17:33:56 syranide ah zpao hadn't realized it was failing, do you know what's wrong with grunt build? I no longer get a list of errors, I get some huge JSON output? 21818 2013-12-05 17:34:18 zpao syranide: rebase, that should be fixed 21819 2013-12-05 17:34:24 syranide ah 21820 2013-12-05 17:35:06 zpao i don't blame you for missing it in that JSON... you would need to be a robot to know 21821 2013-12-05 17:35:29 zpao do you see the travis results on github or is that just admins? 21822 2013-12-05 17:36:03 syranide zpao: I see it, I'm looking into this, it was passing last time I checked, so I'll see what's going on 21823 2013-12-05 17:36:24 sspi not a fan of this statics approach, think we can do better when we refactor React.createClass - probably harder to implement though 21824 2013-12-05 17:37:28 zpao yea, the plan is to come back to the whole discussion when we take another pass at createClass and figure out if es6 classes make sense 21825 2013-12-05 17:37:41 zpao not before the next release though 21826 2013-12-05 17:38:27 zpao speaking of which... that's going to be an interesting one 21827 2013-12-05 17:38:45 dnolen hrm, so I'm realizing that having to write a wrapper component is kind of annoying if you already know you're dealing w/ immutable data 21828 2013-12-05 17:39:06 dnolen instead it would be nice if we could configure all the generated DOM components with our own mixin 21829 2013-12-05 17:39:28 dnolen then we don't have to futz around with a wrapper component 21830 2013-12-05 17:40:44 dnolen then we guaranteed to always get blazing speed 21831 2013-12-05 17:41:14 sspi zpao: so is the idea now to add a es6 transpiler within React? 21832 2013-12-05 17:41:55 zpao sspi: start with internal. then work our way out. it'll be optional if we add it to bin/jsx 21833 2013-12-05 17:49:27 syranide aha zpao it's not actually failing, it's relying on '' actually being set as a value in the DOM (and when it should be removed, it isnt because it never existed) 21834 2013-12-05 17:50:25 zpao if you change it to a non-empty string it passes? 21835 2013-12-05 17:50:39 syranide zpao: nope, I spoke to quickly :) 21836 2013-12-05 17:51:45 dnolen but I guess React is flexible enough that we can just configure such DOM components ourselves :), ReactDom.js is pretty trivial to reimplement 21837 2013-12-05 18:06:25 syranide zpao: don't quote me on this, but I think it's the test that is broken, and was broken (it simply didn't trigger), node[propName] is always undefined (which is what deleteValueForProperty checks for) 21838 2013-12-05 18:07:28 zpao o_O 21839 2013-12-05 18:07:31 zpao what if we didn't use value 21840 2013-12-05 18:07:36 syranide console.log(stub.getDOMNode().value); 21841 2013-12-05 18:07:40 syranide also prints undefined 21842 2013-12-05 18:07:42 cpojer_ meh, running the tests is still not working for me :( 21843 2013-12-05 18:07:44 syranide zpao: ? 21844 2013-12-05 18:07:44 zpao since that's special already 21845 2013-12-05 18:08:21 zpao cpojer_: what's wrong? 21846 2013-12-05 18:08:30 cpojer_ waitForJsCondition has been deprecated, use waitFor + jsCondition asserter instead. 21847 2013-12-05 18:08:31 cpojer_ Fatal error: phantomjs FAIL 21848 2013-12-05 18:08:36 cpojer_ started happening to me yesterday 21849 2013-12-05 18:08:58 cpojer_ I tried to cherry pick subtleGradient's PR from yesterday but it didn't really help 21850 2013-12-05 18:09:09 cpojer_ zpao: also see https://github.com/facebook/react/pull/637 - the travis build failed too 21851 2013-12-05 18:10:16 syranide zpao: not sure if I understand what you mean, you can't define a "new property", React throws something about unsupported property then (or something like that) 21852 2013-12-05 18:10:57 balpert zpao: next release will be interesting how? 21853 2013-12-05 18:11:26 balpert dnolen: what wrapper component is annoying you? 21854 2013-12-05 18:11:58 dnolen balpert: I just don't like the fact that we need to make a component at all 21855 2013-12-05 18:12:01 syranide zpao: oh wait, I know the issue I think 21856 2013-12-05 18:12:33 dnolen balpert: all CLJS values are pure - so it seems to the correct solution is just make a library that does what ReactDOM.js does but emit DOM nodes that mixing Pure 21857 2013-12-05 18:12:58 balpert dnolen: so are you not following what you started here? https://gist.github.com/swannodette/7763911 21858 2013-12-05 18:13:15 dnolen er mixin something like PureRenderMixin, but that understands how to do the equality checks on our data 21859 2013-12-05 18:13:31 syranide zpao: var stub = ReactTestUtils.renderIntoDocument(
    ); 21860 2013-12-05 18:13:32 syranide console.log(stub.getDOMNode().value); 21861 2013-12-05 18:13:35 syranide prints "undefined" 21862 2013-12-05 18:13:37 balpert so PureRenderMixin helps React avoid building the virtual DOM tree a second time 21863 2013-12-05 18:13:37 syranide that's the problem 21864 2013-12-05 18:13:38 dnolen balpert: we are going to follow that, but we're not going to use the standard DOM components because they use a bad default 21865 2013-12-05 18:13:41 balpert be back in a bit 21866 2013-12-05 18:15:27 cpojer_ SubtleGradient: ping 21867 2013-12-05 18:15:36 SubtleGradient cpojer_: pong 21868 2013-12-05 18:15:47 cpojer_ hey, you know anything about why phantomjs fails for me? 21869 2013-12-05 18:16:16 zpao cpojer_: fwiw, that shouldn't cause the tests not to run. it's working for me. unless there's been a phantom update i don't know about 21870 2013-12-05 18:16:43 cpojer_ zpao: it fails right after that 21871 2013-12-05 18:16:51 zpao balpert: writing up why now. you'll see it when it's posted 21872 2013-12-05 18:17:05 zpao cpojer_: i see that, just saying it shouldn't. i also see that warning and my tests run 21873 2013-12-05 18:17:12 cpojer_ oh ok 21874 2013-12-05 18:17:35 zpao (that's why asked about npm install, maybe there was a package dependency issue) 21875 2013-12-05 18:17:42 zpao but if it failed on travis too... 21876 2013-12-05 18:17:54 zpao syranide: hmm, yea that test is weird 21877 2013-12-05 18:18:27 zpao syranide: curious that it passed befor ethough 21878 2013-12-05 18:18:35 syranide zpao: however, it can easily be fixed though 21879 2013-12-05 18:19:04 syranide zpao: it passed before because it didn't actually matter what nodeValue was, it was undefined = undefined (no set), undefined = undefined (we delete anyway) 21880 2013-12-05 18:19:07 syranide hence passing 21881 2013-12-05 18:19:29 zpao oh so we always modified before, right 21882 2013-12-05 18:19:38 syranide yep 21883 2013-12-05 18:19:59 zpao we should count the lookups too... 21884 2013-12-05 18:20:22 zpao alright, then just fix the test. thanks for looking at it more closely than i did :) 21885 2013-12-05 18:21:19 SubtleGradient cpojer_: You can also use chromedriver instead if you like, but you'll need to run each grunt task manually 21886 2013-12-05 18:21:48 cpojer_ why is it broken? 21887 2013-12-05 18:21:50 zpao cpojer_: oh do you have phonatomjs installed outside of npm? 21888 2013-12-05 18:22:06 cpojer_ probably not 21889 2013-12-05 18:22:13 cpojer_ but the tests ran successfully a couple times yesterday 21890 2013-12-05 18:23:21 zpao cpojer_: and if you checkout master again will they run fine? 21891 2013-12-05 18:23:56 SubtleGradient cpojer_: What happens when you run `grunt --verbose --debug 9 --stack webdriver-phantomjs` ? 21892 2013-12-05 18:23:57 zpao it kinda sounds like the server isn't actually starting 21893 2013-12-05 18:25:11 syranide zpao: I can fix it, but my solution is to hardcode nodeValue='' instead of node.value ... and that solves it 21894 2013-12-05 18:25:32 syranide (i.e, the initial value) 21895 2013-12-05 18:28:31 cpojer_ zpao: crap, I broke it I guess 21896 2013-12-05 18:28:35 cpojer_ don't know how though 21897 2013-12-05 18:29:28 zpao cpojer_: SubtleGradient: https://gist.github.com/zpao/486f38d45be8d1615234 21898 2013-12-05 18:29:30 balpert dnolen: shouldComponentUpdate/PureRenderMixin prevents rebuilding the virtual DOM for a component 21899 2013-12-05 18:29:32 balpert raw DOM components always diff themselves before talking to the real DOM 21900 2013-12-05 18:29:44 balpert so I'm not sure if I'm understanding you right 21901 2013-12-05 18:30:11 zpao cpojer_: try opening test/index.html in your browser 21902 2013-12-05 18:30:24 SubtleGradient zpao: when and how do you get that? 21903 2013-12-05 18:30:38 cpojer_ oh wow 21904 2013-12-05 18:30:43 cpojer_ it crashes chrome 21905 2013-12-05 18:30:51 zpao with cpojer_'s PR applied and grunt test --verbose --debug 9 21906 2013-12-05 18:31:01 SubtleGradient which PR? 21907 2013-12-05 18:31:13 zpao 637 21908 2013-12-05 18:31:28 zpao (if you use hub, `hub co https://github.com/facebook/react/pull/637` 21909 2013-12-05 18:31:29 cpojer_ I suppose I have a bug in there :) 21910 2013-12-05 18:31:35 dnolen balpert: oh, hmm right I suppose we need to make a custom component to hold the props right above the DOM components 21911 2013-12-05 18:31:46 zpao cpojer_: doesn't crash firefox... just sayin ;) 21912 2013-12-05 18:31:49 dnolen balpert: after talking to petehunt, I realized we just don't need setState 21913 2013-12-05 18:32:02 balpert dnolen: well if you never use it it doesn't exist :) 21914 2013-12-05 18:32:16 zpao cpojer_: InternalError: allocation size overflow 21915 2013-12-05 18:32:39 cpojer_ wow 21916 2013-12-05 18:32:45 syranide zpao: https://gist.github.com/syranide/386d47cd678008648e61 acceptable fix, or what do you suggest? 21917 2013-12-05 18:36:29 zpao cpojer_: i'm going to guess it's because of ex 21918 2013-12-05 18:36:45 cpojer_ yes my guess too 21919 2013-12-05 18:37:02 cpojer_ I broke it :) 21920 2013-12-05 18:37:13 zpao args.length - 1 21921 2013-12-05 18:37:22 SubtleGradient so what exactly is breaking where? 21922 2013-12-05 18:37:22 zpao should just be args.length i thnk 21923 2013-12-05 18:37:51 zpao SubtleGradient: nothing testing related. just not obvious that phantom crashes 21924 2013-12-05 18:38:18 SubtleGradient zpao: ahhh. I can make that more obvious perhaps 21925 2013-12-05 18:39:13 zpao if it's too much work, then don't worry about it. but if it's easy, it would help. though we know that's the problem now so it'll be on hte list of things we think about 21926 2013-12-05 18:39:58 SubtleGradient https://github.com/facebook/react/issues/638 21927 2013-12-05 18:40:02 SubtleGradient It's pretty easy 21928 2013-12-05 18:40:07 zpao syranide: i'm fine with that fix since it comes with the comment 21929 2013-12-05 18:40:23 syranide zpao: same PR or separate PR? 21930 2013-12-05 18:40:27 zpao same 21931 2013-12-05 18:40:46 zpao will have other people take a look at it. i wouldn't be surprised if this is only true in a real DOM but with jsdom, value actually was '' 21932 2013-12-05 18:40:55 zpao node.value that is 21933 2013-12-05 18:41:20 syranide yeah, probably 21934 2013-12-05 18:41:23 SubtleGradient zpao: where do I get `hub`? 21935 2013-12-05 18:41:23 zpao ACTION hates jsdom 21936 2013-12-05 18:41:30 zpao http://hub.github.com/ 21937 2013-12-05 18:41:55 zpao the suggest aliasing to git but i don't like surprises 21938 2013-12-05 18:42:01 vjeux_ i'm working on an article about react performance for perfplanet and i'm nearly done. I'd like your feedback if you have the time :) http://blog.vjeux.com/2001/javascript/react-performance.html password: 1234 21939 2013-12-05 18:42:06 cpojer_ SubtleGradient: after all this time you don't know about hub? :P 21940 2013-12-05 18:42:15 cpojer_ zpao: I found aliasing to be a bad thing 21941 2013-12-05 18:42:17 cpojer_ with zsh 21942 2013-12-05 18:42:23 SubtleGradient :'( 21943 2013-12-05 18:42:31 cpojer_ so I just have hub there and most of the time I use it for hub browse or hub remote add 21944 2013-12-05 18:42:42 cpojer_ SubtleGradient: you were one of the first github users! 21945 2013-12-05 18:42:45 zpao i mostly just use hub checkout PR or hub browse 21946 2013-12-05 18:43:05 cpojer_ SubtleGradient: your user id is #4117 21947 2013-12-05 18:43:09 syranide zpao: anyway, it passes all tests locally now 21948 2013-12-05 18:43:13 SubtleGradient ^_^ 21949 2013-12-05 18:43:15 zpao syranide: ? 21950 2013-12-05 18:43:31 cpojer_ SubtleGradient: mine is 13352! 21951 2013-12-05 18:43:34 zpao cpojer_: how do you get user id? i was in there early too 21952 2013-12-05 18:43:41 balpert I'm 6820 21953 2013-12-05 18:43:45 cpojer_ zpao: http://caius.github.io/github_id/ 21954 2013-12-05 18:43:46 balpert zpao: you're 8445 https://api.github.com/users/zpao 21955 2013-12-05 18:43:56 cpojer_ we were all very early in 2008! 21956 2013-12-05 18:44:07 zpao yea, beta yo 21957 2013-12-05 18:44:10 SubtleGradient I win 21958 2013-12-05 18:44:29 zpao i exceeded my grandfathered private repos though so started paying 21959 2013-12-05 18:44:34 balpert "site_admin": false, 21960 2013-12-05 18:44:47 SubtleGradient ACTION strokes his wizened gray beard 21961 2013-12-05 18:45:10 cpojer_ I have a student account until 2015 :D 21962 2013-12-05 18:45:12 SubtleGradient Still never actually paid them any money 21963 2013-12-05 18:45:29 zpao balpert: that's like our "is_employee" (which it seems we're smart enough not to expose on graph.facebook.com 21964 2013-12-05 18:45:31 cpojer_ I just wish phabricator was the standard, PRs are so inefficient 21965 2013-12-05 18:45:40 SubtleGradient Sencha uses them though, so I at least got to use them a bunch 21966 2013-12-05 18:45:47 balpert cpojer_: right? 21967 2013-12-05 18:46:01 balpert phabricator.reactjs.org 21968 2013-12-05 18:46:02 zpao PRs are *slowly* getting better. they just added expanded context and soft wrapping for text 21969 2013-12-05 18:46:16 SubtleGradient Cloudera also uses them, except the enterprise edition 21970 2013-12-05 18:46:21 dnolen balpert: does this look right? https://gist.github.com/swannodette/7810960 21971 2013-12-05 18:46:22 cpojer_ balpert: I was seriously checking to see if it exists 21972 2013-12-05 18:46:22 balpert yeah, very slowly 21973 2013-12-05 18:46:35 cpojer_ crazy slowly 21974 2013-12-05 18:46:40 cpojer_ just make it phabricator :P 21975 2013-12-05 18:46:43 zpao cpojer_: we have reviews.facebook.net 21976 2013-12-05 18:46:44 balpert dnolen: yup, however your equals() works 21977 2013-12-05 18:46:54 dnolen balpert: sweet thx 21978 2013-12-05 18:47:13 balpert dnolen: er, if that's a mixin you just want Pure = {...}, no createClass 21979 2013-12-05 18:47:16 cpojer_ I don't know, posting a code comment on github seems heavyweight to me, I can't really say why 21980 2013-12-05 18:47:21 SubtleGradient I'm TextMate user #2346 Registered 25 August 2005 21981 2013-12-05 18:47:22 cpojer_ but I understand it is important for the adoption of React 21982 2013-12-05 18:47:38 cpojer_ in 2005 I couldn't even walk 21983 2013-12-05 18:47:41 cpojer_ you are old! 21984 2013-12-05 18:47:55 dnolen balpert: I don't think we need to bother with a mixin, everyone will just use Pure 21985 2013-12-05 18:48:05 SubtleGradient I started coding HTML with IE 3 on Windows 3.11 21986 2013-12-05 18:48:13 SubtleGradient in 1997 21987 2013-12-05 18:48:21 zpao cpojer_: i almost said "wait really?" and then i realized that doesn't add up *at all* 21988 2013-12-05 18:48:24 zpao ACTION facepalms 21989 2013-12-05 18:48:29 SubtleGradient ^_^ 21990 2013-12-05 18:48:33 cpojer_ haha 21991 2013-12-05 18:48:37 SubtleGradient math is hard, let's go shopping! 21992 2013-12-05 18:48:47 cpojer_ I'm a late learner 21993 2013-12-05 18:49:11 SubtleGradient I always felt like I was always catching up. Now I find out I was on the bleeding edge 21994 2013-12-05 18:49:50 zpao balpert: can you rebase https://github.com/facebook/react/pull/558 when you get a chance? 21995 2013-12-05 18:50:09 cpojer_ zpao: actually I'm almost 25 :) 21996 2013-12-05 18:50:15 balpert cpojer_: I have http://phabricator.benalpert.com/D61?vs=169&id=172&whitespace=ignore-all#toc so that I can be sane at least when diffing stuff 21997 2013-12-05 18:51:19 balpert zpao: done 21998 2013-12-05 18:51:46 cpojer_ balpert: do you pull in data from github or do you use that before sending a PR? 21999 2013-12-05 18:51:59 balpert cpojer_: that's me manually copying patchfiles around 22000 2013-12-05 18:52:08 cpojer_ joy! 22001 2013-12-05 18:52:19 balpert cpojer_: hence my bad attempts which you can see in the comments at the top 22002 2013-12-05 18:52:33 cpojer_ :D 22003 2013-12-05 18:53:00 cpojer_ now I get it 22004 2013-12-05 18:53:12 cpojer_ zpao: so clowny 22005 2013-12-05 18:53:14 balpert cpojer_: I know how to use phab in real life, I promise 22006 2013-12-05 18:53:19 cpojer_ ex uses ex if it encounters an error in formatting 22007 2013-12-05 18:53:24 cpojer_ so if ex is broken, infinite loop 22008 2013-12-05 18:53:42 cpojer_ balpert: no worries, as long as your code is great! :) 22009 2013-12-05 18:58:25 balpert zpao: can I start sending you reviews on reviews.facebook.net? :) 22010 2013-12-05 18:59:21 cpojer_ balpert: do you use phabricator at Khan Academy? 22011 2013-12-05 18:59:25 balpert cpojer_: yup 22012 2013-12-05 18:59:29 cpojer_ awesome! 22013 2013-12-05 18:59:40 balpert I agree 22014 2013-12-05 18:59:43 balpert it's awesome :) 22015 2013-12-05 19:02:39 dnolen balpert: oh hrm, so that's not right - I get an error about needing to implement render? 22016 2013-12-05 19:03:00 balpert sorry, see my message from 10:47 22017 2013-12-05 19:03:01 balpert "er, if that's a mixin you just want Pure = {...}, no createClass" 22018 2013-12-05 19:04:04 dnolen balpert: but how do I mix it into some generic component? I don't want to supply any implementations of anything else 22019 2013-12-05 19:04:26 balpert I think I'm still not quite sure what you want your final API to look like 22020 2013-12-05 19:04:36 dnolen balpert: users should just be able do (Pure. props children) just like React.DOM.div 22021 2013-12-05 19:04:51 dnolen er Pure(props, children) 22022 2013-12-05 19:05:05 balpert where the props are DOM attributes? 22023 2013-12-05 19:05:26 dnolen balpert: no just an immutable value so the tree can be traversed quicker 22024 2013-12-05 19:05:43 balpert dnolen: so then where do the DOM attributes come from? 22025 2013-12-05 19:06:41 dnolen balpert: from values in props of course - but we just want to use functions like in my first React CLJS gist 22026 2013-12-05 19:07:29 dnolen balpert: I guess I can supply a render that just returns children? 22027 2013-12-05 19:07:46 balpert ahh 22028 2013-12-05 19:07:50 balpert maybe I see what you want 22029 2013-12-05 19:08:15 dnolen balpert: https://gist.github.com/swannodette/7810960 22030 2013-12-05 19:09:05 dnolen balpert: in our world we will never need state, we just need props - and we can rerender from the root 22031 2013-12-05 19:09:07 balpert you want Pure(data,
    ... (stuff with data) ...
    ) to turn into the div but only build the tree if data has changed 22032 2013-12-05 19:09:21 dnolen because few values will have change 22033 2013-12-05 19:09:23 balpert is that right? 22034 2013-12-05 19:09:32 dnolen exactly 22035 2013-12-05 19:09:46 balpert okay 22036 2013-12-05 19:09:49 dnolen data is just a hook for us to know whether we actually need to re-render 22037 2013-12-05 19:10:21 balpert well in order to make the data tree construction lazy you'll need to pass a function 22038 2013-12-05 19:10:41 balpert but if you write Pure(data, function() { return
    ...
    ; }) 22039 2013-12-05 19:10:52 balpert then you can have render return this.props.children(); 22040 2013-12-05 19:11:08 balpert that sounds a little weird to me (having children be a function) but it should work fine 22041 2013-12-05 19:11:41 dnolen balpert: whoa, actually that's awesome :) lazy tree construction 22042 2013-12-05 19:11:53 dnolen balpert: so children is always stored in props? 22043 2013-12-05 19:11:56 balpert yes 22044 2013-12-05 19:12:00 balpert oh 22045 2013-12-05 19:12:09 balpert yeah, so you want to not compare the children key then 22046 2013-12-05 19:12:30 dnolen hmm ... ok this is problem 22047 2013-12-05 19:12:35 dnolen you all actually mutate props yourself 22048 2013-12-05 19:12:42 balpert yeah… 22049 2013-12-05 19:13:10 balpert you could make a JS function wrapper around the Pure component 22050 2013-12-05 19:13:26 dnolen balpert: eh, we can just wrap in a js-obj and store our value under a key in for state comparison 22051 2013-12-05 19:13:29 balpert function PureFn(data, func) { return PureFn({data: data}, func) } 22052 2013-12-05 19:13:30 balpert right 22053 2013-12-05 19:13:53 dnolen balpert: thanks this is *super* helpful 22054 2013-12-05 19:15:09 balpert let me know if you run into anything weird 22055 2013-12-05 19:15:37 dnolen balpert: https://gist.github.com/swannodette/7810960 22056 2013-12-05 19:15:39 dnolen look ok? 22057 2013-12-05 19:16:06 balpert yup 22058 2013-12-05 19:24:47 dnolen balpert: must children always be an array? 22059 2013-12-05 19:25:01 balpert dnolen: no, can be a single component 22060 2013-12-05 19:25:07 dnolen balpert: excellent 22061 2013-12-05 19:25:26 cpojer_ haha I'm tempted to alias arc="grunt" on my local machine 22062 2013-12-05 19:25:33 cpojer_ grunt is so hard to type 22063 2013-12-05 19:25:36 balpert grunt diff 22064 2013-12-05 19:25:39 balpert grunt land 22065 2013-12-05 19:25:42 cpojer_ I need two hands for it 22066 2013-12-05 19:26:01 cpojer_ also, in german there is "grund" (means "reason") so I mistype every once in a while 22067 2013-12-05 19:26:36 zpao cpojer_: i've considered doing that too. 22068 2013-12-05 19:27:04 cpojer_ any reason why esnext wouldn't work for .jshintrc? 22069 2013-12-05 19:27:08 cpojer_ still getting the same errors 22070 2013-12-05 19:27:26 zpao cpojer_: there's another .jshint in src 22071 2013-12-05 19:27:44 cpojer_ of course :D 22072 2013-12-05 19:27:51 zpao since we have slightly different rules for our real code vs the rest of the package 22073 2013-12-05 19:27:55 cpojer_ nice, it is buggy 22074 2013-12-05 19:28:02 zpao not confusing at all :/ 22075 2013-12-05 19:28:06 cpojer_ return classes.filter((className) => !!className).join(' '); 22076 2013-12-05 19:28:13 cpojer_ tells me "className is not defined" 22077 2013-12-05 19:28:28 zpao cpojer_: i just updated the jshint package, so try rebasing and npm install 22078 2013-12-05 19:28:37 zpao not sure that it will help, but it might 22079 2013-12-05 19:28:38 cpojer_ ohh 22080 2013-12-05 19:28:40 cpojer_ hopefully 22081 2013-12-05 19:29:48 cpojer_ makes me so happy to see ~ used for all the dependencies 22082 2013-12-05 19:29:55 cpojer_ it is the only one that you can actually use 22083 2013-12-05 19:30:09 cpojer_ except for direct version numbers of course 22084 2013-12-05 19:30:29 zpao i think we've had some other ones in there too 22085 2013-12-05 19:30:41 zpao >= because phantom fucked up at one point 22086 2013-12-05 19:30:51 dnolen balpert: ok now i get "Each child in an array should have a unique "key" prop. Check the render method of undefined." 22087 2013-12-05 19:30:55 zpao i think we even had >= and <= for the same rule 22088 2013-12-05 19:31:13 cpojer_ ok I suppose this is what we need: https://github.com/jshint/jshint/pull/1386 22089 2013-12-05 19:31:15 balpert dnolen: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children 22090 2013-12-05 19:31:32 cpojer_ is there any way we can get this in? Or, are we ok with lint failing for a short while in this case? 22091 2013-12-05 19:32:05 dnolen balpert: yes but I don't really understand that I don't have any dynamic children? 22092 2013-12-05 19:32:13 balpert ahh 22093 2013-12-05 19:32:17 balpert hmm 22094 2013-12-05 19:32:55 zpao cpojer_: its fine 22095 2013-12-05 19:33:04 cpojer_ great :) 22096 2013-12-05 19:33:16 balpert dnolen: when you have an array of static children you need to splat them in the React.DOM.div call to make it not complain 22097 2013-12-05 19:33:50 balpert like React.DOM.div.apply(React.DOM, [props].concat(children)] 22098 2013-12-05 19:34:52 balpert this is a little weird 22099 2013-12-05 19:39:43 balpert dnolen: if you're building children from a dynamic array then we want you to put a key property; we avoid warning for static DOM structure by passing the children as multiple arguments and warning on key-less array elements 22100 2013-12-05 19:39:46 balpert let me know if that makes sense 22101 2013-12-05 19:40:31 dnolen oh so I won't need to wrap in an array for children? 22102 2013-12-05 19:40:41 dnolen first arg is props, all the rest are children? 22103 2013-12-05 19:40:45 balpert right 22104 2013-12-05 19:46:11 dnolen hrm, do you all cache children or something? it seems to me that this.props.children doesn't change when we re-render 22105 2013-12-05 19:46:42 balpert I don't think so 22106 2013-12-05 19:52:25 dnolen balpert: ok I see what's going on, for some reason the click handlers are stale when we render 22107 2013-12-05 19:53:25 dnolen actually I see the problem ... thinking 22108 2013-12-05 19:53:32 dnolen (problem on my end) 22109 2013-12-05 20:29:07 cpojer_ zpao: do we have breaking api changes from 0.5.1 to master? 22110 2013-12-05 20:32:04 balpert cpojer_: lifecycle methods have context now and no rootNode 22111 2013-12-05 20:34:24 zpao cpojer_: yes 22112 2013-12-05 20:35:05 cpojer_ https://github.com/paulshen/react-bench/blob/gh-pages/tests.js anything that is used in there? :) 22113 2013-12-05 20:38:57 zpao React.unmountAndReleaseReactRootNode 22114 2013-12-05 20:39:08 zpao React.unmountComponentAtNode 22115 2013-12-05 20:39:33 zpao (the first was deprecated in 0.5 and is actually gone now) 22116 2013-12-05 20:39:43 zpao (the 2nd there is what it is now) 22117 2013-12-05 20:39:43 cpojer_ cool thanks 22118 2013-12-05 20:42:25 dnolen balpert: got it sorted, React is fucking amazing! lazy-tree construction and pure values working over here 22119 2013-12-05 20:42:35 balpert dnolen: awesome 22120 2013-12-05 20:43:58 dnolen balpert: I suspect this might scream on the TodoMVC benchmark 22121 2013-12-05 20:45:18 zpao http://www.petehunt.net/react/tastejs/benchmark.html 22122 2013-12-05 20:45:33 zpao dnolen: ^^ it does pretty well ;) 22123 2013-12-05 20:47:15 dnolen zpao: yes, but I think with the pure approach we're using it could be faster? unless of course the pure approach is being used in that benchmark already. 22124 2013-12-05 20:48:00 zpao i don't think it is. i think the only thing we're doing there is short circuiting re-renders with shouldComponentUpdate 22125 2013-12-05 20:48:40 zpao well, which if you're talking about hte PureWhateverMixin, is pretty much the same. 22126 2013-12-05 20:48:57 zpao i haven't been following all of your conversations so i'm probably missing something 22127 2013-12-05 20:50:34 dnolen zpao: yeah so our component approach should be even faster than pure mixin, we can check identity, we don't even need to bother w/ shallowEquals 22128 2013-12-05 20:51:32 zpao well i look forward to seeing it :) 22129 2013-12-05 20:53:40 Schtive Just wondering: Why is backbone faster then React? My guess would be that Backbone gives you the choice to be really close to the vanilla without too many 'layers'. 22130 2013-12-05 20:54:11 zpao yea, i think that's probably why 22131 2013-12-05 20:56:35 zpao Schtive: i'm a bit wary of some of these numbers though. like vanillajs adding 200 times taking 8x longer than backbone 22132 2013-12-05 20:57:31 zpao so, grain of salt and all that 22133 2013-12-05 21:05:54 Schtive I haven't played with React yet but it really looks promising. When are you guys planning to hit version 1? I must admit that it's the only reason why I haven't built anything with it yet. 22134 2013-12-05 21:10:30 cpojer_ Schtive: not a good reason :) 22135 2013-12-05 21:11:24 cpojer_ balpert: you like fat arrow? https://github.com/facebook/react/pull/637/files#diff-5 :) 22136 2013-12-05 21:13:10 balpert cpojer_: it's beautiful 22137 2013-12-05 21:13:17 cpojer_ truly is 22138 2013-12-05 21:13:21 balpert for the shorter syntax, not necessarily the binding semantics 22139 2013-12-05 21:13:32 cpojer_ I wish I could omit the braces for single arguments 22140 2013-12-05 21:13:36 cpojer_ but our coding style says no :( 22141 2013-12-05 21:13:54 cpojer_ balpert: did you ever use Scala? 22142 2013-12-05 21:14:00 cpojer_ so beautiful! 22143 2013-12-05 21:14:03 cpojer_ if you are doing it right :D 22144 2013-12-05 21:14:22 balpert cpojer_: no, I've been put off by the slow compile times and it sounds sort of complicated in general 22145 2013-12-05 21:14:40 cpojer_ oh yea, the compile times suck 22146 2013-12-05 21:14:41 balpert cpojer_: http://overwatering.org/blog/2013/12/scala-1-star-would-not-program-again/ 22147 2013-12-05 21:15:01 balpert cpojer_: I am a huge fan of expressive type systems though 22148 2013-12-05 21:15:07 balpert cpojer_: I'm excited about Rust 22149 2013-12-05 21:16:16 cpojer_ balpert: interesting post, although it seems most of it comes from using it wrong 22150 2013-12-05 21:16:28 balpert could be 22151 2013-12-05 21:16:30 cpojer_ the Play framework has incremental compilation for testing 22152 2013-12-05 21:16:35 cpojer_ it is really good 22153 2013-12-05 21:16:43 cpojer_ and apparently it scales quite well :) 22154 2013-12-05 21:23:35 dnolen the code for petehunt benchmark isn't available somewhere is it? 22155 2013-12-05 21:26:09 balpert dnolen: it's in the webkit source tree at http://trac.webkit.org/browser/trunk/PerformanceTests/DoYouEvenBench, not sure if it's available elsewhere 22156 2013-12-05 21:27:49 dnolen balpert: cool thanks :) Will try to put together a benchmark w/ CLJS+React 22157 2013-12-05 21:27:58 balpert dnolen: looking forward to it :) 22158 2013-12-05 21:31:55 balpert "func" and "thunk" rhyme 22159 2013-12-05 21:37:40 sspi ACTION is excited - he's going to fly to SFO on Saturday for an interview 22160 2013-12-05 21:38:04 balpert sspi: how long are you here? 22161 2013-12-05 21:38:31 balpert also, is your events stuff ready for review again? let me know when it is 22162 2013-12-05 21:38:56 sspi will arrive Saturday early afternoon, will leave Tuesday afternoon 22163 2013-12-05 21:39:17 sspi balpert: I will do another check :) 22164 2013-12-05 21:39:30 sspi will let you know in a few minutes 22165 2013-12-05 21:41:45 SubtleGradient zpao: can I get a +1? https://github.com/facebook/react/pull/635 22166 2013-12-05 21:42:05 SubtleGradient I need that in before I can merge https://github.com/facebook/react/pull/628 22167 2013-12-05 21:44:05 lbljeffmo The amount of time we spend speculating on perf (and then optimizing to those speculations) really makes me sad :( 22168 2013-12-05 21:44:25 SubtleGradient lbljeffmo: measure, measure, measure 22169 2013-12-05 21:44:40 lbljeffmo That would make me less sad -- if we actually did it 22170 2013-12-05 21:44:47 SubtleGradient I'm working on getting a grunt task in there 22171 2013-12-05 21:44:53 lbljeffmo (y) 22172 2013-12-05 21:45:00 SubtleGradient trying to get my other 3 PRs merged first 22173 2013-12-05 21:45:44 lbljeffmo SubtleGradient: What does your grunt task do? 22174 2013-12-05 21:46:07 lbljeffmo (with respect to perf, that is) 22175 2013-12-05 21:46:15 SubtleGradient I have one that runs some benchmark.js micro benchmarks and reports the results 22176 2013-12-05 21:46:26 SubtleGradient I'd like to add support for comparisons also 22177 2013-12-05 21:46:45 SubtleGradient That way you always get a perf measurement for the same benchmark on the same hardware 22178 2013-12-05 21:46:46 lbljeffmo Where do we keep our benchmarks? 22179 2013-12-05 21:46:52 SubtleGradient and the only diff would be code 22180 2013-12-05 21:47:01 SubtleGradient Excellent question 22181 2013-12-05 21:47:06 SubtleGradient I'm planning on writing some 22182 2013-12-05 21:47:20 SubtleGradient But of course micro benchmarks aren't too useful in the real world 22183 2013-12-05 21:47:29 SubtleGradient Important, but not the whole picure 22184 2013-12-05 21:47:40 lbljeffmo Yea, I asked because I wanted to go in and poop all over them 22185 2013-12-05 21:47:44 lbljeffmo (in the nicest way possible :D ) 22186 2013-12-05 21:47:51 SubtleGradient like we have unit tests and integration tests, we need micro benchmarks and stuff like DoYouEvenBench 22187 2013-12-05 21:48:32 SubtleGradient All I really care about is how an app feels on real hardware in production 22188 2013-12-05 21:48:36 SubtleGradient That is all that matters 22189 2013-12-05 21:48:37 lbljeffmo Me too 22190 2013-12-05 21:48:52 SubtleGradient So I've been collecting some examples of potential issues 22191 2013-12-05 21:48:53 lbljeffmo What kinds of benchmarks did you have in mind? 22192 2013-12-05 21:49:12 SubtleGradient Trying to find stuff that is as close to real-world as possible, if not production code 22193 2013-12-05 21:49:27 lbljeffmo (y) 22194 2013-12-05 21:49:54 SubtleGradient as for micro benchmarks, I don't know. I should probly profile some production code and look at the flamechart 22195 2013-12-05 21:50:31 SubtleGradient the point of the micro benchmarks is to make sure we don't accidentally regress perf in a million tiny ways and die the death of a thousand cuts 22196 2013-12-05 21:50:48 SubtleGradient which is what most code seems to suffer from in the real world 22197 2013-12-05 21:51:08 SubtleGradient People hacking away for years without even bothering to look at the perf 22198 2013-12-05 21:51:23 SubtleGradient Same goes for code complexity and maintainability 22199 2013-12-05 21:51:34 lbljeffmo SubtleGradient: I feel like its hard to successfully write and manage pass/fail tests for the thousand-cuts problem 22200 2013-12-05 21:51:46 SubtleGradient We are pretty good at making sure the whitespace all lines up though. As if the computers cared 22201 2013-12-05 21:51:48 cpojer_ can we please not have micro benchmarks? 22202 2013-12-05 21:52:01 SubtleGradient cpojer_: no 22203 2013-12-05 21:52:09 cpojer_ I agree perf is important but what does micro benchmark give us? 22204 2013-12-05 21:52:10 lbljeffmo I feel like higher level benchmarks are most useful, where when they start failing a human looks and does the human thing 22205 2013-12-05 21:52:18 cpojer_ lbljeffmo: agreed 22206 2013-12-05 21:52:28 lbljeffmo *or* we graph/monitor perf with thresholds that scream and shout when passed 22207 2013-12-05 21:53:25 SubtleGradient that's what the micro benchmarks are good for 22208 2013-12-05 21:53:31 cpojer_ the only thing that is important is that we make it easy to run a specific set of high-level benchmarks 22209 2013-12-05 21:53:39 lbljeffmo Specifically -- a failing microbenchmark is often not actually a problem (because another benchmark may have dropped, say) 22210 2013-12-05 21:53:40 cpojer_ but they don't benchmark real world usage 22211 2013-12-05 21:53:44 cpojer_ exactly 22212 2013-12-05 21:53:48 lbljeffmo or even if it hasn't, its still not a problem 22213 2013-12-05 21:54:01 lbljeffmo *ieven if another microbench hasn't, it's still not a problem 22214 2013-12-05 21:54:30 SubtleGradient Sounds like a conversation for a pull request thread. I'll rejoin this discussion then 22215 2013-12-05 21:54:32 lbljeffmo (maybe we use the thing being benchmarked much less in 6mos when we make a change that causes the benchmark to look bad) 22216 2013-12-05 21:54:39 SubtleGradient Hopefully not in the next 6 minutes 22217 2013-12-05 21:54:46 lbljeffmo SubtleGradient: what thread? 22218 2013-12-05 21:54:56 lbljeffmo (I'm bad at keeping track of GH PRs) 22219 2013-12-05 21:55:23 SubtleGradient the thread for the pull request to add the benchmarking task and the threads for various PR changes that regress various benchmarks 22220 2013-12-05 21:55:34 SubtleGradient none of them exist yet 22221 2013-12-05 21:56:02 lbljeffmo SubtleGradient: got it -- if you want to build the PR first, by all means. But I'm happy to have the discussion before you do the work too :) 22222 2013-12-05 21:56:06 cpojer_ SubtleGradient: make it happen! 22223 2013-12-05 21:56:11 SubtleGradient iShall 22224 2013-12-05 21:56:14 cpojer_ :) 22225 2013-12-05 21:56:14 sspi balpert: you can review the current one :) 22226 2013-12-05 21:56:25 SubtleGradient but first I need someone to approve my existing PRs so I can move on 22227 2013-12-05 21:56:34 SubtleGradient https://github.com/facebook/react/pull/617 22228 2013-12-05 21:56:39 SubtleGradient https://github.com/facebook/react/pull/635 22229 2013-12-05 21:56:54 SubtleGradient https://github.com/facebook/react/pull/628 after #635 ? 22230 2013-12-05 21:56:59 lbljeffmo In other news, Nelson Mandela just died :( 22231 2013-12-05 21:57:04 cpojer_ yes :( 22232 2013-12-05 21:58:10 lbljeffmo SubtleGradient: I have the typical Thursday meeting onslaught starting in 3 minutes -- but I have opened your PRs as tabs in my chrome window, so hopefully I won't forget afterward and will come back to them 22233 2013-12-05 21:58:27 SubtleGradient thanks! 22234 2013-12-05 21:58:34 SubtleGradient see you on vid in 2 22235 2013-12-05 21:58:47 lbljeffmo (y) 22236 2013-12-05 21:59:02 cpojer_ do we have a react meeting? 22237 2013-12-05 21:59:14 sspi and I'm not invited? :( 22238 2013-12-05 22:00:25 lbljeffmo I think its more of a team mtg...and a lot of the ppl on the team happen to work on React :p 22239 2013-12-05 22:02:09 sspi I know, I was just joking :) 22240 2013-12-05 22:39:39 jessep what editors are people using for jsx? i was trying sublime and went to emacs, both using the recommendations from the front page. maybe i'm missing something, but neither seem to work for me. 22241 2013-12-05 22:39:59 jessep j2-mode in emacs doesn't let you indent html 22242 2013-12-05 22:41:27 jessep the sublime tmbundle doesn't allow single ', so rest of file gets highlighted as string. am i just dumb? 22243 2013-12-05 22:42:36 balpert SubtleGradient: I could probably scrounge up some open-source components from KA suitable for benchmarkable 22244 2013-12-05 22:42:40 balpert s/benchmarkable/benchmarking 22245 2013-12-05 22:57:57 paulshen balpert: thoughts on https://github.com/facebook/react/pull/576? 22246 2013-12-05 23:02:47 balpert paulshen: yeah, we should presumably clone _defaultProps or just call getDefaultProps again 22247 2013-12-05 23:02:50 balpert I'm fine with either 22248 2013-12-05 23:06:16 balpert I guess it probably makes a little more sense to copy 22249 2013-12-05 23:06:24 paulshen yeah i guess only concern is perf 22250 2013-12-05 23:06:39 balpert right 22251 2013-12-05 23:06:48 balpert shouldn't be costly though 22252 2013-12-05 23:07:02 Daniel15 jessep: I had the issue with apostrophes messing up the syntax highlighting in Sublime. 22253 2013-12-05 23:07:25 Daniel15 jessep: I ended up just using ' instead of ' to workaround the issue for now. 22254 2013-12-05 23:07:33 paulshen balpert: we'll have to allocate another object for each instance, no? 22255 2013-12-05 23:07:51 balpert mmmm maybe 22256 2013-12-05 23:08:01 balpert I guess that's what we get for not wanting to mutate _defaultProps or the passed-in props 22257 2013-12-05 23:08:04 jessep Daniel15: thank you. I am about to jump off a cliff. Having 'get' in html also messes up remaining texts 22258 2013-12-05 23:09:19 balpert paulshen: I'm busy at the moment but I can send in a patch in a couple hours if you don't beat me to it 22259 2013-12-05 23:12:02 zpao jessep: if you have a specific case for the sublime issue, i'm sure yungsters would love to hear about it and update https://github.com/yungsters/sublime/blob/master/tmLanguage/JavaScript%20%28JSX%29.tmLanguage 22260 2013-12-05 23:13:37 paulshen balpert: kk i'm going to revert for now (to unbreak) and then we can clone later (it's the right thing to do, just wonder whether it's worth it for perf, probably is) 22261 2013-12-05 23:13:50 Daniel15 jessep: {"'"} also works for apostrophes that don't break the syntax highlighting, a bit hacky though 22262 2013-12-05 23:14:12 balpert paulshen: sounds good 22263 2013-12-05 23:18:34 jessep zpao: k, will submit issues 22264 2013-12-05 23:19:18 zpao thanks :) 22265 2013-12-05 23:51:28 dnolen petehunt: thanks for the walk through yesterday, between that and balpert's tips I got something working that's sick! 22266 2013-12-05 23:51:49 petehunt dnolen: excited to see it! 22267 2013-12-05 23:52:26 dnolen petehunt: I think I'll put together a TodoMVC benchmark w/ this pure approach and see how that turns out 22268 2013-12-05 23:53:02 dnolen petehunt: regardless I'll definitely blog about this - I think Clojure users are simply going to flock to this 22269 2013-12-05 23:55:50 petehunt dnolen: sounds great :) i'll retweet it! 22270 2013-12-05 23:56:06 petehunt dnolen: you should benchmark with PureMixin and without PureMixin 22271 2013-12-05 23:56:18 petehunt that will be the "look how fast clojure is" benchmark 22272 2013-12-05 23:56:22 dnolen petehunt: have you all talked about the benefits of the pure approach? 22273 2013-12-05 23:56:56 dnolen petehunt: well I'll likely point out that the value is just from immutability not CLJS per se, I think if you show JS users how fast React can be if you don't mutate random stuff, they'll be shocked :) 22274 2013-12-05 23:57:27 petehunt cljs encourages it thogh 22275 2013-12-05 23:57:31 petehunt though* and makes it easy 22276 2013-12-05 23:57:45 dnolen petehunt: I think it's somewhat counterintuitive w/o an explanation why so I'll probably dig into that. 22277 2013-12-05 23:58:00 dnolen petehunt: yes that's true 22278 2013-12-05 23:58:52 petehunt vjeux is doing a pref blog post soon 22279 2013-12-05 23:58:54 petehunt perf* 22280 2013-12-05 23:59:08 dnolen petehunt: yes, I still need to give a close read 22281 2013-12-05 23:59:19 dnolen anyways, gotta run, React rules! 22282 2013-12-05 23:59:24 petehunt ? see ya! 22283 2013-12-06 00:15:28 balpert zpao: sorry about the other lint problem :) 22284 2013-12-06 00:17:30 zpao balpert: no worries. our linter bailed out after the first one i mentioned so it didn't even tell me about the followup 22285 2013-12-06 00:17:47 zpao it wasn't worth it to make you update again so no big deal 22286 2013-12-06 00:18:34 balpert I'm sure you just wanted the extra commit so you can rise in the rankings ;) 22287 2013-12-06 00:19:07 vjeux yay, react v0.8! 22288 2013-12-06 00:19:19 zpao balpert: you know it 22289 2013-12-06 00:46:53 zpao cpojer_: adding anything more to jsx-internal? 22290 2013-12-06 00:46:58 zpao going to merge that otherwise 22291 2013-12-06 00:47:03 cpojer_ zpao: nope! that one is good 22292 2013-12-06 01:05:03 balpert hmm, getting this on master 22293 2013-12-06 01:05:04 balpert >> TypeError: Cannot call method 'jsCondition' of undefined 22294 2013-12-06 01:06:39 zpao balpert: not seeing that here... 22295 2013-12-06 01:07:39 balpert what version of wd? npm list wd 22296 2013-12-06 01:10:48 zpao 0.2.6 22297 2013-12-06 01:12:05 balpert thanks 22298 2013-12-06 01:12:31 noprompt what is the way to write dangerouslySetInnerHTML={{__html: stuff}} w/o JSX? 22299 2013-12-06 01:13:00 balpert dangerouslySetInnerHTML: {__html: stuff} 22300 2013-12-06 01:13:07 zpao Component({ dangerouslySetInnerHTML:{__html: stuff} } 22301 2013-12-06 01:13:19 noprompt zpao: ah, ok. gotcha. thanks! 22302 2013-12-06 01:13:40 zpao anything inside the outermost { } is just treated as JS 22303 2013-12-06 01:14:17 noprompt having a lot of fun with this from clojurescipt. :) 22304 2013-12-06 01:14:37 zpao balpert: should we bump the version in the package? (it's at 0.2.2) 22305 2013-12-06 01:14:44 noprompt perfect. thanks! 22306 2013-12-06 01:14:57 zpao noprompt: awesome to hear! 22307 2013-12-06 01:14:59 balpert zpao: yup ^ 22308 2013-12-06 01:15:04 balpert I had 0.2.2 22309 2013-12-06 01:16:06 zpao thanks! 22310 2013-12-06 01:17:10 zpao balpert: safe to assume you've seen https://github.com/facebook/react/issues/639 - any thoughts? 22311 2013-12-06 01:17:26 balpert zpao: what don't you like about current master? 22312 2013-12-06 01:17:46 balpert are npm package names case-sensitive? 22313 2013-12-06 01:17:58 zpao given the churn around statics, not comfortable putting that out there just yet and supporting it 22314 2013-12-06 01:18:31 zpao we're mostly happy with contexts, but there are still edges there that haven't been solved 22315 2013-12-06 01:18:49 zpao eg, setProps doesn't take current context into account 22316 2013-12-06 01:19:01 balpert mm I haven't even looked at contexts really 22317 2013-12-06 01:20:18 balpert darn it, I documented setProps at http://facebook.github.io/react/docs/component-api.html 22318 2013-12-06 01:20:20 balpert :) 22319 2013-12-06 01:21:16 zpao it was worth it! and i could give you the honors of updating it 22320 2013-12-06 01:22:04 balpert zpao: any chance we can move to reactjs.org? 22321 2013-12-06 01:22:25 balpert like many people, my browser's location box doesn't think "React!" when I type "faceb..." 22322 2013-12-06 01:22:39 zpao haha, mine does now 22323 2013-12-06 01:22:51 zpao because awesomebar 22324 2013-12-06 01:23:10 zpao (actually, it's completing to facebook.com but the first result is github.io) 22325 2013-12-06 01:26:28 balpert anyway, I don't have huge opinions about versioning 22326 2013-12-06 01:27:16 balpert I do think that it makes sense to try to include most of the changes 22327 2013-12-06 01:27:37 balpert I can help cherry-pick 22328 2013-12-06 01:27:42 balpert I'm sure the merge conflicts will be fun 22329 2013-12-06 01:35:37 zpao i'm ready for some hell. i think 0.8 will be pretty short lived 22330 2013-12-06 01:35:54 balpert then what, 0.9 soon? 22331 2013-12-06 01:37:03 zpao yea, hopefully (or 0.10 if we go to node versioning style, but i think the alpha.DATE/NUMBER version is better 22332 2013-12-06 01:38:00 balpert so permanently 0.9.0-alpha.* until 1.0? 22333 2013-12-06 01:51:05 zpao balpert: nooooo we'll have several releases before 1.0 22334 2013-12-06 01:51:26 balpert oh so there will still be numered releases but dates for intermediate builds? 22335 2013-12-06 01:51:32 balpert s/numered/numbered 22336 2013-12-06 01:51:35 zpao yea 22337 2013-12-06 01:52:43 zpao 0.9.0-alpha.2013-12-05 or 0.9.0-alpha.001 - not sure which. but then we eventaully release a stable 0.9 and repeat the process for 0.10, etc 22338 2013-12-06 01:53:19 zpao then when we get ready for 1.0, we'll release a ton of RCs with breaking API changes 22339 2013-12-06 01:53:51 balpert haha 22340 2013-12-06 01:54:04 zpao that was a low blow... releasing is hard 22341 2013-12-06 02:05:40 chenglou vjeux_: hey, just read your post 22342 2013-12-06 02:05:49 vjeux_ chenglou: any comment? :) 22343 2013-12-06 02:05:50 chenglou I like the diagrams lol 22344 2013-12-06 02:06:19 chenglou it goes a bit more into the details than your other one 22345 2013-12-06 02:06:22 vjeux_ cool, i spent an entire hour making them :p 22346 2013-12-06 02:06:33 vjeux what other one? 22347 2013-12-06 02:06:40 chenglou the diff post on github 22348 2013-12-06 02:06:52 chenglou for the docs 22349 2013-12-06 02:07:25 chenglou (the diff part I mean, sry 22350 2013-12-06 02:07:59 vjeux yeah they are different 22351 2013-12-06 02:08:11 vjeux this one is a global view of the optimization strategies in react 22352 2013-12-06 02:08:16 vjeux the other one is the diff algorithm itself 22353 2013-12-06 02:08:59 chenglou well I like the post 22354 2013-12-06 02:09:08 chenglou eh one quesiton 22355 2013-12-06 02:09:21 chenglou why would there be a subtree not managed by react? 22356 2013-12-06 02:11:59 vjeux 2 reasons 22357 2013-12-06 02:12:14 vjeux 1) if you display something using componentDidMount and mess up with the root node 22358 2013-12-06 02:12:56 vjeux 2) if you trigger an event on a non-react part of the dom. since we attach the event listener at the top we'll go through the whole dom hierarchy each time :x 22359 2013-12-06 02:14:24 vjeux the bullet 2) is the reason why it's going to be a win to put the listeners in the root 22360 2013-12-06 02:14:30 vjeux of the react dom and not the body 22361 2013-12-06 02:14:39 vjeux if your app is non 100% react 22362 2013-12-06 02:14:48 chenglou ah kk thx 22363 2013-12-06 02:15:17 vjeux but yeah, I didn't want to go too much into the reasons why because it's likely going to be optimized later on 22364 2013-12-06 02:15:35 vjeux and wanted to emphasize the fact that the dom is slow vs virtual dom is fast 22365 2013-12-06 02:15:57 chenglou how would you optimize that? 22366 2013-12-06 02:16:12 vjeux attach the listener to the root of each react tree 22367 2013-12-06 02:16:23 vjeux this way you don't listen in the whole document 22368 2013-12-06 02:16:40 vjeux and won't useless-ly traverse the dom for events that are not related to react 22369 2013-12-06 02:17:26 vjeux also, there are some events like mousewheel, if you listen to them it disables some browser optimization 22370 2013-12-06 02:17:37 vjeux so if we can selectively listen only to what's being used 22371 2013-12-06 02:17:58 vjeux that's going to be less work AND avoid deoptimizing stuff 22372 2013-12-06 02:19:21 chenglou neat 22373 2013-12-06 02:19:28 chenglou feels good to ride on free optimizations here lol 22374 2013-12-06 02:19:29 chenglou thx 22375 2013-12-06 02:22:40 vjeux the great thing so far with react is that the api didn't change 22376 2013-12-06 02:22:47 vjeux and we've been able to make a lot of them under the hood 22377 2013-12-06 03:14:36 balpert vjeux_: I'd just skip talking about finding a React node 22378 2013-12-06 03:14:40 balpert and pretend that the leaves are always React 22379 2013-12-06 03:15:15 vjeux_ balpert: yeah, the more i think of it the less it makes sense 22380 2013-12-06 17:07:57 vjeux ircloggr-react: ok here we go again! 22381 2013-12-06 17:08:19 sspi lol 22382 2013-12-06 17:08:23 vjeux sspi: thanks for keeping an eye on it :) 22383 2013-12-06 18:15:40 vjeux balpert: thanks a lot, I just made all the changes you suggested :) 22384 2013-12-06 18:36:53 sspi what would be the right way to get a React component via data-reactid? right now I'm diving into __internals... 22385 2013-12-06 18:38:10 vjeux document.querySelector('[data-reactid="' + id + '"]') 22386 2013-12-06 18:38:10 vjeux ? 22387 2013-12-06 18:39:08 sspi I want to get the React component... 22388 2013-12-06 18:39:19 sspi not the dom element 22389 2013-12-06 18:40:37 vjeux oh 22390 2013-12-06 18:40:44 vjeux dunno :x 22391 2013-12-06 18:44:34 andreypopp sspi: ReactMount have needed methods, I think 22392 2013-12-06 18:45:07 zpao yea, they're there somewhere. i think the events code should go through this process 22393 2013-12-06 18:45:21 zpao ACTION wins award for least helpful comment "they 22394 2013-12-06 18:46:23 zpao ReactMount.findReactNodeByID(id) 22395 2013-12-06 18:47:11 zpao sspi: you need this publicly or for an internal change? 22396 2013-12-06 18:47:20 sspi publicly 22397 2013-12-06 18:48:42 zpao oh that's not even the right thing to call... 22398 2013-12-06 18:48:47 sspi I'm trying to create a simple Chrome DevTool extension for fun, that shows information about React Components 22399 2013-12-06 18:48:54 sspi yeah gives the domnode right 22400 2013-12-06 18:48:59 zpao right 22401 2013-12-06 18:49:01 sspi talk about a name that doesn't make sense 22402 2013-12-06 18:49:20 sspi React.__internals.Mount._instancesByReactRootID['.r[14vp4]'] 22403 2013-12-06 18:49:43 sspi doesn't look sexy 22404 2013-12-06 18:49:46 zpao uh, so i'm not going to tell you to not make that, but you might want to not make that 22405 2013-12-06 18:50:02 zpao also, that will only work if we've cached it, which no guarantee 22406 2013-12-06 18:54:07 zpao sspi: here's what sebastian's extension is looking like: http://cl.ly/SqJ7 22407 2013-12-06 18:55:10 sspi dammit, that looks way too much like my idea :P 22408 2013-12-06 18:59:22 zpao sspi: yea, so i don't mean to discourage you but i think you might be better off jumping into that when it's opened up. sebastian has been traveling the world and then sick lately so i haven't heard any updates from him about when that will be 22409 2013-12-06 19:03:57 sspi zpao: ah that's unfortunate, hope he gets better soon :). 22410 2013-12-06 19:05:25 dnolen petehunt: so what specifically makes TodoMVC a pathological case for React (you said that earlier) 22411 2013-12-06 19:06:18 petehunt dnolen: big flat component are probably our worst area of performance 22412 2013-12-06 19:06:22 petehunt components* 22413 2013-12-06 19:06:32 dnolen petehunt: yes but why is that? 22414 2013-12-06 19:06:41 dnolen petehunt: you have to traverse everything? 22415 2013-12-06 19:07:01 petehunt dnolen: well, if you have 2000 children, you need to run shouldComponentUpdate() 2000 times 22416 2013-12-06 19:08:06 petehunt dnolen: vs backbone which has an "add" event 22417 2013-12-06 19:08:36 petehunt so if you're only adding a new todo item, we still need to run shouldComponentUpdate() on all the existing children 22418 2013-12-06 19:08:50 dnolen petehunt: right, so even if shouldComponentUpdate returns false, you still need to traverse 22419 2013-12-06 19:09:07 petehunt dnolen: so there's no deep traversals still 22420 2013-12-06 19:09:46 petehunt it's just a shallow iteration over the immediate children 22421 2013-12-06 19:10:21 petehunt dnolen: however this is still rarely a real performance bottleneck 22422 2013-12-06 19:10:33 dnolen petehunt: yeah I get that, been thinking about this problem in CLJS, we might make our pure node smarter so that you can annotate the state data with metadata, so that when you render, it knows what it actually needs to look at. 22423 2013-12-06 19:10:47 dnolen petehunt: yeah makes sense 22424 2013-12-06 19:10:48 petehunt if it actually is, it's really easy to declaratively "window" your list to prune items that aren't visible 22425 2013-12-06 19:11:08 dnolen petehunt: makes sense too 22426 2013-12-06 19:11:26 petehunt dnolen: we used to have a magic prop called "isStatic" so the *owner* could control shouldComponentUpdate() of its children 22427 2013-12-06 19:11:52 petehunt so the owner could reason about how the data is changing and make intelligent decisions about whether its children need to update or not 22428 2013-12-06 19:12:16 petehunt however, it's gone now. i don't know why... probably ended up not being useful enough to justify the additional api surface area 22429 2013-12-06 19:12:58 petehunt since shouldComponentUpdate() is usually just a few identity compares for most cases it's fast even for this pathological case 22430 2013-12-06 19:13:24 petehunt i think this is a fundamental property of an immediate mode system :) 22431 2013-12-06 19:14:37 dnolen petehunt: one other question, when setState is called, do you all start a timer or something for the real render to give time for other changes to take? 22432 2013-12-06 19:14:56 dnolen or does setState immediately trigger a re-render 22433 2013-12-06 19:15:08 petehunt dnolen: we have a batching system (courtesy of our friend balpert at khan academy) 22434 2013-12-06 19:15:19 petehunt dnolen: you should assume it's async always, even though it's not sometimes 22435 2013-12-06 19:16:05 petehunt dnolen: our current batching strategy is to queue up all setState()s in a given event tick and flush at the end, and for setState()s that occur outside of our event system (i.e. in a setTimeout() or XHR response) they flush synchronously 22436 2013-12-06 19:16:47 dnolen petehunt: makes sense, just wondering how you did that - we'll have to provide something like that ourselves, since we're not using setState - but it should trivial to do 22437 2013-12-06 19:17:02 petehunt dnolen: batching has performance advantages. imagine an owner X and children A and B 22438 2013-12-06 19:17:23 petehunt dnolen: imagine in the same event tick we call A.setState() and B.setState() 22439 2013-12-06 19:17:38 petehunt actually, for the sake of this argument, assume we call X.setState() too 22440 2013-12-06 19:17:58 petehunt if we did it synchronously that would require three render passes (one for each component) 22441 2013-12-06 19:18:15 petehunt but if we batch, we can see that X is the owner of A and B, so we can do a single render pass starting from X 22442 2013-12-06 19:18:50 dnolen petehunt: yep, we'll probably do something similar batching-wise via core.async or some such 22443 2013-12-06 19:19:08 dnolen petehunt: in our case I think we'll always re-render from root since it's just identity checks down the tree 22444 2013-12-06 19:19:08 petehunt i think ideally we'd be batching all the time and flush every requestAnimationFrame(), but when i did the diff on the facebook codebase we had some weird timing issues so we punted on it for now 22445 2013-12-06 19:19:58 petehunt dnolen: cool. i don't know the system you're building, but if you want to start from a subtree you can just call setState({}) 22446 2013-12-06 19:20:19 petehunt on the specific component you want to start rendering from. but sounds like this won't be super useful for what you're doing 22447 2013-12-06 19:20:35 dnolen petehunt: yeah there's just too little value for us, since we can use identity checks 22448 2013-12-06 19:20:42 petehunt yep 22449 2013-12-06 19:20:42 dnolen updating the tree should always take logarithmic time 22450 2013-12-06 19:20:48 petehunt yeah this is gonna be so sweet 22451 2013-12-06 19:20:56 petehunt i'm jealous! 22452 2013-12-06 19:27:30 dnolen petehunt: in the WebKit benchmark, what's the difference between Sync/Async - batching? 22453 2013-12-06 19:28:27 petehunt dnolen: i don't know what that is to be honest, but it's not react specific 22454 2013-12-06 19:28:38 dnolen petehunt: oh huh, k 22455 2013-12-06 19:28:51 petehunt you'd be better off asking rniwa on the webkit team :) 22456 2013-12-06 19:30:13 dnolen petehunt: got it, and what's missing for React to get out labs for TodoMVC? 22457 2013-12-06 19:30:52 petehunt dnolen: i get the impression we just need to ask 22458 2013-12-06 19:31:07 petehunt i think we're pretty much ready to go on that 22459 2013-12-06 19:31:10 petehunt chenglou: ^^ 22460 2013-12-06 19:31:13 petehunt brb 22461 2013-12-06 19:31:59 balpert TodoMVC said they'd look at moving it out during their next sprint, whatever that means 22462 2013-12-06 19:39:49 balpert dnolen: since you're always updating at the root batching is pretty simple for you 22463 2013-12-06 19:40:08 balpert just debounce your one call to renderComponent, essentially 22464 2013-12-06 19:51:04 petehunt balpert: dnolen: i think it would be pretty awesome if you just did renderComponent() every requestAnimationFrame() 22465 2013-12-06 19:51:31 balpert or that! 22466 2013-12-06 19:54:52 dnolen petehunt: yeah I thought about that too, will try that 22467 2013-12-06 19:55:11 dnolen petehunt: I gotta say given that TodoMVC is worst case, the performance compared to Backbone is impressive 22468 2013-12-06 20:00:24 chenglou dnolen: yeah they said next roll out 22469 2013-12-06 20:00:29 chenglou whatever that means 22470 2013-12-06 20:00:33 chenglou next batch I guess 22471 2013-12-06 20:03:14 dnolen I find their code formatting guidelines ridiculous 22472 2013-12-06 20:03:18 dnolen a) looks ugly on Github 22473 2013-12-06 20:03:39 dnolen b) doesn't make sense make for compile to JS langs 22474 2013-12-06 20:04:49 dnolen 22475 2013-12-06 20:05:29 chenglou dnolen: well for my part I just dislike todomvc in general lol 22476 2013-12-06 20:05:43 chenglou it's so weak 22477 2013-12-06 20:05:51 dnolen chenglou: yeah the Alioth benchmark of MVCs 22478 2013-12-06 20:06:33 dnolen but that's the game people want to see played so ... 22479 2013-12-06 20:08:11 chenglou ah speaking of todomvc, petehunt: I'll put some animations on it right after I'm done next week 22480 2013-12-06 20:08:19 chenglou with transitionGroup 22481 2013-12-06 20:08:41 chenglou I'm bored playing around with my own api lol 22482 2013-12-06 20:16:45 balpert petehunt: I've had a dream that instead of passing an array of components, you could pass some sort of array future that knows how it differs from the previous array so that you don't need to look at anything 22483 2013-12-06 20:16:53 balpert probably too much work for too little gain though 22484 2013-12-06 20:19:11 chenglou balpert: have you seen the new (?) famo.us demos? 22485 2013-12-06 20:19:20 chenglou http://www.codepen.io/befamous 22486 2013-12-06 20:19:24 chenglou or is that old 22487 2013-12-06 20:20:22 petehunt i believe this was released at their party last night 22488 2013-12-06 20:21:18 chenglou scrolling's wrong (there we go again lol), but I'm definitely looking into it 22489 2013-12-06 20:21:27 sspi wonder how it looks on a mobile device, on my macbook air... not so much 22490 2013-12-06 20:21:28 chenglou react-famous 22491 2013-12-06 20:21:35 chenglou famous-react 22492 2013-12-06 20:21:54 chenglou sspi I tested their original demo on 5s, worked extremely well 22493 2013-12-06 20:22:03 sspi cool :) 22494 2013-12-06 20:22:14 sspi the period table one? 22495 2013-12-06 20:22:20 chenglou yeah 22496 2013-12-06 20:22:27 sspi yeah, that one was cool! 22497 2013-12-06 20:27:12 sspi anyway gotta go, got a plane to catch tomorrow :) 22498 2013-12-06 21:20:55 bbloom_ petehunt: you should idle in #clojure since lots of folks are starting to talk more about react :-) 22499 2013-12-06 21:28:31 petehunt bbloom_: it's now on autojoin. thakns. 22500 2013-12-06 21:28:32 petehunt thanks 22501 2013-12-06 21:28:49 petehunt is there a log 22502 2013-12-06 21:34:54 bbloom_ petehunt: http://www.raynes.me/logs/irc.freenode.net/clojure/ 22503 2013-12-06 21:35:08 bbloom_ petehunt: or with search: http://clojure-log.n01se.net/ 22504 2013-12-06 21:40:52 SubtleGradient https://gist.github.com/swannodette/7763911 22505 2013-12-06 21:43:17 dnolen SubtleGradient: I actually have a better version of that now 22506 2013-12-06 21:43:29 SubtleGradient I believe you 22507 2013-12-06 21:43:49 dnolen SubtleGradient: extra pure component http://gist.github.com/swannodette/7813518 22508 2013-12-06 21:44:07 dnolen that computes children lazily 22509 2013-12-06 22:57:12 chenglou dnolen: man that sounds sweet. I really need to pick up clojure/clojurescript soon 22510 2013-12-06 23:12:35 zpao petehunt: you around? 22511 2013-12-06 23:12:51 petehunt zpao: heyyyyyyo 22512 2013-12-06 23:13:44 zpao ok, so i'm going to merge the new package PR with some things on top. we can update the pointers to jeff's new project as necessary 22513 2013-12-06 23:13:58 petehunt zpao: sounds good 22514 2013-12-06 23:14:24 zpao i'm going to create a 0.8-stable branch and cherry-pick into that. i may cry 22515 2013-12-06 23:14:40 balpert no don't cry! 22516 2013-12-06 23:15:00 balpert I can help with smiles and merge conflict resolution magic 22517 2013-12-06 23:15:02 zpao 0.8 will be based on 0.5-stable, so it'll be pretty behind trunk 22518 2013-12-06 23:15:17 zpao but i'd like to cherry-pick everything that doesn't change APIs 22519 2013-12-06 23:15:48 petehunt zpao: it seems like i'm the only one who wants context on props, so i think the level of controversy on the new apis is lower than i anticipated 22520 2013-12-06 23:16:11 petehunt (if that had anything to do with it) 22521 2013-12-06 23:16:45 zpao nah, basing it on 0.5 is way easier since we can just start communicating it asap. no updated docs or anything is needed 22522 2013-12-06 23:17:11 zpao and people who have components today (andreypopp!) can start using it without having to also worry about other things 22523 2013-12-06 23:17:32 petehunt ? 22524 2013-12-06 23:18:12 zpao i wouldn't be too worried about contexts being a new things except it's still broken in ways (eg, setProps) so it's not safe to release.\\ 22525 2013-12-06 23:18:30 balpert so notable things that will be excluded are: contexts, rootNode arg removal, statics, (JSX whitespace) 22526 2013-12-06 23:18:37 balpert anything else? 22527 2013-12-06 23:19:00 petehunt zpao: it's broken for setProps()? 22528 2013-12-06 23:19:04 zpao i *think* that's it 22529 2013-12-06 23:19:06 petehunt i thought we had React.withContext() 22530 2013-12-06 23:19:50 petehunt yungster_: yt? 22531 2013-12-06 23:19:52 zpao petehunt: yup, but you can also call React.setProps(renderedComponent, etc) and i don't think context is set. or something. marshall was explaining it 22532 2013-12-06 23:20:23 petehunt oh... weird 22533 2013-12-06 23:21:53 zpao so i think setProps is going to be killed and everything will go through React.renderComponent 22534 2013-12-06 23:23:49 zpao anyway, complications. but maybe (but unlikely) we could release 0.9 < 2 weeks from today. but we're also going to hold up 0.8 for when jeff is ready 22535 2013-12-06 23:25:04 petehunt zpao: this is *really* exciting 22536 2013-12-06 23:32:26 zpao petehunt: ps, we're going to want to fixup this build time issue soon i think. i think we're rebuilding everythign everytime and losing any benefits we got from commoner 22537 2013-12-06 23:32:28 balpert zpao: maybe we should just have a shared google doc with the commits and mark them for inclusion 22538 2013-12-06 23:32:40 petehunt zpao: we are? 22539 2013-12-06 23:32:57 zpao petehunt: feels way slower 22540 2013-12-06 23:33:04 zpao or maybe i'm crazy... 22541 2013-12-06 23:33:25 zpao balpert: yea that could work. i wish i could compare and have it understand cherry-picks 22542 2013-12-06 23:33:40 balpert yeah… 22543 2013-12-06 23:33:54 balpert grunt build doesn't seem slow for me...? 22544 2013-12-06 23:34:39 zpao try now? 22545 2013-12-06 23:36:04 zpao oh man, i wanted there to be a merge commit there :( 22546 2013-12-06 23:36:24 zpao that's going to make my life more painful :'( 22547 2013-12-06 23:37:38 petehunt quick force push before anyone notices! 22548 2013-12-06 23:39:22 zpao meh, i'll survive. this will force me to learn new tricks 22549 2013-12-06 23:39:36 balpert haha 22550 2013-12-06 23:40:07 balpert I've never tried http://softwareswirl.blogspot.com/2013/05/git-imerge-practical-introduction.html but it looked perhaps useful 22551 2013-12-06 23:41:00 zpao BOOM 22552 2013-12-06 23:41:15 zpao ACTION 's head just exploded 22553 2013-12-06 23:42:03 zpao "about me: Theoretical physicist turned software developer" makes sense 22554 2013-12-07 00:15:15 zpao balpert: https://docs.google.com/spreadsheet/ccc?key=0AmorHpAY7s4edEZWQmRXVnU3Y3NZUjlOWTY0MDNVS2c&usp=sharing has the commits 22555 2013-12-07 00:17:48 zpao can you see that? 22556 2013-12-07 00:17:52 zpao ACTION doesn't use google docs 22557 2013-12-07 00:18:51 andreypopp zpao: using an office app to workaround github limitations? github should cry 22558 2013-12-07 00:19:01 zpao haha srsly 22559 2013-12-07 00:23:36 zpao this is going to go terribly if there are more than a couple people who see that doc... 22560 2013-12-07 00:24:47 petehunt zpao: can you filter those commits for src/ only? 22561 2013-12-07 00:25:33 zpao good idea 22562 2013-12-07 00:25:39 zpao we can figure out the rest 22563 2013-12-07 00:28:03 zpao petehunt: done 22564 2013-12-07 00:28:48 zpao i really like when it parses 214e910 as a number and then it's like "lol ?" 22565 2013-12-07 00:30:38 zpao ACTION makes up more shit as he goes 22566 2013-12-07 00:30:48 zpao ACTION uses colors now 22567 2013-12-07 00:46:42 balpert I can see it but can't edit 22568 2013-12-07 00:46:50 balpert which is probably what you intended? 22569 2013-12-07 00:55:08 zpao no, it should be public 22570 2013-12-07 00:55:16 zpao but i don't know how to google doc 22571 2013-12-07 00:55:51 zpao ok NOW it should beditable 22572 2013-12-07 00:59:34 chenglou zpao: you can set it so that only people with the link can see/edit/whatever 22573 2013-12-07 01:01:32 zpao should be like that now 22574 2013-12-07 01:10:45 balpert lol "React 0.5 -> 0.8 Exercise in Futility" 22575 2013-12-07 01:25:12 balpert zpao: okay, added a bunch of comments and made a bunch of things yellow 22576 2013-12-07 01:25:17 balpert I wrote my name next to all my yellow things 22577 2013-12-07 01:25:31 balpert which is everything yellow except "[ReactTransitionGroup] Add onTransitionEnter and onTransitionLeave", which someone else changed 22578 2013-12-07 05:15:53 sspi Morning! 22579 2013-12-07 06:19:44 chenglou sspi: night =) 22580 2013-12-07 09:28:16 balpert what is this "Unity Player needs your permission to run." on facebook.com? 22581 2013-12-07 19:44:39 chenglou balpert: haven't you heard? Facebook is also switching to flash 22582 2013-12-07 19:46:27 balpert of course 22583 2013-12-07 20:31:51 hojberg_ gowdy 22584 2013-12-07 20:31:58 hojberg_ howdy* 22585 2013-12-08 00:20:31 sspi Hello SFO! 22586 2013-12-08 00:23:11 balpert hello sspi! 22587 2013-12-08 00:24:53 balpert sspi: where are you interviewing? 22588 2013-12-08 00:25:00 sspi Took me about... 15 hours, the plane had to go back... Now waiting to get out and get to Palo Alto 22589 2013-12-08 00:25:15 balpert the plane had to go back?? 22590 2013-12-08 00:25:49 sspi Yeah, a meter didnt work - so better safe then sorry 22591 2013-12-08 00:26:00 balpert huh 22592 2013-12-08 00:26:03 sspi Interviewing at FB 22593 2013-12-08 00:26:49 balpert nice, good luck 22594 2013-12-08 00:26:55 balpert frontend JS team? 22595 2013-12-08 00:27:32 sspi Yes :-), thanks! 22596 2013-12-08 01:16:16 balpert sspi: you're not here but I think that's all my comments this time around. getting close! 22597 2013-12-08 02:50:20 sspi balpert: thanks for reviewing, will look into it tomorrow :) 22598 2013-12-08 08:16:49 chenglou ^ oh wow 22599 2013-12-08 08:16:52 chenglou =) 22600 2013-12-08 15:03:53 sspi Morning! 22601 2013-12-08 21:43:22 petehunt balpert: yt? 22602 2013-12-08 21:48:50 balpert not really :) 22603 2013-12-09 00:27:19 vjeux zpao|away: I found out why it was uber slow to see updates when I save using jekyll. it's because it's rebuilding the entire freaking website every time 22604 2013-12-09 00:27:39 vjeux if i move all the other pages outside of the directory then it's instant again 22605 2013-12-09 00:40:48 vjeux i googled for incremental build and the core jekyll team isn't interested 22606 2013-12-09 00:40:49 vjeux -_- 22607 2013-12-09 00:41:42 petehunt vjeux: lol 22608 2013-12-09 00:44:25 vjeux they want to either make a full dependency tracking system to make it work all the time or nothing 22609 2013-12-09 00:44:40 vjeux but i just want to refresh my post -_- 22610 2013-12-09 00:44:53 petehunt vjeux: you wanna know something sweet 22611 2013-12-09 00:44:58 vjeux petehunt: always 22612 2013-12-09 00:45:11 petehunt so we don't have npm "react" name yet, but we will soon 22613 2013-12-09 00:45:21 petehunt so for now i'm pointing at my own .tar.gz file 22614 2013-12-09 00:45:22 petehunt but 22615 2013-12-09 00:45:26 petehunt you can npm install react-touch 22616 2013-12-09 00:45:30 petehunt npm install react-jqueryui 22617 2013-12-09 00:45:35 petehunt npm install react-meteor 22618 2013-12-09 00:45:37 petehunt etc etc 22619 2013-12-09 00:45:44 petehunt available today! 22620 2013-12-09 00:45:53 vjeux what does react-jqueryui does? 22621 2013-12-09 00:46:10 petehunt var Accordion = require('ReactJQueryUI').Accordion; 22622 2013-12-09 00:46:21 petehunt
    ...
    22623 2013-12-09 00:46:27 petehunt basically just wraps jquery ui widgets 22624 2013-12-09 00:46:31 petehunt super dumb module 22625 2013-12-09 00:46:34 vjeux kewl 22626 2013-12-09 00:46:41 vjeux https://npmjs.org/package/react-jqueryui 22627 2013-12-09 00:46:47 vjeux is there a way to see the source code from npm? 22628 2013-12-09 00:46:52 petehunt yeah 22629 2013-12-09 00:46:56 petehunt i just didnt fill in taht field 22630 2013-12-09 00:46:57 petehunt it's all on my github 22631 2013-12-09 00:47:00 vjeux ok 22632 2013-12-09 00:47:02 petehunt github.com/petehunt/react-jqueryui 22633 2013-12-09 00:47:05 petehunt or something 22634 2013-12-09 00:47:19 petehunt also: npm install react-raf-batching :D 22635 2013-12-09 00:47:20 vjeux https://github.com/petehunt/react-jqueryui/blob/master/src/index.js 22636 2013-12-09 00:47:23 vjeux haha :p 22637 2013-12-09 00:48:19 vjeux that's sweet 22638 2013-12-09 00:48:29 petehunt yeah 22639 2013-12-09 00:48:36 petehunt the key thing is look at react-boilerplate on my github 22640 2013-12-09 00:48:46 petehunt that's a template for making a module that uses react + jsx 22641 2013-12-09 00:49:02 petehunt basically i do the coffeescript thing and compile it ahead of time 22642 2013-12-09 00:57:03 vjeux :) 22643 2013-12-09 00:57:09 vjeux can't wait 22644 2013-12-09 01:05:15 vjeux i'm not sure what to do, it really sucks to have to wait for 30s+ every time I save the file to update :( 22645 2013-12-09 01:08:03 vjeux "The short answer is that it perfectly complements the new version of Pedestal. I will send you an email." 22646 2013-12-09 01:08:09 vjeux https://twitter.com/brentonashworth/status/408958774632656896 22647 2013-12-09 01:08:16 vjeux http://pedestal.io/ 22648 2013-12-09 01:14:36 vjeux g+ is definitively less active than twitter 22649 2013-12-09 01:14:37 vjeux https://plus.google.com/s/react%20javascript 22650 2013-12-09 01:14:39 vjeux https://plus.google.com/s/react%20js 22651 2013-12-09 01:14:46 vjeux all the results are very old 22652 2013-12-09 01:16:25 vjeux https://www.youtube.com/watch?v=R2CGKiNnPFo#t=201 22653 2013-12-09 01:16:27 vjeux that's cool 22654 2013-12-09 01:16:30 vjeux but in russian :( 22655 2013-12-09 01:33:30 vjeux https://github.com/mojombo/jekyll/blob/e2ed31760158d64e33be8ab6a26e673725839331/features/regeneration.feature 22656 2013-12-09 01:33:43 vjeux wow, this is a pretty crazy syntax for unit tests :p 22657 2013-12-09 01:34:25 vjeux petehunt: https://github.com/mojombo/jekyll/blob/e2ed31760158d64e33be8ab6a26e673725839331/features/regeneration.feature 22658 2013-12-09 01:34:57 petehunt vjeux: kill me now 22659 2013-12-09 01:45:27 sspi petehunt: still alive? 22660 2013-12-09 01:45:35 petehunt sspi: heyo 22661 2013-12-09 03:02:12 sspi my grunt lint gives errors it seems :/ 22662 2013-12-09 03:11:46 sspi balpert: just did another commit for #462, can you review it? tnx :) 22663 2013-12-09 04:31:12 vjeux http://fooo.fr:8080/ trying to use react-page to render the website 22664 2013-12-09 04:41:46 vjeux petehunt: http://fooo.fr:8080/ 22665 2013-12-09 04:41:53 vjeux using react-page :p 22666 2013-12-09 04:42:16 petehunt 500 Error: Following module not in specified search paths: /home/vjeux/www/fb/react-page/src/index.js 22667 2013-12-09 04:42:23 vjeux http://fooo.fr:8080/react/ 22668 2013-12-09 04:42:24 vjeux grrr 22669 2013-12-09 04:43:10 vjeux it's not going to be sustainable that jekyll takes one minute for any minor update 22670 2013-12-09 04:44:32 vjeux i talked to a guy from jekyll and he is working on a workaround but this is not going to be released soon 22671 2013-12-09 04:45:35 vjeux and would be great to dogfood our own product :) 22672 2013-12-09 05:51:50 Daniel15 Is it an anti-pattern to put data access code (like AJAX requests) in React components? 22673 2013-12-09 05:52:02 vjeux Daniel15: not really 22674 2013-12-09 05:52:13 Daniel15 I feel like it should only be view logic, but the tutorial has an AJAX request in the component (I guess it could just be for demonstration purposes though) 22675 2013-12-09 05:52:34 vjeux react doesn't really care how you manage your data 22676 2013-12-09 05:52:50 vjeux if you don't have any library to do so, using an ajax request inside is good 22677 2013-12-09 05:53:38 Daniel15 So it's okay to couple business logic with presentation logic in a React component? 22678 2013-12-09 05:54:25 vjeux Daniel15: you should think of a react component as a function 22679 2013-12-09 05:54:35 vjeux some functions are used to render a view 22680 2013-12-09 05:54:45 vjeux some of them are used to fetch data ... 22681 2013-12-09 05:54:53 Daniel15 Aha :) 22682 2013-12-09 05:55:14 vjeux it's up to you to properly architecture your app 22683 2013-12-09 05:56:08 vjeux what we see at fb is that some components are pure views 22684 2013-12-09 05:56:17 vjeux and some components look like controllers 22685 2013-12-09 05:57:25 Daniel15 Yeah I need to clean up some of this code I'm writing, I was quickly hacking it together and now one class contains most of the app logic :P 22686 2013-12-09 05:59:53 vjeux the great thing I found with react is that it's very easy to split components into many sub components 22687 2013-12-09 06:02:15 Daniel15 Yeah, definitely 22688 2013-12-09 06:04:45 Daniel15 When I first saw React I thought it was a strange concept, combining markup with view code 22689 2013-12-09 06:04:55 Daniel15 But after using it for a while, I really like it 22690 2013-12-09 07:54:37 krs can i have several doc-tags to change what namespace the jsx is "resolved" to? 22691 2013-12-09 07:56:18 balpert krs: not within one file, I don't think 22692 2013-12-09 07:56:25 balpert petehunt: here now! 22693 2013-12-09 07:56:51 petehunt what uppp 22694 2013-12-09 07:57:20 balpert not much, went to the Exploratorium this morning and then to the KA holiday party 22695 2013-12-09 07:57:35 balpert then reviewing sspi's pull request 22696 2013-12-09 07:57:42 balpert probably time for me to fall asleep soon 22697 2013-12-09 07:58:11 petehunt balpert: oh cool, my friend was at the exploratorium last night for linkedin's holiday party 22698 2013-12-09 07:58:16 petehunt are you based in sf? 22699 2013-12-09 07:58:24 balpert no, I'm in Mountain View 22700 2013-12-09 07:58:35 petehunt gotcha 22701 2013-12-09 07:58:48 petehunt balpert: just wanted to give you a glimpse of the future once we get the npm name 22702 2013-12-09 07:58:51 petehunt balpert: https://npmjs.org/~floydophone 22703 2013-12-09 07:59:29 petehunt having jqueryui is pretty nice actually. i can just wrap my lists in and now they're drag and drop :) 22704 2013-12-09 07:59:37 petehunt even if it's kind of questionable, haha 22705 2013-12-09 07:59:47 balpert haha 22706 2013-12-09 08:00:37 balpert that does sound questionable 22707 2013-12-09 08:00:45 balpert we need a good sortable component for React it seems like 22708 2013-12-09 08:00:59 petehunt yea, preferably mobile first 22709 2013-12-09 08:01:11 petehunt i don't think it would be very hard to do 22710 2013-12-09 08:01:16 petehunt would make a good tutorial 22711 2013-12-09 08:02:07 balpert yeah, probably not super hard 22712 2013-12-09 08:02:15 balpert I'm not sure it's obvious how to get the dragging right though 22713 2013-12-09 08:02:26 balpert especially if you want to take care to keep everything in the DOM 22714 2013-12-09 08:04:48 petehunt balpert: yeah, we may have to do something like magic-move 22715 2013-12-09 08:05:16 balpert magic-move? 22716 2013-12-09 08:05:45 petehunt http://maccman.github.io/jquery.magicmove/ 22717 2013-12-09 08:07:17 balpert interesting 22718 2013-12-09 08:14:22 balpert well maybe we can finally have a component repository! 22719 2013-12-09 08:14:25 balpert this is awesome 22720 2013-12-09 08:15:09 balpert I wonder if we should make a reactjs org for "official" useful components and extensions like react-raf or whatever 22721 2013-12-09 08:17:31 krs that would be nice 22722 2013-12-09 08:17:49 krs one for inofficial ones too, but that might be up to the community to make 22723 2013-12-09 08:19:57 petehunt bbloom: grats 22724 2013-12-09 08:23:55 balpert krs: well for unofficial things you can just put it in a personal repo 22725 2013-12-09 08:24:11 balpert we might not need official components 22726 2013-12-09 08:25:10 krs balpert: a repository is more then storage, its most useful as discovery imho 22727 2013-12-09 08:25:22 krs i.e be able to browse components and source 22728 2013-12-09 08:54:53 sspi balpert: still awake? 22729 2013-12-09 09:03:21 petehunt sspi: i am for a bit 22730 2013-12-09 09:03:30 petehunt if you have a general question 22731 2013-12-09 09:05:03 sspi I guess you can also help :) 22732 2013-12-09 09:05:36 sspi I'm working on https://github.com/facebook/react/pull/462#discussion_r8190296 22733 2013-12-09 09:06:52 sspi and I'm now placing the mapping in EventConstants, and was wondering if that was a good idea - so it can be shared with ReactEventEmitter 22734 2013-12-09 09:07:41 sspi however there are some differences in usage, like ReactEventEmitter wants the events to be like selectionchange, while SimpleEventPlugin wants it as selectionChange 22735 2013-12-09 09:08:23 sspi so now I'm toLowerCase specifically for ReactEventEmitter which feels kinda meh, on the other hand I could of course make an extra mapping 22736 2013-12-09 09:08:34 sspi *map all the things* 22737 2013-12-09 09:10:21 sspi petehunt: ^ 22738 2013-12-09 09:10:48 petehunt hm 22739 2013-12-09 09:11:31 petehunt sspi: so the reason for that is you actually want the native browser event name 22740 2013-12-09 09:11:34 petehunt not the camelCased one 22741 2013-12-09 09:11:35 petehunt right? 22742 2013-12-09 09:12:29 petehunt sspi: yeah, ReactEventEmitter does the actual event listening 22743 2013-12-09 09:13:56 sspi ReactEventEmitter needs the lowercase one, SimpleEventPlugin needs the camelCased one 22744 2013-12-09 09:14:20 petehunt hrm 22745 2013-12-09 09:14:26 petehunt his comment isn't about ReactEventEmitter though 22746 2013-12-09 09:14:51 petehunt sspi: also look out for things like doubleClick vs dblclick 22747 2013-12-09 09:15:08 sspi yeah I know, that already gave me some problems :) 22748 2013-12-09 09:15:41 sspi anyway I think I will just go for an extra mapping 22749 2013-12-09 09:17:42 petehunt i think that's a swell idea 22750 2013-12-09 09:17:49 sspi \\o/ 22751 2013-12-09 09:17:57 petehunt sspi: did i hear you are in the area? 22752 2013-12-09 09:18:06 sspi yes, that is correct :) 22753 2013-12-09 09:18:16 petehunt oh cool, where are you staying? 22754 2013-12-09 09:18:23 sspi Palo Alto Sheraton Hotel 22755 2013-12-09 09:19:06 petehunt ah cool, are you going to be at facebook tomorrow? i'm going to probably miss lunch at the office but i'll be around later in the day 22756 2013-12-09 09:19:44 sspi yes, will be at Facebook tomorrow :) - looking forward to seeing you guys! 22757 2013-12-09 09:20:34 petehunt alright cool! i'll see you later in the day hopefully 22758 2013-12-09 09:20:43 petehunt or feel free to just swing by the instagram area 22759 2013-12-09 09:21:37 sspi awesome! will do so :) 22760 2013-12-09 09:22:10 sspi hope I'm still awake by then btw. :P 22761 2013-12-09 09:22:48 sspi my biological clock is not really adjusted yet to the timezone 22762 2013-12-09 09:29:50 petehunt sspi: you're telling me :) 22763 2013-12-09 09:30:06 petehunt i flew from sf->manila->nyc->sf and got back just a few days ago. still super messed up 22764 2013-12-09 09:32:59 sspi I can imagine! of course still super awesome to be here :) 22765 2013-12-09 11:07:30 RoboTeddy what's the rationale for https://github.com/hedgerwang/react-styles ? 22766 2013-12-09 16:37:57 petehunt RoboTeddy: that's meant for use with react-page 22767 2013-12-09 17:29:42 sspi Hello from building 16! Let's rock and roll :D 22768 2013-12-09 18:19:44 zpao vjeux: just catching up on logs... re: jekyll. i've found that killing the process and starting it again is faster than waiting for watch to pick up chages 22769 2013-12-09 18:20:02 vjeux zpao: :x 22770 2013-12-09 18:21:00 zpao balpert: thanks a lot for looking through all of that. it really helped. i'll finish the details there this afternoon 22771 2013-12-09 19:00:57 balpert zpao: np 22772 2013-12-09 19:01:18 balpert zpao: I do code reviews like this all the time 22773 2013-12-09 21:51:49 lbljeffmo When reading jasmine tests, there appears to be a direct correlation between the use of `runs()`/`waitsFor` and large quantities of wat 22774 2013-12-09 21:59:28 balpert what I don't understand is why you don't just get a callback function to call 22775 2013-12-09 22:01:46 lbljeffmo balpert: amen -- mocha seems to just be jasmine with done() callbacks AFAICT (having not used it) 22776 2013-12-09 22:03:09 lbljeffmo I think I saw a promises-for-jasmine hack (so you can return a promise from your spec) somewhere 22777 2013-12-09 22:04:36 lbljeffmo but really, I've always just been able to mock my async stuff and call it inline for better determinism...maybe I'm jaded? 22778 2013-12-09 22:14:17 balpert I am woefully inexperienced with JS unit testing so I have no idea 22779 2013-12-09 23:07:47 sspi and we are back at the hotel :) - was great seeing you yungsters! 22780 2013-12-09 23:08:00 yungsters sspi: nice meeting you, too! :) 22781 2013-12-09 23:10:00 balpert sspi: let me know if you have any questions about my latest comment 22782 2013-12-09 23:10:08 balpert sorry for being asleep last night :) 22783 2013-12-09 23:17:41 mcarter Is there a good way to track down errors in uncompiled JSX? 22784 2013-12-09 23:18:06 balpert mcarter: syntax errors, you mean? 22785 2013-12-09 23:18:21 mcarter I am getting 'Uncaught Error: Parse Error: Line 12: Unexpected token ;' 22786 2013-12-09 23:18:42 mcarter then refers to the reactjs line number - in this case the error handler at line 12705 22787 2013-12-09 23:18:52 balpert well what's on line 12 of your file? 22788 2013-12-09 23:19:04 mcarter my viewport meta tag :) 22789 2013-12-09 23:19:10 mcarter my jsx is down by the footer 22790 2013-12-09 23:19:34 zpao line 12 in the script tag 22791 2013-12-09 23:19:46 zpao ACTION assumes you're using the in-browser transformer 22792 2013-12-09 23:20:27 mcarter @zpao rad 22793 2013-12-09 23:20:39 mcarter Its been a long day and I guess it never dawned on me to count from the start of the script tag 22794 2013-12-09 23:20:45 mcarter Appreciate the direction 22795 2013-12-09 23:20:52 zpao that's hard to get much better unless we dump the whole script :( 22796 2013-12-09 23:21:04 zpao no problem! 22797 2013-12-09 23:21:16 balpert zpao: we could probably show the line of the script? 22798 2013-12-09 23:21:30 balpert maybe with a line or two on each side for context 22799 2013-12-09 23:21:53 mcarter Line 12 was the right place. I accidentally threw a ; after the closing curley of my ajax call 22800 2013-12-09 23:21:54 zpao sounds reasonable. 22801 2013-12-09 23:37:47 balpert lbljeffmo: any plans for source map support in jstransform? 22802 2013-12-09 23:39:40 lbljeffmo balpert: it has support, but I don't think anyone uses it at the moment -- so I don't promise that it's bug-free 22803 2013-12-09 23:39:53 balpert oh, really? 22804 2013-12-09 23:40:54 lbljeffmo when you call transform() with the sourceMap key set on the options object, you get {code, sourceMap, sourceMapFilename} 22805 2013-12-09 23:43:27 balpert okay I will have to look into that 22806 2013-12-09 23:47:25 zpao oh, we should use that... 22807 2013-12-10 00:02:34 balpert zpao: I vote that Travis is too noisy 22808 2013-12-10 00:02:52 zpao ACTION was in the process of fixing :) 22809 2013-12-10 00:03:07 balpert thank you 22810 2013-12-10 00:03:25 zpao hopefully change is actually what we want 22811 2013-12-10 00:21:40 sspi eh balpert, I think your solution still doesn't work... :/ 22812 2013-12-10 00:21:48 balpert why's that? 22813 2013-12-10 00:22:20 sspi nvrmind! I was reading it wrong :) 22814 2013-12-10 00:22:57 balpert :) 22815 2013-12-10 00:26:02 balpert just trying to reduce the size of the JS when possible 22816 2013-12-10 00:26:14 balpert also reducing the room for mistakes :) 22817 2013-12-10 00:28:13 sspi great! thanks for the sharp eye as always :) 22818 2013-12-10 00:32:25 balpert what's the deal with AnalyticsEventPluginFactory? 22819 2013-12-10 00:33:37 sspi balpert: asking me that question? 22820 2013-12-10 00:33:43 balpert no, everyone else 22821 2013-12-10 00:33:44 balpert sorry 22822 2013-12-10 00:33:48 balpert yungsters: maybe 22823 2013-12-10 00:33:49 sspi great \\o/ :P 22824 2013-12-10 07:45:54 balpert new contributors! 22825 2013-12-10 10:17:59 svnlto I'm having a little trouble working with react on my browserify app 22826 2013-12-10 10:18:28 svnlto If I require react-tools, React.createClass doesn't seem to be available 22827 2013-12-10 10:19:25 krs svnlto: i think its require("react-tools").React 22828 2013-12-10 10:19:34 krs i.e look in the main file what it exports 22829 2013-12-10 10:20:58 svnlto krs: that was it, cheers 22830 2013-12-10 13:25:27 andreypopp svnlto: you want var React = require('react-tools/build/modules/React') currently, otherwise your bundle will include jsx transformer code as well 22831 2013-12-10 13:25:52 andreypopp svnlto: I think soon you will be able to do just var React = require('react'); 22832 2013-12-10 13:29:15 leifdenby Hi guys, I've been digging around the source code of React as I needed some way of initiating a renderComponent from within a block of javascript code. I found 'constructAndRenderComponentByID' which works a charm, but it is undocumented, so I just wanted to check with you guys that this is at the approach that should follow? 22833 2013-12-10 15:37:22 mcarter What is the best way to track down a Invariant violation error? 22834 2013-12-10 15:44:33 salier mcarter: break on error, look at the stack? 22835 2013-12-10 15:45:10 mcarter Thanks. I'm still not totally sure what it was. I removed the " " around my reference to {this.props.propName} and it started working w/o errors 22836 2013-12-10 16:31:33 denplis Hey guys, i need an advice. I'm looking for how to use ``if`` logic in template, like that https://gist.github.com/denplis/4d191f908b1c8599cde9 How can i do that with react? 22837 2013-12-10 16:40:41 SubtleGradient denplis: I've seen that done before. It works. 22838 2013-12-10 16:42:09 SubtleGradient Except (AFAIK) you need to return something for each case, at least a span or something maybe. 22839 2013-12-10 16:42:43 SubtleGradient It may be more performant to just toggle the visibility of those nodes vs destroying them however. Depends on how it's being used 22840 2013-12-10 16:46:04 denplis big tnx, it helps 22841 2013-12-10 16:46:19 SubtleGradient my pleasure 22842 2013-12-10 17:28:44 ustunozg_ denplis: you can also save what is inside that if to a var and then return that inside if. var x =
    if () { return x;} else .. 22843 2013-12-10 18:32:42 vjeux mcarter: for the invariant violation, if you DON'T use the .min.js build then you're going to get the full error 22844 2013-12-10 18:32:56 vjeux we strip the exact error for the release (minified) build 22845 2013-12-10 18:33:37 mcarter @vjeux That makes sense, I really appreciate it. I was able to get it working and its slick as snot! I've been wanting to toss it into one of our projects and see if anybody else notices :) 22846 2013-12-10 18:34:54 vjeux mcarter: awesome, let us know if you run into any problem :) 22847 2013-12-10 18:35:07 mcarter Most certainly. I am really enjoying learning React 22848 2013-12-10 18:35:12 vjeux and if you successfully ship it, feel free to write a blog post about it and i'll feature it on the blog 22849 2013-12-10 18:35:32 mcarter 10-4 22850 2013-12-10 18:36:01 zpao mcarter: what sort of project are you working on? always curious to hear the different sorts of things people are (or want to) use react for 22851 2013-12-10 18:36:14 mcarter Its a pro-bono project our agency picked up. Essentially using it to hit the Instagram API and suck in pictures and usernames for a certain hash tag and wire up Isotope to display and filter 22852 2013-12-10 18:36:43 mcarter Super simple. Originally it was using Backbone but figured it was a straight forward enough case to try it on 22853 2013-12-10 18:37:04 zpao sounds cool :) 22854 2013-12-10 18:37:19 mcarter I am working with another dev on another project to use React for a distributor zipcode locater component 22855 2013-12-10 18:38:59 mcarter The downside is the backend on the first project is .NET and a handful of our backend devs are normally hostile toward js or restful apis 22856 2013-12-10 18:39:43 Daniel15 mcarter: On the .NET world, WebAPI is really nice for creating RESTful APIs. 22857 2013-12-10 18:39:50 Daniel15 In* 22858 2013-12-10 18:42:07 mcarter @Daniel15 I know. A friend of mine demoed it to me. They placed their order locations on Google Earth in real-time using the WebAPI. It made me want to learn more .NET 22859 2013-12-10 18:44:20 vjeux this is always fascinating to learn about those kind of projects and see how computers are used to do so many different things 22860 2013-12-10 19:00:30 mcarter @vjeux totally. I'm always floored by sites 22861 2013-12-10 21:47:03 sspi If anybody is wondering, yes I know about React :-P 22862 2013-12-10 21:47:40 petehunt ? 22863 2013-12-10 21:47:57 sspi Had that question like 6 times :) 22864 2013-12-10 21:49:11 sspi Anyway tnx for the great experience, you guys are awesome :) 22865 2013-12-10 21:50:36 sspi Going back to adam now 22866 2013-12-10 21:50:48 sspi Amsterdam 22867 2013-12-10 22:09:12 mcarter When I set an onClick event on an element and log out the event, the synthetic mouse event seems fine but when I expand the object in dev tools all of the values are null 22868 2013-12-10 22:10:05 mcarter Has anybody else experienced this? 22869 2013-12-10 22:11:51 vjeux mcarter: we pool the events in order not to allocate them over an over again 22870 2013-12-10 22:12:20 vjeux you want serialize it before doing console.log 22871 2013-12-10 22:12:45 mcarter Interesting. Could you explain a bit more? I'm just curious :) 22872 2013-12-10 22:12:56 mcarter something like JSON.stringify? 22873 2013-12-10 22:13:01 vjeux yeah 22874 2013-12-10 22:13:20 vjeux the browser whenever an event is fired creates a new object with all the fields 22875 2013-12-10 22:13:36 vjeux for every listener that is called 22876 2013-12-10 22:13:47 vjeux this allocates a huge number of objects and is quite slow 22877 2013-12-10 22:14:09 vjeux in react we reuse the same event object over an over 22878 2013-12-10 22:14:30 vjeux this way it doesn't put useless pressure on the GC 22879 2013-12-10 22:14:34 petehunt http://www.html5rocks.com/en/tutorials/speed/static-mem-pools/ 22880 2013-12-10 22:14:55 mcarter Damn, thats awesome 22881 2013-12-10 22:15:07 mcarter Makes sense from a performance standpoint... Not letting the browser get in the way 22882 2013-12-10 22:16:22 vjeux the only problem is that chrome doesn't serialize the object when you do console.log 22883 2013-12-10 22:16:28 vjeux so when you expand, it looks at the live object 22884 2013-12-10 22:16:39 vjeux which deosn't represent the same value anymore in this case 22885 2013-12-10 22:19:41 zpao i was really confused the first time i had to debug that 22886 2013-12-10 22:22:17 vjeux me too :p 22887 2013-12-10 22:22:26 vjeux we should probably highlight it more on the docs 22888 2013-12-10 22:29:56 cpojer__ vjeux: where is that part in the code? :) 22889 2013-12-10 22:30:38 vjeux https://github.com/facebook/react/blob/8fbdb50a9dd6a712d4ac70ba8aae47a2a90a7811/src/event/synthetic/SyntheticEvent.js#L158 22890 2013-12-10 22:30:39 vjeux cpojer__: 22891 2013-12-10 22:30:44 cpojer__ thanks 22892 2013-12-10 22:32:12 cpojer__ oh I see, the pooler just creates an instance 22893 2013-12-10 22:32:14 cpojer__ upfront 22894 2013-12-10 22:35:56 vjeux one downside of the pooled structure is that you manually have to call free(). Therefore you are exposed to memory leaks if you don't pay attention. 22895 2013-12-10 22:38:02 cpojer__ I'd be guessing this is essentially what emscripten code does 22896 2013-12-10 22:38:12 cpojer__ it is just one giant allocation at the beginning 22897 2013-12-10 22:38:21 cpojer__ it increases start up time but it prevents the GC from stepping in 22898 2013-12-10 22:38:26 mcarter Thanks for the explanation of that, super helpful 22899 2013-12-10 22:39:31 vjeux cpojer__: emscriptem allocates one giant js memory block but within it it uses malloc to manage it 22900 2013-12-10 22:39:45 cpojer__ yea 22901 2013-12-10 22:39:59 cpojer__ well Pooler.allocate and Pooler.free is pretty much that 22902 2013-12-10 22:40:00 cpojer__ on a high-level 22903 2013-12-10 22:40:04 vjeux yeah 22904 2013-12-10 22:40:09 vjeux it's a custom malloc implementation 22905 2013-12-10 23:29:11 vjeux if anybody has some time 22906 2013-12-10 23:29:12 vjeux http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html 22907 2013-12-10 23:29:27 vjeux rewriting this example in react would be interesting 22908 2013-12-10 23:29:39 petehunt montage is legit 22909 2013-12-10 23:29:56 vjeux petehunt: yup, i went to their HQ and their demos are pretty hot 22910 2013-12-11 17:20:51 ssorallen yesterday @vjeux mentioned recreating Montage JS's Reddit client tutorial in React 22911 2013-12-11 17:21:08 ssorallen they walk through it in http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html, and the final code is http://montagejs.github.io/mfiddle/#!/7881457 22912 2013-12-11 17:21:22 ssorallen I recreated the final product with React last night: http://jsfiddle.net/ssorallen/fEsYt/ 22913 2013-12-11 17:39:27 mcarter @ssorallen: nice! 22914 2013-12-11 17:51:15 krs is there any think about more complex animations then the list one? 22915 2013-12-11 17:51:39 krs i started experimenting with QMLs animation syntax in jsx but wonder if there is anything in the pipeline 22916 2013-12-11 18:22:46 AndreZS Does reactjs work as an AMD module? 22917 2013-12-11 18:22:59 zpao AndreZS: it should! 22918 2013-12-11 18:23:48 AndreZS kk, thanks! Couldn't find a clear answer on the repo 22919 2013-12-11 18:23:51 zpao i think people are using it that way. we have a generic UMD wrapper in there so it should work "everywhere", though i know if you try to use r.js to pre-package, then it will fail 22920 2013-12-11 18:24:51 AndreZS alrighty 22921 2013-12-11 18:25:14 AndreZS gonna try see if this library is what I'm looking for 22922 2013-12-11 18:25:31 AndreZS hopefully it is! 22923 2013-12-11 18:25:46 zpao AndreZS: \\o/ if you decide it is and figure out the AMD thing, i wouldn't mind having https://github.com/facebook/react/pull/417 be a bit more complete 22924 2013-12-11 18:26:45 zpao it uses react with require, but it doesn't use it as a module, just as the global. having never used require, i don't know the right thing to do to get that example in, so pointers would be appreciated :) 22925 2013-12-11 18:27:33 AndreZS kk, I'll definitely improve that if I figure it out 22926 2013-12-11 18:29:08 zpao awesome. let me know if there are other parts of the getting started experience we can improve 22927 2013-12-11 18:34:46 cpojer_ zpao: https://github.com/facebook/react/pull/637 I think we can finally pull this :O 22928 2013-12-11 18:34:49 cpojer_ I removed all the slowness :D 22929 2013-12-11 18:34:52 cpojer_ evne for __DEV__ 22930 2013-12-11 18:35:08 cpojer_ although I hate that we have to make sure __DEV__ stuff isn't too slow because weirdos perf test against __DEV_ 22931 2013-12-11 18:35:12 cpojer_ sadpojer 22932 2013-12-11 18:35:52 petehunt __DEV__ perf usually isn't that important 22933 2013-12-11 18:36:12 petehunt as long as it doesn't greatly detract from the ux of core flows... that's when people get grumpy :) 22934 2013-12-11 18:36:23 cpojer_ "Please perf test this too. @jordwalke found that this key validation step was actually a huge performance bottle neck at one point in DEV and unfortunately people perf test DEV builds too. Makes us look bad." 22935 2013-12-11 18:36:33 zpao cpojer_: ? update the internal diff and make sure that's accepted. should just be stamping it at this point 22936 2013-12-11 18:36:35 cpojer_ from sema 22937 2013-12-11 18:36:39 cpojer_ zpao: working on it 22938 2013-12-11 18:36:47 cpojer_ I did the impossible and updated mobile too though 22939 2013-12-11 18:36:55 cpojer_ now I'm trying to figure out *again* how to revert that with mercurial 22940 2013-12-11 18:36:59 cpojer_ I just cannot remember it 22941 2013-12-11 18:37:40 cpojer_ can we not just.. replace everything with React? 22942 2013-12-11 18:37:43 cpojer_ version control systems? 22943 2013-12-11 18:37:52 petehunt ReactDB yo 22944 2013-12-11 18:38:06 zpao cpojer_: hg revert path/to/files? 22945 2013-12-11 18:38:25 cpojer_ zpao: I think my problem is that I'm in a rebase/merge situation 22946 2013-12-11 18:39:14 zpao not sure how you got there, but good luck then! (i think hg update path/to/files also works...) 22947 2013-12-11 18:42:21 ssorallen @zpao I am using React as an AMD module with Require JS without using the global React 22948 2013-12-11 18:42:26 ssorallen I can commet on your PR 22949 2013-12-11 18:42:26 cpojer_ because the generated source files alwas have merge conflicts 22950 2013-12-11 18:42:32 ssorallen comment* 22951 2013-12-11 18:44:08 zpao ssorallen: that would be awesome, thanks! 22952 2013-12-11 18:49:57 vjeux cpojer_: are you going to remove the warning on move it somewhere less expensive? 22953 2013-12-11 18:50:16 cpojer_ which warning? 22954 2013-12-11 18:50:31 vjeux cpojer_ 22955 2013-12-11 18:50:31 vjeux I removed all the slowness :D 22956 2013-12-11 18:51:12 vjeux whatever you removed, maybe not a warning 22957 2013-12-11 18:58:02 ssorallen @zpao let me know if my comment doesn't make sense 22958 2013-12-11 18:59:49 zpao ssorallen: makes sense to me with my limited amount of requirejs knowledge. the config part was what i was missing 22959 2013-12-11 18:59:58 zpao thanks :) 22960 2013-12-11 19:01:22 ssorallen cool, sure thing 22961 2013-12-11 19:02:01 ssorallen I am using the require-jsx plugin to work with JSX on the fly and wrote a short "build" script to compile with JSX and then optimize with R.js 22962 2013-12-11 19:14:36 vjeux what is R.js/ 22963 2013-12-11 19:14:37 vjeux ? 22964 2013-12-11 19:14:50 vjeux ohh require.js 22965 2013-12-11 19:15:44 ssorallen the Require JS optimizer 22966 2013-12-11 19:15:52 zpao vjeux: r.js builds up "optimized" packages, kinda like browserify. so it looks at the require statements and rewrites them. 22967 2013-12-11 19:16:03 vjeux got it 22968 2013-12-11 19:16:21 zpao since our react.js file is already browserified, visiting those require statements make r.js explode in confusion 22969 2013-12-11 19:32:49 vjeux https://github.com/facebook/react-page/issues/41 22970 2013-12-11 19:32:49 vjeux :( 22971 2013-12-11 19:33:00 vjeux no utf8 for me 22972 2013-12-11 19:33:19 vjeux and no facebook open graph tags integration :p 22973 2013-12-11 19:46:02 zpao httpEquiv, charSet 22974 2013-12-11 19:46:08 vjeux zpao: ohhh 22975 2013-12-11 19:46:10 vjeux ok :( 22976 2013-12-11 19:46:25 zpao https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js 22977 2013-12-11 19:46:28 vjeux properTy? 22978 2013-12-11 19:46:31 zpao haha 22979 2013-12-11 19:46:37 balpert zpao: fixed 22980 2013-12-11 19:47:04 zpao vjeux: property isn't a standard... 22981 2013-12-11 19:47:12 balpert normally I run git diff before committing but I forgot I was changing stuff 22982 2013-12-11 19:47:17 vjeux zpao: so what do we do? 22983 2013-12-11 19:47:44 zpao vjeux: isn't that what name is for? 22984 2013-12-11 19:48:24 zpao balpert: no worries :) 22985 2013-12-11 19:48:41 zpao vjeux: i know twitter says to just use name 22986 2013-12-11 19:48:45 balpert zpao: I must be asleep or something 22987 2013-12-11 19:48:46 balpert :) 22988 2013-12-11 19:48:47 zpao for their "og" stuff 22989 2013-12-11 19:49:38 vjeux zpao: well, fb docs says to use property 22990 2013-12-11 19:49:47 vjeux https://developers.facebook.com/docs/opengraph/getting-started 22991 2013-12-11 19:49:50 vjeux 22992 2013-12-11 19:50:07 vjeux let see if using name it's working 22993 2013-12-11 19:52:38 zpao property comes from RDFa 22994 2013-12-11 19:53:45 vjeux nop, open graph requires to use property=, it doesn't work with name= 22995 2013-12-11 19:54:03 vjeux should we add property so that our pages can work with fb? :p 22996 2013-12-11 19:55:27 vjeux or should we fix open graph so that it accepts standard html tags 22997 2013-12-11 19:58:28 vjeux wow, i'm able to use `` strings in react-page 22998 2013-12-11 19:58:31 vjeux so sweet 22999 2013-12-11 20:01:56 zpao ughhh fine. but in a non-standard block like we have autoCapitalize 23000 2013-12-11 20:04:35 vjeux yay issue 42 23001 2013-12-11 20:04:36 vjeux https://github.com/facebook/react-page/issues/42 23002 2013-12-11 20:09:41 zpao probably needs to be done in react itself 23003 2013-12-11 20:10:00 zpao there should only be 1 child for script tags and it should just be text 23004 2013-12-11 20:10:13 zpao we shouldn't do the other text child stuff we do with spans 23005 2013-12-11 20:12:27 vjeux zpao: should I open those issues in the react repo? 23006 2013-12-11 20:12:34 vjeux instead of react-page 23007 2013-12-11 20:13:00 zpao yea. react page is just the wrapper stuff, doesn't do any additional processing of react code 23008 2013-12-11 20:13:04 vjeux ok 23009 2013-12-11 20:17:17 vjeux http://fooo.fr:8080/react/support.html 23010 2013-12-11 20:17:28 vjeux the support page is now working with react :p 23011 2013-12-11 20:24:42 vjeux zpao: do you really care about sass? I'm not really sure how to make it work with react-page 23012 2013-12-11 20:25:37 vjeux i guess i could try to see how it could work :p 23013 2013-12-11 20:41:05 balpert vjeux: probably you just want to put the GA JS in componentDidMount or something? 23014 2013-12-11 20:41:21 vjeux balpert: i want to use server side rendering 23015 2013-12-11 20:41:41 balpert well right 23016 2013-12-11 20:41:46 vjeux so it has to be in a '; 27610 2013-12-24 03:32:33 vjeux something like this? 27611 2013-12-24 03:32:46 tlack yeah, exactly, but done 'proper' :) 27612 2013-12-24 03:34:27 vjeux not sure if there's a proper way :p 27613 2013-12-24 03:37:20 tlack its common to xchange configuration data (such as software build numbers, backend API references and keys, stuff like that) from the server's state into the client's; i do it in every app that ha a backing component because it makes sense to centralize some publicly readable cnonfig data 27614 2013-12-24 04:03:18 petehunt vjeux: here 27615 2013-12-24 04:40:26 rcs Is https://github.com/mxw/vim-jsx what folks are using? 27616 2013-12-24 04:49:58 tlack how do i include React.addons.LinkedStateMixin in my react-page app? 27617 2013-12-24 04:56:16 rcs Do you need to "React = require('react/addons')" ? https://github.com/facebook/react/tree/153b75f186a78c876cc11678d1abbdf5e13a3b5b/npm-react#example-usage 27618 2013-12-24 04:56:47 rcs (i'm not sure what react-page is doing for requiring react) 27619 2013-12-24 05:02:44 tlack it builds it in an automated way, but i don't know the correct incantations to affect the included modules 27620 2013-12-24 05:05:22 petehunt tlack: require('LinkedStateMixin') 27621 2013-12-24 05:06:09 tlack does that populate it into React.addons, or do i keep a reference to that, that i then use inside my component's createClass({})? 27622 2013-12-24 05:06:29 petehunt tlack: that just gives you the module 27623 2013-12-24 05:24:29 jules048 anyone free to answer a question on keying dynamic children? 27624 2013-12-24 05:24:46 balpert jules048: yup! 27625 2013-12-24 05:53:46 vjeux http://fooo.fr:4000/react/docs/talks.html 27626 2013-12-24 05:53:50 vjeux what do you guys think? 27627 2013-12-24 06:01:09 balpert it has become painfully obvious to me that Proxima Nova doesn't have fixed-width numerals :) 27628 2013-12-24 06:01:27 vjeux balpert: haha :p 27629 2013-12-24 06:03:04 collypops balpert, we always revert to the browser sans-serif for tables/charts on the ABC website, where we use Proxima Nova everywhere else 27630 2013-12-24 06:03:07 collypops nightmare 27631 2013-12-24 06:03:23 balpert I'm surprised you trust browser sans-serif to be fixed 27632 2013-12-24 06:03:36 petehunt vjeux: can you add http://www.youtube.com/watch?v=R2CGKiNnPFo to the PR 27633 2013-12-24 06:03:38 petehunt then we can shipit 27634 2013-12-24 06:03:58 vjeux petehunt: ok, i'm going to label it clearly as being in russian :p 27635 2013-12-24 06:04:05 petehunt vjeux: yep 27636 2013-12-24 06:04:18 petehunt also, maybe call the section "videos" (even though it has the jabber in there) 27637 2013-12-24 06:04:26 balpert petehunt: do you speak russian? how do you know it's not hating on React! 27638 2013-12-24 06:04:28 petehunt and put it on the top-level "quck start"? 27639 2013-12-24 06:04:38 vjeux i can do that 27640 2013-12-24 06:04:38 balpert I would say "Talks About React" 27641 2013-12-24 06:04:41 petehunt balpert: it's piranha! so unless it's a really long-term elaborate troll... 27642 2013-12-24 06:05:01 petehunt how about "Presentations" then? 27643 2013-12-24 06:05:10 petehunt i do like the word "videos" though 27644 2013-12-24 06:05:22 petehunt i think some people will land on the site and cmd-f for video since they want to see one 27645 2013-12-24 06:05:32 vjeux yeah, i was thinking about naming it videos 27646 2013-12-24 06:05:38 vjeux ok let's do that 27647 2013-12-24 06:05:45 petehunt what do you think of putting it on "quick start" 27648 2013-12-24 06:05:50 vjeux petehunt: i like it 27649 2013-12-24 06:05:57 vjeux i wasn't sure if it was worth it 27650 2013-12-24 06:06:06 vjeux but the more i think about it, the more i feel like it belongs there 27651 2013-12-24 06:07:07 petehunt ok i thiunk i fixed it 27652 2013-12-24 06:07:09 petehunt lets try this again 27653 2013-12-24 06:07:13 vjeux petehunt: ? 27654 2013-12-24 06:07:49 tlack how do i add custom routes to react-page-middleware? i need to send /:whatever to one of my controllers 27655 2013-12-24 06:07:53 vjeux petehunt: your timezone is off :( 27656 2013-12-24 06:07:56 petehunt WTF 27657 2013-12-24 06:08:01 vjeux or maybe mine 27658 2013-12-24 06:08:05 petehunt cant a guy push from massachusetts 27659 2013-12-24 06:08:10 petehunt does this matter? 27660 2013-12-24 06:08:19 petehunt tlack: gl hf 27661 2013-12-24 06:08:28 vjeux petehunt: dunno, only rss users will notice :p 27662 2013-12-24 06:08:57 tlack petehunt: as a stopgap: i already have custom express routes defined for /api/, how can i setup a custom route that would trigger a control? 27663 2013-12-24 06:09:21 petehunt tlack: sorry, i don't really know much 27664 2013-12-24 06:09:47 petehunt tlack: this is the extent of my knowledge: https://github.com/facebook/react-page-middleware/pull/13 27665 2013-12-24 06:10:28 petehunt tlack: please open issues on react-page to document what we need to improve. it's currently only used in...nontraditional ways... right now 27666 2013-12-24 06:10:51 petehunt tlack: also, are you in our google group? this may interest you https://groups.google.com/forum/#!topic/reactjs/hUfrfzNz4xA 27667 2013-12-24 06:14:32 vjeux petehunt: balpert: http://fooo.fr:4000/react/docs/videos.html 27668 2013-12-24 06:15:05 petehunt vjeux: so if we were to do a welcome to react screencast, we could put it on that page, right? 27669 2013-12-24 06:15:18 balpert fun + React + ClojureScript - Small Talk KyivJS Meetup 27670 2013-12-24 06:15:28 vjeux petehunt: yeah 27671 2013-12-24 06:15:37 balpert that equation reads a little weirdly 27672 2013-12-24 06:15:53 vjeux petehunt: if there are more we'll probably want to change the layout a bit 27673 2013-12-24 06:15:55 vjeux but yeah 27674 2013-12-24 06:16:01 vjeux balpert: this is the title of the talk 27675 2013-12-24 06:16:05 vjeux should i put quotes around? 27676 2013-12-24 06:16:17 balpert vjeux: maybe? or put the location in parens or something 27677 2013-12-24 06:16:35 vjeux going to go with quotes :) 27678 2013-12-24 06:17:51 balpert can someone tell me why FB is always asking to run Unity Player for me now? 27679 2013-12-24 06:18:00 vjeux wat 27680 2013-12-24 06:18:05 vjeux petehunt: https://github.com/facebook/react/pull/704 :) 27681 2013-12-24 06:18:33 vjeux balpert: are you playing some games? 27682 2013-12-24 06:18:35 petehunt balpert: maybe a weird platform app, a ridiculous a/b test, or you got hacked 27683 2013-12-24 06:19:15 balpert isn't happening right now but https://www.facebook.com/ sometimes has Chrome telling me that it wants Unity Player 27684 2013-12-24 06:19:20 balpert it was doing it a minute ago 27685 2013-12-24 06:19:32 petehunt vjeux: missing the nav update 27686 2013-12-24 06:19:54 vjeux petehunt: screenshot is not up to date 27687 2013-12-24 06:19:58 vjeux http://fooo.fr:4000/react/docs/videos.html 27688 2013-12-24 06:20:09 petehunt i'm looking at nav_docs.yml 27689 2013-12-24 06:20:28 vjeux oh good find 27690 2013-12-24 06:20:34 vjeux i didn't do git add . in the right repo 27691 2013-12-24 06:20:36 vjeux directory 27692 2013-12-24 06:21:41 vjeux petehunt: should be good now 27693 2013-12-24 06:21:59 petehunt ok 27694 2013-12-24 06:28:11 vjeux that's already 6 talks, that's not bad :) 27695 2013-12-24 06:28:44 vjeux 2 (+1ish) not made by react people 27696 2013-12-24 06:28:51 vjeux react devs 27697 2013-12-24 06:30:31 vjeux petehunt: are you going to push it to the website? 27698 2013-12-24 06:30:40 petehunt vjeux: i thought you were 27699 2013-12-24 06:30:49 balpert lol 27700 2013-12-24 06:30:52 vjeux lol 27701 2013-12-24 06:31:03 petehunt doing it 27702 2013-12-24 06:31:09 vjeux (y) exercises for you 27703 2013-12-24 06:31:17 vjeux balpert: your next! 27704 2013-12-24 06:31:26 balpert vjeux: hmm? 27705 2013-12-24 06:32:13 vjeux balpert: just joking :p 27706 2013-12-24 06:32:46 balpert I have no idea what's going on 27707 2013-12-24 06:32:52 tlack petehunt: i guess i will add an nginx-level url rewriter eek. worth opening an issue about this or it's well known? btw a 404 handler can work well in circumstances like this because it acts as an 'unlimited router' in a way - write your own custom url parsing code there, and the lower level library will bubble up to your 404 when it can't get a url. 27708 2013-12-24 06:33:04 petehunt tlack: all issues please 27709 2013-12-24 06:37:02 chenglou front page video causes stutter when scrolling and is already in the videos section 27710 2013-12-24 06:37:15 vjeux chenglou: yeah we should get rid of it 27711 2013-12-24 06:37:21 vjeux chenglou: wanna submit a pr? 27712 2013-12-24 06:37:24 vjeux http://facebook.github.io/react/docs/videos.html yay! 27713 2013-12-24 06:37:24 chenglou kk 27714 2013-12-24 06:37:47 chenglou happy to pulverize anything that causes stutter 27715 2013-12-24 06:38:28 vjeux i wrote this 3 months ago when there was only one talk available 27716 2013-12-24 06:38:54 vjeux i feel like the video page is better 27717 2013-12-24 06:40:18 petehunt yeah kill it 27718 2013-12-24 06:42:25 petehunt vjeux: can you review 1 more diff 27719 2013-12-24 06:42:27 petehunt then i need to sleep 27720 2013-12-24 06:42:29 vjeux petehunt: 27721 2013-12-24 06:42:30 vjeux sure 27722 2013-12-24 06:43:51 petehunt open source rocks 27723 2013-12-24 06:44:12 vjeux petehunt: +1 27724 2013-12-24 06:44:17 chenglou open-source got me a job ™ 27725 2013-12-24 06:45:29 vjeux chenglou: your commit small hash doesn't contain a-f characters fyi :p 0519734 27726 2013-12-24 06:46:58 chenglou aaahh the joy of 60fps mac scrolling 27727 2013-12-24 06:48:04 bbloom petehunt: hey, what did you want earlier? 27728 2013-12-24 06:48:37 petehunt bbloom: i was messing around with sweetjs + mori 27729 2013-12-24 06:48:52 petehunt was wondering if you had any thoughts on what a nice persistent data structure syntax for JS would look like 27730 2013-12-24 06:49:09 bbloom petehunt: hmm interesting. you probably primarily need an arrow macro 27731 2013-12-24 06:49:20 bbloom petehunt: -> and ->> 27732 2013-12-24 06:49:37 petehunt is that a clojureism 27733 2013-12-24 06:49:53 bbloom petehunt: yeah, basically (-> x y z) translates to (z (y x)) 27734 2013-12-24 06:50:28 bbloom petehunt: and (-> x (y 1) z) translates to (z (y x 1)) while (->> x (y 1) z) translates to (z (y 1 x)) 27735 2013-12-24 06:50:35 bbloom they are called "thread first" and "thread last" 27736 2013-12-24 06:50:44 chenglou i.e. vanilla underscore vs underscore with chaining 27737 2013-12-24 06:50:49 bbloom basically, yeah 27738 2013-12-24 06:50:59 bbloom super useful for mimicking OO chaining in a functional language 27739 2013-12-24 06:51:46 petehunt hm 27740 2013-12-24 06:52:26 bbloom i don't know what sweet.js can do 27741 2013-12-24 06:52:36 bbloom maybe you can make a .. double dot operator that translates x..y to y(x) ? 27742 2013-12-24 06:53:50 petehunt you need to start with a keyword 27743 2013-12-24 06:54:18 bbloom ah, yes, that would make sense. your expression needs a "head" 27744 2013-12-24 06:54:21 bbloom hurray lisp :-) 27745 2013-12-24 06:54:43 bbloom can it be variadic? 27746 2013-12-24 06:54:44 tlack petehunt: i wrote up my ghettoness so it wont be lost to google https://gist.github.com/tlack/8109660 27747 2013-12-24 06:54:49 vjeux people on the internet are really funny. they really don't know how to be reasonable. https://twitter.com/_skryl_/status/415353184073158657 27748 2013-12-24 06:55:03 petehunt bbloom: yes 27749 2013-12-24 06:55:11 petehunt i think 27750 2013-12-24 06:55:14 petehunt there may be some constraints 27751 2013-12-24 06:55:24 bbloom oh i see ... operator or something 27752 2013-12-24 06:55:27 vjeux tlack: <3 server-side rewriting is the best 27753 2013-12-24 06:55:31 bbloom maybe variadic within parens? 27754 2013-12-24 06:55:43 petehunt yeah, we can pick a delimiter 27755 2013-12-24 06:56:12 tlack vjeux: disagree strongly but that's another topic :) 27756 2013-12-24 06:56:27 vjeux tlack: haha :p 27757 2013-12-24 06:56:58 bbloom petehunt: ugh. this sort of pattern matching with magic operator behavior and what not offends me. the weird (,) thing and what not 27758 2013-12-24 06:56:59 vjeux tlack: but at least it should solve one problem of react-pag 27759 2013-12-24 06:57:15 tlack vjeux: yep! and not that uncommon of a problem either 27760 2013-12-24 06:57:16 bbloom petehunt: so much extra complexity. might as well just write a BNF at that point 27761 2013-12-24 06:57:19 petehunt yea 27762 2013-12-24 06:57:31 vjeux tlack: but you'll still run into an issue that you have to load a bunch of js you don't want to 27763 2013-12-24 06:57:31 petehunt a lot of guess and check involved 27764 2013-12-24 06:57:51 vjeux since we don't have dynamic require :( 27765 2013-12-24 06:58:41 tlack vjeux: can you explain? i know generally what you mean (require() is sync so we preload ERRYTHING that might be needed and look it up in the global cache object) 27766 2013-12-24 06:58:53 tlack vjeux: but i dont understand how that would affect me in process 27767 2013-12-24 06:58:57 bbloom petehunt: beyond that, you can ONLY do macro-by-example it looks like. which makes sense b/c there are tons of restrictions in order to not break existing code, etc 27768 2013-12-24 06:59:20 petehunt bbloom: i think it's enough to make something to make mori less scary though 27769 2013-12-24 06:59:22 bbloom petehunt: what you really want is to parse some sequence or tree of tokens in to an AST tree, then macro expand that. 27770 2013-12-24 06:59:26 vjeux tlack: for example on the react website rewritten with react-page, i have one js endpoint per blog post 27771 2013-12-24 06:59:51 vjeux because if i have only one generic endpoint, then i have to require all the blog articles for each blog article 27772 2013-12-24 07:00:03 vjeux because i cannot require them on the fly :( 27773 2013-12-24 07:00:06 bbloom petehunt: yeah, probably just need something -> like, but we could probably also just cheat & create a chaining wrapper like underscore does 27774 2013-12-24 07:00:22 vjeux tlack: but my setup is a bit different because the content of the blog is required 27775 2013-12-24 07:00:27 vjeux which may not be the usual case 27776 2013-12-24 07:00:30 tlack vjeux: why can't you make the component load its own content? 27777 2013-12-24 07:00:47 bbloom petehunt: i suggest you go read about ->, ->>, some->, as->, etc, then let me know what you come up with 27778 2013-12-24 07:00:50 bbloom i'm off to bed, cya 27779 2013-12-24 07:01:00 tlack getInitialState() does a callback to /api/, and then call setState() when it's done.. 27780 2013-12-24 07:01:01 petehunt bbloom: 5 min into a video, thanks 27781 2013-12-24 07:01:05 vjeux tlack: as far as i know, there's no easy solution to fetch anything with react-page 27782 2013-12-24 07:01:20 tlack when i say callback, i meant ajax GET 27783 2013-12-24 07:01:23 vjeux anyway gtg to sleep 27784 2013-12-24 07:01:36 vjeux oh, but then you don't have a static website anymore :p 27785 2013-12-24 07:01:36 tlack i'll have a proof of concept for you soon, i hope - lump.co is almost alive! 27786 2013-12-24 07:01:39 bbloom petehunt: see also https://github.com/rplevy/swiss-arrows if you want to go overboard. some people like those, most of us cringe 27787 2013-12-24 07:01:39 bbloom :-) 27788 2013-12-24 07:01:47 tlack static websites limit overall composability 27789 2013-12-24 07:01:50 tlack what is "static" anyway 27790 2013-12-24 07:01:55 tlack should just be a bunch of URLs that fire shit off 27791 2013-12-24 07:01:56 tlack imh 27792 2013-12-24 07:01:58 vjeux fully server-side rendered 27793 2013-12-24 07:01:58 tlack o 27794 2013-12-24 07:02:02 tlack the domain itself is the company, the api all its data 27795 2013-12-24 07:02:14 vjeux anyway really have to go :p 27796 2013-12-24 07:02:18 tlack you can still do that - lets talk later! 27797 2013-12-24 07:58:38 tlack i want to try to use the idea of mixins to add a class to my component based on its state. how can i set this up so that the person using my mixin doesnt have to know the name of the state variable and assign it to className directly? i could make them use
    but i'd rather the mixin do that itself, if it can. am i missing something? can i add a className to... 27798 2013-12-24 07:58:40 tlack ...a component w/o this.getDOMNode()? 27799 2013-12-24 07:58:50 tlack (when i say class i mean css class) 27800 2013-12-24 08:00:29 tlack and yes i know about the animation plugin. i want to understand the concept (and i dont find that api to be ideal for this purpose; it should be instantly on, not require changes to your render() code) 27801 2013-12-24 08:06:12 chenglou tlack: not unless with some obscure hack 27802 2013-12-24 11:27:48 dejanr andreypopp: hi, wanted to ask you how you separate serverside from clientside in react-app-express 27803 2013-12-24 11:28:18 andreypopp dejanr: what do you mean? 27804 2013-12-24 11:28:30 dejanr andreypopp: lets say you want something to get from db and render serverside, but something lazy load and render on clientside 27805 2013-12-24 11:29:09 andreypopp dejanr: for that you just do XHR, you can make XHR from server as well 27806 2013-12-24 11:29:30 andreypopp dejanr: but I agree there should be a way to bypass HTTP stack and do db calls directly 27807 2013-12-24 11:29:55 andreypopp dejanr: I think I will implement this as DI — you would override some modules for server-side 27808 2013-12-24 11:30:49 andreypopp so you would have some module for getting data and two different impls — one for server where it’s just interface to your db and one for browser where it does XHRs 27809 2013-12-24 11:31:15 dejanr andreypopp: cool, createController doesnt have express request/response objects? 27810 2013-12-24 11:31:39 andreypopp dejanr: nope, why do you need them? 27811 2013-12-24 11:32:01 andreypopp dejanr: did you see the fetchData method? https://github.com/andreypopp/react-app-express/blob/master/client.js#L30 27812 2013-12-24 11:32:36 dejanr andreypopp: whats idiomatic way for rendering component for logedin and logedout user, which i would prefer to do on serverside 27813 2013-12-24 11:32:38 andreypopp dejanr: that’s the place where to fetch data and it takes request argument which is {path: …, query: {…}} 27814 2013-12-24 11:33:35 dejanr andreypopp: cool, thanks 27815 2013-12-24 11:35:46 andreypopp dejanr: yeah, good question, I should probably expose a hook so you can populate react-app request object with info from express’s request object — in case of authz — from cookies 27816 2013-12-24 11:42:27 dejanr andreypopp: yes it would be cool if we could bootstrap data from serveRenderedPage 27817 2013-12-24 12:13:35 dejanr andreypopp: do you have idea what this error stands for: Error: module "./lib-cov/express" not found 27818 2013-12-24 12:13:52 dejanr andreypopp: i have reorganized a bit react-app-express 27819 2013-12-24 12:13:59 andreypopp dejanr: nope, how do you get it? 27820 2013-12-24 12:14:57 andreypopp dejanr: you are probably trying to require(‘express’) or some module which requires it from client-side code 27821 2013-12-24 12:15:47 dejanr andreypopp: it shouldn't be 27822 2013-12-24 12:19:20 andreypopp dejanr: did you resolve the issue? I can help you if you post your code to gist 27823 2013-12-24 12:19:41 andreypopp dejanr: does this error have origin from browserify? 27824 2013-12-24 12:19:59 dejanr andreypopp: yes i did, it was wrong file required 27825 2013-12-24 12:20:04 andreypopp ok 27826 2013-12-24 12:20:21 dejanr andreypopp: express was indeed required 27827 2013-12-24 12:25:10 dejanr andreypopp: i have it all working now 27828 2013-12-24 12:25:20 andreypopp dejanr: cool! 27829 2013-12-24 12:25:40 andreypopp dejanr: file issues for bugs and missed functionality! 27830 2013-12-24 12:26:46 andreypopp *missing 27831 2013-12-24 12:27:33 dejanr andreypopp: i will, definitly going to use this for new project 27832 2013-12-24 12:30:40 dejanr andreypopp: is it ok to use browserify like this in production, or it would be better to build all and just switch with build in production? 27833 2013-12-24 12:31:22 andreypopp dejanr: yeah, you should build the bundle and serve it with express.static or better with nginx or CDN 27834 2013-12-24 12:32:00 andreypopp NODE_ENV=production browserify -r ./client.js:./app -t reactify | uglifyjs -cm | gzip > bundle.js 27835 2013-12-24 12:32:56 dejanr andreypopp: and first param inside serveRenderedPage could be a promise which is resolved to a build? 27836 2013-12-24 12:33:22 dejanr andreypopp: instead of bundler 27837 2013-12-24 12:34:14 andreypopp dejanr: yes 27838 2013-12-24 12:34:27 andreypopp dejanr: a function which returns a proimise 27839 2013-12-24 12:36:00 dejanr andreypopp: for clientside javascript could be easy, i was talking for serverside bundler usage 27840 2013-12-24 12:36:18 dejanr andreypopp: ok great 27841 2013-12-24 12:36:42 andreypopp dejanr: yes, I get it, you just read bundle into a var on server init and create a promise which resolves to it 27842 2013-12-24 12:40:41 syranide this was interesting... apparently for flash , document.getElementById("obj") and this.refs.obj.getDOMNode() does not yield the same object... 27843 2013-12-24 12:41:11 syranide or I'm just a collossal idiot 27844 2013-12-24 13:15:33 dejanr there is no need for document ready initialization of reactjs apps? virtual dom updates and hook up into dom correctly? 27845 2013-12-24 17:36:00 vjeux_ dejanr: yup, react manages the dom itself so we don't need to listen to document ready or the kind 27846 2013-12-24 17:37:46 justicefries react works out of the box with browserify yeah? 27847 2013-12-24 17:38:39 vjeux justicefries: i've heard many people use it with browserify 27848 2013-12-24 17:38:54 vjeux but since react only exports one variable that's less of an issue 27849 2013-12-24 17:39:01 justicefries oh, it does export 27850 2013-12-24 17:39:02 justicefries excellent 27851 2013-12-24 17:39:33 justicefries i guess that makes sense 27852 2013-12-24 17:39:35 justicefries silly question 27853 2013-12-24 17:39:58 vjeux https://npmjs.org/package/grunt-react 27854 2013-12-24 17:40:08 vjeux "It also works great with grunt-browserify!" 27855 2013-12-24 17:42:23 justicefries sweeeet. 27856 2013-12-24 17:42:35 justicefries I won't be using JSX templates, but that's just me. :D 27857 2013-12-24 17:43:27 vjeux justicefries: you can always change your mind once you understand how react work :) 27858 2013-12-24 17:43:37 dejanr andreypopp: how do you set page title? i dont get how from where is rendered.title generated 27859 2013-12-24 17:45:34 dejanr vjeux: have you been using react-app-midleware maybe? 27860 2013-12-24 17:46:00 vjeux dejanr: not really :x 27861 2013-12-24 17:46:16 vjeux this part of react is still very much explorative and work in progress 27862 2013-12-24 17:48:04 andreypopp dejanr: no way to do this currently, how do you want to do that? I can commit this feature right now 27863 2013-12-24 17:48:21 andreypopp what about getTitle() method on pages? 27864 2013-12-24 17:49:19 petehunt andreypopp: render a component? 27865 2013-12-24 17:49:54 andreypopp petehunt: nope, provide a method just like getInitialState 27866 2013-12-24 17:50:23 andreypopp petehunt: I don’t render in so I can manage document.title via React 27867 2013-12-24 17:50:30 andreypopp s/can/cannot/ 27868 2013-12-24 17:50:31 petehunt rendering a component could be nice, because it could reconcile 27869 2013-12-24 17:50:45 dejanr andreypopp: like this? https://gist.github.com/6115c961b1e960d2c226 27870 2013-12-24 17:50:48 petehunt andreypopp: just return this.props.children from render and manage the title with lifecycle methods 27871 2013-12-24 17:51:05 andreypopp petehunt: yeah, but rendering component into and is broken right now 27872 2013-12-24 17:51:11 andreypopp dejanr: yeah 27873 2013-12-24 17:51:12 petehunt i know 27874 2013-12-24 17:51:16 petehunt i'm not saying to do that 27875 2013-12-24 17:52:19 petehunt andreypopp: http://jsfiddle.net/2sK9p/ 27876 2013-12-24 17:52:51 petehunt gotta run though. later! 27877 2013-12-24 17:53:33 andreypopp petehunt: ah, ok, but that’s an option! dejanr, did you check the fiddle? http://jsfiddle.net/2sK9p/ 27878 2013-12-24 17:55:37 andreypopp dejanr: http://jsfiddle.net/WCpaS/1/ 27879 2013-12-24 17:55:45 andreypopp you can even factor it out to mixin 27880 2013-12-24 17:56:06 andreypopp I think this is why I didn’t implement it in react-app-controller, because it’s easy to implement like this 27881 2013-12-24 17:56:20 andreypopp petehunt: thanks 27882 2013-12-24 17:59:22 dejanr andreypopp: understood, thanks 27883 2013-12-24 18:01:38 dejanr andreypopp: this makes a lot of sense, reusing page component 27884 2013-12-24 18:06:59 petehunt need to get the title into the static html though, right 27885 2013-12-24 18:07:01 dejanr andreypopp: i saw that your controllers also have support for mixins 27886 2013-12-24 18:09:39 andreypopp petehunt: yeah, but that’s not a big issue, I think 27887 2013-12-24 18:09:55 andreypopp dejanr: they are just regular React components, so yes, they support mixins 27888 2013-12-24 18:11:04 petehunt btw, at fb we definitely discourage mixins as much as possible 27889 2013-12-24 18:11:41 petehunt using them here is fine, but encouraging people to use them a lot can lead to bad code (like people using mixins to store computed values in state) 27890 2013-12-24 18:11:50 andreypopp petehunt: even for that kind of functionality? 27891 2013-12-24 18:11:55 andreypopp petehunt: ah, ok, I agree 27892 2013-12-24 18:12:01 petehunt andreypopp: no this functionality is what they are designed for imo 27893 2013-12-24 18:12:22 petehunt but i always favor composition over mixins if i can pull it off 27894 2013-12-24 18:14:04 dejanr do you have idea why this occured: Error: Invariant Violation: ReactCompositeComponent.render() 27895 2013-12-24 18:14:33 dejanr here is a full message: https://gist.github.com/f6850f128b3b4a5d9696 27896 2013-12-24 18:15:15 andreypopp dejanr: if you pass debug: true as an option you can get correct filenames and line numbers in stack traces 27897 2013-12-24 18:15:33 andreypopp dejanr: some of you pages probably returns not a React component from .render() 27898 2013-12-24 18:22:06 dejanr andreypopp: is this correct component composition: https://gist.github.com/dejanr/ee55bbf4ea59e3258b73 27899 2013-12-24 18:23:28 andreypopp dejanr: https://gist.github.com/dejanr/ee55bbf4ea59e3258b73#file-page-js-L14 — the problem is here 27900 2013-12-24 18:23:42 andreypopp dejanr: this.props.children is an array 27901 2013-12-24 18:24:02 andreypopp dejanr: you should wrap it in a component, probably React.DOM.div 27902 2013-12-24 18:24:18 andreypopp this is known limitation of React currently and I think syranide is working to fix that 27903 2013-12-24 18:28:11 dejanr andreypopp: sry could you repeat, i have problems with irssi inside tmux 27904 2013-12-24 18:28:45 andreypopp dejanr: https://gist.github.com/dejanr/ee55bbf4ea59e3258b73#file-page-js-L14 — that’s the problem, this.props.children is an array. 27905 2013-12-24 18:29:13 andreypopp dejanr: currently React component should “own” the DOM node, this is known limitations and I think it will be fixed in the near future 27906 2013-12-24 18:29:20 dejanr andreypopp: aha ok, i read about that 27907 2013-12-24 18:39:47 dejanr andreypopp: its working, this looks lovely so far 27908 2013-12-24 18:40:02 andreypopp dejanr: nice! 27909 2013-12-24 19:08:04 dejanr andreypopp: document.title do the trick, but its not really rendered on server side 27910 2013-12-24 19:09:29 andreypopp dejanr: yeah, I need to make react-app-middleware to call getTitle on a current page 27911 2013-12-24 19:09:36 andreypopp dejanr: https://github.com/andreypopp/react-app-middleware/issues/1 created an issue 27912 2013-12-24 19:09:52 dejanr andreypopp: oki, cool 27913 2013-12-24 19:29:12 krs hello 27914 2013-12-24 19:29:24 krs is it possible to get the root node of a component without using a ref? 27915 2013-12-24 19:52:03 inkwellian Question for room... I have a form with quite a few form fields and I'd like to pull up an onChange handler to the form level like this: http://jsbin.com/EkAcUJuM/6/edit?js,output 27916 2013-12-24 19:52:23 inkwellian As opposed to putting an onChange on all of the individual fields. 27917 2013-12-24 19:52:58 inkwellian It seems to work on Chrome/FF, but of course, IE isn't bubbling the change event. 27918 2013-12-24 19:53:41 inkwellian I'm curious if that's something React's SyntheticEvents are supposed to address and I'm just doing something wrong, or am I just to hopeful? :) 27919 2013-12-24 20:22:57 balpert krs: this.getDOMNode() 27920 2013-12-24 20:23:30 balpert inkwellian: yeah, that should work. not at a computer right now but I'll look later if no one beats me to it 27921 2013-12-24 20:31:16 krs ah 27922 2013-12-24 20:44:41 syranide krs: did that actually work? 27923 2013-12-24 21:01:17 krs yeah 27924 2013-12-24 21:01:20 krs http://jsfiddle.net/kb3gN/673/ 27925 2013-12-24 21:01:25 krs im playing around with animation syntax 27926 2013-12-24 21:01:40 krs a.ka bored at family house because chrismas 27927 2013-12-24 21:12:50 syranide krs: :D 27928 2013-12-24 21:33:47 syranide balpert: awake? 27929 2013-12-24 21:34:34 balpert syranide: yes, but on my phone 27930 2013-12-24 21:36:28 syranide balpert: ah, I'm playing with flash/swf using react ... I create it, it works, I delete it, it works, I create it again and no flash callbacks are created on the object (by the flash) ... could this be trigger by some React behavior? 27931 2013-12-24 21:36:41 syranide balpert: when I break it all out and do it using pure JS it works fine every time 27932 2013-12-24 21:37:22 syranide *however* if I create the two objects using different src:s, it works 27933 2013-12-24 21:38:24 andrezs can you require() an individual addon from react, or do you just have to use the react/addons build? 27934 2013-12-24 21:38:40 syranide andrezs: it's not possible right now (as far as I've been told) 27935 2013-12-24 21:38:49 syranide so you have to use the react build 27936 2013-12-24 21:39:09 syranide andrezs: what do you want to access? some are available through React 27937 2013-12-24 21:39:17 andrezs kk, that's what I figured since I couldn't find any info on it 27938 2013-12-24 21:39:23 andrezs um 27939 2013-12-24 21:39:31 andrezs the classSet addon 27940 2013-12-24 21:39:49 syranide andrezs: isn't that React.addons.classSet or something like that? 27941 2013-12-24 21:39:58 andrezs yeah 27942 2013-12-24 21:40:20 andrezs I just get fuzzy feelings if I can require it seperately 27943 2013-12-24 21:40:29 andrezs but I can just use react/addons 27944 2013-12-24 21:40:31 syranide ah ;) 27945 2013-12-24 21:40:39 syranide you can always wrap them if you want 27946 2013-12-24 21:40:40 balpert react/lib/classSet I think 27947 2013-12-24 21:40:59 balpert syranide: not sure why that would happen; I think it should work 27948 2013-12-24 21:41:08 andrezs balpert: ooo I'll try that 27949 2013-12-24 21:41:14 syranide balpert: yeah I'll dig around a bit more, but it's really weird 27950 2013-12-24 21:42:16 syranide vjeux: you there or just autologin? ;) 27951 2013-12-24 21:42:25 vjeux syranide: i'm there for 5 min 27952 2013-12-24 21:42:35 syranide vjeux: ah, then I'm not gonna disturb you 27953 2013-12-24 21:42:47 vjeux syranide: what's up? 27954 2013-12-24 21:43:04 syranide "ah, I'm playing with flash/swf using react ... I create it, it works, I delete it, it works, I create it again and no flash callbacks are created on the object (by the flash) ... could this be trigger by some React behavior?" 27955 2013-12-24 21:43:09 syranide "when I break it all out and do it using pure JS it works fine every time" 27956 2013-12-24 21:43:12 syranide "if I create the two objects using different src:s, it works" 27957 2013-12-24 21:44:01 vjeux i don't know ... good luck :) 27958 2013-12-24 21:44:07 syranide hehe yeah I know ;) 27959 2013-12-24 21:45:53 syranide hmm... could it be... 27960 2013-12-24 21:50:29 andrezs balpert: it was react/lib/cx, but it worked, thanks! 27961 2013-12-24 21:51:07 balpert andrezs: ah of course 27962 2013-12-24 21:51:09 balpert cool 27963 2013-12-24 22:17:39 syranide balpert: solved it, my hastily thrown together SWF file would load before it was inserted into the DOM in IE8, and that's why it failed ^^ 27964 2013-12-24 22:17:54 syranide probably because of nuances in how it was inserted in react 27965 2013-12-24 22:17:58 syranide *by react 27966 2013-12-24 22:18:20 tlack sup fam? i just put in a pull request for a little feature in react-page-middleware. hope you arent offended by my suggestion too much! :) 27967 2013-12-24 22:19:21 syranide petehunt: transferPropsTo ... isn't it basically a bug that it also transfers 'ref' (that's most likely not what the user wanted, not that it's likely to matter, but it might?) 27968 2013-12-24 22:20:10 petehunt syranide: yeah probably. i may have fixed that in a pending diff though -- don't remember 27969 2013-12-24 22:20:22 syranide petehunt: oh ok, I'll hold off then :) 27970 2013-12-24 22:20:43 petehunt that diff ahs been pending for 2 months :) 27971 2013-12-24 22:20:49 syranide haha 27972 2013-12-24 22:22:20 syranide petehunt: anyway, I've made an component for flash/swf, interesting as an addon perhaps? 27973 2013-12-24 22:22:32 petehunt syranide: we want to kill addons 27974 2013-12-24 22:22:35 petehunt put it in npm 27975 2013-12-24 22:22:39 syranide oh ^^ 27976 2013-12-24 22:22:57 petehunt eventually react addons will likely just be a blessed list of npm modules 27977 2013-12-24 22:23:02 syranide yeah npm is a good idea, I'll need to figure out how that works first ;) 27978 2013-12-24 22:23:15 petehunt the only reason we had addons was because we sucked at packaging... now we suck a lot less! :) 27979 2013-12-24 22:23:18 syranide (submitting I mean) 27980 2013-12-24 22:23:34 petehunt see https://github.com/facebook/react/issues/680 27981 2013-12-24 22:23:37 petehunt syranide: it's ez 27982 2013-12-24 22:23:42 petehunt npm init 27983 2013-12-24 22:23:45 petehunt npm pubilsh 27984 2013-12-24 22:24:08 syranide petehunt: not going to bother you if you are busy, but did you think anything more about autoFocus? I think we should normalize behavior (or it'll just useless, to me at least) 27985 2013-12-24 22:24:32 syranide *just be useless 27986 2013-12-24 22:25:04 petehunt i think we should too 27987 2013-12-24 22:25:32 petehunt but 27988 2013-12-24 22:25:33 petehunt trying to stay off of irc mostly today :) 27989 2013-12-24 22:25:33 petehunt just have to write 2 emails then i'm gone 27990 2013-12-24 22:25:39 syranide petehunt: and to me it seems natural that whenever a node gets mounted, it's get focused (simply/robust/intuitive) 27991 2013-12-24 22:25:48 syranide petehunt: ok, take care! 27992 2013-12-24 22:57:17 tlack syranide: what do you mean by focus in this context? like DOM focus? curious noob here. 27993 2013-12-24 22:57:50 syranide tlack: yep DOM focus, https://github.com/facebook/react/pull/700 27994 2013-12-24 22:59:32 bsansouci__ hey guys, I finally had the courage to put my things online 27995 2013-12-24 22:59:36 bsansouci__ I did some stuff with react 27996 2013-12-24 22:59:42 syranide bsansouci__: where?! :D 27997 2013-12-24 22:59:42 bsansouci__ do you guys mind to take a look :) 27998 2013-12-24 22:59:43 bsansouci__ http://www.cs.mcgill.ca/~bsanso/dev/react-playground/ 27999 2013-12-24 22:59:43 tlack fantastic 28000 2013-12-24 23:00:13 syranide bsansouci__: cool! 28001 2013-12-24 23:00:26 chenglou bsansouci__: yo turn the lines 90 degrees for drawing 28002 2013-12-24 23:00:58 syranide chenglou: press N ;) 28003 2013-12-24 23:01:04 chenglou ops 28004 2013-12-24 23:01:52 syranide bsansouci__: is the tree interactive in any way? 28005 2013-12-24 23:02:05 bsansouci__ you can click and drag it 28006 2013-12-24 23:02:13 bsansouci__ and by pressing up or down arrow 28007 2013-12-24 23:02:18 syranide yeah but other than that (and up down I found too) 28008 2013-12-24 23:02:18 bsansouci__ you can change the angle of the branches 28009 2013-12-24 23:02:26 bsansouci__ that's all 28010 2013-12-24 23:02:29 bsansouci__ for now 28011 2013-12-24 23:02:30 bsansouci__ ^^ 28012 2013-12-24 23:02:38 syranide ah ok, I love how it breaks when you pull them too close together 28013 2013-12-24 23:02:48 syranide very interesting behavior there 28014 2013-12-24 23:02:58 bsansouci__ haha yeah that's kind of the magic that's going on 28015 2013-12-24 23:02:59 petehunt bsansouci__: get rid of left and top and use translate3d instead 28016 2013-12-24 23:03:11 bsansouci__ what's that? 28017 2013-12-24 23:03:12 petehunt bet you will get a lot more performance 28018 2013-12-24 23:03:24 petehunt the thing you use when you want to animate the position of something 28019 2013-12-24 23:03:29 petehunt it's a css thing 28020 2013-12-24 23:03:34 bsansouci__ I'll look it up 28021 2013-12-24 23:03:37 bsansouci__ thanks :0 28022 2013-12-24 23:03:39 bsansouci__ :) * 28023 2013-12-24 23:03:49 petehunt -webkit-transform: translate3d(xPos px, yPos px, zPos px) 28024 2013-12-24 23:04:04 syranide bsansouci__: (ps, don't fall back on the 2d-version, you specifically want the 3d version) 28025 2013-12-24 23:04:06 petehunt creates a new layer on the gpu and translates it around with fast primitives and bypasses teh layout engine 28026 2013-12-24 23:04:28 petehunt the problem with left and top is you still need to go through some parts of the browser's (slow) rendering engine 28027 2013-12-24 23:04:33 bsansouci__ oooh ok, wait gimme a sec I'll update it right away 28028 2013-12-24 23:04:46 petehunt yep should only require a few characters to change it 28029 2013-12-24 23:04:59 petehunt bsansouci__: you may need to leave a fixed "left: 0; top: 0" in there 28030 2013-12-24 23:05:42 petehunt drawing thing is fun 28031 2013-12-24 23:05:53 bsansouci__ I forgot to add that you can press "a" 28032 2013-12-24 23:06:03 bsansouci__ try pressing z a couple of times and then a 28033 2013-12-24 23:39:07 bsansouci__ ok I changed that, I don't notice a big difference but I can make the tree bigger and it's still pretty smooth 28034 2013-12-24 23:43:18 syranide hmm, which UMD-wrapper does React actually use for the final js? 28035 2013-12-25 00:24:11 arbitrix gnite... anyone have experience running jsx compiler on Windows? I have it working but I can't seem to feed it absolute paths... 28036 2013-12-25 00:27:10 arbitrix and I can't seem to locate the source for it in the github repo :( 28037 2013-12-25 00:47:19 bsansouci__ hello :) 28038 2013-12-25 00:47:38 bsansouci__ sorry I don't have much experience with react, but I can try to help 28039 2013-12-25 00:47:48 bsansouci__ I don't really get what your problem is :p 28040 2013-12-25 00:47:56 bsansouci__ arbitrix: ^ 28041 2013-12-25 01:00:51 syranide arbitrix: what's going wrong? it's possible you need to use forward slashes 28042 2013-12-25 01:00:59 syranide or backward 28043 2013-12-25 01:15:01 rcs Or double. 28044 2013-12-25 01:15:18 rcs And maybe some quotes. 28045 2013-12-25 01:29:14 bsansouci__ Merry Christmas guys ;) 28046 2013-12-25 01:46:37 zackkkkkkk I've got a beginner's question but I'm still learning the words react uses for how I want to phrase it. Please bear with me. 28047 2013-12-25 01:47:04 zackkkkkkk Can a component have it's own state but have it's render function still be pure? 28048 2013-12-25 01:47:55 zackkkkkkk Like, I'm aware the render function cannot depend on global state to affect the returned dom representations, but can the render function rely on it's own state to affect the dom? 28049 2013-12-25 01:50:16 arbitrix syranide: I didn't try forward slashes, thanks for the suggestion 28050 2013-12-25 03:43:39 ddellacosta going through the React.js tutorial now--is there an argument for pulling from the server on load vs. pulling from data already loaded (as, for example, Backbone.js advocates)? Seems like we can avoid a server call here on page load and speed things up, but curious if there is a persuasive counter-argument. Or, is this simply to help explain how React.js works in the context of the tutorial? 28051 2013-12-25 04:11:39 tlack as far as i understand (warning: noob) both ways work fine. i think people are just more used to ajax-driven data in examples. 28052 2013-12-25 04:20:18 ddellacosta tlack: thanks--but I'm curious if the react.js developers advocate one over the other. Seems like the tutorial example would imply they advocate the former. 28053 2013-12-25 04:24:14 balpert ddellacosta: yes, certainly it makes sense to use preloaded data if you have it 28054 2013-12-25 04:24:34 balpert ddellacosta: you can even make a component which optionally takes preloaded data (but fetches if it's not passed in) 28055 2013-12-25 04:25:48 ddellacosta balpert: gotcha--thanks for clarifying, appreciate it! 28056 2013-12-25 05:55:29 mietek "Error: Parse Error: Line 47: Unexpected token =" 28057 2013-12-25 05:55:51 mietek Line 47 in my file is "
    28058 2013-12-25 05:56:06 mietek I'd be expecting that = 28059 2013-12-25 05:57:23 mietek Ah, so for JSX inline in a to my seems to result in Uncaught SyntaxError: Unexpected token < 30457 2013-12-29 03:35:36 ivan (in the JSX transformer) 30458 2013-12-29 03:36:39 ivan maybe I should have kept reading :) 30459 2013-12-29 03:37:43 ivan nope, same thing with 30460 2013-12-29 03:38:32 petehunt ivan: you probably didn't add the /** @jsx React.DOM */ docblock comment 30461 2013-12-29 03:38:42 ivan oh dang you're right, I thought that was useless cruft 30462 2013-12-29 03:38:48 petehunt nope 30463 2013-12-29 03:39:07 ivan thanks 30464 2013-12-29 03:39:12 petehunt tells JSX that you want to use React, you could create your own lib that uses JSX by doing /** @jsx IvanDOM */ 30465 2013-12-29 03:41:08 ivan I see now, thanks 30466 2013-12-29 03:42:25 chenglou another person bitten by jsx pragma 30467 2013-12-29 03:42:30 chenglou imma write a tip on it 30468 2013-12-29 03:42:40 petehunt chenglou: too many tips 30469 2013-12-29 03:42:47 petehunt chenglou: how about we just highlight it in the tutorial 30470 2013-12-29 03:42:55 chenglou k 30471 2013-12-29 03:43:07 chenglou btw feel free to suggest tips that can be removed 30472 2013-12-29 03:44:09 chenglou petehunt: also ping me if you got feedback for the browserify template PR (I'll get it on ipad) 30473 2013-12-29 03:44:15 chenglou (push notification I mean) 30474 2013-12-29 03:44:18 petehunt i will look soon 30475 2013-12-29 03:50:07 ivan is there a way to get useful error message out of the in-browser JSX transformer? 30476 2013-12-29 03:50:13 ivan I'm on a mystery hunt for the third time :) 30477 2013-12-29 03:50:27 petehunt ivan: we're working on a PR for that 30478 2013-12-29 03:50:32 ivan cool 30479 2013-12-29 03:50:45 ivan even having the right line number would be a big help 30480 2013-12-29 03:50:47 petehunt honestly i never use the in-browser JSX transformer since the tooling around browserify got pretty good 30481 2013-12-29 03:52:23 petehunt https://github.com/petehunt/react-browserify-template 30482 2013-12-29 04:02:48 chenglou petehunt: I was gonna open up ReactStateSetters but one more question: is there any big benefit compared to just defining a method on the component and use it 30483 2013-12-29 04:03:32 petehunt um, less allocations 30484 2013-12-29 04:42:01 ivan https://ludios.org/tmp/react-json-wrong-mime-type_.png this is what happens when you serve comments.json as text/html, heh 30485 2013-12-29 04:42:57 balpert petehunt: is there a reason we don't want to make jsx run on .jsx files only and not require the docblock? dozens and dozens of people get confused by this. 30486 2013-12-29 04:42:58 ivan guessing SimpleHTTPServer does it right, but I used some other server 30487 2013-12-29 04:43:12 balpert running only on one extension would be more in line with how more or less all other preprocessors work 30488 2013-12-29 04:43:49 petehunt balpert: "jsx" == command-line tool? 30489 2013-12-29 04:44:33 balpert ivan: you can specify the content type with jQuery to make it process it properly 30490 2013-12-29 04:44:33 balpert petehunt: yes, sorry 30491 2013-12-29 04:44:33 balpert (and similarly, make the in-browser transformer not require the docblock) 30492 2013-12-29 04:45:49 petehunt balpert: so it's just a matter of changing the default for the command-line too 30493 2013-12-29 04:46:08 petehunt l 30494 2013-12-29 04:46:10 petehunt anything else? 30495 2013-12-29 04:46:15 petehunt (for the command line tool) 30496 2013-12-29 04:47:35 balpert yes, just make it look at *.jsx only and default to /** @jsx React.DOM */ for files with that extension 30497 2013-12-29 04:50:55 ivan balpert: thanks 30498 2013-12-29 04:59:39 chenglou ^ +1 30499 2013-12-29 05:03:23 chenglou this gulpjs thing is really interesting 30500 2013-12-29 05:03:36 chenglou piping stuff instead of writing to temp dirs 30501 2013-12-29 05:13:18 ivan is console.log safe to use in the tutorial? working on a PR on the tutorial section that adds $.ajax({... 30502 2013-12-29 05:14:39 balpert ivan: what are you planning to log? 30503 2013-12-29 05:14:42 balpert that seems probably fine. 30504 2013-12-29 05:15:02 ivan third argument of the ajax error callback 30505 2013-12-29 05:17:48 ivan man how does Chrome manage to make console.log(err) more useless than console.log(err.toString()) 30506 2013-12-29 05:18:21 ivan SyntaxError {} vs SyntaxError: Unexpected token ; 30507 2013-12-29 05:24:28 ivan I'll go with err since it was fixed sometime after Chrome 31 and before Chrome 34 30508 2013-12-29 05:25:51 ivan or not; Firefox is similarly troubled at this time 30509 2013-12-29 06:12:17 balpert hmm, if you have a require inside an if (__DEV__) then browserify includes the module 30510 2013-12-29 06:12:23 balpert I guess that's not surprising 30511 2013-12-29 06:12:35 balpert but it's not what I want 30512 2013-12-29 06:16:16 petehunt balpert: why 30513 2013-12-29 06:16:49 balpert petehunt: because ^ 30514 2013-12-29 06:17:14 petehunt balpert: i think we just need to rearrange some build steps 30515 2013-12-29 06:18:06 balpert could be. 30516 2013-12-29 06:18:52 balpert I'll look into that 30517 2013-12-29 06:26:32 chenglou petehunt: yt 30518 2013-12-29 06:26:35 petehunt chenglou: hey 30519 2013-12-29 06:26:43 chenglou confession: I've never used yeoman 30520 2013-12-29 06:26:51 petehunt me neither 30521 2013-12-29 06:26:55 petehunt i started using it a day ago 30522 2013-12-29 06:26:57 balpert me neither! 30523 2013-12-29 06:26:57 petehunt or two days or something 30524 2013-12-29 06:27:04 chenglou like I compare it to git clone so beyond copying a repo I dont know what it does 30525 2013-12-29 06:27:08 petehunt yeoman is kinda like grunt 30526 2013-12-29 06:27:25 petehunt in that it doesn't really do that much, but the cool kids use it 30527 2013-12-29 06:27:49 petehunt chenglou: basically i have a template project 30528 2013-12-29 06:28:01 petehunt chenglou: actually, want to try it out? 30529 2013-12-29 06:28:06 chenglou sure 30530 2013-12-29 06:28:31 petehunt chenglou: npm install -g yo generator-react-library 30531 2013-12-29 06:30:53 chenglou "You don't seem to have a generator with the name react-library installed" 30532 2013-12-29 06:30:56 chenglou sec I'll check 30533 2013-12-29 06:32:45 petehunt npm install -g generator-react-library 30534 2013-12-29 06:33:05 chenglou yeah I did 30535 2013-12-29 06:33:16 chenglou I tried installing the generator without -g and it worked 30536 2013-12-29 06:33:20 petehunt weird 30537 2013-12-29 06:33:34 petehunt well, do that 30538 2013-12-29 06:33:37 petehunt and then do npm run server 30539 2013-12-29 06:33:38 chenglou just did 30540 2013-12-29 06:33:48 petehunt live code reloading development server 30541 2013-12-29 06:33:57 petehunt static assets packaging, all works in npm 30542 2013-12-29 06:34:03 chenglou wait still getting error 30543 2013-12-29 06:34:06 petehunt can do dev or prod builds, will concat stylesheets etc 30544 2013-12-29 06:39:29 chenglou fk can't get yeoman working 30545 2013-12-29 06:39:32 chenglou sec... 30546 2013-12-29 06:46:42 chenglou petehunt: ok, got it working 30547 2013-12-29 06:47:28 petehunt chenglou: cool 30548 2013-12-29 06:47:32 petehunt let me knwo what you think 30549 2013-12-29 06:47:51 chenglou was statics intended to be installed globally? 30550 2013-12-29 06:48:00 chenglou (or else says collect-static not found) 30551 2013-12-29 06:48:31 chenglou actually wait 30552 2013-12-29 06:50:48 chenglou petehunt: `statics` isn't listed in the dependencies btw 30553 2013-12-29 06:52:07 petehunt chenglou: ooo, nice catch 30554 2013-12-29 06:52:08 chenglou just added it, now it's working 30555 2013-12-29 06:52:21 petehunt this all needs some docs 30556 2013-12-29 06:52:28 petehunt but i think it works pretty well! 30557 2013-12-29 06:53:55 petehunt chenglou: want to send a pr? 30558 2013-12-29 06:54:13 chenglou live reloading is pretty neat 30559 2013-12-29 06:54:23 chenglou k, should it be a devDependency? 30560 2013-12-29 06:54:29 petehunt actually i just gave you commit on that repo 30561 2013-12-29 06:54:58 petehunt chenglou: devDependency, here https://github.com/petehunt/generator-react-library/blob/master/app/templates/_package.json 30562 2013-12-29 06:55:38 chenglou kk done 30563 2013-12-29 06:55:50 chenglou live reloading is pretty nice 30564 2013-12-29 06:56:09 chenglou is it yeoman that came with it? 30565 2013-12-29 06:56:14 petehunt no 30566 2013-12-29 06:56:18 petehunt browserify thing called beefy 30567 2013-12-29 06:56:32 chenglou then why did I buy Live Reload?! lol 30568 2013-12-29 06:56:36 chenglou kk 30569 2013-12-29 06:56:56 chenglou im still confused as to what yeoman's job is here? 30570 2013-12-29 06:57:03 chenglou why not git clone 30571 2013-12-29 06:57:30 petehunt to be cool 30572 2013-12-29 06:57:45 petehunt http://yeoman.io/community-generators.html 30573 2013-12-29 06:58:13 chenglou the best reason lol 30574 2013-12-29 06:58:27 chenglou alright well, if it helps attract hip people then im ok with it I guess... 30575 2013-12-29 06:59:45 petehunt chenglou: if you want a real reason: someone else owns all the code that touches the file system 30576 2013-12-29 06:59:59 petehunt so any weird problems on some platform they will have ideally dealt with 30577 2013-12-29 07:00:09 petehunt and if we want to make the generator smarter in the future we can add more code. can't do taht with git clone 30578 2013-12-29 07:04:00 balpert petehunt: just updated, now with more uglifyify 30579 2013-12-29 07:04:05 petehunt yay 30580 2013-12-29 07:04:53 petehunt balpert: nice byte savings 30581 2013-12-29 07:05:09 balpert thanks 30582 2013-12-29 07:05:14 balpert I eat bytes for breakfast 30583 2013-12-29 07:05:17 petehunt im just waiting for travis 30584 2013-12-29 07:05:18 balpert or something like that 30585 2013-12-29 07:05:40 petehunt balpert: we should really remove the full page rendering stuff (andreypopp's diff) 30586 2013-12-29 07:05:48 petehunt that will save a bunch i think 30587 2013-12-29 07:05:49 balpert mmhmm 30588 2013-12-29 07:06:12 balpert I wonder if we should remove renderComponentToString from client builds 30589 2013-12-29 07:06:21 balpert not that many bytes though 30590 2013-12-29 07:06:28 balpert just ReactServerRendering.js 30591 2013-12-29 07:06:29 petehunt we dont have a client vs server flag 30592 2013-12-29 07:06:48 balpert mm true 30593 2013-12-29 07:06:56 petehunt ideally we'd all be using npm and not a global react object 30594 2013-12-29 07:07:05 chenglou petehunt: alright, so you already got browserify set up on this thing? 30595 2013-12-29 07:07:05 petehunt so if it's not required, it's not bundled 30596 2013-12-29 07:07:10 petehunt yea 30597 2013-12-29 07:07:17 petehunt needs docs, testing, and a website 30598 2013-12-29 07:07:24 chenglou website? 30599 2013-12-29 07:07:26 petehunt maybe some more metadata in package.json 30600 2013-12-29 07:07:44 petehunt chenglou: yeah, a component repository 30601 2013-12-29 07:07:54 chenglou oh 30602 2013-12-29 07:08:14 petehunt basically just a typeahead search which shows you a live preview of the compoennt 30603 2013-12-29 07:08:23 petehunt and maybe a codemirror editor (w/ requirebin) to let you play with it 30604 2013-12-29 07:08:50 chenglou smart! 30605 2013-12-29 07:09:48 chenglou kk, im good with this 30606 2013-12-29 07:10:20 chenglou btw can't collect-static be a grunt task instead? same for the static-stylesheets plugin 30607 2013-12-29 07:10:33 petehunt it could, yes 30608 2013-12-29 07:10:43 chenglou if you think it's a good idea I can do it 30609 2013-12-29 07:10:48 chenglou shouldn't be too complicated 30610 2013-12-29 07:10:55 petehunt i dont want to force people to use anything in their modules 30611 2013-12-29 07:11:05 petehunt i'm all for doing coolkid stuff on our own things, but other people may not want to use grunt 30612 2013-12-29 07:11:27 chenglou kk 30613 2013-12-29 07:11:38 petehunt the core of this is just a skeleton project that JSX compiles src/ to lib/ and has the dependencies and package.json stuff set up correctly out of the box 30614 2013-12-29 07:11:59 petehunt oh, and static resources. 30615 2013-12-29 07:12:07 petehunt the rest of it is just nice default tooling that you can take or leave 30616 2013-12-29 07:12:17 petehunt and the lightest weight way to deliver that was with npm scripts 30617 2013-12-29 07:16:56 chenglou well I'll do that in the next few days 30618 2013-12-29 07:17:01 chenglou g2g now, cya! 30619 2013-12-29 07:17:05 petehunt me too. good night! 30620 2013-12-29 10:34:21 brackcurly I was wondering in the 'Introduction to React' talk they mention that because of the virtual dom you could easily integrate with something like titanium and render native components instead of actual dom. Has someone actually done this? 30621 2013-12-29 12:57:03 syranide balpert: you awake? 30622 2013-12-29 16:28:48 chenglou brackcurly: not that I've heard of 30623 2013-12-29 16:29:05 chenglou brackcurly: slightly related, there's effort to render to canvas 30624 2013-12-29 16:29:33 chenglou and svg 30625 2013-12-29 16:29:36 chenglou brackcurly: https://github.com/facebook/react-art 30626 2013-12-29 16:43:23 brackcurly thanks 30627 2013-12-29 16:46:59 chenglou np 30628 2013-12-29 16:49:01 balpert syranide: not at 6am I'm not 30629 2013-12-29 16:49:09 balpert now I am though :) 30630 2013-12-29 17:14:30 hashpuppy does render get called automatically when the state changes? 30631 2013-12-29 17:15:34 hashpuppy i guess a better question would be: is there anything else that triggers render besides the initial renderComponent? 30632 2013-12-29 17:16:15 balpert hashpuppy: yes, when you call setState() that component (and all of its children) are rerendered 30633 2013-12-29 17:17:04 hashpuppy is that not the case for this.props.attr? for example, if in handleClick I change this.props.attr to something else, it doesn't re-render, correct? 30634 2013-12-29 17:17:32 balpert you should never mutate your own props 30635 2013-12-29 17:17:43 balpert your parent should pass you the props and then you shouldn't change them 30636 2013-12-29 17:18:19 balpert if you want to change your props, you should _ask_ your parent to change them with a callback passed down from the parent 30637 2013-12-29 17:18:44 balpert and the parent will set its own state (or ask _its_ parent to change its props), causing the child to receive the new props 30638 2013-12-29 17:18:58 balpert otherwise, you and your parent will have different ideas of what your props are supposed to be 30639 2013-12-29 17:19:04 balpert which leads to inconsistencies and confusion 30640 2013-12-29 17:19:33 hashpuppy thanks, balpert 30641 2013-12-29 17:19:39 balpert hashpuppy: np, hope that makes sense 30642 2013-12-29 17:20:03 balpert take a look at this question which I answered yesterday: http://stackoverflow.com/q/20795323/49485 30643 2013-12-29 17:20:08 balpert my answer might be helpful 30644 2013-12-29 17:20:22 hashpuppy yeah, it does. i just setup my getInitialState to setState based on this.props and it sovled the problem 30645 2013-12-29 17:21:30 balpert probably also not what you want :) http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html 30646 2013-12-29 17:21:49 hashpuppy ha. ok. i'll read that 30647 2013-12-29 17:22:04 hashpuppy also, i keep getting this warning: Each child in an array should have a unique "key" prop. 30648 2013-12-29 17:22:12 hashpuppy but i never see key being set in any of the examples 30649 2013-12-29 17:22:29 balpert are you using JSX? 30650 2013-12-29 17:22:41 hashpuppy yes 30651 2013-12-29 17:22:45 balpert okay, see this: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children 30652 2013-12-29 17:23:43 balpert idiomatic React code has each piece of data stored only in state once -- if you want to store state in two places you should instead store it only once in a parent component -- petehunt's blog post here may help: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html 30653 2013-12-29 17:25:13 hashpuppy http://jsbin.com/uHeHoXo/1/edit?html,output is what i'm doing (it doesn't run in that jsbin because i don't have the resources loaded) 30654 2013-12-29 17:25:28 hashpuppy i was surprised with how simple that was 30655 2013-12-29 17:25:52 hashpuppy i should figure out how to load them 30656 2013-12-29 17:26:28 balpert http://fb.me/react-0.8.0.js 30657 2013-12-29 17:26:33 balpert http://fb.me/JSXTransformer-0.8.0.js 30658 2013-12-29 17:26:37 balpert that's all you need 30659 2013-12-29 17:27:21 jasonvanzyl are there any examples of how people typically test react components? i've looked at most of the examples available (react-page, react-app-demo, examples) and I don't see any testing examples 30660 2013-12-29 17:27:32 hashpuppy cool. updated: http://jsbin.com/uHeHoXo/3/edit?html,js,output 30661 2013-12-29 17:28:24 balpert jasonvanzyl: there aren't too many examples of this yet, something we want to improve 30662 2013-12-29 17:28:29 balpert there are some helpers here: https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js 30663 2013-12-29 17:28:42 balpert which you can require as require('react/lib/ReactTestUtils') if using npm 30664 2013-12-29 17:28:58 balpert right now there isn't a browser build that includes them because of size considerations 30665 2013-12-29 17:30:49 jasonvanzyl balpert: you have a snippet of how you typically use this? 30666 2013-12-29 17:31:16 balpert jasonvanzyl: https://github.com/facebook/react/blob/master/src/dom/components/__tests__/ReactDOMInput-test.js might give you some clues 30667 2013-12-29 17:31:23 jasonvanzyl cool thanks 30668 2013-12-29 17:34:20 jasonvanzyl all right so some testing to figure out 30669 2013-12-29 17:37:19 jasonvanzyl balpert: i have a bunch of questions that i've seen pop up a few times. would it be easier to send them to the mailing list? pete mentioned that you guys haven't tackled answering the full stack question but i see questions for routing, testing, how well existing complex jquery components integrate (like datatables, fancytree), and I wanted to start collecting this information and help with documenting. you guys are great, the 30670 2013-12-29 17:37:19 jasonvanzyl documentation is extensive and you guys answer all questions but i haven't come across many full-app examples 30671 2013-12-29 17:38:01 balpert have you seen https://github.com/andreypopp/react-app? I haven't used it but it looks good 30672 2013-12-29 17:38:08 balpert plus andreypopp is in this channel to answer questions 30673 2013-12-29 17:38:42 balpert you're more likely to have discussions if you ask in the channel I think 30674 2013-12-29 17:38:46 balpert it's awesome that you want to help with docs 30675 2013-12-29 17:39:29 jasonvanzyl that's how i learn, to write 30676 2013-12-29 17:42:58 jasonvanzyl ok, so how about routing first? what are people using there with react? 30677 2013-12-29 17:47:19 jasonvanzyl balpert: happy to collect, summarize and post to the list: https://github.com/jvanzyl/react-notes/blob/master/NOTES.md 30678 2013-12-29 17:47:52 balpert I think some people are using the backbone router 30679 2013-12-29 17:49:12 balpert I heard someone talk about Ember's router https://github.com/tildeio/router.js/ (I think) but that doesn't do the pushState part, just the parsing 30680 2013-12-29 17:52:46 jasonvanzyl https://github.com/jvanzyl/react-notes/blob/master/NOTES.md 30681 2013-12-29 17:52:48 jasonvanzyl ok, cool 30682 2013-12-29 17:53:21 jasonvanzyl i've also seen director in some examples 30683 2013-12-29 18:02:22 vjeux https://news.ycombinator.com/item?id=6980469 30684 2013-12-29 18:02:38 vjeux the article on the diff algorithm I wrote has just been published :) 30685 2013-12-29 18:11:29 jasonvanzyl vjeux: nice, added to my notes :-) https://github.com/jvanzyl/react-notes/blob/master/NOTES.md 30686 2013-12-29 18:11:54 vjeux jasonvanzyl: nice 30687 2013-12-29 18:12:01 vjeux jasonvanzyl: you should go over all the blog articles 30688 2013-12-29 18:12:27 vjeux i've linked all the interesting things that were made about react 30689 2013-12-29 18:13:11 vjeux http://facebook.github.io/react/blog/ 30690 2013-12-29 18:13:16 jasonvanzyl cool, thanks 30691 2013-12-29 18:13:51 vjeux i've got the #13 and #14 ready but already have enough to write a 15th :p 30692 2013-12-29 18:14:02 vjeux react has been pretty active the last 2 weeks 30693 2013-12-29 18:14:49 balpert everyone's on vacation so they're checking out new stuff 30694 2013-12-29 18:14:50 balpert :) 30695 2013-12-29 18:15:04 balpert vjeux: thanks for your help in landing my stuff 30696 2013-12-29 18:15:40 vjeux balpert: no problem :) 30697 2013-12-29 18:17:56 balpert vjeux: do you know if it would break stuff if traverseAllChildren/flattenChildren/ReactChildren.map skipped null entries completely? 30698 2013-12-29 18:18:12 balpert specifically FB-internal stuff 30699 2013-12-29 18:18:17 balpert pretty sure React itself would be fine 30700 2013-12-29 18:19:18 vjeux balpert: by a quick glance a lot of there are already doing if (!child) { return; } 30701 2013-12-29 18:21:20 balpert vjeux: actually I wouldn't need to change traverseAllChildren or ReactChildren.map, just flattenChildren 30702 2013-12-29 18:22:08 vjeux balpert: looks fine 30703 2013-12-29 18:22:12 balpert sweet 30704 2013-12-29 18:22:13 balpert thanks 30705 2013-12-29 18:22:18 vjeux what are you trying to do? 30706 2013-12-29 18:22:57 balpert combine adjacent text nodes to make https://github.com/facebook/react/pull/480 easier 30707 2013-12-29 18:23:08 balpert rather, to make it break less stuff 30708 2013-12-29 18:23:49 balpert currently,
    A\\nB
    turns into
    A B
    30709 2013-12-29 18:23:55 balpert with #480,
    A\\nB
    turns into
    AB
    30710 2013-12-29 18:24:20 balpert the codemod script changes the source
    A\\nB
    into
    A{' '}\\nB
    30711 2013-12-29 18:24:36 balpert but that turns into
    A B
    when rendered 30712 2013-12-29 18:26:50 vjeux ok :) 30713 2013-12-29 18:27:07 balpert (so I'm making
    A{' '}\\nB
    render to
    A B
    ) 30714 2013-12-29 18:27:10 vjeux would be nice to submit the change that removes null in a separate diff 30715 2013-12-29 18:27:31 balpert mmkay 30716 2013-12-29 18:28:26 vjeux it's good to break a big risky diff into many small ones 30717 2013-12-29 18:28:31 balpert yup 30718 2013-12-29 18:28:44 vjeux especially when it's trivial like this :) 30719 2013-12-29 18:28:59 arbitrix hi all... 30720 2013-12-29 18:29:16 arbitrix react.js is a life saver 30721 2013-12-29 18:29:17 arbitrix thanks 30722 2013-12-29 18:29:32 vjeux arbitrix: thanks :) 30723 2013-12-29 18:29:41 vjeux arbitrix: what cool stuff are you building with it? 30724 2013-12-29 18:29:59 arbitrix online sportsbook 30725 2013-12-29 18:30:29 arbitrix vjeux: online sportsbook 30726 2013-12-29 18:30:38 vjeux nice 30727 2013-12-29 18:31:27 arbitrix vjeux: stopped the imperative DOM manipulation after two days :) 30728 2013-12-29 18:31:33 vjeux haha :p 30729 2013-12-29 18:32:03 vjeux yeah, one of the great side effects of react is that even if you are not using react you more naturally concentrate state changes into one place and update the dom based on it 30730 2013-12-29 18:33:10 arbitrix anyone have some knowledge of the overhead of TransitionGroup? 30731 2013-12-29 18:33:35 arbitrix I have between 1-20 on the page now... but wondering if I should attempt a few hundred 30732 2013-12-29 18:33:55 vjeux arbitrix: transition group adds and remove a css class when the element is added/removed 30733 2013-12-29 18:34:19 arbitrix I don't have a good intuition on how TransitionGroup is implemented and if it has a lot of state or per-TransitionGroup overhead 30734 2013-12-29 18:34:27 balpert arbitrix: TransitionGroup shouldn't have much JS overhead 30735 2013-12-29 18:34:28 vjeux so if you don't plan to remove a few hundred elements at once, should be good 30736 2013-12-29 18:34:36 balpert I think you're much more likely to run into trouble with the actual CSS 30737 2013-12-29 18:34:59 balpert vjeux: IIRC a few hundred simultaneously wouldn't even be a problem 30738 2013-12-29 18:35:11 arbitrix ok, will give it a shot then :) thanks 30739 2013-12-29 18:35:25 vjeux https://github.com/facebook/react/blob/a4bb44f1e2dc667c99efd636ab8f4f03e62347c4/src/addons/transitions/ReactTransitionGroup.js 30740 2013-12-29 18:35:30 vjeux this is al the code 30741 2013-12-29 18:35:55 arbitrix vjeux: hahaha... love concise 30742 2013-12-29 18:36:04 balpert also https://github.com/facebook/react/blob/a4bb44f1e2dc667c99efd636ab8f4f03e62347c4/src/addons/transitions/ReactTransitionableChild.js 30743 2013-12-29 18:36:18 vjeux oh yeah exact, i lied :p 30744 2013-12-29 18:36:18 balpert (and two other minor util files in that folder) 30745 2013-12-29 18:39:33 arbitrix so a transition cannot take more than 5000ms by default... is React "blocked" during the transition? I take it that for a longer transition I should probably compute the current style in render()? 30746 2013-12-29 18:39:45 balpert arbitrix: no, the 5000ms is arbitrary 30747 2013-12-29 18:40:19 balpert that timeout could be removed entirely; it's just meant to give helpful warnings when transitions are taking too long 30748 2013-12-29 18:40:24 arbitrix no ill effects if I set it to 15 min and have elements in my page transition over a period of 15 min? 30749 2013-12-29 18:40:29 arbitrix ahah... diagnostic 30750 2013-12-29 18:40:59 arbitrix that warning definitely is chatty when I resume my laptop from sleep 30751 2013-12-29 18:41:54 vjeux arbitrix: i'm pretty sure this is not an intended side effect :p 30752 2013-12-29 18:42:50 arbitrix vjeux: but harmless right? (I'm not ruling out bugs in my code ATM :) ) 30753 2013-12-29 18:43:09 vjeux arbitrix: if you only see them when you go outside of sleep yeah, completely harmless 30754 2013-12-29 18:44:04 vjeux react will not remove the dom node unless the transition ended. in order to prevent dom leak this warning has been added 30755 2013-12-29 18:45:40 arbitrix kk, will keep an eye on it 30756 2013-12-29 18:45:41 vjeux i'm pretty sure it's possible to improve the detection to account for that :) 30757 2013-12-29 18:50:31 arbitrix what's magic about TICK = 17 ? 30758 2013-12-29 18:50:40 arbitrix just a good value in practice? 30759 2013-12-29 18:50:55 vjeux it's to get 60fps (refresh rate of screens) 30760 2013-12-29 18:51:03 vjeux 1000ms / 60 frames = 16.6666 = 17 30761 2013-12-29 18:52:09 arbitrix aha 30762 2013-12-29 18:52:45 arbitrix thx 30763 2013-12-29 18:54:00 balpert that should probably use requestAnimationFrame 30764 2013-12-29 18:56:01 syranide yep, and it should probably use 16 otherwise to avoid stutter 30765 2013-12-29 18:56:11 syranide (or just 0 if you want full speed) 30766 2013-12-29 18:56:21 arbitrix you mean: if (!this.timeout) { this.timeout = setTimeout(this.flushClassNameQueue, TICK); } should use reqAnFr? 30767 2013-12-29 18:56:42 syranide arbitrix: why are you doing that? 30768 2013-12-29 18:57:33 vjeux i'm surprised that pete didn't use raf here 30769 2013-12-29 18:58:12 arbitrix syranide: I don't understand what you mean by 'that'? 30770 2013-12-29 18:58:23 syranide arbitrix: thought it was your code 30771 2013-12-29 18:58:43 arbitrix syranide: hehehe... I don't operate at your level my man :) 30772 2013-12-29 18:59:01 arbitrix just a user 30773 2013-12-29 18:59:17 syranide and I'm TRON! 30774 2013-12-29 18:59:20 syranide or something 30775 2013-12-29 18:59:53 arbitrix lol 30776 2013-12-29 19:00:05 syranide balpert: btw, paged you before because it seemed like I could improve HTML5 `key` support, turns out I was wrong (chrome doesn't want to play nice) 30777 2013-12-29 19:00:11 syranide so nvm :) 30778 2013-12-29 19:00:12 balpert aww 30779 2013-12-29 19:00:48 syranide also, I have absolutely no idea what their idea is with `key` it's almost as broken as what we have today 30780 2013-12-29 19:00:56 syranide just not as much 30781 2013-12-29 19:01:17 vjeux syranide: is key the charCode replacement? 30782 2013-12-29 19:01:26 syranide vjeux: and keyCode 30783 2013-12-29 19:01:29 vjeux ok 30784 2013-12-29 19:01:34 syranide to bad it's none really 30785 2013-12-29 19:01:36 syranide *too 30786 2013-12-29 19:02:01 syranide it's simpler to use than keyCode, but it's useless for replacing charCode 30787 2013-12-29 19:02:03 vjeux maybe you could reach out to the people that work on it 30788 2013-12-29 19:02:17 syranide vjeux: doubt it :P 30789 2013-12-29 19:02:35 vjeux syranide: doubt you can or you will? 30790 2013-12-29 19:02:43 syranide I mean, is it too much to ask to actually get to see the char that is about to be inserted before it is? 30791 2013-12-29 19:02:50 syranide vjeux: doubt I can 30792 2013-12-29 19:02:59 vjeux where is the proposal? 30793 2013-12-29 19:03:07 syranide vjeux: it's in the standard already 30794 2013-12-29 19:03:20 syranide they HAD "char", but they deprecated it 30795 2013-12-29 19:03:29 syranide so they had a solution but discarded it 30796 2013-12-29 19:03:29 vjeux haha :p 30797 2013-12-29 19:04:02 vjeux syranide: they talk a lot on mailing lists 30798 2013-12-29 19:04:05 syranide and now you have "key" which does print the character that is about to be inserted... but only if you're not using *some* modifier keys 30799 2013-12-29 19:04:09 vjeux and most of the discussions are public 30800 2013-12-29 19:04:19 vjeux and they are definitively interested in feedback 30801 2013-12-29 19:04:31 vjeux facebook just joined tc 39 (the javascript committee) 30802 2013-12-29 19:04:41 vjeux you just need to know where to find them :p 30803 2013-12-29 19:05:21 syranide vjeux: yeh, it just seems like when they even had the solution (char) and chose to discard it, it seems to me like it's philosophical 30804 2013-12-29 19:05:41 syranide key replaces most of it, but not all 30805 2013-12-29 19:05:49 syranide making it a non-replacement 30806 2013-12-29 19:06:27 balpert syranide: when there are modifiers, won't it not insert the text? 30807 2013-12-29 19:07:15 syranide balpert: "^" + "a" = "aand alt-gr r + 2 seems to be "2" by IEs definition at least 30808 2013-12-29 19:07:34 syranide ok, my client did not like that 30809 2013-12-29 19:07:40 syranide broken for you too? 30810 2013-12-29 19:07:46 syranide "^" + "a" = "a" 30811 2013-12-29 19:07:49 syranide in key 30812 2013-12-29 19:07:59 syranide but would be combined in "char" 30813 2013-12-29 19:08:34 syranide so basically, the value in key is NOT the key on the keyboard, and it's NOT the char about the be inserted 30814 2013-12-29 19:08:42 syranide so what is it actually useful for? 30815 2013-12-29 19:10:31 syranide just did a search on both their public mailling lists, no subject with "key" in them at least 30816 2013-12-29 19:10:33 vjeux anyway gtg, have a good weekend :) 30817 2013-12-29 19:10:36 vjeux :( 30818 2013-12-29 19:10:38 syranide bye! 30819 2013-12-29 19:10:42 balpert syranide: like a with a circumflex? 30820 2013-12-29 19:10:44 vjeux key is such a bad keyword to google 30821 2013-12-29 19:10:55 syranide vjeux: did using their own 30822 2013-12-29 19:10:58 syranide balpert: yep 30823 2013-12-29 19:11:01 balpert syranide: gotcha 30824 2013-12-29 19:11:05 balpert yeah that seems pretty stupid 30825 2013-12-29 19:11:18 syranide balpert: yep, it would make sense if it was the key as in "a" , but it can also be "A" 30826 2013-12-29 19:11:23 syranide anyway, brb10min 30827 2013-12-29 19:22:56 balpert syranide: maybe you'll like that ^ 30828 2013-12-29 19:33:21 syranide balpert: ooooh 30829 2013-12-29 19:33:29 syranide balpert: for any adjacent strings? 30830 2013-12-29 19:33:32 balpert yup 30831 2013-12-29 19:33:39 syranide awesome, jeffmo will like that 30832 2013-12-29 19:34:15 syranide balpert: but basically, we could basically strip the spans then? 30833 2013-12-29 19:34:27 balpert when there are only text children, the span is stripped 30834 2013-12-29 19:34:34 balpert we still use the span when putting text next to an element 30835 2013-12-29 19:34:42 balpert though perhaps we don't need to 30836 2013-12-29 19:34:56 syranide balpert: but do we really? the only reason I see is for FF that *may* split TextNodes right? 30837 2013-12-29 19:34:59 syranide or wait, reactid... 30838 2013-12-29 19:35:02 syranide yes 30839 2013-12-29 19:35:04 balpert reactid 30840 2013-12-29 19:35:12 balpert but if you can get the adjacent component! 30841 2013-12-29 19:35:15 balpert then maybe you don't need it 30842 2013-12-29 19:35:20 syranide balpert: exactly my thought 30843 2013-12-29 19:35:29 balpert would make ReactMultiChild significantly more complicated though 30844 2013-12-29 19:35:50 syranide balpert: I guess the biggest issue is that React doesn't provide that today? (and it cannot be done cheaply right now) 30845 2013-12-29 19:35:59 balpert doesn't provide what? 30846 2013-12-29 19:36:06 syranide balpert: a way to find siblings 30847 2013-12-29 19:36:11 balpert oh 30848 2013-12-29 19:36:30 balpert well, ReactMultiChild doesn't have any trouble with that 30849 2013-12-29 19:36:48 syranide really? 30850 2013-12-29 19:36:49 balpert so if we get rid of ReactTextComponent completely and just make ReactMultiChild handle text 30851 2013-12-29 19:37:01 syranide oh that seems reasonable 30852 2013-12-29 19:37:03 balpert it iterates through the children in order; it could easily look at siblings 30853 2013-12-29 19:37:18 syranide yeah 30854 2013-12-29 19:37:28 syranide shit this is awesome, well done! 30855 2013-12-29 19:37:56 balpert well, for now we'll still have spans if it has an element sibling 30856 2013-12-29 19:38:06 balpert but if it's only text children then you'll just have one text node 30857 2013-12-29 19:38:13 balpert I feel bad for ReactMultiChildText-test 30858 2013-12-29 19:38:20 balpert it's all assertTextNode now 30859 2013-12-29 19:38:53 syranide yeah 30860 2013-12-29 19:39:00 syranide haha 30861 2013-12-29 19:42:31 syranide balpert: but basically, it should be "fairly" simple to solve "spans" now though? (I need to study ReactMultiChild apparently :D) 30862 2013-12-29 19:44:38 balpert I think so 30863 2013-12-29 19:44:56 balpert for some definition of "fairly" 30864 2013-12-29 19:45:07 syranide hehe 30865 2013-12-29 19:45:29 balpert ReactMultiChild is a little confusing because it does a bunch of queueing in order to create all of the HTML at the same time 30866 2013-12-29 19:45:49 syranide yeah, I guess it's conceptually simple now, it may just be technically "messy" 30867 2013-12-29 19:45:58 syranide possibly 30868 2013-12-29 19:52:45 syranide gahh, trying to decipher the w3 standard for "key" and determine if perhaps it actually is sensible and just that IEs previous behavior is wrong... http://www.w3.org/TR/DOM-Level-3-Events/#key-algorithm 30869 2013-12-29 19:52:59 syranide but I can't decipher what happens to printable keys 30870 2013-12-29 19:53:32 syranide lack of char is still stupid though ^^ 30871 2013-12-29 19:53:50 syranide ah nope, it's stupid 30872 2013-12-29 20:02:21 petehunt jasonvanzyl: yt? 30873 2013-12-29 20:02:35 jasonvanzyl yup 30874 2013-12-29 20:02:49 petehunt jasonvanzyl: heyo, here is one thing i was messing around with for a router http://jsfiddle.net/4ZKpP/ 30875 2013-12-29 20:03:02 petehunt it's kind-of-sort-of like what we use for instagram 30876 2013-12-29 20:03:29 jasonvanzyl cool, i'll add it to my doco and try it 30877 2013-12-29 20:03:42 jasonvanzyl i'm trying a bunch of stuff and i'll ask more questions here and then post it to the list sometime this week 30878 2013-12-29 20:03:47 petehunt yeah, i think gluing that together with ember's route-recognizer will end up being really nice 30879 2013-12-29 20:04:08 petehunt the thing that makes my fiddle cool is that it's designed to work with both client and server rendering 30880 2013-12-29 20:04:51 jasonvanzyl i'm just going through the blog entries and picking out components, and from all the examples. to put together little bootstrap3 app with a router, tables, trees, forms. basic stuff 30881 2013-12-29 20:04:55 jasonvanzyl but helps me learn 30882 2013-12-29 20:05:06 petehunt jasonvanzyl: that's awesome 30883 2013-12-29 20:05:18 petehunt having a nice full-stack example would be great 30884 2013-12-29 20:05:37 jasonvanzyl the blog post on tables is pretty much a 140 line replacement for datatables 30885 2013-12-29 20:06:12 petehunt jasonvanzyl: chenglou and i are currently working on a better starter kit based on yeoman. would love to get feedback :) 30886 2013-12-29 20:06:34 jasonvanzyl that 140 lines is a pretty decent replacement for https://datatables.net is pretty neat 30887 2013-12-29 20:06:39 petehunt npm install -g yo generator-react-library ; mkdir myapp ; cd myapp; yo react-library 30888 2013-12-29 20:06:43 jasonvanzyl happy to try it 30889 2013-12-29 20:06:44 petehunt jasonvanzyl: which blog post? 30890 2013-12-29 20:07:55 jasonvanzyl one in the community blog section, http://www.phpied.com/reactivetable-bookmarklet/ 30891 2013-12-29 20:08:05 jasonvanzyl http://www.phpied.com/files/react/src/table2.js 30892 2013-12-29 20:08:50 petehunt oh yeah 30893 2013-12-29 20:09:03 petehunt there is a slide deck that goes along with that i think 30894 2013-12-29 20:16:06 jasonvanzyl there we go, added the notes: https://github.com/jvanzyl/react-notes/blob/master/NOTES.md 30895 2013-12-29 20:20:36 jasonvanzyl petehunt: i just went through the yo example 30896 2013-12-29 20:20:56 jasonvanzyl all worked until trying to run the server, not sure if i need something else or my environment is just different 30897 2013-12-29 20:20:57 jasonvanzyl https://gist.github.com/jvanzyl/9e38cbf350d91c88b521 30898 2013-12-29 20:21:27 petehunt oh 30899 2013-12-29 20:21:28 petehunt npm install statics 30900 2013-12-29 20:21:35 petehunt yeah, fixed in master :P 30901 2013-12-29 20:22:53 syranide balpert: I believe I was wrong before, it seems I *can* improve "key" support to include printable characters in all browsers BUT it requires constructing the synthetic KeyDown from both KeyDown+KeyPress and using some decidedly non-fancy logic, but it should be robust, quite small and defers to native "key" support if available ... sounds good? (being able to listen to keys should be useful for hotkeys/accessors without defering to the deprecated onKey 30902 2013-12-29 20:25:37 syranide (so basically, we could deprecate the use of onKeyPress event ourselves) 30903 2013-12-29 20:32:18 syranide I guess the "worst" part of it, is that the synthetic KeyDown would then technically originate from KeyDown OR KeyPress (but looks the same to the users) 30904 2013-12-29 21:11:19 balpert is preventing keydown the same as preventing keypress? 30905 2013-12-29 21:16:34 syranide balpert: yep, even if preventing keydown on the keydown event from the keypress event 30906 2013-12-29 21:16:48 syranide (perhaps it's just a "global" preventDefault?) 30907 2013-12-29 21:17:09 syranide (i.e, storing the keydown event) 30908 2013-12-29 21:17:45 syranide so we can even send the keydown event from within the keypress event (so everything looks as usual) 30909 2013-12-29 21:19:12 syranide the only *ugly* issue is that it may not be possible to determine 100% *if* there will be a keypress event, so setTimeout/requestAnimationFrame may have to be used for certain weird cases, but it should be transparent (and never an issue) from the users point of view 30910 2013-12-29 21:20:25 syranide but printable chars are ok, and modifier keys are easy to distinguish, so only possibly weird "special cases" 30911 2013-12-29 21:22:06 syranide "send the keydown event from within the keypress event" (as nativeEvent) 30912 2013-12-29 22:18:47 tony Could someone point me to the event that executes when a component(or owned component) renders to the actual DOM? 30913 2013-12-29 22:19:06 syranide tony: componentDidMount 30914 2013-12-29 22:19:28 tony thank you syranide 30915 2013-12-29 22:19:31 syranide tony: here's an overview of all of them http://facebook.github.io/react/docs/component-specs.html 30916 2013-12-29 22:19:36 syranide np 30917 2013-12-29 22:21:18 syranide petehunt: I'm experimenting with improved HTML5 keyboard event support, and seriously, the design of React is seriously impressive! 30918 2013-12-29 22:21:39 petehunt syranide: yeah, it really is great 30919 2013-12-29 22:21:46 petehunt i claim 0 credit for it 30920 2013-12-29 22:22:04 syranide petehunt: hehe, even stuff that seems way out there, just slots in perfectly 30921 2013-12-29 22:22:28 petehunt syranide: well, that's because react isn't really a DOM framework for building web apps 30922 2013-12-29 22:22:40 petehunt it's more like a way to render view hierarchies and handle events on a remote renderer 30923 2013-12-29 22:22:42 syranide petehunt: (I'm talking about core btw) 30924 2013-12-29 22:23:01 petehunt so stuff that would seem crazy in DOM land isn't so crazy when you look at it like that 30925 2013-12-29 22:23:09 syranide yep 30926 2013-12-29 22:23:13 petehunt so like the events system is crazy flexible 30927 2013-12-29 22:25:50 syranide yeah, and it's impressive in that it's not just crazy flexible, I have little experience with working on the core of large frameworks, but I'm finding my way around React rather quickly 30928 2013-12-29 22:26:08 smizell peterhunt: I think one cool thing that React allows is to separate out the HTML that represents a resource in a RESTful way and the HTML that is for the UI (views). Most of the time, apps combine those types of HTML and it complicates things. 30929 2013-12-29 22:26:59 smizell If that makes sense. 30930 2013-12-29 22:27:56 petehunt syranide: yeah, my only complaint is that we rely a lot on injection and mixins in core, which can sometimes make it a little hard to follow if you haven't memorized where some stuff is 30931 2013-12-29 22:28:11 petehunt smizell: can you give an example? 30932 2013-12-29 22:28:15 syranide petehunt: yeah, I'd agree, the mixin-"mania" in some places is quite confusing 30933 2013-12-29 22:28:37 petehunt there's only like 3 important ones 30934 2013-12-29 22:29:06 petehunt and we also use different terminology in the core (reconciliation, composite component etc) than we do in our user docs 30935 2013-12-29 22:29:30 petehunt but in general everything is pretty modular, well-typed and compresses nicely] 30936 2013-12-29 22:29:40 syranide yep! 30937 2013-12-29 22:30:20 syranide it's fun to see that it's progressing quite rapidly now too (although in many smaller ways, they are important to the bigger picture) 30938 2013-12-29 22:30:39 smizell peterhunt: In REST, you have resources and representations of those resources. A lot of modern APIs represent those resources with some JSON format. It is also perfectly valid to represent a resource with HTML. HTML was meant to describe a resource and was not meant as a view layer for applications. 30939 2013-12-29 22:31:33 petehunt smizell: oh yeah for sure 30940 2013-12-29 22:31:43 smizell peterhunt: React can free you to represent your resource as pure, semantic HTML containing no UI data and then use JSX to render your UI from the HTML. 30941 2013-12-29 22:31:47 petehunt smizell: want to see a neat trick that i do on instagram.com 30942 2013-12-29 22:31:54 smizell Yep! 30943 2013-12-29 22:31:59 petehunt oh, that is interesting. so using html as a data transport format 30944 2013-12-29 22:32:20 smizell Yeah, I made a fun prototype of this idea recently: http://react-pjax.herokuapp.com/ 30945 2013-12-29 22:32:41 petehunt smizell: so go to any instagram profile on the web (i.e. http://instagram.com/floydophone) and view a photo and click on a user profile and watch the network tab 30946 2013-12-29 22:32:44 smizell code: https://github.com/smizell/react-pjax/blob/master/app/assets/javascripts/blog_app.js.jsx 30947 2013-12-29 22:33:25 petehunt smizell: you'll see that the first request that loads the initial page returns some html with the react bootup code 30948 2013-12-29 22:33:42 petehunt however subsequent requests hit URLs that look like this http://instagram.com/floydophone?__a=1 30949 2013-12-29 22:34:08 petehunt which is just a JSON representation of the props of the UserProfile component 30950 2013-12-29 22:34:37 smizell Ah cool... so it loads the props and it changes the UI? 30951 2013-12-29 22:34:41 petehunt yep 30952 2013-12-29 22:34:50 petehunt well, it also lazy-loads code 30953 2013-12-29 22:34:51 smizell Man that's neat 30954 2013-12-29 22:35:07 petehunt so if you go from like newsfeed to a profile, it knows how to download the js for the profile before changing the component 30955 2013-12-29 22:35:31 petehunt smizell: it's a vindication of your idea, except we use json for transport and not html 30956 2013-12-29 22:35:41 smizell Makes sense 30957 2013-12-29 22:36:03 collypops that's pretty awesome 30958 2013-12-29 22:36:07 smizell The cool thing about using HTML is that I can use something like jQuery to click links and submit forms in the html transport. 30959 2013-12-29 22:36:53 petehunt we rewrote basically all of our packaging and routing and i'm going to convince the guy that did it to write a blog post about it 30960 2013-12-29 22:36:57 petehunt maybe we can open source if we have time 30961 2013-12-29 22:37:08 petehunt seems like everyone wants a react router 30962 2013-12-29 22:37:25 petehunt smizell: sounds like microformats 30963 2013-12-29 22:37:43 smizell peterhunt: Yeah. Did you see the link I sent of my proof of concept? 30964 2013-12-29 22:37:57 petehunt checking it out now 30965 2013-12-29 22:37:59 smizell I can't decide if what I did is really cool or really ridiculous :) 30966 2013-12-29 22:38:06 collypops router++ 30967 2013-12-29 22:38:26 smizell I used pjax instead of a router since I'm using HTML for transport. 30968 2013-12-29 22:39:41 smizell And instead of tying the state of the page to the URL via a router, I tie it to a resource name via a meta tag. So in theory, I could change every URL in this little app and the React stuff would still work. 30969 2013-12-29 22:40:01 petehunt smizell: you built a browser! 30970 2013-12-29 22:40:16 collypops petehunt: for profiles, I've noticed you bundle all the data for each post, but request it again when I click a photo to view the detail of. do you use any of the old data at all when rendering the view, then diff the data? or just wait til the fresh data loads? 30971 2013-12-29 22:40:24 smizell peterhunt: Well, I built a UI layer that utilizes a browser instead of building one in JS. 30972 2013-12-29 22:40:36 petehunt collypops: our data management sucks on the profile pages 30973 2013-12-29 22:40:43 petehunt it's really naive 30974 2013-12-29 22:41:05 petehunt i have the luxury of being able to say: "the user is downloading a bunch of jpegs anyway, may as well refetch all the json" 30975 2013-12-29 22:41:05 smizell I consider routes and hardcoded ajax calls to be duplicating what a browser already does. 30976 2013-12-29 22:41:26 collypops well, you're displaying some of the data on hover, but wasting the comments data 30977 2013-12-29 22:41:43 collypops yeah, I agree. if you're doing image based work, it's not much overhead 30978 2013-12-29 22:41:53 syranide petehunt: do you have any experience with adding ctrl- hotkeys/shortcuts to HTML-apps? 30979 2013-12-29 22:41:56 petehunt smizell: same -- but they are useful for optimistic transitions 30980 2013-12-29 22:42:01 petehunt syranide: nope, sorry 30981 2013-12-29 22:42:21 petehunt collypops: i'm sure there's a lot of waste there 30982 2013-12-29 22:42:23 collypops it'd be cool to render the react component from that data (seeing as you have it) then updating it when you get the latest version of the model 30983 2013-12-29 22:42:43 collypops that way it can be almost instant (excluding images) 30984 2013-12-29 22:42:48 petehunt yeah, that actually wouldn't be too hard because we have a router on the client 30985 2013-12-29 22:43:02 petehunt the router just doesn't have an optimistic behavior attached, but we could 30986 2013-12-29 22:43:16 petehunt thats why having a client-side router is nice smizell 30987 2013-12-29 22:43:21 smizell peterhunt: I could accomplish optimistic transitions I guess with link relations. 30988 2013-12-29 22:43:22 collypops yup! 30989 2013-12-29 22:43:55 petehunt damn backspace button next to my power button 30990 2013-12-29 22:43:56 collypops is the router you're using just now much different from the Director router in the TodoMVC example? 30991 2013-12-29 22:44:05 petehunt collypops: for IG, it's just backbone 30992 2013-12-29 22:44:13 collypops ah cool 30993 2013-12-29 22:44:28 petehunt i would go with something like ember's route-recognizer if i could do it all again though 30994 2013-12-29 22:44:40 collypops ACTION looks into that... 30995 2013-12-29 22:44:46 petehunt backbone's router doesn't run on the server and they don't want my PR :( 30996 2013-12-29 22:45:08 petehunt so you can get into terrible situations since you have to duplicate routing code client and server. if they're inconsistent you are in for a world of hurt 30997 2013-12-29 22:45:17 collypops good luck with that. I think @jashkenas only just restored AMD to the project 30998 2013-12-29 22:45:18 smizell peterhunt: If I built an app with pjax like I have here, I don't think I'd need a router. 30999 2013-12-29 22:45:36 petehunt i.e. this one time the client-side router didn't accept instagram.com/profilename/ (trailing slash) but the server did 31000 2013-12-29 22:45:39 collypops (not that that bothers me. I'm all about the browserify) 31001 2013-12-29 22:45:40 smizell peterhunt: I've always heard ember's router is awesome compared to others. 31002 2013-12-29 22:45:45 petehunt so the router's fallback behavior is: go to the server 31003 2013-12-29 22:45:52 collypops yup 31004 2013-12-29 22:45:54 petehunt and the server was like: this page is client rendered! send down the page 31005 2013-12-29 22:45:59 petehunt and then the client was like: go to the server! 31006 2013-12-29 22:46:07 smizell Yikes 31007 2013-12-29 22:46:11 petehunt and the ops guy was like: pete you increased IG traffic by 15% in 5 minutes 31008 2013-12-29 22:46:18 collypops haha 31009 2013-12-29 22:47:23 collypops side question: can your IG client be built entirely using the IG API? 31010 2013-12-29 22:47:34 smizell So is Instagram using React a lot? 31011 2013-12-29 22:48:07 petehunt collypops: probably, but we built our own data layer thing to be more consistent with the FB side of the world 31012 2013-12-29 22:48:13 petehunt smizell: the whole page is a react component 31013 2013-12-29 22:48:17 petehunt in most places 31014 2013-12-29 22:48:18 collypops ahhh ok 31015 2013-12-29 22:51:06 smizell petehunt: I just realized that you were the speaker in the video I watched on React. It was a really great talk! 31016 2013-12-29 22:51:58 smizell I had been moving toward Angular but it got me interested to check out React instead. 31017 2013-12-29 22:52:30 petehunt smizell: thanks! 31018 2013-12-29 22:52:42 petehunt we desperately needed to change our communication which is why i gave it :) 31019 2013-12-29 22:54:42 collypops I'm currently reading that article on the diffing algorithm 31020 2013-12-29 22:55:34 collypops http://calendar.perfplanet.com/2013/diff/ 31021 2013-12-29 23:02:30 petehunt ? 31022 2013-12-29 23:02:58 collypops It really helps convey the idea that you can make your rendering faster if you can reason about your data and your UI 31023 2013-12-29 23:03:38 collypops if you're not sloppy with updating state and defer responsibility to components, you'll end up with a really slick, de-coupled app 31024 2013-12-29 23:04:09 collypops if anything, I now think React is less magical, but still impressive 31025 2013-12-29 23:04:23 petehunt haha yeah 31026 2013-12-29 23:04:31 petehunt but magic is usually bad! 31027 2013-12-29 23:04:42 collypops yeah, I agree 31028 2013-12-29 23:04:57 collypops tbh, that's what's kept me away from Angular 31029 2013-12-29 23:05:05 collypops (and to a certain extent, Ember) 31030 2013-12-29 23:06:41 petehunt i dont see ember as too magical 31031 2013-12-29 23:06:44 petehunt angular, certainly. 31032 2013-12-29 23:07:43 petehunt ember just falls into the change tracking trap :) 31033 2013-12-29 23:07:43 collypops about that router thing, I didn't realise route-recogniser is a separate project: https://github.com/tildeio/route-recognizer 31034 2013-12-29 23:07:49 collypops yeah 31035 2013-12-29 23:08:18 collypops maybe something you can use to replace Backbone.Router 31036 2013-12-29 23:08:37 syranide balpert: awake? 31037 2013-12-29 23:10:08 petehunt yeah thats how id like to build our router 31038 2013-12-29 23:11:32 smizell petehunt: do you see the React router being based on URLs or on something in the state? 31039 2013-12-29 23:11:50 smizell or all of the above? 31040 2013-12-29 23:11:55 petehunt smizell: i think we should treat the browser address bar just like we treat controlled form fieelds 31041 2013-12-29 23:12:38 petehunt that is, it's bound to state somewhere which is the authoritative value 31042 2013-12-29 23:12:46 petehunt you navigate with setState() 31043 2013-12-29 23:12:55 syranide petehunt: oooh 31044 2013-12-29 23:13:05 petehunt and when user changes the URL, it's a *request* to update state, which the user can reject or change 31045 2013-12-29 23:13:06 syranide that makes perfect sense too 31046 2013-12-29 23:13:09 petehunt i.e. redirect 31047 2013-12-29 23:13:12 smizell petehunt: Interesting 31048 2013-12-29 23:13:25 petehunt and you should be able to provide ad efault value via a prop, so hyou can use it on the server 31049 2013-12-29 23:13:39 smizell petehunt: Not to go back to my example, but I do that when pjax requests are complete. When the URL changes, I update the state. 31050 2013-12-29 23:14:24 petehunt nice 31051 2013-12-29 23:14:36 smizell I also change state on browser back and forward clicks. 31052 2013-12-29 23:16:16 smizell Which got me to thinking, with React and states, would back clicks be going back to merely a URL with potentially a new state, or back to a URL with the state that was there at that time. The former is how the web currently works I guess. 31053 2013-12-29 23:16:54 petehunt thats the beauty, you can serialize your app state to the url 31054 2013-12-29 23:17:10 petehunt so like, scroll loading 31055 2013-12-29 23:17:24 smizell Ahh yeah 31056 2013-12-29 23:18:25 smizell That's really interesting 31057 2013-12-29 23:20:27 smizell That's neat because it is really how the web works. I think a lot of frameworks break with the genius behind it. You go to a URL to get a state of a resource and then have links/forms/etc that act as the engine of the application state (hateoas). 31058 2013-12-29 23:33:01 syranide vjeux: btw, you know you're the new kind of react? :) https://github.com/facebook/react/pulse 31059 2013-12-29 23:33:20 vjeux syranide: lol 31060 2013-12-29 23:33:25 syranide hehe 31061 2013-12-29 23:33:29 vjeux taking in pull requests shouldn't count as commits 31062 2013-12-29 23:34:43 syranide vjeux: that's the weird thing, I don't think it should, perhaps it's just slow to realize it (zpao doesn't have any commits, but lots of merges) 31063 2013-12-29 23:35:02 vjeux hmm, i don't think i did 10 commits 31064 2013-12-29 23:35:09 vjeux 19 31065 2013-12-29 23:35:19 syranide that too 31066 2013-12-29 23:35:27 syranide you did 6 31067 2013-12-29 23:35:31 vjeux oh 31068 2013-12-29 23:35:37 vjeux when i commit to gh-pages 31069 2013-12-29 23:35:38 syranide oh wait 31070 2013-12-29 23:35:40 syranide more before that 31071 2013-12-29 23:35:41 vjeux it counts as a commit 31072 2013-12-29 23:35:45 syranide ah right 31073 2013-12-29 23:36:05 vjeux and i did quite a lot because i made a lot of mistakes :p 31074 2013-12-29 23:36:15 syranide petehunt: btw, I forgot, what did you say about being able to exclude props from transferPropsTo ? 31075 2013-12-29 23:36:20 syranide :D 31076 2013-12-29 23:36:28 petehunt seems like a good idea? 31077 2013-12-29 23:36:44 syranide petehunt: I should submit a PR? I seem to recall that you had something in the pipe... perhaps I'm mistaken 31078 2013-12-29 23:36:54 petehunt i did 31079 2013-12-29 23:37:05 petehunt it landed internally, waiting on zpao to get back so we can sync 31080 2013-12-29 23:37:05 syranide ah 31081 2013-12-29 23:37:08 petehunt it's just an internal refactor 31082 2013-12-29 23:37:15 syranide right 31083 2013-12-29 23:37:22 petehunt but yeah 31084 2013-12-29 23:37:24 petehunt something like 31085 2013-12-29 23:37:36 petehunt this.transferPropsTo(elem, React.Props.ALL) 31086 2013-12-29 23:37:40 petehunt this.transferPropsTo(elem, React.Props.DOM) 31087 2013-12-29 23:37:43 syranide I'm not in dire need of it, just checking 31088 2013-12-29 23:37:52 petehunt this.transferPropsTo(elem, {myProp: true, otherThing: true}) 31089 2013-12-29 23:37:55 petehunt i dunno 31090 2013-12-29 23:38:21 syranide petehunt: oh wait, you have *not* done this? (I'm confused ^^) 31091 2013-12-29 23:38:32 syranide or have you 31092 2013-12-29 23:38:35 petehunt no i did not 31093 2013-12-29 23:38:48 petehunt i added a cloneWithProps() function that refactored that code a bit though 31094 2013-12-29 23:39:09 syranide oh right right! wait for your diff to sync and then I'll look into submitting a PR? 31095 2013-12-29 23:40:02 petehunt it will spark a lot of discussion 31096 2013-12-29 23:40:16 petehunt probably won't get any activity until fb is back from vacation (jan) 31097 2013-12-29 23:40:32 syranide yeah that's no problem with me if it's ok with you 31098 2013-12-29 23:40:37 petehunt fine by me 31099 2013-12-29 23:41:03 syranide great 31100 2013-12-29 23:51:21 collypops so does FB have a holiday shutdown? 31101 2013-12-29 23:52:27 vjeux collypops: nop, but a lot of people are taking ptos 31102 2013-12-29 23:52:44 collypops makes sense 31103 2013-12-29 23:52:46 vjeux A LOT i should say :p 31104 2013-12-29 23:52:53 vjeux the office was pretty empty last week 31105 2013-12-29 23:52:59 collypops feel a bit like a ghost town? 31106 2013-12-30 00:18:27 balpert syranide: what's up? 31107 2013-12-30 00:18:46 balpert none of you know how to run the sync script, eh? 31108 2013-12-30 00:33:58 aboodman it seems like the virtual dom that reactjs uses would make unit testing with bare v8 or spidermonkey relatively easy 31109 2013-12-30 00:34:13 aboodman but i don't see anything like that in current source, or on the mailing list 31110 2013-12-30 00:34:43 aboodman i hate that in order to do automated testing you have to run an entire webkit or something 31111 2013-12-30 00:35:15 jasonvanzyl is there anything special required to get keyboard events working? 31112 2013-12-30 00:48:21 balpert aboodman: right now tests are designed to run in phantomjs or jsdom mostly -- see src/dom/__tests__/ReactDOMInput-test.js for an example 31113 2013-12-30 00:48:44 aboodman ACTION looks 31114 2013-12-30 00:50:18 balpert jasonvanzyl: shouldn't be, what are you seeing? 31115 2013-12-30 00:50:31 aboodman balpert: do you know if anyone currently runs tests using jsdom? 31116 2013-12-30 00:50:53 balpert aboodman: Facebook does internally 31117 2013-12-30 00:51:04 aboodman cool 31118 2013-12-30 00:51:08 aboodman i will try and set that up then 31119 2013-12-30 00:51:09 aboodman thanks 31120 2013-12-30 00:51:22 balpert the runner isn't open source but all the react tests should pass with jsdom I think 31121 2013-12-30 00:51:50 jasonvanzyl balpert: i'm looking for something i setup wrong, the events just aren't trapped. i'll just make sure, and make a jsfiddle to check 31122 2013-12-30 01:00:07 jasonvanzyl balpert: might bootstrap js or jquery be interferring? i'm using both of those 31123 2013-12-30 01:00:35 balpert jasonvanzyl: I don't think so? 31124 2013-12-30 01:00:44 balpert which events are you listening to? 31125 2013-12-30 01:01:03 jasonvanzyl onKeyPress 31126 2013-12-30 01:05:28 balpert does onKeyDown work? 31127 2013-12-30 01:05:45 balpert your event handler isn't getting called at all? 31128 2013-12-30 01:22:58 jasonvanzyl balpert: for mouse events it works just fine 31129 2013-12-30 01:24:54 jasonvanzyl balpert: should this work in jsfiddle? http://jsfiddle.net/jvanzyl/FtY82/2/ 31130 2013-12-30 01:25:19 jasonvanzyl just hitting any key and having the message update? 31131 2013-12-30 01:28:06 balpert oh, you need to focus the div somehow for it to receive key presses 31132 2013-12-30 01:28:15 balpert if you put an input inside you'll see that it works 31133 2013-12-30 01:31:28 jasonvanzyl ah, sorry. i normally right tools and backend bits. 31134 2013-12-30 01:33:09 jasonvanzyl so i want to be able to keyboard naviate around the rows in a table, so that if i key around i update the view i'm looking at. just wrap it in an invisible input? 31135 2013-12-30 01:43:31 balpert probably you want to add an event listener on window (which you have to do manually in componentDidMount) 31136 2013-12-30 01:51:14 petehunt aboodman: yt? 31137 2013-12-30 01:51:39 petehunt here is a simple example of one way to do it http://jsfiddle.net/J9CS2/ 31138 2013-12-30 03:04:57 hashpuppy i like to start js client-end projects with just html + js. with jsx i can't just src the jsx file and use the jsxtransformer, because i get: "Cross origin requests are only supported for HTTP." i was just wondering what the preferred way to develop would be? 31139 2013-12-30 03:05:06 hashpuppy something simple 31140 2013-12-30 03:05:22 hashpuppy i don't mind learning something new if it is beneficial 31141 2013-12-30 03:08:39 collypops hashpuppy, you'll want to get a tiny, no-fuss static server 31142 2013-12-30 03:09:01 hashpuppy i see. probably the simplest option 31143 2013-12-30 03:10:16 collypops node-static has always been fine for me 31144 2013-12-30 03:10:24 collypops npm install -g node-static 31145 2013-12-30 03:10:41 collypops then you can just type "static" in any directory, and it'll get served up under port 8080 31146 2013-12-30 03:11:44 collypops there's other options, but this is simple enough to stop you worrying about opening up file paths in your browser and not being able to XHR in resources 31147 2013-12-30 03:28:14 hashpuppy collypops: thanks for the help 31148 2013-12-30 03:29:53 collypops hashpuppy, no worries. also, have a look into Grunt, Yeoman, etc. for quickly bootstrapping apps. You'll be amazed at how much time you've been wasting tapping out boilerplate code 31149 2013-12-30 03:34:42 balpert python -m SimpleHTTPServer also works out of the box on most machines 31150 2013-12-30 06:02:20 petehunt syranide: looking for high impact work? :) 31151 2013-12-30 06:04:32 balpert petehunt: what's stopping wzrd.in right now? 31152 2013-12-30 06:05:01 petehunt https://github.com/facebook/react/issues/680 31153 2013-12-30 06:05:08 petehunt er no 31154 2013-12-30 06:05:09 petehunt https://github.com/jesusabdullah/browserify-cdn/issues/59 31155 2013-12-30 06:05:25 petehunt i dont know why 31156 2013-12-30 06:05:33 petehunt balpert: but i think we should build them all out into npm and build whatever tooling we need on top 31157 2013-12-30 06:06:49 balpert sigh, I still have no idea how node packaging works 31158 2013-12-30 06:07:23 petehunt balpert: all we have to do is get it into npm 31159 2013-12-30 06:07:30 petehunt then someone who knows how it works can figure it out in 5 min 31160 2013-12-30 06:07:38 balpert you mean just upload packages for each of those? 31161 2013-12-30 06:07:48 petehunt balpert: well, we should add it to the gruntfile 31162 2013-12-30 06:07:59 petehunt so that when we cut a release we cut releases for all addons 31163 2013-12-30 06:08:13 balpert right 31164 2013-12-30 06:08:25 petehunt balpert: hell, we could even cheat 31165 2013-12-30 06:08:45 petehunt and just do require('react/addons/ReactTransitionGroup') 31166 2013-12-30 06:08:52 petehunt that would actually be a super easy change 31167 2013-12-30 06:09:27 balpert you mean copy certain things from lib to addons 31168 2013-12-30 06:11:06 aboodman petehunt: sorry, i missed your reply 31169 2013-12-30 06:11:23 petehunt balpert: well, we only ship what is required by our entrypoint 31170 2013-12-30 06:11:30 petehunt so we don't require the addons right now so they aren't even in lib iirc 31171 2013-12-30 06:11:36 balpert oh 31172 2013-12-30 06:11:48 petehunt aboodman: hey, we're talking about packaging ReactTestUtils right now which should help with the testing story 31173 2013-12-30 06:12:00 petehunt aboodman: but i had a fiddle to show you 31174 2013-12-30 06:12:07 petehunt somewhat hacky but motivating 31175 2013-12-30 06:12:16 aboodman i don't understand the fiddle 31176 2013-12-30 06:12:29 petehunt aboodman: this one? http://jsfiddle.net/J9CS2/ 31177 2013-12-30 06:13:09 petehunt aboodman: you were asking about testing w/o a real DOM, right? 31178 2013-12-30 06:13:11 aboodman yes 31179 2013-12-30 06:13:19 aboodman sorry, i was trying to understand how this asserts something 31180 2013-12-30 06:13:22 aboodman i think i see what you mean 31181 2013-12-30 06:13:26 petehunt so backstory: all of react basically comes from facebook use cases 31182 2013-12-30 06:13:35 balpert petehunt: okay, looks like ReactWithAddons and thus ReactTransitionGroup, etc are there but ResponderEventPlugin isn't, for example 31183 2013-12-30 06:13:41 petehunt and we already had a test environment that used jsdom 31184 2013-12-30 06:14:06 petehunt so basically once you get the component mounted, you can assert on the return value of its render() method 31185 2013-12-30 06:14:19 aboodman that seems like basically all you need 31186 2013-12-30 06:14:24 aboodman that works today? 31187 2013-12-30 06:14:25 petehunt you can cheat and use renderComponentToString() to trick it into being mounted 31188 2013-12-30 06:14:28 petehunt yeah 31189 2013-12-30 06:14:35 aboodman ok cool 31190 2013-12-30 06:14:56 aboodman i am dreading setting up testing automation 31191 2013-12-30 06:15:09 petehunt aboodman: why? 31192 2013-12-30 06:15:09 aboodman but i will use the fact that it doesn't have to run headless webkit as motivation :) 31193 2013-12-30 06:15:19 aboodman because i would rather be making pretty things? 31194 2013-12-30 06:15:25 petehunt oh, heh, yeah 31195 2013-12-30 06:15:35 petehunt seen saucelabs? 31196 2013-12-30 06:15:45 petehunt you can pay them to run selenium 31197 2013-12-30 06:16:18 aboodman i think i rather test at a lower level 31198 2013-12-30 06:16:52 aboodman anyway this is for an open source thing (camlistore) and we'd rather not rely on comercial tools 31199 2013-12-30 06:17:43 balpert hey, I have heard of both of the guys in the video on http://camlistore.org/ 31200 2013-12-30 06:17:49 aboodman https://camlistore-review.googlesource.com/#/c/1734/ (am probably doing it all wrong, but this was really fun and mostly easy) 31201 2013-12-30 06:18:01 petehunt makes sense. we have had good success with it though (don't think we're paying) 31202 2013-12-30 06:19:20 balpert aboodman: btw React automatically adds 'px' for you to styles 31203 2013-12-30 06:19:41 petehunt aboodman: nothing stands out as wrong to me. the thing that usually trips people up is figuring out what *not* to put in state 31204 2013-12-30 06:20:02 aboodman balpert: ah, thanks 31205 2013-12-30 06:20:12 balpert np 31206 2013-12-30 06:20:14 petehunt one improvement, you should probably add a getInitialState() method if you're gonna use state 31207 2013-12-30 06:20:28 petehunt just to make it explicit and not rely on undefined (kills VM optimizations) 31208 2013-12-30 06:20:35 aboodman i had that at first, but didn't see how it helped. 31209 2013-12-30 06:20:53 aboodman because i'd have to flesh out the entire tree of state, so i just end up checking child properties. 31210 2013-12-30 06:21:00 aboodman s/so/or/ 31211 2013-12-30 06:21:39 petehunt aboodman: you're checking for this.state truthiness in a few places 31212 2013-12-30 06:21:59 aboodman so are you saying to just have getInitialState() return null ? 31213 2013-12-30 06:22:00 petehunt like render(), you check for its presence before setting the value of description 31214 2013-12-30 06:22:17 petehunt if you had getInitialState: function() { return {description: ''}; } you could get rid of that check 31215 2013-12-30 06:22:55 aboodman right. but elsewhere i need other properties like state.meta 31216 2013-12-30 06:23:09 aboodman so i'd have to add empty values for anything like that. 31217 2013-12-30 06:23:12 petehunt aboodman: yeah, i usually just init them to null 31218 2013-12-30 06:23:22 petehunt (still digesting your code btw) 31219 2013-12-30 06:23:30 balpert petehunt: I think we need a command-line tool that wraps browserify so you can do like 'react-build --addons react-classset,react-respondereventplugin' and it spits out a JS file with those attached to React.addons or _something_ 31220 2013-12-30 06:24:01 petehunt yea 31221 2013-12-30 06:24:16 balpert petehunt: lots of people (like me!) will not be able to easily integrate anything else than a single JS file in the end 31222 2013-12-30 06:24:30 petehunt balpert: right, but want to draw a subtle distinction 31223 2013-12-30 06:24:55 petehunt would be nice if the tool worked with any npm module 31224 2013-12-30 06:25:33 petehunt aboodman: another thing... why are you using cached() ? 31225 2013-12-30 06:25:47 balpert petehunt: true, that would be nice 31226 2013-12-30 06:25:56 aboodman petehunt: I didn't want to call getPreviewSize() over and over. 31227 2013-12-30 06:26:06 aboodman s/call/calculate 31228 2013-12-30 06:26:07 petehunt usually you can defer perf optimizations until the end 31229 2013-12-30 06:26:30 aboodman petehunt: as in, root of all evil and all that? 31230 2013-12-30 06:26:47 balpert petehunt: any great ideas for the API exported by the .js file? tons of globals is so icky 31231 2013-12-30 06:26:48 petehunt aboodman: nah, i actually don't believe in premature optimization being that evil 31232 2013-12-30 06:27:12 petehunt aboodman: but react provides a lifecycle hook (shouldComponentUpdate()) that effectively lets you memoize the entire component 31233 2013-12-30 06:27:42 petehunt so my normal process would be to avoid all optimization until i see a problem 31234 2013-12-30 06:28:00 petehunt and then rather than memoizing individual functions, find the expensive component (there's usually only a handful, if any) and add shouldComponentUpdate() 31235 2013-12-30 06:28:43 aboodman petehunt: I don't understand. Wouldn't react only normally render if state had changed? 31236 2013-12-30 06:28:50 aboodman in which case rendering is the right thing to do 31237 2013-12-30 06:29:35 petehunt aboodman: right, you could move all the logic for the img into its own component 31238 2013-12-30 06:30:04 petehunt i'm not saying the memoization is wrong by any means, just wanted to make sure you were aware of that optimization 31239 2013-12-30 06:30:57 aboodman (question: if you call setState() but there aren't actually any changes, react doesn't re-render, right?) 31240 2013-12-30 06:31:05 aboodman i guess i could test that 31241 2013-12-30 06:31:09 petehunt it does re-render 31242 2013-12-30 06:31:14 petehunt by default 31243 2013-12-30 06:31:36 petehunt the reason for that is: detecting changes is usually more expensive than just re-rendering 31244 2013-12-30 06:31:57 petehunt you would have to do a deep copy/traversal of state to be sure no one mutated anything 31245 2013-12-30 06:32:13 petehunt and requiring no mutation is pretty draconian 31246 2013-12-30 06:32:49 aboodman i see. 31247 2013-12-30 06:32:53 petehunt however, if you can enforce immutability, even in just a few components, we can avoid those re-renders. if you have heard of Om, the main thing that it brings to React is enabling this optimization out of the box 31248 2013-12-30 06:33:04 petehunt because clojure has strong support for immutability 31249 2013-12-30 06:33:07 aboodman Om is what got me interested in react in the first place 31250 2013-12-30 06:33:19 aboodman but i don't want to use clojure 31251 2013-12-30 06:33:31 petehunt well it's fortunately a very thin layer on top of react 31252 2013-12-30 06:33:42 petehunt and you can use their immutable data structures in JS if you want! 31253 2013-12-30 06:33:48 petehunt https://github.com/swannodette/mori 31254 2013-12-30 06:35:24 petehunt aboodman: i need to get some rest, did you have any other questions before i take off? 31255 2013-12-30 06:35:37 aboodman petehunt: so my issue isn't caching the value across renders; it was caching it within one render. 31256 2013-12-30 06:35:46 aboodman (it is needed multiple times) 31257 2013-12-30 06:35:47 aboodman anyway 31258 2013-12-30 06:35:53 aboodman no, thanks for making react. 31259 2013-12-30 06:35:58 petehunt ah i see, makes sense then 31260 2013-12-30 06:36:18 petehunt haha, there's a big team behind it :) 31261 2013-12-30 06:36:29 petehunt but i hope you find it useful 31262 2013-12-30 10:02:58 jhjhjhjh I'm trying to create a component that can be traversed in a tree structure, where I can traverse from child to parent to child (of components of this type) and act on properties/states of those components. 31263 2013-12-30 10:03:04 syranide
    31264 2013-12-30 10:03:05 syranide \ \ \ \ \ \
    31265 2013-12-30 10:03:05 syranide \ \ \ \ \ \
    .  Nästa   
    31266 2013-12-30 10:03:08 syranide wups, sorry 31267 2013-12-30 10:03:29 jhjhjhjh Can anyone direct me in the right direction for designing such a component? 31268 2013-12-30 10:03:34 syranide jhjhjhjh: I'm not sure if you can (officially) access the parent without it sending itself as a prop 31269 2013-12-30 10:03:42 syranide but you can access the children simply with this.props.children 31270 2013-12-30 10:04:31 syranide and it's the actual children, so you can even access the state and use setState if you would want (but I don't recommend it) 31271 2013-12-30 10:04:49 jhjhjhjh I see, so I would basically have to traverse this.props.children, and this._owner? This would be a *bad idea* though right? 31272 2013-12-30 10:05:20 syranide jhjhjhjh: I'm not the guru on this, but traversing the children isn't necessarily bad I would say 31273 2013-12-30 10:05:28 syranide why do you need this? 31274 2013-12-30 10:06:50 jhjhjhjh I'm creating an application that will take an html template made by designers, where it will treat parts of the page like "blocks" based on configuration params 31275 2013-12-30 10:07:50 syranide not sure if I follow 31276 2013-12-30 10:07:52 jhjhjhjh And it will have to shift focus on these blocks, in a hierarchical way, and act on them as such based on configuration parameters 31277 2013-12-30 10:07:59 syranide ah 31278 2013-12-30 10:08:52 syranide jhjhjhjh: I obviously don't have the complete picture here, but it seems like that perhaps these "blocks" should register themselves to some "manager", which takes care of all this 31279 2013-12-30 10:09:02 syranide so that each component doesn't have to traverse up and down in weird ways 31280 2013-12-30 10:09:33 syranide but it depends 31281 2013-12-30 10:10:08 syranide and the manager could figure out the hierarchy when they register 31282 2013-12-30 10:10:17 syranide by traversing once 31283 2013-12-30 10:10:49 jhjhjhjh I was going to try to create a preprocessor, that cleans up the HTML and then divides each block into components 31284 2013-12-30 10:12:25 jhjhjhjh Is there an example of something that implements a "manager" in the way that you describe, so I can better picture it? 31285 2013-12-30 10:16:46 jhjhjhjh Is there a built-in way to send bubble or capture events? Like AngularJS's $emit and $broadcast? 31286 2013-12-30 10:18:57 jhjhjhjh syranide: thank you for the ideas 31287 2013-12-30 10:19:28 syranide jhjhjhjh: sorry, got distracted 31288 2013-12-30 10:19:47 syranide anyway, I just assumed you meant in React, but preprocessing seems like a good idea 31289 2013-12-30 10:20:38 syranide jhjhjhjh: also, no, I don't think there's any example of it, but the idea is simply that you have componentDidMount and componentWillUnmount ... in there you can register with a "global" class/object of your choice, and it can have whatever logic you want 31290 2013-12-30 10:21:32 syranide (those 2 are provided by react btw, if it wasn't obvious) 31291 2013-12-30 10:21:37 jhjhjhjh Ah okay I see, thanks 31292 2013-12-30 10:22:07 syranide np 31293 2013-12-30 10:22:34 jhjhjhjh So when the components are "mounted/unmounted", I can register them with some global class that handles my traversal logic 31294 2013-12-30 10:22:50 syranide exactly 31295 2013-12-30 10:23:20 syranide and it can do more expensive stuff if necessary, since it (theoretically) only need to traverse on register/unregister 31296 2013-12-30 10:23:47 syranide or doesn't need to at all, the parent could send itself as a prop to all the children 31297 2013-12-30 10:23:58 jhjhjhjh When this happens, I would still have to traverse children or _owner to find where to attach it on the tree structure 31298 2013-12-30 10:24:16 jhjhjhjh Okay I see, so if I used a preprocessor, I can just populate the parent/child relation using props 31299 2013-12-30 10:24:46 syranide jhjhjhjh: if you want, you could just create a mixin instead that does it, and specify the mixin for each component 31300 2013-12-30 10:25:02 syranide but yeah, both works 31301 2013-12-30 10:25:10 syranide or wait 31302 2013-12-30 10:25:17 syranide I lied you can't use a mixin, nvm 31303 2013-12-30 10:25:56 jhjhjhjh Wait, you mean use a mixin to do what? register with the global class? 31304 2013-12-30 10:26:28 syranide jhjhjhjh: yeah, you can use a mixin to register with the global class, correct... but my idea of using a mixin to send the parent to the children is wrong 31305 2013-12-30 10:26:54 syranide (and thus neatly reuse that functionality) 31306 2013-12-30 10:27:37 syranide so you could just have say "mixin: [HierarchicalManagerMixin]" 31307 2013-12-30 10:27:55 syranide in each generated component 31308 2013-12-30 10:31:41 jhjhjhjh ah okay thanks that helps a lot. so using a mixin to send parent to children would not work right? could I maybe create a render: function in the mixin and have it call a function in createClass({}) that returns the children it contains? 31309 2013-12-30 10:32:11 jhjhjhjh using mixin with render seems like it could get really messy? 31310 2013-12-30 10:36:20 syranide jhjhjhjh: you can't provide render() in both mixin and the component, BUT you could define say "modifyRender" in the mixin, which the component uses as "return (this.modifyRender(
    ))"; 31311 2013-12-30 10:36:47 syranide or you could implement render in the mixin and THAT calls "this.realRender", so that the component instead implements "realRender: function() { ... }" 31312 2013-12-30 10:37:52 syranide although, I wonder if you shouldn't just use __owner__ instead for now, and if it ever becomes private/deprecated then you can implement this as a workaround 31313 2013-12-30 10:39:00 jhjhjhjh syranide: thanks that helps a lot, I guess I'll have to experiment with both methods and see which one sticks. with HierarchicalManager I won't really need to do much preprocessing except HTML->JSX and wrapping each block in a "BlockComponent" 31314 2013-12-30 10:39:40 syranide jhjhjhjh: np, yep do that, feel free to come back here when/if you get stuck 31315 2013-12-30 10:40:21 syranide also, it's worth noting that both the mixin AND the component can implement componentDidMount and most other functions, just not render 31316 2013-12-30 10:41:37 jhjhjhjh ah okay, good to know, so it's everything but render 31317 2013-12-30 10:41:44 syranide yeah, basically 31318 2013-12-30 10:42:20 syranide shouldComponentRender is an exception too 31319 2013-12-30 10:42:38 jhjhjhjh oh another question, what's the best way to create a component that will dynamically "repeat" everything it contains? 31320 2013-12-30 10:43:06 syranide jhjhjhjh: repeat as in render multiple times (at once)? 31321 2013-12-30 10:43:11 jhjhjhjh yes 31322 2013-12-30 10:43:25 syranide just insert this.props.children multiple times 31323 2013-12-30 10:44:35 jhjhjhjh will there be a problem if each repetition has to have its own data? 31324 2013-12-30 10:44:42 jhjhjhjh meaning its own properties or state? 31325 2013-12-30 10:44:47 syranide jhjhjhjh: nope 31326 2013-12-30 10:44:53 syranide that's the beauty of React 31327 2013-12-30 10:45:19 jhjhjhjh ah great, thanks much 31328 2013-12-30 10:45:25 syranide the only thing to keep in mind is that to avoid expensive (and possibly unwanted behavior) you'll want to set "key=" on each of them 31329 2013-12-30 10:45:49 syranide and would be any (at least locally) persistent ID for the "item" 31330 2013-12-30 10:46:45 syranide if you render "1 2 3" and next time render "1 3", React will see that "2 != 3" and thus unmount 3 as well, and then mount 3 again (key solves this) 31331 2013-12-30 10:47:37 syranide (1 2 3 as in say "Person Component for Person #1") 31332 2013-12-30 10:49:54 jhjhjhjh okay i see, so i would set a "key" on the wrapping element that i repeat? 31333 2013-12-30 10:50:02 syranide jhjhjhjh: yep 31334 2013-12-30 10:50:31 syranide jhjhjhjh: it's useful to do this *any* time you have an id for the component you render 31335 2013-12-30 10:50:45 syranide (or children rather) 31336 2013-12-30 10:50:46 jhjhjhjh ah that's cool, and it would still work even if the repeated element has repeated elements itself 31337 2013-12-30 10:51:02 syranide jhjhjhjh: yep! key only has to be unique among it's siblings 31338 2013-12-30 10:51:07 syranide *its 31339 2013-12-30 10:51:43 jhjhjhjh ah that's great, so i could even reorder the elements or whatnot, as long as i keep a key attached 31340 2013-12-30 10:51:50 syranide jhjhjhjh: correct! 31341 2013-12-30 10:52:48 jhjhjhjh syranide: very nice, thanks a bundle. guess i'll get to hacking now 31342 2013-12-30 10:54:08 syranide jhjhjhjh: np, just a heads up too, if you start doing large nested structures, you will want to implement shouldComponentUpdate later (remember, React virtually rerenders the entire DOM on every change), by applying simple checks inside shouldComponentUpdate you can make it *significantly* faster 31343 2013-12-30 10:54:44 syranide you don't *have* to keep your datastructures immutable, but if you do, shouldComponentUpdate because super cheap and super easy 31344 2013-12-30 10:54:57 syranide s/because/becomes 31345 2013-12-30 10:55:07 syranide but that's for later :) 31346 2013-12-30 10:56:22 jhjhjhjh ah okay, that sounds like fun. i could play with that and forceupdate if i need to optimize 31347 2013-12-30 22:17:40 vjeux welcome back ircloggr-react 31348 2013-12-30 22:19:50 vjeux syranide: ok, so pete landed a transferPropsTo with a whitelist of properties. 31349 2013-12-30 22:20:05 vjeux we'll probably want another version with a blacklist 31350 2013-12-30 22:21:27 n8dawg dnolan: Hi I noticed in some of your Om examples you used the #js syntax 31351 2013-12-30 22:21:48 n8dawg what is that? 31352 2013-12-30 22:22:06 dnolen n8dawg: just short hand for JS objects & arrays 31353 2013-12-30 22:23:33 n8dawg dnolan: so (dom/button #js {:onClick (fn [e] (om/transact! data :count dec))} "-") means 31354 2013-12-30 22:24:17 n8dawg dnolan: the {:onClick ...} is a javascript object not a Clojure map 31355 2013-12-30 22:24:28 syranide vjeux: he did? 31356 2013-12-30 22:24:33 syranide vjeux: he said he didn't 31357 2013-12-30 22:25:02 syranide vjeux: also, there's no need blacklist, you can just supply null to the properties object instead 31358 2013-12-30 22:25:06 syranide *nulls 31359 2013-12-30 22:25:08 vjeux syranide: cloneWithProps has landed which seems to augment the object with a whitelist 31360 2013-12-30 22:25:18 syranide vjeux: really? 31361 2013-12-30 22:25:21 vjeux oh no, it's not a whitelist, it's a key:value so you also have to provide the values 31362 2013-12-30 22:25:53 syranide vjeux: landed on github? 31363 2013-12-30 22:26:00 vjeux syranide: nop 31364 2013-12-30 22:26:14 vjeux zpao is in holidays and he knows how to sync that way :( 31365 2013-12-30 22:26:36 balpert vjeux: I have faith that you can figure it out ;) 31366 2013-12-30 22:26:41 balpert there's an internal wiki page about it 31367 2013-12-30 22:26:49 vjeux balpert: that part of the wiki is not filled :p 31368 2013-12-30 22:26:53 balpert really? 31369 2013-12-30 22:26:58 balpert so many lies then 31370 2013-12-30 22:27:02 balpert someone said there was a page 31371 2013-12-30 22:27:37 vjeux yeah, there's a page where it says how to sync. 1) github -> fb 2) website 3) fb -> github 31372 2013-12-30 22:27:50 vjeux 1) was already written, I wrote 2) last week, 3) is still a todo :p 31373 2013-12-30 22:28:14 balpert if you search the FB code for CommitSyncScript do you find anything? 31374 2013-12-30 22:28:19 syranide 00:38 <@petehunt> i added a cloneWithProps() function that refactored that code a bit though 31375 2013-12-30 22:28:22 syranide 00:39 < syranide> oh right right! wait for your diff to sync and then I'll look into submitting a PR? 31376 2013-12-30 22:28:25 syranide 00:40 <@petehunt> it will spark a lot of discussion 31377 2013-12-30 22:28:28 syranide 00:40 <@petehunt> probably won't get any activity until fb is back from vacation (jan) 31378 2013-12-30 22:28:31 syranide 00:40 < syranide> yeah that's no problem with me if it's ok with you 31379 2013-12-30 22:28:33 syranide 00:40 <@petehunt> fine by me 31380 2013-12-30 22:28:37 syranide and then he proceeded to give an example of what he had in mind 31381 2013-12-30 22:28:38 syranide vjeux: 31382 2013-12-30 22:28:55 vjeux syranide: talk with pete when he comes back, that'll be easier :p 31383 2013-12-30 22:28:59 syranide vjeux: ^^ 31384 2013-12-30 22:29:10 chenglou http://facebook.github.io/react/tips/children-props-type.html 31385 2013-12-30 22:29:21 chenglou check the comment, Im still a bit worried about this 31386 2013-12-30 22:30:08 vjeux chenglou: we need to expose the flattenChildren function 31387 2013-12-30 22:30:14 syranide chenglou: yeah, I would agree, it's not like there aren't already thousands of objects flying around 31388 2013-12-30 22:30:18 chenglou is saving the one array allocation once every few times really that meaningful? 31389 2013-12-30 22:31:35 vjeux chenglou: you also can have an array of arrays arbitrarily nested 31390 2013-12-30 22:31:47 syranide vjeux: yeah, but that only adds to his argument? 31391 2013-12-30 22:31:58 vjeux flattening at every step of the way is very expensive 31392 2013-12-30 22:32:19 chenglou yeah but what would you be doing by getting the array? 31393 2013-12-30 22:32:20 dnolen n8dawg: that is correct 31394 2013-12-30 22:32:42 vjeux the problem is that this.props.children is not a function 31395 2013-12-30 22:32:44 chenglou seems dangerous lol. I see an argument for getting just children length to... dunno, use it somewhere 31396 2013-12-30 22:32:48 vjeux so we cannot flatten on request 31397 2013-12-30 22:32:52 syranide vjeux: ah right, I see what you mean now 31398 2013-12-30 22:33:31 syranide vjeux: the idea is basically, if the "value" is inserted into an array already 31399 2013-12-30 22:33:34 syranide for instance 31400 2013-12-30 22:33:52 syranide basically, there are a bunch of situations in which this becomes "natural" and "better" 31401 2013-12-30 22:34:07 vjeux there are two use cases: 1) pass the children untouch down. we shouldn't be flattening 31402 2013-12-30 22:34:26 vjeux 2) you want to modify the children, then being able to get a flattened version of the children 31403 2013-12-30 22:35:15 chenglou vjeux: why would you be modifying the children though 31404 2013-12-30 22:35:47 vjeux by modify i mean read from them (in any way) 31405 2013-12-30 22:36:32 vjeux flattening children all the time is very expensive (basically every time anything is being rendered) 31406 2013-12-30 22:36:52 vjeux the current api is really not ideal and could be improved :) 31407 2013-12-30 22:38:14 vjeux right now you get the fast unprocessed version until someone comes up with a better api 31408 2013-12-30 22:39:09 chenglou vjeux: I see a point in reading the length of the first level of children (just read length), but I dont see why you'd get the total number of children (which really should be an implementation detail of the first level children themselves?) 31409 2013-12-30 22:40:03 vjeux
    {this.props.something.map( ... )} 31410 2013-12-30 22:40:16 vjeux => [Object, [ ... ], Object] 31411 2013-12-30 22:40:59 vjeux this is a very common pattern and you really want react to return the flattened version 31412 2013-12-30 22:41:03 vjeux [Object, ..., Object] 31413 2013-12-30 22:41:20 chenglou why flattened (I just pass {this.props.children} for these kind of wrappers) 31414 2013-12-30 22:42:12 vjeux it's a very misleading API to have something that's only working some time because of an implementation detail 31415 2013-12-30 22:43:00 vjeux right now we only provide the raw (fast) values 31416 2013-12-30 22:43:11 chenglou are you talking about accessing `length` or flattening 31417 2013-12-30 22:43:12 vjeux but we should provide a way to get the right value somhow 31418 2013-12-30 22:46:08 vjeux chenglou: accessing length of an unflattened object is meaningless 31419 2013-12-30 22:47:41 collypops vjeux, I just looked through your IE8 compatibility stuff, and I'm trying to rack my brain to figure out why you include betweeen the doctype and opening html tag. I'm sure I read about it somewhere, but can't remember where. 31420 2013-12-30 22:48:06 vjeux collypops: look at the pull request, there's a link that explains why 31421 2013-12-30 22:48:12 collypops I think it was something to do with some browsers downloading resources, even if they're not needed 31422 2013-12-30 22:48:36 collypops I'll have a look, thanks 31423 2013-12-30 22:49:05 vjeux http://www.phpied.com/conditional-comments-block-downloads/ 31424 2013-12-30 22:49:06 collypops ah ha! thanks for that http://www.phpied.com/conditional-comments-block-downloads/ 31425 2013-12-30 22:49:37 chenglou vjeux: yeah usually! But in these cases of component building it seems to me that only wanting to know the number of direct children is useful (I don't remember the use case but I definitely did this more than once). How the children lay out their hierarchy shouldn't really be that parent's concern 31426 2013-12-30 22:49:56 chenglou maybe I should open up an issue so that the convo doesn't get lost in irc 31427 2013-12-30 22:50:09 vjeux chenglou: yeah, open up an issue for children 31428 2013-12-30 22:50:18 vjeux it really needs to be improved 31429 2013-12-30 22:53:11 chenglou vjeux: will do, let me just submit another PR first 31430 2013-12-30 22:53:13 chenglou waaaah wait! 31431 2013-12-30 22:53:14 chenglou lol 31432 2013-12-30 22:54:30 vjeux chenglou: ? 31433 2013-12-30 22:55:47 balpert I'll have another IE8 fix in a bit for some CSS problems 31434 2013-12-30 22:56:00 vjeux balpert: chenglou: send them in! 31435 2013-12-30 22:59:58 chenglou just did 31436 2013-12-30 23:00:11 chenglou react's github stars increased pretty fast these days 31437 2013-12-30 23:00:27 chenglou thanks to Om I guess 31438 2013-12-30 23:05:18 vjeux chenglou: yeah om was a big boost 31439 2013-12-30 23:05:40 vjeux got another 100 from the diff algorithm yesterday on HN 31440 2013-12-30 23:06:08 chenglou yeah saw! thanks for that 31441 2013-12-30 23:07:09 chenglou my evil guilty pleasure is to see angular and ember proponents getting hurt and come on these posts to defend their framework, lol 31442 2013-12-30 23:07:15 chenglou ^ unhealthy 31443 2013-12-30 23:07:37 tboyt as an ember proponent, i'd defend it by saying "ember solves an entirely different problem" ;) 31444 2013-12-30 23:08:54 vjeux chenglou: i'm actually glad that it generates healthy discussions :) 31445 2013-12-30 23:09:02 chenglou tboyt: lmao sorry, not trying to dismiss all other frameworks 31446 2013-12-30 23:09:22 vjeux ember under the hood implements a lot of things that react is doing 31447 2013-12-30 23:36:21 jasonvanzyl is there a grammar for jsx? 31448 2013-12-30 23:36:49 jasonvanzyl just wondering about the feasibility of taking a javascript parser in an IDE and making jsx work inside 31449 2013-12-30 23:37:58 vjeux jasonvanzyl: jsx is based on esprima 31450 2013-12-30 23:38:49 vjeux https://github.com/facebook/react/blob/master/vendor/fbtransform/visitors.js 31451 2013-12-30 23:38:57 syranide also, JSX is quite similiar to any other HTML-templating language, so should be easy to reuse if it exists 31452 2013-12-30 23:39:07 jasonvanzyl based on as in you use it and extend it… ah i was trying to find it in the tree 31453 2013-12-30 23:39:41 vjeux jasonvanzyl: yeah, let me see where i can find the grammar 31454 2013-12-30 23:42:25 vjeux https://github.com/facebook/esprima/tree/fb-harmony 31455 2013-12-30 23:42:49 vjeux https://github.com/facebook/esprima/blob/fb-harmony/esprima.js#L99-L100 31456 2013-12-30 23:45:07 vjeux jasonvanzyl: what ide are you trying to integrate into? 31457 2013-12-30 23:45:34 vjeux jsx is using the same grammar as e4x btw 31458 2013-12-30 23:54:22 vjeux https://github.com/facebook/esprima/commit/cdb9e5d52ba5a3b1c2ab30244ad7e59e8796296d 31459 2013-12-30 23:54:25 vjeux this is the original diff 31460 2013-12-30 23:54:26 vjeux pretty small 31461 2013-12-31 00:00:38 jasonvanzyl cool, thanks 31462 2013-12-31 00:11:53 also is it wrong to return the same component instance from subsequent calls to render() 31463 2013-12-31 00:13:17 vjeux also: you mean storing
    in a variable and returning it multiple times to render? 31464 2013-12-31 00:13:48 also well, a component more complicated than div, but yeah. 31465 2013-12-31 00:13:55 also i'm keeping a list of instances in state 31466 2013-12-31 00:14:19 also and this causes the "Can only mount an unmounted component." invariant exception 31467 2013-12-31 00:14:25 vjeux also: yeah, you shouldn't do that 31468 2013-12-31 00:15:14 also so, if i have a dom node like canvas that i need to preserve, what's the right way to do that? 31469 2013-12-31 00:15:19 vjeux calling
    is really lightweight. it basically just does {component: 'div'} 31470 2013-12-31 00:16:42 vjeux make a wrapper 31471 2013-12-31 00:16:58 also ok, that makes sense 31472 2013-12-31 00:17:08 vjeux in componentDidMount you do this.getDOMNode().appendChild(this.props.domNode) 31473 2013-12-31 00:17:35 also returning the dom node from render isn't enough? 31474 2013-12-31 00:17:46 vjeux you can only return virtual dom nodes from render 31475 2013-12-31 00:18:07 also "When called, it should examine this.props and this.state and return a single child component. This child component can be either a native DOM component (such as
    ) or another composite component that you've defined yourself." 31476 2013-12-31 00:18:09 vjeux also: if you want i wrote a small util for it 31477 2013-12-31 00:18:10 vjeux https://gist.github.com/vjeux/d38f6ec9f6a00be4da5f 31478 2013-12-31 00:18:24 vjeux {yourRealDOMNode} 31479 2013-12-31 00:18:54 also vjeux: the docs say you can return a "native DOM component"...? 31480 2013-12-31 00:19:21 vjeux also: you are right, the docs is misleading. should be phrased "a virtual representation of a native DOM component" 31481 2013-12-31 00:19:37 vjeux let me update it :) 31482 2013-12-31 00:19:52 also thanks! :) 31483 2013-12-31 00:20:25 vjeux btw, is the canvas element created by react? 31484 2013-12-31 00:20:31 vjeux or are you using a 3rd party api to use it 31485 2013-12-31 00:21:24 vjeux if you render a 10 times, it should remain the same canvas dom element 31486 2013-12-31 00:21:40 vjeux you can get the backing dom node using ref 31487 2013-12-31 00:22:01 vjeux render: function() { return ; } 31488 2013-12-31 00:22:23 vjeux componentDidMount: function() { CanvasLibrary.init(this.refs.canvas.getDOMNode()); } 31489 2013-12-31 00:22:52 vjeux componentWillUnmount: function() { CanvasLibrary.free(this.refs.canvas.getDOMNode()); } 31490 2013-12-31 00:23:42 vjeux and you can intercept componentWillReceiveProps, do a diff between the props and use it to send imperative commands to the CanvasLivrary 31491 2013-12-31 00:28:01 also vjeux: ah, thanks, that's much nicer than what i was doing 31492 2013-12-31 00:28:59 vjeux also: what are you trying to do? 31493 2013-12-31 00:31:19 also i'm making a mathematica/ipython style notebook in the browser 31494 2013-12-31 00:32:26 vjeux oh sweet 31495 2013-12-31 00:32:31 also so the component are create by the user writing javascript directly to create a canvas component or an svg component 31496 2013-12-31 00:34:10 vjeux also: if you are outputting svg, react supports it natively 31497 2013-12-31 00:35:53 syranide vjeux: CommonJS, where a shareable component run into that, only through node? (just checking if you know, because I literally don't :)) 31498 2013-12-31 00:36:05 syranide ... node/browserify/etc/etc 31499 2013-12-31 00:36:33 vjeux syranide: i don't understand the question 31500 2013-12-31 00:36:44 vjeux also: https://github.com/facebook/react/pull/753/files would it make things clearer? 31501 2013-12-31 00:37:17 syranide vjeux: I'm trying to figure out how I can best package my ReactSWF component and keep the API intact 31502 2013-12-31 00:37:33 also vjeux: that's much clearer 31503 2013-12-31 00:37:37 vjeux also: cool thanks 31504 2013-12-31 00:37:44 vjeux sorry for the confusion 31505 2013-12-31 00:37:46 syranide if it's only AMD "in the browser" and CommonJS for offline-bundles then that makes things a lot better 31506 2013-12-31 00:39:14 vjeux syranide: i don't know :( 31507 2013-12-31 00:39:25 vjeux this part is so annoying :p 31508 2013-12-31 00:39:27 syranide vjeux: ok! just checking :) 31509 2013-12-31 00:40:09 balpert okay, I'm bored -- someone suggest me a small project 31510 2013-12-31 00:40:18 vjeux balpert: i want threejs integration with react 31511 2013-12-31 00:40:23 syranide balpert: remove textnode spans ^^ 31512 2013-12-31 00:40:31 balpert syranide: I'll wait for my other PR to be merge first 31513 2013-12-31 00:40:37 syranide balpert: ;) 31514 2013-12-31 00:40:44 balpert to be merged 31515 2013-12-31 00:40:53 vjeux balpert: yungsters is on pto but will review them as soon as he is back 31516 2013-12-31 00:41:02 balpert okay cool 31517 2013-12-31 00:43:05 balpert I know nothing about three.js 31518 2013-12-31 00:43:38 balpert it looks pretty declarative already 31519 2013-12-31 00:44:02 vjeux http://threejs.org/examples/webgl_particles_billboards.html 31520 2013-12-31 00:44:59 balpert so pretty. 31521 2013-12-31 00:45:27 vjeux would be so nice to be able to have jsx and be able to do render: function() { return {all balls}...; } 31522 2013-12-31 00:46:12 vjeux the code is pretty much structured like react already 31523 2013-12-31 00:46:20 vjeux so shouldn't be ultra hard to make a backend 31524 2013-12-31 00:48:04 vjeux also: and it's live :) http://facebook.github.io/react/docs/component-specs.html#render 31525 2013-12-31 00:48:40 balpert vjeux: you didn't answer my question here ;) https://groups.google.com/d/msg/reactjs/NHy6UNqm-zU/i6Xr0-jP7nIJ 31526 2013-12-31 00:49:08 vjeux balpert: thinking about using it for a blog 31527 2013-12-31 00:49:34 vjeux html is way too verbose to use to write a blog entry 31528 2013-12-31 00:49:46 vjeux but i also want to be able to easily inline js components 31529 2013-12-31 00:50:11 balpert gotcha 31530 2013-12-31 00:50:16 also vjeux: that was quick :) 31531 2013-12-31 00:50:20 balpert this https://github.com/Khan/perseus/blob/master/src/renderer.jsx#L141-L233 is basically what you want with a slightly different API 31532 2013-12-31 00:50:24 syranide vjeux: couldn't that be solved by just applying as a post-process in componentDidMount? 31533 2013-12-31 00:50:32 syranide *applying markdown 31534 2013-12-31 00:50:43 syranide or wait no :P 31535 2013-12-31 00:51:26 vjeux balpert: yes basically :) 31536 2013-12-31 00:51:55 balpert for JSX in coffeescript I wonder if it makes sense to base it off of haml 31537 2013-12-31 00:52:23 balpert instead of HTML/XML syntax 31538 2013-12-31 00:53:08 vjeux balpert: interesting 31539 2013-12-31 00:53:36 tboyt vjeux, balpert: for coffeescript i'd just use the backtick passthrough 31540 2013-12-31 00:53:52 vjeux tboyt: the problem with backtick is that what's inside jsx is js 31541 2013-12-31 00:54:00 balpert tboyt: only annoying thing about that is that you can't embed coffeescript in attribute values, etc 31542 2013-12-31 00:54:03 balpert also the backticks are annoying 31543 2013-12-31 00:54:04 vjeux you want to be able to use coffeescript within it too 31544 2013-12-31 00:54:08 balpert so make that two annoying things 31545 2013-12-31 00:54:36 vjeux padolsey: yeah, thanks for the blog post :) http://james.padolsey.com/javascript/what-is-react/ 31546 2013-12-31 00:55:28 tboyt vjeux: that's fair i suppose, just seems like more trouble than it's worth 31547 2013-12-31 00:56:44 raffe I'm creating a reusable component: MyReusable. For one use of MyReusable I want to have a few select boxes that controls some query parameters that are responsible for the data that MyReusable renders. What's the ReactJS way of achieving this? 31548 2013-12-31 00:56:50 also are there any more details about the "stateful children" described here: http://facebook.github.io/react/docs/multiple-components.html#stateful-children? 31549 2013-12-31 00:57:44 syranide balpert: btw, if you're looking for a small project, being able to "capture events" may be interesting? for custom dropdowns and things like that 31550 2013-12-31 00:57:53 balpert syranide: hmm? 31551 2013-12-31 00:58:14 syranide balpert: basically, that you can say, "no matter what, give me all events" 31552 2013-12-31 00:58:24 also vjeux: this was my other reason for keeping component instances in state, so that the child components state was preserved. 31553 2013-12-31 00:58:27 balpert syranide: like onClickCapture={...}? 31554 2013-12-31 00:58:37 syranide balpert: hmm, that works? :O 31555 2013-12-31 00:58:40 balpert syranide: :) 31556 2013-12-31 00:58:51 syranide god damn it, you need to start documenting more stuff ;) 31557 2013-12-31 00:59:04 vjeux raffe: have you looked into the docs for forms? http://facebook.github.io/react/docs/forms.html 31558 2013-12-31 00:59:36 vjeux raffe: it should explain how to control your select boxes 31559 2013-12-31 00:59:49 raffe vjeux: yeah, I was just unclear how the select boxes of one component would control the other component 31560 2013-12-31 01:00:11 balpert syranide: I have never used capturing events in my life 31561 2013-12-31 01:00:32 syranide balpert: btw, capturing events, can you prevent others from getting the regular event with preventDefault? 31562 2013-12-31 01:00:43 balpert non-React people you mean? 31563 2013-12-31 01:00:53 vjeux raffe: find a common parent of the checkbox and the other component. make it hold the information of which checkbox is checked and pass this info to both the checkboxes and the other component 31564 2013-12-31 01:01:00 syranide balpert: say if I click outside, can I prevent it from getting the event? 31565 2013-12-31 01:01:09 syranide outside of the active component 31566 2013-12-31 01:01:18 balpert syranide: oh, not currently 31567 2013-12-31 01:01:25 balpert that's what layers are for 31568 2013-12-31 01:01:25 raffe pass it in as a property? 31569 2013-12-31 01:01:29 syranide balpert: yep 31570 2013-12-31 01:01:40 syranide balpert: except you haven't released that yet right? :P 31571 2013-12-31 01:01:54 balpert syranide: _they_ haven't released it 31572 2013-12-31 01:01:56 balpert don't blame me! :) 31573 2013-12-31 01:01:59 vjeux also: if the reconciliation process manages to find that your previous node is the same as the new one, the state will be preserved 31574 2013-12-31 01:02:00 vjeux http://facebook.github.io/react/docs/reconciliation.html#keys 31575 2013-12-31 01:02:07 syranide balpert: pff ;) 31576 2013-12-31 01:02:13 vjeux if your canvas is in a list, you can add a key to it 31577 2013-12-31 01:02:42 vjeux raffe: this doc should be useful http://facebook.github.io/react/tips/communicate-between-components.html 31578 2013-12-31 01:03:56 raffe i think i have enough to go on now. thanks 31579 2013-12-31 01:04:24 also vjeux: so if i have a custom component class, i need to return a new instance of the class with the same key as an existing instance, and the new instance will be discarded? 31580 2013-12-31 01:06:18 vjeux also: in React there are 3 representations of a node. 1) the result of . 2) a mounted version of YourComponent. 3) the real DOM of YourComponent 31581 2013-12-31 01:06:43 also i'm not using JSX, just the API 31582 2013-12-31 01:06:53 vjeux 1) and 2) are unfortunately the same object because of historical reasons 31583 2013-12-31 01:07:40 vjeux when you return something in render(), what you return doesn't have state 31584 2013-12-31 01:07:57 balpert also: but 1 and 2 may diverge in the future -- see https://github.com/facebook/react/issues/614 31585 2013-12-31 01:08:18 vjeux it is going through reconciliation and looks if it corresponds to a mounted version of a node, which contains state 31586 2013-12-31 01:08:50 vjeux if it finds one, then it updates that mounted version (it may have different props) 31587 2013-12-31 01:08:59 vjeux otherwise it creates a new one 31588 2013-12-31 01:09:20 vjeux so as long as you always return the same component at the same position in your render function 31589 2013-12-31 01:09:31 vjeux it will maintain its state over time 31590 2013-12-31 01:09:56 also "the same component" meaning a component which is equal, not actually the *same* component? 31591 2013-12-31 01:10:22 vjeux every time render is called, you return a *new* representation of what you want the virtual DOM to look like 31592 2013-12-31 01:10:49 also hmm 31593 2013-12-31 01:10:50 vjeux and the virtual DOM is updated to match your changes 31594 2013-12-31 01:10:56 vjeux ok, i'm confusing you :( 31595 2013-12-31 01:11:10 vjeux render: function() { return ; } 31596 2013-12-31 01:11:38 vjeux every time render is being called, you create a fresh instance of MyComponent (1) 31597 2013-12-31 01:12:00 also or, in my case, function() { return MyComponent() } 31598 2013-12-31 01:12:04 vjeux yeah, same thing 31599 2013-12-31 01:12:25 vjeux the first time, react doesn't have anything, so it's going to mount a version of MyComponent 31600 2013-12-31 01:12:27 also and the object returned by MyComponent() has a setState method, which is why i was confused, i thinkg 31601 2013-12-31 01:12:40 vjeux which has state 31602 2013-12-31 01:13:35 vjeux the second time render() is being called, react is going to match [MyComponent] with [MyComponent]. React is going to assume that it's the same MyComponent and will update the mounted node with what MyComponent now looks like 31603 2013-12-31 01:13:50 vjeux so it'll keep the same state 31604 2013-12-31 01:15:06 vjeux what's really confusing is that the return value of MyComponent() is both the description in render() and the mounted version that react uses 31605 2013-12-31 01:15:13 also yeah 31606 2013-12-31 01:15:27 also ok, i've got to run 31607 2013-12-31 01:15:36 also that was really helpful vjeux, thanks! 31608 2013-12-31 01:15:37 vjeux also: ok :) 31609 2013-12-31 01:17:36 noah__ I have a similar question: Is is safe to wrap a component's constructor (assuming I still return an actual component). 31610 2013-12-31 01:17:59 vjeux noah__: do you have an example of what you are trying to do? 31611 2013-12-31 01:18:07 vjeux i don't understand exactly what you are trying to do 31612 2013-12-31 01:18:27 noah__ e.g., function ComponentWrapper(props, children) { return RealComponent(props, children); } ... 31613 2013-12-31 01:18:47 vjeux noah__: yeah totally fine 31614 2013-12-31 01:18:56 noah__ cool. Thanks! 31615 2013-12-31 01:19:41 vjeux noah__: react dom elements are just functions, feel free to go nuts :) 31616 2013-12-31 01:19:58 noah__ That's so great 31617 2013-12-31 01:22:31 balpert syranide: your whitespace PR fixes nbsp 31618 2013-12-31 01:22:55 syranide balpert: huh? I'm pretty sure I tested it without my patch and it worked 31619 2013-12-31 01:23:01 syranide and I didn't do anything to fix it? 31620 2013-12-31 01:23:01 balpert doesn't work for me on master 31621 2013-12-31 01:23:06 syranide hu... 31622 2013-12-31 01:23:08 syranide one sec 31623 2013-12-31 01:23:10 balpert echo '/** @jsx React.DOM */
     
    ;' | bin/jsx 31624 2013-12-31 01:24:11 syranide balpert: oh, wait I think there was two bugs actually 31625 2013-12-31 01:24:22 syranide because if you put anything around it it works 31626 2013-12-31 01:24:55 balpert ah, right you are 31627 2013-12-31 01:25:11 syranide balpert: so you're right :) 31628 2013-12-31 01:25:21 syranide I assumed it was the old where it didn't work at all 31629 2013-12-31 01:26:18 syranide but I'm starting to feel like JSX is the bastard child of React, it's nice, but it's not getting much love ^^ 31630 2013-12-31 01:26:44 vjeux syranide: are there a lot outstanding issues on jsx? 31631 2013-12-31 01:26:45 syranide so if you do use JSX, you end up having to revert to JS every now and then 31632 2013-12-31 01:27:02 syranide vjeux: not so much issues, but it lacks what the plain JS has to offer 31633 2013-12-31 01:27:07 vjeux syranide: this is by design 31634 2013-12-31 01:27:35 syranide vjeux: I mean is not possible, it's in JS 31635 2013-12-31 01:27:36 vjeux syranide: it's just a small syntactic sugar for the 90% use cases. but when you need to do something more complicated you should use js 31636 2013-12-31 01:28:16 syranide vjeux: yeah, but personally, they're just so alike, so I don't see why you would want to use JSX other than for familiarity 31637 2013-12-31 01:28:40 vjeux syranide: xml looks a lot better to express ui to me 31638 2013-12-31 01:29:13 syranide } }; 53499 2014-02-11 18:49:54 balpert rcs: I guess that's true 53500 2014-02-11 18:50:03 GreenJello but that causes a ton of different problems 53501 2014-02-11 18:50:41 balpert at any rate, we wouldn't call it render 53502 2014-02-11 18:50:48 balpert but you can achieve the same thing with a Deletable component 53503 2014-02-11 18:51:15 balpert var Deletable = React.createClass({render: function() { return
    {this.props.children}
    ; }}); 53504 2014-02-11 18:51:22 andreypopp balpert: it even doesn't have to be a component, just a function 53505 2014-02-11 18:51:30 GreenJello yeah, I agree; it'd be more confusing than it's worth 53506 2014-02-11 18:51:30 balpert andreypopp: of course, that too 53507 2014-02-11 18:51:55 balpert andreypopp: components are pretty cheap though and let you use lifecycle methods, etc 53508 2014-02-11 18:52:29 rcs When I was first looking at react, and came across mixins, I assumed render would have an extension hook like that. 53509 2014-02-11 18:53:14 rcs When IIUC, the react way is to wrap things up as a child component, and handle whatever you need there, since there doesn't need to be 1-1 translation to DOM 53510 2014-02-11 18:53:29 balpert yungsters: how do you feel about https://github.com/facebook/react/pull/1046? 53511 2014-02-11 20:02:04 myndzi how would i go about creating a single model that can be rendered different ways in react? 53512 2014-02-11 20:02:12 myndzi for example, the same data with an 'edit' mode and a 'preview' mode 53513 2014-02-11 20:04:09 myndzi balpert: still around? (god it feels weirde doing this, but the topic told me to!) 53514 2014-02-11 20:08:28 myndzi also just to get it in the buffer, what's the best way to 'roll up' the state data from nested objects? 53515 2014-02-11 20:08:39 myndzi if i wanted json representing the entire structure, for example 53516 2014-02-11 20:09:33 myndzi adding a method like toJSON would be fine and i could call it on all children, but i'm not sure how or if i'm supposed to be accessing children directly from a parent 53517 2014-02-11 20:16:52 GreenJello myndzi: you can do
    {this.mode === "edit" ? this.renderEdit() : this.renderPreview()}
    53518 2014-02-11 20:17:10 myndzi ah, right. that's good enough :) 53519 2014-02-11 20:19:06 GreenJello myndzi: and for the other question, I like cortex: https://github.com/mquan/cortex/ 53520 2014-02-11 20:21:15 myndzi ACTION bookmarks 53521 2014-02-11 20:26:30 GreenJello myndzi: btw, you can ping me any time; I don't know as much as ba1pert, but I'll try 53522 2014-02-11 20:27:51 myndzi no worries, thanks! 53523 2014-02-11 20:28:01 myndzi i just read the topic and he was the most recent to talk ;) 53524 2014-02-11 20:28:18 myndzi ACTION goes to rewrite his shiz 53525 2014-02-11 20:28:31 myndzi this is bad, it's been a while and i'm half lost again :P 53526 2014-02-11 20:38:06 myndzi okay, so if i have a section that contains buttons to move it up or down in a parent list 53527 2014-02-11 20:38:25 myndzi i'm thinking i should assign something like 53528 2014-02-11 20:38:39 myndzi err wait. its parent when referencing it can supply onClick, right? 53529 2014-02-11 20:38:48 GreenJello yeah 53530 2014-02-11 20:38:59 myndzi but it has multiple html elements 53531 2014-02-11 20:39:08 myndzi what i was thinking is something like this 53532 2014-02-11 20:39:25 myndzi Up 53533 2014-02-11 20:39:31 myndzi Down 53534 2014-02-11 20:39:51 myndzi and the parent would do something like
    53535 2014-02-11 20:39:55 myndzi is that how i should be doing this? 53536 2014-02-11 20:40:44 GreenJello yeah 53537 2014-02-11 20:40:53 myndzi i feel like i just leveled up 53538 2014-02-11 20:40:57 myndzi i didn't get that when i wrote this stuff last 53539 2014-02-11 20:40:57 myndzi haha 53540 2014-02-11 20:41:16 myndzi now a trickier one! 53541 2014-02-11 20:41:32 myndzi can i, say, have a parent specify to a child what its grandchild should be? 53542 2014-02-11 20:41:55 GreenJello can you give an example? 53543 2014-02-11 20:42:00 myndzi
    (i know that looks wrong) 53544 2014-02-11 20:42:08 waqas Sure, do that 53545 2014-02-11 20:42:24 myndzi now if i want the child to give a property to the grandchild? haha 53546 2014-02-11 20:42:28 waqas }/> might work as-is 53547 2014-02-11 20:42:32 GreenJello myndzi:
    53548 2014-02-11 20:42:38 waqas You can also do that 53549 2014-02-11 20:42:39 myndzi derp, of course. 53550 2014-02-11 20:42:44 GreenJello myndzi: and in Section, reference this.props.children 53551 2014-02-11 20:42:58 myndzi right, that's what i have 53552 2014-02-11 20:43:08 myndzi i'm trying to get rid of a 'dangerouslySetInnerHtml' :P 53553 2014-02-11 20:43:19 myndzi thinking about it, i don't need anything more than that i think 53554 2014-02-11 20:43:34 myndzi i'm not sure there's any reason to pass any properties on 53555 2014-02-11 20:43:38 myndzi the grandparent can take care of that too 53556 2014-02-11 20:44:13 myndzi oh wait, now i remember 53557 2014-02-11 20:44:16 myndzi it's the edit-or-preview state 53558 2014-02-11 20:44:23 myndzi i could do 53559 2014-02-11 20:44:38 myndzi this.children[0].setState() ? 53560 2014-02-11 20:45:02 myndzi meh that's not right 53561 2014-02-11 20:45:03 GreenJello myndzi: not sure if that'd work, but I'd avoid it 53562 2014-02-11 20:45:07 myndzi this is really a property of the top container 53563 2014-02-11 20:45:14 myndzi but i need to pass it to everything underneath 53564 2014-02-11 20:45:30 myndzi i'd prefer not to have to set a prop in every tag 53565 2014-02-11 20:46:07 GreenJello it's a bit of extra typing, but the flexibility is worth it 53566 2014-02-11 20:46:56 myndzi mk, then i can stop looking through the docs haha 53567 2014-02-11 20:47:29 balpert myndzi: you should treat state as private; don't set other components' state 53568 2014-02-11 20:47:41 myndzi i realized i misspoke (state vs props) 53569 2014-02-11 20:47:58 myndzi man, this is a bit troublesome 53570 2014-02-11 20:48:05 myndzi let me back up to the broader problem and see what you guys think 53571 2014-02-11 20:48:28 myndzi i have a page that lets you build a form out of components 53572 2014-02-11 20:48:38 myndzi there's a list of "kinds" of things on the left and a list of created things on the right 53573 2014-02-11 20:48:40 GreenJello myndzi: if you do need to set a property that's a few levels up, cortex comes in handy (you only have to pass something down, not carry it back up) 53574 2014-02-11 20:48:53 myndzi i want them to come from the same data model so i can port data between them and the server 53575 2014-02-11 20:49:13 myndzi so what i thought is, create one object and render it two ways depending on how it's being used 53576 2014-02-11 20:49:23 myndzi but there are a number of dissimilarities too 53577 2014-02-11 20:49:33 myndzi for example, the list of things on the left contains one and only one of everything, always in the 'edit' mode 53578 2014-02-11 20:49:44 myndzi and the list of things on the right contains zero or more of anything, always in the 'view' mode 53579 2014-02-11 20:50:11 myndzi however they both share similar code as far as formatting the contents goes 53580 2014-02-11 20:50:23 myndzi that is, some have just a textarea / paragraph tag, or some may have a list or table 53581 2014-02-11 20:51:01 GreenJello myndzi: you might want to make a textarea/paragraph component 53582 2014-02-11 20:51:16 myndzi if i do one object and render two ways, i wind up with a number of methods that don't make any sense, and if i make separate objects for each (edit vs preview) then i'm not sure how to pass the data between the two portably, plus i'm repeating code 53583 2014-02-11 20:51:29 myndzi GreenJello: that's what i was starting to do just now (textarea = edit, paragraph = preview) 53584 2014-02-11 20:51:49 GreenJello 53585 2014-02-11 20:51:51 myndzi i'd like to be able to create a component with a string of json and get json back out 53586 2014-02-11 20:52:22 GreenJello myndzi: in that case I strongly encourage cortex :-) 53587 2014-02-11 20:52:50 myndzi so i can implement say, 'save' by calling .toJSON on the top level item, or 'duplicate' by creating the 'edit mode' stack from pre-established json 53588 2014-02-11 20:53:01 myndzi mk, i'll dig into it :) 53589 2014-02-11 20:53:32 GreenJello myndzi: I think I showed you the app I'm working on http://react-edit.ijk.io/#/sqLaM 53590 2014-02-11 20:54:00 GreenJello that just uses cortex (no backbone/ect) and the entire application can be constructed/serialized with JSON 53591 2014-02-11 20:54:10 myndzi nice! 53592 2014-02-11 20:54:18 myndzi that is indeed very similar to what i'm talking about 53593 2014-02-11 20:54:56 myndzi downside: learn yet another new thing 53594 2014-02-11 20:54:58 myndzi :P 53595 2014-02-11 20:55:30 balpert myndzi: in general you'll find it easiest to always have your data at the top level 53596 2014-02-11 20:55:31 GreenJello though, the API takes a little bit to get used to (it's really simple, but really different) 53597 2014-02-11 20:55:51 waqas GreenJello: Is that XYZ from my test? :) 53598 2014-02-11 20:55:52 balpert that is, bubble the data up when you change it, not when you need it later 53599 2014-02-11 20:56:04 GreenJello waqas: yep :-) 53600 2014-02-11 20:56:09 myndzi what's the point of breaking things up if all the goods are at the top? 53601 2014-02-11 20:56:18 yungsters balpert: looks good to me 53602 2014-02-11 20:56:24 balpert yungsters: thank you 53603 2014-02-11 20:56:26 balpert zpao: ^^ 53604 2014-02-11 20:57:16 GreenJello myndzi: you still have components that take inputs and give outputs; and don't care about what they're inside, or what the things inside them are like 53605 2014-02-11 21:00:32 GreenJello myndzi: just don't pass cortex objects to your reusable components 53606 2014-02-11 21:00:50 GreenJello it's best to keep them pure so they can be used even if you're not using cortex 53607 2014-02-11 21:01:33 myndzi how might i programmatically add a child? 53608 2014-02-11 21:01:52 myndzi can i just push to props.children with a new instance of a thing? 53609 2014-02-11 21:02:12 GreenJello myndzi: no, you should call this.props.addItem() 53610 2014-02-11 21:02:37 GreenJello and pass a function from the parent to handle it 53611 2014-02-11 21:03:04 myndzi lost me, addItem doesn't seem to be in the api docs? 53612 2014-02-11 21:03:14 GreenJello myndzi: it's not, you implement it 53613 2014-02-11 21:03:35 myndzi let me rephrase 53614 2014-02-11 21:03:36 myndzi i can do 53615 2014-02-11 21:03:45 myndzi 53616 2014-02-11 21:03:47 myndzi and i can d o 53617 2014-02-11 21:03:52 myndzi 53618 2014-02-11 21:04:09 myndzi but can i turn the first into the second without re-implementing/wrapping the child rendering functionality? 53619 2014-02-11 21:04:37 myndzi i found myself writing a state with items and an array and calling map and render and thinking wait what 53620 2014-02-11 21:04:51 GreenJello yeah, you want to use map 53621 2014-02-11 21:05:30 GreenJello myndzi: that doesn't mean everything has to be in the render function, though 53622 2014-02-11 21:05:48 myndzi so this.props.children shouldn't be messed with 53623 2014-02-11 21:05:56 GreenJello implement Child as a function that returns a node 53624 2014-02-11 21:06:06 GreenJello myndzi: this.props.children is always an array 53625 2014-02-11 21:06:15 myndzi right. i'm trying to wrap my head around mixing the two 53626 2014-02-11 21:06:28 GreenJello (or maybe it's null sometimes, I'm not positive) 53627 2014-02-11 21:06:42 myndzi being able to, say, specify a list of children on initialization and then modify it at run time 53628 2014-02-11 21:06:55 GreenJello {this.state.items.map(Child)} 53629 2014-02-11 21:07:25 myndzi sure, the question is would i then be like 53630 2014-02-11 21:07:34 myndzi getInitialState: function () { return items: this.props.children } ? 53631 2014-02-11 21:07:43 myndzi err 53632 2014-02-11 21:07:48 myndzi add a couple extra braces etc. to that 53633 2014-02-11 21:08:18 GreenJello myndzi: no, you don't want to set the state to this.props.anything most of the time 53634 2014-02-11 21:08:48 GreenJello just use this.props.children in the render function 53635 2014-02-11 21:08:57 myndzi okay. so then the original question still stands... i have ONE list of things. some of them are specified at instantiation via the JSX syntax, and some may come from user input at runtime, but they're conceptually the same thing 53636 2014-02-11 21:09:21 myndzi if i shouldn't modify this.props.children and i shouldn't merge it into an array i can modify, then what? 53637 2014-02-11 21:09:27 GreenJello you should have your one list of things be all pure data 53638 2014-02-11 21:09:42 GreenJello just plain objects 53639 2014-02-11 21:09:46 myndzi okay, fair point :) 53640 2014-02-11 21:10:16 GreenJello you should generally only use JSX in the render function, or functions used by the render function 53641 2014-02-11 21:10:58 myndzi so var Foo = react.createClass(...); and i can subsequently do Foo(props) ? 53642 2014-02-11 21:11:05 myndzi or new Foo or something like that 53643 2014-02-11 21:11:20 myndzi (i'm extrapolating from your map example) 53644 2014-02-11 21:11:21 GreenJello yeah it's Foo(props, children) 53645 2014-02-11 21:11:28 myndzi yay, ok 53646 2014-02-11 21:11:33 myndzi let's see where that takes me... 53647 2014-02-11 21:14:54 myndzi that gives me a setup syntax something like this 53648 2014-02-11 21:14:54 myndzi http://pastebin.com/qSd9DhrH 53649 2014-02-11 21:14:58 myndzi seem correct? 53650 2014-02-11 21:16:28 GreenJello what does TextSection return? 53651 2014-02-11 21:16:42 myndzi textsection is, say, the class for being a textarea or paragraph 53652 2014-02-11 21:16:51 myndzi AdSection is the wrapper with a header and some ui buttons 53653 2014-02-11 21:17:08 GreenJello AdSection({ type: 'contact', TextSection()), 53654 2014-02-11 21:17:15 GreenJello er.. AdSection({ type: 'contact'}, TextSection()), 53655 2014-02-11 21:17:41 myndzi blah, right, okay. 53656 2014-02-11 21:17:48 GreenJello that's equivilent to 53657 2014-02-11 21:17:50 myndzi i forgot i could do that :) 53658 2014-02-11 21:17:55 myndzi fantastic 53659 2014-02-11 21:18:08 myndzi don't suppose you have a paypal address? :P 53660 2014-02-11 21:18:20 GreenJello myndzi: you can use http://facebook.github.io/react/jsx-compiler.html if you want to play with JSX 53661 2014-02-11 21:18:26 GreenJello I do :-) 53662 2014-02-11 21:18:38 myndzi pm me, i'd like to tip you ;) 53663 2014-02-11 21:18:38 GreenJello it's f.bagnardi@gmail.com 53664 2014-02-11 21:18:41 myndzi or that 53665 2014-02-11 21:21:15 myndzi i suppose that shouldn't be an array, too 53666 2014-02-11 21:21:19 myndzi i got carried away with all the commas :P 53667 2014-02-11 21:21:41 myndzi or maybe it should be.. ? 2nd param or 2nd+ param for children? 53668 2014-02-11 21:24:10 GreenJello you can more parameters for more children 53669 2014-02-11 21:24:18 GreenJello arrays are slightly different 53670 2014-02-11 21:24:49 GreenJello arrays should be used when it's multiple of the same component 53671 2014-02-11 21:27:00 balpert myndzi: you can (and should) pass them as separate arguments 53672 2014-02-11 21:27:35 Schtive Hi quick question. Let's say I have a component (a simple div that looks like a mouse cursor) that becomes visible when I click on a element. If I want to change the position of that element to be over the clicked element, what would be the best way to do this? I am already sending the clicked element inside props. Do I have to use style attributes? like this? 53673 2014-02-11 21:27:43 myndzi which, once again, puts them in props.children huh :P 53674 2014-02-11 21:27:46 myndzi blah. 53675 2014-02-11 21:28:58 GreenJello Schtive: yeah, use style 53676 2014-02-11 21:29:50 GreenJello myndzi: both 53677 2014-02-11 21:31:31 Schtive GreenJello: Allright. it would be cool to be able to do something like: var cursor = ; then access cursor.style directly. 53678 2014-02-11 21:31:51 waqas Schtive: All you want is a custom cursor? Why not use the CSS image cursor feature? 53679 2014-02-11 21:33:10 Schtive Yeah, well I said a cursor. But it's just a draggable element that must appear above the clicked element. 53680 2014-02-11 21:33:26 Schtive All that thing is used to simulate text-selection on mobile 53681 2014-02-11 21:34:11 Schtive So I click on an element, that thing appears. I can drag it over more words to "select" them. 53682 2014-02-11 21:34:36 Schtive I thought it would be easy with React :P 53683 2014-02-11 21:35:00 balpert Schtive: you can pass a style prop 53684 2014-02-11 21:35:19 balpert then on the actual element that Cursor renders, do
    or similar 53685 2014-02-11 21:35:20 balpert to pass it on 53686 2014-02-11 21:36:01 Schtive Yeah I'm trying this. It will do the job I think. Thank you 53687 2014-02-11 21:36:17 GreenJello Schtive: what I'd do: http://bpaste.net/show/QR8rAr1afEeHbXrly1cl/ 53688 2014-02-11 21:37:48 Schtive Oh I havent thought to use React this way. 53689 2014-02-11 21:37:48 GreenJello and then just add a cursor component when you want it to be visible, e.g. {this.state.shouldShowCursor && } 53690 2014-02-11 21:38:18 Schtive Yeah that is a good trick. So far, my cursor component was always there but invisible until something was clicked. 53691 2014-02-11 21:41:26 grandy does anyone know why react-page is no longer maintained? Is there a newer/better approach? 53692 2014-02-11 21:41:46 zpao grandy: because we don't have the time or energy right now to support it 53693 2014-02-11 21:42:49 GreenJello is there anything wrong with it? 53694 2014-02-11 21:42:53 zpao andreypopp has something more maintained, one of his react-something 53695 2014-02-11 21:43:03 grandy zpao: ahh ok cool i'll check that out 53696 2014-02-11 21:43:13 grandy zpao: so you guys are focusing on client side primarily? 53697 2014-02-11 21:43:41 andreypopp zpao: that could be a good package name :) 53698 2014-02-11 21:44:17 andreypopp grandy: https://github.com/andreypopp/react-quickstart 53699 2014-02-11 21:44:34 zpao GreenJello: grandy: we weren't using react-page though it was a great proof of concept. we have a whole other pile infra we use at fb/ig 53700 2014-02-11 21:44:42 zpao andreypopp: i'll let you make it :P 53701 2014-02-11 21:44:53 grandy GreenJello: ahh ok 53702 2014-02-11 21:44:56 grandy andreypopp: thanks! 53703 2014-02-11 21:57:53 myndzi is there a performance difference between changing the results of a render function and calling React.renderComponent again? 53704 2014-02-11 21:58:03 myndzi react seems a bit wishy washy with instances 53705 2014-02-11 21:58:13 myndzi logic tells me i want to avoid making new objects but i'm not sure i need to? 53706 2014-02-11 21:59:57 myndzi apparently i can't use transferPropsTo if i hold the children in a property :( 53707 2014-02-11 22:05:56 syranide zpao: write those blog posts already! I'm itching to start putting it to use :) 53708 2014-02-11 22:06:35 zpao myndzi: make new objects 53709 2014-02-11 22:06:55 zpao but it's hard to tell what you really mean without some code 53710 2014-02-11 22:07:05 myndzi http://jsfiddle.net/B9Xp7/ 53711 2014-02-11 22:07:08 myndzi i'm messing with this fiddle 53712 2014-02-11 22:07:32 zpao syranide: the person writing the flux post was working on facebook.com/lookback which was a pretty crazy thing so he's been short on time 53713 2014-02-11 22:07:44 myndzi i've described what i'm trying to do; i want to try and understand it before trying to squeeze it into yet another library like the one GreenJello suggested 53714 2014-02-11 22:08:14 myndzi if what you say is correct, then it should be okay for me to, instead of trying to render something and change its children on the fly, just to render it with a new list of children yeah? 53715 2014-02-11 22:08:29 syranide zpao: :/ 53716 2014-02-11 22:08:39 myndzi seems counterintuitive from an object-oriented point of view but i realize these aren't your typical OO objects 53717 2014-02-11 22:10:06 zpao myndzi: right, renderComponent over with new children is safe and conceptually in line with React 53718 2014-02-11 22:10:38 zpao now you might want a parent (or App?) level component which determines which can change what it renders 53719 2014-02-11 22:10:46 myndzi i should then be able to use copyPropsTo to propagate things appropriately since the components would be properly 'owned' 53720 2014-02-11 22:11:16 GreenJello myndzi: common OOP is all about mutability, React is about minimal mutability 53721 2014-02-11 22:11:42 myndzi it's taking a bit of wrapping but i'm getting there :P 53722 2014-02-11 22:11:54 myndzi wrapping [my head around] things, that is 53723 2014-02-11 22:12:29 GreenJello myndzi: yeah you could use the copy props function 53724 2014-02-11 22:12:30 myndzi so really, my json data would tell me what type of section i'm creating 53725 2014-02-11 22:12:44 myndzi and in the render function of the parent, i'd be testing that and instantiating the correct one 53726 2014-02-11 22:13:17 myndzi getCorrectSection: function (data) { if (data.type === 'text') { return } } 53727 2014-02-11 22:13:19 myndzi something like that 53728 2014-02-11 22:13:41 myndzi would enable me to build my contents from a json list of objects 53729 2014-02-11 22:13:45 GreenJello zpao: how would you create a modal with React? 53730 2014-02-11 22:13:53 zpao {} 53731 2014-02-11 22:13:54 myndzi i think? 53732 2014-02-11 22:14:05 zpao oh modal, haha 53733 2014-02-11 22:14:22 zpao myndzi: that would work well 53734 2014-02-11 22:14:23 GreenJello zpao: mostly the concept of being usable from anywhere, but it needs to be at the root level of the DOM for CSS reasons 53735 2014-02-11 22:14:37 myndzi okay! time to try this one out then 53736 2014-02-11 22:14:45 chenglou GreenJello: there's a bootstrap modal example 53737 2014-02-11 22:15:03 chenglou in examples/ 53738 2014-02-11 22:16:55 zpao GreenJello: so we have another blog post some time about "layers" but the root idea is that you basically need to create a dom node somewhere at the root and render into that with some reference in your own component. 53739 2014-02-11 22:17:18 zpao i think the bootstrap one is doing $(node).modal() which presumably does something like that 53740 2014-02-11 22:21:35 GreenJello thanks chenglou and zpao 53741 2014-02-11 22:21:59 GreenJello so if the element is uprouted out of the DOM, React's cool with that? 53742 2014-02-11 22:22:37 GreenJello element.parent.removeChild(element); document.body.appendChild(element); would be okay in componentDidMount? 53743 2014-02-11 22:23:13 rcs https://github.com/facebook/react/issues/379 53744 2014-02-11 22:24:23 zpao GreenJello: it's probably mentioned in there, but use carefully. a rerender could get screwed up 53745 2014-02-11 22:26:54 GreenJello was the mentioned blog post or example code ever released? 53746 2014-02-11 22:27:14 zpao hasn't been written yet 53747 2014-02-11 22:28:40 GreenJello hmm... I suppose the component could just pretend it's a root component, and apply itself to an element, and call setProps in its render function 53748 2014-02-11 22:28:55 GreenJello not sure how nice that'd play with react's internals, though 53749 2014-02-11 22:28:58 myndzi blah 53750 2014-02-11 22:28:58 myndzi Uncaught TypeError: Object [object Object] has no method 'copyPropsTo' 53751 2014-02-11 22:29:18 GreenJello that's the main problem with this, is it requires worrying about implementation because there's no documented method for doing this 53752 2014-02-11 22:30:04 GreenJello myndzi: transferPropsTo 53753 2014-02-11 22:30:11 myndzi aw crap 53754 2014-02-11 22:30:11 myndzi haha 53755 2014-02-11 22:30:22 GreenJello myndzi: http://facebook.github.io/react/docs/component-api.html 53756 2014-02-11 22:32:44 myndzi things be rendering :o 53757 2014-02-11 22:33:55 GreenJello :-) 53758 2014-02-11 22:34:57 myndzi http://jsfiddle.net/B9Xp7/2/ 53759 2014-02-11 22:35:07 myndzi i don't like what i had to do with scope there but it fits the bill... more or less 53760 2014-02-11 22:35:22 myndzi is there a better way? 53761 2014-02-11 22:35:35 myndzi (lines 61-71) 53762 2014-02-11 22:36:02 balpert go go go! 53763 2014-02-11 22:36:11 myndzi i suppose there's no help for it since i have no actual instance of anything 53764 2014-02-11 22:36:27 balpert myndzi: that's definitely one way to do it 53765 2014-02-11 22:36:43 myndzi balpert: that's something people say when you did something stupid 53766 2014-02-11 22:36:44 myndzi :P 53767 2014-02-11 22:36:49 balpert nuh uh 53768 2014-02-11 22:37:05 balpert as I understand it, lots of FB stuff works like this 53769 2014-02-11 22:37:12 myndzi o rly 53770 2014-02-11 22:37:21 myndzi guess i can't feel that bad about it then 53771 2014-02-11 22:37:31 myndzi i can make myself an object that has the data and render function 53772 2014-02-11 22:37:33 myndzi or whatever 53773 2014-02-11 22:37:37 myndzi + ajax methods 53774 2014-02-11 22:37:43 myndzi then it doesn't feel as dirty 53775 2014-02-11 22:37:52 myndzi okay, i think this may be my solution :D 53776 2014-02-11 22:38:04 myndzi now rather than do work i think i'm going to go get food 53777 2014-02-11 22:38:05 myndzi then do work 53778 2014-02-11 22:38:06 myndzi :P 53779 2014-02-11 22:38:23 myndzi thank you guys for your reactivity :V 53780 2014-02-11 22:38:29 myndzi and GreenJello, check your mail if you haven't yet 53781 2014-02-11 22:38:42 balpert myndzi: you'll probably want something slightly more general where the top-level component listens to some event on the store 53782 2014-02-11 22:39:02 myndzi oh, that's a good idea 53783 2014-02-11 22:43:21 myndzi oho 53784 2014-02-11 22:43:29 myndzi there's a part of my theme that doesn't see use very often 53785 2014-02-11 22:43:41 myndzi i didn't think there WERE channels without +n :) 53786 2014-02-11 22:44:27 zpao i got annoyed by the join/leave of the bot 53787 2014-02-11 22:44:48 zpao so -n 53788 2014-02-11 22:46:00 GreenJello zpao: I saw an article about it the other day; someone found a way to do only allow the GitHub bots to notify :-) 53789 2014-02-11 22:46:52 zpao probably a hostname i could allow through or something, but i don't know enough about irc to pull it off on my own. if you find the article though, let me know 53790 2014-02-11 22:47:00 zpao (also, travis CI) 53791 2014-02-11 22:47:33 GreenJello "Allow anyone to talk to the channel, without being in it. Prevent anyone from talking in the channel at all. Exempt people already in the channel from the above ban. Exempt the github bot from the above ban." 53792 2014-02-11 22:48:24 GreenJello not sure if it works with freenode, though, but if you're interested: http://me.veekun.com/blog/2011/10/17/github-and-irc/#closing-the-loophole :-) 53793 2014-02-11 22:51:19 zpao oh i didn't realize i could register a nick and give that to github to use... 53794 2014-02-11 22:52:17 zpao maybe one day in my copious amounts of free time 53795 2014-02-11 23:40:40 nwienert can you access props in a mixin? 53796 2014-02-11 23:41:09 andreypopp nwienert: from methods, as usual, this.props 53797 2014-02-11 23:44:41 jakubmal Hi React core-team 53798 2014-02-11 23:45:17 jakubmal I'm co-organising a JS meetup next month 53799 2014-02-11 23:45:49 jakubmal We're going to have an introduction to React.js as one of presentations 53800 2014-02-11 23:46:54 jakubmal Would love to have one of you join us for a live QA session over Hangouts 53801 2014-02-11 23:47:49 jakubmal looks like no one's here right now 53802 2014-02-11 23:48:35 jakubmal could you ping me at jakubmal [at] gmail if you see this and can help? 53803 2014-02-11 23:49:03 jakubmal I'll be here tomorrow too 53804 2014-02-11 23:50:25 jakubmal petehunt: zpao: 53805 2014-02-12 00:02:32 zpao jakubmal: hey, i'm willing to bet we can make that work 53806 2014-02-12 00:03:03 zpao (also, i'm the worst at react-rails, i have an email i've been meaning to send...) 53807 2014-02-12 00:09:44 locks react-rails? 53808 2014-02-12 00:15:36 zpao https://github.com/facebook/react-rails 53809 2014-02-12 00:40:16 inkwellian Hello everybody. I'm working on a Component that will be used within my app like an input element. I'm curious if there's a way I can trigger/duplicate the onChange bubbling behavior? Will calling @props.onChange(myChangeEvent) be sufficient? 53810 2014-02-12 00:40:49 inkwellian In my app, I generally only attach an onChange handler to the the form element, to keep it clean. 53811 2014-02-12 02:32:37 myndzi okay, so i've got my data rendering top down. i THINK i can get a full json representation by basically calling .toJSON on the top and having it do the same for each item in this.props.children 53812 2014-02-12 02:35:21 myndzi things are getting a little messy though 53813 2014-02-12 02:35:34 myndzi i can have the parent container specify a callback for the children containers to call for, say, reordering 53814 2014-02-12 02:35:49 myndzi but i'm starting to have to pass parameters through multiple function calls 53815 2014-02-12 02:36:58 myndzi since for example, the parent that's iterating over the items isn't explicitly writing the grandchild, i have to pass the index to the function that generates the grandchild, which puts it in a property, which finally arrives where it needs to be 53816 2014-02-12 02:37:27 myndzi ohoho, silly me. i've got it! 53817 2014-02-12 03:59:57 myndzi how about this one 53818 2014-02-12 04:00:30 myndzi one of the sections is made up of: 1) a group of checkboxes 2) two unsorted lists 53819 2014-02-12 04:00:44 myndzi the idea is check boxes, then click 'add' to add the checked boxes to one of the lists 53820 2014-02-12 04:01:03 myndzi at first glance it seems to make sense to break this up into individual components 53821 2014-02-12 04:01:08 myndzi but there are a number of tricky bits 53822 2014-02-12 04:01:18 myndzi 1) i want to be able to remove items from the sub-lists 53823 2014-02-12 04:01:35 myndzi 2) i want the lists to be exclusive -- that is, if something gets added to one and it exists in the other, it should be removed from the other 53824 2014-02-12 04:02:02 myndzi is it worth making sub-components here? it doesn't seem like it because almost anything they would do needs to involve the parent anyway 53825 2014-02-12 04:07:51 nwienert andreypopp: next thing i'm bumping my head against... i now have 53826 2014-02-12 04:07:52 nwienert ...routes... 53827 2014-02-12 04:07:53 nwienert with one route being that contains a state.title = "Home Page" and I'd like the HTMLLayout to be able to set a tag to that. 53828 2014-02-12 04:08:57 nwienert In HTMLLayout's getInitialState I can access {this.props.children...} to get both the active path and the list of routes. But I can't seem to access the actual child route that's being rendered to get data from it. Is there a good way to get the state of the active child component of the router before rendering? 53829 2014-02-12 04:09:33 myndzi from what i gather of these things, you're doing it backwards 53830 2014-02-12 04:10:12 myndzi information flow should in general go from parents to children, not the reverse is what i'm finding 53831 2014-02-12 04:10:29 myndzi as to how to achieve your goal in that way... i'm less certain :( 53832 2014-02-12 04:10:46 nwienert yea thats what it seems to be 53833 2014-02-12 04:11:17 nwienert i could just store the page title info in the actual routes, but that seems really jank 53834 2014-02-12 04:12:02 nwienert other thought was having a very simple data store with even system built in, and then having the HTMLLayout have a getInitialStateAsync that would wait for a callback from that datastore getting it's activeTitle attribute set 53835 2014-02-12 04:14:04 nwienert Object.observe could even work, with a mixin 53836 2014-02-12 04:14:06 nwienert hmm 53837 2014-02-12 04:31:20 nwienert ok didn't work 53838 2014-02-12 04:31:34 nwienert i now know that react-async waits for getInitialStateAsync before going to children 53839 2014-02-12 04:35:26 myndzi did i read somewhere that react pre-binds your methods so you don't have to use .bind? 53840 2014-02-12 04:35:46 myndzi er, nm anyway, i'm still gonna have to use a factory or bind to add another argument- 53841 2014-02-12 04:56:42 j0n_ myndzi, that's correct 53842 2014-02-12 06:02:17 myndzi oh here's a fun one. 53843 2014-02-12 06:02:45 myndzi setState extends objects, but what about arrays? 53844 2014-02-12 06:02:48 myndzi what about objects IN arrays? 53845 2014-02-12 06:04:14 myndzi i have my top level component, and i have my sections, and my sections all manage their state appropriately etc. but if i reorder them, the top level component is going to cause a re-render, which will destroy the childrens' states? 53846 2014-02-12 06:05:24 myndzi (because their state hasn't propagated to the parent's data, but the parent shouldn't be in charge of it ... only needs to be able to serialize it) 53847 2014-02-12 07:03:53 petehunt lies 53848 2014-02-12 07:08:28 hareth hello 53849 2014-02-12 07:08:32 petehunt yooo 53850 2014-02-12 07:09:28 hareth : D 53851 2014-02-12 11:57:13 samvit hello 53852 2014-02-12 11:57:20 samvit i have a problem involving classes with reactjs 53853 2014-02-12 12:01:22 jbaiter samvit: yes? 53854 2014-02-12 12:01:28 jbaiter more details would be nice :-) 53855 2014-02-12 12:02:39 samvit well 53856 2014-02-12 12:02:50 samvit ive got a bunch of twitter bootstrap code 53857 2014-02-12 12:02:54 samvit that uses class= liberally 53858 2014-02-12 12:03:05 samvit and i did a mass substitution when i stick the html into jsx 53859 2014-02-12 12:03:12 samvit to make the class= className= 53860 2014-02-12 12:03:19 samvit but this breaks a bunch of javascript plugins 53861 2014-02-12 12:03:51 GreenJello samvit: it shouldn't break any plugins 53862 2014-02-12 12:04:33 GreenJello when it's actually added to the document <div className="foo" /> will show up as <div class="foo"></div> 53863 2014-02-12 12:07:02 samvit so is the correct approach 53864 2014-02-12 12:07:07 samvit to rename the class= to classname 53865 2014-02-12 12:07:13 samvit in the jsx code? 53866 2014-02-12 12:07:24 samvit className* 53867 2014-02-12 12:12:56 simenbrekken yes, class is reserved 53868 2014-02-12 13:55:58 coder Hello 53869 2014-02-12 13:56:06 coder I have a question about syncing data client-server 53870 2014-02-12 13:56:19 GreenJello coder, okay, ask :-) 53871 2014-02-12 13:56:24 coder well 53872 2014-02-12 13:56:32 coder i've used meteor and backbone in the past 53873 2014-02-12 13:56:46 coder im wondering if there is any particular format that works well with react 53874 2014-02-12 13:57:04 coder for having something along the lines of a client-side data store 53875 2014-02-12 13:57:26 GreenJello coder, backbone and react are a pretty common combination 53876 2014-02-12 13:58:07 coder I'd be interested in having my own custom data store 53877 2014-02-12 13:58:27 coder which i make the application a function of 53878 2014-02-12 13:58:31 GreenJello oh okay, what features does it require? 53879 2014-02-12 13:59:04 coder some basic querying and I'd want to have it being updated using a custom data sync protocol i've already implemented 53880 2014-02-12 13:59:19 coder i had built a custom frp framework before that works a lot like react, in clojurescript and i used it for that 53881 2014-02-12 14:00:27 coder what i had before was something that i like to think of as an simple client-side db which was sync'd intelligently with the one on the server 53882 2014-02-12 14:00:34 coder and have react rely completely off of this 53883 2014-02-12 14:01:40 GreenJello coder, I'd probably base it on cortex, which is a simple data wrapper that works amazingly with react 53884 2014-02-12 14:02:37 coder ooh this looks like almost exactly what i was looking for 53885 2014-02-12 14:02:45 GreenJello it's very simple, but its internal methods always know what changed, and where; so you could create a custom version of it that handles sync when things change 53886 2014-02-12 14:02:54 GreenJello here's the repo: https://github.com/mquan/cortex 53887 2014-02-12 14:03:02 bkonkle Nice, I've been looking for something like that also. 53888 2014-02-12 14:03:06 bkonkle Thanks for sharing it! 53889 2014-02-12 14:04:32 coder so on a related note 53890 2014-02-12 14:04:40 coder it would be cool to straight hook up 53891 2014-02-12 14:04:49 coder meteor's mini-mongo 53892 2014-02-12 14:06:09 coder my custom clojurescript data store was just a giant tree of atoms which worked really well to solve this problem as well 53893 2014-02-12 14:06:52 coder do you know if cortex is production ready? 53894 2014-02-12 14:07:42 GreenJello coder, it has through tests, and it's very simple 53895 2014-02-12 14:07:57 GreenJello there might be more test code than source :-) 53896 2014-02-12 14:08:39 bkonkle ACTION hands GreenJello 500 open source bonus points 53897 2014-02-12 14:08:52 GreenJello not my project, I wish it was :-) 53898 2014-02-12 14:09:02 bkonkle :-) 53899 2014-02-12 14:10:57 GreenJello coder, it's basically a nested wrapper around a JavaScript object, with change events bubbling to the top 53900 2014-02-12 14:12:08 GreenJello which then lets you tell React to update everything if you use it with React; you could also hack it to emit updates elsewhere, like to your persistent storage interface 53901 2014-02-12 14:12:41 GreenJello brb 53902 2014-02-12 14:14:48 coder great 53903 2014-02-12 14:14:57 coder thanks for your help Jello! 53904 2014-02-12 17:39:09 pspeter3 Do you guys have a lot of experience with webpack? 53905 2014-02-12 17:41:11 dve pspeter3: I am learning rapidly :) 53906 2014-02-12 17:41:32 pspeter3 dve: I just started playing with it last night. Do you really inline the css into the js? 53907 2014-02-12 17:41:50 dve using require(), yes 53908 2014-02-12 17:42:52 pspeter3 I feel like that's weird. I've always thought you put css in the head and js in the foot 53909 2014-02-12 17:43:06 GreenJello yeah, I wouldn't put my CSS in the JS 53910 2014-02-12 17:43:11 dve It does feel wierd, but sort fits the principals of react 53911 2014-02-12 17:43:18 GreenJello it should really generate two files 53912 2014-02-12 17:44:02 zpao dve: pete really likes the idea of css in js 53913 2014-02-12 17:44:03 pspeter3 GreenJello: Agreed. I feel like it should be able to too 53914 2014-02-12 17:44:13 pspeter3 @zpao: Why? 53915 2014-02-12 17:44:16 GreenJello I think I saw a react boilerplate with webpack pspeter3 53916 2014-02-12 17:44:17 dve I sort of like it for styles that unique to the component 53917 2014-02-12 17:44:36 pspeter3 GreenJello: Yeah, I played with it for a bit. Maybe I'll try it again 53918 2014-02-12 17:44:48 zpao pspeter3: same argument for separation of concerns vs technologies 53919 2014-02-12 17:45:05 pspeter3 I'm just wondering how it gets applied to the dom 53920 2014-02-12 17:45:10 zpao style="" 53921 2014-02-12 17:45:14 pspeter3 Having a single script tag can seem a bit silly 53922 2014-02-12 17:45:26 pspeter3 @zpao: On the html element? 53923 2014-02-12 17:45:59 zpao no, on each dom node. at least when using react and style={{color: 'black'}} 53924 2014-02-12 17:46:11 zpao i don't know the rest of what dve is doing 53925 2014-02-12 17:46:45 GreenJello zpao: I think he's talking about webpack allowing you to require("foo.css") where foo.css is a plain css file 53926 2014-02-12 17:47:00 dve zpao i think pspeter3 was referring to how you require() css with webpack 53927 2014-02-12 17:47:21 zpao ah, my bad. still need to output it somehow though right? 53928 2014-02-12 17:47:28 GreenJello pspeter3: for plain CSS files it likely just embeds them in the head in a <style /> element 53929 2014-02-12 17:48:10 GreenJello zpao: "var css = " + JSON.stringify(fs.fileReadSync("foo.css")) 53930 2014-02-12 17:48:24 GreenJello I think it's something like that 53931 2014-02-12 17:48:31 dve GreenJello is right, it creates a style tag 53932 2014-02-12 17:48:42 pspeter3 Ah ok, that makes a lot more sense 53933 2014-02-12 17:49:07 GreenJello but it's still a bad idea 53934 2014-02-12 17:49:25 zpao GreenJello: ah, i was thinking about something that parses the css and exports a js object with something like {'#selector': {'color': 'black'}} 53935 2014-02-12 17:49:45 GreenJello zpao: that'd be slightly better because you get encapsulation 53936 2014-02-12 17:49:51 GreenJello but nope :-) 53937 2014-02-12 17:49:55 zpao and you can use it with react :P 53938 2014-02-12 17:49:56 dve haha 53939 2014-02-12 17:50:58 pspeter3 That would be really cool to use it with react that way 53940 2014-02-12 17:51:23 pspeter3 From a browser perspective, isn't a css file better than a style attribute? 53941 2014-02-12 17:51:33 andreypopp you can do this ^ with browserify + cssobjectify 53942 2014-02-12 17:51:40 pspeter3 Also, you could just write your styles as js files 53943 2014-02-12 17:51:43 zpao i swear there's something on npm that will let you do that... and answered 53944 2014-02-12 17:51:49 pspeter3 Oh god that would be ridiculous 53945 2014-02-12 17:51:49 GreenJello I'd do something like have a hook in the jsx compiler that rewrites componets main element to have a className of some random number, and then scope the CSS for the component under that class 53946 2014-02-12 17:52:16 andreypopp GreenJello: https://github.com/chenglou/RCSS 53947 2014-02-12 17:53:12 GreenJello andreypopp: that looks cool 53948 2014-02-12 17:53:20 pspeter3 That is really cool 53949 2014-02-12 17:54:13 andreypopp also https://github.com/andreypopp/xcss — CSS -> JS object model -> CSS compiler 53950 2014-02-12 17:54:36 andreypopp could be used with browserify — browserify -p [ xcss -o bundle.css ] ./index.js so you can require('./style.css') 53951 2014-02-12 17:58:17 dve I like it. could neatly encapsulate dynamic style changes in render() 53952 2014-02-12 17:59:23 GreenJello now I want render mixns to work :/ 53953 2014-02-12 18:00:34 GreenJello andreypopp: that's really close to my idea 53954 2014-02-12 18:00:37 GreenJello ideal* 53955 2014-02-12 18:01:26 GreenJello I'd just want to optimize the static parts out into stylesheets at compile time 53956 2014-02-12 18:03:11 GreenJello oh wait, I'm a bit confused about when rendering to CSS happens if at all 53957 2014-02-12 18:03:21 zpao GreenJello: render mixins? 53958 2014-02-12 18:03:56 GreenJello zpao: yeah, I think we talked about it yesterday 53959 2014-02-12 18:04:15 zpao ACTION wasn't paying much attention here yesterday 53960 2014-02-12 18:04:26 GreenJello like a beforeRender, and afterRender method 53961 2014-02-12 18:04:50 zpao ah, not what i was going to guess 53962 2014-02-12 18:05:31 zpao so i'm hoping somebody explained how to get that with current methods 53963 2014-02-12 18:05:57 zpao (not as easy, but doable) 53964 2014-02-12 18:06:18 GreenJello {afterRender: function(node){ node.props.style = something(); return node; }} 53965 2014-02-12 18:07:29 zpao componentWillMount + componentWillUpdate = beforeRender, componentDidMount + componentDidUpdate = afterRender 53966 2014-02-12 18:08:13 zpao so you could write a mixin that maps the functions and lets you write beforeRender, afterRender 53967 2014-02-12 18:08:50 GreenJello hmm, okay, makes sense :-) 53968 2014-02-12 18:13:53 zpao GreenJello: something like https://gist.github.com/zpao/8961292 53969 2014-02-12 18:19:29 GreenJello ah okay, cool :-) 53970 2014-02-12 18:22:29 cpojer zpao: wow, the custom event modules are confusing! 53971 2014-02-12 18:22:49 cpojer zpao: is there a way to provide a prop to a custom event somehow? 53972 2014-02-12 18:22:59 zpao argument? 53973 2014-02-12 18:23:11 cpojer or well, receive the component that the custom event is being attached to? 53974 2014-02-12 18:23:18 cpojer that would be fine actually 53975 2014-02-12 18:23:43 zpao my suggestion is to talk to yungsters. i don't know that code well 53976 2014-02-12 18:23:56 cpojer alright 53977 2014-02-12 18:25:42 yungsters cpojer: registered event callbacks do not have a way of getting back to the component atm 53978 2014-02-12 18:26:24 yungsters EventPluginHub only knows 1) ID of element, 2) "event" name, and 3) callback 53979 2014-02-12 18:26:29 sspi got a question on using React with Closure Compiler Advanced mode - how do I remove the invariant messages? 53980 2014-02-12 18:26:51 cpojer yungsters: ID of the element that the component renders to that the event is attached to? 53981 2014-02-12 18:26:56 cpojer because in that case it is fine 53982 2014-02-12 18:27:06 yungsters cpojer: correct 53983 2014-02-12 18:27:07 cpojer for outer click/touch I only need element.contains(event.target) 53984 2014-02-12 18:27:29 cpojer yungsters: is the "best practice" to add such a plugin to React itself? 53985 2014-02-12 18:28:21 cpojer "topLevelTarget The listening component root node." oh I see 53986 2014-02-12 18:28:24 yungsters cpojer: not sure, i think the precedent has been yes. but imo we are just bloating open source for ppl who dont care 53987 2014-02-12 18:28:42 cpojer right, this kind of thing is generally useful though 53988 2014-02-12 18:30:33 balpert lots of people want onOuterClick probably but maybe the better way to solve it is with layers 53989 2014-02-12 18:31:04 cpojer I'm not really familiar with that 53990 2014-02-12 18:31:49 yungsters balpert: by "layers", you're not referring to the mythical layer abstraction we use internally, are you? 53991 2014-02-12 18:33:08 sspi yungsters: any plans on supporting external EventPlugins? (without changing React...) 53992 2014-02-12 18:33:29 yungsters sspi: zpao would know about future plans better than me :) 53993 2014-02-12 18:34:41 zpao sspi: it's come up and if we get a sane injection api (ReactInjection was added recently) then it should be totally doable. would like to hear good arguments for it, and not just "because we can" 53994 2014-02-12 18:41:08 pspeter3 What is React Injection? 53995 2014-02-12 18:41:38 zpao lets you customize (inject things) into react core. one major use case is injecting dom properties 53996 2014-02-12 18:41:56 pspeter3 Ah that is pretty cool 53997 2014-02-12 18:42:53 zpao most of the core is already built this way (the default list of properties is injected), so exposing that functionality is relatively trivial. but deciding how it should be supported is the question i've been thinking about 53998 2014-02-12 18:44:01 zpao https://github.com/facebook/react/blob/master/src/browser/ReactDefaultInjection.js shows how we do that 53999 2014-02-12 18:48:24 pspeter3 Ah that makes sense 54000 2014-02-12 18:48:37 pspeter3 I feel like it would be nice for custom animation handlers 54001 2014-02-12 18:51:54 sspi zpao: the basic argument would be to keep React focussed upon a limited set of EventPlugins instead of an infinite growing list... 54002 2014-02-12 18:52:30 sspi we could add support for Gamepad events, or Cordova events, or proprietary events from tv's and what not.... 54003 2014-02-12 19:09:12 balpert yungsters: I was 54004 2014-02-12 19:09:15 balpert myths! 54005 2014-02-12 19:09:37 yungsters balpert: haha, interesting... i don't think we've ever considered using layers to increase hit targets before 54006 2014-02-12 19:10:01 balpert oh, I missed that 54007 2014-02-12 19:10:03 balpert never mind 54008 2014-02-12 19:11:07 dve I knocked up a simple DI Container for general user, but also that handles angular services and mixes services into react classes, to help me migrate some stuff from angular. Maybe someone else will have use for it - https://github.com/SpektrumFM/dicontainer 54009 2014-02-12 19:11:29 dve use* 54010 2014-02-12 19:28:45 GreenJello dve: cool :-) 54011 2014-02-12 19:29:03 GreenJello honestly, it looks better than angular's DI :-) 54012 2014-02-12 19:33:06 nwienert2 if anyone has a minute... running into something and could use a second set of eyes. i have a fairly simple isomorphic app i'm trying to set up and recently refactored it 54013 2014-02-12 19:33:10 dve GreenJello: haha, I wouldn't go that far, but thanks :) 54014 2014-02-12 19:33:36 nwienert2 its nearly working again, but now i can see a full page flash when going between pages when it shouldn't be re-rendering those parts... 54015 2014-02-12 19:33:37 nwienert2 https://github.com/natew/reactor 54016 2014-02-12 19:33:53 nwienert2 even though the two pages use the same <Layout> component 54017 2014-02-12 19:45:30 GreenJello nwienert2: where? 54018 2014-02-12 19:56:56 andreypopp nwienert2: two pages are two different components, so React resets innerHTML and from that you are seeing a flick (because stylesheets are reattached) 54019 2014-02-12 19:57:36 andreypopp this._rootNodeID + this._mountDepth would identify a component uniquely, right? 54020 2014-02-12 20:01:07 balpert probably 54021 2014-02-12 20:01:12 balpert what do you need it for though? 54022 2014-02-12 20:01:16 balpert underscored things are private :) 54023 2014-02-12 20:02:28 andreypopp balpert: that's for my dangerous thingy, react-async, I need to deliver a JSON data to browser after rendering — component -> its state 54024 2014-02-12 20:02:48 andreypopp now it uses this._rootNodeID and this is a bug 54025 2014-02-12 20:03:21 balpert right, rootNodeID only counts dom components 54026 2014-02-12 20:11:05 Bonuspunkt has anyone stubled upon a datepicker or something like that for react? 54027 2014-02-12 20:33:15 chenglou Bonuspunkt: not to my knowledge. You can wrap around jquery date picker or whatever though 54028 2014-02-12 20:55:30 piazzollaT hey guys, I hope this is a good place for this, please let me know if it's not : 54029 2014-02-12 20:55:30 piazzollaT In my first week plus with react I've found myself building components that hide or show their children components in one of two ways: 54030 2014-02-12 20:55:30 piazzollaT 1) by having logic in the render method that selectively renders different groups of components. 54031 2014-02-12 20:55:30 piazzollaT 2) by having a parent's state control a child's visibility property (and then using css to hide the element) 54032 2014-02-12 20:55:30 piazzollaT I posit that #2 is a more performant in the long run because that way we prevent unnecessary reflows. am I overestimating this impact or do you have any thoughts on this ? would be cool to see if there's some consensus from the community on best practices regarding this. thanks. 54033 2014-02-12 20:55:31 reactbotx Issue 2: [docs] Fix button links on bottom of home https://github.com/facebook/react/issues/2 54034 2014-02-12 20:57:05 zpao piazzollaT: i think it depends on your app. if it's something that'll change often, i would go with 2. 1 is simpler and might be enough for more naive cases 54035 2014-02-12 20:59:15 piazzollaT zpao: makes sense. i've found myself using #2 on more complex cases. but it almost seems like im solving the same problem many times 54036 2014-02-12 20:59:16 reactbotx Issue 2: [docs] Fix button links on bottom of home https://github.com/facebook/react/issues/2 54037 2014-02-12 21:00:01 petehunt keep in mind that the more components you keep in the document, the more data react needs to track 54038 2014-02-12 21:01:47 balpert #1 will be better if you always show a small subset -- that way you don't pay the cost of having hidden elements in the DOM 54039 2014-02-12 21:01:48 reactbotx Issue 1: Run each test in its own <iframe> https://github.com/facebook/react/issues/1 54040 2014-02-12 21:02:47 piazzollaT petehunt: that's true, need to take that into consideration as well 54041 2014-02-12 21:05:47 piazzollaT balpert: yeah. it's worked well for me on things like loading or empty states, that's a good use case. would you say that once it starts to get more complex, e.g. hide a particular child el only for a specific state, then #2 is more viable? 54042 2014-02-12 21:05:48 reactbotx Issue 2: [docs] Fix button links on bottom of home https://github.com/facebook/react/issues/2 54043 2014-02-12 21:08:45 balpert piazzollaT: I would go with 1 unless it's causing problems 54044 2014-02-12 21:08:53 balpert it's simpler 54045 2014-02-12 21:14:56 piazzollaT yeah definitely, i don't disagree with that 54046 2014-02-12 21:18:45 nwienert2 andreypopp: thanks for the heads up on the stylesheets 54047 2014-02-12 21:19:05 nwienert2 is it because the HTML stuff is inside a different component that is just swaps it all out 54048 2014-02-12 21:19:10 nwienert2 rather than diffing? 54049 2014-02-12 21:19:53 andreypopp yeah, different component constructors -> no diffing 54050 2014-02-12 21:20:54 nwienert2 :X 54051 2014-02-12 21:22:06 nwienert2 almost seems like react needs support for either returning arrays of dom nodes, or having some sort of "empty" dom node that can nest multiple but doesnt return html 54052 2014-02-12 21:22:48 balpert nwienert2: we'd like to do that 54053 2014-02-12 21:24:03 nwienert2 cool. is there an issue to track for that? 54054 2014-02-12 21:25:39 balpert nwienert2: not sure. I thought we did but I can't find anything now 54055 2014-02-12 21:32:34 nwienert2 andreypopp: driving myself crazy trying to get a good structure to have the title update, thinking I may need to just make my own new React class generator 54056 2014-02-12 21:33:20 andreypopp nwienert2: what about componentDidMount: function() { document.title = ... } ? 54057 2014-02-12 21:34:16 rcs how does that work on the server? 54058 2014-02-12 21:34:45 andreypopp it wouldn't execute on server :( 54059 2014-02-12 21:34:58 nwienert2 yea problem is getting server to render, the latest changes i made on reactor get it working but now it re-renders the whole page unfortuantely 54060 2014-02-12 21:35:39 nwienert2 because i had to move html rendering below the router rather than above 54061 2014-02-12 21:51:22 jbelcher Just looking for a general opinion: when you have highly interactive UI that doesn't always immediately reflect the component data model (i.e. draggable, resizable, etc.), does mixing something like jQueryUI make sense? I realize the two DOM approaches can fight one another. 54062 2014-02-12 22:32:36 cpojer I have a super stupid question re shouldComponentUpdate 54063 2014-02-12 22:32:44 balpert cpojer: yup 54064 2014-02-12 22:33:06 cpojer let's say I have this: <Component text={text} /> and I run this code twice, does render get called twice even though the props do not change? 54065 2014-02-12 22:33:18 balpert yes 54066 2014-02-12 22:33:36 cpojer so shouldComponentUpdate => nextProps.text != this.props.text is a reasonable optimization if the render method is complex? 54067 2014-02-12 22:33:39 balpert yes 54068 2014-02-12 22:33:40 cpojer (there is no state) 54069 2014-02-12 22:33:42 cpojer awesome, thanks 54070 2014-02-12 22:33:51 balpert (you could mix in something like https://github.com/facebook/react/blob/master/src/addons/ReactComponentWithPureRenderMixin.js too) 54071 2014-02-12 22:34:08 cpojer that's lovely 54072 2014-02-12 22:34:27 balpert I wish that had been the default from the start 54073 2014-02-12 22:34:50 cpojer I'm not sure this is a good default though, is it? 54074 2014-02-12 22:38:20 rcs The shallow equal would make it a rough default. 54075 2014-02-12 22:39:40 balpert cpojer: it would force you to be conscious of whether you're mutating stuff in-place 54076 2014-02-12 22:42:57 sigmus hello everyone. I'm really enjoying Reactjs but having some basic issues with this.props.children ... could someone help me? http://jsfiddle.net/kb3gN/1246/ 54077 2014-02-12 22:43:57 balpert sigmus: http://jsfiddle.net/fjYS4/ ? 54078 2014-02-12 22:44:18 myndzi i really wish that there was a check and a better error message for trying to return > 1 element in a render function 54079 2014-02-12 22:44:25 myndzi "Unexpected identifier" is so horribly vague 54080 2014-02-12 22:44:41 balpert myndzi: it's hard to produce good errors 54081 2014-02-12 22:44:51 zpao myndzi: i think you're getting a JS error, which we can't really help with 54082 2014-02-12 22:45:32 zpao return function()function() 54083 2014-02-12 22:45:42 balpert because <ul /> <div /> could parse as (<ul />) < div which would be at least valid JS tokens 54084 2014-02-12 22:45:52 balpert that is, React.DOM.ul() < div 54085 2014-02-12 22:46:04 myndzi no, it was definitely two divs 54086 2014-02-12 22:46:21 balpert I mean 54087 2014-02-12 22:46:22 sigmus balpert: thank you so much... gonna reflect on that now 54088 2014-02-12 22:46:22 balpert same with divs 54089 2014-02-12 22:46:23 myndzi i thought it was a js error too which is why i just spent so long trying to figure it out ;p 54090 2014-02-12 22:46:30 myndzi well, two elements* 54091 2014-02-12 22:46:37 balpert yes 54092 2014-02-12 22:46:39 zpao that *is* a js error 54093 2014-02-12 22:46:42 myndzi anyway, i realize you're not parsing it as elements 54094 2014-02-12 22:46:50 myndzi it's just a really unhelpful error is all 54095 2014-02-12 22:47:04 balpert myndzi: we could theoretically disallow two consecutive JSX elements 54096 2014-02-12 22:47:14 myndzi but in many cases it's fine 54097 2014-02-12 22:47:17 myndzi just not at the top level 54098 2014-02-12 22:47:24 balpert right, I mean at the top level 54099 2014-02-12 22:47:29 balpert but it's hard to see without a lot of lookahead that <div>1</div><div>2</div> necessarily _is_ two consecutive elements 54100 2014-02-12 22:47:33 myndzi that would theoretically be helpful 54101 2014-02-12 22:47:34 myndzi ;) 54102 2014-02-12 22:47:39 myndzi yeah, i know 54103 2014-02-12 22:47:43 balpert because that could parse as 54104 2014-02-12 22:47:45 balpert <div>1</div> (element) 54105 2014-02-12 22:47:46 myndzi what's this esprima, some kind of parser yeah? 54106 2014-02-12 22:47:47 balpert < (less than) 54107 2014-02-12 22:47:48 zpao balpert: right, and that would be at the JSX level 54108 2014-02-12 22:47:48 balpert ... 54109 2014-02-12 22:47:51 balpert yeah, esprima 54110 2014-02-12 22:47:52 myndzi sometimse it gives me errors and they're rather more helpful 54111 2014-02-12 22:47:58 myndzi that would be the place to cover it if possible 54112 2014-02-12 22:47:58 balpert zpao: I'm saying we can't do it even there though 54113 2014-02-12 22:48:09 balpert myndzi: https://github.com/facebook/esprima/tree/fb-harmony 54114 2014-02-12 22:48:16 balpert zpao: even if we wanted to do it there, we couldn't 54115 2014-02-12 22:48:25 zpao fair enough 54116 2014-02-12 22:48:37 chenglou myndzi: there's a tip entry on this 54117 2014-02-12 22:48:49 zpao oh well. we should make that error searchable 54118 2014-02-12 22:48:51 myndzi the trouble is that you can't go from error -> tip 54119 2014-02-12 22:48:53 myndzi i mean, i knew about this 54120 2014-02-12 22:48:59 myndzi but i thought exactly what zpao said 54121 2014-02-12 22:49:04 myndzi which = not thinking react at all 54122 2014-02-12 22:49:24 zpao react + "Unexpected identifier" shuold bring you to a page explaining possibilities 54123 2014-02-12 22:49:26 myndzi there's no clue to tell me it's about the react code, which looks like valid html 54124 2014-02-12 22:49:41 myndzi so i'm busily investigating the js, you see? 54125 2014-02-12 22:49:52 myndzi i mean, i know about this and i've had this error before 54126 2014-02-12 22:49:57 myndzi but i was just in the wrong headspace 54127 2014-02-12 22:50:17 myndzi anyway, just throwing a vote out there for doing whatever possible about it :) 54128 2014-02-12 22:50:31 zpao post on stack overflow, answer yourself, then you'll help everybody after you :P 54129 2014-02-12 22:50:47 myndzi the problem is that's not the kind of error i or anybody who knows anything about javascript searches for 54130 2014-02-12 22:50:51 myndzi it's not specific enough to bother searching for 54131 2014-02-12 22:50:59 myndzi once you know the answer it's easy to know why 54132 2014-02-12 22:51:01 zpao it did give a line number though right? 54133 2014-02-12 22:51:04 myndzi but when you don't know the answer it's hard to know where to look 54134 2014-02-12 22:51:21 myndzi yes, but line numbers are tricky and not always accurate especially for super vague errors involving a preprocessor 54135 2014-02-12 22:51:31 balpert myndzi: JSX line numbers should be consistent 54136 2014-02-12 22:51:45 myndzi the way i eventually found it out was by deleting things in the react jsx compiler live until the error went away 54137 2014-02-12 22:51:56 myndzi and even then i was like wtf, if i remove either of these the error goes away but both...ffffffuuuuu 54138 2014-02-12 22:52:00 myndzi :P 54139 2014-02-12 22:52:26 myndzi oh, but something that might be a more actionable suggestion: 54140 2014-02-12 22:52:31 zpao myndzi: ohhhh it was in the the jsx -> js step 54141 2014-02-12 22:52:34 myndzi give the editor better functionality on the jsx compiler page 54142 2014-02-12 22:52:45 myndzi 1) line numbers so the errors aren't useless 54143 2014-02-12 22:52:47 myndzi 2) don't wrap lines 54144 2014-02-12 22:52:57 myndzi 3) keep the right panel always visible / make the left panel scrollable 54145 2014-02-12 22:53:02 balpert myndzi: PRs accepted ;) 54146 2014-02-12 22:53:04 myndzi those things would make it an extremely useful tool 54147 2014-02-12 22:53:26 myndzi yeah, uh, you probably don't want me messing with your code yet haha 54148 2014-02-12 22:53:39 myndzi but i'll consider it when i have the time, which is not until after this pay period mid-month 54149 2014-02-12 22:54:58 myndzi forgotten closing tags on html elements that don't require them is another one fwiw, but 'unexpected token' is a little easier to track down 54150 2014-02-12 22:55:52 myndzi or sometimes it's pretending code inside an object literal is code inside a function expression :P 54151 2014-02-12 23:17:32 nwienert2 finally got it! 54152 2014-02-12 23:37:46 contrahax is there any documentation on the best way to iterate stuff into components? 54153 2014-02-12 23:38:19 contrahax currently im doing something like {someArray.map(function(i){ return <Component/> }); 54154 2014-02-12 23:38:32 balpert that's correct 54155 2014-02-12 23:38:48 balpert if you prefer you can assign that to a temporary variable earleir 54156 2014-02-12 23:38:51 balpert s/earleir/earlier 54157 2014-02-12 23:39:02 balpert var someComponents = someArray.map(...); 54158 2014-02-12 23:39:09 balpert then <div>{someComponents}</div> 54159 2014-02-12 23:46:46 contrahax balpert cool thanks! 54160 2014-02-13 00:38:32 smurfke Is getInitialState used to avoid a fook? (preloading data) 54161 2014-02-13 00:38:42 smurfke just getting into react 54162 2014-02-13 00:57:28 zpao fook? 54163 2014-02-13 01:00:24 ivan something like flash of unstyled content (FOUC) perhaps 54164 2014-02-13 01:09:24 chenglou ivan: no, if I understood correctly 54165 2014-02-13 01:10:03 chenglou getInitialState is really to provide you with an initial state, so that your first render doesn't screw up if it uses state data 54166 2014-02-13 01:10:27 chenglou I mean logically you have to begin somewhere 54167 2014-02-13 01:16:08 ivan smurfke ^ who is gone 54168 2014-02-13 01:16:26 chenglou oops... sry 54169 2014-02-13 01:52:00 myndzi undefined._handleChange: Invariant Violation: replaceState(...): Cannot update during an existing state transition (such as within `render`). This could potentially cause an infinite loop so it is forbidden. 54170 2014-02-13 01:52:03 myndzi how do i track this one down? 54171 2014-02-13 01:52:39 myndzi i passed a callback to a child as well as a reference to self.state to set up a controlled editbox 54172 2014-02-13 01:52:46 myndzi when i type in it, it spams that error 54173 2014-02-13 01:55:45 rcs myndzi: Should be throwing an error, right? Purple checkbox! 54174 2014-02-13 01:56:43 myndzi purple...checkbox...? 54175 2014-02-13 01:57:12 rcs myndzi: Dev tools, break on unhandled exception 54176 2014-02-13 01:57:25 rcs Pause button, purple state. I don't know why it's in my head as a checkbox. 54177 2014-02-13 01:57:44 myndzi read the rest of the error 54178 2014-02-13 01:57:49 myndzi it's not that i don't know where it's coming from 54179 2014-02-13 01:57:59 myndzi it's that i don't know why it thinks it's updating state during a state transition 54180 2014-02-13 01:58:26 myndzi i'm guessing that you can't do what i'm trying to do, which is okay, but i don't know why 54181 2014-02-13 02:07:00 myndzi i think maybe refs are the part of the picture i've been missing out on and is confusing me about child access 54182 2014-02-13 02:07:15 myndzi i thought it was deliberately obtuse because of the top-down data flow thing and have been trying to structure my code that way 54183 2014-02-13 02:07:26 myndzi and the only way i knew to get a value from a child was keep a reference to it (lols) 54184 2014-02-13 02:07:34 myndzi i'd read about refs when i first got started but didn't put 2 and 2 together 54185 2014-02-13 02:09:11 balpert myndzi: when you break on exception, does the stack contain any render methods? 54186 2014-02-13 02:09:22 balpert if not, we should at least improve the error messages 54187 2014-02-13 02:09:27 myndzi it's hard to read the stack 54188 2014-02-13 02:09:38 myndzi i turn down the stack dump in the error, do i need to actually do the break on exception thing? 54189 2014-02-13 02:10:05 myndzi i don't *think* so, i'll paste 54190 2014-02-13 02:10:40 myndzi http://pastebin.com/XvhaJ2JZ 54191 2014-02-13 02:10:47 myndzi there's two errors there 54192 2014-02-13 02:10:50 myndzi line 16 is the second one 54193 2014-02-13 02:10:52 myndzi they're related 54194 2014-02-13 02:11:46 myndzi perhaps you can answer the x to my y, however. should i / can i set up a controlled input where the child owns the input but the parent owns the state? 54195 2014-02-13 02:17:57 balpert myndzi: sure, you can just pass the value through the child to the input using props 54196 2014-02-13 02:18:39 balpert myndzi: I'm not sure why that error's happening from the stack 54197 2014-02-13 02:18:42 myndzi that's what i thought 54198 2014-02-13 02:19:06 balpert if you can send over a test case I can look 54199 2014-02-13 02:19:20 myndzi humm 54200 2014-02-13 02:19:27 myndzi well, i have a self-contained jsx 54201 2014-02-13 02:19:35 myndzi can probably cut most of it out, let me see 54202 2014-02-13 02:21:47 myndzi http://pastebin.com/JcLC0hLe 54203 2014-02-13 02:21:57 myndzi don't know how that will render without the css, but you should be able to attempt to type in the editbox 54204 2014-02-13 02:22:44 myndzi i need a better pastebin site, heh 54205 2014-02-17 08:47:39 vjeux ircloggr-react: ping 54206 2014-02-17 08:51:56 balpert reactbotx: ping 54207 2014-02-17 08:51:57 reactbotx PONG 54208 2014-02-17 08:52:03 balpert ^ way more fun 54209 2014-02-17 08:52:05 vjeux :P 54210 2014-02-17 08:52:46 abrkn vjeux: i checked out your blog. very cool projects! 54211 2014-02-17 08:53:19 abrkn balpert: http://bash.org/?9322 54212 2014-02-17 10:05:52 GreenJello how are the recipients of refs determined? 54213 2014-02-17 10:07:21 GreenJello e.g. render: function(){ return <div><p refs="a" /><SomeComponent><p refs="b"><b refs="c" /></p></SomeComponent></div>} 54214 2014-02-17 10:09:59 balpert GreenJello: I assume you mean ref in your code -- all of the refs are attached the component that created the component 54215 2014-02-17 10:10:14 balpert so in this case, the component that your render function is from 54216 2014-02-17 10:10:43 GreenJello oh okay, so there's some internal tracking of what render function's being called? 54217 2014-02-17 10:10:51 balpert SomeComponent won't have b and c attached 54218 2014-02-17 10:10:55 balpert rigt 54219 2014-02-17 10:10:59 balpert right 54220 2014-02-17 10:11:08 GreenJello ah okay, thanks 54221 2014-02-17 10:13:28 GreenJello any recomendation for a param that essentially means "name" in html, or ref in react? 54222 2014-02-17 10:13:43 GreenJello a name for a param, that is 54223 2014-02-17 10:14:09 GreenJello e.g. <input name="theName" /> 54224 2014-02-17 10:14:57 GreenJello I'm going to be mapping it to an object, so I thought "key" but that's taken too :-D 54225 2014-02-17 10:15:21 GreenJello and so is id... I'm out of ideas :-) 54226 2014-02-17 12:34:47 insin are there issues using "ref" when using renderComponentToString? I have Widget objects which use React.DOM to generate representations of themselves and want to unit test against the HTML version of the output. I'm wrapping the resulting component in a React.createClass, returning it from its render method, but getting this now that I've added ref attributes: "Invariant Violation: addComponentAsRe 54227 2014-02-17 12:34:49 insin fTo(...): Only a ReactOwner can have refs." 54228 2014-02-17 12:37:06 GreenJello insin, that's probably a problem with the code in general; did you try it without serverside rendering? 54229 2014-02-17 12:38:28 insin not yet as I haven't quite figured out how to integrate this stuff with React components, just adding the ref attributes to the DOM generation code to see what happens (if anything) to the HTML output in my unit tests 54230 2014-02-17 12:39:55 insin this is how I'm wrapping it at the moment in my custom QUnit assertion: https://gist.github.com/insin/9005207 54231 2014-02-17 12:39:59 insin brb 54232 2014-02-17 12:46:44 GreenJello insin, why wrap it in a class? 54233 2014-02-17 13:08:55 insin GreenJello: only just added that - thought that's what the error message was about 54234 2014-02-17 13:09:28 GreenJello can you try to create a minimal test case, e.g. in jsbin/jsfiddle? 54235 2014-02-17 13:09:51 GreenJello and it's react 0.8? 54236 2014-02-17 13:09:54 insin yeah, will do in a bit. This is what that error message has been updated to in Trunk: https://github.com/facebook/react/commit/72fd246 54237 2014-02-17 13:09:55 insin yup 54238 2014-02-17 13:12:39 insin is there a react jsbin URL now/ 54239 2014-02-17 13:12:41 insin ? 54240 2014-02-17 13:16:35 GreenJello http://jsbin.com/ciwomeno/1/edit 54241 2014-02-17 13:16:42 GreenJello there's that :-) 54242 2014-02-17 13:17:05 syranide insin: I doubt you can use ref when rendering to a string as it only ever does one render 54243 2014-02-17 13:17:05 GreenJello you might have to change JavaScript to JSX (React) because it glitches sometimes 54244 2014-02-17 13:17:49 syranide insin: however, if it's just for getting testing the HTML you could just render as normal and get innerHTML 54245 2014-02-17 13:18:39 GreenJello well yeah, you shouldn't actually have this.refs in render/getDefaultProps/getInitialState 54246 2014-02-17 13:19:31 GreenJello if you need to do that for some reason, you probably don't want refs 54247 2014-02-17 13:22:58 insin Gah, works in JSBin, although it's throwing some other type of error too: http://jsbin.com/codisuhu/1/edit 54248 2014-02-17 13:34:48 GreenJello insin, yeah you have to create Widget inside the render function of Test 54249 2014-02-17 13:35:13 GreenJello http://jsbin.com/codisuhu/2/edit 54250 2014-02-17 13:36:06 GreenJello I was talking to balpert just a little bit ago about this; I didn't know it either :-) 54251 2014-02-17 13:41:56 insin danm, that's going to be awkward, so many tests to change :| http://jsbin.com/codisuhu/1/edit 54252 2014-02-17 13:44:44 insin that's going to be an epic commit, for 1 line of code being changed :D "attrs.ref = attrs.id" 54253 2014-02-17 13:48:03 GreenJello insin, by the way, I don't think you have to specify type= 54254 2014-02-17 13:48:07 GreenJello insin, by the way, I don't think you have to specify type="text" 54255 2014-02-17 13:48:15 GreenJello or type: "text"; 54256 2014-02-17 13:49:07 insin That's just the default in the real thing: https://github.com/insin/newforms/blob/react/lib/widgets.js#L142-L158 54257 2014-02-17 13:49:46 GreenJello hmm... I wonder if type is required by the html spec... 54258 2014-02-17 13:54:35 GreenJello well not explicitly required as far as I can tell 54259 2014-02-17 13:55:08 GreenJello "The type attribute controls the data type (and associated control) of the element [...] The missing value default is the Text state." 54260 2014-02-17 13:56:16 GreenJello insin, that looks incredibly useful! 54261 2014-02-17 13:56:39 GreenJello I was going to make a small subset of those, but I might just use yours :-) 54262 2014-02-17 13:57:00 insin this is the first demo I got working with React, still need to figure out the best way to integrate it with components, where the state goes etc: http://insin.github.io/newforms/react/demo.html 54263 2014-02-17 13:57:43 insin stopped at this point with my own DOM library because you had to replace the whole thing on every go and it didn't have any references to the real DOM nodes (it's a port from django.forms) 54264 2014-02-17 13:58:41 insin should be easier to solve the problem it has with doing custom layouts once I figure it out, as you could just supply your own layout function which uses React .DOM 54265 2014-02-17 14:05:12 insin this assertion function is turning into an amazing hack :) 54266 2014-02-17 14:05:16 GreenJello two things to keep in mind when doing this is: "I want the bootstrap/foundation/weeblewobble/etc versions of these inputs to be easy to make" and "I want an object I can call JSON.stringify() on" 54267 2014-02-17 14:06:01 insin a bootstrap version is my own/first test case for that aspect 54268 2014-02-17 14:06:37 GreenJello and are you implementing a nice .toJSON on the prototypes? 54269 2014-02-17 14:06:55 insin for the form definition itself or the form data? 54270 2014-02-17 14:08:49 GreenJello I'd think this should work: var formset = new ContactFormFormSet(); JSON.stringify(formset) 54271 2014-02-17 14:09:47 GreenJello you could do it other ways, but then you have to somehow make the changes bubble to the top 54272 2014-02-17 14:11:11 insin lots of other stuff to do before we can get there- currently you need to instantiate a new Form/FormSet object every time you want the data it knows about to change 54273 2014-02-17 14:11:31 GreenJello oh okay 54274 2014-02-17 14:11:53 insin it's still very much the Django API, which was designed for the use case where you'd be creating it once with submitted data 54275 2014-02-17 14:12:51 GreenJello yeah, I have minimal knowledge of Django; but generally React can work the same way 54276 2014-02-17 14:13:28 GreenJello to give it new data, do theMainReactComponent.setProps(theData) 54277 2014-02-17 14:19:40 insin it's currently using uncontrolled components too, but I'm assuming people will want the ability to react instantly to changes. Other stuff that needs to happen is that it can't validate one field at a time, just the whole lot - lots to do :D 54278 2014-02-17 14:21:18 GreenJello heh yeah :-) 54279 2014-02-17 14:21:53 GreenJello I'm working on a form thing too; but much simpler and without any widgets 54280 2014-02-17 14:22:23 GreenJello it essentially lets you define an onChange handler for a whole form, rather than each input 54281 2014-02-17 14:24:32 GreenJello however it works with the duck-type of react's input elements; so not sure if it'll work with your widgets 54282 2014-02-17 14:25:38 GreenJello i.e. the value property is the current value, and onChange calls its property with {target: {value: "the new value"}} 54283 2014-02-17 14:25:58 syranide GreenJello: isn't that just two-way binding? 54284 2014-02-17 14:26:09 GreenJello syranide, essentially yeah 54285 2014-02-17 14:26:16 syranide sounds exactly like it :P 54286 2014-02-17 14:26:19 GreenJello but it's such a pain in React :-) 54287 2014-02-17 14:26:23 syranide is it? 54288 2014-02-17 14:26:30 insin I think there'll eventually be a <BoundField/> component which handles all the details for each field, including event handlers and getting/setting values 54289 2014-02-17 14:26:54 insin right, I can assert against HTML from components which use ref="" now: https://gist.github.com/insin/9005207 54290 2014-02-17 14:26:54 GreenJello syranide, not for one input; but two inputs shouldn't be twice the code; and 10 shouldn't be 10 times the code 54291 2014-02-17 14:27:25 syranide GreenJello: not sure if I follow, you simply do <input valueLink=this.linkState('A') /> etc etc 54292 2014-02-17 14:28:21 syranide and linkState is an addon so you can even implement your own version of it (it simply returns an object with a value and an onChange-handler) 54293 2014-02-17 14:28:50 GreenJello hmm... I guess I'm just writing valueLink with different syntax :-) 54294 2014-02-17 14:29:00 syranide GreenJello: that's what it sounded like :) 54295 2014-02-17 14:31:11 GreenJello syranide, it seems like the only difference is that valueLink only works on React.DOM.input, and components that handle the valueLink property, or no? 54296 2014-02-17 14:31:59 syranide GreenJello: it's an "open standard" so you're free implement it the same way for your own components (and thus be able to use linkState and such helpers too) 54297 2014-02-17 14:33:16 GreenJello and you could also do: var a = this.linkState('A'}; <input value={a.value} onChange={a.onChange} />, right? 54298 2014-02-17 14:33:36 syranide GreenJello: yep, that's basically what it is 54299 2014-02-17 14:33:46 GreenJello ah okay, cool :-) 54300 2014-02-17 14:34:18 syranide and you can substitute linkState with a helper of your own if you want (that binds to your model for instance, etc, etc) 54301 2014-02-17 14:34:46 GreenJello ACTION throws it in the before-I-knew-better pile 54302 2014-02-17 14:34:52 syranide ^^ 54303 2014-02-17 14:38:56 patrio_ If I want to set some properties on a class instance that is not a part of the state and I want to set them by doing an ajax call. What would be the best way of doing that? 54304 2014-02-17 14:42:13 GreenJello patrio_, state would probably be the best way to do that; but besides that you can call this.forceUpdate() to cause a rerender 54305 2014-02-17 15:03:14 murkt hello 54306 2014-02-17 15:03:35 syranide hey 54307 2014-02-17 15:04:09 murkt I'm getting a strange error, tried to reduce a code to minimal http://paste.in.ua/9365/ 54308 2014-02-17 15:04:26 murkt when I'm clicking a button I get Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0 54309 2014-02-17 15:04:45 murkt same happens on react master 54310 2014-02-17 15:04:49 syranide hmm, that's weird 54311 2014-02-17 15:05:21 syranide oh wait, you have mixed up option and select 54312 2014-02-17 15:05:23 syranide perhaps that's the issue 54313 2014-02-17 15:05:37 syranide shouldn't be... but might for some strange reason 54314 2014-02-17 15:06:03 murkt hmm :) 54315 2014-02-17 15:07:04 murkt changed it, and still getting error 54316 2014-02-17 15:07:05 GreenJello murkt, option is only a valid child of <select> and <button> isn't a valid child of <select>, which likely causes the problem in this reduced sample 54317 2014-02-17 15:07:16 GreenJello oh darn 54318 2014-02-17 15:07:34 syranide murkt: try wrapping the render in a div 54319 2014-02-17 15:07:54 syranide I'm not sure, but it's possible that the root-root has to be static 54320 2014-02-17 15:08:17 murkt syranide: 1 sec, will try 54321 2014-02-17 15:08:22 syranide shouldn't be I think, but that could be the issue 54322 2014-02-17 15:08:46 murkt but it's not root-root in my application, it's just that I tried to show you the minimal code 54323 2014-02-17 15:08:51 syranide aha 54324 2014-02-17 15:09:00 syranide then it's really weird 54325 2014-02-17 15:09:34 syranide if you replace either of the returns with a plain <div>, which one is it that causes the issue? 54326 2014-02-17 15:09:50 murkt syranide: Tried to wrap everything in div, still an error 54327 2014-02-17 15:10:49 syranide murkt: I fixed select/option and it works 54328 2014-02-17 15:11:00 syranide oh wait no 54329 2014-02-17 15:11:42 murkt If I stub option/select for DIV it works 54330 2014-02-17 15:11:49 syranide yep... hmm 54331 2014-02-17 15:11:56 GreenJello http://jsbin.com/yugixufu/3/edit 54332 2014-02-17 15:12:10 murkt If I stub button for DIV it doesn't 54333 2014-02-17 15:12:19 murkt btw, it works w/o problems on 0.8.0 54334 2014-02-17 15:12:27 syranide it seems like something's up with select 54335 2014-02-17 15:12:34 GreenJello yeah, or that http://jsbin.com/yugixufu/4/edit 54336 2014-02-17 15:12:56 murkt you have 0.8.0 there, so it works 54337 2014-02-17 15:13:03 GreenJello murkt, it wasn't working initially on 0.8.0 for me 54338 2014-02-17 15:13:23 murkt GreenJello: maybe that's because I messed up with option/select 54339 2014-02-17 15:13:33 GreenJello murkt, yeah you had them backwards 54340 2014-02-17 15:13:47 GreenJello which probably confused the browser; which in turn confuses react 54341 2014-02-17 15:14:46 Timmeh isn't the problem just that you're not supposed to "replace" a root node? and in this example the <button data-reactid=".0" /> is replaced by a <option data-reactid=".0" /> ? 54342 2014-02-17 15:14:56 Timmeh (going by the original example) 54343 2014-02-17 15:14:57 syranide this is really weird 54344 2014-02-17 15:14:58 GreenJello it's like walking around with your skeleton on the outside; a doctor might fix it, but the media won't recognize you once it's fixed :-) 54345 2014-02-17 15:15:06 syranide Timmeh: doesn't work even if you keep the root static 54346 2014-02-17 15:15:12 Timmeh ah 54347 2014-02-17 15:15:49 syranide hmm, inputs break too... what is going on :| 54348 2014-02-17 15:15:50 murkt Timmeh: yeah, it happens in my application with "Two valid but unequal nodes with the same `data-reactid`: .0.0.3.0:0.3.1" 54349 2014-02-17 15:17:16 murkt syranide: you're right, `return React.DOM.input(null, 'Text')` breaks it as well 54350 2014-02-17 15:17:16 syranide something has definitely broken it seems, open an issue if you have the time please :) 54351 2014-02-17 15:17:24 murkt will do 54352 2014-02-17 15:18:20 syranide basically, the issue seems to be that input/select breaks if not inserted during initial rendering 54353 2014-02-17 15:28:13 murkt Am I being clear here https://github.com/facebook/react/issues/1107 ? 54354 2014-02-17 15:30:21 GreenJello murkt "Works flawlessly under React 0.8.0" -> "Works flawlessly on React 0.8.0 and under" 54355 2014-02-17 15:30:49 murkt To be precise, I haven't checked anything under 0.8.0 54356 2014-02-17 15:31:00 GreenJello s/under/on 54357 2014-02-17 15:31:09 murkt ah, thanks 54358 2014-02-17 15:50:24 moniker hey all, what kind of event lib are you all using for cross component communication? 54359 2014-02-17 15:55:06 syranide moniker: you can communicate with the parent through props 54360 2014-02-17 15:55:12 syranide if that's what you mean 54361 2014-02-17 15:55:38 syranide generally you don't need to add any kind of eventbus, but if you're dealing with more complicated cases, then it might be necessary yes 54362 2014-02-17 15:55:44 moniker syranide: yeah, I'm talking outside of a parent<->child relationship 54363 2014-02-17 15:56:29 syranide moniker: right, so unless it needs to be aware of the hierarchy, I'd just have global "event emitters" that components that subscribe to 54364 2014-02-17 15:57:01 syranide alternatively, such an event emitter can be passed up through parent->parent->etc 54365 2014-02-17 15:57:36 moniker syranide: ok, yeah I was going that route, just was curious if anyone had suggestions based on experience 54366 2014-02-17 15:57:44 moniker thx 54367 2014-02-17 15:57:52 syranide moniker: np, I don't (yet) anyway 54368 2014-02-17 15:58:16 GreenJello moniker, whatever seems to make sense! :-) 54369 2014-02-17 15:58:31 syranide (without messing up readability ;)) 54370 2014-02-17 15:58:35 insin ACTION was looking at https://github.com/n1k0/backbone-events-standalone for that, could use any one of the zillions of them, though 54371 2014-02-17 15:58:59 syranide and if you just want a basic event emitter setup, you could do it yourself with a few lines 54372 2014-02-17 15:59:21 GreenJello window.location = "I need to ___".replace("I need to ", "http://gootle.com/search?q=") 54373 2014-02-17 15:59:40 GreenJello .replace("gootle", "google"); 54374 2014-02-17 15:59:56 syranide haha awesome script ^^ 54375 2014-02-17 16:13:07 andreypopp #1108 54376 2014-02-17 16:13:08 reactbotx Issue 1108: Browserify -r react takes almost 7 seconds https://github.com/facebook/react/issues/1108 54377 2014-02-17 16:28:25 yoshuawuyts Hi, how do you call 'preventDefault()' from within a component? 54378 2014-02-17 16:28:48 yoshuawuyts event.preventDefault() used to work, but guess something broke... hah 54379 2014-02-17 16:29:19 syranide yoshuawuyts: should work, have you declared it as a parameter? 54380 2014-02-17 16:29:44 syranide also what browser are you on, we changed it from using returnValue to preventDefault, and it's possible something broke for some older browser 54381 2014-02-17 16:30:10 yoshuawuyts It's most certainly not a problem with React, I just can't figure out the docs too well 54382 2014-02-17 16:30:29 yoshuawuyts I got a clickevent that calls this.clickHandler 54383 2014-02-17 16:30:37 syranide yoshuawuyts: yep 54384 2014-02-17 16:31:10 yoshuawuyts and not sure how to insert preventDefault() in there. 54385 2014-02-17 16:31:17 GreenJello yoshuawuyts, can you paste the click handler? and are there any errors on the console? 54386 2014-02-17 16:31:26 syranide yoshuawuyts: why do you even need it? 54387 2014-02-17 16:31:38 syranide also, clickHandler: function(event) { event.preventDefault(); } 54388 2014-02-17 16:31:52 yoshuawuyts well, to prevent clicks from getting handled... hah 54389 2014-02-17 16:31:55 yoshuawuyts sec, pasting 54390 2014-02-17 16:32:16 syranide note, preventDefault != stopPropagation 54391 2014-02-17 16:32:30 syranide although I'm not sure about the exact differences actually ^^ 54392 2014-02-17 16:33:21 yoshuawuyts https://gist.github.com/yoshuawuyts/9053943 54393 2014-02-17 16:33:56 syranide yoshuawuyts: yeah, you haven't added event to the list of parameters 54394 2014-02-17 16:33:59 syranide in the click handler 54395 2014-02-17 16:34:07 syranide function(name) { should be function(name, event) { 54396 2014-02-17 16:34:20 syranide also no, it's all wrong :) 54397 2014-02-17 16:34:23 GreenJello syranide, if you attach a click handler on a button, and a click handler on the document; if the button's click handler preventsDefault document still sees the error; stopPropagation doesn't prevent the default action, but it prevents the document click handler from firing 54398 2014-02-17 16:34:32 syranide this.clickHandler.bind(null, this.props.name) 54399 2014-02-17 16:35:03 syranide yoshuawuyts: your code right now calls the function *immediately* when rendering it, as opposed to as a callback 54400 2014-02-17 16:35:20 syranide so use bind as above to "bind your value" to the function 54401 2014-02-17 16:36:01 yoshuawuyts Odd, I thought onClick was supposed to delay execution until a click happened 54402 2014-02-17 16:36:22 yoshuawuyts Or am I misinterpreting your meaning? 54403 2014-02-17 16:36:27 syranide yoshuawuyts: yes you are :) 54404 2014-02-17 16:36:32 syranide this.clickHandler != this.clickHandler() 54405 2014-02-17 16:36:40 syranide the first returns the function, the second executes it 54406 2014-02-17 16:36:44 GreenJello yoshuawuyts, paste your code here: http://facebook.github.io/react/jsx-compiler.html 54407 2014-02-17 16:36:46 yoshuawuyts ah! 54408 2014-02-17 16:36:53 syranide this.clickHandler == this.clickHandler.bind("A"); 54409 2014-02-17 16:36:58 syranide loosely speaking 54410 2014-02-17 16:37:08 GreenJello React.DOM.a({href: '/' + this.props.name, onClick: this.clickHandler(this.props.name)}, this.props.name) 54411 2014-02-17 16:38:24 yoshuawuyts What do you mean @GreenJello? I don´t use JSX 54412 2014-02-17 16:38:42 GreenJello oh oops, ignore me I'm tired :-) 54413 2014-02-17 16:39:19 yoshuawuyts haha, thanks for thinking along though :D Testing out if it works (and if I can make sense of binding ´this´) 54414 2014-02-17 16:40:11 syranide oh right, sorry, .bind(null, "A") 54415 2014-02-17 16:40:29 syranide the functions are auto-bound so I believe you can't rebind this (so passing null is ok) 54416 2014-02-17 16:41:09 yoshuawuyts Aye, it looks like it's working 54417 2014-02-17 16:42:28 yoshuawuyts Like a charm actually 54418 2014-02-17 16:42:42 yoshuawuyts Thanks syranide! 54419 2014-02-17 16:49:17 syranide yoshuawuyts: np :) 54420 2014-02-17 16:58:21 dustingetz ANN: ReactJS library for dynamic forms, grids and widgets (with interactive demos) https://news.ycombinator.com/item?id=7252937 54421 2014-02-17 16:58:32 dustingetz @petehunt 54422 2014-02-17 17:27:14 chenglou petehunt: yt 54423 2014-02-17 17:32:11 petehunt chenglou: hey 54424 2014-02-17 17:32:35 petehunt dustingetz: hey, that library looks really excellent 54425 2014-02-17 17:33:16 dustingetz thanks! 54426 2014-02-17 17:35:29 petehunt dustingetz: do you want ReactLink support or did you explicitly avoid it? 54427 2014-02-17 17:36:43 dustingetz i think we abstract further than ReactLink allows (e.g. disabled/validness etc), but I haven't looked at ReactLink since it was released last fall 54428 2014-02-17 17:37:26 dustingetz i think we are more likely to try to decouple from react state entirely though in future iterations 54429 2014-02-17 17:37:56 petehunt dustingetz: i think (not sure) that ReactLink leaves the requestChange() parameter undefined 54430 2014-02-17 17:38:00 petehunt so could work 54431 2014-02-17 17:38:08 dustingetz i'll take another look 54432 2014-02-17 18:07:28 petehunt andreypopp: yt? 54433 2014-02-17 18:07:36 andreypopp petehunt: yep 54434 2014-02-17 18:07:43 petehunt do you use closure compiler w/ react? 54435 2014-02-17 18:07:46 andreypopp nope 54436 2014-02-17 18:08:02 petehunt oh ok. looking for someone who does. i want to run our test suite in advanced mode 54437 2014-02-17 18:08:24 andreypopp I tried but didn't succeed back then...don't remember why though... 54438 2014-02-17 18:08:30 petehunt maybe dnolen_ does? 54439 2014-02-17 18:49:23 syranide petehunt: btw, setStateDeep that you talked about, it was an addon? 54440 2014-02-17 18:49:38 petehunt i havent gotten around to it yet 54441 2014-02-17 18:49:43 petehunt it would be yes 54442 2014-02-17 18:49:58 syranide petehunt: but how do you deal with multiple setStateDeep in the same frame? 54443 2014-02-17 18:50:08 syranide on the same key 54444 2014-02-17 18:50:10 petehunt it isn't setStateDeep() 54445 2014-02-17 18:50:14 syranide aha 54446 2014-02-17 18:50:21 petehunt it is a general deep updater 54447 2014-02-17 18:50:41 petehunt newObj = update(oldObj, {key1: {key2: {$set: 'sup'}}}) 54448 2014-02-17 18:50:55 syranide yep, that makes sense then 54449 2014-02-17 18:50:57 petehunt is like an immutable oldObj.key1.key2 = 'sup' 54450 2014-02-17 18:51:12 petehunt there is also $push, $unshift, $splice, $merge 54451 2014-02-17 18:51:41 syranide oh right, yeah I think I saw your gist about that some time ago 54452 2014-02-17 18:51:44 syranide seemed really sweet 54453 2014-02-17 18:52:26 petehunt i dont really have time for it at this point 54454 2014-02-17 18:52:27 petehunt soon though 54455 2014-02-17 18:52:36 petehunt like it's not gonna make the 0.9 train 54456 2014-02-17 18:54:07 jhjhjhjh is there any possibility of obfuscation/minification of props or state keys? how bad is it to use lots of directly referenced objects in components? 54457 2014-02-17 18:54:34 syranide jhjhjhjh: if you put your heart into it you can use closure compiler to do it 54458 2014-02-17 18:55:43 jhjhjhjh syranide: would it be really bad to use directly referenced objects? i'm wondering this because the angularjs/closure-library style guidelines actually encourages doing this 54459 2014-02-17 18:57:06 syranide petehunt: I'm curious, perhaps it's overanalyzing the problem, but would it make sense to implement it as {$: T.push('...')} etc? making it generic and extendable with different behaviors 54460 2014-02-17 18:57:19 syranide jhjhjhjh: hmm? (not familiar with all the terminologfy) 54461 2014-02-17 18:59:27 petehunt balpert: i don't think #1106 will work http://jsfiddle.net/euH99/ 54462 2014-02-17 18:59:27 reactbotx Issue 1106: Prevent error thrown when removing event target https://github.com/facebook/react/issues/1106 54463 2014-02-17 18:59:54 petehunt at the very least it's dangerous 54464 2014-02-17 19:06:18 petehunt zpao updated my PR 54465 2014-02-17 19:08:15 balpert petehunt: not at my computer but does that log 1, 3, 2? 54466 2014-02-17 19:08:24 petehunt yes 54467 2014-02-17 19:08:49 petehunt this bit me once in ReactUpdates 54468 2014-02-17 19:08:52 balpert I believe it's okay -- the thing to avoid is calling getID on a node that's no longer in the DOM 54469 2014-02-17 19:09:03 petehunt the queue is shared though 54470 2014-02-17 19:09:17 balpert petehunt: oh! 54471 2014-02-17 19:09:18 balpert yes 54472 2014-02-17 19:09:28 balpert I'll need to fix that then 54473 2014-02-17 19:10:18 balpert (TIL our event system needs to be reentrant) 54474 2014-02-17 19:10:25 petehunt balpert: ...and our event system has 0 allocations right now 54475 2014-02-17 19:10:28 petehunt sooo 54476 2014-02-17 19:10:33 balpert petehunt: I know 54477 2014-02-17 19:10:46 petehunt how ya gonna solve it? :) 54478 2014-02-17 19:10:58 petehunt PooledClass? :) 54479 2014-02-17 19:11:08 zpao petehunt: balpert: i'll trust you guys to work this out, and then i'll update the diff 54480 2014-02-17 19:11:47 balpert petehunt: we can pool if that makes you feel better 54481 2014-02-17 19:11:54 petehunt sure does 54482 2014-02-17 19:12:39 balpert also maybe I could avoid it for the common case that there's no ancestor 54483 2014-02-17 20:25:08 baranaby hey all, so I've got a click handler in my component which needs to determine some values and re-sort an array of items that was passed in as a property. I was going to use `replaceProps` but there's a big warning about an anti-pattern if there's a parent, so what's the suggested way to send an event out to the parent after a child has handled a click event? 54484 2014-02-17 20:28:26 baranaby I guess I actually just pass in a click handler as a prop and have all the logic occur in the parent. 54485 2014-02-17 20:42:30 hunterloftis Anyone know if the signature for renderComponentToString() is about to change? I'm looking at source that seems sync, but the docs and current version 0.8 seems to expect a callback 54486 2014-02-17 20:44:01 andreypopp hunterloftis: 0.9.0-rc1 changed it to be sync 54487 2014-02-17 20:44:44 andreypopp hunterloftis: if you use 0.8.0 (current release, should be installed by default when running npm install react) it should accept a callback 54488 2014-02-17 20:44:50 hunterloftis andreypopp: is that published on npm yet or will I need to point to github with my package.json? 54489 2014-02-17 20:45:18 zpao it's published on gh, but must be explicit (react@0.9.0-rc1) 54490 2014-02-17 20:45:19 hunterloftis andreypopp: any reasoning for sync? sync rendering isn't a fantastic node server-side solution unless it's bloody fast 100% of the time 54491 2014-02-17 20:45:52 zpao hunterloftis: it was already actually sync, just took a callback and called it immediately 54492 2014-02-17 20:45:53 andreypopp React's rendering process is sync 54493 2014-02-17 20:46:02 hunterloftis oh okay, that makes sense then 54494 2014-02-17 20:46:23 hunterloftis zpao: care to give me a gist or a line? npm is hanging for some reason when I try to install react from github 54495 2014-02-17 20:46:36 andreypopp npm install react@0.9.0-rc1 54496 2014-02-17 20:46:43 zpao hunterloftis: don't install from gh 54497 2014-02-17 20:46:49 hunterloftis gotcha, thanks guys 54498 2014-02-17 20:47:02 andreypopp hunterloftis: install from gh wouldn't work, repo doesn't contain built js 54499 2014-02-17 20:47:09 zpao np, and good luck 54500 2014-02-17 20:47:48 hunterloftis Loving react so far, we're sold on the client side 54501 2014-02-17 20:47:54 hunterloftis So now I'm building our server-side prerendering. 54502 2014-02-17 20:48:07 hunterloftis The 'postback model' is making it damn simple. 54503 2014-02-17 20:53:51 hunterloftis Any clues why a simple template on the server side would return something other than a ReactComponent? https://gist.github.com/hunterloftis/9058885 54504 2014-02-17 20:54:30 zpao hunterloftis: missing return 54505 2014-02-17 20:54:46 hunterloftis zpao: thanks, still not used to thinking of JSX as JS. 54506 2014-02-17 20:54:55 zpao you'll get there :) 54507 2014-02-17 21:34:21 benjamn andreypopp: yt? 54508 2014-02-17 21:34:31 benjamn trying to reproduce the results in https://github.com/facebook/react/issues/1108 54509 2014-02-17 21:36:05 zpao benjamn: i can repro (was commenting but browser crashed) 54510 2014-02-17 21:36:07 benjamn what's the command? 54511 2014-02-17 21:36:12 benjamn (zpao) 54512 2014-02-17 21:36:23 zpao what you had. i started with 2 fresh dirs and npm install react@0.8.0 in one, react0.9.0-rc1 in the other 54513 2014-02-17 21:37:15 zpao what's your browserify version? 54514 2014-02-17 21:37:18 benjamn 2.34.3 54515 2014-02-17 21:37:57 zpao mine is saying 2.25.x even though i just installed again (and it's at 3.something 54516 2014-02-17 21:39:43 benjamn how does `browserify -r react` involve envify? 54517 2014-02-17 21:39:45 benjamn confused 54518 2014-02-17 21:41:11 zpao when it acts on react 54519 2014-02-17 21:41:33 zpao https://github.com/facebook/react/blob/master/npm-react/package.json#L32-L34 54520 2014-02-17 21:42:29 benjamn zpao: so this only applies when npm installing react? 54521 2014-02-17 21:42:38 zpao right 54522 2014-02-17 21:45:46 benjamn zpao: how do you npm install the 0.9.0-rc1 version if it's not on NPM already? 54523 2014-02-17 21:45:53 zpao it's on npm 54524 2014-02-17 21:46:05 zpao npm install react@0.9.0-rc1 54525 2014-02-17 21:47:46 benjamn zpao: that command takes like 4s for me, and it's all normal NPM stuff 54526 2014-02-17 21:47:57 zpao the install isn't the slow part 54527 2014-02-17 21:48:05 zpao browserifying that package 54528 2014-02-17 21:48:26 benjamn ahhh 54529 2014-02-17 21:48:38 zpao mkdir /tmp/r; cd /tmp/r/; npm install react@0.9.0-rc1; time browserify -r react > /dev/null 54530 2014-02-17 21:48:43 benjamn I got it 54531 2014-02-17 21:48:49 zpao ? 54532 2014-02-17 22:35:07 andreypopp benjamn: I was using recast for xcss (css to js compiler) and also hit the slowspot in recast.print (maybeReprint() as I remember from profiling logs) 54533 2014-02-17 22:38:05 benjamn andreypopp: yeah, a lot of stuff happens under maybeReprint 54534 2014-02-17 22:38:21 benjamn it's an area for improvement that I'm very interested in 54535 2014-02-17 22:39:46 andreypopp benjamn: that would be cool, I really like recast 54536 2014-02-17 22:39:49 benjamn the real bottleneck seems to be maintaining NodePath information while traversing the AST, 54537 2014-02-17 22:40:49 benjamn andreypopp: thanks, and thanks for the reminder to keep looking into this 54538 2014-02-17 22:41:02 benjamn I think jstransform is the right tool for envify though 54539 2014-02-17 23:07:57 balpert zpao: updated #1106 54540 2014-02-17 23:07:58 reactbotx Issue 1106: Prevent error thrown when removing event target https://github.com/facebook/react/issues/1106 54541 2014-02-18 00:05:05 inkwellian Hey everybody. Playing with the RC and have a couple of questions... 54542 2014-02-18 00:05:24 inkwellian The first has to do with the warning: "You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. " 54543 2014-02-18 00:06:36 inkwellian I'm working on a form-heavy app, and the way I was handling it in 0.8 was to not add onChange to every single field but to the form above it. 54544 2014-02-18 00:06:48 balpert ahh 54545 2014-02-18 00:06:53 inkwellian Letting event bubbling do it's job. 54546 2014-02-18 00:07:06 balpert inkwellian: good point. 54547 2014-02-18 00:07:23 inkwellian So I take it that I'm not crazy to want to do that? :) 54548 2014-02-18 00:08:00 inkwellian Seems to still work in the RC, just getting a ton of warnings. 54549 2014-02-18 00:08:17 inkwellian Can I safely ignore them at this point? Bubbling is going to continue to be supported? 54550 2014-02-18 00:08:59 balpert I think so 54551 2014-02-18 00:09:22 balpert that was meant to stave off all the people who come and ask why their inputs aren't changing :) 54552 2014-02-18 00:09:27 inkwellian cool. 54553 2014-02-18 00:09:44 inkwellian hah, yeah I get that. It does take a little while to grok what's happening. 54554 2014-02-18 00:10:57 inkwellian The other question has to do with statics... Are there any docs on them yet? Is there a good place for me to start deciding when and where I might need 'em? 54555 2014-02-18 00:11:13 balpert https://gist.github.com/sebmarkbage/8928067 is the most docs we have I think 54556 2014-02-18 00:12:22 balpert inkwellian: mind filing an issue on github for the spurious warning? 54557 2014-02-18 00:21:20 inkwelli_ Thanks! 54558 2014-02-18 00:21:48 inkwelli_ Sure, I can do that. 54559 2014-02-18 00:22:10 balpert petehunt: #1106 54560 2014-02-18 00:22:11 reactbotx Issue 1106: Prevent error thrown when removing event target https://github.com/facebook/react/issues/1106 54561 2014-02-18 00:23:03 petehunt balpert: hrm, do we need to try/finally then? 54562 2014-02-18 00:23:18 balpert petehunt: it'll just get GCed 54563 2014-02-18 00:23:28 petehunt if we do, we should move the try/finally to its own function to avoid the deopt 54564 2014-02-18 00:23:50 balpert it just won't be re-pooled 54565 2014-02-18 00:25:07 balpert I can add the try/finally if you prefer though 54566 2014-02-18 00:26:35 petehunt i think the try/finally would be better. but at that point should we use a Transaction? 54567 2014-02-18 00:26:46 petehunt try finally i think is fine 54568 2014-02-18 00:26:55 petehunt i would prefer if it were its own function to avoid the deopt though 54569 2014-02-18 00:27:23 balpert just the for loop in its own function, yeah? 54570 2014-02-18 00:27:28 balpert this function doesn't do very much anyway 54571 2014-02-18 00:27:49 petehunt yea 54572 2014-02-18 00:27:59 petehunt better safe than sorry though 54573 2014-02-18 00:28:02 balpert yup 54574 2014-02-18 00:29:19 balpert we should really change this so that the capture/bubble order is correct with nested roots 54575 2014-02-18 00:33:02 balpert petehunt: updated 54576 2014-02-18 00:33:07 balpert function naming suggestions accepted 54577 2014-02-18 00:34:47 petehunt why not move the ancestor loop in too 54578 2014-02-18 00:35:05 inkwelli_ balpert: https://github.com/facebook/react/issues/1118 54579 2014-02-18 00:35:37 balpert petehunt: hmm I could do that I guess 54580 2014-02-18 00:37:21 inkwelli_ I am curious about getting the mounted instance from a static method. Maybe if I need that, I shouldn't be using a static method? 54581 2014-02-18 00:37:31 balpert petehunt: updated again 54582 2014-02-18 00:37:32 balpert inkwelli_: hmm? 54583 2014-02-18 00:37:51 petehunt k ill pull in 54584 2014-02-18 00:41:01 inkwelli_ In 0.8 I implemented a way of handling Bootstrap (oh the horror!) modals and popovers via mixins and separate React.renderComponent madness. It worked quite nicely, but I'm getting a lot of those warnings about using statics instead. 54585 2014-02-18 00:41:54 inkwelli_ I'm thinking I'm just gonna need to rethink the way I handled it. 54586 2014-02-18 00:41:59 balpert inkwelli_: it's not clear to me what you're doing but if you're getting the warning then I believe your app will break in the future 54587 2014-02-18 00:42:04 balpert inkwelli_: here's a popover component I made http://stackoverflow.com/questions/20033522/rendering-a-react-component-inside-a-bootstrap-popover 54588 2014-02-18 00:42:38 balpert inkwelli_: (though I would probably use pure React instead of hacking the bootstrap JS for that) 54589 2014-02-18 00:43:47 balpert inkwelli_: also you can do something like http://jsfiddle.net/LBAr8/ for modals and popovers 54590 2014-02-18 00:45:04 inkwelli_ balpert: That's very interesting. I'll have a look at that. 54591 2014-02-18 00:45:26 inkwelli_ balpert: In fact, I am using your popover monkey-patch. :) 54592 2014-02-18 00:46:04 inkwelli_ balpert: Thanks for the help 54593 2014-02-18 00:46:26 balpert inkwelli_: no problem -- let me know if I can help with anything else 54594 2014-02-18 00:46:40 inkwelli_ will do, thanks 54595 2014-02-18 00:49:45 insin This isn't an original thought but... fuck you, <p>! 54596 2014-02-18 00:49:49 petehunt ok i pulled it in internally 54597 2014-02-18 00:49:52 petehunt ya, <p> sucks 54598 2014-02-18 00:50:29 balpert petehunt: cool thanks. just sent https://github.com/petehunt/react-touch-lib/pull/1 for #1119 54599 2014-02-18 00:50:30 reactbotx Issue 1119: ReactEventEmitter error after upgrade to react 0.9.0-rc1 https://github.com/facebook/react/issues/1119 54600 2014-02-18 00:50:40 petehunt repleid 54601 2014-02-18 00:51:14 balpert replied 54602 2014-02-18 00:53:16 balpert petehunt: is warning supposed to warn only in dev? 54603 2014-02-18 00:53:23 petehunt i dont know 54604 2014-02-18 00:53:24 balpert or are callers supposed to check? 54605 2014-02-18 00:53:35 balpert the min build has warning stuff in it 54606 2014-02-18 01:02:13 balpert petehunt: you could put perf in addons 54607 2014-02-18 01:02:18 balpert if that makes you feel any better 54608 2014-02-18 01:02:47 petehunt balpert: maybe 54609 2014-02-18 01:02:53 petehunt did you see my weekend hack https://github.com/petehunt/react-routing-experiments/blob/master/spec/test.spec.js 54610 2014-02-18 01:05:27 phated_ petehunt: i was just thinking about a react router this morning 54611 2014-02-18 01:05:28 balpert I didn't 54612 2014-02-18 01:12:19 balpert petehunt: the composability thing there is cool 54613 2014-02-18 01:13:53 petehunt yea 54614 2014-02-18 01:13:58 petehunt works on server too 54615 2014-02-18 01:19:36 andreypopp petehunt: cool! I thought of chainable routers (like Pyramid's/Zope's traversal) but didn't get to implement this 54616 2014-02-18 01:20:30 andreypopp checkout my weekend hack — https://github.com/andreypopp/react-stylesheet 54617 2014-02-18 01:20:49 andreypopp works on server too :p 54618 2014-02-18 01:30:48 balpert zpao: #1122 what you had in mind? 54619 2014-02-18 01:30:49 reactbotx Issue 1122: Strip calls to warning() in __DEV__ https://github.com/facebook/react/issues/1122 54620 2014-02-18 01:31:10 zpao bahhhh should have coordinated 54621 2014-02-18 01:31:31 balpert lol 54622 2014-02-18 01:31:48 zpao i have almost the same thing. except it still warns in prod. probably shouldn't 54623 2014-02-18 01:35:27 zpao balpert: eh, i think this is good, probably just module.exports = emptyFunction? not going to matter in real life since it's all minified 54624 2014-02-18 01:36:02 balpert okay 54625 2014-02-18 01:37:20 balpert updated 54626 2014-02-18 02:10:17 nonuby can someone confirm that the first time a component is render that reactjs constructs its shadow dom from the actual real DOM (thus enabling server side rendering possibility) and then from there on out it never reads from the real dom 54627 2014-02-18 02:11:54 zpao nonuby: serverside rendering works with checksums to ensure the output of the first render pass on the client matches what was provided by the server 54628 2014-02-18 02:11:56 waqas nonuby: I believe it builds the shadow DOM as normal, but if the data-reactid of existing stuff in the DOM matches the data-reactid it would have generated, then it uses the existing stuff. 54629 2014-02-18 02:12:53 nonuby ah i see, thanks. 54630 2014-02-18 02:13:04 zpao but yes, after that it (mostly?) won't read from the dom again 54631 2014-02-18 02:14:41 waqas It would mainly install DOM handlers, and assume that the existing DOM is what it's supposed to be (undefined behavior if it isn't?) 54632 2014-02-18 02:15:56 zpao yea. if you modify the dom from under react, things might break or get weird 54633 2014-02-18 02:23:03 hunterloftis Is there a typical / standardized way that people are using react on the server right now? 54634 2014-02-18 02:23:19 hunterloftis I just started writing https://github.com/hunterloftis/server-jsx and I don't want to reinvent the wheel. 54635 2014-02-18 02:26:43 zpao hunterloftis: we've been recommending https://github.com/andreypopp/react-quickstart recently. might be more than you need 54636 2014-02-18 02:28:07 hunterloftis zpao: thanks, that's almost exactly what I've got already 54637 2014-02-18 02:28:36 hunterloftis zpao: andreypopp: what is react-async? And is it a standard thing? Right now my renderComponentToString is sync because of v0.9 54638 2014-02-18 02:39:54 insin Woo, first proper use of newforms with React - {this.state.form.render()} - http://bl.ocks.org/insin/raw/9063570/ :) 54639 2014-02-18 03:02:03 dlau I made a react with koa on the server side example for a buddy here: https://github.com/dlau/react-example-koa any big errors? 54640 2014-02-18 03:03:49 petehunt dlau: 0.9 is coming out this week 54641 2014-02-18 03:03:56 petehunt and renderComponentToString() is becoming sync 54642 2014-02-18 03:04:01 petehunt just a heads up 54643 2014-02-18 03:04:07 Croms Is there a way to stop React from calling render when the model isn't yet loaded? 54644 2014-02-18 03:04:09 dlau ah ok 54645 2014-02-18 03:06:03 dlau petehunt: is renderComponentToString not implemented with any context switching code anyway? 54646 2014-02-18 03:06:09 petehunt nope 54647 2014-02-18 03:06:11 petehunt it's synchronous 54648 2014-02-18 03:06:14 petehunt for real 54649 2014-02-18 03:06:15 dlau ah ok 54650 2014-02-18 03:06:20 dlau so theres no real difference 54651 2014-02-18 03:06:22 petehunt the async is a fakeout, in case we wanted to change it in the future 54652 2014-02-18 03:06:29 petehunt it's actually sync today, just takes a callback for no reason 54653 2014-02-18 03:06:43 dlau alright got it 54654 2014-02-18 03:22:42 hunterloftis Is there a straightforward way to use andreypopp's router component with some state machine type logic? eg, "on /app/private route, if (!user) redirectTo(/login)?" 54655 2014-02-18 03:23:14 hunterloftis I guess that could be a separate component as well 54656 2014-02-18 04:03:36 nwienert andreypopp: i notice getRootComponent() in react-stylesheets, does that allow the root component to wait until children do something before rendering? 54657 2014-02-18 04:04:06 nwienert if so, i'm curious if that method would work well for the <title> tag in a root component as well 54658 2014-02-18 04:06:03 rcs nwienert: https://github.com/andreypopp/react-stylesheet/blob/7400aa10dcd995950e0f4d48e8503bf3455d22f1/ReactStylesheetMixin.js#L59-L64 54659 2014-02-18 04:06:12 rcs nwienert: Looks like it just moves up the tree to find a thing that doesn't have an owner 54660 2014-02-18 04:12:51 chenglou ^ I like this repo a lot. Lots of potential 54661 2014-02-18 04:13:16 chenglou of course ideally we'll just write css in js obj all the time lol 54662 2014-02-18 04:13:19 nwienert yea there is an example that has server rendering 54663 2014-02-18 04:13:41 nwienert but wondering if the child component with a stylesheet at server time will pass that up to the root before the root renders 54664 2014-02-18 04:13:56 nwienert or does the child just add it once it runs in the browser 54665 2014-02-18 04:14:04 nwienert will have to check into that 54666 2014-02-18 04:14:10 nwienert pretty cool stuff 54667 2014-02-18 04:14:49 chenglou nwienert: it patches renderComponentToString 54668 2014-02-18 04:16:35 oxum 3 54669 2014-02-18 05:20:28 45PAAGS3Z https://news.ycombinator.com/item?id=7255227 54670 2014-02-18 05:20:33 vjeux https://news.ycombinator.com/item?id=7255227 54671 2014-02-18 05:20:45 vjeux 17 mentions of react, success :) 54672 2014-02-18 05:24:24 balpert 45PAAGS3Z? 54673 2014-02-18 05:37:15 vjeux balpert: i have no idea :x 54674 2014-02-18 06:06:23 dnolen_ wow big speed boost for Om under React 0.9-rc1 :) 54675 2014-02-18 06:06:44 petehunt dnolen_: sounds about right. got any numbers? 54676 2014-02-18 06:07:17 petehunt i think our child reconciliation optimization is probably saving Om a lot of time 54677 2014-02-18 06:07:29 dnolen_ petehunt: not hard numbers, but Chrome to render 200 todos was ~100ms with 0.8 54678 2014-02-18 06:07:33 dnolen_ ~60ms with 0.8 54679 2014-02-18 06:07:37 dnolen_ er 0.9-rc1 54680 2014-02-18 06:07:40 petehunt woo 54681 2014-02-18 06:07:42 dnolen_ that's for the first render 54682 2014-02-18 06:07:49 petehunt oh wow 54683 2014-02-18 06:07:53 dnolen_ yeah :) 54684 2014-02-18 06:08:06 balpert not sure what we changed :\\ 54685 2014-02-18 06:08:06 petehunt most of the optimizations we did were for *updates* 54686 2014-02-18 06:08:32 petehunt we may be easier to JIT now 54687 2014-02-18 06:08:45 petehunt because we fixed a bunch of undefined property accesses 54688 2014-02-18 06:08:55 balpert true 54689 2014-02-18 06:09:00 petehunt dnolen_: be sure to tweet :) 54690 2014-02-18 06:09:07 dnolen_ don't worry I will 54691 2014-02-18 06:09:10 dnolen_ 60ms is pretty wild 54692 2014-02-18 06:09:13 balpert we can wait for 0.9 to come out 54693 2014-02-18 06:09:45 dnolen_ fixing Om for 0.9 was deliciously simple 54694 2014-02-18 06:09:50 dnolen_ React rocks! 54695 2014-02-18 06:10:30 petehunt dnolen_: what'd you have to change? 54696 2014-02-18 06:11:00 dnolen_ we have delegate methods for life cycle protocols, so had to drop root node parameters 54697 2014-02-18 06:11:10 petehunt ah yeah 54698 2014-02-18 06:11:18 petehunt also renderComponentToString() is now sync, if you depend on that 54699 2014-02-18 06:11:23 dnolen_ and our component now passes children as explicit children property on props instead of as second arg 54700 2014-02-18 06:11:25 dnolen_ that's it 54701 2014-02-18 06:11:35 dnolen_ yep renderComponentToString works great 54702 2014-02-18 06:11:38 balpert dnolen_: was that necessary? 54703 2014-02-18 06:11:57 dnolen_ balpert: according to sebastien yes 54704 2014-02-18 06:16:26 waqas What was the rationale for not passing the rootNode to componentDidMount/Update? 54705 2014-02-18 06:16:45 petehunt waqas: it's already available in getDOMNode() 54706 2014-02-18 06:17:11 petehunt waqas: if you have componentDidMount() and you don't need the DOM node, you still pay the cost of looking up the DOM node if it's passed as a parameter 54707 2014-02-18 06:17:26 petehunt by removing it we're able to boost perf by not touching the DOM unless you actually ask for the node 54708 2014-02-18 06:18:01 waqas I don't mind, I just kind of assumed that using the DOM node would be the main reason most would be interested in componentDidMount in the first place 54709 2014-02-18 06:18:31 balpert waqas: lots of people send off ajax requests 54710 2014-02-18 06:18:42 waqas Aha, that makes sense 54711 2014-02-18 06:18:52 waqas I even wrote code which does that :P 54712 2014-02-18 07:21:55 ispartan I am trying to add a query plugin to a react component 54713 2014-02-18 07:22:17 ispartan i remember we can not use "class" in the jsx template 54714 2014-02-18 07:22:29 ispartan is there a rule for id too? 54715 2014-02-18 07:22:54 ispartan in the componentDidMount method i am attaching a query plugin 54716 2014-02-18 07:23:11 ispartan $("#id").<plugin>() 54717 2014-02-18 07:23:30 ispartan and in render i have template that has <div id="id"></div> 54718 2014-02-18 07:23:36 ispartan is it the right approach? 54719 2014-02-18 07:23:41 jonathanj the reason you can't use "class" is because it's a reserved word in ECMAScript, id is not a reserved word 54720 2014-02-18 07:23:59 ispartan k 54721 2014-02-18 07:24:19 ispartan is the approach correct? 54722 2014-02-18 07:24:24 ispartan with id 54723 2014-02-18 07:24:25 ispartan ? 54724 2014-02-18 07:25:50 balpert no need for the ID, just return an empty div 54725 2014-02-18 07:25:57 balpert then $(this.getDOMNode()).plugin() 54726 2014-02-18 07:26:33 ispartan humm, but i don't want to attach the plugin to the whole dom node 54727 2014-02-18 07:27:07 balpert ispartan: http://facebook.github.io/react/docs/working-with-the-browser.html#refs-and-getdomnode 54728 2014-02-18 07:34:59 ispartan balpert: exactly what i was looking 54729 2014-02-18 07:35:00 ispartan thanks 54730 2014-02-18 07:35:19 balpert ispartan: no problem 54731 2014-02-18 07:49:06 rcs Contexts need some doc love somewhere. 54732 2014-02-18 07:49:59 balpert rcs: intentionally undocumented for now; they might be changed completely 54733 2014-02-18 07:50:58 rcs balpert: Gotcha. Thanks. Was looking through petehunt's routing code and ran across them being used in such a loving fashion that it led me on a code chase. 54734 2014-02-18 07:51:12 petehunt they're sort of mind bending 54735 2014-02-18 07:51:43 rcs balpert: Are there public conversations about them anywhere? 54736 2014-02-18 07:52:02 andreypopp hunterloftis: renderComponentToString being async in react-async is sort of "feature", it makes it truly async 54737 2014-02-18 07:52:06 balpert rcs: not that I know of; I've never used them 54738 2014-02-18 08:20:43 hareth hello 54739 2014-02-18 08:20:49 tarkus What is a recommended library for routing in a browser? 54740 2014-02-18 08:24:15 chenglou hareth: hello! 54741 2014-02-18 08:24:34 chenglou tarkus: http://facebook.github.io/react/docs/complementary-tools.html#routing 54742 2014-02-18 08:25:19 tarkus chenglou, this director lib works in both browser and node.js.. what if i need only browser routing, wouldn't it be an overkill 54743 2014-02-18 08:26:23 hareth =) 54744 2014-02-18 08:26:33 hareth that's react-rooter seems cool 54745 2014-02-18 08:27:20 krs tarkus: they have the browser-only minified dist for that 54746 2014-02-18 08:27:45 chenglou tarkus: humm I don't feel it's an overkill, but here's another one 54747 2014-02-18 08:28:06 tarkus krs: where is it? 54748 2014-02-18 08:28:08 chenglou https://github.com/visionmedia/page.js 54749 2014-02-18 08:28:32 tarkus krs: this one? https://github.com/flatiron/director/blob/master/build/director.js 54750 2014-02-18 08:28:35 krs tarkus: https://github.com/flatiron/director#client-side-routing 54751 2014-02-18 08:28:51 krs last row of that part 54752 2014-02-18 08:32:03 tarkus Do you think it is practical to render all the HTML on a client? For example Twitter went away from this route because of performance issues 54753 2014-02-18 08:32:53 balpert tarkus: instagram.com does it and they're plenty fast 54754 2014-02-18 08:33:13 balpert tarkus: React is designed to make it easy to add server rendering later though 54755 2014-02-18 08:33:26 balpert just call React.renderComponentToString on the server, no need to really change your components 54756 2014-02-18 08:33:48 tarkus as far as i understand, instagram.com is not an SPA.. since many of its pages requrie full page reload, right? 54757 2014-02-18 08:33:56 balpert (assuming you can run node on your servers) 54758 2014-02-18 08:34:30 balpert not 100% sure on that 54759 2014-02-18 08:34:40 balpert on whether instagram is an SPA I mean 54760 2014-02-18 08:35:00 petehunt it is spa 54761 2014-02-18 08:35:03 tarkus I'm wondering, is there a way to call React.renderComponentToString from .NET (without relying on node.js) 54762 2014-02-18 08:35:46 balpert tarkus: I'm not familiar with .NET but http://stackoverflow.com/q/172753/49485 makes it look like there are ways to include V8 54763 2014-02-18 08:36:06 Timmeh from what I gathered (I made an instagram account when I started looking into React >_>), the only time instagram completely reloads is when it goes from http to https or the other way around 54764 2014-02-18 08:36:10 tarkus @petehunt, for example when I click on View Profile, then Edit Profile and other pages.. it causes full page reload 54765 2014-02-18 08:36:18 petehunt not all of it is spa 54766 2014-02-18 08:36:27 petehunt feed/photo pages/profiles are 54767 2014-02-18 08:36:42 Timmeh from view to edit, it goes from http to https, right? 54768 2014-02-18 08:36:51 petehunt thats one thing 54769 2014-02-18 08:36:56 petehunt the other thing is we never update it and a designer built it 54770 2014-02-18 08:37:35 hunterloftis Yeah instagram's web interface isn't really the best example of anything. It gets a minimal job done but I'm more impressed with the piecemeal application of react on facebook proper. 54771 2014-02-18 08:38:09 tarkus i'm trying to create an SPA template based on React, Directory plus .NET/F# on the back-end (instead of Node.js) 54772 2014-02-18 08:38:21 tarkus *Director 54773 2014-02-18 08:39:19 hunterloftis tarkus: react doesn't care about a back-end unless you're trying to render server side as well as client-side 54774 2014-02-18 08:39:43 hunterloftis (in which case I'm not sure why you'd go with .NET instead of node... kind of making more work for yourself) 54775 2014-02-18 08:41:56 Timmeh the issue is most probably that there's a piece of software he'd like to integrate it in 54776 2014-02-18 08:45:27 tarkus Do you prefer your JSX components have regular .js file extensions? 54777 2014-02-18 08:45:34 tarkus ..or .jsx 54778 2014-02-18 08:46:20 balpert I use .jsx; I'd like for React to switch to that everywhere 54779 2014-02-18 08:46:32 balpert more consistent with every other preprocessed language in existence :) 54780 2014-02-18 08:47:08 hunterloftis .jsx here too, same reason. it isn't js. 54781 2014-02-18 08:47:11 balpert (and to require the docblock) 54782 2014-02-18 08:47:48 balpert er, to *not* require the docblock 54783 2014-02-18 08:48:12 tarkus for example if files are orgonized by type in a small spa project.. where you have .js files inside /js/ folder.. where do you put your .jsx files? 54784 2014-02-18 08:48:58 balpert my folder structure looks like javascript/shared-package/pageutil.js and we put .jsx in the same place 54785 2014-02-18 08:57:21 tarkus As far as I understand React works with browserify out of the box? Or is there a better alternative to browserify out there? 54786 2014-02-18 09:05:15 andreypopp tarkus: .jsx, I use reactify and it inserts @jsx docblock for files .jsx extensions automatically 54787 2014-02-18 09:05:37 andreypopp tarkus: some prefer webpack 54788 2014-02-18 09:06:08 andreypopp tarkus: React works w/ browserify out of the box, if you want to use JSX, then you need a transform — browserify -t reactify ... 54789 2014-02-18 09:06:10 balpert andreypopp: that recently confused some people at KA when reactify transformed it but our linter didn't 54790 2014-02-18 09:06:38 andreypopp balpert: what linter? I remember adding .jsx support for jsxhint... 54791 2014-02-18 09:06:59 andreypopp balpert: https://github.com/CondeNast/JSXHint/commit/a1564481ba254b6449486f660bceee7cd5aa65e5 54792 2014-02-18 09:07:16 balpert andreypopp: oh, we have our own that lints python, js, and jsx: https://github.com/Khan/khan-linter/blob/master/runlint.py#L410-L504 54793 2014-02-18 09:07:37 balpert it just runs the jsx binary over it then jshint 54794 2014-02-18 09:08:02 andreypopp ah, ok 54795 2014-02-18 09:08:11 abrkn i'm doing: this.setState({ x: { ... }}). how can i have it only cause a render if it's different with deep equal? 54796 2014-02-18 09:08:26 syranide abrkn: shouldComponentUpdate 54797 2014-02-18 09:08:40 petehunt watch yourself with that deep equal though 54798 2014-02-18 09:08:51 andreypopp balpert: also, I've seen eslint recently, it works on esprima AST, so maybe it's a good idea to try to use it instead and replace esprima with esprima-fb 54799 2014-02-18 09:08:59 andreypopp we can write custom lint rules for JSX then 54800 2014-02-18 09:09:36 balpert andreypopp: ah yes. doesn't help with whitespace but I guess you should be able to catch everything else 54801 2014-02-18 09:10:29 abrkn petehunt: how so 54802 2014-02-18 09:10:41 petehunt they can be slower than just re-rendering everything 54803 2014-02-18 09:10:58 petehunt a lot of times you're rendering a subset of your total data 54804 2014-02-18 09:11:18 abrkn ok 54805 2014-02-18 09:18:10 stevoland hi, i'd like to move the builds of react-bootstrap to https://github.com/reactjs. is this possible? 54806 2014-02-18 09:18:28 petehunt stevoland: ooo, it's ready!? :) 54807 2014-02-18 09:18:39 petehunt yeah, can you file a GH issue on the react repo? 54808 2014-02-18 09:18:47 stevoland no, but we're making progress 54809 2014-02-18 09:19:11 stevoland and we want to split bower + npm builds from the source 54810 2014-02-18 09:19:20 stevoland cool, thanks 54811 2014-02-18 09:20:41 stevoland petehunt: we need to know about Layers! 54812 2014-02-18 09:20:51 petehunt stevoland: i wrote half the blog post 54813 2014-02-18 09:20:58 petehunt did you see my fiddle thing 54814 2014-02-18 09:21:15 stevoland is it the skinning one? 54815 2014-02-18 09:21:28 stevoland I'll proof-read your post! :) 54816 2014-02-18 09:21:36 petehunt not the skinning one, but i think that one is cool 54817 2014-02-18 09:21:48 balpert stevoland: https://twitter.com/floydophone/status/434493552714711041 54818 2014-02-18 09:21:58 petehunt how did you find that 54819 2014-02-18 09:22:33 balpert twitter.com/floydophone, page down, cmd-f layers 54820 2014-02-18 09:23:08 petehunt wtf, tried that 54821 2014-02-18 09:23:27 balpert you need to go to the end so that it loads more 54822 2014-02-18 09:25:01 petehunt i did 54823 2014-02-18 09:25:09 balpert ACTION shrugs 54824 2014-02-18 09:26:05 stevoland ace! 54825 2014-02-18 09:27:15 andreypopp layers looks nice! 54826 2014-02-18 09:32:12 tarkus react 0.9.0 RC is not on npm yet? 54827 2014-02-18 09:32:20 balpert it is, version 0.9.0-rc1 54828 2014-02-18 09:32:27 balpert but you won't get it if you just npm install react 54829 2014-02-18 09:32:31 balpert you need to ask for that version explicitly 54830 2014-02-18 09:33:08 petehunt react@0.9.0-rc1 54831 2014-02-18 09:33:10 tarkus Heh, npmjs.org doesn't list available versions on their site (as opposed to NuGet) 54832 2014-02-18 09:34:33 andreypopp tarkus: use "npm info react" command for that, it's somewhere in JSON output 54833 2014-02-18 10:03:53 tarkus When you use browserify ..var React = require('react'); ... does it emded React library into the output/bundled .js file? 54834 2014-02-18 10:10:15 syranide tarkus: by default, yes ... I think 54835 2014-02-18 10:15:13 andreypopp tarkus: it does 54836 2014-02-18 10:16:07 andreypopp tarkus: you can use browserify --list ... to check that 54837 2014-02-18 10:16:28 tarkus is it a good idea to emded react lib alone with your custom code during bundling and minimization? or its recommended to load react.js from facebook CDN instead? 54838 2014-02-18 10:17:29 tarkus what would you do by default (in a project template) 54839 2014-02-18 10:18:00 tarkus for example, in HTML5 Boilerplate they decided to have jQuery referenced from Google's CDN.. 54840 2014-02-18 10:22:09 syranide tarkus: long-term bundling react with your code means that it redundant/unused code can be removed 54841 2014-02-18 10:22:16 syranide *long-term, 54842 2014-02-18 10:22:30 syranide if you use say closure compiler 54843 2014-02-18 10:22:40 syranide how much that is actually worth I don't know 54844 2014-02-18 10:23:00 tarkus wow, the output file which browserify produces is larger than 500kb (not-minified) 54845 2014-02-18 10:23:10 syranide lots of comments 54846 2014-02-18 10:25:25 tarkus i was hoping that browserify would strip off redundant/unused code..:) 54847 2014-02-18 10:25:57 syranide tarkus: nope, it's also really complex in practice, using closure compiler to do it requires that you follow a bunch of rules 54848 2014-02-18 10:26:31 syranide and I'm not sure how well it does it anyway, haven't tried it 54849 2014-02-18 10:26:47 tarkus browserify compiles react in like 6 seconds.. 54850 2014-02-18 10:27:19 syranide tarkus: there's an issue about it, some depedency that updated that caused it 54851 2014-02-18 10:31:15 andreypopp tarkus: yeah, if you are using rc1, it's way long 54852 2014-02-18 10:31:41 andreypopp tarkus: you can try npm install http://react.zpao.com/builds/master/latest/react.tgz 54853 2014-02-18 10:31:58 andreypopp it should be around 1.3 secs 54854 2014-02-18 10:32:10 andreypopp ^ a nightly build 54855 2014-02-18 10:32:23 tarkus cool 54856 2014-02-18 10:32:57 petehunt thats npm? 54857 2014-02-18 10:36:21 andreypopp it is 54858 2014-02-18 10:39:54 tarkus If I don't want browserify to emded React into a bundled script, i just shouldn't have var React = require('react') on top of the file, right? pretending that React is in global namespace 54859 2014-02-18 10:42:20 andreypopp tarkus: you can still do that and use browserify-shim — related section in docs https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global 54860 2014-02-18 10:42:35 andreypopp tarkus: it is useful when you have to run the same code on server and in browser 54861 2014-02-18 10:42:53 andreypopp in browser it would use CDN version, but in Node — one from npm 54862 2014-02-18 10:54:25 tarkus Trying to configure browserify shim.. but getting an error: module "./ge" not found from react-0.8.0.js 54863 2014-02-18 10:58:13 tarkus Error: module "./CSSProperty" not found from react-0.9.0-rc1.js 54864 2014-02-18 10:59:01 tarkus browserify({ ..., shim: { react: { path: '/react-0.9.0-rc1.js', exports: 'React' } }) 54865 2014-02-18 11:00:10 andreypopp tarkus: oh... this is because there are require calls inside CDN build and this confuses browserify 54866 2014-02-18 11:02:05 andreypopp tarkus: wait... it should not parse React at all 54867 2014-02-18 11:02:17 andreypopp tarkus: I think you need to configure browserify-shim via package.json 54868 2014-02-18 11:02:29 tarkus i'm using gulp-browserify.. 54869 2014-02-18 11:03:08 andreypopp oh... 54870 2014-02-18 11:03:53 andreypopp tarkus: gulp-browserify uses old version of browserify-shim (2.x) which doesn't have that feature 54871 2014-02-18 11:04:02 tarkus oh no :) 54872 2014-02-18 11:04:24 tarkus dead end 54873 2014-02-18 11:04:33 andreypopp I wonder why there's a need for gulp-browserify, I heard that gulp is about streams and browserify itself is a stream 54874 2014-02-18 11:05:20 tarkus the reason i use gulp-browserify is that i need to compile all my fron-end files LESS/JSX etc in one go 54875 2014-02-18 11:05:47 tarkus maybe there is a better way doing it.. 54876 2014-02-18 11:06:08 andreypopp tarkus: you can ask your question in #browserify, probably some gulp-browserify users could help with that 54877 2014-02-18 11:07:05 tarkus ok 54878 2014-02-18 11:12:11 stevoland how does everyone do i18n? {_('token')} or something fancier? 54879 2014-02-18 11:13:22 andreypopp petehunt: did you try that? https://github.com/piranha/pump/blob/master/Makefile#L32 54880 2014-02-18 11:24:17 krs stevoland: yes, like that 54881 2014-02-18 11:24:36 krs im not everyone, but anyway =) 54882 2014-02-18 11:24:46 stevoland ha 54883 2014-02-18 11:26:07 stevoland i was wondering about integrating something into react but i don't think i'm smart enough 54884 2014-02-18 15:08:04 dve did I read somewhere that react-ids might be removed from elements? 54885 2014-02-18 15:37:04 cantera25 ping 54886 2014-02-18 15:54:03 dve andreypopp: has 0.9.0-rc1 broken react-async? 54887 2014-02-18 15:54:14 squidz i'm getting a binding error and I can't figure out where it is. The error is "React component methods may only be bound to the component instance" 54888 2014-02-18 15:54:34 andreypopp dve: did you try to install it from GitHub? 54889 2014-02-18 15:54:38 squidz the last place in my code that the stack trace points to is here: https://www.refheap.com/41522 54890 2014-02-18 15:55:09 andreypopp dve: I've pushed needed changes for 0.9.0 but it's not on npm yet, waiting for actual 0.9.0 release 54891 2014-02-18 15:55:58 squidz i'm not used to binding though so I may be doing it wrong. Can anbydoy see anything suspicious in my paste? 54892 2014-02-18 15:56:19 dve andreypopp: no thats ok, Im using a local clone. The checksum is being reported as incorrect. Im guessing because the data isnt available when renderComponentToString is called 54893 2014-02-18 15:57:06 squidz something that may cause a ""React component methods may only be bound to the component instance"" error 54894 2014-02-18 15:58:05 andreypopp dve: do you get a <script> element attached to your markup? 54895 2014-02-18 15:59:09 andreypopp squidz: component's methods already bound to a component itself 54896 2014-02-18 15:59:39 andreypopp squidz: but you probably trying to rebind them on a different component — this.props.removeItem.bind(this) 54897 2014-02-18 16:00:28 dve andreypopp: yes 54898 2014-02-18 16:00:55 andreypopp so it should contain data 54899 2014-02-18 16:00:58 squidz really i'm only trying to partially apply a parameter to the function so that when it is defined further above, I can refer to it 54900 2014-02-18 16:01:22 andreypopp squidz: do it like this.props.removeItem.bind(null, param1, ...) 54901 2014-02-18 16:01:25 dve andreypopp: it does but the checksum is being calculate before you attach the data 54902 2014-02-18 16:01:44 squidz andreypopp: okay let me give it a try 54903 2014-02-18 16:01:48 andreypopp dve: it shouldn't matter 54904 2014-02-18 16:02:05 andreypopp dve: React doesn't know about script tag, so checksums would match 54905 2014-02-18 16:02:21 andreypopp dve: do you have a code example? 54906 2014-02-18 16:02:21 dve andreypopp: hmm, ok - let me go debug some more. 54907 2014-02-18 16:05:57 squidz andreypopp: thanks, that did it 54908 2014-02-18 16:07:33 andreypopp dve: and you have everything ok with 0.8.0 react? 54909 2014-02-18 16:08:38 dve yup, 0.8.0 and npm version of react-async worked fine. I thought the error was something new in 0.9.0-rc1 and its just that it wasnt checking for it in >0.9.0 54910 2014-02-18 16:11:14 andreypopp hm.. can't see how changes in react-async can break something... 54911 2014-02-18 16:14:34 andreypopp dve: you should be able to access window.__reactAsyncStatePacket *before* the first render 54912 2014-02-18 16:19:14 andreypopp dve: please file an issue with react-async if you think it's about react-async to blame 54913 2014-02-18 16:20:55 dve andreypopp: Im not sure it is now - I did realize script tags where not included when checksum-ing. Ill keep digging and if it is an issue ill add it on github 54914 2014-02-18 16:21:03 dve didnt* 54915 2014-02-18 16:21:51 andreypopp ok 54916 2014-02-18 17:57:46 seangrove I don't suppose there's anything super-nice react does with <audio> tags like it does with <textarea>, right? 54917 2014-02-18 17:57:57 seangrove I really would like to be able to set attributes on <audio> tags and have them work properly, e.g. muted=true, volume=50, etc. 54918 2014-02-18 17:59:14 seangrove Right now I'm resorting to a bunch of setTimeout calls that reach into the dom, find the right audio tag, and then imperatively update it via the interface 54919 2014-02-18 18:00:27 seangrove Thinking aloud here, it *would* be possible for React to detect the attribute changes and then fire off the right interface calls for the <audio> tag, right? 54920 2014-02-18 18:02:56 petehunt seangrove: so the problem is that you're missing attributes for audio? 54921 2014-02-18 18:03:30 seangrove petehunt: Yeah, the standard html5 way to interact with it is to something like audioTag.muted = true 54922 2014-02-18 18:03:43 petehunt seangrove: file a bug or send a PR to add it to this list https://github.com/facebook/react/blob/master/src/browser/dom/DefaultDOMPropertyConfig.js 54923 2014-02-18 18:03:59 petehunt we have a longstanding task to codegen this from webidl 54924 2014-02-18 18:05:55 seangrove petehunt: Will do 54925 2014-02-18 18:13:04 squidz i'm getting some weird behavior trying to update the state in one of my components. The state consists of an aray of objects and I am filtering those objects to update a one of the keys values. My update function for my component is updating more than the target object though. When I run my funciton in the browsers console, the update works properly. Only one target value is being updated. But when in my component, it is changing the 54926 2014-02-18 18:14:03 squidz here is a paste of the function along with the state before the function run and afterward https://www.refheap.com/41549 54927 2014-02-18 18:14:05 vjeux_ squidz: do you have some code? 54928 2014-02-18 18:14:10 seangrove petehunt: https://github.com/facebook/react/issues/1124 - may be out of the scope of React, but I *think* it fits in with what's gone before 54929 2014-02-18 18:14:28 dve I notice that in the 0.9.0-rc 'React attempted to use reuse markup in a container but the checksum was invalid.' warning (0.8.0) has become a full blown error. Will this be staying? 54930 2014-02-18 18:14:34 petehunt shouldb e fine 54931 2014-02-18 18:15:01 squidz vjeux: notice that the value 'actual' is being changed to 'low' twice. But it should only be changed once 54932 2014-02-18 18:15:04 petehunt dve: only for full page rendering i think 54933 2014-02-18 18:15:55 vjeux squidz: the same object must be shared in the two places 54934 2014-02-18 18:16:06 vjeux squidz: so if you update it at one place, it also update the other 54935 2014-02-18 18:16:38 dve petehunt: hmm ok thanks, that maybe my way around it then 54936 2014-02-18 18:17:42 squidz vjeux: right, thanks. I didn't see that 54937 2014-02-18 18:18:01 squidz what's the best way to copy that object so that the values are the same 54938 2014-02-18 18:18:56 dve andreypopp: apologies my earlier issue, it had existed all along and has nothing to do with async, it was only a warning (not an error) in 0.8.0 and I hadnt noticed it. 54939 2014-02-18 18:19:02 vjeux squidz: usually the way to do things with immutable data structures is .map(function(elementA) { if (elementA === elementB) { var result = copy(elementA); result.someField = false; return result; } else { return elementA; } } 54940 2014-02-18 18:19:28 andreypopp dve: ok, but did you figure out what's happened? 54941 2014-02-18 18:19:31 vjeux basically you return the same value for all the elements but the one you want to change, and clone it instead 54942 2014-02-18 18:19:42 squidz okay so copy is what i am after. Thank you 54943 2014-02-18 18:19:43 andreypopp dve: I'd like to add some hints to react-async to help with debugging such issues 54944 2014-02-18 18:22:43 dve andreypopp: yes, my app progressively enhances depending on device/screen. Obviously the serverside isnt a device, so it defaults to mobile, which is fine cause it still spits out plenty enough information for seo. But on clientside when window.onload happens, it renders the app for the that client, which most of the time is not mobile. 54945 2014-02-18 18:25:07 dve so the checksums will be different 54946 2014-02-18 18:31:27 andreypopp dve: yeah, render() functions should be pure 54947 2014-02-18 18:35:18 dve andreypopp: but they can depend on state, no? 54948 2014-02-18 18:37:00 dve my render function (basically) decides how many children to render based on state 54949 2014-02-18 19:02:03 cpojer dnolen_: ping 54950 2014-02-18 19:02:14 dnolen_ cpojer: pong 54951 2014-02-18 19:02:16 cpojer did you isolate what caused Om to be so much faster with React 0.9? 54952 2014-02-18 19:05:06 dnolen_ cpojer: hmm no I didn't look at it too closely, I suspect shorter ids and perhaps more JIT friendliness. That was petehunt's guess 54953 2014-02-18 19:05:14 cpojer nice 54954 2014-02-18 19:08:28 dnolen_ cpojer: but it makes React/Om 10X faster than naive Backbone.js at initial render for TodoMVC for 200 items, which is pretty crazy 54955 2014-02-18 19:08:39 cpojer that is pretty damn awesome 54956 2014-02-18 19:08:49 cpojer since except for the id thing I don't really think we focused too much on perf 54957 2014-02-18 19:09:16 cpojer and it is interesting that shorter strings can have such an impact… 54958 2014-02-18 19:09:31 cpojer also note that propTypes aren't validated in !__DEV__ any more, but not sure om uses that at all 54959 2014-02-18 19:11:06 dnolen_ cpojer: we don't use those. 54960 2014-02-18 19:11:12 cpojer yea I figured 54961 2014-02-18 19:12:18 dnolen_ cpojer: they are awesome, but ClojureScript already has its own support for runtime pre-conditions that can be elided at compile time. 54962 2014-02-18 19:12:43 cpojer intersting 54963 2014-02-18 19:12:45 cpojer *interesting 54964 2014-02-18 19:12:50 cpojer how do the runtime pre-conditions work? 54965 2014-02-18 19:12:55 cpojer do they log in the console or something? 54966 2014-02-18 19:13:14 cpojer in typescript it is done in the compile step 54967 2014-02-18 19:13:26 cpojer and there is no type info at all when you run the cod 54968 2014-02-18 19:13:27 cpojer e 54969 2014-02-18 19:13:39 dnolen_ cpojer: no just functions you can use to validate any arg 54970 2014-02-18 19:13:44 dnolen_ exception if any one of them fail 54971 2014-02-18 19:13:56 dnolen_ and we have compiler option to remove runtime assertions in production 54972 2014-02-18 19:14:19 cpojer oh, so it is manual? 54973 2014-02-18 19:16:51 dnolen_ cpojer: oh yes it is you have to specify preconditions to the function. 54974 2014-02-18 19:17:05 cpojer right 54975 2014-02-18 19:17:09 dnolen_ cpojer: there are alternative things like Prismatic Schema which are more flexible. 54976 2014-02-18 19:23:24 andreypopp I just invented a thing called reactdown, it's like markdown, but you can embed React components instead of HTML! 54977 2014-02-18 19:24:42 zpao so long as you bring in my line highlighting invention, i'll allow it :P 54978 2014-02-18 19:24:48 andreypopp https://gist.github.com/andreypopp/9078044 54979 2014-02-18 19:26:07 balpert andreypopp: see also http://bit.ly/1cmCMeB 54980 2014-02-18 19:27:16 andreypopp balpert: nice 54981 2014-02-18 19:27:43 balpert markdown + latex + custom widgets in react 54982 2014-02-18 19:27:45 zpao why doesn't john have a whole number of ducks? 54983 2014-02-18 19:28:49 cpojer that reminds me 54984 2014-02-18 19:29:06 cpojer didn't someone build a react + mathml/mathjax editor thing? 54985 2014-02-18 19:29:10 cpojer does anyone have the link? 54986 2014-02-18 19:29:11 balpert zpao: I wrote the question quickly and thought 2 sqrt(3) would be funnier 54987 2014-02-18 19:29:18 balpert cpojer: are you not talking about my thing? 54988 2014-02-18 19:29:27 cpojer no something different iirc 54989 2014-02-18 19:30:58 zpao i think it was the same think 54990 2014-02-18 19:31:07 cpojer k 54991 2014-02-18 19:32:09 zpao or maybe not the exact same thing but probably http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology 54992 2014-02-18 19:32:46 balpert ah yes 54993 2014-02-18 19:33:52 cpojer yes that was it ! 54994 2014-02-18 19:33:53 cpojer thanks 54995 2014-02-18 19:33:57 cpojer funny blog post, haha 54996 2014-02-18 19:34:07 cpojer "Surely you’re joking, Mr. Alpert." haha 54997 2014-02-18 19:34:37 balpert the animated gif wins every time 54998 2014-02-18 19:34:39 cpojer does that editor exist outside of a gif? 54999 2014-02-18 19:34:50 balpert cpojer: yes, that's what I linked 55000 2014-02-18 19:35:03 cpojer I see, so it evolved "a little" ;) 55001 2014-02-18 19:35:06 balpert (the right side of the gif is an old version, pre-react) 55002 2014-02-18 19:35:21 cpojer I see 55003 2014-02-18 19:35:26 balpert cpojer: yeah. I think the gif may have also simplified the interface over what it was 55004 2014-02-18 19:35:38 cpojer thanks for the explanation 55005 2014-02-18 19:35:48 cpojer I'm gonna link this to a prof at my uni, he wants someone to do a bachelor thesis on this 55006 2014-02-18 19:36:20 zpao balpert: snowmen are magical? ? 55007 2014-02-18 19:36:24 balpert snowmen are magical! 55008 2014-02-18 19:36:34 balpert snowmen in double brackets at least 55009 2014-02-18 19:36:44 balpert I needed some magic and thought, why not snowmen 55010 2014-02-18 19:37:17 zpao fair enough 55011 2014-02-18 20:17:35 balpert is there any IDL-like thing that says which things are properties and which are attributes? 55012 2014-02-18 20:20:08 nhhagen what is the event for a click on a virtual DOM 'a' (link)? 55013 2014-02-18 20:21:25 nhhagen I tried onClick with no luck 55014 2014-02-18 20:21:43 balpert nhhagen: onClick should work 55015 2014-02-18 20:23:46 nhhagen balpert: like this right: <a onClick={this.handleOnClick}>some text</a> 55016 2014-02-18 20:23:52 balpert nhhagen: yep 55017 2014-02-18 20:24:32 balpert nhhagen: http://jsfiddle.net/32vJq/ 55018 2014-02-18 20:35:13 nhhagen balpert: thx, I had lost my way in the scopes, this was not the React component, lol, stil new to JS 55019 2014-02-18 20:37:12 nhhagen balpert: can I pass parameters to the events? I need to get a hold of the text of the 'a' element 55020 2014-02-18 20:39:12 chenglou nhhagen: http://facebook.github.io/react/tips/communicate-between-components.html 55021 2014-02-18 20:39:24 chenglou ^ for passing params 55022 2014-02-18 20:39:36 chenglou but in this case you can just get the dom node 55023 2014-02-18 20:40:27 chenglou but what do you need the anchor text for> 55024 2014-02-18 20:40:29 chenglou ? 55025 2014-02-18 20:41:48 nhhagen chenglou: I'm building a quik and dirty search prototype, so I need to pass the value of a facet to my backend, currently that is rendered as the text of a link, 55026 2014-02-18 20:43:54 nhhagen chenglou: that worked, thx 55027 2014-02-18 20:44:19 nhhagen chenglou: way cleaner than getting it from the dom node 55028 2014-02-18 20:44:23 chenglou I'd say a nicer way to do that, especially if you need the text for other purposes, is to store it 55029 2014-02-18 20:44:29 chenglou as prop or state 55030 2014-02-18 20:44:48 chenglou so you'll have it naturally. And then in render, you render that prop/state text 55031 2014-02-18 21:52:42 syranide zpao: btw, what did you guys decide anything on transferPropsTo? 55032 2014-02-18 21:52:47 syranide *-what 55033 2014-02-18 21:53:05 zpao not yet 55034 2014-02-18 21:53:17 syranide ok ^^ 55035 2014-02-18 22:03:06 dnolen_ is @react_js the actual React twitter account? 55036 2014-02-18 22:05:02 GreenJello dnolen_, I dunno, look at the followers and play match-to-contribuiters :-) 55037 2014-02-18 22:06:46 zpao dnolen_: "yes" 55038 2014-02-18 22:07:07 zpao but we don't use it because we want @reactjs 55039 2014-02-18 22:08:33 dlau is it even possible to get a twitter handle that is just parked by someone else? 55040 2014-02-18 22:08:42 syranide zpao: you're obviously compeeting against a superior language though... 55041 2014-02-18 22:09:02 zpao syranide: i know. it's an uphill battle 55042 2014-02-18 22:09:14 dlau oh, the @reactjs is also reactjs.com haha 55043 2014-02-18 22:09:33 zpao dlau: there used to be a contention policy. not sure what happened to that. and yea, same yellow and purple :P 55044 2014-02-18 22:10:33 dlau I thought that the contention policy never really worked, unless you're someone like .. facebook :p 55045 2014-02-18 22:10:42 syranide "reactjs" has to be the weirdest thing I've ever come across 55046 2014-02-18 22:29:51 balpert a friend of mine asked a Twitter friend of his and the claim is that twitter doesn't do that any more 55047 2014-02-18 22:45:04 insin woo, "React.renderComponentToString is now synchronous" 55048 2014-02-18 23:01:31 insin I think React.renderComponentToString being synchronous might be killing my HTML tests - it used to throw all the time but still somehow called the callback previously 55049 2014-02-18 23:01:48 insin In firefox it throws "deepestAncestor is undefined" 55050 2014-02-18 23:02:20 insin (used to throw ""ancestorNode is undefined" in 0.8) 55051 2014-02-18 23:02:55 insin in Chrome it's still throwing "Cannot read property 'firstChild' of undefined", as it did in 0.8 55052 2014-02-18 23:03:07 balpert insin: known bug, I think :( 55053 2014-02-18 23:05:42 insin running my QUint tests in Node now bombs out on "navigator is not defined" with the RC 55054 2014-02-18 23:05:53 insin *QUnit 55055 2014-02-18 23:06:31 insin at "navigator.userAgent.indexOf('Chrome') > -1) {" 55056 2014-02-18 23:13:22 insin I'm using qquint, which fakes out a window global using jsdom, so ExecutionEnvironment.canUseDOM is true, but some of the asumptions which then follow are not :) 55057 2014-02-18 23:24:47 insin balpert: is there an issue for that bug? can't see one 55058 2014-02-18 23:28:47 insin and you dropped the ="blah" part for boolean attributes in generated markup, you rascals! ) 55059 2014-02-18 23:29:35 insin changing the canusedom check to this fixed my issue running QUnit tests in Node: 55060 2014-02-18 23:29:37 insin var canUseDOM = typeof window !== 'undefined' && typeof process === 'undefined'; 55061 2014-02-18 23:29:59 insin would an explicit Node check like that be frowned upon? 55062 2014-02-18 23:30:45 insin petehunt: just saw your tweet - the above was the issue 55063 2014-02-18 23:33:42 zpao insin: we use jsdom with fb testing and don't have any issues 55064 2014-02-18 23:34:04 zpao (well, we do but that's because jsdom doesn't implement all real dom stuff) 55065 2014-02-18 23:34:24 insin heh 55066 2014-02-18 23:38:03 insin it looks like there's something to do with canUseDOM related to my HTML string generation issue - if I add a check for navigator being defined, my Node tests have the same issue as when I run them in a browser 55067 2014-02-18 23:39:14 insin but if I add the process check so canUseDOM is false, I get down to generated markup change errors rather than "you didn't run enough assertions because renderComponentToString threw 55068 2014-02-18 23:42:29 insin if I hardcode canUseDOM to false in the version of the RC I'm using in the browser, it stops throwing errors! 55069 2014-02-18 23:43:20 insin so should it always be assumed to be false when using renderComponentToString, or set to false for the duratiom of its run? 55070 2014-02-19 00:15:30 insin Created an issue for renderComponentToString vs canUseDOM: https://github.com/facebook/react/issues/1129 55071 2014-02-19 02:07:49 bkonkle Is Q the best library for working with promises client-side? 55072 2014-02-19 02:09:20 petehunt supposedly bluebird is the new thing 55073 2014-02-19 02:10:46 bkonkle Ah, I'd heard of it, but didn't realize it was the new thing. I like new things, so I'll check it out. :-) 55074 2014-02-19 02:10:49 bkonkle Thanks 55075 2014-02-19 02:11:24 balpert zpao: ^^ 55076 2014-02-19 02:12:32 zpao balpert: that's allowed in jsx? what does it transform to? 55077 2014-02-19 02:12:35 balpert true 55078 2014-02-19 02:12:53 balpert TYL :) 55079 2014-02-19 02:16:37 zpao how about that 55080 2014-02-19 02:16:56 zpao i guess that's inline with boolean attrs 55081 2014-02-19 02:19:01 balpert andreypopp: do you know if I can make reactify use react-tools 0.9.0-rc1 without changing reactify itself? 55082 2014-02-19 02:36:01 balpert hmm maybe that happens automatically 55083 2014-02-19 02:36:41 coder Anyone here feel comfortable answering a question about Cortex or methods of having a global datastore with reactjs 55084 2014-02-19 02:42:38 balpert syranide: your codemod doesn't change +{' '}{stuff} to + {stuff} -- I guess looking for newlines is harder? 55085 2014-02-19 02:52:30 GreenJello coder, I've used cortex a bit, and read its code 55086 2014-02-19 02:53:23 GreenJello oh I think he left 55087 2014-02-19 03:00:25 tarkus Installing react-tools@0.9.0-rc1 produces an error: Peer react@0.9.0-rc1 wants envify@~1.0.1 (though I have envify@1.0.1 installed) 55088 2014-02-19 05:26:51 balpert dustingetz: wrong link in your mailing list post? 55089 2014-02-19 05:27:15 dustingetz lol 55090 2014-02-19 05:27:17 dustingetz thanks 55091 2014-02-19 05:27:31 balpert np 55092 2014-02-19 07:24:43 abrkn anyone have example code of form validation? 55093 2014-02-19 07:25:14 abrkn i saw something posted, but it integrated with some telerik components. i'd prefer something less complex 55094 2014-02-19 07:39:13 tarkus "react@0.9.0-rc1 wants envify@~1.0.1" does anyone else have the same issue? conflicting packages 55095 2014-02-19 07:39:56 zpao tarkus: you have envify already at a different version? 55096 2014-02-19 07:40:29 tarkus for example i can't install gulp-streamify because of this issue 55097 2014-02-19 07:40:54 tarkus zpao, i tried uninstalling envify.. but it doesn't make any difference 55098 2014-02-19 07:41:13 zpao tarkus: minimum repro case? 55099 2014-02-19 07:41:33 zpao (eg, starting with an empty dir, what can i do to repro) 55100 2014-02-19 07:42:02 tarkus try installing gulp-streamify or some other package which depends on envify, when you already have react@0.9.0-rc1 installed 55101 2014-02-19 07:43:06 zpao tarkus: just installed both side by side 55102 2014-02-19 07:43:20 zpao no problem 55103 2014-02-19 07:44:18 tarkus zpao, yeah, hold on, i will try to find a proper minimum repro case 55104 2014-02-19 07:45:44 zpao tarkus: thanks, and please file an issue, i'm heading off to bed 55105 2014-02-19 08:12:10 abrkn anyone have example code of form validation? i only have like eight fields, so nothing overkill needed 55106 2014-02-19 08:15:19 GreenJello abrkn, I don't have an example, but basically you'd want to put errors in state 55107 2014-02-19 08:15:55 GreenJello you could, e.g. create a wrapper around linkState that does validation 55108 2014-02-19 08:27:00 locks http://www.dustingetz.com/2014/02/18/react-dynamic-forms.html 55109 2014-02-19 08:29:23 abrkn locks: i looked at that one -- a little over engineered for my use case 55110 2014-02-19 08:29:37 abrkn i'm intrigued by value link. does it support all input types? 55111 2014-02-19 08:32:48 insin abrkn: pretty simple stuff here: https://github.com/insin/lifequote/blob/master/src/components/reusable/ContactForm.jsx#L62 55112 2014-02-19 08:34:51 insin or for the overkill version, a form library I'm working on :) https://gist.github.com/insin/9063570#file-contactform-js-L10-L80 55113 2014-02-19 08:47:05 abrkn insin: it's a bit confusing to me 55114 2014-02-19 09:00:28 syranide balpert: yt? 55115 2014-02-19 09:00:38 balpert hi 55116 2014-02-19 09:01:20 syranide balpert: hey, the blog post, you say that to keep space adjacent to a newline you can write {"Monkeys: "}, but perhaps it's an idea to mention "or Monkeys:{" "}" just to make it extra clear that it works too 55117 2014-02-19 09:02:54 balpert good idea, updated 55118 2014-02-19 09:03:00 syranide ^^ 55119 2014-02-19 09:04:44 balpert syranide: did you see my comment earlier? 55120 2014-02-19 09:04:59 balpert "syranide: your codemod doesn't change +{' '}{stuff} to + {stuff} -- I guess looking for newlines is harder?" 55121 2014-02-19 09:05:20 balpert here, + is arbitrary text 55122 2014-02-19 09:05:33 balpert though it was actually + in my specific case :) 55123 2014-02-19 09:06:59 syranide balpert: uhm, right, I think it specifically only looks for {}{' '}{}, not texts, simply because I assume it isn't common ... and it felt a bit "dangerous" to fix, as you say, need to check for newlines etc 55124 2014-02-19 09:07:16 balpert yup 55125 2014-02-19 09:07:27 balpert just wanted to confirm that it was at least semi-intentional 55126 2014-02-19 09:08:29 syranide balpert: yep, do you think it is common? (also, +{' '}{stuff} doesn't even have to be written with the old rules right?) 55127 2014-02-19 09:08:39 syranide *written like that 55128 2014-02-19 09:08:49 balpert oh maybe 55129 2014-02-19 09:10:04 abrkn it's so weird that form validation is still a pain in 2014. same exact problem i had in 1994 55130 2014-02-19 09:10:35 syranide abrkn: it's quite easy to just tailor your own components in React for it though 55131 2014-02-19 09:10:51 locks you could also use, like, HTML5 validations. 55132 2014-02-19 09:11:02 abrkn syranide: right, just had a strange flashback to validation in borland delphi 3 55133 2014-02-19 09:11:08 chenglou so syranide: in reality there's really nothing to doc about whitespace? It does what we'd expect? 55134 2014-02-19 09:11:10 syranide haha 55135 2014-02-19 09:11:46 abrkn syranide: same exact type of form. even screen resolution has not gone up (smart phones) 55136 2014-02-19 09:12:11 balpert syranide: I guess it wasn't necessary. we had <div>\\n+{" "}{$._("Include a due date")}\\n</div> and it turned into <div>\\n{' '}+{" "}{$._("Include a due date")}\\n</div> 55137 2014-02-19 09:12:25 balpert just slightly confused me 55138 2014-02-19 09:12:48 syranide chenglou: right, that was the idea, I think it's good to document it regardless (especially that you can use {' '} to force whitespace), but I think it's as close to what people expect as is possible 55139 2014-02-19 09:13:21 syranide I guess the major thing that sometimes makes sense, and sometimes not is that "<tag>\\nA" becomes "<tag>A" 55140 2014-02-19 09:13:35 balpert I agree there 55141 2014-02-19 09:14:03 syranide balpert: that's some very pretty code :D 55142 2014-02-19 09:15:48 syranide chenglou: also, I'm not sure where (if) we document the codemod, but it may be a good idea to explain briefly why it inserts so darn many {' '} ^^ 55143 2014-02-19 09:16:19 balpert syranide: just https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md I think 55144 2014-02-19 09:16:30 syranide ah right 55145 2014-02-19 09:21:52 balpert and the blog posts of course 55146 2014-02-19 09:28:00 syranide oh btw balpert if you change the example to "Abc def:\\nMonkeys:", then it's basically shows every single case 55147 2014-02-19 09:28:06 syranide *it 55148 2014-02-19 09:28:32 balpert that part didn't change right? 55149 2014-02-19 09:28:38 syranide it did 55150 2014-02-19 09:30:03 syranide although hmm, I guess, the only thing that changed is that it doesn't collapse whitespace, I forgot that the old rules also added spaces in place of newlines between text 55151 2014-02-19 09:30:15 syranide *space 55152 2014-02-19 10:05:30 tarkus I'm wondering is it practical to use React aloneside with AngularJS? 55153 2014-02-19 10:06:37 GreenJello tarkus, eh that really depends on Angular 55154 2014-02-19 10:06:57 GreenJello if it does weird stuff internally it could screw with react 55155 2014-02-19 10:07:41 GreenJello and unless there's a JavaScript way to invoke ng-app on an element, you can't use angular inside react 55156 2014-02-19 10:09:13 andreypopp the question should be vice-versa — "is it practical to use AngularJS aloneside with React?" 55157 2014-02-19 10:09:28 andreypopp or better — "is it practical to use AngularJS" :P 55158 2014-02-19 10:09:58 syranide tarkus: there are integration plugins on the site I believe 55159 2014-02-19 10:11:17 tarkus andreypopp, well, bases on how many companies are hiring angular devs.. one can make a conclusion that it's not flawed 'enough' :) 55160 2014-02-19 10:13:18 GreenJello there are good things about angular that I really like; but I don't like it as a whole 55161 2014-02-19 10:14:38 syranide tarkus: and I think they are right doing that, I was reluctantly planning to use angular as well before I found react 55162 2014-02-19 10:15:04 syranide if you take react out of the bag, angular probably is the "overall" best framework out there 55163 2014-02-19 10:16:07 GreenJello well if you're working with node.js, meteor will be on the same level once they put out a stable release, from what I know 55164 2014-02-19 10:16:30 syranide GreenJello: but isn't meteor more about the model layer than the view layer? 55165 2014-02-19 10:16:44 syranide you can plug React into meteor AFAIK 55166 2014-02-19 10:16:45 GreenJello syranide, it's everything, like angular 55167 2014-02-19 10:17:07 syranide right, but I mean angular isnt a routerr, it comes with a router, loosely speaking 55168 2014-02-19 10:17:11 syranide kind of 55169 2014-02-19 10:17:16 GreenJello yeah it comes with a built in view system, but it's more flexible than angular 55170 2014-02-19 10:18:31 GreenJello the core concept of it is the models and seemless server integration 55171 2014-02-19 10:19:02 GreenJello so angular has services; and then you have to to write code in your server than handles all of these calls, etc. 55172 2014-02-19 10:19:45 GreenJello although I haven't actually worked with it at all, so maybe it sucks :-) 55173 2014-02-19 10:20:06 syranide angular is really nice, but uhhgg, I remember expermenting with it, every single thing is a PITA 55174 2014-02-19 10:20:09 syranide to learn 55175 2014-02-19 10:20:53 GreenJello yeah, to be honest the only thing I like is app.module and dependency injection :-) 55176 2014-02-19 10:20:59 GreenJello and even that kind urkes me 55177 2014-02-19 10:21:57 tarkus as far as I understand if you use browserify or a similar tool, there is no need to use dependency injection in a browser 55178 2014-02-19 10:22:15 GreenJello the problem with browserify is relative paths 55179 2014-02-19 10:22:34 GreenJello you can work around it, but then you can't use the modules in node.js 55180 2014-02-19 10:23:04 tarkus GreenJello, hold on, your're not using browserify with you React apps? 55181 2014-02-19 10:23:16 GreenJello oh no, I am 55182 2014-02-19 10:23:30 GreenJello but I'm stuck between a rock and a hard place... 55183 2014-02-19 10:24:27 GreenJello so I made a stystem I really like: https://github.com/brigand/reactjs-baseline/tree/master/src/jsx 55184 2014-02-19 10:24:44 GreenJello but it doesn't work with node because it relies on aliases 55185 2014-02-19 10:25:36 tarkus GreenJello, you have React components/UI fragments in /jsx/ folder and the rest of JavaScript code in the /js/ folder? 55186 2014-02-19 10:25:59 GreenJello so require("common/button") in src/jsx/application.jsx is really require("../common/button/button.jsx") 55187 2014-02-19 10:26:42 GreenJello and it'd still be require("common/button") in src/jsx/pages/home/foobar.jsx") 55188 2014-02-19 10:27:19 GreenJello without aliases that'd be require("../../../../common/button/button.jsx") which makes me sad :-( 55189 2014-02-19 10:27:21 syranide GreenJello: it might be interesting to know that they use *no* namespaces at Facebook 55190 2014-02-19 10:27:36 GreenJello yeah, how the heck do they do that? 55191 2014-02-19 10:27:41 syranide good naming 55192 2014-02-19 10:27:49 syranide I assume ^^ 55193 2014-02-19 10:28:47 GreenJello do you mean in the main react project? 55194 2014-02-19 10:28:58 syranide no for all of facebook AFAIK 55195 2014-02-19 10:29:16 GreenJello oh 55196 2014-02-19 10:29:35 GreenJello for node guess what they do? :-) 55197 2014-02-19 10:29:44 syranide hmm? 55198 2014-02-19 10:30:09 GreenJello they build the npm package... 55199 2014-02-19 10:30:35 GreenJello everything's also flat, e.g. they have var mergeHelpers = require('mergeHelpers'); 55200 2014-02-19 10:30:45 syranide ah you mean like that 55201 2014-02-19 10:31:26 syranide yeah, I'm intending to go with flat as well 55202 2014-02-19 10:31:27 GreenJello I can't even find where that's defined, though :-/ 55203 2014-02-19 10:31:45 syranide GreenJello: you mean how the folders become flat? 55204 2014-02-19 10:31:52 GreenJello yeah 55205 2014-02-19 10:31:57 GreenJello I don't like that 55206 2014-02-19 10:32:17 GreenJello some structure is good unless you literally have one folder with every source file, it shouldn't feel like that 55207 2014-02-19 10:32:28 syranide GreenJello: I'm very rusty on this, but I think @providesModule is responsible for that, the you build it it puts them into new files with the name of the directive 55208 2014-02-19 10:32:37 syranide *when you 55209 2014-02-19 10:32:39 GreenJello ah okay 55210 2014-02-19 10:32:56 syranide so you can have test.js actually define notatest, which ends up in notatest.js 55211 2014-02-19 10:33:08 GreenJello oh okay, that's tricky! 55212 2014-02-19 10:33:18 syranide again, very rusty on this, but that's my experience from working on React core 55213 2014-02-19 10:33:46 GreenJello ACTION echo "//@providesModule Number" > NaN.js 55214 2014-02-19 10:37:49 dlau greenjello: interesting, I do pretty much the same w/ gulp 55215 2014-02-19 10:38:41 dlau oh I thought that reactjs baseline repo was yours xD 55216 2014-02-19 10:39:57 GreenJello no, that's my version of it 55217 2014-02-19 10:41:14 GreenJello it's considerably different, I should probably break it off 55218 2014-02-19 10:41:22 GreenJello give it a new name, etc. 55219 2014-02-19 12:02:37 abrkn im looking to add some validation to this: https://gist.github.com/abrkn/777cb29d5d2acd141843 without too much bloat. when user clicks checkout, http://i.imgur.com/oLBVjv0.png , i want to add has-error to any field that is required&empty or otherwise invalid 55220 2014-02-19 12:03:59 abrkn i've found a few implementations on SO and various blogs, but they are too big/over engineered 55221 2014-02-19 12:08:08 syranide abrkn: you could easily create a component that encapsulates the div and everything, and it could either have the validation internally, or through a prop 55222 2014-02-19 12:09:05 abrkn syranide: the nice thing about this valuelink is that there's nearly no code. i just need the parent to call ".validate" when user attempts to submit which must somehow set state to indicate whether there are any errors 55223 2014-02-19 14:14:14 joecritchley Hi guys, how do I build my own copy of react? I'm finding the README instructions confusing. I've installed the one I want (0.9.0-rc1) with NPM, but there's no Gruntfile in the cloned repo? 55224 2014-02-19 14:15:20 joecritchley So when I run `grunt build`, it complains about a missing Gruntfile. 55225 2014-02-19 14:16:08 syranide joecritchley: npm react is not buildable I think, "react-tools" on npm has it... possibly, don't know the specifics 55226 2014-02-19 14:16:22 syranide personally I checkout react on git 55227 2014-02-19 14:19:38 joecritchley syranide: Ok, when you checkout on git, how do you then build your file? 55228 2014-02-19 14:19:45 syranide grunt build 55229 2014-02-19 14:19:45 joecritchley Sorry, I find building really confusing 55230 2014-02-19 14:19:47 joecritchley ok 55231 2014-02-19 14:19:52 joecritchley I'll try that thanks 55232 2014-02-19 14:19:52 syranide joecritchley: np, I did too :) 55233 2014-02-19 14:20:26 syranide and if you contribute, you'll find that git rebase is quite wonderfully easy to blow up as well ^^ 55234 2014-02-19 14:27:34 locks syranide: probably `npm install` first, no? 55235 2014-02-19 14:28:37 syranide locks: right right, I usually forget that, but he seemed experienced enough anyway :) 55236 2014-02-19 14:28:48 syranide joecritchley: ^ 55237 2014-02-19 14:28:58 andreypopp joecritchley: hi, if you are using npm to obtain react may be you can consider using browserify or webpack to use React? 55238 2014-02-19 14:29:32 andreypopp joecritchley: there's https://github.com/petehunt/react-browserify-template 55239 2014-02-19 14:29:42 joecritchley syranide: this build takes a while :D seems to be working now, cheers. 55240 2014-02-19 14:29:55 syranide joecritchley: yeah first time is a bit slow, then it's faster 55241 2014-02-19 14:29:56 syranide great 55242 2014-02-19 14:30:18 joecritchley andreypopp: cheers yeah. I tend to put everything in one file for now, but will be migrating to webpack shortly. I just didn't realise the difference between git and npm 55243 2014-02-19 14:30:48 joecritchley Are npm packages stored in github ? (Generalised question) 55244 2014-02-19 14:31:17 syranide joecritchley: you'll find npm-react in your git react folder, but no they're not stored on git 55245 2014-02-19 14:31:31 syranide they're stored npmjs.org or something like that 55246 2014-02-19 14:31:32 abrkn npm packages are stored in the npm registry 55247 2014-02-19 14:31:49 joecritchley Wow, TIL. I thought npmjs was just a resolver. 55248 2014-02-19 14:31:51 joecritchley Thanks all 55249 2014-02-19 14:32:16 abrkn joecritchley: it is also that. you can npm install from git, http(s) tarball, git over http(s), etc. 55250 2014-02-19 14:32:40 joecritchley abrkn: Aha! Cool 55251 2014-02-19 14:32:52 syranide abrkn: pointing directly to the archive I assume? 55252 2014-02-19 14:32:53 joecritchley Just like Ruby gems 55253 2014-02-19 14:32:55 andreypopp ^ but only if package doesn't require build step 55254 2014-02-19 14:34:16 abrkn https://www.npmjs.org/doc/install.html 55255 2014-02-19 15:46:18 antihero With mixins, what if two overlap, for instance, componentWillMount 55256 2014-02-19 15:47:06 antihero ie how is overriding and whatnot dealt with 55257 2014-02-19 15:47:22 antihero essentially I want to make a "container" which will render its "children" but be able to override this as necessary 55258 2014-02-19 15:47:34 syranide antihero: depends on the method, but those that can be are "merged", i.e, both are called 55259 2014-02-19 15:48:51 syranide antihero: however render cannot be overriden 55260 2014-02-19 15:48:56 syranide you'll have to delegate to another method then 55261 2014-02-19 15:58:31 antihero ok 55262 2014-02-19 15:58:38 antihero hi migige 55263 2014-02-19 15:58:52 antihero syranide: Any idea how I dynamically specify the type of component? 55264 2014-02-19 15:59:01 antihero I tried <{widgetType} /> 55265 2014-02-19 15:59:05 antihero but that syntax errors 55266 2014-02-19 15:59:10 syranide var widgetType = ...; 55267 2014-02-19 15:59:10 antihero I guess it doesn't make alot of sense 55268 2014-02-19 15:59:11 reactbotx http://fc02.deviantart.net/fs70/f/2010/210/1/9/Alot_by_chrispygraphics.jpg 55269 2014-02-19 15:59:11 syranide :) 55270 2014-02-19 15:59:22 syranide remember that JSX is just sugar for a function-call 55271 2014-02-19 15:59:24 syranide nothing more 55272 2014-02-19 15:59:41 antihero Line 33: Unexpected token { 55273 2014-02-19 15:59:45 syranide ah no 55274 2014-02-19 15:59:59 syranide var widgetType = widgetList[key]; 55275 2014-02-19 16:00:03 syranide <widgetType /> 55276 2014-02-19 16:00:17 syranide <widgetType /> === widgetType() 55277 2014-02-19 16:00:22 antihero oooh 55278 2014-02-19 16:00:26 antihero ooh ooh ooh 55279 2014-02-19 16:00:38 syranide which is another point, you could skip JSX for just this case 55280 2014-02-19 16:00:46 syranide depending on your preference 55281 2014-02-19 16:01:18 antihero holy god that's powerful 55282 2014-02-19 16:01:26 antihero I never realised that that was a JS variable 55283 2014-02-19 16:01:27 syranide yeeeep :D 55284 2014-02-19 16:01:45 antihero so I could do wt = window[type] if I'm not using a global object or whatnot 55285 2014-02-19 16:01:51 syranide yep 55286 2014-02-19 16:04:56 mietek What is react-tools.tgz? 55287 2014-02-19 16:07:02 andreypopp mietek: depends... is it from http://react.zpao.com/builds/master/latest/ ? then it's a nightly build 55288 2014-02-19 16:07:15 mietek I'm building master myself 55289 2014-02-19 16:07:27 andreypopp ah, ok, this is an archive with a build 55290 2014-02-19 16:07:30 andreypopp you can npm install it 55291 2014-02-19 16:07:32 syranide mietek: react-tools is just the NPM version of git (I think?) 55292 2014-02-19 16:07:37 syranide basically 55293 2014-02-19 16:07:53 mietek So there's react.tgz and react-tools.tgz 55294 2014-02-19 16:08:05 andreypopp yep, for react and react-tools npm packages 55295 2014-02-19 16:08:15 mietek OK 55296 2014-02-19 16:08:50 mietek Is there a tutorial for ReactCSSTransitionGroup yet? 55297 2014-02-19 16:09:42 mietek Oh hm, or is it the same as ReactTransitionGroup used to be... 55298 2014-02-19 16:10:36 syranide mietek: I think so 55299 2014-02-19 17:27:01 simenbrekken andreypopp: any plans on updating quickstart for rc1? 55300 2014-02-19 17:33:35 chenglou syranide: sup 55301 2014-02-19 17:34:07 chenglou nvm 55302 2014-02-19 17:43:40 andrewofpie Is what I'm trying to do possible: I have a plain old text input that I want to turn into a date picker. So I want to replace the original element with my rendered component. The problem I have is that what I'm getting is the rendered result being added as a child of the original input (which doesn't make a lot of sense), rather than replacing it 55303 2014-02-19 17:45:48 andrewofpie https://gist.github.com/AndrewIngram/9097348 example 55304 2014-02-19 17:47:23 pickels andrewofpie: you could replace the input field first. 55305 2014-02-19 17:48:35 antihero Error while invoking `findComponentRoot` with the following ancestor node 55306 2014-02-19 17:48:59 andrewofpie is that the idiomatic way of doing it? I want to take advantage of transferPropsTo using the original input 55307 2014-02-19 17:49:57 andrewofpie and I want to minimise any DOM manipulation that occurs outside of React's own rendering 55308 2014-02-19 17:53:34 zpao andrewofpie: renderComponent renders into the node. so you need a node that stays on the page 55309 2014-02-19 17:54:04 zpao if you're trying to render over an existing input, you would want to render into inputNode.parentNode 55310 2014-02-19 17:54:56 andrewofpie but presumably that falls apart if the input has siblings? 55311 2014-02-19 17:55:12 zpao but React will wipe out any existing child nodes, so make sure the parent can be empties safely (eg, <div><input></div> is ok <div><label><input></div> will result in the label being lost as well 55312 2014-02-19 17:55:15 zpao yup 55313 2014-02-19 17:55:28 andrewofpie so it's safer to have my original form rendering include a wrapper? 55314 2014-02-19 17:56:29 andrewofpie alright, makes sense, thanks! 55315 2014-02-19 17:58:01 andreypopp simenbrekken: i've updated react-async and react-router-component so it would work after I bump deps on npm 55316 2014-02-19 17:58:22 andreypopp simenbrekken: also added contextual nested routers to react-router-component 55317 2014-02-19 17:58:28 simenbrekken Cool! 55318 2014-02-19 17:58:45 simenbrekken Did you look into being able to avoid window.onload? 55319 2014-02-19 17:59:12 zpao andrewofpie: correct! 55320 2014-02-19 17:59:32 andreypopp simenbrekken: you already can do that, just use Locations router instead of Pages and insert <script> tag at the bottom 55321 2014-02-19 18:00:07 simenbrekken Ah, nice 55322 2014-02-19 18:02:51 pickels Created a small react.js app for generating style-guides: https://github.com/Enome/style-guide 55323 2014-02-19 18:04:07 BinaryMuse pickels: Cool! 55324 2014-02-19 18:04:57 petehunt woo https://github.com/davidchang/ngReact/issues/2#issuecomment-35528362 55325 2014-02-19 18:05:05 pickels BinaryMuse: thanks :) 55326 2014-02-19 18:12:21 syranide chenglou: ? :) 55327 2014-02-19 18:14:39 simenbrekken andreypopp: I might be loopy here but react-async still uses the old async renderComponentToString 55328 2014-02-19 18:15:12 simenbrekken andreypopp: nvm, my npm acting up :( 55329 2014-02-19 18:17:36 simenbrekken andreypopp: actually, I think you forgot to publish to NPM. 55330 2014-02-19 18:30:55 andreypopp simenbrekken: I didn't publish yet, waiting for actual react release 55331 2014-02-19 18:31:14 simenbrekken andreypopp: aha, I guess I can update straight from git then! 55332 2014-02-19 18:31:19 andreypopp yep 55333 2014-02-19 18:31:37 simenbrekken andreypopp: but FYI the version number says 0.3.3 on Github and NPM but the code isn't the same 55334 2014-02-19 18:32:17 andreypopp yeah, my scripts don't update package version on release, maybe I need to fix that 55335 2014-02-19 18:32:48 andreypopp I mean they are, but they just increment the version and doesn't set -dev prefix after that 55336 2014-02-19 18:33:39 simenbrekken andreypopp: I usually just do "npm version patch " 55337 2014-02-19 18:33:46 andreypopp that just means that it's dangerous to rely on package versions when package is hosted on github, commit sha is more reeliable 55338 2014-02-19 18:34:30 andreypopp oh, there's npm version patch?! I do this https://github.com/andreypopp/react-router-component/blob/master/Makefile#L33 55339 2014-02-19 18:35:08 simenbrekken andreypopp: yeah :) It also makes a tag automatically! 55340 2014-02-19 18:36:19 andreypopp nice 55341 2014-02-19 18:36:22 simenbrekken andreypopp: react-async doesn't list react as a dependency BTW, might be why it borks 55342 2014-02-19 18:36:39 andreypopp needs to add it as a peer dep, I think 55343 2014-02-19 18:37:26 simenbrekken andreypopp: I tried replicating the behavior on the root level without using async but it turns into a horrible, horrible static method mess so I eventually just gave up 55344 2014-02-19 18:37:52 syranide andreypopp: yep peer dep 55345 2014-02-19 18:38:17 andreypopp simenbrekken: I think if you use something like cortex it's not that bad... but yeah 55346 2014-02-19 18:38:26 simenbrekken andreypopp: e.g the Application/FullPageComponent needs to figure out what component that will render according to the current path, and that component needs a fetch static method and bla bla bla bla... 55347 2014-02-19 18:38:50 andreypopp simenbrekken: exactly, I did that in react-app-controller and it was messy 55348 2014-02-19 18:39:03 dnolen_ petehunt: ngReact nice 55349 2014-02-19 18:39:17 petehunt yea 55350 2014-02-19 18:40:18 simenbrekken petehunt: Store idea was great btw! fetchData static not so much, atleast I could never get it working without hackety hack 55351 2014-02-19 18:40:35 petehunt which store idea? 55352 2014-02-19 18:40:42 petehunt flux? 55353 2014-02-19 18:41:08 simenbrekken petehunt: We talked a few days ago about making one/several big stores and having components return what data they need to render 55354 2014-02-19 18:41:49 simenbrekken petehunt: turns out it works perfectly for the webshop I'm doing with stores for products, users, etc. 55355 2014-02-19 18:42:03 petehunt simenbrekken: that's how fb works 55356 2014-02-19 18:42:08 petehunt brb 55357 2014-02-19 18:46:17 justinjaffray is there a nice way to get the vim '%' matchit stuff enabled in jsx? 55358 2014-02-19 18:48:54 andreypopp justinjaffray: probably, mode for as3 will work 55359 2014-02-19 19:13:24 zpao ACTION kicks that webworker test 55360 2014-02-19 20:17:44 Rudeg hey guys, is any way to render simple text node? http://jsfiddle.net/kb3gN/1291/ - something like this(with JSX or without) 55361 2014-02-19 20:19:15 simenbrekken Rudeg: You'll have to wrap that in something or React won't be able to reference it if you want it to update later 55362 2014-02-19 20:19:53 aakashlpin there you go http://jsfiddle.net/H4Ekd/ 55363 2014-02-19 20:20:40 zpao Rudeg: yea, probably just want a <span>. React handles text children, but not as a top level return value 55364 2014-02-19 20:21:23 balpert zpao: well, sort of :) 55365 2014-02-19 20:22:40 Rudeg simenbrekken, aakashlpin, zpao: thanks guys! 55366 2014-02-19 20:23:08 zpao i'll just start putting an asterisk after all of my answers * 55367 2014-02-19 20:23:31 aakashlpin how can I make the `required` attribute optional in this case https://gist.github.com/aakashlpin/9100631#file-bank-js-L95 55368 2014-02-19 20:23:31 zpao (* caveats apply, but this answer might explain enough) 55369 2014-02-19 20:24:23 zpao aakashlpin: looks like it already is? 55370 2014-02-19 20:25:16 aakashlpin what I mean is, I am using 2 different methods to return the exact same code except one attribute 55371 2014-02-19 20:25:50 balpert aakashlpin: just do required={trueOrFalse} and it will do what you want 55372 2014-02-19 20:25:55 aakashlpin the required attr does not accept true or false 55373 2014-02-19 20:26:02 balpert aakashlpin: I know. 55374 2014-02-19 20:26:08 balpert aakashlpin: it will produce the right thing, I promise 55375 2014-02-19 20:26:19 balpert for a boolean attribute like required, `false` means that it will be omitted 55376 2014-02-19 20:26:21 aakashlpin oh wow. let me give it a shot 55377 2014-02-19 20:26:59 zpao required is boolean, so true/false will work 55378 2014-02-19 20:28:09 zpao react understands that some dom properties are truthy (eg, if required is in the html, it is truthy regardless of what value you give it), and will handle changes accordingly 55379 2014-02-19 20:29:49 aakashlpin balpert: works just fine! Thanks! 55380 2014-02-19 20:30:32 balpert aakashlpin: no problem :) 55381 2014-02-19 20:31:34 balpert google spreadsheets now rendering using <canvas>? https://twitter.com/kangax/status/436219472329076737 55382 2014-02-19 20:32:15 aakashlpin balpert: that must have been some crazy amount of work! 55383 2014-02-19 20:32:16 chenglou woah 55384 2014-02-19 20:32:29 chenglou apple still uses svg right 55385 2014-02-19 20:33:27 jules__ this might be more of a javascript question, but why does 'this.myFunc' not appear as a function to lodash given: "myFunc: function(){}. myFuncThrottled: .throttle(this.myFunc, 5000), "? 55386 2014-02-19 20:33:51 chenglou yep, they still do 55387 2014-02-19 20:34:53 aakashlpin jules__>haven't used lodash but maybe you need to bind your `this`? 55388 2014-02-19 20:38:31 jules__ aakashlpin: 'this' seems to be ok, it's more like this.myFunc isn't recognized as a function yet? 55389 2014-02-19 20:41:35 aakashlpin jules__: if you are putting these in a key-value format in an object, this won't work 55390 2014-02-19 20:42:37 aakashlpin you can probably create the throttled function when you need it 55391 2014-02-19 20:42:42 jules__ aakashlpin: yes, this is the problem i think. 55392 2014-02-19 20:47:35 jules__ aakashlpin: the trouble is i'm trying to throttle part of what happens during an input's onChange, and _.throttle returns a function 55393 2014-02-19 20:49:14 aakashgoel jules__ : gist or fiddle? 55394 2014-02-19 21:02:42 simenbrekken jules__: can you gist that please? 55395 2014-02-19 21:04:44 jules__ http://jsfiddle.net/7twTc/ 55396 2014-02-19 21:05:02 simenbrekken jules__: https://gist.github.com/9101545 55397 2014-02-19 21:06:22 simenbrekken jules__: You shouldn't throttle your change or the input will feel laggy but if you're doing something like querying a server you're better of using _.debounce 55398 2014-02-19 21:06:29 jules__ simenbrekken: yes exactly! but what if i want to use the function given to throttle elsewhere? 55399 2014-02-19 21:07:10 simenbrekken jules__: reload the gist! 55400 2014-02-19 21:08:20 jules__ simenbrekken: but what if i also want to be able to instantly call the function that is being debounced elsewhere? 55401 2014-02-19 21:09:45 simenbrekken jules__: reload again, doExpensiveStuff is just a reference to the debounce function, the original isn't changed 55402 2014-02-19 21:10:34 jules__ simenbrekken: ok, so it would require a duplication of the function code? 55403 2014-02-19 21:12:36 simenbrekken jules__: not really, you can still rework that so you only have to call it once, try it now 55404 2014-02-19 21:15:12 jules__ simenbrekken: so this seems to cause a problem in that lodash doesn't recognize this.fetchRabbits as a function 55405 2014-02-19 21:16:05 jules__ simenbrekken: (since it is part of the literal definition?) 55406 2014-02-19 21:16:47 ScamWow Does anyone know if I can use the 'onload' event in React on an img tag. It just doesn't seem to work :( 55407 2014-02-19 21:17:29 zpao ScamWow: coming in 0.9 55408 2014-02-19 21:17:44 zpao onError too 55409 2014-02-19 21:17:45 ScamWow zpao: thanks 55410 2014-02-19 21:20:59 simenbrekken jules__: Sorry something came up, I'll get back to you a bit later 55411 2014-02-19 21:30:39 hashpuppy are there any examples of using the jquery ui date picker with an input rendered by reactjs 55412 2014-02-19 21:31:33 BinaryMuse Building on hashpuppy's question, is there a page/site that serves a purpose similar to https://github.com/angular/angular.js/wiki/JSFiddle-Examples anywhere? 55413 2014-02-19 21:32:53 zpao BinaryMuse: not that i know of, but that looks like it could be useful 55414 2014-02-19 21:35:39 hashpuppy or is this even possible / worth the hassle? 55415 2014-02-19 21:36:06 hashpuppy assuming it is a hassle 55416 2014-02-19 21:38:00 petehunt hashpuppy: not a hassle 55417 2014-02-19 21:38:08 petehunt just call the plugin in componentDidMount(). should work 55418 2014-02-19 23:16:49 elro When mounting on top of server generated react markup, is it necessary for the initial client render to produce the same markup or can it change it? (I want to alter output based on the url hash which is only available client side.) 55419 2014-02-19 23:18:46 myndzi you need to initially supply the same data you rendered with on the server 55420 2014-02-19 23:18:56 myndzi for it to pick up live where you put it 55421 2014-02-19 23:19:16 myndzi you could subsequently transition, but your first render on the client should be the exact same as the first render on the server, i believe 55422 2014-02-19 23:22:37 GreenJello elro, i.e. you use the same initial data; and then you can do a setTimeout with a delay of 0 to update things 55423 2014-02-19 23:23:37 GreenJello alternatively, don't use hashes; use query parameters 55424 2014-02-19 23:24:23 elro Right, so make changes in componentDidMount of the root component 55425 2014-02-19 23:25:24 GreenJello yeah that'd work 55426 2014-02-19 23:26:20 elro Hmm. I think I'll need to experiment a bit. Using query params / doing it server side too would definitely have some advantages. 55427 2014-02-19 23:28:33 GreenJello the main concern is how much changes based on the hash, elro? 55428 2014-02-19 23:28:48 GreenJello if it e.g. goes to a different view; that's a problem 55429 2014-02-19 23:31:24 elro My initial thought was to bring up edit forms in an overlay so that the user retained the context of what they were editing. But it may end up looking better without overlays. 55430 2014-02-20 01:20:33 andreypopp packaged my reactdown thing — https://github.com/andreypopp/reactdown 55431 2014-02-20 01:21:32 GreenJello sweet! 55432 2014-02-20 01:22:12 chenglou andreypopp: oh wow lol, nice 55433 2014-02-20 01:22:44 GreenJello can you require it with browserify? and can you use JavaScript in it? 55434 2014-02-20 01:23:05 andreypopp GreenJello: yes, this compiles into a CommonJS module 55435 2014-02-20 01:23:48 balpert andreypopp: does it work if your components are in the middle of a line? 55436 2014-02-20 01:24:02 andreypopp balpert: yes 55437 2014-02-20 01:24:12 andreypopp output looks like — https://gist.github.com/andreypopp/085e4b498061e3a75fb0 55438 2014-02-20 01:24:53 andreypopp you can bring components into scope with -s/--scope passing a module id 55439 2014-02-20 01:25:54 balpert ahh you're running jsx on the output from marked 55440 2014-02-20 01:26:12 balpert interesting 55441 2014-02-20 01:26:15 andreypopp balpert: yep) 55442 2014-02-20 01:26:35 andreypopp implementation is just 40LOC 55443 2014-02-20 01:27:33 GreenJello I thought it was going to be a markdown parser component, e.g. <Reactdown>{some markdown}</Reactdown> 55444 2014-02-20 01:27:37 andreypopp I'm gonna have a demo of a static site generator which is just webpack + React + reactdown 55445 2014-02-20 01:28:56 andreypopp GreenJello: I think such thing already exists on npm 55446 2014-02-20 02:06:39 petehunt omg, andreypopp using webpack!? 55447 2014-02-20 02:46:58 GreenJello has anyone tried requiring react-tools; and running a bundle through google closure compiler on advanced? 55448 2014-02-20 02:47:18 GreenJello browserify bundle* 55449 2014-02-20 02:51:43 petehunt GreenJello: we are closure compatible 55450 2014-02-20 02:51:51 petehunt adv mode 55451 2014-02-20 02:52:02 petehunt not sure how require will work though 55452 2014-02-20 02:52:23 petehunt https://github.com/facebook/react/pull/1125 55453 2014-02-20 02:52:35 GreenJello oh okay; so that means it wouldn't shorten React.DOM.div to r.a.q or whatever? 55454 2014-02-20 02:53:43 balpert petehunt: is it hard to run tests under closure? I wouldn't think so… 55455 2014-02-20 02:54:48 petehunt balpert: i dont think so 55456 2014-02-20 02:54:54 petehunt i just dont have time to figure it out 55457 2014-02-20 02:55:02 balpert yeah 55458 2014-02-20 03:19:04 waqas For a minute I thought react itself was closure-advanced compatible, but I assume it's only closure applications being allowed to be compatible via a provided externs file? 55459 2014-02-20 03:31:50 Croms Been getting a "Each child in an array should have a unique "key" prop." error. Can't figure out what I'm doing wrong. This is my code: https://gist.github.com/dvennink/5fd6af135e5e56e10f2c 55460 2014-02-20 03:36:20 GreenJello Croms, line 19: return React.DOM.li({key: this.props.get("title")}, this.props.get("title")) (assuming title is unique) 55461 2014-02-20 03:37:58 GreenJello Croms, say you have 10 items, and you insert one somewhere in there; react needs a way to tell where the new one was inserted, or else it has to do a lot more work and possibly rerender the DOM for all of them 55462 2014-02-20 03:40:29 Croms GreenJello: Thanks. I've tried adding a key property with the UUIDs generated by Backbone, but the problem still persists. 55463 2014-02-20 03:41:16 GreenJello Croms, that should work.. maybe you should console.log the uuids 55464 2014-02-20 03:41:30 GreenJello perhaps it's not doing it correctly 55465 2014-02-20 03:46:14 Croms GreenJello: Hmm.. It's generating the right ones. 55466 2014-02-20 03:51:15 GreenJello I dunno, they're strings, right? 55467 2014-02-20 03:51:20 GreenJello Croms ^ 55468 2014-02-20 03:51:45 GreenJello if it's e.g. array uuids it'll fail because [1] === [1] is false 55469 2014-02-20 03:52:43 Croms GreenJello: They should be. http://cl.ly/image/292u223m2F3C 55470 2014-02-20 03:54:22 Croms GreenJello: I was thinking it had something to do with the XHR since the models aren't populated yet. 55471 2014-02-20 03:55:00 GreenJello well then it returns an empty array, which won't give the key warning 55472 2014-02-20 03:56:05 Croms GreenJello: Hmm. That's true. 55473 2014-02-20 03:56:19 GreenJello change line 27 to window.NodeListComponent = React.createClass({displayName: "NodeListComponent", 55474 2014-02-20 03:56:43 GreenJello does the error now show NodeListComponent instead of undefined in the warning? 55475 2014-02-20 03:57:22 Croms GreenJello: Yes, it does. 55476 2014-02-20 03:59:18 GreenJello change line 30 to this.props.map(function (model, index) {console.log(index, model); 55477 2014-02-20 04:00:55 GreenJello and can you show the console output? If model doesn't display well on the console, you can change it to model.get("title") or similar 55478 2014-02-20 04:01:40 GreenJello Croms, oh and does the application generally work? key isn't required, it's just ideal for performance and ux 55479 2014-02-20 04:03:22 Croms GreenJello: Console output: http://cl.ly/image/193V3h2V151A 55480 2014-02-20 04:03:50 Croms GreenJello: Yeah, it does. But the warning is doing my head in. ;—) 55481 2014-02-20 04:06:53 GreenJello hmm... the only other thing I can think of is react not liking the backbone model as props 55482 2014-02-20 04:07:02 Croms GreenJello: If I enclose the list of models with another array the warning disappears. But then React would generate ids starting with [0][0], [0][1], etc.. 55483 2014-02-20 04:07:57 GreenJello in most cases props is a passed as a simple object literal 55484 2014-02-20 04:08:25 GreenJello not an array or instance of anything other than Object 55485 2014-02-20 04:08:50 GreenJello I personally haven't tried anything other than that because I use JSX 55486 2014-02-20 04:09:19 GreenJello so it's definitley less frequently put to the test; but if it doesn't work it's a bug 55487 2014-02-20 04:12:31 Croms GreenJello: The models and collection Backbone generates are object literals. So that can't be it. I just put them under their own keys in props (this.props.model / this.props.collection), but no luck either. 55488 2014-02-20 04:12:55 GreenJello hmm... I'm out of ideas 55489 2014-02-20 04:13:05 GreenJello balpert? salier? chenglou? 55490 2014-02-20 04:14:32 GreenJello Croms, they seem to be away; but you're not doing anything wrong as far as I see, so just carry on, and maybe come back when more people are here for the key issue 55491 2014-02-20 04:15:18 Croms GreenJello: Thanks for your help, mate. 55492 2014-02-20 04:19:28 glennmurray Croms, if you can make it run in a fiddle (eg. http://jsfiddle.net/vjeux/kb3gN/) people will (I would) probably give it a go 55493 2014-02-20 04:20:57 Croms glennmurray: Sure, I'll try. 55494 2014-02-20 04:25:26 chenglou GreenJello: sup 55495 2014-02-20 04:25:55 chenglou Croms: hi 55496 2014-02-20 04:26:15 chenglou the error is here: https://gist.github.com/dvennink/5fd6af135e5e56e10f2c#file-api_reference-js-L31 55497 2014-02-20 04:26:42 chenglou the component will look for a `key` key 55498 2014-02-20 04:26:44 chenglou which your model doesn't have 55499 2014-02-20 04:27:11 chenglou if you monkey patch it by adding model.key = whatever right before you'll see that it works 55500 2014-02-20 04:27:59 GreenJello oh okay, that makes sense :-) 55501 2014-02-20 04:29:04 GreenJello chenglou, in this case you could also replace return NodeListItemComponent with return React.DOM.li({key: model.cid}, model.get("title")), correct? 55502 2014-02-20 04:31:37 Croms chenglou: My man. Warning is gone. 55503 2014-02-20 04:36:52 chenglou GreenJello: yes you can 55504 2014-02-20 04:36:56 chenglou but in this case it wouldn't work 55505 2014-02-20 04:37:16 chenglou because you try to access the model being passed to you in NodeListItemComponent 55506 2014-02-20 04:37:20 chenglou and you don't do that anymore 55507 2014-02-20 04:38:00 chenglou Croms: it's neat to be able to pass the model directly but my preference is not to do so 55508 2014-02-20 04:38:17 chenglou I prefer the explicit object (or better, jsx) for the very reason above 55509 2014-02-20 04:38:50 chenglou if you want to pass the model down, do it explicitly: {bla: 1, myModel: model} 55510 2014-02-20 04:43:38 chenglou I also tend to pass down the strict minimum. This way you don't get tempted doing crazy things to the model reference in the children, which is really hard to debug 55511 2014-02-20 04:44:18 Croms chenglou: Thanks for the pointers. 55512 2014-02-20 04:44:43 chenglou =) 55513 2014-02-20 04:44:48 chenglou Np 55514 2014-02-20 06:02:42 balpert zpao: https://github.com/jsbin/jsbin/pull/1158 55515 2014-02-20 06:03:21 balpert (just fyi) 55516 2014-02-20 06:04:04 GreenJello with-addons should be the default because it's the debug build; which is good for test cases and more helpful error/warning messages. 55517 2014-02-20 06:04:38 balpert GreenJello: was that to me? 55518 2014-02-20 06:06:07 zpao balpert: sweet 55519 2014-02-20 06:06:08 GreenJello just a general note 55520 2014-02-20 06:06:30 GreenJello are you spicyj? 55521 2014-02-20 06:06:37 balpert GreenJello: yes 55522 2014-02-20 06:11:25 GreenJello okay, then it was kinda to you :-) 55523 2014-02-20 06:11:49 balpert it already uses the non-min builds 55524 2014-02-20 06:11:55 GreenJello okay, great 55525 2014-02-20 06:12:01 balpert addons has the same warnings as the non-addons build, it just has addons too 55526 2014-02-20 06:18:44 GreenJello okay, I thought the previous jsbin default was the minified build 55527 2014-02-20 06:19:18 balpert nope, both unminified 55528 2014-02-20 06:19:28 balpert no wait 55529 2014-02-20 06:19:30 zpao GreenJello: when you selected jsx, it added the min build 55530 2014-02-20 06:19:59 GreenJello ah okay 55531 2014-02-20 06:20:46 zpao ACTION kicks githubbot 55532 2014-02-20 06:21:12 balpert GreenJello: thanks, updated 55533 2014-02-20 06:24:07 zpao tomorrow PR for 0.9? 55534 2014-02-20 06:24:12 balpert yup 55535 2014-02-20 06:24:18 balpert as soon as the builds are up 55536 2014-02-20 06:24:21 zpao wooo! 55537 2014-02-20 06:25:51 balpert how long does cdnjs normally take? 55538 2014-02-20 06:27:57 zpao couple hours usually. site takes a bit longer to refresh even after the lib is up 55539 2014-02-20 06:30:15 GreenJello I've had it take a couple days after the pull request is merged to go live; and other times only a few hours for the whole process :-) 55540 2014-02-20 06:35:21 zpao they fast track author PRs a bit. they also have an automated system if you publish to npm but we don't publish the raw lib there so we don't fit that 55541 2014-02-20 06:37:42 GreenJello yeah, true; out of curiosity... how does deployment work for them? CI or big-red-button? 55542 2014-02-20 06:47:31 chenglou excited for 0.8.0 55543 2014-02-20 06:47:44 chenglou I got todomvc cleaned up already lol 55544 2014-02-20 06:48:30 chenglou *0.9.0 55545 2014-02-20 06:55:11 zpao GreenJello: no idea how they work, just that thomas accepts my prs :) 55546 2014-02-20 06:55:33 balpert om nom nom 0.9.0 55547 2014-02-20 06:57:00 GreenJello :-) 55548 2014-02-20 07:04:55 zpao and now to sleep, will push out in the morning (~10PST), and hopefully npm doesn't go down this time... 55549 2014-02-20 07:24:17 krs 0.9 you say? 55550 2014-02-20 07:24:23 krs is it released already? 55551 2014-02-20 07:24:47 zpao nope, ~11 hours. sleep first :) 55552 2014-02-20 07:25:38 zpao ACTION zzzzz for real now 55553 2014-02-20 07:26:00 krs nn! 55554 2014-02-20 07:39:56 dlau oh nice, looking forward to 0.9 :D 55555 2014-02-20 07:40:08 petehunt balpert: whats your react markdown component again? 55556 2014-02-20 07:40:39 balpert petehunt: um, it's not packaged in a useful way at all but http://github.com/Khan/perseus 55557 2014-02-20 07:40:47 petehunt is there one that can be used 55558 2014-02-20 07:40:51 petehunt easilt 55559 2014-02-20 07:40:52 petehunt easily 55560 2014-02-20 07:40:57 petehunt because, holy shit firebase+react 55561 2014-02-20 07:41:13 balpert what do you need? 55562 2014-02-20 07:41:26 balpert does the showdown demo on the homepage work for you? 55563 2014-02-20 07:41:41 petehunt yeah i can do that i guess :P 55564 2014-02-20 07:43:36 balpert not sure if there's a way to tell it to escape html if that's important to you 55565 2014-02-20 07:43:42 balpert I use https://github.com/chjj/marked 55566 2014-02-20 07:56:52 imarcusthis Hello. How do I put a utf8 unicode character into a jsx template? ???? to be precise. 55567 2014-02-20 07:57:30 balpert imarcusthis: it should just work 55568 2014-02-20 07:57:59 balpert you could also try {"\\ud83d"} 55569 2014-02-20 07:58:55 imarcusthis balpert: I think we're running into some trouble because it's more than 16 bits. 55570 2014-02-20 07:59:37 imarcusthis actually putting the literal in there worked locally, but then broke and gave an encoding error in production when uglified. 55571 2014-02-20 07:59:51 balpert that sounds like your uglifying tools have unicode problems 55572 2014-02-20 07:59:56 imarcusthis {"\\ud83d\\udcac"} 55573 2014-02-20 08:00:22 balpert oh, I missed that it was two, sorry 55574 2014-02-20 08:00:42 balpert imarcusthis: anyway, just do whatever you would do when including that character in a JS file 55575 2014-02-20 08:00:44 imarcusthis balpert: well, javascript is only utc-2, so I think we have to do it like that, but it's fugly. 55576 2014-02-20 08:00:50 balpert not really a react-specific problem 55577 2014-02-20 08:01:23 imarcusthis balpert: tried data-icon={"????"} but looked like it escaped it somehow. 55578 2014-02-20 08:01:36 balpert it shouldn't 55579 2014-02-20 08:01:44 balpert you could also try on http://facebook.github.io/react/jsx-compiler.html 55580 2014-02-20 08:01:51 balpert looks like it passes it through directly for me 55581 2014-02-20 08:02:00 balpert if you find a case where it doesn't, please file a bug 55582 2014-02-20 08:04:16 GreenJello imarcusthis, what editor are you using? perhaps it doesn't save as utf8 by default? 55583 2014-02-20 08:11:33 imarcusthis GreenJello: vim. And I don't really think that is the problem. 55584 2014-02-20 08:12:58 imarcusthis probably like balpert says uglify breaks stuff, but I'd really prefer to represent this in the source code as a &#..; thing, and not \\u\\u or a literal. Guess I will go for \\u\\u as it's the only thing I've gotten to work. 55585 2014-02-20 08:13:41 balpert imarcusthis: if you just have that char in a JS file does it work? 55586 2014-02-20 08:14:06 imarcusthis balpert: it works on my dev server, but not when I push to stage, and stuff gets minimized/uglified. 55587 2014-02-20 08:14:56 balpert perhaps the js files have the wrong content-encoding header sent down? 55588 2014-02-20 08:15:17 GreenJello imarcusthis, {"\\u1111"} or whatever will work 55589 2014-02-20 08:15:59 imarcusthis GreenJello: this is actually a multi-byte character which can't be represented in utc-2, so I had to use {"\\ud83d\\udcac"} which is fugly 55590 2014-02-20 08:16:22 GreenJello oh it's multibyte 55591 2014-02-20 08:16:45 imarcusthis I meant ucs-2 55592 2014-02-20 08:29:02 petehunt balpert / people of #reactjs, play with me? http://petehunt.github.io/react-multiplayer/example/ 55593 2014-02-20 08:31:01 andreypopp petehunt: seems like this._rootNodeID + ',' + this._mountDepth is useful — should it be added to component API? 55594 2014-02-20 08:31:17 petehunt maybe 55595 2014-02-20 08:31:34 petehunt andreypopp: open a gh issue if you have a use case 55596 2014-02-20 08:31:47 petehunt actually, i think youll be able to inject that soon 55597 2014-02-20 08:41:12 andreypopp petehunt: #1137 55598 2014-02-20 08:41:14 reactbotx Issue 1137: Unique component identifier https://github.com/facebook/react/issues/1137 55599 2014-02-20 09:31:53 simenbrekken Hunting invariant violations = blerch 55600 2014-02-20 09:38:12 simenbrekken God damnit, I just spent an hour tracking down an invariant violation caused by the space handling differences in 0.9... 55601 2014-02-20 09:49:16 andreypopp woops 55602 2014-02-20 09:51:40 syranide simenbrekken: hmm? also, don't use the minified build 55603 2014-02-20 09:51:53 simenbrekken syranide: it's probably reactify not being updated to 0.9 55604 2014-02-20 09:52:11 syranide simenbrekken: still, don't use the minified build and you'll get great error messages 55605 2014-02-20 10:06:44 andreypopp simenbrekken: install reactify from github in the meantime 55606 2014-02-20 10:06:51 gsl-visitor9 Hello from South Africa 55607 2014-02-20 10:06:58 gsl-visitor9 Quick question re 0.9 55608 2014-02-20 10:07:16 gsl-visitor9 What is the correct method of injecting the TapEventPlugin? 55609 2014-02-20 10:07:26 andreypopp syranide: I'm using simenbrekken uses non-minified build if he's using reactify and doesn't have NODE_ENV set explicitely 55610 2014-02-20 10:26:11 andreypopp s/'m using/think 55611 2014-02-20 10:30:05 gsl-visitor9 What is the correct method of injecting the TapEventPlugin? 55612 2014-02-20 10:42:05 gsl-visitor0 Good morning 55613 2014-02-20 10:42:25 gsl-visitor0 TapEventPlugin, what is the correct way to inject it? 55614 2014-02-20 10:42:42 syranide gsl-visitor0: is there no readme or anything? 55615 2014-02-20 10:44:32 syranide gsl-visitor0: also, unless you're referring to something else, it's already in core, you don't need to inject it 55616 2014-02-20 10:44:47 syranide however you need to initializeTouchEvents() or something like that 55617 2014-02-20 10:49:51 gsl-visitor0 For 0.8 I made a change to change ReactDefaultInjection.js 55618 2014-02-20 10:50:05 gsl-visitor0 and include it in EventPluginHub.injection.injectEventPluginsByName 55619 2014-02-20 10:50:17 gsl-visitor0 we do initializeTouchEvents 55620 2014-02-20 10:52:12 syranide gsl-visitor0: yeah you're right, it seems you need to inject it 55621 2014-02-20 10:52:21 syranide I wonder why it's like that... 55622 2014-02-20 10:52:33 syranide balpert: ? 55623 2014-02-20 10:53:20 syranide gsl-visitor0: you're working with a "bundled React" I assume? and not bundling React with your source code 55624 2014-02-20 10:53:49 gsl-visitor0 Correct, bundled 55625 2014-02-20 10:53:55 gsl-visitor0 0.9.0 55626 2014-02-20 10:54:20 syranide right, so I guess you need to inject it yourself then... but it's really weird why it's done like this 55627 2014-02-20 10:54:26 syranide (and build your own version) 55628 2014-02-20 10:54:44 gsl-visitor0 That's the approach we took with 0.8 55629 2014-02-20 10:54:59 syranide oh 55630 2014-02-20 10:55:03 syranide React.addons.injectEventPluginsByName({ 55631 2014-02-20 10:55:05 syranide TapEventPlugin: React.addons.TapEventPlugin, 55632 2014-02-20 10:55:08 syranide }); 55633 2014-02-20 10:55:35 gsl-visitor0 I'll give that a try 55634 2014-02-20 10:56:22 gsl-visitor0 we need the with addons bundle? 55635 2014-02-20 10:56:30 syranide I believe so 55636 2014-02-20 10:57:08 syranide https://github.com/facebook/react/pull/470/files#diff-b57cd93de3aa127fec3ae236f6cd93ffR18 55637 2014-02-20 10:57:10 syranide is where I found it 55638 2014-02-20 10:57:11 gsl-visitor0 Great, thank you for the help 55639 2014-02-20 10:57:17 syranide it worked? 55640 2014-02-20 10:57:44 syranide but I can't find any documentation on the site 55641 2014-02-20 10:58:34 gsl-visitor0 We trying it right now 55642 2014-02-20 10:58:34 gsl-visitor0 will let you know in a couple mins 55643 2014-02-20 10:58:38 jonathanj so is WhatsApp going to get a React-powered web UI? :P 55644 2014-02-20 10:59:05 gsl-visitor0 Erlang + React = win 55645 2014-02-20 10:59:06 gsl-visitor0 :) 55646 2014-02-20 11:00:54 syranide gsl-visitor0: hmm, it seems that commit was abandonned so it's probably not going to work, it's not an addon 55647 2014-02-20 11:01:04 tarkus .NET / F# + React = Win! 55648 2014-02-20 11:01:10 tarkus :) 55649 2014-02-20 11:02:15 syranide gsl-visitor0: as far as I can tell, you need to inject and build it yourself 55650 2014-02-20 11:02:52 gsl-visitor0 yeah, I'm pulling the latest 0.9 now 55651 2014-02-20 11:02:55 gsl-visitor0 and will do that 55652 2014-02-20 11:03:09 gsl-visitor0 Thanks again for the help 55653 2014-02-20 11:03:14 syranide gsl-visitor0: feel free to submit an issue on it though, it seems weird to me 55654 2014-02-20 11:04:45 syranide gsl-visitor0: btw, your doing React.initialTouchEvents(true); right? (the true) 55655 2014-02-20 11:05:03 gsl-visitor0 Checking 55656 2014-02-20 11:06:54 gsl-visitor0 confirmed, with the (true) 55657 2014-02-20 11:07:25 syranide right, and you're doing it before rendering any component? 55658 2014-02-20 11:07:58 gsl-visitor0 correct, pretty much the first thing we do 55659 2014-02-20 11:08:40 syranide ok, will just have to bug zpao or someone to explain why it's the way it is then ^^ 55660 2014-02-20 11:10:49 andrewofpie out of curiosity, is there a reason to just not have touch events always be turned on? 55661 2014-02-20 11:11:19 syranide andrewofpie: probably an optimization thing, I "overheard" some talks about chrome disabling various optimizations when you add certain events 55662 2014-02-20 11:11:38 andrewofpie ah, I suspected it was a performance thing 55663 2014-02-20 11:29:42 andreypopp syranide: good suggestion on using mixin and global incremental counter! need to consider this in react-async 55664 2014-02-20 11:30:08 syranide ^^ 55665 2014-02-20 12:52:10 simenbrekken How is updating <title> and <meta description> in render? Any experiences? 55666 2014-02-20 12:57:14 insin what is the React build using to rewrite its requires from flat to './blah' for the npm build? I know all the config is in the repo, but... Grunt s Ant :/ 55667 2014-02-20 13:29:32 andreypopp simenbrekken: some IEs break on title.innerHTML, you need to use document.title = ... 55668 2014-02-20 13:29:43 andreypopp simenbrekken: I would do it in componentDidMount 55669 2014-02-20 13:29:46 simenbrekken andreypopp: Yeah it didn't work very well 55670 2014-02-20 13:30:41 andreypopp wrote some docs on react-router-component — http://andreypopp.viewdocs.io/react-router-component — and now it is tested on saucelabs (IE >=9 and everything) 55671 2014-02-20 13:51:19 antihero JSX isn't building 55672 2014-02-20 13:51:26 antihero I'm getting weird syntax errors in installed modules 55673 2014-02-20 13:51:30 antihero which I have no idea how to trace 55674 2014-02-20 13:51:50 syranide npm install + npm update ? 55675 2014-02-20 13:51:52 antihero I thought maybe building to JS would help, but nope, I can't even do that 55676 2014-02-20 13:52:06 antihero using jsx 0.8.2 55677 2014-02-20 13:52:16 antihero it just makes a folder called .module-cache 55678 2014-02-20 13:52:17 syranide 0.8.2 doesn't even exist? 55679 2014-02-20 13:52:38 antihero 0.8.15 sry 55680 2014-02-20 13:52:58 syranide don't know of that either, React 0.8 has been released, that's the only I know of (and 0.9 RC1) 55681 2014-02-20 13:53:06 antihero wtf 55682 2014-02-20 13:53:14 antihero what is the help message for your jsx prog 55683 2014-02-20 13:53:30 syranide I'm running some version of master so no idea 55684 2014-02-20 13:53:47 antihero ah, it's updated to 0.9.0 55685 2014-02-20 13:54:06 syranide anyway, what's your error? 55686 2014-02-20 13:54:08 antihero Ok, it's building now 55687 2014-02-20 13:54:16 antihero there is no error. The output is just "[]" 55688 2014-02-20 13:54:26 syranide huh 55689 2014-02-20 13:54:40 syranide from running ./jsx on code? 55690 2014-02-20 13:56:14 antihero syranide: Here you go: https://gist.github.com/radiosilence/06deabba25bc5f3d8634 55691 2014-02-20 13:57:01 syranide ah, can you actually call jsx on folders? (I have only used it on individual files) 55692 2014-02-20 13:57:37 syranide one sec I'll pull it and test 55693 2014-02-20 13:58:45 syranide oooh wait 55694 2014-02-20 13:58:56 syranide you need to tell it to read .jsx I think 55695 2014-02-20 13:59:04 syranide it only reads .js by default 55696 2014-02-20 13:59:14 syranide -x jsx 55697 2014-02-20 14:00:09 syranide hmm or -x jsx doesn't seem to work 55698 2014-02-20 14:02:37 antihero nice 55699 2014-02-20 14:02:39 antihero it worked for me 55700 2014-02-20 14:02:58 antihero weird that a jsx transformer wouldn't read jsx by default though 55701 2014-02-20 14:03:38 syranide it's a transformation on-top of JS, it's not a separate language ;) 55702 2014-02-20 14:08:47 antihero cool 55703 2014-02-20 14:09:02 antihero with onClick events what would be the best thing to do get data that isn't form data 55704 2014-02-20 14:09:13 antihero say I'd previously do onClick('myID') 55705 2014-02-20 14:09:30 antihero where myID is generated in the nodes = map... 55706 2014-02-20 14:09:36 antihero basically for a little nav 55707 2014-02-20 14:10:40 syranide antihero: hmm? can't you do this.handleClick.bind(null, "myID") ? 55708 2014-02-20 14:10:50 syranide instead of just this.handleClick 55709 2014-02-20 14:10:55 antihero hmm 55710 2014-02-20 14:11:05 antihero Shall I paste (broken) code? 55711 2014-02-20 14:11:08 syranide sure 55712 2014-02-20 14:11:27 antihero https://gist.github.com/radiosilence/1da42d9df829dd431a36 55713 2014-02-20 14:11:29 antihero thanks man 55714 2014-02-20 14:11:39 antihero we're building a pretty big project on React. It's fucking lovely so far. 55715 2014-02-20 14:11:42 antihero coming from angular 55716 2014-02-20 14:11:55 antihero should I really be making each navitem its own component 55717 2014-02-20 14:12:16 antihero yeah that would solve this entirely 55718 2014-02-20 14:12:29 syranide antihero: ah right, so that've fallen for a classic mistake, var thisIsAFunc = func; var thisIsTheReturnValueOfFunc = func(); var thisIsAFuncToo = func.bind(null, "A") 55719 2014-02-20 14:12:50 antihero eh 55720 2014-02-20 14:12:59 syranide onClick={this.activateSubscription(subscription) 55721 2014-02-20 14:13:14 syranide you are calling the function and put its return value as the handler (which is probably undefined) 55722 2014-02-20 14:13:31 syranide onClick={this.activateSubscription} 55723 2014-02-20 14:13:37 syranide if you want to "add an argument" to it 55724 2014-02-20 14:13:45 syranide onClick={this.activateSubscription.bind(null, subscription)} 55725 2014-02-20 14:14:32 antihero riiight 55726 2014-02-20 14:14:37 antihero yeah Ithought it might be something like that 55727 2014-02-20 14:14:45 antihero because there I'm basically calling the function on initialisation 55728 2014-02-20 14:14:50 syranide exactly 55729 2014-02-20 14:14:57 antihero I might just move hte item into it's own thang 55730 2014-02-20 14:15:13 syranide that's one solution, using .bind is another 55731 2014-02-20 14:15:37 syranide .bind is the "less neat" of the two, but depending on the circumstance it might make more sense 55732 2014-02-20 14:15:55 antihero yeah it mkight be a bit overkill 55733 2014-02-20 14:18:10 antihero is there a best practise for ordering classes 55734 2014-02-20 14:18:21 syranide ordering as in sorting? 55735 2014-02-20 14:18:38 syranide oh wait no, you're talking about the code right? 55736 2014-02-20 14:23:53 antihero yeah 55737 2014-02-20 14:23:55 antihero like organisation 55738 2014-02-20 14:24:29 antihero I've got different kinda apps in different files, might sort out some sort of module pattern. 55739 2014-02-20 14:24:32 antihero but for cleanness 55740 2014-02-20 14:25:10 syranide right, I don't know honestly, but at facebook they apparently use no namespaces and probably just sort them into source folders to make it easy to navigate 55741 2014-02-20 14:25:52 syranide I'm probably going to use the same style 55742 2014-02-20 15:05:04 dve Is there a way to 'startup' the Chrome React dev tools if React isn't available as a global? 55743 2014-02-20 15:06:22 simenbrekken dve: window.React = React is what I'm doing in my browserified client 55744 2014-02-20 15:06:45 dve simenbrekken: and you get the devtools tab? 55745 2014-02-20 15:06:51 simenbrekken dve: yeah 55746 2014-02-20 15:08:05 dve simenbrekken: Yea, I expected that to work - but still no tab. 55747 2014-02-20 15:08:36 simenbrekken dve: You'll have to do that immediately, if you're doing it in window.onload it won't work 55748 2014-02-20 15:09:40 dve simenbrekken: Ah yes of cause - thats sorted it. thanks 55749 2014-02-20 15:14:07 pickels Does the react dev tools only show up if React is a global? 55750 2014-02-20 15:14:19 pickels remember installing it a while back but never got the react tab 55751 2014-02-20 15:15:41 simenbrekken pickels: yes. 55752 2014-02-20 15:16:23 simenbrekken imho it should just search for a node that has the data-react attribute set on warmup and just enable it 55753 2014-02-20 15:17:03 pickels ah now it shows up had to restart my browser 55754 2014-02-20 15:17:25 syranide simenbrekken: it needs the React instance 55755 2014-02-20 15:17:32 simenbrekken syranide: ah, ofc. 55756 2014-02-20 15:20:25 antihero how do I setstate with subobjects 55757 2014-02-20 15:21:09 antihero like so I have a list of objects 55758 2014-02-20 15:21:21 antihero then I want to append something to a property of one of those objects 55759 2014-02-20 15:53:00 fforw I have a problem in my app that I'm not sure how it comes into existence or what I made wrong 55760 2014-02-20 15:54:21 fforw in DOMChildrenOperations, I run into a situation where it tries to remove updated children by calling removeChild on the parentNode, but the element already has no parentNode 55761 2014-02-20 15:55:01 fforw "// Remove updated children first so that `toIndex` is consistent." 55762 2014-02-20 15:56:47 antihero anyone use superagent, and is there a way to configure it globally/ 55763 2014-02-20 15:58:28 syranide fforw: I would assume that you are messing with the DOM that belongs to React 55764 2014-02-20 15:59:00 fforw syranide: I think I'm not.. 55765 2014-02-20 15:59:35 fforw that was my thought at first so I rewrote the problematic part in question to be simpler and more react-y, but the problem persists 55766 2014-02-20 15:59:44 syranide got a gist? 55767 2014-02-20 15:59:46 GreenJello_ antihero, you might have better luck in ##javascript 55768 2014-02-20 16:00:19 fforw syranide: the app is huge.. not sure I can isolate it 55769 2014-02-20 16:00:59 fforw the components in question are of a parent component with somehat unusual use-case.. 55770 2014-02-20 16:01:27 fforw it's a focus proxy system I create to provide keyboard interaction for SVG nodes 55771 2014-02-20 16:01:41 syranide fforw: is it a table or p-tag by any chance? 55772 2014-02-20 16:01:51 syranide that might be the issue 55773 2014-02-20 16:02:02 fforw the element is question is jsut a div with lots of <a href/> 55774 2014-02-20 16:02:12 fforw the a elements are the ones without parent 55775 2014-02-20 16:02:44 fforw maybe I can reduce it 55776 2014-02-20 16:03:02 fforw (the scenario, still causing the error) 55777 2014-02-20 16:03:03 syranide strange, it can't be any 3rd party code that's unparenting the nodes? 55778 2014-02-20 16:03:12 syranide or replacing them 55779 2014-02-20 16:04:58 fforw syranide: there are some thirdparty things involved (e.g. codemirror) but unless they run amok, I don'T think they should change something there 55780 2014-02-20 16:06:50 syranide fforw: if you kind of know which nodes that are causing it, you could check them to make sure they still have data-reactid 55781 2014-02-20 16:07:17 fforw syranide: they have 55782 2014-02-20 16:07:57 syranide fforw: but you're looking at the ones in the DOM right? 55783 2014-02-20 16:08:09 syranide and not when it "breaks" 55784 2014-02-20 16:08:25 fforw syranide: the ones it is trying to update and fails 55785 2014-02-20 16:08:57 GreenJello_ codemirror stays contained, I've put it to the test in react 55786 2014-02-20 16:08:59 syranide fforw: right, but if you check the DOM, are they missing or what (since they apparently have no parent) 55787 2014-02-20 16:09:49 fforw syranide: well.. they kind of should be missing.. this happens during an "delete object" operation where certain data entries are removed from the editor states 55788 2014-02-20 16:10:02 fforw the missing ones are supposed to be removed .. 55789 2014-02-20 16:10:40 fforw the DOM contents looks fine 55790 2014-02-20 16:11:31 syranide but that doesn't sound right, they don't have a parent? or have they been cloned or something perhaps 55791 2014-02-20 16:12:01 fforw syranide: they seem to have already been removed from the document, like react removes them twice 55792 2014-02-20 16:12:53 syranide oh hmm... that can technically happen (from the point of view of DOMChildrenOperations), but I can't see how ReactMultiChild could actually cause it though 55793 2014-02-20 16:13:55 fforw it also doesn'T seem to be my app removing things twice.. that would cause a log output which does not happen 55794 2014-02-20 16:14:25 fforw the container in question is really simple.. it has a map of componentIds for which it gives out a ReactLink 55795 2014-02-20 16:14:26 syranide well, from React's point of view, you can't, so that should never be an issue 55796 2014-02-20 16:14:40 fforw it renders one link per entry in that map 55797 2014-02-20 16:14:54 fforw and propagates the focus events to the gfx system 55798 2014-02-20 16:15:13 fforw (keyboard focus / keyboard "click") 55799 2014-02-20 16:15:41 fforw so the deletion might cause multiple state changes there.. 55800 2014-02-20 16:15:53 syranide doesn't matter, updates are still batched 55801 2014-02-20 16:15:57 fforw for every deleted SVG-object, there is on interaction proxy deleted 55802 2014-02-20 16:16:20 syranide no matter how you modify the data, the output should never suffer 55803 2014-02-20 16:16:30 syranide data = props/state 55804 2014-02-20 16:17:11 fforw it's just a state change 55805 2014-02-20 16:17:14 syranide fforw: it's not possible to render that component directly into the document somehow and see if the issue persists? 55806 2014-02-20 16:18:02 fforw syranide: would moving it into it's own "renderComponent" make sense? 55807 2014-02-20 16:18:28 syranide yeah that's what I meant, you don't need to do it for the app, but just to test and see what's causing the issue 55808 2014-02-20 16:23:47 dve Has the boolean PropType changed in 0.9.0? I get the error "prop type `disabled` is invalid; it must be a function,..." 55809 2014-02-20 16:25:00 syranide "bool" 55810 2014-02-20 16:25:12 mstew hi all, just getting started with react so forgive this simple question. What is the best practice for working with modal dialogs (jquery, bootstrap, etc.)? Is it to always render the modal and use show/hide methods via js or is it better to add/remove the modal with conditionals within the render method? Opinions welcomed :) 55811 2014-02-20 16:26:07 syranide mstew: http://jsfiddle.net/LBAr8/ that's a draft of "layers" that they use for Facebook I believe 55812 2014-02-20 16:26:12 dve syranide: thanks! was it previously boolean, or was it just not erroring on that before? 55813 2014-02-20 16:26:21 syranide dve: I have no idea :) 55814 2014-02-20 16:26:38 marksteve need some advice. I have a state that looks something like this: { lists: [ { name: "list 1", entries: [1] } ] } now say I want to add something to lists[0].entries. what's the best way to set the state? 55815 2014-02-20 16:27:45 syranide marksteve: the *best* way it to keep it immutable, so copy lists-array and copy the object with the entries, and copy the entries-array 55816 2014-02-20 16:28:09 mstew syranide thanks for the quick response! this is perfect thank you 55817 2014-02-20 16:28:17 syranide mstew: np 55818 2014-02-20 16:29:19 GreenJello_ the second best way (which is usually okayish), is to do something like var entries = this.state.lists[0].entries; entries.push(2); this.forceUpdate(); 55819 2014-02-20 16:29:43 fforw syranide: seems like making the proxy container its own root component solves the issue 55820 2014-02-20 16:29:50 syranide GreenJello_: right, the long-term problem with that is that you circumvent shouldComponentUpdate 55821 2014-02-20 16:29:58 fforw syranide: looks like a bug to me 55822 2014-02-20 16:30:27 GreenJello_ syranide, oh okay, so would this.setState(this.state) be better? 55823 2014-02-20 16:30:34 marksteve syranide: say I get the new value to be pushed on entries-array from the server. but i don't have the index for the lists item. 55824 2014-02-20 16:30:54 balpert dve: just wasn't retiring 55825 2014-02-20 16:30:59 balpert *erroring 55826 2014-02-20 16:31:03 syranide fforw: hm... renderComponent is not technically equivalent though, so it could be something further up, it could be a bug in React, but I don't think so, it doesn't make sense (to me) 55827 2014-02-20 16:31:06 balpert damn autocorrect :) 55828 2014-02-20 16:31:11 dve balpert: ok, thanks :) 55829 2014-02-20 16:31:47 syranide GreenJello_: as long as you are not using immutable data it doesn't matter, shouldComponentUpdate doesn't work 55830 2014-02-20 16:31:52 GreenJello_ marksteve, generally that's a more complicated state than I can see having 55831 2014-02-20 16:32:03 balpert fforw: if you can make a small repro case please file a bug 55832 2014-02-20 16:32:07 fforw syranide: would it be meaningful that the ProxyContainer was a child of the main editor state holder / the initial update receiver? 55833 2014-02-20 16:32:10 syranide GreenJello_: so while I would probably prefer it, it doesn't really matter 55834 2014-02-20 16:32:14 marksteve syranide: rather than i don't have, I just don't keep it 55835 2014-02-20 16:32:33 syranide marksteve: then how do you know which item to update? 55836 2014-02-20 16:32:46 syranide or do you mean you're getting a "completely new object"? 55837 2014-02-20 16:32:52 syranide if so = immutable = good 55838 2014-02-20 16:34:46 marksteve syranide: i'm getting a new part of the object. I guess I can just add the list item index to its prop and pass that. 55839 2014-02-20 16:35:15 syranide marksteve: { lists: [ { name: "list 1", entries: [1] } ] } 55840 2014-02-20 16:35:17 syranide ups 55841 2014-02-20 16:35:23 syranide so you're getting a new { name: "list 1", entries: [1] } ? 55842 2014-02-20 16:36:09 marksteve syranide: nope. like what GreenJello_ showed. {lists: [{ name: "list 1", entries: [1,2] }]} 55843 2014-02-20 16:36:28 syranide marksteve: ah, that's perfect, just replace the entire object then 55844 2014-02-20 16:37:17 marksteve so i wast thinking of doing [...].map(function(x, i){ return <Node index=i, data=x>; }); 55845 2014-02-20 16:37:25 syranide sounds good 55846 2014-02-20 16:37:57 syranide do these items have any database ids? 55847 2014-02-20 16:38:06 marksteve yep 55848 2014-02-20 16:38:18 syranide great, send them as well, and use <Node key=dbid> 55849 2014-02-20 16:38:43 syranide that way React will move the nodes instead of recreating them if they are reordered 55850 2014-02-20 16:40:26 marksteve syranide: i guess my only issue is the trouble of updating the whole state rather than just the part I want changed. 55851 2014-02-20 16:40:57 syranide marksteve: you mean on your part, or that you think it's inefficient? 55852 2014-02-20 16:41:33 marksteve syranide: on my part I guess. is it a usual pattern to put things in maps instead of lists for easy updating? 55853 2014-02-20 16:42:18 syranide marksteve: not sure if I follow, it doesn't have to be a map? 55854 2014-02-20 16:42:47 syranide React only cares about the "components" output in Render, not the underlying data that created them 55855 2014-02-20 16:44:17 marksteve syranide: i mean for example if i did: {lists:{'id':{name:'list 1',entries:[]}}} I can just copy the state then do stateCopy.lists['id'].entries.push(1) and setState with that copy 55856 2014-02-20 16:45:35 syranide marksteve: completely fine, so the only reason you actually care about the data being immutable is because it allows you to use shouldComponentUpdate, where you can check the prev and next values, and see if something important has changed 55857 2014-02-20 16:46:17 syranide if you copy the *entire* state and modify it, completely fine, if you deal with really huge objects you're going to see a performance hit, but React doesn't care 55858 2014-02-20 16:47:11 syranide optimally, you would shallow copy all objects you're touching instead of deep copying the entire object, but it's not necessary 55859 2014-02-20 16:47:47 syranide I'm actually working on a super simple function that does it for you quite neatly, that might be of interest 55860 2014-02-20 16:49:14 marksteve syranide: yeah I'd like to take a look. 55861 2014-02-20 16:50:58 syranide marksteve: https://gist.github.com/syranide/a1b6275e4a0fe2d978be I haven't put that much thought into it yet, but it's a simple idea 55862 2014-02-20 16:51:13 syranide zpao: was talking with someone earlier, how do you actually use TapEventPlugin? 55863 2014-02-20 16:51:36 syranide it doesn't seem possible unless you build your own react version? 55864 2014-02-20 16:51:59 zpao i believe that's the only way today 55865 2014-02-20 16:52:13 syranide zpao: right, but is there a good reason for it? 55866 2014-02-20 16:52:14 zpao petehunt had a PR to add it to addons 55867 2014-02-20 16:52:38 syranide why isn't even on by default? 55868 2014-02-20 16:53:57 syranide marksteve: also, that example in the file is "bad", if you want to update the array it should be {children: {ray: function() {}}} instead 55869 2014-02-20 16:55:39 marksteve syranide: this is really interesting. thanks! 55870 2014-02-20 16:56:30 zpao syranide: good question. it's in the plugin order, but not in the default injection 55871 2014-02-20 16:56:52 zpao would need to do some looking at history 55872 2014-02-20 16:56:53 syranide zpao: yep, that's all that is missing (he put up a PR for it now I believe) 55873 2014-02-20 17:01:23 marksteve syranide: tried to use it with my usecase. am I doing it right? :P mutate(state, {lists: function(){this[0].entries=mutate(this[0].entries);this[0].entries.push(2)}}); 55874 2014-02-20 17:01:59 syranide marksteve: if you only want to update entries then, newState = mutate(state, {lists: {0: {entries: function() { this.push(2); }}}}); 55875 2014-02-20 17:02:42 syranide you can also update multiple entries with the same mutate-call by just adding more keys+functions to the object 55876 2014-02-20 17:02:43 marksteve syranide: ooh. so indices can be keys. cool! 55877 2014-02-20 17:02:47 syranide yep ^^ 55878 2014-02-20 17:03:03 marksteve syranide: this is just what I needed. thanks! 55879 2014-02-20 17:03:08 syranide np! 55880 2014-02-20 17:06:00 simenbrekken Anyone done full-page rendering on server and client? I'm struggling with keeping metadata updated (title, description etc.) on the client without having the root component unmount. 55881 2014-02-20 17:06:13 marksteve marconi_: marconi? :P 55882 2014-02-20 17:06:40 marconi_ Hello, how do i unmount one component from a list of rendered components? calling React. unmountComponentAtNode doesn't work, not sure if it has something to do with all of them sharing one container? 55883 2014-02-20 17:06:44 syranide simenbrekken: client does not support full-page rendering AFAIK, you can render into the body though 55884 2014-02-20 17:06:51 marconi_ marksteve: :) 55885 2014-02-20 17:07:17 syranide marksteve: you cause another update to happen, and simply not rendering the components you want to disappear 55886 2014-02-20 17:07:18 zpao marconi_: you'll want one container per React.renderComponent call 55887 2014-02-20 17:07:27 syranide oh 55888 2014-02-20 17:07:58 marconi_ @zpao: worried it'll be expensive, will they be executed by batch? 55889 2014-02-20 17:08:04 simenbrekken syranide: The problem is that rendering say a ProductPage into body won't update the <title> 55890 2014-02-20 17:08:27 zpao marconi_: or wrap all of those components in 1 parent component 55891 2014-02-20 17:08:29 simenbrekken syranide: This is an commerce site so it's absolutely crucial metadata is rendered on server and kept updated on the client 55892 2014-02-20 17:08:37 syranide simenbrekken: nope, it needs to be handled "manually" AFAIK 55893 2014-02-20 17:08:52 syranide i.e, with regular javascript 55894 2014-02-20 17:09:10 zpao marconi_: renderComponent is sync, so you'll have N operations for N calls to renderComponent 55895 2014-02-20 17:09:10 syranide but zpao knows for sure 55896 2014-02-20 17:09:24 marconi_ @zpao: will try that one 55897 2014-02-20 17:09:46 simenbrekken syranide: Using window.title = foo wouldn't be too much a problem but I'm trying to avoid having a bunch of if window !== undefined all over the place. 55898 2014-02-20 17:10:17 GreenJello_ simenbrekken, make a seperate module for setting metadata 55899 2014-02-20 17:10:28 simenbrekken GreenJello_: meaning what? 55900 2014-02-20 17:10:58 simenbrekken I still need to have metadata for a given "page" component available to the server 55901 2014-02-20 17:11:00 syranide simenbrekken: you can do it in componentDidUpdate too, just set the title to the title in this.state.title for example 55902 2014-02-20 17:12:01 simenbrekken I can't render my root component until I know what metadata the page component I'm about to render will provide 55903 2014-02-20 17:12:12 simenbrekken It's a bit of a chicken and egg problem... 55904 2014-02-20 17:12:44 GreenJello_ simenbrekken, e.g. function setMetadata(opts){ if (typeof window === "undefined") { doServerStuff(opts); return; } if ("title" in opts) { window.title = opts.title; } ... } } } } 55905 2014-02-20 17:12:52 zpao simenbrekken: 0.9 will introduce statics, which let you store static data on a component 55906 2014-02-20 17:13:15 zpao then you can do access <MyPageComponent>.metadata in the parent 55907 2014-02-20 17:13:30 syranide zpao: you already can today I assume, it's just a bit annoying to do 55908 2014-02-20 17:13:37 simenbrekken zpao: I'm using those already actually. Application.preloadDataForPath(path) 55909 2014-02-20 17:13:39 syranide (or not as nice) 55910 2014-02-20 17:13:55 simenbrekken zpao: ooooh, that's clever. 55911 2014-02-20 17:14:10 zpao syranide: yea, statics just makes it really explicit. other properties will start erroring and break in 0.10. statics will be the way to move forward 55912 2014-02-20 17:14:34 syranide zpao: ah, I mant as in obj.prototype.value = 10; 55913 2014-02-20 17:15:47 zpao syranide: right, though with the way react mucks with prototypes, it can be a bit deceptive. and then if you have a method, you don't know if it's autobound 55914 2014-02-20 17:16:01 zpao so we're clearing the way :) 55915 2014-02-20 17:18:47 marksteve syranide: just added mutate to my util.js :D 55916 2014-02-20 17:19:37 syranide marksteve: cool ^^ I intend to improve it a bit too, and check with the devs and see what their take on it is 55917 2014-02-20 17:19:55 syranide but it seems like a very simple solution to get started 55918 2014-02-20 17:21:30 syranide ^afk 1h 55919 2014-02-20 17:38:11 marconi_ @zpao: it worked! but i have to pre-render each container ahead and pre-select them on componentDidMount. Thanks 55920 2014-02-20 17:39:08 zpao well they aren't rendered yet until they go through render(), so it should be much lighter weight than you think 55921 2014-02-20 17:41:38 marconi_ yes, by pre-render I meant render them ahead instead of render wrapper while trying to render each component too at the same time. Didn't seem possible anyway since renderComponent requires dom node. 55922 2014-02-20 17:56:22 fforw syranide: got it isolated, but the error disappeared,too :\\ 55923 2014-02-20 17:59:03 fforw balpert: ^^ 55924 2014-02-20 17:59:40 balpert fforw: hmm? 55925 2014-02-20 17:59:53 fforw <balpert> fforw: if you can make a small repro case please file a bug 55926 2014-02-20 17:59:57 balpert yes 55927 2014-02-20 18:00:03 fforw <fforw> syranide: got it isolated, but the error disappeared,too :\\ 55928 2014-02-20 18:06:37 balpert I don't know what that means 55929 2014-02-20 18:06:44 balpert if the error disappeared, it doesn't sound like you isolated the error 55930 2014-02-20 18:08:40 fforw balpert: I isolated the part that was involved in the error and which I thought was the deciding factor, but that alone doesn't seem to be it, reduced it to some very simple version of the same, but the error also disappears 55931 2014-02-20 18:13:42 fforw vjeux: salut 55932 2014-02-20 18:13:57 vjeux fforw: coucou 55933 2014-02-20 18:24:13 balpert fforw: well if you can get a simple case where the error does happen I'd still be interested 55934 2014-02-20 18:24:22 fforw balpert: http://fforw.de/static/files/bug.html 55935 2014-02-20 18:24:52 fforw balpert: clicking around in the svg creates objects and clicking on them removes them again 55936 2014-02-20 18:25:05 balpert fforw: okay 55937 2014-02-20 18:25:12 fforw balpert: in this case, the focus proxies are visible, which they'Re normally not 55938 2014-02-20 18:25:26 syranide fforw: your code doesn't error for me it seems 55939 2014-02-20 18:25:53 fforw syranide: yeah.. isolated like this it works fine 55940 2014-02-20 18:26:13 syranide fforw: then I'd look to whatever is above and see if something is funky there ^^ 55941 2014-02-20 18:32:11 fforw syranide: the app is a bit too big to really say with certainty that there's nothing funky going on.. 55942 2014-02-20 18:32:26 fforw but it all shouldn't matter 55943 2014-02-20 18:34:57 balpert fforw: without a case where I can see the error it's very hard to debug the problem 55944 2014-02-20 18:41:56 syranide balpert: that can't be true, it's required for DefaultPluginOrder 55945 2014-02-20 18:42:02 balpert syranide: no it's not? 55946 2014-02-20 18:42:16 balpert keyOf({TapEventPlugin: null}), 55947 2014-02-20 18:42:18 balpert no require 55948 2014-02-20 18:42:21 syranide oooh 55949 2014-02-20 18:42:46 balpert zpao|away: add event plugin ordering to the list of things we need a public API for 55950 2014-02-20 18:47:02 andreypopp \\o/ 55951 2014-02-20 18:47:20 BinaryMuse woot 55952 2014-02-20 18:47:20 GreenJello_ *\\o/* 55953 2014-02-20 18:47:34 balpert dun dun dun 55954 2014-02-20 18:47:43 BinaryMuse upgrade all the things 55955 2014-02-20 18:51:45 dnolen_ nice 55956 2014-02-20 18:54:44 fforw balpert: I can just provide the app it seems.. and even then it's pretty complicated to replicate 55957 2014-02-20 19:03:30 syranide balpert: zpao: I'm curious if you have any input on https://gist.github.com/syranide/0d0c7798c18be3f8a243 as a simple tool for working with immutable data structures 55958 2014-02-20 19:15:57 balpert if you guys want to upvote the blog post on HN, it's around 24 at https://news.ycombinator.com/newest 55959 2014-02-20 19:22:43 ralpht Hi! How do I use the TapEventPlugin in my project? I haven't used browserify or requirejs before. 55960 2014-02-20 19:24:06 nwienert congrats on .9 guys 55961 2014-02-20 19:24:20 nwienert now to get react-async updated for it :) 55962 2014-02-20 19:26:23 andreypopp balpert: reddit? 55963 2014-02-20 19:26:41 andreypopp nwienert: 0.4.0 55964 2014-02-20 19:50:03 tboyt_ been a while since i've popped in irc, but grats on 0.9.0 :) 55965 2014-02-20 19:53:35 sspi congrats everybody on 0.9! 55966 2014-02-20 20:01:41 sspi yay for ReactTestUtils! 55967 2014-02-20 21:04:23 prodigitalSon anybody using promises with backbone ? 55968 2014-02-20 21:05:06 prodigitalSon just curious what cool things can be accomplished with them 55969 2014-02-20 21:06:36 BinaryMuse prodigitalSon: Not Backbone specific, but a good read on promises: https://blog.jcoglan.com/2013/03/30/callbacks-are-imperative-promises-are-functional-nodes-biggest-missed-opportunity/ 55970 2014-02-20 21:07:21 prodigitalSon thanks 55971 2014-02-20 21:12:32 lbljeffmo zpao: https://github.com/facebook/react/pull/1143 55972 2014-02-20 21:14:54 zpao lbljeffmo: https://github.com/facebook/react/pull/1143#issuecomment-35669610 55973 2014-02-20 22:08:02 fforw the problem from before wasnt# 55974 2014-02-20 22:08:18 fforw wasn't even successfully worked around.. I just hurried the test :\\ 55975 2014-02-20 22:08:39 fforw It seems to have something to do with contradictory state updates within one state transition 55976 2014-02-20 22:09:13 fforw buffering the state changes for the proxy component and only updating it after the other is finished provides a real work around 55977 2014-02-20 22:30:44 aakashlpin how can I set line breaks in textarea using state values 55978 2014-02-20 22:31:29 aakashlpin putting <br /> or \\n doesn't work 55979 2014-02-20 22:31:41 aakashlpin it puts a comma instead 55980 2014-02-20 22:32:09 waqas Putting <br/> puts a comma? 55981 2014-02-20 22:32:12 waqas Are you sure? 55982 2014-02-20 22:32:39 fforw linebreaks in a textarea should be "\\n" or "\\r\\n" I guess.. 55983 2014-02-20 22:33:03 syranide aakashlpin: \\n should work, it doesn't? 55984 2014-02-20 22:34:51 aakashlpin no it doesn't 55985 2014-02-20 22:35:03 aakashlpin i am storing the data as an array 55986 2014-02-20 22:35:17 aakashlpin on mount, i join that back on <br/> 55987 2014-02-20 22:35:21 aakashlpin puts a comma 55988 2014-02-20 22:35:27 waqas Ah, are you getting any errors in the browser console? 55989 2014-02-20 22:35:39 aakashlpin nope 55990 2014-02-20 22:39:02 aakashlpin waqas: my bad. got it working 55991 2014-02-20 22:39:13 aakashlpin \\n works fine. 55992 2014-02-20 22:39:29 waqas aakashlpin: Yes, I was about to post http://jsfiddle.net/sXLBj/ 55993 2014-02-20 22:39:56 waqas Also works without defaultValue, but gives a warning 55994 2014-02-20 22:41:31 aakashlpin waqas: yep. thanks! 55995 2014-02-20 22:54:01 ralpht Is it wise to try and find an (owned but nested) child component in an event handler (in a parent/owner)? I want to handle a click on my whole component, but I want to read some state (the dimensions of an asynchronously loaded image in my image component) in the handler. 55996 2014-02-20 22:57:37 ralpht It seems like my state (the image dimensions) is in the child, so I'm going against the stream by trying to read it out higher up the tree... 55997 2014-02-20 22:59:37 syranide ralpht: the child can notify the parent 55998 2014-02-20 23:00:03 syranide oooor, depending on your situation, it can just call a method on the child 55999 2014-02-20 23:00:27 ralpht syranide: I have the child notifying the parent, but I don't like it. I only want the bounds for generating an animation 56000 2014-02-20 23:00:55 ralpht I guess I don't feel like it's very "important" state, and I don't want to clutter a higher level component up with it 56001 2014-02-20 23:01:17 ralpht but this is my first react project, so I still have a lot to learn about how to structure things :) 56002 2014-02-20 23:01:54 syranide ralpht: ^^ hard to tell what the best solution is for your case with that information, but those are basically your two options (it seems) 56003 2014-02-20 23:02:19 ralpht syranide: so how would I find the instance of the child component to call a method on it? 56004 2014-02-20 23:02:19 syranide ^sleep 56005 2014-02-20 23:02:25 syranide ralpht: refs 56006 2014-02-20 23:02:33 syranide <child ref="myref" /> 56007 2014-02-20 23:02:37 ralpht syranide: Ok, I'd forgotten about those 56008 2014-02-20 23:02:39 syranide this.refs.myref.callMethod() 56009 2014-02-20 23:02:47 ralpht thanks :) 56010 2014-02-20 23:02:50 syranide np ^^ 56011 2014-02-20 23:31:36 NigelS react-tools 0.9.0 doesn't seem to be converting <polygon> elements - has anyone else seen this or is there a bug? 56012 2014-02-20 23:40:10 zpao NigelS: that's a bug 56013 2014-02-20 23:51:20 NigelS zpao: aha, darn it - was looking forward to using that ;) 56014 2014-02-20 23:54:21 zpao NigelS: sorry, we messed that up when we added it to React.DOM. i filed #1144 56015 2014-02-20 23:54:22 reactbotx Issue 1144: Polygon missing from transform, but in React.DOM https://github.com/facebook/react/issues/1144 56016 2014-02-21 01:06:11 balpert_ I love boolean arguments 56017 2014-02-21 01:10:14 zpao at least it's an options object with a boolean 56018 2014-02-21 01:10:55 balpert_ oh, I meant ReactServerRenderingTransaction.getPooled(true/false) 56019 2014-02-21 01:11:01 zpao oh 56020 2014-02-21 01:11:05 balpert_ I don't mind the options 56021 2014-02-21 01:11:19 balpert_ noChecksumNoID is a funny name though 56022 2014-02-21 01:11:24 balpert_ (not sure I have better ideas) 56023 2014-02-21 01:12:26 chenglou balpert_: please do suggest better ones, I dont like them either 56024 2014-02-21 01:12:59 balpert_ I would probably go for something more opaque but more normal sounding like 'staticMarkup' 56025 2014-02-21 01:13:33 chenglou ^ welp you just invalidated my long search for a better name 56026 2014-02-21 01:14:19 balpert_ {doIWantToAdoptThisMarkupLater: NO} 56027 2014-02-21 01:17:54 chenglou balpert_: #1030 56028 2014-02-21 01:17:54 reactbotx Issue 1030: In IE8, HTML5 tags such as `<section>` aren't supported https://github.com/facebook/react/issues/1030 56029 2014-02-21 01:18:07 chenglou should add html5shiv to docs polyfills 56030 2014-02-21 01:18:08 balpert_ oh also we wanted to add docs I guess 56031 2014-02-21 01:18:09 balpert_ yeah 56032 2014-02-21 01:18:13 balpert_ okay I'll do it 56033 2014-02-21 01:23:02 liammcl_ great work on 0.9. Only upgrade problem I had was the change to componentDidMount. Also, I had to add displayName to get the developer tools to show the component names. 56034 2014-02-21 01:23:11 balpert_ liammcl_: are you not using JSX? 56035 2014-02-21 01:23:44 balpert_ (the JSX transformer will add displayName for you) 56036 2014-02-21 01:25:39 liammcl_ ahh. That's why. I'm not using jsx. 56037 2014-02-21 01:26:37 balpert_ cool 56038 2014-02-21 01:44:06 fforw balpert: the newest details about my problem seem to point to some combination of conflicting state changes causing the problem 56039 2014-02-21 01:44:15 balpert interesting 56040 2014-02-21 01:44:53 fforw my initial work-around worked around it only in so far as it would break the feature thus the doubly-deleted components did not come into existence in the first place 56041 2014-02-21 01:45:24 fforw in the end it turned out that it doesn't matter whether the proxycontainer is a root component or not 56042 2014-02-21 01:45:42 fforw what helped was not actually causing updates to the proxy container 56043 2014-02-21 01:46:15 balpert fforw: you said you could provide the app -- if you can send me a link and repro instructions I can look into it 56044 2014-02-21 01:46:23 fforw just collecting all the component registrations and deregistrations during update and then flushing it out as state change for the proxy container on componentDidUpdate 56045 2014-02-21 02:00:54 varikin Goddamn it. As I write out a long involved question, I figure out the answer. Thank you 56046 2014-02-21 02:01:04 balpert haha 56047 2014-02-21 02:01:07 balpert post it anyway? 56048 2014-02-21 02:01:10 balpert on stack overflow 56049 2014-02-21 02:01:26 varikin well, lets see if it works or not first 56050 2014-02-21 02:05:08 moniker nice, grats on getting 0.9 out 56051 2014-02-21 02:05:28 varikin I was just trying to pass events from a grandchild to a grandparent component. Realized the middle component can just do <Middle onSelect={this.props.onSelect} /> instead of adding another handler to the middle component that just passed it on. Does that seem like the best way to handle such a situation? 56052 2014-02-21 02:12:23 GreenJello varikin, that's perfectly valid 56053 2014-02-21 02:12:30 varikin thans 56054 2014-02-21 02:12:32 varikin thanks 56055 2014-02-21 02:12:47 inkwellian Hey all. Is the --harmony flag for jsx new in the 0.9 rc? 56056 2014-02-21 02:13:31 lbljeffmo zpao: do you know how __DEV__ gets set in react tests? 56057 2014-02-21 02:13:44 zpao inkwellian: yes it is 56058 2014-02-21 02:13:48 zpao lbljeffmo: i don't 56059 2014-02-21 02:14:03 zpao oh yes i do 56060 2014-02-21 02:14:25 zpao we replace __DEV__ with process.environment === "production" 56061 2014-02-21 02:14:37 zpao (er, !==) 56062 2014-02-21 02:14:50 inkwellian zpao: nice! 56063 2014-02-21 02:14:54 lbljeffmo zpao: gotcha, is that done during the build step? 56064 2014-02-21 02:14:58 zpao lbljeffmo: yea 56065 2014-02-21 02:15:02 lbljeffmo ok cool 56066 2014-02-21 02:16:30 lbljeffmo zpao: also -- jest will require that we have a config object for it somewhere. Ideally it would be a json file (something like jestConfig.json) 56067 2014-02-21 02:16:37 lbljeffmo do you have a preference for where I should put that? 56068 2014-02-21 02:16:42 lbljeffmo root? support/jest? 56069 2014-02-21 02:17:06 zpao root is fine for now 56070 2014-02-21 02:17:21 zpao i want to reorg some things. root is getting messier and messier 56071 2014-02-21 02:17:32 lbljeffmo ok 56072 2014-02-21 02:18:08 lbljeffmo I guess it'll also need a few scripts (like a preprocessor and an environment setup script) that probably make sense to go into support/jest anyway 56073 2014-02-21 02:19:01 ScamWow I'm trying to animate something on exit/entry and I'm seeing that it works fine on initialization; push/pop, but if I try to merely replace the object with setState, it doesn't animate anything. Anyone has any idea? Is that case not handled? 56074 2014-02-21 02:19:45 ScamWow I tried to put the code on JSFiddle; but it came back with "unexpecetd identifier" 56075 2014-02-21 02:45:05 GreenJello is this a valid react application? React.renderComponent(<div>foo</div>, document.body); 56076 2014-02-21 02:45:47 GreenJello I'm having issues with jsbin; so just making sure it's not my invalid code.. 56077 2014-02-21 02:46:09 GreenJello http://jsbin.com/meqaqudi/2/edit 56078 2014-02-21 02:47:04 zpao GreenJello: yes 56079 2014-02-21 02:47:11 GreenJello hmm... 56080 2014-02-21 02:48:58 balpert GreenJello: /** @jsx React.DOM */ 56081 2014-02-21 02:50:13 GreenJello ah thanks balpert 56082 2014-02-21 03:03:17 charuru >If you're inclined to use setProps() on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in render(). 56083 2014-02-21 03:03:21 charuru what is this talking about? 56084 2014-02-21 03:03:25 charuru how do you do that? 56085 2014-02-21 03:03:50 balpert dlau: could you sign the cla at http://developers.facebook.com/opensource/cla/? 56086 2014-02-21 03:03:58 dlau oh 56087 2014-02-21 03:03:58 dlau ure 56088 2014-02-21 03:04:01 dlau sure* 56089 2014-02-21 03:04:33 fforw charuru: setProps is meant for unusual situations and not something you should do if you can absolutely avoid it 56090 2014-02-21 03:05:03 charuru fforw: thanks how do i change the properties of a component from a jquery plugin then? 56091 2014-02-21 03:05:08 GreenJello I use setProps with cortex, which is totally awesome :-) 56092 2014-02-21 03:05:24 charuru what is cortex? 56093 2014-02-21 03:05:44 GreenJello charuru, https://github.com/mquan/cortex 56094 2014-02-21 03:05:57 charuru thanks 56095 2014-02-21 03:06:09 fforw charuru: that might be one of the unusual situations, but it can also be just the situation for a manually registered event handler 56096 2014-02-21 03:06:14 fforw or a callback.. 56097 2014-02-21 03:06:15 fforw depends 56098 2014-02-21 03:07:38 charuru i have a div of a certain color, when i click on it i want to change the color to red, i have onclick, component.setProps() to red 56099 2014-02-21 03:07:39 charuru is that wrong? 56100 2014-02-21 03:08:42 fforw charuru: why does that need jQuery and react? 56101 2014-02-21 03:08:59 charuru well it's a simplified example 56102 2014-02-21 03:09:45 charuru what i really have is an element on the page, then there's a popover using the bootstrap popover plugin, then when you click on the settings inside the bootstrap popover it changes the element 56103 2014-02-21 03:10:09 charuru how do I do that? :D 56104 2014-02-21 03:10:30 charuru do I use states instead of prop? 56105 2014-02-21 03:12:07 dlau balpert: alright, signed it, I had to make a facebook account lol 56106 2014-02-21 03:12:22 balpert dlau: hah. we also have a PDF somewhere we could have sent you 56107 2014-02-21 03:12:42 rithm I'm encountering an issue with removing and adding <td>s using react. 56108 2014-02-21 03:12:55 fforw charuru: not sure if others protest that wisdom, but the popup thing seems to me like you're having the bootstrap popup as an intermediary thing between two react component hierarchy 56109 2014-02-21 03:12:58 dlau its ok hehe 56110 2014-02-21 03:13:18 balpert dlau: thanks! 56111 2014-02-21 03:13:27 charuru fforw: yeah I think that's accurate 56112 2014-02-21 03:13:44 charuru is it wrong? i would use a react component if it exists but not sure 56113 2014-02-21 03:13:50 fforw charuru: initial react content creates pop over which mounts a new react component hierarchy for the "inside" of the popover 56114 2014-02-21 03:14:05 dlau no problem, surprised nobody else caught it ... i was going a bit copy and paste crazy and it confused me a bit haha 56115 2014-02-21 03:14:16 balpert dlau: it just changed yesterday or something 56116 2014-02-21 03:14:30 dlau oh in 0.9? that makes sense then 56117 2014-02-21 03:14:59 charuru is there a way to force setProps to work? 56118 2014-02-21 03:15:17 charuru Uncaught Error: Invariant Violation: replaceProps(...): You called `setProps` or `replaceProps` on a component with an owner. This is an anti-pattern since props will get reactively updated when rendered. Instead, change the owner's `render` method to pass the correct value as props to the component where it is created. 56119 2014-02-21 03:15:19 charuru this is what i get 56120 2014-02-21 03:15:29 rithm I'm building a table with react that allows for fast searching 56121 2014-02-21 03:15:57 rithm However, whenever I single it down to a single element very quickly, react crashes, saying that the parent Node is undefined. 56122 2014-02-21 03:16:13 balpert dlau: yeah, it was just ReactTransitionGroup before 56123 2014-02-21 03:16:20 rithm It was working fine when I was using <div>s 56124 2014-02-21 03:16:41 rithm I swapped them out with <td>s and now I'm experiencing these issues. 56125 2014-02-21 03:16:44 charuru React.renderComponent(<ColorRampHorizontal start='#F2FA07' end='#083AFF' min='500' max='4000'/>, $('#color_ramp_0')[0]); 56126 2014-02-21 03:16:51 charuru this is what my renderComponent looks like 56127 2014-02-21 03:17:10 charuru i want to change the start and end color dynamically 56128 2014-02-21 03:17:23 charuru if setProps doesn't work what does? 56129 2014-02-21 03:18:23 rithm Anyone else experience an issue with this before? 56130 2014-02-21 03:19:21 fforw charuru: in this case you could rightfully set new values for start,end,min and max from the "outside" 56131 2014-02-21 03:20:30 fiatjaf use state. 56132 2014-02-21 03:20:48 fiatjaf or not. 56133 2014-02-21 03:21:03 fiatjaf I forgot I don't know enough about this to give advice. 56134 2014-02-21 03:21:13 fforw charuru: a component with an owner would not be one that is created by React.renderComponent 56135 2014-02-21 03:21:49 fiatjaf I'm really stuck trying to figure out what does react mean by "Each child in an array should have a unique "key" prop. Check the render method of undefined." 56136 2014-02-21 03:22:23 fforw fiatjaf: if you render an array of components, React likes every component in that array to have a "key" prop 56137 2014-02-21 03:22:42 fiatjaf even if the components are totally different? 56138 2014-02-21 03:22:43 fforw fiatjaf: which uniquely identifies that component over time 56139 2014-02-21 03:22:51 balpert rithm: add <tbody> between <table> and <tr> 56140 2014-02-21 03:22:51 fiatjaf a div and a button 56141 2014-02-21 03:23:14 fforw fiatjaf: I think yes, as long as you pass them in as array child of a component 56142 2014-02-21 03:23:16 fiatjaf I'm using coffeescript with "pure js" syntax 56143 2014-02-21 03:23:36 fiatjaf so every nested component is inside a list, technically. 56144 2014-02-21 03:24:11 fforw the "Check the render method of undefined" is caused by your component having no displayName.. I think you can just set a displayName: "MyName", in your class definition 56145 2014-02-21 03:24:30 fiatjaf sometimes it is one element alone, sometimes two or more components with from totally different kinds (like a div and a button) 56146 2014-02-21 03:24:56 fiatjaf but I don't know which element is causing this. it could be anyone. 56147 2014-02-21 03:25:14 fiatjaf maybe it is just elements of the same kind? 56148 2014-02-21 03:25:23 rithm @balpert that did the trick! What was the story there? Is the reconciliation highly specific? 56149 2014-02-21 03:25:36 balpert rithm: browsers add a tbody which confuses react right now 56150 2014-02-21 03:25:38 balpert I'd like to fix this 56151 2014-02-21 03:26:01 rithm @balpert, yep that's why I was confused as well. 56152 2014-02-21 03:26:20 rithm For now this is good, thanks for the help dudeski. 56153 2014-02-21 03:27:09 charuru how do you access the owner 56154 2014-02-21 03:27:12 charuru component from a child? 56155 2014-02-21 03:28:07 fiatjaf charuru: you can't. 56156 2014-02-21 03:28:15 charuru oh 56157 2014-02-21 03:28:20 fiatjaf charuru: you have to pass a function from owner to child. 56158 2014-02-21 03:28:28 fiatjaf charuru: and call it from the child. 56159 2014-02-21 03:28:32 charuru ahh thanks 56160 2014-02-21 03:28:47 fiatjaf charuru: this way you can set values on parent's state and do all sorts of things. 56161 2014-02-21 03:29:45 charuru does anyone know if there's an example 56162 2014-02-21 03:29:51 charuru for passing a function from owner to child? 56163 2014-02-21 03:30:41 fiatjaf rithm: look at this: http://bpaste.net/show/VnXiofFeUUvvsJtMVh3J/ 56164 2014-02-21 03:30:49 fiatjaf is it missing keys? 56165 2014-02-21 03:30:50 GreenJello charuru, <child onSomeEvent={this.someFunction} /> 56166 2014-02-21 03:30:58 charuru thanks a lot 56167 2014-02-21 03:31:01 rcs charuru: http://facebook.github.io/react/tips/communicate-between-components.html 56168 2014-02-21 03:31:11 charuru thank you very much :) 56169 2014-02-21 03:31:34 GreenJello lispy coffeescript! :-) 56170 2014-02-21 03:32:11 fiatjaf :) 56171 2014-02-21 03:32:13 charuru what if I don't have any events? 56172 2014-02-21 03:32:23 charuru can i just call the function without using an event like 'click'? 56173 2014-02-21 03:32:55 rcs charuru: Yes. <child fancyFunction={this.someFunction}> . In child, someFunction will be available as this.props.fancyFunction . 56174 2014-02-21 03:32:59 fiatjaf charuru: yes, but if you don't have events when will you call the function? 56175 2014-02-21 03:33:13 charuru rcs: thanks! 56176 2014-02-21 03:33:18 GreenJello charuru, yeah you can have them be anything; but events are the most common case 56177 2014-02-21 03:34:07 fiatjaf GreenJello: do I need to put keys on all those elements there? 56178 2014-02-21 03:34:17 fiatjaf (on my paste) 56179 2014-02-21 03:34:56 GreenJello fiatjaf, I believe so; but if you run it with the unminified build it'll let you know if it wants them 56180 2014-02-21 03:35:02 GreenJello React's the authority here :-) 56181 2014-02-21 03:35:10 fiatjaf I'm running with unminified 56182 2014-02-21 03:35:19 fiatjaf he says the problem is on "undefined" 56183 2014-02-21 03:35:38 fiatjaf Each child in an array should have a unique "key" prop. Check the render method of undefined. 56184 2014-02-21 03:36:05 fiatjaf I'll keep trying. 56185 2014-02-21 03:36:48 charuru wow it works 56186 2014-02-21 03:36:51 charuru thank you guys so much :D 56187 2014-02-21 03:36:54 charuru it's all clicking for me now 56188 2014-02-21 03:37:07 rcs fiatjaf: It's saying "undefined" because displayName is unset. Look at e.g. https://gist.github.com/darthapo/8832901#file-reactjs-coffeescript-example-coffee-L18-L20 56189 2014-02-21 03:37:33 GreenJello fiatjaf, yeah it looks like it wants them there; but I'd have it be many children rather than one array child 56190 2014-02-21 03:38:21 GreenJello fiatjaf, so (div id: 'settings', [NormalField(), NormalField(), NormalField()]) becomes (div id: 'settings', NormalField(), NormalField(), NormalField()) 56191 2014-02-21 03:38:56 GreenJello not sure how to do that multiline in CS, though (this is CS, right?) 56192 2014-02-21 03:39:21 fiatjaf yes. 56193 2014-02-21 03:39:23 fiatjaf OH 56194 2014-02-21 03:39:26 fiatjaf you're right. 56195 2014-02-21 03:39:56 fiatjaf I thought I always had to pass the child elements in a list 56196 2014-02-21 03:40:21 fiatjaf never bothered to check the at the jsx compiler. 56197 2014-02-21 03:43:36 fiatjaf thanks :) 56198 2014-02-21 04:09:18 vjeux fyi, jsfiddle is updated 56199 2014-02-21 04:09:21 vjeux to 0.9 56200 2014-02-21 04:12:16 chenglou petehunt: your monthly reminder that the Thinking in React post is awesome and should be displayed more prominently on the site =) 56201 2014-02-21 04:12:39 petehunt chenglou: do something about it 56202 2014-02-21 04:12:40 petehunt :P 56203 2014-02-21 04:12:54 petehunt i think we could expand the tutorial 56204 2014-02-21 04:12:58 petehunt and include that as part of it 56205 2014-02-21 04:13:03 petehunt for now you could put it in the nav 56206 2014-02-21 04:13:12 chenglou that and react-one-hour-email 56207 2014-02-21 04:13:18 chenglou real hidden gems 56208 2014-02-21 04:14:04 chenglou I'll put that in my tasks to rethink some bits of the docs 56209 2014-02-21 04:14:17 chenglou thinking in react definitely needs to be somewhere more visible 56210 2014-02-21 05:21:44 zpao GreenJello: just came back to your jsbin on my screen, still having issues? 56211 2014-02-21 05:22:20 GreenJello zpao, nope I got it working :-) 56212 2014-02-21 05:22:38 GreenJello I'm trying to make a react tutorial series on making an interactive pokedex :-D 56213 2014-02-21 05:23:16 zpao awesome. have you seen http://passy.github.io/react-pokemon/? 56214 2014-02-21 05:23:34 GreenJello yeah! that's where I got the idea 56215 2014-02-21 05:23:48 GreenJello I was going to include that as an example of reusable components 56216 2014-02-21 05:24:20 GreenJello "We don't know how this is implemented, but here's the very simple docs: so we can use it" 56217 2014-02-21 05:25:03 GreenJello docs: https://www.npmjs.org/package/react-pokemon 56218 2014-02-21 05:25:58 cpojer omg GreenJello ! so excited 56219 2014-02-21 05:26:00 cpojer make it happen 56220 2014-02-21 05:27:48 GreenJello if either of you have time, this is my first draft of the first video: http://www.youtube.com/watch?v=hOJ_HmNSQUQ&feature=youtu.be 56221 2014-02-21 05:28:10 GreenJello please let me know where it can be improved if you can :-) 56222 2014-02-21 05:30:06 cpojer I like your voice! 56223 2014-02-21 05:30:17 cpojer it is calm 56224 2014-02-21 05:30:26 cpojer GreenJello: be sure to run your recording through http://auphonic.com :) 56225 2014-02-21 05:31:02 dlau oh cool I didnt know something like that existed 56226 2014-02-21 05:31:07 dlau that auphonic thing 56227 2014-02-21 05:31:09 cpojer yes 56228 2014-02-21 05:31:15 GreenJello nice tip cpojer :-) 56229 2014-02-21 05:31:16 cpojer I built this! 56230 2014-02-21 05:31:26 dlau oh, awesome! :) 56231 2014-02-21 05:31:28 cpojer well, the iOS and Android apps that hook into the service 56232 2014-02-21 05:31:42 dlau oh youre Christoph Pojer 56233 2014-02-21 05:31:47 cpojer haha 56234 2014-02-21 05:31:47 dlau lol 56235 2014-02-21 05:31:52 cpojer that guy! 56236 2014-02-21 05:31:59 dlau clicking around randomly on the site .. 56237 2014-02-21 05:32:02 cpojer I even wrote a thesis on it: http://www.scribd.com/doc/119192966/Building-the-Auphonic-Mobile-Web-Application 56238 2014-02-21 05:32:14 cpojer which is now horribly outdated as the app is written pre-react :( 56239 2014-02-21 05:34:17 GreenJello cpojer, if this works well I'll use it on all of my videos 56240 2014-02-21 05:34:29 cpojer awesome 56241 2014-02-21 05:34:32 GreenJello you'll get a 10% cut, which at current rates 56242 2014-02-21 05:34:35 GreenJello ACTION punches numbers 56243 2014-02-21 05:34:47 GreenJello $0.43/yr :-) 56244 2014-02-21 05:34:49 cpojer I hope its 16 billion 56245 2014-02-21 05:34:58 cpojer I wanna buy that hubble telescope 56246 2014-02-21 05:35:14 GreenJello you could print out a picture of the hubble telescope 56247 2014-02-21 05:35:23 GreenJello well... a small one on medium quality 56248 2014-02-21 05:35:23 balpert I was surprised that NASA costs $10B/yr to run 56249 2014-02-21 05:35:27 balpert I would have guessed less 56250 2014-02-21 05:35:58 GreenJello wow... yeah; I mean what do they need besides staff, internet, and electricity? 56251 2014-02-21 05:36:32 GreenJello well lots of Internet, and lots of servers I suppose 56252 2014-02-21 05:36:42 balpert they probably do space stuff too 56253 2014-02-21 05:36:44 dlau did the 10b include the space shuttle stuff? 56254 2014-02-21 05:36:54 GreenJello oh I read that as NSA :-) 56255 2014-02-21 05:36:57 cpojer NASA doesn't operate any more space shuttles 56256 2014-02-21 05:36:59 balpert GreenJello: haha 56257 2014-02-21 05:37:03 dlau they used to ._. 56258 2014-02-21 05:37:20 GreenJello give NASA whatever they want; they invented tinfoil 56259 2014-02-21 05:37:39 dlau no they didnt, the aliens taught them how to do it 56260 2014-02-21 05:37:40 GreenJello we're forever in their debt 56261 2014-02-21 05:38:26 GreenJello well the history books say otherwise dlau :-) and they're always written with honesty and integrity! 56262 2014-02-21 05:38:47 dlau american honesty ;) 56263 2014-02-21 05:41:12 GreenJello cpojer, upload is 36.5% done... my ISP doesn't like uploading... 56264 2014-02-21 05:41:35 cpojer yeah, server is located in germany 56265 2014-02-21 05:41:37 cpojer sooo 56266 2014-02-21 05:41:51 cpojer also, you can play with the algorithm settings, they are really specific depending on your recording 56267 2014-02-21 05:42:42 GreenJello cpojer, how is the algorithm different from iMovie's "I don't know what I'm doing" button? 56268 2014-02-21 05:42:54 cpojer there are maaaany algorithms 56269 2014-02-21 05:42:57 cpojer and they are super smart 56270 2014-02-21 05:43:03 cpojer machine learning + manual adjustments 56271 2014-02-21 05:43:13 GreenJello oh okay, cool :-) 56272 2014-02-21 05:43:20 cpojer iMovie only has a small subset of that 56273 2014-02-21 05:44:10 cpojer auphonic is pretty awesome if you have a recording with only one mic and multiple speakers - imagine one speaker to be very far away and therefore his voice is very quiet; now, auphonic realizes that and equalizes all speakers so the loudness is the same 56274 2014-02-21 05:44:16 cpojer which is not a trivial problem 56275 2014-02-21 05:44:19 GreenJello machine learning is really interesting, but past my level of understanding. I tried to make a learning tic-tac-toe game, but I think I was doing it way wrong... 56276 2014-02-21 05:44:53 GreenJello maybe you could give me some pointers on where to start with that? I'd really love to get something working. 56277 2014-02-21 05:46:16 cpojer pretty sure there should be stuff on Coursera 56278 2014-02-21 05:57:31 GreenJello sweet cpojer! I found one that looks really good; I just hope I can translate the concepts to JS 56279 2014-02-21 05:59:29 GreenJello cpojer, one of the problems with the auphonic was it amplified the flaws in my voice :/ 56280 2014-02-21 06:00:06 cpojer GreenJello: feel free to send in feedback with the id to your production and Georg will definitely take a look 56281 2014-02-21 06:01:41 GreenJello :-) 56282 2014-02-21 06:17:16 GreenJello here's the example with the <Pokemon> element http://jsbin.com/hotizuco/3/edit 56283 2014-02-21 06:19:07 GreenJello er this is better: http://jsbin.com/hotizuco/4/edit 56284 2014-02-21 06:19:19 GreenJello (click the pokemon pictures) 56285 2014-02-21 07:21:43 tarkus Is there an example how to render <html> with React? 56286 2014-02-21 07:22:10 tarkus (aka full-page rendering) 56287 2014-02-21 07:26:56 rcs tarkus: https://github.com/andreypopp/react-quickstart 56288 2014-02-21 09:56:05 simenbrekken there's a billion reload on file change nodemon supervisor, node-dev out there. Has anyone found one that works well with react server dev? 56289 2014-02-21 09:59:39 GreenJello simenbrekken, they're probably all about the same 56290 2014-02-21 09:59:52 syranide balpert: wow that bug fforw reported was a weird one ^^ 56291 2014-02-21 10:00:05 GreenJello simenbrekken, ideal would be to keep the server running, and just reload your modules 56292 2014-02-21 10:00:32 balpert syranide: perhaps I should have mentioned in the issue that I had already diagnosed the cause 56293 2014-02-21 10:00:38 balpert I was feeling too lazy to explain it though 56294 2014-02-21 10:00:40 syranide oh 56295 2014-02-21 10:00:51 syranide ^^ 56296 2014-02-21 10:00:51 GreenJello but it takes a very strong codebase to handle that correctly 56297 2014-02-21 10:01:06 simenbrekken GreenJello: Yeah, the problem is that the modules i require on the server are cached by node internals so they don't get re-read 56298 2014-02-21 10:01:11 balpert syranide: I guessed at the cause and then wrote the repro case from that 56299 2014-02-21 10:01:22 balpert syranide: fforw's app was much much more complicated ;) 56300 2014-02-21 10:01:29 GreenJello simenbrekken, you can destroy the module cache, or partially destroy it 56301 2014-02-21 10:01:43 GreenJello and then modules are reloaded 56302 2014-02-21 10:01:50 syranide balpert: oh cool, I would never have guessed that ^^ 56303 2014-02-21 10:01:50 GreenJello (when you require them, that is) 56304 2014-02-21 10:02:00 syranide I was quite skeptical when talking to him ;) 56305 2014-02-21 10:02:02 balpert syranide: I challenge you to write a simpler repo ;) 56306 2014-02-21 10:02:05 balpert repro 56307 2014-02-21 10:03:27 syranide balpert: I did simplify it slightly, but I'm kind of confident that it is basically a minimal repro 56308 2014-02-21 10:03:33 balpert I figured that there's no way you should get that error ever 56309 2014-02-21 10:03:45 balpert even if you're doing strange things 56310 2014-02-21 10:03:48 GreenJello simenbrekken, it's a good test to see if it can work; but you'll have to implement an unbinding mechanism which can be difficult 56311 2014-02-21 10:04:09 GreenJello e.g. how do you unbind from an express route? 56312 2014-02-21 10:04:28 simenbrekken I don't use express routing 56313 2014-02-21 10:04:37 GreenJello just an example :-) 56314 2014-02-21 10:04:39 balpert syranide: really I think the solution here is to queue the operations that aren't in multichild in the same queue and do something intelligent for cases like this 56315 2014-02-21 10:04:40 GreenJello what do you use? 56316 2014-02-21 10:04:52 GreenJello you could probably do it very simply with director or similar 56317 2014-02-21 10:05:02 syranide balpert: hmm 56318 2014-02-21 10:05:03 balpert syranide: because apparently it's important for perf to do the single innerHTML call 56319 2014-02-21 10:05:48 syranide balpert: right, but while there may be some obstacle to it, basically just wrapping component calls in batchedUpdates would be the *optimal* solution 56320 2014-02-21 10:05:51 syranide right? 56321 2014-02-21 10:05:51 simenbrekken GreenJello: I just use url-pattern really 56322 2014-02-21 10:06:08 syranide you still have the issue of separate component calls causing it though... 56323 2014-02-21 10:06:55 syranide I don't know, I kind of feel like renderComponent should be a boundary, it should not get caught in the same processUpdate 56324 2014-02-21 10:06:58 syranide s 56325 2014-02-21 10:07:16 balpert syranide: yeah, that would probably fix some stuff 56326 2014-02-21 10:07:22 balpert hmm 56327 2014-02-21 10:07:35 balpert I am tempted to agree 56328 2014-02-21 10:07:41 syranide basically, if processQueues is active when renderComponent is called, queue it instead 56329 2014-02-21 10:07:53 balpert queue what, the renderComponent? 56330 2014-02-21 10:08:02 syranide yeah 56331 2014-02-21 10:08:06 balpert hmm 56332 2014-02-21 10:08:06 balpert I also don't want all of React core to know about multichild 56333 2014-02-21 10:08:30 syranide right, I guess this could be in updateChildren? perhaps not... 56334 2014-02-21 10:08:37 syranide also, there's the issue of unmountComponentAtNode 56335 2014-02-21 10:08:44 syranide which should get called immediately 56336 2014-02-21 10:09:01 balpert I guess that could force a flush, assuming we don't want to make that async too 56337 2014-02-21 10:09:12 simenbrekken Hmms, now that statics are out I suddenly need mixins for statics as well oO 56338 2014-02-21 10:09:21 syranide you can't make unmountComponentAtNode async, since its parents would already be gone by then 56339 2014-02-21 10:09:35 syranide however, I don't think it's actually a problem, unmountComponentAtNode is always separate 56340 2014-02-21 10:09:41 syranide *separate I believe 56341 2014-02-21 10:10:11 lbljeffmo shit 56342 2014-02-21 10:10:25 cpojer haha 56343 2014-02-21 10:10:28 cpojer move on, nothing to see here 56344 2014-02-21 10:10:33 balpert lol 56345 2014-02-21 10:12:23 balpert lbljeffmo: http://stackoverflow.com/a/817345/49485 56346 2014-02-21 10:13:15 lbljeffmo balpert: I really just need to go home. I mixed up "origin" and "upstream" in my head when I typed the command I wanted 56347 2014-02-21 10:15:09 balpert lbljeffmo: I don't believe your setupEnv.js 56348 2014-02-21 10:15:15 balpert does that really work? 56349 2014-02-21 10:17:11 balpert mm maybe it does… 56350 2014-02-21 10:17:25 syranide heh 56351 2014-02-21 10:20:14 simenbrekken Will I go to hell if I access component.state from the parent? 56352 2014-02-21 10:20:35 syranide yes 56353 2014-02-21 10:20:41 syranide satan will become your BFF 56354 2014-02-21 10:20:47 simenbrekken wow, heavy. 56355 2014-02-21 10:21:17 syranide I know, don't risk it... anyway, expose a method on the child instead say getName() 56356 2014-02-21 10:21:30 syranide which returns the data you want 56357 2014-02-21 10:21:34 balpert …oooooor restructure your app so it's already at the parent 56358 2014-02-21 10:21:37 simenbrekken Basically my App components render needs to access my Page's metadata 56359 2014-02-21 10:21:39 syranide or that ^^ 56360 2014-02-21 10:21:56 simenbrekken I can't render my App until I know what title the underlying Page has 56361 2014-02-21 10:22:12 simenbrekken <title>My Fancy Pants Product - Super Site! 56362 2014-02-21 10:22:18 balpert simenbrekken: perhaps a good case for a static method on the Page class? 56363 2014-02-21 10:22:55 simenbrekken balpert: I knew you'd say that but then I don't have the data required to return My Fancy Pants because I don't have the name of the product being rendered yet 56364 2014-02-21 10:23:17 balpert where does the name come from then? 56365 2014-02-21 10:24:09 simenbrekken balpert: ideally the data comes from componentDidMount but I'm doing this on the server so... 56366 2014-02-21 10:24:27 simenbrekken Right now I'm borrowing from petehunt's idea using a global Store that I preheat with the right data. 56367 2014-02-21 10:24:37 balpert can you have the static method read from that store? 56368 2014-02-21 10:24:48 simenbrekken balpert: Yeah, that's probably it 56369 2014-02-21 10:24:49 syranide hmm balpert the more I think about it, the more it seem as though there should be one ReactMultiChild instance per root (or data stored per root rather), I can't (right now) get all the edge-cases to work out in my head otherwise 56370 2014-02-21 10:25:12 syranide it's also what I would intuitively expect 56371 2014-02-21 10:25:17 balpert syranide: well the whole point of the current queueing mechanism is so that innerHTML can be set on all roots at the same time 56372 2014-02-21 10:25:32 balpert adffa9b0f4128ca4832ddd03fdeca2c9fe434689 56373 2014-02-21 10:25:33 syranide balpert: right, but where talking about separate renderComponent calls, not components 56374 2014-02-21 10:25:33 reactbotx Commit: Batch Child Markup Generation 56375 2014-02-21 10:25:34 reactbotx Setting `innerHTML` is slow: http://jsperf.com/react-child-creation/2 56376 2014-02-21 10:25:35 reactbotx This reduces the number of times we set `innerHTML` by batching markup generation in a component tree. 56377 2014-02-21 10:25:36 reactbotx As usual, I cleaned up the `ReactMultiChild` module significantly. 56378 2014-02-21 10:25:37 reactbotx == Children Reconciliation == 56379 2014-02-21 10:25:38 reactbotx When a `ReactNativeComponent` reconciles, it compares currently rendered children, `prevChildren`, with the new children, `nextChildren`. It figures out the shortest series of updates required to render `nextChildren` where each update is one of: 56380 2014-02-21 10:25:39 reactbotx - Create nodes for a new child and insert it at an index. 56381 2014-02-21 10:25:40 reactbotx - Update an existing node and, if necessary, move it to an index. 56382 2014-02-21 10:25:40 syranide *we are 56383 2014-02-21 10:25:41 reactbotx - Remove an existing node. 56384 2014-02-21 10:25:42 reactbotx This serializable series of updates is sent to `ReactDOMIDOperations` where the actions are actually acted on. 56385 2014-02-21 10:25:43 balpert lol reactbotx 56386 2014-02-21 10:25:43 reactbotx == Problem == 56387 2014-02-21 10:25:44 reactbotx There are two problems: 56388 2014-02-21 10:25:45 reactbotx # When a `ReactNativeComponent` renders new children, it sets `innerHTML` once for each contiguous set of children. 56389 2014-02-21 10:25:46 reactbotx # Each `ReactNativeComponent` renders its children in isolation, so two components that both render new children will do so separately. 56390 2014-02-21 10:25:47 reactbotx For example, consider the following update: 56391 2014-02-21 10:25:48 reactbotx React.renderComponent(

    , ...); 56392 2014-02-21 10:25:49 reactbotx React.renderComponent(

    , ...); 56393 2014-02-21 10:25:50 reactbotx This will trigger setting `innerHTML` four times. 56394 2014-02-21 10:25:51 reactbotx == Solution == 56395 2014-02-21 10:25:52 reactbotx Instead of enqueuing the series of updates per component, this diff changes `ReactMultiChild` to enqueue updates per component tree (which works by counting recursive calls to `updateChildren`). Once all updates in the tree are accounted for, we render all markup using a single `innerHTML` set. https://github.com/facebook/react/commit/adffa9b0f4128ca4832ddd03fdeca2c9fe434689 56396 2014-02-21 10:25:56 simenbrekken Oh reactbotx, you silly Nigerian spammer you. 56397 2014-02-21 10:26:00 balpert syranide: ^^ 56398 2014-02-21 10:26:04 syranide right :) 56399 2014-02-21 10:26:21 syranide anyway, yes I agree with you per root, but not necessarily across roots 56400 2014-02-21 10:26:29 syranide which is the issue here 56401 2014-02-21 10:27:58 balpert maybe 56402 2014-02-21 10:28:04 balpert it would be nice if it were fast across roots too 56403 2014-02-21 10:28:17 balpert I should check if that works across iframes 56404 2014-02-21 10:28:18 syranide definitely agreed, but I don't think it's possible 56405 2014-02-21 10:29:00 balpert I don't know if you can move nodes across iframe boundaries, do you? 56406 2014-02-21 10:29:01 syranide simply because renderComponent with a new node, should be synchronous 56407 2014-02-21 10:29:07 syranide doubt it 56408 2014-02-21 10:29:22 balpert mmm well we don't promise that, I don't think 56409 2014-02-21 10:29:39 syranide hmm? we don't move nodes in the hiearchy at all 56410 2014-02-21 10:29:52 balpert Danger.createNodesFromMarkup or whatever 56411 2014-02-21 10:29:59 syranide ah you mean into iframes? 56412 2014-02-21 10:30:02 balpert yes 56413 2014-02-21 10:30:05 balpert if you render into an iframe 56414 2014-02-21 10:30:21 balpert we should have tests for that 56415 2014-02-21 10:30:22 syranide right, I saw some issue about it a few weeks back, it would be really cool, but at the moment I don't think we do 56416 2014-02-21 10:30:25 balpert I'm not sure we have any 56417 2014-02-21 10:31:07 balpert (createNodesFromMarkup not in Danger) 56418 2014-02-21 10:31:23 syranide I feel like renderComponent and unmountComponentNodeAt must be synchronous (or async), not sometimes one or the other 56419 2014-02-21 10:36:41 balpert that makes sense 56420 2014-02-21 10:44:21 balpert commenting out createMountWarningMembrane makes the tests 40% faster :\\ 56421 2014-02-21 10:49:55 hareth thx for the release : D 56422 2014-02-21 10:50:55 balpert hareth: hope it's going well, no problems? 56423 2014-02-21 10:52:09 hareth xI'll tell you after this weekend when I'll have time to play with it more : D 56424 2014-02-21 10:52:28 hareth at my work we use angular :°( 56425 2014-02-21 10:57:27 balpert aww 56426 2014-02-21 10:57:36 cpojer awwww, you poor lad! 56427 2014-02-21 10:58:10 fforw balpert: your reduction of the problem looks so simple 56428 2014-02-21 10:58:37 balpert fforw: took a bit of thinking :) 56429 2014-02-21 11:01:36 balpert fforw: I'll think about solving it 56430 2014-02-21 11:01:45 balpert syranide was looking too 56431 2014-02-21 11:02:02 syranide to me it seems like making ReactMultiChild "per root" is the solution 56432 2014-02-21 11:02:10 fforw balpert: for a start it's a great relief for me that it's a real bug and I'm not just crazy or stupid ;) 56433 2014-02-21 11:02:21 syranide fforw: sorry for doubting you :D 56434 2014-02-21 11:03:12 lbljeffmo balpert: indeed it does 56435 2014-02-21 11:03:43 balpert lbljeffmo: I see you're skipping the recast vendor/constants step 56436 2014-02-21 11:04:13 lbljeffmo I am -- but I don't know what that step does? 56437 2014-02-21 11:04:41 balpert it's mostly for the npm stuff I guess 56438 2014-02-21 11:05:01 balpert setting __DEV__ as a global is fine for testing I think 56439 2014-02-21 11:05:13 lbljeffmo balpert: yea, our tests assume __DEV__ is set 56440 2014-02-21 11:05:21 lbljeffmo at least a few do 56441 2014-02-21 11:05:37 balpert yeah, ImmutableObject 56442 2014-02-21 11:05:50 balpert I'm actually not sure how those are working now 56443 2014-02-21 11:06:38 lbljeffmo I think __DEV__ is set to process.environment !== 'production' or something in the build step (which happens before running the phantom tests) 56444 2014-02-21 11:07:31 balpert yes, but those tests then set window.__DEV__ to test prod behavior 56445 2014-02-21 11:08:22 lbljeffmo do they? 56446 2014-02-21 11:08:42 lbljeffmo are you sure? I didn't see anything interesting setting __DEV__ when I grepped earlier 56447 2014-02-21 11:09:32 balpert I may be misremembering 56448 2014-02-21 11:10:39 lbljeffmo I see that ImmutableObject-test sets window.__DEV__ in the test 56449 2014-02-21 11:10:41 lbljeffmo but that's ok 56450 2014-02-21 11:11:02 balpert right -- I'm confused how that works in the current open source test runner 56451 2014-02-21 11:11:19 balpert because I thought __DEV__ is transformed before tests 56452 2014-02-21 11:11:28 balpert so that doesn't do anything 56453 2014-02-21 11:11:43 lbljeffmo oh I see what you mean 56454 2014-02-21 11:11:45 lbljeffmo heh interesting 56455 2014-02-21 11:11:46 lbljeffmo its possible 56456 2014-02-21 11:12:24 balpert there aren't any things that call only testProd 56457 2014-02-21 11:12:30 balpert they're all dev and prod 56458 2014-02-21 11:12:32 balpert that's why 56459 2014-02-21 11:12:38 lbljeffmo yep 56460 2014-02-21 11:12:53 lbljeffmo lol 56461 2014-02-21 11:13:14 lbljeffmo well luckily jest doesn't suffer from this problem, and the tests still pass -- sound I guess we've lucked out 56462 2014-02-21 11:13:23 lbljeffmo *so 56463 2014-02-21 11:14:03 balpert jst too I assume works 56464 2014-02-21 11:14:29 lbljeffmo yea 56465 2014-02-21 11:24:18 fforw to me it seems like making ReactMultiChild "per root" is the solution 56466 2014-02-21 11:24:38 fforw syranide: but the problem does not only occur when using multiple root nodes.. it also happens with just a single one 56467 2014-02-21 11:24:46 syranide fforw: it does? 56468 2014-02-21 11:25:00 fforw syranide: yeah.. the multi-root thing was just the first attempt at evasion 56469 2014-02-21 11:25:08 syranide you got a repro? 56470 2014-02-21 11:25:16 fforw I try.. 56471 2014-02-21 11:25:31 syranide because I don't see how you can get with only a single root 56472 2014-02-21 11:28:12 fforw syranide: the in-app case I deployed for balpert does only use one renderComponent already 56473 2014-02-21 11:28:35 fforw syranide: wait.. would be it be enough for another unrelated root coming in temporarily? 56474 2014-02-21 11:28:42 syranide and you're not using setProps/replaceProps or anything like that? 56475 2014-02-21 11:28:51 fforw syranide: there is a popup involved in the deletion 56476 2014-02-21 11:28:58 fforw which has its own root 56477 2014-02-21 11:29:07 syranide yeah so then you dont have one root? 56478 2014-02-21 11:30:11 fforw syranide: did not think about the popup at first.. also had a version with multiple roots just for the non-popup UI / the proxy container 56479 2014-02-21 11:30:18 syranide ^^ 56480 2014-02-21 11:33:18 MrAzulay Does anyone know anything about using mediastreams (objectURLs) with React and attaching them to video/audio elements? Does react provide a shim behind the scenes for the different browser variants? (there seems to be mozSrcObject, src and srcObject depending on browser) Looking here http://facebook.github.io/react/docs/tags-and-attributes.html, only the "src"-attribute seems to exist 56481 2014-02-21 11:34:29 syranide MrAzulay: audio/video are currently kind of broken in React if you move any ancestor siblings, at all, https://github.com/facebook/react/pull/870 56482 2014-02-21 11:37:37 MrAzulay Oh thats good to know 56483 2014-02-21 11:39:08 MrAzulay Trying to understand what that means.. move ancestor siblings? 56484 2014-02-21 11:39:50 syranide MrAzulay: if any siblings, to it or its parents are added/moved/removed it can cause audio/video to pause 56485 2014-02-21 11:40:00 syranide siblings = nodes before or after the node 56486 2014-02-21 11:40:09 GreenJello is onChange implemented for contentEditable in 0.9.0? 56487 2014-02-21 11:41:21 MrAzulay Thanks for the clarification, thats kinda serious then 56488 2014-02-21 11:41:42 syranide MrAzulay: yep, but that PR has a fix, it has just not been accepted yet 56489 2014-02-21 11:44:34 MrAzulay Great well done 56490 2014-02-21 11:45:42 syranide MrAzulay: btw as for your original question, if those elements are something of necessity, feel free to open an issue or even push a PR 56491 2014-02-21 11:46:04 syranide but I have not personally used audio/video so have little input 56492 2014-02-21 11:50:43 GreenJello darn.. https://github.com/facebook/react/issues/278 56493 2014-02-21 11:51:19 MrAzulay yes, I guess mediastreams are not used so much yet so it would be surprising if it just works 56494 2014-02-21 11:51:53 MrAzulay i will try it out and open an issue if theres a problem 56495 2014-02-21 11:53:53 antihero It'd be so handy if JSXTransformer told me which file the error is in, not just the line number. 56496 2014-02-21 11:54:07 syranide antihero: it kind of does, if you check the blue line above the red error 56497 2014-02-21 11:54:20 GreenJello antihero, I think it was fixed in 0.9.0 56498 2014-02-21 11:54:22 syranide or you mean in browser? 56499 2014-02-21 11:59:01 antihero ooh 56500 2014-02-21 11:59:02 antihero neat 56501 2014-02-21 11:59:34 antihero I'm not sure what I'm doing wrong here: https://gist.github.com/radiosilence/27bbe4d099acbb510366 56502 2014-02-21 12:00:04 syranide antihero: you've made button self-closing 56503 2014-02-21 12:00:12 syranide and also missing a > at the end 56504 2014-02-21 12:00:37 antihero Aaaah 56505 2014-02-21 12:00:38 syranide oh that was a bug in gist 56506 2014-02-21 12:00:39 antihero thanks 56507 2014-02-21 12:00:41 antihero yeah 56508 2014-02-21 12:00:47 antihero but the self closing is what I dun goofed 56509 2014-02-21 12:00:52 syranide ^^ 56510 2014-02-21 12:00:56 antihero I can't wait to show you guys this project when it's done 56511 2014-02-21 12:01:02 syranide cool :D 56512 2014-02-21 12:01:08 antihero We're a funded startup too :) 56513 2014-02-21 12:01:16 syranide oh, any I've heard of? 56514 2014-02-21 12:02:35 antihero Probably not, it's in the UK 56515 2014-02-21 12:02:39 antihero not sure I can say anything tbh 56516 2014-02-21 12:02:41 antihero ;) 56517 2014-02-21 12:02:47 syranide ah right right :) 56518 2014-02-21 12:02:59 antihero But I'm sure once we launch I'll post a link 56519 2014-02-21 12:03:39 syranide btw as I've been told, when you launch I'm sure they would love it if you would post something about your experience with react 56520 2014-02-21 12:14:56 antihero is there a way to instantiate props from an object 56521 2014-02-21 12:15:48 syranide antihero: === child() 56522 2014-02-21 12:15:59 syranide so just assign them to a var abc = this.props.abc; 56523 2014-02-21 12:16:03 syranide 56524 2014-02-21 12:16:16 syranide if that's what you mean 56525 2014-02-21 12:17:28 antihero hmm 56526 2014-02-21 12:17:48 antihero so say I have {src: 'hi', alt: 'moo'} and I want to create an img 56527 2014-02-21 12:18:15 antihero I mean I can wrap it up in data={myobject} 56528 2014-02-21 12:18:19 antihero but it's a bit less good 56529 2014-02-21 12:20:00 syranide aha 56530 2014-02-21 12:20:13 syranide just avoid JSX for that and use React.DOM.img(myObject); 56531 2014-02-21 12:20:34 syranide I've been prodding them to add that to JSX, but they've been reluctant 56532 2014-02-21 12:21:45 syranide with cloneWithProps that's now an addon, you could also send a as a prop 56533 2014-02-21 12:21:50 syranide and just clone it when you render it 56534 2014-02-21 12:21:54 fforw syranide: add as a super duper special ? 56535 2014-02-21 12:22:09 syranide fforw: yeah either that or something like 56536 2014-02-21 12:23:08 syranide https://github.com/facebook/react/issues/944 56537 2014-02-21 12:23:14 syranide feel free to voice your opinions 56538 2014-02-21 12:23:18 fforw syranide: Is it really worth it when you can just selectively use React.DOM instead? 56539 2014-02-21 12:24:04 syranide fforw: I get that, but it seems weird to tout JSX as better than plain JS for this (which it is), and then just not handle that case because you don't have to do it with JSX 56540 2014-02-21 12:24:20 syranide why not have JSX for all cases? 56541 2014-02-21 12:24:38 andreypopp https://twitter.com/andreypopp/status/436838324561379328/photo/1 — ignore the russian text, this is just the comparison between web app and web sites (does this thing still exist?) requirements 56542 2014-02-21 12:24:46 fforw syranide: well.. I think the claim is it looking more cleanly, but nevertheless it's just syntactic sugar 56543 2014-02-21 12:25:02 syranide fforw: to me it's more readable (the end tags) 56544 2014-02-21 12:25:14 syranide other than that, yeah, I would personally use plain JS instead 56545 2014-02-21 12:25:32 syranide but it's a mess trying to read larger pieces of HTML when written as JS 56546 2014-02-21 12:25:43 syranide andreypopp: ^^ 56547 2014-02-21 12:25:51 fforw I ended up throwing all JSX out of my app because it require-jsx was just too much of a pain to debug etc 56548 2014-02-21 12:26:24 syranide fforw: yeah, the major point I feel may be in JSXs favor is that it opens up possibilities for optimizations in the future 56549 2014-02-21 12:26:31 fforw syranide: I used to use my own DOM builder which kind of looked very similar to React.DOM code, so maybe I'm just used to it 56550 2014-02-21 12:27:21 fforw maybe I should move my project to gulp / browserify 56551 2014-02-21 12:27:32 fforw / reactify 56552 2014-02-21 12:28:41 andreypopp fforw: yes, commonjs is much much better, though I'd recommend to look at webpack 56553 2014-02-21 12:30:44 fforw the problem is that everything node is alien code from my project's perspective, and r.js optimizer runs in rhino 56554 2014-02-21 12:51:52 hareth sorry to ask but what is the new "context" things, is there any doc on it ? 56555 2014-02-21 12:53:06 steverandy where can i find the steps to add TapEventPlugin 56556 2014-02-21 12:53:30 syranide steverandy: you simply need to add it to ReactDefaultInjection or whatever it is called 56557 2014-02-21 12:53:46 syranide there's a recent PR about it 56558 2014-02-21 12:53:50 syranide check that 56559 2014-02-21 12:53:57 steverandy syranide: do i need to build it manually with grunt? 56560 2014-02-21 12:54:03 syranide yep 56561 2014-02-21 12:57:21 steverandy why is it not bundled by default? seems very useful to me 56562 2014-02-21 12:57:44 syranide steverandy: because not everyone wants it, they want to make it "plugin:able" though 56563 2014-02-21 13:05:24 patrio_ valueLink can't be used for . Is this doable with react? It looks like the the webkit attr is removed. 57596 2014-02-24 15:44:08 adhorton anyone know which PR is tracking the fix for latest transformer hint problems? 57597 2014-02-24 15:44:34 adhorton I just want to know what to watch so I can switch my tooling back to hinting jsx files 57598 2014-02-24 16:00:05 adhorton I'm using 0.9.0 and html entities create return React.DOM.div( {className:"padlock-locked-bg graphic-cell"}   ); 57599 2014-02-24 16:04:10 gwdev Hey folks—if using Browserify to build your app, is there an easy way to "fake" exposing a React global to be able to use the chrome dev tools? 57600 2014-02-24 16:20:21 simenbrekken gwdev: window.React = React 57601 2014-02-24 16:20:37 simenbrekken gwdev: Don't do it in window.onload, just chuck it in the top of your client bundle after you require React 57602 2014-02-24 16:20:52 gwdev Simple enough—thanks simenbrekken 57603 2014-02-24 16:22:35 dve Am I right in assuming that react ids dont effect the checksum value? 57604 2014-02-24 16:30:11 syranide dve: you're not :) 57605 2014-02-24 16:30:14 syranide they do affect 57606 2014-02-24 16:30:19 dve ooo 57607 2014-02-24 16:30:35 syranide the checksum is just a checksum of all the generated markup 57608 2014-02-24 16:31:13 dve Ok, that explains it :) 57609 2014-02-24 16:31:26 dve seem to be having unending battles with checksum issues after serverside full page rendering 57610 2014-02-24 16:32:01 dve thought Id got it sussed, but my over-zealous npm update-ing seems to have bitten me 57611 2014-02-24 16:32:18 syranide heh 57612 2014-02-24 16:32:31 syranide it's not 0.8 vs 0.9 that is causing it? 57613 2014-02-24 16:32:42 syranide someone used the older JSX server-side 57614 2014-02-24 16:32:47 dve no that was last weeks issue :) 57615 2014-02-24 16:32:51 syranide ah :) 57616 2014-02-24 16:33:22 dve when I renderComponent my app client side I am getting all different reactids 57617 2014-02-24 16:33:52 dve the structure is identical, just the ids differnet 57618 2014-02-24 16:34:17 simenbrekken I had the same problem 57619 2014-02-24 16:34:31 syranide dve: .1.2 vs .r[1].[1] ? 57620 2014-02-24 16:34:31 simenbrekken Different whitespace output from node-jsx and react 57621 2014-02-24 16:34:54 simenbrekken But I guess that's easily solved by declaring peerDeps 57622 2014-02-24 16:35:20 dve syranide: sadly not, the id format is the same 57623 2014-02-24 16:35:35 syranide dve: ok, is the root that is different, or is everything different? 57624 2014-02-24 16:35:42 dve syranide: yes! 57625 2014-02-24 16:35:46 syranide which one :) 57626 2014-02-24 16:35:47 Timmeh meant to ask about that, actually, how does React "detect" valid server side rendering? it's just checksum + reactids? 57627 2014-02-24 16:35:59 dve the root id 57628 2014-02-24 16:36:12 syranide Timmeh: checksum(serverhtml) === checksum(clienthtml) 57629 2014-02-24 16:36:40 syranide dve: ah, one is 0 and the other is 1 or something I assume? 57630 2014-02-24 16:37:27 dve i.e. local = html _> 57651 2014-02-24 16:43:12 syranide sounds like a really weird policy ^^ 57652 2014-02-24 16:43:42 syranide there is a javascript implementation in latest PHP I believe, but I'm not sure if it's up to the task (if that's what you are using) 57653 2014-02-24 16:44:48 Timmeh yea, looked at the possibilities, had some internal discussions, but not getting there :-) 57654 2014-02-24 16:45:12 Timmeh fact of the matter is that I just won't be able to do it :-P 57655 2014-02-24 16:45:17 syranide ^^ 57656 2014-02-24 16:45:30 Timmeh for now just client side rendering will suffice 57657 2014-02-24 16:45:49 syranide it's only the initial rendering, may I ask what kind of site it is for? 57658 2014-02-24 16:45:51 Timmeh so I'm fine for now :-) 57659 2014-02-24 16:46:16 syranide you *can* work around it by simply generating the markup that you like, and before React renders over it, you read the value of the input 57660 2014-02-24 16:46:27 syranide and then insert it back in after React has rendered (or pre-update the state) 57661 2014-02-24 16:47:04 Timmeh yes, that's what I'm actually considering now 57662 2014-02-24 16:49:32 syranide it's just that you end up with two different versions of the code which will most certainly degrade over time 57663 2014-02-24 16:49:54 nwienert i have server/client passing working with 0.9 using reactasync 57664 2014-02-24 16:50:25 nwienert i found if i tried to wrap the server stuff with anything, i had to be sure to remove any whitespace around the react stuff to avoid re-renders 57665 2014-02-24 16:53:15 gwdev Just a general design question: we're using immutable data with our UI, and it's been a really refreshing way to develop. We basically have a central data store, and all child components communicate intent to the store then the new state flows down. 57666 2014-02-24 16:54:16 gwdev I'm a big hesitant to use this model with forms, however, as sending every change as a data request and then reconciling the UI seems wasteful. I could make an exception and use state, but then it seems like I'd have to use a "save" interaction to communicate to the data store. 57667 2014-02-24 16:54:28 gwdev That feels a bit clinky since I'd like changes to be more or less automatic. 57668 2014-02-24 16:54:33 gwdev Any ideas? 57669 2014-02-24 16:54:51 gwdev a bit* 57670 2014-02-24 17:00:38 adhorton exodus 57671 2014-02-24 17:06:46 syranide oh wow, what is going on 57672 2014-02-24 17:10:38 adhorton a glitch in the matrix 57673 2014-02-24 17:10:46 adhorton sunspots? 57674 2014-02-24 17:11:12 syranide ^heading home 57675 2014-02-24 17:11:40 dve syranide: thanks for your help earlier 57676 2014-02-24 17:11:53 syranide dve: np, zpao's here now it seems, perhaps he knows 57677 2014-02-24 17:12:54 zpao ACTION runs away 57678 2014-02-24 17:14:23 dve zpao: haha - im pretty sure its something dumb Ive done - Ill make sure before I ask :) 57679 2014-02-24 17:15:49 zpao dve: :) let me know if i can help 57680 2014-02-24 17:16:08 dve zpao: thanks 57681 2014-02-24 17:17:56 chrispitt hey guys! 57682 2014-02-24 17:18:02 chrispitt howzit going? 57683 2014-02-24 17:20:00 chenglou sup! 57684 2014-02-24 17:22:04 chrispitt i have this strange bug in my code 57685 2014-02-24 17:22:27 chrispitt https://gist.github.com/chrispitt/72b02cbecffe9f0662dd 57686 2014-02-24 17:22:39 chrispitt i am fetching tasks using jquery 57687 2014-02-24 17:22:49 chrispitt and adding/updating/deleting them the same 57688 2014-02-24 17:23:05 chrispitt every time i perform on of those operations, i setState on my list component 57689 2014-02-24 17:23:50 chrispitt when I delete an item in the middle of the list, the item is deleted (via ajax) and the database is good. but the item that would normally take its place retains the state of the item that was deleted 57690 2014-02-24 17:24:11 chrispitt as if the reactid is being reused and the old state is being set on the "new" DOM node in its place 57691 2014-02-24 17:24:40 chrispitt i think i might be able to solve it by manually assigning a reactid 57692 2014-02-24 17:24:40 chenglou chrispitt: put a `key` attribute 57693 2014-02-24 17:24:41 zpao chrispitt: using key? 57694 2014-02-24 17:24:41 chrispitt is this possible? 57695 2014-02-24 17:24:44 chrispitt key 57696 2014-02-24 17:25:51 zpao chrispitt: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children 57697 2014-02-24 17:26:33 chrispitt thanks! 57698 2014-02-24 17:26:33 chrispitt perfect 57699 2014-02-24 17:26:33 chrispitt hold on while I upload the whole code - it will run in a php/sqlite env 57700 2014-02-24 17:26:33 chrispitt it's like the todomvc app that pete made, but with php and react 57701 2014-02-24 17:26:44 chenglou http://facebook.github.io/react/docs/multiple-components.html#dynamic-children 57702 2014-02-24 17:27:35 chrispitt don't now why i didnt see that before - searched the docs for like 30 minutes before askign here 57703 2014-02-24 17:27:36 chrispitt :) 57704 2014-02-24 17:27:43 chrispitt this is the code (working) https://github.com/cape-town-php-group/todo-php/tree/master/vanilla/chrispitt 57705 2014-02-24 17:28:21 adhorton see more usage of the key attribute in the todo example 57706 2014-02-24 17:28:36 gwdev If your app's state is immutable, but you have form-based input, is it reasonable to send new state down the UI hierarchy after every onChange for an input? Or should you force "submit"-style UX to throttle that? 57707 2014-02-24 17:28:50 adhorton http://calendar.perfplanet.com/2013/diff/ helps explain its use in the diff algorithm 57708 2014-02-24 17:29:07 chenglou gwdev: what do you mean by submit-style? 57709 2014-02-24 17:30:18 gwdev chenglou: right now, when interaction occurs an intent to change state is communicated to a central data store then passed down the component hierarchy. I'm just wondering if that flow makes sense for every keypress in an input. 57710 2014-02-24 17:30:43 zpao chrispitt: you should have seen a warning about keys in the console - we try to warn there in the dev build when we detect cases that would be helped (an array as only child) 57711 2014-02-24 17:31:02 gwdev chenglou: my other thought is to make an exception and use .state here, and only communicate w/ the central store if you press a "submit/save", but I'd rather the updates be automatic in this case for UX purposes. 57712 2014-02-24 17:31:42 chrispitt zpao: didn't get that. not sure why :/ 57713 2014-02-24 17:31:42 chenglou gwdev: ehm, I'd say use the former 57714 2014-02-24 17:31:57 chrispitt zpao: i've seen that warning before, but for some reason it wasn't there today 57715 2014-02-24 17:32:02 chrispitt zpao: using 0.9.0 57716 2014-02-24 17:32:12 gwdev chenglou: cool, and just try to be mindful of reconciliation performance? 57717 2014-02-24 17:32:16 chenglou having built a few forms in react I tend to feel using state to manage those can get out of hand 57718 2014-02-24 17:32:33 chenglou gwdev: no, no need to be mindful about perf (did I just say that lol) 57719 2014-02-24 17:32:43 gwdev hurray =) 57720 2014-02-24 17:32:50 chenglou it's just form items, all your optimizations are probably not needed 57721 2014-02-24 17:36:26 gwdev chenglou yeah, just forms driving component properties 57722 2014-02-24 17:37:40 zpao chrispitt: hmm, weird. maybe the way you were doing it didn't trigger the warning 57723 2014-02-24 17:38:34 chrispitt zpao: there: https://github.com/cape-town-php-group/todo-php/blob/master/vanilla/chrispitt/main.js#L197-L216 57724 2014-02-24 17:39:53 chenglou chrispitt: don't use "children" to add the children 57725 2014-02-24 17:40:36 chrispitt chenglou: ok, but why? (im curious 57726 2014-02-24 17:40:36 chenglou let the first param be the list of props to pass, and pass your children as the second param 57727 2014-02-24 17:40:57 chenglou the "children" key is an implementation detail 57728 2014-02-24 17:41:09 chenglou might change 57729 2014-02-24 17:41:16 chrispitt chenglou: ok, that makes sense 57730 2014-02-24 17:41:23 chrispitt chenglou: will adjust future code then 57731 2014-02-24 17:41:32 chenglou have you tried jsx? 57732 2014-02-24 17:46:22 chrispitt chenglou: https://medium.com/react-tutorials that's me 57733 2014-02-24 17:46:50 chenglou oh nice! 57734 2014-02-24 18:57:06 aakashlpin hi! I want to use React for building a component with Youtube API 57735 2014-02-24 18:57:26 aakashlpin the issue is the js library expects an onload handler 57736 2014-02-24 18:57:39 syranide aakashlpin: attach it manually in componentDidMount 57737 2014-02-24 18:57:50 syranide or? 57738 2014-02-24 18:58:08 aakashlpin is it possible to call component's method from external script? 57739 2014-02-24 18:58:17 syranide ah yes, very much so 57740 2014-02-24 18:58:40 aakashlpin can u point me to sample code? 57741 2014-02-24 18:58:50 syranide callFunction(this.handleClick); 57742 2014-02-24 18:59:02 syranide it's auto-bound too, so it will be called correctly 57743 2014-02-24 18:59:49 aakashlpin what if there are multiple multiple components? 57744 2014-02-24 19:00:00 aakashlpin what will it bind to 57745 2014-02-24 19:00:08 syranide the component you "took it from" 57746 2014-02-24 19:00:50 aakashlpin here's the thing. i need to include the js library like this ').appendTo(document.body) works, but put after jsx is compiled, or switch to server-side generated version. 74640 2014-03-30 14:13:41 enacsen ustunozgur: Well, what I'm really wondering is "How hard would it be to move the html elements from the html into the JS"- the tough part there is I'm now debugging two things, rather than one 74641 2014-03-30 14:14:00 enacsen there's all that damn pwiki crapola 74642 2014-03-30 14:17:48 ustunozgur enacsen: $('.dialog'[0]) 74643 2014-03-30 14:18:01 ustunozgur this is wrong. 74644 2014-03-30 14:18:23 ustunozgur should be $('.dialog')[0] 74645 2014-03-30 14:18:42 enacsen oops thanks 74646 2014-03-30 14:22:42 ustunozgur also I don't think it is being called at all, can you put breakpoints in presentWelcomeDialog and its complete callback? 74647 2014-03-30 14:23:48 enacsen precompiling the js and removing the transformer gets rid of that MRManager error, but the UI (the control bar. etc.) are removed from the screen shomehow 74648 2014-03-30 14:24:14 enacsen oh, wait that's normal, the control part... so yeah it looks to be this welcome thing 74649 2014-03-30 14:25:28 ustunozgur fadeOut complete is the problem 74650 2014-03-30 14:25:34 ustunozgur it is not being called. 74651 2014-03-30 14:25:44 enacsen oh, well that's easy to fix! 74652 2014-03-30 14:26:23 ustunozgur because there is no dialog on the page 74653 2014-03-30 14:26:27 ustunozgur $('dialog') is [] 74654 2014-03-30 14:26:44 ustunozgur $('.dialog') 74655 2014-03-30 14:26:47 ustunozgur use that :) 74656 2014-03-30 14:27:12 ustunozgur note the dot 74657 2014-03-30 14:27:26 enacsen ACTION is having a new problem 74658 2014-03-30 14:27:34 enacsen but is working his way through them :) 74659 2014-03-30 14:28:02 enacsen what do you mean $('dialog'] is [], AFAIK there's no $('dialog') in the code, just the dotted one :) 74660 2014-03-30 14:28:56 enacsen problem now is the code for onlick is getting called, not waiting for user to press the button 74661 2014-03-30 14:29:06 enacsen not sure wtf is up with that 74662 2014-03-30 14:29:33 ustunozgur onClick={signIn()} 74663 2014-03-30 14:29:37 ustunozgur onClick={signIn} 74664 2014-03-30 14:29:54 ustunozgur you pass a reference to function, not call the function and its result. 74665 2014-03-30 14:30:02 enacsen oh! right... react is going to be smart for me 74666 2014-03-30 14:30:43 ustunozgur maybe you are used to angular, it has ng-click="foo()" instead of ng-click="foo" 74667 2014-03-30 14:31:21 enacsen I'm used to hand coding html to stick inside the dom :) 74668 2014-03-30 14:32:20 enacsen same problem... hrm... 74669 2014-03-30 14:33:14 enacsen it's not waiting for that click... hrm... 74670 2014-03-30 14:34:29 ustunozgur you still have Button( {onClick:signIn()}, "Sign in") 74671 2014-03-30 14:35:02 ustunozgur rebuild your jsx 74672 2014-03-30 14:35:07 ustunozgur or use watch mode. 74673 2014-03-30 14:37:09 enacsen AFAIK I'm not using the jsx at the moment, it's all hand coded... and not on the server it isn't. 74674 2014-03-30 14:37:18 ustunozgur ok now you need to make sure dialog is visible. 74675 2014-03-30 14:37:23 ustunozgur its display is set to none. 74676 2014-03-30 14:37:29 enacsen oh ffs 74677 2014-03-30 14:37:33 enacsen I'm sorry :( 74678 2014-03-30 14:38:05 ustunozgur right, not using jsx. you have overwritten your original code. 74679 2014-03-30 14:40:57 ustunozgur here is your original one https://dl.dropboxusercontent.com/u/83342/maproulette.js 74680 2014-03-30 14:43:43 ustunozgur so since the dialog is the mount node, you can grab that in componentdidmount and set its display to block. 74681 2014-03-30 14:43:44 enacsen haha, found the problem this time. Stupid browser used a cached version 74682 2014-03-30 14:43:44 ustunozgur http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount 74683 2014-03-30 14:44:01 enacsen thanks, I'll probably use that instead 74684 2014-03-30 14:44:27 ustunozgur $(this.getDOMNode()).fadeInt() or similar. 74685 2014-03-30 14:44:34 ustunozgur fadeIn* 74686 2014-03-30 14:44:48 enacsen ustunozgur: you've been so helpful. Thank you! 74687 2014-03-30 14:45:08 enacsen ACTION doesn't know how to express gratitude without sounding like either an idiot, but that's the best he can do 74688 2014-03-30 14:45:24 enacsen I think I can take it from here. Thank you again! 74689 2014-03-30 14:45:44 ustunozgur you're welcome. ideally, you would probably want dialog not be the parent node so you can set its classes or style name with react. 74690 2014-03-30 14:46:32 enacsen ustunozgur: the plan really is to show that "This react thing can work, and we can bring it in gradually". Eventually I want to get rid of all the cruft in the app, and maybe get rid of JQuery too 74691 2014-03-30 14:47:30 ustunozgur Yes, good plan. Conquer component by component. 74692 2014-03-30 15:00:26 kjeldahl I love what reactjs is accomplishing related to dom updates etc. Anybody know if anybody has tried to extend the concepts to cover "updates from server using diffs" and if there are any pointers on it? Essentially the server holds all state, knows the last state pushed to the client, and on updates only sends the diffed state. Working with small components with minimal state works, but there could be cases 74693 2014-03-30 15:00:29 kjeldahl where it makes sense to only send diffs from the server. 74694 2014-03-30 15:05:13 ustunozg_ not sure, but take a look at meteor. recently Pete Hunt gave a talk on meteor+react. 74695 2014-03-30 15:05:55 ustunozg_ https://www.meteor.com/blog/2014/02/14/pete-hunt-talks-facebook-react 74696 2014-03-30 15:09:59 ustunozg_ the protocols name is called ddp. https://www.meteor.com/blog/2012/03/21/introducing-ddp 74697 2014-03-30 15:11:05 daGrevis hi! i have a question about tutorial. here is shows how to add markdown http://facebook.github.io/react/docs/tutorial.html#adding-markdown 74698 2014-03-30 15:11:19 daGrevis i wonder what's .children and why I can't access .text 74699 2014-03-30 15:12:12 daGrevis i'm wondering because when I submit the form, render is called and at that point of time, .children is set to undefined and I get error because i can't call toString() on undefined 74700 2014-03-30 15:12:15 ustunozg_ children is the content inside the component. 74701 2014-03-30 15:12:21 ustunozg_ children 74702 2014-03-30 15:13:16 daGrevis that makes sense. but why i can't access .text? there's .author 74703 2014-03-30 15:14:08 ustunozg_ well, because you are not passing text. 74704 2014-03-30 15:14:12 ustunozg_ This is one comment 74705 2014-03-30 15:14:30 ustunozg_ author="Pete hunt" , children="this is one comment" here 74706 2014-03-30 15:14:49 ustunozg_ you could instead do 74707 2014-03-30 15:14:53 daGrevis really! 74708 2014-03-30 15:15:13 daGrevis thanks. what about the problem when after submitting the form, children is undefined? 74709 2014-03-30 15:15:34 ustunozg_ what's your on success callback? 74710 2014-03-30 15:17:22 daGrevis this.setState({data: data}); 74711 2014-03-30 15:17:25 daGrevis ustunozg_, 74712 2014-03-30 15:18:31 ustunozg_ what is data set to? are you using an ajax call or just pushing predefined content? 74713 2014-03-30 15:19:19 daGrevis it's an ajax call. it returns something like this http://vpaste.net/ACw2d 74714 2014-03-30 15:19:21 ustunozg_ I see your confusion. the state is an array of objects, with "text" fields, but downstream, that text prop is sent as children, not as text attributes. 74715 2014-03-30 15:19:33 daGrevis ahh i spotted the problem I think 74716 2014-03-30 15:19:39 daGrevis i need to set state to data.comments 74717 2014-03-30 15:20:00 ustunozg_ yes 74718 2014-03-30 15:20:06 daGrevis awesome :) 74719 2014-03-30 15:28:29 daGrevis one more question. when I do this.refs.x.getDOMNode() 74720 2014-03-30 15:28:35 daGrevis am I working with virtual DOM? 74721 2014-03-30 15:35:59 daGrevis i would like to use jquery selectors to get elements but if it's virtual DOM, I dont know if it's even possible 74722 2014-03-30 15:39:05 ustunozgur I believe it is the normal dom. 74723 2014-03-30 15:48:06 ustunozgur daGrevis: jquery stuff goes into componentdidmount. 74724 2014-03-30 17:03:18 sickill I have just noticed that ReactRAFBatchingStrategy.js is included in react's source repository, but it doesn't look like it's used in the build anywhere, correct? 74725 2014-03-30 17:03:42 sickill anybody knows how I can enable it? 74726 2014-03-30 17:05:20 daGrevis Why is this invalid? http://vpaste.net/nRHr4 it works, but says that I can't return array 74727 2014-03-30 17:05:36 daGrevis i need h2 and form in the same level, but I don't want to wrap them in any element 74728 2014-03-30 17:20:27 balpert daGrevis: right now each component has to return a single element, sorry 74729 2014-03-30 17:20:58 daGrevis balpert, ok, its fine. wrapped it in a div 74730 2014-03-30 17:21:30 balpert daGrevis: in the future, we may be able to get rid of this restriction 74731 2014-03-30 17:21:32 daGrevis here's a code that renders form. http://vpaste.net/n0HXY 74732 2014-03-30 17:21:59 daGrevis i was wondering are there a better way then manually calling setting form's inputs to empty string to clear the form 74733 2014-03-30 17:22:27 daGrevis it could be super cool if i could just call render and it would re-render with empty inputs. dunno why that isn't working 74734 2014-03-30 17:25:09 daGrevis i guess i could add input values to state and just say setState({}) 74735 2014-03-30 17:33:37 daGrevis docs rocks ) http://facebook.github.io/react/docs/forms.html 74736 2014-03-30 17:38:31 daGrevis help me with this, guys. i want an easy way to clear inputs and textareas of a form. i dont want to touch DOM or anything like that. the problem is that if I use state and set x.value to be this.state.x, it becomes so called controlled component. this means i need to add onChange event for each input that sounds ridiculous for me. how do you handle this? 74737 2014-03-30 17:47:31 patrkris hi folks. i am using jsx for offline transformations on FreeBSD. i run `jsx --watch src/ build/`, but when I change any *.jsx files in src/, nothing happens. strangely enough, jsx catches whenever a vim swapfile is changed, e.g. test.jsx.swp 74738 2014-03-30 17:47:47 patrkris any clues? 74739 2014-03-30 17:48:48 balpert patrkris: if you npm install jsxc and use jsxc --watch, does it work? 74740 2014-03-30 17:48:58 balpert unfortunately it seems like the jsx binary is a little buggy 74741 2014-03-30 17:49:05 patrkris lemme try it out 74742 2014-03-30 17:49:17 balpert (npm install -g jsxc I guess) 74743 2014-03-30 17:55:10 patrkris balpert: I can't get it to work either. I can easily do `jsxc test.jsx`, which will output the transformed file on stdout. but watching a directory doesn't seem to work. have tried on both FreeBSD and Windows at this point. 74744 2014-03-30 17:55:21 balpert patrkris: I don't know then, sorry 74745 2014-03-30 17:55:32 patrkris balpert: thanks for your help 74746 2014-03-30 17:55:56 balpert jsx uses https://github.com/reactjs/commoner, jsxc source is here: https://github.com/petehunt/jsxc 74747 2014-03-30 18:17:39 daGrevis i figured out how can I set input.value to be in state and auto-update. http://vpaste.net/bmEXR 74748 2014-03-30 18:17:51 daGrevis see updateStateForFormElement and name: "name", value: @state.name, onChange: @updateStateForFormElement 74749 2014-03-30 18:18:39 balpert (setState merges, so you can just do state = {} instead of state = @state) 74750 2014-03-30 18:18:58 balpert you might also be interested in http://facebook.github.io/react/docs/two-way-binding-helpers.html 74751 2014-03-30 18:19:21 daGrevis lol it actually works 74752 2014-03-30 18:19:30 daGrevis balpert, thanks! 74753 2014-03-30 18:19:38 balpert daGrevis: np 74754 2014-03-30 18:26:50 daGrevis check out how cool is this :) http://i.imgur.com/rBa5clf.jpg 74755 2014-03-30 18:35:24 elux hey gents 74756 2014-03-30 18:35:33 elux i was wondering if people have been successful to use react with angular? 74757 2014-03-30 18:35:48 elux i like angulars DI and declarative style of writing apps.. 74758 2014-03-30 18:36:35 balpert I haven't tried it but there is http://davidandsuzi.com/ngreact-react-components-in-angular/ 74759 2014-03-30 18:37:21 elux right 74760 2014-03-30 18:37:22 elux thx 74761 2014-03-30 19:58:17 kjeldahl ustunozg_: Thank you for responding to my question earlier; I had to run off and was unable to respond. I know meteor a little from before and I will look into ddp. 74762 2014-03-30 22:18:17 __beowulf__ so when is 0.11 out? 74763 2014-03-30 22:21:25 balpert 0.10 just came out last week! 74764 2014-03-30 22:21:36 balpert :) 74765 2014-03-30 22:22:05 chenglou __beowulf__: tuesday 74766 2014-03-30 22:22:34 chenglou ... =) 74767 2014-03-30 22:24:57 __beowulf__ haha 74768 2014-03-30 22:24:59 __beowulf__ nice 74769 2014-03-30 22:25:18 __beowulf__ I don't think I need anything in 0.11.. I keep reading about these bad practices people are doing and hope I am not doing that 74770 2014-03-30 22:25:31 chenglou descriptors? 74771 2014-03-30 22:25:34 balpert 0.10 has all the warnings for things that 0.11 will break 74772 2014-03-30 22:25:36 __beowulf__ yes..thats the one 74773 2014-03-30 22:25:44 balpert so if your code has no warnings in 0.10, you're good 74774 2014-03-30 22:25:46 chenglou fb.me/react-warning-descriptors 74775 2014-03-30 22:25:47 __beowulf__ thats fine.. I'll get 0.11 and if it breaks, I'll fix it 74776 2014-03-30 22:26:36 __beowulf__ oh..I dont do that 74777 2014-03-30 22:26:43 __beowulf__ I dont keep a var to the component so I should be safe 74778 2014-03-30 22:26:59 __beowulf__ I am still trying to think about possibly using events but right now I don't have a reason to. 74779 2014-03-30 22:27:07 __beowulf__ so the top-down works for me thus far 74780 2014-03-30 22:27:58 __beowulf__ about cried the other night when I finally got everything working including the watchify, reactify, uglifyify, and using require() and react-router-component 74781 2014-03-30 22:28:09 __beowulf__ now I am slowly working my way with react-bootstrap 74782 2014-03-30 22:28:15 __beowulf__ which is pretty slick. 74783 2014-03-30 22:28:41 __beowulf__ so besides you guys at FB, any big players using React yet? 74784 2014-03-30 22:28:56 balpert __beowulf__: I'm at Khan Academy where we're using it a bunch 74785 2014-03-30 22:28:59 __beowulf__ I've told 3 colleagues at different companies to look into it 74786 2014-03-30 22:29:01 balpert not sure if that counts as a "big player" in your mind 74787 2014-03-30 22:29:22 __beowulf__ well in my mind I'm a big player and I don't know WTF I am doing.. so yah, you're a monster! 74788 2014-03-30 22:30:06 balpert 425 React classes it looks like 74789 2014-03-30 22:30:15 balpert so we use it a fair bit 74790 2014-03-30 22:30:20 __beowulf__ I am curious if google and team will try to do something akin to the shadow dom with angularjs to speed things up 74791 2014-03-30 22:30:44 __beowulf__ wow..thats cool. You use a component for every page as well? Like even static pages and such? 74792 2014-03-30 22:32:19 __beowulf__ cool balpert is that using bootstrap as well? If so you using the react-bootstrap? 74793 2014-03-30 22:33:46 balpert no, we have a bunch of pages that don't use React 74794 2014-03-30 22:33:57 balpert here's a list of the class names which might give you some idea: https://gist.github.com/spicyj/a34fcd41550d80102f15 74795 2014-03-30 22:34:05 balpert some big, some small 74796 2014-03-30 22:34:11 balpert we're not using react-bootstrap 74797 2014-03-30 22:34:20 balpert though we have some bootstrap stuff 74798 2014-03-30 22:34:52 __beowulf__ ah.. cool. 74799 2014-03-30 22:35:23 balpert (pretty sure "PartySlide" has the most fun name) 74800 2014-03-30 23:33:22 Daniel15_Away balpert: What exactly is the PartySlide component? :D 74801 2014-03-30 23:36:33 balpert shows you a celebration for completing one of the math missions 74802 2014-03-31 00:08:32 __beowulf__ so.. is there any work on an IDE plugin for WebStorm, Eclipse, etc that will suport JSX syntax and code completion? 74803 2014-03-31 00:08:39 __beowulf__ or any IDE for that matter that supports it? 74804 2014-03-31 00:30:52 __beowulf__ Anyone know if using react-bootstrap removes the need to include the .css file? 74805 2014-03-31 00:59:12 rcs mergeDeep doesn't appear to be used anywhere in React code. Is it sticking around? 74806 2014-03-31 02:11:35 chenglou huh, has it ever been used? 74807 2014-03-31 02:19:17 rcs The best reference I can find is at https://github.com/facebook/react/issues/984 . 74808 2014-03-31 04:49:25 __beowulf__ hmm.. so shouldComponentUpdate: function(nextProps, nextState) { 74809 2014-03-31 04:49:25 __beowulf__ return !equal(nextProps, this.props) || !equal(nextState, this.state); 74810 2014-03-31 04:49:25 __beowulf__ } 74811 2014-03-31 04:49:33 __beowulf__ fails with equal not being defined 74812 2014-03-31 04:49:39 __beowulf__ where is equal() function located? 74813 2014-03-31 04:54:11 chenglou __beowulf__: there's no equal() in js 74814 2014-03-31 04:54:50 chenglou you'll have to manually compare each key value pair 74815 2014-03-31 04:55:13 chenglou ACTION drools at clojure's data structures 74816 2014-03-31 05:28:30 balpert Daniel15: I'd actually lean towards not having trailing slashes in any of the tags 74817 2014-03-31 05:28:37 balpert in a "it's not XHTML" argument 74818 2014-03-31 05:30:40 balpert __beowulf__: though soon it sounds like there will be React.addons.PureRenderMixin 74819 2014-03-31 05:30:43 balpert which is basically that 74820 2014-03-31 05:31:01 Daniel15 balpert: yeah I wasn't sure which to use since the file used both somewhat equally 74821 2014-03-31 05:31:16 Daniel15 Feel free to reject my pull request :P 74822 2014-03-31 05:31:26 balpert __beowulf__: (#1308) 74823 2014-03-31 05:31:32 balpert #1308 74824 2014-03-31 05:31:33 reactbotx Issue 1308: add `ReactComponentWithPureRenderMixin` to addons https://github.com/facebook/react/issues/1308 74825 2014-03-31 05:31:57 balpert Daniel15: heh, I request changes 74826 2014-03-31 05:32:27 balpert actually phabricator changed how requesting changes works now 74827 2014-03-31 05:32:29 balpert so maybe I'd just comment 74828 2014-03-31 05:32:35 balpert so someone else could still accept 74829 2014-03-31 05:32:42 Daniel15 I wish Github actually had a "request changes" button like Phabricator 74830 2014-03-31 05:33:00 balpert that would be so nice 74831 2014-03-31 05:33:12 Daniel15 With Phabricator, sometimes I just leave comments and approve the diff (if they're just minor things) 74832 2014-03-31 05:33:24 Daniel15 Whereas I request changes if there's something major that needs to be done 74833 2014-03-31 05:33:31 balpert yup 74834 2014-03-31 05:33:51 balpert sometimes I'm even like, request changes: I don't have time to write up my thoughts at this moment but please don't land this 74835 2014-03-31 05:36:35 chenglou github is so 2013 74836 2014-03-31 05:37:19 balpert zpao taking the hard reject 74837 2014-03-31 05:37:35 zpao ACTION isn't here 74838 2014-03-31 05:38:01 balpert your closing pull requests says otherwise 74839 2014-03-31 05:38:35 zpao i had to get on vpn to book a flight and then of course i get notifications because "react" is the worst watch word 74840 2014-03-31 05:38:57 zpao and then i saw "xhtml" and i was all like "helllllll no" 74841 2014-03-31 05:39:14 zpao ACTION gets back to harry potter :) 74842 2014-03-31 05:39:41 balpert react react react 74843 2014-03-31 05:40:11 chenglou lmao 74844 2014-03-31 05:40:40 chenglou hahaha 74845 2014-03-31 05:40:56 chenglou guise guise 74846 2014-03-31 05:41:38 zpao if only i knew enough about irc, i would make myself unkickable. founder should count for something :P 74847 2014-03-31 05:41:52 balpert yeah, I didn't think that would work 74848 2014-03-31 05:42:20 zpao it's cool. i'll remember… 74849 2014-03-31 05:42:33 zpao but for real now, i'll be back in the am. ciao 74850 2014-03-31 05:42:39 chenglou cya 74851 2014-03-31 05:42:52 Daniel15 ^ There, I fixed it 74852 2014-03-31 05:43:00 balpert cio 74853 2014-03-31 05:43:01 balpert ciao 74854 2014-03-31 05:43:03 chenglou lol! 74855 2014-03-31 05:43:26 balpert making-zpao-happy 74856 2014-03-31 05:43:31 chenglou Daniel15: mention "it's not xhtml" and that'll get zpao back 74857 2014-03-31 05:48:45 hareth hello 74858 2014-03-31 05:49:02 chenglou hi! 74859 2014-03-31 05:49:07 hareth =) 74860 2014-03-31 07:39:10 daGrevis Has anyone tried CoffeeKup with React? I saw petehunt mention it in GitHub issue. 74861 2014-03-31 07:39:49 daGrevis We are using CoffeeScript and Lisp-like syntax to write Dom tree, but I'm not so sure about my colleague liking it. 74862 2014-03-31 07:40:47 daGrevis ohh, last comit was 3yr ago 74863 2014-03-31 07:42:01 daGrevis hmm, there is this https://github.com/duncanbeevers/jade-react 74864 2014-03-31 07:42:48 chenglou daGrevis: there was an article on coffeescript + react 74865 2014-03-31 07:42:54 chenglou dont have the link anymore, humm 74866 2014-03-31 07:43:07 daGrevis there is this one http://blog.vjeux.com/2013/javascript/react-coffeescript.html 74867 2014-03-31 07:43:13 daGrevis it suggests lisp-like syntax 74868 2014-03-31 07:43:39 daGrevis personally I'm fine with it (i do some clojure in free time), but I'm not so sure about other people im working with 74869 2014-03-31 07:43:50 daGrevis you know, parens are scary :P 74870 2014-03-31 07:44:17 chenglou daGrevis: http://neugierig.org/software/blog/2014/02/react-jsx-coffeescript.html 74871 2014-03-31 07:44:24 daGrevis currently my react code written in coffeescript looks something like this https://github.com/daGrevis/React-Guestbook/blob/master/static/scripts/main.coffee 74872 2014-03-31 07:44:38 daGrevis chenglou, thanks, let me read it ) 74873 2014-03-31 07:48:17 daGrevis chenglou, ye, it suggests plain-old coffeescript 74874 2014-03-31 07:49:04 daGrevis thats what I have now, only without lisp-like syntax 74875 2014-03-31 07:49:56 chenglou alright 74876 2014-03-31 08:03:09 srcspider is there a reactjs equivalent to snap.svg/raphaeljs? 74877 2014-03-31 08:04:31 balpert https://github.com/facebook/react-art, though it's a little hard to use right now 74878 2014-03-31 08:04:43 srcspider yes I've seen that 74879 2014-03-31 08:04:51 srcspider indeed it's not well explained 74880 2014-03-31 08:06:30 balpert srcspider: you can look at my example in the PR here: https://github.com/facebook/react-art/pull/9/files 74881 2014-03-31 08:06:40 balpert you may need to link in react-art master though… 74882 2014-03-31 08:06:58 srcspider thanks 74883 2014-03-31 08:10:26 balpert I'll try to bug sebmarkbage when he's around again 74884 2014-03-31 08:12:08 daGrevis can I somehow set default props? 74885 2014-03-31 08:12:18 daGrevis without passing to component constructor 74886 2014-03-31 08:12:31 balpert daGrevis: not sure what you mean 74887 2014-03-31 08:12:46 daGrevis well I can do this.props.x in component 74888 2014-03-31 08:13:01 daGrevis props are things I pass in when I render constructor 74889 2014-03-31 08:13:12 daGrevis MyComponent({x: 42}) 74890 2014-03-31 08:13:44 daGrevis i want to set this.props.x to be 42 w/o passing it in. something like i can do with this.state and setInitialState 74891 2014-03-31 08:13:53 balpert do you want getDefaultProps? 74892 2014-03-31 08:14:08 balpert getDefaultProps: function() { return {x: 42}; } 74893 2014-03-31 08:14:21 balpert it'll be merged so if you then do MyComponent({y: 17}) you'll have x: 42, y: 17 74894 2014-03-31 08:14:22 daGrevis yay. thanks 74895 2014-03-31 08:14:40 daGrevis where do you find all these? cant find it in api http://facebook.github.io/react/docs/component-api.html 74896 2014-03-31 08:15:27 andreypopp_ daGrevis: http://facebook.github.io/react/docs/component-specs.html#getdefaultprops 74897 2014-03-31 08:15:46 daGrevis mkay ty 74898 2014-03-31 08:17:18 daGrevis I'm struggling with this error: Uncaught Error: Invariant Violation: replaceState(...): Can only update a mounted or mounting component. Any ideas? http://vpaste.net/Kgqcz 74899 2014-03-31 08:17:46 daGrevis first I thought that I can't rerender component and fixed it with @props.components but seems that it's not it 74900 2014-03-31 08:18:06 srcspider are you cloning or reusing a component? 74901 2014-03-31 08:18:17 daGrevis im trying to hook up React and Director to have single-page app where each component is it's own page and URL 74902 2014-03-31 08:18:52 daGrevis srcspider, im reusing the same instance I think 74903 2014-03-31 08:19:09 srcspider can't reuse anything in react 74904 2014-03-31 08:19:34 flatiron daGrevis: don't call renderComponent on an instance, call it on React? 74905 2014-03-31 08:19:37 daGrevis but is the error related? i can't quite get it:( 74906 2014-03-31 08:19:48 balpert (in 0.11 you'll be able to reuse a descriptor, I believe) 74907 2014-03-31 08:20:24 daGrevis flatiron, that's the whole idea. root component renders child component and nav, footer etc 74908 2014-03-31 08:22:11 chenglou daGrevis: gonna go sleep but in case you havent seen it yet: http://todomvc.com/architecture-examples/react/ 74909 2014-03-31 08:22:17 chenglou this one uses Director 74910 2014-03-31 08:22:28 daGrevis sweet, thanks :) 74911 2014-03-31 08:22:33 chenglou np 74912 2014-03-31 08:23:38 chenglou also this maybe: http://stackoverflow.com/questions/22061595/how-to-show-hide-reactjs-components/22063571#22063571 74913 2014-03-31 08:24:23 daGrevis completely unrelated but why does all “working fiddles“ doesnt work? 74914 2014-03-31 08:24:41 balpert any chance fb.me is blocked for you? 74915 2014-03-31 08:25:35 daGrevis balpert, works when its not served with server 74916 2014-03-31 08:25:47 daGrevis like works when i do chrome index.html in console 74917 2014-03-31 08:25:57 daGrevis but doesnt work when i do python -m http.server 74918 2014-03-31 08:26:17 daGrevis balpert, does it work for you? 74919 2014-03-31 08:26:25 balpert sorry, does what work? 74920 2014-03-31 08:27:18 daGrevis balpert, http://jsfiddle.net/L7mua/3/ 74921 2014-03-31 08:27:42 balpert yep 74922 2014-03-31 08:36:45 daGrevis hmm, it might be adblock 74923 2014-03-31 08:37:00 daGrevis i think it does not work when i open file:// page 74924 2014-03-31 09:03:45 daGrevis I think I found the cause of that error 74925 2014-03-31 09:03:51 daGrevis Uncaught Error: Invariant Violation: replaceState(...): Can only update a mounted or mounting component. 74926 2014-03-31 09:04:12 daGrevis i was changing state of component when it was unmounted 74927 2014-03-31 09:04:22 daGrevis with socket.on "balance", @changeBalance 74928 2014-03-31 09:04:49 daGrevis I though I fixed it, but the error is still there. http://vpaste.net/ustc3 74929 2014-03-31 09:05:04 daGrevis changeBalance doesnt get called now 74930 2014-03-31 09:08:32 daGrevis actually it might be a problem with sockets.io 74931 2014-03-31 09:10:08 daGrevis ye, it is! thank god. sockets.io doesnt have off method but I did alias it to removeListener. it didn't work completly but removeAllListeners did. https://stackoverflow.com/questions/9418697/how-to-unsubscribe-from-a-socket-io-subscription 74932 2014-03-31 09:37:51 dve morning all 74933 2014-03-31 09:38:43 daGrevis hi :) 74934 2014-03-31 09:39:01 daGrevis thank god someone else is waking up at this time (not only me) 74935 2014-03-31 10:09:17 srcspider any gotchas with just doing svg's like this? http://pastie.org/private/fku6x4bspvlmtzmovsvsq 74936 2014-03-31 10:19:26 dve srcspider: DidMount will only be called once 74937 2014-03-31 10:19:47 srcspider why is that a bad thing? 74938 2014-03-31 10:20:01 dve setState or props changes wont cause the method to be called again 74939 2014-03-31 10:20:11 srcspider hm 74940 2014-03-31 10:20:14 dve if your svg depends on either it wont be updatde 74941 2014-03-31 10:20:43 srcspider so basically I have to make sure my Snap object(s) are accessible to other methods? 74942 2014-03-31 10:20:56 srcspider if I want to do fancy animation on presses and such 74943 2014-03-31 10:22:55 dve srcspider: react supports quite a few svg tags, it might not be necessary to use snap 74944 2014-03-31 10:23:16 srcspider when I asked earlier I was pointed to react-art 74945 2014-03-31 10:23:21 srcspider but that's just raw svg 74946 2014-03-31 10:23:27 srcspider from what I saw in the source 74947 2014-03-31 10:25:01 dve srcspider: I can only speak from personal experience, but have been using react to draw reasonably complex images and have had no problems. 74948 2014-03-31 10:26:58 srcspider dve, I kind of want to have readable code like this though: circle.animate({r: 100}, 250); 74949 2014-03-31 10:30:03 dve srcspider: I can understand that, what is animate() actually doing? some sort of tweaning or jsut applying a css animation 74950 2014-03-31 10:33:24 srcspider in that case changing the radius of the circle to 100 after 250ms; but it doesn't really matter though; what I mean is it's just easier to manage programatically.... like say I want to draw a map with trees positions at random places and such, dynamic stuff kind of implies javascript interaction so it's just easier if it's all more-or-less a javascript abstraction 74951 2014-03-31 10:33:30 srcspider @ dve 74952 2014-03-31 10:36:32 srcspider (hm I think I also need shouldComponentUpdate to always return false too) 74953 2014-03-31 10:38:53 dve srcspider: your use case sounds more involved than mine, so not sure if my setup would scale to the complexity you require. But, I would start by breaking down all the parts of my svg into react classes (i.e. a tree class) and building up the scence that way, using each classes state to manage its animation. How exactly the animation would work though, im not sure! :) 74954 2014-03-31 10:39:41 dve using the react RAF upate batching strategy might be benefitial too 74955 2014-03-31 10:40:04 srcspider RAF update? 74956 2014-03-31 10:40:11 dve request animation frame 74957 2014-03-31 10:40:16 Timmeh Royal Air Force 74958 2014-03-31 10:40:23 srcspider ah 74959 2014-03-31 10:42:26 jonathanj props, states and contexts 74960 2014-03-31 10:42:44 jonathanj seems like there are a lot of ways to pass data around 74961 2014-03-31 10:48:34 edoloughlin I'm new to react and liking it so far. I'm wondering if it's possible to do something like <{this.props.someClass /> in JSX or do I have to write my own JS helper to return the class? 74962 2014-03-31 10:49:05 edoloughlin ... that should have been <{this.props.someClass} /> 74963 2014-03-31 10:50:04 dve edoloughlin: someClass is just a function, so var someClass = this.props.someClass; someClass({/*props*/}, children) 74964 2014-03-31 10:50:42 dve in render()... return
    74965 2014-03-31 10:50:53 edoloughlin Great. Thanks! 74966 2014-03-31 10:51:11 dve np 74967 2014-03-31 10:55:21 Timmeh edoloughlin: dve: http://jsfiddle.net/NFj68/ 74968 2014-03-31 10:56:44 edoloughlin Timmeh: fantastic. Thanks. 74969 2014-03-31 10:57:14 Timmeh edoloughlin: thing to remember is that JSX is just converted to javascript. a `` is just translated to `SomeClass({a: "b"})`, so basically all you have to do is make sure that the `SomeClass` variable exists in your function's scope (chain) 74970 2014-03-31 10:57:43 Timmeh and np 74971 2014-03-31 10:58:09 edoloughlin Ok. I was assuming there was more going on in JSX, but that's clearer. Thanks. 74972 2014-03-31 10:58:43 Timmeh it's simplicity is one if the things I like about it, it makes React very usable without JSX even (which is what I'm doing) 74973 2014-03-31 11:00:33 edoloughlin Looks like JSX saves on typing, though I'm thinking of eventually bypassing it when I use React in a Clojurescript project, but while I'm a react noob, I'll stick to the straight and narrow. 74974 2014-03-31 11:00:41 Timmeh edoloughlin: http://jsfiddle.net/NFj68/1/ 74975 2014-03-31 11:00:48 Timmeh that's the same fiddle, but without JSX 74976 2014-03-31 11:01:43 dve edoloughlin: if your clojurscripting you might want to checkout Om - https://github.com/swannodette/om 74977 2014-03-31 11:01:45 Timmeh it just makes things more readable when you start nesting components (the HTML-like elements in there are components as well, existing as properties of `React.DOM`) 74978 2014-03-31 11:02:27 edoloughlin I'll check it out. Thanks. 74979 2014-03-31 11:14:36 jonathanj edoloughlin: in the context of cljs, have you looked at Om? 74980 2014-03-31 11:14:50 jonathanj oh, dve just mentioned that 74981 2014-03-31 11:14:56 dve jonathanj: :) 74982 2014-03-31 11:15:35 edoloughlin Yup. Done lots of Clojure but haven't done a Clojurescript project yet. Looking forward to starting one... 74983 2014-03-31 11:19:18 dve zpao|away: any plans to support SMIL animate tags in react? 74984 2014-03-31 11:21:45 kjeldahl Please advice: I have some line items that are updated dynamically, think stock prices and similar. Whenever a line item gets updated, I want to decorate it according to whether price goes up and down. Where to keep the previous price (state), assuming I want to keep it out of my model (update) data? And assuming it's in the React class, which method do I need to hook into to update the state 74985 2014-03-31 11:21:47 kjeldahl (componentWillUpdate doesn't allow me to)? 74986 2014-03-31 11:22:16 patrio___ Is there any good docs for jsx command line tool? 74987 2014-03-31 11:26:28 dve patrio___: more than.. jsx --help 74988 2014-03-31 11:26:35 patrio___ yes 74989 2014-03-31 11:27:16 jessta kjeldahl: use componentWillReceieveProps to compare the old and new props. 74990 2014-03-31 11:27:49 kjeldahl jessta: Thanks, just found it! 74991 2014-03-31 11:31:23 jessta kjeldahl: although, it might be better to do that outside your UI code, and pass that in as a prop. 74992 2014-03-31 11:32:54 kjeldahl jessta: Yes, that's what I'm currently doing, but that means I get an extra set of "state" data. The original (from server), the temp one (prop with old price) and the one in the React class. If my react class tracks it on it's own (it IS a visual-only effect after all), it's a little less book-keeping. 74993 2014-03-31 11:38:56 jacek_ hello :) does anybody have any experience with testing react components in mocha running on phantomjs ? :) 74994 2014-03-31 11:39:29 jacek_ are there any useful tools that would support testing react there?:) 74995 2014-03-31 11:40:43 dve jacek_: have you see ReactTestUtils? 74996 2014-03-31 11:41:14 dve http://facebook.github.io/react/docs/test-utils.html 74997 2014-03-31 11:43:11 jacek_ I saw them, but I thought that they are very node specific 74998 2014-03-31 11:43:21 jacek_ would they fit into phantomjs as well ? :) 74999 2014-03-31 11:43:33 stevoland jacek_: we use karma to run mocha on phantomjs + other browsers. don't forget you'll need es5-shim 75000 2014-03-31 11:43:52 stevoland they're not node specific, they're very handy 75001 2014-03-31 11:44:04 jacek_ okay :) thanks for advice ;) 75002 2014-03-31 11:44:09 jacek_ will try them ;) 75003 2014-03-31 11:46:40 stevoland top tip. TestUtils.renderIntoDocument doesn't actually er, render into the document 75004 2014-03-31 11:46:41 antihero Anyone made any game type stuff in pure react? 75005 2014-03-31 11:46:49 antihero I kinda want to be able to do some awesome user interaction stuff 75006 2014-03-31 12:04:56 daGrevis so I have AccountComponent that renders AccountListComponent and AccountFormComponent. In AccountFormComponent, I add a new account using AJAX. How could I tell AccountListComponent that it should re-render? What's the painless way? 75007 2014-03-31 12:12:47 daGrevis I guess I could pass List to instance to Form but it does feel like a hack 75008 2014-03-31 12:17:31 daGrevis in other words, I want child component to update state of parent component. how can I do that? 75009 2014-03-31 12:17:50 daGrevis current code http://vpaste.net/36DRY 75010 2014-03-31 12:18:10 daGrevis need to render table when addAccount is finished 75011 2014-03-31 12:22:56 daGrevis i understand from docs that in react, data flows from parents to children and not vice-versa 75012 2014-03-31 12:23:24 daGrevis so does it mean that I should move form code to AccountComponent? 75013 2014-03-31 12:24:30 antihero daGrevis: Do the ajax stuff on the parent component, and hand methods/state etc to to the child as props 75014 2014-03-31 12:25:04 antihero check the tutorial 75015 2014-03-31 12:25:12 daGrevis antihero, how can I call parent.addAcount from child.render.onChange 75016 2014-03-31 12:25:14 antihero it has an example for this with the chat input/chat component 75017 2014-03-31 12:25:38 antihero so you'd have a method say handleCreateAccount on the parent 75018 2014-03-31 12:25:45 antihero and you'd pass that as a prop to the child 75019 2014-03-31 12:25:54 antihero ajax stuff is on hCA on parent 75020 2014-03-31 12:26:11 daGrevis mkay thanks 75021 2014-03-31 12:26:22 antihero then you can return a promise from that (or just use a callback) so the child can handle boring form related crap 75022 2014-03-31 12:26:31 antihero like clearing input fields or whatever 75023 2014-03-31 12:26:44 Ayman guys can you help me please http://stackoverflow.com/questions/22761277/react-js-get-checked-inputs 75024 2014-03-31 12:26:48 antihero so child component gets data from its form into an object, passes object to this.props.handleCreateAccount 75025 2014-03-31 12:27:17 antihero which then resolves 75026 2014-03-31 12:27:42 loua does anyone have any example of click handling between components. Basically I want to implement a dropdown element that must toggle onClick, but also should hide when clicking anywhere else 75027 2014-03-31 12:28:14 antihero loua: What do you mean "toggle onClick" ? 75028 2014-03-31 12:29:36 antihero Ayman: do each "row" as a component with some sort of ID/key, that you can then delete from a list of messages 75029 2014-03-31 12:29:41 antihero in the parents' state 75030 2014-03-31 12:29:47 loua antihero: the div is clicked it should show child items, then clicked again must hide 75031 2014-03-31 12:29:59 loua or clicked anywhere else 75032 2014-03-31 12:30:17 daGrevis antihero, thanks, works as charm :) 75033 2014-03-31 12:30:33 antihero loua: So you could have a state that is this.state.divIsShown (or a more specific name) 75034 2014-03-31 12:30:53 antihero onClick just updates the state and triggers a re-render? 75035 2014-03-31 12:31:32 ustunozgur Ayman: that can't work, you miss the opening div 75036 2014-03-31 12:31:57 Ayman can you please explain 75037 2014-03-31 12:32:11 ustunozgur return should return a single element. 75038 2014-03-31 12:32:23 loua antihero: yup, completed that, but it must hide if I click anywhere else on page (body) 75039 2014-03-31 12:32:37 ustunozgur I mean render. 75040 2014-03-31 12:32:44 Ayman @ustunozgur I am using backbonejs with it 75041 2014-03-31 12:33:06 ustunozgur
    75042 2014-03-31 12:33:06 ustunozgur 75043 2014-03-31 12:33:06 ustunozgur {Messages.map(function(message) { 75044 2014-03-31 12:33:08 ustunozgur return ( 75045 2014-03-31 12:33:08 Ayman ustunozgur: it works fine and renders the messages 75046 2014-03-31 12:33:10 ustunozgur
    75047 2014-03-31 12:33:12 ustunozgur 75048 2014-03-31 12:33:14 ustunozgur
    75049 2014-03-31 12:33:16 ustunozgur ); 75050 2014-03-31 12:33:18 ustunozgur })} 75051 2014-03-31 12:33:20 ustunozgur
    75052 2014-03-31 12:33:22 ustunozgur
    75053 2014-03-31 12:33:24 ustunozgur you are missing the initial
    75054 2014-03-31 12:33:41 dve ustunozgur: maybe a pastebin/gist would be better?! 75055 2014-03-31 12:34:17 Ayman ustunozgur: sorry, I have it in my code, 75056 2014-03-31 12:34:31 Ayman but in the example I forgot to wrap it 75057 2014-03-31 12:34:33 ustunozgur dve: sorry pastebin is blocked in my country 75058 2014-03-31 12:34:54 loua antihero: so here an example ( http://jsfiddle.net/artisonian/E2s2T/3/ ) , having issues hiding the dropdown when clicked anywhere except the button 75059 2014-03-31 12:36:04 Ayman ustunozgur: I am using grunt watcher and I have no errors there 75060 2014-03-31 12:38:12 ustunozg_ Ayman: you only get the last element since the ref names are the same. 75061 2014-03-31 12:38:27 ustunozg_ in your map function, use the second argument (index) to give unique ref names. 75062 2014-03-31 12:38:49 Ayman and how can I get the get all selected items ? 75063 2014-03-31 12:39:03 ustunozg_ function(message, i) --> ref={'select_message' + i} something like that. 75064 2014-03-31 12:39:24 Ayman its ok, but how can I get it from the function ? 75065 2014-03-31 12:40:32 ustunozg_ http://jsfiddle.net/bcZSn/ here is an example 75066 2014-03-31 12:41:26 daGrevis guys! what libraries are you using to deal with form validation? 75067 2014-03-31 12:45:29 Ayman ustunozg_: thank you but what I am trying to do, is to have a button that gets all selected elements. is there anyway rather that direct getElementByClassName ? 75068 2014-03-31 12:45:53 ustunozg_ yes, look at that example, it keeps them in a selectedIds array. 75069 2014-03-31 12:48:24 ustunozg_ Ayman: what you should do is, in your deleteMessage, call a handler which you have passed from the parent. 75070 2014-03-31 12:48:38 ustunozg_ that, in turn, modifies the messages array from the outside. 75071 2014-03-31 12:48:49 ustunozg_ then the new messages array will be passed in as props. 75072 2014-03-31 12:49:08 Ayman ustunozg_: thank you very much 75073 2014-03-31 12:49:10 ustunozg_ you should provide a jsbin if you need further assistance. 75074 2014-03-31 12:49:59 Ayman ustunozg_: can you please answer it on stackoverflow to consider it as an answer ? 75075 2014-03-31 12:50:19 ustunozg_ OK. 75076 2014-03-31 12:53:03 Ayman thank you 75077 2014-03-31 12:53:17 Ayman you saved me from idiotic team leader 75078 2014-03-31 12:54:52 ustunozg_ you're welcome. 75079 2014-03-31 12:57:14 loua I've got a similar issue as this example ( http://jsfiddle.net/artisonian/E2s2T/3/ ) , how do I solve hiding the dropdown when clicked anywhere except the button 75080 2014-03-31 12:58:57 loua anyone knows any good example of dropdown menu implementation? 75081 2014-03-31 12:59:20 jbaiter loua: define a "handleBlur" function on the component 75082 2014-03-31 13:00:06 jbaiter http://jsfiddle.net/T2LCj/ 75083 2014-03-31 13:10:54 Epeli Is it possible to force update the full component tree from a child component without adding callbacks? 75084 2014-03-31 13:10:59 loua jbaiter: that was an example from someone else, so not sure what handleBlur is for 75085 2014-03-31 13:12:06 jbaiter loua: it's a handle for the "blur" event that occurs when an element loses focus 75086 2014-03-31 13:12:11 jbaiter but I think i have misunderstood your questions 75087 2014-03-31 13:12:15 jbaiter what exactly do you want to solve? 75088 2014-03-31 13:12:19 jbaiter *question 75089 2014-03-31 13:13:08 loua dropdown menu 75090 2014-03-31 13:13:32 jbaiter yes, but that fiddle is a working dropdown menu, what is the issue? 75091 2014-03-31 13:13:43 loua jbaiter: dropdown menu that toggles when clicked (hide/show) but also hides when clicked somewhere else on the body 75092 2014-03-31 13:13:54 jessta Epeli: you can just have a global function that you call that re-renders the root component. 75093 2014-03-31 13:15:51 Epeli So there is now way to walk up to the root component from a child? 75094 2014-03-31 13:15:56 Epeli s/now/no/ 75095 2014-03-31 13:16:47 loua jbaiter: also on the example if you click on the button the it doesn't hide 75096 2014-03-31 13:17:35 loua damn, I thought this gotta be a simple example, can't believe it's taking me so much time. So simple on jQuery http://stackoverflow.com/questions/12720495/jquery-hide-element-on-click-anywhere-else-apart-of-the-element 75097 2014-03-31 13:18:57 jbaiter loua: just noticed myself, fixed it: http://jsfiddle.net/T2LCj/1/ 75098 2014-03-31 13:19:24 jbaiter you actually don't need "handleClick" or "handleBlur" functions, just tell the button component to call 'toggle' on the click and blur events 75099 2014-03-31 13:21:40 loua jbaiter: not quite, now it opens anywhere you click 75100 2014-03-31 13:23:41 jbaiter loua: take a look at react-bootstrap 75101 2014-03-31 13:23:43 jbaiter https://github.com/stevoland/react-bootstrap/blob/master/src/DropdownButton.jsx 75102 2014-03-31 13:24:06 jbaiter https://github.com/stevoland/react-bootstrap/blob/master/src/DropdownMenu.jsx 75103 2014-03-31 13:24:29 antihero is there a way to access a component's state from outside said component? 75104 2014-03-31 13:24:43 antihero I know it's dirty as all fuck, but what I'm doing is unavoidably dirty. 75105 2014-03-31 13:24:58 antihero basically I want to do clone-with-state or something 75106 2014-03-31 13:25:55 antihero or take the state, and use that as the props for another thing, so widgets don't have to re-get their data when cloned. 75107 2014-03-31 13:26:06 loua jbaiter: yeah tried to investigate, but has multiple files/required, I'm new to this :S. Anyway do you know any way how to access e.target.id for example? 75108 2014-03-31 13:26:18 antihero dve: ? 75109 2014-03-31 13:28:28 djcoin What are the advantages of using es6 import function over require ? 75110 2014-03-31 13:29:21 djcoin (as seen in react-bootstrap jsx source code linked above) 75111 2014-03-31 13:30:00 Timmeh antihero: I think the best way of going about that would be to just make a mixin that adds a clone function, which does all required stuff from an instance method, and therefore has access to all props and state 75112 2014-03-31 13:30:50 dve antihero: does cloneWithProps not do what you need? 75113 2014-03-31 13:32:13 jessta antihero: don't do that. seperate your data fetching from your UI components. 75114 2014-03-31 13:32:43 stevoland djcoin: None really. I just wanted to use shiny new stuff + export to commonjs and AMD 75115 2014-03-31 13:33:00 jessta antihero: pass your data in to components as props and store as little as possible in state. 75116 2014-03-31 13:33:36 antihero jessta: This doesn't seem logical from an organisational perspective, though - these are self contained widgets that need to just be passed an endpoint and sort out their own shit. 75117 2014-03-31 13:33:57 antihero the only reason I'm cloning them is because of having to use them with jQuery UI 75118 2014-03-31 13:34:12 djcoin stevoland: alright :) 75119 2014-03-31 13:34:40 antihero jessta: Wouldn't this mean I ended up with a gigantic huge global state, though? 75120 2014-03-31 13:35:00 antihero instead of state being handled by nice, compartmentalised components. 75121 2014-03-31 13:35:35 jessta antihero: it means that your state can be stored anywhere and anyhow you want. 75122 2014-03-31 13:35:52 antihero jessta: But it makes sense to put the widget's state in the widget :S 75123 2014-03-31 13:36:00 antihero so I can shove them anywhere and have them do their thing. 75124 2014-03-31 13:36:08 Timmeh I think the concern should be separating application state from component state. if it's application state, it should be at the higher level, passed down as props. if it's component state (which there would generally be very little of), it'd be in the component, and logically be private to the component 75125 2014-03-31 13:36:33 antihero Timmeh: It is logically private to the component, however, this is an exceptional circumstance. 75126 2014-03-31 13:36:54 Timmeh I'm not trying to judge whether you should or should not do it 75127 2014-03-31 13:37:01 jessta antihero: if you must then create a parent component to handle the state. 75128 2014-03-31 13:37:18 antihero I can see the logic behind it, I just think that a widget is rather self contained 75129 2014-03-31 13:37:24 Timmeh like I suggested above, you could make a mixin, which adds a clone method, which can do it relatively easy 75130 2014-03-31 13:37:25 antihero except when it isn't, because I need to clone it :) 75131 2014-03-31 13:37:29 Timmeh but dve raised a good question 75132 2014-03-31 13:37:34 Timmeh 15:30.50 dve> antihero: does cloneWithProps not do what you need? 75133 2014-03-31 13:38:08 antihero dve: No, it doesn't unfortunately. Of course I will look at re-architecting as jessta said but it seems logical. 75134 2014-03-31 13:39:16 antihero How do you folks handle your data/server stuff? 75135 2014-03-31 13:39:18 dve antihero: you can pass you 'inital-state' in via props 75136 2014-03-31 13:39:39 antihero dve: The only initial state a widget gets though, is an endpoint that the API gives it. It then goes and fetches its own data. 75137 2014-03-31 13:39:56 djcoin Is there a way in javascript to avoid having a string representing a float converting to a integer as in : parseFloat('0.0') or parseFloat('1.0') ? 75138 2014-03-31 13:40:11 antihero The issue I'm having is because of how I'm cloning/rerendering the widgets when one is deleted from sortable stuff, it means they all go and fetch their data again. 75139 2014-03-31 13:40:26 antihero So this would be solved by doing purely props, but then the complexity is in some other place :S 75140 2014-03-31 13:40:32 djcoin In my case, I'm having a problem where I parseFloat the input of the text field, converting to float then displaying it again. But the '.' is always thrown away 75141 2014-03-31 13:40:53 djcoin So I guess I need to remember that the last char is a dot and append it as a string 75142 2014-03-31 13:41:02 djcoin But maybe there are more straightforward way 75143 2014-03-31 13:41:15 dve antihero: ah ok. you should, as jessta said, extract the data access logic 75144 2014-03-31 13:41:38 jessta antihero: that's why you don't mix your view with your model. 75145 2014-03-31 13:42:32 Steve^ A component of the form React.DOM.button({}, React.DOM.someElement(...), " some text") will end up in React adding an extra span around the text 75146 2014-03-31 13:42:51 Steve^ I get 75147 2014-03-31 13:43:00 Steve^ Can I stop it doing that, or change it from a span to something else? 75148 2014-03-31 13:43:38 jessta Steve^: you can put the text in any tag you want, but it has to be in a tag. 75149 2014-03-31 13:44:33 loua jbaiter: thanks for your time, I kind of found workaround by e.target.parentElement.id 75150 2014-03-31 13:47:33 antihero dve, jessta: Yes well with react it is rather tempting. What do you folks use for models? 75151 2014-03-31 13:47:40 antihero and how do you inject it? 75152 2014-03-31 13:47:53 antihero is there an example of how to do this nicely? 75153 2014-03-31 13:48:17 jbaiter backbone is pretty popular 75154 2014-03-31 13:48:26 antihero I'm starting to realise that if you build stuff like the tutorial suggests it all starts to get rather tangled. 75155 2014-03-31 13:48:42 jbaiter https://github.com/usepropeller/react.backbone 75156 2014-03-31 13:48:43 dve antihero: theres some listed here https://github.com/facebook/react/wiki/Complementary-Tools & here http://dvemac.github.io/react-component-list/#data 75157 2014-03-31 13:49:41 antihero backbone-react-component? 75158 2014-03-31 13:50:22 antihero cortex? 75159 2014-03-31 13:51:25 antihero So the basic cortex example makes sense, but my application is fairly vast and nested. So I'm wondering how I'd get the cortex stuff into the same scope as whatever component. 75160 2014-03-31 13:51:29 antihero like DI or something 75161 2014-03-31 13:51:59 antihero cortex does look nice and minimal though 75162 2014-03-31 13:52:35 dve srcspider: Was looking at the SVG animation stuff, managed to knock up this all done within react updates - https://dl.dropboxusercontent.com/u/77271262/examples/SMIL/index.html 75163 2014-03-31 13:53:47 Timmeh djcoin: there are no ints or floats in javascript, there's only the Number type 75164 2014-03-31 13:54:27 antihero dve: So is cortex a workable solution at the moment? 75165 2014-03-31 13:54:31 Timmeh djcoin: Number has an instance method `toFixed` which sounds like it'd fix your problem 75166 2014-03-31 13:54:49 Timmeh djcoin: 0.0.toFixed(2) -> '0.00' 75167 2014-03-31 13:54:53 dve antihero: cortex seems to be popular and makes a lot of sense as it fits the one-way data principal 75168 2014-03-31 13:55:54 antihero Ok 75169 2014-03-31 13:56:35 dve antihero: theres also the Flux thing, that the FB devs are working on 75170 2014-03-31 13:56:44 djcoin Timmeh: yep 75171 2014-03-31 13:56:52 djcoin But I wanted to have a 0.0 as a float 75172 2014-03-31 13:57:13 djcoin So that I can still make computation and display it with the . 75173 2014-03-31 13:57:21 antihero Can't actually find Flux, I guess it's not ready or whatever. 75174 2014-03-31 13:57:42 dve antihero: yup still WIP apparently... https://github.com/fisherwebdev/react/tree/master/examples/todomvc-flux 75175 2014-03-31 13:59:23 Timmeh djcoin: right, well in javascript all Numbers are floats :-D 75176 2014-03-31 13:59:59 Timmeh djcoin: but I see your point/annoyance 75177 2014-03-31 14:00:19 antihero dve: Should I be doing my entire application as one big cortex? 75178 2014-03-31 14:00:50 djcoin :) 75179 2014-03-31 14:00:59 antihero man this all getting real confusing 75180 2014-03-31 14:05:17 efdee anyone here using react-async? 75181 2014-03-31 14:07:02 efdee from what i've seen, the point is that our react components load their data using rest -- and when doing this on the server side (eg. with node), your node app will, while handling your request, spin off new requests to said rest services in order to get their data, right? 75182 2014-03-31 14:09:51 antihero anyone used something like di-lite or something 75183 2014-03-31 14:10:54 dve antihero: i dont use cortex, i use a little di container to inject services into my components, one of which is a 'data access' service 75184 2014-03-31 14:12:38 cemerick Is there any way to create a custom DOM component class? createDOMComponentClass is not exported, unfortunately. 75185 2014-03-31 14:13:00 dve efdee: you could in theory call more direct methods on the server 75186 2014-03-31 14:13:32 dve efdee: the initial data is sent to the client as a window var (which is removed after being processed) 75187 2014-03-31 14:14:04 dve cemerick: which tag? 75188 2014-03-31 14:15:00 efdee dve: yes, fetching initial data and storing it in a window var is what i'd do if i had no react-async available 75189 2014-03-31 14:15:02 cemerick dve: arbitrary ones; looking to emit nonstandard HTML elements. 75190 2014-03-31 14:15:10 efdee but i thought the point of react-async was not having to do that 75191 2014-03-31 14:16:08 dve cemerick: like 75192 2014-03-31 14:16:11 dve ? 75193 2014-03-31 14:16:31 cemerick dve: sure, though note I'm not using JSX 75194 2014-03-31 14:16:55 dve cemerick: ahh ok. 75195 2014-03-31 14:17:20 dve you want your HTML output to be
    75196 2014-03-31 14:17:41 cemerick among other things 75197 2014-03-31 14:18:22 cemerick I really just want to be able to do: var eltX = createDOMComponentClass(false, "x") 75198 2014-03-31 14:18:30 cemerick and then go about my business :-) 75199 2014-03-31 14:19:56 cemerick I'm guessing this isn't possible given the module exports without putting together my own build, but I thought I'd ask. 75200 2014-03-31 14:21:01 ustunozgur what's the use case for that, integration with web components? 75201 2014-03-31 14:25:24 Steve^ I would like to pass a promise from the child to the parent (which tells it when it's done). Is the only way to pass a callback to the child? 75202 2014-03-31 14:25:39 cemerick ustunozgur: it's a semantic conceit; make element names useful and significant, rather than overloading divs with a classname, etc. 75203 2014-03-31 14:25:40 Steve^ (as a property) 75204 2014-03-31 14:28:10 ustunozgur cemerick: interesting, so you would then call document.createElement("x") to make the browser recognize them for display? 75205 2014-03-31 14:30:02 ustunozgur or document.registerElement('x-foo'); in web components, but that seems to require -'s. 75206 2014-03-31 14:30:15 ustunozgur http://www.html5rocks.com/en/tutorials/webcomponents/customelements/ 75207 2014-03-31 14:30:29 cemerick ustunozgur: yes, though my existing codebase abstracts from that to some degree. But, there's nothing special that needs to be done to make the browser "recognize" nonstandard tags, they're treated like any other inline content if no corresponding styles are in place. 75208 2014-03-31 14:31:10 ustunozgur oh interesting, I didn't know that, I thought they were ignored and not displayed. 75209 2014-03-31 14:31:20 cemerick nope, not at all. 75210 2014-03-31 14:31:25 Timmeh well, except for in old IE, where you would want to do document.createElement first 75211 2014-03-31 14:31:57 ustunozgur yes, that's where I got the idea that they are ignored, because I remember having to shim IE8 for article. 75212 2014-03-31 14:33:15 cemerick I'm happy with IE10+ :-) 75213 2014-03-31 14:33:21 cemerick In any case, yes, this works just fine: var x = document.createElement("foo"); x.appendChild(new Text("bar")); document.body.appendChild(x) 75214 2014-03-31 14:33:24 Timmeh hm, iirc, if old IE (unsure to what eversion, but yea, IE8 may be correct), and you use
    , you'd end up with a DOM with: 1. a "unknowntag" element, 2. a "div" element, 3. a "/unknowntag" element, all as siblings. not children 75215 2014-03-31 14:34:19 efdee "unofficial" element names have been problematic for IE in the past 75216 2014-03-31 14:38:06 cemerick oh, it actually needs to be document.createTextNode("bar") 75217 2014-03-31 14:38:13 antihero dve: So how do the props get set on the components? Do you use DI to pass the component's respective model into the parent container, then set the props that way? 75218 2014-03-31 14:38:52 antihero what's all this mori stuff 75219 2014-03-31 14:39:02 dve antihero: yup 75220 2014-03-31 14:39:06 antihero oh that looks all complex 75221 2014-03-31 14:39:58 iamdustan antihero: have you watched https://www.youtube.com/watch?v=DMtwq3QtddY&feature=youtu.be 75222 2014-03-31 14:40:01 antihero So I need [some sort of model system] dependency injected into [somewhere in my react app], which updates the state via [passed setState functions? listeners? hooks?] 75223 2014-03-31 14:40:31 antihero iamdustan: Nope, functional stuff does look good but I'm not really ready yet 75224 2014-03-31 14:40:49 antihero popped that talk on instapaper though 75225 2014-03-31 14:41:39 antihero I'm thinking of replicating the serverside architecture and using the model/repository/service thing. 75226 2014-03-31 14:41:50 antihero and then using DTOs to translate to the models. 75227 2014-03-31 14:41:56 antihero Would be quite a bit of effort, mind. 75228 2014-03-31 14:42:13 iamdustan antihero: I started to make the bridge to functional languages last year by reading a Haskell book. Definitely interesting and intriguing. Also, mindbending. 75229 2014-03-31 14:43:51 antihero iamdustan: Aye, I've toyed with it, but I'm too new to it to use it in a pro project at the moment. 75230 2014-03-31 14:45:23 antihero So I'm thinking of either using backbone.model or rolling my own thing which uses jslinq 75231 2014-03-31 14:45:52 antihero brain getting scrambled now, though. 75232 2014-03-31 14:49:34 antihero I could use typescript for my models, too! 75233 2014-03-31 14:57:48 cemerick heh, the custom element thing has been knocking around as an issue for 9 months: https://github.com/facebook/react/issues/146 75234 2014-03-31 15:12:38 antihero Is there anything I should look into over backbone.model? 75235 2014-03-31 15:14:01 antihero IE speed, etc 75236 2014-03-31 15:14:13 antihero or does it not really get faster unless you go fully immutable 75237 2014-03-31 15:19:16 antihero Hmm, so if I have my whole app as backbone collections and models 75238 2014-03-31 15:19:24 antihero man I confused 75239 2014-03-31 15:19:52 antihero essentially does it mirror the tree of the react components? 75240 2014-03-31 15:20:59 joecritchley Are there are Android or iOS libs that share React's philosophy, that could improve my dev knowledge of the platforms? (I know there's no mutable DOM, but the rest of the ideas...) 75241 2014-03-31 15:24:21 antihero is there something like om that doesn't require clojurescript 75242 2014-03-31 15:29:12 antihero mori? How the shit do I use that with React 75243 2014-03-31 15:31:35 joecritchley antihero: are you talking to the room? have you heard about flux? 75244 2014-03-31 15:33:19 djcoin joecritchley: what is flux ? 75245 2014-03-31 15:33:25 antihero joecritchley: Someone did mention flux. I'm just getting all confused as I figure I need to decouple my data model etc from my components. However, I'm not sure which direction to go in - TypeScript looks interesting, Backbone.Model, but everyone is raving about immutable structures and I have no idea how I'd actually...use them with my app? 75246 2014-03-31 15:34:07 antihero I'm kind of at the point where I know I need to do stuff to sort my app out, but rather confused as to which direction to go and how to go there. 75247 2014-03-31 15:34:27 antihero as it's all starting to get a little tangled and coupled which is nasty. 75248 2014-03-31 15:34:54 joecritchley antihero: i think backbone is a terrible fit for react. 75249 2014-03-31 15:36:02 joecritchley antihero: try the flux patterns if you haven't already. AFAIK, it's not immutable as such, but all state can be privatised, so your components end up just being a 1-way representation of state (rather than 'owning' it) 75250 2014-03-31 15:36:44 joecritchley typescript doesn't sound like it'll solve architecture issues. 75251 2014-03-31 15:37:12 jbaiter joecritchley: what are those 'flux patterns'? 75252 2014-03-31 15:37:18 antihero joecritchley: I can't find anything on flux 75253 2014-03-31 15:37:27 antihero well there's loads of stuff that isn't to do with react at all 75254 2014-03-31 15:38:32 joecritchley this is the only thing from the fb team so far... 75255 2014-03-31 15:38:33 joecritchley https://github.com/fisherwebdev/react/commit/85339bfdae5cd622fb97dc8c681376ba24e847da 75256 2014-03-31 15:39:09 joecritchley a todomvc app written using the patterns. flow is this: 'actions' from a component -> into a dispatcher -> store -> back to components 75257 2014-03-31 15:39:29 antihero so is flux purely a pattern 75258 2014-03-31 15:39:33 joecritchley yeah 75259 2014-03-31 15:39:37 joecritchley afaik 75260 2014-03-31 15:40:07 joecritchley i wrote this to deal when you have several stores to listen to. https://gist.github.com/joecritch/bfd66c2fa08d6ed409a1 75261 2014-03-31 15:40:11 jbaiter sounds highly intriguing 75262 2014-03-31 15:40:21 antihero joecritchley: What about data from server? 75263 2014-03-31 15:40:21 jbaiter thx joecritchley 75264 2014-03-31 15:40:46 antihero Currently it's a case of we get say, a list of widgets from the server, but no data and each widget will have an endpoint I hit 75265 2014-03-31 15:40:51 antihero to get widget data for instance 75266 2014-03-31 15:42:57 joecritchley can you clarify 'widget data'? you mean data that declares the ui? or separate data that just so happens to be rendered in a widget? 75267 2014-03-31 15:43:19 joecritchley + antihero 75268 2014-03-31 15:44:19 antihero joecritchley: Um like, so it might be a widget of football results, so my initial API call to "/widgets" will get a list of widget types and endpoints, so "ScoresWidget" and "/api/scores/1" or something, currently it works so that widget is instantiated as a component, which has endpoint as a prop, so it hits the endpoint and updates its own state with the scores from the server. 75269 2014-03-31 15:44:48 antihero Which made sense but means it manages its own state internally, which means that it's tightly coupled to the data model or something. 75270 2014-03-31 15:45:06 antihero also means I have ajax calls in componentWillMount which feels wrong. 75271 2014-03-31 15:46:43 rcs Why? 75272 2014-03-31 15:47:17 rcs Well, you want componentDidMount, so you know you have a thing. 75273 2014-03-31 15:47:43 antihero yeah but surely ajax should be done somewhere else in the code? 75274 2014-03-31 15:47:52 antihero in a service or some shit 75275 2014-03-31 15:47:56 antihero argh, this is why I am confuse 75276 2014-03-31 15:48:30 joecritchley If you want to decouple, i'd have a widgets store, a WidgetList component which listens to it. Then use simple object props (e.g. widget.type) to perhaps render different types of widgets 75277 2014-03-31 15:49:52 joecritchley If widget positioning needs to be flexible throughout the app, just listen for widgets on the App component, then write a "findWidget" method for each widget instance 75278 2014-03-31 15:50:01 jonathanj i'm idly wondering something: if you have something like a form, presumably you want to wait for all of your child components (let's say they're complex components) to load up before you run some logic in the form, is that something natural to do in React? 75279 2014-03-31 15:50:21 antihero hmm 75280 2014-03-31 15:51:04 antihero I think the issue is that there's a two way dependency between my views and my datamodel 75281 2014-03-31 15:51:14 antihero not only do widgets need to talk to data to get their contents 75282 2014-03-31 15:51:19 antihero but data inspires what widgets exist 75283 2014-03-31 15:51:39 antihero should my data model be heirarchical in the same way my app is? 75284 2014-03-31 15:51:56 antihero is using this.state ever ok? 75285 2014-03-31 15:52:34 joecritchley antihero: as a getter? sure. If you have code examples, i can take a look at some point if you want. @joecritchley on twitter 75286 2014-03-31 15:52:49 antihero joecritchley: cool! 75287 2014-03-31 15:53:07 antihero joecritchley: Would kind of need to be private though. 75288 2014-03-31 15:53:15 joecritchley jonathanj: promise object listening to child prop callback methods? :-s.... suppose that's a bit of a hack. 75289 2014-03-31 15:54:15 jonathanj well, how do i know all the children have loaded? 75290 2014-03-31 15:54:58 joecritchley jonathanj: are you just waiting for them to mount to the dom? or do something in particular? 75291 2014-03-31 15:55:36 jonathanj joecritchley: doesn't make a difference, does it? 75292 2014-03-31 16:00:14 jonathanj is there a guarantee to the order in which componentDidMount is called in a hierarchy? 75293 2014-03-31 16:31:08 cpojer jonathanj: why? 75294 2014-03-31 16:31:41 jonathanj cpojer: i guess i'm wondering if the parent will always be mounted before its children 75295 2014-03-31 16:32:15 jonathanj as to "why do you care", i don't know :P i'm just tossing some ideas around and it's one of the annoyances we have in our current framework 75296 2014-03-31 16:32:40 jonathanj (we have to have children call parent.childLoaded(this) all over so the parent knows when it's safe to do stuff) 75297 2014-03-31 16:33:22 hareth I’m trying to create a little extension for RxJS + React that would let me create observable from syntactic events 75298 2014-03-31 16:35:17 hareth ideally I would like to obtains the following api : Rx.React.fromEvent(component, ‘onChange’), but I struggle with component livecycle, I mean do I have a way to intercept when a component is unmounted ( event a simple DomComponent) for event cleaning ? 75299 2014-03-31 16:41:46 waqas1 hareth: componentWillUnmount? 75300 2014-03-31 16:41:50 morhaus if I pass a list of children to a component, can this component edit the props of the children or is this considered bad practice? 75301 2014-03-31 16:42:03 waqas1 hareth: http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount 75302 2014-03-31 16:42:59 hareth yeah but I won’t be able to add my mixins on builtin componenets (DOM one) 75303 2014-03-31 16:43:10 nicw I have a form with some react components in it with some form elements. Is there a way to get the values of the form inputs from the top level form when the user clicks submit. 75304 2014-03-31 16:43:22 waqas1 morhaus: Editing props is bad practice in general, unless you have a good logical reason for it (e.g., if the passed in object is meant to be updated, or is a callback to be called) 75305 2014-03-31 16:43:44 waqas1 morhaus: I'd say editing props.children is always bad practice, and probably undefined behavior in react 75306 2014-03-31 16:44:39 chenglou dont mutate props.children 75307 2014-03-31 16:44:41 chenglou clone them 75308 2014-03-31 16:44:58 waqas1 hareth: I don't think there's anything in the public API that'd allow you to do that. You could wrap built-in components in your own. 75309 2014-03-31 16:46:16 chenglou hareth: nope, lifecycle events are for composite components 75310 2014-03-31 16:46:31 hareth yeah :/ that’s what I thought 75311 2014-03-31 16:46:36 morhaus is passing component constructor in props considered a bad practice then? 75312 2014-03-31 16:47:02 chenglou morhaus: not really bad 75313 2014-03-31 16:47:34 chenglou TransitionGroup does it 75314 2014-03-31 16:47:56 chenglou just don't pass the actual component around (well, you won't be able to soon, but yeah) 75315 2014-03-31 16:48:59 nicw mm this doesn't work: React.Children.map(function(child) { console.log(child) }); 75316 2014-03-31 16:49:52 jonathanj you need to pass the children as the first argument 75317 2014-03-31 16:50:04 nicw like, this.props.children 75318 2014-03-31 16:50:04 nicw ? 75319 2014-03-31 16:50:14 morhaus chenglou: so passing a component descriptor in props instead of children is not recommended? 75320 2014-03-31 16:50:26 jonathanj nicw: yes 75321 2014-03-31 16:51:19 jonathanj morhaus: no, it's probably not a good idea 75322 2014-03-31 16:51:44 chenglou morhaus: like a={App()}? no 75323 2014-03-31 16:52:04 chenglou gah that ReactChildren API... 75324 2014-03-31 16:52:19 jonathanj chenglou: would you like to borrow my time machine? 75325 2014-03-31 16:53:35 chenglou I would 75326 2014-03-31 16:54:06 hareth Which syntax do you think is more natural : Rx.React.fromEvent(componentWithASpecialMixin, [ref], eventName), or this.fromEvent([ref], eventName) ? 75327 2014-03-31 16:55:33 morhaus chenglou: yeah, something like http://pastebin.com/QnyzMJDY 75328 2014-03-31 16:56:35 chenglou morhaus: pass Tab, Tab, Tab instead 75329 2014-03-31 16:57:06 morhaus chenglou: but what if I want to pass props to those tabs? another parameter? 75330 2014-03-31 16:57:09 chenglou and if you dont need much control over the children, just pass them as children: ... 75331 2014-03-31 16:57:16 chenglou ah 75332 2014-03-31 16:57:21 chenglou well that ^ 75333 2014-03-31 16:57:21 nicw I'm at the top-level of my app and this.props.children is undefined. 75334 2014-03-31 16:57:44 chenglou nicw: yup. Because props are what's being passed onto you 75335 2014-03-31 16:57:59 chenglou you know what, this has come back often enough. Imma make a tip entry 75336 2014-03-31 16:58:12 nicw How do I see my children? 75337 2014-03-31 16:58:35 chenglou in your case, put refs 75338 2014-03-31 16:59:12 nicw oh, so I put refs in all of my form elements? 75339 2014-03-31 17:02:14 chenglou nicw: eh kinda, but it depends what you're doing with it 75340 2014-03-31 17:02:23 chenglou there might be a less verbose way 75341 2014-03-31 17:03:13 nicw I have a form, and depending on a select box I want to show different form elements. (I already have this). I just need to get all the values from the form fields now when the user submits. 75342 2014-03-31 17:03:45 nicw I thought I could get access to all the children in the top level component and go through all the fields. 75343 2014-03-31 17:05:31 morhaus chenglou: the purpose of a TabGroup is to keep track of which tab is active (at the top) 75344 2014-03-31 17:06:09 morhaus chenglou: if I do TabGroup({initialTab: 0}, [Tab(props1), Tab(props2), Tab(props3)]), how can I pass an "active" prop to the tab that need to be active from the render method of TabGroup? 75345 2014-03-31 17:06:51 chenglou if you want to get the form values, you can pass them as props and when they change, let them call your callback 75346 2014-03-31 17:07:53 chenglou for activeness, you can pass a prop to TabGroup and in its render, make it highlight the correct thing 75347 2014-03-31 17:08:51 morhaus chenglou: but then it would have either to wrap each of its children in another div, or modify the active children's props? 75348 2014-03-31 17:09:23 chenglou for TabGroup? you only have to wrap the whole thing with a div 75349 2014-03-31 17:10:55 morhaus chenglou: then how do I make one particular children stand out if I can't edit its props, nor wrap it in another div 75350 2014-03-31 17:11:02 morhaus *child 75351 2014-03-31 17:15:15 chenglou morhaus: gimme a sec, I'll finish writing this tip entry and I'll show you a fiddle 75352 2014-03-31 17:23:14 chenglou morhaus: oh hey, I found an old fiddle I made for a related topic 75353 2014-03-31 17:23:15 chenglou http://jsfiddle.net/chenglou/hseZ6/ 75354 2014-03-31 17:23:28 chenglou morhaus: ^ tell me if that makes sense 75355 2014-03-31 17:26:17 morhaus chenglou: it does, but it doesn't really apply to my case 75356 2014-03-31 17:28:00 morhaus chenglou: I don't know if I can explain it 75357 2014-03-31 17:28:10 chenglou morhaus: you can map through the tabs and pass the active prop inside the map() 75358 2014-03-31 17:29:07 chenglou you're saying you can't find a way to assign a prop to one of the three tabs conditionally because the format of the `render` right 75359 2014-03-31 17:29:29 morhaus yes 75360 2014-03-31 17:29:57 morhaus the thing is I can't instanciate Tabs inside the render of the TabGroup 75361 2014-03-31 17:30:16 morhaus as I might pass in NavigationTab, UploadTab, which all return a Tab 75362 2014-03-31 17:31:08 nicw So 75363 2014-03-31 17:31:16 nicw I couldn't get the form data from the react components 75364 2014-03-31 17:31:27 chenglou morhaus: cool, sec 75365 2014-03-31 17:31:36 nicw so I just used selected the form in jQuery and did .serialize() 75366 2014-03-31 17:35:31 chenglou morhaus: http://jsfiddle.net/5XJmJ/ 75367 2014-03-31 17:35:46 chenglou eh kinda quick and dirty but is that more what you're looking for 75368 2014-03-31 17:38:24 morhaus chenglou: yep but I'd like to pass in different props to NavigationTab and UploadTab. Something like 75369 2014-03-31 17:39:32 morhaus chenglou: so in order to instanciate tab descriptors in the TabGroup render method, I'd need to pass in individual tab props to TabGroup as well 75370 2014-03-31 17:40:55 chenglou k sec 75371 2014-03-31 17:41:09 morhaus chenglou: something like 75372 2014-03-31 17:41:23 morhaus and that's the role of a descriptor instance, isn't it? 75373 2014-03-31 17:43:48 chenglou morhaus: http://jsfiddle.net/5XJmJ/1/ 75374 2014-03-31 17:43:50 chenglou lol ^ 75375 2014-03-31 17:46:10 morhaus chenglou: uuuh what 75376 2014-03-31 17:46:51 chenglou sorry that was quick and dirty, but it works if you check the console 75377 2014-03-31 17:47:02 morhaus chenglou: NavigationTab and UploadTab are never instanciated 75378 2014-03-31 17:48:32 chenglou morhaus: ugh sorry, change that Tab into tab in map() 75379 2014-03-31 17:49:30 morhaus chenglou: so basically pass in Tab ctor and props in TabGroup props? 75380 2014-03-31 17:50:47 chenglou yeah 75381 2014-03-31 17:54:07 chenglou morhaus: just in general, don't pass the instantiated components as props 75382 2014-03-31 17:54:15 chenglou after that it's just a matter of playing with js 75383 2014-03-31 17:54:53 morhaus chenglou: thanks 75384 2014-03-31 17:55:07 chenglou np, sry for the messy demo 75385 2014-03-31 17:57:43 morhaus btw could you explain what's wrong with passing descriptors in props? isn't children in props? 75386 2014-03-31 17:58:24 dve zpao: I ended creating a SVG SMIL support branch, would it be something you guys would accept a PR for, or has it purposefully been left out? 75387 2014-03-31 17:59:29 Chillax trying to figure out how to implement some text rotation animation in react, similar to what is demoed in this jquery example: http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html 75388 2014-03-31 18:00:01 Chillax does anyone have experience something like this? can point to an example or offer some suggestions? 75389 2014-03-31 18:02:18 zpao dve: not sure. maybe put it up and we can talk about it there? 75390 2014-03-31 18:02:58 dve zpao: ok, no worries 75391 2014-03-31 18:10:48 chenglou morhaus: when the descriptors come out, not much 75392 2014-03-31 18:11:13 chenglou you can even reuse multiple times in your render 75393 2014-03-31 18:11:27 morhaus chenglou: so it's just a matter of time until we can do it? 75394 2014-03-31 18:11:36 chenglou yes 75395 2014-03-31 18:11:39 morhaus nice :) 75396 2014-03-31 18:13:34 chenglou morhaus: just don't put refs on them, e.g. 75397 2014-03-31 18:13:46 chenglou then pass that and render that multiple times 75398 2014-03-31 18:24:33 nicw my boss gave up and now we have to use angular :( 75399 2014-03-31 18:26:25 chenglou nicw: what happened 75400 2014-03-31 18:28:40 nicw trying to use React with django and django-rest-framework 75401 2014-03-31 18:30:13 ustunozgur what's the pain point there? 75402 2014-03-31 18:36:48 ustunozgur nicw: you need to set onchange handlers forthe form fields to inform owner of state changes . 75403 2014-03-31 18:38:25 ustunozgur also see reactlink 75404 2014-03-31 18:38:25 nicw oh so when the form field state changes 75405 2014-03-31 18:38:37 nicw have it update the state of the top level component 75406 2014-03-31 18:38:41 ustunozgur yes 75407 2014-03-31 18:38:57 ustunozgur that will in turn set the props downstream and re-render subcomponents 75408 2014-03-31 18:39:21 chenglou nicw: and this way you naturally get all the up-to-date values of your components at the top 75409 2014-03-31 18:39:36 chenglou without going to fetch them when you need them 75410 2014-03-31 18:41:21 ustunozgur that's the main point of enlightenment you should understand, one feels like I need to pass that state, then re-render. but no, you make sure that state is changed. your render will be called by itself after that. 75411 2014-03-31 18:41:39 ustunozgur that's one confusion here the name "react" causes here I think 75412 2014-03-31 18:41:44 chenglou enlightenment, hah =) 75413 2014-03-31 18:41:51 ustunozgur it doesn't react by itself when you change the dom. 75414 2014-03-31 18:41:53 ustunozgur you handle that. 75415 2014-03-31 18:42:02 ustunozgur the "react" part is the rendering based on state change. 75416 2014-03-31 18:42:28 ustunozgur I had dismissed react for a long time since I had the impression "react" is two-way binding a la angular. 75417 2014-03-31 18:42:32 ustunozgur which it isn't. 75418 2014-03-31 18:42:53 ustunozgur it forces you to think of state and its transitions. that's the major source of complexity in UI. 75419 2014-03-31 18:47:17 nicw Anyone have luck combining React with Django, any tips on setting up the project. 75420 2014-03-31 18:47:44 nicw We're using https://github.com/etianen/django-require 75421 2014-03-31 18:49:14 insin anyone familiar with Entity Systems? it seems like you'd benefit from having React just hold raw data and the logic that operates on it elsewhere 75422 2014-03-31 18:50:31 insin is that the sort of thing you end up with naturally if you're RAF batching anyway with React? 75423 2014-03-31 18:50:34 ustunozgur nicw: me, in fact I'll be giving a talk on that in djangocon eu. http://2014.djangocon.eu/talks/#talk_73 I don't use django-require though, I just use jsx watch + web assets. 75424 2014-03-31 18:51:13 nicw Oh awesome! Any chance it'll go up online? 75425 2014-03-31 18:51:48 ustunozgur I think so, it usually does. But it is in May. And I need to prepare it first :) 75426 2014-03-31 18:51:57 waqas1 insin: http://en.wikipedia.org/wiki/Entity_component_system ? 75427 2014-03-31 18:52:05 nicw ustunozgur: I want to watch it now! :0 75428 2014-03-31 18:52:07 nicw :0 75429 2014-03-31 18:52:40 insin waqas1: yes. All I can find about it is stuff related to gamedev, though 75430 2014-03-31 18:52:44 balpert ustunozgur: let us know how we could have made the docs clearer on this point 75431 2014-03-31 18:53:08 waqas1 insin: Doesn't the Flux way of doing things naturally fall into that? 75432 2014-03-31 18:53:16 insin looking for good approaches for separating data from logic 75433 2014-03-31 18:53:28 insin I don't know - is that documented anywhere? 75434 2014-03-31 18:54:12 ustunozgur balpert: which point are you referring to? 75435 2014-03-31 18:54:26 chenglou insin: have you seen Chris Granger's talk on Light Table and ECS? 75436 2014-03-31 18:54:30 balpert ustunozgur: the "I had dismissed react for a long time since I had the impression "react" is two-way binding a la angular.", sorry -- I don 75437 2014-03-31 18:54:36 balpert 't know if you even made it to the docs though! 75438 2014-03-31 18:55:54 ustunozgur ah, it's just the name "react" I think :) maybe we could write react is not that reactive. reactive is bad since it goes out of control. you need control :) 75439 2014-03-31 18:56:26 chenglou also insin: there's a todomvc flux PR on github react, and a flux blog post is supposed to come soon 75440 2014-03-31 18:56:43 ustunozgur I think it has become much clearer, I had dismissed it during summer when I first heard it. 75441 2014-03-31 18:57:04 waqas1 insin: Closest thing to docs that exist: https://github.com/fisherwebdev/react/tree/master/examples/todomvc-flux 75442 2014-03-31 18:58:23 ustunozgur balpert: but yes, we could probably put a sidebar about that. because the first impression the name react makes is, user input. That is, user reacts with the page. and react reacts. 75443 2014-03-31 18:59:18 balpert ustunozgur: gotcha 75444 2014-03-31 18:59:20 ustunozgur but the actual reaction is not at interception of events, it is how you set the state in response to reacts. that is the part react excels for me. 75445 2014-03-31 18:59:25 ralpht ustunozgur, it's not miles away from a binding system when you use it. Instead of reflecting your model into bindings, you reflect it into state/props. 75446 2014-03-31 18:59:34 balpert yeah, it's meant to be reacting to state and updating the UI 75447 2014-03-31 18:59:50 insin thanks for the pointers, chenglou and waqas1, will investigate later 75448 2014-03-31 19:00:21 insin Doing an inernal talk on React at my company next week, sell sell sell! 75449 2014-03-31 19:01:20 waqas1 insin: Think of it as your state existing as a separate datastructure, that's passed in as props. Components don't modify this structure, they fire events on a global event bus, and some other part of your application is responsible for making modifications based on that. 75450 2014-03-31 19:02:02 ralpht Do most people use a global event bus with react? 75451 2014-03-31 19:02:29 ralpht I've avoided it so far because I'm worried about making something completely untracable/undebuggable 75452 2014-03-31 19:02:54 waqas1 I suspect most large applications have an event bus, whether react based or not, js based or not 75453 2014-03-31 19:02:55 ralpht So I pass down objects with various callbacks instead of surfacing events to a "global" bus 75454 2014-03-31 19:03:19 ralpht How do you keep your components reusable and composable with a global bus? 75455 2014-03-31 19:03:26 insin that's what I've been doing too, ralpht, for the same reasons 75456 2014-03-31 19:03:35 ralpht Don't you get situations where you can't have two of some component? 75457 2014-03-31 19:03:53 ralpht I'm not sure I have the right approach, so I'm curious what others are doing :) 75458 2014-03-31 19:04:01 ralpht insin, good to know 75459 2014-03-31 19:04:45 insin or not, also a React noob :) 75460 2014-03-31 19:05:52 insin presumably you'd fire events with a unique id in that case, regular Backbone style 75461 2014-03-31 19:05:54 waqas1 Err, it's easier when a component can only have one instance, since otherwise you have to attach some form of ids to the event to identify which part of the structure you wish modified :) 75462 2014-03-31 19:06:20 andreypopp_ Is there a tutorial/viudeo on how to use ReactPerf? IIRC Pete did some screencast on that... 75463 2014-03-31 19:06:48 waqas1 You are essentially separating 1. your view tree, 2. your application state, 3. your state modification code. This also allows e.g., external events like ajax to use the same event bus. 75464 2014-03-31 19:06:49 ralpht waqas1: right :). I guess if an app does that then I don't mind, but if a "toolkit/reusable" component depends on the bus and is unique then it's a problem. 75465 2014-03-31 19:07:17 insin ACTION wishes there was some sort of reference app which hits the major pain points of a real app with multiiple everything, instead of TODO being the standard demo 75466 2014-03-31 19:07:46 ralpht insin: totally, would love to see a big hairy real-world react app. 75467 2014-03-31 19:08:01 emacsen If I have onClick={foo}, if I want to wrap foo around another set of commands, how can I reference foo in my custom onClick method? 75468 2014-03-31 19:08:15 emacsen ralpht: do you have a few months to wait :) 75469 2014-03-31 19:08:18 balpert emacsen: not sure what you mean 75470 2014-03-31 19:08:55 insin considering trying to reactify one of the screens in the hairy app I'm working on in work at the moment, > 125 inputs on some screens, horrible JS behind them 75471 2014-03-31 19:09:01 ralpht emacsen: well, I think I'll have some hairy react apps of my own by then ;) 75472 2014-03-31 19:09:02 waqas1 ralpht: Oh, I agree with that completely, a reusable component would have no awareness of the event bus, it'll just have props and callbacks. 75473 2014-03-31 19:09:41 emacsen balpert: I end up writing a lot of ritual, eg when a dialog button is pressed, I call a function to cause it to fade out, then I want to unmount it from the dom, then finally I want to run the thing I originally cared about. It seems like writing the same fadeout, unmount, etc. code is dumb and I'd like to encapuate that logic in a class 75474 2014-03-31 19:10:01 ralpht insin: does react buy you much on something like that? I'd think the hard part would be validating the input data and enabling/disabling/showing/hiding fields based on that... 75475 2014-03-31 19:11:45 insin ralpht: that's what I'd like to find out :) I have a form library for the validation bit, but it just wasn't designed to handle that sort of disable/show/hide logic 75476 2014-03-31 19:12:52 ralpht insin: I did a bunch of work with Adobe Adam a few years ago, which was a library that let you declaratively model your dialog state, then it'd handle disabling things. 75477 2014-03-31 19:12:54 rcs insin: Paul Miller wants ostio to be that. https://github.com/paulmillr/ostio-apps 75478 2014-03-31 19:12:57 ustunozgur emacsen: I don't think you need a call for that. make a function generator function, a function that returns a function. and bind that in your onclick. 75479 2014-03-31 19:13:07 ralpht insin: I think Adobe still use it for all of the dialogs in Photoshop, etc. 75480 2014-03-31 19:13:13 rcs insin: I've been using it as a way to learn/play with react and data models for react. 75481 2014-03-31 19:13:24 ustunozgur onclick={makeFunction(foo)} where makeFunction takes a fn as input and returns another fn as output. 75482 2014-03-31 19:13:53 emacsen ustunozgur: if this were Python, I'd certainly use a decorator, which is basically what you're suggesting. I'm not familiar with that in Javascript (shows what I know about js) 75483 2014-03-31 19:13:53 ustunozgur it is a form of "decorator pattern " 75484 2014-03-31 19:14:04 ustunozgur yes, exactly 75485 2014-03-31 19:14:15 ustunozgur decorators are easy in js. 75486 2014-03-31 19:14:31 emacsen ah, there we go. just had to google it 75487 2014-03-31 19:14:50 emacsen (knowing what to search for is half the battle most of the time) 75488 2014-03-31 19:14:54 nicw I'm trying to transform my JSX and build it, but I type jsx -w and nothing happens 75489 2014-03-31 19:14:55 ustunozgur one issue to be careful is making sure "this" is bound properly. 75490 2014-03-31 19:15:06 ustunozgur so you may find .bind or .call helpful 75491 2014-03-31 19:15:10 nicw "Warning: still waiting for STDIN after 1000ms" 75492 2014-03-31 19:15:25 emacsen ustunozgur: thanks. I'll try to keep that in mind 75493 2014-03-31 19:15:34 ustunozgur for example, to call the original function with same arg, do somethingl ike original.call(this, arguments) in the decorator 75494 2014-03-31 19:16:03 ustunozgur call/apply/bind are your friends 75495 2014-03-31 19:16:35 emacsen ustunozgur: yeah, I haven't done any of this in JS yet 75496 2014-03-31 19:16:42 emacsen ustunozgur: this is my first real js application 75497 2014-03-31 19:16:47 nicw I'm using react-tools when I type jsx in terminal I just get, "Warning: still waiting for STDIN after 1000ms" 75498 2014-03-31 19:17:09 emacsen ustunozgur: not my first js application. My first "real one" 75499 2014-03-31 19:17:28 balpert nicw: you need to pass in a directory 75500 2014-03-31 19:17:48 ustunozgur emacsen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply see monkey patching section here. 75501 2014-03-31 19:18:22 nicw balpert: Yeah, now it runs but it do anything. ex jsx /build 75502 2014-03-31 19:19:18 ustunozgur nicw: just use watch with two dirs, src and build. jsx --watch js/src js/build 75503 2014-03-31 19:19:34 ustunozgur put your jsx in src output will be in build and refer to that from django. 75504 2014-03-31 19:20:09 nicw Oh cool, that works thanks. 75505 2014-03-31 19:20:47 emacsen ustunozgur: oh that's a good article. Thanks 75506 2014-03-31 19:20:48 ustunozgur one issue is if your jsx is not valid, it won't compile, so you will run into cases where your old code is in build. so watch out for that. 75507 2014-03-31 19:21:09 ustunozgur so you will change something, refresh, it will still serve the old version. 75508 2014-03-31 19:21:52 emacsen nicw: I don't know if it's the "right thing" but I've been using my build system (fabric in my case) to build my files individually before sending them to the server. If it doesn't compile, it doesn't finish the sending part 75509 2014-03-31 20:34:31 emacsen ustunozgur: I have a stupid question (most of my questions are), but are you suggesting I do something like {foo}.call() ? 75510 2014-03-31 20:34:40 emacsen or am I misunderstanding? 75511 2014-03-31 20:35:42 ustunozgur no, not suggesting that, the call to call or apply goes inside the function maker. 75512 2014-03-31 20:37:09 emacsen ustunozgur: yes, I did that, but then I end up needing to do something like functionMaker({foo}), don't I? Or are you suggesting I do that all outside of React? 75513 2014-03-31 20:37:25 emacsen ie var foo = functionMaker(bar); 75514 2014-03-31 20:37:51 ustunozgur what goes inside {} is a js expression 75515 2014-03-31 20:38:03 ustunozgur {functionmaker(foo)} 75516 2014-03-31 20:38:12 ustunozgur or outside as you say 75517 2014-03-31 20:38:17 emacsen ustunozgur: okay, thanks 75518 2014-03-31 21:17:07 ustunozgur nicw: for forms, see also this http://www.dustingetz.com/2014/02/18/react-dynamic-forms.html 75519 2014-03-31 21:17:30 nicw woah, awesome! 75520 2014-03-31 21:17:40 baranaby Hey all, I'm trying to change the className of an svg element, but can't seem to even when render is called again. I found an issue on github but am unclear if it could be my cause: https://github.com/facebook/react/pull/1264 75521 2014-03-31 21:28:57 ustunozgur baranaby: does it set it the first time? 75522 2014-03-31 21:35:04 ustunozgur I think it is related. see http://jsfiddle.net/vjeux/kb3gN/ mentioned in https://github.com/fforw/react/commit/1503050d6e9a9f11174b81962cf39cf5b10b5b59 75523 2014-03-31 21:37:44 balpert baranaby: yes, unfortunately className setting doesn't work at the moment 75524 2014-03-31 21:37:46 balpert for svg 75525 2014-03-31 21:37:50 balpert updates, that is 75526 2014-03-31 21:37:54 balpert the initial render should work fine 75527 2014-03-31 22:01:37 jakubmal @zpao: would you mind checking the email / confirming CLA for https://github.com/johnthethird ? 75528 2014-03-31 22:02:50 zpao jakubmal: all good. updated the labels on all the PRs 75529 2014-03-31 22:03:11 zpao thanks for checking :) 75530 2014-03-31 22:03:31 jakubmal @zpao: thanks! 75531 2014-03-31 22:04:33 ncthom91 hey all. Is there a proper or encouraged way to check whether or not a component has a particular mixin mixed in? 75532 2014-03-31 22:04:40 ncthom91 just check for the existence of the mixin methods? 75533 2014-03-31 22:05:21 zpao ncthom91: yea, i think that's the only way 75534 2014-03-31 22:08:54 thibauts Is it safe to use refs to call user-defined methods on child components from parent ? ie this.refs.myComponent.myMethod(); 75535 2014-03-31 22:11:15 balpert thibauts: yeah, that's legitimate 75536 2014-03-31 22:11:40 thibauts balpert: is this supposed to be stable feature ? 75537 2014-03-31 22:12:27 balpert pretty sure yes 75538 2014-03-31 22:13:42 thibauts balpert: great, thanks ! 75539 2014-03-31 22:15:14 thibauts And thanks to you all guys who build React. Thanks to you I escaped from backbone-view-hell and ensuing spaghetti code, and probably saved my clients project (and my ass at the same time) 75540 2014-03-31 22:18:42 jessta thibauts: that was my experience too. 75541 2014-03-31 22:19:13 jessta React delivers on what backbone tried to market itself as. 75542 2014-03-31 22:20:59 thibauts jessta: did you keep models and collections ? I'm seriously thinking about getting rid of them too and sticking to raw ajax and state 75543 2014-03-31 22:23:21 jessta thibauts: I'm working to remove backbone entirely from my stack. 75544 2014-03-31 22:57:16 vjeux thibauts: thanks for the kind words :) 75545 2014-03-31 23:04:39 zpao in case anybody wants to use react but only cares about server rendering (because oh god handlebars is frustrating), i made a thing: https://github.com/reactjs/express-react-views 75546 2014-03-31 23:07:58 vjeux zpao: this is really cool 75547 2014-03-31 23:08:55 zpao it's not exactly the fastest kid on the block (a single benchmark shows it's definitely slower than express-hbs), but it's so much easier for me to actually use. 75548 2014-03-31 23:09:30 petehunt zpao: probably no need for R.cC() at all 75549 2014-03-31 23:09:31 zpao so i'm fine if nobody else ever uses it, i made this for me :) 75550 2014-03-31 23:09:38 petehunt just functions 75551 2014-03-31 23:09:39 zpao petehunt: yea, i was thinking about that 75552 2014-03-31 23:10:17 zpao i was actually thinking of going even further and dropping the JS part of it and letting you just write the return value of render 75553 2014-03-31 23:10:58 zpao but i think that would actually bring back most of the problems with templating 75554 2014-03-31 23:11:02 chenglou soo... it's like, just html and handlebars-like {} commands? lol 75555 2014-03-31 23:11:09 chenglou yeah that 75556 2014-03-31 23:11:58 petehunt zpao’s drunk 75557 2014-03-31 23:13:09 zpao i wasn't drunk, but it was 1am when i had that idea... it was a bit crazy. i was going to make a jekyll template out of react. the front-matter would end up as your props 75558 2014-03-31 23:13:58 zpao but the way most people think about layouts and templates makes the idea of using react totally inverted and weird. maybe one day i'll come back to that 75559 2014-03-31 23:15:56 kingkarl85 zpao: i think server side is very important! thanks for an awesome tool! 75560 2014-03-31 23:16:23 zpao kingkarl85: np 75561 2014-03-31 23:57:22 nicw React.renderComponent(,document.getElementById('main_sidebar')); 75562 2014-03-31 23:57:37 nicw will that render the inside main_sidebar 75563 2014-03-31 23:57:42 zpao yes 75564 2014-03-31 23:57:45 nicw or replaces main_sidebar 75565 2014-03-31 23:58:07 zpao no 75566 2014-03-31 23:58:08 parshap nicw: replaces the contents of #main_sidebar 75567 2014-04-01 00:11:43 steadicat petehunt: how hard would it be to make a production build of react.js with raf batching? I'm using react with rails and I can't do require('react/lib/ReactUpdates') 75568 2014-04-01 00:18:26 baranaby balpert: ah, thanks, yes, the initial render works fine, but trying to do some transitions onMouseEnter by adding/removing className is #sadpanda 75569 2014-04-01 00:18:51 balpert baranaby: sorry about that -- if you add a key prop that changes then it'll mount a new node 75570 2014-04-01 00:18:55 balpert maybe you can use that as a workaround for now 75571 2014-04-01 00:19:01 baranaby that's my workaround! :) 75572 2014-04-01 00:19:52 baranaby I'll keep an eye on that github issue though :) 75573 2014-04-01 00:20:22 balpert I'll see what I can do to shepherd it through :) 75574 2014-04-01 00:20:42 baranaby similarly, with my recent wild svg escapades, doesn't seem to be transformed to a React.DOM call properly, not sure why 75575 2014-04-01 00:21:08 baranaby I meant to follow-up and file an issue about that 75576 2014-04-01 00:21:21 balpert should be working; it's in the list at https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/xjs.js 75577 2014-04-01 00:22:07 baranaby I know, but it simply gets transformed into `defs(foo)` instead of `React.DOM.defs(foo)` 75578 2014-04-01 00:22:15 baranaby I didn't dig deep enough to figure out why 75579 2014-04-01 00:22:20 zpao steadicat: i'll help you in a few if petehunt doesn't get back by then 75580 2014-04-01 00:22:36 steadicat thx! 75581 2014-04-01 00:41:42 zpao steadicat: check out the repo and this diff should do it - https://gist.github.com/zpao/9905453. then grunt build and you'll have everything in build/ 75582 2014-04-01 00:42:07 zpao and if you want otherwise stable branch (eg, no descriptors yet), check out 0.10-stable 75583 2014-04-01 00:42:13 steadicat sweet, thanks! 75584 2014-04-01 00:52:37 zpao np. all of the usual disclaimers about there being unknowns with it and such 75585 2014-04-01 02:01:41 matthewwithanm any react devs have some time to talk about this PR? https://github.com/facebook/react/pull/1327 75586 2014-04-01 02:02:44 matthewwithanm specifically (there’s a a thread on an outdated commit) an issue with ie8 and noscript reconciliation 75587 2014-04-01 02:07:28 balpert matthewwithanm: hi 75588 2014-04-01 02:07:33 balpert (I'm spicyj) 75589 2014-04-01 02:07:39 matthewwithanm hi! 75590 2014-04-01 02:07:45 matthewwithanm i’m matthewwithanm (: 75591 2014-04-01 02:08:04 balpert I figured 75592 2014-04-01 02:08:08 matthewwithanm haha 75593 2014-04-01 02:08:14 matthewwithanm so i’m not really sure how to proceed with the ie8 issue. 75594 2014-04-01 02:08:54 matthewwithanm it doesn’t seem to let you make a noscript element with any content. 75595 2014-04-01 02:12:26 balpert what does it do with no content? 75596 2014-04-01 02:13:51 balpert http://stackoverflow.com/q/10011064/49485 is another person who ran into the same thing I guess 75597 2014-04-01 02:14:25 matthewwithanm it depends on how you try to insert it 75598 2014-04-01 02:14:39 matthewwithanm if you use innerHTML or appendChild, you get an error 75599 2014-04-01 02:14:55 balpert what else can you do? 75600 2014-04-01 02:15:06 matthewwithanm if you try to set another element’s innerHTML to “” it fails silently 75601 2014-04-01 02:15:51 balpert oh, silently? 75602 2014-04-01 02:16:28 matthewwithanm yeah, in that last case, the other element will have no children and its innerHTML will be an empty string 75603 2014-04-01 02:19:50 matthewwithanm the only way around it that i can think of is to 1) always render noscript without content in the browser and 2) exclude them from reconciliation/invariant checking 75604 2014-04-01 02:20:35 matthewwithanm (this only works since rendering noscript contents on the browser side is pointless anyway) 75605 2014-04-01 02:27:18 balpert hmm 75606 2014-04-01 02:27:32 balpert if you set it to then you get an empty noscript? 75607 2014-04-01 02:31:03 matthewwithanm no /: but you can use document.createElement to create an empty noscript and append it with appendChild 75608 2014-04-01 02:31:50 balpert hmm 75609 2014-04-01 03:16:28 matthewwithanm oh hahaha 75610 2014-04-01 03:16:52 matthewwithanm just got the notification of your issue as i was posting a summary on my PR 75611 2014-04-01 03:18:56 matthewwithanm balpert: i gotta take off, but please let me know if you have any ideas about GH-1327. since the failing test isn’t really an issue with the new code, i’m not sure if it should hold it up or not. 75612 2014-04-01 03:20:40 balpert matthewwithanm: okay :) 75613 2014-04-01 03:20:47 balpert I think I want to fix #1341 first 75614 2014-04-01 03:20:48 reactbotx Issue 1341: