Add type definitions for *.svx files by default

[devmattrick]

Currently, MDsveX doesn't provide a way for TypeScript to really understand .svx files. The way Svelte deals with this issue is by declaring a global ambient module (in their ambient.d.ts file. Since `.svx` files from what I can tell are just disguised Svelte components, this is what I'm using currently to workaround the IDE errors I'm getting:

global.d.ts

// Based on svelte/runtime/ambient.d.ts
declare module "*.svx" {
    export { SvelteComponentDev as default } from "svelte/internal";
}

But it'd be awesome if this could be included in the mdsvex package or something to not require this sort of thing. Thanks!

[pngwn]

I'd actually like proper typescript support for svx files. This will require language server integration. Ambient declaration will be good solution until I can figure out the details of better support.

[vhscom]

Given the following module declaration provided by the OP:

// global.d.ts
declare module "*.svx" {
  export { SvelteComponentDev as default } from "svelte/internal";
}

The following needs to be added to address the metadata named export:

declare module "*.svx" {
  export { SvelteComponentDev as default } from "svelte/internal";
+ export { metadata };
}

I suspect the first export is either (a) not needed or (b) can be simplified but without knowing which errors OP was hitting in their use case it's hard to know until writing enough code against this lovely MDX-for-Svelte library to see which errors might jump out.

[PuruVJ]

I'd like to take a stab at it

Because these are ambient types, I think we'd need to have another globals.d.ts file in the exports, and give instructions to add <reference types="mdsvex/globals" or add it to types field of tsconfig.json.

What do you think?

(On an off-note, I'd like to add a defineMDSvexConfig helper function to make the config more type safe when used with svelte-add(it makes a mdsvex.config.js, which I highly prefer over putting it in svelte.config.js), we can discuss that after the ambient issue is fixed)

[pngwn]

Your proposal makes sense to me. Would happily accept a PR, I haven't looked into this at all.

Also an issue for config typedefs: https://github.com/pngwn/MDsveX/issues/300

[PuruVJ]

Got it! Will make separate PRs for both later today

[pngwn]

Hero.

[PuruVJ]

Hi, I have added the proper typings, how do I test it? Is there a demo folder or something?

[PuruVJ]

It's done! This issue can be closed

[vhscom]

Thanks for your effort, PuruVJ. But shouldn't we test it first? :smiley: I pulled down 0.10.2 and added the following pragma to my global.d.ts under the one included by SvelteKit:

  /// <reference types="@sveltejs/kit" />
+ /// <reference types="mdsvex/globals" />

Then removed my custom typings to handle .svx files and opened up a .svelte module importing a .svx file and I still see a type error. To reproduce pull down the void-app repo, make the changes mentioned above and then open src/layouts/AboutPage.svelte to see the type error return. Did I miss something?

[PuruVJ]

Strange, it's working fine for me. Reload your vscode once?

Does Ctrl+Click on the mdsvex/globals string take you to the d.ts file? If not, you may be a version behind

Edit: From the pnpm lock on your repo, mdsvex is still showing 0.9.8 everywhere, unless you haven't uploaded new changes?

[PuruVJ]

I did the same

[vhscom]

Strange, it's working fine for me. Reload your vscode once?

That was the issue. I had only restarted the window and not the app itself (I'm using VSCodium). Thanks!

[PuruVJ]

Ah. Great it's resolved for you

[pngwn]

Resolved in #396 and #399.

[pngwn]

This has been reverted, last release broke the lib.

[pngwn]

Resolved in #409 released in 0.10.5