From eb520be67c86cd26624cc265c214685b3b3df20c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 28 Jul 2018 20:42:30 +0200
Subject: [PATCH] [docs] Document NoSsr

---
 docs/scripts/buildApi.js                      |  2 +-
 docs/src/modules/components/HomeBackers.js    |  6 ++--
 docs/src/modules/components/HomeSteps.js      |  6 ++--
 docs/src/modules/components/withRoot.js       |  4 +++
 .../autocomplete/IntegrationReactSelect.js    |  6 ++--
 docs/src/pages/utils/no-ssr/SimpleNoSsr.js    | 35 +++++++++++++++++++
 docs/src/pages/utils/no-ssr/no-ssr.md         | 16 +++++++++
 packages/material-ui/src/NoSSR/NoSSR.d.ts     | 10 ------
 packages/material-ui/src/NoSSR/index.d.ts     |  2 --
 packages/material-ui/src/NoSSR/index.js       |  1 -
 packages/material-ui/src/NoSsr/NoSsr.d.ts     | 10 ++++++
 .../src/{NoSSR/NoSSR.js => NoSsr/NoSsr.js}    | 21 +++++------
 .../NoSSR.test.js => NoSsr/NoSsr.test.js}     | 16 ++++-----
 packages/material-ui/src/NoSsr/index.d.ts     |  2 ++
 packages/material-ui/src/NoSsr/index.js       |  1 +
 .../src/SwipeableDrawer/SwipeableDrawer.js    |  6 ++--
 packages/material-ui/src/index.d.ts           |  2 +-
 packages/material-ui/src/index.js             |  2 +-
 pages/api/no-ssr.js                           | 10 ++++++
 pages/api/no-ssr.md                           | 32 +++++++++++++++++
 pages/utils/no-ssr.js                         | 23 ++++++++++++
 21 files changed, 167 insertions(+), 46 deletions(-)
 create mode 100644 docs/src/pages/utils/no-ssr/SimpleNoSsr.js
 create mode 100644 docs/src/pages/utils/no-ssr/no-ssr.md
 delete mode 100644 packages/material-ui/src/NoSSR/NoSSR.d.ts
 delete mode 100644 packages/material-ui/src/NoSSR/index.d.ts
 delete mode 100644 packages/material-ui/src/NoSSR/index.js
 create mode 100644 packages/material-ui/src/NoSsr/NoSsr.d.ts
 rename packages/material-ui/src/{NoSSR/NoSSR.js => NoSsr/NoSsr.js} (66%)
 rename packages/material-ui/src/{NoSSR/NoSSR.test.js => NoSsr/NoSsr.test.js} (84%)
 create mode 100644 packages/material-ui/src/NoSsr/index.d.ts
 create mode 100644 packages/material-ui/src/NoSsr/index.js
 create mode 100644 pages/api/no-ssr.js
 create mode 100644 pages/api/no-ssr.md
 create mode 100644 pages/utils/no-ssr.js

diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
index 4bd1bcdc397226..0ea69c2b6398a7 100644
--- a/docs/scripts/buildApi.js
+++ b/docs/scripts/buildApi.js
@@ -134,7 +134,7 @@ function buildDocs(options) {
   reactAPI.pagesMarkdown = pagesMarkdown;
   reactAPI.src = src;
 
-  // if (reactAPI.name !== 'Snackbar') {
+  // if (reactAPI.name !== 'NoSsr') {
   //   return;
   // }
 
diff --git a/docs/src/modules/components/HomeBackers.js b/docs/src/modules/components/HomeBackers.js
index 80efa19e29d7bb..bd8453ca2c4fa1 100644
--- a/docs/src/modules/components/HomeBackers.js
+++ b/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>
   );
 }
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index 729f3e08b38798..a8245e5a7cf62f 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/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} />
diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
index 71213506810190..6c31abcd444f3d 100644
--- a/docs/src/modules/components/withRoot.js
+++ b/docs/src/modules/components/withRoot.js
@@ -104,6 +104,10 @@ const pages = [
       {
         pathname: '/utils/click-away-listener',
       },
+      {
+        pathname: '/utils/no-ssr',
+        title: 'No SSR',
+      },
     ],
   },
   {
diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
index 341c377838aec8..a983450af4f749 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
+++ b/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>
     );
   }
