Integrate single-file compilation into SystemJS

[frankwallis]

As per microsoft/TypeScript#2233, all the pieces are in place to enable TypeScript as a compiler option in SystemJS in the same way as Babel/Traceur. They are:

1. System.register output
2. Single-file compilation
3. Inline source maps

I believe there is still going to be one issue regarding file-extensions, TypeScript files are currently being registered at runtime with their .ts extension, however this causes issues because if you try to import a file from another package, which is not the main entry point, then at runtime you don't know whether that file is registered with a .ts extension or a .js extension.
A possible solution to this would be for the file extension to be changed from .ts to .js after the source has been converted to javascript. This is how some other bundling tools work.

Where does that leave plugin-typescript? This depends on whether the integrated compiler performs type-checking or simply syntax checks the files and transpiles to javascript. If it is just doing doing simple transpilation then there may be a role for an additional plugin, or build tool which handles the type-checking and potentially the automatic generation of external declaration files.

I plan to start working on this very soon with a target date of 1-2 weeks.

[frankwallis]

Actually because of the .ts extensions it may be easier for the transpiler to remain a separate plugin.

[basarat]

👍

[jimthedev]

@frankwallis Thanks for working on this! Can you explain what the in browser workflow might be in this scenario?

Say, for example, I am in the browser in plunkr and in my index.html I use System.import('main.ts!'). If, in main.ts I do import {Component, View, bootstrap} from 'angular2/angular2'; then currently it seems like the plugin will try to pull an angular2.ts file even if I'm using a script tag to pull in angular2 in .js form.

[frankwallis]

Yes there is currently an issue here, I am waiting for this change in systemjs which is going to sort out the extension handling.

In the meantime you need to do import {Component, View, bootstrap} from angular2/angular2.js and update the .d.ts module declaration also. I know it is a bit of a pain, but it's a temporary workaround until the above change is released (which will be in the next release of systemjs by the look of it).

[jimthedev]

@frankwallis Great! I'll give it a shot.

[frankwallis]

This is now supported in JSPM 0.16.0-beta and plugin-typescript 2.0.0-alpha.