Merge branch 'dev' into fix/respect-hostname-when-behind-proxy

remix-run · Oct 23, 2023 · a3c2c0e · a3c2c0e
2 parents e480ccf + 882f370
commit a3c2c0e
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 21 deletions.
diff --git a/docs/future/vite.md b/docs/future/vite.md
@@ -27,9 +27,9 @@ To get started with Vite in an existing Remix project (or a new one created with
 npm install -D vite
 ```
 
-Then add `vite.config.mjs` to the project root, providing the Remix plugin to the `plugins` array:
+Then add `vite.config.ts` to the project root, providing the Remix plugin to the `plugins` array:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
@@ -52,7 +52,7 @@ The Vite plugin accepts the following subset of Remix config options:
 
 For example:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
@@ -83,10 +83,51 @@ vite build && vite build --ssr
 
 Since Vite is now responsible for bundling your app, there are some differences between Vite and the Remix compiler that you'll need to be aware of.
 
+### `<LiveReload />` before `<Scripts />`
+
+During initial unstable release, the Remix Vite plugin assumes that `<LiveReload />` component comes _before_ `<Scripts />` so that React Fast Refresh initialization from `<Live Reload />` happens first.
+If `<Scripts />` comes before `<Live Reload />`, [React Fast Refresh will not be able to perform HMR][rfr-preamble].
+
+```diff
+// app/root.tsx
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
++        <LiveReload />
+        <Scripts />
+-        <LiveReload />
+      </body>
+    </html>
+  );
+}
+```
+
+Before releasing as stable, we will redesign these APIs to make this ordering irrelevant.
+
 ### New Bundling Features
 
 Vite has many [features][vite-features] and [plugins][vite-plugins] that are not built into the Remix compiler. Any use of these features will break backwards compatibility with the Remix compiler and should only be used if you intend to use Vite exclusively.
 
+### TypeScript
+
+Add `vite/client` types in a `.d.ts` file. We recommend replacing the existing `remix.env.d.ts` file with a new `env.d.ts` file:
+
+```ts
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />
+```
+
 ### Path Aliases
 
 The Remix compiler leverages the `paths` option in your `tsconfig.json` to resolve path aliases. This is commonly used in the Remix community to define `~` as an alias for the `app` directory.
@@ -99,7 +140,7 @@ npm install -D vite-tsconfig-paths
 
 Then add it to your Vite config:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
@@ -111,7 +152,7 @@ export default defineConfig({
 
 Alternatively, you can define path aliases without referencing `tsconfig.json` by using Vite's [`resolve.alias`][vite-resolve-alias] option directly:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import { fileURLToPath, URL } from "node:url";
 
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
@@ -153,7 +194,7 @@ If you're using Vite and the Remix compiler in the same project, you can enable
 
 <docs-info>This option is only intended for use during the transition to Vite and will be removed in the future.</docs-info>
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
@@ -232,7 +273,7 @@ npm install -D @vanilla-extract/vite-plugin
 
 Then add the plugin to your Vite config:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
@@ -252,7 +293,7 @@ npm install -D @mdx-js/rollup
 
 Then add the Rollup plugin to your Vite config:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import mdx from "@mdx-js/rollup";
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
@@ -274,7 +315,7 @@ npm install -D remark-frontmatter remark-mdx-frontmatter
 
 Then provide these plugins to the MDX Rollup plugin:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import mdx from "@mdx-js/rollup";
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import remarkFrontmatter from "remark-frontmatter";
@@ -296,7 +337,7 @@ export default defineConfig({
 
 In the Remix compiler, the frontmatter export was named `attributes`. This differs from the frontmatter plugin's default export name of `frontmatter`. To maintain backwards compatibility with the Remix compiler, you can override this via the `name` option:
 
-```js filename=vite.config.mjs
+```ts filename=vite.config.ts
 import mdx from "@mdx-js/rollup";
 import { unstable_vitePlugin as remix } from "@remix-run/dev";
 import remarkFrontmatter from "remark-frontmatter";
@@ -518,3 +559,4 @@ We're definitely late to the Vite party, but we're excited to be here now!
 [solidstart]: https://start.solidjs.com/getting-started/what-is-solidstart
 [sveltekit]: https://kit.svelte.dev/
 [supported-with-some-deprecations]: #mdx
+[rfr-preamble]: https://github.com/facebook/react/issues/16604#issuecomment-528663101
diff --git a/integration/vite-build-test.ts b/integration/vite-build-test.ts
@@ -20,7 +20,7 @@ test.describe("Vite build", () => {
           throw new Error("Remix should not access remix.config.js when using Vite");
           export default {};
         `,
-        "vite.config.mjs": js`
+        "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
 

diff --git a/integration/vite-css-build-test.ts b/integration/vite-css-build-test.ts
@@ -23,7 +23,7 @@ test.describe("Vite CSS build", () => {
           throw new Error("Remix should not access remix.config.js when using Vite");
           export default {};
         `,
-        "vite.config.mjs": js`
+        "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
 

diff --git a/integration/vite-css-dev-test.ts b/integration/vite-css-dev-test.ts
@@ -27,14 +27,11 @@ test.describe("Vite CSS dev", () => {
           throw new Error("Remix should not access remix.config.js when using Vite");
           export default {};
         `,
-        "vite.config.mjs": js`
+        "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
 
           export default defineConfig({
-            optimizeDeps: {
-              include: ["react", "react-dom/client"],
-            },
             server: {
               port: ${devPort},
               strictPort: true,

diff --git a/integration/vite-css-legacy-build-test.ts b/integration/vite-css-legacy-build-test.ts
@@ -23,7 +23,7 @@ test.describe("Vite CSS legacy imports build", () => {
           throw new Error("Remix should not access remix.config.js when using Vite");
           export default {};
         `,
-        "vite.config.mjs": js`
+        "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
 

diff --git a/integration/vite-dev-test.ts b/integration/vite-dev-test.ts
@@ -24,14 +24,11 @@ test.describe("Vite dev", () => {
           throw new Error("Remix should not access remix.config.js when using Vite");
           export default {};
         `,
-        "vite.config.mjs": js`
+        "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
 
           export default defineConfig({
-            optimizeDeps: {
-              include: ["react", "react-dom/client"],
-            },
             server: {
               port: ${devPort},
               strictPort: true,

diff --git a/packages/remix-dev/vite/plugin.ts b/packages/remix-dev/vite/plugin.ts
@@ -404,6 +404,21 @@ export const remixVitePlugin: RemixVitePlugin = (options = {}) => {
         return {
           appType: "custom",
           experimental: { hmrPartialAccept: true },
+          optimizeDeps: {
+            include: [
+              // pre-bundle React dependencies to avoid React duplicates,
+              // even if React dependencies are not direct dependencies
+              // https://react.dev/warnings/invalid-hook-call-warning#duplicate-react
+              "react",
+              `react/jsx-runtime`,
+              `react/jsx-dev-runtime`,
+              "react-dom/client",
+            ],
+          },
+          resolve: {
+            // https://react.dev/warnings/invalid-hook-call-warning#duplicate-react
+            dedupe: ["react", "react-dom"],
+          },
           ...(viteCommand === "build" && {
             base: pluginConfig.publicPath,
             build: {