demo: make examples require no build-step. more in README

.gitignore

@@ -1,6 +1,7 @@
 *~
 .DS_Store
 node_modules
+jspm_packages
 *.sw[mnpcod]
 *.log
 *.tmp

README.md

@@ -5,6 +5,15 @@
 - 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
+
+- `npm install -g jspm`
+- `jspm install`
+- `python -m SimpleHTTPServer .`
+- `open http://localhost:8000/playground/basic-example/`
+- Follow the structure found in playground/basic-example to
+  easily create more examples.
+
 #### Problems already
 
 - If we have a `.spec.js` file as a sibling of a js file, 

example-bootstrap.js

@@ -0,0 +1,25 @@
+var exampleReady = function() {
+  console.error('Implement exampleReady to bootstrap your app.\n' +
+              'For example: `function exampleReady() { System.import("./main"); }`');
+};
+
+(function() {
+
+  var loaded = 0;
+  var scripts = [
+    '/jspm-config.js',
+    'https://cdn.rawgit.com/angular/zone.js/v0.4.1/zone.js',
+    'https://cdn.rawgit.com/angular/zone.js/v0.4.1/long-stack-trace-zone.js',
+    'https://cdn.rawgit.com/robwormald/50b6b855a6ce21af6967/raw/aa9e1c0eed78defd890ccfcc50c4b4648d4d891d/angular2.js'
+  ];
+
+  scripts.forEach(function(src) {
+    var script = document.createElement('script');
+    script.onload = function() {
+      if (++loaded == scripts.length) exampleReady();
+    };
+    document.head.appendChild(script);
+    script.src = src;
+  });
+
+})();

gulpfile.js

@@ -4,7 +4,9 @@
 
 var gulp = require('gulp');
 var karma = require('karma').server;
+var path = require('path');
 var buildConfig = require('./scripts/build/config');
+var through2 = require('through2');
 
 var concat = require('gulp-concat');
 var debug = require('gulp-debug');
@@ -16,9 +18,9 @@ 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 template = require('gulp-template');
 
-gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles', 'demo']);
+gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']);
 
 gulp.task('watch', ['default'], function() {
   var http = require('http');
@@ -26,7 +28,7 @@ gulp.task('watch', ['default'], function() {
   var serveStatic = require('serve-static');
   var port = 9000;
 
-  gulp.watch(buildConfig.src.html, ['html', 'demo']);
+  gulp.watch(buildConfig.src.html, ['html']);
   gulp.watch(buildConfig.src.js, ['js']);
   gulp.watch(buildConfig.src.scss, ['sass']);
   gulp.watch(buildConfig.src.playgroundJs, ['playgroundJs']);
@@ -137,13 +139,3 @@ gulp.task('angular2', function () {
     .pipe(gulp.dest('dist/lib'));
 });
 
-
-gulp.task('demo', function () {
-  gulp.src(["./src/components/**/examples/**/index.html"])
-    .pipe(debug({title: 'Generating Demo:'}))
-    .pipe(wrap({ src: './scripts/examples/template/index.html'}))
-    .pipe(rename(function(file) {
-      file.dirname = file.dirname.replace("/examples/","/");
-    }))
-    .pipe(gulp.dest("./dist/examples"));
-});

jspm-config.js

@@ -0,0 +1,21 @@
+System.config({
+  traceurOptions: {
+    annotations: true,
+    types: true,
+    memberVariables: true
+  },
+  "paths": {
+    "*": "*.js",
+    "github:*": "/jspm_packages/github/*.js"
+  }
+});
+
+System.config({
+  "map": {
+    "angular/zone.js": "github:angular/zone.js@0.4.1",
+    "angular2": "github:angular/angular@master/dist/js/prod/es6/angular2",
+    "hammer": "github:hammerjs/hammer.js@2.0.4",
+    "ionic2": "/src"
+  }
+});
+

package.json

@@ -1,21 +1,15 @@
 {
   "name": "ionic2",
   "version": "0.0.0",
-  "standard": {
-    "ignore": [
-      "dist/**/*",
-      "scripts/**/*"
-    ]
-  },
   "devDependencies": {
     "connect": "^3.3.4",
     "del": "~1.1.1",
     "gulp": "~3.8.10",
     "gulp-concat": "~2.5.0",
     "gulp-debug": "~2.0.1",
-    "gulp-if": "^1.2.5",
     "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",
     "gulp-rename": "~1.2.0",
@@ -25,18 +19,33 @@
     "gulp-wrap": "~0.11.0",
     "karma": "^0.12.31",
     "serve-static": "~1.8.1",
+    "systemjs": "^0.11.3",
     "through2": "~0.6.3"
   },
   "dependencies": {
     "angular2": "2.0.0-alpha.13",
     "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",
+    "standard": "driftyco/standard#master",
     "systemjs": "~0.11.0",
+    "through2": "^0.6.3",
     "traceur": "0.0.87",
-    "zone.js": "0.4.1",
-    "standard": "driftyco/standard#master"
+    "zone.js": "0.4.1"
+  },
+  "jspm": {
+    "directories": {
+      "lib": "src",
+      "packages": "jspm_packages"
+    },
+    "configFile": "jspm-config.js",
+    "dependencies": {
+      "angular/zone.js": "github:angular/zone.js@0.4.1",
+      "hammer": "github:hammerjs/hammer.js@^2.0.4"
+    }
   }
 }

playground/basic-example/index.html

@@ -1,46 +1,23 @@
-<!--
-  EVERYTHING in index.html file will change
-  Don't feel like you have to learn all of this boilerplate. 
-  It's not important and will change.
--->
 <!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="/css/ionic.css" />
-
-    <!-- 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>
-
+    <link rel="stylesheet" href="/dist/css/ionic.css" />
+    <script src="/jspm_packages/system.js"></script>
+    <script src="/example-bootstrap.js"></script>
 </head>
-<body>
-    <div playground-main>
+<body my-app>
   Loading...
-    </div>
+</body>
+<script>
+function exampleReady() {
+  System.import('./main');
+}
+</script>
 </body>
 
-<!-- Application bootstrap logic -->
-<script>
-  System.baseURL = 'http://localhost:9000/';
-  System.register({
-    map: {
-      'ionic': '../ionic'
-    }
-  });
-  System.import('basic-example/main');
-</script>
-
 </html>
+
+

playground/basic-example/main.html

@@ -1,31 +1,4 @@
 <ion-aside-parent>
-  <ion-aside side="right">
-    Hello ...
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    Side menu!
-  </ion-aside>
-  <ion-aside side="bottom">
-    Hello ...
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    Side menu!
-  </ion-aside>
-  <ion-aside side="top">
-    Hello ...
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    <p>...</p>
-    Side menu!
-  </ion-aside>
   <ion-aside side="left">
     Hello ...
     <p>...</p>
@@ -35,14 +8,36 @@
     <p>...</p>
     Side menu!
   </ion-aside>
+  <!-- <ion-aside side="bottom"> -->
+  <!--   Hello ... -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   Side menu! -->
+  <!-- </ion-aside> -->
+  <!-- <ion-aside side="top"> -->
+  <!--   Hello ... -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   Side menu! -->
+  <!-- </ion-aside> -->
+  <!-- <ion-aside side="left"> -->
+  <!--   Hello ... -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   <p>...</p> -->
+  <!--   Side menu! -->
+  <!-- </ion-aside> -->
   <div class="content">
-    <ion-tabbar view-title="My Tabs"></ion-tabbar>
-    <ion-tabbar view-title="Tabs 2"></ion-tabbar>
-    <ion-tabbar view-title="Tabs 4"></ion-tabbar>
-
     <button (click)="showModal()">Show Modal</button>
 
-
     <ion-switch></ion-switch>
     <!--
     <ion-modal>

playground/basic-example/main.js

@@ -1,8 +1,8 @@
 import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
-import {Aside, AsideParent} from 'ionic/components';
+import {Aside, AsideParent} from 'ionic2/components';
 
-@Component({ selector: '[playground-main]' })
+@Component({ selector: '[my-app]' })
 @Template({
   url: 'main.html',
   directives: [Aside, AsideParent]

scripts/examples/examples.js

@@ -8,6 +8,4 @@ var wrap = require("gulp-wrap");
 
 module.exports = function(gulp, argv) {
 
-
-
-}
+};

scripts/examples/index.template.html

@@ -0,0 +1,33 @@
+<!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>

scripts/examples/template/index.html

@@ -4,10 +4,30 @@
   <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>
-<%= contents %>
+</body>
+<script>
+  System.register({
+    map: {
+      'ionic': '/ionic'
+    }
+  });
+  System.import('main.js'):
 </body>
 </html>

src/components.js

@@ -1,2 +1,7 @@
-export * from './components/aside/aside'
-import './components/aside/behaviors/direction/direction'
+// export * from './components/app/app';
+
+export * from './components/aside/aside';
+import './components/aside/behaviors/direction/direction';
+
+// export * from './components/switch';
+

src/components/aside/aside.js

@@ -10,19 +10,19 @@ export var asideConfig = new IonConfig('aside');
 asideConfig.set({
   side: 'left',
   dragThreshold: 50
-});
+})
 
 @Component({
   selector: 'ion-aside',
   bind: {
     side: 'side',
     dragThreshold: 'dragThreshold'
-  },
+  }
 })
 @Template({
   inline: `<content></content>`
 })
-export class Aside extends Ion {
+export class Aside {
   constructor(
     @Parent() asideParent: AsideParent,
     @NgElement() element: NgElement

src/components/aside/behaviors/direction/direction.js

@@ -1,4 +1,5 @@
 import {asideConfig} from '../../aside';
+import Hammer from 'hammer';
 import * as util from '../../../../util';
 
 asideConfig
@@ -35,6 +36,7 @@ asideConfig
   .behavior(function() {
     if (this.side !== 'left') return;
 
+
     this.domElement.classList.add('left');
     this.gesture.options({
       direction: Hammer.DIRECTION_HORIZONTAL

src/core/gestures/gesture.js

@@ -1,4 +1,5 @@
 import * as util from '../../util';
+import Hammer from 'hammer';
 
 export class Gesture {
   constructor(element, opts = {}) {