These are chat archives for systemjs/systemjs

15th
Apr 2015
carlosagsmendes
@carlosagsmendes
Apr 15 2015 00:18
Flawless!
Johnny Hauser
@m59peacemaker
Apr 15 2015 04:45
Hi! I'm using Babel and React in my project. I had been using the jsx plugin, but it caused me trouble messing around with yield. I found out Babel support jsx out of the box, so I ditched the plugin... it's now giving me a lot of hassle about the .jsx filenames.
Is there someway I can import .jsx files and have them processed?
Guy Bedford
@guybedford
Apr 15 2015 11:34
@m59peacemaker you can add a custom paths rule to enable jsx files -
System.paths['*.jsx'] = '*.jsx'
I believe that should work
Johnny Hauser
@m59peacemaker
Apr 15 2015 12:36
@guybedford That does allow them to load, but unfortunately, they aren't processed at jsx. I get Unexpected token <. If I change the file format to .js, the jsx code is transpiled properly.
Johnny Hauser
@m59peacemaker
Apr 15 2015 12:51
*as
Guy Bedford
@guybedford
Apr 15 2015 13:24
@m59peacemaker you need to ensure they are being interpreted as es6 format, either by having module syntax in their code, or via meta config
Johnny Hauser
@m59peacemaker
Apr 15 2015 13:30
Tried both :/
Same error.
Guy Bedford
@guybedford
Apr 15 2015 13:50
by default Babel jsx support is disabled in jspm
you need to add babelOptions.blacklist = [] to work around that
Peter O'Shaughnessy
@poshaughnessy
Apr 15 2015 15:26
Hi all. I'm attempting to make a nice ES6 & SystemJS template project based around Gulp. I've got Gulp doing the SystemJS/Babel build OK, using builder.buildSFX. I'm pointing directly to the built bundle.js in my index.html. All fine, except just with a couple of JS files and React as a dependency, the build's already taking 1.4 secs - a bit too long for a dev watch task. Previously with Browserify, I was using Watchify which massively speeds up the build time by only rebuilding what it needs to. Any tips on whether I could do something similar with SystemJS? Or am I taking the wrong approach? (Thanks in advance!)
Johnny Hauser
@m59peacemaker
Apr 15 2015 16:01
@guybedford Aha! Finally working. I had actually read about and tried all of those things but apparently not at the same time!
I had to remove "": "" from the paths, otherwise it was forcing me to add ".js" to all my js files... Is this going to hurt me in the future?
"paths": { "github:*": "packages/github/*.js", "npm:*": "packages/npm/*.js", "*.jsx": "*.jsx" }
by the way, if I'm not mistaken, you're the gentleman from the awesome video that got me using SystemJS - very cool. Nice to meet you.
Peter O'Shaughnessy
@poshaughnessy
Apr 15 2015 16:44
@poshaughnessy I guess I'll try using it the regular way (include system.js and config.js and call System.import) for development, and just switch the HTML to reference the built (via gulp) version for production...
@poshaughnessy Ah that didn't help - it's still taking a second or two - just now when I refresh the page.
Johnny Hauser
@m59peacemaker
Apr 15 2015 17:04
@poshaughnessy sorry, I didn't understand what you're trying to do. I'm such a systemjs noob anyway. I don't see why you'd need gulp involved. systemjs is so smooth.
After all, the philosophy is to abolish the build process, right?
Peter O'Shaughnessy
@poshaughnessy
Apr 15 2015 17:05
I like using Gulp as a build tool for doing things like compiling Sass, building the version for production etc.
Is it?
But you still need a build process for production...
I like having things set up with Gulp because it means that the build process is extensible and controllable by me. Do you use anything like Sass or Less? I think that's a good use case for having something like Gulp.
Peter O'Shaughnessy
@poshaughnessy
Apr 15 2015 17:17
@m59peacemaker Thanks for responding BTW! Here's my repo in case you're interested: https://github.com/poshaughnessy/es6-react-jspm-starter-template It feels like quite a nice setup to me - except for the build times. I've got it down to about 1 second now though, after blatting jspm_modules, config.js and package.json and reinstalling everything again.
Johnny Hauser
@m59peacemaker
Apr 15 2015 17:38
Yeah, for style. However, I want to ditch CSS entirely. A lot of people think it's an awful idea =D
I believe we should only use JS for everything.
I have a side project where I'm using React and seriously doing this: function(elem) { if (elem.parentNode.offsetWidth > 768) { return { color: 'red'; }; } } Truly modular style, unlike fail media queries.
Johnny Hauser
@m59peacemaker
Apr 15 2015 17:49
The arguments I get against it are not against the idea itself, but the circumstances. CSS is "meant" for style, so it operates better, performance and such. I don't see why JS can't be given the same ability. They'll keep adding things to CSS we've been able to do in JSS all along. I think JS styling approaches and implementation should be improved instead.
Nelo Mitranim
@Mitranim
Apr 15 2015 17:50
This is funny but you're two weeks late :)
Johnny Hauser
@m59peacemaker
Apr 15 2015 18:01
@Mitranim What's up?
Nelo Mitranim
@Mitranim
Apr 15 2015 18:02
I mean this could have been a nice April Fools joke :D
Johnny Hauser
@m59peacemaker
Apr 15 2015 18:02
:/ lol
Peter O'Shaughnessy
@poshaughnessy
Apr 15 2015 18:50
@m59peacemaker @Mitranim I've been getting into React so using JS for CSS doesn't sound that crazy to me - see: https://speakerdeck.com/vjeux/react-css-in-js But I'm developing small projects mainly on my own, so I don't have any of the css-development-at-scale problems they have - so I'm sticking with (S)CSS myself.