[PR #780] [MERGED] fix: interleave templates with layouts at each segment level #840

New issue

Closed

opened 2026-05-06 13:10:24 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:10:24 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/780
Author: @NathanDrake2406
Created: 4/4/2026
Status: ✅ Merged
Merged: 4/5/2026
Merged by: @james-elicx

Base: main ← Head: fix/template-layout-interleaving

📝 Commits (2)

8a17341 fix: interleave templates with layouts at each segment level
78c338c fix: align templates array with layouts to prevent index mismatch

📊 Changes

4 files changed (+108 additions, -33 deletions)

View changed files

📝 packages/vinext/src/entries/app-rsc-entry.ts (+9 -4)
📝 packages/vinext/src/routing/app-router.ts (+25 -15)
📝 packages/vinext/src/server/app-page-route-wiring.tsx (+8 -12)
📝 tests/app-page-route-wiring.test.ts (+66 -2)

📄 Description

Summary

Templates were being grouped and wrapped as a batch separately from layouts, producing the wrong component tree
Moved template wrapping into the layout loop so each template sits inside its corresponding layout at the correct directory level

Before (wrong):

Layout[0] > Layout[1] > Template[0] > Template[1] > Page

After (matches Next.js):

Layout[0] > Template[0] > Layout[1] > Template[1] > Page

Next.js nests per segment as: Layout > Template > ErrorBoundary > Loading > NotFound > children. The separate template batch loop in buildAppPageRouteElement violated this by applying all templates after all layouts were already wrapped.

The fix removes the separate template loop and integrates template wrapping into the layout loop at each index, between the error boundary and the not-found boundary — matching Next.js's layout-router.tsx nesting order.

Changed files

packages/vinext/src/server/app-page-route-wiring.tsx — moved template wrapping into the layout loop
tests/app-page-route-wiring.test.ts — added multi-level template interleaving test that verifies Layout[0] > Template[0] > Layout[1] > Template[1] > Page ordering

Test plan

New unit test verifies correct interleaving order with 2 layouts and 2 templates
Existing template/slot/segment-provider test still passes with renamed components
pnpm test tests/app-page-route-wiring.test.ts — 9/9 pass
pnpm test tests/app-router.test.ts — 285/285 pass
pnpm test tests/features.test.ts — 264/264 pass
CI: full Vitest suite + Playwright E2E

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/780 **Author:** [@NathanDrake2406](https://github.com/NathanDrake2406) **Created:** 4/4/2026 **Status:** ✅ Merged **Merged:** 4/5/2026 **Merged by:** [@james-elicx](https://github.com/james-elicx) **Base:** `main` ← **Head:** `fix/template-layout-interleaving` --- ### 📝 Commits (2) - [`8a17341`](https://github.com/cloudflare/vinext/commit/8a173415ce7ac1314af1bc54e2fcf420dd64e7f4) fix: interleave templates with layouts at each segment level - [`78c338c`](https://github.com/cloudflare/vinext/commit/78c338c75f68dc6d610c85659ca7d6d89896e632) fix: align templates array with layouts to prevent index mismatch ### 📊 Changes **4 files changed** (+108 additions, -33 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/entries/app-rsc-entry.ts` (+9 -4) 📝 `packages/vinext/src/routing/app-router.ts` (+25 -15) 📝 `packages/vinext/src/server/app-page-route-wiring.tsx` (+8 -12) 📝 `tests/app-page-route-wiring.test.ts` (+66 -2) </details> ### 📄 Description ## Summary - Templates were being grouped and wrapped as a batch separately from layouts, producing the wrong component tree - Moved template wrapping into the layout loop so each template sits inside its corresponding layout at the correct directory level **Before (wrong):** ``` Layout[0] > Layout[1] > Template[0] > Template[1] > Page ``` **After (matches Next.js):** ``` Layout[0] > Template[0] > Layout[1] > Template[1] > Page ``` Next.js nests per segment as: `Layout > Template > ErrorBoundary > Loading > NotFound > children`. The separate template batch loop in `buildAppPageRouteElement` violated this by applying all templates after all layouts were already wrapped. The fix removes the separate template loop and integrates template wrapping into the layout loop at each index, between the error boundary and the not-found boundary — matching Next.js's `layout-router.tsx` nesting order. ## Changed files - `packages/vinext/src/server/app-page-route-wiring.tsx` — moved template wrapping into the layout loop - `tests/app-page-route-wiring.test.ts` — added multi-level template interleaving test that verifies `Layout[0] > Template[0] > Layout[1] > Template[1] > Page` ordering ## Test plan - [x] New unit test verifies correct interleaving order with 2 layouts and 2 templates - [x] Existing template/slot/segment-provider test still passes with renamed components - [x] `pnpm test tests/app-page-route-wiring.test.ts` — 9/9 pass - [x] `pnpm test tests/app-router.test.ts` — 285/285 pass - [x] `pnpm test tests/features.test.ts` — 264/264 pass - [ ] CI: full Vitest suite + Playwright E2E --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>