@kirill.konshin/next 0.0.2 → 0.0.4

package/.turbo/turbo-build.log

@@ -8,17 +8,18 @@
 
 ✔ ctix 'create' mode complete!
 transforming...
-✓ 6 modules transformed.
+✓ 7 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
-dist/noSSR.js       0.35 kB │ map: 1.45 kB
-dist/index.js       0.35 kB │ map: 0.09 kB
+dist/noSSR.js       0.35 kB │ map: 1.52 kB
 dist/useIsInner.js  0.37 kB │ map: 0.61 kB
-dist/redirect.js    0.38 kB │ map: 0.85 kB
+dist/redirect.js    0.38 kB │ map: 0.87 kB
 dist/measure.js     0.38 kB │ map: 1.04 kB
-dist/appLink.js     0.80 kB │ map: 1.62 kB
-[vite:dts] Declaration files built in 1665ms.
+dist/index.js       0.44 kB │ map: 0.10 kB
+dist/softLink.js    0.72 kB │ map: 1.85 kB
+dist/appLink.js     1.02 kB │ map: 2.14 kB
+[vite:dts] Declaration files built in 1481ms.
 
-✓ built in 4.92s
+✓ built in 6.03s
 Updated package.json with exports

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kirill.konshin/next
 
+## 0.0.4
+
+### Patch Changes
+
+- Minor fixes
+
+## 0.0.3
+
+### Patch Changes
+
+- Small fixes
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/appLink.d.ts

@@ -5,5 +5,6 @@ export type AppLinkProps = {
     exact?: boolean;
     activeClassName?: any;
 } & LinkProps & ComponentProps<typeof Link>;
+export declare function useIsLinkActive(): (href: ComponentProps<typeof Link>['href'], exact: boolean) => boolean;
 export declare const AppLink: FC<AppLinkProps>;
 //# sourceMappingURL=appLink.d.ts.map

