State scope in Svelte

Question

I'm a beginner with Svelte and I have the following component:

<script>
  let svgSelector = null;

  const renderMap = () => {
    const map = document.getElementById("map");
    const mapContainer = document.getElementById("mapContainer");
    svgSelector = SVG().addTo(map);

    svgSelector
      .size(mapContainer.offsetWidth, mapContainer.offsetHeight)
      .viewbox(
        0,
        0,
        $activeLayer.background.width,
        $activeLayer.background.height
      );

    svgSelector.image($activeLayer.background.url);

    return svgSelector;
  };

  onMount(() => {
    renderMap();

    /* Logs the correct node */
    console.log(svgSelector)
  });

  /* Logs null */
  console.log(svgSelector)
</script>

<main>
  {#each $hotspots as hotspot}
     <Hotspot hotspot={hotspot} svgSelector={svgSelector} />
  {/each}
</main>

The renderMap function returns an SVG node which I will use in a child component.

I need to send that node down to the child component, but it's coming through as null. How would one go about passing the node instead of the null value?

Answer 1

You could delay the rendering of your child Hotspot components until svgSelector has a value, or guard against svgSelector having value null inside Hotspot.

Example

{#if svgSelector}
  <main>
    {#each $hotspots as hotspot}
       <Hotspot hotspot={hotspot} svgSelector={svgSelector} />
    {/each}
  </main>
{/if}