JSPM support

[marinasundstrom]

The JavaScript Package Manager, JSPM, is a frictionless package manager for JavaScript that is able to pull packages from various sources ("endpoints", as they are called), such as Node Package Manager (NPM) and Bower. Unifying all in one interface.

It also has the ability to load EcmaScript 6 modules through the System.js library that implements a loader.

One notable feature is its support for transpilers, traceur (with AtScript) and Babel (formerly e6to5), that brings the new ES6 syntax and features and makes it easy to get started with building modern JavaScript applications.

JSPM brings a dynamic developer experience that pulls dependencies on the the fly. When an app is ready to be deployed it can then be compiled and dependencies can be bundled.

The JSPM configuration-file is based on the NPM package.json format.

TypeScript should support this new ecosystem too.

[red010b37]

Yes please!

[robcleghorn]

+1

[RichiCoder1]

Aurelia makes extensive use of JSPM, and having worked with both I'd 👍 this.

[atrauzzi]

👍

[ejsmith]

Yes please!

[RyanCavanaugh]

@mhegazy Accepting PRs?

[mhegazy]

I actually like the JSPM work flow, and we should do that :) a couple of thoughts:

• we need a transpile(input: string): string interface on the TS side, to make the interaction with the API clean and simple
• we need to emit into the system.js module structure, possibly a new --module system
• finally plugin typescript support to JSPM

PRs are definitely welcomed

[basarat]

we need a transpile(input: string): string interface on the TS side, to make the interaction with the API clean and simple

I am sure you already know : https://github.com/teppeis/typescript-simple , it now does inline sourcemaps : teppeis/typescript-simple#7 (I used it for atom/atom#5898)

[atrauzzi]

We have to make sure this comes out requiring zero configuration beyond any steps needed to get typescript initially installed.

[basarat]

@atrauzzi I was about to start work on this but noticed from : https://github.com/jspm/registry/blob/master/registry.json#L13 that there is jspm install ts from (https://github.com/frankwallis/plugin-typescript) by @frankwallis already.

Is there something more required?

[marinasundstrom]

I have not evaluted the extension yet. I don't know what level of support there is.

Can you debug the TS in the browser?

[frankwallis]

I am the author of plugin-typescript and I'm currently converting a large multi-repository project over to using it.

It does provide source-maps so you can debug TypeScript in the browser.

I am very interested in any feedback people have, so if you find any issues or have suggestions for improvements you would like to see then please raise issues on that repository. I will be making some minor improvements to it over the coming week.

[ejsmith]

I would still love to see a very simplified transpile method that has the option to embed the sourcemap content.

[atrauzzi]

Yes, and I think there has to be full clarity on how d.ts files are used. I'm not sure if there's a convention yet for that, but I'm thinking we probably need to map them to modules as they're imported.

[marinasundstrom]

@frankwallis I could not view the source code when debugging my test project in Chrome. I just got the resulting JavaScript. I ran my test site in live-server. What am I doing wrong?

Some features worth having when supporting SystemJS:

• Errors and warnings highlighted in source code. Showing up in the console. Preferably colored text.
• Supporting backend-projects, not just front-end websites.

[frankwallis]

@atrauzzi - plugin-typescript resolves .d.ts files like SystemJS/commonJS, ie. 'common/angular.d.ts' will resolve differently to './common/angular.d.ts'. I have updated the readme to reflect this. I think this is really important. plugin-typescript is the 4th typescript plugin I have written and I am painfully aware of the issues with managing declaration files across multiple projects. I think that using commonJS resolution for them is a neat solution which avoids having to update versions in multiple places when things change. I think that tsc & tsify as nodeJs compilers ought to use nodeJs resolution, while plugin-typescript as the SystemJS compiler uses SystemJS resolution. It also doesn't lose you anything - if you don't want to opt in or it causes problems in your IDE then just use relative paths.

@RobertSundstrom - please check you have the latest version of jspm installed (0.14 I think?), I have had no problems. If you still have trouble then raise an issue on that repo.
I am not sure what I need to do to better support back-end projects?

