@tanstack/svelte-db 0.1.79 → 0.1.81

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/svelte-db",
3
- "version": "0.1.79",
3
+ "version": "0.1.81",
4
4
  "description": "Svelte integration for @tanstack/db",
5
5
  "author": "Kyle Mathews",
6
6
  "license": "MIT",
@@ -35,7 +35,7 @@
35
35
  "skills"
36
36
  ],
37
37
  "dependencies": {
38
- "@tanstack/db": "0.6.2"
38
+ "@tanstack/db": "0.6.4"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "svelte": "^5.0.0"
@@ -111,6 +111,72 @@ const { data, isLoading } = $derived(query)
111
111
  </script>
112
112
  ```
113
113
 
114
+ ## Includes (Hierarchical Data)
115
+
116
+ When a query uses includes (subqueries in `select`), each child field is a live `Collection` by default. Subscribe to it with `useLiveQuery` in a subcomponent:
117
+
118
+ ```svelte
119
+ <!-- ProjectList.svelte -->
120
+ <script lang="ts">
121
+ import { useLiveQuery, eq } from "@tanstack/svelte-db"
122
+ import IssueList from "./IssueList.svelte"
123
+
124
+ const projectsQuery = useLiveQuery((q) =>
125
+ q.from({ p: projectsCollection }).select(({ p }) => ({
126
+ id: p.id,
127
+ name: p.name,
128
+ issues: q
129
+ .from({ i: issuesCollection })
130
+ .where(({ i }) => eq(i.projectId, p.id))
131
+ .select(({ i }) => ({ id: i.id, title: i.title })),
132
+ }))
133
+ )
134
+ </script>
135
+
136
+ {#each projectsQuery.data as project (project.id)}
137
+ <div>
138
+ {project.name}
139
+ <IssueList issuesCollection={project.issues} />
140
+ </div>
141
+ {/each}
142
+ ```
143
+
144
+ ```svelte
145
+ <!-- IssueList.svelte — subscribes to the child Collection -->
146
+ <script lang="ts">
147
+ import { useLiveQuery } from "@tanstack/svelte-db"
148
+
149
+ let { issuesCollection } = $props()
150
+ const issuesQuery = useLiveQuery(issuesCollection)
151
+ </script>
152
+
153
+ {#each issuesQuery.data as issue (issue.id)}
154
+ <li>{issue.title}</li>
155
+ {/each}
156
+ ```
157
+
158
+ With `toArray()`, child results are plain arrays and the parent re-emits on child changes:
159
+
160
+ ```ts
161
+ import { toArray, eq } from '@tanstack/svelte-db'
162
+
163
+ const projectsQuery = useLiveQuery((q) =>
164
+ q.from({ p: projectsCollection }).select(({ p }) => ({
165
+ id: p.id,
166
+ name: p.name,
167
+ issues: toArray(
168
+ q
169
+ .from({ i: issuesCollection })
170
+ .where(({ i }) => eq(i.projectId, p.id))
171
+ .select(({ i }) => ({ id: i.id, title: i.title })),
172
+ ),
173
+ })),
174
+ )
175
+ // project.issues is a plain array — no subcomponent needed
176
+ ```
177
+
178
+ See db-core/live-queries/SKILL.md for full includes rules (correlation conditions, nested includes, aggregates).
179
+
114
180
  ## Common Mistakes
115
181
 
116
182
  ### CRITICAL Passing values instead of getter functions in deps