vite-plugin-vercel 0.2.1 → 0.3.0

package/README.md

@@ -1,68 +1,152 @@
 # vite-plugin-vercel
 
-This is a **Work In Progress** Vercel adapter for [`vite`](https://vitejs.dev/).
+Vercel adapter for [`vite`](https://vitejs.dev/).
 
 Its purpose is to help you bundle your application in `.vercel` folder as supported by
 [Vercel API v3](https://vercel.com/docs/build-output-api/v3).
 
 ## Features
 
-- [x] [SSG/Static files support](https://vercel.com/docs/build-output-api/v3#vercel-primitives/static-files)
-  - see [`prerender` config](/packages/vercel/src/types.ts#L33)
-- [x] [SSR/Serverless functions support](https://vercel.com/docs/build-output-api/v3#vercel-primitives/serverless-functions)
+- [x] [SSG/Static files support](https://vercel.com/docs/build-output-api/v3/primitives#static-files)
+  - see [`prerender` config](/packages/vercel/src/types.ts#L37)
+- [x] [SSR/Serverless functions support](https://vercel.com/docs/build-output-api/v3/primitives#serverless-functions)
   - `.[jt]s` files under the `<root>/api` folder of your project are automatically bundled as Serverless functions under `.vercel/output/functions/api/*.func`
-  - see [`additionalEndpoints` config](/packages/vercel/src/types.ts#L54)
-- [x] [ISR/Prerender functions support](https://vercel.com/docs/build-output-api/v3#vercel-primitives/prerender-functions)
-  - see [`isr` config](/packages/vercel/src/types.ts#L81). Also see implementation of [vite-plugin-ssr](/packages/vite-plugin-ssr/vite-plugin-ssr.ts) for example
-- [x] [Edge functions support](https://vercel.com/docs/build-output-api/v3#vercel-primitives/edge-functions)
-- [ ] [Images optimization support](https://vercel.com/docs/build-output-api/v3#build-output-configuration/supported-properties/images)
-- [ ] [Preview mode support](https://vercel.com/docs/build-output-api/v3#features/preview-mode)
-- [x] [Advanced config override](/packages/vercel/src/types.ts#L15)
+  - see [`additionalEndpoints` config](/packages/vercel/src/types.ts#L62)
+- [x] [ISR/Prerender functions support](https://vercel.com/docs/build-output-api/v3/primitives#prerender-functions)
+  - see [`isr` config](/packages/vercel/src/types.ts#L89). Also see implementation of [vite-plugin-ssr](/packages/vike-integration/vite-plugin-ssr.ts) for example
+- [x] [Edge functions support](https://vercel.com/docs/build-output-api/v3/primitives#edge-functions)
+- [ ] [Images optimization support](https://vercel.com/docs/build-output-api/v3/configuration#images)
+- [ ] [Preview mode support](https://vercel.com/docs/build-output-api/v3/features#preview-mode)
+- [x] [Advanced config override](/packages/vercel/src/types.ts#L19)
   - [ ] Complete config override
 
-## Usage
+## Simple usage
 
-First, make sure `ENABLE_VC_BUILD=1` is declared as an Environment Variable in your deployment configuration.
-
-Then, install this package as a dev dependency and add it to your Vite config like this:
+Then, install this package as a dev dependency and add it to your Vite config:
 
 ```ts
+// vite.config.ts
 import { defineConfig } from 'vite';
 import vercel from 'vite-plugin-vercel';
-import ssr from 'vite-plugin-ssr/plugin';
 
 export default defineConfig({
-  plugins: [ssr(), vercel()],
+  plugins: [vercel()],
+  vercel: {
+    // optional configuration options, see below for details
+  },
 });
 ```
 
-### Usage with vite-plugin-ssr
+## Usage with vite-plugin-ssr
+
+[vite-plugin-ssr](https://vite-plugin-ssr.com/) is supported through [@vite-plugin-vercel/vike](/packages/vike-integration/README.md) plugin.
 
-[vite-plugin-ssr](https://vite-plugin-ssr.com/) is supported through [@magne4000/vite-plugin-vercel-ssr](/packages/vite-plugin-ssr/README.md) plugin.
+You only need to install `@vite-plugin-vercel/vike`, the config stays the same as above.
 
-Install `@magne4000/vite-plugin-vercel-ssr` package, and update your vite config:
+> [!IMPORTANT]  
+> `@vite-plugin-vercel/vike` supersedes the old `@magne4000/vite-plugin-vercel-ssr` package.
+> As such, you should remove `@magne4000/vite-plugin-vercel-ssr` from your package.json and vite config file.
+
+## Advanced usage
 
 ```ts
 // vite.config.ts
 import { defineConfig } from 'vite';
-import ssr from 'vite-plugin-ssr/plugin';
 import vercel from 'vite-plugin-vercel';
-import vercelSsr from '@magne4000/vite-plugin-vercel-ssr';
 
-export default defineConfig(async ({ command, mode }) => {
-  return {
-    plugins: [ssr(), vercel(), vercelSsr()],
-    vercel: {
-      // Tweak what you need, check TS definition for details
+export default defineConfig({
+  plugins: [vercel()],
+  vercel: {
+    // All the followings optional
+
+    /**
+     * How long Functions should be allowed to run for every request, in seconds.
+     * If left empty, default value for your plan will be used.
+     */
+    defaultMaxDuration: 30,
+    /**
+     * Default expiration time (in seconds) for prerender functions.
+     * Defaults to 86400 seconds (24h).
+     */
+    expiration: 86400,
+    /**
+     * Also known as Server Side Generation, or SSG.
+     * If present, this function is responsible to create static files in `.vercel/output/static`.
+     * Defaults to `false`, which disables prerendering.
+     */
+    prerender(resolvedConfig) {
+      // Check `/packages/vite-plugin-ssr/vite-plugin-ssr.ts` `prerender` for an example
     },
-  };
+    /**
+     * See https://vercel.com/docs/projects/project-configuration#rewrites
+     */
+    rewrites: [{ source: '/about', destination: '/about-our-company.html' }],
+    /**
+     * See https://vercel.com/docs/projects/project-configuration#redirects
+     */
+    redirects: [
+      { source: '/me', destination: '/profile.html', permanent: false },
+    ],
+    /**
+     * See https://vercel.com/docs/projects/project-configuration#cleanurls
+     */
+    cleanUrls: true,
+    /**
+     * See https://vercel.com/docs/projects/project-configuration#trailingslash
+     */
+    trailingSlash: true,
+    /**
+     * By default, all `api/*` endpoints are compiled under `.vercel/output/functions/api/*.func`.
+     * If others serverless functions need to be compiled under `.vercel/output/functions`, they should be added here.
+     * For instance, a framework can leverage this to have a generic ssr endpoint
+     * without requiring the user to write any code.
+     */
+    additionalEndpoints: [
+      {
+        // can also be an Object representing an esbuild StdinOptions
+        source: '/path/to/file.ts',
+        // URL path of the handler, will be generated to `.vercel/output/functions/api/file.func/index.js`
+        destination: '/api/file',
+      },
+    ],
+    /**
+     * Advanced configuration to override .vercel/output/config.json
+     * See https://vercel.com/docs/build-output-api/v3/configuration#configuration
+     */
+    config: {
+      // routes?: Route[];
+      // images?: ImagesConfig;
+      // wildcard?: WildcardConfig;
+      // overrides?: OverrideConfig;
+      // cache?: string[];
+      // crons?: CronsConfig;
+    },
+    /**
+     * ISR and SSG pages are mutually exclusive. If a page is found in both, ISR prevails.
+     * Keys are path relative to .vercel/output/functions directory, either without extension,
+     * or with `.prerender-config.json` extension.
+     * If you have multiple isr configurations pointing to the same underlying function, you can leverage the `symlink`
+     * property.
+     *
+     * Can be an object or a function returning an object (or a Promise of an object).
+     *
+     * Check `/packages/vite-plugin-ssr/vite-plugin-ssr.ts` `vitePluginVercelVpsIsrPlugin` for advanced usage.
+     */
+    isr: {
+      // `symlink: 'ssr_'` means that a function is available under `.vercel/output/functions/ssr_.func`
+      '/pages/a': { expiration: 15, symlink: 'ssr_', route: '^/a/.*$' },
+      '/pages/b/c': { expiration: 15, symlink: 'ssr_', route: '^/b/c/.*$' },
+      '/pages/d': { expiration: 15, symlink: 'ssr_', route: '^/d$' },
+      '/pages/e': { expiration: 25 },
+    },
+    /**
+     * Defaults to `.vercel/output`. Mostly useful for testing purpose
+     */
+    outDir: '.vercel/output',
+  },
 });
 ```
 
-### Config
-
-See [TS types](/packages/vercel/src/types.ts#L15) for details.
-
 ## Demo
 
 https://test-vite-vercel-plugin.vercel.app/

package/dist/index.cjs

@@ -487,22 +487,22 @@ async function getIsrConfig(resolvedConfig) {
 var import_path5 = __toESM(require("path"), 1);
 function vercelPlugin() {
   let resolvedConfig;
-  let vpsFound = false;
+  let vikeFound = false;
   return {
     apply: "build",
     name: "vite-plugin-vercel",
     enforce: "post",
     configResolved(config) {
       resolvedConfig = config;
-      vpsFound = resolvedConfig.plugins.some(
-        (p) => p.name.startsWith("vite-plugin-ssr:")
+      vikeFound = resolvedConfig.plugins.some(
+        (p) => p.name.match("^vite-plugin-ssr:|^vike:")
       );
     },
     async writeBundle() {
       var _a;
       if (!((_a = resolvedConfig.build) == null ? void 0 : _a.ssr)) {
         await cleanOutputDirectory(resolvedConfig);
-        if (vpsFound) {
+        if (vikeFound) {
           return;
         }
       }
@@ -555,6 +555,15 @@ async function getStaticHtmlFiles(src) {
   }
   return htmlFiles;
 }
-function allPlugins() {
-  return [vercelPlugin()];
+async function tryImportVpvv() {
+  try {
+    await import("vite-plugin-ssr/plugin");
+    const vpvv = await import("@vite-plugin-vercel/vike");
+    return vpvv.default();
+  } catch (e) {
+    return null;
+  }
+}
+function allPlugins(options = {}) {
+  return [vercelPlugin(), options.smart !== false ? tryImportVpvv() : null];
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ResolvedConfig, Plugin } from 'vite';
+import { ResolvedConfig, PluginOption } from 'vite';
 import { StdinOptions, BuildOptions } from 'esbuild';
 import { z } from 'zod';
 import { Rewrite, Redirect } from '@vercel/routing-utils';
@@ -521,8 +521,8 @@ type ViteVercelRedirect = Redirect & {
 };
 interface ViteVercelConfig {
     /**
-     * How long Functions should be allowed to run for every request in seconds.
-     * If left empty, default value for your plan will is used.
+     * How long Functions should be allowed to run for every request, in seconds.
+     * If left empty, default value for your plan will be used.
      */
     defaultMaxDuration?: number;
     /**
@@ -534,10 +534,26 @@ interface ViteVercelConfig {
     expiration?: number;
     /**
      * Also known as Server Side Generation, or SSG.
-     * If present, must build static files in `.vercel/output/static`.
-     * Can be set to `false` to disable prerendering completely.
+     * If present, this function is responsible to create static files in `.vercel/output/static`.
+     * Defaults to `false`, which disables prerendering.
      */
     prerender?: ViteVercelPrerenderFn | false;
+    /**
+     * @see {@link https://vercel.com/docs/projects/project-configuration#rewrites}
+     */
+    rewrites?: ViteVercelRewrite[];
+    /**
+     * @see {@link https://vercel.com/docs/projects/project-configuration#redirects}
+     */
+    redirects?: ViteVercelRedirect[];
+    /**
+     * @see {@link https://vercel.com/docs/projects/project-configuration#cleanurls}
+     */
+    cleanUrls?: boolean;
+    /**
+     * @see {@link https://vercel.com/docs/projects/project-configuration#trailingslash}
+     */
+    trailingSlash?: boolean;
     /**
      * By default, all `api/*` endpoints are compiled under `.vercel/output/functions/api/*.func`.
      * If others serverless functions need to be compiled under `.vercel/output/functions`, they should be added here.
@@ -558,14 +574,10 @@ interface ViteVercelConfig {
      * }
      * ```
      */
-    rewrites?: ViteVercelRewrite[];
-    redirects?: ViteVercelRedirect[];
-    cleanUrls?: boolean;
-    trailingSlash?: boolean;
     additionalEndpoints?: ViteVercelApiEntry[];
     /**
      * Advanced configuration to override .vercel/output/config.json
-     * @see {@link https://vercel.com/docs/build-output-api/v3#build-output-configuration}
+     * @see {@link https://vercel.com/docs/build-output-api/v3/configuration#configuration}
      * @protected
      */
     config?: Partial<Omit<VercelOutputConfig, 'version'>>;
@@ -629,6 +641,8 @@ interface ViteVercelApiEntry {
     edge?: boolean;
 }
 
-declare function allPlugins(): Plugin[];
+declare function allPlugins(options?: {
+    smart?: boolean;
+}): PluginOption[];
 
 export { VercelOutputConfig, VercelOutputIsr, VercelOutputPrerenderConfig, VercelOutputVcConfig, ViteVercelApiEntry, ViteVercelConfig, ViteVercelPrerenderFn, ViteVercelPrerenderRoute, ViteVercelRedirect, ViteVercelRewrite, allPlugins as default };

package/dist/index.js

@@ -453,22 +453,22 @@ async function getIsrConfig(resolvedConfig) {
 import path5 from "path";
 function vercelPlugin() {
   let resolvedConfig;
-  let vpsFound = false;
+  let vikeFound = false;
   return {
     apply: "build",
     name: "vite-plugin-vercel",
     enforce: "post",
     configResolved(config) {
       resolvedConfig = config;
-      vpsFound = resolvedConfig.plugins.some(
-        (p) => p.name.startsWith("vite-plugin-ssr:")
+      vikeFound = resolvedConfig.plugins.some(
+        (p) => p.name.match("^vite-plugin-ssr:|^vike:")
       );
     },
     async writeBundle() {
       var _a;
       if (!((_a = resolvedConfig.build) == null ? void 0 : _a.ssr)) {
         await cleanOutputDirectory(resolvedConfig);
-        if (vpsFound) {
+        if (vikeFound) {
           return;
         }
       }
@@ -521,8 +521,17 @@ async function getStaticHtmlFiles(src) {
   }
   return htmlFiles;
 }
-function allPlugins() {
-  return [vercelPlugin()];
+async function tryImportVpvv() {
+  try {
+    await import("vite-plugin-ssr/plugin");
+    const vpvv = await import("@vite-plugin-vercel/vike");
+    return vpvv.default();
+  } catch (e) {
+    return null;
+  }
+}
+function allPlugins(options = {}) {
+  return [vercelPlugin(), options.smart !== false ? tryImportVpvv() : null];
 }
 export {
   allPlugins as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-vercel",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "files": [
     "dist",
@@ -21,23 +21,33 @@
   "repository": "https://github.com/magne4000/vite-plugin-vercel",
   "license": "MIT",
   "peerDependencies": {
-    "vite": "^4.2.0"
+    "vite": "^4.2.0",
+    "vite-plugin-ssr": "*",
+    "@vite-plugin-vercel/vike": "0.3.1"
+  },
+  "peerDependenciesMeta": {
+    "@vite-plugin-vercel/vike": {
+      "optional": true
+    },
+    "vite-plugin-ssr": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@types/node": "^16.18.37",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "eslint": "^8.43.0",
+    "@types/node": "^16.18.48",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.48.0",
     "tsup": "^6.7.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.3.9"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   },
   "dependencies": {
     "@brillout/libassert": "^0.5.8",
     "@vercel/routing-utils": "^2.2.1",
     "esbuild": "^0.17.19",
-    "fast-glob": "^3.3.0",
-    "zod": "^3.21.4"
+    "fast-glob": "^3.3.1",
+    "zod": "^3.22.2"
   },
   "scripts": {
     "build": "tsup",