use-navigation-api 0.0.0

package/README.md

@@ -0,0 +1,29 @@
+# useNavigationAPI
+
+Simple [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) integration for React.
+
+## Usage
+
+Wrap your application in a `<NavigationProvider logger={console.log}>`, optionally specifying a `store` if you wish to
+store navigation locations
+anywhere other than the browser's location or to modify the location before completing navigation,
+for instance you can convert an app to use hash-based routing by specifying
+`<NavigationProvider logger={console.log} store="hash">`,
+or bypass the browser location entirely using `store="memory"`. Setting `scoped` to `true` will ignore navigation
+events originating from components or elements outside the `<NavigationProvider logger={console.log}>` component.
+
+TODO: test this library on older browsers with the https://github.com/virtualstate/navigation polyfill and update this
+readme.
+
+### Getting the current location
+
+Calling `useLocation` with no arguments returns the current URL. helper functions such as `useQueryParam` can be used
+for more fine-grained access.
+
+### Navigation
+
+Any element that would cause the browser to navigate can be used. Note that the browser will resolve locations relative
+to the current window location, so to ensure unsurprising behavior of relative links you should resolve them relative to
+the navigation context by passing them to `useLocation`.
+For programmatic navigation, the `useNavigation` hook returns a
+[Navigation](https://developer.mozilla.org/en-US/docs/Web/API/Navigation) object.

package/eslint.config.js

@@ -0,0 +1,22 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "use-navigation-api",
+  "private": false,
+  "main": "./dist/use-navigation-api.umd.js",
+  "module": "./dist/use-navigation-api.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/use-navigation-api.es.js",
+      "require": "./dist/use-navigation-api.umd.js"
+    }
+  },
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "navigation-api-types": "^0.6.1",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "unplugin-dts": "^1.0.0-beta.6",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./navigationProvider";
+export * from "./location/useLocation.ts";
+export * from "./useNavigate";
+export * from "./location/useQueryParam.ts";

package/src/location/useLocation.ts

@@ -0,0 +1,71 @@
+import { useContext, useMemo } from "react";
+import {
+  NavigationContext,
+  type NavigationContextState,
+} from "src/navigationProvider.ts";
+
+type Location = { pathname: string; search: string; hash: string; url?: URL };
+
+export function parseLocation(
+  location: string,
+  {
+    url = window?.location?.href || "https://example.com/",
+  }: NavigationContextState,
+): Location {
+  try {
+    const parsed = new URL(location, url);
+    return {
+      url: parsed,
+      pathname: parsed.pathname,
+      search: parsed.search,
+      hash: parsed.hash,
+    };
+  } catch {
+    /* fall back to string parsing */
+  }
+  if (!location) return { pathname: "/", search: "", hash: "" };
+  const pathname = location.split("?")[0];
+  const search = location.substring(pathname.length).split("#")[0];
+  const hash = location.substring(pathname.length + search.length);
+  try {
+    return { url: undefined, pathname, search, hash };
+  } catch {
+    return { url: undefined, pathname, search, hash };
+  }
+}
+
+/**
+ * Returns the current location for the navigation context.
+ */
+export function useLocation(): Location;
+/**
+ * Resolves a URL string relative to the current location and returns its parts.
+ */
+export function useLocation(url: string): Location;
+/**
+ * Resolves a URL string relative to the current location after applying the supplied function.
+ */
+export function useLocation<R>(
+  url: string,
+  parse: (location: string, value: NavigationContextState) => R,
+): R;
+/**
+ * Returns a location based on the returned url if present, or the modified input argument.
+ * For instance, `useLocation(url => url.searchParams.set("parameter", "value"))` returns the current location with only a single parameter updated.
+ */
+export function useLocation(url: (current: URL) => URL | void): Location;
+export function useLocation(
+  url?: string | ((current: URL) => URL | void),
+  parse = parseLocation,
+) {
+  const location = useContext(NavigationContext);
+  return useMemo(() => {
+    if (typeof url === "string") return parse(url, location);
+    if (typeof url === "function") {
+      const modified = new URL(location.url);
+      const returned = url(modified);
+      return parse((returned || modified).href, location);
+    }
+    return parse("", location);
+  }, [parse, url, location]);
+}

package/src/location/useQueryParam.ts

