// counter.svelte.js
export function createCounter(initial = 0) {
  let count = $state(initial);

  return {
    get count() { return count; },
    increment() { count++; },
    decrement() { count--; },
    reset() { count = initial; },
  };
}


<!-- src/CounterA.svelte -->
<script>
  import { createCounter } from './counter.svelte.js';
  const counter = createCounter();
</script>

<p>A: {counter.count}</p>
<button onclick={counter.increment}>+1</button>
<button onclick={counter.decrement}>-1</button>
<button onclick={counter.reset}>Reset</button>


<!-- src/CounterB.svelte -->
<script>
  import { createCounter } from './counter.svelte.js';
  const counter = createCounter(100); // starts at 100
</script>

<p>B: {counter.count}</p>
<button onclick={counter.increment}>+1</button>

<!--
  Notes:
  - Runes only work because the file is named counter.svelte.js (the
    .svelte.js extension enables them outside a component).
  - count is exposed via a getter (get count()) — a destructured plain
    return would lose the reactive connection, the same concern as
    Vue's "return the ref, not ref.value."
  - Each createCounter() call creates its OWN count, so CounterA and
    CounterB are fully independent — exactly like calling a custom hook
    / composable twice.
-->