feat: add dev-only component

[stafyniaksacha]

🔗 Linked issue

resolves nuxt/nuxt#15066

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 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)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Introduce <DevOnly> component that render its content only in development mode.

📝 Checklist

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

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	e92889b
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/63592a23bc38c3000947c6c1
😎 Deploy Preview	https://deploy-preview-7950--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[danielroe]

What about instead tree-shaking out the component + its children from the final build, so it really leaves no trace?

[stafyniaksacha]

We can add a custom core unplugin like the /src/core/plugins/tree-shake.ts to remove everything that match <DevOnly>(:?[\s\S]*)*<\/DevOnly> from sources during build.

What do you think @danielroe ?

[danielroe]

Exactly. Might possibly be within the same plugin.

[stafyniaksacha]

I created another plugin to remove in templates, since the tree-shake runs on vue script and js/ts files.

But this would not tree-shake stateless components call like:

<script setup lang="ts">
import { h } from 'vue'
import { DevOnly } from "#components"

const dynamic = () => h(DevOnly, "Should be dev only")
</script>

<template> 
  <component :is="dynamic" />
</template>

Maybe I can take care about this on the initial tree-shake plugin, and rename them to something like tree-shake-scrips / tree-shake-templates

Edit: I will use this https://github.com/nuxt/framework/blob/main/packages/nuxt/src/components/tree-shake.ts

[Tahul]

Hey!

This is excellent work 🤩

Can't wait to have this merged, this will be so useful to enhance DX on themes :)

[pi0]

Nice PR <3 LGTM. Although tree-shaking should happen in SFCs, if we are outside and not happening, the chunk will silently be included but not rendered/loaded.