e2e: make examples build per-platform

gulpfile.js

@@ -27,9 +27,12 @@ var traceur = require('gulp-traceur')
 
 require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig)
 
-gulp.task('default', ['build', 'lib', 'e2e'])
+gulp.task('default', ['clean'], function() {
+  gulp.run('build')
+})
+
+gulp.task('build', ['e2e', 'ionic-js', 'lib', 'sass'])
 
-gulp.task('build', ['sass', 'ionic-js'])
 gulp.task('lib', ['ng2', 'fonts', 'dependencies'])
 
 gulp.task('watch', ['default'], function() {
@@ -78,36 +81,89 @@ gulp.task('clean', function(done) {
   del([buildConfig.dist], done)
 })
 
-gulp.task('e2e', ['build'], function() {
+gulp.task('e2e', ['ionic-js', 'sass'], function() {
   var indexContents = _.template( fs.readFileSync('scripts/e2e/index.template.html') )({
     buildConfig: buildConfig
-  })
+  });
+  var platformJsTemplate = _.template( fs.readFileSync('scripts/e2e/platform.template.js') )
   var testTemplate = _.template( fs.readFileSync('scripts/e2e/e2e.template.js') )
 
-  return gulp.src(buildConfig.src.e2e)
+  var platforms = [
-    .pipe(rename(function(file) {
+    'android',
-      file.dirname = file.dirname.replace('/test/', '/')
+    'default',
+    'ios',
+  ]
+
+  return gulp.src(buildConfig.src.e2eTest)
+    .pipe(through2.obj(function(file, enc, next) {
+      var self = this
+      gulp.src(file.path + '/**/*', {
+        base: file.path
+      })
+        .pipe(gulpif(/main.html$/, processMainHtml()))
+        .on('data', function(file) {
+          if (file.stat && !file.stat.isFile()) return;
+
+          file.path = file.path.replace(/(\\|\/)test/, '')
+          file.base = path.join(__dirname, 'src', 'components');
+          var dirname = path.dirname(file.path)
+          var basename = path.basename(file.path);
+
+          platforms.forEach(function(platform) {
+            var platformDir = dirname + '-' + platform;
+            var platformFilePath = file.path.replace(dirname, platformDir);
+            self.push(new VinylFile({
+              path: platformFilePath,
+              base: file.base,
+              contents: file.contents.slice()
+            }));
+
+            // Add a new platform.js file beside each index.html
+            if (basename === 'index.html') {
+              self.push(new VinylFile({
+                path: platformFilePath.replace(/index.html$/, 'platform.js'),
+                base: file.base,
+                contents: new Buffer(platformJsTemplate({
+                  platform: platform
                 }))
-    .pipe(gulpif(/main.html$/, through2.obj(function(file, enc, next) {
+              }))
-      var indexClone = _.clone(file)
+            }
-      this.push(new VinylFile(_.assign(indexClone, {
+          })
+        })
+        .on('end', next)
+
+      function processMainHtml() {
+        return through2.obj(function(file, enc, next) {
+          this.push(new VinylFile({
+            base: file.base,
             contents: new Buffer(indexContents),
             path: file.path.replace(/main.html$/, 'index.html'),
-      })))
+          }))
           next(null, file)
-    })))
-    .pipe(gulpif(/.e2e.js$/, through2.obj(function(file, enc, next) {
-      var relativePath = path.dirname(file.path.replace(/^.*?src.components/, ''))
-      var contents = file.contents.toString()
-      contents = testTemplate({
-        contents: contents,
-        buildConfig: buildConfig,
-        relativePath: relativePath
         })
-      file.contents = new Buffer(contents)
+      }
-      next(null, file)
+    }))
-    })))
+    .pipe(gulp.dest(buildConfig.dist + '/e2e'));
-    .pipe(gulpif({ isFile: true }, gulp.dest(buildConfig.dist + '/e2e')))
+    // .pipe(gulpif(/main.html$/, through2.obj(function(file, enc, next) {
+    //   var indexClone = _.clone(file)
+    //   this.push(new VinylFile(_.assign(indexClone, {
+    //     contents: new Buffer(indexContents),
+    //     path: file.path.replace(/main.html$/, 'index.html'),
+    //   })))
+    //   next(null, file)
+    // })))
+    // .pipe(gulpif(/e2e.js$/, through2.obj(function(file, enc, next) {
+    //   var relativePath = path.dirname(file.path.replace(/^.*?src.components/, ''))
+    //   var contents = file.contents.toString()
+    //   contents = testTemplate({
+    //     contents: contents,
+    //     buildConfig: buildConfig,
+    //     relativePath: relativePath
+    //   })
+    //   file.contents = new Buffer(contents)
+    //   next(null, file)
+    // })))
+    // .pipe(gulpif({ isFile: true }, gulp.dest(buildConfig.dist + '/e2e')))
 })
 
 // Take es6 files from angular2's output, rename to js, and move to dist/lib/

scripts/build/config.js

@@ -2,9 +2,10 @@ module.exports = {
   dist: 'dist',
   distLib: 'dist/lib',
   src: {
-    test: ['src/**/test/*.spec.js'],
+    spec: ['src/**/test/*.spec.js'],
     js: ['src/**/*.js', '!src/**/test/**/*.js'],
-    e2e: ['src/components/*/test/*/**/*'],
+    e2eTest: ['src/components/*/test/*/'],
+    e2e: ['src/components/*/test/**/*'],
     html: 'src/**/*.html',
     scss: 'src/components/**/*.scss',
   },

scripts/e2e/index.template.html

@@ -19,6 +19,7 @@
         }
       })
     </script>
+    <script src="platform.js"></script>
 </head>
 <body ion-app>
 </body>

scripts/e2e/platform.template.js

@@ -0,0 +1,2 @@
+//TODO find a better override than window
+window.IONIC_PLATFORM = '<%= platform %>';

src/components/aside/aside.js

@@ -3,6 +3,22 @@ import {ComponentConfig} from 'ionic2/config/component-config'
 import * as types from 'ionic2/components/aside/extensions/types'
 import * as gestures from  'ionic2/components/aside/extensions/gestures';
 
+export let AsideConfig = new ComponentConfig('aside')
+
+AsideConfig.classes('side', 'type')
+
+AsideConfig.delegate('gesture')
+  .when({side: 'left'}, gestures.LeftAsideGesture)
+  .when({side: 'right'}, gestures.RightAsideGesture)
+  .when({side: 'top'}, gestures.TopAsideGesture)
+  .when({side: 'bottom'}, gestures.BottomAsideGesture)
+
+AsideConfig.delegate('type')
+  .when({type: 'overlay'}, types.AsideTypeOverlay)
+  .when({type: 'push'}, types.AsideTypePush)
+  .when({type: 'reveal'}, types.AsideTypeReveal)
+
+
 @Component({
   selector: 'ion-aside',
   bind: {
@@ -59,19 +75,3 @@ export class Aside {
     }
   }
 }
-
-export let AsideConfig = new ComponentConfig(Aside)
-
-AsideConfig.classes('side', 'type')
-
-AsideConfig.delegate('gesture')
-  .when({side: 'left'}, gestures.LeftAsideGesture)
-  .when({side: 'right'}, gestures.RightAsideGesture)
-  .when({side: 'top'}, gestures.TopAsideGesture)
-  .when({side: 'bottom'}, gestures.BottomAsideGesture)
-
-AsideConfig.delegate('type')
-  .when({type: 'overlay'}, types.AsideTypeOverlay)
-  .when({type: 'push'}, types.AsideTypePush)
-  .when({type: 'reveal'}, types.AsideTypeReveal)
-

src/components/checkbox/checkbox.html

@@ -0,0 +1 @@
+

src/components/checkbox/checkbox.js

@@ -0,0 +1,50 @@
+import {Component, Template, NgElement, PropertySetter} from 'angular2/angular2';
+import {ComponentConfig} from 'ionic2/config/component-config';
+
+export let CheckboxConfig = new ComponentConfig('checkbox');
+
+@Component({
+  selector: 'ion-checkbox',
+  bind: {
+    checked: 'checked'
+  },
+  events: {
+    'click': 'onClick'
+  },
+  services: [CheckboxConfig]
+})
+@Template({
+  inline: `
+  <div class="item-media media-checkbox">
+    <icon class="ion-ios-circle-outline checkbox-off"></icon>
+    <icon class="ion-ios-checkmark checkbox-on"></icon>
+  </div>
+
+  <div class="item-content">
+
+    <div class="item-title">
+      <content></content>
+    </div>
+
+  </div>`
+})
+export class Checkbox {
+  constructor(
+    @PropertySetter('attr.role') setRole: Function,
+    @PropertySetter('attr.aria-checked') setChecked: Function,
+    @PropertySetter('attr.aria-invalid') setInvalid: Function,
+    @PropertySetter('attr.aria-disabled') setDisabled: Function,
+    configFactory: CheckboxConfig,
+    element: NgElement
+  ) {
+    this.domElement = element.domElement;
+    this.domElement.classList.add('item');
+    this.config = configFactory.create(this);
+
+    setRole('checkbox');
+    setChecked('true')
+    setInvalid('false');
+    setDisabled('false');
+  }
+}
+

src/components/checkbox/extensions/ios.scss

@@ -5,7 +5,7 @@
 $checkbox-ios-color:          #007aff;
 
 
-.list-ios {
+.checkbox-ios {
 
   .media-checkbox {
     min-width: 20px;

src/components/checkbox/test/basic/main.html

@@ -5,85 +5,23 @@
 
     <div class="content" style="background: #efeff4">
 
-      <div class="list list-ios">
+      <ion-list>
+        <ion-list-header>Some Checkboxes</ion-list-header>
         
-        <div class="list-header">
+        <ion-checkbox>
-          iOS Checkboxes
-        </div>
-
-        <div class="list-content">
-
-
-
-          <div class="item checkbox ios-checkbox"
-               role="checkbox"
-               aria-checked="true"
-               aria-invalid="false">
-
-            <div class="item-media media-checkbox">
-              <icon class="ion-ios-circle-outline checkbox-off"></icon>
-              <icon class="ion-ios-checkmark checkbox-on"></icon>
-            </div>
-
-            <div class="item-content">
-
-              <div class="item-title">
           Apples
-              </div>
+        </ion-checkbox>
 
-            </div>
+        <ion-checkbox>
-
-          </div>
-
-
-
-          <div class="item checkbox ios-checkbox"
-               role="checkbox"
-               aria-checked="false"
-               aria-invalid="false">
-
-            <div class="item-media media-checkbox">
-              <icon class="ion-ios-circle-outline checkbox-off"></icon>
-              <icon class="ion-ios-checkmark checkbox-on"></icon>
-            </div>
-
-            <div class="item-content">
-
-              <div class="item-title">
           Bananas
-              </div>
+        </ion-checkbox>
 
-            </div>
+        <ion-checkbox>
-
-          </div>
-
-
-
-          <div class="item checkbox ios-checkbox"
-               role="checkbox"
-               aria-checked="true"
-               aria-invalid="false">
-
-            <div class="item-media media-checkbox">
-              <icon class="ion-ios-circle-outline checkbox-off"></icon>
-              <icon class="ion-ios-checkmark checkbox-on"></icon>
-            </div>
-
-            <div class="item-content">
-
-              <div class="item-title">
           Oranges
-              </div>
+        </ion-checkbox>
-
-            </div>
-
-          </div>
 
 
-
+      </ion-list>
-        </div>
-
-      </div>
 
     </div>
 

src/components/checkbox/test/basic/main.js

@@ -3,12 +3,13 @@ import {Component, Template} from 'angular2/angular2';
 import {View} from 'ionic2/components/view/view';
 import {Content} from 'ionic2/components/content/content';
 import {Icon} from 'ionic2/components/icon/icon';
-
+import {Checkbox} from 'ionic2/components/checkbox/checkbox';
+import {List} from 'ionic2/components/list/list';
 
 @Component({ selector: '[ion-app]' })
 @Template({
   url: 'main.html',
-  directives: [View, Content, Icon]
+  directives: [View, Content, Icon, Checkbox, List]
 })
 class IonicApp {
   constructor() {

src/components/list/list.js

@@ -1,7 +1,11 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
+import {ComponentConfig} from 'ionic2/config/component-config';
+
+export let ListConfig = new ComponentConfig('list');
 
 @Component({
-  selector: 'ion-list'
+  selector: 'ion-list',
+  services: [ListConfig]
 })
 @Template({
   inline: `
@@ -10,13 +14,18 @@ import {NgElement, Component, Template} from 'angular2/angular2'
     </header>
     <div class="list-content">
       <content></content>
-    </div>`
+    </div>
     <footer class="list-footer">
       <content select="ion-list-footer"></content>
-    </footer>`
+    </footer>
+  `
 })
 export class List {
-  constructor(@NgElement() ele:NgElement) {
+  constructor(
-    ele.domElement.classList.add('list')
+    configFactory: ListConfig,
+    element: NgElement
+  ) {
+    this.domElement = element.domElement;
+    configFactory.create(this);
   }
 }

src/config/component-config.js

@@ -11,9 +11,8 @@ MyConfig.delegate('gesture')
   .when({side: 'top'}, TopAsideGesture)
   .when({side: 'bottom'}, BottomAsideGesture)
 */
-export function ComponentConfig(ComponentConstructor) {
+export function ComponentConfig(componentCssName) {
-  let componentCssName = util.pascalCaseToDashCase(ComponentConstructor.name)
+  let platformName = platform.get().name;
-
   return class Config {
     static classes() {
       Config.classProperties || (Config.classProperties = [])
@@ -49,6 +48,7 @@ export function ComponentConfig(ComponentConstructor) {
 
     create(instance) {
       instance.domElement.classList.add(componentCssName)
+      instance.domElement.classList.add(`${componentCssName}-${platformName}`)
       for (let i = 0; i < (Config.classProperties || []).length; i++) {
         let propertyValue = instance[Config.classProperties[i]]
         instance.domElement.classList.add(`${componentCssName}-${propertyValue}`)

src/platform/platform.js

@@ -46,14 +46,15 @@ var ua = window.navigator.userAgent;
 platform.register({
   name: 'android',
   matcher() {
-    return /android/i.test(ua);
+    //TODO Make a better override than window
+    return window.IONIC_PLATFORM == 'android' || /android/i.test(ua);
   }
 });
 platform.register({
   name: 'ios',
   // For now always default to ios
   matcher() {
-    return true;
+    return window.IONIC_PLATFORM === 'ios';
   }
 });