feat(subscription): reactive ready boolean

Author: Akryum

demo-app/imports/ui/components/Info.vue

@@ -3,7 +3,7 @@
 import { Links } from '/imports/api/links/links.js'
 import { subscribe, autoResult } from 'meteor/vuejs:vue3'
 
-subscribe('links.all')
+const { ready } = subscribe('links.all')
 
 const links = autoResult(() => Links.find({}))
 
@@ -32,6 +32,9 @@ function submit (form) {
         <input type="submit" name="submit" value="Add new link">
       </form>
     </li>
+
+    <div v-if="!ready">Loading...</div>
+
     <li v-for="link of links" :key="link._id">
       <a :href="link.url" target="_blank">{{ link.title }}</a>
     </li>

packages/vue3/README.md

@@ -15,7 +15,11 @@ import { subscribe } from 'meteor/vuejs:vue3'
 
 export default {
   setup () {
-    subscribe('links.all' /*, 'some', 'params', 'here' */)
+    const { ready, stop } = subscribe('links.all' /*, 'some', 'params', 'here' */)
+
+    watch(ready, value => {
+      console.log('loading:', !value)
+    })
   }
 }
 ```
@@ -75,11 +79,10 @@ Full example:
 
 ```vue
 <script setup>
-// @ts-nocheck
 import { Links } from '/imports/api/links/links.js'
 import { subscribe, autoResult } from 'meteor/vuejs:vue3'
 
-subscribe('links.all')
+const { ready } = subscribe('links.all')
 
 const links = autoResult(() => Links.find({}))
 
@@ -108,6 +111,9 @@ function submit (form) {
         <input type="submit" name="submit" value="Add new link">
       </form>
     </li>
+
+    <div v-if="!ready">Loading...</div>
+
     <li v-for="link of links" :key="link._id">
       <a :href="link.url" target="_blank">{{ link.title }}</a>
     </li>

packages/vue3/src/index.ts

@@ -3,7 +3,7 @@ import { Meteor } from 'meteor/meteor'
 import { computed, ComputedRef, onUnmounted, ref, watch, watchEffect } from 'vue'
 
 export interface AutorunEffect<TResult> {
-  result: ComputedRef<TResult | undefined>
+  result: ComputedRef<TResult>
   stop: () => void
 }
 
@@ -22,32 +22,51 @@ export function autorun<TResult = unknown> (callback: () => TResult): AutorunEff
     })
   })
   return {
-    result: computed<TResult | undefined>(() => result.value),
+    result: computed<TResult>(() => result.value as TResult),
     stop,
   }
 }
 
-export function autoResult<TResult = unknown> (callback: () => TResult): ComputedRef<TResult | undefined> {
+export function autoResult<TResult = unknown> (callback: () => TResult): ComputedRef<TResult> {
   return autorun(callback).result
 }
 
-export function subscribe (name: string, ...args: any[]): Meteor.SubscriptionHandle {
+export interface ReactiveMeteorSubscription {
+  stop: () => void
+  ready: ComputedRef<boolean>
+}
+
+export function subscribe (name: string, ...args: any[]): ReactiveMeteorSubscription {
   const sub = Meteor.subscribe(name, ...args)
-  onUnmounted(() => {
+  const ready = autorun(() => sub.ready())
+
+  function stop (): void {
+    ready.stop()
     sub.stop()
+  }
+
+  onUnmounted(() => {
+    stop()
   })
-  return sub
-}
 
-export interface AutoSubscribe {
-  stop: () => void
+  return {
+    stop,
+    ready: ready.result,
+  }
 }
 
-export function autoSubscribe (callback: () => [name: string, ...args: any[]]): AutoSubscribe {
+export function autoSubscribe (callback: () => [name: string, ...args: any[]]): ReactiveMeteorSubscription {
+  const ready = ref(false)
   const stop = watch(callback, (value, oldValue, onInvalidate) => {
     const sub = Meteor.subscribe(...value)
+
+    const computation = Tracker.autorun(() => {
+      ready.value = sub.ready()
+    })
+
     onInvalidate(() => {
       sub.stop()
+      computation.stop()
     })
   }, {
     immediate: true,
@@ -56,5 +75,6 @@ export function autoSubscribe (callback: () => [name: string, ...args: any[]]):
 
   return {
     stop,
+    ready: computed(() => ready.value),
   }
 }