fix(decorators): hyphenate behavior names with warning

Fixes #279
Linting also fixed.

src/composition-engine.js

@@ -91,23 +91,23 @@ export class CompositionEngine {
         }
 
         context.viewSlot.add(controller.view);
-        
+
         if (context.compositionTransactionNotifier) {
           context.compositionTransactionNotifier.done();
         }
 
         return controller;
       });
     }
-    
+
     return this.createController(context).then(controller => {
       controller.automate(context.overrideContext, context.owningView);
-      
+
       if (context.compositionTransactionOwnershipToken) {
         return context.compositionTransactionOwnershipToken.waitForCompositionComplete().then(() => swap(controller));
-      } else {
-        return swap(controller);
       }
+
+      return swap(controller);
     });
   }
 
@@ -180,10 +180,10 @@ export class CompositionEngine {
   compose(context: CompositionContext): Promise<View | Controller> {
     context.childContainer = context.childContainer || context.container.createChild();
     context.view = this.viewLocator.getViewStrategy(context.view);
-    
+
     let transaction = context.childContainer.get(CompositionTransaction);
     let compositionTransactionOwnershipToken = transaction.tryCapture();
-    
+
     if (compositionTransactionOwnershipToken) {
       context.compositionTransactionOwnershipToken = compositionTransactionOwnershipToken;
     } else {
@@ -200,24 +200,24 @@ export class CompositionEngine {
       return context.view.loadViewFactory(this.viewEngine, new ViewCompileInstruction()).then(viewFactory => {
         let result = viewFactory.create(context.childContainer);
         result.bind(context.bindingContext, context.overrideContext);
-        
+
         let work = () => {
           return Promise.resolve(context.viewSlot.removeAll(true)).then(() => {
             context.viewSlot.add(result);
-            
+
             if (context.compositionTransactionNotifier) {
               context.compositionTransactionNotifier.done();
             }
-            
+
             return result;
           });
         };
-        
+
         if (context.compositionTransactionOwnershipToken) {
           return context.compositionTransactionOwnershipToken.waitForCompositionComplete().then(work);
-        } else {
-          return work();
         }
+
+        return work();
       });
     } else if (context.viewSlot) {
       context.viewSlot.removeAll();

src/composition-transaction.js

@@ -17,59 +17,59 @@ export class CompositionTransaction {
     this._ownershipToken = null;
     this._compositionCount = 0;
   }
-  
+
   /**
   * Attempt to take ownership of the composition transaction.
   * @return An ownership token if successful, otherwise null.
   */
   tryCapture(): CompositionTransactionOwnershipToken {
     if (this._ownershipToken !== null) {
       return null;
-    }  
-    
-    return this._ownershipToken = this._createOwnershipToken();
+    }
+
+    return (this._ownershipToken = this._createOwnershipToken());
   }
-  
+
   /**
   * Enlist an async render operation into the transaction.
   * @return A completion notifier.
   */
   enlist(): CompositionTransactionNotifier {
     let that = this;
-    
+
     that._compositionCount++;
-    
+
     return {
       done() {
         that._compositionCount--;
         that._tryCompleteTransaction();
       }
     };
   }
-  
+
   _tryCompleteTransaction() {
     if (this._compositionCount <= 0) {
       this._compositionCount = 0;
-      
+
       if (this._ownershipToken !== null) {
         let capture = this._ownershipToken;
         this._ownershipToken = null;
         capture._resolve();
       }
     }
   }
-  
+
   _createOwnershipToken(): CompositionTransactionOwnershipToken {
     let token = {};
     let promise = new Promise((resolve, reject) => {
       token._resolve = resolve;
     });
-    
+
     token.waitForCompositionComplete = () => {
       this._tryCompleteTransaction();
       return promise;
     };
-    
+
     return token;
   }
-}
+}

src/decorators.js

@@ -1,13 +1,18 @@
+import * as LogManager from 'aurelia-logging';
 import {metadata} from 'aurelia-metadata';
 import {BindableProperty} from './bindable-property';
 import {ElementConfigResource} from './element-config';
 import {ViewLocator, RelativeViewStrategy, NoViewStrategy, InlineViewStrategy} from './view-strategy';
 import {HtmlBehaviorResource} from './html-behavior';
+import {_hyphenate} from './util';
 
 function validateBehaviorName(name, type) {
   if (/[A-Z]/.test(name)) {
-    throw new Error(`'${name}' is not a valid ${type} name.  Upper-case letters are not allowed because the DOM is not case-sensitive.`);
+    let newName = _hyphenate(name);
+    LogManager.getLogger('templating').warn(`'${name}' is not a valid ${type} name and has been converted to '${newName}'. Upper-case letters are not allowed because the DOM is not case-sensitive.`);
+    return newName;
   }
+  return name;
 }
 
 /**
@@ -40,10 +45,9 @@ export function behavior(override: HtmlBehaviorResource | Object): any {
 * @param name The name of the custom element.
 */
 export function customElement(name: string): any {
-  validateBehaviorName(name, 'custom element');
   return function(target) {
     let r = metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, target);
-    r.elementName = name;
+    r.elementName = validateBehaviorName(name, 'custom element');
   };
 }
 
@@ -53,10 +57,9 @@ export function customElement(name: string): any {
 * @param defaultBindingMode The default binding mode to use when the attribute is bound wtih .bind.
 */
 export function customAttribute(name: string, defaultBindingMode?: number): any {
-  validateBehaviorName(name, 'custom attribute');
   return function(target) {
     let r = metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, target);
-    r.attributeName = name;
+    r.attributeName = validateBehaviorName(name, 'custom attribute');
     r.attributeDefaultBindingMode = defaultBindingMode;
   };
 }

src/view-factory.js

@@ -52,7 +52,7 @@ function elementContainerGet(key) {
   if (key === ElementEvents) {
     return this.elementEvents || (this.elementEvents = new ElementEvents(this.element));
   }
-  
+
   if (key === CompositionTransaction) {
     return this.compositionTransaction || (this.compositionTransaction = this.parent.get(key));
   }