remove jspm, make e2e paths relative

README.md

@@ -7,19 +7,13 @@
 
 #### Building & Running
 
-- `npm install -g jspm`
-- `jspm init`
 - `gulp watch`
-- `python -m SimpleHTTPServer .`
-- `open http://localhost:9000/dist/examples/aside/basic/index.html`
+- `python -m SimpleHTTPServer ./dist`
+- `open http://localhost:9000/e2e/aside/basic/index.html`
 - Follow the structure found in src/components/aside/examples/basic
   to create more examples.
-
-#### Problems already
-
-- If we have a `.spec.js` file as a sibling of a js file,
-  System will make that an export and ignore the `.js` file.
-  There's probably a setting in System.js somewhere to fix this.
+  * The biggest thing to remember: your app has to import its dependencies with the `app/` prefix. 
+    For example `import {Apple} from 'app/apple';` would import apple.js in your example app.
 
 #### Build
 

gulpfile.js

@@ -2,81 +2,94 @@
 // Mostly stolen from https://github.com/pkozlowski-opensource/ng2-play
 /////
 
-var SystemJsBuilder = require('systemjs-builder');
-var exec = require('child_process').exec;
-var gulp = require('gulp');
-var karma = require('karma').server;
-var path = require('path');
-var buildConfig = require('./scripts/build/config');
-var through2 = require('through2');
+var SystemJsBuilder = require('systemjs-builder')
+var exec = require('child_process').exec
+var gulp = require('gulp')
+var karma = require('karma').server
+var path = require('path')
+var buildConfig = require('./scripts/build/config')
 
-var concat = require('gulp-concat');
-var debug = require('gulp-debug');
-var del = require('del');
-var gulpif = require('gulp-if');
-var karma = require('karma').server;
-var plumber = require('gulp-plumber');
-var rename = require('gulp-rename');
-var sass = require('gulp-sass');
-var shell = require('gulp-shell');
-var traceur = require('gulp-traceur');
+var argv = require('yargs').argv
+var concat = require('gulp-concat')
+var debug = require('gulp-debug')
+var del = require('del')
+var gulpif = require('gulp-if')
+var karma = require('karma').server
+var plumber = require('gulp-plumber')
+var rename = require('gulp-rename')
+var sass = require('gulp-sass')
+var shell = require('gulp-shell')
+var traceur = require('gulp-traceur')
 var wrap = require('gulp-wrap');
-var argv = require('yargs').argv;
 
-gulp.task('default', ['sass', 'fonts', 'e2e', 'ng2']);
+gulp.task('default', ['build', 'lib', 'e2e'])
+
+gulp.task('build', ['sass', 'js']);
+gulp.task('lib', ['ng2', 'fonts', 'dependencies']);
 
 gulp.task('watch', ['default'], function() {
-  gulp.watch(buildConfig.src.scss, ['sass']);
+  gulp.watch(buildConfig.src.scss, ['sass'])
   gulp.watch([].concat(
     buildConfig.src.js, buildConfig.src.e2e, buildConfig.src.html,
     'scripts/e2e/index.template.html'
-  ), ['e2e']);
-});
+  ), ['e2e'])
+})
 
 gulp.task('karma', function() {
-  return karma.start({ configFile: __dirname + '/scripts/test/karma.conf.js' });
-});
+  return karma.start({ configFile: __dirname + '/scripts/test/karma.conf.js' })
+})
 gulp.task('karma-watch', function() {
-  return karma.start({ configFile: __dirname + '/scripts/test/karma-watch.conf.js' });
+  return karma.start({ configFile: __dirname + '/scripts/test/karma-watch.conf.js' })
+})
+
+gulp.task('dependencies', function() {
+  return gulp.src(buildConfig.dependencies)
+    .pipe(gulp.dest(buildConfig.distLib));
 });
 
