Support vue

Co-authored-by: Blake Newman <code@blakenewman.dev>

README.md

@@ -369,8 +369,8 @@ Having some trouble or an issue? You can check [FAQ / Troubleshooting section](.
 | NodeJS with ES Modules | ✅ Everything            | -                                                |
 | React                  | ✅ Everything            | -                                                |
 | Angular                | ✅ Everything            | Supported through `importOrderParserPlugins` API |
-| Vue                    | ⚠️ Soon to be supported. | Any contribution is welcome.                     |
-| Svelte                 | ⚠️ Soon to be supported. | Any contribution is welcome.                     |
+| Vue                    | ✅ Everything            | -                                                |
+| Svelte                 | ⚠️ Not yet                | Contributions are welcome                        |
 
 ## Contribution
 

package.json

@@ -51,7 +51,8 @@
         "@babel/types": "^7.17.0",
         "javascript-natural-sort": "0.7.1",
         "lodash.clone": "^4.5.0",
-        "lodash.isequal": "^4.5.0"
+        "lodash.isequal": "^4.5.0",
+        "@vue/compiler-sfc": "3.2.40"
     },
     "devDependencies": {
         "@types/jest": "^27.4.1",

src/index.ts

@@ -1,9 +1,11 @@
 import type { RequiredOptions as PrettierRequiredOptions } from 'prettier';
 import { parsers as babelParsers } from 'prettier/parser-babel';
 import { parsers as flowParsers } from 'prettier/parser-flow';
+import { parsers as htmlParsers } from 'prettier/parser-html';
 import { parsers as typescriptParsers } from 'prettier/parser-typescript';
 
-import { preprocessor } from './preprocessor';
+import { defaultPreprocessor } from './preprocessors/default';
+import { vuePreprocessor } from './preprocessors/vue';
 import type { PrettierOptions } from './types';
 
 // Not sure what the type from Prettier should be, but this is a good enough start.
@@ -85,15 +87,19 @@ module.exports = {
     parsers: {
         babel: {
             ...babelParsers.babel,
-            preprocess: preprocessor,
+            preprocess: defaultPreprocessor,
         },
         flow: {
             ...flowParsers.flow,
-            preprocess: preprocessor,
+            preprocess: defaultPreprocessor,
         },
         typescript: {
             ...typescriptParsers.typescript,
-            preprocess: preprocessor,
+            preprocess: defaultPreprocessor,
+        },
+        vue: {
+            ...htmlParsers.vue,
+            preprocess: vuePreprocessor,
         },
     },
     options,

src/preprocessors/default.ts

@@ -0,0 +1,7 @@
+import { PrettierOptions } from '../types';
+import { preprocessor } from './preprocessor';
+
+export function defaultPreprocessor(code: string, options: PrettierOptions) {
+    if (options.filepath?.endsWith('.vue')) return code;
+    return preprocessor(code, options);
+}

src/preprocessor.ts → src/preprocessors/preprocessor.ts

@@ -2,10 +2,10 @@ import { ParserOptions, parse as babelParser } from '@babel/parser';
 import traverse, { NodePath } from '@babel/traverse';
 import { ImportDeclaration, isTSModuleDeclaration } from '@babel/types';
 
-import { PrettierOptions } from './types';
-import { getCodeFromAst } from './utils/get-code-from-ast';
-import { getExperimentalParserPlugins } from './utils/get-experimental-parser-plugins';
-import { getSortedNodes } from './utils/get-sorted-nodes';
+import { PrettierOptions } from '../types';
+import { getCodeFromAst } from '../utils/get-code-from-ast';
+import { getExperimentalParserPlugins } from '../utils/get-experimental-parser-plugins';
+import { getSortedNodes } from '../utils/get-sorted-nodes';
 
 export function preprocessor(code: string, options: PrettierOptions): string {
     const {

src/preprocessors/vue.ts

@@ -0,0 +1,12 @@
+import { parse } from '@vue/compiler-sfc';
+
+import { PrettierOptions } from '../types';
+import { preprocessor } from './preprocessor';
+
+export function vuePreprocessor(code: string, options: PrettierOptions) {
+    const { descriptor } = parse(code);
+    const content =
+        (descriptor.script ?? descriptor.scriptSetup)?.content ?? code;
+
+    return code.replace(content, `\n${preprocessor(content, options)}\n`);
+}

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

@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setup.vue - vue-verify: setup.vue 1`] = `
+<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 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.
+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>
+// 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>
+
+`;
+
+exports[`ts.vue - vue-verify: ts.vue 1`] = `
+<script lang="ts">
+// 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 lang="ts">
+// 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>
+
+`;
+
+exports[`tsx.vue - vue-verify: tsx.vue 1`] = `
+<script lang="tsx">
+// 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({
+  render() {
+    return <div />
+  }
+})
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script lang="tsx">
+// 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({
+    render() {
+        return <div />;
+    },
+});
+</script>
+
+`;

tests/Vue/ppsi.spec.js

@@ -0,0 +1,4 @@
+run_spec(__dirname, ["vue"], {
+    importOrder: ['^@core/(.*)$', '^@server/(.*)', '^@ui/(.*)$', '^[./]'],
+    importOrderSeparation: true,
+});

tests/Vue/setup.vue

@@ -0,0 +1,23 @@
+<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/sfc.vue

@@ -0,0 +1,21 @@
+<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>

tests/Vue/ts.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+// 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>