[material-ui-nextjs] Fix build size (#40436)

mui · Jan 6, 2024 · 5518265 · 5518265
1 parent f59569c
commit 5518265
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 34 deletions.
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/createCache.ts b/packages/mui-material-nextjs/src/v13-pagesRouter/createCache.ts
@@ -0,0 +1,19 @@
+import createCache from '@emotion/cache';
+
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+ let insertionPoint;
+
+ if (isBrowser) {
+ const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+ 'meta[name="emotion-insertion-point"]',
+ );
+ insertionPoint = emotionInsertionPoint ?? undefined;
+ }
+
+ return createCache({ key: 'mui', insertionPoint });
+}
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts b/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts
@@ -1 +1,2 @@
-export * from './pagesRouterV13';
+export * from './pagesRouterV13Document';
+export * from './pagesRouterV13App';
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13App.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/pagesRouterV13App.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import createEmotionCache from './createCache';
+
+export interface EmotionCacheProviderProps {
+ emotionCache?: EmotionCache;
+}
+
+const defaultEmotionCache = createEmotionCache();
+
+export function AppCacheProvider({
+ emotionCache = defaultEmotionCache,
+ children,
+}: React.PropsWithChildren<EmotionCacheProviderProps>) {
+ return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
+}
diff --git a/...js/src/v13-pagesRouter/pagesRouterV13.tsx → ...13-pagesRouter/pagesRouterV13Document.tsx b/...js/src/v13-pagesRouter/pagesRouterV13.tsx → ...13-pagesRouter/pagesRouterV13Document.tsx
@@ -1,40 +1,10 @@
 import * as React from 'react';
 import { AppType } from 'next/app';
-import { CacheProvider, EmotionCache } from '@emotion/react';
-import createCache from '@emotion/cache';
+import { EmotionCache } from '@emotion/react';
 import createEmotionServer from '@emotion/server/create-instance';
 import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
-
-const isBrowser = typeof document !== 'undefined';
-
-// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
-// This assures that MUI styles are loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-function createEmotionCache() {
- let insertionPoint;
-
- if (isBrowser) {
- const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
- 'meta[name="emotion-insertion-point"]',
- );
- insertionPoint = emotionInsertionPoint ?? undefined;
- }
-
- return createCache({ key: 'mui', insertionPoint });
-}
-
-interface EmotionCacheProviderProps {
- emotionCache?: EmotionCache;
-}
-
-const defaultEmotionCache = createEmotionCache();
-
-export function AppCacheProvider({
- emotionCache = defaultEmotionCache,
- children,
-}: React.PropsWithChildren<EmotionCacheProviderProps>) {
- return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
-}
+import { EmotionCacheProviderProps } from './pagesRouterV13App';
+import createEmotionCache from './createCache';
 
 interface Plugin {
  enhanceApp: (