Skip to content
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.

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

Documented default script attributes vary from actual #304

Closed
Ingramz opened this issue Oct 16, 2024 · 2 comments · Fixed by #390
Closed

Documented default script attributes vary from actual #304

Ingramz opened this issue Oct 16, 2024 · 2 comments · Fixed by #390
Labels
bug Something isn't working

Comments

@Ingramz
Copy link

Ingramz commented Oct 16, 2024

🐛 The bug

The following script

useScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/js-confetti.browser.js')

currently yields

<script data-onload="" data-onerror="" defer="" fetchpriority="low" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js-confetti.browser.js" data-hid="5c23421"></script>

While documentation lists async as one of the attributes that will be added by default, it is missing from the generated output above.

At the same time fetchpriority="low" seems to be missing from documentation, which is also a default.

🛠️ To reproduce

N/A

🌈 Expected behavior

🌈

ℹ️ Additional context

No response

@Ingramz Ingramz added the bug Something isn't working label Oct 16, 2024
@nexoscreator
Copy link
Contributor

Thanks for reporting this! 🙌

  • The async attribute is missing because the script defaults to defer: true. Since async and defer cannot be used together, async is not applied.
  • The fetchpriority="low" attribute is intentionally added as a default for optimization, but we agree that it is missing from the documentation. We'll update the documentation to reflect this behavior.

@nexoscreator
Copy link
Contributor

💡 Explicitly Defining Script Attributes
By default, useScript applies defer: true and omits async. However, you can override these defaults:

Example:

import { useScript } from '#imports'

useScript({
  key: 'js-confetti',
  src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js-confetti.browser.js',
  async: true,  // Explicitly enable async
  defer: false, // Disable defer
})

Output:

<script data-onload="" data-onerror="" fetchpriority="low" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js-confetti.browser.js" async="" data-hid="797b8e"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants