feat(sifrr-dom): all sifrr props are prefixed with sifrr (`sifrrKey…

…`, `sifrrDefaultState`)

packages/browser/sifrr-dom/README.md

@@ -320,9 +320,11 @@ Sifrr.Dom.setup(config);
 ### props
 
 - props do not trigger re-renders
-- this in props is parent sifrr element and not the element itself
-- props don't work when element has no sifrr element
+- `this` context in props binding is parent sifrr element and not the element itself
+- props don't work when the element has no parent sifrr element
 - props should always be binded, props without bindings won't work (use normal attributes for that)
+- props are case insensitive
+- props in hyphen-case will be conveted to camel-case property name, i.e. `some-thing` => `someThing`
 
 ```html
 <custom-tag :prop="${this.something}"></custom-tag>

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

@@ -14,6 +14,4 @@ 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 = ':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

@@ -8,6 +8,10 @@ import repeatref from './repeatref';
 import { getBindingFxns, getStringBindingFxn } from './bindings';
 import updateAttribute from './updateattribute';
 
+function attrToProp(attrName) {
+  return attrName.substr(1).replace(/-([a-z])/g, g => g[1].toUpperCase());
+}
+
 export default function creator(el, defaultState) {
   if (el.nodeType === TEXT_NODE || el.nodeType === COMMENT_NODE) {
     const x = el.data;
@@ -53,12 +57,12 @@ export default function creator(el, defaultState) {
       if (attribute.name[0] === '_') {
         // state binding
         eventMap.push([attribute.name, getBindingFxns(attribute.value)]);
-      } else if (attribute.name[0] === ':' && attribute.name[0] !== ':key') {
+      } else if (attribute.name[0] === ':') {
         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)]);
+          propMap.push([attrToProp(attribute.name), getBindingFxns(attribute.value)]);
         }
         el.removeAttribute(attribute.name);
       } else {

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

@@ -1,14 +1,10 @@
 import simpleElement from './simpleelement';
 import { getStringBindingFxn } from './bindings';
-import { KEY_ATTR, REPEAT_ATTR, DEFAULT_STATE_ATTR } from './constants';
+import { REPEAT_ATTR } from './constants';
 
 export default (sm, el) => {
   sm.type = 3;
-  let defaultState;
-  if (el.hasAttribute(DEFAULT_STATE_ATTR))
-    defaultState = JSON.parse(el.getAttribute(DEFAULT_STATE_ATTR));
-  sm.se = simpleElement(el.childNodes, defaultState);
+  sm.se = simpleElement(el.childNodes, el.sifrrDefaultState);
   sm.text = getStringBindingFxn(el.getAttribute(REPEAT_ATTR));
-  sm.keyed = el.hasAttribute(KEY_ATTR);
   el.removeAttribute(REPEAT_ATTR);
 };

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

@@ -8,7 +8,7 @@ function sifrrClone(newState) {
   const clone = this.cloneNode(true);
   clone.root = this._root;
   clone._refs = collect(clone, this.stateMap);
-  clone.state = Object.assign({}, this.defaultState, newState);
+  clone.state = Object.assign({}, this.sifrrDefaultState, newState);
   clone.getState = this.stateProps.getState;
   clone.setState = this.stateProps.setState;
   update(clone, this.stateMap);
@@ -33,7 +33,7 @@ export default function SimpleElement(content, defaultState = null) {
     }
     return content;
   }
-  content.defaultState = defaultState;
+  content.sifrrDefaultState = defaultState;
   content.stateMap = create(content, creator, defaultState);
   content.sifrrClone = sifrrClone;
   content.stateProps = {

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

@@ -2,7 +2,7 @@ import { makeChildrenEqual } from './makeequal';
 import { makeChildrenEqualKeyed } from './keyed';
 import updateAttribute from './updateattribute';
 import { evaluateBindings } from './bindings';
-import { TEMPLATE, KEY_ATTR } from './constants';
+import { TEMPLATE } from './constants';
 import shouldMerge from '../utils/shouldmerge';
 
 export default function update(element, stateMap) {
@@ -72,11 +72,9 @@ export default function update(element, stateMap) {
     if (!newValue || newValue.length === 0) dom.textContent = '';
     else if (data.type === 3) {
       // repeaing node
-      let key;
-      // eslint-disable-next-line no-inner-declarations
       data.se._root = element;
-      if (data.keyed && (key = dom.getAttribute(KEY_ATTR))) {
-        makeChildrenEqualKeyed(dom, newValue, data.se.sifrrClone.bind(data.se), key);
+      if (dom.sifrrKey) {
+        makeChildrenEqualKeyed(dom, newValue, data.se.sifrrClone.bind(data.se), dom.sifrrKey);
       } else makeChildrenEqual(dom, newValue, data.se.sifrrClone.bind(data.se));
     } else {
       // html node

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} :key='${keyedKey}' data-sifrr-default-state='{"class":false}'>
+    <tbody data-sifrr-repeat=\${this.state.data} :sifrr-key='\${"${keyedKey}"}' :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>