Allow HTML in frontmatter

[zadeviggers]

This isn't an actual RFC - I'm just curious about what people think of this idea.
If someone who knows how this could actually be implemented, feel free to make an actual RFC.

Motivation: When I need to recursively render something like a list, I need to resort to using template literals with html string in them and then injecting that into the page. This works but it's clunky (no syntax highlighting, error detection, or intellisense), slow (no autocomplete), and means that one can't use Astro components, or framework components.

---
function renderRecursivley(stuffToRender) {
  return stuffToRender.map(thing => `<li>
  ${thing.content}
  ${thing.kids ? `<ul>${renderReccursivley(thing.kids)}</ul>` : ""}
</li>`).join("\n");
}
---
<ul>
  <Fragment set:html={renderRecursivley(myListOfThings)} />
</ul>

The only way I could really think of to remedy this is by allowing html to be used in the front matter of the astro component.

Here's the example from before re-written to make use of writing html in the frontmatter:

---
function renderRecursivley(stuffToRender) {
  return stuffToRender.map(thing =>
  <li>
    {thing.content}
    {thing.kids && <ul>{renderReccursivley(thing.kids)}</ul>}
  </li>;
}
---
<ul>
  {renderRecursivley(myListOfThings)}
</ul>

Look how much cleaner that is!

I'm not exactly sure how this would be implemented, but it would just be the same as the html in the component template, except asignable to a variable.

There are quite a few potential drawbacks, including:

• Making astro more confusing to learn - currently the frontmatter is "just typescript", while this would make it much more complex.
• Potentially increase build time - more stuff would have to go through the compiler.

[FredKSchott]

Fun history: this used to work in Astro! It was removed because it was really buggy, and also hard to document & explain to users.

@natemoo-re one thing that comes to mind: since we removed support for this, have our HTML JS-expressions become more JSX-like and less custom? If our HTML JS-expressions are documented as JSX now, then I think there's a much stronger case for JSX inside of frontmatter as well.

[matthewp]

The XML part of expressions work like they do outside of expressions.

I think the main reason for removing support for templates in frontmatter was because we don't parse the frontmatter in the new compiler.

[FredKSchott]

Right, I guess what I'm getting at is: "instead of running our parser on the frontmatter, could we just compile it as TSX instead of TS?"

[aFuzzyBear]

We do have the Astro.self Recursive component now available to us to use. So the following would be written like so:

---
const {myListofThings} = Astro.props
const { RecursiveComponent } = Astro.self
---
<ul>
  {myListOfThings.map(thing=>{
     <li>
        {thing.content}
        {thing.kids && (<Astro.self list={thing.kids}/>)
       </li>
  })}
</ul>

[zadeviggers]

That's a very good point, but I feel like having to create a whole component for a list that's only ever used in one place introduces unnecessary complexity to a site.

Side note: is this documented yet? I don't recall seeing anything about it in the docs.