These are chat archives for systemjs/systemjs

19th
May 2015
Jon Stevens
@lookfirst
May 19 2015 05:12
ugh… all the sudden i’m getting System.import is not a function in a bundled build. I did a jspm install && jspm dl-loader
bundled with systemjs bundler
For System, all I see now is System.get, System.global, System.newModule, System.register, System.get
Jon Stevens
@lookfirst
May 19 2015 05:29
Ok, it looks like the contents of builder/templates/sfx-core.js are included at the top of my bundle and System is defined in there and it doesn’t include import. Going through git history for that file doesn’t turn up that it was there at all. I’m so confused as to why bundleSFX() just suddenly has stopped working.
@guybedford ?
@guybedford I just tried removing my jspm_packages, node_modules and re-installing everything. Something is totally broken with bundleSFX().
Jon Stevens
@lookfirst
May 19 2015 05:47
Am I the only one seeing this? =( Trying to switch to just bundling and I’m getting all sorts of weird errors now.
Ok, switched to build() instead of buildSFX() and concat’ed the es6-module-loader.js and system.js to the top of my bundle file and now things work.
Jon Stevens
@lookfirst
May 19 2015 06:16
Oh wait, wtf, bundling is totally borked.
Guy Bedford
@guybedford
May 19 2015 06:59
@lookfirst sfx bundles don't provide System.import
Jesper Birkestrøm
@birkestroem
May 19 2015 09:09
Is there a correct way to expose modules as globals?
I would like to expose jQuery on window.
Jon Stevens
@lookfirst
May 19 2015 09:10
@guybedford why not?
Jesper Birkestrøm
@birkestroem
May 19 2015 09:14
It might help if I explain why I want to do such a silly thing.
Jesper Birkestrøm
@birkestroem
May 19 2015 09:26
I'm trying to port a project using knockout. Knockout has jquery as optional dependency (https://github.com/knockout/knockout/blob/master/build/knockout-raw.js#L3). To make knockout nicely in our setup, jQuery is needed on window.
Sharon (Sean) Rolel
@Mosho1
May 19 2015 09:30
@birkestroem System.meta['jquery'] = { format: 'global'};
I think
Jesper Birkestrøm
@birkestroem
May 19 2015 09:31
"npm:jquery@2.1.1": { "format": "global" }
Should be the same, right?
require is not defined when using format global.
Jesper Birkestrøm
@birkestroem
May 19 2015 09:42

Maybe adding an expose config to meta like:

"meta": {
    "npm:jquery@2.1.1": { 
      "expose": "jQuery"
    }
  }

Which would produce in main:
module.exports = window["jQuery"] = require("npm:jquery@2.1.1/dist/jquery");

Guy Bedford
@guybedford
May 19 2015 11:08
@birkestroem the new release of SystemJS coming out allows a syntax very similar to this
System.meta['some/file'] = { globals: { jQuery: 'npm:jquery@2.1.1' } };
it's defined for the importer not the dependency though
Jesper Birkestrøm
@birkestroem
May 19 2015 13:48
Thanks!
Mike Haas
@mikehaas763
May 19 2015 15:43
Can someone either explain to me here, point me to an article, or write an article :smile: that explains kind of high level and simplistically how lazy loading will work for ES6 modules and the browser's loader implementation? Asking because I know (or at least it appears) by default all the imports are parsed and loaded before any module is executed. So it makes it a synchronous process in a way.
Guy Bedford
@guybedford
May 19 2015 21:17
@mikehaas763 it helps to think of the browser loader like a registry
as you load modules you populate the local registry of modules loaded in the page
at any point you can load extra modules, while taking advantage of existing modules as dependencies
individual module trees do effectively execute sync (so far as the dependencies aren't already defined)
but the point is that we get the ability to load anything new at any time, in a way that shares the loader based on a spec
let me know if that's a hit or miss on your question though :)
Mike Haas
@mikehaas763
May 19 2015 21:19
I get that it's basically a registry, but I think I see now. So essentially every part that I would want to lazy load would be its own app tree root?
@guybedford That was very helpful, I think I've got it. Each lazy loaded part of a given application would then have to get loaded in an imperative way by calling System.import for example with es6-module-loader?
Guy Bedford
@guybedford
May 19 2015 21:23
yes exactly, System.import is your lazy lading
there are also plans in the spec to have a reflective import functiona vailable in every module
basically there will be a scoped System.import for each individual module to do its own lazy loading too
so you have these two import types - static and dynamic
Mike Haas
@mikehaas763
May 19 2015 21:26
Very cool. I needed to know how it would work technically speaking. That functionality should eventually end up as part of the language IMO. Not saying this would actually work for all cases but something like import async Foo from 'Foo';
@guybedford Are the detailed plans you mentioned detailed in the current module loader spec? I'd like to read up on it
Guy Bedford
@guybedford
May 19 2015 21:28
@mikehaas763 the most recent discussion on this was at https://github.com/whatwg/loader/issues/36#issuecomment-89055062
Mike Haas
@mikehaas763
May 19 2015 21:29
Awesome, thanks