@mui/material-nextjs
Version:
Collection of utilities for integration between Material UI and Next.js.
109 lines (108 loc) • 3.78 kB
JavaScript
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import createCache from '@emotion/cache';
import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
import { useServerInsertedHTML } from 'next/navigation';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
* Emotion works OK without this provider but it's recommended to use this provider to improve performance.
* Without it, Emotion will generate a new <style> tag during SSR for every component.
* See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's a problem.
*/
export default function AppRouterCacheProvider(props) {
var options = props.options,
_props$CacheProvider = props.CacheProvider,
CacheProvider = _props$CacheProvider === void 0 ? DefaultCacheProvider : _props$CacheProvider,
children = props.children;
var _React$useState = React.useState(function () {
var _options$key;
var cache = createCache(_extends({}, options, {
key: (_options$key = options == null ? void 0 : options.key) != null ? _options$key : 'mui'
}));
cache.compat = true;
var prevInsert = cache.insert;
var inserted = [];
// Override the insert method to support streaming SSR with flush().
cache.insert = function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (options != null && options.enableCssLayer) {
args[1].styles = "@layer mui {".concat(args[1].styles, "}");
}
var selector = args[0],
serialized = args[1];
if (cache.inserted[serialized.name] === undefined) {
inserted.push({
name: serialized.name,
isGlobal: !selector
});
}
return prevInsert.apply(void 0, args);
};
var flush = function flush() {
var prevInserted = inserted;
inserted = [];
return prevInserted;
};
return {
cache: cache,
flush: flush
};
}),
registry = _React$useState[0];
useServerInsertedHTML(function () {
var inserted = registry.flush();
if (inserted.length === 0) {
return null;
}
var styles = '';
var dataEmotionAttribute = registry.cache.key;
var globals = [];
inserted.forEach(function (_ref) {
var name = _ref.name,
isGlobal = _ref.isGlobal;
var style = registry.cache.inserted[name];
if (typeof style !== 'boolean') {
if (isGlobal) {
globals.push({
name: name,
style: style
});
} else {
styles += style;
dataEmotionAttribute += " ".concat(name);
}
}
});
return /*#__PURE__*/_jsxs(React.Fragment, {
children: [globals.map(function (_ref2) {
var name = _ref2.name,
style = _ref2.style;
return /*#__PURE__*/_jsx("style", {
nonce: options == null ? void 0 : options.nonce,
"data-emotion": "".concat(registry.cache.key, "-global ").concat(name)
// eslint-disable-next-line react/no-danger
,
dangerouslySetInnerHTML: {
__html: style
}
}, name);
}), styles && /*#__PURE__*/_jsx("style", {
nonce: options == null ? void 0 : options.nonce,
"data-emotion": dataEmotionAttribute
// eslint-disable-next-line react/no-danger
,
dangerouslySetInnerHTML: {
__html: styles
}
})]
});
});
return /*#__PURE__*/_jsx(CacheProvider, {
value: registry.cache,
children: children
});
}