Using goto is very cumbersome with new structure

[vladejs]

Before:

import { goto } from 'sapper/runtime'

Now:

import {goto} from '../../../../../../../../........'

until I get into ___________sapper_________ folder...

wdf?

[Conduitry]

This is a side effect of no longer needing sapper as a production dependency of Sapper apps. You can use the alias Rollup plugin to make your life easier.

It's possible this could be included in the default sapper-template, but I'm inclined to think that would make things more confusing. Perhaps a compromise would be to mention this plugin in the template's readme.

[mrkishi]

At first I thought the confusion argument was enough for sapper-template not to include aliasing, but after using sapper for a couple of weeks.. I'd never go without it again.

Turns out navigation routes tend to get longer than source code paths. It gets silly. 😛

On the other hand, even though I'm using the rollup-plugin-alias, I can't recommend adding it (or any of the other few I tried) to sapper-template. They all behave in ways I didn't expect at all. We need something with better sapper-friendly behavior (and defaults!).

[Conduitry]

@mrkishi Do you have any issues if you just use something like alias({ __sapper__: path.resolve('__sapper__') })? I believe rollup will always set the cwd to the one containing its config file, and then you can just alias __sapper__ to the absolute path of the directory.

[mrkishi]

I don't remember the exact issue, but apart from having to use absolute paths (why not accept relative paths?), I also have resolve: ['']. Something to do with the automatic .js it adds to imports.

[Rich-Harris]

One alternative — use the store:

// src/client.js
import * as sapper from '../__sapper__/client.js';
import { Store } from 'svelte/store.js';

class MyStore extends Store {
  goto(href) {
    return sapper.goto(href);
  }
}

sapper.start({
  target: document.querySelector('#sapper'),
  store: data => new MyStore(data)
});

Then you can use it in lifecycle hooks and methods like this...

this.store.goto('somewhere');

...or even in templates:

<button on:click=$goto('somewhere')>this should be an anchor tag</button>

[vladejs]

In my meteor projects I used a babel plugin called, root-slash-import which allowed me to reference the root of the project whenever the deep the file is.

Is that possible with webpack version? Or is there a better a la webpack only way?

[vladejs]

@Rich-Harris, your approach isn't very useful on independent js files, in which I dont have access to the store.

For example, I have a js fike called _authorize.js, which export functions that uses goto to redirect the user to other pages.

[dxlbnl]

@vladejs That's possible if you use alias in your webpack.config.js

  resolve: {
    /* .... */
    alias: {
      src: path.resolve(__dirname, 'src/')
    }

Don't forget to put it in both server and client config ;)

[thgh]

I'm having trouble with goto. Current workaround: window.goto = sapper.goto in client.js

[Conduitry]

Closing this, as we now have the src/node_modules/@sapper thing.

[PhilipConte]

Could I get some clarification on what the recommended way to handle absolute imports is (with rollup), rollup-plugin-alias, alias({ __sapper__: path.resolve('__sapper__') }), or something else?

[Conduitry]

As of Sapper 0.26.0, the stuff that was formerly in __sapper__/client.js etc is now in src/node_modules/@sapper/app/index.mjs. If you are using a bundler plugin that can handle Node resolution rules (the default sapper-template includes this), then you can just import from @sapper/app from anywhere and it will resolve to these files. See https://sapper.svelte.dev/docs#Client_API. No aliasing plugin necessary.

[PhilipConte]

I think I was a little unclear, I don't mean importing sapper specific things, but arbitrary modules (like a component in src/components/.../...) from a route that is in a deeply nested inside src/routes/ absolutely. That isn't natively supported, correct?

[Conduitry]

Not from src/components/, no, but you can put anything you want in src/node_modules and import it from anywhere, the same as you can do with @sapper. There was a recent change to sapper-template's .gitignore so that only src/node_modules/@sapper is ignored, and other things you put there will get checked in.

[pngwn]

Or you could just put all of your files in one folder and you'll be happy forever.