mui
diff --git a/‎.circleci/config.yml
+6 b/‎.circleci/config.yml
+6
diff --git a/‎.eslintignore
+1 b/‎.eslintignore
+1
diff --git a/‎.size-limit.js
+1-1 b/‎.size-limit.js
+1-1
diff --git a/‎CONTRIBUTING.md
+38-1 b/‎CONTRIBUTING.md
+38-1
diff --git a/‎docs/babel.config.ts.js
+30 b/‎docs/babel.config.ts.js
+30
diff --git a/‎docs/src/modules/components/Demo.js
+99-42 b/‎docs/src/modules/components/Demo.js
+99-42
@@ -181,6 +181,12 @@ jobs:
       - *restore_yarn_offline_mirror
       - *restore_yarn_cache
       - *install_js
+      - run:
+          name: Transpile TypeScript demos
+          command: yarn docs:typescript
+      - run:
+          name: Are the compiled TypeScript demos equivalent to the JavaScript demos?
+          command: git diff --exit-code
       - run:
           name: Can we generate the material-ui build?
           command: cd packages/material-ui && yarn build
 
@@ -8,6 +8,7 @@
 /examples/gatsby/public
 /flow
 /flow-typed
+/packages/babel-plugin-unwrap-createStyles/test/__fixtures__/
 /packages/material-ui-codemod/lib
 /packages/material-ui-codemod/src/*/*.test
 /packages/material-ui-codemod/src/*/*.test.js
 