@@ -0,0 +1,23 @@
+import { useLocation } from "src/location/useLocation.ts";
+import { useMemo } from "react";
+
+/**
+ * Returns the first value for a query parameter, or null if it is missing.
+ */
+export function useQueryParam(param: string, all?: false): string | null;
+/**
+ * Returns all values for a query parameter when it appears multiple times.
+ */
+export function useQueryParam(param: string, all: true): string[];
+export function useQueryParam(param: string, all: boolean = false) {
+  const location = useLocation();
+  return useMemo(() => {
+    try {
+      const searchParams =
+        location.url?.searchParams || new URLSearchParams(location.search);
+      return all ? searchParams.getAll(param) || [] : searchParams.get(param);
+    } catch {
+      return null;
+    }
+  }, [location, all, param]);
+}

package/src/navigation-api-types.d.ts

@@ -0,0 +1,266 @@
+// From https://github.com/lukewarlow/navigation-api-types/blob/master/index.d.ts
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation */
+interface Navigation extends EventTarget {
+  entries(): NavigationHistoryEntry[];
+  readonly currentEntry?: NavigationHistoryEntry;
+  updateCurrentEntry(options: NavigationUpdateCurrentEntryOptions): void;
+  readonly transition?: NavigationTransition;
+
+  readonly canGoBack: boolean;
+  readonly canGoForward: boolean;
+
+  navigate(url: string, options?: NavigationNavigateOptions): NavigationResult;
+  reload(options?: NavigationReloadOptions): NavigationResult;
+
+  traverseTo(key: string, options?: NavigationOptions): NavigationResult;
+  back(options?: NavigationOptions): NavigationResult;
+  forward(options?: NavigationOptions): NavigationResult;
+
+  onnavigate:
+    | ((this: Navigation, ev: NavigationEventMap["navigate"]) => unknown)
+    | null;
+  onnavigatesuccess:
+    | ((this: Navigation, ev: NavigationEventMap["navigatesuccess"]) => unknown)
+    | null;
+  onnavigateerror:
+    | ((this: Navigation, ev: NavigationEventMap["navigateerror"]) => unknown)
+    | null;
+  oncurrententrychange:
+    | ((
+        this: Navigation,
+        ev: NavigationEventMap["currententrychange"],
+      ) => unknown)
+    | null;
+
+  addEventListener<K extends keyof NavigationEventMap>(
+    type: K,
+    listener: (this: Navigation, ev: NavigationEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  removeEventListener<K extends keyof NavigationEventMap>(
+    type: K,
+    listener: (this: Navigation, ev: NavigationEventMap[K]) => unknown,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}
+
+interface NavigationEventMap {
+  navigate: NavigateEvent;
+  navigatesuccess: Event;
+  navigateerror: ErrorEvent;
+  currententrychange: NavigationCurrentEntryChangeEvent;
+}
+
+declare const navigation: Navigation | undefined;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+declare interface Window extends WindowNavigation {}
+
+declare interface WindowNavigation {
+  readonly navigation?: Navigation;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigateevent */
+interface NavigateEvent extends Event {
+  readonly navigationType: NavigationApiNavigationType;
+  readonly destination: NavigationDestination;
+  readonly canIntercept: boolean;
+  readonly userInitiated: boolean;
+  readonly hashChange: boolean;
+  readonly signal: AbortSignal;
+  readonly formData: FormData | null;
+  readonly downloadRequest: string | null;
+  readonly info: unknown;
+  readonly hasUAVisualTransition: boolean;
+  readonly sourceElement: Element | null;
+
+  intercept(options?: NavigationInterceptOptions): void;
+  /**
+   * Not in HTML spec but implemented in Chromium
+   * @see https://github.com/WICG/navigation-api?tab=readme-ov-file#deferred-commit
+   * @experimental
+   */
+  commit(): void;
+  /**
+   * Not in HTML spec but implemented in Chromium
+   * @see https://github.com/WICG/navigation-api?tab=readme-ov-file#redirects-during-deferred-commit
+   * @experimental
+   */
+  redirect(): void;
+  scroll(): void;
+}
+
+declare const NavigateEvent: {
+  prototype: NavigateEvent;
+  new (type: string, eventInit: NavigateEventInit): Event;
+};
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigateeventinit */
+interface NavigateEventInit extends EventInit {
+  navigationType?: NavigationApiNavigationType;
+  destination: NavigationDestination;
+  canIntercept?: boolean;
+  userInitiated?: boolean;
+  hashChange?: boolean;
+  signal: AbortSignal;
+  formData?: FormData | null;
+  downloadRequest?: string | null;
+  info?: unknown;
+  hasUAVisualTransition?: boolean;
+  sourceElement?: Element | null;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#the-navigationcurrententrychangeevent-interface */
+interface NavigationCurrentEntryChangeEvent extends Event {
+  readonly navigationType?: NavigationApiNavigationType;
+  readonly from: NavigationHistoryEntry;
+}
+
+declare const NavigationCurrentEntryChangeEvent: {
+  prototype: NavigationCurrentEntryChangeEvent;
+  new (type: string, eventInit: NavigationCurrentEntryChangeEventInit): Event;
+};
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationcurrententrychangeeventinit */
+interface NavigationCurrentEntryChangeEventInit extends EventInit {
+  navigationType?: NavigationApiNavigationType;
+  destination: NavigationHistoryEntry;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationhistoryentry */
+interface NavigationHistoryEntry extends EventTarget {
+  readonly url: string | null;
+  readonly key: string;
+  readonly id: string;
+  readonly index: number;
+  readonly sameDocument: boolean;
+
+  getState(): unknown;
+
+  ondispose: ((this: NavigationHistoryEntry, ev: Event) => unknown) | null;
+
+  addEventListener(
+    type: "dispose",
+    callback: (this: NavigationHistoryEntry, ev: Event) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: "dispose",
+    callback: (this: NavigationHistoryEntry, ev: Event) => unknown,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationdestination */
+interface NavigationDestination {
+  readonly url: string;
+  readonly key: string | null;
+  readonly id: string | null;
+  readonly index: number;
+  readonly sameDocument: boolean;
+
+  getState(): unknown;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationupdatecurrententryoptions */
+interface NavigationUpdateCurrentEntryOptions {
+  state: unknown;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationoptions */
+interface NavigationOptions {
+  info?: unknown;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationnavigateoptions */
+interface NavigationNavigateOptions extends NavigationOptions {
+  state?: unknown;
+  // Defaults to "auto"
+  history?: NavigationHistoryBehavior;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationreloadoptions */
+interface NavigationReloadOptions extends NavigationOptions {
+  state?: unknown;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationtransition */
+interface NavigationTransition {
+  readonly navigationType: NavigationApiNavigationType;
+  readonly from: NavigationHistoryEntry;
+  readonly finished: Promise<void>;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationresult */
+interface NavigationResult {
+  committed: Promise<NavigationHistoryEntry>;
+  finished: Promise<NavigationHistoryEntry>;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationinterceptoptions */
+interface NavigationInterceptOptions {
+  handler?: NavigationInterceptHandler;
+  precommitHandler?: NavigationPrecommitHandler;
+  focusReset?: NavigationFocusReset;
+  scroll?: NavigationScrollBehavior;
+  /**
+   * Not in HTML spec but implemented in Chromium
+   * @see https://github.com/WICG/navigation-api?tab=readme-ov-file#deferred-commit
+   * @experimental
+   */
+  commit?: NavigationCommitBehavior;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationtype */
+type NavigationApiNavigationType = "reload" | "push" | "replace" | "traverse";
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationhistorybehavior */
+type NavigationHistoryBehavior = "auto" | "push" | "replace";
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationintercepthandler */
+type NavigationInterceptHandler = () => Promise<void>;
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationprecommithandler */
+type NavigationPrecommitHandler = (
+  controller: NavigationPrecommitController,
+) => Promise<void>;
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationprecommitcontroller */
+interface NavigationPrecommitController {
+  redirect: (url: string, options?: NavigationNavigateOptions = {}) => void;
+  addHandler: (handler: NavigationInterceptHandler) => void;
+}
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationfocusreset */
+type NavigationFocusReset = "after-transition" | "manual";
+
+/** @see https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigationscrollbehavior */
+type NavigationScrollBehavior = "after-transition" | "manual";
+
+/**
+ * Not in HTML spec but implemented in Chromium
+ * @see https://github.com/WICG/navigation-api?tab=readme-ov-file#deferred-commit
+ * @experimental
+ */
+type NavigationCommitBehavior = "after-transition" | "immediate";

package/src/navigationProvider.ts

@@ -0,0 +1,98 @@
+import {
+  createContext,
+  createElement,
+  type Dispatch,
+  type FC,
+  type ReactNode,
+  type SetStateAction,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+export type NavigationContextState = {
+  navigation: Navigation;
+  url: string;
+  store: "url" | "hash" | "memory";
+};
+type NavigationContextValue = NavigationContextState & {
+  setState?: Dispatch<SetStateAction<NavigationContextState>>;
+};
+const defaultValue: NavigationContextValue = {
+  navigation: window.navigation!,
+  url: window?.location?.href || "/",
+  store: "url" as "url" | "hash" | "memory",
+};
+export const NavigationContext = createContext(defaultValue);
+
+function defaultShouldHandle(event: NavigateEvent) {
+  return event.canIntercept && !event.downloadRequest;
+}
+
+type ShouldHandle = typeof defaultShouldHandle;
+export const NavigationProvider: FC<{
+  children: ReactNode;
+  store?: "url" | "hash" | "memory";
+  scoped?: boolean;
+  shouldHandle?: ShouldHandle;
+}> = ({
+  children,
+  store = "url",
+  scoped,
+  shouldHandle = defaultShouldHandle,
+}) => {
+  const navigation = defaultValue.navigation;
+  const [scope, setScope] = useState<HTMLDivElement | null>(null);
+  const [state, setState] = useState(() => ({ ...defaultValue, store }));
+  const skip = useMemo(
+    () => (event: NavigateEvent) => {
+      const target = event.sourceElement;
+      if (scope && target && !scope.contains(target)) return true;
+      return !shouldHandle(event);
+    },
+    [shouldHandle, scope],
+  );
+
+  useEffect(() => {
+    const handler = (event: NavigateEvent) => {
+      if (skip(event)) {
+        return;
+      }
+
+      let url = event.destination.url;
+      if (store === "memory") {
+        event.preventDefault();
+
+        setState((prev) => {
+          if (
+            event.sourceElement instanceof HTMLAnchorElement &&
+            event.navigationType === "push"
+          ) {
+            const href = event.sourceElement.getAttribute("href");
+            if (href && !href.startsWith("/") && !/^[a-z]+:\/\//i.test(href)) {
+              url = new URL(href, prev.url).href;
+            }
+          }
+          return { ...prev, url, store };
+        });
+      } else {
+        event.intercept({
+          async handler() {
+            setState({ navigation, url, store });
+          },
+        });
+      }
+    };
+
+    navigation?.addEventListener("navigate", handler);
+    return () => navigation?.removeEventListener("navigate", handler);
+  }, [skip, navigation, scoped, store]);
+
+  const value = useMemo(() => ({ ...state, setState }), [state]);
+
+  return createElement(
+    NavigationContext.Provider,
+    { value },
+    scoped ? createElement("div", { ref: setScope }, children) : children,
+  );
+};

package/src/useNavigate.ts

@@ -0,0 +1,44 @@
+import { useContext, useMemo } from "react";
+import { NavigationContext } from "src/navigationProvider";
+import { future } from "src/util/future";
+
+export function useNavigate() {
+  const { navigation, setState } = useContext(NavigationContext);
+  return useMemo(() => {
+    if (!setState) return navigation;
+    const navigate: Navigation["navigate"] = (destination, options) => {
+      const result = {
+        committed: future(true),
+        finished: future(true),
+      };
+      const handle = ({ committed, finished }: NavigationResult) => {
+        committed.then(result.committed.resolve, result.committed.reject);
+        finished.then(result.finished.resolve, result.finished.reject);
+      };
+
+      setState((state) => {
+        Promise.resolve().then(() => {
+          try {
+            handle(
+              navigation.navigate(
+                new URL(destination, state.url).href,
+                options,
+              ),
+            );
+          } catch {
+            handle(navigation.navigate(destination, options));
+          }
+        });
+        return state;
+      });
+      return result as NavigationResult;
+    };
+    return new Proxy(navigation, {
+      get(target, prop, receiver) {
+        if (prop === "navigate") return navigate;
+        const value = Reflect.get(target, prop, receiver);
+        return typeof value === "function" ? value.bind(target) : value;
+      },
+    });
+  }, [navigation, setState]);
+}

package/src/util/future.ts

@@ -0,0 +1,21 @@
+type Resolution<T> = {
+  resolve: (value: T) => void;
+  reject: (reason?: unknown) => void;
+};
+type Future<T> = Promise<T> & Resolution<T>;
+
+/**
+ * Returns a Promise that can be resolved or rejected from outside.
+ * @param suppressUncaught If true, adds a dummy catch handler to bypass browsers' uncaught error logging.
+ */
+export function future<T>(suppressUncaught?: boolean) {
+  const resolution = {} as Resolution<T>;
+  const result = new Promise<T>((resolve, reject) => {
+    resolution.resolve = resolve;
+    resolution.reject = reject;
+  }) as Future<T>;
+  result.resolve = resolution.resolve;
+  result.reject = resolution.reject;
+  if (suppressUncaught) result.catch(() => {});
+  return result;
+}

package/tsconfig.app.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": "."
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import dts from "unplugin-dts/vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "useNavigationAPI",
+      fileName: (format) => `use-navigation-api.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      output: {
+        globals: {
+          react: "React",
+        },
+      },
+    },
+  },
+  plugins: [
+    react(),
+    dts({ tsconfigPath: "./tsconfig.app.json" }),
+    tsconfigPaths(),
+  ],
+});