feature: order respects side effect imports (#320)

Co-authored-by: Vladislav Arsenev <[email protected]>

Author: vladislavarsenev

README.md

@@ -198,6 +198,37 @@ 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'
+```
+
 ### How does import sort work ?
 
 The plugin extracts the imports which are defined in `importOrder`. These imports are considered as _local imports_.

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>;
 };

src/constants.ts

@@ -9,6 +9,9 @@ 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

src/index.ts

@@ -2,9 +2,10 @@ 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 { vuePreprocessor } from './preprocessors/vue-preprocessor';
 import { sveltePreprocessor } from './preprocessors/svelte-preprocessor';
+import { vuePreprocessor } from './preprocessors/vue-preprocessor';
 
 const { parsers: svelteParsers } = require('prettier-plugin-svelte');
 
@@ -50,6 +51,12 @@ const options = {
         default: false,
         description: 'Should specifiers be sorted?',
     },
+    importOrderSideEffects: {
+        type: 'boolean',
+        category: 'Global',
+        default: true,
+        description: 'Should side effects be sorted?',
+    },
 };
 
 module.exports = {

src/preprocessors/preprocessor.ts

@@ -16,6 +16,7 @@ export function preprocessor(code: string, options: PrettierOptions) {
         importOrderSeparation,
         importOrderGroupNamespaceSpecifiers,
         importOrderSortSpecifiers,
+        importOrderSideEffects,
     } = options;
 
     const parserOptions: ParserOptions = {
@@ -42,6 +43,7 @@ export function preprocessor(code: string, options: PrettierOptions) {
         importOrderSeparation,
         importOrderGroupNamespaceSpecifiers,
         importOrderSortSpecifiers,
+        importOrderSideEffects,
     });
 
     return getCodeFromAst(allImports, directives, code, interpreter);

src/types.ts

@@ -19,5 +19,11 @@ export type GetSortedNodes = (
         | 'importOrderSeparation'
         | 'importOrderGroupNamespaceSpecifiers'
         | 'importOrderSortSpecifiers'
+        | 'importOrderSideEffects'
     >,
 ) => ImportOrLine[];
+
+export interface ImportChunk {
+    nodes: ImportDeclaration[];
+    type: string;
+}

src/utils/__tests__/adjust-comments-on-sorted-nodes.spec.ts

@@ -0,0 +1,107 @@
+import { ImportDeclaration } from '@babel/types';
+
+import { adjustCommentsOnSortedNodes } from '../adjust-comments-on-sorted-nodes';
+import { getImportNodes } from '../get-import-nodes';
+
+function leadingComments(node: ImportDeclaration): string[] {
+    return node.leadingComments?.map((c) => c.value) ?? [];
+}
+
+function trailingComments(node: ImportDeclaration): string[] {
+    return node.trailingComments?.map((c) => c.value) ?? [];
+}
+
+test('it preserves the single leading comment for each import declaration', () => {
+    const importNodes = getImportNodes(`
+    import {x} from "c";
+    // comment b
+    import {y} from "b";
+    // comment a
+    import {z} from "a";
+    `);
+    expect(importNodes).toHaveLength(3);
+    const finalNodes = [importNodes[2], importNodes[1], importNodes[0]];
+    adjustCommentsOnSortedNodes(importNodes, finalNodes);
+    expect(finalNodes).toHaveLength(3);
+    expect(leadingComments(finalNodes[0])).toEqual([' comment a']);
+    expect(trailingComments(finalNodes[0])).toEqual([]);
+    expect(leadingComments(finalNodes[1])).toEqual([' comment b']);
+    expect(trailingComments(finalNodes[1])).toEqual([]);
+    expect(leadingComments(finalNodes[2])).toEqual([]);
+    expect(trailingComments(finalNodes[2])).toEqual([]);
+});
+
+test('it preserves multiple leading comments for each import declaration', () => {
+    const importNodes = getImportNodes(`
+    import {x} from "c";
+    // comment b1
+    // comment b2
+    // comment b3
+    import {y} from "b";
+    // comment a1
+    // comment a2
+    // comment a3
+    import {z} from "a";
+    `);
+    expect(importNodes).toHaveLength(3);
+    const finalNodes = [importNodes[2], importNodes[1], importNodes[0]];
+    adjustCommentsOnSortedNodes(importNodes, finalNodes);
+    expect(finalNodes).toHaveLength(3);
+    expect(leadingComments(finalNodes[0])).toEqual([
+        ' comment a1',
+        ' comment a2',
+        ' comment a3',
+    ]);
+    expect(trailingComments(finalNodes[0])).toEqual([]);
+    expect(leadingComments(finalNodes[1])).toEqual([
+        ' comment b1',
+        ' comment b2',
+        ' comment b3',
+    ]);
+    expect(trailingComments(finalNodes[1])).toEqual([]);
+    expect(leadingComments(finalNodes[2])).toEqual([]);
+    expect(trailingComments(finalNodes[2])).toEqual([]);
+});
+
+test('it does not move comments at before all import declarations', () => {
+    const importNodes = getImportNodes(`
+    // comment c1
+    // comment c2
+    import {x} from "c";
+    import {y} from "b";
+    import {z} from "a";
+    `);
+    expect(importNodes).toHaveLength(3);
+    const finalNodes = [importNodes[2], importNodes[1], importNodes[0]];
+    adjustCommentsOnSortedNodes(importNodes, finalNodes);
+    expect(finalNodes).toHaveLength(3);
+    expect(leadingComments(finalNodes[0])).toEqual([
+        ' comment c1',
+        ' comment c2',
+    ]);
+    expect(trailingComments(finalNodes[0])).toEqual([]);
+    expect(leadingComments(finalNodes[1])).toEqual([]);
+    expect(trailingComments(finalNodes[1])).toEqual([]);
+    expect(leadingComments(finalNodes[2])).toEqual([]);
+    expect(trailingComments(finalNodes[2])).toEqual([]);
+});
+
+test('it does not affect comments after all import declarations', () => {
+    const importNodes = getImportNodes(`
+    import {x} from "c";
+    import {y} from "b";
+    import {z} from "a";
+    // comment final 1
+    // comment final 2
+    `);
+    expect(importNodes).toHaveLength(3);
+    const finalNodes = [importNodes[2], importNodes[1], importNodes[0]];
+    adjustCommentsOnSortedNodes(importNodes, finalNodes);
+    expect(finalNodes).toHaveLength(3);
+    expect(leadingComments(finalNodes[0])).toEqual([]);
+    expect(trailingComments(finalNodes[0])).toEqual([]);
+    expect(leadingComments(finalNodes[1])).toEqual([]);
+    expect(trailingComments(finalNodes[1])).toEqual([]);
+    expect(leadingComments(finalNodes[2])).toEqual([]);
+    expect(trailingComments(finalNodes[2])).toEqual([]);
+});

src/utils/__tests__/get-all-comments-from-nodes.spec.ts

@@ -14,6 +14,7 @@ const getSortedImportNodes = (code: string, options?: ParserOptions) => {
         importOrderSeparation: false,
         importOrderGroupNamespaceSpecifiers: false,
         importOrderSortSpecifiers: false,
+        importOrderSideEffects: true,
     });
 };
 

src/utils/__tests__/get-code-from-ast.spec.ts

@@ -25,6 +25,7 @@ import a from 'a';
         importOrderSeparation: false,
         importOrderGroupNamespaceSpecifiers: false,
         importOrderSortSpecifiers: false,
+        importOrderSideEffects: true,
     });
     const formatted = getCodeFromAst(sortedNodes, [], code, null);
     expect(await format(formatted, { parser: 'babel' })).toEqual(