svelte2tsx

What is svelte2tsx?

The svelte2tsx package is a tool that converts Svelte components into TypeScript (TSX) files. This conversion allows for better type checking, autocompletion, and other TypeScript benefits when working with Svelte components.

What are svelte2tsx's main functionalities?

Convert Svelte to TSX

This feature converts a Svelte component into a TSX file. The input is a Svelte component string, and the output is a TSX string. This allows developers to leverage TypeScript's type checking and autocompletion features.

const svelte2tsx = require('svelte2tsx');
const svelteCode = `<script>let name: string = 'world';</script><h1>Hello {name}!</h1>`;
const tsxCode = svelte2tsx(svelteCode);
console.log(tsxCode);

Type Checking

By converting Svelte components to TSX, TypeScript can perform type checking on the components. This helps catch type errors early in the development process.

const svelte2tsx = require('svelte2tsx');
const svelteCode = `<script>let count: number = 0;</script><button on:click={() => count += 1}>Increment</button>`;
const tsxCode = svelte2tsx(svelteCode);
// TypeScript can now check types in the converted TSX code

Autocompletion

Converting Svelte components to TSX enables autocompletion in editors like VSCode. This improves the developer experience by providing suggestions and documentation as you type.

const svelte2tsx = require('svelte2tsx');
const svelteCode = `<script>let name: string = 'world';</script><h1>Hello {name}!</h1>`;
const tsxCode = svelte2tsx(svelteCode);
// Editors like VSCode can now provide autocompletion for the TSX code

Other packages similar to svelte2tsx

svelte-preprocess

svelte-preprocess is a package that allows you to use various preprocessors with Svelte, including TypeScript. While it doesn't convert Svelte to TSX, it enables the use of TypeScript directly within Svelte components, providing type checking and autocompletion.

svelte-check

svelte-check is a command-line tool that provides type checking and linting for Svelte projects. It uses the TypeScript compiler to check Svelte components for type errors, similar to what svelte2tsx achieves by converting to TSX.

svelte-language-server

svelte-language-server is a language server for Svelte that provides IDE features like autocompletion, go-to-definition, and type checking. It integrates with editors like VSCode to enhance the development experience for Svelte projects.

README

svelte2tsx

Converts Svelte component source into TSX. The TSX can be type checked using the included svelte-jsx.d.ts and svelte-shims.d.ts.

This project only converts svelte to tsx, type checking is left to consumers of this plugin such as language services

type SvelteCompiledToTsx = {
    code: string;
    map: import('magic-string').SourceMap;
};

export default function svelte2tsx(svelte: string): SvelteCompiledToTsx;

For example

Input.svelte

<script>
    export let world = 'name';
</script>

<h1>hello {world}</h1>

will produce this ugly but type checkable TSX

<></>;
function render() {
    let world = 'name';
    <>
        <h1>hello {world}</h1>
    </>;
    return { props: { world }, slots: {}, events: {} };
}

export default class _World_ extends __sveltets_2_createSvelte2TsxComponent(
    __sveltets_2_partial(__sveltets_2_with_any_event(render))
) {}

with a v3 SourceMap back to the original source.

For more examples of the transformations, see the test/**/samples folders

Credits

• halfnelson for creating svelte2tsx
• pushkine for creating the source mapping test infrastructure