[docs] Move dependencies/scripts from root into workspace (mui#16640)

* [docs] Move docs scripts into workspace

* Fix size:snapshot

* Remove unused classnames dependency

* netlify -> cdn

* Keep root docs:typescript* scripts

* Fix hmr for docs:dev

Author: eps1lon

.circleci/config.yml

@@ -109,7 +109,7 @@ jobs:
       - install_js
       - run:
           name: Transpile TypeScript demos
-          command: yarn docs:typescript:formatted --disable-cache
+          command: yarn workspace docs typescript:transpile --disable-cache
       - run:
           name: Are the compiled TypeScript demos equivalent to the JavaScript demos?
           command: git add -A && git diff --exit-code --staged

.eslintignore

@@ -1,5 +1,5 @@
 /.git
-/.next
+/docs/.next
 /coverage
 /docs/export
 /examples/create-react-app*/src/serviceWorker.js

.gitignore

@@ -7,7 +7,7 @@
 *.log
 .DS_STORE
 /.eslintcache
-/.next
+/docs/.next
 /.nyc_output
 /coverage
 /docs/export

babel.config.js

@@ -1,14 +1,3 @@
-const bpmr = require('babel-plugin-module-resolver');
-
-function resolvePath(sourcePath, currentFile, opts) {
-  if (sourcePath === 'markdown') {
-    const base = currentFile.substring(__dirname.length).slice(0, -3);
-    return `${__dirname}/docs/src/${base}/`;
-  }
-
-  return bpmr.resolvePath(sourcePath, currentFile, opts);
-}
-
 let defaultPresets;
 
 // We release a ES version of Material-UI.
@@ -88,50 +77,6 @@ module.exports = {
         ],
       ],
     },
-    'docs-development': {
-      presets: ['next/babel', '@zeit/next-typescript/babel'],
-      plugins: [
-        'babel-plugin-preval',
-        [
-          'babel-plugin-module-resolver',
-          {
-            alias: {
-              ...defaultAlias,
-              '@material-ui/docs': './packages/material-ui-docs/src',
-              docs: './docs',
-              modules: './modules',
-              pages: './pages',
-            },
-            transformFunctions: ['require', 'require.context'],
-            resolvePath,
-          },
-        ],
-      ],
-    },
-    'docs-production': {
-      presets: ['next/babel', '@zeit/next-typescript/babel'],
-      plugins: [
-        'babel-plugin-preval',
-        [
-          'babel-plugin-module-resolver',
-          {
-            alias: {
-              ...defaultAlias,
-              '@material-ui/docs': './packages/material-ui-docs/src',
-              docs: './docs',
-              modules: './modules',
-              pages: './pages',
-            },
-            transformFunctions: ['require', 'require.context'],
-            resolvePath,
-          },
-        ],
-        'babel-plugin-transform-react-constant-elements',
-        'babel-plugin-transform-dev-warning',
-        ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
-        ['babel-plugin-transform-react-remove-prop-types', { mode: 'remove' }],
-      ],
-    },
     esm: {
       plugins: productionPlugins,
     },

docs/babel.config.js

@@ -0,0 +1,58 @@
+const bpmr = require('babel-plugin-module-resolver');
+
+function resolvePath(sourcePath, currentFile, opts) {
+  if (sourcePath === 'markdown') {
+    const base = currentFile.substring(__dirname.length).slice(0, -3);
+    return `${__dirname}/docs/src/${base}/`;
+  }
+
+  return bpmr.resolvePath(sourcePath, currentFile, opts);
+}
+
+const alias = {
+  '@material-ui/core': '../packages/material-ui/src',
+  '@material-ui/docs': '../packages/material-ui-docs/src',
+  '@material-ui/icons': '../packages/material-ui-icons/src',
+  '@material-ui/lab': '../packages/material-ui-lab/src',
+  '@material-ui/styles': '../packages/material-ui-styles/src',
+  '@material-ui/system': '../packages/material-ui-system/src',
+  '@material-ui/utils': '../packages/material-ui-utils/src',
+  docs: './',
+  modules: '../modules',
+  pages: './pages',
+};
+
+module.exports = {
+  presets: [
+    // TODO figure out how to make it work with dependencies that have this repo as a
+    // peer,
+    // false causes 'Attempted import error: 'KeyboardTimePicker' is not exported from '@material-ui/pickers'.'
+    ['next/babel', { 'preset-env': { modules: 'commonjs' } }],
+    '@zeit/next-typescript/babel',
+  ],
+  plugins: [
+    'babel-plugin-optimize-clsx',
+    // for IE 11 support
+    '@babel/plugin-transform-object-assign',
+    'babel-plugin-preval',
+    [
+      'babel-plugin-module-resolver',
+      {
+        alias,
+        transformFunctions: ['require', 'require.context'],
+        resolvePath,
+      },
+    ],
+  ],
+  ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
+  env: {
+    production: {
+      plugins: [
+        'babel-plugin-transform-react-constant-elements',
+        'babel-plugin-transform-dev-warning',
+        ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
+        ['babel-plugin-transform-react-remove-prop-types', { mode: 'remove' }],
+      ],
+    },
+  },
+};

