Updates for Remix on RR 6.4 #9664
Conversation
brophdawg11
commented
Dec 1, 2022
•
brophdawg11
commented
- Changeset
- Unit tests
🦋 Changeset detectedLatest commit: 10b6c5b The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| method: submitMethod, | ||
| replace, | ||
| relative, | ||
| }); |
There was a problem hiding this comment.
Same fix Remix used to ensure we allow <button type="submit" formmethod="post"> type overrides
| // Shallow clone path so we can modify it below, otherwise we modify the | ||
| // object referenced by useMemo inside useResolvedPath | ||
| let path = { ...useResolvedPath(resolvedAction, { relative }) }; | ||
| let path = { ...useResolvedPath(action ? action : ".", { relative }) }; |
There was a problem hiding this comment.
Remove ?? usage which breaks older browsers
| @@ -245,5 +245,5 @@ export function getFormSubmissionInfo( | |||
| let { protocol, host } = window.location; | |||
| let url = new URL(action, `${protocol}//${host}`); | |||
|
|
|||
| return { url, method, encType, formData }; | |||
| return { url, method: method.toLowerCase(), encType, formData }; | |||
There was a problem hiding this comment.
Lowercase incoming methods, since <Form method="POST"> is valid HTML
| @@ -7,6 +7,7 @@ | |||
| "__DEV__": true | |||
| }, | |||
| "rules": { | |||
| "strict": 0 | |||
| "strict": 0, | |||
| "no-restricted-syntax": ["error", "LogicalExpression[operator='??']"] | |||
There was a problem hiding this comment.
See ?? removal below - added a lint rule to prevent that showing up again
brophdawg11
force-pushed
the
brophdawg11/remix-updates
branch
from
29d3f51
to
a5e45d7
Compare
packages/router/router.ts
Outdated
| // location. If the user redirects from the action/loader this will be | ||
| // ignored and the redirect will be a PUSH | ||
| historyAction = HistoryAction.Replace; | ||
| } |
There was a problem hiding this comment.
@ryanflorence This fixes 2 things from the prior approach:
- Explicit
replace:falsewas respected if the action returned a redirect, but was getting lost if it didn't - Our "default to replace on submission" logic is now limited to same-path submissions, since you've already gone to the new location we don't need to replace the location you submitted from to avoid the double-back-click
/, link to/a, submit to/a-> history stack is[/, /a]- back button takes you to/- No changes here
/, link to/a, submit to/b-> history stack is[/, /a, /b]- back button takes you to/a- Previously this would have replaced
/aand left you with[/, /b]and a back button would go back to/
- Previously this would have replaced
| @@ -435,6 +435,7 @@ type FetcherStates<TData = any> = { | |||
| formEncType: undefined; | |||
| formData: undefined; | |||
| data: TData | undefined; | |||
| " _hasFetcherDoneAnything "?: boolean; | |||
There was a problem hiding this comment.
don't love this but need to expose something for back-compat layer in Remix to differentiate idle/init and idle/done
packages/react-router-dom/index.tsx
Outdated
| }: { | ||
| getKey?: GetScrollRestorationKeyFunction; | ||
| storageKey?: string; | ||
| skip?: boolean; |
There was a problem hiding this comment.
Still not sure if this is 100% required or the best solution but going to play with it a bit more, need a way for Remix to communicate hydration info to skip initial restoration (which Remix did from an inline script)
| _isRedirect: true, | ||
| ...(isFetchActionRedirect ? { _isFetchActionRedirect: true } : {}), |
There was a problem hiding this comment.
Using location.state to drive back-compat useTransition.type layer in Remix
| // Add a null for all matched routes for proper revalidation on the client | ||
| loaderData: matches.reduce( | ||
| (acc, m) => Object.assign(acc, { [m.route.id]: null }), | ||
| {} | ||
| ), |
There was a problem hiding this comment.
Ensure proper hydration by always sending null values for non-executed route loaders on the server. This is needed to handle differences where they may be no loader on the server, but there is a loader on the client (for route JS chunk fetching). The client gets confused on initial load and decides "this route is active but I've got no hydrated loader data so I need to do an initial fetch). It also impacts subsequent routing since it doesn't see this route as a revalidation.
Another approach would be for the client-side router to treat any hydrationData as complete and simply add null there for any active routes without hydrationData.
.changeset/itchy-swans-travel.md
Outdated
| "@remix-run/router": patch | ||
| --- | ||
|
|
||
| Fix explicit `replace` on submissions and `PUSH` on submission to new paths |
There was a problem hiding this comment.
Change implementation to be based on the next location (either from formAction or redirect). Replace if it's the same (pathname + search), push otherwise.
