Steal tanStack way of augmenting interface

Author: garronej

src/Header/Header.tsx

@@ -4,7 +4,7 @@ import { fr } from "../lib";
 import { createComponentI18nApi } from "../lib/i18n";
 import { symToStr } from "tsafe/symToStr";
 import { cx } from "../lib/tools/cx";
-import type { LinkProps } from "../lib/routing";
+import type { RegisteredLinkProps } from "../lib/routing";
 import { useLink } from "../lib/routing";
 import type { MainNavigationProps } from "./MainNavigation";
 import { MainNavigation } from "./MainNavigation";
@@ -18,7 +18,7 @@ export type HeaderProps = {
     serviceTitle?: ReactNode;
     serviceTagline?: ReactNode;
     /** Don't forget the title on the link for accessibility*/
-    homeLinkProps: LinkProps;
+    homeLinkProps: RegisteredLinkProps;
     navItems?: MainNavigationProps.Item[];
     /** There should be at most three of them */
     quickAccessItems?: HeaderProps.QuickAccessItem[];
@@ -69,7 +69,7 @@ export namespace HeaderProps {
         };
 
         export type Link = Common & {
-            linkProps: LinkProps;
+            linkProps: RegisteredLinkProps;
             buttonProps?: undefined;
         };
 

src/Header/MainNavigation/MainNavigation.tsx

@@ -4,7 +4,7 @@ import { createComponentI18nApi } from "../../lib/i18n";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { LinkProps } from "../../lib/routing";
+import type { RegisteredLinkProps } from "../../lib/routing";
 import { fr } from "../../lib";
 import { cx } from "../../lib/tools/cx";
 import { useLink } from "../../lib/routing";
@@ -30,7 +30,7 @@ export namespace MainNavigationProps {
         };
 
         export type Link = Common & {
-            linkProps: LinkProps;
+            linkProps: RegisteredLinkProps;
             menuProps?: undefined;
             megaMenuProps?: undefined;
         };

src/Header/MainNavigation/Menu.tsx

@@ -5,15 +5,15 @@ import { fr } from "../../lib";
 import { cx } from "../../lib/tools/cx";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { LinkProps } from "../../lib/routing";
+import type { RegisteredLinkProps } from "../../lib/routing";
 import { useLink } from "../../lib/routing";
 
 export type MenuProps = {
     className?: string;
     classes?: Partial<Record<"root" | "list", string>>;
     items: {
         text: ReactNode;
-        linkProps: LinkProps;
+        linkProps: RegisteredLinkProps;
         isActive?: boolean;
     }[];
 };

src/lib/index.ts

@@ -10,7 +10,7 @@ import { cx } from "./cx";
 export type { FrCxArg } from "./cx";
 export { DsfrLangProvider } from "./i18n";
 export { createDsfrLinkProvider } from "./routing";
-export type { LinkProps, HTMLAnchorProps } from "./routing";
+export type { RegisterLink, RegisteredLinkProps, HTMLAnchorProps } from "./routing";
 
 export const fr = {
     breakpoints,

src/lib/routing.tsx

@@ -1,24 +1,40 @@
 import React, { createContext, useContext } from "react";
 import type { ReactNode } from "react";
+import { assert } from "tsafe/assert";
 
 import type { DetailedHTMLProps, AnchorHTMLAttributes } from "react";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+/*
 export interface LinkProps extends React.AriaAttributes {
     className?: string;
     children?: ReactNode;
 }
+*/
 
 export type HTMLAnchorProps = DetailedHTMLProps<
     AnchorHTMLAttributes<HTMLAnchorElement>,
     HTMLAnchorElement
 >;
 
-//NOTE: Here we have use as any because the module augmentation that we define in ../next applies unfortunately.
-const context = createContext<CreateLinkProviderPrams["Link"]>(props => <a {...(props as any)} />);
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface RegisterLink {
+    // Link: typeof Link
+}
+
+export type RegisteredLinkProps = RegisterLink extends {
+    Link: (props: infer LinkProps) => any;
+}
+    ? Omit<LinkProps, "children">
+    : RegisterLink extends { Link: "a" }
+    ? Omit<HTMLAnchorProps, "children">
+    : React.AriaAttributes & { className?: string };
+
+const context = createContext<CreateLinkProviderPrams["Link"] | undefined>(undefined);
 
 type CreateLinkProviderPrams = {
-    Link: (props: LinkProps) => ReturnType<React.FC>;
+    Link: ((props: RegisteredLinkProps & { children: ReactNode }) => ReturnType<React.FC>) | "a";
 };
 
 export function createDsfrLinkProvider(params: CreateLinkProviderPrams) {
@@ -38,7 +54,16 @@ export function createDsfrLinkProvider(params: CreateLinkProviderPrams) {
 }
 
 export function useLink() {
-    const Link = useContext(context);
+    let Link = useContext(context);
+
+    assert(
+        Link !== undefined,
+        "You need to specify what routing library is in use in your project, see: https://react-dsfr.etalab.studio/routing"
+    );
+
+    if (Link === "a") {
+        Link = props => <a {...props} />;
+    }
 
     return { Link };
 }

src/next.tsx

@@ -34,8 +34,6 @@ import DefaultDocument from "next/document";
 import { getAssetUrl } from "./lib/tools/getAssetUrl";
 import { setLangToUseIfProviderNotUsed } from "./lib/i18n";
 import { getColors } from "./lib/colors";
-import { createDsfrLinkProvider } from "./lib/routing";
-import Link from "next/link";
 import "./dsfr/dsfr.css";
 import "./dsfr/utility/icons/icons.css";
 
@@ -52,15 +50,6 @@ const fontUrlByFileBasename = {
     "Spectral-ExtraBold": spectralExtraBoldWoff2Url
 } as const;
 
-type InferLinkProps<Link> = Link extends React.ForwardRefExoticComponent<infer Props>
-    ? Props
-    : never;
-
-declare module "./lib/routing" {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    export interface LinkProps extends InferLinkProps<typeof Link> {}
-}
-
 export type Params = Params.WithDarkModeCookie | Params.WithoutDarkModeCookie;
 export namespace Params {
     export type Common = StartDsfrReactParams & {
@@ -146,8 +135,6 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
         }
     }
 
-    const { DsfrLinkProvider } = createDsfrLinkProvider({ Link });
-
     const isDarkPropKey = "dsfrIsDark";
 
     function withDsfr<AppComponent extends NextComponentType<any, any, any>>(
@@ -168,7 +155,7 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
             }, []);
 
             return (
-                <DsfrLinkProvider>
+                <>
                     <Head>
                         {process.env.NODE_ENV !== "development" &&
                             objectKeys(fontUrlByFileBasename)
@@ -210,7 +197,7 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
                             <App {...(props as any)} />
                         </SsrIsDarkProvider>
                     )}
-                </DsfrLinkProvider>
+                </>
             );
         }
 

