Skip to content

Commit 45ac74c

Browse files
tima101tima101
committed
book: MUI- and Next -related improvements
1 parent 0330379 commit 45ac74c

File tree

314 files changed

+27183
-35058
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

314 files changed

+27183
-35058
lines changed

‎book/1-start/.gitignore renamed to ‎book/1-begin/.gitignore

File renamed without changes.

‎book/1-start/package.json renamed to ‎book/1-begin/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "1-start",
2+
"name": "1-begin",
33
"version": "0.0.1",
44
"license": "MIT",
55
"scripts": {
@@ -9,12 +9,12 @@
99
"lint": "eslint components pages lib"
1010
},
1111
"dependencies": {
12-
"@material-ui/core": "^3.9.3",
12+
"@material-ui/core": "^4.1.3",
13+
"@material-ui/styles": "^4.1.2",
1314
"next": "^8.1.0",
1415
"prop-types": "^15.7.2",
1516
"react": "^16.8.6",
16-
"react-dom": "^16.8.6",
17-
"react-jss": "^8.6.1"
17+
"react-dom": "^16.8.6"
1818
},
1919
"devDependencies": {}
2020
}

‎book/1-start/yarn.lock renamed to ‎book/1-begin/yarn.lock

Lines changed: 498 additions & 610 deletions
Large diffs are not rendered by default.

‎book/1-end/lib/context.js

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎book/1-end/lib/theme.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { createMuiTheme } from '@material-ui/core/styles';
2+
import blue from '@material-ui/core/colors/blue';
3+
import grey from '@material-ui/core/colors/grey';
4+
5+
const theme = createMuiTheme({
6+
palette: {
7+
primary: { main: blue[700] },
8+
secondary: { main: grey[700] },
9+
type: 'light',
10+
},
11+
});
12+
13+
export { theme };

‎book/1-end/lib/withLayout.js

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎book/1-end/package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,22 @@
99
"lint": "eslint components pages lib"
1010
},
1111
"dependencies": {
12-
"@material-ui/core": "3.9.3",
12+
"@material-ui/core": "4.1.3",
13+
"@material-ui/styles": "^4.1.2",
1314
"next": "8.1.0",
1415
"prop-types": "15.7.2",
1516
"react": "16.8.6",
16-
"react-dom": "16.8.6",
17-
"react-jss": "8.6.1"
17+
"react-dom": "16.8.6"
1818
},
1919
"devDependencies": {
20-
"babel-eslint": "10.0.1",
21-
"eslint": "5.16.0",
20+
"babel-eslint": "10.0.2",
21+
"eslint": "6.0.1",
2222
"eslint-config-airbnb": "17.1.0",
23-
"eslint-plugin-import": "2.17.2",
23+
"eslint-config-prettier": "5.1.0",
24+
"eslint-plugin-import": "2.18.0",
2425
"eslint-plugin-jsx-a11y": "6.2.1",
25-
"eslint-plugin-react": "7.12.4",
26-
"eslint-config-prettier": "4.1.0",
27-
"eslint-plugin-prettier": "3.0.1",
28-
"prettier": "1.17.0"
26+
"eslint-plugin-prettier": "3.1.0",
27+
"eslint-plugin-react": "7.14.2",
28+
"prettier": "1.18.2"
2929
}
30-
}
30+
}

‎book/1-end/pages/_app.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import CssBaseline from '@material-ui/core/CssBaseline';
2+
import { ThemeProvider } from '@material-ui/styles';
3+
import App, { Container } from 'next/app';
4+
import React from 'react';
5+
6+
import { theme } from '../lib/theme';
7+
8+
import Header from '../components/Header';
9+
10+
class MyApp extends App {
11+
static async getInitialProps({ Component, ctx }) {
12+
const pageProps = {};
13+
14+
if (Component.getInitialProps) {
15+
Object.assign(pageProps, await Component.getInitialProps(ctx));
16+
}
17+
18+
// console.log(pageProps);
19+
20+
return { pageProps };
21+
}
22+
23+
componentDidMount() {
24+
// Remove the server-side injected CSS.
25+
const jssStyles = document.querySelector('#jss-server-side');
26+
if (jssStyles && jssStyles.parentNode) {
27+
jssStyles.parentNode.removeChild(jssStyles);
28+
}
29+
}
30+
31+
render() {
32+
const { Component, pageProps } = this.props;
33+
34+
// console.log(pageProps);
35+
36+
return (
37+
<Container>
38+
{/* ThemeProvider makes the theme available down the React
39+
tree thanks to React context. */}
40+
<ThemeProvider theme={theme}>
41+
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
42+
<CssBaseline />
43+
{pageProps.noHeader ? null : <Header {...pageProps} />}
44+
<Component {...pageProps} />
45+
</ThemeProvider>
46+
</Container>
47+
);
48+
}
49+
}
50+
51+
export default MyApp;

