svelte2tsx

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_1_createSvelte2TsxComponent(
    __sveltets_1_partial(__sveltets_1_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

Similar packages

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.