fix(website): acquired types are shown in the editor but not reflected in linting #11198

mdm317 · 2025-05-09T16:57:38Z

PR Checklist

Addresses an existing open issue: fixes Bug(website): Acquired types are shown in the editor but not reflected in linting #11120
That issue was marked as accepting prs
Steps in Contributing were taken

Overview

I think this issue occurs because of differences in the properties used when creating a ts.Program between Monaco and TypeScript-VFS.

typescript-eslint/packages/website/src/components/linter/createParser.ts

Line 29 in e57126a

return vfs.createVirtualTypeScriptEnvironment(

The modules like monaco, typescript, and typescript-website are scattered, so it’s a bit confusing

1. create ts.program by monace

When monaco-editor creating this code will excute link
private _languageService = ts.createLanguageService(this);

createLanguageService in typescript. link

const rootFileNames = host.getScriptFileNames().slice();
 // some code
const options: CreateProgramOptions = {
  rootNames: rootFileNames,
  options: newSettings,
  host: compilerHost, 
  oldProgram: program,
  projectReferences,
};
program = createProgram(options);

And filenames output by getScriptFileNames will be added in the code below.
defaults.addExtraLib(code, path) in typescript-website => defaults.addExtraLib(code, path) in monaco

So, when creating a ts.Program, the rootNames array includes some libraries, such as Node or React.

2. create ts.program by TypeScript-VFS.

typescript-eslint/packages/website/src/components/linter/createParser.ts

Lines 24 to 31 in e57126a

const registeredFiles = new Set<string>();

const createEnv = (

compilerOptions: ts.CompilerOptions,

): tsvfs.VirtualTypeScriptEnvironment => {

return vfs.createVirtualTypeScriptEnvironment(

system,

[...registeredFiles],

Unlike case 1 above,We don't pass the name of a node_modules folder in fileNames.

In the sentence above, I modified it so that rootNames are provided when creating the ts.Program for both the Editor and Linting

Testing

Click a link that already has code pre-filled.
Enter code in an empty playground

typescript-eslint · 2025-05-09T16:57:41Z

Thanks for the PR, @mdm317!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint.

netlify · 2025-05-09T16:57:42Z

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	`f9bd202`
🔍 Latest deploy log	https://app.netlify.com/projects/typescript-eslint/deploys/682da407195f0a00083babd7
😎 Deploy Preview	https://deploy-preview-11198--typescript-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 99 (🟢 up 1 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 98 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

nx-cloud · 2025-05-09T16:58:29Z

View your CI Pipeline Execution ↗ for commit f9bd202.

Command	Status	Duration	Result
`nx typecheck ast-spec`	✅ Succeeded	<1s	View ↗
`nx run-many -t build --exclude website website-...`	✅ Succeeded	2s	View ↗
`nx run-many -t clean --parallel=20`	✅ Succeeded	13s	View ↗

☁️ Nx Cloud last updated this comment at 2025-05-28 19:08:56 UTC

codecov · 2025-05-19T11:37:38Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.92%. Comparing base (e57126a) to head (f9bd202).
Report is 56 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11198   +/-   ##
=======================================
  Coverage   90.91%   90.92%           
=======================================
  Files         499      499           
  Lines       50809    50847   +38     
  Branches     8369     8384   +15     
=======================================
+ Hits        46195    46233   +38     
  Misses       4599     4599           
  Partials       15       15

Flag	Coverage Δ
unittest	`90.92% <ø> (+<0.01%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 8 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

packages/website/src/components/linter/bridge.ts

packages/website/src/components/linter/createParser.ts

packages/website/src/components/linter/createLinter.ts

JoshuaKGoldberg

OK! Sorry this PR's review took so long @mdm317. It's quite a tricky change and we had a hard time getting it the time it deserved. But I took a deep dive today and all the comments make sense + were very helpful. Thanks so much for fixing this tricky bug! ❤️

JoshuaKGoldberg · 2025-06-16T17:05:38Z

packages/website/src/components/linter/bridge.ts

-  files.set(`/input${config.fileType}`, config.code);
+  if (config.code !== '') {
+    files.set(`/input${config.fileType}`, config.code);
+  }


[Question] Why wouldn't we want to set '' for code? What if the user explicitly puts in a blank file?

The above code is executed when the playground is first loaded.

typescript-eslint/packages/website/src/components/linter/createParser.ts

Lines 29 to 33 in ccd0791

return vfs.createVirtualTypeScriptEnvironment(

system,

[...registeredFiles],

window.ts,

compilerOptions,

When we set '' for code in the system, a "File '/input.tsx' not found." error occurs in createVirtualTypeScriptEnvironment

If the above code is missing, the playground will not load successfully when the user clicks the playground button in this page

Therefore, we should avoid setting '' fo code in the system.

typescript-eslint/packages/website/src/components/linter/createParser.ts

Lines 46 to 47 in ccd0791

// if text is empty use empty line to avoid error

const code = text || '\n';

Also, when the user changes the code to '', this code prevents the code field from being set to '' in the system.

Nice, that makes sense. Thanks!

fix : add rootfile name when create program

529ce80

kirkwaiblinger changed the title ~~fix(website): Acquired types are shown in the editor but not reflected in linting~~ fix(website): acquired types are shown in the editor but not reflected in linting May 9, 2025

fix : not including lib file and fix error

f5d9dfb

fix: make features work when code is written in an empty playground

f9bd202

mdm317 commented May 21, 2025

View reviewed changes

mdm317 marked this pull request as ready for review May 21, 2025 16:52

JoshuaKGoldberg approved these changes Jun 16, 2025

View reviewed changes

JoshuaKGoldberg added the 1 approval >=1 team member has approved this PR; we're now leaving it open for more reviews before we merge label Jun 16, 2025

JoshuaKGoldberg merged commit 76cc62c into typescript-eslint:main Jun 18, 2025
67 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(website): acquired types are shown in the editor but not reflected in linting #11198

fix(website): acquired types are shown in the editor but not reflected in linting #11198

mdm317 commented May 9, 2025 •

edited by kirkwaiblinger

Loading

Uh oh!

typescript-eslint bot commented May 9, 2025

Uh oh!

netlify bot commented May 9, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented May 9, 2025 •

edited

Loading

Uh oh!

codecov bot commented May 19, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JoshuaKGoldberg left a comment

Uh oh!

JoshuaKGoldberg Jun 16, 2025

Uh oh!

mdm317 Jun 17, 2025

Uh oh!

JoshuaKGoldberg Jun 18, 2025

Uh oh!

Uh oh!

Uh oh!

	const registeredFiles = new Set<string>();

	const createEnv = (
	compilerOptions: ts.CompilerOptions,
	): tsvfs.VirtualTypeScriptEnvironment => {
	return vfs.createVirtualTypeScriptEnvironment(
	system,
	[...registeredFiles],

	// if text is empty use empty line to avoid error
	const code = text \|\| '\n';

Uh oh!

fix(website): acquired types are shown in the editor but not reflected in linting #11198

fix(website): acquired types are shown in the editor but not reflected in linting #11198

Conversation

mdm317 commented May 9, 2025 • edited by kirkwaiblinger Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

Overview

Testing

Uh oh!

typescript-eslint bot commented May 9, 2025

Uh oh!

netlify bot commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for typescript-eslint ready!

Uh oh!

nx-cloud bot commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

Uh oh!

JoshuaKGoldberg Jun 16, 2025

Choose a reason for hiding this comment

Uh oh!

mdm317 Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

JoshuaKGoldberg Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mdm317 commented May 9, 2025 •

edited by kirkwaiblinger

Loading

netlify bot commented May 9, 2025 •

edited

Loading

nx-cloud bot commented May 9, 2025 •

edited

Loading

codecov bot commented May 19, 2025 •

edited

Loading