Sort both <script> and <script setup> for vue sfc, fix #218

src/preprocessors/vue-preprocessor.ts

@@ -1,14 +1,39 @@
+import type { SFCBlock, SFCDescriptor } from '@vue/compiler-sfc';
+
 import { PrettierOptions } from '../types';
 import { preprocessor } from './preprocessor';
 
 export function vuePreprocessor(code: string, options: PrettierOptions) {
     const { parse } = require('@vue/compiler-sfc');
-    const { descriptor } = parse(code);
+    const descriptor: SFCDescriptor = parse(code).descriptor;
 
-    const content = (descriptor.script ?? descriptor.scriptSetup)?.content;
-    if (!content) {
+    // 1. filter valid blocks
+    const blocks = [descriptor.script, descriptor.scriptSetup].filter(
+        (block) => block?.content,
+    ) as SFCBlock[];
+    if (!blocks.length) {
         return code;
     }
 
-    return code.replace(content, `\n${preprocessor(content, options)}\n`);
+    // 2. sort blocks by start position
+    blocks.sort((a, b) => a.loc.start.offset - b.loc.start.offset);
+
+    // 3. replace blocks
+    // Using offsets to avoid string replace catching the wrong place and improve efficiency
+    let offset = 0;
+    let result = '';
+    for (const block of blocks) {
+        // https://github.com/vuejs/core/blob/9060bf0353e88cc1f4cf06981b9799c5c1e09466/packages/compiler-core/src/ast.ts#L71
+        // The node's range. The `start` is inclusive and `end` is exclusive.
+        // [start, end)
+        const { start, end } = block.loc;
+        const transformed = `\n${preprocessor(block.content, options)}\n`;
+        result += code.slice(offset, start.offset) + transformed;
+        offset = end.offset;
+    }
+
+    // 4. append the rest
+    result += code.slice(offset);
+
+    return result;
 }

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

@@ -57,6 +57,115 @@ function add(a, b) {
 
 `;
 
+exports[`setupWithScript.vue - vue-verify: setupWithScript.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 add(a,b) {
+  return a + b;
+}
+
+export default defineComponent({
+
+})
+</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 add(a, b) {
+    return a + b;
+}
+
+export default defineComponent({});
+</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.

tests/Vue/setupWithScript.vue

@@ -0,0 +1,49 @@
+<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 add(a,b) {
+  return a + b;
+}
+
+export default defineComponent({
+
+})
+</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>