fix(composables): handle dependency changes in composables

Author: nickmessing

packages/public/vue-tinybase/scripts/generate/composables/astHandlers/handleStoreInterfaceDeclaration.ts

@@ -55,7 +55,16 @@ export async function handleStoreInterfaceDeclaration(path: NodePath<t.TSInterfa
     )
 
     const file = t.file(
-      addImports(path, statements, parameterNames.length > 0, false, true, true, `on${fieldName}Change`),
+      addImports(
+        path,
+        statements,
+        parameterNames.length > 0,
+        false,
+        true,
+        true,
+        parameterNames.length > 0,
+        `on${fieldName}Change`,
+      ),
     )
     for (const rule of rulesToDisable) {
       t.addComment(file, 'leading', ` eslint-disable ${rule} `, false)

packages/public/vue-tinybase/scripts/generate/composables/generators/generateComposableFunction.ts

@@ -74,6 +74,13 @@ export function generateComposableFunction(
     ),
   ])
 
+  const watchStatement = t.expressionStatement(
+    t.callExpression(t.identifier('watch'), [
+      t.arrayExpression(parameterNames.map(parameterName => t.identifier(`${parameterName}Ref`))),
+      t.identifier('getDataFromStore'),
+    ]),
+  )
+
   const returnStatement = t.returnStatement(
     t.objectExpression([t.objectProperty(t.identifier('data'), t.identifier('data'))]),
   )
@@ -84,8 +91,11 @@ export function generateComposableFunction(
     getDataFromStoreStatement,
     eventListenerCallStatement,
     dataComputedStatement,
-    returnStatement,
   )
+  if (parameterNames.length > 0) {
+    statements.push(watchStatement)
+  }
+  statements.push(returnStatement)
 
   const functionDeclaration = t.functionDeclaration(
     t.identifier(`use${fieldName}`),

packages/public/vue-tinybase/scripts/generate/utils/importsHandler.ts

@@ -24,6 +24,7 @@ export function addImports(
   isUseListenerUsed = true,
   isShallowRefUsed = false,
   isComputedUsed = false,
+  isWatchUsed = false,
   eventListenerToImport?: string,
 ) {
   const program = t.program([...statements])
@@ -41,6 +42,15 @@ export function addImports(
     )
   }
 
+  if (isWatchUsed) {
+    program.body.unshift(
+      t.importDeclaration(
+        [t.importSpecifier(t.identifier('watch'), t.identifier('watch'))],
+        t.stringLiteral('@vue/runtime-core'),
+      ),
+    )
+  }
+
   if (isUseListenerUsed) {
     program.body.unshift(
       t.importDeclaration(

packages/public/vue-tinybase/src/generated/composables/custom-store/useCell.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onCellChange } from '../../events/custom-store/onCellChange.js'
 
@@ -48,6 +49,7 @@ export function useCell<
     }
     return localRef.value
   })
+  watch([tableIdRef, rowIdRef, cellIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useCellIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onCellIdsChange } from '../../events/custom-store/onCellIdsChange.js'
 
@@ -39,6 +40,7 @@ export function useCellIds<
     }
     return localRef.value
   })
+  watch([tableIdRef, rowIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useRow.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onRowChange } from '../../events/custom-store/onRowChange.js'
 
@@ -41,6 +42,7 @@ export function useRow<Store extends AnyStore, TableId extends TableIdFromSchema
     }
     return localRef.value
   })
+  watch([tableIdRef, rowIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useRowCount.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onRowCountChange } from '../../events/custom-store/onRowCountChange.js'
 
@@ -34,6 +35,7 @@ export function useRowCount<Store extends AnyStore>(
     }
     return localRef.value
   })
+  watch([tableIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useRowIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onRowIdsChange } from '../../events/custom-store/onRowIdsChange.js'
 
@@ -35,6 +36,7 @@ export function useRowIds<Store extends AnyStore>(
     }
     return localRef.value
   })
+  watch([tableIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useSortedRowIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onSortedRowIdsChange } from '../../events/custom-store/onSortedRowIdsChange.js'
 
@@ -64,6 +65,7 @@ export function useSortedRowIds<
     }
     return localRef.value
   })
+  watch([tableIdRef, cellIdRef, descendingRef, offsetRef, limitRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useTable.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onTableChange } from '../../events/custom-store/onTableChange.js'
 
@@ -38,6 +39,7 @@ export function useTable<Store extends AnyStore, TableId extends TableIdFromSche
     }
     return localRef.value
   })
+  watch([tableIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useTableCellIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onTableCellIdsChange } from '../../events/custom-store/onTableCellIdsChange.js'
 
@@ -37,6 +38,7 @@ export function useTableCellIds<
     }
     return localRef.value
   })
+  watch([tableIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/custom-store/useValue.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { onValueChange } from '../../events/custom-store/onValueChange.js'
 
@@ -37,6 +38,7 @@ export function useValue<Store extends AnyStore, ValueId extends ValueIdFromSche
     }
     return localRef.value
   })
+  watch([valueIdRef], getDataFromStore)
   return {
     data: data,
   }

packages/public/vue-tinybase/src/generated/composables/default-store/useCell.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onCellChange } from '../../events/custom-store/onCellChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useCellIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onCellIdsChange } from '../../events/custom-store/onCellIdsChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useRow.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onRowChange } from '../../events/custom-store/onRowChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useRowCount.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onRowCountChange } from '../../events/custom-store/onRowCountChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useRowIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onRowIdsChange } from '../../events/custom-store/onRowIdsChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useSortedRowIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onSortedRowIdsChange } from '../../events/custom-store/onSortedRowIdsChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useTable.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onTableChange } from '../../events/custom-store/onTableChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useTableCellIds.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onTableCellIdsChange } from '../../events/custom-store/onTableCellIdsChange.js'

packages/public/vue-tinybase/src/generated/composables/default-store/useValue.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { toRef, shallowRef, computed } from '@vue/reactivity'
+import { watch } from '@vue/runtime-core'
 
 import { useStore } from '../../../composables/useStore.js'
 import { onValueChange } from '../../events/custom-store/onValueChange.js'