The end-to-end platform for creating, sharing, and running codemods with engines like jscodeshift, ast-grep, ts-morph, and more. Automate code migrations, cleanups, and refactors for you, your team, and the community. AI-powered and CLI-first.
Instead of returning an object from meta, you will now return an array of descriptors and manage the merge yourself. This brings the meta API closer to links, and it allows for more flexibility and control over how meta tags are rendered.
Additional Details
Return type: Now returns an array of descriptors instead of an object.
Function parameters: Added matches parameter to access route hierarchy information.
Object structure: Replaced object literal with an array of objects, each representing a meta descriptor.
Using the metaV1 function, you can pass in the meta function's arguments and the same object it currently returns. This function will use the same merging logic to merge the leaf route's meta with its direct parent route meta before converting it to an array of meta descriptors usable in v2.
Additional Details
You can update your meta exports with the @remix-run/v1-meta package to continue using v1 conventions.
Note that this function will not merge meta across the entire hierarchy by default because you may have some routes that return an array of objects directly without the metaV1 function and this could result in unpredictable behavior. If you want to merge meta across the entire hierarchy, use the metaV1 function for all of your route's meta exports.
In v2, the meta function no longer receives the parentsData argument. This is because meta now has access to all of your route matches via the matches argument, which includes loader data for each match.
Additional Details
To replicate the API of parentsData, the @remix-run/v1-meta package provides a getMatchesData function. It returns an object where the data for each match is keyed by the route's ID.
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.
Additional Details
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.
Like useNavigation, useFetcher has flattened the submission and removed the type field.
Additional Details
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.
v1 → v2
add-matches-param-and-array-return-to-meta-export
meta
, you will now return an array of descriptors and manage the merge yourself. This brings themeta
API closer tolinks
, and it allows for more flexibility and control over how meta tags are rendered.Additional Details
matches
parameter to access route hierarchy information.remix_1_add-meta-v1-wrapper
metaV1
function, you can pass in themeta
function's arguments and the same object it currently returns. This function will use the same merging logic to merge the leaf route's meta with its direct parent route meta before converting it to an array of meta descriptors usable in v2.Additional Details
meta
exports with the@remix-run/v1-meta
package to continue using v1 conventions.metaV1
function and this could result in unpredictable behavior. If you want to merge meta across the entire hierarchy, use themetaV1
function for all of your route's meta exports.remix-run_v1_meta-function-args-wrapper
meta
function no longer receives theparentsData
argument. This is becausemeta
now has access to all of your route matches via thematches
argument, which includes loader data for each match.Additional Details
parentsData
, the@remix-run/v1-meta
package provides agetMatchesData
function. It returns an object where the data for each match is keyed by the route's ID.remix_1_use-route-error-codemod
remix-run_1_use-transition-to-use-navigation
useNavigation
to avoid confusion with the recent React hook by the same name. It also no longer has thetype
field and flattens thesubmission
object into thenavigation
object itself.Additional Details
transition.type
with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checkingnavigation.state
,navigation.formData
or the data returned from an action withuseActionData
can get the UX you're looking for.fetcher-submission-properties-flattening
useNavigation
,useFetcher
has flattened thesubmission
and removed thetype
field.Additional Details
fetcher.type
with the following examples. Keep in mind, there's probably a simpler way to get the same behavior, usually checkingfetcher.state
,fetcher.formData
or the data returned from an action onfetcher.data
can get the UX you're looking for.typescript_2_update-links-function-and-property-names
links
properties should all be the React camelCase values instead of HTML lowercase values.Additional Details
rename-browser-build-directory
remix.config.js
, renamebrowserBuildDirectory
toassetsBuildDirectory
.Additional Details
webpack_v2_migrate-dev-server-port
remix.config.js
, renamedevServerPort
tofuture.v2_dev.port
.Additional Details
remix_1_replace-response-with-create-readable-stream
app/entry.server.tsx
file, where you'll also need to convert the Node[PassThrough](https://nodejs.org/api/stream.html#class-streampassthrough)
into a web[ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
viacreateReadableStreamFromReadable
Additional Details
nodejs-module-exports-server-build-directory-to-path
remix.config.js
, renameserverBuildDirectory
toserverBuildPath
and specify a module path, not a directory.Additional Details