diff --git a/docs/config.json b/docs/config.json index e65ba6ad..855edb36 100644 --- a/docs/config.json +++ b/docs/config.json @@ -150,6 +150,51 @@ } ] }, + { + "label": "solid", + "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" + } + ] + }, { "label": "svelte", "children": [ 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..64dd8144 --- /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.4.1", + "@tanstack/solid-virtual": "^3.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..f7153ad7 --- /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.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..14e8bf47 --- /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.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..93290865 --- /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.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..241709f4 --- /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.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..075106bc --- /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.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..430ec8cf --- /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.4.1", + "@tanstack/solid-virtual": "^3.13.2", + "lodash": "^4.17.21", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "@types/lodash": "^4.17.16", + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..c1e4f367 --- /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.4.1", + "@tanstack/solid-table": "^8.11.7", + "@tanstack/solid-virtual": "^3.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..5a111779 --- /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.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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..84468527 --- /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.13.2", + "solid-js": "^1.9.5" + }, + "devDependencies": { + "typescript": "5.2.2", + "vite": "^5.4.14", + "vite-plugin-solid": "^2.11.6" + } +} 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/pnpm-lock.yaml b/pnpm-lock.yaml index c79b5c9d..263d39e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -885,6 +885,217 @@ importers: specifier: ^5.4.14 version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + examples/solid/dynamic: + dependencies: + '@faker-js/faker': + specifier: ^8.4.1 + version: 8.4.1 + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/fixed: + dependencies: + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/infinite-scroll: + dependencies: + '@tanstack/solid-query': + specifier: ^5.17.19 + version: 5.67.2(solid-js@1.9.5) + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/padding: + dependencies: + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/scroll-padding: + dependencies: + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/smooth-scroll: + dependencies: + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/sticky: + dependencies: + '@faker-js/faker': + specifier: ^8.4.1 + version: 8.4.1 + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + lodash: + specifier: ^4.17.21 + version: 4.17.21 + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + '@types/lodash': + specifier: ^4.17.16 + version: 4.17.16 + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/table: + dependencies: + '@faker-js/faker': + specifier: ^8.4.1 + version: 8.4.1 + '@tanstack/solid-table': + specifier: ^8.11.7 + version: 8.21.2(solid-js@1.9.5) + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/variable: + dependencies: + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + + examples/solid/window: + dependencies: + '@tanstack/solid-virtual': + specifier: ^3.13.2 + version: link:../../../packages/solid-virtual + solid-js: + specifier: ^1.9.5 + version: 1.9.5 + devDependencies: + typescript: + specifier: 5.2.2 + version: 5.2.2 + vite: + specifier: ^5.4.14 + version: 5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0) + vite-plugin-solid: + specifier: ^2.11.6 + version: 2.11.6(@testing-library/jest-dom@6.6.3)(solid-js@1.9.5)(vite@5.4.14(@types/node@22.13.7)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)) + examples/svelte/dynamic: dependencies: '@faker-js/faker': @@ -3460,6 +3671,9 @@ packages: '@tanstack/query-core@5.66.11': resolution: {integrity: sha512-ZEYxgHUcohj3sHkbRaw0gYwFxjY5O6M3IXOYXEun7E1rqNhsP8fOtqjJTKPZpVHcdIdrmX4lzZctT4+pts0OgA==} + '@tanstack/query-core@5.67.2': + resolution: {integrity: sha512-+iaFJ/pt8TaApCk6LuZ0WHS/ECVfTzrxDOEL9HH9Dayyb5OVuomLzDXeSaI2GlGT/8HN7bDGiRXDts3LV+u6ww==} + '@tanstack/query-devtools@5.65.0': resolution: {integrity: sha512-g5y7zc07U9D3esMdqUfTEVu9kMHoIaVBsD0+M3LPdAdD710RpTcLiNvJY1JkYXqkq9+NV+CQoemVNpQPBXVsJg==} @@ -3475,6 +3689,17 @@ packages: react: '>=16.8' react-dom: '>=16.8' + '@tanstack/solid-query@5.67.2': + resolution: {integrity: sha512-oWUHFcarD7o2d6vYfyXP5k/9vND9tMDY4pqaZwIYNoh8ObWCIb2yt7ewV2agvFG3KIym6OU+JNYEcOCvT2rVQA==} + peerDependencies: + solid-js: ^1.6.0 + + '@tanstack/solid-table@8.21.2': + resolution: {integrity: sha512-5Rc68rM+TGbZDrm5Onmg4erHurwU4a0eYCQUpLgsXLk/L/gYJmhmY5FXiKUTJGjEIAqCqOYuMbmICY/P0l6uFA==} + engines: {node: '>=12'} + peerDependencies: + solid-js: '>=1.3' + '@tanstack/svelte-query@5.66.11': resolution: {integrity: sha512-5c4prt0uXnMKyzCs87Jwx6F54LaZn8k3BdksgTkPOXY5tjBUIWOg7Rjm8yDPkrsB1NZ0XixZDEoVdMWF0FANsA==} peerDependencies: @@ -7858,12 +8083,12 @@ snapshots: '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.4.14(@types/node@22.13.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.18(postcss@8.4.35) - babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.94.0(esbuild@0.20.1)) + babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.94.0) babel-plugin-istanbul: 6.1.1 browserslist: 4.24.4 - copy-webpack-plugin: 11.0.0(webpack@5.94.0(esbuild@0.20.1)) + copy-webpack-plugin: 11.0.0(webpack@5.94.0) critters: 0.0.22 - css-loader: 6.10.0(webpack@5.94.0(esbuild@0.20.1)) + css-loader: 6.10.0(webpack@5.94.0) esbuild-wasm: 0.20.1 fast-glob: 3.3.2 http-proxy-middleware: 2.0.7(@types/express@4.17.21) @@ -7872,11 +8097,11 @@ snapshots: jsonc-parser: 3.2.1 karma-source-map-support: 1.4.0 less: 4.2.0 - less-loader: 11.1.0(less@4.2.0)(webpack@5.94.0(esbuild@0.20.1)) - license-webpack-plugin: 4.0.2(webpack@5.94.0(esbuild@0.20.1)) + less-loader: 11.1.0(less@4.2.0)(webpack@5.94.0) + license-webpack-plugin: 4.0.2(webpack@5.94.0) loader-utils: 3.2.1 magic-string: 0.30.8 - mini-css-extract-plugin: 2.8.1(webpack@5.94.0(esbuild@0.20.1)) + mini-css-extract-plugin: 2.8.1(webpack@5.94.0) mrmime: 2.0.0 open: 8.4.2 ora: 5.4.1 @@ -7884,13 +8109,13 @@ snapshots: picomatch: 4.0.1 piscina: 4.4.0 postcss: 8.4.35 - postcss-loader: 8.1.1(postcss@8.4.35)(typescript@5.2.2)(webpack@5.94.0(esbuild@0.20.1)) + postcss-loader: 8.1.1(postcss@8.4.35)(typescript@5.2.2)(webpack@5.94.0) resolve-url-loader: 5.0.0 rxjs: 7.8.1 sass: 1.71.1 - sass-loader: 14.1.1(sass@1.71.1)(webpack@5.94.0(esbuild@0.20.1)) + sass-loader: 14.1.1(sass@1.71.1)(webpack@5.94.0) semver: 7.6.0 - source-map-loader: 5.0.0(webpack@5.94.0(esbuild@0.20.1)) + source-map-loader: 5.0.0(webpack@5.94.0) source-map-support: 0.5.21 terser: 5.29.1 tree-kill: 1.2.2 @@ -7900,10 +8125,10 @@ snapshots: vite: 5.4.14(@types/node@22.13.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1) watchpack: 2.4.0 webpack: 5.94.0(esbuild@0.20.1) - webpack-dev-middleware: 6.1.2(webpack@5.94.0(esbuild@0.20.1)) + webpack-dev-middleware: 6.1.2(webpack@5.94.0) webpack-dev-server: 4.15.1(webpack@5.94.0(esbuild@0.20.1)) webpack-merge: 5.10.0 - webpack-subresource-integrity: 5.1.0(webpack@5.94.0(esbuild@0.20.1)) + webpack-subresource-integrity: 5.1.0(webpack@5.94.0) optionalDependencies: esbuild: 0.20.1 ng-packagr: 17.3.0(@angular/compiler-cli@17.3.12(@angular/compiler@17.3.12(@angular/core@17.3.12(rxjs@7.8.2)(zone.js@0.15.0)))(typescript@5.2.2))(tslib@2.8.1)(typescript@5.2.2) @@ -10068,6 +10293,8 @@ snapshots: '@tanstack/query-core@5.66.11': {} + '@tanstack/query-core@5.67.2': {} + '@tanstack/query-devtools@5.65.0': {} '@tanstack/react-query@5.66.11(react@18.3.1)': @@ -10081,6 +10308,16 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@tanstack/solid-query@5.67.2(solid-js@1.9.5)': + dependencies: + '@tanstack/query-core': 5.67.2 + solid-js: 1.9.5 + + '@tanstack/solid-table@8.21.2(solid-js@1.9.5)': + dependencies: + '@tanstack/table-core': 8.21.2 + solid-js: 1.9.5 + '@tanstack/svelte-query@5.66.11(svelte@4.2.19)': dependencies: '@tanstack/query-core': 5.66.11 @@ -10997,7 +11234,7 @@ snapshots: axobject-query@4.1.0: {} - babel-loader@9.1.3(@babel/core@7.24.0)(webpack@5.94.0(esbuild@0.20.1)): + babel-loader@9.1.3(@babel/core@7.24.0)(webpack@5.94.0): dependencies: '@babel/core': 7.24.0 find-cache-dir: 4.0.0 @@ -11354,7 +11591,7 @@ snapshots: dependencies: is-what: 3.14.1 - copy-webpack-plugin@11.0.0(webpack@5.94.0(esbuild@0.20.1)): + copy-webpack-plugin@11.0.0(webpack@5.94.0): dependencies: fast-glob: 3.3.3 glob-parent: 6.0.2 @@ -11395,7 +11632,7 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 - css-loader@6.10.0(webpack@5.94.0(esbuild@0.20.1)): + css-loader@6.10.0(webpack@5.94.0): dependencies: icss-utils: 5.1.0(postcss@8.5.3) postcss: 8.5.3 @@ -12725,7 +12962,7 @@ snapshots: picocolors: 1.1.1 shell-quote: 1.8.2 - less-loader@11.1.0(less@4.2.0)(webpack@5.94.0(esbuild@0.20.1)): + less-loader@11.1.0(less@4.2.0)(webpack@5.94.0): dependencies: klona: 2.0.6 less: 4.2.0 @@ -12764,7 +13001,7 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 - license-webpack-plugin@4.0.2(webpack@5.94.0(esbuild@0.20.1)): + license-webpack-plugin@4.0.2(webpack@5.94.0): dependencies: webpack-sources: 3.2.3 optionalDependencies: @@ -12962,7 +13199,7 @@ snapshots: min-indent@1.0.1: {} - mini-css-extract-plugin@2.8.1(webpack@5.94.0(esbuild@0.20.1)): + mini-css-extract-plugin@2.8.1(webpack@5.94.0): dependencies: schema-utils: 4.3.0 tapable: 2.2.1 @@ -13513,7 +13750,7 @@ snapshots: mlly: 1.7.4 pathe: 2.0.3 - postcss-loader@8.1.1(postcss@8.4.35)(typescript@5.2.2)(webpack@5.94.0(esbuild@0.20.1)): + postcss-loader@8.1.1(postcss@8.4.35)(typescript@5.2.2)(webpack@5.94.0): dependencies: cosmiconfig: 9.0.0(typescript@5.2.2) jiti: 1.21.7 @@ -13870,7 +14107,7 @@ snapshots: safer-buffer@2.1.2: {} - sass-loader@14.1.1(sass@1.71.1)(webpack@5.94.0(esbuild@0.20.1)): + sass-loader@14.1.1(sass@1.71.1)(webpack@5.94.0): dependencies: neo-async: 2.6.2 optionalDependencies: @@ -14141,7 +14378,7 @@ snapshots: source-map-js@1.2.1: {} - source-map-loader@5.0.0(webpack@5.94.0(esbuild@0.20.1)): + source-map-loader@5.0.0(webpack@5.94.0): dependencies: iconv-lite: 0.6.3 source-map-js: 1.2.1 @@ -14760,7 +14997,7 @@ snapshots: schema-utils: 4.3.0 webpack: 5.94.0(esbuild@0.20.1) - webpack-dev-middleware@6.1.2(webpack@5.94.0(esbuild@0.20.1)): + webpack-dev-middleware@6.1.2(webpack@5.94.0): dependencies: colorette: 2.0.20 memfs: 3.5.3 @@ -14818,7 +15055,7 @@ snapshots: webpack-sources@3.2.3: {} - webpack-subresource-integrity@5.1.0(webpack@5.94.0(esbuild@0.20.1)): + webpack-subresource-integrity@5.1.0(webpack@5.94.0): dependencies: typed-assert: 1.0.9 webpack: 5.94.0(esbuild@0.20.1) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 0c1c5f87..200ad888 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,6 +2,7 @@ packages: - 'packages/*' - 'examples/angular/*' - 'examples/react/*' + - 'examples/solid/*' - 'examples/svelte/*' - 'examples/vue/*' - 'examples/lit/*'