Fix propagation of defaults and undefined not evalued as empty string

Author: garronej

.nvmrc

@@ -8,13 +8,13 @@ import { getScriptToRunAsap } from "../useIsDark/scriptToRunAsap";
 import { fontUrlByFileBasename } from "./zz_internal/fontUrlByFileBasename";
 import { getDefaultColorSchemeServerSide } from "./zz_internal/defaultColorScheme";
 import { setLink, type RegisteredLinkProps } from "../link";
+import { assert } from "tsafe/assert";
 //NOTE: As of now there is no way to enforce ordering in Next Appdir
 //See: https://github.com/vercel/next.js/issues/16630
 // @import url(...) doesn't work. Using Sass and @use is our last resort.
 import "../assets/dsfr_plus_icons.scss";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in doc
 import { type startReactDsfr } from "./zz_internal/start";
-import { DEFAULT_TRUSTED_TYPES_POLICY_NAME } from "../tools/trustedTypesPolicy/config";
 
 export type DsfrHeadProps = {
     /** If not provided no fonts are preloaded.
@@ -46,12 +46,9 @@ export type DsfrHeadProps = {
 const isProduction = process.env.NODE_ENV !== "development";
 
 export function DsfrHead(props: DsfrHeadProps) {
-    const {
-        preloadFonts = [],
-        Link,
-        nonce,
-        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
-    } = props;
+    const { preloadFonts = [], Link, nonce, trustedTypesPolicyName = "react-dsfr" } = props;
+
+    assert(nonce !== "", "nonce cannot be an empty string");
 
     const defaultColorScheme = getDefaultColorSchemeServerSide();
 
@@ -90,14 +87,16 @@ export function DsfrHead(props: DsfrHeadProps) {
                     })
                 }}
             />
-            <script
-                suppressHydrationWarning
-                key="nonce-setter"
-                nonce={nonce}
-                dangerouslySetInnerHTML={{
-                    __html: `window.ssrNonce = "${nonce}";`
-                }}
-            />
+            {nonce !== undefined && (
+                <script
+                    suppressHydrationWarning
+                    key="nonce-setter"
+                    nonce={nonce}
+                    dangerouslySetInnerHTML={{
+                        __html: `window.ssrNonce = "${nonce}";`
+                    }}
+                />
+            )}
         </>
     );
 }

src/next-appdir/DsfrHead.tsx

@@ -6,7 +6,6 @@ import { type DefaultColorScheme, setDefaultColorSchemeClientSide } from "./defa
 import { isBrowser } from "../../tools/isBrowser";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in doc
 import { type DsfrHead } from "../DsfrHead";
-import { DEFAULT_TRUSTED_TYPES_POLICY_NAME } from "../../tools/trustedTypesPolicy/config";
 
 let isAfterFirstEffect = false;
 const actions: (() => void)[] = [];
@@ -21,6 +20,7 @@ export function startReactDsfr(params: {
      * When true, the nonce of the script tag will be checked, fetched from {@link DsfrHead} component and injected in react-dsfr scripts.
      *
      * @see https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/nonce
+     * @default false
      */
     doCheckNonce?: boolean;
     /**
@@ -49,7 +49,7 @@ export function startReactDsfr(params: {
         verbose = false,
         Link,
         doCheckNonce = false,
-        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
+        trustedTypesPolicyName = "react-dsfr"
     } = params;
 
     setDefaultColorSchemeClientSide({ defaultColorScheme });
@@ -62,6 +62,8 @@ export function startReactDsfr(params: {
         start({
             defaultColorScheme,
             verbose,
+            doCheckNonce,
+            trustedTypesPolicyName,
             "nextParams": {
                 "doPersistDarkModePreferenceWithCookie": false,
                 "registerEffectAction": action => {
@@ -71,9 +73,7 @@ export function startReactDsfr(params: {
                         actions.push(action);
                     }
                 }
-            },
-            doCheckNonce,
-            trustedTypesPolicyName
+            }
         });
     }
 }

src/next-appdir/zz_internal/start.ts

@@ -106,7 +106,7 @@ export function createNextDsfrIntegrationApi(
         preloadFonts = [],
         doPersistDarkModePreferenceWithCookie = false,
         useLang,
-        trustedTypesPolicyName
+        trustedTypesPolicyName = "react-dsfr"
     } = params;
 
     let isAfterFirstEffect = false;
@@ -124,6 +124,8 @@ export function createNextDsfrIntegrationApi(
         start({
             defaultColorScheme,
             verbose,
+            "doCheckNonce": false,
+            trustedTypesPolicyName,
             "nextParams": {
                 doPersistDarkModePreferenceWithCookie,
                 "registerEffectAction": action => {
@@ -200,7 +202,8 @@ export function createNextDsfrIntegrationApi(
                                 dangerouslySetInnerHTML={{
                                     "__html": getScriptToRunAsap({
                                         defaultColorScheme,
-                                        trustedTypesPolicyName
+                                        trustedTypesPolicyName,
+                                        "nonce": undefined
                                     })
                                 }}
                             />

src/next-pagesdir.tsx

@@ -4,7 +4,7 @@ import type { RegisterLink, RegisteredLinkProps } from "./link";
 import { setLink } from "./link";
 import { setUseLang } from "./i18n";
 import type { ColorScheme } from "./useIsDark";
-import { DEFAULT_TRUSTED_TYPES_POLICY_NAME } from "./tools/trustedTypesPolicy/config";
+import { assert } from "tsafe/assert";
 
 export type { RegisterLink, RegisteredLinkProps };
 
@@ -47,7 +47,7 @@ export function startReactDsfr(params: {
         Link,
         useLang,
         nonce,
-        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
+        trustedTypesPolicyName = "react-dsfr"
     } = params;
 
     if (Link !== undefined) {
@@ -58,17 +58,19 @@ export function startReactDsfr(params: {
         setUseLang({ useLang });
     }
 
-    const doCheckNonce = !!nonce; // handle undefined and empty string
+    assert(nonce !== "", "nonce cannot be an empty string");
+
+    const doCheckNonce = nonce !== undefined;
     if (doCheckNonce) {
         window.ssrNonce = nonce;
     }
 
     start({
         defaultColorScheme,
         verbose,
-        "nextParams": undefined,
         doCheckNonce,
-        trustedTypesPolicyName
+        trustedTypesPolicyName,
+        "nextParams": undefined
     });
 }
 

src/spa.ts

@@ -3,7 +3,6 @@ import { assert } from "tsafe/assert";
 import type { ColorScheme } from "./useIsDark";
 import { startClientSideIsDarkLogic } from "./useIsDark/client";
 import { Deferred } from "./tools/Deferred";
-import { DEFAULT_TRUSTED_TYPES_POLICY_NAME } from "./tools/trustedTypesPolicy/config";
 
 type Params = {
     defaultColorScheme: ColorScheme | "system";
@@ -14,20 +13,15 @@ type Params = {
               registerEffectAction: (effect: () => void) => void;
           }
         | undefined;
-    doCheckNonce?: boolean;
-    trustedTypesPolicyName?: string;
+    doCheckNonce: boolean;
+    trustedTypesPolicyName: string;
 };
 
 let isStarted = false;
 
 export async function start(params: Params) {
-    const {
-        defaultColorScheme,
-        verbose,
-        nextParams,
-        doCheckNonce = false,
-        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
-    } = params;
+    const { defaultColorScheme, verbose, nextParams, doCheckNonce, trustedTypesPolicyName } =
+        params;
 
     assert(isBrowser);
 

src/start.ts

@@ -3,7 +3,6 @@ import { createStatefulObservable, useRerenderOnChange } from "../tools/Stateful
 import { useConstCallback } from "../tools/powerhooks/useConstCallback";
 import { fr } from "../fr";
 import { data_fr_scheme, data_fr_theme, rootColorSchemeStyleTagId } from "./constants";
-import { DEFAULT_TRUSTED_TYPES_POLICY_NAME } from "../tools/trustedTypesPolicy/config";
 
 export type ColorScheme = "light" | "dark";
 
@@ -99,15 +98,15 @@ export function startClientSideIsDarkLogic(params: {
     registerEffectAction: (action: () => void) => void;
     doPersistDarkModePreferenceWithCookie: boolean;
     colorSchemeExplicitlyProvidedAsParameter: ColorScheme | "system";
-    doCheckNonce?: boolean;
-    trustedTypesPolicyName?: string;
+    doCheckNonce: boolean;
+    trustedTypesPolicyName: string;
 }) {
     const {
         doPersistDarkModePreferenceWithCookie,
         registerEffectAction,
         colorSchemeExplicitlyProvidedAsParameter,
         doCheckNonce = false,
-        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
+        trustedTypesPolicyName
     } = params;
 
     const { clientSideIsDark, ssrWasPerformedWithIsDark: ssrWasPerformedWithIsDark_ } = ((): {

src/tools/trustedTypesPolicy/config.ts

@@ -1,12 +1,11 @@
 import type { ColorScheme } from "./client";
 import { data_fr_scheme, data_fr_theme, rootColorSchemeStyleTagId } from "./constants";
 import { fr } from "../fr";
-import { DEFAULT_TRUSTED_TYPES_POLICY_NAME } from "../tools/trustedTypesPolicy/config";
 
 type GetScriptToRunAsap = (props: {
     defaultColorScheme: ColorScheme | "system";
-    nonce?: string;
-    trustedTypesPolicyName?: string;
+    nonce: string | undefined;
+    trustedTypesPolicyName: string;
 }) => string;
 
 declare global {
@@ -19,8 +18,8 @@ declare global {
 // TODO enhance to use DOMPurify with trustedTypes
 export const getScriptToRunAsap: GetScriptToRunAsap = ({
     defaultColorScheme,
-    nonce,
-    trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
+    nonce = "",
+    trustedTypesPolicyName
 }) => `
 {
 

src/useIsDark/client.ts

@@ -14,7 +14,7 @@ declare module "@codegouvfr/react-dsfr/next-appdir" {
 startReactDsfr({ 
 	defaultColorScheme, 
 	Link,
-    doCheckNonce: true
+    "doCheckNonce": true
 });
 
 export function StartDsfr(){