svelte wrapper

[demetrius-mp]

i dont know if you have any interest on a svelte wrapper for this component, but i have created the following ink-mde-svelte package. Also published on npm.

if you want to move it to this repo, or move it to your account, i'd be happy to help.

[davidmyersdev]

Hey there, @demetrius-mp! Thanks so much for putting this together. 🎉

I'm always interested in making it easier to use ink-mde in more frameworks and configurations, and I'm absolutely open to merging your package into this repo. Would you be open to submitting a PR that adds your project under a folder called svelte?

[demetrius-mp]

sure! just let me study a bit more on how packaging works with svelte, because if i simply place my repo under a svelte folder here, it wont have the desired behaviour, which would be to import the component like this:

import InkMde from 'ink-mde/svelte'

[demetrius-mp]

im having some problems:

I was checking your /vue folder, and i noticed you dont use typescript to add type declarations, since vue provides their own way of typing. But svelte only uses typescript to provide type declarations.

To keep a godd developer experience both for the users of the package, and the people who will maintain the svelte component, the best way of creating the package would be to use svelte kit packaging.

Basically, this will handle separating the types (on a .svelte.d.ts) file, from the component itself, which allows for both TS and JS users to use the component, while the maintainer can work on a single file that glues svelte and typescript code.

However, i think there is no way to put the sveltekit project under a /svelte folder, and export the component correctly.

One solution i can think of would be to either turn this into a monorepo with would have the ink-mde repo, @ink-mde/vue, and @ink-mde/svelte or any other frameworks you wish to support.

The other solution would be to keep it in a separate repo. If you want to do this way, i could transfer ownership of my repo to you.

[davidmyersdev]

So, Vue does have its own method of providing prop types, but I am actually using TypeScript to generate the types for the Vue component. As for SvelteKit, you can actually drop the entire project into its own folder and then use a conditional export to help Node resolve the correct path in the top-level package.json.

[demetrius-mp]

hmm, i see

just to be sure:
sveltekit packaging will create a /package folder in its root (on the same folder as its /src folder)

this /package folder is on .gitignore

what you are asking me to do is to remove it from the gitignore, so that it can be seen accessible
on /svelte/package.json, and then, export the component

after this, i need to add the conditional export to the ink-mde root package.json.

is that it? geez im sorry for such long texts, ive never did anything related to packaging before

[davidmyersdev]

sveltekit packaging will create a /package folder in its root (on the same folder as its /src folder)

That sounds right. Vite currently creates a dist folder that is ignored as well.

what you are asking me to do is to remove it from the gitignore, so that it can be seen accessible
on /svelte/package.json, and then, export the component

This step is actually unnecessary. We don't want to keep the build in version control. Instead, the build step will run as a part of the deploy process. The current build command runs for both the standalone package (build:root) and the Vue package (build:vue). This will be another command called build:svelte. The top-level package.json will then have extra exports that point to the /svelte/package folder.

Don't worry if it's confusing. This type of packaging is definitely a bit more complicated than most you'd find out there. If you are still open to submitting a PR, I'm happy to either commit changes related to packaging or leave a review with more detailed instructions. Either way, I really appreciate your efforts on this!

[demetrius-mp]

oooh now that you mentioned about the extra build:* commands, i can see how it would work.

im going to open a PR adding the svelte/ folder with the sveltekit project inside, and you can do the packaging related stuff

also, ill add a readme section showing its usage, but you can remove it if you want

[davidmyersdev]

This is now available in v0.19.0.