feat: try to refactor vue adapter

Author: riccardoperra

packages/vue-table/src/createTableHelper.ts

@@ -12,7 +12,7 @@ import type {
 export type TableHelper<
   TFeatures extends TableFeatures,
   TData extends RowData = any,
-> = Omit<TableHelper_Core<TFeatures, TData>, 'tableCreator'> & {
+> = Omit<TableHelper_Core<TFeatures>, 'tableCreator'> & {
   useTable: <TSelected = {}>(
     tableOptions: Omit<
       TableOptionsWithReactiveData<TFeatures, TData>,
@@ -26,9 +26,9 @@ export function createTableHelper<
   TFeatures extends TableFeatures,
   TData extends RowData,
 >(
-  tableHelperOptions: TableHelperOptions<TFeatures, TData>,
+  tableHelperOptions: TableHelperOptions<TFeatures>,
 ): TableHelper<TFeatures, TData> {
-  const tableHelper = constructTableHelper(useTable, tableHelperOptions)
+  const tableHelper = constructTableHelper(useTable as any, tableHelperOptions)
   return {
     ...tableHelper,
     useTable: <TSelected = {}>(

packages/vue-table/src/useTable.ts

@@ -1,5 +1,8 @@
-import { isRef, unref, watch } from 'vue'
-import { constructTable } from '@tanstack/table-core'
+import { isRef, ref, unref, watch } from 'vue'
+import {
+  constructReactivityFeature,
+  constructTable,
+} from '@tanstack/table-core'
 import { useStore } from '@tanstack/vue-store'
 import { mergeProxy } from './merge-proxy'
 import type {
@@ -74,8 +77,23 @@ export function useTable<
   selector: (state: TableState<TFeatures>) => TSelected = () =>
     ({}) as TSelected,
 ): VueTable<TFeatures, TData, TSelected> {
+  const notifier = ref<number>(0)
+
+  const vueReactivityFeature = constructReactivityFeature({
+    stateNotifier: () => notifier.value,
+  })
   const IS_REACTIVE = isRef(tableOptions.data)
 
+  tableOptions = {
+    ...tableOptions,
+    _features: {
+      ...tableOptions._features,
+      vueReactivityFeature,
+    },
+  }
+
+  console.log(tableOptions)
+
   const statefulOptions = mergeProxy(
     IS_REACTIVE ? getOptionsWithReactiveData(tableOptions) : tableOptions,
     {
@@ -125,24 +143,18 @@ export function useTable<
     )
   }
 
-  /**
-   * Temp force reactivity to all state changes on every table.get* method
-   */
   const allState = useStore(table.store, (state) => state)
+  const allOptions = useStore(table.baseOptionsStore, (state) => state)
 
-  // Wrap all "get*" methods to make them reactive
-  // Access allState.value directly to create reactive dependency
-  Object.keys(table).forEach((key) => {
-    const value = (table as any)[key]
-    if (typeof value === 'function' && key.startsWith('get')) {
-      const originalMethod = value.bind(table)
-      ;(table as any)[key] = (...args: Array<any>) => {
-        // Access state to create reactive dependency
-        allState.value
-        return originalMethod(...args)
-      }
-    }
-  })
+  watch(
+    () => {
+      return { state: allState.value, options: allOptions.value }
+    },
+    () => {
+      notifier.value++
+    },
+    { immediate: true },
+  )
 
   table.Subscribe = function Subscribe<TSelected>(props: {
     selector: (state: TableState<TFeatures>) => TSelected