Expose `emitDts` to the public

[mrtnbroder]

Is your feature request related to a problem? Please describe. I'm currently working on a svelte component library written in typescript and while looking/searching for solutions to build/generate typescript types for my components, I came across several solutions like e.g. sveld, however, it wasn't really what I was expecting and doesn't even work correctly.

I then stumbled across svelte-kits package feature and saw that it actually generated what I was looking for. While looking at the source code and figuring out how it's generating the types, I saw that svelte2tsx somewhat "hidden" emitDts function does exactly what I want. Given a source input directory, it generates working typescript types for my svelte components.

Describe the solution you'd like I'd love to have either (at best both) solutions:

1. make emitDts publicly available (and add some docs), maybe even expose it as a npx package for easy usage like npx emitDts --input ./src --output ./types
2. make it a rollup plugin

I'd prefer the latter one since it would be easy to integrate it into my current build setup. But it doesn't matter that much.

Describe alternatives you've considered Like mentioned, there are none except sveld, who came close to what I wanted, but wasn't the "100%" solution.

To help some others, here's my current script to generate typescript types from a svelte src directory.

(credits actually go the svelte-kit package source maintainers)

const svelte2tsx = require("svelte2tsx")
const path = require("path")

// source dir
const source = path.join(path.resolve(), "src")
// types dir
const declarationDir = path.join(path.resolve(), "types")

svelte2tsx.emitDts({
  libRoot: source,
  // !important, otherwise it doesn't generate types.
  svelteShimsPath: require.resolve("svelte2tsx/svelte-shims.d.ts"),
  declarationDir: "types",
})

[dummdidumm]

The primary use case for this function is to help SvelteKit package generate the type definitions. The API is public insofar that you are free to use it and wrap it so it's usable in other contexts. There are no plans to make this available in another form ourselves (for example a rollup plugin).

[mrtnbroder]

It is public, just nowhere documented or mentioned. I had to "dig deep" for this. Let's see if I can work on a rollup plugin for this myself. thanks

[Tymek]

diff --git a/packages/svelte2tsx/src/svelte2tsx/index.ts b/packages/svelte2tsx/src/svelte2tsx/index.ts
index 33e5ba1..bea0060 100644
--- a/packages/svelte2tsx/src/svelte2tsx/index.ts
+++ b/packages/svelte2tsx/src/svelte2tsx/index.ts
@@ -429,7 +429,10 @@ declare function __sveltets_1_createSvelteComponentTyped<Props, Events, Slots>(
             code: str.toString(),
             map: str.generateMap({ hires: true, source: options?.filename }),
             exportedNames: exportedNames.getExportsMap(),
-            events: events.createAPI()
+            events: events.createAPI(),
+            componentDocumentation,
+            slots,
+            generics
         };
     }
 }

This modification could enable a use case you are asking for @mrtnbroder. Related issue open in SvelteKit: Custom Storybook for SvelteKit? sveltejs/kit#1979

I made a draft POC of Vite(/Rollup) plugin: https://gist.github.com/Tymek/20181838ba64c06d01ecb7fbe68e823c

[mrtnbroder]

Thanks so much for that @Tymek, I saw that list before and it became super handy! Thanks for creating a POC! I will try to implement it later, I have been busy with automating CI/CD lately 😅

[Tymek]

There is a clear need for official docgen tool - I found 5 different projects re-implementing it in various ways (links in comment in Custom Storybook for SvelteKit issue). IMHO docgen should be a part of official language-tools. Since svelte2tsx already does that all we need for now is to have the output exposed to the outside, even if internal interface was not designed for that.

Anyhow, I'll submit a PR later today, let's see if maintainers agree. I will open source the entire plugin POC setup when(||if) the patch is merged. Maybe we can collaborate on that @mrtnbroder? I only have parsing done, no UI at the moment.

[dummdidumm]

This sounds like it goes beyond what is requested from the OP, which is to make emitDts known better. There is an official tool already to do this, and that tool is SvelteKit's package command, which outputs type definition files alongside the output. I don't know what you mean by "official docgen tool" exactly, and I don't know what you mean by "isn't exposed to the outside yet" - you are free to install svelte2tsx from the outside and use emitDts today.

[Tymek]

Oh, sorry, I didn't get it at first. My use case is a bit different. I'd like to hook into it earlier, before emitting the files. To do the npx thing you suggested, it is a different change. Like:

  // package.json
  "bin": {
    "emitSvelteDts": "./dist/<cli>.js"
  }

Plus a param parser, and since EmitDtsConig already enables configuration, it should be possible to write an external tool to run that.