non deterministic order for "import type"

[artola]

Your Environment

• Prettier version: 2.3.2
• node version 14

Describe the bug

Depending the order of import type and import is derived the output. Having 2 files with multiple mixed imports (different between them) it might produce a different output.

To Reproduce

Input:

import type {Foo} from 'foo';
import type {Bar} from 'bar';
import foo from 'foo';
import bar from 'bar';

Output:

import type {Bar} from 'bar';
import bar from 'bar';
import type {Foo} from 'foo';
import foo from 'foo';

But different from:

import foo from 'foo';
import bar from 'bar';
import type {Foo} from 'foo';
import type {Bar} from 'bar';

Output:

import bar from 'bar';
import type {Bar} from 'bar';
import foo from 'foo';
import type {Foo} from 'foo';

Expected behavior

Independently of the original order of the statements, the output should be the same (no human error prone).

import type {Bar} from 'bar';
import bar from 'bar';
import type {Foo} from 'foo';
import foo from 'foo';

[danielwii]

I have wrote a version for support import type on v2.0.2 but not the newest version. Try import as "@trivago/prettier-plugin-sort-imports": "git+https://github.com/danielwii/prettier-plugin-sort-imports.git#main",

[artola]

@danielwii It seems to work but not as expected:

Input:

import type {Foo} from 'foo';

import foo from 'foo';

import bar from 'bar';

import type {Bar} from 'bar';

Output:

import bar from 'bar';
import foo from 'foo';

import type {Foo} from 'foo';
import type {Bar} from 'bar';

[mattleong]

Seeing the same.. Is there progress on this?

Along those lines, it would also be great to specify whether or not to place type imports directly to be mixed with regular imports OR to organize type imports above or below regular imports.

[artola]

@byara @ayusharma I did some local development to sort the imports, it seems trivial to fix, please take a look to this idea and give me some hint.

Just modify:

https://github.com/trivago/prettier-plugin-sort-imports/blob/e83f3f14705643ded7ec3b26c945c045b47a43ab/src/utils/get-sorted-nodes.ts#L55

by adding importKind (i.e., type or value):

naturalSort(a.source.value + ' ' + a.importKind, b.source.value + ' ' + b.importKind)

Files:

• fixture1.ts

  import type {Foo} from 'foo';
  import type {Bar} from 'bar';
  import foo from 'foo';
  import bar from 'bar';

• fixture2.ts

  import foo from 'foo';
  import bar from 'bar';
  import type {Foo} from 'foo';
  import type {Bar} from 'bar';

• ppsi.spec.js (same used in your TS test)

  run_spec(__dirname, ['typescript'], {
  importOrder: ['^@core/(.*)$', '^@server/(.*)', '^@ui/(.*)$', '^[./]'],
  importOrderSeparation: true,
  importOrderParserPlugins: [
    'typescript',
    'decorators-legacy',
    'classProperties',
  ],
  });

• ppsi.spec.js.snap. (BEFORE = non deterministic sorting of import type declarations)

  // Jest Snapshot v1, https://goo.gl/fbAQLP
  
  exports[`fixture1.ts - typescript-verify: fixture1.ts 1`] = `
  Object {
  Symbol(raw): "import type {Foo} from 'foo';
  import type {Bar} from 'bar';
  import foo from 'foo';
  import bar from 'bar';
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  import type { Bar } from \\"bar\\";
  import bar from \\"bar\\";
  import type { Foo } from \\"foo\\";
  import foo from \\"foo\\";
  ",
  }
  `;
  
  exports[`fixture2.ts - typescript-verify: fixture2.ts 1`] = `
  Object {
  Symbol(raw): "import foo from 'foo';
  import bar from 'bar';
  import type {Foo} from 'foo';
  import type {Bar} from 'bar';
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  import bar from \\"bar\\";
  import type { Bar } from \\"bar\\";
  import foo from \\"foo\\";
  import type { Foo } from \\"foo\\";
  ",
  }
  `;  

• ppsi.spec.js.snap. (AFTER = deterministic sorting of import type declarations = type first)

  // Jest Snapshot v1, https://goo.gl/fbAQLP
  
  exports[`fixture1.ts - typescript-verify: fixture1.ts 1`] = `
  Object {
  Symbol(raw): "import type {Foo} from 'foo';
  import type {Bar} from 'bar';
  import foo from 'foo';
  import bar from 'bar';
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  import type { Bar } from \\"bar\\";
  import bar from \\"bar\\";
  import type { Foo } from \\"foo\\";
  import foo from \\"foo\\";
  ",
  }
  `;
  
  exports[`fixture2.ts - typescript-verify: fixture2.ts 1`] = `
  Object {
  Symbol(raw): "import foo from 'foo';
  import bar from 'bar';
  import type {Foo} from 'foo';
  import type {Bar} from 'bar';
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  import type { Bar } from \\"bar\\";
  import bar from \\"bar\\";
  import type { Foo } from \\"foo\\";
  import foo from \\"foo\\";
  ",
  }
  `;

[tconroy]

curious if any progress on this?

[polaroidkidd]

to add to this, ideally an option to group type imports in their category would be great.

[tusharf5]

Until this is implemented, I will shamelessly plug this fork https://github.com/serverless-guru/prettier-import-order that has this feature.

[SrBrahma]

I was about to use this plugin until I saw this, it's not an option for me to lose this behavior that I have with the simple-import-sort/imports ESLint rule

[iMoses]

Is this not a priority? A non-deterministic import sorter feels like a double edge sword...