Meteor Svelte Starter

Showcase
1

I got an initial version of a starter up and running with Svelte and Svelte-Routing. Svelte Routing requires Meteor 1.8.2, due to the way it ships source. It exports .svelte files directly, which need to be recompiled, and that requires 1.8.2 (still in beta).

I tried to get SSR working, but it wasn’t picking up the server rendered HTML, and instead was rending a second copy of the tree. I also don’t think I have linting set up correctly - VS Code is all over the place.

The next thing to get up and running is svelte-loadable (I’ll have to port the SSR stuff from 'npdev:react-loadable). After that maybe I'll port over npdev:collections`. :slight_smile:

Update: I forgot the link.

23 Likes
2

Nice! I’m loving Svelte right now.

1 Like
3

I just got the first build of a svelte-loadable solution up (and my starter is using it). Check out the announcement.

Working with Svelte to make this work has been a total joy.

4

I did a static site with Svelte and totally liked it. There is also https://github.com/meteor-svelte/meteor-svelte, maybe you could join forces.

5

My starter project is just a regular meteor app built on top of various packages - including meteor-svelte. :slight_smile:

Its meant as a jumping off point to get up and running quickly on Meteor with Svelte (and I have one for Meteor + React as well).

1 Like
6

Well all the best for your project.

7

For an update - this repo is pretty solid now, and most of the features I tried to build are done, including SSR, code splitting and routing.

5 Likes
8

I was reading through your documentation for the svetle-loadable package. that is awesome work, i am working on adding that in to the small proof of concept i have been building. I started with this repo

and I am working towards yours

So I have routing now, next is code splitting, and then i will add rehydration.

It was easier for me to work from a simpler example at first and then add in what you had in your repo to start with. But your starter repo is awesome. It is great place to start from once you understand how it works. thanks for building that

1 Like
9

WOW! This is amazing. Awesome work as always.

2 Likes
10

@captainn I’m considering a course around this stack. Have you worked with accounts yet?

11

Meteor accounts + svelte? There shouldn’t be any issue.

12

Def didn’t think there would be an issue, just wondering if you’ve tried before.

13

can you guys think of a way to render a blaze template in a svelte component? so i could drop in the
{{> loginButtons}} template

similiar to this package https://github.com/meteor-vue/blaze-integration

I was going to make a step by step todos list guide for svelte but this was the blocker

14

I would advise against that. In my opinion there is only one case where it makes sense to mix different view layers like this and incur the increase in complexity and technical debt associated with it - where you have a very large app that you simply cannot migrate in one go from the old to the new. And even then I would view it just as a temporary measure to ease the migration.

For a svelte tutorial you could just use the underlying accounts methods and bypass the accounts-ui package altogether.

2 Likes
15

my idea was to keep the step by step guides consistent across all of them vue, react, blaze angular and hopefully someday svelte.

To dig that deep in the todos list step by step guide may be what i end up doing, but i wanted to keep those guides for beginners. and then have other guides that go into the accounts system from scratch. We will see what ends up happening

16

It should be quite easy if necessary (haven’t tested the code, but something along these lines):

<script>
import './myBlazeComp.js';
import { onMount } from 'svelte';

let targetEl;

onMount(() => {
  const myComp = Blaze.render(Template.myBlazeComp, targetEl);
  return () => Blaze.remove(myComp);
});
</script>

<div bind:this={targetEl}></div>

You could also extract this into a helper function quite easily to simplify the process.

17

yea!!! … let me try that out :slight_smile: thank you

1 Like
18

I really hope the official tutorials are not advocating for mixing view platforms. Without a proper Svelte account-ui package, at least a starter repo would be preferred.

2 Likes
19

Well this is pulled from the react tutorial verbatim

“By default, new Meteor applications use Blaze as their templating engine. While it’s possible for a Meteor application to use Blaze and React simultaneously, the application we’re building in this tutorial does not need Blaze at all.”

But the only point in the step by step guide that requires making use a Blaze template is the accounts step.

So in order to make a svelte tutorial that is similar to the react guide and the vue one I made I have two options.

1.) build a login form from scratch. which isnt a huge deal but for a beginner it might seem difficult.

2.) do what i did with the vue tutorial i made and that was to take the {{> loginButtons}} template and add it to my vue component using a 3rd party package. This second approach is consistent with the other step by step guides. And the approach offered by @arggh is very close to how the react guide does it.

But after i make one you guys can take a look and see how you like it.

20

It would be trivial to just wrap the blaze templates in a svelte component and distribute those as a svelte package. Or even just a plain js package, since svelte outputs to plain js as well.