These are chat archives for systemjs/systemjs

23rd
Nov 2015
C凉凉D
@cdll
Nov 23 2015 12:10
halo~
anyone could give me a hand ?
now i have a script that relies on two js modules
how could i do the import flow
could use System.import(A).import(B).then(function(A, B){...})
Peter Uithoven
@peteruithoven
Nov 23 2015 12:51
@cdll Are you sure you need the async System.import()? Can't you use the regular ES6, sync import statement?
C凉凉D
@cdll
Nov 23 2015 12:53
im so sorry that i did not understand what u said~
gcnm-pgeil
@gcnm-pgeil
Nov 23 2015 12:53
hi guys
C凉凉D
@cdll
Nov 23 2015 12:54
i used it in the browser end
gcnm-pgeil
@gcnm-pgeil
Nov 23 2015 12:55
I am using systemjs-builder to create a static bundle. But I haven't found a way to specify external module urls that should not be included ... and instead be loaded only at runtime. Is this possible at all with systemjs-builder?
I already tried specifying the module via "mymod": "http://host.tld/mymod.js" in map or paths configuration -- without luck.
Builder complains that it is an invalid file url ... and when I add a meta setting and set build: false it compiles but it seems that the module depedncy is removed at all
Peter Uithoven
@peteruithoven
Nov 23 2015 13:12
The first time you import something (usually a <script> tag in your main html page), you'll use System.import. But from then on, in the file you import, you can use the regular ES6 import syntax.
@gcnm-pgeil Maybe you can use [...]? jspm/jspm-cli#1109
gcnm-pgeil
@gcnm-pgeil
Nov 23 2015 13:17
@peteruithoven You mean extracting dependencies into separate bundle files by using bundle arithmetics?
Peter Uithoven
@peteruithoven
Nov 23 2015 13:19
@gcnm-pgeil If I understand the command correctly [...] let's you exclude parts.
gcnm-pgeil
@gcnm-pgeil
Nov 23 2015 13:19
This is a great feature, however, in my use-case this doesn't help. I need a way to have some libraries fetched from CDN at runtime (and thus not bein downloaded and bundled by JSPM) whereas my actual application code should be built into a static bundle.
Yes, excluding parts works ... but this only works for dependencies that were fetched and locally stored by JSPM before
Guy Bedford
@guybedford
Nov 23 2015 13:24
@gcnm-pgeil build: false is the right approach
Babel removes unused exports unfortunately
but if it is an exportless import it shouldnt be removed - import 'x'
import {a} from 'b' is removed by Babel if a is not actually used
gcnm-pgeil
@gcnm-pgeil
Nov 23 2015 13:43
@guybedford The import is used. I am clueless what might be wrong with my setup. I compiled a very minimalistic gist here: https://gist.github.com/anonymous/b0efd6a7fa9104862f7d#file-app-build-js-L458 -- I highlighted the related lines in the final bundle file. Could you eventually have a quick look at it?
Guy Bedford
@guybedford
Nov 23 2015 14:06
@gcnm-pgeil ah because it is sfx you might need to use both approaches
bundle a - b which the build: false metadata
created systemjs/builder#407
S. Chris Colbert
@sccolbert
Nov 23 2015 14:38
@guybedford just saw the JSON plugin fix. Thanks!
gcnm-pgeil
@gcnm-pgeil
Nov 23 2015 15:55
@guybedford Thanks for your help. I already tried this approach (exclusion through bundle arithmetic + build: false), then builder forced me to declare global SFX bundle dependency "jquery" via globalDeps option -- after which the build succeeds. But this approach assumes that I add a script tag with my custom CDN file in the HTML page by myself before "using" it in my sfx bundle . What I really want is systemjs/-builder do the loading of the external CDN file automatically for me once it is imported/used somewhere in my sfx bundle. Is this possible at all?
gcnm-pgeil
@gcnm-pgeil
Nov 23 2015 16:15
@guybedford Given the fact, you created an new issue, I assume this isn't possible right now.
Patrick Lienau
@rozzzly
Nov 23 2015 19:11
So right now im playing arround with System.config({map:{....}}) I have a few questions about where this can be called.
Say I have Package/bundle A, and Package B. A depends on B. B wants to use map to make local imports (B/src/myfile.js importing FooBar (which has been mapped to B/src/stuff/FooBar.js)
where can I make the system.config call. Can this happen anywhere in the B package before FooBar is imported? or does it have to be on the outside before the code that does the initial System.import um lets call that B/main.js
Patrick Lienau
@rozzzly
Nov 23 2015 19:17
Now when A imports B, do those mappings transfer? if not, how would I go about configuring it so code A can import B/FooBar? Is that automatic, does it need to be specified on System.register?
anyone who could point me in the right direction, id greatly appreciate it. thanks :)
Guy Bedford
@guybedford
Nov 23 2015 20:13
@gcnm-pgeil that would mean outputting the sfx bundle as an AMD module say itself
@rozzzly it sounds like you want contextual maps here?
Patrick Lienau
@rozzzly
Nov 23 2015 20:17
@guybedford thanks for the reply!
So If I wanted to have A import B/FooBar (which resolves to the full path) do I need to config that for A, for all the mappings on all the packages? or could I have package B define it's mappings that A picks up
Guy Bedford
@guybedford
Nov 23 2015 20:19
Relative maps are supported
so B can give a package map of "./Foobar": "..."
Patrick Lienau
@rozzzly
Nov 23 2015 20:23
But what do I have to do in the A package to get it to accept that? Is automatic? or do I have to create the System.config({packages...}) in the folder of my A package
Guy Bedford
@guybedford
Nov 23 2015 20:25
you'd need package B to be configured
Something like -
System.config({
  map: {
    'b': 'path/to/b'
  },
  packages: {
    b: {
      map: { 
        './Foobar': './something/in/b.js'
      }
    }
  }
});
Patrick Lienau
@rozzzly
Nov 23 2015 20:26
alright I see
so is there no way to define the ./Foobar mapping in package b? that way all A has to do is map: { b: 'path/to/b' }
Guy Bedford
@guybedford
Nov 23 2015 20:30
It is defined in package b above, and adding the above config is the effective process of "configuring b". For example it could have meta etc, that's why everything is under the package config in that way.
if you wanted to include the config with b itself, then that's the configuration injection problem
you can't load the config along with the code, because it's already too late
so one needs other mechanisms for loading config
is that the problem you're hitting?
Patrick Lienau
@rozzzly
Nov 23 2015 20:32
yeah thats what I'd like to do, just so I wouldn't have to redefine the same stuff everytime I use package B in a new project
Guy Bedford
@guybedford
Nov 23 2015 20:33
one thing you can do is add the config into a json file
Patrick Lienau
@rozzzly
Nov 23 2015 20:34
and I see the problem logically. its not a required functionality / its just more that im lazy and would rather not have the repeated code
Guy Bedford
@guybedford
Nov 23 2015 20:34
and then add that path to packageConfigPaths in SystemJS
Patrick Lienau
@rozzzly
Nov 23 2015 20:34
hmm that sounds interesting.
Guy Bedford
@guybedford
Nov 23 2015 20:34
say if it was in path/to/b/system.json
then you can use the configuration:
Patrick Lienau
@rozzzly
Nov 23 2015 20:34
so there is a preexisting setup? niiice
Guy Bedford
@guybedford
Nov 23 2015 20:35
System.config({
  packageConfigPaths: ['b/system.json'],
  map: {
    b: 'path/to/b'
  }
});
it will then load the config file before loading anything from package b
Patrick Lienau
@rozzzly
Nov 23 2015 20:35
EXACTLY what I wanted
you're the best thanks @guybedford
Guy Bedford
@guybedford
Nov 23 2015 20:35
yeah it's not a currently documented feature
but is a critical idea for configuration reuse
Patrick Lienau
@rozzzly
Nov 23 2015 20:35
is it in the ECMA spec?
Guy Bedford
@guybedford
Nov 23 2015 20:36
oh no this is all the SystemJS API
spec is very low-level
Patrick Lienau
@rozzzly
Nov 23 2015 20:36
oh really now, I had heard that the spec promoted a new System global like console
so I just assumed that included import and register, etc
Guy Bedford
@guybedford
Nov 23 2015 20:37
yes it includes import
but register and other features are all SystemJS
Patrick Lienau
@rozzzly
Nov 23 2015 20:38
but doesnt get into all the specifics, I see. probably circular deps, etc are defined like the core logic
Guy Bedford
@guybedford
Nov 23 2015 20:38
it's the extensible web pricinple
Patrick Lienau
@rozzzly
Nov 23 2015 20:38
well hey man thanks again
Guy Bedford
@guybedford
Nov 23 2015 20:38
so it's the right primitives to support the features
sure no problem, are you using this internally or for open source?
Patrick Lienau
@rozzzly
Nov 23 2015 20:39
It's too unfinished for opensauce just yet, but thats the plan
Guy Bedford
@guybedford
Nov 23 2015 20:48
sure, if you end up making it a convention though, it would be good to put a little more thought to it. I'm still not 100% sure if it makes sense to have a system.json or just use the package.json instead.
If you have a systemjs property in the json file, it will read from that, allowing it to be a package.json systemjs property
so I'd be interested to hear your thoughts on the convention there as well @rozzzly
Patrick Lienau
@rozzzly
Nov 23 2015 20:50
well you answered my question that you raised. and definition in the package.json is awesome. I feel that's the right place for it. right along with the deps, etc
I'll have to play arround with it a bit before I can give you my true opinion, but for once there was actually the solution I was looking for already outhere lol
goingforward, perhaps importing a npm module, if systemjs reads the package.json and sees a systemjs prop it could auto-include that into its own mapping? Although this could potentially be a terrible Idea as well haha
Guy Bedford
@guybedford
Nov 23 2015 21:00
you can make systemjs load the npm package.json with the following config -
System.config({
  packageConfigPaths: ['node_modules/*/package.json']
});
Which could potentially then support the systemjs property in the package.json as well
providing a simple package management workflow
Patrick Lienau
@rozzzly
Nov 23 2015 21:01
staph it you're spoiling me
yeah that sounds very natural & unobtrusive
Guy Bedford
@guybedford
Nov 23 2015 21:02
haha yeah it's a convention though, so I'm still weary until 100% sure, but looks like it might be the way things go
Steven Silvester
@blink1073
Nov 23 2015 21:17
:+1: for the systemjs property in package.json
Patrick Lienau
@rozzzly
Nov 23 2015 21:18
only downside I could see is if I can export my remapped config in my super popular repo with a lot of forks, tutorials, articles, etc some of them with have have import/require('A/things/coloredThings/Blue') and another who uses the syntax might have A/Blueassuming the package does not have a hardDependency on systemjs so there might be a little confusion
but thats nothing compared to all the breaking changes the js world has had to experience in the past year and a half or so with es6
Tyler Cvetan
@SomethingSexy
Nov 23 2015 23:53
I might have a really weird case (that maybe isn't possible) that I hope someone can potentially help me with. I got pretty far from this ticket but now I am trying something else and it either doesn't work, or I can't figure it out
Basically I am importing a project via jspm from another project. That is all dandy and I can run those files fine. However, I need to override a module (existing behavior we used in the RequireJS world). The project I am trying to import has a bunch of internal named references to files. jspm replaces that with relative pathing because I set a map in the jspm package.json to its own src.
But now I am trying to figure out how to use the packages config to override one of those files.