[DO NOT MERGE]Changeset testing

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,16 @@
+{
+    "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+    "changelog": [
+        "@changesets/changelog-github",
+        {
+            "repo": "adobe/spectrum-web-components"
+        }
+    ],
+    "commit": false,
+    "fixed": [["@spectrum-web-components/*"]],
+    "linked": [],
+    "access": "public",
+    "baseBranch": "main",
+    "updateInternalDependencies": "patch",
+    "ignore": []
+}

.changeset/selfish-cougars-joke.md

@@ -0,0 +1,6 @@
+---
+"@spectrum-web-components/color-field": patch
+"@spectrum-web-components/styles": patch
+---
+
+[DO NOT MERGE]Changeset testing

.gitignore

@@ -1,5 +1,4 @@
 # logging / private config
-lerna-debug.log
 yarn-error.log
 .DS_STORE
 .DS_Store
@@ -41,7 +40,7 @@ packages/**/*.test-vrt.ts
 !packages/*/global.d.ts
 !packages/*/local.d.ts
 
-react
+# react
 
 projects/**/*.js
 projects/**/*.js.map

README.md

@@ -103,7 +103,9 @@ The project will be linted on a pre-commit hook, but you can also run the lint s
 
 ### Dependency linting
 
-There are downstream issues that can arise from multiple packages in this mono-repo using dependencies with mismatching version strings. This is particularly an issue for dependencies below `1.0.0` but can be exacerbated in that context and others by more strict settings that can be applied in various package managers. By default, Lerna will bump version numbers of internal dependencies when the various packages are published and the depended version is pointing to the latest release, which can help to mitigate this issue. This can be further mitigated by using `^0.0.0` structured dependency versions, the `^` allowing for the highest amount of upward flexibility in satisfying the dependency. When using these version strings, `yarn lint:versions` which ensure that all instances of those strings for the same dependency match across the repo.
+Mismatched versions within this project can cause significant issues for downstream customers. This is particularly an issue for dependencies below `1.0.0`. By default, Changesets bumps the version number of internal dependencies when packages are published, but only if that package is pointing to the latest release. If versions should get out-of-sync, you can use the `yarn lint:versions` tool to validate and correct any mismatched dependencies in the project.
+
+A good rule of thumb is to use the semantic caret `^` prefix for all your dependencies to pull in the latest features and patches for a package (but not breaking changes).
 
 `yarn list:versions --fix` will reach into the `package.json` files and update all dependencies to the latest version available in the library, _a possibly dangerous operation_. If you know this is what you want to do when there are mismatched versions found by `yarn lint:versions`, this can make greatly shorten the amount of work to catch the versions up to each other.
 

RELEASE_PROCESS.md

@@ -7,7 +7,7 @@ Users with permissions in the `@spectrum-web-components` organization on NPM can
 3. Run `nvm use` assumes a Node Version Manager install, and confirm your on an operable version of Node.
 4. `yarn install`
 5. `npm whoami` ensure that you are logged in with the user account for the public NPM registry
-6. `yarn lerna-publish`
+6. `yarn changeset-publish`
 7. Scan the version summary for any unexpected changes.
     - Changes to the _major_ versions number are likely to point to undesired version numbers.
     - Changes to the _minor_ or _feature_ version number should be confirmed as correct against the changes that have been made since the last release.
@@ -23,11 +23,10 @@ Users with permissions in the `@spectrum-web-components` organization on NPM can
 
 The docs site will publish automatically if the `#publish` string is included in the commit message and the check suite runs successfully.
 
