Build: Fix ecosystem CI resolution handling

package.json

@@ -26,16 +26,16 @@
     "nx": "nx",
     "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write",
     "start": "yarn task --task dev --template react-vite/default-ts --start-from=install",
-    "svelte-ecosystem-ci:before-test": "STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes node ./scripts/ecosystem-ci/before-test.js svelte-kit/skeleton-ts && cd ./storybook-sandboxes/svelte-kit-skeleton-ts && STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes yarn install",
-    "svelte-ecosystem-ci:build": "yarn task --task install && yarn --cwd code build svelte && STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes yarn task --task sandbox --template svelte-kit/skeleton-ts --start-from=compile --no-link --skip-cache",
-    "svelte-ecosystem-ci:test": "STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes yarn task --task test-runner --template svelte-kit/skeleton-ts --start-from=build --no-link --skip-cache && STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes yarn task --task vitest-integration --template svelte-kit/skeleton-ts --start-from=vitest-integration --no-link --skip-cache",
+    "svelte-ecosystem-ci:before-test": "./scripts/ecosystem-ci/before-test.sh svelte-kit/skeleton-ts",
+    "svelte-ecosystem-ci:build": "./scripts/ecosystem-ci/build.sh svelte-kit/skeleton-ts svelte",
+    "svelte-ecosystem-ci:test": "./scripts/ecosystem-ci/test.sh svelte-kit/skeleton-ts",
     "task": "yarn --cwd=./scripts task",
     "test": "cd code; yarn test",
     "test:watch": "cd code; yarn test:watch",
     "upload-bench": "cd scripts; yarn upload-bench",
