fix(virtual-core): add bigint to Key to align with @types/react implementation

[huv1k]

This PR enhances Key type with bigint to align with React.Key. This was updated in DefinitelyTyped/DefinitelyTyped#66723. This will enable us to use React.Key as type for where we require Key as type.

[SaeWooKKang]

If changed like that, it might be more convenient when using React.

However, Should the higher-level element 'core' depend on the lower-level element 'react'?
How about using type casting in React?

const alsoHuge = BigInt(9007199254740991);

alsoHuge.toString();

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 892a4d5. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

commit: 892a4d5

@tanstack/angular-virtual

pnpm add https://pkg.pr.new/@tanstack/angular-virtual@814

@tanstack/lit-virtual

pnpm add https://pkg.pr.new/@tanstack/lit-virtual@814

@tanstack/react-virtual

pnpm add https://pkg.pr.new/@tanstack/react-virtual@814

@tanstack/solid-virtual

pnpm add https://pkg.pr.new/@tanstack/solid-virtual@814

@tanstack/svelte-virtual

pnpm add https://pkg.pr.new/@tanstack/svelte-virtual@814

@tanstack/virtual-core

pnpm add https://pkg.pr.new/@tanstack/virtual-core@814

@tanstack/vue-virtual

pnpm add https://pkg.pr.new/@tanstack/vue-virtual@814

Open in Stackblitz

More templates

• @tanstack/virtual-example-angular-dynamic
• @tanstack/virtual-example-angular-fixed
• @tanstack/virtual-example-angular-infinite-scroll
• @tanstack/virtual-example-angular-padding
• @tanstack/virtual-example-angular-smooth-scroll
• @tanstack/virtual-example-angular-sticky
• @tanstack/virtual-example-angular-table
• @tanstack/virtual-example-angular-variable
• @tanstack/virtual-example-angular-window
• tanstack-lit-virtual-example-dynamic
• tanstack-lit-virtual-example-fixed
• tanstack-react-virtual-example-dynamic
• tanstack-react-virtual-example-fixed
• tanstack-react-virtual-example-infinite-scroll
• tanstack-react-virtual-example-padding
• tanstack-react-virtual-example-scroll-padding
• tanstack-react-virtual-example-smooth-scroll
• tanstack-react-virtual-example-sticky
• tanstack-react-virtual-example-table
• tanstack-react-virtual-example-variable
• tanstack-react-virtual-example-window
• tanstack-svelte-virtual-example-dynamic
• tanstack-svelte-virtual-example-fixed
• tanstack-svelte-virtual-example-infinite-scroll
• tanstack-svelte-virtual-example-smooth-scroll
• tanstack-svelte-virtual-example-sticky
• tanstack-svelte-virtual-example-table
• tanstack-vue-virtual-example-dynamic
• tanstack-vue-virtual-example-fixed
• tanstack-vue-virtual-example-infinite-scroll
• tanstack-vue-virtual-example-padding
• tanstack-vue-virtual-example-scroll-padding
• tanstack-vue-virtual-example-smooth-scroll
• tanstack-vue-virtual-example-sticky
• tanstack-vue-virtual-example-table
• tanstack-vue-virtual-example-variable

[piecyk]

However, Should the higher-level element 'core' depend on the lower-level element 'react'?

@SaeWooKKang allowing bigint as key is not really connected to react

[huv1k]

Yes, the problem is when you use Key from react, because it has a different type and there is an error, which shouldn't be the case. Is there anything more needed?

[SaeWooKKang]

@SaeWooKKang allowing bigint as key is not really connected to react

You're right, there isn't a direct connection. However, my comment was about whether it's appropriate to add a type to the key specifically for the purpose of using it with React.

Yes, the problem is when you use Key from react, because it has a different type and there is an error, which shouldn't be the case. Is there anything more needed?

Is there no need to modify the documentation for the type?

[piecyk]

However, my comment was about whether it's appropriate to add a type to the key specifically for the purpose of using it with React.

Yep, thanks for the input. I think we are fine here, as bigint is overall an primitive not a react thing.

Is there no need to modify the documentation for the type?

good catch, @huv1k can you update docs at https://github.com/TanStack/virtual/blob/main/docs/api/virtual-item.md

[huv1k]

However, my comment was about whether it's appropriate to add a type to the key specifically for the purpose of using it with React.

Yep, thanks for the input. I think we are fine here, as bigint is overall an primitive not a react thing.

Is there no need to modify the documentation for the type?

good catch, @huv1k can you update docs at https://github.com/TanStack/virtual/blob/main/docs/api/virtual-item.md

Updated 🙌

[kkx64]

Why not just use the React type for keys?

[piecyk]

Why not just use the React type for keys?

As core should not be bound to any lib, adding the bigint created other issues like #819

[kkx64]

Why not just use the React type for keys?

As core should not be bound to any lib, adding the bigint created other issues like #819

Fair enough, I forgot that the core can be used across different frameworks