These are chat archives for systemjs/systemjs

18th
May 2015
Jon Stevens
@lookfirst
May 18 2015 02:57
@guybedford config.js: paths:… "googleapis:*": '//apis.google.com*’, and I’m trying to System.import('googleapis:/js/platform.js’) and I’m getting this error:
XMLHttpRequest cannot load https://apis.google.com/js/platform.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
2015-05-17 19:55:14.681 es6-module-loader.src.js:140 Potentially unhandled rejection [3] Error loading "googleapis:/js/platform.js" at http://apis.google.com/js/platform.js
: http://apis.google.com/js/platform.js (WARNING: non-Error used)(anonymous function) @ es6-module-loader.src.js:140f @ es6-module-loader.src.js:167i @ es6-module-loader.src.js:189
Micah Zoltu
@MicahZoltu
May 18 2015 02:57
@lookfirst You may want to edit that with ``` syntax for code blocks.
Jon Stevens
@lookfirst
May 18 2015 03:00
Heh, in the docs: "Be careful:When developing, System loader uses xhr method to load script from CDN site, so there might be some Cross-Origin problems."
gah. what a pain. I’ll go back to just putting a script tag into the dom.
Micah Zoltu
@MicahZoltu
May 18 2015 03:02
It seems like any CDN worth its salt would allow cross-origin.
Kind of defeats the purpose of a CDN not to.
Jon Stevens
@lookfirst
May 18 2015 03:02
This isn’t a CDN, this is google. ;-)
Micah Zoltu
@MicahZoltu
May 18 2015 03:03
Can you get the script from a real CDN?
Jon Stevens
@lookfirst
May 18 2015 03:05
Thanks @Zoltu … at this point, I don’t care enough. I’ve got a simple angular service that I use to dump <script> tags into the dom and that works well enough.
Micah Zoltu
@MicahZoltu
May 18 2015 03:05
Okay.
Jon Stevens
@lookfirst
May 18 2015 03:10
import angular from 'angular';

let loadJSModule = angular.module(‘LoadJSModule', []);

loadJSModule.service('loadJS', () => {
    /*
     * Async load the file and call the callback when done
     */
    return function loadJS(file, callback) {
        let ready = false;

        let script = document.createElement('script');
        script.type = 'application/javascript';
        script.src = file;
        script.async = true;
        script.defer = true;
        script.onload = script.onreadystatechange = function() {
            if (!ready && (!this.readyState || this.readyState == 'complete')) {
                ready = true;
                callback();
            }
        };

        document.head.appendChild(script);
    }
});

export default loadJSModule;
Guy Bedford
@guybedford
May 18 2015 08:58
@lookfirst the next version of SystemJS uses <script> tag injection by default when the module format is AMD, register or unshimmed global, allowing for CSP in these scenarios.
Nelo Mitranim
@Mitranim
May 18 2015 09:04
@guybedford curious why <script> and not new Function(...)()?
Guy Bedford
@guybedford
May 18 2015 10:16
@Mitranim specifically here I was referring to <script src=... for a CSP load
but we use <script> for evaluation in SystemJS because it matches the global behaviour which isn't matched by Function
that is x = 5 assigns to global
Nelo Mitranim
@Mitranim
May 18 2015 10:25
@guybedford Huh good to know, thanks. Btw I just tried new Function('x = 5')() and it assigned to global
Guy Bedford
@guybedford
May 18 2015 10:48
@Mitranim sorry I mean var x = 5 assigning to global
Nelo Mitranim
@Mitranim
May 18 2015 10:48
ah you mean script runs in global scope and Function doesn't
yeah
var x creates a variable in the global scope, you could do var x = 5 and window.x = 6 and they'd be separate values
Huh wait a minute I'm wrong
var x = ... in the global scope actually assigns to the global object
Facedesk moment
Guy Bedford
@guybedford
May 18 2015 10:55
yeah you'd be surprised how many globals use this approach still
Nelo Mitranim
@Mitranim
May 18 2015 10:56
I'd have a heart attack
We have so many module systems and people keep doing that
Guy Bedford
@guybedford
May 18 2015 10:57
the one that always shocks is that each DOM id is a global
Nelo Mitranim
@Mitranim
May 18 2015 10:57
actually scratch that, the stupid part is var
why do var myglobal = ... and not explicit window.myglobal = ...
^ Yeah the id thing makes globals even more ridiculous
you never know what gets overwritten
Dominic Chambers
@dchambers
May 18 2015 15:19
@guybedford, do you know why this line of code is needed:
since it makes it impossible for me to override System.registerwith a proxy function?
Removing it made everything work for me.
Guy Bedford
@guybedford
May 18 2015 15:28
sure, it should have been removed on master
Dominic Chambers
@dchambers
May 18 2015 15:32
Lovely, thanks @guybedford!
Sharon (Sean) Rolel
@Mosho1
May 18 2015 21:10
I'm trying to use babelOptions: {stage: 0} but I'm getting a parsing error from esprima
not sure where esprima plays into it
Nelo Mitranim
@Mitranim
May 18 2015 21:33
@Mosho1 maybe from other plugins in your pipeline?
Sharon (Sean) Rolel
@Mosho1
May 18 2015 21:43
@Mitranim like jsx?
This message was deleted
Nelo Mitranim
@Mitranim
May 18 2015 21:43
@Mosho1 Yeah react-tools use esprima for parsing
Sharon (Sean) Rolel
@Mosho1
May 18 2015 21:43
I see
I can just get rid of all of it though, right? babel does jsx...
Nelo Mitranim
@Mitranim
May 18 2015 21:44
beats me =/
Sharon (Sean) Rolel
@Mosho1
May 18 2015 21:48
nice, works
thanks!
do I get any benefit from letting systemjs use babel internally vs. doing it on my own?
Nelo Mitranim
@Mitranim
May 18 2015 21:50
It magically invokes the transpiler inside the browser if you let it import non-transpiled files
It's slow and there's no benefit if you can pretranspile
Cool for demos though
Sharon (Sean) Rolel
@Mosho1
May 18 2015 21:56
cool, thanks
also, is there a way to speed up building or the development load time?
it takes 10 seconds to build and using depcache didn't really do much for development
Nelo Mitranim
@Mitranim
May 18 2015 21:58
hmm what is it that takes 10 sec?
Sharon (Sean) Rolel
@Mosho1
May 18 2015 21:58
jspm bundle
Nelo Mitranim
@Mitranim
May 18 2015 22:00
minification is always slow
it's only feasible for prod builds
Sharon (Sean) Rolel
@Mosho1
May 18 2015 22:02
it's not even with minification
that is another 10s
Nelo Mitranim
@Mitranim
May 18 2015 22:03
that must be a lot of dependencies
anyway just do it when starting your build
Sharon (Sean) Rolel
@Mosho1
May 18 2015 22:04
yeah, 482 requests for the page...
and it's a pretty small app :\
Nelo Mitranim
@Mitranim
May 18 2015 22:05
that's an insane number of requests for one app
I'm working on an app that makes 400+ in dev mode and it's anything but small
Sharon (Sean) Rolel
@Mosho1
May 18 2015 22:06
just react is 230 separate scripts
it's just very modular
Nelo Mitranim
@Mitranim
May 18 2015 22:06
ah yeah dependencies
so yeah you'll have to bundle those
you can speed this up by importing prebuilt versions
Guy Bedford
@guybedford
May 18 2015 22:06
yeah it's about time we had an incremental build cache
I've created jspm/jspm-cli#772
Nelo Mitranim
@Mitranim
May 18 2015 22:06
if react has a single-file build, use that
should be much faster to bundle
Guy Bedford
@guybedford
May 18 2015 22:07
we're just releasing some big SystemJS changes, but build speeds are a priority
Sharon (Sean) Rolel
@Mosho1
May 18 2015 22:07
good to hear