diff --git a/docs/src/pages/utils/no-ssr/SimpleNoSsr.js b/docs/src/pages/utils/no-ssr/SimpleNoSsr.js
new file mode 100644
index 00000000000000..3fc6a056625d0c
--- /dev/null
+++ b/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);
diff --git a/docs/src/pages/utils/no-ssr/no-ssr.md b/docs/src/pages/utils/no-ssr/no-ssr.md
new file mode 100644
index 00000000000000..74b6c356234731
--- /dev/null
+++ b/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"}}
diff --git a/packages/material-ui/src/NoSSR/NoSSR.d.ts b/packages/material-ui/src/NoSSR/NoSSR.d.ts
deleted file mode 100644
index 38d95e59371b75..00000000000000
--- a/packages/material-ui/src/NoSSR/NoSSR.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-export interface NoSSRProps {
-  children: React.ReactNode;
-  fallback?: React.ReactNode;
-}
-
-declare const NoSSR: React.ComponentType<NoSSRProps>;
-
-export default NoSSR;
diff --git a/packages/material-ui/src/NoSSR/index.d.ts b/packages/material-ui/src/NoSSR/index.d.ts
deleted file mode 100644
index a3bf2aeec739cf..00000000000000
--- a/packages/material-ui/src/NoSSR/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './NoSSR';
-export * from './NoSSR';
diff --git a/packages/material-ui/src/NoSSR/index.js b/packages/material-ui/src/NoSSR/index.js
deleted file mode 100644
index e55ecae93705bc..00000000000000
--- a/packages/material-ui/src/NoSSR/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './NoSSR';
diff --git a/packages/material-ui/src/NoSsr/NoSsr.d.ts b/packages/material-ui/src/NoSsr/NoSsr.d.ts
new file mode 100644
index 00000000000000..3a3b297e81b277
--- /dev/null
+++ b/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;
diff --git a/packages/material-ui/src/NoSSR/NoSSR.js b/packages/material-ui/src/NoSsr/NoSsr.js
similarity index 66%
rename from packages/material-ui/src/NoSSR/NoSSR.js
rename to packages/material-ui/src/NoSsr/NoSsr.js
index aebfcf3a1e7a2a..dd33fe28e596e9 100644
--- a/packages/material-ui/src/NoSSR/NoSSR.js
+++ b/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;
diff --git a/packages/material-ui/src/NoSSR/NoSSR.test.js b/packages/material-ui/src/NoSsr/NoSsr.test.js
similarity index 84%
rename from packages/material-ui/src/NoSSR/NoSSR.test.js
rename to packages/material-ui/src/NoSsr/NoSsr.test.js
index 9b268044aa914f..54cb8ef08d412c 100644
--- a/packages/material-ui/src/NoSSR/NoSSR.test.js
+++ b/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');
     });
diff --git a/packages/material-ui/src/NoSsr/index.d.ts b/packages/material-ui/src/NoSsr/index.d.ts
new file mode 100644
index 00000000000000..5b96a9382c7079
--- /dev/null
+++ b/packages/material-ui/src/NoSsr/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './NoSsr';
+export * from './NoSsr';
diff --git a/packages/material-ui/src/NoSsr/index.js b/packages/material-ui/src/NoSsr/index.js
new file mode 100644
index 00000000000000..7f31330f820782
--- /dev/null
+++ b/packages/material-ui/src/NoSsr/index.js
@@ -0,0 +1 @@
+export { default } from './NoSsr';
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index b48221c0bbe114..696f97cd50657a 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/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>
     );
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index 62ff1111ee823d..f5f70f083d043e 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/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';
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 05ae92f3db928c..687a10a82cdd9d 100644
--- a/packages/material-ui/src/index.js
+++ b/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';
diff --git a/pages/api/no-ssr.js b/pages/api/no-ssr.js
new file mode 100644
index 00000000000000..6cadb5b0c966aa
--- /dev/null
+++ b/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);
diff --git a/pages/api/no-ssr.md b/pages/api/no-ssr.md
new file mode 100644
index 00000000000000..2302d79863db2a
--- /dev/null
+++ b/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)
+
diff --git a/pages/utils/no-ssr.js b/pages/utils/no-ssr.js
new file mode 100644
index 00000000000000..a61a4d467f288b
--- /dev/null
+++ b/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);