From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 20 Jul 2021 17:06:28 +0000 (+0200)
Subject:  chore: more work
X-Git-Tag: v2.0.0-rc.0~41
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d5a880b81875674156bf2355385ed19831b23117;p=thirdparty%2Fvuejs%2Fpinia.git

 chore: more work
---

diff --git a/playground/src/stores/jokes-swrv.ts b/playground/src/stores/jokes-swrv.ts
new file mode 100644
index 00000000..6f95b531
--- /dev/null
+++ b/playground/src/stores/jokes-swrv.ts
@@ -0,0 +1,27 @@
+import { ref, unref, watch } from 'vue'
+import { acceptHMRUpdate, defineStore } from '../../../src'
+import { getRandomJoke, Joke } from '../views/api/jokes'
+import useSWRV from 'swrv'
+
+export const useJokesSetup = defineStore('jokes-swrv-setup', () => {
+  // const current = ref<null | Joke>(null)
+  const history = ref<Joke[]>([])
+
+  const { data, error, isValidating, mutate, revalidate } = useSWRV(
+    'jokes',
+    getRandomJoke
+  )
+
+  watch(data, (joke) => {
+    if (joke) {
+      history.value.push(joke)
+    }
+  })
+
+  return { current: data, history, fetchJoke: revalidate }
+})
+
+if (import.meta.hot) {
+  // import.meta.hot.accept(acceptHMRUpdate(useJokes, import.meta.hot))
+  import.meta.hot.accept(acceptHMRUpdate(useJokesSetup, import.meta.hot))
+}
diff --git a/playground/src/views/Jokes.vue b/playground/src/views/Jokes.vue
index 2554d5d7..5741f5b5 100644
--- a/playground/src/views/Jokes.vue
+++ b/playground/src/views/Jokes.vue
@@ -14,15 +14,14 @@
       </button>
 
       <div style="min-height: 9rem" v-if="jokes.current">
-
-          <blockquote :key="jokes.current.id">
-            <i>{{ jokes.current.setup }}</i>
-            <br />
-            <br />
-            <p class="appear" @animationend="state = 'ready'">
-              {{ jokes.current.punchline }}
-            </p>
-          </blockquote>
+        <blockquote :key="jokes.current.id">
+          <i>{{ jokes.current.setup }}</i>
+          <br />
+          <br />
+          <p class="appear" @animationend="state = 'ready'">
+            {{ jokes.current.punchline }}
+          </p>
+        </blockquote>
       </div>
     </section>
   </main>
@@ -60,8 +59,8 @@ onMounted(() => {
   console.log('mounted')
   // @ts-expect-error
   window.jo = jokes
-    console.log('new pending')
-    fetchRandomJoke()
+  console.log('new pending')
+  fetchRandomJoke()
 })
 </script>
 
diff --git a/playground/src/views/swrv.vue b/playground/src/views/swrv.vue
index a63adb89..ca976375 100644
--- a/playground/src/views/swrv.vue
+++ b/playground/src/views/swrv.vue
@@ -1,3 +1,80 @@
 <template>
-  <h1></h1>
+  <h3>Pinia + <a href="https://github.com/posva/vue-promised">SWRV</a></h3>
+
+  <main>
+    <section>
+      <button
+        :disabled="state !== 'ready'"
+        @click="fetchRandomJoke"
+        style="margin-bottom: 4px"
+      >
+        {{ buttonText }}
+      </button>
+
+      <div style="min-height: 9rem" v-if="jokes.current">
+        <blockquote :key="jokes.current.id">
+          <i>{{ jokes.current.setup }}</i>
+          <br />
+          <br />
+          <p class="appear" @animationend="state = 'ready'">
+            {{ jokes.current.punchline }}
+          </p>
+        </blockquote>
+      </div>
+    </section>
+  </main>
+
+  <pre>{{ jokes.$state }}</pre>
 </template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { useJokesSetup } from '../stores/jokes-swrv'
+
+// const jokes = useJokes()
+const jokes = useJokesSetup()
+
+const texts = {
+  loading: 'Fetching the joke...',
+  waiting: 'Wait for it...',
+  ready: 'Another one?',
+}
+
+const state = ref<'waiting' | 'loading' | 'ready'>('waiting')
+
+const buttonText = computed(() => texts[state.value])
+
+function fetchRandomJoke() {
+  state.value = 'loading'
+
+  jokes.fetchJoke().finally(() => {
+    state.value = 'waiting'
+    console.log('done fetching', jokes.current)
+  })
+}
+
+onMounted(() => {
+  console.log('mounted')
+  // @ts-expect-error
+  window.jo = jokes
+  console.log('new pending')
+  fetchRandomJoke()
+})
+</script>
+
+<style>
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.appear {
+  opacity: 0;
+  animation: appear 1s ease-in-out 3s;
+  animation-fill-mode: forwards;
+}
+</style>