invalid component names

[hamedbaatour]

Describe the bug

some times you have to use some special characters in folder names to follow an internal convention (like $, #, etc...)

or when nesting components that are imported by unplugin-vue-components inside a dynamic route folder that uses vite-plugin-pages. so folders will contain brackets like this: [post] or [...all] etc...

the problem is when using setting directoryAsNamespace: true then unplugin-vue-compoents generates ⛔ invalid component names

for example:

say you have this folder structure

.
└── blog/
    └── [post]/
        └── Component.vue

this will result in the generation of the following component name Blog-[post]Component which looks ugly and causes linting errors when used in other .vue files like this <Blog-[post]Component />

🔨 how to fix

• remove any special characters before pascalCasing here:

https://github.com/antfu/unplugin-vue-components/blob/0d0a939b94be2428f00feceaf98164f28ed457b8/src/core/context.ts#L182

and here

https://github.com/antfu/unplugin-vue-components/blob/0d0a939b94be2428f00feceaf98164f28ed457b8/src/core/context.ts#L207

let me know If I should open a PR for this.

Reproduction

https://stackblitz.com/edit/vue3-script-setup-with-vite-uov8va?file=src%2FApp.vue

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-5820K
    Memory: 31.91 GB
Binaries:
    Node: 18.7.0 
    npm: 7.22.0
  Browsers:
    Chrome: 105.0.5195.102

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.