[code-infra] Generalize and publish proptypes generator

.codesandbox/ci.json

@@ -18,7 +18,10 @@
     "packages/mui-styles",
     "packages/mui-system",
     "packages/mui-types",
-    "packages/mui-utils"
+    "packages/mui-utils",
+    "packages/docs-utils",
+    "packages/proptypes-builder",
+    "packages/typescript-to-proptypes"
   ],
   "publishDirectory": {
     "@mui/base": "packages/mui-base/build",
@@ -36,7 +39,10 @@
     "@mui/styles": "packages/mui-styles/build",
     "@mui/system": "packages/mui-system/build",
     "@mui/types": "packages/mui-types/build",
-    "@mui/utils": "packages/mui-utils/build"
+    "@mui/utils": "packages/mui-utils/build",
+    "@mui-internal/docs-utils": "packages/docs-utils",
+    "@mui-internal/proptypes-builder": "packages/proptypes-builder",
+    "@mui-internal/typescript-to-proptypes": "packages/typescript-to-proptypes"
   },
   "sandboxes": [
     "material-ui-issue-latest-s2dsx",

babel.config.js

@@ -33,6 +33,7 @@ module.exports = function getBabelConfig(api) {
     '@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'),
     '@mui/joy': resolveAliasPath('./packages/mui-joy/src'),
     '@mui/zero-runtime': resolveAliasPath('./packages/zero-runtime/src'),
+    '@mui-internal/docs-utils': resolveAliasPath('./packages/docs-utils/src'),
     docs: resolveAliasPath('./docs'),
     test: resolveAliasPath('./test'),
   };

docs/package.json

@@ -117,8 +117,9 @@
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@mui-internal/docs-utilities": "workspace:^",
+    "@mui-internal/docs-utils": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
+    "@mui-internal/typescript-to-proptypes": "workspace:^",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.11",
     "@types/css-mediaquery": "^0.1.4",
@@ -139,7 +140,6 @@
     "playwright": "^1.41.1",
     "prettier": "^2.8.8",
     "tailwindcss": "^3.4.1",
-    "typescript-to-proptypes": "workspace:^",
     "yargs": "^17.7.2"
   }
 }

docs/scripts/formattedTSDemos.js

@@ -15,12 +15,16 @@ const path = require('path');
 const fse = require('fs-extra');
 const babel = require('@babel/core');
 const prettier = require('prettier');
-const { getPropTypesFromFile, injectPropTypesInFile } = require('typescript-to-proptypes');
 const {
-  createTypeScriptProjectBuilder,
-} = require('@mui-internal/api-docs-builder/utils/createTypeScriptProject');
+  getPropTypesFromFile,
+  injectPropTypesInFile,
+} = require('@mui-internal/typescript-to-proptypes');
 const yargs = require('yargs');
-const { fixBabelGeneratorIssues, fixLineEndings } = require('@mui-internal/docs-utilities');
+const {
+  fixBabelGeneratorIssues,
+  fixLineEndings,
+  createTypeScriptProjectBuilder,
+} = require('@mui-internal/docs-utils');
 const { default: CORE_TYPESCRIPT_PROJECTS } = require('../../scripts/coreTypeScriptProjects');
 
 const babelConfig = {

docs/src/modules/components/ApiPage/list/ClassesList.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import kebabCase from 'lodash/kebabCase';
-import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
+import { ComponentClassDefinition } from '@mui-internal/docs-utils';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import ExpandableApiItem, {
   ApiItemContaier,

docs/src/modules/components/ApiPage/sections/ClassesSection.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
-import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
+import { ComponentClassDefinition } from '@mui-internal/docs-utils';
 import Box from '@mui/material/Box';
 import ToggleDisplayOption, {
   API_LAYOUT_STORAGE_KEYS,

docs/src/modules/components/ApiPage/table/ClassesTable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
-import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
+import { ComponentClassDefinition } from '@mui-internal/docs-utils';
 import { styled, alpha } from '@mui/material/styles';
 import {
   brandingDarkTheme as darkTheme,

package.json

@@ -4,13 +4,13 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts",
+    "proptypes": "nx run scripts:proptypes",
     "deduplicate": "pnpm dedupe",
     "benchmark:browser": "pnpm --filter benchmark browser",
     "build": "lerna run --scope \"@mui/*\" build",
     "build:zero": "lerna run --scope \"@mui/zero-*\" build",
     "clean:zero": "pnpm --filter \"@mui/zero-*\" clean",
-    "build:codesandbox": "NODE_OPTIONS=\"–max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" build",
+    "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --scope \"@mui/*\" --scope \"@mui-internal/*\" --no-private build",
     "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private --force-publish=@mui/core-downloads-tracker",
     "release:build": "lerna run --concurrency 8 --scope \"@mui/*\" build --skip-nx-cache",
     "release:changelog": "node scripts/releaseChangelog.mjs",
@@ -33,7 +33,7 @@
     "docs:link-check": "pnpm --filter docs link-check",
     "docs:typescript": "pnpm docs:typescript:formatted --watch",
     "docs:typescript:check": "pnpm --filter docs typescript",
-    "docs:typescript:formatted": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/formattedTSDemos",
+    "docs:typescript:formatted": "tsx ./docs/scripts/formattedTSDemos",
     "docs:mdicons:synonyms": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js,.mjs\" ./docs/scripts/updateIconSynonyms && pnpm prettier",
     "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 8 build:modern",
     "rsc:build": "tsx ./packages/rsc-builder/buildRsc.ts",
@@ -102,8 +102,10 @@
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui-internal/api-docs-builder-core": "workspace:^",
-    "@mui-internal/docs-utilities": "workspace:^",
+    "@mui-internal/docs-utils": "workspace:^",
+    "@mui-internal/proptypes-builder": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
+    "@mui-internal/typescript-to-proptypes": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/utils": "workspace:^",
@@ -180,7 +182,6 @@
     "tsx": "^4.7.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "typescript-to-proptypes": "workspace:^",
     "webpack": "^5.90.0",
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
@@ -220,5 +221,6 @@
     ],
     "sourceMap": false,
     "instrument": false
-  }
+  },
+  "nx": {}
 }

packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts

@@ -10,7 +10,7 @@ import remarkVisit from 'unist-util-visit';
 import type { Link } from 'mdast';
 import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen';
 import { renderMarkdown } from '@mui/markdown';
-import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
+import { ComponentClassDefinition, TypeScriptProject } from '@mui-internal/docs-utils';
 import { ProjectSettings, SortingStrategiesType } from '../ProjectSettings';
 import { ComponentInfo, toGitHubPath, writePrettifiedFile } from '../buildApiUtils';
 import muiDefaultPropsHandler from '../utils/defaultPropsHandler';
@@ -21,7 +21,6 @@ import createDescribeableProp, {
   DescribeablePropDescriptor,
 } from '../utils/createDescribeableProp';
 import generatePropDescription from '../utils/generatePropDescription';
-import { TypeScriptProject } from '../utils/createTypeScriptProject';
 import parseSlotsAndClasses, { Slot } from '../utils/parseSlotsAndClasses';
 import generateApiTranslations from '../utils/generateApiTranslation';
 import { sortAlphabetical } from '../utils/sortObjects';

packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts

@@ -9,6 +9,7 @@ import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-doc
 import kebabCase from 'lodash/kebabCase';
 import upperFirst from 'lodash/upperFirst';
 import { renderMarkdown } from '@mui/markdown';
