Allow parallel route slot names in kebab-case

[joulev]

What?

This PR adds support for parallel route slot names written with kebab-case. So instead of @deleteModal, we can have @delete-modal.

Why?

There are projects that prefer to use exclusively kebab-case for file/folder names due to various reasons, such as to prevent issues related to how different operating systems handle file system casing.

However, currently, parallel route slot names must be a valid JavaScript variable name. This PR aims to relax this requirement.

How?

- .map(([key, value]) => `${key}: ${value}`)
+ .map(([key, value]) => `${JSON.stringify(key)}: ${value}`)

This alone is not enough to support parallel route slot names like @!@#$%^&*(), but should be well enough to support more normal file name conventions. (Even slot names with a space are supported.)

Notes

It might be a cool idea to automatically transform kebab-case slot names to camelCase, sort of like how Nuxt does transforming for component names. If this sounds good to you, let me know and I will try to implement that.

app/
  @slot-name/
    ...
  layout.tsx <- { children: React.ReactNode, slotName: React.ReactNode }

This PR supersedes #67151 after fixing merge conflicts.

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: 2d3db91

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[wyattjoh]

In order to facilitate deployment to platforms like Vercel that construct their slot names based on regular expressions, we don't have a mechanism yet to allow kebab casing for names as the - character is not allowed within a named regular expression capture group.

In order to make this work, mappings would need to be generated within the build to create associations between the non-kebab cased names (serialized in some form).

Unfortunately this requires quite a bit of work.