Featre SSR colorScheme based on cookie

Author: garronej

src/lib/colorScheme.ts

@@ -30,8 +30,10 @@ const useColorSchemeServerSide: UseColorScheme = () => {
         /* nothing */
     });
 
+    console.log("(server) useColorSchemeServerSide: ", $colorScheme.current);
+
     return {
-        "colorScheme": "light",
+        "colorScheme": $colorScheme.current,
         setColorScheme
     };
 };
@@ -66,6 +68,27 @@ export function startObservingColorSchemeHtmlAttribute() {
         "attributeFilter": [data_fr_theme]
     });
 
+    {
+        const setColorSchemeCookie = (colorScheme: ColorScheme) => {
+            let newCookie = `${data_fr_theme}=${colorScheme};path=/;max-age=31536000`;
+
+            //We do not set the domain if we are on localhost or an ip
+            if (window.location.hostname.match(/\.[a-zA-Z]{2,}$/)) {
+                newCookie += `;domain=${
+                    window.location.hostname.split(".").length >= 3
+                        ? window.location.hostname.replace(/^[^.]+\./, "")
+                        : window.location.hostname
+                }`;
+            }
+
+            document.cookie = newCookie;
+        };
+
+        setColorSchemeCookie($colorScheme.current);
+
+        $colorScheme.subscribe(setColorSchemeCookie);
+    }
+
     //TODO:    <meta name="theme-color" content="#000091"><!-- Défini la couleur de thème du navigateur (Safari/Android) -->
 
     //TODO: Remove once https://github.com/GouvernementFR/dsfr/issues/407 is dealt with

src/lib/nextJs.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import Head from "next/head";
 import type { NextComponentType } from "next";
-import type { AppProps } from "next/app";
+import DefaultApp from "next/app";
+import type { AppProps, AppContext } from "next/app";
 import { startDsfrReact } from "./start";
 import type { Params as startDsfrReactParams } from "./start";
 import { isBrowser } from "./tools/isBrowser";
@@ -20,6 +21,11 @@ import appleTouchIcon from "../dsfr/favicon/apple-touch-icon.png";
 import faviconSvg from "../dsfr/favicon/favicon.svg";
 import faviconIco from "../dsfr/favicon/favicon.ico";
 import faviconWebmanifestUrl from "../dsfr/favicon/manifest.webmanifest";
