@tanstack/svelte-table 9.0.0-beta.7 → 9.0.0-beta.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +5 -1
  2. package/dist/FlexRender.svelte +15 -1
  3. package/dist/createTable.svelte.d.ts +26 -36
  4. package/dist/createTable.svelte.js +27 -32
  5. package/dist/createTableHook.svelte.d.ts +51 -18
  6. package/dist/createTableHook.svelte.js +18 -10
  7. package/dist/experimental-worker-plugin.d.ts +1 -0
  8. package/dist/experimental-worker-plugin.js +1 -0
  9. package/dist/index.d.ts +1 -2
  10. package/dist/index.js +0 -1
  11. package/dist/reactivity.svelte.d.ts +3 -1
  12. package/dist/reactivity.svelte.js +6 -1
  13. package/dist/render-component.js +4 -0
  14. package/package.json +16 -9
  15. package/skills/create-table-hook/SKILL.md +168 -0
  16. package/skills/getting-started/SKILL.md +172 -0
  17. package/skills/migrate-v8-to-v9/SKILL.md +201 -0
  18. package/skills/table-state/SKILL.md +262 -0
  19. package/skills/with-tanstack-query/SKILL.md +149 -0
  20. package/skills/with-tanstack-virtual/SKILL.md +150 -0
  21. package/dist/subscribe.d.ts +0 -24
  22. package/dist/subscribe.js +0 -4
  23. package/skills/svelte/client-to-server/SKILL.md +0 -238
  24. package/skills/svelte/compose-with-tanstack-form/SKILL.md +0 -295
  25. package/skills/svelte/compose-with-tanstack-pacer/SKILL.md +0 -176
  26. package/skills/svelte/compose-with-tanstack-query/SKILL.md +0 -299
  27. package/skills/svelte/compose-with-tanstack-store/SKILL.md +0 -277
  28. package/skills/svelte/compose-with-tanstack-virtual/SKILL.md +0 -286
  29. package/skills/svelte/getting-started/SKILL.md +0 -340
  30. package/skills/svelte/migrate-v8-to-v9/SKILL.md +0 -256
  31. package/skills/svelte/production-readiness/SKILL.md +0 -256
  32. package/skills/svelte/table-state/SKILL.md +0 -441
  33. package/src/AppCell.svelte +0 -13
  34. package/src/AppHeader.svelte +0 -13
  35. package/src/AppTable.svelte +0 -11
  36. package/src/FlexRender.svelte +0 -103
  37. package/src/context-keys.ts +0 -3
  38. package/src/createTable.svelte.ts +0 -137
  39. package/src/createTableHook.svelte.ts +0 -639
  40. package/src/createTableState.svelte.ts +0 -30
  41. package/src/flex-render.ts +0 -3
  42. package/src/global.d.ts +0 -1
  43. package/src/index.ts +0 -21
  44. package/src/merge-objects.ts +0 -79
  45. package/src/reactivity.svelte.ts +0 -118
  46. package/src/render-component.ts +0 -107
  47. package/src/static-functions.ts +0 -1
  48. package/src/subscribe.ts +0 -46
