Next 15 support #395 #305

Author: garronej

src/next-appdir/DsfrProvider.tsx

@@ -5,16 +5,20 @@ import type { ReactNode } from "react";
 import { isBrowser } from "../tools/isBrowser";
 import { SsrIsDarkProvider } from "../useIsDark/server";
 import { dsfrEffect } from "./zz_internal/start";
-import { getDefaultColorSchemeClientSide } from "./zz_internal/defaultColorScheme";
+import type { DefaultColorScheme } from "./zz_internal/defaultColorScheme";
 import { setUseLang } from "../i18n";
+import { setLink } from "../link";
 
 export type DsfrProviderProps = {
     children: ReactNode;
     lang?: string;
+    /** Default: <a /> */
+    Link?: Function;
+    defaultColorScheme: DefaultColorScheme;
 };
 
 export function DsfrProvider(props: DsfrProviderProps) {
-    const { children, lang } = props;
+    const { children, lang, Link, defaultColorScheme } = props;
 
     useEffect(() => {
         dsfrEffect();
@@ -28,12 +32,16 @@ export function DsfrProvider(props: DsfrProviderProps) {
         setUseLang({ "useLang": () => lang });
     }, [lang]);
 
+    useMemo(() => {
+        if (Link !== undefined) {
+            setLink({ "Link": Link as any });
+        }
+    }, [Link]);
+
     if (isBrowser) {
         return <>{children}</>;
     }
 
-    const defaultColorScheme = getDefaultColorSchemeClientSide();
-
     const isDark = defaultColorScheme === "dark" ? true : false;
 
     return <SsrIsDarkProvider value={isDark}>{children}</SsrIsDarkProvider>;

src/next-appdir/zz_internal/defaultColorScheme.ts

@@ -18,18 +18,3 @@ export function setDefaultColorSchemeServerSide(params: {
 
     defaultColorSchemeServerSide = defaultColorScheme;
 }
-
-let defaultColorSchemeClientSide: DefaultColorScheme | undefined = undefined;
-
-export function getDefaultColorSchemeClientSide(): DefaultColorScheme {
-    assert(defaultColorSchemeClientSide !== undefined);
-    return defaultColorSchemeClientSide;
-}
-
-export function setDefaultColorSchemeClientSide(params: {
-    defaultColorScheme: DefaultColorScheme;
-}): void {
-    const { defaultColorScheme } = params;
-
-    defaultColorSchemeClientSide = defaultColorScheme;
-}

src/next-appdir/zz_internal/start.ts

@@ -1,6 +1,5 @@
 import { start } from "../../start";
-import { setLink } from "../../link";
-import { type DefaultColorScheme, setDefaultColorSchemeClientSide } from "./defaultColorScheme";
+import type { DefaultColorScheme } from "./defaultColorScheme";
 import { isBrowser } from "../../tools/isBrowser";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in doc
 import { type DsfrHead } from "../DsfrHead";
@@ -12,8 +11,6 @@ export function startReactDsfr(params: {
     defaultColorScheme: DefaultColorScheme;
     /** Default: false */
     verbose?: boolean;
-    /** Default: <a /> */
-    Link?: Function;
     /**
      * When true, the nonce of the script tag will be checked, fetched from {@link DsfrHead} component and injected in react-dsfr scripts.
      *
@@ -42,38 +39,33 @@ export function startReactDsfr(params: {
      */
     trustedTypesPolicyName?: string;
 }) {
+    if (!isBrowser) {
+        return;
+    }
+
     const {
         defaultColorScheme,
         verbose = false,
-        Link,
         doCheckNonce = false,
         trustedTypesPolicyName = "react-dsfr"
     } = params;
 
-    setDefaultColorSchemeClientSide({ defaultColorScheme });
-
-    if (Link !== undefined) {
-        setLink({ "Link": Link as any });
-    }
-
-    if (isBrowser) {
-        start({
-            defaultColorScheme,
-            verbose,
-            doCheckNonce,
-            trustedTypesPolicyName,
-            "nextParams": {
-                "doPersistDarkModePreferenceWithCookie": false,
-                "registerEffectAction": action => {
-                    if (isAfterFirstEffect) {
-                        action();
-                    } else {
-                        actions.push(action);
-                    }
+    start({
+        defaultColorScheme,
+        verbose,
+        doCheckNonce,
+        trustedTypesPolicyName,
+        "nextParams": {
+            "doPersistDarkModePreferenceWithCookie": false,
+            "registerEffectAction": action => {
+                if (isAfterFirstEffect) {
+                    action();
+                } else {
+                    actions.push(action);
                 }
             }
-        });
-    }
+        }
+    });
 }
 
 export function dsfrEffect(): void {