[Fresh] Generate signatures for Hooks

[gaearon]

This adds support for editing components with Hooks.

State preservation already works by default. The goal here is to not preserve state in cases where it is known to lead to problems. Such as reordering or deleting Hooks. We want to detect when that happens and remount.

This is implemented by generating __signature__ calls for functions that contains calls to Hooks:

function ButtonV1() {
  const [pressed, setPressed] = useState(false)
}
__signature__(ButtonV1, 'useState{[pressed, setPressed]}')

// -----------
// After edit
// -----------

function ButtonV1() {
  const [hover, setHover] = useState(false)
  const [pressed, setPressed] = useState(false)
  // ...
}
__signature__(ButtonV1, 'useState{[hover, setHover]}\nuseState{[pressed, setPressed]}')

If a signature changes, the Fresh runtime will tell React to remount that component type.

The signature contains names of all Hooks. Hooks that have a left hand side like const [foo, setFoo] have its source embedded in the signature. This catches renames (which often indicate invasive edits like changing state variable type).

If you use custom Hooks, we add them as the last argument:

import useMyStuff from './useMyStuff'

function Foo() {
  const stuff = useMyStuff()
}
__signature__(
  Foo,
  'useMyStuff{stuff}',
  () => [useMyStuff] // <--- references, not strings!
);

This lets us recurse into each custom Hook when comparing signatures, so that if useMyStuff itself gets edited, we can remount the components using it.

The last argument is lazily evaluated (a function) for two reasons:

1. The reference might not be valid at the definition time because the Hook itself could be declared later in the file.
2. In React Native, we'll want to avoid triggering inline requires at module init time to avoid differences with production behavior.

The PR is easier to read without whitespace because some logic moved. You might also want to check commits separately.

[sizebot]

	Warnings
⚠️	Could not find build artifacts for base commit: 3939248

Generated by 🚫 dangerJS

[bvaughn]

Why the decision to omit useRef, useContext, and useDebugValue?

[gaearon]

I forgot about them lol

[bvaughn]

😂

[bvaughn]

Nice.

[bvaughn]

Nice

[SimenB]

you can use https://www.npmjs.com/package/jest-snapshot-serializer-raw to avoid the escaped " and extra wrapping ". We've done the same in Jest: jestjs/jest#7651

Makes them a bit easier to read, IMO 🙂

EDIT: Simple enough to PR, so I did: #15806