[✨] Add "eager" option to useClientEffect$ eagerness #2926

felixsanz · 2023-02-10T18:15:10Z

Is your feature request related to a problem?

Currently useClientEffect$() let you specify how is executed with {eagerness:'visible|load|idle'}, but all of them are delayed.

Can we have something like eagerness: eager that puts the script inside <head>? (before <body>)

Describe the solution you'd like

^

Describe alternatives you've considered

Using a simple <script>, but prefer the qwik's way.

Additional context

No response

The text was updated successfully, but these errors were encountered:

mhevery · 2023-02-10T20:16:29Z

I thought load was as eagre as it gets. Why do you think it is not eager enough? What do you have in mind?

felixsanz · 2023-02-10T20:45:04Z

I thought load was as eagre as it gets. Why do you think it is not eager enough? What do you have in mind?

Using it for theming. load waits until all document is rendered and then executes, which may trigger flashes of styles and other issues. (like showing website in light mode and then switching to dark mode when reading localStorage / user preferences).

With this solution, this piece of JS will block rendering (intended), to retrieve the theme and then render correctly once

mhevery · 2023-02-10T21:53:02Z

OK, that make sense. I think this is out of scope for v1

manucorporat · 2023-02-11T13:02:24Z

it would be cool but technically very challenging:

Blocking means put it in the <head> this is hard to do with streaming, we might put in the network the head when we are rendering a new component, we can't go back and inject stuff in html that has already be sent!
QRL are always lazy loaded, so not sure how we can block it.

I cant think of any way, we can implement this

felixsanz · 2023-02-11T14:01:56Z

it would be cool but technically very challenging:
* Blocking means put it in the `<head>` this is hard to do with streaming

If i'm not wrong, you can put scripts wherever you want, even right after opening body tag, and rendering will block there. That's the reason we usually put scripts after all the HTML has been sent right?

I mean qwik can send the script tag at any moment and rendering will stop to execute the script, and then continue loading HTML, and after all HTML is loaded it will fire all eagerness: load/etc scripts.

I'm mistaken?

Just as qwik sends its core script (qwikloader), it can send all other eagerness: eager scripts as soon as possible?

genki · 2023-02-12T07:29:14Z

Even if the {eagerness:'eager'} mentioned above is challenging, isn't it possible to be executed immediately when the component is mounted as like as <script> tag does?
So to speek {eagerness:'immediate'}.
I think it can be used for the flickerless theming if the theme name is in the cookie.

genki · 2023-02-12T10:03:27Z

Having looked into the qwikloader, as it is placed at the very end of the HTML so it couldn't be used for resolving QRLs at the timing that components are mounted.
I think it can be accomplished if there is the global queue (ex window.qwikloads) for requesting to resolve QRL, and the qwikloader responds to do it before the begining of rendering.

felixsanz · 2023-02-12T12:20:59Z

Even if the {eagerness:'eager'} mentioned above is challenging, isn't it possible to be executed immediately when the component is mounted as like as <script> tag does? So to speek {eagerness:'immediate'}. I think it can be used for the flickerless theming if the theme name is in the cookie.

But that won't work for static site (SSG), plus if its executed when component is mounted there is no difference to eagerness: load. It needs to be executed while html is parsing, in blocking/sync mode

genki · 2023-02-12T15:10:52Z

@felixsanz
Even SSG, the codes enqueuing callbacks to the qwikloader can be generated as <script> statically, so there's a chance to changing styles and DOM tree depending on the client side info, such as the theme name in the cookie.
The timing that components are mounting is before the completion of the DOM tree building (the DOMContentLoaded event that causes the eagerness: load), it means before the rendering started.

felixsanz · 2023-02-12T19:11:38Z

@felixsanz Even SSG, the codes enqueuing callbacks to the qwikloader can be generated as <script> statically, so there's a chance to changing styles and DOM tree depending on the client side info, such as the theme name in the cookie. The timing that components are mounting is before the completion of the DOM tree building (the DOMContentLoaded event that causes the eagerness: load), it means before the rendering started.

no, what I mean is that SSG doesn't use cookies as there is no server

genki · 2023-02-13T04:04:44Z

@felixsanz
Even through not with cookies, you can use IndexedDB, caches API and so on without servers to accomplish the flickerless theming if before the DOMContentLoaded.
The script tag in <head> is not matter for it. It is really depending on before or after the document's readystate being interractive.

genki · 2023-02-13T11:21:48Z

By the way, it is difficult to do something from the qwik component before the rendering because of the module script is always run after the document's ready.
To achieve this, the inline <script dangerouslySetInnerHTML={...} /> tag is needed in the resulting JSX.
All you want to do is capable in the script, except to access states of the container.
So the problem is how to pass the state to the script's scope.
I think similar work has already done by the qwik. It's a kind of resuming of client to client.
The solution can be like this:

