Skip to content

refactor: replace scroll-sentinel id with lvt-scroll-sentinel attribute #313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adnaan merged 6 commits into from
Apr 20, 2026
Merged

refactor: replace scroll-sentinel id with lvt-scroll-sentinel attribute #313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a7e4d0f
refactor: replace id="scroll-sentinel" with lvt-scroll-sentinel attri…
adnaan Apr 20, 2026
4998492
fix: tighten sentinel assertions to match element markup
adnaan Apr 20, 2026
76bf781
fix: use real click instead of dispatchEvent for validation test
adnaan Apr 20, 2026
940ad33
fix: open dialog via commandfor click instead of showModal()
adnaan Apr 20, 2026
a073f0e
Revert "fix: open dialog via commandfor click instead of showModal()"
adnaan Apr 20, 2026
2e78568
Revert "fix: use real click instead of dispatchEvent for validation t…
adnaan Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions e2e/complete_workflow_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -908,8 +908,8 @@ func TestCompleteWorkflow_BlogApp(t *testing.T) {
t.Fatalf("Failed to read template: %v", err)
}

if !strings.Contains(string(tmplContent), `id="scroll-sentinel"`) {
t.Error("❌ Template missing scroll-sentinel")
if !strings.Contains(string(tmplContent), `<div lvt-scroll-sentinel`) {
t.Error("❌ Template missing lvt-scroll-sentinel")
} else {
t.Log("✅ Scroll sentinel element present")
}
Expand Down
6 changes: 3 additions & 3 deletions e2e/rendering_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1288,7 +1288,7 @@ func TestRendering_InfiniteScroll(t *testing.T) {
<style>
#scroll-container { height: 200px; overflow-y: auto; border: 1px solid #ccc; }
.item { height: 40px; padding: 10px; border-bottom: 1px solid #eee; }
#scroll-sentinel { height: 1px; }
[lvt-scroll-sentinel] { height: 1px; }
#loading { display: none; padding: 10px; text-align: center; }
</style>
</head>
Expand All @@ -1301,7 +1301,7 @@ func TestRendering_InfiniteScroll(t *testing.T) {
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div id="scroll-sentinel"></div>
<div lvt-scroll-sentinel></div>
</div>
<div id="loading">Loading more...</div>
</div>
Expand All @@ -1310,7 +1310,7 @@ func TestRendering_InfiniteScroll(t *testing.T) {
let isLoading = false;

const container = document.getElementById('scroll-container');
const sentinel = document.getElementById('scroll-sentinel');
const sentinel = document.querySelector('[lvt-scroll-sentinel]');
const loading = document.getElementById('loading');

// Intersection Observer for infinite scroll
Expand Down
4 changes: 2 additions & 2 deletions e2e/resource_generation_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,8 +187,8 @@ func TestResourceGen_PaginationInfinite(t *testing.T) {
t.Fatalf("Failed to read template: %v", err)
}

if !strings.Contains(string(tmpl), `id="scroll-sentinel"`) {
t.Error("Template missing scroll-sentinel element")
if !strings.Contains(string(tmpl), `<div lvt-scroll-sentinel`) {
t.Error("Template missing lvt-scroll-sentinel element")
}

// Validate generated code compiles
Expand Down
2 changes: 1 addition & 1 deletion e2e/testdata/golden/resource_template.tmpl.golden
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
{{end}}

Expand Down
6 changes: 3 additions & 3 deletions e2e/tutorial_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -828,10 +828,10 @@ func TestTutorialE2E(t *testing.T) {
}

tmplStr := string(tmplContent)
if !strings.Contains(tmplStr, `id="scroll-sentinel"`) {
t.Error("❌ Template does not contain scroll-sentinel element")
if !strings.Contains(tmplStr, `<div lvt-scroll-sentinel`) {
t.Error("❌ Template does not contain lvt-scroll-sentinel element")
} else {
t.Log("✅ Template contains scroll-sentinel element for infinite scroll")
t.Log("✅ Template contains lvt-scroll-sentinel element for infinite scroll")
}

// Verify the sentinel appears in actual rendered HTML when there are no template errors
Expand Down
2 changes: 1 addition & 1 deletion internal/generator/templates/components/pagination.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
{{end}}

Expand Down
4 changes: 2 additions & 2 deletions internal/generator/templates/resource/template.tmpl.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
[[- else if eq .PaginationMode "load-more"]]
{{if .HasMore}}
Expand Down Expand Up @@ -342,7 +342,7 @@
}

function setupInfiniteScroll() {
const sentinel = document.getElementById('scroll-sentinel');
const sentinel = document.querySelector('[lvt-scroll-sentinel]');
if (!sentinel) return;

const observer = new IntersectionObserver(function(entries) {
Expand Down
2 changes: 1 addition & 1 deletion internal/kits/system/multi/components/pagination.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
{{end}}

Expand Down
4 changes: 2 additions & 2 deletions internal/kits/system/multi/templates/resource/template.tmpl.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
[[- else if eq .PaginationMode "load-more"]]
{{if .HasMore}}
Expand Down Expand Up @@ -402,7 +402,7 @@
}

function setupInfiniteScroll() {
const sentinel = document.getElementById('scroll-sentinel');
const sentinel = document.querySelector('[lvt-scroll-sentinel]');
if (!sentinel) return;

const observer = new IntersectionObserver(function(entries) {
Expand Down
2 changes: 1 addition & 1 deletion internal/kits/system/single/components/pagination.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
{{end}}

Expand Down
4 changes: 2 additions & 2 deletions internal/kits/system/single/templates/resource/template.tmpl.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
[[- else if eq .PaginationMode "load-more"]]
{{if .HasMore}}
Expand Down Expand Up @@ -402,7 +402,7 @@
}

function setupInfiniteScroll() {
const sentinel = document.getElementById('scroll-sentinel');
const sentinel = document.querySelector('[lvt-scroll-sentinel]');
if (!sentinel) return;

const observer = new IntersectionObserver(function(entries) {
Expand Down
2 changes: 1 addition & 1 deletion testdata/golden/resource_template.tmpl.golden
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@
Loading more...
</div>
{{end}}
<div id="scroll-sentinel" style="height: 1px;"></div>
<div lvt-scroll-sentinel style="height: 1px;"></div>
{{end}}
{{end}}

Expand Down
Loading