bundle demos with CJS

demos/component-docs/helpers.ts

@@ -1,4 +1,4 @@
-import {ActionSheetPage} from 'actionSheet/actionSheet';
+import {ActionSheetPage} from './actionSheet/actionSheet';
 
 import {ButtonsPage,
         BlockButtonsPage,
@@ -9,18 +9,18 @@ import {ButtonsPage,
         FabPage,
         ButtonSizesPage,
         IconButtonsPage,
-        ButtonsInComponentsPage} from 'buttons/buttons';
+        ButtonsInComponentsPage} from './buttons/buttons';
 
-import {CardsPage} from 'cards/cards';
-import {FormsPage} from 'forms/forms';
-import {IconsPage} from 'icons/icons';
-import {ListsPage} from 'lists/lists';
-import {MenusPage} from 'menus/menus';
-import {ModalsPage} from 'modals/modals';
-import {NavigationPage} from 'navigation/navigation';
-import {PopupsPage} from 'popups/popups';
-import {SlidesPage} from 'slides/slides';
-import {TabsPage} from 'tabs/tabs';
+import {CardsPage} from './cards/cards';
+import {FormsPage} from './forms/forms';
+import {IconsPage} from './icons/icons';
+import {ListsPage} from './lists/lists';
+import {MenusPage} from './menus/menus';
+import {ModalsPage} from './modals/modals';
+import {NavigationPage} from './navigation/navigation';
+import {PopupsPage} from './popups/popups';
+import {SlidesPage} from './slides/slides';
+import {TabsPage} from './tabs/tabs';
 
 
 export function toTitleCase(str) {
@@ -52,5 +52,3 @@ export function getPageFor(hash) {
         'tabs': TabsPage
     }[hash]
 }
-
-

demos/component-docs/index.ts

@@ -1,7 +1,7 @@
 import {App, IonicApp, IonicPlatform, ActionSheet} from 'ionic/ionic';
 import {Page, IonicConfig, Events} from 'ionic/ionic';
-import {ActionSheetPage} from 'actionSheet/actionSheet';
-import * as helpers from 'helpers';
+import {ActionSheetPage} from './actionSheet/actionSheet';
+import * as helpers from './helpers';
 
 
 @App({

demos/component-docs/menus/menus.ts

@@ -1,6 +1,6 @@
 import {App, IonicApp, Page, NavController, NavParams} from 'ionic/ionic';
 import {Page, Events} from 'ionic/ionic';
-import * as helpers from 'helpers';
+import * as helpers from './helpers';
 
 @Page({
   templateUrl: 'menus/menu-home.html'
@@ -54,5 +54,3 @@ export class MenusPage {
     this.nav.setRoot(page.component);
   }
 }
-
-

demos/component-docs/modals/modals.ts

@@ -1,5 +1,5 @@
 import {App, IonicApp, Animation, Modal, NavController, Page, Events} from 'ionic/ionic';
-import * as helpers from 'helpers';
+import * as helpers from './helpers';
 
 
 @Page({

demos/component-docs/navigation/navigation.ts

@@ -1,6 +1,6 @@
 import {NavController, NavParams} from 'ionic/ionic';
 import {Page, Events} from 'ionic/ionic';
-import * as helpers from 'helpers';
+import * as helpers from './helpers';
 
 @Page({
   templateUrl: 'navigation/navigation-details.html'
@@ -30,7 +30,7 @@ class NavigationDetailsPage {
     templateUrl: 'navigation/navigation.html',
 })
 export class NavigationPage {
-  
+
   constructor(nav: NavController) {
       this.nav = nav;
   }
@@ -39,4 +39,4 @@ export class NavigationPage {
     this.nav.push(NavigationDetailsPage, { name: item });
   }
 
-}
+}

demos/component-docs/tabs/tabs.ts

@@ -1,6 +1,6 @@
 import {NavController, NavParams} from 'ionic/ionic';
 import {Page, ViewController} from 'ionic/ionic';
-import * as helpers from 'helpers';
+import * as helpers from './helpers';
 
 @Page({
   template: 'Hello 1',
@@ -19,4 +19,4 @@ export class TabsPage {
   constructor(nav: NavController, params: NavParams) {
     this.nav = nav;
   }
-}
+}

gulpfile.js

@@ -378,7 +378,7 @@ gulp.task('src', function(done){
 
 require('./scripts/docs/gulp-tasks')(gulp, flags)
 
-gulp.task('demos', function(){
+gulp.task('build.demos', function(){
   var gulpif = require('gulp-if');
   var lazypipe = require('lazypipe');
   var _ = require('lodash');
@@ -387,7 +387,8 @@ gulp.task('demos', function(){
 
   var buildTest = lazypipe()
     .pipe(tsc, tscOptions, null, tscReporter)
-    .pipe(babel, getBabelOptions('demos'))
+    .pipe(babel, getBabelOptions('demos', 'common'))
+    // .pipe(babel, getBabelOptions('demos'))
 
   var baseIndexTemplate = _.template(fs.readFileSync('scripts/demos/index.template.html'))();
   var docsIndexTemplate = _.template(fs.readFileSync('scripts/demos/docs.index.template.html'))();
@@ -410,16 +411,54 @@ gulp.task('demos', function(){
         path: path.join(path.dirname(file.path), 'index.html'),
       }));
       next(null, file);
-
-
     });
   }
-})
+});
+
+gulp.task('bundle.demos', ['build.demos'], function(done){
+  var glob = require('glob');
+  var webpack = require('webpack');
+  var path = require('path');
+  var _ = require('lodash');
+
+  var numWebpacks = 0;
+  glob('dist/demos/**/index.js', function(err, files){
+    files.forEach(function(file){
+      var config = require('./scripts/demos/webpack.config.js');
+
+      // add our bundle entry, removing previous if necessary
+      // since config is cached
+      if (config.entry.length > 5) {
+        config.entry.pop();
+      }
+      config.entry.push('./' + file);
+      config.output = {
+        filename: path.dirname(file) + '/bundle.js'
+      }
+
+      // pretty sure this is a race, but it works
+      numWebpacks++;
+      webpack(config, function(err, stats){
+        // var statsOptions = {
+        //   'colors': true,
+        //   'modules': true,
+        //   'chunks': false,
+        //   'exclude': ['node_modules'],
+        //   'errorDetails': true
+        // }
+        // console.log(stats.toString(statsOptions));
+        if (--numWebpacks === 0) done();
+      })
+    })
+  });
+});
+
+gulp.task('demos', ['bundle.demos']);
 
 gulp.task('demos:all', ['demos'], function() {
    return gulp
     .src('dist/demos/component-docs/**/*')
-    .pipe(gulp.dest('dist/ionic-site/docs/v2/components/demo/')) 
+    .pipe(gulp.dest('dist/ionic-site/docs/v2/components/demo/'))
 });
 
 gulp.task('publish', function(done) {

package.json

@@ -63,6 +63,7 @@
     "through2": "^0.6.3",
     "typescript": "1.6.2",
     "vinyl": "^0.4.6",
+    "webpack": "^1.12.2",
     "yargs": "^3.6.0"
   }
 }

scripts/demos/docs.index.template.html

@@ -14,8 +14,9 @@
   <ion-app>
     <ion-loading-icon></ion-loading-icon>
   </ion-app>
+  <script src="bundle.js"></script>
 
-  <script src="/js/ionic.bundle.js"></script>
+  <!-- <script src="/js/ionic.bundle.js"></script>
 
   <script>
     System.config({
@@ -27,7 +28,7 @@
       }
     })
     System.import("index");
-  </script>
+  </script> -->
 
 </body>
 </html>

scripts/demos/index.template.html

@@ -14,7 +14,8 @@
     <ion-loading-icon></ion-loading-icon>
   </ion-app>
 
-  <script src="../../js/ionic.bundle.js"></script>
+  <script src="bundle.js"></script>
+  <!-- <script src="../../js/ionic.bundle.js"></script>
 
   <script>
     System.config({
@@ -26,7 +27,7 @@
       }
     })
     System.import("index");
-  </script>
+  </script> -->
 
 </body>
 </html>

scripts/demos/webpack.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  entry: [
+    "zone.js",
+    "reflect-metadata",
+    "angular2/angular2",
+    "ionic/ionic",
+    "web-animations.min",
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loader: "awesome-typescript-loader",
+        include: /\/demos\//,
+        exclude: /node_modules/
+       }
+    ]
+  },
+  resolve: {
+    modulesDirectories: [
+      "node_modules",
+      "dist/src/es5/common", // ionic-framework npm package (stable)
+      "dist/js" // for web-animations polyfill
+    ],
+    extensions: ["", ".js", ".ts"]
+  }
+};