Skip to content

Commit 34d5fb0

Browse files
author
dasathyakuma
committed
Fix examples
1 parent 7e0343c commit 34d5fb0

File tree

8 files changed

+63
-74
lines changed

8 files changed

+63
-74
lines changed

‎examples/marko/dynamic/src/data.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const items = Array.from({ length: 1000 }, (_, i) => ({
2+
id: i,
3+
text: "Item " + i + " — " + "lorem ipsum ".repeat(1 + (i % 5)),
4+
}))

‎examples/marko/dynamic/src/routes/+page.marko‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
</head>
1818
<body>
1919
<h1>Dynamic Virtualisation</h1>
20-
<p>Item sizes are unknown at render time. Each item is measured after render via measureElement.</p>
20+
<p>Item sizes are unknown at render time. Each rendered item is measured via measureElement.</p>
2121

22-
static const items = Array.from({ length: 1000 }, (_, i) => ({
23-
id: i,
24-
text: "Item " + i + " — " + "lorem ipsum ".repeat(1 + (i % 5)),
25-
}))
22+
<const/items = Array.from({ length: 1000 }, (_, idx) => ({
23+
id: idx,
24+
text: "Item " + idx + " — " + "lorem ipsum dolor sit amet ".repeat(1 + (idx % 5)),
25+
}))/>
2626

2727
<let/mounted = false/>
2828
<script() { mounted = true }/>

‎examples/marko/grid/src/data.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const ROW_COUNT = 1000
2+
export const COL_COUNT = 1000
3+
export const rowSizes = Array.from({ length: ROW_COUNT }, () => 30 + Math.round(Math.random() * 20))
4+
export const colSizes = Array.from({ length: COL_COUNT }, () => 80 + Math.round(Math.random() * 80))

‎examples/marko/grid/src/routes/+page.marko‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,19 @@
1919
<h1>Grid Virtualisation</h1>
2020
<p>A 1000 × 1000 grid — two &lt;virtualizer&gt; tags sharing the same scroll element.</p>
2121

22-
static const ROW_COUNT = 1000
23-
static const COL_COUNT = 1000
24-
static const rowSizes = Array.from({ length: ROW_COUNT }, () => 30 + Math.round(Math.random() * 20))
25-
static const colSizes = Array.from({ length: COL_COUNT }, () => 80 + Math.round(Math.random() * 80))
26-
2722
<let/mounted = false/>
2823
<script() { mounted = true }/>
2924

3025
<div/gridScroll class="scroll-grid">
3126
<if=mounted>
3227
<virtualizer|{ virtualItems: rowItems, totalSize: rowTotal }|
33-
count=ROW_COUNT
34-
estimateSize=(i) => rowSizes[i]!
28+
count=1000
29+
estimateSize=(i) => 30 + ((i * 7 + 11) % 20)
3530
getScrollElement=gridScroll
3631
>
3732
<virtualizer|{ virtualItems: colItems, totalSize: colTotal }|
38-
count=COL_COUNT
39-
estimateSize=(i) => colSizes[i]!
33+
count=1000
34+
estimateSize=(i) => 80 + ((i * 11 + 17) % 80)
4035
horizontal=true
4136
getScrollElement=gridScroll
4237
>

‎examples/marko/infinite-scroll/src/routes/+page.marko‎

