customization: templates: namespace feature as item.feature

by moving the actual feature data one level down we can add metadata to
the top level of the object, such as `active`, `index`, and
`searchTerm`, so the template can use

${item.feature.properties} ${item.active}

that way the meta properties don’t conflict with the geo data itself

Author: mxlje

README.md

@@ -153,7 +153,7 @@ If you want to customize how a feature is turned into a string for rendering (in
 ```html
 <ge-autocomplete api_key="…">
   <template string>
-    ${feature.properties.name} (${feature.properties.id}, ${feature.properties.source})
+    ${item.feature.properties.name} (${item.feature.properties.id}, ${item.feature.properties.source})
   </template>
 </ge-autocomplete>
 ```
@@ -167,15 +167,15 @@ Similar to the string template mentioned above, you can use the row template to
 ```html
 <ge-autocomplete api_key="…">
   <template row>
-    <div class="custom-row ${feature.active ? 'custom-row--active' : null}">
-      <img src="/flags/${feature.properties.country_a.png}" alt="${feature.properties.country_a}">
-      <span>${feature.properties.label}</span>
+    <div class="custom-row ${item.active ? 'custom-row--active' : null}">
+      <img src="/flags/${item.feature.properties.country_a.png}" alt="${item.feature.properties.country_a}">
+      <span>${item.feature.properties.label}</span>
     </div>
   </template>
 </ge-autocomplete>
 ```
 
-**Pro Tip™:** Use the `active` property to check if the current row is being hovered over or activated via arrow keys.
+**Pro Tip™:** Use the `item.active` property to check if the current row is being hovered over or activated via arrow keys.
 
 The example above could render a little flag icon for the result’s country, for example. You can customize the styling by defining custom classes in the same way you would customize the CSS variables. It’s best to prefix your classes to avoid conflicts with internal classnames of the element.
 

src/autocomplete/autocomplete.js

@@ -107,9 +107,9 @@ export default ({
   }
 
   // turns an autocomplete result (feature) into a string
-  const itemToString = (feature) => {
+  const itemToString = (feature, extra) => {
     if (typeof stringTemplate === 'function') {
-      return stringTemplate(escape(feature))
+      return stringTemplate({feature, ...extra})
     }
 
     return feature.properties.label
@@ -166,12 +166,15 @@ export default ({
               return <li
                 key={item.properties.id}
                 {...getItemProps({ item, index })}
-                dangerouslySetInnerHTML={{ __html: rowTemplate(escape({
-                  ...item,
-                  active: highlightedIndex === index
-                })) }}
-              />
-            } else {
+                dangerouslySetInnerHTML={{
+                  __html: rowTemplate({
+                    feature: escape(item),
+                    active: highlightedIndex === index,
+                    searchTerm: inputRef.current.value,
+                    index
+                  })}}
+                  />
+                } else {
               return <li
                 className={
                   highlightedIndex === index
@@ -182,7 +185,11 @@ export default ({
                 {...getItemProps({ item, index })}
               >
                 <LocationMarker className='result-item-icon' />
-                {itemToString(item)}
+                {itemToString(item, {
+                  active: highlightedIndex === index,
+                  searchTerm: inputRef.current.value,
+                  index
+                })}
               </li>
             }
           })}

src/index.js

@@ -164,7 +164,7 @@ class GEAutocomplete extends HTMLElement {
 
       this[k] = _template(
         _unescape(tmpl.innerHTML.trim()), // unescape is important for `<%` etc. lodash tags
-        { variable: 'feature' } // namespace the passed in Feature as `feature` so missing keys don’t throw
+        { variable: 'item' } // namespace the passed in item so missing keys don’t throw
       )
 
       // contrary to the way custom styles are handled above we remove the <template> when we’re done