feat: svelte 5 adapter

package.json

@@ -65,17 +65,17 @@
     "knip": "^4.6.0",
     "nx": "^17.2.8",
     "prettier": "^4.0.0-alpha.8",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-svelte": "^3.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "rollup": "^4.9.5",
     "rollup-plugin-size": "^0.3.1",
-    "rollup-plugin-svelte": "^7.1.6",
+    "rollup-plugin-svelte": "^7.2.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sherif": "^0.7.0",
     "size-limit": "^11.0.2",
-    "svelte": "^4.2.8",
+    "svelte": "^5.0.0-next",
     "typescript": "5.3.3",
     "vitest": "^1.2.0"
   }

packages/svelte-table/package.json

@@ -51,6 +51,6 @@
     "@tanstack/table-core": "workspace:*"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^3.49.0"
+    "svelte": "^5.0.0-next"
   }
 }

packages/svelte-table/rollup.config.mjs

@@ -9,15 +9,9 @@ export default defineConfig(
     jsName: 'SvelteTable',
     outputFile: 'index',
     entryFile: 'src/index.ts',
-    external: [
-      'svelte',
-      'svelte/internal',
-      'svelte/store',
-      '@tanstack/table-core',
-    ],
+    external: ['svelte', 'svelte/store', '@tanstack/table-core'],
     globals: {
       svelte: 'Svelte',
-      'svelte/internal': 'SvelteInternal',
       'svelte/store': 'SvelteStore',
     },
   })

packages/svelte-table/src/flex-render.svelte

@@ -0,0 +1,91 @@
+<!--
+@component
+A Svelte component that renders a cell or header, according to what was specified in the column definition.
+
+
+```svelte
+	<script>
+		import { FlexRender, createSvelteTable, renderComponent } from '@tanstack/svelte-table';
+		import ColorCell from './ColorCell.svelte';
+
+		const columns = [
+			{
+				// The header will be `name`, and the cell will be the accessed value.
+				accessor: 'name',
+			}, 
+			{
+				// The header will be `Age`, and the cell will be the accessed value plus the string ` years old`.
+				accessor: 'age',
+				header: 'Age',
+				cell(props) => props.getValue() + ' years old'
+			}, 
+			{
+				// The header will be `Favorite Color`, and the cell will be a dynamically rendered Svelte component.
+				accessor: 'favoriteColor',
+				header: 'Favorite Color',
+				cell: (props) => renderComponent(ColorCell, { color: props.getValue() })
+			}
+		];
+
+		const table = createSvelteTable({ columns, ...restOptions })
+	</script>
+
+	<table>
+		<thead>
+			{#each table.getHeaderGroups() as headerGroup}
+				<tr>
+					{#each headerGroup.headers as header}
+						<th colspan={header.colSpan}>
+							<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+						</th>
+					{/each}
+				</tr>
+			{/each}
+		</thead>
+		<tbody>
+			{#each table.getRowModel().rows as row}
+				<tr>
+					{#each row.getVisibleCells() as cell}
+						<td>
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+```
+-->
+
+<script
+  lang="ts"
+  generics="TData, TValue, TContext extends object = HeaderOrCellContext<TData, TValue>"
+>
+  import type { ColumnDefTemplate } from '@tanstack/table-core'
+  import { RenderComponentConfig } from './render-component'
+  import type { HeaderOrCellContext } from './types'
+
+  type Props = {
+    /** The cell or header field of the current cell's column definition. */
+    content: ColumnDefTemplate<TContext> | undefined
+    /** The result of the `getContext()` function of the header or cell */
+    context: TContext
+  }
+
+  let { content, context } = $props<Props>()
+</script>
+
+{#snippet componentCell()}
+  {#if typeof content === 'string'}
+    {content}
+  {:else if content instanceof Function}
+    {@const result = content(context)}
+    {#if result instanceof RenderComponentConfig}
+      <svelte:component this={result.component} {...result.props} />
+    {:else}
+      {result}
+    {/if}
+  {/if}
+{/snippet}
+
+{@render componentCell()}

packages/svelte-table/src/index.ts

@@ -1,125 +1,4 @@
-import {
-  RowData,
-  createTable,
-  TableOptions,
-  TableOptionsResolved,
-} from '@tanstack/table-core'
-import Placeholder from './placeholder'
-import type { ComponentType } from 'svelte'
-import { SvelteComponent } from 'svelte/internal'
-import { readable, writable, derived, Readable, get } from 'svelte/store'
-import { renderComponent } from './render-component'
-
-export { renderComponent } from './render-component'
-
 export * from '@tanstack/table-core'
-
-function isSvelteServerComponent(component: any) {
-  return (
-    typeof component === 'object' &&
-    typeof component.$$render === 'function' &&
-    typeof component.render === 'function'
-  )
-}
-
-function isSvelteClientComponent(component: any) {
-  let isHMR = '__SVELTE_HMR' in window
-
-  return (
-    component.prototype instanceof SvelteComponent ||
-    (isHMR &&
-      component.name?.startsWith('Proxy<') &&
-      component.name?.endsWith('>'))
-  )
-}
-
-function isSvelteComponent(component: any) {
-  if (typeof document === 'undefined') {
-    return isSvelteServerComponent(component)
-  } else {
-    return isSvelteClientComponent(component)
-  }
-}
-
-function wrapInPlaceholder(content: any) {
-  return renderComponent(Placeholder, { content })
-}
-
-export function flexRender(component: any, props: any): ComponentType | null {
-  if (!component) return null
-
-  if (isSvelteComponent(component)) {
-    return renderComponent(component, props)
-  }
-
-  if (typeof component === 'function') {
-    const result = component(props)
-    if (result === null || result === undefined) return null
-
-    if (isSvelteComponent(result)) {
-      return renderComponent(result, props)
-    }
-
-    return wrapInPlaceholder(result)
-  }
-
-  return wrapInPlaceholder(component)
-}
-
-type ReadableOrVal<T> = T | Readable<T>
-
-export function createSvelteTable<TData extends RowData>(
-  options: ReadableOrVal<TableOptions<TData>>
-) {
-  let optionsStore: Readable<TableOptions<TData>>
-
-  if ('subscribe' in options) {
-    optionsStore = options
-  } else {
-    optionsStore = readable(options)
-  }
-
-  let resolvedOptions: TableOptionsResolved<TData> = {
-    state: {}, // Dummy state
-    onStateChange: () => {}, // noop
-    renderFallbackValue: null,
-    ...get(optionsStore),
-  }
-
-  let table = createTable(resolvedOptions)
-
-  let stateStore = writable(/** @type {number} */ table.initialState)
-  // combine stores
-  let stateOptionsStore = derived([stateStore, optionsStore], s => s)
-  const tableReadable = readable(table, function start(set) {
-    const unsubscribe = stateOptionsStore.subscribe(([state, options]) => {
-      table.setOptions(prev => {
-        return {
-          ...prev,
-          ...options,
-          state: { ...state, ...options.state },
-          // Similarly, we'll maintain both our internal state and any user-provided
-          // state.
-          onStateChange: updater => {
-            if (updater instanceof Function) {
-              stateStore.update(updater)
-            } else {
-              stateStore.set(updater)
-            }
-
-            resolvedOptions.onStateChange?.(updater)
-          },
-        }
-      })
-
-      // it didn't seem to rerender without setting the table
-      set(table)
-    })
-
-    return function stop() {
-      unsubscribe()
-    }
-  })
-
-  return tableReadable
-}
+export { default as FlexRender } from './flex-render.svelte'
+export { renderComponent } from './render-component'
+export { createSvelteTable } from './table.svelte'