SolidJS•10mo ago

Plain string for <Link onload="..."> shows warning

I want to preload google fonts in the root.tsx like so:

            <Link 
              rel='preload'
              href="https://fonts.googleapis.com/..." 
              as='style'
              attr:onload="this.onload=null;this.rel='stylesheet'"
            />

            <Link 
              rel='preload'
              href="https://fonts.googleapis.com/..." 
              as='style'
              attr:onload="this.onload=null;this.rel='stylesheet'"
            />

yet, typescript can't seem to find that attribute, i.e.:

Type '{ rel: string; href: string; as: "style"; "attr:onload": string; }' is not assignable to type 'IntrinsicAttributes & LinkHTMLAttributes<HTMLLinkElement>'. Property 'attr:onload' does not exist on type 'IntrinsicAttributes & LinkHTMLAttributes<HTMLLinkElement>'

How can I use attr: to make clear I want to set my attribute as plain text?

8 Replies

Bersaelor•10mo ago

mhmm so maybe typescript doesn't understand attr: ? Because it still says that attr:onload does not exist ah, interesting, i didn't know that mhmm, I mean I guess solid-js expects the onload to be a handler, i.e.

onload={ () => { 
  this.onload=null;
  this.rel='stylesheet
} 
}

onload={ () => { 
  this.onload=null;
  this.rel='stylesheet
} 
}

but that didn't work for me root.tsx(27, 25): An outer value of 'this' is shadowed by this container. i just copied this code from somewhere when I added preloading to the fonds, mhmm, so it saysAn outer value of 'this' is shadowed by this container. , but I think thats exactly want I want? the this should be the <link> attribute in question i.e. I want the container to shadow the outer this (which would be the root.tsx , right?) so, this seems to be a comment structure:

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="http://www.example.com/style.css">

when using a preload-link first the rel is preload and when it finishes loading it is changed to stylesheet

Bersaelor•10mo ago

https://web.dev/defer-non-critical-css/

web.dev

Defer non-critical CSS

Learn how to defer non-critical CSS with the goal of optimizing the Critical Rendering Path, and improving FCP (First Contentful Paint).

Bersaelor•10mo ago

With this information, optimize your CSS so that the browser starts processing critical styles immediately after page loads, while deferring non-critical CSS for later:

but as they also said

In this guide, you used vanilla code to implement this optimization. In a real production scenario, it's a good practice to use functions like loadCSS, that can encapsulate this behavior and work well across browsers, and can support a Content Security Policy that may not allow inline onload JavaScript.

loading fonts from googlefonts in a blocking way adds extra blocking 600ms - 1000ms on mobiles devices for first page load would we still get into trouble with CSP's using event.target ? noice, thank you for reminding me of event.currentTarget int he example they do e.currentTarget.onload = null; would that also remove the handler in solid ?

Bersaelor•10mo ago

i mean it seems to work in localhost , let's see hwta happens if I deploy and SSR it

Bersaelor•10mo ago

I can also see it changing when I have the devtools open and look at the lines while refreshing thats not my IDE, thats chrome devtools screenshot of it working (on localhost) so this is the code:

            <Link
              rel='preload'
              href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap"
              as='style'
              onload={(e) => { e.currentTarget.rel = 'stylesheet'; }}
            />

            <Link
              rel='preload'
              href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap"
              as='style'
              onload={(e) => { e.currentTarget.rel = 'stylesheet'; }}
            />

Bersaelor•10mo ago

and this is what the result looks like in chrome

Bersaelor•10mo ago

yup https://start.solidjs.com/api/Link

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

Bersaelor•10mo ago

i'm not sure how that works in solid same result I could try adding a ref and adding an observer in onMount. But wouldn't that be super verbose for that one-liner? i see, well you told me and the tutorial above said so, so you two are probably right pretty sure that is the reason why Safari doesn't swicth from preload to stylesheet the rel attribute is not switched on safari but <link rel="stylesheet preload" as="style" href="style.css" > seems to work too, let's see what https://pagespeed.web.dev says when I deploy that yup, seems that fixed it too (pagespeed.web.dev no longer complains about blocking font loads) nope, sorry just saw this question, not doing any pushing

Gaming

Programming

Plain string for <Link onload="..."> shows warning