refactor(dev): replace lodash

Author: MichaelDeBoey

packages/react-router-dev/config/config.ts

@@ -2,17 +2,14 @@ import fs from "node:fs";
 import { execSync } from "node:child_process";
 import PackageJson from "@npmcli/package-json";
 import * as ViteNode from "../vite/vite-node";
+import { isEqual } from "es-toolkit/predicate";
 import type * as Vite from "vite";
 import Path from "pathe";
 import chokidar, {
   type FSWatcher,
   type EmitArgs as ChokidarEmitArgs,
 } from "chokidar";
 import colors from "picocolors";
-import pick from "lodash/pick";
-import omit from "lodash/omit";
-import cloneDeep from "lodash/cloneDeep";
-import isEqual from "lodash/isEqual";
 
 import {
   type RouteManifest,
@@ -56,7 +53,11 @@ type BranchRoute = Pick<
 
 export const configRouteToBranchRoute = (
   configRoute: RouteManifestEntry,
-): BranchRoute => pick(configRoute, branchRouteProperties);
+): BranchRoute =>
+  branchRouteProperties.reduce(
+    (obj, key) => ({ ...obj, [key]: configRoute[key] }),
+    {} as BranchRoute,
+  );
 
 export type ServerBundlesFunction = (args: {
   branch: BranchRoute[];
@@ -389,7 +390,7 @@ async function resolveConfig({
   }
 
   // Prevent mutations to the user config
-  reactRouterUserConfig = deepFreeze(cloneDeep(reactRouterUserConfig));
+  reactRouterUserConfig = deepFreeze(structuredClone(reactRouterUserConfig));
 
   let presets: ReactRouterConfig[] = (
     await Promise.all(
@@ -404,10 +405,10 @@ async function resolveConfig({
           return null;
         }
 
-        let configPreset: ReactRouterConfig = omit(
-          await preset.reactRouterConfig({ reactRouterUserConfig }),
-          excludedConfigPresetKeys,
-        );
+        let configPreset: ReactRouterConfig = await preset.reactRouterConfig({
+          reactRouterUserConfig,
+        });
+        excludedConfigPresetKeys.forEach((key) => delete configPreset[key]);
 
         return configPreset;
       }),

packages/react-router-dev/config/routes.ts

@@ -1,6 +1,5 @@
 import * as Path from "pathe";
 import * as v from "valibot";
-import pick from "lodash/pick";
 
 import invariant from "../invariant";
 
@@ -225,7 +224,10 @@ function route(
     file,
     children,
     path: path ?? undefined,
-    ...pick(options, createConfigRouteOptionKeys),
+    ...createConfigRouteOptionKeys.reduce(
+      (obj, key) => ({ ...obj, [key]: options[key] }),
+      {},
+    ),
   };
 }
 
@@ -240,11 +242,17 @@ type CreateIndexOptions = Pick<
  * Helper function for creating a route config entry for an index route, for use
  * within `routes.ts`.
  */
-function index(file: string, options?: CreateIndexOptions): RouteConfigEntry {
+function index(
+  file: string,
+  options: CreateIndexOptions = {},
+): RouteConfigEntry {
   return {
     file,
     index: true,
-    ...pick(options, createIndexOptionKeys),
+    ...createIndexOptionKeys.reduce(
+      (obj, key) => ({ ...obj, [key]: options[key] }),
+      {},
+    ),
   };
 }
 
@@ -281,7 +289,10 @@ function layout(
   return {
     file,
     children,
-    ...pick(options, createLayoutOptionKeys),
+    ...createLayoutOptionKeys.reduce(
+      (obj, key) => ({ ...obj, [key]: options[key] }),
+      {},
+    ),
   };
 }
 

packages/react-router-dev/package.json

@@ -84,9 +84,9 @@
     "chokidar": "^4.0.0",
     "dedent": "^1.5.3",
     "es-module-lexer": "^1.3.1",
+    "es-toolkit": "^1.39.8",
     "exit-hook": "2.2.1",
     "jsesc": "3.0.2",
-    "lodash": "^4.17.21",
     "pathe": "^1.1.2",
     "picocolors": "^1.1.1",
     "prettier": "^3.6.2",
@@ -105,7 +105,6 @@
     "@types/dedent": "^0.7.0",
     "@types/express": "^4.17.9",
     "@types/jsesc": "^3.0.1",
-    "@types/lodash": "^4.14.182",
     "@types/node": "^20.0.0",
     "@types/npmcli__package-json": "^4.0.0",
     "@types/set-cookie-parser": "^2.4.1",

packages/react-router-dev/vite/plugin.ts

@@ -31,11 +31,10 @@ import {
   init as initEsModuleLexer,
   parse as esModuleLexer,
 } from "es-module-lexer";
+import { kebabCase } from "es-toolkit/string";
 import { escapePath as escapePathAsGlob } from "tinyglobby";
-import pick from "lodash/pick";
 import jsesc from "jsesc";
 import colors from "picocolors";
-import kebabCase from "lodash/kebabCase";
 
 import * as Typegen from "../typegen";
 import type { RouteManifestEntry, RouteManifest } from "../config/routes";
@@ -732,7 +731,10 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
     let routes = routeIds
       ? // For server bundle builds, the server build should only import the
         // routes for this bundle rather than importing all routes
-        pick(ctx.reactRouterConfig.routes, routeIds)
+        routeIds.reduce(
+          (obj, key) => ({ ...obj, [key]: ctx.reactRouterConfig.routes[key] }),
+          {} as RouteManifest,
+        )
       : // Otherwise, all routes are imported as usual
         ctx.reactRouterConfig.routes;