Merge branch 'master' of https://github.com/aurelia/framework into js…

…pm_v0.17-beta_compatibility

doc/article/en-US/app-configuration-and-startup.md

@@ -145,7 +145,7 @@ This causes the `my-root${context.language.fileExtension}`/`my-root.html` to be
 
 ## [Bootstrapping Older Browsers](aurelia-doc://section/3/version/1.0.0)
 
-Aurelia was originally designed for Evergreen Browsers. This includes Chrome, Firefox, IE11 and Safari 8. However, we also support IE9 and above through the use of additional polyfills. To support these earlier browsers, you need to add an additional polyfill for MutationObservers. This can be achieved by a jspm install of `github:polymer/mutationobservers`. Then change your `index.html` startup code as follows:
+Aurelia was originally designed for Evergreen Browsers. This includes Chrome, Firefox, IE11 and Safari 8. However, we also support IE9 and above through the use of additional polyfills. To support these earlier browsers, you need to add an additional polyfill for MutationObservers. This can be achieved by a jspm install of `github:webcomponents/webcomponentsjs`. Then change your `index.html` startup code as follows:
 
 <code-listing heading="Polyfill Configuration">
   <source-code lang="HTML">
@@ -158,8 +158,8 @@ Aurelia was originally designed for Evergreen Browsers. This includes Chrome, Fi
         <script src="jspm_packages/system.js"></script>
         <script src="config.js"></script>
         <script>