+gulp.task('js', function() {
+  return gulp.src('src/**/*.js')
+    .pipe(gulp.dest(buildConfig.distLib + '/ionic2'))
+})
+
 gulp.task('sass', function(done) {
   gulp.src('src/components/app/ionic.scss')
     .pipe(sass({
       onError: function(err) {
-        console.log(err);
+        console.log(err)
       }
     }))
     .pipe(gulp.dest('dist/css'))
-    .on('end', done);
-});
+    .on('end', done)
+})
 
 gulp.task('fonts', function(done) {
   gulp.src('src/components/icon/fonts/**/*')
       .pipe(gulp.dest('dist/fonts'))
-      .on('end', done);
-});
+      .on('end', done)
+})
 
 gulp.task('clean', function(done) {
-  del([buildConfig.dist], done);
-});
+  del([buildConfig.dist], done)
+})
 
-gulp.task('e2e', ['sass'], function() {
-  var e2eSrc = path.join(__dirname, 'src/components/**/test/**/*');
-  var templateSrc = path.join(__dirname, 'scripts/e2e/index.template.html');
-  var e2eDest = path.join(__dirname, 'dist/e2e/');
+gulp.task('e2e', ['build'], function() {
+  var e2eSrc = path.join(__dirname, 'src/components/**/test/**/*')
+  var templateSrc = path.join(__dirname, 'scripts/e2e/index.template.html')
+  var e2eDest = path.join(__dirname, 'dist/e2e/')
 
   return gulp.src(e2eSrc)
-    .pipe(gulpif(/index.html/, wrap({
-      src: templateSrc
-    })))
+    .pipe(gulpif(/index.html/, wrap(
+      { src: templateSrc },
+      { buildConfig: buildConfig }
+    )))
     .pipe(rename(function(file) {
-      file.dirname = file.dirname.replace('/test/', '/');
+      file.dirname = file.dirname.replace('/test/', '/')
     }))
-    .pipe(gulpif({ isFile: true }, gulp.dest(e2eDest)));
-});
+    .pipe(gulpif({ isFile: true }, gulp.dest(e2eDest)))
+})
 
-require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig);
+require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig)
 
 // Take es6 files from angular2's output, rename to js, and move to dist/lib/
 gulp.task('ng2-rename', function(done) {
@@ -84,27 +97,28 @@ gulp.task('ng2-rename', function(done) {
     if (err) {
       console.log('You have not installed angular master.\n' +
                   'Please run ./scripts/build/update-angular.sh.\n' +
-                  'Aborting.');
-      return process.exit(1);
+                  'Aborting.')
+      return process.exit(1)
     }
     gulp.src([
       'node_modules/angular-master/dist/js/dev/es6/{angular2,rtts_assert}/**/*.es6'
     ])
       .pipe(rename({ extname: '.js' }))
-      .pipe(gulp.dest('dist/lib'))
-      .on('end', done);
-  });
-});
+      .pipe(gulp.dest(buildConfig.distLib))
+      .on('end', done)
+  })
+})
 
+// We use SystemJsBuilder to build ng2 because it will properly 
 gulp.task('ng2', ['ng2-rename'], function() {
-  var builder = new SystemJsBuilder();
+  var builder = new SystemJsBuilder()
   builder.config({
-    baseURL: 'dist/lib',
+    baseURL: buildConfig.distLib,
     traceurOptions: buildConfig.traceurOptions,
     map: {
       rx: __dirname + '/node_modules/rx'
     }
-  });
-  return builder.build('angular2/angular2', 'dist/lib/angular2.js');
-});
+  })
+  return builder.build('angular2/angular2', buildConfig.distLib + '/angular2.js')
+})
 

jspm-config.js

