From 5ca881f0cab2bc9cf23106e4c899e94ab8728a81 Mon Sep 17 00:00:00 2001 From: Patrick Chin Date: Mon, 9 Sep 2024 15:33:05 +0800 Subject: [PATCH] Add support for svelte files. --- README.md | 4 +++- package.json | 7 ++++++- src/index.ts | 18 ++++++++++++++++++ src/preprocessors/svelte-preprocessor.ts | 17 +++++++++++++++++ yarn.lock | 5 +++++ 5 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 src/preprocessors/svelte-preprocessor.ts diff --git a/README.md b/README.md index 76ed32f..1664ba1 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,8 @@ yarn add --dev @trivago/prettier-plugin-sort-imports **Note: If formatting `.vue` sfc files please install `@vue/compiler-sfc` if not in your dependency tree - this normally is within Vue projects.** +**Note: If formatting `.svelte` sfc files please install `prettier-plugin-svelte` and configure it in the Prettier plugin before this plugin - this normally is within Svelte projects.** + ### Usage Add an order in prettier config file. @@ -222,7 +224,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 diff --git a/package.json b/package.json index 415f69f..135ce56 100644 --- a/package.json +++ b/package.json @@ -49,16 +49,21 @@ "@vue/compiler-sfc": "^3.2.41", "jest": "26.6.3", "prettier": "2.8", + "prettier-plugin-svelte": "^3.2.6", "ts-jest": "26.5.3", "typescript": "4.9.4" }, "peerDependencies": { "@vue/compiler-sfc": "3.x", - "prettier": "2.x - 3.x" + "prettier": "2.x - 3.x", + "prettier-plugin-svelte": "3.x" }, "peerDependenciesMeta": { "@vue/compiler-sfc": { "optional": true + }, + "prettier-plugin-svelte": { + "optional": true } } } diff --git a/src/index.ts b/src/index.ts index 5a6eafb..7d1f66d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,6 +6,23 @@ import { parsers as typescriptParsers } from 'prettier/parser-typescript'; import { defaultPreprocessor } from './preprocessors/default-processor'; import { vuePreprocessor } from './preprocessors/vue-preprocessor'; +const svelteParsers = createSvelteParsers(); + +function createSvelteParsers() { + try { + var { parsers } = require('prettier-plugin-svelte'); + var { sveltePreprocessor } = require('./preprocessors/svelte-preprocessor'); + } catch { + return {}; + } + return { + svelte: { + ...parsers.svelte, + preprocess: sveltePreprocessor, + }, + }; +} + const options = { importOrder: { type: 'path', @@ -68,6 +85,7 @@ module.exports = { ...htmlParsers.vue, preprocess: vuePreprocessor, }, + ...svelteParsers, }, options, }; diff --git a/src/preprocessors/svelte-preprocessor.ts b/src/preprocessors/svelte-preprocessor.ts new file mode 100644 index 0000000..a756fd9 --- /dev/null +++ b/src/preprocessors/svelte-preprocessor.ts @@ -0,0 +1,17 @@ +import { PrettierOptions } from '../types'; +import { preprocessor } from './preprocessor'; + +const { parsers } = require('prettier-plugin-svelte'); +const scriptRegex = + /|'"\/\s]+=(?:"[^"]*"|'[^']*'|[^>\s]+)|\s+[^=>'"\/\s]+)*\s*)>([^]*?)<\/script>/g; + +export function sveltePreprocessor(code: string, options: PrettierOptions) { + code = code.replace(scriptRegex, (match, attributes, content, index) => { + if (match.startsWith('