npm - @mui/material-nextjs - Versions diffs - 5.15.0 → 5.15.4 - Mend

@mui/material-nextjs 5.15.0 → 5.15.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/{node/v13-pagesRouter/pagesRouterV13.js → build/node/v13-pagesRouter/pagesRouterV13Document.js} RENAMED Viewed

@@ -4,46 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AppCacheProvider = AppCacheProvider;
 exports.DocumentHeadTags = DocumentHeadTags;
 exports.createGetInitialProps = createGetInitialProps;
 exports.documentGetInitialProps = documentGetInitialProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _cache = _interopRequireDefault(require("@emotion/cache"));
 var _createInstance = _interopRequireDefault(require("@emotion/server/create-instance"));
 var _document = _interopRequireDefault(require("next/document"));
+var _createCache = _interopRequireDefault(require("./createCache"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _meta;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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('meta[name="emotion-insertion-point"]');
-    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
-  }
-  return (0, _cache.default)({
-    key: 'mui',
-    insertionPoint
-  });
-}
-const defaultEmotionCache = createEmotionCache();
-function AppCacheProvider({
-  emotionCache = defaultEmotionCache,
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
-    value: emotionCache,
-    children: children
-  });
-}
 /**
  * A utility to compose multiple `getInitialProps` functions.
  */
