Merge pull request #48 from g4rcez/anchor-id

wip: anchor identifier

Author: OrionFable

src/brouther/brouther.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import type { ConfiguredRoute, Location, PathFormat } from "../types";
 import { BroutherError, NotFoundRoute, UncaughtDataLoader } from "../utils/errors";
 import { createHref, has, join, mapUrlToQueryStringRecord, transformData, urlEntity } from "../utils/utils";
@@ -255,15 +255,26 @@ export const Outlet = (props: { notFound?: React.ReactElement }) => {
     Boolean that represents if it's your action/loader process is loading
     @returns string
  */
-export const useLoadingState = () => {
-    const router = useRouter();
-    return router.loading;
-};
+export const useLoadingState = () => useRouter().loading;
 
 /*
     @private
 */
-export const useFlags = () => {
-    const router = useRouter();
-    return router.flags;
+export const useFlags = () => useRouter().flags;
+
+const useStableRef = <V extends any>(value: V) => {
+    const v = useRef(value);
+    useEffect(() => {
+        v.current = value;
+    }, [value]);
+    return v;
+};
+
+export const useBeforeUnload = (fn: (event: BeforeUnloadEvent) => void) => {
+    const func = useStableRef(fn);
+    useEffect(() => {
+        const closure = (e: BeforeUnloadEvent) => func.current(e);
+        window.addEventListener("beforeunload", closure);
+        return () => window.addEventListener("beforeunload", closure);
+    }, []);
 };

src/index.ts

@@ -30,6 +30,7 @@ export {
     useQueryString,
     useRouteError,
     useUrlSearchParams,
+    useBeforeUnload,
 } from "./brouther/brouther";
 export { BroutherError, NotFoundRoute } from "./utils/errors";
 export { Form } from "./form/form";

src/router/link.tsx

@@ -49,6 +49,7 @@ export const Link: <TPath extends string>(props: LinkProps<TPath>) => React.Reac
             onClick?.(event, { query, paths } as QueryAndPaths<TPath>);
             return replace ? _replace(_href, state) : push(_href, state);
         };
+
         return <a {...props} target={target} rel={rel} href={_href} onClick={_onClick} ref={ref} />;
     }
 ) as any;

src/router/router.ts

@@ -40,14 +40,14 @@ const configureRoutes = (
     arr: Route[],
     basename: string
 ): {
-    path: PathFormat;
-    regex: RegExp;
+    readonly actions?: Actions;
     readonly data?: RouteData;
-    readonly loader?: Loader<PathFormat, RouteData>;
-    readonly id: string;
-    originalPath: PathFormat;
-    readonly actions?: Actions<PathFormat, RouteData>;
     readonly element: React.ReactElement;
+    readonly id: string;
+    readonly loader?: Loader;
+    readonly originalPath: PathFormat;
+    readonly path: PathFormat;
+    readonly regex: RegExp;
 }[] =>
     rankRoutes(arr).map((x) => ({
         ...x,
@@ -58,13 +58,13 @@ const configureRoutes = (
 export const createRoute = <
     const Path extends PathFormat,
     const Args extends {
-        id?: string;
-        element: React.ReactElement;
-        loader?: Route<Path, Data>["loader"];
         actions?: Route<Path, Data>["actions"];
+        element: React.ReactElement;
         errorElement?: Route<Path, Data>["element"];
+        id?: string;
+        loader?: Route<Path, Data>["loader"];
     },
-    const Data extends RouteData
+    const Data extends RouteData,
 >(
     path: Path,
     args: Args,

tests/anchor-target.test.ts

@@ -10,4 +10,9 @@ describe("Should test the anchor target", () => {
         expect(fetchTarget(true, "https://example.com", "http://localhost:3000")).toBe("_blank");
         expect(fetchTarget(true, "https://example.com", "http://localhost:3000")).toBe("_blank");
     });
+
+    test("Should test different origin but without openExternalLinksInTabs", () => {
+        expect(fetchTarget(false, "https://example.com", "http://localhost:3000")).not.toBe("_blank");
+        expect(fetchTarget(false, "https://example.com", "http://localhost:3000")).not.toBe("_blank");
+    });
 });