fix: fixes #4

Author: ygj6

src/runTransformation.ts

@@ -77,11 +77,10 @@ export default function runTransformation(
       descriptor.template.ast.children[
         descriptor.template.ast.children.length - 1
       ].loc.end.offset + 1
+    let astStart = descriptor.template.ast.loc.start.offset
+    let astEnd = descriptor.template.ast.loc.end.offset + 1
 
-    fileInfo.source =
-      source.slice(0, contentStart) +
-      descriptor.template.content +
-      source.slice(contentEnd, contentEnd + 11)
+    fileInfo.source = descriptor.template.ast.loc.source
 
     const out = transformation(fileInfo, params)
 
@@ -91,13 +90,13 @@ export default function runTransformation(
 
     // need to reconstruct the .vue file from descriptor blocks
     if (extension === '.vue') {
-      if (out === fileInfo.source) {
+      if (out === descriptor!.template!.content) {
         return source // skipped, don't bother re-stringifying
       }
       // remove redundant <template> tag
       descriptor!.template!.content = out.slice(
-        contentStart,
-        descriptor.template.content.length - contentEnd
+        contentStart - astStart,
+        contentEnd - astEnd
       )
       return stringifySFC(descriptor!)
     }

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

@@ -7,10 +7,19 @@ runTest(
   'vue',
   'vue'
 )
+
 runTest(
   'template element replace slot="xxx" to v-slot:xxx',
   'slot-attribute',
   'template-slot-attribute',
   'vue',
   'vue'
 )
+
+runTest(
+  'Template is between style and script',
+  'slot-attribute',
+  'template-tag-slice',
+  'vue',
+  'vue'
+)

vue-transformations/__testfixtures__/slot-attribute/template-tag-slice.input.vue

@@ -0,0 +1,35 @@
+<style>
+.mini-cover {
+  width: 50px;
+  height: 50px;
+}
+</style>
+
+
+<template>
+  <div class="img-list" ref="box">
+    <li v-for="img in list" @click="delMe(img)">
+      <lazy-component @show="tip">
+        <img class="mini-cover" :src="img.src" width="100%" height="400">
+      </lazy-component>
+    </li>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'ListC',
+  props: {
+    list: Array
+  },
+  methods: {
+    tip (context) {
+      console.log(context)
+    },
+    delMe (img) {
+      this.$emit('delete', img)
+    }
+  }
+}
+</script>

vue-transformations/__testfixtures__/slot-attribute/template-tag-slice.output.vue

@@ -0,0 +1,35 @@
+<style>
+.mini-cover {
+  width: 50px;
+  height: 50px;
+}
+</style>
+
+
+<template>
+  <div class="img-list" ref="box">
+    <li v-for="img in list" @click="delMe(img)">
+      <lazy-component @show="tip">
+        <img class="mini-cover" :src="img.src" width="100%" height="400">
+      </lazy-component>
+    </li>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'ListC',
+  props: {
+    list: Array
+  },
+  methods: {
+    tip (context) {
+      console.log(context)
+    },
+    delMe (img) {
+      this.$emit('delete', img)
+    }
+  }
+}
+</script>