-If publishing fails with an error, check the [list of tags](https://github.com/adobe/spectrum-web-components/tags) to see if new tags have been released for your publishing attempt. If they have, then `yarn lerna-publish` will no longer work. Instead, you'll need to run:
+If publishing fails with an error, check the [list of tags](https://github.com/adobe/spectrum-web-components/tags) to see if new tags have been released for your publishing attempt. If they have, then `yarn changeset-publish` will no longer work. Instead, you'll need to run:
 
-```
-yarn lerna-publish from-package
-```
+`yarn publish`
+in each package.
 
 ### Publishing the docs site manually
 

commitlint.config.cjs

@@ -10,8 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 module.exports = {
-    extends: [
-        '@commitlint/config-conventional',
-        '@commitlint/config-lerna-scopes',
-    ],
+    extends: ['@commitlint/config-conventional'],
 };

package.json

@@ -13,7 +13,7 @@
         "build": "wireit",
         "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo",
         "build:component-inventory": "node ./tasks/build-component-inventory.js",
-        "build:confirm": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,close-button,clear-button,iconset,modal,opacity-shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- test -f src/index.js",
+        "build:confirm": "node ./tasks/confirm-build.js",
         "build:css": "wireit",
         "build:css:watch": "wireit",
         "build:react": "yarn gen-react-wrapper && node ./tasks/build-react.js && yarn tsc --build tsconfig-react-wrapper.json",
@@ -22,7 +22,7 @@
         "build:ts:watch": "wireit",
         "build:types": "wireit",
         "build:watch": "wireit",
-        "custom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,modal,iconset,shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../custom-elements-manifest.config.js --packagejson",
+        "custom-element-json": "node tasks/custom-element-json.js",
         "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",
@@ -31,12 +31,12 @@
         "docs:review": "alex packages/**/*.md",
         "docs:start": "yarn workspace documentation serve --watch",
         "find": "test -f custom-elements.json",
-        "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js",
+        "gen-react-wrapper": "node ./tasks/gen-react-wrapper.js",
         "get-ready": "yarn build",
         "icons": "wireit",
         "icons:ui": "wireit",
         "icons:workflow": "wireit",
-        "lerna-publish": "lerna publish --message \"chore: release new versions #publish\" --force-publish",
+        "changeset-publish": "yarn changeset version && yarn changeset publish --tag=testing",
         "lint": "run-p lint:js lint:docs lint:ts lint:css lint:packagejson",
         "lint:css": "stylelint \"packages/**/*.css\" \"tools/**/*.css\"",
         "lint:docs": "eslint -f pretty \"projects/documentation/**/*.ts\"",
@@ -45,14 +45,14 @@
         "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"",
         "lint:versions": "node ./scripts/lint-versions.js",
         "new-package": "cd projects/templates && plop",
-        "postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,vrt-compare,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- node ../../tasks/check-cem.js",
+        "postcustom-element-json": "node ./tasks/run-check-cem.js",
         "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"",
         "postinstall": "patch-package && yarn get-ready",
-        "postlerna-publish": "yarn publish:react",
+        "postchangeset-publish": "yarn publish:react",
         "postpublish:react": "git reset --hard HEAD^ && git prune",
-        "precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- rm custom-elements.json ||:",
+        "precustom-element-json": "node tasks/remove-custom-elements-json.js",
         "preeleventy": "yarn docs:analyze",
-        "prelerna-publish": "rimraf react && yarn get-ready && yarn custom-element-json && yarn build:confirm",
+        "prechangeset-publish": "rimraf react && yarn get-ready && yarn custom-element-json && yarn build:confirm",
         "prepare": "husky",
         "prepublish:react": "yarn build:react && sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"Commit React Wrappers\" --no-verify",
         "prestorybook": "wireit",
@@ -61,7 +61,7 @@
         "pretest:visual": "yarn build && yarn build",
         "process-icons": "wireit",
         "process-spectrum": "wireit",
-        "publish:react": "lerna publish from-package --message \"chore: release new Reach Wrapper versions #publish\"",
+        "publish:react": "yarn build:react && yarn changeset version && yarn changeset publish --no-git-tag --no-push && git add . && git commit -m \"chore: release new React Wrapper versions #publish\" && git push",
         "spectrum-css": "wireit",
         "spectrum-tokens": "wireit",
         "spectrum-vars": "wireit",
@@ -96,9 +96,10 @@
         "common-tags": "^1.8.0"
     },
     "devDependencies": {
+        "@changesets/changelog-github": "^0.5.0",
+        "@changesets/cli": "^2.27.5",
         "@commitlint/cli": "^19.2.1",
         "@commitlint/config-conventional": "^19.1.0",
-        "@commitlint/config-lerna-scopes": "^19.0.0",
         "@custom-elements-manifest/analyzer": "^0.9.0",
         "@geometricpanda/storybook-addon-badges": "^2.0.2",
         "@lit/react": "^1.0.4",
@@ -432,5 +433,6 @@
         "tools/*",
         "react/*"
     ],
+    "customElements": "custom-elements.json",
     "packageManager": "[email protected]"
 }

packages/color-field/src/ColorField.ts

