chore(tooling): adapt publishing workflow for new monorepo structure (#5851)

* chore: update and streamline publishing workflow for new monorepo structure

Refactors the publishing and release management workflow to support the
dual-generation monorepo architecture:

- Update Changesets configuration to recognize both 1st-gen and 2nd-gen
  workspaces, enabling independent versioning strategies

- Refactor release scripts to delegate to generation-specific publishing
  workflows rather than operating on a flat package structure

- Update CI/CD publishing jobs to build, test, and publish both generations
  with appropriate dependency handling for the shared Core library

- Preserve existing 1st-gen package publishing behavior to avoid disruption
  to current consumers

This workflow enables continuous delivery of improvements to 1st-gen customers
while supporting independent 2nd-gen package releases.

Author: rubencarvalho

.circleci/config.yml

@@ -22,7 +22,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: fe5761e6acafee627d7782f8f8856ca05a69260c
+        default: 89cb380330cef18d34c0d4cf893790d9c7167b08
     wireit_cache_name:
         type: string
         default: wireit

.nvmrc

@@ -1 +1 @@
-20.13.1
+20.19.0

1st-gen/package.json

@@ -18,8 +18,7 @@
     "scripts": {
         "analyze": "lit-analyzer \"{packages,tools}/*/src/**/!(*.css).ts\"",
         "build": "wireit",
-        "prebuild": "wireit",
-        "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo",
+        "build:clear-cache": "rimraf .wireit && rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo",
         "build:confirm": "node ./scripts/confirm-build.js",
         "build:css": "wireit",
         "build:css:watch": "wireit",
@@ -30,11 +29,10 @@
         "build:types": "wireit",
         "build:watch": "wireit",
         "changelog:global": "node ./scripts/update-global-changelog.js",
-        "changeset-publish": "yarn prepublishOnly && yarn changeset version && yarn constraints --fix && yarn install --refresh-lockfile && yarn version:update && yarn changeset publish --no-git-tag && yarn push-to-remote && yarn create-git-tag && yarn postpublish",
-        "changeset-snapshot-publish": "yarn prepublishOnly && yarn changeset version --snapshot snapshot && yarn constraints --fix && yarn install --refresh-lockfile && yarn version:update && yarn changeset publish --no-git-tag --tag snapshot",
         "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables",
         "create-git-tag": "node --no-warnings ./scripts/create-git-tag.js",
         "custom-element-json": "node ./scripts/custom-element-json.js",
+        "dev:core": "yarn workspace @spectrum-web-components/core dev",
         "docs:analyze": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement",
         "docs:build": "yarn workspace documentation build",
         "docs:ci": "yarn docs:analyze && run-p docs:production storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook",
@@ -50,20 +48,14 @@
         "new-package": "yarn workspace swc-templates plop",
         "postinstall": "husky || true",
         "postpack": "pinst --enable",
-        "postpublish": "yarn prepublish:react && yarn publish:react && yarn postpublish:react",
-        "postpublish:react": "git reset --hard HEAD^ && git prune && rimraf react",
+        "prebuild": "wireit",
         "preeleventy": "yarn docs:analyze",
         "prepack": "pinst --disable",
-        "prepublish:react": "yarn build:react && sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"Commit React Wrappers\" --no-verify",
-        "prepublishOnly": "rimraf react && yarn build && yarn custom-element-json && yarn build:confirm && yarn changelog:global",
         "prestorybook": "wireit",
         "prestorybook:build": "cem analyze --outdir storybook/",
         "pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:",
         "pretest:visual": "yarn build && yarn build",
         "process-icons": "wireit",
-        "publish:react": "yarn changeset publish --no-git-tag --tag latest --no-push",
-        "push-to-remote": "git add . && git commit -m \"chore: release new versions #publish\" && git push",
-        "dev:core": "yarn workspace @spectrum-web-components/core dev",
         "start": "run-p dev:core storybook",
         "storybook": "wireit",
         "storybook:build": "NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook",
@@ -85,7 +77,6 @@
         "test:watch": "yarn test:watch:focus unit",
         "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --",
         "test:watch:focus": "yarn dev:core & yarn build && run-p build:watch \"test:start --watch --group {1}\" --",
-        "version:update": "genversion --verbose --semi --esm ./tools/base/src/version.js",
         "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js"
     },
     "workspaces": [
@@ -99,7 +90,7 @@
         "@changesets/changelog-github": "0.5.1",
         "@changesets/cli": "2.29.7",
         "@commitlint/cli": "19.8.1",
-        "@commitlint/config-conventional": "^19.8.1",
+        "@commitlint/config-conventional": "19.8.1",
         "@custom-elements-manifest/analyzer": "0.10.6",
         "@geometricpanda/storybook-addon-badges": "2.0.5",
         "@lit/react": "1.0.8",
@@ -176,7 +167,7 @@
         "jsonc-eslint-parser": "2.4.1",
         "latest-version": "9.0.0",
         "lightningcss": "1.30.1",
-        "lint-staged": "^16.1.2",
+        "lint-staged": "16.2.6",
         "lit": "^2.5.0 || ^3.1.3",
         "lit-analyzer": "2.0.3",
         "lit-html": "^2.4.0 || ^3.1.3",
@@ -190,7 +181,7 @@
         "prettier-plugin-package": "1.4.0",
         "pretty-bytes": "7.1.0",
         "re-template-tag": "2.0.1",
-        "replace-in-file": "^8.3.0",
+        "replace-in-file": "8.3.0",
         "rimraf": "6.0.1",
         "rollup": "4.52.2",
         "sinon": "17.0.2",
@@ -216,10 +207,6 @@
         "lit-element",
         "lit-html"
     ],
-    "engines": {
-        "node": ">=20",
-        "yarn": ">=4.6.0"
-    },
     "wireit": {
         "build": {
             "dependencies": [

1st-gen/packages/picker/stories/picker.stories.ts

@@ -774,6 +774,9 @@ custom.args = {
     open: true,
 };
 custom.decorators = [isOverlayOpen];
+custom.swc_vrt = {
+    skip: true,
+};
 
 export const BackgroundClickTest = (): TemplateResult => {
     return html`

1st-gen/projects/css-custom-vars-viewer/package.json

@@ -13,10 +13,6 @@
         "./sp-css-table.js": "./dist/src/sp-css-table.js",
         "./custom-vars-viewer.js": "./dist/src/custom-vars-viewer.js"
     },
-    "engines": {
-        "node": ">=16.14.2",
-        "yarn": ">=1.16.0"
-    },
     "scripts": {
         "analyze": "cem analyze --litelement",
         "build": "yarn parse-json && tsc && npm run analyze -- --exclude dist",

1st-gen/projects/documentation/rollup.config.js

@@ -240,7 +240,7 @@ export default async () => {
                     replacement: '../../packages/',
                 },
                 {
-                    find: /^@swc\/core\/(.*)$/,
+                    find: /^@spectrum-web-components\/core\/(.*)$/,
                     replacement: path.resolve(
                         '../../../2nd-gen/packages/core/dist/$1'
                     ),

1st-gen/scripts/cem-tools.js

@@ -75,11 +75,16 @@ export function getWorkspacePackages(
         .filter(
             (pkg) =>
                 !ignoredPackages.includes(pkg.name) &&
-                pkg.name !== '@spectrum-web-components/1st-gen'
+                pkg.name !== '@spectrum-web-components/1st-gen' &&
+                pkg.name !== '@spectrum-web-components/2nd-gen' &&
+                // Only include packages in 1st-gen packages/ and tools/ directories
+                (pkg.location.startsWith('1st-gen/packages/') ||
+                    pkg.location.startsWith('1st-gen/tools/'))
         )
         .map((pkg) => ({
             name: pkg.name,
-            path: pkg.location,
+            // Remove '1st-gen/' prefix since rootDir is already set to 1st-gen
+            path: pkg.location.replace(/^1st-gen\//, ''),
         }));
 }
 
@@ -112,14 +117,15 @@ export async function customElementJson(
     })
         .then(async () => {
             const outdir = options.outdir ?? pkg.path;
+            const packageName = pkg.name || pkg.path || 'unknown';
             // Check if the custom-elements.json file exists
             if (fs.existsSync(path.join(outdir, 'custom-elements.json'))) {
                 console.log(
-                    `${'✓'.green}  ${pkg.name.cyan} has a custom-elements.json file`
+                    `${'✓'.green}  ${packageName.cyan} has a custom-elements.json file`
                 );
             } else {
                 console.log(
-                    `${'❌'.red}  ${pkg.name.cyan} does not have a custom-elements.json file`
+                    `${'❌'.red}  ${packageName.cyan} does not have a custom-elements.json file`
                 );
             }
         })

1st-gen/scripts/confirm-build.js

@@ -14,9 +14,15 @@
 
 import fs from 'fs';
 import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
 
 import glob from 'fast-glob';
 import 'colors';
+import { version } from '@spectrum-web-components/base/src/version.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const rootDir = path.join(__dirname, '..');
 
 async function verifyCustomElementsJson() {
     // Components that don't need their own custom-elements.json manifest
@@ -27,13 +33,20 @@ async function verifyCustomElementsJson() {
         'packages/close-button',
     ]);
 
-    const packages = glob.sync('packages/*/', { onlyDirectories: true });
+    const packages = glob.sync('packages/*/', {
+        onlyDirectories: true,
+        cwd: rootDir,
+    });
     const checks = packages.map(async (pkg) => {
         const pkgPath = pkg.replace(/\/$/, '');
         if (customElementsIgnoreList.has(pkgPath)) {
             return;
         }
-        const customElementsPath = path.join(pkg, 'custom-elements.json');
+        const customElementsPath = path.join(
+            rootDir,
+            pkg,
+            'custom-elements.json'
+        );
         if (!fs.existsSync(customElementsPath)) {
             throw new Error(`Missing custom-elements.json in ${pkg}`);
         }
@@ -42,38 +55,31 @@ async function verifyCustomElementsJson() {
     return Promise.all(checks);
 }
 
-function verifyVersionJs() {
+function verifyVersionSync() {
     let basePackageJson;
     try {
         basePackageJson = JSON.parse(
-            fs.readFileSync('tools/base/package.json', 'utf8')
+            fs.readFileSync(
+                path.join(rootDir, 'tools/base/package.json'),
+                'utf8'
+            )
         );
     } catch (error) {
         throw new Error('Failed to read tools/base/package.json');
     }
-    const versionJsPath = 'tools/base/src/version.js';
-
-    if (!fs.existsSync(versionJsPath)) {
-        throw new Error('version.js file is missing');
-    }
 
-    const versionContent = fs.readFileSync(versionJsPath, 'utf8');
-    const versionMatch = versionContent.match(/version = ['"]([^'"]+)['"]/);
-
-    if (!versionMatch) {
-        throw new Error('Could not find version in version.js');
-    }
-
-    const versionJs = versionMatch[1];
-    if (versionJs !== basePackageJson.version) {
+    if (version !== basePackageJson.version) {
         throw new Error(
-            `Version mismatch: version.js (${versionJs}) does not match tools/base/package.json (${basePackageJson.version})`
+            `Version mismatch: version.js (${version}) does not match tools/base/package.json (${basePackageJson.version})`
         );
     }
 }
 
 async function verifyBuildArtifacts() {
-    const packages = glob.sync('packages/*/', { onlyDirectories: true });
+    const packages = glob.sync('packages/*/', {
+        onlyDirectories: true,
+        cwd: rootDir,
+    });
     const requiredFilesIgnoreList = new Set([
         'packages/clear-button', // extends button
         'packages/close-button', // extends button
@@ -97,7 +103,7 @@ async function verifyBuildArtifacts() {
     const checks = packages.map(async (pkg) => {
         const pkgPath = pkg.replace(/\/$/, '');
 
-        const srcPath = path.join(pkg, 'src');
+        const srcPath = path.join(rootDir, pkg, 'src');
         if (!fs.existsSync(srcPath)) {
             throw new Error(`Missing src directory in ${pkg}`);
         }
@@ -114,7 +120,7 @@ async function verifyBuildArtifacts() {
 
         // Verify all required files exist for this package
         for (const [filePattern, description] of requiredFiles) {
-            const pattern = path.join(pkg, filePattern);
+            const pattern = path.join(rootDir, pkg, filePattern);
             const files = glob.sync(pattern);
             if (files.length === 0) {
                 throw new Error(
@@ -131,8 +137,8 @@ async function main() {
         console.log('Verifying custom-elements.json files...'.cyan);
         await verifyCustomElementsJson();
 
-        console.log('Verifying version.js...'.cyan);
-        verifyVersionJs();
+        console.log('Verifying version synchronization...'.cyan);
+        verifyVersionSync();
 
         console.log('Verifying build artifacts...'.cyan);
         await verifyBuildArtifacts();

1st-gen/scripts/update-global-changelog.js

@@ -143,7 +143,7 @@ async function processChangesets() {
         const coreChanges = extractChanges(
             frontmatter,
             cleanDescription,
-            /['"]@swc\/core['"]:\s*(major|minor|patch)/g
+            /['"]@spectrum-web-components\/core['"]:\s*(major|minor|patch)/g
         );
 
         // Merge results into categorized buckets
@@ -299,8 +299,8 @@ function updateChangelogFile(
  * Reads changeset files, categorizes changes by type (major/minor/patch),
  * and updates both the 1st-gen and @spectrum-web-components/core changelogs accordingly.
  *
- * Should be run during the release process after prepublishOnly but before
- * changeset version. Automatically called by `yarn changeset-publish`.
+ * Should be run during the release process before changeset version.
+ * Automatically called by the unified publish script for regular releases.
  *
  * @returns {Promise<void>}
  * @throws {Error} If there's an issue with git tags or file operations

1st-gen/test/visual/rollup.config.js

@@ -27,7 +27,7 @@ export default {
         alias({
             entries: [
                 {
-                    find: /^@swc\/core\/(.*)$/,
+                    find: /^@spectrum-web-components\/core\/(.*)$/,
                     replacement: path.resolve(
                         process.cwd(),
                         '../2nd-gen/packages/core/dist/$1'