Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
svelte2tsx
Advanced tools
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.
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
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 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 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.
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
<h1>hello {world}</h1>
<script>
export let world = "name"
</script>
will produce this ugly but type checkable TSX
<></>;
function render() {
let world = 'name';
<>
<h1>hello {world}</h1>
</>;
return { props: { world }, slots: {} };
}
export default class {
$$prop_def = __sveltets_partial(render().props);
$$slot_def = render().slots;
}
with a v3 SourceMap back to the original source.
For more examples of the transformations, see the test/**/samples
folders
svelte2tsx
FAQs
Convert Svelte components to TSX for type checking
The npm package svelte2tsx receives a total of 137,517 weekly downloads. As such, svelte2tsx popularity was classified as popular.
We found that svelte2tsx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.