Skip to content

Commit

Permalink
style: formatted project with prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonasgeiler
jonasgeiler committed Apr 20, 2024
1 parent 525cd87 commit e50c427
Show file tree
Hide file tree
Showing 15 changed files with 619 additions and 698 deletions.
163 changes: 76 additions & 87 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,68 +67,60 @@ From CDN (via [unpkg](https://unpkg.com/)):

```svelte
<script>
import VirtualList from 'svelte-tiny-virtual-list';
import VirtualList from 'svelte-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F', /* ... */];
const data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
</script>
<VirtualList
width="100%"
height={600}
itemCount={data.length}
itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
</VirtualList>
```

Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo/svelte-infinite-loading):

```svelte
<script>
import VirtualList from 'svelte-tiny-virtual-list';
import InfiniteLoading from 'svelte-infinite-loading';
let data = ['A', 'B', 'C', 'D', 'E', 'F', /* ... */];
function infiniteHandler({ detail: { complete, error } }) {
try {
// Normally you'd make an http request here...
const newData = ['G', 'H', 'I', 'J', 'K', 'L', /* ... */];
data = [...data, ...newData];
complete();
} catch (e) {
error();
}
}
import VirtualList from 'svelte-tiny-virtual-list';
import InfiniteLoading from 'svelte-infinite-loading';
let data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
function infiniteHandler({ detail: { complete, error } }) {
try {
// Normally you'd make an http request here...
const newData = ['G', 'H', 'I', 'J', 'K', 'L' /* ... */];
data = [...data, ...newData];
complete();
} catch (e) {
error();
}
}
</script>
<VirtualList
width="100%"
height={600}
itemCount={data.length}
itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
<div slot="footer">
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
<div slot="footer">
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
</VirtualList>
```

### Props

| Property | Type | Required? | Description |
| :---------------- | :------------------------------------------------ | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width | `number \| string`\* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
| height | `number \| string`\* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
| itemCount | `number` | ✓ | The number of items you want to render |
| itemSize | `number \| number[] \| (index: number) => number` | ✓ | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number` |
| width | `number \| string`\* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
| height | `number \| string`\* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
| itemCount | `number` | ✓ | The number of items you want to render |
| itemSize | `number \| number[] \| (index: number) => number` | ✓ | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number` |
| scrollDirection | `string` | | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
| scrollOffset | `number` | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset |
| scrollToIndex | `number` | | Item index to scroll to (by forcefully scrolling if necessary) |
Expand Down Expand Up @@ -160,7 +152,7 @@ _\* `height` must be a number when `scrollDirection` is `'vertical'`. Similarly,
- `detail` Props:
- `start: number` - Index of the first visible item
- `end: number` - Index of the last visible item

### Methods

- `recomputeSizes(startIndex: number)` - This method force recomputes the item sizes after the specified index (these are normally cached).
Expand All @@ -172,29 +164,30 @@ However, if you're passing a function to `itemSize`, that type of comparison is

```svelte
<script>
import { onMount } from 'svelte';
import VirtualList from 'svelte-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F', /* ... */];
let virtualList;
function handleClick() {
virtualList.recomputeSizes(0);
}
import { onMount } from 'svelte';
import VirtualList from 'svelte-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
let virtualList;
function handleClick() {
virtualList.recomputeSizes(0);
}
</script>
<button on:click={handleClick}>Recompute Sizes</button>
<VirtualList
bind:this={virtualList}
width="100%"
height={600}
itemCount={data.length}
itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
bind:this={virtualList}
width="100%"
height={600}
itemCount={data.length}
itemSize={50}
>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
</VirtualList>
```

Expand All @@ -204,45 +197,41 @@ You can style the elements of the virtual list like this:

```svelte
<script>
import VirtualList from 'svelte-tiny-virtual-list';
import VirtualList from 'svelte-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F', /* ... */];
const data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
</script>
<div class="list">
<VirtualList
width="100%"
height={600}
itemCount={data.length}
itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
</VirtualList>
<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
</VirtualList>
</div>
<style>
.list :global(.virtual-list-wrapper) {
background-color: #0f0;
/* ... */
}
.list :global(.virtual-list-inner) {
background-color: #f00;
/* ... */
}
.list :global(.virtual-list-wrapper) {
background-color: #0f0;
/* ... */
}
.list :global(.virtual-list-inner) {
background-color: #f00;
/* ... */
}
</style>
```

## Examples / Demo

- **Basic setup**
- [Elements of equal height](https://svelte.dev/repl/e3811b44f311461dbbc7c2df830cde68)
- [Variable heights](https://svelte.dev/repl/93795c812f8d4541b6b942535b2ed855)
- [Horizontal list](https://svelte.dev/repl/4cd8acdfc96843b68265a19451b1bf3d)
- [Elements of equal height](https://svelte.dev/repl/e3811b44f311461dbbc7c2df830cde68)
- [Variable heights](https://svelte.dev/repl/93795c812f8d4541b6b942535b2ed855)
- [Horizontal list](https://svelte.dev/repl/4cd8acdfc96843b68265a19451b1bf3d)
- **Controlled props**
- [Scroll to index](https://svelte.dev/repl/bdf5ceb63f6e45f7bb14b90dbd2c11d9)
- [Controlled scroll offset](https://svelte.dev/repl/68576a3919c44033a74416d4bc4fde7e)
- [Scroll to index](https://svelte.dev/repl/bdf5ceb63f6e45f7bb14b90dbd2c11d9)
- [Controlled scroll offset](https://svelte.dev/repl/68576a3919c44033a74416d4bc4fde7e)
- [Hacker News using svelte-infinite-loading](https://svelte.dev/repl/2239cc4c861c41d18abbc858248f5a0d)

## License
Expand Down
150 changes: 75 additions & 75 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,77 @@
{
"name": "svelte-tiny-virtual-list",
"version": "3.0.0-alpha.0",
"description": "A tiny but mighty list virtualization component for svelte, with zero dependencies 💪",
"homepage": "https://github.com/jonasgeiler/svelte-tiny-virtual-list#readme",
"bugs": "https://github.com/jonasgeiler/svelte-tiny-virtual-list/issues",
"license": "MIT",
"author": "Jonas Geiler <[email protected]> (https://jonasgeiler.com)",
"repository": "github:jonasgeiler/svelte-tiny-virtual-list",
"scripts": {
"dev": "vite dev",
"build": "vite build && npm run package",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
"prepublishOnly": "npm run package",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"test": "npm run test:integration && npm run test:unit",
"lint": "prettier --check . && eslint .",
"format": "prettier --write .",
"test:integration": "playwright test",
"test:unit": "vitest"
},
"peerDependencies": {
"svelte": "^4.0.0"
},
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/package": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"publint": "^0.1.9",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte-infinite-loading": "^1.3.8",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.11",
"vitest": "^1.2.0"
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"type": "module",
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
}
},
"engines": {
"node": ">=18"
},
"packageManager": "[email protected]+sha256.caa915eaae9d9aefccf50ee8aeda25a2f8684d8f9d5c6e367eaf176d97c1f89e",
"keywords": [
"svelte",
"virtual",
"list",
"scroll",
"infinite",
"loading",
"component",
"plugin",
"svelte-components"
]
"name": "svelte-tiny-virtual-list",
"version": "3.0.0-alpha.0",
"description": "A tiny but mighty list virtualization component for svelte, with zero dependencies 💪",
"homepage": "https://github.com/jonasgeiler/svelte-tiny-virtual-list#readme",
"bugs": "https://github.com/jonasgeiler/svelte-tiny-virtual-list/issues",
"license": "MIT",
"author": "Jonas Geiler <[email protected]> (https://jonasgeiler.com)",
"repository": "github:jonasgeiler/svelte-tiny-virtual-list",
"scripts": {
"dev": "vite dev",
"build": "vite build && npm run package",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
"prepublishOnly": "npm run package",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"test": "npm run test:integration && npm run test:unit",
"lint": "prettier --check . && eslint .",
"format": "prettier --write .",
"test:integration": "playwright test",
"test:unit": "vitest"
},
"peerDependencies": {
"svelte": "^4.0.0"
},
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/package": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "^8.56.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"publint": "^0.1.9",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"svelte-infinite-loading": "^1.3.8",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.11",
"vitest": "^1.2.0"
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"type": "module",
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
}
},
"engines": {
"node": ">=18"
},
"packageManager": "[email protected]+sha256.caa915eaae9d9aefccf50ee8aeda25a2f8684d8f9d5c6e367eaf176d97c1f89e",
"keywords": [
"svelte",
"virtual",
"list",
"scroll",
"infinite",
"loading",
"component",
"plugin",
"svelte-components"
]
}
Loading

0 comments on commit e50c427

Please sign in to comment.