A way to forgive unused props, without the compiler or browser screaming at you

[arnu515]

I don't really know if this is supposed to be a bug report or a feature request, but I chose feature request. LMK if changes are required.

Is your feature request related to a problem? Please describe.
If we have a component that we have provided props for, but don't want to use some of the props like the example shown below, there's no way to ignore the props without either the compiler or the browser screaming at you:

<!-- App.svelte -->
<script lang=ts>
    import Test from "./test.svelte"
</script>

<Test prop1={123} prop2={["an array"]} prop3="lorem ipsum" prop4={{a: "b"}} />

<!-- test.svelte -->
<script lang=ts>
    // I want to use prop1, but not prop2, prop3 or prop4
    export let prop1: number;

    // Example 1: Using "export let prop2" without usage
    export let prop2: any;
    // This will make the compiler say that the variable was defined without usage

    // Example 2: Using "export const prop3 = defaultValue", like the compiler suggests
    export const prop3 = "hello world";
    // This makes the browser console scream at you (see screenshot)

    // Finally, if I choose to not put any export, the browser will still scream at me
</script>

<h1>{prop1}</h1>

Screenshot showing the browser not liking export const

Describe the solution you'd like
I would like export const to make the browser not scream at me.

Describe alternatives you've considered
None. I've just ignored the error

How important is this feature to you?
Not very important, but I would love to see it fixed

Additional context
I'm using this for routes using pagejs, where the prop params can be undefined, so please don't suggest "You should just use all props or not provide unnecessary props", because I'm doing this using the <svelte:component> component. See this github gist for more info

[dummdidumm]

Just do export let optionalProp: SomeType = undefined;. That will silence the error. It also makes it clear for people reading the code that it's optional.

[arnu515]

Just do export let optionalProp: SomeType = undefined;. That will silence the error. It also makes it clear for people reading the code that it's optional.

Nope

[arnu515]

@dummdidumm @Conduitry Please reopen this issue

[dummdidumm]

Sorry I misread your text. Turning this off is indeed not possible right now if I remember correctly. You can disable certain warnings by doing svelte-ignore <warning-code> but I think this doesn't work in this case.

So it would be good if this worked:

// svelte-ignore unused-export-let
export let params;

[arnu515]

Sorry I misread your text. Turning this off is indeed not possible right now if I remember correctly. You can disable certain warnings by doing svelte-ignore <warning-code> but I think this doesn't work in this case.

So it would be good if this worked:

// svelte-ignore unused-export-let
export let params;

Thanks! I'll be using this for now, but an official fix will be appreciated :)

---

EDIT: I'm sorry to say @dummdidumm, but this doesn't work for export let

[guidobouman]

What's the point of passing a prop to a component that is not used? Looks like a code smell to me.

---

EDIT: I just read your Gist. If you go through the trouble to set up your own PageJS instance and rebuild a Svelte router from scratch. Why not also conditionally pass the query & params props when they're actually filled?

[arnu515]

What's the point of passing a prop to a component that is not used? Looks like a code smell to me.

EDIT: I just read your Gist. If you go through the trouble to set up your own PageJS instance and rebuild a Svelte router from scratch. Why not also conditionally pass the query & params props when they're actually filled?

I don't know how to do that, maybe something like this:

{#if query}
<Component {query} />
{:else}
<Component />
{/if}

But then what will I do on the component's end? I'm guessing $$props. But that's not the point of this issue. The point is to allow unused props without raising warnings.

[dummdidumm]

EDIT: I'm sorry to say @dummdidumm, but this doesn't work for export let

Yes I know, that's why I said would. If it worked this would be the solution. But currently not all compiler warnings can be silenced that way. If they can then this would be the proper solution.

[arnu515]

EDIT: I'm sorry to say @dummdidumm, but this doesn't work for export let

Yes I know, that's why I said would. If it worked this would be the solution. But currently not all compiler warnings can be silenced that way. If they can then this would be the proper solution.

Oh right! Didn't read the would. Do you have a new solution?

[dummdidumm]

No there is no solution currently that I know of. Well... You could try export let param;param;

[arnu515]

No there is no solution currently that I know of. Well... You could try export let param;param;

Yes that will work, but an official fix is suggested :)

