feat: add lit integration (#718)

TanStack · Jun 24, 2024 · e02207d · e02207d
1 parent 217514c
commit e02207d
Show file tree

Hide file tree

Showing 25 changed files with 2,207 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,6 +34,7 @@ stats-hydration.json
 stats.json
 stats.html
 .vscode/settings.json
+.idea
 
 *.log
 .DS_Store

diff --git a/docs/framework/lit/lit-virtual.md b/docs/framework/lit/lit-virtual.md
@@ -0,0 +1,36 @@
+---
+title: Lit Virtual
+---
+
+The `@tanstack/lit-virtual` adapter is a wrapper around the core virtual logic.
+
+## `createVirtualizer`
+
+```tsx
+
+private virtualizerController = new VirtualizerController<TScrollElement, TItemElement = unknown>(
+    options: PartialKeys< VirtualizerOptions<TScrollElement, TItemElement>,
+    'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+)
+```
+
+This class stands for a standard `Virtualizer` instance configured to work with an HTML element as the scrollElement.
+This will create a Lit Controller which can be accessed in the element render method.
+
+```tsx
+render() {
+    const virtualizer = this.virtualizerController.getVirtualizer();
+    const virtualItems = virtualizer.getVirtualItems();
+} 
+)
+```
+
+## `createWindowVirtualizer`
+
+```tsx
+private windowVirtualizerController = new WindowVirtualizerController<TItemElement = unknown>(
+    options: PartialKeys< VirtualizerOptions<TItemElement>,
+    'getScrollElement' | 'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
+```
+
+This class stands of window-based `Virtualizer` instance configured to work with an HTML element as the scrollElement.
diff --git a/examples/lit/dynamic/.gitignore b/examples/lit/dynamic/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/lit/dynamic/README.md b/examples/lit/dynamic/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `npm`
+- `npm run start` or `npm run start`
diff --git a/examples/lit/dynamic/index.html b/examples/lit/dynamic/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <my-app></my-app>
+  </body>
+</html>
diff --git a/examples/lit/dynamic/package.json b/examples/lit/dynamic/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "tanstack-lit-virtual-example-dynamic",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^7.6.0",
+    "@tanstack/lit-virtual": "workspace:*",
+    "@tanstack/virtual-core": "workspace:*",
+    "lit": "^3.1.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.2",
+    "@types/node": "^18.19.3",
+    "typescript": "5.2.2",
+    "vite": "^5.1.3"
+  }
+}
diff --git a/examples/lit/dynamic/src/index.css b/examples/lit/dynamic/src/index.css
@@ -0,0 +1,8 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+body {
+  padding: 1rem;
+}