Skip to content

feat: add lazy component #615

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

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: add lazy component #615

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f0b814
feat: add lazy component
Sep 22, 2024
7cea552
fix
Sep 22, 2024
55f368b
style: revert indent on sqlpage.js
Sep 22, 2024
182ab38
fix: update sqlpage.js
mtt-artis Sep 22, 2024
33a2c06
refacto: add ':not([aria-busy=true])'
mtt-artis Sep 22, 2024
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
10 changes: 10 additions & 0 deletions examples/cards-with-remote-content/lazy.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
select 'lazy' as component;

select
'/chart-example.sql?_sqlpage_embed' as embed,
Copy link
Author

@mtt-artis mtt-artis Sep 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we keep as embed or as lazy here ?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think as embed is good

'card my-2' as class,
'height:340px' as style;

select '/map-example.sql' as embed;

select '/table-example.sql?_sqlpage_embed' as embed;
53 changes: 32 additions & 21 deletions sqlpage/sqlpage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,30 @@

const nonce = document.currentScript.nonce;

function sqlpage_card() {
for (const c of document.querySelectorAll("[data-pre-init=card]")) {
const source = c.dataset.embed;
fetch(c.dataset.embed)
.then(res => res.text())
.then(html => {
const body = c.querySelector(".card-content");
body.innerHTML = html;
c.removeAttribute("data-pre-init");
const spinner = c.querySelector(".card-loading-placeholder");
if (spinner) {
spinner.parentNode.removeChild(spinner);
}
const fragLoadedEvt = new CustomEvent("fragment-loaded", {
bubbles: true
});
c.dispatchEvent(fragLoadedEvt);
})
function sqlpage_embed() {
for (const c of document.querySelectorAll("[data-embed]")) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this should be done in parallel rather than sequentially ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure if I understand you.
We don't await the fetch so the loop does't wait the promise to be resolved to start the next element.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is the query better ?
document.querySelectorAll("[data-embed]:not([aria-busy=true])")

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it's better !

if (c.ariaBusy === "true") continue;
c.ariaBusy = true;
let url;
try {
url = new URL(c.dataset.embed, window.location.href)
} catch {
console.erreur(`'${c.dataset.embed}' is not a valid url`)
continue;
}
url.searchParams.set("_sqlpage_embed", "");

fetch(url)
.then(res => res.text())
.then(html => {
c.innerHTML = html;
c.ariaBusy = false;
delete c.dataset.embed;
c.dispatchEvent(new CustomEvent("fragment-loaded", {
bubbles: true
}));
})
.catch(err => console.error("Fetch error: ", err));
}
}

Expand Down Expand Up @@ -176,9 +182,14 @@ function sqlpage_form() {
}
}

function get_tabler_color(name) {
return getComputedStyle(document.documentElement).getPropertyValue('--tblr-' + name);
function create_tabler_color() {
const style = getComputedStyle(document.documentElement);
return function get_tabler_color(name) {
return style.getPropertyValue('--tblr-' + name);
}
}

const get_tabler_color = create_tabler_color();

function load_scripts() {
let addjs = document.querySelectorAll("[data-sqlpage-js]");
Expand All @@ -198,6 +209,6 @@ function add_init_fn(f) {

add_init_fn(sqlpage_table);
add_init_fn(sqlpage_map);
add_init_fn(sqlpage_card);
add_init_fn(sqlpage_embed);
add_init_fn(sqlpage_form);
add_init_fn(load_scripts);
24 changes: 12 additions & 12 deletions sqlpage/templates/card.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@
<div class="card h-100
{{~#if active}} card-active{{/if~}}
{{~#if background_color}} bg-{{background_color}} text-{{background_color}}-fg{{/if~}}
"
{{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
">
{{#if link}}
<a href="{{link}}" style="text-decoration: inherit; color: inherit">
{{/if}}
Expand All @@ -39,13 +38,19 @@
{{/if}}
<div class="card-body">
{{#if title}}<h2 class="card-title fs-3 me-3">{{title}}</h2>{{/if}}
<div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}">
<div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}"
{{#if (and embed (ne embed_mode "iframe"))}} data-embed="{{embed}}"{{/if}}
>
{{~description~}}
{{~#if description_md~}}
{{{markdown description_md}}}
{{~/if~}}
{{#if (and embed (ne embed_mode "iframe"))}}
<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
{{~/if~}}
</div>
{{~#if embed ~}}
{{~#if (eq embed_mode "iframe")}}
<iframe src="{{embed}}"
width="{{#if width}}{{width}}{{else}}100%{{/if}}"
Expand All @@ -55,23 +60,18 @@
{{~#if style}} style="{{style}}"{{/if~}}
>
</iframe>
{{~else~}}
<div class="spinner-border card-loading-placeholder" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
{{~/if~}}
{{~/if~}}
</div>
{{#if link}}
</a>
{{/if}}
{{#if footer}}
<div class="card-footer text-muted py-2">
{{#if footer_link}}
{{#if footer_link}}
<a href="{{footer_link}}">{{footer}}</a>
{{else}}
{{else}}
{{footer}}
{{/if}}
{{/if}}
</div>
{{/if}}
{{#if footer_md}}
Expand Down
13 changes: 13 additions & 0 deletions sqlpage/templates/lazy.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="{{default class "my-2"}}"{{~#if style}} style="{{style}}" {{/if~}}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In all other components, class adds new classes without replacing the existing ones

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i know and i hesitate, this div is a light wrapper and i think user should be able to reset it easily if needed.

same for <div class="{{default class "card my-2"}}">. i add this default because most of the component are card.

should we just give no default and handle it like the style param ?

{{#each_row}}
<div data-embed="{{embed}}">
<div class="{{default class "card my-2"}}" {{~#if style}} style="{{style}}" {{/if~}}>
<div class="h-full w-full p-2 d-flex align-items-center justify-content-center">
<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
{{/each_row}}
</div>