[✨] Nested named layout

[motss]

Is your feature request related to a problem?

Qwik supports named layout with the following folder structure:

- src/
 |- routes/
 |   |- layout.tsx # Default parent layout
 |   |- layout-narrow.tsx # Default parent named layout
 |   |- index.tsx # Layout: layout.tsx
 |   `- contact/
 |       `- [email protected] # Child named layout (Layout: /routes/layout-narrow.tsx)

However, it seems like it does not support nested named layout with the following folder structure:

- src/
 |- routes/
 |   |- layout.tsx # Default parent layout
 |   |- layout-narrow.tsx # Default parent named layout
 |   |- layout-narrow2.tsx # Default parent named layout 2
 |   |- index.tsx # Layout: /routes/layout.tsx
 |   `- contact/
 |        |- [email protected] # Layout: /routes/layout-narrow.tsx
 |        |- layout.tsx # Default child layout (Layout: /routes/layout.tsx)
 |        |- [email protected] # This is not supported (Expected layout: /routes/layout-narrow2.tsx)
 |        |- layout-narrow2.tsx # Default child named layout (Layout: /routes/layout.tsx)
 |        `- contact-1/
 |             `- [email protected] # Layout: /routes/contact/layout-narrow2.tsx

In the above example, there are two layouts that apply themselves around the /contact-1 page component:

1. src/routes/layout-narrow2.tsx
2. src/routes/[email protected]

We should be able to define the parent layout of a child layout in Qwik City like [email protected]. However, as of [email protected], [email protected] does not work and /routes/contact/layout-narrow2.tsx is forced to always render with /routes/layout.tsx.

Describe the solution you'd like

To be able to define a named layout for another named layout as Qwik currently supports only defining a named layout to index.{tsx,mdx} instead of a layout.tsx, for instance,

Expected behavior

We should be able to define named layout for layouts.

# Example 1: Expected rendering flow:
/routes/layout-narrow.tsx
/routes/contact/[email protected]
/routes/contact/contact-1/[email protected]
/routes/contact/contact-1/[email protected]

# Example 2: Expected rendering flow:
/routes/layout-narrow.tsx
/routes/contact/[email protected]
/routes/contact/contact-1/layout-narrow.tsx
/routes/contact/contact-1/[email protected]

# Example 3: Expected rendering flow:
/routes/layout.tsx
/routes/contact/layout.tsx
/routes/contact/contact-1/layout-narrow.tsx
/routes/contact/contact-1/[email protected]

# Example 4: Expected rendering flow:
/routes/layout.tsx
/routes/contact/layout-narrow.tsx
/routes/contact/contact-1/[email protected]
/routes/contact/contact-1/index.tsx

Actual behavior

We can only specify named layout in an index.{tsx,mdx} file like [email protected] and layout-narrow.tsx is always defaulting to a layout.tsx at upper level.

# Actual rendering flow:
/routes/layout.tsx
/routes/contact/layout.tsx
/routes/contact/contact-1/layout-narrow.tsx
/routes/contact/contact-1/[email protected]

Describe alternatives you've considered

Avoid using nested named layout

Additional context

No response

[wmertens]

@motss I don't understand, what is the use case? How should it detect what name to use?

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.