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

28th
Oct 2015
Roberto Leibman
@rleibman
Oct 28 2015 00:14
Latest error I got:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
The stacktrace is nowhere in my code.
Roberto Leibman
@rleibman
Oct 28 2015 00:27
I can't figure out how I could have refs outside of render... as to having multiple copies of react.... I create a bundle page with webpack so could that be the source of the multiple reactlib?
Zach Langbert
@zlangbert
Oct 28 2015 01:03
If you are creating a bundle with webpack, don't include the react webjar as well
I miss something?
using scalajs react 0.10.0 and your branch
ok I miss a () but still bad :|
Janos Haber
@b0c1
Oct 28 2015 14:16
if I change to build to buildU I got error in the js side...
MuiTextField.scala:29Uncaught TypeError: Cannot read property 'TextField' of undefined
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 14:44
yeah it was changed so you need those extra () at some point
material-ui is loaded in the browser?
Janos Haber
@b0c1
Oct 28 2015 14:44
Yeah I think this is the problem... I try to load using webjar...
it's possible? or I must pull by hand?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 14:48
no, the thing is that you need to use require.js to use what is packaged in the webjar
checkout the demo project to see how we build a bundle that we later give to the browser
using normal frontend tools
i really hate that we havent talked sbt into doing this yet
Janos Haber
@b0c1
Oct 28 2015 14:49
ohh, I expected a single.js like react :D
@elacin ok let me clear... I must use nodejs to build the app?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 14:53
you can use it once, and then check in the generated blob with materialui, react and whatever else you need
but yes, right now you need to
Janos Haber
@b0c1
Oct 28 2015 14:54
yeah, I try to avoid this :|
That's why I choose scala js/react instead of polymer
Otto Chrons
@ochrons
Oct 28 2015 15:01
@elacin have you checked out sbt-web plugin support for that?
it's running Node.js internally :)
Janos Haber
@b0c1
Oct 28 2015 15:02
if I added as webjar, why I can't call require("material-ui") ?
Otto Chrons
@ochrons
Oct 28 2015 15:09
where would it get it?
Janos Haber
@b0c1
Oct 28 2015 15:10
ummm... now I must to go but I'll do some test...
Otto Chrons
@ochrons
Oct 28 2015 15:10
require is a Node.js thing, that is used to build the JS app from modules
Janos Haber
@b0c1
Oct 28 2015 15:12
ohh, ok, I understand the problem
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 15:15
@ochrons i have not tried it yet, will give it a shot. thanks! :)
Otto Chrons
@ochrons
Oct 28 2015 15:30
because it would be nice to be able to run all that gulp, grunt, browserify from SBT with those plugins
Roberto Leibman
@rleibman
Oct 28 2015 15:34
So here I am... fighting the same battle... if I add react and react-dom from my sbt script, then I'm missing materialui. If I add materialui from webpack, then it complains that I have two reactjs libraries loaded. If I just do the webpack with a full set I get a "cannot read property 'render'", which I understand to mean I don't have all of the react I need. Ideally I want webpack to create a js with everything I need instead of using sbt.
My webpack dependencies are:
"dependencies": { "material-ui": "latest", "react": "latest", "react-dom": "latest", "react-geomicons": "latest", "react-infinite": "latest", "react-select": "latest", "react-spinner": "latest", "react-tagsinput": "latest", "react-tap-event-plugin": "latest", "svg-loader": "latest" }
Am I missing anything?
Roberto Leibman
@rleibman
Oct 28 2015 16:39
On a separate note... my componentDidMount calls an ajax method. The ajax method is doing stuff and then doing a modState. The ajax method thus returns Future[Callback] which componentDidMount is not happy with. Regardless of that... the screen is never repainted with my new state.
Zach Langbert
@zlangbert
Oct 28 2015 16:45
You need to run the inner callback when the future completes
try calling runNow() on your modState
Roberto Leibman
@rleibman
Oct 28 2015 16:47
Darn! that worked!
So do I have to do that on every ajax call that changes the state?
Zach Langbert
@zlangbert
Oct 28 2015 16:49
basically, yes. you always need to keep in mind that a callback does not run unless something runs it
Roberto Leibman
@rleibman
Oct 28 2015 16:50
Not very intuitive, as I moved from 0.9.2 to 0.10.0
Zach Langbert
@zlangbert
Oct 28 2015 16:51
that's a use case that gets more annoying i'll admit
you could probably come up with an implicit conversion from Future[Callback] to Callback to make things nicer (i think?)
Roberto Leibman
@rleibman
Oct 28 2015 16:52
Not only that, it's not clear what will run the callback... I'm assuming that when I pass a callback as an event handler (e.g. returning modState in onTouchTap) the callback gets run?
A conversion of future to callback would be: Callback { fut.map(_.runNow) } ?
Zach Langbert
@zlangbert
Oct 28 2015 16:54
If you are using @elacin's branch then yeah, I'm assuming it handles that
right, except foreach would be more appropriate in this case
Roberto Leibman
@rleibman
Oct 28 2015 17:31
ok, that's coming along... but I'm still stuck on this:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
Zach Langbert
@zlangbert
Oct 28 2015 17:35
You're certain you don't have react included twice?
Roberto Leibman
@rleibman
Oct 28 2015 18:48
It was a mess, but I finally tried a combination that worked. Including only material-ui in the package. json, and only fb.me/react-dom-0.14.0.js in my index.html
Janos Haber
@b0c1
Oct 28 2015 19:59
@elacin so no way to use material ui without hack the build system and using node... If i want to use node was stay in polymer :( I'm not understand simple react component why depend to node....
Otto Chrons
@ochrons
Oct 28 2015 20:06
because material-ui is only available as npm package
so that you get only those parts that you actually need
Janos Haber
@b0c1
Oct 28 2015 20:09
React available in npm too... I understand, if you want to use material ui, use node for frontend development. But i want to use scala js instead of JavaScript....
Otto Chrons
@ochrons
Oct 28 2015 20:10
you can of course prepackage a full MUI version (like React is distributed) and use that instead
Janos Haber
@b0c1
Oct 28 2015 20:11
That what i want. How can I do that?
Otto Chrons
@ochrons
Oct 28 2015 20:11
just make a JS file with window.Mui = require('material-ui');, run it through gulp or something and use the resulting JS file :)
then you have Mui in global scope
Janos Haber
@b0c1
Oct 28 2015 20:11
Really? It will create a single js?
Otto Chrons
@ochrons
Oct 28 2015 20:12
or maybe it's browserify these days
or webpack, pick your poison
Janos Haber
@b0c1
Oct 28 2015 20:12
Ty... Maybe I'll ask you
Otto Chrons
@ochrons
Oct 28 2015 20:12
it'll package React in there as well :)
remind you, I've never used any of these JS packaging tools :stuck_out_tongue_closed_eyes:
Janos Haber
@b0c1
Oct 28 2015 20:15
Oh, ok... I just want a single js from mui, to create webjar and include into my app...
Otto Chrons
@ochrons
Oct 28 2015 20:15
no need for webjar
Janos Haber
@b0c1
Oct 28 2015 20:17
Ok i can poul from local, but maybe anyone need too.. If somebody want to use scalajs react component easily :smile:
Without node hack and etc...
Roberto Leibman
@rleibman
Oct 28 2015 20:20
I was able to do it this morning with webpack, using something like https://github.com/elacin/scalajs-react-components
It is a pain in the neck to get it right.
Otto Chrons
@ochrons
Oct 28 2015 20:20
welcome to JS dev world :)
Janos Haber
@b0c1
Oct 28 2015 20:25
@ochrons no problem with js dev, if the full stack in js... but if the backend in scala (scalatra,play,spray...) or java (spring,jersey...) it's a pain...
Otto Chrons
@ochrons
Oct 28 2015 20:27
When in Rome, do as the Romans do...
Janos Haber
@b0c1
Oct 28 2015 20:27
hahaha :D
that's why I want to use scala js instead of node ;)
if I can't use material ui from scala js easily I can drop out the whole scala js thing and move back to gulp-node (polymer or react is irrelevant in this case)
Zach Langbert
@zlangbert
Oct 28 2015 20:39
Not being able to use material-ui easily is a pain point at the moment, but I wouldn't say thats a reason to drop scalajs altogether
It's not that bad just to use webpack or something to generate a js dependencies file
Janos Haber
@b0c1
Oct 28 2015 20:39
@zlangbert you have an idea how can I a simple single js from material-ui to use ?
+create
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 20:40
i could check in the webpacked javascript bundle that the scalajs-react-components creates
that way you can just include that file, and you're good to go with mui and react
Roberto Leibman
@rleibman
Oct 28 2015 20:40
Yes, that's what I did.
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 20:40
so no npm and no npm/webpack, given that you dont need more
Zach Langbert
@zlangbert
Oct 28 2015 20:41
That would be good imo
Janos Haber
@b0c1
Oct 28 2015 20:41
just the lib?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 20:41
we really need to solve this packaging problem in some way or another
all the javascript parts
Zach Langbert
@zlangbert
Oct 28 2015 20:41
Janos Haber
@b0c1
Oct 28 2015 20:41
i love that thing :)
Zach Langbert
@zlangbert
Oct 28 2015 20:42
you can work off of that to produce something
mainly the index.js file in that folder
Janos Haber
@b0c1
Oct 28 2015 20:43
@zlangbert I'm not understand you :) I don't want to add node to my build process... now in the demo the nodejs will pull the required libraries and generate the bundle file...
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 20:44
you can check in that bundle file
Zach Langbert
@zlangbert
Oct 28 2015 20:44
you just need to run it once to produce the bundle
then like @elacin said, check in the bundle to VC and just include it in your page
Janos Haber
@b0c1
Oct 28 2015 20:47
that's ok, I just try to solve in long term...like create a webjar or embed into the library...
Zach Langbert
@zlangbert
Oct 28 2015 20:48
yeah, hopefully there will be a better solution soon
one of us could maintain a webjar
Janos Haber
@b0c1
Oct 28 2015 20:49
(crossedfingers)
:D
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 20:53
yeah i would be really happy if anybody could provide a webjar for material-ui
Janos Haber
@b0c1
Oct 28 2015 20:54
it's easy, because you already use node
ohh... I mean from your webpack code :)
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 20:54
yeah i suppose, i just havent had time to look into it
Janos Haber
@b0c1
Oct 28 2015 20:54
you have everything just move the package.json, index.js and all required css/js into a separated library
push them into npm
and that's all :)
I started to do that ;)
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 20:56
interesting
could we get a material-ui without react that way too?
Janos Haber
@b0c1
Oct 28 2015 20:58
hmm... I never used webpack, I'll test it
Zach Langbert
@zlangbert
Oct 28 2015 20:58
thats the part I got stuck on when trying to make a webjar
admittedly I didn't end up trying very hard
Janos Haber
@b0c1
Oct 28 2015 20:59
@elacin everything need except src and index.html?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:00
a javascript file that contains everything from mui already required, and without react, so that when you use it you specify webjars for react that version you want, and then another webjar for materialui, then include both in your index.html and whatever, and it should work
is what i would have wanted
Janos Haber
@b0c1
Oct 28 2015 21:01
I mean, reac-tap-event-plugin, react-dom, etc...
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:01
yes, i suppose all of those in their own webjar
Janos Haber
@b0c1
Oct 28 2015 21:42
@elacin the pages too? I mean GeomIconsPage, InfinitePage etc...
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:42
no, im thinking one webjar per library
Janos Haber
@b0c1
Oct 28 2015 21:43
Ohh...
so you want to create 6 library?
Why not one webjar (for our project) and the user will include what he want in js dependencies?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:45
well that would also certainly work
i was talking optimally here, i want sbt to know which libraries i need, and then magically arrange everything for me so i end up with a dependencies blob
if its only for this project i suppose we could just include it with the scalajs maven artifact, dont know if even that will work
Janos Haber
@b0c1
Oct 28 2015 21:48
elacin umm... maybe but what do you think about this? we create one webjar, which contain 6 javascript... eac is one component and you decide which you want:
"org.webjars.npm" % "react-components" % "0.2.0" / "assets/mui.js" commonJSName("Mui") dependsOn "react-with-addons.js",
"org.webjars.npm" % "react-components" % "0.2.0" / "assets/infinite.js" commonJSName("Infinite") dependsOn "react-with-addons.js",
one webjar, multiple js
or you want to pull multiple webjar?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:53
i dont know
would both of those contain react?
also you want minified versions of them for production in there
Janos Haber
@b0c1
Oct 28 2015 21:53
our webjar will not contain react or react dom
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:54
well if that is possible i like the idea
Janos Haber
@b0c1
Oct 28 2015 21:54
I'll generate the assets, can you check it?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:54
sure, give it a shot
Janos Haber
@b0c1
Oct 28 2015 21:54
how can I send to you?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:55
i suppose email works, «»
Janos Haber
@b0c1
Oct 28 2015 21:56
can I remove the images?
or it's neccessary?
@elacin
var React = require('react');
var ReactDOM = require('react-dom');
var injectTapEventPlugin = require('react-tap-event-plugin');

