[docs] Improve the performance

docs/src/modules/components/Ad.js

@@ -11,7 +11,7 @@ const styles = theme => ({
   root: {
     position: 'relative',
     minHeight: 116,
-    maxWidth: 350,
+    maxWidth: 345,
     display: 'block',
     marginTop: theme.spacing.unit * 4,
     marginBottom: theme.spacing.unit * 3,

docs/src/modules/components/AppWrapper.js

@@ -6,11 +6,11 @@ import { connect } from 'react-redux';
 import url from 'url';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import { StylesProvider } from '@material-ui/styles';
+import acceptLanguage from 'accept-language';
 import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism';
 import { updatePageContext } from 'docs/src/modules/styles/getPageContext';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES } from 'docs/src/modules/constants';
-import acceptLanguage from 'accept-language';
 
 // Inject the insertion-point-jss after docssearch
 if (process.browser && !global.__INSERTION_POINT__) {
@@ -35,11 +35,14 @@ class SideEffectsRaw extends React.Component {
     acceptLanguage.languages(['en', 'pt', 'zh']);
     const URL = url.parse(document.location.href, true);
     const userLanguage = acceptLanguage.get(
-      URL.query.lang || getCookie('lang') || navigator.language || 'en',
+      URL.query.lang || getCookie('lang') || navigator.language,
     );
     const codeVariant = getCookie('codeVariant');
 
-    if (options.userLanguage !== userLanguage || options.codeVariant !== codeVariant) {
+    if (
+      (userLanguage && options.userLanguage !== userLanguage) ||
+      (codeVariant && options.codeVariant !== codeVariant)
+    ) {
       this.props.dispatch({
         type: ACTION_TYPES.OPTIONS_CHANGE,
         payload: {
@@ -136,7 +139,10 @@ class AppWrapper extends React.Component {
     const paletteType = getCookie('paletteType');
     const paletteColors = getCookie('paletteColors');
 
-    if (reduxTheme.paletteType !== paletteType || reduxTheme.paletteColors !== paletteColors) {
+    if (
+      (paletteType && reduxTheme.paletteType !== paletteType) ||
+      (paletteColors && JSON.stringify(reduxTheme.paletteColors) !== paletteColors)
+    ) {
       this.props.dispatch({
         type: ACTION_TYPES.THEME_CHANGE,
         payload: {

docs/src/modules/components/Carbon.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
+import loadScript from 'docs/src/modules/utils/loadScript';
 
 const styles = theme => ({
   '@global': {
@@ -42,11 +43,11 @@ class Carbon extends React.Component {
       return;
     }
 
-    const script = document.createElement('script');
-    script.setAttribute('async', '');
-    script.src = 'https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom';
+    const script = loadScript(
+      'https://cdn.carbonads.com/carbon.js?serve=CKYIL27L&placement=material-uicom',
+      scriptSlot,
+    );
     script.id = '_carbonads_js';
-    scriptSlot.appendChild(script);
   }
 
   render() {

docs/src/modules/components/CodeFund.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
+import loadScript from 'docs/src/modules/utils/loadScript';
 
 const styles = theme => ({
   '@global': {
@@ -45,10 +46,7 @@ class CodeFund extends React.Component {
       return;
     }
 
-    const script = document.createElement('script');
-    script.setAttribute('async', '');
-    script.src = 'https://codefund.io/properties/137/funder.js?theme=unstyled';
-    scriptSlot.appendChild(script);
+    loadScript('https://codefund.io/properties/137/funder.js?theme=unstyled', scriptSlot);
   }
 
   render() {

docs/src/modules/utils/loadScript.js

@@ -0,0 +1,8 @@
+export default function loadScript(src, position) {
+  const script = document.createElement('script');
+  script.setAttribute('async', '');
+  script.src = src;
+  position.appendChild(script);
+
+  return script;
+}

packages/material-ui-benchmark/README.md

@@ -15,6 +15,17 @@ ButtonBase disable ripple x 61,748 ops/sec ±0.35% (190 runs sampled)
 Markdown x 954 ops/sec ±1.35% (187 runs sampled)
 ```
 
+## `@material-ui/docs`
+
+*Synthetic benchmark*
+
+```sh
+yarn docs
+
+Markdown x 946 ops/sec ±4.04% (176 runs sampled)
+MarkdownElement x 3,941 ops/sec ±5.53% (185 runs sampled)
+```
+
 ## `@material-ui/styles`
 
 *Synthetic benchmark*

packages/material-ui-benchmark/package.json

@@ -12,11 +12,12 @@
   },
   "homepage": "https://github.com/mui-org/material-ui/tree/master/packages/material-ui-benchmark",
   "scripts": {
-    "test": "exit 0",
     "core": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/core.js --inspect=0.0.0.0:9229",
+    "docs": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/docs.js --inspect=0.0.0.0:9229",
+    "server": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/server.js --inspect=0.0.0.0:9229",
     "styles": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/styles.js --inspect=0.0.0.0:9229",
     "system": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/system.js --inspect=0.0.0.0:9229",
-    "server": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/server.js --inspect=0.0.0.0:9229"
+    "test": "exit 0"
   },
   "devDependencies": {},
   "engines": {

packages/material-ui-benchmark/src/core.js

@@ -2,13 +2,10 @@
 
 import './bootstrap';
 import Benchmark from 'benchmark';
-import fs from 'fs';
-import path from 'path';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { StylesProvider } from '@material-ui/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
-import Markdown from 'docs/src/pages/getting-started/page-layout-examples/blog/Markdown';
 
 const suite = new Benchmark.Suite('core', {
   onError: event => {
@@ -17,14 +14,6 @@ const suite = new Benchmark.Suite('core', {
 });
 Benchmark.options.minSamples = 100;
 
-const markdown = fs.readFileSync(
-  path.join(
-    __dirname,
-    '../../../docs/src/pages/getting-started/page-layout-examples/blog/blog-post.1.md',
-  ),
-  'UTF-8',
-);
-
 function NakedButton(props) {
   return <button type="button" {...props} />;
 }
@@ -65,9 +54,6 @@ suite
   .add('ButtonBase disable ripple', () => {
     ReactDOMServer.renderToString(<ButtonBase disableRipple>Material-UI</ButtonBase>);
   })
-  .add('Markdown', () => {
-    ReactDOMServer.renderToString(<Markdown>{markdown}</Markdown>);
-  })
   .on('cycle', event => {
     console.log(String(event.target));
   })

packages/material-ui-benchmark/src/docs.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-console */
+
+import './bootstrap';
+import Benchmark from 'benchmark';
+import fs from 'fs';
+import path from 'path';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import MarkdownElement from '@material-ui/docs/MarkdownElement';
+import Markdown from 'docs/src/pages/getting-started/page-layout-examples/blog/Markdown';
+
+const suite = new Benchmark.Suite('core', {
+  onError: event => {
+    console.log(event.target.error);
+  },
+});
+Benchmark.options.minSamples = 100;
+
+const markdown = fs.readFileSync(
+  path.join(
+    __dirname,
+    '../../../docs/src/pages/getting-started/page-layout-examples/blog/blog-post.1.md',
+  ),
+  'UTF-8',
+);
+
+suite
+  .add('Markdown', () => {
+    ReactDOMServer.renderToString(<Markdown>{markdown}</Markdown>);
+  })
+  .add('MarkdownElement', () => {
+    ReactDOMServer.renderToString(<MarkdownElement text={markdown} />);
+  })
+  .on('cycle', event => {
+    console.log(String(event.target));
+  })
+  .run();

packages/material-ui-docs/src/MarkdownElement/prism.js

@@ -1,25 +1,28 @@
+/* eslint-disable import/no-mutable-exports, global-require */
+
 import prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-diff';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-typescript';
-import lightTheme from 'prismjs/themes/prism.css';
-import darkTheme from 'prismjs/themes/prism-okaidia.css';
-
-export { lightTheme, darkTheme };
 
 let styleNode;
+let lightTheme;
+let darkTheme;
 
 if (process.browser) {
+  lightTheme = require('prismjs/themes/prism.css');
+  darkTheme = require('prismjs/themes/prism-okaidia.css');
+
   styleNode = document.createElement('style');
   styleNode.setAttribute('data-prism', 'true');
-  if (document.head) {
-    document.head.appendChild(styleNode);
-  }
+  document.head.appendChild(styleNode);
 }
 
+export { lightTheme, darkTheme };
+
 export function setPrismTheme(theme) {
   styleNode.textContent = theme;
 }

pages/_app.js

@@ -2,15 +2,18 @@ import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import React from 'react';
 import App, { Container } from 'next/app';
+import Router from 'next/router';
 import find from 'lodash/find';
 import { Provider } from 'react-redux';
+import EventListener from 'react-event-listener';
 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';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import PageContext from 'docs/src/modules/components/PageContext';
 import getPageContext from 'docs/src/modules/styles/getPageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
+import loadScript from 'docs/src/modules/utils/loadScript';
 
 if (process.browser) {
   loadCSS(
@@ -23,6 +26,22 @@ if (process.browser) {
   );
 }
 
+let scriptsLoaded = false;
+
+function loadScripts() {
+  if (scriptsLoaded) {
+    return;
+  }
+
+  loadScript('https://www.google-analytics.com/analytics.js', document.querySelector('head'));
+  loadScript(
+    'https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js',
+    document.querySelector('head'),
+  );
+
+  scriptsLoaded = true;
+}
+
 const pages = [
   {
     pathname: '/getting-started',
@@ -352,6 +371,27 @@ class MyApp extends App {
     this.pageContext = getPageContext();
   }
 
+  componentDidMount() {
+    loadScripts();
+  }
+
+  handleClick = event => {
+    const activeElement = document.activeElement;
+    if (
+      activeElement.nodeName.toLowerCase() === 'a' &&
+      activeElement.getAttribute('href').indexOf('/') === 0
+    ) {
+      event.preventDefault();
+      Router.push(activeElement.getAttribute('href')).then(success => {
+        if (!success) {
+          return;
+        }
+        window.scrollTo(0, 0);
+        document.body.focus();
+      });
+    }
+  };
+
   render() {
     const { Component, pageProps, router } = this.props;
 
@@ -379,6 +419,7 @@ class MyApp extends App {
           </PageContext.Provider>
         </Provider>
         <GoogleAnalytics key={router.route} />
+        <EventListener target="document" onClick={this.handleClick} />
       </Container>
     );
   }

pages/_document.js

@@ -64,8 +64,6 @@ class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
-          {/* Global Site Tag (gtag.js) - Google Analytics */}
-          <script defer src="https://www.google-analytics.com/analytics.js" />
           <script
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
@@ -75,7 +73,6 @@ window.ga('create','${GOOGLE_ID}','auto');
               `,
             }}
           />
-          <script defer src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" />
         </body>
       </html>
     );