### What?
When renaming a page from `page.js` to `page.tsx` it can temporarily
have both variants which end up writing the same files.
Also fixes symlinked page files
Depends on https://github.com/vercel/turbo/pull/8851
fixes PACK-2718
## What
This PR introduces `<Form>`, a form component integrated with the
Next.js router.
Form has two modes of operation.
### When `action` is a path/url
```jsx
<Form action="/search">
```
In essence, this is a progressively enhanced GET form.
- it will prefetch the target route (or, more commonly in this case, its
loading state)
- when submitted, it will perform a **client navigation** to the target
URL, encoding input fields from the form into the URL as search params.
### When `action` is a function
```jsx
<Form action={myReactAction}>
```
This is a progressively enhanced POST form. In this case, `<Form>` will
act just like `<form>` (i.e. execute the action function when
submitted). This is mostly here for convenience/consistency with React.
## Notes
### Notable props (or lack thereof)
- `replace` - same as Link, call `router.replace` instead of
`router.push` when navigating. This only works in "GET mode".
- `scroll` - same as Link, control the `scroll` option of router when
navigating. This only works in "GET mode".
- `onSubmit` - same as the usual, but notably, **calling
`event.preventDefault()` inside it will prevent Next from navigating**
(this matches how Link's `onClick` works)
We disallow passing certain form props (`method`, `encType`, `target`)
because both the GET and POST cases have specific requirements for these
that can't be overridden.
There is currently no way to control/disable the prefetching behavior
(like `<Link prefetch={false}>`) or render a custom component instead of
`<form>` (like Link's `passHref` behavior). These may be added in the
future.
### Submitter overrides
We have partial support for overriding the `action` via
```jsx
<button type="submit" formAction="/other-search">
```
It will also client-navigate, but can't be prefetched (because we don't
know the route to prefetch until a submit occurs), so this isn't really
recommended (unless the prefetch is triggered in some other way).
Unfortunately, just like `formAction`, all of the "banned" props
mentioned in the previous section (`method`, `encType`, `target`) are
overridable by the submitting element (the
["submitter"](https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter))
via `formMethod` , `formEncType` and `formTarget` respectively. We don't
have a good way of banning these within a `<Form>`, because we don't
have control over `<button>` props. So in this case the best we can do
is just warn and fall back to native browser behavior (because this is
what'd happen before hydration). Which means that **if the submitter
specifies a `formMethod` , `formEncType` and `formTarget` that Form
don't support, we will not client-navigate.**
### handling `<input type="file">`
Surprisingly, this works in a url-encoded form, even if it makes very
little sense. But same as submitter props, we have no good way of
banning it, so we match the browser behavior and submit _the filename_
instead of the file object.
ExternalCjsModulesResolvePlugin was originally disabled for requests
inside node_modules (e.g. from inside `cacheable-request` to `keyv`) by
@sokra in https://github.com/vercel/turbo/pull/3736.
But it seems that we do want this to happen
In the `ExternalPredicate::AllExcept` case, requests inside node_modules
are still ignored. Otherwise
`next/dist/compiled/next-server/pages.runtime.dev.js` was marked as
external and failed many tests
With that fixed, add `keyv` so that `got` can be imported.
Fixes#67282
Fixes PACK-3139
### What?
Implements a transform that adds readable names to anonymous function
expressions in react component functions.
Adding `{ debugFunctionName: true }` to swcOptions will do the trick.
### Why?
x-ref: https://vercel.slack.com/archives/C04TR3U872A/p1721702161121619
### How?
In larger apps, when compilation can take time and endpoints are often
build concurrently, `endpoint_server_changed_subscribe`’s subscription
to turbotasks can result in unnecessary calls of the JS callback even
when turbotasks input has not changed.
This wraps subscribing to issues and diagnostics in
`endpoint_server_changed_subscribe` within a turbotasks function that
ensures that inputs are properly consistent (e.g. diagnostics have been
sorted and are value-equal) so this callback is not called unnecessary.
Test Plan: Navigate within a large app and verify
`serverComponentChanges` messages are not sent through the web socket
connection and the browser does not perform unnecessary fetch requests
to rsc endpoints.
### Turbopack Changes
* https://github.com/vercel/turbo/pull/8777 <!-- Tobias Koppers - merge
InProgressDirty into InProgress -->
* https://github.com/vercel/turbo/pull/8785 <!-- Tobias Koppers - fix
watcher bug with file creation -->
* https://github.com/vercel/turbo/pull/8793 <!-- Tobias Koppers - get
rid of notify-debouncer in favor of our own debouncing -->
* https://github.com/vercel/turbo/pull/8805 <!-- Tobias Koppers - impl
Ord for Diagnostics and Issue so they are sorted correctly -->
---------
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Tobias Koppers