@tanstack/svelte-table 9.0.0-alpha.32 → 9.0.0-alpha.34

package/dist/createTable.svelte.d.ts

@@ -1,24 +1,5 @@
-import type { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
-import type { Snippet } from 'svelte';
+import type { RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
 export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
-    /**
-     * A Svelte component that allows you to subscribe to the table state.
-     *
-     * This is useful for opting into state subscriptions for specific parts of the table state.
-     *
-     * @example
-     * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-     *   {(state) => (
-     *     <tr>
-     *       // render the row
-     *     </tr>
-     *   )}
-     * </table.Subscribe>
-     */
-    Subscribe: <TSelected>(props: {
-        selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-        children: ((state: Readonly<TSelected>) => Snippet) | Snippet;
-    }) => any;
     /**
      * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `createTable`.
      *

package/dist/createTable.svelte.js

@@ -1,5 +1,5 @@
 import { constructReactivityFeature, constructTable, } from '@tanstack/table-core';
-import { useStore } from '@tanstack/svelte-store';
+import { useSelector } from '@tanstack/svelte-store';
 import { untrack } from 'svelte';
 import { mergeObjects } from './merge-objects';
 export function createTable(tableOptions, selector = () => ({})) {
@@ -24,9 +24,9 @@ export function createTable(tableOptions, selector = () => ({})) {
     }, mergedOptions);
     // 5. Construct table
     const table = constructTable(resolvedOptions);
-    // 6. Subscribe to all state and options via useStore
-    const allState = useStore(table.store, (state) => state);
-    const allOptions = useStore(table.optionsStore, (options) => options);
+    // 6. Subscribe to all state and options via useSelector
+    const allState = useSelector(table.store, (state) => state);
+    const allOptions = useSelector(table.optionsStore, (options) => options);
     // 7. Sync store changes -> notifier.
     // Use $effect.pre so this runs before DOM updates (like Solid's createComputed).
     // Use untrack for the write so the effect only depends on allState/allOptions,
@@ -61,16 +61,8 @@ export function createTable(tableOptions, selector = () => ({})) {
             });
         });
     });
-    // 9. Subscribe component
-    table.Subscribe = function Subscribe(props) {
-        const selected = useStore(table.store, props.selector);
-        if (typeof props.children === 'function') {
-            return props.children(selected.current);
-        }
-        return props.children;
-    };
-    // 10. State selector
-    const stateStore = useStore(table.store, selector);
+    // 9. State selector
+    const stateStore = useSelector(table.store, selector);
     Object.defineProperty(table, 'state', {
         get() {
             return stateStore.current;

package/dist/index.d.ts

@@ -5,5 +5,5 @@ export { createTableHook } from './createTableHook.svelte';
 export type { AppCellContext, AppColumnHelper, AppHeaderContext, AppSvelteTable, CreateTableHookOptions, } from './createTableHook.svelte';
 export { createTableState } from './createTableState.svelte';
 export { default as FlexRender } from './FlexRender.svelte';
-export { default as Subscribe } from './Subscribe.svelte';
+export { subscribeTable } from './subscribe';
 export { renderComponent, renderSnippet } from './render-component';

package/dist/index.js

@@ -3,5 +3,5 @@ export { createTable } from './createTable.svelte';
 export { createTableHook } from './createTableHook.svelte';
 export { createTableState } from './createTableState.svelte';
 export { default as FlexRender } from './FlexRender.svelte';
-export { default as Subscribe } from './Subscribe.svelte';
+export { subscribeTable } from './subscribe';
 export { renderComponent, renderSnippet } from './render-component';

package/dist/static-functions.d.ts

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/static-functions';

package/dist/static-functions.js

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/static-functions';

package/dist/subscribe.d.ts

@@ -0,0 +1,9 @@
+import type { RowData, Table, TableFeatures, TableState } from '@tanstack/table-core';
+/**
+ * Fine-grained subscription to `table.store` using `useSelector` with shallow
+ * comparison. Call from `<script>` so the selector is contextually typed
+ * (same inference model as React’s `Subscribe` / `table.Subscribe`).
+ */
+export declare function subscribeTable<TFeatures extends TableFeatures, TData extends RowData, TSelected>(table: Table<TFeatures, TData>, selector: (state: TableState<TFeatures>) => TSelected): {
+    readonly current: TSelected;
+};

package/dist/subscribe.js

@@ -0,0 +1,9 @@
+import { shallow, useSelector } from '@tanstack/svelte-store';
+/**
+ * Fine-grained subscription to `table.store` using `useSelector` with shallow
+ * comparison. Call from `<script>` so the selector is contextually typed
+ * (same inference model as React’s `Subscribe` / `table.Subscribe`).
+ */
+export function subscribeTable(table, selector) {
+    return useSelector(table.store, selector, { compare: shallow });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.32",
+  "version": "9.0.0-alpha.34",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -30,6 +30,11 @@
       "svelte": "./dist/index.js",
       "import": "./dist/index.js"
     },
+    "./static-functions": {
+      "types": "./dist/static-functions.d.ts",
+      "svelte": "./dist/static-functions.js",
+      "import": "./dist/static-functions.js"
+    },
     "./package.json": "./package.json"
   },
   "engines": {
@@ -40,14 +45,14 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/svelte-store": "^0.10.3",
-    "@tanstack/table-core": "9.0.0-alpha.32"
+    "@tanstack/svelte-store": "^0.12.0",
+    "@tanstack/table-core": "9.0.0-alpha.34"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "eslint-plugin-svelte": "^3.17.0",
-    "svelte": "^5.55.2",
+    "svelte": "^5.55.4",
     "svelte-check": "^4.4.6"
   },
   "peerDependencies": {

package/src/createTable.svelte.ts

@@ -2,42 +2,22 @@ import {
   constructReactivityFeature,
   constructTable,
 } from '@tanstack/table-core'
-import { useStore } from '@tanstack/svelte-store'
+import { shallow, useSelector } from '@tanstack/svelte-store'
 import { untrack } from 'svelte'
 import { mergeObjects } from './merge-objects'
 import type {
-  NoInfer,
   RowData,
   Table,
   TableFeatures,
   TableOptions,
   TableState,
 } from '@tanstack/table-core'
-import type { Snippet } from 'svelte'
 
 export type SvelteTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
   TSelected = {},
 > = Table<TFeatures, TData> & {
-  /**
-   * A Svelte component that allows you to subscribe to the table state.
-   *
-   * This is useful for opting into state subscriptions for specific parts of the table state.
-   *
-   * @example
-   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
-   *   {(state) => (
-   *     <tr>
-   *       // render the row
-   *     </tr>
-   *   )}
-   * </table.Subscribe>
-   */
-  Subscribe: <TSelected>(props: {
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-    children: ((state: Readonly<TSelected>) => Snippet) | Snippet
-  }) => any
   /**
    * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `createTable`.
    *
@@ -94,9 +74,9 @@ export function createTable<
     TSelected
   >
 
-  // 6. Subscribe to all state and options via useStore
-  const allState = useStore(table.store, (state) => state)
-  const allOptions = useStore(table.optionsStore, (options) => options)
+  // 6. Subscribe to all state and options via useSelector
+  const allState = useSelector(table.store, (state) => state)
+  const allOptions = useSelector(table.optionsStore, (options) => options)
 
   // 7. Sync store changes -> notifier.
   // Use $effect.pre so this runs before DOM updates (like Solid's createComputed).
@@ -138,20 +118,8 @@ export function createTable<
     })
   })
 
-  // 9. Subscribe component
-  table.Subscribe = function Subscribe<TSel>(props: {
-    selector: (state: TableState<TFeatures>) => TSel
-    children: ((state: Readonly<TSel>) => Snippet) | Snippet
-  }): any {
-    const selected = useStore(table.store, props.selector)
-    if (typeof props.children === 'function') {
-      return props.children(selected.current)
-    }
-    return props.children
-  }
-
-  // 10. State selector
-  const stateStore = useStore(table.store, selector)
+  // 9. State selector
+  const stateStore = useSelector(table.store, selector)
 
   Object.defineProperty(table, 'state', {
     get() {

package/src/index.ts

@@ -12,5 +12,5 @@ export type {
 } from './createTableHook.svelte'
 export { createTableState } from './createTableState.svelte'
 export { default as FlexRender } from './FlexRender.svelte'
-export { default as Subscribe } from './Subscribe.svelte'
+export { subscribeTable } from './subscribe'
 export { renderComponent, renderSnippet } from './render-component'

package/src/static-functions.ts

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/static-functions'

package/src/subscribe.ts

@@ -0,0 +1,23 @@
+import { shallow, useSelector } from '@tanstack/svelte-store'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableState,
+} from '@tanstack/table-core'
+
+/**
+ * Fine-grained subscription to `table.store` using `useSelector` with shallow
+ * comparison. Call from `<script>` so the selector is contextually typed
+ * (same inference model as React’s `Subscribe` / `table.Subscribe`).
+ */
+export function subscribeTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected,
+>(
+  table: Table<TFeatures, TData>,
+  selector: (state: TableState<TFeatures>) => TSelected,
+) {
+  return useSelector(table.store, selector, { compare: shallow })
+}

package/dist/Subscribe.svelte

@@ -1,45 +0,0 @@
-<script
-  lang="ts"
-  generics="TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown"
->
-  import type {
-    NoInfer,
-    RowData,
-    TableFeatures,
-    TableState,
-  } from '@tanstack/table-core'
-  import type { Snippet } from 'svelte'
-  import type { SvelteTable } from './createTable.svelte'
-
-  type Props<
-    TFeatures extends TableFeatures,
-    TData extends RowData,
-    TSelected,
-  > = {
-    /**
-     * A function that selects a portion of the table state to subscribe to.
-     * @param state - The full table state
-     * @returns The selected portion of state
-     */
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-    /**
-     * A Svelte snippet that receives the selected state and renders content.
-     * The snippet will be called with the selected state whenever it changes.
-     */
-    children: Snippet<[state: Readonly<TSelected>]>
-    /**
-     * The table instance to subscribe to
-     */
-    table: SvelteTable<TFeatures, TData, unknown>
-  }
-
-  let { table, selector, children }: Props<TFeatures, TData, TSelected> =
-    $props()
-</script>
-
-<!--
-  Access table.store.state in the template (a reactive context).
-  The constructReactivityFeature interceptor makes this trigger
-  the $state-based notifier, so Svelte tracks it automatically.
--->
-{@render children(selector(table.store.state as TableState<TFeatures>))}

package/dist/Subscribe.svelte.d.ts

@@ -1,44 +0,0 @@
-import type { NoInfer, RowData, TableFeatures, TableState } from '@tanstack/table-core';
-import type { Snippet } from 'svelte';
-import type { SvelteTable } from './createTable.svelte';
-type Props<TFeatures extends TableFeatures, TData extends RowData, TSelected> = {
-    /**
-     * A function that selects a portion of the table state to subscribe to.
-     * @param state - The full table state
-     * @returns The selected portion of state
-     */
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected;
-    /**
-     * A Svelte snippet that receives the selected state and renders content.
-     * The snippet will be called with the selected state whenever it changes.
-     */
-    children: Snippet<[state: Readonly<TSelected>]>;
-    /**
-     * The table instance to subscribe to
-     */
-    table: SvelteTable<TFeatures, TData, unknown>;
-};
-declare function $$render<TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown>(): {
-    props: Props<TFeatures, TData, TSelected>;
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown> {
-    props(): ReturnType<typeof $$render<TFeatures, TData, TSelected>>['props'];
-    events(): ReturnType<typeof $$render<TFeatures, TData, TSelected>>['events'];
-    slots(): ReturnType<typeof $$render<TFeatures, TData, TSelected>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['props']>, ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['events']>, ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['bindings']>;
-    } & ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['exports']>;
-    <TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['props']> & {}): ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const Subscribe: $$IsomorphicComponent;
-type Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown> = InstanceType<typeof Subscribe<TFeatures, TData, TSelected>>;
-export default Subscribe;

package/src/Subscribe.svelte

@@ -1,45 +0,0 @@
-<script
-  lang="ts"
-  generics="TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown"
->
-  import type {
-    NoInfer,
-    RowData,
-    TableFeatures,
-    TableState,
-  } from '@tanstack/table-core'
-  import type { Snippet } from 'svelte'
-  import type { SvelteTable } from './createTable.svelte'
-
-  type Props<
-    TFeatures extends TableFeatures,
-    TData extends RowData,
-    TSelected,
-  > = {
-    /**
-     * A function that selects a portion of the table state to subscribe to.
-     * @param state - The full table state
-     * @returns The selected portion of state
-     */
-    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
-    /**
-     * A Svelte snippet that receives the selected state and renders content.
-     * The snippet will be called with the selected state whenever it changes.
-     */
-    children: Snippet<[state: Readonly<TSelected>]>
-    /**
-     * The table instance to subscribe to
-     */
-    table: SvelteTable<TFeatures, TData, unknown>
-  }
-
-  let { table, selector, children }: Props<TFeatures, TData, TSelected> =
-    $props()
-</script>
-
-<!--
-  Access table.store.state in the template (a reactive context).
-  The constructReactivityFeature interceptor makes this trigger
-  the $state-based notifier, so Svelte tracks it automatically.
--->
-{@render children(selector(table.store.state as TableState<TFeatures>))}