Skip to content
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

feat: typescript plugin poc implementation #902

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

Conversation

BioPhoton
Copy link
Collaborator

@BioPhoton BioPhoton commented Dec 23, 2024

TypeScript Plugin PoC Implementation

Incremental migration for TypeScript projects
This plugin enables step-by-step adoption of newer TypeScript features while avoiding large-scale refactors.


📝 Related Issue

👉 #901 – TypeScript Plugin Architecture Discussion

NOTE:
This PoC PR serves as an initial implementation to validate the proposed architecture and core functionality.
The final implementation will be delivered in smaller, focused PRs to ensure clarity, better reviewability, and incremental improvements.


🔌 Plugin Overview

Purpose

The plugin enables incremental adoption of TypeScript configurations and helps track regressions while avoiding CI failures.

Key Features:

Extracts Diagnostics: Uses TypeScript’s compiler APIs to analyze diagnostics.
Audit Mapping: Maps diagnostics to audit rules for actionable feedback.
Migration Support: Handles migration via separate configs (tsconfig.json, tsconfig.next.json).
Detailed Reports: Provides grouped, actionable error/warning summaries.

Report Summary

Overview of Audit Groups, Audit Counts, and Diagnostic Issue Types.

🗂 Group Name 📋 Audits 🐞 Issues
Problems Group (3) syntax-errors, semantic-errors, internal-errors 1XXX, 2XXX, 5XXX
Suggestions Group (1) suggestions 3XXX [1]
Configuration Group (1) configuration-errors 6XXX
Ungrouped Audits (2). language-service-errors, unknown-codes 4XXX.
---------------------------- ----------------------------------------------------- -----------------------
3 Groups Total 6 Audits Total 5 Ranges Total

This PR includes:

  • implementation
  • unit tests
  • integration tests
    • diagnostics generation
    • runner execution
  • e2e tests
    • report generation

Proposed PR delivery:

  • changes in @code-pushup/utils
  • runner logic
  • plugin utils
  • plugin & usage
  • docs
  • e2e & CONTRIBUTING.md

⚠️ Limitations & Challenges

  • Range Mapping: No direct link between diagnostics and compiler options; requires manual grouping in within ranges to get more fine-grained audits.

Alternatives

  • reimplemented compiler option to as audit mapping: Big effort and hard to maintain.
  • TS-code as audit: A audit per TS-code e.g. ts-2345 .
    This leads to a huge amount of audits > ~2000 if not reduces to a subset of useful codes, hard to understand audit slug
  • A reduced set of supported Audits: A subset of manually maintained audits and related logic for defaults like in the implemented version of this PR.
  • Patching TypeScript: Patching TypeScript to expose the internal logic. - fragile and unreliable

🧪 How to Test the Plugin

  1. run nx code-pushup --onlyPlugins=typescript to execute the plugin and generate the report
  2. the generated report is available under .code-pushup/report.md

📊 Visual Examples

🖥️ Dashboard Overview
Central view showing audit results and issue summaries.
Dashboard Overview

📂 Additional Visuals

Click below to explore more detailed visuals.

📸 Expand to View More Visuals

🖥️ Audit Insights 1
Drill-down view for grouped audits and diagnostics.
Audit Insights 1

🖥️ Audit Insights 2
Deeper inspection of diagnostics linked to audits.
Audit Insights 2

🛠️ Code Diagnostics 1
Pinpoint file locations and error lines.
Code Diagnostics 1

🛠️ Code Diagnostics 2
Detailed breakdown of warnings and errors.
Code Diagnostics 2

Example Md Report:

Code PushUp Report

🏷 Category ⭐ Score 🛡 Audits
Typescript Configuration 🟡 85 6
Bug prevention 🟡 78 5
Code style 🟢 100 2

🏷 Categories

Typescript

🟡 Score: 85

🛡️ Audits

Semantic-Errors (Typescript)

🟥 19 (score: 0)

Issues

Severity Message Source file Line(s)
🚨 error TS2307: Cannot find module './non-existent' or its corresponding type declarations. src/module-resolution/ts-2307-module-not-fount.ts 2
🚨 error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. src/strict/no-implicit-this/ts-2683-not-implicit-this.ts 3
🚨 error TS2349: This expression is not callable.
Type 'Number' has no call signatures.
src/strict/strict-function-types/ts-2349-not-callable.ts 3
🚨 error TS2322: Type 'null' is not assignable to type 'string'. src/strict/strict-null-checks/ts-2531-strict-null-checks.ts 2
🚨 error TS2367: Condition will always return 'false' since types have no overlap. src/strict/conditional-types/ts-2367-invalid-condition.ts 4

