[core] Fix next using stale pages (#24635)

.dependabot/config.yml

@@ -22,10 +22,6 @@ update_configs:
           # They sometimes are mergable independently but create a different dependency when merged leading to a changed yarn.lock
           # TODO: Revisit once https://github.com/dependabot/dependabot-core/issues/1190 is resolved.
           dependency_name: '@typescript-eslint/parser'
-      - match:
-          # as of 3.x prevaled code is no longer transpiled
-          dependency_name: 'babel-plugin-preval'
-          version_requirement: '>= 3.0'
       - match:
           # https://github.com/mui-org/material-ui/pull/17604#issuecomment-536262291
           dependency_name: 'core-js'

.eslintrc.js

@@ -13,9 +13,6 @@ const forbidCreateStylesMessage =
 
 module.exports = {
   root: true, // So parent files don't get applied
-  globals: {
-    preval: false, // Used in the documentation
-  },
   env: {
     es6: true,
     browser: true,

docs/babel.config.js

@@ -52,7 +52,6 @@ module.exports = {
     'babel-plugin-optimize-clsx',
     // for IE11 support
     '@babel/plugin-transform-object-assign',
-    'babel-plugin-preval',
     [
       'babel-plugin-module-resolver',
       {

docs/package.json

@@ -59,7 +59,6 @@
     "autosuggest-highlight": "^3.1.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-optimize-clsx": "^2.4.1",
-    "babel-plugin-preval": "^2.0.0",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "clean-css": "^4.1.11",

docs/scripts/buildApi.ts

@@ -23,7 +23,7 @@ import muiDefaultPropsHandler from 'docs/src/modules/utils/defaultPropsHandler';
 import muiFindAnnotatedComponentsResolver from 'docs/src/modules/utils/findAnnotatedComponentsResolver';
 import { LANGUAGES, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants';
 import parseTest from 'docs/src/modules/utils/parseTest';
-import { findPagesMarkdown, findComponents } from 'docs/src/modules/utils/find';
+import { findPages, findPagesMarkdown, findComponents } from 'docs/src/modules/utils/find';
 import {
   getHeaders,
   renderInline as renderMarkdownInline,
@@ -1309,14 +1309,33 @@ Page.getInitialProps = () => {
   }
 }
 
-function run(argv: { componentDirectories?: string[]; grep?: string; outputDirectory?: string }) {
+/**
+ * Creates .js file containing all /api nextjs pages
+ */
+function generateApiPagesManifest(outputPath: string, prettierConfigPath: string): void {
+  const [{ children: apiPages }] = findPages({ front: true });
+  if (apiPages === undefined) {
+    throw new TypeError('Unable to find pages under /api');
+  }
+
+  const source = `module.exports = ${JSON.stringify(apiPages)}`;
+  writePrettifiedFile(outputPath, source, prettierConfigPath);
+}
+
+async function run(argv: {
+  apiPagesManifestPath?: string;
+  componentDirectories?: string[];
+  grep?: string;
+  outputDirectory?: string;
+}) {
   const workspaceRoot = path.resolve(__dirname, '../../');
   /**
    * @type {string[]}
    */
   const componentDirectories = argv.componentDirectories!.map((componentDirectory) => {
     return path.resolve(componentDirectory);
   });
+  const apiPagesManifestPath = path.resolve(argv.apiPagesManifestPath!);
   const outputDirectory = path.resolve(argv.outputDirectory!);
   const grep = argv.grep == null ? null : new RegExp(argv.grep);
 
@@ -1388,18 +1407,20 @@ function run(argv: { componentDirectories?: string[]; grep?: string; outputDirec
       });
   });
 
-  Promise.all(componentBuilds).then((builds) => {
-    const fails = builds.filter(
-      (promise): promise is { status: 'rejected'; reason: string } => promise.status === 'rejected',
-    );
+  const builds = await Promise.all(componentBuilds);
 
-    fails.forEach((build) => {
-      console.error(build.reason);
-    });
-    if (fails.length > 0) {
-      process.exit(1);
-    }
+  const fails = builds.filter(
+    (promise): promise is { status: 'rejected'; reason: string } => promise.status === 'rejected',
+  );
+
+  fails.forEach((build) => {
+    console.error(build.reason);
   });
+  if (fails.length > 0) {
+    process.exit(1);
+  }
+
+  generateApiPagesManifest(apiPagesManifestPath, prettierConfigPath);
 }
 
 yargs
@@ -1421,6 +1442,11 @@ yargs
           description:
             'Only generate files for component filenames matching the pattern. The string is treated as a RegExp.',
           type: 'string',
+        })
+        .option('apiPagesManifestPath', {
+          description: 'The path to the file where pages available under /api are written to.',
+          requiresArg: true,
+          type: 'string',
         });
     },
     handler: run,

docs/src/pages.ts

@@ -1,4 +1,4 @@
-import findPages from /* preval */ 'docs/src/modules/utils/findPages';
+import pagesApi from './pagesApi';
 
 export interface MuiPage {
   pathname: string;
@@ -184,7 +184,7 @@ const pages: MuiPage[] = [
     title: 'Component API',
     pathname: '/api-docs',
     children: [
-      ...findPages[0].children!,
+      ...pagesApi,
       ...[{ pathname: '/api-docs/data-grid' }, { pathname: '/api-docs/x-grid' }],
     ]
       .sort((a, b) =>

docs/src/pagesApi.js

@@ -0,0 +1,146 @@
+module.exports = [
+  { pathname: '/api-docs/accordion' },
+  { pathname: '/api-docs/accordion-actions' },
+  { pathname: '/api-docs/accordion-details' },
+  { pathname: '/api-docs/accordion-summary' },
+  { pathname: '/api-docs/alert' },
+  { pathname: '/api-docs/alert-title' },
+  { pathname: '/api-docs/app-bar' },
+  { pathname: '/api-docs/autocomplete' },
+  { pathname: '/api-docs/avatar' },
+  { pathname: '/api-docs/avatar-group' },
+  { pathname: '/api-docs/backdrop' },
+  { pathname: '/api-docs/badge' },
+  { pathname: '/api-docs/badge-unstyled' },
+  { pathname: '/api-docs/bottom-navigation' },
+  { pathname: '/api-docs/bottom-navigation-action' },
+  { pathname: '/api-docs/breadcrumbs' },
+  { pathname: '/api-docs/button' },
+  { pathname: '/api-docs/button-base' },
+  { pathname: '/api-docs/button-group' },
+  { pathname: '/api-docs/card' },
+  { pathname: '/api-docs/card-action-area' },
+  { pathname: '/api-docs/card-actions' },
+  { pathname: '/api-docs/card-content' },
+  { pathname: '/api-docs/card-header' },
+  { pathname: '/api-docs/card-media' },
+  { pathname: '/api-docs/checkbox' },
+  { pathname: '/api-docs/chip' },
+  { pathname: '/api-docs/circular-progress' },
+  { pathname: '/api-docs/click-away-listener' },
+  { pathname: '/api-docs/collapse' },
+  { pathname: '/api-docs/container' },
+  { pathname: '/api-docs/css-baseline' },
+  { pathname: '/api-docs/desktop-time-picker' },
+  { pathname: '/api-docs/dialog' },
+  { pathname: '/api-docs/dialog-actions' },
+  { pathname: '/api-docs/dialog-content' },
+  { pathname: '/api-docs/dialog-content-text' },
+  { pathname: '/api-docs/dialog-title' },
+  { pathname: '/api-docs/divider' },
+  { pathname: '/api-docs/drawer' },
+  { pathname: '/api-docs/fab' },
+  { pathname: '/api-docs/fade' },
+  { pathname: '/api-docs/filled-input' },
+  { pathname: '/api-docs/form-control' },
+  { pathname: '/api-docs/form-control-label' },
+  { pathname: '/api-docs/form-group' },
+  { pathname: '/api-docs/form-helper-text' },
+  { pathname: '/api-docs/form-label' },
+  { pathname: '/api-docs/grid' },
+  { pathname: '/api-docs/grow' },
+  { pathname: '/api-docs/hidden' },
+  { pathname: '/api-docs/icon' },
+  { pathname: '/api-docs/icon-button' },
+  { pathname: '/api-docs/image-list' },
+  { pathname: '/api-docs/image-list-item' },
+  { pathname: '/api-docs/image-list-item-bar' },
+  { pathname: '/api-docs/input' },
+  { pathname: '/api-docs/input-adornment' },
+  { pathname: '/api-docs/input-base' },
+  { pathname: '/api-docs/input-label' },
+  { pathname: '/api-docs/linear-progress' },
+  { pathname: '/api-docs/link' },
+  { pathname: '/api-docs/list' },
+  { pathname: '/api-docs/list-item' },
+  { pathname: '/api-docs/list-item-avatar' },
+  { pathname: '/api-docs/list-item-icon' },
+  { pathname: '/api-docs/list-item-secondary-action' },
+  { pathname: '/api-docs/list-item-text' },
+  { pathname: '/api-docs/list-subheader' },
+  { pathname: '/api-docs/loading-button' },
+  { pathname: '/api-docs/menu' },
+  { pathname: '/api-docs/menu-item' },
+  { pathname: '/api-docs/menu-list' },
+  { pathname: '/api-docs/mobile-stepper' },
+  { pathname: '/api-docs/mobile-time-picker' },
+  { pathname: '/api-docs/modal' },
+  { pathname: '/api-docs/native-select' },
+  { pathname: '/api-docs/no-ssr' },
+  { pathname: '/api-docs/outlined-input' },
+  { pathname: '/api-docs/pagination' },
+  { pathname: '/api-docs/pagination-item' },
+  { pathname: '/api-docs/paper' },
+  { pathname: '/api-docs/popover' },
+  { pathname: '/api-docs/popper' },
+  { pathname: '/api-docs/portal' },
+  { pathname: '/api-docs/radio' },
+  { pathname: '/api-docs/radio-group' },
+  { pathname: '/api-docs/rating' },
+  { pathname: '/api-docs/scoped-css-baseline' },
+  { pathname: '/api-docs/select' },
+  { pathname: '/api-docs/skeleton' },
+  { pathname: '/api-docs/slide' },
+  { pathname: '/api-docs/slider' },
+  { pathname: '/api-docs/slider-unstyled' },
+  { pathname: '/api-docs/snackbar' },
+  { pathname: '/api-docs/snackbar-content' },
+  { pathname: '/api-docs/speed-dial' },
+  { pathname: '/api-docs/speed-dial-action' },
+  { pathname: '/api-docs/speed-dial-icon' },
+  { pathname: '/api-docs/static-time-picker' },
+  { pathname: '/api-docs/step' },
+  { pathname: '/api-docs/step-button' },
+  { pathname: '/api-docs/step-connector' },
+  { pathname: '/api-docs/step-content' },
+  { pathname: '/api-docs/step-icon' },
+  { pathname: '/api-docs/step-label' },
+  { pathname: '/api-docs/stepper' },
+  { pathname: '/api-docs/svg-icon' },
+  { pathname: '/api-docs/swipeable-drawer' },
+  { pathname: '/api-docs/switch' },
+  { pathname: '/api-docs/tab' },
+  { pathname: '/api-docs/tab-context' },
+  { pathname: '/api-docs/table' },
+  { pathname: '/api-docs/table-body' },
+  { pathname: '/api-docs/table-cell' },
+  { pathname: '/api-docs/table-container' },
+  { pathname: '/api-docs/table-footer' },
+  { pathname: '/api-docs/table-head' },
+  { pathname: '/api-docs/table-pagination' },
+  { pathname: '/api-docs/table-row' },
+  { pathname: '/api-docs/table-sort-label' },
+  { pathname: '/api-docs/tab-list' },
+  { pathname: '/api-docs/tab-panel' },
+  { pathname: '/api-docs/tabs' },
+  { pathname: '/api-docs/tab-scroll-button' },
+  { pathname: '/api-docs/textarea-autosize' },
+  { pathname: '/api-docs/text-field' },
+  { pathname: '/api-docs/timeline' },
+  { pathname: '/api-docs/timeline-connector' },
+  { pathname: '/api-docs/timeline-content' },
+  { pathname: '/api-docs/timeline-dot' },
+  { pathname: '/api-docs/timeline-item' },
+  { pathname: '/api-docs/timeline-opposite-content' },
+  { pathname: '/api-docs/timeline-separator' },
+  { pathname: '/api-docs/time-picker' },
+  { pathname: '/api-docs/toggle-button' },
+  { pathname: '/api-docs/toggle-button-group' },
+  { pathname: '/api-docs/toolbar' },
+  { pathname: '/api-docs/tooltip' },
+  { pathname: '/api-docs/tree-item' },
+  { pathname: '/api-docs/tree-view' },
+  { pathname: '/api-docs/typography' },
+  { pathname: '/api-docs/unstable-trap-focus' },
+  { pathname: '/api-docs/zoom' },
+];

package.json

@@ -13,7 +13,7 @@
     "release:publish:dry-run": "lerna publish from-package --dist-tag next --contents build --registry=\"http://localhost:4873/\"",
     "release:tag": "node scripts/releaseTag",
     "docs:api": "rimraf ./docs/pages/api-docs && yarn docs:api:build",
-    "docs:api:build": "cross-env BABEL_ENV=test __NEXT_EXPORT_TRAILING_SLASH=true babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/buildApi.ts  ./docs/pages/api-docs ./packages/material-ui-unstyled/src ./packages/material-ui/src ./packages/material-ui-lab/src",
+    "docs:api:build": "cross-env BABEL_ENV=test __NEXT_EXPORT_TRAILING_SLASH=true babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/buildApi.ts  ./docs/pages/api-docs ./packages/material-ui-unstyled/src ./packages/material-ui/src ./packages/material-ui-lab/src --apiPagesManifestPath ./docs/src/pagesApi.js",
     "docs:build": "yarn workspace docs build",
     "docs:build-sw": "yarn workspace docs build-sw",
     "docs:build-color-preview": "babel-node scripts/buildColorTypes",

yarn.lock

@@ -4423,7 +4423,7 @@ babel-plugin-istanbul@^6.0.0:
     istanbul-lib-instrument "^4.0.0"
     test-exclude "^6.0.0"
 
-babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.2.2, babel-plugin-macros@^2.6.1:
+babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -4464,14 +4464,6 @@ babel-plugin-optimize-clsx@^2.3.0, babel-plugin-optimize-clsx@^2.4.1:
     lodash "^4.17.15"
     object-hash "^2.0.3"
 
-babel-plugin-preval@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-preval/-/babel-plugin-preval-2.0.1.tgz#76a552a1670bb21307f80b927b89fbeb37cf205c"
-  integrity sha512-7rTkwsuiATlwB7aE9X78LpvfOhocO8K82mAacju6K1dR2uyg83jhSwKvV5PXZnB8Rh92uzMuKIxu2IZoSAVHbQ==
-  dependencies:
-    babel-plugin-macros "^2.2.2"
-    require-from-string "^2.0.2"
-
 babel-plugin-react-remove-properties@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f"