fix: router-link transform less space

Author: PeterAlfredLee

vue-transformations/__testfixtures__/router-link-event-tag/router-link-event-tag.input.vue

@@ -1,11 +1,11 @@
 <template>
-  <router-link to="/about" tag="span" event="dblclick">About Us</router-link>
+  <router-link class="one" to="/about" tag="span" event="dblclick">About Us</router-link>
 
-  <router-link to="/about" tag="span">About Us</router-link>
+  <router-link class="one" to="/about" tag="span">About Us</router-link>
 
-  <router-link to="/about" event="dblclick">About Us</router-link>
+  <router-link class="one" to="/about" event="dblclick">About Us</router-link>
 
-  <router-link to="/about" tag="span" event="['click', 'dblclick']">About Us</router-link>
+  <router-link class="one" to="/about" tag="span" event="['click', 'dblclick']">About Us</router-link>
 
-  <router-link to="/about" event="['click', 'dblclick']">About Us</router-link>
+  <router-link class="one" to="/about" event="['click', 'dblclick']">About Us</router-link>
 </template>

vue-transformations/__testfixtures__/router-link-event-tag/router-link-event-tag.output.vue

@@ -1,11 +1,11 @@
 <template>
-  <router-link to="/about" custom v-slot="{ navigate }"><span @dblclick="navigate">About Us</span></router-link>
+  <router-link class="one" to="/about" custom v-slot="{ navigate }"><span @dblclick="navigate">About Us</span></router-link>
 
-  <router-link to="/about" custom v-slot="{ navigate }"><span @click="navigate">About Us</span></router-link>
+  <router-link class="one" to="/about" custom v-slot="{ navigate }"><span @click="navigate">About Us</span></router-link>
 
-  <router-link to="/about" custom v-slot="{ navigate }"><a @dblclick="navigate">About Us</a></router-link>
+  <router-link class="one" to="/about" custom v-slot="{ navigate }"><a @dblclick="navigate">About Us</a></router-link>
 
-  <router-link to="/about" custom v-slot="{ navigate }"><span @click="navigate" @dblclick="navigate">About Us</span></router-link>
+  <router-link class="one" to="/about" custom v-slot="{ navigate }"><span @click="navigate" @dblclick="navigate">About Us</span></router-link>
 
-  <router-link to="/about" custom v-slot="{ navigate }"><a @click="navigate" @dblclick="navigate">About Us</a></router-link>
+  <router-link class="one" to="/about" custom v-slot="{ navigate }"><a @click="navigate" @dblclick="navigate">About Us</a></router-link>
 </template>

vue-transformations/router-link-event-tag.ts

@@ -46,7 +46,7 @@ function fix(node: Node, source: string): Operation[] {
   // get tag attribute and event attribute value
   // get other attribute text
   let tagValue, eventValue
-  let attrText = ''
+  let attrTexts: string[] = []
   node.startTag.attributes.forEach(attr => {
     if (attr.type === 'VAttribute') {
       const name = attr.key.name
@@ -55,10 +55,11 @@ function fix(node: Node, source: string): Operation[] {
       } else if (name === 'event' && attr.value?.type === 'VLiteral') {
         eventValue = attr.value.value
       } else {
-        attrText += OperationUtils.getText(attr, source)
+        attrTexts.push(OperationUtils.getText(attr, source))
       }
     }
   })
+  const attrText = attrTexts.join(' ')
 
   if (tagValue || eventValue) {
     // convert event attribute to new syntax