Moving Back to Meteor Development

help
49

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>

1 Like
50

ahh, got it. Yeah, that is a little frustrating

51

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!

52

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?

53

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.

1 Like
54

Thanks, I must confess to be unsure how to best ensure that the versions match. I’m pretty sure I specified the version when installing but now find they are slightly out. Can I just update the version number inside .meteor/packages or is it best to do it in the .package.json? Are there any other commands to run to ensure they update? Thanks!

Incidentally I also got a version of navaid working nicely using the author’s svelte-demo https://github.com/lukeed/svelte-demo although I’m not sure if it’s possible using navaid to navigate programatically?

Thanks again

55

You want the npm package to match the meteor package. So get the meteor package up to date, and then lock the npm version with meteor npm install svelte@<version.

Regarding routing, I use svelte-routing in my app with no issues. No special setup.

Make sure you meteor remove blaze-html-templates and meteor add static-html. You want to serve the static main.html so you can document.querySelector it. That should fix you target required error.

1 Like
56

Thanks! Can I just check if the version ends with _1 should that also be specified in the npm version or is that bit dropped? Eg current latest package is 3.6.7_1. TIA :+1:

57

That bit is dropped. So you’ve run meteor npm install svelte@3.6.7.

58

I have yes. (thought I got that right).

Your other tip about adding/remove the HTML packages seems to have sorted it! Thanks, I didn’t notice that in the package readme but perhaps I should have thought of it! Thanks :smile:

Might also help with the router issues?

59

So frustrating it works fine then I try and install either svelte-routing or svero. With svero the target error comes back and with svelte-routing I get a whole host of other errors (I believe might be due to this package not being compiled?)

Am I missing something?

60

Can you send me a repo link and I’ll look at it?

61

Thanks! Here is a repo, I’ve added svero and svelte-routing but currently this is an attempt with svero but I think their setups are extremely similar.

Thanks again

https://github.com/milktop/meteor-svelte-invoices

62

I submitted a pull request. I’ll paste the contents here for posterity:

This should get you up and going with svelte.

I did a couple of things:

  1. Update meteor to 1.8.2-beta.16
  2. Replace svero with svelte-routing
  3. Pass the required url prop to svelte-routing’s Router component
  4. Place a nav component inside the Router . This is required to use Link .
  5. Replace your anchor element with a Link component
63

I make a fork of meteor-svelte which uses the single version you have in package.json (and node_modules). It may not be ready for prime time, but if you are curious, try it out and see if it helps. (I also submitted a PR, hopefully Mr. Klaussner has time in the next few weeks to take a look.)

64

Thank you both! And sorry for the late reply. Will check this out. I wonder which thing in particular was causing the issue?

65

I can’t figure out where I saw it, but someone was mentioning they couldn’t get svelte-routing to SSR because it was double-mounting the routes once the client hydrated.

If you wrap your routes in a <div>, it will fix the problem.

66

I believe it was Mr. @captainn who had that problem.

67

I actually just fixed that problem (it was a silly error). The thing I’m having trouble getting to work is routing + loadable. I’m just not familiar enough with Svelte to figure out how to get the loadable thing to work in SSR code (I’m probably pretty close though)

3 Likes
68

I got it all working (and it’s pretty sweet). Check it out.

2 Likes