@RobertSundstrom, @basarat - I really would love to see some IDE integration - I have this dream sometimes where I'm compiling apps in SystemJS and running them in a browser tab of Atom while stepping through my code inside the Atom editor!

[marinasundstrom]

@frankwallis
All I get when I view "index.ts", served by live-server, in either Chrome or IE is:

var f = function () {
    console.log("Test");
};
f();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFJLENBQUMsR0FBRztJQUNQLE9BQU8sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7QUFDckIsQ0FBQyxDQUFDO0FBQ0YsQ0FBQyxFQUFFLENBQUMifQ==
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFJLENBQUMsR0FBRztJQUNQLE9BQU8sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7QUFDckIsQ0FBQyxDQUFDO0FBQ0YsQ0FBQyxFQUFFLENBQUMifQ==

Plugin version:

plugin-typescript@^0.5.10

[frankwallis]

@RobertSundstrom - I have reproduced this now, will issue a fix shortly.

[danielearwicker]

@frankwallis 👍 for looking for a .d.ts in the package directory when referenced without ./ at the start.

How automatic is it? I'd like a way to write an npm package in .ts, such that my index.ts is compiled to index.js so that non-TS consumers are happy, but also TS users can just say:

import x = require("x");

And neither I nor they have to do anything else to make it work. At the moment if I understand it correctly, I (the package author) must extract type declarations from my code and wrap them in a separate x.d.ts:

declare module "x" {
    // exports copied from my index.ts file
}

The -d flag to tsc doesn't seem to have a way to do this for me. It just makes top-level declarations.

And the consumer has to bring this x.d.ts to the attention of the TS compiler e.g. by using /// <reference... comments.

Ideally it should be enough for the consumer to import the package, and the type information is found. I guess package.json would need to contain something like:

"typescriptMain": "index.ts"

But then index.ts might depend on interfaces declared in other files that are passed to tsc. This could be resolved by looking for a tsconfig.json file, so that index.ts can be fully understood.

[frankwallis]

@danielearwicker if you want to deliver typescript in systemjs and javascript in nodejs you can override "main" in the "jspm" section of package.json - set it to "./index.ts!" and everything will work.

Currently you do need an external declaration file for the consumer - if you want these generated automatically then I would look at dts-bundle. This external declaration file should be delivered with its own package and then referenced form the consumer using /// references without the "./"

Next week I am going to be seeing if I can get plugin-typescript to resolve ambient imports and if it finds another typescript file then it will trigger that compilation, autogenerate the correct .d.ts file (using dts-bundle) and inject that into the consumers compilation. This will mean it is doing a depth first compilation which is important. I think it is possible to do this, but I will find out more next week.

[basarat]

Worth mentioning here : https://docs.google.com/document/d/139ImayzFfHwYDzPIfwOHgf4BsAsr4HIC0vaudF98Rog/mobilebasic

[markrendle]

For those using TypeScript with Aurelia and wanting to use JSPM, I've managed to get it working by piping the output from TypeScript (with --target es6) through Babel. It's a bit hairy, because I also wanted to use decorators and TS1.5-alpha and Babel 5.0 disagree on how to do that.

Of course, if TS 1.5 adds support for --module system (using the System.js loader/polyfill as Babel does) then Babel wouldn't be necessary at all.

You can checkout out my fork of skeleton-navigation here

Main issues:

• had to set TS target to es6 so output could be piped through Babel
• had to explicitly reference lib.es6.d.ts for gulp-typescript
• Babel did something odd with the this.__decorate produced by TS and it ended up as undefined.__decorate, so there's a gulp-replace regex hack to workaround that
• TS also outputs an Object.defineProperty(Class, "name", { ... }); which, at runtime, caused an error "cannot redefine property", so there's a regex hack for that, too. I'm guessing this is something to do with System.js automatically adding that property, although I haven't looked into it properly.

[ejsmith]

I really hope that the TypeScript team are planning to support system.js. The JSPM and System.js workflow makes doing dev in a transpiled language feel first class.

[frankwallis]

I have created frankwallis/plugin-typescript#16, and I'm planning to implement this over the next week or two.

[hourliert]

Amazing. Thanks !!!

