These are chat archives for systemjs/systemjs

20th
Mar 2015
Thomas Fritz
@thomasfr
Mar 20 2015 13:53
Hi
I played a bit with the bew package modules sybtax with systemjs
i was asking if it possible to also load npm modules from node_modules via import syntax?
Is there a way to just add 'node_modules' as an additional lookup path or is it not possible becaue they are incompatible?
carlosagsmendes
@carlosagsmendes
Mar 20 2015 15:11
Can someone help with Shim configuration? Where should I put my shim configuration? I'm using the config.js but apparently it is not working
"shim": { "jquery": { "exports": "$" }, "knockout": { "deps": ["jquery"], "exports": "ko" }, "ko-custom-loaders/ko-component-loader": { "deps": ["jquery", "knockout"] } }
Matthew Phillips
@matthewp
Mar 20 2015 15:12
@carlosagsmendes it's not "shim" it's "meta"
carlosagsmendes
@carlosagsmendes
Mar 20 2015 15:14
Thanks. It is still not working. I'm exporting knockout but it is not global
can someone help?
carlosagsmendes
@carlosagsmendes
Mar 20 2015 15:22
I tried the following System.meta['knockout'] = { deps: ['jquery'], exports: 'ko' };but it is still not exporting knockout
And jquery is not being loaded also
Jon Stevens
@lookfirst
Mar 20 2015 16:28
I’d use jspm to install the dependencies into meta.
Sharon (Sean) Rolel
@Mosho1
Mar 20 2015 20:05
Hello, I currently have an app with a total of 150 scripts in development env, using <script> tags. I want to start using modules and am wondering if this is the right tool
Jon Stevens
@lookfirst
Mar 20 2015 20:06
it is!
Sharon (Sean) Rolel
@Mosho1
Mar 20 2015 20:06
if so, how would the conversion from scripts to modules go
good :)
the app is built with angularjs and I'm having a hard time thinking up the right architectural approach.
Cody Lundquist
@meenie
Mar 20 2015 21:48
When importing jQuery into your project, jquery is adding itself to the global scope. Is there a way to tell jQuery not to do that and just use module.exports instead?
I thought it was something like:
System.config({
  "meta": {
    “jquery": {
      "format": “cjs"
    }
  }
});
Guy Bedford
@guybedford
Mar 20 2015 21:54
@meenie perhaps try "format": "amd"
With meta, the thing that's always hard is getting the right name. Run it through System.normalize first to be sure of the name of something if you need.
Cody Lundquist
@meenie
Mar 20 2015 22:01
okay, thanks
carlosagsmendes
@carlosagsmendes
Mar 20 2015 22:02
@guybedford what's wrong with this exports
System.config({
"meta": {
"knockout": {
"deps": ["jquery"],
"exports": "ko"
}
}
});
I can't make it work. knockout is never exported
Cody Lundquist
@meenie
Mar 20 2015 22:06
@guybedford: After making that change jQuery is still adding itself to the global scope.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 22:43
Can someone point me to the meta documentation? Exports is not working and I have been trying to get this to work for hours without success System.config({ "meta": { "knockout": { "deps": ["jquery"], "exports": "ko" } } });
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:05
This is how I have it working with RequireJS 'knockout': { deps: ['jquery'], exports: 'ko' }, 'knockout-validation': { deps: ['knockout'], exports: 'ko' },
Jon Stevens
@lookfirst
Mar 20 2015 23:11
ko doesn’t have a direct dependency on jquery as far as i can tell
"KO itself doesn’t depend on jQuery” — http://knockoutjs.com/documentation/introduction.html
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:12
thank you @lookfirst . but even if I remove it it fails
Jon Stevens
@lookfirst
Mar 20 2015 23:12
what fails?
if you want to load jquery, then do that as another dependency
basically, your meta{} should only be managed by jspm
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:13
when I load knockout-validation it has a dependency on knockout
right
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:14
When I used RequireJS I used to do a Shim
'knockout-validation': { deps: ['knockout'] }works fine with requireJS
Now, using systemjs I'm trying to achieve the same
By doing the following 'knockout-validation': { deps: ['knockout']}
Jon Stevens
@lookfirst
Mar 20 2015 23:15

so if you do this:

jspm install github:knockout/knockout
jspm install github:Knockout-Contrib/Knockout-Validation

then everything will get setup for you in your meta{} config correctly

carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:15
But it still doesn't work
I'm using the bower packages
is there any difference?
Where can I find the meta config?
Jon Stevens
@lookfirst
Mar 20 2015 23:17

a) forget bower. you want jspm if you’re using systemjs. trust me, your life will be much easier if you switch.
b) the map (sorry, map, not meta!) config is part of your systemjs config. It looks like this:

System.config({
  "map": {
    "Knockout-Contrib/Knockout-Validation": "github:Knockout-Contrib/Knockout-Validation@2.0.2",
    "knockout": "github:knockout/knockout@3.3.0”,
  }
});

There will be a bunch more in there, I just didn’t include it all.

carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:17
I'm using jspm install bower:knockout-validation
Jon Stevens
@lookfirst
Mar 20 2015 23:17
don’t do that.
use the github: endpoint. always
i’m writing a whole ebook about this.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:18
:)
I'm trying it right now
Jon Stevens
@lookfirst
Mar 20 2015 23:18
the github endpoint will pay attention to the bower.json file.
by using the github endpoint for all of your dependencies, you have an infinite amount more flexibility and dependencies work a lot lot better in the long run.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:19
actually on my map knockout appears like "knockout/knockout": "github:knockout/knockout@3.3.0"
right, but futher down will be another key in the map with "github:knockout/knockout@3.3.0"
actually that is only if KO had more dependencies
which it doesn’t.
oh this is interesting
what a pain.
once sec
sigh. this is really annoying.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:23
Only got these two maps added to the config:
"knockout/knockout": "github:knockout/knockout@3.3.0",
"Knockout-Contrib/Knockout-Validation": "github:Knockout-Contrib/Knockout-Validation@2.0.2",
Jon Stevens
@lookfirst
Mar 20 2015 23:24
K-V has a package.json with a peerDependency of KO, which causes the github endpoint to ignore the dependency in the bower.json for KO.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:24
so now I can't no longer do "import ko from 'knockout';
Jon Stevens
@lookfirst
Mar 20 2015 23:24
no, you can fix that
but the problem above is worse
jspm install knockout=github:knockout/knockout
that would fix what you just mentioned
@guybedford you around?
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:25
I will do the uninstall first, right?
Jon Stevens
@lookfirst
Mar 20 2015 23:25
or just delete the right lines
basically, until this is fixed either in KO or jspm, you’re screwed. =(
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:27
it doesn't work
can you explain the problem further?
Jon Stevens
@lookfirst
Mar 20 2015 23:29
why you are getting 404’s or why the dependency resolution isn’t working right?
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:29
both actually
at least, when I used the bower version Knockout worked
Jon Stevens
@lookfirst
Mar 20 2015 23:29
the 404 is a function of your SystemJS config and your web server setup.
the dependency resolution is a function of the github endpoint not reading the bower.json for dependency information correctly.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:33
this is what is added when using both versions from bower:
"knockout": "bower:knockout@3.3.0",
"knockout-validation": "bower:knockout-validation@2.0.2",
"bower:knockout-validation@2.0.2": {
  "knockout": "bower:knockout@3.3.0"
},
Jon Stevens
@lookfirst
Mar 20 2015 23:33
yes, that is more correct
sadly
the github endpoint should create that correctly too. =(
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:33
But can you tell me what do I need to fix? Should I send a PR to the registry?
to the jspm registry to fix something
Jon Stevens
@lookfirst
Mar 20 2015 23:34
how are you installing from bower? did you also install the jspm bower third party endpoint or something?
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:34
yes
Jon Stevens
@lookfirst
Mar 20 2015 23:37
so remember something key… there is no such thing as cross endpoint dependency resolution (ie: bower: vs. github: vs. npm: ). so, once you go down the route of using bower as your endpoint, that means that ALL of your dependencies must come from that bower endpoint. otherwise, you may wind up in a massive world of pain. even worse is that bower: != github: != npm: … they are all treated separately. for example the npm endpoint never looks at a bower.json, while the github: one might sometimes.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:37
Something is very wrong...
Jon Stevens
@lookfirst
Mar 20 2015 23:37
what is wrong?
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:37
I installed something from Github and it removed the Knockout and Knockout-Validation packages
This must be the pain you're talking about
Jon Stevens
@lookfirst
Mar 20 2015 23:39
yea, i have no idea why you got that message. maybe something else is up.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:41
... I really want to start using JSPM by Monday. :)
why do you say I have to choose between bower or github or npm
I thought I could get my packages from any one of those
Jon Stevens
@lookfirst
Mar 20 2015 23:42
"there is no such thing as cross endpoint dependency resolution"
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:42
what a pitty
I thought I could register multiple endpoints and use them all
is that stated on the documentation?
Jon Stevens
@lookfirst
Mar 20 2015 23:43
you can use them all, but that doesn’t mean that your dependencies will resolve correctly.
jquery installed through npm: is not equal to jquery installed through github:
which is not equal to jquery installed through bower:
get it?
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:44
Yeah, that I could see with Knockout from bower and github
Jon Stevens
@lookfirst
Mar 20 2015 23:45
so, let’s say you install jquery through bower and then install something else through github that depends on jQuery. then that something else will try to resolve jquery from github, not from bower.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:45
got it!
Now I'm scared :)
Jon Stevens
@lookfirst
Mar 20 2015 23:45
UNLESS that something else specifies where it wants to get its resolution from
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:46
that was my next question
Jon Stevens
@lookfirst
Mar 20 2015 23:46
you should be. this is a bit of a train wreck.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:46
can I add something to the registry?
do you know how package-overrides work?
Jon Stevens
@lookfirst
Mar 20 2015 23:46
think of the registry as yet another endpoint.
so, this is why i started off with always use github. the reason is that you can always fork a project to fix it and then submit a PR back. if you use any of the other methods, you have to wait for a release or a PR to be accepted.
carlosagsmendes
@carlosagsmendes
Mar 20 2015 23:49
I really appreaciate your help!
I'm in love with JSPM and SystemJS but still having these nightmares. I spent the last 5 hours to make this work. I will try to get some sleep and get back to it by the morning :)
Thanks
Jon Stevens
@lookfirst
Mar 20 2015 23:50
yup. i’ve been having the same headaches for weeks now
this dependency hell stuff is a nightmare.