JSPM & third party library shims

1804632 I was hitting a LOT of friction trying to get unregistered third-party packages to work with JSPM. "Frictionless browser package management" is the tag line, but only if you remain in the "jspm universe".

In other words, if you try using a package that is not in the jspm registry, you're going to eventually run into vague dependency related issues.

The example

Let's suppose there's a JavaScript library you want to use that's not in the jspm registry. Let's take https://github.com/corinis/jsForm for example. jsForm is a jQuery plugin that's dependent on jQuery, but not registered or part of the jspm universe. You can manually install jsForm from JSPM via "jspm install github:cornis/jsForm" and jspm will be happy to do your bidding.

Unfortunately, if you try importing jsForm in a ES6 module like this:

Code Snippet
  1. import "corinis/jsForm";
  2.  
  3. @autoinject
  4. export class Login {
  5.     private auth:AuthManager;
  6.     router:Router;
  7.     providers: any[];
  8.  
  9.     email:string;

You might run the risk of having jsFrom loading in an incorrect order (where jsForm loads first, before jQuery is loaded). In order to overcome this problem you have two choices:

1. Manual Import

This step means modifying your initial SystemJS import statement like this:

Code Snippet
  1. <script type="text/javascript">
  2.  
  3.     System.import("jquery").then(function() {
  4.         System.import("aurelia-bootstrapper");
  5.     });
  6.  
  7. </script>

This ensures jQuery is loaded before everything else. This method feels like a hack and probably wont scale if we run into more dependency related issues. So looking for a better way .... we find

2. The 'proper' Shim Method

The proper way is to use a shim. Basically, what we have to do is write an override (aka shim) that "explicitly" defines the dependencies for our non-registered jsForm jspm package. We do that by writing something similar to:

Code Snippet
  1. {
  2.    registry: 'jspm',
  3.    main: 'js/jquery.jsForm',
  4.    shim: {
  5.     'js/jquery.jsForm': {
  6.         deps: ['jquery']
  7.      }
  8.    },
  9.    dependencies: { jquery: '*' }
  10. }

And we'll need to smash all this into a single line like so:

jspm install github:corinis/jsForm -o "{ registry: 'jspm', main: 'js/jquery.jsForm', shim: { 'js/jquery.jsForm': { deps: ['jquery'] } }, dependencies: { jquery: '*' } }"

Ugh. Yes, ugly. This is the friction I'm talking about. It's not very friendly.

A little bit about the override schema:

main - path to the main JS file in your library to load. In our case "jspm_pacakges\github\corinis\jsForm@1.3.1\js\jquery.jsForm.js". Notice this is a relative path from the extracted package (in bold).

shim: { 'js/jquery.jsForm' : { deps:['jquery'] } } - our dependency, notice here we're using the aliased name to "jquery" as defined in our config.js file.

dependencies: - any version of jquery will do.

registry: - wont work without it.

Now, if you execute the above JSPM command with the shim override, you'll see config.js configuration changed and additional dependency listed for jsForm:

Code Snippet
  1. "github:corinis/jsForm@1.3.1": {
  2.       "jquery": "github:components/jquery@2.1.4"
  3.     },

Happy days. :)

HTH,
Brian Chavez

Comments

# re: JSPM & third party library shims
Gravatar I am trying to shim this package.
https://github.com/aehlke/tag-it

jspm install github:aehlke/tag-it -o "{ registry: 'jspm', main: 'js/tag-it', shim: { 'js/tag-it': { deps: ['jquery','jquery-ui'] } }, dependencies: { jquery: 'github:components/jquery','jquery-ui':'github:components/jqueryui@1.11.4'}, format: 'global' }"

It doesn't appear to be working , the library is loading fine, i can see it on chrome dev tools. But it's not calling any methods inside the lib. There are no console errors.

Can we install any third party lib using JSPM ?
Left by Newbie on 2/20/2016 12:26 PM
# re: JSPM & third party library shims
Gravatar I am trying to do the same thing with github:Serhioromano/bootstrap-calendar.

I ran the following line:
jspm install bootstrap-calendar=github:Serhioromano/bootstrap-calendar -o "{ registry: 'jspm', main: 'js/calendar', shim: { 'js/calendar': { deps: ['underscore'] } }, dependencies: { underscore: '*' } }"

While it looks like it's bringing in underscore as a dependency, I still get the following error when running:

Unhandled promise rejection TypeError: _.template is not a function(…)

Any ideas?
Left by VagyokC4 on 2/27/2016 5:50 PM

Leave Your Comment

Title*
Name*
Email (never displayed)
 (will show your gravatar)
Url
Comment*

Please add 7 and 4 and type the answer here:

Preview Your Comment.