@@ -97,7 +69,12 @@ async function documentGetInitialProps(ctx, options) {
   // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
   // However, be aware that it can have global side effects.
-  const cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : createEmotionCache();
+  const cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : (0, _createCache.default)();
+  // The createEmotionServer has to be called directly after the cache creation due to the side effect of cache.compat = true,
+  // otherwise the <style> tag will not come with the HTML string from the server.
+  const {
+    extractCriticalToChunks
+  } = (0, _createInstance.default)(cache);
   return createGetInitialProps([{
     enhanceApp: App => function EnhanceApp(props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(App, (0, _extends2.default)({
@@ -105,9 +82,6 @@ async function documentGetInitialProps(ctx, options) {
       }, props));
     },
     resolveProps: async initialProps => {
-      const {
-        extractCriticalToChunks
-      } = (0, _createInstance.default)(cache);
       const {
         styles
       } = extractCriticalToChunks(initialProps.html);

package/build/package.json ADDED Viewed

@@ -0,0 +1,52 @@
+{
+  "name": "@mui/material-nextjs",
+  "version": "5.15.4",
+  "private": false,
+  "author": "MUI Team",
+  "description": "Collection of utilities for integration between Material UI and Next.js.",
+  "keywords": [
+    "react",
+    "next",
+    "material-ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-material-nextjs"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "homepage": "https://mui.com/material-ui/guides/nextjs/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "peerDependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/server": "^11.11.0",
+    "@mui/material": "^5.0.0",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "next": "^13.0.0 || ^14.0.0",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@emotion/cache": {
+      "optional": true
+    },
+    "@emotion/server": {
+      "optional": true
+    }
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}

package/build/v13-pagesRouter/createCache.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default function createEmotionCache(): import("@emotion/cache").EmotionCache;

package/build/v13-pagesRouter/createCache.js ADDED Viewed

@@ -0,0 +1,17 @@
+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('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
+  }
+  return createCache({
+    key: 'mui',
+    insertionPoint
+  });
+}

package/build/v13-pagesRouter/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './pagesRouterV13Document';
2	+ export * from './pagesRouterV13App';

package/build/v13-pagesRouter/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './pagesRouterV13Document';
2	+ export * from './pagesRouterV13App';

package/build/v13-pagesRouter/pagesRouterV13App.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { EmotionCache } from '@emotion/react';
+export interface EmotionCacheProviderProps {
+    emotionCache?: EmotionCache;
+}
+export declare function AppCacheProvider({ emotionCache, children, }: React.PropsWithChildren<EmotionCacheProviderProps>): React.JSX.Element;

package/build/v13-pagesRouter/pagesRouterV13App.js ADDED Viewed

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createEmotionCache from './createCache';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultEmotionCache = createEmotionCache();
+export function AppCacheProvider({
+  emotionCache = defaultEmotionCache,
+  children
+}) {
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: emotionCache,
+    children: children
+  });
+}

package/{v13-pagesRouter/pagesRouterV13.d.ts → build/v13-pagesRouter/pagesRouterV13Document.d.ts} RENAMED Viewed

@@ -2,10 +2,6 @@ import * as React from 'react';
 import { AppType } from 'next/app';
 import { EmotionCache } from '@emotion/react';
 import { DocumentContext, DocumentInitialProps } from 'next/document';
-interface EmotionCacheProviderProps {
-    emotionCache?: EmotionCache;
-}
-export declare function AppCacheProvider({ emotionCache, children, }: React.PropsWithChildren<EmotionCacheProviderProps>): React.JSX.Element;
 interface Plugin {
     enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType>>) => (props: any) => JSX.Element;
     resolveProps: (initialProps: DocumentInitialProps) => Promise<DocumentInitialProps>;

package/{v13-pagesRouter/pagesRouterV13.js → build/v13-pagesRouter/pagesRouterV13Document.js} RENAMED Viewed

@@ -1,38 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _meta;
 import * as React from 'react';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
 import createEmotionServer from '@emotion/server/create-instance';
 import Document from 'next/document';
+import createEmotionCache from './createCache';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-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('meta[name="emotion-insertion-point"]');
-    insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
-  }
-  return createCache({
-    key: 'mui',
-    insertionPoint
-  });
-}
-const defaultEmotionCache = createEmotionCache();
-export function AppCacheProvider({
-  emotionCache = defaultEmotionCache,
-  children
-}) {
-  return /*#__PURE__*/_jsx(CacheProvider, {
-    value: emotionCache,
-    children: children
-  });
-}
 /**
  * A utility to compose multiple `getInitialProps` functions.
  */
@@ -87,6 +60,11 @@ export async function documentGetInitialProps(ctx, options) {
   // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
   // However, be aware that it can have global side effects.
   const cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : createEmotionCache();
+  // The createEmotionServer has to be called directly after the cache creation due to the side effect of cache.compat = true,
+  // otherwise the <style> tag will not come with the HTML string from the server.
+  const {
+    extractCriticalToChunks
+  } = createEmotionServer(cache);
   return createGetInitialProps([{
     enhanceApp: App => function EnhanceApp(props) {
       return /*#__PURE__*/_jsx(App, _extends({
@@ -94,9 +72,6 @@ export async function documentGetInitialProps(ctx, options) {
       }, props));
     },
     resolveProps: async initialProps => {
-      const {
-        extractCriticalToChunks
-      } = createEmotionServer(cache);
       const {
         styles
       } = extractCriticalToChunks(initialProps.html);

package/package.json CHANGED Viewed

@@ -1,14 +1,13 @@
 {
   "name": "@mui/material-nextjs",
-  "version": "5.15.0",
+  "version": "5.15.4",
   "private": false,
   "author": "MUI Team",
   "description": "Collection of utilities for integration between Material UI and Next.js.",
   "keywords": [
     "react",
-    "react-component",
-    "mui",
-    "utils"
+    "next",
+    "material-ui"
   ],
   "repository": {
     "type": "git",
@@ -19,11 +18,19 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "private package",
+  "homepage": "https://mui.com/material-ui/guides/nextjs/",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
   },
+  "devDependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/server": "^11.11.0",
+    "@types/react": "^18.2.46",
+    "next": "13.4.19",
+    "react": "^18.2.0"
+  },
   "peerDependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/server": "^11.11.0",
@@ -49,5 +56,18 @@
   },
   "engines": {
     "node": ">=12.0.0"
+  },
+  "scripts": {
+    "build": "pnpm build:legacy && pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
+    "build:legacy": "node ../../scripts/build.mjs legacy",
+    "build:modern": "node ../../scripts/build.mjs modern",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:types": "node ../../scripts/buildTypes.mjs",
+    "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
+    "release": "pnpm build && npm publish build",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.{js,ts,tsx}'",
+    "typescript": "tsc -p tsconfig.json"
   }
 }

package/src/v13-appRouter/appRouterV13.tsx ADDED Viewed

@@ -0,0 +1,102 @@
+'use client';
+import * as React from 'react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
+export type AppRouterCacheProviderProps = {
+  /** These are the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+  options?: Partial<OptionsOfCreateCache> & {
+    /**
+     * If `true`, the generated styles are wrapped within `@layer mui`.
+     * This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind, plain CSS etc.
+     */
+    enableCssLayer?: boolean;
+  };
+  /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+  CacheProvider?: (props: {
+    value: EmotionCache;
+    children: React.ReactNode;
+  }) => React.JSX.Element | null;
+  children: React.ReactNode;
+};
+export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps) {
+  const { options, CacheProvider = DefaultCacheProvider, children } = props;
+  const [registry] = React.useState(() => {
+    const cache = createCache({ ...options, key: options?.key ?? 'mui' });
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: { name: string; isGlobal: boolean }[] = [];
+    cache.insert = (...args) => {
+      if (options?.enableCssLayer) {
+        args[1].styles = `@layer mui {${args[1].styles}}`;
+      }
+      const [selector, serialized] = args;
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push({
+          name: serialized.name,
+          isGlobal: !selector,
+        });
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+  useServerInsertedHTML(() => {
+    const inserted = registry.flush();
+    if (inserted.length === 0) {
+      return null;
+    }
+    let styles = '';
+    let dataEmotionAttribute = registry.cache.key;
+    const globals: {
+      name: string;
+      style: string;
+    }[] = [];
+    inserted.forEach(({ name, isGlobal }) => {
+      const style = registry.cache.inserted[name];
+      if (typeof style !== 'boolean') {
+        if (isGlobal) {
+          globals.push({ name, style });
+        } else {
+          styles += style;
+          dataEmotionAttribute += ` ${name}`;
+        }
+      }
+    });
+    return (
+      <React.Fragment>
+        {globals.map(({ name, style }) => (
+          <style
+            key={name}
+            data-emotion={`${registry.cache.key}-global ${name}`}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: style }}
+          />
+        ))}
+        {styles && (
+          <style
+            data-emotion={dataEmotionAttribute}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: styles }}
+          />
+        )}
+      </React.Fragment>
+    );
+  });
+  return <CacheProvider value={registry.cache}>{children}</CacheProvider>;
+}

package/src/v13-appRouter/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+'use client';
+export { default as AppRouterCacheProvider } from './appRouterV13';
+export * from './appRouterV13';

package/src/v13-pagesRouter/createCache.ts ADDED Viewed

@@ -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 });
+}

