feat: double binds upgraded props - setting a corresponding attribute…

… will upgrade its upgraded prop
geotrev · Jan 31, 2022 · f415994 · f415994
1 parent 1ce1244
commit f415994
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 16 deletions.
diff --git a/src/enums.js b/src/enums.js
@@ -27,7 +27,7 @@ export const External = {
 }
 
 export const Internal = {
-  // Primitives
+  // Properties
   rotomId: Symbol("#rotomId"),
   vnode: Symbol("#vnode"),
   isFirstRender: Symbol("#isFirstRender"),

diff --git a/src/properties/upgrade-property.js b/src/properties/upgrade-property.js
@@ -63,7 +63,10 @@ export const upgradeProperty = (
         if (reflected) {
           const attribute = camelToKebab(propName)
           const attrValue = String(value)
-          RotomInstance.setAttribute(attribute, attrValue)
+
+          if (RotomInstance.getAttribute(attribute) !== attrValue) {
+            RotomInstance.setAttribute(attribute, attrValue)
+          }
         }
       } else {
         delete RotomInstance[privateName]

diff --git a/src/rotom-factory.js b/src/rotom-factory.js
@@ -8,6 +8,8 @@ import {
   isFunction,
   camelToKebab,
   createUUID,
+  kebabToCamel,
+  isUndefined,
 } from "./utilities"
 
 const SHADOW_ROOT_MODE = "open"
@@ -60,6 +62,11 @@ export function rotomFactory(renderer) {
           oldValue,
           newValue
         )
+
+        const propName = kebabToCamel(name)
+        if (!isUndefined(this[propName]) && this[propName] !== newValue) {
+          this[propName] = newValue
+        }
       }
     }
 

diff --git a/src/utilities/transform-case.js b/src/utilities/transform-case.js
@@ -20,7 +20,7 @@ export const kebabToCamel = (value) =>
   value
     .split("-")
     .map((word, i) =>
-      i
+      i > 0
         ? word[0].toUpperCase() + word.slice(1).toLowerCase()
         : word.toLowerCase()
     )

diff --git a/test/jsx/fixtures/nested-element-test.js b/test/jsx/fixtures/nested-element-test.js
@@ -9,6 +9,10 @@ class NestedElementTest extends RotomElement {
         default: "lightgray",
         type: "string",
       },
+      name: {
+        default: "Chaos",
+        type: "string",
+      },
     }
   }
 
@@ -30,16 +34,26 @@ class NestedElementTest extends RotomElement {
     this.handleClick = this.handleClick.bind(this)
   }
 
+  getRandom(current, items) {
+    const newValue = items[Math.floor(Math.random() * items.length)]
+    if (newValue === current) return this.getRandom(current, items)
+    return newValue
+  }
+
   handleClick() {
-    this.borderColor = ["gray", "blue", "purple", "lime", "orange"][
-      Math.floor(Math.random() * 5)
-    ]
-    this.shadowRoot.querySelector("kitchen-sink-test").firstName = [
+    this.borderColor = this.getRandom(this.borderColor, [
+      "gray",
+      "blue",
+      "purple",
+      "lime",
+      "orange",
+    ])
+    this.name = this.getRandom(this.name, [
       "Mario",
       "Samus",
       "Luigi",
       "C Falcon",
-    ][Math.floor(Math.random() * 4)]
+    ])
   }
 
   render() {
@@ -55,7 +69,7 @@ class NestedElementTest extends RotomElement {
             borderColor: this.borderColor,
           }}
         >
-          <kitchen-sink-test first-name="Chaos" description="I'm nested!">
+          <kitchen-sink-test first-name={this.name} description="I'm nested!">
             <slot></slot>
           </kitchen-sink-test>
         </div>

diff --git a/test/template/fixtures/nested-element-test.js b/test/template/fixtures/nested-element-test.js
@@ -8,6 +8,10 @@ class NestedElementTest extends RotomElement {
         default: "lightgray",
         type: "string",
       },
+      name: {
+        default: "Chaos",
+        type: "string",
+      },
     }
   }
 
@@ -42,12 +46,9 @@ class NestedElementTest extends RotomElement {
     this.borderColor = ["gray", "blue", "purple", "lime", "orange"][
       Math.floor(Math.random() * 5)
     ]
-    this.shadowRoot.querySelector("kitchen-sink-test").firstName = [
-      "Mario",
-      "Samus",
-      "Luigi",
-      "C Falcon",
-    ][Math.floor(Math.random() * 4)]
+    this.name = ["Mario", "Samus", "Luigi", "C Falcon"][
+      Math.floor(Math.random() * 4)
+    ]
   }
 
   render() {
@@ -56,7 +57,7 @@ class NestedElementTest extends RotomElement {
         <p data-key="lede">This one is nested with inline styles.</p>
         <button data-key="updater" id="clicker">Click to update</button>
         <div data-key="nested" class="border" style="border-color: ${this.borderColor}">
-          <kitchen-sink-test first-name="Chaos" description="I'm nested!">
+          <kitchen-sink-test first-name="${this.name}" description="I'm nested!">
             <slot></slot>
           </kitchen-sink-test>
         </div>