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

package/README.md

@@ -1,3 +1,3 @@
 # @mui/internal-code-infra
 
-Build scripts and configs to be used across MUI repos.
+Scripts and configs to be used across MUI repos.

package/bin/code-infra.mjs

@@ -1 +1,2 @@
+#!/usr/bin/env node
 import '../src/cli/index.mjs';

package/package.json

@@ -1,34 +1,44 @@
 {
   "name": "@mui/internal-code-infra",
-  "version": "0.0.2-canary.8",
+  "version": "0.0.2",
   "description": "Infra scripts and configs to be used across MUI repos.",
   "type": "module",
+  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/mui-public.git",
+    "url": "git+https://github.com/mui/mui-public.git",
     "directory": "packages/code-infra"
   },
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
-    "./prettier": {
-      "default": "./src/prettier.mjs"
-    },
-    "./eslint": {
-      "default": "./src/eslint/index.mjs"
-    }
+    "./prettier": "./src/prettier.mjs",
+    "./eslint": "./src/eslint/index.mjs",
+    "./babel-config": "./src/babel-config.mjs"
   },
   "bin": {
     "code-infra": "./bin/code-infra.mjs"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "^15.3.3",
+    "@argos-ci/core": "^4.1.0",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.3",
+    "@babel/plugin-syntax-typescript": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.34.0",
+    "@next/eslint-plugin-next": "^15.5.0",
     "@octokit/rest": "^22.0.0",
-    "@eslint/compat": "^1.3.1",
-    "chalk": "^5.4.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^10.1.5",
+    "@pnpm/find-workspace-dir": "^1000.1.2",
+    "babel-plugin-optimize-clsx": "^2.6.2",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "babel-plugin-transform-remove-imports": "^1.8.0",
+    "chalk": "^5.6.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-module-utils": "^2.12.1",
     "eslint-plugin-import": "^2.32.0",
@@ -36,33 +46,42 @@
     "eslint-plugin-mocha": "^11.1.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
-    "eslint-plugin-testing-library": "^7.5.3",
-    "execa": "^7.2.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc1",
+    "eslint-plugin-testing-library": "^7.6.6",
+    "execa": "^9.6.0",
     "git-url-parse": "^16.1.0",
-    "globals": "^16.2.0",
+    "globals": "^16.3.0",
     "globby": "^14.1.0",
+    "lodash-es": "^4.17.21",
     "minimatch": "^10.0.3",
     "semver": "^7.7.2",
-    "typescript-eslint": "^8.35.1",
-    "yargs": "^17.7.2"
+    "typescript-eslint": "^8.40.0",
+    "yargs": "^18.0.0",
+    "@mui/internal-babel-plugin-resolve-imports": "2.0.5",
+    "@mui/internal-babel-plugin-minify-errors": "2.0.6",
+    "@mui/internal-babel-plugin-display-name": "1.0.2"
   },
   "peerDependencies": {
     "eslint": "^9.0.0",
-    "prettier": "^3.5.3"
+    "prettier": "^3.5.3",
+    "typescript": "^5.0.0"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__preset-env": "^7.10.0",
     "@types/eslint-plugin-jsx-a11y": "^6.10.0",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
+    "@types/lodash-es": "^4.17.12",
     "@types/yargs": "^17.0.33",
-    "@typescript-eslint/parser": "^8.35.0",
-    "@typescript-eslint/rule-tester": "^8.35.0",
-    "eslint": "^9.29.0",
-    "prettier": "^3.5.3",
-    "typescript-eslint": "^8.35.0"
+    "@typescript-eslint/parser": "^8.40.0",
+    "@typescript-eslint/rule-tester": "^8.40.0",
+    "eslint": "^9.34.0",
+    "prettier": "^3.6.2",
+    "typescript-eslint": "^8.40.0"
   },
   "files": [
+    "bin",
     "build",
     "src",
     "README.md",
@@ -71,9 +90,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitSha": "53f90246206d907a865ef8e56f7ea061f1a2e8d8",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
-    "test": "pnpm -w test --project @mui/internal-code-infra"
+    "test": "pnpm -w test --project @mui/internal-code-infra",
+    "test:copy": "rm -rf build && node bin/code-infra.mjs copy-files --glob \"src/cli/*.mjs\" --glob \"src/eslint/**/*.mjs:esm\""
   }
 }

package/src/babel-config.mjs

