Saturday late-night thought about steal and Angular2

_The Idea_.md

Just some late Saturday night thoughts:

I feel like there may be a big opportunity for steal to get noticed by the Angular 2 crowd.

This reposistory here: https://github.com/pkozlowski-opensource/ng2-play Is described as making it...

really easy to install and spin up a new project with Angular 2

But if you look at the ridiculous gulpfile, and the hoops they go through to compile the angular 2 stuff, it seems like a big'ole complicated mess.

I imagine if someone came up with a simplified setup such as an HTML file like this:

<hello>
    Loading...
</hello>
<script src="node_modules/steal/steal.js" main="hello"></script>

That "just worked", in the browser, with the exact provided hello world example (+extra import), with no build step, that it would "blow their minds", and suddenly steal would be a somebody, ya know?

I tried to get it to work, but ran into some issues:

• For some reason Angular 2 lists traceur as a dependency, which breaks with a fs.readFileSync is not a function error. But if we got this working without that, we could probably talk them into not having it as a dependency. To get further, I just took it out of the angular2/package.json file.
• Then a bunch of the modules in steal-builtins/node_modules/crypto-browserify fail with a Buffer is not defined error, so I added a

global.Buffer = require('buffer').Buffer;

...to steal-builtins/node_modules/crypto-browserify/index.js to get further.

• Had trouble with Rx.js with the UMD pattern used in rx.aggregates.js and other files too, that broke everything (this is where I gave up)

...Anyway, it's late and I give up. But it seems like this would be a good idea to grab the attention of a lot of people. What do you think?

hello.js

import 'reflect-metadata';
import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2';

@Component({
    selector: 'hello'
})
@View({
    template: `<span *ng-if="name">Hello, {{name}}!</span>`,
    directives: [NgIf]
})
export class Hello {
    name: string = 'World';
    constructor() {
        setTimeout(() => {
          this.name = 'NEW World'
        }, 2000);
    }
}

bootstrap(Hello);

index.html

<hello>
    Loading...
</hello>
<script src="/node_modules/steal/steal.js" main="hello"></script>

package.json

{
  "name": "angular2-spike",
  "version": "0.0.1",
  "private": true,
  "description": "Trying out Angular 2 with steal",
  "main": "index.js",
  "author": "BigAB",
  "license": "MIT",
  "dependencies": {
    "angular2": "2.0.0-alpha.25",
    "reflect-metadata": "^0.1.0",
    "steal": "^0.10.5",
    "steal-builtins": "^1.0.0"
  },
  "system": {
    "map": {
      "angular2/angular2": "angular2"
    },
    "paths": {
      "angular2": "node_modules/angular2/es6/dev/angular2.es6",
      "rx": "node_modules/angular2/node_modules/rx/dist/rx.all.js",
      "rx.binding": "node_modules/angular2/node_modules/rx/dist/rx.binding.js",
      "rx.virtualtime": "node_modules/angular2/node_modules/rx/dist/rx.virtualtime.js",
      "rx.aggregates": "node_modules/angular2/node_modules/rx/dist/rx.aggregates.js"
    },
    "transpiler": "traceur",
    "traceurOptions": {
      "experimental": true,
      "annotations": true,
      "memberVariables": true,
      "types": true
    },
    "globalBrowser": {
      "steal-builtins": "steal-builtins"
    }
  }
}

For some reason Angular 2 lists traceur as a dependency, which breaks with a fs.readFileSync is not a function error. But if we got this working without that, we could probably talk them into not having it as a dependency. To get further, I just took it out of the angular2/package.json file.

No, this is our fault. We used to import @traceur but that was changed in SystemJS to just traceur which is what causes the conflict here. We could go back to @traceur or some custom name and this wouldn't be a problem any more.