-          SystemJS.import('core-js').then(function() {
-            return SystemJS.import('polymer/mutationobservers');
+          SystemJS.import('aurelia-polyfills').then(function() {
+            return SystemJS.import('webcomponents/webcomponentsjs/MutationObserver');
           }).then(function() {
             SystemJS.import('aurelia-bootstrapper');
           });

doc/article/en-US/bundling-your-app-for-deploy.md

@@ -246,6 +246,9 @@ Here is a typical bundle configuration in all its glory:
   </source-code>
 </code-listing>
 
+> Warning
+> Exclusion of files that are being used in the project but are not part of it (e.g. CDN URLs, URLs relative to the host, etc.) is done automatically. For bundling to work, do not add them to the **excludes** section. It will cause an error.
+
 - **inject**: If set to `true`, this will inject the bundle in `config.js`, so whenever the application needs a file within that bundle, the loader will load the entire bundle the first time. This is how we can achieve lazy bundle loading. For a large app with multiple sub sections, this will help us avoid loading everything upfront.
 - **minify**: As the name suggests, if this is set to `true`, the the source files will be minified as well.
 - **rev**: If this is set to `true`, an unique revision number will be appended to the bundle file name.

doc/article/en-US/cheat-sheet.md

@@ -20,10 +20,10 @@
     <script src="jspm_packages/system.js"></script>
     <script src="config.js"></script>
     <script>
-      System.import('core-js').then(function() {
-        return System.import('polymer/mutationobservers');
+      SystemJS.import('aurelia-polyfills').then(function() {
+        return SystemJS.import('webcomponents/webcomponentsjs/MutationObserver');
       }).then(function() {
-        System.import('aurelia-bootstrapper');
+        SystemJS.import('aurelia-bootstrapper');
       });
     </script>
   </source-code>
@@ -1506,6 +1506,7 @@ Since the VM's life-cycle is called only once you may have problems recognizing
   </source-code>
 </code-listing>
 
+
 ### Custom Element Without View-Model Declaration
 
 Aurelia will not search for a JavaScript file if you reference a component with an .html extension.
@@ -1527,11 +1528,65 @@ Aurelia will not search for a JavaScript file if you reference a component with
 <code-listing heading="Use Custom Element Without View-Model">
   <source-code lang="HTML">
     <require from="./js-less-component.html"></require>
-    
+
     <js-less-component name.bind="someProperty"></js-less-component>
   </source-code>
 </code-listing>
 
+### Custom Element Variable Binding
+
+It's worth noting that when binding variables to custom elements, use camelCase inside the custom element's View-Model, and dash-case on the html element. See the following example:
+
+<code-listing heading="Custom Element View-Model Declaration">
+  <source-code lang="ES 2016">
+    import {bindable} from 'aurelia-framework';
+
+    export class SayHello {
+      @bindable to;
+      @bindable greetingCallback;
+
+      speak(){
+        this.greetingCallback(`Hello ${this.to}!`);
+      }
+    }
+  </source-code>
+  <source-code lang="ES 2015">
+    import {bindable} from 'aurelia-framework';
+
+    export let SayHello = decorators(
+      bindable('to'),
+      bindable('greetingCallback')
+    ).on(class {
+      speak(){
+        this.greetingCallback(`Hello ${this.to}!`);
+      }
+    });
+  </source-code>
+  <source-code lang="TypeScript">
+    import {bindable} from 'aurelia-framework';
+
+    export class SayHello {
+      @bindable to: string;
+      @bindable greetingCallback: Function;
+
+      speak(): void {
+        this.greetingCallback(`Hello ${this.to}!`);
+      }
+    }
+  </source-code>
+</code-listing>
+
+<code-listing heading="Custom Element Use">
+  <source-code lang="HTML">
+    <template>
+      <require from="./say-hello"></require>
+
+      <input type="text" ref="name">
+      <say-hello to.bind="name.value" greeting-callback.call="doSomething($event)"></say-hello>
+    </template>
+  </source-code>
+</code-listing>
+
 ### Custom Element Options
 
 * `@children(selector)` - Decorates a property to create an array on your class that has its items automatically synchronized based on a query selector against the element's immediate child content.

src/aurelia.js

@@ -94,7 +94,7 @@ export class Aurelia {
    * @return Returns a Promise for the current Aurelia instance.
    */
   enhance(bindingContext: Object = {}, applicationHost: string | Element = null): Promise<Aurelia> {
-    this._configureHost(applicationHost);
+    this._configureHost(applicationHost || DOM.querySelectorAll('body')[0]);
 
     return new Promise(resolve => {
       let engine = this.container.get(TemplatingEngine);
@@ -142,7 +142,6 @@ export class Aurelia {
     if (this.hostConfigured) {
       return;
     }
-
     applicationHost = applicationHost || this.host;
 
     if (!applicationHost || typeof applicationHost === 'string') {

test/aurelia.spec.js

@@ -4,7 +4,7 @@ import {Container} from 'aurelia-dependency-injection';
 import {Loader} from 'aurelia-loader';
 import {BindingLanguage, ViewSlot, ViewResources, CompositionEngine} from 'aurelia-templating';
 import {FrameworkConfiguration} from '../src/framework-configuration';
-import {PLATFORM} from 'aurelia-pal';
+import {DOM, PLATFORM} from 'aurelia-pal';
 
 describe('aurelia', () => {
   describe("constructor", () => {
@@ -205,4 +205,75 @@ describe('aurelia', () => {
 
     });
   });
+
+  describe('enhance()', () => {
+    let aurelia, mockContainer, mockLoader, mockResources, mockPlugin, mockViewEngine, mockTemplatingEngine;
+    let rootStub = {
+      attached() {}
+    };
+
+    beforeEach(() => {
+      mockLoader = jasmine.createSpy('loader');
+
+      mockViewEngine = jasmine.createSpyObj("viewEngine", ['importViewResources', 'enhance']);
+      mockViewEngine.importViewResources.and.returnValue(new Promise((resolve, error) => {
+        resolve();
+      }));
+
+      mockViewEngine.enhance.and.returnValue(rootStub);
+
+      mockContainer = jasmine.createSpyObj('container', ['registerInstance', 'hasResolver', 'get', 'makeGlobal']);
+      mockContainer.hasResolver.and.returnValue(true);
+      mockContainer.get.and.returnValue(mockViewEngine);
+
+      mockResources = jasmine.createSpy('viewResources');
+
+      mockPlugin = jasmine.createSpyObj('plugin', ['apply']);
+      mockPlugin.apply.and.returnValue(new Promise((resolve, error) => {
+        resolve();
+      }));
+
+      aurelia = new Aurelia(mockLoader, mockContainer, mockResources);
+      aurelia.use = mockPlugin;
+    });
+
+    describe('when passing in no arguments', () => {
+      let result;
+
+      it('configures body as host', () => {
+        let documentSpy = spyOn(document, "querySelectorAll").and.returnValue([document.body]);
+        spyOn(aurelia, '_configureHost');
+        result = aurelia.enhance();
+        expect(aurelia._configureHost).toHaveBeenCalledWith(document.body);
+      });
+    });
+
+    describe('when passing in bindingContext and string for Id', () => {
+      let result;
+
+      it('configures body as host', () => {
+        let elId = 'Testing';
+        let fakeElement = DOM.createElement('div');
+        fakeElement.setAttribute('id', elId);
+        let documentSpy = spyOn(document, "getElementById").and.returnValue(fakeElement);
+        result = aurelia.enhance({}, elId);
+        expect(aurelia.host).toBe(fakeElement);
+      });
+    });
+
+    describe('when passing in bindingContext and an element', () => {
+      let result;
+
+      it('configures body as host', () => {
+        let elId = 'Testing';
+        let fakeElement = DOM.createElement('div');
+        fakeElement.setAttribute('id', fakeElement);
+        result = aurelia.enhance({}, fakeElement);
+        expect(aurelia.host).toBe(fakeElement);
+      });
+    });
+  });
+
+
+
 });