diff --git a/packages/public/vue-tinybase/scripts/generate/composables/astHandlers/handleStoreInterfaceDeclaration.ts b/packages/public/vue-tinybase/scripts/generate/composables/astHandlers/handleStoreInterfaceDeclaration.ts index e304d48..305997f 100644 --- a/packages/public/vue-tinybase/scripts/generate/composables/astHandlers/handleStoreInterfaceDeclaration.ts +++ b/packages/public/vue-tinybase/scripts/generate/composables/astHandlers/handleStoreInterfaceDeclaration.ts @@ -55,7 +55,16 @@ export async function handleStoreInterfaceDeclaration(path: NodePath 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) diff --git a/packages/public/vue-tinybase/scripts/generate/composables/generators/generateComposableFunction.ts b/packages/public/vue-tinybase/scripts/generate/composables/generators/generateComposableFunction.ts index 0559b34..2f69d7c 100644 --- a/packages/public/vue-tinybase/scripts/generate/composables/generators/generateComposableFunction.ts +++ b/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}`), diff --git a/packages/public/vue-tinybase/scripts/generate/utils/importsHandler.ts b/packages/public/vue-tinybase/scripts/generate/utils/importsHandler.ts index 4657220..9b28f38 100644 --- a/packages/public/vue-tinybase/scripts/generate/utils/importsHandler.ts +++ b/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( diff --git a/packages/public/vue-tinybase/src/generated/composables/custom-store/useCell.ts b/packages/public/vue-tinybase/src/generated/composables/custom-store/useCell.ts index 3cd616e..6830e55 100644 --- a/packages/public/vue-tinybase/src/generated/composables/custom-store/useCell.ts +++ b/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, } diff --git a/packages/public/vue-tinybase/src/generated/composables/custom-store/useCellIds.ts b/packages/public/vue-tinybase/src/generated/composables/custom-store/useCellIds.ts index 1e93ea2..bcb7b53 100644 --- a/packages/public/vue-tinybase/src/generated/composables/custom-store/useCellIds.ts +++ b/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, } diff --git a/packages/public/vue-tinybase/src/generated/composables/custom-store/useRow.ts b/packages/public/vue-tinybase/src/generated/composables/custom-store/useRow.ts index f5a22e9..052950e 100644 --- a/packages/public/vue-tinybase/src/generated/composables/custom-store/useRow.ts +++ b/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( } return localRef.value }) + watch([tableIdRef], getDataFromStore) return { data: data, } diff --git a/packages/public/vue-tinybase/src/generated/composables/custom-store/useRowIds.ts b/packages/public/vue-tinybase/src/generated/composables/custom-store/useRowIds.ts index e33bd01..654dae4 100644 --- a/packages/public/vue-tinybase/src/generated/composables/custom-store/useRowIds.ts +++ b/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( } return localRef.value }) + watch([tableIdRef], getDataFromStore) return { data: data, } diff --git a/packages/public/vue-tinybase/src/generated/composables/custom-store/useSortedRowIds.ts b/packages/public/vue-tinybase/src/generated/composables/custom-store/useSortedRowIds.ts index b517ceb..51a1353 100644 --- a/packages/public/vue-tinybase/src/generated/composables/custom-store/useSortedRowIds.ts +++ b/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, } diff --git a/packages/public/vue-tinybase/src/generated/composables/custom-store/useTable.ts b/packages/public/vue-tinybase/src/generated/composables/custom-store/useTable.ts index dc4894e..65112df 100644 --- a/packages/public/vue-tinybase/src/generated/composables/custom-store/useTable.ts +++ b/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