package/dist/appLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appLink.d.ts","sourceRoot":"","sources":["../src/appLink.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,cAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAExD,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,GAAG,CAAC;CACzB,GAAG,SAAS,GACT,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAGhC,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAwBnC,CAAC"}
+{"version":3,"file":"appLink.d.ts","sourceRoot":"","sources":["../src/appLink.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,cAAc,EAAE,EAAE,EAA8B,MAAM,OAAO,CAAC;AAE9E,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,GAAG,CAAC;CACzB,GAAG,SAAS,GACT,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAEhC,wBAAgB,eAAe,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,CAUxG;AAGD,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAuBnC,CAAC"}

package/dist/appLink.js

@@ -1,9 +1,19 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import clsx from "clsx";
+function useIsLinkActive() {
+  const pathname = usePathname();
+  return useCallback(
+    (href, exact) => {
+      const hrefPath = typeof href === "string" ? href : href.pathname || "/";
+      return !exact && pathname.startsWith(hrefPath) || exact && pathname === hrefPath;
+    },
+    [pathname]
+  );
+}
 const AppLink = memo(function AppLink2({
   href,
   children,
@@ -14,15 +24,14 @@ const AppLink = memo(function AppLink2({
   exact = false,
   ...props
 }) {
-  const pathname = usePathname();
-  const hrefPath = typeof href === "string" ? href : href.pathname || "/";
+  const isActive = useIsLinkActive();
   return /* @__PURE__ */ jsx(
     Link,
     {
       ...props,
       href,
       className: clsx(className, {
-        [activeClassName]: !exact && pathname.startsWith(hrefPath) || exact && pathname === hrefPath
+        [activeClassName]: isActive(href, exact)
       }),
       prefetch,
       children
@@ -30,6 +39,7 @@ const AppLink = memo(function AppLink2({
   );
 });
 export {
-  AppLink
+  AppLink,
+  useIsLinkActive
 };
 //# sourceMappingURL=appLink.js.map

package/dist/appLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"appLink.js","sources":["../src/appLink.tsx"],"sourcesContent":["'use client';\n\nimport React, { ComponentProps, FC, memo } from 'react';\nimport { usePathname } from 'next/navigation';\nimport Link, { LinkProps } from 'next/link';\nimport clsx from 'clsx';\n\nexport type AppLinkProps = {\n    children: any;\n    exact?: boolean;\n    activeClassName?: any;\n} & LinkProps &\n    ComponentProps<typeof Link>;\n\n//TODO Test this\nexport const AppLink: FC<AppLinkProps> = memo(function AppLink({\n    href,\n    children,\n    className = '',\n    activeClassName = '',\n    prefetch = false, // set explicit default\n    exact = false,\n    ...props\n}) {\n    const pathname = usePathname();\n    const hrefPath = typeof href === 'string' ? href : href.pathname || '/';\n\n    return (\n        <Link\n            {...props}\n            href={href}\n            className={clsx(className, {\n                [activeClassName]: (!exact && pathname.startsWith(hrefPath)) || (exact && pathname === hrefPath),\n            })}\n            prefetch={prefetch}\n        >\n            {children}\n        </Link>\n    );\n});\n"],"names":["AppLink"],"mappings":";;;;;;AAeO,MAAM,UAA4B,KAAK,SAASA,SAAQ;AAAA,EAC3D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,WAAW;AAAA;AAAA,EACX,QAAQ;AAAA,EACR,GAAG;AACP,GAAG;AACC,QAAM,WAAW,YAAA;AACjB,QAAM,WAAW,OAAO,SAAS,WAAW,OAAO,KAAK,YAAY;AAEpE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,KAAK,WAAW;AAAA,QACvB,CAAC,eAAe,GAAI,CAAC,SAAS,SAAS,WAAW,QAAQ,KAAO,SAAS,aAAa;AAAA,MAAA,CAC1F;AAAA,MACD;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}
+{"version":3,"file":"appLink.js","sources":["../src/appLink.tsx"],"sourcesContent":["'use client';\n\nimport React, { ComponentProps, FC, memo, useCallback, useMemo } from 'react';\nimport { usePathname } from 'next/navigation';\nimport Link, { LinkProps } from 'next/link';\nimport clsx from 'clsx';\n\nexport type AppLinkProps = {\n    children: any;\n    exact?: boolean;\n    activeClassName?: any;\n} & LinkProps &\n    ComponentProps<typeof Link>;\n\nexport function useIsLinkActive(): (href: ComponentProps<typeof Link>['href'], exact: boolean) => boolean {\n    const pathname = usePathname();\n\n    return useCallback(\n        (href: ComponentProps<typeof Link>['href'], exact: boolean): boolean => {\n            const hrefPath = typeof href === 'string' ? href : href.pathname || '/';\n            return (!exact && pathname.startsWith(hrefPath)) || (exact && pathname === hrefPath);\n        },\n        [pathname],\n    );\n}\n\n//TODO Test this\nexport const AppLink: FC<AppLinkProps> = memo(function AppLink({\n    href,\n    children,\n    className = '',\n    activeClassName = '',\n    prefetch = false, // set explicit default\n    exact = false,\n    ...props\n}) {\n    const isActive = useIsLinkActive();\n\n    return (\n        <Link\n            {...props}\n            href={href}\n            className={clsx(className, {\n                [activeClassName]: isActive(href, exact),\n            })}\n            prefetch={prefetch}\n        >\n            {children}\n        </Link>\n    );\n});\n"],"names":["AppLink"],"mappings":";;;;;;AAcO,SAAS,kBAA0F;AACtG,QAAM,WAAW,YAAA;AAEjB,SAAO;AAAA,IACH,CAAC,MAA2C,UAA4B;AACpE,YAAM,WAAW,OAAO,SAAS,WAAW,OAAO,KAAK,YAAY;AACpE,aAAQ,CAAC,SAAS,SAAS,WAAW,QAAQ,KAAO,SAAS,aAAa;AAAA,IAC/E;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAEjB;AAGO,MAAM,UAA4B,KAAK,SAASA,SAAQ;AAAA,EAC3D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,WAAW;AAAA;AAAA,EACX,QAAQ;AAAA,EACR,GAAG;AACP,GAAG;AACC,QAAM,WAAW,gBAAA;AAEjB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,KAAK,WAAW;AAAA,QACvB,CAAC,eAAe,GAAG,SAAS,MAAM,KAAK;AAAA,MAAA,CAC1C;AAAA,MACD;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;"}

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export * from './appLink';
 export * from './measure';
 export * from './noSSR';
 export * from './redirect';
+export * from './softLink';
 export * from './useIsInner';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -1,15 +1,18 @@
-import { AppLink } from "./appLink.js";
+import { AppLink, useIsLinkActive } from "./appLink.js";
 import { isProd, measurer } from "./measure.js";
 import { NoSSR } from "./noSSR.js";
 import { Redirect } from "./redirect.js";
+import { SoftLink } from "./softLink.js";
 import { useIsIndex, useIsInner } from "./useIsInner.js";
 export {
   AppLink,
   NoSSR,
   Redirect,
+  SoftLink,
   isProd,
   measurer,
   useIsIndex,
-  useIsInner
+  useIsInner,
+  useIsLinkActive
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/noSSR.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"noSSR.d.ts","sourceRoot":"","sources":["../src/noSSR.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAQ,GAAG,EAA6B,MAAM,OAAO,CAAC;AAExE,MAAM,MAAM,UAAU,GAAG;IACrB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAQ/B,CAAC"}
+{"version":3,"file":"noSSR.d.ts","sourceRoot":"","sources":["../src/noSSR.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAQ,GAAG,EAA6B,MAAM,OAAO,CAAC;AAExE,MAAM,MAAM,UAAU,GAAG;IACrB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAS/B,CAAC"}

package/dist/noSSR.js.map

@@ -1 +1 @@
-{"version":3,"file":"noSSR.js","sources":["../src/noSSR.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC, memo, JSX, useLayoutEffect, useState } from 'react';\n\nexport type NoSSRProps = {\n    children: any;\n    onSSR?: JSX.Element;\n};\n\n/**\n * Prefer using Next.js `dynamic()` import with `ssr: false` because this will also remove import from server bundle.\n *\n * ```tsx\n * 'use client';\n *\n * import React from 'react';\n * import dynamic from 'next/dynamic';\n *\n * const PageClient = dynamic(() => import('./pageClient'), { ssr: false });\n *\n * export default function Page() {\n *   return (\n *     <PageClient />\n *   );\n * }\n * ```\n *\n * In other cases this component can be used to just prevent server rendering.\n *\n * @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js\n * @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only\n */\nexport const NoSSR: FC<NoSSRProps> = memo(function NoSSR({ children, onSSR = null }): any {\n    const [canRender, setCanRender] = useState(false);\n\n    useLayoutEffect(() => {\n        setCanRender(true);\n    }, []);\n\n    return canRender ? children : onSSR;\n});\n"],"names":["NoSSR"],"mappings":";;AAgCO,MAAM,QAAwB,KAAK,SAASA,OAAM,EAAE,UAAU,QAAQ,QAAa;AACtF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,kBAAgB,MAAM;AAClB,iBAAa,IAAI;AAAA,EACrB,GAAG,CAAA,CAAE;AAEL,SAAO,YAAY,WAAW;AAClC,CAAC;"}
+{"version":3,"file":"noSSR.js","sources":["../src/noSSR.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC, memo, JSX, useLayoutEffect, useState } from 'react';\n\nexport type NoSSRProps = {\n    children: any;\n    onSSR?: JSX.Element;\n};\n\n/**\n * Prefer using Next.js `dynamic()` import with `ssr: false` because this will also remove import from server bundle.\n *\n * ```tsx\n * 'use client';\n *\n * import React from 'react';\n * import dynamic from 'next/dynamic';\n *\n * const PageClient = dynamic(() => import('./pageClient'), { ssr: false });\n *\n * export default function Page() {\n *   return (\n *     <PageClient />\n *   );\n * }\n * ```\n *\n * In other cases this component can be used to just prevent server rendering.\n *\n * @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js\n * @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only\n */\nexport const NoSSR: FC<NoSSRProps> = memo(function NoSSR({ children, onSSR = null }): any {\n    const [canRender, setCanRender] = useState(false);\n\n    useLayoutEffect(() => {\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setCanRender(true);\n    }, []);\n\n    return canRender ? children : onSSR;\n});\n"],"names":["NoSSR"],"mappings":";;AAgCO,MAAM,QAAwB,KAAK,SAASA,OAAM,EAAE,UAAU,QAAQ,QAAa;AACtF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,kBAAgB,MAAM;AAElB,iBAAa,IAAI;AAAA,EACrB,GAAG,CAAA,CAAE;AAEL,SAAO,YAAY,WAAW;AAClC,CAAC;"}

package/dist/redirect.d.ts

@@ -4,5 +4,8 @@ export type RedirectProps = {
     to: LinkProps['href'];
     replace?: LinkProps['replace'];
 };
+/**
+ * @deprecated
+ */
 export declare const Redirect: FC<RedirectProps>;
 //# sourceMappingURL=redirect.d.ts.map

package/dist/redirect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"redirect.d.ts","sourceRoot":"","sources":["../src/redirect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG;IACxB,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAMrC,CAAC"}
+{"version":3,"file":"redirect.d.ts","sourceRoot":"","sources":["../src/redirect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG;IACxB,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAMrC,CAAC"}

package/dist/redirect.js.map

@@ -1 +1 @@
-{"version":3,"file":"redirect.js","sources":["../src/redirect.tsx"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { FC, memo, useEffect } from 'react';\nimport type { LinkProps } from 'next/link';\n\nexport type RedirectProps = {\n    to: LinkProps['href'];\n    replace?: LinkProps['replace'];\n};\n\nexport const Redirect: FC<RedirectProps> = memo(function Redirect({ to, replace }) {\n    const router = useRouter();\n    useEffect(() => {\n        router[replace ? 'replace' : 'push'](to.toString()); //TODO Test this\n    }, [replace, router, to]);\n    return null;\n});\n"],"names":["Redirect"],"mappings":";;;AAWO,MAAM,WAA8B,KAAK,SAASA,UAAS,EAAE,IAAI,WAAW;AAC/E,QAAM,SAAS,UAAA;AACf,YAAU,MAAM;AACZ,WAAO,UAAU,YAAY,MAAM,EAAE,GAAG,UAAU;AAAA,EACtD,GAAG,CAAC,SAAS,QAAQ,EAAE,CAAC;AACxB,SAAO;AACX,CAAC;"}
+{"version":3,"file":"redirect.js","sources":["../src/redirect.tsx"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { FC, memo, useEffect } from 'react';\nimport type { LinkProps } from 'next/link';\n\nexport type RedirectProps = {\n    to: LinkProps['href'];\n    replace?: LinkProps['replace'];\n};\n\n/**\n * @deprecated\n */\nexport const Redirect: FC<RedirectProps> = memo(function Redirect({ to, replace }) {\n    const router = useRouter();\n    useEffect(() => {\n        router[replace ? 'replace' : 'push'](to.toString()); //TODO Test this\n    }, [replace, router, to]);\n    return null;\n});\n"],"names":["Redirect"],"mappings":";;;AAcO,MAAM,WAA8B,KAAK,SAASA,UAAS,EAAE,IAAI,WAAW;AAC/E,QAAM,SAAS,UAAA;AACf,YAAU,MAAM;AACZ,WAAO,UAAU,YAAY,MAAM,EAAE,GAAG,UAAU;AAAA,EACtD,GAAG,CAAC,SAAS,QAAQ,EAAE,CAAC;AACxB,SAAO;AACX,CAAC;"}

package/dist/softLink.d.ts

@@ -0,0 +1,14 @@
+import { default as Link, LinkProps } from 'next/link';
+import { ReactNode } from 'react';
+export type SoftLinkProps = LinkProps & {
+    children?: ReactNode;
+};
+/**
+ * Search Params update w/o rerender
+ *
+ * https://nextjs.org/docs/app/api-reference/functions/use-search-params#prerendering
+ * https://github.com/vercel/next.js/issues/43691#issuecomment-2078921491
+ * https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api
+ */
+export declare const SoftLink: typeof Link;
+//# sourceMappingURL=softLink.d.ts.map

package/dist/softLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"softLink.d.ts","sourceRoot":"","sources":["../src/softLink.tsx"],"names":[],"mappings":"AAEA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAc,EAAQ,SAAS,EAAe,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAoBf,OAAO,IAAI,CAAC"}

package/dist/softLink.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import { memo, useCallback } from "react";
+const SoftLink = memo(function SoftLink2({ href, children, replace, ...props }) {
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      window.history[replace ? "replaceState" : "pushState"](
+        null,
+        "",
+        typeof href === "string" ? href : `${href["pathname"] || ""}?${typeof href["query"] === "string" ? href["query"] : new URLSearchParams(href["query"]).toString()}`
+      );
+    },
+    [href, replace]
+  );
+  return /* @__PURE__ */ jsx(Link, { href, ...props, onClick, children });
+});
+export {
+  SoftLink
+};
+//# sourceMappingURL=softLink.js.map

package/dist/softLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"softLink.js","sources":["../src/softLink.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport React, { memo, ReactNode, useCallback } from 'react';\nimport { LinkProps } from 'next/link';\n\nexport type SoftLinkProps = LinkProps & {\n    children?: ReactNode;\n};\n\n/**\n * Search Params update w/o rerender\n *\n * https://nextjs.org/docs/app/api-reference/functions/use-search-params#prerendering\n * https://github.com/vercel/next.js/issues/43691#issuecomment-2078921491\n * https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api\n */\nexport const SoftLink = memo<SoftLinkProps>(function SoftLink({ href, children, replace, ...props }) {\n    const onClick = useCallback(\n        (e) => {\n            e.preventDefault();\n            window.history[replace ? 'replaceState' : 'pushState'](\n                null,\n                '',\n                typeof href === 'string'\n                    ? href\n                    : `${href['pathname'] || ''}?${typeof href['query'] === 'string' ? href['query'] : new URLSearchParams(href['query'] as never).toString()}`,\n            );\n        },\n        [href, replace],\n    );\n\n    return (\n        <Link href={href} {...props} onClick={onClick}>\n            {children}\n        </Link>\n    );\n}) as typeof Link;\n"],"names":["SoftLink"],"mappings":";;;;AAiBO,MAAM,WAAW,KAAoB,SAASA,UAAS,EAAE,MAAM,UAAU,SAAS,GAAG,SAAS;AACjG,QAAM,UAAU;AAAA,IACZ,CAAC,MAAM;AACH,QAAE,eAAA;AACF,aAAO,QAAQ,UAAU,iBAAiB,WAAW;AAAA,QACjD;AAAA,QACA;AAAA,QACA,OAAO,SAAS,WACV,OACA,GAAG,KAAK,UAAU,KAAK,EAAE,IAAI,OAAO,KAAK,OAAO,MAAM,WAAW,KAAK,OAAO,IAAI,IAAI,gBAAgB,KAAK,OAAO,CAAU,EAAE,UAAU;AAAA,MAAA;AAAA,IAErJ;AAAA,IACA,CAAC,MAAM,OAAO;AAAA,EAAA;AAGlB,6BACK,MAAA,EAAK,MAAa,GAAG,OAAO,SACxB,UACL;AAER,CAAC;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kirill.konshin/next",
   "description": "Utilities",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",
@@ -54,5 +54,10 @@
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kirill-konshin/utils.git",
+    "directory": "packages/next"
+  }
 }

package/src/appLink.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { ComponentProps, FC, memo } from 'react';
+import React, { ComponentProps, FC, memo, useCallback, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import Link, { LinkProps } from 'next/link';
 import clsx from 'clsx';
@@ -12,6 +12,18 @@ export type AppLinkProps = {
 } & LinkProps &
     ComponentProps<typeof Link>;
 
+export function useIsLinkActive(): (href: ComponentProps<typeof Link>['href'], exact: boolean) => boolean {
+    const pathname = usePathname();
+
+    return useCallback(
+        (href: ComponentProps<typeof Link>['href'], exact: boolean): boolean => {
+            const hrefPath = typeof href === 'string' ? href : href.pathname || '/';
+            return (!exact && pathname.startsWith(hrefPath)) || (exact && pathname === hrefPath);
+        },
+        [pathname],
+    );
+}
+
 //TODO Test this
 export const AppLink: FC<AppLinkProps> = memo(function AppLink({
     href,
@@ -22,15 +34,14 @@ export const AppLink: FC<AppLinkProps> = memo(function AppLink({
     exact = false,
     ...props
 }) {
-    const pathname = usePathname();
-    const hrefPath = typeof href === 'string' ? href : href.pathname || '/';
+    const isActive = useIsLinkActive();
 
     return (
         <Link
             {...props}
             href={href}
             className={clsx(className, {
-                [activeClassName]: (!exact && pathname.startsWith(hrefPath)) || (exact && pathname === hrefPath),
+                [activeClassName]: isActive(href, exact),
             })}
             prefetch={prefetch}
         >

package/src/index.ts

@@ -2,4 +2,5 @@ export * from './appLink';
 export * from './measure';
 export * from './noSSR';
 export * from './redirect';
+export * from './softLink';
 export * from './useIsInner';

package/src/noSSR.tsx

@@ -34,6 +34,7 @@ export const NoSSR: FC<NoSSRProps> = memo(function NoSSR({ children, onSSR = nul
     const [canRender, setCanRender] = useState(false);
 
     useLayoutEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setCanRender(true);
     }, []);
 

package/src/redirect.tsx

@@ -9,6 +9,9 @@ export type RedirectProps = {
     replace?: LinkProps['replace'];
 };
 
+/**
+ * @deprecated
+ */
 export const Redirect: FC<RedirectProps> = memo(function Redirect({ to, replace }) {
     const router = useRouter();
     useEffect(() => {

package/src/softLink.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import Link from 'next/link';
+import React, { memo, ReactNode, useCallback } from 'react';
+import { LinkProps } from 'next/link';
+
+export type SoftLinkProps = LinkProps & {
+    children?: ReactNode;
+};
+
+/**
+ * Search Params update w/o rerender
+ *
+ * https://nextjs.org/docs/app/api-reference/functions/use-search-params#prerendering
+ * https://github.com/vercel/next.js/issues/43691#issuecomment-2078921491
+ * https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api
+ */
+export const SoftLink = memo<SoftLinkProps>(function SoftLink({ href, children, replace, ...props }) {
+    const onClick = useCallback(
+        (e) => {
+            e.preventDefault();
+            window.history[replace ? 'replaceState' : 'pushState'](
+                null,
+                '',
+                typeof href === 'string'
+                    ? href
+                    : `${href['pathname'] || ''}?${typeof href['query'] === 'string' ? href['query'] : new URLSearchParams(href['query'] as never).toString()}`,
+            );
+        },
+        [href, replace],
+    );
+
+    return (
+        <Link href={href} {...props} onClick={onClick}>
+            {children}
+        </Link>
+    );
+}) as typeof Link;