@vaadin/hilla-file-router/runtime/configuration-builder/mergeLayout.js

Hilla file-based router

import { createElement } from "react";
import { transformTree } from "../../shared/transformTree.js";
import { getHandleFlag, RouteHandleFlag } from "./utils.js";
/**
* Splits out the server-side route tree based on the {@link ViewConfiguration.flowLayout}
* flag, and wraps them in the provided server layout component.
*
* @remarks
* Internally, routes are categorized into three groups:
* - **Server routes**: Routes with `flowLayout` flag explicitly set to `true`,
* or routes whose children have the flag enabled.
* - **Client routes**: Routes with `flowLayout` flag explicitly set to `false`,
* or routes with client-side children.
* - **Unknown routes**: Routes without explicit flags that inherit behavior
* from their parent context.
*
* Server routes get the {@link RouteHandleFlag.IGNORE_FALLBACK} flag set to
* prevent fallback route interference. Client routes are preserved as-is.
*
* @param originalRoutes - The current route tree to process.
* @param component - The layout component to wrap around server routes.
*
* @returns A new route configuration with the layout applied to server routes.
*/
export default function mergeLayout(originalRoutes, component) {
	if (!originalRoutes) {
		return originalRoutes;
	}
	const result = transformTree(originalRoutes, null, (routes, next) => routes.reduce((groups, route) => {
		const { server, client, unknown } = next(route.children ?? []);
		const flag = getHandleFlag(route, RouteHandleFlag.FLOW_LAYOUT);
		if (flag === true) {
			groups.server.push({
				...route,
				children: route.children ? [...server, ...unknown] : undefined
			});
		} else if (server.length > 0) {
			groups.server.push({
				...route,
				children: route.children ? server : undefined
			});
		}
		if (flag === false || client.length > 0) {
			groups.client.push({
				...route,
				children: route.children ? client : undefined
			});
		}
		if (flag === undefined && (groups.server.every(({ path }) => path !== route.path) || unknown.length > 0)) {
			groups.unknown.push({
				...route,
				children: route.children ? unknown : undefined
			});
		}
		return groups;
	}, {
		server: [],
		client: [],
		unknown: []
	}));
	return [
		...result.server.length ? [{
			element: createElement(component),
			children: result.server,
			handle: { [RouteHandleFlag.IGNORE_FALLBACK]: true }
		}] : [],
		...result.client,
		...result.unknown
	];
}
//# sourceMappingURL=./mergeLayout.js.map