Skip to content

Commit

Permalink
Merge branch 'main' into fix/vercel-template
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ethan-Arrowood
Ethan-Arrowood authored May 16, 2023
2 parents ef2e3a7 + e52a37e commit bdc9514
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 61 deletions.
2 changes: 1 addition & 1 deletion .vscode/deno_resolve_npm_imports.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"imports": {
"@remix-run/server-runtime": "https://esm.sh/@remix-run/server-runtime@nightly",
"mime": "https://esm.sh/mime@3.0.0"
"mime": "https://esm.sh/mime@^3.0.0"
}
}
99 changes: 50 additions & 49 deletions docs/pages/v2.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ All v2 APIs and behaviors are available in v1 with [Future Flags][future-flags].

#### Upgrading without changing files

You can keep using the old convention with `@remix-run/v1-route-convention` even after upgrading to v2 if you don't want to make the change right now (or ever, it's just a convention and you can use whatever file organization you prefer).
You can keep using the old convention with `@remix-run/v1-route-convention` even after upgrading to v2 if you don't want to make the change right now (or ever, it's just a convention, and you can use whatever file organization you prefer).

```sh
npm i @remix-run/v1-route-convention
Expand All @@ -26,7 +26,7 @@ const {
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
future: {
// makes the warning go away in v1.15
// makes the warning go away in v1.15+
v2_routeConvention: true,
},

Expand Down Expand Up @@ -74,7 +74,7 @@ routes
│ └── projects.tsx
├── __auth.tsx
├── __public.tsx
└── dashboard.calendar.$projectId.print.tsx
└── dashboard.projects.$projectId.print.tsx
```

Becomes this with `v2_routeConvention`:
Expand All @@ -101,7 +101,7 @@ routes
├── dashboard.projects.$projectId.tsx
├── dashboard.projects.new.tsx
├── dashboard.projects.tsx
└── dashboard_.calendar.$projectId.print.tsx
└── dashboard_.projects.$projectId.print.tsx
```

Note that parent routes are now grouped together instead of having dozens of routes between them (like the auth routes). Routes with the same path but not the same nesting (like `dashboard` and `dashboard_`) also group together.
Expand Down Expand Up @@ -294,7 +294,7 @@ export function ErrorBoundary({ error }) {

Becomes:

```tsx filename=app/routes/v2-route.tsx
```tsx filename=app/routes/v2-route.tsx good
import {
useRouteError,
isRouteErrorResponse,
Expand Down Expand Up @@ -331,6 +331,39 @@ export function ErrorBoundary() {
}
```

## `formMethod`

```js filename=remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
future: {
v2_normalizeFormMethod: true,
},
};
```

Multiple APIs return the `formMethod` of a submission. In v1 they return a lowercase version of the method but in v2 they return the UPPERCASE version. This is to bring it in line with HTTP and `fetch` specifications.

```tsx
function Something() {
const navigation = useNavigation();

// v1
navigation.formMethod === "post";

// v2
navigation.formMethod === "POST";
}

export function shouldRevalidate({ formMethod }) {
// v1
formMethod === "post";

// v2
formMethod === "POST";
}
```

## `useTransition`

This hook is now called `useNavigation` to avoid confusion with the recent React hook by the same name. It also no longer has the `type` field and flattens the `submission` object into the `navigation` object itself.
Expand All @@ -347,7 +380,7 @@ function SomeComponent() {
}
```

```tsx filename=app/routes/v2-route.tsx
```tsx filename=app/routes/v2-route.tsx good
import { useNavigation } from "@remix-run/react";

function SomeComponent() {
Expand All @@ -363,7 +396,7 @@ function SomeComponent() {
}
```

You can derive the previous `transition.type` with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking `navigation.state`, `navigation.formData` or the data returned from an action with `useActionData` can get the UX you're looking for. Feel free to ask us in Discord and we'll help you out :D
You can derive the previous `transition.type` with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking `navigation.state`, `navigation.formData` or the data returned from an action with `useActionData` can get the UX you're looking for. Feel free to ask us in Discord, and we'll help you out :D

```tsx
function Component() {
Expand All @@ -377,29 +410,29 @@ function Component() {
const isActionReload =
navigation.state === "loading" &&
navigation.formMethod != null &&
navigation.formMethod != "get" &&
navigation.formMethod != "GET" &&
// We had a submission navigation and are loading the submitted location
navigation.formAction === navigation.location.pathname;

// transition.type === "actionRedirect"
const isActionRedirect =
navigation.state === "loading" &&
navigation.formMethod != null &&
navigation.formMethod != "get" &&
navigation.formMethod != "GET" &&
// We had a submission navigation and are now navigating to different location
navigation.formAction !== navigation.location.pathname;

// transition.type === "loaderSubmission"
const isLoaderSubmission =
navigation.state === "loading" &&
navigation.state.formMethod === "get" &&
navigation.state.formMethod === "GET" &&
// We had a loader submission and are navigating to the submitted location
navigation.formAction === navigation.location.pathname;

// transition.type === "loaderSubmissionRedirect"
const isLoaderSubmissionRedirect =
navigation.state === "loading" &&
navigation.state.formMethod === "get" &&
navigation.state.formMethod === "GET" &&
// We had a loader submission and are navigating to a new location
navigation.formAction !== navigation.location.pathname;
}
Expand All @@ -421,7 +454,7 @@ function SomeComponent() {
}
```

```tsx filename=app/routes/v2-route.tsx
```tsx filename=app/routes/v2-route.tsx good
import { useFetcher } from "@remix-run/react";

