Improve NextJS helper and offer to make it part of MUI

We should improve the Api:

pages/_app.tsx

 import { createEmotionSsrAdvancedApproach } from "tss-react/nextJs";
-const { EmotionCacheProvider, withEmotionCache } = createEmotionSsrAdvancedApproach({ "key": "css" });
+const { withAppEmotionCache, withDocumentEmotionCache } = createEmotionSsrAdvancedApproach({ "key": "css" });

export { withDocumentEmotionCache };

+ export default withAppEmotionCache(App);

Just a memo:

import Head from "next/head";
import DefaultApp from "next/app";
import type { NextComponentType } from "next";
import type { AppProps } from "next/app";
import marianneLightWoff2Url from "../dsfr/fonts/Marianne-Light.woff2";
import marianneItalicWoff2Url from "../dsfr/fonts/Marianne-Light_Italic.woff2";
import marianneRegularWoff2Url from "../dsfr/fonts/Marianne-Regular.woff2";
import marianneRegularItalicWoff2Url from "../dsfr/fonts/Marianne-Regular_Italic.woff2";
import marianneMediumWoff2Url from "../dsfr/fonts/Marianne-Medium.woff2";
import marianneMediumItalicWoff2Url from "../dsfr/fonts/Marianne-Medium_Italic.woff2";
import marianneBoldWoff2Url from "../dsfr/fonts/Marianne-Bold.woff2";
import marianneBoldItalicWoff2Url from "../dsfr/fonts/Marianne-Bold_Italic.woff2";
import spectralRegularWoff2Url from "../dsfr/fonts/Spectral-Regular.woff2";
import spectralExtraBoldWoff2Url from "../dsfr/fonts/Spectral-ExtraBold.woff2";

export function withDsfr(): typeof DefaultApp;
export function withDsfr<AppComponent extends NextComponentType<any, any, any>>(App: AppComponent): AppComponent;
export function withDsfr<AppComponent extends NextComponentType<any, any, any>>(App: AppComponent = DefaultApp as any): AppComponent {

    function AppWithDsfr(props: AppProps) {
        return (
            <>
                <Head>
                    {
                        [
                            marianneLightWoff2Url,
                            marianneItalicWoff2Url,
                            marianneRegularWoff2Url,
                            marianneRegularItalicWoff2Url,
                            marianneMediumWoff2Url,
                            marianneMediumItalicWoff2Url,
                            marianneBoldWoff2Url,
                            marianneBoldItalicWoff2Url,
                            spectralRegularWoff2Url,
                            spectralExtraBoldWoff2Url
                        ].map(href => <link key={href} rel="preload" href={href} as="font" crossOrigin="anonymous" />)
                    }
                </Head>
                <App {...props as any} />
            </>
        );

    }

    Object.keys(App)
        .forEach(staticMethod => (AppWithDsfr as any)[staticMethod] = (App as any)[staticMethod]);

    AppWithDsfr.displayName = AppWithDsfr.name;

    return AppWithDsfr as any;

}

garronej / tss-react

Improve NextJS helper and offer to make it part of MUI #114