Lines changed: 26 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,51 +13,43 @@
1313
.item { display: flex; align-items: center; padding: 0 16px; font-size: 14px; border-bottom: 1px solid #f3f4f6; box-sizing: border-box; }
1414
.item-even { background: #f9fafb; }
1515
.item-odd { background: #ffffff; }
16-
.loading { color: #9ca3af; font-style: italic; font-size: 13px; }
17-
.end { color: #6b7280; font-size: 13px; }
18-
.status { font-size: 12px; color: #9ca3af; margin-top: 8px; text-align: right; }
16+
.status { color: #9ca3af; font-style: italic; font-size: 13px; }
17+
.footer { font-size: 12px; color: #9ca3af; margin-top: 8px; text-align: right; }
1918
</style>
2019
</head>
2120
<body>
2221
<h1>Infinite Scroll Virtualisation</h1>
23-
<p>Rows are fetched in pages as you scroll toward the end.</p>
22+
<p>Rows are fetched in pages as you scroll toward the end of the list.</p>
2423

25-
static async function fetchPage(offset: number, limit: number) {
26-
await new Promise(r => setTimeout(r, 500))
27-
const total = 500
28-
const rows = Array.from({ length: Math.min(limit, total - offset) }, (_, i) =>
29-
`Row #${offset + i + 1} — loaded at offset ${offset}`
30-
)
31-
return { rows, nextOffset: offset + rows.length, hasMore: offset + rows.length < total }
32-
}
24+
<const/TOTAL = 500/>
25+
<const/PAGE_SIZE = 20/>
3326

3427
<let/rows = ([] as string[])/>
3528
<let/hasMore = true/>
3629
<let/loading = false/>
37-
<let/offset = 0/>
30+
<let/nextOffset = 0/>
3831
<let/mounted = false/>
3932

40-
<script() {
41-
mounted = true
42-
loading = true
43-
fetchPage(0, 20).then(result => {
44-
rows = result.rows
45-
offset = result.nextOffset
46-
hasMore = result.hasMore
47-
loading = false
48-
})
49-
}/>
50-
51-
<const/loadMore = async () => {
33+
<const/loadPage = async () => {
5234
if (loading || !hasMore) return
5335
loading = true
54-
const result = await fetchPage(offset, 20)
55-
rows = [...rows, ...result.rows]
56-
offset = result.nextOffset
57-
hasMore = result.hasMore
36+
await new Promise<void>(r => setTimeout(r, 500))
37+
const offset = nextOffset
38+
const count = Math.min(PAGE_SIZE, TOTAL - offset)
39+
const newRows = Array.from({ length: count }, (_, k) =>
40+
"Row #" + (offset + k + 1) + " — loaded at offset " + offset
41+
)
42+
rows = [...rows, ...newRows]
43+
nextOffset = offset + count
44+
hasMore = nextOffset < TOTAL
5845
loading = false
5946
}/>
6047

48+
<script() {
49+
mounted = true
50+
loadPage()
51+
}/>
52+
6153
<const/count = hasMore ? rows.length + 1 : rows.length/>
6254

6355
<div/scrollEl class="scroll-container">
@@ -69,8 +61,8 @@
6961
overscan=5
7062
>
7163
<script() {
72-
const lastItem = virtualItems[virtualItems.length - 1]
73-
if (lastItem && lastItem.index >= rows.length - 1) loadMore()
64+
const last = virtualItems[virtualItems.length - 1]
65+
if (last && last.index >= rows.length - 1) loadPage()
7466
}/>
7567

7668
<div style=`height: ${totalSize}px; width: 100%; position: relative`>
@@ -83,12 +75,7 @@
8375
${rows[item.index]}
8476
</if>
8577
<else>
86-
<if=loading>
87-
<span class="loading">Loading more…</span>
88-
</if>
89-
<else>
90-
<span class="end">${hasMore ? "Scroll to load more" : `All ${rows.length} rows loaded`}</span>
91-
</else>
78+
<span class="status">${loading ? "Loading more…" : hasMore ? "Scroll to load more" : "All rows loaded"}</span>
9279
</else>
9380
</div>
9481
</for>
@@ -97,8 +84,8 @@
9784
</if>
9885
</div>
9986

100-
<p class="status">
101-
${rows.length} rows loaded${hasMore ? " · more available" : " · end of list"}
87+
<p class="footer">
88+
${rows.length} of ${TOTAL} rows loaded
10289
</p>
10390
</body>
10491
</html>

‎examples/marko/smooth-scroll/src/routes/+page.marko‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
body { font-family: system-ui, sans-serif; padding: 24px; }
1010
h1 { font-size: 24px; margin-bottom: 8px; }
1111
p { color: #555; margin-bottom: 16px; }
12+
code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
1213
.scroll-container { height: 300px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; position: relative; }
1314
.item { display: flex; align-items: center; padding: 0 12px; font-size: 13px; border-bottom: 1px solid #f3f4f6; box-sizing: border-box; }
1415
.item-even { background: #f9fafb; }
@@ -20,14 +21,10 @@
2021
</head>
2122
<body>
2223
<h1>Smooth Scroll Virtualisation</h1>
23-
<p>scrollToIndex uses a custom easing function for smooth animated scrolling.</p>
24-
25-
import { elementScroll } from "@tanstack/marko-virtual"
26-
import type { VirtualizerOptions } from "@tanstack/marko-virtual"
27-
28-
static function easeInOutQuint(t: number) {
29-
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
30-
}
24+
<p>
25+
Uses <code>scrollToIndex</code> with <code>behavior: 'smooth'</code> for
26+
native CSS smooth scrolling to any item.
27+
</p>
3128

3229
<let/mounted = false/>
3330
<script() { mounted = true }/>
@@ -51,9 +48,9 @@
5148
</div>
5249

5350
<div class="controls">
54-
<button onClick=() => scrollToIndex(0)>↑ Top</button>
55-
<button onClick=() => scrollToIndex(Math.floor(Math.random() * 10000))>→ Random</button>
56-
<button onClick=() => scrollToIndex(9999)>↓ Bottom</button>
51+
<button onClick=() => scrollToIndex(0, { behavior: 'smooth' })>↑ Top</button>
52+
<button onClick=() => scrollToIndex(Math.floor(Math.random() * 10000), { behavior: 'smooth' })>→ Random</button>
53+
<button onClick=() => scrollToIndex(9999, { behavior: 'smooth' })>↓ Bottom</button>
5754
</div>
5855
</virtualizer>
5956
</if>

‎examples/marko/variable/src/data.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const rowSizes = Array.from({ length: 10000 }, () => 25 + Math.round(Math.random() * 100))
2+
export const colSizes = Array.from({ length: 10000 }, () => 75 + Math.round(Math.random() * 100))

‎examples/marko/variable/src/routes/+page.marko‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@
2121
</head>
2222
<body>
2323
<h1>Variable Virtualisation</h1>
24-
<p>Each item has a variable but knowable size — passed via estimateSize so no DOM measurement is needed.</p>
25-
26-
static const rowSizes = Array.from({ length: 10000 }, () => 25 + Math.round(Math.random() * 100))
27-
static const colSizes = Array.from({ length: 10000 }, () => 75 + Math.round(Math.random() * 100))
24+
<p>
25+
Each item has a variable but knowable size — passed directly via
26+
<code>estimateSize</code> using a deterministic formula so no DOM measurement is needed.
27+
</p>
2828

2929
<let/mounted = false/>
3030
<script() { mounted = true }/>
@@ -34,8 +34,8 @@
3434
<div/rowScroll class="scroll-row">
3535
<if=mounted>
3636
<virtualizer|{ virtualItems, totalSize }|
37-
count=rowSizes.length
38-
estimateSize=(i) => rowSizes[i]!
37+
count=10000
38+
estimateSize=(i) => 25 + ((i * 17 + 31) % 100)
3939
getScrollElement=rowScroll
4040
>
4141
<div style=`height: ${totalSize}px; width: 100%; position: relative`>
@@ -58,8 +58,8 @@
5858
<div/colScroll class="scroll-col">
5959
<if=mounted>
6060
<virtualizer|{ virtualItems, totalSize }|
61-
count=colSizes.length
62-
estimateSize=(i) => colSizes[i]!
61+
count=10000
62+
estimateSize=(i) => 75 + ((i * 13 + 43) % 100)
6363
horizontal=true
6464
getScrollElement=colScroll
6565
>
@@ -83,8 +83,8 @@
8383
<div/masonryScroll class="scroll-masonry">
8484
<if=mounted>
8585
<virtualizer|{ virtualItems, totalSize }|
86-
count=rowSizes.length
87-
estimateSize=(i) => rowSizes[i]!
86+
count=10000
87+
estimateSize=(i) => 25 + ((i * 17 + 31) % 100)
8888
lanes=4
8989
getScrollElement=masonryScroll
9090
>

0 commit comments

Comments
 (0)