keep script directives at top of file, fixes #185

[broofa]

This [hopefully] fixes #185 by extracting Directive nodes before processing the AST, and then re-injecting them as part of the file() generation used to create the import section of the script... which should preserve them at top-of-file.

Includes a new test case. Compiles cleanly, all tests pass.

[oliveiraantoniocc]

If there's a comment in front of it, the comment will end up being moved to a new line above the directive, for RSC most probably this will be incompatible, so no comments explaining why "use client"; // some explanation about directive will break RSC.

This is certainly not critical, an solution would be keeping comments in front for directives.

[oliveiraantoniocc]

@ayusharma could you please approve this?

[broofa]

@ayusharma Thoughts?

I, and I suspect others here, would very much like to get this merged and published ASAP as I don't believe there's a viable workaround for this issue other than to disable this plugin.

[vtv6]

any update on this pull request?

[byara]

Great work @broofa 👏
The PR looks good 👍 Would it be possible to add those two unit-test cases I mentioned?
If so I think we can merge it soon. What do you think @ayusharma?

[byara]

LGTM 🚀
Thank you for your contribution!

[broofa]

@byara: Just pinging you to note my last change that refactors the traverse() logic that I'd copy/pasta'd from preprocessor into the get-code-from-ast test into it's own module/method. (i.e. so it's no longer copy/pasted.)

[ayusharma]

Thank you for the changes ❤️. Looks good to me

[ayusharma]

@byara could you please release this?

[transitive-bullshit]

Amazing job @broofa 🙏

As a workaround until this is released, you can use:

pnpm add @trivago/prettier-plugin-sort-imports@npm:@fisch0920/prettier-plugin-sort-imports

(or the equivalent for your package manager)

@fisch0920/prettier-plugin-sort-imports is just @broofa's fork built and published to npm.

[byara]

Released in v4.0.0

FYI @broofa

[simon-dk]

Released in v4.0.0

Wow, that was fast! Much appreciated, and good job @broofa 👍

[transitive-bullshit]

Thanks as well @byara 🙏 😄

[Keshavdulal]

Is this the default behaviour? @broofa
I couldn't find anything on docs for Directives.

How do we achieve this?
I am on 4.1.1 and trying to add "use client" directive on a nextjs project, but it keeps going down below imports as

;('use client')

This is my .prettierrc

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "semi": false,
  "trailingComma": "es5",
  "jsxBracketSameLine": true,
  "endOfLine": "auto",
  "quoteProps": "as-needed",
  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

Thanks.

[cglacet]

@Keshavdulal Same issue here.

With the following dependencies:

{
  "devDependencies": {
    "eslint": "^8.5",
    "prettier": "^3",
    "@trivago/prettier-plugin-sort-imports": "~4.2.0",
    "turbo": "^1.4.2",
    "typescript": "^5.2.2"
  },
}

(Not exactly the same as I get ('use client'); and not ;('use client'))

[askjervold]

I get the same as @cglacet with version 4.3.0. I ended up switching to use eslint-plugin-simple-import-sort to handle this