feat(sifrr-dom): change data-sifrr-key to :key

packages/browser/sifrr-dom/README.md

@@ -580,8 +580,8 @@ parses array to dom nodes in bindings
 
 <template>
 <!-- data-sifrr-repeat should be binded to an array data which you want to repeat for inside element
-   data-sifrr-key is key of individual data which will be used in keyed updates/reconciliation -->
-  <div data-sifrr-repeat="${this.state.data}" data-sifrr-key="id">
+   :key is key of individual data which will be used in keyed updates/reconciliation -->
+  <div data-sifrr-repeat="${this.state.data}" :key="id">
     <custom-array></custom-array> // data-sifrr-repeat should contain only one element node
   <div>
 </template>
@@ -603,7 +603,7 @@ then, `<custom-tag></custom-tag>` will render:
 ```html
 <custom-tag>
   #shadow-root
-  <div data-sifrr-key="id">
+  <div :key="id">
     <custom-array>
       #shadow-root
       <p>1</p>
@@ -625,8 +625,8 @@ then, `<custom-tag></custom-tag>` will render:
 
 <template>
 <!-- data-sifrr-repeat should be binded to an array data which you want to repeat for inside element
-   data-sifrr-key is key of individual data which will be used in keyed updates/reconciliation -->
-  <div data-sifrr-repeat="${this.state.data}" data-sifrr-key="${this.state.key}">
+   :key is key of individual data which will be used in keyed updates/reconciliation -->
+  <div data-sifrr-repeat="${this.state.data}" :key="${this.state.key}">
     <div> // data-sifrr-repeat should contain only one node
       <p>${this.state.id}</p>
     </div>
@@ -647,7 +647,7 @@ then, `<custom-tag></custom-tag>` will render:
 ```html
 <custom-tag>
   #shadow-root
-  <div data-sifrr-key="id">
+  <div :key="id">
     <div>
       <p>1</p>
     </div>

packages/browser/sifrr-dom/src/dom/constants.js

@@ -14,6 +14,6 @@ export const OUTER_REGEX = new RegExp(reg, 'g');
 export const STATE_REGEX = /^\$\{this\.state\.([a-zA-Z0-9_$]+)\}$/;
 export const HTML_ATTR = 'data-sifrr-html';
 export const REPEAT_ATTR = 'data-sifrr-repeat';
-export const KEY_ATTR = 'data-sifrr-key';
+export const KEY_ATTR = ':key';
 export const BIND_ATTR = 'data-sifrr-bind';
 export const DEFAULT_STATE_ATTR = 'data-sifrr-default-state';

packages/browser/sifrr-dom/src/dom/creator.js

@@ -53,13 +53,14 @@ export default function creator(el, defaultState) {
       if (attribute.name[0] === '_') {
         // state binding
         eventMap.push([attribute.name, getBindingFxns(attribute.value)]);
-      } else if (attribute.name[0] === ':') {
+      } else if (attribute.name[0] === ':' && attribute.name[0] !== ':key') {
         if (attribute.name.substr(1) === 'state') {
           sm['state'] = getBindingFxns(attribute.value);
         } else {
           // Array contents -> 0: property name, 1: binding
           propMap.push([attribute.name.substr(1), getBindingFxns(attribute.value)]);
         }
+        el.removeAttribute(attribute.name);
       } else {
         // Don't treat style differently because same performance https://jsperf.com/style-property-vs-style-attribute/2
         const binding = getStringBindingFxn(attribute.value);

packages/browser/sifrr-dom/test/browser/dom/element.test.js

@@ -118,14 +118,6 @@ describe('Sifrr.Dom.Element', () => {
       assert.equal(nosrhtml, '<p>Sifrr ps Simple</p>');
     });
 
-    it('works with attribute state', async () => {
-      const srhtml = await page.$eval('element-as-sr', el => el.shadowRoot.innerHTML);
-      const nosrhtml = await page.$eval('element-as-nosr', el => el.innerHTML);
-
-      assert.equal(srhtml, '<p>Sifrr as Simple</p>');
-      assert.equal(nosrhtml, '<p>Sifrr as Simple</p>');
-    });
-
     it('updates only once on connect', async () => {
       const res = await page.evaluate(() => {
         const types = ['element-nods', 'element-ds', 'element-ps', 'element-as'],

packages/browser/sifrr-dom/test/public/elements/main/element.js

@@ -57,7 +57,7 @@ const template = `<link href="./css/currentStyle.css" rel="stylesheet">
     </div>
   </div>
   <table class="table table-hover table-striped test-data">
-    <tbody data-sifrr-repeat=\${this.state.data} data-sifrr-key='${keyedKey}' data-sifrr-default-state='{"class":false}'>
+    <tbody data-sifrr-repeat=\${this.state.data} :key='${keyedKey}' data-sifrr-default-state='{"class":false}'>
       <tr class=\${this.state.class}>
         <td class='col-md-1 id'>\${this.state.id}</td>
         <td class='col-md-4'><a class='lbl'>\${this.state.label}</a></td>