Stabilize Vite plugin, Cloudflare preset, and related types (remix-ru…

…n#8713)

.changeset/serious-lizards-prove.md

@@ -0,0 +1,7 @@
+---
+"@remix-run/dev": minor
+---
+
+Vite: Stabilize the Remix Vite plugin, Cloudflare preset, and all related types by removing all `unstable_` / `Unstable_` prefixes.
+
+While this is a breaking change for existing Remix Vite plugin consumers, now that the plugin has stabilized, there will no longer be any breaking changes outside of a major release. Thank you to all of our early adopters and community contributors for helping us get here! 🙏

docs/future/presets.md

@@ -1,8 +1,8 @@
 ---
-title: Presets (Unstable)
+title: Presets
 ---
 
-# Presets (Unstable)
+# Presets
 
 The [Remix Vite plugin][remix-vite] supports a `presets` option to ease integration with other tools and hosting providers.
 
@@ -19,8 +19,8 @@ Presets are designed to be published to npm and used within your Vite config. Fo
 
 ```ts filename=vite.config.ts lines=[3,11]
 import {
-  unstable_vitePlugin as remix,
-  unstable_cloudflarePreset as cloudflare,
+  vitePlugin as remix,
+  cloudflarePreset as cloudflare,
 } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import { getBindingsProxy } from "wrangler";
@@ -41,10 +41,10 @@ export default defineConfig({
 
 ## Creating a preset
 
-Presets conform to the following `Unstable_Preset` type:
+Presets conform to the following `Preset` type:
 
 ```ts
-type Unstable_Preset = {
+type Preset = {
   name: string;
 
   remixConfig?: () =>
@@ -62,7 +62,7 @@ type Unstable_Preset = {
 As a basic example, let's create a preset that configures a [server bundles function][server-bundles]:
 
 ```ts filename=my-cool-preset.ts
-import type { Unstable_Preset as Preset } from "@remix-run/dev";
+import type { Preset } from "@remix-run/dev";
 
 export function myCoolPreset(): Preset {
   return {
@@ -90,8 +90,8 @@ In our example preset, the `serverBundles` function could be overridden with a d
 
 ```ts filename=my-cool-preset.ts lines=[22-26]
 import type {
-  Unstable_Preset as Preset,
-  Unstable_ServerBundlesFunction as ServerBundlesFunction,
+  Preset,
+  ServerBundlesFunction,
 } from "@remix-run/dev";
 
 const serverBundles: ServerBundlesFunction = ({

docs/future/server-bundles.md

@@ -1,8 +1,8 @@
 ---
-title: Server Bundles (Unstable)
+title: Server Bundles
 ---
 
-# Server Bundles (Unstable)
+# Server Bundles
 
 <docs-warning>This is an advanced feature designed for hosting provider integrations. When compiling your app into multiple server bundles, there will need to be a custom routing layer in front of your app directing requests to the correct bundle.</docs-warning>
 
@@ -13,7 +13,7 @@ The provided `serverBundles` function is called for each route in the tree (exce
 For each route, this function is passed an array of routes leading to and including that route, referred to as the route `branch`. This allows you to create server bundles for different portions of the route tree. For example, you could use this to create a separate server bundle containing all routes within a particular layout route:
 
 ```ts filename=vite.config.ts lines=[7-15]
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
 export default defineConfig({

docs/future/spa-mode.md

@@ -41,7 +41,7 @@ Or, you can manually opt-into SPA mode in your Remix+Vite app by setting `ssr: f
 
 ```js
 // vite.config.ts
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
 export default defineConfig({

docs/future/vite.md

@@ -1,8 +1,8 @@
 ---
-title: Vite (Unstable)
+title: Vite
 ---
 
-# Vite (Unstable)
+# Vite
 
 [Vite][vite] is a powerful, performant and extensible development environment for JavaScript projects. In order to improve and extend Remix's bundling capabilities, we now support Vite as an alternative compiler. In the future, Vite will become the default compiler for Remix.
 
@@ -12,13 +12,13 @@ We've got a few different Vite-based templates to get you started.
 
 ```shellscript nonumber
 # Minimal server:
-npx create-remix@latest --template remix-run/remix/templates/unstable-vite
+npx create-remix@latest --template remix-run/remix/templates/vite
 
 # Express:
-npx create-remix@latest --template remix-run/remix/templates/unstable-vite-express
+npx create-remix@latest --template remix-run/remix/templates/vite-express
 
 # Cloudflare:
-npx create-remix@latest --template remix-run/remix/templates/unstable-vite-cloudflare
+npx create-remix@latest --template remix-run/remix/templates/vite-cloudflare
 ```
 
 These templates include a `vite.config.ts` file which is where the Remix Vite plugin is configured.
@@ -30,7 +30,7 @@ The Vite plugin does not use [`remix.config.js`][remix-config]. Instead, the plu
 For example, to configure `ignoredRouteFiles`:
 
 ```ts filename=vite.config.ts lines=[7]
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -90,10 +90,10 @@ You may also want to enable the `manifest` option since, when server bundles are
 
 ## Cloudflare
 
-To get started with Cloudflare, you can use the [`unstable-vite-cloudflare`][template-vite-cloudflare] template:
+To get started with Cloudflare, you can use the [`vite-cloudflare`][template-vite-cloudflare] template:
 
 ```shellscript nonumber
-npx create-remix@latest --template remix-run/remix/templates/unstable-vite-cloudflare
+npx create-remix@latest --template remix-run/remix/templates/vite-cloudflare
 ```
 
 There are two ways to run your Cloudflare app locally:
@@ -118,8 +118,8 @@ Remix's Cloudflare preset accepts Wrangler's `getBindingsProxy` function to simu
 
 ```ts filename=vite.config.ts lines=[6,11]
 import {
-  unstable_vitePlugin as remix,
-  unstable_cloudflarePreset as cloudflare,
+  vitePlugin as remix,
+  cloudflarePreset as cloudflare,
 } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import { getBindingsProxy } from "wrangler";
@@ -199,8 +199,8 @@ The Cloudflare preset accepts a `getRemixDevLoadContext` function whose return v
 
 ```ts filename=vite.config.ts lines=[9,16]
 import {
-  unstable_vitePlugin as remix,
-  unstable_cloudflarePreset as cloudflare,
+  vitePlugin as remix,
+  cloudflarePreset as cloudflare,
 } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
@@ -347,7 +347,7 @@ Remix is now just a Vite plugin, so you'll need to hook it up to Vite.
 👉 **Replace `remix.config.js` with `vite.config.ts` at the root of your Remix app**
 
 ```ts filename=vite.config.ts
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -464,7 +464,7 @@ You'll also need to update to the new build output paths, which are `build/serve
 👉 **Install global Node polyfills in your Vite config**
 
 ```diff filename=vite.config.ts
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 +import { installGlobals } from "@remix-run/node";
 import { defineConfig } from "vite";
 
@@ -584,8 +584,8 @@ The Remix Vite plugin only officially supports [Cloudflare Pages][cloudflare-pag
 
 ```ts filename=vite.config.ts lines=[3,6,11,14-18]
 import {
-  unstable_vitePlugin as remix,
-  unstable_cloudflarePreset as cloudflare,
+  vitePlugin as remix,
+  cloudflarePreset as cloudflare,
 } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import { getBindingsProxy } from "wrangler";
@@ -670,7 +670,7 @@ npm install -D vite-tsconfig-paths
 👉 **Add `vite-tsconfig-paths` to your Vite config**
 
 ```ts filename=vite.config.ts lines=[3,6]
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
@@ -785,7 +785,7 @@ npm install -D @vanilla-extract/vite-plugin
 👉 **Add the Vanilla Extract plugin to your Vite config**
 
 ```ts filename=vite.config.ts lines=[2,6]
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
 
@@ -815,7 +815,7 @@ In this case, that means putting the MDX plugin _before_ the Remix plugin.
 
 ```ts filename=vite.config.ts lines=[1,6]
 import mdx from "@mdx-js/rollup";
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -837,7 +837,7 @@ npm install -D remark-frontmatter remark-mdx-frontmatter
 
 ```ts filename=vite.config.ts lines=[3-4,9-14]
 import mdx from "@mdx-js/rollup";
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import { defineConfig } from "vite";
@@ -1003,7 +1003,7 @@ Remember that you can always check the [Vite performance docs][vite-perf] for mo
 To visualize and analyze your bundle, you can use the [rollup-plugin-visualizer][rollup-plugin-visualizer] plugin:
 
 ```ts filename=vite.config.ts
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { visualizer } from "rollup-plugin-visualizer";
 
 export default defineConfig({
@@ -1075,7 +1075,7 @@ We currently recommend excluding the plugin when used with other Vite-based tool
 For Vitest:
 
 ```ts filename=vite.config.ts lines=[7,12-13]
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig, loadEnv } from "vite";
 
 export default defineConfig({
@@ -1091,7 +1091,7 @@ export default defineConfig({
 For Storybook:
 
 ```ts filename=vite.config.ts lines=[7]
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 
 const isStorybook = process.argv[1]?.includes("storybook");
@@ -1203,7 +1203,7 @@ Finally, we were inspired by how other frameworks implemented Vite support:
 We're definitely late to the Vite party, but we're excited to be here now!
 
 [vite]: https://vitejs.dev
-[template-vite-cloudflare]: https://github.com/remix-run/remix/tree/main/templates/unstable-vite-cloudflare
+[template-vite-cloudflare]: https://github.com/remix-run/remix/tree/main/templates/vite-cloudflare
 [remix-config]: ../file-conventions/remix-config
 [app-directory]: ../file-conventions/remix-config#appdirectory
 [future]: ../file-conventions/remix-config#future

integration/helpers/vite-template/vite.config.ts

@@ -1,4 +1,4 @@
-import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 

integration/helpers/vite.ts

@@ -26,7 +26,7 @@ export const viteConfig = {
   },
   basic: async (args: { port: number }) => {
     return dedent`
-      import { unstable_vitePlugin as remix } from "@remix-run/dev";
+      import { vitePlugin as remix } from "@remix-run/dev";
 
       export default {
         ${await viteConfig.server(args)}

integration/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 { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import { vitePlugin as remix } from "@remix-run/dev";
 
           export default defineConfig({
             plugins: [remix({ ssr: false })],
@@ -53,7 +53,7 @@ test.describe("SPA Mode", () => {
         let cwd = await createProject({
           "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import { vitePlugin as remix } from "@remix-run/dev";
 
           export default defineConfig({
             plugins: [remix({ ssr: false })],
@@ -82,7 +82,7 @@ test.describe("SPA Mode", () => {
         let cwd = await createProject({
           "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import { vitePlugin as remix } from "@remix-run/dev";
 
           export default defineConfig({
             plugins: [remix({ ssr: false })],
@@ -154,7 +154,7 @@ test.describe("SPA Mode", () => {
         let cwd = await createProject({
           "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import { vitePlugin as remix } from "@remix-run/dev";
 
           export default defineConfig({
             plugins: [remix({ ssr: false })],
@@ -183,7 +183,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { unstable_vitePlugin as remix } from "@remix-run/dev";
+            import { vitePlugin as remix } from "@remix-run/dev";
 
             export default defineConfig({
               plugins: [remix({ ssr: false })],
@@ -229,7 +229,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { unstable_vitePlugin as remix } from "@remix-run/dev";
+            import { vitePlugin as remix } from "@remix-run/dev";
 
             export default defineConfig({
               plugins: [remix({ ssr: false })],
@@ -271,7 +271,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { unstable_vitePlugin as remix } from "@remix-run/dev";
+            import { vitePlugin as remix } from "@remix-run/dev";
 
             export default defineConfig({
               plugins: [remix({
@@ -350,7 +350,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { unstable_vitePlugin as remix } from "@remix-run/dev";
+            import { vitePlugin as remix } from "@remix-run/dev";
 
             export default defineConfig({
               plugins: [remix({ ssr: false })],
@@ -483,7 +483,7 @@ test.describe("SPA Mode", () => {
         files: {
           "vite.config.ts": js`
             import { defineConfig } from "vite";
-            import { unstable_vitePlugin as remix } from "@remix-run/dev";
+            import { vitePlugin as remix } from "@remix-run/dev";
 
             export default defineConfig({
               build: { manifest: true },

integration/vite-basename-test.ts

@@ -65,7 +65,7 @@ async function viteConfigFile({
   basename?: string;
 }) {
   return js`
-    import { unstable_vitePlugin as remix } from "@remix-run/dev";
+    import { vitePlugin as remix } from "@remix-run/dev";
 
     export default {
       ${base !== "/" ? 'base: "' + base + '",' : ""}

integration/vite-build-test.ts

@@ -28,7 +28,7 @@ test.describe("Vite build", () => {
         `,
         "vite.config.ts": js`
           import { defineConfig } from "vite";
-          import { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import { vitePlugin as remix } from "@remix-run/dev";
           import mdx from "@mdx-js/rollup";
 
           export default defineConfig({

integration/vite-cloudflare-test.ts

@@ -46,8 +46,8 @@ const files: Files = async ({ port }) => ({
   ),
   "vite.config.ts": dedent`
     import {
-      unstable_vitePlugin as remix,
-      unstable_cloudflarePreset as cloudflare,
+      vitePlugin as remix,
+      cloudflarePreset as cloudflare,
     } from "@remix-run/dev";
     import { getBindingsProxy } from "wrangler";
     import { getLoadContext } from "./get-load-context";

integration/vite-css-test.ts

@@ -151,7 +151,7 @@ const files = {
 };
 
 const VITE_CONFIG = async (port: number) => dedent`
-  import { unstable_vitePlugin as remix } from "@remix-run/dev";
+  import { vitePlugin as remix } from "@remix-run/dev";
   import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
   export default {