@@ -1,23 +0,0 @@
-System.config({
-  'paths': {
-    '*': '*.js',
-    'angular2/*': '/dist/lib/angular2/*.js'
-  },
-  'traceurOptions': {
-    'sourceMaps': true,
-    'annotations': true,
-    'types': true,
-    'script': false,
-    'memberVariables': true,
-    'modules': 'instantiate'
-  }
-});
-
-System.config({
-  'map': {
-    'hammer': '/node_modules/hammerjs/hammer',
-    'rx': '/node_modules/rx',
-    'ionic2': '/src',
-  }
-});
-

package.json

@@ -9,50 +9,26 @@
     "gulp": "~3.8.10",
     "gulp-concat": "~2.5.0",
     "gulp-debug": "~2.0.1",
-    "gulp-eslint": "^0.7.0",
     "gulp-if": "^1.2.5",
-    "gulp-jscs": "^1.4.0",
     "gulp-plumber": "^1.0.0",
     "gulp-rename": "~1.2.0",
     "gulp-sass": "^1.3.3",
-    "gulp-shell": "^0.4.0",
     "gulp-traceur": "0.16.*",
-    "gulp-util": "^3.0.4",
     "gulp-wrap": "^0.11.0",
     "karma": "^0.12.31",
+    "karma-chrome-launcher": "^0.1.7",
+    "karma-jasmine": "^0.3.5",
     "lodash": "^2.4.1",
-    "lodash.template": "^2.4.1",
     "node-uuid": "^1.4.1",
-    "q": "^1.2.0",
-    "request": "^2.53.0",
-    "serve-static": "~1.8.1",
     "systemjs": "^0.11.3",
     "systemjs-builder": "^0.9.1",
-    "through2": "~0.6.3",
     "traceur-runtime": "0.0.59",
     "yargs": "^3.6.0"
   },
   "dependencies": {
-    "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",
     "rx": "^2.4.6",
-    "systemjs": "~0.11.0",
     "traceur": "0.0.87",
     "zone.js": "0.4.1"
-  },
-  "jspm": {
-    "directories": {
-      "lib": "src",
-      "packages": "jspm_packages"
-    },
-    "configFile": "jspm-config.js",
-    "dependencies": {
-      "none": "none"
-    }
   }
 }

scripts/build/config.js

@@ -1,12 +1,33 @@
 module.exports = {
   dist: 'dist',
+  distLib: 'dist/lib',
   src: {
     test: ['src/**/test/*.spec.js'],
-    js: ['src/**/*.js', '!src/**/test/**/*'],
+    js: ['src/**/*.js', '!src/**/test/**/*.js'],
     e2e: ['src/**/test/*/**/*'],
     html: 'src/**/*.html',
     scss: 'src/components/**/*.scss',
   },
+
+  dependencies: [
+    'node_modules/traceur/bin/traceur.js',
+    'node_modules/es6-module-loader/dist/es6-module-loader.js',
+    'node_modules/systemjs/dist/system.js',
+    'node_modules/zone.js/zone.js',
+    'node_modules/zone.js/long-stack-trace-zone.js',
+    'node_modules/hammerjs/hammer.js',
+    'node_modules/rx/dist/rx.all.js',
+  ],
+  scripts: [
+    'traceur.js',
+    'es6-module-loader.js',
+    'system.js',
+    'zone.js',
+    'long-stack-trace-zone.js',
+    'hammer.js',
+    'angular2.js'
+  ],
+
   traceurOptions: {
     'sourceMaps': true,
     'annotations': true,
@@ -16,4 +37,4 @@ module.exports = {
     'modules': 'instantiate'
   },
   protractorPort: 8876
-};
+}

scripts/e2e/index.template.html

@@ -1,21 +1,30 @@
+<% var PREFIX = '../../..'; %>
 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
 
     <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="/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>