injectTapEventPlugin();

window.ReactDOM = ReactDOM;
window.React = React;
var mui = require("material-ui");
window.mui = mui;
this enough for the js?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 21:58
youre working from the demo project?
sure yeah, theyre only for the demo itself
Janos Haber
@b0c1
Oct 28 2015 21:58
cool
sent
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:01
thanks, will have a look
Janos Haber
@b0c1
Oct 28 2015 22:02
I removed react, react-dom and react-tap-event-plugin
I mean externalized ;)
Janos Haber
@b0c1
Oct 28 2015 22:07
@elacin you got it?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:08
yes thanks, im checking it out now
so mui.js here contains those three plus mui?
and the other ones can be hotloaded later?
Janos Haber
@b0c1
Oct 28 2015 22:10
mui.js contains material-ui
ok I'll to create a demo for test :D
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:11
but also react? it starts with webpackJsonp([1],[function(e,t,n){var o,r=n(1),i=n(7),s=n(337);s(),window.ReactDOM=i,window.React=r, so it's setting them, no?
Janos Haber
@b0c1
Oct 28 2015 22:12
okok
I got the problem...
I'll solve it
Janos Haber
@b0c1
Oct 28 2015 22:28
@elacin ok I permanently added the react tap event plugin (the plugin doesn't have minified and generated version), now this:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="assets/react-components.js"></script>
<script src="assets/mui.js"></script>
<script>
    console.log(window.mui)
</script>
</body>
</html>
works :)
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:28
sweet!
Janos Haber
@b0c1
Oct 28 2015 22:29
assets sent
can you check?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:29
sure
Janos Haber
@b0c1
Oct 28 2015 22:30
so you need the "wrapper" and then the specified library... (webpack work in these way)
or, we try to using gulp or something similar to generate the assets
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:35
im getting errors
working on the demo for the project here
Janos Haber
@b0c1
Oct 28 2015 22:35
hmm
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:35
TypeError: $g.hljs is undefined
when i open one of the mui demo pages
Janos Haber
@b0c1
Oct 28 2015 22:37

ohh I removed highlihgt hs as you see

@elacin
```
var React = require('react');
var ReactDOM = require('react-dom');
var injectTapEventPlugin = require('react-tap-event-plugin');

injectTapEventPlugin();

window.ReactDOM = ReactDOM;
window.React = React;
var mui = require("material-ui");
window.mui = mui;
```

highlight is required? or it's used only in the demo?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:37
its only used in the demo
Janos Haber
@b0c1
Oct 28 2015 22:38
umm... maybe try to pull with <script>
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:44
how do you generate these though?
Janos Haber
@b0c1
Oct 28 2015 22:44
it's wrong?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:45
im getting some other errors too, but it might be because it fails to load the highlighting
Janos Haber
@b0c1
Oct 28 2015 22:45
but You can get your highlight script like react
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:46
yeah im commenting it out now to see if it helps
webjar dir
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:49
cool thanks
it works better without the highlighting
Janos Haber
@b0c1
Oct 28 2015 22:50
I can do a pull request and you'll change what do you want :)
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:52
yeah great
as far as i can tell this should let us use the library and never touch npm if we dont want to
Janos Haber
@b0c1
Oct 28 2015 22:54
if we create a webjar from this I think we doesn't need node to use scalajs-react-components
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:55
i think so too
thanks! :)
Janos Haber
@b0c1
Oct 28 2015 22:56
it's just a little piece... you made the hardest part... so we thanks :)
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:57
but wait
mui.js still includes react, no?
Janos Haber
@b0c1
Oct 28 2015 22:58
I don't think so...
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 22:59
its still 500k, and still setting window.React
Janos Haber
@b0c1
Oct 28 2015 23:01
no it's not ;)
ummm... It's set because we set in the index.js
which is the base
wait
I'll solve ;)
you need the asset or just the pull?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:03
pull is fine
Janos Haber
@b0c1
Oct 28 2015 23:05
completed
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:08
very fast - great! :)
checking it out now
Janos Haber
@b0c1
Oct 28 2015 23:08
cool :)
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:08
lets see if i can get this going
Janos Haber
@b0c1
Oct 28 2015 23:08
you must modify the package.json (github address, name, etc...)
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:09
yeah
should npm build work?
Janos Haber
@b0c1
Oct 28 2015 23:10
I use npm run build to create assets ;)
Roberto Leibman
@rleibman
Oct 28 2015 23:10
I think I used npm run-script
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:10
ah right, thought i tried that
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:18
im not sure if im doing something wrong here
i still get Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). when i run the demo
Janos Haber
@b0c1
Oct 28 2015 23:21
ok I'm not see what is in your demo right now...
I'm not modified the demo source
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:21
it's not setting window.React anymore, but react is definitely still included in mui.js
Janos Haber
@b0c1
Oct 28 2015 23:22
I tried to find react specific codes but I not found in mui.js
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:22
i will try to clean and build it again
Janos Haber
@b0c1
Oct 28 2015 23:22
ok
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:22
grep for for example this "Child keys must be unique; when two children share a key, only the first child will be used."
Janos Haber
@b0c1
Oct 28 2015 23:22
can you show me what do you do?
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:22
definitely a react warning
Janos Haber
@b0c1
Oct 28 2015 23:23
hmm...
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:23
do you have that in mui.js ?
Janos Haber
@b0c1
Oct 28 2015 23:23
Yes
I try to find the problem... maybe...
Øyvind Raddum Berg
@oyvindberg
Oct 28 2015 23:25
im not sure how possible this is
at the very least all the names from react will have to be not minified in mui.js
perhaps an unminified version is possible
just include everything
Janos Haber
@b0c1
Oct 28 2015 23:49
ok I found the problem...
It's import a lot's of module which import parts of react
like react-addons-pure-render-mixin
or react addons update
which import file-by-file almost the whole react