ci: split publish to build and publish (#4042)

Saadnajmi · web-flow · commit 813bb771920d · 2026-03-05T09:17:32.000Z
* ci: split publish to build and publish

* npm publish tarballs
diff --git a/.ado/azure-pipelines.publish.yml b/.ado/azure-pipelines.publish.yml
@@ -45,19 +45,20 @@ extends:
         environmentsEs6: true
         environmentsNode: true
     stages:
-      - stage: main
+      - stage: Build
+        displayName: Build & Pack
         jobs:
-          - job: NPMPublish
-            displayName: NPM Publish
+          - job: BuildAndPack
+            displayName: Build, Test & Pack
             pool:
               name: Azure-Pipelines-1ESPT-ExDShared
               image: ubuntu-latest
               os: linux
             templateContext:
               outputs:
                 - output: pipelineArtifact
-                  targetPath: $(System.DefaultWorkingDirectory)
-                  artifactName: dist
+                  targetPath: $(System.DefaultWorkingDirectory)/_packed
+                  artifactName: packed-tarballs
             steps:
               - task: UseNode@1
                 inputs:
@@ -70,25 +71,71 @@ extends:
 
               - script: |
                   yarn buildci
-                displayName: 'yarn buildci [test]'
+                displayName: 'yarn buildci [build + test + lint]'
+
+              - script: |
+                  yarn lage pack --verbose --grouped
+                displayName: 'Pack all public packages'
+
+              - script: |
+                  echo "Packed tarballs:"
+                  ls -la $(System.DefaultWorkingDirectory)/_packed/
+                displayName: 'List packed tarballs'
+
+      - stage: Publish
+        displayName: Publish to NPM
+        dependsOn: Build
+        condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'), not(${{ parameters.skipNpmPublish }}))
+        jobs:
+          - job: PublishPackages
+            displayName: Publish NPM Packages
+            pool:
+              name: Azure-Pipelines-1ESPT-ExDShared
+              image: ubuntu-latest
+              os: linux
+            steps:
+              - task: UseNode@1
+                inputs:
+                  version: '22.x'
+                displayName: 'Use Node.js 22.x'
+
+              - task: DownloadPipelineArtifact@2
+                inputs:
+                  artifactName: packed-tarballs
+                  targetPath: $(System.DefaultWorkingDirectory)/_packed
+                displayName: 'Download packed tarballs'
+
+              - script: |
+                  echo "Downloaded tarballs:"
+                  ls -la $(System.DefaultWorkingDirectory)/_packed/
+                displayName: 'List downloaded tarballs'
+
+              - script: |
+                  yarn --immutable
+                displayName: 'yarn install --immutable'
 
               - script: |
                   yarn config set npmPublishAccess public
                   yarn config set npmPublishRegistry "https://registry.npmjs.org"
                   yarn config set npmAuthToken $(npmAuth)
-                displayName: 'Configure yarn for npm publishing'
-                condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'), not(${{ parameters.skipNpmPublish }}))
+                  npm config set //registry.npmjs.org/:_authToken $(npmAuth)
+                displayName: 'Configure npm publishing auth'
 
               - script: |
                   # https://github.com/changesets/changesets/issues/432
                   # We can't use `changeset publish` because it doesn't support workspaces, so we have to publish each package individually
                   yarn lage publish --verbose --grouped --reporter azureDevops
                 displayName: 'Publish NPM Packages'
-                condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'), not(${{ parameters.skipNpmPublish }}))
 
               - script: |
                   yarn config unset npmPublishAccess
                   yarn config unset npmAuthToken
                   yarn config unset npmPublishRegistry
-                displayName: 'Cleanup yarn npm config'
+                  npm config delete //registry.npmjs.org/:_authToken
+                displayName: 'Cleanup npm publishing auth'
+                condition: always()
+
+              - script: |
+                  git clean -dfx
+                displayName: 'Clean up working directory'
                 condition: always()
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -320,6 +320,9 @@ jobs:
       - name: Build packages
         run: yarn build
 
+      - name: Pack packages
+        run: yarn lage pack --verbose --grouped
+
       - name: Simulate publish
         run: yarn lage publish-dry-run --verbose --grouped
 
diff --git a/.gitignore b/.gitignore
@@ -79,6 +79,9 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
+# Pack staging directory
+_packed/
+
 # Yarn Integrity file
 .yarn-integrity
 
diff --git a/lage.config.js b/lage.config.js
@@ -46,11 +46,21 @@ const config = {
       inputs: [],
       outputs: [],
     },
+    pack: {
+      dependsOn: ['build-all', '^pack'],
+      type: 'worker',
+      options: {
+        worker: 'scripts/src/worker/pack.mts',
+        outputDir: '_packed',
+      },
+      cache: false,
+    },
     publish: {
       dependsOn: ['^publish'],
       type: 'worker',
       options: {
         worker: 'scripts/src/worker/publish.mts',
+        outputDir: '_packed',
       },
       cache: false,
     },
@@ -59,6 +69,7 @@ const config = {
       type: 'worker',
       options: {
         worker: 'scripts/src/worker/publish.mts',
+        outputDir: '_packed',
         dryRun: true,
       },
       cache: false,
diff --git a/scripts/src/worker/pack.mts b/scripts/src/worker/pack.mts
@@ -0,0 +1,36 @@
+import type { WorkerRunnerFunction } from 'lage';
+
+import { $, fs } from 'zx';
+import { join, resolve } from 'node:path';
+
+/**
+ * Lage worker that runs `yarn npm pack` for each public package,
+ * collecting the resulting .tgz files into a flat staging directory.
+ *
+ * The output directory is passed via `target.options.outputDir` in lage.config.js.
+ * The tgz filename is derived from the package name and version so it is
+ * unique and easy to correlate back to the package.
+ */
+export const run: WorkerRunnerFunction = async ({ target }) => {
+  const pkg = await fs.readJson(join(target.cwd, 'package.json'));
+
+  if (pkg.private) {
+    return;
+  }
+
+  const outputDir = target.options?.outputDir as string | undefined;
+  if (!outputDir) {
+    throw new Error('pack worker requires options.outputDir to be set in lage.config.js');
+  }
+
+  // Resolve relative to cwd (lage runs from repo root, so this resolves correctly)
+  const stagingDir = resolve(outputDir);
+  await fs.mkdirp(stagingDir);
+
+  // Build a safe filename: @fluentui-react-native/button@1.0.0 -> fluentui-react-native-button-1.0.0.tgz
+  const safeName = (pkg.name as string).replace(/@/g, '').replace(/\//g, '-');
+  const tgzFilename = `${safeName}-${pkg.version}.tgz`;
+  const outPath = join(stagingDir, tgzFilename);
+
+  await $({ cwd: target.cwd, verbose: true })`yarn pack --out ${outPath}`;
+};
diff --git a/scripts/src/worker/publish.mts b/scripts/src/worker/publish.mts
@@ -1,7 +1,33 @@
 import type { WorkerRunnerFunction } from 'lage';
 
 import { $, fs } from 'zx';
-import { join } from 'node:path';
+import { join, resolve } from 'node:path';
+
+/**
+ * Find the tarball for a package in the output directory.
+ * Returns the full path if found, undefined otherwise.
+ */
+async function findTarball(pkg: { name: string; version: string }, outputDir: string): Promise<string | undefined> {
+  const stagingDir = resolve(outputDir);
+  const safeName = (pkg.name as string).replace(/@/g, '').replace(/\//g, '-');
+  const tgzFilename = `${safeName}-${pkg.version}.tgz`;
+  const tgzPath = join(stagingDir, tgzFilename);
+
+  if (await fs.pathExists(tgzPath)) {
+    return tgzPath;
+  }
+
+  // Fallback: match by package name prefix in case version format differs
+  if (await fs.pathExists(stagingDir)) {
+    const files = await fs.readdir(stagingDir);
+    const match = files.find((f: string) => f.startsWith(`${safeName}-`) && f.endsWith('.tgz'));
+    if (match) {
+      return join(stagingDir, match);
+    }
+  }
+
+  return undefined;
+}
 
 export const run: WorkerRunnerFunction = async ({ target }) => {
   const pkg = await fs.readJson(join(target.cwd, 'package.json'));
@@ -11,7 +37,18 @@ export const run: WorkerRunnerFunction = async ({ target }) => {
   }
 
   const dryRun = target.options?.dryRun ?? false;
-  const args = ['--tolerate-republish', ...(dryRun ? ['--dry-run'] : [])];
+  const outputDir = target.options?.outputDir as string | undefined;
 
-  await $({ cwd: target.cwd, verbose: true })`yarn npm publish ${args}`;
+  // If an outputDir is configured, look for a pre-packed tarball
+  const tarball = outputDir ? await findTarball(pkg, outputDir) : undefined;
+
+  if (tarball) {
+    // yarn npm publish doesn't support tarballs, so use npm directly
+    const args = ['publish', tarball, '--access', 'public', ...(dryRun ? ['--dry-run'] : [])];
+    await $({ cwd: target.cwd, verbose: true })`npm ${args}`;
+  } else {
+    // No tarball found — publish from source (local dev / dry-run)
+    const args = ['--tolerate-republish', ...(dryRun ? ['--dry-run'] : [])];
+    await $({ cwd: target.cwd, verbose: true })`yarn npm publish ${args}`;
+  }
 };
