Svelte As a First Class Citizen

You have to meteor add templating, which you need to have to be able to have Blaze templates to begin with, I think.

EDIT: I added templating as a dependency.

FWIW, I did an update to the svelte:blaze-integration package, now it supports rendering Svelte components inside Blaze templates as well. This will surely be useful to people who are incrementally migrating an existing application from Blaze to Svelte (like myself). It may be useful to touch on this briefly in the guide.

4 Likes

Ah, thank you for clarifying. I did some more playing around and keyed each blocks aren’t enough as you’re saying. You’d need both the keyed each block and one of the options you describe. Another option would be to spread the props:

{#each tasks as task (task._id)}
  <Task {...task} />
{/each}

I guess the main downside here is if you pass over props that aren’t explicitly named in the child component, svelte gives you a warning.

The cleanest one imo is marking it as immutable though there may be downsides here that I’m not aware of.

Regardless, I think it would be helpful to mention this in the guide. Maybe it’s in a performance / optimization section.

The unfortunate thing is that the immutable flag is all-or-nothing. It has subtle implications for all the internal properties too. There is no way to mark a single prop as immutable in Svelte right now. Also see this Svelte issue that I raised about this.

The spread syntax can be a neat way to deal with it, as long as you also use a fields specifier in the MongoDB query so that you only fetch the fields used by the Task component.

1 Like

If anyone wants to go give the svelte tutorial a try https://www.meteor.com/tutorials/svelte/creating-an-app
and report any issues here https://github.com/meteor/simple-todos-svelte/issues

7 Likes

My computer is at Apple rn for repair, but right when it gets back, I’ll start recording and releasing the video tutorials on my YT channel and will largely follow this tutorial exactly

6 Likes

we have made some real progress on this list over the last few weeks (great work everyone ) … if there is anything else we should add to it please feel free to add a comment and I can update the original post to track things

I noticed this week that Meteor’s differential bundling doesn’t work reliably with Svelte unless you also expose Svelte’s internals for transpilation.

Nice work on the Tutorial :slight_smile: I’m brand new to Meteor and coming through the Svelte path, and so far so good, all working nicely :+1:

It would be really great to better understand (as a totally fresh Meteor-ite) how to:

  • Handle routes with svelte, easily/effectively
  • Customise any Meteor/Blaze integrated stuff (like the users login ui module) for Svelte, so I could do custom sign-up sequences for instance
2 Likes

thats awesome, any feedback that you think would help improve things please feel free to add them to this topic. Someday hopefully we can get an intermediate tutorial built as a second project for people to learn from

2 Likes

You HAVE to expose svelte packages to recompilation, even node_modules, because Svelte is a compiler, and node modules are delivered (or should be delivered) in source format.

1 Like

Some more “newbie feedback” — thinking out loud here and realise there are probably things I’m missing which are obvious to Meteor Veterans :slight_smile:

To summarise: I’d really love to use Meteor with Sevelte buuuuut…

I’m finding myself really wrestling with some sort of Blaze/Svelte combo just to get something as basic/fundamental as routes up and running, seems more difficult than it need be?

I probably don’t quite understand enough about the Meteor’s in’s and outs yet, so it may be easier than I think…

My biggest concern is there appears to be a lot of “secret sauce” going on that I’m going to have to wrestle with at some point to get it to work how I’d like, which sort of defeats the benefits I was hoping to gain by using Meteor

Right now, a couple of days in and after the tutorial I find myself on this cusp: of seeing “ok this is really really cool, love the data on the wire stuff, Svelte works great in principle”…

Buuuut, now I need to handle routes, and do some custom Auth for a non-trival app, and there seems to be no current way to do it but to get much deeper into Blaze and Meteor’s inner workings to hack it to work with Svelte front-end?!

My thinking then is: do I turn back to Sapper and building my own REST/GraphQL back-end?

Generally feeling excited about the potential of Meteor, would love to work with it, but a bit stuck on some basics which I feel need to be be covered before I can jump in confidently for any realistic app build.

Again just sharing raw feedback here, which may be valuable.

1 Like

have you checked @stolinski’s level up
https://www.youtube.com/watch?v=Qc4dglMX7fw&t=4s

there is one on users:

2 Likes

Another meteor-svelte tutorial

5 Likes

Thanks man! Guys like you doing this are what will bring Meteor back to the forefront! Been rebuilding our BlazeJS app using Svelte and wow are we glad we held off on React!

2 Likes

We have just announced a Meteor-Svelte Starter application that may be of interest to you:

Meteor-Svelte Starter Application

This may help you get started faster and also supply some components that you may need such as user login and change password based on Meteor’s Accounts package and is independent of Blaze.

3 Likes

Cool thanks @zaphodbb-pm!

Hi! thanks for this update. Do you know how to integrate typescript to this Meteor/Svelte stack?

1 Like

We have not integrated typescript yet. As you know, both Meteor and Svelte are independently working on an easy way to do this. We will wait until there is clarity.

2 Likes

I myself am not a Typescript user, and @zaphodbb-pm I am not sure if this applies to the Meteor Svelte packages yet…but I wanted to be sure to point this out: