Svelte As a First Class Citizen

So next up on my to do list is going to be to make a pull request for the Guide that outlines Svelte and how to use it with Meteor and what packages are out there.

I was thinking about making a svelte skeleton for the meteor create command but then we need a vue one, and we already have a few … and we have the example repositories you can create by running meteor create --example todos for example and those repos are basically abandoned. So i am not sure if that idea needs to be rethought.

Makes sense. I could see how the ternary could trip someone up. I was mainly interested if anyone was aware of any benefit / downside of using the cursor vs the array. I seem to remember when I was learning Blaze that people recommended using the cursor because it was more efficient for Blaze. Not sure if that is the case with Svelte and @rdb’s package or if it doesn’t really matter. :slight_smile:

One thing that does seem important as a best practice for the guide is @rdb’s note here:

I think that would also mean that you could remove passing in key since it’s not used in the Task component and your #each block would look like:

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

OK, my Blaze integration package is up:
https://atmospherejs.com/svelte/blaze-integration

Just pointing this out since fell into this trap too: I have discovered that just passing in the object directly into the component causes Svelte to rerender all the Task components when a single task is added, because Svelte refuses to compare objects. You should instead destructure the task and pass in the individual members, or pass in the string ID and fetch the task details in the Task, or you can mark the Task component as immutable (but then it won’t respond to modifications).

2 Likes

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

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

2 Likes

Cool thanks @zaphodbb-pm!