Build: Fix publish script

.gitignore

@@ -50,3 +50,5 @@ code/playwright-results/
 code/playwright-report/
 code/playwright/.cache/
 code/bench-results/
+
+/packs

scripts/run-registry.ts

@@ -7,6 +7,8 @@ import program from 'commander';
 import { runServer, parseConfigFile } from 'verdaccio';
 import pLimit from 'p-limit';
 import type { Server } from 'http';
+import { mkdir } from 'fs/promises';
+import { PACKS_DIRECTORY } from './utils/constants';
 // @ts-expect-error (Converted from ts-ignore)
 import { maxConcurrentTasks } from './utils/concurrency';
 import { listOfPackages } from './utils/list-packages';
@@ -53,12 +55,27 @@ const currentVersion = async () => {
   return version;
 };
 
-const publish = (packages: { name: string; location: string }[], url: string) => {
+const publish = async (packages: { name: string; location: string }[], url: string) => {
   logger.log(`Publishing packages with a concurrency of ${maxConcurrentTasks}`);
 
   const limit = pLimit(maxConcurrentTasks);
   let i = 0;
 
+  /**
+   * We need to "pack" our packages before publishing to npm because our package.json files contain yarn specific version "ranges".
+   * such as "workspace:*"
+   *
+   * We can't publish to npm if the package.json contains these ranges. So with `yarn pack` we create a tarball that we can publish.
+   *
+   * However this bug exists in NPM: https://github.com/npm/cli/issues/4533!
+   * Which causes the NPM CLI to disregard the tarball CLI argument and instead re-create a tarball.
+   * But NPM doesn't replace the yarn version ranges.
+   *
+   * So we create the tarball ourselves and move it to another location on the FS.
+   * Then we change-directory to that directory and publish the tarball from there.
+   */
+  await mkdir(PACKS_DIRECTORY, { recursive: true }).catch(() => {});
+
   return Promise.all(
     packages.map(({ name, location }) =>
       limit(
@@ -70,7 +87,9 @@ const publish = (packages: { name: string; location: string }[], url: string) =>
                 '.'
               )})`
             );
-            const command = `cd ${location} && yarn pack && npm publish ./package.tgz --registry ${url} --force --access restricted --ignore-scripts && rm ./package.tgz`;
+
+            const tarballFilename = `${name.replace('@', '').replace('/', '-')}.tgz`;
+            const command = `cd ${location} && yarn pack --out=${PACKS_DIRECTORY}/${tarballFilename} && cd ${PACKS_DIRECTORY} && npm publish ./${tarballFilename} --registry ${url} --force --access restricted --ignore-scripts`;
             exec(command, (e) => {
               if (e) {
                 rej(e);

scripts/utils/constants.ts

@@ -3,10 +3,12 @@ import { join } from 'path';
 export const AFTER_DIR_NAME = 'after-storybook';
 export const BEFORE_DIR_NAME = 'before-storybook';
 
-export const CODE_DIRECTORY = join(__dirname, '..', '..', 'code');
-export const REPROS_DIRECTORY = join(__dirname, '..', '..', 'repros');
-export const SANDBOX_DIRECTORY = join(__dirname, '..', '..', 'sandbox');
-export const JUNIT_DIRECTORY = join(__dirname, '..', '..', 'test-results');
+export const ROOT_DIRECTORY = join(__dirname, '..', '..');
+export const CODE_DIRECTORY = join(ROOT_DIRECTORY, 'code');
+export const PACKS_DIRECTORY = join(ROOT_DIRECTORY, 'packs');
+export const REPROS_DIRECTORY = join(ROOT_DIRECTORY, 'repros');
+export const SANDBOX_DIRECTORY = join(ROOT_DIRECTORY, 'sandbox');
+export const JUNIT_DIRECTORY = join(ROOT_DIRECTORY, 'test-results');
 
 export const LOCAL_REGISTRY_URL = 'http://localhost:6001';
 export const SCRIPT_TIMEOUT = 5 * 60 * 1000;