Also sort the exports

[eduardodallmann]

Is your feature request related to a problem?
Sort also export not just imports.

Describe the solution you'd like
When I have code like that:

export { c, a, b, A } from 'foo';
export { x } from 'bar';

To be sorted like that:

export { x } from 'bar';
export { A, a, b, c } from 'foo';

Describe alternatives you've considered
None

Additional context
Related: trivago/prettier-plugin-sort-imports#159

[fbartho]

@eduardodallmann unfortunately sorting exports could break code. For example:

export const FooAPI = new MyAPI(args);

// export our default implementation separately
export const beAwesome = FooAPI.beAwesome:

If you sorted this, your output would break! Obviously this is a trivial example, there’s tons of other ways to case moving around exports to be a problem.

This is a neat idea, that might make sense in someone’s codebase, so I encourage you to to make a prettier-plugin-sort-exports library. I just think that’s out-of-scope for this library!

[eduardodallmann]

You are correct. Sorting export lines can cause a lot of problems. But I believe that organizing just the de-structuring could be good.

This plugin does that https://github.com/simonhaenisch/prettier-plugin-organize-imports

[IanVS]

There are potentially also cases where we could sort re-exports based on the source, which you show in your original example. I have some files in my own project which could benefit from that. But technically I think it might be difficult to achieve with the current way this plugin works, since exports can be spread throughout the file, whereas imports are always at the top (at least by convention, since they execute first). I'll take off the wontfix label for now, but not commit to anything just yet.

Thanks for mentioning prettier-plugin-organize-imports. I haven't looked into that one too closely, what are your impressions on the main differences between that library and this one, and are you currently using either one of them?

[eduardodallmann]

I'm currently using the prettier-plugin-sort-imports lib. In my opinion it is much better because it is more like trivago but solves many of the problems.

The only thing I like about prettier-plugin-organize-imports is organizing the export.

I'm in a remix.run project, and by convention the routes have loader and action functions being exported. But to better separate and organize the codebase I did it this way:

routes/
├── login/
│   ├── login.server.ts
│   ├── route.tsx

login.server.ts

export const loader: LoaderFunction = (): LoginLoaderReturn => ....

export const action: ActionFunction = async ({ request }) => ....

route.tsx

import ....
import ....

export { loader, action } from './login.server';

export default function Login() {
   return a react component....

Reference https://remix.run/docs/en/1.19.3/route/loader

[SalahAdDin]

I'm looking exactly for something like this, but there are not maintained libraries at the moment, and honestly, I don't understand why.

[IanVS]

@SalahAdDin, are you looking for sorting exports, or only re-exports from other files?

[SalahAdDin]

@SalahAdDin, are you looking for sorting exports, or only re-exports from other files?

Sorting exports, We don't have to go to every file and sort them manually hahahahaha.

[IanVS]

I mean, do you want to sort all exports? If a file exports two functions and a constant, you want to sort those? Or only sort re-exports like this?

export foo from "./foo";

[SalahAdDin]

I mean, do you want to sort all exports? If a file exports two functions and a constant, do you want to sort those? Or only sort re-exports like this?

export foo from "./foo";

Not re-export, the file exports, that is the most common use for the export function (i think).

[IanVS]

Can you give an example of a before and after?

[SalahAdDin]

Can you give an example of a before and after?

Input:

export type {
  RContentNode,
  RImage,
  RContent,
  RLink,
  RList,
  RNode,
  RTextAttributes,
  RListItem,
  RVideo,,
  RNodeChildren,
  RText,
  RNodeType
};

Ouput:

export type {
  RContent,
  RContentNode,
  RImage,
  RLink,
  RList,
  RListItem,
  RNode,
  RNodeChildren,
  RNodeType,
  RText,
  RTextAttributes,
  RVideo,
};