@mui/internal-code-infra 0.0.2-canary.9 → 0.0.2

package/src/cli/pnpm.mjs

@@ -1,15 +1,24 @@
 #!/usr/bin/env node
 
 import { $ } from 'execa';
-import * as fs from 'fs/promises';
-import * as path from 'path';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
 import * as semver from 'semver';
 
 /**
- * @typedef {Object} Package
+ * @typedef {Object} PrivatePackage
+ * @property {string} [name] - Package name
+ * @property {string} [version] - Package version
+ * @property {string} path - Package directory path
+ * @property {true} isPrivate - Whether the package is private
+ */
+
+/**
+ * @typedef {Object} PublicPackage
  * @property {string} name - Package name
  * @property {string} version - Package version
  * @property {string} path - Package directory path
+ * @property {false} isPrivate - Whether the package is private
  */
 
 /**
@@ -21,7 +30,6 @@ import * as semver from 'semver';
 /**
  * @typedef {Object} PublishOptions
  * @property {boolean} [dryRun] - Whether to run in dry-run mode
- * @property {boolean} [provenance] - Whether to include provenance information
  * @property {boolean} [noGitChecks] - Whether to skip git checks
  */
 
@@ -41,8 +49,21 @@ import * as semver from 'semver';
 
 /**
  * Get workspace packages with optional filtering
+ *
+ * @overload
+ * @param {{ publicOnly: true } & GetWorkspacePackagesOptions} [options={}] - Options for filtering packages
+ * @returns {Promise<PublicPackage[]>} Array of packages
+ *
+ * @overload
+ * @param {{ publicOnly?: false | undefined } & GetWorkspacePackagesOptions} [options={}] - Options for filtering packages
+ * @returns {Promise<PrivatePackage[]>} Array of packages
+ *
+ * @overload
+ * @param {GetWorkspacePackagesOptions} [options={}] - Options for filtering packages
+ * @returns {Promise<(PrivatePackage | PublicPackage)[]>} Array of packages
+ *
  * @param {GetWorkspacePackagesOptions} [options={}] - Options for filtering packages
- * @returns {Promise<Package[]>} Array of packages
+ * @returns {Promise<(PrivatePackage | PublicPackage)[]>} Array of packages
  */
 export async function getWorkspacePackages(options = {}) {
   const { sinceRef = null, publicOnly = false } = options;
@@ -54,18 +75,20 @@ export async function getWorkspacePackages(options = {}) {
   const packageData = JSON.parse(result.stdout);
 
   // Filter packages based on options
-  const filteredPackages = packageData
-    .filter((pkg) => !publicOnly || !pkg.private)
-    .map((pkg) => {
-      if (!pkg.name || !pkg.version) {
-        throw new Error(`Invalid package data: ${JSON.stringify(pkg)}`);
-      }
-      return {
+  const filteredPackages = packageData.flatMap((pkg) => {
+    const isPrivate = pkg.private || !pkg.name || !pkg.version;
+    if (publicOnly && isPrivate) {
+      return [];
+    }
+    return [
+      /** @type {PublicPackage | PrivatePackage} */ ({
         name: pkg.name,
         version: pkg.version,
         path: pkg.path,
-      };
-    });
+        isPrivate,
+      }),
+    ];
+  });
 
   return filteredPackages;
 }
@@ -105,7 +128,7 @@ export async function getPackageVersionInfo(packageName, baseVersion) {
 
 /**
  * Publish packages with the given options
- * @param {Package[]} packages - Packages to publish
+ * @param {PublicPackage[]} packages - Packages to publish
  * @param {string} tag - npm tag to publish with
  * @param {PublishOptions} [options={}] - Publishing options
  * @returns {Promise<void>}
@@ -127,14 +150,7 @@ export async function publishPackages(packages, tag, options = {}) {
     args.push('--no-git-checks');
   }
 
-  // Set up environment variables
-  /** @type {Record<string, string>} */
-  const env = {};
-  if (options.provenance) {
-    env.NPM_CONFIG_PROVENANCE = 'true';
-  }
-
-  await $({ stdio: 'inherit', env })`pnpm -r publish --access public --tag=${tag} ${args}`;
+  await $({ stdio: 'inherit' })`pnpm -r publish --access public --tag=${tag} ${args}`;
 }
 
 /**
@@ -167,6 +183,29 @@ export async function getCurrentGitSha() {
   return result.stdout.trim();
 }
 
+/**
+ * Resolve a package@version specifier to an exact version
+ * @param {string} packageSpec - Package specifier in format "package@version"
+ * @returns {Promise<string>} Exact version string
+ */
+export async function resolveVersion(packageSpec) {
+  const result = await $`pnpm info ${packageSpec} version --json`;
+  const versions = JSON.parse(result.stdout);
+  return typeof versions === 'string' ? versions : versions[versions.length - 1];
+}
+
+/**
+ * Find the version of a dependency for a specific package@version
+ * @param {string} packageSpec - Package specifier in format "package@version"
+ * @param {string} dependency - Dependency name to look up
+ * @returns {Promise<string>} Exact version string of the dependency
+ */
+export async function findDependencyVersionFromSpec(packageSpec, dependency) {
+  const result = await $`pnpm info ${packageSpec} dependencies.${dependency}`;
+  const spec = result.stdout.trim();
+  return resolveVersion(`${dependency}@${spec}`);
+}
+
 /**
  * Get the maximum semver version between two versions
  * @param {string} a

package/src/cli/typescript.mjs

@@ -0,0 +1,175 @@
+/* eslint-disable no-console */
+import * as babel from '@babel/core';
+import pluginTypescriptSyntax from '@babel/plugin-syntax-typescript';
+import pluginResolveImports from '@mui/internal-babel-plugin-resolve-imports';
+import pluginRemoveImports from 'babel-plugin-transform-remove-imports';
+import { $ } from 'execa';
+import { globby } from 'globby';
+import * as fs from 'node:fs/promises';
+import * as os from 'node:os';
+import * as path from 'node:path';
+
+const $$ = $({ stdio: 'inherit' });
+
+/**
+ * Emits TypeScript declaration files.
+ * @param {string} tsconfig - The path to the tsconfig.json file.
+ * @param {string} outDir - The output directory for the declaration files.
+ */
+export async function emitDeclarations(tsconfig, outDir) {
+  const tsconfigDir = path.dirname(tsconfig);
+  const rootDir = path.resolve(tsconfigDir, './src');
+  await $$`tsc
+    -p ${tsconfig}
+    --rootDir ${rootDir}
+    --outDir ${outDir}
+    --declaration
+    --emitDeclarationOnly
+    --noEmit false
+    --composite false
+    --incremental false`;
+}
+
+/**
+ * @param {string} sourceDirectory
+ * @param {string} destinationDirectory
+ */
+export async function copyDeclarations(sourceDirectory, destinationDirectory) {
+  const fullSourceDirectory = path.resolve(sourceDirectory);
+  const fullDestinationDirectory = path.resolve(destinationDirectory);
+
+  console.log(`Copying declarations from ${fullSourceDirectory} to ${fullDestinationDirectory}`);
+
+  await fs.cp(fullSourceDirectory, fullDestinationDirectory, {
+    recursive: true,
+    filter: async (src) => {
+      if (src.startsWith('.')) {
+        // ignore dotfiles
+        return false;
+      }
+      const stats = await fs.stat(src);
+      if (stats.isDirectory()) {
+        return true;
+      }
+      return src.endsWith('.d.ts') || src.endsWith('.d.mts');
+    },
+  });
+}
+
+/**
+ * Post-processes TypeScript declaration files.
+ * @param {Object} param0
+ * @param {string} param0.directory - The directory containing the declaration files.
+ */
+async function postProcessDeclarations({ directory }) {
+  const dtsFiles = await globby('**/*.d.ts', {
+    absolute: true,
+    cwd: directory,
+  });
+  if (dtsFiles.length === 0) {
+    console.log(`No d.ts files found in ${directory}. Skipping post-processing.`);
+    return;
+  }
+
+  /**
+   * @type {import('@babel/core').PluginItem[]}
+   */
+  const babelPlugins = [
+    [pluginTypescriptSyntax, { dts: true }],
+    [pluginResolveImports],
+    [pluginRemoveImports, { test: /\.css$/ }],
+  ];
+
+  await Promise.all(
+    dtsFiles.map(async (dtsFile) => {
+      const result = await babel.transformFileAsync(dtsFile, {
+        configFile: false,
+        plugins: babelPlugins,
+      });
+
+      if (typeof result?.code === 'string') {
+        await fs.writeFile(dtsFile, result.code);
+      } else {
+        console.error('failed to transform', dtsFile);
+      }
+    }),
+  );
+}
+
+/**
+ * Renames TypeScript declaration files.
+ * @param {Object} param0
+ * @param {string} param0.directory - The directory containing the declaration files.
+ */
+async function renameDeclarations({ directory }) {
+  const dtsFiles = await globby('**/*.d.ts', { absolute: true, cwd: directory });
+  if (dtsFiles.length === 0) {
+    return;
+  }
+  console.log(`Renaming d.ts files to d.mts in ${directory}`);
+  await Promise.all(
+    dtsFiles.map(async (dtsFile) => {
+      const newFileName = dtsFile.replace(/\.d\.ts$/, '.d.mts');
+      await fs.rename(dtsFile, newFileName);
+    }),
+  );
+}
+
+/**
+ * Creates TypeScript declaration files for the specified bundles.
+ * Types are first created in a temporary directory and then copied to the appropriate bundle directories parallelly.
+ * After copying, babel transformations are applied to the copied files because they need to be alongside the actual js files for proper resolution.
+ *
+ * @param {Object} param0
+ * @param {boolean} [param0.isMjsBuild] - Whether the build is for ESM (ECMAScript Modules).
+ * @param {{type: import('../utils/build.mjs').BundleType, dir: string}[]} param0.bundles - The bundles to create declarations for.
+ * @param {string} param0.srcDir - The source directory.
+ * @param {string} param0.buildDir - The build directory.
+ * @param {string} param0.cwd - The current working directory.
+ * @param {boolean} param0.skipTsc - Whether to skip running TypeScript compiler (tsc) for building types.
+ */
+export async function createTypes({ bundles, srcDir, buildDir, cwd, skipTsc, isMjsBuild }) {
+  const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'code-infra-build-tsc-'));
+
+  try {
+    await copyDeclarations(srcDir, tmpDir);
+    const tsconfigPath = path.join(cwd, 'tsconfig.build.json');
+    const tsconfigExists = await fs.stat(tsconfigPath).then(
+      (file) => file.isFile(),
+      () => false,
+    );
+    if (!skipTsc) {
+      if (!tsconfigExists) {
+        throw new Error(
+          'Unable to find a tsconfig to build this project. ' +
+            `The package root needs to contain a 'tsconfig.build.json'. ` +
+            `The package root is '${cwd}'`,
+        );
+      }
+      console.log(`Building types for ${tsconfigPath} in ${tmpDir}`);
+      await emitDeclarations(tsconfigPath, tmpDir);
+    }
+
+    for (const bundle of bundles) {
+      const { type: bundleType, dir: bundleOutDir } = bundle;
+      const fullOutDir = path.join(buildDir, bundleOutDir);
+      // eslint-disable-next-line no-await-in-loop
+      await fs.cp(tmpDir, fullOutDir, {
+        recursive: true,
+        force: false,
+      });
+      // eslint-disable-next-line no-await-in-loop
+      await postProcessDeclarations({
+        directory: fullOutDir,
+      });
+      if (bundleType === 'esm' && isMjsBuild) {
+        // eslint-disable-next-line no-await-in-loop
+        await renameDeclarations({
+          directory: fullOutDir,
+        });
+      }
+    }
+  } finally {
+    await fs.rm(tmpDir, { recursive: true, force: true });
+  }
+}

