diff --git a/.changeset/friendly-toes-mate.md b/.changeset/friendly-toes-mate.md new file mode 100644 index 000000000..7ff6a9046 --- /dev/null +++ b/.changeset/friendly-toes-mate.md @@ -0,0 +1,9 @@ +--- +"@squide/react-router": minor +"@squide/core": minor +--- + +- Renamed a route definition `$name` option to `$id`. +- Renamed the `registerRoute` `$parentName` option to `$parentId`. + +These changes should have been a major version but since Squide firefly v9 has been released a few days ago and no applications already migrated, it's include as part of v9 breaking changes. diff --git a/docs/getting-started/create-host.md b/docs/getting-started/create-host.md index 02de17cda..b97f8f7c9 100644 --- a/docs/getting-started/create-host.md +++ b/docs/getting-started/create-host.md @@ -204,7 +204,7 @@ export function RootLayout() { } ``` -The `RootLayout` component created in the previous sample will serves as the default layout for the homepage as well as for every page (route) registered by a module that are not nested under a parent route with either the [parentPath](../reference/runtime/runtime-class.md#register-nested-routes) or the [parentName](../reference/runtime/runtime-class.md#register-a-named-route) option. +The `RootLayout` component created in the previous sample will serves as the default layout for the homepage as well as for every page (route) registered by a module that are not nested under a parent route with either the [parentPath](../reference/runtime/runtime-class.md#register-nested-routes) or the [parentId](../reference/runtime/runtime-class.md#register-a-route-with-an-id) option. ### Homepage @@ -260,7 +260,7 @@ export const registerHost: ModuleRegisterFunction = runtime => { ``` !!!info -The [PublicRoutes](../reference/routing/publicRoutes.md) and [ProtectedRoutes](../reference/routing/protectedRoutes.md) placeholders indicates where routes that are neither hoisted or nested with a [parentPath](../reference/runtime/runtime-class.md#register-nested-navigation-items) or [parentName](../reference/runtime/runtime-class.md#register-a-named-route) option will be rendered. In this example, the homepage route is considered as a protected route and will be rendered under the `ProtectedRoutes` placeholder. +The [PublicRoutes](../reference/routing/publicRoutes.md) and [ProtectedRoutes](../reference/routing/protectedRoutes.md) placeholders indicates where routes that are neither hoisted or nested with a [parentPath](../reference/runtime/runtime-class.md#register-nested-navigation-items) or [parentId](../reference/runtime/runtime-class.md#register-a-route-with-an-id) option will be rendered. In this example, the homepage route is considered as a protected route and will be rendered under the `ProtectedRoutes` placeholder. !!! Finally, update the bootstrapping code to [register](../reference/registration/registerLocalModules.md) the newly created local module: diff --git a/docs/guides/migrate-to-firefly-v9.md b/docs/guides/migrate-to-firefly-v9.md index 7535d9274..b374b5ab9 100644 --- a/docs/guides/migrate-to-firefly-v9.md +++ b/docs/guides/migrate-to-firefly-v9.md @@ -29,6 +29,8 @@ Finally, with `v9`, Squide's philosophy has evolved. We used to describe Squide ### Renamed - The `setMswAsStarted` function has been renamed to [setMswIsReady](../reference/msw/setMswAsReady.md). +- A route definition `$name` option has been renamed to [$id](../reference/runtime/runtime-class.md#register-a-route-with-an-id). +- The [registerRoute](../reference/runtime/runtime-class.md#register-routes) `parentName` option has been renamed to [parentId](../reference/runtime/runtime-class.md#register-nested-routes). ### Others @@ -331,7 +333,7 @@ export const registerHost: ModuleRegisterFunction = runtime => { element: , children: [ { - $name: "root-error-boundary", + $id: "root-error-boundary", errorElement: , children: [ ManagedRoutes diff --git a/docs/reference/routing/protectedRoutes.md b/docs/reference/routing/protectedRoutes.md index a840de7c4..fafc2f9f2 100644 --- a/docs/reference/routing/protectedRoutes.md +++ b/docs/reference/routing/protectedRoutes.md @@ -8,7 +8,7 @@ toc: A placeholder indicating where in the routing tree should the protected routes be rendered. The `ProtectedRoutes` placeholder concept is similar to React Router's [outlet](https://reactrouter.com/en/main/components/outlet), it's a pipeline to inject routes at a predetermined location. -> A protected route is a route with a `"protected"` visibility that is not [hoisted](../runtime/runtime-class.md#register-an-hoisted-route) or nested with either a [parentPath](../runtime/runtime-class.md#register-nested-routes) or [parentName](../runtime/runtime-class.md#register-a-named-route) option. +> A protected route is a route with a `"protected"` visibility that is not [hoisted](../runtime/runtime-class.md#register-an-hoisted-route) or nested with either a [parentPath](../runtime/runtime-class.md#register-nested-routes) or [parentId](../runtime/runtime-class.md#register-a-route-with-an-id) option. ## Reference diff --git a/docs/reference/routing/publicRoutes.md b/docs/reference/routing/publicRoutes.md index 36e9f641f..67d8b4c55 100644 --- a/docs/reference/routing/publicRoutes.md +++ b/docs/reference/routing/publicRoutes.md @@ -8,7 +8,7 @@ toc: A placeholder indicating where in the routing tree should the public routes be rendered. The `PublicRoutes` placeholder concept is similar to React Router's [outlet](https://reactrouter.com/en/main/components/outlet), it's a pipeline to inject routes at a predetermined location. -> A public route is a route with a `"public"` visibility that is not [hoisted](../runtime/runtime-class.md#register-an-hoisted-route) or nested with either a [parentPath](../runtime/runtime-class.md#register-nested-routes) or [parentName](../runtime/runtime-class.md#register-a-named-route) option. +> A public route is a route with a `"public"` visibility that is not [hoisted](../runtime/runtime-class.md#register-an-hoisted-route) or nested with either a [parentPath](../runtime/runtime-class.md#register-nested-routes) or [parentId](../runtime/runtime-class.md#register-a-route-with-an-id) option. ## Reference diff --git a/docs/reference/routing/useRenderedNavigationItems.md b/docs/reference/routing/useRenderedNavigationItems.md index 22235484d..4be39b185 100644 --- a/docs/reference/routing/useRenderedNavigationItems.md +++ b/docs/reference/routing/useRenderedNavigationItems.md @@ -38,7 +38,7 @@ Accept any properties of a React Router [Link](https://reactrouter.com/en/main/c #### `NavigationSection` -- `$id`: An optional key identifying the section. Usually used to nest navigation items undern a specific section and as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. +- `$id`: An optional identifier the section. Usually used to nest navigation items undern a specific section and as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. - `$label`: The section label. Could either by a `string` or a `ReactNode`. - `$canRender`: An optional function accepting an object and returning a `boolean` indicating whether or not the section should be rendered. - `$additionalProps`: An optional object literal of additional props to apply to the section component. diff --git a/docs/reference/runtime/runtime-class.md b/docs/reference/runtime/runtime-class.md index ea0ef2d39..c0db23f44 100644 --- a/docs/reference/runtime/runtime-class.md +++ b/docs/reference/runtime/runtime-class.md @@ -80,16 +80,16 @@ if (runtime.isMswEnabled) { ### Register routes ```ts -runtime.registerRoute(route, options?: { hoist?, parentPath?, parentName? }) +runtime.registerRoute(route, options?: { hoist?, parentPath?, parentId? }) ``` - `route`: accept any properties of a React Router [Route](https://reactrouter.com/en/main/components/route) component with the addition of: - - `$name`: An optional name for the route. + - `$id`: An optional identifier for the route. Usually used to nest routes under a specific route. - `$visibility`: An optional visibility indicator for the route. Accepted values are `"public"` or `"protected"`. - `options`: An optional object literal of options: - `hoist`: An optional `boolean` value to register the route at the root of the router. The default value is `false`. - `parentPath`: An optional path of a parent route to register this new route under. - - `parentName`: An optional name of a parent route to register this new route under. + - `parentId`: An optional id of a parent route to register this new route under. ```tsx import { Page } from "./Page.tsx" @@ -159,17 +159,17 @@ runtime.registerPublicRoute({ When no `$visibility` indicator is provided, a route is considered `protected`. !!! -### Register a named route +### Register a route with an id -The `registerRoute` function accepts a `parentName` option, allowing a route to be [nested under an existing parent route](#register-nested-routes). When searching for the parent route matching the `parentName` option, the `parentName` will be matched against the `$name` option of every route. +The `registerRoute` function accepts a `parentId` option, allowing a route to be [nested under an existing parent route](#register-nested-routes). When searching for the parent route matching the `parentId` option, the `parentId` will be matched against the `$id` option of every route. -> A `$name` option should only be defined for routes that doesn't have a path like an error boundary or an authentication boundary. +> A `$id` option should only be defined for routes that doesn't have a path like an error boundary or an authentication boundary. ```tsx !#4 import { RootErrorBoundary } from "./RootErrorBoundary.tsx"; runtime.registerRoute({ - $name: "error-boundary", + $id: "error-boundary", element: }); ``` @@ -193,7 +193,7 @@ runtime.registerRoute({ }); ``` -Or a `parentName` option that matches the parent route's `name` option: +Or a `parentId` option that matches the parent route's `$id` option: ```tsx !#7 import { Page } from "./Page.tsx"; @@ -202,7 +202,7 @@ runtime.registerRoute({ path: "/page-1", element: }, { - parentName: "error-boundary" // Register the route under an existing route having "error-boundary" as its "name". + parentId: "error-boundary" // Register the route under an existing route having "error-boundary" as its "$id". }); ``` @@ -223,19 +223,20 @@ const routes = runtime.routes; ### Register navigation items ```ts -runtime.registerNavigationItem(item, options?: { menuId? }) +runtime.registerNavigationItem(item, options?: { menuId?, sectionId? }) ``` - `item`: `NavigationSection | NavigationLink`. - `options`: An optional object literal of options: - `menuId`: An optional menu id to associate the item with. + - `sectionId`: An optional section id of a parent navigation section to register this new item under. A Squide navigation item can either be a `NavigationLink` or a `NavigationSection`. Both types can be intertwined to create a multi-level menu hierarchy. A `NavigationSection` item is used to setup a new level while a `NavigationLink` define a link. #### `NavigationLink` Accept any properties of a React Router [Link](https://reactrouter.com/en/main/components/link) component with the addition of: -- `$id`: An optional key identifying the link. Usually used as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. +- `$id`: An optional identifier for the link. Usually used as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. - `$label`: The link text. - `$canRender`: An optional function accepting an object and returning a `boolean` indicating whether or not the link should be rendered. - `$priority`: An order priority affecting the position of the item in the menu (higher first) @@ -243,7 +244,7 @@ Accept any properties of a React Router [Link](https://reactrouter.com/en/main/c #### `NavigationSection` -- `$id`: An optional key identifying the section. Usually used to nest navigation items under a specific section and as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. +- `$id`: An optional identifier for the section. Usually used to nest navigation items under a specific section and as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. - `$label`: The section text. - `$canRender`: An optional function accepting an object and returning a `boolean` indicating whether or not the section should be rendered. - `$priority`: An order priority affecting the position of the item in the menu (higher first) @@ -265,6 +266,20 @@ runtime.registerNavigationItem({ [!ref text="Setup the host application to render navigation items"](../routing/useRenderedNavigationItems.md) +### Register a navigation item with an id + +The `registerNavigationItem` function accepts a `sectionId` option, allowing a navigation item to be nested under an existing navigation section. When searching the parent navigation section matching the `sectionId` option, the `sectionId` will be match against the `$id` option of every navigation item. + +```ts +runtime.registerNavigationItem({ + $id: "page-1", + $label: "Page 1", + to: "/page-1" +}); +``` + +Additionally, when combined with the [useRenderedNavigationItems]() function, the `$id` option will be used as the React element `key` property. + ### Register nested navigation items Similarly to [nested routes](#register-nested-navigation-items), a navigation item can be nested under an existing section be specifying a `sectionId` option that matches the section's `$id` option: diff --git a/docs/reference/runtime/useNavigationItems.md b/docs/reference/runtime/useNavigationItems.md index 1d70865a9..284d65cfa 100644 --- a/docs/reference/runtime/useNavigationItems.md +++ b/docs/reference/runtime/useNavigationItems.md @@ -26,14 +26,14 @@ An array of `NavigationLink | NavigationSection`. #### `NavigationLink` Accept any properties of a React Router [Link](https://reactrouter.com/en/main/components/link) component with the addition of: -- `$id`: An optional key identifying the link. Usually used as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. +- `$id`: An optional identifier for the link. Usually used as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. - `$label`: The link label. Could either by a `string` or a `ReactNode`. - `$canRender`: An optional function accepting an object and returning a `boolean` indicating whether or not the link should be rendered. - `$additionalProps`: An optional object literal of additional props to apply to the link component. #### `NavigationSection` -- `$id`: An optional key identifying the section. Usually used to nest navigation items under a specific section and as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. +- `$id`: An optional identifier for the section. Usually used to nest navigation items under a specific section and as the React element [key](https://legacy.reactjs.org/docs/lists-and-keys.html#keys) property. - `$label`: The section label. Could either by a `string` or a `ReactNode`. - `$canRender`: An optional function accepting an object and returning a `boolean` indicating whether or not the section should be rendered. - `$additionalProps`: An optional object literal of additional props to apply to the section component. diff --git a/packages/core/src/runtime/runtime.ts b/packages/core/src/runtime/runtime.ts index 1c361c043..bbcd2ff6b 100644 --- a/packages/core/src/runtime/runtime.ts +++ b/packages/core/src/runtime/runtime.ts @@ -16,7 +16,7 @@ export interface RuntimeOptions { export interface RegisterRouteOptions { hoist?: true; parentPath?: string; - parentName?: string; + parentId?: string; } export interface RegisterNavigationItemOptions { diff --git a/packages/react-router/src/outlets.ts b/packages/react-router/src/outlets.ts index 912361a5d..7bdb9bc94 100644 --- a/packages/react-router/src/outlets.ts +++ b/packages/react-router/src/outlets.ts @@ -1,23 +1,23 @@ import type { NonIndexRoute, Route } from "./routeRegistry.ts"; -export const PublicRoutesOutletName = "__squide-public-routes-outlet__"; +export const PublicRoutesOutletId = "__squide-public-routes-outlet__"; export const PublicRoutes: NonIndexRoute = { $visibility: "public", - $name: PublicRoutesOutletName + $id: PublicRoutesOutletId }; export function isPublicRoutesOutletRoute(route: Route) { - return route.$name === PublicRoutesOutletName; + return route.$id === PublicRoutesOutletId; } -export const ProtectedRoutesOutletName = "__squide-protected-routes-outlet__"; +export const ProtectedRoutesOutletId = "__squide-protected-routes-outlet__"; export const ProtectedRoutes: NonIndexRoute = { $visibility: "protected", - $name: ProtectedRoutesOutletName + $id: ProtectedRoutesOutletId }; export function isProtectedRoutesOutletRoute(route: Route) { - return route.$name === ProtectedRoutesOutletName; + return route.$id === ProtectedRoutesOutletId; } diff --git a/packages/react-router/src/reactRouterRuntime.ts b/packages/react-router/src/reactRouterRuntime.ts index ca8db2fff..082a704a6 100644 --- a/packages/react-router/src/reactRouterRuntime.ts +++ b/packages/react-router/src/reactRouterRuntime.ts @@ -1,14 +1,14 @@ import { RootMenuId, Runtime, type RegisterNavigationItemOptions, type RegisterRouteOptions } from "@squide/core"; import { NavigationItemDeferredRegistrationScope, NavigationItemDeferredRegistrationTransactionalScope, NavigationItemRegistry, parseSectionIndexKey, type NavigationItemRegistrationResult, type RootNavigationItem } from "./navigationItemRegistry.ts"; -import { ProtectedRoutesOutletName, PublicRoutesOutletName } from "./outlets.ts"; +import { ProtectedRoutesOutletId, PublicRoutesOutletId } from "./outlets.ts"; import { RouteRegistry, type Route } from "./routeRegistry.ts"; function translateOutletsParentId(parentId?: string) { - if (parentId === PublicRoutesOutletName) { + if (parentId === PublicRoutesOutletId) { return "PublicRoutes"; } - if (parentId === ProtectedRoutesOutletName) { + if (parentId === ProtectedRoutesOutletId) { return "ProtectedRoutes"; } @@ -167,14 +167,14 @@ export class ReactRouterRuntime extends Runtime { const pendingRegistrationsForRoute = pendingRegistrations.getPendingRegistrationsForRoute(x); pendingRegistrationsForRoute.forEach(y => { - message += ` - "${y.path ?? y.$name ?? "(no identifier)"}"\r\n`; + message += ` - "${y.path ?? y.$id ?? "(no identifier)"}"\r\n`; }); message += "\r\n"; }); message += `If you are certain that the route${pendingRoutes.length !== 1 ? "s" : ""} has been registered, make sure that the following conditions are met:\r\n`; - message += "- The missing routes \"path\" or \"name\" option perfectly match the provided \"parentPath\" or \"parentName\" (make sure that there's no leading or trailing \"/\" that differs).\r\n"; + message += "- The missing routes \"path\" or \"$id\" option perfectly match the provided \"parentPath\" or \"parentId\" (make sure that there's no leading or trailing \"/\" that differs).\r\n"; message += "- The missing routes has been registered with the runtime.registerRoute function. A route cannot be registered under a parent route that has not be registered with the runtime.registerRoute function.\r\n"; message += "For more information about nested routes, refers to https://gsoft-inc.github.io/wl-squide/reference/runtime/runtime-class/#register-nested-routes-under-an-existing-route.\r\n"; message += "For more information about the PublicRoutes and ProtectedRoutes outlets, refers to https://gsoft-inc.github.io/wl-squide/reference/#routing."; diff --git a/packages/react-router/src/routeRegistry.ts b/packages/react-router/src/routeRegistry.ts index f156ea288..25ad07dc1 100644 --- a/packages/react-router/src/routeRegistry.ts +++ b/packages/react-router/src/routeRegistry.ts @@ -1,15 +1,15 @@ import type { IndexRouteObject, NonIndexRouteObject } from "react-router-dom"; -import { ProtectedRoutes, ProtectedRoutesOutletName, PublicRoutes, PublicRoutesOutletName, isProtectedRoutesOutletRoute, isPublicRoutesOutletRoute } from "./outlets.ts"; +import { ProtectedRoutes, ProtectedRoutesOutletId, PublicRoutes, PublicRoutesOutletId, isProtectedRoutesOutletRoute, isPublicRoutesOutletRoute } from "./outlets.ts"; export type RouteVisibility = "public" | "protected"; export interface IndexRoute extends IndexRouteObject { - $name?: string; + $id?: string; $visibility?: RouteVisibility; } export interface NonIndexRoute extends Omit { - $name?: string; + $id?: string; $visibility?: RouteVisibility; children?: Route[]; } @@ -19,7 +19,7 @@ export type Route = IndexRoute | NonIndexRoute; export interface AddRouteOptions { hoist?: true; parentPath?: string; - parentName?: string; + parentId?: string; } export type RouteRegistrationStatus = "pending" | "registered"; @@ -43,8 +43,8 @@ export function createIndexKey(route: Route) { return normalizePath(route.path); } - if (route.$name) { - return route.$name; + if (route.$id) { + return route.$id; } } @@ -56,7 +56,7 @@ export class RouteRegistry { readonly #routesIndex: Map = new Map(); // An index of pending routes to register once their parent is registered. - // + // readonly #pendingRegistrationsIndex: Map = new Map(); #addIndex(route: Route) { @@ -130,42 +130,42 @@ export class RouteRegistry { return completedPendingRegistrations; } - #validateRouteRegistrationOptions(route: Route, { hoist, parentPath, parentName }: AddRouteOptions = {}) { + #validateRouteRegistrationOptions(route: Route, { hoist, parentPath, parentId }: AddRouteOptions = {}) { if (hoist && parentPath) { - throw new Error(`[squide] A route cannot have the "hoist" option when a "publicPath" option is provided. Route id: "${route.path ?? route.$name ?? "(no identifier)"}".`); + throw new Error(`[squide] A route cannot have the "hoist" option when a "publicPath" option is provided. Route id: "${route.path ?? route.$id ?? "(no identifier)"}".`); } - if (hoist && parentName) { - throw new Error(`[squide] A route cannot have the "hoist" option when a "parentName" option is provided. Route id: "${route.path ?? route.$name ?? "(no identifier)"}".`); + if (hoist && parentId) { + throw new Error(`[squide] A route cannot have the "hoist" option when a "parentId" option is provided. Route id: "${route.path ?? route.$id ?? "(no identifier)"}".`); } } add(route: Route, options: AddRouteOptions = {}) { - let parentName = options.parentName; + let parentId = options.parentId; // By default, a route that is not hoisted nor nested under a known // parent will be rendered under the PublicRoutes or ProtectedRoutes outlet depending on the route visibility.. - if (!options.hoist && !parentName && !isPublicRoutesOutletRoute(route) && !isProtectedRoutesOutletRoute(route)) { - parentName = route.$visibility === "public" ? PublicRoutesOutletName : ProtectedRoutesOutletName; + if (!options.hoist && !parentId && !isPublicRoutesOutletRoute(route) && !isProtectedRoutesOutletRoute(route)) { + parentId = route.$visibility === "public" ? PublicRoutesOutletId : ProtectedRoutesOutletId; } this.#validateRouteRegistrationOptions(route, options); return this.#addRoute(route, { ...options, - parentName + parentId }); } - #addRoute(route: Route, { parentPath, parentName }: AddRouteOptions) { + #addRoute(route: Route, { parentPath, parentId }: AddRouteOptions) { if (parentPath) { // The normalized path cannot be undefined because it's been provided by the consumer // (e.g. it cannot be a pathless route). return this.#addNestedRoutes([route], normalizePath(parentPath)!); } - if (parentName) { - return this.#addNestedRoutes([route], parentName); + if (parentId) { + return this.#addNestedRoutes([route], parentId); } return this.#addRootRoute(route); @@ -246,10 +246,10 @@ export class PendingRouteRegistrations { } isPublicRoutesOutletPending() { - return this.#pendingRegistrationsIndex.has(PublicRoutes.$name!); + return this.#pendingRegistrationsIndex.has(PublicRoutes.$id!); } isProtectedRoutesOutletPending() { - return this.#pendingRegistrationsIndex.has(ProtectedRoutes.$name!); + return this.#pendingRegistrationsIndex.has(ProtectedRoutes.$id!); } } diff --git a/packages/react-router/tests/reactRouterRuntime.test.tsx b/packages/react-router/tests/reactRouterRuntime.test.tsx index 0665c3710..4895ee005 100644 --- a/packages/react-router/tests/reactRouterRuntime.test.tsx +++ b/packages/react-router/tests/reactRouterRuntime.test.tsx @@ -1,4 +1,4 @@ -import { isProtectedRoutesOutletRoute, isPublicRoutesOutletRoute, ProtectedRoutes, ProtectedRoutesOutletName, PublicRoutes, PublicRoutesOutletName } from "../src/outlets.ts"; +import { isProtectedRoutesOutletRoute, isPublicRoutesOutletRoute, ProtectedRoutes, ProtectedRoutesOutletId, PublicRoutes, PublicRoutesOutletId } from "../src/outlets.ts"; import { ReactRouterRuntime } from "../src/reactRouterRuntime.ts"; import type { Route } from "../src/routeRegistry.ts"; @@ -135,7 +135,7 @@ describe("registerRoute", () => { registerPublicRoutesOutlet(runtime); expect(runtime.routes.length).toBe(1); - expect(runtime.routes[0].$name).toBe(PublicRoutesOutletName); + expect(runtime.routes[0].$id).toBe(PublicRoutesOutletId); }); }); @@ -263,7 +263,7 @@ describe("registerRoute", () => { registerProtectedRoutesOutlet(runtime); expect(runtime.routes.length).toBe(1); - expect(runtime.routes[0].$name).toBe(ProtectedRoutesOutletName); + expect(runtime.routes[0].$id).toBe(ProtectedRoutesOutletId); }); }); }); @@ -485,14 +485,14 @@ describe("registerRoute", () => { const runtime = new ReactRouterRuntime(); runtime.registerRoute({ - $name: "foo", + $id: "foo", element:
Hello!
}, { hoist: true }); expect(runtime.routes.length).toBe(1); - expect(runtime.routes[0].$name).toBe("foo"); + expect(runtime.routes[0].$id).toBe("foo"); }); test("can register a nested route with a name", () => { @@ -502,7 +502,7 @@ describe("registerRoute", () => { element:
Hello
, children: [ { - $name: "foo", + $id: "foo", element:
You!
} ] @@ -511,7 +511,7 @@ describe("registerRoute", () => { }); expect(runtime.routes.length).toBe(1); - expect(runtime.routes[0].children![0].$name).toBe("foo"); + expect(runtime.routes[0].children![0].$id).toBe("foo"); }); }); @@ -747,12 +747,12 @@ describe("registerRoute", () => { }); }); - describe("parentName", () => { + describe("parentId", () => { test("when the parent route has already been registered, register the nested route", () => { const runtime = new ReactRouterRuntime(); runtime.registerRoute({ - $name: "layout", + $id: "layout", element:
Hello!
}, { hoist: true @@ -764,7 +764,7 @@ describe("registerRoute", () => { path: "/layout/nested", element:
Hello!
}, { - parentName: "layout" + parentId: "layout" }); expect(runtime.routes.length).toBe(1); @@ -778,7 +778,7 @@ describe("registerRoute", () => { path: "/layout/nested", element:
Hello!
}, { - parentName: "layout" + parentId: "layout" }); expect(runtime.routes.length).toBe(0); @@ -791,14 +791,14 @@ describe("registerRoute", () => { path: "/layout/nested", element:
Hello!
}, { - parentName: "layout" }); + parentId: "layout" }); runtime.registerRoute({ path: "/layout/another-nested", element:
Hello!
} , { - parentName: "layout" + parentId: "layout" }); expect(runtime.routes.length).toBe(0); @@ -814,7 +814,7 @@ describe("registerRoute", () => { expect(runtime.routes[0].children).toBeUndefined(); runtime.registerRoute({ - $name: "layout", + $id: "layout", element:
Hello!
}, { hoist: true @@ -831,7 +831,7 @@ describe("registerRoute", () => { path: "/layout/nested", element:
Hello!
}, { - parentName: "layout" + parentId: "layout" }); expect(runtime.routes.length).toBe(0); @@ -843,7 +843,7 @@ describe("registerRoute", () => { element:
You!
, children: [ { - $name: "layout", + $id: "layout", element:
Hello from nested!
} ] @@ -862,25 +862,25 @@ describe("registerRoute", () => { const runtime = new ReactRouterRuntime(); runtime.registerRoute({ - $name: "layout", + $id: "layout", element:
Hello!
}, { hoist: true }); runtime.registerRoute({ - $name: "layout-nested", + $id: "layout-nested", element:
Hello!
} , { - parentName: "layout" + parentId: "layout" }); runtime.registerRoute({ path: "/layout/nested/another-level", element:
Hello!
}, { - parentName: "layout-nested" + parentId: "layout-nested" }); expect(runtime.routes.length).toBe(1); @@ -897,7 +897,7 @@ describe("registerRoute", () => { element:
You!
, children: [ { - $name: "deeply-nested-layout", + $id: "deeply-nested-layout", element:
Hello from nested!
} ] @@ -908,20 +908,20 @@ describe("registerRoute", () => { }); runtime.registerRoute({ - $name: "deeply-nested-layout/another-level", + $id: "deeply-nested-layout/another-level", element:
Hello!
}, { - parentName: "deeply-nested-layout" + parentId: "deeply-nested-layout" }); expect(runtime.routes.length).toBe(1); - expect(runtime.routes[0].children![0].children![0].children![0].$name).toBe("deeply-nested-layout/another-level"); + expect(runtime.routes[0].children![0].children![0].children![0].$id).toBe("deeply-nested-layout/another-level"); runtime.registerRoute({ path: "/deeply-nested-layout/another-level/yet-another-level", element:
Hello!
}, { - parentName: "deeply-nested-layout/another-level" + parentId: "deeply-nested-layout/another-level" }); expect(runtime.routes.length).toBe(1); @@ -935,7 +935,7 @@ describe("registerRoute", () => { element:
Hello
}, { hoist: true, - parentName: "foo" + parentId: "foo" })).toThrow(); }); }); @@ -1037,7 +1037,7 @@ describe("registerRoute", () => { element:
Hello
, children: [ { - $name: "foo", + $id: "foo", element:
You!
} ] @@ -1046,7 +1046,7 @@ describe("registerRoute", () => { }); expect(runtime.routes.length).toBe(1); - expect(runtime.routes[0].children![0].$name).toBe("foo"); + expect(runtime.routes[0].children![0].$id).toBe("foo"); }); }); @@ -1085,14 +1085,14 @@ describe("registerRoute", () => { const runtime = new ReactRouterRuntime(); runtime.registerRoute({ - $name: "foo", + $id: "foo", element:
Hello!
}, { hoist: true }); expect(runtime.routes.length).toBe(1); - expect(runtime.routes[0].$name).toBe("foo"); + expect(runtime.routes[0].$id).toBe("foo"); }); }); @@ -1314,10 +1314,6 @@ describe("registerNavigationItem", () => { expect(runtime.getNavigationItems("bar").length).toBe(1); expect(runtime.getNavigationItems("bar")[0].$id).toBe("section"); expect(runtime.getNavigationItems("bar")[0].children!.length).toBe(0); - - // expect(runtime.getNavigationItems().length).toBe(1); - // expect(runtime.getNavigationItems()[0].$id).toBe("section"); - // expect(runtime.getNavigationItems()[0].children!.length).toBe(0); }); }); }); @@ -1606,7 +1602,7 @@ describe("_validateRegistrations", () => { }); }); - describe("parentName", () => { + describe("parentId", () => { test("when there are no pending registrations, do nothing", () => { const runtime = new ReactRouterRuntime(); @@ -1614,11 +1610,11 @@ describe("_validateRegistrations", () => { path: "/layout/nested", element:
Hello!
}, { - parentName: "layout" + parentId: "layout" }); runtime.registerRoute({ - $name: "layout", + $id: "layout", element:
Hello!
}, { hoist: true @@ -1634,7 +1630,7 @@ describe("_validateRegistrations", () => { path: "/layout/nested", element:
Hello!
}, { - parentName: "layout" + parentId: "layout" }); expect(() => runtime._validateRegistrations()).toThrow(); diff --git a/packages/react-router/tests/routeRegistry.test.tsx b/packages/react-router/tests/routeRegistry.test.tsx index 85fb7847a..001c0a1d8 100644 --- a/packages/react-router/tests/routeRegistry.test.tsx +++ b/packages/react-router/tests/routeRegistry.test.tsx @@ -37,7 +37,7 @@ describe("createIndexKey", () => { test("when the route has a name, return the route name", () => { const result = createIndexKey({ - $name: "foo", + $id: "foo", element:
Hello!
}); diff --git a/samples/basic/shell/src/register.tsx b/samples/basic/shell/src/register.tsx index 49720347e..e73ed7944 100644 --- a/samples/basic/shell/src/register.tsx +++ b/samples/basic/shell/src/register.tsx @@ -9,7 +9,7 @@ export interface RegisterShellOptions { function registerRoutes(runtime: FireflyRuntime, host?: string) { runtime.registerPublicRoute({ // Pathless route to declare a root layout and a root error boundary. - $name: "root-layout", + $id: "root-layout", element: , children: [ PublicRoutes @@ -44,7 +44,7 @@ function registerRoutes(runtime: FireflyRuntime, host?: string) { } ] }, { - parentName: "root-layout" + parentId: "root-layout" }); runtime.registerPublicRoute({ diff --git a/samples/endpoints/shell/src/register.tsx b/samples/endpoints/shell/src/register.tsx index 0519b9b55..9e1a78ad4 100644 --- a/samples/endpoints/shell/src/register.tsx +++ b/samples/endpoints/shell/src/register.tsx @@ -11,7 +11,7 @@ export interface RegisterShellOptions { function registerRoutes(runtime: FireflyRuntime, host?: string) { runtime.registerPublicRoute({ // Pathless route to declare a root layout and a root error boundary. - $name: "root-layout", + $id: "root-layout", element: , children: [ PublicRoutes @@ -52,7 +52,7 @@ function registerRoutes(runtime: FireflyRuntime, host?: string) { } ] }, { - parentName: "root-layout" + parentId: "root-layout" }); runtime.registerPublicRoute({