docs/static/_headers docs/cdn/_headers

@@ -2,11 +2,14 @@ const webpack = require('webpack');
 const pkg = require('./package.json');
 const withTM = require('next-transpile-modules');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const { findPages } = require('./docs/src/modules/utils/find');
+const { findPages } = require('./src/modules/utils/find');
 const withTypescript = require('@zeit/next-typescript');
+const path = require('path');
 
 const LANGUAGES = ['en', 'zh', 'ru', 'pt', 'fr', 'es', 'de'];
 
+const workspaceRoot = path.join(__dirname, '../');
+
 module.exports = withTypescript({
   webpack: (config, options) => {
     // Alias @material-ui/core peer dependency imports form the following modules to our sources.
@@ -55,6 +58,13 @@ module.exports = withTypescript({
             test: /\.(css|md)$/,
             loader: 'raw-loader',
           },
+          // required to transpile ../packages/
+          {
+            test: /\.(js|mjs|jsx)$/,
+            include: [workspaceRoot],
+            exclude: /node_modules/,
+            use: options.defaultLoaders.babel,
+          },
         ]),
       }),
     });

docs/static/_redirects docs/cdn/_redirects

@@ -5,6 +5,97 @@
   "author": "Material-UI Team",
   "license": "MIT",
   "scripts": {
-    "typescript": "tslint -p tsconfig.json \"src/pages/**/*.{ts,tsx}\""
+    "build": "rimraf .next && cross-env NODE_ENV=production next build",
+    "build-sw": "node ./scripts/buildServiceWorker.js",
+    "dev": "rimraf ../node_modules/.cache/babel-loader && cross-env NODE_ENV=development node src/server.js",
+    "deploy": "git push material-ui-docs master:latest",
+    "export": "rimraf docs/export && next export -o export && yarn build-sw && cp -r cdn/. export",
+    "icons": "rimraf static/icons/* && node ./scripts/buildIcons.js",
+    "start": "next start",
+    "typescript": "tslint -p tsconfig.json \"src/pages/**/*.{ts,tsx}\"",
+    "typescript:transpile": "node scripts/formattedTSDemos",
+    "typescript:transpile:dev": "node scripts/formattedTSDemos --watch"
+  },
+  "dependencies": {
+    "@date-io/date-fns": "^1.0.0",
+    "@emotion/core": "^10.0.0",
+    "@emotion/styled": "^10.0.0",
+    "@material-ui/core": "^4.1.2",
+    "@material-ui/docs": "^4.0.0-beta.0",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/lab": "^4.0.0-alpha.18",
+    "@material-ui/pickers": "^3.1.1",
+    "@material-ui/styles": "^4.1.2",
+    "@material-ui/system": "^4.3.0",
+    "@trendmicro/react-interpolate": "^0.5.5",
+    "@types/autosuggest-highlight": "^3.1.0",
+    "@types/react-autosuggest": "^9.3.7",
+    "@types/react-dom": "^16.0.9",
+    "@types/react-router-dom": "^4.3.1",
+    "@types/react-select": "^2.0.14",
+    "@types/react-swipeable-views": "^0.13.0",
+    "@types/react-text-mask": "^5.4.2",
+    "@types/react-virtualized": "^9.21.1",
+    "@types/react-window": "^1.7.0",
+    "@types/styled-components": "4.1.12",
+    "@zeit/next-typescript": "^1.1.1",
+    "address": "^1.0.3",
+    "ast-types": "^0.12.4",
+    "autoprefixer": "^9.0.0",
+    "autosuggest-highlight": "^3.1.1",
+    "clean-css": "^4.1.11",
+    "clipboard-copy": "^3.0.0",
+    "css-loader": "^2.0.0",
+    "css-mediaquery": "^0.1.2",
+    "date-fns": "^2.0.0-alpha.21",
+    "doctrine": "^3.0.0",
+    "downshift": "^3.0.0",
+    "emotion-theming": "^10.0.5",
+    "fg-loadcss": "^2.0.1",
+    "final-form": "^4.11.0",
+    "isomorphic-fetch": "^2.2.1",
+    "json2mq": "^0.2.0",
+    "jss-plugin-template": "10.0.0-alpha.17",
+    "jss-rtl": "^0.2.1",
+    "lodash": "^4.17.14",
+    "lz-string": "^1.4.4",
+    "markdown-to-jsx": "^6.8.3",
+    "material-table": "^1.39.0",
+    "material-ui-popup-state": "^1.0.1",
+    "next": "8.1.0",
+    "next-transpile-modules": "^2.3.1",
+    "notistack": "^0.8.6",
+    "postcss": "^7.0.0",
+    "raw-loader": "^1.0.0",
+    "react-autosuggest": "^9.3.2",
+    "react-docgen": "^5.0.0-beta",
+    "react-dom": "^16.8.5",
+    "react-draggable": "^3.0.5",
+    "react-final-form": "^4.0.2",
+    "react-frame-component": "^4.0.2",
+    "react-inspector": "^2.2.2",
+    "react-number-format": "^4.0.0",
+    "react-redux": "^7.0.3",
+    "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
+    "react-select": "^2.0.0",
+    "react-swipeable-views": "^0.13.0",
+    "react-test-renderer": "^16.8.5",
+    "react-text-mask": "^5.0.2",
+    "react-virtualized": "^9.21.0",
+    "react-window": "^1.7.1",
+    "recast": "^0.17.0",
+    "recharts": "^1.1.0",
+    "redux": "^4.0.0",
+    "redux-logger": "^3.0.6",
+    "styled-components": "^4.1.1",
+    "typescript-to-proptypes": "^1.1.0",
+    "url-loader": "^1.0.1",
+    "webfontloader": "^1.6.28"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.1.0",
+    "babel-plugin-unwrap-createstyles": "^4.1.0",
+    "gm": "^1.23.0"
   }
 }