+import type { DocumentContext, DocumentProps } from "next/document";
+import { data_fr_scheme, data_fr_theme, $colorScheme } from "./colorScheme";
+import type { ColorScheme } from "./colorScheme";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
 
 const fontUrlByFileBasename = {
     "Marianne-Light": marianneLightWoff2Url,
@@ -41,7 +47,7 @@ export type Params = startDsfrReactParams & {
     preloadFonts?: (keyof typeof fontUrlByFileBasename)[];
 };
 
-export function withDsfr<AppComponent extends NextComponentType<any, any, any>>(
+export function withAppDsfr<AppComponent extends NextComponentType<any, any, any>>(
     App: AppComponent,
     params: Params
 ): AppComponent {
@@ -85,7 +91,90 @@ export function withDsfr<AppComponent extends NextComponentType<any, any, any>>(
         staticMethod => ((AppWithDsfr as any)[staticMethod] = (App as any)[staticMethod])
     );
 
+    AppWithDsfr.getInitialProps = async (appContext: AppContext) => {
+        console.log("here here here");
+
+        if (!isBrowser) {
+            /*
+            $colorScheme.current = (() => {
+
+                const cookie = appContext.ctx.req?.headers.cookie
+
+                return cookie === undefined ? undefined : readColorSchemeInCookie(cookie);
+
+            })() ?? "light";
+            */
+
+            const colorScheme = (() => {
+                const cookie = appContext.ctx.req?.headers.cookie;
+
+                return cookie === undefined ? undefined : readColorSchemeInCookie(cookie);
+            })();
+
+            console.log(
+                "(server) App.getInitialProps, we read the colorScheme from cookie: ",
+                colorScheme
+            );
+
+            $colorScheme.current = colorScheme ?? "light";
+        }
+
+        return { ...(await (App.getInitialProps ?? DefaultApp.getInitialProps)(appContext)) };
+    };
+
     AppWithDsfr.displayName = AppWithDsfr.name;
 
     return AppWithDsfr as any;
 }
+
+export function getDocumentDsfrInitialProps(ctx: DocumentContext) {
+    const colorScheme: ColorScheme | undefined = (() => {
+        const cookie = ctx.req?.headers.cookie;
+
+        return cookie === undefined ? undefined : readColorSchemeInCookie(cookie);
+    })();
+
+    return { colorScheme };
+}
+
+export function getDsfrHtmlAttributes(props: DocumentProps) {
+    assert(is<ReturnType<typeof getDocumentDsfrInitialProps>>(props));
+
+    const { colorScheme } = props;
+
+    if (colorScheme === undefined) {
+        return {};
+    }
+
+    $colorScheme.current = colorScheme;
+
+    return {
+        [data_fr_scheme]: colorScheme,
+        [data_fr_theme]: colorScheme
+    };
+}
+
+function readColorSchemeInCookie(cookie: string) {
+    const parsedCookies = Object.fromEntries(
+        cookie
+            .split(/; */)
+            .map(line => line.split("="))
+            .map(([key, value]) => [key, decodeURIComponent(value)])
+    );
+
+    if (!(data_fr_theme in parsedCookies)) {
+        return undefined;
+    }
+
+    const colorScheme = parsedCookies[data_fr_theme];
+
+    return (() => {
+        switch (colorScheme) {
+            case "light":
+            case "dark":
+                return colorScheme;
+            default:
+                return undefined;
+        }
+    })();
+}

src/lib/start.ts

@@ -31,17 +31,13 @@ export async function startDsfrReact(params: Params) {
 
     isStarted = true;
 
-    const global: any = window;
+    //NOTE: It's non null if we are in a SSR setup
+    if (document.documentElement.getAttribute(data_fr_theme) === null) {
+        console.log("(client) Start: There was NO HTML tag");
 
-    document.documentElement.setAttribute(data_fr_scheme, defaultColorScheme);
+        //NOTE: SPA or SSG
 
-    const isNextJsDevMode = global.__NEXT_DATA__?.buildId === "development";
-
-    hack_html_attribute_supposed_to_be_set_by_js: {
-        if (isNextJsDevMode) {
-            // NOTE: Or else we get an hydration error.
-            break hack_html_attribute_supposed_to_be_set_by_js;
-        }
+        document.documentElement.setAttribute(data_fr_scheme, defaultColorScheme);
 
         document.documentElement.setAttribute(
             data_fr_theme,
@@ -67,24 +63,22 @@ export async function startDsfrReact(params: Params) {
                     : "light";
             })()
         );
+    } else {
+        console.log("(client) Start:  Html tags are present");
     }
 
     startObservingColorSchemeHtmlAttribute();
 
-    global.dsfr = { verbose, "mode": "manual" };
+    (window as any).dsfr = { verbose, "mode": "manual" };
 
     await import("@gouvfr/dsfr/dist/dsfr.module");
 
-    if (isNextJsDevMode) {
-        console.log(
-            [
-                "Artificial delay to avoid the",
-                "'Hydration failed because the initial UI does not match what was rendered on the server.'",
-                "Error. In production mode the white flash wont be that long."
-            ].join(" ")
-        );
+    if ((window as any).__NEXT_DATA__?.buildId === "development") {
+        // NOTE: @gouvfr/dsfr/dist/dsfr.module.js is not isomorphic, it can't run on the Server.",
+        // We set an artificial delay before starting the module otherwise to avoid getting",
+        // Hydration error from Next.js
         await new Promise(resolve => setTimeout(resolve, 150));
     }
 
-    global.dsfr.start();
+    (window as any).dsfr.start();
 }

src/test/frameworks/next/pages/_app.tsx

@@ -1,10 +1,9 @@
 import DefaultApp from "next/app";
 import "dsfr-react/dsfr/dsfr.css";
-import { withDsfr } from "dsfr-react/lib/nextJs";
-
+import { withAppDsfr } from "dsfr-react/lib/nextJs";
 
 //export default withDsfr(DefaultApp);
-export default withDsfr(DefaultApp, {
+export default withAppDsfr(DefaultApp, {
 	"defaultColorScheme": "system",
 	"preloadFonts": [
 		//"Marianne-Light",

src/test/frameworks/next/pages/_document.tsx

@@ -0,0 +1,30 @@
+import DefaultDocument, { Html, Head, Main, NextScript } from 'next/document'
+import type { DocumentContext } from "next/document";
+import { getDocumentDsfrInitialProps, getDsfrHtmlAttributes } from "dsfr-react/lib/nextJs";
+
+export default class Document extends DefaultDocument {
+	static async getInitialProps(ctx: DocumentContext) {
+
+		const initialProps = await DefaultDocument.getInitialProps(ctx);
+
+		const dsfrInitialProps = getDocumentDsfrInitialProps(ctx);
+
+		console.log("(server) Document.getInitialProps we read colorScheme from cookie: ", dsfrInitialProps);
+
+		return { ...initialProps, ...dsfrInitialProps };
+
+	}
+
+	render() {
+		return (
+			<Html {...getDsfrHtmlAttributes(this.props)}>
+				<Head />
+				<body>
+					<Main />
+					<NextScript />
+				</body>
+			</Html>
+		);
+	}
+
+}

src/test/frameworks/next/pages/index.tsx

@@ -10,10 +10,10 @@ export default function Index() {
 
     return (
         <>
-        <h1>Color Scheme: {colorScheme}</h1>
-        <button onClick={()=> setColorScheme("dark")}>Set color scheme to dark</button>
-        <button onClick={()=> setColorScheme("light")}>Set color scheme to light</button>
-        <button onClick={()=> setColorScheme("system")}>Set color scheme to system</button>
+            <h1>Color Scheme: {colorScheme}</h1>
+            <button onClick={() => setColorScheme("dark")}>Set color scheme to dark</button>
+            <button onClick={() => setColorScheme("light")}>Set color scheme to light</button>
+            <button onClick={() => setColorScheme("system")}>Set color scheme to system</button>
             <header role="banner" className="fr-header">
                 <div className="fr-header__body">
                     <div className="fr-container">