kaisermann / svelte-loadable

Dynamically load a svelte component
MIT License
322 stars 13 forks source link

Pass non-Loadable properties to the loaded component #10

Closed CaptainN closed 5 years ago

CaptainN commented 5 years ago

This PR attaches additional properties to the loaded component when not using a named slot. This allows patterns like this:

<Router url="{url}">
  <MainLayout>
    <Route path="pages/:slug" let:params>
      <Loadable loader={() => import('./pages/Page.svelte')} slug={params.slug}>
        <div slot="loading">Loading...</div>
      </Loadable>
    </Route>
    <Route path="/">
      <Loadable loader={() => import('./home/Home.svelte')} />
    </Route>
  </MainLayout>
</Router>
<script>
import { Pages } from '/imports/api/collections/pages'
import track from '/imports/utils/useTracker'

export let slug = ''

let page
let isReady
track(function () {
  isReady = Meteor.subscribe('page', slug).ready()
})
track(function () {
  page = Pages.findOne({ slug })
})
</script>

{#if !isReady}
  <div>Loading</div>
{/if}
{#if page}
  <div>{@html page.content}</div>
{/if}

This PR does apply the props differently from a previous patch on the slotted code path. That applies ALL $$props to the child component, including the loader and other Loadable config. This PR avoids that for non-slotted children. I wonder whether the slotted behavior should also only pass the leftover componentProps instead of passing everything?

It would also be nice if the two used the same signature, but it's not allowed to spread onto a slot...

kaisermann commented 5 years ago

Released on v1.1.1 🎉