Extract Eularian in a separate util

Author: garronej

src/eulerianAnalytics.ts

@@ -0,0 +1,92 @@
+import { prDsfrLoaded } from "./start";
+
+export type EulerianAnalyticsParams = {
+    domain: string;
+    /** default: false */
+    enableRating?: boolean;
+    page?: Partial<{
+        path: string; // path for page tracking
+        referrer: string; // referrer for virtual pages (not for real page, eulerian automatically collects document.referrer)
+        id: string; // unique page id (string)
+        title: string; // page title for virtual pages
+        name: string; // equivalent to title if not defined
+        author: string; // page author name
+        date: string; // page creation date
+        labels: string[];
+        tags: string[]; // no tags limit
+        template: string; // page template
+        group: string; // page group. if not defined, fallback to template value
+        segment: string; // site segment. if not defined, fallback to template value
+        subtemplate: string; // page subtemplate
+        theme: string; // page theme
+        subtheme: string; // page subtheme
+        related: string; // related page id
+        depth: number; // page depth
+        isError: boolean; // is this an error page (404, 500, 503...)
+        current: number; // In case of pagination, current page number
+        total: number; // In case of pagination, total pages number
+        filters: string; // array of filters that were applied on the page (strings)
+    }>;
+    site?: Partial<{
+        environment: "development" | "stage" | "production"; // by default development ['development', 'stage', 'production']
+        entity: string; // Entity responsible for website
+        language: string; // language of the website (ISO 639-1). default to html lang
+        target: string; // site target
+        type: string; // site type
+        region: string; // region of the website (ISO 3166-2:FR)
+        department: string; // department of the website (ISO 3166-2:FR)
+    }>;
+    user?: Partial<{
+        connect: {
+            uid: string; // user id - required when connected
+            email: string; // encoded user email - required when connected
+            isNew: boolean; // user just registered
+        };
+        profile: string; // user profile
+        language: string;
+        type: string;
+    }>;
+    search?: Partial<{
+        engine: string;
+        results: number;
+        terms: string;
+        category: string;
+        theme: string;
+        type: string;
+        method: string;
+    }>;
+    funnel?: Partial<{
+        id: string;
+        type: string;
+        name: string;
+        step: string; // step name
+        current: number; // step number
+        total: number; // total number of steps
+        objective: string; // form objective
+        error: string; // form's error type
+    }>;
+    cmp?: Partial<{
+        id: string;
+    }>;
+};
+
+export async function startEulerianAnalytics(params: EulerianAnalyticsParams) {
+    await prDsfrLoaded;
+
+    // @ts-expect-error
+    window.dsfr.analytics = params;
+
+    // @ts-expect-error
+    await import("./dsfr/analytics/analytics.module.min");
+
+    return {
+        // @ts-expect-error
+        "enable": () => {
+            window.dsfr.analytics.opt.enable();
+        },
+        // @ts-expect-error
+        "disable": () => {
+            window.dsfr.analytics.opt.disable();
+        }
+    };
+}

src/next-appdir/index.ts

@@ -1,4 +1,3 @@
 export type { RegisterLink } from "../link";
 export type { DefaultColorScheme } from "./zz_internal/defaultColorScheme";
 export { startReactDsfr } from "./zz_internal/start";
-export type { EulerianAnalytics } from "../start";

src/next-appdir/zz_internal/start.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { start, type EulerianAnalytics } from "../../start";
+import { start } from "../../start";
 import type { RegisteredLinkProps } from "../../link";
 import { setLink } from "../../link";
 import { type DefaultColorScheme, setDefaultColorSchemeClientSide } from "./defaultColorScheme";
