WIP: fix(solid-table): adapt to Solid v2 beta reactivity model

examples/solid/basic-app-table/package.json

@@ -12,11 +12,12 @@
   "devDependencies": {
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@faker-js/faker": "^10.4.0",
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/basic-app-table/src/App.tsx

@@ -78,10 +78,10 @@ export function App() {
           <For each={table.getHeaderGroups()}>
             {(headerGroup) => (
               <tr>
-                <For each={headerGroup.headers}>
+                <For each={headerGroup().headers}>
                   {(header) => (
                     <th>
-                      <table.FlexRender header={header} />
+                      <table.FlexRender header={header()} />
                     </th>
                   )}
                 </For>
@@ -93,10 +93,10 @@ export function App() {
           <For each={table.getRowModel().rows}>
             {(row) => (
               <tr>
-                <For each={row.getAllCells()}>
+                <For each={row().getAllCells()}>
                   {(cell) => (
                     <td>
-                      <table.FlexRender cell={cell} />
+                      <table.FlexRender cell={cell()} />
                     </td>
                   )}
                 </For>
@@ -108,10 +108,10 @@ export function App() {
           <For each={table.getFooterGroups()}>
             {(footerGroup) => (
               <tr>
-                <For each={footerGroup.headers}>
+                <For each={footerGroup().headers}>
                   {(header) => (
                     <th>
-                      <table.FlexRender footer={header} />
+                      <table.FlexRender footer={header()} />
                     </th>
                   )}
                 </For>

examples/solid/basic-app-table/src/index.tsx

@@ -1,4 +1,4 @@
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import { App } from './App'
 

examples/solid/basic-external-atoms/package.json

@@ -13,11 +13,12 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
-    "@tanstack/solid-store": "^0.11.0",
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10",
+    "@tanstack/store": "^0.11.0"
   }
 }

examples/solid/basic-external-atoms/src/App.tsx

@@ -9,7 +9,8 @@ import {
   sortFns,
   tableFeatures,
 } from '@tanstack/solid-table'
-import { createAtom, useSelector } from '@tanstack/solid-store'
+import { createAtom } from '@tanstack/store'
+import { useSelector } from './useSelector'
 import { For, createSignal } from 'solid-js'
 import { makeData } from './makeData'
 import type { Person } from './makeData'

examples/solid/basic-external-atoms/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/basic-external-atoms/src/useSelector.ts

@@ -0,0 +1,36 @@
+import { createSignal, onCleanup } from 'solid-js'
+import type { Accessor } from 'solid-js'
+import type { Subscribable } from '@tanstack/store'
+
+export interface UseSelectorOptions<TSelected> {
+  compare?: (a: TSelected, b: TSelected) => boolean
+}
+
+const defaultCompare = <T>(a: T, b: T): boolean => a === b
+
+/**
+ * Solid v2 read hook for TanStack Store atoms.
+ *
+ * Inlined locally instead of consuming `@tanstack/solid-store`, whose
+ * published build imports `solid-js/web` — a Solid v1 path that doesn't
+ * exist in Solid v2.
+ */
+export function useSelector<TSource, TSelected = TSource>(
+  source: Subscribable<TSource> & { get: () => TSource },
+  selector: (snapshot: TSource) => TSelected = (value) =>
+    value as unknown as TSelected,
+  options?: UseSelectorOptions<TSelected>,
+): Accessor<TSelected> {
+  const compare = options?.compare ?? defaultCompare
+  const [signal, setSignal] = createSignal(
+    selector(source.get()) as Exclude<TSelected, Function>,
+    { equals: compare },
+  )
+  const unsubscribe = source.subscribe((snapshot: TSource) => {
+    setSignal(() => selector(snapshot))
+  }).unsubscribe
+  onCleanup(() => {
+    unsubscribe()
+  })
+  return signal
+}

examples/solid/basic-external-state/package.json

@@ -13,10 +13,11 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/basic-external-state/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/basic-use-table/package.json

@@ -12,10 +12,11 @@
   "devDependencies": {
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/basic-use-table/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-groups/package.json

@@ -12,11 +12,12 @@
   "devDependencies": {
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@faker-js/faker": "^10.4.0",
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-groups/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-ordering/package.json

@@ -13,10 +13,11 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-ordering/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-pinning-split/package.json

@@ -13,10 +13,11 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-pinning-split/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-pinning-sticky/package.json

@@ -13,10 +13,11 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-pinning-sticky/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-pinning/package.json

@@ -13,10 +13,11 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-pinning/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-resizing-performant/package.json

@@ -13,10 +13,11 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-resizing-performant/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-resizing/package.json

@@ -12,11 +12,12 @@
   "devDependencies": {
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@faker-js/faker": "^10.4.0",
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-resizing/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-sizing/package.json

@@ -12,11 +12,12 @@
   "devDependencies": {
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@faker-js/faker": "^10.4.0",
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-sizing/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/column-visibility/package.json

@@ -12,11 +12,12 @@
   "devDependencies": {
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@faker-js/faker": "^10.4.0",
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/column-visibility/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/composable-tables/package.json

@@ -12,10 +12,11 @@
   "devDependencies": {
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }

examples/solid/composable-tables/src/index.tsx

@@ -1,5 +1,5 @@
 /* @refresh reload */
-import { render } from 'solid-js/web'
+import { render } from '@solidjs/web'
 import './index.css'
 import App from './App'
 

examples/solid/expanding/package.json

@@ -13,10 +13,11 @@
     "@faker-js/faker": "^10.4.0",
     "typescript": "6.0.3",
     "vite": "^8.0.10",
-    "vite-plugin-solid": "^2.11.12"
+    "vite-plugin-solid": "^3.0.0-next.5"
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.42",
-    "solid-js": "^1.9.12"
+    "solid-js": "2.0.0-beta.10",
+    "@solidjs/web": "2.0.0-beta.10"
   }
 }