fix: useTableContext hmr and type fixes (#6355)

* fix: useTableContext hmr and type fixes

* tselected

* regen docs

Author: KevinVandy

docs/config.json

@@ -110,6 +110,7 @@
           "children": [
             { "label": "Table State", "to": "framework/react/guide/table-state" },
             { "label": "Composable Tables (createTableHook)", "to": "framework/react/guide/composable-tables" },
+            { "label": "Table Context", "to": "framework/react/guide/table-context" },
             { "label": "Custom Plugins", "to": "framework/react/guide/custom-features" }
           ]
         },
@@ -118,6 +119,7 @@
           "children": [
             { "label": "Table State", "to": "framework/preact/guide/table-state" },
             { "label": "Composable Tables (createTableHook)", "to": "framework/preact/guide/composable-tables" },
+            { "label": "Table Context", "to": "framework/preact/guide/table-context" },
             { "label": "Custom Plugins", "to": "framework/preact/guide/custom-features" }
           ]
         },

docs/framework/angular/reference/functions/injectTable.md

@@ -9,7 +9,7 @@ title: injectTable
 function injectTable<TFeatures, TData>(options): AngularTable<TFeatures, TData>;
 ```
 
-Defined in: [packages/angular-table/src/injectTable.ts:101](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L101)
+Defined in: [packages/angular-table/src/injectTable.ts:93](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L93)
 
 Creates and returns an Angular-reactive table instance.
 

docs/framework/angular/reference/type-aliases/AngularTable.md

@@ -6,26 +6,11 @@ title: AngularTable
 # Type Alias: AngularTable\<TFeatures, TData\>
 
 ```ts
-type AngularTable<TFeatures, TData> = Table<TFeatures, TData> & object;
+type AngularTable<TFeatures, TData> = Table<TFeatures, TData>;
 ```
 
 Defined in: [packages/angular-table/src/injectTable.ts:32](https://github.com/TanStack/table/blob/main/packages/angular-table/src/injectTable.ts#L32)
 
-## Type Declaration
-
-### ~~store~~
-
-```ts
-readonly store: Table<TFeatures, TData>["store"];
-```
-
-#### Deprecated
-
-Prefer `table.atoms.<slice>.get()` for template/render reads
-of a specific state slice, or Angular computed values around explicit
-selectors. `table.store.state` is a current-value snapshot and is easy to
-misuse in render code.
-
 ## Type Parameters
 
 ### TFeatures

docs/framework/angular/reference/type-aliases/CreateTableHookResult.md

@@ -128,7 +128,7 @@ Defined in: [packages/angular-table/src/helpers/createTableHook.ts:327](https://
 ### injectTableCellContext()
 
 ```ts
-injectTableCellContext: <TValue, TRowData>() => Signal<Cell<TFeatures, TRowData, TValue>>;
+injectTableCellContext: <TValue, TRowData>() => Signal<Cell<TFeatures, TRowData, TValue> & TCellComponents>;
 ```
 
 Defined in: [packages/angular-table/src/helpers/createTableHook.ts:323](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L323)
@@ -145,14 +145,14 @@ Defined in: [packages/angular-table/src/helpers/createTableHook.ts:323](https://
 
 #### Returns
 
-`Signal`\<`Cell`\<`TFeatures`, `TRowData`, `TValue`\>\>
+`Signal`\<`Cell`\<`TFeatures`, `TRowData`, `TValue`\> & `TCellComponents`\>
 
 ***
 
 ### injectTableContext()
 
 ```ts
-injectTableContext: <TData>() => Signal<AngularTable<TFeatures, TData>>;
+injectTableContext: <TData>() => Signal<AngularTable<TFeatures, TData> & TTableComponents>;
 ```
 
 Defined in: [packages/angular-table/src/helpers/createTableHook.ts:316](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L316)
@@ -165,14 +165,14 @@ Defined in: [packages/angular-table/src/helpers/createTableHook.ts:316](https://
 
 #### Returns
 
-`Signal`\<[`AngularTable`](AngularTable.md)\<`TFeatures`, `TData`\>\>
+`Signal`\<[`AngularTable`](AngularTable.md)\<`TFeatures`, `TData`\> & `TTableComponents`\>
 
 ***
 
 ### injectTableHeaderContext()
 
 ```ts
