kaisermann / svelte-loadable

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

Pass props to component #9

Closed cristovao-trevisan closed 5 years ago

cristovao-trevisan commented 5 years ago

Hi, I'm using this package together with svelte-routing. My use case requires passing params to rendered element, like so:

<Route path="/user/:id" let:routeParams={params}>
  <Loadable {...params} loader={() => import('./components/EditUser.svelte')} /> 
</Route>

Thus there is a need to pass props to the slot or component

kaisermann commented 5 years ago

I did something wrong with the PR, while adding some changes to your code to exclude all the Loadable props, sorry 😁.

Anyway, thanks for the PR! I'll release a new version right now.

kaisermann commented 5 years ago

Released on v1.1.0 :tada:

cristovao-trevisan commented 5 years ago

Thank you

CaptainN commented 5 years ago

This seems to only fix the issue when a named slot is used - the example code above would not work. Here is the current implementation:


{#if state === STATES.ERROR}
  <slot name="error" {error} />
{:else if state === STATES.TIMEOUT}
  <slot name="timeout" />
{:else if state === STATES.LOADING}
  <slot name="loading" />
{:else if state === STATES.SUCCESS}
  {#if slots && slots.success}
    <slot name="success" {component} props={$$props} />
  {:else}
    <svelte:component this={component} />
  {/if}
{/if}

Should it be? :


{#if state === STATES.ERROR}
  <slot name="error" {error} />
{:else if state === STATES.TIMEOUT}
  <slot name="timeout" />
{:else if state === STATES.LOADING}
  <slot name="loading" />
{:else if state === STATES.SUCCESS}
  {#if slots && slots.success}
    <slot name="success" {component} props={$$props} />
  {:else}
    <svelte:component this={component} props={$$props} />
  {/if}
{/if}

Alternatively (or additionally) should it copy the "rest" props (defined already as componentProps):

{#if state === STATES.ERROR}
  <slot name="error" {error} />
{:else if state === STATES.TIMEOUT}
  <slot name="timeout" />
{:else if state === STATES.LOADING}
  <slot name="loading" />
{:else if state === STATES.SUCCESS}
  {#if slots && slots.success}
    <slot name="success" {component} props={$$props} {...componentProps} />
  {:else}
    <svelte:component this={component} props={$$props} {...componentProps} />
  {/if}
{/if}

I'm happy to make a PR.

kaisermann commented 5 years ago

@CaptainN I don't know what was on my mind when I was merging this PR. I completely ignored the componentProps that I wrote moments before 🤔

Thanks for your attention on this issue 👍

CaptainN commented 5 years ago

@kaisermann I figured it was a 2:00am or morning commute commit or something - I been there!

Thanks for an awesome package!