make API declarative by making series prop reactive

[damooo]

Thanks for great work.

If we can make series prop reactive, i.e to set percentage, we can just update series value, instead of binding to elem and updating through updatePerc method, then it will be very convenient in svelte environment.

Thanks again for awesome component.

[okrad]

Hi @damooo, that would be definitely handy, but I'm afraid that setting the series property this way, the progress animation would start anew from zero each time, instead of starting from the current percentage...

What do you think?

[damooo]

We can make component preserve it's previous state though. like following pseudo-code:

let previousState = 0;
let currentState = 0;
export let series = [];

function updateState() {
    previousState = currentState;
    currentState = series[0];
}

$: series && updateState();

And we can use internal currentState, previousState for actual view. whereas can use series for exporting contract. Thus two concerns can be disentangled.

[okrad]

Yes... Though I'm not sure if I fully understood your original request... Can you be more specific on what you mean?

Are you looking for a way to directly update the series prop after a component has been instantiated?

Something like:

const pb = new ProgressBar({
  target: document.getElementById('test'),
  props: {
    series: [90]
  }
});

...

pb.series = [50];

To be able to do something like this, we would need to instruct the compiler to create a setter for the series property.

AFAIK, there's no way to create an accessor for a single property, you can only instruct the compiler to generate accessors for all of the component props (through the <svelte:options accessors /> directive or similar cli flag), and as discussed here, normally this isn't desiderable...

[damooo]

Thanks @okrad .

Instead of getting reference to component, and accessing it's props.. We will just use svelte's way of declaring reactive relationship for series prop. like following

<script>
    let series1 = [50];

    function onProgress(e) {
        series1 = [e.detail.progress]; // We will update data, and svelte will trigger reactivity on ProgressBar, as we declared for it.
    }
</script>

<ProgressBar/ series={series1}>

[okrad]

Hi @damooo, I got it right then... :-)

I'm working on it, I'll let you know when I have something ready!

[okrad]

Hi @damooo, I just published the new version (1.5.0). Now the series prop is reactive and should work as you expected. Can you check it out?

[damooo]

It is working just wonderful.

thank you.