These are chat archives for systemjs/systemjs

16th
Mar 2016
Cole Diffin
@arcticShadow
Mar 16 2016 08:12
@Bajix After thinking on, and working on my problem all day, I’m understanding my issue more. I think the main problem i was having, is that I didnt understand my problem.
Although - At the end of the day, I still want to know why react works in JSPM, but not in System JS...
LinBoLen
@LinBoLen
Mar 16 2016 08:14
😂
tezzutezzu
@tezzutezzu
Mar 16 2016 13:06
hi there, I'm giving system.js a try (with jspm) and I'm running into performance issues related to http requests at page reload
at the moment just importing redux and jquery in a project with 2 classes is resulting in a load time of ~3s (I'm using Babel)
tezzutezzu
@tezzutezzu
Mar 16 2016 13:15
I've tried depcache without much improvement
John Sterling
@johnste
Mar 16 2016 13:15
tezzutezzu: Yeah, that's expected, since systemjs requests hundreds of files on page load
You also want to set up hot module reloading to decrease the annoying load times
Vojtech Polivka
@vojtapol
Mar 16 2016 14:12
@tezzutezzu yes, thats because SystemJS is meant for the future when http2 makes loading multiple small files just as fast as few big files.. Until then you have to use SystemJS builder or JSPM non of which is easy to work with and it is absolute PITA to make work with typescript to the point where I just gave up
Vojtech Polivka
@vojtapol
Mar 16 2016 15:44
@Bajix You are saying that the rest is about having a dependency tree, but what if I need to ensure that some global library (aka angular) is loaded before the System.import runs and I don't want to use <script> tags for that?
Nathan Williams
@nlwillia
Mar 16 2016 16:59
Is there an API or technique to be able to distinguish when SystemJS is running in development mode as opposed to a production bundle?
Guy Bedford
@guybedford
Mar 16 2016 17:35
@nlwillia you can set production: true in the config file. See eg how this is used for production bundles in http://jspm.io/0.17-beta-guide/bundling.html
Nathan Williams
@nlwillia
Mar 16 2016 17:43
I read that, but wasn't clear on how you would use it. It implies that you would have two different versions of jspm.browser.js and swap them in depending on what kind of output you were targeting? I work mainly in development mode, but for deployment I use the build command. There's only one instance of the project, and I want to support both use cases without too much manual reconfiguration (preferably none). What I'm looking for is something I can check for in my code to detect which environment is in effect. In past projects, I've used preprocessor directives and a build script variable (based on gulp:watch vs. gulp:build) to entirely remove dev-only sections, but for right now, just being able to pivot in development mode (ex: to console log more verbosely) would be useful.
Thomas Sieverding
@Bajix
Mar 16 2016 18:11
@vojtapol Load global libraries with System. Load everything with System.
Vojtech Polivka
@vojtapol
Mar 16 2016 18:14
@Bajix but I need them to be loaded before I load anything else and the System.import calls are async
Thomas Sieverding
@Bajix
Mar 16 2016 18:14
Why do you need them loaded before anything else?
Vojtech Polivka
@vojtapol
Mar 16 2016 18:14
because the other things depend on them
Thomas Sieverding
@Bajix
Mar 16 2016 18:15
So then those other things should have angular as a dependency
Vojtech Polivka
@vojtapol
Mar 16 2016 18:15
yeah but you cant just "import .." things that are not modules themselves
Thomas Sieverding
@Bajix
Mar 16 2016 18:15
Sure you can
What things are you worried about loading?
Vojtech Polivka
@vojtapol
Mar 16 2016 18:16
ng-grid
when I have it as a <script> it works fine
but importing it does not
That?
Vojtech Polivka
@vojtapol
Mar 16 2016 18:18
yeah.. just an old version of that.. they renamed it
Thomas Sieverding
@Bajix
Mar 16 2016 18:18
hah just realized I know the author of that
Vojtech Polivka
@vojtapol
Mar 16 2016 18:19
anyways.. what syntax would you use to import it? my source file is in typescript
should I use import ... or import xyz from 'xyz' or import * as xyz from 'xyz'?
Thomas Sieverding
@Bajix
Mar 16 2016 18:19
So all you’d really need to do to make that load is to configure it in JSPM
And make it a dependency
Vojtech Polivka
@vojtapol
Mar 16 2016 18:19
oh.. jspm.. you are funny
Thomas Sieverding
@Bajix
Mar 16 2016 18:19
?
Vojtech Polivka
@vojtapol
Mar 16 2016 18:19
have you tried making jspm work with typescript?
Thomas Sieverding
@Bajix
Mar 16 2016 18:19
What do you have against JSPM?
No, but I don’t see how the two are related
Vojtech Polivka
@vojtapol
Mar 16 2016 18:20
it does not work with typescript well at all
Thomas Sieverding
@Bajix
Mar 16 2016 18:20
Sounds like a SystemJS dilemma, not a JSPM one
They even have an angular2 example ;o
Vojtech Polivka
@vojtapol
Mar 16 2016 18:22
the problem is that typescript does not see the depednencies in the jspm_packages folder thus you lose all the editor support
Thomas Sieverding
@Bajix
Mar 16 2016 18:22
Use JSPM -o to setup an override that configures the typescript plugin
Have you used that plugin?
Vojtech Polivka
@vojtapol
Mar 16 2016 18:24
yes I spent last week trying to make it work.. everyone seems so happy and proud of their latest plugin/library but ignores the fact that it simply does not work together, the documentation is outdated and the whole thing is an abomination.. just read through this Microsoft/TypeScript#2233
Thomas Sieverding
@Bajix
Mar 16 2016 18:24
It should be recursive in nature: plugins translate first, then trace the translated output, meaning the entire dependency tree will be maintained
That’s just a suggestion? Did you actually have issues with the typescript plugin
Vojtech Polivka
@vojtapol
Mar 16 2016 18:26
@Bajix Yes, the main issue was, that it did not work.
Thomas Sieverding
@Bajix
Mar 16 2016 18:26
In what ways didn’t it work
Vojtech Polivka
@vojtapol
Mar 16 2016 18:27
It did not understand typings so it could not compile
Thomas Sieverding
@Bajix
Mar 16 2016 18:27
Do you have your system.config.js from when you attempted this?
Also, how were you loading this if it were in fact TS and you weren’t tranpsiling?
Nathan Williams
@nlwillia
Mar 16 2016 20:37
To answer my own question from above, just checking for SystemJS is enough to distinguish between the development and fully built versions.
Thomas Sieverding
@Bajix
Mar 16 2016 20:40
@nlwillia You can accomplish this w/ config as well, completely independent of SystemJS. I use Broccoli + SystemJS, and built this for writing out my browser config
Simply knowing the ENV isn’t enough generally, and it’s poor design to bake config into your code
Nathan Williams
@nlwillia
Mar 16 2016 21:45
This is mainly for development logging or service mocks. Those are things I'd rather strip out completely for production, but just disabling them is adequate for now. I haven't found a way to preserve comments in the JSPM build output which precludes the preprocess approach I've used elsewhere unless I find some way to use that in a builder. I know there are different ways to do it, but after going to such lengths to configure dependencies in JSPM, I'm reluctant to go back to build script glob wrangling/watching.
Thomas Sieverding
@Bajix
Mar 16 2016 21:46
Well, if that’s the case, you can accomplish that via builder config very easily
map: { ‘logger’: ‘@empty’ }
or use deps to inject it only conditionally
Martin O'Grady
@grady-lad
Mar 16 2016 22:10
Has anyone got jsdom working with systemjs, I keep getting 'babel is not defined'
Thomas Sieverding
@Bajix
Mar 16 2016 22:19
Paste your system.config.js
Thomas Sieverding
@Bajix
Mar 16 2016 22:23
JSDom isn’t in there?
Martin O'Grady
@grady-lad
Mar 16 2016 22:36
apologies uploaded the wrong version. https://gist.github.com/grady-lad/35742cdb6029d0b43354