feat: support for solid-js

[MAST1999]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 52afb9c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[teleskop150750]

Should there be a store subscription like in other frameworks?

React

Vue main

Vue v2

Vue v3

[MAST1999]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

[teleskop150750]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Please take a look at my vue 2/3 implementation

Vue v2

Vue v3

UPD

MAST1999#1

[wobsoriano]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Please take a look at my vue 2/3 implementation

Vue v2

Vue v3

#92 (comment)

Do you think we can open a PR to TanStack Store Vue/Solid/Svelte instead for them to accept a getter/ref instead? Or just improve it all in all?

[teleskop150750]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Fix link

MAST1999#1

[teleskop150750]

Should there be a store subscription like in other frameworks?

There's a problem with the implementation of the useStore for both Svelte and Solid doesn't work in this use case.

Because the compiledQuery is a memo useStore doesn't subscribe to it, so when it's update it doesn't register for useStore so we don't get the updates.

We'll need a way to pass a function/getter to useStore so that it listens to signals.

Please take a look at my vue 2/3 implementation
Vue v2
Vue v3
#92 (comment)

Do you think we can open a PR to TanStack Store Vue/Solid/Svelte instead for them to accept a getter/ref instead? Or just improve it all in all?

You can of course open a PR with something like this change. Since this package is small I don't see any restrictions for using the core version. without framework wrappers

export const useStore = (
  getStore: () => Store<any, any> | Derived<any, any>,
  selector: (v: any) => any
) => {
  let unsub = () => {}
  const state = createMemo(() => {
    const store = getStore()
    const [slice, setSlice] = createStore({
      value: selector(store.state),
    })

    unsub = store.subscribe(() => {
      const newValue = selector(store.state)
      setSlice(`value`, reconcile(newValue))
    })

    return slice
  })

  onCleanup(() => {
    unsub()
  })

  return () => state().value
}

UPD

[KyleAMathews]

FYI — we've removed the tanstack/store to do a direct integration w/ the frameworks (more control means more speed). The vue code is a good example of how to directly integrate with framework reactive primitives. Would love to get a solid package out! https://github.com/TanStack/db/blob/main/packages/vue-db/src/useLiveQuery.ts

[MAST1999]

Sounds awesome!

I'll take a look over the weekend to see what I can do.

[MAST1999]

OK, I've updated the integration.

I need feedback on the API for useLiveQuery though.

Right now, I've set it up so that it always receives a function because if users pass a regular object they might accidentally break reactivity, but we can support both live query config object and as a function similar to Tanstack Query.

I just prefer having one way of doing things which will always work.

I also ended up installing vitest and jsdom to run tests. Before, we were using npx vitest . I can revert it if it causes issues.

[MAST1999]

Another question, do we want to support suspense?

[KyleAMathews]

One way of doing thing sounds good. I don't use Solid so I don't know what people expect per se from libraries like this but supporting Suspense seems like a good plan. What's involved with adding that? If it's pretty involved, it could come in another PR.

[MAST1999]

Well, suspense means we use createAsync, but I don't think there's anything async here to drop in there.
In Tanstack Query the queryFn is run in createAsync (or createResource) since it's making a request to the server.

I think we can add it, I just need to figure out which part is doing the async part to inject createAsync there.

We can merge this, and I'll can do a follow-up MR for suspense if we want it.

[KyleAMathews]

You can call .preload on the query as that promise resolves when all the data from any collections used has loaded.

[KyleAMathews]

The query itself is sync

[MAST1999]

OK, I think we have suspense as well.

I'll try to rebuild the todo app example to verify that everything works.

[KyleAMathews]

Awesome!