feat: svelte 5 adapter (#5403)

* updated svelte-table adapter to Svelte 5 * updated rollup-plugin-svelte * updated prettier plugin for svelte * updated the table implementation and applied formatting * updated flex-render documentation * Update packages/svelte-table/src/flex-render.svelte Co-authored-by: Simon H <[email protected]> * re-add tweak rollup config and uglify TContext in flex-render * updated svelte-basic example * revert svelte-table version * correction - using wrong content object for footer * removing unused imports from svelte's basic example * updated tanstack-table-example-svelte-column-groups to svelte 5 * updated svelte-table column order example * column-pinning example * svelte column visibility example * svelte filtering example * simplified column-visibility svelte example a tiny bit * svelte sorting example * remove comment from svelte sorting example * fix svelte flex-render ts types and docs * implement svelte-package * updated svelte package.json and corrected type error in flex render * prettier * removed rollup-plugin-svelte dependencies * inline the flex render component * fixed test errors * removed duplicate devdependencies in the svelte package * upgrade svelte versions in examples * disable knip because its annoying --------- Co-authored-by: Walker Lockard <[email protected]> Co-authored-by: Simon H <[email protected]> Co-authored-by: Kevin Vandy <[email protected]> Co-authored-by: Lachlan Collins <[email protected]>
TanStack · Jun 12, 2024 · 12d4157 · 12d4157
1 parent 00f0963
commit 12d4157
Show file tree

Hide file tree

Showing 37 changed files with 799 additions and 767 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,6 +25,7 @@ coverage
 .env.test.local
 .env.production.local
 .next
+.svelte-kit
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",
+    "svelte": "5.0.0-next.153",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"

diff --git a/examples/svelte/basic/src/App.svelte b/examples/svelte/basic/src/App.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
+  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
   import {
     createSvelteTable,
-    flexRender,
+    FlexRender,
     getCoreRowModel,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
   import './index.css'
 
   type Person = {
@@ -79,17 +78,10 @@
     },
   ]
 
-  const options = writable<TableOptions<Person>>({
+  let options: TableOptions<Person> = {
     data: defaultData,
     columns: defaultColumns,
     getCoreRowModel: getCoreRowModel(),
-  })
-
-  const rerender = () => {
-    options.update(options => ({
-      ...options,
-      data: defaultData,
-    }))
   }
 
   const table = createSvelteTable(options)
@@ -98,16 +90,14 @@
 <div class="p-2">
   <table>
     <thead>
-      {#each $table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
             <th>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -116,29 +106,28 @@
       {/each}
     </thead>
     <tbody>
-      {#each $table.getRowModel().rows as row}
+      {#each table.getRowModel().rows as row}
         <tr>
           {#each row.getVisibleCells() as cell}
             <td>
-              <svelte:component
-                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
               />
             </td>
           {/each}
         </tr>
       {/each}
     </tbody>
     <tfoot>
-      {#each $table.getFooterGroups() as footerGroup}
+      {#each table.getFooterGroups() as footerGroup}
         <tr>
           {#each footerGroup.headers as header}
             <th>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.footer,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.footer}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -148,5 +137,4 @@
     </tfoot>
   </table>
   <div class="h-4" />
-  <button on:click={() => rerender()} class="border p-2"> Rerender </button>
 </div>
diff --git a/examples/svelte/basic/src/main.ts b/examples/svelte/basic/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 

diff --git a/examples/svelte/column-groups/package.json b/examples/svelte/column-groups/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
+    "svelte": "5.0.0-next.153",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"

diff --git a/examples/svelte/column-groups/src/App.svelte b/examples/svelte/column-groups/src/App.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { writable } from 'svelte/store'
+  import type { ColumnDef } from '@tanstack/svelte-table'
   import {
     createSvelteTable,
-    flexRender,
+    FlexRender,
     getCoreRowModel,
   } from '@tanstack/svelte-table'
-  import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
   import './index.css'
 
   type Person = {
@@ -96,17 +95,10 @@
     },
   ]
 
-  const options = writable<TableOptions<Person>>({
+  const options = {
     data: defaultData,
     columns: defaultColumns,
     getCoreRowModel: getCoreRowModel(),
-  })
-
-  const rerender = () => {
-    options.update(options => ({
-      ...options,
-      data: defaultData,
-    }))
   }
 
   const table = createSvelteTable(options)
@@ -115,16 +107,14 @@
 <div class="p-2">
   <table>
     <thead>
-      {#each $table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup}
         <tr>
           {#each headerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -133,29 +123,28 @@
       {/each}
     </thead>
     <tbody>
-      {#each $table.getRowModel().rows as row}
+      {#each table.getRowModel().rows as row}
         <tr>
           {#each row.getVisibleCells() as cell}
             <td>
-              <svelte:component
-                this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
               />
             </td>
           {/each}
         </tr>
       {/each}
     </tbody>
     <tfoot>
-      {#each $table.getFooterGroups() as footerGroup}
+      {#each table.getFooterGroups() as footerGroup}
         <tr>
           {#each footerGroup.headers as header}
             <th colSpan={header.colSpan}>
               {#if !header.isPlaceholder}
-                <svelte:component
-                  this={flexRender(
-                    header.column.columnDef.footer,
-                    header.getContext()
-                  )}
+                <FlexRender
+                  content={header.column.columnDef.footer}
+                  context={header.getContext()}
                 />
               {/if}
             </th>
@@ -165,5 +154,4 @@
     </tfoot>
   </table>
   <div class="h-4" />
-  <button on:click={() => rerender()} class="border p-2"> Rerender </button>
 </div>
diff --git a/examples/svelte/column-groups/src/main.ts b/examples/svelte/column-groups/src/main.ts
@@ -1,7 +1,8 @@
 // @ts-ignore
 import App from './App.svelte'
+import { mount } from 'svelte'
 
-const app = new App({
+const app = mount(App, {
   target: document.getElementById('root')!,
 })
 

diff --git a/examples/svelte/column-ordering/package.json b/examples/svelte/column-ordering/package.json
@@ -12,10 +12,10 @@
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@rollup/plugin-replace": "^5.0.5",
+    "svelte": "5.0.0-next.153",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.0",
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^4.2.15",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"