svelte-loadable

> Dynamically load a svelte component. Based on react-loadable.

Usage

Just pass a loader method which return a async module import:

``html


import('./AsyncComponent.svelte')} />
`

Use unloader to prevent Loadable from caching the component which will cause it to call loader each time the component is used after being unmounted.

`html





{ / some code here / }} />


System.import('./AsyncComponent.svelte')} unloader={()
=> System.delete(System.resolve('./AsyncComponent.svelte'))} />
`

$3

- loader: a function which import() your component to the component.
- delay: minimum delay in msecs for showing the loading slot. Default: 200
- timeout: time in msecs for showing the timeout slot.
- unloader: true to prevent the component from being cached or a function which will also prevent the component from being cached after being unmounted and will be called immediately after it is removed from cache.

Any other prop will be passed directly onto the rendered component if the default slot is defined:

`html


`

If the default slot is used, it's up to the developer to render the component:

`html



`

$3

- on:load: a function which is executed right after the component is loaded.

`html
console.log('The component has been loaded')}
loader={...} />
`

Otherwise, if your callback contains more code, you can wrap it into a function, and call it without parentheses

`html

`

$3

- loading: customizes the loading state;
- error: customizes the error state. You can let:error to have access to the error variable, and let:retry to have access to the retry method.
- timeout: customizes the timeout state. Will only appear if timeout prop is defined;
- default: customizes the imported component render (add props, etc). You can let:component to access the imported component constructor.

#### Basic Example

`html


import('./AsyncComponent.svelte')}>


To set that up, you'll need to register the loader at definition time in a module script block, instead of passing the loader directly to the loadable component instance, then pass the resulting loader on to the loadable component. It looks like this (with svelte-routing).

_NOTE:_ A resolve function is necessary for most SSR solutions. The function must return an absolute path, which will be used for indexing, and for loading before hydration. The specific way to generate that may vary by platform. A babel plugin for Svelte Loadable to help generate that automatically is forthcoming.

App.svelte:

`html


This comes with additional benefits and opportunities as well. There is now a preloadAll method, which can be used to proactively (and recursively) preload all the modules after the initial render of the application, if desired. That method can also be used server side to preload all the necessary components to pull off server side rendering (SSR).

$3

#### preloadAll()

Preloads all registered Loaders. Works server side, and client side.

`js
import { preloadAll } from 'svelte-loadable'

// Somewhere in your code, after the initial tree is rendered:
preloadAll().then(() => {...});
`

$3

To facilitate the creation of SSR solutions, Svelte Loadable uses a context which can be set up by an SSR solution in a LoadableProvider using the string identifier 'svelte-loadable-capture'. Svelte Loadable expects the context to provide a method, to which it will pass the registered loader function. For an example implementation, check out npdev:svelte-loadable a Meteor SSR solution.

---

For more examples, please check the example/src/App.svelte` file.