package/src/eslint/baseConfig.mjs

@@ -1,14 +1,16 @@
 import { includeIgnoreFile } from '@eslint/compat';
+import eslintJs from '@eslint/js';
 import prettier from 'eslint-config-prettier/flat';
-import reactCompilerPlugin from 'eslint-plugin-react-compiler';
+import importPlugin from 'eslint-plugin-import';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import reactPlugin from 'eslint-plugin-react';
+import { configs as reactCompilerPluginConfigs } from 'eslint-plugin-react-compiler';
 import { configs as reactHookConfigs } from 'eslint-plugin-react-hooks';
 import globals from 'globals';
-import * as tseslint from 'typescript-eslint';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
+import * as tseslint from 'typescript-eslint';
 
-import { airbnbBaseConfig, airbnbReactConfig } from './airbnb/base.mjs';
-import airbnbTypescript from './airbnb/typescript.mjs';
 import { createCoreConfig } from './material-ui/config.mjs';
 import muiPlugin from './material-ui/index.mjs';
 /**
@@ -36,16 +38,19 @@ export function createBaseConfig(
   return /** @type {import('eslint').Linter.Config[]} */ (
     tseslint.config(
       ...ignoreRules,
-      airbnbBaseConfig,
-      airbnbReactConfig,
-      airbnbTypescript,
+      eslintJs.configs.recommended,
+      importPlugin.flatConfigs.recommended,
+      importPlugin.flatConfigs.react,
+      jsxA11yPlugin.flatConfigs.recommended,
+      reactPlugin.configs.flat.recommended,
       reactHookConfigs.recommended,
-      enableReactCompiler ? reactCompilerPlugin.configs.recommended : {},
+      tseslint.configs.recommended,
+      importPlugin.flatConfigs.typescript,
+      enableReactCompiler ? reactCompilerPluginConfigs.recommended : {},
       prettier,
       {
         name: 'typescript-eslint-parser',
         languageOptions: {
-          parser: tseslint.parser,
           ecmaVersion: 7,
           globals: {
             ...globals.es2020,
@@ -54,19 +59,8 @@ export function createBaseConfig(
           },
         },
         plugins: {
-          '@typescript-eslint': tseslint.plugin,
           'material-ui': muiPlugin,
         },
-        settings: {
-          'import/parsers': {
-            '@typescript-eslint/parser': ['.ts', '.tsx'],
-          },
-          'import/resolver': {
-            typescript: {
-              project: ['tsconfig.node.json', 'apps/*/tsconfig.json', 'packages/*/tsconfig.json'],
-            },
-          },
-        },
         extends: createCoreConfig({ reactCompilerEnabled: enableReactCompiler }),
       },
       {
@@ -82,6 +76,27 @@ export function createBaseConfig(
           ],
         },
       },
+      // Lint rule to disallow usage of typescript namespaces.We've seen at least two problems with them:
+      //   * Creates non-portable types in base ui. [1]
+      //   * This pattern [2] leads to broken bundling in codesandbox [3].
+      // Gauging the ecosystem it also looks like support for namespaces in tooling is poor and tends to
+      // be treated as a deprecated feature.
+      // [1] https://github.com/mui/base-ui/pull/2324
+      // [2] https://github.com/mui/mui-x/blob/1cf853ed45cf301211ece1c0ca21981ea208edfb/packages/x-virtualizer/src/models/core.ts#L4-L10
+      // [3] https://codesandbox.io/embed/kgylpd?module=/src/Demo.tsx&fontsize=12
+      {
+        rules: {
+          '@typescript-eslint/no-namespace': 'error',
+        },
+      },
+      // Part of the migration away from airbnb config. Turned of initially.
+      {
+        rules: {
+          '@typescript-eslint/no-explicit-any': 'off',
+          '@typescript-eslint/no-unsafe-function-type': 'off',
+          '@typescript-eslint/no-empty-object-type': 'off',
+        },
+      },
     )
   );
 }