okrad / svelte-progressbar

A multiseries, SVG progressbar component made with Svelte
https://okrad.github.io/svelte-progressbar/
MIT License
129 stars 18 forks source link

Annoying warning with now unknown Props when using ProgressBar v2 #36

Open NathanaelA opened 1 year ago

NathanaelA commented 1 year ago

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 commented 1 year ago

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

NathanaelA commented 1 year ago

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:

https://github.com/okrad/svelte-progressbar/blob/ba860e941317471674abb18466f7b21f2245e1d3/src/lib/CustomShapeProgressBar.svelte#L8-L23

If you look at the ProgressBar you will see that you are passing the entire $$props to CustomShapeProgressBar here https://github.com/okrad/svelte-progressbar/blob/ba860e941317471674abb18466f7b21f2245e1d3/src/lib/ProgressBar.svelte#L68-L72

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 commented 1 year ago

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

image

okrad commented 1 year ago

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!