‎book/1-end/pages/_document.js

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from 'react';
2-
import JssProvider from 'react-jss/lib/JssProvider';
32
import Document, { Head, Main, NextScript } from 'next/document';
4-
5-
import getContext from '../lib/context';
3+
import { ServerStyleSheets } from '@material-ui/styles';
64

75
class MyDocument extends Document {
86
render() {
@@ -22,10 +20,7 @@ class MyDocument extends Document {
2220
rel="stylesheet"
2321
href="https://fonts.googleapis.com/css?family=Muli:300,400:latin"
2422
/>
25-
<link
26-
rel="stylesheet"
27-
href="https://fonts.googleapis.com/icon?family=Material+Icons"
28-
/>
23+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
2924
<link
3025
rel="stylesheet"
3126
href="https://storage.googleapis.com/builderbook/nprogress.min.css"
@@ -50,16 +45,15 @@ class MyDocument extends Document {
5045
border-left: 0.25em solid #dfe2e5;
5146
}
5247
pre {
53-
display: block;
54-
overflow-x: auto;
55-
padding: 0.5em;
56-
background: #FFF;
48+
display:block;
49+
overflow-x:auto;
50+
padding:0.5em;
51+
background:#FFF;
52+
color: #000;
5753
border: 1px solid #ddd;
5854
}
5955
code {
6056
font-size: 14px;
61-
background: #FFF;
62-
padding: 3px 5px;
6357
}
6458
`}
6559
</style>
@@ -82,28 +76,48 @@ class MyDocument extends Document {
8276
}
8377
}
8478

85-
MyDocument.getInitialProps = ({ renderPage }) => {
86-
const pageContext = getContext();
87-
const page = renderPage(Component => props => (
88-
<JssProvider
89-
registry={pageContext.sheetsRegistry}
90-
generateClassName={pageContext.generateClassName}
91-
>
92-
<Component pageContext={pageContext} {...props} />
93-
</JssProvider>
94-
));
79+
MyDocument.getInitialProps = async (ctx) => {
80+
// Resolution order
81+
//
82+
// On the server:
83+
// 1. app.getInitialProps
84+
// 2. page.getInitialProps
85+
// 3. document.getInitialProps
86+
// 4. app.render
87+
// 5. page.render
88+
// 6. document.render
89+
//
90+
// On the server with error:
91+
// 1. document.getInitialProps
92+
// 2. app.render
93+
// 3. page.render
94+
// 4. document.render
95+
//
96+
// On the client
97+
// 1. app.getInitialProps
98+
// 2. page.getInitialProps
99+
// 3. app.render
100+
// 4. page.render
101+
102+
// Render app and page and get the context of the page with collected side effects.
103+
const sheets = new ServerStyleSheets();
104+
const originalRenderPage = ctx.renderPage;
105+
106+
ctx.renderPage = () =>
107+
originalRenderPage({
108+
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
109+
});
110+
111+
const initialProps = await Document.getInitialProps(ctx);
95112

96113
return {
97-
...page,
98-
pageContext,
114+
...initialProps,
115+
// Styles fragment is rendered after the app and page rendering finish.
99116
styles: (
100-
<style
101-
id="jss-server-side"
102-
// eslint-disable-next-line
103-
dangerouslySetInnerHTML={{
104-
__html: pageContext.sheetsRegistry.toString(),
105-
}}
106-
/>
117+
<React.Fragment>
118+
{initialProps.styles}
119+
{sheets.getStyleElement()}
120+
</React.Fragment>
107121
),
108122
};
109123
};

‎book/1-end/pages/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Head from 'next/head';
22
import Button from '@material-ui/core/Button';
3-
import withLayout from '../lib/withLayout';
43

54
const Index = () => (
65
<div style={{ padding: '10px 45px' }}>
@@ -13,4 +12,4 @@ const Index = () => (
1312
</div>
1413
);
1514

16-
export default withLayout(Index);
15+
export default Index;

0 commit comments

Comments
 (0)