From 456d7816e87f5b5697e1ec2554402e5ba615b054 Mon Sep 17 00:00:00 2001
From: Matthieu Dumont <jerska@live.fr>
Date: Fri, 25 Sep 2015 18:46:31 +0200
Subject: [PATCH] feat(templatesConfig): helpers and options transferred to
 Template

New parameter passed to the `init` and `render` method: `templatesConfig`.
It replaces `templateHelpers`.

This parameter embeds both the `helpers` and the `Hogan` options.
It uses the same chain that the `templateHelpers` previously used to
be passed from a widget to the `Template` component.

The `Template` component now also accepts a `templateDefault` parameter
which allows us to ignore `Hogan`'s `options` if there is no
`template` provided

Closes #99.
---
 README.md                            | 14 +++++++++--
 components/Hits.js                   |  5 ++++
 components/RefinementList.js         | 11 ++++++++-
 components/Stats.js                  | 12 +++++++---
 components/Template.js               | 17 +++++++++++---
 decorators/headerFooter.js           | 17 +++++++++++---
 example/app.js                       |  5 ++++
 example/templates/free-shipping.html |  1 +
 lib/InstantSearch.js                 | 17 ++++++++------
 lib/utils.js                         | 23 ++++++++++++++----
 scripts/lint.sh                      |  2 +-
 test/InstantSearch/lifecycle.js      |  6 ++---
 widgets/hits.js                      |  3 ++-
 widgets/menu.js                      | 23 +++++++-----------
 widgets/range-slider.js              | 16 +++++++------
 widgets/refinement-list.js           | 26 +++++++++------------
 widgets/stats/index.js               |  9 +++----
 widgets/toggle.js                    | 35 ++++++++++++++--------------
 18 files changed, 157 insertions(+), 85 deletions(-)