@@ -1,79 +0,0 @@
1
- /**
2
- * Merges objects together while keeping their getters alive.
3
- * Taken from SolidJS: {https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
4
- * */
5
- export function mergeObjects<T>(source: T): T
6
- export function mergeObjects<T, U>(source: T, source1: U): T & U
7
- export function mergeObjects<T, U, V>(
8
- source: T,
9
- source1: U,
10
- source2: V,
11
- ): T & U & V
12
- export function mergeObjects<T, U, V, W>(
13
- source: T,
14
- source1: U,
15
- source2: V,
16
- source3: W,
17
- ): T & U & V & W
18
- export function mergeObjects(...sources: any): any {
19
- const target = {}
20
- for (let source of sources) {
21
- if (typeof source === 'function') source = source()
22
- if (source) {
23
- const descriptors = Object.getOwnPropertyDescriptors(source)
24
- for (const key in descriptors) {
25
- if (key in target) continue
26
- Object.defineProperty(target, key, {
27
- enumerable: true,
28
- get() {
29
- for (let i = sources.length - 1; i >= 0; i--) {
30
- let v,
31
- s = sources[i]
32
- if (typeof s === 'function') s = s()
33
- // eslint-disable-next-line prefer-const
34
- v = (s || {})[key]
35
- if (v !== undefined) return v
36
- }
37
- },
38
- })
39
- }
40
- }
41
- }
42
- return target
43
- }
44
-
45
- /**
46
- * Merges objects together by eagerly resolving all values into a flat object.
47
- *
48
- * Unlike `mergeObjects`, this does NOT preserve getters — values are read once
49
- * and stored as plain data properties. This prevents the getter-chain
50
- * accumulation that causes O(N) lookups when the result is repeatedly passed
51
- * back as a source in subsequent merges (e.g., inside `$effect.pre` loops).
52
- *
53
- * Later sources take precedence; `undefined` values do not override.
54
- *
55
- * @see https://github.com/TanStack/table/issues/6235
56
- */
57
- export function flatMerge<T>(source: T): T
58
- export function flatMerge<T, U>(source: T, source1: U): T & U
59
- export function flatMerge<T, U, V>(source: T, source1: U, source2: V): T & U & V
60
- export function flatMerge<T, U, V, W>(
61
- source: T,
62
- source1: U,
63
- source2: V,
64
- source3: W,
65
- ): T & U & V & W
66
- export function flatMerge(...sources: any): any {
67
- const result: Record<PropertyKey, unknown> = {}
68
- for (let source of sources) {
69
- if (typeof source === 'function') source = source()
70
- if (!source) continue
71
- for (const key of Reflect.ownKeys(source)) {
72
- const value = (source as Record<PropertyKey, unknown>)[key]
73
- if (value !== undefined) {
74
- result[key as string] = value
75
- }
76
- }
77
- }
78
- return result
79
- }
@@ -1,118 +0,0 @@
1
- import { untrack } from 'svelte'
2
- import { batch, createAtom } from '@tanstack/svelte-store'
3
- import type {
4
- TableAtomOptions,
5
- TableReactivityBindings,
6
- } from '@tanstack/table-core/reactivity'
7
- import type { Atom, Observer, ReadonlyAtom } from '@tanstack/svelte-store'
8
-
9
- const optionsStoreDebugName = 'table/optionsStore'
10
-
11
- function observerToCallback<T>(
12
- observerOrNext: Observer<T> | ((value: T) => void),
13
- ): (value: T) => void {
14
- return typeof observerOrNext === 'function'
15
- ? observerOrNext
16
- : (value) => observerOrNext.next?.(value)
17
- }
18
-
19
- function subscribeToRune<T>(
20
- getValue: () => T,
21
- observerOrNext: Observer<T> | ((value: T) => void),
22
- ) {
23
- const callback = observerToCallback(observerOrNext)
24
- const unsubscribe = $effect.root(() => {
25
- $effect(() => {
26
- const value = getValue()
27
- untrack(() => callback(value))
28
- })
29
- })
30
-
31
- return { unsubscribe }
32
- }
33
-
34
- function createRuneWritableAtom<T>(initialValue: T): Atom<T> {
35
- let value = $state(initialValue)
36
-
37
- return {
38
- set: (updater: T | ((prevVal: T) => T)) => {
39
- value =
40
- typeof updater === 'function'
41
- ? (updater as (prevVal: T) => T)(value)
42
- : updater
43
- },
44
- get: () => value,
45
- subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
46
- return subscribeToRune(() => value, observerOrNext)
47
- }) as Atom<T>['subscribe'],
48
- }
49
- }
50
-
51
- /**
52
- * Creates the table-core reactivity bindings used by the Svelte adapter.
53
- *
54
- * Table state atoms are backed by TanStack Store atoms. The options store stays
55
- * framework-native because row-model APIs read `table.options` directly during
56
- * render. Readonly table atoms bridge Store dependency tracking into `$derived.by`.
57
- */
58
- export function svelteReactivity(): TableReactivityBindings {
59
- return {
60
- createOptionsStore: true,
61
- wrapExternalAtoms: false,
62
- addSubscription: () => {
63
- throw new Error(
64
- 'Feature not supported in current reactivity implementation',
65
- )
66
- },
67
- unmount: () => {
68
- throw new Error(
69
- 'Feature not supported in current reactivity implementation',
70
- )
71
- },
72
- schedule: (fn) => queueMicrotask(() => fn()),
73
- createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
74
- const storeAtom = createAtom(() => fn(), {
75
- compare: _options?.compare,
76
- })
77
- let version = $state(0)
78
-
79
- $effect(() => {
80
- const subscription = storeAtom.subscribe(() => {
81
- version += 1
82
- })
83
-
84
- return () => subscription.unsubscribe()
85
- })
86
-
87
- const value = $derived.by(() => {
88
- version
89
- return storeAtom.get()
90
- })
91
-
92
- return {
93
- get: () => {
94
- const currentValue = storeAtom.get()
95
- value
96
- return currentValue
97
- },
98
- subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
99
- return subscribeToRune(() => value, observerOrNext)
100
- }) as ReadonlyAtom<T>['subscribe'],
101
- }
102
- },
103
- createWritableAtom: <T>(
104
- initialValue: T,
105
- _options?: TableAtomOptions<T>,
106
- ): Atom<T> => {
107
- if (_options?.debugName === optionsStoreDebugName) {
108
- return createRuneWritableAtom(initialValue)
109
- }
110
-
111
- return createAtom(initialValue, {
112
- compare: _options?.compare,
113
- })
114
- },
115
- untrack: untrack,
116
- batch,
117
- }
118
- }
@@ -1,107 +0,0 @@
1
- import type { Component, ComponentProps, Snippet } from 'svelte'
2
-
3
- /**
4
- * A helper class to make it easy to identify Svelte components in
5
- * `columnDef.cell` and `columnDef.header` properties.
6
- *
7
- * > NOTE: This class should only be used internally by the adapter. If you're
8
- * reading this and you don't know what this is for, you probably don't need it.
9
- *
10
- * @example
11
- * ```svelte
12
- * {@const result = content(context as any)}
13
- * {#if result instanceof RenderComponentConfig}
14
- * {@const { component: Component, props } = result}
15
- * <Component {...props} />
16
- * {/if}
17
- * ```
18
- * */
19
- export class RenderComponentConfig<TComponent extends Component> {
20
- constructor(
21
- public component: TComponent,
22
- public props?: ComponentProps<TComponent> | Record<string, never>,
23
- ) {}
24
- }
25
-
26
- /**
27
- * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
28
- *
29
- * > NOTE: This class should only be used internally by the adapter. If you're
30
- * reading this and you don't know what this is for, you probably don't need it.
31
- *
32
- * @example
33
- * ```svelte
34
- * {@const result = content(context as any)}
35
- * {#if result instanceof RenderSnippetConfig}
36
- * {@const { snippet, params } = result}
37
- * {@render snippet(params)}
38
- * {/if}
39
- * ```
40
- * */
41
- export class RenderSnippetConfig<TProps> {
42
- constructor(
43
- public snippet: Snippet<[TProps]>,
44
- public params?: TProps,
45
- ) {}
46
- }
47
-
48
- /**
49
- * Wraps a Svelte component so it can be returned from a column definition
50
- * renderer such as `cell`, `header`, or `footer`.
51
- *
52
- * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
53
- *
54
- * @param component A Svelte component
55
- * @param props The props to pass to `component`
56
- * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
57
- * @example
58
- * ```ts
59
- * // +page.svelte
60
- * const defaultColumns = [
61
- * columnHelper.accessor('name', {
62
- * header: header => renderComponent(SortHeader, { label: 'Name', header }),
63
- * }),
64
- * columnHelper.accessor('state', {
65
- * header: header => renderComponent(SortHeader, { label: 'State', header }),
66
- * }),
67
- * ]
68
- * ```
69
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
70
- */
71
- export const renderComponent = <
72
- TComponent extends Component<any>,
73
- TProps extends ComponentProps<TComponent>,
74
- >(
75
- component: TComponent,
76
- props?: TProps,
77
- ) => new RenderComponentConfig(component, props)
78
-
79
- /**
80
- * Wraps a Svelte snippet so it can be returned from a column definition
81
- * renderer such as `cell`, `header`, or `footer`.
82
- *
83
- * *The snippet must only take one parameter.*
84
- *
85
- * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
86
- *
87
- * @param snippet The snippet to render.
88
- * @param params The single parameter object passed to the snippet.
89
- * @returns A `RenderSnippetConfig` consumed by the Svelte `FlexRender` component.
90
- * @example
91
- * ```ts
92
- * // +page.svelte
93
- * const defaultColumns = [
94
- * columnHelper.accessor('name', {
95
- * cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
96
- * }),
97
- * columnHelper.accessor('state', {
98
- * cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
99
- * }),
100
- * ]
101
- * ```
102
- * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
103
- */
104
- export const renderSnippet = <TProps>(
105
- snippet: Snippet<[TProps]>,
106
- params?: TProps,
107
- ) => new RenderSnippetConfig(snippet, params)
@@ -1 +0,0 @@
1
- export * from '@tanstack/table-core/static-functions'
package/src/subscribe.ts DELETED
@@ -1,46 +0,0 @@
1
- import { shallow, useSelector } from '@tanstack/svelte-store'
2
- import type {
3
- Atom,
4
- ReadonlyAtom,
5
- ReadonlyStore,
6
- Store,
7
- } from '@tanstack/svelte-store'
8
-
9
- export type SubscribeSource<TValue> =
10
- | Atom<TValue>
11
- | ReadonlyAtom<TValue>
12
- | Store<TValue>
13
- | ReadonlyStore<TValue>
14
-
15
- /**
16
- * Creates a fine-grained Svelte subscription to a TanStack Store source.
17
- *
18
- * Pass a table atom or store and optionally project it with a selector. The
19
- * returned selector store exposes `.current`, making it useful for reading
20
- * focused table state outside the broad `createTable` selector.
21
- *
22
- * @example
23
- * ```svelte
24
- * <script lang="ts">
25
- * const selected = subscribeTable(
26
- * table.atoms.rowSelection,
27
- * (rowSelection) => rowSelection[row.id],
28
- * )
29
- * </script>
30
- *
31
- * <input type="checkbox" checked={!!selected.current} />
32
- * ```
33
- */
34
- export function subscribeTable<TSourceValue>(
35
- source: SubscribeSource<TSourceValue>,
36
- ): ReturnType<typeof useSelector<TSourceValue>>
37
- export function subscribeTable<TSourceValue, TSelected>(
38
- source: SubscribeSource<TSourceValue>,
39
- selector: (state: TSourceValue) => TSelected,
40
- ): ReturnType<typeof useSelector<TSourceValue, TSelected>>
41
- export function subscribeTable<TSourceValue, TSelected>(
42
- source: SubscribeSource<TSourceValue>,
43
- selector?: (state: TSourceValue) => TSelected,
44
- ) {
45
- return useSelector(source, selector, { compare: shallow })
46
- }