Custom renderers support

[benmccann]

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: #12709

Describe the proposed solution

Add a custom renderer API to support things like:

• Svelte Native: RFC: support for svelte 5 halfnelson/svelte-native#359
• Lynx: [Feature]: svelte guide lynx-family/lynx#144

Importance

nice to have

[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.

[paoloricciuti]

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.

[Pronian]

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)

[cylicone]

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

[RoxDevvv]

+1

[joshua1]

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

[paoloricciuti]

+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! 😁