From 37fd5ffe8e4ac6fc6af1db7db0fd80df75e4d9e6 Mon Sep 17 00:00:00 2001 From: Tim van der Lippe Date: Wed, 21 Feb 2018 13:04:06 +0100 Subject: [PATCH 01/16] Add mixin to automatically detect capitalized HTML attributes --- externs/closure-types.js | 17 +++- lib/utils/attribute-capitalization-mixin.html | 80 +++++++++++++++++++ test/unit/attribute-capitalization.html | 58 ++++++++++++++ .../utils/attribute-capitalization-mixin.d.ts | 47 +++++++++++ 4 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 lib/utils/attribute-capitalization-mixin.html create mode 100644 test/unit/attribute-capitalization.html create mode 100644 types/lib/utils/attribute-capitalization-mixin.d.ts diff --git a/externs/closure-types.js b/externs/closure-types.js index 0cabb51658..5159c4d1c2 100644 --- a/externs/closure-types.js +++ b/externs/closure-types.js @@ -1374,4 +1374,19 @@ Polymer_ArraySelectorMixin.prototype.select = function(item){}; * @param {number} idx Index from `items` array to select * @return {void} */ -Polymer_ArraySelectorMixin.prototype.selectIndex = function(idx){}; \ No newline at end of file +Polymer_ArraySelectorMixin.prototype.selectIndex = function(idx){}; +/** +* @interface +* @extends {Polymer_PropertyEffects} +*/ +function Polymer_AttributeCapitalization(){} +/** +* @override +* @param {Node} node Node to parse +* @param {TemplateInfo} templateInfo Template metadata for current template +* @param {NodeInfo} nodeInfo Node metadata for current template node +* @param {*} name +* @param {*} value +* @return {boolean} +*/ +Polymer_AttributeCapitalization._parseTemplateNodeAttribute = function(node, templateInfo, nodeInfo, name, value){}; \ No newline at end of file diff --git a/lib/utils/attribute-capitalization-mixin.html b/lib/utils/attribute-capitalization-mixin.html new file mode 100644 index 0000000000..d3d856789d --- /dev/null +++ b/lib/utils/attribute-capitalization-mixin.html @@ -0,0 +1,80 @@ + + + + + + diff --git a/test/unit/attribute-capitalization.html b/test/unit/attribute-capitalization.html new file mode 100644 index 0000000000..f7927a822f --- /dev/null +++ b/test/unit/attribute-capitalization.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + diff --git a/types/lib/utils/attribute-capitalization-mixin.d.ts b/types/lib/utils/attribute-capitalization-mixin.d.ts new file mode 100644 index 0000000000..0188ffeb3e --- /dev/null +++ b/types/lib/utils/attribute-capitalization-mixin.d.ts @@ -0,0 +1,47 @@ +/** + * DO NOT EDIT + * + * This file was automatically generated by + * https://github.com/Polymer/gen-typescript-declarations + * + * To modify these typings, edit the source file(s): + * lib/utils/attribute-capitalization-mixin.html + */ + +/// +/// +/// + +declare namespace Polymer { + + + /** + * Mixin that uses an heuristic to determine the capitalization of HTML + * attributes. By default, all attributes are lowercased. However, some + * native attributes have capitalization. `Element.attributes` only returns + * capitalized attributes if the attribute name is exactly equal to the attribute. + * In other words, `viewBox$` will be lowercased to `viewbox$`. Therefore, if + * an attribute name still has capitaliation, we use an attribute effect to + * update the bindings. + */ + function AttributeCapitalization {}>(base: T): T & AttributeCapitalizationConstructor & Polymer.PropertyEffectsConstructor & Polymer.TemplateStampConstructor & Polymer.PropertyAccessorsConstructor & Polymer.PropertiesChangedConstructor; + + interface AttributeCapitalizationConstructor { + new(...args: any[]): AttributeCapitalization; + + /** + * Overrides default `PropertyEffects` implementation to automatically + * detect capitalized attributes. + * + * @param node Node to parse + * @param templateInfo Template metadata for current template + * @param nodeInfo Node metadata for current template node + * @returns `true` if the visited node added node-specific + * metadata to `nodeInfo` + */ + _parseTemplateNodeAttribute(node: Node|null, templateInfo: TemplateInfo|null, nodeInfo: NodeInfo|null, name: any, value: any): boolean; + } + + interface AttributeCapitalization { + } +} From d45dd5750c56bf1586e6c0b00ae89ab6015fa08f Mon Sep 17 00:00:00 2001 From: Tim van der Lippe Date: Wed, 28 Feb 2018 13:12:09 +0100 Subject: [PATCH 02/16] Put attribute capitalization fix in property-effects --- externs/closure-types.js | 17 +--- lib/mixins/property-effects.html | 7 +- lib/utils/attribute-capitalization-mixin.html | 80 ------------------- test/unit/attribute-capitalization.html | 58 -------------- test/unit/property-effects-elements.html | 22 +++++ test/unit/property-effects.html | 17 ++++ .../utils/attribute-capitalization-mixin.d.ts | 47 ----------- 7 files changed, 46 insertions(+), 202 deletions(-) delete mode 100644 lib/utils/attribute-capitalization-mixin.html delete mode 100644 test/unit/attribute-capitalization.html delete mode 100644 types/lib/utils/attribute-capitalization-mixin.d.ts diff --git a/externs/closure-types.js b/externs/closure-types.js index 5159c4d1c2..0cabb51658 100644 --- a/externs/closure-types.js +++ b/externs/closure-types.js @@ -1374,19 +1374,4 @@ Polymer_ArraySelectorMixin.prototype.select = function(item){}; * @param {number} idx Index from `items` array to select * @return {void} */ -Polymer_ArraySelectorMixin.prototype.selectIndex = function(idx){}; -/** -* @interface -* @extends {Polymer_PropertyEffects} -*/ -function Polymer_AttributeCapitalization(){} -/** -* @override -* @param {Node} node Node to parse -* @param {TemplateInfo} templateInfo Template metadata for current template -* @param {NodeInfo} nodeInfo Node metadata for current template node -* @param {*} name -* @param {*} value -* @return {boolean} -*/ -Polymer_AttributeCapitalization._parseTemplateNodeAttribute = function(node, templateInfo, nodeInfo, name, value){}; \ No newline at end of file +Polymer_ArraySelectorMixin.prototype.selectIndex = function(idx){}; \ No newline at end of file diff --git a/lib/mixins/property-effects.html b/lib/mixins/property-effects.html index 2afd52319e..cdcf0ed32a 100644 --- a/lib/mixins/property-effects.html +++ b/lib/mixins/property-effects.html @@ -43,6 +43,9 @@ READ_ONLY: '__readOnly' }; + /** @const {string} */ + const capitalAttributeRegex = /[A-Z]/; + /** * @typedef {{ * name: (string | undefined), @@ -2530,7 +2533,9 @@ // Attribute or property let origName = name; let kind = 'property'; - if (name[name.length-1] == '$') { + if (capitalAttributeRegex.test(name)) { + kind = 'attribute'; + } else if (name[name.length-1] == '$') { name = name.slice(0, -1); kind = 'attribute'; } diff --git a/lib/utils/attribute-capitalization-mixin.html b/lib/utils/attribute-capitalization-mixin.html deleted file mode 100644 index d3d856789d..0000000000 --- a/lib/utils/attribute-capitalization-mixin.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - diff --git a/test/unit/attribute-capitalization.html b/test/unit/attribute-capitalization.html deleted file mode 100644 index f7927a822f..0000000000 --- a/test/unit/attribute-capitalization.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/test/unit/property-effects-elements.html b/test/unit/property-effects-elements.html index aeeee70e43..ecfca10c0c 100644 --- a/test/unit/property-effects-elements.html +++ b/test/unit/property-effects-elements.html @@ -7,6 +7,8 @@ Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> + +