@@ -47,7 +47,7 @@ export class ColorField extends TextfieldBase {
 
     protected override _value = '';
 
-    private cachedColor: string | null = null;
+    private cachedColor: string | null = 'null';
 
     public getColorValue(): string {
         if (!this.value) {

tasks/build-preview-urls-comment.js

@@ -13,9 +13,34 @@ governing permissions and limitations under the License.
 
 import slugify from '@sindresorhus/slugify';
 import crypto from 'crypto';
-import { getChangedPackages } from './get-changed-packages.js';
 
-const createHash = (context) => {
+// Duplicated from `tasks/test-changes.js` because GitHub Actions and CJS. 🤦
+const getChangedPackages = () => {
+    let command;
+    try {
+        command = execSync('yarn changeset since --base origin/main --json');
+    } catch (error) {
+        console.log(error.message);
+        console.log(error.stdout.toString());
+        return [];
+    }
+    let packageList;
+    packageList = JSON.parse(command.toString()).reduce((acc, item) => {
+        const name = item.name.replace('@spectrum-web-components/', '');
+        if (
+            // There are no benchmarks available in this directory.
+            item.location.search('projects') === -1 &&
+            // The icons-* tests are particular and long, exclude in CI.
+            !name.startsWith('icons-')
+        ) {
+            acc.push(name);
+        }
+        return acc;
+    }, []);
+    return packageList;
+};
+
+const getHash = (context) => {
     const md5 = crypto.createHash('md5');
     md5.update(context);
     return md5.digest('hex');

tasks/confirm-build.js

@@ -0,0 +1,68 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get a list of all packages except those you want to ignore
+const getWorkspacePackages = (ignoredPackages) => {
+    const workspaceInfo = execSync('yarn workspaces info --json').toString();
+    const workspacePackages = JSON.parse(workspaceInfo);
+    return Object.entries(workspacePackages)
+        .filter(([pkgName]) => !ignoredPackages.includes(pkgName))
+        .map(([pkgName, pkgDetails]) => ({
+            name: pkgName,
+            path: pkgDetails.location,
+        }));
+};
+
+// Define the packages to ignore
+const ignoredPackages = [
+    '@spectrum-web-components/base',
+    '@spectrum-web-components/bundle',
+    '@spectrum-web-components/clear-button',
+    '@spectrum-web-components/close-button',
+    '@spectrum-web-components/modal',
+    '@spectrum-web-components/iconset',
+    '@spectrum-web-components/shared',
+    '@spectrum-web-components/opacity-checkerboard',
+    '@spectrum-web-components/styles',
+    '@spectrum-web-components/custom-vars-viewer',
+    '@spectrum-web-components/eslint-plugin',
+    'stylelint-header',
+    '@swc-react/*',
+    'documentation',
+    'example-project-rollup',
+    'example-project-webpack',
+    'swc-templates',
+    '@types/swc',
+];
+
+// Use the function
+const allPackages = getWorkspacePackages(ignoredPackages);
+
+// Define the command to execute
+const command = 'test -f src/index.js';
+
+// Execute the command in each package directory
+allPackages.forEach((pkg) => {
+    try {
+        // Execute the command in the package directory
+        execSync(command, { cwd: pkg.path, stdio: 'inherit' });
+    } catch (error) {
+        console.error(`Error executing command in package ${pkg.name}:`, error);
+        process.exit(1);
+    }
+});
+
+console.log('Build confirmation completed successfully for all packages.');

tasks/custom-element-json.js

@@ -0,0 +1,72 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import path from 'path';
+
+// Get a list of all packages except those you want to ignore
+const getWorkspacePackages = (ignoredPackages) => {
+    const workspaceInfo = execSync('yarn workspaces info --json').toString();
+    const workspacePackages = JSON.parse(workspaceInfo);
+    return Object.entries(workspacePackages)
+        .filter(([pkgName]) => !ignoredPackages.includes(pkgName))
+        .map(([pkgName, pkgDetails]) => ({
+            name: pkgName,
+            path: pkgDetails.location,
+        }));
+};
+
+const __filename = dirname(fileURLToPath(import.meta.url));
+const __dirname = dirname(__filename);
+const configPath = path.resolve(
+    __dirname,
+    'custom-elements-manifest.config.js'
+);
+
+// Define the packages to ignore
+const ignoredPackages = [
+    '@spectrum-web-components/base',
+    '@spectrum-web-components/bundle',
+    '@spectrum-web-components/clear-button',
+    '@spectrum-web-components/close-button',
+    '@spectrum-web-components/modal',
+    '@spectrum-web-components/iconset',
+    '@spectrum-web-components/shared',
+    '@spectrum-web-components/opacity-checkerboard',
+    '@spectrum-web-components/styles',
+    '@spectrum-web-components/custom-vars-viewer',
+    '@spectrum-web-components/eslint-plugin',
+    'stylelint-header',
+    '@swc-react/*',
+    'documentation',
+    'example-project-rollup',
+    'example-project-webpack',
+    'swc-templates',
+    '@types/swc',
+];
+
+// Use the function
+const allPackages = getWorkspacePackages(ignoredPackages);
+// Define the command to execute
+const command = `cem analyze --config ${configPath} --packagejson`;
+
+console.log(__dirname, 'Updating custom elements JSON files...');
+allPackages.forEach((pkg) => {
+    try {
+        // Execute the command using Change Sets
+        execSync(command, { cwd: pkg.path, stdio: 'inherit' });
+    } catch (error) {
+        console.error('Error executing custom-element-json command:', error);
+        process.exit(1);
+    }
+});
+console.log('All custom elements JSON files have been updated successfully.');