[marinasundstrom]

I have been watching this one: systemjs/systemjs#432

As soon as these conflicts get resolved SystemJS will finally support TypeScript.

[mhegazy]

TypeScript support is now in JSPM: jspm/jspm-cli#735 (comment)

[atrauzzi]

"not" or "now"?

Where would people find docs on making use of this?

[mhegazy]

thanks @atrauzzi, corrected above. @vladima is working on a JSPM sample to share. We would be happy to take PRs for additional documentation as well.

[johnjelinek]

Any updates on a JSPM sample?

[vladima]

@johnjelinek JSPM 0.16 with TypeScript support is not officially released yet so our work over samples is still in progress. If you want to take a peek on intermediate results and ok with using the beta version of JSPM you can use https://github.com/Microsoft/TypeScriptSamples/tree/jspm/jspm

[OliverJAsh]

Where can I track support for bundling in jspm?

[OliverJAsh]

Testing https://github.com/Microsoft/TypeScriptSamples/tree/jspm/jspm with the latest jspm beta (0.16).

I don't seem to get compile errors in the browser, e.g. this succeeds:

function greeter(person: string) {
    return "Hello, " + person;
}

var user = [0, 1, 2];

greeter(user);

/cc @mhegazy

[vladima]

@OliverJAsh complete typechecking in transpile scenarios is not possible: TypeScript compiler deliberately works within given file without attempting to resolve any references to external files (including standard library). In this circumstances it cannot build the full set of types that will be available in the program and will report lots of errors which are in fact false positives. If you want to have full-fledged editing experience with correct errors - you should use editor with TypeScript support i.e. VSCode, Sublime, Visual Studio, Atom etc. Support to compile isolated modules can be seen as merely a shortcut to avoid explicit compilation step but not the replacement for full program analysis which can be done i.e. in the editor or the compiling the whole program.
NOTE: We consider reporting syntax errors as an option

[OliverJAsh]

@vladima Thanks for the explanation.

I'm looking at VSCode and the IDE plugins now. Is it possible to hook these up to SystemJS so they read the config and can parse third party dependencies, e.g. import jquery from 'jquery;`?

[atrauzzi]

@OliverJAsh That would be simply amazing. Would almost offer a first-class client side dev experience.

I'm fairly curious about this, because I feel like there are numerous undiscovered challenges:

• If it's a pure JavaScript package, how far can the hinting really expect to go?
• If it's a TypeScript package, does it read built JS, or does it look somewhere for TS code?
• If it's built JavaScript that includes the .r.js files, where should it expect to find those?
• What if it's a package that needs to be supplemented with an r.js from another source? Any way to match the two?

Probably more questions. But I feel like package development in JS is just insanely complex and difficult to reason about with or without TypeScript.

[OliverJAsh]

I don't seem to get compile errors when bundling either (now supported in jspm@0.16-beta.2). /cc @vladima

Tracking systemjs/builder#206

[vladima]

Technically bundling as it is done in jspm now is not a whole program analysis as it processes modules one by one. I already have a workitem in my list to add support for reporting syntax errors during transpile part in es6-module-loader and in systemjs/builder.

Also we already have plenty of requests to add support for bunding in TypeScript compiler - is already in the roadmap (I think it is currently scheduled for 2.0).

[SonofNun15]

Currently JSPM understands typescript but the typescript compiler does not know how to resolve typings using jspm as it does with npm. This is significant for two reasons:

1. Running tscresults in false errors because it can't load library typings. This may be able to be resolved via typings (https://github.com/typings/typings), but only via an additional typings install.
2. VSCode shows a bunch of false errors in files, presumably because it relies on tsc to generate errors.

[daslicht]

Is there meanwhile an example ?

[frankwallis]

@daslicht - you can see some jspm/typescript examples here

[oising]

@SonofNun15 Is there an issue tracking this?

[SonofNun15]

@oising: yes, this one

[Bretto]

Why is this closed ? Where can we follow the progress on this ?

[kitsonk]

It is closed because as mentioned above it is supported.

There are the Microsoft/TypeScriptSamples which maybe a better place to focus your questions/look for answers.