Annoying warning with now unknown Props when using ProgressBar v2

[NathanaelA]

Since upgrading from v1 to v2, I am now seeing this in my log anytime I create a progress bar:

<CustomShapeProgressBar> was created with unknown prop 'series'
<CustomShapeProgressBar> was created with unknown prop 'valueLabel'

It appears because you do ...props you are passing the values from the parent into the and it doesn't have those props. Even though you don't use them inside the customShapeProgressBar, I think just exporting those two props from CustomShapeProgressBar would be the best solution.

[okrad]

Hi @NathanaelA, I cannot reproduce your issue, which version of svelte (or sveltekit) are you using?

[NathanaelA]

Versions:

"@okrad/svelte-progressbar": "2.1.0",
"svelte": "3.58.0",

My code is rather simple:

  import ProgressBar from "@okrad/svelte-progressbar";
  export const progressBar = writable([0,0]);
 // Other code changes the progressBar values from [0,0] to somewhere up to [0, 100]  (i.e. 100%)

    <div class="progress" >
           {#if $progressBar.length && $progressBar[$progressBar.length-1] > 0}
                <ProgressBar valueLabel=" " series={$progressBar} />
           {/if}
     </div>

If you look at the source code for CustomShapeProgressBar

You will see these are the only exported props:

svelte-progressbar/src/lib/CustomShapeProgressBar.svelte

Lines 8 to 23 in ba860e9

	export let height: number = null;
	export let textSize: number = null;
	export let showProgressValue: boolean = true;
	export let addBackground: boolean = true;
	export let bgColor: string = '#f1f1f1';
	export let labelColor: string = null;
	export let invLabelColor: string = null;
	export let store: SeriesStore;
	export let cls: string = '';
	export let path: string = null;
	export let pathFn: any = () => '';
	export let fillDirection: string = 'l2r';
	export let labelAlignX: string = 'center'; //center, left ,leftOf, right, rightOf
	export let labelAlignY: string = 'middle'; //middle, top, bottom, above, below
	export let showInvertedLabel: boolean = labelAlignX == 'center' && labelAlignY == 'middle';
	export let style: string;

If you look at the ProgressBar you will see that you are passing the entire $$props to CustomShapeProgressBar here

svelte-progressbar/src/lib/ProgressBar.svelte

Lines 68 to 72 in ba860e9

	<CustomShapeProgressBar
	{...$$props}
	{store}
	{actWidth}
	/>

Based on some searches of the Svelte Compiler repo, this is a known runtime DEVELOPER warning (only shows up in Dev mode, not RELEASE during runtime) for anytime you pass in a prop that doesn't exist. So because I'm passing ProgressBar the valueLabel and series and then your code passes them on to the CustomShapeProgressBar which doesn't have those props it throws this warning at dev time into the console.

[forna]

I have the same issue, same versions of svelte and svelte-progressbar:

[okrad]

Ok, sorry, I didn't realize you were talking about the browser developer console, I thought it was a build warning.
Now I'm able to reproduce it, will let you know!