chore: add counter setup to playground

diff --git a/playground/src/stores/counterSetup.ts b/playground/src/stores/counterSetup.ts
new file mode 100644 (file)
index 0000000..80dbfc4
--- /dev/null
+++ b/playground/src/stores/counterSetup.ts
@@ -0,0 +1,62 @@
+import { computed, toRefs, reactive } from 'vue'
+import { acceptHMRUpdate, defineSetupStore } from '../../../src'
+
+const delay = (t: number) => new Promise((r) => setTimeout(r, t))
+
+export const useCounter = defineSetupStore('counter-setup', () => {
+  const state = reactive({
+    n: 0,
+    incrementedTimes: 0,
+    decrementedTimes: 0,
+    numbers: [] as number[],
+  })
+
+  const double = computed(() => state.n * 2)
+
+  function increment(amount = 1) {
+    if (typeof amount !== 'number') {
+      amount = 1
+    }
+    state.incrementedTimes++
+    state.n += amount
+  }
+
+  function changeMe() {
+    console.log('change me to test HMR')
+  }
+
+  async function fail() {
+    const n = state.n
+    await delay(1000)
+    state.numbers.push(n)
+    await delay(1000)
+    if (state.n !== n) {
+      throw new Error('Someone changed n!')
+    }
+
+    return n
+  }
+
+  async function decrementToZero(interval: number = 300) {
+    if (state.n <= 0) return
+
+    while (state.n > 0) {
+      state.n -= 1
+      state.decrementedTimes += 1
+    }
+    await delay(interval)
+  }
+
+  return {
+    ...toRefs(state),
+    double,
+    increment,
+    fail,
+    changeMe,
+    decrementToZero,
+  }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useCounter, import.meta.hot))
+}

diff --git a/playground/src/views/CounterSetupStore.vue b/playground/src/views/CounterSetupStore.vue
new file mode 100644 (file)
index 0000000..b68ad5a
--- /dev/null
+++ b/playground/src/views/CounterSetupStore.vue
@@ -0,0 +1,50 @@
+<template>
+  <h2>Local variables</h2>
+
+  <button @click="n++">Increment local: {{ n }}</button>
+
+  <h2>Counter Store</h2>
+
+  <p>Counter :{{ counter.n }}</p>
+
+  <p>
+    Increment the Store <br />
+
+    <button @click="counter.increment()">+1</button>
+    <button @click="counter.increment(10)">+10</button>
+    <button @click="counter.increment(100)">+100</button>
+    <button @click="counter.n++">Direct Increment</button>
+    <button
+      @click="
+        counter.$patch((state) => {
+          state.n++
+          state.incrementedTimes++
+        })
+      "
+    >
+      Direct patch
+    </button>
+  </p>
+
+  <p>
+    Other actions <br />
+
+    <button @click="counter.fail">Fail</button>
+    <button @click="counter.decrementToZero(300)">Decrement to zero</button>
+    <button @click="counter.changeMe()"><code>counter.changeMe()</code></button>
+  </p>
+
+  <hr />
+
+  <p><code>counter.$state</code>:</p>
+
+  <pre>{{ counter.$state }}</pre>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useCounter } from '../stores/counterSetup'
+
+const counter = useCounter()
+const n = ref(0)
+</script>