fix(nuxt): use parser to treeshake ClientOnly

[huang-julien]

🔗 Linked issue

resolve https://github.com/nuxt/framework/issues/8397 resolve https://github.com/nuxt/framework/issues/8788 closes https://github.com/nuxt/framework/pull/8789 (by including it)

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [x] 🐞 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 :wave: , i think this should fix #8397.
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:

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

📝 Checklist

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

[codesandbox[bot]]

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

[netlify[bot]]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	21543b240235051610be729eb64091d9785aec49
🔍 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.

[socket-security[bot]]

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 [email protected] [email protected]

Powered by socket.dev

[pi0]

@danielroe What is status of this PR?

[huang-julien]

@danielroe @pi0 it should be stable now :)

[warflash]

Hey, just wanted to check in on this PR and ask if there's plans to get it merged any time soon? The issues it's set to resolve prevent us from going from rc.11 to finally 3.0.0 so really looking forward to that :) Thank you!

[vercel[bot]]

@danielroe is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

[huang-julien]

I'm also a bit worried about this, but could'nt find another way to fix it. I hope i didn't miss anything

[huang-julien]

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