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

feat(nuxt): enable renderSSRHeadOptions configuration for unhead #26989

Merged

Conversation

Mini-ghost
Copy link
Contributor

@Mini-ghost Mini-ghost commented Apr 29, 2024

🔗 Linked issue

📚 Description

This PR support configure renderSSRHeadOptions of unhead to help us adjust the output of head tags, such as get more compact HTML result.

export default defineNuxtConfig({
  features: {
    omitLineBreaks: true
  }
})

In production environment , when meta.renderSSRHeadOptions.omitLineBreaks is false:

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="modulepreload" as="script" crossorigin href="/_nuxt/Cc_1Avt4.js">
<link rel="prefetch" as="script" crossorigin href="/_nuxt/CW1WwFCW.js">
<link rel="prefetch" as="script" crossorigin href="/_nuxt/BbxhR_VA.js">
<link rel="prefetch" as="script" crossorigin href="/_nuxt/Cz_w0jng.js">
<script type="module" src="/_nuxt/Cc_1Avt4.js" crossorigin></script></head>

In production environment , when meta.renderSSRHeadOptions.omitLineBreaks is undefined or true:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/Bzb4FGiR.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/CX8zz9fU.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/bk47NN6-.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/ImDE-rvC.js"><script type="module" src="/_nuxt/Bzb4FGiR.js" crossorigin></script></head>

Copy link

stackblitz bot commented Apr 29, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@danielroe
Copy link
Member

I'm wondering about the best location for this (and possibly other options) for the head - maybe instead in head or in app.head. I'm worried this will clutter features. What do you think @harlan-zw?

@harlan-zw
Copy link
Contributor

harlan-zw commented Apr 29, 2024

If a features Nuxt line break config was going to be added it should handle the line breaks for the entire document, not just the head so I'd say this isn't the right place for it.

Having a way to pass options to the Unhead functions would be the most future proof and it would make sense for that config to exist within the head modules config that is under the meta key. (although we should probably rename this to head or unhead for v4)

export default defineNuxtConfig({
  meta: {
    renderSSRHead: { // typeof RenderSSRHeadOptions @unhead/schema
      ssrOmitLineBreaks: true,
    }
  }
})

I don't really see a reason why this can't be enabled by default in a production environment for v4 either 🤔 Could also be the default of Unhead v2 if I have time to get to this before v4

@Mini-ghost
Copy link
Contributor Author

I am currently following the conclusions of unjs/unhead#297 and have set omitLineBreaks to be disabled by default. However, I think it would be great if omitLineBreaks could be enabled by default in the production environment!

Also, concerning the type of meta.renderSSRHead, if it is expected to align with the RenderSSRHeadOptions from @unhead/schema, perhaps we could structure the configuration as follows to ensure consistency. Additionally, would it be more appropriate to use renderSSRHeadOptions instead of renderSSRHead?

export default defineNuxtConfig({
  meta: {
    renderSSRHeadOptions: { // typeof RenderSSRHeadOptions @unhead/schema
      omitLineBreaks: true,
    }
  }
})

Moreover, as we anticipate the name will change to head or unhead in v4, could we consider adopting this naming convention in v3 to maintain continuity?

@danielroe
Copy link
Member

I don't think either meta or head currently exists in the Nuxt config options, so I think we're good to add a new key without any issues (though head would conflict with Nuxt 2 types - so it might create issues for module that support both Nuxt 2/Bridge and Nuxt 3 🤔)...

@Mini-ghost Mini-ghost marked this pull request as draft April 29, 2024 23:10
@Mini-ghost
Copy link
Contributor Author

It appears that our decision to use meta as the key in v3 might be a more suitable choice.

Additionally, should we set the schema part in schema/src/config/app.ts?

@Mini-ghost Mini-ghost marked this pull request as ready for review May 1, 2024 14:33
@Mini-ghost Mini-ghost changed the title feat(nuxt): enable omitLineBreaks configuration for @unhead feat(nuxt): enable renderSSRHeadOptions configuration for unhead May 1, 2024
Comment on lines 321 to 330

meta: {
/**
* An object that will be passed to `renderSSRHead` to customize the output.
*
* @see https://unhead.unjs.io/setup/ssr/installation#options
* @type {typeof import('@unhead/schema').RenderSSRHeadOptions}
*/
renderSSRHeadOptions: undefined,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comments here will automatically generate documentation. I want to know how to write better?

Copy link
Member

I wonder about using unhead rather than head or meta. It would match vite, postcss, etc...

@Mini-ghost
Copy link
Contributor Author

I didn’t put much thought into the name initially, but now that I’ve thought it over, unhead actually sounds like a better choice. It clearly points out where our dependencies come from and helps us avoid any mix-ups.

head: {
$resolve: async (val: Partial<AppHeadMetaObject> | undefined, get) => {
const resolved = defu(val, await get('meta') as Partial<AppHeadMetaObject>, {

Should we change it to unhead then?

@danielroe
Copy link
Member

danielroe commented May 2, 2024

I think likely, though I'd love feedback from @pi0 and @harlan-zw particularly. 🙏

The bit in schema is an (untyped) backwards-compatible bit. We'd likely need to keep the backwards-compatibility, but people really shouldn't be using it at this point.

@danielroe
Copy link
Member

We've decided to add unhead key to schema that allows configuring the unhead nuxt module directly, which will unblock configuration of advanced use cases (linking #27031 for headNext support). Would you be happy to update this PR? 🙏

@danielroe danielroe requested a review from harlan-zw May 3, 2024 10:28
Copy link
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect! Though will wait for @harlan-zw's thoughts on API. 🙏

@harlan-zw
Copy link
Contributor

Looks good minus the comment. I'm guessing this will land in v3.12 so probably we want to minimise any new behaviour until v4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

support configure omitLineBreaks of @unhead Nuxt doesn't minify html properly (does not remove line-breaks)
4 participants