I’ll try to answer to this in more detail when I find some! 
Here’s my useTracker
import { Tracker } from 'meteor/tracker';
import { onDestroy } from 'svelte';
/**
* Svelte specific helper function for using Tracker inside
* Svelte components.
*
* @param { Function } fn - Function to run reactively
*/
export function useTracker (fn) {
const computation = Tracker.autorun(() => fn());
onDestroy(() => computation.stop());
}
Yeah, I think that’s all that’s needed. I’d probably take a page out of the react version and run that inside Nonreactive:
import { Tracker } from 'meteor/tracker';
import { onDestroy } from 'svelte';
/**
* Svelte specific helper function for using Tracker inside
* Svelte components.
*
* @param { Function } fn - Function to run reactively
*/
export function useTracker (fn) {
// Use Tracker.nonreactive in case we are inside a Tracker Computation.
// This can happen if someone calls `ReactDOM.render` inside a Computation. (Is there a similar possibility in Svelte?)
// In that case, we want to opt out of the normal behavior of nested
// Computations, where if the outer one is invalidated or stopped,
// it stops the inner one.
const computation = Tracker.nonreactive(() => Tracker.autorun(fn));
onDestroy(() => computation.stop());
}
I deployed my meteor website on Google cloud and it works perfectly.
All media files I store on Google cloud storage
I have meteor instances run on multiple Google compute engine behide a Google load balancer.
Currently I have a server dedicated for mongodb. But I’m thinking moving to mongo atlas which also available on Google cloud.
@arggh, how do you feel about the need to use workarounds to transform arrays? I finally started Svelte tutorial after reading the topic, and — though I understand where it comes from — this feature seemed a quite important weak side to me.
Do you mean the requirement to make an assignment in order to trigger a reactive update to the DOM, hence not getting a reactive update with myArray.pop()?
It really hasn’t yet bothered me. Most of the time I’m trying to avoid mutating the same array anyway.
The only thing that caught me off-guard was this:
const o = {};
o.foo = 'bar'; // triggers reactive update
delete o.foo; // does not trigger reactive update
Yes, that’s what I ment. Thank you for sharing your experience. I was going to take a closer look to Svetle back in December, after your post in the similar topic, now it happened. The framework definitely looks very promising.
Hello meteor/svelte users, I’d be interested in how you are handling routing? Are you using a svelte specific router? Thanks
I agree, blaze is simple compared to react imo, but every-time I try to use and add atmosphere packages I run in to problems and no solutions wrt compatibility issues. So as good as blaze is I have concluded react is best and can be used in many other frameworks and environment including mobile with react native.
I think one of the major drawbacks using Blaze after using React is relying on helpers whereas in React (or Svelte) you get the full power of JS inside your templates.
For ease though it’s hard to beat Blaze + ViewModel. ViewModel’s mixins alone make my templates so much easier to write
Svelte is very much router-agnostic. In one of our apps we use ostrio:flow-router-extra, since we also use Blaze in the same app. In another app we’re using our custom “router”, as there’s only ~5 routes. Our third Svelte app is a Sapper export, a static site, and that’s using the filesystem based router included in Sapper. There’s also a bunch of “designed for Svelte” routers, but you can also just use page.js, or if you want a really tiny router, try Navaid.
Cool thanks!
Just starting out now, and running into a 'target' is a required option. Frustrating! I’ve read that the npm and meteor versions need to match (which I think they do), anyone run into this?
Thanks!
Did you instantiate your app like this…
const appEl = document.getElementById('app');
const app = new App({
target: appEl
});
…making sure, that you have an element in DOM with id="app"?
Am using:
import { Meteor } from 'meteor/meteor'
import App from './components/App.svelte'
Meteor.startup(() => {
new App({
target: document.querySelector('#root')
})
})
<!-- main.html -->
<head>
<title>meteor-svelte</title>
</head>
<body>
<div id="root"></div>
</body>
<!-- App.svelte -->
<p>Hello Meteor Svelte!</p>
I have a version working by cloning https://github.com/meteor-svelte/tracker-example
Albeit at 3.0.0 not sure if I was trying to use an incompatible version?
What do you mean here? Do you not get the full power of JS in Blaze helpers?
Sorry I meant to suggest that you’d have to extract any such JS logic to template helpers, whereas in React/Svelte you could do it inline <p>1 + 1 = {1 + 1}</p>
ahh, got it. Yeah, that is a little frustrating
Struggling to get any of the routers (svelte-routing or svero) working with my setup. Svero seems to bring back the target error and svelte-routing seems to cause all sort of errors, possibly due to it needing server-side configuration too.
Has anyone had any experience getting either of these (or similar) routers working with Svelte? Thanks!
Navaid was simple to setup and is very minimal in terms of the API, so if it covers your requirements I’d give that a try. Can’t say why the others wouldn’t work - sounds strange and I’d first look into making sure the version of Svelte used by svelte:compiler matches the version of Svelte in your app - take a peek inside node_modules/svelte/package.json and verify you have the correct version installed?
As an alternative, I’ve been using a component for this purpose.
// Tracker.svelte
<script>
import { Tracker } from 'meteor/tracker';
import { Meteor } from 'meteor/meteor';
import { onDestroy } from 'svelte';
export let deps = [];
export let fn;
const dep = new Tracker.Dependency;
$: {
deps;
dep.changed();
}
const computation = Tracker.autorun(() => {
dep.depend();
fn();
});
onDestroy(() => {
computation.stop();
})
</script>
<slot></slot>
Then you’d use it as a wrapper,
<script>
export let id;
let model;
function computation() {
model = Model.findOne({ _id: id });
}
</script>
<Tracker deps={[id]} fn={computation}>
<h1>{model.name}</h1>
</Tracker>
Though I’ll admit, I only did it this way because I thought onDestroy had to be inside a component.