From 9f06bfb7397daa8a3719552e2cbda7c4c8d06a38 Mon Sep 17 00:00:00 2001 From: Towa Hayashi Date: Thu, 7 Nov 2024 23:59:06 +0900 Subject: [PATCH 1/5] templates: fix `fontFamily` in `tailwind.config.ts` (#10182) --- contributors.yml | 1 + templates/cloudflare-workers/tailwind.config.ts | 10 +++++----- templates/cloudflare/tailwind.config.ts | 10 +++++----- templates/express/tailwind.config.ts | 10 +++++----- templates/remix-javascript/tailwind.config.js | 10 +++++----- templates/remix/tailwind.config.ts | 10 +++++----- templates/spa/tailwind.config.ts | 10 +++++----- 7 files changed, 31 insertions(+), 30 deletions(-) diff --git a/contributors.yml b/contributors.yml index 38822cfde52..b9d29c74ed0 100644 --- a/contributors.yml +++ b/contributors.yml @@ -629,6 +629,7 @@ - sobrinho - souredoutlook - squidpunch +- staticWagomU - staylor - stephanerangaya - stephenwade diff --git a/templates/cloudflare-workers/tailwind.config.ts b/templates/cloudflare-workers/tailwind.config.ts index 14d0f00ce6a..5f06ad4ba5a 100644 --- a/templates/cloudflare-workers/tailwind.config.ts +++ b/templates/cloudflare-workers/tailwind.config.ts @@ -6,14 +6,14 @@ export default { extend: { fontFamily: { sans: [ - '"Inter"', + "Inter", "ui-sans-serif", "system-ui", "sans-serif", - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", ], }, }, diff --git a/templates/cloudflare/tailwind.config.ts b/templates/cloudflare/tailwind.config.ts index 14d0f00ce6a..5f06ad4ba5a 100644 --- a/templates/cloudflare/tailwind.config.ts +++ b/templates/cloudflare/tailwind.config.ts @@ -6,14 +6,14 @@ export default { extend: { fontFamily: { sans: [ - '"Inter"', + "Inter", "ui-sans-serif", "system-ui", "sans-serif", - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", ], }, }, diff --git a/templates/express/tailwind.config.ts b/templates/express/tailwind.config.ts index 14d0f00ce6a..5f06ad4ba5a 100644 --- a/templates/express/tailwind.config.ts +++ b/templates/express/tailwind.config.ts @@ -6,14 +6,14 @@ export default { extend: { fontFamily: { sans: [ - '"Inter"', + "Inter", "ui-sans-serif", "system-ui", "sans-serif", - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", ], }, }, diff --git a/templates/remix-javascript/tailwind.config.js b/templates/remix-javascript/tailwind.config.js index deda7399a3a..3d3c6d9b62e 100644 --- a/templates/remix-javascript/tailwind.config.js +++ b/templates/remix-javascript/tailwind.config.js @@ -4,14 +4,14 @@ export default { extend: { fontFamily: { sans: [ - '"Inter"', + "Inter", "ui-sans-serif", "system-ui", "sans-serif", - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", ], }, }, diff --git a/templates/remix/tailwind.config.ts b/templates/remix/tailwind.config.ts index 14d0f00ce6a..5f06ad4ba5a 100644 --- a/templates/remix/tailwind.config.ts +++ b/templates/remix/tailwind.config.ts @@ -6,14 +6,14 @@ export default { extend: { fontFamily: { sans: [ - '"Inter"', + "Inter", "ui-sans-serif", "system-ui", "sans-serif", - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", ], }, }, diff --git a/templates/spa/tailwind.config.ts b/templates/spa/tailwind.config.ts index 14d0f00ce6a..5f06ad4ba5a 100644 --- a/templates/spa/tailwind.config.ts +++ b/templates/spa/tailwind.config.ts @@ -6,14 +6,14 @@ export default { extend: { fontFamily: { sans: [ - '"Inter"', + "Inter", "ui-sans-serif", "system-ui", "sans-serif", - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - '"Noto Color Emoji"', + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", ], }, }, From b43dd5f877b7c83afb474d56634499480ba42e70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9gory=20HOARAU?= Date: Wed, 13 Nov 2024 15:07:12 +0100 Subject: [PATCH 2/5] docs(start/future-flags): fix typo in npm commands (#10219) --- contributors.yml | 1 + docs/start/future-flags.md | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/contributors.yml b/contributors.yml index b9d29c74ed0..7676d07f83b 100644 --- a/contributors.yml +++ b/contributors.yml @@ -233,6 +233,7 @@ - GOWxx - graham42 - GregBrimble +- greg-hoarau - GSt4r - guatedude2 - guerra08 diff --git a/docs/start/future-flags.md b/docs/start/future-flags.md index e5da3d7d932..588d2f09fb9 100644 --- a/docs/start/future-flags.md +++ b/docs/start/future-flags.md @@ -497,7 +497,7 @@ remix({ This package matches the API of React Router v7's `@react-router/dev/routes`, making the React Router v7 migration as easy as possible. ```shellscript nonumber -npm install --dev @remix-run/route-config +npm install -D @remix-run/route-config ``` This provides the core `RouteConfig` type as well as a set of helpers for configuring routes in code. @@ -519,7 +519,7 @@ This is a good way to check that your new `routes.ts` file is being picked up su 👉 **Install `@remix-run/fs-routes` and use it in `routes.ts`** ```shellscript nonumber -npm install --dev @remix-run/fs-routes +npm install -D @remix-run/fs-routes ``` This package matches the API of React Router v7's `@react-router/fs-routes`, making the React Router v7 migration as easy as possible. @@ -542,7 +542,7 @@ To make migration easier, an adapter package is available that converts Remix's To get started, first install the adapter: ```shellscript nonumber -npm install --dev @remix-run/routes-option-adapter +npm install -D @remix-run/routes-option-adapter ``` This package matches the API of React Router v7's `@react-router/remix-routes-option-adapter`, making the React Router v7 migration as easy as possible. From 39d50b1fe84fd4d7c9696be71e84415017357e29 Mon Sep 17 00:00:00 2001 From: Remix Run Bot Date: Wed, 13 Nov 2024 14:08:37 +0000 Subject: [PATCH 3/5] chore: format --- contributors.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributors.yml b/contributors.yml index 7676d07f83b..c11fb3b3030 100644 --- a/contributors.yml +++ b/contributors.yml @@ -232,8 +232,8 @@ - gotgenes - GOWxx - graham42 -- GregBrimble - greg-hoarau +- GregBrimble - GSt4r - guatedude2 - guerra08 From bff2d58bdd22fe305f3e7ca8ddad03c5940f4e90 Mon Sep 17 00:00:00 2001 From: Brooks Lybrand Date: Tue, 19 Nov 2024 17:29:08 -0600 Subject: [PATCH 4/5] docs: update future flags guide (#10245) --- docs/start/future-flags.md | 169 +++++++++++++++++++++++++++---------- 1 file changed, 126 insertions(+), 43 deletions(-) diff --git a/docs/start/future-flags.md b/docs/start/future-flags.md index 588d2f09fb9..025c1c5c04c 100644 --- a/docs/start/future-flags.md +++ b/docs/start/future-flags.md @@ -3,13 +3,15 @@ title: Future Flags order: 5 --- -# Future Flags +# Future Flags and Deprecations -The following future flags are stable and ready to adopt. To read more about future flags see [Development Strategy][development-strategy] +This guide walks you through the process of adopting future flags in your Remix app. By following this strategy, you will be able to upgrade to the next major version of Remix with minimal changes. To read more about future flags see [Development Strategy][development-strategy]. + +We highly recommend you make a commit after each step and ship it instead of doing everything all at once. Most flags can be adopted in any order, with exceptions noted below. ## Update to latest v2.x -First update to the latest minor version of v2.x to have the latest future flags. +First update to the latest minor version of v2.x to have the latest future flags. You will likely see a number of deprecation warnings as you upgrade, which we'll cover below. 👉 **Update to latest v2** @@ -17,7 +19,34 @@ First update to the latest minor version of v2.x to have the latest future flags npm install @remix-run/{dev,react,node,etc.}@2 ``` -## Vite Plugin +## Remove `installGlobals` + +**Background** + +Previously Remix required a `fetch` polyfill to be installed. This was accomplished by calling `installGlobals()`. + +The next major version requires a minimum of Node 20 to take advantage of the built-in `fetch` support. + +Note: if you are using miniflare/cloudflare worker with your remix project, ensure your [compatibility flag][compatibility-flag] is set to `2023-03-01` or later as well. + +👉 **Update to Node 20+** + +It is recommended that you upgrade to the latest even-numbered version of Node LTS. + +👉 **Remove `installGlobals`** + +```diff filename=vite.config.ts +import { vitePlugin as remix } from "@remix-run/dev"; +import { defineConfig } from "vite"; + +-installGlobals(); + +export default defineConfig({ + plugins: [remix()], +}); +``` + +## Adopt the Vite Plugin **Background** @@ -56,6 +85,24 @@ export default defineConfig({ }); ``` +👉 **Add `unstable_optimizeDeps` (optional)** + +Many users found that automatically [optimizing dependencies][dependency-optimization] helped them more easily adopt the Vite plugin. For this reason we added the `unstable_optimizeDeps` flag to the Vite plugin. + +This flag will remain in an "unstable" state until React Router v7 so it is not critical that you adopt this in your Remix v2 app prior to upgrading to React Router v7. + +```ts filename=vite.config.ts lines=[4-6] +export default defineConfig({ + plugins: [ + remix({ + future: { + unstable_optimizeDeps: true, + }, + }), + ], +}); +``` + 👉 **Remove ``, keep ``** ```diff @@ -193,20 +240,6 @@ If you are using Tailwind CSS or Vanilla Extract, see the [full migration guide] } ``` -👉 **Install global Node polyfills in your Vite config** - -```diff filename=vite.config.ts -import { vitePlugin as remix } from "@remix-run/dev"; -+import { installGlobals } from "@remix-run/node"; -import { defineConfig } from "vite"; - -+installGlobals(); - -export default defineConfig({ - plugins: [remix()], -}); -``` - 👉 **Configure your Vite dev server port (optional)** ```js filename=vite.config.ts lines=[2-4] @@ -332,11 +365,39 @@ remix({ You likely won't need to adjust any code, unless you had custom logic inside of `handleError` that was matching the previous error message to differentiate it from other errors. +## v3_lazyRouteDiscovery + +**Background** + +With this flag, Remix no longer sends the full route manifest up to the client on initial load. Instead, Remix only sends the server-rendered routes up in the manifest and then fetches the remaining routes as the user navigated around the application. Additional details are available in the [docs][lazy-route-discovery] and the [blog post][lazy-route-discovery-blog-post] + +👉 **Enable the Flag** + +```ts filename=vite.config.ts +remix({ + future: { + v3_lazyRouteDiscovery: true, + }, +}); +``` + +**Update your Code** + +You shouldn't need to make any changes to your application code for this feature to work. + +You may find some usage for the new [``][discover-prop] API if you wish to disable eager route discovery on certain links. + ## v3_singleFetch + + +This flag requires the [Vite plugin][vite-plugin]. + + + **Background** -with this flag, Remix moves to a "single fetch" approach for data requests when making SPA navigations within your app. Additional details are available in the [docs][single-fetch], but the main reason we chose to move to this approach is **Simplicity**. With Single Fetch, data requests now behave just like document requests and developers no longer need to think about the nuances of how to manage headers, caching, etc., differently between the two. For more advanced use-cases, developers can still opt into fine-grained revalidations. +With this flag, Remix uses a single fetch for data requests during client-side navigations. This simplifies data loading by treating data requests the same as document requests, eliminating the need to handle headers and caching differently. For advanced use cases, you can still opt into fine-grained revalidations. View the ["Single Fetch" docs][single-fetch] for more information. 👉 **Enable the Flag (and the types)** @@ -368,7 +429,7 @@ export default defineConfig({ You should be able to mostly use your code as-is with the flag enabled, but the following changes should be made over time and will be required prior to the next major version. -👉 **Remove json()/defer() in favor of raw objects** +👉 **Remove `json()`/`defer()` in favor of raw objects** Single Fetch supports JSON objects and Promises out of the box, so you can return the raw data from your `loader`/`action` functions: @@ -450,33 +511,17 @@ function handleBrowserRequest(/* ... */) { } ``` -## v3_lazyRouteDiscovery - -**Background** - -With this flag, Remix no longer sends the full route manifest up to the client on initial load. Instead, Remix only sends the server-rendered routes up in the manifest and then fetches the remaining routes as the user navigated around the application. Additional details are available in the [docs][lazy-route-discovery] and the [blog post][lazy-route-discovery-blog-post] - -👉 **Enable the Flag** - -```ts filename=vite.config.ts -remix({ - future: { - v3_lazyRouteDiscovery: true, - }, -}); -``` +## unstable_routeConfig -**Update your Code** + -You shouldn't need to make any changes to your application code for this feature to work. +This flag requires the [Vite plugin][vite-plugin]. -You may find some usage for the new [``][discover-prop] API if you wish to disable eager route discovery on certain links. - -## unstable_routeConfig + Config-based routing is the new default in React Router v7, configured via the `routes.ts` file in the app directory. Support for `routes.ts` and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the `@remix-run` scope, these new packages only exist to keep the code in `routes.ts` as similar as possible to the equivalent code for React Router v7. -When the `unstable_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing. To opt back in to file system routing, this can be explicitly configured within `routes.ts` as we'll cover below. +When the `unstable_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing. If you prefer to keep using Remix's file-based routing we cover how to enable it in `routes.ts` below. **Update your code** @@ -619,9 +664,41 @@ export const routes: RouteConfig = [ ]; ``` -## unstable_optimizeDeps +## Deprecations + +### @remix-run/eslint-config + +The `@remix-run/eslint-config` package is deprecated and will not be included in React Router v7. We recommend moving towards a streamlined ESLint config such as the ones included in [the Remix templates][remix-template-eslint-config]. + +### json + +This utility is deprecated and will be removed in React Router v7 in favor of [Single Fetch][v3_singlefetch] naked object returns. + +- If you were not relying on `json` to serialize your data (such as stringifying `Date` objects), you can safely remove it. +- If you were returning `headers` or `status` via `json`, you can use the new [data util][data-api] as a drop-in replacement to set those values. +- If you want to serialize your data to JSON, you can use the native [Response.json()][response-json] method. + +View the [Single Fetch][v3_singlefetch] docs for more information. + +### defer + +This utility is deprecated and will be removed in React Router v7 in favor of [Single Fetch][v3_singlefetch] naked object returns. + +- If you were returning `headers` or `status` via `defer`, you can use the new [data util][data-api] as a drop-in replacement to set those values. + +View the [Single Fetch][v3_singlefetch] docs for more information. + +### SerializeFrom + +This type is deprecated and will be removed in React Router v7 since [Single Fetch][v3_singlefetch] no longer serializes data to JSON. + +If you are relying on `SerializeFrom` to unwrap your `loader`/`action` data, you can use a custom type like this: + +```ts +type SerializeFrom = ReturnType>; +``` -Opt into automatic [dependency optimization][dependency-optimization] during development. This flag will remain in an "unstable" state until React Router v7 so you do not need to adopt this in your Remix v2 app prior to upgrading to React Router v7. +In most cases, you should be able to just remove `SerializeFrom` and use the types returned from `useLoaderData`/`useActionData`, or the types of the data in `loader`/`action` functions. [development-strategy]: ../guides/api-development-strategy [fetcherpersist-rfc]: https://github.com/remix-run/remix/discussions/7698 @@ -644,3 +721,9 @@ Opt into automatic [dependency optimization][dependency-optimization] during dev [mdx-rollup-plugin]: https://mdxjs.com/packages/rollup [remix-flat-routes]: https://github.com/kiliman/remix-flat-routes [dependency-optimization]: ../guides/dependency-optimization +[compatibility-flag]: https://developers.cloudflare.com/workers/configuration/compatibility-dates +[vite-plugin]: #adopt-the-vite-plugin +[v3_singlefetch]: #v3_singlefetch +[data-api]: ../utils/data +[response-json]: https://developer.mozilla.org/en-US/docs/Web/API/Response/json +[remix-template-eslint-config]: https://github.com/remix-run/remix/blob/main/templates/remix/.eslintrc.cjs From f05ee5c6e15c78be512faf2c84a1e82fa397f028 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Comeau?= <114004123+sebastien-comeau@users.noreply.github.com> Date: Thu, 21 Nov 2024 19:32:29 -0400 Subject: [PATCH 5/5] fix optimizeDeps entries file paths Fix optimizeDeps entries file paths by using vite normalizePath. --- packages/remix-dev/vite/plugin.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts index e18bf788568..130ac416638 100644 --- a/packages/remix-dev/vite/plugin.ts +++ b/packages/remix-dev/vite/plugin.ts @@ -1107,9 +1107,9 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => { optimizeDeps: { entries: ctx.remixConfig.future.unstable_optimizeDeps ? [ - ctx.entryClientFilePath, + importViteEsmSync().normalizePath(ctx.entryClientFilePath), ...Object.values(ctx.remixConfig.routes).map((route) => - path.join(ctx.remixConfig.appDirectory, route.file) + resolveRelativeRouteFilePath(route, ctx.remixConfig) ), ] : [],