feat: add lit integration (#718) · TanStack/virtual@e02207d · GitHub
Skip to content

Commit e02207d

Browse files
kadoshmskadoshms
authored
feat: add lit integration (#718)
1 parent 217514c commit e02207d

25 files changed

Lines changed: 2207 additions & 0 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions

‎docs/framework/lit/lit-virtual.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Lit Virtual
3+
---
4+
5+
The `@tanstack/lit-virtual` adapter is a wrapper around the core virtual logic.
6+
7+
## `createVirtualizer`
8+
9+
```tsx
10+
11+
private virtualizerController = new VirtualizerController<TScrollElement, TItemElement = unknown>(
12+
options: PartialKeys< VirtualizerOptions<TScrollElement, TItemElement>,
13+
'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
14+
)
15+
```
16+
17+
This class stands for a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
18+
This will create a Lit Controller which can be accessed in the element render method.
19+
20+
```tsx
21+
render() {
22+
const virtualizer = this.virtualizerController.getVirtualizer();
23+
const virtualItems = virtualizer.getVirtualItems();
24+
}
25+
)
26+
```
27+
28+
## `createWindowVirtualizer`
29+
30+
```tsx
31+
private windowVirtualizerController = new WindowVirtualizerController<TItemElement = unknown>(
32+
options: PartialKeys< VirtualizerOptions<TItemElement>,
33+
'getScrollElement' | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
34+
```
35+
36+
This class stands of window-based `Virtualizer` instance configured to work with an HTML element as the scrollElement.

‎examples/lit/dynamic/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/lit/dynamic/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `npm`
6+
- `npm run start` or `npm run start`

‎examples/lit/dynamic/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script type="module" src="/src/main.ts"></script>
10+
<my-app></my-app>
11+
</body>
12+
</html>

‎examples/lit/dynamic/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "tanstack-lit-virtual-example-dynamic",
3+
"private": true,
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "tsc && vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"@faker-js/faker": "^7.6.0",
11+
"@tanstack/lit-virtual": "workspace:*",
12+
"@tanstack/virtual-core": "workspace:*",
13+
"lit": "^3.1.3"
14+
},
15+
"devDependencies": {
16+
"@rollup/plugin-replace": "^5.0.2",
17+
"@types/node": "^18.19.3",
18+
"typescript": "5.2.2",
19+
"vite": "^5.1.3"
20+
}
21+
}

‎examples/lit/dynamic/src/index.css‎

Lines changed: 8 additions & 0 deletions

0 commit comments

Comments
 (0)