Skip to content

Commit f5f8539

Browse files
author
dasathyakuma
committed
fix more breaking things
1 parent 2fcb5ba commit f5f8539

File tree

13 files changed

+237
-353
lines changed

13 files changed

+237
-353
lines changed

‎examples/marko/dynamic/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
},
1010
"dependencies": {
1111
"@tanstack/marko-virtual": "workspace:*",
12-
"marko": "^6.0.0",
1312
"@marko/run": "^0.7.0",
14-
"marko": ">=6.0.0"
13+
"marko": "^6.0.0"
1514
},
1615
"devDependencies": {
1716
"typescript": "5.4.5",

‎examples/marko/fixed/marko.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "taglib-imports": ["../../../packages/marko-virtual/marko.json"] }

‎examples/marko/fixed/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
},
1010
"dependencies": {
1111
"@tanstack/marko-virtual": "workspace:*",
12-
"marko": "^6.0.0",
1312
"@marko/run": "^0.7.0",
14-
"marko": ">=6.0.0"
13+
"marko": "^6.0.0"
1514
},
1615
"devDependencies": {
1716
"typescript": "5.4.5",

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

Lines changed: 95 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,116 @@
1-
/**
2-
* Fixed-size virtualisation example
3-
*
4-
* Demonstrates row, column, and grid virtualisation using the
5-
* <virtualizer> tag from @tanstack/marko-virtual.
6-
*
7-
* "Fixed" means every item is the same size and never changes.
8-
* This is the simplest and most performant case.
9-
*/
10-
11-
<let/mounted = false/>
12-
<script() { mounted = true }/>
13-
14-
<div class="page">
15-
<h1>Fixed Virtualisation</h1>
16-
<p>
17-
These examples use <strong>fixed</strong> sizes — every item's
18-
dimensions are hard-coded to the same value and never change.
19-
</p>
20-
21-
<if=mounted>
22-
23-
<!-- ── Rows ─────────────────────────────────────────────────────── -->
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Fixed Virtualisation — @tanstack/marko-virtual</title>
7+
<style>
8+
* { box-sizing: border-box; margin: 0; padding: 0; }
9+
body { font-family: system-ui, sans-serif; padding: 24px; }
10+
h1 { font-size: 24px; margin-bottom: 8px; }
11+
h2 { font-size: 18px; margin: 24px 0 12px; }
12+
p { color: #555; margin-bottom: 16px; }
13+
section { margin-bottom: 32px; }
14+
.scroll-row-container { height: 200px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; position: relative; }
15+
.scroll-col-container { width: 400px; height: 80px; overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 6px; position: relative; }
16+
.scroll-grid-container { height: 400px; width: 400px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
17+
.item { display: flex; align-items: center; padding: 0 12px; font-size: 13px; border-bottom: 1px solid #f3f4f6; box-sizing: border-box; }
18+
.item-even { background: #f9fafb; }
19+
.item-odd { background: #ffffff; }
20+
.cell { font-size: 11px; font-family: monospace; box-sizing: border-box; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
21+
.cell-even { background: #f9fafb; }
22+
.cell-odd { background: #ffffff; }
23+
</style>
24+
</head>
25+
<body>
26+
<h1>Fixed Virtualisation</h1>
27+
<p>Fixed sizes — every item's dimensions are hard-coded to the same value and never change.</p>
28+
29+
<let/mounted = false/>
30+
<script() { mounted = true }/>
31+
<p>debug: mounted=${String(mounted)}</p>
2432

2533
<section>
2634
<h2>Rows</h2>
27-
<div/$rowScroll class="scroll-container" style="height: 200px; overflow-y: auto">
28-
<virtualizer|{ virtualItems, totalSize }|
29-
count=10000
30-
estimateSize=() => 35
31-
getScrollElement=rowScroll
32-
>
33-
<div style=`height: ${totalSize}px; width: 100%; position: relative`>
34-
<for|item| of=virtualItems>
35-
<div
36-
class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
37-
style=`
38-
position: absolute;
39-
top: 0;
40-
left: 0;
41-
width: 100%;
42-
height: ${item.size}px;
43-
transform: translateY(${item.start}px);
44-
`
45-
>
46-
Row ${item.index}
47-
</div>
48-
</for>
49-
</div>
50-
</virtualizer>
35+
<div/rowScroll class="scroll-row-container">
36+
<if=mounted>
37+
<virtualizer|{ virtualItems, totalSize }|
38+
count=10000
39+
estimateSize=() => 35
40+
getScrollElement=rowScroll
41+
>
42+
<div style=`height: ${totalSize}px; width: 100%; position: relative`>
43+
<for|item| of=virtualItems>
44+
<div
45+
class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
46+
style=`position: absolute; top: 0; left: 0; width: 100%; height: ${item.size}px; transform: translateY(${item.start}px)`
47+
>
48+
Row ${item.index}
49+
</div>
50+
</for>
51+
</div>
52+
</virtualizer>
53+
</if>
5154
</div>
5255
</section>
5356

54-
<!-- ── Columns ──────────────────────────────────────────────────── -->
55-
5657
<section>
5758
<h2>Columns</h2>
58-
<div/$colScroll class="scroll-container" style="width: 400px; height: 80px; overflow-x: auto">
59-
<virtualizer|{ virtualItems, totalSize }|
60-
count=10000
61-
estimateSize=() => 100
62-
horizontal=true
63-
getScrollElement=colScroll
64-
>
65-
<div style=`width: ${totalSize}px; height: 100%; position: relative`>
66-
<for|item| of=virtualItems>
67-
<div
68-
class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
69-
style=`
70-
position: absolute;
71-
top: 0;
72-
left: 0;
73-
height: 100%;
74-
width: ${item.size}px;
75-
transform: translateX(${item.start}px);
76-
`
77-
>
78-
Col ${item.index}
79-
</div>
80-
</for>
81-
</div>
82-
</virtualizer>
59+
<div/colScroll class="scroll-col-container">
60+
<if=mounted>
61+
<virtualizer|{ virtualItems, totalSize }|
62+
count=10000
63+
estimateSize=() => 100
64+
horizontal=true
65+
getScrollElement=colScroll
66+
>
67+
<div style=`width: ${totalSize}px; height: 100%; position: relative`>
68+
<for|item| of=virtualItems>
69+
<div
70+
class=item.index % 2 === 0 ? "item item-even" : "item item-odd"
71+
style=`position: absolute; top: 0; left: 0; height: 100%; width: ${item.size}px; transform: translateX(${item.start}px)`
72+
>
73+
Col ${item.index}
74+
</div>
75+
</for>
76+
</div>
77+
</virtualizer>
78+
</if>
8379
</div>
8480
</section>
8581

86-
<!-- ── Grid ─────────────────────────────────────────────────────── -->
87-
8882
<section>
8983
<h2>Grid</h2>
90-
<p class="note">
91-
Grid = two <code>&lt;virtualizer&gt;</code> tags composed,
92-
sharing the same scroll element.
93-
</p>
94-
<div/$gridScroll class="scroll-container" style="height: 400px; width: 400px; overflow: auto">
95-
<virtualizer|{ virtualItems: rowItems, totalSize: rowTotal }|
96-
count=1000
97-
estimateSize=() => 35
98-
getScrollElement=gridScroll
99-
>
100-
<virtualizer|{ virtualItems: colItems, totalSize: colTotal }|
84+
<div/gridScroll class="scroll-grid-container">
85+
<if=mounted>
86+
<virtualizer|{ virtualItems: rowItems, totalSize: rowTotal }|
10187
count=1000
102-
estimateSize=() => 100
103-
horizontal=true
88+
estimateSize=() => 35
10489
getScrollElement=gridScroll
10590
>
106-
<div style=`height: ${rowTotal}px; width: ${colTotal}px; position: relative`>
107-
<for|row| of=rowItems>
108-
<for|col| of=colItems>
109-
<div
110-
class=(col.index + row.index) % 2 === 0 ? "item item-even" : "item item-odd"
111-
style=`
112-
position: absolute;
113-
top: 0;
114-
left: 0;
115-
width: ${col.size}px;
116-
height: ${row.size}px;
117-
transform: translateX(${col.start}px) translateY(${row.start}px);
118-
display: flex;
119-
align-items: center;
120-
justify-content: center;
121-
`
122-
>
123-
${row.index}, ${col.index}
124-
</div>
91+
<virtualizer|{ virtualItems: colItems, totalSize: colTotal }|
92+
count=1000
93+
estimateSize=() => 100
94+
horizontal=true
95+
getScrollElement=gridScroll
96+
>
97+
<div style=`height: ${rowTotal}px; width: ${colTotal}px; position: relative`>
98+
<for|row| of=rowItems>
99+
<for|col| of=colItems>
100+
<div
101+
class=(col.index + row.index) % 2 === 0 ? "cell cell-even" : "cell cell-odd"
102+
style=`position: absolute; top: 0; left: 0; width: ${col.size}px; height: ${row.size}px; transform: translateX(${col.start}px) translateY(${row.start}px); display: flex; align-items: center; justify-content: center`
103+
>
104+
${row.index},${col.index}
105+
</div>
106+
</for>
125107
</for>
126-
</for>
127-
</div>
108+
</div>
109+
</virtualizer>
128110
</virtualizer>
129-
</virtualizer>
111+
</if>
130112
</div>
131113
</section>
132114

133-
</if>
134-
</div>
135-
136-
<style>
137-
.page {
138-
font-family: system-ui, sans-serif;
139-
max-width: 600px;
140-
margin: 0 auto;
141-
padding: 24px;
142-
}
143-
144-
h1 { font-size: 24px; margin-bottom: 8px; }
145-
h2 { font-size: 18px; margin: 24px 0 12px; }
146-
p { color: #555; margin-bottom: 16px; }
147-
148-
.note { font-size: 13px; }
149-
code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }
150-
151-
section { margin-bottom: 32px; }
152-
153-
.scroll-container {
154-
border: 1px solid #e5e7eb;
155-
border-radius: 6px;
156-
position: relative;
157-
}
158-
159-
.item {
160-
display: flex;
161-
align-items: center;
162-
padding: 0 12px;
163-
font-size: 13px;
164-
border-bottom: 1px solid #f3f4f6;
165-
box-sizing: border-box;
166-
}
167-
168-
.item-even { background: #f9fafb; }
169-
.item-odd { background: #ffffff; }
170-
</style>
115+
</body>
116+
</html>

‎examples/marko/grid/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
},
1010
"dependencies": {
1111
"@tanstack/marko-virtual": "workspace:*",
12-
"marko": "^6.0.0",
1312
"@marko/run": "^0.7.0",
14-
"marko": ">=6.0.0"
13+
"marko": "^6.0.0"
1514
},
1615
"devDependencies": {
1716
"typescript": "5.4.5",

‎examples/marko/infinite-scroll/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
},
1010
"dependencies": {
1111
"@tanstack/marko-virtual": "workspace:*",
12-
"marko": "^6.0.0",
1312
"@marko/run": "^0.7.0",
14-
"marko": ">=6.0.0"
13+
"marko": "^6.0.0"
1514
},
1615
"devDependencies": {
1716
"typescript": "5.4.5",

‎examples/marko/smooth-scroll/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
},
1010
"dependencies": {
1111
"@tanstack/marko-virtual": "workspace:*",
12-
"marko": "^6.0.0",
1312
"@marko/run": "^0.7.0",
14-
"marko": ">=6.0.0"
13+
"marko": "^6.0.0"
1514
},
1615
"devDependencies": {
1716
"typescript": "5.4.5",

‎examples/marko/variable/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
},
1010
"dependencies": {
1111
"@tanstack/marko-virtual": "workspace:*",
12-
"marko": "^6.0.0",
1312
"@marko/run": "^0.7.0",
14-
"marko": ">=6.0.0"
13+
"marko": "^6.0.0"
1514
},
1615
"devDependencies": {
1716
"typescript": "5.4.5",

‎examples/marko/window/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
},
1010
"dependencies": {
1111
"@tanstack/marko-virtual": "workspace:*",
12-
"marko": "^6.0.0",
1312
"@marko/run": "^0.7.0",
14-
"marko": ">=6.0.0"
13+
"marko": "^6.0.0"
1514
},
1615
"devDependencies": {
1716
"typescript": "5.4.5",

‎packages/marko-virtual/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@
3636
"default": "./dist/index.cjs"
3737
}
3838
},
39-
"./package.json": "./package.json"
39+
"./package.json": "./package.json",
40+
"./marko.json": "./marko.json",
41+
"./src/tags/": "./src/tags/"
4042
},
4143
"sideEffects": false,
4244
"files": [
@@ -63,4 +65,4 @@
6365
"peerDependencies": {
6466
"marko": ">=6.0.0"
6567
}
66-
}
68+
}

0 commit comments

Comments
 (0)