feat(type-checking): Add type-checking pre-commit hooks #32261
Conversation
Added the script as a pre-commit hook to ensure type-checking before commits.
alveifbklsiu259
requested review from
sadpandajoe,
geido,
eschutho,
rusackas and
betodealmeida
as code owners
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Fix Detected |
|---|---|---|
 |
Blocking File System Operations ▹ view | ✅ |
 |
Incorrect Log Levels for stdout/stderr ▹ view | ✅ |
 |
Missing Error Context In Catch Block ▹ view | ✅ |
Files scanned
| File Path | Reviewed |
|---|---|
| scripts/check-type.js | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Need a new review? Comment
/korbit-reviewon this PR and I'll review your latest changes.Korbit Guide: Usage and Customization
Interacting with Korbit
- You can manually ask Korbit to review your PR using the
/korbit-reviewcommand in a comment at the root of your PR.- You can ask Korbit to generate a new PR description using the
/korbit-generate-pr-descriptioncommand in any comment on your PR.- Too many Korbit comments? I can resolve all my comment threads if you use the
/korbit-resolvecommand in any comment on your PR.- Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
- Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.
Customizing Korbit
- Check out our docs on how you can make Korbit work best for you and your team.
- Customize Korbit for your organization through the Korbit Console.
Feedback and Support
scripts/check-type.js
Outdated
| if (child.stdout) { | ||
| console.log(child.stdout); | ||
| } else { | ||
| console.log(child.stderr); | ||
| } |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
scripts/check-type.js
Outdated
| let declarationFiles = getFilesRecursivelySync( | ||
| packageRootDir, | ||
| DECLARATION_FILE_REGEX, | ||
| excludedDeclarationDirs | ||
| ); |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
scripts/check-type.js
Outdated
| } catch (e) { | ||
| console.error(e); | ||
| exit(1); | ||
| } |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
… add error context - Updated log levels for stdout and stderr to reflect appropriate severity. - Refactored fs operations to use asynchronous method. - Enhanced error handling by adding context information.
|
@mistercrunch don't we already have some sort of type checking? Adding you since you did a lot of work to clean up our pre-commits |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
scripts/check-type.js
Outdated
| } | ||
|
|
||
| const packageRootDir = getPackage(packageArg); | ||
| const packagePathRegex = new RegExp(`^${packageRootDir}\/`); |
Check failure
Code scanning / CodeQL
Regular expression injection High
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #32261 +/- ##
===========================================
+ Coverage 60.48% 83.45% +22.96%
===========================================
Files 1931 546 -1385
Lines 76236 39097 -37139
Branches 8568 0 -8568
===========================================
- Hits 46114 32629 -13485
+ Misses 28017 6468 -21549
+ Partials 2105 0 -2105
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
@sadpandajoe yes we do in CI, but this add the checks to Wondering if it would make sense to only do it on superset-frontend/**/js-and-ts-files to keep pre-commit.yml a bit simpler. @alveifbklsiu259 is it all super fast? |
| hooks: | ||
| - id: type-checking-frontend | ||
| name: Type-Checking (Frontend) | ||
| entry: ./scripts/check-type.js |
There was a problem hiding this comment.
From my understanding this will check all the files, not just the ones touched in the commit is that right? Same for all other entries.
If so it seems this will greatly slow down commit speed.
You can see how I did it for eslint, but by using $@, I'm able to pass the list of files to check to the command, so it will only check the files touched in that specific commit.
There was a problem hiding this comment.
know that npm run type take 10-30 seconds, we don't want to add this kind of lag for each commit, especially when you're not even touching these files.
Key here is to somehow pass the list of files touched in the commit (provided by pre-commit), and only run the checks on those files. Now guessing tsc may have to go and import all the related files referenced in that seed file, and could end up taking quite some time if you end up covering files-that-import-files-that-import-other-files, ...
There was a problem hiding this comment.
From my understanding this will check all the files, not just the ones touched in the commit is that right?
It seems that we don't have to explicitly pass $@, pre-commit will only passed the touched files:
// check-type.js
void (async () => {
const args = process.argv.slice(2);
console.log(args)
exit(1)
is it all super fast?
I wouldn't say it is super fast, but it is faster than checking all files.
Key here is to somehow pass the list of files touched in the commit (provided by pre-commit), and only run the checks on those files.
This is exactly what this pre-commit hook does.
... may have to go and import all the related files referenced in that seed file, and could end up taking quite some time if you end up covering files-that-import-files-that-import-other-files
This is still true for this hook. For example:
// superset-frontend/src/components/AsyncAceEditor/index.tsx
import AsyncEsmComponent, {
PlaceholderProps,
} from 'src/components/AsyncEsmComponent';If superset-frontend/src/components/AsyncAceEditor/index.tsx is the only file in the staging area, running this hook will also check src/components/AsyncEsmComponent/index.tsx and the files it imports and so on.
Wondering if it would make sense to only do it on superset-frontend/**/js-and-ts-files to keep pre-commit.yml a bit simpler.
Sure, as long as we only want to type-check the files under superset-frontend, but we still need to exclude superset-frontend/cypress-base/, since superset-frontend/cypress-base/ uses a different tsconfig.json and it contains a conflicting declaration file. i.e. superset-frontend/cypress-base/cypress/support/index.d.ts.
- Removed type-checking-websocket hook - Removed type-checking-embedded-sdk hook - Removed type-checking-cypress hook
feat(type-checking): Add type-checking pre-commit hooks
SUMMARY
This PR introduces some pre-commit hooks to check TypeScript files using
tscw-config. This enhancement aims to streamline the development process by running type checks only on changed files.NOTES
superset-frontend,superset-websocket...) use their owntsconfig.jsonand may require different declaration files, multiple type-checking hooks are used.checkJsis not enabled by default. To enable type-checking for JS/JSX files, either include//@ts-checkat the top of each JS/JSX file or enable it in the package'stsconfig.json.superset-frontend,superset-websocket... will include all files ending with.d.tsin their respective directories (recursively). However, if one needs to include third-party declaration files, one can either import them directly in the files that need them or declare them in thetypefield of the package'stsconfig.json. For exampleimport "@testing-library/jest-dom"DISCLOSURE
I am the author of
tscw-config. I genuinely believe that this library offers an effective solution to the issue discussed in Issue #27379.BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION