fix(nuxt): ensure component dirs in node_modules have lower scanning priority

[CodeDredd]

🔗 Linked issue

Related #6070

❓ 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

Somehow the behaviour for overwriting components which are defined by packages changed. For example if you have a Logo component which is stored under components/global will lose against the package like docus there also a component components/content/Logo is.

It gets even stranger. A component in components/global will be prefixed with Global which is not right. So at the end you get GlobalLogo registered

So for now it's not possible to overwrite a global component locally because of how the directories are listed. In my case the Logo from the node_modules package was always first and therefor no other defined component could overwrite it.

📝 Checklist

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

Reproduction

Priority issue: https://codesandbox.io/s/eager-noyce-r9tjgs

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	d5f31ac
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62f2237b72f3a10009094b1a

[CodeDredd]

@pi0 Now my chance is here for my first contribution 😄

[danielroe]

Would you attach a reproduction showing that ~/components/global/SomeComponent.vue is prefixed with GlobalSomeComponent? 🙏

The linked PR (#6070) is still only available on the edge channel, and will not work in RC6.

[CodeDredd]

@danielroe Sure....already working on it as mentioned. Yeah i know its edge. It's only releated to edge version

[CodeDredd]

@danielroe Ok the thing with GlobalLogo i am not able to reproduce after running yarn upgrade.... i am trying to find out how i got it. Meanwhile the thing with the priority for components is still there.
Somehow i couldn't get a stackblitz example running. It throws me an arrow in @nuxthq

But here is a working reproduction what i mean:
https://github.com/CodeDredd/pinia-orm/tree/docs-search/docs
I have added a Logo in global and content and still the default Logo from docus is taken.

[danielroe]

Yes, it might be that you are on a version of edge before the PR, which is why a repro would be helpful.

I like the point about priority. But it might be more than just sorting them. See for example this logic in addComponent:

framework/packages/kit/src/components.ts

Lines 54 to 63 in a41644e

	nuxt.hook('components:extend',(components: Component[])=>{
	constexistingComponent=components.find(c=>(c.pascalName===component.pascalName||c.kebabName===component.kebabName)&&c.mode===component.mode)
	if(existingComponent){
	constname=existingComponent.pascalName||existingComponent.kebabName
	console.warn(`Overriding ${name} component.`)
	Object.assign(existingComponent,component)
	}else{
	components.push(component)
	}
	})

.

[CodeDredd]

The global prefix issue:
Ok get your point....i can defintly tell you that you feature wasalready in the edge version....i am working on a reproduction.

The priority issue:
Ok i get what you mean....but somehow it doesnt come to that point if you run my repdroduction. Its never overwriting or coming to that hook because of this i think:

framework/packages/nuxt/src/components/scan.ts

Lines 125 to 128 in 07fa104

	// Ignore component if component is already defined (with same mode)
	if(!components.some(c=>c.pascalName===component.pascalName&&['all',component.mode].includes(c.mode))){
	components.push(component)
	}

[CodeDredd]

Here is the priority issue thing. Please run yarn dev. somehow sandbox always uses ``yarn start`:
https://codesandbox.io/s/eager-noyce-r9tjgs

[CodeDredd]

I give up on the prefix thing....seems to be working now. Renaming the ticket so its accurate

[pi0]

Thanks for providing reproduction @CodeDredd 🙏🏼

Locally trying and debugging, this is normalized output of componentDirs:

- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/content [global] - /Users/pooya/tmp/r9tjgs/components/content [global]
- /Users/pooya/tmp/r9tjgs/components/global [global]
- /Users/pooya/tmp/r9tjgs/components
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/app [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/docs [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/prose [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/content [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/github [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt-themes/docus/components/icons [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxtjs/algolia/dist/runtime/components [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxt/content/dist/runtime/components [global]
- /Users/pooya/tmp/r9tjgs/node_modules/@nuxthq/studio/dist/runtime/components

Obviously, docus dir should be after yours to allow overriding. Let me debug what exactly is happening.

[pi0]

Debugging more, it seems a regression from the content module (See #1417) which we should solve there. (@CodeDredd please ping in linked comment if you like to work on fixing it. I think you can simply reverse layers() so that last unshift goes to first)

I think it would be a general good fix to ensure dirs with node_modules in them, always have lower priority during sorting process. What do you think @danielroe?

[danielroe]

Nice find. I agree, user provided components should always override modules/extends.

[pi0]

js sorting is fun 😆

[CodeDredd]

I dont't want make a double sort to ensure that global ist first content second and node_modules last . Damn js sort ^^

[CodeDredd]

@pi0 now you test it again....it should be now save that node_modules is always last and users global always first