function SomeComponent() {
Expand All @@ -437,7 +470,7 @@ function SomeComponent() {
}
```

You can derive the previous `fetcher.type` with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking `fetcher.state`, `fetcher.formData` or the data returned from an action on `fetcher.data` can get the UX you're looking for. Feel free to ask us in Discord and we'll help you out :D
You can derive the previous `fetcher.type` with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checking `fetcher.state`, `fetcher.formData` or the data returned from an action on `fetcher.data` can get the UX you're looking for. Feel free to ask us in Discord, and we'll help you out :D

```tsx
function Component() {
Expand All @@ -454,22 +487,22 @@ function Component() {
const isActionReload =
fetcher.state === "loading" &&
fetcher.formMethod != null &&
fetcher.formMethod != "get" &&
fetcher.formMethod != "GET" &&
// If we returned data, we must be reloading
fetcher.data != null;

// fetcher.type === "actionRedirect"
const isActionRedirect =
fetcher.state === "loading" &&
fetcher.formMethod != null &&
navigation.formMethod != "get" &&
navigation.formMethod != "GET" &&
// If we have no data we must have redirected
fetcher.data == null;

// fetcher.type === "loaderSubmission"
const isLoaderSubmission =
navigation.state === "loading" &&
navigation.state.formMethod === "get";
navigation.state.formMethod === "GET";

// fetcher.type === "normalLoad"
const isNormalLoad =
Expand All @@ -478,38 +511,6 @@ function Component() {
}
```

## `formMethod`

```js filename=remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
future: {
v2_normalizeFormMethod: true,
},
};
```

Multiple APIs return the `formMethod` of a submission. In v1 they return a lowercase version of the method but in v2 they return the UPPERCASE version. This is to bring it in line with HTTP and `fetch` specifications.

```tsx
function Something() {
const navigation = useNavigation();

// v1
navigation.formMethod === "post";

// v2
navigation.formMethod === "POST";
}

export function shouldRevalidate({ formMethod }) {
// v1
formMethod === "post";
// v2
formMethod === "POST";
}
```

## Links `imagesizes` and `imagesrcset`

Route `links` properties should all be the React camelCase values instead of HTML lowercase values. These two values snuck in as lowercase in v1. In v2 only the camelCase versions will be valid:
Expand Down Expand Up @@ -576,7 +577,7 @@ module.exports = {
};
```

Remix used to create more than a single module for the server but it now creates a single file.
Remix used to create more than a single module for the server, but it now creates a single file.

## `serverBuildTarget`

Expand Down
3 changes: 1 addition & 2 deletions docs/tutorials/jokes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3851,8 +3851,7 @@ export default function Login() {
type="hidden"
name="redirectTo"
value={
(searchParams.get("redirectTo") as string) ??
undefined
searchParams.get("redirectTo") ?? undefined
}
/>
<fieldset>
Expand Down
15 changes: 9 additions & 6 deletions templates/deno/.vscode/resolve_npm_imports.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@
"Deno-only dependencies may be imported via URL imports (without using import maps)."
],
"imports": {
"@remix-run/css-bundle": "https://esm.sh/@remix-run/css-bundle@1.16.0",
"// `@remix-run/deno` code is already a Deno module, so just get types for it directly from `node_modules/`": "",
"@remix-run/deno": "../node_modules/@remix-run/deno/index.ts",
"@remix-run/server-runtime": "https://esm.sh/@remix-run/server-runtime@1.9.0",
"@remix-run/dev/server-build": "https://esm.sh/@remix-run/dev@1.9.0/server-build",
"@remix-run/react": "https://esm.sh/@remix-run/react@1.9.0",
"react": "https://esm.sh/react@17.0.2",
"react-dom": "https://esm.sh/react-dom@17.0.2",
"react-dom/server": "https://esm.sh/react-dom@17.0.2/server"
"@remix-run/dev/server-build": "https://esm.sh/@remix-run/dev@1.16.0/server-build",
"@remix-run/react": "https://esm.sh/@remix-run/react@1.16.0",
"@remix-run/server-runtime": "https://esm.sh/@remix-run/server-runtime@1.16.0",
"isbot": "https://esm.sh/isbot@^3.6.8",
"react": "https://esm.sh/react@^18.2.0",
"react-dom": "https://esm.sh/react-dom@^18.2.0",
"react-dom/client": "https://esm.sh/react-dom@^18.2.0/client",
"react-dom/server": "https://esm.sh/react-dom@^18.2.0/server"
}
}
6 changes: 3 additions & 3 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13322,9 +13322,9 @@ vite@^4.1.4:
fsevents "~2.3.2"

vm2@^3.9.8:
version "3.9.17"
resolved "https://registry.npmjs.org/vm2/-/vm2-3.9.17.tgz#251b165ff8a0e034942b5181057305e39570aeab"
integrity sha512-AqwtCnZ/ERcX+AVj9vUsphY56YANXxRuqMb7GsDtAr0m0PcQX3u0Aj3KWiXM0YAHy7i6JEeHrwOnwXbGYgRpAw==
version "3.9.18"
resolved "https://registry.npmjs.org/vm2/-/vm2-3.9.18.tgz#d919848bee191a0410c5cc1c5aac58adfd03ce9a"
integrity sha512-iM7PchOElv6Uv6Q+0Hq7dcgDtWWT6SizYqVcvol+1WQc+E9HlgTCnPozbQNSP3yDV9oXHQOEQu530w2q/BCVZg==
dependencies:
acorn "^8.7.0"
acorn-walk "^8.2.0"
Expand Down

0 comments on commit bdc9514

Please sign in to comment.