chore: review

Author: lsagetlethias

src/next-appdir/DsfrHead.tsx

@@ -14,6 +14,7 @@ import { setLink, type RegisteredLinkProps } from "../link";
 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.
@@ -25,7 +26,7 @@ export type DsfrHeadProps = {
     /**
      * When set, the value will be used as the nonce attribute of subsequent script tags.
      *
-     * Don't forget to add `checkNonce: true` in {@link startReactDsfr} options.
+     * Don't forget to add `doCheckNonce: true` in {@link startReactDsfr} options.
      *
      * @see https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/nonce
      */
@@ -36,6 +37,7 @@ export type DsfrHeadProps = {
      * Don't forget to add `trustedTypesPolicyName` in {@link startReactDsfr} options.
      *
      * @see https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
+     * @see {@link DEFAULT_TRUSTED_TYPES_POLICY_NAME}
      * @default "react-dsfr"
      */
     trustedTypesPolicyName?: string;
@@ -44,7 +46,12 @@ export type DsfrHeadProps = {
 const isProduction = process.env.NODE_ENV !== "development";
 
 export function DsfrHead(props: DsfrHeadProps) {
-    const { preloadFonts = [], Link, nonce, trustedTypesPolicyName } = props;
+    const {
+        preloadFonts = [],
+        Link,
+        nonce,
+        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
+    } = props;
 
     const defaultColorScheme = getDefaultColorSchemeServerSide();
 

src/next-appdir/zz_internal/start.ts

@@ -6,6 +6,7 @@ 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,7 +22,7 @@ export function startReactDsfr(params: {
      *
      * @see https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/nonce
      */
-    checkNonce?: boolean;
+    doCheckNonce?: boolean;
     /**
      * Enable Trusted Types with a custom policy name.
      *
@@ -38,6 +39,7 @@ export function startReactDsfr(params: {
      * ```
      *
      * @see https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
+     * @see {@link DEFAULT_TRUSTED_TYPES_POLICY_NAME}
      * @default "react-dsfr"
      */
     trustedTypesPolicyName?: string;
@@ -46,8 +48,8 @@ export function startReactDsfr(params: {
         defaultColorScheme,
         verbose = false,
         Link,
-        checkNonce,
-        trustedTypesPolicyName
+        doCheckNonce = false,
+        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
     } = params;
 
     setDefaultColorSchemeClientSide({ defaultColorScheme });
@@ -70,7 +72,7 @@ export function startReactDsfr(params: {
                     }
                 }
             },
-            checkNonce,
+            doCheckNonce,
             trustedTypesPolicyName
         });
     }

src/spa.ts

@@ -4,6 +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";
 
 export type { RegisterLink, RegisteredLinkProps };
 
@@ -35,6 +36,7 @@ export function startReactDsfr(params: {
      * ```
      *
      * @see https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
+     * @see {@link DEFAULT_TRUSTED_TYPES_POLICY_NAME}
      * @default "react-dsfr"
      */
     trustedTypesPolicyName?: string;
@@ -45,7 +47,7 @@ export function startReactDsfr(params: {
         Link,
         useLang,
         nonce,
-        trustedTypesPolicyName
+        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
     } = params;
 
     if (Link !== undefined) {
@@ -56,16 +58,16 @@ export function startReactDsfr(params: {
         setUseLang({ useLang });
     }
 
-    const checkNonce = !!nonce;
-    if (checkNonce) {
+    const doCheckNonce = !!nonce; // handle undefined and empty string
+    if (doCheckNonce) {
         window.ssrNonce = nonce;
     }
 
     start({
         defaultColorScheme,
         verbose,
         "nextParams": undefined,
-        checkNonce,
+        doCheckNonce,
         trustedTypesPolicyName
     });
 }

src/start.ts

@@ -3,6 +3,7 @@ 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";
@@ -13,14 +14,20 @@ type Params = {
               registerEffectAction: (effect: () => void) => void;
           }
         | undefined;
-    checkNonce?: boolean;
+    doCheckNonce?: boolean;
     trustedTypesPolicyName?: string;
 };
 
 let isStarted = false;
 
 export async function start(params: Params) {
-    const { defaultColorScheme, verbose, nextParams, checkNonce, trustedTypesPolicyName } = params;
+    const {
+        defaultColorScheme,
+        verbose,
+        nextParams,
+        doCheckNonce = false,
+        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
+    } = params;
 
     assert(isBrowser);
 
@@ -38,7 +45,7 @@ export async function start(params: Params) {
         "doPersistDarkModePreferenceWithCookie":
             nextParams === undefined ? false : nextParams.doPersistDarkModePreferenceWithCookie,
         registerEffectAction,
-        checkNonce,
+        doCheckNonce,
         trustedTypesPolicyName
     });
 

src/tools/trustedTypesPolicy/config.ts

@@ -0,0 +1 @@
+export const DEFAULT_TRUSTED_TYPES_POLICY_NAME = "react-dsfr";

src/useIsDark/client.ts

@@ -3,6 +3,7 @@ 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";
 
@@ -98,15 +99,15 @@ export function startClientSideIsDarkLogic(params: {
     registerEffectAction: (action: () => void) => void;
     doPersistDarkModePreferenceWithCookie: boolean;
     colorSchemeExplicitlyProvidedAsParameter: ColorScheme | "system";
-    checkNonce?: boolean;
+    doCheckNonce?: boolean;
     trustedTypesPolicyName?: string;
 }) {
     const {
         doPersistDarkModePreferenceWithCookie,
         registerEffectAction,
         colorSchemeExplicitlyProvidedAsParameter,
-        checkNonce,
-        trustedTypesPolicyName = "react-dsfr"
+        doCheckNonce = false,
+        trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
     } = params;
 
     const { clientSideIsDark, ssrWasPerformedWithIsDark: ssrWasPerformedWithIsDark_ } = ((): {
@@ -234,7 +235,7 @@ export function startClientSideIsDarkLogic(params: {
     {
         const setRootColorScheme = (isDark: boolean) => {
             const nonce = window.ssrNonce;
-            if (checkNonce && !nonce) {
+            if (doCheckNonce && !nonce) {
                 return;
             }
             document.getElementById(rootColorSchemeStyleTagId)?.remove();

src/useIsDark/scriptToRunAsap.ts

@@ -1,6 +1,7 @@
 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";
@@ -19,7 +20,7 @@ declare global {
 export const getScriptToRunAsap: GetScriptToRunAsap = ({
     defaultColorScheme,
     nonce,
-    trustedTypesPolicyName = "react-dsfr"
+    trustedTypesPolicyName = DEFAULT_TRUSTED_TYPES_POLICY_NAME
 }) => `
 {
 

test/integration/next-appdir/app/StartDsfr.tsx

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