build: make it compile angular2 from source

README.md

@@ -5,11 +5,11 @@
 - Run `gulp karma-watch` while gulp watch is running to watch tests. Unit tests run on compiled files in dist.
 - All test files must be suffixed with `_spec.js`.
 
-#### Examples
+#### Building & Running
 
 - `npm install -g jspm`
-- `jspm install`
-- `gulp examples`
+- `jspm init && jspm install`
+- `gulp watch`
 - `python -m SimpleHTTPServer .`
 - `open http://localhost:9000/dist/examples/aside/basic/index.html`
 - Follow the structure found in src/components/aside/examples/basic

gulpfile.js

@@ -2,7 +2,8 @@
 // Mostly stolen from https://github.com/pkozlowski-opensource/ng2-play
 /////
 
-var Builder = require('systemjs-builder');
+var SystemJsBuilder = require('systemjs-builder');
+var exec = require('child_process').exec;
 var gulp = require('gulp');
 var karma = require('karma').server;
 var path = require('path');
@@ -12,7 +13,6 @@ var through2 = require('through2');
 var concat = require('gulp-concat');
 var debug = require('gulp-debug');
 var del = require('del');
-var exec = require('gulp-exec');
 var gulpif = require('gulp-if');
 var karma = require('karma').server;
 var plumber = require('gulp-plumber');
@@ -23,36 +23,11 @@ var traceur = require('gulp-traceur');
 var wrap = require('gulp-wrap');
 var argv = require('yargs').argv;
 
-gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']);
-
-var NG2_PATH = 'jspm_packages/github/angular/angular@master';
-gulp.task('ng2-compile', shell.task([
-  'npm install',
-  'gulp build/transpile.js.dev.es6'
-], {
-  cwd: NG2_PATH
-}));
-gulp.task('ng2-copy', ['ng2-compile'], function() {
-  return gulp.src(NG2_PATH + '/dist/js/dev/es6/{angular2,rtts_assert}/**/*')
-    .pipe(gulpif(/es6$/, rename({ extname: '.js' })))
-    .pipe(gulp.dest('dist/lib'));
-});
+gulp.task('default', ['sass', 'examples', 'ng2']);
 
 gulp.task('watch', ['default'], function() {
-  var http = require('http');
-  var connect = require('connect');
-  var serveStatic = require('serve-static');
-  var port = 9000;
-
-  gulp.watch(buildConfig.src.html, ['html']);
-  gulp.watch(buildConfig.src.js, ['js']);
   gulp.watch(buildConfig.src.scss, ['sass']);
-  gulp.watch(buildConfig.src.playgroundJs, ['playgroundJs']);
-  gulp.watch(buildConfig.src.playgroundFiles, ['playgroundFiles']);
-
-  var app = connect().use(serveStatic(__dirname + '/' + buildConfig.dist));  // serve everything that is static
-  http.createServer(app).listen(port);
-  console.log('Serving `dist` on http://localhost:' + port);
+  return gulp.watch(buildConfig.src.examples.concat('scripts/examples/index.template.html'), ['examples']);
 });
 
 gulp.task('karma', function() {
@@ -77,92 +52,54 @@ gulp.task('clean', function(done) {
   del([buildConfig.dist], done);
 });
 
-gulp.task('playgroundFiles', function() {
-  return gulp.src(buildConfig.src.playgroundFiles)
-    .pipe(gulp.dest(buildConfig.dist));
-});
-
-gulp.task('playgroundJs', function() {
-  return gulp.src(buildConfig.src.playgroundJs)
-    .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
-    .pipe(plumber())
-    .pipe(traceur({
-        modules: 'instantiate',
-        moduleName: true,
-        annotations: true,
-        types: true
-    }))
-    .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
-    .pipe(gulp.dest(buildConfig.dist));
-});
-
-gulp.task('js', function () {
-  return gulp.src(buildConfig.src.js)
-    .pipe(rename(function(file) {
-      // Forces the files to register themselves with 'ionic' prefix
-      file.dirname = 'ionic/' + file.dirname;
-    }))
-    .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
-    .pipe(plumber())
-    .pipe(traceur({
-        modules: 'instantiate',
-        moduleName: true,
-        annotations: true,
-        types: true
-    }))
-    .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
-    // compiled js files in playground go to the playground root, everything else goes in /ionic
-    .pipe(gulp.dest('dist'));
-});
-
-gulp.task('html', function () {
-  // Don't do anything with html for now
-  // return gulp.src(buildConfig.src.html)
-  //   .pipe(gulp.dest(buildConfig.dist));
-});
-
-gulp.task('libs', ['angular2'], function () {
-  return gulp.src(buildConfig.lib)
-    .pipe(gulp.dest('dist/lib'));
-});
-
-gulp.task('angular2', function () {
-  //transpile & concat
-  return gulp.src([
-    'node_modules/angular2/es6/prod/*.es6',
-    'node_modules/angular2/es6/prod/src/**/*.es6'
-  ], {
-    base: 'node_modules/angular2/es6/prod'
-  })
-    .pipe(rename(function(path){
-        path.dirname = 'angular2/' + path.dirname; //this is not ideal... but not sure how to change angular's file structure
-        path.extname = ''; //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
-    }))
-    .pipe(traceur({ modules: 'instantiate', moduleName: true}))
-    .pipe(concat('angular2.js'))
-    .pipe(gulp.dest('dist/lib'));
-});
-
 gulp.task('examples', ['sass'], function() {
-  var examplesSrc = path.join(__dirname, 'src/components/**/examples/**/*');
+  var exampleSrc = path.join(__dirname, 'src/components/**/examples/**/*');
   var templateSrc = path.join(__dirname, 'scripts/examples/index.template.html');
-  var examplesDest = path.join(__dirname, 'dist/examples/');
+  var exampleDest = path.join(__dirname, 'dist/examples/');
 
-  return gulp.src(examplesSrc)
+  return gulp.src(exampleSrc)
     .pipe(gulpif(/index.html/, wrap({
       src: templateSrc
     })))
     .pipe(rename(function(file) {
       file.dirname = file.dirname.replace('/examples/', '/');
     }))
-    .pipe(gulp.dest(examplesDest));
+    .pipe(gulp.dest(exampleDest));
 });
 
 require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig);
 
-gulp.task('watch-examples', ['examples'], function() {
-  return gulp.watch([
-    'src/**/*',
-    'scripts/examples/index.template.html'
-  ], ['examples']);
+// Take es6 files from angular2's output, rename to js, and move to dist/lib/
+gulp.task('ng2-rename', function(done) {
+  exec('ls dist/angular-master', function(err) {
+    if (err) {
+      console.log('You have not installed angular master.\n' +
+                  'Please run ./scripts/build/update-angular.sh.\n' +
+                  'Aborting.');
+      return process.exit(1);
+    }
+    gulp.src([
+      'dist/angular-master/dist/js/dev/es6/{angular2,rtts_assert}/**/*.es6'
+    ])
+      .pipe(rename({ extname: '.js' }))
+      .pipe(gulp.dest('dist/lib'))
+      .on('end', done);
+  });
 });
+gulp.task('ng2', ['ng2-rename'], function() {
+  var builder = new SystemJsBuilder();
+  return builder.loadConfig('jspm-config.js')
+  .then(function() {
+    builder.config({
+      map: {
+        'angular2': 'dist/lib/angular2',
+        'rtts_assert': 'dist/lib/rtts_assert'
+      },
+      paths: {
+        dist: undefined,
+      }
+    });
+    return builder.build('angular2/angular2', 'dist/lib/angular2.js');
+  });
+});
+

jspm-config.js

@@ -1,36 +1,24 @@
 System.config({
-  paths: {
-    '*': '*.js',
-    'github:*': '/jspm_packages/github/*.js',
-    'npm:*': '/jspm_packages/npm/*.js'
+  "paths": {
+    "*": "*.js",
+    "dist": "/dist"
   },
-  traceurOptions: {
-    sourceMaps: true,
-    annotations: true, // parse annotations
-    types: true, // parse types
-    script: false, // parse as a module
-    memberVariables: true, // parse class fields
-    modules: 'instantiate'
+  "traceurOptions": {
+    "sourceMaps": true,
+    "annotations": true,
+    "types": true,
+    "script": false,
+    "memberVariables": true,
+    "modules": "instantiate"
   }
 });
 
 System.config({
-  map: {
-    'angular2': '/dist/lib/angular2',
-    'rtts_assert': '/dist/lib/rtts_assert',
-    'angular/zone.js': 'github:angular/zone.js@0.4.1',
-    'events': 'github:jspm/nodelibs-events@0.1.0',
-    'hammer': 'github:hammerjs/hammer.js@2.0.4',
-    'ionic2': '/src',
-    'github:jspm/nodelibs-events@0.1.0': {
-      'events-browserify': 'npm:events-browserify@0.0.1'
-    },
-    'github:jspm/nodelibs-process@0.1.1': {
-      'process': 'npm:process@0.10.1'
-    },
-    'npm:events-browserify@0.0.1': {
-      'process': 'github:jspm/nodelibs-process@0.1.1'
-    }
+  "map": {
+    "angular2": "dist/lib/angular2",
+    "hammer": "/node_modules/hammerjs/hammer.js",
+    "ionic2": "/src",
+    "rtts_assert": "dist/lib/rtts_assert"
   }
 });
 

package.json

@@ -9,7 +9,6 @@
     "gulp-concat": "~2.5.0",
     "gulp-debug": "~2.0.1",
     "gulp-eslint": "^0.7.0",
-    "gulp-exec": "^2.1.1",
     "gulp-if": "^1.2.5",
     "gulp-jscs": "^1.4.0",
     "gulp-plumber": "^1.0.0",
@@ -35,6 +34,7 @@
     "es6-module-loader": "~0.11.0",
     "event-stream": "^3.3.0",
     "gulp-template": "^3.0.0",
+    "hammerjs": "^2.0.4",
     "jasmine-core": "^2.2.0",
     "karma-chrome-launcher": "^0.1.7",
     "karma-jasmine": "^0.3.5",
@@ -50,10 +50,17 @@
     },
     "configFile": "jspm-config.js",
     "dependencies": {
-      "angular2": "github:angular/angular@master",
-      "angular/zone.js": "github:angular/zone.js@0.4.1",
-      "events": "github:jspm/nodelibs-events@^0.1.0",
-      "hammer": "github:hammerjs/hammer.js@^2.0.4"
+      "es6-module-loader": "~0.11.0",
+      "event-stream": "^3.3.0",
+      "gulp-template": "^3.0.0",
+      "hammerjs": "^2.0.4",
+      "jasmine-core": "^2.2.0",
+      "karma-chrome-launcher": "^0.1.7",
+      "karma-jasmine": "^0.3.5",
+      "systemjs": "~0.11.0",
+      "through2": "^0.6.3",
+      "traceur": "0.0.87",
+      "zone.js": "0.4.1"
     }
   }
 }

scripts/build/config.js

@@ -1,20 +1,10 @@
 module.exports = {
   dist: 'dist',
   src: {
-    js: ['src/**/*.js', '!src/**/examples/**'],
     test: ['src/**/*.spec.js'],
     examples: ['src/**/examples/**'],
     html: 'src/**/*.html',
     scss: 'src/components/**/*.scss',
-    playgroundJs: 'playground/**/*.js',
-    playgroundFiles: ['playground/**/*', '!playground/**/*.js'],
   },
-  lib: [
-    'node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js',
-    'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js',
-    'node_modules/systemjs/lib/extension-register.js',
-    'node_modules/angular2/node_modules/zone.js/zone.js',
-    'node_modules/hammerjs/hammer.js'
-  ],
   protractorPort: 8876
 };

scripts/build/update-angular.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+NG_FOLDER=angular-master
+
+cd $(dirname $0)/../..
+
+cd dist
+if ! [ $(ls | grep $NG_FOLDER) ]; then
+  echo "Cloning angular2 to dist/angular-master..."
+  git clone git@github.com:angular/angular $NG_FOLDER
+fi
+
+cd $NG_FOLDER
+echo "Running npm install in angular2..."
+npm install
+
+echo "Running gulp to build source..."
+gulp build/transpile.js.dev.es6
+
+echo "-- DONE --"

scripts/examples/examples.js

@@ -1,11 +0,0 @@
-/**
- * Created by perry on 3/19/15.
- * A place to do more complicated demo generation
- * TODO: more complicated demo generation
- */
-
-var wrap = require("gulp-wrap");
-
-module.exports = function(gulp, argv) {
-
-};

scripts/examples/index.template.html

@@ -6,8 +6,9 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="stylesheet" href="/dist/css/ionic.css" />
     <script src="/jspm_packages/system.js"></script>
-    <script src="https://cdn.rawgit.com/angular/zone.js/v0.4.1/zone.js"></script>
-    <script src="https://cdn.rawgit.com/angular/zone.js/v0.4.1/long-stack-trace-zone.js"></script>
+    <script src="/node_modules/zone.js/zone.js"></script>
+    <script src="/node_modules/zone.js/long-stack-trace-zone.js"></script>
+    <script src="/dist/lib/angular2.js"></script>
     <script src="/jspm-config.js"></script>
 </head>
 <body ion-app>

scripts/examples/template/index.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <link rel="stylesheet" href="/css/ionic.css">
-  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-
-  <!-- ES6-related imports -->
-  <script src="/lib/traceur-runtime.js"></script>
-  <script src="/lib/es6-module-loader-sans-promises.src.js"></script>
-  <script src="/lib/extension-register.js"></script>
-  <script>
-      register(System);
-  </script>
-
-  <!-- Third party imports -->
-  <script src="/lib/angular2.js"></script>
-  <script src="/lib/zone.js"></script>
-  <script src="/lib/hammer.js"></script>
-
-  <meta charset="UTF-8">
-  <title>Ionic 2 Example</title>
-</head>
-<body>
-</body>
-<script>
-  System.register({
-    map: {
-      'ionic': '/ionic'
-    }
-  });
-  System.import('main.js'):
-</body>
-</html>

src/components/app/examples/figure-it-out/components/stylers.js

@@ -0,0 +1,30 @@
+import {Decorator, NgElement, Template, Component} from 'angular2/angular2';
+
+@Decorator({
+  selector: '[red-bg]'
+})
+@Template({
+  inline: 'test'
+})
+export class TestRedDecorator {
+  constructor(
+    element:NgElement
+  ) {
+    element.domElement.style.background = 'red';
+  }
+
+}
+
+@Decorator({
+  selector: '[blue-bg]'
+})
+@Template({
+  inline: 'test'
+})
+export class BlueTextStyler {
+  constructor(
+    element:NgElement
+  ) {
+    element.domElement.style.color = 'blue';
+  }
+}

src/components/app/examples/figure-it-out/components/tabs-page.js

@@ -0,0 +1,26 @@
+import {Component, Template, bootstrap} from 'angular2/angular2';
+import {Tabs, Tab} from 'ionic2/components/tabs/tabs2';
+
+/*
+@Route('tabs')
+*/
+@Component({
+  selector: 'tabs-page'
+})
+@Template({
+  inline: `
+  <ion-tabs>
+    <ion-tab title="One">
+       One content
+    </ion-tab>
+    <ion-tab title="Two">
+       Two content
+    </ion-tab>
+  </ion-tabs>
+  `,
+  directives: [Tabs, Tab]
+})
+export class TabsPage {
+  constructor() {
+  }
+}

src/components/app/examples/figure-it-out/index.html

@@ -0,0 +1,3 @@
+<my-app>
+  Loading...
+</my-app>

src/components/app/examples/figure-it-out/main.js

@@ -0,0 +1,33 @@
+import {DynamicComponent, Component, Template, bootstrap} from 'angular2/angular2';
+import {PrivateComponentLoader} from 'angular2/src/core/compiler/private_component_loader';
+import {PrivateComponentLocation} from 'angular2/src/core/compiler/private_component_location';
+
+@DynamicComponent({
+  selector: 'dynamic-component',
+  services: [PrivateComponentLoader, PrivateComponentLocation]
+})
+class MyDynamic {
+
+  constructor(
+    loader:PrivateComponentLoader, 
+    location:PrivateComponentLocation
+  ) {
+    loader.load(RedBgStyler, location);
+    loader.load(BlueTextStyler, location);
+  }
+}
+
+
+@Component({
+  selector: 'my-app'
+})
+@Template({
+  inline: `
+  <dynamic-component>Hello!</dynamic-component>
+  `,
+  directives: [MyDynamic],
+})
+class MyApp {
+}
+
+bootstrap(MyApp);

src/components/aside/examples/basic/index.html

@@ -1,37 +1,2 @@
 <aside-app>
-  <ion-aside-parent>
-    <ion-aside side="left">
-      LEFT
-      <p>...</p>
-      <p>...</p>
-      <p>...</p>
-      Side menu!
-    </ion-aside>
-    <ion-aside side="right">
-      RIGHT
-      <p>...</p>
-      <p>...</p>
-      <p>...</p>
-      Side menu!
-    </ion-aside>
-    <ion-aside side="top">
-      TOP
-      <p>...</p>
-      <p>...</p>
-      <p>...</p>
-      Side menu!
-    </ion-aside>
-    <ion-aside side="bottom">
-      BOTTOM
-      <p>...</p>
-      <p>...</p>
-      <p>...</p>
-      Side menu!
-    </ion-aside>
-  </ion-aside-parent>
-  <div class="content">
-    <button class="button" (click)="openLeft()">
-      Open Left Menu
-    </button>
-  </div>
 </aside-app>

src/components/aside/examples/basic/main.js

@@ -1,15 +1,54 @@
 import {Aside, AsideParent} from 'ionic2/components/aside/aside';
 import {Template, Component, bootstrap} from 'angular2/angular2';
 
+
 @Component({
   selector: 'aside-app'
 })
 @Template({
   // Inlined version of main.html
-  inline: `<content></content>`,
+  inline: `
+  <ion-aside-parent>
+    <ion-aside side="left">
+      LEFT
+      <p>...</p>
+      <p>...</p>
+      <p>...</p>
+      Side menu!
+    </ion-aside>
+    <ion-aside side="right">
+      RIGHT
+      <p>...</p>
+      <p>...</p>
+      <p>...</p>
+      Side menu!
+    </ion-aside>
+    <ion-aside side="top">
+      TOP
+      <p>...</p>
+      <p>...</p>
+      <p>...</p>
+      Side menu!
+    </ion-aside>
+    <ion-aside side="bottom">
+      BOTTOM
+      <p>...</p>
+      <p>...</p>
+      <p>...</p>
+      Side menu!
+    </ion-aside>
+  </ion-aside-parent>
+  <div class="content">
+    <button class="button" (click)="openLeft()">
+      Open Left Menu
+    </button>
+  </div>
+  `,
   directives: [Aside, AsideParent]
 })
 class AsideApp {
+  constructor() {
+  }
   openLeft() {
   }
 }

src/components/tabs/tabs2.js

@@ -0,0 +1,65 @@
+import {Component, Template, Foreach, Parent} from 'angular2/angular2';
+import {Inject} from 'angular2/di';
+
+@Component({
+  selector: 'ion-tabs'
+})
+@Template({
+  inline: `
+  <div class="content">
+    <content></content>
+  </div>
+  <div class="tabs">
+  <a *foreach="#tab in tabs" (click)="select(tab)" 
+    class="tab-item" 
+    [class.active]="tab.isSelected">
+      {{tab.title}}
+    </a>
+  </div>
+  `,
+  directives: [Foreach],
+})
+export class Tabs {
+  // constructor() {
+  //   this.tabs = [];
+  // }
+
+  addTab(tab: Tab) {
+    this.tabs.push(tab);
+    if (this.tabs.length === 1) {
+      this.select(tab);
+    }
+  }
+
+  select(tab: Tab) {
+    this.tabs.forEach(otherTab => {
+      otherTab.setSelected(false);
+    });
+    tab.setSelected(true);
+  }
+}
+
+@Component({
+  selector: 'ion-tab',
+  bind: {
+    title: 'title'
+  }
+})
+@Template({
+  inline: `
+  <div [hidden]="!isSelected">
+    <content></content>
+  </div>
+  `
+})
+export class Tab {
+  // constructor(
+  //   @Parent() tabs: Tabs
+  // ) {
+  //   tabs.addTab(this);
+  //   this.isSelected = false;
+  // }
+  setSelected(isSelected: Boolean) {
+    this.isSelected = isSelected;
+  }
+}

src/components/view/examples/test/index.html

@@ -0,0 +1 @@
+Loading...

src/components/view/examples/test/main.js

@@ -0,0 +1,38 @@
+import {Component, Template, bootstrap} from 'angular2/angular2';
+import {View} from 'ionic2/components/view/view';
+import {Content} from 'ionic2/components/content/content';
+import {ToolBar} from 'ionic2/components/toolbar/toolbar';
+
+@Component({
+  selector: '[ion-app]' 
+})
+@Template({
+  inline: `
+<ion-view view-title="!attr Title!">
+
+  <ion-view-title>
+    !ele Title!
+  </ion-view-title>
+
+  <ion-nav-items side="primary">
+    <button>p1</button>
+    <button>p2</button>
+    <button>p3</button>
+    <button>p4</button>
+  </ion-nav-items>
+
+  <ion-nav-items side="secondary">
+    <button>s1</button>
+    <button>s2</button>
+  </ion-nav-items>
+
+  <ion-content>
+    CONTENT!!
+  </ion-content>
+
+</ion-view>
+  `,
+  directives: [View, Content, ToolBar]
+})
+class MyApp {}
+bootstrap(MyApp);

src/util.js

@@ -1,5 +1,9 @@
 export function noop() {}
 
+export function clamp(min, n, max) {
+  return Math.max(min, Math.min(n, max));
+}
+
 export function extend(dest) {
   for (var i = 1, ii = arguments.length; i < ii; i++) {
     var source = arguments[i] || {};
@@ -12,23 +16,15 @@ export function extend(dest) {
   return dest;
 }
 
-export function clamp(min, n, max) {
-  return Math.max(min, Math.min(n, max));
-}
-
 export function defaults(dest) {
-  let extendObj = {};
   for (let i = arguments.length - 1; i >= 1; i--) {
     let source = arguments[i] || {};
     for (let key in source) {
-      if (!dest.hasOwnProperty(key) && !extendObj.hasOwnProperty(key)) {
-        extendObj[key] = source[key];
+      if (!dest.hasOwnProperty(key)) {
+        dest[key] = source[key];
       }
     }
   }
-  for (let key in extendObj) {
-    dest[key] = extendObj[key];
-  }
   return dest;
 }