svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Custom renderers support

Open benmccann opened this issue 9 months ago • 16 comments

Describe the problem

Svelte 4 had foreign namespace to support Svelte Native. This was removed in Svelte 5 as the approach was not compatible with the new compiler implementation: https://github.com/sveltejs/svelte/issues/12709

Describe the proposed solution

Add a custom renderer API to support things like:

  • Svelte Native: https://github.com/halfnelson/svelte-native/issues/359
  • Lynx: https://github.com/lynx-family/lynx/issues/144

Importance

nice to have

benmccann avatar Mar 07 '25 18:03 benmccann

I'm not too knowledgeable in this topic, but perhaps there could be a map of method names and/or a map of handlers for different features? Example:

export const custom_renderer = {
    replacements: {
        state: 'ref' //$.state -> $.ref
    },
    handlers: {
        bind(prop, node, binding) {
            return x`$.bind(${node}, '${prop}', ${binding})`; //for bindings
        } 
    } 
} 

This could also include things like the boilerplate for each component.

Ocean-OS avatar Mar 07 '25 19:03 Ocean-OS

I'm not too knowledgeable in this topic, but perhaps there could be a map of method names and/or a map of handlers for different features? Example:

export const custom_renderer = { replacements: { state: 'ref' //$.state -> $.ref }, handlers: { bind(prop, node, binding) { return x$.bind(${node}, '${prop}', ${binding}); //for bindings } } } This could also include things like the boilerplate for each component.

I think rather than a replacement for state (I think the reactivity should still be handled by svelte otherwise it's just a matter of syntax) we should have replacements for dom operations. That said we should probably also have a more general hook to transform the compiled code because there might be the need to setup stuff before the component code for example.

paoloricciuti avatar Mar 07 '25 19:03 paoloricciuti

Here is the Vue custom renderer API: https://vuejs.org/api/custom-renderer.html And the SolidJS one: https://github.com/solidjs/solid/tree/main/packages/solid/universal

They are pretty similar. Do you think it would be good to make the Svelte API resemble something like that? (Would make porting existing solutions to Svelte easier)

Pronian avatar Mar 07 '25 20:03 Pronian

+1

caracal7 avatar Mar 13 '25 06:03 caracal7

+1 to this, I would love to see this work with Lynx!

ethanannane avatar Mar 20 '25 10:03 ethanannane

+1

RoxDevvv avatar Apr 01 '25 21:04 RoxDevvv

+1 for this . any update please . This would be helpful for nativescript and lynx (potentially)

joshua1 avatar Apr 09 '25 12:04 joshua1

+1 for this . any update please . This would be helpful for nativescript and lynx (potentially)

I'm actively working on this (well technically not now since I'm on vacation but you get the gist) since mainmatter (the company I work for) is sponsoring my work full time on this.

There's already a PR open #15538 to have a new templating mode that doesn't involve the template elementi which was obviously a blocker.

We are currently deciding on the best API for this, I kinda have a POC for one API and I'm building another POC for a different (imho slightly better API). It's coming! 😁

paoloricciuti avatar Apr 09 '25 13:04 paoloricciuti

any updates?

gornostay25 avatar Apr 30 '25 12:04 gornostay25

any updates?

https://bsky.app/profile/paolo.ricciuti.me/post/3lnxnejj6mc2k

Is shaping up, I was able to actually render a svelte component in Lynx...however there's still a lot of work to do 😊

paoloricciuti avatar Apr 30 '25 12:04 paoloricciuti

Latest post by @paoloricciuti https://mainmatter.com/blog/2025/05/22/native-apps-with-svelte/

3xau1o avatar Jul 13 '25 18:07 3xau1o

any progress with custom renderer for svelte?, would love to use svelte with lynx to create cross-platform apps.

Prajwalg19 avatar Oct 05 '25 14:10 Prajwalg19

I believe that Mainmatter is waiting for a customer to sponsor finishing the work on this. From the blog post:

as you can see, there's still a lot to do, and even more to make this production-ready. So if you or your company are interested in building truly native apps with Svelte and want to support us getting this ready to use, please reach out!

Some of the foundational work in Svelte was merged. However, the custom renderer API itself has not been merged. As mentioned in the blog post, some feedback was received from the Threlte team, so Paolo felt the API should be reworked a bit.

Lately, Paolo has been working on the Svelte MCP server instead. If you have an interest in using Svelte with Lynx, please reach out to Mainmatter about sponsoring Paolo to cleanup his branch for the custom renderer and get it merged to Svelte.

benmccann avatar Oct 05 '25 15:10 benmccann

@benmccann at what point is this not what the open collective is for? There are many individuals in the community that feasibly can't say hey big company let me pay you for this feature but have been donating to the open collective in hopes that the money will be put towards furthering the framework. Whether that may be sponsoring people to work or other things. There is likely not a big player that has been using svelte for native because the case has never been made prior to something like this coming along so I doubt it'll ever move along if you're looking for something like that. That's just my opinion.

Antonio-Bennett avatar Oct 13 '25 15:10 Antonio-Bennett

That's a valid point but i have been following paolo and he's been very busy with things like mcp for svelte, sveltelabs, hosting the svelte podcast and weekly youtube videos, patching bugs in svelte. So I think he's out of time to work on the custom renderer and might pick it up once all these major changes in svelte/sveltekit ecosystem becomes somewhat stable(remote functions, async svelte) assuming he gets to work on it. I just checked upon if he was parallelly in anyway working on custom render (which he isn't currently). I agree with you on the Open collective point. They should put this somewhere in the docs rephrasing it to indicate donations would speed up getting svelte native apps sooner than expected.

Prajwalg19 avatar Oct 13 '25 15:10 Prajwalg19

@Prajwalg19 I'm in no way criticizing Paolo, he's a goat and definitely appreciate all the things he's doing! But the phrasing has become sponsor his work via mainmatter to get this done so why not do that with the funds the community has been giving. Maybe there should be a voting system or something on what the funds should be spent towards if the maintainers see a need for specific goals to be sponsored

Antonio-Bennett avatar Oct 13 '25 17:10 Antonio-Bennett