Skip to content

tooling: update pre-commit hook to stop failure propagation of no-import rule of missing dependencies #5430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

Rajdeepc
Copy link
Contributor

@Rajdeepc Rajdeepc commented May 5, 2025

Description

This PR updates the pre-commit hook to reliably lint, analyze, and format only the staged files using ESLint, Lit Analyzer, Stylelint, and Prettier. The script has been rewritten as a standalone shell script with strict error handling using set -e. It ensures that the commit process is blocked if any linting or analysis tool fails. Additionally, genversion is executed and the resulting file is re-staged for inclusion in the commit.

Related issue(s)

  • N/A

Motivation and context

Previously, the pre-commit hook used a bash << EOF heredoc block, which caused failures in expected linting behavior. Errors from linters were not blocking commits as expected due to the lack of strict failure propagation in the heredoc context. This update resolves that by using a standard shell script with correct error handling and scoped linting to staged files only.

How has this been tested?

Manually tested in a local development environment using the following steps:

  • Test case 1

    1. Make a change to a .ts file that introduces an ESLint error.
    2. Attempt to commit.
    3. Verify that the commit is blocked with the lint error shown.
  • Test case 2

    1. Make changes to .css and .ts files without lint issues.
    2. Attempt to commit.
    3. Verify that the commit goes through and the version file is updated and re-staged.
  • Test case 3

    1. Remove @spectrum-web-components/reactive-controller from the dependencies in packages/icon/package.json.
    2. Attempt to commit.
    3. Verify that the commit is blocked with the lint error shown.
    4. import/no-extraneous-dependencies rule is blocking the commit due to missing dependencies
  • Did it pass in Desktop?

  • Did it pass in Mobile?

  • Did it pass in iPad?

Screenshots (if appropriate)

N/A

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

@Rajdeepc Rajdeepc requested a review from a team as a code owner May 5, 2025 13:50
Copy link

changeset-bot bot commented May 5, 2025

🦋 Changeset detected

Latest commit: f32711d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 84 packages
Name Type
@spectrum-web-components/icon Minor
@spectrum-web-components/accordion Minor
@spectrum-web-components/action-button Minor
@spectrum-web-components/action-menu Minor
@spectrum-web-components/button Minor
@spectrum-web-components/checkbox Minor
@spectrum-web-components/coachmark Minor
@spectrum-web-components/combobox Minor
@spectrum-web-components/field-label Minor
@spectrum-web-components/icons-ui Minor
@spectrum-web-components/icons-workflow Minor
@spectrum-web-components/menu Minor
@spectrum-web-components/number-field Minor
@spectrum-web-components/picker-button Minor
@spectrum-web-components/picker Minor
@spectrum-web-components/search Minor
@spectrum-web-components/swatch Minor
@spectrum-web-components/table Minor
@spectrum-web-components/tabs Minor
@spectrum-web-components/textfield Minor
@spectrum-web-components/toast Minor
@spectrum-web-components/bundle Minor
@spectrum-web-components/action-group Minor
@spectrum-web-components/contextual-help Minor
@spectrum-web-components/overlay Minor
@spectrum-web-components/vrt-compare Minor
@spectrum-web-components/breadcrumbs Minor
@spectrum-web-components/action-bar Minor
@spectrum-web-components/alert-banner Minor
@spectrum-web-components/alert-dialog Minor
@spectrum-web-components/button-group Minor
@spectrum-web-components/dialog Minor
@spectrum-web-components/infield-button Minor
@spectrum-web-components/tags Minor
example-project-rollup Patch
example-project-webpack Patch
@spectrum-web-components/card Minor
@spectrum-web-components/switch Minor
@spectrum-web-components/meter Minor
@spectrum-web-components/progress-bar Minor
@spectrum-web-components/slider Minor
@spectrum-web-components/custom-vars-viewer Minor
@spectrum-web-components/story-decorator Minor
@spectrum-web-components/help-text Minor
@spectrum-web-components/top-nav Minor
@spectrum-web-components/color-field Minor
documentation Patch
@spectrum-web-components/popover Minor
@spectrum-web-components/tooltip Minor
@spectrum-web-components/truncated Minor
@spectrum-web-components/field-group Minor
@spectrum-web-components/radio Minor
@spectrum-web-components/eslint-plugin Minor
@spectrum-web-components/asset Minor
@spectrum-web-components/avatar Minor
@spectrum-web-components/badge Minor
@spectrum-web-components/clear-button Minor
@spectrum-web-components/close-button Minor
@spectrum-web-components/color-area Minor
@spectrum-web-components/color-handle Minor
@spectrum-web-components/color-loupe Minor
@spectrum-web-components/color-slider Minor
@spectrum-web-components/color-wheel Minor
@spectrum-web-components/divider Minor
@spectrum-web-components/dropzone Minor
@spectrum-web-components/icons Minor
@spectrum-web-components/iconset Minor
@spectrum-web-components/illustrated-message Minor
@spectrum-web-components/link Minor
@spectrum-web-components/modal Minor
@spectrum-web-components/progress-circle Minor
@spectrum-web-components/sidenav Minor
@spectrum-web-components/split-view Minor
@spectrum-web-components/status-light Minor
@spectrum-web-components/thumbnail Minor
@spectrum-web-components/tray Minor
@spectrum-web-components/underlay Minor
@spectrum-web-components/base Minor
@spectrum-web-components/grid Minor
@spectrum-web-components/opacity-checkerboard Minor
@spectrum-web-components/reactive-controllers Minor
@spectrum-web-components/shared Minor
@spectrum-web-components/styles Minor
@spectrum-web-components/theme Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

github-actions bot commented May 5, 2025

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Copy link

github-actions bot commented May 5, 2025

Tachometer results

Chrome

icon permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 444 kB 14.51ms - 14.78ms - faster ✔
1% - 4%
0.20ms - 0.55ms
branch 422 kB 14.91ms - 15.13ms slower ❌
1% - 4%
0.20ms - 0.55ms
-
Firefox

icon permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 444 kB 35.71ms - 39.33ms - unsure 🔍
-6% - +6%
-2.27ms - +2.23ms
branch 422 kB 36.19ms - 38.89ms unsure 🔍
-6% - +6%
-2.23ms - +2.27ms
-

Copy link
Collaborator

@castastrophe castastrophe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a few questions! Would suggest we reword the changeset before merging too in order for it to read more like a sentence than a commit message.

@@ -33,7 +33,6 @@ export class IconBase extends SpectrumElement {
public static override get styles(): CSSResultArray {
return [iconStyles];
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you mean to remove this whitespace? It seems useful to delineate the two properties.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah! I was testing the linting with some additional fail checks here. Should be removed. Thanks for catching this

@@ -88,7 +88,8 @@
],
"dependencies": {
"@spectrum-web-components/base": "1.6.0",
"@spectrum-web-components/iconset": "1.6.0"
"@spectrum-web-components/iconset": "1.6.0",
"@spectrum-web-components/reactive-controllers": "1.6.0"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch here

STAGED_FILES_TO_ANALYZE=$(git diff --name-only --cached --diff-filter=d -- "{packages,tools}/*/src/**/!(*.css).ts")
STAGED_CSS_FILES=$(git diff --name-only --cached --diff-filter=d -- "{packages,tools}/**/*.css")
VERSION_FILE=$(dirname "$0")/../tools/base/src/version.js
#!/bin/bash
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I've noticed this issue as well, however here's the documentation around why we added the bash wrapper: https://typicode.github.io/husky/how-to.html#bash

We're not currently supporting Windows so it seemed a fine compromise. The if syntax however is Bash syntax so removing that would be a potential issue. What do you suggest?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking we could migrate all these rules into a lint-staged config and just run the yarn lint-staged command here instead of all this logic. What are your thoughts? Was playing around with that here: #5393

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea of migrate these in a module in a lint-staged config. More scalable. Let me update this here and test. Please feel free to add your thoughts too!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants