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

19th
Jul 2015
Marek Kadek
@KadekM
Jul 19 2015 03:12
hi guys... I'm quite new to scalajs (and js/frontend at all)... I can't figure out how the heck do I install the material-ui ? so I npm-installed it, got bunch of files in node_modules... but how to I integrate it with my page? I have already running web server...
and sorry for dumb question
Zach Langbert
@zlangbert
Jul 19 2015 03:54
@KadekM You need to use a js build system to generate the normal javascript. Webpack, browserify, etc.
Chandra Sekhar Kode
@chandu0101
Jul 19 2015 04:52
here is the web pack example
@KadekM no its not a dumb question , as @zlangbert said u must familar with js world tools web pack/browserify .. or sbt-web , it takes some time in the begining but soon u’ll be more productive :)
Zach Langbert
@zlangbert
Jul 19 2015 05:02
I wonder how hard it would be to make a webjar out of material-ui
Simer Plaha
@simerplaha
Jul 19 2015 05:03
@chandu0101 do we still need know/learn how to use JS build tools (webpack, browserfy) with Scalajs ? Being new to front end stuff I thought it would be as simple as just adding material-ui's webjars to our build.sbt file and then using scalajs-sbt plugin to push the material-ui JS and CSS files to jsdeps.js and then reference the Material UI's api through a material UI facade ? Am I wrong ? I'm very new to front end stuff
@zlangbert ... there is a webjar for material-ui at www.webjars.org ... :)
Zach Langbert
@zlangbert
Jul 19 2015 05:09
I konw, but I don't think that's very useful in this case
Maybe if you had a module loader and then included lib/index.js... idk
Plus included every component you wanted to use
Marek Kadek
@KadekM
Jul 19 2015 05:19
thanks for help guys
now understand a bit, except i got 2 reacts loaded now in browser (one through sbt, and one through index.js/webpack thing)
and materials still dont work (evne though I installed context)
Zach Langbert
@zlangbert
Jul 19 2015 05:22
Do you get an error?
Marek Kadek
@KadekM
Jul 19 2015 05:22
yes
when opening the page
something like Cannot read property '__reactAutoBindMap' of undefined react scala
Zach Langbert
@zlangbert
Jul 19 2015 05:23
Did you remove the extra react include? I remember when I first set it up I was getting all kinds of crazy errors and then I realized I had included React twice
Marek Kadek
@KadekM
Jul 19 2015 05:24
where would the extra include be ?
i have two reacts i assume
Zach Langbert
@zlangbert
Jul 19 2015 05:25
Wel like you said, one from the webjar and the other got put in the webpack output
Drop the webjar one
Marek Kadek
@KadekM
Jul 19 2015 05:31
it works
yes!
thanks man
still it's painful process
Zach Langbert
@zlangbert
Jul 19 2015 05:32
Np, and yeah, I agree
Marek Kadek
@KadekM
Jul 19 2015 05:32
can't I get rid of all the webpack-thing and just reference material-ui as webjar or something ? Control everything from sbt ?
Zach Langbert
@zlangbert
Jul 19 2015 05:32
That's why I was saying if we could make a webjar that's easier to use it would be nice
Marek Kadek
@KadekM
Jul 19 2015 05:33
on webjars.org, there is material-ui. Is that not what we want ?
Zach Langbert
@zlangbert
Jul 19 2015 05:34
That is just a clone of the npm package. So it's a bunch of modules that you wouldn't be able to use directly
If you click on the files link to see what's in it, you'll see what I mean
Marek Kadek
@KadekM
Jul 19 2015 05:35
i see
Chandra Sekhar Kode
@chandu0101
Jul 19 2015 09:36

@simerplaha

do we still need know/learn how to use JS build tools (webpack, browserfy) with Scalajs ?

not mandatory , you can use sbt/sbt-web/sbt wrappers ..

material-ui JS and CSS files to jsdeps.js

you cannot bundle css to jsdeps , u need sbt-web for this . btw material-ui uses inline styles (no css)

Note : Even i am new frontend/sbt , i selected webpack as a random choice ,it really suits my taste buds till now ..

Marek Kadek
@KadekM
Jul 19 2015 10:33
It just kinda works for me... currently I'm having problem, I used https://github.com/chandu0101/scalajs-react-components/blob/master/demo/src/main/scala/chandu0101/scalajs/react/components/demo/components/materialui/MuiDialogDemo.scala#L48-L68 but when I render it I get Uncaught TypeError: Cannot read property 'spacing' of undefined
any ideas ?
from here
getStyles: function getStyles() {
        var spacing = this.context.muiTheme.spacing;
Marek Kadek
@KadekM
Jul 19 2015 10:39
oh geez im idiot
forgot to set the materialui context... i should probably take a break