-    "vite-ecosystem-ci:before-test": "STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes node ./scripts/ecosystem-ci/before-test.js react-vite/default-ts && cd ./storybook-sandboxes/react-vite-default-ts && yarn install",
-    "vite-ecosystem-ci:build": "STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes yarn task --task sandbox --template react-vite/default-ts --start-from=install --skip-cache",
-    "vite-ecosystem-ci:test": "STORYBOOK_SANDBOX_ROOT=./storybook-sandboxes yarn task --task test-runner-dev --template react-vite/default-ts --start-from=dev && yarn task --task test-runner --template react-vite/default-ts --start-from=build && yarn task --task vitest-integration --template react-vite/default-ts --start-from=vitest-integration"
+    "vite-ecosystem-ci:before-test": "./scripts/ecosystem-ci/before-test.sh react-vite/default-ts",
+    "vite-ecosystem-ci:build": "./scripts/ecosystem-ci/build.sh react-vite/default-ts",
+    "vite-ecosystem-ci:test": "./scripts/ecosystem-ci/test.sh react-vite/default-ts"
   },
   "packageManager": "[email protected]",
   "engines": {

scripts/ecosystem-ci/before-test.js

@@ -4,40 +4,45 @@
  * resolutions are needed to run the tests. The vite-ecosystem-ci, though, sets the resolutions in
  * the root package.json.
  */
-import { readFile, writeFile } from 'node:fs/promises';
+import { writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 // eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
 
+import { EXISTING_RESOLUTIONS } from './existing-resolutions.js';
+
 const filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(filename);
 
 const sandbox = process.argv[2] ?? 'react-vite/default-ts';
 
-const rootPackageJsonPath = resolve(__dirname, '../../package.json');
 const sandboxPackageJsonPath = resolve(
   __dirname,
-  `../../storybook-sandboxes/${sandbox.replace('/', '-')}/package.json`
+  `../../../storybook-sandboxes/${sandbox.replace('/', '-')}/package.json`
 );
 
-const rootPackageJson = JSON.parse(await readFile(rootPackageJsonPath, 'utf-8'));
-const sandboxPackageJson = JSON.parse(await readFile(sandboxPackageJsonPath, 'utf-8'));
+const { default: rootPkgJson } = await import('../../package.json', { with: { type: 'json' } });
+const { default: sandboxPkgJson } = await import(sandboxPackageJsonPath, {
+  with: { type: 'json' },
+});
 
-const resolutions = rootPackageJson.resolutions
+// copy resolutions from root package.json to sandbox package.json, excluding the known resolutions we have internally in our repo
+// ecosystem-ci will add resolutions to the root package.json, and we want to propagate ONLY those to the sandbox package.json
+const resolutionsToCopy = rootPkgJson.resolutions
   ? Object.fromEntries(
-      Object.entries(rootPackageJson.resolutions).filter(([_, v]) => !v.includes('patch:'))
+      Object.entries(rootPkgJson.resolutions).filter(([pkg]) => !EXISTING_RESOLUTIONS.has(pkg))
     )
   : {};
 
-sandboxPackageJson.resolutions = {
-  ...(sandboxPackageJson.resolutions ?? {}),
-  ...resolutions,
+sandboxPkgJson.resolutions = {
+  ...(sandboxPkgJson.resolutions ?? {}),
+  ...resolutionsToCopy,
 };
 
-await writeFile(sandboxPackageJsonPath, JSON.stringify(sandboxPackageJson, null, 2));
-const sandboxDir = dirname(sandboxPackageJsonPath);
+await writeFile(sandboxPackageJsonPath, JSON.stringify(sandboxPkgJson, null, 2));
 
+const sandboxDir = dirname(sandboxPackageJsonPath);
 await execaCommand('yarn add playwright', { cwd: sandboxDir, shell: true });
 await execaCommand('yarn playwright install', { cwd: sandboxDir, shell: true });

scripts/ecosystem-ci/before-test.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+set -e
+
+TEMPLATE=${1:?Usage: $0 <template>}
+SANDBOX_NAME=${TEMPLATE//\//-}
+
+# Run the before-test script to copy resolutions and set up Playwright
+node ./scripts/ecosystem-ci/before-test.js "$TEMPLATE"
+
+# Install dependencies in the sandbox
+cd "../storybook-sandboxes/$SANDBOX_NAME"
+yarn install

scripts/ecosystem-ci/build.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+set -e
+
+TEMPLATE=${1:?Usage: $0 <template> [renderer]}
+RENDERER=${2:-}
+
+# Install all dependencies
+yarn task --task install
+
+# If a renderer is specified, build it so it uses the resolution set by the ecosystem-ci
+if [ -n "$RENDERER" ]; then
+  yarn --cwd code build "$RENDERER"
+fi
+
+# Create the storybook-sandboxes directory with a package.json that specifies Yarn as the package manager.
+# This is required because the ecosystem-ci repo uses pnpm, and yarn refuses to install in the sandbox dir
+# if it sees a different packageManager field higher up in the directory tree.
+mkdir -p ../storybook-sandboxes
+echo "{ \"packageManager\": \"yarn@$(yarn -v)\" }" > ../storybook-sandboxes/package.json
+
+yarn task build --template "$TEMPLATE" --start-from=compile --no-link --skip-cache

scripts/ecosystem-ci/existing-resolutions.js

@@ -0,0 +1,29 @@
+/**
+ * Set of resolutions from the root package.json that should NOT be copied to sandbox package.json.
+ * These are the "existing" resolutions that Storybook maintains, as opposed to resolutions that
+ * might be injected by ecosystem-ci repos.
+ *
+ * This set must stay in sync with the resolutions in the root package.json. Run the test in
+ * before-test.test.ts to verify they match.
+ */
+export const EXISTING_RESOLUTIONS = new Set([
+  '@babel/runtime',
+  '@babel/traverse',
+  '@babel/types',
+  '@playwright/test',
+  '@testing-library/user-event@npm:^14.4.0',
+  '@testing-library/user-event@npm:^14.6.1',
+  '@types/babel__traverse@npm:*',
+  '@types/babel__traverse@npm:^7.18.0',
+  '@types/node',
+  '@types/react',
+  '@vitest/expect@npm:3.2.4',
+  '[email protected]',
+  'esbuild',
+  'playwright',
+  'playwright-core',
+  'react',
+  'serialize-javascript',
+  'type-fest',
+  'typescript',
+]);

scripts/ecosystem-ci/existing-resolutions.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import rootPkgJson from '../../package.json';
+import { EXISTING_RESOLUTIONS } from './existing-resolutions';
+
+/*
+If this test is failing for you, it means that you have changed the list of resolutions
+in the root package.json, but you have not updated the EXISTING_RESOLUTIONS set in
+scripts/ecosystem-ci/existing-resolutions.ts.
+
+The purpose of this test is to ensure that any changes to the resolutions in package.json
+are reflected in the EXISTING_RESOLUTIONS set, which is used by the ecosystem-ci before-test
+script to copy the resolutions into the sandbox package.json files.
+*/
+
+describe('ecosystem-ci', () => {
+  it('EXISTING_RESOLUTIONS should match all keys in package.json resolutions', () => {
+    const actualKeys = new Set(Object.keys(rootPkgJson.resolutions));
+    const difference = actualKeys.symmetricDifference(EXISTING_RESOLUTIONS);
+
+    expect(difference.size).toBe(0);
+  });
+});

scripts/ecosystem-ci/test.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -e
+
+TEMPLATE=${1:?Usage: $0 <template>}
+
+# Run Vitest integration tests
+yarn task --task vitest-integration --template "$TEMPLATE" --start-from=vitest-integration --no-link --skip-cache