Meteor + Svelte

sashko · December 23, 2016, 3:26am

Really excited to play around with svelte over the holidays. Going to be fun to try something really different!

swiftmaster · December 25, 2016, 3:29pm

I thought this article interview with Rich Harris is interesting.

qnipp · January 3, 2017, 3:10pm

For migrating existing projects using Blaze, it would be really helpful to allow co-existence with Blaze by providing an alternative file ending.

And after reading almost everything on https://svelte.technology, the concept feels very natural for an experienced Blaze user as me, so I’d like to give it a try on some of the slow Blaze templates in an existing project.

klaussner · January 4, 2017, 11:41am

I completely agree that this would be useful. The problem is that Meteor doesn’t allow file extensions to be registered by more than one build plugin, so if we would add .svelte to make it compatible with Blaze, we would have to remove .html from the list of supported extensions. On the one hand, people already using this plugin would have to rename their files. But on the other hand, the benefits might be worth the change.

qnipp · January 4, 2017, 1:48pm

I’m no expert of the Meteor build system, but maybe it would just help to divide the extension in two parts:

svelte:compiler, which contains the core components to use Svelte in a Meteor project with .svelte files,
svelte:html-components to provide the file binding to .html.

Furthermore, it’ll need something to integrate Svelte components into existing Blaze templates (and maybe vice versa). I don’t know, if there’s already some kind of API in Meteor to integrate the different technologies for templates and components (I didn’t find one on https://docs.meteor.com).

sashko · January 4, 2017, 6:18pm

Honestly I don’t think there is any benefit to migrating existing Blaze apps to Svelte - I would be surprised if it was faster or better in a meaningful way.

akryum · January 4, 2017, 9:45pm

Honestly, modern front-end frameworks are way more than fast enough (even more so when they are PWA-ready):

Source of vue-hacker-news.

avalanche1 · January 5, 2017, 12:18am

@klaussner So…does svelte solve meteors long standing problem of incremental loading? Can we simply download a single 5kb index.html on initial load or do we still have to bear with a megabytes worth of let’s-dump-all-code-into-one-huge-file.js?

Btw, Funny how svelte templating syntax is similar to blaze:grin:

qnipp · January 5, 2017, 7:34am

According to https://svelte.technology/blog/frameworks-without-the-framework/ Svelte is faster than the other tested options (React, Vue, …). Blaze is not tested in https://github.com/krausest/js-framework-benchmark, but AFAIK is less performant.

I personally find Svelte nearer to Blaze than Vue.

Furthermore, it provides the ability to incrementally load the templates/components, when needed. With Blaze, the templates for the whole application are loaded during startup.

sashko · January 5, 2017, 8:09am

Right that’s why I said “meaningful” way - I would be surprised if switching to Svelte was the best way to make your app faster, compared to some other possible improvement. I’m sure it does great on benchmarks, that’s the whole point.

BTW Blaze does just fine with loading templates incrementally, it’s just that Meteor’s build system doesn’t support loading any files incrementally at the moment.

klaussner · January 5, 2017, 11:51am

Svelte is just a compiler that generates JavaScript files. How these files are bundled and delivered to the browser is entirely up to the build tool.

avalanche1 · January 5, 2017, 4:22pm

So…are there any benefits in swapping blaze for svelte if I use standard meteor build tool?

sashko · January 5, 2017, 5:51pm

Probably very few unless you just like the idea of trying new things.

klaussner · January 7, 2017, 11:15pm

++ UPDATE ++

Project organization

Thanks to @zimme, we now have a GitHub organization (https://github.com/meteor-svelte) where the build plugin, additional packages, and examples are hosted. All Svelte packages are released under the svelte organization on Atmosphere (https://atmospherejs.com/svelte).

Tracker integration

You can use the svelte:tracker package to easily pass reactive data from Minimongo, ReactiveVars, and other data sources to your Svelte components.

Using Svelte and Blaze

The svelte:compiler package compiles both .html and .svelte files. If you want to use Svelte and Blaze simultaneously, you can use svelte:compiler-no-html instead. In this case, all your components have to use the .svelte extension.

sashko · January 8, 2017, 1:29am

Is there an example app I can check out?

zimme · January 8, 2017, 12:16pm

There you go @sashko, unless you already found them.

antoninadert · November 21, 2019, 1:33pm

Hello and sorry for resurrection !

Svelte 3 is the new hot thing, it basically looks awesome. It looks like ViewModel so it is clean, super clean from any boilerplate.
Has anyone tried to integrate it in the Meteor stack? I see that this package has been updated 4 months ago, I see in package.json it is now compatible with svelte 3+

Can anyone tell me about their developer experience using Svelte on Meteor ?
Has anyone an open source repo that use this stack?

Hopefully so !

red-meadow · November 21, 2019, 2:15pm

You should definitely check this. Also this thread.

receptim · January 15, 2022, 7:56pm

Hi, I normally use meteor and blaze. I’ve been working with svelte lately, the similarity between them and the compatibility with meteor are really good. Now I’m thinking of using svelte in my new projects and I’m working on it. You can also find what I did while working with meteor and svelte here.

alawi · January 17, 2022, 11:25am

Looks like Svelte is really gaining momentum!