diff --git a/docs/config.json b/docs/config.json index 6e0796db..4c1f7d37 100644 --- a/docs/config.json +++ b/docs/config.json @@ -85,6 +85,51 @@ "children": [ { "label": "Solid Virtual", "to": "framework/solid/solid-virtual" } ] + }, + { + "label": "Examples", + "children": [ + { + "to": "framework/solid/examples/fixed", + "label": "Fixed" + }, + { + "to": "framework/solid/examples/variable", + "label": "Variable" + }, + { + "to": "framework/solid/examples/dynamic", + "label": "Dynamic" + }, + { + "to": "framework/solid/examples/sticky", + "label": "Sticky" + }, + { + "to": "framework/solid/examples/infinite-scroll", + "label": "Infinite Scroll" + }, + { + "to": "framework/solid/examples/smooth-scroll", + "label": "Smooth Scroll" + }, + { + "to": "framework/solid/examples/table", + "label": "Table" + }, + { + "to": "framework/solid/examples/padding", + "label": "Padding" + }, + { + "to": "framework/solid/examples/scroll-padding", + "label": "Scroll Padding" + }, + { + "to": "framework/solid/examples/window", + "label": "Window" + } + ] } ] }, diff --git a/examples/react/dynamic/package.json b/examples/react/dynamic/package.json index af6224a8..8c119034 100644 --- a/examples/react/dynamic/package.json +++ b/examples/react/dynamic/package.json @@ -7,7 +7,7 @@ "serve": "vite preview" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/react-virtual": "^3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/sticky/package.json b/examples/react/sticky/package.json index d2d1336d..e389cc79 100644 --- a/examples/react/sticky/package.json +++ b/examples/react/sticky/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/react-virtual": "^3.1.0", "lodash": "^4.17.21", "react": "^18.2.0", diff --git a/examples/react/table/package.json b/examples/react/table/package.json index 224c415d..640b9ef4 100644 --- a/examples/react/table/package.json +++ b/examples/react/table/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/react-table": "^8.7.9", "@tanstack/react-virtual": "^3.1.0", "react": "^18.2.0", diff --git a/examples/solid/dynamic/.gitignore b/examples/solid/dynamic/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/dynamic/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/dynamic/README.md b/examples/solid/dynamic/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/dynamic/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/dynamic/index.html b/examples/solid/dynamic/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/dynamic/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/dynamic/package.json b/examples/solid/dynamic/package.json new file mode 100644 index 00000000..242ed914 --- /dev/null +++ b/examples/solid/dynamic/package.json @@ -0,0 +1,21 @@ +{ + "name": "tanstack-solid-virtual-example-dynamic", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@faker-js/faker": "^8.3.1", + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/dynamic/public/vite.svg b/examples/solid/dynamic/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/dynamic/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/dynamic/src/App.tsx b/examples/solid/dynamic/src/App.tsx new file mode 100644 index 00000000..43455be5 --- /dev/null +++ b/examples/solid/dynamic/src/App.tsx @@ -0,0 +1,388 @@ +import { faker } from '@faker-js/faker' +import { + createVirtualizer, + createWindowVirtualizer, +} from '@tanstack/solid-virtual' +import { For, Show, createMemo, createSignal, onMount } from 'solid-js' + +const randomNumber = (min: number, max: number) => + faker.datatype.number({ min, max }) + +const sentences = new Array(10000) + .fill(true) + .map(() => faker.lorem.sentence(randomNumber(20, 70))) + +function App() { + const pathname = location.pathname + + return ( +
+

+ These components are using dynamic sizes. This means + that each element's exact dimensions are unknown when rendered. An + estimated dimension is used to get an a initial measurement, then this + measurement is readjusted on the fly as each element is rendered. +

+ + + + + + + + + + + + + +
+ ) +} + +function RowVirtualizerDynamic() { + let parentRef!: HTMLDivElement + + const count = sentences.length + + const virtualizer = createVirtualizer({ + count, + getScrollElement: () => parentRef, + estimateSize: () => 45, + }) + + const items = virtualizer.getVirtualItems() + + return ( +
+ + + + + +
+
+
+
+ + {(virtualRow) => { + let ref!: HTMLDivElement + onMount(() => virtualizer.measureElement(ref)) + + return ( +
+
+
Row {virtualRow.index}
+
{sentences[virtualRow.index]}
+
+
+ ) + }} + +
+
+
+
+ ) +} + +function RowVirtualizerDynamicWindow() { + let listRef!: HTMLDivElement + + const [scrollMargin, setScrollMargin] = createSignal(0) + onMount(() => setScrollMargin(listRef.offsetTop)) + + const virtualizer = createWindowVirtualizer({ + count: sentences.length, + estimateSize: () => 45, + get scrollMargin() { + return scrollMargin() + }, + }) + + const items = virtualizer.getVirtualItems() + + return ( +
+
+ + {(virtualRow) => { + let ref!: HTMLDivElement + onMount(() => virtualizer.measureElement(ref)) + + return ( +
+
+
Row {virtualRow.index}
+
{sentences[virtualRow.index]}
+
+
+ ) + }} + +
+
+ ) +} + +function ColumnVirtualizerDynamic() { + let parentRef!: HTMLDivElement + + const virtualizer = createVirtualizer({ + horizontal: true, + count: sentences.length, + getScrollElement: () => parentRef, + estimateSize: () => 45, + }) + + return ( +
+
+ + {(virtualColumn) => { + let ref!: HTMLDivElement + onMount(() => virtualizer.measureElement(ref)) + + return ( +
+
+
Column {virtualColumn.index}
+
{sentences[virtualColumn.index]}
+
+
+ ) + }} + +
+
+ ) +} + +const generateColumns = (count: number) => { + return new Array(count).fill(0).map((_, i) => { + const key: string = i.toString() + return { + key, + name: `Column ${i}`, + width: randomNumber(75, 300), + } + }) +} + +const generateData = ( + columns: ReturnType, + count = 300, +) => { + return new Array(count).fill(0).map((_, rowIndex) => + columns.reduce((acc, _, colIndex) => { + // simulate dynamic size cells + const val = faker.lorem.lines(((rowIndex + colIndex) % 10) + 1) + + acc.push(val) + + return acc + }, []), + ) +} + +function GridVirtualizerVariable() { + let parentRef!: HTMLDivElement + + const [scrollMargin, setScrollMargin] = createSignal(0) + onMount(() => setScrollMargin(parentRef.offsetTop)) + + const columns = generateColumns(30) + const data = generateData(columns) + + const getColumnWidth = (index: number) => columns[index].width + + const virtualizer = createWindowVirtualizer({ + count: data.length, + estimateSize: () => 350, + overscan: 5, + get scrollMargin() { + return scrollMargin() + }, + }) + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: columns.length, + getScrollElement: () => parentRef, + estimateSize: getColumnWidth, + overscan: 5, + }) + + const columnItems = columnVirtualizer.getVirtualItems() + + const position = createMemo(() => { + if (columnItems.length === 0) return [0, 0] + return [ + columnItems[0].start, + columnVirtualizer.getTotalSize() - + columnItems[columnItems.length - 1].end, + ] + }) + + return ( +
+
+ + {(row) => { + let ref!: HTMLDivElement + onMount(() => virtualizer.measureElement(ref)) + + return ( +
+
+ + {(column) => ( +
+ {columns[column.index].name}
} + > +
{data[row.index][column.index]}
+ +
+ )} + +
+
+ ) + }} + +
+
+ ) +} + +export default App diff --git a/examples/solid/dynamic/src/index.css b/examples/solid/dynamic/src/index.css new file mode 100644 index 00000000..7ca2a750 --- /dev/null +++ b/examples/solid/dynamic/src/index.css @@ -0,0 +1,27 @@ +*, +*:before, +*:after { + box-sizing: border-box; +} + +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} + +.ListItemEven { + background-color: #e6e4dc; +} + +button { + border: 1px solid gray; +} diff --git a/examples/solid/dynamic/src/index.tsx b/examples/solid/dynamic/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/dynamic/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/dynamic/src/vite-env.d.ts b/examples/solid/dynamic/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/dynamic/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/dynamic/tsconfig.json b/examples/solid/dynamic/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/dynamic/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/dynamic/tsconfig.node.json b/examples/solid/dynamic/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/dynamic/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/dynamic/vite.config.ts b/examples/solid/dynamic/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/dynamic/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/fixed/.gitignore b/examples/solid/fixed/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/fixed/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/fixed/README.md b/examples/solid/fixed/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/fixed/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/fixed/index.html b/examples/solid/fixed/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/fixed/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/fixed/package.json b/examples/solid/fixed/package.json new file mode 100644 index 00000000..e3122c75 --- /dev/null +++ b/examples/solid/fixed/package.json @@ -0,0 +1,20 @@ +{ + "name": "tanstack-solid-virtual-example-fixed", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/fixed/public/vite.svg b/examples/solid/fixed/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/fixed/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/fixed/src/App.tsx b/examples/solid/fixed/src/App.tsx new file mode 100644 index 00000000..999b22f1 --- /dev/null +++ b/examples/solid/fixed/src/App.tsx @@ -0,0 +1,203 @@ +import { createVirtualizer } from '@tanstack/solid-virtual' +import { For } from 'solid-js' + +function App() { + return ( +
+

+ These components are using fixed sizes. This means that + every element's dimensions are hard-coded to the same value and never + change. +

+
+
+ +

Rows

+ +
+
+

Columns

+ +
+
+

Grid

+ +
+ ) +} + +function RowVirtualizerFixed() { + let parentRef!: HTMLDivElement + + const rowVirtualizer = createVirtualizer({ + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 35, + overscan: 5, + }) + + return ( + <> +
+
+ + {(virtualRow) => ( +
+ Row {virtualRow.index} +
+ )} + +
+
+ + ) +} + +function ColumnVirtualizerFixed() { + let parentRef!: HTMLDivElement + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 100, + overscan: 5, + }) + + return ( + <> +
+
+ + {(virtualColumn) => ( +
+ Column {virtualColumn.index} +
+ )} + +
+
+ + ) +} + +function GridVirtualizerFixed() { + let parentRef!: HTMLDivElement + + const rowVirtualizer = createVirtualizer({ + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 35, + overscan: 5, + }) + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 100, + overscan: 5, + }) + + return ( + <> +
+
+ + {(virtualRow) => ( + + {(virtualColumn) => ( +
+ Cell {virtualRow.index}, {virtualColumn.index} +
+ )} + + )} + +
+
+ + ) +} + +export default App diff --git a/examples/solid/fixed/src/index.css b/examples/solid/fixed/src/index.css new file mode 100644 index 00000000..45d24164 --- /dev/null +++ b/examples/solid/fixed/src/index.css @@ -0,0 +1,24 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} + +.ListItemEven, +.ListItemOdd { + display: flex; + align-items: center; + justify-content: center; +} + +.ListItemEven { + background-color: #e6e4dc; +} diff --git a/examples/solid/fixed/src/index.tsx b/examples/solid/fixed/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/fixed/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/fixed/src/vite-env.d.ts b/examples/solid/fixed/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/fixed/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/fixed/tsconfig.json b/examples/solid/fixed/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/fixed/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/fixed/tsconfig.node.json b/examples/solid/fixed/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/fixed/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/fixed/vite.config.ts b/examples/solid/fixed/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/fixed/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/infinite-scroll/.gitignore b/examples/solid/infinite-scroll/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/infinite-scroll/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/infinite-scroll/README.md b/examples/solid/infinite-scroll/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/infinite-scroll/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/infinite-scroll/index.html b/examples/solid/infinite-scroll/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/infinite-scroll/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/infinite-scroll/package.json b/examples/solid/infinite-scroll/package.json new file mode 100644 index 00000000..c28a5c29 --- /dev/null +++ b/examples/solid/infinite-scroll/package.json @@ -0,0 +1,21 @@ +{ + "name": "tanstack-solid-virtual-example-infinite-scroll", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/solid-query": "^5.17.19", + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/infinite-scroll/public/vite.svg b/examples/solid/infinite-scroll/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/infinite-scroll/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/infinite-scroll/src/App.tsx b/examples/solid/infinite-scroll/src/App.tsx new file mode 100644 index 00000000..b4e5fcfb --- /dev/null +++ b/examples/solid/infinite-scroll/src/App.tsx @@ -0,0 +1,125 @@ +import { createInfiniteQuery } from '@tanstack/solid-query' +import { createVirtualizer } from '@tanstack/solid-virtual' +import { For, Show, createEffect, createMemo } from 'solid-js' + +async function fetchServerPage(limit: number, offset: number = 0) { + const rows = new Array(limit) + .fill(0) + .map((_, i) => `Async loaded row #${i + offset * limit}`) + + await new Promise((r) => setTimeout(r, 500)) + + return { rows, nextOffset: offset + 1 } +} + +function App() { + let parentRef!: HTMLDivElement + + const query = createInfiniteQuery(() => ({ + queryKey: ['projects'], + queryFn: ({ pageParam }) => fetchServerPage(10, pageParam), + getNextPageParam: (_, groups) => groups.length, + initialPageParam: 0, + })) + + const allRows = createMemo(() => + query.data ? query.data.pages.flatMap((d) => d.rows) : [], + ) + + const rowVirtualizer = createVirtualizer({ + get count() { + return query.hasNextPage ? allRows().length + 1 : allRows().length + }, + getScrollElement: () => parentRef, + estimateSize: () => 100, + overscan: 5, + }) + + createEffect(() => { + const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse() + if (!lastItem) return + + if ( + lastItem.index >= allRows().length - 1 && + query.hasNextPage && + !query.isFetchingNextPage + ) { + query.fetchNextPage() + } + }) + + return ( +
+

+ This infinite scroll example uses Solid Query's createInfiniteQuery + function to fetch infinite data from a posts endpoint and then a + rowVirtualizer is used along with a loader-row placed at the bottom of + the list to trigger the next page to load. +

+
+
+ + +

Loading...

+ + + + Error: {query.error?.message} + + + +
+
+ + {(virtualRow) => ( +
+ allRows().length - 1} + fallback={allRows()[virtualRow.index]} + > + + Loading more... + + +
+ )} + +
+
+ + + +

