feat: add @netlify/vite-plugin-tanstack-start (#455)

* feat: add `@netlify/vite-plugin-tanstack-start`

This adds a framework-agnostic Vite build plugin that prepares a Vite app for deployment to Netlify. It expects that the
Vite app has an `ssr` environment (and no other server environments to deploy) that has exactly one bundle entry and
that this entry is a server request entry point, a module with a default export containing a Web Fetch handler under the
`fetch` property. TanStack Start meets all these conditions.

This build plugin can be opted into via the intentionally private, undocumented `build.enabled` option, passed into
`@netlify/vite-plugin`.

This also adds a new `@netlify/vite-plugin-tanstack-start` which just wraps `@netlify/vite-plugin` with this enabled.

At the moment, this only supports TanStack Start `alpha`, but this will be released imminently (presumably v.1.132 or
so). As such, it inherits its requirements:
- Vite 7+
- Node.js 22.12.0+

* chore: try a longer hook timeout

* refactor: remove unnecessary internal dep

* fix(docs): fix incorrect options in readme

* fix(types): add clearer private callout

* chore: fix potential e2e deploy helper issue

* ci: try even higher timeout for Windows

* chore: try npm for e2e fixture install

pnpm seems to be problematic on Windows CI...

* fix: revert vite plugin type fix for now

We'll do this in a separate PR to be safe.

* chore: actually use npm correctly in deploy helper.

follow-up to d117f25

You can't use `overrides` for a direct dependency unless the values are identical...

* fix: handle duplicate instances of our plugin

Because we now have framework-specific plugins that load our generic plugin, we should make sure
nothing bad happens if a user also includes our generic plugin directly.

I went down a few different paths here and this ended up seeming like the best approach: just warn
when we detect multiple instances in dev. Build is tricky because by design our plugin will be
instantiated once per environment (e.g. client + ssr). And it ends up generally not being a problem
if it's duplicated in build anyway, just dev.

* chore: better error logging for failed e2e deploy

* chore: fix e2e deploy bug

* chore: actually bump e2e timeout

math is hard

* chore: improve e2e deploy logging

* chore: try even higher Windows e2e timeout

* test: skip tanstack plugin Windows tests for now

also fix technically incorrect node version check

Author: serhalp

.github/workflows/release-please.yaml

@@ -209,6 +209,17 @@ jobs:
           fi
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+      - if:
+          ${{ steps.release.outputs['packages/vite-plugin-tanstack-start--release_created'] || github.event_name ==
+          'workflow_dispatch' }}
+        run: |
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
+            npm publish packages/vite-plugin-tanstack-start/ --provenance --access=public || true
+          else
+            npm publish packages/vite-plugin-tanstack-start/ --provenance --access=public
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
       - if: ${{ steps.release.outputs['packages/otel--release_created'] || github.event_name == 'workflow_dispatch' }}
         run: |
           if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then

.github/workflows/test.yaml

@@ -57,6 +57,8 @@ jobs:
         run: npm run build --workspaces=true
       - name: Tests
         run: npm run test --workspaces=true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
   test-node18:
     name: Test Node.js 18 for specific packages
     runs-on: ${{ matrix.os }}

.prettierignore

@@ -1,4 +1,5 @@
 .circleci
 dist
 coverage
-CHANGELOG.md
+CHANGELOG.md
+**/fixtures/*

.release-please-manifest.json

@@ -15,5 +15,6 @@
   "packages/runtime-utils": "2.1.0",
   "packages/static": "3.0.10",
   "packages/types": "2.0.3",
-  "packages/vite-plugin": "2.5.10"
+  "packages/vite-plugin": "2.5.10",
+  "packages/vite-plugin-tanstack-start": "0.0.0"
 }

README.md

@@ -27,21 +27,22 @@ npm run dev
 
 ## Packages
 
-| Name                                                | Description                                                             | Version                                                                                                                         |
-| --------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| 🤖 [@netlify/ai](packages/ai)                       | TypeScript utilities for interacting with Netlify AI features           | [![npm version](https://img.shields.io/npm/v/@netlify/ai.svg)](https://www.npmjs.com/package/@netlify/ai)                       |
-| 🗄️ [@netlify/blobs](packages/blobs)                 | TypeScript client for Netlify Blobs                                     | [![npm version](https://img.shields.io/npm/v/@netlify/blobs.svg)](https://www.npmjs.com/package/@netlify/blobs)                 |
-| 💾 [@netlify/cache](packages/cache)                 | TypeScript utilities for interacting with the Netlify cache             | [![npm version](https://img.shields.io/npm/v/@netlify/cache.svg)](https://www.npmjs.com/package/@netlify/cache)                 |
-| 🛠️ [@netlify/dev](packages/dev)                     | Emulation of the Netlify environment for local development              | [![npm version](https://img.shields.io/npm/v/@netlify/dev.svg)](https://www.npmjs.com/package/@netlify/dev)                     |
-| 🔧 [@netlify/dev-utils](packages/dev-utils)         | TypeScript utilities for the local emulation of the Netlify environment | [![npm version](https://img.shields.io/npm/v/@netlify/dev-utils.svg)](https://www.npmjs.com/package/@netlify/dev-utils)         |
-| ⚡ [@netlify/functions](packages/functions)         | TypeScript utilities for interacting with Netlify Functions             | [![npm version](https://img.shields.io/npm/v/@netlify/functions.svg)](https://www.npmjs.com/package/@netlify/functions)         |
-| 📋 [@netlify/headers](packages/headers)             | TypeScript implementation of Netlify's headers engine                   | [![npm version](https://img.shields.io/npm/v/@netlify/headers.svg)](https://www.npmjs.com/package/@netlify/headers)             |
-| 🖼️ [@netlify/images](packages/images)               | TypeScript utilities for interacting with Netlify Image CDN             | [![npm version](https://img.shields.io/npm/v/@netlify/images.svg)](https://www.npmjs.com/package/@netlify/images)               |
-| 🚀 [@netlify/nuxt](packages/nuxt-module)            | Nuxt module with a local emulation of the Netlify environment           | [![npm version](https://img.shields.io/npm/v/@netlify/nuxt.svg)](https://www.npmjs.com/package/@netlify/nuxt)                   |
-| 🔍 [@netlify/otel](packages/otel)                   | TypeScript utilities to interact with Netlify's OpenTelemetry           | [![npm version](https://img.shields.io/npm/v/@netlify/otel.svg)](https://www.npmjs.com/package/@netlify/otel)                   |
-| 🔄 [@netlify/redirects](packages/redirects)         | TypeScript implementation of Netlify's rewrites and redirects engine    | [![npm version](https://img.shields.io/npm/v/@netlify/redirects.svg)](https://www.npmjs.com/package/@netlify/redirects)         |
-| 🏛️ [@netlify/runtime](packages/runtime)             | Netlify compute runtime                                                 | [![npm version](https://img.shields.io/npm/v/@netlify/runtime.svg)](https://www.npmjs.com/package/@netlify/runtime)             |
-| 🔨 [@netlify/runtime-utils](packages/runtime-utils) | Cross-environment utilities for the Netlify runtime                     | [![npm version](https://img.shields.io/npm/v/@netlify/runtime-utils.svg)](https://www.npmjs.com/package/@netlify/runtime-utils) |
-| 📁 [@netlify/static](packages/static)               | TypeScript implementation of Netlify's static file serving logic        | [![npm version](https://img.shields.io/npm/v/@netlify/static.svg)](https://www.npmjs.com/package/@netlify/static)               |
-| 🔢 [@netlify/types](packages/types)                 | TypeScript types for Netlify platform primitives                        | [![npm version](https://img.shields.io/npm/v/@netlify/types.svg)](https://www.npmjs.com/package/@netlify/types)                 |
-| 🔌 [@netlify/vite-plugin](packages/vite-plugin)     | Vite plugin with a local emulation of the Netlify environment           | [![npm version](https://img.shields.io/npm/v/@netlify/vite-plugin.svg)](https://www.npmjs.com/package/@netlify/vite-plugin)     |
+| Name                                                                          | Description                                                             | Version                                                                                                                                    |
+| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| 🤖 [@netlify/ai](packages/ai)                                                 | TypeScript utilities for interacting with Netlify AI features           | [![npm version](https://img.shields.io/npm/v/@netlify/ai.svg)](https://www.npmjs.com/package/@netlify/ai)                                  |
+| 🗄️ [@netlify/blobs](packages/blobs)                                           | TypeScript client for Netlify Blobs                                     | [![npm version](https://img.shields.io/npm/v/@netlify/blobs.svg)](https://www.npmjs.com/package/@netlify/blobs)                            |
+| 💾 [@netlify/cache](packages/cache)                                           | TypeScript utilities for interacting with the Netlify cache             | [![npm version](https://img.shields.io/npm/v/@netlify/cache.svg)](https://www.npmjs.com/package/@netlify/cache)                            |
+| 🛠️ [@netlify/dev](packages/dev)                                               | Emulation of the Netlify environment for local development              | [![npm version](https://img.shields.io/npm/v/@netlify/dev.svg)](https://www.npmjs.com/package/@netlify/dev)                                |
+| 🔧 [@netlify/dev-utils](packages/dev-utils)                                   | TypeScript utilities for the local emulation of the Netlify environment | [![npm version](https://img.shields.io/npm/v/@netlify/dev-utils.svg)](https://www.npmjs.com/package/@netlify/dev-utils)                    |
+| ⚡ [@netlify/functions](packages/functions)                                   | TypeScript utilities for interacting with Netlify Functions             | [![npm version](https://img.shields.io/npm/v/@netlify/functions.svg)](https://www.npmjs.com/package/@netlify/functions)                    |
+| 📋 [@netlify/headers](packages/headers)                                       | TypeScript implementation of Netlify's headers engine                   | [![npm version](https://img.shields.io/npm/v/@netlify/headers.svg)](https://www.npmjs.com/package/@netlify/headers)                        |
+| 🖼️ [@netlify/images](packages/images)                                         | TypeScript utilities for interacting with Netlify Image CDN             | [![npm version](https://img.shields.io/npm/v/@netlify/images.svg)](https://www.npmjs.com/package/@netlify/images)                          |
+| 🚀 [@netlify/nuxt](packages/nuxt-module)                                      | Nuxt module with a local emulation of the Netlify environment           | [![npm version](https://img.shields.io/npm/v/@netlify/nuxt.svg)](https://www.npmjs.com/package/@netlify/nuxt)                              |
+| 🔍 [@netlify/otel](packages/otel)                                             | TypeScript utilities to interact with Netlify's OpenTelemetry           | [![npm version](https://img.shields.io/npm/v/@netlify/otel.svg)](https://www.npmjs.com/package/@netlify/otel)                              |
+| 🔄 [@netlify/redirects](packages/redirects)                                   | TypeScript implementation of Netlify's rewrites and redirects engine    | [![npm version](https://img.shields.io/npm/v/@netlify/redirects.svg)](https://www.npmjs.com/package/@netlify/redirects)                    |
+| 🏛️ [@netlify/runtime](packages/runtime)                                       | Netlify compute runtime                                                 | [![npm version](https://img.shields.io/npm/v/@netlify/runtime.svg)](https://www.npmjs.com/package/@netlify/runtime)                        |
+| 🔨 [@netlify/runtime-utils](packages/runtime-utils)                           | Cross-environment utilities for the Netlify runtime                     | [![npm version](https://img.shields.io/npm/v/@netlify/runtime-utils.svg)](https://www.npmjs.com/package/@netlify/runtime-utils)            |
+| 📁 [@netlify/static](packages/static)                                         | TypeScript implementation of Netlify's static file serving logic        | [![npm version](https://img.shields.io/npm/v/@netlify/static.svg)](https://www.npmjs.com/package/@netlify/static)                          |
+| 🔢 [@netlify/types](packages/types)                                           | TypeScript types for Netlify platform primitives                        | [![npm version](https://img.shields.io/npm/v/@netlify/types.svg)](https://www.npmjs.com/package/@netlify/types)                            |
+| 🔌 [@netlify/vite-plugin](packages/vite-plugin)                               | Vite plugin with a local emulation of the Netlify environment           | [![npm version](https://img.shields.io/npm/v/@netlify/vite-plugin.svg)](https://www.npmjs.com/package/@netlify/vite-plugin)                |
+| 🔌 [@netlify/vite-plugin-tanstack-start](packages/vite-plugin-tanstack-start) | Vite plugin for TanStack Start on Netlify                               | [![npm version](https://img.shields.io/npm/v/@netlify/vite-plugin.svg)](https://www.npmjs.com/package/@netlify/vite-plugin-tanstack-start) |

eslint.config.js

@@ -22,6 +22,9 @@ export default tseslint.config(
   // Global rules and configuration
   includeIgnoreFile(path.resolve(__dirname, '.gitignore')),
   ...packageIgnores,
+  {
+    ignores: ['**/fixtures/*'],
+  },
   {
     // Uses its own eslint setup
     ignores: ['packages/nuxt-module/'],

package-lock.json

@@ -19,6 +19,7 @@
     "packages/ai",
     "packages/nuxt-module",
     "packages/vite-plugin",
+    "packages/vite-plugin-tanstack-start",
     "packages/otel"
   ],
   "version": "0.0.0",

package.json

@@ -13,3 +13,5 @@ export const netlifyCommand = ansis.cyanBright
 export const netlifyCyan = ansis.rgb(40, 180, 170)
 
 export const netlifyBanner = netlifyCyan('⬥ Netlify')
+
+export const warning = (message: string): string => ansis.yellow(`⚠ Warning: ${message}`)

packages/dev-utils/src/lib/logger.ts

@@ -8,7 +8,7 @@ export { headers, toMultiValueHeaders } from './lib/headers.js'
 export { getGlobalConfigStore, GlobalConfigStore, resetConfigCache } from './lib/global-config.js'
 export { Handler } from './lib/handler.js'
 export { LocalState } from './lib/local-state.js'
-export { type Logger, netlifyCommand, netlifyCyan, netlifyBanner } from './lib/logger.js'
+export { type Logger, netlifyCommand, netlifyCyan, netlifyBanner, warning } from './lib/logger.js'
 export { memoize, MemoizeCache } from './lib/memoize.js'
 export { killProcess, type ProcessRef } from './lib/process.js'
 export { HTTPServer } from './server/http_server.js'