Skip to content

refactor(dev): replace lodash #14180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MichaelDeBoey wants to merge 1 commit into from
Closed

refactor(dev): replace lodash #14180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions packages/react-router-dev/config/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import fs from "node:fs";
import { execSync } from "node:child_process";
import fs from "node:fs";
import { isDeepStrictEqual } from "node:util";
import PackageJson from "@npmcli/package-json";
import * as ViteNode from "../vite/vite-node";
import type * as Vite from "vite";
Expand All @@ -9,11 +10,8 @@ import chokidar, {
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 { omit, pick } from "../utils";
import {
type RouteManifest,
type RouteManifestEntry,
Expand Down Expand Up @@ -389,7 +387,7 @@ async function resolveConfig({
}

// Prevent mutations to the user config
reactRouterUserConfig = deepFreeze(cloneDeep(reactRouterUserConfig));
reactRouterUserConfig = deepFreeze(structuredClone(reactRouterUserConfig));
Copy link

@mrginglymus mrginglymus Aug 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are only two uses of deepFreeze - here, and on a newly created object.

Given that deep freeze is already recursing the object, it seems like folding the cloning into that would potentially simplify things a bit (as well as saving a few cycles).


let presets: ReactRouterConfig[] = (
await Promise.all(
Expand All @@ -404,12 +402,11 @@ async function resolveConfig({
return null;
}

let configPreset: ReactRouterConfig = omit(
return omit(
await preset.reactRouterConfig({ reactRouterUserConfig }),
// @ts-expect-error
Copy link
Contributor

@43081j 43081j Aug 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what error is this suppressing? 👀

Copy link
Member Author

@MichaelDeBoey MichaelDeBoey Aug 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

excludedConfigPresetKeys will always be ["presets"], which technically can't happen according to the types.
So in order to remove presets property from preset.reactRouterConfig's return and the fact that omit is now type-safe, there's no other way than suppressing this error, otherwise TS will yell at us.

@brophdawg11 Looking at the code, I would say we could just map to preset.reactRouterConfig's return value as according to the type of preset, we'll always have a name & reactRouterConfig (which doesn't have a presets property, so omit can be removed as well purely type-wise)

Copy link
Contributor

@43081j 43081j Aug 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because a ConfigPreset doesn't have a presets key, right?

yeah thats awkward. you can cast as never, or, safer, you could cast the source as ConfigPreset & {presets?: unknown}

personal preference i guess, though

Copy link
Member Author

@MichaelDeBoey MichaelDeBoey Aug 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because a ConfigPreset doesn't have a presets key, right?

Indeed.

you can cast as never

Yeah I don't like casting, hence the expect-error, but I guess @brophdawg11 can just tell me the preference of the team and I'll update to whatever is preferred

Copy link
Contributor

@brophdawg11 brophdawg11 Aug 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll defer to @pcattori for type preference questions

Copy link
Contributor

@pcattori pcattori Aug 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The expect-error is nice because we'll get a type error if/when we fix types for ConfigPreset, at which point we can clean this up. Whereas with a cast, that cast will likely live in the codebase forever.

Copy link
Member Author

@MichaelDeBoey MichaelDeBoey Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pcattori That's indeed (one of) the reason(s) why I don't like casting.

excludedConfigPresetKeys,
);

return configPreset;
}),
)
).filter(function isNotNull<T>(value: T | null): value is T {
Expand Down Expand Up @@ -775,10 +772,14 @@ export async function createConfigLoader({

let configChanged =
result.ok &&
!isEqual(omitRoutes(currentConfig), omitRoutes(result.value));
!isDeepStrictEqual(
omitRoutes(currentConfig),
omitRoutes(result.value),
);

let routeConfigChanged =
result.ok && !isEqual(currentConfig?.routes, result.value.routes);
result.ok &&
!isDeepStrictEqual(currentConfig?.routes, result.value.routes);

for (let handler of changeHandlers) {
handler({
Expand Down
7 changes: 5 additions & 2 deletions packages/react-router-dev/config/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as Path from "pathe";
import * as v from "valibot";
import pick from "lodash/pick";

import invariant from "../invariant";
import { pick } from "../utils";

declare global {
var __reactRouterAppDirectory: string;
Expand Down Expand Up @@ -240,7 +240,10 @@ 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,
Expand Down
3 changes: 1 addition & 2 deletions packages/react-router-dev/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,11 @@
"es-module-lexer": "^1.3.1",
"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",
"react-refresh": "^0.14.0",
"scule": "^1.3.0",
"semver": "^7.3.7",
"set-cookie-parser": "^2.6.0",
"tinyglobby": "^0.2.14",
Expand All @@ -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",
Expand Down
15 changes: 15 additions & 0 deletions packages/react-router-dev/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const pick = <T extends object, K extends keyof T>(
obj: T,
keys: readonly K[],
): Pick<T, K> =>
Object.fromEntries(
Object.entries(obj).filter(([key]) => keys.includes(key as K)),
) as Pick<T, K>;

export const omit = <T extends object, K extends keyof T>(
obj: T,
keys: readonly K[],
): Omit<T, K> =>
Object.fromEntries(
Object.entries(obj).filter(([key]) => !keys.includes(key as K)),
) as Omit<T, K>;
4 changes: 2 additions & 2 deletions packages/react-router-dev/vite/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,10 @@ import {
init as initEsModuleLexer,
parse as esModuleLexer,
} from "es-module-lexer";
import { kebabCase } from "scule";
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";
Expand All @@ -44,6 +43,7 @@ import type {
Manifest as ReactRouterManifest,
} from "../manifest";
import invariant from "../invariant";
import { pick } from "../utils";
import type { Cache } from "./cache";
import { generate, parse } from "./babel";
import type { NodeRequestHandler } from "./node-adapter";
Expand Down
19 changes: 8 additions & 11 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading