Svelte and Solid

Build a Solid App Developer Experience
1

Just wondering, is anyone exploring using Svelte (https://svelte.dev) with building Solid apps?

I’m just starting to get into Svelte. Been doing frontend for 12 years, the last 4 with React. Svelte seems to answer a lot of questions React leaves open.

I’m absolutely going to be investing further into Svelte personally and want to collaborate with others on Solid related abstractions. Happy to join in on any existing efforts :slight_smile:

2 Likes
2

@happybeing has worked with svelte and solid. If you search this forum (upper right of screen) you’ll find some of his past postings on the topic.

2 Likes
3

I made some experiments with Svelte, Sapper actually. They prefer to use rollup instead of webpack and I’ve got some issues when using solid-client-js and solid-auth-client when bundling related to the mix of require / import but I found some workaround. Feel free to ask if you got this too :wink:

1 Like
4

I’m a big fan of Svelte and have built a few test apps using it but not specifically for Solid. I’ve made a few experimental things, particularly experimenting with visualisation, and that supports RDF.

BTW @julien_leicher you can use webpack with Svelte, and I found this necessary to get it to work with some RDF libraries which tend to be out of date wrt JS, and rollup is deliberately intolerant of this to encourage folks to keep their modules up to date. There may be other ways around this but I couldn’t find them. Demonstrations of how to use some problematic RDF modules with Svelte and webpack are in this repo.

The most complete app, still really a testbed for my visualisation library/workbench ideas is http://vlab.happybeing.com which has a link to my github repo where you find some other Svelte experiments, including some UI components.

VisLab (just linked) uses the experimental UI components, and if you get into building similar, I found svench a very useful tool to help test and find bugs in my components. The author was also very helpful with my novice stumblings.

Good luck @tychi, and please keep us posted.

I’ve not done much with Svelte lately, but have just started a project to build a p2p git portal (a github alternative in static HTML) and will be using Svelte with that. There’s quite a bit of ground work to do before I get to the front end though, as it will incorporate git-bug code written in Golang, compiled to Wasm.

BTW folks, if any of you are in the fediverse I’ve moved my social media presence mainly to mastodon (as happybeing), so please say hi! And if anyone wants to sign up, use this invite.

1 Like
5

Yeah, I know but since svelte / sapper has been built with rollup in mind from the ground up, that’s why I gave it a chance, it was for experimentation after all :slight_smile: Didn’t know about svench, I’ll give that a look !

1 Like
6

Not sure if this’ll help with including some of those RDF libraries in Rollup, but I’m experimenting with including some React components in Svelte at work that depend on some older libs. Adding this code to the plugins array in rollup.config.js was able to unblock the errors I was getting related to bad imports.

commonjs({
   esmExternals: ['package-name', 'another-package-name']
})

@julien_leicher, is this the solution you came up with too?

2 Likes
7

Not the solution I came up with but maybe because the issue was different. When importing solid-client-js, there was a require('cross-fetch') which blow up the bundling. Since I was on the browser side, I just wanted to use the window.fetch function.

I found a workaround by using the replace plugin like this:

replace({
    'require("cross-fetch");': "window.fetch;",
    delimiters: ["", ""],
}),

But maybe there was another solution, that’s the quickest workaround I’ve found.

edit: Just retried my sample without this replace and looks like it works now, maybe I was wrong, I dit not have the time to investigate for now :confused:

2 Likes
8

Feel free to report issues like that at any time, solid-client should definitely just work with Rollup (it uses Rollup itself, actually).

Glad to hear it works now, but let me know if it regresses. cross-fetch is a dependency of solid-client, so it should be able to find it (and, if you’re in the browser, that should fall back to native fetch).

(Sorry for going off-topic. Keeping a keen eye on Svelte indeed, though it’s not really at the top of my list of things to learn. I’m not particularly fond of how it takes of your entire toolchain and defines its own language, but that’s not necessarily a dealbreaker.)

2 Likes
9

FYI none of my issues were with Sold libs but with libs used to process RDF, but which Solid libs are likely to depend on. More detail in this repo. I think rdflib.js has changed in relevant areas though, so some of the information there may be out of date.

10

I’m not particularly fond of how it takes of your entire toolchain and defines its own language, but that’s not necessarily a dealbreaker.)

Honestly, a year ago I’d be in the same boat, but with the prevalence of TypeScript, I feel my toolchain’s already been hijacked by another language. Since we’re getting into widespread compiler in the toolchain territory now, I’ve decided to lean in to Svelte for the ergonomics.

11

Maybe that’s because I missed something :confused: I’ve made a repo with my process to reproduce the issue and find a way to make it work without hacky stuff here: https://github.com/YuukanOO/solid-on-svelte

1 Like
12

Perhaps a basic lazy workaround, I’m playing with vuejs with solid, but when a lib gave me some problem I put the lib.min.js in the index.html :wink:. And focus on my app

1 Like