Skip to content

Scope Vite dev exports in dev/vite entry #11904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions .changeset/angry-papayas-flow.md
Original file line number Diff line number Diff line change
@@ -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";
```
2 changes: 1 addition & 1 deletion .changeset/remove-manifest-option.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions docs/guides/prerendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion integration/flat-routes-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
7 changes: 2 additions & 5 deletions integration/helpers/vite-cloudflare-template/vite.config.ts
Original file line number Diff line number Diff line change
@@ -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()],
});
2 changes: 1 addition & 1 deletion integration/helpers/vite-template/vite.config.ts
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
8 changes: 4 additions & 4 deletions integration/helpers/vite.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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()
],
Expand Down
4 changes: 2 additions & 2 deletions integration/single-fetch-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}),
],
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-absolute-base-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}/",
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-basename-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 + '",' : ""}
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-build-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
8 changes: 4 additions & 4 deletions integration/vite-cloudflare-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
],
}
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-css-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-dev-custom-entry-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-dev-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-dot-server-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion integration/vite-hmr-hdr-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-manifests-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-plugin-order-validation-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions integration/vite-prerender-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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 },
Expand Down
2 changes: 1 addition & 1 deletion integration/vite-presets-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down
2 changes: 1 addition & 1 deletion integration/vite-server-bundles-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 })}
Expand Down
20 changes: 10 additions & 10 deletions integration/vite-spa-mode-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 })],
Expand Down Expand Up @@ -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 })],
Expand Down Expand Up @@ -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 })],
Expand Down Expand Up @@ -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 })],
Expand All @@ -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 })],
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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 })],
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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 },
Expand Down
Loading