@virentia/router-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Virentia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# @virentia/router-react
+
+React bindings for Virentia Router.
+
+Keep routing state in `@virentia/router`; use this package at the rendering boundary. Route views are mapped to route objects, links open typed routes, and outlets render nested route trees.
+
+## Links
+
+- Documentation: [movpushmov.dev/virentia/router/react](https://movpushmov.dev/virentia/router/react)
+
+## Install
+
+```sh
+pnpm add @virentia/router-react @virentia/router @virentia/react react
+```
+
+Install `history` in applications that use the bundled `historyAdapter` from `@virentia/router`.
+
+```sh
+pnpm add history
+```
+
+## RouterProvider
+
+```tsx
+import { scope } from "@virentia/core";
+import { ScopeProvider } from "@virentia/react";
+import { createMemoryHistory } from "history";
+import { createRoute, createRouter, historyAdapter } from "@virentia/router";
+import { createRouteView, createRoutesView, Link, RouterProvider } from "@virentia/router-react";
+
+const homeRoute = createRoute({ path: "/" });
+const profileRoute = createRoute({ path: "/profile/:id" });
+
+const router = createRouter({
+  routes: [homeRoute, profileRoute],
+});
+
+const history = historyAdapter(createMemoryHistory());
+const appScope = scope();
+
+function HomePage() {
+  return (
+    <Link to={profileRoute} params={{ id: "42" }}>
+      Profile
+    </Link>
+  );
+}
+
+function ProfilePage() {
+  return <h1>Profile</h1>;
+}
+
+const RoutesView = createRoutesView({
+  routes: [
+    createRouteView({ route: homeRoute, view: HomePage }),
+    createRouteView({ route: profileRoute, view: ProfilePage }),
+  ],
+});
+
+export function App() {
+  return (
+    <ScopeProvider scope={appScope}>
+      <RouterProvider router={router} history={history}>
+        <RoutesView />
+      </RouterProvider>
+    </ScopeProvider>
+  );
+}
+```
+
+## Lazy route views
+
+`createLazyRouteView` connects React lazy rendering with router preloading. Opening the route waits for the same dynamic import that renders the page.
+
+```tsx
+import { createLazyRouteView } from "@virentia/router-react";
+import { profileRoute } from "./routes";
+import { Spinner } from "./spinner";
+
+export const profileView = createLazyRouteView({
+  route: profileRoute,
+  view: () => import("./profile-page"),
+  fallback: Spinner,
+});
+```
+
+## Main API
+
+`RouterProvider`, `createRouteView`, `createLazyRouteView`, `createRoutesView`, `Link`, `Outlet`, `withLayout`, `useRouter`, `useLink`, `useIsOpened`, `useOpenedViews`.
+
+## License
+
+MIT © 2026 movpushmov

package/dist/index.cjs

@@ -0,0 +1,189 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _virentia_router = require("@virentia/router");
+let _virentia_react = require("@virentia/react");
+//#region lib/create-lazy-route-view.tsx
+function createLazyRouteView(props) {
+	const { fallback: Fallback, layout: Layout, view: importView } = props;
+	const LazyView = (0, react.lazy)(importView);
+	props.route.internal?.setAsyncImport(importView);
+	const routeView = {
+		route: props.route,
+		view: function LazyRouteView() {
+			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+				fallback: Fallback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, {}) : null,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LazyView, {})
+			});
+			return Layout ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Layout, { children: content }) : content;
+		}
+	};
+	if (props.children !== void 0) routeView.children = props.children;
+	return routeView;
+}
+//#endregion
+//#region lib/create-route-view.tsx
+function createRouteView(props) {
+	const { children, layout: Layout, view: View } = props;
+	const view = Layout ? function RouteViewWithLayout() {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Layout, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(View, {}) });
+	} : View;
+	const routeView = {
+		route: props.route,
+		view
+	};
+	if (children !== void 0) routeView.children = children;
+	return routeView;
+}
+//#endregion
+//#region lib/context.ts
+const RouterContext = (0, react.createContext)(null);
+const OutletContext = (0, react.createContext)(null);
+//#endregion
+//#region lib/use-is-opened.ts
+function useIsOpened(route) {
+	if (_virentia_router.is.router(route)) return (0, _virentia_react.useUnit)(route.activeRoutes).length > 0;
+	return (0, _virentia_react.useUnit)(route.isOpened);
+}
+//#endregion
+//#region lib/use-opened-views.ts
+function useOpenedViews(routes) {
+	const visibilities = routes.map((view) => useIsOpened(view.route));
+	return (0, react.useMemo)(() => {
+		const opened = routes.filter((_view, index) => visibilities[index]);
+		return opened.reduce((result, view) => result.filter((candidate) => {
+			if (_virentia_router.is.router(view.route) || _virentia_router.is.router(candidate.route)) return true;
+			const parent = "parent" in view.route ? view.route.parent : void 0;
+			return candidate.route !== parent;
+		}), opened);
+	}, [routes, ...visibilities]);
+}
+//#endregion
+//#region lib/create-routes-view.tsx
+function createRoutesView({ otherwise: Otherwise, routes }) {
+	return function RoutesView() {
+		const openedView = useOpenedViews(routes).at(-1);
+		if (!openedView) return Otherwise ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Otherwise, {}) : null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OutletContext.Provider, {
+			value: { children: openedView.children ?? [] },
+			children: (0, react.createElement)(openedView.view)
+		});
+	};
+}
+//#endregion
+//#region lib/use-router.ts
+function useRouter() {
+	const router = (0, react.useContext)(RouterContext);
+	if (!router) throw new Error("[useRouter] Router is not provided. Wrap the tree with RouterProvider.");
+	return router;
+}
+//#endregion
+//#region lib/use-link.ts
+function useLink(to, params, query) {
+	const router = useRouter();
+	const open = (0, _virentia_react.useUnit)(to.open);
+	const target = router.knownRoutes.find(({ route }) => route === to);
+	if (!target) throw new Error("[useLink] Route not found. Pass it to createRouter first.");
+	return {
+		path: (0, react.useMemo)(() => {
+			return `${target.build(params ?? void 0)}${stringifyQuery(query)}`;
+		}, [
+			params,
+			query,
+			target
+		]),
+		open
+	};
+}
+function stringifyQuery(query) {
+	if (!query) return "";
+	const params = new URLSearchParams();
+	for (const [key, value] of Object.entries(query)) {
+		if (Array.isArray(value)) {
+			for (const item of value) if (item != null) params.append(key, item);
+			continue;
+		}
+		if (value != null) params.set(key, value);
+	}
+	const search = params.toString();
+	return search ? `?${search}` : "";
+}
+//#endregion
+//#region lib/link.tsx
+const Link = (0, react.forwardRef)((props, ref) => {
+	const { onClick, params, query, replace, target, to, ...anchorProps } = props;
+	const link = useLink(to, params, query);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		...anchorProps,
+		ref,
+		href: link.path,
+		target,
+		onClick: (event) => {
+			onClick?.(event);
+			if (shouldIgnoreClick(event, target)) return;
+			event.preventDefault();
+			link.open({
+				...params === void 0 ? {} : { params },
+				query,
+				replace
+			});
+		}
+	});
+});
+function shouldIgnoreClick(event, target) {
+	return event.defaultPrevented || target !== void 0 && target !== "_self" || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
+}
+//#endregion
+//#region lib/outlet.tsx
+function Outlet() {
+	const openedView = useOpenedViews((0, react.useContext)(OutletContext)?.children ?? []).at(-1);
+	return openedView ? (0, react.createElement)(openedView.view) : null;
+}
+//#endregion
+//#region lib/router-provider.tsx
+function RouterProvider({ children, history, router }) {
+	const setHistory = (0, _virentia_react.useUnit)(router.setHistory);
+	const dispose = (0, _virentia_react.useUnit)(router.dispose);
+	(0, react.useEffect)(() => {
+		if (!history) return;
+		setHistory(history);
+		return () => {
+			dispose();
+		};
+	}, [
+		dispose,
+		history,
+		setHistory
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RouterContext.Provider, {
+		value: router,
+		children
+	});
+}
+//#endregion
+//#region lib/with-layout.tsx
+function withLayout(layout, views) {
+	const Layout = layout;
+	return views.map(({ children, route, view }) => {
+		const routeView = {
+			route,
+			view: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Layout, { children: (0, react.createElement)(view) })
+		};
+		if (children !== void 0) routeView.children = children;
+		return routeView;
+	});
+}
+//#endregion
+exports.Link = Link;
+exports.Outlet = Outlet;
+exports.RouterProvider = RouterProvider;
+exports.createLazyRouteView = createLazyRouteView;
+exports.createRouteView = createRouteView;
+exports.createRoutesView = createRoutesView;
+exports.useIsOpened = useIsOpened;
+exports.useLink = useLink;
+exports.useOpenedViews = useOpenedViews;
+exports.useRouter = useRouter;
+exports.withLayout = withLayout;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Suspense","is","is"],"sources":["../lib/create-lazy-route-view.tsx","../lib/create-route-view.tsx","../lib/context.ts","../lib/use-is-opened.ts","../lib/use-opened-views.ts","../lib/create-routes-view.tsx","../lib/use-router.ts","../lib/use-link.ts","../lib/link.tsx","../lib/outlet.tsx","../lib/router-provider.tsx","../lib/with-layout.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { AsyncBundleImport } from \"@virentia/router\";\nimport type { CreateLazyRouteViewProps, RouteView } from \"./types\";\n\nexport function createLazyRouteView<T extends object | void = void>(\n  props: CreateLazyRouteViewProps<T>,\n): RouteView {\n  const { fallback: Fallback, layout: Layout, view: importView } = props;\n  const LazyView = lazy(importView);\n  const internalRoute = props.route as {\n    internal?: { setAsyncImport(value: AsyncBundleImport): void };\n  };\n\n  internalRoute.internal?.setAsyncImport(importView as AsyncBundleImport);\n\n  const view = function LazyRouteView() {\n    const content = (\n      <Suspense fallback={Fallback ? <Fallback /> : null}>\n        <LazyView />\n      </Suspense>\n    );\n\n    return Layout ? <Layout>{content}</Layout> : content;\n  };\n\n  const routeView: RouteView = {\n    route: props.route,\n    view\n  };\n\n  if (props.children !== undefined) {\n    routeView.children = props.children;\n  }\n\n  return routeView;\n}\n","import type { CreateRouteViewProps, RouteView } from \"./types\";\n\nexport function createRouteView<T extends object | void = void>(\n  props: CreateRouteViewProps<T>,\n): RouteView {\n  const { children, layout: Layout, view: View } = props;\n\n  const view = Layout\n    ? function RouteViewWithLayout() {\n        return (\n          <Layout>\n            <View />\n          </Layout>\n        );\n      }\n    : View;\n\n  const routeView: RouteView = {\n    route: props.route,\n    view\n  };\n\n  if (children !== undefined) {\n    routeView.children = children;\n  }\n\n  return routeView;\n}\n","import { createContext } from \"react\";\nimport type { RouteView } from \"./types\";\nimport type { Router } from \"@virentia/router\";\n\nexport const RouterContext = createContext<Router | null>(null);\nexport const OutletContext = createContext<{ children: RouteView[] } | null>(null);\n","import { useUnit } from \"@virentia/react\";\nimport type { Route, Router, VirtualRoute } from \"@virentia/router\";\nimport { is } from \"@virentia/router\";\n\nexport function useIsOpened(route: Route<any> | Router | VirtualRoute<any, any>): boolean {\n  if (is.router(route)) {\n    return useUnit(route.activeRoutes).length > 0;\n  }\n\n  return useUnit(route.isOpened);\n}\n","import { useMemo } from \"react\";\nimport { is } from \"@virentia/router\";\nimport type { RouteView } from \"./types\";\nimport { useIsOpened } from \"./use-is-opened\";\n\nexport function useOpenedViews(routes: RouteView[]): RouteView[] {\n  const visibilities = routes.map((view) => useIsOpened(view.route));\n\n  return useMemo(() => {\n    const opened = routes.filter((_view, index) => visibilities[index]);\n\n    return opened.reduce(\n      (result, view) =>\n        result.filter((candidate) => {\n          if (is.router(view.route) || is.router(candidate.route)) {\n            return true;\n          }\n\n          const parent = \"parent\" in view.route ? view.route.parent : undefined;\n\n          return candidate.route !== parent;\n        }),\n      opened,\n    );\n  }, [routes, ...visibilities]);\n}\n","import { createElement } from \"react\";\nimport { OutletContext } from \"./context\";\nimport type { CreateRoutesViewProps } from \"./types\";\nimport { useOpenedViews } from \"./use-opened-views\";\n\nexport function createRoutesView({ otherwise: Otherwise, routes }: CreateRoutesViewProps) {\n  return function RoutesView() {\n    const openedView = useOpenedViews(routes).at(-1);\n\n    if (!openedView) {\n      return Otherwise ? <Otherwise /> : null;\n    }\n\n    return (\n      <OutletContext.Provider value={{ children: openedView.children ?? [] }}>\n        {createElement(openedView.view)}\n      </OutletContext.Provider>\n    );\n  };\n}\n","import { useContext } from \"react\";\nimport { RouterContext } from \"./context\";\n\nexport function useRouter() {\n  const router = useContext(RouterContext);\n\n  if (!router) {\n    throw new Error(\"[useRouter] Router is not provided. Wrap the tree with RouterProvider.\");\n  }\n\n  return router;\n}\n","import { useMemo } from \"react\";\nimport { useUnit } from \"@virentia/react\";\nimport type { Query, Route } from \"@virentia/router\";\nimport { useRouter } from \"./use-router\";\n\nexport function useLink<T extends object | void = void>(\n  to: Route<T>,\n  params?: T,\n  query?: Query,\n) {\n  const router = useRouter();\n  const open = useUnit(to.open);\n  const target = router.knownRoutes.find(({ route }) => route === to);\n\n  if (!target) {\n    throw new Error(\"[useLink] Route not found. Pass it to createRouter first.\");\n  }\n\n  const path = useMemo(() => {\n    const pathname = target.build(params ?? undefined);\n    const search = stringifyQuery(query);\n\n    return `${pathname}${search}`;\n  }, [params, query, target]);\n\n  return {\n    path,\n    open\n  };\n}\n\nfunction stringifyQuery(query: Query | undefined): string {\n  if (!query) {\n    return \"\";\n  }\n\n  const params = new URLSearchParams();\n\n  for (const [key, value] of Object.entries(query)) {\n    if (Array.isArray(value)) {\n      for (const item of value) {\n        if (item != null) {\n          params.append(key, item);\n        }\n      }\n\n      continue;\n    }\n\n    if (value != null) {\n      params.set(key, value);\n    }\n  }\n\n  const search = params.toString();\n\n  return search ? `?${search}` : \"\";\n}\n","import { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from \"react\";\nimport type { RouteOpenedPayload } from \"@virentia/router\";\nimport type { LinkProps } from \"./types\";\nimport { useLink } from \"./use-link\";\n\ntype ForwardedLink = <Params extends object | void = void>(\n  props: LinkProps<Params> & { ref?: ForwardedRef<HTMLAnchorElement> },\n) => ReactNode;\n\nexport const Link: ForwardedLink = forwardRef<HTMLAnchorElement, LinkProps<any>>(\n  (props, ref) => {\n    const { onClick, params, query, replace, target, to, ...anchorProps } = props;\n    const link = useLink(to, params, query);\n\n    return (\n      <a\n        {...anchorProps}\n        ref={ref}\n        href={link.path}\n        target={target}\n        onClick={(event) => {\n          onClick?.(event);\n\n          if (shouldIgnoreClick(event, target)) {\n            return;\n          }\n\n          event.preventDefault();\n\n          void link.open({\n            ...(params === undefined ? {} : { params }),\n            query,\n            replace\n          } as RouteOpenedPayload<any>);\n        }}\n      />\n    );\n  },\n) as ForwardedLink;\n\nfunction shouldIgnoreClick(event: MouseEvent<HTMLAnchorElement>, target: string | undefined) {\n  return (\n    event.defaultPrevented ||\n    (target !== undefined && target !== \"_self\") ||\n    event.metaKey ||\n    event.altKey ||\n    event.ctrlKey ||\n    event.shiftKey\n  );\n}\n","import { createElement, useContext } from \"react\";\nimport { OutletContext } from \"./context\";\nimport { useOpenedViews } from \"./use-opened-views\";\n\nexport function Outlet() {\n  const outlet = useContext(OutletContext);\n  const openedView = useOpenedViews(outlet?.children ?? []).at(-1);\n\n  return openedView ? createElement(openedView.view) : null;\n}\n","import { useEffect, type ReactNode } from \"react\";\nimport { useUnit } from \"@virentia/react\";\nimport type { Router, RouterAdapter } from \"@virentia/router\";\nimport { RouterContext } from \"./context\";\n\ninterface RouterProviderProps {\n  children?: ReactNode;\n  router: Router;\n  history?: RouterAdapter;\n}\n\nexport function RouterProvider({ children, history, router }: RouterProviderProps): ReactNode {\n  const setHistory = useUnit(router.setHistory);\n  const dispose = useUnit(router.dispose);\n\n  useEffect(() => {\n    if (!history) {\n      return;\n    }\n\n    void setHistory(history);\n\n    return () => {\n      void dispose();\n    };\n  }, [dispose, history, setHistory]);\n\n  return <RouterContext.Provider value={router}>{children}</RouterContext.Provider>;\n}\n","import { createElement, type ComponentType, type ReactNode } from \"react\";\nimport type { RouteView } from \"./types\";\n\nexport function withLayout(\n  layout: ComponentType<{ children: ReactNode }>,\n  views: RouteView[],\n): RouteView[] {\n  const Layout = layout;\n\n  return views.map(({ children, route, view }) => {\n    const routeView: RouteView = {\n      route,\n      view: () => <Layout>{createElement(view)}</Layout>\n    };\n\n    if (children !== undefined) {\n      routeView.children = children;\n    }\n\n    return routeView;\n  });\n}\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,99 @@
+import * as _$_virentia_router0 from "@virentia/router";
+import { OpenPayloadBase, Query, Route, Router, RouterAdapter, VirtualRoute } from "@virentia/router";
+import * as _$react from "react";
+import { AnchorHTMLAttributes, ComponentType, ForwardedRef, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$_virentia_core0 from "@virentia/core";
+import * as _$_virentia_react0 from "@virentia/react";
+
+//#region lib/types.d.ts
+type LayoutComponent = ComponentType<{
+  children: ReactNode;
+}>;
+interface RouteView {
+  route: Route<any> | Router | VirtualRoute<any, any>;
+  view: ComponentType;
+  children?: RouteView[];
+}
+interface CreateRouteViewProps<T extends object | void = void> {
+  route: Route<T> | Router | VirtualRoute<any, any>;
+  view: ComponentType;
+  layout?: LayoutComponent;
+  children?: RouteView[];
+}
+interface CreateLazyRouteViewProps<T extends object | void = void> extends Omit<CreateRouteViewProps<T>, "view"> {
+  view: () => Promise<{
+    default: ComponentType;
+  }>;
+  fallback?: ComponentType;
+}
+interface CreateRoutesViewProps {
+  routes: RouteView[];
+  otherwise?: ComponentType;
+}
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+type BaseLinkProps<Params extends object | void = void> = {
+  to: Route<Params>;
+  children?: ReactNode;
+} & AnchorProps & OpenPayloadBase;
+type LinkProps<Params extends object | void = void> = Params extends Record<string, never> | void | undefined ? BaseLinkProps<Params> & {
+  params?: Params;
+} : BaseLinkProps<Params> & {
+  params: Params;
+};
+//#endregion
+//#region lib/create-lazy-route-view.d.ts
+declare function createLazyRouteView<T extends object | void = void>(props: CreateLazyRouteViewProps<T>): RouteView;
+//#endregion
+//#region lib/create-route-view.d.ts
+declare function createRouteView<T extends object | void = void>(props: CreateRouteViewProps<T>): RouteView;
+//#endregion
+//#region lib/create-routes-view.d.ts
+declare function createRoutesView({
+  otherwise: Otherwise,
+  routes
+}: CreateRoutesViewProps): () => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region lib/link.d.ts
+type ForwardedLink = <Params extends object | void = void>(props: LinkProps<Params> & {
+  ref?: ForwardedRef<HTMLAnchorElement>;
+}) => ReactNode;
+declare const Link: ForwardedLink;
+//#endregion
+//#region lib/outlet.d.ts
+declare function Outlet(): _$react.ReactElement<{}, string | _$react.JSXElementConstructor<any>> | null;
+//#endregion
+//#region lib/router-provider.d.ts
+interface RouterProviderProps {
+  children?: ReactNode;
+  router: Router;
+  history?: RouterAdapter;
+}
+declare function RouterProvider({
+  children,
+  history,
+  router
+}: RouterProviderProps): ReactNode;
+//#endregion
+//#region lib/use-is-opened.d.ts
+declare function useIsOpened(route: Route<any> | Router | VirtualRoute<any, any>): boolean;
+//#endregion
+//#region lib/use-link.d.ts
+declare function useLink<T extends object | void = void>(to: Route<T>, params?: T, query?: Query): {
+  path: string;
+  open: _$_virentia_react0.UnitValue<_$_virentia_core0.EventCallable<_$_virentia_router0.RouteOpenedPayload<T>>>;
+};
+//#endregion
+//#region lib/use-opened-views.d.ts
+declare function useOpenedViews(routes: RouteView[]): RouteView[];
+//#endregion
+//#region lib/use-router.d.ts
+declare function useRouter(): _$_virentia_router0.Router;
+//#endregion
+//#region lib/with-layout.d.ts
+declare function withLayout(layout: ComponentType<{
+  children: ReactNode;
+}>, views: RouteView[]): RouteView[];
+//#endregion
+export { CreateLazyRouteViewProps, CreateRouteViewProps, CreateRoutesViewProps, LayoutComponent, Link, LinkProps, Outlet, RouteView, RouterProvider, createLazyRouteView, createRouteView, createRoutesView, useIsOpened, useLink, useOpenedViews, useRouter, withLayout };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../lib/types.ts","../lib/create-lazy-route-view.tsx","../lib/create-route-view.tsx","../lib/create-routes-view.tsx","../lib/link.tsx","../lib/outlet.tsx","../lib/router-provider.tsx","../lib/use-is-opened.ts","../lib/use-link.ts","../lib/use-opened-views.ts","../lib/use-router.ts","../lib/with-layout.tsx"],"mappings":";;;;;;;;;KAGY,eAAA,GAAkB,aAAA;EAAgB,QAAA,EAAU,SAAA;AAAA;AAAA,UAEvC,SAAA;EACf,KAAA,EAAO,KAAA,QAAa,MAAA,GAAS,YAAA;EAC7B,IAAA,EAAM,aAAA;EACN,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,oBAAA;EACf,KAAA,EAAO,KAAA,CAAM,CAAA,IAAK,MAAA,GAAS,YAAA;EAC3B,IAAA,EAAM,aAAA;EACN,MAAA,GAAS,eAAA;EACT,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,wBAAA,yCACP,IAAA,CAAK,oBAAA,CAAqB,CAAA;EAClC,IAAA,QAAY,OAAA;IAAU,OAAA,EAAS,aAAA;EAAA;EAC/B,QAAA,GAAW,aAAA;AAAA;AAAA,UAGI,qBAAA;EACf,MAAA,EAAQ,SAAA;EACR,SAAA,GAAY,aAAA;AAAA;AAAA,KAGT,WAAA,GAAc,IAAA,CAAK,oBAAA,CAAqB,iBAAA;AAAA,KAExC,aAAA;EACH,EAAA,EAAI,KAAA,CAAM,MAAA;EACV,QAAA,GAAW,SAAA;AAAA,IACT,WAAA,GACF,eAAA;AAAA,KAEU,SAAA,wCAAiD,MAAA,SACzD,MAAA,qCAGA,aAAA,CAAc,MAAA;EAAY,MAAA,GAAS,MAAA;AAAA,IACnC,aAAA,CAAc,MAAA;EAAY,MAAA,EAAQ,MAAA;AAAA;;;iBCtCtB,mBAAA,gCAAA,CACd,KAAA,EAAO,wBAAA,CAAyB,CAAA,IAC/B,SAAA;;;iBCJa,eAAA,gCAAA,CACd,KAAA,EAAO,oBAAA,CAAqB,CAAA,IAC3B,SAAA;;;iBCCa,gBAAA,CAAA;EAAmB,SAAA,EAAW,SAAA;EAAW;AAAA,GAAU,qBAAA,SAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;;;KCAnF,aAAA,yCACH,KAAA,EAAO,SAAA,CAAU,MAAA;EAAY,GAAA,GAAM,YAAA,CAAa,iBAAA;AAAA,MAC7C,SAAA;AAAA,cAEQ,IAAA,EAAM,aAAA;;;iBCLH,MAAA,CAAA,GAAM,OAAA,CAAA,YAAA,cAAA,OAAA,CAAA,qBAAA;;;UCCZ,mBAAA;EACR,QAAA,GAAW,SAAA;EACX,MAAA,EAAQ,MAAA;EACR,OAAA,GAAU,aAAA;AAAA;AAAA,iBAGI,cAAA,CAAA;EAAiB,QAAA;EAAU,OAAA;EAAS;AAAA,GAAU,mBAAA,GAAsB,SAAA;;;iBCPpE,WAAA,CAAY,KAAA,EAAO,KAAA,QAAa,MAAA,GAAS,YAAA;;;iBCCzC,OAAA,gCAAA,CACd,EAAA,EAAI,KAAA,CAAM,CAAA,GACV,MAAA,GAAS,CAAA,EACT,KAAA,GAAQ,KAAA;;;;;;iBCHM,cAAA,CAAe,MAAA,EAAQ,SAAA,KAAc,SAAA;;;iBCFrC,SAAA,CAAA,GAAS,mBAAA,CAAA,MAAA;;;iBCAT,UAAA,CACd,MAAA,EAAQ,aAAA;EAAgB,QAAA,EAAU,SAAA;AAAA,IAClC,KAAA,EAAO,SAAA,KACN,SAAA"}

package/dist/index.d.mts

@@ -0,0 +1,99 @@
+import * as _$react from "react";
+import { AnchorHTMLAttributes, ComponentType, ForwardedRef, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$_virentia_router0 from "@virentia/router";
+import { OpenPayloadBase, Query, Route, Router, RouterAdapter, VirtualRoute } from "@virentia/router";
+import * as _$_virentia_react0 from "@virentia/react";
+import * as _$_virentia_core0 from "@virentia/core";
+
+//#region lib/types.d.ts
+type LayoutComponent = ComponentType<{
+  children: ReactNode;
+}>;
+interface RouteView {
+  route: Route<any> | Router | VirtualRoute<any, any>;
+  view: ComponentType;
+  children?: RouteView[];
+}
+interface CreateRouteViewProps<T extends object | void = void> {
+  route: Route<T> | Router | VirtualRoute<any, any>;
+  view: ComponentType;
+  layout?: LayoutComponent;
+  children?: RouteView[];
+}
+interface CreateLazyRouteViewProps<T extends object | void = void> extends Omit<CreateRouteViewProps<T>, "view"> {
+  view: () => Promise<{
+    default: ComponentType;
+  }>;
+  fallback?: ComponentType;
+}
+interface CreateRoutesViewProps {
+  routes: RouteView[];
+  otherwise?: ComponentType;
+}
+type AnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+type BaseLinkProps<Params extends object | void = void> = {
+  to: Route<Params>;
+  children?: ReactNode;
+} & AnchorProps & OpenPayloadBase;
+type LinkProps<Params extends object | void = void> = Params extends Record<string, never> | void | undefined ? BaseLinkProps<Params> & {
+  params?: Params;
+} : BaseLinkProps<Params> & {
+  params: Params;
+};
+//#endregion
+//#region lib/create-lazy-route-view.d.ts
+declare function createLazyRouteView<T extends object | void = void>(props: CreateLazyRouteViewProps<T>): RouteView;
+//#endregion
+//#region lib/create-route-view.d.ts
+declare function createRouteView<T extends object | void = void>(props: CreateRouteViewProps<T>): RouteView;
+//#endregion
+//#region lib/create-routes-view.d.ts
+declare function createRoutesView({
+  otherwise: Otherwise,
+  routes
+}: CreateRoutesViewProps): () => _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region lib/link.d.ts
+type ForwardedLink = <Params extends object | void = void>(props: LinkProps<Params> & {
+  ref?: ForwardedRef<HTMLAnchorElement>;
+}) => ReactNode;
+declare const Link: ForwardedLink;
+//#endregion
+//#region lib/outlet.d.ts
+declare function Outlet(): _$react.ReactElement<{}, string | _$react.JSXElementConstructor<any>> | null;
+//#endregion
+//#region lib/router-provider.d.ts
+interface RouterProviderProps {
+  children?: ReactNode;
+  router: Router;
+  history?: RouterAdapter;
+}
+declare function RouterProvider({
+  children,
+  history,
+  router
+}: RouterProviderProps): ReactNode;
+//#endregion
+//#region lib/use-is-opened.d.ts
+declare function useIsOpened(route: Route<any> | Router | VirtualRoute<any, any>): boolean;
+//#endregion
+//#region lib/use-link.d.ts
+declare function useLink<T extends object | void = void>(to: Route<T>, params?: T, query?: Query): {
+  path: string;
+  open: _$_virentia_react0.UnitValue<_$_virentia_core0.EventCallable<_$_virentia_router0.RouteOpenedPayload<T>>>;
+};
+//#endregion
+//#region lib/use-opened-views.d.ts
+declare function useOpenedViews(routes: RouteView[]): RouteView[];
+//#endregion
+//#region lib/use-router.d.ts
+declare function useRouter(): _$_virentia_router0.Router;
+//#endregion
+//#region lib/with-layout.d.ts
+declare function withLayout(layout: ComponentType<{
+  children: ReactNode;
+}>, views: RouteView[]): RouteView[];
+//#endregion
+export { CreateLazyRouteViewProps, CreateRouteViewProps, CreateRoutesViewProps, LayoutComponent, Link, LinkProps, Outlet, RouteView, RouterProvider, createLazyRouteView, createRouteView, createRoutesView, useIsOpened, useLink, useOpenedViews, useRouter, withLayout };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../lib/types.ts","../lib/create-lazy-route-view.tsx","../lib/create-route-view.tsx","../lib/create-routes-view.tsx","../lib/link.tsx","../lib/outlet.tsx","../lib/router-provider.tsx","../lib/use-is-opened.ts","../lib/use-link.ts","../lib/use-opened-views.ts","../lib/use-router.ts","../lib/with-layout.tsx"],"mappings":";;;;;;;;;KAGY,eAAA,GAAkB,aAAA;EAAgB,QAAA,EAAU,SAAA;AAAA;AAAA,UAEvC,SAAA;EACf,KAAA,EAAO,KAAA,QAAa,MAAA,GAAS,YAAA;EAC7B,IAAA,EAAM,aAAA;EACN,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,oBAAA;EACf,KAAA,EAAO,KAAA,CAAM,CAAA,IAAK,MAAA,GAAS,YAAA;EAC3B,IAAA,EAAM,aAAA;EACN,MAAA,GAAS,eAAA;EACT,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,wBAAA,yCACP,IAAA,CAAK,oBAAA,CAAqB,CAAA;EAClC,IAAA,QAAY,OAAA;IAAU,OAAA,EAAS,aAAA;EAAA;EAC/B,QAAA,GAAW,aAAA;AAAA;AAAA,UAGI,qBAAA;EACf,MAAA,EAAQ,SAAA;EACR,SAAA,GAAY,aAAA;AAAA;AAAA,KAGT,WAAA,GAAc,IAAA,CAAK,oBAAA,CAAqB,iBAAA;AAAA,KAExC,aAAA;EACH,EAAA,EAAI,KAAA,CAAM,MAAA;EACV,QAAA,GAAW,SAAA;AAAA,IACT,WAAA,GACF,eAAA;AAAA,KAEU,SAAA,wCAAiD,MAAA,SACzD,MAAA,qCAGA,aAAA,CAAc,MAAA;EAAY,MAAA,GAAS,MAAA;AAAA,IACnC,aAAA,CAAc,MAAA;EAAY,MAAA,EAAQ,MAAA;AAAA;;;iBCtCtB,mBAAA,gCAAA,CACd,KAAA,EAAO,wBAAA,CAAyB,CAAA,IAC/B,SAAA;;;iBCJa,eAAA,gCAAA,CACd,KAAA,EAAO,oBAAA,CAAqB,CAAA,IAC3B,SAAA;;;iBCCa,gBAAA,CAAA;EAAmB,SAAA,EAAW,SAAA;EAAW;AAAA,GAAU,qBAAA,SAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;;;KCAnF,aAAA,yCACH,KAAA,EAAO,SAAA,CAAU,MAAA;EAAY,GAAA,GAAM,YAAA,CAAa,iBAAA;AAAA,MAC7C,SAAA;AAAA,cAEQ,IAAA,EAAM,aAAA;;;iBCLH,MAAA,CAAA,GAAM,OAAA,CAAA,YAAA,cAAA,OAAA,CAAA,qBAAA;;;UCCZ,mBAAA;EACR,QAAA,GAAW,SAAA;EACX,MAAA,EAAQ,MAAA;EACR,OAAA,GAAU,aAAA;AAAA;AAAA,iBAGI,cAAA,CAAA;EAAiB,QAAA;EAAU,OAAA;EAAS;AAAA,GAAU,mBAAA,GAAsB,SAAA;;;iBCPpE,WAAA,CAAY,KAAA,EAAO,KAAA,QAAa,MAAA,GAAS,YAAA;;;iBCCzC,OAAA,gCAAA,CACd,EAAA,EAAI,KAAA,CAAM,CAAA,GACV,MAAA,GAAS,CAAA,EACT,KAAA,GAAQ,KAAA;;;;;;iBCHM,cAAA,CAAe,MAAA,EAAQ,SAAA,KAAc,SAAA;;;iBCFrC,SAAA,CAAA,GAAS,mBAAA,CAAA,MAAA;;;iBCAT,UAAA,CACd,MAAA,EAAQ,aAAA;EAAgB,QAAA,EAAU,SAAA;AAAA,IAClC,KAAA,EAAO,SAAA,KACN,SAAA"}

package/dist/index.mjs

@@ -0,0 +1,178 @@
+import { Suspense, createContext, createElement, forwardRef, lazy, useContext, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { is } from "@virentia/router";
+import { useUnit } from "@virentia/react";
+//#region lib/create-lazy-route-view.tsx
+function createLazyRouteView(props) {
+	const { fallback: Fallback, layout: Layout, view: importView } = props;
+	const LazyView = lazy(importView);
+	props.route.internal?.setAsyncImport(importView);
+	const routeView = {
+		route: props.route,
+		view: function LazyRouteView() {
+			const content = /* @__PURE__ */ jsx(Suspense, {
+				fallback: Fallback ? /* @__PURE__ */ jsx(Fallback, {}) : null,
+				children: /* @__PURE__ */ jsx(LazyView, {})
+			});
+			return Layout ? /* @__PURE__ */ jsx(Layout, { children: content }) : content;
+		}
+	};
+	if (props.children !== void 0) routeView.children = props.children;
+	return routeView;
+}
+//#endregion
+//#region lib/create-route-view.tsx
+function createRouteView(props) {
+	const { children, layout: Layout, view: View } = props;
+	const view = Layout ? function RouteViewWithLayout() {
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(View, {}) });
+	} : View;
+	const routeView = {
+		route: props.route,
+		view
+	};
+	if (children !== void 0) routeView.children = children;
+	return routeView;
+}
+//#endregion
+//#region lib/context.ts
+const RouterContext = createContext(null);
+const OutletContext = createContext(null);
+//#endregion
+//#region lib/use-is-opened.ts
+function useIsOpened(route) {
+	if (is.router(route)) return useUnit(route.activeRoutes).length > 0;
+	return useUnit(route.isOpened);
+}
+//#endregion
+//#region lib/use-opened-views.ts
+function useOpenedViews(routes) {
+	const visibilities = routes.map((view) => useIsOpened(view.route));
+	return useMemo(() => {
+		const opened = routes.filter((_view, index) => visibilities[index]);
+		return opened.reduce((result, view) => result.filter((candidate) => {
+			if (is.router(view.route) || is.router(candidate.route)) return true;
+			const parent = "parent" in view.route ? view.route.parent : void 0;
+			return candidate.route !== parent;
+		}), opened);
+	}, [routes, ...visibilities]);
+}
+//#endregion
+//#region lib/create-routes-view.tsx
+function createRoutesView({ otherwise: Otherwise, routes }) {
+	return function RoutesView() {
+		const openedView = useOpenedViews(routes).at(-1);
+		if (!openedView) return Otherwise ? /* @__PURE__ */ jsx(Otherwise, {}) : null;
+		return /* @__PURE__ */ jsx(OutletContext.Provider, {
+			value: { children: openedView.children ?? [] },
+			children: createElement(openedView.view)
+		});
+	};
+}
+//#endregion
+//#region lib/use-router.ts
+function useRouter() {
+	const router = useContext(RouterContext);
+	if (!router) throw new Error("[useRouter] Router is not provided. Wrap the tree with RouterProvider.");
+	return router;
+}
+//#endregion
+//#region lib/use-link.ts
+function useLink(to, params, query) {
+	const router = useRouter();
+	const open = useUnit(to.open);
+	const target = router.knownRoutes.find(({ route }) => route === to);
+	if (!target) throw new Error("[useLink] Route not found. Pass it to createRouter first.");
+	return {
+		path: useMemo(() => {
+			return `${target.build(params ?? void 0)}${stringifyQuery(query)}`;
+		}, [
+			params,
+			query,
+			target
+		]),
+		open
+	};
+}
+function stringifyQuery(query) {
+	if (!query) return "";
+	const params = new URLSearchParams();
+	for (const [key, value] of Object.entries(query)) {
+		if (Array.isArray(value)) {
+			for (const item of value) if (item != null) params.append(key, item);
+			continue;
+		}
+		if (value != null) params.set(key, value);
+	}
+	const search = params.toString();
+	return search ? `?${search}` : "";
+}
+//#endregion
+//#region lib/link.tsx
+const Link = forwardRef((props, ref) => {
+	const { onClick, params, query, replace, target, to, ...anchorProps } = props;
+	const link = useLink(to, params, query);
+	return /* @__PURE__ */ jsx("a", {
+		...anchorProps,
+		ref,
+		href: link.path,
+		target,
+		onClick: (event) => {
+			onClick?.(event);
+			if (shouldIgnoreClick(event, target)) return;
+			event.preventDefault();
+			link.open({
+				...params === void 0 ? {} : { params },
+				query,
+				replace
+			});
+		}
+	});
+});
+function shouldIgnoreClick(event, target) {
+	return event.defaultPrevented || target !== void 0 && target !== "_self" || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
+}
+//#endregion
+//#region lib/outlet.tsx
+function Outlet() {
+	const openedView = useOpenedViews(useContext(OutletContext)?.children ?? []).at(-1);
+	return openedView ? createElement(openedView.view) : null;
+}
+//#endregion
+//#region lib/router-provider.tsx
+function RouterProvider({ children, history, router }) {
+	const setHistory = useUnit(router.setHistory);
+	const dispose = useUnit(router.dispose);
+	useEffect(() => {
+		if (!history) return;
+		setHistory(history);
+		return () => {
+			dispose();
+		};
+	}, [
+		dispose,
+		history,
+		setHistory
+	]);
+	return /* @__PURE__ */ jsx(RouterContext.Provider, {
+		value: router,
+		children
+	});
+}
+//#endregion
+//#region lib/with-layout.tsx
+function withLayout(layout, views) {
+	const Layout = layout;
+	return views.map(({ children, route, view }) => {
+		const routeView = {
+			route,
+			view: () => /* @__PURE__ */ jsx(Layout, { children: createElement(view) })
+		};
+		if (children !== void 0) routeView.children = children;
+		return routeView;
+	});
+}
+//#endregion
+export { Link, Outlet, RouterProvider, createLazyRouteView, createRouteView, createRoutesView, useIsOpened, useLink, useOpenedViews, useRouter, withLayout };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../lib/create-lazy-route-view.tsx","../lib/create-route-view.tsx","../lib/context.ts","../lib/use-is-opened.ts","../lib/use-opened-views.ts","../lib/create-routes-view.tsx","../lib/use-router.ts","../lib/use-link.ts","../lib/link.tsx","../lib/outlet.tsx","../lib/router-provider.tsx","../lib/with-layout.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { AsyncBundleImport } from \"@virentia/router\";\nimport type { CreateLazyRouteViewProps, RouteView } from \"./types\";\n\nexport function createLazyRouteView<T extends object | void = void>(\n  props: CreateLazyRouteViewProps<T>,\n): RouteView {\n  const { fallback: Fallback, layout: Layout, view: importView } = props;\n  const LazyView = lazy(importView);\n  const internalRoute = props.route as {\n    internal?: { setAsyncImport(value: AsyncBundleImport): void };\n  };\n\n  internalRoute.internal?.setAsyncImport(importView as AsyncBundleImport);\n\n  const view = function LazyRouteView() {\n    const content = (\n      <Suspense fallback={Fallback ? <Fallback /> : null}>\n        <LazyView />\n      </Suspense>\n    );\n\n    return Layout ? <Layout>{content}</Layout> : content;\n  };\n\n  const routeView: RouteView = {\n    route: props.route,\n    view\n  };\n\n  if (props.children !== undefined) {\n    routeView.children = props.children;\n  }\n\n  return routeView;\n}\n","import type { CreateRouteViewProps, RouteView } from \"./types\";\n\nexport function createRouteView<T extends object | void = void>(\n  props: CreateRouteViewProps<T>,\n): RouteView {\n  const { children, layout: Layout, view: View } = props;\n\n  const view = Layout\n    ? function RouteViewWithLayout() {\n        return (\n          <Layout>\n            <View />\n          </Layout>\n        );\n      }\n    : View;\n\n  const routeView: RouteView = {\n    route: props.route,\n    view\n  };\n\n  if (children !== undefined) {\n    routeView.children = children;\n  }\n\n  return routeView;\n}\n","import { createContext } from \"react\";\nimport type { RouteView } from \"./types\";\nimport type { Router } from \"@virentia/router\";\n\nexport const RouterContext = createContext<Router | null>(null);\nexport const OutletContext = createContext<{ children: RouteView[] } | null>(null);\n","import { useUnit } from \"@virentia/react\";\nimport type { Route, Router, VirtualRoute } from \"@virentia/router\";\nimport { is } from \"@virentia/router\";\n\nexport function useIsOpened(route: Route<any> | Router | VirtualRoute<any, any>): boolean {\n  if (is.router(route)) {\n    return useUnit(route.activeRoutes).length > 0;\n  }\n\n  return useUnit(route.isOpened);\n}\n","import { useMemo } from \"react\";\nimport { is } from \"@virentia/router\";\nimport type { RouteView } from \"./types\";\nimport { useIsOpened } from \"./use-is-opened\";\n\nexport function useOpenedViews(routes: RouteView[]): RouteView[] {\n  const visibilities = routes.map((view) => useIsOpened(view.route));\n\n  return useMemo(() => {\n    const opened = routes.filter((_view, index) => visibilities[index]);\n\n    return opened.reduce(\n      (result, view) =>\n        result.filter((candidate) => {\n          if (is.router(view.route) || is.router(candidate.route)) {\n            return true;\n          }\n\n          const parent = \"parent\" in view.route ? view.route.parent : undefined;\n\n          return candidate.route !== parent;\n        }),\n      opened,\n    );\n  }, [routes, ...visibilities]);\n}\n","import { createElement } from \"react\";\nimport { OutletContext } from \"./context\";\nimport type { CreateRoutesViewProps } from \"./types\";\nimport { useOpenedViews } from \"./use-opened-views\";\n\nexport function createRoutesView({ otherwise: Otherwise, routes }: CreateRoutesViewProps) {\n  return function RoutesView() {\n    const openedView = useOpenedViews(routes).at(-1);\n\n    if (!openedView) {\n      return Otherwise ? <Otherwise /> : null;\n    }\n\n    return (\n      <OutletContext.Provider value={{ children: openedView.children ?? [] }}>\n        {createElement(openedView.view)}\n      </OutletContext.Provider>\n    );\n  };\n}\n","import { useContext } from \"react\";\nimport { RouterContext } from \"./context\";\n\nexport function useRouter() {\n  const router = useContext(RouterContext);\n\n  if (!router) {\n    throw new Error(\"[useRouter] Router is not provided. Wrap the tree with RouterProvider.\");\n  }\n\n  return router;\n}\n","import { useMemo } from \"react\";\nimport { useUnit } from \"@virentia/react\";\nimport type { Query, Route } from \"@virentia/router\";\nimport { useRouter } from \"./use-router\";\n\nexport function useLink<T extends object | void = void>(\n  to: Route<T>,\n  params?: T,\n  query?: Query,\n) {\n  const router = useRouter();\n  const open = useUnit(to.open);\n  const target = router.knownRoutes.find(({ route }) => route === to);\n\n  if (!target) {\n    throw new Error(\"[useLink] Route not found. Pass it to createRouter first.\");\n  }\n\n  const path = useMemo(() => {\n    const pathname = target.build(params ?? undefined);\n    const search = stringifyQuery(query);\n\n    return `${pathname}${search}`;\n  }, [params, query, target]);\n\n  return {\n    path,\n    open\n  };\n}\n\nfunction stringifyQuery(query: Query | undefined): string {\n  if (!query) {\n    return \"\";\n  }\n\n  const params = new URLSearchParams();\n\n  for (const [key, value] of Object.entries(query)) {\n    if (Array.isArray(value)) {\n      for (const item of value) {\n        if (item != null) {\n          params.append(key, item);\n        }\n      }\n\n      continue;\n    }\n\n    if (value != null) {\n      params.set(key, value);\n    }\n  }\n\n  const search = params.toString();\n\n  return search ? `?${search}` : \"\";\n}\n","import { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from \"react\";\nimport type { RouteOpenedPayload } from \"@virentia/router\";\nimport type { LinkProps } from \"./types\";\nimport { useLink } from \"./use-link\";\n\ntype ForwardedLink = <Params extends object | void = void>(\n  props: LinkProps<Params> & { ref?: ForwardedRef<HTMLAnchorElement> },\n) => ReactNode;\n\nexport const Link: ForwardedLink = forwardRef<HTMLAnchorElement, LinkProps<any>>(\n  (props, ref) => {\n    const { onClick, params, query, replace, target, to, ...anchorProps } = props;\n    const link = useLink(to, params, query);\n\n    return (\n      <a\n        {...anchorProps}\n        ref={ref}\n        href={link.path}\n        target={target}\n        onClick={(event) => {\n          onClick?.(event);\n\n          if (shouldIgnoreClick(event, target)) {\n            return;\n          }\n\n          event.preventDefault();\n\n          void link.open({\n            ...(params === undefined ? {} : { params }),\n            query,\n            replace\n          } as RouteOpenedPayload<any>);\n        }}\n      />\n    );\n  },\n) as ForwardedLink;\n\nfunction shouldIgnoreClick(event: MouseEvent<HTMLAnchorElement>, target: string | undefined) {\n  return (\n    event.defaultPrevented ||\n    (target !== undefined && target !== \"_self\") ||\n    event.metaKey ||\n    event.altKey ||\n    event.ctrlKey ||\n    event.shiftKey\n  );\n}\n","import { createElement, useContext } from \"react\";\nimport { OutletContext } from \"./context\";\nimport { useOpenedViews } from \"./use-opened-views\";\n\nexport function Outlet() {\n  const outlet = useContext(OutletContext);\n  const openedView = useOpenedViews(outlet?.children ?? []).at(-1);\n\n  return openedView ? createElement(openedView.view) : null;\n}\n","import { useEffect, type ReactNode } from \"react\";\nimport { useUnit } from \"@virentia/react\";\nimport type { Router, RouterAdapter } from \"@virentia/router\";\nimport { RouterContext } from \"./context\";\n\ninterface RouterProviderProps {\n  children?: ReactNode;\n  router: Router;\n  history?: RouterAdapter;\n}\n\nexport function RouterProvider({ children, history, router }: RouterProviderProps): ReactNode {\n  const setHistory = useUnit(router.setHistory);\n  const dispose = useUnit(router.dispose);\n\n  useEffect(() => {\n    if (!history) {\n      return;\n    }\n\n    void setHistory(history);\n\n    return () => {\n      void dispose();\n    };\n  }, [dispose, history, setHistory]);\n\n  return <RouterContext.Provider value={router}>{children}</RouterContext.Provider>;\n}\n","import { createElement, type ComponentType, type ReactNode } from \"react\";\nimport type { RouteView } from \"./types\";\n\nexport function withLayout(\n  layout: ComponentType<{ children: ReactNode }>,\n  views: RouteView[],\n): RouteView[] {\n  const Layout = layout;\n\n  return views.map(({ children, route, view }) => {\n    const routeView: RouteView = {\n      route,\n      view: () => <Layout>{createElement(view)}</Layout>\n    };\n\n    if (children !== undefined) {\n      routeView.children = children;\n    }\n\n    return routeView;\n  });\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@virentia/router-react",
+  "version": "0.1.0",
+  "description": "React bindings for Virentia Router",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/virentia-labs/router.git",
+    "directory": "packages/react"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@virentia/router": "0.1.0"
+  },
+  "peerDependencies": {
+    "@virentia/react": ">=0.1.1",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@testing-library/react": "^16.3.0",
+    "@virentia/core": "^0.1.1",
+    "@virentia/react": "^0.1.1",
+    "happy-dom": "^20.0.10",
+    "history": "^5.3.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run"
+  }
+}