{"id":13723704,"url":"https://github.com/kaisermann/svelte-loadable","last_synced_at":"2025-04-04T12:06:41.143Z","repository":{"id":37561655,"uuid":"137829555","full_name":"kaisermann/svelte-loadable","owner":"kaisermann","description":"Dynamically load a svelte component","archived":false,"fork":false,"pushed_at":"2023-03-07T13:35:09.000Z","size":514,"stargazers_count":325,"open_issues_count":15,"forks_count":13,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-27T09:47:04.622Z","etag":null,"topics":["code-splitting","dynamic-import","loadable-components","svelte"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaisermann.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-19T02:21:03.000Z","updated_at":"2025-03-24T06:52:42.000Z","dependencies_parsed_at":"2024-06-18T15:37:07.337Z","dependency_job_id":"6c24966e-6354-4b8e-a20e-8f40eb97d6be","html_url":"https://github.com/kaisermann/svelte-loadable","commit_stats":{"total_commits":48,"total_committers":9,"mean_commits":5.333333333333333,"dds":"0.29166666666666663","last_synced_commit":"58f940419ab3bac3625d923ec783e4e8b301572e"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fsvelte-loadable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fsvelte-loadable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fsvelte-loadable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fsvelte-loadable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaisermann","download_url":"https://codeload.github.com/kaisermann/svelte-loadable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174415,"owners_count":20896078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-splitting","dynamic-import","loadable-components","svelte"],"created_at":"2024-08-03T01:01:44.620Z","updated_at":"2025-04-04T12:06:41.123Z","avatar_url":"https://github.com/kaisermann.png","language":"Svelte","funding_links":[],"categories":["components and libraries","Uncategorized","Svelte"],"sub_categories":["async loading","Uncategorized"],"readme":"# svelte-loadable\n\n\u003e Dynamically load a svelte component. Based on [react-loadable](https://github.com/jamiebuilds/react-loadable).\n\n## Usage\n\nJust pass a `loader` method which return a async module import:\n\n```html\n\u003cscript\u003e\n  import Loadable from 'svelte-loadable'\n\u003c/script\u003e\n\n\u003cLoadable loader={() =\u003e import('./AsyncComponent.svelte')} /\u003e\n```\n\nUse `unloader` to prevent `Loadable` from caching the component which will cause it to call `loader` each time the component is used after being unmounted.\n\n```html\n\u003cscript\u003e\n  import Loadable from 'svelte-loadable'\n\n  // unloader callback\n  function unloader() {\n    // some code here\n  }\n\u003c/script\u003e\n\n\u003c!-- unloader as boolean --\u003e\n\u003cLoadable ... unloader /\u003e\n\u003cLoadable ... unloader=\"{true}\" /\u003e\n\u003cLoadable ... unloader=\"{someBooleanValue}\" /\u003e\n\n\u003c!-- unloader as predefined function in script tag above --\u003e\n\u003cLoadable ... {unloader} /\u003e\n\u003c!-- unloader as an inline function --\u003e\n\u003cLoadable ... unloader={() =\u003e { /* some code here */ }} /\u003e\n\n\u003c!-- example using SystemJS Module Loader which has the ability to unload (delete) a previously loaded module --\u003e\n\u003cLoadable loader={() =\u003e System.import('./AsyncComponent.svelte')} unloader={()\n=\u003e System.delete(System.resolve('./AsyncComponent.svelte'))} /\u003e\n```\n\n### Props\n\n- `loader`: a function which `import()` your component to the `\u003cLoadable\u003e` component.\n- `delay`: minimum delay in `msecs` for showing the `loading slot`. Default: 200\n- `timeout`: time in `msecs` for showing the `timeout slot`.\n- `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.\n\nAny other prop will be passed directly onto the rendered component if the `default` slot is defined:\n\n```html\n\u003cLoadable loader=\"{...}\" foo=\"cookie\" bar=\"potato\" /\u003e\n\u003c!-- `foo` and `bar` will be available to the rendered component --\u003e\n```\n\nIf the default slot is used, it's up to the developer to render the component:\n\n```html\n\u003cLoadable loader=\"{...}\" let:component\u003e\n  \u003csvelte:component this=\"{component}\" foo=\"cookie\" bar=\"potato\" /\u003e\n\u003c/Loadable\u003e\n```\n\n### Events\n\n- `on:load`: a function which is executed right after the `\u003cLoadable\u003e` component is loaded.\n\n```html\n\u003cLoadable on:load={() =\u003e console.log('The component has been loaded')}\nloader={...} /\u003e\n```\n\nOtherwise, if your callback contains more code, you can wrap it into a function, and call it without parentheses\n\n```html\n\u003cLoadable on:load=\"{callback}\" loader=\"{...}\" /\u003e\n```\n\n### Slots\n\n- `loading`: customizes the loading state;\n- `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.\n- `timeout`: customizes the timeout state. Will only appear if `timeout` prop is defined;\n- `default`: customizes the imported component render (add props, etc). You can `let:component` to access the imported component constructor.\n\n#### Basic Example\n\n```html\n\u003cscript\u003e\n  import Loadable from 'svelte-loadable'\n\u003c/script\u003e\n\n\u003cLoadable loader={() =\u003e import('./AsyncComponent.svelte')}\u003e\n  \u003cdiv slot=\"loading\"\u003eLoading...\u003c/div\u003e\n  \u003cdiv slot=\"error\" let:error let:retry\u003e\n    {error}\n    \u003cbr\u003e\n    \u003cbutton on:click={retry}\u003eTry again\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/Loadable\u003e\n```\n\n### Registering a loader\n\n#### Or, preventing \"flash of loading\"\n\nBy default, Svelte Loadable will dynamically load the specified loader (import statement) every time the component is initialized and reinitialized. This creates a delay between initial rendering, and rending the loaded component, even for components which have previously been loaded. To work around that, Svelte Loadable provides an optional cache, which can be used to predefine a loader, and keep track of whether it has already been loaded. When a loader is registered, it will render immediately on the next initialization.\n\nTo 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`).\n\n_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.\n\n**App.svelte:**\n\n```html\n\u003cscript context=\"module\"\u003e\n  import { register } from 'svelte-loadable'\n\n  // Loaders must be registered outside of the render tree.\n  const PageLoader = register({\n    loader: () =\u003e import('./pages/Page.svelte'),\n    resolve: () =\u003e require.resolve('./pages/Page.svelte'),\n  })\n  const HomeLoader = register({\n    loader: () =\u003e import('./home/Home.svelte'),\n    resolve: () =\u003e require.resolve('./home/Home.svelte'),\n  })\n\u003c/script\u003e\n\n\u003cscript\u003e\n  import { Router, Link, Route } from 'svelte-routing'\n  import Loadable from 'svelte-loadable'\n\n  export let url = ''\n\u003c/script\u003e\n\n\u003cRouter url=\"{url}\"\u003e\n  \u003cRoute path=\"/pages/:slug\" let:params\u003e\n    \u003cLoadable loader=\"{PageLoader}\" slug=\"{params.slug}\"\u003e\n      \u003cdiv slot=\"loading\"\u003eLoading...\u003c/div\u003e\n    \u003c/Loadable\u003e\n  \u003c/Route\u003e\n  \u003cRoute path=\"/\"\u003e\n    \u003cLoadable loader=\"{HomeLoader}\" /\u003e\n  \u003c/Route\u003e\n\u003c/Router\u003e\n```\n\nAnother advantage is that if the same module is registered in two different places in the tree, the previous loader will be used instead of creating a second loader.\n\nThis 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).\n\n### Additional Methods\n\n#### preloadAll()\n\nPreloads all registered Loaders. Works server side, and client side.\n\n```js\nimport { preloadAll } from 'svelte-loadable'\n\n// Somewhere in your code, after the initial tree is rendered:\npreloadAll().then(() =\u003e {...});\n```\n\n### The 'svelte-loadable-capture' Context for SSR\n\nTo 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`](https://github.com/CaptainN/npdev-svelte-loadable) a Meteor SSR solution.\n\n---\n\nFor more examples, please check the [`example/src/App.svelte`](https://github.com/kaisermann/svelte-loadable/blob/master/example/src/App.svelte) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Fsvelte-loadable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaisermann%2Fsvelte-loadable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Fsvelte-loadable/lists"}