head
head copied to clipboard
vueuse
feat: events support on creating elements
Big Question: how we can add event listeners to server-side rendered scripts on hydration?
should continue to make a normal attribute if the value is a string so onload: "console.log('loaded')" will still work
Big Question: how we can add event listeners to server-side rendered scripts on hydration?
there's no need to server-side render the <Script /> component I guess
there's no need to server-side render the
<Script />component I guess
Sometimes we need our script load as soon as possible. This strategy should be used for any critical scripts that need to be fetched and executed before the page is interactive.
should continue to make a normal attribute if the value is a string so
onload: "console.log('loaded')"will still work
Yes of course. But closure will not work!
well it seems next.js just ignores onLoad prop when the strategy is beforeInteractive, which is also ssr-ed, otherwise that script is created on the client-side only
well it seems next.js just ignores onLoad prop when the strategy is beforeInteractive, which is also ssr-ed, otherwise that script is created on the client-side only
I didn't test this on real example but in the docs, it mentioned we can use onLoad
https://stackblitz.com/edit/nextjs-wt4j8y?file=pages%2Findex.js maybe a bug then
What I worrying about is maybe the event won't be triggered because the script is already loaded if (this is a big if) we add listeners on hydration
the listener won't be triggered on hydration because we won't recreate the element to avoid loading it twice:
https://github.com/vueuse/head/blob/5ef9b6225e6c70e18011c33fb77d67de11af0d26/src/index.ts#L198-L201
but maybe we call newEl.onload manually if oldEl.onload is undefined
the listener won't be triggered on hydration because we won't recreate the element to avoid loading it twice:
I looking for a way to attach the event to the existing element. But if find a way to do that, we can't be sure it will be called!!! I tried some ways already but they results in recreating.
@egoist Hi again!
I tried a lot of ways and couldn't find a clean and straightforward way! I think a lot about it and what we did in Nuxt 2 and find out we really don't need to attach event listeners to the SSR script. They just load and evaluate as to their order of definition.
I also think the Next documentation has some mistakes. Maybe they wanted to mention afterInteractive and lazyOnload
Hey @egoist. I'll be looking forward to this feature. If everything is fine, please finish it.
I've tested this locally with onload on script tags, everything seems to be working just fine It has been multiple months and it is a non-breaking change, can this be merged in @egoist @ms-fadaei ?
The only micro performance improvement would be to replace the regex by substring used in this PR https://jsbench.me/pzl6fl8rm3/1 Even though this wouldn't be noticable
value would now be HTML encoded so any scripts would likely not work, otherwise this may introduce XSS issues for users
Could possibly implement this with https://github.com/vueuse/head/issues/95
Will close for now as the PR seems stale, but please comment on the above issue if you agree with the direction