package/src/v13-pagesRouter/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './pagesRouterV13Document';
2	+ export * from './pagesRouterV13App';

package/src/v13-pagesRouter/pagesRouterV13App.tsx ADDED Viewed

@@ -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>;
+}

package/src/v13-pagesRouter/pagesRouterV13Document.tsx ADDED Viewed

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { AppType } from 'next/app';
+import { EmotionCache } from '@emotion/react';
+import createEmotionServer from '@emotion/server/create-instance';
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
+import { EmotionCacheProviderProps } from './pagesRouterV13App';
+import createEmotionCache from './createCache';
+interface Plugin {
+  enhanceApp: (
+    App: React.ComponentType<React.ComponentProps<AppType>>,
+  ) => (props: any) => JSX.Element;
+  resolveProps: (initialProps: DocumentInitialProps) => Promise<DocumentInitialProps>;
+}
+/**
+ * A utility to compose multiple `getInitialProps` functions.
+ */
+export function createGetInitialProps(plugins: Plugin[]) {
+  return async function getInitialProps(ctx: DocumentContext) {
+    const originalRenderPage = ctx.renderPage;
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => plugins.reduce((result, plugin) => plugin.enhanceApp(result), App),
+      });
+    const initialProps = await Document.getInitialProps(ctx);
+    const finalProps = await plugins.reduce(
+      async (result, plugin) => plugin.resolveProps(await result),
+      Promise.resolve(initialProps),
+    );
+    return finalProps;
+  };
+}
+export interface DocumentHeadTagsProps {
+  emotionStyleTags: React.JSX.Element[];
+}
+export function DocumentHeadTags({ emotionStyleTags }: DocumentHeadTagsProps) {
+  return (
+    <React.Fragment>
+      <meta name="emotion-insertion-point" content="" />
+      {emotionStyleTags}
+    </React.Fragment>
+  );
+}
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+export async function documentGetInitialProps(
+  ctx: DocumentContext,
+  options?: {
+    emotionCache?: EmotionCache;
+    plugins?: Plugin[];
+  },
+) {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+  // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = options?.emotionCache ?? createEmotionCache();
+  // The createEmotionServer has to be called directly after the cache creation due to the side effect of cache.compat = true,
+  // otherwise the <style> tag will not come with the HTML string from the server.
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+  return createGetInitialProps([
+    {
+      enhanceApp: (
+        App: React.ComponentType<React.ComponentProps<AppType> & EmotionCacheProviderProps>,
+      ) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
+      resolveProps: async (initialProps) => {
+        const { styles } = extractCriticalToChunks(initialProps.html);
+        return {
+          ...initialProps,
+          emotionStyleTags: styles.map((style) => (
+            <style
+              data-emotion={`${style.key} ${style.ids.join(' ')}`}
+              key={style.key}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: style.css }}
+            />
+          )),
+        };
+      },
+    },
+    ...(options?.plugins ?? []),
+  ])(ctx) as Promise<DocumentInitialProps & DocumentHeadTagsProps>;
+}

package/src/v14-appRouter/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 'use client';
2	+ export * from '../v13-appRouter';

package/src/v14-pagesRouter/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from '../v13-pagesRouter';

package/tsconfig.build.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  // This config is for emitting declarations (.d.ts) only
+  // Actual .ts source files are transpiled via babel
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "build",
+    "rootDir": "./src"
+  },
+  "include": ["./src/**/*.ts*"],
+  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+}