@mui/material-nextjs 5.15.0
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.
- package/CHANGELOG.md +13738 -0
- package/LICENSE +21 -0
- package/README.md +3 -0
- package/legacy/v13-appRouter/appRouterV13.js +101 -0
- package/legacy/v13-appRouter/index.js +4 -0
- package/legacy/v13-pagesRouter/index.js +1 -0
- package/legacy/v13-pagesRouter/pagesRouterV13.js +192 -0
- package/legacy/v14-appRouter/index.js +3 -0
- package/legacy/v14-pagesRouter/index.js +1 -0
- package/modern/v13-appRouter/appRouterV13.js +96 -0
- package/modern/v13-appRouter/index.js +4 -0
- package/modern/v13-pagesRouter/index.js +1 -0
- package/modern/v13-pagesRouter/pagesRouterV13.js +113 -0
- package/modern/v14-appRouter/index.js +3 -0
- package/modern/v14-pagesRouter/index.js +1 -0
- package/node/v13-appRouter/appRouterV13.js +104 -0
- package/node/v13-appRouter/index.js +29 -0
- package/node/v13-pagesRouter/index.js +16 -0
- package/node/v13-pagesRouter/pagesRouterV13.js +125 -0
- package/node/v14-appRouter/index.js +17 -0
- package/node/v14-pagesRouter/index.js +16 -0
- package/package.json +53 -0
- package/v13-appRouter/appRouterV13.d.ts +19 -0
- package/v13-appRouter/appRouterV13.js +97 -0
- package/v13-appRouter/index.d.ts +2 -0
- package/v13-appRouter/index.js +4 -0
- package/v13-appRouter/package.json +6 -0
- package/v13-pagesRouter/index.d.ts +1 -0
- package/v13-pagesRouter/index.js +1 -0
- package/v13-pagesRouter/package.json +6 -0
- package/v13-pagesRouter/pagesRouterV13.d.ts +27 -0
- package/v13-pagesRouter/pagesRouterV13.js +114 -0
- package/v14-appRouter/index.d.ts +1 -0
- package/v14-appRouter/index.js +3 -0
- package/v14-appRouter/package.json +6 -0
- package/v14-pagesRouter/index.d.ts +1 -0
- package/v14-pagesRouter/index.js +1 -0
- package/v14-pagesRouter/package.json +6 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
var _exportNames = {
|
|
8
|
+
AppRouterCacheProvider: true
|
|
9
|
+
};
|
|
10
|
+
Object.defineProperty(exports, "AppRouterCacheProvider", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _appRouterV.default;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
var _appRouterV = _interopRequireWildcard(require("./appRouterV13"));
|
|
17
|
+
Object.keys(_appRouterV).forEach(function (key) {
|
|
18
|
+
if (key === "default" || key === "__esModule") return;
|
|
19
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
20
|
+
if (key in exports && exports[key] === _appRouterV[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () {
|
|
24
|
+
return _appRouterV[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
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); }
|
|
29
|
+
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; }
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _pagesRouterV = require("./pagesRouterV13");
|
|
7
|
+
Object.keys(_pagesRouterV).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _pagesRouterV[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _pagesRouterV[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.AppCacheProvider = AppCacheProvider;
|
|
8
|
+
exports.DocumentHeadTags = DocumentHeadTags;
|
|
9
|
+
exports.createGetInitialProps = createGetInitialProps;
|
|
10
|
+
exports.documentGetInitialProps = documentGetInitialProps;
|
|
11
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
|
+
var React = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _react2 = require("@emotion/react");
|
|
14
|
+
var _cache = _interopRequireDefault(require("@emotion/cache"));
|
|
15
|
+
var _createInstance = _interopRequireDefault(require("@emotion/server/create-instance"));
|
|
16
|
+
var _document = _interopRequireDefault(require("next/document"));
|
|
17
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
+
var _meta;
|
|
19
|
+
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); }
|
|
20
|
+
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; }
|
|
21
|
+
const isBrowser = typeof document !== 'undefined';
|
|
22
|
+
|
|
23
|
+
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
|
|
24
|
+
// This assures that MUI styles are loaded first.
|
|
25
|
+
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
|
|
26
|
+
function createEmotionCache() {
|
|
27
|
+
let insertionPoint;
|
|
28
|
+
if (isBrowser) {
|
|
29
|
+
const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
|
|
30
|
+
insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
|
|
31
|
+
}
|
|
32
|
+
return (0, _cache.default)({
|
|
33
|
+
key: 'mui',
|
|
34
|
+
insertionPoint
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
const defaultEmotionCache = createEmotionCache();
|
|
38
|
+
function AppCacheProvider({
|
|
39
|
+
emotionCache = defaultEmotionCache,
|
|
40
|
+
children
|
|
41
|
+
}) {
|
|
42
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
|
|
43
|
+
value: emotionCache,
|
|
44
|
+
children: children
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* A utility to compose multiple `getInitialProps` functions.
|
|
49
|
+
*/
|
|
50
|
+
function createGetInitialProps(plugins) {
|
|
51
|
+
return async function getInitialProps(ctx) {
|
|
52
|
+
const originalRenderPage = ctx.renderPage;
|
|
53
|
+
ctx.renderPage = () => originalRenderPage({
|
|
54
|
+
enhanceApp: App => plugins.reduce((result, plugin) => plugin.enhanceApp(result), App)
|
|
55
|
+
});
|
|
56
|
+
const initialProps = await _document.default.getInitialProps(ctx);
|
|
57
|
+
const finalProps = await plugins.reduce(async (result, plugin) => plugin.resolveProps(await result), Promise.resolve(initialProps));
|
|
58
|
+
return finalProps;
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
function DocumentHeadTags({
|
|
62
|
+
emotionStyleTags
|
|
63
|
+
}) {
|
|
64
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
|
|
65
|
+
children: [_meta || (_meta = /*#__PURE__*/(0, _jsxRuntime.jsx)("meta", {
|
|
66
|
+
name: "emotion-insertion-point",
|
|
67
|
+
content: ""
|
|
68
|
+
})), emotionStyleTags]
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// `getInitialProps` belongs to `_document` (instead of `_app`),
|
|
73
|
+
// it's compatible with static-site generation (SSG).
|
|
74
|
+
async function documentGetInitialProps(ctx, options) {
|
|
75
|
+
var _options$emotionCache, _options$plugins;
|
|
76
|
+
// Resolution order
|
|
77
|
+
//
|
|
78
|
+
// On the server:
|
|
79
|
+
// 1. app.getInitialProps
|
|
80
|
+
// 2. page.getInitialProps
|
|
81
|
+
// 3. document.getInitialProps
|
|
82
|
+
// 4. app.render
|
|
83
|
+
// 5. page.render
|
|
84
|
+
// 6. document.render
|
|
85
|
+
//
|
|
86
|
+
// On the server with error:
|
|
87
|
+
// 1. document.getInitialProps
|
|
88
|
+
// 2. app.render
|
|
89
|
+
// 3. page.render
|
|
90
|
+
// 4. document.render
|
|
91
|
+
//
|
|
92
|
+
// On the client
|
|
93
|
+
// 1. app.getInitialProps
|
|
94
|
+
// 2. page.getInitialProps
|
|
95
|
+
// 3. app.render
|
|
96
|
+
// 4. page.render
|
|
97
|
+
|
|
98
|
+
// You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
|
|
99
|
+
// However, be aware that it can have global side effects.
|
|
100
|
+
const cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : createEmotionCache();
|
|
101
|
+
return createGetInitialProps([{
|
|
102
|
+
enhanceApp: App => function EnhanceApp(props) {
|
|
103
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(App, (0, _extends2.default)({
|
|
104
|
+
emotionCache: cache
|
|
105
|
+
}, props));
|
|
106
|
+
},
|
|
107
|
+
resolveProps: async initialProps => {
|
|
108
|
+
const {
|
|
109
|
+
extractCriticalToChunks
|
|
110
|
+
} = (0, _createInstance.default)(cache);
|
|
111
|
+
const {
|
|
112
|
+
styles
|
|
113
|
+
} = extractCriticalToChunks(initialProps.html);
|
|
114
|
+
return (0, _extends2.default)({}, initialProps, {
|
|
115
|
+
emotionStyleTags: styles.map(style => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
|
|
116
|
+
"data-emotion": `${style.key} ${style.ids.join(' ')}`,
|
|
117
|
+
// eslint-disable-next-line react/no-danger
|
|
118
|
+
dangerouslySetInnerHTML: {
|
|
119
|
+
__html: style.css
|
|
120
|
+
}
|
|
121
|
+
}, style.key))
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
}, ...((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])])(ctx);
|
|
125
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
var _v13AppRouter = require("../v13-appRouter");
|
|
8
|
+
Object.keys(_v13AppRouter).forEach(function (key) {
|
|
9
|
+
if (key === "default" || key === "__esModule") return;
|
|
10
|
+
if (key in exports && exports[key] === _v13AppRouter[key]) return;
|
|
11
|
+
Object.defineProperty(exports, key, {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () {
|
|
14
|
+
return _v13AppRouter[key];
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _v13PagesRouter = require("../v13-pagesRouter");
|
|
7
|
+
Object.keys(_v13PagesRouter).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _v13PagesRouter[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _v13PagesRouter[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mui/material-nextjs",
|
|
3
|
+
"version": "5.15.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"author": "MUI Team",
|
|
6
|
+
"description": "Collection of utilities for integration between Material UI and Next.js.",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"react",
|
|
9
|
+
"react-component",
|
|
10
|
+
"mui",
|
|
11
|
+
"utils"
|
|
12
|
+
],
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "https://github.com/mui/material-ui.git",
|
|
16
|
+
"directory": "packages/mui-material-nextjs"
|
|
17
|
+
},
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/mui/material-ui/issues"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "private package",
|
|
23
|
+
"funding": {
|
|
24
|
+
"type": "opencollective",
|
|
25
|
+
"url": "https://opencollective.com/mui-org"
|
|
26
|
+
},
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"@emotion/cache": "^11.11.0",
|
|
29
|
+
"@emotion/server": "^11.11.0",
|
|
30
|
+
"@mui/material": "^5.0.0",
|
|
31
|
+
"@types/react": "^17.0.0 || ^18.0.0",
|
|
32
|
+
"next": "^13.0.0 || ^14.0.0",
|
|
33
|
+
"react": "^17.0.0 || ^18.0.0"
|
|
34
|
+
},
|
|
35
|
+
"peerDependenciesMeta": {
|
|
36
|
+
"@types/react": {
|
|
37
|
+
"optional": true
|
|
38
|
+
},
|
|
39
|
+
"@emotion/cache": {
|
|
40
|
+
"optional": true
|
|
41
|
+
},
|
|
42
|
+
"@emotion/server": {
|
|
43
|
+
"optional": true
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"sideEffects": false,
|
|
47
|
+
"publishConfig": {
|
|
48
|
+
"access": "public"
|
|
49
|
+
},
|
|
50
|
+
"engines": {
|
|
51
|
+
"node": ">=12.0.0"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
|
|
3
|
+
export type AppRouterCacheProviderProps = {
|
|
4
|
+
/** These are the options passed to createCache() from 'import createCache from "@emotion/cache"' */
|
|
5
|
+
options?: Partial<OptionsOfCreateCache> & {
|
|
6
|
+
/**
|
|
7
|
+
* If `true`, the generated styles are wrapped within `@layer mui`.
|
|
8
|
+
* This is useful if you want to override the Material UI's generated styles with different styling solution, like Tailwind, plain CSS etc.
|
|
9
|
+
*/
|
|
10
|
+
enableCssLayer?: boolean;
|
|
11
|
+
};
|
|
12
|
+
/** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
|
|
13
|
+
CacheProvider?: (props: {
|
|
14
|
+
value: EmotionCache;
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
}) => React.JSX.Element | null;
|
|
17
|
+
children: React.ReactNode;
|
|
18
|
+
};
|
|
19
|
+
export default function AppRouterCacheProvider(props: AppRouterCacheProviderProps): React.JSX.Element;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import createCache from '@emotion/cache';
|
|
6
|
+
import { useServerInsertedHTML } from 'next/navigation';
|
|
7
|
+
import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
export default function AppRouterCacheProvider(props) {
|
|
11
|
+
const {
|
|
12
|
+
options,
|
|
13
|
+
CacheProvider = DefaultCacheProvider,
|
|
14
|
+
children
|
|
15
|
+
} = props;
|
|
16
|
+
const [registry] = React.useState(() => {
|
|
17
|
+
var _options$key;
|
|
18
|
+
const cache = createCache(_extends({}, options, {
|
|
19
|
+
key: (_options$key = options == null ? void 0 : options.key) != null ? _options$key : 'mui'
|
|
20
|
+
}));
|
|
21
|
+
cache.compat = true;
|
|
22
|
+
const prevInsert = cache.insert;
|
|
23
|
+
let inserted = [];
|
|
24
|
+
cache.insert = (...args) => {
|
|
25
|
+
if (options != null && options.enableCssLayer) {
|
|
26
|
+
args[1].styles = `@layer mui {${args[1].styles}}`;
|
|
27
|
+
}
|
|
28
|
+
const [selector, serialized] = args;
|
|
29
|
+
if (cache.inserted[serialized.name] === undefined) {
|
|
30
|
+
inserted.push({
|
|
31
|
+
name: serialized.name,
|
|
32
|
+
isGlobal: !selector
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
return prevInsert(...args);
|
|
36
|
+
};
|
|
37
|
+
const flush = () => {
|
|
38
|
+
const prevInserted = inserted;
|
|
39
|
+
inserted = [];
|
|
40
|
+
return prevInserted;
|
|
41
|
+
};
|
|
42
|
+
return {
|
|
43
|
+
cache,
|
|
44
|
+
flush
|
|
45
|
+
};
|
|
46
|
+
});
|
|
47
|
+
useServerInsertedHTML(() => {
|
|
48
|
+
const inserted = registry.flush();
|
|
49
|
+
if (inserted.length === 0) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
let styles = '';
|
|
53
|
+
let dataEmotionAttribute = registry.cache.key;
|
|
54
|
+
const globals = [];
|
|
55
|
+
inserted.forEach(({
|
|
56
|
+
name,
|
|
57
|
+
isGlobal
|
|
58
|
+
}) => {
|
|
59
|
+
const style = registry.cache.inserted[name];
|
|
60
|
+
if (typeof style !== 'boolean') {
|
|
61
|
+
if (isGlobal) {
|
|
62
|
+
globals.push({
|
|
63
|
+
name,
|
|
64
|
+
style
|
|
65
|
+
});
|
|
66
|
+
} else {
|
|
67
|
+
styles += style;
|
|
68
|
+
dataEmotionAttribute += ` ${name}`;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
return /*#__PURE__*/_jsxs(React.Fragment, {
|
|
73
|
+
children: [globals.map(({
|
|
74
|
+
name,
|
|
75
|
+
style
|
|
76
|
+
}) => /*#__PURE__*/_jsx("style", {
|
|
77
|
+
"data-emotion": `${registry.cache.key}-global ${name}`
|
|
78
|
+
// eslint-disable-next-line react/no-danger
|
|
79
|
+
,
|
|
80
|
+
dangerouslySetInnerHTML: {
|
|
81
|
+
__html: style
|
|
82
|
+
}
|
|
83
|
+
}, name)), styles && /*#__PURE__*/_jsx("style", {
|
|
84
|
+
"data-emotion": dataEmotionAttribute
|
|
85
|
+
// eslint-disable-next-line react/no-danger
|
|
86
|
+
,
|
|
87
|
+
dangerouslySetInnerHTML: {
|
|
88
|
+
__html: styles
|
|
89
|
+
}
|
|
90
|
+
})]
|
|
91
|
+
});
|
|
92
|
+
});
|
|
93
|
+
return /*#__PURE__*/_jsx(CacheProvider, {
|
|
94
|
+
value: registry.cache,
|
|
95
|
+
children: children
|
|
96
|
+
});
|
|
97
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './pagesRouterV13';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './pagesRouterV13';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { AppType } from 'next/app';
|
|
3
|
+
import { EmotionCache } from '@emotion/react';
|
|
4
|
+
import { DocumentContext, DocumentInitialProps } from 'next/document';
|
|
5
|
+
interface EmotionCacheProviderProps {
|
|
6
|
+
emotionCache?: EmotionCache;
|
|
7
|
+
}
|
|
8
|
+
export declare function AppCacheProvider({ emotionCache, children, }: React.PropsWithChildren<EmotionCacheProviderProps>): React.JSX.Element;
|
|
9
|
+
interface Plugin {
|
|
10
|
+
enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType>>) => (props: any) => JSX.Element;
|
|
11
|
+
resolveProps: (initialProps: DocumentInitialProps) => Promise<DocumentInitialProps>;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* A utility to compose multiple `getInitialProps` functions.
|
|
15
|
+
*/
|
|
16
|
+
export declare function createGetInitialProps(plugins: Plugin[]): (ctx: DocumentContext) => Promise<DocumentInitialProps>;
|
|
17
|
+
export interface DocumentHeadTagsProps {
|
|
18
|
+
emotionStyleTags: React.JSX.Element[];
|
|
19
|
+
}
|
|
20
|
+
export declare function DocumentHeadTags({ emotionStyleTags }: DocumentHeadTagsProps): React.JSX.Element;
|
|
21
|
+
export declare function documentGetInitialProps(ctx: DocumentContext, options?: {
|
|
22
|
+
emotionCache?: EmotionCache;
|
|
23
|
+
plugins?: Plugin[];
|
|
24
|
+
}): Promise<import("next/dist/shared/lib/utils").RenderPageResult & {
|
|
25
|
+
styles?: React.ReactFragment | JSX.Element | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
|
|
26
|
+
} & DocumentHeadTagsProps>;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
var _meta;
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { CacheProvider } from '@emotion/react';
|
|
5
|
+
import createCache from '@emotion/cache';
|
|
6
|
+
import createEmotionServer from '@emotion/server/create-instance';
|
|
7
|
+
import Document from 'next/document';
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const isBrowser = typeof document !== 'undefined';
|
|
11
|
+
|
|
12
|
+
// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
|
|
13
|
+
// This assures that MUI styles are loaded first.
|
|
14
|
+
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
|
|
15
|
+
function createEmotionCache() {
|
|
16
|
+
let insertionPoint;
|
|
17
|
+
if (isBrowser) {
|
|
18
|
+
const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
|
|
19
|
+
insertionPoint = emotionInsertionPoint != null ? emotionInsertionPoint : undefined;
|
|
20
|
+
}
|
|
21
|
+
return createCache({
|
|
22
|
+
key: 'mui',
|
|
23
|
+
insertionPoint
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
const defaultEmotionCache = createEmotionCache();
|
|
27
|
+
export function AppCacheProvider({
|
|
28
|
+
emotionCache = defaultEmotionCache,
|
|
29
|
+
children
|
|
30
|
+
}) {
|
|
31
|
+
return /*#__PURE__*/_jsx(CacheProvider, {
|
|
32
|
+
value: emotionCache,
|
|
33
|
+
children: children
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* A utility to compose multiple `getInitialProps` functions.
|
|
38
|
+
*/
|
|
39
|
+
export function createGetInitialProps(plugins) {
|
|
40
|
+
return async function getInitialProps(ctx) {
|
|
41
|
+
const originalRenderPage = ctx.renderPage;
|
|
42
|
+
ctx.renderPage = () => originalRenderPage({
|
|
43
|
+
enhanceApp: App => plugins.reduce((result, plugin) => plugin.enhanceApp(result), App)
|
|
44
|
+
});
|
|
45
|
+
const initialProps = await Document.getInitialProps(ctx);
|
|
46
|
+
const finalProps = await plugins.reduce(async (result, plugin) => plugin.resolveProps(await result), Promise.resolve(initialProps));
|
|
47
|
+
return finalProps;
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
export function DocumentHeadTags({
|
|
51
|
+
emotionStyleTags
|
|
52
|
+
}) {
|
|
53
|
+
return /*#__PURE__*/_jsxs(React.Fragment, {
|
|
54
|
+
children: [_meta || (_meta = /*#__PURE__*/_jsx("meta", {
|
|
55
|
+
name: "emotion-insertion-point",
|
|
56
|
+
content: ""
|
|
57
|
+
})), emotionStyleTags]
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// `getInitialProps` belongs to `_document` (instead of `_app`),
|
|
62
|
+
// it's compatible with static-site generation (SSG).
|
|
63
|
+
export async function documentGetInitialProps(ctx, options) {
|
|
64
|
+
var _options$emotionCache, _options$plugins;
|
|
65
|
+
// Resolution order
|
|
66
|
+
//
|
|
67
|
+
// On the server:
|
|
68
|
+
// 1. app.getInitialProps
|
|
69
|
+
// 2. page.getInitialProps
|
|
70
|
+
// 3. document.getInitialProps
|
|
71
|
+
// 4. app.render
|
|
72
|
+
// 5. page.render
|
|
73
|
+
// 6. document.render
|
|
74
|
+
//
|
|
75
|
+
// On the server with error:
|
|
76
|
+
// 1. document.getInitialProps
|
|
77
|
+
// 2. app.render
|
|
78
|
+
// 3. page.render
|
|
79
|
+
// 4. document.render
|
|
80
|
+
//
|
|
81
|
+
// On the client
|
|
82
|
+
// 1. app.getInitialProps
|
|
83
|
+
// 2. page.getInitialProps
|
|
84
|
+
// 3. app.render
|
|
85
|
+
// 4. page.render
|
|
86
|
+
|
|
87
|
+
// You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
|
|
88
|
+
// However, be aware that it can have global side effects.
|
|
89
|
+
const cache = (_options$emotionCache = options == null ? void 0 : options.emotionCache) != null ? _options$emotionCache : createEmotionCache();
|
|
90
|
+
return createGetInitialProps([{
|
|
91
|
+
enhanceApp: App => function EnhanceApp(props) {
|
|
92
|
+
return /*#__PURE__*/_jsx(App, _extends({
|
|
93
|
+
emotionCache: cache
|
|
94
|
+
}, props));
|
|
95
|
+
},
|
|
96
|
+
resolveProps: async initialProps => {
|
|
97
|
+
const {
|
|
98
|
+
extractCriticalToChunks
|
|
99
|
+
} = createEmotionServer(cache);
|
|
100
|
+
const {
|
|
101
|
+
styles
|
|
102
|
+
} = extractCriticalToChunks(initialProps.html);
|
|
103
|
+
return _extends({}, initialProps, {
|
|
104
|
+
emotionStyleTags: styles.map(style => /*#__PURE__*/_jsx("style", {
|
|
105
|
+
"data-emotion": `${style.key} ${style.ids.join(' ')}`,
|
|
106
|
+
// eslint-disable-next-line react/no-danger
|
|
107
|
+
dangerouslySetInnerHTML: {
|
|
108
|
+
__html: style.css
|
|
109
|
+
}
|
|
110
|
+
}, style.key))
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
}, ...((_options$plugins = options == null ? void 0 : options.plugins) != null ? _options$plugins : [])])(ctx);
|
|
114
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../v13-appRouter';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../v13-pagesRouter';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../v13-pagesRouter';
|