@nano_kit/react-router 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - present, TrigenSoftware
+
+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,74 @@
+# @nano_kit/react-router
+
+[![ESM-only package][package]][package-url]
+[![NPM version][npm]][npm-url]
+[![Dependencies status][deps]][deps-url]
+[![Install size][size]][size-url]
+[![Build status][build]][build-url]
+[![Coverage status][coverage]][coverage-url]
+
+[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
+[package-url]: https://nodejs.org/api/esm.html
+
+[npm]: https://img.shields.io/npm/v/@nano_kit/react-router.svg
+[npm-url]: https://npmjs.com/package/@nano_kit/react-router
+
+[deps]: https://img.shields.io/librariesio/release/npm/@nano_kit/react-router
+[deps-url]: https://libraries.io/npm/@nano_kit/react-router/tree
+
+[size]: https://deno.bundlejs.com/badge?q=@nano_kit/react-router
+[size-url]: https://bundlejs.com/?q=@nano_kit/react-router
+
+[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/nano_kit/tests.yml?branch=main
+[build-url]: https://github.com/TrigenSoftware/nano_kit/actions
+
+[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/nano_kit.svg
+[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/nano_kit
+
+The `@nano_kit/react-router` package provides React integration for [@nano_kit/router](../router). It allows you to use the router's powerful features like code splitting, dependency injection, and state management directly within your React application.
+
+## Installation
+
+```bash
+pnpm add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
+# or
+npm install @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
+# or
+yarn add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
+```
+
+## Quick Start
+
+Basically, `@nano_kit/react-router` re-exports everything from `@nano_kit/router`, so you can use all base router functions:
+
+```tsx
+import { browserNavigation, app, layout, page, loadable, Outlet } from '@nano_kit/react-router'
+import { MainLayout } from './MainLayout'
+
+/* Define routes config */
+const routes = {
+  home: '/',
+  user: '/users/:id'
+} as const
+
+/* Create navigation */
+const [$location, navigation] = browserNavigation(routes)
+
+/* Define loader fallback */
+const Loader = () => <div>Loading...</div>
+
+/* Create App component */
+const App = app($location, [
+  layout(MainLayout, [
+    page('home', loadable(() => import('./Home'), Loader)),
+    page('user', loadable(() => import('./User'), Loader))
+  ])
+])
+
+/* Render App */
+createRoot(document.getElementById('root')!).render(<App />)
+```
+
+## Documentation
+
+For comprehensive guides, API reference, and integration patterns, visit the [documentation website](https://nano_kit.js.org/integrations/react-router).

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+import { type ReactNode, type FocusEvent, type MouseEvent, type AnchorHTMLAttributes } from 'react';
+import { type InjectionFactory, type ReadableSignal } from '@nano_kit/store';
+import { type LayoutMatchRef, type Navigation, type PageMatchRef, type Paths, type RouteLocationRecord, type Routes, type StoresPreload, type UnknownMatchRef } from '@nano_kit/router';
+export * from '@nano_kit/router';
+export type PageComponent = () => ReactNode;
+/**
+ * Renders the nested page component within a layout.
+ */
+export declare function Outlet(): import("react").JSX.Element | null;
+/**
+ * Creates a computed signal that matches the current route against page and layout definitions.
+ * Supports nested layouts with composition function for combining layouts with nested content.
+ * @param $location - Route match signal containing route and parameters
+ * @param pages - Array of page and layout match references
+ * @returns Tuple of computed signal containing the matched page or composed layout and function to preload stores
+ */
+export declare function router<R extends Routes, K extends keyof R & string>($location: RouteLocationRecord<R>, pages: (PageMatchRef<NoInfer<K>, PageComponent> | PageMatchRef<null, PageComponent> | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>)[]): [ReadableSignal<PageComponent | null>, StoresPreload];
+/**
+ * Creates a current route matching page and layout injection factory.
+ * @param Location$ - Injection factory for the route location record.
+ * @param pages - Array of page and layout match references.
+ * @returns Tuple of page injection factory and stores preload injection factory.
+ */
+export declare function router$<R extends Routes, K extends keyof R & string>(Location$: InjectionFactory<RouteLocationRecord<R>>, pages: (PageMatchRef<NoInfer<K>, PageComponent> | PageMatchRef<null, PageComponent> | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>)[]): [
+    InjectionFactory<ReadableSignal<PageComponent | null>>,
+    InjectionFactory<StoresPreload>
+];
+/**
+ * Creates a React application component that renders the matched page based on the current route.
+ * @param $location - Current location signal.
+ * @param pages - Array of page and layout match references.
+ * @returns React application component.
+ */
+export declare function app<R extends Routes, K extends keyof R & string>($location: RouteLocationRecord<R>, pages: (PageMatchRef<NoInfer<K>, PageComponent> | PageMatchRef<null, PageComponent> | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>)[]): () => import("react").JSX.Element | null;
+/**
+ * Creates a React application component that renders the matched page based on the current route.
+ * Notice: App should be used within a dependency injection context.
+ * @param Location$ - Injection factory for the route location record.
+ * @param pages - Array of page and layout match references.
+ * @returns React application component and stores preload injection factory.
+ */
+export declare function app$<R extends Routes, K extends keyof R & string>(Location$: InjectionFactory<RouteLocationRecord<R>>, pages: (PageMatchRef<NoInfer<K>, PageComponent> | PageMatchRef<null, PageComponent> | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>)[]): readonly [() => import("react").JSX.Element | null, InjectionFactory<StoresPreload>];
+/**
+ * Creates a preload hook for preloading pages on user interaction.
+ * @param pages - Array of page and layout match references.
+ * @param preloadByDefault - Whether to preload pages by default.
+ * @returns Hook function to use for preloading pages.
+ */
+export declare function preloadable(pages: UnknownMatchRef[], preloadByDefault?: boolean): ({ onFocus, onMouseEnter }: {
+    onFocus?(event: FocusEvent): void;
+    onMouseEnter?(event: MouseEvent): void;
+}, to: string | undefined, preload?: boolean) => {
+    onFocus: (event: FocusEvent) => void;
+    onMouseEnter: (event: MouseEvent) => void;
+};
+export type LinkProps<R extends Routes, K extends keyof R & string> = AnchorHTMLAttributes<HTMLAnchorElement> & ((Paths<R>[K] extends infer P ? P extends (params?: infer Params) => string ? {
+    /** Target route name */
+    to: K;
+    /** Parameters for the route */
+    params?: Params;
+    /**
+     * Whether to preload the page on hover or focus.
+     * Notice: Link should be created with preloadable hook.
+     */
+    preload?: boolean;
+    href?: never;
+} : P extends (params: infer Params) => string ? {
+    /** Target route name */
+    to: K;
+    /** Parameters for the route */
+    params: Params;
+    /**
+     * Whether to preload the page on hover or focus.
+     * Notice: Link should be created with preloadable hook.
+     */
+    preload?: boolean;
+    href?: never;
+} : {
+    /** Target route name */
+    to: K;
+    params?: never;
+    /**
+     * Whether to preload the page on hover or focus.
+     * Notice: Link should be created with preloadable hook.
+     */
+    preload?: boolean;
+    href?: never;
+} : never) | {
+    to?: never;
+    params?: never;
+    preload?: never;
+    href?: string;
+});
+/**
+ * Creates a Link component for navigation.
+ * @param navigation - Router navigation object
+ * @param paths - Path builders for routes
+ * @param usePreload - Preload hook for preloading pages
+ * @returns Link component for navigation.
+ */
+export declare function link<R extends Routes>(navigation: Navigation, paths: Paths<R>, usePreload?: ReturnType<typeof preloadable>): <K extends keyof R & string>(props: LinkProps<R, K>) => import("react").JSX.Element;
+/**
+ * Creates a Link component for navigation.
+ * Notice: Link should be used within a dependency injection context.
+ * @param Navigation$ - Injection factory for the navigation object.
+ * @param paths - Path builders for routes
+ * @param usePreload - Preload hook for preloading pages
+ * @returns Link component for navigation.
+ */
+export declare function link$<R extends Routes>(Navigation$: InjectionFactory<Navigation>, paths: Paths<R>, usePreload?: ReturnType<typeof preloadable>): <K extends keyof R & string>(props: LinkProps<R, K>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,112 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useCallback, useMemo } from 'react';
+import { signal } from '@nano_kit/store';
+import { useSignal, useInject } from '@nano_kit/react';
+import { router as router$2, router$ as router$$1, loadPage, onLinkClick } from '@nano_kit/router';
+export * from '@nano_kit/router';
+
+const OutletContext = /* @__PURE__ */ createContext(
+  signal(null)
+);
+// @__NO_SIDE_EFFECTS__
+function Outlet() {
+  const $nested = useContext(OutletContext);
+  const Nested = useSignal($nested);
+  return Nested ? /* @__PURE__ */ jsx(Nested, {}) : null;
+}
+function compose($nested, Layout) {
+  const { Provider } = OutletContext;
+  return () => /* @__PURE__ */ jsx(Provider, { value: $nested, children: /* @__PURE__ */ jsx(Layout, {}) });
+}
+// @__NO_SIDE_EFFECTS__
+function router($location, pages) {
+  return router$2($location, pages, compose);
+}
+function router$(Location$, pages) {
+  return router$$1(Location$, pages, compose);
+}
+function app($location, pages) {
+  const [$page] = /* @__PURE__ */ router($location, pages);
+  return function App() {
+    const Page = useSignal($page);
+    return Page && /* @__PURE__ */ jsx(Page, {});
+  };
+}
+function app$(Location$, pages) {
+  const [Page$, StoresToPreload$] = router$(Location$, pages);
+  return [
+    function App() {
+      const $page = useInject(Page$);
+      const Page = useSignal($page);
+      return Page && /* @__PURE__ */ jsx(Page, {});
+    },
+    StoresToPreload$
+  ];
+}
+function preloadable(pages, preloadByDefault = false) {
+  const preloaded = /* @__PURE__ */ new Set();
+  return function usePreload({
+    onFocus,
+    onMouseEnter
+  }, to, preload = preloadByDefault) {
+    const preloadCallback = useCallback(() => {
+      if (to && preload && !preloaded.has(to)) {
+        preloaded.add(to);
+        void loadPage(pages, to);
+      }
+    }, [to, preload]);
+    const onFocusCallback = useCallback((event) => {
+      preloadCallback();
+      onFocus?.(event);
+    }, [onFocus, preloadCallback]);
+    const onMouseEnterCallback = useCallback((event) => {
+      preloadCallback();
+      onMouseEnter?.(event);
+    }, [onMouseEnter, preloadCallback]);
+    return {
+      onFocus: onFocusCallback,
+      onMouseEnter: onMouseEnterCallback
+    };
+  };
+}
+function createLink(useOnClick, paths, usePreload) {
+  return function Link(props) {
+    const {
+      to,
+      preload,
+      href: hrefProp,
+      onClick: onClickProp,
+      params,
+      ...restProps
+    } = props;
+    const onClick = useOnClick();
+    const path = to && paths[to];
+    const href = hrefProp ?? (path && (typeof path === "function" ? path(params) : path));
+    const onClickCallback = useCallback((event) => {
+      onClick(event);
+      onClickProp?.(event);
+    }, [onClick, onClickProp]);
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        onClick: onClickCallback,
+        ...restProps,
+        ...usePreload?.(restProps, to, preload)
+      }
+    );
+  };
+}
+function link(navigation, paths, usePreload) {
+  const onClick = onLinkClick.bind(navigation);
+  return createLink(() => onClick, paths, usePreload);
+}
+function link$(Navigation$, paths, usePreload) {
+  return createLink(() => {
+    const navigation = useInject(Navigation$);
+    return useMemo(() => onLinkClick.bind(navigation), [navigation]);
+  }, paths, usePreload);
+}
+
+export { Outlet, app, app$, link, link$, preloadable, router, router$ };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  type FocusEvent,\n  type MouseEvent,\n  type AnchorHTMLAttributes,\n  useMemo,\n  createContext,\n  useContext,\n  useCallback\n} from 'react'\nimport {\n  type InjectionFactory,\n  type ReadableSignal,\n  signal\n} from '@nano_kit/store'\nimport {\n  useSignal,\n  useInject\n} from '@nano_kit/react'\nimport {\n  type LayoutMatchRef,\n  type Navigation,\n  type PageMatchRef,\n  type Paths,\n  type RouteLocationRecord,\n  type Routes,\n  type StoresPreload,\n  type UnknownMatchRef,\n  loadPage,\n  onLinkClick,\n  router as vanillaRouter,\n  router$ as vanillaRouter$\n} from '@nano_kit/router'\n\nexport * from '@nano_kit/router'\n\nexport type PageComponent = () => ReactNode\n\nconst OutletContext = /* @__PURE__ */ createContext<ReadableSignal<PageComponent | null>>(\n  signal(null)\n)\n\n/**\n * Renders the nested page component within a layout.\n */\n/* @__NO_SIDE_EFFECTS__ */\nexport function Outlet() {\n  const $nested = useContext(OutletContext)\n  const Nested = useSignal($nested)\n\n  return Nested ? <Nested/> : null\n}\n\nfunction compose(\n  $nested: ReadableSignal<PageComponent | null>,\n  Layout: PageComponent\n) {\n  const { Provider } = OutletContext\n\n  return () => (\n    <Provider value={$nested}>\n      <Layout/>\n    </Provider>\n  )\n}\n\n/**\n * Creates a computed signal that matches the current route against page and layout definitions.\n * Supports nested layouts with composition function for combining layouts with nested content.\n * @param $location - Route match signal containing route and parameters\n * @param pages - Array of page and layout match references\n * @returns Tuple of computed signal containing the matched page or composed layout and function to preload stores\n */\n/* @__NO_SIDE_EFFECTS__ */\nexport function router<R extends Routes, K extends keyof R & string>(\n  $location: RouteLocationRecord<R>,\n  pages: (\n    | PageMatchRef<NoInfer<K>, PageComponent>\n    | PageMatchRef<null, PageComponent>\n    | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>\n  )[]\n): [ReadableSignal<PageComponent | null>, StoresPreload] {\n  return vanillaRouter($location, pages, compose)\n}\n\n/**\n * Creates a current route matching page and layout injection factory.\n * @param Location$ - Injection factory for the route location record.\n * @param pages - Array of page and layout match references.\n * @returns Tuple of page injection factory and stores preload injection factory.\n */\nexport function router$<R extends Routes, K extends keyof R & string>(\n  Location$: InjectionFactory<RouteLocationRecord<R>>,\n  pages: (\n    | PageMatchRef<NoInfer<K>, PageComponent>\n    | PageMatchRef<null, PageComponent>\n    | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>\n  )[]\n): [\n  InjectionFactory<ReadableSignal<PageComponent | null>>,\n  InjectionFactory<StoresPreload>\n] {\n  return vanillaRouter$(Location$, pages, compose)\n}\n\n/**\n * Creates a React application component that renders the matched page based on the current route.\n * @param $location - Current location signal.\n * @param pages - Array of page and layout match references.\n * @returns React application component.\n */\nexport function app<R extends Routes, K extends keyof R & string>(\n  $location: RouteLocationRecord<R>,\n  pages: (\n    | PageMatchRef<NoInfer<K>, PageComponent>\n    | PageMatchRef<null, PageComponent>\n    | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>\n  )[]\n) {\n  const [$page] = router($location, pages)\n\n  /**\n   * React application component.\n   */\n  return function App() {\n    const Page = useSignal($page)\n\n    return Page && <Page/>\n  }\n}\n\n/**\n * Creates a React application component that renders the matched page based on the current route.\n * Notice: App should be used within a dependency injection context.\n * @param Location$ - Injection factory for the route location record.\n * @param pages - Array of page and layout match references.\n * @returns React application component and stores preload injection factory.\n */\nexport function app$<R extends Routes, K extends keyof R & string>(\n  Location$: InjectionFactory<RouteLocationRecord<R>>,\n  pages: (\n    | PageMatchRef<NoInfer<K>, PageComponent>\n    | PageMatchRef<null, PageComponent>\n    | LayoutMatchRef<NoInfer<K>, PageComponent, PageComponent>\n  )[]\n) {\n  const [Page$, StoresToPreload$] = router$(Location$, pages)\n\n  /**\n   * React application component.\n   */\n  return [\n    function App() {\n      const $page = useInject(Page$)\n      const Page = useSignal($page)\n\n      return Page && <Page/>\n    },\n    StoresToPreload$\n  ] as const\n}\n\n/**\n * Creates a preload hook for preloading pages on user interaction.\n * @param pages - Array of page and layout match references.\n * @param preloadByDefault - Whether to preload pages by default.\n * @returns Hook function to use for preloading pages.\n */\nexport function preloadable(\n  pages: UnknownMatchRef[],\n  preloadByDefault = false\n) {\n  const preloaded = new Set<string>()\n\n  /**\n   * Hook to preload pages on user interaction.\n   * @param props - Event handlers for focus and mouse enter.\n   * @param to - Target route to preload.\n   * @param preload - Flag indicating whether to preload.\n   * @returns Event handlers for preloading.\n   */\n  return function usePreload(\n    {\n      onFocus,\n      onMouseEnter\n    }: {\n      onFocus?(event: FocusEvent): void\n      onMouseEnter?(event: MouseEvent): void\n    },\n    to: string | undefined,\n    preload = preloadByDefault\n  ) {\n    const preloadCallback = useCallback(() => {\n      if (to && preload && !preloaded.has(to)) {\n        preloaded.add(to)\n        void loadPage(pages, to)\n      }\n    }, [to, preload])\n    const onFocusCallback = useCallback((event: FocusEvent) => {\n      preloadCallback()\n      onFocus?.(event)\n    }, [onFocus, preloadCallback])\n    const onMouseEnterCallback = useCallback((event: MouseEvent) => {\n      preloadCallback()\n      onMouseEnter?.(event)\n    }, [onMouseEnter, preloadCallback])\n\n    return {\n      onFocus: onFocusCallback,\n      onMouseEnter: onMouseEnterCallback\n    }\n  }\n}\n\nexport type LinkProps<R extends Routes, K extends keyof R & string> = AnchorHTMLAttributes<HTMLAnchorElement> & ((\n  Paths<R>[K] extends infer P\n    ? P extends (params?: infer Params) => string\n      ? {\n        /** Target route name */\n        to: K\n        /** Parameters for the route */\n        params?: Params\n        /**\n         * Whether to preload the page on hover or focus.\n         * Notice: Link should be created with preloadable hook.\n         */\n        preload?: boolean\n        href?: never\n      }\n      : P extends (params: infer Params) => string\n        ? {\n          /** Target route name */\n          to: K\n          /** Parameters for the route */\n          params: Params\n          /**\n           * Whether to preload the page on hover or focus.\n           * Notice: Link should be created with preloadable hook.\n           */\n          preload?: boolean\n          href?: never\n        }\n        : {\n          /** Target route name */\n          to: K\n          params?: never\n          /**\n           * Whether to preload the page on hover or focus.\n           * Notice: Link should be created with preloadable hook.\n           */\n          preload?: boolean\n          href?: never\n        }\n    : never\n) | {\n  to?: never\n  params?: never\n  preload?: never\n  href?: string\n})\n\nfunction createLink<R extends Routes>(\n  useOnClick: () => (event: MouseEvent<HTMLAnchorElement>) => void,\n  paths: Paths<R>,\n  usePreload?: ReturnType<typeof preloadable>\n) {\n  /**\n   * Link component for navigation.\n   * @param props - Link properties including target route, parameters, and event handlers.\n   * @returns Anchor element for navigation.\n   */\n  return function Link<K extends keyof R & string>(props: LinkProps<R, K>) {\n    const {\n      to,\n      preload,\n      href: hrefProp,\n      onClick: onClickProp,\n      params,\n      ...restProps\n    } = props\n    const onClick = useOnClick()\n    const path = to && paths[to]\n    const href = hrefProp ?? (path && (\n      typeof path === 'function'\n        ? path(params)\n        : path\n    ))\n    const onClickCallback = useCallback((event: MouseEvent<HTMLAnchorElement>) => {\n      onClick(event)\n      onClickProp?.(event)\n    }, [onClick, onClickProp])\n\n    return (\n      <a\n        href={href}\n        onClick={onClickCallback}\n        {...restProps}\n        {...usePreload?.(restProps, to, preload)}\n      />\n    )\n  }\n}\n\n/**\n * Creates a Link component for navigation.\n * @param navigation - Router navigation object\n * @param paths - Path builders for routes\n * @param usePreload - Preload hook for preloading pages\n * @returns Link component for navigation.\n */\nexport function link<R extends Routes>(\n  navigation: Navigation,\n  paths: Paths<R>,\n  usePreload?: ReturnType<typeof preloadable>\n) {\n  const onClick = onLinkClick.bind(navigation)\n\n  return createLink(() => onClick, paths, usePreload)\n}\n\n/**\n * Creates a Link component for navigation.\n * Notice: Link should be used within a dependency injection context.\n * @param Navigation$ - Injection factory for the navigation object.\n * @param paths - Path builders for routes\n * @param usePreload - Preload hook for preloading pages\n * @returns Link component for navigation.\n */\nexport function link$<R extends Routes>(\n  Navigation$: InjectionFactory<Navigation>,\n  paths: Paths<R>,\n  usePreload?: ReturnType<typeof preloadable>\n) {\n  return createLink(() => {\n    const navigation = useInject(Navigation$)\n\n    return useMemo(() => onLinkClick.bind(navigation), [navigation])\n  }, paths, usePreload)\n}\n"],"names":["vanillaRouter","vanillaRouter$"],"mappings":"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"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@nano_kit/react-router",
+  "type": "module",
+  "version": "1.0.0-alpha.1",
+  "description": "React integration for @nano_kit/router with code splitting, dependency injection, and state management.",
+  "author": "dangreen",
+  "license": "MIT",
+  "homepage": "https://nano_kit.js.org/integrations/react-router",
+  "funding": "https://ko-fi.com/dangreen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TrigenSoftware/nano_kit.git",
+    "directory": "packages/react-router"
+  },
+  "bugs": {
+    "url": "https://github.com/TrigenSoftware/nano_kit/issues"
+  },
+  "keywords": [
+    "react",
+    "router",
+    "routing",
+    "navigation",
+    "store",
+    "state",
+    "signal",
+    "reactive",
+    "nano_kit"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@nano_kit/router": "^1.0.0-alpha.4",
+    "@nano_kit/store": "^1.0.0-alpha.0",
+    "@nano_kit/react": "^1.0.0-alpha.3"
+  }
+}