Using TSC to type check Svelte files

[ebeloded]

Description

svelte-check is a great tool that does a lot of things - type checking, a11y issues, css class usage.

However, most of the time I would like to just do type checking and I would like it to be done by tsc, without having to invoke svelte-check.

To elaborate on my use case, we have a large monorepo containing four SvelteKit apps and numerous TypeScript projects related to these apps. Our robust composite TypeScript configuration allows us to run type checking across all projects within the monorepo. Quick type checking enables us to include it in pre-commit and pre-push hooks without compromising developer experience. Additionally, running tsc in watch mode lets us see type issues immediately and utilize VSCode problem matchers to highlight issues as they arise.

Svelte projects present a weak link in this setup.

1. They are significantly slower, as each project requires its own svelte-check.
2. The projects cannot be fully integrated into the composite TypeScript configuration.
3. Despite efforts to configure the problem matchers (Add problemMatcher for svelte-check #1036), they do not work reliably.

Not sure if this is directly related to svelte-check, but every time I change branches, I have to restart the Svelte Language Server in order to update the error output of tooling.

I believe this is a significant disadvantage for developer experience in Svelte compared to TSX-based frameworks like Solid or React.

Proposed solution

Svelte Language Tools have TypeScript Plugin as one of the projects. I understand it does a bunch of things outlined in #580. However, it is no help when it comes to doing type checking with TSC.

I tried adding the plugin as a dependency and configuring it in tsconfig as described here:

{
    "compilerOptions": {
        "plugins": [{
            "name": "typescript-svelte-plugin",
            "enabled": true, 
            "assumeIsSvelteProject": true
        }]
    }
}

But it didn't help make svelte files type-checkable.

I'm not an expert in tooling, but I'd like to suggest that if it is possible to let tsc check svelte files, to make it so.

Alternatives

No response

Additional Information, eg. Screenshots

No response

[ebeloded]

I did some digging and found that what I want is not feasible 😞

Using tsc (the TypeScript compiler) to directly type-check Svelte files is not feasible, even with a TypeScript plugin. Here’s why and what alternatives you might consider:

Limitations of TypeScript Plugins

• File Extension Support: TypeScript plugins, specifically language service plugins, cannot add support for new file extensions like .svelte. They are designed to augment the TypeScript language service but cannot alter the core compiler behavior to recognize and parse new file types.
• Parsing Custom Syntax: Svelte files contain a mix of HTML, CSS, and JavaScript (or TypeScript). TypeScript plugins cannot introduce custom parsing logic to handle this unique syntax within the .svelte files.

Why tsc Can’t Type-Check Svelte Files Directly

• Compiler Constraints: The TypeScript compiler is built to understand .ts and .tsx files. It doesn’t have the capability to parse and understand the Svelte-specific syntax and structure.
• Lack of Transformation Support: While TypeScript supports custom AST transformations through transformers, these are applied after the TypeScript compiler has parsed the source code. They cannot be used to parse new file formats.

That said, I wonder if people have suggestions on how to best address the challenges of working in a big monorepo with svelte projects.