@wordpress/boot 0.3.1-next.738bb1424.0 → 0.4.0

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

@@ -1,9 +1,9 @@
 // packages/boot/src/components/app/index.tsx
 import { createRoot, StrictMode } from "@wordpress/element";
 import { dispatch, useSelect } from "@wordpress/data";
-import Router from "./router.js";
-import RootSinglePage from "../root/single-page.js";
-import { store } from "../../store/index.js";
+import Router from "./router";
+import RootSinglePage from "../root/single-page";
+import { store } from "../../store";
 import { jsx } from "react/jsx-runtime";
 function App({ rootComponent }) {
   const routes = useSelect((select) => select(store).getRoutes(), []);

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

@@ -1,14 +1,14 @@
 // packages/boot/src/components/app/router.tsx
 import { __ } from "@wordpress/i18n";
-import { useMemo } from "@wordpress/element";
+import { useState, useEffect } from "@wordpress/element";
 import { Page } from "@wordpress/admin-ui";
 import {
   privateApis as routePrivateApis
 } from "@wordpress/route";
 import { resolveSelect } from "@wordpress/data";
 import { store as coreStore } from "@wordpress/core-data";
-import Root from "../root/index.js";
-import { unlock } from "../../lock-unlock.js";
+import Root from "../root";
+import { unlock } from "../../lock-unlock";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var {
   createLazyRoute,
@@ -23,28 +23,20 @@ var {
 function NotFoundComponent() {
   return /* @__PURE__ */ jsx("div", { className: "boot-layout__stage", children: /* @__PURE__ */ jsx(Page, { title: __("Route not found"), hasPadding: true, children: __("The page you're looking for does not exist") }) });
 }
-function createRouteFromDefinition(route, parentRoute) {
+async function createRouteFromDefinition(route, parentRoute) {
+  let routeConfig = {};
+  if (route.route_module) {
+    const module = await import(route.route_module);
+    routeConfig = module.route || {};
+  }
   let tanstackRoute = createRoute({
     getParentRoute: () => parentRoute,
     path: route.path,
-    beforeLoad: async (opts) => {
-      if (route.route_module) {
-        const module = await import(route.route_module);
-        const routeConfig = module.route || {};
-        if (routeConfig.beforeLoad) {
-          return routeConfig.beforeLoad({
-            params: opts.params || {},
-            search: opts.search || {}
-          });
-        }
-      }
-    },
+    beforeLoad: routeConfig.beforeLoad ? (opts) => routeConfig.beforeLoad({
+      params: opts.params || {},
+      search: opts.search || {}
+    }) : void 0,
     loader: async (opts) => {
-      let routeConfig = {};
-      if (route.route_module) {
-        const module = await import(route.route_module);
-        routeConfig = module.route || {};
-      }
       const context = {
         params: opts.params || {},
         search: opts.deps || {}
@@ -88,13 +80,13 @@ function createRouteFromDefinition(route, parentRoute) {
   });
   return tanstackRoute;
 }
-function createRouteTree(routes, rootComponent = Root) {
+async function createRouteTree(routes, rootComponent = Root) {
   const rootRoute = createRootRoute({
     component: rootComponent,
     context: () => ({})
   });
-  const dynamicRoutes = routes.map(
-    (route) => createRouteFromDefinition(route, rootRoute)
+  const dynamicRoutes = await Promise.all(
+    routes.map((route) => createRouteFromDefinition(route, rootRoute))
   );
   return rootRoute.addChildren(dynamicRoutes);
 }
@@ -117,26 +109,31 @@ function Router({
   routes,
   rootComponent = Root
 }) {
-  const router = useMemo(() => {
-    const history = createPathHistory();
-    const routeTree = createRouteTree(routes, rootComponent);
-    return createRouter({
-      history,
-      routeTree,
-      defaultPreload: "intent",
-      defaultNotFoundComponent: NotFoundComponent,
-      defaultViewTransition: {
-        types: ({
-          fromLocation
-        }) => {
-          if (!fromLocation) {
-            return false;
-          }
-          return ["navigate"];
-        }
+  const [router, setRouter] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    async function initializeRouter() {
+      const history = createPathHistory();
+      const routeTree = await createRouteTree(routes, rootComponent);
+      if (!cancelled) {
+        const newRouter = createRouter({
+          history,
+          routeTree,
+          defaultPreload: "intent",
+          defaultNotFoundComponent: NotFoundComponent,
+          defaultViewTransition: true
+        });
+        setRouter(newRouter);
       }
-    });
+    }
+    initializeRouter();
+    return () => {
+      cancelled = true;
+    };
   }, [routes, rootComponent]);
+  if (!router) {
+    return /* @__PURE__ */ jsx("div", { children: "Loading routes..." });
+  }
   return /* @__PURE__ */ jsx(RouterProvider, { router });
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "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 { useMemo } 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 */\nfunction createRouteFromDefinition( route: Route, parentRoute: AnyRoute ) {\n\t// Create route without component initially\n\tlet tanstackRoute = createRoute( {\n\t\tgetParentRoute: () => parentRoute,\n\t\tpath: route.path,\n\t\tbeforeLoad: async ( opts: any ) => {\n\t\t\t// Import route module here (lazy)\n\t\t\tif ( route.route_module ) {\n\t\t\t\tconst module = await import( route.route_module );\n\t\t\t\tconst routeConfig = module.route || {};\n\n\t\t\t\tif ( routeConfig.beforeLoad ) {\n\t\t\t\t\treturn routeConfig.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\t}\n\t\t\t}\n\t\t},\n\t\tloader: async ( opts: any ) => {\n\t\t\t// Import route module here (lazy)\n\t\t\tlet routeConfig: RouteConfig = {};\n\t\t\tif ( route.route_module ) {\n\t\t\t\tconst module = await import( route.route_module );\n\t\t\t\trouteConfig = module.route || {};\n\t\t\t}\n\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 */\nfunction 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 (now synchronous)\n\tconst dynamicRoutes = routes.map( ( route ) =>\n\t\tcreateRouteFromDefinition( 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 = useMemo( () => {\n\t\tconst history = createPathHistory();\n\t\tconst routeTree = createRouteTree( routes, rootComponent );\n\n\t\treturn createRouter( {\n\t\t\thistory,\n\t\t\trouteTree,\n\t\t\tdefaultPreload: 'intent',\n\t\t\tdefaultNotFoundComponent: NotFoundComponent,\n\t\t\tdefaultViewTransition: {\n\t\t\t\ttypes: ( {\n\t\t\t\t\tfromLocation,\n\t\t\t\t}: {\n\t\t\t\t\tfromLocation?: unknown;\n\t\t\t\t\ttoLocation: unknown;\n\t\t\t\t\tpathChanged: boolean;\n\t\t\t\t\threfChanged: boolean;\n\t\t\t\t\thashChanged: boolean;\n\t\t\t\t} ) => {\n\t\t\t\t\t// Disable view transition on initial navigation (no previous location)\n\t\t\t\t\tif ( ! fromLocation ) {\n\t\t\t\t\t\treturn false;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Enable with navigation type for subsequent navigations\n\t\t\t\t\treturn [ 'navigate' ];\n\t\t\t\t},\n\t\t\t},\n\t\t} );\n\t}, [ routes, rootComponent ] );\n\n\treturn <RouterProvider router={ router } />;\n}\n"],
-  "mappings": ";AAQA,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB;AAAA,EACC,eAAe;AAAA,OAET;AACP,SAAS,qBAAqB;AAC9B,SAAS,SAAS,iBAAiB;AAKnC,OAAO,UAAU;AAEjB,SAAS,cAAc;AAiBpB,SA6FE,UA7FF,KA6FE,YA7FF;AAfH,IAAM;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,OAAQ,gBAAiB;AAG7B,SAAS,oBAAoB;AAC5B,SACC,oBAAC,SAAI,WAAU,sBACd,8BAAC,QAAK,OAAQ,GAAI,iBAAkB,GAAI,YAAU,MAC/C,aAAI,4CAA6C,GACpD,GACD;AAEF;AASA,SAAS,0BAA2B,OAAc,aAAwB;AAEzE,MAAI,gBAAgB,YAAa;AAAA,IAChC,gBAAgB,MAAM;AAAA,IACtB,MAAM,MAAM;AAAA,IACZ,YAAY,OAAQ,SAAe;AAElC,UAAK,MAAM,cAAe;AACzB,cAAM,SAAS,MAAM,OAAQ,MAAM;AACnC,cAAM,cAAc,OAAO,SAAS,CAAC;AAErC,YAAK,YAAY,YAAa;AAC7B,iBAAO,YAAY,WAAY;AAAA,YAC9B,QAAQ,KAAK,UAAU,CAAC;AAAA,YACxB,QAAQ,KAAK,UAAU,CAAC;AAAA,UACzB,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD;AAAA,IACA,QAAQ,OAAQ,SAAe;AAE9B,UAAI,cAA2B,CAAC;AAChC,UAAK,MAAM,cAAe;AACzB,cAAM,SAAS,MAAM,OAAQ,MAAM;AACnC,sBAAc,OAAO,SAAS,CAAC;AAAA,MAChC;AAEA,YAAM,UAA8B;AAAA,QACnC,QAAQ,KAAK,UAAU,CAAC;AAAA,QACxB,QAAQ,KAAK,QAAQ,CAAC;AAAA,MACvB;AAEA,YAAM,CAAE,EAAE,YAAY,YAAY,SAAU,IAAI,MAAM,QAAQ,IAAK;AAAA,QAClE,cAAe,SAAU,EAAE;AAAA,UAC1B;AAAA,UACA;AAAA,QACD;AAAA,QACA,YAAY,SACT,YAAY,OAAQ,OAAQ,IAC5B,QAAQ,QAAS,MAAU;AAAA,QAC9B,YAAY,SACT,YAAY,OAAQ,OAAQ,IAC5B,QAAQ,QAAS,MAAU;AAAA,QAC9B,YAAY,QACT,YAAY,MAAO,OAAQ,IAC3B,QAAQ,QAAS,MAAU;AAAA,MAC/B,CAAE;AAEF,UAAI,YAAY;AAChB,UAAK,YAAY,WAAY;AAC5B,oBAAY,MAAM,YAAY,UAAW,OAAQ;AAAA,MAClD;AAEA,aAAO;AAAA,QACN,GAAK;AAAA,QACL,QAAQ;AAAA,QACR;AAAA,QACA,OAAO;AAAA,QACP,oBAAoB,MAAM;AAAA,MAC3B;AAAA,IACD;AAAA,IACA,YAAY,CAAE,SAAe,KAAK;AAAA,EACnC,CAAE;AAGF,kBAAgB,cAAc,KAAM,YAAY;AAC/C,UAAM,SAAS,MAAM,iBAClB,MAAM,OAAQ,MAAM,kBACpB,CAAC;AAEJ,UAAM,QAAQ,OAAO;AACrB,UAAM,YAAY,OAAO;AAEzB,WAAO,gBAAiB,MAAM,IAAK,EAAG;AAAA,MACrC,WAAW,SAAS,iBAAiB;AACpC,cAAM,EAAE,WAAW,cAAc,IAChC,cAAe,EAAE,MAAM,MAAM,KAAK,CAAE,KAAK,CAAC;AAE3C,eACC,iCACG;AAAA,mBACD,oBAAC,SAAI,WAAU,sBACd,8BAAC,SAAM,GACR;AAAA,UAEC,aAAa,iBACd,oBAAC,SAAI,WAAU,0BACd,8BAAC,aAAU,GACZ;AAAA,WAEF;AAAA,MAEF;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;AASA,SAAS,gBACR,QACA,gBAA+B,MAC9B;AACD,QAAM,YAAY,gBAAiB;AAAA,IAClC,WAAW;AAAA,IACX,SAAS,OAAQ,CAAC;AAAA,EACnB,CAAE;AAGF,QAAM,gBAAgB,OAAO;AAAA,IAAK,CAAE,UACnC,0BAA2B,OAAO,SAAU;AAAA,EAC7C;AAEA,SAAO,UAAU,YAAa,aAAc;AAC7C;AAGA,SAAS,oBAAoB;AAC5B,SAAO,qBAAsB;AAAA,IAC5B,eAAe,MAAM;AACpB,YAAM,MAAM,IAAI,IAAK,OAAO,SAAS,IAAK;AAC1C,YAAM,OAAO,IAAI,aAAa,IAAK,GAAI,KAAK;AAC5C,YAAM,WAAW,GAAI,IAAK,GAAI,IAAI,IAAK;AACvC,aAAO,UAAW,UAAU,OAAO,QAAQ,KAAM;AAAA,IAClD;AAAA,IACA,YAAY,CAAE,SAAkB;AAC/B,YAAM,eAAe,IAAI,gBAAiB,OAAO,SAAS,MAAO;AACjE,mBAAa,IAAK,KAAK,IAAK;AAC5B,aAAO,GAAI,OAAO,SAAS,QAAS,IAAK,YAAa;AAAA,IACvD;AAAA,EACD,CAAE;AACH;AAOe,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA,gBAAgB;AACjB,GAAiB;AAChB,QAAM,SAAS,QAAS,MAAM;AAC7B,UAAM,UAAU,kBAAkB;AAClC,UAAM,YAAY,gBAAiB,QAAQ,aAAc;AAEzD,WAAO,aAAc;AAAA,MACpB;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,0BAA0B;AAAA,MAC1B,uBAAuB;AAAA,QACtB,OAAO,CAAE;AAAA,UACR;AAAA,QACD,MAMO;AAEN,cAAK,CAAE,cAAe;AACrB,mBAAO;AAAA,UACR;AAGA,iBAAO,CAAE,UAAW;AAAA,QACrB;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,QAAQ,aAAc,CAAE;AAE7B,SAAO,oBAAC,kBAAe,QAAkB;AAC1C;",
+  "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": []
 }

package/build-module/components/app/use-route-title.js

@@ -6,7 +6,7 @@ import { __, sprintf } from "@wordpress/i18n";
 import { speak } from "@wordpress/a11y";
 import { decodeEntities } from "@wordpress/html-entities";
 import { privateApis as routePrivateApis } from "@wordpress/route";
-import { unlock } from "../../lock-unlock.js";
+import { unlock } from "../../lock-unlock";
 var { useLocation, useMatches } = unlock(routePrivateApis);
 function useRouteTitle() {
   const location = useLocation();

package/build-module/components/canvas/back-button.js

@@ -7,7 +7,7 @@ import {
 import { arrowUpLeft } from "@wordpress/icons";
 import { useReducedMotion } from "@wordpress/compose";
 import { __ } from "@wordpress/i18n";
-import SiteIcon from "../site-icon/index.js";
+import SiteIcon from "../site-icon";
 
 // packages/boot/src/components/canvas/back-button.scss
 var css = `/**

package/build-module/components/canvas/index.js

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "@wordpress/element";
 import { Spinner } from "@wordpress/components";
 import { useNavigate } from "@wordpress/route";
-import BootBackButton from "./back-button.js";
+import BootBackButton from "./back-button";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Canvas({ canvas }) {
   const [Editor, setEditor] = useState(null);

package/build-module/components/canvas-renderer/index.js

@@ -1,6 +1,6 @@
 // packages/boot/src/components/canvas-renderer/index.tsx
 import { useState, useEffect } from "@wordpress/element";
-import Canvas from "../canvas/index.js";
+import Canvas from "../canvas";
 import { jsx } from "react/jsx-runtime";
 function CanvasRenderer({
   canvas,

package/build-module/components/navigation/drilldown-item/index.js

@@ -8,7 +8,7 @@ import {
 } from "@wordpress/components";
 import { isRTL } from "@wordpress/i18n";
 import { chevronRightSmall, chevronLeftSmall } from "@wordpress/icons";
-import { wrapIcon } from "../items.js";
+import { wrapIcon } from "../items";
 import { jsx, jsxs } from "react/jsx-runtime";
 function DrilldownItem({
   className,

package/build-module/components/navigation/dropdown-item/index.js

@@ -11,9 +11,9 @@ import {
 import { chevronDownSmall } from "@wordpress/icons";
 import { useReducedMotion } from "@wordpress/compose";
 import { useSelect } from "@wordpress/data";
-import { STORE_NAME } from "../../../store/index.js";
-import NavigationItem from "../navigation-item/index.js";
-import { wrapIcon } from "../items.js";
+import { STORE_NAME } from "../../../store";
+import NavigationItem from "../navigation-item";
+import { wrapIcon } from "../items";
 
 // packages/boot/src/components/navigation/dropdown-item/style.scss
 var css = `/**

package/build-module/components/navigation/index.js

@@ -1,12 +1,12 @@
 // packages/boot/src/components/navigation/index.tsx
 import { useState, useMemo, useRef } from "@wordpress/element";
 import { useSelect } from "@wordpress/data";
-import { STORE_NAME } from "../../store/index.js";
-import NavigationItem from "./navigation-item/index.js";
-import DrilldownItem from "./drilldown-item/index.js";
-import DropdownItem from "./dropdown-item/index.js";
-import NavigationScreen from "./navigation-screen/index.js";
-import { useSidebarParent } from "./use-sidebar-parent.js";
+import { STORE_NAME } from "../../store";
+import NavigationItem from "./navigation-item";
+import DrilldownItem from "./drilldown-item";
+import DropdownItem from "./dropdown-item";
+import NavigationScreen from "./navigation-screen";
+import { useSidebarParent } from "./use-sidebar-parent";
 import { Fragment, jsx } from "react/jsx-runtime";
 function Navigation() {
   const backButtonRef = useRef(null);

package/build-module/components/navigation/navigation-item/index.js

@@ -5,8 +5,8 @@ import {
   __experimentalItem as Item,
   __experimentalHStack as HStack
 } from "@wordpress/components";
-import RouterLinkItem from "../router-link-item.js";
-import { wrapIcon } from "../items.js";
+import RouterLinkItem from "../router-link-item";
+import { wrapIcon } from "../items";
 
 // packages/boot/src/components/navigation/navigation-item/style.scss
 var css = `/**

package/build-module/components/navigation/router-link-item.js

@@ -2,7 +2,7 @@
 import { forwardRef } from "@wordpress/element";
 import { __experimentalItem as Item } from "@wordpress/components";
 import { privateApis as routePrivateApis } from "@wordpress/route";
-import { unlock } from "../../lock-unlock.js";
+import { unlock } from "../../lock-unlock";
 import { jsx } from "react/jsx-runtime";
 var { createLink } = unlock(routePrivateApis);
 function AnchorOnlyItem(props, forwardedRef) {

package/build-module/components/navigation/use-sidebar-parent.js

@@ -2,13 +2,13 @@
 import { privateApis as routePrivateApis } from "@wordpress/route";
 import { useEffect, useState } from "@wordpress/element";
 import { useSelect } from "@wordpress/data";
-import { unlock } from "../../lock-unlock.js";
-import { STORE_NAME } from "../../store/index.js";
+import { unlock } from "../../lock-unlock";
+import { STORE_NAME } from "../../store";
 import {
   findDrilldownParent,
   findDropdownParent,
   findClosestMenuItem
-} from "./path-matching.js";
+} from "./path-matching";
 var { useRouter, useMatches } = unlock(routePrivateApis);
 function useSidebarParent() {
   const matches = useMatches();