use register for spa?

[Arstman]

Hi,

it's me again... :)

i am building a spa now and i try to use register in it, due to i also using a router, i try few times but still can find a way to use register in spa, since require.resolve is a node module.

one way to use both loadable and router i can figure out is to make another wrap component, and in that wrapper, load the actually component i want to load.

i don't if i get some misunderstanding, is there any way to use register in spa, i mean beside the forthcoming barbel plugin?

thanks for your help.

[JohnnyFun]

Yeah, I think you'll just want to wrap your dynamically imported page components in a wrapper component. We do something similar with svelte-routing. We have a component LazyRoute used like:

<LazyRoute component="Home" path="/" />

LazyRoute is basically a Loadable that uses a registered loader (see https://github.com/kaisermann/svelte-loadable#registering-a-loader)

So something like:

<script>
  import { register } from 'svelte-loadable'

  const pages = {
     "Home": register({
        loader: () => import('pages/Home.svelte'), // dynamic import the component when it's needed
        resolve: () => 'Home' // we don't use SSR, so this can be set to whatever pretty much for us...
      })
      // ... other page loaders ...
  }
<script>

<Loadable loader={pages[component]} let:component={loadedComponent}>
    <div slot="loading">
      Loading...
    </div>
    <svelte:component this={loadedComponent} {...params} />
  </Loadable>

You'll have to pass in "params" from somewhere. Ours came from svelte-routing different than yours will come from "svelte-spa-router", but should be pretty straight-forward.

[Arstman]

@JohnnyFun

it very nice.

thanks for help.