sveltekit with vite not yet offering a plugins system

Plugins System in sveltekit

Date: 25.Jan.2023 => as this could change in the "near" future 🙏

@discordquestioner and others: until now plugins sveltekit solutions are not very satisfying/not truly available... First of all one needs to define the expected outcome of such a plugin system. In my initial post i wrote: to an existing sveltekit project. But in fact, that was not really true, call it a lie ;-). As the project is still very young and not yet open sourced, its not an issue to rebuild everything to satisfy a plugin system solution. But on my journey through this => and i didn't want to reinvent the wheel, even relatively new(bie) to svelte and sveltekit i learned about vite, rollup and a little bit about their interoperability. I derived from the official adapter-node but did not yet trully extend the adapter, and i doubt its the right place to solve the issue, as the adapter is more taking the already by rollup and vite transformed project and creates proper output for the target ( in our case for node) And i did not yet tweak the build process with rollup nor vite... but what i have read and learned so far, this solution does not yet exist, its not offered by vite nor by rollup which MAYBE finally what is needed.

But first i wanted to checkout if there is a possibility with the existing sveltekit, svelte, vite, rollup functionality, where as what i have learned so far, the answer seems to be NO... I have learned by no surprise, there are multiple people and projects lacking such a sveltekit plugin solution functionality. HoudiniGraphql (they build their own custom solution, but feel not yet very comfortable with it => https://github.com/sveltejs/kit/discussions/6708), Naabu project => they do some static stuff and they load plugins dynamically during runtime when a user asks for a plugin to load... which is not what we want in our scenario, and others...

Lacking functionality in my experience:

• Overwriting a +page.svelte component is not yet possible out of the sveltekit box.
• Extending a +page.svelte compoentent is not yet possible out of the sveltekit box.
• I have not been able to swap the +page.svelte component on the server side with a different one in the PageLoadServer function. Maybe this is possible, but i could not achieve it and did not find documentation. I think PageServerLoad is only capable of providing the data to hydrate the HTML, but has no interface to alter the +page.svelte component itself.
• There is no known projects which extends the filebased sveltekit router with a conventional router.

A svelte(kit) PRO developer could have told us all of this in 60 seconds. But for beginners its always hard ;-)

What is possible to achieve:

• Dynamically load components/Modules with {#await import {#await import(`../../../lib/${impvar}} lets you dynamically import components BUT client side only.

This is nice, and works. And one could build kind of a plugin solution with this await import feature, but due to the await import the data has to get loaded from the client side after the whole page got rendered. Often thats useful, when the data is only available after the inital render, but in our scenario, where the plugins are already present on the server the with plugin content enhanced HTML should be created via SSR.

• Routing (group) https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group

Nice possibility to extend routes with a plugin route and offer some new features /app/original/objects/totheMOONnewfeaturebyplugin

where /app/original/objects is present in the base sveltekit project and gets extended by /route/(custom)/(plugins)/original/objects/totheMOONnewfeaturebyplugin/{+page.svelte,+page.ts}

Yeah, thats fine, but with that solution one is only able to add a new route offering additional features, but developers are not able to overwrite, extend or alter existing functionality. Such things are possible with symfony and TWIG, , but svelte does lack of such a plugin overwrite/extend concept.

Finally:

Finally to me the best solution could be: sveltekit (with vite and rollup) should offer a way to EXTEND, OVERWRITE or ALTER existing +page.svelte components. This should happen during the project compilation. So the compiler should perform a patch strategy with inheritance and overwrite mechanism in the process of hydrating plugin information into the project and compile the newly generated component into a +page.generated.svelte file, to merge the original ones via inheritance strategy. Sveltekit core developers with much more knowledge about the processes involved in the DEV and BUILD and PREVIEW steps of sveltekit<->vite<->rollup are the only ones who can make this happen. 🎉 Maybe there is another possibilty, but until now no PRO guru has responded to this talk @discord. But in the thread created by houdini member a svelte developer wrote besides other useful information: "I can't say that this is something that's really on our radar."

As soon as there is an acceptable solution to this issue, i will report back.

Your's Raphael

PublishedAt: 2023-01-25