Skip to content

Use granular route.lazy for loaders/actions #13339

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

Merged
merged 7 commits into from
Apr 3, 2025
Merged

Use granular route.lazy for loaders/actions #13339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6413001
Use granular `route.lazy` for loaders/actions
markdalgleish Apr 2, 2025
47aac99
Refactor lazy handler logic
markdalgleish Apr 3, 2025
11172d0
Update tests
markdalgleish Apr 3, 2025
ae87dd5
Fix type error
markdalgleish Apr 3, 2025
10c4ad5
Ensure lazy route is awaited for static handlers
markdalgleish Apr 3, 2025
f35f551
Update comments
markdalgleish Apr 3, 2025
7ff03a1
Add changeset
brophdawg11 Apr 3, 2025
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
5 changes: 5 additions & 0 deletions .changeset/tidy-parrots-rush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-router": patch
---

[REMOVE]: Additional work on route.lazy object form
123 changes: 93 additions & 30 deletions packages/react-router/__tests__/router/lazy-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,16 @@ describe("lazily loaded route modules", () => {

router.initialize();

let loader = () => null;
let loader = jest.fn(() => null);
await lazyLoaderDeferred.resolve(loader);

let action = () => null;
// Ensure loader is called as soon as it's loaded
expect(loader).toHaveBeenCalledTimes(1);

// Finish loading all lazy properties
let action = jest.fn(() => null);
await lazyActionDeferred.resolve(action);
expect(action).toHaveBeenCalledTimes(0);

expect(router.state.location.pathname).toBe("/lazy");
expect(router.state.navigation.state).toBe("idle");
Expand Down Expand Up @@ -222,15 +227,10 @@ describe("lazily loaded route modules", () => {
lazy: async () => {
throw new Error("SHOULD NOT BE CALLED");
},
// @ts-expect-error
caseSensitive: async () => true,
// @ts-expect-error
path: async () => "/lazy/path",
// @ts-expect-error
id: async () => "lazy",
// @ts-expect-error
index: async () => true,
// @ts-expect-error
Comment on lines -225 to -233
Copy link
Member Author

@markdalgleish markdalgleish Apr 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

These directives were unused because of the // @ts-expect-error above lazy.

children: async () => [],
},
},
Expand Down Expand Up @@ -304,12 +304,14 @@ describe("lazily loaded route modules", () => {

it("resolves lazy route properties and executes loaders on router initialization", async () => {
let lazyLoaderDeferred = createDeferred();
let lazyActionDeferred = createDeferred();
let router = createRouter({
routes: [
{
path: "/lazy",
lazy: {
loader: () => lazyLoaderDeferred.promise,
action: () => lazyActionDeferred.promise,
},
},
],
Expand All @@ -320,11 +322,17 @@ describe("lazily loaded route modules", () => {

router.initialize();

let loaderDeferred = createDeferred();
let loader = () => loaderDeferred.promise;
// Ensure loader is called as soon as it's loaded
let { lazyStub: loader, lazyDeferred: loaderDeferred } = createLazyStub();
await lazyLoaderDeferred.resolve(loader);
expect(loader).toHaveBeenCalledTimes(1);
expect(router.state.initialized).toBe(false);

// Finish loading all lazy properties
let action = jest.fn(() => null);
await lazyActionDeferred.resolve(action);
expect(action).toHaveBeenCalledTimes(0);

await loaderDeferred.resolve("LOADER");
expect(router.state.location.pathname).toBe("/lazy");
expect(router.state.navigation.state).toBe("idle");
Expand Down Expand Up @@ -366,32 +374,46 @@ describe("lazily loaded route modules", () => {
});

it("resolves lazy route properties on loading navigation", async () => {
let { lazyStub, lazyDeferred } = createLazyStub();
let { lazyStub: lazyLoader, lazyDeferred: lazyLoaderDeferred } =
createLazyStub();
let { lazyStub: lazyAction, lazyDeferred: lazyActionDeferred } =
createLazyStub();
let routes = createBasicLazyRoutes({
loader: lazyStub,
loader: lazyLoader,
action: lazyAction,
});
let t = setup({ routes });
expect(lazyStub).not.toHaveBeenCalled();
expect(lazyLoader).not.toHaveBeenCalled();

await t.navigate("/lazy");
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("loading");
expect(lazyStub).toHaveBeenCalledTimes(1);
expect(lazyLoader).toHaveBeenCalledTimes(1);

let loaderDeferred = createDeferred();
lazyDeferred.resolve(() => loaderDeferred.promise);
// Ensure loader is called as soon as it's loaded
let { lazyStub: loader, lazyDeferred: loaderDeferred } = createLazyStub();
await lazyLoaderDeferred.resolve(loader);
expect(loader).toHaveBeenCalledTimes(1);
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("loading");
expect(lazyStub).toHaveBeenCalledTimes(1);

// Ensure we're still loading if other lazy properties are not loaded yet
await loaderDeferred.resolve("LAZY LOADER");
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("loading");

// Finish loading all lazy properties
let action = jest.fn(() => null);
await lazyActionDeferred.resolve(action);
expect(action).toHaveBeenCalledTimes(0);

expect(t.router.state.location.pathname).toBe("/lazy");
expect(t.router.state.navigation.state).toBe("idle");
expect(t.router.state.loaderData).toEqual({
lazy: "LAZY LOADER",
});
expect(lazyStub).toHaveBeenCalledTimes(1);
expect(lazyLoader).toHaveBeenCalledTimes(1);
expect(lazyAction).toHaveBeenCalledTimes(1);
});

it("ignores falsy lazy route properties on loading navigation", async () => {
Expand Down Expand Up @@ -480,21 +502,25 @@ describe("lazily loaded route modules", () => {
expect(lazyLoaderStub).toHaveBeenCalledTimes(1);
expect(lazyActionStub).toHaveBeenCalledTimes(1);

let actionDeferred = createDeferred();
let loaderDeferred = createDeferred();
lazyLoaderDeferred.resolve(() => loaderDeferred.promise);
lazyActionDeferred.resolve(() => actionDeferred.promise);
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("submitting");
let { lazyStub: action, lazyDeferred: actionDeferred } = createLazyStub();
let { lazyStub: loader, lazyDeferred: loaderDeferred } = createLazyStub();

// Ensure action is called as soon as it's loaded
await lazyActionDeferred.resolve(action);
await actionDeferred.resolve("LAZY ACTION");
expect(action).toHaveBeenCalledTimes(1);
expect(loader).toHaveBeenCalledTimes(0);
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("loading");
expect(t.router.state.actionData).toEqual({
lazy: "LAZY ACTION",
});
expect(t.router.state.navigation.state).toBe("submitting");
expect(t.router.state.actionData).toEqual(null);
expect(t.router.state.loaderData).toEqual({});

// Finish loading all lazy properties
await lazyLoaderDeferred.resolve(loader);
expect(loader).toHaveBeenCalledTimes(1);
expect(action).toHaveBeenCalledTimes(1);
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("loading");
await loaderDeferred.resolve("LAZY LOADER");
expect(t.router.state.location.pathname).toBe("/lazy");
expect(t.router.state.navigation.state).toBe("idle");
Expand Down Expand Up @@ -2028,7 +2054,7 @@ describe("lazily loaded route modules", () => {
expect(lazyStub).toHaveBeenCalledTimes(1);
});

it("handles errors when failing to resolve lazy route property on loading navigation", async () => {
it("handles errors when failing to resolve lazy route loader property on loading navigation", async () => {
let { lazyStub, lazyDeferred } = createLazyStub();
let routes = createBasicLazyRoutes({
loader: lazyStub,
Expand All @@ -2052,6 +2078,43 @@ describe("lazily loaded route modules", () => {
expect(lazyStub).toHaveBeenCalledTimes(1);
});

it("handles errors when failing to resolve other lazy route properties on loading navigation", async () => {
let { lazyStub: lazyLoader, lazyDeferred: lazyLoaderDeferred } =
createLazyStub();
let { lazyStub: lazyAction, lazyDeferred: lazyActionDeferred } =
createLazyStub();
let routes = createBasicLazyRoutes({
loader: lazyLoader,
action: lazyAction,
});
let t = setup({ routes });
expect(lazyLoader).not.toHaveBeenCalled();

await t.navigate("/lazy");
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("loading");
expect(lazyLoader).toHaveBeenCalledTimes(1);

// Ensure loader is called as soon as it's loaded
let loader = jest.fn(() => null);
await lazyLoaderDeferred.resolve(loader);
expect(t.router.state.location.pathname).toBe("/");
expect(t.router.state.navigation.state).toBe("loading");
expect(loader).toHaveBeenCalledTimes(1);

// Reject remaining lazy properties
await lazyActionDeferred.reject(new Error("LAZY PROPERTY ERROR"));
expect(t.router.state.location.pathname).toBe("/lazy");
expect(t.router.state.navigation.state).toBe("idle");

expect(t.router.state.loaderData).toEqual({});
expect(t.router.state.errors).toEqual({
root: new Error("LAZY PROPERTY ERROR"),
});
expect(lazyLoader).toHaveBeenCalledTimes(1);
expect(lazyAction).toHaveBeenCalledTimes(1);
});

it("handles loader errors from lazy route functions when the route has an error boundary", async () => {
let { routes, lazyStub, lazyDeferred } = createBasicLazyFunctionRoutes();
let t = setup({ routes });
Expand Down Expand Up @@ -2305,7 +2368,7 @@ describe("lazily loaded route modules", () => {
it("handles errors when failing to resolve lazy route properties on submission navigation", async () => {
let { lazyStub, lazyDeferred } = createLazyStub();
let routes = createBasicLazyRoutes({
loader: lazyStub,
action: lazyStub,
});
let t = setup({ routes });
expect(lazyStub).not.toHaveBeenCalled();
Expand Down Expand Up @@ -2627,7 +2690,7 @@ describe("lazily loaded route modules", () => {
it("handles errors when failing to load lazy route properties on fetcher.submit", async () => {
let { lazyStub, lazyDeferred } = createLazyStub();
let routes = createBasicLazyRoutes({
loader: lazyStub,
action: lazyStub,
});
let t = setup({ routes });
expect(lazyStub).not.toHaveBeenCalled();
Expand Down
Loading