svelte : Passing function params

[wennerryle]

<script lang="ts">
  // documentation: https://github.com/tigrr/circle-progress

  import type CircleProgress from "js-circle-progress";
  import { onMount } from "svelte";

  type $$Props = {
    value: number;
    class?: string;
    "text-format"?:
      | ((value: number) => string)
      | "horizontal"
      | "vertical"
      | "percent"
      | "valueOnCircle"
      | "none";
    animation:
      | "none"
      | "linear"
      | "easeInQuad"
      | "easeOutQuad"
      | "easeInOutQuad"
      | "easeInCubic"
      | "easeOutCubic"
      | "easeInOutCubic"
      | "easeInQuart"
      | "easeOutQuart"
      | "easeInOutQuart"
      | "easeInQuint"
      | "easeOutQuint"
      | "easeInOutQuint"
      | "easeInSine"
      | "easeOutSine"
      | "easeInOutSine"
      | "easeInExpo"
      | "easeOutExpo"
      | "easeInOutExpo"
      | "easeInCirc"
      | "easeOutCirc"
      | "easeInOutCirc";
  } & Partial<(typeof CircleProgress)["defaults"]>;

  let ref: CircleProgress;

  onMount(() => {
    try {
      ref.textFormat = $$props["text-format"];
    } catch {}
  });
</script>

<circle-progress {...$$props} class={$$props.class} bind:this={ref} />

<style>
  ::part(value) {
    stroke-width: 3px;
    stroke: #60d17d;
    stroke-linecap: round;
  }
  ::part(circle) {
    stroke-width: 3px;
    stroke: #d9d9d9;
  }
  ::part(text) {
    fill: #282828;
  }
</style>

Hi! I create a wrapper around your web-component and it throws a error, but text formatting works fine. I also tried to try/catch but it doesn't work too

[tigrr]

Hi, From the error it looks like textFormat is a string, not a function.

[wennerryle]

Hi, From the error it looks like textFormat is a string, not a function.

But console.log writing that it's a function

Thank you for reply!

[tigrr]

Indeed… Can you share a live demo, for example on jsfiddle.net or codepen.io?

[wennerryle]

Indeed… Can you share a live demo, for example on jsfiddle.net or codepen.io?

I guess I found the error while trying to reproduce it in jsfiddle The first time svelte convert values into string to pass it to web-component Then work function onMount and everything works fine.

I'll fix it now, really love your library ❤️ Peace!

[wennerryle]

Fixed version:

<script lang="ts">
  // documentation: https://github.com/tigrr/circle-progress

  import type CircleProgress from "js-circle-progress";
  import { onMount } from "svelte";

  type TextFormat =
    | ((value: number) => string)
    | "horizontal"
    | "vertical"
    | "percent"
    | "valueOnCircle"
    | "none"
    | undefined
    | null;

  type $$Props = Partial<
    Omit<(typeof CircleProgress)["defaults"], "textFormat"> & {
      value: number;
      class?: string;
      textFormat: TextFormat;
      animation:
        | "none"
        | "linear"
        | "easeInQuad"
        | "easeOutQuad"
        | "easeInOutQuad"
        | "easeInCubic"
        | "easeOutCubic"
        | "easeInOutCubic"
        | "easeInQuart"
        | "easeOutQuart"
        | "easeInOutQuart"
        | "easeInQuint"
        | "easeOutQuint"
        | "easeInOutQuint"
        | "easeInSine"
        | "easeOutSine"
        | "easeInOutSine"
        | "easeInExpo"
        | "easeOutExpo"
        | "easeInOutExpo"
        | "easeInCirc"
        | "easeOutCirc"
        | "easeInOutCirc";
    }
  >;
  export let textFormat: TextFormat = undefined;

  let ref: CircleProgress;

  onMount(() => {
    if (textFormat) {
      ref.textFormat = textFormat;
    }
  });
</script>

<circle-progress {...$$restProps} bind:this={ref} />

<style>
  ::part(value) {
    stroke-width: 3px;
    stroke: #60d17d;
    stroke-linecap: round;
  }
  ::part(circle) {
    stroke-width: 3px;
    stroke: #d9d9d9;
  }
  ::part(text) {
    fill: #282828;
  }
</style>

[tigrr]

Thank you for sharing the solution. I am not familiar with Svelte, so it's hard for me to read the code. But I hope it will be useful for others who may run into the same problem. Peace to you too. ✌️