feat(sifrr-dom): add onPropsChange function

sifrr · Oct 1, 2019 · 48f729e · 48f729e
1 parent e03e3fc
commit 48f729e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/packages/browser/sifrr-dom/package.json b/packages/browser/sifrr-dom/package.json
@@ -33,8 +33,7 @@
     "test": "node ../../../scripts/test/run.js ./packages/browser/sifrr-dom",
     "build": "yarn rollup -c",
     "test-build": "cd test/public && yarn build",
-    "test-server": "yarn test -s",
-    "benchmark": "node benchmark/runbenchmark.js"
+    "test-server": "yarn test -s"
   },
   "dependencies": {},
   "peerDependencies": {},

diff --git a/packages/browser/sifrr-dom/src/dom/update.js b/packages/browser/sifrr-dom/src/dom/update.js
@@ -45,16 +45,21 @@ export default function update(element, stateMap) {
 
     // props
     if (data.props) {
+      const dirty = dom.onPropsChange ? [] : false;
       for (let i = data.props.length - 1; i > -1; --i) {
         const newValue = evaluateBindings(data.props[i][1], element);
         if (data.props[i][0] === 'style') {
           const keys = Object.keys(newValue),
             l = keys.length;
           for (let i = 0; i < l; i++) {
-            dom.style[keys[i]] = newValue[keys[i]];
+            if (dom.style[keys[i]] !== newValue[keys[i]]) dom.style[keys[i]] = newValue[keys[i]];
           }
-        } else if (newValue !== dom[data.props[i][0]]) dom[data.props[i][0]] = newValue;
+        } else if (newValue !== dom[data.props[i][0]]) {
+          dom[data.props[i][0]] = newValue;
+          dirty && dirty.push(data.props[i][0]);
+        }
       }
+      dirty && dirty.length > 0 && dom.onPropsChange(dirty);
     }
 
     // update attributes

diff --git a/packages/browser/sifrr-dom/test/browser/dom/update.test.js b/packages/browser/sifrr-dom/test/browser/dom/update.test.js
@@ -26,15 +26,22 @@ describe('Update and updateAttribute', () => {
     const propValue = await page.evaluate(() => su.$('#props').prop);
     const prop2Value = await page.evaluate(() => su.$('#props').prop2);
     const camelCasePropValue = await page.evaluate(() => su.$('#props').camelCase);
-    const stateValue = await page.evaluate(() => su.$('#props').state);
+    const stateValue = await page.evaluate(() => {
+      su.$('#props').onPropsChange = function(d) {
+        this._dirty = d;
+      };
+      return su.$('#props').state;
+    });
     await setState({ inner: { bang: 'bang' } });
     const stateValueNew = await page.evaluate(() => su.$('#props').state);
+    const dirty = await page.evaluate(() => su.$('#props')._dirty);
 
     assert.equal(propValue, 'prop', 'works with binding prop');
     assert.equal(prop2Value, 'ok', 'works with string prop');
     assert.equal(camelCasePropValue, 'ok', 'works with hyphen case prop');
     assert.deepEqual(stateValue, { prop: 'prop' });
     assert.deepEqual(stateValueNew, { bang: 'bang' });
+    assert.deepEqual(dirty, ['stateProp']);
   });
 
   it("doesn't rerender other things when updating text", async () => {

diff --git a/packages/browser/sifrr-dom/test/public/elements/sifrr/update.html b/packages/browser/sifrr-dom/test/public/elements/sifrr/update.html
@@ -13,6 +13,7 @@
     :prop2="ok"
     :camel-case="ok"
     :state="${this.state.inner}"
+    :state-prop="${this.state.inner}"
   ></div>
 </template>
 <script type="text/javascript">

diff --git a/packages/browser/sifrr-dom/test/public/update.html b/packages/browser/sifrr-dom/test/public/update.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
-  <head>
-  </head>
+  <head> </head>
   <body>
     <sifrr-update></sifrr-update>
     <script src="/sifrr.fetch.min.js" charset="utf-8"></script>