ability to ignore statements such as 'use client'; at top of file

[ryparker]

React 18 introduced a 'use client'; statement to be added at the top of files that render on the client. However this plugin moves it below imports, preventing React from detecting the statement.

Example:

// prettier-ignore
'use client';

import Something from '@components/something';

export default function ClientsideComponent() {
    return (
        <div>
            Hello Client!
        </div>
    )
}

I think the ideal solution for this plugin would be to ignore any lines containing just a string literal and/or lines marked with // prettier-ignore.

[danieljvdm]

It's not actually a Next thing, it's a React Server Component convention - reactjs/rfcs#227. Right now we can't use this with this plugin.

[oliveiraantoniocc]

Since "use client" is not exactly an import directive, but just a string literal, I would suggest this extension ignoring lines with just string literals.

[broofa]

PR at #186

I would suggest this extension ignoring lines with just string literals

@oliveiraantoniocc It appears statements like 'use strict'; and 'use client'; are detected by babel as Directive nodes, so I think it makes sense to just rely on it's detection logic there (which this PR does.)

[oliveiraantoniocc]

Exactly, just reviewed the PR, well done!

[c-dante]

Hey, the pattern of using a literal string at the top of some method isn't unique to the file -- some libraries and systems use it as a directive for a function. For example, the "use strict" directive which can be local to a function:

function myStrictFunction() {
  // Function-level strict mode syntax
  "use strict";
  function nested() {
    return "And so am I!";
  }
  return `Hi! I'm a strict mode function! ${nested()}`;
}
function myNotStrictFunction() {
  return "I'm not strict.";
}

Or, in the case of a library like react-native-reanimated, worklets are defined by the function body:

function someWorklet(greeting) {
  'worklet';
  console.log("Hey I'm running on the UI thread");
}

So, extracting all those and throwing them to the source root doesn't work. Blanket moving raw string literals around probably breaks a number of silly assumptions folks make.

A couple solutions could be:

• Restrict this to a specific, configurable set of strings
• If the string literal is at the top of the file in the source, preserve that after the sort
• Only move string literals that are on the root scope of the source

[c-dante]

cc @oliveiraantoniocc , @ayusharma

[c-dante]

I made a PR to implement a patch of this behavior: #198

This updates the extract + re-insert logic to only apply to directives that are already at the start of the program, which is where the import sort would make changes.

[c-dante]

Any chance we can get a bump/review on the pr #198 @ayusharma / @oliveiraantoniocc? Been a month or so