What about packages that need to be built?

[trusktr]

github.com/Leaflet/Leaflet, for example, has to be built with jake. Leaflet doesn't contain the built JavaScript in it's dist folder, and there's no way to use files without concatenating them together.

This would mean having to configure something. Can we add build steps to the jspm registry so jspm users can still have a one line install?

[trusktr]

Oh, I see that the registry describes the overrides. When I jspm install github:Famous/[email protected], all the folders are empty except for the dist folder. How do I prevent that? Famous has define() modules spread across a bunch of files (one define per file).

[trusktr]

I installed Famous with bower for now, which includes all the files, and importing defined AMD modules works!! So awesome. Wooooo! Thanks @guybedford.

[guybedford]

It could be worth trying to install leaflet from npm since they don't host a build or release on github. Just let me know if you need help getting it to work / configured for jspm.

Also, if it looks like Famous isn't downloading properly let me know, but it sounds like it is working for @MajorBreakfast.

[trusktr]

@MajorBreakfast How did you get Famous working with jspm? When you jspm install github:Famous/[email protected], are all the folders except for dist empty?

@guybedford The famous.js file in the dist contains all of the define() modules in a single file. Can I import them all under some namespace? Maybe I just don't know the ES6 import syntax for that yet?

I tried importing Modifier from famous.js with no luck:

import Modifier from 'github:Famous/famous/dist/famous'; // TypeError: undefined is not a function (when I try to use Modifier later)
import {Modifier} from 'github:Famous/famous/dist/famous'; // TypeError: undefined is not a function (when I try to use Modifier later)
import 'famous/core/Modifier' from 'github:Famous/famous/dist/famous'; // TypeError: Cannot read property 'name' of undefined (on this line)
import {'famous/core/Modifier'} from 'github:Famous/famous/dist/famous'; // TypeError: Cannot read property 'location' of null (on this line)

When the modules are separated into separate files (like with the bower install) then it works fine:

import Modifier from 'path/to/famous/core/Modifier';

EDIT: I got everything working (almost). See the famous entries in the registry. famous-polyfills has an issue as described in #177.

[trusktr]

@guybedford True, using the npm endpoint would work for packages that have an npm version, but it's totally possible that there are packages that exist only on github, and that don't host a build or release anywhere in the source, and can only be built/compiled. IMHO, there should be a way to specify build steps in a package override when necessary.

[trusktr]

I just tried installing leaflet via the npm:endpoint, and it has a bunch of errors that I don't think are jspm related, but prevent me (so far) from using the npm version: http://hastebin.com/utexijuqum.js

@guybedford I'd like to try the bower endpoint. How do we get it working with jspm?

[MajorBreakfast]

there are packages that exist only on github, and that don't host a build or release anywhere in the source

@trusktr Github allows repository owners to upload such bundles

there should be a way to specify build steps in a package override when necessary

@trusktr To build a package you need everything it's build pipeline requires installed on your system (e.g. ruby, imagemagick, etc). Also, for any package with a decent amount of dependencies there would always be one package that has a broken setup on your system. Prebuilt packages stored as zip on github or uploaded to npm add up to a far nicer experience. Also it keeps the build tool stuff out of jspm.

[guybedford]

Couldn't have said it better myself. The bower endpoint is not recommended, since we have GitHub anyway. If there's something you need from Bower let me know and I'll help set it out. Will look into the Leaflet bug on Sunday.

[MajorBreakfast]

Bower has support for arbitrary git URLs. There's no lock-in to github. Instead you can use bitbucket, codeplex or self-hosted solutions (some chairs at my university do that). So, I guess having that would be really nice.

[guybedford]

Yes - a git endpoint has been developed by @Orbsio and @subesokun.

It would be nice to have dedicated bitbucket etc endpoints, and they are straightforward to make. I just can't create and maintain these all on my own.

[subesokun]

Until an dedicated bitbucket endpoint is available you can use already jspm-git to download packages hosted on bitbucket e.g.

# install jspm-git via npm
jspm endpoint create bitbucket jspm-git
# basepath = https://bitbucket.org/

jspm install bitbucket:project/repo

[MajorBreakfast]

Nice! :)

[trusktr]

@guybedford When I want to install deps for a package on another machine, do I have to endpoint create manually again?

[guybedford]

Yes.

Programmatic endpoint creation can actually be done by reading the ~/.jspm/config file and converting it into config calls.

Eg:

{
  "endpoints": {
    "bitbucket": {
      handler: "jspm-git",
      basepath: "[email protected]/"
    }
  }
}

->

  jspm config endpoints.bitbucket.handler jspm-git
  jspm config endpoints.bitbucket.basepath [email protected]/

The above would be equivalent to the manual endpoint create process, but possible to share through an init script.

[trusktr]

Speaking of an init script, this is what I've got. It's totally less than optimal, but it's working on any machine that I want to deploy on (e.g. on a new server that has jspm). To deploy, I just clone the project, then instead of running jspm install, I just run ./jspm_install.sh.

package.json:

