lynx-family
[Feature]: svelte guide
What problem does this feature solve?
In the spirit of being framework-agnostic, please provide integration guides for other modern mainstream frameworks like Svelte(kit), instead of only React.
What does the proposed API of configuration look like?
Since Lynx is a framework-agnostic, here's hoping this would only require an entry in the docs.
Hi folks, Thanks a lot for your question and we very welcome such contribution/community implementation. This is a very huge topic. I guess this can't be explained in this one simple comment.
I wish this simple comment would help you guys.
Step 0. make it work with rspeedy
https://github.com/lynx-family/lynx-stack/blob/main/packages/rspeedy/plugin-react/src/entry.ts
Here is the source code of Reactlynx plugin.
Note that the key point is u need to make the @lynx-js/template-webpack-plugin happy ;).
Step 1. rewrite DOM operation into Lynx's Element PAPI
https://lynxjs.org/api/engine/element-api/__CreateElement.html
The point is that we should replace document.createElement by __CreateElement
Step 2. Implement a compile-time tools to split code into two threads
Some APIs only exist in BTS, like NativeModules, lynx.fetch and etc. So this is essential to make your code work.
This could be very complicate.
From what I understand, before Lynx can have a Svelte adapter, Svelte first needs to support custom renderers, i.e. be able to compile to a different set of instructions that Lynx can implement.
Thanks for the awesome platform and making it framework agnostic!
Note that the key point is u need to make the @lynx-js/template-webpack-plugin happy ;)
I wonder if you might consider supporting Vite at some point. Svelte has better support for Vite than webpack and much more expertise for it in the community. It looks like Vite will overtake webpack in downloads sometime this year as it's a more popular solution for new projects
Some APIs only exist in BTS
What is BTS?
This could be very complicate.
What is involved in doing this?
A reactive framework based on template syntax will be released later this year.
What template syntax are you referring to? Will users use that template syntax or it's behind the scenes for users and the Svelte implementation uses it? How does Svelte's template syntax fit into the picture?
Hi @benmccann , thanks for your questions.
I wonder if you might consider supporting Vite at some point. Svelte has better support for Vite than webpack and much more expertise for it in the community. It looks like Vite will overtake webpack in downloads sometime this year as it's a more popular solution for new projects
The key point is that Lynx is not running JS&CSS. The @lynx-js/template-webpack-plugin converts the JS/CSS code into a binary code which allows rendering engine to "recognize" it. Therefore the Vite is able to work if the @lynx-js/template-webpack-plugin is rewritten for Vite.
What is BTS?
https://lynxjs.org/blog/lynx-unlock-native-for-more.html
Lynx is designed for two-thread-model. Every Lynx page is running with two Javascript threads. Some APIs are only available in Main Thread, some of them are only available in the Background Thread.
Based on such assumption, the thread splitting could be essential if your framework doesn't require your developers to split the code manually.
Thanks for the added details @PupilTong! It does sound like the main blocker is custom renderer support in Svelte, so I've opened an issue to track that: https://github.com/sveltejs/svelte/issues/15470
Please do not post comments saying "+1" or otherwise expressing interest. It accomplishes nothing except for burying the useful technical information in this thread. You can put a thumbs up on the issue if you'd like to express interest
A nice update to share - Mainmatter has offered to sponsor the development of a Svelte custom renderer API!
(please no need to reply to this message with expressions of excitement. let's keep this ticket focused on implementing the feature)
For those still watching this thread, Mainmatter has released a proof of concept renderer for connecting Svelte and Lynx.
https://github.com/mainmatter/svelte-lynx-integration
Blog post about it
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.
