feat(svelte-query): Svelte Query Adapter for TanStack Query

[lachlancollins]

Overview

This PR is a continuation of #4344. It adds an official Svelte adapter which is based on the brilliant work of @drejohnson and @amen-souissi.

I'll be actively editing this description as progress is made. I'd also greatly appreciate any and all contributions over at https://github.com/lachlancollins/query.

API

Based on the discussion at the old PR, the functions which export a store now have the create prefix to be less React hooks-like. Additionally, the <QueryClientProvider> and <Hydrate> components have been added to be more consistent with the other adapters.

• createQuery
• createQueries
• createInfiniteQuery
• createMutation
• useQueryClient
• useIsFetching
• useIsMutating
• useHydrate
• <QueryClientProvider>
• <Hydrate>

Package

svelte-package outputs all required files to a (customisable) /build folder, which contains everything that needs to be published to npm. I'm fairly sure this differs from how the other packages are published, so let me know how I can ensure this integrates with the CI scripts properly.

To-do

If you would like to help with one of these tasks, please comment here or create an issue on the fork :)

• Docs overview
• Build using svelte-package (allows using .svelte files)
• Implement QueryClientProvider component
• Implement Hydrate component
• Rename store functions with create prefix
• Update examples to SvelteKit 1.0
• Add playground and star-wars examples
• Use vitest instead of jest (setup easier for vite environment)
• Add createQuery and createMutation tests
• Integrate into publish scripts

[TkDodo]

we're getting there. The preview sandbox shows the following error:

node_modules/esbuild/lib/main.js:1336:21: ERROR: [plugin: vite:dep-scan] Failed to resolve entry for package "@tanstack/svelte-query". The package may have incorrect main/module/exports specified in its package.json.
node_modules/esbuild/lib/main.js:1336:21: ERROR: [plugin: vite:dep-scan] Failed to resolve entry for package "@tanstack/svelte-query". The package may have incorrect main/module/exports specified in its package.json.

I think the package.json is not correct, have a look at how other packages have entry points specified:

query/packages/vue-query/package.json

Lines 17 to 28 in d7d98a9

	"types": "build/lib/index.d.ts",
	"main": "build/lib/index.js",
	"module": "build/lib/index.esm.js",
	"exports": {
	".": {
	"types": "./build/lib/index.d.ts",
	"import": "./build/lib/index.mjs",
	"default": "./build/lib/index.js"
	},
	"./package.json": "./package.json"
	},
	"sideEffects": false,

I'm not sure if svelte-kit produces the output in the same branches, but it would be good if we could customize it like that.

for example, for our size testing, we check all file matching packages/*/build/umd/*.production.js

[TkDodo]

and prettier needs to run on some files :)

[lachlancollins]

we're getting there. The preview sandbox shows the following error:

node_modules/esbuild/lib/main.js:1336:21: ERROR: [plugin: vite:dep-scan] Failed to resolve entry for package "@tanstack/svelte-query". The package may have incorrect main/module/exports specified in its package.json.
node_modules/esbuild/lib/main.js:1336:21: ERROR: [plugin: vite:dep-scan] Failed to resolve entry for package "@tanstack/svelte-query". The package may have incorrect main/module/exports specified in its package.json.

I think the package.json is not correct, have a look at how other packages have entry points specified:

...

I'm not sure if svelte-kit produces the output in the same branches, but it would be good if we could customize it like that.

for example, for our size testing, we check all file matching packages/*/build/umd/*.production.js

Hi @TkDodo, I've made a bit of progress here.

By default, svelte-package generates its own package.json inside the build dir which autogenerates all the main/module/exports fields. However, it seems like this wouldn't integrate too easily into the CI. So, I've copied the important fields from the build package.json into the main package.json, and set up rimraf to delete the build package.json.

The next "issue" is that svelte-package only builds ESM. From what I can tell, there isn't really any need for CJS or UMD in the Svelte ecosystem (anymore?) - at least nobody has been complaining about the output of svelte-package. There are definitely some Svelte packages I've used in the past which refused to work in SSR that were built through Rollup.

[TkDodo]

okay, if ESM is all we need, then so be it 😅

[lachlancollins]

@TkDodo I think this should pass github CI now

[codecov-commenter]

Codecov Report

Base: 96.36% // Head: 91.05% // Decreases project coverage by -5.31% ⚠️

Coverage data is based on head (ef81d26) compared to base (eab6e2c).
Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4768      +/-   ##
==========================================
- Coverage   96.36%   91.05%   -5.32%     
==========================================
  Files          45      102      +57     
  Lines        2281     3866    +1585     
  Branches      640      999     +359     
==========================================
+ Hits         2198     3520    +1322     
- Misses         80      325     +245     
- Partials        3       21      +18     

Impacted Files	Coverage Δ
src/react/reactBatchedUpdates.ts
src/react/useInfiniteQuery.ts
src/core/query.ts
src/react/setLogger.ts
src/react/utils.ts
src/react/setBatchUpdatesFn.ts
src/core/queryClient.ts
src/core/infiniteQueryBehavior.ts
src/core/queryObserver.ts
src/react/QueryErrorResetBoundary.tsx
... and 137 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.