vikejs / vike

🔨 Flexible, lean, community-driven, dependable, fast Vite-based frontend framework.
https://vike.dev
MIT License
4.13k stars 348 forks source link

Remove the obligation to capitalize `+Page` #1479

Closed saaymeen closed 7 months ago

saaymeen commented 7 months ago

Description

This issue is low priority.

When we try to create a page named +page.tsx, we are presented with the following error:

+page.tsx defines an unknown config page, did you mean to define Page instead? (The name of the config Page starts with a capital letter P because it usually defines a UI component: a ubiquitous JavaScript convention is to start the name of UI components with a capital letter.)

While it is true that JSX components must start with a capital letter (or contain a dot), the fact that capitalized files are ubiquitous is highly discussable. Yes, it is the preferred approach to file naming by a lot of developers, but React is actually unopinionated about this matter.

A library like vike should not force a specific convention on users. To show the discrepancy between naming conventions, we can check AirBnB's style guide, which is on par with vikes recommendation. When compared to Google's javascript style guide, we can see that the recommendation here is to use all lowercase letters.

Hand in hand with goes the + prepended to a page. With our convention, the .page.tsx extension was much more suitable.

These points are highly discussable, preferably vike would not force a specific convention to not interfer with conventions of users.

brillout commented 7 months ago

I did consider this. But there are other constraints that made me go for the current design. Most notably: redundant syntax adds DX complexity.

Closing because it isn't a priority right now, but I'm happy to revisit if enough people show interest for this.

DecentM commented 2 weeks ago

This creates an issue with cross-platform teams, as case sensitivity works differently across different filesystems. Devs on Mac, Linux, Windows, and WSL can (and will lol) have separate issues when files use capitalisation for development logic differences. The error message says this is a ubiquitous practice, but that's not fully accurate. For example, Vue auto-converts between hyphen casing and camel casing.

To avoid the extra maintenance burden and silently fix potential issues with this kind of workflow, one option would be to lowercase all filenames before matching. This would technically be a breaking change, because on case sensitive filesystems, devs might have already included files with colliding names post-lowercase. Therefore this solution would need a deprecation warning, and then the update.

I guess in short count that in the interest as well :D

brillout commented 2 weeks ago

To avoid the extra maintenance burden and silently fix potential issues

What maintenance burden and potential issues are you referring to?

DecentM commented 2 weeks ago

By maintenance burden I'm referring to your earlier comment about redundant syntax adding DX complexity.

As for potential issues, I vividly remember seeing one particularly nasty one where the MODULE_NOT_FOUND error kept cropping up for various people, even if the same commit was fine for others. This usually got resolved with a reboot/re-clone/file-rename-and-back. Especially for devs on Windows. Eventually we adopted a rule where all files must be hyphen-cased, which seemed to solve it.

brillout commented 2 weeks ago

It's all a bit fuzzy; let me know once you can boil it down to a more precise description/reproduction.