docs: wip testing devtools

diff --git a/docs/.vitepress/components/ThemeToggle.vue b/docs/.vitepress/components/ThemeToggle.vue
index a8e85466e170cd6553ea0f0072308ebea837a546..d192b3ebe23b93d8e6a886dc0c4bfa7c07a10e6e 100644 (file)
--- a/docs/.vitepress/components/ThemeToggle.vue
+++ b/docs/.vitepress/components/ThemeToggle.vue
@@ -54,10 +54,15 @@
       <path d="M15 2.005h2v5h-2z" fill="currentColor"></path>
     </svg>
   </button>
+
+  <p>Counter :{{ counterStore.n }}</p>
+
+  <button @click="counterStore.increment">Increment</button>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useCounter } from '../stores/counter'
 
 const isBrowser = typeof window !== 'undefined'
 
@@ -72,6 +77,8 @@ function isDarkMode() {
   return !window.matchMedia(PREFERS_LIGHT).matches
 }
 
+const counterStore = useCounter()
+
 const storageKey = 'pinia-color-scheme'
 
 const localIsDark = ref(isDarkMode())

diff --git a/docs/.vitepress/stores/cart.ts b/docs/.vitepress/stores/cart.ts
new file mode 100644 (file)
index 0000000..a1fe4bb
--- /dev/null
+++ b/docs/.vitepress/stores/cart.ts
@@ -0,0 +1,44 @@
+import { defineStore } from '../../../src'
+import { useUserStore } from './user'
+
+export const useCartStore = defineStore({
+  id: 'cart',
+  state: () => ({
+    rawItems: [] as string[],
+  }),
+  getters: {
+    items: (state) =>
+      state.rawItems.reduce((items, item) => {
+        const existingItem = items.find((it) => it.name === item)
+
+        if (!existingItem) {
+          items.push({ name: item, amount: 1 })
+        } else {
+          existingItem.amount++
+        }
+
+        return items
+      }, [] as Array<{ name: string; amount: number }>),
+  },
+  actions: {
+    addItem(name: string) {
+      this.rawItems.push(name)
+    },
+
+    removeItem(name: string) {
+      const i = this.rawItems.lastIndexOf(name)
+      if (i > -1) this.rawItems.splice(i, 1)
+    },
+
+    async purchaseItems() {
+      const user = useUserStore()
+      if (!user.name) return
+
+      console.log('Purchasing', this.items)
+      const n = this.items.length
+      this.rawItems = []
+
+      return n
+    },
+  },
+})

diff --git a/docs/.vitepress/stores/counter.ts b/docs/.vitepress/stores/counter.ts
new file mode 100644 (file)
index 0000000..27ad109
--- /dev/null
+++ b/docs/.vitepress/stores/counter.ts
@@ -0,0 +1,47 @@
+import { defineStore } from '../../../src'
+
+const delay = (t: number) => new Promise((r) => setTimeout(r, t))
+
+export const useCounter = defineStore({
+  id: 'counter',
+
+  state: () => ({
+    n: 0,
+    incrementedTimes: 0,
+    decrementedTimes: 0,
+  }),
+
+  getters: {
+    double: (state) => state.n * 2,
+  },
+
+  actions: {
+    increment(amount = 1) {
+      if (typeof amount !== 'number') {
+        amount = 1
+      }
+      this.incrementedTimes++
+      this.n += amount
+    },
+
+    async decrementToZero(interval: number = 300, usePatch = true) {
+      if (this.n <= 0) return
+
+      while (this.n > 0) {
+        if (usePatch) {
+          this.$patch({
+            n: this.n - 1,
+            decrementedTimes: this.decrementedTimes + 1,
+          })
+          // this.$patch(state => {
+          //   state.n--
+          //   state.decrementedTimes++
+          // })
+        } else {
+          this.n--
+        }
+        await delay(interval)
+      }
+    },
+  },
+})

diff --git a/docs/.vitepress/stores/user.ts b/docs/.vitepress/stores/user.ts
new file mode 100644 (file)
index 0000000..32970ec
--- /dev/null
+++ b/docs/.vitepress/stores/user.ts
@@ -0,0 +1,39 @@
+import { defineStore } from '../../../src'
+
+export const useUserStore = defineStore({
+  id: 'user',
+  state: () => ({
+    name: 'Eduardo',
+    isAdmin: true,
+  }),
+  actions: {
+    /**
+     * Attempt to login a user
+     */
+    async login(user: string, password: string) {
+      const userData = await apiLogin(user, password)
+
+      this.patch({
+        name: user,
+        ...userData,
+      })
+    },
+    logout() {
+      this.patch({
+        name: '',
+        isAdmin: false,
+      })
+
+      // we could do other stuff like redirecting the user
+    },
+  },
+})
+
+/**
+ * Simulate a login
+ */
+function apiLogin(a: string, p: string) {
+  if (a === 'ed' && p === 'ed') return Promise.resolve({ isAdmin: true })
+  if (p === 'ed') return Promise.resolve({ isAdmin: false })
+  return Promise.reject(new Error('invalid credentials'))
+}

diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 423cf24f1d2bedce4f2dcd023e082fed43f8efd5..6e181319042e6cc811ecf35530e84506bcc7dff3 100644 (file)
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -1,6 +1,7 @@
 import Theme from 'vitepress/theme'
 import './custom.css'
 import './code-theme.css'
+import { createPinia } from '../../../src'
 
 const { Layout } = Theme
 
@@ -21,6 +22,9 @@ Layout.mounted = function () {
 /** @type {import('vitepress').Theme} */
 const config = {
   ...Theme,
+  enhanceApp({ app }) {
+    app.use(createPinia())
+  },
 }
 
 export default config

diff --git a/docs/vite.config.js b/docs/vite.config.js
new file mode 100644 (file)
index 0000000..54d5fe8
--- /dev/null
+++ b/docs/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+console.log('loaded config')
+
+export default defineConfig({
+  define: {
+    __DEV__: 'true',
+    __BROWSER__: 'true',
+  },
+})