[svelte] createTableHook: App* wrappers call setContext in the parent's component context (set_context_after_init when showing a column)
Maintainer antworten meist innerhalb von 1 Tag
Bewertung
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Anfängerfreundlichkeit
- 68/100
- Issue-Typ
- Bug
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Aktiv
- Tech-Stack
- typescript
- Bereich
- frontend
Rechercherichtung
Start by reading createTableHook.svelte.js and the AppCell.svelte, AppHeader.svelte, and AppTable.svelte components named in the issue; check how the wrappers and components set context. Reproduce the error in the linked Svelte playground by showing the hidden Age column. Done means newly created cells, headers, and tables set context in their own component initialization, and toggling the column no longer errors.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
TanStack Table version
@tanstack/svelte-table v9.2.5 (the same code is in v9.2.6)
Framework/Library version
Svelte v5.57.1, with compilerOptions.experimental.async: true
Describe the bug and the steps to reproduce it
With createTableHook, any <table.AppCell> / <table.AppHeader> that is created after the component using it has initialized throws set_context_after_init, and the cells don't render. The most common trigger is showing a hidden column; it also affects anything else that creates new cells later.
Svelte error: set_context_after_init
`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression
at setContext
at AppCell (createTableHook.svelte.js)
Steps (see the playground below):
- Create a table with
createTableHook/createAppTablewhere one column is hidden (initialState: { columnVisibility: { age: false } }), and render cells with<table.AppCell {cell}>. - Show the column:
table.getColumn('age').toggleVisibility(). - The error is thrown and the new column's cells aren't rendered.
Cause: createAppTable builds the App* wrappers as plain functions that call setContext and then call the real component:
const AppCell = ((internal, { children, cell }) => {
setContext(cellContextKey, cell);
return AppCellSvelte(internal, { cell, cellComponents: cellComponentsWithFlexRender, children });
});
setContext runs before AppCellSvelte has pushed its own component context, so it writes into the parent's context (the component that renders <table.AppCell>). Svelte's async mode validates that setContext only runs while a component initializes. That holds during the parent's first render, but not for cells created later, e.g. when a column is shown. Without async mode it doesn't throw, but cells/headers still get written into the parent's context map rather than their own. The same applies to AppHeader, AppFooter and AppTable.
Possible fix, which I'm using as a local patch: let the App*Svelte components set the context themselves, during their own initialization, and have the wrappers only pass props:
// createTableHook.svelte.js
- const AppCell = ((internal, { children, cell }) => {
- setContext(cellContextKey, cell);
- return AppCellSvelte(internal, {
- cell,
- cellComponents: cellComponentsWithFlexRender,
- children,
- });
- });
+ const AppCell = ((internal, { children, cell }) => AppCellSvelte(internal, {
+ cell,
+ cellComponents: cellComponentsWithFlexRender,
+ contextKey: cellContextKey,
+ children,
+ }));
<!-- AppCell.svelte -->
<script lang="ts">
- import type { Snippet } from 'svelte'
+ import { setContext, type Snippet } from 'svelte'
...
- let { children, cell, cellComponents }: Props = $props()
+ let { children, cell, cellComponents, contextKey }: Props = $props()
+
+ setContext(contextKey, cell)
</script>
…and the same for AppHeader / AppFooter (AppHeader.svelte) and AppTable (AppTable.svelte, which would receive table as a prop). With that patch, showing/hiding columns, paging, sorting and filtering work without errors, and useCellContext / useHeaderContext / useTableContext return the right instances.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
Click Toggle "Age": the error appears in the console and the "Age" cells don't render.
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
Yes, I think I know how to fix it and will discuss it in the comments of this issue
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 28.5k
- Forks
- 3.6k
- Ø Merge
- 19 Std. 40 Min.
- Gemergte PRs (30 T.)
- 8
Entwicklungsumgebung
- Kein Dockerfile und keine Docker-Compose-Datei
- Hat eine Pull-Request-Vorlage
- Beitragsleitfaden lesen
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus TanStack/table
-
Issue template renders `react-table`, not `TanStack/table`Evtl. vergeben @vishruthasgowda hat das vor 14 Tagen übernommen. Offen
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 78/100
TanStack/table#6595 · 1 Kommentar ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 38/100
TanStack/table#6601 · 2 Kommentare ·
Maintainer antworten meist innerhalb von 1 Tag
-
Cast required to access custom options when defining a custom plugin/featureEvtl. vergeben @sorena-paydar hat das vor 15 Tagen übernommen. Offen
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100
Maintainer antworten meist innerhalb von 1 Tag
-
`aggregatedCell` not typed against bound `cellComponents` in `createAppColumnHelper`Evtl. vergeben @cpruijsen hat das vor 26 Tagen übernommen. Offen
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 78/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100
TanStack/table#6577 · 6 Kommentare ·
Maintainer antworten meist innerhalb von 1 Tag
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
Maintainer antworten meist innerhalb von 1 Tag
-
kind/chore priority/must
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
sidereal-io/sidereal#380 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Mend: dependency security vulnerability
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 62/100
opfab/operatorfabric-core#10653 ·
Maintainer antworten meist innerhalb von 1 Tag
-
backend bug size:sm
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
chrisbenincasa/tunarr#2237 ·
Maintainer antworten meist innerhalb von 1 Tag
-
documentation
Schwierigkeit 2/5 Ein halber Tag Anfängerfreundlichkeit 69/100
Lam30ne/regulate-app#39 ·