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.

Sign up for GitHub

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

Jump to bottom

feat: typescript plugin poc implementation #902

Draft
wants to merge 72 commits into
base: main
Choose a base branch
from
Draft

feat: typescript plugin poc implementation #902

wants to merge 72 commits into from

Conversation

BioPhoton
Copy link
Collaborator

@BioPhoton BioPhoton commented Dec 23, 2024 •
edited
Loading

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
Language & Environment 12 33
Interop Constraints 5 12
Module Resolution 5 11
Type Checking Behavior 4 6
Control Flow Options 3 4
Build Emit Options 10 13
Strict 8 46
---------------------------- ------------- -------------
Total Groups 7
Total Audits 47 125

This PR includes:

  • implementation
  • unit tests
    • user prompting for unsupported features
  • integration tests
    • diagnostics generation
    • default flags generation
    • runner execution
  • e2e tests
    • postinstall hook
    • report generation
  • user docs
  • code docs

Todos:

  • tsConfigPath: './tsconfig.json', should be optional
  • a good based to add comments to all codes
  • a good base to add integration tests for all diagnostic issues
  • clean up mock data
  • refactor types
  • cleanup post install logic

Proposed PR delivery:

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

⚠️ Limitations & Challenges

  • Manual Mapping: No direct link between diagnostics and compiler options; requires maintenance.
  • Hidden Defaults: Compiler defaults aren't exposed; generated during postinstall.
  • Shorthand Expansion: Options like "strict" expand internally; must be replicated manually.
  • Version Drift: TypeScript updates may break diagnostic mappings.

Alternatives

  • 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 npm install to trigger the new postinstall script in your repo
  2. run nx code-pushup --onlyPlugins=typescript to execute the plugin and generate the report
  3. 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 🟡 88 47

🏷 Categories

Typescript

🟡 Score: 88

🛡️ Audits

ModuleResolution (Typescript)

🟥 19 (score: 0)

Issues

Severity Message Source File Line(s)
🚨 error Type 'string' is not assignable to type 'number'. src/utils/math.ts 14
🚨 error Property 'id' does not exist on type 'User'. src/models/user.ts 22
⚠️ warning 'fetchData' is deprecated: Use 'fetchDataV2' instead. src/api/client.ts 45

📖 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
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 23, 2024 •
edited
Loading

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.

@vmasek
Copy link
Collaborator

vmasek commented Dec 25, 2024

Amazing work, can't wait to give it a try in some big project, I had a brief look but I'll review later (🤔 is this a 🎄🎁?)

BioPhoton
BioPhoton commented Dec 28, 2024
View reviewed changes
package.json Outdated Show resolved Hide resolved
BioPhoton
BioPhoton commented Dec 28, 2024
View reviewed changes
package.json Outdated Show resolved Hide resolved
BioPhoton
BioPhoton commented Dec 28, 2024
View reviewed changes
packages/plugin-typescript/README.md
Comment on lines +158 to +163
{
slug: 'language-and-environment',
weight: 1,
type: 'group',
plugin: 'typescript',
},
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

here we should mention the helper

@BioPhoton BioPhoton changed the title feat: add TypeScript plugin feat: typescript plugin poc implementation Dec 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@BioPhoton BioPhoton

Labels
📖 Project documentation improvements or additions to the project documentation 🔬 testing writing tests 🛠️ tooling 🧩 utils
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

TypeScript Plugin
3 participants
@BioPhoton @vmasek @aramirezj