From d091759f104fdd097aec6ab38591bac50b66280c Mon Sep 17 00:00:00 2001
From: Adam Dilger <adamdilger1@gmail.com>
Date: Fri, 26 Apr 2024 13:53:13 +1000
Subject: [PATCH] (#218) format both script and script setup tags if they exist

---
 src/preprocessors/vue-preprocessor.ts     |  29 ++++--
 tests/Vue/__snapshots__/ppsi.spec.js.snap | 103 ++++++++++++++++++++++
 tests/Vue/setupAndScript.vue              |  45 ++++++++++
 3 files changed, 171 insertions(+), 6 deletions(-)
 create mode 100644 tests/Vue/setupAndScript.vue

diff --git a/src/preprocessors/vue-preprocessor.ts b/src/preprocessors/vue-preprocessor.ts
index ddbe2b6..66b2bca 100644
--- a/src/preprocessors/vue-preprocessor.ts
+++ b/src/preprocessors/vue-preprocessor.ts
@@ -5,14 +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;
     }
 
-    // 'replacer' is a function so it returns the preprocessed code as-is.
-    // If it were passed as just a string and the string contained special groups (like $&, $`, $', $n, $<n>, etc.) this would produce invalid results
-    const replacer =  () => `\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 code.replace(content, replacer);
+    return transformedCode;
 }
diff --git a/tests/Vue/__snapshots__/ppsi.spec.js.snap b/tests/Vue/__snapshots__/ppsi.spec.js.snap
index b4fe3e3..afad6e5 100644
--- a/tests/Vue/__snapshots__/ppsi.spec.js.snap
+++ b/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.
diff --git a/tests/Vue/setupAndScript.vue b/tests/Vue/setupAndScript.vue
new file mode 100644
index 0000000..b1fa7ac
--- /dev/null
+++ b/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>