test/integration/cra/src/index.tsx

@@ -6,15 +6,19 @@ import { Mui } from "./Mui";
 import { useRoute, RouteProvider } from "./router";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { fr } from "@codegouvfr/react-dsfr";
-import type { Link as TypeRouteLink } from "type-route";
 import { routes } from "./router";
+import { createDsfrLinkProvider } from "@codegouvfr/react-dsfr";
 
 declare module "@codegouvfr/react-dsfr" {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    export interface LinkProps extends TypeRouteLink { }
-
+    interface RegisterLink { 
+        Link: "a";
+    }
 }
 
+const { DsfrLinkProvider } = createDsfrLinkProvider({
+    "Link": "a"
+});
+
 startReactDsfr({
     "defaultColorScheme": "system"
 });
@@ -32,7 +36,7 @@ function Root() {
     const route = useRoute();
 
     return (
-        <>
+        <DsfrLinkProvider>
             <Header
                 brandTop={<>INTITULE<br />OFFICIEL</>}
                 serviceTitle="Nom du site / service"
@@ -63,8 +67,7 @@ function Root() {
                     }
                 })()}
             </div>
-        </>
-
+        </DsfrLinkProvider>
     );
 
 

test/integration/next/pages/_app.tsx

@@ -6,6 +6,16 @@ import { Header } from "@codegouvfr/react-dsfr/Header";
 import { createEmotionSsrAdvancedApproach } from "tss-react/next";
 import { useStyles } from "tss-react/dsfr";
 import { fr } from "@codegouvfr/react-dsfr";
+import { createDsfrLinkProvider } from "@codegouvfr/react-dsfr";
+import Link from "next/link";
+
+declare module "@codegouvfr/react-dsfr" {
+    interface RegisterLink { 
+        Link: typeof Link;
+    }
+}
+
+const { DsfrLinkProvider } = createDsfrLinkProvider({ Link });
 
 const {
     withDsfr,
@@ -39,7 +49,7 @@ function App({ Component, pageProps }: AppProps) {
     const router = useRouter()
 
     return (
-        <>
+        <DsfrLinkProvider>
             <Header
                 brandTop={<>INTITULE<br />OFFICIEL</>}
                 serviceTitle="Nom du site / service"
@@ -72,7 +82,7 @@ function App({ Component, pageProps }: AppProps) {
                 <Component {...pageProps} />
             </div>
             <Display />
-        </>
+        </DsfrLinkProvider>
     );
 }
 

test/integration/vite/src/main.tsx

@@ -6,16 +6,15 @@ import { startReactDsfr, createDsfrLinkProvider, fr } from "@codegouvfr/react-ds
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { BrowserRouter } from "react-router-dom";
 import { Routes, Route, Link, useLocation } from "react-router-dom";
-import type { LinkProps as ReactRouterLinkProps } from "react-router-dom";
 startReactDsfr({ "defaultColorScheme": "system" });
 
 declare module "@codegouvfr/react-dsfr" {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    export interface LinkProps extends ReactRouterLinkProps { }
-
+    interface RegisterLink { 
+        Link: typeof Link;
+    }
 }
 
-const { DsfrLinkProvider } = createDsfrLinkProvider({ Link })
+const { DsfrLinkProvider } = createDsfrLinkProvider({ Link });
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
@@ -32,7 +31,7 @@ function Root() {
     const location = useLocation();
 
     return (
-        <>
+        <DsfrLinkProvider>
             <Header
                 brandTop={<>INTITULE<br />OFFICIEL</>}
                 serviceTitle="Nom du site / service"
@@ -65,7 +64,7 @@ function Root() {
                     <Route path="*" element={<h1>404</h1>} />
                 </Routes>
             </div>
-        </>
+        </DsfrLinkProvider>
 
     );