Exporting a function using a Svelte component

Question

I'm new to svelte and need a bit of help. I have a weight conversion function that calculates conversion between pounds and kilograms. There are two inputs and entering a value in pounds will automatically show kilos and vice versa.

let k = '';
let l = '' ;

function setBothFromK(value) {
k = +value;
l = +( k * 2.2046226218).toFixed(1);
}
function setBothFromL(value) {
l = +value;
k = +( l / 2.2046226218).toFixed(1);
}

and the inputs are set like this:

 <input id="inputKilograms" name="inputKilograms" type="number" placeholder="kgs"
  bind:value={k} on:input="{e => setBothFromK(e.target.value)}" min="0">


 <input id="inputPounds" name="inputPoundsE" type="number" placeholder="lbs" 
 bind:value={l}  on:input="{e => setBothFromL(e.target.value)}" min="0">

I then use the value k to calculate a drug dosage in mg and mls with values provided from an array drugs. When the weight changes, the dosages and volumes change.

The calculated dosages and volumes are set up like this:

    {#each antibiotics as antibiotic, i}

    <div>{((k * antibiotic.dosevalue) / antibiotic.concs).toFixed(2)}</div>

     <div> {(k *   antibiotic.dosevalue).toFixed(2)} </div>

    {/each}

EDITED and updated REPL

It works well. What I'm trying to do is set up a svelte component so I can export both the html and the 2 functions to be used in a number of different pages.

The Weightconvert.svelte is:

   <script>

  let  k = ''; 
  let  l = '';

  export function setBothFromK(value) {
  k = +value;
  l = +( k * 2.2046226218).toFixed(1);
  }

   export function setBothFromL(value) {
  l = +value;
  k = +( l / 2.2046226218).toFixed(1);
  }

  </script>

  <input id="inputPounds" name="inputPounds" type="number" placeholder="lbs" 
 bind:value={l}  on:input="{e => setBothFromL(e.target.value)}" min="0">

  <input id="inputPounds" name="inputKilograms" type="number" placeholder="kgs" 
 bind:value={k}  on:input="{e => setBothFromK(e.target.value)}" min="0"`

The App.svelte is:

   <script>
   let k = '';
   let l = '' ;

   import Weightconvert, {setBothFromK , setBothFromL } from './Test.svelte';
   let dosevalue = 20;
   let concs = 3;
   </script>

  <Weightconvert ></Weightconvert>

     <div bind:this={k}> Dose: {(k * dosevalue).toFixed(2)}</div>

     <div  bind:this={k}> Volume: {((k * dosevalue) / concs).toFixed(2)} </div>

The weight converter function works in each page but no calculations of dosage and volume occur. Being a novice, I'm unsure how I can get that to work. Thanks for any help.

Here is a REPL with the basic functionality but without the component import

Stephane Vanraes Stephane Vanraes · Accepted Answer · 2020-02-10T07:16:35

To export a function from a component you have to bind it in the calling parent and then it will available everywhere else within that parent

<Weightconvert bind:this={myweightconvert}></Weightconvert>
<input .... on:input="{e => myweightconvert.setBothFromK(e.target.value)}">

<script>
let myweightconvert;
</script>

Exporting a function using a Svelte component

3 Answers