@@ -0,0 +1,138 @@
+import pluginTransformRuntime from '@babel/plugin-transform-runtime';
+import presetEnv from '@babel/preset-env';
+import presetReact from '@babel/preset-react';
+import presetTypescript from '@babel/preset-typescript';
+import pluginDisplayName from '@mui/internal-babel-plugin-display-name';
+import pluginResolveImports from '@mui/internal-babel-plugin-resolve-imports';
+import pluginOptimizeClsx from 'babel-plugin-optimize-clsx';
+import pluginTransformInlineEnvVars from 'babel-plugin-transform-inline-environment-variables';
+import pluginRemovePropTypes from 'babel-plugin-transform-react-remove-prop-types';
+
+/**
+ * @param {Object} param0
+ * @param {boolean} [param0.debug]
+ * @param {boolean} [param0.optimizeClsx]
+ * @param {boolean} [param0.removePropTypes]
+ * @param {boolean} [param0.isTest]
+ * @param {'cjs' | 'esm'} param0.bundle
+ * @param {string | null} param0.outExtension - Specify the output file extension.
+ * @param {string} param0.runtimeVersion
+ * @returns {import('@babel/core').TransformOptions} The base Babel configuration.
+ */
+export function getBaseConfig({
+  debug = false,
+  optimizeClsx = false,
+  removePropTypes = false,
+  isTest = false,
+  bundle,
+  runtimeVersion,
+  outExtension,
+}) {
+  /**
+   * @type {import('@babel/preset-env').Options}
+   */
+  const presetEnvOptions = {
+    bugfixes: true,
+    debug,
+    modules: bundle === 'esm' ? false : 'commonjs',
+    // @TODO
+    browserslistEnv: bundle === 'esm' ? 'stable' : 'node',
+  };
+  /**
+   * @type {import('@babel/core').TransformOptions["plugins"]}
+   */
+  const plugins = [
+    [
+      pluginTransformRuntime,
+      {
+        version: runtimeVersion,
+        regenerator: false,
+        useESModules: bundle === 'esm',
+      },
+      '@babel/plugin-transform-runtime',
+    ],
+    [pluginDisplayName, {}, '@mui/internal-babel-plugin-display-name'],
+    [
+      pluginTransformInlineEnvVars,
+      {
+        include: [
+          'MUI_VERSION',
+          'MUI_MAJOR_VERSION',
+          'MUI_MINOR_VERSION',
+          'MUI_PATCH_VERSION',
+          'MUI_PRERELEASE',
+        ],
+      },
+      'babel-plugin-transform-inline-environment-variables',
+    ],
+  ];
+
+  if (removePropTypes) {
+    plugins.push([
+      pluginRemovePropTypes,
+      {
+        mode: 'unsafe-wrap',
+      },
+      'babel-plugin-transform-react-remove-prop-types',
+    ]);
+  }
+
+  if (optimizeClsx) {
+    plugins.push([pluginOptimizeClsx, {}, 'babel-plugin-optimize-clsx']);
+  }
+
+  if (bundle === 'esm' && !isTest) {
+    plugins.push([
+      pluginResolveImports,
+      { outExtension },
+      '@mui/internal-babel-plugin-resolve-imports',
+    ]);
+  }
+
+  return {
+    assumptions: {
+      noDocumentAll: true,
+      // With our case these assumptions are safe, and the
+      // resulting behavior is equivalent to spec mode.
+      setPublicClassFields: true,
+      privateFieldsAsProperties: true,
+      objectRestNoSymbols: true,
+      setSpreadProperties: true,
+    },
+    ignore: [
+      // Fix a Windows issue.
+      /@babel[\\|/]runtime/,
+      // Fix const foo = /{{(.+?)}}/gs; crashing.
+      /prettier/,
+      '**/*.template.js',
+    ],
+    presets: [
+      [presetEnv, presetEnvOptions],
+      [
+        presetReact,
+        { runtime: 'automatic', useBuiltIns: bundle === 'esm', useSpread: bundle === 'esm' },
+      ],
+      [presetTypescript],
+    ],
+    plugins,
+  };
+}
+
+/**
+ * @type {import('@babel/core').ConfigFunction}
+ */
+export default function getBabelConfig(api) {
+  const isStable = api.env(['regressions', 'stable']);
+  const isTest = api.env('test') || process.env.NODE_ENV === 'test';
+
+  return getBaseConfig({
+    debug: process.env.MUI_BUILD_VERBOSE === 'true',
+    bundle: isStable ? 'esm' : 'cjs',
+    outExtension: process.env.MUI_OUT_FILE_EXTENSION || null,
+    // any package needs to declare 7.25.0 as a runtime dependency. default is ^7.0.0
+    runtimeVersion: process.env.MUI_BABEL_RUNTIME_VERSION || '^7.25.0',
+    optimizeClsx: process.env.MUI_OPTIMIZE_CLSX === 'true',
+    removePropTypes: process.env.MUI_REMOVE_PROP_TYPES === 'true',
+    isTest,
+  });
+}

package/src/cli/babel.mjs

