fix(nuxt): use parser to treeshake <ClientOnly>

[huang-julien]

🔗 Linked issue

resolve nuxt/nuxt#15227
resolve nuxt/nuxt#15396
closes #8789 (by including it)

❓ 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

hi 👋 , i think this should fix nuxt/nuxt#15227.
Instead of treeshaking the default slot before SFC compilation.
This PR:

• move the module before the component loader plugin (to avoid having extra imports to remove)
• enforce post, this way the scoped attributes will be already added when modifying the code
• remove the default slot of ClientOnly components
• remove components direct import (or Identifier) based on if they are called only in the removed code.
• it also remove the components from the setup return statement (mostly in dev)

Test:

• This also adds a test to ensure that style are corretly applied once on client.

let me know what you think of this 🙂

todo:

• change the regex to test _component_ and unref() (resolve and direct import)

📝 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	21543b2
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/636e77ad7e84eb00081d3445
😎 Deploy Preview	https://deploy-preview-8713--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]

Thanks for working on this!

[socket-security]

Socket Security Pull Request Report

👍 No new dependency issues detected in pull request

Pull request report summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script confusion	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@2.4.2

Powered by socket.dev

[pi0]

@danielroe What is status of this PR?

[danielroe]

The latest snapshot test failure is likely due to a vue or vite plugin vue upgrade - it's replicable with latest node_modules even undoing the merge commit.

Would you be able to have a look? 🙏

[huang-julien]

@danielroe Did the CI failed due to 2 timeout ?
Couldn't reproduce it in local