fix: fixes #5

Author: ygj6

vue-transformations/__test__/slot-attribute.spec.ts

@@ -23,3 +23,11 @@ runTest(
   'vue',
   'vue'
 )
+
+runTest(
+  'The v-slot attribute already exists in the upper template',
+  'slot-attribute',
+  'template-with-slot',
+  'vue',
+  'vue'
+)

vue-transformations/__testfixtures__/slot-attribute/template-with-slot.input.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="img-list" ref="box">
+    <template slot="title">
+      <div>
+        <span slot="title">title name</span>
+      </div>
+    </template>
+  </div>
+</template>

vue-transformations/__testfixtures__/slot-attribute/template-with-slot.output.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="img-list" ref="box">
+    <template v-slot:title>
+      <div>
+        <span >title name</span>
+      </div>
+    </template>
+  </div>
+</template>

vue-transformations/slot-attribute.ts

@@ -60,11 +60,44 @@ function fix(node: Node): Operation[] {
     // remove v-slot:${slotValue}
     fixOperations.push(OperationUtils.remove(node))
     // add <template v-slot:${slotValue}>
-    fixOperations.push(
-      OperationUtils.insertTextBefore(element, `<template v-slot:${slotValue}>`)
-    )
-    // add </template>
-    fixOperations.push(OperationUtils.insertTextAfter(element, `</template>`))
+
+    let elder: any = null
+    let hasSlotAttr: boolean = false
+    let tmp: any = element
+    // find template parent
+    while (elder == null && tmp != null) {
+      hasSlotAttr = false
+      tmp = tmp.parent
+      if (tmp == null || tmp.type != 'VElement' || tmp.name != 'template') {
+        continue
+      }
+
+      elder = element
+      tmp.startTag.attributes
+        .filter(
+          (attr: any) =>
+            attr.type === 'VAttribute' &&
+            attr.key.type === 'VIdentifier' &&
+            attr.key.name === 'slot'
+        )
+        .forEach((element: any) => {
+          hasSlotAttr = true
+        })
+      if (hasSlotAttr) {
+        break
+      }
+    }
+
+    if (!hasSlotAttr) {
+      fixOperations.push(
+        OperationUtils.insertTextBefore(
+          element,
+          `<template v-slot:${slotValue}>`
+        )
+      )
+      // add </template>
+      fixOperations.push(OperationUtils.insertTextAfter(element, `</template>`))
+    }
   }
 
   return fixOperations