From 5d3fb197da4c79cf2ef1272c3c248dcbf2875bae Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 1 Jan 2018 16:37:58 +0100 Subject: [PATCH] [examples] Use Reboot (#9691) --- .flowconfig | 2 +- docs/src/modules/components/AppFrame.js | 2 - docs/src/modules/components/AppWrapper.js | 24 ++--- docs/src/modules/components/withRoot.js | 86 +++++++++--------- .../{getContext.js => getPageContext.js} | 8 +- docs/src/pages/customization/overrides.md | 6 +- .../create-react-app-with-flow/package.json | 5 +- .../src/components/withRoot.js | 59 ------------ .../create-react-app-with-flow/src/index.js | 8 +- .../src/pages/index.js | 11 +-- .../src/styles/createContext.js | 30 ------ .../src/withRoot.js | 35 +++++++ examples/create-react-app-with-jss/.gitignore | 23 +++++ examples/create-react-app-with-jss/README.md | 21 +++++ .../create-react-app-with-jss/package.json | 21 +++++ .../public/favicon.ico | Bin .../public/index.html | 42 +++++++++ .../public/manifest.json | 0 .../create-react-app-with-jss/src/index.js | 5 + .../src/pages/index.js | 73 +++++++++++++++ .../create-react-app-with-jss/src/withRoot.js | 46 ++++++++++ .../README.md | 2 +- .../package.json | 3 +- .../src/components/withRoot.tsx | 59 ------------ .../src/index.tsx | 4 +- .../src/pages/index.tsx | 12 +-- .../src/styles/createContext.ts | 29 ------ .../src/withRoot.tsx | 32 +++++++ examples/create-react-app/package.json | 3 +- examples/create-react-app/public/index.html | 32 +------ .../src/components/withRoot.js | 56 ------------ examples/create-react-app/src/index.js | 7 +- examples/create-react-app/src/pages/index.js | 15 +-- .../src/styles/createContext.js | 28 ------ examples/create-react-app/src/withRoot.js | 32 +++++++ examples/nextjs/components/withRoot.js | 62 ------------- examples/nextjs/pages/_document.js | 26 +++--- examples/nextjs/pages/index.js | 15 +-- .../getContext.js => src/getPageContext.js} | 24 +++-- examples/nextjs/src/withRoot.js | 53 +++++++++++ examples/nextjs/static/manifest.json | 8 -- pages/_document.js | 17 ++-- src/Reboot/Reboot.d.ts | 2 +- src/styles/transitions.spec.js | 16 ++-- 44 files changed, 528 insertions(+), 516 deletions(-) rename docs/src/modules/styles/{getContext.js => getPageContext.js} (89%) delete mode 100644 examples/create-react-app-with-flow/src/components/withRoot.js delete mode 100644 examples/create-react-app-with-flow/src/styles/createContext.js create mode 100644 examples/create-react-app-with-flow/src/withRoot.js create mode 100644 examples/create-react-app-with-jss/.gitignore create mode 100644 examples/create-react-app-with-jss/README.md create mode 100644 examples/create-react-app-with-jss/package.json rename examples/{create-react-app => create-react-app-with-jss}/public/favicon.ico (100%) create mode 100644 examples/create-react-app-with-jss/public/index.html rename examples/{create-react-app => create-react-app-with-jss}/public/manifest.json (100%) create mode 100644 examples/create-react-app-with-jss/src/index.js create mode 100644 examples/create-react-app-with-jss/src/pages/index.js create mode 100644 examples/create-react-app-with-jss/src/withRoot.js delete mode 100644 examples/create-react-app-with-typescript/src/components/withRoot.tsx delete mode 100644 examples/create-react-app-with-typescript/src/styles/createContext.ts create mode 100644 examples/create-react-app-with-typescript/src/withRoot.tsx delete mode 100644 examples/create-react-app/src/components/withRoot.js delete mode 100644 examples/create-react-app/src/styles/createContext.js create mode 100644 examples/create-react-app/src/withRoot.js delete mode 100644 examples/nextjs/components/withRoot.js rename examples/nextjs/{styles/getContext.js => src/getPageContext.js} (59%) create mode 100644 examples/nextjs/src/withRoot.js delete mode 100644 examples/nextjs/static/manifest.json diff --git a/.flowconfig b/.flowconfig index 776bcaf6e9755b..bffabaade87f0f 100644 --- a/.flowconfig +++ b/.flowconfig @@ -36,7 +36,7 @@ module.system.node.resolve_dirname=. suppress_type=$FlowFixMe suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe -suppress_comment= \\(.\\|\n\\)*\\$FlowExpectedError +suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore [lints] diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index e3b476c298b70b..202774fa5a7b3e 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -6,7 +6,6 @@ import NProgress from 'nprogress'; import Router from 'next/router'; import { withStyles } from 'material-ui/styles'; import Typography from 'material-ui/Typography'; -import Reboot from 'material-ui/Reboot'; import AppBar from 'material-ui/AppBar'; import Toolbar from 'material-ui/Toolbar'; import IconButton from 'material-ui/IconButton'; @@ -179,7 +178,6 @@ class AppFrame extends React.Component { return (
- + {children} @@ -88,7 +90,7 @@ class AppWrapper extends React.Component { AppWrapper.propTypes = { children: PropTypes.node.isRequired, - sheetsRegistry: PropTypes.object, + pageContext: PropTypes.object, uiTheme: PropTypes.object.isRequired, }; diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js index cbac6b23c0b78c..b7a1a2836b1471 100644 --- a/docs/src/modules/components/withRoot.js +++ b/docs/src/modules/components/withRoot.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import find from 'lodash/find'; import { Provider } from 'react-redux'; -import pure from 'recompose/pure'; import AppWrapper from 'docs/src/modules/components/AppWrapper'; import initRedux from 'docs/src/modules/redux/initRedux'; import findPages from /* preval */ 'docs/src/modules/utils/findPages'; @@ -205,47 +204,8 @@ function findActivePage(currentPages, url) { return activePage; } -function withRoot(BaseComponent) { - // Prevent rerendering - const PureBaseComponent = pure(BaseComponent); - - type WithRootProps = { - reduxServerState?: Object, - sheetsRegistry?: Object, - url: Object, - }; - - class WithRoot extends React.Component { - static childContextTypes = { - url: PropTypes.object, - pages: PropTypes.array, - activePage: PropTypes.object, - }; - - static getInitialProps(ctx) { - let initialProps = {}; - const redux = initRedux({}); - - if (BaseComponent.getInitialProps) { - const baseComponentInitialProps = BaseComponent.getInitialProps({ ...ctx, redux }); - initialProps = { - ...baseComponentInitialProps, - ...initialProps, - }; - } - - if (process.browser) { - return initialProps; - } - - return { - ...initialProps, - // No need to include other initial Redux state because when it - // initialises on the client-side it'll create it again anyway - reduxServerState: redux.getState(), - }; - } - +function withRoot(Component) { + class WithRoot extends React.Component { constructor(props, context) { super(props, context); this.redux = initRedux(this.props.reduxServerState || {}); @@ -262,18 +222,54 @@ function withRoot(BaseComponent) { redux = null; render() { - const { sheetsRegistry, ...other } = this.props; + const { pageContext, ...other } = this.props; return ( - - + + ); } } + WithRoot.propTypes = { + pageContext: PropTypes.object, + reduxServerState: PropTypes.object, + url: PropTypes.object, + }; + + WithRoot.childContextTypes = { + url: PropTypes.object, + pages: PropTypes.array, + activePage: PropTypes.object, + }; + + WithRoot.getInitialProps = ctx => { + let initialProps = {}; + const redux = initRedux({}); + + if (Component.getInitialProps) { + const componentInitialProps = Component.getInitialProps({ ...ctx, redux }); + initialProps = { + ...componentInitialProps, + ...initialProps, + }; + } + + if (process.browser) { + return initialProps; + } + + return { + ...initialProps, + // No need to include other initial Redux state because when it + // initialises on the client-side it'll create it again anyway + reduxServerState: redux.getState(), + }; + }; + return WithRoot; } diff --git a/docs/src/modules/styles/getContext.js b/docs/src/modules/styles/getPageContext.js similarity index 89% rename from docs/src/modules/styles/getContext.js rename to docs/src/modules/styles/getPageContext.js index 017eddfeaca0a7..9c9a986c81077f 100644 --- a/docs/src/modules/styles/getContext.js +++ b/docs/src/modules/styles/getPageContext.js @@ -27,7 +27,7 @@ const theme = getTheme({ const jss = create({ plugins: [...preset().plugins, rtl()] }); jss.options.insertionPoint = 'insertion-point-jss'; -function createContext() { +function createPageContext() { return { jss, theme, @@ -39,16 +39,16 @@ function createContext() { }; } -export default function getContext() { +export default function getPageContext() { // Make sure to create a new store for every server-side request so that data // isn't shared between connections (which would be bad) if (!process.browser) { - return createContext(); + return createPageContext(); } // Reuse context on the client-side if (!global.__INIT_MATERIAL_UI__) { - global.__INIT_MATERIAL_UI__ = createContext(); + global.__INIT_MATERIAL_UI__ = createPageContext(); } return global.__INIT_MATERIAL_UI__; diff --git a/docs/src/pages/customization/overrides.md b/docs/src/pages/customization/overrides.md index 481fbb4632b1ae..f95e318f300f58 100644 --- a/docs/src/pages/customization/overrides.md +++ b/docs/src/pages/customization/overrides.md @@ -72,6 +72,6 @@ In order to promote consistency and manage the user interface as a whole, Materi ### Customizing all instances of a component type -When the configuration variables aren't powerful enough, you can take advantage of the `overrides` key of the `theme` -to potentially change every single style injected by Material-UI into the DOM. Learn more about it in -the [themes](/customization/themes#customizing-all-instances-of-a-component-type)section of the documentation. +When the configuration variables aren't powerful enough, +you can take advantage of the `overrides` key of the `theme` to potentially change every single style injected by Material-UI into the DOM. +Learn more about it in the [themes](/customization/themes#customizing-all-instances-of-a-component-type) section of the documentation. diff --git a/examples/create-react-app-with-flow/package.json b/examples/create-react-app-with-flow/package.json index ef10a9e49309fc..2fac321c065d78 100644 --- a/examples/create-react-app-with-flow/package.json +++ b/examples/create-react-app-with-flow/package.json @@ -5,13 +5,12 @@ "dependencies": { "jss": "^9.0.0", "jss-preset-default": "^4.0.0", - "material-ui": "^1.0.0-beta.22", + "material-ui": "^1.0.0-beta.26", "prop-types": "^15.6.0", "react": "^16.0.0", "react-dom": "^16.0.0", "react-jss": "^8.2.0", - "react-scripts": "^1.0.16", - "recompose": "^0.26.0" + "react-scripts": "^1.0.16" }, "devDependencies": { "flow-bin": "^0.62.0" diff --git a/examples/create-react-app-with-flow/src/components/withRoot.js b/examples/create-react-app-with-flow/src/components/withRoot.js deleted file mode 100644 index 2e10dbd92925c0..00000000000000 --- a/examples/create-react-app-with-flow/src/components/withRoot.js +++ /dev/null @@ -1,59 +0,0 @@ -// @flow - -import React from 'react'; -import type { ComponentType } from 'react'; -import JssProvider from 'react-jss/lib/JssProvider'; -import { withStyles, MuiThemeProvider } from 'material-ui/styles'; -import createContext from '../styles/createContext'; - -// Apply some reset -const styles = theme => ({ - '@global': { - html: { - background: theme.palette.background.default, - WebkitFontSmoothing: 'antialiased', // Antialiasing. - MozOsxFontSmoothing: 'grayscale', // Antialiasing. - }, - body: { - margin: 0, - }, - }, -}); - -let AppWrapper = (props: Object) => props.children; - -AppWrapper = withStyles(styles)(AppWrapper); - -const context = createContext(); - -function withRoot(Component: ComponentType<*>) { - class WithRoot extends React.Component<{}> { - componentDidMount() { - // Remove the server-side injected CSS. - const jssStyles = document.querySelector('#jss-server-side'); - if (jssStyles && jssStyles.parentNode) { - jssStyles.parentNode.removeChild(jssStyles); - } - } - - render() { - return ( - - - - - - - - ); - } - } - - return WithRoot; -} - -export default withRoot; diff --git a/examples/create-react-app-with-flow/src/index.js b/examples/create-react-app-with-flow/src/index.js index a4f98850eacf00..cf357c6edd1a1a 100644 --- a/examples/create-react-app-with-flow/src/index.js +++ b/examples/create-react-app-with-flow/src/index.js @@ -1,10 +1,8 @@ // @flow import React from 'react'; -import { render } from 'react-dom'; +import ReactDOM from 'react-dom'; import Index from './pages/index'; -const rootElement = document.querySelector('#root'); -if (rootElement) { - render(, rootElement); -} +// $FlowIgnore - we don't want the missing dom element to be a silent error. +ReactDOM.render(, document.querySelector('#root')); diff --git a/examples/create-react-app-with-flow/src/pages/index.js b/examples/create-react-app-with-flow/src/pages/index.js index b8ccf3606526eb..b51b81188a0fbf 100644 --- a/examples/create-react-app-with-flow/src/pages/index.js +++ b/examples/create-react-app-with-flow/src/pages/index.js @@ -10,21 +10,20 @@ import Dialog, { } from 'material-ui/Dialog'; import Typography from 'material-ui/Typography'; import { withStyles } from 'material-ui/styles'; -import withRoot from '../components/withRoot'; +import withRoot from '../withRoot'; -const styles = { +const styles = (theme: Object) => ({ root: { textAlign: 'center', - paddingTop: 200, + paddingTop: theme.spacing.unit * 20, }, -}; +}); type ProvidedProps = { classes: Object, - theme?: Object, }; -export type Props = { +type Props = { classes: Object, }; diff --git a/examples/create-react-app-with-flow/src/styles/createContext.js b/examples/create-react-app-with-flow/src/styles/createContext.js deleted file mode 100644 index 933c8c251b0d03..00000000000000 --- a/examples/create-react-app-with-flow/src/styles/createContext.js +++ /dev/null @@ -1,30 +0,0 @@ -// @flow - -import { create, SheetsRegistry } from 'jss'; -import preset from 'jss-preset-default'; -import { createMuiTheme, createGenerateClassName } from 'material-ui/styles'; -import { purple, green } from 'material-ui/colors'; - -const theme = createMuiTheme({ - palette: { - primary: purple, - secondary: green, - }, -}); - -// Configure JSS -const jss = create(preset()); - -export const sheetsManager: Map<*, *> = new Map(); - -export default function createContext() { - return { - jss, - theme, - // This is needed in order to deduplicate the injection of CSS in the page. - sheetsManager, - // This is needed in order to inject the critical CSS. - sheetsRegistry: new SheetsRegistry(), - generateClassName: createGenerateClassName(), - }; -} diff --git a/examples/create-react-app-with-flow/src/withRoot.js b/examples/create-react-app-with-flow/src/withRoot.js new file mode 100644 index 00000000000000..b9b60505454ed0 --- /dev/null +++ b/examples/create-react-app-with-flow/src/withRoot.js @@ -0,0 +1,35 @@ +// @flow + +import React from 'react'; +import type { ComponentType } from 'react'; +import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; +import purple from 'material-ui/colors/purple'; +import green from 'material-ui/colors/green'; +import Reboot from 'material-ui/Reboot'; + +// A theme with custom primary and secondary color. +// It's optional. +const theme = createMuiTheme({ + palette: { + primary: purple, + secondary: green, + }, +}); + +function withRoot(Component: ComponentType<*>) { + function WithRoot(props: Object) { + // MuiThemeProvider makes the theme available down the React tree + // thanks to React context. + return ( + + {/* Reboot kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + ); + } + + return WithRoot; +} + +export default withRoot; diff --git a/examples/create-react-app-with-jss/.gitignore b/examples/create-react-app-with-jss/.gitignore new file mode 100644 index 00000000000000..1d25a2dee96ac3 --- /dev/null +++ b/examples/create-react-app-with-jss/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +yarn.lock diff --git a/examples/create-react-app-with-jss/README.md b/examples/create-react-app-with-jss/README.md new file mode 100644 index 00000000000000..dbfe32066e9abc --- /dev/null +++ b/examples/create-react-app-with-jss/README.md @@ -0,0 +1,21 @@ +# Create React App example with JSS + +## How to use + +Download the example [or clone the repo](https://github.com/mui-org/material-ui): + +```bash +curl https://codeload.github.com/mui-org/material-ui/tar.gz/v1-beta | tar -xz --strip=2 material-ui-1-beta/examples/create-react-app +cd create-react-app +``` + +Install it and run: + +```bash +npm install +npm run start +``` + +## The idea behind the example + +This example demonstrate how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [JSS](https://github.com/cssinjs/jss). diff --git a/examples/create-react-app-with-jss/package.json b/examples/create-react-app-with-jss/package.json new file mode 100644 index 00000000000000..61c19e632f2132 --- /dev/null +++ b/examples/create-react-app-with-jss/package.json @@ -0,0 +1,21 @@ +{ + "name": "create-react-app-with-jss", + "version": "1.0.0", + "private": true, + "dependencies": { + "jss": "latest", + "jss-preset-default": "latest", + "material-ui": "next", + "prop-types": "latest", + "react": "latest", + "react-dom": "latest", + "react-jss": "latest", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/examples/create-react-app/public/favicon.ico b/examples/create-react-app-with-jss/public/favicon.ico similarity index 100% rename from examples/create-react-app/public/favicon.ico rename to examples/create-react-app-with-jss/public/favicon.ico diff --git a/examples/create-react-app-with-jss/public/index.html b/examples/create-react-app-with-jss/public/index.html new file mode 100644 index 00000000000000..2d453ea84a6a78 --- /dev/null +++ b/examples/create-react-app-with-jss/public/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + My page + + + + +
+ + + diff --git a/examples/create-react-app/public/manifest.json b/examples/create-react-app-with-jss/public/manifest.json similarity index 100% rename from examples/create-react-app/public/manifest.json rename to examples/create-react-app-with-jss/public/manifest.json diff --git a/examples/create-react-app-with-jss/src/index.js b/examples/create-react-app-with-jss/src/index.js new file mode 100644 index 00000000000000..b5a86ae99bd010 --- /dev/null +++ b/examples/create-react-app-with-jss/src/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Index from './pages/index'; + +ReactDOM.render(, document.querySelector('#root')); diff --git a/examples/create-react-app-with-jss/src/pages/index.js b/examples/create-react-app-with-jss/src/pages/index.js new file mode 100644 index 00000000000000..cb6a3bdea7b786 --- /dev/null +++ b/examples/create-react-app-with-jss/src/pages/index.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Button from 'material-ui/Button'; +import Dialog, { + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, +} from 'material-ui/Dialog'; +import Typography from 'material-ui/Typography'; +import { withStyles } from 'material-ui/styles'; +import withRoot from '../withRoot'; + +const styles = theme => ({ + root: { + textAlign: 'center', + paddingTop: theme.spacing.unit * 20, + }, +}); + +class Index extends React.Component { + state = { + open: false, + }; + + handleClose = () => { + this.setState({ + open: false, + }); + }; + + handleClick = () => { + this.setState({ + open: true, + }); + }; + + render() { + const { classes } = this.props; + const { open } = this.state; + + return ( +
+ + Super Secret Password + + 1-2-3-4-5 + + + + + + + Material-UI + + + example project + + +
+ ); + } +} + +Index.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withRoot(withStyles(styles)(Index)); diff --git a/examples/create-react-app-with-jss/src/withRoot.js b/examples/create-react-app-with-jss/src/withRoot.js new file mode 100644 index 00000000000000..9e308a895bbddf --- /dev/null +++ b/examples/create-react-app-with-jss/src/withRoot.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { create } from 'jss'; +import preset from 'jss-preset-default'; +import JssProvider from 'react-jss/lib/JssProvider'; +import { MuiThemeProvider, createMuiTheme, createGenerateClassName } from 'material-ui/styles'; +import purple from 'material-ui/colors/purple'; +import green from 'material-ui/colors/green'; +import Reboot from 'material-ui/Reboot'; + +// A theme with custom primary and secondary color. +// It's optional. +const theme = createMuiTheme({ + palette: { + primary: purple, + secondary: green, + }, +}); + +// Create a JSS instance with the default preset of plugins. +// It's optional. +const jss = create(preset()); + +// The standard class name generator. +// It's optional. +const generateClassName = createGenerateClassName(); + +function withRoot(Component) { + function WithRoot(props) { + // JssProvider allows customizing the JSS styling solution. + return ( + + {/* MuiThemeProvider makes the theme available down the React tree + thanks to React context. */} + + {/* Reboot kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + + ); + } + + return WithRoot; +} + +export default withRoot; diff --git a/examples/create-react-app-with-typescript/README.md b/examples/create-react-app-with-typescript/README.md index 95ed1c6e40c255..3111f44af9749c 100644 --- a/examples/create-react-app-with-typescript/README.md +++ b/examples/create-react-app-with-typescript/README.md @@ -17,4 +17,4 @@ yarn start ## The idea behind the example -This example demonstrate how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [TypeScript](https://www.typescriptlang.org/). +This example demonstrate how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [TypeScript](https://github.com/Microsoft/TypeScript). diff --git a/examples/create-react-app-with-typescript/package.json b/examples/create-react-app-with-typescript/package.json index 17fa87f2ee1cf9..0d18ca7c13340b 100644 --- a/examples/create-react-app-with-typescript/package.json +++ b/examples/create-react-app-with-typescript/package.json @@ -12,8 +12,7 @@ "@types/jest": "latest", "@types/node": "latest", "@types/react": "latest", - "@types/react-dom": "latest", - "@types/recompose": "latest" + "@types/react-dom": "latest" }, "scripts": { "start": "react-scripts-ts start", diff --git a/examples/create-react-app-with-typescript/src/components/withRoot.tsx b/examples/create-react-app-with-typescript/src/components/withRoot.tsx deleted file mode 100644 index fac04f7200bf2f..00000000000000 --- a/examples/create-react-app-with-typescript/src/components/withRoot.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import JssProvider from 'react-jss/lib/JssProvider'; -import { withStyles, MuiThemeProvider } from 'material-ui/styles'; -import { wrapDisplayName } from 'recompose'; -import createContext from '../styles/createContext'; - -// Apply some reset -const decorate = withStyles(theme => ({ - '@global': { - html: { - background: theme.palette.background.default, - WebkitFontSmoothing: 'antialiased', // Antialiasing. - MozOsxFontSmoothing: 'grayscale', // Antialiasing. - }, - body: { - margin: 0, - }, - }, -})); - -const AppWrapper = decorate<{ children: JSX.Element }>(props => props.children); - -const context = createContext(); - -function withRoot(BaseComponent: React.ComponentType) { - class WithRoot extends React.Component { - componentDidMount() { - // Remove the server-side injected CSS. - const jssStyles = document.querySelector('#jss-server-side'); - if (jssStyles && jssStyles.parentNode) { - jssStyles.parentNode.removeChild(jssStyles); - } - } - - render() { - return ( - - - - - - - - ); - } - } - - if (process.env.NODE_ENV !== 'production') { - (WithRoot as any).displayName = wrapDisplayName(BaseComponent, 'withRoot'); - } - - return WithRoot; -} - -export default withRoot; diff --git a/examples/create-react-app-with-typescript/src/index.tsx b/examples/create-react-app-with-typescript/src/index.tsx index bc73058296748b..08c28e703918b5 100644 --- a/examples/create-react-app-with-typescript/src/index.tsx +++ b/examples/create-react-app-with-typescript/src/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { render } from 'react-dom'; +import * as ReactDOM from 'react-dom'; import Index from './pages/index'; -render(, document.querySelector('#root')); +ReactDOM.render(, document.querySelector('#root')); diff --git a/examples/create-react-app-with-typescript/src/pages/index.tsx b/examples/create-react-app-with-typescript/src/pages/index.tsx index afa85e353ed2cc..c388f803d001a5 100644 --- a/examples/create-react-app-with-typescript/src/pages/index.tsx +++ b/examples/create-react-app-with-typescript/src/pages/index.tsx @@ -7,21 +7,21 @@ import Dialog, { DialogActions, } from 'material-ui/Dialog'; import Typography from 'material-ui/Typography'; -import withStyles, { WithStyles } from 'material-ui/styles/withStyles'; -import withRoot from '../components/withRoot'; +import withStyles, { WithStyles, StyleRulesCallback } from 'material-ui/styles/withStyles'; +import withRoot from '../withRoot'; -const styles = { +const styles: StyleRulesCallback<'root'> = theme => ({ root: { textAlign: 'center', - paddingTop: 200, + paddingTop: theme.spacing.unit * 20, }, -}; +}); type State = { open: boolean, }; -class Index extends React.Component, State> { +class Index extends React.Component, State> { state = { open: false, }; diff --git a/examples/create-react-app-with-typescript/src/styles/createContext.ts b/examples/create-react-app-with-typescript/src/styles/createContext.ts deleted file mode 100644 index 4b97d3e0ee8d87..00000000000000 --- a/examples/create-react-app-with-typescript/src/styles/createContext.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { create, SheetsRegistry } from 'jss'; -import preset from 'jss-preset-default'; -import { createMuiTheme, createGenerateClassName } from 'material-ui/styles'; -import { purple, green } from 'material-ui/colors'; - -const theme = createMuiTheme({ - palette: { - primary: purple, - secondary: green, - }, -}); - -// Configure JSS -const jss = create(preset()); -jss.options.createGenerateClassName = createGenerateClassName; - -export const sheetsManager = new Map(); - -export default function createContext() { - return { - jss, - theme, - // This is needed in order to deduplicate the injection of CSS in the page. - sheetsManager, - // This is needed in order to inject the critical CSS. - sheetsRegistry: new SheetsRegistry(), - generateClassName: createGenerateClassName(), - }; -} diff --git a/examples/create-react-app-with-typescript/src/withRoot.tsx b/examples/create-react-app-with-typescript/src/withRoot.tsx new file mode 100644 index 00000000000000..ef2a7c9be84b09 --- /dev/null +++ b/examples/create-react-app-with-typescript/src/withRoot.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; +import purple from 'material-ui/colors/purple'; +import green from 'material-ui/colors/green'; +import Reboot from 'material-ui/Reboot'; + +// A theme with custom primary and secondary color. +// It's optional. +const theme = createMuiTheme({ + palette: { + primary: purple, + secondary: green, + }, +}); + +function withRoot(Component: React.ComponentType) { + function WithRoot(props: object) { + // MuiThemeProvider makes the theme available down the React tree + // thanks to React context. + return ( + + {/* Reboot kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + ); + } + + return WithRoot; +} + +export default withRoot; diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json index 213524d6d85a7d..8ad9bc4dfaef70 100644 --- a/examples/create-react-app/package.json +++ b/examples/create-react-app/package.json @@ -10,8 +10,7 @@ "react": "latest", "react-dom": "latest", "react-jss": "latest", - "react-scripts": "latest", - "recompose": "latest" + "react-scripts": "latest" }, "scripts": { "start": "react-scripts start", diff --git a/examples/create-react-app/public/index.html b/examples/create-react-app/public/index.html index 2d453ea84a6a78..e6529f24b7694c 100644 --- a/examples/create-react-app/public/index.html +++ b/examples/create-react-app/public/index.html @@ -1,42 +1,14 @@ - + - - - - My page + - -
- diff --git a/examples/create-react-app/src/components/withRoot.js b/examples/create-react-app/src/components/withRoot.js deleted file mode 100644 index 4e8db04ea8e914..00000000000000 --- a/examples/create-react-app/src/components/withRoot.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import JssProvider from 'react-jss/lib/JssProvider'; -import { withStyles, MuiThemeProvider } from 'material-ui/styles'; -import createContext from '../styles/createContext'; - -// Apply some reset -const styles = theme => ({ - '@global': { - html: { - background: theme.palette.background.default, - WebkitFontSmoothing: 'antialiased', // Antialiasing. - MozOsxFontSmoothing: 'grayscale', // Antialiasing. - }, - body: { - margin: 0, - }, - }, -}); - -let AppWrapper = props => props.children; - -AppWrapper = withStyles(styles)(AppWrapper); - -const context = createContext(); - -function withRoot(Component) { - class WithRoot extends React.Component { - componentDidMount() { - // Remove the server-side injected CSS. - const jssStyles = document.querySelector('#jss-server-side'); - if (jssStyles && jssStyles.parentNode) { - jssStyles.parentNode.removeChild(jssStyles); - } - } - - render() { - return ( - - - - - - - - ); - } - } - - return WithRoot; -} - -export default withRoot; diff --git a/examples/create-react-app/src/index.js b/examples/create-react-app/src/index.js index cad2a92c66e209..b5a86ae99bd010 100644 --- a/examples/create-react-app/src/index.js +++ b/examples/create-react-app/src/index.js @@ -1,8 +1,5 @@ import React from 'react'; -import { render } from 'react-dom'; +import ReactDOM from 'react-dom'; import Index from './pages/index'; -const rootElement = document.querySelector('#root'); -if (rootElement) { - render(, rootElement); -} +ReactDOM.render(, document.querySelector('#root')); diff --git a/examples/create-react-app/src/pages/index.js b/examples/create-react-app/src/pages/index.js index bc272866240d5e..cb6a3bdea7b786 100644 --- a/examples/create-react-app/src/pages/index.js +++ b/examples/create-react-app/src/pages/index.js @@ -9,14 +9,14 @@ import Dialog, { } from 'material-ui/Dialog'; import Typography from 'material-ui/Typography'; import { withStyles } from 'material-ui/styles'; -import withRoot from '../components/withRoot'; +import withRoot from '../withRoot'; -const styles = { +const styles = theme => ({ root: { textAlign: 'center', - paddingTop: 200, + paddingTop: theme.spacing.unit * 20, }, -}; +}); class Index extends React.Component { state = { @@ -36,9 +36,12 @@ class Index extends React.Component { }; render() { + const { classes } = this.props; + const { open } = this.state; + return ( -
- +
+ Super Secret Password 1-2-3-4-5 diff --git a/examples/create-react-app/src/styles/createContext.js b/examples/create-react-app/src/styles/createContext.js deleted file mode 100644 index 99b9f112cde850..00000000000000 --- a/examples/create-react-app/src/styles/createContext.js +++ /dev/null @@ -1,28 +0,0 @@ -import { create, SheetsRegistry } from 'jss'; -import preset from 'jss-preset-default'; -import { createMuiTheme, createGenerateClassName } from 'material-ui/styles'; -import { purple, green } from 'material-ui/colors'; - -const theme = createMuiTheme({ - palette: { - primary: purple, - secondary: green, - }, -}); - -// Configure JSS -const jss = create(preset()); - -export const sheetsManager = new Map(); - -export default function createContext() { - return { - jss, - theme, - // This is needed in order to deduplicate the injection of CSS in the page. - sheetsManager, - // This is needed in order to inject the critical CSS. - sheetsRegistry: new SheetsRegistry(), - generateClassName: createGenerateClassName(), - }; -} diff --git a/examples/create-react-app/src/withRoot.js b/examples/create-react-app/src/withRoot.js new file mode 100644 index 00000000000000..de3f584f050eb0 --- /dev/null +++ b/examples/create-react-app/src/withRoot.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; +import purple from 'material-ui/colors/purple'; +import green from 'material-ui/colors/green'; +import Reboot from 'material-ui/Reboot'; + +// A theme with custom primary and secondary color. +// It's optional. +const theme = createMuiTheme({ + palette: { + primary: purple, + secondary: green, + }, +}); + +function withRoot(Component) { + function WithRoot(props) { + // MuiThemeProvider makes the theme available down the React tree + // thanks to React context. + return ( + + {/* Reboot kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + ); + } + + return WithRoot; +} + +export default withRoot; diff --git a/examples/nextjs/components/withRoot.js b/examples/nextjs/components/withRoot.js deleted file mode 100644 index 7735df12231ce8..00000000000000 --- a/examples/nextjs/components/withRoot.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import { withStyles, MuiThemeProvider } from 'material-ui/styles'; -import getContext from '../styles/getContext'; - -// Apply some reset -const styles = theme => ({ - '@global': { - html: { - background: theme.palette.background.default, - WebkitFontSmoothing: 'antialiased', // Antialiasing. - MozOsxFontSmoothing: 'grayscale', // Antialiasing. - }, - body: { - margin: 0, - }, - }, -}); - -let AppWrapper = props => props.children; - -AppWrapper = withStyles(styles)(AppWrapper); - -function withRoot(Component) { - class WithRoot extends React.Component { - static getInitialProps(ctx) { - if (Component.getInitialProps) { - return Component.getInitialProps(ctx); - } - - return {}; - } - - componentWillMount() { - this.styleContext = getContext(); - } - - componentDidMount() { - // Remove the server-side injected CSS. - const jssStyles = document.querySelector('#jss-server-side'); - if (jssStyles && jssStyles.parentNode) { - jssStyles.parentNode.removeChild(jssStyles); - } - } - - render() { - return ( - - - - - - ); - } - } - - return WithRoot; -} - -export default withRoot; diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js index b5eb7f00132f19..a7068f449775b8 100644 --- a/examples/nextjs/pages/_document.js +++ b/examples/nextjs/pages/_document.js @@ -1,10 +1,12 @@ import React from 'react'; import Document, { Head, Main, NextScript } from 'next/document'; import JssProvider from 'react-jss/lib/JssProvider'; -import getContext from '../styles/getContext'; +import getPageContext from '../src/getPageContext'; class MyDocument extends Document { render() { + const { pageContext } = this.props; + return ( @@ -18,13 +20,8 @@ class MyDocument extends Document { 'minimum-scale=1, width=device-width, height=device-height' } /> - {/* - manifest.json provides metadata used when your web app is added to the - homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ - */} - {/* PWA primary color */} - + { // 1. page.getInitialProps // 3. page.render - // Get the context to collected side effects. - const context = getContext(); + // Get the context of the page to collected side effects. + const pageContext = getPageContext(); const page = ctx.renderPage(Component => props => ( - + )); return { ...page, - stylesContext: context, + pageContext, styles: (