+import { TypeScriptProject } from '@mui-internal/docs-utils';
 import { ProjectSettings } from '../ProjectSettings';
 import { computeApiDescription } from './ComponentApiBuilder';
 import {
@@ -19,7 +20,6 @@ import {
   toGitHubPath,
   writePrettifiedFile,
 } from '../buildApiUtils';
-import { TypeScriptProject } from '../utils/createTypeScriptProject';
 import generateApiTranslations from '../utils/generateApiTranslation';
 
 interface ParsedProperty {

packages/api-docs-builder/ProjectSettings.ts

@@ -1,6 +1,5 @@
-import { ComponentClassDefinition } from '@mui-internal/docs-utilities/ComponentClassDefinition';
+import { ComponentClassDefinition, CreateTypeScriptProjectOptions } from '@mui-internal/docs-utils';
 import { ComponentInfo, HookInfo } from './buildApiUtils';
-import { CreateTypeScriptProjectOptions } from './utils/createTypeScriptProject';
 import { CreateDescribeablePropSettings } from './utils/createDescribeableProp';
 import { ReactApi as ComponentReactApi } from './ApiBuilders/ComponentApiBuilder';
 import { ReactApi as HookReactApi } from './ApiBuilders/HookApiBuilder';

packages/api-docs-builder/buildApi.ts

@@ -1,18 +1,18 @@
 import { mkdirSync } from 'fs';
 import path from 'path';
 import * as fse from 'fs-extra';
+import {
+  CreateTypeScriptProjectOptions,
+  TypeScriptProjectBuilder,
+  createTypeScriptProjectBuilder,
+} from '@mui-internal/docs-utils';
 import findComponents from './utils/findComponents';
 import findHooks from './utils/findHooks';
 import { writePrettifiedFile } from './buildApiUtils';
 import generateComponentApi, {
   ReactApi as ComponentReactApi,
 } from './ApiBuilders/ComponentApiBuilder';
 import generateHookApi from './ApiBuilders/HookApiBuilder';
-import {
-  CreateTypeScriptProjectOptions,
-  TypeScriptProjectBuilder,
-  createTypeScriptProjectBuilder,
-} from './utils/createTypeScriptProject';
 import { ProjectSettings } from './ProjectSettings';
 
 async function removeOutdatedApiDocsTranslations(

packages/api-docs-builder/buildApiUtils.ts

@@ -3,9 +3,8 @@ import path from 'path';
 import * as ts from 'typescript';
 import * as prettier from 'prettier';
 import kebabCase from 'lodash/kebabCase';
-import { getLineFeed } from '@mui-internal/docs-utilities';
+import { getLineFeed, TypeScriptProject } from '@mui-internal/docs-utils';
 import { replaceComponentLinks } from './utils/replaceUrl';
-import { TypeScriptProject } from './utils/createTypeScriptProject';
 
 /**
  * TODO: this should really be fixed in findPagesMarkdown().

packages/api-docs-builder/package.json

@@ -11,7 +11,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/traverse": "^7.23.9",
-    "@mui-internal/docs-utilities": "workspace:^",
+    "@mui-internal/docs-utils": "workspace:^",
     "@mui/markdown": "workspace:^",
     "ast-types": "^0.14.2",
     "doctrine": "^3.0.0",

packages/api-docs-builder/tsconfig.json

@@ -14,7 +14,7 @@
     "strict": true,
     "baseUrl": "./",
     "paths": {
-      "@mui/utils": ["../mui-utils/src"]
+      "@mui-internal/docs-utils": ["../docs-utils/src"]
     }
   },
   "include": ["./**/*.ts", "./**/*.js"],

packages/api-docs-builder/utils/getPropsFromComponentNode.ts

@@ -1,5 +1,5 @@
 import * as ts from 'typescript';
-import { TypeScriptProject } from './createTypeScriptProject';
+import { TypeScriptProject } from '@mui-internal/docs-utils';
 
 export interface ParsedProp {
   /**

packages/api-docs-builder/utils/parseSlotsAndClasses.ts

@@ -1,8 +1,7 @@
 import * as ts from 'typescript';
-import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
+import { ComponentClassDefinition, TypeScriptProject } from '@mui-internal/docs-utils';
 import { renderMarkdown } from '@mui/markdown';
 import { getSymbolDescription, getSymbolJSDocTags } from '../buildApiUtils';
-import { TypeScriptProject } from './createTypeScriptProject';
 import { getPropsFromComponentNode } from './getPropsFromComponentNode';
 import resolveExportSpecifier from './resolveExportSpecifier';
 import { ProjectSettings } from '../ProjectSettings';

packages/api-docs-builder/utils/resolveExportSpecifier.ts

@@ -1,5 +1,5 @@
 import * as ts from 'typescript';
-import { TypeScriptProject } from './createTypeScriptProject';
+import { TypeScriptProject } from '@mui-internal/docs-utils';
 
 function shouldAliasSymbol(symbol: ts.Symbol) {
   const declaration = symbol.declarations?.[0];

packages/docs-utils/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+Initial release as an npm package.

packages/docs-utils/README.md

@@ -0,0 +1,9 @@
+# @mui-internal/docs-utils
+
+This package contains utilities shared between MUI docs generation scripts.
+This is an internal package not meant for general use.
+
+## Release
+
+1. Build the project: `pnpm build`
+2. Publish the build artifacts to npm: `pnpm release:publish`

packages/docs-utils/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@mui-internal/docs-utils",
+  "version": "1.0.0",
+  "author": "MUI Team",
+  "description": "Utilities for MUI docs. This is an internal package not meant for general use.",
+  "main": "./build/index.js",
+  "exports": {
+    ".": "./build/index.js"
+  },
+  "types": "./build/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/material-ui.git",
+    "directory": "packages/docs-utils"
+  },
+  "scripts": {
+    "prebuild": "rimraf ./build",
+    "build": "tsc -b tsconfig.build.json",
+    "typescript": "tsc -b tsconfig.json",
+    "release:publish": "pnpm publish --tag latest",
+    "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\""
+  },
+  "dependencies": {
+    "rimraf": "^5.0.5",
+    "typescript": "^5.1.6"
+  }
+}