Merge branch 'release-next' into dev

.github/workflows/test-pr-ubuntu.yml

@@ -6,6 +6,7 @@ on:
   pull_request:
     paths-ignore:
       - "docs/**"
+      - "templates/**"
       - "scripts/**"
       - "contributors.yml"
       - "**/*.md"

CHANGELOG.md

@@ -13,88 +13,92 @@ We manage release notes in this file instead of the paginated Github Releases Pa
   <summary>Table of Contents</summary>
 
 - [Remix Releases](#remix-releases)
-  - [v2.8.0](#v280)
-    - [Minor Changes](#minor-changes)
+  - [v2.8.1](#v281)
     - [Patch Changes](#patch-changes)
     - [Updated Dependencies](#updated-dependencies)
     - [Changes by Package](#changes-by-package)
-  - [2.7.2](#272)
+  - [v2.8.0](#v280)
+    - [Minor Changes](#minor-changes)
     - [Patch Changes](#patch-changes-1)
-  - [2.7.1](#271)
+    - [Updated Dependencies](#updated-dependencies-1)
+    - [Changes by Package](#changes-by-package-1)
+  - [2.7.2](#272)
     - [Patch Changes](#patch-changes-2)
+  - [2.7.1](#271)
+    - [Patch Changes](#patch-changes-3)
   - [v2.7.0](#v270)
     - [What's Changed](#whats-changed)
       - [Stabilized Vite Plugin](#stabilized-vite-plugin)
       - [New `Layout` Export](#new-layout-export)
       - [Basename support](#basename-support)
       - [Cloudflare Proxy as a Vite Plugin](#cloudflare-proxy-as-a-vite-plugin)
     - [Minor Changes](#minor-changes-1)
-    - [Patch Changes](#patch-changes-3)
-    - [Updated Dependencies](#updated-dependencies-1)
-    - [Changes by Package](#changes-by-package-1)
+    - [Patch Changes](#patch-changes-4)
+    - [Updated Dependencies](#updated-dependencies-2)
+    - [Changes by Package](#changes-by-package-2)
   - [v2.6.0](#v260)
     - [What's Changed](#whats-changed-1)
       - [Unstable Vite Plugin updates](#unstable-vite-plugin-updates)
     - [Minor Changes](#minor-changes-2)
-    - [Patch Changes](#patch-changes-4)
-    - [Updated Dependencies](#updated-dependencies-2)
-    - [Changes by Package](#changes-by-package-2)
-  - [v2.5.1](#v251)
     - [Patch Changes](#patch-changes-5)
     - [Updated Dependencies](#updated-dependencies-3)
     - [Changes by Package](#changes-by-package-3)
+  - [v2.5.1](#v251)
+    - [Patch Changes](#patch-changes-6)
+    - [Updated Dependencies](#updated-dependencies-4)
+    - [Changes by Package](#changes-by-package-4)
   - [v2.5.0](#v250)
     - [What's Changed](#whats-changed-2)
       - [SPA Mode (unstable)](#spa-mode-unstable)
       - [Server Bundles (unstable)](#server-bundles-unstable)
     - [Minor Changes](#minor-changes-3)
-    - [Patch Changes](#patch-changes-6)
-    - [Updated Dependencies](#updated-dependencies-4)
-    - [Changes by Package](#changes-by-package-4)
-  - [v2.4.1](#v241)
     - [Patch Changes](#patch-changes-7)
     - [Updated Dependencies](#updated-dependencies-5)
     - [Changes by Package](#changes-by-package-5)
+  - [v2.4.1](#v241)
+    - [Patch Changes](#patch-changes-8)
+    - [Updated Dependencies](#updated-dependencies-6)
+    - [Changes by Package](#changes-by-package-6)
   - [v2.4.0](#v240)
     - [What's Changed](#whats-changed-3)
       - [Client Data](#client-data)
       - [`future.v3_relativeSplatPath`](#futurev3_relativesplatpath)
       - [Vite Updates (Unstable)](#vite-updates-unstable)
     - [Minor Changes](#minor-changes-4)
-    - [Patch Changes](#patch-changes-8)
-    - [Updated Dependencies](#updated-dependencies-6)
-    - [Changes by Package](#changes-by-package-6)
-  - [v2.3.1](#v231)
     - [Patch Changes](#patch-changes-9)
     - [Updated Dependencies](#updated-dependencies-7)
     - [Changes by Package](#changes-by-package-7)
+  - [v2.3.1](#v231)
+    - [Patch Changes](#patch-changes-10)
+    - [Updated Dependencies](#updated-dependencies-8)
+    - [Changes by Package](#changes-by-package-8)
   - [v2.3.0](#v230)
     - [What's Changed](#whats-changed-4)
       - [Stabilized `useBlocker`](#stabilized-useblocker)
       - [`unstable_flushSync` API](#unstable_flushsync-api)
     - [Minor Changes](#minor-changes-5)
-    - [Patch Changes](#patch-changes-10)
-    - [Updated Dependencies](#updated-dependencies-8)
-    - [Changes by Package](#changes-by-package-8)
+    - [Patch Changes](#patch-changes-11)
+    - [Updated Dependencies](#updated-dependencies-9)
+    - [Changes by Package](#changes-by-package-9)
   - [v2.2.0](#v220)
     - [What's Changed](#whats-changed-5)
       - [Vite!](#vite)
       - [New Fetcher APIs](#new-fetcher-apis)
       - [Persistence Future Flag](#persistence-future-flag)
     - [Minor Changes](#minor-changes-6)
-    - [Patch Changes](#patch-changes-11)
-    - [Updated Dependencies](#updated-dependencies-9)
-    - [Changes by Package](#changes-by-package-9)
+    - [Patch Changes](#patch-changes-12)
+    - [Updated Dependencies](#updated-dependencies-10)
+    - [Changes by Package](#changes-by-package-10)
   - [v2.1.0](#v210)
     - [What's Changed](#whats-changed-6)
       - [View Transitions](#view-transitions)
       - [Stable `createRemixStub`](#stable-createremixstub)
     - [Minor Changes](#minor-changes-7)
-    - [Patch Changes](#patch-changes-12)
-    - [Updated Dependencies](#updated-dependencies-10)
-    - [Changes by Package](#changes-by-package-10)
-  - [v2.0.1](#v201)
     - [Patch Changes](#patch-changes-13)
+    - [Updated Dependencies](#updated-dependencies-11)
+    - [Changes by Package](#changes-by-package-11)
+  - [v2.0.1](#v201)
+    - [Patch Changes](#patch-changes-14)
     - [Changes by Package 🔗](#changes-by-package-)
   - [v2.0.0](#v200)
     - [Breaking Changes](#breaking-changes)
@@ -106,8 +110,8 @@ We manage release notes in this file instead of the paginated Github Releases Pa
         - [Breaking Type Changes](#breaking-type-changes)
     - [New Features](#new-features)
     - [Other Notable Changes](#other-notable-changes)
-    - [Updated Dependencies](#updated-dependencies-11)
-    - [Changes by Package](#changes-by-package-11)
+    - [Updated Dependencies](#updated-dependencies-12)
+    - [Changes by Package](#changes-by-package-12)
 
 </details>
 
@@ -155,6 +159,44 @@ Date: YYYY-MM-DD
 
 -->
 
+## v2.8.1
+
+Date: 2024-03-06
+
+### Patch Changes
+
+- `@remix-run/dev` - Vite: Support reading from Vite config when running `remix reveal` and `remix routes` CLI commands ([#8916](https://github.com/remix-run/remix/pull/8916))
+- `@remix-run/dev` - Vite: Clean up redundant client route query strings on route JavaScript files in production builds ([#8969](https://github.com/remix-run/remix/pull/8969))
+- `@remix-run/dev` - Vite: Add vite commands to Remix CLI `--help` output ([#8939](https://github.com/remix-run/remix/pull/8939))
+- `@remix-run/dev` - Vite: Fix support for `build.sourcemap` option in Vite config ([#8965](https://github.com/remix-run/remix/pull/8965))
+- `@remix-run/dev` - Vite: Fix error when using Vite's `server.fs.allow` option without a client entry file ([#8966](https://github.com/remix-run/remix/pull/8966))
+- `@remix-run/react` - Strengthen the internal `LayoutComponent` type to accept limited children ([#8910](https://github.com/remix-run/remix/pull/8910))
+
+### Updated Dependencies
+
+- [`react-router-dom@6.22.3`](https://github.com/remix-run/react-router/releases/tag/react-router%406.22.3)
+- [`@remix-run/router@1.15.3`](https://github.com/remix-run/react-router/blob/main/packages/router/CHANGELOG.md#1153)
+
+### Changes by Package
+
+- [`create-remix`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/create-remix/CHANGELOG.md#281)
+- [`@remix-run/architect`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-architect/CHANGELOG.md#281)
+- [`@remix-run/cloudflare`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-cloudflare/CHANGELOG.md#281)
+- [`@remix-run/cloudflare-pages`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-cloudflare-pages/CHANGELOG.md#281)
+- [`@remix-run/cloudflare-workers`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-cloudflare-workers/CHANGELOG.md#281)
+- [`@remix-run/css-bundle`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-css-bundle/CHANGELOG.md#281)
+- [`@remix-run/deno`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-deno/CHANGELOG.md#281)
+- [`@remix-run/dev`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-dev/CHANGELOG.md#281)
+- [`@remix-run/eslint-config`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-eslint-config/CHANGELOG.md#281)
+- [`@remix-run/express`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-express/CHANGELOG.md#281)
+- [`@remix-run/node`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-node/CHANGELOG.md#281)
+- [`@remix-run/react`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-react/CHANGELOG.md#281)
+- [`@remix-run/serve`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-serve/CHANGELOG.md#281)
+- [`@remix-run/server-runtime`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-server-runtime/CHANGELOG.md#281)
+- [`@remix-run/testing`](https://github.com/remix-run/remix/blob/remix%402.8.1/packages/remix-testing/CHANGELOG.md#281)
+
+**Full Changelog**: [`v2.8.0...v2.8.1`](https://github.com/remix-run/remix/compare/remix@2.8.0...remix@2.8.1)
+
 ## v2.8.0
 
 Date: 2024-02-28

contributors.yml

@@ -124,6 +124,7 @@
 - damiensedgwick
 - dan-gamble
 - danielfgray
+- danielshamburger
 - danielweinmann
 - dario-piotrowicz
 - davecalnan
@@ -211,6 +212,7 @@
 - gon250
 - goncy
 - gonzoscript
+- GOWxx
 - graham42
 - GregBrimble
 - GSt4r
@@ -238,6 +240,7 @@
 - hollandThomas
 - Hopsken
 - houmark
+- hpnzm
 - humphd
 - huw
 - huyb1991
@@ -412,6 +415,7 @@
 - mattmazzola
 - mattstobbs
 - maxprilutskiy
+- maxrchung
 - maxschwarzmueller
 - mbarto
 - mcansh
@@ -629,6 +633,7 @@
 - vm
 - vmosyaykin
 - vorcigernix
+- wahyubucil
 - wangbinyq
 - weavdale
 - wilcoschoneveld
@@ -639,6 +644,7 @@
 - wladiston
 - wtlin1228
 - wxh06
+- xanderberkein
 - xdivby0
 - xHomu
 - XiNiHa

docs/discussion/data-flow.md

@@ -172,7 +172,7 @@ When you send HTML from the server, it's best to have it work even before JavaSc
 When the user submits the form before JavaScript loads:
 
 1. The browser submits the form to the action (instead of `fetch`) and the browsers pending states activate (spinning favicon)
-2. After the action complets, loaders are called
+2. After the action completes, loaders are called
 3. Remix renders the page and sends HTML to the browser
 
 [loader]: ../route/loader

docs/file-conventions/root.md

@@ -146,6 +146,56 @@ export function ErrorBoundary() {
 }
 ```
 
+**A note on `useLoaderData`in the `Layout` Component**
+
+`useLoaderData` is not permitted to be used in `ErrorBoundary` components because it is intended for the happy-path route rendering, and its typings have a built-in assumption that the `loader` ran successfully and returned something. That assumption doesn't hold in an `ErrorBoundary` because it could have been the `loader` that threw and triggered the boundary! In order to access loader data in `ErrorBoundary`'s, you can use `useRouteLoaderData` which accounts for the loader data potentially being `undefined`.
+
+Because your `Layout` component is used in both success and error flows, this same restriction holds. If you need to fork logic in your `Layout` depending on if it was a successful request or not, you can use `useRouteLoaderData("root")` and `useRouteError()`:
+
+```tsx filename="app/root.tsx" lines=[6-7,19-29,32-34]
+export function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const data = useRouteLoaderData("root");
+  const error = useRouteError();
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
+        <Meta />
+        <Links />
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              :root {
+                --themeVar: ${
+                  data?.themeVar || defaultThemeVar
+                }
+              }
+            `,
+          }}
+        />
+      </head>
+      <body>
+        {data ? (
+          <Analytics token={data.analyticsToken} />
+        ) : null}
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
 See also:
 
 - [`<Meta>`][meta-component]

docs/future/spa-mode.md

@@ -222,10 +222,41 @@ startTransition(() => {
 
 - You cannot call `serverLoader`/`serverAction` from your `clientLoader`/`clientAction` methods since there is no running server -- those will throw a runtime error if called
 
-- It's important to note that Remix SPA mode generates your `index.html` file by performing a "pre-render" of your root route on the server during the build
-  - This means that while you're creating a SPA, you still have a "server build" and "server render" step, so you do need to be careful about using dependencies that reference client-only aspects such as `document`, `window`, `localStorage`, etc.
-  - Generally speaking, the way to resolve these issues is to import any browser-only libraries from `entry.client.tsx` so they don't end up in the server build
-  - Otherwise, you can generally solve these by using [`React.lazy`][react-lazy] or the [`<ClientOnly>`][client-only] component from `remix-utils`.
+### Server Build
+
+It's important to note that Remix SPA mode generates your `index.html` file by performing a "pre-render" of your root route on the server during the build
+
+- This means that while you're creating a SPA, you still have a "server build" and "server render" step, so you do need to be careful about using dependencies that reference client-only aspects such as `document`, `window`, `localStorage`, etc.
+- Generally speaking, the way to resolve these issues is to import any browser-only libraries from `entry.client.tsx` so they don't end up in the server build
+- Otherwise, you can generally solve these by using [`React.lazy`][react-lazy] or the [`<ClientOnly>`][client-only] component from `remix-utils`
+
+### CJS/ESM Dependency Issues
+
+If you are running into ESM/CJS issues with your app dependencies you may need to play with the Vite [ssr.noExternal][vite-ssr-noexternal] option to include certain dependencies in your server bundle:
+
+```ts filename=vite.config.ts lines=[12-15]
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [
+    remix({
+      ssr: false,
+    }),
+    tsconfigPaths(),
+  ],
+  ssr: {
+    // Bundle `problematic-dependency` into the server build
+    noExternal: ["problematic-dependency"],
+  },
+  // ...
+});
+```
+
+These issues are usually due to dependencies whose published code is incorrectly-configured for CJS/ESM. By including the specific dependency in `ssr.noExternal`, Vite will bundle the dependency into the server build and can help avoid runtime import issues when running your server.
+
+If you have the opposite use-case and you specifically want to keep dependencies external to the bundle, you can use the opposite [`ssr.external`][vite-ssr-external] option.
 
 ## Migrating from React Router
 
@@ -269,3 +300,5 @@ Once you've got all your routes living in their own files, you can:
 [client-only]: https://github.com/sergiodxa/remix-utils?tab=readme-ov-file#clientonly
 [vite-preview]: https://vitejs.dev/guide/cli#vite-preview
 [sirv-cli]: https://www.npmjs.com/package/sirv-cli
+[vite-ssr-noexternal]: https://vitejs.dev/config/ssr-options#ssr-noexternal
+[vite-ssr-external]: https://vitejs.dev/config/ssr-options#ssr-external