@mui/internal-code-infra 0.0.3-canary.21 → 0.0.3-canary.23

package/README.md

@@ -1,3 +1,50 @@
 # @mui/internal-code-infra
 
 Scripts and configs to be used across MUI repos.
+
+## Publishing packages
+
+1. Go to the publish action -
+
+- [Base UI](https://github.com/mui/base-ui/actions/workflows/publish.yml)
+- [Core](https://github.com/mui/material-ui/actions/workflows/publish.yml)
+- [MUI X](https://github.com/mui/mui-x/actions/workflows/publish.yml)
+
+2. Choose "Run workflow" dropdown
+
+   > - **Branch:** master
+   > - **Commit SHA to release from:** the commit that contains the merged release on master. This commit is linked to the GitHub release.
+   > - **Run in dry-run mode:** Used for debugging.
+   > - **Create GitHub release:** Keep selected if you want a GitHub release to be automatically created from the changelog.
+   > - **npm dist tag to publish to** Use to publish legacy or canary versions.
+
+3. Click "Run workflow"
+4. Refresh the page to see the newly created workflow, and click it.
+5. The next screen shows "@username requested your review to deploy to npm-publish", click "Review deployments" and authorize your workflow run. **Never approve workflow runs you didn't initiaite.**
+
+> [!IMPORTANT]  
+> Go through the below steps if there is an error that says `The following packages are new and need to be published manually first` in the publish flow.
+
+### Adding and publishing new packages
+
+Whenever news packages are added to the repo (that will get published to npm) or a private package is turned into a public one, follow the below steps before invoking the publish workflow of the previous section.
+
+1. Goto your repo's code base on your system, open terminal and run:
+
+```bash
+pnpm code-infra publish-new-package
+```
+
+This command detects the new public packages in the repo and asks for your confirmation before publishing them to the npm registry. Add the `--dryRun` flag to skip the actual publishing.
+
+2. Goto the settings link for each packages, ie, https://www.npmjs.com/package/<pkg-name>/access , and setup `Trusted Publisher`.
+3. In `Select your publisher` step in the above link, click on the `Github Actions` button to configure Github actions based trusted publishing.
+4. Fill in the details of the repo -
+   1. `Organization or user` as `mui`,
+   2. `Repository` as per the new package
+   3. `Workflow filename*` should be `publish.yml`
+   4. `Environment name` should be `npm-publish`
+5. In the `Publishing access` section, toggle the recommended option of `Require two-factor authentication and disallow tokens`.
+6. Finally, save the changes by clicking on `Update Package Settings` button.
+
+After following these steps, the `Publish` workflow can be invoked again.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-code-infra",
-  "version": "0.0.3-canary.21",
+  "version": "0.0.3-canary.23",
   "description": "Infra scripts and configs to be used across MUI repos.",
   "type": "module",
   "license": "MIT",
@@ -33,6 +33,7 @@
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.36.0",
+    "@inquirer/confirm": "^5.1.18",
     "@next/eslint-plugin-next": "^15.5.4",
     "@octokit/auth-action": "^6.0.1",
     "@octokit/rest": "^22.0.0",
@@ -64,8 +65,8 @@
     "stylelint-config-standard": "^39.0.0",
     "typescript-eslint": "^8.45.0",
     "yargs": "^18.0.0",
-    "@mui/internal-babel-plugin-resolve-imports": "2.0.7-canary.23",
     "@mui/internal-babel-plugin-display-name": "1.0.4-canary.7",
+    "@mui/internal-babel-plugin-resolve-imports": "2.0.7-canary.23",
     "@mui/internal-babel-plugin-minify-errors": "2.0.8-canary.10"
   },
   "peerDependencies": {
@@ -97,7 +98,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitSha": "e79fecf38c0782906060995f47503918a10c19c5",
+  "gitSha": "d9d08c1e6632b905ea3cd3bc91b33493efa7ccc1",
   "scripts": {
     "typescript": "tsc -p tsconfig.json",
     "test": "pnpm -w test --project @mui/internal-code-infra",

package/src/cli/cmdArgosPush.mjs

@@ -63,8 +63,11 @@ export default /** @type {import('yargs').CommandModule<{}, Args>} */ ({
       const screenshots = await globby(`${folder}/**/*`, {
         onlyFiles: true,
       });
+      const threshold = process.env.ARGOS_THRESHOLD ? parseFloat(process.env.ARGOS_THRESHOLD) : 0.5;
 
-      console.log(`Found ${screenshots.length} screenshots.`);
+      console.log(
+        `Found ${screenshots.length} screenshots. Uploading with threshold ${threshold}.`,
+      );
       if (verbose) {
         console.log('Screenshots found:');
         screenshots.forEach((screenshot) => {
@@ -99,14 +102,22 @@ export default /** @type {import('yargs').CommandModule<{}, Args>} */ ({
           commit: circleSha1,
           branch: circleBranch,
           token: argosToken,
+          threshold,
           parallel: {
             total: batches.length,
             nonce: circleBuildNum,
           },
         });
 
+        if (verbose) {
+          console.log('Screenshots uploaded:');
+          for (const screenshot of result.screenshots) {
+            console.log(`- ${screenshot.name}. Threshold: ${screenshot.threshold}.`);
+          }
+        }
+
         console.log(
-          `Batch of ${batches[i].length} screenshots uploaded. Build URL: ${result.build.url}`,
+          `Batch of ${batches[i].length} screenshots uploaded. Threshold: ${threshold}. Build URL: ${result.build.url}`,
         );
       }
     } finally {

package/src/cli/cmdPublish.mjs

@@ -307,6 +307,16 @@ export default /** @type {import('yargs').CommandModule<{}, Args>} */ ({
       githubReleaseData = await validateGitHubRelease(version);
     }
 
+    const newPackages = await getWorkspacePackages({ nonPublishedOnly: true });
+
+    if (newPackages.length > 0) {
+      throw new Error(
+        `The following packages are new and need to be published manually first: ${newPackages.join(
+          ', ',
+        )}. Read more about it here: https://github.com/mui/mui-public/blob/master/packages/code-infra/README.md#adding-and-publishing-new-packages`,
+      );
+    }
+
     // Publish to npm (pnpm handles duplicate checking automatically)
     // No git checks, we'll do our own
     await publishToNpm(allPackages, { dryRun, noGitChecks: true, tag });

package/src/cli/cmdPublishNewPackage.mjs

@@ -0,0 +1,86 @@
+/* eslint-disable no-console */
+
+import confirm from '@inquirer/confirm';
+import chalk from 'chalk';
+import { $ } from 'execa';
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+
+import { getWorkspacePackages } from './pnpm.mjs';
+
+/**
+ * @typedef {Object} Args
+ * @property {boolean} [dryRun] If true, will only log the commands without executing them
+ */
+
+export default /** @type {import('yargs').CommandModule<{}, Args>} */ ({
+  command: 'publish-new-package [pkg...]',
+  describe: 'Publish new empty package(s) to the npm registry.',
+  builder: (yargs) =>
+    yargs.option('dryRun', {
+      type: 'boolean',
+      default: false,
+      description: 'If true, will only log the commands without executing them.',
+    }),
+  async handler(args) {
+    console.log(`🔍 Detecting new packages to publish in workspace...`);
+    const newPackages = await getWorkspacePackages({ nonPublishedOnly: true });
+
+    if (!newPackages.length) {
+      console.log('No new packages to publish.');
+      return;
+    }
+
+    console.log(`Found ${newPackages.map((pkg) => pkg.name).join(', ')} to publish.`);
+
+    const answer = await confirm({
+      message: `Do you want to publish ${newPackages.length} new package(s) to the npm registry?`,
+    });
+
+    if (!answer) {
+      return;
+    }
+
+    await Promise.all(
+      newPackages.map(async (pkg) => {
+        const newPkgDir = await fs.mkdtemp(path.join(os.tmpdir(), 'publish-new-package-'));
+        try {
+          await fs.mkdir(newPkgDir, { recursive: true });
+          const packageJson = {
+            name: pkg.name,
+            version: '0.0.1',
+          };
+          await fs.writeFile(
+            path.join(newPkgDir, 'package.json'),
+            `${JSON.stringify(packageJson, null, 2)}\n`,
+          );
+          /**
+           * @type {string[]}
+           */
+          const publishArgs = [];
+
+          if (args.dryRun) {
+            publishArgs.push('--dry-run');
+          }
+          await $({
+            cwd: newPkgDir,
+          })`npm publish --access public --tag=canary ${publishArgs}`;
+          console.log(
+            `✅ ${args.dryRun ? '[Dry run] ' : ''}Published ${chalk.bold(`${pkg.name}@${packageJson.version}`)} to npm registry.`,
+          );
+        } finally {
+          await fs.rm(newPkgDir, { recursive: true, force: true });
+        }
+      }),
+    );
+
+    const trustedPublisherLinks = newPackages
+      .map((pkg) => `https://www.npmjs.com/package/${pkg.name}/access`)
+      .join('\n');
+    console.log(`
+📝 Please ensure that the ${chalk.underline(chalk.bold('Trusted Publishers'))} settings are configured for the new packages:
+${trustedPublisherLinks}
+Read how to do that here - https://github.com/mui/mui-public/blob/master/packages/code-infra/README.md#adding-and-publishing-new-packages`);
+  },
+});

package/src/cli/index.mjs

@@ -10,6 +10,7 @@ import cmdJsonLint from './cmdJsonLint.mjs';
 import cmdListWorkspaces from './cmdListWorkspaces.mjs';
 import cmdPublish from './cmdPublish.mjs';
 import cmdPublishCanary from './cmdPublishCanary.mjs';
+import cmdPublishNewPackage from './cmdPublishNewPackage.mjs';
 import cmdSetVersionOverrides from './cmdSetVersionOverrides.mjs';
 
 const pkgJson = createRequire(import.meta.url)('../../package.json');
@@ -25,6 +26,7 @@ yargs()
   .command(cmdListWorkspaces)
   .command(cmdPublish)
   .command(cmdPublishCanary)
+  .command(cmdPublishNewPackage)
   .command(cmdSetVersionOverrides)
   .demandCommand(1, 'You need at least one command before moving on')
   .strict()

package/src/cli/pnpm.mjs

@@ -46,6 +46,7 @@ import * as semver from 'semver';
  * @typedef {Object} GetWorkspacePackagesOptions
  * @property {string|null} [sinceRef] - Git reference to filter changes since
  * @property {boolean} [publicOnly=false] - Whether to filter to only public packages
+ * @property {boolean} [nonPublishedOnly=false] - Whether to filter to only non-published packages. It by default means public packages yet to be published.
  */
 
 /**
@@ -56,6 +57,10 @@ import * as semver from 'semver';
  * @returns {Promise<PublicPackage[]>} Array of packages
  *
  * @overload
+ * @param {{ nonPublishedOnly: 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
  *
@@ -67,7 +72,7 @@ import * as semver from 'semver';
  * @returns {Promise<(PrivatePackage | PublicPackage)[]>} Array of packages
  */
 export async function getWorkspacePackages(options = {}) {
-  const { sinceRef = null, publicOnly = false } = options;
+  const { sinceRef = null, publicOnly = false, nonPublishedOnly = false } = options;
 
   // Build command with conditional filter
   const filterArg = sinceRef ? ['--filter', `...[${sinceRef}]`] : [];
@@ -91,6 +96,19 @@ export async function getWorkspacePackages(options = {}) {
     ];
   });
 
+  if (nonPublishedOnly) {
+    // Check if any of the packages are new/need manual publishing first.
+    const filteredPublicPackages = filteredPackages.filter((pkg) => !pkg.isPrivate);
+
+    const results = await Promise.all(
+      filteredPublicPackages.map(async (pkg) => {
+        const url = `${process.env.npm_config_registry || 'https://registry.npmjs.org'}/${pkg.name}`;
+        return fetch(url).then((res) => res.status === 404);
+      }),
+    );
+    return filteredPublicPackages.filter((_pkg, index) => !!results[index]);
+  }
+
   return filteredPackages;
 }