Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
666 changes: 333 additions & 333 deletions _artifacts/domain_map.yaml

Large diffs are not rendered by default.

110 changes: 55 additions & 55 deletions _artifacts/scratch/cluster-a-foundational.yaml

Large diffs are not rendered by default.

120 changes: 60 additions & 60 deletions _artifacts/scratch/cluster-b-row-model-features.yaml

Large diffs are not rendered by default.

28 changes: 14 additions & 14 deletions _artifacts/scratch/cluster-c-ui-state-features.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ skills:
wrong_pattern: |
// ❌ Live resize + getSize() on every cell + un-memoized body
const table = useTable({
_features: tableFeatures({ columnSizingFeature, columnResizingFeature }),
features: tableFeatures({ columnSizingFeature, columnResizingFeature }),
columnResizeMode: 'onChange',
//...
})
Expand Down Expand Up @@ -343,14 +343,14 @@ skills:
wrong_pattern: |
// ❌ v8 syntax — no longer disables pinning in v9
const table = useTable({
_features: tableFeatures({ columnPinningFeature }),
features: tableFeatures({ columnPinningFeature }),
enablePinning: false, // ignored at table level in v9
//...
})
correct_pattern: |
// ✅ v9: split into two table-level options
const table = useTable({
_features: tableFeatures({ columnPinningFeature, rowPinningFeature }),
features: tableFeatures({ columnPinningFeature, rowPinningFeature }),
enableColumnPinning: false, // turns off column pinning
enableRowPinning: false, // turns off row pinning (or row => row.original.locked)
//...
Expand Down Expand Up @@ -522,7 +522,7 @@ skills:
columnHelper.accessor('lastName', { ... }),
]
const table = useTable({
_features: tableFeatures({ columnPinningFeature, columnResizingFeature }),
features: tableFeatures({ columnPinningFeature, columnResizingFeature }),
columns,
data,
})
Expand Down Expand Up @@ -638,14 +638,14 @@ skills:
wrong_pattern: |
// ❌ row.id defaults to row.index; pin survives wrong rows after refetch
const table = useTable({
_features: tableFeatures({ rowPinningFeature, rowPaginationFeature }),
features: tableFeatures({ rowPinningFeature, rowPaginationFeature }),
data, // refetched periodically
//...
})
correct_pattern: |
// ✅ Stable row identity
const table = useTable({
_features: tableFeatures({ rowPinningFeature, rowPaginationFeature }),
features: tableFeatures({ rowPinningFeature, rowPaginationFeature }),
data,
getRowId: row => row.userId, // or row.uuid, row.id from API, etc.
//...
Expand Down Expand Up @@ -683,14 +683,14 @@ skills:
wrong_pattern: |
// ❌ Expecting pinned rows to vanish on filter, but they don't (default)
const table = useTable({
_features: tableFeatures({ rowPinningFeature, columnFilteringFeature }),
features: tableFeatures({ rowPinningFeature, columnFilteringFeature }),
//...
// keepPinnedRows defaults to true; pinned rows survive filtering
})
correct_pattern: |
// ✅ Be explicit about which UX you want
const table = useTable({
_features: tableFeatures({ rowPinningFeature, columnFilteringFeature }),
features: tableFeatures({ rowPinningFeature, columnFilteringFeature }),
keepPinnedRows: false, // pinned rows disappear when filtered/paginated out
//...
})
Expand Down Expand Up @@ -849,7 +849,7 @@ skills:
wrong_pattern: |
// ❌ Server-side pagination + default row.id = row.index
const table = useTable({
_features: tableFeatures({ rowSelectionFeature, rowPaginationFeature }),
features: tableFeatures({ rowSelectionFeature, rowPaginationFeature }),
data, // only the current page from the server
manualPagination: true,
rowCount, // server-provided total
Expand All @@ -860,7 +860,7 @@ skills:
correct_pattern: |
// ✅ Stable row id keyed to the primary key the server uses
const table = useTable({
_features: tableFeatures({ rowSelectionFeature, rowPaginationFeature }),
features: tableFeatures({ rowSelectionFeature, rowPaginationFeature }),
data,
manualPagination: true,
rowCount,
Expand Down Expand Up @@ -906,7 +906,7 @@ skills:
wrong_pattern: |
// ❌ Checkbox "select all" + single-select mode
const table = useTable({
_features: tableFeatures({ rowSelectionFeature }),
features: tableFeatures({ rowSelectionFeature }),
enableMultiRowSelection: false, // radio-like
//...
})
Expand All @@ -920,7 +920,7 @@ skills:
correct_pattern: |
// ✅ Radio inputs, no toggle-all header
const table = useTable({
_features: tableFeatures({ rowSelectionFeature }),
features: tableFeatures({ rowSelectionFeature }),
enableMultiRowSelection: false,
getRowId: row => row.id,
//...
Expand Down Expand Up @@ -1030,14 +1030,14 @@ skills:
// (which is correct for most cases but surprising if you wanted
// parent-only selection for a "select this group as a whole" UX)
const table = useTable({
_features: tableFeatures({ rowSelectionFeature, rowExpandingFeature }),
features: tableFeatures({ rowSelectionFeature, rowExpandingFeature }),
getSubRows: row => row.subRows,
// enableSubRowSelection unset — defaults to true
})
correct_pattern: |
// ✅ Opt out of parent->child propagation explicitly
const table = useTable({
_features: tableFeatures({ rowSelectionFeature, rowExpandingFeature }),
features: tableFeatures({ rowSelectionFeature, rowExpandingFeature }),
getSubRows: row => row.subRows,
enableSubRowSelection: false, // toggling parent doesn't touch subRows
})
Expand Down
90 changes: 45 additions & 45 deletions _artifacts/scratch/cluster-d-framework-adapters.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ skills:
mechanism: 'When a slice is owned both ways, external atoms take precedence over external state. The on[State]Change callback may stop firing or write into a base atom whose value is shadowed by the external atom, producing surprising divergence.'
wrong_pattern: |
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
atoms: { pagination: paginationAtom },
Expand All @@ -67,8 +67,8 @@ skills:
correct_pattern: |
// Pick exactly one source of truth per slice.
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
atoms: { pagination: paginationAtom },
Expand Down Expand Up @@ -141,8 +141,8 @@ skills:
wrong_pattern: |
const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
state: { pagination },
Expand All @@ -153,8 +153,8 @@ skills:
correct_pattern: |
const pagination = ref<PaginationState>({ pageIndex: 0, pageSize: 10 })
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
state: {
Expand Down Expand Up @@ -231,16 +231,16 @@ skills:
wrong_pattern: |
const [data] = createSignal(makeData(100))
const table = createTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data: data(),
})
correct_pattern: |
const [data] = createSignal(makeData(100))
const table = createTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
get data() { return data() },
})
Expand Down Expand Up @@ -318,8 +318,8 @@ skills:
wrong_pattern: |
let pagination = $state({ pageIndex: 0, pageSize: 10 })
const table = createTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
state: { pagination },
Expand All @@ -330,8 +330,8 @@ skills:
correct_pattern: |
let pagination = $state({ pageIndex: 0, pageSize: 10 })
const table = createTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
get data() { return data },
state: {
Expand Down Expand Up @@ -382,15 +382,15 @@ skills:
mechanism: 'injectTable expects a () => options factory and reruns it when read signals change. Passing a plain object skips signal tracking and the table never resyncs when source signals update.'
wrong_pattern: |
readonly table = injectTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data: this.data(),
})
correct_pattern: |
readonly table = injectTable(() => ({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data: this.data(),
}))
Expand Down Expand Up @@ -451,22 +451,22 @@ skills:
mechanism: 'TableController owns the underlying table instance and subscriptions. Constructing it in render creates fresh subscriptions and discards prior state every cycle, causing data loss and double-subscribed host updates.'
wrong_pattern: |
protected render() {
const tableController = new TableController<typeof _features, Person>(this)
const tableController = new TableController<typeof features, Person>(this)
const table = tableController.table({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data: this._data,
})
return html`...`
}
correct_pattern: |
private tableController = new TableController<typeof _features, Person>(this)
private tableController = new TableController<typeof features, Person>(this)

protected render() {
const table = this.tableController.table({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data: this._data,
})
Expand Down Expand Up @@ -506,7 +506,7 @@ skills:
}
correct_pattern: |
// wire external atoms through table.atoms or maintain a separate subscription
private tableController = new TableController<typeof _features, Person>(this)
private tableController = new TableController<typeof features, Person>(this)
private _externalAtom = createAtom({ count: 0 })
private _unsub?: () => void

Expand Down Expand Up @@ -544,36 +544,36 @@ skills:
- 'initialState'
- 'createTableHook (createAppColumnHelper, useAppTable, useTableContext, useCellContext, useHeaderContext)'
tasks:
- 'Set up useTable in Preact with stable references for data, columns, and _features.'
- 'Set up useTable in Preact with stable references for data, columns, and features.'
- 'Optimize a large Preact table by passing () => null as the selector and subscribing lower in the tree.'
- 'Build reusable component registries with createTableHook in Preact.'
failure_modes:
- mistake: 'Recreating columns or _features on every render'
mechanism: 'Preact relies on stable references for table options. New columns or _features arrays each render force useTable to call setOptions and rebuild derived state, undoing the work selectors and Subscribe are meant to save.'
- mistake: 'Recreating columns or features on every render'
mechanism: 'Preact relies on stable references for table options. New columns or features arrays each render force useTable to call setOptions and rebuild derived state, undoing the work selectors and Subscribe are meant to save.'
wrong_pattern: |
function App({ data }) {
const columns = [
{ accessorKey: 'firstName', header: 'First name' },
]
const _features = tableFeatures({})
const features = tableFeatures({})
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
})
return null
}
correct_pattern: |
const _features = tableFeatures({})
const features = tableFeatures({})
const columns = [
{ accessorKey: 'firstName', header: 'First name' },
]

function App({ data }) {
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
})
Expand Down Expand Up @@ -613,8 +613,8 @@ skills:
mechanism: 'External atoms take precedence over external state. Mixing them silently hides on[State]Change-driven setState writes and leaves React-style state stale.'
wrong_pattern: |
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
atoms: { pagination: paginationAtom },
Expand All @@ -624,8 +624,8 @@ skills:
correct_pattern: |
// Pick exactly one source of truth per slice.
const table = useTable({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data,
atoms: { pagination: paginationAtom },
Expand Down Expand Up @@ -897,17 +897,17 @@ skills:
mechanism: 'TableController.addController and store subscriptions run in the constructor. Recreating it per render leaks subscriptions, drops the prior table instance (losing state), and double-triggers host updates.'
wrong_pattern: |
protected render() {
const controller = new TableController<typeof _features, Person>(this)
const table = controller.table({ _features, _rowModels: {}, columns, data: this._data })
const controller = new TableController<typeof features, Person>(this)
const table = controller.table({ features, rowModels: {}, columns, data: this._data })
return html`...`
}
correct_pattern: |
private tableController = new TableController<typeof _features, Person>(this)
private tableController = new TableController<typeof features, Person>(this)

protected render() {
const table = this.tableController.table({
_features,
_rowModels: {},
features,
rowModels: {},
columns,
data: this._data,
})
Expand Down
Loading
Loading