Support derived attributes

src/core/browser.js

@@ -193,6 +193,9 @@ limitations under the License.
         'select',
         'textarea',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'autoPlay',
@@ -213,6 +216,9 @@ limitations under the License.
       [
         'input',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'challenge',
@@ -233,6 +239,9 @@ limitations under the License.
         'command',
         'input',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'cite',
@@ -348,6 +357,9 @@ limitations under the License.
         'select',
         'textarea',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'download',
@@ -463,6 +475,9 @@ limitations under the License.
       [
         'input',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'inputMode',
@@ -594,13 +609,19 @@ limitations under the License.
         'input',
         'select',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'muted',
       [
         'audio',
         'video',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'name',
@@ -626,6 +647,9 @@ limitations under the License.
       [
         'form',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'open',
@@ -684,6 +708,9 @@ limitations under the License.
         'input',
         'textarea',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'rel',
@@ -700,6 +727,9 @@ limitations under the License.
         'select',
         'textarea',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'reversed',
@@ -746,6 +776,9 @@ limitations under the License.
       [
         'option',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'shape',
@@ -760,6 +793,9 @@ limitations under the License.
         'input',
         'select',
       ],
+      {
+        derived: true,
+      },
     ],
     [
       'sizes',
@@ -884,6 +920,10 @@ limitations under the License.
         'progress',
         'param',
       ],
+      {
+        derived: true,
+        normalize: false,
+      },
     ],
     [
       'width',
@@ -1050,8 +1090,16 @@ limitations under the License.
   ];
 
   const supportedAttributes = new Map();
-  for (const [key, whitelist] of SUPPORTED_ATTRIBUTES) {
-    supportedAttributes.set(key, whitelist || '*');
+  const derivedAttributes = [];
+  for (const [key, whitelist, config] of SUPPORTED_ATTRIBUTES) {
+    const options = {
+      whitelist: whitelist || '*',
+      config: config || {},
+    };
+    supportedAttributes.set(key, options);
+    if (config && config.derived) {
+      derivedAttributes.push(key);
+    }
   }
 
   const Browser = {
@@ -1060,14 +1108,22 @@ limitations under the License.
       return supportedAttributes.has(key);
     },
 
+    isAttributeDerived(key) {
+      return derivedAttributes.includes(key);
+    },
+
     isAttributeValid(key, element) {
-      const whitelist = supportedAttributes.get(key);
-      if (whitelist) {
-        return whitelist === '*' || whitelist.includes(element);
+      const options = supportedAttributes.get(key);
+      if (options) {
+        return options.whitelist === '*' || options.whitelist.includes(element);
       }
       return false;
     },
 
+    getDerivedAttributes() {
+      return derivedAttributes;
+    },
+
     getValidElementNamesFor(key) {
       return supportedAttributes.get(key);
     },

src/core/diff.js

@@ -237,14 +237,19 @@ limitations under the License.
       const changed = attrs.filter(
           attr => nextAttrs.includes(attr) && current[attr] !== next[attr]);
 
-      for (let attr of added) {
-        this.addPatch(Patch.setAttribute(attr, next[attr], target, isCustom));
+      for (let attr of added.concat(changed)) {
+        if (opr.Toolkit.Browser.isAttributeDerived(attr)) {
+          this.addPatch(Patch.setProperty(attr, next[attr], target));
+        } else {
+          this.addPatch(Patch.setAttribute(attr, next[attr], target, isCustom));
+        }
       }
       for (let attr of removed) {
-        this.addPatch(Patch.removeAttribute(attr, target, isCustom));
-      }
-      for (let attr of changed) {
-        this.addPatch(Patch.setAttribute(attr, next[attr], target, isCustom));
+        if (opr.Toolkit.Browser.isAttributeDerived(attr)) {
+          this.addPatch(Patch.deleteProperty(attr, target));
+        } else {
+          this.addPatch(Patch.removeAttribute(attr, target, isCustom));
+        }
       }
     }
 

test/diff-calculate.spec.js

@@ -77,7 +77,7 @@ describe('Diff => calculate patches', () => {
       const nextTemplate = [
         'input',
         {
-          value: 'next',
+          title: 'foobar',
         },
       ];
 
@@ -90,8 +90,8 @@ describe('Diff => calculate patches', () => {
       assert.equal(patches.length, 2);
       assert.equal(patches[0].type, Patch.Type.SET_ATTRIBUTE);
       assert(patches[0].target.isElement());
-      assert.equal(patches[0].name, 'value');
-      assert.equal(patches[0].value, 'next');
+      assert.equal(patches[0].name, 'title');
+      assert.equal(patches[0].value, 'foobar');
 
       assertUpdatesNode(patches[1], element);
     });

test/server.js

@@ -8,6 +8,8 @@ const PORT = 3033;
 app.set('port', PORT);
 
 app.use('/', express.static('test'));
+app.use('/functional', express.static('test/functional'));
+app.use('/introspector', express.static('test/web/introspector'));
 app.use('/config', express.static('test/config'));
 app.use('/src', express.static('src'));
 app.use('/core', express.static('src/core'));