Remix 版本

本頁面列出 Remix 自 v2.0.0 以來的所有版本/版本說明。 v2 之前的版本請參閱 Github 版本頁面。

我們在此檔案中管理版本說明，而不是分頁的 Github 版本頁面，原因有二

Github UI 中的分頁表示您無法輕鬆搜尋一次大量版本的版本說明
分頁的 Github 介面也會在清單檢視中截斷較長的版本說明，而沒有任何指示，您需要按一下詳細檢視才能看到完整的版本說明

Remix 版本

v2.15.2

日期：2024-12-20

修補程式變更

@remix-run/dev - 允許透過將未來旗標設為 false 來抑制未來旗標警告 (#10358)
@remix-run/react - 拋出未包裝的單次提取 redirect，以與單次提取之前的行為一致 (#10317)

更新的相依性

react-router-dom@6.28.1

完整變更記錄：v2.15.1...v2.15.2

v2.15.1

日期：2024-12-09

修補程式變更

create-remix - 將 fs-extra 從 devDependencies 移至 dependencies (#10300)

完整變更記錄：v2.15.0...v2.15.1

v2.15.0

日期：2024-11-19

修補程式變更

穩定 future.v3_routeConfig 未來旗標，取代 future.unstable_routeConfig。這使得支援 routes.ts 以協助遷移至 React Router v7。 (#10236)

請注意，如果您已啟用 future.unstable_routeConfig 旗標，則 app/routes.ts 中的路由設定不再透過 routes 匯出定義，現在必須透過預設匯出定義。
```
import { type RouteConfig } from "@remix-run/route-config";

-export const routes: RouteConfig = [];
+export default [] satisfies RouteConfig;
```

v2.14.0

日期：2024-11-08

小幅度變更

棄用 SerializeFrom，改用泛型，因為它將在 React Router v7 中移除 (#10173)
將棄用警告新增至 @remix-run/eslint-config (#10174)
在 future.unstable_routeConfig 旗標後面新增對 routes.ts 的支援，以協助遷移至 React Router v7。 (#10107)

基於設定檔的路由是 React Router v7 中的新預設值，透過應用程式目錄中的 routes.ts 檔案設定。在 Remix 中支援 routes.ts 及其相關 API 的設計，是作為遷移路徑，以協助盡量減少將 Remix 專案移至 React Router v7 時所需的變更次數。雖然在 @remix-run 範圍內引入了一些新的套件，但這些新套件的存在只是為了讓 routes.ts 中的程式碼與 React Router v7 的對應程式碼盡可能相似。

當啟用 unstable_routeConfig 未來旗標時，Remix 的內建檔案系統路由將會停用，您的專案將會選擇加入 React Router v7 的基於設定檔的路由。

若要啟用該旗標，請在您的 vite.config.ts 檔案中
```
remix({
  future: {
    unstable_routeConfig: true,
  },
});
```
支援 Remix 內建檔案系統路由的最小 routes.ts 檔案如下所示
```
// app/routes.ts
import { flatRoutes } from "@remix-run/fs-routes";
import type { RouteConfig } from "@remix-run/route-config";

export const routes: RouteConfig = flatRoutes();
```
記錄 v3 未來旗標的棄用警告 (#10126)
- 將 @deprecated 註解新增至 json/defer 公用程式

修補程式變更

@remix-run/react - 修正在使用單次提取時的 defaultShouldRevalidate 值 (#10139)
@remix-run/server-runtime - 更新外部存取資源路由警告，以涵蓋 null 用法 (#10145)

更新的相依性

依套件變更

完整變更日誌： v2.13.1...v2.14.0

v2.13.1

日期：2024-10-11

修補程式變更

@remix-run/dev - 將 future.v3_optimizeDeps 還原回 future.unstable_optimizeDeps，因為它並未打算在 Remix v2 中穩定下來 (#10099)

完整變更日誌： v2.13.0...v2.13.1

v2.13.0

日期：2024-10-11

變更內容

穩定化的 API

此版本穩定了一些「不穩定」的 API，為即將推出的 React Router v7 版本做準備（請參閱這些文章以取得更多資訊）

unstable_data → data (用於 Single Fetch)
unstable_flushSync → flushSync (useSubmit、fetcher.load、fetcher.submit)
unstable_viewTransition → viewTransition (<Link>、<Form>、useNavigate、useSubmit)
~~future.unstable_optimizeDeps → future.v3_optimizeDeps (文件)~~
- ⚠️ 此標記不打算在 Remix v2 中穩定下來，並在 2.13.1 中還原回 future.unstable_optimizeDeps
future.unstable_lazyRouteDiscovery → future.v3_lazyRouteDiscovery (文件)
future.unstable_singleFetch → future.v3_singleFetch (文件)

小變更

在 Remix 中穩定 React Router API (#9980)
- 在內部採用穩定的 React Router API
  - Single Fetch：unstable_dataStrategy -> dataStrategy
  - Lazy Route Discovery：unstable_patchRoutesOnNavigation -> patchRoutesOnNavigation
- 穩定公開 API
  - Single Fetch：unstable_data() -> data()
  - unstable_viewTransition -> viewTransition (Link、Form、navigate、submit)
  - unstable_flushSync> -> <Link viewTransition> (Link、Form、navigate、submit、useFetcher)
穩定未來標記 (#10072、#10092)
- future.unstable_lazyRouteDiscovery -> future.v3_lazyRouteDiscovery
- future.unstable_optimizeDeps -> future.v3_optimizeDeps
- future.unstable_singleFetch -> future.v3_singleFetch

修補程式變更

@remix-run/dev - 停止將 request.signal 作為 renderToReadableStream 的 signal 傳遞，以中止 cloudflare/deno 執行階段的伺服器渲染，因為在 request 中止時，中止渲染是沒有用的，因為 React 無法向下刷新未解析的邊界 (#10047)
- 這已經錯誤一段時間了，但直到最近才被揭露，因為我們在透過 remix vite:dev 執行時中止請求的方式存在錯誤，因為我們在成功渲染後錯誤地中止了請求 - 這導致我們中止已完成的 React 渲染，並嘗試關閉已關閉的 ReadableStream
- 這可能沒有在任何生產情境中顯示出來，因為 cloudflare/deno 生產執行階段（正確地）不會在中止成功渲染時中止 request.signal
- 內建的 entry.server 檔案不再將 signal 傳遞給 renderToReadableStream，因為將基於超時的中止訊號新增至預設行為會構成重大變更
- 使用者可以透過他們自己的 entry.server 透過 remix reveal entry.server 配置此中止行為，並且範本 entry.server 檔案已更新，其中包含新建立的 Remix 應用程式的範例方法
@remix-run/express - 修復用於中止 request.signal 的適配器邏輯，這樣我們就不會在成功請求的 close 事件上錯誤地中止 (#10046)
@remix-run/react - 修復在有泡泡錯誤的情況下，使用佈局路由中的 clientLoader.hydrate 的錯誤 (#10063)

更新的依賴項

依套件的變更

完整變更日誌： v2.12.1...v2.13.0

v2.12.1

日期：2024-09-19

修補程式變更

@remix-run/dev - 在節點回應關閉時，於 vite dev 期間正確中止 request.signal (#9976)
@remix-run/dev - 帶有 ?inline、?inline-css 和 ?raw 的 CSS 匯入在開發期間不再於 SSR 期間錯誤地注入 (#9910)
@remix-run/server-runtime：Single Fetch：修復當 loader、action、clientLoader 或 clientAction 返回裸物件、json(...)、defer(...) 和 unstable_data(...) 的混合時的類型。 (#9999)
@remix-run/node/@remix-run/cloudflare/@remix-run/deno - Single Fetch：透過執行階段套件重新匯出 interface Future，以便 pnpm 不會抱怨 @remix-run/server-runtime 不是依賴項 (#9982)
- 如果您已經選擇加入 Single Fetch，您可以在 vite.config.ts 中變更您的 Single Fetch 類型增強，以增強 @remix-run/node (或 cloudflare/deno) 而不是 @remix-run/server-runtime

依套件的變更

完整變更日誌： v2.12.0...v2.12.1

v2.12.0

日期：2024-09-09

變更內容

自動依賴項最佳化（不穩定）的未來標記

您現在可以使用 future.unstable_optimizeDeps 未來標記選擇加入開發期間的自動依賴項最佳化。如需詳細資訊，請查看指南 > 依賴項最佳化的文件。對於先前解決此限制的使用者，您不再需要明確將路由新增至 Vite 的 optimizeDeps.entries，也不需要停用 remix-dot-server 外掛程式。

改進的 Single Fetch 類型安全（不穩定）

如果您已經在使用 single-fetch 類型
- 從 tsconfig.json > compilerOptions > types 中移除 "@remix-run/react/future/single-fetch.d.ts" 覆寫
- 從您的路由模組中移除 defineLoader、defineAction、defineClientLoader、defineClientAction 輔助程式
- 將 UIMatch_SingleFetch 類型輔助程式取代為原始的 UIMatch
- 將 MetaArgs_SingleFetch 類型輔助程式取代為原始的 MetaArgs

然後，您就可以使用新的類型安全設定了

// vite.config.ts

declare module "@remix-run/server-runtime" {
  interface Future {
    unstable_singleFetch: true; // 👈 enable _types_ for single-fetch
  }
}

export default defineConfig({
  plugins: [
    remix({
      future: {
        unstable_singleFetch: true, // 👈 enable single-fetch
      },
    }),
  ],
});

如需更多資訊，請參閱我們文件中的指南 > Single Fetch。

Single Fetch 重新驗證行為的更新（不穩定）

使用 Single Fetch，重新使用的路由現在會在 GET 導航上預設重新驗證。其目的是在簡單情況下改善 Single Fetch 呼叫的快取，同時仍允許使用者選擇加入先前行為以進行更進階的使用案例。

透過此新行為，請求不需要特殊查詢參數，即可直接進行精細的路由重新驗證 - 例如，GET /a/b/c.data

有兩個條件會觸發精細的重新驗證，並將某些路由排除在單一提取呼叫之外

如果路由透過 shouldRevalidate 選擇退出重新驗證
如果路由定義 clientLoader
- 如果您從 clientLoader 呼叫 serverLoader()，則會針對該路由載入器進行單獨的 HTTP 呼叫 - 例如，GET /a/b/c.data?_routes=routes/a 表示 routes/a.tsx 中的 clientLoader

當一個或多個路由從 Single Fetch 呼叫中排除時，具有載入器的其餘路由會以查詢參數形式包含。例如，當導航至 /a/b/c 時，如果 A 被排除，且 root 路由和 routes/b 有 loader，但 routes/c 沒有，則 Single Fetch 請求會是 GET /a/b/c.data?_routes=root,routes/b。

如需更多資訊，請參閱我們文件中的指南 > Single Fetch。

小變更

@remix-run/dev - 用於自動依賴項最佳化的新 future.unstable_optimizeDeps 標記 (#9921)

修補程式變更

@remix-run/dev - 處理模組預載資訊清單產生中的循環依賴 (#9917)
@remix-run/dev - 修復 dest already exists 建置錯誤，方法是僅在 SSR 資產尚未存在於磁碟上時，才將其移動到用戶端建置目錄 (#9901)
@remix-run/react - 闡明預設 HydrateFallback 主控台警告中的措辭 (#9899)
@remix-run/react - 移除最初為解決 React 17 水合問題而新增的水合 URL 檢查，且我們不再支援 React 17 (#9890)
- 還原最初在 Remix v1.18.0 中透過 #6409 新增的邏輯
- 新增此邏輯是為了解決在 JS 載入時執行快速返回/前進歷史記錄導航時可能出現的問題，這會導致伺服器匹配和用戶端匹配之間不符：#1757
- 然後，此特定的水合問題會導致此僅限 React v17 的迴圈問題：#1678
- 我們在 1.18.0 中新增的 URL 比較結果證明會受到自身假陽性的影響，這也可能讓使用者陷入迴圈情境
- Remix v2 將其最低 React 版本升級到 v18，從而消除了 v17 水合錯誤迴圈
- React v18 會像處理任何其他錯誤一樣處理此水合錯誤，並且不會導致迴圈
- 因此，我們可以移除我們的檢查，從而避免可能也觸發迴圈的假陽性情境
@remix-run/react - Lazy Route Discovery：排序 /__manifest 查詢參數以獲得更好的快取 (#9888)
@remix-run/react - 單一 Fetch：改進型別安全 (#9893)
@remix-run/react - 單一 Fetch：修正重新驗證行為錯誤 (#9938)
@remix-run/server-runtime - 在文件請求的 304 回應中，不渲染或嘗試包含主體 (#9955)
@remix-run/server-runtime - 單一 Fetch：不要嘗試將 turbo-stream 主體編碼到 304 回應中 (#9941)
@remix-run/server-runtime - 單一 Fetch：將 .data 請求的內容類型變更為 text/x-script，以允許 Cloudflare 壓縮 (#9889)

更新的依賴項

各套件的變更

完整變更日誌：v2.11.2...v2.12.0

v2.11.2

日期：2024-08-15

修補程式變更

@remix-run/react - 戰爭迷霧：簡化實作，現在 React Router 處理 slug/splat 邊緣情況並追蹤先前探索的路由（請參閱 https://github.com/remix-run/react-router/pull/11883）(#9860)
- ⚠️ 這會變更內部 /__manifest 端點的返回簽章，因為我們不再需要 notFoundPaths 欄位
@remix-run/react - 戰爭迷霧：更新以使用 RR 中重新命名的 unstable_patchRoutesOnNavigation 函數（請參閱 https://github.com/remix-run/react-router/pull/11888）(#9860)
@remix-run/server-runtime - 單一 Fetch：修正存在 basename 時的重新導向問題 (#9848)
@remix-run/server-runtime - 單一 Fetch：將 turbo-stream 更新至 v2.3.0 (#9856)
- 穩定序列化酬載的物件鍵順序
- 移除酬載大小的記憶體限制

更新的依賴項

各套件的變更

完整變更日誌：v2.11.1...v2.11.2

v2.11.1

日期：2024-08-05

修補程式變更

@remix-run/react - 還原 #9695，停止無限重新載入 (a7cffe57)

各套件的變更

@remix-run/react

完整變更日誌：v2.11.0...v2.11.1

v2.11.0

日期：2024-08-01

變更內容

將 `unstable_fogOfWar` 未來標誌重新命名為 `unstable_lazyRouteDiscovery`（不穩定）

我們發現 future.unstable_fogOfWar 標誌名稱在沒有適當的上下文（特別是部落格文章）的情況下可能會有點令人困惑，因此我們為了清楚起見，將標誌重新命名為 future.unstable_lazyRouteDiscovery。如果您已選擇加入此功能，請更新您的 vite.config.ts 檔案（或 remix.config.js）中的標誌名稱。

移除單一 Fetch 中的 `response` Stub（不穩定）

最初的單一 Fetch 方法是基於假設，即最終的 middleware 實作會需要類似 ResponseStub API 的東西，以便使用者可以在處理程序之前/之後以及在處理程序期間變更 status/headers。作為單一 Fetch 的一部分，我們希望對齊文件和資料請求之間如何合併回應標頭。考慮到 response 是未來的 API，我們將文件請求對齊為使用資料請求所使用的 response Stub，並且我們停止使用 headers() 函數。

然而，在最近的路線圖規劃中，Michael 和 Ryan 之間的認知/對齊使我們意識到最初的假設是不正確的。middleware 不需要 response Stub - 因為使用者可以直接變更他們從 await next() 取得的 Response。

刪除該假設，並且仍然希望對齊文件和資料請求之間如何合併標頭，使用目前的 headers() API 並將單一 Fetch 資料請求對齊為使用現有的 API 會更有意義。這樣我們就不需要引入任何新的標頭相關 API，這將使單一 Fetch 的採用更加容易。

透過此變更

headers() 函數將讓您控制文件和資料請求的標頭合併
在大多數情況下，如果您返回 json()/defer() 而沒有設定自訂的 status 或 headers，您可以直接移除這些公用程式函數並返回原始資料
- ❌ return json({ data: "whatever" });
- ✅ return { data: "whatever" };
如果您有透過 json/defer 返回自訂的 status 或 headers
- 我們新增了一個新的 API 相容的 unstable_data 公用程式，可讓您在傳回原始資料的同時傳回 status/headers，而無需將其編碼到 Response 中
我們將在下一個主要版本中移除 json 和 defer，但兩者應該仍然可以在 v2 的單一 Fetch 中運作，以便逐步採用新行為

⚠️ 如果您已在不穩定狀態下採用單一 Fetch 並轉換為 response Stub，則您需要將這些變更移回利用 headers() API。

次要變更

@remix-run/dev - 戰爭迷霧：為了清楚起見，將 future.unstable_fogOfWar 重新命名為 future.unstable_lazyRouteDiscovery (#9763)
@remix-run/server-runtime - 新增 replace(url, init?) 作為 redirect(url, init?) 的替代方案，在用戶端導覽重新導向時執行 history.replaceState 而不是 history.pushState (#9764)
@remix-run/server-runtime - 單一 Fetch：新增一個新的 unstable_data() API 作為需要自訂 status/headers 時 json/defer 的替代方案 (#9769)
@remix-run/server-runtime - 單一 Fetch：移除 responseStub 而改用 headers (#9769)

修補程式變更

@remix-run/dev - 處理絕對 Vite 基底 URL (#9700)
@remix-run/react - 將初始水合路由不符從 URL 檢查變更為比對檢查，以抵抗 URL 不一致 (#9695)
@remix-run/react - 單一 Fetch：確保呼叫不包含來自路徑名稱的任何尾隨斜線（即，/path/.data）(#9792)
@remix-run/react - 單一 Fetch：將 undefined 新增至 useRouteLoaderData 類型覆寫 (#9796)

更新的依賴項

各套件的變更

完整變更日誌：v2.10.3...v2.11.0

v2.10.3

日期：2024-07-16

修補程式變更

@remix-run/architect - 手動使用分號連接標頭，以避免 Remix 和 node/undici Headers 實作的差異 (#9664)
@remix-run/react - 記錄在重新載入頁面之前載入路由模組時遇到的任何錯誤 (#8932)
@remix-run/react - 單一 Fetch (不穩定)：透過 dataStrategy 為 loader 呼叫代理 request.signal 以修復取消問題 (#9738)
@remix-run/react - 單一 Fetch (不穩定)：採用 React Router 穩定的 future.v7_skipActionErrorRevalidation 在底層運作 (#9706)
- 這將 unstable_actionStatus 中的 shouldRevalidate 參數穩定為 actionStatus
- ⚠️ 如果您已選擇加入單一 Fetch 和 unstable_actionStatus 參數，這可能是您的應用程式的重大變更

更新的依賴項

各套件的變更

完整變更日誌：v2.10.2...v2.10.3

v2.10.2

日期：2024-07-04

修補程式變更

@remix-run/react - 將 ref 轉發到 Form (bdd04217)
@remix-run/server-runtime - 修正從 loader 返回的原始原生 fetch 回應上的 immutable 標頭錯誤 (#9693)

各套件的變更

完整變更日誌：v2.10.1...v2.10.2

v2.10.1

日期：2024-07-03

修補程式變更

@remix-run/react - 戰爭迷霧（不穩定）：支援從 <Form> 元件探索路由 (#9665)
@remix-run/react - 戰爭迷霧（不穩定）：不要探索具有 reloadDocument 的連結/表單 (#9686)

更新的依賴項

各套件變更

完整變更日誌：v2.10.0...v2.10.1

v2.10.0

日期：2024-06-25

變更內容

延遲路由探索（又稱「戰爭迷霧」）

Remix 中的「戰爭迷霧」功能，現在可透過 future.unstable_fogOfWar 旗標啟用，它是一種優化，可減少 Remix 路由清單的初始大小。在大多數情況下，Remix 路由清單不會大到影響初始效能指標，但在大規模應用中，我們發現某些應用程式可能會產生龐大的清單，在應用程式啟動時下載和執行的成本很高。

啟用戰爭迷霧後，Remix 只會在清單中包含最初伺服器渲染的路由，然後在使用者瀏覽時，會針對往外的連結提取清單「修補程式」。預設情況下，為了避免瀑布式效應，Remix 會提取所有渲染連結的修補程式，以便在理想情況下，它們在被點擊之前就已經修補完成。如果使用者在這種預先探索完成之前點擊連結，就會發生一個小型的瀑布式效應，先「探索」路由，然後導航到該路由。

啟用此旗標不應需要變更任何應用程式程式碼。如需更多資訊，請參閱文件。

次要變更

新增對延遲路由探索（又稱「戰爭迷霧」）的支援 (#9600, #9619)

修補程式變更

@remix-run/{dev|express|serve} - 將 express 相依性升級至 ^4.19.2 (#9184)
@remix-run/react - 當 clientLoader 存在時，不要預先提取伺服器 loader 資料 (#9580)
@remix-run/react - 避免當 Layout/ErrorBoundary 渲染也拋出錯誤時出現 hydration 迴圈 (#9566)
@remix-run/react - 修正在使用子路由和帶有 basename 的 HydrateFallback 元件時發生的 hydration 錯誤 (#9584)
@remix-run/{server-runtime|react} - 單一提取：更新至 turbo-stream@2.2.0 (#9562)
@remix-run/server-runtime - 單一提取：正確處理拋出的 4xx/5xx 回應存根 (#9501)
@remix-run/server-runtime - 單一提取：將重新導向變更為使用 202 狀態，以避免自動快取 (#9564)
@remix-run/server-runtime - 單一提取：修正在單一提取中從資源路由返回或拋出回應存根的問題 (#9488)
@remix-run/server-runtime - 單一提取：修正在資源路由中返回 null 時發生的錯誤 (#9488)

更新的相依性

各套件變更

完整變更日誌：v2.9.2...v2.10.0

v2.9.2

日期：2024-05-10

變更內容

更新單一提取的類型安全

在 2.9.2 中，我們增強了選擇加入 future.unstable_singleFetch 功能時的類型安全。先前，我們將 response 存根新增至 LoaderFunctionArgs，並使用類型覆寫來推斷 useLoaderData 等，但我們發現這還不夠完善。

在此版本中，我們引入了新函式來協助在使用單一提取時進行類型推斷 - defineLoader/defineAction 及其用戶端對應函式 defineClientLoader 和 defineClientAction。這些是識別函式；它們不會在執行階段修改您的 loader 或 action。相反地，它們的存在只是為了透過為 args 提供類型並確保有效的返回類型來實現類型安全。

export const loader = defineLoader(({ request }) => {
  //                                ^? Request
  return { a: 1, b: () => 2 };
  //           ^ type error: `b` is not serializable
});

請注意，如果您不關心類型安全，則在技術上，定義 loader 和 action 並不需要 defineLoader 和 defineAction

// this totally works! and typechecking is happy too!
export const loader = () => {
  return { a: 1 };
};

這表示您可以一次一個 loader 地逐步選擇加入 defineLoader。

如需更多資訊，請參閱單一提取文件。

修補程式變更

@remix-run/dev - Vite：修正執行 remix vite:build 時發生的 dest already exists 錯誤 (#9305)
@remix-run/dev - Vite：修正在路由檔案位於應用程式目錄之外時，開發期間解析關鍵 CSS 的問題 (#9194)
@remix-run/dev - Vite：從 Vite 外掛程式的 optimizeDeps.include 清單中移除 @remix-run/node，因為它是不必要的，並且在不依賴此套件時會導致 Vite 警告 (#9287)
@remix-run/dev - Vite：清除開發期間多餘的 ?client-route=1 匯入 (#9395)
@remix-run/dev - Vite：確保在 Remix Vite 外掛程式內套用 react-refresh Babel 轉換時，不會參考 Babel 組態檔 (#9241)
@remix-run/react - 單一提取的類型安全：defineLoader、defineClientLoader、defineAction、defineClientAction (#9372)
@remix-run/react - 單一提取：將 undefined 新增至 useActionData 類型覆寫 (#9322)
@remix-run/react - 單一提取：允許透過 <RemixServer> 在單一提取串流傳輸內嵌指令碼上設定 nonce (#9364)
@remix-run/server-runtime - 單一提取：不要透過 handleError 記錄拋出的回應存根 (#9369)
@remix-run/server-runtime - 單一提取：自動將資源路由裸物件回傳包裝在 json() 中，以便在 v2 中實現向後相容性（並記錄棄用警告）(#9349)
@remix-run/server-runtime - 單一提取：將 response 存根傳遞至資源路由處理常式 (#9349)

更新的相依性

各套件變更

完整變更日誌：v2.9.1...v2.9.2

v2.9.1

日期：2024-04-24

修補程式變更

@remix-run/dev - 修正將 Remix 套件新增至 Vite 的 ssr.noExternal 選項的使用者被 Remix Vite 外掛程式新增 Remix 套件至 Vite 的 ssr.external 選項覆寫的問題 (#9301)
@remix-run/react - 從 TS 建置中忽略 future/*.d.ts 檔案 (#9299)

各套件變更

完整變更日誌：v2.9.0...v2.9.1

v2.9.0

日期：2024-04-23

變更內容

單一提取（不穩定）

2.9.0 引入 future.unstable_singleFetch 旗標，以在您的 Remix 應用程式中啟用單一提取行為 (RFC)。請參閱文件以取得完整詳細資訊，但需要注意的高階變更包括：

從 loader/action 函式返回的裸物件不再自動序列化為 JSON 回應
- 相反地，它們會透過 turbo-stream 按原樣進行串流，這允許直接序列化更複雜的類型，例如 Promise、Date、Map 實例等等
- 當使用單一提取時，您需要修改 tsconfig.json 的 compilerOptions.types 陣列以正確推斷類型
當啟用單一提取時，不再使用 headers 匯出，而是使用傳遞至 loader/action 函式的新 response 存根
當使用單一提取時，json/defer/redirect 公用程式已棄用（但仍然大致相同）
Action 不再在 4xx/5xx 回應上自動重新驗證 - 您可以返回 2xx 來選擇加入重新驗證或使用 shouldRevalidate

[!IMPORTANT] 單一提取需要使用 undici 作為您的 fetch polyfill，或在 Node 20+ 上使用內建 fetch，因為它依賴於那裡可用但在 @remix-run/web-fetch polyfill 中不可用的 API。請參閱下面的 Undici 章節以取得更多詳細資訊。

如果您正在管理自己的伺服器並呼叫 installGlobals()，則需要呼叫 installGlobals({ nativeFetch: true })，以避免在使用單一提取時發生執行階段錯誤

如果您正在使用 remix-serve，如果啟用單一提取，它將自動使用 undici

Undici

Remix 2.9.0 新增 installGlobals({ nativeFetch: true }) 旗標，以選擇使用 undici 作為 Web Fetch polyfill，而不是 @remix-run/web-* 套件。此變更有幾個主要優點：

它將允許我們在未來版本的 Remix 中停止維護我們自己的 web-std-io 分支
它應該使我們更符合規範
- ⚠️ 我們的分支中某些不符合規範的錯誤可能會因移至 undici 而「修正」，因此請注意「破壞性錯誤修正」，並密切關注您在應用程式中執行的任何進階 fetch API 互動
- ⚠️ 在某些情況下，undici 的行為可能會因設計而異 - 最值得注意的是，undici 的垃圾回收行為有所不同，並且您必須使用所有提取回應主體，以避免應用程式中發生記憶體洩漏
因為 undici 是 node 內部使用的提取實作，它應該可以更好地準備 Remix 應用程式，以便更順利地捨棄 polyfill，以在 node 20+ 上使用內建的 Node.js API

次要變更

新的 future.unstable_singleFetch 旗標 (#8773, #9073, #9084, #9272)
@remix-run/node - 新增 installGlobals({ nativeFetch: true }) 標記，選擇使用 undici 作為 fetch polyfill，而非 @remix-run/web-* (#9106, #9111, #9198)
@remix-run/server-runtime - 新增 ResponseStub header 介面，並在啟用 Single Fetch 時棄用 headers 輸出 (#9142)

修補程式變更

create-remix - 在使用 --template 標記時，允許 repo 名稱包含 . (#9026)
@remix-run/dev - 改善 monorepo 中 getDependenciesToBundle 的解析 (#8848)
@remix-run/dev - 透過使用串流 entry.server 修正在啟用 Single Fetch 時的 SPA 模式問題 (#9063)
@remix-run/dev - Vite：為轉換後的路由新增 sourcemap 支援 (#8970)
@remix-run/dev - 更新 Remix CLI/Dev Server 印在控制台上的連結，使其指向更新過的文件位置 (#9176)
@remix-run/server-runtime - 處理由 handleDataRequest 建立的重新導向 (#9104)

更新的相依性

依套件變更

完整變更記錄：v2.8.1...v2.9.0

v2.8.1

日期：2024-03-07

修補程式變更

@remix-run/dev - Vite：在執行 remix reveal 和 remix routes CLI 命令時，支援從 Vite config 讀取設定 (#8916)
@remix-run/dev - Vite：在 production builds 中，清除 route JavaScript 檔案上多餘的用戶端路由查詢字串 (#8969)
@remix-run/dev - Vite：將 vite 命令新增至 Remix CLI --help 輸出 (#8939)
@remix-run/dev - Vite：修正在 Vite config 中對 build.sourcemap 選項的支援 (#8965)
@remix-run/dev - Vite：修正在使用 Vite 的 server.fs.allow 選項而沒有用戶端進入點檔案時發生的錯誤 (#8966)
@remix-run/react - 加強內部 LayoutComponent 類型，使其接受有限的子元素 (#8910)

更新的相依性

依套件變更

完整變更記錄：v2.8.0...v2.8.1

v2.8.0

日期：2024-02-28

次要變更

@remix-run/dev - Vite：將已解析的 viteConfig 傳遞給 Remix Vite plugin 的 buildEnd hook (#8885)

修補程式變更

@remix-run/dev - 在 esbuild 編譯器中，將 Layout 標記為瀏覽器安全路由輸出 (#8842)
@remix-run/dev - Vite：在相依性包含 "use client" 指令時，靜止建置警告 (#8897)
@remix-run/dev - Vite：修復 serverBundles 問題，該問題會導致產生多個瀏覽器資訊清單 (#8864)
@remix-run/dev - Vite：支援自訂 build.assetsDir 選項 (#8843)
@remix-run/react - 修復預設的根 ErrorBoundary 元件，使其利用使用者提供的 Layout 元件 (#8859)
@remix-run/react - 修復預設的根 HydrateFallback 元件，使其利用任何使用者提供的 Layout 元件 (#8892)

更新的相依性

依套件變更

完整變更記錄：v2.7.2...v2.8.0

2.7.2

日期：2024-02-21

修補程式變更

@remix-run/dev - Vite：修復建置包含 .css?url 匯入的專案時發生的錯誤 (#8829)

2.7.1

日期：2024-02-20

修補程式變更

@remix-run/cloudflare-pages - 修復重大變更，並恢復 Cloudflare event context 欄位，以在 getLoadContext 引數中保持向後相容性 (#8819)

v2.7.0

日期：2024-02-20

變更內容

穩定化的 Vite 外掛程式

我們很高興宣布，Remix 2.7.0 現在已穩定支援 Vite！自從 Remix Vite 最初不穩定的版本發布以來，在過去幾個月中，我們一直在努力改進並擴展它，並獲得所有早期採用者和社群貢獻者的幫助。這也表示諸如 SPA 模式、Server Bundles 和 basename 支援等僅限 Vite 的功能也已正式穩定 😊。

如需更多資訊，請查看部落格文章和Vite 文件。

新的 `Layout` 輸出

我們發現，在根路由中建立自己的元件以保存 Component/ErrorBoundary/HydrateFallback 之間共用的版面配置/應用程式外殼，是非常常見的做法。這非常常見（也可能導致一些次要的邊緣案例問題，例如在 hydration 時發生 FOUC），因此我們已將其納入 2.7.0 中的第一類 API。

您現在可以從根路由輸出一個選用的 Layout 元件，該元件會將您的路由元件、ErrorBoundary 或 HydrateFallback 作為其 children 提供。如需更多資訊，請參閱 Layout 文件和 RFC。

Basename 支援

React Router 長期以來支援 basename 設定，可讓您在子路徑（例如 https://127.0.0.1/myapp/*）中提供應用程式，而無需在所有路由路徑中包含 /myapp 段。此功能最初從 Remix 中省略，因為 v1 巢狀資料夾檔案慣例可以輕鬆地將路由檔案放置在 routes/myapp/ 資料夾中，從而提供相同的功能。社群也有一個開放建議來新增此功能。

自此之後，有兩件事發生變化，促使我們重新考慮缺少 basename 支援的問題

我們在 v2 中改用基於扁平檔案的慣例，與巢狀資料夾慣例相比，必須在所有路由檔案前面加上 myapp. 的做法較不符合人體工學
我們改用 Vite，Vite 有自己的 base 設定，這通常（且容易）與 React Router basename 的概念混淆（而實際上它更符合舊的 Remix publicPath 設定）

在 2.7.0 中，我們在 Vite plugin 設定中新增了 basename 的支援。如需更多資訊，請查看 basename 文件。

注意：這是僅限 Vite 的功能，無法透過 esbuild 編譯器使用。

Cloudflare Proxy 作為 Vite 外掛程式

⚠️ 對於依賴不穩定 Vite 外掛程式的 Cloudflare 支援的專案來說，這是一項重大變更

Cloudflare 預設 (unstable_cloudflarePreset) 已移除，並替換為新的 Vite 外掛程式

 import {
    unstable_vitePlugin as remix,
-   unstable_cloudflarePreset as cloudflare,
+   cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
  } from "@remix-run/dev";
  import { defineConfig } from "vite";

  export default defineConfig({
    plugins: [
+     remixCloudflareDevProxy(),
+     remix(),
-     remix({
-       presets: [cloudflare()],
-     }),
    ],
-   ssr: {
-     resolve: {
-       externalConditions: ["workerd", "worker"],
-     },
-   },
  });

關於新外掛程式的幾個注意事項

remixCloudflareDevProxy 必須在 remix 外掛程式之前出現，以便它可以覆寫 Vite 的開發伺服器中介軟體，以與 Cloudflare 的 proxy 環境相容
因為它是一個 Vite 外掛程式，所以 remixCloudflareDevProxy 可以將 ssr.resolve.externalConditions 設定為與 workerd 相容
remixCloudflareDevProxy 接受 getLoadContext 函式，該函式會取代舊的 getRemixDevLoadContext
如果您使用的是需要 getBindingsProxy 或 getPlatformProxy 的 nightly 版本，則不再需要該版本
您傳遞給 getBindingsProxy 或 getPlatformProxy 的任何選項現在都應該傳遞給 remixCloudflareDevProxy
此 API 也更符合未來計畫，即使用 Vite 的（實驗性）Runtime API 來支援具有框架無關的 Vite 外掛程式的 Cloudflare。

次要變更

@remix-run/react - 允許從根路由輸出選用的 Layout (#8709)
@remix-run/cloudflare-pages - 使 getLoadContext 對 Cloudflare Pages 來說成為選用 (#8701)
- 預設為 (context) => ({ env: context })，這也是我們過去在所有範本中使用的設定
- 這與 Remix Vite 外掛程式的 Cloudflare 預設值具有同等性，並使我們的範本更精簡
@remix-run/dev - Vite：Cloudflare Proxy 作為 Vite 外掛程式 (#8749)
- ⚠️ 對於依賴不穩定 Vite 外掛程式的 Cloudflare 支援的專案來說，這是一項重大變更
@remix-run/dev - Vite：將新的 basename 選項新增至 Vite 外掛程式，讓使用者可以設定內部的 React Router basename，以便在其應用程式在子路徑下提供服務時使用 (#8145)
@remix-run/dev - Vite：透過移除所有 unstable_ / Unstable_ 字首，使 Remix Vite 外掛程式、Cloudflare 預設和所有相關類型穩定化 (#8713)
- 雖然這對現有的 Remix Vite 外掛程式使用者來說是一項重大變更，但現在外掛程式已穩定，除了主要版本之外，將不再有任何重大變更。感謝所有早期採用者和社群貢獻者幫助我們走到這一步！🙏
@remix-run/dev - Vite：透過將 Remix vite 外掛程式組態的 unstable_ssr -> ssr 更名，來穩定「SPA 模式」(#8692)

修補程式變更

@remix-run/express - 使用 req.originalUrl 而非 req.url，以便 Remix 可以看到完整的 URL (#8145)
- Remix 依賴於知道完整的 URL 以確保伺服器和客戶端程式碼可以一起運作，並且不支援在 Remix 處理程序之前進行 URL 重寫
@remix-run/react - 修正在根路由沒有子節點時，SPA 模式的一個錯誤 (#8747)
@remix-run/server-runtime - 如果使用者從資源路由傳回 defer 回應，則新增更具體的錯誤訊息 (#8726)
@remix-run/dev - 永遠在 SPA 模式的 entry.server.tsx 中加上 DOCTYPE 前綴，可以透過 remix reveal 選擇退出 (#8725)
@remix-run/dev - 修正在使用 basename 時，SPA 模式中的建置問題 (#8720)
@remix-run/dev - 修正在同步 routes 函式的 Remix 組態中的類型錯誤 (#8745)
@remix-run/dev - Vite：修正在搜尋參數在到達 Remix Vite 外掛程式之前被解析和序列化時，客戶端路由檔案請求失敗的問題 (#8740)
@remix-run/dev - Vite：驗證 MDX Rollup 外掛程式（如果存在）是否放置在 Vite 組態中的 Remix 之前 (#8690)
@remix-run/dev - Vite：修正在目前的工作目錄與專案根目錄不同時，開發期間解析關鍵 CSS 的問題 (#8752)
@remix-run/dev - Vite：需要 5.1.0 版本才能支援 .css?url 匯入 (#8723)
@remix-run/dev - Vite：支援 Vite 5.1.0 的 .css?url 匯入 (#8684)
@remix-run/dev - Vite：啟用使用 vite preview 來預覽 Remix SPA 應用程式 (#8624)
- 在 SPA 範本中，npm run start 已更名為 npm run preview，它使用 vite preview 而不是獨立的 HTTP 伺服器，例如 http-server 或 serv-cli
@remix-run/dev - Vite：移除將 publicPath 作為選項傳遞給 Remix vite 外掛程式的功能 (#8145)
- ⚠️ 對於使用不穩定 Vite 外掛程式且具有 publicPath 的專案來說，這是一個重大變更
- 這已在 Vite 中透過 base 組態處理，因此我們現在從 Vite base 組態設定 Remix publicPath
@remix-run/dev - Vite：啟用 .md 和 .mdx 檔案的 HMR (#8711)
@remix-run/dev - Vite：可靠地偵測 Windows 中的非根路由 (#8806)
@remix-run/dev - Vite：將 remixUserConfig 傳遞給預設的 remixConfig 掛鉤 (#8797)
@remix-run/dev - Vite：確保僅在伺服器建置中引用的 CSS 檔案 URL 在客戶端上可用 (#8796)
@remix-run/dev - Vite：修正應用程式目錄外部路由的伺服器匯出程式碼刪除問題 (#8795)

已更新的相依性

依套件的變更

完整變更記錄：v2.6.0...v2.7.0

v2.6.0

日期：2024-02-01

變更內容

不穩定 Vite 外掛程式更新

隨著我們持續朝向穩定 Vite 外掛程式邁進，我們在此版本中對不穩定 Vite 外掛程式引入了一些重大變更。如果您選擇使用 Vite 外掛程式，請仔細閱讀以下 @remix-run/dev 變更，並相應地更新您的應用程式。

我們也從 serverBundles 選項中移除了 unstable_ 前綴，因為我們現在對 API 充滿信心 (#8596)。

🎉 最後，但同樣重要的是 - 我們在 #8531 中新增了期待已久的 Cloudflare 支援！若要開始使用 Cloudflare，您可以使用 unstable-vite-cloudflare 範本

npx create-remix@latest --template remix-run/remix/templates/unstable-vite-cloudflare

如需更多資訊，請參閱 Future > Vite > Cloudflare 和 Future > Vite > 遷移 > 遷移 Cloudflare Functions 的文件。

次要變更

@remix-run/server-runtime - 新增 future.v3_throwAbortReason 旗標，以便在請求中止時擲回 request.signal.reason，而不是 Error，例如 new Error("query() call aborted: GET /path") (#8251)

修補程式變更

@remix-run/server-runtime - 從 entry.server 解開擲回的 Response 到 ErrorResponse，並保留狀態碼 (#8577)
@remix-run/dev - Vite：在 Vite 外掛程式中新增 manifest 選項，以啟用將 .remix/manifest.json 檔案寫入建置目錄的功能 (#8575)
- ⚠️ 對於 Vite 外掛程式「伺服器套件」功能的消費者來說，這是一個重大變更
- build/server/bundles.json 檔案已被更通用的 build/.remix/manifest.json 取代
- 雖然舊的伺服器套件資訊清單在產生伺服器套件時總是寫入磁碟，但必須透過 manifest 選項明確啟用建置資訊清單檔案
@remix-run/dev - Vite：依賴 Vite 外掛程式順序 (#8627)
- ⚠️ 對於使用不穩定 Vite 外掛程式的專案來說，這是一個重大變更
- Remix 外掛程式預期會處理 JavaScript 或 TypeScript 檔案，因此必須先完成其他語言的任何轉譯。
- 例如，這表示將 MDX 外掛程式放在 Remix 外掛程式之前
```
  import mdx from "@mdx-js/rollup";
  import { unstable_vitePlugin as remix } from "@remix-run/dev";
  import { defineConfig } from "vite";

  export default defineConfig({
    plugins: [
+     mdx(),
      remix()
-     mdx(),
    ],
  });
```
- 先前，Remix 外掛程式濫用了 Vite 外掛程式 API 中的 enforce: "post"，以確保它最後執行
- 但是，這導致了其他無法預見的問題
- 相反地，我們現在依賴標準的 Vite 語意來排序外掛程式
- 官方的 Vite React SWC 外掛程式也依賴外掛程式排序來處理 MDX
@remix-run/dev - Vite：移除與 <LiveReload /> 的互通性，改為依賴 <Scripts /> (#8636)
- ⚠️ 對於使用不穩定 Vite 外掛程式的專案來說，這是一個重大變更
- Vite 為開發功能（例如 HMR）提供強大的客戶端執行階段，使 <LiveReload /> 元件變得過時
- 事實上，擁有獨立的開發指令碼元件導致指令碼執行順序的問題
- 為了解決這個問題，Remix Vite 外掛程式過去會將 <LiveReload /> 覆寫為與 Vite 相容的客製化實作
- 現在，Remix Vite 外掛程式並非使用所有這些間接方式，而是指示 <Scripts /> 元件自動包含 Vite 的客戶端執行階段和其他僅限開發的指令碼
- 為了採用此變更，您可以從您的 root.tsx 元件中移除 LiveReload 元件
```
  import {
-   LiveReload,
    Outlet,
    Scripts,
  }

  export default function App() {
    return (
      <html>
        <head>
        </head>
        <body>
          <Outlet />
          <Scripts />
-         <LiveReload />
        </body>
      </html>
    )
  }
```
@remix-run/dev - Vite：僅在 Vite 組態中啟用 build.manifest 時，才寫入 Vite 資訊清單檔案 (#8599)
- ⚠️ 對於 Vite 的 manifest.json 檔案的消費者來說，這是一個重大變更
- 若要明確啟用產生 Vite 資訊清單檔案，您必須在 Vite 組態中將 build.manifest 設定為 true
```
export default defineConfig({
  build: { manifest: true },
  // ...
});
```
@remix-run/dev - Vite：新增預設值為 "build" 的新 buildDirectory 選項 (#8575)
- ⚠️ 對於使用 assetsBuildDirectory 和 serverBuildDirectory 選項的 Vite 外掛程式消費者來說，這是一個重大變更
- 這取代了舊的 assetsBuildDirectory 和 serverBuildDirectory 選項，它們分別預設為 "build/client" 和 "build/server"
- Remix Vite 外掛程式現在會建置到包含 client 和 server 目錄的單一目錄中
- 如果您已自訂建置輸出目錄，則需要移轉到新的 buildDirectory 選項，例如
```
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
-      serverBuildDirectory: "dist/server",
-      assetsBuildDirectory: "dist/client",
+      buildDirectory: "dist",
    })
  ],
});
```
@remix-run/dev - Vite：將 Vite 資訊清單檔案寫入 build/.vite 目錄，而不是巢狀於 build/client 和 build/server 目錄中 (#8599)
- ⚠️ 對於 Vite 的 manifest.json 檔案的消費者來說，這是一個重大變更
- Vite 資訊清單檔案現在寫入 Remix 建置目錄
- 由於所有 Vite 資訊清單現在都位於同一個目錄中，因此它們不再命名為 manifest.json
- 相反地，它們被命名為 build/.vite/client-manifest.json 和 build/.vite/server-manifest.json，或者在使用伺服器套件時，命名為 build/.vite/server-{BUNDLE_ID}-manifest.json
@remix-run/dev - Vite：移除 serverBundles 選項中的 unstable 前綴 (#8596)
@remix-run/dev - Vite：將 --sourcemapClient 和 --sourcemapServer 旗標新增至 remix vite:build (#8613)
- --sourcemapClient、--sourcemapClient=inline 或 --sourcemapClient=hidden
- --sourcemapServer、--sourcemapServer=inline 或 --sourcemapServer=hidden
- 請參閱 https://vite.dev.org.tw/config/build-options.html#build-sourcemap
@remix-run/dev - Vite：驗證從 serverBundles 函數傳回的 ID，以確保它們僅包含字母數字字元、連字號和底線 (#8598)
@remix-run/dev - Vite：修正「無法快速重新整理」的誤報 (#8580)
- HMR 已經正常運作，但在內部客戶端路由上不正確地記錄「無法快速重新整理」
- 現在，內部客戶端路由會正確地註冊 Remix 匯出，例如 meta 以進行快速重新整理，從而消除了誤報。
@remix-run/dev - Vite：Cloudflare Pages 支援 (#8531)
@remix-run/dev - Vite：為 Cloudflare 預設新增 getRemixDevLoadContext 選項 (#8649)
@remix-run/dev - Vite：移除 Vite v4 的未記錄向後相容層 (#8581)
@remix-run/dev - Vite：新增 presets 選項，以簡化與不同平台和工具的整合 (#8514)
@remix-run/dev - Vite：新增 buildEnd hook (#8620)
@remix-run/dev - Vite：將 mode 欄位新增至產生的伺服器建置中 (#8539)
@remix-run/dev - Vite：減少 HMR 期間路由模組的網路呼叫次數 (#8591)
@remix-run/dev - Vite：匯出 Unstable_ServerBundlesFunction 和 Unstable_VitePluginConfig 類型 (#8654)

更新的相依性

依套件的變更

完整變更記錄：v2.5.1...v2.6.0

v2.5.1

日期：2024-01-18

修補程式變更

create-remix - 為標頭色彩提供高對比的前景/背景 (#8503)
- bgWhite 和 whiteBright 在許多終端色彩主題中是相同的顏色，這導致其呈現為難以辨識的白底白字
@remix-run/dev - 將 isSpaMode 新增至 @remix-run/dev/server-build 虛擬模組 (#8492)
@remix-run/dev - SPA 模式：如果不存在，自動預先加入 <!DOCTYPE html>，以修正 SPA 範本的 Quirks 模式警告 (#8495)
@remix-run/dev - Vite：伺服器專用程式碼的錯誤指向新的文件 (#8488)
@remix-run/dev - Vite：修正讀取已變更檔案內容時的 HMR 競爭條件 (#8479)
@remix-run/dev - Vite：在用戶端建置中進行未使用路由匯出的 tree-shake (#8468)
@remix-run/dev - Vite：效能分析 (#8493)
- 執行 remix vite:build --profile 以產生一個 .cpuprofile，該檔案可以共用或上傳到 speedscope.app
- 在開發中，按下 p + enter 以開始新的分析會期或停止目前的會期
- 如果您需要分析開發伺服器啟動，請執行 remix vite:dev --profile 以使用正在執行的分析會期初始化開發伺服器
- 如需更多資訊，請參閱新的 Vite > 效能文件
@remix-run/dev - Vite：透過在相關檔案變更時，而不是每次請求時使 Remix 的虛擬模組失效，來提升開發伺服器請求的效能 (#8164)
@remix-run/react - 從 Blocker/BlockerFunction 類型中移除剩餘的 unstable_ 前綴 (#8530)
@remix-run/react - 在 SPA 模式中，僅在 <Meta>/<Links> 中使用作用中的比對 (#8538)

更新的相依性

react-router-dom@6.21.3

依套件的變更

完整變更記錄：v2.5.0...v2.5.1

v2.5.0

日期：2024-01-11

變更內容

SPA 模式 (不穩定)

SPA 模式 (RFC) 可讓您將 Remix 應用程式產生為從靜態 index.html 檔案提供的獨立 SPA。您可以透過在您的 Remix Vite 外掛程式設定中設定 unstable_ssr: false 來選擇加入 SPA 模式

// vite.config.ts
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [remix({ unstable_ssr: false })],
});

SPA 模式中的開發就像一般的 Remix 應用程式一樣，並且仍然使用 Remix 開發伺服器進行 HMR/HDR

remix vite:dev

在 SPA 模式中建置將會在您的用戶端資產目錄中產生一個 index.html 檔案

remix vite:build

若要執行您的 SPA，您需透過 HTTP 伺服器提供您的用戶端資產目錄

npx http-server build/client

如需更多資訊，請參閱 SPA 模式文件。

伺服器套件 (不穩定)

這是一個進階功能，專為託管服務供應商整合而設計，在其中您可能希望將伺服器程式碼分割為多個請求處理程式。當將您的應用程式編譯為多個伺服器套件時，需要在您的應用程式前面有一個自訂路由層，將請求導向至正確的套件。此功能目前不穩定，僅旨在收集早期回饋。

您可以透過在您的 vite 設定中設定 unstable_serverBundles 選項，來控制您的 Remix Vite 建置所產生的伺服器套件

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      unstable_serverBundles: ({ branch }) => {
        const isAuthenticatedRoute = branch.some(
          (route) => route.id === "routes/_authenticated"
        );

        return isAuthenticatedRoute ? "authenticated" : "unauthenticated";
      },
    }),
  ],
});

次要變更

新增對「SPA 模式」的不穩定支援 (#8457)
將 unstable_serverBundles 選項新增至 Vite 外掛程式，以支援將伺服器程式碼分割為多個請求處理程式 (#8332)

修補程式變更

create-remix：僅更新 Remix 相依性的 * 版本 (#8458)
remix-serve：如果磁碟上不存在來源對應，則不嘗試載入來源對應 (#8446)
@remix-run/dev：修正 2024/1/1 發佈的 isbot@4 問題 (#8415)
- remix dev 現在將會新增 "isbot": "^4" 至 package.json，而不是使用 latest
- 更新內建的 entry.server 檔案，以同時適用於 isbot@3 和 isbot@4，以便與已釘選 isbot@3 的 Remix 應用程式向後相容
- 範本已更新，透過 create-remix 將來使用 isbot@4
@remix-run/dev：Vite - 修正變更未轉譯路由的匯出時的 HMR 問題 (#8157)
@remix-run/dev：Vite - 在執行 remix vite:build 命令時，預設 NODE_ENV 為 "production" (#8405)
@remix-run/dev：Vite - 移除 Vite 外掛程式設定選項 serverBuildPath，改用個別的 serverBuildDirectory 和 serverBuildFile 選項 (#8332)
@remix-run/dev：Vite - 放寬嚴格的路由匯出限制，恢復對非 Remix 路由匯出的支援 (#8420)
@remix-run/react：Vite - 修正現有 Remix 編譯器中的 import.meta.hot 類型衝突 (#8459)
@remix-run/server-runtime：將 cookie 相依性更新至 0.6.0，以繼承對 Partitioned 屬性的支援 (#8375)

更新的相依性

依套件的變更

完整變更記錄：v2.4.1...v2.5.0

v2.4.1

日期：2023-12-22

修補程式變更

@remix-run/dev：Vite - 移除 unstable_viteServerBuildModuleId，改用手動參考虛擬模組名稱 "virtual:remix/server-build" (#8264)
- ⚠️ 對於使用不穩定 Vite 外掛程式與自訂伺服器的專案而言，這是一項重大變更
- 進行此變更是為了避免 @remix-run/dev 可能在您的伺服器生產相依性中被無意中要求到的問題。
- 相反地，您應該在開發中呼叫 ssrLoadModule 時手動撰寫虛擬模組名稱 "virtual:remix/server-build"。
```
-import { unstable_viteServerBuildModuleId } from "@remix-run/dev";

// ...

app.all(
  "*",
  createRequestHandler({
    build: vite
-      ? () => vite.ssrLoadModule(unstable_viteServerBuildModuleId)
+      ? () => vite.ssrLoadModule("virtual:remix/server-build")
      : await import("./build/server/index.js"),
  })
);
```
@remix-run/dev：Vite - 將 vite:dev 和 vite:build 命令新增至 Remix CLI (#8211)
- 為了處理即將推出的 Remix 功能（其中您的外掛程式選項可能會影響所需的 Vite 建置數量），您現在應該透過 Remix CLI 執行您的 Vite dev 和 build 處理程序。
```
{
  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && vite build --ssr"
+    "dev": "remix vite:dev",
+    "build": "remix vite:build"
  }
}
```
@remix-run/dev：Vite - 當用戶端參考 .server 檔案時的錯誤訊息 (#8267)
- 先前，從用戶端程式碼參考 .server 模組會導致像這樣的錯誤訊息
  - 要求的模組 '/app/models/answer.server.ts' 未提供名為 'isDateType' 的匯出
- 這令人困惑，因為 answer.server.ts的確提供 isDateType 匯出，但是 Remix 正在使用空的模組 (export {}) 來取代用戶端建置中的 .server 模組
- 現在，當從用戶端程式碼參考 .server 模組時，Remix 會在編譯時明確失敗，並且包含專用的錯誤訊息，具體取決於匯入是發生在路由還是非路由模組中
- 錯誤訊息還包括相關文件的連結
@remix-run/dev：Vite - 保留來自 .client 模組的匯出名稱 (#8200)
- 與 .server 模組不同的是，主要想法不是要防止程式碼洩漏到伺服器建置中，因為用戶端建置已經是公開的
- 相反地，目標是要將 SSR 轉譯與僅限用戶端的程式碼隔離
- 路由需要從 .client 模組匯入程式碼，而不會導致編譯失敗，然後依靠執行階段檢查或以其他方式確保執行僅發生在僅限用戶端的內容中 (例如，事件處理程式、useEffect)
- 使用空的模組取代 .client 模組會導致建置失敗，因為 ESM 具名匯入是經過靜態分析的
  - 因此，我們改為保留具名匯出，但是將每個匯出的值取代為 undefined
  - 這樣一來，導入在建置時會是有效的，並且可以使用標準的執行階段檢查來判斷程式碼是在伺服器端還是用戶端執行。
@remix-run/dev：Vite - 在建置期間停用 Vite 子編譯器中的監看模式 (#8342)
@remix-run/dev：Vite - 當在生產建置中啟用 Source Map 時顯示警告 (#8222)
@remix-run/react：透過水合作用的 clientLoader 中的 serverLoader 傳播伺服器端的 loader 錯誤 (#8304)
@remix-run/react：重新匯出 Response 輔助函式 (defer/json/redirect/redirectDocument) ，以便在 clientLoader/clientAction 中使用 (#8351)
@remix-run/server-runtime：將可選的 error 新增至 ServerRuntimeMetaArgs 類型，以與 MetaArgs 對齊 (#8238)
create-remix：切換為在 create-remix CLI 中使用 @remix-run/web-fetch 而不是 node-fetch (#7345)
remix-serve：使用 node fileURLToPath 將 Source Map URL 轉換為路徑 (#8321)

更新的相依性

各套件的變更

完整變更日誌： v2.4.0...v2.4.1

v2.4.0

日期：2023-12-13

變更內容

用戶端資料

我們很高興在此版本中推出用戶端資料 RFC！最終的 API 與 RFC 略有不同，因此請查看文件以瞭解用例和最終 API

雖然我們仍然建議在 Remix 應用程式中使用伺服器端 loader/action 來處理大多數的資料需求，但這些機制提供了一些您可以利用的工具，以用於更進階的用例，例如

跳過中繼步驟： 直接從瀏覽器查詢資料 API，僅將 loader 用於 SSR
全堆疊狀態： 使用用戶端資料擴充伺服器端資料，以取得完整的 loader 資料集
二選一： 有時您會使用伺服器端 loader，有時您會使用用戶端 loader，但不會在同一路由上同時使用兩者
用戶端快取： 在用戶端快取伺服器端 loader 資料，並避免某些伺服器呼叫
遷移： 簡化您從 React Router -> Remix SPA -> Remix SSR 的遷移

`future.v3_relativeSplatPath`

我們引入了一個 future.v3_relativeSplatPath 旗標，以實作在 splat 路由內的相對路由的重大錯誤修正。如需更多資訊，請參閱 React Router 6.21.0 版本說明和 useResolvedPath 文件

Vite 更新 (不穩定)

Remix 現在會從用戶端建置中排除 .server 目錄內的模組。

Remix 現在會強制執行嚴格的路由匯出，如果您在路由模組中有不支援的匯出，則會擲回錯誤。先前，Remix 編譯器允許從路由匯出任何項目。雖然這很方便，但這也是一個常見的錯誤來源，這些錯誤很難追蹤，因為它們只會在執行階段浮現。如需更多資訊，請參閱文件。

次要變更

新增對 clientLoader/clientAction/HydrateFallback 路由匯出的支援 (#8173)
新增一個新的 future.v3_relativeSplatPath 旗標，以實作在 splat 路由內的相對路由的重大錯誤修正 (#8216)
棄用 DataFunctionArgs，改用 LoaderFunctionArgs/ActionFunctionArgs (#8173)
- 這樣做的目的是讓類型在伺服器端/用戶端 loader/action 之間保持一致，現在 clientLoader/clientActon 函式具有區分 ClientLoaderFunctionArgs/ClientActionFunctionArgs 的 serverLoader/serverAction 參數
Vite：從用戶端建置中排除 .server 目錄內的模組 (#8154)
Vite：嚴格的路由匯出 (#8171)

修補程式變更

@remix-run/server-runtime：修正 Vite 開發中非 Express 自訂伺服器的未設定樣式內容快閃 (#8076)
@remix-run/server-runtime：將要求處理常式錯誤傳遞至 Vite 開發中的 vite.ssrFixStacktrace，以確保堆疊追蹤正確地對應到原始程式碼 (#8066)
remix-serve：修正當檔案具有 ?t=timestamp 後綴 (重建) 時的 Source Map 載入 (#8174)
@remix-run/dev：變更 Vite 建置輸出路徑，以修正 Vite 和 Remix 編譯器各自管理 public 目錄的方式之間的衝突 (#8077)
- ⚠️ 對於使用不穩定 Vite 外掛程式的專案來說，這是一個重大變更
- 伺服器現在會編譯到 build/server 而不是 build，而用戶端現在會編譯到 build/client 而不是 public
- 如需有關變更的更多資訊以及如何遷移專案的指南，請參閱更新的 Remix Vite 文件
@remix-run/dev：將 Vite 對等相依性範圍升級至 v5 (#8172)
@remix-run/dev：在 Vite 開發中支援具有 handle 匯出的路由的 HMR (#8022)
@remix-run/dev：修正 Vite 開發中非 Express 自訂伺服器的未設定樣式內容快閃 (#8076)
@remix-run/dev：在 Vite 外掛程式中綑綁用戶端進入檔案中匯入的 CSS (#8143)
@remix-run/dev：從 Vite 外掛程式中移除未記錄的 legacyCssImports 選項，因為在 Vite 中 ?url 匯入的 CSS 檔案無法正確處理 (#8096)
@remix-run/dev：Vite：修正在 Windows 上的 pnpm 工作區中存取預設 entry.{client,server}.tsx 的問題 (#8057)

@remix-run/dev：移除 unstable_createViteServer 和 unstable_loadViteServerBuild，這些函式在使用自訂伺服器時僅是 Vite 的 createServer 和 ssrLoadModule 函式的最小包裝函式 (#8120)

⚠️ 對於使用不穩定 Vite 外掛程式與自訂伺服器的專案而言，這是一項重大變更

相反地，我們現在提供 unstable_viteServerBuildModuleId，讓自訂伺服器直接與 Vite 互動，而不是透過 Remix API，例如

-import {
-  unstable_createViteServer,
-  unstable_loadViteServerBuild,
-} from "@remix-run/dev";
+import { unstable_viteServerBuildModuleId } from "@remix-run/dev";

在中間件模式中建立 Vite 伺服器

const vite =
  process.env.NODE_ENV === "production"
    ? undefined
-    : await unstable_createViteServer();
+    : await import("vite").then(({ createServer }) =>
+        createServer({
+          server: {
+            middlewareMode: true,
+          },
+        })
+      );

在要求處理常式中載入 Vite 伺服器建置

app.all(
  "*",
  createRequestHandler({
    build: vite
-      ? () => unstable_loadViteServerBuild(vite)
+      ? () => vite.ssrLoadModule(unstable_viteServerBuildModuleId)
      : await import("./build/server/index.js"),
  })
);

@remix-run/dev：將要求處理常式錯誤傳遞至 Vite 開發中的 vite.ssrFixStacktrace，以確保堆疊追蹤正確地對應到原始程式碼 (#8066)
@remix-run/dev：Vite：保留從 .client 匯出的名稱 (#8200)
- 與 .server 模組不同的是，主要想法不是要防止程式碼洩漏到伺服器建置中，因為用戶端建置已經是公開的
- 相反地，目標是要將 SSR 轉譯與僅限用戶端的程式碼隔離
- 路由需要從 .client 模組匯入程式碼，而不會發生編譯失敗，然後依賴執行階段檢查來判斷程式碼是在伺服器端還是用戶端執行
- 使用空的模組取代 .client 模組會導致建置失敗，因為 ESM 具名匯入是經過靜態分析的
  - 因此，我們改為保留具名匯出，但將每個匯出值取代為空物件
  - 這樣一來，導入在建置時會是有效的，並且可以使用標準的執行階段檢查來判斷程式碼是否在伺服器端或用戶端執行
@remix-run/dev：將 @remix-run/node 新增至 Vite 的 optimizeDeps.include 陣列 (#8177)
@remix-run/dev：改善 Vite 外掛程式效能 (#8121)
- 平行處理路由模組匯出的偵測
- 停用 Vite 子編譯器中的 server.preTransformRequests，因為它只用於處理路由模組
@remix-run/dev：從內建的 Vite 開發伺服器中移除自動全域 Node Polyfill 安裝，改為允許明確選擇加入 (#8119)
- ⚠️ 這對於使用不穩定 Vite 外掛程式且沒有自訂伺服器的專案來說是重大變更
- 如果您沒有使用自訂伺服器，您應該改為在 Vite 設定中呼叫 installGlobals。
```
import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";

+installGlobals();

export default defineConfig({
  plugins: [remix()],
});
```
@remix-run/dev：Vite：當用戶端匯入 .server 預設匯出時，會在建置時發生錯誤 (#8184)
- Remix 已經先剝離 .server 檔案程式碼，然後才確保伺服器端程式碼永遠不會進入用戶端
- 當用戶端程式碼嘗試匯入伺服器端程式碼時，會導致錯誤，這正是我們想要的！
- 但這些錯誤會在預設匯入的執行階段發生
- 更好的體驗是讓這些錯誤在建置時發生，這樣您可以保證您的使用者不會遇到這些錯誤
@remix-run/dev：修正在使用 Vite 開發伺服器時的 request instanceof Request 檢查 (#8062)

更新的相依性

各套件的變更

完整變更日誌： v2.3.1...v2.4.0

v2.3.1

日期：2023-11-22

修補程式變更

@remix-run/dev：在 Vite 開發中支援 LiveReload 元件的 nonce prop (#8014)
@remix-run/dev：確保伺服器建置資產目錄中的程式碼分割 JS 檔案在 Vite 建置後不會被清除 (#8042)
@remix-run/dev：修正 Vite 建置中從 public 目錄重複複製資產的問題 (#8039)
- 這可確保靜態資產不會在伺服器建置目錄中重複
- 這也修正了當 assetsBuildDirectory 深層巢狀於 public 目錄內時，建置會中斷的問題

更新的相依性

各套件的變更

完整變更日誌： v2.3.0...v2.3.1

v2.3.0

日期：2023-11-16

變更內容

穩定 `useBlocker`

我們已從 useBlocker hook 中移除 unstable_ 前綴，因為它已使用足夠長的時間，我們對 API 很有信心。由於瀏覽器處理 window.confirm 的方式不同，導致 React Router 無法保證行為一致/正確，因此我們不打算從 unstable_usePrompt 中移除前綴。

`unstable_flushSync` API

我們已將新的 unstable_flushSync 選項新增至命令式 API (useSubmit、useNavigate、fetcher.submit、fetcher.load)，讓使用者可以選擇加入同步 DOM 更新，以用於擱置/樂觀 UI。

function handleClick() {
  submit(data, { flushSync: true });
  // Everything is flushed to the DOM so you can focus/scroll to your pending/optimistic UI
  setFocusAndOrScrollToNewlyAddedThing();
}

次要變更

從 useBlocker hook 中移除 unstable_ 前綴 (#7882)
為 useNavigate/useSubmit/fetcher.load/fetcher.submit 新增 unstable_flushSync 選項，以便退出 React.startTransition 並進入 ReactDOM.flushSync 以進行狀態更新 (#7996)

修補程式變更

@remix-run/react: 為 manifest 新增遺失的 modulepreload (#7684)
@remix-run/server-runtime: 將 cookie 依賴項從 0.4.1 更新至 0.5.0，以繼承 Chrome 中對 Priority 屬性的支援 (#6770)
@remix-run/dev: 修正 FutureConfig 類型 (#7895)
大量針對不穩定的 vite 編譯器的小修正
- 支援在 Vite 開發環境中選擇性渲染 LiveReload 元件 (#7919)
- 支援在 Vite 開發環境中於 Scripts 之後渲染 LiveReload 元件 (#7919)
- 修正使用 pnpm 的自訂伺服器中 react-refresh/babel 的解析問題 (#7904)
- 支援在 Vite 中於 .jsx 檔案中使用 JSX，而無需手動導入 React (#7888)
- 修正當存在在 development 和 production 模式之間具有不同本地狀態的外掛程式時（例如 @mdx-js/rollup）Vite 生產環境建置的問題 (#7911)
- 快取 Remix Vite 外掛程式選項的解析 (#7908)
- 支援 Vite 5 (#7846)
- 允許在 Vite 開發環境中使用除了 "development" 以外的 process.env.NODE_ENV 值 (#7980)
- 在 Vite 建置中將共用區塊的 CSS 附加到路由 (#7952)
- 讓 Vite 透過 /@fs 處理專案根目錄以外的檔案服務 (#7913)
  - 這修正了在 pnpm 專案中使用預設用戶端進入點或伺服器進入點時發生的錯誤，這些檔案可能位於專案根目錄之外，但在工作區根目錄內
  - 預設情況下，Vite 會阻止存取工作區根目錄以外（當使用工作區時）或專案根目錄以外（當不使用工作區時）的檔案，除非使用者明確透過 Vite 的 server.fs.allow 選項加入
- 改善 Vite 開發環境中 LiveReload Proxy 的效能 (#7883)
- 重複資料刪除 @remix-run/react (#7926)
  - 預先捆綁 Remix 依賴項，以避免重複的 Remix 路由器
  - 我們的 remix-react-proxy 外掛程式不會處理預設用戶端和伺服器進入點檔案，因為這些檔案來自 node_modules 內
  - 這表示在 Vite 預先捆綁依賴項之前（例如，第一次執行開發伺服器），不匹配的 Remix 路由器會導致 Error: You must render this element inside a <Remix> element 錯誤
- 修正使用 Vite 開發伺服器中的 defer 時載入時的 React Fast Refresh 錯誤 (#7842)
- 處理 Vite 開發伺服器中的多個 Set-Cookie 標頭 (#7843)
- 修正使用自訂 Express 伺服器時，在 Vite 開發環境中初始頁面載入時出現樣式未套用的內容閃爍的問題 (#7937)
- 在 Vite 開發環境中，於伺服器上從 .env 檔案填入 process.env (#7958)
- 在 Vite 建置中，將僅在伺服器建置中引用的資產發射到用戶端資產目錄 (#7892，在 8cd31d65 中挑選)

已更新的依賴項

按套件的變更

完整變更日誌: v2.2.0...v2.3.0

v2.2.0

日期：2023-10-31

變更內容

Vite!

Remix 2.2.0 為基於 Node 的應用程式新增了不穩定的 Vite 支援！請參閱我們的公告部落格文章以及 Remix 文件中的「Future > Vite」頁面，以了解更多詳細資訊。

您可以透過兩個新的（不穩定）範本立即嘗試

# minimal server
npx create-remix@latest --template remix-run/remix/templates/unstable-vite

# custom server (Express example)
npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express

@remix-run/dev 中的新 API
- unstable_vitePlugin：新的 Remix Vite 外掛程式
- unstable_createViteServer：在中間件模式下建立 Vite 伺服器，以便與自訂伺服器互通
- unstable_loadViteServerBuild：允許您的自訂伺服器在開發期間將 SSR 請求委派給 Vite
已變更的 API
- createRequestHandler：現在也允許 build 參數是一個函式，該函式將用於在開發期間為每個請求動態載入新的建置
其他執行階段
- Deno 支援未經測試，但應該可以透過 Deno 的 Node/npm 互通性運作
- CloudFlare 支援尚不可用

新的 Fetcher API

根據此 RFC，我們引入了一些新的 API，讓您可以更精細地控制您的 fetcher 行為

您現在可以透過 useFetcher({ key: string }) 指定您自己的 fetcher 識別碼，這可讓您從應用程式中的不同元件存取相同的 fetcher 實例，而無需逐層傳遞 props
Fetcher 金鑰現在在從 useFetchers 傳回的 fetcher 上公開，以便可以依 key 查閱
Form 和 useSubmit 現在支援可選的 navigate/fetcherKey props/參數，以允許在底層使用選擇性使用者指定的 key 啟動 fetcher 提交
- <Form method="post" navigate={false} fetcherKey="my-key">
- submit(data, { method: "post", navigate: false, fetcherKey: "my-key" })
- 以這種方式調用 fetcher 是短暫且無狀態的
- 如果您需要存取其中一個 fetcher 的狀態，您將需要利用 useFetchers() 或 useFetcher({ key }) 在其他位置查閱

持久性未來旗標

根據與上方相同的 RFC，我們引入了一個新的 future.v3_fetcherPersist 旗標，可讓您選擇加入新的 fetcher 持久性/清理行為。Fetcher 不會立即在卸載時清理，而是會持續存在，直到它們返回到 idle 狀態。這使得在需要卸載原始 fetcher 的情況下，pending/樂觀 UI 更加容易。

這有點像是一個長期存在的錯誤修正，因為 useFetchers() API 一直都應該只反映 pending/樂觀 UI 的執行中 fetcher 資訊 — 它並非旨在反映 fetcher 資料或在 fetcher 返回到 idle 狀態後保留 fetcher
當選擇加入此旗標時，請密切關注以下特定行為變更，並檢查您的應用程式的相容性
- 在仍然掛載時完成的 Fetcher 完成後將不再出現在 useFetchers() 中 — 它們在那裡沒有任何用途，因為您可以透過 useFetcher().data 存取資料
- 先前在執行中卸載的 Fetcher 將不會立即中止，而是在它們返回到 idle 狀態後才會清理
  - 它們在執行中時仍會透過 useFetchers 公開，因此您仍然可以在卸載後存取 pending/樂觀資料
  - 如果 fetcher 完成時不再掛載，則不會對其結果進行後處理 — 例如，不會遵循重新導向，並且錯誤不會在 UI 中冒泡
  - 但是，如果在樹狀結構中的其他位置使用相同的 key 重新掛載了 fetcher，則即使卸載了原始 fetcher，也會處理其結果

小變更

不穩定的 vite 支援 (#7590)
新的 fetcher key API 和用於導航 API 的 navigate/fetcherKey 參數 (#10960)
新的 future.v3_fetcherPersist 旗標 (#10962)

修補程式變更

@remix-run/express：允許 Express 適配器在使用 app.enable('trust proxy') 時在 Proxy 後運作 (#7323)
- 先前，這使用 req.get('host') 來建構 Remix Request，但這不遵循 X-Forwarded-Host
- 這現在使用 req.hostname，這將遵循 X-Forwarded-Host
@remix-run/react：修正當使用沒有 default 導出的路由檔案時可能會無意中記錄的警告 (#7745)
create-remix：支援具有 .tgz 副檔名的本機 tarball，這允許直接支援 pnpm pack tarball (#7649)
create-remix：將 Remix 應用程式版本預設為正在使用的 create-remix 版本 (#7670)
- 這最顯著地實現了更輕鬆地使用標籤，例如 npm create remix@nightly

已更新的依賴項

按套件的變更

完整變更日誌: v2.1.0...v2.2.0

v2.1.0

日期：2023-10-16

變更內容

檢視轉換

我們很高興發佈 Remix 中對檢視轉換 API 的實驗性支援！您現在可以觸發使用 document.startViewTransition 包裝的導航 DOM 更新，以便在您應用程式中的 SPA 導航上啟用 CSS 動畫轉換。

在 Remix 應用程式中啟用檢視轉換的最簡單方法是透過新的 <Link unstable_viewTransition> prop。這會導致導航 DOM 更新使用 document.startViewTransition 包裝，這將為 DOM 更新啟用轉換。在沒有任何額外的 CSS 樣式的情況下，您將獲得頁面的基本交叉淡化動畫。

如果您需要為動畫套用更精細的樣式，您可以利用 unstable_useViewTransitionState 鉤子，它會告訴您轉換何時正在進行，您可以使用它來套用類別或樣式

function ImageLink(to, src, alt) {
  const isTransitioning = unstable_useViewTransitionState(to);
  return (
    <Link to={to} unstable_viewTransition>
      <img
        src={src}
        alt={alt}
        style={{
          viewTransitionName: isTransitioning ? "image-expand" : "",
        }}
      />
    </Link>
  );
}

您也可以使用 <NavLink unstable_viewTransition> 簡寫，它將為您管理鉤子使用，並在轉換期間自動將 transitioning 類別新增至 <a>

a.transitioning img {
  view-transition-name: "image-expand";
}

<NavLink to={to} unstable_viewTransition>
  <img src={src} alt={alt} />
</NavLink>

如需檢視轉換的範例用法，請查看我們的分支，該分支來自 Astro Records 示範 (它使用 React Router，Remix 也是 😉)。

如需使用檢視轉換 API 的更多資訊，請參閱 Google Chrome 團隊的使用檢視轉換 API 進行平滑簡潔轉換指南。

穩定的 `createRemixStub`

經過實際體驗後，我們對 createRemixStub API 充滿信心，並準備好致力於此，因此在 2.1.0 中，我們已移除 unstable_ 前綴。

⚠️ 請注意，這確實包含一個小的重大變更 - <RemixStub remixConfigFuture> prop 已重新命名為 <RemixStub future>，以將 future prop 與特定檔案位置分離。

次要變更

新增了對 View Transition API 的不穩定支援 (#10916)
穩定了 @remix-run/testing 的 createRemixStub 輔助函式 (#7647)

修補程式變更

在 SerializeFrom 中模擬 JSON.parse(JSON.stringify(x)) 的類型 (#7605)
- 值得注意的是，在序列化後僅可指定為 undefined 的類型欄位現在會被省略，因為 JSON.stringify |> JSON.parse 會將它們省略。請參閱測試案例中的範例
- 這修正了從 v1.19 升級到 v2 時的類型錯誤
當指定 tagName 時，避免變更 meta 物件 (#7594)
修正後續客戶端導覽到 route.lazy 路由時的 FOUC 問題 (#7576)
匯出正確的 Remix useMatches 包裝函式，以修正 UIMatch 的類型定義 (#7551)
@remix-run/cloudflare - 原始碼對應會考慮輸出檔案中的特殊字元 (#7574)
@remix-run/express - 刷新 text/event-stream 回應的標頭 (#7619)

更新的依賴項

各套件的變更

完整變更記錄: v2.0.1...v2.1.0

v2.0.1

日期：2023-09-21

修補程式變更

修正使用 pnpm 時 MDX 檔案的類型 (#7491)
更新 getDependenciesToBundle 以處理沒有主要匯出的 ESM 套件 (#7272)
- 請注意，這些套件必須在其 exports 欄位中公開 package.json，以便可以解析其路徑
修正 serverBuildPath 副檔名為 .cjs 的伺服器建置問題 (#7180)
修正使用 remix-serve 和手動模式 (remix dev --manual) 的 CJS 專案的 HMR 問題 (#7487)
- 透過明確清除 require 快取，remix-serve 現在可以正確重新匯入 CJS 中的新伺服器變更
- ESM 專案已經正常運作，不受此影響。
修正部分撰寫的伺服器建置所造成的錯誤 (#7470)
- 先前，有可能在新的伺服器建置完全撰寫完成之前，觸發應用程式伺服器程式碼的重新匯入。重新匯入部分撰寫的伺服器建置導致與 build.assets 未定義相關的問題，並在讀取 build.assets.version 時崩潰
為 handle 欄位將第二個泛型新增至 UIMatch (#7464)
修正透過 route.lazy 載入的資源路由問題 (#7498)
當提交到沒有 action 的路由時，拋出語意正確的 405 ErrorResponse，而不是僅僅是 Error (#7423)
更新至最新版本的 @remix-run/web-fetch (#7477)
將檔案會話儲存 ID 產生從 crypto.randomBytes 切換到 crypto.webcrypto.getRandomValues (#7203)
使用原生 Blob 類別而不是 polyfill (#7217)

各套件的變更 🔗

完整變更記錄: v2.0.0...v2.0.1

v2.0.0

日期：2023-09-15

我們非常興奮地向您發布 Remix v2，我們真的希望這次升級是您經歷過最順暢的框架升級之一！這是我們 v2 的主要目標 - 我們旨在透過大量使用棄用警告和 Future Flags 在 Remix v1 中實現的目標。

如果您使用的是最新的 1.x 版本，並且已啟用所有 future flag 並解決所有主控台警告，那麼我們希望您已完成 90% 的 v2 升級。總會有少數我們無法置於 flag 之後的項目（例如重大類型變更），或在最後一刻出現且沒有時間在 1.x 中新增為警告或 flag 的項目。

如果您還沒有使用最新的 1.x 版本，我們建議您先升級到該版本並解決任何 flag/主控台警告

> npx upgrade-remix 1.19.3

重大變更

以下是 v2 中重大變更的非常簡潔列表。

如需有關重大變更的最完整討論，請閱讀 升級至 v2 指南。本文件提供了 v2 隨附的重大變更的全面說明，以及有關如何調整應用程式以處理這些變更的說明
如需更多詳細資訊，您可以參考以下「各套件的變更」區段

升級的依賴項需求

Remix v2 已升級其對 React 和 Node 的最低版本支援，現在正式需要

React 18 (#7121)
- 如需有關升級至 React 18 的資訊，請參閱 React 升級指南
Node 18 或更高版本 (#6939, #7292)
- 如需有關升級至 Node 18 的資訊，請參閱 Node v18 公告
- 如需有關我們何時停止支援 Node 版本的概述，請參閱 Remix 文件

已移除的 Future Flag

已移除以下 future flag，並且其行為現在為預設行為 - 您可以從 remix.config.js 檔案中移除所有這些 flag。

v2_dev - 具有 HMR+HDR 的新開發伺服器 (#7002)
- 如果您的 future.v2_dev 中有設定，而不僅僅是布林值（即 future.v2_dev.port），則您可以將它們提升到 remix.config.js 中的根 dev 物件中
v2_errorBoundary - 移除 CatchBoundary，改用單數的 ErrorBoundary (#6906)
v2_headers - 變更巢狀路由情況下 headers 的邏輯 (#6979)
v2_meta - 變更 meta() 的傳回格式 (#6958)
v2_normalizeFormMethod - 將 formMethod API 正規化為大寫 (#6875)
v2_routeConvention - 路由現在預設使用扁平路由慣例 (#6969)

重大變更/API 移除

具有棄用警告

以下列出其他重大變更/API 移除，這些變更/移除在 Remix v1 中具有棄用警告。如果您使用的是最新的 1.19.3 版本，且沒有任何主控台警告，那麼您可能已準備好使用所有這些變更！

remix.config.js
- 將 browserBuildDirectory 重新命名為 assetsBuildDirectory (#6900)
- 移除 devServerBroadcastDelay (#7063)
- 將 devServerPort 重新命名為 dev.port (000457e0)
  - 請注意，如果您在 1.x 版本中選擇加入此選項，您的設定 flag 將為 future.v2_dev.port，但在穩定的 2.x 版本中，它將為 dev.port
- 將預設 serverModuleFormat 從 cjs 變更為 esm (#6949)
- 移除 serverBuildTarget (#6896)
- 將 serverBuildDirectory 變更為 serverBuildPath (#6897)
- 預設情況下，伺服器上不再 polyfill Node 內建函式，您必須透過 serverNodeBuiltinsPolyfill 選擇加入 polyfill (#6911
@remix-run/react
- 移除 useTransition (#6870)
- 移除 fetcher.type 並扁平化 fetcher.submission (#6874)
  - <fetcher.Form method="get"> 現在更準確地歸類為 state:"loading" 而不是 state:"submitting"，以更好地與底層的 GET 請求對齊
- 需要 imagesrcset/imagesizes 的駝峰式版本 (#6936)

沒有棄用警告

很遺憾，我們未能針對每一個重大變更或 API 移除都發出棄用警告 🙃。以下是您可能需要檢視以升級至 v2 的剩餘變更清單

remix.config.js
- 預設情況下，Node 內建模組不再於瀏覽器中進行 polyfill，您必須透過 browserNodeBuiltinsPolyfill 選用 polyfill ( #7269 )
- 如果您的應用程式中存在設定檔，PostCSS/Tailwind 將預設啟用，您可以使用 postcss 和 tailwind 標記來停用此功能 ( #6909 )
@remix-run/cloudflare
- 移除 createCloudflareKVSessionStorage ( #6898 )
- 移除 @cloudflare/workers-types v2 和 v3 的支援 ( #6925 )
@remix-run/dev
- 移除 REMIX_DEV_HTTP_ORIGIN，改用 REMIX_DEV_ORIGIN ( #6963 )
- 移除 REMIX_DEV_SERVER_WS_PORT，改用 dev.port 或 --port ( #6965 )
- 移除 --no-restart/restart 標記，改用 --manual/manual ( #6962 )
- 移除 --scheme/scheme 和 --host/host，改用 REMIX_DEV_ORIGIN ( #6962 )
- 移除 codemod 指令 ( #6918 )
@remix-run/eslint-config
- 移除 @remix-run/eslint-config/jest 設定 ( #6903 )
- 移除 magic imports ESLint 警告 ( #6902 )
@remix-run/netlify
- 已移除 @remix-run/netlify 轉接器，改用 Netlify 官方轉接器 ( #7058 )
@remix-run/node
- 預設情況下不再 polyfill fetch - 應用程式必須呼叫 installGlobals() 來安裝 polyfill ( #7009 )
- fetch 和相關 API 不再從 @remix-run/node 匯出 - 應用程式應使用全域命名空間中的版本 ( #7293 )
- 應用程式必須呼叫 sourceMapSupport.install() 來設定原始碼對應支援
@remix-run/react
- 移除 unstable_shouldReload，改用 shouldRevalidate ( #6865 )
@remix-run/serve
- 如果 3000 埠已被佔用且未指定 PORT，remix-serve 會選擇一個可用的埠 ( #7278 )
- 整合 manual 模式 ( #7231 )
- 移除未公開的文件化 createApp Node API ( #7229 )
- 在 external bundle 的 remix-serve 中保留動態匯入 ( #7173 )
@remix-run/vercel
- 已移除 @remix-run/vercel 轉接器，改用 Vercel 提供的開箱即用功能 ( #7035 )
create-remix
- 停止將 isTypeScript 傳遞給 remix.init 指令碼 ( #7099 )
remix
- 移除 magic exports ( #6895 )

重大類型變更

從 future.v2_meta 類型中移除 V2_ 前綴，因為它們現在是預設行為 ( #6958 )
- V2_MetaArgs -> MetaArgs
- V2_MetaDescriptor -> MetaDescriptor
- V2_MetaFunction -> MetaFunction
- V2_MetaMatch -> MetaMatch
- V2_MetaMatches -> MetaMatches
- V2_ServerRuntimeMetaArgs -> ServerRuntimeMetaArgs
- V2_ServerRuntimeMetaDescriptor -> ServerRuntimeMetaDescriptor
- V2_ServerRuntimeMetaFunction -> ServerRuntimeMetaFunction
- V2_ServerRuntimeMetaMatch -> ServerRuntimeMetaMatch
- V2_ServerRuntimeMetaMatches -> ServerRuntimeMetaMatches
調整以下類型，使其優先選擇 unknown 而非 any，並與基礎 React Router 類型對齊 ( #7319 )
- 將 useMatches() 傳回類型從 RouteMatch 重新命名為 UIMatch
- 將 LoaderArgs/ActionArgs 重新命名為 LoaderFunctionArgs/ActionFunctionArgs
- AppData 從 any 變更為 unknown
- Location["state"] (useLocation.state) 從 any 變更為 unknown
- UIMatch["data"] (useMatches()[i].data) 從 any 變更為 unknown
- UIMatch["handle"] (useMatches()[i].handle) 從 { [k: string]: any } 變更為 unknown
- Fetcher["data"] (useFetcher().data) 從 any 變更為 unknown
- MetaMatch.handle (用於 meta() 中) 從 any 變更為 unknown
- AppData/RouteHandle 不再匯出，因為它們只是 unknown 的別名

新功能

新的 create-remix CLI ( #6887 )
- 最值得注意的是，這移除了選擇範本/堆疊的下拉式選單，改用 --template 標記和我們不斷增加的可用範本清單
- 新增了新的 --overwrite 標記 ( #7062 )
- 支援 bun 套件管理員 ( #7074 )
透過 build.mode 偵測建置模式 ( #6964 )
支援透過 serverNodeBuiltinsPolyfill.globals/browserNodeBuiltinsPolyfill.globals polyfill node 全域變數 ( #7269 )
新的 redirectDocument 實用程式，可透過全新的文件載入進行重新導向 ( #7040, #6842 )
將 error 新增至 meta 參數，以便您可以呈現錯誤標題等 ( #7105 )
unstable_createRemixStub 現在支援在存根 Remix 路由上新增 meta/links 函式 ( #7186 )
- unstable_createRemixStub 不再支援路由上的 element/errorElement 屬性。您必須使用 Component/ErrorBoundary 來符合您將從 Remix 路由模組匯出的內容。

其他值得注意的變更

Remix 現在內部使用 React Router 的 route.lazy 方法，在導覽時載入路由模組 ( #7133 )
移除 @remix-run/node 中的 atob/btoa polyfill，改用內建版本 ( #7206 )
將 @remix-run/dev 套件與 @remix-run/css-bundle 套件的內容分離 ( #6982 )
- @remix-run/css-bundle 套件的內容現在完全由 Remix 編譯器管理。即使仍然建議您的 Remix 相依性都共用相同的版本，此變更仍可確保在升級 @remix-run/dev 而不升級 @remix-run/css-bundle 時不會發生執行階段錯誤。
如果 3000 埠已被佔用，remix-serve 現在會選擇一個可用的埠 ( #7278 )
- 如果設定 PORT 環境變數，remix-serve 將使用該埠
- 否則，remix-serve 會選擇一個可用的埠 (除非 3000 已被佔用，否則為 3000)

Remix 版本

v2.15.2

修補程式變更

更新的相依性

v2.15.1

修補程式變更

v2.15.0

修補程式變更

v2.14.0

小幅度變更

修補程式變更

更新的相依性

依套件變更

v2.13.1

修補程式變更

v2.13.0

變更內容

穩定化的 API

小變更

修補程式變更

更新的依賴項

依套件的變更

v2.12.1

修補程式變更

依套件的變更

v2.12.0

變更內容

自動依賴項最佳化（不穩定）的未來標記

改進的 Single Fetch 類型安全（不穩定）

Single Fetch 重新驗證行為的更新（不穩定）

小變更

修補程式變更

更新的依賴項

各套件的變更

v2.11.2

修補程式變更

更新的依賴項

各套件的變更

v2.11.1

修補程式變更

各套件的變更

v2.11.0

變更內容

將 unstable_fogOfWar 未來標誌重新命名為 unstable_lazyRouteDiscovery（不穩定）

移除單一 Fetch 中的 response Stub（不穩定）

次要變更

修補程式變更

更新的依賴項

各套件的變更

v2.10.3

修補程式變更

更新的依賴項

各套件的變更

v2.10.2

修補程式變更

各套件的變更

v2.10.1

修補程式變更

更新的依賴項

各套件變更

v2.10.0

變更內容

延遲路由探索（又稱「戰爭迷霧」）

次要變更

修補程式變更

更新的相依性

各套件變更

v2.9.2

變更內容

更新單一提取的類型安全

修補程式變更

更新的相依性

各套件變更

v2.9.1

修補程式變更

各套件變更

v2.9.0

變更內容

單一提取（不穩定）

Undici

將 `unstable_fogOfWar` 未來標誌重新命名為 `unstable_lazyRouteDiscovery`（不穩定）

移除單一 Fetch 中的 `response` Stub（不穩定）

新的 `Layout` 輸出

`future.v3_relativeSplatPath`

穩定 `useBlocker`

`unstable_flushSync` API