refactor(vue): use suspense (#40)

* refactor(vue): use suspense * chore: comment * chore: pending state * chore: comment * chore: comment * chore: comment
hi-ogawa · Apr 19, 2024 · f2d4ab7 · f2d4ab7
1 parent 6398cbf
commit f2d4ab7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/examples/vue-ssr-extra/src/features/server-action/shared.ts b/examples/vue-ssr-extra/src/features/server-action/shared.ts
@@ -74,6 +74,7 @@ function submitEventToFormData(e: SubmitEvent) {
   return formData;
 }
 
+// TODO: action return value on progressive enhancement?
 export function useEnhance<T>(
   action: FormAction<T>,
   options?: {

diff --git a/examples/vue-ssr-extra/src/root.vue b/examples/vue-ssr-extra/src/root.vue
@@ -10,6 +10,8 @@ onMounted(() => {
 onUpdated(() => {
   updated.value++;
 });
+
+const suspended = ref(false);
 </script>
 
 <template>
@@ -21,6 +23,7 @@ onUpdated(() => {
     >
       GitHub
     </a>
+    <span v-if="suspended">...</span>
   </div>
   <div style="display: flex; align-items: center; gap: 0.5rem">
     mounted: {{ mounted }}, updated: {{ mounted }}
@@ -34,13 +37,19 @@ onUpdated(() => {
       <li>
         <RouterLink to="/client">Counter (client)</RouterLink>
       </li>
-      <li style="display: flex; gap: 0.5rem">
-        <RouterLink to="/server">Counter (server)</RouterLink>
-        <a href="/server?__nojs">(disable js)</a>
+      <li>
+        <span style="display: flex; gap: 0.5rem">
+          <RouterLink to="/server">Counter (server)</RouterLink>
+          <a href="/server?__nojs">(disable js)</a>
+        </span>
       </li>
     </ul>
   </nav>
   <main>
-    <RouterView />
+    <RouterView v-slot="{ Component }">
+      <Suspense @pending="suspended = true" @resolve="suspended = false">
+        <component :is="Component"></component>
+      </Suspense>
+    </RouterView>
   </main>
 </template>
diff --git a/examples/vue-ssr-extra/src/routes/server/page.vue b/examples/vue-ssr-extra/src/routes/server/page.vue
@@ -1,20 +1,11 @@
 <script setup lang="ts">
-import { onMounted, onServerPrefetch } from "vue";
 import { useServerCounter } from "./_store";
 import { Form, useEnhance } from "../../features/server-action/shared";
 import { changeCounter, getCounter } from "./_action";
 
+// TODO: revalidation
 const store = useServerCounter();
-
-// TODO: suspend?
-onServerPrefetch(async () => {
-  store.data = await getCounter();
-});
-
-onMounted(async () => {
-  // TODO: refetch on stale?
-  store.data ??= await getCounter();
-});
+store.data ??= await getCounter();
 
 const [formAction, { status }] = useEnhance(changeCounter, {
   onSuccess(data) {