@@ -14,9 +14,8 @@ export function startReactDsfr(params: {
     verbose?: boolean;
     /** Default: <a /> */
     Link?: (props: RegisteredLinkProps & { children: ReactNode }) => ReturnType<React.FC>;
-    eulerianAnalytics?: EulerianAnalytics;
 }) {
-    const { defaultColorScheme, verbose = false, Link, eulerianAnalytics } = params;
+    const { defaultColorScheme, verbose = false, Link } = params;
 
     setDefaultColorSchemeClientSide({ defaultColorScheme });
 
@@ -28,7 +27,6 @@ export function startReactDsfr(params: {
         start({
             defaultColorScheme,
             verbose,
-            eulerianAnalytics,
             "nextParams": {
                 "doPersistDarkModePreferenceWithCookie": false,
                 "registerEffectAction": action => {

src/next-pagesdir.tsx

@@ -16,15 +16,13 @@ import FaviconSvg from "./dsfr/favicon/favicon.svg";
 import FaviconIco from "./dsfr/favicon/favicon.ico";
 import { getAssetUrl } from "./tools/getAssetUrl";
 import { getColors } from "./fr/colors";
-import { start, type EulerianAnalytics } from "./start";
+import { start } from "./start";
 import type { RegisterLink, RegisteredLinkProps } from "./link";
 import { setLink } from "./link";
 import { setUseLang } from "./i18n";
 import { assert } from "tsafe/assert";
 import "./assets/dsfr_plus_icons.css";
 
-export type { EulerianAnalytics };
-
 const isProduction = process.env.NODE_ENV !== "development";
 
 export type { RegisterLink, RegisteredLinkProps };
@@ -43,7 +41,6 @@ export type CreateNextDsfrIntegrationApiParams = {
     doPersistDarkModePreferenceWithCookie?: boolean;
     /** Default: ()=> "fr" */
     useLang?: () => string;
-    eulerianAnalytics?: EulerianAnalytics;
 };
 
 function readIsDarkInCookie(cookie: string) {
@@ -91,8 +88,7 @@ export function createNextDsfrIntegrationApi(
         Link,
         preloadFonts = [],
         doPersistDarkModePreferenceWithCookie = false,
-        useLang,
-        eulerianAnalytics
+        useLang
     } = params;
 
     let isAfterFirstEffect = false;
@@ -110,7 +106,6 @@ export function createNextDsfrIntegrationApi(
         start({
             defaultColorScheme,
             verbose,
-            eulerianAnalytics,
             "nextParams": {
                 doPersistDarkModePreferenceWithCookie,
                 "registerEffectAction": action => {

src/spa.ts

@@ -1,12 +1,10 @@
 import type { ReactNode } from "react";
-import { start, type EulerianAnalytics } from "./start";
+import { start } from "./start";
 import type { RegisterLink, RegisteredLinkProps } from "./link";
 import { setLink } from "./link";
 import { setUseLang } from "./i18n";
 import type { ColorScheme } from "./useIsDark";
 
-export type { EulerianAnalytics };
-
 export type { RegisterLink, RegisteredLinkProps };
 
 export function startReactDsfr(params: {
@@ -17,9 +15,8 @@ export function startReactDsfr(params: {
     Link?: (props: RegisteredLinkProps & { children: ReactNode }) => ReturnType<React.FC>;
     /** Default: ()=> "fr" */
     useLang?: () => string;
-    eulerianAnalytics?: EulerianAnalytics;
 }) {
-    const { defaultColorScheme, verbose = false, Link, useLang, eulerianAnalytics } = params;
+    const { defaultColorScheme, verbose = false, Link, useLang } = params;
 
     if (Link !== undefined) {
         setLink({ Link });
@@ -32,7 +29,6 @@ export function startReactDsfr(params: {
     start({
         defaultColorScheme,
         verbose,
-        eulerianAnalytics,
         "nextParams": undefined
     });
 }

src/start.ts

@@ -2,11 +2,11 @@ import { isBrowser } from "./tools/isBrowser";
 import { assert } from "tsafe/assert";
 import type { ColorScheme } from "./useIsDark";
 import { startClientSideIsDarkLogic } from "./useIsDark/client";
+import { Deferred } from "./tools/Deferred";
 
 type Params = {
     defaultColorScheme: ColorScheme | "system";
     verbose: boolean;
-    eulerianAnalytics: EulerianAnalytics | undefined;
     nextParams:
         | {
               doPersistDarkModePreferenceWithCookie: boolean;
@@ -18,7 +18,7 @@ type Params = {
 let isStarted = false;
 
 export async function start(params: Params) {
-    const { defaultColorScheme, verbose, nextParams, eulerianAnalytics } = params;
+    const { defaultColorScheme, verbose, nextParams } = params;
 
     assert(isBrowser);
 
@@ -38,89 +38,23 @@ export async function start(params: Params) {
         registerEffectAction
     });
 
-    (window as any).dsfr = {
+    // @ts-expect-error
+    window.dsfr = {
         verbose,
-        "mode": "react",
-        "analytics": eulerianAnalytics
+        "mode": "react"
     };
 
-    await import("./dsfr/dsfr.module" as any);
+    // @ts-expect-error
+    await import("./dsfr/dsfr.module.min");
 
-    if (eulerianAnalytics !== undefined) {
-        await import("./dsfr/analytics/analytics.module.js" as any);
-    }
-
-    const { dsfr } = window as unknown as { dsfr: { start: () => void } };
+    dDsfrLoaded.resolve();
 
-    registerEffectAction(() => dsfr.start());
+    registerEffectAction(() => {
+        // @ts-expect-error
+        window.dsfr.start();
+    });
 }
 
-export type EulerianAnalytics = {
-    domain: string;
-    /** default: false */
-    enableRating?: boolean;
-    page?: Partial<{
-        path: string; // path for page tracking
-        referrer: string; // referrer for virtual pages (not for real page, eulerian automatically collects document.referrer)
-        id: string; // unique page id (string)
-        title: string; // page title for virtual pages
-        name: string; // equivalent to title if not defined
-        author: string; // page author name
-        date: string; // page creation date
-        labels: string[];
-        tags: string[]; // no tags limit
-        template: string; // page template
-        group: string; // page group. if not defined, fallback to template value
-        segment: string; // site segment. if not defined, fallback to template value
-        subtemplate: string; // page subtemplate
-        theme: string; // page theme
-        subtheme: string; // page subtheme
-        related: string; // related page id
-        depth: number; // page depth
-        isError: boolean; // is this an error page (404, 500, 503...)
-        current: number; // In case of pagination, current page number
-        total: number; // In case of pagination, total pages number
-        filters: string; // array of filters that were applied on the page (strings)
-    }>;
-    site?: Partial<{
-        environment: "development" | "stage" | "production"; // by default development ['development', 'stage', 'production']
-        entity: string; // Entity responsible for website
-        language: string; // language of the website (ISO 639-1). default to html lang
-        target: string; // site target
-        type: string; // site type
-        region: string; // region of the website (ISO 3166-2:FR)
-        department: string; // department of the website (ISO 3166-2:FR)
-    }>;
-    user?: Partial<{
-        connect: {
-            uid: string; // user id - required when connected
-            email: string; // encoded user email - required when connected
-            isNew: boolean; // user just registered
-        };
-        profile: string; // user profile
-        language: string;
-        type: string;
-    }>;
-    search?: Partial<{
-        engine: string;
-        results: number;
-        terms: string;
-        category: string;
-        theme: string;
-        type: string;
-        method: string;
-    }>;
-    funnel?: Partial<{
-        id: string;
-        type: string;
-        name: string;
-        step: string; // step name
-        current: number; // step number
-        total: number; // total number of steps
-        objective: string; // form objective
-        error: string; // form's error type
-    }>;
-    cmp?: Partial<{
-        id: string;
-    }>;
-};
+const dDsfrLoaded = new Deferred<void>();
+
+export const prDsfrLoaded = dDsfrLoaded.pr;

src/tools/Deferred.ts

@@ -0,0 +1,39 @@
+import { overwriteReadonlyProp } from "tsafe/lab/overwriteReadonlyProp";
+
+export class Deferred<T> {
+    public readonly pr: Promise<T>;
+
+    /** NOTE: Does not need to be called bound to instance*/
+    public readonly resolve: (value: T) => void;
+    public readonly reject: (error: any) => void;
+
+    constructor() {
+        let resolve!: (value: T) => void;
+        let reject!: (error: any) => void;
+
+        this.pr = new Promise<T>((resolve_, reject_) => {
+            resolve = value => {
+                overwriteReadonlyProp(this, "isPending", false);
+                resolve_(value);
+            };
+
+            reject = error => {
+                overwriteReadonlyProp(this, "isPending", false);
+                reject_(error);
+            };
+        });
+
+        this.resolve = resolve;
+        this.reject = reject;
+    }
+
+    public readonly isPending: boolean = true;
+}
+
+export namespace Deferred {
+    export type Unpack<T extends Deferred<any>> = T extends Deferred<infer U> ? U : never;
+}
+
+export class VoidDeferred extends Deferred<undefined> {
+    public declare readonly resolve: () => void;
+}