diff --git a/README.md b/README.md
index 93063f5fc2..9ad416fe48 100644
--- a/README.md
+++ b/README.md
@@ -143,13 +143,13 @@ search.addWidget(
 );
 ```
 
-### Template helpers
+### Template configuration
 
 In order to help you when defining your templates, `instantsearch.js` exposes
 a few helpers. All helpers are accessible in the Mustache templating through
 `{{#helpers.nameOfTheHelper}}{{valueToFormat}}{{/helpers.nameOfTheHelper}}`. To
 use them in the function templates, you'll have to call
-`search.templateHelpers.nameOfTheHelper` where `search` is your current
+`search.templatesConfig.helpers.nameOfTheHelper` where `search` is your current
 `instantsearch` instance.
 
 Here is the list of the currently available helpers:
@@ -159,6 +159,16 @@ Here is the list of the currently available helpers:
   option (defaults to `en-EN`).
   eg. `100000` will be formatted as `100 000` with `en-EN`
 
+`instantsearch.js` also provides the ability to set options to use with your
+templating engine. These options are accessible through
+`search.templatesConfig.options`.
+With the embedded widgets using our `Template` component (widgets with
+`template(s)` parameter), we're passing these options to `Hogan.compile`
+if you're not using the default `template`.
+```js
+search.templatesConfig.options.delimiters = '[[ ]]';
+```
+
 ## Development workflow
 
 ```sh
diff --git a/components/Hits.js b/components/Hits.js
index 832a9d82f9..0809de9848 100644
--- a/components/Hits.js
+++ b/components/Hits.js
@@ -6,6 +6,7 @@ var Template = require('./Template');
 class Hits extends React.Component {
   renderWithResults() {
     var template = this.props.hitTemplate;
+    var templatesConfig = this.props.templatesConfig;
     var transformData = this.props.hitTransformData;
 
     var renderedHits = map(this.props.hits, function(hit) {
@@ -15,6 +16,7 @@ class Hits extends React.Component {
           transformData={transformData}
           key={hit.objectID}
           template={template}
+          config={templatesConfig}
         />
       );
     }, this);
@@ -25,6 +27,7 @@ class Hits extends React.Component {
   renderNoResults() {
     var data = this.props.results;
     var template = this.props.noResultsTemplate;
+    var templatesConfig = this.props.templatesConfig;
     var transformData = this.props.noResultsTransformData;
 
     return (
@@ -33,6 +36,7 @@ class Hits extends React.Component {
           data={data}
           transformData={transformData}
           template={template}
+          config={templatesConfig}
         />
       </div>
     );
@@ -57,6 +61,7 @@ Hits.propTypes = {
     React.PropTypes.string,
     React.PropTypes.func
   ]).isRequired,
+  templatesConfig: React.PropTypes.object.isRequired,
   noResultsTransformData: React.PropTypes.func
 };
 
diff --git a/components/RefinementList.js b/components/RefinementList.js
index e6d7b9a872..64c8b47f53 100644
--- a/components/RefinementList.js
+++ b/components/RefinementList.js
@@ -55,6 +55,8 @@ class RefinementList extends React.Component {
               data={facetValue}
               transformData={this.props.transformData}
               template={this.props.templates.item}
+              defaultTemplate={this.props.defaultTemplates.item}
+              config={this.props.templatesConfig}
             />
           </div>
         );
@@ -80,8 +82,15 @@ RefinementList.propTypes = {
     item: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.func
-    ]).isRequired
+    ])
+  }),
+  defaultTemplates: React.PropTypes.shape({
+    item: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.func
+    ])
   }),
+  templatesConfig: React.PropTypes.object.isRequired,
   transformData: React.PropTypes.func,
   toggleRefinement: React.PropTypes.func.isRequired
 };
diff --git a/components/Stats.js b/components/Stats.js
index 6ac637d755..f74e08bec1 100644
--- a/components/Stats.js
+++ b/components/Stats.js
@@ -5,7 +5,8 @@ var Template = require('./Template');
 class Stats extends React.Component {
   render() {
     var template = this.props.template;
-    var templateHelpers = this.props.templateHelpers;
+    var defaultTemplate = this.props.defaultTemplate;
+    var templatesConfig = this.props.templatesConfig;
     var transformData = this.props.transformData;
     var data = {
       hasManyResults: this.props.nbHits > 1,
@@ -24,7 +25,8 @@ class Stats extends React.Component {
         data={data}
         transformData={transformData}
         template={template}
-        templateHelpers={templateHelpers}
+        defaultTemplate={defaultTemplate}
+        config={templatesConfig}
       />
     );
   }
@@ -39,9 +41,13 @@ Stats.propTypes = {
   template: React.PropTypes.oneOfType([
     React.PropTypes.func,
     React.PropTypes.string
+  ]),
+  defaultTemplate: React.PropTypes.oneOfType([
+    React.PropTypes.func,
+    React.PropTypes.string
   ]).isRequired,
   transformData: React.PropTypes.func,
-  templateHelpers: React.PropTypes.object,
+  templatesConfig: React.PropTypes.object.isRequired,
   query: React.PropTypes.string
 };
 
diff --git a/components/Template.js b/components/Template.js
index 5fe9b0f69e..9dff6c6265 100644
--- a/components/Template.js
+++ b/components/Template.js
@@ -6,10 +6,17 @@ class Template {
   render() {
     var content = renderTemplate({
       template: this.props.template,
-      templateHelpers: this.props.templateHelpers,
+      defaultTemplate: this.props.defaultTemplate,
+      config: this.props.config,
       data: this.props.transformData ? this.props.transformData(this.props.data) : this.props.data
     });
 
+    if (content === null) {
+      // Adds a noscript to the DOM but virtual DOM is null
+      // See http://facebook.github.io/react/docs/component-specs.html#render
+      return null;
+    }
+
     return <div dangerouslySetInnerHTML={{__html: content}} />;
   }
 }
@@ -18,8 +25,12 @@ Template.propTypes = {
   template: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.func
-  ]).isRequired,
-  templateHelpers: React.PropTypes.object,
+  ]),
+  defaultTemplate: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.func
+  ]),
+  config: React.PropTypes.object.isRequired,
   transformData: React.PropTypes.func,
   data: React.PropTypes.object
 };
diff --git a/decorators/headerFooter.js b/decorators/headerFooter.js
index 18e03b7544..232c6ef7a5 100644
--- a/decorators/headerFooter.js
+++ b/decorators/headerFooter.js
@@ -9,9 +9,9 @@ function headerFooter(ComposedComponent) {
     render() {
       return (
         <div className={cx(this.props.cssClasses.root)}>
-          <Template template={this.props.templates.header} />
+          <Template template={this.props.templates.header} defaultTemplate={this.props.defaultTemplates.header} config={this.props.templatesConfig} />
           <ComposedComponent {...this.props} />
-          <Template template={this.props.templates.footer} />
+          <Template template={this.props.templates.footer} defaultTemplate={this.props.defaultTemplates.footer} config={this.props.templatesConfig} />
         </div>
       );
     }
@@ -28,6 +28,17 @@ function headerFooter(ComposedComponent) {
         React.PropTypes.func
       ])
     }),
+    defaultTemplates: React.PropTypes.shape({
+      header: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.func
+      ]),
+      footer: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.func
+      ])
+    }),
+    templatesConfig: React.PropTypes.object.isRequired,
     cssClasses: React.PropTypes.shape({
       root: React.PropTypes.oneOfType([
         React.PropTypes.string,
@@ -37,7 +48,7 @@ function headerFooter(ComposedComponent) {
   };
 
   HeaderFooter.defaultProps = {
-    templates: {
+    defaultTemplates: {
       header: '',
       footer: ''
     },
diff --git a/example/app.js b/example/app.js
index 83eefd3727..a788f4f2c7 100644
--- a/example/app.js
+++ b/example/app.js
@@ -6,6 +6,7 @@ var search = instantsearch({
   apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'instant_search'
 });
+search.templatesConfig.options.sectionTags = [{o: '_refined', c: 'refined'}];
 
 search.addWidget(
   instantsearch.widgets.urlSync({
@@ -102,6 +103,10 @@ search.addWidget(
     templates: {
       header: '<div class="panel-heading">Shipping</div>',
       body: require('./templates/free-shipping.html')
+    },
+    transformData: function(data) {
+      data._refined = data.isRefined;
+      return data;
     }
   })
 );
diff --git a/example/templates/free-shipping.html b/example/templates/free-shipping.html
index 4f1e25ef8e..436357c8e5 100644
--- a/example/templates/free-shipping.html
+++ b/example/templates/free-shipping.html
@@ -2,6 +2,7 @@
   <label>
     <input type="checkbox" {{#isRefined}}checked{{/isRefined}} />
     {{label}}
+    {{_refined}}!{{/refined}}
   </label>
   <span class="badge pull-right">{{count}}</span>
 </div>
diff --git a/lib/InstantSearch.js b/lib/InstantSearch.js
index b8521b4a20..1e70bf4f02 100644
--- a/lib/InstantSearch.js
+++ b/lib/InstantSearch.js
@@ -30,10 +30,13 @@ Usage: instantsearch({
     this.indexName = indexName;
     this.searchParameters = searchParameters || {};
     this.widgets = [];
-    this.templateHelpers = {
-      formatNumber(number) {
-        return Number(number).toLocaleString(numberLocale);
-      }
+    this.templatesConfig = {
+      helpers: {
+        formatNumber(number) {
+          return Number(number).toLocaleString(numberLocale);
+        }
+      },
+      options: {}
     };
   }
 
@@ -83,7 +86,7 @@ Usage: instantsearch({
         return;
       }
       widget.render({
-        templateHelpers: this.templateHelpers,
+        templatesConfig: this.templatesConfig,
         results,
         state,
         helper
@@ -94,9 +97,9 @@ Usage: instantsearch({
   _init(state, helper) {
     forEach(this.widgets, function(widget) {
       if (widget.init) {
-        widget.init(state, helper);
+        widget.init(state, helper, this.templatesConfig);
       }
-    });
+    }, this);
   }
 }
 
diff --git a/lib/utils.js b/lib/utils.js
index 5c17a26190..a4dff86767 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -22,11 +22,26 @@ function isDomElement(o) {
   return o instanceof HTMLElement || o && o.nodeType > 0;
 }
 
-function renderTemplate({template, templateHelpers, data}) {
+function renderTemplate({template, defaultTemplate, config, data}) {
   var hogan = require('hogan.js');
   var forEach = require('lodash/collection/forEach');
+  var options = config.options;
   var content;
 
+  if (template === null || typeof template === 'undefined') {
+    if (defaultTemplate === null || typeof defaultTemplate === 'undefined') {
+      throw new Error('No template provided and no defaultTemplate');
+    }
+    // If template isn't set, we reset the options since our defaultTemplates
+    // don't expect options to be set
+    options = {};
+    template = defaultTemplate;
+  }
+
+  if (template === '') {
+    return null;
+  }
+
   // We add all our template helper methods to the template as lambdas. Note
   // that lambdas in Mustache are supposed to accept a second argument of
   // `render` to get the rendered value, not the literal `{{value}}`. But
@@ -34,10 +49,10 @@ function renderTemplate({template, templateHelpers, data}) {
   // https://github.com/twitter/hogan.js/issues/222).
   function addTemplateHelpersToData(templateData) {
     templateData.helpers = {};
-    forEach(templateHelpers, (method, name) => {
+    forEach(config.helpers, (method, name) => {
       data.helpers[name] = () => {
         return (value) => {
-          return method(hogan.compile(value).render(templateData));
+          return method(hogan.compile(value, options).render(templateData));
         };
       };
     });
@@ -55,7 +70,7 @@ function renderTemplate({template, templateHelpers, data}) {
   if (typeof template === 'string') {
     data = addTemplateHelpersToData(data);
 
-    content = hogan.compile(template).render(data);
+    content = hogan.compile(template, options).render(data);
   }
 
   return content;
diff --git a/scripts/lint.sh b/scripts/lint.sh
index c41db44ee5..78f55a86ab 100755
--- a/scripts/lint.sh
+++ b/scripts/lint.sh
@@ -4,4 +4,4 @@ set -e # exit when error
 
 printf "\nLint\n"
 
-eslint . --quiet
+eslint . --quiet --no-color
diff --git a/test/InstantSearch/lifecycle.js b/test/InstantSearch/lifecycle.js
index 0a2ba93242..c080c2711d 100644
--- a/test/InstantSearch/lifecycle.js
+++ b/test/InstantSearch/lifecycle.js
@@ -83,8 +83,8 @@ test('InstantSearch: lifecycle', function(t) {
   );
   t.deepEqual(
     widget.init.args[0],
-    [helper.state, helper],
-    'widget.init(helper.state, helper)'
+    [helper.state, helper, search.templatesConfig],
+    'widget.init(helper.state, helper, templatesConfig)'
   );
   t.ok(widget.render.notCalled, 'widget.render not yet called');
 
@@ -98,7 +98,7 @@ test('InstantSearch: lifecycle', function(t) {
       results: results,
       state: helper.state,
       helper: helper,
-      templateHelpers: search.templateHelpers
+      templatesConfig: search.templatesConfig
     }],
     'widget.render(results, state, helper)'
   );
diff --git a/widgets/hits.js b/widgets/hits.js
index 2d27ec0c77..bd2f8e4981 100644
--- a/widgets/hits.js
+++ b/widgets/hits.js
@@ -15,7 +15,7 @@ function hits({
 
   return {
     getConfiguration: () => ({hitsPerPage}),
-    render: function({results, helper}) {
+    render: function({results, helper, templatesConfig}) {
       React.render(
         <Hits
           hits={results.hits}
@@ -26,6 +26,7 @@ function hits({
           hideWhenNoResults={hideWhenNoResults}
           hasResults={results.hits.length > 0}
           hitTemplate={templates.hit}
+          templatesConfig={templatesConfig}
           hitTransformData={transformData.hit}
         />,
         containerNode
diff --git a/widgets/menu.js b/widgets/menu.js
index 9ea7c29016..7e69e84fed 100644
--- a/widgets/menu.js
+++ b/widgets/menu.js
@@ -5,16 +5,8 @@ var autoHide = require('../decorators/autoHide');
 var headerFooter = require('../decorators/headerFooter');
 var RefinementList = autoHide(headerFooter(require('../components/RefinementList')));
 
-var defaultTemplates = {
-  header: '',
-  footer: '',
-  item: '<a href="{{href}}">{{name}}</a> {{count}}'
-};
-
 var hierarchicalCounter = 0;
 
-var defaults = require('lodash/object/defaults');
-
 /**
  * Create a menu out of a facet
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
@@ -44,22 +36,23 @@ function menu({
       item: null
     },
     hideWhenNoResults = true,
-    templates = defaultTemplates,
+    templates = {},
     transformData = null
   }) {
   hierarchicalCounter++;
 
   var containerNode = utils.getContainerNode(container);
   var usage = 'Usage: menu({container, facetName, [sortBy, limit, rootClass, itemClass, templates.{header,item,footer}, transformData]})';
+  var defaultTemplates = {
+    header: '',
+    item: '<a href="{{href}}">{{name}}</a> {{count}}',
+    footer: ''
+  };
 
   if (container === null || facetName === null) {
     throw new Error(usage);
   }
 
-  if (templates !== defaultTemplates) {
-    templates = defaults({}, templates, defaultTemplates);
-  }
-
   var hierarchicalFacetName = 'instantsearch.js' + hierarchicalCounter;
 
   return {
@@ -69,7 +62,7 @@ function menu({
         attributes: [facetName]
       }]
     }),
-    render: function({results, helper}) {
+    render: function({results, helper, templatesConfig}) {
       var facetValues = getFacetValues(results, hierarchicalFacetName, sortBy, limit);
 
       React.render(
@@ -77,6 +70,8 @@ function menu({
           cssClasses={cssClasses}
           facetValues={facetValues}
           templates={templates}
+          defaultTemplates={defaultTemplates}
+          templatesConfig={templatesConfig}
           transformData={transformData}
           hideWhenNoResults={hideWhenNoResults}
           hasResults={facetValues.length > 0}
diff --git a/widgets/range-slider.js b/widgets/range-slider.js
index cb662b540c..48013df59b 100644
--- a/widgets/range-slider.js
+++ b/widgets/range-slider.js
@@ -5,11 +5,6 @@ var autoHide = require('../decorators/autoHide');
 var headerFooter = require('../decorators/headerFooter');
 var Slider = autoHide(headerFooter(require('../components/Slider')));
 
-var defaultTemplates = {
-  header: '',
-  footer: ''
-};
-
 /**
  * Instantiate a slider based on a numeric attribute
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
@@ -32,7 +27,7 @@ function rangeSlider({
     container = null,
     facetName = null,
     tooltips = true,
-    templates = defaultTemplates,
+    templates = {},
     cssClasses = {
       root: null,
       body: null
@@ -40,6 +35,11 @@ function rangeSlider({
     hideWhenNoResults = true
   }) {
   var containerNode = utils.getContainerNode(container);
+  var defaultTemplates = {
+    header: '',
+    footer: ''
+  };
+
 
   return {
     getConfiguration: () => ({
@@ -72,7 +72,7 @@ function rangeSlider({
       helper.addNumericRefinement(facetName, '<=', newValues[1]);
       helper.search();
     },
-    render({results, helper}) {
+    render({results, helper, templatesConfig}) {
       var stats = results.getFacetStats(facetName);
 
       var currentRefinement = this._getCurrentRefinement(helper);
@@ -90,6 +90,8 @@ function rangeSlider({
           range={{min: stats.min, max: stats.max}}
           cssClasses={cssClasses}
           templates={templates}
+          defaultTemplates={defaultTemplates}
+          templatesConfig={templatesConfig}
           hideWhenNoResults={hideWhenNoResults}
           hasResults={stats.min !== null && stats.max !== null}
           onChange={this._refine.bind(this, helper)}
diff --git a/widgets/refinement-list.js b/widgets/refinement-list.js
index b508ea59b7..3a446cb99a 100644
--- a/widgets/refinement-list.js
+++ b/widgets/refinement-list.js
@@ -2,15 +2,6 @@ var React = require('react');
 
 var utils = require('../lib/utils.js');
 
-var defaultTemplates = {
-  header: '',
-  footer: '',
-  item: `<label>
-  <input type="checkbox" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}} <span>{{count}}</span>
-</label>`
-};
-
-var defaults = require('lodash/object/defaults');
 var autoHide = require('../decorators/autoHide');
 var headerFooter = require('../decorators/headerFooter');
 var RefinementList = autoHide(headerFooter(require('../components/RefinementList')));
@@ -50,12 +41,19 @@ function refinementList({
       item: null
     },
     hideWhenNoResults = true,
-    templates = defaultTemplates,
+    templates = {},
     transformData = null,
     singleRefine = false
   }) {
   var containerNode = utils.getContainerNode(container);
   var usage = 'Usage: refinementList({container, facetName, operator[sortBy, limit, rootClass, itemClass, templates.{header,item,footer}, transformData]})';
+  var defaultTemplates = {
+    header: '',
+    item: `<label>
+  <input type="checkbox" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}} <span>{{count}}</span>
+</label>`,
+    footer: ''
+  };
 
   if (container === null ||
     facetName === null ||
@@ -71,15 +69,11 @@ function refinementList({
     throw new Error(usage);
   }
 
-  if (templates !== defaultTemplates) {
-    templates = defaults({}, templates, defaultTemplates);
-  }
-
   return {
     getConfiguration: () => ({
       [operator === 'and' ? 'facets' : 'disjunctiveFacets']: [facetName]
     }),
-    render: function({results, helper}) {
+    render: function({results, helper, templatesConfig}) {
       var facetValues = results.getFacetValues(facetName, {sortBy: sortBy}).slice(0, limit);
 
       React.render(
@@ -87,6 +81,8 @@ function refinementList({
           cssClasses={cssClasses}
           facetValues={facetValues}
           templates={templates}
+          defaultTemplates={defaultTemplates}
+          templatesConfig={templatesConfig}
           transformData={transformData}
           hideWhenNoResults={hideWhenNoResults}
           hasResults={facetValues.length > 0}
diff --git a/widgets/stats/index.js b/widgets/stats/index.js
index 2d11069cf5..17bdaead07 100644
--- a/widgets/stats/index.js
+++ b/widgets/stats/index.js
@@ -1,24 +1,24 @@
 var React = require('react');
 
 var utils = require('../../lib/utils.js');
-var defaultTemplate = require('./template.html');
 var autoHide = require('../../decorators/autoHide');
 var Stats = autoHide(require('../../components/Stats'));
 
 function stats({
     container = null,
-    template = defaultTemplate,
+    template = null,
     transformData = null,
     hideWhenNoResults = true
   }) {
   var containerNode = utils.getContainerNode(container);
+  var defaultTemplate = require('./template.html');
 
   if (container === null) {
     throw new Error('Usage: stats({container[, template, transformData]})');
   }
 
   return {
-    render: function({results, templateHelpers}) {
+    render: function({results, templatesConfig}) {
       React.render(
         <Stats
           hasResults={results.hits.length > 0}
@@ -29,8 +29,9 @@ function stats({
           page={results.page}
           processingTimeMS={results.processingTimeMS}
           query={results.query}
-          templateHelpers={templateHelpers}
           template={template}
+          defaultTemplate={defaultTemplate}
+          templatesConfig={templatesConfig}
           transformData={transformData}
         />,
         containerNode
diff --git a/widgets/toggle.js b/widgets/toggle.js
index f5650e8454..708d1e7408 100644
--- a/widgets/toggle.js
+++ b/widgets/toggle.js
@@ -3,14 +3,6 @@ var React = require('react');
 
 var utils = require('../lib/utils.js');
 
-var defaultTemplates = {
-  header: '',
-  body: `<label>
-  <input type="checkbox" {{#isRefined}}checked{{/isRefined}} />{{label}} <span>{{count}}</span>
-</label>`,
-  footer: ''
-};
-
 var autoHide = require('../decorators/autoHide');
 var headerFooter = require('../decorators/headerFooter');
 var RefinementList = autoHide(headerFooter(require('../components/RefinementList')));
@@ -26,7 +18,7 @@ var RefinementList = autoHide(headerFooter(require('../components/RefinementList
  * @param  {String|String[]} [options.cssClasses.root=null]
  * @param  {Object} [options.templates] Templates to use for the widget
  * @param  {String|Function} [options.templates.header=''] Header template
- * @param  {String|Function} [options.templates.body='<label>{{label}}<input type="checkbox" {{#isRefined}}checked{{/isRefined}} /></label>'] Body template
+ * @param  {String|Function} [options.templates.item='<label>{{label}}<input type="checkbox" {{#isRefined}}checked{{/isRefined}} /></label>'] Body template
  * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the item template
  * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
@@ -36,7 +28,7 @@ function toggle({
     container = null,
     facetName = null,
     label = null,
-    templates = defaultTemplates,
+    templates = {},
     cssClasses = {
       root: null
     },
@@ -45,6 +37,19 @@ function toggle({
   }) {
   var containerNode = utils.getContainerNode(container);
   var usage = 'Usage: toggle({container, facetName, label[, template, transformData]})';
+  var defaultTemplates = {
+    header: '',
+    item: `<label>
+  <input type="checkbox" {{#isRefined}}checked{{/isRefined}} />{{label}} <span>{{count}}</span>
+</label>`,
+    footer: ''
+  };
+
+  var _templates = {
+    header: templates.header,
+    item: templates.body,
+    footer: templates.footer
+  };
 
   if (container === null || facetName === null || label === null) {
     throw new Error(usage);
@@ -54,7 +59,7 @@ function toggle({
     getConfiguration: () => ({
       facets: [facetName]
     }),
-    render: function({helper, results}) {
+    render: function({helper, results, templatesConfig}) {
       var isRefined = helper.hasRefinements(facetName);
       var values = find(results.getFacetValues(facetName), {name: isRefined.toString()});
 
@@ -64,16 +69,12 @@ function toggle({
         count: values && values.count || null
       };
 
-      var _templates = {
-        header: templates.header,
-        item: templates.body,
-        footer: templates.footer
-      };
-
       React.render(
         <RefinementList
           facetValues={[facetValue]}
           templates={_templates}
+          defaultTemplates={defaultTemplates}
+          templatesConfig={templatesConfig}
           cssClasses={cssClasses}
           transformData={prepareData(transformData)}
           hideWhenNoResults={hideWhenNoResults}