[guidobouman]

I know you requested te option to silence the warnings. So this might not be good enough. I'm trying anyhow.

But what about a props object that is spread on the component? If the key is not defined, the prop will not be passed. The components that should receive params can specify the used props. If a component does not specify a prop, that means it is not used while it is provided in the query or params, which makes the warning valid.

export let params: Object;
export let query: Object;

In the router setup it could look a little like this:

<script>
let props = {};

function setProps(params: Object, query: Object) {
  const newProps = {};

  if(Object.keys(params).length > 0) {
    newProps.params = params
  }

  if(Object.keys(query).length > 0) {
    newProps.query = query
  }

  props = newProps;
}
</script>

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

[arnu515]

I know you requested te option to silence the warnings. So this might not be good enough. I'm trying anyhow.

But what about a props object that is spread on the component? If the key is not defined, the prop will not be passed. The components that should receive params can specify the used props. If a component does not specify a prop, that means it is not used while it is provided in the query or params, which makes the warning valid.

export let params: Object;
export let query: Object;

In the router setup it could look a little like this:

<script>
let props = {};

function setProps(params: Object, query: Object) {
  const newProps = {};

  if(Object.keys(params).length > 0) {
    newProps.params = params
  }

  if(Object.keys(query).length > 0) {
    newProps.query = query
  }

  props = newProps;
}
</script>

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

I'll try using this for now, and I'll also redo the router code. Thanks everybody for the help! I really hope that my request does get fulfilled, i.e. there'll be a way to silence the warnings in the future, but I got what I wanted.

Any moderators/members can close this issue if they want to :)

[rafrafek]

What's the point of passing a prop to a component that is not used? Looks like a code smell to me.

My own example:
I've created a Table component that renders any data you want in the form of a nice table. You can configure it so that certain cells will use your custom component (for example, if you want a button in a cell). Your component might need row and/or column data, but I don't know if you require it. It's up to you to define this within your component. How can I determine whether your component requires row and/or column data? Currently, I simply pass them, and you might receive warnings about unused props or unknown props when the component is created. Unfortunately, there isn't a straightforward solution to this issue.

[guidobouman]

This is a little unrelated, but you specify a contract for the custom component, right? Svelte is explicit. So if your contract states that you'll pass the column & row data as a prop, then the implementing component needs to list those two props for usage. If the component then does not use the data, that's fine, at least it did not forget to implement anything from the contract.

EDIT: I see your point now. assigning the prop to something like const _unused = row; feels ... off.

And what about a slot setup along the lines of CellComponent data="['column', 'row']"><MyCustomComponent /></CellComponent> ? Also not the best...

[rafrafek]

This is how I have to deal with it:

In this case column is not needed, but in some other cells it is needed.

All cells are created in the same way:

[peterkogo]

I created an RFC to solve this issue, if anyone is interested.

[mr-josh]

You could use the magic $$props variable (note the lowercase "p", not to be confused with the typescript $$Props type):

<script lang="ts">
  // ...

  const props = $$props;
</script>

The $$props variable will include any already exported props, so if you only want the props you haven't exported, then you can use $$restProps which works kinda like a spread deconstruction (eg. const { ...rest } = obj;)

If you're never going to use these props, things will hush by just adding the following:

<script lang="ts">
  // ...

  $$restProps;
</script>

[ryanzec]

I would like official support for this too.

The context for me for add a property that is not used direct is to add better TypeScript support for my component. I want a property to be a key of an object however to know what the valid keys, I need to pass in the object (even thought the object itself is not needed directly by the component).