(#276) Fixed dollar sign group replace in vue preprocessor

src/preprocessors/vue-preprocessor.ts

@@ -5,10 +5,31 @@ export function vuePreprocessor(code: string, options: PrettierOptions) {
     const { parse } = require('@vue/compiler-sfc');
     const { descriptor } = parse(code);
 
-    const content = (descriptor.script ?? descriptor.scriptSetup)?.content;
-    if (!content) {
+    const scriptContent = descriptor.script?.content;
+    const scriptSetupContent = descriptor.scriptSetup?.content;
+
+    if (!scriptContent && !scriptSetupContent) {
         return code;
     }
 
-    return code.replace(content, `\n${preprocessor(content, options)}\n`);
+    let transformedCode = code;
+
+    const replacer = (content: string) => {
+        // we pass the second argument as a function to avoid issues with the replacement string
+        // if string contained special groups (like $&, $`, $', $n, $<n>, etc.) this would produce invalid results
+        return transformedCode.replace(
+            content,
+            () => `\n${preprocessor(content, options)}\n`,
+        );
+    };
+
+    if (scriptContent) {
+        transformedCode = replacer(scriptContent);
+    }
+
+    if (scriptSetupContent) {
+        transformedCode = replacer(scriptSetupContent);
+    }
+
+    return transformedCode;
 }

tests/Vue/__snapshots__/ppsi.spec.js.snap

@@ -57,6 +57,109 @@ function add(a, b) {
 
 `;
 
+exports[`setupAndScript.vue - vue-verify: setupAndScript.vue 1`] = `
+<script>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue'
+
+function firstAdd(a,b) {
+  return a + b;
+}
+</script>
+
+<script setup>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue'
+
+function add(a,b) {
+  return a + b;
+}
+</script>
+
+<template>
+  <div></div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script>
+// I am top level comment in this file.
+import thirdParty from "third-party";
+import { defineComponent } from "vue";
+import z from "z";
+
+import abc from "@core/abc";
+import otherthing from "@core/otherthing";
+
+import something from "@server/something";
+
+import component from "@ui/hello";
+import xyz from "@ui/xyz";
+
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+
+function firstAdd(a, b) {
+    return a + b;
+}
+</script>
+
+<script setup>
+// I am top level comment in this file.
+import thirdParty from "third-party";
+import { defineComponent } from "vue";
+import z from "z";
+
+import abc from "@core/abc";
+import otherthing from "@core/otherthing";
+
+import something from "@server/something";
+
+import component from "@ui/hello";
+import xyz from "@ui/xyz";
+
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+
+function add(a, b) {
+    return a + b;
+}
+</script>
+
+<template>
+    <div></div>
+</template>
+
+`;
+
 exports[`sfc.vue - vue-verify: sfc.vue 1`] = `
 <script>
 // I am top level comment in this file.
@@ -137,6 +240,25 @@ div {
 
 `;
 
+exports[`sfcWithSpecialReplacerGroups.vue - vue-verify: sfcWithSpecialReplacerGroups.vue 1`] = `
+<script setup>
+let a = '$';
+let b = '$';
+let c = '$$';
+</script>
+<template><div>{{ a + b + c }}</div></template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script setup>
+let a = "$";
+let b = "$";
+let c = "$$";
+</script>
+<template>
+    <div>{{ a + b + c }}</div>
+</template>
+
+`;
+
 exports[`ts.vue - vue-verify: ts.vue 1`] = `
 <script lang="ts">
 // I am top level comment in this file.

tests/Vue/setupAndScript.vue

@@ -0,0 +1,45 @@
+<script>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue'
+
+function firstAdd(a,b) {
+  return a + b;
+}
+</script>
+
+<script setup>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue'
+
+function add(a,b) {
+  return a + b;
+}
+</script>
+
+<template>
+  <div></div>
+</template>

tests/Vue/sfcWithSpecialReplacerGroups.vue

@@ -0,0 +1,6 @@
+<script setup>
+let a = '$';
+let b = '$';
+let c = '$$';
+</script>
+<template><div>{{ a + b + c }}</div></template>