Fixed issue with camel case event names.

pcable · Jan 11, 2019 · 9974801 · 9974801
1 parent 3c2bc03
commit 9974801
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/example/vue-component/index.js b/example/vue-component/index.js
@@ -26,7 +26,7 @@ angular
       },
       methods: {
         updateFirstName () {
-          this.$emit('newFirstName', 'THE')
+          this.$emit('new-first-name', 'THE')
         }
       },
       render (h) {

diff --git a/lib/kebabCase.js b/lib/kebabCase.js
@@ -0,0 +1,4 @@
+export default function kebabCase (str) {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
diff --git a/src/__tests__/create-vue-component.test.js b/src/__tests__/create-vue-component.test.js
@@ -232,9 +232,9 @@ describe('create-vue-component', () => {
       $compileProvider.directive('vbutton', createVueComponent => createVueComponent(ButtonComponent))
 
       const scope = $rootScope.$new()
-      scope.handleHelloEvent = jest.fn()
+      scope.handleHelloWorldEvent = jest.fn() 
 
-      const elem = compileHTML(`<vbutton v-on-hello="handleHelloEvent" />`, scope)
+      const elem = compileHTML(`<vbutton v-on-hello-world="handleHelloWorldEvent" />`, scope)
       elem.find('button')[0].click()
       scope.$digest()
       expect(scope.handleHelloEvent).toHaveBeenCalledWith('Hello, World!')

diff --git a/src/components/props/getExpressions.js b/src/components/props/getExpressions.js
@@ -1,6 +1,7 @@
 import angular from 'angular'
 import extractExpressionName from './extractPropName'
 import extractHtmlAttributes from './extractHtmlAttributes'
+import kebabCase from '../../../lib/kebabCase';
 
 /**
  * Extract a subset of expressions from the element attributes, e.g. property/data, on, or htmlAttribute
@@ -41,7 +42,11 @@ export function extractExpressions (exprType, attributes) {
   }
   expressions.forEach(attrExprName => {
     if (objectExprKey) {
-      const exprName = extractExpressionName(attrExprName, objectExprKey)
+      let exprName = extractExpressionName(attrExprName, objectExprKey)
+      if(objectExprKey == exprKeys.on) {
+        //vue events must be lower case and kebab case is the official recommendation
+        exprName = kebabCase(exprName)
+      }
       exprsMap[exprName] = attributes[attrExprName]
     } else {
       // Non-prefixed attributes, i.e. a regular HTML attribute