📖 Docs


closes #901

@github-actions github-actions bot added 📖 Project documentation improvements or additions to the project documentation 🔬 testing writing tests 🛠️ tooling labels Dec 23, 2024
Copy link

github-actions bot commented Dec 23, 2024

Code PushUp

🤨 Code PushUp report has both improvements and regressions – compared target commit 97d1de7 with source commit c219602.

🕵️ See full comparison in Code PushUp portal 🔍

🏷️ Categories

🏷️ Category ⭐ Previous score ⭐ Current score 🔄 Score change
Performance 🟡 58 🟡 54 ↓ −3.8
Code coverage 🟢 91 🟢 91 ↓ −0.2
Typescript n/a (*) 🟢 91 n/a (*)
Security 🟡 81 🟡 81
Updates 🟡 80 🟡 80
Accessibility 🟢 91 🟢 91
Best Practices 🟢 100 🟢 100
SEO 🟡 61 🟡 61
Bug prevention 🟢 100 🟢 100
Code style 🟢 100 🟢 100

(*) New category.

👎 2 groups regressed, 👍 1 audit improved, 👎 6 audits regressed, 11 audits changed without impacting score

🗃️ Groups

🔌 Plugin 🗃️ Group ⭐ Previous score ⭐ Current score 🔄 Score change
Lighthouse Performance 🟡 58 🟡 54 ↓ −3.8
Code coverage Code coverage metrics 🟢 91 🟢 91 ↓ −0.2

15 other groups are unchanged.

🛡️ Audits

🔌 Plugin 🛡️ Audit 📏 Previous value 📏 Current value 🔄 Value change
Lighthouse Largest Contentful Paint 🟨 2.9 s 🟨 3.3 s ↑ +14.7 %
Lighthouse Speed Index 🟨 4.7 s 🟨 5.3 s ↑ +12.4 %
Lighthouse First Contentful Paint 🟨 2.7 s 🟨 2.7 s ↑ +1.5 %
Lighthouse Total Blocking Time 🟥 3,750 ms 🟥 3,190 ms ↓ −14.8 %
Code coverage Line coverage 🟩 90.9 % 🟩 90.2 % ↓ −0.7 %
Code coverage Branch coverage 🟨 85.8 % 🟨 85.5 % ↓ −0.3 %
Code coverage Function coverage 🟩 93.1 % 🟩 93.1 % ↓ −0.1 %
Lighthouse Avoids enormous network payloads 🟩 Total size was 1,816 KiB 🟩 Total size was 1,821 KiB ↑ +0.2 %
Lighthouse Max Potential First Input Delay 🟥 2,270 ms 🟥 1,760 ms ↓ −22.3 %
Lighthouse Minimizes main-thread work 🟥 13.9 s 🟥 13.5 s ↓ −2.7 %
Lighthouse Uses efficient cache policy on static assets 🟨 28 resources found 🟨 28 resources found ↑ +0.1 %
Lighthouse JavaScript execution time 🟥 6.1 s 🟥 6.3 s ↑ +3.3 %
Lighthouse Eliminate render-blocking resources 🟥 Potential savings of 970 ms 🟥 Potential savings of 770 ms ↓ −20 %
Lighthouse Time to Interactive 🟥 13.0 s 🟥 13.2 s ↑ +1.2 %
Lighthouse Metrics 🟩 100% 🟩 100% ↑ +1.2 %
Lighthouse Initial server response time was short 🟩 Root document took 430 ms 🟩 Root document took 350 ms ↓ −18.7 %
Lighthouse Server Backend Latencies 🟩 100 ms 🟩 60 ms ↓ −45.1 %
Lighthouse Network Round Trip Times 🟩 10 ms 🟩 20 ms ↑ +73.2 %

569 other audits are unchanged.

@BioPhoton BioPhoton changed the title feat: add TypeScript plugin feat: typescript plugin poc implementation Dec 29, 2024
@BioPhoton BioPhoton marked this pull request as ready for review January 5, 2025 21:43
@BioPhoton BioPhoton requested a review from vmasek January 6, 2025 12:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧩 eslint-plugin 📖 Project documentation improvements or additions to the project documentation 🔬 testing writing tests 🛠️ tooling 🧩 utils
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TypeScript Plugin
4 participants