Scope Vite dev exports in dev/vite entry (#11904)

remix-run · Aug 19, 2024 · 8540316 · 8540316
1 parent e85f691
commit 8540316
Show file tree

Hide file tree

Showing 33 changed files with 104 additions and 85 deletions.
diff --git a/.changeset/angry-papayas-flow.md b/.changeset/angry-papayas-flow.md
@@ -0,0 +1,17 @@
+---
+"@react-router/dev": major
+---
+
+For Remix consumers migrating to React Router, the `vitePlugin` and `cloudflareDevProxyVitePlugin` exports have been renamed and nested under `@react-router/dev/vite` to remove the `vitePlugin` naming convention .
+
+```diff
+-import {
+-  vitePlugin as remix,
+-  cloudflareDevProxyVitePlugin,
+-} from "@remix/dev";
+
++import {
++  reactRouter,
++  cloudflareDevProxy,
++} from "@react-router/dev/vite";
+```
diff --git a/.changeset/remove-manifest-option.md b/.changeset/remove-manifest-option.md
@@ -9,7 +9,7 @@ The `manifest` option been superseded by the more powerful `buildEnd` hook since
 If you were using the `manifest` option, you can replace it with a `buildEnd` hook that writes the manifest to disk like this:
 
 ```js
-import { vitePlugin as reactRouter } from "@react-router/dev";
+import { reactRouter } from "@react-router/dev/vite";
 import { writeFile } from "node:fs/promises";
 
 export default {

diff --git a/docs/guides/prerendering.md b/docs/guides/prerendering.md
@@ -20,7 +20,7 @@ This is still something that could be done entirely in userland, but it's be so
 To enable pre-rendering, add the `prerender` option to your React Router Vite plugin to tell React Router which paths to pre-render:
 
 ```ts filename=vite.config.ts
-import { vitePlugin as reactRouter } from "@remix-run/dev";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -35,7 +35,7 @@ export default defineConfig({
 `prerender` can also be a function, which allows you to dynamically generate the paths -- after fetching blog posts from your CMS for example:
 
 ```ts filename=vite.config.ts
-import { vitePlugin as reactRouter } from "@remix-run/dev";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({

diff --git a/integration/flat-routes-test.ts b/integration/flat-routes-test.ts
@@ -20,7 +20,7 @@ test.describe("flat routes", () => {
       files: {
         "vite.config.js": `
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
             plugins: [reactRouter({

diff --git a/integration/helpers/vite-cloudflare-template/vite.config.ts b/integration/helpers/vite-cloudflare-template/vite.config.ts
@@ -1,9 +1,6 @@
-import {
-  vitePlugin as reactRouter,
-  cloudflareDevProxyVitePlugin as reactRouterCloudflareDevProxy,
-} from "@react-router/dev";
+import { reactRouter, cloudflareDevProxy } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [reactRouterCloudflareDevProxy(), reactRouter()],
+  plugins: [cloudflareDevProxy(), reactRouter()],
 });
diff --git a/integration/helpers/vite-template/vite.config.ts b/integration/helpers/vite-template/vite.config.ts
@@ -1,4 +1,4 @@
-import { vitePlugin as reactRouter } from "@react-router/dev";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 

diff --git a/integration/helpers/vite.ts b/integration/helpers/vite.ts
@@ -14,7 +14,7 @@ import glob from "glob";
 import dedent from "dedent";
 import type { Page } from "@playwright/test";
 import { test as base, expect } from "@playwright/test";
-import type { VitePluginConfig } from "@react-router/dev";
+import type { ReactRouterConfig } from "@react-router/dev/vite";
 
 const require = createRequire(import.meta.url);
 
@@ -42,19 +42,19 @@ export const viteConfig = {
     fsAllow?: string[];
     spaMode?: boolean;
   }) => {
-    let pluginOptions: VitePluginConfig = {
+    let config: ReactRouterConfig = {
       ssr: !args.spaMode,
     };
 
     return dedent`
-      import { vitePlugin as reactRouter } from "@react-router/dev";
+      import { reactRouter } from "@react-router/dev/vite";
       import { envOnlyMacros } from "vite-env-only";
       import tsconfigPaths from "vite-tsconfig-paths";
 
       export default {
         ${await viteConfig.server(args)}
         plugins: [
-          reactRouter(${JSON.stringify(pluginOptions)}),
+          reactRouter(${JSON.stringify(config)}),
           envOnlyMacros(),
           tsconfigPaths()
         ],

diff --git a/integration/single-fetch-test.ts b/integration/single-fetch-test.ts
@@ -1356,10 +1356,10 @@ test.describe("single-fetch", () => {
         ...files,
         "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as remix } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
           export default defineConfig({
             plugins: [
-              remix({
+              reactRouter({
                 basename: '/base',
               }),
             ],

diff --git a/integration/vite-absolute-base-test.ts b/integration/vite-absolute-base-test.ts
@@ -6,7 +6,7 @@ import { test, viteConfig } from "./helpers/vite.js";
 
 let files: Files = async ({ port }) => ({
   "vite.config.ts": dedent`
-    import { vitePlugin as reactRouter } from "@react-router/dev";
+    import { reactRouter } from "@react-router/dev/vite";
     
     export default {
       base: "http://localhost:${port}/",

diff --git a/integration/vite-basename-test.ts b/integration/vite-basename-test.ts
@@ -65,7 +65,7 @@ async function viteConfigFile({
   basename?: string;
 }) {
   return js`
-    import { vitePlugin as reactRouter } from "@react-router/dev";
+    import { reactRouter } from "@react-router/dev/vite";
 
     export default {
       ${base !== "/" ? 'base: "' + base + '",' : ""}

diff --git a/integration/vite-build-test.ts b/integration/vite-build-test.ts
@@ -25,7 +25,7 @@ test.beforeAll(async () => {
     `,
     "vite.config.ts": js`
       import { defineConfig } from "vite";
-      import { vitePlugin as reactRouter } from "@react-router/dev";
+      import { reactRouter } from "@react-router/dev/vite";
       import mdx from "@mdx-js/rollup";
 
       export default defineConfig({

diff --git a/integration/vite-cloudflare-test.ts b/integration/vite-cloudflare-test.ts
@@ -7,15 +7,15 @@ import { test, viteConfig } from "./helpers/vite.js";
 const files: Files = async ({ port }) => ({
   "vite.config.ts": `
     import {
-      vitePlugin as reactRouter,
-      cloudflareDevProxyVitePlugin as reactRouterCloudflareDevProxy,
-    } from "@react-router/dev";
+      reactRouter,
+      cloudflareDevProxy,
+    } from "@react-router/dev/vite";
     import { getLoadContext } from "./load-context";
 
     export default {
       ${await viteConfig.server({ port })}
       plugins: [
-        reactRouterCloudflareDevProxy({ getLoadContext }),
+        cloudflareDevProxy({ getLoadContext }),
         reactRouter(),
       ],
     }

diff --git a/integration/vite-css-test.ts b/integration/vite-css-test.ts
@@ -151,7 +151,7 @@ const files = {
 };
 
 const VITE_CONFIG = async (port: number) => dedent`
-  import { vitePlugin as reactRouter } from "@react-router/dev";
+  import { reactRouter } from "@react-router/dev/vite";
   import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
   export default {

diff --git a/integration/vite-dev-custom-entry-test.ts b/integration/vite-dev-custom-entry-test.ts
@@ -18,7 +18,7 @@ test.describe("Vite custom entry dev", () => {
       files: {
         "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
             server: {

diff --git a/integration/vite-dev-test.ts b/integration/vite-dev-test.ts
@@ -20,7 +20,7 @@ test.describe("Vite dev", () => {
       files: {
         "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
           import mdx from "@mdx-js/rollup";
 
           export default defineConfig({

diff --git a/integration/vite-dot-server-test.ts b/integration/vite-dot-server-test.ts
@@ -217,7 +217,7 @@ test.describe("Vite / non-route / server-only module referenced by client", () =
 test.describe("Vite / server-only escape hatch", async () => {
   let files: Files = async ({ port }) => ({
     "vite.config.ts": dedent`
-      import { vitePlugin as reactRouter } from "@react-router/dev";
+      import { reactRouter } from "@react-router/dev/vite";
       import { envOnlyMacros } from "vite-env-only";
       import tsconfigPaths from "vite-tsconfig-paths";
 

diff --git a/integration/vite-hmr-hdr-test.ts b/integration/vite-hmr-hdr-test.ts
@@ -61,7 +61,7 @@ test("Vite / HMR & HDR / mdx", async ({ page, dev }) => {
   let files: Files = async ({ port }) => ({
     "vite.config.ts": `
       import { defineConfig } from "vite";
-      import { vitePlugin as reactRouter } from "@react-router/dev";
+      import { reactRouter } from "@react-router/dev/vite";
       import mdx from "@mdx-js/rollup";
 
       export default defineConfig({

diff --git a/integration/vite-manifests-test.ts b/integration/vite-manifests-test.ts
@@ -52,7 +52,7 @@ test.describe(() => {
   test.beforeAll(async () => {
     cwd = await createProject({
       "vite.config.ts": dedent(js`
-        import { vitePlugin as reactRouter } from "@react-router/dev";
+        import { reactRouter } from "@react-router/dev/vite";
 
         export default {
           build: { manifest: true },

diff --git a/integration/vite-plugin-order-validation-test.ts b/integration/vite-plugin-order-validation-test.ts
@@ -10,7 +10,7 @@ test.describe(() => {
   test.beforeAll(async () => {
     cwd = await createProject({
       "vite.config.ts": dedent`
-        import { vitePlugin as reactRouter } from "@react-router/dev";
+        import { reactRouter } from "@react-router/dev/vite";
         import mdx from "@mdx-js/rollup";
 
         export default {

diff --git a/integration/vite-prerender-test.ts b/integration/vite-prerender-test.ts
@@ -13,7 +13,7 @@ import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 let files = {
   "vite.config.ts": js`
     import { defineConfig } from "vite";
-    import { vitePlugin as reactRouter } from "@react-router/dev";
+    import { reactRouter } from "@react-router/dev/vite";
 
     export default defineConfig({
       build: { manifest: true },
@@ -157,7 +157,7 @@ test.describe("Prerendering", () => {
         ...files,
         "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
             build: { manifest: true },

diff --git a/integration/vite-presets-test.ts b/integration/vite-presets-test.ts
@@ -11,7 +11,7 @@ const js = String.raw;
 
 const files = {
   "vite.config.ts": dedent(js`
-    import { vitePlugin as reactRouter } from "@react-router/dev";
+    import { reactRouter } from "@react-router/dev/vite";
     import fs from "node:fs/promises";
     import serializeJs from "serialize-javascript";
 

diff --git a/integration/vite-server-bundles-test.ts b/integration/vite-server-bundles-test.ts
@@ -121,7 +121,7 @@ test.describe(() => {
     port = await getPort();
     cwd = await createProject({
       "vite.config.ts": dedent(js`
-        import { vitePlugin as reactRouter } from "@react-router/dev";
+        import { reactRouter } from "@react-router/dev/vite";
 
         export default {
           ${await viteConfig.server({ port })}

diff --git a/integration/vite-spa-mode-test.ts b/integration/vite-spa-mode-test.ts
@@ -22,7 +22,7 @@ test.describe("SPA Mode", () => {
         let cwd = await createProject({
           "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
             plugins: [reactRouter({ ssr: false })],
@@ -53,7 +53,7 @@ test.describe("SPA Mode", () => {
         let cwd = await createProject({
           "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
             plugins: [reactRouter({ ssr: false })],
@@ -82,7 +82,7 @@ test.describe("SPA Mode", () => {
         let cwd = await createProject({
           "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
             plugins: [reactRouter({ ssr: false })],
@@ -154,7 +154,7 @@ test.describe("SPA Mode", () => {
         let cwd = await createProject({
           "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { vitePlugin as reactRouter } from "@react-router/dev";
+          import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
             plugins: [reactRouter({ ssr: false })],
@@ -181,7 +181,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { vitePlugin as reactRouter } from "@react-router/dev";
+            import { reactRouter } from "@react-router/dev/vite";
 
             export default defineConfig({
               plugins: [reactRouter({ ssr: false })],
@@ -226,7 +226,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { vitePlugin as reactRouter } from "@react-router/dev";
+            import { reactRouter } from "@react-router/dev/vite";
 
             export default defineConfig({
               plugins: [reactRouter({
@@ -304,7 +304,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { vitePlugin as reactRouter } from "@react-router/dev";
+            import { reactRouter } from "@react-router/dev/vite";
 
             export default defineConfig({
               plugins: [reactRouter({ ssr: false })],
@@ -490,7 +490,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { vitePlugin as reactRouter } from "@react-router/dev";
+            import { reactRouter } from "@react-router/dev/vite";
 
             export default defineConfig({
               plugins: [reactRouter({
@@ -573,7 +573,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { vitePlugin as reactRouter } from "@react-router/dev";
+            import { reactRouter } from "@react-router/dev/vite";
 
             export default defineConfig({
               plugins: [reactRouter({
@@ -643,7 +643,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { vitePlugin as reactRouter } from "@react-router/dev";
+            import { reactRouter } from "@react-router/dev/vite";
 
             export default defineConfig({
               build: { manifest: true },