@wordpress/boot 0.4.0 → 0.4.1-next.ba3aee3a2.0

package/src/components/root/single-page.tsx

@@ -7,10 +7,8 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { privateApis as routePrivateApis } from '@wordpress/route';
-// @ts-expect-error Commands is not typed properly.
-import { CommandMenu } from '@wordpress/commands';
-import { privateApis as themePrivateApis } from '@wordpress/theme';
 import { EditorSnackbars } from '@wordpress/editor';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -21,9 +19,9 @@ import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
 import './style.scss';
 import useRouteTitle from '../app/use-route-title';
+import { UserThemeProvider } from '../user-theme-provider';
 
 const { useMatches, Outlet } = unlock( routePrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 /**
  * Root component for single page mode (no sidebar).
@@ -43,35 +41,39 @@ export default function RootSinglePage() {
 	useRouteTitle();
 
 	return (
-		<ThemeProvider isRoot color={ { bg: '#f8f8f8', primary: '#3858e9' } }>
-			<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
-				<div
-					className={ clsx( 'boot-layout boot-layout--single-page', {
-						'has-canvas': !! canvas || canvas === null,
-						'has-full-canvas': isFullScreen,
-					} ) }
-				>
-					<CommandMenu />
-					<SavePanel />
-					<EditorSnackbars />
-					<div className="boot-layout__surfaces">
-						<ThemeProvider
-							color={ { bg: '#ffffff', primary: '#3858e9' } }
-						>
-							<Outlet />
-						</ThemeProvider>
-						{ /* Render Canvas in Root to prevent remounting on route changes */ }
-						{ ( canvas || canvas === null ) && (
-							<div className="boot-layout__canvas">
-								<CanvasRenderer
-									canvas={ canvas }
-									routeContentModule={ routeContentModule }
-								/>
-							</div>
+		<SlotFillProvider>
+			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
+				<UserThemeProvider color={ { bg: '#1d2327' } }>
+					<div
+						className={ clsx(
+							'boot-layout boot-layout--single-page',
+							{
+								'has-canvas': !! canvas || canvas === null,
+								'has-full-canvas': isFullScreen,
+							}
 						) }
+					>
+						<SavePanel />
+						<EditorSnackbars />
+						<div className="boot-layout__surfaces">
+							<UserThemeProvider color={ { bg: '#ffffff' } }>
+								<Outlet />
+								{ /* Render Canvas in Root to prevent remounting on route changes */ }
+								{ ( canvas || canvas === null ) && (
+									<div className="boot-layout__canvas">
+										<CanvasRenderer
+											canvas={ canvas }
+											routeContentModule={
+												routeContentModule
+											}
+										/>
+									</div>
+								) }
+							</UserThemeProvider>
+						</div>
 					</div>
-				</div>
-			</ThemeProvider>
-		</ThemeProvider>
+				</UserThemeProvider>
+			</UserThemeProvider>
+		</SlotFillProvider>
 	);
 }

package/src/components/root/style.scss

@@ -72,6 +72,7 @@
 
 		.boot-layout--single-page & {
 			margin-top: 0;
+			margin-left: 0;
 		}
 	}
 }

package/src/components/site-hub/index.tsx

@@ -22,16 +22,18 @@ import type { UnstableBase } from '@wordpress/core-data';
  * Internal dependencies
  */
 import SiteIconLink from '../site-icon-link';
