Replace importOrderCombineTypeAndValueImports with `importOrderType…

…ScriptVersion` (#67)

Ref #22

This removes the `importOrderCombineTypeAndValueImports` option, and
defaults merging to true for Flow projects (technically anything other
than TypeScript, but Flow is the only one).

For TypeScript, we need to be sure that we can use the `import {type
Foo} from …` syntax, which was only added in 4.5. To that end, this adds
a new option, `importOrderTypeScriptVersion`, which the user should set
to the version of TS they're using in their project, and we will use
that to generate appropriate import statements. And possibly in the
future we can make other adjustments based on the TS version as well.
Detecting the version automatically is tricky, but maybe we can try
doing that sometime in the future as well.

By default, we set the TS version to something ridiculously low,
`1.0.0`, meaning that by default we won't combine type and value unless
the user sets their version.

README.md

@@ -14,7 +14,7 @@ Since then more critical features & fixes have been added, and the options have
 
 -   Do not re-order across side-effect imports
 -   Combine imports from the same source
--   Combine type and value imports ([`importOrderCombineTypeAndValueImports`](#importordercombinetypeandvalueimports))
+-   Combine type and value imports
 -   Type import grouping with `<TYPES>` keyword
 -   Sorts node.js builtin modules to top
 -   Custom import order separation
@@ -31,7 +31,7 @@ Since then more critical features & fixes have been added, and the options have
   - [How does import sort work?](#how-does-import-sort-work)
   - [Options](#options)
     - [`importOrder`](#importorder)
-    - [`importOrderCombineTypeAndValueImports`](#importordercombinetypeandvalueimports)
+    - [`importOrderTypeScriptVersion`](#importordertypescriptversion)
     - [`importOrderParserPlugins`](#importorderparserplugins)
   - [Prevent imports from being sorted](#prevent-imports-from-being-sorted)
 - [FAQ / Troubleshooting](#faq--troubleshooting)
@@ -129,12 +129,10 @@ module.exports = {
     semi: true,
     importOrder: ['^@core/(.*)$', '', '^@server/(.*)$', '', '^@ui/(.*)$', '', '^[./]'],
     importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
-    importOrderCombineTypeAndValueImports: true,
+    importOrderTypeScriptVersion: '5.0.0',
 };
 ```
 
-_Note: all flags are off by default, so explore your options [below](#options)_
-
 ### How does import sort work?
 
 The plugin extracts the imports which are defined in `importOrder`. These imports are considered as _local imports_.
@@ -217,27 +215,13 @@ _Note:_ If you want to separate some groups from others, you can add an empty st
 ],
 ```
 
-#### `importOrderCombineTypeAndValueImports`
-
-**type**: `boolean`
-
-**default value:** `false`
+#### `importOrderTypeScriptVersion`
 
-A boolean value to control merging `import type` expressions into `import {…}`.
+**type**: `string`
 
-```diff
-- import type { C1 } from 'c';
-- import { C2 } from 'c';
-+ import { type C1, C2 } from "c";
+**default value:** `1.0.0`
 
-- import { D1 } from 'd';
-- import type { D2 } from 'd';
-+ import { D1, type D2 } from "d";
-
-- import type { A1 } from 'a';
-- import type { A2 } from 'a';
-+ import type { A1, A2 } from "a";
-```
+When using TypeScript, some import syntax can only be used in newer versions of TypeScript.  If you would like to enable modern features like mixed type and value imports, set this option to the semver version string of the TypeScript in use in your project.
 
 #### `importOrderParserPlugins`
 

docs/MIGRATION.md

@@ -9,6 +9,9 @@
 - The `importOrderCaseInsensitive` option has been removed, and imports will always be sorted case-insensitive.
 - The `importOrderGroupNamespaceSpecifiers` option has been removed.
 - The `importOrderSortSpecifiers` option has been removed, and specifiers are now always sorted (previous `true` setting)
+- The `importOrderMergeDuplicateImports` option has been removed, and imports are always combined (previous `true` setting)
+- The `importOrderCombineTypeAndValueImports` option has been removed.  See [below](#importOrderCombineTypeAndValueImports-removed) for details
+- Added `importOrderTypeScriptVersion` option.
 
 #### `importOrderSeparation` removed
 
@@ -38,6 +41,15 @@ Or, if you would like to keep all imports together, but add a newline before sid
     ]
 ```
 
+#### `importOrderCombineTypeAndValueImports` removed
+
+Combining type and value imports is supported in Flow and TypeScript 4.5.0 and above.  To simplify the configuration of the plugin, the explicit setting has been removed.  Instead, we will always enable combining these imports when using Flow and have introduced a new option, `importOrderTypeScriptVersion` to control whether or not merging can happen when using TypeScript.
+
+#### `importOrderTypeScriptVersion` added
+
+Some import statement syntax can only be used in certain versions of TypeScript.  In order to enable these features, such as merging type and value imports, you can specify the version of TypeScript that you're using in your project using this option, which should be a valid semver string.
+
+
 ### Migrating from v2.x.x to v3.x.x
 
 #### TL;DR

package.json

@@ -58,7 +58,8 @@
         "@babel/traverse": "^7.17.3",
         "@babel/types": "^7.17.0",
         "lodash.clone": "^4.5.0",
-        "lodash.isequal": "^4.5.0"
+        "lodash.isequal": "^4.5.0",
+        "semver": "^7.5.0"
     },
     "devDependencies": {
         "@types/babel__generator": "^7.6.4",
@@ -67,6 +68,7 @@
         "@types/lodash.isequal": "4.5.6",
         "@types/node": "^18.15.13",
         "@types/prettier": "^2.7.2",
+        "@types/semver": "^7.3.13",
         "@vue/compiler-sfc": "3.2.47",
         "prettier": "2.8.7",
         "typescript": "5.0.4",

prettier.config.js

@@ -7,4 +7,5 @@ module.exports = {
     semi: true,
     plugins: [require('./lib/src/index.js')],
     importOrder: ['', '<THIRD_PARTY_MODULES>', '', '^[./]'],
+    importOrderTypeScriptVersion: '5.0.0',
 };

src/constants.ts

@@ -1,6 +1,6 @@
 import { builtinModules } from 'module';
 
-import { ParserPlugin } from '@babel/parser';
+import type { ParserPlugin } from '@babel/parser';
 import { expressionStatement, stringLiteral } from '@babel/types';
 
 export const flow: ParserPlugin = 'flow';

src/index.ts

@@ -37,12 +37,12 @@ export const options: Record<
         default: [{ value: ['typescript', 'jsx'] }],
         description: 'Provide a list of plugins for special syntax',
     },
-    importOrderCombineTypeAndValueImports: {
-        type: 'boolean',
+    importOrderTypeScriptVersion: {
+        type: 'string',
         category: 'Global',
-        default: false,
+        default: '1.0.0',
         description:
-            'Should import-type expressions be merged into import-value expressions?',
+            'Version of TypeScript in use in the project.  Determines some output syntax when using TypeScript.',
     },
 };
 

src/preprocessors/preprocessor.ts

@@ -1,6 +1,7 @@
 import { parse as babelParser, ParserOptions } from '@babel/parser';
 import traverse, { NodePath } from '@babel/traverse';
 import { ImportDeclaration, isTSModuleDeclaration } from '@babel/types';
+import semver from 'semver';
 
 import { TYPES_SPECIAL_WORD } from '../constants';
 import { PrettierOptions } from '../types';
@@ -10,25 +11,37 @@ import { getSortedNodes } from '../utils/get-sorted-nodes';
 
 export function preprocessor(code: string, options: PrettierOptions): string {
     const { importOrderParserPlugins, importOrder } = options;
+    let { importOrderTypeScriptVersion } = options;
+    const isTSSemverValid = semver.valid(importOrderTypeScriptVersion);
 
-    let { importOrderCombineTypeAndValueImports } = options;
-
-    if (
-        importOrderCombineTypeAndValueImports &&
-        importOrder.some((group) => group.includes(TYPES_SPECIAL_WORD))
-    ) {
+    if (!isTSSemverValid) {
         console.warn(
-            `[@ianvs/prettier-plugin-sort-imports]: The option importOrderCombineTypeAndValueImports will have no effect since ${TYPES_SPECIAL_WORD} is used in importOrder.`,
+            `[@ianvs/prettier-plugin-sort-imports]: The option importOrderTypeScriptVersion is not a valid semver version and will be ignored.`,
         );
-        importOrderCombineTypeAndValueImports = false;
+        importOrderTypeScriptVersion = '1.0.0';
     }
 
+    // Do not combine type and value imports if `<TYPES>` is specified explicitly
+    let importOrderCombineTypeAndValueImports = importOrder.some((group) =>
+        group.includes(TYPES_SPECIAL_WORD),
+    )
+        ? false
+        : true;
+
     const allOriginalImportNodes: ImportDeclaration[] = [];
     const parserOptions: ParserOptions = {
         sourceType: 'module',
         plugins: getExperimentalParserPlugins(importOrderParserPlugins),
     };
 
+    // Disable importOrderCombineTypeAndValueImports if typescript is not set to a version that supports it
+    if (
+        parserOptions.plugins?.includes('typescript') &&
+        semver.lt(importOrderTypeScriptVersion, '4.5.0')
+    ) {
+        importOrderCombineTypeAndValueImports = false;
+    }
+
     const ast = babelParser(code, parserOptions);
 
     const directives = ast.program.directives;

src/types.ts

@@ -32,10 +32,9 @@ export type ImportOrLine = ImportDeclaration | ExpressionStatement;
 
 export type GetSortedNodes = (
     nodes: ImportDeclaration[],
-    options: Pick<
-        PrettierOptions,
-        'importOrder' | 'importOrderCombineTypeAndValueImports'
-    >,
+    options: Pick<PrettierOptions, 'importOrder'> & {
+        importOrderCombineTypeAndValueImports: boolean;
+    },
 ) => ImportOrLine[];
 
 export type GetChunkTypeOfNode = (node: ImportDeclaration) => ChunkType;

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

@@ -1,5 +1,9 @@
-import { ParserOptions } from '@babel/parser';
-import { CommentBlock, CommentLine, ImportDeclaration } from '@babel/types';
+import type { ParserOptions } from '@babel/parser';
+import type {
+    CommentBlock,
+    CommentLine,
+    ImportDeclaration,
+} from '@babel/types';
 import { expect, test } from 'vitest';
 
 import { getAllCommentsFromNodes } from '../get-all-comments-from-nodes';
@@ -11,7 +15,7 @@ const getSortedImportNodes = (code: string, options?: ParserOptions) => {
 
     return getSortedNodes(importNodes, {
         importOrder: [],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     });
 };
 

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

@@ -18,7 +18,7 @@ import a from 'a';
     const importNodes = getImportNodes(code);
     const sortedNodes = getSortedNodes(importNodes, {
         importOrder: [],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     });
     const formatted = getCodeFromAst({
         nodesToOutput: sortedNodes,
@@ -54,7 +54,7 @@ import type {See} from 'c';
     const importNodes = getImportNodes(code, { plugins: ['typescript'] });
     const sortedNodes = getSortedNodes(importNodes, {
         importOrder: [],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     });
     const formatted = getCodeFromAst({
         nodesToOutput: sortedNodes,
@@ -66,8 +66,7 @@ import type {See} from 'c';
         `// first comment
 // second comment
 import a, { b, type Bee } from "a";
-import c from "c";
-import type { C, See } from "c";
+import c, { type C, type See } from "c";
 import g from "g";
 import k from "k";
 import t from "t";

src/utils/__tests__/get-sorted-nodes-by-import-order.spec.ts

@@ -1,4 +1,4 @@
-import { ImportDeclaration } from '@babel/types';
+import type { ImportDeclaration } from '@babel/types';
 import { expect, test } from 'vitest';
 
 import { getImportNodes } from '../get-import-nodes';
@@ -29,7 +29,7 @@ test('it returns all sorted nodes', () => {
     const result = getImportNodes(code);
     const sorted = getSortedNodesByImportOrder(result, {
         importOrder: ['^[./]'],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
 
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual([
@@ -78,7 +78,7 @@ test('it returns all sorted nodes with sort order', () => {
     const result = getImportNodes(code);
     const sorted = getSortedNodesByImportOrder(result, {
         importOrder: ['^a$', '^t$', '^k$', '^B', '^[./]'],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual([
         'node:fs/promises',
@@ -134,7 +134,7 @@ import {type B, A} from 'z';
     });
     const sorted = getSortedNodesByImportOrder(result, {
         importOrder: ['^[./]'],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual(['k', 't', 'z']);
     expect(
@@ -154,7 +154,7 @@ test('it returns all sorted nodes with builtin specifiers at the top', () => {
     const result = getImportNodes(code);
     const sorted = getSortedNodesByImportOrder(result, {
         importOrder: ['^[./]'],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
 
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual([
@@ -180,7 +180,7 @@ test('it returns all sorted nodes with custom third party modules and builtins a
     const result = getImportNodes(code);
     const sorted = getSortedNodesByImportOrder(result, {
         importOrder: ['^a$', '<THIRD_PARTY_MODULES>', '^t$', '^k$', '^[./]'],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual([
         'node:fs/promises',
@@ -212,7 +212,7 @@ test('it returns all sorted nodes with custom separation', () => {
             '^k$',
             '^[./]',
         ],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual([
         'node:fs/promises',
@@ -247,7 +247,7 @@ test('it does not add multiple custom import separators', () => {
             '^k$',
             '^[./]',
         ],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual([
         'node:fs/promises',

src/utils/__tests__/get-sorted-nodes.spec.ts

@@ -1,4 +1,4 @@
-import { ImportDeclaration } from '@babel/types';
+import type { ImportDeclaration } from '@babel/types';
 import { expect, test } from 'vitest';
 
 import { getImportNodes } from '../get-import-nodes';
@@ -30,7 +30,7 @@ test('it returns all sorted nodes, preserving the order side effect nodes', () =
     const result = getImportNodes(code);
     const sorted = getSortedNodes(result, {
         importOrder: [],
-        importOrderCombineTypeAndValueImports: false,
+        importOrderCombineTypeAndValueImports: true,
     }) as ImportDeclaration[];
     expect(getSortedNodesNamesAndNewlines(sorted)).toEqual([
         'se3',