Svelte React Native?! Awesome!! This project is just what we've needed in the Svelte ecosystem. I'm a Svelte maintainer and wanted to share some pointers.
The other half of implementing a Svelte React Native is the necessary support in the Svelte compiler and that's just about to land! There's a stack of PRs in the Svelte repo from the very talented @paoloricciuti. The last one in the stack is sveltejs/svelte#18511. I think you could probably use this development version of the Svelte compiler with:
pnpm add https://pkg.svelte.dev/svelte/c/0502f5e57dbc5326f515ac19e008409de5db3851
If you're able to test it at this stage I'm sure Paolo would love any feedback as to whether the API is everything you need or you'd like any small tweaks. It's already been tested out for a NativeScript render and Lynx renderer so should hopefully work pretty well here also.
I think a basic implementation should be pretty straightforward. You should use the custom-renderer export condition in package.json. I'd pay attention to how a few elements map. E.g. Svelte has comments which should be persisted but probably not as props since they have no native meaning. If you have something like insert(parent, fragment, X) you should not insert the fragment itself, but only the children on the fragment. The parent attribute should return null for a detached element, which may be different than how Vue is currently implemented. Also, insert() must have DOM move semantics where inserting an already-parented node moves it out of the old parent first.
One of the harder parts is CSS support, but it looks like that's already been solved in the Vue implementation.
There are a few areas where Svelte's custom renderer doesn't support certain things as they currently rely on the DOM. Svelte's transition: and animate: are not supported in the custom renderer and I would recommend documenting a suggestion to use the newer @attach instead. I believe the custom renderer only supports using Svelte's bind: with components and not elements with the exception of bind:this being supported on both. Thus, you could return a <Text> component that implements bind: via callbacks on a <text> element
Svelte React Native?! Awesome!! This project is just what we've needed in the Svelte ecosystem. I'm a Svelte maintainer and wanted to share some pointers.
The other half of implementing a Svelte React Native is the necessary support in the Svelte compiler and that's just about to land! There's a stack of PRs in the Svelte repo from the very talented @paoloricciuti. The last one in the stack is sveltejs/svelte#18511. I think you could probably use this development version of the Svelte compiler with:
If you're able to test it at this stage I'm sure Paolo would love any feedback as to whether the API is everything you need or you'd like any small tweaks. It's already been tested out for a NativeScript render and Lynx renderer so should hopefully work pretty well here also.
I think a basic implementation should be pretty straightforward. You should use the
custom-rendererexport condition inpackage.json. I'd pay attention to how a few elements map. E.g. Svelte has comments which should be persisted but probably not as props since they have no native meaning. If you have something likeinsert(parent, fragment, X)you should not insert the fragment itself, but only the children on the fragment. The parent attribute should returnnullfor a detached element, which may be different than how Vue is currently implemented. Also,insert()must have DOM move semantics where inserting an already-parented node moves it out of the old parent first.One of the harder parts is CSS support, but it looks like that's already been solved in the Vue implementation.
There are a few areas where Svelte's custom renderer doesn't support certain things as they currently rely on the DOM. Svelte's
transition:andanimate:are not supported in the custom renderer and I would recommend documenting a suggestion to use the newer@attachinstead. I believe the custom renderer only supports using Svelte'sbind:with components and not elements with the exception ofbind:thisbeing supported on both. Thus, you could return a<Text>component that implementsbind:via callbacks on a<text>element