Sveld

Overview:

sveld is a documentation generator for Svelte components that generates TypeScript definitions by statically analyzing their props, events, slots, and more. It allows for the generation of component documentation in Markdown and JSON output formats. The main purpose of this project is to make third-party Svelte component libraries compatible with the Svelte Language Server and TypeScript with minimal effort required by the author. It enables the use of TypeScript definitions for intelligent code completion in Integrated Development Environments (IDE) like VSCode. sveld is used by Carbon Components Svelte to auto-generate component types and API metadata.

Features:

• Generate TypeScript definitions for Svelte components
• Statically analyze props, events, slots, and more
• Define prop types and signatures using JSDoc notation
• Emit component documentation in Markdown and JSON output formats

Installation:

To install sveld, follow these steps:

1. Add sveld as a development dependency by running the following command:

   npm install --save-dev sveld
   

2. Import and add sveld as a plugin to your rollup.config.js file:

   // rollup.config.js
   import sveld from 'sveld';
   
   export default {
     // ... other config options
     plugins: [
       // ... other plugins
       sveld(),
     ],
   };
   

3. By default, TypeScript definitions are emitted to the types folder when building the library. If you want to customize the output folder, you can use the typesOptions.outDir option in the sveld configuration.

   // rollup.config.js
   import sveld from 'sveld';
   
   export default {
     // ... other config options
     plugins: [
       // ... other plugins
       sveld({ typesOptions: { outDir: 'dist' } }),
     ],
   };
   

4. The integration folder of the sveld repository contains example setups that demonstrate different configurations and use cases.

Summary:

sveld is a tool that generates TypeScript definitions for Svelte components by analyzing their props, events, slots, and more. It aims to make third-party Svelte component libraries compatible with the Svelte Language Server and TypeScript with minimal effort required from the author. sveld allows for the generation of component documentation in Markdown and JSON formats and can be integrated into the build process using Rollup. With sveld, developers can benefit from intelligent code completion and type checking in IDEs like VSCode.