-injectTableHeaderContext: <TValue, TRowData>() => Signal<Header<TFeatures, TRowData, TValue>>;
+injectTableHeaderContext: <TValue, TRowData>() => Signal<Header<TFeatures, TRowData, TValue> & THeaderComponents>;
 ```
 
 Defined in: [packages/angular-table/src/helpers/createTableHook.ts:319](https://github.com/TanStack/table/blob/main/packages/angular-table/src/helpers/createTableHook.ts#L319)
@@ -189,4 +189,4 @@ Defined in: [packages/angular-table/src/helpers/createTableHook.ts:319](https://
 
 #### Returns
 
-`Signal`\<`Header`\<`TFeatures`, `TRowData`, `TValue`\>\>
+`Signal`\<`Header`\<`TFeatures`, `TRowData`, `TValue`\> & `THeaderComponents`\>

docs/framework/lit/reference/functions/createTableHook.md

@@ -6,10 +6,10 @@ title: createTableHook
 # Function: createTableHook()
 
 ```ts
-function createTableHook<TFeatures, TTableComponents, TCellComponents, THeaderComponents>(__namedParameters): object;
+function createTableHook<TFeatures, TTableComponents, TCellComponents, THeaderComponents>(__namedParameters): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
 ```
 
-Defined in: [createTableHook.ts:433](https://github.com/TanStack/table/blob/main/packages/lit-table/src/createTableHook.ts#L433)
+Defined in: [createTableHook.ts:503](https://github.com/TanStack/table/blob/main/packages/lit-table/src/createTableHook.ts#L503)
 
 Creates a custom table hook with pre-bound components for composition.
 
@@ -46,247 +46,7 @@ This is the table equivalent of TanStack Form's `createFormHook`. It allows you
 
 ## Returns
 
-### appFeatures
-
-```ts
-appFeatures: TFeatures;
-```
-
-### createAppColumnHelper()
-
-```ts
-createAppColumnHelper: <TData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
-```
-
-Create a column helper pre-bound to the features and components configured in this table hook.
-The cell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).
-
-#### Type Parameters
-
-##### TData
-
-`TData` *extends* `RowData`
-
-#### Returns
-
-[`AppColumnHelper`](../type-aliases/AppColumnHelper.md)\<`TFeatures`, `TData`, `TCellComponents`, `THeaderComponents`\>
-
-#### Example
-
-```ts
-const columnHelper = createAppColumnHelper<Person>()
-
-const columns = [
-  columnHelper.accessor('firstName', {
-    header: 'First Name',
-    cell: ({ cell }) => cell.FlexRender(), // cell has pre-bound components!
-  }),
-  columnHelper.accessor('age', {
-    header: 'Age',
-    cell: ({ cell }) => cell.NumberCell(),
-  }),
-]
-```
-
-### useAppTable()
-
-```ts
-useAppTable: <TData, TSelected>(host, tableOptions, selector?) => object;
-```
-
-Enhanced table hook that returns a controller-like object with a `table()` method.
-The returned table has App wrapper functions and pre-bound tableComponents
-attached directly to the table object.
-
-Default options from createTableHook are automatically merged with
-the options passed here. Options passed here take precedence.
-
-TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
-
-#### Type Parameters
-
-##### TData
-
-`TData` *extends* `RowData`
-
-##### TSelected
-
-`TSelected` = `TableState`\<`TFeatures`\>
-
-#### Parameters
-
-##### host
-
-`ReactiveControllerHost` & `HTMLElement`
-
-##### tableOptions
-
-`Omit`\<`TableOptions`\<`TFeatures`, `TData`\>, `"features"`\>
-
-##### selector?
-
-(`state`) => `TSelected`
-
-#### Returns
-
-`object`
-
-##### table()
-
-```ts
-table: () => AppLitTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
-```
-
-###### Returns
-
-[`AppLitTable`](../type-aliases/AppLitTable.md)\<`TFeatures`, `TData`, `TSelected`, `TTableComponents`, `TCellComponents`, `THeaderComponents`\>
-
-#### Example
-
-```ts
-@customElement('my-table')
-class MyTable extends LitElement {
-  private appTable = useAppTable(this, {
-    columns,
-    data: this.data,
-  })
-
-  protected render() {
-    const table = this.appTable.table()
-    return html`...`
-  }
-}
-```
-
-### useCellContext()
-
-```ts
-useCellContext: <TValue>(host) => ContextConsumer<Context<symbol, Cell<TFeatures, any, TValue>>, ReactiveControllerHost & HTMLElement>;
-```
-
-Access the cell instance from within a custom element that is a descendant
-of an element providing cell context.
-Uses `@lit/context` ContextConsumer to retrieve the cell.
-TFeatures is already known from the createTableHook call.
-
-#### Type Parameters
-
-##### TValue
-
-`TValue` *extends* `unknown` = `unknown`
-
-#### Parameters
-
-##### host
-
-`ReactiveControllerHost` & `HTMLElement`
-
-#### Returns
-
-`ContextConsumer`\<`Context`\<`symbol`, `Cell`\<`TFeatures`, `any`, `TValue`\>\>, `ReactiveControllerHost` & `HTMLElement`\>
-
-#### Example
-
-```ts
-@customElement('text-cell')
-class TextCell extends LitElement {
-  private _cell = useCellContext(this)
-
-  protected render() {
-    const cell = this._cell.value
-    if (!cell) return html``
-    return html`<span>${cell.getValue()}</span>`
-  }
-}
-```
-
-### useHeaderContext()
-
-```ts
-useHeaderContext: <TValue>(host) => ContextConsumer<Context<symbol, Header<TFeatures, any, TValue>>, ReactiveControllerHost & HTMLElement>;
-```
-
-Access the header instance from within a custom element that is a descendant
-of an element providing header context.
-Uses `@lit/context` ContextConsumer to retrieve the header.
-TFeatures is already known from the createTableHook call.
-
-#### Type Parameters
-
-##### TValue
-
-`TValue` *extends* `unknown` = `unknown`
-
-#### Parameters
-
-##### host
-
-`ReactiveControllerHost` & `HTMLElement`
-
-#### Returns
-
-`ContextConsumer`\<`Context`\<`symbol`, `Header`\<`TFeatures`, `any`, `TValue`\>\>, `ReactiveControllerHost` & `HTMLElement`\>
-
-#### Example
-
-```ts
-@customElement('sort-indicator')
-class SortIndicator extends LitElement {
-  private _header = useHeaderContext(this)
-
-  protected render() {
-    const header = this._header.value
-    if (!header) return html``
-    const sorted = header.column.getIsSorted()
-    return html`${sorted === 'asc' ? '🔼' : sorted === 'desc' ? '🔽' : ''}`
-  }
-}
-```
-
-### useTableContext()
-
-```ts
-useTableContext: <TData>(host) => ContextConsumer<Context<symbol, LitTable<TFeatures, TData, any>>, ReactiveControllerHost & HTMLElement>;
-```
-
-Access the table instance from within a custom element that is a descendant
-of the element using `useAppTable`.
-Uses `@lit/context` ContextConsumer to retrieve the table from the nearest ancestor provider.
-TFeatures is already known from the createTableHook call.
-
-#### Type Parameters
-
-##### TData
-
-`TData` *extends* `RowData` = `RowData`
-
-#### Parameters
-
-##### host
-
-`ReactiveControllerHost` & `HTMLElement`
-
-#### Returns
-
-`ContextConsumer`\<`Context`\<`symbol`, [`LitTable`](../type-aliases/LitTable.md)\<`TFeatures`, `TData`, `any`\>\>, `ReactiveControllerHost` & `HTMLElement`\>
-
-#### Example
-
-```ts
-@customElement('pagination-controls')
-class PaginationControls extends LitElement {
-  private _table = useTableContext(this)
-
-  protected render() {
-    const table = this._table.value
-    if (!table) return html``
-    return html`
-      <button @click=${() => table.previousPage()}>Prev</button>
-      <button @click=${() => table.nextPage()}>Next</button>
-    `
-  }
-}
-```
+[`CreateTableHookResult`](../interfaces/CreateTableHookResult.md)\<`TFeatures`, `TTableComponents`, `TCellComponents`, `THeaderComponents`\>
 
 ## Example
 

docs/framework/lit/reference/index.md

@@ -9,6 +9,10 @@ title: "@tanstack/lit-table"
 
 - [TableController](classes/TableController.md)
 
+## Interfaces
+
+- [CreateTableHookResult](interfaces/CreateTableHookResult.md)
+
 ## Type Aliases
 
 - [AppCellContext](type-aliases/AppCellContext.md)