@@ -0,0 +1,156 @@
+/* eslint-disable no-console */
+/// <reference types="../untyped-plugins" />
+
+import { findWorkspaceDir } from '@pnpm/find-workspace-dir';
+import { globby } from 'globby';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import { $ } from 'execa';
+
+const TO_TRANSFORM_EXTENSIONS = ['.js', '.ts', '.tsx'];
+
+/**
+ * @param {string} pkgVersion
+ * @returns {Record<string, string>} An object containing version-related environment variables.
+ */
+export function getVersionEnvVariables(pkgVersion) {
+  if (!pkgVersion) {
+    throw new Error('No version found in package.json');
+  }
+
+  const [versionNumber, prerelease] = pkgVersion.split('-');
+  const [major, minor, patch] = versionNumber.split('.');
+
+  if (!major || !minor || !patch) {
+    throw new Error(`Couldn't parse version from package.json`);
+  }
+
+  return {
+    MUI_VERSION: pkgVersion,
+    MUI_MAJOR_VERSION: major,
+    MUI_MINOR_VERSION: minor,
+    MUI_PATCH_VERSION: patch,
+    MUI_PRERELEASE: prerelease,
+  };
+}
+
+/**
+ * Copies CommonJS files from one directory to another.
+ * @param {Object} param0
+ * @param {string} param0.from - The source directory.
+ * @param {string} param0.to - The destination directory.
+ * @returns {Promise<void>}
+ */
+export async function cjsCopy({ from, to }) {
+  if (
+    !(await fs
+      .stat(to)
+      .then(() => true)
+      .catch(() => false))
+  ) {
+    console.warn(`path ${to} does not exists`);
+    return;
+  }
+
+  const files = await globby('**/*.cjs', { cwd: from });
+  const cmds = files.map((file) => fs.cp(path.resolve(from, file), path.resolve(to, file)));
+  await Promise.all(cmds);
+}
+
+/**
+ * @typedef {Object} ErrorCodeMetadata
+ * @property {string} outputPath - The path where the error code file should be written.
+ * @property {'annotate' | 'throw' | 'write'} [missingError] - How to handle missing error codes.
+ * @property {string} [runtimeModule] - The runtime module to replace the errors with.
+ */
+
+const BASE_IGNORES = [
+  '**/*.test.js',
+  '**/*.test.ts',
+  '**/*.test.tsx',
+  '**/*.spec.js',
+  '**/*.spec.ts',
+  '**/*.spec.tsx',
+  '**/*.d.ts',
+  '**/*.test/*.*',
+  '**/test-cases/*.*',
+];
+
+/**
+ * @param {Object} options
+ * @param {boolean} [options.verbose=false] - Whether to enable verbose logging.
+ * @param {boolean} [options.optimizeClsx=false] - Whether to enable clsx call optimization transform.
+ * @param {boolean} [options.removePropTypes=true] - Whether to enable removal of React prop types.
+ * @param {string[]} [options.ignores] - The globs to be ignored by Babel.
+ * @param {string} options.cwd - The package root directory.
+ * @param {string} options.pkgVersion - The package version.
+ * @param {string} options.sourceDir - The source directory to build from.
+ * @param {string} options.outDir - The output directory for the build.
+ * @param {string} options.outExtension - The output file extension for the build.
+ * @param {boolean} options.hasLargeFiles - Whether the build includes large files.
+ * @param {import('../utils/build.mjs').BundleType} options.bundle - The bundles to build.
+ * @param {string} options.babelRuntimeVersion - The version of @babel/runtime to use.
+ * @returns {Promise<void>}
+ */
+export async function babelBuild({
+  cwd,
+  sourceDir,
+  outDir,
+  babelRuntimeVersion,
+  hasLargeFiles,
+  bundle,
+  pkgVersion,
+  outExtension,
+  optimizeClsx = false,
+  removePropTypes = false,
+  verbose = false,
+  ignores = [],
+}) {
+  console.log(
+    `Transpiling files to "${path.relative(path.dirname(sourceDir), outDir)}" for "${bundle}" bundle.`,
+  );
+  const workspaceDir = await findWorkspaceDir(cwd);
+  if (!workspaceDir) {
+    throw new Error(`No workspace found for ${cwd}`);
+  }
+  let configFile = path.join(workspaceDir, 'babel.config.js');
+  if (
+    !(await fs
+      .stat(configFile)
+      .then(() => true)
+      .catch(() => false))
+  ) {
+    configFile = path.join(workspaceDir, 'babel.config.mjs');
+  }
+  const env = {
+    NODE_ENV: 'production',
+    BABEL_ENV: bundle === 'esm' ? 'stable' : 'node',
+    MUI_BUILD_VERBOSE: verbose ? 'true' : undefined,
+    MUI_OPTIMIZE_CLSX: optimizeClsx ? 'true' : undefined,
+    MUI_REMOVE_PROP_TYPES: removePropTypes ? 'true' : undefined,
+    MUI_BABEL_RUNTIME_VERSION: babelRuntimeVersion,
+    MUI_OUT_FILE_EXTENSION: outExtension ?? '.js',
+    ...getVersionEnvVariables(pkgVersion),
+  };
+  const res = await $({
+    stdio: 'inherit',
+    preferLocal: true,
+    localDir: import.meta.dirname,
+    env: {
+      ...process.env,
+      ...env,
+    },
+  })`babel --config-file ${configFile} --extensions ${TO_TRANSFORM_EXTENSIONS.join(',')} ${sourceDir} --out-dir ${outDir} --ignore ${BASE_IGNORES.concat(ignores).join(',')} --out-file-extension ${outExtension !== '.js' ? outExtension : '.js'} --compact ${hasLargeFiles ? 'false' : 'auto'}`;
+
+  if (res.stderr) {
+    throw new Error(`Command: '${res.escapedCommand}' failed with \n${res.stderr}`);
+  }
+  if (verbose) {
+    console.log(`Command: '${res.escapedCommand}' succeeded with \n${res.stdout}`);
+  }
+
+  // cjs for reexporting from commons only modules.
+  // If we need to rely more on this we can think about setting up a separate commonjs => commonjs build for .cjs files to .cjs
+  // `--extensions-.cjs --out-file-extension .cjs`
+  await cjsCopy({ from: sourceDir, to: outDir });
+}