prepend the serialized state into the JSX.
append `<script>' tag including handler script to the JSX
the script tag starts with the state loader as like as the useLexicalScope in order to use the state from the handler.

genki · 2023-02-15T00:17:23Z

I made a runnable PoC of doing it as a component <ClientEffect /> here :)
https://stackblitz.com/edit/qwik-starter-omdy7b?file=src/routes/index.tsx

felixsanz · 2023-02-15T01:12:56Z

I made a runnable PoC of doing it as a component <ClientEffect /> here :) https://stackblitz.com/edit/qwik-starter-omdy7b?file=src/routes/index.tsx

Mmm, it seems to work fine, but I don't understand what's going on. Can you explain a bit? Also, is this expected to be used by the user or integrated in qwik somehow?

genki · 2023-02-15T01:55:06Z

@felixsanz I just implemented the idea explained above.
The <ClientEffect /> has props
state: serialized and prepended into the <script> tag.
eager: callback called before the rendering. You can't access to things in the component except the state passed.
load$: QRL called when the {eagerness: load}. You can access to things in the component. To achieve this, a CustomEvent is used.
This is already usable, but there are rooms to be sophisticated as follows:

Though introduced as a workaround, maybe the setTimeout can be removed.
Using dispatch() of the qwikloader is better than triggering the CustomEvent.
Using serializer better than JSON.stringify()

wmertens · 2023-03-14T08:03:24Z

For the theming you actually need to embed a script as high up as you can. I don't think Qwik can ever do what you want with a hook. ClientEffect can do the embedding but it looks overkill for this use case.

BTW, another option to prevent theme flashes is to apply all the CSS hiding classes from the start and then when JS is disabled add a style that overrides the hides, like <noscript><style>.hide-block { display: block !important; }</style></noscript>.

felixsanz added TYPE: enhancement New feature or request STATUS-1: needs triage New issue which needs to be triaged labels Feb 10, 2023

zanettin mentioned this issue Mar 15, 2023

[🐞] useVisibleTask$() maybe the cause of flickering (dark mode) after the first render #3391

Closed

manucorporat added this to the BACKLOG: Post v1.0 milestone Mar 21, 2023

GrandSchtroumpf mentioned this issue Jul 29, 2023

feat(qwik-city): Adding Script Tag to Head Tag via DocumentHead #3230

Merged

7 tasks

felixsanz closed this as not planned Won't fix, can't repro, duplicate, stale Jan 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[✨] Add "eager" option to useClientEffect$ eagerness #2926

[✨] Add "eager" option to useClientEffect$ eagerness #2926

felixsanz commented Feb 10, 2023 •

edited

Loading

mhevery commented Feb 10, 2023

felixsanz commented Feb 10, 2023 •

edited

Loading

mhevery commented Feb 10, 2023

manucorporat commented Feb 11, 2023

felixsanz commented Feb 11, 2023 •

edited

Loading

genki commented Feb 12, 2023 •

edited

Loading

genki commented Feb 12, 2023 •

edited

Loading

felixsanz commented Feb 12, 2023

genki commented Feb 12, 2023

felixsanz commented Feb 12, 2023

genki commented Feb 13, 2023 •

edited

Loading

genki commented Feb 13, 2023

genki commented Feb 15, 2023

felixsanz commented Feb 15, 2023

genki commented Feb 15, 2023 •

edited

Loading

wmertens commented Mar 14, 2023

[✨] Add "eager" option to useClientEffect$ eagerness #2926

[✨] Add "eager" option to useClientEffect$ eagerness #2926

Comments

felixsanz commented Feb 10, 2023 • edited Loading

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

mhevery commented Feb 10, 2023

felixsanz commented Feb 10, 2023 • edited Loading

mhevery commented Feb 10, 2023

manucorporat commented Feb 11, 2023

felixsanz commented Feb 11, 2023 • edited Loading

genki commented Feb 12, 2023 • edited Loading

genki commented Feb 12, 2023 • edited Loading

felixsanz commented Feb 12, 2023

genki commented Feb 12, 2023

felixsanz commented Feb 12, 2023

genki commented Feb 13, 2023 • edited Loading

genki commented Feb 13, 2023

genki commented Feb 15, 2023

felixsanz commented Feb 15, 2023

genki commented Feb 15, 2023 • edited Loading

wmertens commented Mar 14, 2023

felixsanz commented Feb 10, 2023 •

edited

Loading

felixsanz commented Feb 10, 2023 •

edited

Loading

felixsanz commented Feb 11, 2023 •

edited

Loading

genki commented Feb 12, 2023 •

edited

Loading

genki commented Feb 12, 2023 •

edited

Loading

genki commented Feb 13, 2023 •

edited

Loading

genki commented Feb 15, 2023 •

edited

Loading