feat(dashboard,admin-vite-plugin): Add support for outlet routes, loader, and handle #11305

kasperkristensen · 2025-02-04T15:57:00Z

What

Add support for defining outlet routes using @, e.g. /src/admin/routes/brands/@create/page.tsx
Add support for exporting a loader from a route file.
Add support for exporting a handle from a route file.

Example usage of a loader and handle:

// src/admin/routes/articles/[id]/page.tsx
import { Button, Container, Heading } from "@medusajs/ui";
import {
  Link,
  LoaderFunctionArgs,
  Outlet,
  UIMatch,
  useLoaderData,
} from "react-router-dom";

export async function loader({ params }: LoaderFunctionArgs) {
  const { id } = params;

  return {
    id,
  };
}

export const handle = {
  breadcrumb: (match: UIMatch<{ id: string }>) => {
    const { id } = match.params;
    return `#${id}`;
  },
};

const ProfilePage = () => {
  const { id } = useLoaderData() as Awaited<ReturnType<typeof loader>>;

  return (
    <div>
      <Container className="flex justify-between items-center">
        <Heading>Article {id}</Heading>
        <Button size="small" variant="secondary" asChild>
          <Link to="edit">Edit</Link>
        </Button>
      </Container>
      {/* This will be used for the next example of an Outlet route */}
      <Outlet />
    </div>
  );
};

export default ProfilePage;

In the above example we are passing data to the route from a loader, and defining a breadcrumb using the handle.

Example of a outlet route:

// src/admin/routes/articles/[id]/@edit/page.tsx
import { Button, Container, Heading } from "@medusajs/ui";

const ProfileEditPage = () => {
  return (
    <div>
      {/* Form goes here */}
    </div>
  );
};

export default ProfileEditPage;

This outlet route will be rendered in the in the above example when the URL is /articles/1/edit

Resolves CMRC-913, CMRC-914, CMRC-915

changeset-bot · 2025-02-04T15:57:06Z

🦋 Changeset detected

Latest commit: 4825035

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 65 packages

Name	Type
@medusajs/admin-vite-plugin	Patch
@medusajs/dashboard	Patch
@medusajs/admin-bundler	Patch
@medusajs/medusa	Patch
@medusajs/test-utils	Patch
@medusajs/api-key	Patch
@medusajs/auth	Patch
@medusajs/cache-inmemory	Patch
@medusajs/cache-redis	Patch
@medusajs/cart	Patch
@medusajs/currency	Patch
@medusajs/customer	Patch
@medusajs/event-bus-local	Patch
@medusajs/event-bus-redis	Patch
@medusajs/file	Patch
@medusajs/fulfillment	Patch
@medusajs/index	Patch
@medusajs/inventory	Patch
@medusajs/link-modules	Patch
@medusajs/locking	Patch
@medusajs/notification	Patch
@medusajs/order	Patch
@medusajs/payment	Patch
@medusajs/pricing	Patch
@medusajs/product	Patch
@medusajs/promotion	Patch
@medusajs/region	Patch
@medusajs/sales-channel	Patch
@medusajs/stock-location	Patch
@medusajs/store	Patch
@medusajs/tax	Patch
@medusajs/user	Patch
@medusajs/workflow-engine-inmemory	Patch
@medusajs/workflow-engine-redis	Patch
@medusajs/auth-emailpass	Patch
@medusajs/auth-github	Patch
@medusajs/auth-google	Patch
@medusajs/file-local	Patch
@medusajs/file-s3	Patch
@medusajs/fulfillment-manual	Patch
@medusajs/locking-postgres	Patch
@medusajs/locking-redis	Patch
@medusajs/notification-local	Patch
@medusajs/notification-sendgrid	Patch
@medusajs/payment-stripe	Patch
@medusajs/core-flows	Patch
@medusajs/framework	Patch
@medusajs/js-sdk	Patch
@medusajs/modules-sdk	Patch
@medusajs/orchestration	Patch
@medusajs/types	Patch
@medusajs/utils	Patch
@medusajs/workflows-sdk	Patch
@medusajs/cli	Patch
@medusajs/medusa-oas-cli	Patch
@medusajs/oas-github-ci	Patch
@medusajs/telemetry	Patch
@medusajs/admin-sdk	Patch
@medusajs/admin-shared	Patch
@medusajs/icons	Patch
@medusajs/toolbox	Patch
@medusajs/ui-preset	Patch
create-medusa-app	Patch
medusa-dev-cli	Patch
integration-tests-http	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-02-04T15:57:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
medusa-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2025 8:23pm

6 Skipped Deployments

Name	Status	Preview	Updated (UTC)
api-reference	⬜️ Ignored (Inspect)		Feb 13, 2025 8:23pm
api-reference-v2	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2025 8:23pm
docs-ui	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2025 8:23pm
docs-v2	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2025 8:23pm
medusa-docs	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2025 8:23pm
resources-docs	⬜️ Ignored (Inspect)	Visit Preview	Feb 13, 2025 8:23pm

kasperkristensen · 2025-02-04T15:57:35Z

/snapshot-this

github-actions · 2025-02-04T16:05:26Z

🚀 A snapshot release has been made for this PR

Test the snapshots by updating your package.json with the newly published versions:

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

Latest commit: 604f46f

olivermrbl

Overall LGTM!

Any specific considerations around adding the handle (or breadcrumb) as a separate config instead of including it in the existing define* utilities?

My simple (and potentially uninformed) argument would be that one config > multiple configs.

kasperkristensen · 2025-02-12T16:08:43Z

/snapshot-this

kasperkristensen · 2025-02-12T16:13:39Z

Overall LGTM!

Any specific considerations around adding the handle (or breadcrumb) as a separate config instead of including it in the existing define* utilities?

My simple (and potentially uninformed) argument would be that one config > multiple configs.

handle is a react-router-dom way of providing arbitrary data to your route, we are just using it for adding breadcrumbs (based on their example https://reactrouter.com/6.29.0/hooks/use-matches#breadcrumbs). But you can pass whatever data you want to it and it will be available through useMatches on that route, so we should allow people to create a handle so they can use it for whatever use cases they might have.

I am considering adding a field called breadcrumb to defineRouteConfig, but it will require some Vite magic to rewrite the file so we move the field from the config to the handle (and if there is no handle for a file then we need to write one), which is a bit more involved so didn't want it to block getting this functionality in now for the plugin I am working on.

github-actions · 2025-02-12T16:15:59Z

🚀 A snapshot release has been made for this PR

Test the snapshots by updating your package.json with the newly published versions:

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

Latest commit: 00fa475

olivermrbl · 2025-02-13T08:05:15Z

@kasperkristensen, fine to merge this now to unblock you and we can discuss changing the API later down the line.

kasperkristensen added 2 commits February 4, 2025 15:33

feat(dashboard,admin-vite-plugin): Add support for parallel routes

f3a931c

add support for handle and loaders

0dd3ec4

kasperkristensen requested a review from a team as a code owner February 4, 2025 15:57

kasperkristensen requested review from riqwan, adrien2p and carlos-r-l-rodrigues February 4, 2025 15:57

Merge branch 'develop' into feat/parallel-route-support

8d3ec26

github-actions bot added type: feature team: medusa labels Feb 4, 2025

vercel bot deployed to Preview – medusa-dashboard February 4, 2025 15:57 View deployment

kasperkristensen changed the title ~~feat(dashboard,admin-vite-plugin): Add support for parallel routes, loaders, and handle~~ feat(dashboard,admin-vite-plugin): Add support for outlet routes, loader, and handle Feb 5, 2025

Merge branch 'develop' into feat/parallel-route-support

ae5bf07

vercel bot deployed to Preview – medusa-dashboard February 5, 2025 11:09 View deployment

olivermrbl approved these changes Feb 11, 2025

View reviewed changes

Merge branch 'develop' into feat/parallel-route-support

9150c5e

vercel bot deployed to Preview – medusa-dashboard February 12, 2025 16:16 View deployment

Merge branch 'develop' into feat/parallel-route-support

4825035

kasperkristensen added the automerge label Feb 13, 2025

vercel bot deployed to Preview – medusa-dashboard February 13, 2025 20:23 View deployment

kodiakhq bot merged commit a88f657 into develop Feb 13, 2025
23 checks passed

kodiakhq bot deleted the feat/parallel-route-support branch February 13, 2025 20:38

github-actions bot mentioned this pull request Feb 13, 2025

Version Packages #11210

Open

This was referenced Feb 21, 2025

Version Packages NicolasGorga/medusa#1

Open

Version Packages everpay/medusa#1

Open

Version Packages Klomgor/medusa#20

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard,admin-vite-plugin): Add support for outlet routes, loader, and handle #11305

feat(dashboard,admin-vite-plugin): Add support for outlet routes, loader, and handle #11305

kasperkristensen commented Feb 4, 2025 •

edited

Loading

changeset-bot bot commented Feb 4, 2025 •

edited

Loading

vercel bot commented Feb 4, 2025 •

edited

Loading

kasperkristensen commented Feb 4, 2025

github-actions bot commented Feb 4, 2025

olivermrbl left a comment

kasperkristensen commented Feb 12, 2025

kasperkristensen commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025

olivermrbl commented Feb 13, 2025

feat(dashboard,admin-vite-plugin): Add support for outlet routes, loader, and handle #11305

feat(dashboard,admin-vite-plugin): Add support for outlet routes, loader, and handle #11305

Conversation

kasperkristensen commented Feb 4, 2025 • edited Loading

changeset-bot bot commented Feb 4, 2025 • edited Loading

🦋 Changeset detected

vercel bot commented Feb 4, 2025 • edited Loading

kasperkristensen commented Feb 4, 2025

github-actions bot commented Feb 4, 2025

🚀 A snapshot release has been made for this PR

olivermrbl left a comment

Choose a reason for hiding this comment

kasperkristensen commented Feb 12, 2025

kasperkristensen commented Feb 12, 2025 • edited Loading

github-actions bot commented Feb 12, 2025

🚀 A snapshot release has been made for this PR

olivermrbl commented Feb 13, 2025

kasperkristensen commented Feb 4, 2025 •

edited

Loading

changeset-bot bot commented Feb 4, 2025 •

edited

Loading

vercel bot commented Feb 4, 2025 •

edited

Loading

kasperkristensen commented Feb 12, 2025 •

edited

Loading