[core] Rework typescript-to-proptypes

packages/api-docs-builder/buildApi.ts

@@ -19,7 +19,8 @@ import {
 } from './buildApiUtils';
 import generateComponentApi, { ReactApi } from './ApiBuilders/ComponentApiBuilder';
 import generateHookApi from './ApiBuilders/HookApiBuilder';
-import { createTypeScriptProject, TypeScriptProject } from './utils/createTypeScriptProject';
+import { createTypescriptProjectBuilder } from './utils/createTypeScriptProject';
+import { CORE_TYPESCRIPT_PROJECTS, CoreTypeScriptProjects } from './utils/coreTypeScriptProjects';
 
 const apiDocsTranslationsDirectory = path.resolve('docs', 'translations', 'api-docs');
 
@@ -112,7 +113,7 @@ interface Settings {
   /**
    * Component directories to be used to generate API
    */
-  getProjects: () => TypeScriptProject[];
+  getProjects: () => CoreTypeScriptProjects[];
   getApiPages: () => Array<{ pathname: string }>;
   getComponentInfo: (filename: string) => ComponentInfo;
   getHookInfo?: (filename: string) => HookInfo;
@@ -123,32 +124,15 @@ const SETTINGS: Settings[] = [
     output: {
       apiManifestPath: path.join(process.cwd(), 'docs/data/material/pagesApi.js'),
     },
-    getProjects: () => [
-      createTypeScriptProject({
-        name: 'material',
-        rootPath: path.join(process.cwd(), 'packages/mui-material'),
-        entryPointPath: 'src/index.d.ts',
-      }),
-      createTypeScriptProject({
-        name: 'lab',
-        rootPath: path.join(process.cwd(), 'packages/mui-lab'),
-        entryPointPath: 'src/index.d.ts',
-      }),
-    ],
+    getProjects: () => ['material', 'lab'],
     getApiPages: () => findApiPages('docs/pages/material-ui/api'),
     getComponentInfo: getMaterialComponentInfo,
   },
   {
     output: {
       apiManifestPath: path.join(process.cwd(), 'docs/data/base/pagesApi.js'),
     },
-    getProjects: () => [
-      createTypeScriptProject({
-        name: 'base',
-        rootPath: path.join(process.cwd(), 'packages/mui-base'),
-        entryPointPath: 'src/index.d.ts',
-      }),
-    ],
+    getProjects: () => ['base'],
     getApiPages: () => findApiPages('docs/pages/base-ui/api'),
     getComponentInfo: getBaseComponentInfo,
     getHookInfo: getBaseHookInfo,
@@ -157,27 +141,15 @@ const SETTINGS: Settings[] = [
     output: {
       apiManifestPath: path.join(process.cwd(), 'docs/data/joy/pagesApi.js'),
     },
-    getProjects: () => [
-      createTypeScriptProject({
-        name: 'joy',
-        rootPath: path.join(process.cwd(), 'packages/mui-joy'),
-        entryPointPath: 'src/index.ts',
-      }),
-    ],
+    getProjects: () => ['joy'],
     getApiPages: () => findApiPages('docs/pages/joy-ui/api'),
     getComponentInfo: getJoyComponentInfo,
   },
   {
     output: {
       apiManifestPath: path.join(process.cwd(), 'docs/data/system/pagesApi.js'),
     },
-    getProjects: () => [
-      createTypeScriptProject({
-        name: 'system',
-        rootPath: path.join(process.cwd(), 'packages/mui-system'),
-        entryPointPath: 'src/index.d.ts',
-      }),
-    ],
+    getProjects: () => ['system'],
     getApiPages: () => findApiPages('docs/pages/system/api'),
     getComponentInfo: getSystemComponentInfo,
   },
@@ -187,13 +159,15 @@ type CommandOptions = { grep?: string };
 
 async function run(argv: yargs.ArgumentsCamelCase<CommandOptions>) {
   const grep = argv.grep == null ? null : new RegExp(argv.grep);
+  const buildTypeScriptProject = createTypescriptProjectBuilder(CORE_TYPESCRIPT_PROJECTS);
+
   let allBuilds: Array<PromiseSettledResult<ReactApi | null>> = [];
   await SETTINGS.reduce(async (resolvedPromise, setting) => {
     await resolvedPromise;
     /**
      * @type {string[]}
      */
-    const projects = setting.getProjects();
+    const projects = setting.getProjects().map(buildTypeScriptProject);
     const apiPagesManifestPath = setting.output.apiManifestPath;
 
     const manifestDir = apiPagesManifestPath.match(/(.*)\/[^/]+\./)?.[1];

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

@@ -0,0 +1,40 @@
+import path from 'path';
+import { CreateTypeScriptProjectOptions } from './createTypeScriptProject';
+
+export type CoreTypeScriptProjects =
+  | 'material'
+  | 'lab'
+  | 'base'
+  | 'joy'
+  | 'system'
+  | 'material-next';
+
+export const CORE_TYPESCRIPT_PROJECTS: Record<
+  CoreTypeScriptProjects,
+  Omit<CreateTypeScriptProjectOptions, 'name'>
+> = {
+  material: {
+    rootPath: path.join(process.cwd(), 'packages/mui-material'),
+    entryPointPath: 'src/index.d.ts',
+  },
+  lab: {
+    rootPath: path.join(process.cwd(), 'packages/mui-lab'),
+    entryPointPath: 'src/index.d.ts',
+  },
+  base: {
+    rootPath: path.join(process.cwd(), 'packages/mui-base'),
+    entryPointPath: 'src/index.d.ts',
+  },
+  joy: {
+    rootPath: path.join(process.cwd(), 'packages/mui-joy'),
+    entryPointPath: 'src/index.ts',
+  },
+  system: {
+    rootPath: path.join(process.cwd(), 'packages/mui-system'),
+    entryPointPath: 'src/index.d.ts',
+  },
+  'material-next': {
+    rootPath: path.join(process.cwd(), 'packages/mui-material-next'),
+    entryPointPath: 'src/index.ts',
+  },
+};

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

@@ -10,7 +10,7 @@ export interface TypeScriptProject {
   checker: ts.TypeChecker;
 }
 
-interface CreateTypeScriptProjectOptions {
+export interface CreateTypeScriptProjectOptions {
   name: string;
   rootPath: string;
   /**
@@ -47,6 +47,13 @@ export const createTypeScriptProject = (
     throw tsConfigFile.error;
   }
 
+  // The build config does not parse the `.d.ts` files, but we sometime need them to get the exports.
+  if (tsConfigFile.config.exclude) {
+    tsConfigFile.config.exclude = tsConfigFile.config.exclude.filter(
+      (pattern: string) => pattern !== 'src/**/*.d.ts',
+    );
+  }
+
   const tsConfigFileContent = ts.parseJsonConfigFileContent(
     tsConfigFile.config,
     ts.sys,
@@ -58,7 +65,7 @@ export const createTypeScriptProject = (
   }
 
   const program = ts.createProgram({
-    rootNames: [entryPointPath],
+    rootNames: tsConfigFileContent.fileNames,
     options: tsConfigFileContent.options,
   });
 
@@ -79,3 +86,27 @@ export const createTypeScriptProject = (
     checker,
   };
 };
+
+export const createTypescriptProjectBuilder = <P extends string>(
+  projectsConfig: Record<P, Omit<CreateTypeScriptProjectOptions, 'name'>>,
+) => {
+  const projects = new Map<P, TypeScriptProject>();
+
+  return (projectName: P) => {
+    const cachedProject = projects.get(projectName);
+    if (cachedProject != null) {
+      return cachedProject;
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`Building new TS project: ${projectName}`);
+
+    const project = createTypeScriptProject({
+      name: projectName,
+      ...projectsConfig[projectName],
+    });
+
+    projects.set(projectName, project);
+    return project;
+  };
+};