Fixes #314 - Remove hyphens from include props

runtime/deprecateHyphens.js

@@ -0,0 +1,46 @@
+var copyProp;
+
+var maxWarn = 50;
+var currentWarn = 0;
+
+function deprecateWarning(deprecatedName) {
+    console.warn('Deprecated: Use the unhyphenated name instead for reading "' + deprecatedName +
+        '" - WARNING: This will not be allowed in the future.');
+}
+
+function copyPropNoWarn(obj, deprecatedName, targetName) {
+    obj[deprecatedName] = obj[targetName];
+}
+
+if (Object.defineProperty) {
+    copyProp = function(obj, deprecatedName, targetName) {
+        Object.defineProperty(obj, deprecatedName, {
+          get: function() {
+              deprecateWarning(deprecatedName);
+              return obj[targetName];
+          },
+          set: function(newValue) {
+              deprecateWarning(deprecatedName);
+              obj[targetName] = newValue;
+          },
+          enumerable: true
+        });
+    };
+} else {
+    copyProp = copyPropNoWarn;
+}
+
+module.exports = function(obj, names) {
+    var args = arguments;
+    for (var i=1, len=args.length; i<len; i+=2) {
+        var deprecatedName = args[i];
+        var targetName = args[i+1];
+        copyProp(obj, deprecatedName, targetName);
+    }
+
+    if (++currentWarn >= maxWarn) {
+        copyProp = copyPropNoWarn;
+    }
+
+    return obj;
+};

taglibs/core/include-tag.js

@@ -1,4 +1,6 @@
 'use strict';
+var removeHyphens = require('../../compiler/util/removeDashes');
+var deprecateHyphensPath = require.resolve('../../runtime/deprecateHyphens');
 
 module.exports = function codeGenerator(el, codegen) {
     let argument = el.argument;
@@ -25,10 +27,27 @@ module.exports = function codeGenerator(el, codegen) {
         templateVar = templatePath;
     }
 
+    var deprecateHyphensArgs = [];
+
+
     let templateData = {};
     let attrs = el.getAttributes();
     attrs.forEach((attr) => {
-        templateData[attr.name] = attr.value;
+        var propName = attr.name;
+        if (propName.indexOf('-') !== -1) {
+            // For now, we will add both the property name converted to camel
+            // case and a getter that allows the property to still be accessed
+            // with the hyphens. This was done to prevent breaking applications
+            // that may be accessing properties with the hyphen due to the following
+            // bug: https://github.com/marko-js/marko/issues/314
+            //
+            // This code should be removed in the future.
+            deprecateHyphensArgs.push(builder.literal(propName)); // Append the hyphenated property name
+            propName = removeHyphens(propName); // Convert the property name to camel case
+            deprecateHyphensArgs.push(builder.literal(propName)); // Append the target camel-cased property name
+        }
+
+        templateData[propName] = attr.value;
     });
 
     if (el.body && el.body.length) {
@@ -49,6 +68,18 @@ module.exports = function codeGenerator(el, codegen) {
         templateData = builder.literal(templateData);
     }
 
+    if (deprecateHyphensArgs.length) {
+        // We import a helper function into the template to allow the properties to
+        // still be accessed with the hyphenated name while showing a deprecation warning.
+        // 
+        // This compiled code is being added due to the following bug:
+        // https://github.com/marko-js/marko/issues/314
+        //
+        // It should be removed in the future.
+        var deprecateHyphensVar = codegen.importModule('deprecateHyphens', deprecateHyphensPath);
+        templateData = builder.functionCall(deprecateHyphensVar, [templateData].concat(deprecateHyphensArgs));
+    }
+
     let renderMethod = builder.memberExpression(templateVar, builder.identifier('render'));
     let renderArgs = [ templateData, 'out' ];
     let renderFunctionCall = builder.functionCall(renderMethod, renderArgs);

test/autotests/render/include-hyphen-attrs-max-warn/expected.html

@@ -0,0 +1 @@
+Hello Frank! You have 20 new messages.Hello Jane! You have 30 new messages.

test/autotests/render/include-hyphen-attrs-max-warn/include-target.marko

@@ -0,0 +1 @@
+- Hello ${data['first-name']}! You have ${data.count} new messages.

test/autotests/render/include-hyphen-attrs-max-warn/template.marko

@@ -0,0 +1,3 @@
+<for(i=0; i<60; i++)>
+    <include("./include-target.marko") first-name='Frank' count=i/>
+</for>

test/autotests/render/include-hyphen-attrs-max-warn/test.js

@@ -0,0 +1 @@
+exports.templateData = {};

test/autotests/render/include-hyphen-attrs-multiple/expected.html

@@ -0,0 +1 @@
+Hello Frank Smith!Hello Jane Doe!

test/autotests/render/include-hyphen-attrs-multiple/include-target.marko

@@ -0,0 +1 @@
+- Hello ${data.firstName} ${data.lastName}!

test/autotests/render/include-hyphen-attrs-multiple/template.marko

@@ -0,0 +1,2 @@
+<include("./include-target.marko") first-name='Frank' last-name='Smith'/>
+<include("./include-target.marko") firstName='Jane' lastName='Doe'/>

test/autotests/render/include-hyphen-attrs-multiple/test.js

@@ -0,0 +1 @@
+exports.templateData = {};

test/autotests/render/include-hyphen-attrs/expected.html

@@ -0,0 +1 @@
+Hello Frank! You have 20 new messages.Hello Jane! You have 30 new messages.

test/autotests/render/include-hyphen-attrs/include-target.marko

@@ -0,0 +1 @@
+- Hello ${data.firstName}! You have ${data.count} new messages.

test/autotests/render/include-hyphen-attrs/template.marko

@@ -0,0 +1,2 @@
+<include("./include-target.marko") first-name='Frank' count=20/>
+<include("./include-target.marko") firstName='Jane' count=30/>

test/autotests/render/include-hyphen-attrs/test.js

@@ -0,0 +1 @@
+exports.templateData = {};