@netlify/vite-plugin-react-router 0.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog

package/LICENSE

@@ -0,0 +1,16 @@
+MIT License
+
+Copyright (c) Netlify Inc. 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or
+substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# React Router Adapter for Netlify
+
+The React Router Adapter for Netlify allows you to deploy your [React Router](https://reactrouter.com) app to
+[Netlify Functions](https://docs.netlify.com/functions/overview/).
+
+To deploy a React Router 7+ site to Netlify, install this package:
+
+## How to use
+
+```sh
+npm install @netlify/vite-plugin-react-router
+```
+
+and include the Netlify plugin in your `vite.config.ts`:
+
+```typescript
+import { reactRouter } from '@react-router/dev/vite'
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import netlifyPlugin from '@netlify/vite-plugin-react-router' // <- add this
+
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    tsconfigPaths(),
+    netlifyPlugin(), // <- add this
+  ],
+})
+```

package/dist/index.d.mts

@@ -0,0 +1,29 @@
+import { ServerBuild, AppLoadContext } from 'react-router';
+import { Context } from '@netlify/functions';
+import { Plugin } from 'vite';
+
+type LoadContext = AppLoadContext & Context;
+/**
+ * A function that returns the value to use as `context` in route `loader` and
+ * `action` functions.
+ *
+ * You can think of this as an escape hatch that allows you to pass
+ * environment/platform-specific values through to your loader/action.
+ */
+type GetLoadContextFunction = (request: Request, context: Context) => Promise<LoadContext> | LoadContext;
+type RequestHandler = (request: Request, context: LoadContext) => Promise<Response | void>;
+/**
+ * Given a build and a callback to get the base loader context, this returns
+ * a Netlify Function handler (https://docs.netlify.com/functions/overview/) which renders the
+ * requested path. The loader context in this lifecycle will contain the Netlify Functions context
+ * fields merged in.
+ */
+declare function createRequestHandler({ build, mode, getLoadContext, }: {
+    build: ServerBuild;
+    mode?: string;
+    getLoadContext?: GetLoadContextFunction;
+}): RequestHandler;
+
+declare function netlifyPlugin(): Plugin;
+
+export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import { ServerBuild, AppLoadContext } from 'react-router';
+import { Context } from '@netlify/functions';
+import { Plugin } from 'vite';
+
+type LoadContext = AppLoadContext & Context;
+/**
+ * A function that returns the value to use as `context` in route `loader` and
+ * `action` functions.
+ *
+ * You can think of this as an escape hatch that allows you to pass
+ * environment/platform-specific values through to your loader/action.
+ */
+type GetLoadContextFunction = (request: Request, context: Context) => Promise<LoadContext> | LoadContext;
+type RequestHandler = (request: Request, context: LoadContext) => Promise<Response | void>;
+/**
+ * Given a build and a callback to get the base loader context, this returns
+ * a Netlify Function handler (https://docs.netlify.com/functions/overview/) which renders the
+ * requested path. The loader context in this lifecycle will contain the Netlify Functions context
+ * fields merged in.
+ */
+declare function createRequestHandler({ build, mode, getLoadContext, }: {
+    build: ServerBuild;
+    mode?: string;
+    getLoadContext?: GetLoadContextFunction;
+}): RequestHandler;
+
+declare function netlifyPlugin(): Plugin;
+
+export { type GetLoadContextFunction, type RequestHandler, createRequestHandler, netlifyPlugin as default };

package/dist/index.js

@@ -0,0 +1,146 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createRequestHandler: () => createRequestHandler,
+  default: () => netlifyPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/server.ts
+var import_react_router = require("react-router");
+function createRequestHandler({
+  build,
+  mode,
+  getLoadContext
+}) {
+  const reactRouterHandler = (0, import_react_router.createRequestHandler)(build, mode);
+  return async (request, netlifyContext) => {
+    const start = Date.now();
+    console.log(`[${request.method}] ${request.url}`);
+    try {
+      const mergedLoadContext = await getLoadContext?.(request, netlifyContext) || netlifyContext;
+      const response = await reactRouterHandler(request, mergedLoadContext);
+      response.headers.set("x-nf-runtime", "Node");
+      console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
+      return response;
+    } catch (error) {
+      console.error(error);
+      return new Response("Internal Error", { status: 500 });
+    }
+  };
+}
+
+// src/plugin.ts
+var import_promises = require("fs/promises");
+var import_node_path = require("path");
+var import_posix = require("path/posix");
+
+// package.json
+var name = "@netlify/vite-plugin-react-router";
+var version = "0.0.0";
+
+// src/plugin.ts
+var NETLIFY_FUNCTIONS_DIR = ".netlify/functions-internal";
+var FUNCTION_FILENAME = "react-router-server.mjs";
+var FUNCTION_HANDLER_CHUNK = "server";
+var FUNCTION_HANDLER_MODULE_ID = "virtual:netlify-server";
+var RESOLVED_FUNCTION_HANDLER_MODULE_ID = `\0${FUNCTION_HANDLER_MODULE_ID}`;
+var toPosixPath = (path) => path.split(import_node_path.sep).join(import_posix.sep);
+var FUNCTION_HANDLER = (
+  /* js */
+  `
+import { createRequestHandler } from "@netlify/vite-plugin-react-router";
+import * as build from "virtual:react-router/server-build";
+export default createRequestHandler({
+  build,
+  getLoadContext: async (_req, ctx) => ctx,
+});
+`
+);
+function generateNetlifyFunction(handlerPath) {
+  return (
+    /* js */
+    `
+    export { default } from "${handlerPath}";
+
+    export const config = {
+      name: "React Router server handler",
+      generator: "${name}@${version}",
+      path: "/*",
+      preferStatic: true,
+    };
+    `
+  );
+}
+function netlifyPlugin() {
+  let resolvedConfig;
+  let currentCommand;
+  let isSsr;
+  return {
+    name: "vite-plugin-react-router-netlify-functions",
+    config(config, { command, isSsrBuild }) {
+      currentCommand = command;
+      isSsr = isSsrBuild;
+      if (command === "build") {
+        if (isSsrBuild) {
+          if (typeof config.build?.rollupOptions?.input === "string") {
+            config.build.rollupOptions.input = {
+              [FUNCTION_HANDLER_CHUNK]: FUNCTION_HANDLER_MODULE_ID,
+              index: config.build.rollupOptions.input
+            };
+            if (config.build.rollupOptions.output && !Array.isArray(config.build.rollupOptions.output)) {
+              config.build.rollupOptions.output.entryFileNames = "[name].js";
+            }
+          }
+        }
+      }
+    },
+    async resolveId(source) {
+      if (source === FUNCTION_HANDLER_MODULE_ID) {
+        return RESOLVED_FUNCTION_HANDLER_MODULE_ID;
+      }
+    },
+    // See https://vitejs.dev/guide/api-plugin#virtual-modules-convention.
+    load(id) {
+      if (id === RESOLVED_FUNCTION_HANDLER_MODULE_ID) {
+        return FUNCTION_HANDLER;
+      }
+    },
+    async configResolved(config) {
+      resolvedConfig = config;
+    },
+    // See https://rollupjs.org/plugin-development/#writebundle.
+    async writeBundle() {
+      if (currentCommand === "build" && isSsr) {
+        const functionsDirectory = (0, import_node_path.join)(resolvedConfig.root, NETLIFY_FUNCTIONS_DIR);
+        await (0, import_promises.mkdir)(functionsDirectory, { recursive: true });
+        const handlerPath = (0, import_node_path.join)(resolvedConfig.build.outDir, `${FUNCTION_HANDLER_CHUNK}.js`);
+        const relativeHandlerPath = toPosixPath((0, import_node_path.relative)(functionsDirectory, handlerPath));
+        await (0, import_promises.writeFile)((0, import_node_path.join)(functionsDirectory, FUNCTION_FILENAME), generateNetlifyFunction(relativeHandlerPath));
+      }
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createRequestHandler
+});

package/dist/index.mjs

@@ -0,0 +1,119 @@
+// src/server.ts
+import { createRequestHandler as createReactRouterRequestHandler } from "react-router";
+function createRequestHandler({
+  build,
+  mode,
+  getLoadContext
+}) {
+  const reactRouterHandler = createReactRouterRequestHandler(build, mode);
+  return async (request, netlifyContext) => {
+    const start = Date.now();
+    console.log(`[${request.method}] ${request.url}`);
+    try {
+      const mergedLoadContext = await getLoadContext?.(request, netlifyContext) || netlifyContext;
+      const response = await reactRouterHandler(request, mergedLoadContext);
+      response.headers.set("x-nf-runtime", "Node");
+      console.log(`[${response.status}] ${request.url} (${Date.now() - start}ms)`);
+      return response;
+    } catch (error) {
+      console.error(error);
+      return new Response("Internal Error", { status: 500 });
+    }
+  };
+}
+
+// src/plugin.ts
+import { mkdir, writeFile } from "node:fs/promises";
+import { join, relative, sep } from "node:path";
+import { sep as posixSep } from "node:path/posix";
+
+// package.json
+var name = "@netlify/vite-plugin-react-router";
+var version = "0.0.0";
+
+// src/plugin.ts
+var NETLIFY_FUNCTIONS_DIR = ".netlify/functions-internal";
+var FUNCTION_FILENAME = "react-router-server.mjs";
+var FUNCTION_HANDLER_CHUNK = "server";
+var FUNCTION_HANDLER_MODULE_ID = "virtual:netlify-server";
+var RESOLVED_FUNCTION_HANDLER_MODULE_ID = `\0${FUNCTION_HANDLER_MODULE_ID}`;
+var toPosixPath = (path) => path.split(sep).join(posixSep);
+var FUNCTION_HANDLER = (
+  /* js */
+  `
+import { createRequestHandler } from "@netlify/vite-plugin-react-router";
+import * as build from "virtual:react-router/server-build";
+export default createRequestHandler({
+  build,
+  getLoadContext: async (_req, ctx) => ctx,
+});
+`
+);
+function generateNetlifyFunction(handlerPath) {
+  return (
+    /* js */
+    `
+    export { default } from "${handlerPath}";
+
+    export const config = {
+      name: "React Router server handler",
+      generator: "${name}@${version}",
+      path: "/*",
+      preferStatic: true,
+    };
+    `
+  );
+}
+function netlifyPlugin() {
+  let resolvedConfig;
+  let currentCommand;
+  let isSsr;
+  return {
+    name: "vite-plugin-react-router-netlify-functions",
+    config(config, { command, isSsrBuild }) {
+      currentCommand = command;
+      isSsr = isSsrBuild;
+      if (command === "build") {
+        if (isSsrBuild) {
+          if (typeof config.build?.rollupOptions?.input === "string") {
+            config.build.rollupOptions.input = {
+              [FUNCTION_HANDLER_CHUNK]: FUNCTION_HANDLER_MODULE_ID,
+              index: config.build.rollupOptions.input
+            };
+            if (config.build.rollupOptions.output && !Array.isArray(config.build.rollupOptions.output)) {
+              config.build.rollupOptions.output.entryFileNames = "[name].js";
+            }
+          }
+        }
+      }
+    },
+    async resolveId(source) {
+      if (source === FUNCTION_HANDLER_MODULE_ID) {
+        return RESOLVED_FUNCTION_HANDLER_MODULE_ID;
+      }
+    },
+    // See https://vitejs.dev/guide/api-plugin#virtual-modules-convention.
+    load(id) {
+      if (id === RESOLVED_FUNCTION_HANDLER_MODULE_ID) {
+        return FUNCTION_HANDLER;
+      }
+    },
+    async configResolved(config) {
+      resolvedConfig = config;
+    },
+    // See https://rollupjs.org/plugin-development/#writebundle.
+    async writeBundle() {
+      if (currentCommand === "build" && isSsr) {
+        const functionsDirectory = join(resolvedConfig.root, NETLIFY_FUNCTIONS_DIR);
+        await mkdir(functionsDirectory, { recursive: true });
+        const handlerPath = join(resolvedConfig.build.outDir, `${FUNCTION_HANDLER_CHUNK}.js`);
+        const relativeHandlerPath = toPosixPath(relative(functionsDirectory, handlerPath));
+        await writeFile(join(functionsDirectory, FUNCTION_FILENAME), generateNetlifyFunction(relativeHandlerPath));
+      }
+    }
+  };
+}
+export {
+  createRequestHandler,
+  netlifyPlugin as default
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@netlify/vite-plugin-react-router",
+  "version": "0.0.0",
+  "description": "React Router 7+ Vite plugin for Netlify",
+  "type": "commonjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/netlify/remix-compute",
+    "directory": "packages/vite-plugin-react-router"
+  },
+  "keywords": [
+    "react-router",
+    "vite-plugin",
+    "netlify"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/netlify/remix-compute/issues"
+  },
+  "homepage": "https://github.com/netlify/remix-compute#readme",
+  "dependencies": {
+    "@react-router/node": "^7.0.1",
+    "isbot": "^5.0.0",
+    "react-router": "^7.0.1"
+  },
+  "devDependencies": {
+    "@netlify/functions": "^2.8.1",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.2",
+    "vite": "^5.4.11"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup-node src/index.ts --format esm,cjs --dts --target node18 --clean",
+    "build:watch": "pnpm run build --watch"
+  }
+}