Migrating to v7

Upgrade this project from @humanspeak/svelte-headless-table 6.x to 7.

1. Read https://table.svelte.page/docs/guides/migrating-to-v7.md in full before
   changing anything. Every docs page is also available as Markdown: append
   .md to its URL, for example
   https://table.svelte.page/docs/plugins/add-pagination.md. The index of all
   pages is https://table.svelte.page/llms.txt.
2. If any template still uses <Subscribe>, $headerRows / $rows / $pageRows /
   $tableAttrs, or cell.attrs() / cell.props(), convert it to current.* first,
   following https://table.svelte.page/docs/guides/moving-to-current.md.
3. Install @humanspeak/svelte-headless-table@^7 and apply every row of the
   guide's "Breaking changes at a glance" table. Table data must be an array
   or a getter, never a Svelte store. Plugin state is read and written through
   .current. Files that create $state must be .svelte or .svelte.ts.
4. Run every grep in the guide's "Checklist" section and fix each hit. Review
   every initialFilterValue: it is now applied when the view model is built.
5. Run the project's type check and tests. Report what you changed, and list
   anything you could not convert with the file and line.

// 6.x
import { readable, writable } from 'svelte/store'
const table = createTable(readable(people))

const data = writable(people)
const table = createTable(data)
data.update((rows) => [...rows, newPerson])

// 7.x
const table = createTable(people)

let data = $state.raw(people)
const table = createTable(() => data)
data = [...data, newPerson]

import { fromStore } from 'svelte/store'
const rows = fromStore(externalStore)
const table = createTable(() => rows.current)

<!-- 6.x -->
<script>
    const { headerRows, pageRows, tableAttrs, tableBodyAttrs } = table.createViewModel(columns)