{
  "jspm": {
    "directories": {
      "jspmPackages": "party/jspm"
    },
    "configFile": "jspm_config.js",
    "dependencies": {
      "jquery": "^2.1.1",
      "big": "github:MikeMcl/big.js@^2.5.1",
      "bignumber": "github:MikeMcl/bignumber.js@^1.4.1",
      "jsfromhell": "github:jonasraoni/JSFromHell@master",
      "bootstrap": "^3.2.0",
      "bootstrap-datepicker": "github:eternicode/bootstrap-datepicker@^1.3.0",
      "jquery-tooltipster": "github:iamceege/tooltipster@^3.2.6",
      "famous": "github:trusktr/famous@trusktr",
      "stylus": "github:LearnBoost/stylus@client"
    }
  }
}

jspm_install.sh, the initial install of all modules:

#!/usr/bin/env sh
jspm install &&\
jspm install bootstrap -o '{ "registry": "jspm", "dependencies": { "jquery": "^2.1.1", "css": "^0.1.0" }, "shim": { "js/bootstrap": { "deps": ["jquery", "../css/bootstrap.min.css!", "../css/bootstrap-theme.min.css!"], "exports": "$" }, "css/bootstrap-theme.min.css!": { "deps": ["./bootstrap.css!"] } } }' &&\
jspm install bootstrap-datepicker=github:eternicode/bootstrap-datepicker -o '{ "registry": "jspm", "main": "js/bootstrap-datepicker.js", "dependencies": { "bootstrap": "^3.2.0" } }' &&\
jspm install jquery-tooltipster=github:iamceege/tooltipster -o '{ "registry": "jspm", "main": "js/jquery.tooltipster", "shim": { "js/jquery.tooltipster": { "deps": ["jquery", "../css/tooltipster.css!"] } }, "dependencies": { "jquery": "^2.1.1", "css": "^0.1.0" } }' &&\
jspm install stylus=github:LearnBoost/stylus@client &&\
jspm install famous=github:trusktr/famous@trusktr -o '{ "registry": "jspm", "directories": { "lib": "src" }, "dependencies": { "famous-polyfills": "^0.3.0", "css": "^0.1.0" }, "shim": { "*/*": { "deps": ["famous-polyfills", "../core/famous.css!"] } } }' &&\
./jspm_meta_fix

jspm_meta_fix, fixes the meta for AMD modules (famous):

#!/usr/bin/env node

var walker = require('at-at');
var fs = require('fs');

process.chdir('./party/jspm/github/');
walker.walk('./', function(files) {
    // files is an array of filenames (including the paths).
    files.forEach(function(fileName, index, array) {
        if (fileName.match(/famous@.*/)) {
            if (!fileName.match(/famous@[\.0-9a-zA-Z]*\.js/) && fileName.match(/\.js$/) ) { // famous@* but not famous@*.js
                var fileContent = fs.readFileSync(fileName).toString();
                if ( fileContent.indexOf('"deps') === -1 ) {
                    console.log('Adding meta info for', fileName);
                    fileContent = fileContent.split("\n");
                    var filePosition = 0;
                    fileContent.splice(filePosition++, 0, '"deps ../core/famous.css!";');
                    fileContent.splice(filePosition++, 0, '"deps famous-polyfills";');
                    fs.writeFileSync(fileName, fileContent.join("\n"));
                }
            }
        }
        else if (fileName.indexOf('index.js') !== -1 && fileName.indexOf("polyfills@") !== -1) {
            console.log('Fixing requires for famous-polyfils');
            var fileContent = fs.readFileSync(fileName).toString();
            fileContent = fileContent.split("\n");
            fileContent.forEach(function(line, index, array) {
                if (line.indexOf('.js') !== -1) {
                    fileContent[index] = line.substr(0, line.indexOf(".js")) + line.substr(line.indexOf('.js')+3)
                }
            });
            fs.writeFileSync(fileName, fileContent.join("\n"));
        }
    });
});

In the overrides inside of jspm_install.sh, you'll notice that one of them overrides bootstrap, which is in the registry, but the override in the registry isn't exactly the override I want to use.

I know that the in my jspm_install.sh script the first jspm install line installs everything one time, then the subsequent calls to jspm install reinstall some of the packages with the overrides I want, effectively installing some things twice, but it won't work if I install those things first then jspm install last because then calling jspm install last would override my overrides with blank overrides.

[guybedford]

Sure, this makes sense for the current situation - I'm working to make this all unnecessary, thanks for working around it for now.

[trusktr]

👍

[MajorBreakfast]

@trusktr I'd rather go with an import 'famous-polyfills'; import 'famous/core/famous.css!' in the main js file. That's much easier on the eyes.

[guybedford]

I did consider allowing the creation of ghost modules that could contain custom collections while not being actual files like famous/with-polyfills where that isn't an actual file, but has dependencies and is an alias of another module. That was actually the reason I was going back-and-fourth on the alias feature here - systemjs/systemjs#212.

[MajorBreakfast]

No matter which module from famous he includes, it always installs the polyfills and injects the style first. But I don't think that this can be easily generalized. It's only interesting for packages like famous without a main entry point where you access the modules directly. Otherwise it can be easily achieved using the map feature. Also, since polyfills are a global thing and affect every package, I think that implicit installation is possibly a cause for problems.

[guybedford]

Ahh, right, so alias modules wouldn't cater to this.

But I do like the idea of over-specifying dependencies to ensure that fully modular loads can work.

[trusktr]

@guybedford Yeah, I think it's a good idea.