Move from provider to setter for the Link (preparing for appdir)

garronej · garronej · commit 8119ec0210c7 · 2022-12-21T00:34:18.000+01:00
diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
@@ -3,7 +3,7 @@ import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 
-import { RegisteredLinkProps, useLink } from "./lib/routing";
+import { RegisteredLinkProps, getLink } from "./lib/routing";
 import { createComponentI18nApi } from "./lib/i18n";
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
@@ -33,7 +33,7 @@ export const Breadcrumb = memo(
 
         const { t } = useTranslation();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
         const breadcrumbId = useId();
 
         return (
diff --git a/src/Button.tsx b/src/Button.tsx
@@ -8,7 +8,7 @@ import type {
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
 import type { FrIconClassName, RiIconClassName } from "./lib/generatedFromCss/classNames";
-import { RegisteredLinkProps, useLink } from "./lib/routing";
+import { RegisteredLinkProps, getLink } from "./lib/routing";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { symToStr } from "tsafe/symToStr";
@@ -84,7 +84,7 @@ export const Button = memo(
 
         assert<Equals<keyof typeof rest, never>>();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
 
         const className = cx(
             fr.cx(
diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -1,6 +1,6 @@
 import React, { memo, forwardRef } from "react";
 import type { ReactNode } from "react";
-import { useLink } from "./lib/routing";
+import { getLink } from "./lib/routing";
 import type { RegisteredLinkProps } from "./lib/routing";
 import { symToStr } from "tsafe/symToStr";
 import { fr } from "./lib";
@@ -102,7 +102,7 @@ export const Footer = memo(
 
         assert<Equals<keyof typeof rest, never>>();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
 
         const { t } = useTranslation();
 
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -5,7 +5,7 @@ import { createComponentI18nApi } from "../lib/i18n";
 import { symToStr } from "tsafe/symToStr";
 import { cx } from "../lib/tools/cx";
 import type { RegisteredLinkProps } from "../lib/routing";
-import { useLink } from "../lib/routing";
+import { getLink } from "../lib/routing";
 import type { MainNavigationProps } from "./MainNavigation";
 import { MainNavigation } from "./MainNavigation";
 import { assert } from "tsafe/assert";
@@ -121,7 +121,7 @@ export const Header = memo(
 
         const { t } = useTranslation();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
 
         return (
             <header
diff --git a/src/Header/MainNavigation/MainNavigation.tsx b/src/Header/MainNavigation/MainNavigation.tsx
@@ -7,7 +7,7 @@ import type { Equals } from "tsafe";
 import type { RegisteredLinkProps } from "../../lib/routing";
 import { fr } from "../../lib";
 import { cx } from "../../lib/tools/cx";
-import { useLink } from "../../lib/routing";
+import { getLink } from "../../lib/routing";
 import type { MenuProps } from "./Menu";
 import { Menu } from "./Menu";
 import type { MegaMenuProps } from "./MegaMenu";
@@ -75,7 +75,7 @@ export const MainNavigation = memo(
 
         const { t } = useTranslation();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
 
         const { getMenuId } = (function useClosure() {
             const id = useId();
diff --git a/src/Header/MainNavigation/MegaMenu.tsx b/src/Header/MainNavigation/MegaMenu.tsx
@@ -6,7 +6,7 @@ import { fr } from "../../lib";
 import { cx } from "../../lib/tools/cx";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import { useLink } from "../../lib/routing";
+import { getLink } from "../../lib/routing";
 import type { RegisteredLinkProps } from "../../lib/routing";
 
 export type MegaMenuProps = {
@@ -45,7 +45,7 @@ export const MegaMenu = memo(
 
         const { t } = useTranslation();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
 
         return (
             <div
diff --git a/src/Header/MainNavigation/Menu.tsx b/src/Header/MainNavigation/Menu.tsx
@@ -6,7 +6,7 @@ import { cx } from "../../lib/tools/cx";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import type { RegisteredLinkProps } from "../../lib/routing";
-import { useLink } from "../../lib/routing";
+import { getLink } from "../../lib/routing";
 
 export type MenuProps = {
     classes?: Partial<Record<"root" | "list", string>>;
@@ -27,7 +27,7 @@ export const Menu = memo(
 
         assert<Equals<keyof typeof rest, never>>();
 
-        const { Link } = useLink();
+        const { Link } = getLink();
 
         return (
             <div className={cx(fr.cx("fr-menu"), classes.root)} id={id} ref={ref} {...rest}>
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -9,7 +9,6 @@ export type { SpacingToken } from "./spacing";
 import { cx } from "./cx";
 export type { FrCxArg } from "./cx";
 export { DsfrLangProvider } from "./i18n";
-export { createDsfrLinkProvider } from "./routing";
 export type { RegisterLink, RegisteredLinkProps } from "./routing";
 
 export const fr = {
diff --git a/src/lib/routing.tsx b/src/lib/routing.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from "react";
+import React from "react";
 import type { ReactNode } from "react";
 import type { DetailedHTMLProps, AnchorHTMLAttributes } from "react";
 
@@ -8,40 +8,22 @@ type HTMLAnchorProps = DetailedHTMLProps<
 >;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface RegisterLink {
-    // Link: typeof Link
-}
+export interface RegisterLink {}
 
 export type RegisteredLinkProps = RegisterLink extends {
     Link: (props: infer LinkProps) => any;
 }
     ? Omit<LinkProps, "children">
     : Omit<HTMLAnchorProps, "children">;
 
-const context = createContext<CreateLinkProviderPrams["Link"]>(props => <a {...props} />);
-
-type CreateLinkProviderPrams = {
-    Link: (props: RegisteredLinkProps & { children: ReactNode }) => ReturnType<React.FC>;
-};
-
-export function createDsfrLinkProvider(params: CreateLinkProviderPrams) {
-    const { Link } = params;
-
-    type Props = {
-        children: ReactNode;
-    };
+let Link: (
+    props: RegisteredLinkProps & { children: ReactNode }
+) => ReturnType<React.FC> = props => <a {...props} />;
 
-    function DsfrLinkProvider(props: Props) {
-        const { children } = props;
-
-        return <context.Provider value={Link}>{children}</context.Provider>;
-    }
-
-    return { DsfrLinkProvider };
+export function setLink(params: { Link: typeof Link }): void {
+    Link = params.Link;
 }
 
-export function useLink() {
-    const Link = useContext(context);
-
+export function getLink() {
     return { Link };
 }
diff --git a/src/lib/start.ts b/src/lib/start.ts
@@ -1,14 +1,18 @@
+import type { ReactNode } from "react";
 import { isBrowser } from "./tools/isBrowser";
 import { assert } from "tsafe/assert";
 import { symToStr } from "tsafe/symToStr";
 import { startI18nLogic } from "./i18n";
 import type { ColorScheme } from "./darkMode";
 import { startClientSideIsDarkLogic } from "./darkMode";
+import type { RegisteredLinkProps } from "./routing";
+import { setLink } from "./routing";
 
 export type Params = {
     defaultColorScheme: ColorScheme | "system";
     /** Default: false */
     verbose?: boolean;
+    Link?: (props: RegisteredLinkProps & { children: ReactNode }) => ReturnType<React.FC>;
 };
 
 export type NextParams = {
@@ -19,7 +23,7 @@ export type NextParams = {
 let isStarted = false;
 
 async function startReactDsfrWithOptionalNextParams(params: Params, nextParams?: NextParams) {
-    const { defaultColorScheme, verbose = false } = params;
+    const { defaultColorScheme, verbose = false, Link } = params;
 
     assert(
         isBrowser,
@@ -35,6 +39,10 @@ async function startReactDsfrWithOptionalNextParams(params: Params, nextParams?:
 
     isStarted = true;
 
+    if (Link !== undefined) {
+        setLink({ Link });
+    }
+
     const registerEffectAction: (action: () => void) => void =
         nextParams === undefined ? action => action() : nextParams.registerEffectAction;
 
diff --git a/src/next.tsx b/src/next.tsx
@@ -32,6 +32,7 @@ import type { ColorScheme } from "./lib/darkMode";
 import DefaultDocument from "next/document";
 import { getAssetUrl } from "./lib/tools/getAssetUrl";
 import { getColors } from "./lib/colors";
+import { setLink } from "./lib/routing";
 import "./dsfr/dsfr.css";
 import "./dsfr/utility/icons/icons.css";
 
@@ -125,6 +126,11 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
                 }
             }
         });
+    } else {
+        const { Link } = startDsfrReactParams;
+        if (Link !== undefined) {
+            setLink({ Link });
+        }
     }
 
     const isDarkPropKey = "dsfrIsDark";
diff --git a/test/integration/next/pages/_app.tsx b/test/integration/next/pages/_app.tsx
@@ -7,7 +7,6 @@ import { Footer } from "@codegouvfr/react-dsfr/Footer";
 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" {
@@ -16,13 +15,12 @@ declare module "@codegouvfr/react-dsfr" {
     }
 }
 
-const { DsfrLinkProvider } = createDsfrLinkProvider({ Link });
-
 const {
     withDsfr,
     dsfrDocumentApi
 } = createNextDsfrIntegrationApi({
     "defaultColorScheme": "system",
+    Link,
     "preloadFonts": [
         //"Marianne-Light",
         //"Marianne-Light_Italic",
@@ -54,7 +52,7 @@ function App({ Component, pageProps }: AppProps) {
     const router = useRouter()
 
     return (
-        <DsfrLinkProvider>
+        <>
             <Header
                 brandTop={brandTop}
                 serviceTitle="Nom du site / service"
@@ -100,7 +98,7 @@ function App({ Component, pageProps }: AppProps) {
                 bottomItems={[headerFooterDisplayItem]}
             />
             <Display />
-        </DsfrLinkProvider>
+        </>
     );
 }
 
diff --git a/test/integration/vite/src/main.tsx b/test/integration/vite/src/main.tsx
@@ -2,28 +2,24 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { Home } from "./Home";
 import { Mui } from "./Mui";
-import { startReactDsfr, createDsfrLinkProvider, fr } from "@codegouvfr/react-dsfr";
+import { startReactDsfr, fr } from "@codegouvfr/react-dsfr";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { BrowserRouter } from "react-router-dom";
 import { Routes, Route, Link, useLocation } from "react-router-dom";
 import { Display, headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
-startReactDsfr({ "defaultColorScheme": "system" });
+startReactDsfr({ "defaultColorScheme": "system", Link });
 
 declare module "@codegouvfr/react-dsfr" {
-    interface RegisterLink { 
+    interface RegisterLink {
         Link: typeof Link;
     }
 }
 
-const { DsfrLinkProvider } = createDsfrLinkProvider({ Link });
-
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>
-        <DsfrLinkProvider>
-            <BrowserRouter>
-                <Root />
-            </BrowserRouter>
-        </DsfrLinkProvider>
+        <BrowserRouter>
+            <Root />
+        </BrowserRouter>
     </React.StrictMode>
 );
 
@@ -32,7 +28,7 @@ function Root() {
     const location = useLocation();
 
     return (
-        <DsfrLinkProvider>
+        <>
             <Header
                 brandTop={<>INTITULE<br />OFFICIEL</>}
                 serviceTitle="Nom du site / service"
@@ -67,7 +63,7 @@ function Root() {
                 </Routes>
             </div>
             <Display />
-        </DsfrLinkProvider>
+        </>
 
     );
 