</script>
<table {...$tableAttrs}>
    <tbody {...$tableBodyAttrs}>
        {#each $pageRows as row (row.id)}

<!-- 7.x -->
<script>
    const vm = table.createViewModel(columns)
</script>
<table {...vm.current.tableAttrs}>
    <tbody {...vm.current.tableBodyAttrs}>
        {#each vm.current.pageRows as row (row.id)}

<!-- 6.x -->
{#each headerRow.cells as cell (cell.id)}
    <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
        <th {...attrs} onclick={props.sort.toggle}>
            <Render of={cell.render()} />
        </th>
    </Subscribe>
{/each}

<!-- 7.x -->
{#each headerRow.cells as cell (cell.id)}
    <th {...cell.current.attrs} onclick={cell.current.props.sort.toggle}>
        <Render of={cell.render()} />
    </th>
{/each}

<!-- 6.x -->
<script>
    const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = vm.pluginStates.page
</script>
<button onclick={() => $pageIndex--} disabled={!$hasPreviousPage}>Previous page</button>
{$pageIndex + 1} out of {$pageCount}
<button onclick={() => $pageIndex++} disabled={!$hasNextPage}>Next page</button>
<input type="number" min={1} bind:value={$pageSize} />

<!-- 7.x -->
<script>
    const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = vm.pluginStates.page
</script>
<button onclick={() => (pageIndex.current -= 1)} disabled={!hasPreviousPage.current}>
    Previous page
</button>
{pageIndex.current + 1} out of {pageCount.current}
<button onclick={() => (pageIndex.current += 1)} disabled={!hasNextPage.current}>Next page</button>
<input type="number" min={1} bind:value={pageSize.current} />

// 6.x
hiddenColumnIds.update((ids) => [...ids, 'email'])
filterValues.update((values) => ({ ...values, status: 'single' }))

// 7.x
hiddenColumnIds.current = [...hiddenColumnIds.current, 'email']
filterValues.current = { ...filterValues.current, status: 'single' }

// 6.x
$selectedDataIds // { '1': true }
selectedDataIds.add('2')
selectedDataIds.clear()

// 7.x
selectedDataIds.current // { '1': true }
selectedDataIds.add('2')
selectedDataIds.clear()
selectedDataIds.has('2') // new: a membership check

<!-- SelectIndicator.svelte, 6.x -->
<script lang="ts">
    import type { Readable, Writable } from 'svelte/store'
    export let isSelected: Writable<boolean>
    export let isSomeSubRowsSelected: Readable<boolean>
</script>
<input type="checkbox" bind:checked={$isSelected} indeterminate={$isSomeSubRowsSelected} />

<!-- SelectIndicator.svelte, 7.x -->
<script lang="ts">
    import type { Box, ReadonlyBox } from '@humanspeak/svelte-headless-table'
    const { isSelected, isSomeSubRowsSelected }: {
        isSelected: Box<boolean>
        isSomeSubRowsSelected: ReadonlyBox<boolean>
    } = $props()
</script>
<input
    type="checkbox"
    checked={isSelected.current}
    indeterminate={isSomeSubRowsSelected.current}
    onchange={(e) => (isSelected.current = e.currentTarget.checked)}
/>

// 6.x
const noticeProps = writable({ count: 0 })
createRender(Notice, noticeProps).on('click', () => $noticeProps.count++)

// 7.x
let count = $state(0)
createRender(Notice, () => ({ count, onclick: () => count++ }))

// 6.x
header: (_, { rows }) => derived(rows, (r) => `Name (${r.length} users)`)
header: (_, { rows }) => createRender(Italic, derived(rows, (r) => ({ text: `${r.length}` })))

// 7.x
header: (_, { rows }) => () => `Name (${rows().length} users)`
header: (_, { rows }) => createRender(Italic, () => ({ text: `${rows().length}` }))

// 6.x
const deriveRows: DeriveRowsFn<Item> = (rows) =>
    derived([rows, sortKeys], ([$rows, $sortKeys]) => sort($rows, $sortKeys))

hooks: {
    'thead.tr.th': (cell) => ({ props: derived(sortKeys, ($keys) => ({ order: orderOf($keys, cell.id) })) })
}

// 7.x
const deriveRows: DeriveRowsFn<Item> = (rows) => {
    const sorted = $derived.by(() => sort(rows(), sortKeys.current))
    return () => sorted
}

hooks: {
    'thead.tr.th': (cell) => ({ props: () => ({ order: orderOf(sortKeys.current, cell.id) }) })
}

// addMinValue.svelte.ts
import { box, type BodyRow, type Box, type ReadonlyBox } from '@humanspeak/svelte-headless-table'
import type {
    DeriveRowsFn,
    NewTablePropSet,
    TablePlugin
} from '@humanspeak/svelte-headless-table/plugins'

export interface MinValueState<Item> {
    /** The column being filtered, if any. */
    columnId: Box<string | undefined>
    /** Rows whose value in `columnId` is below `min` are hidden. */
    min: Box<number>
    /** The rows before this plugin filtered them. */
    preFilteredRows: ReadonlyBox<BodyRow<Item>[]>
}

export type MinValuePropSet = NewTablePropSet<{
    'thead.tr.th': { active: boolean; activate: () => void }
}>

export const addMinValue =
    <Item>({ initialMin = 0 }: { initialMin?: number } = {}): TablePlugin<
        Item,
        MinValueState<Item>,
        Record<string, never>,
        MinValuePropSet
    > =>
    ({ upstream }) => {
        const columnId = box<string | undefined>(undefined)
        const min = box(initialMin)

        // Expose the pre-transform rows by reading `upstream`, the rows the
        // view model feeds this plugin, not by copying them into state.
        const preFilteredRows: ReadonlyBox<BodyRow<Item>[]> = {
            get current() {
                return upstream.rows()
            }
        }

        const deriveRows: DeriveRowsFn<Item> = (rows) => {
            // Read state while deriving; never write it here.
            const filtered = $derived.by(() => {
                const id = columnId.current
                if (id === undefined) return rows()
                return rows().filter((row) => {
                    const cell = row.cellForId[id]
                    return !cell?.isData() || Number(cell.value) >= min.current
                })
            })
            return () => filtered
        }

        return {
            pluginState: { columnId, min, preFilteredRows },
            deriveRows,
            hooks: {
                'thead.tr.th': (cell) => {
                    // Allocate the handler once per cell, not on every read.
                    const activate = () => {
                        columnId.current = cell.id
                    }
                    return {
                        props: () => ({ active: columnId.current === cell.id, activate })
                    }
                }
            }
        }
    }

const table = createTable(people, { sort: addSortBy() })
const vm = table.createViewModel(columns)
vm.pluginStates.sort.sortKeys.current = [{ id: 'age', order: 'desc' }]
const oldest = vm.current.rows[0].original // a plain read, no subscription needed

const stop = $effect.root(() => {
    $effect(() => {
        console.log(vm.current.rows.length)
    })
})
// ...
stop()