fix(hmr): skip HMR for JSX files with hooks

[ArnaudBarre]

The current HMR implementation was trying to all HMR files that contains either hooks or components, but this was working only for components and lead to HMR invalidation for JSX files containing hooks.

The best solution would have been to support HMR for hooks, but in my testing it was sometimes leading to stale updates. So this simple and reliable solution is to skip HMR for these files and have the components handle the updates, like any other hooks file.

Fixes #289
Fixes #354
Fixes #411

[hi-ogawa]

Does this only remove warnings for non component files? It looks like the test case here and the repor in #354 is working in terms of HMR without this change.

Another interesting case is that the module exports only hook, but internally there's a non-exported components. Transform injects $RefreshReg$(_c, "Button") for this case, so refreshContentRE matches and thus warning still appears (but HMR still works).

// useButtonHook.tsx

export function useButtonHook() {
  return <Button />
}

function Button() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount((count) => count + 1)}>
      count is {count}
    </button>
  )
}

The change seems good, but I just want to confirm what this change is fixing.

[ArnaudBarre]

Current HMR of hooks is "always working", but it as a strange behaviour that makes the DX not great:

• If the file is hooks.ts, updates propagate to the component(s) that import those hooks and everything works.
• If the file is hooks.tsx, file try to self-update, then invalidate with a warning, then component(s) updates.

This is because we only apply React refresh transform on JSX files & the current logic says that if the file contains $RefreshReg$ (has component with refresh wrapper) or $RefreshSig$ (has hooks with refresh wrapper), add self update hmr footer. The issue is that this footer expect exports to be components and doesn't handle hooks.

I updated the code to have files with only hooks do the refresh self update, but without success, it lead to some stale updates. Plus this would requires extra complexity and running the react refresh transformation on all .js/.ts files to be consistent, which would be a big change.

This change is safe and makes hooks.tsx behave like hooks.ts so that you don't get annoying warnings

[sapphi-red]

Makes sense to me 👍

[sapphi-red]

The file name seems to be inconsistent.

[ArnaudBarre]

oups bad copy paste ahah

[hi-ogawa]

Thanks for clarifying it, but I'm not sure I got the answer 😅 My question was, in terms of user visible difference, does it only remove warnings for hooks exports only jsx/tsx files?
(If that's the case, change log doesn't seem to convey that to me, so should we adjust that?)

[ArnaudBarre]

@hi-ogawa Yes you are right this was too much and too technical information, I changed to only tell the user facing change and people can read the comment above to better understand the change if needed

[hi-ogawa]

Thanks! What's left is just renaming class-components.spec.ts?