Replace some content when document loads

[dsyer]

I want to show the authenticated userid in a top corner slot of an otherwise static page. It's quite easy to write plain javascript to listen for the load event and replace a div, but I thought unpoly should be able to handle it, and I'm using it for other stuff anyway. The only solution I could find was this:

<script>
	up.compiler('#auth-link', function(link) {
		up.follow(link);
	});
</script>

with

<div id="auth">
	Unauthenticated
</div>
<a href="/user" id="auth-link" up-target="#auth" style="visibility: hidden;"></a>

Where /user is an endpoint that returns a <div id="auth">...</div>. It seems clunky, but it works, and saves me from writing (much) javascript. So is there a more idiomatic unpoly way to do this?

[davisums]

Up-poll might be an option if I understood your problem correctly. You would need to remove it after the first server response.

[triskweline]

Up-poll might be an option if I understood your problem correctly. You would need to remove it after the first server response.

Polling would stop if the server sends a fragment without an [up-poll] attribute.

In @dsyer's example, we would start with an empty <div>:

<div id="auth" up-source="/user" up-poll up-interval="0"></div>

The fragment would replace itself and stop polling:

<div id="auth">
  Hello user!
</div>

[triskweline]

So is there a more idiomatic unpoly way to do this?

I have written a compiler like yours multiple times. My use case is usually some expensive-to-render partial that I don't need right away.

I also used your method of using a link that is auto-followed. I like the progressive enhancement aspect of it, i.e. the HTML makes some sense without JavaScript.

So thinking about a new attribute like [up-unfurl] (it does not exist yet!). It could work like this:

<a up-unfurl id="auth" href="/user">Show user info</a>

The link would be followed automatically. Without an explicit [up-target] it would target itself by default. So the following response would replace the link:

<div id="auth">
  Hello user!
</div>

Maybe it would make sense to have a modifier that delays loading until the link is intersecting the viewport.

[davisums]

Turbo Frames has something similar (along with a loading="lazy" attribute) which I’ve found useful:
https://turbo.hotwired.dev/handbook/frames#eager-loading-frames

[triskweline]

I really appreciated their point about caching benefits.

[thetutlage]

Came here searching to the same behavior as turbo frames eager loading.

Here's my use case.

• On a dashboard I want to show a series of charts and want to load their data in separate request. - The initial page load contains div with up-source and spinners inside them. After page load, I want to trigger these requests.

[dsyer]

I used up-poll successfully thank you. Maybe it would be helpful to give an example like that in the docs?

[jonasermert]

<div id="auth">
  <a href="/user" up-target="#auth" up-follow>Unauthenticated</a>
</div>

<script>
  up.compiler('[up-target="#auth"]', function(link) {
    
  });
</script>

[triskweline]

Lazy-loading fragments ares currently being developed as [up-partial] (branch hk/up-partial):

<a id="menu" href="/menu" up-partial>Load menu</a>

Such a link will be followed automatically. It will target itself by default. So the following response would replace the link:

<div id="menu">
  Long menu here
</div>

Multiple partials for the same URL will be merged into a single request with multiple X-Up-Target selectors.

You may also lazy load the partial once it is scrolled into the viewport:

<a id="menu" href="/menu" up-partial up-load-on="reveal">Load menu</a>

You will also be able to preload links automatically, or when scrolled into view.

[davisums]

API looks good, looking forward to get rid of my custom compiler! Will it only work for anchor tags or other elements as well?

You will also be able to preload links automatically, or when scrolled into view.

Isn't up-partial going to preload by default, or does this refer to something else?

[triskweline]

Will it only work for anchor tags or other elements as well?

You can use the [up-href] attribute to make any element behave like a link.

Isn't up-partial going to preload by default, or does this refer to something else?

Partials are loaded by default. That last point was about preloading links on hover.

[davisums]

For what it's worth, I think the new up-defer naming is much clearer than up-partial