These are chat archives for chandu0101/scalajs-react-components

27th
Oct 2015
Janos Haber
@b0c1
Oct 27 2015 12:59
hi guys
Janos Haber
@b0c1
Oct 27 2015 13:12
@chandu0101 @elacin can you guys tell me when come the new release?
Chandra Sekhar Kode
@chandu0101
Oct 27 2015 13:23
elacin : Materialui has been released in version 0.13 now with support for react 0.14.
I dont think it makes sense to release this PR until we have updated all the material ui components to their new APIs. Demo kind of works now, but a lot of the props has been changed over time obviously, so there is some breakage
Janos Haber
@b0c1
Oct 27 2015 13:23
ohh
Chandra Sekhar Kode
@chandu0101
Oct 27 2015 13:24
from this comment material-ui work is pending , once hes done with that i can publish new artifacts :)
Janos Haber
@b0c1
Oct 27 2015 13:24
awesome :)
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 13:47
yeah @chandu0101 @b0c1 i started to update the APIs. it's an easy job in itself, but I'm having problems deciding how much to include and expose to the world
RaisedButton for example has a relatively small set of props, but optionally accepts another 10+ props that it passes on to EnhancedButton
think i could use some opinion from somebody who actually has used materialui a lot
though im very eager to get this released very quickly
Chandra Sekhar Kode
@chandu0101
Oct 27 2015 13:56
@elacin cool , @zlangbert i believe u r heavy user of material-ui ,can you please commment on this ..
Zach Langbert
@zlangbert
Oct 27 2015 14:16
@elacin @chandu0101 Yeah, I have the same problem. What I ended up doing for now is add an other: Map[String, js.Any] so you can pass whatever you want.
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 14:16
yeah i thought about that
it kind of defeats the purpose of the wrapper, but at least then you dont get stuck
Zach Langbert
@zlangbert
Oct 27 2015 14:20
It's less than ideal for sure
If we had a solid macro based way of generating the wrappers, it wouldn't be as big a deal to add a bunch of props
I just don't have time to look into that right now unfortunately
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 14:24
well it's not much effort to generate and use macros now, it's manageable
the question is if adding all those extra props will needlessly clutter the interface
Zach Langbert
@zlangbert
Oct 27 2015 14:40
right, I think if you cover 95% of what people might want, and always offer an other option, thats probably the best way to go
I also wonder if we could come up with a different style api that would give us the best of both worlds
not sure what that would look like though
Janos Haber
@b0c1
Oct 27 2015 17:08
I just using material ui with polymer :)
Roberto Leibman
@rleibman
Oct 27 2015 17:59
Hey... I just bumped scalajs-react to 0.10.0 and all kinds of things ended up breaking.
Some are obvious, others are not
for example, when I have, in a MuiRaisedButton: onTouchTap = backend.evolveDlgSubmit _
I get a type mismatch
Roberto Leibman
@rleibman
Oct 27 2015 18:14
oh! Now I see, scalajs-react-components is nowhere near compatible with scalajs-react 0.10.0!
Darn!
Is the elacin branch in a better state?
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:11
yes, that branch is updated to support scalajs-react 0.10
Roberto Leibman
@rleibman
Oct 27 2015 19:12
Cool though I'm having all kinds of problems making the changes to get it to work.
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:12
but it is not yet updated to material-ui 0.13 (required because scalajs-react bumped react from 0.12.x to 0.14)
so you will might see some API mismatches - i really havent had time to test it much yet
Roberto Leibman
@rleibman
Oct 27 2015 19:13
It seems to me that the reactjs people should have done a whole number version increase.... the changes they made are definitely not minor (almost like they don't know semver)
ok... so here's a specific question:
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:14
well, you're hardly committed an API until 1.0 in my eyes
they are not doing a terrible job either
sure, fire
Roberto Leibman
@rleibman
Oct 27 2015 19:14
I have a backend method:
def versionDetailsDlgClose(e: ReactEventH) = {
  println("Close Clicked")
  versionDetailsDlg(scope).get.dismiss()
}
Which I call from
val versionDetailsDlgActions: js.Array[ReactElement] = js.Array(MuiRaisedButton(style = Style.buttons, label = "Close", onTouchTap = backend.versionDetailsDlgClose _)())
How do I convert that to 0.10.0?
(this works in 0.9.2)
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:15
scalajs-react is mainly about Callback, you should read up a bit on that functionality
Roberto Leibman
@rleibman
Oct 27 2015 19:15
The error I get is:
type mismatch; found : ReactEventAliases.this.ReactEventH ⇒ Unit (which expands to) japgolly.scalajs.react.SyntheticEvent[org.scalajs.dom.raw.HTMLElement] ⇒ Unit required: chandu0101.scalajs.react.components.U[ReactEventAliases.this.ReactEventH ⇒ japgolly.scalajs.react.Callback] (which expands to) scala.scalajs.js.UndefOr[japgolly.scalajs.react.SyntheticEvent[org.scalajs.dom.raw.HTMLElement] ⇒ japgolly.scalajs.react.CallbackTo[Unit]]
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:16
so all your methods that before returned Unit now will return Callback
def versionDetailsDlgClose(e: ReactEventH) = Callback.info("Close clicked") >> Callback(versionDetailsDlg(scope).get.dismiss())
for example
you compose the two actions into one with for example >>
Roberto Leibman
@rleibman
Oct 27 2015 19:17
Ah, sort of like a future
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:17
yes, it works quite a lot like a future
Roberto Leibman
@rleibman
Oct 27 2015 19:18
japgolly.scalajs.react.Callback.type does not take parameters
(and that's what I meant about semver... minor releases should still compile old code, changes to the interfaces are only additive)
hamero
@hamero
Oct 27 2015 19:20
just wrap your :Unit returning methods with Callback{ ...body }
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:20
agree about semver, but versions less than 1 indicate unstable api mostly
Roberto Leibman
@rleibman
Oct 27 2015 19:21
Yes, but I get the error: japgolly.scalajs.react.Callback.type does not take parameters
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:21
huh
try to type out Callback.apply(...) perhaps
Janos Haber
@b0c1
Oct 27 2015 19:21
offtopic question: anyone using scalajs with scalatra? how can I integrate scalajs output with the backend?
Zach Langbert
@zlangbert
Oct 27 2015 19:21
If you post a full code example we could probably help more
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:23
i dont know what more code examples could show, the Callback object definitely has an apply method that takes parameters. this works: Callback(element.removeEventListener(tpe, cb, capture))
a random piece from the code i had here
Zach Langbert
@zlangbert
Oct 27 2015 19:24
Exactly, which is why it might help to figure out whats going on
Roberto Leibman
@rleibman
Oct 27 2015 19:24
Got it, my environment was not all in sync apparently, I refreshed and that worked.
ah right, that makes sense
anyway, you should read that intro, it might be helpful
@b0c1 i dont know in any detail, but i guess you only need to package the generated js like any other files you serve through your application, no?
i dont think it needs to be very scalatra specific
Roberto Leibman
@rleibman
Oct 27 2015 19:27
Thanks, I did read that, it was not clear.
It's also not clear how to modify direct uses of scope.state: I used scope.state.map(state => {})
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:28
right, we should probably make that documentation much better still
Zach Langbert
@zlangbert
Oct 27 2015 19:28
@elacin I'm looking at your PR for scalajs-react-components, I didn't realize you already did some of the macro stuff. Nice :)
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:29
ah yeah i was happy it worked - first time i tried to do anything with macros
yes @rleibman i agree, it's not clearly spelled out that you're supposed to pass props and state as parameters from render now
Roberto Leibman
@rleibman
Oct 27 2015 19:30
Elacin... another question (as I go through these) in MuiDialog, ref used to take a string, which was the same string I used to get a ref to the dialog. now it takes U[MuiDialogM ⇒ Unit]
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:30
or thats one alternative at least
that is a new react feature since 0.13
that you can pass in a callback instead of a string, and it will run when the component is mounted
i liked that much better, which is why i changed it
Roberto Leibman
@rleibman
Oct 27 2015 19:37
So now I have the following:
  val errorDlg = Ref.toJS[MuiDialogM]("errorDlg")

  val component = ReactComponentB[Unit]("VersionsPage")
    .initialState(State(List()))
    .backend(new Backend(_))
    .render($ ⇒
      MuiDialog(title = "Error",
        actions = errorDlgActions,
        ref = "errorDlg")("Hello World"))
And I use the errorDlg val to call methods in my dlg, such as show()
How would that look like now?
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:38
right
Roberto Leibman
@rleibman
Oct 27 2015 19:40
?
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:40
  var errorDlg = js.UndefOr[MuiDialogM]
  val component = ReactComponentB[Unit]("VersionsPage")
    .initialState(State(List()))
    .backend(new Backend(_))
    .render($ ⇒
      MuiDialog(
        title = "Error",
        actions = errorDlgActions,
        ref = (instance => errorDlg = instance))("Hello World")
    )
something like that i suppose
you would probably keep the reference (and the render) in your Backend
the upside is you dont have to match on strings, feed it the right component scope etc
Roberto Leibman
@rleibman
Oct 27 2015 19:43
var??
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:45
ugh, yes
Janos Haber
@b0c1
Oct 27 2015 19:45
@elacin ok, but how? I have 2 project (backend scalatra, frontend scala js) how can I "put" the result to the backend project? (I need the js deps too)
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:46
in a sense it's unavoidable here i think, at least i havent come up with another good solution
Roberto Leibman
@rleibman
Oct 27 2015 19:46
I think I liked the string better than a val!
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:47
riight, japgolly said the same
i prefer this way
though having a var is clearly not optimal
@b0c1 i suppose you package your scalatra project somehow, right? as a war?
Roberto Leibman
@rleibman
Oct 27 2015 19:48
var errorDlg = js.UndefOr[MuiDialogM] doesn't compile
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:48
in that case you only need to have sbt copy the generated javascript into that war so you can serve it like normal files
ah sorry, i didnt have an editor ready
var errorDlg: js.UndefOr[MuiDialogM] = js.undefined
Zach Langbert
@zlangbert
Oct 27 2015 19:49
imo the best thing is to not need refs at all
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:49
agreed
Zach Langbert
@zlangbert
Oct 27 2015 19:49
i believe material-ui is moving towards that
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:49
but material-ui is designed a bit around them unfortunately
hope they will
Roberto Leibman
@rleibman
Oct 27 2015 19:50
If I don't use refs, how do I close my dialogs?
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:50
i dont wan to run toggle() on a dialog, i want to set show: Boolean in a prop
you cant, hehe
Zach Langbert
@zlangbert
Oct 27 2015 19:50
You would have a prop isOpen
or something like that ^
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:50
anyway @rleibman if you dont want to see the var
Roberto Leibman
@rleibman
Oct 27 2015 19:51
I kind of see what you mean.
that gives you a CallbackOption when you access it
but it's still a var
(i dont think i will leave it in the branch when i merge it, it was only because i have been looking for a good solution for the reference problem)
Janos Haber
@b0c1
Oct 27 2015 19:54
@elacin yeah, now my sbt copy the result into the src/main/webapp/assets, but not copy the deps file :(
I try to find a solution... Thnx
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:56
yeah dont copy it into src/ - it will probably confuse sbt at some point
i did the same more or less
though that solution was not entirely optimal either
Roberto Leibman
@rleibman
Oct 27 2015 19:58
ok, now how do I call show on my dialog? Currently I'm using:
errorDlg(scope).get.show()
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 19:58
errorDlg.map(_.show()) i think
Roberto Leibman
@rleibman
Oct 27 2015 19:59
I think I can just remove the scop.
And yeah, map, or get...
ok, that makes sense.
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 20:00
if you went for the U[MuiDialogM] solution, you might want to do CallbackOption.liftOptionLike(errorDlg).map(_.show())
Janos Haber
@b0c1
Oct 27 2015 20:00
Thanks a lot...
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 20:01
np :)
Janos Haber
@b0c1
Oct 27 2015 20:10
@elacin and how can I use your branch in my application? ( want to use material ui ;))
ohh I see clone and build :) I missed the project dir :D
Øyvind Raddum Berg
@oyvindberg
Oct 27 2015 20:16
yeah publishLocal
and tell me how it works for you
Roberto Leibman
@rleibman
Oct 27 2015 20:18
Thanks a lot for the help, it's coming along!
Now... this no longer compiles .configureSpec(materialui.installMuiContext)
And of course, no mention here https://github.com/japgolly/scalajs-react/blob/master/doc/CHANGELOG-0.10.md about what to do.
Zach Langbert
@zlangbert
Oct 27 2015 20:22
You don't actually need to do that anymore if you just want the default theme
Roberto Leibman
@rleibman
Oct 27 2015 20:22
ok, cool.
How about .configure(Reusability.shouldComponentUpdate)
?
Zach Langbert
@zlangbert
Oct 27 2015 20:24
If you did want to pass a custom theme though:
def installMuiContext(rawTheme: js.Dynamic): ReactComponentSpec[_, _, _, _] => Callback =
    spec => Callback {
      val s = spec.asInstanceOf[js.Dynamic]
      s.updateDynamic("childContextTypes")(js.Dynamic.literal(
        "muiTheme" -> React.asInstanceOf[js.Dynamic].PropTypes.`object`): js.Object
      )
      s.updateDynamic("getChildContext")((() => js.Dynamic.literal(
        "muiTheme" -> ThemeManager.getMuiTheme(rawTheme)
      )): js.Function)
    }
Roberto Leibman
@rleibman
Oct 27 2015 20:24
Thanks, that will actually be useful on my next iteration!
Zach Langbert
@zlangbert
Oct 27 2015 20:25
Not sure about reusability...
Roberto Leibman
@rleibman
Oct 27 2015 20:25
I have no idea how that ended up there, or what it does.
Roberto Leibman
@rleibman
Oct 27 2015 20:27
ah, ok, that makes sense.
Now I remember