Template now defaults to component name.

Fixes peerlibrary#35.

README.md

@@ -74,11 +74,6 @@ class ExampleComponent extends BlazeComponent
   # gives the component the name. The convention is to use the class name.
   @register 'ExampleComponent'
 
-  # Which template to use for this component.
-  template: ->
-    # Convention is to name the template the same as the component.
-    'ExampleComponent'
-
   # Life-cycle hook to initialize component's state.
   onCreated: ->
     @counter = new ReactiveVar 0
@@ -104,17 +99,18 @@ class ExampleComponent extends BlazeComponent
 ```
 
 ```handlebars
+<!-- By default a template with the component's name will be used for the content. -->
 <template name="ExampleComponent">
   <button class="increment">Click me</button>
-  {{! You can include subtemplates to structure your templates.}}
+  {{! You can include subtemplates to structure your templates. }}
   {{> subTemplate}}
 </template>
 
-<!--We use camelCase to distinguish it from the component's template.-->
+<!-- We use camelCase to distinguish it from the component's template. -->
 <template name="subTemplate">
-  {{! You can access component's properties.}}
+  {{! You can access component's properties. }}
   <p>Counter: {{counter.get}}</p>
-  {{! And component's methods.}}
+  {{! And component's methods. }}
   <p>Message: {{customHelper}}</p>  
 </template>
 ```
@@ -135,10 +131,6 @@ Example above in vanilla JavaScript:
 
 ```javascript
 var ExampleComponent = BlazeComponent.extendComponent({
-  template: function () {
-    return 'ExampleComponent';
-  },
-
   onCreated: function () {
     this.counter = new ReactiveVar(0);
   },
@@ -171,10 +163,6 @@ Example in ES6:
 
 ```javascript
 class ExampleComponent extends BlazeComponent {
-  template() {
-    return 'ExampleComponent';
-  }
-
   onCreated() {
     this.counter = new ReactiveVar(0);
   }
@@ -277,11 +265,11 @@ Example:
   {{color}}
   {{#with color='blue'}}
     {{color}}
-    {{! To access component's data context from an inner data context, use "data".}}
+    {{! To access component's data context from an inner data context, use "data". }}
     {{data.color}}
-    {{! To access the data context over the component method.}}
+    {{! To access the data context over the component method. }}
     {{currentData.color}}
-    {{! Alternatively, you can also use keyword "this".}}
+    {{! Alternatively, you can also use keyword "this". }}
     {{this.color}}
   {{/with}}
 </template>
@@ -458,9 +446,6 @@ Example:
 class CaseComponent extends BlazeComponent
   @register 'CaseComponent'
 
-  template: ->
-    'CaseComponent'
-
   constructor: (kwargs) ->
     @cases = kwargs.hash
 
@@ -539,9 +524,6 @@ A contrived example to showcase various features of mixins:
 class MyComponent extends BlazeComponent
   @register 'MyComponent'
 
-  template: ->
-    'MyComponent'
-
   mixins: ->
     [FirstMixin, new SecondMixin 'foobar']
 
@@ -752,14 +734,8 @@ class Buttons
 class Buttons.Red extends BlazeComponent
   @register 'Buttons.Red'
 
-  template: ->
-    'Buttons.Red'
-
 class Buttons.Blue extends BlazeComponent
   @register 'Buttons.Blue'
-
-  template: ->
-    'Buttons.Blue'
 ```
 
 ```handlebars
@@ -792,9 +768,6 @@ Let's imagine thar your package exports `Buttons` class above. Then you could do
 class OtherComponent extends BlazeComponent
   @register 'OtherComponent'
 
-  template: ->
-    'OtherComponent'
-
   renderButton: ->
     Buttons.Red.renderComponent @currentComponent()
 ```
@@ -962,7 +935,9 @@ template: ->
 ```
 
 Extend this method and return the name of a [Blaze template](http://docs.meteor.com/#/full/templates_api) or template
-object itself. Template content will be used to render component's DOM content, but all preexisting template helpers,
+object itself. By default it returns the [component name](#user-content-reference_class_componentName).
+
+Template content will be used to render component's DOM content, but all preexisting template helpers,
 event handlers and life-cycle hooks will be ignored.
 
 All component methods are available in the template as template helpers. Template helpers are bound to the component
@@ -1184,9 +1159,6 @@ Example:
 class ButtonComponent extends BlazeComponent
   @register 'ButtonComponent'
 
-  template: ->
-    'ButtonComponent'
-
   onCreated: ->
     @color = new ReactiveVar "Red"
 

demo/.meteor/versions

@@ -34,7 +34,7 @@ [email protected]
 [email protected]
 peerlibrary:[email protected]
 peerlibrary:[email protected]
-peerlibrary:blaze-components@0.7.0
+peerlibrary:blaze-components@0.8.0
 peerlibrary:[email protected]_6
 [email protected]
 [email protected]

demo/client/demo.html

@@ -186,7 +186,7 @@ <h2>The Solution</h2>
 
 <aside>
   <p>The convention would be to use {{#if isCoffeeScript}}<code class="language-coffeescript">AutoSelectInputComponent</code>{{/if}}{{#if isJavaScript}}<code class="language-javascript">AutoSelectInputComponent</code>{{/if}}
-    for the template name, to match the component's class name (and its registration name).</p>
+    for the template name, to match the component's class name (and its registration name). This is also the default.</p>
   <p>We are breaking the convention in this specific case to reuse an existing template.</p>
 </aside>
 

example/.meteor/versions

@@ -34,7 +34,7 @@ [email protected]
 [email protected]
 peerlibrary:[email protected]
 peerlibrary:[email protected]
-peerlibrary:blaze-components@0.7.0
+peerlibrary:blaze-components@0.8.0
 percolate:[email protected]_1
 [email protected]
 [email protected]

example/client/base.coffee

@@ -1,7 +1,4 @@
 class MainComponent extends BlazeComponent
-  template: ->
-    'MainComponent'
-
   foobar: ->
     "#{ @componentName() }/MainComponent.foobar/#{ EJSON.stringify @data() }/#{ EJSON.stringify @currentData() }/#{ @currentComponent().componentName() }"
 
@@ -24,12 +21,13 @@ class MainComponent extends BlazeComponent
 BlazeComponent.register 'MainComponent', MainComponent
 
 class @FooComponent extends BlazeComponent
-  template: ->
-    'FooComponent'
 
 BlazeComponent.register 'FooComponent', FooComponent
 
 class SubComponent extends MainComponent
+  template: ->
+    'MainComponent'
+
   foobar: ->
     "#{ @componentName() }/SubComponent.foobar/#{ EJSON.stringify @data() }/#{ EJSON.stringify @currentData() }/#{ @currentComponent().componentName() }"
 
@@ -55,9 +53,6 @@ $.fn.outerOffset = ->
   offset
 
 class AnimatedListComponent extends BlazeComponent
-  template: ->
-    'AnimatedListComponent'
-
   onCreated: ->
     @_list = new ReactiveVar [1...6]
     @_handle = Meteor.setInterval =>
@@ -152,8 +147,5 @@ class MyNamespace.Foo
 class MyNamespace.Foo.MyComponent extends BlazeComponent
   @register 'MyNamespace.Foo.MyComponent'
 
-  template: ->
-    'MyNamespace.Foo.MyComponent'
-
   dataContext: ->
     EJSON.stringify @data()

lib.coffee

@@ -567,8 +567,7 @@ class BlazeComponent extends BaseComponent
       template
 
   template: ->
-    # You have to override this method with a method which returns a template name or template itself.
-    throw new Error "Component method 'template' not overridden."
+    @constructor.componentName() or throw new Error "Component is missing a name and component's 'template' method is not overridden."
 
   onCreated: ->
 

tests/tests.coffee

@@ -7,7 +7,8 @@ class MainComponent extends BlazeComponent
   @calls: []
 
   template: ->
-    'MainComponent'
+    # To test when name of the component mismatches the template name. Template name should have precedence.
+    'MainComponent2'
 
   foobar: ->
     "#{ @componentName() }/MainComponent.foobar/#{ EJSON.stringify @data() }/#{ EJSON.stringify @currentData() }/#{ @currentComponent().componentName() }"
@@ -30,9 +31,8 @@ class MainComponent extends BlazeComponent
 
 BlazeComponent.register 'MainComponent', MainComponent
 
+# Template should match registered name.
 class FooComponent extends BlazeComponent
-  template: ->
-    'FooComponent'
 
 BlazeComponent.register 'FooComponent', FooComponent
 
@@ -223,7 +223,7 @@ for property, value of (BlazeComponent::) when property not in ['constructor']
 
 class ExistingClassHierarchyComponent extends ExistingClassHierarchyBaseComponent
   template: ->
-    'MainComponent'
+    'MainComponent2'
 
   foobar: ->
     "#{ @componentName() }/ExistingClassHierarchyComponent.foobar/#{ EJSON.stringify @data() }/#{ EJSON.stringify @currentData() }/#{ @currentComponent().componentName() }"
@@ -288,7 +288,7 @@ class DependencyMixin extends BlazeComponent
 
 class WithMixinsComponent extends BlazeComponent
   template: ->
-    'MainComponent'
+    'MainComponent2'
 
   mixins: ->
     [SecondMixin, FirstMixin]
@@ -306,9 +306,6 @@ class AfterCreateValueComponent extends BlazeComponent
 BlazeComponent.register 'AfterCreateValueComponent', AfterCreateValueComponent
 
 class PostMessageButtonComponent extends BlazeComponent
-  template: ->
-    'PostMessageButtonComponent'
-
   onCreated: ->
     @color = new ReactiveVar "Red"
 
@@ -394,9 +391,6 @@ BlazeComponent.register 'ParentComponent', ParentComponent
 class CaseComponent extends BlazeComponent
   @register 'CaseComponent'
 
-  template: ->
-    'CaseComponent'
-
   constructor: (kwargs) ->
     @cases = kwargs.hash
 
@@ -426,9 +420,6 @@ class RightComponent extends BlazeComponent
 class MyComponent extends BlazeComponent
   @register 'MyComponent'
 
-  template: ->
-    'MyComponent'
-
   mixins: -> [FirstMixin2, new SecondMixin2 'foobar']
 
   alternativeName: ->
@@ -483,11 +474,6 @@ class ExampleComponent extends BlazeComponent
   # gives the component the name. The convention is to use the class name.
   @register 'ExampleComponent'
 
-  # Which template to use for this component.
-  template: ->
-    # Convention is to name the template the same as the component.
-    'ExampleComponent'
-
   # Life-cycle hook to initialize component's state.
   onCreated: ->
     @counter = new ReactiveVar 0
@@ -560,10 +546,10 @@ class BasicTestCase extends ClassyTestCase
   FOO_COMPONENT_CONTENT = ->
     """
       <p>Other component: FooComponent</p>
-      <button>Foo1</button>
-      <p></p>
       <button>Foo2</button>
       <p></p>
+      <button>Foo3</button>
+      <p></p>
       <p></p>
     """
 
@@ -721,17 +707,16 @@ class BasicTestCase extends ClassyTestCase
       /Component 'OtherMainComponent' already registered under the name 'MainComponent'/
 
     class WithoutTemplateComponent extends BlazeComponent
-      @componentName 'WithoutTemplateComponent'
 
     @assertThrows =>
       Blaze.toHTML WithoutTemplateComponent.renderComponent()
     ,
-      /Component method 'template' not overridden/
+      /Component is missing a name and component's 'template' method is not overridden/
 
     @assertThrows =>
       Blaze.toHTML new WithoutTemplateComponent().renderComponent()
     ,
-      /Component method 'template' not overridden/
+      /Component is missing a name and component's 'template' method is not overridden/
 
     class WithUnknownTemplateComponent extends BlazeComponent
       @componentName 'WithoutTemplateComponent'

tests/tests.html

@@ -33,7 +33,7 @@
   </div>
 </template>
 
-<template name="MainComponent">
+<template name="MainComponent2">
   <p>Main component: {{componentName}}</p>
   <button>Foo1</button>
   <p>{{foobar}}</p>
@@ -66,11 +66,11 @@
 <template name="FooComponent">
   {{! Helpers here should not resolve becasue ther are defined in another component. }}
   <p>Other component: {{componentName}}</p>
-  <button>Foo1</button>
+  <button>Foo2</button>
   <p>{{foobar}}</p>
   {{#with a='5' b='6'}}
     {{! But event handler from the MainComponent should still handle the click here. }}
-    <button>Foo2</button>
+    <button>Foo3</button>
     <p>{{foobar2}}</p>
   {{/with}}
   <p>{{foobar3}}</p>
@@ -197,19 +197,20 @@
   </div>
 </template>
 
+<!-- By default a template with the component's name will be used for the content. -->
 <template name="ExampleComponent">
   <div class="exampleComponent">
     <button class="increment">Click me</button>
-    {{! You can include subtemplates to structure your templates.}}
+    {{! You can include subtemplates to structure your templates. }}
     {{> subTemplate}}
   </div>
 </template>
 
-<!--We use camelCase to distinguish it from the component's template.-->
+<!-- We use camelCase to distinguish it from the component's template. -->
 <template name="subTemplate">
-  {{! You can access component's properties.}}
+  {{! You can access component's properties. }}
   <p>Counter: {{counter.get}}</p>
-  {{! And component's methods.}}
+  {{! And component's methods. }}
   <p>Message: {{customHelper}}</p>
 </template>
 

tests/tests.js

@@ -1,5 +1,6 @@
 var ExampleComponent = BlazeComponent.extendComponent({
   template: function () {
+    // We register the component under a different name.
     return 'ExampleComponent';
   },
 
@@ -33,6 +34,11 @@ var ExampleComponent = BlazeComponent.extendComponent({
 
 var MyComponent = BlazeComponent.getComponent('MyComponent');
 var OurComponent = MyComponent.extendComponent({
+  template: function () {
+    // By default it would use "OurComponentJS" name.
+    return 'MyComponent';
+  },
+
   values: function () {
     return '>>>' + OurComponent.__super__.values.call(this) + '<<<';
   }