feat(nuxt): allow fallback production content in <DevOnly>

[ineshbose]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is a (silly little) PR that's motivated by some use-cases/scenarios where usage of the handy DevOnly causes some design changes in my app during build and so usage requires extra consideration. For example,

<div class="flex justify-between">
  <span>1</span>
  <span>2</span>

  <!-- here I *could* wrap DevOnly in span but it may affect what I put inside the component -->
  <span><DevOnly></DevOnly></span>
  <!-- and where do I put 3 if I don't want both fighting for space in span during dev -->

</div>

<!-- more realistic example -->
<div class="flex justify-between">
  <span>Search</span>
  <span>Branding</span>

  <Menu />
  <DevOnly>
    <DevMenu /> <!-- custom component as superset of Menu -->
  </DevOnly>
</div>

In such cases, especially where I have flex class, when DevOnly is removed, it causes block of three to change into two across the screen. This could allow fallback usage if ever required by devs.

<div class="flex justify-between">
  <span>1</span>
  <span>2</span>
  <DevOnly>
    <Button />
    <template #fallback><span>3</span></template>
  </DevOnly>
</div>

<div class="flex justify-between">
  <span>Search</span>
  <span>Branding</span>
  <DevOnly>
    <DevMenu />
    <template #fallback><Menu /></template>
  </DevOnly>
</div>

Could test it out in the repository playground:

playground/app.vue

<script setup lang="ts">
</script>

<template>
  <!-- Edit this file to play around with Nuxt but never commit changes! -->
  <div>
    Nuxt 3 Playground
    <DevOnly>Some dev-only info</DevOnly>
    <div><DevOnly>Some dev-only info</DevOnly></div>
    <div>
      <DevOnly>
        Some dev-only info
        <template #fallback>
          Some prod-only info
        </template>
      </DevOnly>
    </div>
  </div>
</template>

<style scoped>

</style>

and run pnpm play:build && pnpm play:preview

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	76fbd00

[ineshbose]

Sorry I'm unable to figure out why tests are failing (webpack in my testing works, and the vite test on empty.ts is odd) - any help/guidance please? 😅

[florian-lefebvre]

What if instead we applied display: contents to the DevOnly component? so that is doesn't affect layout at all

[ineshbose]

If I'm not wrong, styles can't be applied to DevOnly, and regardless of whatever the contents, it gets removed from the SFC

[florian-lefebvre]

Yes I read the component code after commenting 🙄. But I'm wondering if providing a production fallback doesn't defeat the whole purpose of the component 🤔. I don't know, I guess we'll wait for a maintainer's comment

[ineshbose]

Very fair point - I do think it won't change functionality but rather provide the feature if ever required (like in the above examples)

Can't see it hurt - it's nice to have! 🙂

[danielroe]

I think this is a nice feature - thank you! ❤️

I think it makes sense to keep fallback as similar to <ClientOnly>.

[huang-julien]

I think this regex won't work with the example in the updated doc and the following html due to [^<]*:

<DevOnly>
        <p>Some dev-only info</p>
        <template #fallback>
          Some prod-only info
        </template>
      </DevOnly>

[huang-julien]

hmmm.... i forgot to submit the review

[danielroe]

thanks for looking at this. we should probably add the handling to TreeShakeTemplatePlugin ...

[ineshbose]

Thanks for sharing! I was chaining the two regex/matches earlier (inefficient imo) but I think putting it into one (needing [^<]) caused it

[huang-julien]

How about using ultrahtml instead of the regex and keep the dev-only plugin ? TreeShakeTemplatePlugin won't remove ssrRender(DevOnly...) but only remove its slots that are not fallback or placeholder.

[ineshbose]

Completely up for using parsers over regex for safer template handling! Should it wait for #20284 as it adds ultrahtml to Nuxt dependencies first?

[huang-julien]

you can do it now, it won't cause any complex merge conflict 🙂

[ineshbose]

Currently gone for splitting regex (in #20840) as ultrahtml could cause trade-off with performance (through safety).