+    <link rel="stylesheet" href="<%= PREFIX %>/css/ionic.css" />
+    <% buildConfig.scripts.forEach(function(src) { %>
+      <script src="<%= PREFIX %>/lib/<%= src %>"></script>
+    <% }); %>
+    <script>
+      System.config({
+        baseURL: '<%= PREFIX %>/lib',
+        traceurOptions: <%= JSON.stringify(buildConfig.traceurOptions) %>,
+        map: {
+          'app': location.pathname.replace(/\/$/,''),
+          'rx/dist/rx.all': 'rx.all',
+        }
+      })
+    </script>
 </head>
 <body ion-app>
   <%= contents %>
 </body>
 <script>
-System.import('./main');
+System.import('app/main');
 </script>
 </body>
 

src/components/aside/extensions/gestures/gestures.js

@@ -4,14 +4,15 @@ import {SlideEdgeGesture} from '../../../../core/gestures/slide-edge-gesture';
 
 class AsideGesture extends SlideEdgeGesture {
   constructor(aside: Aside) {
-    this.aside = aside;
     // TODO figure out the sliding element, dont just use the parent
-    this.slideElement = aside.domElement.parentNode;
-    super(this.slideElement, {
+    let slideElement = aside.domElement.parentNode;
+    super(slideElement, {
       direction: (aside.side === 'left' || aside.side === 'right') ? 'x' : 'y',
       edge: aside.side,
       threshold: 75
     });
+    this.aside = aside;
+    this.slideElement = slideElement;
     this.listen();
   }
   

src/components/modal/modal.js

@@ -11,7 +11,7 @@ import {Ion} from '../ion';
       <div class="modal-wrapper"><content></content></div>
     </div>`
 })
-class ModalWrapper extends Ion {
+class ModalWrapper {
   constructor(@NgElement() el : NgElement) {
     this.element = el
     console.log('element', el)
@@ -35,7 +35,7 @@ class ModalWrapper extends Ion {
       </div>
     </ion-modal-wrapper>`
 })
-export class Modal extends Ion {
+export class Modal {
   //compiler: Compiler;
 
   constructor(compiler: Compiler, @NgElement() el : NgElement) {

src/components/nav-view/nav-view.js

@@ -1,6 +1,6 @@
 import {Ion} from '../ion'
 
-export class NavView extends Ion {
+export class NavView {
 
   // viewControllers: Stack<ViewController>;
   //   visibleViewController: ViewController;

src/components/switch/switch.js

@@ -1,5 +1,4 @@
 import {NgElement, Component, Template} from 'angular2/angular2';
-import {Ion} from '../ion';
 
 @Component({
   selector: 'ion-switch',
@@ -20,7 +19,7 @@ import {Ion} from '../ion';
 </div>
 `
 })
-export class Switch extends IonElement {
+export class Switch {
   constructor(
     @NgElement() el : NgElement,
     @EventEmitter('change') emitChange: Function

src/components/tabs/tabs.js

@@ -1,6 +1,5 @@
 import {NgElement, Component, Template, Parent} from 'angular2/angular2';
 import {History} from '../../history';
-import {Ion} from '../ion';
 import {View} from 'ionic/components/view/view';
 
 
@@ -26,7 +25,7 @@ import {View} from 'ionic/components/view/view';
     </div>
     `
 })
-export class Tabs extends Ion {
+export class Tabs {
 
   constructor(@NgElement() ele:NgElement) {
     ele.domElement.classList.add('pane');

src/core/gestures/slide-edge-gesture.js

@@ -7,10 +7,10 @@ export class SlideEdgeGesture extends SlideGesture {
       edge: 'left',
       threshold: 50
     });
+    super(element, opts);
     // Can check corners through use of eg 'left top'
     this.edges = opts.edge.split(' ');
     this.threshold = opts.threshold;
-    super(element, opts);
   }
 
   canStart(ev) {

src/core/gestures/slide-gesture.js

@@ -3,8 +3,8 @@ import * as util from '../../util';
 
 export class SlideGesture extends DragGesture {
   constructor(element, opts = {}) {
-    this.element = element;
     super(element, opts);
+    this.element = element;
   }
 
   /*