RFC Draft - Recursive Rendering #45
sgruenholz2
started this conversation in
Proposal
Replies: 1 comment
-
RFC Notes:
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Summary
Allow a way for astro components to render themselves recursively.
Nested data structures are everywhere. Common examples include nested blog comments,
file explorer trees, extensive navigation menu trees, or using a headless CMS and nested content blocks to render an entire website.
Even when the entire tree structure is KNOWN, for anything more than a few levels deep,
using a recursive Component/function for rendering is the most efficient and elegant approach.
When the tree structure is UNKNOWN, and you want to support N levels deep, using a recursive
Component/function is the ONLY approach that will work. This is often the case
when fetching data from an API.
Svelte, which also uses the same "single component per file" pattern has already
encountered and solved for this issue by exposing the svelte:self
attribute as part of their API.
Example
We have a set of items we want to render, stored in an object, indexed by id.
Each item optionally defines an array of childIds.
We want to use a recursive component to render the entire tree,
(or one of its branches) by passing in both the entire tree (the items object)
and an itemId like this:
Note that in the above example, we're using a
<Self />
component as a placeholder APIfor the Component to reference itself. The syntax and exact means by which this
is accomplished is a secondary conversation to have after deciding to allow
for this basic recursive rendering behavior.
Motivation
Whether or not to implement this depends on how Astro is positioned. Is it merely a
"bring your own platform" SSG or does it want to provide its own 1st class
component framework?
Detailed design
Exact design details TBD after choosing to support recursive rendering in general.
To have a starting place for discussion, I propose that we expose a function
in the front matter of the component that lets you reference a new instance of the
same component, allowing the developer to name the component whatever they wish.
Drawbacks
Alternatives
Currently, recursive rendering can be achieved with any number of other
platforms: React, Vue, Svelte, etc., so the answer here may well be:
"Do that in your own platform".
Adoption strategy
TBD
Unresolved questions
Syntax, API
Beta Was this translation helpful? Give feedback.
All reactions