@@ -28,7 +28,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '184 KB',
+    limit: '188.1 KB',
   },
   {
     name: 'The docs home page',
 
@@ -40,6 +40,8 @@ We will only accept a pull request for which all tests pass. Make sure the follo
 - If API documentation is being changed in the source, `yarn docs:api` was run.
 - If prop types were changed, the TypeScript declarations were updated.
 - If TypeScript declarations were changed, `yarn typescript` passed.
+- If demos were changed, make sure `yarn docs:typescript` does not introduce changes.
+  See [About TypeScript demos](#about-typescript-demos).
 - The PR title follows the pattern `[Component] Imperative commit message`. (See: [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/#imperative) for a great explanation)
 
 ## Getting started
@@ -70,6 +72,8 @@ yarn
 yarn docs:dev
 ```
 You can now access the documentation site [locally](http://localhost:3000).
+Changes to the docs will hot reload the site. If you make changes to TypeScript files
+in the docs run `yarn docs:typescript --watch` in a separate terminal.
 
 Test coverage is limited at present, but where possible, please add tests for any changes you make. Tests can be run with `yarn test`.
 
@@ -108,6 +112,14 @@ docs/src/pages/demos/buttons/
 ```
 And let's give it a name: `SuperButtons.js`.
 
+We try to also document how to use this library with TypeScript. If you are familiar with
+that language try writing that demo in TypeScript in a *.tsx file. When you're done
+run `yarn docs:typescript` to automatically add a JavaScript version.
+
+Apart from the inherent pros and cons of TypeScript the demos are also used to test our
+type declarations. This helps alot in catching regressions when updating our type
+declarations.
+
 #### 2. Edit the page Markdown file.
 
 The Markdown file is the source for the website documentation. So, whatever you wrote there will be reflected on the website.
@@ -141,10 +153,35 @@ Then, you will need to add the following code:
 +        },
 ```
 
-#### 4. You are done 🎉!
+If the demo has a version in TypeScript add 
+```diff
++   rawTS: preval`
++ module.exports = require('fs')
++  .readFileSync(require.resolve('docs/src/pages/demos/buttons/SuperButtons.tsx'), 'utf8')
++`,
+```
 
+#### 4. You are done 🎉!
 In case you missed something, [we have a real example that can be used as a summary report]((https://github.com/mui-org/material-ui/pull/8922/files)).
 
+
+### About TypeScript demos
+To help people use this library with TypeScript we try to provide equivalent demos
+in TypeScript. 
+
+Changing demos in JavaScript requires a manual update of the TypeScript
+version. If you are not familiar with this language you can set the `outdatedTS` 
+flag for a given demo in the corresponding demo entry e.g. `pages/demos/button.js` in the 
+`demo` prop of the `MarkdownDocs` component. Otherwise our CI will fail on `test_build`
+on the `Transpile TypeScript demos` task. A contributor can later update the TypeScript
+version of that demo.
+
+If you are already familiar with TypeScript you can simply write the demo in TypeScript.
+`yarn docs:typescript` will transpile it down to JavaScript.
+
+If you add a TypeScript version of a demo make sure that the `enableCodeLanguageSwitch`
+prop on the `MarkdownDocs` is set so that this version is visible in the docs.
+
 ## How do I use my local distribution of material-ui in any project?
 
 Sometimes it is good to test your changes in a real world scenario, in order to do that you can install your local distribution of Material-UI in any project with [yarn link](https://yarnpkg.com/lang/en/docs/cli/link/).
 
@@ -0,0 +1,30 @@
+const path = require('path');
+const prettier = require('prettier');
+const ignoredDemos = require('./ts-demo-ignore.json');
+
+/**
+ * babel config to transpile tsx demos to js
+ *
+ * Can be used to spot differences between ts and js demos which might indicate that they
+ * do different things at runtime.
+ *
+ * Demos listed in ts-demo-ignore are not transpiled. Their path should be relative
+ * to `${workspaceRoot}/docs/src/pages/demos`.
+ */
+
+const workspaceRoot = path.join(__dirname, '../');
+const prettierConfig = prettier.resolveConfig.sync(workspaceRoot);
+if (prettierConfig == null) {
+  throw new Error('Could not find prettier config file from workspace root.');
+}
+
+const ignore = ignoredDemos.map(demoPath =>
+  path.join(workspaceRoot, 'docs/src/pages/demos', `${demoPath}.tsx`),
+);
+
+module.exports = {
+  presets: ['@babel/preset-typescript'],
+  plugins: ['generator-prettier', 'unwrap-createStyles'],
+  generatorOpts: prettierConfig,
+  ignore,
+};
@@ -13,9 +13,12 @@ import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Tooltip from '@material-ui/core/Tooltip';
 import Github from '@material-ui/docs/svgIcons/GitHub';
+import JSLogo from '@material-ui/docs/svgIcons/JSLogo';
+import TSLogo from '@material-ui/docs/svgIcons/TSLogo';
 import MarkdownElement from '@material-ui/docs/MarkdownElement';
-import { getDependencies } from 'docs/src/modules/utils/helpers';
 import DemoFrame from 'docs/src/modules/components/DemoFrame';
+import getDemo from 'docs/src/modules/utils/demoConfig';
+import TSCodeBadge from 'docs/src/modules/components/TSCodeBadge';
 
 function compress(object) {
   return LZString.compressToBase64(JSON.stringify(object))
@@ -32,31 +35,6 @@ function addHiddenInput(form, name, value) {
   form.appendChild(input);
 }
 
-function getDemo(props) {
-  return {
-    title: 'Material demo',
-    description: props.githubLocation,
-    dependencies: getDependencies(props.raw),
-    files: {
-      'demo.js': props.raw,
-      'index.js': `
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Demo from './demo';
-
-ReactDOM.render(<Demo />, document.querySelector('#root'));
-      `,
-      'index.html': `
-<body>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-  <div id="root"></div>
-</body>
-      `,
-    },
-  };
-}
-
 const styles = theme => ({
   root: {
     position: 'relative',
@@ -106,6 +84,7 @@ const styles = theme => ({
     margin: 0,
     [theme.breakpoints.up('sm')]: {
       display: 'block',
+      paddingTop: theme.spacing.unit * 6,
     },
     '& pre': {
       overflow: 'auto',
@@ -118,9 +97,18 @@ const styles = theme => ({
 class Demo extends React.Component {
   state = {
     anchorEl: null,
+    codeLanguage: 'JS',
     codeOpen: false,
   };
 
+  getTSTooltip() {
+    if (this.hasTSVersion()) {
+      const { outdatedTS } = this.props;
+      return `Source in TypeScript${outdatedTS ? ' (outdated)' : ''}`;
+    }
+    return 'No code in TypeScript available';
+  }
+
   handleClickMore = event => {
     this.setState({ anchorEl: event.currentTarget });
   };
@@ -136,25 +124,23 @@ class Demo extends React.Component {
   };
 
   handleClickCodeSandbox = () => {
-    const demo = getDemo(this.props);
+    const { codeLanguage } = this.state;
+    const demo = getDemo(this.props, codeLanguage);
     const parameters = compress({
       files: {
         'package.json': {
           content: {
             title: demo.title,
             description: demo.description,
             dependencies: demo.dependencies,
+            devDependencies: demo.devDependencies,
+            main: `index.${codeLanguage === 'TS' ? 'tsx' : 'js'}`,
           },
         },
-        'demo.js': {
-          content: demo.files['demo.js'],
-        },
-        'index.js': {
-          content: demo.files['index.js'],
-        },
-        'index.html': {
-          content: demo.files['index.html'],
-        },
+        ...Object.keys(demo.files).reduce((files, name) => {
+          files[name] = { content: demo.files[name] };
+          return files;
+        }, {}),
       },
     });
 
@@ -169,15 +155,21 @@ class Demo extends React.Component {
   };
 
   handleClickCopy = async () => {
+    const { raw: rawJS, rawTS } = this.props;
+    const { codeLanguage } = this.state;
+
+    const raw = codeLanguage === 'TS' ? rawTS : rawJS;
+
     try {
-      await copy(this.props.raw);
+      await copy(raw);
     } finally {
       this.handleCloseMore();
     }
   };
 
   handleClickStackBlitz = () => {
-    const demo = getDemo(this.props);
+    const { codeLanguage } = this.state;
+    const demo = getDemo(this.props, codeLanguage);
     const form = document.createElement('form');
     form.method = 'POST';
     form.target = '_blank';
@@ -186,6 +178,7 @@ class Demo extends React.Component {
     addHiddenInput(form, 'project[title]', demo.title);
     addHiddenInput(form, 'project[description]', demo.description);
     addHiddenInput(form, 'project[dependencies]', JSON.stringify(demo.dependencies));
+    addHiddenInput(form, 'project[devDependencies]', JSON.stringify(demo.devDependencies));
     Object.keys(demo.files).forEach(key => {
       const value = demo.files[key];
       addHiddenInput(form, `project[files][${key}]`, value);
@@ -196,16 +189,76 @@ class Demo extends React.Component {
     this.handleCloseMore();
   };
 
+  handleCodeLanguageClick = event => {
+    const { name } = this.props;
+    const { value: codeLanguage } = event.currentTarget;
+    const { ga = () => {} } = window;
+
+    ga('send', 'event', 'Demo', 'codeLanguageClick', name, codeLanguage);
+    this.setState({
+      codeLanguage,
+      codeOpen: true,
+    });
+  };
+
+  hasTSVersion() {
+    return Boolean(this.props.rawTS);
+  }
+
   render() {
-    const { classes, demoOptions, githubLocation, index, js: DemoComponent, raw } = this.props;
-    const { anchorEl, codeOpen } = this.state;
+    const {
+      classes,
+      demoOptions,
+      enableCodeLanguageSwitch,
+      githubLocation: githubLocationJS,
+      index,
+      js: DemoComponent,
+      outdatedTS,
+      rawJS,
+      rawTS,
+    } = this.props;
+    const { anchorEl, codeLanguage, codeOpen } = this.state;
     const category = demoOptions.demo;
 
+    const hasTSVersion = this.hasTSVersion();
+    const tsTooltip = this.getTSTooltip();
+
+    const githubLocation =
+      codeLanguage === 'TS' ? githubLocationJS.replace(/\.jsx?$/, '.tsx') : githubLocationJS;
+    const raw = codeLanguage === 'TS' && hasTSVersion ? rawTS : rawJS;
+
     return (
       <div className={classes.root}>
         {demoOptions.hideHeader ? null : (
           <div>
             <div className={classes.header}>
+              {enableCodeLanguageSwitch && (
+                <>
+                  <Tooltip title="Display source in JavaScript" placement="top">
+                    <IconButton
+                      aria-label="Display source in JavaScript"
+                      onClick={this.handleCodeLanguageClick}
+                      value="JS"
+                    >
+                      <JSLogo />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={tsTooltip} placement="top">
+                    <span>
+                      <IconButton
+                        aria-label={tsTooltip}
+                        disabled={!hasTSVersion}
+                        onClick={this.handleCodeLanguageClick}
+                        value="TS"
+                      >
+                        <TSCodeBadge outdatedTS={outdatedTS}>
+                          <TSLogo color={hasTSVersion ? 'official' : 'inherit'} />
+                        </TSCodeBadge>
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                </>
+              )}
               <Tooltip title="See the source on GitHub" placement="top">
                 <IconButton
                   ga-event-category={category}
@@ -275,7 +328,7 @@ class Demo extends React.Component {
                     ga-event-action="stackblitz"
                     onClick={this.handleClickStackBlitz}
                   >
-                    Edit in StackBlitz
+                    Edit in StackBlitz (JS only)
                   </MenuItem>
                 )}
               </Menu>
@@ -310,10 +363,14 @@ class Demo extends React.Component {
 Demo.propTypes = {
   classes: PropTypes.object.isRequired,
   demoOptions: PropTypes.object.isRequired,
+  enableCodeLanguageSwitch: PropTypes.bool,
   githubLocation: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   js: PropTypes.func.isRequired,
-  raw: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  outdatedTS: PropTypes.bool,
+  rawJS: PropTypes.string.isRequired,
+  rawTS: PropTypes.string,
 };
 
 export default withStyles(styles)(Demo);
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ module.exports = [`
`28`	`28`	`name: 'The main docs bundle',`
`29`	`29`	`webpack: false,`
`30`	`30`	`path: main.path,`
`31`		`- limit: '184 KB',`
	`31`	`+ limit: '188.1 KB',`
`32`	`32`	`},`
`33`	`33`	`{`
`34`	`34`	`name: 'The docs home page',`