From 5a9dbb173c821bce59573d5e82f5268d4690bf8e Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Mon, 29 Sep 2025 11:54:59 +1000 Subject: [PATCH 1/8] chore: remove dead dependencies and update some --- .gitignore | 1 - .nycrc | 8 -- CONTRIBUTING.md | 28 +--- babel-esm.config.json | 5 - babel.config.json | 5 - package.json | 18 +-- .../dev/docs/pages/react-spectrum/ssr.mdx | 4 +- packages/dev/s2-icon-builder/package.json | 2 +- scripts/buildBranchAPI.js | 30 ++-- scripts/buildPublishedAPI.js | 23 +++- scripts/buildRegistry.mjs | 6 +- scripts/cleanIcons.js | 2 +- scripts/compareAPIs.js | 61 ++++++--- scripts/createFeed.mjs | 6 +- scripts/extractExamples.mjs | 4 +- scripts/extractStarter.mjs | 6 +- scripts/plopfile.js | 128 ------------------ scripts/testDocs.js | 2 +- 18 files changed, 96 insertions(+), 243 deletions(-) delete mode 100644 .nycrc delete mode 100644 scripts/plopfile.js diff --git a/.gitignore b/.gitignore index 507d85abab0..561bd2bb4b2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ .DS_Store .cache .idea -.nyc_output .package-lock.json .parcel-cache build-storybook.log diff --git a/.nycrc b/.nycrc deleted file mode 100644 index 022102c50db..00000000000 --- a/.nycrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "sourceMap": false, - "instrument": false, - "reporter": [ - "lcov", - "text-summary" - ] -} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ba8fa9452bf..057cd3ee4e1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -77,32 +77,6 @@ Or run the documentation and browse to [http://localhost:1234/](http://localhost yarn start:docs ``` -### Component/Hook scaffolding -If you are looking to contribute a brand new component or Hook in a package that does not exist yet, please run the following command. -```bash -yarn plop -``` -This will start a series of cli prompts to determine what template files and folders should be generated to help quick start your contribution. -The prompts are as follows: - -1. What type of project are you setting up? - - Select "React Spectrum v3" - -2. Scope name(s) - - Select the package scopes that make sense for your contribution (e.g. react-spectrum if you are contributing a component, react-aria for an aria Hook, etc) - -3. Package name, all lowercase (e.g. textfield) - -4. Component name, please use appropriate uppercase (e.g. TextField) - - If you are contributing a non-component Hook, just enter the name of your Hook. - -5. Component css module name, blank if N/A. If unsure, check @adobe/spectrum-css-temp/components for a module containing the desired css (e.g. textfield) - - If you cannot find the component CSS module name in @adobe/spectrum-css-temp/components, feel free to reach out to a team member via GitHub Issues or Discussions. - -Upon answering all the prompts, the appropriate package(s) should be generated and ready for modification. - -**Note:** With regards to the generated docs files, please feel free to remove them if you won't be contributing docs. If you are contributing docs for a new component or Hook, please submit them in a separate pull request so that we can decide when to deploy them to our docs site. - ### Tests We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) for rendering and writing assertions. Please make sure you include tests with your pull requests. Our CI will run the tests on PRs as well as the linter and type checker. You can see on each PR whether you have passed all our checks. We split the tests into 2 groups. @@ -154,7 +128,7 @@ yarn start:docs Then, open [http://localhost:1234](http://localhost:1234) in your browser. ### Verdaccio -We use [Verdaccio](https://verdaccio.org/) to set up a private registry for our packages to test our components in our example apps. +We use [Verdaccio](https://verdaccio.org/) to set up a private registry for our packages to test our components in our example apps. To run verdaccio, first ensure that your `git status` is clean. If your computer has an Intel chip, add the line `shopt -s globstar extglob` in the `verdaccio.sh` file after line 21. Save and commit these changes under a clear message like "Do not push". If you have an Apple silicon chip, you may skip this step. diff --git a/babel-esm.config.json b/babel-esm.config.json index cb8c7529066..c16bd1b4767 100644 --- a/babel-esm.config.json +++ b/babel-esm.config.json @@ -23,11 +23,6 @@ ] ] }, - "cover": { - "plugins": [ - "istanbul" - ] - }, "production": { "plugins": [ [ diff --git a/babel.config.json b/babel.config.json index 510f70cc937..015a74f120c 100644 --- a/babel.config.json +++ b/babel.config.json @@ -22,11 +22,6 @@ ] ] }, - "cover": { - "plugins": [ - "istanbul" - ] - }, "production": { "plugins": [ [ diff --git a/package.json b/package.json index e6bb5e1505b..2fa20fceb18 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ "build:icons": "babel-node --presets @babel/env ./scripts/buildIcons.js", "clean:icons": "babel-node --presets @babel/env ./scripts/cleanIcons.js", "postinstall": "patch-package && yarn build:icons", - "plop": "plop --plopfile scripts/plopfile.js", "chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic'", "chromatic:forced-colors": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_FC_PROJECT_TOKEN --build-script-name 'build:chromatic-fc'", "merge:css": "babel-node --presets @babel/env ./scripts/merge-spectrum-css.js", @@ -140,11 +139,9 @@ "autoprefixer": "^9.6.0", "axe-core": "^4.6.3", "axe-playwright": "^1.1.11", - "babel-plugin-istanbul": "^6.0.0", "babel-plugin-macros": "^3.0.1", "babel-plugin-react-remove-properties": "^0.3.0", "babel-plugin-transform-glob-import": "^1.0.1", - "babelify": "^10.0.0", "chalk": "^4.1.2", "chromatic": "^13.1.3", "clsx": "^2.0.0", @@ -166,8 +163,7 @@ "fast-check": "^2.19.0", "fast-glob": "^3.1.0", "fs-extra": "^11.0.0", - "glob": "^8.0.3", - "glob-promise": "^6.0.5", + "glob": "^11.0.3", "globals": "^15.11.0", "identity-obj-proxy": "^3.0.0", "ignore-styles": "^5.0.1", @@ -182,13 +178,10 @@ "md5": "^2.2.1", "motion": "^12.23.6", "npm-cli-login": "^1.0.0", - "nyc": "^10.2.0", - "p-queue": "^6.2.1", "parcel": "^2.16.0", "parcel-optimizer-strict-mode": "workspace:^", "patch-package": "^6.2.0", "playwright": "^1.45.3", - "plop": "^2.4.0", "postcss": "^8.4.24", "postcss-custom-properties": "^13.2.0", "postcss-import": "^15.1.0", @@ -196,16 +189,14 @@ "prop-types": "^15.6.0", "raf": "^3.4.0", "react": "^19.1.0", - "react-axe": "^3.0.2", "react-dom": "^19.1.0", "react-frame-component": "^5.0.0", "react-test-renderer": "^19.1.0", "recast": "^0.23", "recursive-readdir": "^2.2.2", "regenerator-runtime": "0.13.3", - "rimraf": "^2.6.3", + "rimraf": "^6.0.1", "sharp": "^0.33.5", - "sinon": "^7.3.1", "storybook": "^8.6.14", "storybook-dark-mode": "^4.0.2", "storybook-react-parcel": "workspace:^", @@ -218,8 +209,7 @@ "verdaccio": "^6.0.0", "walk-object": "^4.0.0", "wsrun": "^5.0.0", - "xml": "^1.0.1", - "yargs": "^17.2.1" + "xml": "^1.0.1" }, "resolutions": { "@babel/cli": "7.24.1", @@ -230,7 +220,7 @@ "@babel/traverse": "7.24.1", "@babel/types": "7.24.0", "@mdx-js/react": "2.0.0-rc.2", - "postcss": "8.4.24", + "postcss": "8.4.31", "postcss-custom-properties": "13.2.0", "postcss-import": "15.1.0", "react-refresh": "0.9.0", diff --git a/packages/dev/docs/pages/react-spectrum/ssr.mdx b/packages/dev/docs/pages/react-spectrum/ssr.mdx index 2897eda74f0..5d5d7766242 100644 --- a/packages/dev/docs/pages/react-spectrum/ssr.mdx +++ b/packages/dev/docs/pages/react-spectrum/ssr.mdx @@ -347,7 +347,7 @@ To configure Remix to load React Spectrum styles, CSS Side-Effect Imports is req However, to make it work with SSR, a small amount of configuration is required. Add the following to your `vite.config.js` or `vite.config.ts` file. This will ensure that React Spectrum’s CSS can be built properly. ```tsx -import glob from 'glob'; +import {globSync} from 'glob'; export default defineConfig({ ssr: { @@ -355,7 +355,7 @@ export default defineConfig({ '@adobe/react-spectrum', '@react-spectrum/*', '@spectrum-icons/*', - ].flatMap((spec) => glob.sync(`${spec}`, { cwd: 'node_modules/' })), + ].flatMap((spec) => globSync(`${spec}`, { cwd: 'node_modules/' })), } }); ``` diff --git a/packages/dev/s2-icon-builder/package.json b/packages/dev/s2-icon-builder/package.json index 70a8a8264b8..55e8f81a505 100644 --- a/packages/dev/s2-icon-builder/package.json +++ b/packages/dev/s2-icon-builder/package.json @@ -25,7 +25,7 @@ "@react-spectrum/parcel-namer-s2": "^0.3.1", "@react-spectrum/parcel-transformer-s2-icon": "^0.3.1", "@swc/helpers": "^0.5.0", - "glob": "^8.0.3" + "glob": "^11.0.3" }, "peerDependencies": { "@react-spectrum/s2": ">=0.8.0", diff --git a/scripts/buildBranchAPI.js b/scripts/buildBranchAPI.js index f98c7f173b2..6e076aca6f6 100644 --- a/scripts/buildBranchAPI.js +++ b/scripts/buildBranchAPI.js @@ -16,14 +16,24 @@ const packageJSON = require('../package.json'); const path = require('path'); const glob = require('fast-glob'); const spawn = require('cross-spawn'); -let yargs = require('yargs'); +const {parseArgs} = require('util'); -let argv = yargs - .option('verbose', {alias: 'v', type: 'boolean'}) - .option('output', {alias: 'o', type: 'string'}) - .option('githash', {type: 'string'}) - .argv; +const args = parseArgs({ + options: { + verbose: { + short: 'v', + type: 'boolean' + }, + output: { + short: 'o', + type: 'string' + }, + githash: { + type: 'string' + } + } +}); build().catch(err => { console.error(err.stack); @@ -38,15 +48,15 @@ build().catch(err => { async function build() { let backupDir = tempy.directory(); let archiveDir; - if (argv.githash) { + if (args.values.githash) { archiveDir = tempy.directory(); - console.log('checking out archive of', argv.githash, 'into', archiveDir); - await run('sh', ['-c', `git archive ${argv.githash} | tar -x -C ${archiveDir}`], {stdio: 'inherit'}); + console.log('checking out archive of', args.values.githash, 'into', archiveDir); + await run('sh', ['-c', `git archive ${args.values.githash} | tar -x -C ${archiveDir}`], {stdio: 'inherit'}); await run('sh', ['-c', `git archive HEAD | tar -x -C ${backupDir}`], {stdio: 'inherit'}); } let srcDir = archiveDir ?? path.join(__dirname, '..'); - let distDir = path.join(__dirname, '..', 'dist', argv.output ?? 'branch-api'); + let distDir = path.join(__dirname, '..', 'dist', args.values.output ?? 'branch-api'); // if we already have a directory with a built dist, remove it so we can write cleanly into it at the end fs.removeSync(distDir); // Create a temp directory to build the site in diff --git a/scripts/buildPublishedAPI.js b/scripts/buildPublishedAPI.js index 54e0c28cfdd..1b28dceb5b9 100644 --- a/scripts/buildPublishedAPI.js +++ b/scripts/buildPublishedAPI.js @@ -16,13 +16,21 @@ const packageJSON = require('../package.json'); const path = require('path'); const glob = require('fast-glob'); const spawn = require('cross-spawn'); -let yargs = require('yargs'); +const {parseArgs} = require('util'); -let argv = yargs - .option('verbose', {alias: 'v', type: 'boolean'}) - .option('output', {alias: 'o', type: 'string'}) - .argv; +const args = parseArgs({ + options: { + verbose: { + short: 'v', + type: 'boolean' + }, + output: { + short: 'o', + type: 'string' + } + } +}); build().catch(err => { console.error(err.stack); @@ -35,7 +43,7 @@ build().catch(err => { * This is run against a downloaded copy of the last published version of each package into a temporary directory and build there */ async function build() { - let distDir = argv.output ?? path.join(__dirname, '..', 'dist', argv.output ?? 'base-api'); + let distDir = args.values.output ?? path.join(__dirname, '..', 'dist', args.values.output ?? 'base-api'); // if we already have a directory with a built dist, remove it so we can write cleanly into it at the end fs.removeSync(distDir); // Create a temp directory to build the site in @@ -153,6 +161,7 @@ async function build() { fs.writeFileSync(path.join(dir, 'package.json'), JSON.stringify(pkg, false, 2)); fs.copySync(path.join(__dirname, '..', '.yarn'), path.join(dir, '.yarn')); fs.copySync(path.join(__dirname, '..', '.yarnrc.yml'), path.join(dir, '.yarnrc.yml')); + fs.copySync(path.join(__dirname, '..', 'yarn.lock'), path.join(dir, 'yarn.lock')); fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp')); // Install dependencies from npm @@ -229,7 +238,7 @@ function run(cmd, args, opts) { return new Promise((resolve, reject) => { let child = spawn(cmd, args, opts); let result = ''; - child.stdout?.on('data', function(data) { + child.stdout?.on('data', function (data) { result += data.toString(); }); child.on('error', reject); diff --git a/scripts/buildRegistry.mjs b/scripts/buildRegistry.mjs index 50ef20ea78d..e7248d210f5 100644 --- a/scripts/buildRegistry.mjs +++ b/scripts/buildRegistry.mjs @@ -1,5 +1,5 @@ import fs from 'fs'; -import glob from 'glob'; +import {globSync} from 'glob'; import * as recast from 'recast'; import {parse} from '@babel/parser'; import path from 'path'; @@ -10,7 +10,7 @@ const publicUrl = process.env.REGISTRY_URL || 'http://localhost:8081'; fs.rmSync('starters/tailwind/registry', {recursive: true, force: true}); fs.mkdirSync('starters/tailwind/registry'); -for (let file of glob.sync('starters/tailwind/src/*.{ts,tsx}')) { +for (let file of globSync('starters/tailwind/src/*.{ts,tsx}')) { let name = path.basename(file, path.extname(file)); let {dependencies, registryDependencies, content} = analyzeDeps(file, 'tailwind'); let type = name === 'utils' ? 'registry:lib' : 'registry:ui'; @@ -40,7 +40,7 @@ for (let file of glob.sync('starters/tailwind/src/*.{ts,tsx}')) { fs.rmSync('starters/docs/registry', {recursive: true, force: true}); fs.mkdirSync('starters/docs/registry'); -for (let file of glob.sync('starters/docs/src/*.{ts,tsx}')) { +for (let file of globSync('starters/docs/src/*.{ts,tsx}')) { let name = path.basename(file, path.extname(file)); let {dependencies, registryDependencies, content} = analyzeDeps(file, 'vanilla'); let type = name === 'utils' ? 'registry:lib' : 'registry:ui'; diff --git a/scripts/cleanIcons.js b/scripts/cleanIcons.js index 43d27fe0943..939f92eb030 100644 --- a/scripts/cleanIcons.js +++ b/scripts/cleanIcons.js @@ -12,7 +12,7 @@ import path from 'path'; import recursive from 'recursive-readdir'; -import rimraf from 'rimraf'; +import {rimraf} from 'rimraf'; let topPaths = ['ui', 'workflow', 'color', 'express', 'illustrations'].map(name => path.resolve(path.join(__dirname, '..', 'packages', '@spectrum-icons', name))); topPaths.forEach((rootPath) => { diff --git a/scripts/compareAPIs.js b/scripts/compareAPIs.js index 08974ebaca6..84dd5c8f0ae 100644 --- a/scripts/compareAPIs.js +++ b/scripts/compareAPIs.js @@ -4,19 +4,36 @@ let fg = require('fast-glob'); let path = require('path'); let util = require('util'); let chalk = require('chalk'); -let yargs = require('yargs'); let Diff = require('diff'); +const {parseArgs} = require('util'); -let argv = yargs - .option('verbose', {alias: 'v', type: 'boolean'}) - .option('organizedBy', {choices: ['type', 'change']}) - .option('rawNames', {type: 'boolean'}) - .option('package', {type: 'string'}) - .option('interface', {type: 'string'}) - .option('isCI', {type: 'boolean'}) - .option('base-api-dir', {type: 'string'}) - .option('branch-api-dir', {type: 'string'}) - .argv; + +const args = parseArgs({ + options: { + verbose: { + short: 'v', + type: 'boolean' + }, + rawNames: { + type: 'boolean' + }, + package: { + type: 'string' + }, + interface: { + type: 'string' + }, + isCI: { + type: 'boolean' + }, + 'branch-api-dir': { + type: 'string' + }, + 'base-api-dir': { + type: 'string' + } + } +}); let allChanged = new Set(); @@ -41,8 +58,8 @@ compare().catch(err => { * as well as the local console. */ async function compare() { - let branchDir = argv['branch-api-dir'] || path.join(__dirname, '..', 'dist', 'branch-api'); - let publishedDir = argv['base-api-dir'] || path.join(__dirname, '..', 'dist', 'base-api'); + let branchDir = args.values['branch-api-dir'] || path.join(__dirname, '..', 'dist', 'branch-api'); + let publishedDir = args.values['base-api-dir'] || path.join(__dirname, '..', 'dist', 'base-api'); if (!(fs.existsSync(branchDir) && fs.existsSync(publishedDir))) { console.log(chalk.redBright(`you must have both a branchDir ${branchDir} and baseDir ${publishedDir}`)); return; @@ -125,7 +142,7 @@ ${changedByDeps.length > 0 ? `changed by: - ${changedByDeps.join('\n - ')}\n\n` : ''}${diff.split('\n').filter(line => line !== ' ').join('\n')}${ // eslint-disable-next-line no-nested-ternary affected.length > 0 ? -argv.isCI ? ` +args.values.isCI ? `
it changed