Skip to content

feat(core,react): support nested repeats with $item in statePath#256

Open
tmchow wants to merge 1 commit intovercel-labs:mainfrom
tmchow:osc/252-fix-nested-repeat
Open

feat(core,react): support nested repeats with $item in statePath#256
tmchow wants to merge 1 commit intovercel-labs:mainfrom
tmchow:osc/252-fix-nested-repeat

Conversation

@tmchow
Copy link
Copy Markdown

@tmchow tmchow commented Apr 2, 2026

Summary

Adds support for nested repeats by allowing $item expressions in repeat.statePath. Inner repeat elements can now reference data from the outer repeat's current item.

Changes

  • packages/core/src/types.ts: Widened repeat.statePath type to string | { $item: string }
  • packages/react/src/renderer.tsx: RepeatChildren now resolves { $item: "field" } against the parent RepeatScope.basePath before reading state
  • Applied the same resolution logic across all renderer packages (react-native, react-email, react-pdf, ink, solid, vue, image)
  • Added regression test for nested repeat with $item statePath

Usage

{
  "type": "Container",
  "repeat": { "statePath": "/companies", "key": "id" },
  "children": ["company-employees"],
  "props": {}
}
{
  "type": "Table",
  "repeat": { "statePath": { "$item": "employees" }, "key": "id" },
  "children": ["employee-row"],
  "props": {}
}

The inner repeat resolves to /companies/0/employees, /companies/1/employees, etc.

Testing

All 893 tests pass (892 existing + 1 new nested repeat test). pnpm type-check passes.

Fixes #252

This contribution was developed with AI assistance (Codex).

Inner repeat elements can now reference the outer repeat's item data
by using { $item: "fieldName" } as statePath instead of a static
string. The repeat renderer resolves $item against the parent
RepeatScope's basePath.

Example: { repeat: { statePath: { $item: "subitems" } } } inside
an outer repeat over /companies resolves to /companies/0/subitems,
/companies/1/subitems, etc.

Applied the same statePath resolution across all renderer packages
(react, react-native, react-email, react-pdf, ink, solid, vue, image).

Fixes vercel-labs#252
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 2, 2026

@tmchow is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Nested repeat in json renderer

1 participant