static/favicon.ico docs/cdn/favicon.ico

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/about-the-lab', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/about-the-lab',
+  '!raw-loader!../../src/pages/components/about-the-lab',
   false,
   /\.(js|tsx)$/,
 );

docs/static/robots.txt docs/cdn/robots.txt

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/app-bar', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/app-bar',
+  '!raw-loader!../../src/pages/components/app-bar',
   false,
   /\.(js|tsx)$/,
 );

next.config.js docs/next.config.js

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/autocomplete', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/autocomplete',
+  '!raw-loader!../../src/pages/components/autocomplete',
   false,
   /\.(js|tsx)$/,
 );

docs/package.json

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/avatars', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/avatars',
+  '!raw-loader!../../src/pages/components/avatars',
   false,
   /\.(js|tsx)$/,
 );

pages/_app.js docs/pages/_app.js

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/badges', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/badges',
+  '!raw-loader!../../src/pages/components/badges',
   false,
   /\.(js|tsx)$/,
 );

pages/_document.js docs/pages/_document.js

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/bottom-navigation', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/bottom-navigation',
+  '!raw-loader!../../src/pages/components/bottom-navigation',
   false,
   /\.(js|tsx)$/,
 );

pages/api/app-bar.js docs/pages/api/app-bar.js

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/box', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/box',
+  '!raw-loader!../../src/pages/components/box',
   false,
   /\.(js|tsx)$/,
 );

pages/api/app-bar.md docs/pages/api/app-bar.md

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/breadcrumbs', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/breadcrumbs',
+  '!raw-loader!../../src/pages/components/breadcrumbs',
   false,
   /\.(js|tsx)$/,
 );

pages/api/avatar.js docs/pages/api/avatar.js

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/buttons', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/buttons',
+  '!raw-loader!../../src/pages/components/buttons',
   false,
   /\.(js|tsx)$/,
 );

pages/api/avatar.md docs/pages/api/avatar.md

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/cards', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/cards',
+  '!raw-loader!../../src/pages/components/cards',
   false,
   /\.(js|tsx)$/,
 );

pages/api/backdrop.js docs/pages/api/backdrop.js

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/checkboxes', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/checkboxes',
+  '!raw-loader!../../src/pages/components/checkboxes',
   false,
   /\.(js|tsx)$/,
 );

pages/api/backdrop.md docs/pages/api/backdrop.md

@@ -5,7 +5,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/components/chips', false, /\.(md|js|tsx)$/);
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/chips',
+  '!raw-loader!../../src/pages/components/chips',
   false,
   /\.(js|tsx)$/,
 );

pages/api/badge.js docs/pages/api/badge.js

@@ -9,7 +9,7 @@ const req = require.context(
   /\.(md|js|tsx)$/,
 );
 const reqSource = require.context(
-  '!raw-loader!../../docs/src/pages/components/click-away-listener',
+  '!raw-loader!../../src/pages/components/click-away-listener',
   false,
   /\.(js|tsx)$/,
 );