package/src/cli/cmdArgosPush.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+
+import * as fs from 'node:fs/promises';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import { globby } from 'globby';
+import { upload } from '@argos-ci/core';
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function requireEnv(name) {
+  const val = process.env[name];
+  if (!val) {
+    throw new Error(`Missing required env var: ${name}`);
+  }
+  return val;
+}
+
+/**
+ * Alternatve to `@argos-ci/cli` that can upload screenshots in batches.
+ */
+
+const BATCH_SIZE = 200;
+
+/**
+ * @typedef {Object} Args
+ * @property {boolean} [verbose] - Run with verbose logging
+ * @property {string} folder - Screenshots folder path
+ */
+
+export default /** @type {import('yargs').CommandModule<{}, Args>} */ ({
+  command: 'argos-push',
+  describe: 'Upload screenshots to Argos CI in batches',
+  builder: (yargs) => {
+    return yargs
+      .option('folder', {
+        type: 'string',
+        demandOption: true,
+        description: 'Path to the screenshots folder',
+      })
+      .option('verbose', {
+        alias: 'v',
+        type: 'boolean',
+        default: false,
+        description: 'Run with verbose logging',
+      });
+  },
+  handler: async (argv) => {
+    const { folder, verbose = false } = argv;
+
+    const argosToken = requireEnv('ARGOS_TOKEN');
+    const circleSha1 = requireEnv('CIRCLE_SHA1');
+    const circleBranch = requireEnv('CIRCLE_BRANCH');
+    const circleBuildNum = requireEnv('CIRCLE_BUILD_NUM');
+
+    const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'argos-screenshots-'));
+
+    try {
+      const screenshots = await globby(`${folder}/**/*`, {
+        onlyFiles: true,
+      });
+
+      console.log(`Found ${screenshots.length} screenshots.`);
+      if (verbose) {
+        console.log('Screenshots found:');
+        screenshots.forEach((screenshot) => {
+          console.log(`  - ${screenshot}`);
+        });
+      }
+
+      const batches = [];
+      for (let i = 0; i < screenshots.length; i += BATCH_SIZE) {
+        batches.push(screenshots.slice(i, i + BATCH_SIZE));
+      }
+
+      await Promise.all(
+        batches.map((screenshotBatch, batchIndex) =>
+          Promise.all(
+            screenshotBatch.map(async (screenshot) => {
+              const relativePath = path.relative(folder, screenshot);
+              const targetPath = path.join(tempDir, `${batchIndex}`, relativePath);
+              const targetDir = path.dirname(targetPath);
+
+              await fs.mkdir(targetDir, { recursive: true });
+              await fs.copyFile(screenshot, targetPath);
+            }),
+          ),
+        ),
+      );
+
+      for (let i = 0; i < batches.length; i += 1) {
+        // eslint-disable-next-line no-await-in-loop
+        const result = await upload({
+          root: `${tempDir}/${i}`,
+          commit: circleSha1,
+          branch: circleBranch,
+          token: argosToken,
+          parallel: {
+            total: batches.length,
+            nonce: circleBuildNum,
+          },
+        });
+
+        console.log(
+          `Batch of ${batches[i].length} screenshots uploaded. Build URL: ${result.build.url}`,
+        );
+      }
+    } finally {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    }
+  },
+});