Better breakpoints API

Author: garronej

scripts/build/cssToTs/breakpoints.ts

@@ -149,15 +149,15 @@ export function generateBreakpointsTsCode(rawCssCode: string): string {
         `import { assert } from "tsafe/assert";`,
         `import type { Extends } from "tsafe";`,
         ``,
-        `export const BreakpointsValuesUnit = "em";`,
+        `export const breakpointsValuesUnit = "em";`,
         ``,
         `export const breakpointKeys = ["xs", ${sortedKeys
             .map(key => `"${key}"`)
             .join(", ")}] as const;`,
         ``,
         `export type BreakpointKeys = typeof breakpointKeys[number];`,
         ``,
-        `export const BreakpointsValues = {`,
+        `export const breakpointsValues = {`,
         JSON.stringify(
             Object.fromEntries(
                 (["xs", ...sortedKeys] as const).map(key => [
@@ -176,7 +176,7 @@ export function generateBreakpointsTsCode(rawCssCode: string): string {
             .join("\n"),
         `} as const;`,
         ``,
-        `assert<Extends<typeof BreakpointsValues, Record<BreakpointKeys, number>>>();`,
+        `assert<Extends<typeof breakpointsValues, Record<BreakpointKeys, number>>>();`,
         ``
     ].join("\n");
 }

src/fr/breakpoints.ts

@@ -1,7 +1,7 @@
 import type { BreakpointKeys } from "./generatedFromCss/breakpoints";
 import {
-    BreakpointsValues as values,
-    BreakpointsValuesUnit as unit,
+    breakpointsValues as values,
+    breakpointsValuesUnit as unit,
     breakpointKeys as keys
 } from "./generatedFromCss/breakpoints";
 import { type Equals, assert } from "tsafe/assert";
@@ -43,21 +43,51 @@ export const breakpoints = {
             .between(key, keys[keys.indexOf(key) + 1])
             .replace("@media", "@media not all and");
     },
+    "values": (() => {
+        const out = {
+            ...(() => {
+                const key = "sm" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })(),
+            ...(() => {
+                const key = "md" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })(),
+            ...(() => {
+                const key = "lg" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })(),
+            ...(() => {
+                const key = "xl" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })()
+        };
+
+        assert<Equals<keyof typeof out | "xs", BreakpointKeys>>();
+
+        return out;
+    })(),
     /**
      * Returns the breakpoint values in px.
      *
      * Warning: It reflects the values at a given time, if the root font size changes so will the breakpointsValues.
      * Plus this function is rather expensive to call.
      * If you're in react you should use the
-     * import { useBreakpointsValues } from "@codegouvfr/react-dsfr/useBreakpointsValues";
+     * import { useBreakpointsValuesPx } from "@codegouvfr/react-dsfr/useBreakpointsValuesPx";
      */
-    "getBreakpointsValues": (): BreakpointsValues => {
+    "getPxValues": (): BreakpointsValues => {
         assert<Equals<typeof unit, "em">>();
 
         const factor = getBaseFontSizePx();
 
         return Object.fromEntries(
             Object.entries(values).map(([key, value]) => [key, value * factor])
         ) as any;
-    }
+    },
+    /** @deprecated use breakpoints.values if you're ok with getting the value in em or breakpoints.getPxValues() if you want the value in pixel */
+    "getBreakpointsValues": () => breakpoints.getPxValues()
 };

src/useBreakpointsValues.ts

@@ -4,8 +4,7 @@ import { breakpoints, type BreakpointKeys, type BreakpointsValues } from "./fr/b
 
 export type { BreakpointKeys, BreakpointsValues };
 
-/** Return the breakpoint values in px, the values ger refreshed
- *  when the base font size change.  */
+/** @deprecated Use import { useBreakpointsValuesPx } from "@codegouvfr/react-dsfr/useBreakpointsValuesPx"; instead */
 export function useBreakpointsValues() {
     const [breakpointsValuesDependency, triggerRefresh] = useReducer(() => ({}), {});
 

src/useBreakpointsValuesPx.ts

@@ -0,0 +1,49 @@
+import { useReducer, useEffect, useMemo } from "react";
+import { assert } from "tsafe/assert";
+import { breakpoints, type BreakpointKeys, type BreakpointsValues } from "./fr/breakpoints";
+
+export type { BreakpointKeys, BreakpointsValues };
+
+/** Return the breakpoint values in px, the values ger refreshed
+ *  when the base font size change.  */
+export function useBreakpointsValuesPx() {
+    const [breakpointsValuesDependency, triggerRefresh] = useReducer(() => ({}), {});
+
+    useEffect(() => {
+        const htmlElement = document.querySelector("html");
+
+        assert(htmlElement !== null);
+
+        // Create a new MutationObserver to detect changes in the base font size
+        const observer = new MutationObserver(mutationsList => {
+            if (
+                mutationsList.find(
+                    mutation =>
+                        mutation.target === htmlElement &&
+                        mutation.attributeName === "style" &&
+                        (mutation.oldValue ?? "").indexOf("font-size") !== -1
+                ) !== undefined
+            ) {
+                triggerRefresh();
+            }
+        });
+
+        // Observe changes to the style attribute of the html element
+        observer.observe(htmlElement, {
+            "attributes": true,
+            "attributeOldValue": true,
+            "attributeFilter": ["style"]
+        });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
+    const breakpointsValues = useMemo(
+        () => breakpoints.getPxValues(),
+        [breakpointsValuesDependency]
+    );
+
+    return { breakpointsValues };
+}

test/runtime/scripts/breakpoints/generateBreakpointsTsCode.test.ts

@@ -45,21 +45,21 @@ it("Generation of TS code for breakpoints", () => {
 import { assert } from "tsafe/assert";
 import type { Extends } from "tsafe";
 
-export const BreakpointsValuesUnit = "em";
+export const breakpointsValuesUnit = "em";
 
 export const breakpointKeys = ["xs", "sm", "md", "lg", "xl"] as const;
 
 export type BreakpointKeys = typeof breakpointKeys[number];
 
-export const BreakpointsValues = {
+export const breakpointsValues = {
     "xs": 0,
     "sm": 36,
     "md": 48,
     "lg": 62,
     "xl": 78
 } as const;
 
-assert<Extends<typeof BreakpointsValues, Record<BreakpointKeys, number>>>();
+assert<Extends<typeof breakpointsValues, Record<BreakpointKeys, number>>>();
 `.replace(/^\n/, "");
 
     const got = generateBreakpointsTsCode(input);