Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add deprecation warnings for v2_normalizeFormMethod #5863

Merged
merged 2 commits into from
Mar 21, 2023
Merged

Add deprecation warnings for v2_normalizeFormMethod #5863

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cb54fc
Add deprecation warnings for v2_normalizeFormMethod
brophdawg11 Mar 21, 2023
5a696d1
Enable in integration tests that assert the console
brophdawg11 Mar 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/normalize-form-method-deprecation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@remix-run/dev": minor
"@remix-run/react": minor
---

Add deprecation warnings for `v2_normalizeFormMethod`
13 changes: 8 additions & 5 deletions docs/hooks/use-navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,17 @@ import { useNavigation } from "@remix-run/react";

function SomeComponent() {
const navigation = useNavigation();
navigation.state;
navigation.location;
navigation.formData;
navigation.formAction;
navigation.formMethod;
navigation.state; // "idle" | "submitting" | "loading"
navigation.location; // Location being navigated to
navigation.formData; // formData being submitted
navigation.formAction; // url being submitted to
navigation.formMethod; // "GET" | "POST" | "PATCH" | "PUT" | "DELETE"
}
```

<docs-warning>The `useNavigation().formMethod` field is lowercase without the `future.v2_normalizeFormMethod` [Future Flag][api-development-strategy]. This is being normalized to uppercase to align with the `fetch()` behavior in v2, so please upgrade your Remix v1 applications to adopt the uppercase HTTP methods.</docs-warning>

<docs-info>For more information and usage, please refer to the [React Router `useNavigation` docs][rr-usenavigation].</docs-info>

[rr-usenavigation]: https://reactrouter.com/hooks/use-navigation
[api-development-strategy]: ../pages/api-development-strategy
8 changes: 7 additions & 1 deletion packages/remix-dev/__tests__/create-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import stripAnsi from "strip-ansi";

import { run } from "../cli/run";
import { server } from "./msw";
import { errorBoundaryWarning, flatRoutesWarning } from "../config";
import {
errorBoundaryWarning,
flatRoutesWarning,
formMethodWarning,
} from "../config";

beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterAll(() => server.close());
Expand Down Expand Up @@ -349,6 +353,8 @@ describe("the create command", () => {
]);
expect(output.trim()).toBe(
errorBoundaryWarning +
"\n" +
formMethodWarning +
"\n" +
flatRoutesWarning +
"\n\n" +
Expand Down
10 changes: 10 additions & 0 deletions packages/remix-dev/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,6 +410,10 @@ export async function readConfig(
warnOnce(errorBoundaryWarning, "v2_errorBoundary");
}

if (!appConfig.future?.v2_normalizeFormMethod) {
warnOnce(formMethodWarning, "v2_normalizeFormMethod");
}

let isCloudflareRuntime = ["cloudflare-pages", "cloudflare-workers"].includes(
appConfig.serverBuildTarget ?? ""
);
Expand Down Expand Up @@ -775,3 +779,9 @@ export const errorBoundaryWarning =
"behavior in Remix v1 via the `future.v2_errorBoundary` flag in your " +
"`remix.config.js` file. For more information, see " +
"https://remix.run/docs/route/error-boundary-v2";

export const formMethodWarning =
"⚠️ DEPRECATED: Please enable the `future.v2_normalizeFormMethod` flag to " +
"prepare for the Remix v2 release. Lowercase `useNavigation().formMethod`" +
"values are being normalized to uppercase in v2 to align with the `fetch()` " +
"behavior. For more information, see https://remix.run/docs/hooks/use-navigation";
10 changes: 10 additions & 0 deletions packages/remix-react/browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,16 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
);
}

if (!window.__remixContext.future.v2_normalizeFormMethod) {
warnOnce(
false,
"⚠️ DEPRECATED: Please enable the `future.v2_normalizeFormMethod` flag to " +
"prepare for the Remix v2 release. Lowercase `useNavigation().formMethod`" +
"values are being normalized to uppercase in v2 to align with the `fetch()` " +
"behavior. For more information, see https://remix.run/docs/hooks/use-navigation"
);
}

Comment on lines +154 to +163
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ooh i didn't even think to include deprecations in the browser console

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I've only done it for remix-react related flags so far. Not yet convinced it makes sense to put say a flat routes deprecation log in the console

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like we also let this log in production 🙈
image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR to fix #5874

let routes = createClientRoutes(
window.__remixManifest.routes,
window.__remixRouteModules,
Expand Down