Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: svelte 5 adapter #5403

Merged
merged 36 commits into from
Jun 12, 2024
Merged

Conversation

walker-tx
Copy link

Overhauls the Svelte adapter so that it's compatible with Svelte 5.

Some overview of the work that was done:

  • All dependencies on svelte/internal are removed.
  • createSvelteTable now returns a signal in lieu of a store. According to @dummdidumm, Stores may eventually be deprecated.
  • The flexRender API is now replaced with a more idiomatic FlexRender component.
  • FlexRender employs the use of Svelte 5's new Snippet feature - it made this adapter way simpler.
  • Typescript typing is more robust than it was before
  • All user-facing code that's not being carried over from the core library is documented.

Feedback welcome.

solves #5213

Copy link

@niemyjski niemyjski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good

@walker-tx walker-tx marked this pull request as draft March 12, 2024 01:11
@walker-tx
Copy link
Author

The createSvelteTable function needs a bit more work. It's not very efficient at the moment. I've marked as draft while I work on this.

@lachlancollins lachlancollins self-requested a review March 14, 2024 12:09
Copy link

@dummdidumm dummdidumm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

packages/svelte-table/package.json Outdated Show resolved Hide resolved
packages/svelte-table/src/flex-render.svelte Outdated Show resolved Hide resolved
packages/svelte-table/package.json Outdated Show resolved Hide resolved
@walker-tx walker-tx force-pushed the feat-svelte-5-adapter branch from 4d2ccbc to c7c4419 Compare April 29, 2024 15:06
@niemyjski
Copy link

I can't provide any feedback as pr was closed but was also seeing:

not sure if any is banned in this project but I'm getting errors source importing and trying out.

Argument of type 'HeaderContext<TData, TValue> | CellContext<TData, TValue>' is not assignable to parameter of type 'HeaderContext<TData, TValue> & CellContext<TData, TValue>'.
Type 'HeaderContext<TData, TValue>' is not assignable to type 'HeaderContext<TData, TValue> & CellContext<TData, TValue>'.
Type 'HeaderContext<TData, TValue>' is missing the following properties from type 'CellContext<TData, TValue>': cell, getValue, renderValue, row

Feels like the typing here should be inferred from the context, I'm trying to simplify. I'm in the process of trying it out by converting: https://github.com/exceptionless/Exceptionless/blob/main/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte#L44

@walker-tx walker-tx reopened this Apr 29, 2024
@walker-tx
Copy link
Author

@niemyjski Sorry that was on accident. It's open again.

@walker-tx
Copy link
Author

I can't provide any feedback as pr was closed but was also seeing:

not sure if any is banned in this project but I'm getting errors source importing and trying out.

Argument of type 'HeaderContext<TData, TValue> | CellContext<TData, TValue>' is not assignable to parameter of type 'HeaderContext<TData, TValue> & CellContext<TData, TValue>'.
Type 'HeaderContext<TData, TValue>' is not assignable to type 'HeaderContext<TData, TValue> & CellContext<TData, TValue>'.
Type 'HeaderContext<TData, TValue>' is missing the following properties from type 'CellContext<TData, TValue>': cell, getValue, renderValue, row

Feels like the typing here should be inferred from the context, I'm trying to simplify. I'm in the process of trying it out by converting: https://github.com/exceptionless/Exceptionless/blob/main/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte#L44

See this diff.

This narrows the type of content based on context. Not saying it's perfect, but without a minimal repro of the issue it's difficult for me to understand and address your specific case.

@walker-tx
Copy link
Author

walker-tx commented May 14, 2024

Hey @KevinVandy - may we re-open this discussion in anticipation of v5's official release? We discussed some options on releasing the adapter earlier:

  • Releasing a new, separate Svelte5 adapter package so Svelte4 compatibility is still maintained via the original (existing) adapter package, or
  • Replacing the existing Svelte4 adapter with this one alongside the next major version (v9) of table, or
  • Not releasing this adapter, but instead adding documentation to inform users how to implement TanStack Table in Svelte 5 without the existing package, or
  • Releasing this adapter separately as a "community adapter" until introducing this breaking update to svelte-table is less detrimental.

@niemyjski
Copy link

My vote is just to replace it, use the current version if you need 4.x

@lachlancollins lachlancollins changed the base branch from main to alpha May 21, 2024 08:15
@KevinVandy
Copy link
Member

We can go ahead and merge this into the alpha branch soon, but the documentation for svelte state and adapter needs to be updated with this.

@KevinVandy KevinVandy merged commit 12d4157 into TanStack:alpha Jun 12, 2024
2 checks passed
@walker-tx
Copy link
Author

I'll try and work on it this weekend.

@stefa168
Copy link

Hi, I know that v9 is still an alpha, however I am already using it with Svelte 5. Would it be possible to push a new release tag to have a more up to date version of the alpha available for npm?

@KevinVandy
Copy link
Member

The next large alpha release will be in a couple weeks probably

@stefa168
Copy link

stefa168 commented Sep 12, 2024 via email

@ddxv
Copy link

ddxv commented Oct 4, 2024

Hello, just looking to try out TanStack with Svelte 5. I went to the TanStack installation page which say this:

The @tanstack/svelte-table package works with Svelte 3 and Svelte 4.

NOTE: There is not a built-in Svelte 5 adapter yet, but you can still use TanStack Table with Svelte 5 by installing the
@tanstack/table-core package and using a custom adapter from the community. See this PR for inspiration.
https://tanstack.com/table/latest/docs/installation

This points to this PR. Now it appears the PR is merged into alpha? So I guess possibly the documentation might need a slight change, now that the PR is merged, how would the Basic Example work for importing this?

script lang="ts">
	import { writable } from 'svelte/store';
	import { flexRender, getCoreRowModel, createSvelteTable} from '@tanstack/svelte-table';
	import type { ColumnDef, TableOptions } from '@tanstack/svelte-table';
	...

I saw that flexRender -> FlexRender but createSvelteTable wasn't working. Additionally, I tried importing from @tanstack/table-core but this had issues do to type script?

Thanks!

@walker-tx
Copy link
Author

walker-tx commented Oct 4, 2024

@ddxv Things are rapidly evolving with the table-core package such that it's difficult to know exactly what will work at any moment. Alpha is not ready for production, and since so many things are in flux, I have to recommend against migrating to it for non-experimental work.

Seriously - please don't use alpha in production. Even if it works for you today, at some point it won't. We can't possibly support something so dynamic.

The documentation still holds true though. You should be able to copy the implementation shown here to make your own "adapter" using table-core v8 (the current production version). This PR was made for v8, not v9 (alpha). Any subsequent changes to the Svelte 5 adapter are for v9.

@ddxv
Copy link

ddxv commented Oct 5, 2024

@walker-tx thanks for being straight forward.

I'll be looking forward for when Svelte 5 is out and officially supported. Thanks!

@walker-tx
Copy link
Author

walker-tx commented Oct 8, 2024

After some of the questions on Discord and here, I've put together a reference project so folks can see how they can implement their own Svelte 5 adapter for @tanstack/table-core v8:

https://github.com/walker-tx/svelte5-tanstack-table-examples

Hopefully, this gives folks a clearer path to value.

Full disclosure: I threw this together in a caffeinated frenzy. Once I get some rest, I'll go back over everything with fresher eyes.

@ddxv ddxv mentioned this pull request Oct 9, 2024
3 tasks
@niemyjski
Copy link

Can we get a new alpha

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants