@mui/material-nextjs
Version:
Collection of utilities for integration between Material UI and Next.js.
165 lines (164 loc) • 7.29 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
var _meta;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import * as React from 'react';
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";
/**
* A utility to compose multiple `getInitialProps` functions.
*/
export function createGetInitialProps(plugins) {
return /*#__PURE__*/function () {
var _getInitialProps = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ctx) {
var originalRenderPage, initialProps, finalProps;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
originalRenderPage = ctx.renderPage;
ctx.renderPage = function () {
return originalRenderPage({
enhanceApp: function enhanceApp(App) {
return plugins.reduce(function (result, plugin) {
return plugin.enhanceApp(result);
}, App);
}
});
};
_context2.next = 4;
return Document.getInitialProps(ctx);
case 4:
initialProps = _context2.sent;
_context2.next = 7;
return plugins.reduce( /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result, plugin) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.t0 = plugin;
_context.next = 3;
return result;
case 3:
_context.t1 = _context.sent;
return _context.abrupt("return", _context.t0.resolveProps.call(_context.t0, _context.t1));
case 5:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x2, _x3) {
return _ref.apply(this, arguments);
};
}(), Promise.resolve(initialProps));
case 7:
finalProps = _context2.sent;
return _context2.abrupt("return", finalProps);
case 9:
case "end":
return _context2.stop();
}
}, _callee2);
}));
function getInitialProps(_x) {
return _getInitialProps.apply(this, arguments);
}
return getInitialProps;
}();
}
export function DocumentHeadTags(props) {
return /*#__PURE__*/_jsxs(React.Fragment, {
children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
name: "emotion-insertion-point",
content: ""
})), props.emotionStyleTags]
});
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
export function documentGetInitialProps(_x4, _x5) {
return _documentGetInitialProps.apply(this, arguments);
}
function _documentGetInitialProps() {
_documentGetInitialProps = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(ctx, options) {
var _options$emotionCache, _options$plugins;
var cache, _createEmotionServer, extractCriticalToChunks;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
// 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.
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.
_createEmotionServer = createEmotionServer(cache), extractCriticalToChunks = _createEmotionServer.extractCriticalToChunks;
return _context4.abrupt("return", createGetInitialProps([{
enhanceApp: function enhanceApp(App) {
return function EnhanceApp(props) {
return /*#__PURE__*/_jsx(App, _extends({
emotionCache: cache
}, props));
};
},
resolveProps: function () {
var _resolveProps = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(initialProps) {
var _extractCriticalToChu, styles;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_extractCriticalToChu = extractCriticalToChunks(initialProps.html), styles = _extractCriticalToChu.styles;
return _context3.abrupt("return", _extends({}, initialProps, {
emotionStyleTags: styles.map(function (style) {
return /*#__PURE__*/_jsx("style", {
"data-emotion": "".concat(style.key, " ").concat(style.ids.join(' ')),
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML: {
__html: style.css
}
}, style.key);
})
}));
case 2:
case "end":
return _context3.stop();
}
}, _callee3);
}));
function resolveProps(_x6) {
return _resolveProps.apply(this, arguments);
}
return resolveProps;
}()
}].concat(_toConsumableArray((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])))(ctx));
case 3:
case "end":
return _context4.stop();
}
}, _callee4);
}));
return _documentGetInitialProps.apply(this, arguments);
}