Merge remote-tracking branch 'origin/main' into develop

# Conflicts:
#	src/utils/get-sorted-nodes.ts

.github/ISSUE_TEMPLATE/bug_report.md

@@ -19,7 +19,7 @@ assignees: ''
 
 **Your Environment**
  * **Prettier version**: 2.x.x
- * **node version** [12.x.x, 14.x.x]:
+ * **node version**: [12.x.x, 14.x.x]
  * **package manager**: [npm@7, pnpm@6, yarn@2]
  * **IDE**: [VScode, Webstorm, CLI]
 
@@ -59,4 +59,4 @@ Be aware, the lack of reproducible steps the issue might cause your ticket to be
 <!--
 
 IMPORTANT: please do not attach external files, all content should be visible from any device.
--->
+-->

.github/workflows/ci.yml

@@ -5,11 +5,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [12.x, 14.x, 16.x, 18.x, 20.x]
+        node: [18.x, 20.x, 22.x]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-      - run: yarn --frozen-lockfile
+      - run: yarn --immutable
       - run: yarn test

.gitignore

@@ -4,6 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn/install-state.gz
 lerna-debug.log*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 ---
+### 5.2.0
+- fix type import ordering [#331](https://github.com/trivago/prettier-plugin-sort-imports/pull/331) by [@rsslldnphy](https://github.com/rsslldnphy) 
+- Fix conditional import of prettier-plugin-svelte [#332](https://github.com/trivago/prettier-plugin-sort-imports/pull/332) by [@rsslldnphy](https://github.com/rsslldnphy)
+
+### v5.1.0
+- Fix svelte packages being required all the time [#327](https://github.com/trivago/prettier-plugin-sort-imports/pull/327) by [@byara](https://github.com/byara)
+
+### v5.0.1
+- Clean up unwanted packages and unpin dependencies [#322](https://github.com/trivago/prettier-plugin-sort-imports/pull/322) by [@byara](https://github.com/byara)
+
+### v5.0.0
+#### New features
+- Type imports [#153](https://github.com/trivago/prettier-plugin-sort-imports/pull/153) by [Xenfo](https://github.com/broofa)
+- Svelte support [#310](https://github.com/trivago/prettier-plugin-sort-imports/pull/310) by [canarddemagret](https://github.com/canarddemagret)
+- Side effect import support [#320](https://github.com/trivago/prettier-plugin-sort-imports/pull/320) by [blutorange](https://github.com/blutorange) and [vladislavarsenev](https://github.com/vladislavarsenev)
+- Fixed dollar sign group replace in Vue [#283](https://github.com/trivago/prettier-plugin-sort-imports/pull/283) by [adamDilger](https://github.com/adamDilger)
+- Support `importOrderImportAttributesKeyword` [#273](https://github.com/trivago/prettier-plugin-sort-imports/pull/273) by [chentsulin](https://github.com/chentsulin)
+
+
 ### v4.3.0
 #### New features
 - added support for sort-imports-ignore [#237](https://github.com/trivago/prettier-plugin-sort-imports/pull/237) by [stephdotnet](https://github.com/stephdotnet)

README.md

@@ -86,7 +86,7 @@ module.exports = {
 }
 ```
 
-**Note: There may be an issue with some package managers, such as `pnpm`. You can solve it by providing additional configuration option in prettier config file.
+**Note: There may be an issue with some package managers, such as `pnpm` or when using `prettier` v3.x. You can solve it by providing additional configuration option in prettier config file.
 
 ```js
 module.exports = {
@@ -198,6 +198,64 @@ with options as a JSON string of the plugin array:
 importOrderParserPlugins: []
 ```
 
+### `importOrderSideEffects`
+**type**: `boolean`
+**default value**: `true`
+
+By default, the plugin sorts [side effect imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only) like any other imports in the file. If you need to keep side effect imports in the same place but sort all other imports around them, set this option to false.
+
+Example:
+
+Initial file:
+
+```js
+import z from 'z'
+import a from 'a'
+
+import 'side-effect-lib'
+
+import c from 'c'
+import b from 'b'
+```
+When sorted:
+
+```js
+import a from 'a'
+import z from 'z'
+
+import 'side-effect-lib'
+
+import b from 'b'
+import c from 'c'
+```
+
+### Ignoring import ordering
+
+In some cases it's desired to ignore import ordering, specifically if you require to instantiate a common service or polyfill in your application logic before all the other imports. The plugin supports the `// sort-imports-ignore` comment, which will exclude the file from ordering the imports.
+
+```javascript
+// sort-imports-ignore
+import './polyfills';
+
+import foo from 'foo'
+```
+
+#### `importOrderImportAttributesKeyword`
+
+**type**: `'assert' | 'with' | 'with-legacy'`
+
+The import attributes/assertions syntax: 
+- `with`: `import "..." with { type: "json" }`
+- `assert`: `import "..." assert { type: "json" }`
+- `with-legacy`: `import "..." with type: "json"`.
+
+```json
+  "importOrderImportAttributesKeyword": 'with'
+```
+
+_Default behavior:_ When not specified, @babel/generator will try to match the style in the input code based on the AST shape.
+
+
 ### How does import sort work ?
 
 The plugin extracts the imports which are defined in `importOrder`. These imports are considered as _local imports_.
@@ -220,9 +278,10 @@ Having some trouble or an issue ? You can check [FAQ / Troubleshooting section](
 | JS with ES Modules     | ✅ Everything            | -                                                |
 | NodeJS with ES Modules | ✅ Everything            | -                                                |
 | React                  | ✅ Everything            | -                                                |
+| Solid                  | ✅ 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
 

examples/.prettierrc

@@ -3,9 +3,10 @@
     "tabWidth": 4,
     "trailingComma": "all",
     "singleQuote": true,
-    "jsxBracketSameLine": true,
+    "bracketSameLine": true,
     "semi": true,
     "importOrder": ["^@server/(.*)$", "^@core/(.*)$", "^@ui/(.*)$", "^[./]"],
     "importOrderSeparation": true,
-    "importOrderSortSpecifiers": true
+    "importOrderSortSpecifiers": true,
+    "plugins": ["../lib/src/index.js"]
 }

examples/example.jsx

@@ -8,7 +8,6 @@ import otherthing from '@core/otherthing';
 import twoLevelRelativePath from '../../twoLevelRelativePath';
 import component from '@ui/hello';
 
-
 const HelloWorld = ({ name }) => {
     return <div>Hello, {name}</div>;
 };

examples/example.svelte

@@ -0,0 +1,48 @@
+<script>
+	import { onMount } from 'svelte';
+    // I am top level comment in this file.
+    // I am second line of top level comment in this file.
+    import React from 'react';
+    import thirdParty from 'third-party';
+
+    import something from '@server/something';
+
+
+    import component from '@ui/hello';
+
+    import fourLevelRelativePath from '../../../../fourLevelRelativePath';
+    import threeLevelRelativePath from '../../../threeLevelRelativePath';
+    import twoLevelRelativePath from '../../twoLevelRelativePath';
+    import oneLevelRelativePath from '../oneLevelRelativePath';
+    import sameLevelRelativePath from './sameLevelRelativePath';
+ 
+    import otherthing from '@core/otherthing';
+	let count = 0;
+
+	function increment() {
+		count += 1;
+	}
+</script>
+
+<main>
+	<h1>Hello Svelte!</h1>
+	<p>The count is {count}</p>
+	<button on:click={increment}>Increment</button>
+</main>
+
+<style>
+	main {
+		text-align: center;
+		padding: 1em;
+		max-width: 240px;
+		margin: 0 auto;
+	}
+
+	h1 {
+		color: #ff3e00;
+	}
+
+	button {
+		font-size: 1.2em;
+	}
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trivago/prettier-plugin-sort-imports",
-  "version": "4.3.0",
+  "version": "5.2.0",
   "description": "A prettier plugins to sort imports in provided RegEx order",
   "main": "lib/src/index.js",
   "types": "types/index.d.ts",
@@ -14,7 +14,7 @@
     "compile": "tsc",
     "preexample": "yarn run compile",
     "example": "prettier --config ./examples/.prettierrc --plugin lib/src/index.js",
-    "test": "jest -i",
+    "test": "yarn node --experimental-vm-modules $(yarn bin jest)",
     "type-check": "tsc --noEmit",
     "prepublishOnly": "npm run compile && npm run test"
   },
@@ -33,32 +33,48 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/generator": "7.17.7",
-    "@babel/parser": "^7.20.5",
-    "@babel/traverse": "7.23.2",
-    "@babel/types": "7.17.0",
-    "javascript-natural-sort": "0.7.1",
+    "@babel/generator": "^7.26.2",
+    "@babel/parser": "^7.26.2",
+    "@babel/traverse": "^7.25.9",
+    "@babel/types": "^7.26.0",
+    "javascript-natural-sort": "^0.7.1",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
-    "@types/chai": "4.2.15",
-    "@types/jest": "26.0.20",
-    "@types/lodash": "4.14.168",
-    "@types/node": "20.8.6",
-    "@vue/compiler-sfc": "^3.2.41",
-    "jest": "26.6.3",
-    "prettier": "2.8",
-    "ts-jest": "26.5.3",
-    "typescript": "4.9.4"
+    "@babel/core": "^7.26.0",
+    "@types/chai": "^5.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.9.1",
+    "@vue/compiler-sfc": "^3.5.13",
+    "jest": "^29.7.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
     }
+  },
+  "resolutions": {
+    "@types/babel__generator": "7.6.8"
   }
 }

src/constants.ts

@@ -9,13 +9,19 @@ export const newLineCharacters = '\n\n';
 
 export const sortImportsIgnoredComment = 'sort-imports-ignore';
 
+export const chunkSideEffectNode = 'side-effect-node';
+export const chunkSideOtherNode = 'other-node';
+
 /*
  * Used to mark the position between RegExps,
  * where the not matched imports should be placed
  */
 export const THIRD_PARTY_MODULES_SPECIAL_WORD = '<THIRD_PARTY_MODULES>';
 export const SEPARATOR_SPECIAL_WORD = '<SEPARATOR>';
 
+export const THIRD_PARTY_TYPES_SPECIAL_WORD = '<THIRD_PARTY_TS_TYPES>';
+export const TYPES_SPECIAL_WORD = '<TS_TYPES>';
+
 const PRETTIER_PLUGIN_SORT_IMPORTS_NEW_LINE =
     'PRETTIER_PLUGIN_SORT_IMPORTS_NEW_LINE';
 

src/index.ts

@@ -1,12 +1,17 @@
-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 { parsers as babelParsers } from 'prettier/plugins/babel';
+import { parsers as flowParsers } from 'prettier/plugins/flow';
+import { parsers as htmlParsers } from 'prettier/plugins/html';
+import { parsers as typescriptParsers } from 'prettier/plugins/typescript';
 
 import { defaultPreprocessor } from './preprocessors/default-processor';
+import { sveltePreprocessor } from './preprocessors/svelte-preprocessor';
 import { vuePreprocessor } from './preprocessors/vue-preprocessor';
+import type { Options } from 'prettier';
+import { createSvelteParsers } from './utils/create-svelte-parsers';
 
-const options = {
+const svelteParsers = createSvelteParsers();
+
+const options: Options = {
     importOrder: {
         type: 'path',
         category: 'Global',
@@ -48,6 +53,18 @@ const options = {
         default: false,
         description: 'Should specifiers be sorted?',
     },
+    importOrderSideEffects: {
+        type: 'boolean',
+        category: 'Global',
+        default: true,
+        description: 'Should side effects be sorted?',
+    },
+    importOrderImportAttributesKeyword: {
+        type: 'string',
+        category: 'Global',
+        default: 'with',
+        description: 'Provide a keyword for import attributes',
+    },
 };
 
 module.exports = {
@@ -68,6 +85,14 @@ module.exports = {
             ...htmlParsers.vue,
             preprocess: vuePreprocessor,
         },
+        ...(svelteParsers.parsers
+            ? {
+                  svelte: {
+                      ...svelteParsers.parsers.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);
 }