+import { store as bootStore } from '../../store';
 import './style.scss';
 
 function SiteHub() {
-	const { homeUrl, siteTitle } = useSelect( ( select ) => {
+	const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
 		const { getEntityRecord } = select( coreStore );
 		const _base = getEntityRecord< UnstableBase >(
 			'root',
 			'__unstableBase'
 		);
 		return {
+			dashboardLink: select( bootStore ).getDashboardLink(),
 			homeUrl: _base?.home,
 			siteTitle:
 				! _base?.name && !! _base?.url
@@ -43,12 +45,20 @@ function SiteHub() {
 
 	return (
 		<div className="boot-site-hub">
-			<SiteIconLink to="/" aria-label={ __( 'Go to the Dashboard' ) } />
+			<SiteIconLink
+				to={ dashboardLink || '/' }
+				aria-label={ __( 'Go to the Dashboard' ) }
+			/>
 			<ExternalLink
 				href={ homeUrl ?? '/' }
 				className="boot-site-hub__title"
 			>
-				{ siteTitle && decodeEntities( siteTitle ) }
+				<div className="boot-site-hub__title-text">
+					{ siteTitle && decodeEntities( siteTitle ) }
+				</div>
+				<div className="boot-site-hub__url">
+					{ filterURLForDisplay( homeUrl ?? '' ) }
+				</div>
 			</ExternalLink>
 			<HStack className="boot-site-hub__actions">
 				<Button

package/src/components/site-hub/style.scss

@@ -17,17 +17,15 @@
 }
 
 .boot-site-hub__title {
-	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	font-size: variables.$font-size-medium;
-	font-weight: variables.$font-weight-medium;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	display: flex;
+	align-items: center;
 	text-decoration: none;
 
 	.components-external-link__contents {
 		text-decoration: none;
 		margin-inline-start: variables.$grid-unit-05;
+		overflow: hidden;
+		max-width: 140px;
 	}
 
 	// Show icon on hover
@@ -52,3 +50,20 @@
 		outline-offset: calc(-1 * var(--wpds-border-width-interactive-focus, 2px));
 	}
 }
+
+.boot-site-hub__title-text {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	font-size: variables.$font-size-medium;
+	font-weight: variables.$font-weight-medium;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.boot-site-hub__url {
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	font-size: variables.$font-size-small;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/components/site-icon/style.scss

@@ -7,7 +7,7 @@
 .boot-site-icon__icon {
 	width: variables.$grid-unit-40;
 	height: variables.$grid-unit-40;
-	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	fill: var(--wpds-color-fg-content-neutral, #1e1e1e);
 }
 
 .boot-site-icon__image {

package/src/components/site-icon-link/index.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Link, privateApis as routePrivateApis } from '@wordpress/route';
+import { Tooltip } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -25,21 +26,23 @@ function SiteIconLink( {
 	const canGoBack = useCanGoBack();
 
 	return (
-		<Link
-			to={ to }
-			aria-label={ props[ 'aria-label' ] }
-			className="boot-site-icon-link"
-			onClick={ ( event ) => {
-				// If possible, restore the previous page with
-				// filters etc.
-				if ( canGoBack && isBackButton ) {
-					event.preventDefault();
-					router.history.back();
-				}
-			} }
-		>
-			<SiteIcon />
-		</Link>
+		<Tooltip text={ props[ 'aria-label' ] } placement="right">
+			<Link
+				to={ to }
+				aria-label={ props[ 'aria-label' ] }
+				className="boot-site-icon-link"
+				onClick={ ( event ) => {
+					// If possible, restore the previous page with
+					// filters etc.
+					if ( canGoBack && isBackButton ) {
+						event.preventDefault();
+						router.history.back();
+					}
+				} }
+			>
+				<SiteIcon />
+			</Link>
+		</Tooltip>
 	);
 }
 

package/src/components/user-theme-provider/index.tsx

@@ -0,0 +1,35 @@
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../../lock-unlock';
+
+const ThemeProvider: typeof ThemeProviderType =
+	unlock( themePrivateApis ).ThemeProvider;
+
+const THEME_PRIMARY_COLORS = new Map< string, string >( [
+	[ 'light', '#0085ba' ],
+	[ 'modern', '#3858e9' ],
+	[ 'blue', '#096484' ],
+	[ 'coffee', '#46403c' ],
+	[ 'ectoplasm', '#523f6d' ],
+	[ 'midnight', '#e14d43' ],
+	[ 'ocean', '#627c83' ],
+	[ 'sunrise', '#dd823b' ],
+] );
+
+export function getAdminThemePrimaryColor(): string | undefined {
+	const theme =
+		document.body.className.match( /admin-color-([a-z]+)/ )?.[ 1 ];
+
+	return theme && THEME_PRIMARY_COLORS.get( theme );
+}
+
+export function UserThemeProvider( {
+	color,
+	...restProps
+}: React.ComponentProps< typeof ThemeProvider > ) {
+	const primary = getAdminThemePrimaryColor();
+
+	return <ThemeProvider { ...restProps } color={ { primary, ...color } } />;
+}

package/src/components/user-theme-provider/test/index.test.ts

@@ -0,0 +1,11 @@
+import { getAdminThemePrimaryColor } from '../index';
+
+describe( 'getAdminThemePrimaryColor', () => {
+	it( 'should return the primary color for the admin theme from the body class', () => {
+		document.body.className = 'foo admin-color-coffee bar';
+
+		const primaryColor = getAdminThemePrimaryColor();
+
+		expect( primaryColor ).toBe( '#46403c' );
+	} );
+} );

package/src/store/actions.ts

@@ -26,7 +26,15 @@ export function registerRoute( route: Route ) {
 	};
 }
 
+export function setDashboardLink( dashboardLink: string ) {
+	return {
+		type: 'SET_DASHBOARD_LINK' as const,
+		dashboardLink,
+	};
+}
+
 export type Action =
 	| ReturnType< typeof registerMenuItem >
 	| ReturnType< typeof updateMenuItem >
-	| ReturnType< typeof registerRoute >;
+	| ReturnType< typeof registerRoute >
+	| ReturnType< typeof setDashboardLink >;

package/src/store/reducer.ts

@@ -7,6 +7,7 @@ import type { State } from './types';
 const initialState: State = {
 	menuItems: {},
 	routes: [],
+	dashboardLink: undefined,
 };
 
 export function reducer( state: State = initialState, action: Action ): State {
@@ -37,6 +38,12 @@ export function reducer( state: State = initialState, action: Action ): State {
 				...state,
 				routes: [ ...state.routes, action.route ],
 			};
+
+		case 'SET_DASHBOARD_LINK':
+			return {
+				...state,
+				dashboardLink: action.dashboardLink,
+			};
 	}
 
 	return state;

package/src/store/selectors.ts

@@ -10,3 +10,7 @@ export function getMenuItems( state: State ) {
 export function getRoutes( state: State ) {
 	return state.routes;
 }
+
+export function getDashboardLink( state: State ) {
+	return state.dashboardLink;
+}

package/src/store/types.ts

@@ -163,4 +163,5 @@ export interface Route {
 export interface State {
 	menuItems: Record< string, MenuItem >;
 	routes: Route[];
+	dashboardLink?: string;
 }

package/src/style.scss

@@ -1,47 +1,32 @@
 @use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
 @use "@wordpress/admin-ui/build-style/style.css" as *;
 @use "@wordpress/base-styles/mixins" as *;
-@use "@wordpress/base-styles/variables";
+@use "@wordpress/base-styles/variables" as *;
 
-// Reset wp-admin layout styles when loaded inside wp-admin.
 .boot-layout-container .boot-layout {
-	height: calc(100vh - #{variables.$admin-bar-height});
-}
-
-body:has(.boot-layout-container) {
-	background: #1d2327; // Same as WP-Admin sidebar
-	overflow: hidden;
-	@include wp-admin-reset( ".boot-layout-container" );
-}
-
-#wpcontent {
-	padding-left: 0;
-}
-
-#wpbody-content {
-	padding-bottom: 0;
-}
-
-#wpfooter {
-	display: none;
-}
+	// On mobile the main content area has to scroll, otherwise you can invoke
+	// the overscroll bounce on the non-scrolling container, for a bad experience.
+	@include break-small {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		min-height: calc(100vh - #{$admin-bar-height-big});
+	}
 
-body:has(.boot-layout.has-full-canvas) {
+	// The WP header height changes at this breakpoint.
 	@include break-medium {
-		// Reset the html.wp-topbar padding.
-		// Because this uses negative margins, we have to compensate for the height.
-		margin-top: - variables.$admin-bar-height;
-		height: calc(100% + #{ variables.$admin-bar-height });
+		min-height: calc(100vh - #{$admin-bar-height});
 
-		#adminmenumain,
-		#wpadminbar {
-			display: none;
+		body:has(.boot-layout.has-full-canvas) & {
+			min-height: 100vh;
 		}
+	}
 
-		#wpcontent,
-		#wpfooter {
-			margin-left: 0;
-		}
+	img {
+		max-width: 100%;
+		height: auto;
 	}
 }
 

package/build-module/components/app/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/app/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createRoot, StrictMode, type ComponentType } from '@wordpress/element';\nimport { dispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Router from './router';\nimport RootSinglePage from '../root/single-page';\nimport { store } from '../../store';\nimport type { MenuItem, Route } from '../../store/types';\n\nfunction App( { rootComponent }: { rootComponent?: ComponentType } ) {\n\tconst routes = useSelect( ( select ) => select( store ).getRoutes(), [] );\n\n\treturn <Router routes={ routes } rootComponent={ rootComponent } />;\n}\n\nexport async function init( {\n\tmountId,\n\tmenuItems,\n\troutes,\n\tinitModules,\n}: {\n\tmountId: string;\n\tmenuItems?: MenuItem[];\n\troutes?: Route[];\n\tinitModules?: string[];\n} ) {\n\t( menuItems ?? [] ).forEach( ( menuItem ) => {\n\t\tdispatch( store ).registerMenuItem( menuItem.id, menuItem );\n\t} );\n\n\t( routes ?? [] ).forEach( ( route ) => {\n\t\tdispatch( store ).registerRoute( route );\n\t} );\n\n\tfor ( const moduleId of initModules ?? [] ) {\n\t\tconst module = await import( moduleId );\n\t\tawait module.init();\n\t}\n\n\t// Render the app\n\tconst rootElement = document.getElementById( mountId );\n\tif ( rootElement ) {\n\t\tconst root = createRoot( rootElement );\n\t\troot.render(\n\t\t\t<StrictMode>\n\t\t\t\t<App />\n\t\t\t</StrictMode>\n\t\t);\n\t}\n}\n\nexport async function initSinglePage( {\n\tmountId,\n\troutes,\n}: {\n\tmountId: string;\n\troutes?: Route[];\n} ) {\n\t( routes ?? [] ).forEach( ( route ) => {\n\t\tdispatch( store ).registerRoute( route );\n\t} );\n\n\t// Render the app without sidebar\n\tconst rootElement = document.getElementById( mountId );\n\tif ( rootElement ) {\n\t\tconst root = createRoot( rootElement );\n\t\troot.render(\n\t\t\t<StrictMode>\n\t\t\t\t<App rootComponent={ RootSinglePage } />\n\t\t\t</StrictMode>\n\t\t);\n\t}\n}\n"],
-  "mappings": ";AAGA,SAAS,YAAY,kBAAsC;AAC3D,SAAS,UAAU,iBAAiB;AAKpC,OAAO,YAAY;AACnB,OAAO,oBAAoB;AAC3B,SAAS,aAAa;AAMd;AAHR,SAAS,IAAK,EAAE,cAAc,GAAuC;AACpE,QAAM,SAAS,UAAW,CAAE,WAAY,OAAQ,KAAM,EAAE,UAAU,GAAG,CAAC,CAAE;AAExE,SAAO,oBAAC,UAAO,QAAkB,eAAgC;AAClE;AAEA,eAAsB,KAAM;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKI;AACH,GAAE,aAAa,CAAC,GAAI,QAAS,CAAE,aAAc;AAC5C,aAAU,KAAM,EAAE,iBAAkB,SAAS,IAAI,QAAS;AAAA,EAC3D,CAAE;AAEF,GAAE,UAAU,CAAC,GAAI,QAAS,CAAE,UAAW;AACtC,aAAU,KAAM,EAAE,cAAe,KAAM;AAAA,EACxC,CAAE;AAEF,aAAY,YAAY,eAAe,CAAC,GAAI;AAC3C,UAAM,SAAS,MAAM,OAAQ;AAC7B,UAAM,OAAO,KAAK;AAAA,EACnB;AAGA,QAAM,cAAc,SAAS,eAAgB,OAAQ;AACrD,MAAK,aAAc;AAClB,UAAM,OAAO,WAAY,WAAY;AACrC,SAAK;AAAA,MACJ,oBAAC,cACA,8BAAC,OAAI,GACN;AAAA,IACD;AAAA,EACD;AACD;AAEA,eAAsB,eAAgB;AAAA,EACrC;AAAA,EACA;AACD,GAGI;AACH,GAAE,UAAU,CAAC,GAAI,QAAS,CAAE,UAAW;AACtC,aAAU,KAAM,EAAE,cAAe,KAAM;AAAA,EACxC,CAAE;AAGF,QAAM,cAAc,SAAS,eAAgB,OAAQ;AACrD,MAAK,aAAc;AAClB,UAAM,OAAO,WAAY,WAAY;AACrC,SAAK;AAAA,MACJ,oBAAC,cACA,8BAAC,OAAI,eAAgB,gBAAiB,GACvC;AAAA,IACD;AAAA,EACD;AACD;",
-  "names": []
-}

package/build-module/components/app/router.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/app/router.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useEffect } from '@wordpress/element';\nimport { Page } from '@wordpress/admin-ui';\nimport {\n\tprivateApis as routePrivateApis,\n\ttype AnyRoute,\n} from '@wordpress/route';\nimport { resolveSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport Root from '../root';\nimport type { Route, RouteConfig, RouteLoaderContext } from '../../store/types';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tcreateLazyRoute,\n\tcreateRouter,\n\tcreateRootRoute,\n\tcreateRoute,\n\tRouterProvider,\n\tcreateBrowserHistory,\n\tparseHref,\n\tuseLoaderData,\n} = unlock( routePrivateApis );\n\n// Not found component\nfunction NotFoundComponent() {\n\treturn (\n\t\t<div className=\"boot-layout__stage\">\n\t\t\t<Page title={ __( 'Route not found' ) } hasPadding>\n\t\t\t\t{ __( \"The page you're looking for does not exist\" ) }\n\t\t\t</Page>\n\t\t</div>\n\t);\n}\n\n/**\n * Creates a TanStack route from a Route definition.\n *\n * @param route       Route configuration\n * @param parentRoute Parent route.\n * @return Tanstack Route.\n */\nasync function createRouteFromDefinition(\n\troute: Route,\n\tparentRoute: AnyRoute\n) {\n\tlet routeConfig: RouteConfig = {};\n\n\tif ( route.route_module ) {\n\t\tconst module = await import( route.route_module );\n\t\trouteConfig = module.route || {};\n\t}\n\n\t// Create route without component initially\n\tlet tanstackRoute = createRoute( {\n\t\tgetParentRoute: () => parentRoute,\n\t\tpath: route.path,\n\t\tbeforeLoad: routeConfig.beforeLoad\n\t\t\t? ( opts: any ) =>\n\t\t\t\t\trouteConfig.beforeLoad!( {\n\t\t\t\t\t\tparams: opts.params || {},\n\t\t\t\t\t\tsearch: opts.search || {},\n\t\t\t\t\t} )\n\t\t\t: undefined,\n\t\tloader: async ( opts: any ) => {\n\t\t\tconst context: RouteLoaderContext = {\n\t\t\t\tparams: opts.params || {},\n\t\t\t\tsearch: opts.deps || {},\n\t\t\t};\n\n\t\t\tconst [ , loaderData, canvasData, titleData ] = await Promise.all( [\n\t\t\t\tresolveSelect( coreStore ).getEntityRecord(\n\t\t\t\t\t'root',\n\t\t\t\t\t'__unstableBase'\n\t\t\t\t),\n\t\t\t\trouteConfig.loader\n\t\t\t\t\t? routeConfig.loader( context )\n\t\t\t\t\t: Promise.resolve( undefined ),\n\t\t\t\trouteConfig.canvas\n\t\t\t\t\t? routeConfig.canvas( context )\n\t\t\t\t\t: Promise.resolve( undefined ),\n\t\t\t\trouteConfig.title\n\t\t\t\t\t? routeConfig.title( context )\n\t\t\t\t\t: Promise.resolve( undefined ),\n\t\t\t] );\n\n\t\t\tlet inspector = true;\n\t\t\tif ( routeConfig.inspector ) {\n\t\t\t\tinspector = await routeConfig.inspector( context );\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...( loaderData as any ),\n\t\t\t\tcanvas: canvasData,\n\t\t\t\tinspector,\n\t\t\t\ttitle: titleData,\n\t\t\t\trouteContentModule: route.content_module,\n\t\t\t};\n\t\t},\n\t\tloaderDeps: ( opts: any ) => opts.search,\n\t} );\n\n\t// Chain .lazy() to preload content module on intent\n\ttanstackRoute = tanstackRoute.lazy( async () => {\n\t\tconst module = route.content_module\n\t\t\t? await import( route.content_module )\n\t\t\t: {};\n\n\t\tconst Stage = module.stage;\n\t\tconst Inspector = module.inspector;\n\n\t\treturn createLazyRoute( route.path )( {\n\t\t\tcomponent: function RouteComponent() {\n\t\t\t\tconst { inspector: showInspector } =\n\t\t\t\t\tuseLoaderData( { from: route.path } ) ?? {};\n\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ Stage && (\n\t\t\t\t\t\t\t<div className=\"boot-layout__stage\">\n\t\t\t\t\t\t\t\t<Stage />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ Inspector && showInspector && (\n\t\t\t\t\t\t\t<div className=\"boot-layout__inspector\">\n\t\t\t\t\t\t\t\t<Inspector />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t},\n\t\t} );\n\t} );\n\n\treturn tanstackRoute;\n}\n\n/**\n * Creates a route tree from route definitions.\n *\n * @param routes        Routes definition.\n * @param rootComponent Root component to use for the router.\n * @return Router tree.\n */\nasync function createRouteTree(\n\troutes: Route[],\n\trootComponent: ComponentType = Root\n) {\n\tconst rootRoute = createRootRoute( {\n\t\tcomponent: rootComponent as any,\n\t\tcontext: () => ( {} ),\n\t} );\n\n\t// Create routes from definitions\n\tconst dynamicRoutes = await Promise.all(\n\t\troutes.map( ( route ) => createRouteFromDefinition( route, rootRoute ) )\n\t);\n\n\treturn rootRoute.addChildren( dynamicRoutes );\n}\n\n// Create custom history that parses ?p= query parameter\nfunction createPathHistory() {\n\treturn createBrowserHistory( {\n\t\tparseLocation: () => {\n\t\t\tconst url = new URL( window.location.href );\n\t\t\tconst path = url.searchParams.get( 'p' ) || '/';\n\t\t\tconst pathHref = `${ path }${ url.hash }`;\n\t\t\treturn parseHref( pathHref, window.history.state );\n\t\t},\n\t\tcreateHref: ( href: string ) => {\n\t\t\tconst searchParams = new URLSearchParams( window.location.search );\n\t\t\tsearchParams.set( 'p', href );\n\t\t\treturn `${ window.location.pathname }?${ searchParams }`;\n\t\t},\n\t} );\n}\n\ninterface RouterProps {\n\troutes: Route[];\n\trootComponent?: ComponentType;\n}\n\nexport default function Router( {\n\troutes,\n\trootComponent = Root,\n}: RouterProps ) {\n\tconst [ router, setRouter ] = useState< any >( null );\n\n\tuseEffect( () => {\n\t\tlet cancelled = false;\n\n\t\tasync function initializeRouter() {\n\t\t\tconst history = createPathHistory();\n\t\t\tconst routeTree = await createRouteTree( routes, rootComponent );\n\n\t\t\tif ( ! cancelled ) {\n\t\t\t\tconst newRouter = createRouter( {\n\t\t\t\t\thistory,\n\t\t\t\t\trouteTree,\n\t\t\t\t\tdefaultPreload: 'intent',\n\t\t\t\t\tdefaultNotFoundComponent: NotFoundComponent,\n\t\t\t\t\tdefaultViewTransition: true,\n\t\t\t\t} );\n\t\t\t\tsetRouter( newRouter );\n\t\t\t}\n\t\t}\n\n\t\tinitializeRouter();\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [ routes, rootComponent ] );\n\n\tif ( ! router ) {\n\t\treturn <div>Loading routes...</div>;\n\t}\n\n\treturn <RouterProvider router={ router } />;\n}\n"],
-  "mappings": "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",
-  "names": []
-}