Indentation error for JSX fragment

[jcubic]

There is an error in indentation:

function App() {
  return (
    <>
      <a href="https://example.com">
        <img/>
      </a>
    <div>
    </div>
    </>
  );
}

The <div> is not indented the same as <a> and closing fragment is not in color:

[jcubic]

Another example:

const Translations = () => {
  const { t } = useTranslation("coi-platform-translations", {
    keyPrefix: keyPrefixes.main,
  });
  return (
    <>
      <Alert severity="info" icon={false}>
        <AlertTitle>{t("info_title")}</AlertTitle>
    <Typography variant="body2">{t("info_description")}</Typography>
    </Alert>
    <EditForm />
    </>
  );
};

This is part of real application.

[fxbois]

I won't work on this (an empty tag <> does seem a good idea)

[jcubic]

Even if I donate some money? This is pretty common in React.

[fxbois]

We can discuss ;)

[jcubic]

How much you want to fix this? 10-20? 50 USD is max I can pay.

I can't sponsor you, since I myself had one sponsor for $1 USD I think it was something like $10 per month, but it seems he changed the tier. And it's too small to even get the money (you need at least 1 euro).

[jcubic]

But if you accept $1 per month, I can give you that, since I don't get a dime from it. And I use this project a lot.

[coun7zer0]

The solution I found for this was to use the version of web-mode from the MELPA Stable repository:

  (setq package-archives
	  '(("gnu" . "https://elpa.gnu.org/packages/")
	    ("melpa" . "https://melpa.org/packages/")
	    ("nongnu" . "https://elpa.nongnu.org/nongnu/")
	    ("melpa-stable" . "https://stable.melpa.org/packages/")))
  (setq package-archive-priorities
	'(("gnu" . 10)
	  ("melpa" . 8)
	  ("nongnu" . 4)
	  ("melpa-stable" . 0)))

And this is my configuration to install it using use-package:

  (use-package web-mode
    :ensure t
    :pin melpa-stable
    :commands web-mode)

[fxbois]

good news if this snippet solve the issue ...

... 1$ ...I prefer not to react to your proposal

[jcubic]

Yes it seems that the indentation works. I used version from Melpa and was updating the git repo that I had on disk that was not used.

export default function Home() {
  return (
    <>
      <div/>
      <p>
        <span/>
      </p>
      <div></div>
    </>
  )

one minor things is that the closing </> is not in color but I can live with that.

[jcubic]

No it doesn't work, so for React your mode is of no use:

export default function Home() {
  return (
      <>
        <header className={styles.header}>
          <Image src="/logo.svg" alt="SNApp logo" fill/>
        </header>
      <main className={styles.main}>
        
      </main>
      </>
  );
}

This is what web-mode is giving me. If you don't want $50 USD, I don't think that I can give you more, to fix your library for a very common use case.

[jcubic]

Note that it's part of the project already:

        (cond

          ((member tname '("/>" ">")) ;;jsx fragment #952
           (setq tname "_fragment_"
                 tend (point))

But it doesn't work correctly. I was playing around with the code, but I have no idea how to fix the issue.

Will you fix the JSX fragments indentation if I pay you? How much you want?

[fxbois]

It is now fixed.

[jcubic]

I just update web-mode, it's better but not 100% correct.

  return (
    <>
      <Card onSubmitAction={fetchFirstCommit} />
      {loading && <Text>Loading ....</Text>}
      {error && <Text>{error}</Text>}
      {data && <>
        <Text>{data.commit.message}</Text>
          </>}
      </>
  );

{} is like escape where you enter a JavaScript expression, where JSX (XML tags) are also expressions.

[fxbois]

I do not deal with this kind of syntax : code && tag

[jcubic]

I need to check again the code from GitHub, I've updated from Melpa, but I don't see the fix working even with my base code.

Let's hope that {expression && JSX} works out of the box, since this standard JavaScript code. This is pretty common code in React. I always use it with normal tags it only breaks with fragments. I never had issues with normal code.

[jcubic]

I just checked again, with latest from git (I was using load-path not Melpa), and this works fine:

{data && <>
  <Commit ref={ref} {...data} />
  <Button onClick={screenshot}>Download Image</Button>
</>}

JSX tag is a first class value, so it can be put everywhere other values and this seems to work fine.

Thanks, for your work.