Handle indirect prototype references in Polymer invocation

Fixes #82 Element name could not be inferred error on paper-button

Author: dfreedm

lib/constants.js

@@ -22,6 +22,6 @@ module.exports = {
   JS_SRC: JS.split(',').map(function(s){ return s + '[src]'; }).join(','),
   JS_INLINE: JS.split(',').map(function(s) { return s + ':not([src])'; }).join(','),
   CSS: 'style:not([type]), style[type="text/css"]',
-  // Output match is [ 'Polymer(', NAME_OF_ELEMENT OR undefined, '{' OR ')' ]
-  POLYMER_INVOCATION: /Polymer\(([^,{]+)?(?:,\s*)?({|\))/
+  // Output match is [ 'Polymer(', NAME_OF_ELEMENT OR undefined, ',', { or )
+  POLYMER_INVOCATION: /Polymer\(([^,{]+)?(,\s*)?({|\))/
 };

lib/utils.js

@@ -5,6 +5,7 @@
  */
 var path = require('path');
 
+var constants = require('./constants.js');
 module.exports = {
   // directly update the textnode child of <style>
   // equivalent to <style>.textContent
@@ -37,5 +38,22 @@ module.exports = {
       inpath = inpath.split(path.sep).join('/');
     }
     return inpath;
+  },
+  processPolymerInvocation: function(elementName, invocation) {
+    var name = invocation[1] || '';
+    var split = invocation[2] || '';
+    var trailing = invocation[3];
+    var nameIsString = /^['"]/.test(name);
+    if (!split) {
+      // assume "name" is actually the prototype if it is not a string literal
+      if (!name || (name && !nameIsString)) {
+        trailing = name + trailing;
+        name = '\'' + elementName + '\'';
+      }
+      if (trailing !== ')') {
+        split = ',';
+      }
+    }
+    return 'Polymer(' + name + split + trailing;
   }
 };

lib/vulcan.js

@@ -226,16 +226,9 @@ function handleMainDocument() {
     var parentElement = el.closest('polymer-element').get(0);
     if (parentElement) {
       var match = constants.POLYMER_INVOCATION.exec(content);
-      // skip Polymer() calls that have the tag name
-      if (match && !match[1]) {
-        // get element name
-        var name = $(parentElement).attr('name');
-        // build the named Polymer invocation
-        var namedInvocation = 'Polymer(\'' + name + '\'' + (match[2] === '{' ? ',{' : ')');
-        content = content.replace(match[0], namedInvocation);
-        if (options.verbose) {
-          console.log(match[0], '->', namedInvocation);
-        }
+      if (match) {
+        var invocation = utils.processPolymerInvocation(elementName, match);
+        content.replace(match[0], invocation);
         setTextContent(el, content);
       }
     }

test/test.js

@@ -41,24 +41,6 @@ suite('constants', function() {
       assert('url("foo.html")'.match(url), 'double quote');
     });
 
-    test('Polymer Invocation', function() {
-      var polymer = constants.POLYMER_INVOCATION;
-
-      function test(invocation, expected, msg) {
-        var matches = polymer.exec(invocation);
-        assert(matches, 'polymer invocation found');
-        if (expected) {
-          var name = String(matches[1]).replace(/['"]/g, '');
-          assert.equal(name, expected);
-        }
-      }
-
-      test('Polymer(\'core-input\', {})', 'core-input', 'full');
-      test('Polymer()', null, 'none');
-      test('Polymer({})', null, 'partial');
-
-    });
-
   });
 
   suite('Path Resolver', function() {
@@ -158,4 +140,28 @@ suite('constants', function() {
     });
 
   });
+
+  suite('Utils', function() {
+    var utils = require('../lib/utils.js');
+
+    test('Polymer Invocation', function() {
+      var polymer = constants.POLYMER_INVOCATION;
+
+      function test(invocation, expected, msg) {
+        var matches = polymer.exec(invocation);
+        assert(matches, 'polymer invocation found');
+        var replacement = utils.processPolymerInvocation('core-input', matches);
+        var actual = invocation.replace(matches[0], replacement);
+        assert.strictEqual(actual, expected, msg);
+      }
+
+      test('Polymer(\'core-input\', {})', 'Polymer(\'core-input\', {})', 'full');
+      test('Polymer(\'core-input\')', 'Polymer(\'core-input\')', 'name-only');
+      test('Polymer()', 'Polymer(\'core-input\')', 'none');
+      test('Polymer({})', 'Polymer(\'core-input\',{})', 'object-only');
+      test('Polymer(p)', 'Polymer(\'core-input\',p)', 'indirect');
+
+    });
+
+  });
 });