From 586f806c268641d68996403c93e42cedc9f56fa2 Mon Sep 17 00:00:00 2001
From: Jacob Wright <jacwright@gmail.com>
Date: Mon, 27 Aug 2018 11:35:27 -0600
Subject: [PATCH] Remove camel-casing, but account for dashed parameters still.

---
 src/compile/nodes/Element.ts                   | 15 ++++++---------
 test/runtime/samples/class-shortcut/_config.js |  4 ++--
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index 03ee575ecf..419f21d2e0 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -895,9 +895,8 @@ export default class Element extends Node {
 				snippet = expression.snippet;
 				dependencies = expression.dependencies;
 			} else {
-				const varName = camelCase(name);
-				snippet = `ctx.${varName}`;
-				dependencies = [varName];
+				snippet = `ctx${propertize(name)}`;
+				dependencies = [name];
 			}
 			const updater = `@toggleClass(${this.var}, "${name}", ${snippet});`;
 
@@ -905,7 +904,7 @@ export default class Element extends Node {
 
 			if ((dependencies && dependencies.size > 0) || this.classDependencies.length) {
 				const allDeps = this.classDependencies.concat(...dependencies);
-				const deps = allDeps.map(dependency => `changed.${dependency}`).join(' || ');
+				const deps = allDeps.map(dependency => `changed${propertize(dependency)}`).join(' || ');
 				const condition = allDeps.length > 1 ? `(${deps})` : deps;
 
 				block.builders.update.addConditional(
@@ -988,7 +987,7 @@ export default class Element extends Node {
 
 		const classExpr = this.classes.map((classDir: Class) => {
 			const { expression, name } = classDir;
-			const snippet = expression ? expression.snippet : `ctx.${camelCase(name)}`;
+			const snippet = expression ? expression.snippet : `ctx${propertize(name)}`;
 			return `${snippet} ? "${name}" : ""`;
 		}).join(', ');
 
@@ -1170,8 +1169,6 @@ const events = [
 	}
 ];
 
-function camelCase(str) {
-	return str.replace(/(-\w)/g, function (m) {
-		return m[1].toUpperCase();
-	});
+function propertize(prop) {
+	return /^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(prop) ? `.${prop}` : `["${prop}"]`;
 }
\ No newline at end of file
diff --git a/test/runtime/samples/class-shortcut/_config.js b/test/runtime/samples/class-shortcut/_config.js
index 0d4cfc886d..2d36b6eabf 100644
--- a/test/runtime/samples/class-shortcut/_config.js
+++ b/test/runtime/samples/class-shortcut/_config.js
@@ -1,13 +1,13 @@
 export default {
 	data: {
-		isActive: true,
+		"is-active": true,
 		isSelected: true,
 		myClass: 'one two'
 	},
 	html: `<div class="one two is-active isSelected"></div>`,
 
 	test ( assert, component, target, window ) {
-		component.set({ isActive: false });
+		component.set({ "is-active": false });
 
 		assert.htmlEqual( target.innerHTML, `
 			<div class="one two isSelected"></div>