Background Updating...

+ +
+ ) +} + +export default App diff --git a/examples/solid/infinite-scroll/src/index.css b/examples/solid/infinite-scroll/src/index.css new file mode 100644 index 00000000..45d24164 --- /dev/null +++ b/examples/solid/infinite-scroll/src/index.css @@ -0,0 +1,24 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} + +.ListItemEven, +.ListItemOdd { + display: flex; + align-items: center; + justify-content: center; +} + +.ListItemEven { + background-color: #e6e4dc; +} diff --git a/examples/solid/infinite-scroll/src/index.tsx b/examples/solid/infinite-scroll/src/index.tsx new file mode 100644 index 00000000..b180d8cb --- /dev/null +++ b/examples/solid/infinite-scroll/src/index.tsx @@ -0,0 +1,18 @@ +/* @refresh reload */ +import { QueryClient, QueryClientProvider } from '@tanstack/solid-query' +import { render } from 'solid-js/web' +import App from './App' +import './index.css' + +const queryClient = new QueryClient() + +const root = document.getElementById('root') + +render( + () => ( + + + + ), + root!, +) diff --git a/examples/solid/infinite-scroll/src/vite-env.d.ts b/examples/solid/infinite-scroll/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/infinite-scroll/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/infinite-scroll/tsconfig.json b/examples/solid/infinite-scroll/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/infinite-scroll/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/infinite-scroll/tsconfig.node.json b/examples/solid/infinite-scroll/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/infinite-scroll/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/infinite-scroll/vite.config.ts b/examples/solid/infinite-scroll/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/infinite-scroll/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/padding/.gitignore b/examples/solid/padding/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/padding/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/padding/README.md b/examples/solid/padding/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/padding/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/padding/index.html b/examples/solid/padding/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/padding/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/padding/package.json b/examples/solid/padding/package.json new file mode 100644 index 00000000..58bc82cc --- /dev/null +++ b/examples/solid/padding/package.json @@ -0,0 +1,20 @@ +{ + "name": "tanstack-solid-virtual-example-padding", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/padding/public/vite.svg b/examples/solid/padding/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/padding/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/padding/src/App.tsx b/examples/solid/padding/src/App.tsx new file mode 100644 index 00000000..dd4e745a --- /dev/null +++ b/examples/solid/padding/src/App.tsx @@ -0,0 +1,206 @@ +import { createVirtualizer } from '@tanstack/solid-virtual' +import { For } from 'solid-js' + +function App() { + return ( +
+

+ Examples with additional padding applied to the start + and the end of the scrolling area. +

+
+
+ +

Rows

+ +
+
+

Columns

+ +
+
+

Grid

+ +
+ ) +} + +function RowVirtualizerPadding() { + let parentRef!: HTMLDivElement + + const rowVirtualizer = createVirtualizer({ + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 35, + paddingStart: 100, + paddingEnd: 100, + }) + + return ( + <> +
+
+ + {(virtualRow) => ( +
+ Row {virtualRow.index} +
+ )} + +
+
+ + ) +} + +function ColumnVirtualizerPadding() { + let parentRef!: HTMLDivElement + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 100, + paddingStart: 100, + paddingEnd: 100, + }) + + return ( + <> +
+
+ + {(virtualColumn) => ( +
+ Column {virtualColumn.index} +
+ )} + +
+
+ + ) +} + +function GridVirtualizerPadding() { + let parentRef!: HTMLDivElement + + const rowVirtualizer = createVirtualizer({ + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 35, + paddingStart: 100, + paddingEnd: 100, + }) + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 100, + paddingStart: 100, + paddingEnd: 100, + }) + + return ( + <> +
+
+ + {(virtualRow) => ( + + {(virtualColumn) => ( +
+ Cell {virtualRow.index}, {virtualColumn.index} +
+ )} + + )} + +
+
+ + ) +} + +export default App diff --git a/examples/solid/padding/src/index.css b/examples/solid/padding/src/index.css new file mode 100644 index 00000000..45d24164 --- /dev/null +++ b/examples/solid/padding/src/index.css @@ -0,0 +1,24 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} + +.ListItemEven, +.ListItemOdd { + display: flex; + align-items: center; + justify-content: center; +} + +.ListItemEven { + background-color: #e6e4dc; +} diff --git a/examples/solid/padding/src/index.tsx b/examples/solid/padding/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/padding/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/padding/src/vite-env.d.ts b/examples/solid/padding/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/padding/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/padding/tsconfig.json b/examples/solid/padding/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/padding/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/padding/tsconfig.node.json b/examples/solid/padding/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/padding/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/padding/vite.config.ts b/examples/solid/padding/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/padding/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/scroll-padding/.gitignore b/examples/solid/scroll-padding/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/scroll-padding/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/scroll-padding/README.md b/examples/solid/scroll-padding/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/scroll-padding/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/scroll-padding/index.html b/examples/solid/scroll-padding/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/scroll-padding/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/scroll-padding/package.json b/examples/solid/scroll-padding/package.json new file mode 100644 index 00000000..9c90228a --- /dev/null +++ b/examples/solid/scroll-padding/package.json @@ -0,0 +1,20 @@ +{ + "name": "tanstack-solid-virtual-example-scroll-padding", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/scroll-padding/public/vite.svg b/examples/solid/scroll-padding/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/scroll-padding/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/scroll-padding/src/App.tsx b/examples/solid/scroll-padding/src/App.tsx new file mode 100644 index 00000000..bb9912da --- /dev/null +++ b/examples/solid/scroll-padding/src/App.tsx @@ -0,0 +1,85 @@ +import { createVirtualizer } from '@tanstack/solid-virtual' +import { For, createSignal, onMount } from 'solid-js' + +function App() { + let parentRef!: HTMLDivElement + let tableHeader!: HTMLTableSectionElement + + const [headerHeight, setHeaderHeight] = createSignal(0) + onMount(() => setHeaderHeight(tableHeader.clientHeight)) + + const rowVirtualizer = createVirtualizer({ + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 35, + overscan: 5, + get paddingStart() { + return headerHeight() + }, + get scrollPaddingStart() { + return headerHeight() + }, + }) + + return ( + <> +
+ + +
+ +
+
+ +
+ + + + + + + + + + {(virtualRow) => ( + + + + + )} + + +
IndexKey
{virtualRow.index}{virtualRow.key}
+
+ + ) +} + +export default App diff --git a/examples/solid/scroll-padding/src/index.css b/examples/solid/scroll-padding/src/index.css new file mode 100644 index 00000000..9b04143e --- /dev/null +++ b/examples/solid/scroll-padding/src/index.css @@ -0,0 +1,48 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +.List table { + background-color: #fff; + border: 1px solid #e6e4dc; + max-width: 100%; + border-collapse: collapse; + + display: flex; + flex-direction: column; + align-items: stretch; + position: relative; +} + +.List thead { + display: flex; + flex-direction: column; + background-color: #fff; + + position: sticky; + top: 0; + z-index: 1; +} + +.List thead tr { + height: 70px; +} + +.List tr { + display: flex; + flex-direction: row; +} + +.List td, +.List th { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 180px; +} + +.ListItemEven { + background-color: #e6e4dc; +} diff --git a/examples/solid/scroll-padding/src/index.tsx b/examples/solid/scroll-padding/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/scroll-padding/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/scroll-padding/src/vite-env.d.ts b/examples/solid/scroll-padding/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/scroll-padding/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/scroll-padding/tsconfig.json b/examples/solid/scroll-padding/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/scroll-padding/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/scroll-padding/tsconfig.node.json b/examples/solid/scroll-padding/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/scroll-padding/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/scroll-padding/vite.config.ts b/examples/solid/scroll-padding/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/scroll-padding/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/smooth-scroll/.gitignore b/examples/solid/smooth-scroll/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/smooth-scroll/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/smooth-scroll/README.md b/examples/solid/smooth-scroll/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/smooth-scroll/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/smooth-scroll/index.html b/examples/solid/smooth-scroll/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/smooth-scroll/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/smooth-scroll/package.json b/examples/solid/smooth-scroll/package.json new file mode 100644 index 00000000..034aa988 --- /dev/null +++ b/examples/solid/smooth-scroll/package.json @@ -0,0 +1,20 @@ +{ + "name": "tanstack-solid-virtual-example-smooth-scroll", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/smooth-scroll/public/vite.svg b/examples/solid/smooth-scroll/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/smooth-scroll/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/smooth-scroll/src/App.tsx b/examples/solid/smooth-scroll/src/App.tsx new file mode 100644 index 00000000..afbb69cb --- /dev/null +++ b/examples/solid/smooth-scroll/src/App.tsx @@ -0,0 +1,128 @@ +import { + VirtualizerOptions, + createVirtualizer, + elementScroll, +} from '@tanstack/solid-virtual' +import { For, createSignal, onMount } from 'solid-js' + +function App() { + return ( +
+

+ This smooth scroll example uses the `scrollToFn` to + implement a custom scrolling function for the methods like{' '} + `scrollToIndex` and `scrollToOffset` +

+
+
+ + +
+ ) +} + +function easeInOutQuint(t: number) { + return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t +} + +function generateRandomIndex() { + return Math.floor(Math.random() * 10000) +} + +function RowVirtualizer() { + let parentRef!: HTMLDivElement + let time = Date.now() + + const [scrollToFn, setScrollToFn] = + createSignal['scrollToFn']>() + + onMount(() => { + setScrollToFn(() => (offset, canSmooth, instance) => { + const duration = 1000 + const start = parentRef.scrollTop + const startTime = (time = Date.now()) + + const run = () => { + if (time !== startTime) return + const now = Date.now() + const elapsed = now - startTime + const progress = easeInOutQuint(Math.min(elapsed / duration, 1)) + const interpolated = start + (offset - start) * progress + + if (elapsed < duration) { + elementScroll(interpolated, canSmooth, instance) + requestAnimationFrame(run) + } else { + elementScroll(interpolated, canSmooth, instance) + } + } + + requestAnimationFrame(run) + }) + }) + + const rowVirtualizer = createVirtualizer({ + count: 10000, + getScrollElement: () => parentRef, + estimateSize: () => 35, + get scrollToFn() { + return scrollToFn() + }, + }) + + const [randomIndex, setRandomIndex] = createSignal(generateRandomIndex()) + + return ( + <> +
+ +
+
+
+
+
+ + {(virtualRow) => ( +
+ Row {virtualRow.index} +
+ )} + +
+
+ + ) +} + +export default App diff --git a/examples/solid/smooth-scroll/src/index.css b/examples/solid/smooth-scroll/src/index.css new file mode 100644 index 00000000..c46155fa --- /dev/null +++ b/examples/solid/smooth-scroll/src/index.css @@ -0,0 +1,28 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} + +.ListItemEven, +.ListItemOdd { + display: flex; + align-items: center; + justify-content: center; +} + +.ListItemEven { + background-color: #e6e4dc; +} + +button { + border: 1px solid gray; +} diff --git a/examples/solid/smooth-scroll/src/index.tsx b/examples/solid/smooth-scroll/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/smooth-scroll/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/smooth-scroll/src/vite-env.d.ts b/examples/solid/smooth-scroll/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/smooth-scroll/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/smooth-scroll/tsconfig.json b/examples/solid/smooth-scroll/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/smooth-scroll/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/smooth-scroll/tsconfig.node.json b/examples/solid/smooth-scroll/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/smooth-scroll/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/smooth-scroll/vite.config.ts b/examples/solid/smooth-scroll/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/smooth-scroll/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/sticky/.gitignore b/examples/solid/sticky/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/sticky/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/sticky/README.md b/examples/solid/sticky/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/sticky/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/sticky/index.html b/examples/solid/sticky/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/sticky/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/sticky/package.json b/examples/solid/sticky/package.json new file mode 100644 index 00000000..7d76008e --- /dev/null +++ b/examples/solid/sticky/package.json @@ -0,0 +1,23 @@ +{ + "name": "tanstack-solid-virtual-example-sticky", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@faker-js/faker": "^8.3.1", + "@tanstack/solid-virtual": "3.0.1", + "lodash": "^4.17.21", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "@types/lodash": "^4.14.202", + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/sticky/public/vite.svg b/examples/solid/sticky/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/sticky/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/sticky/src/App.tsx b/examples/solid/sticky/src/App.tsx new file mode 100644 index 00000000..cf91d649 --- /dev/null +++ b/examples/solid/sticky/src/App.tsx @@ -0,0 +1,101 @@ +import { + createVirtualizer, + defaultRangeExtractor, +} from '@tanstack/solid-virtual' +import { For, createSignal } from 'solid-js' + +import { faker } from '@faker-js/faker' +import { findIndex, groupBy } from 'lodash' + +const groupedNames = groupBy( + Array.from({ length: 1000 }) + .map(() => faker.person.firstName()) + .sort(), + (name) => name[0], +) +const groups = Object.keys(groupedNames) +const rows = groups.reduce( + (acc, k) => [...acc, k, ...groupedNames[k]], + [] as string[], +) +const stickyIndexes = groups.map((gn) => findIndex(rows, (n) => n === gn)) + +const isSticky = (index: number) => stickyIndexes.includes(index) + +function App() { + let parentRef!: HTMLDivElement + + const [activeStickyIndex, setActiveStickyIndex] = createSignal(0) + + const rowVirtualizer = createVirtualizer({ + count: rows.length, + getScrollElement: () => parentRef, + estimateSize: () => 50, + overscan: 5, + rangeExtractor: (range) => { + const activeIndex = [...stickyIndexes] + .reverse() + .find((index) => range.startIndex >= index)! + + setActiveStickyIndex(activeIndex) + + const next = new Set([activeIndex, ...defaultRangeExtractor(range)]) + + return [...next].sort((a, b) => a - b) + }, + }) + + const isActiveSticky = (index: number) => activeStickyIndex() === index + + return ( +
+
+ + {(virtualRow) => { + return ( +
+ {rows[virtualRow.index]} +
+ ) + }} + +
+
+ ) +} + +export default App diff --git a/examples/solid/sticky/src/index.css b/examples/solid/sticky/src/index.css new file mode 100644 index 00000000..f8f171b2 --- /dev/null +++ b/examples/solid/sticky/src/index.css @@ -0,0 +1,13 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} diff --git a/examples/solid/sticky/src/index.tsx b/examples/solid/sticky/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/sticky/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/sticky/src/vite-env.d.ts b/examples/solid/sticky/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/sticky/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/sticky/tsconfig.json b/examples/solid/sticky/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/sticky/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/sticky/tsconfig.node.json b/examples/solid/sticky/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/sticky/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/sticky/vite.config.ts b/examples/solid/sticky/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/sticky/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/table/.gitignore b/examples/solid/table/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/table/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/table/README.md b/examples/solid/table/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/table/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/table/index.html b/examples/solid/table/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/table/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/table/package.json b/examples/solid/table/package.json new file mode 100644 index 00000000..32e5237e --- /dev/null +++ b/examples/solid/table/package.json @@ -0,0 +1,22 @@ +{ + "name": "tanstack-solid-virtual-example-table", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@faker-js/faker": "^8.3.1", + "@tanstack/solid-table": "^8.11.7", + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/table/public/vite.svg b/examples/solid/table/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/table/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/table/src/App.tsx b/examples/solid/table/src/App.tsx new file mode 100644 index 00000000..3cd41a11 --- /dev/null +++ b/examples/solid/table/src/App.tsx @@ -0,0 +1,167 @@ +import { + ColumnDef, + createSolidTable, + flexRender, + getCoreRowModel, + getSortedRowModel, + SortingState, +} from '@tanstack/solid-table' +import { createVirtualizer } from '@tanstack/solid-virtual' +import { createMemo, createSignal, For, Show } from 'solid-js' +import { makeData, Person } from './makeData' + +const data = makeData(50_000) + +const columns: ColumnDef[] = [ + { + accessorKey: 'id', + header: 'ID', + size: 60, + }, + { + accessorKey: 'firstName', + cell: (info) => info.getValue(), + }, + { + accessorFn: (row) => row.lastName, + id: 'lastName', + cell: (info) => info.getValue(), + header: () => 'Last Name', + }, + { + accessorKey: 'age', + header: () => 'Age', + size: 50, + }, + { + accessorKey: 'visits', + header: () => 'Visits', + size: 50, + }, + { + accessorKey: 'status', + header: 'Status', + }, + { + accessorKey: 'progress', + header: 'Profile Progress', + size: 80, + }, + { + accessorKey: 'createdAt', + header: 'Created At', + cell: (info) => info.getValue().toLocaleString(), + }, +] + +function App() { + const [sorting, setSorting] = createSignal([]) + + const table = createSolidTable({ + data, + columns, + state: { + get sorting() { + return sorting() + }, + }, + onSortingChange: setSorting, + getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), + debugTable: true, + }) + + let parentRef!: HTMLDivElement + + const rows = createMemo(() => table.getRowModel().rows) + + const rowVirtualizer = createVirtualizer({ + get count() { + return rows().length + }, + getScrollElement: () => parentRef, + estimateSize: () => 34, + overscan: 5, + }) + + return ( +
+

+ For tables, the basis for the offset of the translate css function is + from the row's initial position itself. Because of this, we need to + calculate the translateY pixel count different and base it off the the + index. +

+ +
+
+ + + + {(headerGroup) => ( + + + {(header) => ( + + )} + + + )} + + + + + {(virtualRow, index) => ( + + + {(cell) => ( + + )} + + + )} + + +
+ +
+ {flexRender( + header.column.columnDef.header, + header.getContext(), + )} + {{ + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? null} +
+ +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
+
+
+
+ ) +} + +export default App diff --git a/examples/solid/table/src/index.css b/examples/solid/table/src/index.css new file mode 100644 index 00000000..92080981 --- /dev/null +++ b/examples/solid/table/src/index.css @@ -0,0 +1,20 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.cursor-pointer { + cursor: pointer; +} + +.select-none { + user-select: none; +} + +.text-left { + text-align: left; +} diff --git a/examples/solid/table/src/index.tsx b/examples/solid/table/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/table/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/table/src/makeData.ts b/examples/solid/table/src/makeData.ts new file mode 100644 index 00000000..7e5f966d --- /dev/null +++ b/examples/solid/table/src/makeData.ts @@ -0,0 +1,50 @@ +import { faker } from '@faker-js/faker' + +export type Person = { + id: number + firstName: string + lastName: string + age: number + visits: number + progress: number + status: 'relationship' | 'complicated' | 'single' + createdAt: Date +} + +const range = (len: number) => { + const arr: number[] = [] + for (let i = 0; i < len; i++) { + arr.push(i) + } + return arr +} + +const newPerson = (index: number): Person => { + return { + id: index + 1, + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + age: faker.number.int(40), + visits: faker.number.int(1000), + progress: faker.number.int(100), + createdAt: faker.date.past({ refDate: new Date().getTime() }), + status: faker.helpers.shuffle([ + 'relationship', + 'complicated', + 'single', + ])[0]!, + } +} + +export function makeData(...lens: number[]) { + const makeDataLevel = (depth = 0): Person[] => { + const len = lens[depth]! + return range(len).map((d): Person => { + return { + ...newPerson(d), + } + }) + } + + return makeDataLevel() +} diff --git a/examples/solid/table/src/vite-env.d.ts b/examples/solid/table/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/table/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/table/tsconfig.json b/examples/solid/table/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/table/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/table/tsconfig.node.json b/examples/solid/table/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/table/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/table/vite.config.ts b/examples/solid/table/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/table/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/variable/.gitignore b/examples/solid/variable/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/variable/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/variable/README.md b/examples/solid/variable/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/variable/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/variable/index.html b/examples/solid/variable/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/variable/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/variable/package.json b/examples/solid/variable/package.json new file mode 100644 index 00000000..d5dd9f9b --- /dev/null +++ b/examples/solid/variable/package.json @@ -0,0 +1,20 @@ +{ + "name": "tanstack-solid-virtual-example-variable", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/variable/public/vite.svg b/examples/solid/variable/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/variable/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/variable/src/App.tsx b/examples/solid/variable/src/App.tsx new file mode 100644 index 00000000..14c33320 --- /dev/null +++ b/examples/solid/variable/src/App.tsx @@ -0,0 +1,323 @@ +import { createVirtualizer } from '@tanstack/solid-virtual' +import { For } from 'solid-js' + +const rows = new Array(10000) + .fill(true) + .map(() => 25 + Math.round(Math.random() * 100)) + +const columns = new Array(10000) + .fill(true) + .map(() => 75 + Math.round(Math.random() * 100)) + +function App() { + return ( +
+

+ These components are using variable sizes. This means + that each element has a unique, but knowable dimension at render time. +

+
+
+ +

Rows

+ +
+
+

Columns

+ +
+
+

Grid

+ +
+
+

Masonry (vertical)

+ +
+
+

Masonry (horizontal)

+ +
+ ) +} + +function RowVirtualizerVariable() { + let parentRef!: HTMLDivElement + + const rowVirtualizer = createVirtualizer({ + count: rows.length, + getScrollElement: () => parentRef, + estimateSize: (i) => rows[i], + overscan: 5, + }) + + return ( + <> +
+
+ + {(virtualRow) => ( +
+ Row {virtualRow.index} +
+ )} + +
+
+ + ) +} + +function ColumnVirtualizerVariable() { + let parentRef!: HTMLDivElement + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: columns.length, + getScrollElement: () => parentRef, + estimateSize: (i) => columns[i], + overscan: 5, + }) + + return ( + <> +
+
+ + {(virtualColumn) => ( +
+ Column {virtualColumn.index} +
+ )} + +
+
+ + ) +} + +function GridVirtualizerVariable() { + let parentRef!: HTMLDivElement + + const rowVirtualizer = createVirtualizer({ + count: rows.length, + getScrollElement: () => parentRef, + estimateSize: (i) => rows[i], + overscan: 5, + }) + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: columns.length, + getScrollElement: () => parentRef, + estimateSize: (i) => columns[i], + overscan: 5, + }) + + return ( + <> +
+
+ + {(virtualRow) => ( + + {(virtualColumn) => ( +
+ Cell {virtualRow.index}, {virtualColumn.index} +
+ )} + + )} + +
+
+ + ) +} + +function MasonryVerticalVirtualizerVariable() { + let parentRef!: HTMLDivElement + + const rowVirtualizer = createVirtualizer({ + count: rows.length, + getScrollElement: () => parentRef, + estimateSize: (i) => rows[i], + overscan: 5, + lanes: 4, + }) + + return ( + <> +
+
+ + {(virtualRow) => ( +
+ Row {virtualRow.index} +
+ )} + +
+
+ + ) +} + +function MasonryHorizontalVirtualizerVariable() { + let parentRef!: HTMLDivElement + + const columnVirtualizer = createVirtualizer({ + horizontal: true, + count: columns.length, + getScrollElement: () => parentRef, + estimateSize: (i) => columns[i], + overscan: 5, + lanes: 4, + }) + + return ( + <> +
+
+ + {(virtualColumn) => ( +
+ Column {virtualColumn.index} +
+ )} + +
+
+ + ) +} + +export default App diff --git a/examples/solid/variable/src/index.css b/examples/solid/variable/src/index.css new file mode 100644 index 00000000..45d24164 --- /dev/null +++ b/examples/solid/variable/src/index.css @@ -0,0 +1,24 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} + +.ListItemEven, +.ListItemOdd { + display: flex; + align-items: center; + justify-content: center; +} + +.ListItemEven { + background-color: #e6e4dc; +} diff --git a/examples/solid/variable/src/index.tsx b/examples/solid/variable/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/variable/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/variable/src/vite-env.d.ts b/examples/solid/variable/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/variable/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/variable/tsconfig.json b/examples/solid/variable/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/variable/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/variable/tsconfig.node.json b/examples/solid/variable/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/variable/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/variable/vite.config.ts b/examples/solid/variable/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/variable/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/solid/window/.gitignore b/examples/solid/window/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/solid/window/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/solid/window/README.md b/examples/solid/window/README.md new file mode 100644 index 00000000..b168d3c4 --- /dev/null +++ b/examples/solid/window/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/solid/window/index.html b/examples/solid/window/index.html new file mode 100644 index 00000000..70217370 --- /dev/null +++ b/examples/solid/window/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Solid + TS + + +
+ + + diff --git a/examples/solid/window/package.json b/examples/solid/window/package.json new file mode 100644 index 00000000..721bdf69 --- /dev/null +++ b/examples/solid/window/package.json @@ -0,0 +1,20 @@ +{ + "name": "tanstack-solid-virtual-example-window", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/solid-virtual": "3.0.1", + "solid-js": "^1.8.7" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.1.3", + "vite-plugin-solid": "^2.10.1" + } +} diff --git a/examples/solid/window/public/vite.svg b/examples/solid/window/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/solid/window/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/solid/window/src/App.tsx b/examples/solid/window/src/App.tsx new file mode 100644 index 00000000..38b5bee1 --- /dev/null +++ b/examples/solid/window/src/App.tsx @@ -0,0 +1,68 @@ +import { createWindowVirtualizer } from '@tanstack/solid-virtual' +import { For, createSignal, onMount } from 'solid-js' + +function App() { + return ( +
+

+ In many cases, when implementing a virtualizer with a window as the + scrolling element, developers often find the need to specify a + "scrollMargin." The scroll margin is a crucial setting that defines the + space or gap between the start of the page and the edges of the list. +

+
+
+

Window scroller

+ +
+ ) +} + +function Example() { + let listRef!: HTMLDivElement + + const [scrollMargin, setScrollMargin] = createSignal(0) + onMount(() => setScrollMargin(listRef.offsetTop)) + + const virtualizer = createWindowVirtualizer({ + count: 10000, + estimateSize: () => 35, + get scrollMargin() { + return scrollMargin() + }, + }) + + return ( +
+
+ + {(virtualRow) => ( +
+ Row {virtualRow.index} +
+ )} + +
+
+ ) +} + +export default App diff --git a/examples/solid/window/src/index.css b/examples/solid/window/src/index.css new file mode 100644 index 00000000..45d24164 --- /dev/null +++ b/examples/solid/window/src/index.css @@ -0,0 +1,24 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +body { + padding: 1rem; +} + +.List { + border: 1px solid #e6e4dc; + max-width: 100%; +} + +.ListItemEven, +.ListItemOdd { + display: flex; + align-items: center; + justify-content: center; +} + +.ListItemEven { + background-color: #e6e4dc; +} diff --git a/examples/solid/window/src/index.tsx b/examples/solid/window/src/index.tsx new file mode 100644 index 00000000..af7bf042 --- /dev/null +++ b/examples/solid/window/src/index.tsx @@ -0,0 +1,9 @@ +/* @refresh reload */ +import { render } from 'solid-js/web' + +import './index.css' +import App from './App' + +const root = document.getElementById('root') + +render(() => , root!) diff --git a/examples/solid/window/src/vite-env.d.ts b/examples/solid/window/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/solid/window/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/solid/window/tsconfig.json b/examples/solid/window/tsconfig.json new file mode 100644 index 00000000..39999584 --- /dev/null +++ b/examples/solid/window/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/solid/window/tsconfig.node.json b/examples/solid/window/tsconfig.node.json new file mode 100644 index 00000000..42872c59 --- /dev/null +++ b/examples/solid/window/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/solid/window/vite.config.ts b/examples/solid/window/vite.config.ts new file mode 100644 index 00000000..4095d9be --- /dev/null +++ b/examples/solid/window/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import solid from 'vite-plugin-solid' + +export default defineConfig({ + plugins: [solid()], +}) diff --git a/examples/svelte/dynamic/package.json b/examples/svelte/dynamic/package.json index 65489294..b375bfd6 100644 --- a/examples/svelte/dynamic/package.json +++ b/examples/svelte/dynamic/package.json @@ -10,7 +10,7 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/svelte-virtual": "3.0.4" }, "devDependencies": { diff --git a/examples/svelte/smooth-scroll/package.json b/examples/svelte/smooth-scroll/package.json index 0714fd65..be180557 100644 --- a/examples/svelte/smooth-scroll/package.json +++ b/examples/svelte/smooth-scroll/package.json @@ -10,7 +10,7 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/svelte-virtual": "3.0.4" }, "devDependencies": { diff --git a/examples/svelte/sticky/package.json b/examples/svelte/sticky/package.json index dd0fdbaf..87c86e18 100644 --- a/examples/svelte/sticky/package.json +++ b/examples/svelte/sticky/package.json @@ -10,7 +10,7 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/svelte-virtual": "3.0.4", "lodash": "^4.17.21" }, diff --git a/examples/svelte/table/package.json b/examples/svelte/table/package.json index e696079f..f8b2b2f6 100644 --- a/examples/svelte/table/package.json +++ b/examples/svelte/table/package.json @@ -10,7 +10,7 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/svelte-table": "^8.10.7", "@tanstack/svelte-virtual": "3.0.4" }, diff --git a/examples/vue/dynamic/package.json b/examples/vue/dynamic/package.json index 97c64d4f..34202735 100644 --- a/examples/vue/dynamic/package.json +++ b/examples/vue/dynamic/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/vue-virtual": "^3.1.0", "vue": "^3.3.4" }, diff --git a/examples/vue/sticky/package.json b/examples/vue/sticky/package.json index aa3cde6b..57e1488e 100644 --- a/examples/vue/sticky/package.json +++ b/examples/vue/sticky/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/vue-virtual": "^3.1.0", "lodash": "^4.17.21", "vue": "^3.3.4" diff --git a/examples/vue/table/package.json b/examples/vue/table/package.json index 9fa787a9..157722e8 100644 --- a/examples/vue/table/package.json +++ b/examples/vue/table/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@faker-js/faker": "^7.6.0", + "@faker-js/faker": "^8.3.1", "@tanstack/vue-table": "^8.10.7", "@tanstack/vue-virtual": "^3.1.0", "vue": "^3.3.4" diff --git a/packages/solid-virtual/package.json b/packages/solid-virtual/package.json index 1aba197a..5c4e8deb 100644 --- a/packages/solid-virtual/package.json +++ b/packages/solid-virtual/package.json @@ -53,7 +53,7 @@ "@tanstack/virtual-core": "workspace:*" }, "devDependencies": { - "solid-js": "^1.3.15", + "solid-js": "^1.8.7", "vite-plugin-solid": "^2.10.1" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4694a973..6be696af 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -51,8 +51,8 @@ importers: examples/react/dynamic: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/react-virtual': specifier: ^3.1.0 version: link:../../../packages/react-virtual @@ -219,8 +219,8 @@ importers: examples/react/sticky: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/react-virtual': specifier: ^3.1.0 version: link:../../../packages/react-virtual @@ -247,8 +247,8 @@ importers: examples/react/table: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.7.9 version: 8.10.7(react-dom@18.2.0)(react@18.2.0) @@ -331,11 +331,222 @@ importers: specifier: ^5.1.3 version: 5.1.3(@types/node@18.19.17) + examples/solid/dynamic: + dependencies: + '@faker-js/faker': + specifier: ^8.3.1 + version: 8.4.1 + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/fixed: + dependencies: + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/infinite-scroll: + dependencies: + '@tanstack/solid-query': + specifier: ^5.17.19 + version: 5.21.4(solid-js@1.8.15) + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/padding: + dependencies: + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/scroll-padding: + dependencies: + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/smooth-scroll: + dependencies: + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/sticky: + dependencies: + '@faker-js/faker': + specifier: ^8.3.1 + version: 8.4.1 + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + lodash: + specifier: ^4.17.21 + version: 4.17.21 + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + '@types/lodash': + specifier: ^4.14.202 + version: 4.14.202 + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/table: + dependencies: + '@faker-js/faker': + specifier: ^8.3.1 + version: 8.4.1 + '@tanstack/solid-table': + specifier: ^8.11.7 + version: 8.12.0(solid-js@1.8.15) + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/variable: + dependencies: + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + + examples/solid/window: + dependencies: + '@tanstack/solid-virtual': + specifier: 3.0.1 + version: 3.0.1(solid-js@1.8.15) + solid-js: + specifier: ^1.8.7 + version: 1.8.15 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.1.3 + version: 5.1.3(@types/node@18.19.17) + vite-plugin-solid: + specifier: ^2.10.1 + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) + examples/svelte/dynamic: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/svelte-virtual': specifier: 3.0.4 version: link:../../../packages/svelte-virtual @@ -424,8 +635,8 @@ importers: examples/svelte/smooth-scroll: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/svelte-virtual': specifier: 3.0.4 version: link:../../../packages/svelte-virtual @@ -455,8 +666,8 @@ importers: examples/svelte/sticky: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/svelte-virtual': specifier: 3.0.4 version: link:../../../packages/svelte-virtual @@ -489,8 +700,8 @@ importers: examples/svelte/table: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/svelte-table': specifier: ^8.10.7 version: 8.10.7(svelte@4.2.8) @@ -523,8 +734,8 @@ importers: examples/vue/dynamic: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/vue-virtual': specifier: ^3.1.0 version: link:../../../packages/vue-virtual @@ -682,8 +893,8 @@ importers: examples/vue/sticky: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/vue-virtual': specifier: ^3.1.0 version: link:../../../packages/vue-virtual @@ -716,8 +927,8 @@ importers: examples/vue/table: dependencies: '@faker-js/faker': - specifier: ^7.6.0 - version: 7.6.0 + specifier: ^8.3.1 + version: 8.4.1 '@tanstack/vue-table': specifier: ^8.10.7 version: 8.10.7(vue@3.3.9) @@ -804,11 +1015,11 @@ importers: version: link:../virtual-core devDependencies: solid-js: - specifier: ^1.3.15 - version: 1.8.6 + specifier: ^1.8.7 + version: 1.8.15 vite-plugin-solid: specifier: ^2.10.1 - version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.6)(vite@5.1.3) + version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3) packages/svelte-virtual: dependencies: @@ -1350,9 +1561,9 @@ packages: dev: true optional: true - /@faker-js/faker@7.6.0: - resolution: {integrity: sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==} - engines: {node: '>=14.0.0', npm: '>=6.0.0'} + /@faker-js/faker@8.4.1: + resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'} dev: false /@isaacs/cliui@8.0.2: @@ -2070,6 +2281,10 @@ packages: resolution: {integrity: sha512-WbZztNmKq0t6QjdNmHzezbi/uifYo9j6e2GLJkodsYaYUlzMbAp91RDyeHkIZrm7EfO4wa6Sm5sxJZm5SPlh6w==} dev: false + /@tanstack/query-core@5.21.4: + resolution: {integrity: sha512-k3u4RcDAtcCurs8KVEIf52k4yUayc852v4ZQrtI8pkEii71riM9758A2WVGo5T/v4/X7b1RLON5g0aDvkoZYCA==} + dev: false + /@tanstack/react-table@8.10.7(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-bXhjA7xsTcsW8JPTTYlUg/FuBpn8MNjiEPhkNhIGCUR6iRQM2+WEco4OBpvDeVcR9SE+bmWLzdfiY7bCbCSVuA==} engines: {node: '>=12'} @@ -2082,6 +2297,34 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@tanstack/solid-query@5.21.4(solid-js@1.8.15): + resolution: {integrity: sha512-19rk31HBbFg1G4e22iLFjIvRXxggHjZxsIzx3qHsFRVAJuB7DQ93rVE3oxifOo1qvaHgKVmWLh/gX4txzBtf+g==} + peerDependencies: + solid-js: ^1.6.0 + dependencies: + '@tanstack/query-core': 5.21.4 + solid-js: 1.8.15 + dev: false + + /@tanstack/solid-table@8.12.0(solid-js@1.8.15): + resolution: {integrity: sha512-ONTTOmOiSi0eluiDAsH5U4D2J4/bJFwaE43PpdHgdnlC5q+PrjzZ5CNDkvR7wPi/hR3SENE4hdVJxcDMP9jjrw==} + engines: {node: '>=12'} + peerDependencies: + solid-js: ^1.3.13 + dependencies: + '@tanstack/table-core': 8.12.0 + solid-js: 1.8.15 + dev: false + + /@tanstack/solid-virtual@3.0.1(solid-js@1.8.15): + resolution: {integrity: sha512-DxP3GUBEDUNdCH50Q2RgRkaol3bAGpkMcJAdUIPWywEL37TkH/MC748nees0EXRylrC7RMP0zVNN3Z94WFBULA==} + peerDependencies: + solid-js: ^1.3.0 + dependencies: + '@tanstack/virtual-core': 3.0.0 + solid-js: 1.8.15 + dev: false + /@tanstack/svelte-query@5.12.1(svelte@4.2.8): resolution: {integrity: sha512-jEfwJDN+h8Qslos4lIfFbkJM8dOhKMRE7+iuq/OgvAZHJKMHF4Hdt/ElLs5XJz8FsR6yhh8/vh2QBKUls4YFgw==} peerDependencies: @@ -2106,6 +2349,15 @@ packages: engines: {node: '>=12'} dev: false + /@tanstack/table-core@8.12.0: + resolution: {integrity: sha512-cq/ylWVrOwixmwNXQjgZaQw1Izf7+nPxjczum7paAnMtwPg1S2qRAJU+Jb8rEBUWm69voC/zcChmePlk2hc6ug==} + engines: {node: '>=12'} + dev: false + + /@tanstack/virtual-core@3.0.0: + resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==} + dev: false + /@tanstack/vue-query@4.37.1(vue@3.3.9): resolution: {integrity: sha512-QzCQ94g2oZQcEfI4nfqa6Qr3aFXtXiEH17Jho+QFl73c7epqsWNcyP3ovF1fgJz5jEOE5OYtwgkoaRKIRaSigg==} peerDependencies: @@ -5642,10 +5894,17 @@ packages: lru-cache: 6.0.0 dev: true - /seroval@0.14.1: - resolution: {integrity: sha512-ZlC9y1KVDhZFdEHLYZup1RjKDutyX1tt3ffOauqRbRURa2vRr2NU/bHuVEuNEqR3zE2uCU3WM6LqH6Oinc3tWg==} + /seroval-plugins@1.0.4(seroval@1.0.4): + resolution: {integrity: sha512-DQ2IK6oQVvy8k+c2V5x5YCtUa/GGGsUwUBNN9UqohrZ0rWdUapBFpNMYP1bCyRHoxOJjdKGl+dieacFIpU/i1A==} + engines: {node: '>=10'} + peerDependencies: + seroval: ^1.0 + dependencies: + seroval: 1.0.4 + + /seroval@1.0.4: + resolution: {integrity: sha512-qQs/N+KfJu83rmszFQaTxcoJoPn6KNUruX4KmnmyD0oZkUoiNvJ1rpdYKDf4YHM05k+HOgCxa3yvf15QbVijGg==} engines: {node: '>=10'} - dev: true /set-function-length@1.1.1: resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==} @@ -5780,14 +6039,14 @@ packages: engines: {node: '>= 18', pnpm: '>= 8'} dev: true - /solid-js@1.8.6: - resolution: {integrity: sha512-yiH6ZfBBZ3xj/aU/PBpVKB+8r8WWp100NGF7k/Z0IrK9Y8Lv0jwvFiJY1cHdc6Tj7GqXArKnMBabM0m1k+LzkA==} + /solid-js@1.8.15: + resolution: {integrity: sha512-d0QP/efr3UVcwGgWVPveQQ0IHOH6iU7yUhc2piy8arNG8wxKmvUy1kFxyF8owpmfCWGB87usDKMaVnsNYZm+Vw==} dependencies: csstype: 3.1.2 - seroval: 0.14.1 - dev: true + seroval: 1.0.4 + seroval-plugins: 1.0.4(seroval@1.0.4) - /solid-refresh@0.6.3(solid-js@1.8.6): + /solid-refresh@0.6.3(solid-js@1.8.15): resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} peerDependencies: solid-js: ^1.3 @@ -5795,7 +6054,7 @@ packages: '@babel/generator': 7.23.6 '@babel/helper-module-imports': 7.22.15 '@babel/types': 7.23.9 - solid-js: 1.8.6 + solid-js: 1.8.15 dev: true /sorcery@0.11.0: @@ -6452,7 +6711,7 @@ packages: vite: 5.1.3(@types/node@18.19.17) dev: true - /vite-plugin-solid@2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.6)(vite@5.1.3): + /vite-plugin-solid@2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.15)(vite@5.1.3): resolution: {integrity: sha512-kfVdNLWaJqaJVL52U6iCCKNW/nXE7bS1VVGOWPGllOkJfcNILymVSY0LCBLSnyy0iYnRtrXpiHm14rMuzeC7CA==} peerDependencies: '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.* @@ -6467,8 +6726,8 @@ packages: '@types/babel__core': 7.20.5 babel-preset-solid: 1.8.15(@babel/core@7.23.5) merge-anything: 5.1.7 - solid-js: 1.8.6 - solid-refresh: 0.6.3(solid-js@1.8.6) + solid-js: 1.8.15 + solid-refresh: 0.6.3(solid-js@1.8.15) vite: 5.1.3(@types/node@18.19.17) vitefu: 0.2.5(vite@5.1.3) transitivePeerDependencies: diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 3f178b5c..6e3e598b 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,5 +1,6 @@ packages: - 'packages/*' - 'examples/react/*' + - 'examples/solid/*' - 'examples/svelte/*' - 'examples/vue/*'