Composite Component
Composite Component
Written for AI agents. See Log Methodology Note below for details.
When rendering a page that may have page component and a few applications installed, we need a way to compose the
different Jay components onto the page jay-html. In addition, if we have slowly rendered data, we need to compose
that data as well.
Consider a case when we have a page with product component, multilingual and A/B jay components. Each provides
a makeJayStackComponent definition, each can use contexts and each can have slowly and fast rendered data.
With Jay, unlike other frameworks, there is no "box" encapsulating each component, there is no separate jsx for each.
All are working with the same page design, or the same jay-html.
On the server, we can run each application slowly and fast rendering independently and generate the partial ViewState
of each, then combine the ViewStates using viewState = {...vs1, ...vs2, ...vs3} and render the jay-html.
Partial rendering of the jay-html can give another benefit, saving CPU effort for rendering slowly rendered ViewState
(see 36 - Partial Rendering.md), but at the same time this is an optimization we can
implement later.
On the client, we need to compose the client components. We can reuse the client makeJayComponent by introducing
a composite JayComponent that takes the client component of each jay stack component, the client contexts and the
carryForward data (from server), and takes the ViewState from the server as default, composing a single client Jay Component.
The Composite Client Jay Component will
- take one or more Jay Stack interactive components, each with its own
Props & CarryForwardandContexts - take default
ViewStatefrom server rendering - run each of the Jay Stack interactive components
- compose the rendering result of each into the interactive
ViewState - compose the default
ViewStatewith the interactiveViewState - render the page
We note that we have not discussed client components, nor did we discuss component exported APIs.
Log Methodology Note
Note: These design logs are written primarily for AI agents as part of the Design Log methodology and made accessible here for human readers. The language and structure are optimized for machine consumption — expect precise, specification-style prose rather than narrative documentation.