Using svelte-loadable for lazy import can I avoid passing props to component based on which component type I'm loading?

Question

I'm using svelte-loadable and the below code but I'm getting the below warning and I feel this is not a good code.

Can you suggest me how to properly handle this?

The warning: <Create> was created with unknown prop 'playerID'

The code:

<script lang="ts">
    import Loadable from "svelte-loadable";
  
  export let loader: string;
  // other code
</script>

<Loadable
  loader={loader === "player"
    ? () => import("$lib/../routes/players/create.svelte")
    : () => import("$lib/../routes/teams/create.svelte")
    // others here...
  }
  let:component
>
  <svelte:component
    this={component}
    {formName}
    on:SOMETHING={handleSOMETHING}
    {/* other props here */}
    playerID={loader === "player" ? playerID : undefined}
  />
</Loadable>

Is there a way I can avoid the playerID prop based on which component I'm loading?

brunnerh · Accepted Answer · 2022-07-22 19:13:07Z

1

One way would be to just have an {#if} on loader and have separate Loadable/svelte:component pairs. Then you can just pass the appropriate properties.

If you do not need props with bind you could also have a local variable that contains the correct props based on loader and then spread that object. Something like:

const props = loader == 'player' ?
  { playerID } :
  {};

<svelte:component {...props} />

edited Jul 22, 2022 at 19:13

answered Jul 22, 2022 at 19:07

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using svelte-loadable for lazy import can I avoid passing props to component based on which component type I'm loading?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related