qwik icon indicating copy to clipboard operation
qwik copied to clipboard

[✨] Add a `scripts` key to head to allow for injecting custom scripts.

Open shaunchander opened this issue 3 years ago • 6 comments

Is your feature request related to a problem?

I'm trying to add structured data to a statically generated blog but there doesn't seem to be a native way to inject script tags into the page's head.

I believe you can only edit head within root.tsx. Outside of that we have to export a head object which only expects three keys: frontmatter, links, and meta. It would nice to also include a script key as well (or perhaps a Script component similar to what's in NextJS) to customize ad-hoc scripts.

Describe the solution you'd like

We can allow DocumentHead to accept a scripts key. The type of the key could be an array of objects. An example of this implementation can be:

scripts: [
  {
   script: "<script src='ink-to-external-js' />, <script>console.log('hello world')</script>", 
   eagerness: "load"
  }
]

Where script accepts the script tag as a raw string and eagerness can determine where the script should be placed on the page (either in the head or right before the closing body tag).

Describe alternatives you've considered

I was considering using a QwikContext to store blog metadata and then consume this context up in root.tsx (essentially a bottom-up approach). Though I feel a solution like this shouldn't need to rely on context.

Additional context

No response

shaunchander avatar Jan 08 '23 23:01 shaunchander

At the end of the day, I think DevEx should take precedence here. While contexts can be used to bubble data up into root.tsx, adding native support for appending scripts to head would make the process much quicker.

shaunchander avatar Jan 13 '23 01:01 shaunchander

This sounds like a use case for partytown https://qwik.builder.io/integrations/integration/partytown/

jimjamdev avatar Jan 16 '23 12:01 jimjamdev

anybody want to take into a PR?

manucorporat avatar Feb 13 '23 11:02 manucorporat

Hi @manucorporat I would love to open a PR could you give me some guidance

moaoa avatar Feb 17 '23 07:02 moaoa

Hi @manucorporat 😄

I would like to work on this if possible.

Thanks!

kemilbeltre avatar Feb 27 '23 16:02 kemilbeltre

@manucorporat which properties should we include in the DocumentScript interface? (src, id, type...)

kemilbeltre avatar Feb 27 '23 17:02 kemilbeltre

@manucorporat Is there anything else expected to close this issue?

kemilbeltre avatar Jun 20 '23 19:06 kemilbeltre

the feature is done.

gioboa avatar Aug 26 '23 20:08 gioboa