Merge pull request #60 from Gaurav0/bower

Enable loading of external assets through a "twiddle.json"

app/components/dummy-demo-app.js

@@ -16,13 +16,30 @@ export default Em.Component.extend(ResizeMixin, {
     ifrm.id=this.iframeId;
     this.element.appendChild(ifrm);
 
-    var vendorjs = '<script type="text/javascript" src="assets/vendor.js"></script>';
+    var markup =
+      '<script type="text/javascript" src="assets/bower_components/loader.js/loader.js"></script>';
+
+    var deps = this.get('twiddleJson').dependencies;
+    Object.keys(deps).forEach(function(depKey) {
+      var dep = deps[depKey];
+      if (dep.substr(dep.lastIndexOf(".")) === '.css') {
+        markup += '<link rel="stylesheet" type="text/css" href="%@">'.fmt(dep);
+      } else {
+        markup += '<script type="text/javascript" src="%@"></script>'.fmt(dep);
+      }
+    });
+
+    markup +=
+      '<script type="text/javascript" src="assets/bower_components/ember-cli-shims/app-shims.js"></script>' +
+      '<script type="text/javascript" src="assets/bower_components/ember-resolver/dist/modules/ember-resolver.js"></script>' +
+      '<script type="text/javascript" src="assets/bower_components/ember-load-initializers/ember-load-initializers.js"></script>';
+
     var appjs = '<script type="text/javascript">%@</script>'.fmt(this.get('code'));
     var appCss = '<style type="text/css">%@</style>'.fmt(this.get('styles'));
 
     ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
     ifrm.document.open();
-    ifrm.document.write(vendorjs);
+    ifrm.document.write(markup);
     ifrm.document.write(appCss);
     ifrm.document.write(appjs);
     ifrm.document.close();

app/gist/controller.js

@@ -124,6 +124,11 @@ export default Em.Controller.extend({
         filePath = 'router.js';
         canChangePath = false;
       }
+      else if(type==='twiddle.json') {
+        template = '{\n  "dependencies": {\n    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js",\n    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember.js",\n    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js"\n  }\n}';
+        filePath = 'twiddle.json';
+        canChangePath = false;
+      }
 
       if (canChangePath) {
         filePath = prompt('File path', filePath);

app/gist/new/route.js

@@ -27,6 +27,10 @@ export default GistRoute.extend({
       filePath: 'router.js',
       content: 'import Ember from \'ember\';\nvar Router = Ember.Router.extend({\n  location: \'none\'\n});\n\nRouter.map(function() {\n});\n\nexport default Router;\n'
     }));
+    model.get('files').pushObject(this.store.createRecord('gistFile', {
+      filePath: 'twiddle.json',
+      content: '{\n  "dependencies": {\n    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js",\n    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember.js",\n    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js"\n  }\n}'
+    }));
 
     return model;
   }

app/gist/template.hbs

@@ -17,6 +17,7 @@
             <li><a {{action 'addFile' 'route'}}>Route</a></li>
             <li><a {{action 'addFile' 'template'}}>Template</a></li>
             <li><a {{action 'addFile' 'router'}}>Router</a></li>
+            <li><a {{action 'addFile' 'twiddle.json'}}>twiddle.json</a></li>
           </ul>
         </li>
         {{#if activeEditor}}
@@ -119,7 +120,7 @@
     <div class="url-bar">
       <div>{{applicationUrl}}</div>
     </div>
-    {{dummy-demo-app code=buildOutput.code styles=buildOutput.styles}}
+    {{dummy-demo-app code=buildOutput.code styles=buildOutput.styles twiddleJson=buildOutput.twiddleJson}}
   </div>
 
 </div>

app/services/ember-cli.js

@@ -32,6 +32,8 @@ export default Em.Service.extend({
             case '.css':
               cssOut.push(this.compileCss(file.get('content'), file.get('nameWithModule')));
               break;
+            case '.json':
+              break;
           }
         }
         catch(e) {
@@ -57,7 +59,15 @@ export default Em.Service.extend({
       // Add boot code
       contentForAppBoot(out, {modulePrefix:'demo-app'});
 
-      resolve(Ember.Object.create({ code: out.join('\n'), styles: cssOut.join('\n') }));
+      var twiddleJson = gist.get('files').findBy('nameWithModule', 'demo-app/twiddle');
+      if (twiddleJson) {
+        twiddleJson = twiddleJson.get('content');
+      } else {
+        twiddleJson = '{\n  "dependencies": {\n    "jquery": "assets/bower_components/jquery/dist/jquery.js",\n    "ember": "assets/bower_components/ember/ember.js",\n    "ember-data": "assets/bower_components/ember-data/ember-data.js"\n  }\n}';
+      }
+      twiddleJson = JSON.parse(twiddleJson);
+
+      resolve(Ember.Object.create({ code: out.join('\n'), styles: cssOut.join('\n'), twiddleJson: twiddleJson }));
     });
 
     return promise;

ember-cli-build.js

@@ -2,6 +2,8 @@
 module.exports = function() {
   var fs = require('fs');
   var EmberApp = require('ember-cli/lib/broccoli/ember-app');
+  var funnel = require('broccoli-funnel');
+  var mergeTrees = require('broccoli-merge-trees');
   var env = EmberApp.env();
   var isProductionLikeBuild = ['production', 'staging'].indexOf(env) > -1;
   var prepend = null;
@@ -73,5 +75,10 @@ module.exports = function() {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
 
-  return app.toTree();
+  var bowerTree = funnel('bower_components', {
+    srcDir: "/",
+    destDir: "/assets/bower_components"
+  });
+
+  return mergeTrees([app.toTree(), bowerTree]);
 };

package.json

@@ -19,13 +19,14 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "babel": "^5.0.0",
     "broccoli-asset-rev": "^2.0.2",
+    "broccoli-funnel": "0.2.3",
+    "broccoli-merge-trees": "0.2.2",
     "broccoli-sass": "^0.6.6",
     "dc-tabs": "0.1.0",
     "dedent": "^0.4.0",
     "ember-autoresize": "0.4.1",
-    "ember-browserify": "^1.0.0",
+    "ember-browserify": "^1.0.1",
     "ember-cli": "1.13.1",
     "ember-cli-app-version": "0.4.0",
     "ember-cli-babel": "^5.0.0",
@@ -50,5 +51,8 @@
     "ember-notify": "3.3.4",
     "ivy-codemirror": "inDream/ivy-codemirror",
     "torii": "^0.3.5"
+  },
+  "dependencies": {
+    "babel": "^5.0.0"
   }
 }

tests/acceptance/gist-test.js

@@ -40,20 +40,13 @@ test('deleting a gist loaded in two columns', function(assert) {
       assert.equal(find('.dropdown-toggle:contains(No file selected)').length, 2, 'Shows message when no file is selected.');
     });
 
-    click(firstFilePicker);
-    click(anyFile);
-    click(fileMenu);
-    click(deleteAction);
-
-    click(firstFilePicker);
-    click(anyFile);
-    click(fileMenu);
-    click(deleteAction);
-
-    click(firstFilePicker);
-    click(anyFile);
-    click(fileMenu);
-    click(deleteAction);
+    // TODO: Replace brittle for loop test code with "while there are files left..."
+    for (var i = 0; i < 4; ++i) {
+      click(firstFilePicker);
+      click(anyFile);
+      click(fileMenu);
+      click(deleteAction);
+    }
 
     andThen(function() {
       assert.equal(find('a:contains(No files available)').length, 4, 'Shows message when all files are removed.');