Merge pull request #310 from canarddemagret/svelte-import-sort

svelte import sort

Author: byara

.github/workflows/ci.yml

@@ -11,7 +11,5 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-      - run: npm i -g yarn
-      - run: yarn set version stable
       - run: yarn --immutable
       - run: yarn test

README.md

@@ -222,7 +222,7 @@ Having some trouble or an issue ? You can check [FAQ / Troubleshooting section](
 | React                  | ✅ Everything            | -                                                |
 | Angular                | ✅ Everything            | Supported through `importOrderParserPlugins` API |
 | Vue                    | ✅ Everything            | `@vue/compiler-sfc` is required                  |
-| Svelte                 | ⚠️ Soon to be supported.  | Any contribution is welcome.                     |
+| Svelte                 | ✅ Everything            | `prettier-plugin-svelte` is required             |
 
 ### Used by
 

package.json

@@ -16,7 +16,8 @@
     "example": "prettier --config ./examples/.prettierrc --plugin lib/src/index.js",
     "test": "yarn node --experimental-vm-modules $(yarn bin jest)",
     "type-check": "tsc --noEmit",
-    "prepublishOnly": "npm run compile && npm run test"
+    "prepublishOnly": "npm run compile && npm run test",
+    "postinstall": "patch-package"
   },
   "keywords": [
     "prettier",
@@ -41,27 +42,39 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/core": "7.26.0",
+    "@babel/core": "^7.26.0",
     "@types/chai": "5.0.1",
     "@types/jest": "29.5.14",
     "@types/lodash": "4.17.13",
-    "@types/node": "22.9.0",
-    "@vue/compiler-sfc": "^3.5.12",
+    "@types/node": "22.9.1",
+    "@vue/compiler-sfc": "^3.5.13",
     "jest": "29.7.0",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "3.3.3",
+    "prettier-plugin-svelte": "3.3.1",
+    "svelte": "^4.2.19",
     "ts-jest": "29.2.5",
     "typescript": "5.6.3"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "3.x",
-    "prettier": "2.x - 3.x"
+    "prettier": "2.x - 3.x",
+    "prettier-plugin-svelte": "3.x",
+    "svelte": "4.x"
   },
   "engines": {
     "node": ">18.12"
   },
   "peerDependenciesMeta": {
     "@vue/compiler-sfc": {
       "optional": true
+    },
+    "prettier-plugin-svelte": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
     }
   }
 }

src/index.ts

@@ -4,6 +4,9 @@ import { parsers as htmlParsers } from 'prettier/plugins/html';
 import { parsers as typescriptParsers } from 'prettier/plugins/typescript';
 import { defaultPreprocessor } from './preprocessors/default-processor';
 import { vuePreprocessor } from './preprocessors/vue-preprocessor';
+import { sveltePreprocessor } from './preprocessors/svelte-preprocessor';
+
+const { parsers: svelteParsers } = require('prettier-plugin-svelte');
 
 const options = {
     importOrder: {
@@ -67,6 +70,10 @@ module.exports = {
             ...htmlParsers.vue,
             preprocess: vuePreprocessor,
         },
+        svelte: {
+            ...svelteParsers.svelte,
+            preprocess: sveltePreprocessor,
+        },
     },
     options,
 };

src/preprocessors/default-processor.ts

@@ -2,6 +2,8 @@ import { PrettierOptions } from '../types';
 import { preprocessor } from './preprocessor';
 
 export function defaultPreprocessor(code: string, options: PrettierOptions) {
-    if (options.filepath?.endsWith('.vue')) return code;
+    for (const extension of ['svelte', 'vue']) {
+        if (options.filepath?.endsWith(`.${extension}`)) return code;
+    }
     return preprocessor(code, options);
 }

src/preprocessors/svelte-preprocessor.ts

@@ -0,0 +1,24 @@
+import { PrettierOptions } from '../types';
+import { preprocessor } from './preprocessor';
+
+const booleanGuard = <T>(value: T | undefined): value is T => Boolean(value);
+
+const sortImports = (code: string, options: PrettierOptions) => {
+    const { parse } = require('svelte/compiler');
+    const { instance, module } = parse(code);
+    const sources = [instance, module].filter(booleanGuard);
+    if (!sources.length) return code;
+    return sources.reduce((code, source) => {
+        const snippet = code.slice(source.content.start, source.content.end);
+        const preprocessed = preprocessor(snippet, options);
+        const result = code.replace(snippet, `\n${preprocessed}\n`);
+        return result;
+    }, code);
+};
+
+export function sveltePreprocessor(code: string, options: PrettierOptions) {
+    const sorted = sortImports(code, options);
+
+    const prettierPluginSvelte = require('prettier-plugin-svelte');
+    return prettierPluginSvelte.parsers.svelte.preprocess(sorted, options);
+}