title: How to avoid cyclic dependencies without battling with the compiler in svelte?
body: <p>I was reading the doc, and after tweaking its sample code, I managed to get compiler barked at me about cyclic dependencies like this:</p>
  
  <pre><code>&lt;script&gt;
      let count = 0;
      $: double = count * 2;
  
      $: if (double &gt;= 20) {
          alert(`count is dangerously high!`);
          count = 9;
      }
  
      function handleClick() {
          count += 1;
      }
  &lt;/script&gt;
  
  &lt;button on:click={handleClick}&gt;
      Clicked {count} {count === 1 ? 'time' : 'times'}
  &lt;/button&gt;
  </code></pre>
  
  <p>I asked on discord how to fix it, and people suggested that I should hide the dependencies from the compiler like this:</p>
  
  <pre><code>&lt;script&gt;
      let count = 0;
      $: double = count * 2;
  
      function resetCount() {
          count = 9;
      }
  
      $: if (double &gt;= 20) {
          alert(`count is dangerously high!`);
          resetCount();
      }
  
      function handleClick() {
          count += 1;
      }
  &lt;/script&gt;
  
  &lt;button on:click={handleClick}&gt;
      Clicked {count} {count === 1 ? 'time' : 'times'}
  &lt;/button&gt;
  </code></pre>
  
  <p>It works, but I got a couple questions:</p>
  
  <ol>
  <li>Battling with the compiler doesn't sound right to me, is there any other better ways to fix this?</li>
  <li>A more general question is that does cyclic dependencies happen quite often to people who have written large amount of svelte code? Is it normal or it usually signals a bad design?</li>
  </ol>
  
  <p>Thanks.</p>