[docs] Document NoSsr (#12317)

docs/src/modules/components/HomeBackers.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import NoSSR from '@material-ui/core/NoSSR';
+import NoSsr from '@material-ui/core/NoSsr';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
 
 const styles = theme => ({
@@ -21,7 +21,7 @@ function HomeBackers(props) {
 
   return (
     <div className={classes.root}>
-      <NoSSR>
+      <NoSsr>
         <MarkdownElement
           className={classes.markdownElement}
           text={`
@@ -84,7 +84,7 @@ ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
             .join('')}
 `}
         />
-      </NoSSR>
+      </NoSsr>
     </div>
   );
 }

docs/src/modules/components/HomeSteps.js

@@ -10,7 +10,7 @@ import FileDownloadIcon from '@material-ui/docs/svgIcons/FileDownload';
 import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved
 import WhatshotIcon from '@material-ui/icons/Whatshot';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
-import NoSSR from '@material-ui/core/NoSSR';
+import NoSsr from '@material-ui/core/NoSsr';
 import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
@@ -181,9 +181,9 @@ function HomeSteps(props) {
               our official marketplace—all built on Material-UI.`}
           </Typography>
           <Link prefetch href="/premium-themes" className={classes.link}>
-            <NoSSR>
+            <NoSsr>
               <img className={classes.img} alt="themes" src="/static/images/themes.jpg" />
-            </NoSSR>
+            </NoSsr>
           </Link>
         </div>
         <Divider className={classes.divider} />

docs/src/modules/components/withRoot.js

@@ -101,6 +101,10 @@ const pages = [
       {
         pathname: '/utils/portal',
       },
+      {
+        pathname: '/utils/no-ssr',
+        title: 'No SSR',
+      },
       {
         pathname: '/utils/click-away-listener',
       },

docs/src/pages/demos/autocomplete/IntegrationReactSelect.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import Select from 'react-select';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import NoSSR from '@material-ui/core/NoSSR';
+import NoSsr from '@material-ui/core/NoSsr';
 import TextField from '@material-ui/core/TextField';
 import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -205,7 +205,7 @@ class IntegrationReactSelect extends React.Component {
 
     return (
       <div className={classes.root}>
-        <NoSSR>
+        <NoSsr>
           <Select
             classes={classes}
             options={suggestions}
@@ -223,7 +223,7 @@ class IntegrationReactSelect extends React.Component {
             placeholder="Select multiple countries"
             isMulti
           />
-        </NoSSR>
+        </NoSsr>
       </div>
     );
   }

docs/src/pages/utils/no-ssr/SimpleNoSsr.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import NoSsr from '@material-ui/core/NoSsr';
+import Button from '@material-ui/core/Button';
+
+const styles = theme => ({
+  button: {
+    display: 'block',
+    margin: theme.spacing.unit * 2,
+  },
+});
+
+function SimpleNoSsr(props) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Button className={classes.button} variant="contained" color="primary">
+        Server & Client
+      </Button>
+      <NoSsr>
+        <Button className={classes.button} variant="contained" color="secondary">
+          Client only
+        </Button>
+      </NoSsr>
+    </div>
+  );
+}
+
+SimpleNoSsr.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleNoSsr);

docs/src/pages/utils/no-ssr/no-ssr.md

@@ -0,0 +1,16 @@
+---
+title: No SSR React component
+components: NoSsr
+---
+
+# No SSR
+
+<p class="description">NoSsr purposely removes components from the subject of Server Side Rendering (SSR).</p>
+
+This component can be useful in a variety of situations:
+- Escape hatch for broken dependencies not supporting SSR.
+- Improve the time-to-first paint on the client by only rendering above the fold.
+- Reduce the rendering time on the server.
+- Under too heavy server load, you can turn on service degradation.
+
+{{"demo": "pages/utils/no-ssr/SimpleNoSsr.js"}}

packages/material-ui/src/NoSsr/NoSsr.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface NoSsrProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+declare const NoSsr: React.ComponentType<NoSsrProps>;
+
+export default NoSsr;

packages/material-ui/src/NoSSR/NoSSR.js → packages/material-ui/src/NoSsr/NoSsr.js

@@ -5,14 +5,15 @@ import exactProp from '../utils/exactProp';
 const Fallback = () => null;
 
 /**
- * Only render the component on the client.
- * It can be useful in a variety of situations:
- * - Reduce the rendering time on the server.
- * - Under too heavy server load, you can apply service degradation.
- * - Improve the time-to-first paint on the client by only rendering above the fold.
+ * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+ *
+ * This component can be useful in a variety of situations:
  * - Escape hatch for broken dependencies not supporting SSR.
+ * - Improve the time-to-first paint on the client by only rendering above the fold.
+ * - Reduce the rendering time on the server.
+ * - Under too heavy server load, you can turn on service degradation.
  */
-class NoSSR extends React.Component {
+class NoSsr extends React.Component {
   state = {
     mounted: false,
   };
@@ -28,15 +29,15 @@ class NoSSR extends React.Component {
   }
 }
 
-NoSSR.propTypes = {
+NoSsr.propTypes = {
   children: PropTypes.node.isRequired,
   fallback: PropTypes.node,
 };
 
-NoSSR.propTypes = exactProp(NoSSR.propTypes);
+NoSsr.propTypes = exactProp(NoSsr.propTypes);
 
-NoSSR.defaultProps = {
+NoSsr.defaultProps = {
   fallback: <Fallback />,
 };
 
-export default NoSSR;
+export default NoSsr;

packages/material-ui/src/NoSSR/NoSSR.test.js → packages/material-ui/src/NoSsr/NoSsr.test.js

@@ -3,9 +3,9 @@
 import React from 'react';
 import { assert } from 'chai';
 import { createMount, createShallow } from '../test-utils';
-import NoSSR from './NoSSR';
+import NoSsr from './NoSsr';
 
-describe('<NoSSR />', () => {
+describe('<NoSsr />', () => {
   let mount;
   let shallow;
 
@@ -21,9 +21,9 @@ describe('<NoSSR />', () => {
   describe('server side rendering', () => {
     it('should not render the children as the width is unknown', () => {
       const wrapper = shallow(
-        <NoSSR>
+        <NoSsr>
           <span>Hello</span>
-        </NoSSR>,
+        </NoSsr>,
       );
       assert.strictEqual(wrapper.name(), 'Fallback');
     });
@@ -32,9 +32,9 @@ describe('<NoSSR />', () => {
   describe('mounted', () => {
     it('should render the children', () => {
       const wrapper = mount(
-        <NoSSR>
+        <NoSsr>
           <span>Hello</span>
-        </NoSSR>,
+        </NoSsr>,
       );
       assert.strictEqual(wrapper.find('span').length, 1);
     });
@@ -43,9 +43,9 @@ describe('<NoSSR />', () => {
   describe('prop: fallback', () => {
     it('should render the fallback', () => {
       const wrapper = shallow(
-        <NoSSR fallback="fallback">
+        <NoSsr fallback="fallback">
           <span>Hello</span>
-        </NoSSR>,
+        </NoSsr>,
       );
       assert.strictEqual(wrapper.text(), 'fallback');
     });

packages/material-ui/src/NoSsr/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './NoSsr';
+export * from './NoSsr';

packages/material-ui/src/NoSsr/index.js

@@ -0,0 +1 @@
+export { default } from './NoSsr';

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js

@@ -8,7 +8,7 @@ import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import { duration } from '../styles/transitions';
 import withTheme from '../styles/withTheme';
 import { getTransitionProps } from '../transitions/utils';
-import NoSSR from '../NoSSR';
+import NoSsr from '../NoSsr';
 import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
@@ -373,9 +373,9 @@ class SwipeableDrawer extends React.Component {
         {!disableDiscovery &&
           !disableSwipeToOpen &&
           variant === 'temporary' && (
-            <NoSSR>
+            <NoSsr>
               <SwipeArea anchor={anchor} width={swipeAreaWidth} />
-            </NoSSR>
+            </NoSsr>
           )}
       </React.Fragment>
     );

packages/material-ui/src/index.d.ts

@@ -141,7 +141,7 @@ export { default as MenuList } from './MenuList';
 export { default as MobileStepper } from './MobileStepper';
 export { default as Modal, ModalManager } from './Modal';
 export { default as NativeSelect } from './NativeSelect';
-export { default as NoSSR } from './NoSSR';
+export { default as NoSsr } from './NoSsr';
 export { default as Paper } from './Paper';
 export { default as Popover } from './Popover';
 export { default as Popper } from './Popper';

packages/material-ui/src/index.js

@@ -74,7 +74,7 @@ export { default as MenuList } from './MenuList';
 export { default as MobileStepper } from './MobileStepper';
 export { default as Modal, ModalManager } from './Modal';
 export { default as NativeSelect } from './NativeSelect';
-export { default as NoSSR } from './NoSSR';
+export { default as NoSsr } from './NoSsr';
 export { default as Paper } from './Paper';
 export { default as Popover } from './Popover';
 export { default as Popper } from './Popper';

pages/api/no-ssr.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './no-ssr.md';
+
+function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}
+
+export default withRoot(Page);

pages/api/no-ssr.md

@@ -0,0 +1,32 @@
+---
+filename: /packages/material-ui/src/NoSsr/NoSsr.js
+title: NoSsr API
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# NoSsr
+
+<p class="description">The API documentation of the NoSsr React component.</p>
+
+NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+
+This component can be useful in a variety of situations:
+- Escape hatch for broken dependencies not supporting SSR.
+- Improve the time-to-first paint on the client by only rendering above the fold.
+- Reduce the rendering time on the server.
+- Under too heavy server load, you can turn on service degradation.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |   |  |
+| <span class="prop-name">fallback</span> | <span class="prop-type">node | <span class="prop-default">&lt;Fallback /></span> |  |
+
+Any other properties supplied will be spread to the root element (native element).
+
+## Demos
+
+- [No Ssr](/utils/no-ssr)
+

pages/utils/no-ssr.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from 'docs/src/pages/utils/no-ssr/no-ssr.md';
+
+function Page() {
+  return (
+    <MarkdownDocs
+      markdown={markdown}
+      demos={{
+        'pages/utils/no-ssr/SimpleNoSsr.js': {
+          js: require('docs/src/pages/utils/no-ssr/SimpleNoSsr').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/utils/no-ssr/SimpleNoSsr'), 'utf8')
+`,
+        },
+      }}
+    />
+  );
+}
+
+export default withRoot(Page);